From 64d79e677567af482f25f0265c875e5986e1adc4 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Wed, 20 May 2026 10:43:18 +0800
Subject: [PATCH] docs: stage-1 i18n coverage + news

---
 README.md                                     |    1 +
 docs-readme/ar-SA/README.md                   |    1 +
 docs-readme/de-DE/README.md                   |    1 +
 docs-readme/en-US/README.md                   |    1 +
 docs-readme/es-ES/README.md                   |    1 +
 docs-readme/fr-FR/README.md                   |    1 +
 docs-readme/ja-JP/README.md                   |    1 +
 docs-readme/ko-KR/README.md                   |    1 +
 docs-readme/vi-VN/README.md                   |    1 +
 docs-readme/zh-CN/README.md                   |    1 +
 docs-readme/zh-TW/README.md                   |    1 +
 docs/DEPLOYMENT.md                            |  146 +-
 docs/ar-sa/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/index.md    |  756 +++++++
 .../appendix-a-product-thinking/index.md      | 1080 ++++++++++
 .../vibe-coding-tools-snake-game-tutorial.md  |  359 ++++
 ...ebsite-with-ai-coding-and-design-agents.md |  348 ++++
 .../stage-1/appendix-b-common-errors/index.md |  325 +++
 .../appendix-c-consumer-scenarios/index.md    |  641 ++++++
 .../appendix-consumer-scenarios/index.md      | 1348 +++++++++++++
 .../stage-1/appendix-double-diamond/index.md  |  544 +++++
 .../stage-1/appendix-idea-sources/index.md    |  301 +++
 .../appendix-industry-scenarios/index.md      |  764 +++++++
 .../stage-1/appendix-jobs-to-be-done/index.md |  494 +++++
 docs/ar-sa/stage-1/appendix-mom-test/index.md |  589 ++++++
 docs/ar-sa/stage-1/building-prototype/images  |    1 +
 .../ar-sa/stage-1/building-prototype/index.md |  604 ++++++
 .../complete-project-practice/index.md        |  301 +++
 .../ar-sa/stage-1/finding-great-idea/index.md | 1082 ++++++++++
 .../integrating-ai-capabilities/index.md      |  803 ++++++++
 .../stage-1/introduction-to-ai-ide/index.md   | 1246 ++++++++++++
 docs/ar-sa/stage-1/learning-map/index.md      |  275 +++
 docs/de-de/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/index.md    |  768 +++++++
 .../appendix-a-product-thinking/index.md      |  154 ++
 .../vibe-coding-tools-snake-game-tutorial.md  |  359 ++++
 ...ebsite-with-ai-coding-and-design-agents.md |  348 ++++
 .../stage-1/appendix-b-common-errors/index.md |  325 +++
 .../appendix-c-consumer-scenarios/index.md    |  642 ++++++
 .../appendix-consumer-scenarios/index.md      |  232 +++
 .../stage-1/appendix-double-diamond/index.md  |  544 +++++
 .../stage-1/appendix-idea-sources/index.md    |  301 +++
 .../appendix-industry-scenarios/index.md      |  719 +++++++
 .../stage-1/appendix-jobs-to-be-done/index.md |  496 +++++
 docs/de-de/stage-1/appendix-mom-test/index.md |  589 ++++++
 .../de-de/stage-1/building-prototype/index.md |  650 ++++++
 .../complete-project-practice/index.md        |  301 +++
 .../de-de/stage-1/finding-great-idea/index.md | 1078 ++++++++++
 .../integrating-ai-capabilities/index.md      |  812 ++++++++
 .../stage-1/introduction-to-ai-ide/index.md   |  493 +++++
 docs/de-de/stage-1/learning-map/index.md      |  275 +++
 docs/en/guide/introduction.md                 |   82 +
 .../ai-capabilities-through-games/index.md    |    5 +
 .../vibe-coding-tools-snake-game-tutorial.md  |    5 +
 ...ebsite-with-ai-coding-and-design-agents.md |    5 +
 .../integrating-ai-capabilities/index.md      |    2 +-
 .../stage-1/introduction-to-ai-ide/index.md   |    4 +
 .../backend/database-supabase/index.md        | 1774 +----------------
 .../stage-2/frontend/lovart-assets/index.md   |  982 +--------
 .../cross-platform/android-app/index.md       |    8 +-
 docs/es-es/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/index.md    |  219 ++
 .../appendix-a-product-thinking/index.md      |  152 ++
 .../vibe-coding-tools-snake-game-tutorial.md  |  359 ++++
 ...ebsite-with-ai-coding-and-design-agents.md |  348 ++++
 .../stage-1/appendix-b-common-errors/index.md |  325 +++
 .../appendix-c-consumer-scenarios/index.md    |  642 ++++++
 .../appendix-consumer-scenarios/index.md      | 1350 +++++++++++++
 .../stage-1/appendix-double-diamond/index.md  |  544 +++++
 .../stage-1/appendix-idea-sources/index.md    |  301 +++
 .../appendix-industry-scenarios/index.md      |  765 +++++++
 .../stage-1/appendix-jobs-to-be-done/index.md |  496 +++++
 docs/es-es/stage-1/appendix-mom-test/index.md |  589 ++++++
 .../es-es/stage-1/building-prototype/index.md |  605 ++++++
 .../complete-project-practice/index.md        |  301 +++
 .../es-es/stage-1/finding-great-idea/index.md |  139 ++
 .../integrating-ai-capabilities/index.md      |  808 ++++++++
 .../stage-1/introduction-to-ai-ide/index.md   | 1252 ++++++++++++
 docs/es-es/stage-1/learning-map/index.md      |  275 +++
 docs/fr-fr/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/images      |    1 +
 .../ai-capabilities-through-games/index.md    |  679 +++++++
 .../appendix-a-product-thinking/images        |    1 +
 .../appendix-a-product-thinking/index.md      | 1100 ++++++++++
 .../vibe-coding-tools-snake-game-tutorial.md  |  359 ++++
 ...ebsite-with-ai-coding-and-design-agents.md |  348 ++++
 .../stage-1/appendix-b-common-errors/index.md |  325 +++
 .../appendix-c-consumer-scenarios/images      |    1 +
 .../appendix-c-consumer-scenarios/index.md    |  642 ++++++
 .../appendix-consumer-scenarios/images        |    1 +
 .../appendix-consumer-scenarios/index.md      | 1340 +++++++++++++
 .../stage-1/appendix-double-diamond/index.md  |  542 +++++
 .../stage-1/appendix-idea-sources/index.md    |  301 +++
 .../appendix-industry-scenarios/index.md      |  698 +++++++
 .../stage-1/appendix-jobs-to-be-done/index.md |  496 +++++
 docs/fr-fr/stage-1/appendix-mom-test/index.md |  589 ++++++
 docs/fr-fr/stage-1/building-prototype/images  |    1 +
 .../fr-fr/stage-1/building-prototype/index.md |  607 ++++++
 .../complete-project-practice/index.md        |  301 +++
 docs/fr-fr/stage-1/finding-great-idea/images  |    1 +
 .../fr-fr/stage-1/finding-great-idea/index.md | 1071 ++++++++++
 .../integrating-ai-capabilities/images        |    1 +
 .../integrating-ai-capabilities/index.md      |  808 ++++++++
 .../stage-1/introduction-to-ai-ide/images     |    1 +
 .../stage-1/introduction-to-ai-ide/index.md   | 1247 ++++++++++++
 docs/fr-fr/stage-1/learning-map/index.md      |  275 +++
 docs/index.md                                 |   12 +-
 docs/ja-jp/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/images      |    1 +
 .../ai-capabilities-through-games/index.md    |  765 +++++++
 .../appendix-a-product-thinking/images        |    1 +
 .../appendix-a-product-thinking/index.md      |  899 +++++++++
 .../vibe-coding-tools-snake-game-tutorial.md  |  355 ++++
 ...ebsite-with-ai-coding-and-design-agents.md |  344 ++++
 .../stage-1/appendix-b-common-errors/index.md |  325 +++
 .../appendix-c-consumer-scenarios/index.md    |  633 ++++++
 .../appendix-consumer-scenarios/index.md      | 1350 +++++++++++++
 .../stage-1/appendix-double-diamond/index.md  |  544 +++++
 .../stage-1/appendix-idea-sources/index.md    |  301 +++
 .../appendix-industry-scenarios/index.md      |  696 +++++++
 .../stage-1/appendix-jobs-to-be-done/index.md |  496 +++++
 docs/ja-jp/stage-1/appendix-mom-test/index.md |  589 ++++++
 docs/ja-jp/stage-1/building-prototype/images  |    1 +
 .../ja-jp/stage-1/building-prototype/index.md |  605 ++++++
 .../complete-project-practice/index.md        |  301 +++
 .../ja-jp/stage-1/finding-great-idea/index.md | 1085 ++++++++++
 .../integrating-ai-capabilities/images        |    1 +
 .../integrating-ai-capabilities/index.md      |  808 ++++++++
 .../stage-1/introduction-to-ai-ide/images     |    1 +
 .../stage-1/introduction-to-ai-ide/index.md   | 1164 +++++++++++
 docs/ja-jp/stage-1/learning-map/index.md      |  275 +++
 docs/ko-kr/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/index.md    |    4 +
 .../vibe-coding-tools-snake-game-tutorial.md  |  341 ++--
 ...ebsite-with-ai-coding-and-design-agents.md |  214 +-
 .../stage-1/appendix-b-common-errors/index.md |  243 ++-
 .../stage-1/appendix-double-diamond/index.md  |  559 +++---
 .../stage-1/appendix-idea-sources/index.md    |  281 ++-
 .../stage-1/appendix-jobs-to-be-done/index.md |  539 +++--
 docs/ko-kr/stage-1/appendix-mom-test/index.md |  627 +++---
 .../complete-project-practice/index.md        |  216 +-
 .../stage-1/introduction-to-ai-ide/index.md   |    4 +
 docs/ko-kr/stage-1/learning-map/index.md      |  173 +-
 docs/public/sitemap.xml                       |  665 +++---
 docs/vi-vn/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/index.md    |  225 +++
 .../appendix-a-product-thinking/index.md      |  152 ++
 .../vibe-coding-tools-snake-game-tutorial.md  |  359 ++++
 ...ebsite-with-ai-coding-and-design-agents.md |  348 ++++
 .../stage-1/appendix-b-common-errors/index.md |  325 +++
 .../appendix-c-consumer-scenarios/index.md    |  642 ++++++
 .../appendix-consumer-scenarios/index.md      |   10 +
 .../stage-1/appendix-double-diamond/index.md  |  544 +++++
 .../stage-1/appendix-idea-sources/index.md    |  301 +++
 .../appendix-industry-scenarios/index.md      |  765 +++++++
 .../stage-1/appendix-jobs-to-be-done/index.md |  496 +++++
 docs/vi-vn/stage-1/appendix-mom-test/index.md |  589 ++++++
 .../vi-vn/stage-1/building-prototype/index.md |  489 +++++
 .../complete-project-practice/index.md        |  301 +++
 .../vi-vn/stage-1/finding-great-idea/index.md |  206 ++
 .../integrating-ai-capabilities/index.md      |  808 ++++++++
 .../stage-1/introduction-to-ai-ide/index.md   | 1251 ++++++++++++
 docs/vi-vn/stage-1/learning-map/index.md      |  275 +++
 .../ai-capabilities-through-games/index.md    |    5 +
 .../vibe-coding-tools-snake-game-tutorial.md  |    5 +
 ...ebsite-with-ai-coding-and-design-agents.md |    5 +
 .../stage-1/introduction-to-ai-ide/index.md   |    4 +
 docs/zh-tw/guide/introduction.md              |   82 +
 .../ai-capabilities-through-games/index.md    |  768 +++++++
 .../appendix-a-product-thinking/index.md      | 1099 ++++++++++
 .../vibe-coding-tools-snake-game-tutorial.md  |  359 ++++
 ...ebsite-with-ai-coding-and-design-agents.md |  348 ++++
 .../stage-1/appendix-b-common-errors/index.md |  325 +++
 .../appendix-c-consumer-scenarios/index.md    |  642 ++++++
 .../appendix-consumer-scenarios/index.md      | 1350 +++++++++++++
 .../stage-1/appendix-double-diamond/index.md  |  544 +++++
 .../stage-1/appendix-idea-sources/index.md    |  301 +++
 .../appendix-industry-scenarios/index.md      |  765 +++++++
 .../stage-1/appendix-jobs-to-be-done/index.md |  496 +++++
 docs/zh-tw/stage-1/appendix-mom-test/index.md |  589 ++++++
 .../zh-tw/stage-1/building-prototype/index.md |  605 ++++++
 .../complete-project-practice/index.md        |  301 +++
 .../zh-tw/stage-1/finding-great-idea/index.md | 1087 ++++++++++
 .../integrating-ai-capabilities/index.md      |  808 ++++++++
 .../stage-1/introduction-to-ai-ide/index.md   | 1251 ++++++++++++
 docs/zh-tw/stage-1/learning-map/index.md      |  275 +++
 scripts/generate-sitemap.mjs                  |   10 +-
 187 files changed, 76703 insertions(+), 4576 deletions(-)
 create mode 100644 docs/ar-sa/guide/introduction.md
 create mode 100644 docs/ar-sa/stage-1/ai-capabilities-through-games/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-a-product-thinking/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/ar-sa/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
 create mode 100644 docs/ar-sa/stage-1/appendix-b-common-errors/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-c-consumer-scenarios/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-consumer-scenarios/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-double-diamond/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-idea-sources/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-industry-scenarios/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-jobs-to-be-done/index.md
 create mode 100644 docs/ar-sa/stage-1/appendix-mom-test/index.md
 create mode 120000 docs/ar-sa/stage-1/building-prototype/images
 create mode 100644 docs/ar-sa/stage-1/building-prototype/index.md
 create mode 100644 docs/ar-sa/stage-1/complete-project-practice/index.md
 create mode 100644 docs/ar-sa/stage-1/finding-great-idea/index.md
 create mode 100644 docs/ar-sa/stage-1/integrating-ai-capabilities/index.md
 create mode 100644 docs/ar-sa/stage-1/introduction-to-ai-ide/index.md
 create mode 100644 docs/ar-sa/stage-1/learning-map/index.md
 create mode 100644 docs/de-de/guide/introduction.md
 create mode 100644 docs/de-de/stage-1/ai-capabilities-through-games/index.md
 create mode 100644 docs/de-de/stage-1/appendix-a-product-thinking/index.md
 create mode 100644 docs/de-de/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/de-de/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
 create mode 100644 docs/de-de/stage-1/appendix-b-common-errors/index.md
 create mode 100644 docs/de-de/stage-1/appendix-c-consumer-scenarios/index.md
 create mode 100644 docs/de-de/stage-1/appendix-consumer-scenarios/index.md
 create mode 100644 docs/de-de/stage-1/appendix-double-diamond/index.md
 create mode 100644 docs/de-de/stage-1/appendix-idea-sources/index.md
 create mode 100644 docs/de-de/stage-1/appendix-industry-scenarios/index.md
 create mode 100644 docs/de-de/stage-1/appendix-jobs-to-be-done/index.md
 create mode 100644 docs/de-de/stage-1/appendix-mom-test/index.md
 create mode 100644 docs/de-de/stage-1/building-prototype/index.md
 create mode 100644 docs/de-de/stage-1/complete-project-practice/index.md
 create mode 100644 docs/de-de/stage-1/finding-great-idea/index.md
 create mode 100644 docs/de-de/stage-1/integrating-ai-capabilities/index.md
 create mode 100644 docs/de-de/stage-1/introduction-to-ai-ide/index.md
 create mode 100644 docs/de-de/stage-1/learning-map/index.md
 create mode 100644 docs/en/guide/introduction.md
 create mode 100644 docs/es-es/guide/introduction.md
 create mode 100644 docs/es-es/stage-1/ai-capabilities-through-games/index.md
 create mode 100644 docs/es-es/stage-1/appendix-a-product-thinking/index.md
 create mode 100644 docs/es-es/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/es-es/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
 create mode 100644 docs/es-es/stage-1/appendix-b-common-errors/index.md
 create mode 100644 docs/es-es/stage-1/appendix-c-consumer-scenarios/index.md
 create mode 100644 docs/es-es/stage-1/appendix-consumer-scenarios/index.md
 create mode 100644 docs/es-es/stage-1/appendix-double-diamond/index.md
 create mode 100644 docs/es-es/stage-1/appendix-idea-sources/index.md
 create mode 100644 docs/es-es/stage-1/appendix-industry-scenarios/index.md
 create mode 100644 docs/es-es/stage-1/appendix-jobs-to-be-done/index.md
 create mode 100644 docs/es-es/stage-1/appendix-mom-test/index.md
 create mode 100644 docs/es-es/stage-1/building-prototype/index.md
 create mode 100644 docs/es-es/stage-1/complete-project-practice/index.md
 create mode 100644 docs/es-es/stage-1/finding-great-idea/index.md
 create mode 100644 docs/es-es/stage-1/integrating-ai-capabilities/index.md
 create mode 100644 docs/es-es/stage-1/introduction-to-ai-ide/index.md
 create mode 100644 docs/es-es/stage-1/learning-map/index.md
 create mode 100644 docs/fr-fr/guide/introduction.md
 create mode 120000 docs/fr-fr/stage-1/ai-capabilities-through-games/images
 create mode 100644 docs/fr-fr/stage-1/ai-capabilities-through-games/index.md
 create mode 120000 docs/fr-fr/stage-1/appendix-a-product-thinking/images
 create mode 100644 docs/fr-fr/stage-1/appendix-a-product-thinking/index.md
 create mode 100644 docs/fr-fr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/fr-fr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
 create mode 100644 docs/fr-fr/stage-1/appendix-b-common-errors/index.md
 create mode 120000 docs/fr-fr/stage-1/appendix-c-consumer-scenarios/images
 create mode 100644 docs/fr-fr/stage-1/appendix-c-consumer-scenarios/index.md
 create mode 120000 docs/fr-fr/stage-1/appendix-consumer-scenarios/images
 create mode 100644 docs/fr-fr/stage-1/appendix-consumer-scenarios/index.md
 create mode 100644 docs/fr-fr/stage-1/appendix-double-diamond/index.md
 create mode 100644 docs/fr-fr/stage-1/appendix-idea-sources/index.md
 create mode 100644 docs/fr-fr/stage-1/appendix-industry-scenarios/index.md
 create mode 100644 docs/fr-fr/stage-1/appendix-jobs-to-be-done/index.md
 create mode 100644 docs/fr-fr/stage-1/appendix-mom-test/index.md
 create mode 120000 docs/fr-fr/stage-1/building-prototype/images
 create mode 100644 docs/fr-fr/stage-1/building-prototype/index.md
 create mode 100644 docs/fr-fr/stage-1/complete-project-practice/index.md
 create mode 120000 docs/fr-fr/stage-1/finding-great-idea/images
 create mode 100644 docs/fr-fr/stage-1/finding-great-idea/index.md
 create mode 120000 docs/fr-fr/stage-1/integrating-ai-capabilities/images
 create mode 100644 docs/fr-fr/stage-1/integrating-ai-capabilities/index.md
 create mode 120000 docs/fr-fr/stage-1/introduction-to-ai-ide/images
 create mode 100644 docs/fr-fr/stage-1/introduction-to-ai-ide/index.md
 create mode 100644 docs/fr-fr/stage-1/learning-map/index.md
 create mode 100644 docs/ja-jp/guide/introduction.md
 create mode 120000 docs/ja-jp/stage-1/ai-capabilities-through-games/images
 create mode 100644 docs/ja-jp/stage-1/ai-capabilities-through-games/index.md
 create mode 120000 docs/ja-jp/stage-1/appendix-a-product-thinking/images
 create mode 100644 docs/ja-jp/stage-1/appendix-a-product-thinking/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/ja-jp/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
 create mode 100644 docs/ja-jp/stage-1/appendix-b-common-errors/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-c-consumer-scenarios/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-consumer-scenarios/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-double-diamond/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-idea-sources/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-industry-scenarios/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-jobs-to-be-done/index.md
 create mode 100644 docs/ja-jp/stage-1/appendix-mom-test/index.md
 create mode 120000 docs/ja-jp/stage-1/building-prototype/images
 create mode 100644 docs/ja-jp/stage-1/building-prototype/index.md
 create mode 100644 docs/ja-jp/stage-1/complete-project-practice/index.md
 create mode 100644 docs/ja-jp/stage-1/finding-great-idea/index.md
 create mode 120000 docs/ja-jp/stage-1/integrating-ai-capabilities/images
 create mode 100644 docs/ja-jp/stage-1/integrating-ai-capabilities/index.md
 create mode 120000 docs/ja-jp/stage-1/introduction-to-ai-ide/images
 create mode 100644 docs/ja-jp/stage-1/introduction-to-ai-ide/index.md
 create mode 100644 docs/ja-jp/stage-1/learning-map/index.md
 create mode 100644 docs/ko-kr/guide/introduction.md
 create mode 100644 docs/vi-vn/guide/introduction.md
 create mode 100644 docs/vi-vn/stage-1/ai-capabilities-through-games/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-a-product-thinking/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/vi-vn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
 create mode 100644 docs/vi-vn/stage-1/appendix-b-common-errors/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-c-consumer-scenarios/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-consumer-scenarios/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-double-diamond/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-idea-sources/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-industry-scenarios/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-jobs-to-be-done/index.md
 create mode 100644 docs/vi-vn/stage-1/appendix-mom-test/index.md
 create mode 100644 docs/vi-vn/stage-1/building-prototype/index.md
 create mode 100644 docs/vi-vn/stage-1/complete-project-practice/index.md
 create mode 100644 docs/vi-vn/stage-1/finding-great-idea/index.md
 create mode 100644 docs/vi-vn/stage-1/integrating-ai-capabilities/index.md
 create mode 100644 docs/vi-vn/stage-1/introduction-to-ai-ide/index.md
 create mode 100644 docs/vi-vn/stage-1/learning-map/index.md
 create mode 100644 docs/zh-tw/guide/introduction.md
 create mode 100644 docs/zh-tw/stage-1/ai-capabilities-through-games/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-a-product-thinking/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
 create mode 100644 docs/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
 create mode 100644 docs/zh-tw/stage-1/appendix-b-common-errors/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-c-consumer-scenarios/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-consumer-scenarios/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-double-diamond/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-idea-sources/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-industry-scenarios/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-jobs-to-be-done/index.md
 create mode 100644 docs/zh-tw/stage-1/appendix-mom-test/index.md
 create mode 100644 docs/zh-tw/stage-1/building-prototype/index.md
 create mode 100644 docs/zh-tw/stage-1/complete-project-practice/index.md
 create mode 100644 docs/zh-tw/stage-1/finding-great-idea/index.md
 create mode 100644 docs/zh-tw/stage-1/integrating-ai-capabilities/index.md
 create mode 100644 docs/zh-tw/stage-1/introduction-to-ai-ide/index.md
 create mode 100644 docs/zh-tw/stage-1/learning-map/index.md

diff --git a/README.md b/README.md
index 9382ce1..1db954d 100644
--- a/README.md
+++ b/README.md
@@ -145,6 +145,7 @@ Easy-Vibe teaches you how to turn that into a real product.
 
 ## 🔥 News
 
+- **[2026-05-20]** 🌍 **Stage 1 multilingual coverage is now complete**: Stage 1 is fully available across all supported locales (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn). Navigation/build checks have been verified to avoid 404s.
 - **[2026-03-29]** ✨ **Vibe Stories launched and upgraded with real user journeys**: Added a new homepage Vibe Stories section with an interactive carousel and dedicated story pages, then replaced placeholder content with four real user stories featuring a rural primary school teacher, a college student, a high school IT teacher, and a truck driver who built real products with AI. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **Major Stage 2 practice update**: Completed the SaaS capstone project "[Your First SaaS Full-Stack App: Copywriting Generator Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" and substantially expanded the "[How to integrate Stripe and payment systems](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" section, plus key content around multi-product UI and WeChat Mini Program backend workflows.
 - **[2026-03-25]** 📚 **New appendix: User Research and Requirement Validation**: Added four new articles covering idea sourcing, the Double Diamond model, Jobs to Be Done, and The Mom Test to help beginners discover and validate product ideas. [👉 Read the appendix](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/ar-SA/README.md b/docs-readme/ar-SA/README.md
index 64edd49..df2ae37 100644
--- a/docs-readme/ar-SA/README.md
+++ b/docs-readme/ar-SA/README.md
@@ -145,6 +145,7 @@ Easy-Vibe يعلمك كيف تحول ذلك إلى منتج حقيقي.
 
 ## 🔥 News
 
+- **[2026-05-20]** 🌍 **اكتمال تغطية المرحلة 1 متعددة اللغات**: اصبحت المرحلة 1 متاحة بالكامل بجميع اللغات المدعومة (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn)، وتم التحقق من التنقل/البناء لتجنب 404.
 - **[2026-03-29]** ✨ **إطلاق قسم قصص المستخدمين وتحديثه بأربع قصص حقيقية**: أضفنا في الصفحة الرئيسية شريط قصص تفاعليًا وصفحات مستقلة للقصص، ثم استبدلنا المحتوى المؤقت بأربع قصص حقيقية لمدرسة ريفية وطالبة جامعية ومعلم تقنية معلومات في الثانوية وسائق شاحنة بنوا منتجات حقيقية باستخدام الذكاء الاصطناعي. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **تحديث كبير لممارسة المرحلة 2**: اكتمل مشروع SaaS النهائي "[أول تطبيق SaaS full-stack: موقع مولد النصوص](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" وتم توسيع قسم "[كيفية دمج Stripe وأنظمة الدفع](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" بشكل كبير.
 - **[2026-03-25]** 📚 **ملحق جديد: بحث المستخدم والتحقق من المتطلبات**: تمت إضافة أربع مقالات جديدة تغطي مصادر الأفكار، نموذج Double Diamond، Jobs to Be Done و The Mom Test لمساعدة المبتدئين على اكتشاف أفكار المنتجات والتحقق منها. [👉 قراءة الملحق](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/de-DE/README.md b/docs-readme/de-DE/README.md
index 38093f2..023c788 100644
--- a/docs-readme/de-DE/README.md
+++ b/docs-readme/de-DE/README.md
@@ -145,6 +145,7 @@ Easy-Vibe zeigt dir, wie du daraus ein echtes Produkt machst.
 
 ## 🔥 Neuigkeiten
 
+- **[2026-05-20]** 🌍 **Mehrsprachige Abdeckung von Stage 1 ist vollstaendig**: Stage 1 ist jetzt in allen unterstuetzten Sprachen verfuegbar (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn). Navigation/Build wurden geprueft, um 404 zu vermeiden.
 - **[2026-03-29]** ✨ **Vibe Stories gestartet und mit echten Nutzerreisen aktualisiert**: Eine neue Vibe-Stories-Sektion mit interaktivem Karussell und dedizierten Story-Seiten wurde auf der Startseite hinzugefuegt. Platzhalter wurden durch vier echte Nutzergeschichten ersetzt: eine Grundschullehrerin vom Land, einen Studenten, einen IT-Lehrer an einer weiterfuehrenden Schule und einen Lkw-Fahrer, die alle echte Produkte mit KI gebaut haben. [👉 Geschichten ansehen](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **Grosses Phase-2-Praxis-Update**: Das SaaS-Abschlussprojekt "[Deine erste SaaS-Full-Stack-App: Copywriting-Generator-Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" wurde abgeschlossen und der Abschnitt "[Stripe- und Zahlungssysteme integrieren](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" deutlich erweitert, plus wichtige Inhalte zu Multi-Produkt-UI und WeChat-Mini-Programm-Backend-Workflows.
 - **[2026-03-25]** 📚 **Neuer Anhang: Nutzerforschung und Anforderungsvalidierung**: Vier neue Artikel hinzugefuegt, die Ideenfindung, das Double-Diamond-Modell, Jobs to Be Done und The Mom Test abdecken, um Anfaengern zu helfen, Produktideen zu entdecken und zu validieren. [👉 Anhang lesen](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/en-US/README.md b/docs-readme/en-US/README.md
index 3ce8aab..5217cf4 100644
--- a/docs-readme/en-US/README.md
+++ b/docs-readme/en-US/README.md
@@ -145,6 +145,7 @@ Easy-Vibe teaches you how to turn that into a real product.
 
 ## 🔥 News
 
+- **[2026-05-20]** 🌍 **Stage 1 multilingual coverage is now complete**: Stage 1 is fully available across all supported locales (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn). Navigation/build checks have been verified to avoid 404s.
 - **[2026-03-29]** ✨ **Vibe Stories launched and upgraded with real user journeys**: Added a new homepage Vibe Stories section with an interactive carousel and dedicated story pages, then replaced placeholder content with four real user stories featuring a rural primary school teacher, a college student, a high school IT teacher, and a truck driver who built real products with AI. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **Major Stage 2 practice update**: Completed the SaaS capstone project "[Your First SaaS Full-Stack App: Copywriting Generator Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" and substantially expanded the "[How to integrate Stripe and payment systems](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" section, plus key content around multi-product UI and WeChat Mini Program backend workflows.
 - **[2026-03-25]** 📚 **New appendix: User Research and Requirement Validation**: Added four new articles covering idea sourcing, the Double Diamond model, Jobs to Be Done, and The Mom Test to help beginners discover and validate product ideas. [👉 Read the appendix](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/es-ES/README.md b/docs-readme/es-ES/README.md
index acaab3a..4708f3a 100644
--- a/docs-readme/es-ES/README.md
+++ b/docs-readme/es-ES/README.md
@@ -145,6 +145,7 @@ Easy-Vibe te enseña a convertir eso en un producto real.
 
 ## 🔥 News
 
+- **[2026-05-20]** 🌍 **Cobertura multilingue completa de la Etapa 1**: La Etapa 1 ya esta disponible en todos los idiomas soportados (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn). Se verifico la navegacion/compilacion para evitar 404.
 - **[2026-03-29]** ✨ **Lanzamos la sección de historias de usuarios y la actualizamos con casos reales**: Añadimos un carrusel interactivo y páginas dedicadas en la portada, y sustituimos el contenido provisional por cuatro historias reales de una maestra rural, una estudiante universitaria, un profesor de informática de secundaria y un camionero que construyeron productos reales con IA. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **Actualización masiva de contenido práctico de la Etapa 2**: Se completó el proyecto final SaaS "[Tu primera aplicación full-stack SaaS: Generador de copywriting](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" y se amplió sustancialmente la sección "[Cómo integrar Stripe y sistemas de pago](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)".
 - **[2026-03-25]** 📚 **Nuevo apéndice: Investigación de usuarios y validación de requisitos**: Se agregaron cuatro nuevos artículos que cubren la búsqueda de ideas, el modelo Double Diamond, Jobs to Be Done y The Mom Test para ayudar a los principiantes a descubrir y validar ideas de productos. [👉 Leer el apéndice](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/fr-FR/README.md b/docs-readme/fr-FR/README.md
index 6778ba8..1afbab1 100644
--- a/docs-readme/fr-FR/README.md
+++ b/docs-readme/fr-FR/README.md
@@ -145,6 +145,7 @@ Easy-Vibe vous apprend a transformer cela en un vrai produit.
 
 ## 🔥 News
 
+- **[2026-05-20]** 🌍 **Couverture multilingue complete du Stage 1**: Le Stage 1 est maintenant disponible dans toutes les langues supportees (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn). La navigation/le build ont ete verifies pour eviter les 404.
 - **[2026-03-29]** ✨ **La section Histoires d'utilisateurs est en ligne avec 4 cas réels** : Nous avons ajouté un carrousel interactif et des pages dédiées sur la page d'accueil, puis remplacé le contenu provisoire par quatre récits réels mettant en scène un instituteur rural, une étudiante, un professeur d'informatique au lycée et un chauffeur routier ayant créé de vrais produits avec l'IA. [👉 View the stories](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **Mise à jour majeure de la pratique de l'Étape 2**: Projet final SaaS "[Votre première application full-stack SaaS : Générateur de copywriting](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" complété et section "[Comment intégrer Stripe et les systèmes de paiement](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" substantiellement élargie.
 - **[2026-03-25]** 📚 **Nouvel appendice : Recherche utilisateur et validation des besoins**: Ajout de quatre nouveaux articles couvrant la recherche d'idées, le modèle Double Diamond, Jobs to Be Done et The Mom Test pour aider les débutants à découvrir et valider des idées de produits. [👉 Lire l'appendice](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/ja-JP/README.md b/docs-readme/ja-JP/README.md
index f97606f..a3c9979 100644
--- a/docs-readme/ja-JP/README.md
+++ b/docs-readme/ja-JP/README.md
@@ -145,6 +145,7 @@ Easy-Vibe は、それを本物のプロダクトにする方法を教えます
 
 ## 🔥 ニュース
 
+- **[2026-05-20]** 🌍 **Stage 1 の多言語カバーが完了**：Stage 1 はサポート対象の全言語（zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn）で利用可能になりました。ナビゲーション/ビルドの確認を行い、404 を避けています。
 - **[2026-03-29]** ✨ **Vibe ストーリーズを公開し、実ユーザーの体験談にアップグレード**：ホームページにインタラクティブなカルーセルと専用ストーリーページを追加し、仮の内容を農村の小学校教師、大学生、高校の情報技術教師、トラック運転手による 4 つの実話に差し替えました。[👉 ストーリーを見る](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **ステージ 2 実践コンテンツの大幅更新**：SaaS キャップストーンプロジェクト「[最初の SaaS フルスタックアプリ：コピー生成サイト](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)」を完成し、「[Stripe などの決済システムの統合方法](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)」セクションを大幅に拡充し、マルチプロダクト UI や WeChat ミニプログラムのバックエンドワークフローに関する重要コンテンツも追加。
 - **[2026-03-25]** 📚 **新規附録：ユーザー調査と要件検証**：アイデアの探し方、ダブルダイヤモンドモデル、Jobs to Be Done、The Mom Test の 4 つの新記事を追加し、初心者が製品アイデアを発見・検証できるよう支援。[👉 附録を読む](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/ko-KR/README.md b/docs-readme/ko-KR/README.md
index 54566d6..46d5873 100644
--- a/docs-readme/ko-KR/README.md
+++ b/docs-readme/ko-KR/README.md
@@ -145,6 +145,7 @@ Easy-Vibe는 그것을 실제 제품으로 만드는 방법을 가르칩니다.
 
 ## 🔥 소식
 
+- **[2026-05-20]** 🌍 **Stage 1 다국어 커버리지 완료**: Stage 1 은 지원되는 모든 언어(zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn)에서 완전하게 제공됩니다. 내비게이션/빌드 검증을 통해 404 를 방지했습니다.
 - **[2026-03-29]** ✨ **Vibe 스토리 공개 및 실제 사용자 여정으로 업그레이드**: 홈페이지에 인터랙티브 스토리 캐러셀과 전용 스토리 페이지를 추가하고, 시골 초등학교 교사, 대학생, 고등학교 IT 교사, 트럭 운전사의 실제 사용자 스토리 4편으로 교체했습니다. [👉 스토리 보기](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **단계 2 실습 대규모 업데이트**: SaaS 캡스톤 프로젝트 "[첫 번째 SaaS 풀스택 앱: 카피라이팅 생성기 웹사이트](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)"를 완료하고 "[Stripe 및 결제 시스템 통합 방법](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" 섹션을 대폭 확장했으며, 멀티 프로덕트 UI 및 위챗 미니 프로그램 백엔드 워크플로우 핵심 콘텐츠를 추가했습니다.
 - **[2026-03-25]** 📚 **새로운 부록: 사용자 연구 및 요구사항 검증**: 아이디어 소싱, 더블 다이아몬드 모델, Jobs to Be Done, The Mom Test를 다루는 4편의 새로운 글을 추가하여 초보자가 제품 아이디어를 발견하고 검증하는 데 도움을 줍니다. [👉 부록 읽기](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/vi-VN/README.md b/docs-readme/vi-VN/README.md
index c7b1bc5..fddc0c4 100644
--- a/docs-readme/vi-VN/README.md
+++ b/docs-readme/vi-VN/README.md
@@ -145,6 +145,7 @@ Easy-Vibe giup ban bien dieu do thanh mot san pham that.
 
 ## 🔥 Tin tuc
 
+- **[2026-05-20]** 🌍 **Da phu toan bo da ngon ngu cho Stage 1**: Stage 1 hien da co day du tren tat ca cac ngon ngu ho tro (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn). Da kiem tra dieu huong/build de tranh 404.
 - **[2026-03-29]** ✨ **Ra mat muc cau chuyen nguoi dung va nang cap voi nhung hanh trinh nguoi dung that**: Da them phan Vibe Stories moi tren trang chu voi carousel tuong tac va cac trang story rieng, sau do thay the noi dung tam bang bon cau chuyen that tu mot giao vien tieu hoc vung que, mot sinh vien dai hoc, mot giao vien CNTT trung hoc va mot tai xe xe tai da xay dung san pham that voi AI. [👉 Xem cau chuyen](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **Cap nhat thuc hanh Giai doan 2 lon**: Hoan thanh du an SaaS tot nghiep "[Ung dung Full-stack SaaS dau tien: Trang web tao noi dung](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" va mo rang dang ke phan "[Cach tich hop Stripe va he thong thanh toan](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)", cung nhu noi dung quan trong ve UI da san pham va quy trinh backend WeChat Mini Program.
 - **[2026-03-25]** 📚 **Phu luc moi: Nghien cuu nguoi dung va Xac thuc yeu cau**: Them bon bai viet moi ve tim kiem y tuong, mo hinh Double Diamond, Jobs to Be Done va The Mom Test giup nguoi moi bat dau kham pha va xac thuc y tuong san pham. [👉 Doc phu luc](https://datawhalechina.github.io/easy-vibe/en/appendix/)
diff --git a/docs-readme/zh-CN/README.md b/docs-readme/zh-CN/README.md
index 2565dea..9f2088a 100644
--- a/docs-readme/zh-CN/README.md
+++ b/docs-readme/zh-CN/README.md
@@ -144,6 +144,7 @@ Easy-Vibe 教你的，就是怎样把它一步步做成真正的产品。
 
 ## 🔥 News
 
+- **[2026-05-20]** 🌍 **第一阶段（Stage 1）多语言已全面覆盖**：Stage 1 已在所有支持的语言（zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn）下完整可用，并已完成导航/构建校验，确保不会出现 404。
 - **[2026-03-29]** ✨ **「用户故事」专区上线并更新为真实案例**：首页新增交互式故事轮播组件和独立故事页面，并将原有占位内容替换为 4 篇真实用户故事，涵盖乡村小学老师、大学生、高中信息技术老师和货车司机，展示不同背景的学习者如何用 AI 解决真实问题、做出真实产品。[👉 查看故事](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业[《第一个 SaaS 全栈应用——文案生成网站》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/)；同时大幅补全[《如何集成 Stripe 等收费系统》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/)，完善多产品 UI、微信小程序后端等关键章节。
 - **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。[👉 阅读附录](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
diff --git a/docs-readme/zh-TW/README.md b/docs-readme/zh-TW/README.md
index 760ccdb..d96fbb4 100644
--- a/docs-readme/zh-TW/README.md
+++ b/docs-readme/zh-TW/README.md
@@ -144,6 +144,7 @@ Easy-Vibe 教你的，就是怎樣把它一步步做成真正的產品。
 
 ## 🔥 News
 
+- **[2026-05-20]** 🌍 **第一階段（Stage 1）多語言已全面覆蓋**：Stage 1 已在所有支援的語言（zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn）下完整可用，並已完成導覽/建置校驗，避免出現 404。
 - **[2026-03-29]** ✨ **「使用者故事」專區上線並更新為真實案例**：首頁新增互動式故事輪播元件與獨立故事頁面，並將原有佔位內容替換為 4 篇真實使用者故事，涵蓋鄉村小學老師、大學生、高中資訊科技老師和貨車司機，展示不同背景的學習者如何用 AI 解決真實問題、做出真實產品。[👉 查看故事](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
 - **[2026-03-26]** 🚀 **階段二實戰內容集中更新**：補充完整 SaaS 全棧大作業[《第一個 SaaS 全棧應用——文案生成網站》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/)；同時大幅補全[《如何整合 Stripe 等收費系統》](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/stripe-payment/)，完善多產品 UI、微信小程式後端等關鍵章節。
 - **[2026-03-25]** 📚 **新增附錄「使用者研究與需求驗證」**：包含 4 篇文章——從哪裡找點子、雙鑽模型、Jobs to Be Done、The Mom Test 使用者訪談法，幫助新手學會發現和驗證產品想法。[👉 閱讀附錄](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/)
diff --git a/docs/DEPLOYMENT.md b/docs/DEPLOYMENT.md
index 205cb27..ac90066 100644
--- a/docs/DEPLOYMENT.md
+++ b/docs/DEPLOYMENT.md
@@ -1,29 +1,34 @@
-# 🚀 部署说明
+# Deployment Notes
 
-## Base 路径自动适配
+## Base Path Auto-Adaptation
 
-本项目的 VitePress 配置已经正确处理了 **Vercel** 和 **GitHub Pages** 两种部署环境的不同 base 路径。
+This project is a VitePress site that can be deployed to both **Vercel** and **GitHub Pages**. The main difference is the `base` path:
 
-### 自动适配逻辑
+- Vercel: typically `/`
+- GitHub Pages: typically `/easy-vibe/`
 
-```javascript
+The VitePress config handles this automatically:
+
+```js
 // docs/.vitepress/config.mjs
 const isVercel = process.env.VERCEL === '1'
 const base = isVercel ? '/' : '/easy-vibe/'
 ```
 
-### 部署环境对比
+## Environment Comparison
 
-| 平台             | Base 路径     | 示例 URL                                                    |
-| ---------------- | ------------- | ----------------------------------------------------------- |
-| **Vercel**       | `/`           | `https://your-project.vercel.app/cn/stage-1/...`            |
-| **GitHub Pages** | `/easy-vibe/` | `https://datawhalechina.github.io/easy-vibe/cn/stage-1/...` |
-| **本地开发**     | `/easy-vibe/` | `http://localhost:5173/easy-vibe/cn/stage-1/...`            |
-| **本地预览**     | `/easy-vibe/` | `http://localhost:4173/easy-vibe/cn/stage-1/...`            |
+| Platform | Base | Example URL |
+| --- | --- | --- |
+| Vercel | `/` | `https://your-project.vercel.app/en/stage-1/...` |
+| GitHub Pages | `/easy-vibe/` | `https://datawhalechina.github.io/easy-vibe/en/stage-1/...` |
+| Local dev | `/easy-vibe/` | `http://localhost:5173/easy-vibe/en/stage-1/...` |
+| Local preview | `/easy-vibe/` | `http://localhost:4173/easy-vibe/en/stage-1/...` |
 
-### 首页动态链接
+## Home Redirect And Dynamic Links
 
-首页使用 VitePress 的 `useData()` API 来动态获取 base 路径：
+The home page uses VitePress `withBase()` and `useData()` to avoid hardcoding the base path.
+
+Example:
 
 ```vue
 <script setup>
@@ -34,86 +39,57 @@ const base = site.value.base
 </script>
 
 <template>
-  <a :href="base + 'cn/stage-1/learning-map/'">
-    <!-- 链接会自动适配部署环境 -->
-  </a>
+  <a :href="base + 'en/stage-1/learning-map/'">Go</a>
 </template>
 ```
 
-**优点**：
+## Deploy Steps
 
-- ✅ 无需硬编码 fallback 值
-- ✅ 自动适配 Vercel 和 GitHub Pages
-- ✅ 构建时和运行时都正确
+### Vercel
 
-## 部署步骤
+1. Push code to GitHub.
+2. Import the repo in Vercel (or connect it).
+3. Vercel will build automatically (see `vercel.json`).
 
-### Vercel 部署
+Vercel usually sets `VERCEL=1` automatically.
 
-1. 推送代码到 GitHub
-2. Vercel 会自动检测 `vercel.json` 配置
-3. 自动构建并部署
-4. 访问 `https://your-project.vercel.app`
+### GitHub Pages
 
-**环境变量**：Vercel 自动设置 `VERCEL=1`
-
-### GitHub Pages 部署
-
-1. 配置 GitHub Pages 设置：
-   - Source: `gh-pages` 分支
-   - 或使用 GitHub Actions 从 `main` 分支部署
-
-2. 构建命令：
-
-   ```bash
-   npm run build
-   ```
-
-3. 访问 `https://datawhalechina.github.io/easy-vibe`
-
-## 验证部署
-
-部署后检查以下链接是否正常：
-
-- [ ] 首页能正常访问
-- [ ] 导航栏链接能正确跳转
-- [ ] 首页卡片"查看详情"链接正确
-- [ ] 语言切换功能正常
-- [ ] 图片资源能正常加载
-
-## 常见问题
-
-### Q: Vercel 部署后链接变成 `/easy-vibe/cn/...` 导致 404
-
-**原因**：Vercel 环境变量未正确设置
-
-**解决**：
-
-1. 检查 Vercel 项目设置中 `Environment Variables`
-2. 确保 `VERCEL` = `1` 已设置（通常自动设置）
-3. 重新部署
-
-### Q: GitHub Pages 部署后所有链接 404
-
-**原因**：缺少 `/easy-vibe/` base 路径
-
-**解决**：
-
-1. 检查 `docs/.vitepress/config.mjs` 中的 base 配置
-2. 确保 GitHub Pages 环境下 `isVercel = false`
-3. 重新构建并部署
-
-### Q: 本地预览链接缺少 `/easy-vibe/` 前缀
-
-**原因**：使用了错误的预览命令
-
-**解决**：
+1. Configure GitHub Pages for the repo.
+2. Build:
 
 ```bash
-# 错误
-npm run preview  # 默认端口 4173，但路径可能不对
-
-# 正确
 npm run build
-npm run preview  # 访问 http://localhost:4173/easy-vibe/
 ```
+
+3. Verify the published site: `https://datawhalechina.github.io/easy-vibe`
+
+## Post-Deploy Checklist
+
+- Home page loads.
+- Navbar links navigate correctly.
+- Locale switching works.
+- Images load correctly.
+
+## Troubleshooting
+
+### Vercel URLs include `/easy-vibe/...` and return 404
+
+Cause: `VERCEL` env var is missing or not equal to `1`.
+
+Fix:
+
+1. Check Vercel project settings -> Environment Variables.
+2. Ensure `VERCEL=1`.
+3. Redeploy.
+
+### GitHub Pages returns 404 for all routes
+
+Cause: missing `/easy-vibe/` base path in the build.
+
+Fix:
+
+1. Check `docs/.vitepress/config.mjs` base logic.
+2. Ensure the GitHub Pages build uses `base = '/easy-vibe/'`.
+3. Rebuild and redeploy.
+
diff --git a/docs/ar-sa/guide/introduction.md b/docs/ar-sa/guide/introduction.md
new file mode 100644
index 0000000..50e454c
--- /dev/null
+++ b/docs/ar-sa/guide/introduction.md
@@ -0,0 +1,82 @@
+# مقدمة المشروع
+
+في عام 2025، اعتبره الكثيرون عام انطلاق برمجة الذكاء الاصطناعي. بدأ المزيد والمزيد من الأشخاص يستخدمون الذكاء الاصطناعي لكتابة التعليمات البرمجية، لكن ما ينتجونه غالبًا ما يبقى عند مستوى الألعاب - لا يعرفون كيفية تنظيم عملية التطوير باستخدام Vibe Coding، ولا يعرفون الأدوات التي يجب اختيارها، ولا يفهمون بوضوح الخطوات الحاسمة المفقودة بين النموذج الأولي والإطلاق.
+
+نعتمد مسارًا عمليًا تدريجيًا من **ثلاث مراحل**: مرحلة المبتدئين للبدء السريع في برمجة الذكاء الاصطناعي من خلال الألعاب الصغيرة، والمرحلة الأولى لإتقان أسلوب العمل في Vibe Coding وإكمال نموذج أولي لتطبيق ويب، والمرحلة الثانية لتعلم التطوير الشامل والنشر، والمرحلة الثالثة لبناء تطبيقات معقدة عبر منصات متعددة.
+
+تتضمن كل مرحلة مشاريع عملية كاملة، مما يتيح لك الانتقال من الألعاب إلى المنتجات الحقيقية في تحديات واقعية، وفي النهاية تمتلك **القدرة على تحويل أي فكرة إلى تطبيق قابل للاستخدام**.
+
+نحن نؤمن بأن إتقان Vibe Coding مع التدريب المنهجي سيجعلك شخصيًا مطورًا شاملاً يجمع بين **تطوير الواجهة الأمامية والخلفية، وتكامل قدرات الذكاء الاصطناعي، وتصميم المنتجات**.
+
+يستهدف هذا المشروع بشكل أساسي ثلاث فئات من المتعلمين:
+
+- **المبتدئون (الأشخاص العاديون / الجانب المتعلق بالمنتجات والعمليات)**: مساعدة الأشخاص ذوي الخلفيات غير التقنية والمتعلمين المبتدئين على فهم المفاهيم الرئيسية وإكمال أول أداة صغيرة بالذكاء الاصطناعي أو نموذج أولي للمنتج.
+- **المطورون المتوسطون والمبتدئون (الطلاب والمطورون ذوو الأساسيات)**: إتقان vibe coding وتطوير تطبيقات الذكاء الاصطناعي الأصلية بشكل منهجي.
+- **المطورون المتقدمون (الشركات والشركات الناشئة، والمطورون المستقلون والمفتوحو المصدر)**: دعم الفرق والأفراد للبناء السريع والتحقق من التكرار لتطبيقات الذكاء الاصطناعي الأصلية.
+
+## دليل المحتوى
+
+### الملخص العام
+
+[قاموس قدرات الذكاء الاصطناعي: المفاهيم الأساسية والمصطلحات وسيناريوهات الذكاء الاصطناعي الشائعة](/ar-sa/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### المرحلة الصفرية: روضة الأطفال
+
+| الفصل | المحتوى الرئيسي | الحالة |
+| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
+| [دليل المبتدئين: خريطة التعلم](/ar-sa/stage-1/learning-map/) | نظرة عامة على مسار التعلم الكامل | ✅ |
+| [دليل المبتدئين: في عصر الذكاء الاصطناعي، التحدث يعني البرمجة](/ar-sa/stage-1/ai-capabilities-through-games/) | تجربة قدرات برمجة الذكاء الاصطناعي من خلال أمثلة مثل لعبة الثعبان | ✅ |
+
+### المرحلة الأولى: مدير منتجات الذكاء الاصطناعي
+
+| الفصل | المحتوى الرئيسي | الحالة |
+| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
+| [المستوى الثاني: التعرف على أدوات AI IDE](/ar-sa/stage-1/introduction-to-ai-ide/) | تعلم استخدام IDE، وإتقان هيكل الواجهة وأساليب الإدخال الفعالة | ✅ |
+| [المستوى الثالث: بناء نموذج أولي عمليًا](/ar-sa/stage-1/building-prototype/) | دورة كاملة من تحليل المنتج إلى تفكيك المتطلبات وتنفيذ نموذج أولي متعدد الصفحات | ✅ |
+| [المستوى الرابع: إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي](/ar-sa/stage-1/integrating-ai-capabilities/) | فهم وإكمال تكامل API لقدرات الذكاء الاصطناعي الشائعة (نص، صورة، فيديو) | ✅ |
+| [المستوى الخامس: مشروع عملي كامل](/ar-sa/stage-1/complete-project-practice/) | محاكاة سيناريوهات واقعية، وقبول ملاحظات المستخدمين للتكرار وإكمال عرض المشروع (يتضمن مشروعًا نهائيًا) | ✅ |
+
+#### الملاحق
+
+| الفصل | المحتوى الرئيسي | الحالة |
+| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
+| [الملحق أ: التفكير في المنتجات](/ar-sa/stage-1/appendix-a-product-thinking/) | إطار عمل التفكير في المنتجات من تقييم الأفكار إلى تفكيك المتطلبات و MVP | ✅ |
+| [الملحق ب: الأخطاء الشائعة والحلول](/ar-sa/stage-1/appendix-b-common-errors/) | الأخطاء الشائعة في vibe coding وطرق استكشاف الأخطاء وإصلاحها | ✅ |
+| [الملحق: من أين تأتي الأفكار](/ar-sa/stage-1/appendix-idea-sources/) | استخراج اتجاهات محددة من التطبيقات المرجعية والاتجاهات وقوائم المستثمرين | ✅ |
+| [الملحق: نموذج الماس المزدوج](/ar-sa/stage-1/appendix-double-diamond/) | فهم الإيقاع الكامل لتعريف المشكلة أولاً، ثم تطوير تصميم الحل | ✅ |
+| [الملحق: Jobs to Be Done](/ar-sa/stage-1/appendix-jobs-to-be-done/) | استخدام طريقة JTBD لفهم ما يريد المستخدمون حقًا إنجازه | ✅ |
+| [الملحق: طريقة مقابلة The Mom Test](/ar-sa/stage-1/appendix-mom-test/) | طريقة بحث للتحقق من المتطلبات من خلال مقابلات المستخدمين | ✅ |
+
+### المرحلة الثانية: مهندسو التطوير المتوسطون والمبتدئون
+
+#### قسم الواجهة الأمامية
+
+| الفصل | المحتوى الرئيسي | الحالة |
+| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
+| استخدام lovart لإنتاج المواد | تعلم استخدام lovart لإنشاء المواد المرئية مثل الشخصيات والمشاهد دفعة واحدة، مما يوفر أساسًا للمواد لتصميم UI وتطوير الواجهة الأمامية | 🚧 |
+| مقدمة في Figma و MasterGo | استخدام أدوات التصميم لتنظيم هيكل المعلومات وبنية الصفحات، ووضع الأساس لتنفيذ الواجهة الأمامية | 🚧 |
+| بناء أول تطبيق حديث - تصميم UI | إكمال واجهة مبنية على المكونات بناءً على تصميمات، وتحقيق أول رابط من التصميم إلى التعليمات البرمجية | 🚧 |
+| تصميم الصفحات والأزرار وفقًا لمعايير تصميم UI | تعلم تنظيم هيكل الصفحة والتسلسل الهرمي للأزرار باستخدام معايير التصميم السائدة، وإنشاء مخططات تصميم بمساعدة الذكاء الاصطناعي | 🚧 |
+| [بناء لوحة هوغوورتس معًا](/ar-sa/stage-2/frontend/hogwarts-portraits/) | بناء تطبيق واجهة أمامية مع قدرات الذكاء الاصطناعي من الصفر، وربط التصميم والتطوير | 🚧 |
+
+#### قسم تطوير الواجهة الخلفية
+
+| الفصل | المحتوى الرئيسي | الحالة |
+| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
+| ما هو API | فهم واجهات HTTP ونموذج الطلب والاستجابة، التحضير لتكامل الواجهة الخلفية والاختبار المشترك | 🚧 |
+| [من قاعدة البيانات إلى Supabase](/ar-sa/stage-2/backend/database-supabase/) | تنفيذ قاعدة البيانات وAPI على Supabase، وربط نموذج البيانات بصفحات الواجهة الأمامية | 🚧 |
+| مساعدة النموذج الكبير في كتابة كود الواجهة ووثائق الواجهة | استخدام النموذج الكبير للمساعدة في إنشاء وثائق واجهة وقاعدة بيانات وكود، وتنفيذ واجهة خلفية قابلة للقراءة والاختبار | 🚧 |
+| سير عمل Git والنشر على Zeabur | إدارة الكود في سير عمل Git، ونشر التطبيق على Zeabur للإطلاق | 🚧 |
+| أدوات تطوير CLI الحديثة | استخدام أدوات برمجة CLI المعتمدة على الذكاء الاصطناعي لتسريع التطوير والتصحيح، وتشكيل سير عمل هندسي شخصي | 🚧 |
+| كيفية تكامل stripe وأنظمة الدفع الأخرى | تكامل نظام الدفع، وإكمال رابط الدفع وعملية التسوية الأساسية | 🚧 |
+| بناء أول تطبيق حديث - تطبيق شامل | دمج الواجهة الأمامية والخلفية ووحدة الدفع، وإكمال تطبيق ويب شامل قابل للإطلاق | 🚧 |
+| مكتبة مكونات الواجهة الأمامية الحديثة + Trae عمليًا | استخدام مكتبة مكونات الواجهة الأمامية الحديثة و Trae، وإكمال منتج بشكل مستقل يدعم التسجيل وتسجيل الدخول والدفع | 🚧 |
+
+#### ملخص قدرات الذكاء الاصطناعي
+
+| الفصل | المحتوى الرئيسي | الحالة |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
+| [مقدمة في Dify وتكامل قاعدة المعرفة](/ar-sa/stage-2/ai-capabilities/dify-knowledge-base/) | بناء منتجات من فئة الأدوات باستخدام Dify Workflow وRAG الأساسي، كنموذج أولي لترقية التطبيقات اللاحقة | 🚧 |
+| تعلم الاستعلام عن قاموس الذكاء الاصطناعي وتكامل API متعدد الوسائط | تعلم كيفية العثور على النماذج وAPI المناسبين، ودمج قدرات الوسائط المتعددة مثل النص والصور في المنتجات | 🚧 |
+
+### المرحلة الثالثة: مهندسو التطوير المتقدمون
diff --git a/docs/ar-sa/stage-1/ai-capabilities-through-games/index.md b/docs/ar-sa/stage-1/ai-capabilities-through-games/index.md
new file mode 100644
index 0000000..b22fbe0
--- /dev/null
+++ b/docs/ar-sa/stage-1/ai-capabilities-through-games/index.md
@@ -0,0 +1,756 @@
+# المستوى الأول: في عصر الذكاء الاصطناعي، إذا كنت تستطيع التحدث، يمكنك البرمجة
+
+هذا تعليمي تعليمي **مبني على التعلم بالمشاريع**. نشجعك على اتباع الخطوات خطوة بخطوة ومحاولة إعادة إنشاء النتائج.
+لا تقلق بشأن ارتكاب الأخطاء أو تعديل المحتوى، نحن نؤمن دائمًا بأنك تستطيع القيام بذلك، تذكر دائمًا:
+
+<div style="text-align: center;">
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">الإنجاز أهم من الكمال 🐣</span>
+</div>
+</div>
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'حوالي <strong>4 ساعات</strong>، يمكن إكمالها على عدة مراحل'
+const relatedArticles =
+  relatedArticlesMap['ar-sa/stage-1/ai-capabilities-through-games'] ?? []
+</script>
+
+## دليل هذا الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['برمجة الذكاء الاصطناعي الحوارية', 'ألعاب أصلية بالذكاء الاصطناعي', 'مشروع عملي: لعبة الثعبان']" coreOutput="لعبة ثعبان أصلية بالذكاء الاصطناعي + لعبة مبتكرة خاصة بك" expectedOutput="1 لعبة ثعبان أصلية بالذكاء الاصطناعي قابلة للتشغيل + (اختياري) 1 لعبة أو Demo أصلية بالذكاء الاصطناعي ابتكرتها بنفسك">
+
+إذا كنت **لا تعرف أي شيء عن البرمجة على الإطلاق**، أو تعرف فقط القليل، فهذا الفصل مُعد لك. سنبدأ من الأساسيات: استخدام **طريقة الحوار** لجعل الذكاء الاصطناعي يساعدك في كتابة الأكواد، بدون الحاجة لحفظ القواعد أو تهيئة البيئة، يمكنك تشغيل كل شيء مباشرة على صفحة الويب.
+
+ستصنع بنفسك **أول برنامج قابل للتشغيل** - لعبة ثعبان تأكل الكلمات وتكتب الشعر وترسم. من خلال هذا المشروع العملي، ستختبر ما يعنيه البرمجة بالذكاء الاصطناعي حقًا: ليس أن الذكاء الاصطناعي يحل محل تفكيرك، بل أنت تعبر عن أفكارك والذكاء الاصطناعي يساعدك على تحقيقها.
+
+كل الإبداع يبدأ من الصفر إلى الواحد، يسعدنا أن ننقل لك كل جزء من الثقة والاحترافية، بالنسبة لك، **القدرة على التنفيذ هي كل ما تحتاجه**.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
+      { title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
+      { title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
+      { title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. تحديات وفرص الأشخاص العاديين
+
+الكثير من الناس لديهم حزمة من الأفكار للمنتجات: أداة صغيرة للمحاسبة، صفحة ويب لتسجيل نمو الطفل، أو حتى لعبة صغيرة. لكن بمجرد التفكير في كتابة الأكواد أو البحث عن مبرمج، يستسلمون فورًا.
+
+بعد ظهور الذكاء الاصطناعي، ولأول مرة، تم منح الأشخاص العاديين إمكانية جديدة تمامًا: لا تحتاج إلى معرفة كيفية كتابة الأكواد، فقط تحتاج إلى تعلم كيف توضح للذكاء الاصطناعي ما تريده بوضوح. تُظهر [البيانات من GitHub Copilot](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics) أن أكثر من 15 مليون مطور يستخدمون الذكاء الاصطناعي في البرمجة، ومتوسط 46% من الأكواد مُنشأة بالذكاء الاصطناعي! وفي مشاريع Java تصل هذه النسبة إلى 61%.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 20px;">🚀</span>
+      <span style="font-weight: bold; font-size: 16px;">قفزة في الكفاءة ومعدل التبني</span>
+    </div>
+  </template>
+
+  <el-row :gutter="20" style="margin-bottom: 24px;">
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">تحسن السرعة</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">يوم</span></div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">وقت المهمة (كان 9.6 أيام)</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">معدل التثبيت في اليوم الأول</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">معدل قبول الاقتراحات</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <div style="line-height: 1.8; color: #606266;">
+    ما يثير الحماس حقًا هو القفزة في الكفاءة: سرعة إكمال المطورين للمهام تحسنت بنسبة <b>55%</b>. ما كان يستغرق 9.6 أيام لتسليم الكود، أصبح الآن يحتاج فقط <b>2.4 يوم</b>. هذا التحسن الملحوظ في الكفاءة يوضح أن الذكاء الاصطناعي لم يعد مجرد "أداة اختيارية"، بل أصبح مساعد برمجة لا غنى عنه في عملية التطوير. تؤكد بيانات التبني أيضًا ذلك: في اليوم الذي حصلوا فيه على صلاحية الوصول، قام <b>81%</b> من المطورين بتثبيته واستخدامه فورًا؛ ومنهم <b>96%</b> بدأوا في قبول اقتراحات الكود من الذكاء الاصطناعي في نفس اليوم. بعبارة أخرى، المطورون دمجوا الذكاء الاصطناعي تقريبًا فورًا في عملهم اليومي في البرمجة.
+  </div>
+</el-card>
+
+بالنسبة للأشخاص العاديين، هذا الاتجاه أكثر أهمية: إذا كان المبرمجون المحترفون يعتمدون بشكل كبير على الذكاء الاصطناعي في كتابة الأكواد، **فلماذا لا يمكننا نحن الذين لا يعرفون البرمجة التحدث مباشرة مع الذكاء الاصطناعي لتحقيق أفكارنا؟**
+
+هدف هذه الدورة هو مساعدتك على إتقان مهارة جديدة: صنع التطبيقات من خلال الحوار باللغة الطبيعية. سنعلمك كيف تتواصل مع الذكاء الاصطناعي بلغة الكمبيوتر، وكيف تجعله يساعدك في تحويل الأفكار في رأسك إلى منتجات حقيقية قابلة للاستخدام.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
+      { title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
+      { title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
+      { title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. إلى أي مدى يمكن للذكاء الاصطناعي أن يساعدك
+
+في هذا القسم، سنناقش سؤالًا واحدًا فقط: إذا كنت لا تعرف كيفية كتابة الأكواد على الإطلاق، إلى أي مدى يمكن للذكاء الاصطناعي الحالي أن يساعدك؟
+
+بشكل عام، يمكنك فهم قدرات النماذج اللغوية الكبيرة الحالية على النحو التالي: يمكنها التعامل مع تطوير **الأدوات الداخلية البسيطة** و**لوحات تصور البيانات** وبعض **الألعاب الخفيفة**. هذه القدرات كافية لصنع **أدوات للاستخدام الشخصي** والتحقق من المتطلبات **من منظور مدير المنتج**. ولكن إذا كنت تريد إنشاء منتجات **تجارية ناضجة** بنقرة واحدة، فلا يزال يلزم تدخل بشري مستمر في **تصميم العمليات** و**تحسين التفاصيل**.
+
+بعد ذلك، سنأخذ لعبة الثعبان كمثال لنرى بالتحديد إلى أي مدى يمكن للبرمجة بالذكاء الاصطناعي أن تصل حاليًا.
+
+### 2.1 صنع لعبة ثعبان في 60 ثانية
+
+أولاً، يرجى فتح صفحة الويب التجريبية المستخدمة في الدورة [z.ai](https://chat.z.ai/)، `z.ai` هي منصة ذكاء اصطناعي طورتها شركة Zhipu AI (إحدى الشركات الرائدة في مجال النماذج اللغوية الكبيرة في الصين)، وتعتمد قدراتها الأساسية على سلسلة النماذج اللغوية الكبيرة GLM التي طورتها Zhipu. المنصة تدمج العديد من وظائف الذكاء الاصطناعي، بما في ذلك إنشاء العروض التقديمية وتصميم الملصقات والتطوير الكامل. في هذا البرنامج التعليمي، سنركز على استخدام وحدة التطوير الكاملة.
+
+::: details 💡 ما هو نموذج "البرمجة عبر الويب" الجديد؟
+
+في الماضي، كان تطوير تطبيق ويب يتطلب:
+- تثبيت بيئة البرمجة (مثل Python أو Node.js)
+- تهيئة محرر الأكواد
+- تعلم لغات HTML/CSS/JavaScript وغيرها
+- التعامل مع مختلف التبعيات والأخطاء
+
+أما الآن، بفضل منصات البرمجة بالذكاء الاصطناعي، كل ما تحتاجه هو:
+- فتح المتصفح والوصول إلى صفحة الويب
+- وصف الوظائف التي تريدها باللغة الطبيعية
+- يقوم الذكاء الاصطناعي بإنشاء الأكواد تلقائيًا ومعاينة النتائج في الوقت الفعلي
+
+نموذج "الحوار هو البرمجة" هذا يحول البرمجة من "كتابة الأكواد" إلى "وصف المتطلبات". لا تحتاج للقلق بشأن التفاصيل التقنية الأساسية، فقط أخبر الذكاء الاصطناعي بوضوح بما تريد، وسيساعدك في تحويل أفكارك إلى برنامج قابل للتشغيل. هذا هو النموذج الجديد للبرمجة في عصر الذكاء الاصطناعي — **Vibe Coding (البرمجة الجوهرية)**.
+:::
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
+
+بعد إدخال متطلباتنا البسيطة، انقر على زر **التطوير الكامل**، يمكنك مشاهدة عملية إنشاء صفحة الويب بالكامل في الوقت الفعلي. عادةً ما يكون وقت تحضير فنجان قهوة كافيًا لتكتمل صفحة الويب تلقائيًا!
+
+```
+ساعدني في صنع لعبة ثعبان:
+1. التحكم بحركة الثعبان باستخدام مفاتيح الاتجاه
+2. عند أكل الطعام، يطول الثعبان وتزداد النقاط
+3. عند الاصطدام بالجدار أو جسم الثعبان تنتهي اللعبة
+4. يجب أن تكون هناك أزرار للبدء وإعادة البدء
+5. الواجهة يجب أن تكون بسيطة وجميلة
+```
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
+
+بعد الانتهاء من الإنشاء، يمكنك رؤية واجهة صفحة ويب قابلة للتصفح على الجانب الأيمن. يمكنك التمرير لأعلى وأسفل لتصفح محتوى الصفحة، أو النقر على زر 🧭 في الجزء العلوي من الصفحة للتبديل إلى وضع ملء الشاشة لمشاهدة التأثير.
+
+> الأزرار من اليسار إلى اليمين في الجزء العلوي تعمل على التوالي: زر السهم يفتح شريط سجل المحادثات الجانبي، زر القلم لإنشاء محادثة جديدة، زر السهم الدائري لتحديث الصفحة، زر البوصلة للتبديل إلى وضع ملء الشاشة، زر Download لتنزيل المشروع، زر <> للتبديل إلى عرض الكود، زر Publish لنشر المشروع.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
+
+إذا كنت تريد عرض الكود المصدري لصفحة الويب، يمكنك النقر على أيقونة الكود في الزاوية العلوية اليمنى لعرض الكود الكامل.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png)
+
+::: tip 🌐 استكشف المزيد من أدوات البرمجة بالذكاء الاصطناعي
+
+بالإضافة إلى z.ai، نوصيك أيضًا بتجربة منصات البرمجة بالذكاء الاصطناعي الممتازة التالية:
+
+| الأداة | الرابط | الميزات |
+|------|------|------|
+| **Google AI Studio** (موصى به) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | من إنتاج Google الرسمي، يدعم نموذج Gemini، مناسب للتطوير السريع للنماذج الأولية |
+| **Figma Make** | [figma.com/make](https://www.figma.com/make) | تكامل عميق مع أدوات التصميم، مناسب للمصممين لإنشاء نماذج تفاعلية بسرعة |
+| **Coze** | [coze.com](https://www.coze.cn) | منصة تطوير روبوتات الذكاء الاصطناعي من ByteDance، توفر قدرات بناء مرئي بدون كود. تكامل عميق مع نماذج كبيرة محلية مثل Doubao و Kimi، تدعم سوق الإضافات والمهام المجدولة والنشر متعدد القنوات |
+| **v0.dev** | [v0.dev](https://v0.dev) | أداة إنشاء واجهات مستخدم بالذكاء الاصطناعي من Vercel، أدخل الوصف لتوليد أكواد مكونات React قابلة للتشغيل |
+| **Bolt.new** | [bolt.new](https://bolt.new) | منصة تطوير كاملة بالذكاء الاصطناعي من StackBlitz، يمكنها إنشاء ونشر تطبيقات ويب كاملة مباشرة |
+| **Lovable** | [lovable.dev](https://lovable.dev) | تركز على إنشاء تطبيقات React عالية الجودة، تدعم تكامل GitHub والنشر بنقرة واحدة |
+| **Replit Agent** | [replit.com](https://replit.com) | بيئة تطوير متكاملة عبر الإنترنت مع مساعد برمجة بالذكاء الاصطناعي، تدعم لغات متعددة والتعاون في الوقت الفعلي |
+
+لمعرفة المزيد عن المقارنة التفصيلية واستخدام أدوات البرمجة عبر الويب، يمكنك الرجوع إلى قراءتنا الإضافية: [مقارنة عملية لـ 7 منصات Vibe Coding عبر الإنترنت](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
+:::
+
+### 2.2 ما يمكن وما لا يمكن لبرمجة الحوار فعله
+
+يركز هذا القسم على سؤال محدد: عندما تعتمد فقط على الذكاء الاصطناعي الحواري ولا تكتب أي كود، إلى أي مدى يمكنه حقًا أن يقدم المساعدة.
+على مستوى الخبرة، الاستنتاج المستقر نسبيًا هو: يمكنه مساعدتك في إنشاء شيء "صغير ومكتمل"، لكن "ما هو الحد الكافي" لا يزال يتطلب منك اتخاذ القرارات التفصيلية بنفسك في كل خطوة.
+
+#### أفضل في التطبيقات "الصغيرة والواضحة"
+
+من مثال لعبة الثعبان السابق، لقد رأيت نمطًا نموذجيًا:
+طالما يمكنك توضيح الواجهة والتفاعل، يمكن للذكاء الاصطناعي عادةً في بضعة جولات من الحوار أن يجمع صفحة ويب كاملة قابلة للفتح والنقر واللعب.
+
+غالبًا ما تتميز هذه المهام بخصائص مشتركة:
+
+- نطاق واضح: صفحة ويب واحدة، أداة داخلية بسيطة، لعبة صغيرة
+- نتائج مرئية: يمكنك التحقق فورًا في المتصفح مما إذا كانت تعمل كما هو متوقع
+- تصحيح مباشر: بعد اكتشاف المشاكل، يمكنك الإشارة إلى الظواهر المحددة في المحادثات اللاحقة وطلب الإصلاح
+
+ضمن هذا الحد، يمكنك اعتبار الذكاء الاصطناعي الحواري كمطور مساعد ذي تنفيذ جيد. كل ما عليك فعله هو تحسين المتطلبات وتعديلها باللغة الطبيعية في كل جولة، وستحصل بسرعة على نموذج أولي قابل للاستخدام.
+
+**معدل نجاح الذكاء الاصطناعي في إكمال المشاريع الصغيرة بشكل مستقل:**
+<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
+
+#### المشاريع الكبيرة تحتاج "منظور العملية"
+
+بمجرد تجاوز النطاق الصغير والواضح، الاعتماد فقط على بضع جولات من الحوار لجعل الذكاء الاصطناعي يكمل نظامًا معقدًا من البداية إلى النهاية سيواجه سقفًا سريعًا. تتطلب المشاريع الكبيرة غالبًا الاتصال بالخادم وقواعد البيانات ودمج خدمات الطرف الثالث، بالإضافة إلى الصلاحيات والأمان والتزامن وقواعد العمل الكثيرة، والهدف هو تسليم نظام متكامل مرتبط بعمق بالعمليات التجارية الحالية، وليس مجرد صفحة ويب.
+
+في هذه الحالة، النهج الأكثر منطقية ليس إلقاء جميع المتطلبات على الذكاء الاصطناعي دفعة واحدة، بل أولاً تنظيم عملية شاملة واضحة: ما هي الخطوات الرئيسية، ما هي المدخلات والمخرجات وتغييرات الحالة في كل خطوة، وأي العقد هي الأكثر حساسية للأداء والأمان. ثم بناءً على مخطط العملية هذا، فصل الأجزاء المستقلة نسبيًا وتكليف الذكاء الاصطناعي الحواري بإنشاء الواجهات والوحدات والسكريبتات والاختبارات.
+
+بالنظر إلى القدرات الحالية، الذكاء الاصطناعي أفضل في تسريع الخطوات الصغيرة واحدة تلو الأخرى، بينما تقوم أنت (أو فريقك) بقرار كيفية تقسيم الخطوات وكيفية ربطها، وتتحمل المسؤولية عن التصميم المعماري وتكامل النظام والعمليات.
+
+#### الفرق بين القدرة على الكتابة والقدرة على الاستخدام
+
+عند النظرة الأولى، يبدو أن الذكاء الاصطناعي يستطيع كتابة أي شيء، لكن هل هذه الأشياء قابلة للاستخدام فعلاً، وإلى أي مدى يمكن استخدامها، وكيف يمكننا تحديد الحدود؟
+
+مرجع خبرة يمكن الرجوع إليه:
+
+::: warning ⚠️ دليل السيناريوهات المناسبة
+
+- **النماذج الأولية / Demo / الأدوات الداخلية للاستخدام الشخصي**: مناسبة جدًا لتسليم النسخة الأولى للذكاء الاصطناعي ثم تكرار التفاصيل بنفسك.
+- **المنتجات الكبيرة الموجهة للمستخدمين الحقيقيين**: عادةً ما تحتاج إلى استثمار طويل الأمد من المهندسين في البنية والتجريد والأداء والصيانة.
+- **أنظمة الأمان العالي / الامتثال الصارم (مثل الدفع وإدارة المخاطر والرعاية الصحية)**: في المرحلة الحالية، لا ينبغي "النشر مباشرة بعد الإنشاء"، يجب إدخال عمليات مراجعة واختبار صارمة.
+  :::
+
+في الوقت الحالي، يمكنك الاعتماد على الذكاء الاصطناعي بثقة نسبيًا كشريك فعال للنماذج الأولية والأدوات الشخصية:
+طالما أنت مستعد للاختبار والتحسين بشكل أكبر، وطرح المزيد من الأسئلة "هناك خطأ هنا، ساعدني في إصلاحه واشرح السبب"، في مستوى النماذج الأولية والأدوات الداخلية، فإن الجودة الإجمالية عادةً ما تكون كافية وذات قيمة عملية.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
+      { title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
+      { title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
+      { title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. الممارسة العملية: أول تطبيق لك بالذكاء الاصطناعي الأصلي
+
+لنعد إلى الجزء العملي، في الجزء السابق، استخدمنا الذكاء الاصطناعي لصنع نموذج أولي قابل للعب من لعبة الثعبان بسرعة، وعرفنا تقريبًا ما يمكن وما لا يمكن للذكاء الاصطناعي فعله. بعد ذلك سنتعلم كيفية استخدام تقنيات **vibe coding** الأساسية لإنشاء لعبة ثعبان بالذكاء الاصطناعي **بإصدار حديث**. سنجعل الثعبان يأكل أحرفًا نصية بدلاً من الحبوب. أخيرًا سنجعل اللعبة تولد قصيدة بناءً على الأحرف النصية المأكولة، وترسم لوحة.
+
+من خلال هذا المثال العملي ستتمكن من فهم الفكرة الأساسية لطريقة البرمجة الجديدة تمامًا: كيف تتعلم التعبير عن المتطلبات بوضوح باللغة الطبيعية.
+
+### 3.1 لعبة ثعبان أصلية بالذكاء الاصطناعي
+
+في البداية، يمكننا التحدث مع النموذج اللغوي الكبير بأبسط طريقة ممكنة، مما سيساعدنا في الحصول على نموذج أولي للمنتج بسرعة. يمكننا إدخال النص مباشرة في مربع الدردشة:
+
+> **💡 مثال على prompt:** ساعدني في صنع لعبة ثعبان
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png)
+
+> **💡 مثال على prompt:** ساعدني في صنع لعبة ثعبان يجب أن تدعم
+>
+> 1. يمكنني أكل كلمات مختلفة سيتم جمعها في صندوق
+>    ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png)
+
+> **💡 مثال على prompt:** ساعدني في صنع لعبة ثعبان يجب أن تدعم:
+>
+> 1. يمكنني أكل كلمات مختلفة سيتم جمعها في صندوق
+> 2. عندما يأكل الثعبان 8 كلمات، يجب أن ينشئ LLM قصيدة بناءً على هذه الكلمات، ويمكننا إعادة مزج القصيدة حسب الحاجة.
+> 3. عند اكتمال القصيدة، ستقوم الخطوة التالية تلقائيًا بإنشاء صورة بناءً على القصيدة.
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png)
+
+لاحظ أنه أثناء عملية التطوير، قد نواجه مشاكل غير مرضية، مثل عدم استجابة الأزرار عند النقر، أو ظهور أخطاء عند استخدام الوظائف، أو عدم عمل الوظائف كما هو متوقع، أو عدم تطابق واجهة الواجهة الأمامية مع التصميم المتوقع.
+
+في هذه الحالة، نحتاج إلى طرح المزيد من الأسئلة على النموذج لمساعدته في إصلاح هذه المشاكل غير المتوقعة.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png)
+
+### 3.2 إضافة ميزات جديدة للعبة
+
+بعد الانتهاء من الوظائف الأساسية، يمكننا محاولة إضافة بعض التحسينات الجديدة لبرنامجنا! إذا شعرت أن عملية أكل الثعبان للكلمات أو الأحرف مملة بعض الشيء، يمكنك جعل الثعبان يأكل كلمات بألوان مختلفة وتغيير لون الثعبان وفقًا لذلك.
+
+يمكنك أيضًا إضافة تأثيرات بصرية لعملية "الأكل"، أو تقديم كلمات سحرية تؤدي إلى تأثيرات خاصة — مثل زيادة سرعة أو حجم الثعبان. فكرة أخرى هي جعل النموذج يولد قصيدة وصورة في كل مرة يأكل فيها الثعبان كلمة، بدلاً من الانتظار حتى يأكل ثماني كلمات.
+
+إذا وجدت هذا تحديًا، يمكنك طلب المساعدة مباشرة من النموذج اللغوي! يمكنه تقديم اقتراحات إبداعية لجعل لعبتك أكثر متعة. جربها!
+
+```
+1. آلية "الكلمات تفتح عوالم"
+في كل مرة يأكل الثعبان كلمة، يقوم LLM بإنشاء تداعيات شعرية للكلمة (مثلاً، "شجرة" ← "غابة"، "ظلال خضراء")، ويقوم نموذج الصور بإنشاء عمل فني صغير للكلمة على الفور. هذه الصور تتجمع تدريجيًا لتشكل لوحة بانورامية فريدة من صنع اللاعب، لذلك كل لعبة هي "رسم وكتابة شعر".
+
+2. لعبة " puzzles الشعر"
+كل كلمة يأكلها الثعبان تؤدي إلى توليد LLM لسطر شعري قصير، ونموذج الصور يولد رسمًا توضيحيًا. هذه الأبيات والصور تتحد معًا مثل puzzle لتشكل قصيدة وفنًا تعاوني بالذكاء الاصطناعي في نهاية الجولة.
+
+3. "الكلمات السحرية" و "فروع القصة"
+كلمات سحرية خاصة (مثل "ريح"، "ليل"، "حلم") لا تؤدي فقط إلى توليد LLM للشعر، بل تغير أيضًا مزاج الموقف أو موضوعه — تحويل أسلوب الصور المولدة إلى ليلي أو عاصفي أو حالمة.
+فروع القصة: LLM يعطي موضوعًا أو لغزًا في البداية (مثل "ذكريات الخريف"). اختيارات الكلمات لدى اللاعب تؤثر مباشرة على تطور القصة والشعر، ويقوم نموذج الصور بتحديث الخلفية والتأثيرات البصرية في الوقت الفعلي.
+
+4. "الإنشاء التفاعلي في الوقت الفعلي"
+بعد كل كلمة، يولد LLM سطر حوار أو وصف، يمكن لـ NPC في اللعبة "التحدث" مع اللاعب، أو يمكن للبيئة أن تتغير وفقًا لذلك.
+مظهر الثعبان أو العوائق في اللعبة يمكن أن تتغير بصريًا بناءً على الكلمات المأكولة، بفضل نموذج الصور.
+
+5. "الإبداع والمشاركة"
+يمكن للاعبين حفظ ومشاركة قصائدهم وصورهم المبتكرة بالذكاء الاصطناعي في نهاية الجلسة، للتباهي بإبداعهم "التعاوني بالذكاء الاصطناعي" الفريد.
+لوحات المتصدرين مثل "أجمل شعر وفن"، "أكثر مزيج كلمات إبداعي"، لتشجيع إعادة اللعب والإبداع.
+
+6. تحدي "الثعبان حسب الجمل"
+الوضع العكسي: LLM يعطي سطرًا شعريًا أو لغزًا، يجب على اللاعب توجيه الثعبان لأكل الكلمات بالترتيب لإعادة بناء الجملة. أكل كلمة خاطئة يؤدي إلى عواقب ممتعة أو فنية من خلال نموذج إنشاء الصور.
+
+7. "مراحل ذاتية" و "اختيار الأسلوب"
+في بداية اللعبة، يختار اللاعب موضوعًا (مثل "حكايات خرافية"، "خيال علمي"، "شعر تانغ")، وسيكيف كل من LLM ونموذج الصور اختيار الكلمات وأسلوب الشعر والتأثيرات البصرية ليتطابق مع الموضوع، مما يجعل كل لعبة تبدو جديدة.
+
+8. "الإبداع المشترك الحي"
+عند أكل كلمة خاصة، يمكن لـ LLM أن يطلب من اللاعب إدخال عبارة أو اختيار أسلوب، ثم يقوم الذكاء الاصطناعي بتوليد الأبيات والرسوم التوضيحية المناسبة، مما يجعلها إبداعًا مشتركًا حقيقيًا بين الإنسان والذكاء الاصطناعي.
+
+9. " مفاجآت الذكاء الاصطناعي والإنجازات"
+مجموعات كلمات معينة يتعرف عليها LLM كمواضيع خاصة أو نكات داخلية (مثل "قمر"، "زهر Osmanthus"، "ضفة النهر")، مما يؤدي إلى أبيات ورسوم توضيحية نادرة كمكافأة على الاستكشاف.
+
+10. "قصة النمو"
+مع نمو الثعبان، يولد LLM قصيدة قصة متصلة، ويقوم نموذج الصور بإنشاء لوحة طويلة أو بانورامية سلسة، لذلك اللاعب "يكتب ويرسم ويلعب" في نفس الوقت.
+```
+
+بالإضافة إلى ذلك، يمكننا أيضًا طلب من LLM مساعدتنا في توليد prompt على مستوى المشروع مباشرة. في القسم السابق، كتبنا بأنفسنا فقط prompt لعبة الثعبان. الآن دعنا نحاول جعل النموذج اللغوي الكبير يولد prompt مع إطار كامل ومسار تنفيذ (يمكنك استخدام z.ai مباشرة للتوليد).
+
+إذا كنت تريد تعلم كيفية كتابة prompts أفضل، يمكنك الاطلاع على [ملحق هندسة Prompts](/ar-sa/appendix/8-artificial-intelligence/prompt-engineering).
+
+> أريد أن يجعل الذكاء الاصطناعي يولد لعبة ثعبان على الويب، أحتاج إلى prompt أكثر اكتمالاً لجعل النتيجة أكثر إثارة وإمتاعًا. يرجى توليد prompt المناسب. الهدف الحالي: إنشاء لعبة ثعبان يجب أن تطبق وظيفة أكل كلمات مختلفة لتوليد الشعر، ويجب أن تتضمن وحدة إنشاء الصور.
+
+ستكون إجابة z.ai كالتالي:
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png)
+
+يمكننا استخدام هذا prompt لإعادة إنشاء المشروع في وضع التطوير الكامل:
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png)
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'التحديات والفرص', description: 'إمكانيات برمجة جديدة للناس العاديين' },
+      { title: 'استكشاف القدرات', description: 'تجربة تطوير فائقة السرعة في 60 ثانية' },
+      { title: 'مشروع عملي', description: 'بناء لعبة ثعبان أصلية بالذكاء الاصطناعي' },
+      { title: 'توسيع الإبداع', description: 'ابتكار ألعاب متنوعة' }
+    ]" />
+  </ClientOnly>
+</div>
+
+### 3.3 حاول صنع ألعاب صغيرة أخرى
+
+بالإضافة إلى لعبة الثعبان، يمكننا ترك الخيال يبحر بحرية.
+
+نبتكر أي شيء نريد ابتكاره، بل ونحاول إفساد كل شيء! ثم نبدأ من جديد!
+
+```
+1. معرض فنون الذكاء الاصطناعي
+   الوصف: معرض على الإنترنت لعرض الأعمال الفنية المولدة بالذكاء الاصطناعي، يمكن للمستخدمين رفع ومشاركة والتعليق على الأعمال الفنية.
+   الوظائف: نظام حسابات المستخدمين، رفع وعرض الأعمال الفنية، نظام التقييم، التصفح حسب الفئة، تكامل أدوات إنشاء الذكاء الاصطناعي.
+   التميز التقني: واجهة React/Vue، خادم Node.js، قاعدة بيانات MongoDB، تكامل واجهة برمجة تطبيقات الذكاء الاصطناعي.
+
+2. أرشيف الألعاب الكلاسيكية
+   الوصف: موقع يكرم الألعاب الكلاسيكية، يتضمن تاريخ الألعاب، أدلة اللعب، وألعاب كلاسيكية قابلة للعب عبر الإنترنت.
+   الوظائف: قاعدة بيانات الألعاب، عرض الخط الزمني، محاكي عبر الإنترنت، تعليقات المستخدمين، وظيفة جمع الألعاب.
+   التميز التقني: تصميم متجاوب، تنفيذ ألعاب WebGL/Canvas، واجهة RESTful API، نظام مصادقة المستخدمين.
+
+3. متتبع الحياة المستدامة
+   الوصف: موقع يساعد المستخدمين على تتبع وتقليل بصمتهم الكربونية من خلال نصائح بيئية وتحديات مجتمعية.
+   الوظائف: حاسبة البصمة الكربونية الشخصية، تحديد الأهداف، تتبع التقدم، تحديات مجتمعية، قاعدة معرفة بيئية.
+   التميز التقني: تصور البيانات، تحسين الجوال، وظائف اجتماعية، إشعارات الدفع.
+
+4. مساعد المطبخ الافتراضي
+   الوصف: منصة توجيه طبخ قائمة على الذكاء الاصطناعي توصي بوصفات مخصصة وإرشادات طبخ خطوة بخطوة.
+   الوظائف: قاعدة بيانات الوصفات، التعرف على المكونات، توصيات مخصصة، مؤقت الطبخ، تحليل التغذية.
+   التميز التقني: واجهة برمجة التعرف على الصور، نظام توصيات التعلم الآلي، التحكم الصوتي، إرشادات فيديو في الوقت الفعلي.
+
+5. منصة اكتشاف الموسيقى المستقلة
+   الوصف: منصة بث موسيقي تركز على الفنانين المستقلين والناشئين، توفر تجربة اكتشاف فريدة.
+   الوظائف: بث الموسيقى، ملفات الفنانين الشخصية، توصيات مخصصة، إنشاء قوائم التشغيل، تعليقات المجتمع.
+   التميز التقني: معالجة البث الصوتي، خوارزميات التوصية، وظائف اجتماعية، تصور الموسيقى.
+
+6. نظام إدارة المهام البسيط
+   الوصف: أداة إدارة مهام بجماليات Zen، تركز على التنظيم البسيط والفعال للمهام.
+   الوظائف: إنشاء وتصنيف المهام، تحديد الأولويات، تتبع التقدم، تعاون الفريق، تحليل البيانات.
+   التميز التقني: تصميم واجهة مستخدم بسيط، وظيفة السحب والإفلات، المزامنة في الوقت الفعلي، توافق متعدد المنصات.
+
+7. ورشة كتابة الخيال العلمي
+   الوصف: منصة توفر أدوات إبداعية وإلهامًا لكتاب الخيال العلمي، بما في ذلك أدوات بناء العالم وتطوير الشخصيات.
+   الوظائف: أدوات بنية القصة، ملفات الشخصيات، قوالب بناء العالم، إحصائيات الكتابة، ملاحظات المجتمع.
+   التميز التقني: محرر نصوص منسق، تصور البيانات، تعاون في التحرير، إبداع بمساعدة الذكاء الاصطناعي.
+
+8. خريطة المعرفة الشخصية
+   الوصف: أداة تساعد المستخدمين على بناء شبكة معرفة شخصية، تصور وربط الأفكار والمعلومات المختلفة.
+   الوظائف: إنشاء وربط العقد، نظام العلامات، وظيفة البحث، أدوات الاستيراد/التصدير، رسوم بيانية مرئية.
+   التميز التقني: قاعدة بيانات الرسم البياني، خوارزميات تصور البيانات، دعم Markdown، المزامنة عبر الأجهزة.
+
+9. حديقة نباتات افتراضية
+   الوصف: موسوعة نباتات تفاعلية يمكن للمستخدمين استكشاف عالم النباتات وإنشاء حديقة افتراضية.
+   الوظائف: قاعدة بيانات النباتات، نماذج نباتات ثلاثية الأبعاد، محاكاة النمو، أدلة البستنة، عرض المجتمع.
+   التميز التقني: تصيير ثلاثي الأبعاد، محاكاة تغير الفصول، تكامل AR، واجهة برمجة التعرف على النباتات.
+
+10. ساحة تحديات البرمجة
+    الوصف: منصة مسابقات عبر الإنترنت للمبرمجين مع تحديات برمجة بمستويات صعوبة مختلفة.
+    الوظائف: أسئلة التحدي، محرر أكواد، تقييم تلقائي، لوحة المتصدرين، مسارات التعلم.
+    التميز التقني: بيئة sandbox للأكواد، نظام تقييم في الوقت الفعلي، تصور الخوارزميات، وظائف التعلم الاجتماعي.
+```
+
+والمزيد... إذا كنت تحب الألعاب، دعنا نحاول ابتكار ألعاب معًا!
+
+```
+1. RPG عالم مفتوح ثلاثي الأبعاد
+   الوصف: RPG خيالية بعالم مفتوح واسع ومهام وتطور الشخصيات.
+   الوظائف: دورة ليل ونهار، طقس ديناميكي، شجرة المهارات، تعاون متعدد اللاعبين، نظام التصنيع.
+   التميز التقني: Three.js أو Babylon.js للتصيير ثلاثي الأبعاد، منطق اللعبة من جانب الخادم، تخصيص الشخصية، نظام الحفظ.
+
+2. ساحة إطلاق نار من منظور شخص أول (FPS)
+   الوصف: FPS سريع الإيقاع متعدد اللاعبين مع أوضاع لعب وخرائط متنوعة.
+   الوظائف: قتال فرق، التقاط العلم، تخصيص الأسلحة، مباريات تصنيف.
+   التميز التقني: WebGL/Three.js للرسومات ثلاثية الأبعاد، شبكة لعب متعددة، كشف التصادم، دردشة صوتية.
+
+3. شطرنج الذكاء الاصطناعي ولعب متعدد اللاعبين
+   الوصف: منصة شطرنج كاملة الميزات مع منافسين بالذكاء الاصطناعي ولعب عبر الإنترنت.
+   الوظائف: مستويات صعوبة الذكاء الاصطناعي، تحديات نهاية اللعبة، وضع البطولة، تحليل إعادة اللعب.
+   التميز التقني: مكتبة منطق الشطرنج، WebSocket للعب في الوقت الفعلي، نظام تصنيف ELO، مكافحة الغش.
+
+4. لعبة Mahjong متعددة اللاعبين عبر الإنترنت
+   الوصف: لعبة Mahjong تقليدية مع لعب متعدد اللاعبين عبر الإنترنت ونظام تسجيل النقاط.
+   الوظائف: مجموعات قواعد متعددة، غرف خاصة، نظام تصنيف، وظيفة إعادة اللعب.
+   التميز التقني: منطق مطابقة البلاط، لعب متعدد اللاعبين في الوقت الفعلي، نظام اللوبي، تتبع النقاط.
+
+5. لعبة استراتيجية قائمة على الأدوار
+   الوصف: لعبة استراتيجية تكتيكية مع قتال شبكي وإدارة الوحدات.
+   الوظائف: وضع الحملة، معارك عشوائية، ترقية الوحدات، ضباب الحرب، لعب متعدد اللاعبين.
+   التميز التقني: نظام حركة الشبكة، اتخاذ قرارات الذكاء الاصطناعي، مزامنة الأدوار، نظام الحفظ/التحميل.
+
+6. لعبة سباق سيارات مع الوقت
+   الوصف: لعبة سباق سيارات ثلاثية الأبعاد تركز على سباقات الوقت وأرقام الحلبات.
+   الوظائف: حلبات متعددة، تخصيص السيارات، إعادة لعب الأشباح، لوحة المتصدرين.
+   التميز التقني: فيزياء سيارات ثلاثية الأبعاد، محرر الحلبات، نظام إعادة اللعب، لوحة متصدرين عبر الإنترنت.
+
+7. لعبة بطاقات قتالية (بناء المجموعة)
+   الوصف: لعبة بطاقات استراتيجية يبني اللاعبون مجموعاتهم ويقاتلون الخصوم.
+   الوظائف: جمع البطاقات، بناء المجموعة، مباريات تصنيف، أحداث موسمية.
+   التميز التقني: منطق لعبة البطاقات، نظام المطابقة، خصوم الذكاء الاصطناعي، حركات البطاقات.
+
+8. Battle Royale (عرض علوي ثنائي الأبعاد)
+   الوصف: لعبة Battle Royale بعرض علوي ثنائي الأبعاد مع منطقة لعب تتقلص وآلية الغنائم.
+   الوظائف: وضع فردي وفريق، تنوع الأسلحة، أحداث داخل اللعبة، لوحة المتصدرين.
+   التميز التقني: لعب متعدد اللاعبين في الوقت الفعلي، منطق تقليص المنطقة، نظام توليد الغنائم، المطابقة.
+
+9. لعبة رعب بقاء (منظور شخص أول)
+   الوصف: لعبة رعب من منظور شخص أول مع إدارة الموارد وآليات الهروب.
+   الوظائف: بيئة غامضة، حل الألغاز، ذكاء اصطناعي للعدو، نهايات متعددة.
+   التميز التقني: إضاءة ديناميكية، تصميم الصوت، البحث عن المسار للعدو، نظام الحفظ.
+
+10. لعبة إيقاع موسيقي (ثلاثية الأبعاد)
+    الوصف: لعبة إيقاع ثلاثية الأبعاد يضرب اللاعب النوتات مع إيقاع الموسيقى.
+    الوظائف: مستويات صعوبة متعددة، محرر الحلبات، دعم الأغاني المخصصة، لوحة المتصدرين.
+    التميز التقني: تحليل الصوت، مزامنة الإيقاع، مسار النوتات ثلاثي الأبعاد، كشف توقيت الإدخال.
+```
+
+## 📚 الواجب
+
+<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🎯 واجب هذا الفصل: أنجز أول مجموعة من ألعابك الصغيرة الأصلية بالذكاء الاصطناعي</div>
+  </template>
+
+  <p>
+    في هذا القسم، اتبعت الخطوات وتجربت العملية الكاملة من "توليد لعبة الثعبان عبر الحوار" إلى "فهم أسلوب تصميم الألعاب الصغيرة الأصلية بالذكاء الاصطناعي". الواجب التالي يساعدك على تحويل هذا الفهم إلى قدرات حقيقية خاصة بك.
+  </p>
+
+  <ol>
+    <li>
+      <strong>إعادة إنشاء لعبة الثعبان الأصلية بالذكاء الاصطناعي بالكامل</strong>
+      <ul>
+        <li>الحد الأدنى: الثعبان يتحرك، وعند أكل "الطعام" يتغير الطول والنقاط، والاصطدام بالجدار أو الجسم ينتهي اللعبة.</li>
+        <li>أثناء إعادة الإنشاء، تدرب على إلقاء ظاهرة الخطأ + رسالة الخطأ + مقتطف الكود الرئيسي على الذكاء الاصطناعي دفعة واحدة، واطلب منه الإصلاح "بالوضع المبسط".</li>
+      </ul>
+    </li>
+    <li>
+      <strong>(اختياري) ابتكار لعبة أو Demo صغيرة أصلية بالذكاء الاصطناعي</strong>
+      <ul>
+        <li>يمكن أن تكون أي لعبة خفيفة حول النصوص أو الصور أو الموسيقى أو الإيقاع، مثل "أكل الكلمات وكتابة الشعر" أو "النقر بالإيقاع" أو "الركض التوليدي" وغيرها.</li>
+        <li>التركيز ليس على مدى روعة الرسومات، بل على قدرتك على التوضيح بوضوح: كيف ساعد الذكاء الاصطناعي تحديدًا، وما هو الجزء الذي حلّ مشكلة "صعبة أو مرهقة يدويًا".</li>
+      </ul>
+    </li>
+  </ol>
+
+  <p>
+    هذه هي نهاية البرنامج التعليمي! قد تحتاج إلى <strong>4 ساعات</strong> لإكمال جميع المحتويات وبناء لعبة الثعبان الخاصة بك. لا تستعجل — استكشف وجرب واستمتع بالعملية. إذا واجهت مفاهيم لا تفهمها أثناء العملية، نوصي بالرجوع إلى الأقسام ذات الصلة في الملحق أدناه.
+  </p>
+</el-card>
+
+## الملحق
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
+  <div style="font-weight: bold; margin-bottom: 8px;">تنقل الملحق</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    هنا مجموعة من المفاهيم الأساسية المتعلقة بهذا الفصل: إذا واجهت أسئلة مثل "ما هو الواجهة الأمامية" أو "ما يعنيه Vibe Coding بالضبط" أثناء التعلم، يمكنك العودة هنا للرجوع إليها في أي وقت.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>الملحق 1: هل نحتاج إلى معرفة تطوير الواجهة الأمامية؟</b></a><br/>
+      <span style="font-size: 12px; color: #909399">فهم موقع الواجهة الأمامية في التطبيق، ومعرفة الأجزاء "المرئية".</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>الملحق 2: ما هو Vibe Coding بالضبط</b></a><br/>
+      <span style="font-size: 12px; color: #909399">فهم الفكرة الأساسية لـ "التطوير الحواري"، ومعرفة كيفية التعاون مع الذكاء الاصطناعي.</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="16" style="margin-top: 10px;">
+    <el-col :span="12">
+      <a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>الملحق 3: سياق النموذج</b></a><br/>
+      <span style="font-size: 12px; color: #909399">فهم المفاهيم مثل "طول السياق" التي نسمعها كثيرًا لكنها يسهل الخلط بينها.</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>الملحق 4: قدرة اتباع التعليمات</b></a><br/>
+      <span style="font-size: 12px; color: #909399">فهم لماذا لا "يفهم" النموذج أحيانًا، وكيف تكتب بشكل أوضح.</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    نصيحة: يمكنك استخدام Ctrl/⌘+F للبحث عن الكلمات الرئيسية، أو نسخ الفقرات التي لا تفهمها ولصقها في الذكاء الاصطناعي، واطلب منه إعادة شرحها بطريقة "يمكن للمبتدئ تمامًا فهمها".
+  </div>
+</el-card>
+
+<a id="appendix-1"></a>
+
+## [الملحق 1: هل نحتاج إلى معرفة تطوير الواجهة الأمامية؟](#appendix-nav)
+
+::: tip 💡 ملخص بجملة واحدة
+لا تحتاج إلى معرفة كيفية كتابة الأكواد، لكن فهم المفاهيم الأساسية يساعدك على وصف المتطلبات للذكاء الاصطناعي بشكل أفضل.
+:::
+
+<el-row :gutter="16" style="margin: 20px 0;">
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">👁️</span>
+          <span style="font-weight: bold;">الواجهة الأمامية</span>
+          <el-tag type="success" size="small">مرئي</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        كل المحتوى الذي يمكن للمستخدم **رؤيته والنقر عليه**
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>عناوين الصفحة، النصوص، الصور</li>
+          <li>الأزرار، مربعات الإدخال، القوائم المنسدلة</li>
+          <li>واجهة اللعبة، تأثيرات الحركة</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">⚙️</span>
+          <span style="font-weight: bold;">الواجهة الخلفية</span>
+          <el-tag type="info" size="small">غير مرئي</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        معالجة البيانات التي تعمل على الخادم
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>تخزين نقاط المستخدم</li>
+          <li>التحقق من حساب تسجيل الدخول</li>
+          <li>توزيع محتوى المراحل</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+### الثلاثي الأساسي للواجهة الأمامية
+
+يستخدم المتصفح ثلاثة أنواع من "الأكواد" لبناء الصفحات:
+
+<el-tabs type="border-card" style="margin: 20px 0;">
+  <el-tab-pane label="🏗️ HTML - الهيكل">
+    <div style="padding: 10px;">
+      <p><strong>الوظيفة:</strong> تعريف <strong>ماذا</strong> يوجد على الصفحة من عناصر</p>
+      <p><strong>التشبيه:</strong> مخطط هيكل المنزل (أين الجدران والأبواب والنوافذ)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>&lt;button&gt;اضغط هنا&lt;/button&gt;
+&lt;h1&gt;العنوان&lt;/h1&gt;
+&lt;img src="photo.png"&gt;</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="🎨 CSS - التنسيق">
+    <div style="padding: 10px;">
+      <p><strong>الوظيفة:</strong> التحكم في <strong>شكل</strong> العناصر</p>
+      <p><strong>التشبيه:</strong> ديكور المنزل (الألوان، المواد، التخطيط)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button {
+  background: blue;
+  color: white;
+  border-radius: 8px;
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="⚡ JavaScript - السلوك">
+    <div style="padding: 10px;">
+      <p><strong>الوظيفة:</strong> جعل الصفحة <strong>تتحرك</strong></p>
+      <p><strong>التشبيه:</strong> أسلاك ومفاتيح المنزل (الاستجابة عند النقر)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button.onclick = () => {
+  alert('لقد ضغطت علي!')
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+</el-tabs>
+
+### كيف يتحول الكود إلى صفحة؟
+
+عندما تفتح صفحة ويب، يعالج المتصفح ثلاثة أنواع من الأكواد بالترتيب:
+
+**1. HTML — تعريف هيكل الصفحة**
+يحلل المتصفح أولاً HTML لمعرفة العناصر الموجودة على الصفحة (العناوين، الفقرات، الصور، الأزرار، إلخ) والعلاقات الهرمية بينها.
+
+**2. CSS — تطبيق التنسيقات**
+ثم يضيف المتصفح الأنماط لهذه العناصر بناءً على قواعد CSS: الألوان، الأحجام، المواضع، المسافات، مما يجعل الصفحة جميلة.
+
+**3. JavaScript — إضافة التفاعل**
+أخيرًا ينفذ كود JavaScript لجعل الصفحة "تتحرك": الاستجابة للنقرات، إرسال النماذج، تشغيل الرسوم المتحركة، إلخ.
+
+**4. عرض الصفحة**
+نتيجة تعاون الثلاثة هي صفحة الويب التي تراها في النهاية.
+
+### أطر الواجهة الأمامية الحديثة: من HTML إلى React/Vue
+
+HTML و CSS و JavaScript المذكورة سابقًا هي "الثلاثي الأساسي" لتطوير الواجهة الأمامية، وهي أساس جميع صفحات الويب. ولكن عندما تصبح الصفحات معقدة، يواجه التطوير المباشر بالثلاثي تحديات: صعوبة صيانة الكود، الكثير من العمل المتكرر، مشاكل مزامنة البيانات.
+
+**أطر الواجهة الأمامية الحديثة** (مثل React و Vue و Angular) مبنية على HTML/CSS/JS لجعل التطوير أكثر كفاءة:
+
+**1. HTML/CSS/JS (المرحلة الأساسية)**
+التعامل المباشر مع عناصر الصفحة، مناسب للصفحات البسيطة. ولكن عندما يزيد حجم الكود، تختلط كل المنطقيات معًا ويصبح من الصعب صيانتها.
+
+**2. jQuery (مرحلة الانتقال)**
+بسّط عمليات DOM وجعل الكود أكثر إيجازًا. لكن لا يزال يتطلب الإدارة اليدوية لحالة الصفحة، وعند تغير البيانات يجب العثور على العنصر المقابل وتحديثه يدويًا.
+
+**3. React/Vue (المرحلة الحديثة)**
+اعتماد تصميم قائم على المكونات والمدفوع بالحالة:
+- **المكونات**: تقسيم الصفحة إلى وحدات مستقلة قابلة لإعادة الاستخدام (مثل الأزرار والبطاقات وشريط التنقل)
+- **المدفوع بالحالة**: عند تغير البيانات، يقوم الإطار بتحديث الواجهة المقابلة تلقائيًا بدون تدخل يدوي
+
+::: tip 💡 فهم بسيط
+- **HTML/CSS/JS** = المواد الأساسية (الطوب، الإسمنت، الحديد)
+- **React/Vue** = إطار البناء (يوفر المعايير والأدوات لبناء المنزل)
+
+في عصر البرمجة بمساعدة الذكاء الاصطناعي، لا تحتاج إلى إتقان جميع تفاصيل الأطر، فقط فهم المفاهيم الأساسية، ويمكنك من خلال وصف اللغة الطبيعية جعل الذكاء الاصطناعي يساعدك في توليد الأكواد.
+:::
+
+### في Vibe Coding
+
+**النقطة الأساسية: لا تحتاج إلى كتابة الأكواد، فقط تحتاج إلى الوصف.**
+
+بعد فهم مفاهيم الواجهة الأمامية، يمكنك وصف المتطلبات للذكاء الاصطناعي بهذه الطريقة:
+
+> "اصنع صفحة لوحة متصدرين باستخدام React، عرض قائمة النقاط على الجانب الأيمن، عند النقر على صف يظهر تفاصيل اللاعب في الأسفل، بأسلوب بسيط وعصري."
+
+إذا كنت تريد فهمًا أعمق لمفاهيم الواجهة الأمامية الأساسية مثل HTML و CSS و JavaScript، يمكنك الاطلاع على [ملحق أساسيات الويب](/ar-sa/appendix/3-browser-and-frontend/javascript-deep-dive). لمعرفة تاريخ تطوير تقنيات الواجهة الأمامية، يمكنك الاطلاع على [ملحق تاريخ تطور الواجهة الأمامية](/ar-sa/appendix/3-browser-and-frontend/frontend-frameworks).
+
+<a id="appendix-2"></a>
+
+## [الملحق 2: ما هو Vibe Coding بالضبط](#appendix-nav)
+
+> 💡 ما هو Vibe Coding؟ عالم الكمبيوتر [Andrej Karpathy](https://karpathy.ai/) (أحد المؤسسين المشاركين لـ OpenAI، الرئيس السابق للذكاء الاصطناعي في تسلا) صاغ مصطلح **vibe coding** في فبراير 2025. يشير هذا المفهوم إلى طريقة برمجة تعتمد على LLM، **تسمح للمبرمجين بتوليد أكواد قابلة للعمل من خلال تقديم أوصاف باللغة الطبيعية بدلاً من كتابة الأكواد يدويًا.**
+
+![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png)
+
+من حيث المعنى الحرفي، يمكن فهم Vibe Coding على أنه «طريقة تطوير من خلال الكلام». التغيير الأساسي هو: لم تعد بحاجة إلى كتابة الأكواد سطرًا بسطر، أو البحث عن القواعد، أو تصحيح الأخطاء، بل تصف ما تريده مباشرة باللغة الطبيعية، مثل:
+
+- أحتاج إلى صفحة تسجيل دخول بها مربع إدخال رقم الهاتف ومربع إدخال رمز التحقق.
+- بعد نجاح تسجيل الدخول، الانتقال إلى الصفحة الرئيسية وعرض اسم المستخدم في الزاوية العلوية اليمنى.
+- أعطني لعبة ثعبان بسيطة يمكن التحكم بها بمفاتيح الاتجاه.
+
+النموذج اللغوي الكبير (LLM) يترجم هذه الأوصاف تلقائيًا إلى أكواد قابلة للتشغيل حقًا، وينشئ الصفحات والمنطق وهياكل البيانات المقابلة. بعد رؤية النتيجة، تقدم ملاحظات التعديل باللغة الطبيعية، مثل تكبير الزر قليلًا، أو تغيير الخلفية إلى داكنة، أو تسجيل النقاط وعرض لوحة المتصدرين، ويستمر الذكاء الاصطناعي في تعديل التنفيذ وفقًا لمتطلباتك.
+
+في هذا النموذج، لا تحتاج إلى تعلم لغة البرمجة أولاً ثم كتابة الأكواد؛ بل تركز جهودك الرئيسية على: توضيح ما يجب فعله، وتقييم موضع الخطأ بعد رؤية النتائج، ثم تقديم تعديلات جديدة. الذكاء الاصطناعي مسؤول عن تحويل هذه الأفكار العليا إلى تنفيذ ملموس، مما يقلل بشكل كبير من عمل البرمجة الميكانيكي والمتكرر.
+
+يمكنك النقر هنا لمعرفة المزيد من التفاصيل حول vibe coding: [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
+
+يمكنك النقر هنا لمعرفة المزيد من محتوى Karpathy: [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
+
+### كيف تتظاهر بأنك خبير في Vibe Coding
+
+في الواقع، في عملية vibe coding الحقيقية، نادرًا ما نستخدم prompts معقدة. ربما نحتاج في البداية إلى تقديم prompt محدد ومعقد بشكل معتدل للبرنامج بأكمله، ولكن بعد ذلك في كل خطوة، قد تحتاج فقط إلى الأنواع التالية من prompts:
+
+على سبيل المثال، قد تطلب من النموذج إصلاح خطأ في الكود، أو إعادة إخراج النسخة الكاملة بعد التعديل، أو عدم تغيير المنطق الأصلي، أو عدم إضافة وظائف غير مطلوبة، أو الالتزام بأسماء المتغيرات والدوال الموجودة. الفكرة الأساسية هي أن prompt اليومي في vibe coding غالبًا لا يكون طويلًا، بل يكون طلبًا مباشرًا يصف المشكلة أو القيد الذي تريد من النموذج الالتزام به.
+
+قد يبدو هذا مبالغًا فيه بعض الشيء، لكن في الواقع، هذه هي prompts التي قد نستخدمها في عملنا اليومي. بسبب **حدود طول السياق** للنماذج اللغوية الكبيرة، أو أحيانًا لأن **قدرة اتباع التعليمات** ليست قوية جدًا، قد ينسى النموذج ما تمت مناقشته في وقت مبكر من المحادثة. في vibe coding، نميل إلى استخدام النماذج ذات السياق الطويل والنماذج ذات قدرة اتباع تعليمات قوية، ويمكننا الحكم على ما إذا كان النموذج جيدًا من خلال ترتيب أو مؤشرات كلاهما.
+
+أو، بسبب أسلوب مجموعة بيانات التدريب، تميل النماذج الكبيرة إلى الرد بأسلوب بيانات التدريب الخاصة بها. على سبيل المثال، بعض الأشخاص يتحدثون بجدية، وبعضهم يحب إضافة الكثير من الزخارف، وبعض النماذج الكبيرة تحب إضافة الكثير من التعليقات أو وحدات غير ضرورية في الكود.
+
+<a id="appendix-3"></a>
+
+## [الملحق 3: سياق النموذج](#appendix-nav)
+
+سياق النموذج يمكن فهمه على أنه الذاكرة قصيرة المدى للذكاء الاصطناعي. يشير إلى جميع المحتوى النصي الذي يمكن للنموذج "رؤيته" و"تذكره" في محادثة واحدة أو مهمة واحدة، بما في ذلك أسئلتك السابقة والإرشادات المقدمة من النظام والمواد ذات الصلة وغيرها.
+
+بفضل السياق، يمكن للذكاء الاصطناعي فهم أنك تستمر في السؤال بناءً على المحتوى السابق، ويمكنه إجراء محادثات تبدو متماسكة وطبيعية جولة بعد جولة. بدون السياق، كل جملة منك ستبدو للمثل استفسارًا جديدًا تمامًا، ولن يعرف ما قلته سابقًا، وبالتالي لا يمكنه متابعة المحادثة.
+
+كل نموذج لديه طول سياق فعّال خاص به (context window). هذا الطول يُقاس عادةً بـ token (يمكن فهمها تقريبًا كوحدة "أجزاء الكلمات")، حاليًا معظم النماذج السائدة تتراوح بين 32k إلى 128k token. كلما طال السياق، كلما استطاع النموذج "قراءة" محتوى أكثر في المرة الواحدة، مثل:
+
+- قراءة ورقة بحثية أو تقرير طويل بالكامل دفعة واحدة
+- الرجوع إلى مواد متعددة وحالات متعددة في نفس جولة المحادثة
+- جعل النموذج يتذكر استنتاجات المناقشات المعقدة من الجولات السابقة
+
+عندما يقترب المحتوى الذي تدخله من حد سياق النموذج أو يتجاوزه، غالبًا ما تظهر بعض الظواهر الشائعة:
+
+- يبدأ النموذج في نسيان التفاصيل أو المعلومات الرئيسية في النصوص الطويلة السابقة
+- مع تقدم المحادثة، ينحرف الموضوع تدريجيًا عن الهدف الأصلي
+- بين الإجابات المختلفة على نفس المادة، يكون المحتوى المشار إليه غير متسق
+
+هذه الظواهر ليست لأن النموذج "أصبح أغبى" فجأة، بل هي نتيجة طبيعية عندما يتم ملء سعة السياق أو الاقتراب من ملئها.
+
+في الاستخدام الفعلي، نأمل أن يكون السياق طويلاً قدر الإمكان، ولكن يجب أيضًا أن ندرك:
+
+- كلما طال السياق، زادت موارد الحوسبة المستهلكة
+- تكلفة الاستدعاء المقابلة (الرسوم) سترتفع أيضًا
+
+لذلك، عند تصميم تطبيقات الذكاء الاصطناعي، نحتاج إلى تحقيق التوازن بين جعل النموذج يرى ما يكفي والتحكم في التكلفة وتحسين الكفاءة. على سبيل المثال:
+
+- استخلاص المعلومات التي تحتاج حقًا إلى الاحتفاظ بها طويل الأمد قبل تقديمها للنموذج
+- بالنسبة للمعلومات التفصيلية التي لم تعد ضرورية، تجنب إدخالها كما هي مرارًا وتكرارًا في السياق
+- استخدام قواعد المعرفة الخارجية وغيرها من الطرق لتسليم "الذاكرة طويلة المدى" للنظام بدلاً من إجبارها في سياق النموذج
+
+<a id="appendix-4"></a>
+
+## [الملحق 4: قدرة اتباع التعليمات](#appendix-nav)
+
+قدرة اتباع التعليمات تشير إلى: بعد أن يفهم النموذج تعليماتك، هل يمكنه تنفيذها بدقة واكتمال وفقًا لمتطلباتك. لا تشمل فقط القدرة على الإجابة على الأسئلة، بل تشمل أيضًا القدرة على إتمام المهام بالتنسيق والأسلوب والخطوات المحددة.
+
+على سبيل المثال، فيما يلي جميعها تعليمات ذات متطلبات واضحة للنموذج:
+
+- تلخيص هذه المقالة في ثلاث نقاط رئيسية
+- كتابة رد بريد إلكتروني بنبرة رسمية ومهذبة
+- ترجمة هذه الكلمة إلى الإنجليزية مع إنشاء جملة مثال لكل منها
+- استخراج المؤلف والوقت والأحداث الرئيسية من المقالة
+
+النموذج ذو قدرة قوية في اتباع التعليمات عادةً ما يتميز بالخصائص التالية:
+
+- إخراج المحتوى بالكمية المطلوبة
+  على سبيل المثال، إذا طُلب تلخيص ثلاث نقاط، فلن يعطي خمس نقاط.
+- تغطية جميع العناصر المحددة
+  على سبيل المثال، إذا طُلب استخراج المؤلف والوقت والحدث، فلن يفوت أيًا منها.
+- الالتزام بالتنسيق والنبرة المحددين
+  على سبيل المثال، إذا طُلب استخدام نبرة رسمية، فلن يُخرج ردًا شفهيًا جدًا.
+- عدم القيام بإضافات غير ضرورية
+  على سبيل المثال، إذا طُلب الترجمة وإنشاء جمل، فلن يُخرج فقرة طويلة من التفسيرات غير ذات الصلة.
+
+في التطبيقات العملية، قدرة قوية في اتباع التعليمات مهمة جدًا، والأسباب تشمل:
+
+- تحسين الاستقرار: نفس التعليمات في أوقات مختلفة وعند التشغيل المتعدد، تكون بنية الإخراج وأنماط السلوك أكثر اتساقًا، وأقل عرضة للتفلسف
+- تحسين إمكانية التكرار: عندما تقوم بتكوين prompt في منتج أو عملية، يمكنك توقع كيف سيستجيب النموذج تقريبًا، مما يسهل الاختبار والتكرار
+- تسهيل تكامل النظام: عندما يطابق إخراج النموذج التنسيق المتوقع، يكون من الأسهل التكامل تلقائيًا مع البرامج الخلفية وسير العمل أو الأدوات الأخرى
+
+لذلك، عند اختيار وتقييم نموذج لغوي كبير، بالإضافة إلى الانتباه إلى ما إذا كان ذكيًا وما إذا كان تغطية المعرفة واسعة، تحتاج أيضًا إلى الانتباه بشكل خاص إلى قدرته في اتباع التعليمات. بالنسبة للتطبيقات الصناعية، القدرة على تنفيذ التعليمات بشكل مستقر ودقيق غالبًا ما تكون أهم من تقديم إجابة مذهلة في بعض الأحيان.
+
+<RelatedArticlesSection
+  title="متابعة التعلم"
+  description="انطلاقًا من تجربة الألعاب، نوصي بالمتابعة نحو التطوير المحلي والممارسة العملية للمنتجات."
+  :items="relatedArticles"
+/>
+---
+title: 'Beginner 1: Talking Is Programming'
+description: 'Build an AI-native snake game through conversation, then reuse the workflow to create your own mini game or demo.'
+---
diff --git a/docs/ar-sa/stage-1/appendix-a-product-thinking/index.md b/docs/ar-sa/stage-1/appendix-a-product-thinking/index.md
new file mode 100644
index 0000000..35f8ec4
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-a-product-thinking/index.md
@@ -0,0 +1,1080 @@
+---
+title: 'التفكير المنتجي وتصميم الحلول'
+description: 'تعلّم كيف تنتقل من مجرد القدرة على بناء أدوات ذكاء اصطناعي إلى التفكير والتقييم وصقل تطبيق ذكاء اصطناعي ذي رؤية واضحة، وتعرّف على المفاهيم الأساسية والأساليب العملية للتفكير المنتجي.'
+---
+
+<script setup>
+const duration = 'حوالي <strong>6 ساعات</strong>'
+</script>
+
+# التفكير المنتجي وتصميم الحلول
+
+## مقدمة الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['التفكير المنتجي', 'تحليل الاحتياجات', 'تصميم الحلول', 'رؤى المستخدمين']" coreOutput="حل منتج واحد متكامل" expectedOutput="أفكار تصميم منتج قابلة للتنفيذ">
+
+في الفصول السابقة، تعلمت بالفعل كيفية بناء أدوات صغيرة متنوعة في z.ai وبيئة تطوير الذكاء الاصطناعي المحلية (AI IDE)، وجربت أيضًا استخدام Trae للتعامل مع مشكلات هندسية مثل إعداد البيئة وتثبيت التبعيات، واكتسبت القدرة على نقل أفكارك من المتصفح إلى مشروع محلي.
+
+بعد ذلك، سننقل تركيزنا من مسألة <strong>"هل يمكنني بناؤه؟"</strong>، إلى مسألة <strong>"ما الذي يجب بناؤه حقًا ليكون جديرًا بالوجود؟"</strong>.
+
+في هذا الدرس، سنناقش بشكل منهجي:
+- ما هي "الفكرة"، وما الذي يجعلها "فكرة جيدة"
+- كيف تحكم على ما إذا كان اتجاه منتج معين يستحق الاستثمار فيه
+- كيف تستخدم عملية قابلة للتكرار لتحويل الإلهام الضبابي إلى خطة تطبيق واضحة
+
+<strong>الهدف الأساسي:</strong> الترقية من مجرد بناء الأدوات إلى القدرة على صنع تطبيقات ذكاء اصطناعي يستخدمها الناس فعليًا وتخلق قيمة حقيقية.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'مصدر الأفكار', description: 'إيجاد أفكار منتج موثوقة' },
+      { title: 'تفكيك الحل', description: 'تحويل الفكرة إلى تطبيق قابل للتنفيذ' },
+      { title: 'التقييم والصقل', description: 'من المقبول إلى الممتاز' },
+      { title: 'تضخيم الذكاء الاصطناعي', description: 'استخدام الذكاء الاصطناعي بشكل معقول لخلق القيمة' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## ما ستتعلمه
+
+بشكل عام، ستتعلم الأساسيات لصنع تطبيق: من أين تأتي الأفكار ← كيف تتحول الفكرة إلى تطبيق ← كيف ينتقل التطبيق من قابل للاستخدام إلى ممتع ← كيفية استخدام الذكاء الاصطناعي في التطبيق ← كيفية إيجاد المستخدمين بعد الانتهاء.
+
+1. أريد بناء تطبيق، فمن أين تأتي الأفكار الموثوقة؟
+2. بمجرد وجود الفكرة، كيف تفكيكها إلى تطبيق قابل للبناء؟
+3. بعد بنائه، كيف تقيمه وتصقله ليصبح "تطبيقًا جيدًا"؟
+4. في أي خطوة وكيف تستخدم الذكاء الاصطناعي بشكل معقل لتضخيم القيمة؟
+5. بمجرد الانتهاء من التطبيق، كيف تجد أول مجموعة من المستخدمين الحقيقيين من الصفر؟
+
+# 1. أريد بناء تطبيق، من أين تأتي الأفكار الموثوقة
+
+عندما يذكر الكثير من الناس بناء التطبيقات، فإن رد فعلهم الأول هو: يجب أن أفكر أولاً في فكرة إبداعية لا تُنسى. لذلك، فهم يتصفحون القوائم ويقرؤون التقارير ويدرسون المنتجات الرائجة كل يوم، ويراقبون قصص نجاح الآخرين، على أمل أن يصادفوا يومًا ما فكرة استثنائية وفريدة من نوعها.
+
+ولكن الحقيقة هي أن الكثير من الناس ليس لديهم أي أفكار في الواقع، وهم يشعرون بالقلق لمجرد أنهم يفتقرون إلى الأفكار؛ وهناك أيضًا أشخاص يضعون لأنفسهم معايير عالية جدًا منذ البداية: إذا لم تكن الفكرة ممتعة بما فيه الكفاية فلن أبدأ، ويعتبرون أن الفكرة العادية تعني الفشل. ولكن عندما تتقدم قليلاً في هذا الطريق، ستكتشف أن التطبيقات التي تستمر وتظل ثابتة هي في الغالب ليست نتاج خاطرة طرأت في وقت متأخر من الليل، بل نبتت تدريجيًا في سيناريوهات حياة محددة، وتمحورت حول مشاكل حقيقية.
+
+لذلك، ما يريد هذا الفصل حله هو مسألة البداية: **كيف يمكنك الحصول على فكرة؟ وهل هذه الفكرة موثوقة فعلاً؟ وهل تستحق أن تستثمر فيها وقتك وجهدك لتحويلها إلى تطبيق حقيقي؟**
+
+## 1.1 ما هي الفكرة
+
+لنبدأ بسؤال أساسي ولكنه غالبًا ما يُتجاهل: ما الذي يُحسب كفكرة فعلاً؟
+
+في المحادثات اليومية، ما يسميه الناس غالبًا فكرة هو في الواقع شعور حماس ذاتي للغاية. قد تتصفح مقطع فيديو أثناء تنقلك وتشعر فجأة أن هذا الاتجاه رائع جدًا، فتتبادر إلى ذهنك عبارة: يمكنني أيضًا صنع شيء مشابه. أو أثناء التحدث في تجمع، عندما يشتكي الجميع من صعوبة استخدام منتج معين، تضيف بلا تفكير: لو كان هناك شيء ما يساعدني تلقائيًا على إنجاز كل هذا فحسب. في هذه اللحظة، يكون لديك بالفعل خاطر ضبابي، لكنه لا يزال بعيدًا جدًا عن شيء يمكن بناؤه.
+
+هنا، سنضع لأنفسنا معيارًا أكثر دقة. فقط عندما تستوفي الفكرة الأشياء التالية على الأقل، سنطلق عليها اسم فكرة:
+
+أولاً، **يجب أن تستهدف فئة محددة من المستخدمين**. ليس الحديث العام عن "الجميع"، بل أن تكون قادرًا على تحديد من س يستخدم هذا بشكل أساسي. هل هم طلاب الجامعات، أم الموظفون الجدد، أم الآباء الذين يربون أطفالاً، أم المطورون المستقلون، أم تجار التجزئة، أم أصحاب الأعمال الصغيرة. الأشياء التي يهتم بها أشخاص مختلفون في نفس الأمر تختلف تمامًا، وإذا لم تحدد الفئة المستهدفة، فستظل جميع أحكامك اللاحقة معلقة في الهواء.
+
+ثانيًا، **يجب أن تتجذر في سيناريو محدد**. متى سيستخدم المستخدم هذا التطبيق؟ هل أثناء ركوب مترو الأنفاق في الصباح، أم في فترات الراحة بين العمل، أم قبل النوم، أم أثناء تنظيم المعلومات في عطلة نهاية الأسبوع. حتى الأدوات التي تبدو مجردة، مثل تدوين الملاحظات وإدارة المهام، طالما راقبتها بعناية، ستجد أن الجزء الذي يُستخدم بشكل متكرر مرتبط ارتباطًا وثيقًا بسيناريوهات معينة.
+
+ثالثًا، **تحتاج إلى مساعدة المستخدم في إنجاز مهمة واضحة**. لا يجب أن تكون المهمة كبيرة، ولكن يجب أن تكون قابلة للوصف. على سبيل المثال، تنظيم قائمة المهام اليومية، أو تلخيص مقال طويل إلى عدة نقاط رئيسية، أو إنشاء محضر اجتماع منظم وواضح، أو إنشاء مسار عملي لنزهة نهاية الأسبوع في مدينة ما. كلما كنت أكثر دقة في وصف المهمة، أصبح من الأسهل عليك تصميم الميزات وتقييم القيمة لاحقًا.
+
+رابعًا، **تقدم طريقة أو أداة أفضل من الوضع الراهن**. كيف كان المستخدم ينجز هذا الأمر في الأصل؟ هل يعتمد على الذاكرة، أو تدوين الملاحظات الورقية، أو Excel، أو لقطات الشاشة المحفوظة، أم بالتبديل ذهابًا وإيابًا بين التطبيقات المختلفة. إذا كان ما يمكنك تقديمه هو طريقة أوضح وأكثر استقرارًا ومتعة، فإن هذه الفكرة تبدأ فعلاً في اكتساب قيمة حقيقية.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image1.png)
+
+بالنسبة للتفكير المذكور أعلاه، لا بأس إذا لم تتمكن من توضيحه، فنحن الآن في عصر الذكاء الاصطناعي. يمكنك تنظيم المحتوى أعلاه في موجه (Prompt) كامل، ثم كتابة أفكارك والمستخدمين المستهدفين وسيناريوهات الاستخدام معًا، وتسليمها إلى النموذج اللغوي الكبير لمساعدتك في الإكمال والاستخراج. تعامل مع النموذج كشريك منتج متصل على مدار الساعة، ومن خلال الحوار المتكرر والأسئلة الاستقصائية والتعديل، يمكنك تحويل مفهوم ضبابي إلى شيء محدد.
+
+## 1.2 الأفكار واحتياجات المستخدمين: خط الدفاع الأول لتجنب الانبهار الذاتي
+
+أكبر فخ يقع فيه معظم الناس عند صنع تطبيق لأول مرة هو الانبهار الذاتي. ويُقصد بذلك أن تكون متحمسًا للغاية تجاه إبداعك، وتشعر أنه اتجاه سيغير العالم، ولكن عندما تحدث عنه المستخدمين العاديين، تكون ردود فعلهم غالبًا هادئة جدًا، وحتى مرتبكة بعض الشيء، ويقتصرون على الإيماء بأدب وقول "يبدو جيدًا". ومع ذلك، بعد إطلاق المنتج، لن يقوموا بتنزيله، ناهيك عن استخدامه على المدى الطويل.
+
+لتجنب هذه الحالة، يجب فصل الأمرين: الأفكار واحتياجات المستخدمين.
+
+دعنا أولاً نتحدث عن ما هي **احتياجات المستخدمين**. يمكن تلخيصها بجملة بسيطة نسبيًا: في سيناريو محدد، **التكاليف المختلفة التي يرغب المستخدم في تقليلها، أو القيم المختلفة التي يرغب في زيادتها لتحقيق هدف معين.** التكلفة هنا لا تقتصر على المال فحسب، بل تشمل أيضًا الوقت والجهد والعبء الذهني وخطر ارتكاب الأخطاء وحتى الضغط الاجتماعي. على سبيل المثال، قد يكون الموظف الجديد على استعداد لدفع المال لشراء مجموعة قوالب، فقط ليشعر بقليل من الراحة أثناء تقديمه الأول؛ وقد يكون الوالد الذي يربي طفلاً مستعدًا لدفع رسوم إضافية طالما أن ذلك يضمن له نصف ساعة من الوقت الخاص كل يوم.
+
+بعد فهم هذه النقطة، ستكتشف أن **البريق وحده لا يشكل حاجة.** العديد من الأفكار الإبداعية جديدة بالفعل، ولكن إذا لم تجعل المستخدم يبذل جهدًا أقل، أو يشعر بمزيد من الراحة والثقة تجاه هدف محدد، فسيكون من الصعب جدًا أن تدعم تطبيقًا مستدامًا حقًا.
+
+هناك هوة غالبًا ما يتم تجاهلها بين الأفكار والاحتياجات. **تمثل الفكرة حكمك الذاتي وليس بيانات مدعومة**، فتشعر بما هو ممتع ومثير ويبدو متقدمًا. بينما يمثل الاحتياجاج ما يمر به المستخدمون فعليًا وما يقلقهم. قد تعتقد أن ميزة إنشاء الشعر تلقائيًا رائعة جدًا، ولكن لمعظم المستخدمين، قد تكون الأداة التي تتيح لهم قضاء عشر دقائق أقل كل يوم في أعمال الترتيب المتكررة أكثر جاذبية. ما لم تكن مثل ستيف جوبز أو تمتلك مستوى ممتازًا من الذوق الجمالي في التصميم، مما يجعل الجميع يشعرون بأن "ميزة إنشاء الشعر تلقائيًا" رائعة جدًا ويرغبون في اتباعك طواعية، وهذا أمر صعب التحقيق.
+
+عند تقييم فكرة ما، هناك طريقة تمييز بسيطة وهي معرفة ما إذا كانت تبدو أكثر كـ **احتياج حقيقي أم احتياج زائف**. من الخصائص الواضحة للاحتياج الحقيقي أنه حتى بدون تطبيقك في الوقت الحالي، لا يزال المستخدمون يبذلون جهدًا نشطًا لإيجاد طريقة لحل المشكلة. حتى لو كانت الطرق الحالية غير مرنة، فلا يزالون على استعداد لقضاء الوقت والجهد وحتى المال لسد هذه الفجوة. على سبيل المثال، قد يقوم شخص ما بكتابة خططه ونصوصه البرمجية بنفسه، فقط لتخفيف عبء العمل المتكرر عن نفسه قليلاً. في مثل هذه السيناريوهات، إذا كان بإمكانك تقديم حل أكثر ودية وشمولية، فغالبًا ما تكون هناك فرصة للنجاح والاستمرار.
+الوضع النموذجي للاحتياجات الوهمية هو عكس ذلك تمامًا. إذا لم تكن أنت من يثير الموضوع، فلن يدرك معظم الناس أن تلك مشكلة، بل ولن يشعروا بأنه لابد من حلها. السيناريوهات التي تصفها موجودة في معظمها في خيالك، وليس في الحياة اليومية للمستخدمين. بعد الاستماع إلى عرضك، سيشعرون فقط أن هذا الشيء جيد ومثير للاهتمام، لكنهم لن يدفعوا مقابله، بل قد ينسونه بمجرد أن يديروا ظهورهم. مثل هذه الأفكار، قد تصلح لكتابة قصة، لكنها خطيرة جداً إذا استخدمت لبناء منتج.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png)
+
+لذلك، **خط الدفاع الأول لتجنب الانبهار الذاتي هو فهم احتياجات المستخدمين.** منذ البداية، تحتاج إلى إجبار نفسك على الإجابة عن سؤال يبدو بسيطاً ولكنه حاسم جداً: بخلافي، من آخر يعاني حقاً من هذه المشكلة. يمكنك مراجعة المنتديات والمجتمعات وأقسام التعليقات، أو يمكنك سؤال بعض الأشخاص من حولك ممن قد يصبحون مستخدمين محتملين. إذا كان من الصعب جداً أن تسمع شكاوى تحمل مشاعر حقيقية مثل "أنا أتعطل دائماً بسبب هذا الأمر" أو "الطريقة الحالية مزعجة حقاً"، فهذا يعني أن هذه الفكرة لا تزال بعيدة عن الاحتياجات الحقيقية.
+
+## 1.3 لماذا تعتبر الأفكار الجيدة أفكاراً جيدة
+
+ليست جميع الأفكار مصيرها واحداً. بعض الأفكار، حتى لو قضيت عليها بضعة أيام فقط وصنعت نسخة خشنة لكنها قابلة للتشغيل، ستجذب بشكل طبيعي مجموعة صغيرة من المستخدمين الحقيقيين، الذين يرغبون في البقاء ويصبرون على تقديم الملاحظات لك. وهناك أفكار أخرى، حتى لو بذلت قصارى جهدك في تكديس الميزات وأنفقت المال على الإعلانات وقمت بالكثير من الترويج على مختلف المنصات، فلن تتمكن في النهاية إلا من الاعتماد على قوى خارجية لتوليد موجة قصيرة من البيانات، التي سرعان ما تعود إلى الصمت.
+
+الفرق الجوهري وراء ذلك هو ما إذا كانت الفكرة نفسها قد أصابت نقطة مشكلة رئيسية أم لا.
+
+**الفكرة الجيدة تجذب النمو بشكل طبيعي**: حتى لو ظهرت بشكل بدائي جداً، أو كانت مجرد أزرار بسيطة، طالما أنها تحل مشكلة صغيرة ومحددة يواجهها المستخدم، فإنها ست حقق نمواً طبيعياً بدرجة معينة. على سبيل المثال، أداة صغيرة تساعد الأشخاص على تحويل الصوت إلى نص بسرعة، في البداية قد تكون مجرد صفحة ويب مع بضعة أزرار بسيطة، ولكن طالما أن جودة التعرف جيدة enough ووظيفة التحويل طبيعية جداً، سيكون الكثير من الناس على استعداد لمشاركة الرابط مع أصدقائهم، لأنها ببساطة توفر وقتهم.
+
+**الفكرة السيئة غالباً ما تكون محكوم عليها بالاعتماد على القوى الخارجية منذ البداية**. حتى لو كان مظهرها الخارجي جيداً جداً وبدت نواتها عالية المستوى، فستحتاج إلى الاستمرار في الدفع والصراخ والشرح، ولكن بمجرد أن تتباطأ جهودك لجذب المستخدمين، ستنخفض بيانات الاستخدام بشكل حاد. تستمر في ضخ الموارد وإبرام الشراكات وتنظيم الفعاليات، لكنك ستشعر دائماً أنك تسبح عكس التيار. المشكلة لا تكمن في أن تنفيذك لم يكن جيداً بما فيه الكفاية، بل في أن الفكرة نفسها لم تصب نقطة ألم حقيقية بما فيه الكفاية.
+
+بالطبع، الحالات المذكورة أعلاه ليست مطلقة، فعلى سبيل المثال في السوق المبكر قد لا يدرك المستخدمون القيمة مما يخلق تأخيراً معيناً، وعلى سبيل المثال في حالة وجود منافسين يجب أن نأخذ في الاعتبار المظهر وصعوبة التشغيل وخصائص العلامة التجارية وما إلى ذلك، ولكن هذه كلها مواضيع أكثر عمقاً ولن نأخذها في الاعتبار حالياً.
+
+لذلك، عندما نناقش ما إذا كان يجب الاستمرار في الاستثمار في فكرة ما، فإن ما ينبغي التركيز عليه حقاً ليس مدى روعة الفكرة نفسها، بل ما إذا كان يمكنها أن تنمو بشكل طبيعي لتشكل مساراً من المشكلة إلى الحل. نحن نصنع الأفكار ليس لإثبات مدى إبداعنا للآخرين، بل للعثور على نقطة بداية قيمة، ومن خلال هذا المسار يمكننا ببطء صقل أداة صغيرة لتصبح تطبيقاً مفيداً حقاً.
+
+الاختيار أهم من الجهد.
+
+## 1.4 من أين تأتي الأفكار الجيدة: أربعة مصادر وأمثلة محددة
+
+عندما يذكر الكثير من الناس التفكير في أفكار، فإن الصورة التي تتبادر إلى أذهانهم هي شخص منعزل خلف مكتبه، يحدق في السقف، ويأمل أن تسقط الإلهام فجأة عليه يوماً ما. في الواقع، معظم الأفكار الجيدة لا تأتي هكذا. إنها تُستخلص أكثر من الملاحظات الصغيرة في الحياة، والأسئلة المتكررة في المجتمعات، وكومة الشكاوى على الإنترنت، ومن تلك المنتجات الموجودة بالفعل.
+
+إذا كنت مستعداً للعمل بجدية، فمن السهل جداً العثور على اتجاهات للبدء من خلال هذه المصادر الأربعة التالية.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png)
+
+### أحب حياتك
+
+مبدأ بسيط جداً ولكنه فعال هو: **كلما زادت مشاركتك في الحياة، زادت سهولة اكتشاف المشكلات، وزادت قدرتك على الحكم على ما يستحق حلها**. المقصود بالمشاركة هو أنك لا تنظر إلى حياة الآخرين من خلال شاشة، بل تختبر وتجرب وتتعثر بنفسك. كلما تعاملت بجدية أكبر مع اهتماماتك، زادت احتمالية أن تصبح تربة خصبة لنمو الأفكار.
+
+على سبيل المثال، إذا كنت تحب تربية القطط كثيراً، فإن يومك العيش مع قطة غالباً ما يحتوي على معلومات أكثر من تصفح مئة نصيحة لتربية القطط. ستعرف الأماكن التي تسقط فيها القطط الأشياء بسهولة، وستتذكر الوقت الذي تحب فيه القفز أكثر، والظروف التي تكون فيها عرضة للتوتر، وستختبر بنفسك تفاصيل مثل تنظيف صندوق الفضلات وتمشيط الفراء وقص الأظافر وزيارة الطبيب البيطري. **كل تجربة غير سلسة قليلاً هي في الواقع مؤشر محتمل لمنتج**.
+
+خذ على سبيل المثال تصويرك لقطتك: الكثير من الناس واجهوا هذا الموقف، حيث تقف هناك حاملاً هاتفك، لكن القطة ترفض النظر إلى الكاميرا، إما أن تنظر إلى أسطواناتها أو تحدق في زاوية أخرى. فهل يمكن أن تكون هناك أداة صغيرة تجعل شاشة الهاتف أو الجهاز اللوحي تعرض رسماً متحركاً لنقطة حمراء تتحرك تلقائياً أو ريشة أو حشرة صغيرة، لجذب انتباه القطة تحديداً؟ عندما تضغط على زر التصوير، تتحرك تلقائياً بالقرب من الكاميرا الأمامية، لـ "خداع" نظر القطة باتجاه العدسة، والتقاط عدة صور متتالية، ومساعدتك في اختيار الصورة الواضحة والجميلة من بينها. والتفكير خطوة إلى الأمام، يمكن لهذا التطبيق أيضاً تسجيل أي لون وأي مسار حركي يثير اهتمام كل قطة، واستخدام "وضع اللعب" "المخصص" لها تلقائياً في المرة القادمة لزيادة نسبة النجاح.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image4.png)
+
+إذا كنت تستمتع بعملية المكياج أو العناية بالبشرة، فإن كل منتج خلف تلك الزجاجات في خزانتك هو نتيجة الكثير من التجارب والخطأ واتخاذ القرارات. ربما تكون معتاداً على التقاط صور لمكياجك في كل مرة باستخدام معرض الصور بهاتفك، ولكن في كل مرة تراجع فيها، عليك أن تتذكر ببطء أي أحمر شفاه وأي لوحة ظلال عيون استخدمتها في ذلك اليوم. فهل يمكن تسجيل هذه المعلومات بشكل منهجي وصنع دليل مكياج خاص بك؟ يمكن حتى أن يساعدك التطبيق في الإحصاء، أي مكياج تستخدمه أكثر في أي مناسبة، وأي تركيبات تظهر بشكل أفضل في الصور، بحيث لا تضطر إلى البدء من الصفر في كل مرة تختار فيها مكياجك.
+
+لنكن أكثر تحديداً، فالكثير من الناس لديهم هذا السيناريو: في الصباح عندما يكون الوقت ضيقاً، تفتح معرض الصور للبحث عن "مكياج التنقل الناجح في المرة الماضية"، وبعد البحث طويلاً لا تتذكر ما هي المنتجات التي استخدمتها بالضبط. فهل يمكن أن تكون هناك ميزة صغيرة تتيح لك بعد التقاط صورة المكياج، أن تقول للهاتف ببساطة: "مكياج مقابلة اليوم، استخدمت لوحة ظلال العيون البرتقالية البنية رقم 01 وأحمر شفاه بلون البازلاء"، فيقوم التطبيق بالتعرف تلقائياً وإنشاء "وصفة مكياج" مرتبطة بالصورة؟ في المرة القادمة، ما عليك سوى البحث عن "مقابلة" أو "ظلال عيون برتقالية بنية" أو "لون البازلاء" لرؤية جميع المكياجات ذات الصلة بنقرة واحدة، ويمكنه حتى إنشاء قائمة توصيات تلقائية مثل "عرض مكياج مناسب للتنقل فقط والذي يمكن إتمامه في خمس دقائق اليوم". تلك الدقائق التي توفرها كل صباح هي في الواقع "مشكلة تم حلها" محددة جداً.
+
+إذا كنت تحب city walk أو أشكال السفر البطيء المختلفة، فربما تكون قد استخدمت أدوات متنوعة لتجميع تجربتك: تطبيقات الخرائط لتسجيل المسارات، و تطبيق الملاحظات لقائمة المقاهي التي تريد زيارتها، وصور وانطباعات متناثرة في معرض الصور. فهل يمكن أن يكون هناك تطبيق يجمع المسار ونقاط التسجيل والصور والنصوص معاً في سجل مشي يحتوي على خط زمني وقصة؟ ويمكن الذهاب أبعد من ذلك لمشاركة مسارك مع الأصدقاء بنقرة واحدة، لكي يتمكنوا أيضاً من المشي في نفس المدينة بنسخة مختلفة.
+
+يمكن أيضاً الحفر لأسفل للوصول إلى تفصيل يومي أكثر: الكثير من الناس أثناء city walk يشعرون بالإحباط من أن "هذا الزاوية تبدو جميلة جداً في اللحظة، ولكن بعد العودة إلى المنزل لا يمكنني العثور على تلك النقطة على الخريطة على الإطلاق". فهل يمكن عمل ميزة فائقة الخفة: عندما تصل إلى تقاطع تشعر بأنه مميز، ما عليك سوى الضغط على زر سماعة الرأس وقول "ضع علامة، هذا مكان مناسب للمشي في موعد غرامي"، فيقوم التطبيق فوراً بوضع علامة صوتية في موقعك الحالي، وتسجيل الوقت والطقس ومستوى الضوضاء تلقائياً. لاحقاً أنت أو أصدقاؤك، ما عليك سوى فتح خريطة هذه المدينة لرؤية "نقاط الأجواء المختبرة فعلياً من المارة": أين يناسب المشي بمفردك في شرود، أين يناسب مشاهدة المناظر الليلية، أين يناسب المشي والتحدث مع الأصدقاء. تلك الزوايا الصغيرة التي كنت "تمر بها وتنساها" هكذا، تنمو ببطء لتصبح قاعدة بيانات لتجربة المدينة ذات جودة عالية.
+
+كل هذه الأمثلة تريد في الحقيقة توضيح شيء واحد فقط: **تحتاج إلى أن تحب حياتك، فحياتك هي أفضل مصدر لأفكارك**. الحيرة التي تواجهها كل يوم، والحلول البديلة التي تفكر فيها مؤقتاً، وتلك الأشياء التي تجدها مزعجة قليلاً ولكنك تعودت على تحملها، طالما أنك على استعداد لإلقاء نظرة إضافية وسؤال نفسك عما إذا كان من الممكن استخدام أداة صغيرة لتغييرها، فكلها يمكن أن تصبح نماذج أولية لمنتجات مستقبلية.
+
+### الاستخراج من أصول الجمهور التي تمتلكها
+
+ما يسمى بأصول الجمهور، باختصار، هو مجموعة من الأشخاص يمكنك الوصول إليهم بالفعل. قد يكونون قراءك، أو المجتمع الذي تديره، أو مجموعة زملائك الداخليين في الشركة، أو حتى مجتمعاً للاهتمامات تشارك فيه لفترة طويلة. طالما لديك قناة، **يمكنك سماع ما يتحدث عنه جزء من الناس يومياً وما يزعجهم وما يتوقعونه بشكل مستقر**، فأنت تتمتع بميزة كبيرة مقارنة بشخص يبدأ من الصفر تماماً.
+
+في هذه السيناريوهات، لا يجب عليك محاولة بناء منتج ضخم وشامل يستهدف الجميع منذ البداية. كل ما عليك هو الإقرار بنقطة واحدة: هذه الدائرة الصغيرة من الأشخاص الذين بين يديك هي أفضل نقطة انطلاق لك. كلما كان فهمك لهم أعمق، وكلما عرفت أكثر تلك المزعجات الصغيرة في حياتهم الحقيقية التي يمكن التعبير عنها وتلك التي لا يمكن التحدث عنها، زادت فرصتك في صنع شيء سيُستخدم فعلياً.
+
+### استكشاف الاحتياجات من المساحات العامة
+
+حتى لو لم يكن لديك حالياً أي مجتمع خاص بك أو مجموعة قراء، فلا داعي للقلق على الإطلاق. هناك أشخاص لا حصر لهم على الإنترنت يصرخون يومياً في منصات مختلفة يشرحون صعوباتهم واستياءهم. هذه الأصوات في المساحات العامة هي بحد ذاتها كنز كبير، إلا أن معظم الناس لم يستمعوا إليها بجدية أبداً.
+
+يمكنك تحديد عدد من المنصات المتعلقة بالصناعة التي تهتم بها، والبحث بشكل دوري عن بعض الكلمات المفتاحية التي تحمل طابعاً عاطفياً. على سبيل المثال، **مزعج جداً، هل من توصيات، كيف أحل هذه المشكلة، هذا أمر معقد حقاً، هل توجد طريقة أفضل.** ثم تصفح هذه المنشورات والتعليقات بصبر، مع التركيز على نوعين من المعلومات.
+
+النوع الأول هو مشكلة معينة يتم ذكرها بشكل متكرر وعلى المدى الطويل. على سبيل المثال، في قسم البحث عن عمل، بين الحين والآخر يأتي شخص يسأل عن كيفية كتابة السيرة الذاتية، وكيفية التحضير للمقابلة الشخصية، وكيفية متابعة نتائج المقابلة؛ وفي مجموعات الأمهات، تظهر دائماً بشكل متكرر حيرتهن بشأن تناسب الأطعمة التكميلية، وتعديل روتين النوم، والتواصل مع الأطفال؛ وفي مجتمعات التبادل التجاري للبائعين الصغار، قد يكون الجميع دائماً قلقين بشأن إدارة المخزون، والتدفق النقدي، وجداول عمل الموظفين. هذه المشاكل المتكررة طويلة الأمد هي نقاط ألم منهجية تكشف عنها الصناعة مراراً وتكراراً.
+
+النوع الثاني هو في سيناريوهات معينة، حيث يكافح المستخدمون ويتحملون الأمر بطرق خرقاء للغاية. على سبيل المثال، هناك من يكتب جميع المهام التي يجب إنجازها على الورق، ثم يلتقط صورة لها ويرفعها إلى السحابة؛ وهناك من ينسخ ويلصق ذهاباً وإياباً بين تطبيقات مختلفة، فقط لتحويل جزء من المحتوى من تنسيق إلى آخر؛ وهناك من يقوم يدوياً بتجميع البيانات من قنوات مختلفة في جدول واحد. في هذه الأماكن، طالما راقبت بعناية، ستجد العديد من نقاط الدخول الصغيرة التي يمكن تحويلها إلى عمليات وأدوات.
+
+إن البحث عن الاحتياجات في المساحات العامة هو في الواقع تدريب على قدرة: تحويل نفسك من متفرج إلى صياد. عندما تعتاد على البحث عن هذه الكلمات المفتاحية، وتعتاد على تدوين الحالات، سيتراكم عقلك ببطء بمستوى من الحساسية تجاه المشاكل الواقعية، وهذه الحساسية ستساعدك مراراً وتكراراً خلال عملية تصميم المنتج لاحقاً.
+
+### الوقوف على أكتاف العمالقة
+
+هناك مصدر آخر للأفكار يتم تجاهله غالباً، وهو المنتجات والمشاريع الحالية. يوجد في هذا العالم بالفعل الكثير من الأشخاص الرائعين الذين سلكوا من أجلنا العديد من مسارات الاستكشاف. لست بحاجة إلى البدء من صفحة بيضاء في كل مرة، يمكنك تماماً أن تقف حيث وصل الآخرون إلى منتصف الطريق، وتتخذ خطوة صغيرة إلى الأمام.
+في مناسبات مثل **هاكاثون، ومسابقات ابتكار المنتجات، وأيام العرض التوضيحي (Demo Day) للشركات الناشئة**، غالبًا ما تظهر الكثير من الأعمال الصغيرة المثيرة للاهتمام. معظمها يتسم بخاصيتين: الوقت ضيق، والموارد محدودة. وهذا يشبه إلى حد كبير التطبيق الصغير الذي ترغب في صناعته الآن. لذلك، عندما تنظر إلى هذه الأعمال الفائزة، لا بأس من أن تطرح على نفسك سؤالين إضافيين: إذا كان هذا الشيء يخدم فئة أكثر تحديدًا وضيقًا، فهل سيكون من الأسهل تطبيقه على أرض الواقع؟ إذا تم الاستغناء عن نصف وظائفه أو حتى ثلثيها، والاحتفاظ فقط بالحلقة الأكثر جوهرية، فهل سيكون أكثر وضوحًا؟
+
+وبالمثل، فإن الأدوات المدرجة في **قوائم المنتجات، والمشاريع مفتوحة المصدر، ومواقع تجميع الأدوات** يمكن أن تكون جميعها نقطة انطلاق لتفكيرك. يمكنك اختيار بعضها الذي يثير اهتمامك وتفكيكها واحدًا تلو الآخر: من الذي تساعده هذه الأداة، وما المشكلة التي تحلها؟ ما هي الفجوات الواضحة في شكلها الحالي؟ إذا تم نقلها إلى سيناريو مختلف أو دولة أخرى، فما الاختلافات التي ستظهر؟ أنت لا تحاول الانتحال، بل من خلال هذا التمرين في التفكيك، أنت تدرب نفسك على فهم العلاقة بين المشاكل والحلول.
+
+العالم الواقعي لا يختلف عن ذلك. في كل مرة تقف فيها في طابور لتسجيل الدخول في المستشفى، أو تنتظر دورك في مطعم، أو تملأ نفس المعلومات عدة مرات في قاعة الخدمات الحكومية، أو تكتب نفس المحتوى مرارًا وتكرارًا على نموذج ورقي، يمكنك أن تتوقف عمدًا وتسأل نفسك: هل هناك مساحة هنا لما يمكن أن يكون **منهجًا، أو رقميًا، أو آليًا**؟ تلك السيناريوهات التي تبدو فوضوية، ومتكررة، وغير فعالة، هي في جوهرها التربة التي ستنمو فيها بعض الأدوات مستقبلاً.
+
+من خلال الاستمرار لفترة طويلة في حفر الأفكار من هذه المسارات الأربعة، ستكتشف أن الفكرة ليست معجزة تظهر فجأة في ذهنك، بل هي منتج ثانوي ينمو بشكل طبيعي نتيجة تفاعلك الطويل مع الحياة، ومع الآخرين، ومع عالم المعلومات.
+
+## 1.5 كيف تلخص فكرة جيدة في جملة واحدة: فن "الأقل هو الأكثر"
+
+عندما تعرف تقريبًا من أين تأتي الفكرة، يصبح التمرين المهم التالي **هو محاولة شرحها في جملة واحدة.** يبدو هذا التمرين بسيطًا، ولكنه في الواقع قاسٍ إلى حد ما، لأنه سيجبرك على مواجهة حقيقة واحدة: **هل أمسكت فكرتك حقًا بجوهر واضح ومحدد؟**
+
+نادرًا ما يتذكر الإنسان شخصًا آخر لأنه كان متوازنًا ومثاليًا في كل شيء، وفي أغلب الأحيان، يكون التذكر بسبب ميزة واضحة. ربما يرتدي دائمًا نوعًا معينًا من القبعات، أو أن أسلوبه في الحديث مستقر للغاية، أو أنه قادر دائمًا على طرح الجملة الرئيسية في كل مناقشة. المنتجات هي نفسها. **بدلاً من جعل الآخرين يتذكرون بصعوبة عشرات الميزات لديك، من الأفضل أن تترك لديهم انطباعًا بسيطًا ولكن واضحًا.**
+
+عند كتابة هذه الجملة، هناك مغالطة شائعة وهي الإفراط في التعميم. على سبيل المثال: "هذا تطبيق يساعد المستخدمين على تحسين مستوى اللغة الإنجليزية لديهم". للوهلة الأولى، لا يبدو هناك خطأ، ولكن إذا تساءلت بشكل أعمق، ستكتشف أن هذه الجملة لا تقول شيئًا تقريبًا: تُساعد مَن؟ هل هم طلاب بدون أي أساسيات، أم أشخاص يعملون بالفعل في مجالهم؟ وبأي طريقة؟ هل هي لحفظ الكلمات، أو تدريب الاستماع، أو تصحيح النطق، أو تصحيح الكتابة؟ كم من الوقت يحتاجون للاستثمار، وما حجم التغيير الذي يمكن أن يجلبوه؟ كل المعلومات الأساسية قد تم تخفيفها وتمييعها.
+
+ستكون الصياغة الأفضل بكثير أكثر تحديدًا. على سبيل المثال: "تطبيق لحفظ الكلمات يساعدك على تذكر 100 كلمة أساسية في شهر واحد باستخدام 10 دقائق من وقت التنقل يوميًا". هنا، يتم توضيح ثلاثة أشياء على الأقل: تكلفة الاستخدام قابلة للتحكم، فهي تحتاج فقط إلى 10 دقائق يوميًا؛ النتيجة المتوقعة مرئية، فهناك 100 كلمة جديدة في الشهر؛ السيناريو واضح، ويحدث بشكل أساسي أثناء التنقل بدلاً من أوقات الفراغ الأخرى. عندما يسمع المستخدمون مثل هذا الوصف، يمكنهم بسرعة الحكم في أذهانهم على ما إذا كان هذا الشيء مفيدًا لهم أم لا.
+
+إن عملية التدرب على كتابة هذه الجملة هي في الواقع إجبار متكرر لنفسك على الإجابة على ثلاثة أسئلة: **من الذي تساعده بالضبط، في أي سيناريو تتمنى أن يتذكروك، وكم من الوقت تخطط لقضيه لمساعدتهم في تحقيق أي نتيجة.** فقط عندما تكون مستعدًا لجمع هذه المعلومات معًا، حتى لو تطلب الأمر التضحية ببعض الكلمات الرنانة، ستصبح فكرتك حقًا قابلة للفهم والنشر.
+
+يمكنك أيضًا تطبيق هذا التدريب على نفسك بشكل عكسي. حاول أن تكتب وصفًا من جملة واحدة لمستقبلك في السنوات الثلاث القادمة. على سبيل المثال، "آمل أنه بعد ثلاث سنوات، يمكنني استخدام جملة أو جملتين لشرح الفئة الرئيسية من الأشخاص الذين أساعدهم، ونوع المشاكل التي أحلها لهم، والنتائج الملموسة التي حققتها بالفعل." سيجعلك هذا التدريب أكثر وضوحًا عند اتخاذ القرارات، حيث ستعرف الأشياء التي يجب عليك التمسك بها بشدة، والأشياء التي يمكنك التخلي عنها بشكل مناسب. فتعلم التخلي أصعب من تعلم الإضافة، ولكنه الخيار الصحيح.
+
+إذا كنت لا تعرف من أين تتعلم هذا النوع من التعبير، فالأمر بسيط، فقط انظر إلى المحتوى الذي يتم صقل نصوصه يوميًا للتنافس على انتباه المستخدمين. يمكنك الرجوع إلى **المقدمة المكونة من جملة واحدة في متاجر التطبيقات، والعناوين الرئيسية المعروضة على الصفحات الرئيسية لمواقع الألعاب والمنتجات الأدوات، والنصوص الأساسية على صفحات \*\***Landing Page\*\* ** المختلفة.** يمكنك نسخها، وتفكيكها إلى هياكل، ومحاولة استخدام الذكاء الاصطناعي (AI) لكتابة نسخة جديدة من النصوص الإعلانية لفكرتك.
+
+## 1.6 استخدام الذكاء الاصطناعي (AI) لتوسيع التفكير وإيجاد التمايز
+
+في الماضي، عند التفكير في الأفكار، كان المرء يعتمد في معظم الأحيان على نفسه للتفكير ببطء. الآن مع وجود الذكاء الاصطناعي (AI)، أصبح لديك شريك في العصف الذهني يمكنك استدعاؤه في أي وقت. طالما تم استخدامه بشكل جيد، فيمكنه أن يوسع مساحة تفكيرك بشكل كبير.
+
+عندما تشعر بالتعثر في اتجاه معين، وتجد أن الأفكار في رأسك تدور حول نفس النقاط القليلة، لا بأس من أن تصف فكرتك الحالية للذكاء الاصطناعي (AI) بأوضح طريقة ممكنة، ثم تطلب منه مساعدتك في القيام ببعض الأشياء. على سبيل المثال، **بناءً على نفس المهمة الأساسية، اطلب منه سرد عشرين مجموعة مستخدمين مختلفة**، أو اطلب منه إعادة وصف الطرق المحتملة لاستخدام هذه الفكرة من زوايا مختلفة مثل الطلاب، والعاملين المستقلين، والآباء الذين يربون أطفالًا، وأصحاب المتاجر الصغيرة. أو، اطلب منه اتخاذ أدوار مدير المنتج، والعمليات، والتسويق، والتقنية، لطرح النقاط التي تهم كل دور على حدة.
+
+ستكتشف أن العديد من سيناريوهات الاستخدام التي لم تكن لتفكر فيها بنفسك سيتم طرحها عليك في هذه الخطوة. مهمتك ليست قبول هذه الاقتراحات ببساطة، بل في هذه المساحة الموسعة، **اختيار القطعة الصغيرة التي تتمتع فيها بأكبر قدر من الفهم والميزة التنافسية في الموارد**. على سبيل المثال، إذا اكتشفت أنه على الرغم من أن الذكاء الاصطناعي (AI) قد سرد العديد من الصناعات، إلا أنك تشعر بتعاطف خاص مع سيناريوهات التعليم وإنشاء المحتوى، فيمكنك عندئذ إعطاء الأولوية لمواصلة التفكيك في هذين الاتجاهين.
+في هذه العملية، هناك مبدأ مهم آخر وهو: **الأفكار الشائعة لا تعني بالضرورة أفكارًا غير صالحة**. رد الفعل الأول للعديد من المبتدئين هو تجنب جميع الاتجاهات التي تبدو شائعة، معتقدين أنه لا توجد فرصة في أي شيء فعله الآخرون بالفعل. لكن العالم الحقيقي ليس بهذه البساطة أبدًا. الاتجاهات التي تبدو شائعة مثل حفظ المفردات، وقوائم المهام، وتتبع النفقات، وتسجيل العادات، لا يتوقف الناس عن العمل عليها باستمرار لأن المشكلة الكامنة وراءها موجودة بالفعل على نطاق واسع. في هذه الحالة، لا يكون التنافس عادةً حول من يمتلك فكرة كبيرة جديدة كليًا، بل حول **من يفهم مجموعة صغيرة معينة بشكل أفضل، ومن يمكنه جعل التفاصيل أقرب إلى حياتهم**.
+
+يمكنك أولاً سرد مجموعة من الأفكار التي يسهل على المبتدئين التفكير فيها، مثل أدوات حفظ المفردات، وتطبيقات تسجيل الدخول اليومية، ومساعدات تدوين الملاحظات القرائية، ومولدات السير الذاتية، وأدوات بناء العادات، إلخ. ثم بالنسبة لكل فكرة، قم بإجراء جولة من التفكيك خصيصًا مع الذكاء الاصطناعي، مع التركيز على طرح ثلاثة أسئلة: إذا كنت أخدم فقط مجموعة محددة جدًا من الأشخاص، مثل المصممين، أو المحامين، أو الأمهات الجدد، أو طلاب الدراسات العليا، كيف ستبدو هذه الفكرة بشكل مختلف. إذا كنت أستهدف فقط سيناريو ثابتًا، مثل وقت التنقل، أو استراحة الغداء لعشر دقائق، أو نصف ساعة قبل النوم، فهل يمكن جعل الوظائف والعرض أكثر تركيزًا. **إذا قمت بتطوير عرض النتائج إلى أقصى الحدود، مثل جعلها أسهل للمشاركة، أو أسهل للطباعة، أو أسهل للاستيراد إلى أنظمة أخرى، فهل سيكون ذلك كافيًا لتشكيل اختلاف**.
+
+قيمة الذكاء الاصطناعي هنا لا تكمن في اتخاذ القرار نيابة عنك، بل في مساعدتك على تحويل طريق ضيق في الأصل إلى خريطة أكثر اكتمالًا. سترى بسرعة أكبر المناطق التي قام الآخرون بتعميقها بالفعل، والزوايا التي لا تزال فارغة نسبيًا. أما بالنسبة للمسار الذي ستسلكه حقًا، فسيعود الأمر في النهاية دائمًا إلى سؤال قديم: ما هي الأماكن التي تهتم بها حقًا، وتفهمها بعمق كافٍ، ومستعد للاستثمار فيها على المدى الطويل.
+
+في نهاية كل هذا، دعنا نبرز تلك القاعدة السفلية مرة أخرى. أي نقاش حول الأفكار والإبداع يجب أن يعود في النهاية إلى احتياجات المستخدمين. يمكنك استخدام الذكاء الاصطناعي للمساعدة في التفكير، ويمكنك الاستفادة منه لتسريع توليد المتغيرات، ولكن بغض النظر عن عدد جولات العصف الذهني التي قمت بها، فإن معيار الحكم النهائي يبقى دائمًا هو: هل هذه الفكرة تستجيب حقًا لنقطة ألم حقيقية لمجموعة معينة من الأشخاص؟ وهل خطت خطوة صغيرة إلى الأمام في مشكلة كانوا يحاولون حلها مرارًا وتكرارًا؟
+
+## الخلاصة
+
+يجب أن تتعلم كيف تستخدم بضعة أبعاد بسيطة لفحص ما إذا كانت الفكرة واضحة بما فيه الكفاية؛ يجب أن تميز بين ما تراه أنت رائعًا وبين ما يحتاجه المستخدم حقًا؛ يجب أن تعرف أن الأفكار الجيدة هي جيدة لأنها تدوس على نقطة ألم معينة منذ البداية؛ يجب أن تتعلم كيف تستمر في استخراج القرائن من حياتك الشخصية، وأصول الأشخاص من حولك، والمعلومات العامة، والمنتجات الموجودة؛ يجب أن تتدرب على شرح الفكرة في جملة واحدة؛ وأن تتعلم أيضًا كيف تتخذ من الذكاء الاصطناعي شريكًا لتوسيع أفكارك، وليس أداة تحل محل حكمك.
+
+عندما يكون لديك بالفعل من فكرة إلى ثلاث أفكار من هذا النوع، و **يمكنك شرح** كل منها في جملة واحدة لمن هي، وفي أي سيناريو تُستخدم، وما هي النتيجة التقريبية التي ستجلبها، يمكنك عندئذٍ كبح اندفاعك نحو الاستمرار في التفكير في أفكار جديدة، وتحويل انتباهك إلى الخطوة التالية: كيف تفكك إحداها إلى تطبيق يمكن بناؤه فعليًا ويمكن للمستخدمين الحقيقيين استخدامه.
+ماذا لو كانت هذه الفكرة سيئة بعض الشيء؟ لا بأس بذلك، كونها سيئة في البداية هو الشيء الصحيح، **الإنجاز أهم دائمًا من الكمال** ، تحتاج إلى البدء أولاً حتى يكون هناك نهاية.
+
+## 📚 الواجبات
+
+يرجى إكمال الواجبات التالية بناءً على المحتوى أعلاه:
+
+1. بالجمع بين اهتماماتك الشخصية، استخدم الذكاء الاصطناعي لمساعدتك في توليد بعض "الأفكار" للتطبيقات
+2. اطلب من الذكاء الاصطناعي تقييم ما إذا كان هذا الطلب حقيقيًا أم زائفًا بناءً على أفكارك، واطلب منه تقديم رؤى حول احتياجات المستخدمين واقتراحات
+3. اختر مصدرًا أو اثنين من المصادر الأربعة الرئيسية للحصول على "أفكار"، أو دع الذكاء الاصطناعي يولد بعض "الأفكار" للتطبيقات
+4. من بين جميع الأفكار المذكورة أعلاه، اختر ثلاث أفكار مفضلة، وحاول تلخيص كل فكرة في جملة واحدة غنية بالمعلومات.
+
+# 2. بمجرد أن تمتلك الفكرة، كيف تفككها إلى تطبيق قابل للتنفيذ
+
+في الفصل السابق حللنا مشكلة البداية: ما هي الأفكار التي تستحق أن تؤخذ على محمل الجد حقًا.
+
+التحدي الحقيقي يبدأ من هنا فقط، والكثير من الناس يسقطون في هذه الخطوة: لديهم مخطط كامل في أذهانهم، ولكن بمجرد أن يبدأوا في التنفيذ يشعرون بتعقيد الأمور لدرجة لا يعرفون من أين يبدأون. الميزات كثيرة، والصفحات كثيرة، والتقنية تبدو مخيفة، فيؤجلون باستمرار، لتتحول في النهاية إلى **وهم المواساة الذاتية** :
+
+" **لا بأس، يمكننا القيام بهذا الشيء في المستقبل عندما تتاح الفرصة...** "
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image5.png)
+
+توقف عن التفكير! إما الآن أو لا! ما نريد القيام به في هذا الفصل هو مساعدتك على تعلم طريقة تفكيك من الفكرة إلى إصدار قابل للتنفيذ. ستلاحظ أن الانتقال من الصفر لا يعتمد على العبقرية، بل يعتمد على سلسلة من الإجراءات المحددة التي يمكن التدرب عليها مرارًا وتكرارًا: ** التوسع،** **التحديد** **، التفكيك، التدقيق، الاستلهام، والأسئلة.** باتباع هذا الترتيب، حتى لو لم يكن لديك فريق أو الكثير من الوقت، يمكنك تحويل فكرة إلى عرض تطبيق (Demo) يعمل بنجاح.
+
+## 2.1 من الفكرة إلى الحل: التوسع والتحديد بنموذج الماس المزدوج
+
+عندما تتعلم كيف ترسم صفحات وتطرح أفكارًا، ستواجه قريبًا مشكلة شائعة أخرى: تبدأ الأفكار في التزايد. تكتب سيناريوهات ووظائف محتملة مختلفة على السبورة، وتمتلئ الورقة بإصدارات صفحات مختلفة، ويبدو الأمر وكأنه إنجاز كبير، ولكن عندما يحين وقت التنفيذ الفعلي، يصبح من الصعب البدء أكثر. لأن كل شيء يبدو مهمًا، ويبدو وكأنه يستحق التجربة.
+
+في هذا الوقت، ستحتاج إلى استخدام إطار تفكير كلاسيكي للغاية ولكنه سهل الفهم: نموذج الماس المزدوج. المعنى الحقيقي لهذا النموذج بسيط جدًا، وهو أنه في العديد من مراحل الحياة، تحتاج إلى التوسع أولاً، ثم التحديد، بدلاً من محاولة إنجاز كل شيء دفعة واحدة منذ البداية.
+
+### ما هو نموذج الماس المزدوج
+
+نموذج الماس المزدوج هو إطار عمل لعملية الابتكار والتصميم اقترحه مجلس التصميم البريطاني، ويشبه العملية بأكملها بماسين متتاليين ("الماس المزدوج"): الماس الأول يمتد من "اكتشاف المشكلة" إلى "تحديد المشكلة بوضوح"، ويؤكد على التوسع الواسع أولاً، وإجراء البحث وفهم المستخدمين بالكامل، ثم التحديد لاستخراج المشكلة الجوهرية التي يجب حلها حقًا؛ الماس الثاني يمتد من "تطوير الحلول" إلى "تسليم الحل النهائي"، من خلال التوسع بشجاعة في أفكار الحلول الممكنة، واستكشاف النماذج الأولية وتكرارها، ثم التحديد، والفرز، وصقل الحل الأمثل القابل للتنفيذ. يؤكد نموذج الماس المزدوج على ضرورة المرور بعملية "التوسع - التحديد" في كل من مرحلتي المشكلة والحل، لتجنب القفز مباشرة إلى الحلول منذ البداية، مما يرفع من جودة الابتكار ومعدلات النجاح.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image6.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image7.png)
+
+### الماس الأول: فهم المشكلة، التوسع والتحديد من نقطة واحدة إلى الصورة الشاملة
+
+**في نموذج الماس المزدوج، الماس الأول يدور حول المشكلة نفسها** . أنت تبدأ من إدراك غامض، وتتوسع تدريجيًا لتشمل المزيد من الحالات والاحتمالات ذات الصلة، ثم تقوم بعملية تحديد للعثور على نقطة المشكلة التي تستحق الحل حقًا.
+
+بتطبيق ذلك على تطبيقك، فإنه يتلخص في عدة أشياء.
+
+**في مرحلة التوسع، تقوم بإدراج أكبر قدر ممكن من سيناريوهات الاستخدام المحتملة للمستخدم،** والعقبات التي قد يواجهونها، والنتائج التي يأملون في الحصول عليها. أنت لا تستعجل في إصدار الأحكام، بل تخرج فقط كل الأشياء ذات الصلة من رأسك وتنثرها. على سبيل المثال، بالنسبة لتطبيق معالجة المستندات، يمكنك إدراج المستخدمين الذين قد يستخدمونه أثناء التنقل، أو قبل الاجتماعات، أو قبل كتابة التقارير، أو عند إجراء المراجعات؛ يمكنك إدراج مخاوفهم من عدم دقة الملخص، أو تشوه التنسيق، أو تفويت النقاط الرئيسية؛ يمكنك أيضًا إدراج رغبتهم في الفهم بشكل أسرع لما يريد مقال ما التعبير عنه، والعثور بشكل أسرع على الأجزاء المتعلقة بهم.
+
+**في مرحلة التحديد** **، يجب أن تجبر نفسك على اختيار سيناريو أو سيناريوهين فقط من أكثر السيناريوهات شيوعًا وإيلامًا** . على سبيل المثال، إذا اكتشفت من بين مجموعة السيناريوهات أن ما يذكره معظم الأشخاص هو رغبتهم في معرفة ما يحاول المستند الطويل في العمل قوله بالضبط، وما هي استنتاجاته الرئيسية عند استلامه. حينها يمكنك تحديد هدف التطبيق في إصداره الأول على أنه: مساعدة المستخدم على فهم المعنى الأساسي لمقال طويل في غضون خمس دقائق، بدلاً من محاولة حل جميع المشاكل المتعلقة بمعالجة المستندات في وقت واحد.
+
+بنهاية الماس الأول، يجب أن تكون أكثر وضوحًا مما كنت عليه في البداية: **ما هي المشكلة التي تريد حلها حقًا، ولماذا هي أولوية أعلى مقارنة بالمشاكل المحيطة الأخرى.**
+
+### الماس الثاني: تصميم الحل، من الفكرة الخشنة إلى الخطة القابلة للتنفيذ
+
+**الجزء الثاني من الماس المزدوج يتعلق بولادة الحل** . أنت تعرف بالفعل المشكلة التي تريد حلها تقريبًا، والخطوة التالية هي محاولة ابتكار أكبر عدد ممكن من الحلول لهذه المشكلة، ثم الفرز للعثور على الحل الأنسب للإصدار الأول.
+مرحلة التوسع هنا تعني الاستمرار في إضافة الأفكار. يمكنك العصف الذهني لمختلف الميزات، والسيناريوهات الأكثر تفصيلاً، والاستخدامات المحتملة. على سبيل المثال، بالنسبة لملخصات المقالات الطويلة، يمكنك تخيل مستويات مختلفة من التلخيص، وأشكال مختلفة لعرض النتائج، وما إذا كان سيتم دعم القراءة الصوتية، وما إذا كان يُسمح للمستخدمين بتمييز النقاط الرئيسية، وما إذا كان سيتم توفير إصدارات ملخصة بأساليب متعددة، وما إلى ذلك. لا تحتاج في هذه الخطوة إلى اتخاذ قرار فوري، بل فقط حاول إدراج جميع الاحتمالات قدر الإمكان.
+
+في مرحلة التحديد، يجب إخراج أداة تقييم بسيطة ولكنها عملية للغاية: قيمة المستخدم × الجدوى × التكلفة الزمنية. يمكنك إعطاء درجة تقريبية لكل فكرة في هذه الأبعاد الثلاثة، على سبيل المثال من 1 إلى 5، ثم إعطاء الأولوية للأفكار ذات الدرجة الشاملة العالية والتكلفة الزمنية الخاضعة للرقابة كـ MVP (المنتج الأدنى القابل للتطبيق)، أي كجزء من الحد الأدنى من الإصدار القابل للتطبيق.
+
+على سبيل المثال، قد تكون ميزة القراءة الصوتية ذات قيمة جيدة للمستخدم، ولكن التكلفة الزمنية لدمجها في الواجهة الأمامية والتقنية عالية جدًا؛ في حين أن استخراج الملخصات النصية البسيطة والنقاط الرئيسية له قيمة واضحة للمستخدم أيضًا، وجدواه عالية، وتكلفته الزمنية أقل، مما يجعله أكثر ملاءمة كوظيفة يجب إنجازها في الإصدار الأول.
+
+في هذه العملية، يجب أن تذكر نفسك باستمرار بأمر واحد: **الهدف من الإصدار الأول ليس إنشاء تطبيق مثالي، بل إنشاء إصدار موجود حقًا ويمكن للأشخاص استخدامه فعليًا** . لا يحتاج إلى أن يكون شاملاً لكل شيء، بل يحتاج فقط إلى أن يؤدي أداءً لائقًا بما فيه الكفاية في مهمة محددة.
+
+يمكنك رسم حد زمني بسيط للماس الثاني، على سبيل المثال يجب تسليم إصدار قابل للاستخدام في غضون شهر، لذلك من بين جميع الأفكار الموسعة، يمكن وضع جميع الميزات التي تستغرق أكثر من شهر أو حتى عدة أشهر لتطبيقها في قائمة "للمراجعة لاحقًا" بشكل مؤقت. بهذه الطريقة لن يتم سحبك للخلف في البداية لأنك تريد القيام بالكثير.
+
+عندما تعتاد على استخدام نموذج الماس المزدوج لترتيب أفكارك، ستصبح العديد من المواقف التي كانت معقدة ومربكة واضحة ومباشرة. ستعرف في أي مرحلة يجب عليك التفكير بأكبر قدر ممكن، وفي أي مرحلة يجب عليك قطع بعض الاحتمالات بحزم. لن تأمل بعد الآن في حل جميع المشاكل دفعة واحدة، بل ستتعلم التبديل ذهابًا وإيابًا بين التوسع والتحديد.
+
+## 2.2 الحصول على خطوات قابلة للتنفيذ: تعلم كيف تنتقل من التجريد إلى الواقع
+
+بعد توسيع الأفكار، الحصول على الفكرة بحد ذاته بسيط جداً، لكن الحصول على خطوات قابلة للتنفيذ أمر صعب للغاية. القول بأنني أريد إنشاء أداة لتحسين الكفاءة، أو أريد إنشاء تطبيق لمساعدة المبدعين، يبدو ضخمًا وملحميًا. عندما يحين وقت التنفيذ الفعلي، فإن التجريد لا يساعد تقريبًا. ما تواجهه يوميًا هو مشاكل محددة للغاية: **ما هو الجزء الصغير الذي يجب إنجازه في الإصدار الأول بالضبط، وما هي الصفحات المطلوبة** ، هل يجب دعم التسجيل وتسجيل الدخول، وهل يجب ربط الدفع.
+
+هنا هناك قدرة مطلوبة تسمى **التفكيك والتدقيق، القدرة على تحويل التجريد إلى واقع ملموس** . وهي تفكيك هدف كبير وعام، وتدقيق محتواه خطوة بخطوة إلى عناصر عمل دنيا يمكن البدء بها فورًا. هذه القدرة ليست مهمة فقط عند صنع المنتجات، بل هي حاسمة جدًا في الحياة أيضًا.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image8.png)
+
+### لنبدأ بمثال من الحياة: ماذا يعني حقًا أنني أريد تناول البرجر
+
+دعنا لا نتحدث عن التطبيقات الآن، ولنعد إلى مثال بسيط جدًا في الحياة: أريد تناول برجر. للوهلة الأولى، هذه الجملة ليست معقدة على الإطلاق، ولكن إذا قمت بتفكيكها بجدية، ستجد أنها تخفي العديد من الفروع المحددة.
+
+أولاً **الدافع والحاجة الجوهرية** . هل تريد حقًا أكل برجر؟ هل أنت فقط تتوق إلى الطعم، أم تريد حل وجبة بسرعة، أم تريد التجمع مع الأصدقاء، أم فقط لأنك شاهدت صورة جميلة. يبدو هذا غير مهم، ولكنه سيؤثر بشكل مباشر على خياراتك اللاحقة. إذا كان الهدف هو التجمع مع الأصدقاء، فمن المرجح أن تكون هناك متطلبات للبيئة والتجربة؛ وإذا كنت تستعجل الوقت فقط، فقد تكون السرعة أهم من الطعم.
+ثانياً **نطاق الإجراء** . ما نوع البرغر الذي تريد أكله؟ في أي توقيت تريد تناول البرغر؟ هل تريد البرغر فقط، أم ترغب في وجبة كاملة مع مشروبات وبطاطس مقلية وحلويات؟ إذا كان لديك أشغال لاحقاً ولا تريد أن تأكل كثيراً، فقد يختلف اختيارك. يمكنك حتى أن تسأل نفسك بشكل أعمق: هل أريد حل مشكلة إفطار الغدى أيضاً، بأن آخذ معي برغر بسيط إضافي؟
+
+ثم ننتقل إلى **كيفية تحقيق هذا الأمر** ؟ هل يجب عليك الذهاب إلى المتجر لتناول البرغر، أم يمكن توصيله لك، أو حتى هل أنت مستعد لتحضيره بنفسك في المنزل؟ كل خيار يقابله مسار عمل مختلف تماماً. اختيار الذهاب إلى المتجر يعني البحث عن الموقع، ومشاهدة أوقات العمل، وتخطيط المسار؛ اختيار التوصيل يعني الاطلاع على المنصات، ومقارنة الأسعار والوقت؛ اختيار التحضير بنفسك يعني تجهيز المكونات والأدوات والبحث عن وصفات.
+
+عندما تقوم بتفكيك كل هذا بوضوح، فإن عبارة "أريد أن آكل برغر" التي كانت غامضة، ستصبح سلسلة من الخطوات الملموسة. مثلاً: فتح تطبيق التوصيل، البحث عن متجر جربته سابقاً وأعجبك، اختيار وجبة، إزالة المشروب والاكتفاء بالبرغر والبطاطس، كتابة ملاحظة بعدم وضع الصلصات، وأخيراً تأكيد الطلب. كل هذه الإجراءات صغيرة جداً، لكنها قابلة للتنفيذ الفوري، ويمكن برمجتها كخطة قابلة للتنفيذ آلياً بواسطة الذكاء الاصطناعي.
+
+**أهمية التفكيك والتفصيل تكمن هنا: فهي تساعدك على الانتقال من رغبة تبدو كبيرة ومجردة، إلى قائمة يمكن تنفيذها عملياً.**
+
+### مثال تطبيقي: من أين تبدأ بالضبط لتحسين كفاءة معالجة المستندات
+
+دعونا نلقي نظرة على مثال أكثر تعقيداً وتدرجاً. لنفترض أن لديك رغبة تبدو مشروعة: "أريد إنشاء تطبيق يحسن كفاءة معالجة المستندات." هذا الاتجاه صحيح، لكن إذا توقفت عند هذه الجملة فقط، فلن تعرف من أين تبدأ تقريباً. لا تعرف ما هي الصفحة التي يجب تصميمها أولاً، ولا المدى الذي يجب أن يصل إليه الإصدار الأول، ناهيك عن كيفية شرح فكرتك للآخرين.
+
+في هذا الوقت، يمكنك استخدام طريقة التفكيك والتفصيل المذكورة أعلاه، لتدقيقها خطوة بخطوة؛ وبسبب ضيق الوقت، سنعرض هنا مستويين فقط من طريقة التفكيك.
+
+#### التفكيك والتفصيل من المستوى الأول
+
+**أولاً، عليك أن تحدد ما هو "المستند"** . المستند بحد ذاته مفهوم واسع، يمكن أن يكون جدولاً بيانات، أو تقريراً بصيغة Word، أو ملف PDF، أو نصاً بصيغة Markdown يسجل تعليقات الكود، أو ملاحظات بصيغة TXT، أو حتى مستنداً صورياً ناتجاً عن المسح، أو ورقة بحثية أكاديمية تتضمن رسوماً بيانية ومعادلات. الأنواع المختلفة من المستندات لها اختلافات في التنفيذ، ولكن وظائف "المعالجة" المصممة لاحقاً يجب أن تتطابق مع النوع المحدد للمستند، لذا من الضروري تفصيل تعريف المستند. إذا كان مستنداً صورياً، قد تحتاج إلى إضافة وظيفة التعرف البصري على الحروف (OCR) أولاً؛ وإذا كان مستنداً جدولياً، فإن الاحتياج الأساسي هو على الأرجح استخراج البيانات وتحليلها، وليس مجرد اختصار النصوص.
+
+**ثانياً، تحتاج أيضاً إلى تحديد ما تعنيه "المعالجة". إلى ماذا يتم تحويله، حتى يُعتبر "مُعالجاً"؟** وما هي طريقة المعالجة؟ بعض الناس يقصدون بالمعالجة تلخيص تقرير من 50 صفحة إلى 5 صفحات مقروءة؛ وبعضهم يقصد تحويل مجموعة من ملفات Word و PDF و Markdown ذات التنسيقات الفوضوية إلى قالب موحد؛ وهناك من يهتم بالترجمة وإعادة الكتابة والتحسين، لتحويل مسودة مقبولة إلى نسخة رسمية قابلة للنشر. في هذه الخطوة يمكنك أن تسأل نفسك مباشرة: هل ما أقصده بـ "المعالجة" هو "القراءة بشكل أسرع"، أم "التحسين بشكل أفضل"، أم "تسهيل نقلها للآخرين"؟ الإجابات المختلفة تحدد بشكل مباشر أن صفحة الدخول وصفحة التشغيل التي ستصممها لاحقاً ستكون مختلفة تماماً.
+
+**بالنسبة لـ "التطبيق" يحتاج أيضاً إلى تعريف. ما الذي يُسمى تطبيقاً** ؟ هل هو أداة صغيرة لاستخدامك الشخصي فقط، أم تأمل أن يكون هناك مجموعة من المستخدمين في المستقبل؟ هل هو برنامج ويب، أم تطبيق هاتف، أم مجرد ميزة صغيرة مدمجة في نظام موجود؟ إذا كنت ترغب فقط في استخدامه على الكمبيوتر بنفسك، فإن تكلفة إنشاء صفحة ويب بسيطة أو نص برمجي لسطر الأوامر ستكون أقل بكثير؛ وإذا كنت تخطط لاستخدامه مع زملائك في الفريق، فقد تحتاج إلى التفكير في نظام الحسابات والصلاحيات ومنافذ التعاون. تبدو هذه وكأنها مشاكل اختيار تقني، ولكن في مرحلة التفكيك، تحتاج فقط للإجابة على جملة بسيطة جداً: على أي جهاز، وفي أي سيناريو، أخطط لاستخدام هذا الشيء.
+
+بعد ذلك، **دعنا نعود للجملة نفسها: "تحسين كفاءة معالجة المستندات".** تحتاج أيضاً إلى تفكيك عدة كلمات مفتاحية بوضوح. مثلاً **"تحسينها بمساعدة ماذا"** ؟ هل يجب استخدام الذكاء الاصطناعي بالضرورة؟ أم أنه ليس ضرورياً؟ يمكن حل بعض تحسينات الكفاءة تماماً باستخدام القوالب والاختصارات، مثل إنشاء غلاف تقرير بتنسيق ثابت بنقرة واحدة، أو إدراج إقرار تنصل قانوني قياسي بنقرة واحدة. هذه الاحتياجات قد لا تتطلب تدخل النموذج على الإطلاق. على العكس، إذا كنت تواجه كميات كبيرة من النصوص الطويلة غير المهيكلة وتحتاج إلى فهمها وتلخيصها وإعادة كتابتها، فإن الذكاء الاصطناعي سيكون حلقة طبيعية جداً.
+
+كلمة "الكفاءة" تستحق أيضاً أن يتم تفكيكها بشكل منفصل. **ماذا تعني الكفاءة بالضبط؟ هل تعني السرعة فقط، أم تشمل السرعة والجودة معاً، بالإضافة إلى معدل الخطأ وصعوبة الفهم؟** مثلاً، تقليل وقت قراءة مستند من 20 صفحة من 30 دقيقة إلى 5 دقائق لمسح النقاط الرئيسية، هذه هي السرعة؛ السماح للمستخدم باكتشاف الأخطاء المنطقية والتناقضات في البيانات بسرعة داخل الملخص، هذه هي الجودة؛ جعل شخص غير مطلع على المصطلحات المهنية قادراً على فهم التقرير من خلال الشروحات والتعليقات التوضيحية، هذا هو خفض الحاجز المعرفي. يمكنك أن تسأل نفسك بصراحة: إذا نجح هذا التطبيق نجاحاً باهراً، فما هو أكبر تغيير سيحدث للمستخدم؟ هل هو "أن الوقت الذي يقضيه في المستندات انخفض للنصف"، أم "أن القيام بالمهام المتعلقة بالمستندات لم يعد مرهقاً ذهنياً"؟ بالإجابة بوضوح على هذا، سيكون لديك أساس لتحديد أولويات وظائفك.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image9.png)
+
+#### التفكيك والتفصيل من المستوى الثاني
+
+ما سبق كان تفكيكاً من المستوى الأول. لنفترض أنه في هذه المرحلة، النتيجة الأولية للتفكيك والتفصيل التي يمكننا الحصول عليها هي: "أريد إنشاء برنامج ويب يستخدم الذكاء الاصطناعي لتحسين سرعة وجودة تحويل مستندات PDF إلى نصوص". هذه الجملة أكثر تحديداً بكثير من "تحسين كفاءة معالجة المستندات" الأصلية: فهي تحدد نوع المستند (PDF)، وطريقة المعالجة (التحويل إلى نص)، واتجاه التحسين (السرعة والجودة)، والمسار التقني (الذكاء الاصطناعي)، والشكل الحامل (برنامج ويب). من منظور التعبير عن المتطلبات، انتقلت من رغبة مجردة إلى فكرة وظيفية واضحة نسبياً.
+
+ولكن تجدر الإشارة إلى أن هذا الوصف لا يزال مجرد "هدف وسيط"، ولا يمكن اعتباره خطة منتج قابلة للتنفيذ حقاً. والسبب هو: **لا تزال العديد من المعلومات الرئيسية فيه عامة، مثل "أي ذكاء اصطناعي سيتم استخدامه" و "إلى أي مدى سيتم التحسين" و "ما هي سيناريوهات الاستخدام المتوافقة" و "ما هي الفئة المستهدفة من المستخدمين".** لذلك، يمكننا، بل ومن الضروري، **الاستمرار في التفكيك للأسفل، لتحويل هذه الجملة إلى مجموعة من القرارات التصميمية والحلول التقنية بتفاصيل دقيقة** .
+
+دعنا ننظر أولاً إلى "الذكاء الاصطناعي" المذكور. هل "الذكاء الاصطناعي" هنا يشير إلى نموذج OCR خفيف مسؤول فقط عن التعرف على النصوص، أم أن هناك حاجة لإدخال نموذج لغوي كبير، أو حتى نموذج متعدد الوسائط، للقيام بتصحيح الأخطاء اللاحق، وإعادة ترتيب الصفحات، وإعادة ترتيب المحتوى، وفهم الهيكل؟ الخيارات المختلفة ستجلب عواقب مختلفة تماماً في ثلاثة أبعاد:
+
+- استهلاك التكلفة: بما في ذلك تكلفة قوة الحوسبة، ورسوم الاستدعاء، وزمن الاستدعاء، إلخ. هل هي تكلفة لمرة واحدة بشكل أساسي، أم نفقات مستمرة؟
+- صعوبة التطوير: هل يكفي دمج واجهة OCR الحالية ببساطة، أم أن هناك حاجة لتصميم Prompts معقدة، وإدارة السياق، وحتى بناء نظام تدريب وتقييم ذاتي؟
+- شكل المنتج واستراتيجية الإطلاق: هل سيتم إنشاء "أداة صغيرة لاستخراج النصوص بسرعة"، أم "منصة ذكية لمعالجة المستندات" قادرة على استعادة الهيكل العام، والجداول، ومستويات العناوين، ومناسبة للقراءة المتعمقة وإعادة استخدام المحتوى؟
+
+ثم **التفكيك الإضافي لـ "مستند PDF". ما هو نوع PDF الذي تريد دعمه بالضبط؟** إذا تم قصر النطاق على "ملفات PDF نصية يمكن نسخها"، فلا داعي للتعامل مع الملفات الممسوحة ضوئياً، والرسوم البيانية المعقدة، وتنسيقات المعادلات منذ البداية، ولا داعي للتحمل من أجل المستندات ذات الأعمدة المتعددة أو التنسيقات الباهظة. من ناحية أخرى، إذا كنت تأمل في تحقيق "إمكانية إلقاء أي PDF فيها"، فهذا يعني أنه يجب عليك حل سلسلة من المشاكل عالية الصعوبة مثل التعرف الضوئي على الحروف (OCR) لملفات PDF المصورة، وإعادة بناء التخطيط، والخلط بين الصور والنصوص، واستخراج الجداول في وقت واحد، مما سيضاعف تعقيد المشروع.
+
+في هذا المستوى، يمكنك عمداً القيام بعملية "تضييق"، وكتابة التنازلات بوضوح. على سبيل المثال: الإصدار الحالي يخدم بشكل أساسي "تقارير ومستندات PDF النصية ذات الهيكل الواضح نسبياً"، ولا يوجد ضمان لنتائج المستندات الممسوحة ضوئياً أو المستندات التي تحتوي على خلط كبير بين الصور والنصوص. بهذه الطريقة، تصبح جميع الأهداف اللاحقة المتعلقة بـ "السرعة" و"الجودة" مبنية على فرضية يمكن التحكم فيها ويمكن تفسيرها نسبياً، كما يسهل توضيح الحدود في وصف المنتج وإدارة توقعات المستخدمين.
+
+التالي هو "التحويل إلى نصوص بجودة عالية". يمكن تفكيك "الجودة" هنا إلى ثلاثة أبعاد قابلة للنقاش وقابلة للموازنة على الأقل:
+
+1. **هل التعرف صحيح بشكل عام** : ما مدى دقة التعرف على الأخطاء المطبعية، وعلامات الترقيم، والرموز الخاصة، وهل ستظهر فقرات كاملة من نصوص غير مفهومة.
+2. **هل يتم الحفاظ على هيكل الفقرات والعناوين** : هل يمكن استعادة مستويات الفصول، وفواصل الفقرات، وهيكل القوائم، وكتل الاقتباس في النص الأصلي قدر الإمكان بعد التحويل إلى نص عادي.
+3. **هل هو مناسب للتحرير الثانوي وإعادة الاستخدام** : هل النص المُنشأ نظيف بما فيه الكفاية، وهل التنسيق منظم، وعندما يقوم المستخدم بنسخه لاحقاً إلى Word أو Notion أو محرر أكواد، هل سيحتاج إلى تنظيف يدوي واسع النطاق.
+
+**يمكنك أولاً اختيار أهم بند أو بندين بالنسبة لك، كاتجاه رئيسي لـ "الجودة"** . على سبيل المثال: إعطاء الأولوية لـ "هيكل فقرات واضح" و"الحفاظ على مستويات العناوين بشكل أساسي"، والاكتفاء في الأخطاء المطبعية بمستوى "يمكن للمستخدم إصلاحها يدوياً بسرعة في غضون دقائق". بهذه الطريقة، لم تعد "الجودة العالية" صفة فارغة، بل يمكن تحويلها إلى معيار منتج قابل للكتابة والقياس: يُسمح بأخطاء التعرف العرضية، ولكن لا يمكن قطع المستند إلى أجزاء مبعثرة بفقرات فوضوية، ناهيك عن جعل المستخدم يبذل جهداً أكبر في ترتيب الهيكل مقارنة بالنسخ اليدوي.
+
+دعنا ننظر إلى "السرعة". بما أنك كتبت في الهدف "تحسين... السرعة والجودة"، فيجب أن يتم تحديد "السرعة" بشكل ملموس إلى **مستوى معين يمكن الشعور به،** بدلاً من البقاء عند "يبدو أسرع نسبياً". في الواقع، هناك مفاضلة مهمة مخفية هنا:
+
+- هل تأمل في دعم المستندات الطويلة جداً (عشرات الصفحات أو مئات الصفحات)، حتى لو كان المستخدم يحتاج إلى الانتظار لفترة أطول؟
+- أم أنّه يستهدف فقط المستندات المتوسطة والقصيرة، وفي ظل وجود حد أقصى لعدد الصفحات، تحقيق تجربة "الحصول على النتيجة خلال بضع ثوانٍ إلى عشر ثوانٍ"؟
+
+إذا كان سيناريو الاستخدام النموذجي لديك هو: قبل الاجتماع، تقوم بتحويل تقرير أو خطة أو ملخص بحث من عشرات الصفحات بسرعة إلى نص قابل للتعديل من أجل التعليق والتعديل والاقتباس، فإن الخيار الأكثر طبيعية هو:
+
+- وضع حد أقصى معقول لعدد صفحات المستند الواحد، مثل "ملف PDF نصي لا يتجاوز 20 صفحة"؛
+- في الوقت نفسه، تقديم مؤشر تقريبي لوقت المعالجة، مثل "عادةً ما تتم المعالجة في غضون 10 ثوانٍ تقريبًا".
+
+بمجرد كتابة هذين الأمرين بوضوح، يمكن عندها بناء الحلول التقنية اللاحقة (هل هناك حاجة إلى معالجة متوازية، هل يجب إنشاء قائمة انتظار غير متزامنة)، ونصوص الواجهة (الوقت المقدر المعروض على الصفحة، ومطالبات انتهاء المهلة)، وإدارة توقعات المستخدم، حول التجربة الأساسية المتمثلة في "المستندات المتوسطة والقصيرة + استجابة سريعة".
+
+**أخيرًا، "برنامج الويب" بحد ذاته. يبدو هذا العنصر مجرد اختيار للوسيط، ولكنه في الواقع يحتاج أيضًا إلى تقييد معقول،** لتجنب الانجرار المبكر نحو شكل منتج معقد للغاية. يمكنك أن تسأل نفسك أولاً سؤالاً محورياً:
+
+- هل يشبه هذا أكثر "أداة مؤقتة لي ولاستخدام داخلي محدود"؟
+- أم أنه مخطط له منذ البداية ليكون "خدمة عبر الإنترنت لمجموعة من المستخدمين الحقيقيين لاستخدامها على المدى الطويل"؟
+
+إذا كان يميل أكثر إلى الخيار الأول، يمكنك عندها التخلص بجرأة من الكثير من التعقيدات: لا حاجة لبناء نظام حسابات كامل وإدارة صلاحيات، ولا حاجة لتنفيذ ميزات مثل سجل المهام، وإدارة المشاريع، والعمل الجماعي في الإصدار الأول، بل التركيز على مسار مبسط للغاية:
+**فتح صفحة الويب ← تحميل ملف PDF ← انتظار المعالجة ← عرض النص القابل للتعديل ← نسخ أو تنزيل بنقرة واحدة**.
+على العكس من ذلك، إذا كان الهدف هو تقديم خدمة مستقرة رسميًا للجمهور، فستحتاج في الإصدارات اللاحقة إلى النظر تدريجيًا في قدرات التزامن، وجدولة قوائم الانتظار، وحصص المستخدمين، والاستعادة بعد الأعطال، والسجلات والمراقبة، والأمان وإدارة الصلاحيات، وغيرها. ولكن في مرحلة التفكيك الحالية، يمكنك تمامًا تعريفه أولاً على أنه "أداة صغيرة قائمة على المتصفح، يمكن استخدامها دون تسجيل الدخول"، والتركيز كل التفاعلات على أبسط المسار وأكثرها جوهرية.
+
+تحتاج إلى أخذ **المفاضلات الكامنة وراء الكلمات المفتاحية** مثل "الذكاء الاصطناعي"، "مستند PDF"، "التحويل عالي الجودة إلى نص"، "متطلبات السرعة"، "برنامج الويب"، **التعبير عنها بوضوح بكلمات أكثر تحديدًا**. عندها يمكن إعادة صياغة تلك الجملة الأولى "أريد إنشاء برنامج ويب يعتمد على الذكاء الاصطناعي لتحسين سرعة وجودة تحويل مستندات PDF إلى نص" لتصبح أكثر إحكامًا ووضوحًا وقابلية للتنفيذ. على سبيل المثال:
+
+> تزويد المستخدمين بأداة صغيرة قائمة على المتصفح، تُعطي الأولوية لدعم تقارير PDF الواضحة الهيكل والنصية في الغالب، ومن خلال عملية تحليل متكيفة وتنظيف خفيف بواسطة الذكاء الاصطناعي، يتم إخراج نص قابل للتعديل بهيكل فقرات واضح، ومستويات عناوين محفوظة بشكل أساسي، ومعدل أخطاء تعرف مقبول، في غضون 10 ثوانٍ تقريبًا، مع إمكانية استخدامه دون الحاجة إلى تسجيل الدخول.
+
+عند هذه النقطة، تكون قد أكملت انتقالًا مهمًا من الهدف المجرد إلى خطة قابلة للتنفيذ، وبعد بعض التنقيح يمكنك الحصول على وصف في جملة واحدة:
+
+> تزويد المستخدم بأداة ويب تمكنه من رفع ملف PDF نصي لا يتجاوز 20 صفحة، والحصول على نص قابل للتعديل بهيكل فقرات واضح ومستويات عناوين محفوظة في غضون 10 ثوانٍ تقريبًا، مع دعم النسخ بنقرة واحدة والتنزيل كملف `.txt`.
+
+هذا النوع من الوصف لم يعد شعارًا فارغًا، بل يمكن أن يتحول مباشرة إلى مطالبة (Prompt)، أو مجموعة من التعليمات التي يمكن للذكاء الاصطناعي تنفيذها كخطة (Plan). على سبيل المثال، يمكنك ببساطة إلقاء هذا النص على ذكاء اصطناعي يمتلك قدرات تطوير، وجعله يُنشئ خطة تطوير بناءً عليه أو يُنشئ مباشرة الحد الأدنى من الإصدار القابل للاستخدام من تطبيق الويب؛ يمكنك أيضًا تسليمه لمصمم ليقوم برسم نموذج أولي ملموس للواجهة بناءً عليه؛ أو إرساله إلى زميل مهندس ليقوم بتقييم تكلفة التنفيذ والحل التقني بسرعة.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image10.png)
+
+عندما تصل إلى هذه المرحلة، ستلاحظ تغييرين واقعيين للغاية. أولاً، لن تشعر بثقل عبارة "أريد إنشاء تطبيق يزيد من الكفاءة"، بل ستمتلك خطوات يمكنك البدء بها فورًا. ثانيًا، ستنخفض تكلفة التواصل مع الآخرين بشكل كبير، لأنك ستقدم مجموعة أولى من الخطة التي تم تفكيكها بما يكفي من التفاصيل.
+
+الانتقال من المجرد إلى الملموس هو في الواقع أخذ أمنية كبيرة مثل "أريد إنشاء تطبيق يحسن كفاءة معالجة المستندات" وتفكيكها إلى قائمة مهام يمكن لأي شخص أو حتى أي ذكاء اصطناعي فهمها والبدء في تنفيذها على الفور. من خلال هذه الطريقة، لن تكون هناك مشاكل يصعب حلها، فجميع المشاكل عند تفكيكها إلى مستوى ذري لا يكون أمامها سوى خيارين، وطالما يمكن تفكيكها إلى مستوى ذري، يمكن تنفيذها:
+
+1. سأقوم أنا بحل وتنفيذ هذه المشكلة الفرعية.
+2. الذكاء الاصطناعي أو خبير آخر سيقوم بحل وتنفيذ هذه المشكلة الفرعية.
+
+## 2.3 تصور تطبيقك على السبورة: ارسم تطبيقك الأول
+
+كثير من الناس عندما يفكرون في البدء بإنشاء تطبيق، فإن أول ما يتبادر إلى ذهنهم هو الكود، والخلفية (Backend)، وقواعد البيانات، والواجهات (APIs)، والأطر (Frameworks). هذا ليس غريباً، لأن الفكرة التي غُرست في عقولنا لفترة طويلة هي: إنشاء تطبيق هو في المقام الأول مشكلة تقنية. ولكن إذا ركزت كل انتباهك على التكنولوجيا منذ البداية، فمن السهل أن تتجاهل الشيء الأكثر أهمية: **ما الذي سيفعله المستخدم بالضبط هنا**.
+
+في هذه النقطة، فإن أحد أبسط الأساليب - والذي غالبًا ما يتم تجاهله - هو الرسم أولاً. لست بحاجة إلى أي برنامج احترافي، فالسبورة، أو ورقة بيضاء، أو دفتر ملاحظات، كلها تفي بالغرض. المهم أن تقوم برسم مسار المستخدم بالكامل من دخوله حتى خروجه باستخدام بضع رسومات بسيطة للصفحات (Sketches)، بدلاً من التوجه مباشرة لفتح محرر الكود لكتابة البرمجيات.
+
+يمكنك تقسيم التطبيق بأكمله أولاً إلى ثلاث فئات من الصفحات: صفحة الدخول، وصفحة العمليات، وصفحة النتائج.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image11.png)
+
+### صفحة الدخول: من أين يدخل المستخدم، وماذا يرى للوهلة الأولى
+
+صفحة الدخول هي المكان الذي يرى فيه المستخدم تطبيقك لأول مرة. الكثير من الناس عند تصميم صفحة الدخول في البداية، لا يفكرون إلا في إنشاء صفحة رئيسية عامة، مليئة بأزرار الوظائف، ومداخل الوحدات، ومساحات الإعلانات، وكأن هذا هو الطريقة الوحيدة لإظهار أن المنتج مليء بالميزات ورائع. ولكن إذا قمت برسم هذه الصفحة على الورق، وعلقتها على الجدار، ثم تخيلت أنك شخص يزورها لأول مرة، ستدرك فجأة مشكلة واقعية للغاية: **أين يجب أن أنقر أولاً؟**
+
+عند رسم صفحة الدخول، يمكنك أن تعتبر نفسك مرشدًا سياحيًا. اطرح بعض الأسئلة المحددة للغاية: كيف يدخل المستخدم، هل عبر النقر على رابط مشاركة، أم بالبحث في متجر التطبيقات، أم عن طريق مسح رمز QR على صفحة ويب؟ المصادر المختلفة تعني توقعات مختلفة تمامًا للمستخدم تجاهك. على سبيل المثال، المستخدم الذي يدخل عبر رابط أعاده توجيهه صديق يعرف بالفعل تقريبًا ما يمكنك فعله، وفي هذه الحالة يمكن أن تكون صفحة الدخول أكثر مباشرة، ليتجرب الوظيفة الأساسية على الفور؛ بينما الشخص الذي عثر عليك عبر متجر التطبيقات قد لا يعرف عنك شيئًا، وفي هذه الحالة **ستحتاج صفحة الدخول إلى مساعدته في فهم ما تفعله في جملة واحدة، أو أن يكون شكلها يوحي بالاستخدام بمجرد النظر**.
+
+أثناء الرسم، يمكنك اتباع هذه المعالجة البسيطة: ارسم إطار شاشة هاتف على الورق، واكتب عنوان هذه الصفحة في الأعلى، وارسم المنطقة الرئيسية في المنتصف. وقم بتدوين الملاحظات بوضوح: ماذا أريد أن أخبر المستخدم في هذه الصفحة، وما هو الاختيار الذي أتمنى أن يتخذه هنا. على سبيل المثال، هل تريد منه النقر على زر "ابدأ" كبير، أم تجعله يرى أولاً نتيجة مثال قصيرة، أو يملأ بعض المعلومات الأساسية البسيطة.
+كلما كانت صفحة البدء أبسط وأكثر تحديدًا، زادت فرصك في جعل المستخدم الجديد لا يضيع ويبدأ الاستخدام بسرعة.
+
+### صفحة العمليات: ماذا يحتاج المستخدم لإدخاله، والنقر عليه، واختياره
+
+بمجرد أن يقرر المستخدم المضي قدمًا، ستكون الخطوة التالية في صفحة العمليات، وهي منطقة العمل الخاصة بالتطبيق بأكمله. هذا هو المكان الذي يتفاعل فيه المستخدم معك بشكل حقيقي، وهو أيضًا المكان الذي يبالغ الكثيرون في تصميمه بتعقيد.
+
+عند رسم صفحة العمليات، فإن تمرينًا فعالًا للغاية هو: **السماح للمستخدم بفعل شيء واحد فقط**. يمكنك كتابة أبسط تعبير لهذا الشيء على الورق، مثل "إرسال نص"، "تسجيل فكرة صوتيًا"، "اختيار قالب"، "تكوين معلمة". ثم التركيز حول هذا الشيء، ومحاولة تقليل العناصر قدر الإمكان، لترى ما هي المدخلات والأزرار الضرورية فقط.
+
+خذ تطبيق التلخيص التلقائي للمقالات الطويلة كمثال. صفحة العمليات الأكثر خشونة ولكنها قادرة على إتمام المسار قد تحتاج فقط إلى بضعة أشياء: مربع إدخال يمكن لصق النص فيه، وخيار لاختيار طول الملخص، وزر لإنشاء الملخص. يمكنك بكل بساطة ألا تأخذ في الاعتبار حجم الخط، والألوان، والأيقونات، وتلك التفاصيل البصرية الدقيقة، بل ركز على هذه الأسئلة: **هل يعرف المستخدم بمجرد دخوله إلى هذه الصفحة ما الذي يجب عليه فعله، وما هي الأشياء التي يحتاج إلى تحضيرها، وهل سيشعر بالحيرة في منتصف الطريق ولا يعرف الخطوة التالية؟**
+
+فائدة التفكير في صفحة العمليات على الورق هي أنه يمكنك تجربة إصدارات مختلفة بتكلفة منخفضة للغاية. يمكنك أولاً رسم إصدار تكون فيه جميع المدخلات في نفس الصفحة، ثم رسم إصدار آخر مقسم إلى خطوتين كمعالج صغير، ثم تقوم بتمثيل سيناريو الاستخدام في ذهنك عدة مرات: أي إصدار أقل عرضة لأن يعلق فيه المستخدم. مقارنة بتغيير المسار في كود مكتوب بالفعل، فإن هذا التعديل على الورق يكاد يكون بدون تكلفة.
+
+### صفحة النتائج: ماذا حصل المستخدم، وكيف يتم عرضه
+
+العديد من التطبيقات تتسرع في خطوة النتيجة هذه. غالبًا ما يعتقد المطورون أن النتيجة ليست سوى نص، أو صورة، أو سلسلة بيانات، ويكفي عرضها فحسب. ولكن بالنسبة للمستخدم، غالبًا ما يكون العكس هو الصحيح: فالسبب الأساسي الذي جعله على استعداد للإدخال، والانتظار، والتجربة في الخطوات السابقة، هو أنه يتوقع رؤية شيء واضح ومفيد بما فيه الكفاية في صفحة النتائج.
+
+عند رسم صفحة النتائج، يمكنك التفكير من عدة زوايا: **ما هي المعلومات الأساسية التي يهتم بها المستخدم أكثر، وأين يجب وضعها في أكثر الأماكن بروزًا**. ما هي النتائج التي تحتاج إلى تصدير، أو حفظ، أو مشاركة، وأين يقع مدخلها. هل من الضروري إضافة بعض الشروحات البسيطة للنتائج، لإعلام المستخدم بما تمثله.
+
+بالعودة إلى مثال تلخيص المقالات الطويلة، فإن تصميم صفحة نتائج ودية نسبيًا هو: سرد الاستنتاجات الأساسية في الأعلى باستخدام بضع نقاط موجزة، وتحت ذلك وضع ملخص أكثر تفصيلاً، مع الاحتفاظ برابط النص الأصلي في الأسفل. وضع زرين بارزين على الجانب: أحدهما لنسخ النقاط الرئيسية، والآخر للتصدير كملف. يمكنك محاولة رسم تخطيط هذه المناطق على الورق، وتدوين الإجراء المتوقع لكل زر.
+
+عند الانتهاء من رسم صفحة الدخول، وصفحة العمليات، وصفحة النتائج، قم بربطها بأسهم، **بدءًا من دخول المستخدم لأول مرة، وصولاً خطوة بخطوة إلى النهاية. ستكشف هذه العملية عن العديد من المشاكل التي لم تكن تدركها من قبل:** على سبيل المثال، إذا أراد المستخدم تعديل تفصيلة في صفحة النتائج، فكيف يعود إلى صفحة العمليات؛ أو في صفحة العمليات، إذا كان غير متأكد من ما إذا كان يريد الاستمرار أم لا في الوقت الحالي، فهل توجد طريقة واضحة للخروج أو حفظ المسودة.
+الجوهر الأساسي لهذا الفصل بأكمله يمكن تلخيصه في جملة واحدة: ارسم عملية تفاعل المستخدم أولاً، ثم فكر في التنفيذ التقني. يمكنك ألا تعرف كتابة الأكواد على الإطلاق، ومع ذلك لا يزال بإمكانك **من خلال بضع رسومات بسيطة، تحويل فكرة إلى نموذج أولي مرئي للتطبيق**. كلما كانت هذه الخطوة أوضح، سيصبح الأمر أسهل بكثير لاحقًا، سواء قمت بالتنفيذ بنفسك أو بالتعاون مع الآخرين.
+
+## 2.4 الإشارة إلى تطبيقات الآخرين: "نقل الأفكار بذكاء"
+
+الكثير من الأشخاص عند بناء تطبيقهم الأول، يشعرون بحمل نفسي: يعتقدون أنه يجب عليهم البدء من الصفر، وأن يكون هيكل الصفحة، وطريقة التفاعل، والتصميم المرئي أصلية بالكامل، وكأن هذا هو الشرط الوحيد لصنع منتج حقيقي. الواقع هو أنك إذا تمسكت بهذا المبدأ، فستستنزف الكثير من طاقتك في تفاصيل غير مهمة.
+
+في مجال تصميم التطبيقات، هناك موقف أكثر كفاءة ونضجاً يُسمى **نقل الأفكار بذكاء**. لا يتعلق الأمر بالنسخ البسيط، بل بالاقتراض الانتقائي للحلول الجيدة التي أثبتت جدواها من قبل الآخرين، مع ترك طاقتك لأكثر الأماكن التي يجب أن تُستثمر فيها قيمتك الفريدة.
+
+هناك العديد من المواقع على الإنترنت التي تجمع لقطات شاشة لواجهات التطبيقات، وهناك أيضًا صفحات تفصيلية في متاجر التطبيقات، وهذه الأماكن بحد ذاتها تشبه كتاب مرجعية ضخمًا. يمكنك اختيار بعض التطبيقات القريبة من اتجاهك، مثل الأدوات المماثلة، أو المنتجات الموجهة لنفس الفئة، ثم دراستها صفحة بصفحة كما لو كنت تدرس عينات.
+
+النقطة المهمة التي يجب مراقبتها ليست مدى جمال الألوان، بل كيف يتعاملون مع عدة مناطق رئيسية:
+
+- كيف تم تصميم شريط التنقل، هل هو في الأسفل أم الأعلى، وهل هناك بضع نقاط دخول رئيسية ثابتة أم زر رئيسي واحد فقط
+- كيف يتم تنظيم النماذج (Forms)، هل يتم ملؤها دفعة واحدة في نفس الصفحة، أم يتم تقسيمها إلى خطوات صغيرة متعددة
+- عند عرض النتائج، هل تم وضع المعلومات الأهم في أكثر الأماكن وضوحًا، وكيف تم ترتيب المعلومات الثانوية
+- عندما يدخل المستخدم الجديد لأول مرة، هل هناك عملية إرشاد قصيرة تخبره بكيفية الاستخدام
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image12.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image13.png)
+
+تحديداً، يمكنك الرجوع إلى مواقع جمع لقطات الشاشة التالية:
+
+- [https://www.uisources.com/](https://www.uisources.com/)
+- [https://screenlane.com/](https://screenlane.com/)
+- [https://pagecollective.com/](https://pagecollective.com/)
+- [https://patttterns.net/](https://patttterns.net/)
+- [https://mobbin.com/](https://mobbin.com/)
+- [https://refero.design/](https://refero.design/)
+- [https://scrnshts.club/](https://scrnshts.club/)
+- [https://godly.website](https://godly.website)
+
+بالإضافة إلى الإشارة المباشرة إلى تطبيقات الآخرين، يمكننا أيضاً الحصول على الإلهام من بعض المسابقات، مثل الأعمال الفائزة في الهاكاثون (Hackathon) (وهو نشاط تطوير تعاوني جماعي مكثف ومحدد بوقت، يتطلب إكمال نموذج أولي للمنتج أو حلاً في وقت قصير) وبعض مواقع العروض التوضيحية (Demo) العامة. في جوهرها، هذه هي الحلول التي قدمها مجموعة من الممارسين في وقت قصير جداً. ورغم أنها بدائية، إلا أنها تظهر بالضبط كيفية إكمال العملية المضغوطة من الفكرة إلى المنتج القابل للتشغيل في وقت محدود. يمكنك الرجوع إلى أعمالهم للتفكير في ما يسمى النموذج الأولي الأدنى للمنتج؛ ولكن نظراً لأن الهاكاثون هو دائماً مسابقة قصيرة المدى، فمن المحتمل أن تكون الإبداعية أكبر من التطبيق العملي، وأعمالها الفائزة ليست بالضرورة مناسبة كمنتج طويل الأمد للرجوع إليه والتطوير، وتحتاج إلى الحكم بناءً على الموقف الفعلي.
+
+بالإضافة إلى ذلك، يمكنك أيضاً الإشارة إلى بعض مواقع الأدوات للعمل، ويمكن فهم مواقع الأدوات هذه على أنها مواقع مشابهة لموقع استعلام الطقس، ومواقع الترجمة متعددة اللغات، ومواقع تجميع دليل البوكيمون، ومواقع أدلة الألعاب، ومواقع ترتيب السيارات الشائعة، ومواقع أدوات AI. ورغم أن هذه المواقع الأدواتية بسيطة جداً في وظائفها، إلا أنها قد تكون "تطبيقاً" ممتازاً يلبي احتياجات بعض الأشخاص. الفكرة لا تكمن في التعقيد بل في الفائدة، ومن خلال الإشارة إلى التطبيقات المختلفة، يمكنك حقاً معرفة ما هو الطلب في السوق.
+
+## 2.5 لا تنتظر حتى يكون كل شيء جاهزاً لبحث احتياجات المستخدم
+
+الكثير من الأشخاص يقولون بأفواههم إنهم يريدون صنع منتج يحركه المستخدم، ولكن عند التنفيذ الفعلي، يميلون إلى الانغلاق أولاً لصنع نسخة كاملة في أذهانهم، ثم يجمعون الشجاعة لإظهارها للآخرين. **يبدو هذا أكثر احترامية، على الأقل لن تعرض منتجك غير المكتمل للآخرين. ولكن من منظور المنتج، هذه عادة خطيرة جداً.**
+
+السبب بسيط: كلما تأخرت في التواصل مع المستخدمين، زاد استثمارك في التفاصيل في المراحل السابقة، وبمجرد أن يكون الاتجاه خاطئاً، ستكون الخسائر أكبر. ربما تكون قد كتبت الكثير من الأكواد لميزة غير مهمة، وصممت الكثير من الرسومات لتفصيل لا يهتم به الكثيرون، لتكتشف في النهاية أن المكان الذي عجز فيه المستخدم حقاً ليس الجزء الذي قضيت فيه معظم وقتك.
+
+لتجنب هذا الموقف، هناك مبدأ موجز ولكنه فعال يمكنك تذكير نفسك به دائماً: اسأل وأنت ترسم، **اسأل وأنت تفعل، لا تسأل بعد أن تنتهي.**
+
+### اسأل وأنت ترسم: ابدأ في جمع التعليقات في مرحلة الورقة والقلم
+
+عندما ترسم للتو صفحة الدخول، وصفحة التشغيل، وصفحة النتائج على السبورة أو الورقة، فقد امتلكت بالفعل الأساس للحوار مع المستخدم. يمكنك تماماً في هذه المرحلة، البحث عن شخصين أو ثلاثة قد يصبحون مستخدمين مستهدفين، والسماح لهم بإلقاء نظرة، والاستماع إلى ردود أفعالهم الأولى.
+
+لا تحتاج إلى إجراء مقابلات معقدة، فقط راقب بعض التفاصيل: عندما يرون صفحة الدخول، هل سيقولون تلقائياً الجملة التي تريد منهم قولها، مثل "يبدو أن هذا لعمل ملخصات للنصوص الطويلة"؛ عندما يكونون في صفحة التشغيل، هل سيتبعون بشكل طبيعي التسلسل الذي توقعته، مثل لصق النص أولاً، ثم اختيار طول الملخص؛ عندما يكونون في صفحة النتائج، هل تنجذب أعينهم فوراً إلى الجزء الذي تأمل أن يروه، بدلاً من التردد في الزوايا غير المهمة.
+
+يمكن لهذه الملاحظات أن تساعدك، قبل كتابة أول سطر من الكود، في الكشف عن مشاكل التصميم الأكثر وضوحاً. يمكنك تعديل النموذج الأولي على الورق بناءً على هذه التعليقات، ثم الاستمرار في العمل، بدلاً من الانتظار حتى يتم بناء التطبيق بالكامل ثم إجراء تغييرات كبيرة على الهيكل.
+
+### اسأل وأنت تفعل: ادعُ الأشخاص لتجربة المنتج في مرحلة النصف مصنع
+
+عندما يكون لديك نسخة نصف مصنعة يمكنها تشغيل العملية الأساسية، فلا يوجد سبب إضافي لاستخدامها بمفردك في الخفاء. حتى لو كانت الواجهة بدائية جداً، وحتى لو لم تتم إضافة العديد من الميزات بعد، **طالما أنها قادرة على إكمال الحد الأدنى من المهام التي حددتها، فقد امتلكت بالفعل الشروط لدعوة المستخدمين الحقيقيين لتجربتها.**
+
+يمكنك البدء من الأشخاص من حولك، ويمكنك أيضاً اختيار بعض الأشخاص الأكثر استعداداً لتجربة أدوات جديدة من المستخدمين الذين تواصلت معهم من خلال أصول الجمهور والمناطق العامة المذكورة في الفصل السابق. أرسل لهم رابطاً، واشرح باختصار ما يمكن فعله الآن، ثم اطلب منهم، دون تقديم الكثير من الشروحات، الانتقال من الدخول إلى النتيجة.
+
+**في هذه العملية، ما يجب عليك فعله ليس الدفاع، بل المراقبة.** أين سيترددون، في أي خطوة سيتوقفون، وأي زر سينظرون إليه لفترة طويلة دون أن يجرؤوا على النقر عليه. يمكنك أيضاً طرح بعض الأسئلة المحددة لاحقاً: أي خطوة بدت الأكثر صعوبة بالنسبة لك، وأي نتيجة كانت الأكثر إرضاءً لك، وما هو الشيء الذي توقعته ولكنك لم تره في النهاية.
+
+القيام بهذه الأشياء في مرحلة النصف مصنع له فائدة كبيرة: لم تستثمر اعتماداً عاطفياً مفرطاً في أي حل بعد، وسيكون من الأسهل عليك قبول التخلي عن بعض الميزات التي تبدو رائعة ولكن المستخدمين لا يهتمون بها على الإطلاق، وستكون أكثر استعداداً لقضاء الوقت في تحسين التفاصيل الصغيرة التي تبدو غير ملفتة ولكنها تظهر بشكل متكرر أثناء الاستخدام الفعلي.
+
+### لا تخف من إظهار عدم الاحترافية
+
+السبب الذي يجعل الكثير من الناس لا يرغبون في إظهار عملهم للآخرين في مرحلة مبكرة هو الخوف من إظهار ضعفهم، معتقدين أن هذا سيجعلهم يبدون غير محترفين. ولكن على العكس من ذلك، فإن صانعي المنتجات الناضجين حقاً نادراً ما يشعرون بهذا الخجل تجاه الإصدارات المبكرة. لأنهم يعرفون أن الكشف المبكر عن المشاكل هو الأقل تكلفة.
+
+يمكنك تبني منظور مختلف في عقلك بشأن هذا الأمر: أنت لا تعرض منتجاً غير مكتمل، بل تدعو الطرف الآخر للمشاركة في الصقل معاً. طالما توضح مسبقاً أن هذا إصدار مبكر جداً، وأنك تأمل ألا يعطي الطرف الآخر إشادة، بل مشاعر استخدام مباشرة قدر الإمكان، فإن معظم الناس سيكونون مستعدين لتقديم المساعدة، وخاصة أولئك الذين يعانون بالفعل من المشكلة التي تحاول حلها.
+
+لقد تعلمت الآن استخدام السبورة والورق لتحويل فكرة مجردة إلى مسار مستخدم ملموس؛ وتعرف على كيفية التفكيك، لتقسيم الرغبات الكبيرة والعريضة إلى عناصر أدنى قابلة للتنفيذ يمكنك البدء بها غداً؛ وتعرف أيضاً أنه لا يجب عليك أن تكون طماعاً، وتحزم كل أفكارك في الإصدار الأول دفعة واحدة، بل تستخدم نموذج الماس المزدوج للتبديل ذهاباً وإياباً بين التباعد والتقارب، لاختيار MVP الأكثر جدارة بالبدء به أولاً؛ وتعلمت الإشارة بذكاء إلى التطبيقات الحالية، والوقوف على أكتاف الآخرين للتقدم إلى الأمام في الهياكل الأساسية مثل التنقل والنماذج وعرض النتائج؛ والأهم من ذلك، أنك تعرف عدم انتظار كل شيء حتى يكون جاهزاً للبحث عن المستخدمين، بل دعهم يدخلون بدءاً من الـ demo، واستخدام تجربتهم لمساعدتك في تصحيح الاتجاه معاً.
+
+من خلال هذه الأدوات والخطوات، لديك الآن القدرة على تفكيك فكرة إلى تطبيق قابل للاستخدام مبدئياً. ولكنك ستلاحظ أيضاً أن هناك حجاباً يفصل بين التطبيق القابل للاستخدام، والتطبيق الجيد حقاً.
+
+بعد ذلك، سنتحدث تحديداً عن: ما هو التطبيق الذي يمكن اعتباره تطبيقاً جيداً؛ لنجعلك تعرف، بعد الحصول على أول إصدار قابل للاستخدام، كيف تجعل تطبيقك يذهاب إلى أبعد من ذلك في الخطوة التالية.
+
+## 📚 Assignments
+
+يرجى إكمال الواجب التالي بناءً على المحتوى أعلاه:
+
+1. يرجى استخدام أي نموذج لغوي كبير (LLM)، وبالنسبة للفكرة السابقة، اطلب من AI الرجوع إلى نموذج الماس المزدوج (Double Diamond) لإعطاء نتائج متباينة، وستحتاج إلى اختيار مجموعة من الحلول الممكنة بناءً على نتائج التباين.
+2. بناءً على الفكرة التي توصلت إليها سابقاً، استخدم طريقة التفكيك والتحديد للحصول على محتوى قابل للتنفيذ بشكل أكثر تحديداً. مشابه لـ: "توفير أداة ويب للمستخدم، تتيح له رفع ملف PDF نصي لا يتجاوز 20 صفحة، والحصول في غضون 10 ثوانٍ على نص قابل للتعديل ببنية فقرات واضحة ومستويات عناوين محفوظة، مع دعم النسخ بنقرة واحدة والتنزيل كملف .txt."
+3. بناءً على الفكرة المُفصّلة، حاول رسم تطبيقك على السبورة البيضاء. يحتاج التطبيق إلى التركيز على جزأين: كيف يجب أن يكون تصميم واجهة المستخدم (UI)، وما هي الميزات التي يجب أن تكون موجودة، وأين توجد كل ميزة.
+
+# 3. بعد بنائه، كيف تحكم عليه وتصقله ليصبح تطبيقاً جيداً
+
+عندما تُنجز أخيراً النسخة الأولى وتضعها في العالم الحقيقي ليستخدمها الناس، ستدخل مرحلة مختلفة تماماً. كل النقاشات السابقة كانت لا تزال في مستوى الأفكار والتصميم، والآن، سيخضع المنتج لأول مرة لاختبار سيناريوهات الاستخدام الحقيقية. سترى الأماكن التي ينقر فيها المستخدمون بشكل خاطئ، والأماكن التي يترددون فيها، والأماكن التي يتوقفون فيها عن الحركة، وسترى أيضاً في أي الخطوات يسير الأمور بسلاسة مذهلة، وحتى يقضون بضع ثوانٍ إضافية بشكل غير متوقع في زاوية ما. هذه التفاصيل أكثر صدقاً بكثير من كل ما تتخيله في ذهنك حول المنتج.
+
+ما تسعى هذه المقالة لحله هو مشكلة جوهرية: عندما يتم بناء التطبيق بالفعل، وحتى عندما يكون هناك مجموعة من المستخدمين الأوائل يستخدمونه، كيف تحكم إلى أي مدى يبعد عن كونه تطبيقاً جيداً، وكيف تستفيد من هذه المعلومات من عملية الاستخدام الحقيقية لتحسينه وصقله خطوة بخطوة.
+
+## 3.1 ما هو التطبيق الجيد: 4 خصائص أساسية
+
+للحكم على ما إذا كان التطبيق جيداً أم لا، لا يمكنك الاعتماد فقط على مدى حبك له، ولا على عدد التنزيلات أو أيام الاستخدام القليلة، بل يجب أن تنظر إلى ما إذا كان يمتلك بعض الخصائص الأساسية والثابتة. ببساطة، يمكنك الرجوع إلى الخصائص التالية:
+
+### التطبيق الجيد يقدم قيمة ملموسة
+
+الخاصية الأكثر مباشرة للتطبيق الجيد هي أنه يمكنه أن يمنح الناس فائدة حقيقية في سيناريو معين. لا يجب أن تكون هذه الفائدة عظيمة، ولا تحتاج إلى أن تغلف بلغة معقدة، ولكن يجب أن تكون محددة لدرجة يمكنك شرحها بوضوح: **ما الذي ساعد المستخدم بالتخلي عن فعله، وكم من الوقت وفّره، أو ما الذي جعله أقل عرضة للأخطاء.**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image14.png)
+
+على سبيل المثال، أداة بسيطة لمحاضر الاجتماعات، إذا كان بإمكانها بمجرد رفع تسجيل صوتي أو التسجيل المباشر أثناء الاجتماع، أن تقوم تلقائياً بإنشاء محضر اجتماع منظم، وتوضيح المهام والأشخاص المسؤولين والمواعيد النهائية في قائمة، فإن ما توفره للمستخدم ليس مجرد وقت الكتابة، بل الجهد المبذول في العملية بأكملها من التسجيل، والتنظيم، والفرز، إلى التنسيق والإخراج. يمكنك القول بوضوح أن هذه الأداة توفر حوالي عشرين دقيقة لكل شخص في كل اجتماع. وإذا كان الفريق بأكمله لديه عشرة من هذه الاجتماعات أسبوعياً، فإن إجمالي الوقت الموفر سيكون كبيراً جداً.
+
+خذ مثالاً آخر، أداة ضغط صور تبدو غير ملفتة للانتباه، إذا كان بإمكانها، مع الحفاظ على جودة لا تكاد تُلاحظ بالعين المجردة، ضغط حجم مجموعة من الصور إلى ثلث الحجم الأصلي، مع ضمان التصدير بنقرة واحدة، وعدم الفوضى في بنية المجلدات، وتوحيد قواعد التسمية، فإن القيمة التي تجلبها ليست فقط توفير مساحة على القرص الصلب، بل أيضاً النقل الأسرع، والرفع الأسلس، وعدد أقل من الأخطاء عند الربط مع الأنظمة الأخرى. هذه القيمة الملموسة التي تبدو عادية غالباً ما تكون أكثر موثوقية من عبارة غامضة مثل "تحسين الكفاءة".
+
+لذلك، عندما تقول إن تطبيقك ذو قيمة، من الأفضل أن تقسم هذه القيمة إلى سيناريو أو سيناريوهين محددين، وتشرح بلغة يفهمها الشخص العادي: تطبيقك يجعل الأمر الذي كان المستخدم يحتاج إلى قضاء وقت طويل فيه، والقيام بالكثير من العمل اليدوي، وتحمل مخاطر كبيرة، أمراً أسهل وأقل جهدًا.
+
+### سهولة الاستخدام، يمكن فهمه تقريباً دون النظر إلى التعليمات
+
+خاصية أخرى يسهل التقليل من شأنها لكنها مهمة للغاية، وهي أن **التطبيق الجيد عادة لا يحتاج إلى الكثير من الشرح**. عندما يفتح المستخدم التطبيق لأول مرة، يمكنه الاعتماد على الحدس لمعرفة من أين يبدأ تقريباً، وماذا سيحدث عند النقر على شيء ما، فالزر الأكبر عادة ما يقوم بالأمر الأكثر أهمية، وأهم المداخل توضع في مواقع مهمة حقاً، بدلاً من إخفائها في الطبقة الثالثة من القائمة.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image15.png)
+
+يمكنك تخيل مستخدم جديد قام للتو بتنزيل تطبيقك، ربما فتحه عشوائياً أثناء الوقوف في طابور، أو في السيارة، أو في مقهى. قد لا تكون إشارة الشبكة جيدة جداً في ذلك الوقت، وليس لديه الصبر لقراءة أي تعليمات طويلة. غالباً ما يكون الوقت الذي يتحمله في حالة الارتباك بضع ثوانٍ فقط. إذا لم يرَ أي إرشادات واضحة خلال هذه الثوانِ، ولم يعرف ماذا يفعل في الخطوة التالية، فمن السهل عليه الإغلاق مباشرة وعدم العودة أبداً.
+
+لذلك، عندما تشعر بأن منطق المنتج سلس جداً، من الأفضل أن تجد شخصاً لم يرَ تطبيقك من قبل، واطلب منه استكشافه من الصفر دون أن تتحدث. راقب فقط أين سيتوقف، وأين سيتردد، ومتى سيظهر على وجهه تعبير "ما هذا؟". إذا تم إعاقة المستخدم بمجرد دخوله بواسطة نوافذ منبثقة مفتوحة، وخيارات معقدة، وربط حسابات، فمن الصعب عليه أن يختبر حقاً القيمة التي تسعى لتقديمها.
+
+**سهولة الاستخدام، في جوهرها، هي نوع من احترام التكلفة المفروضة على المستخدم.** أنت تعترف بأمر واحد: لا أحد ملزم بقضاء الوقت في دراسة تطبيقك.
+
+### في السيناريوهات عالية التكرار أو الحرجة، سيتذكرونك بشكل طبيعي
+
+غالباً ما يمتلك التطبيق الجيد إيقاع استخدام مستقر، إما عالي التكرار أو حاسم. **المقصود بالتكرار العالي هو أنه أصبح جزءاً من روتين المستخدم اليومي، مثل تطبيق المراسلة الذي يُفتح عدة مرات يومياً**، أو أداة التنقل التي تُستخدم يومياً عند الذهاب والعودة من العمل، أو تطبيق تسجيل الحضور الذي يُسجل يومياً. أما الحاسم فيعني أنه حتى لو لم يُستخدم يومياً، فإن المستخدم سيتذكرك فوراً بمجرد مواجهة نوع معين من السيناريوهات، مثل أداة الإقرارات الضريبية، أو حاسبة ميزانية الديكور، أو أداة إدارة أسئلة المقابلات، أو مساعد قائمة مستندات التأشيرة.
+
+يمكنك أن تسأل نفسك بعض الأسئلة: متى وفي أي ظروف سيستخدم المستخدم تطبيقك حقاً؛ إذا فاته تطبيقك، هل سيشعر حقاً بعدم الراحة؛ في نفس السيناريو، كيف يدير الأمر حالياً. إذا كان هناك بديل، حتى لو كان مزعجاً، لكنه اعتاد عليه، فإن ما عليك فعله ليس فقط مساواة الميزات، بل جعله يشعر أن الانتقال إلى تطبيقك يستحق العناء حقاً.
+
+من المفاهيم الخاطئة الشائعة ربط تكرار الاستخدام مباشرة بجودة التطبيق. في الواقع، ليس ضرورياً. على سبيل المثال، إعداد تقرير نهاية العام، أو استخراج نوع معين من الشهادات، أو إجراء تحويل مالي كبير، هذه الأشياء في حد ذاتها ليست متكررة، ولكن بمجرد حدوثها، فهي من أهم الأشياء للمستخدم في تلك اللحظة. **إذا كان تطبيقك يمكنه التعامل مع هذا النوع من السيناريوهات الحرجة بشكل مستقر وسريع ويمنح المستخدم شعوراً بالثقة، فإنه يمكن أيضاً أن يُسمى تطبيقاً جيداً.**
+
+**ما يجب التحذير منه حقاً هو التطبيق الذي لا يستخدمه المستخدم بشكل متكرر، ولن يتذكرك طوعياً في أي لحظة حرجة**، وحتى إذا اختفى تطبيقك من هاتفه، فلن يتذكره بشكل غامض إلا بعد بضعة أشهر عند تنظيف الذاكرة. هذا الموقف غالباً ما يشير إلى أن تطبيقك لم يرتبط بأي سيناريو حقيقي بعمق، بل مجرد تراكم لبعض الأشياء ضعيفة التأثير على مستوى الميزات.
+
+### روح الإيثار (التفاني في خدمة الغير)
+
+عندما يبدأ الكثير من الناس في صنع المنتجات، فإنهم يفكرون في عدة أشياء في نفس الوقت: كيفية فرض الرسوم بعد الإطلاق، وكيفية رفع الأسعار، وكيفية جعل المستخدم يدفع بمجرد استخدامه أكثر قليلاً، وكيفية قفل البيانات لمنع المستخدم من المغادرة. الحسابات التجارية في حد ذاتها ليست مشكلة، ولكن إذا كان التفكير من البداية يدور بالكامل حول هذه الأمور، فمن السهل أن تصنع تطبيقاً يثير حذر المستخدم بمجرد النظر إليه: يطلب جميع أنواع الأذونات بمجرد فتحه، ونقاط الدفع في كل مكان، وتصميم الميزات ليس لجعل المستخدم ينجز المهمة بسلاسة، بل للتفكير في كيفية توجيه المستخدم إلى زر الدفع.
+
+في المقابل، التطبيقات الجيدة حقاً تحمل نوعاً من روح الإيثار البسيطة. إنها بالتأكيد ستوضح كيف ستبقى على قيد الحياة، وستقوم بإعداد طرق دفع معقولة، ولكن عند تصميم المسارات والتجربة، فإن الأولوية تكون دائماً: **كيف تجعل من الأسهل على المستخدم إكمال هذا الأمر بسلاسة، بدلاً من كيفية إضافة خطوة أخرى لخلق عقبات إضافية.** سترى أنها تستخدم طرقاً أكثر ملاءمة للمستخدم في العديد من الأماكن، مثل تقديم مطالبات واضحة في الخطوات الرئيسية، وعدم تعيين حواجز مفرطة عند التصدير والترحيل، والسماح لك بتجربة جزء من القيمة الحقيقية قبل الدفع.
+
+غالباً ما تتجلى روح الإيثار هذه في بعض تفاصيل التصميم الدقيقة. على سبيل المثال، حقول النموذج لن تطلب الكثير من البيانات غير ذات الصلة بالمهمة فقط لجمع معلومات أكثر، وتسلسل البرامج التعليمية مصمم حول الأهداف التي يريد المستخدم إنجازها، بدلاً من الشرح حول وحدات الميزات نفسها. يمكنك أن تشعر أن هذا التطبيق يساعدك بجدية في إنجاز أمر ما، بدلاً من معاملتك ككائن يتم استغلاله.
+
+هناك نقطة مهمة أخرى: **التطبيق الجيد ليس بالضرورة تطبيقاً كبيراً. يمكن أن يكون صغيراً جداً، يخدم فقط فئة معينة من الناس، أو سيناريو معيناً، أو مهمة معينة**، ولكنه يقدم أداءً رائعاً في تلك المساحة الصغيرة. مثل التطبيق المخصص لمساعدة المصممين على تصدير مسوداتهم إلى التنسيقات التي تتطلبها المطابع، أو التطبيق المخصص لمساعدة العاملين المستقلين على تنظيم معرض حالات مشاريعهم الشخصية، كل هذه النطاقات ليست كبيرة، ولكن القيمة الموجودة بداخلها ليست صغيرة على الإطلاق.
+
+## 3.2 البصيرة في الاحتياجات: **نظرية هرم الاحتياجات لماسلو**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image16.png)
+
+قبل صنع التطبيق، يقفز الكثير من الناس مباشرة إلى التفكير على مستوى الميزات: هل يمكننا إضافة شيء هنا، وهل نضيف زراً هناك. لكن ما يحدد حقاً ما إذا كان التطبيق يمكنه البقاء على قيد الحياة هو مستوى الاحتياجات البشرية الذي تلامسه، ومدى دقته في ذلك.
+
+السبب الذي يجعل نظرية هرم الاحتياجات لماسلو تُذكر مراراً وتكراراً في العديد من المجالات ليس لأنها صارمة للغاية، بل لأنها توفر إطار عمل عملياً بما فيه الكفاية. لا تحتاج إلى معاملتها كاستنتاج نفسي صارم، فقط استخدمها كإطار عمل بسيط: يساعدك في تعليق دوافع المستخدمين المختلفة على عدة مستويات واضحة نسبياً، مما يسهل عليك الحكم على الاحتياجات التي يلبيها تطبيقك، وكلما لبيت احتياجات أكثر، كان تطبيقك أفضل.
+
+تنقسم نظرية هرم الاحتياجات لماسلو عادة إلى خمس طبقات، من الأسفل إلى الأعلى وهي: الاحتياجات الفسيولوجية، واحتياجات الأمان، والانتماء والحب، واحتياجات التقدير، وتحقيق الذات.
+
+### الاحتياجات المتعلقة بالفسيولوجيا والبقاء
+
+هذه الطبقة هي الأكثر أساسية، وتتعلق مباشرة بالأكل، والنوم، وحالة البقاء نفسها. يبدو الأمر وكأنه بعيد بعض الشيء عن منتجات الإنترنت، ولكن في الواقع العديد من التطبيقات تلعب دوراً على هذا المستوى.
+
+على سبيل المثال، طلب الطعام، وشراء البقالة، وخدمات التوصيل، وحجز الغرف، وطلب سيارات الأجرة، هذه الخدمات المنزلية والتنقل النموذجية هي في جوهرها تساعد المستخدمين على حل المشاكل الأساسية مثل الأكل، والخروج، والراحة بتكلفة زمنية أقل. ومثال آخر، سجلات اللياقة البدنية، ومراقبة النوم، وتسجيل النظام الغذائي، على الرغم من أنها تبدو أقرب إلى إدارة الصحة، إلا أنه بالنسبة للكثير من الناس، فهي محاولة للحفاظ على حالة جسدية لا تخرج عن السيطرة، ويمكن أيضاً اعتبار هذا امتداداً للمستوى الفسيولوجي والبقاء.
+
+إذا كان تطبيقك يعمل على هذا المستوى، فهناك خاصية واحدة وهي: **سيكون المستخدمون حساسين جداً للاستقرار، والموثوقية، والقدرة على التنبؤ**. عدم التمكن من توصيل الطعام المطلوب، أو عدم القدرة على طلب سيارة أجرة، أو خطأ في معلومات حجز الغرفة، ستجلب ردود فعل عاطفية قوية جداً، لأن هذه المشاكل تعطل الإيقاع الأساسي للحياة مباشرة.
+
+### احتياجات الأمان واليقين
+
+تشمل احتياجات الأمان السلامة على المستوى المادي، وتشمل أيضاً الأمان الاقتصادي، والمعلوماتي، والنفسي.
+العديد من التطبيقات ذات الطابع الأدواتي تعمل في الواقع بشكل أساسي على مستوى الأمان هذا. على سبيل المثال: محاسبة الأموال، إدارة الأصول، مساعدو التأمين، أدوات قوالب العقود، مديرو كلمات المرور، أدوات النسخ الاحتياطي، أدوات حماية الخصوصية، مزامنة التخزين السحابي، واستعادة البيانات. الوعد الأساسي لهذه التطبيقات غالبًا ما يكون: مساعدتك في تقليل احتمالية الخطأ، وتوفير خطة بديلة عندما تسوء الأمور، أو على الأقل منحك شعورًا بالاطمئنان.
+
+فئة نموذجية من هذه التطبيات هي الأدوات الصغيرة المختلفة لمنع الفقدان، ومنع النسيان، ومنع الخطأ: تذكيرات الجدول الزمني، تذكيرات تناول الأدوية، تذكيرات انتهاء صلاحية المستندات الهامة، والملاحظات في النقاط الحرجة. حتى لو ذكرتك هذه التطبيقات بضع مرات فقط في اليوم، طالما أنقذتك مرة أو مرتين في اللحظات الحاسمة، فستصنفها بسرعة كأدوات يجب الاحتفاظ بها.
+
+عند تصميم هذا النوع من المنتجات، يمكنك أن تسأل نفسك سؤالًا إضافيًا: **ما هو نوع المخاطر الذي تساعد المستخدمين بالفعل على تقليله؟ هل هي مخاطر مالية، أو متعلقة بالوقت، أو بالعلاقات،** أم متعلقة بالامتثال والقانون. إذا لم تتمكن حتى أنت من توضيح ذلك، فسيجد المستخدمون صعوبة بالغة في الوثوق بك حقًا.
+
+### الشعور بالانتماء، والتواصل، والرؤية
+
+عند الصعود مستوى واحد أعلى، نصل إلى احتياجات الانتماء والحب. ببساطة، إنها الرغبة في ألا أكون وحيدًا، وأريد أن أرتبط بأشخاص معينين. هذا المستوى هو المعقل الرئيسي للتطبيقات الاجتماعية، وتطبيقات المجتمعات، ومجموعات الاهتمامات المشتركة.
+
+دائرة الأصدقاء، الدردشات الجماعية، منتديات الاهتمامات، مجتمعات الهواة، نوادي القراءة عبر الإنترنت، النقابات في الألعاب، وحتى بعض الأدوات المبنية حول هويات محددة، مثل مجموعات الآباء الجدد، التعاون المتبادل بين الطلاب الدوليين، ومنصات الشكوى المجهولة داخل الصناعة، كلها توفر في جوهرها نوعًا من الشعور بالانتماء: هناك مجموعة من الأشخاص مشابهين لي، نناقش مواضيع مشابهة، ونشكو من صعوبات مشابهة، ونشارك تجارب مشابهة.
+
+بعض الأدوات تبدو ظاهريًا كتطبيقات وظيفية، لكن ما يحافظ على المستخدمين حقًا هو غالبًا هذا المستوى من الاحتياجات. على سبيل المثال، مشاركة الجميع لتقدم ادخارهم في تطبيقات المحاسبة، لوحات المتصدرين ودوائر تسجيل الحضور في تطبيقات الجري، ومجموعات الإشراف المتبادل في تطبيقات التعلم. هذه الوحدات الاجتماعية التي تبدو كقيمة مضافة، تربط في الواقع المستخدم بتطبيقك من خلال هويتك كجزء من مجموعة معينة.
+
+إذا كان تطبيقك يحاول الوقوف على هذا المستوى، فلن يكون المحتوى وحده كافيًا، بل يجب أن تفكر في: **لماذا يجب أن يشعر المستخدم أن الأشخاص هنا هم من نوعه، وهل هو مستعد لترك أثر هنا، والتفاعل بشكل طفيف ولكن حقيقي مع الآخرين**. بخلاف ذلك، فإن ما تبنيه هو مجرد أداة بث أحادية الاتجاه.
+
+### الاحترام، وتقدير الذات، والشعور بالإنجاز
+
+عند الصعود مستوى واحد أعلى، نصل إلى احتياجات الاحترام وتقدير الذات. فالإنسان لا يريد فقط أن يُقبل، بل يبدأ في مرحلة ما بالاهتمام بما إذا كان يُعتبر شخصًا جيدًا هنا، وهل تمت رؤيته وتقديره، وهل هناك من يعرف ما أنجزه.
+
+كمية كبيرة من ميزات تسجيل الحضور، والشارات، ولوحات المتصدرين، والألقاب، وأنظمة الإنجاز، تعمل في الواقع على هذا المستوى. في تطبيقات التعلم، إكمال عدد معين من الدورات يمنحك لقبًا، وفي تطبيقات الرياضة، تحقيق الهدف يمنحك شهادة، وتمنح منصات الإبداع مؤلفيها هويات بمستويات مختلفة، ويكون هناك تمييز واضح للمؤلفين ذوي المحتوى عالي الجودة في المجتمعات.
+
+هنا من السهل الوقوع في سوء فهم: الاعتقاد بأن إضافة مجموعة من الشارات والنقاط والألقاب ستشجع المستخدمين. ما يريده المستخدمون ليس زخرفات مبالغًا فيها، بل أن يتم تسجيل جهودهم الحقيقية وأخذها على محمل الجد. إذا كان نظام الإنجاز الذي صممته منفصلاً تمامًا عن الاستثمار الحقيقي للمستخدم، مثل الحصول على لقب "خبير" بمجرد النقر بضع مرات، فإن هذا التحفيز سيفشل بسرعة، وقد يجعله يبدو رخيصًا.
+
+لذلك على هذا المستوى، المفتاح ليس ما إذا كنت قد بنيت نظام تحفيز أم لا، بل يكمن في: **هل وفر تطبيقك للمستخدم منصة يمكنه التراكم عليها، بحيث يمكنه أن يرى بوضوح تطوره من مبتدئ إلى مستخدم ماهر**، وفي النقاط الحاسمة، منحه شعورًا طقوسيًا بأن هذه الخطوة تستحق أن تُسجل.
+
+### تحقيق الذات وتجاوزها
+
+المستوى الأعلى من الهرم يشير إلى الشخص الذي أريد أن أكونه، وكيف أريد المساهمة بجزء من ذاتي. يبدو هذا مجردًا، لكن في السيناريوهات المحددة، غالبًا ما يكون له تعبيرات عملية للغاية.
+
+على سبيل المثال، أدوات الإبداع: الكتابة، الرسم، إنتاج الموسيقى، تحرير الفيديو، وإدارة مشاريع البرمجة، تبدو ظاهريًا أنها توفر قدرات تقنية، لكنها تلبي في الخلفية رغبة المستخدم في خلق شيء ينتمي إليه. ومثال آخر، منصات التعلم طويلة المدى، وأدوات التخطيط المهني، وأدوات بناء العادات، فهي لا تخدم مهارة واحدة فحسب، بل تخدم هدفًا أطول أمدًا للنمو الذاتي.
+
+هناك أيضًا رغبة في جعل الآخرين أفضل. الكثير من الأشخاص يستخدمون منصات مشاركة المعرفة، ومجتمعات الأسئلة والأجوبة، وتطبيقات العمل الخيري، وأدوات الإبداع التعاوني، ليس فقط لكسب بعض النقاط أو الزيارات، بل لأن مساعدة الآخرين ودفع مشروع إلى الأمام يمنحهم شعورًا بأنهم يفعلون شيئًا ذا معنى، وهذا أيضًا جزء من تحقيق الذات.
+
+عندما يلمس تطبيقك هذا المستوى حقًا، فغالبًا ما سيتمتع بدرجة عالية جدًا من الاحتفاظ بالمستخدمين: حتى لو لم تكن واجهته الأجمل، ووظائفه ليست الأكثر اكتمالًا، سيبقى المستخدمون هنا، لأن **هذا التطبيق قد أسس اتصالاً أعمق مع من أكون، وماذا أفعل**.
+
+أحد فوائد استخدام هرم ماسلو كمنظور للمنتج هو أنه يساعدك على تجنب انحيازين شائعين.
+
+**الانحياز الأول، هو التركيز فقط على مستوى خاطئ.** على سبيل المثال، إذا كنت تبني أداة لمساعدة المستخدمين على تخزين الملفات بأمان، فأنت تقف في جوهرك على مستوى الأمان، لكنك تقلد بلا هوادة المنتجات الاجتماعية، وتكدس واجهتك بميزات الإعجاب والتعليقات ولوحات المتصدرين، والنتيجة هي أنك لن تستحوذ على عقول المستخدمين من المنتجات الاجتماعية، بل ستجعل من يريدون ببساطة أداة تخزين موثوقة يشعرون بأنك لا تؤدي دورك كما ينبغي.
+
+**الانحياز الثاني، هو تجاهل العلاقة التسلسلية بين المستويات.** عندما لا يحصل الشخص حتى على تجربة استخدام مستقرة كأساس، فمن الصعب عليه أن يسعى لتحقيق ذاته لديك بجدية. على سبيل المثال، إذا كان التطبيق يتعطل بشكل متكرر، وتضيع البيانات بين الحين والآخر، فحتى لو منحته الكثير من الشارات ومنحنى النمو، فلن يستثمر المستخدم بصدق. على العكس من ذلك، إذا كنت متقنًا في المستويات الأساسية، ثم تضيف تدريجيًا قيم المستويات الأعلى، سيجد المستخدمون أنه من الأسهل تسلق السلم معك.
+
+في التصميم العملي، يمكنك التحقق الذاتي على النحو التالي:
+
+- اسأل نفسك أولاً: ما هو المستوى الأهم والأكثر جوهرية من الاحتياجات الذي يلبيه تطبيقي، يُسمح باختيار مستوى واحد فقط
+- ثم اسأل: فوق هذا المستوى الأساسي، هل لدي فرصة للامتداد بشكل طبيعي إلى المستوى الأعلى، بدلاً من إلصاق مفهوم بشكل مصطنع
+- أخيرًا، انظر: في المستويات الأدنى من مستواك المستهدف، هل لديك نقاط ضعف واضحة، أو حتى تعيق المستخدمين
+
+عندما تتمكن من الإجابة بوضوح على هذه الأسئلة، فإن فهمك لما يريده المستخدمون حقًا لن يقتصر فقط على الشعور الضبابي بأنهم قد يعجبون به، مما يساعدك على بناء تطبيقات أفضل.
+
+## 3.3 التصنيف حسب نوع المستخدم: الفروق بين تطبيقات C-end وتطبيقات B-end
+
+بعد إطلاق التطبيق، ستكتشف بسرعة أمرًا مهمًا آخر: التعامل مع المستخدمين الأفراد العاديين يختلف تمامًا عن التعامل مع المستخدمين من الشركات أو المؤسسات، فهما قواعد لعبة مختلفة تمامًا. يبدو كلاهما أنهما يُسميان "مستخدمين"، لكن اهتماماتهما الرئيسية مختلفة تمامًا.
+
+- C-end (Consumer End): يشير إلى "جهة المستهلك"، وجوهره هو المستخدم الفردي العادي.
+  على سبيل المثال، التطبيقات التي نستخدمها يوميًا مثل WeChat، وDouyin، وMeituan Waimai، مستخدمو هذه التطبيقات هم أفراد مستقلون، وهذا النوع من السيناريوهات التي تقدم خدمات للأفراد يُسمى أعمال C-end.
+- B-end (Business End): يشير إلى "جهة المؤسسة"، وجوهره هو المستخدمون من الشركات أو المؤسسات أو المنظمات.
+  على سبيل المثال، تطبيقات مثل DingTalk (أدوات التعاون المؤسسي) المستخدمة في الشركات، وبرامج المالية (مثل Yonyou، وKingdee)، وأنظمة نقاط البيع في متاجر التجزئة، مستخدمو هذه المنتجات هم موظفو الشركات أو الفرق أو المؤسسة بأكملها، وتخدم احتياجات التشغيل والإدارة والإنتاج الخاصة بالشركات، وهذا النوع من السيناريوهات التي تقدم خدمات للمنظمات يُسمى أعمال B-end.
+
+### تطبيقات C-end: موجهة لحياة الأفراد العاديين، ومشاعرهم، وعاداتهم
+
+تطبيقات C-end موجهة للمستخدمين الأفراد، وهي مدمجة في الحياة اليومية لكل شخص. تشمل الأنواع الشائعة تطبيقات المحتوى، والأدوات، والترفيه، والتواصل الاجتماعي، والتعلم، وغيرها.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image17.png)
+
+تطبيقات المحتوى، مثل قراءة الأخبار، ومنصات الفيديو القصير، وأدوات البودكاست. مهمتها الأساسية عادةً هي السماح للمستخدمين بتصفية المعلومات التي تهمهم من بين كميات هائلة في وقت محدود. وفي الوقت نفسه، يجب ضمان وجود أشياء جديدة باستمرار لجذب المستخدمين للعودة.
+
+تطبيقات الأدوات، مثل المحاسبة، وقوائم المهام، وإدارة الملفات، والجدولة. غالبًا ما توفر هذه التطبيقات حلاً أسهل استخدامًا من الطرق التقليدية في مهمة محددة، وتعتبر جزءًا من البنية التحتية التي يستخدمها المستخدمون يوميًا.
+
+تطبيقات الترفيه، بما في ذلك الألعاب، والتفاعلات الخفيفة، والأدوات الممتعة. ما توفره للمستخدمين هو الاسترخاء والبهجة العاطفية، ومعيار قياس مدى جودة استخدامها يعتمد بشكل أكبر على ما إذا كان المستخدمون على استعداد لقضاء الوقت فيها باستمرار.
+
+تطبيقات التواصل الاجتماعي تدور حول التواصل والتفاعل بين الأشخاص، بينما تركز تطبيقات التعلم على تحسين قدرات معينة، مثل حفظ الكلمات، وحل الأسئلة، وتسجيل الحضور للقراءة، وإدارة الدورات.
+
+على الرغم من أن هذه التطبيقات تختلف في أنواعها، إلا أنها تشترك في عدة نقاط تركيز مشتركة.
+
+**أولاً، نمو المستخدمين.** وهو كيفية جعل المزيد من الأشخاص يجربون تطبيقك لأول مرة. يتضمن ذلك القنوات، ونصوص الترويج، وتحفيز المستخدمين، ولكن الشرط المسبق هو دائمًا: يجب أن يكون لديك أولاً سيناريو استخدام واضح بما فيه الكفاية. بخلاف ذلك، فإن أساليب النمو الأقوى لن تجلب سوى موجة قصيرة الأجل من الفضول.
+
+**ثانيًا، الاحتفاظ والعودة.** ليس الأمر يتعلق فقط بزيارة شخص ما، بل بمدى استعداده للبقاء والعودة. تطبيق المحتوى، إذا لم يتمكن من ضمان إنتاج محتوى يهم المستخدمين باستمرار، سيتم استبداله بسرعة؛ وتطبيق الأدوات، إذا لم يساعد المستخدمين حقًا في إكمال مهامهم في الاستخدامات الحرجة القليلة، سيجد صعوبة في بناء عادات استخدام طويلة الأمد. يمكنك مراقبة معدلات الاحتفاظ في اليوم الأول، واليوم السابع، واليوم الثلاثين لتحديد عدد الأشخاص الذين أدخلوك حقًا في روتين حياتهم.
+
+**ثالثًا، التحويل والدفع.** لماذا يرغب المستخدمون في الدفع، لا يكون ذلك عادةً لأنك جعلت النسخة المجانية سيئة، بل لأنهم بعد الحصول على جزء من القيمة منك، يرون أن الميزات المدفوعة يمكن أن تجلب مستوى أعلى من الراحة. مثل حصص استخدام أعلى، وقدرات تعاون أقوى، وقوالب أكثر احترافية، وأداء أكثر استقرارًا.
+
+**رابعًا، قابلية المشاركة والانتشار.** العديد من منتجات C-end قادرة على الانتشار بسرعة لأنها تحمل بطبيعتها خصائص المشاركة أثناء الاستخدام. على سبيل المثال، إنشاء صورة، أو مقطع فيديو، أو نص، فمن أجل تحقيق هدفه، يحتاج المستخدم في حد ذاته إلى إرسال النتيجة إلى الآخرين. في هذه العملية، طالما قمت بجعل العلامة التجارية تظهر بشكل طبيعي وغير مزعج، يمكنك الحصول على نوع من التسويق الشفهي.
+إحدى الطرق البسيطة للحكم على ما إذا كان الطلب الحقيقي في تطبيقات C-end (المستهلك) موجودًا، هي معرفة ما إذا كان المستخدمون على استعداد لتطوير عادات صغيرة حوله. على سبيل المثال، الاستعداد لفتحه وإلقاء نظرة عليه يوميًا، وربطه بإيقاع حياتهم، والسماح له بالمشاركة في توثيق بعض اللحظات المهمة. على العكس من ذلك، إذا كان المستخدمون يدخلون فقط بسبب حدث أو إعلان، ويغادرون بعد الاستخدام لمرة واحدة، ولا يعودون تقريبًا، فيمكن الحكم بشكل أساسي أن ما حللته ربما كان مجرد فضولهم المؤقت، وليس احتياجًا طويل الأمد.
+
+### تطبيقات B-end: الكفاءة والتكلفة والتحكم في المخاطر الموجهة للمؤسسات
+
+تطبيقات B-end موجهة للشركات والفرق والمؤسسات أو الأقسام. تشمل الأنواع الشائعة ERP (نظام إدارة الموارد)، وCRM (إدارة علاقات العملاء)، وأدوات العمل التعاوني، ومختلف أدوات SaaS، وأنظمة الإدارة الداخلية للقطاعات، وغيرها.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image18.png)
+
+يكمن الاختلاف الأكبر بين هذه التطبيقات وتطبيقات C-end في أنها تحتاج إلى تلبية احتياجات أدوار متعددة في نفس الوقت. قد يكون المستخدمون هم الموظفين في الخطوط الأمامية، بينما صانعو القرار هم المديرون أو الرؤساء، وقد يكون مالكو البيانات هم المؤسسة نفسها، وقد تتضمن عمليات الموافقة أقسامًا متعددة. يجب عليك جعل التطبيق سهل الاستخدام للمستخدمين، **وجعل صانعي القرار يرون** **عائد الاستثمار**، **وكذلك منح المؤسسة بأكملها شعورًا بالأمان من حيث المخاطر والامتثال.**
+
+هناك العديد من نقاط التركيز الأساسية لتطبيقات B-end.
+
+**أولاً، تحسين الكفاءة.** لا يشير هذا فقط إلى توفير وقت شخص واحد، بل يعني تقليل الوقت المستغرق في العملية بأكملها، وخفض تكاليف التعاون، وتقليل حلقات التواصل. على سبيل المثال، كان الطلب في الماضي يمر عبر خمسة أنظمة من الإنشاء إلى الشحن، والآن يمكن أن يتدفق بالكامل من خلال مدخل موحد، وهذا النوع من التحسين ملموس جداً للشركات.
+
+**ثانياً،** **خفض التكاليف** **.** يشمل ذلك تكاليف العمالة، وتكاليف التدريب، وتكاليف صيانة النظام، وما إلى ذلك. إذا كان النظام يبدو قويًا جدًا من حيث الوظائف، لكنه يتطلب استثمارًا كبيرًا في التدريب وموارد الصيانة ليعمل بصعوبة، فستبدو نسبة تكلفته إلى فائدته منخفضة بالنسبة للعديد من الشركات الصغيرة والمتوسطة. بدلاً من ذلك، فإن أدوات SaaS التي تبدو أخف، ولكن يمكن البدء في استخدامها بسرعة ورؤية عوائدها بسرعة، هي التي تميل إلى البقاء في العالم الحقيقي.
+
+**ثالثاً، التحكم في المخاطر وضمان الامتثال.** في العديد من سيناريوهات B-end، هناك متطلبات عالية جدًا للامتثال وإمكانية التتبع، كما هو الحال في قطاعات التمويل، والرعاية الصحية، والتصنيع، والحكومة، وغيرها. غالبًا ما يضحي تطبيق B-end الجيد بقليل من حرية الاستخدام في مقابل إدارة أذونات أكثر وضوحًا، وتسجيل أكثر دقة للسجلات، وسلسلة موافقات أكثر وضوحًا. بالنسبة للمستخدمين كأفراد، قد يكون هناك مساحة أقل للتصرف بشكل عفوي، ولكن للمؤسسة ككل، هذا هو المكان الذي تكمن فيه القيمة.
+
+**رابعاً، إدارة الأذونات وحدود المسؤولية.** من يستطيع رؤية ماذا، ومن يستطيع تغيير ماذا، ومن المسؤول عن أي نتيجة، هذه الأسئلة غالبًا ما تكون محورية في تصميم أنظمة B-end. بمجرد الفشل في هذا الجانب، سيسبب ذلك متاعب كبيرة للمراجعات والنزاعات والمساءلة اللاحقة. لذلك، للحكم على ما إذا كان تطبيق B-end تطبيقًا جيدًا، لا يمكنك الاعتماد فقط على ما إذا كانت واجهته مريحة للعين، بل يجب عليك أيضًا التحقق مما إذا كان نموذج الصلاحيات الخاص به دقيقًا، وسهل الفهم والصيانة.
+
+من الصناعة إلى التطبيق، يمكنك التفكير بهذه الطريقة: **اختر صناعة لديك بعض المعرفة بها، مثل التعليم والتدريب، أو التجارة الإلكترونية، أو التصنيع، أو التمويل، أو الرعاية الصحية**، ثم انظر في التشغيل اليومي لهذه الصناعة، ما هي العمليات التي تعتمد بشكل خاص على العمالة اليدوية، وما هي المعلومات التي غالبًا ما تكون مبعثرة عبر أنظمة متعددة أو محادثات خاصة متعددة، وما هي الروابط التي يكون فيها معدل الخطأ مرتفعًا جدًا ولكن يصعب اكتشافه على الفور. من خلال التركيز على هذه الجوانب، يمكنك غالبًا تصميم بعض الأدوات الصغيرة والمركزة للغاية.
+
+على سبيل المثال، في صناعة التعليم والتدريب، نقطة دخول تطبيق محددة جدًا هي إنشاء أداة لجدولة الدورات التدريبية وتحسين استخدام الفصول الدراسية. لا تحتاج إلى استبدال النظام الأكاديمي بالكامل، فقط ركز على تسهيل قيام المعلمين الإداريين بترتيب المعلمين والفصول الدراسية وأوقات الدورات، وتجنب التعارضات تلقائيًا، وتقديم أفضل مجموعة، وتصدير جدول زمني يمكن للجميع فهمه. هذا البند وحده كافٍ لتوفير الكثير من الوقت المستغرق في التواصل المتكرر والتعديل.
+
+في صناعة التجارة الإلكترونية، هناك طلب شائع وهو إدارة الطلبات متعددة القنوات. قد يكون لدى التجار متاجر على منصات مختلفة في نفس الوقت، وتكون معلومات الطلبات مبعثرة في كل مكان. إذا كان بإمكانك توفير أداة صغيرة تجمع طلبات المنصات المختلفة وتعالج معلومات ما بعد البيع والخدمات اللوجستية بشكل موحد، فستكون قد حللت بالفعل نقطة ألم كبيرة في عملياتهم اليومية المتكررة.
+
+في قطاع التصنيع، لا تزال العديد من الشركات تعتمد على السجلات الورقية أو Excel لتتبع تقدم الإنتاج. يمكنك البدء بأداة بسيطة لتتبع أوامر العمل لمساعدة مديري المواقع على رؤية حالة كل عملية بشكل أكثر حدسية، بدلاً من الاعتماد على طرح الأسئلة وإجراء المكالمات الهاتفية طوال اليوم.
+
+في قطاع التمويل أو الرعاية الصحية، قد لا تكون نقطة دخولك هي الأعمال الأمامية، بل يمكن أن تكون أداة مساعدة لفحص الامتثال، أو إنشاء قوالب المستندات، أو إدارة قوائم مواد الموافقة. طالما يمكنك توضيح كيفية جعل مهمة معينة لمنصب معين أكثر قابلية للتحكم في عملية معينة، فهذا يعتار اتجاهًا يستحق المحاولة.
+
+غالبًا ما يكون لدى التطبيقات في الصناعات المذكورة أعلاه منتجات لشركات ناضجة يتم الترويج لها، وهذا في الواقع يوفر لك مسار مرجعي جيد: يمكنك البحث بنشاط على الإنترنت باستخدام الكلمات الرئيسية "الصناعة المقابلة + الطلب الأساسي + المنتج" (مثل "نظام الجدولة الأكاديمية لصناعة التعليم والتدريب"، "أداة إدارة الطلبات متعددة القنوات للتجارة الإلكترونية"). لن تجد مواقع الويب الرسمية للمنتجات ومقدمات الوظائف فحسب، بل يمكنك أيضًا رؤية تقييمات المستخدمين وحالات الصناعة وحتى مقاطع عرض المنتج. يمكن لهذه المعلومات مساعدتك في الفهم البديهي لكيفية حل المنتجات الناضجة لنفس المشكلات، وتجنب تكلفة التجربة والخطأ للبدء من الصفر.
+
+## 3.4 التحسين بناءً على بيانات المستخدم: من "أعتقد أنه جيد" إلى "المستخدم يعتقد أنه جيد"
+
+بعد إنشاء التطبيق، من أكثر الأوهام شيوعًا التي يمكن أن تقع فيها: كلما استخدمته أكثر، أصبح أكثر سهولة بالنسبة لك، وتشعر أن كل شيء معقول، وتفترض أن المستخدمين سيشعرون بنفس الشيء. في الواقع، كلما كان المنتج من كتابتك، زادت سهولة تجاهل مشاكل الآخرين. لكي ينمو التطبيق تدريجيًا من عمل "يشعر بالرضا عن الذات" إلى تطبيق جيد حقًا، يجب أن تتعلم إدخال ملاحظات المستخدمين الحقيقية في الحلول.
+
+### تصميم آلية بسيطة للملاحظات، لإعطاء المستخدمين منفذًا للتعبير
+
+لا تحتاج إلى البدء بإنشاء أنظمة خدمة عملاء ومنصات بيانات معقدة، يمكنك البدء ببعض الطرق البسيطة جدًا.
+
+**مجموعات الدردشة هي الوسيلة الأكثر مباشرة.** إذا كان لديك بالفعل مجموعة صغيرة من المستخدمين، يمكنك دعوة الجميع لنشر المشاكل والأفكار التي يواجهونها أثناء الاستخدام في المجموعة. ما يجب عليك فعله هو الرد بجدية، والتسجيل، والتلخيص بشكل دوري، بدلاً من الدفاع أو الجدال في المجموعة. كلما تمكنت من خلق جو من الصراحة في هذه المجموعة الصغيرة، أصبحت الملاحظات التي تجمعها لاحقًا أكثر قيمة.
+
+الاستبيانات مناسبة للاستخدام عندما تحتاج إلى **جمع كمية كبيرة من المعلومات المهيكلة لمرة واحدة**، مثل بعد تحديث إصدار معين، عندما ترغب في معرفة شعور الجميع تجاه بعض الوظائف المحددة. إذا كنت ترغب في أن يكون معدل الملء مرتفعًا، فمن الأفضل ألا يكون الاستبيان طويلاً، ويجب أن تكون الأسئلة محددة قدر الإمكان، مثل ما هي الوظيفة التي تستخدمها أكثر خلال هذه الفترة، وفي أي خطوة واجهت أكبر عدد من المشاكل، بدلاً من السؤال بشكل عام عن شعورك تجاه هذا التطبيق بشكل عام.
+
+النوافذ المنبثقة بعد الاستخدام هي طريقة شائعة أخرى، على سبيل المثال، بعد أن يكمل المستخدم مهمة، استخدم مربعًا قصيرًا جدًا للتقييم والاقتراح، وسؤاله عما إذا كانت هذه التجربة سلسة. في بعض الأحيان، يكون التقييم الرقمي البسيط كافيًا لمساعدتك في الحكم على ما إذا كانت هناك مشكلة واضحة في عملية معينة.
+
+المقابلات الفردية تكلفتها عالية، ولكن العائد غالبًا ما يكون أكبر. يمكنك **اختيار عدد قليل من المستخدمين من أنواع مختلفة، وطلب قضاء عشرين إلى أربعين دقيقة معهم**، والتحدث بالتفصيل عن عاداتهم في الاستخدام اليومية، والسماح لهم بالشرح أثناء التشغيل لماذا رأوه وما شعروا به. كان هناك مؤسس شركة يعقد أكثر من عشر اجتماعات يوميًا للتحدث مع المستخدمين لجمع اقتراحاتهم، وقضاء الوقت في فهم احتياجات المستخدمين لن يكون أبدًا أمرًا سيئًا.
+
+### تعلم كيفية استخراج ثلاثة أنواع من المعلومات من الملاحظات الفوضوية
+
+عادة ما تكون ملاحظات المستخدمين مختلطة، ومن الصعب رؤيتها بوضوح في لمحة. يمكنك محاولة تقسيمها إلى ثلاث فئات: **الأخطاء البرمجية (bugs)، مشاكل تجربة المستخدم، الاحتياجات الجديدة.**
+
+**الأخطاء البرمجية (bugs) تعني أنك قلت إن سلوكًا معينًا سيحدث، ولكن في ظل ظروف معينة لم يحدث على الإطلاق، أو حدث سلوك خاطئ.** على سبيل المثال، فشل التحميل، أو التوقف المفاجئ، أو عدم استجابة الزر، أو النتيجة غير الصحيحة بوضوح. بالنسبة لهذه المشاكل، ما يجب عليك فعله هو إعادة إنتاج الخطأ وإصلاحه في أسرع وقت ممكن، وإبلاغ المستخدمين المتأثرين بشكل استباقي بعد الإصلاح، لإعلامهم بأنك تأخذ هذه المشاكل على محمل الجد.
+
+**مشاكل تجربة المستخدم تكمن في عدم اختيار المسار الأكثر سلاسة في طول العملية، أو موقع التشغيل، أو التعبير النصي.** على سبيل المثال، يتردد المستخدم دائمًا عند زر معين، ولا يعرف ما إذا كان النقر عليه سيؤدي إلى نتائج لا رجعة فيها؛ وظيفة معينة مهمة جدًا، لكنها توضع في ركن غير واضح؛ بعض الإعدادات الافتراضية تعاكس عادات معظم الناس، مما يجبرهم على القيام بخطوة إضافية في كل مرة. يتطلب هذا النوع من الملاحظات منك الجمع بين البيانات والملاحظة لتحديد ما إذا كنت ستقوم بإجراء تغيير، وإلى أي مدى يجب أن يكون التغيير مناسبًا.
+
+**الاحتياجات الجديدة تعني أن المستخدمين يبدأون في اقتراح بعض الوظائف والسيناريوهات التي لم تفكر فيها في الأصل.** بعض الاحتياجات الجديدة تستحق النظر فيها بجدية، مثل تنسيقات التصدير المتعددة، وقدرات العمل الجماعي، والتكامل مع الأدوات الشائعة الأخرى. ولكن يجب أيضًا الانتباه إلى أنه ليس كل ما يقترحه المستخدمون يجب عليك فعله. ما يجب عليك فعله حقًا هو التمييز، وما إذا كانت هناك مشاكل مشتركة وراء هذه الاحتياجات الجديدة، وما إذا كانت تتوافق مع المجموعة التي كنت ترغب في خدمتها في الأصل وتلك المهمة الأساسية. خلاف ذلك، سيكون من السهل عليك أن يتم سحبك في اتجاهات مختلفة بواسطة مجموعة من الاحتياجات المبعثرة، وفي النهاية تتحول إلى منتج يريد القيام بكل شيء، ولكنه لا يتقن أي شيء.
+
+يمكنك تطوير عادة: وضع علامة على كل ملاحظة، توضح ما إذا كانت تنتمي إلى خطأ برمجي (bug)، أو مشكلة تجربة مستخدم، أو حاجة جديدة. قم بتلخيص هذه العلامات بشكل دوري لمعرفة نوع المشاكل التي تتركز في أي وظائف أو عمليات. بهذه الطريقة، لن تقوم فقط بالإصلاح بشكل سلبي، بل ستكون قادرًا على التكرار بشكل واعٍ حول المشاكل عالية التكرار.
+
+### استخدم ثلاثة مؤشرات بسيطة لتحديد ما إذا كنت ستستثمر أم لا
+
+في ظل الموارد المحدودة، تحتاج أيضًا إلى بعض المؤشرات البسيطة والفعالة لتحديد ما إذا كان هذا التطبيق يستحق استثمارك طويل الأمد.
+
+**أولها هو الاحتفاظ (Retention).** الاحتفاظ لا يعني النظر إلى عدد الأشخاص الذين فتحوا التطبيق في يوم معين، بل يعني النظر إلى **عدد المستخدمين الذين لا يزالون يستخدمون التطبيق باستمرار خلال فترة زمنية**. يمكنك إجراء إحصاء تقريبي جدًا، مثل عدد الأشخاص الذين استخدموا التطبيق مرة واحدة على الأقل خلال أسبوع بعد التنزيل، وعدد الأشخاص الذين عادوا خلال شهر. إذا كان معظم المستخدمين قد استخدموه مرة أو مرتين فقط ولم يعودوا أبدًا، فهذا يشير إلى أن تطبيقك لم يُظهر لهم قيمة كافية في المرحلة المبكرة، أو أن حاجز الاستخدام مرتفع جدًا.
+**الثاني هو تكرار الزيارات العائدة.** بالنسبة لأولئك الذين لم يقوموا بإلغاء تثبيت تطبيقك، كم مرة سيعودون بالضبط. الأداة التي يمكن استخدامها يوميًا والتطبيق الذي لا يُذكر إلا مرة واحدة كل ربع سنة، لهما مواقع منتجات مختلفة، وعليك استخدام معايير مختلفة لقياسهما. ولكن في كلتا الحالتين، يجب أن تكون قادرًا على تقديم توقع معقول لإيقاع الاستخدام، ثم مقارنته بالبيانات الفعلية لمعرفة ما إذا كان هناك انحراف كبير. إذا كانت الترددات أعلى من توقعاتك، فهذا يشير إلى أن القيمة قد تتجاوز التوقعات؛ وإذا كانت الترددات أقل بكثير من المتوقع، فيجب أن تعيد التفكير فيما إذا كنت لم تلتقط السيناريو بدقة، أو أن تجربة الاستخدام في مكان ما تجعل المستخدم يشعر بالتعب.
+
+**الثالث هو الرغبة في التوصية.** هل هناك من يرغب في التوصية بتطبيقك للآخرين بشكل استباقي. يمكن ملاحظة هذا الأمر بعدة طرق: على سبيل المثال، بعد أن يكمل المستخدم مهمة بسلاسة خاصة، قدم نقطة دخول طبيعية للمشاركة، وشاهد كم شخصًا يستخدمها فعليًا؛ أو انظر في المجموعات ما إذا كان هناك من يروج لمنتجك تلقائيًا؛ أو اسأل سؤالًا واحدًا أثناء مقابلات المستخدمين على نطاق صغير: "إذا واجه شخص تعرفه مشكلة مماثلة، هل ستوصي بأداتي له؟". عادةً ما تكون الرغبة في التوصية أكثر دلالة من مجرد درجة رضا بسيطة، لأن التوصية هي سلوك يحمل ضمانًا شخصيًا بسمعة الموصِي، ولن يرغب المستخدم في تقديم تطبيقك لأصدقائه إلا إذا شعر أنك ساعدته حقًا بشكل كبير.
+
+عندما تنظر إلى هذه المؤشرات الثلاثة معًا مع تعليقات المستخدمين التي تمت مناقشتها سابقًا، يمكنك بشكل عام الحكم على الحالة التي يمر بها تطبيقك حاليًا. ربما تكون الوظائف غير مكتملة بعد، ولكن هناك مجموعة من الأشخاص الذين بقوا بالفعل، وسيستخدمونك بشكل متكرر في سيناريوهات محددة، ومثل هذا التطبيق يستحق الاستمرار في الاستثمار والصقل. على العكس من ذلك، إذا قمت بإصلاح العديد من الأخطاء، وتراكمت العديد من الوظائف الجديدة، لكن معدل الاحتفاظ وتكرار الزيارات العائدة لا يرتفعان، ويكاد لا يكون هناك من يوصي بشكل استباقي، ففي هذا الوقت يجب أن تفكر بهدوء، هل يجب تقليص النطاق، والعودة إلى سيناريو النواة الأولي، أو حتى النظر في تغيير الاتجاه.
+
+# 4. في أي خطوة، وكيف تستخدم AI بشكل معقول لتضخيم القيمة؟
+
+بمجرد أن تبدأ في العمل الجاد على تطبيق ما، ستواجه قريبًا إغراءً شائعًا: هل يمكنني إضافة المزيد من AI إليه؟ يكمن سبب قوة هذا الإغراء في أنك ترى كل يوم أنواعًا مختلفة من الدعاية: AI يمكّن صناعة معينة، AI يعيد هيكلة عملية معينة بالكامل، AI يساعدك على حل كل شيء بنقرة واحدة. بمرور الوقت، من السهل جدًا أن تحول مشكلة بسيطة الأصل إلى شعار مليء بالدعاية، ثم تكدس بعض استدعاءات النماذج في حزمة التقنيات، وتشاهد أموال حسابك تنفد تدريجيًا.
+
+على الرغم من أن هذا البرنامج التعليمي يعلم كيفية تطوير تطبيقات AI الأصلية، فإن الحديث عن هذا الموضوع يبدو وكأنه يضر بمصدر رزقي؛ ولكن بالنسبة لتطبيق صغير أو منتج في بداياته، **أخطر شيء ليس عدم استخدام AI، بل استخدام AI من أجل AI**. يمكنك في الأصل صنع أداة بسيطة ولكن موثوقة، لكنك تنجذب بواسطة قدرات جديدة متنوعة، وتضيف باستمرار وظائف تبدو ذكية، وفي النهاية تجعل اتجاهًا كان يمكن تطبيقه فعليًا مكلفًا ومعقدًا، دون أي تحسن واضح في القيمة. المشكلة الأساسية التي ستحلها هذه الفصل هي التوضيح بوضوح: في أي مرحلة، وفي أي روابط، وبأي طريقة يمكن لـ AI أن يساعدك حقًا في تضخيم قيمة تطبيقك.
+
+## 4.1 لا تستخدم AI من أجل AI
+
+للحكم على ما إذا كنت تستخدم AI من أجل AI دون أن تدرك ذلك، طريقة عملية جدًا هي أن تجبر نفسك على الإجابة بجدية على سؤالين قبل كل مرة تفكر فيها في إضافة وظيفة AI معينة.
+
+**السؤال الأول هو: بدون AI، هل هذا التطبيق قائم أيضًا.** أي، إذا قمت بإزالة جميع قدرات AI مؤقتًا، هل الشيء الذي تفعله في حد ذاته هو شيء ذو قيمة، وهل لدى المستخدمين احتياجات فعلية، وهل هم على استعداد لاستثمار وقت حقيقي في هذا الأمر يوميًا وأسبوعيًا وشهريًا.
+
+قد يبدو هذا الكلام عكس التيار إلى حد ما، لأنه في الوقت الحالي تقريبًا جميع أوصاف المنتجات تضع AI في مكان بارز جدًا، وكأنه بدون AI لا يمكن اعتباره أداة حديثة. ولكن إذا كان تطبيقك لا يستطيع الصمود على الإطلاق في غياب AI، فهذا في كثير من الأحيان لا يشير إلى أن تقنيتك ليست متقدمة بما فيه الكفاية، بل إلى مشكلة أعمق: الاحتياج الذي التقطته قد لا يكون مؤلمًا أو ملحًا، أو ربما لا وجود حقيقي له على الإطلاق.
+
+تخيل أنك تريد صنع أداة لمساعدة الأشخاص على تنظيم قائمة المهام. إذا كانت نقطة التمييز الرئيسية لديك هي: إضافة بعض المطالبات التي أنشأها النموذج إلى قائمة المهام، مثل إنشاء عناوين تلقائيًا، وتصنيف تلقائي، وإكمال الوصف تلقائيًا. ولكن المستخدمين عند كتابة المهام في الأصل لا يشعرون بأي ألم في كتابة عنوان، بل يرغبون فقط في إنهاء الكتابة بسرعة، فمهما كانت هذه القدرات الذكية مبهرة، فمن الصعب جدًا أن تشكل قيمة مستمرة. على العكس من ذلك، إذا تراجعت خطوة إلى الوراء وسألت بوضوح عن القيمة الأكثر بساطة لهذا التطبيق عند عدم استخدام AI، فقد تكتشف اتجاهًا أكثر صلابة: مساعدة المستخدمين على جمع المهام المبعثرة في قنوات مختلفة بشكل موحد، ومساعدته على رؤية عدد الأشياء التي يمكنه إنجازها فقط كل يوم، ومساعدته على رؤية المخاطر قبل انتهاء جدول الأعمال، وبالتالي القيام بالتخفيض والاختيار. إن إتقان هذه القدرات الأساسية غالبًا ما يكون أكثر أهمية من إضافة أنواع مختلفة من العلامات الذكية إلى قائمة المهام من البداية.
+
+**السؤال الثاني هو: بعد استخدام AI، ما الذي تم تحسينه تحديدًا.** هنا لا يتم قبول تلك الملخصات واسعة جدًا، مثل تحسين الكفاءة، أو إعادة هيكلة التجربة، أو الترقية الذكية، بل يجب أن تنزل إلى بُعد واحد أو اثنين يمكن للمستخدم نفسه إدراكه بوضوح.
+
+يمكنك أن تسأل نفسك بهذا الشكل:
+
+- هل هناك تحسن كبير في سرعة إتمام المهمة، مثل تحويل صفحة نصية كان يجب عليك كتابتها من الصفر بنفسك، إلى مجرد الحاجة لقضاء خمس دقائق في المراجعة وإعادة الكتابة
+- هل هناك تحسن واضح في جودة النتيجة، مثل السماح للمستخدم بإنتاج محتوى أكثر تنظيمًا، وأكثر احترافية، وأكثر توافقًا مع الجمهور المستهدف في نفس الوقت
+- هل جعل عملية الاستخدام أكثر سلاسة أو سهولة، مثل تحويل عملية نموذج مملة جدًا، إلى أسئلة وأجوبة تشبه الدردشة أكثر
+- هل جلب انخفاضًا في التكلفة الفعلية، مثل تقليل عدد مرات الت outsourcing، وتقليل مدة خدمة العملاء اليدوية، وتقصير دورة التدريب، وتقصير وقت اتخاذ القرار
+
+إذا كانت الإجابات التي تعطيها في ذهنك لا تزال عالقة عند **الشعور بأنها** ستكون أكثر راحة قليلاً، أو تبدو أكثر برودة قليلاً، فهذا في تسعة من أصل عشر حالات يشير إلى أن وظيفة AI هذه لم تجد بعد نقطة الارتكاز الأكثر أهمية.
+
+هذان السؤالان لهما في الواقع ترتيب واضح جدًا. أولاً تأكد من أنه حتى بدون AI، هذا التطبيق منطقي، ثم على هذا الأساس اسأل، بعد إضافة AI، ما الذي تحسن تحديدًا.
+
+## 4.2 التفكير في الدور الذي تلعبه AI
+
+عندما تتأكد من أن هذا التطبيق قائم حتى بدون AI، وقد وجدت بالفعل نقطة تحسين واضحة، فإن الشيء الذي يجب فعله في الخطوة التالية هو التفكير بشكل أكثر تحديدًا: **في تطبيقك، ماذا يفعل AI بالضبط.** العديد من المنتجات تخطئ في هذه الخطوة، لأنها تعامل AI كنوع من الطاقة المجردة، وليس كدور له تقسيم عمل محدد. النتيجة هي أن الوظائف مكدسة بكثرة، لكن دور كل قطعة غامض وغير واضح، وعندما يستخدمها المستخدمون يشعرون فقط أن هناك لمسة ذكية في كل مكان، لكنهم لا يستطيعون قول أي مكان لا يمكنهم الاستغناء عنه حقًا.
+
+فكرة أوضح هي التعامل مع AI كعدة أجزاء مختلفة: **يمكن أن يكون الدماغ، أو العين، أو اليد**. تحتاج إلى تحديد الجزء الذي يكون مسؤولاً عنه بناءً على هدف منتجك، وإذا أمكن، من الأفضل اختيار دور واحد أو اثنين فقط في البداية والقيام بهما بشكل جيد، بدلاً من حشر كل شيء دفعة واحدة.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image19.png)
+
+**عندما يلعب دور الدماغ، يكون مسؤولاً بشكل أساسي عن فهم وإنشاء المحتوى النصي، أو إجراء الاستدلال بين المعلومات المعقدة.** على سبيل المثال، إذا كنت تصنع مساعدًا لمحاضر الاجتماعات، فيجب أن يكون قادرًا على التقاط نقاط النقاش الأساسية الحقيقية من تسجيل صوتي طويل، بدلاً من مجرد سردها بترتيب زمني. إذا كنت تصنع تطبيقًا تعليميًا، فيجب أن يكون قادرًا على الحكم بناءً على إجابة المستخدم، ما إذا كان لم يفهم المفهوم، أو كان مجرد إهمال في كتابة الخطوات، وإعطاء ملاحظات مختلفة. في مثل هذه السيناريوهات، تكمن قيمة AI في قدرته على قراءة ما يقوله المستخدم، وفهم المواد التي قدمها المستخدم، ثم إنشاء مخرجات منظمة ومنطقية. ما عليك فعله هو مساعدة المستخدم على توضيح سؤاله، وتقديم السياق بدقة كافية، لكي يكون لهذا الدماغ معلومات كافية لاتخاذ القرار.
+
+**عندما يلعب دور العين، تتركز النقطة في معالجة المحتوى غير النصي مثل الصور ومقاطع الفيديو،** وتحويل هذه الأشياء إلى أوصاف يمكن للآلة فهمها، ثم اتخاذ إجراءات إضافية بناءً على هذه الأوصاف. على سبيل المثال، إذا كنت تصنع أداة لتنظيم المستندات الورقية، فيمكنها من خلال التعرف على الصور، تحويل مجموعة من الفواتير والعقود وأدلة التغليف إلى نصوص قابلة للبحث. إذا كنت تصنع تطبيقًا لتعلم الرسم، فيمكنه فهم الرسومات التخطيطية التي رسمها المستخدم، ثم الإشارة إلى بعض المشاكل في التكوين وخطوط الرسم. إذا كنت تصنع أداة لاقتراحات ترتيب المنزل، فيمكنها من خلال الصور التي يرفعها المستخدم، التعرف على تخطيط الغرفة الحالي وتوزيع العناصر، ثم تقديم بعض خطط التعديل البسيطة والقابلة للتنفيذ. هنا تكمن نقطة AI في: أنه يعمل كعين تحلل، مما يجعل تطبيقك لم يعد قادرًا فقط على معالجة النصوص المدخلة بلوحة المفاتيح، بل يبدأ في الاتصال الفعلي بالعالم المادي في حياة المستخدم.
+
+**عندما يلعب دور اليد، فهذا يعني أنه يبدأ في تنفيذ سلسلة من الإجراءات المحددة**، وليس مجرد إعطاء اقتراح أو نتيجة نصية. على سبيل المثال، بعض منصات الأتمتة تتيح لك ربط خطوات متعددة في سير عمل واحد: قراءة المرفقات من البريد الإلكتروني، تلخيص المحتوى إلى نقاط رئيسية، إرساله إلى مجموعة، ثم حفظ النص الأصلي في السحابة، وأخيرًا إنشاء مهمة متابعة تلقائيًا في أداة إدارة المهام. هنا دور AI هو مساعدتك في العمليات المعقدة، بناءً على السياق لتحديد ديناميكي ما يجب فعله في الخطوة التالية، مثل التعرف على ما إذا كانت رسالة بريد إلكتروني هي شكوى، والحكم على ما إذا كان نموذج معين مكتملًا، ثم تفعيل عمليات لاحقة مختلفة بناءً على ذلك.
+
+بالإضافة إلى الأوصاف البسيطة المذكورة أعلاه، في التطبيقات الفعلية، غالبًا ما يكون الدور الذي تتحمله AI أكثر تحديدًا وتنوعًا، على سبيل المثال:
+
+في معالجة النصوص، قد يكون يقوم بالترجمة، أو التلخيص، أو الأسئلة والأجوبة، أو الكتابة التكميلية، أو تحليل المشاعر: مثل التصنيف التلقائي لاستفسارات المستخدمين في نظام خدمة العملاء، واستخراج بنود العقود في مساعد المستندات القانونية، وتصحيح مقالات الكتابة في التطبيقات التعليمية.
+
+- الأساس التقني هو بشكل أساسي **نماذج اللغات الكبيرة (LLM)** في التعلم العميق: تتعلم قواعد اللغة ومعرفة العالم من كميات هائلة من النصوص، ويمكنها ليس فقط "فهم" السياق في النصوص الطويلة والمحادثات متعددة الجولات، ولكن أيضًا "كتابة" محتوى متماسك ومنسق بشكل متسق.
+- على جانب "الفهم"، يمكن لـ LLM التعرف على نية المستخدم، واستخراج المعلومات الرئيسية، والحكم على الميل العاطفي؛ وعلى جانب "التوليد"، يُستخدم لكتابة الملخصات تلقائيًا، والإجابة على الأسئلة، وإجراء الكتابة التكميلية وإعادة الكتابة، والترجمة متعددة اللغات، مما يجعل الكثير من العمل الذي يتطلب قراءة بشرية واستنتاجًا وكتابة آليًا أو شبه آلي.
+- لنأخذ **روبوت خدمة العملاء عبر الإنترنت** كمثال: يقوم النظام أولاً بالحكم بشكل مبدئي بناءً على جملة واحدة من المستخدم لتحديد ما إذا كانت استفسارًا أو شكوى أو خدمة ما بعد البيع، ويستخرج من الكلام المعلومات الرئيسية مثل رقم الطلب والوقت واسم المنتج، ثم يسلمها إلى LLM لكي يقوم مع السياق وقاعدة المعرفة الخاصة بالمؤسسة بتوليد رد طبيعي ومتكامل، مما يقلل من الضغط على العنصر البشري، ويحافظ على جودة خدمة مستقرة في أوقات الذروة.
+
+في مجال معالجة الصور، قد يكون الأمر يتعلق بالتعرف أو التصنيف أو التوليد أو الإصلاح أو التحسين: على سبيل المثال، التعليق التوضيحي لمواضع الآفات في الصور الطبية، أو فصل الصور تلقائيًا وتغيير الخلفيات في منصات التجارة الإلكترونية، أو إنشاء صور توضيحية بناءً على الأوصاف النصية في أدوات التصميم.
+
+- يعتمد فهم الصور عادةً على نماذج الرؤية العميقة مثل **الشبكات العصبية التلافيفية (CNN)**، حيث تتعلم من كميات هائلة من الصور سمات مثل الحواف والأنسجة والهياكل، وتُستخدم في اكتشاف الكائنات وتقسيم الصور والتصنيف الدقيق (مثل التمييز بين الآفات المختلفة أو فئات المنتجات المختلفة).
+- يعتمد توليد الصور وإصلاحها على **نماذج توليدية مثل نماذج الانتشار وGAN**، حيث يمكن إنشاء صور جديدة تمامًا بناءً على أوصاف نصية أو صور مرجعية، وإصلاح الصور الضبابية أو غير المكتملة أو منخفضة الدقة وتحسينها بدقة فائقة.
+- العديد من الأنظمة تجمع أيضًا مع LLM: حيث تفهم أولاً وصف المستخدم النصي باللغة الطبيعية، ثم تولد تلقائيًا "كلمات تحفيزية" مناسبة للنماذج البصرية، وعلامات الأسلوب، وقيود التكوين، مما يحقق الانتقال من "فهم ما تريده" إلى "رسم ما تريده".
+- لنأخذ **"توليد الصورة الرئيسية الذكية"** في منصات التجارة الإلكترونية كمثال: يستخدم النظام أولاً نماذج الكشف والتقسيم لاستخراج المنتج بدقة من الصورة الأصلية، ثم يقوم LLM بتحليل النص الذي أدخله التاجر (مثل "مشهد غرفة معيشة بأسلوب شمال أوروبي بسيط، إضاءة طبيعية ناعمة")، وتحويله إلى معلمات محددة للمشهد ودرجة اللون والأسلوب، وأخيرًا يسلمها إلى نموذج الانتشار لتوليد الخلفية وتأثيرات الضوء والظل المطابقة، ويقوم تلقائيًا باستبعاد النتائج ذات التكوين السيئ أو غير المتوافقة مع الأسلوب، لإخراج صورة رئيسية للمنتج يمكن استخدامها مباشرة للعرض.
+
+في مجال معالجة الصوت والفيديو، قد يكون الأمر يتعلق بتوليد الصوت والفيديو، أو نسخه، أو تقليل الضوضاء، أو تحريره، أو إنشاء ترجمات نصية: على سبيل المثال، التوليد التلقائي للتعليق الصوتي في بداية ونهاية البودكاست، أو التوليف التلقائي لفيديوهات الشرح بناءً على النص في منصات الفيديو، أو النسخ والترجمة الفورية للمحادثات في برامج المؤتمرات وإنشاء ترجمات نصية متعددة اللغات وتسجيلات للعرض لاحقًا.
+
+- على جانب "الفهم"، يستخدم النظام **نماذج التعرف على الكلام** لتحويل الكلام إلى نص، وفي الوقت نفسه يحلل المتحدث واللغة وسرعة الكلام والعاطفة العامة؛ ويستخدم نماذج الرؤية لفهم المشاهد والأشخاص والكائنات الرئيسية في إطارات الفيديو.
+- على جانب "التوليد"، وباستخدام LLM كنواة، يتم فهم وتقسيم وإعادة كتابة النصوص أو محتوى الاجتماعات أو تعليمات المستخدم، ثم يتم تشغيل **تركيب الكلام (TTS)** لتوليد تعليق صوتي طبيعي، وتشغيل نماذج توليد وتحرير الفيديو **لتوليف أو تحرير الإطارات تلقائيًا، أو استبدال الخلفيات، أو إدراج اللقطات والترجمات النصية؛ ويمكن لنماذج التوليد الصوتي أيضًا إنشاء موسيقى خلفية وأصوات بيئية تلقائيًا، جنبًا إلى جنب مع تقليل الضوضاء العميق وتحسين جودة الصوت لرفع جودة الاستماع بشكل عام.
+- لنأخذ منتجات **"توليد فيديو قصير من النص"** كمثال: يحتاج المستخدم فقط إلى إدخال نص، ويقوم النظام أولاً باستخدام LLM لتقسيم المقال إلى عدة فقرات ومشاهد طبيعية، وتوليد نص تعليق صوتي مناسب للإلقاء ووصف بسيط للقصة المصورة؛ ثم يقوم نموذج TTS بتوليف التعليق الصوتي، وتقوم قوالب الفيديو ونماذج التوليد باختيار أو توليد الإطارات بناءً على القصة المصورة، ومحاذاة الترجمات النصية مع الكلام تلقائيًا على الجدول الزمني، وأخيرًا يتم تصدير فيديو قصير بنقرة واحدة يمكن نشره مباشرة.
+
+في مجال التفاعل الصوتي، قد يكون الأمر يتعلق بالتعرف أو التوليف أو اكتشاف المشاعر أو إدارة الحوار: على سبيل المثال، فهم تعليمات المستخدم في مكبرات الصوت الذكية، أو إعلان الاتجاهات في الملاحة الصوتية، أو تصحيح النطق في تطبيقات تعلم اللغات.
+
+- في الواجهة الأمامية، تقوم **نماذج التعرف على الكلام** القائمة على التعلم العميق بتحويل صوت المستخدم إلى نص، واستخراج سمات مثل نبرة الصوت ومستوى الصوت وسرعة الكلام، لتوفير أدلة للحكم على المشاعر والحالة.
+- في الواجهة الخلفية، يتم استخدام **تركيب الكلام (TTS)** لتحويل هذه الردود النصية إلى مخرجات صوتية طبيعية وسلسة، ويقوم نموذج التعرف على المشاعر بتعديل نبرة وسرعة الرد بناءً على طريقة كلام المستخدم الحالية، مما يجعل التفاعل أقرب إلى المحادثة الحقيقية.
+- لنأخذ **مكبرات الصوت الذكية** كمثال: عندما يقول المستخدم "أنا متعب قليلاً اليوم، شغل بعض الموسيقى الهادئة"، يقوم النظام أولاً بتحويل الكلام إلى نص عبر التعرف على الكلام، ثم يقوم LLM بفهم أسلوب "الهادئ" المفضل لدى المستخدم بالجمع بين سجل التشغيل السابق، ويختار تلقائيًا قائمة تشغيل أكثر هدوءًا؛ بعد أن يحكم التعرف على المشاعر بأن المستخدم في حالة إرهاق، يقوم TTS عند توليف الرد بخفض سرعة الكلام وتنعيم النبرة، مما يجعل عملية التواصل بأكملها "مفهومة" و"مريحة للاستماع" في نفس الوقت.
+
+المحتوى أعلاه هو مجرد مقدمة بسيطة لتطبيقات وتقنيات الذكاء الاصطناعي في عدة اتجاهات رئيسية. في سيناريوهات الأعمال الحقيقية، غالبًا ما تحتاج إلى إدخال أحدث واجهات برمجة تطبيقات الذكاء الاصطناعي المتعددة وإجراء اختبارات أكثر شمولاً على مهام مختلفة. كما تحتاج إلى الفهم التدريجي لمدى قوة قدرات الذكاء الاصطناعي الحالية، وما هي المشاكل التي يمكنها حلها، وفي أي الحالات تكون عرضة للأخطاء، وأين تكمن حدودها. فقط من خلال إدراك ذلك، يمكنك تصميم الميزات والعمليات بشكل معقول، دون ترك مخاطر كامنة بسبب الحكم الخاطئ على القدرات.
+
+بعد ذلك، سنتناول هذه النقطة ونناقش بشكل أكثر منهجية في القسم التالي: كيفية فهم قدرات وحدود الذكاء الاصطناعي، وما الذي يجب مراعاته عند بناء المنتجات فعليًا.
+
+## 4.3 التعرف على قدرات وحدود الذكاء الاصطناعي
+
+عندما تبدأ فعليًا في دمج الذكاء الاصطناعي في التطبيقات، ستكتشف بسرعة حقيقة واحدة: ما يُقال عن القدرات الشاملة في الدعاية يختلف أحيانًا كثيرًا عن القيود المفروضة على ميزة محددة. لتجنب الإفراط في الوعود والفشل في تحقيق النتائج، **تحتاج إلى أن يكون لديك فهم أساسي للاتجاهات الرئيسية لقدرات الذكاء الاصطناعي الحالية، مع تحديد واضح لحدود كل منها. تحتاج إلى إجراء عدد كبير من الاختبارات للحصول على حالات فاشلة (Bad Cases) للتأمل، وتجنب الحالات التي من المرجح جدًا أن يخطئ فيها الذكاء الاصطناعي أثناء الاستخدام. أو قد تحتاج إلى إضافة تحذيرات بشأن الأخطاء.**
+
+لا تزال النماذج الحالية تعاني من مشكلة اختلاق المعلومات في العديد من السيناريوهات، خاصة عندما تتركها حرة التفكير أو لا تزودها بمراجع موثوقة بما فيه الكفاية. في بعض الأحيان تعطي إجابات تبدو واثقة تمامًا لكنها خاطئة تمامًا، بل وقد تختلق من العدم ملفات أو بيانات أو تجارب غير موجودة. لذلك، في أي سيناريو تكون فيه النتائج مرتبطة بعواقب خطيرة، مثل التقارير المالية، أو المستندات القانونية، أو النصائح الطبية، يجب عليك تصميم نظام يضيف بوضوح طبقة من المراجعة البشرية أو الفحوصات المتعددة، ولا تتخذ مخرجات النموذج كتعليمات يمكن تنفيذها تلقائيًا بشكل مباشر.
+
+في الوقت نفسه، تعد الخصوصية وأمن البيانات أيضًا جزءًا يجب عليك مواجهته بجدية. يجب أن تعرف بوضوح تام البيانات التي يمكن إرسالها مباشرة إلى النموذج، والبيانات التي تحتاج إلى إخفاء هويتها، والبيانات التي يجب ألا تظهر ببساطة في أنظمة الطرف الثالث. بالنسبة للمحتوى الحساس الذي يرفعه المستخدمون، مثل العقود، والسجلات الطبية، ومعلومات الهوية الشخصية، يجب توضيح طريقة معالجتك بوضوح في الواجهة والاتفاقيات، وحتى اختيار طرق نشر نماذج أكثر أمانًا وقابلية للتحكم لهذه السيناريوهات بشكل منفصل عندما يكون ذلك ممكنًا.
+
+بشكل أكثر تحديدًا، دعنا نستعير مثالًا متعلقًا بالوكيل (Agent) لتوضيح ما يعنيه فهم حدود قدرات الذكاء الاصطناعي حقًا. ملاحظة: الهدف هنا ليس تعليمك كيفية بناء وكيل من الصفر، ولا مطالبتك بالبحث عن بنية معينة الآن، بل استخدام هذا المثال لتوضيح طريقة تفكير: عند الحديث عن Agent، يعتبره البعض مجرد مصطلح جديد، بينما يستطيع آخرون استغلال الموضوع لتقسيم المهام بوضوح ورسم الحدود بدقة.
+
+قدم Barret Li Jing، وهو كاتب يعمل في تطبيقات الذكاء الاصطناعي على الخطوط الأمامية لفترة طويلة، ملخصًا أوافق عليه تمامًا، لشرح كيفية بناء Agent بشكل جيد وما إذا كان يجب استخدام الذكاء الاصطناعي. إنه يعكس بوضوح طريقة فهم ناضجة: قسّم المشكلة أولاً، ثم تحدث عن المجال الذي يمكن للذكاء الاصطناعي أن يبرز فيه.
+
+> يحتوي Agent على متغيرين: أحدهما هو سير العمل (workflow) الذي يتحكم في اتجاه المهمة، والآخر هو السياق (context) الذي يتحكم في توليد المحتوى.
+>
+> 1) إذا كانت درجة اليقين لكل من سير العمل والسياق عالية، فمن السهل أتمتة هذه المهام، على غرار RPA التقليدية. على سبيل المثال، في معالجة الفواتير ومهام تعبئة النماذج، يكون الذكاء الاصطناعي بمثابة مادة لاصقة، والمجال المتاح له محدود نسبيًا.
+>
+> 2) إذا كان سير العمل مؤكدًا ولكن السياق غير مؤكد، أي أن العملية ثابتة ولكن المدخلات متغيرة، فسيحتاج Agent إلى سد الفجوات في الدلالات والفهم، مثل أسئلة وأجوبة خدمة العملاء وتحليل العقود، مما يتطلب أدوات مثل الاسترجاع الخارجي ورسم المعرفة لسد الفجوات المعلوماتية، وجعل نتائج الاستدلال أكثر توافقًا مع التوقعات.
+>
+> 3) إذا كان سير العمل غير مؤكد ولكن السياق مؤكد، أي أن المدخلات واضحة ولكن المسارات متنوعة، فسيحتاج Agent إلى تخطيط المسار بشكل مستقل، مثل توليد تقارير تحليل السوق والتوصيات المخصصة. معظم وكلاء RL من النهاية إلى النهاية (End-to-End RL Agent) جيدون في أداء هذه المهام لأنهم اكتسبوا خلال مرحلة التدريب قدرًا كبيرًا من تخطيط المسارات وأفكار حل المشكلات.
+>
+> 4) وعندما يكون كل من سير العمل والسياق غير مؤكد، فهذا هو السيناريو الأكثر تعقيدًا، والذي يتطلب الاستدلال والاستكشاف في نفس الوقت، مثل تصميم الحلول المبتكرة وجمع المعلومات عبر الأقسام. هذا النوع يميل أكثر إلى كونها وكلاء (Agents) للأغراض العامة، وتعتمد جودة تنفيذها على ثراء الأدوات المزودة لها، خاصة ضرورة تعظيم الانفتاح أمام قدرات البرمجة، مثل تعليمها الذهاب إلى Github للعثور على المستودعات واستنساخها وتعديل التعليمات البرمجية لحل المشكلات، وجعلها تعمل مثل البشر.
+>
+> لذلك، لبناء Agent بشكل جيد، يجب أولاً توضيح السيناريو. في جوهرها، تحل الأتمتة مشاكل "اليقين"، بينما يحل الذكاء مشاكل "عدم اليقين".
+
+تكمن قيمة طريقة التفكيك هذه في تحويل المفهوم الغامض المتمثل في "بناء Agent" إلى مشاكل يمكن الحكم عليها بشكل ملموس: أين يكمن اليقين وعدم اليقين في المهمة التي تواجهها؟ عندما تكون العملية والمعلومات مؤكدتين، فإن البرامج التقليدية تكفي؛ فقط عندما يظهر عدم اليقين، تصبح قدرات الذكاء الاصطناعي في الفهم الدلالي، والتعرف على الأنماط، وتخطيط الاستدلال ذات فائقة. ولكن في الوقت نفسه، كلما زاد عدم اليقين، زادت المخاطر الجديدة التي يقدمها الذكاء الاصطناعي. في السيناريوهات التي يكون فيها الجانبان غير مؤكدين، قد ينحرف الذكاء الاصطناعي في كل خطوة، ومن الصعب جدًا معرفة الخيارات التي سيتخذها مسبقًا. هذا هو السبب في أن العديد من الفرق تبدأ من الربع الثاني (سير العمل مؤكد، السياق غير مؤكد)، مما يمكنهم من استغلال قدرات الفهم لدى الذكاء الاصطناعي، وفي الوقت نفسه إبقاء المخاطر ضمن نطاق يمكن التحكم فيه من خلال العمليات الثابتة.
+
+دعنا نعود إلى المشكلة التي أردنا حلها في بداية هذا القسم الفرعي: ما الذي يعنيه فهم حدود قدرات الذكاء الاصطناعي حقًا؟
+أولاً، فهم أن الاحتياجات من الذكاء الاصطناعي تختلف باختلاف السيناريوهات. كما أوضح المثال السابق الخاص بـ workflow و context: عندما يكون كل من التدفق والمعلومات مؤكدين، لا توجد مساحة كبيرة لعمل الذكاء الاصطناعي، والأتمتة التقليدية تكفي؛ وعندما يكون التدفق مؤكدًا ولكن المعلومات غير مؤكدة، تكمن قيمة الذكاء الاصطناعي في الفهم والإكمال؛ وعندما يكون التدفق غير مؤكد، يحتاج الذكاء الاصطناعي إلى القيام بالتخطيط والاستكشاف. جوهر طريقة التحليل هذه هو تحديد مصدر ودرجة عدم اليقين. القدرة الأساسية للذكاء الاصطناعي هي إيجاد الأنماط والارتباطات وسط عدم اليقين. هذه الفكرة لا تنطبق فقط على الوكلاء (Agent)، بل هي مهمة بنفس القدر في مجالات مثل التعرف على الصور، وتوليد المحتوى، وأنظمة التوصية وغيرها. على سبيل المثال، عند إنشاء أداة لقص الصور بالذكاء الاصطناعي، يكون المدخل مؤكدًا (صورة واحدة)، لكن دقة التعرف على الحواف والقدرة على التعامل مع الخلفيات المعقدة هي نقاط عدم اليقين.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image20.png)
+
+ومع ذلك، بينما يحل الذكاء الاصطناعي مشكلة عدم اليقين، فإنه يقدم في الوقت نفسه عدم يقين جديد. مخرجاته احتمالية، وقد يسيء الفهم، أو ينحرف في الاستدلال، أو ينتج هلوسات. وتختلف tolerability (تقبل) هذا عدم اليقين تمامًا باختلاف السيناريوهات والمستخدمين. لذلك يجب أن تسأل أيضًا:
+
+**هل يمكن للمستخدمين والنظام تحمل عدم اليقين الجديد الذي أدخله الذكاء الاصطناعي؟** على سبيل المثال، في سيناريو خدمة العملاء، إذا أساء الذكاء الاصطناعي فهم نية المستخدم، يمكن للمستخدم تصحيح ذلك على الفور، وهذا عدم يقين يمكن السيطرة عليه. ولكن إذا كان الأمر يتعلق بالتنفيذ التلقائي للموافقات المالية، فإن خطأ واحد في الحكم من قبل الذكاء الاصطناعي قد يؤدي إلى عواقب وخيمة، وهذا عدم يقين غير مقبول. ومثال آخر على توليد الصور، إذا كان الأمر يتعلق بتجميل صورة الملف الشخصي للمستخدم، يمكنه إعادة التوليد إذا لم يكن راضيًا عن النتيجة، وتكلفة التجربة والخطأ منخفضة؛ ولكن إذا كان الأمر يتعلق بتوليد مخططات بناءة لمهندس معماري، فإن خطأً تفصيليًا واحدًا قد يؤدي إلى حادث هندسي.
+
+**هل يمكن لمعدل دقة الذكاء الاصطناعي الوصول إلى خط النجاح في هذا السيناريو؟ يعتمد هذا الخط على ما يستخدمه المستخدم الذكاء الاصطناعي لفعله.** في التعرف على الصور، إذا كان الهدف هو مساعدة المستخدمين في تنظيم ألبومات الصور وتصنيفها حسب الوجوه، يمكن للمستخدمين قبول معدل دقة يبلغ 80٪، وفي أسوأ الحالات يمكنهم التعديل اليدوي لبعض الصور. ولكن إذا تم استخدامه في سيناريو مراقبة الأمن، فإن تفويت 20٪ من المشتبه بهم يمثل خطرًا أمنيًا جسيمًا. وبالمثل في توليد النصوص، إذا كان الهدف هو مساعدة المستخدمين في كتابة منشورات وسائل التواصل الاجتماعي، فإن مستوى إبداع 60 درجة يكفي، وسوف يقوم المستخدمون بصقلها بأنفسهم؛ ولكن إذا كان الأمر يتعلق بتوليد بنود العقود القانونية، فإن 95 درجة ليست كافية، لأن اختيار كلمة غير لائقة قد يؤدي إلى نزاعات قانونية. تختلف حساسية المستخدمين المختلفين والاستخدامات المختلفة لمعدلات الخطأ تمامًا، ويجب أن تكون واضحًا بشأن السيناريو الذي تخدمه ومقدار مساحة السماح بالخطأ التي تمتلكها.
+
+**عندما يخطئ الذكاء الاصطناعي، هل توجد طريقة للعلاج؟** في السيناريوهات التي يكون فيها workflow مؤكدًا، يمكنك إعداد مراجعة بشرية في العقد الرئيسية للسيطرة على عدم اليقين في الذكاء الاصطناعي محليًا. ولكن في السيناريوهات التي يكون فيها workflow غير مؤكد أيضًا، قد تنحرف كل خطوة من خطوات الذكاء الاصطناعي، ويصعب عليك الحكم على متى يحتاج الأمر إلى تدخل، وعندها سترتفع التكلفة والمخاطر بشكل حاد. على سبيل المثال، في سيناريو استعادة الصور، إذا لم تكن استعادة الذكاء الاصطناعي للصور القديمة واقعية بما فيه الكفاية، يمكن للمستخدم أن يلاحظ ذلك بنظرة واحدة ويمكنه اختيار عدم استخدامها؛ ولكن في سيناريو التشخيص المساعد للتصوير الطبي، إذا قام الذكاء الاصطناعي بوضع علامة على الشذوذ في المكان الخطأ، قد يكون من الصعب جدًا على الطبيب اكتشاف ذلك، وتكون العواقب أكثر خطورة بكثير.
+
+**هل لديك طريقة لقياس وتحسين أداء الذكاء الاصطناعي؟** إذا لم تكن هناك معايير واضحة للصواب والخطأ في المهمة نفسها، فكيف تعرف ما إذا كان الذكاء الاصطناعي يؤدي بشكل جيد؟ إذا كانت ملاحظات المستخدمين متأخرة جدًا، فكيف يمكنك التكرار بسرعة؟ عندما لا تتمكن حتى من القياس، سيصبح عدم اليقين في الذكاء الاصطناعي صندوقًا أسود. على سبيل المثال، في نظام التوصية، يمكنك تقييم التأثير بسرعة من خلال مؤشرات مثل نسبة النقر ومعدل البقاء؛ ولكن إذا كان الأمر يتعلق بتوليد نصوص إعلانية إبداعية، فإن تعريف ما هو "جيد"ذاتي للغاية في حد ذاته، وقد تضطر إلى الانتظار حتى الترويج لمعرفة معدل التحويل، وستكون دورة التكرار طويلة جدًا.
+
+الحكم الناضج حقًا ليس "يوجد عدم يقين هنا، لذا يمكن استخدام الذكاء الاصطناعي"، بل "عدم اليقين الموجود هنا يمكن للذكاء الاصطناعي التعامل معه، وعدم اليقين الجديد الذي يجلبه الذكاء الاصطناعي يمكنني إدارته أيضًا". "في هذه النقطة الوظيفية، إلى أي مدى يمكن للذكاء الاصطناعي المساعدة، وهل يستحق الاستثمار، وكيف تكون أعلى عائد على الاستثمار." نحتاج إلى تطوير هذه القدرة على الحكم، والتي يمكن أن تساعدنا في توفير الكثير من الجهد غير المجدي في كل مرة نصمم فيها ميزة أو نقيم فيها حلًا مستقبلاً.
+
+# 5. بعد بناء التطبيق، كيف تجد أول مستخدمين حقيقيين من الصفر
+
+عندما تنجح أخيرًا في بناء تطبيق، ستتحول المشكلة التالية إلى: كيف تجعل أول مستخدمين حقيقيين يظهرون.
+
+ستتوهم العديد من الفرق في هذه المرحلة أنه بمجرد بناء المنتج، فإن الخطوة التالية هي مجرد التفكير في كيفية الترويج له - القيام بالدعاية، وشراء الإعلانات، والبحث عن الوصول، ويبدو أنه طالما جعل المزيد من الناس يرونه، فإنه سيعمل بشكل طبيعي. ولكن إذا سارعت إلى السعي وراء التعرض الواسع النطاق من البداية، فمن السهل أن تقع في فخ نموذجي: حرق الوقت والميزانية الثمينين، وتبدو البيانات وكأن هناك أشخاصًا قد زاروا، لكنك غير قادر على التحقق مما إذا كان أي شخص على استعداد لاستخدام هذا التطبيق باستمرار.
+
+في الواقع، أهم شيء في هذه المرحلة هو شيء واحد فقط: **بأقل تكلفة ممكنة، أثبت أن هناك أشخاصًا على استعداد لاستخدام هذا التطبيق بالفعل، وبعد استخدامه هم على استعداد للعودة**. في سياق النمو والمنتجات، تُعرف هذه الخطوة عادة باسم "البدء البارد" (Cold Start).
+
+يشير البدء البارد إلى: في ظل وجود كل شيء تقريبًا عند الصفر، دفع منتج جديد تمامًا إلى خطوة العمل الفعلي. في هذا الوقت، ليس لديك قاعدة مستخدمين، ولا ترويج شفهي، ولا حجم بحث ووعي بالعلامة التجارية، وجميع المؤشرات تقريبًا متوقفة عند 0. يجب عليك في هذه البيئة الباردة الهادئة جعل أول مجموعة من الأشخاص المستعدين حقًا للاستخدام يظهرون، وبناء حلقة استخدام أولية حولهم.
+
+هذا يختلف تمامًا عن العمل اللاحق المتعلق بتحسين منتج يمتلك بالفعل مستخدمين وبيانات. وبشكل مبسط، يمكننا المضي قدمًا في الخطوات الأربع التالية:
+
+1. أولاً، إدراك أن النمو يمكن تقسيمه إلى 0–1 و 1–N، ومعرفة ما تحتاج فقط إلى فهمه في الوقت الحالي
+2. توضيح من هم الأشخاص الذين تبحث عنهم حقًا، ولا تركز فقط على المستخدمين النهائيين
+3. بشرط معرفة من تبحث عنه، اختر مسارًا أو مسارين للبدء البارد يناسبانك
+4. في واقع الموارد المحدودة، تعلم كيف تحدد الأولويات، وتضييق جهودك إلى المنطقة الأكثر أهمية
+
+## 5.1 أولاً، نميز بين المرحلتين: 0–1 و 1–N
+
+قبل مناقشة كيفية العثور على المستخدمين رسميًا، تحتاج إلى توضيح شيء واحد: **النمو مقسم إلى مراحل**. النظر إلى جميع الأعمال المتعلقة بالنمو ممزوجة معًا سيجعلك فقط لا تعرف أين تضع طاقتك في الوقت الحالي. أبسط وأكثر الطرق عملية للقسمة هي تفكيك النمو إلى مرحلتين: 0–1 و 1–N.
+
+### 0–1: في غياب المستخدمين، كيف تبدأ باردًا
+
+يشير ما يسمى بـ 0–1 إلى العملية من عدم وجود مستخدمين على الإطلاق، إلى ظهور مجموعة صغيرة من المستخدمين المستعدين للاستخدام الحقيقي. "برودة" البدء البارد تكمن في أن جميع المؤشرات تقريبًا تكون صفرًا في البداية: لا تنزيلات، لا حجم بحث، لا ترويج شفهي، يمكن القول إن تطبيقك غير موجود في هذا العالم.
+
+في هذا الوقت، لا يمكنك الاعتماد على حركة المرور العضوية والحظ، بل يجب أن تتخذ خطوة استباقية لبناء الأساس الأولي له. تحديدًا، هناك بعض الأشياء التي يجب إنجازها:
+
+**العثور على مجموعة صغيرة من المستخدمين الأوائل المستعدين للاستخدام الحقيقي**، بدلاً من تجميع الأشخاص عشوائيًا من دائرة المعارف. يجب أن يكون لدى هؤلاء الأشخاص احتياج حقيقي للمشكلة التي تريد حلها، بدلاً من فتح التطبيق بنظرة واحدة بدافع المجاملة أو الفضول ثم المغادرة.
+
+**إعداد تجربة الاستخدام الأولية والعرض**، للتأكد من أن المستخدمين لن يروا صفحة فارغة فقط عند الدخول. حتى لو لم تكن الميزات كاملة بعد، يجب على الأقل السماح لهم بإكمال عملية أساسية كاملة والشعور بقيمة هذا التطبيق.
+
+**شرح ما يفعله المنتج والمشكلة التي يحلها بكلمات بسيطة**. في غياب تأييد العلامة التجارية، فإن صبر المستخدم معك هو بضع ثوانٍ فقط، ويجب عليك جعلهم يفهمون "ما الفائدة من هذا الشيء بالنسبة لي" في أقصر وقت ممكن.
+
+**إيجاد طريقة للحصول على قناة الوصول الأولى**، لتوصيل هذه المعلومات إلى المستخدمين المحتملين. قد يكون مجتمعًا صغيرًا، أو منتدى، أو لحظات WeChat. المفتاح ليس حجم القناة، بل ما إذا كان يمكنك الوصول بدقة إلى الأشخاص الذين يحتاجون إليها حقًا.
+
+في مرحلة 0–1، ما يجب أن تفكر فيه حقًا هو: جلب أول مجموعة من الأشخاص ذوي الاحتياجات الحقيقية، والسماح لهم بإكمال حلقة مغلقة من الدخول إلى الاستخدام ثم تقديم الملاحظات. طالما يمكن تشغيل هذه الحلقة المغلقة بنجاح، فقد أثبتّ أن هذا التطبيق ليس مجرد قصر في الهواء، بل هو شيء يحتاجه الناس حقًا ومستعدون لاستخدامه.
+
+### 1–N: على أساس أن هناك أشخاصًا مستعدين للاستخدام، كيف تقوم بالتوسع
+
+عندما تقوم بتراكم مجموعة من المستخدمين المستعدين للاستخدام المتكرر ببطء، ستصبح المشكلة: كيف تتوسع ببطء من عشرات أو مئات الأشخاص إلى آلاف أو عشرات الآلاف، أو حتى أكثر. هذه المرحلة هي ما يسمى تقليديًا بالنمو، والتوسع، وتحقيق الحجم (الاستثمار).
+
+في مرحلة 1–N، ستبدأ في الاهتمام بمجموعة أكثر تعقيدًا من المشكلات مثل الآليات، والتنظيم، والتحويل التجاري، والعلامة التجارية، والفريق. على سبيل المثال:
+
+**هل وجدت قنوات اكتساب عملاء مستقرة نسبيًا**، وتعرف مقدار الميزانية أو الوقت الذي يجب استثماره لجلب مستخدمين جدد تقريبًا. ما تحتاجه في هذا الوقت لم يعد يعتمد على الحظ، بل مسارات نمو قابلة للتكرار والتنبؤ بها.
+
+**هل بدأت في بناء آلية خدمة**، مثل خدمة العملاء، والعمليات التشغيلية، وتثقيف المستخدمين. بعد زيادة عدد المستخدمين، لن تتمكن من تعليم كل شخص كيفية الاستخدام يدويًا واحدًا تلو الآخر كما في الأيام الأولى، ويجب إنشاء نظام خدمة موحد.
+
+**كيف تخطط لجعل هذا المنتج يكسب المال**، هل هو عبر الاشتراك، أو الدفع لمرة واحدة، أو الخدمات المضافة، أو غير ذلك. لا يجب أن يكون نموذج العمل واضحًا من البداية، ولكن عند دخولك مرحلة 1–N، يجب التفكير بجدية في كيفية جعل هذا المنتج يعمل بشكل مستدام.
+
+**ما هي الانطباع عن العلامة التجارية الذي تريد تركه لدى المستخدمين**. في الأيام الأولى، قد تنتشر فقط في دائرة صغيرة، ولكن عندما يتوسع حجم المستخدمين، تحتاج إلى التفكير في كيفية جعل المزيد من الناس يتذكرونك، ويثقون بك، ومستعدين للتوصية بك للآخرين بنشاط.
+
+**ما هي القدرات التي ينقص الفريق، وأي الروابط يجب أن يراقبها شخص ما على المدى الطويل**، ولا يمكن الاستعانة بمصادر خارجية بالكامل. يمكن لشخص واحد أو فريق صغير تحمل مرحلة 0–1، ولكن 1–N غالبًا ما تتطلب تعاونًا بين المزيد من الأدوار.
+
+كل هذه الأسئلة مهمة، ولكن إذا سارعت إلى التفكير فيها أثناء مرحلة 0–1، فغالبًا ما يجعلك ذلك تدور في حلقة مفرغة. لأنه عندما لا تعرف حتى ما إذا كان هذا المنتج يحتاجه الناس حقًا ومستعدون للبقاء، فإن التحدث عن نماذج العمل واستراتيجيات العلامة التجارية سيصرف الانتباه فقط عن الأمور الحقيقية العاجلة.
+
+### لماذا يجب التركيز على 0–1 أولاً؟
+بالنسبة للمطورين المستقلين والفرق الصغيرة، مقارنة بمرحلة 1–N، **يجب أن يكون التركيز الحقيقي على مرحلة 0–1**. السبب بسيط: إذا لم تتمكن حتى من العثور على أول مجموعة من المستخدمين الحقيقيين، فإن جميع المناقشات اللاحقة حول التوسع، والتسويق التجاري، وبناء العلامة التجارية ستكون مجرد كلام فارغ.
+
+مرحلة 0–1 هي اللحظة الأكثر هشاشة والأكثر أهمية في دورة حياة المنتج بالكامل. فهي تحدد ما إذا كنت قادرًا على إثبات قيمة هذا المنتج، وما إذا كان بإمكانك بناء الثقة الأولية، وما إذا كان يمكنك وضع أساس متين للنمو اللاحق. فقط عندما تنجح حقًا في اجتياز مرحلة 0–1، يحق لك عندئذ التفكير في مسائل مرحلة 1–N.
+
+بعد ذلك، سنركز بشكل أعمق على مرحلة 0–1، لتوضيح سؤال "من يجب أن نبحث عنه بالضبط"، ثم ننتقل لمناقشة مسارات الإطلاق البارد المحددة.
+
+## 5.2 هدف الإطلاق البارد: المستخدمون الأوائل، ومقدمو العروض، ومصادر الزيارات، والقنوات
+
+بالنسبة لأنواع مختلفة من التطبيقات، غالبًا ما لا يمكن تجاوز العديد من الأطراف الرئيسية: المستخدمون الأوائل، ومقدمو العروض، ومصادر الزيارات، والقنوات.
+
+### الفئة الأولى: المستخدمون الأوائل (Seed Users)
+
+**المستخدمون الأوائل هم أو مجموعة من المستخدمين الذين تصل إليهم.** من خصائصهم النموذجية أن عددهم قليل، لكنهم يتطابقون بشكل كبير مع الشخصية المستهدفة. ما تحتاج إلى الحصول عليه منهم ليس مجرد بيانات التسجيل والاستخدام، بل هو ردود فعل مباشرة حول الاتجاه وتجربة الاستخدام.
+
+- بالنسبة للمنتجات الموجهة للأدوات الشخصية، قد يكون المستخدمون الأوائل هم أولئك الذين يعانون من مشكلة معينة لفترة طويلة، مثل منشئي المحتوى الذين يكتبون مقالات طويلة بشكل متكرر ويحتاجون إلى تنظيمها، أوالمهنيين الذين يعدون مواد عروض تقديمية باستمرار، أو الطلاب الذين يتعاملون مع كميات كبيرة من المواد يوميًا
+- بالنسبة لتطبيقات التعليم، قد يكون المستخدمون الأوائل مجموعة صغيرة من الطلاب الذين يستعدون لنفس الامتحان، أو أولياء أمور لطلاب في مرحلة دراسية معينة
+
+عند الإطلاق البارد، يمكنك البدء بتحديد هدف واضح للمستخدمين الأوائل، مثل العثور على 20 إلى 50 مستخدمًا مستعدًا للتعاون، وقضاء أسبوع أو أسبوعين في استخدام المنتج والتحدث معهم في نفس الوقت. التركيز ليس على الكمية، بل على توضيح منطق المنتج من خلال التواصل المكثف.
+
+### الفئة الثانية: مقدمو العروض (Supply Side)
+
+**في بعض المنتجات ذات المنصات ثنائية أو متعددة الأطراف**، لا يكفي وجود جانب المستخدمين فقط. إذا لم يكن هناك عدد كافٍ من مقدمي العروض، فحتى لو تم جذب المستخدمين، فسيغادرون بسرعة لأنهم لا يجدون ما يمكنهم استخدامه.
+
+**قد يكون مقدمو العروض منشئي محتوى، أو معلمي دورات، أو مقدمي خدمات، أو تجار، أو سائقين، أو ملاك عقارات**، وهم من يحددون تنوع المنصة وجاذبيتها.
+
+- إذا كنت تبني منصة مواد مصممة للمصممين، فعليك أولاً إقناع مجموعة من المصممين بالاستعداد لتحميل أعمالهم، حتى لو كان ذلك مجرد فتح جزء صغير من المواد المجانية. بخلاف ذلك، عندما يدخل المستخدمون ويرون مجرد بضع صور أمثلة، سيكون من الصعب جدًا تكوين ولاء للمنتج
+- إذا كنت تبني أداة حجز عبر الإنترنت، ولم تقم مسبقًا بالتنسيق مع بعض التجار أو المؤسسات المستعدة للاستخدام، فلن يتمكن المستخدمون العاديون بعد دخولهم من العثور على كائنات يمكنهم حجزها فعليًا
+
+عند الإطلاق البارد، يجب أن تعرف بوضوح شديد ما إذا كنت تحل مشكلة جانب المستخدم أولاً، أو جانب العرض أولاً، أو التقدم في كلا الجانبين في نفس الوقت. مرت العديد من المنصات بهذه المفاضلات والقرارات في المراحل المبكرة. طالما أنك تدرك أن هذه مشكلة هيكلية يجب مواجهتها، فقد تقدمت خطوة إلى الأمام بالفعل مقارنة بأولئك الذين يفكرون فقط في جذب المزيد من المستخدمين النهائيين.
+
+### الفئة الثالثة: مصادر الزيارات (Traffic Sources)
+
+مصادر الزيارات هم هؤلاء الذين يمكنهم **في وقت قصير نسبيًا، توجيه انتباه عدد معين من المستخدمين إليك. قد يكونوا مدونين مؤثرين، أو حسابات متخصصة، أو وسائل إعلام، أو مشغلي مجتمعات، أو قد يكونوا منصة أدوات تمتلك قاعدة مستخدمين كبيرة.**
+
+- منتج فئة أدوات مهنية، إذا تمكن من إقناع عدد قليل من مدوني التطوير المهني بتقديم تطبيقك بشكل طبيعي في محتواهم، فستكون لديك فرصة للحصول على مجموعة من الأشخاص الحساسين لأدوات الكفاءة المهنية في وقت قصير
+- مساعد اختيار مواضيع لمنشئي المحتوى على منصة Xiaohongshu، إذا تمكن من التعاون مع عدة مدونين من المستوى المتوسط، والسماح لهم بعرض عملية الاستخدام في حالات عملية حقيقية، فإن هؤلاء المنشئين هم بطبيعة الحال مستخدموك الأوائل المحتملون
+
+في مرحلة الإطلاق البارد، لا تحتاج إلى التسرع في البحث عن أكبر مصادر الزيارات، ولا حتى التفاوض على التعاون مع كبار المؤثرين فورًا. في كثير من الأحيان، تكون مصادر الزيارات الصغيرة ذات الحجم المعتدل والتي تتطابق بشكل كبير مع الجمهور المستهدف أكثر استعدادًا للقيام ببعض المحاولات المخصصة معك. ما عليك فعله هو العثور على هؤلاء الأشخاص أو المؤسسات، ثم تقديم عرض تعاون واضح، بحيث يفهمون ما تريد القيام به وما هي الفوائد التي ستعود عليهم.
+
+### الفئة الرابعة: القنوات (Channels)
+
+القنوات هي تلك المنظمات أو نقاط الدخول التي يمكنها مساعدتك في **الوصول إلى المستخدمين المستهدفين بشكل ثابت في سيناريوهات محددة**. الفرق بينهم وبين مصادر الزيارات هو أن مصادر الزيارات تميل أكثر إلى كونها استيرادًا لمرة واحدة للانتباه، بينما القنوات هي أشبه باتصال طويل الأمد ومنظم.
+
+- المدارس، ومعاهد التدريب، والشركات، وجمعيات الصناعة، ومقدمي الخدمات البرمجية، كلها قنوات نموذجية
+  إذا كان تطبيقك يمكنه بالفعل مساعدة نوع معين من المؤسسات على تحسين الكفاءة، أو توفير التكاليف، أو تحسين جودة الخدمة، فسيكون لديهم حافز لتقديم منتجك لعدد كبير من المستخدمين داخل نظامهم
+
+في مرحلة الإطلاق البارد، لا تحتاج إلى الوهم بالاستحواذ على قنوات كبيرة دفعة واحدة، بل يمكنك البدء بتجربة صغيرة النطاق. على سبيل المثال، التعاون مع فصل أو فصلين دراسيين، أو شركة صغيرة، أو مجتمع محلي، للسماح لهم باستخدامه داخليًا لفترة من الوقت، ثم بناءً على ردود الفعل، تقرر ما إذا كنت تريد توسيع النطاق.
+
+يتمثل الفرض المباشر لتفكيك أهداف الإطلاق البارد في أنه يمنعك من استنزاف كل طاقتك في جذب مستخدمين نهائيين جدد، مع تجاهل حلقات رئيسية أخرى في هيكل المنتج. يمكنك رسم مخطط بسيط للأدوار بناءً على شكل منتجك، وتدوين من هم كل فئة من الأهداف، وكم عددهم الآن، وما هي أهدافك قصيرة المدى لكل منهم. بعد توضيح مخطط الأهداف هذا، يمكننا التحدث عن مسارات الإطلاق البارد المحددة.
+
+## 5.3 طرق الإطلاق البارد: ثلاثة مسارات رئيسية لأهداف مختلفة
+
+عندما تعرف من هم الأشخاص الذين يجب أن تبحث عنهم، فإن الخطوة التالية هي: من خلال أي مسار يمكنك العثور عليهم وخدمتهم.
+
+في الممارسة العملية، لا يتعين عليك التقيد بمسار واحد، بل تقم بالاختيار بناءً على مواردك وخصائص منتجك. في معظم الأحيان، ستجعل مسارًا واحدًا هو المسار الرئيسي، ومسارًا أو مسارين آخرين كدعم.
+
+### المسار الأول: الاختراق بالمستخدمين الأوائل، وإعطاء الأولوية للاستخدام الجيد للجمهور الخاص
+
+هذا المسار يهدف بشكل أساسي إلى المستخدمين الأوائل وبعض مقدمي العروض.
+
+بالنسبة لمعظم المطورين المستقلين، والفرق الصغيرة، وحتى الشركات الناشئة التي بدأت للتو، فإن الطريقة الأكثر واقعية والأقل تكلفة والأسهل للتحكم في وتيرتها عادةً ما تبدأ من جمهورك الخاص الحالي.
+
+ما يسمى بالجمهور الخاص (المناطق الخاصة) ليس مفهومًا تشغيليًا معقدًا، بل هو مجموعة من الأشخاص يمكنك الوصول إليهم بشكل استباقي، مثل دائرة أصدقائك، والمجتمعات الصناعية التي تشارك فيها، ومجموعات الاهتمامات التي يكون لك فيها صوت، وقراء حسابك الرسمي الذين حافظت عليهم لفترة من الوقت، وما إلى ذلك.
+
+في هذا المسار، هناك ثلاثة إجراءات رئيسية تقريبًا:
+
+1. **دعوة عدد قليل من المستخدمين المستهدفين بدقة لتجربة المنتج**
+   المفتاح ليس في الكمية، بل في مدى التطابق مع الشخصية المستهدفة. إذا كانت الأداة التي طورتها موجهة للمبتدئين في مكان العمل لكتابة السير الذاتية، فابحث أولاً عن الزملاء الذين تخرجوا للتو منذ عام أو عامين، أو الطلاب الذين يستعدون للتدريب، وليس المعارف الذين عملوا لمدة عشر سنوات.
+   عند الدعوة، حاول توضيح ثلاثة أشياء:
+   1. هذا تطبيق لأي فئة من الأشخاص لحل أي مشكلة
+   2. كم من الوقت تأمل أن يقضيه الطرف الآخر في تجربته
+   3. كيف ستعامل الملاحظات التي يقدمونها
+2. **جمع الملاحظات بوعي والتحسين السريع**
+   قيمة المستخدمين الأوائل لا تكمن في مساعدتك في زيادة الأرقام، بل في مساعدتك في رؤية النقاط العمياء في منتجك بوضوح. يمكنك من خلال محادثات فردية، أو استبيانات صغيرة، وغيرها من الطرق، أن تسأل بوضوح: في أي سيناريو سيتذكرون استخدامه، وأين يتوقفون عند استخدامه، وأي جزء هو الأكثر فائدة أو غير مفيد تمامًا.
+3. **جعل المستخدمين الأوائل ينتجون المحتوى أو الحالات الأولى**
+   آثار الاستخدام الحقيقية هي محتوى. التقييمات، ولقطات الشاشة المقارنة، وقصص الاستخدام، كلها يمكن أن تكون مواد عند تقديم نفسك للعالم الخارجي لاحقًا.
+
+في هذه العملية، يجب عليك كبح رغبتك في السعي وراء الانتشار واسع النطاق منذ البداية. إذا لم تتمكن حتى من خدمة هؤلاء العشرات من الأشخاص بشكل جيد، فإن الاعتماد فقط على تعريض أكبر لدفع المزيد من الأشخاص إلى نفس المشاكل هو في جوهره تضخيم للمشكلة، وليس حلها.
+
+### المسار الثاني: القيادة بالمحتوى أو المزايا، وتقديم سبب أول واضح بما فيه الكفاية
+
+هذا المسار يركز أكثر على المستخدمين الأوائل ومصادر الزيارات، وهو شائع بشكل خاص في المسارات التنافسية الشرسة.
+
+عندما يكون لدى المستخدمين العديد من الخيارات البديلة، فإن مجرد عبارة مثل "تعال أيها المستخدم الجديد وجرب" لن تكون كافية لإقناعهم، بل تحتاج إلى تقديم سبب أكثر وضوحًا وجاذبية، لجعل الطرف الآخر مستعدًا لقضاء الوقت في اتخاذ الخطوة الأولى.
+
+طريقتان شائعتان للبدء:
+
+1. استخدام **المزايا الحقيقية الملموسة كطعم مباشر**
+   1. منصة دورات جديدة، يمكنها في المراحل المبكرة إطلاق بعض الدورات المجانية عالية الجودة، أو توفير أماكن بخصومات لفترة محدودة
+   2. تستخدم تطبيقات التجارة الإلكترونية غالبًا طرقًا مثل مظاريف الخصومات، والشراء الجماعي بأسعار منخفضة، وكوبونات تخفيض السعر للطلبات فوق حد معين، لجعل المستخدمين الجدد يشعرون بأنهم لن يخسروا إذا زاروا أولاً
+2. **الجذب المستمر بالمحتوى المتخصص**
+   على منصات مثل Douyin، وXiaohongshu، والحسابات الرسمية، والبودكاست، وغيرها، قم بالإخراج المستقر للمحتوى القيم حول موضوع متخصص يهتم به المستخدمون المستهدفون، مثل النصائح المهنية، أو مهارات البرمجة، أو إدارة المشاعر، أو دروس الطبخ، أو أساليب التعلم، وما إلى ذلك.
+   الموجة الأولى من الأشخاص الذين يتم جذبهم من خلال المحتوى قد لا يتحولون على الفور إلى مستخدمي تطبيقك، ولكن على الأقل لديهم ثقة أساسية بك بالفعل، وعندما تقدم لهم الأداة أو التطبيق في الوقت المناسب، فمن المرجح أنهم سيعطونك نظرة جادة.
+
+إذا كنت تتبنى نهج القيادة بالمحتوى، فيجب أن تتقبل أن هذه طريقة بطيئة في البداية ولكنها ذات عائد طويل الأمد. تحتاج إلى الاستثمار المستمر للطاقة لجعل المحتوى متينًا، وتجنب أن تقودك مشاهدات التشغيل أو أرقام القراءة منذ البداية. **ما يمكنه حقًا مساعدتك في الإطلاق البارد هو تلك الدفعة الصغيرة من الأشخاص الذين يجدون صدى في المحتوى، وليس الزيارات التي تتدفق في وقت قصير وتتبدد بسرعة.** سواء كانت مزايا أو استيرادًا للمحتوى، في النهاية يجب أن ينتهي الأمر بنفس الجملة: يجب توجيه الأشخاص بسلاسة إلى تطبيقك، والسماح لهم بإكمال تجربة كاملة.
+
+### المسار الثالث: الاستفادة من المنصات الكبيرة، والبحث عن نقطة اختراق في النظام البيئي الحالي
+
+هذا المسار يهدف بشكل أساسي إلى مقدمي العروض، ومصادر الزيارات، والقنوات.
+
+في العديد من المجالات، إذا أراد تطبيق جديد بناء نظام بيئي خاص به بالكامل، فستكون التكلفة عالية جدًا. ولكن إذا كنت مستعدًا لاعتبار نفسك أولاً متجرًا جديدًا، أو حسابًا جديدًا، أو مكونًا إضافيًا جديدًا على منصة كبيرة، فستنخفض صعوبة الإطلاق البارد كثيرًا.
+
+- في مجال التجارة الإلكترونية، المتاجر الجديدة التي تستقر في منصات مثل Taobao، وPinduoduo، وJD، لا تحتاج على الأقل إلى بناء أنظمة الدفع، والخدمات اللوجستية، والتقييمات من الصفر. تتضمن الطرق الشائعة الاستخدام أثناء الإطلاق البارد المبيعات عبر المؤثرين، والترويج داخل المنصة وأماكن الأنشطة، والبث المباشر، وما إلى ذلك
+- بالنسبة لتطبيقات الأدوات والمحتوى، يمكنك من خلال تطوير مكونات إضافية وأدوات صغيرة للمنصات الناضجة، ووضع الخدمات عبر الإنترنت في سوق القدرات للمنصات المفتوحة، جعل المستخدمين الذين لديهم بالفعل احتياجات واضحة يجدونك بسهولة أكبر
+المنطق الكامن وراء هذا الطريق هو **الاعتراف بأن المنصات الكبرى قد جمعت المستخدمين بالفعل في سيناريوهات محددة، وأن ما عليك فعله هو العثور على الزاوية الصغيرة التي تتطابق مع منتجك داخل هذه السيناريوهات**. الاستعانة بالقوة لا تعني التخلي عن الاستقلالية، بل هي استخدام طريقة أكثر واقعية لفتح الوضع خلال مرحلة الإطلاق البارد.
+
+## 5.4 المفاضلة عندما تكون الموارد محدودة: التركيز فقط على الجزء الأكثر أهمية في مرحلة 0–1
+
+عندما تتأكد من أنك لا تزال في مرحلة 0–1، وتفهم بوضوح من تخدم، وتختار تقريبًا مسار الإطلاق البارد، لتكتشف أن الموارد لا تكفي على الإطلاق.
+
+الموارد هنا ليست فقط المال، بل تشمل أيضًا الوقت والطاقة والأيدي العاملة والانتباه والعلاقات والقنوات. في مرحلة الإطلاق البارد، إذا بدأت بالتفكير في "تجربة مسارات متعددة معًا"، فغالبًا ما تكون النتيجة: أنك مشغول جدًا كل يوم، وتنجز الكثير من الأشياء، لكن دون التعمق في أي مسار، وفي النهاية لا تحصل على نتائج مقنعة ولا تفهم المستخدمين حقًا.
+
+في هذه المرحلة، تحتاج إلى التقليص بشكل متعمد. الهدف ليس "القيام بالكثير"، بل "إتقان الجزء الأكثر أهمية فقط". يمكنك إعادة بناء طريقة عملك من ثلاث زوايا.
+
+### من الهدف إلى المهمة المحددة
+
+كثير من الناس يضعون لأنفسهم أهدافًا خلال الإطلاق البارد مثل "لنرى أولاً رد فعل السوق"، أو "لنبدأ بجمع المستخدمين أولاً"، أو "لنجذب مجموعة من الأشخاص للتجربة". هذه الأقوال عامة جدًا، ومن الصعب عليك الحكم على ما إذا كانت الأشياء التي تقوم بها كل يوم تقربك حقًا من هذا الهدف.
+
+الطريقة الأكثر عملية هي تقليص الهدف إلى أمر صغير ومحدد، على سبيل المثال: خلال الأسابيع الأربعة القادمة، دع عشرين مستخدمًا حقيقيًا يتطابقون مع الملف المستهدف، يستخدمون تطبيقك بشكل متكرر وكامل في سيناريوهاتهم الحقيقية، والحصول على تعليقات محددة بما فيه الكفاية منهم.
+
+**ما يسمى بـ "الجمهور المتخصص" ليس "أي شخص قد يستخدم هذا النوع من الأدوات"، بل هو مجموعة من الأشخاص يمكنك وصفهم بدقة بناءً على سمة محددة.** على سبيل المثال، إذا كنت تصنع أداة تساعد الأشخاص على إنشاء تقارير العمل، فيمكن أن يكون الهدف "الموظفين في مجال العمليات التشغيلية للإنترنت بخبرة تتراوح بين سنة وثلاث سنوات"، بدلاً من "المحترفين" بشكل عام. لدى هذه المجموعة عدة نقاط مشتركة: هم بالفعل بحاجة إلى إعداد تقارير كل شهر، ووقتهم محدود، ويريدون أن يبدو المحتوى احترافيًا بعض الشيء، ومشاكلهم محددة ومستمرة.
+
+**"مهمة الاستخدام الكامل" لا يمكن أن تكون غامضة أيضًا**. بأخذ أداة إعداد التقارير هذه كمثال، قد تكون المهمة الكاملة هي: يقوم المستخدم بتنظيم بيانات ومواد العمليات التشغيلية للأسبوع الماضي، واستيرادها إلى الأداة، وإنشاء مسودة أولى، ثم تعديلها لجلستين أو ثلاث بناءً على الهيكل والنقاط الموصى بها، وأخيرًا تصديرها كعرض تقديمي (PPT) أو مستند، واستخدامها فعليًا في اجتماع القسم. إذا قام المستخدم بالنقر بضع نقرات عشوائية فقط، ليرى الشكل العام، ثم أغلقها ولم يعد لفتحها، فهذا لا يُحتسب استخدامًا كاملاً.
+
+يجب أن تكون التعليقات المحددة مفصلة بما فيه الكفاية. على سبيل المثال:
+
+- عند استيراد البيانات، هل هناك أي خطوة لم يفهموها، أو لم يجدوا مدخلها، أو ينقرون فيها بالخطأ دائمًا؛
+- هل الهيكل المُنشأ قريب من عادات إعداد التقارير في شركتهم، على سبيل المثال، هل يحتوي على تنسيق "الخلفية - الهدف - العملية - النتيجة" الذي يحتاجونه؛
+- أي الصفحات يستخدمونها فعليًا، وأي الصفحات يحذفونها في كل مرة؛
+- بعد الاستخدام، هل يمكنهم الشعور بوضوح بأن وقت التحضير لتقرير واحد قد انخفض من ثلاث ساعات إلى ساعة واحدة، أم أنهم يشعرون فقط بأنه "يبدو أكثر راحة بعض الشيء، لكن لا يمكنهم تحديد ذلك".
+
+### لا تحاول تجربة كل شيء
+
+بعد تحديد "الهدف الصغير"، تكون المشكلة التالية هي: ما هي الطريقة التي ستستخدمها للعثور على هؤلاء المستخدمين العشرين، ومرافقتهم لتجربة السيناريو الحقيقي.
+
+هناك العديد من طرق الإطلاق البارد: كتابة المحتوى، بناء المجتمعات، الإعلانات، إيجاد المؤثرين، البحث عن المؤسسات، الصعود إلى المنصات. ولكن في ظل الموارد المحدودة، ما تحتاجه ليس معرفة عدد الطرق المتاحة، بل **أي طريقة هي الأكثر طبيعية بالنسبة لك الآن، وأسهل طريقة يمكنك الاستمرار فيها.**
+
+إذا كنت معتادًا على كتابة المقالات الطويلة، ولديك مجموعة من الأشخاص سيقرأون مقالاتك بعناية، فيمكنك البدء بالمحتوى أولاً. على سبيل المثال، اكتب سجلًا عمليًا محددًا جدًا، يتحدث عن كيفية استخدامك لهذه الأداة للتحضير لتقرير شهري حقيقي: بدءًا من الحصول على البيانات الخام، إلى بناء الهيكل، إلى إنشاء المسودة، إلى تعديل التفاصيل، ثم تشغيلها فعليًا في غرفة الاجتماعات. يمكنك إدراج بعض لقطات الشاشة المقارنة في المنتصف، لإظهار الفروق في الوقت والتأثير والتنظيم قبل وبعد استخدام الأداة. لا تضع رابط تحميل باردًا فقط في نهاية المقال، بل قل بوضوح: إذا كنت تقوم أيضًا بإعداد تقارير العمليات التشغيلية، ومستعد للعمل معي على تحسين هذه الأداة، يمكنك إضافتي أو ملء نموذج بسيط، وسأختار عشرين شخصًا للمتابعة معهم بشكل فردي.
+
+إذا كنت تتحكم في العديد من المجتمعات المستقرة، مثل مجموعة تبادل العمليات التشغيلية، أو مجموعة خريجين مهنيين، فمن الأنسب لك البدء من هذه "المناطق الخاصة". يمكنك أن تقول بصراحة في المجموعة: أنا أقوم بصنع أداة تساعد الأشخاص على إنشاء التقارير، وقد بدأت للتو في العمل، لكنها لا تزال بدائية جدًا، والآن أريد أن أجد مجموعة من الأشخاص الذين لديهم بالفعل حاجة إلى إعداد التقارير، لمرافقتي لاستخدامها بسلاسة. من بين المتطوعين، يمكنك بعد ذلك اختيار المجموعة الأكثر تطابقًا بناءً على المنصب وطبيعة العمل، وإنشاء مجموعة صغيرة منفصلة، ودعوتهم لتجربتها، وإرسال لقطات الشاشة، والتعبير عن استيائهم، وتقديم الاقتراحات، وقضاء الوقت كل يوم في متابعة ذلك.
+
+إذا كان لديك connections في صناعة عمودية معينة، على سبيل المثال، إذا كانت لديك علاقة جيدة مع بعض معلمي مؤسسات التدريب، أو تعرف مدير أعمال في شركة صغيرة ومتوسطة، فيمكنك إجراء تجربة пилوتية في فصل دراسي أو فريق صغير. يمكن أن تكون الممارسة المحددة: اقتراح خطة تجربة واضحة، على سبيل المثال، في الشهر القادم، سيحاول هذا الفريق استخدام أداتك لإنشاء جميع التقارير الأسبوعية، وتوفر أنت الدعم والتعديلات في الوقت الفعلي، وفي المقابل، يعقدون معك اجتماعًا صغيرًا مدته عشر دقائق كل أسبوع ليخبروك بأكثر الأجزاء سهولة وأكثرها صعوبة في الاستخدام.
+
+### قم بصقل الجزء الأهم فقط
+
+عندما يكون لديك هدف صغير، وتكون قد اخترت المسار الرئيسي، فإن الشيء التالي الذي يجب عليك فعله هو فرض قيد على نفسك بألا تفعل إلا هذا الجزء الصغير فقط.
+
+السمة المشتركة للعديد من الفرق في مرحلة الإطلاق البارد هي: القلق. بمجرد أن يبدأ القلق، من السهل جدًا البحث عن أفعال جديدة: هل يجب علينا أيضًا إنشاء حساب فيديو قصير وتصوير بعض دروس الاستخدام؛ هل يجب علينا إنفاق جزء صغير من الميزانية على إعلان تجريبي صغير؛ هل يجب علينا التواصل مع وسائل إعلام لمعرفة ما إذا كان بإمكانهم كتابة مقال إخباري. **كل شيء يبدو لا غبار عليه، ولكن النتيجة المجتمعة هي أنك تغير الاتجاه كل يوم، ولم تغص في أي مسار أبدًا.**
+
+**يمكنك وضع قيد مرحلي محدد جدًا لنفسك، على سبيل المثال في الأسابيع الأربعة القادمة، سأركز فقط على القيام بأمرين**: أولاً، التحسين المتكرر لتجربة الاستخدام في السيناريوهات الحقيقية حول هؤلاء المستخدمين العشرين، لتحويلها من "بالكاد تعمل" إلى "سهلة الاستخدام بشكل أساسي"؛ ثانيًا، على طول المسار الرئيسي الذي اخترته، استمر في العثور على عدد صغير من المستخدمين الجدد، وتسجيل سلوكهم وتعليقاتهم، لمعرفة أوجه التشابه والاختلاف بينهم وبين الدفعة السابقة.
+
+خلال هذه الأسابيع الأربعة، عندما تواجه أي فكرة جديدة أو فرصة جديدة، اسأل نفسك أولاً: هل هذا الشيء، هل يمكنه أن يدفع بشكل كبير هؤلاء المستخدمين العشرين لاستخدام المنتج بشكل أفضل خلال هذه الفترة، أو أن يساعدني بوضوح في العثور على الدفعة التالية من المستخدمين المماثلين؟
+
+وراء هذه الممارسة، يكمن اعتراف بطبيعة الإطلاق البارد: المعلومات التي تمتلكها في يدك محدودة جدًا، ولا يمكنك اتخاذ قرارات جيدة في العديد من الاتجاهات في نفس الوقت. بدلاً من القيام بقليل من كل شيء في عشرة أماكن، من الأفضل القيام بتحسينات قابلة للتحقق المتكرر في سيناريو محدد ومجموعة محددة. على سبيل المثال، يمكنك أن ترى بوضوح: أنه بالنسبة لهذه المجموعة من الموظفين الجدد في العمليات التشغيلية، قامت الأداة بالفعل بتقليل وقت التحضير للتقرير، وجعلتهم بالفعل أكثر قدرة على توضيح النقاط الرئيسية.
+
+تحتاج إلى إتمام حلقة مفرغة من "**إيجاد المستخدمين → توجيه الاستخدام → جمع التعليقات → تحسين التجربة → المستخدمون على استمرار للاستخدام**". بعد ذلك ستعرف فقط أي نوع من المستخدمين يجب أن تبحث عنه، وما هي اللغة التي تستخدمها للتواصل معهم، في أي مرحلة تحدث أكثر المشاكل، وما هي التعديلات التي يمكنك إجراؤها لإعادتهم. عندما يصبح هذا المسار سلسًا بالنسبة لك، عندها فقط يكون من المناسب التفكير في إضافة قناة جديدة أو تجربة نوع جديد من التعاون.
+
+# ملخص
+
+بالعودة إلى السؤال الأصلي: أريد إنشاء تطبيق، من أين أبدأ هذا الأمر بالضبط، ليكون بداية موثوقة.
+
+كل محتوى هذه المقالة يدور في الواقع حول خط رئيسي واحد: **اكتشف أولاً ما هي الفكرة، ثم انظر في علاقتها باحتياجات المستخدم، ثم قم بتفكيكها خطوة بخطوة إلى مسار استخدام كامل يمكن بناؤه، واستخدامه، وصقله، وتضخيمه بالذكاء الاصطناعي، وإيجاد المستخدمين له.**
+
+في الفصل الأول، بدأنا من الفكرة نفسها، الفكرة لم تعد مجرد تلك الجملة التي تبدو رائعة في رأسك، بل يجب أن تكون موجهة نوع محدد وواضح من المستخدمين، **متأصلة في سيناريو محدد، لمساعدتهم في إنجاز مهمة محددة، وتقديم نهج أفضل من الوضع الراهن**. تعلمت أن تفحص أفكارك من أربعة أبعاد: **طريقة اللعب، رحلة المستخدم، ماذا تفعل، وما هي المشكلة التي تحلها**، وبدأت أيضًا تدرك أن هناك فجوة يسهل تجاهلها بين الفكرة واحتياجات المستخدم. لقد قمعت دافع الإعجاب بنفسك، وبدأت في التمييز بين الاحتياجات الحقيقية والاحتياجات المزيفة، واعترفت بأن الأفكار الجيدة والسيئة لديها اختلافات في المصير منذ البداية. بعد ذلك، لم تعد تنتظر الإلهام بشكل سلبي، بل تعلمت استخراج القرائح بنشاط من حياتك التي تحبها، وأصول الأشخاص من حولك، والفضاءات العامة، والمنتجات الموجودة؛ وعلاوة على ذلك، تدربت على تلخيص جوهر الفكرة في جملة واحدة، واستخدام الذكاء الاصطناعي لجلسات العصف الذهني، للعثور على التمايز الخاص بك في الجمهور والسيناريو ضمن الاتجاهات الشائعة.
+
+ثم في الفصل الثاني، لم تعد تتوقف عند التفكير، بل **بدأت في تعلم كيف تبدأ العمل عمليًا**. تعلمت التبديل ذهابًا وإيابًا بين **التباعد و\*\***التقارب**، واستخدام نهج الماس المزدوج لنشر الأفكار أولاً، ثم **تضييقها إلى مسار عملي حقيقي** بناءً على قيمة المستخدم والجدوى وتكلفة الوقت. تدربت على **الانتقال من التجريد إلى الواقع**، وتفكيك الرغبات الغامضة مثل "أريد إنشاء تطبيق لتحسين الكفاءة" خطوة بخطوة إلى عناصر قابلة للتنفيذ بحد أدنى، حتى يصبح كل إجراء مهمة يمكنك البدء بها اليوم. أخذت السبورة أو الورقة والقلم، رسمت أولاً ثم بنيت، وقسمت التطبيق إلى صفحة رئيسية، صفحة عمليات، وصفحة نتائج، ورسمت الرحلة الكاملة للمستخدم من الدخول إلى الحصول على النتيجة. ولن تعتبر مراجعة الآخرين بعد الآن مجرد نسخ للواجب المنزلي، بل ستبدأ **بوعي في تحليل التنقل، والنماذج، وعرض النتائج، وعمليات التوجيه الخاصة بالآخرين، والاستفادة من الخبرات الجاهزة\*\*. في نفس الوقت، لن تنتظر حتى يكتمل المنتج بالكامل لتسأل المستخدمين، بل في مرحلة النموذج الأولي والمنتج النصف نهائي، ستسأل وأنت ترسم، وتسأل وأنت تبني بوعي، مما يسمح للمستخدمين الحقيقيين بالتدخل في تصميمك في أقرب وقت ممكن.
+في الفصل الثالث، بدأت ببطء في بناء مجموعة من المعايير الخاصة بك للتمييز بين ما هو صالح للاستخدام فقط وما يمكن اعتباره جيدًا حقًا. أنت **لم تعد تقول بشكل غامض أن هذا التطبيق ليس سيئًا، بل تنظر تحديدًا فيما إذا كان قد ساعد المستخدمين على توفير الوقت، أم خفض معدل الخطأ، أم قلل تكلفة التواصل، أم خفف العبء الذهني**. أنت تعلم أن **التطبيق الجيد يجب أن يمكّن المستخدمين من استخدامه تقريبًا دون الحاجة إلى دليل استخدام**، وفي السيناريوهات الرئيسية سيتذكرك المستخدم بشكل طبيعي، كما تفهم النية الحقيقية لفعل الخير الكامنة وراء التطبيق الجيد. بدأت في تفكيك المشاكل الفعلية ونقاط ألم المستخدم إلى مستوى التكلفة الحدية، لتمييز ما إذا كان الاستهلاك وراء ذلك يتمثل في الوقت، أم المال، أم الجهد الذهني، أم المخاطر. في الوقت نفسه، اكتسبت فهمًا أوليًا لـ **الاختلافات بين C-end و B-end**، وأدركت أن الأول يهتم أكثر بالقيمة العاطفية والانتشار، بينما الثاني يركز أكثر على الكفاءة والتكلفة والمخاطر والامتثال. لم تعد تعتمد فقط على إعجابك الشخصي، بل قمت ببناء آلية بسيطة للحصول على ملاحظات، واستخدام ثلاثة أنواع من المؤشرات: الاحتفاظ، وإعادة الزيارة، والتوصية، للحكم على ما إذا كان هذا الشيء يستحق الاستمرار في الاستثمار فيه، ومن خلال ملاحظات المستخدمين المتكررة، تقوم بصقل التطبيق من "أعتقد أنه جيد" إلى "المستخدم يعتقد أنه جيد".
+
+عند الوصول إلى الفصل الرابع، قمت بتوسيع منظورك من المنتج البحت إلى إمكانيات الذكاء الاصطناعي. **قمعت أولاً تلك الرغبة الملحة في استخدام الذكاء الاصطناعي لمجرد استخدام الذكاء الاصطناعي**، وسألت نفسك بجدية عن أمرين: بدون الذكاء الاصطناعي، هل لا يزال هذا التطبيق قابلاً للتطبيق؛ ومع استخدام الذكاء الاصطناعي، ما الذي تم تحسينه تحديدًا. أنت على دراية بالقدرات والحدود الأساسية للذكاء الاصطناعي في النصوص والصور ومقاطع الفيديو والأتمتة، وتعرف الأماكن التي يمكن فيها ترك الأمر للنموذج، والأماكن التي يجب أن يكون فيها تدقيق بشري. لن تكتفي فقط بمستوى تنفيذ الوظائف، بل ستركز على بعض المؤشرات الجوهرية: هل تم تقصير وقت إنجاز المهمة، هل تحسنت جودة النتائج، هل زادت وتيرة الاستخدام، وهل المستخدمون على استعداد لدفع رسوم منفصلة مقابل ميزات الذكاء الاصطناعي.
+
+أخيرًا، في الفصل الخامس، يتم ربط كل هذا مرة أخرى بمشكلة واقعية: حتى لو كان لديك بالفعل تطبيق جيد جدًا، أو حتى تطبيق يستخدم الذكاء الاصطناعي، فبدون مستخدمين، ستظل قيمته صفرًا. **تعلمت أولاً التمييز بين المرحلتين 0–1 و 1–N، والتخلي مؤقتًا عن جميع الأسئلة الضخمة المتعلقة بالتوسع والعلامة التجارية والمؤسسة، والتركيز على أمر واحد: إيجاد طريقة لجعل عشرين مستخدمًا حقيقيًا يستخدمونه أولاً**، وعلى استعداد للعودة بعد الانتهاء. لم تعد تلقي الشبكة بشكل أعمى، بل تبدأ الانطلاق البارد على طول ثلاثة خطوط رئيسية: استخدام المجتمعات المحيطة بك، والأقران، والأصدقاء، لجمع المستخدمين الأوائل ببطء؛ استخدام المحتوى والمزايا المحدودة لجذب أول دفعة من الأشخاص المستعدين لتجربة أشياء جديدة؛ والاستفادة من المنصات والقنوات الحالية لبناء مدخل لنفسك في الأماكن التي يمتلك فيها الآخرون بالفعل حركة مرور. كما تبدأ في تفكيك استراتيجيات الانطلاق البارد بناءً على الكائن المستهدف، والتمييز بين المستخدمين الأوائل، ومقدمي العرض، ومصادر حركة المرور، وأصحاب القنوات، واستخدام طرق مختلفة لكل منهم. عندما تكون الموارد محدودة، لم تعد ترغب في تجربة كل شيء دفعة واحدة، بل ترى بوضوح المسار الأكثر كفاءة والأسهل في البدء بين يديك، وتسلك هذا المسار أولاً بعمق وشمولية، بدلاً من فتح عشر قنوات غير مكتملة بنفس واحد.
+
+إذا جمعت كل هذا المحتوى معًا، فستجد أن المنهجية بأكملها ليست غامضة: **الانطلاق من فكرة موثوقة، والتأكد من تجذرها في احتياجات حقيقية؛ استخدام طرق الرسم، والكتابة، والتفكيك، لـ\*\***تقليص\*\* **إلى تطبيق أصغر قابل للتطبيق؛ استخدام المستخدمين الحقيقيين والمؤشرات الواضحة، لصقله ببطء إلى تطبيق جيد؛ إدخال الذكاء الاصطناعي بشكل معقول في النقاط الرئيسية لتضخيم القيمة؛ أخيرًا، في ظل الموارد المحدودة، استخدام طريقة انطلاق باردة مناسبة للعثور على أول دفعة من الأشخاص المستعدين للدفع مقابلها**.
+
+في الخطوة التالية، تحتاج فقط إلى التخلي عن الأوهام المفرطة، واختيار أحدها بشكل واقعي لبنائه وإطلاقه، والسماح له بالدخول إلى العالم الحقيقي للاختبار. **جميع المناقشات حول الأفكار، والمنهجيات، والذكاء الاصطناعي، والنمو، يجب أن تترسخ في النهاية على شخص محدد، وفي سيناريو محدد، وعلى مهمة محددة.**
+
+لهذا السبب، لا بأس إذا كان ما قمت به في البداية خشنًا، ولا بأس إذا كانت الوظائف غير مكتملة، أو العملية متصلبة، أو الواجهة بسيطة؛ ولا بأس أيضًا إذا قمت بالترويج لفترة طويلة ولم يهتم بك أحد، ناهيك عن استعداد أي شخص للتسجيل والدفع. كل هذه مجرد حالات في العملية، وليست استنتاجات نهائية؛ إنها تخبرك فقط بكيفية التعديل في الخطوة التالية، وما هو مهم حقًا هو أن تحرز تقدمًا، فأثناء العملية تحتاج إلى المراجعة المستمرة، والتلخيص، ورفع الحد الأقصى، والتعرف على المزيد من الأشخاص المستعدين لتقديم النصائح لك.
+
+في هذه المرحلة، في رأي الكاتب، فقط استمتع بالعملية. كما تقول لعبة قصة إلكترونية شهيرة "To the Moon":
+
+**_"The ending isn't any more important than any of the moments leading to it."_**
+
+**_النهاية لن تكون أهم من العملية أبدًا._**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image21.png)
\ No newline at end of file
diff --git a/docs/ar-sa/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/ar-sa/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..c466c19
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,359 @@
+# مقارنة بين سبع أدوات برمجة بالذكاء الاصطناعي
+
+## مقدمة الفصل
+
+أمام هذا الكم الهائل من أدوات البرمجة بالذكاء الاصطناعي، أيُّها الأنسب لك؟ في هذا الفصل، نُجري تقييمًا أفقيًا معمّقًا لسبع منصات Vibe Coding على الويب — منها Lovable و Replit و Z.ai — من خلال مهمة عملية موحدة: تطوير لعبة "الثعبان + كتابة القصائد بالذكاء الاصطناعي". سنقارنها من عدة أبعاد مثل سهولة الاستخدام للمبتدئين، والتحكم في الكود، وسهولة النشر، لمساعدتك على اختيار أقوى أداة مساعدة في التطوير.
+
+---
+
+# 1. بناء لعبة الثعبان باستخدام Vibe Coding: دراسة تعليمية كاملة
+
+تقدم هذه المقالة ممارسة تطوير برمجية جديدة تُسمّى "Vibe Coding"، والتي تستفيد من الذكاء الاصطناعي لتسريع عملية بناء التطبيقات.
+
+بعد ذلك، سنقدم بالتتابع المفاهيم الأساسية لـ Vibe Coding، ونشرح ما هو AI Agent، ونقدم أساليب عملية لكتابة الأوامر التوجيهية (Prompts). أخيرًا، سنبني من الصفر لعبة "الثعبان (Snake)" كتطبيق عملي كامل، مع مقارنة وتقييم مفصّل لعدة منصات Vibe Coding رئيسية، لمساعدتك على اختيار مجموعة الأدوات الأنسب لك.
+
+## ما ستتعلمه:
+
+- **ما هو Vibe Coding:** تعرّف على تعريفه، وسير عمله، ومزاياه الرئيسية.
+- **دور AI Agent:** افهم طريقة عمل AI Agent والفرق بينه وبين البرامج التقليدية.
+- **كيفية كتابة أوامر توجيهية جيدة:** أتقن كتابة أوامر واضحة ومحددة للحصول على نتائج أفضل.
+- **أدوات Vibe Coding:** تعرّف على مجموعة من منصات البرمجة والتصميم بالذكاء الاصطناعي.
+- **مقارنة المنصات:** قيّم وقارن بين مزايا وعيوب 7 منصات AI Agent مختلفة من منظور المبتدئين.
+- **أدوات UI / UX:** تعلّم كيفية دمج أدوات UI/UX مثل Figma و Mastergo في سير العمل الشامل.
+
+## 1. مقدمة
+
+في الدروس السابقة، كنا نستخدم نموذج التطوير الشامل من z.ai لإنجاز مهام البرمجة.
+
+لكن هل فكّرنا يومًا: جوهره هو في الواقع "AI Agent" (يختلف عن الذكاء الاصطناعي التفاعلي العادي، وهو أكثر ذكاءً بكثير)؟ فهو لا يقتصر على التحدث معك، بل يستطيع التفكير (عندما تعطيه مهمة، يضع خطة أولاً)، ويتخذ إجراءات بشكل استباقي (مثل الاتصال بالبحث على الويب، وتنفيذ أوامر الكمبيوتر، وفتح صفحات الويب وغيرها من الأدوات). سنتحدث عن هذا بالتفصيل لاحقًا.
+
+## 1. ما هو Vibe Coding؟
+
+Vibe Coding هو أسلوب جديد في تطوير البرمجيات يستفيد من الذكاء الاصطناعي لتسريع عملية تطوير التطبيقات. إنه ليس بديلاً عن البرمجة التقليدية، بل هو نمط برمجة أكثر "تحاوريًا". ابتكر هذا المفهوم باحث الذكاء الاصطناعي Andrej Karpathy: في سير العمل هذا، لم يعد المطور يكتب الكود سطرًا بسطر، بل يوجّه AI Agent بشكل أساسي لتوليد التطبيقات وتحسينها وتصحيح أخطائها.
+
+الفكرة الأساسية في Vibe Coding هي التحول من **"التركيز على الكود (code-first)"** إلى **"التركيز على النية (intent-first)"**. لم تعد بحاجة للبدء بالتفكير من أول سطر كود، بل تصف ما تريده باللغة الطبيعية.
+
+سير العمل النموذجي لـ Vibe Coding هو حلقة تكرارية مستمرة:
+
+- **وصف الهدف:** صِف الميزة التي تريد تنفيذها بجملة أو فقرة، مثل: "اصنع لعبة ثعبان بسيطة مع خلفية Python يمكنها توليد القصائد."
+- **توليد الكود بالذكاء الاصطناعي:** يحلل AI Agent متطلباتك ويولّد النسخة الأولى من الكود، بما في ذلك الهيكل الأساسي وصفحة الواجهة الأمامية ومنطق الواجهة الخلفية.
+- **التشغيل والملاحظة:** شغّل الكود المُولَّد، وتحقق مما إذا كان يعمل كما هو متوقع، واكتشف الأخطاء أو أوجه القصور.
+- **التكرار والتحسين:** إذا كانت هناك أخطاء أو النتائج غير مُرضية، استمر في إعطاء التعليمات في المحادثة، مثل: "الثعبان يتحرك ببطء شديد، زيّد السرعة"، أو "ملف `.env` لا يقرأ مفتاح API بشكل صحيح، أصلح كود الواجهة الخلفية."
+- **كرر الخطوات أعلاه:** استمر في التكرار ضمن حلقة "وصف ← توليد ← تشغيل ← تحسين" حتى يصل التطبيق إلى حالة مُرضية.
+
+### المزايا الرئيسية لـ Vibe Coding:
+
+- **خفض الحاجز:** يتيح للمصممين ورواد الأعمال والطلاب الذين يفتقرون إلى خبرة البرمجة المشاركة في تطوير التطبيقات عبر اللغة الطبيعية.
+- **النماذج الأولية السريعة:** يُقلّص الوقت من الفكرة إلى الحد الأدنى من المنتج القابل للتطبيق (MVP) بشكل كبير.
+- **رفع الكفاءة:** يعالج تلقائيًا الكثير من أعمال الترميز المتكررة والآلية (مثل الكود النموذجي)، مما يتيح للمطورين التركيز على التصميم المعماري وتجريد المشكلات.
+- **تسهيل التجريب:** يشجع على الإنتاج السريع أولاً ثم التحسين المستمر، مما يجعل تجربة الأفكار والميزات الجديدة أسهل.
+
+## 2. ما هي منصات Vibe Coding عبر الويب (Web-based)؟
+
+في هذا الاختبار العملي، ستلاحظ أن الأدوات التي نقيمها مقسمة إلى فئتين: **Web-based (منصات عبر الويب)** و **IDE (بيئات تطوير محلية)**.
+
+رغم أن جوهرها جميعًا هو استخدام الذكاء الاصطناعي لكتابة الكود، إلا أن هناك اختلافات كبيرة في تجربة الاستخدام والسيناريوهات المطبقة:
+
+### منصات Vibe Coding عبر الويب (Web-based)
+
+**الأدوات الممثلة:** Lovable، Replit، Z.ai، v0
+
+هذا مثل "شقة فندقية جاهزة للسكن".
+
+- **لا حاجة لإعداد البيئة:** لا تحتاج للقلق بشأن بيئة Python أو إصدار Node.js، ولا حول تثبيت التبعيات. افتح المتصفح، أدخل العنوان، وابدأ بكتابة الكود مباشرة.
+- **معاينة ونشر بنقرة واحدة:** بعد توليد الكود، تعرض المنصة عادةً النتيجة تلقائيًا في نافذة جانبية. وعند الانتهاء، اضغط على زر للحصول على رابط لمشاركته مع أصدقائك.
+- **السيناريوهات المناسبة:**
+  - **التحقق السريع من الأفكار (MVP):** لديك فكرة في ذهنك وتريد قضاء نصف ساعة لترى إن كان يمكنك تنفيذها.
+  - **للمبتدئين:** لا تريد أن تُحبط بسبب أخطاء البيئة المعقدة، وتريد فقط تجربة متعة البرمجة بالذكاء الاصطناعي.
+  - **التطبيقات الخفيفة:** صنع صفحة أداة بسيطة أو لعبة صغيرة أو صفحة عرض شخصية.
+
+### AI IDE (بيئة التطوير المحلية)
+
+**الأدوات الممثلة:** Cursor، Trae، VS Code + إضافات AI
+
+هذا مثل "منزل مملوك مُشطَّب بالكامل".
+
+- **قدرات محلية قوية:** يعمل على كمبيوترك، ويمكنه الوصول مباشرة إلى جميع ملفاتك المحلية والاستفادة من قوة المعالجة في جهازك.
+- **تكامل سلس مع سير العمل المهني:** مناسب للمشاريع الكبيرة، حيث يمكنك تثبيت مكونات إضافية متنوعة بحرية، والاتصال بقواعد البيانات المحلية، وإجراء تصحيح الأخطاء المعقد.
+- **السيناريوهات المناسبة:**
+  - **تطوير المشاريع المهنية:** المشاريع التجارية التي تتطلب صيانة طويلة الأمد وهيكلًا معقدًا.
+  - **التخصيص العميق:** تحتاج إلى تحكم دقيق في تفاصيل الكود، أو تحتاج إلى تكامل عميق مع سير العمل المحلي (مثل Git و Docker).
+  - **خصوصية البيانات:** الكود بالكامل محليًا، مما يتوافق بشكل أكبر مع معايير الأمان لبعض المؤسسات.
+
+**باختصار:** إذا كنت قد بدأت للتو في البرمجة بالذكاء الاصطناعي، أو تريد فقط صنع شيء صغير بسرعة، فإن **المنصات عبر الويب** هي نقطة بداية ممتازة. أما إذا كنت مطورًا محترفًا، أو أصبح مشروعك أكثر تعقيدًا، فإن **بيئة التطوير المحلية (IDE)** ستوفر لك إمكانيات أعلى.
+
+---
+
+## 3. ما هو AI Agent؟
+
+### ما هو AI Agent؟
+
+AI Agent هو نظام برمجي قادر على إدراك البيئة واتخاذ القرارات والتصرف بشكل مستقل لتحقيق أهداف محددة. مقارنة بالبرمجيات التقليدية التي تتبع تعليمات ثابتة وتدفقات عمل واحدة، فإن AI Agent أكثر مرونة وقدرة على التكيف.
+
+فيما يلي بعض السمات الرئيسية التي تميز AI Agent عن البرامج التقليدية:
+
+- **الاستقلالية (Autonomy):** يتمتع AI Agent بمستوى عالٍ من الاستقلالية. البرامج التقليدية تتطلب عادةً أن يقوم الإنسان بتشغيلها خطوة بخطوة، بينما يمكن لـ Agent أن يقرر بشكل مستقل الخطوة التالية بناءً على الهدف.
+- **الإدراك والذاكرة (Perception & Memory):** يجمع Agent البيانات من البيئة (مثل استجابات API وبيانات المستشعرات ومُدخلات المستخدم)، ويحتفظ بالسياق من خلال "الذاكرة"، مما يتيح له إعادة استخدام الخبرات في الإجراءات اللاحقة والتحسين المستمر.
+- **العقلانية والتوجه نحو الهدف (Rationality & Goal-Orientation):** يحلل Agent ويخطط حول الهدف المحدد، ويختار تسلسل الإجراءات الأنسب لتحقيق "مؤشرات أداء" أعلى.
+- **استخدام الأدوات (Tool Use):** من أبرز سمات AI Agent الحديثة قدرته على استدعاء أدوات خارجية، ولم يعد مقتصرًا على "توليد النصوص". على سبيل المثال، يمكنه تصفح الويب، وتشغيل الكود، والاستعلام من قواعد البيانات، وإرسال البريد الإلكتروني، فهو "عقل ينسق الأدوات".
+
+يمكن فهمه بهذا التشبيه:
+
+- **البرنامج التقليدي** مثل الآلة الحاسبة. تعطيه أرقامًا ومعاملات، وهو ينفذ الحساب فقط عند ضغطك على الزر.
+- **مساعد الذكاء الاصطناعي** مثل المساعد البشري. تطلب منه "ساعدني في العثور على مطاعم قريبة"، فيبحث لك ويعرض الخيارات، لكن القرار النهائي يعود إليك.
+- **AI Agent** أشبه بفريق بحثي آلي. تحتاج فقط إلى إعطائه هدفًا عامًا (مثل "خطط لي رحلة إلى اليابان")، فيقوم بتفكيك المهام، والبحث على الإنترنت، وحجز الطيران والفنادق (عبر API)، وتنظيم الجدول، ويسلّمك النتيجة النهائية، كل ذلك تقريبًا دون الحاجة لتدخلك في التفاصيل.
+
+---
+
+# 2. حول كتابة الأوامر التوجيهية (Prompts)
+
+## 1. هل الأفضل كتابة أمر توجيهي واحد كامل، أم تقسيمه إلى خطوات متعددة؟
+
+كثير من الناس يغريهم التفكير في كتابة "تطبيق شامل كامل" في أمر توجيهي واحد. في الواقع، الأدوات الحالية أصبحت قوية بما يكفي، ومن الممكن بالفعل الحصول على نتيجة تبدو جيدة من المحاولة الأولى. لكن من حيث التجربة الشاملة ومعدل النجاح، فإن تقسيم العمل إلى خطوات صغيرة والتكرار المرحلي غالبًا ما يعطي نتائج أفضل، ويقلل من خطر الدخول في "طريق مسدود" لا يمكن تعديله.
+
+> **نصيحة صغيرة:** بدلاً من توقع "النتيجة المثالية من المحاولة الأولى"، قسّم الهدف الكبير إلى مهام صغيرة قابلة للتنفيذ (To-do).
+> على سبيل المثال، لا تقل مباشرة "build me a Snake game"، بل قسّمها إلى:
+> "1. اصنع أولاً واجهة أمامية للعبة الثعبان"،
+> "2. ثم نفّذ واجهة خلفية لتسجيل النقاط"،
+> "3. أخيرًا اربط الواجهتين الأمامية والخلفية".
+> هذا يتيح للذكاء الاصطناعي فهم متطلباتك بدقة أكبر وإعطاء مخرجات أكثر موثوقية.
+
+## 2. كلما كان أوضح، كان أفضل
+
+- في Vibe Coding، فإن الأوامر التوجيهية التي تكتبها بنفس أهمية الكود الذي تكتبه. كلما كانت التعليمات أوضح وأكثر تحديدًا، كانت النتائج أقرب لما تتصوره.
+- توضيح الأهداف والقيود منذ البداية يُقلل من عدد التعديلات اللاحقة، مما يوفر الوقت ويقلل من استخدام الحصة والتكلفة.
+
+---
+
+# 3. نظرة عامة على الأدوات (Vibe Coding / أدوات UIUX)
+
+## 1. منصات AI Agent
+
+| **الاسم**                                   | **المنصة** |
+| ------------------------------------------ | ------------ |
+| **[Lovable](https://lovable.dev/)**        | Web-based    |
+| **[Cursor](https://cursor.com/cn/agents)** | PC           |
+| **[Z.ai](https://chat.z.ai/)**             | Web-based    |
+| **[Replit](https://replit.com/~)**         | Web-based    |
+| **[Minimax](https://agent.minimaxi.com/)** | Web-based    |
+| **[Trae](https://www.trae.ai/)**           | PC           |
+| **[V0](https://v0.app/)**                  | Web-based    |
+
+## 2. منصات AI UIUX
+
+| **الاسم**                              | **المنصة**           |
+| ------------------------------------- | -------------------- |
+| **[Mastergo](https://mastergo.com/)** | Web-based            |
+| **[Figma](https://www.figma.com/)**   | Web-based, PC Plugin |
+
+---
+
+# 4. التطبيق العملي (Vibe Coding + تكامل UI)
+
+1. في نافذة المحادثة الخاصة بمنصة Vibe Coding التي اخترتها، أدخل وصف البرنامج الذي تريده.
+   مثال:
+
+   > يُرجى بناء تطبيق ويب بسيط للعبة الثعبان (Snake) مع واجهة أمامية وواجهة خلفية.
+   >
+   > 1. الواجهة الأمامية
+   >
+   > - الصفحة 1: صفحة اللعبة
+   >   - استخدم لوحة المفاتيح للتحكم في حركة الثعبان.
+   >   - ما يأكله الثعبان ليس طعامًا، بل كلمات إنجليزية.
+   >   - يعرض الشريط الجانبي الكلمات المجمّعة وعددها.
+   >   - بعد انتهاء اللعبة، تظل الكلمات المجمّعة محفوظة وتستمر في الجولة الجديدة.
+   > - الصفحة 2: صفحة كتابة القصائد (Make Poem)
+   >   - تعرض نفس قائمة الكلمات الموجودة في صفحة اللعبة (البيانات متسقة).
+   >   - توفر زرًا لإرسال الكلمات المجمّعة إلى الواجهة الخلفية لتوليد قصيدة.
+   >   - بعد توليد القصيدة، تُزال الكلمات المُستخدَمة من القائمة أو يُنقص عددها.
+   >
+   > * أضف تنقلًا بسيطًا للتبديل بين صفحتي Game و Make Poem.
+   > * تأكد من أن الكلمات المجمّعة مرئية في كلتا الصفحتين.
+   >
+   > 2. الواجهة الخلفية
+   >
+   > - وفر واجهة خلفية تستقبل الكلمات المجمّعة وتُرجع قصيدة.
+   > - استخدم DeepSeek API لتوليد القصائد.
+   > - خزّن مفتاح API في ملف `.env`، وتجاهل هذا الملف في `.gitignore`.
+
+2. أدخل مفتاح DeepSeek API الخاص بك. (يمكنك الحصول عليه من [https://platform.deepseek.com/](https://platform.deepseek.com/))
+   1. يُستخدم مفتاح API للنموذج اللغوي الكبير (LLM) لاستدعاء النموذج في مشروعك الخاص. وبما أنه معلومات حساسة، فلا يمكن نشرها، لذلك يجب كتابتها بشكل منفصل في ملف الإعدادات.
+      **لماذا نستخدم ملف `.env` ولا نرفعه إلى GitHub؟**
+   - ملف `.env` مخصص لتخزين **المفاتيح أو كلمات المرور** (مثل مفتاح DeepSeek API).
+   - إذا رُفع هذا الملف إلى GitHub، يمكن لأي شخص في العالم رؤية مفتاحك واستخدامه بشكل غير مصرح به.
+   - لأسباب أمنية، نحتاج إلى إعلان تجاهل `.env` في ملف `.gitignore`، حتى لا يتتبعه Git.
+   - هكذا، يمكن لمشروعك استخدام هذه المفاتيح محليًا بشكل طبيعي دون تسريبها في المستودع.
+
+3. بعد عرض النتيجة المُولَّدة، إذا وجدت أخطاء أو أشياء تحتاج إلى تعديل، يمكنك إدخال طلب التعديل مباشرة في نافذة المحادثة.
+4. إذا لم تكن راضيًا عن تصميم الصفحة، يمكنك أيضًا اختيار إعادة تصميم الواجهة في Figma أو Mastergo، ثم إعادة أفكار التصميم إلى Agent.
+
+- **مثال**
+
+> يُرجى تصميم **تطبيق ويب بصفحتين** باسم _Word-Snake_.
+>
+> - **صفحة Game:**
+> - يتحرك الثعبان عبر لوحة المفاتيح.
+> - الثعبان يأكل كلمات إنجليزية بدلاً من الطعام العادي.
+> - يعرض الشريط الجانبي الأيمن الكلمات المجمّعة وعددها.
+> - بعد انتهاء اللعبة، لا يُمسك مخزون الكلمات، بل يُستمر في الجولة الجديدة.
+> - **صفحة Make Poem:**
+> - تعرض نفس مخزون الكلمات المشترك.
+> - يختار المستخدم بعض الكلمات وينقر على زر **Generate Poem**.
+> - تُرسل هذه الكلمات إلى الواجهة الخلفية لتوليد قصيدة عبر DeepSeek API.
+> - بعد توليد القصيدة، تُحذف أو يُنقص عدد الكلمات المُستخدَمة من المخزون.
+> - **التنقل:** عبر تبويب بسيط أو قائمة علوية للتبديل بين الصفحتين.
+> - **الحالة المشتركة:** تأكد من أن الكلمات المجمّعة تظل متزامنة ومرئية في كلتا الصفحتين.
+
+- **نموذج للنتيجة**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. مقارنة منصات AI Agent (كيفية اختيار أفضل مجموعة للمشاريع البسيطة)
+
+تتمتع منصات Vibe Coding المختلفة بخصائص وسير عمل متنوعة. استخدمنا نفس متطلبات "لعبة الثعبان مع DeepSeek API" للاختبار العملي على منصات متعددة، وقمنا بتقييمها من منظور المبتدئين. فيما يلي ملخص.
+
+## 1. معايير المقارنة
+
+1. **الهدف (Goal)**
+   بناء تطبيق ويب للعبة الثعبان (Snake) متصل بـ DeepSeek API.
+2. **تفاصيل اللعبة (Game Details)**
+   1. تولّد اللعبة قصائد عبر DeepSeek LLM API.
+   2. الثعبان يأكل كلمات إنجليزية، والكلمات المجمّعة تظل محفوظة بعد انتهاء اللعبة وتُستخدم في الجولة الجديدة. يمكن جمع نفس الكلمة عدة مرات وتُحسب بشكل منفصل.
+   3. عند توليد قصيدة، تُزال الكلمات المُستخدَمة من المخزون.
+
+3. **الميزات الضرورية (Must-Haves)**
+   1. صفحة واجهة أمامية قابلة للتشغيل، تتضمن لعبة الثعبان (تحكم بلوحة المفاتيح، عرض عبر Canvas).
+   2. آلية جمع الكلمات (تظهر الكلمات على اللوحة، وعند أكل الثعبان لكلمة، يُحدَّث الشريط الجانبي).
+   3. الحفاظ على مخزون الكلمات بين جولات اللعب المتعددة.
+   4. واجهة خلفية تستخدم DeepSeek API (إذا لم يكن لديك مفتاح API، يمكن إرجاع قصيدة تجريبية أولاً).
+   5. زر "توليد قصيدة": عند النقر عليه يستدعي الواجهة الخلفية، ويعرض القصيدة، ويُحدِّث مخزون الكلمات بناءً على الاستخدام.
+   6. دعم مفتاح API عبر `.env`، وتجنب تسريب المفتاح عبر `.gitignore`.
+
+4. **ميزات إضافية (Nice-to-Haves)**
+   1. يمكن للمستخدم اختيار الكلمات التي يريد استخدامها لتوليد القصيدة.
+   2. تجربة مستخدم مريحة (مثل شريط جانبي يعرض قائمة الكلمات بوضوح، وتخطيط منطقي لمنطقة عرض القصائد).
+   3. إضافة تعليقات في الكود للمبتدئين تشرح المنطق الأساسي.
+
+## 2. مقارنة مخرجات البرمجة
+
+### 1. Lovable (Web-based)
+
+- **نوع المنصة:** عبر الويب
+- **الخصائص الرئيسية وسير العمل:** يتميز Lovable بالتكامل والتعاون، حيث يُتمت تلقائيًا مهام التهيئة مثل الاتصال بقاعدة بيانات Supabase، مما يجعل عملية إعداد المشروع سلسة جدًا. تحتاج فقط إلى وصف متطلبات المشروع، وسيقوم Agent بربط الخدمات المختلفة وبناء الهيكل الأساسي.
+- **المستخدمون المناسبون:** بالنسبة للمبتدئين الذين يجربون Vibe Coding لأول مرة، يُعد Lovable خيارًا ودودًا للغاية. فهو يُبسّط تعقيد تنسيق الخدمات المتعددة، مما يتيح لك التركيز على الأوامر التوجيهية والتكرار بدلاً من إعداد البيئة. بفضل الأتمتة العالية، يمكنك الحصول بسرعة على نموذج أولي قابل للتشغيل.
+- **عملية الأوامر التوجيهية:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **نتيجة لعبة الثعبان:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **السعر:** مرتفع نسبيًا، ولكن إذا كان لديك بريد إلكتروني جامعي، يمكنك التحقق من هويتك كطالب للحصول على نصف السعر.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor (IDE)
+
+- **نوع المنصة:** تطبيق سطح مكتب (PC)
+- **الخصائص الرئيسية وسير العمل:** Cursor هو IDE متكامل مع قدرات الذكاء الاصطناعي، يدعم Windows و macOS و Linux. يُدمج توليد الكود وإعادة الكتابة الذكية والبحث في قاعدة الكود مباشرة في بيئة التطوير. مقارنة بأدوات الويب، فهو أقرب إلى تجربة التطوير المحلي التقليدية. نظرًا لأنه بيئة محلية، تختلف إعدادات الكمبيوتر من جهاز لآخر، وقد تواجه أحيانًا مشاكل متعلقة بالبيئة. الميزة هي أن المشروع على جهازك المحلي، ولا حاجة لتنزيل أو إعداد بيئة تشغيل إضافية، حيث يعالج Cursor الكثير من الخطوات المرهقة نيابةً عنك.
+- **المستخدمون المناسبون:** للمستخدمين الذين لديهم بالفعل بعض أساسيات البرمجة، يُعد Cursor بيئة مألوفة وقوية جدًا. ولكن للمبتدئين تمامًا، يحتاجون إلى فهم بنية المشروع وإدارة التبعيات وتنظيم الملفات بأنفسهم، مما يجعل منحنى التعلم أكثر انحدارًا. وهو أكثر ملاءمة للمطورين الذين يريدون إضافة مساعد ذكاء اصطناعي إلى سير البرمجة التقليدي.
+- **عملية الأوامر التوجيهية:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **نتيجة لعبة الثعبان:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **السعر:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai (Web-based)
+
+- **نوع المنصة:** عبر الويب
+- **الخصائص الرئيسية وسير العمل:** طريقة استخدام Z.ai مباشرة نسبيًا، لكن هناك تحديًا واضحًا: تحتاج إلى **نسخ الكود المُولَّد ولصقه يدويًا**. تفتقر المنصة نفسها إلى نافذة معاينة فورية، لذا يصعب رؤية نتيجة تشغيل الكود في الوقت المناسب.
+- **المستخدمون المناسبون:** تتطلب هذه المنصة أسلوبًا "عمليًا" في الاستخدام. غياب الأتمتة يعني أنه يجب عليك التعامل مع الكود مباشرة، وهو ما يمثل تدريبًا لمن يريد فهم مخرجات الذكاء الاصطناعي بعمق. لكن النسخ واللصق المتكرر يسبب مشاكل في الكفاءة وخطر الأخطاء. وهي أكثر ملاءمة لمن يريد رؤية "الكود الخام من مخرجات الذكاء الاصطناعي"، وليس لمن يسعى لتجربة بنقرة واحدة.
+- **عملية الأوامر التوجيهية:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **نتيجة لعبة الثعبان:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **السعر:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit (Web-based)
+
+- **نوع المنصة:** عبر الويب
+- **الخصائص الرئيسية وسير العمل:** Replit هو بيئة تطوير ونشر شاملة عبر الإنترنت، حيث يمكنك كتابة الكود وتشغيل البرامج وإنشاء عنوان وصول عبر الإنترنت من المتصفح. قبل بدء البرمجة، يقدم خطة عمل واضحة؛ كما يوفر محررًا مرئيًا يمكنك من خلاله تعديل واجهة المستخدم مباشرة في نافذة المعاينة، ويتم تحديث الكود المصدري تلقائيًا. هذا يتيح لك التحقق في أي وقت مما إذا كانت مخرجات الذكاء الاصطناعي تتوافق مع التوقعات، ويقلل بشكل كبير من عدد التعديلات ذهابًا وإيابًا.
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **المستخدمون المناسبون:** Replit ودود جدًا للمبتدئين. فهو يُبسّط الحلقة الكاملة من البرمجة إلى النشر، دون الحاجة لإعداد خوادم أو خدمات استضافة إضافية بنفسك. ميزات التعاون قوية أيضًا، ومناسبة للطلاب الذين يعملون معًا في مشروع أو يطلبون مساعدة الآخرين عن بُعد لمراجعة الكود.
+- **عملية الأوامر التوجيهية:** أثناء عملية البناء، لم يفهم الذكاء الاصطناعي المتطلبات بالكامل من البداية، وخضع لحوالي 3 جولات من التكرار قبل أن تصل المخرجات النهائية إلى المستوى المطلوب.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **نتيجة لعبة الثعبان:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **السعر:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Minimax (Web-based)
+
+- **نوع المنصة:** عبر الويب
+- **الخصائص الرئيسية وسير العمل:** يستغرق Minimax وقتًا أطول عادةً في تنفيذ المهام. تشمل عمليته غالبًا: اكتشاف الذكاء الاصطناعي للأخطاء وإصلاحها تلقائيًا، لذلك قد تكون العملية بأكملها بطيئة وحتى مرهقة بعض الشيء. في هذا المشروع كمثال، يضع Agent عادةً خطة مفصلة أولاً، ثم يبني خطوة بخطوة الواجهة الخلفية وقاعدة البيانات ومنطق الواجهة الأمامية.
+- **المستخدمون المناسبون:** نظرًا لأنه يُشغّل الاختبارات ويصلح الأخطاء تلقائيًا، فإن استهلاك الوقت والرموز (Tokens) كبير نسبيًا، لكن يمكنك رؤية بوضوح كيف يحدد الذكاء الاصطناعي المشاكل ويحلها، مما يجعله ذا قيمة تعليمية كبيرة.
+- **عملية الأوامر التوجيهية:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+- **نتيجة لعبة الثعبان:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+
+- **السعر:** الإصدار المجاني قد لا يتمكن من إكمال المشاريع المعقدة من البداية إلى النهاية بسلاسة، لذا يُوصى بشدة بالترقية إلى الإصدار المدفوع لضمان بناء المشروع بالكامل.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+### 6. Trae (IDE)
+
+- **نوع المنصة:** تطبيق سطح مكتب (PC)
+- **الخصائص الرئيسية وسير العمل:** كتطبيق سطح مكتب، يتميز Trae عادةً بأداء أفضل وسرعة استجابة أعلى مقارنة بأدوات الويب. لكنه يتطلب التنزيل والتثبيت، مما يرفع قليلاً من حاجز الدخول لبعض المستخدمين. وبالمثل، نظرًا لكونه بيئة محلية، فإن اختلاف إعدادات الكمبيوتر وبيئات التبعية بين الأجهزة المختلفة يضيف قدرًا من عدم اليقين. الميزة هي أن Trae يساعدك في إنشاء المشروع وإعداد التشغيل محليًا، ويمكنك التطوير والتصحيح مباشرة على جهازك.
+- **المستخدمون المناسبون:** أكثر ملاءمة للمستخدمين الذين يخططون لمشاريع Vibe Coding طويلة الأمد ويرغبون في استخدام أداة سطح مكتب مخصصة. للطلاب الذين يريدون فقط "التجربة أحيانًا"، قد لا يكون الخيار الأخف.
+- **عملية الأوامر التوجيهية:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+- **نتيجة لعبة الثعبان:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+
+- **السعر:** السعر معقول نسبيًا، وحتى الإصدار المجاني كافٍ لإنجاز مشاريع صغيرة بجودة جيدة.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+### 7. V0 (Web-based)
+
+- **نوع المنصة:** عبر الويب
+- **الخصائص الرئيسية وسير العمل:** V0 هو أداة متخصصة في توليد مكونات React UI، تقدمها Vercel. يتميز بتوليد واجهات عالية الجودة وقابلة للاستخدام في بيئة الإنتاج. لكن في الاستخدام الفعلي، قد تواجه مشاكل مثل "صعوبة العثور على عرض الكود" و"عدم وجود توضيح واضح حول مكان تكوين مفتاح API".
+- **المستخدمون المناسبون:** V0 مناسب جدًا للطلاب أو المصممين المهتمين بالواجهة الأمامية وتصميم UI/UX. لكنه ليس حلاً شاملاً متكاملاً، ولا يزال يتعين عليك استخدام منصات أخرى لتنفيذ منطق الواجهة الخلفية وتكامل API، لذلك إذا كان هدفك "بناء تطبيق كامل في مكان واحد"، فقد لا يكون الخيار الأول الأفضل.
+- **عملية الأوامر التوجيهية:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
+
+- **نتيجة لعبة الثعبان:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
+- **السعر:** يمكن للمستخدمين المجانيين بناء حوالي 4-5 مشاريع بسيطة.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
+
+## 3. ملخص المقارنة بين المنصات
+
+| **المنصة**                                   | **التقييم**                                                                     | **نوع المنصة** | **ملاحظات**                                                                      |
+| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
+| **[Lovable](https://lovable.dev/)**        | ودود جدًا مع مبتدئي البرمجة بالذكاء الاصطناعي، سهل البدء وتجربة سلسة، خيار مثالي للبدء.                 | Web-based    | يُتمت تلقائيًا الاتصال بخدمات مثل Supabase، مما يُقلل تكلفة الإعداد.                                   |
+| **[Cursor](https://cursor.com/cn/agents)** | مناسب للمستخدمين الذين لديهم خبرة تطوير مسبقة، يرفع الإنتاجية وجودة الكود بشكل كبير.                             | PC           | يتطلب بعض أساسيات البرمجة، ويجب فهم بنية المشروع والتبعيات في البيئة المحلية بنفسك.                         |
+| **[Z.ai](https://chat.z.ai/)**             | أكثر ملاءمة للمستخدمين الذين لديهم أساسيات برمجة ويريدون دراسة تفاصيل كود مخرجات الذكاء الاصطناعي مباشرة.                           | Web-based    | لا توجد نافذة معاينة، وفحص النتائج أكثر صعوبة؛ يتطلب لصق الكود يدويًا وإنشاء المجلدات والملفات وتشغيل الخدمة يدويًا. |
+| **[Replit](https://replit.com/~)**         | موصى به للمستخدمين الذين يريدون تحويل أفكارهم بسرعة إلى خدمة عبر الإنترنت قابلة للوصول.                                   | Web-based    | بيئة تطوير ونشر شاملة عبر الإنترنت، تدعم التعاون وتوفر محررًا مرئيًا.                             |
+| **[Minimax](https://agent.minimaxi.com/)** | مناسب لمن يريد رؤية العملية الكاملة للبحث عن الأخطاء وإصلاحها تلقائيًا بالذكاء الاصطناعي والتعلم منها، لكنه بطيء نسبيًا ويستهلك رموزًا كثيرة. | Web-based    | العملية بأكملها طويلة، ويُشغّل الذكاء الاصطناعي الاختبارات ويصلح الأخطاء عدة مرات تلقائيًا.                                |
+| **[Trae](https://www.trae.ai/)**           | للمستخدمين ذوي الخبرة في البرمجة الذين يتطلعون لاستخدام مزيج IDE سطح المكتب + AI Agent، أداة قوية لتعزيز الكفاءة. | PC           | يتطلب تثبيتًا محليًا وإعداد بيئة، لكن أداءً أفضل، ومناسب لمشاريع Vibe Coding طويلة الأمد.              |
+| **[V0](https://v0.app/)**                  | مُحسَّن لغير المطورين الذين يريدون صنع تأثيرات مرئية سريعة لـ React UI، مناسب للطلاب ذوي التوجه الأمامي/التصميم.  | Web-based    | متخصص في توليد React UI، ويحتاج للتعاون مع منصات أخرى لإكمال الواجهة الخلفية وبناء التطبيق الكامل.                  |
+---
+title: 'Comparison Of 7 AI Coding Tools'
+description: 'A hands-on benchmark of popular Web Vibe Coding platforms using one unified task, covering beginner-friendliness, code control, and deployment.'
+---
diff --git a/docs/ar-sa/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/ar-sa/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..aea7079
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,348 @@
+# تصميم موقع ويب باستخدام وكلاء التصميم والبرمجة
+
+## مقدمة الفصل
+
+سيوضح لك هذا الفصل كيف يمكن للتصميم والتطوير أن يتعاونا بشكل مثالي من خلال الذكاء الاصطناعي. ستلعب دور مدير المنتج، حيث تقوم بتوجيه "وكيل التصميم" لإكمال تصميم الشعار ومخطط الألوان وتخطيط الصفحات، ثم التنسيق مع "وكيل البرمجة" لتحويل التصميمات المرئية إلى كود قابل للتشغيل. من الفكرة الإبداعية إلى إطلاق الموقع، ستختبر عملية تطوير مدعومة بالذكاء الاصطناعي بالكامل، مما يجعلك فريقًا كاملاً في شخص واحد.
+
+---
+
+# 1. دليل البدء
+
+## 1. مقدمة الدورة التعليمية
+
+دعنا نستخدم وكيل تصميم ووكيل برمجة مدعومين بالذكاء الاصطناعي لبناء موقع ويب كامل من الصفر.
+
+- **وكيل التصميم**: مسؤول عن إنشاء الشعار وتخطيط صفحات الويب ومخطط الألوان والعناصر المرئية الأخرى
+- **وكيل البرمجة**: يكتب الكود الفعلي مثل HTML/CSS/JS بناءً على المتطلبات والتخطيطات التي تحددها في التعليمات، لبناء موقع ويب قابل للتشغيل
+
+## 2. وكيل التصميم ووكيل البرمجة
+
+- **وكيل التصميم**: ذكاء اصطناعي يقوم بتوليد الصور ونماذج الصفحات أو أنماط التصميم بناءً على التعليمات التي تقدمها.
+- Mastergo
+- Lovart
+- Figma MCP
+- **وكيل البرمجة**: ذكاء اصطناعي يكتب الكود الفعلي (HTML/CSS/JS وغيرها) بناءً على الوظائف والتخطيطات التي تطلبها في التعليمات.
+- Z.AI
+- Trae
+- Cursor
+- Lovable
+
+---
+
+# 2. إنشاء شعار باستخدام وكيل التصميم
+
+## 1. العناصر الرئيسية التي يجب مراعاتها عند تصميم الشعار
+
+الشعار هو أحد العناصر الرئيسية التي تحدد الانطباع الأول عن موقعك. للحصول على نتائج مرضية من وكيل التصميم بالذكاء الاصطناعي، يجب أن تصف بوضوح في التعليمات نوع الشعار الذي تريده.
+
+1. **اسم العلامة التجارية / النص**
+
+- النص الذي يجب أن يظهر في الشعار (مثل: عنوان الموقع، اسم العلامة التجارية، إلخ).
+
+2. **النمط (المزاج / الأجواء)**
+
+- الشعور أو الأجواء العامة التي يريد الشعار إيصالها.
+- _أمثلة: بسيط، لطيف، أنيق، حديث، كلاسيكي، مستقبلي، إلخ._
+
+3. **مخطط الألوان** (اختياري)
+
+- من الأفضل أن تتوافق ألوان الشعار مع الطابع العام للموقع بأكمله.
+- يمكنك تحديد رموز ألوان سداسية عشرية محددة، أو درجات ألوان عامة (ألوان باردة، دافئة، إلخ).
+- _أمثلة: **`#171721`** (أسود)، **`#FF7130`** (برتقالي)._
+
+4. **الشكل (الهيئة / البنية)**
+
+- حدد ما إذا كان الشعار يحتاج إلى شكل أو تكوين معين.
+- _أمثلة: نص داخل دائرة، مجموعة أيقونة + نص، شعار يعتمد بشكل أساسي على الأيقونة، إلخ._
+
+5. **عناصر الأيقونة / الرمز** (اختياري)
+
+- الرسومات أو الرموز التي ترغب في ظهورها في الشعار.
+- _أمثلة: أيقونة كتاب، رمز برق، رسومات متعلقة بالذكاء الاصطناعي، أشكال هندسية مجردة، إلخ._
+
+## 2. كتابة تعليمات تصميم الشعار
+
+**نموذج تعليمات**
+
+```
+"يرجى تصميم شعار بأسلوب بسيط، اسم العلامة التجارية هو 'My First Website'.
+استخدم اللون الأسود (#171721) والبرتقالي (#FF7130)، وضع النص داخل دائرة."
+```
+
+```
+"يرجى تصميم شعار باسم العلامة التجارية 'AIID'.
+يجب أن يكون الأسلوب العام مستقبليًا ونظيفًا وبسيطًا، مع اللون الأزرق والأبيض كلون رئيسي.
+ادمج رسومًا مجردة ترمز للذكاء الاصطناعي مع النص، وصدّره كملف PNG بخلفية شفافة."
+```
+
+## 3. طلب التصميم من الوكيل
+
+- أدخل التعليمات المذكورة أعلاه → قارن بين التصميمات المتعددة التي أنشأها الوكيل.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. تحديد الشعار النهائي
+
+- اختر النسخة المفضلة لديك من المسودات وقم بتنزيلها.
+
+---
+
+# 3. تخطيط هيكل موقعك
+
+## 1. فهم الأقسام الأساسية
+
+قبل البدء الفعلي في إنشاء الموقع، من المهم جدًا التخطيط للأقسام (القوائم) التي تريد تضمينها. يعتمد تصميم القائمة على ما تريد أن يراه الزوار وما تريد منهم القيام به.
+بشكل عام، يتكون الموقع عادةً من أقسام أساسية مثل **الرئيسية / حول / اتصل بنا**.
+
+## 2. ارسم مخططًا هيكليًا بنفسك (اختياري)
+
+يمكنك أولاً كتابة مخطط قائمة بسيط بناءً على أهداف موقعك.
+
+### القائمة الأساسية
+
+1. **الرئيسية (Home)**
+   1. الصفحة الرئيسية التي يراها الزوار أولاً عند دخول الموقع
+   2. تتضمن عادةً الشعار ومنطقة الصورة الرئيسية وشعارًا قصيرًا أو مقدمة موجزة
+2. **حول (About)**
+   1. تعريف من أنت، أو غرض المشروع / الخدمة
+   2. معرض أعمال شخصية: مقدمة ذاتية + سيرة موجزة
+   3. مواقع الخدمات: الرؤية والأهداف والوظائف الأساسية
+3. **اتصل بنا (Contact)**
+   1. معلومات الاتصال، مثل البريد الإلكتروني ورقم الهاتف وروابط وسائل التواصل الاجتماعي
+   2. يمكن أيضًا إضافة نموذج اتصال بسيط
+
+### القوائم الاختيارية
+
+4. **الخدمات / المشاريع (Services / Projects)**
+   1. عرض الخدمات التي تقدمها، أو مشاريعك / معرض أعمالك
+   2. عادةً يتم عرضها في شكل قائمة أو بطاقات
+
+5. **المعرض (Gallery)**
+   1. لعرض الصور والصور الفوتوغرافية أو أعمال التصميم
+
+6. **المدونة / الأخبار (Blog / News)**
+   1. لنشر المقالات والتحديثات أو السجلات
+
+7. **الأسئلة الشائعة (FAQ)**
+   1. تجميع الأسئلة والأجوبة التي يطرحها الزوار بشكل متكرر
+
+## 3. اختيار مخطط الألوان (اختياري)
+
+إذا كان لديك بالفعل شعار، أو كنت تريد استخدام مجموعة ألوان معينة لتصميم موقعك، يمكنك كتابة رموز الألوان التي تريد استخدامها مباشرة في التعليمات.
+
+**مثال:** `#171721, #872B97, #FF7130, #FF3C68`
+
+حتى إذا لم تتمكن من التفكير في مخطط ألوان في الوقت الحالي، يمكنك العثور على الإلهام من خلال مواقع الألوان أو البحث بالكلمات المفتاحية.
+
+- **مواقع مرجعية للألوان**
+  - https://colorhunt.co/
+  - https://coolors.co/
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+- **البحث عن الألوان عبر الكلمات المفتاحية على Google**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. كتابة تعليمات تصميم الموقع
+
+**نموذج تعليمات**
+
+```
+"يرجى تصميم موقع ويب من صفحة واحدة يتكون من ثلاثة أقسام: الرئيسية وحول واتصل بنا.
+استخدم الألوان #171721 و #FF7130 و #FF3C68.
+يجب أن يكون الأسلوب العام حديثًا وبسيطًا."
+```
+
+---
+
+# 4. تصميم الموقع باستخدام وكيل التصميم
+
+## 1. إدخال التعليمات → إنشاء التصميم
+
+- اكتب الهيكل الذي خططت له والألوان المختارة في التعليمات.
+
+**نموذج تعليمات Mastergo**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+## 2. مراجعة التصميم وتقديم ملاحظات التعديل
+
+يمكنك تقديم ملاحظاتك إلى الوكيل بناءً على احتياجاتك، على سبيل المثال:
+
+- "إنه مبالغ فيه، اجعل الأسلوب العام أبسط."
+- "غيّر نوع الخط."
+- "عدّل مجموعة الألوان."
+- "احذف هذا القسم هنا."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
+
+## 3. تحديد التصميم النهائي
+
+بعد إجراء تعديلات متعددة على التصميم والرضا عنه، يمكنك تحويل هذا التصميم إلى كود، بحيث يتمكن وكيل البرمجة من فهمه ومتابعة العمل.
+
+تختلف طريقة تحويل التصميم إلى كود حسب المنصة، ولكن عادةً ما يتم ذلك عن طريق تثبيت واستخدام بعض الإضافات داخل منصة التصميم.
+
+**مثال Mastergo**
+
+1. افتح [موقع إضافات Mastergo](https://mastergo.com/community/plugin)، وابحث عن **seal**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
+
+2. عد إلى صفحة التصميم، وانقر على **أيقونة المربع (الإضافات)**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
+
+3. حدد منطقة التصميم التي تريد تحويلها إلى كود، وانقر على زر **Generate** لإنشاء الكود.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
+
+---
+
+# 5. بناء الموقع باستخدام وكيل البرمجة
+
+## 1. فهم المفاهيم الأساسية لـ HTML/CSS/JS
+
+يتكون الموقع بشكل أساسي من ثلاث لغات:
+
+- **HTML (لغة ترميز النص الفائق)** → البنية (الهيكل العظمي)
+- **CSS (أوراق الأنماط المتتالية)** → الأنماط (المظهر)
+- **JavaScript (JS)** → الوظائف (التفاعل)
+
+هذه الثلاثة تعمل معًا لتشكيل صفحة الويب الكاملة التي نراها.
+
+1. **🏗️ HTML (البنية)**
+
+- يحدد "ما يتم عرضه" في الصفحة
+- يُستخدم لوضع النصوص والصور والأزرار والروابط والعناصر الأخرى
+- يشبه **الجدران والإطار** في المبنى
+
+**مثال**
+
+```html
+<h1>مرحبًا!</h1>
+<p>هذا هو موقعي الأول.</p>
+<a href="contact.html">اتصل بنا</a>
+```
+
+2. **🎨 CSS (الأنماط)**
+
+- يحدد "كيف يتم عرض المحتوى"
+- يتحكم في حجم النص واللون والمسافات والخلفية وشكل الأزرار وغيرها
+- يمنح HTML "ملابس" وأسلوبًا بصريًا
+
+**مثال**
+
+```css
+h1 {
+  color: #FF7130;   /* لون النص */
+  font-size: 36px;  /* حجم الخط */
+  text-align: center; /* محاذاة في المنتصف */
+}
+
+body {
+  background-color: #171721; /* لون الخلفية */
+  color: white; /* لون النص الافتراضي */
+}
+```
+
+3. **⚙️ JavaScript (JS) (الوظائف)**
+
+- يمكّن صفحة الويب من التفاعل مع المستخدم
+- يمكنه تنفيذ تأثيرات ديناميكية مثل نقر الأزرار وفتح القوائم وعرض شرائح الصور وإرسال النماذج
+- إذا كان HTML/CSS هو الهيكل العظمي والمظهر الثابت، فإن JS هو **العقل** الذي "يحيي" صفحة الويب
+
+**مثال**
+
+```javascript
+function showAlert() {
+  alert("تم النقر على الزر!");
+}
+```
+
+```html
+<button onclick="showAlert()">انقر هنا</button>
+```
+
+## 2. جعل وكيل البرمجة يولد الكود
+
+**نموذج تعليمات**
+
+```
+"يرجى كتابة HTML و CSS لموقع ويب من صفحة واحدة يحتوي على أقسام الرئيسية وحول واتصل بنا.
+استخدم الألوان #171721 و #FF7130 و #FF3C68.
+الخلفية سوداء والنص أبيض."
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
+
+## 3. تشغيل الموقع
+
+عند إنشاء كود المسودة، يقوم الوكيل عادةً بتشغيل المشروع تلقائيًا وعرض صفحة الموقع المُنشأة.
+
+إذا قمت بإعادة تشغيل الوكيل، أو لم تظهر صفحة الموقع، يمكنك إدخال تعليمات مشابهة لهذه:
+
+```
+"يرجى تفعيل المشروع"
+```
+
+لجعل الوكيل يعيد تشغيل المشروع وفتح صفحة المعاينة، حتى تتمكن من viewing التأثير الحالي.
+
+## 4. إجراء تعديلات بسيطة
+
+يمكنك الاستمرار في إجراء تعديلات دقيقة على المسودة من خلال اللغة الطبيعية، على سبيل المثال:
+
+- "اجعل الزر أكبر."
+- "اجعل الخط أكثر سمكًا."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
+
+## 5. تعديل محتوى نصوص الموقع
+
+عادةً ما يحتوي الموقع الأولي الذي ينشئه الوكيل على بعض النصوص placeholder التي تم إنشاؤها تلقائيًا. لجعله أقرب إلى سيناريو الحقيقي الخاص بك، يمكنك تحضير المحتوى الفعلي مسبقًا، ثم اطلب من الوكيل استبداله.
+
+**مثال تطبيقي**: تحديث صفحة "حول" في موقع AIID
+
+1. اكتب أولاً المحتوى الذي تريد عرضه في صفحة "حول". لتسهيل فهم الوكيل، يمكنك حفظ المحتوى بتنسيق Markdown.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
+
+2. ثم أخبر الوكيل في المحادثة بتطبيق المحتوى من هذا الملف على الصفحة المحددة.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
+
+3. تحقق من النسخة المحدثة بعد تطبيق المحتوى.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
+
+## 6. إدراج الصور
+
+إذا كنت تريد إضافة صور معينة (مثل الشعار، صورة الخلفية، إلخ)، يمكنك أولاً تحميل الصور إلى مجلد المشروع، ثم توضيح في التعليمات المكان الذي تريد استخدام هذه الصور فيه على الصفحة.
+
+- **مثال:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png)
+
+- **النتيجة:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png)
+
+---
+
+# 6. دمج التصميم مع الكود
+
+## 1. دمج ملفات التصميم مع كود الموقع (اختياري)
+
+عند تنزيل ملفات الكود من وكيل التصميم، يمكنك نقلها إلى دليل المشروع الحالي، ثم اطلب من وكيل البرمجة مساعدتك في دمج كود التصميم هذا مع المشروع الحالي.
+
+- **مثال:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png)
+
+- **النتيجة:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
+---
+title: 'Build A Website With Design + Coding Agents'
+description: 'From idea to launch: coordinate a design agent to produce visuals, then use a coding agent to turn it into a working website with a reusable workflow.'
+---
diff --git a/docs/ar-sa/stage-1/appendix-b-common-errors/index.md b/docs/ar-sa/stage-1/appendix-b-common-errors/index.md
new file mode 100644
index 0000000..3a8a6d3
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-b-common-errors/index.md
@@ -0,0 +1,325 @@
+---
+title: 'ماذا تفعل عند مواجهة أخطاء أثناء كتابة التعليمات البرمجية - دليل عملي لاستخدام لقطات الشاشة مع الذكاء الاصطناعي'
+description: 'تعلم كيفية طرح الأسئلة على الذكاء الاصطناعي بكفاءة لحل أخطاء التطوير المختلفة، وإتقان العملية القياسية لأخذ لقطات الشاشة والوصف وتحديد المشكلات، وجعل الذكاء الاصطناعي مساعدك في تصحيح الأخطاء.'
+---
+
+<script setup>
+const duration = 'حوالي <strong>30 دقيقة</strong>'
+</script>
+
+# ماذا تفعل عند مواجهة أخطاء أثناء كتابة التعليمات البرمجية
+
+## دليل هذا الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['مهارات التصحيح', 'التعاون مع الذكاء الاصطناعي', 'استكشاف المشكلات', 'أدوات المطورين']" coreOutput="مجموعة عمليات قياسية لاستكشاف الأخطاء" expectedOutput="القدرة على حل 90% من الأخطاء الشائعة بشكل مستقل">
+
+في عصر الذكاء الاصطناعي، تغيرت طريقة استكشاف الأخطاء وإصلاحها.
+
+لا تحتاج إلى حفظ جميع أنواع الأخطاء، ولا تحتاج إلى أن تصبح خبيرًا في التصحيح، ولا حتى تحتاج إلى فهم ما يعنيه الخطأ.
+
+<strong>تحتاج فقط إلى تعلم شيء واحد: كيف تسأل الذكاء الاصطناعي.</strong>
+
+سيعلمك هذا الفصل مجموعة عمليات لاستكشاف الأخطاء <strong>من البسيط إلى المتقدم</strong>:
+
+1. <strong>الخطوة الأولى: اسأل مباشرة</strong>: صف الظاهرة + التقط لقطة شاشة، واطرح سؤالاً بجملة واحدة
+2. <strong>الخطوة الثانية: أضف معلومات</strong>: إذا لم يتم حلها، افتح F12 وأضف المعلومات الرئيسية
+
+بعد إتقان هذه العملية، ستتمكن من <strong>حل 90% من الأخطاء بنفسك</strong>.
+
+</ChapterIntroduction>
+
+::: info ملاحظة
+جميع الطرق في هذا الفصل مبنية على خبرة عملية مع أدوات تطوير الذكاء الاصطناعي مثل Cursor/Trae/Claude، ويمكن تطبيقها مباشرة في التطوير اليومي.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'طرح سؤال مباشر', description: 'وصف الظاهرة + لقطة شاشة' },
+      { title: 'إضافة معلومات', description: 'فتح F12 لتحديد المشكلة' },
+      { title: 'الحل التكراري', description: 'حتى يتم حل المشكلة' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. القاعدة الأساسية: التقط لقطة شاشة واسأل الذكاء الاصطناعي
+
+::: warning لماذا هذا الفصل مهم؟
+
+أول رد فعل للعديد من المبتدئين عند مواجهة خطأ هو:
+- الذعر، والبدء في تعديل التعليمات البرمجية بشكل عشوائي
+- قضاء نصف ساعة في البحث عن "كيفية حل خطأ xxx"
+- محاولة فهم معنى الخطأ بنفسك
+- تصحيح الأخطاء بمفردك حتى وقت متأخر من الليل
+
+<strong>كل هذا مضيعة للوقت.</strong>
+
+في عصر الذكاء الاصطناعي، أصبح تصحيح الأخطاء أمرًا بسيطًا للغاية:
+
+```
+رؤية خطأ ← التقاط لقطة شاشة ← سؤال الذكاء الاصطناعي ← اتباع تعليمات الذكاء الاصطناعي
+```
+
+لا تحتاج إلى فهم الخطأ، ولا تحتاج إلى معرفة كيفية التصحيح، ولا حتى تحتاج إلى معرفة مكان المشكلة.
+
+<strong>تحتاج فقط إلى تعلم كيف تسأل.</strong>
+
+:::
+
+### 1.1 أبسط طريقة لطرح الأسئلة
+
+لا تحتاج إلى قوالب معقدة، اختر إحدى الطريقتين:
+
+**الطريقة الأولى: وصف الظاهرة**
+
+التنسيق: ماذا فعلت للتو، وماذا يحدث الآن
+
+```
+عدّلت للتو كود صفحة تسجيل الدخول، والآن الصفحة بيضاء، ماذا أفعل؟
+```
+
+**الطريقة الثانية: لقطة شاشة**
+
+التقط لقطة شاشة للصفحة الحالية أو رسالة الخطأ مباشرة
+
+```
+[لقطة شاشة]
+
+كيف أحل هذا الخطأ؟
+```
+
+**أفضل طريقة: وصف + لقطة شاشة**
+
+```
+عدّلت للتو كود صفحة تسجيل الدخول، والآن الصفحة بيضاء.
+
+[لقطة شاشة]
+
+ماذا أفعل؟
+```
+
+**تذكر: صف السياق بوضوح، وأضف لقطة شاشة، وسيتمكن الذكاء الاصطناعي من حل مشكلتك بشكل أسرع.**
+
+### 1.2 كيفية شرح المشكلة بوضوح
+
+يعرف العديد من المبتدئين أنهم بحاجة إلى طرح أسئلة، لكنهم لا يعرفون كيف يعبرون عنها. في الواقع، تحتاج فقط إلى توضيح ثلاثة أشياء:
+
+**1. ماذا فعلت للتو**
+
+```
+لقد نقرت للتو على زر الحفظ
+لقد عدّلت للتو كود صفحة تسجيل الدخول
+لقد قمت للتو بتحديث الصفحة
+```
+
+**2. ماذا ترى الآن**
+
+```
+الصفحة فارغة الآن
+الزر لا يستجيب عند النقر عليه الآن
+يتم عرض رسالة خطأ الآن
+```
+
+**3. ما التأثير الذي تريده**
+
+```
+أريد أن يتم حفظ البيانات بنجاح
+أريد أن يتم عرض الصفحة بشكل طبيعي
+أريد أن تظهر نافذة منبثقة بعد النقر على الزر
+```
+
+**مثال كامل:**
+
+```
+لقد نقرت للتو على زر الحفظ، والآن تعرض الصفحة خطأ "فشل الحفظ".
+
+[لقطة شاشة]
+
+أريد أن يتم حفظ بيانات النموذج في قاعدة البيانات بنجاح، ماذا أفعل؟
+```
+
+**المبادئ الأساسية:**
+- استخدم لغة بسيطة، بدون مصطلحات تقنية
+- رتب حسب الترتيب الزمني: ماذا فعلت أولاً، ثم ماذا حدث
+- اذكر توقعاتك، ليعرف الذكاء الاصطناعي ما تريده
+
+## 2. الخطوة الأولى: صف الظاهرة مباشرة واسأل
+
+عند مواجهة مشكلة، <strong>لا تتسرع في فتح F12</strong>. صف الظاهرة أولاً، وخذ لقطة شاشة للصفحة الحالية، وأرسلها للذكاء الاصطناعي.
+
+في كثير من الأحيان، يمكن للذكاء الاصطناعي تقديم حل مباشرة بمجرد رؤية لقطة الشاشة.
+
+### 2.1 كيف تصف الظواهر الشائعة
+
+::: tip فقط صف ما تراه
+
+**الصفحة بيضاء**
+```
+الصفحة فارغة عند الفتح، ماذا أفعل؟
+
+[لقطة شاشة]
+```
+
+**الزر لا يستجيب عند النقر**
+```
+لا يحدث شيء عند النقر على هذا الزر، ساعدني في التحقق.
+
+[لقطة شاشة]
+```
+
+**لا يتم حفظ البيانات**
+```
+نقرت على حفظ، لكن البيانات لم تُحفظ، ماذا أفعل؟
+
+[لقطة شاشة]
+```
+
+**التنسيق يبدو غير صحيح**
+```
+موضع هذا الزر منحرف، كيف أعدّله؟
+
+[لقطة شاشة]
+```
+
+**خطأ في الواجهة**
+```
+حدث خطأ عند استدعاء الواجهة، ساعدني في التحقق.
+
+[لقطة شاشة]
+```
+
+:::
+
+### 2.2 إذا حل الذكاء الاصطناعي المشكلة مباشرة
+
+تهانينا، تم حل المشكلة! اتبع تعليمات الذكاء الاصطناعي للتعديل.
+
+### 2.3 إذا قال الذكاء الاصطناعي "يحتاج إلى مزيد من المعلومات"
+
+عندها فقط تحتاج إلى فتح F12 لإضافة المعلومات الرئيسية. تابع القراءة.
+
+## 3. الخطوة الثانية: أضف المعلومات الرئيسية
+
+عندما يقول الذكاء الاصطناعي إنه يحتاج إلى مزيد من المعلومات، حسب نوع المشكلة، افتح F12 وخذ لقطات شاشة للمحتوى المناسب.
+
+### 3.1 متى تحتاج إلى إضافة معلومات
+
+قد يرد الذكاء الاصطناعي هكذا:
+- "يرجى فتح Console لمعرفة ما إذا كانت هناك أخطاء"
+- "التقط لقطة شاشة للوحة Network لأراها"
+- "يحتاج إلى معلومات الخطأ المحددة"
+
+عندها، اتبع الإرشادات أدناه لإضافة لقطات الشاشة.
+
+### 3.2 إضافة معلومات Console (صفحة بيضاء/أخطاء)
+
+::: tip خطوات العملية
+
+**الخطوة الأولى: اضغط F12 لفتح أدوات المطورين**
+
+على Mac: `Cmd+Option+I`، أو انقر بزر الماوس الأيمن على الصفحة واختر "فحص".
+
+**الخطوة الثانية: انتقل إلى علامة تبويب Console**
+
+**الخطوة الثالثة: التقط لقطة شاشة لرسائل الخطأ الحمراء**
+
+**الخطوة الرابعة: أرسلها للذكاء الاصطناعي**
+
+```
+أخطاء Console كما يلي:
+
+[لقطة شاشة]
+```
+
+:::
+
+### 3.3 إضافة معلومات Network (مشاكل البيانات/أخطاء API)
+
+::: tip خطوات العملية
+
+**الخطوة الأولى: اضغط F12 لفتح أدوات المطورين**
+
+**الخطوة الثانية: انتقل إلى علامة تبويب Network**
+
+**الخطوة الثالثة: كرر العملية** (انقر على حفظ/حدّث الصفحة)
+
+**الخطوة الرابعة: ابحث عن الطلب المقابل، وخذ لقطة شاشة**
+
+- تحقق من URL ورمز الحالة
+- تحقق من Payload (المعلمات المرسلة)
+- تحقق من Response (النتيجة المرجعة)
+
+**الخطوة الخامسة: أرسلها للذكاء الاصطناعي**
+
+```
+معلومات Network كما يلي:
+
+الطلب: [لقطة شاشة 1]
+المعلمات: [لقطة شاشة 2]
+النتيجة: [لقطة شاشة 3]
+```
+
+:::
+
+### 3.4 إضافة معلومات Elements (مشاكل التنسيق)
+
+::: tip خطوات العملية
+
+**الخطوة الأولى: انقر بزر الماوس الأيمن على العنصر ← "فحص"**
+
+ستنتقل أدوات المطورين تلقائيًا إلى العنصر.
+
+**الخطوة الثانية: التقط لقطة شاشة للوحة Styles**
+
+**الخطوة الثالثة: أرسلها للذكاء الاصطناعي**
+
+```
+أنماط العنصر كما يلي:
+
+[لقطة شاشة]
+```
+
+:::
+
+## 4. الخطوة الثالثة: التكرار حتى الحل
+
+### 4.1 الممارسات غير الفعالة
+
+هذه الممارسات ستضيع وقتك:
+
+الذعر عند رؤية الخطأ، والبدء في تعديل التعليمات البرمجية بشكل عشوائي
+قضاء نصف ساعة في البحث عن حلول للأخطاء
+محاولة فهم معنى كل خطأ بنفسك
+تصحيح الأخطاء بمفردك حتى وقت متأخر من الليل
+
+### 4.2 الممارسات الفعالة
+
+اتبع هذه العملية:
+
+صف الظاهرة مباشرة وخذ لقطة شاشة واسأل
+عندما يقول الذكاء الاصطناعي إنه يحتاج إلى مزيد من المعلومات، افتح F12 وأضفها
+اتبع الاقتراحات لتعديل الكود
+بعد التعديل، اختبر، وإذا استمرت المشكلة، استمر في أخذ لقطات شاشة والسؤال
+
+## 5. الملخص: العملية الكاملة
+
+```
+مواجهة مشكلة
+    ↓
+وصف الظاهرة مباشرة + لقطة شاشة
+    ↓
+أرسلها للذكاء الاصطناعي: "ماذا أفعل؟"
+    ↓
+هل حلها الذكاء الاصطناعي مباشرة؟
+    ↓ نعم
+اتبع تعليمات الذكاء الاصطناعي
+    ↓
+اختبر ما إذا تم الحل
+    ↓
+    ↓ لا / يحتاج الذكاء الاصطناعي إلى مزيد من المعلومات
+افتح F12، وأضف المعلومات الرئيسية
+    ↓
+أرسلها مرة أخرى للذكاء الاصطناعي
+    ↓
+كرر حتى يتم الحل
+```
diff --git a/docs/ar-sa/stage-1/appendix-c-consumer-scenarios/index.md b/docs/ar-sa/stage-1/appendix-c-consumer-scenarios/index.md
new file mode 100644
index 0000000..e785760
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-c-consumer-scenarios/index.md
@@ -0,0 +1,641 @@
+---
+title: 'أفكار ملهمة لسيناريوهات الاستهلاك الموجهة للمستهلك'
+description: 'يلخص هذا المستند الاتجاهات الإبداعية لتطبيقات النماذج اللغوية الكبيرة LLM في سيناريوهات الاستهلاك الموجهة للمستهلك، ويغطي سيناريوهات ملهمة في مجالات نمط الحياة، والرفقة العاطفية، والترفيه، والنمو الشخصي، والتفاعل الاجتماعي، مما يوفر مرجعاً لمطوري تطبيقات الذكاء الاصطناعي الموجهة للمستهلكين العاديين.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'حوالي <strong>4 ساعات</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// تجمع المواضيع لكل سيناريو - التأكيد على المشاعر، والأجواء، والإيحاءات النفسية
+const topicPool = {
+  'lifestyle': [
+    { title: 'مساعد طقوس الصباح', desc: 'يولد طقوس صباحية حصرية بناءً على الطقس والجدول الزمني والمزاج، ليجعل كل يوم يبدأ بشكل جميل' },
+    { title: 'مصمم أجواء للمعيشة المستقلة', desc: 'يصمم حلول أجواء منزلية لمن يعيشون بمفردهم، مع اقتراحات ذكية للإضاءة والموسيقى والروائح' },
+    { title: 'مولد خطط الاسترخاء المنزلي في عطلة نهاية الأسبوع', desc: 'يوصي بمزيج مثالي للبقاء في المنزل بناءً على مزاجك الحالي: فيلم + وجبات خفيفة + ترتيب الأجواء' },
+    { title: 'إذاعة لتهدئة الروح قبل النوم', desc: 'يولد قصصاً لطيفة وتأملات موجهة، كإذاعة خاصة لمرافقتك في النوم' },
+    { title: 'ملهم جماليات الحياة', desc: 'يكتشف الجمال في الأشياء اليومية الصغيرة، ويولد اقتراحات لجماليات الحياة وإرشادات لإضفاء الطقوس' }
+  ],
+  'emotion': [
+    { title: 'مستمع في وقت متأخر من الليل', desc: 'سلة لتفريغ المشاعر متاحة على مدار 24 ساعة، تتقبل كل الهموم دون إصدار أحكام' },
+    { title: 'مرافق للتعافي من الفراق', desc: 'يقدم رفقة لطيفة ونصائح للتعافي ومنفذاً للمشاعر خلال فترة انخفاض الروح المعنوية بعد الفراق' },
+    { title: 'مدرب تنفس لتخفيف القلق', desc: 'يستشعر مشاعر القلق، ويوجه تمارين التنفس والتأمل الذهني' },
+    { title: 'مرشد لإعادة بناء الثقة بالنفس', desc: 'من خلال الحوار الإيجابي والإيحاءات النفسية، يساعد في إعادة بناء الهوية الذاتية والشعور بالقيمة' },
+    { title: 'تحليل ذكي ليوميات المشاعر', desc: 'يحلل يوميات المشاعر، ويكتشف أنماطها، ويقدم رؤى دافئة واقتراحات' }
+  ],
+  'entertainment': [
+    { title: 'ماستر لغز القتل الغامر', desc: 'يلعب دور مقدم لعبة لغز القتل، ويخلق أجواء الغموض، ويدفع الحبكة للأمام' },
+    { title: 'شخصية NPC بروح حية في عالم مفتوح', desc: 'شخصية NPC نابضة بالحياة، تتذكر قصص اللاعب وتخلق روابط عاطفية حقيقية' },
+    { title: 'توليد محتوى بودكاست مخصص', desc: 'يولد بودكاست حصري بناءً على اهتماماتك، بطبيعية كأنك تتحدث مع صديق' },
+    { title: 'فريق أجواء الحفلات الموسيقية الافتراضية', desc: 'يخلق إحساس الحفل المباشر للحفلات عبر الإنترنت، مع تفاعل فوري وتشجيع وتعزيز الأجواء' },
+    { title: 'شريك إبداع مشترك للروايات التفاعلية', desc: 'يشارك القراء في كتابة القصة، حيث يؤثر كل خيار على مسار العالم' }
+  ],
+  'growth': [
+    { title: 'شاهد على النمو الشخصي', desc: 'يسجل مسار النمو، ويقدم التشجيع والمراجعة في المحطات المهمة' },
+    { title: 'مدرب يلعب العادات لتصبح لعبة', desc: 'يحول بناء العادات المملة إلى لعبة مغامرة ممتعة' },
+    { title: 'مطابق لشريك تعلم المهارات', desc: 'يجد شركاء تعلم من ذوي التفكير المماثل للترابط المتبادل ومشاركة التقدم' },
+    { title: 'مكتشف السعادة الصغيرة اليومية', desc: 'يساعد في اكتشاف الأشياء الجميلة الصغيرة في الحياة، ويزرع الامتنان والعقلية الإيجابية' },
+    { title: 'محاكي تجارب الحياة', desc: 'يحاكي خيارات الحياة المختلفة لتجربة احتمالات أخرى في أكوان موازية' }
+  ],
+  'social': [
+    { title: 'مولد مواضيع لكسر الجليد', desc: 'يقدم مواضيع مثيرة للاهتمام في المناسبات الاجتماعية لكسر الحواجز وتقريب المسافات' },
+    { title: 'مصمم أجواء نصوص وسائل التواصل', desc: 'يولد نصوصاً أنيقة لوسائل التواصل الاجتماعي بناءً على الصور والمزاج' },
+    { title: 'مخطط أجواء المواعيد', desc: 'يصمم خطة أجواء كاملة للمواعيد، من المكان إلى المواضيع والمفاجآت' },
+    { title: 'روح التجمعات عن بعد', desc: 'ينشط الأجواء في التجمعات عبر الإنترنت، وينظم الألعاب ويوجه التفاعل' },
+    { title: 'مساعد إدارة الطاقة الاجتماعية', desc: 'يساعد الانطوائيين في إدارة طاقتهم الاجتماعية وإيجاد وتيرة مريحة' }
+  ],
+  'creative': [
+    { title: 'حقيبة إسعافات جفاف الإلهام', desc: 'يوفر شرارات إلهام غير متوقعة عند الوصول إلى عنق الزجاجة الإبداعي' },
+    { title: 'دليل استكشاف الأسلوب الشخصي', desc: 'يساعد في اكتشاف أسلوبك الشخصي الفريد، من الملابس إلى التعبير' },
+    { title: 'مستشار جماليات دفاتر الملاحظات واليوميات', desc: 'يقدم اقتراحات جمالية لتخطيط دفاتر الملاحظات وتنسيق الألوان وأفكار المحتوى' },
+    { title: 'دليل أجواء تكوين الصور الفوتوغرافية', desc: 'يقدم اقتراحات للتصوير وتحرير الصور بناءً على المشهد والإحساس المطلوب' },
+    { title: 'مطابق الموسيقى مع المزاج', desc: 'يوصي بمزيج موسيقي مثالي بناءً على مزاجك الحالي والمشهد' }
+  ],
+  'travel': [
+    { title: 'دليل استكشاف المدينة سيراً على الأقدام', desc: 'استكشف المدينة كالسكان المحليين واكتشف الأماكن المخفية والكنوز' },
+    { title: 'توليد يوميات مزاج الرحلة', desc: 'يحول صور ومشاعر الرحلة إلى يوميات وذكريات جميلة' },
+    { title: 'مساعد مرافق للسفر الفردي', desc: 'يوفر الرفقة والنصائح والشعور بالأمان للمسافرين بمفردهم' },
+    { title: 'معاينة أجواء الوجهة', desc: 'اختبر أجواء الوجهة بشكل غامر قبل المغادرة لتبدأ في الاستعداد مبكراً' },
+    { title: 'دليل أجواء التصوير الفوتوغرافي للسفر', desc: 'توجيه لالتقاط صور سفر تحكي قصصًا بناءً على المشهد والإضاءة' }
+  ],
+  'health': [
+    { title: 'محفز الدافعية للرياضة', desc: 'تقديم التشجيع والدافع المناسبين عندما لا تشعر بالرغبة في الحركة' },
+    { title: 'مطبخ الإلهام للأكل الصحي', desc: 'إعداد وصفات صحية مريحة بناءً على المزاج والمكونات المتاحة' },
+    { title: 'خبير تحسين أجواء جودة النوم', desc: 'تهيئة أجواء نوم عالية الجودة بشكل شامل، من البيئة المحيطة إلى الحالة النفسية' },
+    { title: 'مرشد الإدراك الجسدي', desc: 'توجيه الانتباه إلى إشارات الجسم وبناء التواصل بين العقل والجسد' },
+    { title: 'مساعد تذكير العناية بالذات', desc: 'تذكيرك بالتوقف والاهتمام بنفسك وسط الانشغال' }
+  ],
+  'learning': [
+    { title: 'دليل استكشاف المعرفة بالأسلوب اللعبي', desc: 'تحويل التعلم الممل إلى مغامرة استكشافية ممتعة' },
+    { title: 'رفيق تعلم اللغات عبر السيناريوهات', desc: 'تقمص شخصيات مختلفة لاكتساب اللغة بشكل طبيعي من خلال الحوارات' },
+    { title: 'مساعد إشباع الفضول', desc: 'الإجابة على مختلف الأفكار الخيالية وإشباع الفضول تجاه العالم' },
+    { title: 'ملهم أفكار ملاحظات القراءة', desc: 'المساعدة في تنظيم أفكار القراءة واكتشاف زوايا تفكير جديدة' },
+    { title: 'خلق أجواء مشاركة المعرفة', desc: 'تحويل المعرفة المكتسبة إلى محتوى مشاركة ممتع' }
+  ],
+  'relationship': [
+    { title: 'مدرب التواصل في العلاقات الحميمية', desc: 'المساعدة في التعبير عن المشاعر الصعبة وتحسين العلاقات الحميمية' },
+    { title: 'مساعد تذكير الاهتمام بالعائلة', desc: 'تذكيرك بالاهتمام بعائلتك وتقديم اقتراحات تفاعل دافئة' },
+    { title: 'خبير أجواء الحفاظ على الصداقات', desc: 'المساعدة في الحفاظ على الصداقات عن بعد وخلق مواضيع مشتركة' },
+    { title: 'مخطط مفاجآت وإعلانات الحب', desc: 'تخطيط لحظات رومانسية ومفاجآت لا تُنسى للأشخاص المهمين' },
+    { title: 'توجيه أجواء تخفيف التوتر', desc: 'تقديم اقتراحات وعبارات لتخفيف حدة التوتر عند حدوث أزمات في العلاقات' }
+  ],
+  'pet': [
+    { title: 'يوميات الحيوانات الأليفة بالشخصية المجسّمة', desc: 'إنشاء يوميات من منظور الحيوان الأليف لتسجيل اللحظات الدافئة اليومية مع المالك' },
+    { title: 'مفسّر سلوك الحيوانات الأليفة', desc: 'تفسير لغة سلوك الحيوانات الأليفة لتعميق التواصل معها' },
+    { title: 'مخطط أوقات رفقة الحيوانات الأليفة', desc: 'تصميم أنشطة إبداعية للتفاعل مع الحيوانات الأليفة لتعزيز المودة' },
+    { title: 'مولّد قصص تذكارية للحيوانات الأليفة', desc: 'تحويل صور وذكريات الحيوانات الأليفة إلى قصص دافئة' },
+    { title: 'دليل الطمأنينة للمربين الجدد', desc: 'توفير مرافقة دافئة وإرشاد لأصحاب الحيوانات الأليفة المبتدئين' }
+  ],
+  'finance': [
+    { title: 'مساعد إدراك مشاعر الاستهلاك', desc: 'إدراك المشاعر الكامنة وراء الاستهلاك الاندفاعي وبناء عادات استهلاك صحية' },
+    { title: 'تحفيز مرئي لأهداف الادخار', desc: 'تحويل أهداف الادخار إلى تقدم مرئي للأحلام' },
+    { title: 'تعلم المعرفة المالية بسهولة', desc: 'تعلم المعرفة المالية بطريقة سهلة وممتعة' },
+    { title: 'مهدّئ القلق المالي', desc: 'تقديم الدعم العاطفي ونصائح عملية عند مواجهة الضغوط المالية' },
+    { title: 'لعبة تجربة الاستثمار بمبالغ صغيرة', desc: 'تجربة الاستثمار بطريقة محاكاة لعبة لتقليل حاجز الدخول' }
+  ],
+  'career': [
+    { title: 'رفيق مرحلة الحيرة المهنية', desc: 'تقديم الاستماع والاستكشاف ونصائح التوجيه خلال فترات الحيرة المهنية' },
+    { title: 'محفز الشعور بالإنجاز في العمل', desc: 'المساعدة في اكتشاف القيمة والمعنى في العمل لإعادة إشعال الشغف' },
+    { title: 'مساعد أجواء التواصل المهني', desc: 'تقديم مواضيع خفيفة واقتراحات تفاعلية للتواصل الاجتماعي في بيئة العمل' },
+    { title: 'ملهم أفكار الأعمال الجانبية', desc: 'تحفيز أفكار إبداعية للأعمال الجانبية بناءً على الاهتمامات والمهارات الشخصية' },
+    { title: 'محطة تعزيز الثقة قبل المقابلة', desc: 'تقديم الاستعداد النفسي والتشجيع على الثقة قبل المقابلات' }
+  ],
+  'home': [
+    { title: 'مصمم أجواء المساحة المنزلية', desc: 'تصميم مخططات أجواء المنزل بناءً على المزاج والفصول' },
+    { title: 'دليل تغيير ديكور المنزل حسب الفصول', desc: 'تغيير ترتيب المنزل مع تغير الفصول للحفاظ على الشعور بالتجديد' },
+    { title: 'سحر المساحات الصغيرة', desc: 'جعل المساحات الصغيرة تتمتع أيضًا بأجواء مريحة ودافئة' },
+    { title: 'صانع الطقوس المنزلية', desc: 'خلق شعور بالطقوس للأنشطة المنزلية اليومية' },
+    { title: 'مرافق نفسي لعملية التخلص من الأشياء', desc: 'تقديم الدعم النفسي ونصائح اتخاذ القرارات عند ترتيب الأشياء' }
+  ],
+  'food': [
+    { title: 'طبخ مريح لشخص واحد', desc: 'تصميم مخططات طبخ بسيطة ومريحة لمن يعيشون بمفردهم' },
+    { title: 'تصميم أجواء مائدة الأعياد', desc: 'تصميم ترتيب مائدة بطابع احتفالي للمناسبات الخاصة' },
+    { title: 'مطابق الأطباق للمزاج', desc: 'اقتراح الأطعمة وطرق التحضير المناسبة بناءً على المزاج الحالي' },
+    { title: 'بناء ثقة المبتدئين في المطبخ', desc: 'توفير تشجيع دافئ ووصفات بسيطة لمن ليس لديهم خبرة في الطبخ' },
+    { title: 'دليل أجواء تصوير الطعام', desc: 'جعل الأطباق المنزلية تبدو شهية وجذابة في الصور أيضًا' }
+  ],
+  'fashion': [
+    { title: 'لوحة مزاج الإطلالة اليومية', desc: 'توليد إلهام للإطلالات بناءً على الطقاس والمناسبة والمزاج' },
+    { title: 'منسق خزانة الملابس الأساسية', desc: 'خلق احتمالات تنسيق لا حصر لها باستخدام قطع محدودة' },
+    { title: 'رحلة استكشاف الأسلوب الشخصي', desc: 'المساعدة في اكتشاف وبناء أسلوب شخصي فريد' },
+    { title: 'مبدع إعادة ارتداء الملابس القديمة', desc: 'تقديم إلهام جديد لتنسيق الملابس القديمة' },
+    { title: 'مستشار إطلالات المناسبات الخاصة', desc: 'تصميم إطلالات تمنح الثقة للمناسبات المهمة' }
+  ]
+}
+
+// جدول تعيين مسارات التوصية المحددة مسبقًا - بناءً على الأجواء والمشاعر
+const recommendationMap = {
+  // نقطة الأجواء: شفائي
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // نقطة الأجواء: نمو
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // نقطة الأجواء: اجتماعي
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // نقطة الأجواء: استكشاف
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // نقطة الأجواء: يومي
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'شفائي', value: 'healing', desc: 'دافئ، مهدئ، علاجي' },
+  { label: 'نمو', value: 'growth', desc: 'تقدم، اختراق، تحول' },
+  { label: 'اجتماعي', value: 'social', desc: 'تواصل، مشاركة، تفاعل' },
+  { label: 'استكشاف', value: 'explore', desc: 'فضول، مغامرة، اكتشاف' },
+  { label: 'يومي', value: 'daily', desc: 'عادي، حقيقي، اللحظة الحالية' }
+]
+
+const feelingOptions = [
+  { label: 'أريد الاسترخاء', value: 'relax', desc: 'تخفيف التوتر، تصفية الذهن' },
+  { label: 'البحث عن الإلهام', value: 'inspire', desc: 'تحفيز الإبداع، الحصول على الوحي' },
+  { label: 'التوق للتواصل', value: 'connect', desc: 'التواصل مع الآخرين، المشاركة العاطفية' },
+  { label: 'هروب مؤقت', value: 'escape', desc: 'الهروب من الواقع، الانغماس في التجربة' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'نمط الحياة', anchor: '#_1-نمط-الحياة' },
+  { key: 'emotion', name: 'الرفقة العاطفية', anchor: '#_2-الرفقة-العاطفية' },
+  { key: 'entertainment', name: 'الترفيه والتسلية', anchor: '#_3-الترفيه-والتسلية' },
+  { key: 'growth', name: 'النمو الشخصي', anchor: '#_4-النمو-الشخصي' },
+  { key: 'social', name: 'التفاعل الاجتماعي', anchor: '#_5-التفاعل-الاجتماعي' },
+  { key: 'creative', name: 'التعبير الإبداعي', anchor: '#_6-التعبير-الإبداعي' },
+  { key: 'travel', name: 'استكشاف السفر', anchor: '#_7-استكشاف-السفر' },
+  { key: 'health', name: 'الصحة البدنية والنفسية', anchor: '#_8-الصحة-البدنية-والنفسية' },
+  { key: 'learning', name: 'استكشاف المعرفة', anchor: '#_9-استكشاف-المعرفة' },
+  { key: 'relationship', name: 'إدارة العلاقات', anchor: '#_10-إدارة-العلاقات' },
+  { key: 'pet', name: 'مرافقة الحيوانات الأليفة', anchor: '#_11-مرافقة-الحيوانات-الأليفة' },
+  { key: 'finance', name: 'الصحة المالية', anchor: '#_12-الصحة-المالية' },
+  { key: 'career', name: 'التطوير المهني', anchor: '#_13-التطوير-المهني' },
+  { key: 'home', name: 'المساحة المنزلية', anchor: '#_14-المساحة-المنزلية' },
+  { key: 'food', name: 'فنون الطهي', anchor: '#_15-فنون-الطهي' },
+  { key: 'fashion', name: 'أسلوب الأزياء', anchor: '#_16-أسلوب-الأزياء' }
+]
+
+// حساب نتائج التوصية - سحب عشوائي من مجموعة المواضيع
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // سحب 1-2 موضوع عشوائياً من كل سيناريو موصى به
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // سحب 1-2 موضوع عشوائياً
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // ترتيب عشوائي وتقييد العدد الإجمالي
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// الحصول على وصف الاختيار الحالي
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // تأخير التمرير لضمان اكتمال تحديث DOM
+  setTimeout(() => {
+    // محاولة البحث عبر ID (يدعم تنسيقات متعددة)
+    let element = document.querySelector(anchor)
+    
+    // إذا لم يتم العثور عليه، تجربة تنسيقات ID أخرى محتملة
+    if (!element) {
+      // محاولة إزالة بادئة الشرطة السفلية
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // إذا لم يتم العثور عليه بعد، البحث عبر نص العنوان
+    if (!element) {
+      // استخراج اسم السيناريو من نقطة الارتساء
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // مطابقة تامة أو مطابقة جزئية
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // تمييز الفقرة المستهدفة
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# مرجع إلهام سيناريوهات الاستهلاك الموجه للمستهلك (C-end)
+
+## مقدمة الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['تطبيقات C-end', 'نمط الحياة', 'التجربة العاطفية', 'خلق الأجواء']" coreOutput="اكتشاف 15+ إلهامًا لسيناريوهات الحياة" expectedOutput="إيجاد اتجاه منتج يلمس المستخدمين">
+
+يلخص هذا المستند <strong>الاتجاهات الإبداعية لتطبيقات النماذج الكبيرة LLM في سيناريوهات الاستهلاك الموجه للمستهلك (C-end)</strong>. على عكس قطاع B-end الذي يركز على الكفاءة ونقاط الألم، تركز منتجات C-end بشكل أكبر على <strong>خلق الإحساس، والإيحاءات النفسية، والأجواء</strong>، مما يتيح للمستخدمين الحصول على صدى عاطفي وتجربة رائعة أثناء الاستخدام.
+
+</ChapterIntroduction>
+
+## اختيار سريع لأجواء السيناريو
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">ابحث عن إلهام السيناريو الذي يلمسك</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    اختر الأجواء التي ترغب بها والمشاعر الحالية، وسيقوم النظام بترشيح اتجاهات السيناريوهات ذات الصلة، انقر على العلامة للانتقال إلى الفصل المقابل.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="اختر نوع الأجواء" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="اختر الشعور الحالي" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      السيناريوهات الموصى بك لـ {{ currentSelection.vibe }} × {{ currentSelection.feeling }} :
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      إعادة الاختيار
+    </el-button>
+  </div>
+</el-card>
+
+---
+
+## 1. نمط الحياة
+
+> 💡 **الفكرة الأساسية**: جعل الروتين اليومي العادي ذا طابع احتفالي، وإيجاد الجمال في التفاصيل
+
+| الرقم | اسم السيناريو | وظيفة السيناريو |
+| :--: | ------------ | ------------ |
+| 1 | مساعد طقوس الصباح الاستيقاظ | دمج واجهة برمجة تطبيقات الطقس وبيانات التقويم، توليد خطة صباحية مخصصة بواسطة LLM؛ تشغيل موسيقى مخصصة عبر مكبرات صوت ذكية، وإضاءة تدريجية للإضاءة الذكية |
+| 2 | خالق أجواء الحياة المستقلة | الاتصال بأجهزة المنزل الذكي (الإضاءة، الصوت، جهاز نشر الروائح)، يقوم LLM بتعديل المعلمات تلقائيًا بناءً على الوقت/المزاج؛ التعلم من تفضيلات المستخدم للتحسين المستمر |
+| 3 | مولد خطة الاستشفاء المنزلي لعطلة نهاية الأسبوع | ربط واجهة برمجة تطبيقات منصات البث للحصول على قوائم الأفلام، وإنشاء خطة تجمع بين الأفلام + الطعام + الديكور بناءً على التفضيلات السابقة للمستخدم |
+| 4 | إذاعة لتهدئة الروح قبل النوم | توليد قصص لطيفة باستخدام تحويل النص إلى كلام (TTS)، خوارزمية خلط الضوضاء البيضاء، خفض تدريجي ذكي للصوت؛ تعديل المحتوى بناءً على بيانات النوم |
+| 5 | ملتقط إلهام الجماليات الحياتية | التعرف على الصور لتحليل صور بيئة المستخدم، توليد اقتراحات جمالية بواسطة LLM؛ توصية محتوى بأسلوب Pinterest/Xiaohongshu |
+
+---
+
+## 2. الرفقة العاطفية
+> 💡 **الفكرة الأساسية**: القبول والرفقة غير المشروطة، لتكون حاوية رقيقة للمشاعر
+
+| الرقم | اسم السيناريو | وظيفة السيناريو |
+| :--: | ------------ | ------------ |
+| 1 | المستمع المتعاطف في وقت متأخر من الليل | تشفير من طرف إلى طرف لضمان الخصوصية، تحليل المشاعر بواسطة LLM لفهم المشاعر، تخزين الذاكرة طويلة المدى لقصص المستخدم، حوار متعدد الجولات لمرافقته باستمرار |
+| 2 | مرافق التعافي من الفراق | خوارزمية تحديد المرحلة العاطفية، تقديم دعم مختلف لكل مرحلة (مرحلة الفضفضة ← مرحلة التنفيس ← مرحلة إعادة البناء)؛ استرجاع RAG لقاعدة المعرفة النفسية |
+| 3 | مدرب التنفس لتخفيف القلق | ربط بيانات المستشعرات الحيوية (معدل ضربات القلب/التنفس)، مراقبة مستوى القلق في الوقت الفعلي؛ التوجيه الصوتي لإيقاع التنفس، إرشادات الاسترخاء العضلي التدريجي |
+| 4 | مرشد إعادة بناء الثقة بالنفس | إطار حوار علم النفس الإيجابي، تسجيل وتقديم ملاحظات حول الإنجازات الصغيرة للمستخدم؛ تقنيات إعادة البناء المعرفي للمساعدة في تغيير الحوار الذاتي السلبي |
+| 5 | التفسير الذكي ليوميات المشاعر | نموذج NLP للتعرف على المشاعر، تحليل السلاسل الزمنية لاكتشاف أنماط المشاعر؛ رسم بياني مرئي للمشاعر، إنذار تنبؤي للمشاعر |
+
+---
+
+## 3. الترفيه والتسلية
+
+> 💡 **الفكرة الأساسية**: خلق تجارب غامرة، لجعل الترفيه ملاذًا للروح
+
+| الرقم | اسم السيناريو | وظيفة السيناريو |
+| :--: | ------------ | ------------ |
+| 1 | حكم (DM) غامر لألعاب القصص | توليد فروع القصة في الوقت الفعلي بواسطة LLM، تشخيص شخصيات NPC عبر تحويل النص إلى كلام، تعديل الصعوبة والإيقاع ديناميكيًا بناءً على ردود فعل اللاعبين؛ عرض مشاهد AR/VR |
+| 2 | شخصيات NPC روحانية في ألعاب العالم المفتوح | قاعدة بيانات الذاكرة طويلة المدى لتخزين تاريخ تفاعلات اللاعب، توليد حوار مخصص بواسطة LLM؛ الحساب العاطفي يجعل شخصيات NPC تمتلك ردود فعل عاطفية حقيقية |
+| 3 | توليد محتوى بودكاست مخصص | توليد محتوى حصري بناءً على خريطة اهتمامات المستخدم، استنساخ الصوت المفضل للمستخدم عبر TTS؛ تفاعل مباشر للإجابة على أسئلة المستمعين |
+| 4 | فرقة الأجواء في الحفلات الموسيقية الافتراضية | عرض الصور الرمزية الافتراضية، تفاعل التعليقات المنبثقة في الوقت الفعلي، عصي التوهج/أدوات الدعم الافتراضية؛ تقنية الصوت المكاني لخلق شعور بالحضور |
+| 5 | شريك إبداع مشترك للروايات التفاعلية | توليد القصة في الوقت الفعلي بواسطة LLM، اختيارات المستخدم تؤثر على مسار القصة؛ تصميم بنهايات متعددة، تطور ديناميكي لعلاقات الشخصيات |
+
+---
+
+## 4. النمو الشخصي
+
+> 💡 **الفكرة الأساسية**: النمو ليس زهدًا، بل رحلة اكتشاف ذات ممتعة
+
+| الرقم | اسم السيناريو | وظيفة السيناريو |
+| :--: | ------------ | ------------ |
+| 1 | شاهد النمو الشخصي | عرض مرئي لمسار النمو عبر جدول زمني، وضع علامات تلقائية للمعالم؛ رسوم بيانية مقارنة تظهر "أنا في الماضي" مقابل "أنا الآن" |
+| 2 | مدرب لعبة بناء العادات | آليات لعب (نقاط الخبرة، المستويات، الشارات)، لوحة المتصدرين الاجتماعية، لعب دور مدرب AI (مثل "مرشد المغامرات") |
+| 3 | التوافق مع شريك تعلم المهارات | خوارزمية التوافق بناءً على الاهتمامات وأهداف التعلم، مجتمع مجموعات التعلم، آلية مراقبة وتسجيل متبادلة |
+| 4 | مكتشف السعادة الصغيرة اليومية | التعرف على الصور لاكتشاف اللحظات الجميلة في الحياة، توجيه دفتر الامتنان (gratitude journal)، مراجعة اللحظات الجميلة أسبوعيًا |
+| 5 | محاكي تجارب الحياة | محاكاة نتائج الخيارات المختلفة عبر قصص متعددة الفروع، مقارنة الحيوات المتوازية؛ عرض مرئي لعواقب القرارات |
+
+---
+
+## 5. التفاعل الاجتماعي
+
+> 💡 **الفكرة الأساسية**: جعل التواصل الاجتماعي سهلاً وطبيعيًا، وإيجاد طرق اتصال مريحة
+
+| الرقم | اسم السيناريو | وظيفة السيناريو |
+| :--: | ------------ | ------------ |
+| 1 | مولد مواضيع كسر الجليد | توصية ذكية للمواضيع بناءً على المناسبة والمشاركين، تحليل المحادثات في الوقت الفعلي لتقديم اقتراحات لاستكمال الموضوع؛ تلميحات لإنقاذ المواقف المحرجة |
+| 2 | خبير أجواء نصوص منشورات Moments | تحليل محتوى الصور، توليد نصوص بأنماط متعددة (أدبي/فكاهي/عميق) باستخدام LLM؛ توصية ذكية للرموز التعبيرية والتنسيق |
+| 3 | مخطط أجواء المواعيد | توليد خطط مواعد بناءً على اهتمامات الطرفين، توصيات بالمطاعم/الأنشطة، اقتراحات لمواضيع المحادثة؛ تذكيرات بالطقس وحركة المرور في الوقت الفعلي |
+| 4 | روح الأجواء في التجمعات عن بُعد | مكتبة ألعاب عبر الإنترنت، مولد أنشطة لكسر الجليد، عجلة المواضيع؛ خلفيات افتراضية وفلاتر لتحسين الأجواء |
+| 5 | مساعد إدارة الطاقة الاجتماعية | تقييم استنزاف الطاقة بعد الأنشطة الاجتماعية، اقتراحات للتعافي (توصيات بأنشطة فردية)؛ تخطيط ذكي للتقويم الاجتماعي |
+
+---
+
+## 6. التعبير الإبداعي
+
+> 💡 **الفكرة الأساسية**: كل شخص يمتلك الإبداع، يحتاج فقط إلى من يوقظه
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | حقيبة إسعافات جفاف الإلهام | خوارزمية الترابط عبر المجالات، توليد كلمات تحفيزية عشوائية، مكتبة prompt إبداعية؛ أداة تفريغ إلهام على شكل خريطة ذهنية |
+| 2 | مرشد استكشاف الأسلوب الشخصي | تحليل الصور لتحديد الأسلوب الحالي للمستخدم، توصيات اتجاهات الأسلوب، تجربة افتراضية للملابس/المكياج؛ خط زمني لتطور الأسلوب |
+| 3 | مستشار جماليات دفاتر الملاحظات واليوميات | توصيات قوالب التنسيق، توليد مخططات الألوان، اقتراحات عناصر الزينة؛ التعرف على الخط اليدوي وتجميل المحتوى |
+| 4 | دليل أجواء التكوين التصويري | التعرف على المشهد واقتراحات التكوين، توصيات أنماط الفلاتر، تعديل ذكي لمعلمات تحرير الصور؛ مسار تعلم تقنيات التصوير |
+| 5 | مزامن الموسيقى مع المزاج | خوارزمية تحليل المشاعر الموسيقية، التعرف على مزاج المستخدم، توليد قوائم تشغيل مخصصة؛ قصص الموسيقى ومقدمة خلفية |
+
+---
+
+## 7. استكشاف السفر
+
+> 💡 **الفكرة الأساسية**: السفر ليس مجرد رؤية المناظر الطبيعية، بل هو الشعور بأسلوب حياة مختلف
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | مرشد استكشاف المشي في المدينة | تجميع محتوى خبراء محليين، توصيات أماكن غير تقليدية، تنقل بتقنية AR؛ ترجمة فورية وشرح صوتي |
+| 2 | توليد يوميات مزاج الرحلة | تصنيف وانتقاء تلقائي للصور، توليد يوميات سفر جميلة باستخدام LLM، خط زمني مع علامات جغرافية؛ توليد فيديو رحلة بنقرة واحدة |
+| 3 | مساعد مرافق للسفر الفردي | مشاركة الموقع في الوقت الفعلي وتنبيهات السلامة، جهات اتصال طوارئ محلية، مرافقة صوتية لمرشد AI سياحي؛ مجتمع تواصل للمسافرين منفردين |
+| 4 | معاينة أجواء الوجهة | معاينة بانورامية بتقنية VR/360°، محاكاة الأصوات والروائح المحلية، تقديم الخلفية الثقافية؛ تجربة "إقامة تجريبية" افتراضية |
+| 5 | توجيه أجواء تصوير السفر | تذكيرات بالوقت الذهبي، خطوط مساعدة التكوين، توصيات نقاط التصوير المحلية المميزة؛ اقتراحات أنماط تلوين ما بعد التصوير |
+
+---
+
+## 8. الصحة البدنية والنفسية
+
+> 💡 **الفكرة الأساسية**: الصحة ليست هدفاً، بل هي رعاية ذاتية لطيفة
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | موقظ دوافع الرياضة | توصية ذكية بنوع التمارين بناءً على حالة المستخدم، خيارات تمارين دقيقة (5 دقائق)، تحديات رياضية قائمة على الألعاب؛ تسجيل الوصول الاجتماعي للتمارين |
+| 2 | مطبخ إلهام الأكل الصحي | التعرف على مكونات الثلاجة، توصيات وصفات مخصصة، تحليل التغذية والتوافق؛ إرشادات طبخ خطوة بخطوة |
+| 3 | خبير تحسين أجواء جودة النوم | تحليل بيانات مراقبة النوم، توليد طقوس ما قبل النوم، اقتراحات تحسين البيئة (الحرارة/الرطوبة/الإضاءة)؛ استيقاظ ذكي |
+| 4 | مرشد إدراك الجسد | توجيه تأمل مسح الجسد، الربط العاطفي لأجزاء الجسم، تمارين الاتصال بين العقل والجسد؛ تصوير الملاحظات الحيوية |
+| 5 | مساعد تذكير الرعاية الذاتية | مراقبة شدة العمل، تذكيرات منتظمة لأخذ قسط من الراحة، اقتراحات أنشطة رعاية دقيقة (شرب الماء/التمدد/التنفس العميق)؛ سجل الرعاية الذاتية |
+
+---
+
+## 9. استكشاف المعرفة
+
+> 💡 **الفكرة الأساسية**: التعلم مغامرة لا تنتهي أبداً، والفضول هو أفضل معلم
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | مرشد تعزيز استكشاف المعرفة | تصور خريطة النقاط المعرفية، مسار تعلم قائم على اجتياز المراحل، نظام شارات الإنجاز؛ لعب دور مرشد AI |
+| 2 | شريك سيناريوهات تعلم اللغة | لعب LLM لأدوار مختلفة لإجراء محادثات، تصحيح النطق، تقديم الخلفية الثقافية؛ محاكاة سيناريوهات غامرة |
+| 3 | مساعد إشباع الفضول | الاتصال بويكيبيديا/رسم المعرفة، تبسيط المفاهيم المعقدة، توصيات المعارف ذات الصلة؛ تسجيل الفضول |
+| 4 | ملهم إلهام ملاحظات القراءة | تحليل محتوى الكتب، استخراج وربط الأفكار، توصيات بزوايا التفكير؛ قوالب وتجميل ملاحظات القراءة |
+| 5 | خالق أجواء مشاركة المعرفة | توليد تلقائي لبطاقات المعرفة، تحسين نصوص المشاركة، تجميل بصري؛ تغذية راجعة لبيانات المشاركة الاجتماعية |
+
+---
+
+## 10. إدارة العلاقات
+
+> 💡 **الفكرة الأساسية**: العلاقات الجيدة تحتاج إلى اهتمام، والاهتمام لا يحتاج إلى أن يكون معقداً
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | مدرب التواصل في العلاقات الحميمة | توليد قوالب للتعبير عن المشاعر، إرشادات مهارات التواصل غير العنيف، عبارات حل النزاعات؛ تقييم صحة العلاقة |
+| 2 | مساعد تذكير رعاية الأسرة | تذكيرات بالمواعيد المهمة (أعياد الميلاد/الذكرى السنوية)، اقتراحات عبارات الرعاية، توصيات بأنشطة عائلية؛ توليد ألبوم عائلي |
+| 3 | خبير أجواء صيانة الصداقات | تسجيل تفاعلات الأصدقاء، توصيات بالموضوعات المشتركة، تنظيم تجمعات عن بُعد؛ خط زمني للصداقة وتوليد الذكريات |
+| 4 | مخطط الإفصاح والمفاجآت | توليد خطط مفاجآت مخصصة، توصيات بالهدايا، اقتراحات عبارات رومانسية؛ جدول زمني للتنفيذ وتذكيرات |
+| 5 | توجيه أجواء تخفيف النزاعات | عبارات تهدئة المشاعر، توجيه التفكير بمنظور الطرف الآخر، اقتراحات خطوات المصالحة؛ تتبع إصلاح العلاقة |
+
+---
+
+## 11. مرافقة الحيوانات الأليفة
+
+> 💡 **الفكرة الأساسية**: الحيوانات الأليفة هي عائلة، ومرافقتها تستحق أن تُسجل وتُقدر
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | يوميات أنسنة الحيوانات الأليفة | تحليل سلوك الحيوان الأليف، توليد يوميات بصيغة المتكلم، إضافة صور تلقائية؛ "Moments" للحيوانات الأليفة |
+| 2 | مفسر سلوك الحيوانات الأليفة | تحليل فيديو سلوك الحيوان الأليف، إنذارات صحية، اقتراحات للتدريب؛ قاعدة معرفية بخصائص السلالات |
+| 3 | مخطط وقت مرافقة الحيوانات الأليفة | توصيات بأنشطة للحيوانات الأليفة، دروس صنع ألعاب DIY، توصيات بأماكن صديقة للحيوانات الأليفة؛ التوافق الاجتماعي للحيوانات الأليفة |
+| 4 | مولد قصص تذكارية للحيوانات الأليفة | انتقاء الصور ومقاطع الفيديو، توليد قصة على خط زمني، إضافة الموسيقى؛ توليد تلقائي لألبوم/فيديو تذكاري |
+| 5 | دليل الطمأنينة للمبتدئين في تربية الحيوانات الأليفة | دليل رعاية مرحلي، إجابات للأسئلة الشائعة، التعامل مع حالات الطوارئ؛ دعم مجتمع المبتدئين |
+
+---
+
+## 12. الصحة المالية
+
+> 💡 **الفكرة الأساسية**: الحرية المالية ليست هدفاً، بل الصحة المالية هي الهدف
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | مساعد الوعي بالمزاج الاستهلاكي | تحليل سجلات الاستهلاك، تحليل الارتباط بين المزاج والاستهلاك، إنذار الشراء الاندفاعي؛ اقتراحات الإشباع البديل |
+| 2 | التحفيز المرئي لأهداف الادخار | تصور تقدم الهدف، عرض مشاهد الأحلام، الاحتفال بالإنجازات؛ ألعاب بناء عادات الادخار |
+| 3 | تعلم المعرفة المالية بسهولة | دفع المعرفة المجزأة، تدريس الحالات القائمة على السيناريو، أسئلة وأجوبة تفاعلية؛ اختبارات المعرفة والشهادات |
+| 4 | مهدئ القلق المالي | تقييم صحة الوضع المالي، تقنيات إدارة الضغط، خطط عمل بخطوات صغيرة؛ استشارات الصحة النفسية المالية |
+| 5 | لعبة تجربة الاستثمار الصغير | محاكاة استثمار افتراضية، التثقيف حول المخاطر، لعبة محفظة الاستثمار؛ توجيه للاستثمار الحقيقي الصغير |
+
+---
+
+## 13. التطور المهني
+
+> 💡 **الفكرة الأساسية**: المهنة ليست مساراً ثابتاً، بل هي أرض برية يمكن استكشافها
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | رفيق الحيرة المهنية | تقييم الاهتمامات المهنية، جرد القدرات، توصيات بمعلومات الصناعة؛ حوار مع مرشد مهني |
+| 2 | ميقظ الشعور بالإنجاز في العمل | تسجيل إنجازات العمل، استخلاص القيمة، تصور الإنجازات؛ جمع التعليقات الإيجابية من الزملاء/العملاء |
+| 3 | مساعد أجواء التواصل المهني | توصيات بمواضيع العمل، مهارات networking، توصيات بالفعاليات الصناعية؛ تحسين محتوى LinkedIn |
+| 4 | محفز أفكار العمل الجانبي | مطابقة المهارات-الاهتمامات-طلب السوق، مكتبة حالات العمل الجانبي، دليل البدء؛ تواصل مجتمع العمل الجانبي |
+| 5 | محطة تعزيز الثقة قبل المقابلة | مقابلة محاكاة، التحضير للأسئلة الشائعة، تقنيات تعزيز الثقة؛ نصائح حول المظهر |
+
+---
+
+## 14. المساحة المنزلية
+
+> 💡 **الفكرة الأساسية**: المنزل ليس مجرد مكان للعيش، بل هو ملاذ للروح
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | مصمم أجواء المساحة المنزلية | تحليل صور المساحة، توصيات بالأنماط، توصيات بالأثاث/الديكور؛ معاينة AR للتأثير |
+| 2 | دليل تغيير ديكور المنزل حسب الفصول | توصيات ب themes موسمية، نصائح التخزين والعرض، حلول ديكور الأعياد؛ إنشاء قائمة تسوق |
+| 3 | سحر مساحات المساحات الصغيرة | خوارزميات تحسين المساحة، توصيات بأثاث متعدد الاستخدامات، نصائح التخزين؛ تقنيات التوسع البصري للمساحة |
+| 4 | صانع الطقوس المنزلية | تصميم طقوس يومية (صباحية/مسائية/عطلة نهاية الأسبوع)، تذكيرات بتنفيذ الطقوس؛ تقييم تأثير الطقوس |
+| 5 | الرفقة النفسية للتخلص من الأشياء | تقييم القيمة العاطفية للأشياء، إرشادات خطوات التخلص من الأشياء، الدعم النفسي؛ توصيات بقنوات التبرع/إعادة التدوير |
+
+---
+
+## 15. الطبخ وفنون الطهي
+
+> 💡 **الفكرة الأساسية**: الطعام هو لغة الحب، والطبخ هو طريقة للتعبير عنه
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | طبخ الشفاء لشخص واحد | التعرف على مكونات الثلاجة، توصيات بوصفات بسيطة، إرشادات step-by-step؛ جماليات تقديم الطعام لشخص واحد |
+| 2 | تصميم أجواء مائدة الأعياد | قائمة طعام ب theme الأعياد، حلول ترتيب مائدة الطعام، تقنيات خلق الأجواء؛ تحسين تجربة الضيوف |
+| 3 | مطابق الحالة المزاجية للطعام | خوارزمية الارتباط بين المزاج والطعام، وصفات تنظيم المشاعر، توصيات comfort food؛ توجيه الشفاء من خلال الطبخ |
+| 4 | بناء ثقة المبتدئين في المطبخ | وصفات فائقة البساطة، تقنيات إنقاذ الفشل، عبارات بناء الثقة؛ زيادة تدريجية في الصعوبة |
+| 5 | دليل أجواء تصوير الطعام | نصائح لتقديم الطعام، استخدام الإضاءة الطبيعية، إرشادات زوايا التصوير؛ اقتراحات للفلاتر والتعديل اللاحق |
+
+---
+
+## 16. أسلوب الأزياء والملابس
+
+> 💡 **الفكرة الأساسية**: الأزياء هي تعبير عن الذات، والأسلوب هو انعكاس للداخل
+
+| الرقم | اسم سيناريو التطبيق | وظائف سيناريو التطبيق |
+| :--: | ------------ | ------------ |
+| 1 | لوحة مزاج ملابس اليوم | توصيات شاملة بناءً على الطقس/المناسبة/المزاج، تجربة الملابس الافتراضية، إلهام التنسيق؛ إدارة خزانة الملابس |
+| 2 | منسق خزانة الملابس الكبسولية | جرد خزانة الملابس، تركيبات القطع، حلول ارتداء القطعة الواحدة بطرق متعددة؛ نصائح التسوق (لسد الثغرات) |
+| 3 | رحلة استكشاف الأسلوب الشخصي | اختبار الأسلوب، توصيات ب icon مرجعي، مسار تطور الأسلوب؛ بناء الثقة |
+| 4 | صانع أفكار ارتداء الملابس القديمة بشكل جديد | إلهام لتحويل الملابس القديمة، طرق تنسيق جديدة، تقنيات إضافة الإكسسوارات؛ مفهوم الموضة المستدامة |
+| 5 | مستشار الإطلالات للمناسبات الخاصة | تفسير dress code للمناسبة، إنشاء حلول الإطلالات، نصائح للمكياج وتسريحات الشعر؛ تناسق الإطلالة الشاملة |
+
+---
+
+## المبادئ الأساسية لتصميم منتجات C-side
+
+### 1. من "الوظيفة" إلى "الشعور"
+
+تركز منتجات B-side على "أي مشكلة يمكن أن تحلها هذه الوظيفة"، بينما تركز منتجات C-side على "ما الشعور الذي يمكن أن تجلبه هذه الوظيفة".
+
+| تفكير B-side | تفكير C-side |
+|---------|---------|
+| زيادة الكفاءة | توفير الوقت للقيام بالأشياء المحبوبة |
+| خفض التكاليف | جعل كل فلس يُنفق يستحق ذلك |
+| حل نقاط الألم | خلق تجارب رائعة |
+| اكتمال الوظائف | الشعور المثالي |
+
+### 2. المستويات الثلاثة لخلق الأجواء
+
+**المستوى الحسي**: تصميم البصر والسمع واللمس
+- ألوان دافئة
+- أصوات مهدئة
+- تأثيرات حركية سلسة
+
+**المستوى العاطفي**: التواصل مع المشاعر وتوجيهها
+- فهم مزاج المستخدم
+- تقديم الدعم العاطفي
+- خلق مشاعر إيجابية
+
+**مستوى المعنى**: تقبل القيم والانتماء
+- جعل المستخدم يشعر بأنه مفهوم
+- خلق شعور بالانتماء
+- إضفاء معنى على الفعل
+
+### 3. قوة الإيحاء النفسي
+
+تصميم ونصوص منتجات C-end تنقل إيحاءات نفسية:
+
+- **إيحاء إيجابي**: "لقد قمت بعمل رائع بالفعل"، "خذ وقتك، لا بأس"
+- **إيحاء بالانتماء**: "الكثيرون مثلك"، "أنت لست وحدك"
+- **إيحاء بالنمو**: "كل محاولة هي تقدم"، "أنت تتحسن"
+
+### 4. اجعل المستخدم يصبح نسخة أفضل من نفسه
+
+أفضل منتجات C-end لا تغير المستخدم، بل تساعده على أن يصبح النسخة التي يرغب في أن يكونها.
+
+- ليس "يجب عليك..."، بل "يمكنك..."
+- ليس "يجب أن..."، بل "إذا كنت تريد..."
+- ليس "أنت لست بعد..."، بل "أنت بالفعل..."
+
+---
+
+> 🌟 **تذكر**: ما يشتريه المستخدم النهائي ليس الميزات، بل الشعور؛ وليس الأدوات، بل الرفقة؛ وليس الخدمات، بل الفهم.
diff --git a/docs/ar-sa/stage-1/appendix-consumer-scenarios/index.md b/docs/ar-sa/stage-1/appendix-consumer-scenarios/index.md
new file mode 100644
index 0000000..2b8d05a
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-consumer-scenarios/index.md
@@ -0,0 +1,1348 @@
+---
+title: 'اتجاهات ملهمة لسيناريوهات المستهلكين (B2C)'
+description: 'يُلخص هذا المستند الاتجاهات الإبداعية لتطبيقات النماذج اللغوية الكبيرة (LLM) في سيناريوهات الاستهلاك الموجهة للمستهلكين، ويغطي سيناريوهات ملهمة في مجالات نمط الحياة، والرفقة العاطفية، والترفيه، والنمو الشخصي، والتفاعل الاجتماعي، مما يوفر مرجعاً إبداعياً لمطوري تطبيقات الذكاء الاصطناعي يستهدف المستخدمين العاديين.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'حوالي <strong>4 ساعات</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// مجموعة مواضيع لكل سيناريو - التركيز على الشعور، الأجواء، والإيحاءات النفسية
+const topicPool = {
+  'lifestyle': [
+    { title: 'مساعد طقوس الصباح الاستيقاظ', desc: 'يولد طقوس صباحية حصرية بناءً على الطقس والجدول الزمني والمزاج، ليجعل كل يوم يبدأ بشكل جميل' },
+    { title: 'مصمم أجواء الحياة المستقلة', desc: 'يصمم مخططات أجواء المنزل لمن يعيشون بمفردهم، مع اقتراحات ذكية للإضاءة والموسيقى والروائح العطرية' },
+    { title: 'مولد خطط الاسترخاء المنزلي في عطلة نهاية الأسبوع', desc: 'يوصي بمزيج مثالي للبقاء في المنزل بناءً على مزاجك الحالي: فيلم + وجبات خفيفة + ترتيب الأجواء' },
+    { title: 'إذاعة لتهدئة الروح قبل النوم', desc: 'يولد قصصاً لطيفة وتأملات موجهة، كإذاعة خاصة ترافقك في النوم' },
+    { title: 'ملهم جماليات الحياة', desc: 'يكتشف الجمال في الأشياء اليومية الصغيرة، ويولد اقتراحات لجماليات الحياة وإرشادات لإضفاء الطقوس' }
+  ],
+  'emotion': [
+    { title: 'مستمع في وقت متأخر من الليل', desc: 'سلة مهملات عاطفية متاحة على مدار 24 ساعة، تتقبل كل الهموم دون إصدار أحكام' },
+    { title: 'مرافق للتعافي من الفراق', desc: 'يوفر رفقة لطيفة ونصائح للتعافي ومنفذاً للمشاعر خلال فترة انخفاض الروح المعنوية بعد الفراق' },
+    { title: 'مدرب تنفسي لتخفيف القلق', desc: 'يستشعر مشاعر القلق، ويوجه تمارين التنفس والتأمل الذهني' },
+    { title: 'مرشد لإعادة بناء الثقة بالنفس', desc: 'من خلال الحوارات الإيجابية والإيحاءات النفسية، يساعد في إعادة بناء الهوية الذاتية والشعور بالقيمة' },
+    { title: 'تحليل ذكي ليوميات المشاعر', desc: 'يحلل يوميات المشاعر، ويكتشف أنماطها، ويقدم رؤى دافئة واقتراحات' }
+  ],
+  'entertainment': [
+    { title: 'حكم لعبة قتل الغامضة غامرة', desc: 'يلعب دور حكم لعبة القتل الغامضة، ويخلق أجواء تشويق، ويدفع عجلة الحبكة' },
+    { title: 'شخصية NPC روحانية في عالم مفتوح', desc: 'شخصية NPC نابضة بالحياة، تتذكر قصص اللاعب وتخلق روابط عاطفية حقيقية' },
+    { title: 'توليد محتوى بودكاست مخصص', desc: 'يولد بودكاست حصري بناءً على اهتماماتك، بطبيعية كأنك تتحدث مع صديق' },
+    { title: 'فريق أجواء الحفلات الموسيقية الافتراضية', desc: 'يخلق إحساساً بالحضور في الحفلات الموسيقية عبر الإنترنت، مع تفاعل فوري وتشجيع وتعزيز الأجواء' },
+    { title: 'شريك إبداع مشترك للروايات التفاعلية', desc: 'يشارك القراء في كتابة القصة، حيث يؤثر كل خيار على مسار العالم' }
+  ],
+  'growth': [
+    { title: 'شاهد على النمو الشخصي', desc: 'يسجل مسار النمو، ويقدم التشجيع والمراجعة في المحطات المهمة' },
+    { title: 'مدرب يلعب دور بناء العادات', desc: 'يحول بناء العادات المملة إلى لعبة مغامرة ممتعة' },
+    { title: 'مطابقة رفيق تعلم المهارات', desc: 'ابحث عن شركاء تعلم يشاركونك نفس الأفكار، للترابط المتبادل ومشاركة التقدم' },
+    { title: 'مكتشف السعادة الصغيرة اليومية', desc: 'يساعد في اكتشاف الأشياء الجميلة الصغيرة في الحياة، ويعزز الامتنان والعقلية الإيجابية' },
+    { title: 'محاكي تجارب الحياة', desc: 'يحاكي خيارات الحياة المختلفة، لتجربة احتمالات أخرى في أكوان موازية' }
+  ],
+  'social': [
+    { title: 'مولد مواضيع كسر الجليد', desc: 'يوفر مواضيع مثيرة للاهتمام في المناسبات الاجتماعية، لكسر الحواجز وتقريب المسافات' },
+    { title: 'مصمم أجواء نصوص وسائل التواصل', desc: 'يولد نصوصاً أنيقة لمنشورات وسائل التواصل الاجتماعي بناءً على الصور والمزاج' },
+    { title: 'مخطط أجواء المواعدة', desc: 'يصمم مخطط أجواء كامل للمواعدة، من المكان إلى المواضيع والمفاجآت' },
+    { title: 'روح الحفل عن بعد', desc: 'ينشط الأجواء في التجمعات عبر الإنترنت، وينظم الألعاب ويوجه التفاعل' },
+    { title: 'مساعد إدارة الطاقة الاجتماعية', desc: 'يساعد أصحاب الشخصية الانطوائية في إدارة طاقتهم الاجتماعية، وإيجاد إيقاع اجتماعي مريح' }
+  ],
+  'creative': [
+    { title: 'حقيبة إسعافات جفاف الإلهام', desc: 'يوفر شرارات إلهام غير متوقعة عند الوصول إلى عنق الزجاجة الإبداعي' },
+    { title: 'دليل استكشاف الأسلوب الشخصي', desc: 'يساعد في اكتشاف أسلوبك الشخصي الفريد، من الملابس إلى التعبير' },
+    { title: 'مستشار جماليات دفاتر الملاحظات واليوميات', desc: 'يقدم اقتراحات جمالية لتصميم دفاتر الملاحظات، واختيار الألوان، وأفكار المحتوى' },
+    { title: 'دليل أجواء تكوين الصور الفوتوغرافية', desc: 'يقدم اقتراحات للتصوير وتحرير الصور بناءً على المشهد والشعور المطلوب' },
+    { title: 'مطابق المزاج الموسيقي', desc: 'يوصي بمزيج موسيقي مثالي بناءً على مزاجك الحالي والمشهد' }
+  ],
+  'travel': [
+    { title: 'دليل استكشاف المشي في المدينة', desc: 'استكشف المدينة كالسكان المحليين، واكتشف الأماكن المخفية والكنوز' },
+    { title: 'توليد يوميات مزاج الرحلة', desc: 'يحول صور ومشاعر الرحلة إلى يوميات وذكريات جميلة' },
+    { title: 'مساعد مرافق للسفر الفردي', desc: 'يوفر الرفقة والنصائح والشعور بالأمان للمسافرين منفردين' },
+    { title: 'معاينة أجواء الوجهة', desc: 'تجربة غامرة لأجواء الوجهة قبل المغادرة، للدخول في الحالة مسبقاً' },
+    { title: 'دليل أجواء التصوير الفوتوغرافي للسفر', desc: 'توجيه لالتقاط صور سفر تحكي قصة بناءً على المشهد والإضاءة' }
+  ],
+  'health': [
+    { title: 'محفز الدافع الرياضي', desc: 'تقديم التشجيع والدافع المناسبين تمامًا عندما لا تشعر بالرغبة في الحركة' },
+    { title: 'مطبخ إلهام الأكل الصحي', desc: 'إنشاء وصفات صحية مريحة للنفس بناءً على المزاج والمكونات' },
+    { title: 'خبير تحسين أجواء جودة النوم', desc: 'خلق أجواء نوم عالية الجودة بشكل شامل، من البيئة إلى علم النفس' },
+    { title: 'مرشد الإدراك الجسدي', desc: 'توجيه الانتباه إلى إشارات الجسم وبناء التواصل بين العقل والجسد' },
+    { title: 'مساعد تذكير العناية بالذات', desc: 'تذكيرك بالتوقف والاعتناء بنفسك وسط الانشغال' }
+  ],
+  'learning': [
+    { title: 'دليل استكشاف المعرفة بالأسلوب اللعبي', desc: 'تحويل التعلم الممل إلى مغامرة استكشافية ممتعة' },
+    { title: 'شريك تعلم اللغات في سيناريوهات واقعية', desc: 'لعب أدوار مختلفة لاكتساب اللغة بشكل طبيعي من خلال الحوارات' },
+    { title: 'مساعد إشباع الفضول', desc: 'الإجابة على مختلف الأفكار الخيالية وإشباع الفضول تجاه العالم' },
+    { title: 'ملهم ملاحظات القراءة', desc: 'المساعدة في تنظيم أفكار القراءة واكتشاف زوايا تفكير جديدة' },
+    { title: 'خلق أجواء مشاركة المعرفة', desc: 'تحويل المعرفة المكتسبة إلى محتوى مشاركة ممتع' }
+  ],
+  'relationship': [
+    { title: 'مدرب التواصل في العلاقات الحميمية', desc: 'المساعدة في التعبير عن المشاعر التي يصعب البوح بها وتحسين العلاقات الحميمية' },
+    { title: 'مساعد تذكير الاهتمام بالعائلة', desc: 'تذكيرك بالاهتمام بعائلتك وتقديم اقتراحات تفاعل دافئة' },
+    { title: 'خبير أجواء الحفاظ على الصداقات', desc: 'المساعدة في الحفاظ على الصداقات عن بعد وخلق مواضيع مشتركة' },
+    { title: 'مخطط مفاجآت وإعلانات الحب', desc: 'تخطيط مفاجآت ولحظات رومانسية لا تُنسى لشخص مهم' },
+    { title: 'توجيه أجواء تخفيف حدة الصراع', desc: 'تقديم اقتراحات وعبارات لتخفيف حدة التوتر في العلاقات' }
+  ],
+  'pet': [
+    { title: 'يوميات إنسانية للحيوانات الأليفة', desc: 'إنشاء يوميات من منظور الحيوان الأليفة لتسجيل اللحظات الدافئة مع المالك' },
+    { title: 'مُفسّر سلوك الحيوانات الأليفة', desc: 'تفسير لغة سلوك الحيوانات الأليفة لتعميق التواصل معها' },
+    { title: 'تخطيط وقت مرافقة الحيوانات الأليفة', desc: 'تصميم أنشطة إبداعية للتفاعل مع الحيوانات الأليفة لتعزيز المودة' },
+    { title: 'مولّد قصص تذكارية للحيوانات الأليفة', desc: 'تحويل صور وذكريات الحيوانات الأليفة إلى قصص دافئة' },
+    { title: 'دليل الطمأنينة لملاك الحيوانات الأليفة الجدد', desc: 'توفير مرافقة دافئة وإرشاد لملاك الحيوانات الأليفة المبتدئين' }
+  ],
+  'finance': [
+    { title: 'مساعد إدراك مشاعر الاستهلاك', desc: 'إدراك المشاعر الكامنة وراء الاستهلاك الاندفاعي وبناء عادات استهلاك صحية' },
+    { title: 'تحفيز بصري لأهداف الادخار', desc: 'تحويل أهداف الادخار إلى تقدم مرئي للأحلام' },
+    { title: 'تعلم المعرفة المالية بسهولة', desc: 'تعلم المعرفة المالية بطريقة سهلة وممتعة' },
+    { title: 'مهدئ القلق المالي', desc: 'تقديم الدعم العاطفي ونصائح عملية عند مواجهة الضغوط المالية' },
+    { title: 'لعبة تجربة الاستثمار الصغير', desc: 'تجربة الاستثمار بطريقة محاكاة لعبة لخفض حاجز الدخول' }
+  ],
+  'career': [
+    { title: 'مرافق في الحيرة المهنية', desc: 'تقديم الاستماع والاستكشاف ونصائح التوجيه خلال فترات الحيرة المهنية' },
+    { title: 'محفز الشعور بالإنجاز في العمل', desc: 'المساعدة في اكتشاف القيمة والمعنى في العمل لإعادة إشعال الشغف' },
+    { title: 'مساعد أجواء التواصل الاجتماعي المهني', desc: 'تقديم مواضيع خفيفة واقتراحات تفاعل للتواصل الاجتماعي في بيئة العمل' },
+    { title: 'ملهم أفكار الأعمال الجانبية', desc: 'تحفيز أفكار الأعمال الجانبية بناءً على الاهتمامات والمهارات الشخصية' },
+    { title: 'محطة تعزيز الثقة قبل المقابلة', desc: 'تقديم الاستعداد النفسي والتشجيع على الثقة قبل المقابلات' }
+  ],
+  'home': [
+    { title: 'مصمم أجواء المساحة المنزلية', desc: 'تصميم مخططات أجواء المنزل بناءً على المزاج والموسم' },
+    { title: 'دليل تغيير ديكور المنزل حسب الفصول', desc: 'تغيير ديكور المنزل مع تغير الفصول للحفاظ على الشعور بالتجديد' },
+    { title: 'سحر المساحات الصغيرة', desc: 'جعل المساحات الصغيرة تتمتع أيضًا بأجواء مريحة ودافئة' },
+    { title: 'صانع الطقوس المنزلية', desc: 'خلق شعور بالطقوس للأنشطة المنزلية اليومية' },
+    { title: 'مرافق نفسي للتخلص من الأشياء', desc: 'تقديم الدعم النفسي ونصائح اتخاذ القرار عند ترتيب الأشياء' }
+  ],
+  'food': [
+    { title: 'طبخ مريح للفرد الواحد', desc: 'تصميم مخططات طبخ بسيطة ومريحة لمن يعيشون بمفردهم' },
+    { title: 'تصميم أجواء مائدة العطلات', desc: 'تصميم ترتيب مائدة احتفالي للأيام الخاصة' },
+    { title: 'مطابق الأطباق للمزاج', desc: 'وصف الأطعمة وطرق التحضير المناسبة بناءً على المزاج الحالي' },
+    { title: 'بناء ثقة المبتدئين في المطبخ', desc: 'توفير تشجيع دافئ ووصفات بسيطة للطباخين المبتدئين تمامًا' },
+    { title: 'دليل أجواء تصوير الطعام', desc: 'جعل الأطباق المنزلية تبدو جذابة في الصور أيضًا' }
+  ],
+  'fashion': [
+    { title: 'لوحة مزاج الإطلالة اليومية', desc: 'إنشاء إلهام للإطلالات بناءً على الطقس والمناسبة والمزاج' },
+    { title: 'منسق خزانة الملابس الكبسولية', desc: 'خلق إمكانيات تنسيق لا حصر لها باستخدام قطع محدودة' },
+    { title: 'رحلة استكشاف الأسلوب الشخصي', desc: 'المساعدة في اكتشاف وبناء أسلوب شخصي فريد' },
+    { title: 'مبدع إطلالات جديدة للملابس القديمة', desc: 'تقديم إلهام جديد لتنسيق الملابس القديمة' },
+    { title: 'مستشار إطلالات للمناسبات الخاصة', desc: 'تصميم إطلالات تمنح الثقة للمناسبات المهمة' }
+  ]
+}
+
+// خريطة مسارات التوصية المحددة مسبقًا - بناءً على الأجواء والمشاعر
+const recommendationMap = {
+  // نقطة الأجواء: شافي
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // نقطة الأجواء: نمو
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // نقطة الأجواء: اجتماعي
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // نقطة الأجواء: استكشاف
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // نقطة الأجواء: يومي
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'شافي', value: 'healing', desc: 'دافئ، مهدئ، علاجي' },
+  { label: 'نمو', value: 'growth', desc: 'تقدم، اختراق، تحول' },
+  { label: 'اجتماعي', value: 'social', desc: 'تواصل، مشاركة، تفاعل' },
+  { label: 'استكشاف', value: 'explore', desc: 'فضول، مغامرة، اكتشاف' },
+  { label: 'يومي', value: 'daily', desc: 'عادي، حقيقي، اللحظة الحالية' }
+]
+
+const feelingOptions = [
+  { label: 'أريد الاسترخاء', value: 'relax', desc: 'تخفيف التوتر، تصفية الذهن' },
+  { label: 'البحث عن الإلهام', value: 'inspire', desc: 'تحفيز الإبداع، الحصول على إلهام' },
+  { label: 'التوق للتواصل', value: 'connect', desc: 'التواصل مع الآخرين، انسجام عاطفي' },
+  { label: 'هروب مؤقت', value: 'escape', desc: 'الهروب من الواقع، تجربة غامرة' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'نمط الحياة', anchor: '#_1-نمط-الحياة' },
+  { key: 'emotion', name: 'الرفقة العاطفية', anchor: '#_2-الرفقة-العاطفية' },
+  { key: 'entertainment', name: 'الترفيه والتسلية', anchor: '#_3-الترفيه-والتسلية' },
+  { key: 'growth', name: 'النمو الشخصي', anchor: '#_4-النمو-الشخصي' },
+  { key: 'social', name: 'التفاعل الاجتماعي', anchor: '#_5-التفاعل-الاجتماعي' },
+  { key: 'creative', name: 'التعبير الإبداعي', anchor: '#_6-التعبير-الإبداعي' },
+  { key: 'travel', name: 'استكشاف السفر', anchor: '#_7-استكشاف-السفر' },
+  { key: 'health', name: 'الصحة البدنية والنفسية', anchor: '#_8-الصحة-البدنية-والنفسية' },
+  { key: 'learning', name: 'استكشاف المعرفة', anchor: '#_9-استكشاف-المعرفة' },
+  { key: 'relationship', name: 'إدارة العلاقات', anchor: '#_10-إدارة-العلاقات' },
+  { key: 'pet', name: 'مرافقة الحيوانات الأليفة', anchor: '#_11-مرافقة-الحيوانات-الأليفة' },
+  { key: 'finance', name: 'الصحة المالية', anchor: '#_12-الصحة-المالية' },
+  { key: 'career', name: 'التطوير المهني', anchor: '#_13-التطوير-المهني' },
+  { key: 'home', name: 'المساحة المنزلية', anchor: '#_14-المساحة-المنزلية' },
+  { key: 'food', name: 'فنون الطبخ', anchor: '#_15-فنون-الطبخ' },
+  { key: 'fashion', name: 'أسلوب الأزياء', anchor: '#_16-أسلوب-الأزياء' }
+]
+
+// حساب نتائج التوصية - سحب عشوائي من مجموعة المواضيع
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // سحب 1-2 موضوع عشوائياً من كل سيناريو موصى به
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // سحب 1-2 موضوع عشوائياً
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // ترتيب عشوائي وتقييد العدد الإجمالي
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// الحصول على وصف الاختيار الحالي
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // تأخير التمرير لضمان اكتمال تحديث DOM
+  setTimeout(() => {
+    // محاولة البحث عبر ID (يدعم تنسيقات متعددة)
+    let element = document.querySelector(anchor)
+    
+    // إذا لم يتم العثور عليه، تجربة تنسيقات ID محتملة أخرى
+    if (!element) {
+      // محاولة إزالة بادئة الشرطة السفلية
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // إذا لم يتم العثور عليه بعد، البحث عبر نص العنوان
+    if (!element) {
+      // استخراج اسم السيناريو من نقطة الارتساء
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // مطابقة تامة أو مطابقة ضمنية
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // تمييز الفقرة المستهدفة
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# دليل إلهام سيناريوهات التطبيقات الاستهلاكية (C2C)
+
+## مقدمة الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['تطبيقات استهلاكية', 'نمط الحياة', 'التجربة العاطفية', 'خلق الأجواء']" coreOutput="اكتشف أكثر من 15 مصدر إلهام لمشاهد الحياة" expectedOutput="ابحث عن اتجاه منتج يلمس المستخدمين">
+
+يلخص هذا المستند <strong>الاتجاهات الإبداعية لتطبيقات النماذج اللغوية الكبيرة (LLM) في سيناريوهات الاستهلاك الموجهة للمستهلك (C2C)</strong>. على عكس قطاع الأعمال (B2B) الذي يركز على الكفاءة ونقاط الألم، تركز المنتجات الاستهلاكية بشكل أكبر على <strong>خلق الشعور، والإيحاءات النفسية، والأجواء</strong>، مما يتيح للمستخدمين الحصول على تواصل عاطفي وتجربة جميلة أثناء الاستخدام.
+
+</ChapterIntroduction>
+
+## اختيار سريع لأجواء المشهد
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">اعثر على إلهام المشهد الذي يلامسك</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    اختر الأجواء التي ترغب بها والشعور الذي تمر به حاليًا، وسيقوم النظام بترشيح اتجاهات المشاهد ذات الصلة، انقر على العلامة للانتقال إلى الفصل المقابل.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="اختر نوع الأجواء" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="اختر شعورك الحالي" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      السيناريوهات الموصى لك من {{ currentSelection.vibe }} × {{ currentSelection.feeling }} :
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      إعادة الاختيار
+    </el-button>
+  </div>
+</el-card>
+
+## نظرة سريعة على اتجاهات السيناريوهات
+
+<el-row :gutter="16" style="margin-top: 24px;">
+  <el-col :span="8" v-for="scenario in scenarios.slice(0, 6)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} اتجاه إلهام</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(6, 12)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} اتجاه إلهام</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(12, 16)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} اتجاه إلهام</div>
+    </el-card>
+  </el-col>
+</el-row>
+
+---
+
+## 1. أسلوب الحياة
+
+> 💡 **الفكرة الأساسية**: جعل الروتين اليومي العادي ذا طابع احتفالي، وإبداع الجمال في التفاصيل
+
+### 1.1 مساعد طقوس الاستيقاظ الصباحية
+
+**وصف السيناريو**:
+كل يوم عند الاستيقاظ، وبناءً على طقس اليوم، والجدول الزمني، والحالة المزاجية، يتم إنشاء خطة طقوس صباحية مخصصة لك. قد تكون مقطوعة موسيقية هادئة، أو كوب من الشاي يناسب مزاجك اليوم، أو تمرين شد لمدة 5 دقائق، أو كلمة تشجيع في محلها.
+
+**نقاط خلق الأجواء**:
+- استيقاظ تدريجي، بدلاً من الاستعجال المفاجئ
+- تجربة حسية متعددة للبصر والسمع
+- جعل بداية كل يوم مليئة بالترقب والشغف
+
+**التلميح النفسي**:
+> "سيكون اليوم يوماً جميلاً، لأنك تستحق أن تُعامل بلطف"
+
+### 1.2 مصمم أجواء الحياة المستقلة
+
+**وصف السيناريو**:
+تصميم مخطط لأجواء المنزل للأشخاص الذين يعيشون بمفردهم، من خلال التنسيق الذكي للإضاءة، والموسيقى، والروائح العطرية، وغيرها من العناصر، لجعل منزل الفرد مليئاً بالدفء والشعور بالانتماء.
+
+**نقاط خلق الأجواء**:
+- تعديل الأجواء تلقائياً بناءً على الوقت والمزاج
+- تغييرات موسمية في السمات
+- خلق شعور "بالتواجد والرفقة"
+### 1.3 مولّد خطة الاستشفاء المنزلي لعطلة نهاية الأسبوع
+
+**وصف السيناريو**:
+ليلة الجمعة، بناءً على حالتك المزاجية الحالية والطقس، قم بتوليد خطة مثالية للبقاء في المنزل خلال عطلة نهاية الأسبوع. تشمل توصيات للأفلام، اقتران الوجبات الخفيفة، نصائح لت arranging المنزل، وحتى زاوية مناسبة للتأمل والاسترخاء.
+
+**نقاط خلق الأجواء**:
+- عرض مرئي مريح للنفس
+- تجربة اختيار خالية من الضغط
+- جعل البقاء في المنزل متعة حقيقية
+
+### 1.4 إذاعة لتهدئة الروح قبل النوم
+
+**وصف السيناريو**:
+كل ليلة قبل النوم، يتم توليد محتوى تهدئة مخصص لك. قد يكون قصة رقيقة، أو توجيه للتأمل، أو ضوضاء بيضاء، أو مجرد تحية مسائية بسيطة، لترافقك في رحلتك إلى عالم الأحلام.
+
+**نقاط خلق الأجواء**:
+- أصوات وإيقاعات مهدئة
+- تصميم صوتي يتلاشى تدريجياً
+- خلق شعور بالأمان والاسترخاء
+
+### 1.5 صائد إلهام جماليات الحياة
+
+**وصف السيناريو**:
+اكتشاف الجمال في الأشياء اليومية الصغيرة، وتقديم اقتراحات جمالية وإرشادات لخلق طقوس خاصة في الحياة للمستخدمين. كيف تجعل فنجان القهوة أكثر أناقة، وكيف تحول مكتبك إلى مساحة للتركيز المطلق.
+
+**نقاط خلق الأجواء**:
+- اكتشاف غير العادي في المألوف
+- تنمية الإحساس بالجمال
+- تحويل الحياة إلى فن
+
+---
+
+## 2. الرفقة العاطفية
+
+> 💡 **الفكرة الجوهرية**: القبول والرفقة غير المشروطة، ليكون حاويًا رقيقًا للمشاعر
+
+### 2.1 المستمع في جوف الشجرة منتصف الليل
+
+**وصف السيناريو**:
+سلة مهملات عاطفية متاحة على مدار 24 ساعة، تقبل جميع الهموم والأسرار دون إصدار أي أحكام. سواء كنت سعيدًا، حزينًا، غاضبًا، أو حتى تائهًا، سيكون هناك دائمًا مكان يمكنك أن تضع فيه مشاعرك.
+
+**نقاط خلق الأجواء**:
+- أمان مطلق وحماية تامة للخصوصية
+- بلا مقاطعات، بلا وعظ، استماع فقط
+- استجابة رقيقة وتعاطف عميق
+
+**الإيحاء النفسي**:
+> "جميع مشاعرك مشروعة، وأنا هنا لمرافقتك"
+
+### 2.2 مرافق للاستشفاء من آلام الفراق
+
+**وصف السيناريو**:
+في قاع حزن الفراق، يقدم رفقة رقيقة، ونصائح للشفاء، ومنفذًا للمشاعر. لا يتعلق الأمر بالاستعجال لتجاوز الأمر، بل بالسماح لك بأخذ وقتك.
+
+**نقاط خلق الأجواء**:
+- السماح للحزن بالوجود
+- توجيه عاطفي تدريجي
+- إعادة بناء الشعور بالقيمة الذاتية
+
+### 2.3 مدرب التنفس لتخفيف القلق
+
+**وصف السيناريو**:
+استشعار مشاعر القلق لدى المستخدم، وتوجيهه لإجراء تمارين التنفس والتأمل الذهني. في اللحظات التوتر، يوفر مرساة يمكن الاعتماد عليها.
+
+**نقاط خلق الأجواء**:
+- وعي عاطفي فوري
+- طرق تخفيف بسيطة وفعالة
+- خلق شعور بالهدوء والسيطرة
+
+### 2.4 مرشد إعادة بناء الثقة بالنفس
+
+**وصف السيناريو**:
+من خلال الحوارات الإيجابية والإيحاءات النفسية، يساعد المستخدمين على إعادة بناء هويتهم الذاتية والشعور بقيمتهم. تسجيل كل تقدم صغير، وشهادة عملية التحول.
+
+**نقاط خلق الأجواء**:
+- اكتشاف المزايا التي تم تجاهلها
+- الاحتفال بكل انتصار صغير
+- بناء حوار ذاتي إيجابي
+
+### 2.5 التحليل الذكي ليوميات المشاعر
+
+**وصف السيناريو**:
+تحليل يوميات المشاعر للمستخدم، واكتشاف الأنماط العاطفية، وتقديم رؤى دافئة ونصائح. لجعل المستخدم يفهم نفسه بشكل أفضل، ويعيش بسلام مع مشاعره.
+
+**نقاط خلق الأجواء**:
+- مسار عاطفي مرئي
+- رؤى دافئة بدلاً من تحليل بارد
+- تقديم نصائح قابلة للتنفيذ (actionable)
+
+---
+
+## 3. الترفيه والتسلية
+
+> 💡 **الفكرة الجوهرية**: خلق تجارب غامرة، لجعل الترفيه ملاذًا للروح
+
+### 3.1 حكم (DM) غامر في لعب الأدوار الجماعية
+
+**وصف السيناريو**:
+اللعب دور حكم لعبة الأدوار، خلق أجواء الغموض، ودفع الحبكة للأمام. تعديل الإيقاع في الوقت الفعلي بناءً على ردود فعل اللاعبين، لخلق تجربة لعب لا تُنسى.
+
+**نقاط خلق الأجواء**:
+- افتتاحية جذابة
+- إعداد تشويق بمقدار مثالي
+- لعب أدوار غامر
+
+### 3.2 شخصية NPC روحانية في عالم اللعب المفتوح
+
+**وصف السيناريو**:
+شخصية NPC نابضة بالحياة، تتذكر قصص اللاعبين وتكوين روابط عاطفية حقيقية. ليست مجرد مصدر للمهام، بل صديق في عالم اللعبة.
+
+**نقاط خلق الأجواء**:
+- ذاكرة مستمرة وتسلسل زمني
+- تفاعلات مخصصة
+- اتصال عاطفي حقيقي
+
+### 3.3 توليد محتوى بودكاست مخصص
+
+**وصف السيناريو**:
+توليد بودكاست حصري بناءً على اهتمامات المستخدم، بطبيعية كأنك تتحدث مع صديق. يمكن أن يكون المحتوى مشاركة معرفية، أو سرد قصص، أو مجرد رفقة بسيطة.
+
+**نقاط خلق الأجواء**:
+- إحساس بمحادثة طبيعية وسهلة
+- محتوى يتوافق مع الذوق الشخصي
+- رفقة يمكن البدء بها في أي وقت
+
+### 3.4 فريق الأجواء لحفل موسيقي افتراضي
+
+**وصف السيناريو**:
+خلق شعور بالحضور في الحفلات الموسيقية عبر الإنترنت، مع تفاعل فوري، وتشجيع، وتكثيف للأجواء. حتى لو كنت وحدك في المنزل، يمكنك الشعور بالأجواء الحماسية للحفل.
+
+**نقاط خلق الأجواء**:
+- غمر بصري وسمعي
+- تفاعل ورنين فوري
+- خلق شعور بالمشاركة الجماعية
+
+### 3.5 شريك إبداع مشترك للروايات التفاعلية
+
+**وصف السيناريو**:
+التعاون مع القراء لتأليف القصة، حيث يؤثر كل اختيار على مسار العالم. لم يعد القارئ مستهلكًا سلبيًا، بل أصبح شريكًا في إبداع القصة.
+
+**نقاط خلق الأجواء**:
+- إمكانيات لا نهائية
+- حق اختيار حقيقي
+- إبداع قصة تخصك
+
+---
+
+## 4. النمو الشخصي
+
+> 💡 **الفكرة الجوهرية**: النمو ليس زهدًا وتقشفًا، بل رحلة اكتشاف ذات ممتعة
+
+### 4.1 شاهد على النمو الشخصي
+
+**وصف السيناريو**:
+تسجيل مسار نمو المستخدم، وتقديم التشجيع والمراجعة في المحطات المهمة. جعل النمو مرئيًا، وجعل الجهود لا تُنسى.
+
+**نقاط خلق الأجواء**:
+- مسار نمو مرئي
+- إحياء ذكرى اللحظات المهمة
+- نظرة دافئة للماضي واستشراف للمستقبل
+
+**الإيحاء النفسي**:
+> "لقد قطعت مسافة طويلة دون أن تدرك"
+
+### 4.2 مدرب يُنمّي العادات عبر أسلوب اللعب (Gamification)
+
+**وصف السيناريو**:
+تحويل تكوين العادات المملة إلى لعبة مغامرات ممتعة. كل مثابرة على عادة صغيرة هي إنجاز جديد داخل اللعبة.
+
+**نقاط خلق الأجواء**:
+- نظام تحفيزي يعتمد على اللعب
+- تغذية راجعة إيجابية فورية
+- جعل المثابرة أمرًا ممتعًا
+
+### 4.3 توفيق شريك لتعلم المهارات
+
+**وصف السيناريو**:
+إيجاد شركاء تعلم يشاركونك نفس الشغف، للترابط المتبادل ومشاركة التقدم. لم يعد التعلم رحلة وحدة منعزلة.
+
+**نقاط خلق الأجواء**:
+- إيجاد شركاء على نفس الموجة
+- أجواء تحفيز متبادل
+- فرحة التقدم المشترك
+
+### 4.4 مكتشف السعادة الصغيرة اليومية
+
+**وصف السيناريو**:
+مساعدة المستخدمين على اكتشاف الجمال الصغير في الحياة، وتنمية الامتنان والعقلية الإيجابية. تسجيل شيء صغير يستحق الامتنان كل يوم.
+
+**نقاط خلق الأجواء**:
+- اكتشاف الجمال الذي تم تجاهله
+- تنمية عادة الامتنان
+- تراكم الطاقة الإيجابية
+
+### 4.5 محاكي تجارب الحياة
+
+**وصف السيناريو**:
+محاكاة خيارات الحياة المختلفة، وتجربة احتمالات أخرى في أكوان موازية. مساعدة المستخدمين على استكشاف الاحتمالات المختلفة، واتخاذ خيارات أكثر واقعية.
+
+**نقاط خلق الأجواء**:
+- تجربة اختيار آمنة
+- استكشاف الذات المجهولة
+- لا يوجد صواب أو خطأ، فقط تجربة
+
+---
+
+## 5. التفاعل الاجتماعي
+
+> 💡 **الفكرة الجوهرية**: جعل التواصل الاجتماعي سهلاً وطبيعيًا، وإيجاد طريقة اتصال مريحة
+
+### 5.1 مولّد مواضيع لكسر الجليد
+
+**وصف السيناريو**:
+تقديم مواضيع شيقة في المناسبات الاجتماعية لكسر الجمود وتقريب المسافات. سواء كانت تجمعاً مع غرباء أو لقاءً مع أصدقاء قدامى، ستجد دائماً الموضوع المناسب.
+
+**عناصر خلق الأجواء**:
+- مواضيع مريحة وممتعة
+- مناسبة لمناسبات مختلفة
+- بدايات طبيعية للمحادثة
+
+### 5.2 خبير أجواء منشورات وسائل التواصل الاجتماعي
+
+**وصف المشهد**:
+بناءً على الصور والمزاج، قم بإنشاء منشورات أنيقة لوسائل التواصل الاجتماعي. اجعل المشاركة وسيلة للتعبير، واجعل التوثيق أكثر دفئاً.
+
+**عناصر خلق الأجواء**:
+- يتوافق مع الأسلوب الشخصي
+- أنيق دون تكلف
+- تعبير صادق عن المشاعر
+
+### 5.3 مخطط أجواء المواعيد
+
+**وصف المشهد**:
+تصميم خطة أجواء متكاملة للمواعيد، من اختيار المكان إلى المواضيع وال مفاجآت. اجعل كل موعد ذكرى جميلة.
+
+**عناصر خلق الأجواء**:
+- تصميم تجربة متكامل
+- مفاجآت مقدرة بعناية
+- خلق أجواء رومانسية
+
+### 5.4 روح التجمعات عن بُعد
+
+**وصف المشهد**:
+إضفاء الحيوية على التجمعات عبر الإنترنت، وتنظيم الألعاب وتوجيه التفاعل. اجعل التجمعات عن بُعد تحمل نفس حماس اللقاءات وجهاً لوجه.
+
+**عناصر خلق الأجواء**:
+- ألعاب وأنشطة ممتعة
+- توجيه التفاعل الطبيعي
+- خلق شعور بالمشاركة الجماعية
+
+### 5.5 مساعد إدارة الطاقة الاجتماعية
+
+**وصف المشهد**:
+مساعدة الأشخاص الانطوائيين على إدارة طاقتهم الاجتماعية وإيجاد وتيرة مريحة للتواصل. يمكنهم الاستمتاع ب متعة التواصل الاجتماعي دون الحاجة لإجبار أنفسهم.
+
+**عناصر خلق الأجواء**:
+- احترام الحدود الشخصية
+- إيجاد الطريقة المناسبة لك
+- لا حاجة لتغيير شخصيتك
+
+---
+
+## 6. التعبير الإبداعي
+
+> 💡 **الفكرة الأساسية**: كل شخص يمتلك الإبداع، يحتاج فقط إلى من يوقظه
+
+### 6.1 طوق نجاة لجفاف الإلهام
+
+**وصف المشهد**:
+تقديم شرارات إلهام غير متوقعة عند الوصول إلى عنق الزجاجة الإبداعي. ليست إجابات نموذجية، بل مفاتيح لفتح آفاق التفكير.
+
+**عناصر خلق الأجواء**:
+- كسر الأنماط الفكرية المعتادة
+- ارتباطات غير متوقعة
+- تحفيز الإبداع الداخلي
+
+### 6.2 دليل اكتشاف الأسلوب الشخصي
+
+**وصف المشهد**:
+مساعدة المستخدمين على اكتشاف أسلوبهم الشخصي الفريد، من الملابس إلى التعبير. ليجد كل شخص صوته الخاص.
+
+**عناصر خلق الأجواء**:
+- اكتشاف ذاتك الفريدة
+- تشجيع التجربة وال محاولة
+- بناء العلامة الشخصية
+
+### 6.3 مستشار جماليات دفاتر الملاحظات واليوميات
+
+**وصف المشهد**:
+تقديم نصائح جمالية لتصميم دفاتر الملاحظات، تنسيق الألوان، وأفكار المحتوى. اجعل التوثيق فناً، واجعل الذكريات ذات ملمس أعمق.
+
+**عناصر خلق الأجواء**:
+- إرشادات جمالية بصرية
+- إلهام إبداعي للمحتوى
+- أسلوب شخصي مميز
+
+### 6.4 دليل أجواء التكوين التصويري
+
+**وصف المشهد**:
+بناءً على المشهد والإحساس المطلوب، تقديم نصائح للتصوير وتحرير الصور. اجعل كل صورة تنقل المشاعر المطلوبة.
+
+**عناصر خلق الأجواء**:
+- الأجواء تسبق التقنية
+- التعبير البصري عن المشاعر
+- عين تكتشف الجمال
+
+### 6.5 خبير مزج الموسيقى مع المزاج
+
+**وصف المشهد**:
+بناءً على المزاج الحالي والمشهد، التوصية بمجموعة موسيقية مثالية. الموسيقى هي صدى للمشاعر، وصانعة للأجواء.
+
+**عناصر خلق الأجواء**:
+- مطابقة دقيقة للمشاعر
+- توصيات مبنية على المشهد
+- القوة الشافية للموسيقى
+
+---
+
+## 7. استكشاف السفر
+
+> 💡 **الفكرة الأساسية**: السفر ليس مجرد رؤية المناظر، بل هو الشعور بأساليب حياة مختلفة
+
+### 7.1 دليل استكشاف التجول في المدينة
+
+**وصف المشهد**:
+استكشاف المدينة كأنك أحد السكان المحليين، واكتشاف الأماكن المخفية كالكنوز. ليس مجرد زيارة المعالم السياحية، بل عيش النبض الحقيقي للمدينة.
+
+**عناصر خلق الأجواء**:
+- منظور السكان المحليين
+- اكتشافات ومفاجآت غير متوقعة
+- التعمق في روح المدينة
+
+### 7.2 إنشاء يوميات مزاج السفر
+
+**وصف المشهد**:
+تحويل صور ومشاعر السفر إلى مذكرات وذكريات جميلة. اجعل كل رحلة تترك بصمة فريدة.
+
+**عناصر خلق الأجواء**:
+- توثيق المشاعر
+- كلمات رائعة
+- ذكريات خالدة
+
+### 7.3 مساعد مرافق للسفر الفردي
+
+**وصف المشهد**:
+توفير الرفقة والنصائح والشعور بالأمان للمسافرين منفردين. السفر بمفردك يمكن أن يجعلك تشعر بالرعاية والرفقة.
+
+**عناصر خلق الأجواء**:
+- خلق الشعور بالأمان
+- رفقة ممتعة
+- منفرد ولكن لست وحدك
+
+### 7.4 معاينة أجواء الوجهة
+
+**وصف المشهد**:
+تجربة غامرة لأجواء الوجهة قبل المغادرة، للدخول في الحالة مسبقاً. اجعل الترقب جزءاً من الرحلة.
+
+**عناصر خلق الأجواء**:
+- معاينة غامرة
+- تحفيز الترقب والخيال
+- الدخول في حالة السفر مبكراً
+
+### 7.5 إرشاد أجواء تصوير السفر
+
+**وصف المشهد**:
+بناءً على المشهد والإضاءة، توجيه لالتقاط صور سفر تحكي قصة. ليس مجرد توثيق، بل سرد لقصة الرحلة.
+
+**عناصر خلق الأجواء**:
+- تكوين يروي قصة
+- التقاط المشاعر
+- زاوية فريدة
+
+---
+
+## 8. الصحة البدنية والنفسية
+
+> 💡 **الفكرة الأساسية**: الصحة ليست هدفاً، بل هي رعاية ذاتية لطيفة
+
+### 8.1 محفز طاقة الرياضة
+
+**وصف المشهد**:
+تقديم التشجيع والدافع المناسبين في اللحظات التي لا ترغب فيها بالحركة. ليس إجباراً، بل إيقاظاً للدافع الداخلي.
+
+**عناصر خلق الأجواء**:
+- التفهم لعدم الرغبة في الحركة
+- توجيه تدريجي
+- الاحتفال بكل فعل صغير
+
+### 8.2 مطبخ إلهام الأكل الصحي
+
+**وصف المشهد**:
+بناءً على المزاج والمكونات، إنشاء وصفات صحية مريحة للنفس. الأكل الصحي يمكن أن يكون متعة لذيذة أيضاً.
+
+**عناصر خلق الأجواء**:
+- إغراء الطعام الشهي
+- طرق تحضير بسيطة
+- توازن صحي
+
+### 8.3 خبير أجواء تحسين جودة النوم
+
+**وصف المشهد**:
+من البيئة المحيطة إلى الحالة النفسية، خلق أجواء نوم عالية الجودة بشكل شامل. اجعل النوم أكثر اللحظات التي تتطلع إليها في اليوم.
+
+**عناصر خلق الأجواء**:
+- تحسين البيئة
+- الاسترخاء النفسي
+- تصميم الشعور بالطقوس
+
+### 8.4 مرشد الإدراك الجسدي
+
+**وصف المشهد**:
+توجيه المستخدمين للانتباه إلى إشارات الجسم وبناء اتصال بين العقل والجسم. توقف وسط الانشغال واستمع لجسدك.
+
+**عناصر خلق الأجواء**:
+- توجيه لطيف
+- إدراك الجسم
+- التوحد بين العقل والجسم
+
+### 8.5 مساعد تذكير الرعاية الذاتية
+
+**وصف المشهد**:
+تذكير المستخدمين وسط الانشغال بالتوقف والاعتناء بأنفسهم. تذكير بسيط قد يغير حالة اليوم بأكمله.
+
+**عناصر خلق الأجواء**:
+- تذكير في الوقت المناسب
+- أفعال بسيطة
+- رعاية لطيفة
+
+---
+
+## 9. استكشاف المعرفة
+
+> 💡 **الفكرة الأساسية**: التعلم مغامرة لا تنتهي، والفضول هو أفضل معلم
+
+### 9.1 دليل تعلم المعرفة بالأسلوب اللعبي
+
+**وصف المشهد**:
+تحويل تعلم المعرفة الجافة إلى مغامرة استكشافية ممتعة. كل نقطة معرفية هي كنز ينتظر أن يكتشف.
+
+**عناصر خلق الأجواء**:
+- تجربة قائمة على أسلوب اللعب
+- متعة الاستكشاف
+- الشعور بالإنجاز
+
+### 9.2 شريك تعلم اللغة في سيناريوهات واقعية
+
+**وصف المشهد**:
+لعب أدوار مختلفة لاكتساب اللغة بشكل طبيعي من خلال حوارات واقعية. ليس حفظاً عن ظهر قلب، بل تعلماً من خلال الاستخدام.
+**عناصر خلق الأجواء**:
+- سيناريوهات واقعية
+- شخصيات ممتعة
+- اكتساب طبيعي
+
+### 9.3 مساعد إشباع الفضول
+
+**وصف السيناريو**:
+الإجابة على مختلف الأفكار الخيالية لإشباع الفضول حول العالم. لا توجد أسئلة غبية، بل فقط إجابات تنتظر أن تُكتشف.
+
+**عناصر خلق الأجواء**:
+- تشجيع الأسئلة
+- إجابات ممتعة
+- تحفيز المزيد من الفضول
+
+### 9.4 إلهام ملاحظات القراءة
+
+**وصف السيناريو**:
+المساعدة في تنظيم أفكار القراءة واكتشاف زوايا تفكير جديدة. جعل القراءة حواراً مع الكاتب ومع الذات.
+
+**عناصر خلق الأجواء**:
+- تفكير عميق
+- رؤى شخصية
+- ربط المعرفة
+
+### 9.5 خلق أجواء مشاركة المعرفة
+
+**وصف السيناريو**:
+تحويل المعرفة المكتسبة إلى محتوى مشاركة ممتع. المشاركة ليست مجرد مُخرجات، بل هي عملية لتعميق الفهم.
+
+**عناصر خلق الأجواء**:
+- تعبير ممتع
+- متعة المشاركة
+- نشر المعرفة
+
+---
+
+## 10. إدارة العلاقات
+
+> 💡 **الفكرة الأساسية**: العلاقات الجيدة تحتاج إلى اهتمام، والاهتمام لا يحتاج إلى أن يكون معقداً
+
+### 10.1 مدرب التواصل في العلاقات الحميمية
+
+**وصف السيناريو**:
+مساعدة المستخدمين على التعبير عن المشاعر التي يصعب البوح بها وتحسين العلاقات الحميمية. في بعض الأحيان، كل ما تحتاجه هو إيجاد الطريقة الصحيحة لقول ما في قلبك.
+
+**عناصر خلق الأجواء**:
+- مساحة آمنة للتعبير
+- اقتراحات لطيفة
+- تعزيز التفاهم
+
+### 10.2 مساعد تذكير الاهتمام بالعائلة
+
+**وصف السيناريو**:
+تذكير المستخدمين بالاهتمام بالعائلة، وتقديم اقتراحات تفاعل دافئة. ألا تُنسى أهم الاهتمامات وسط الانشغال.
+
+**عناصر خلق الأجواء**:
+- تذكير في الوقت المناسب
+- اهتمام بسيط
+- تواصل دافئ
+
+### 10.3 مهندس أجواء الحفاظ على الصداقات
+
+**وصف السيناريو**:
+المساعدة في الحفاظ على الصداقات عن بعد، وخلق مواضيع مشتركة. المسافة ليست مشكلة، الاهتمام هو المفتاح.
+
+**عناصر خلق الأجواء**:
+- خلق فرص للتواصل
+- مواضيع مشتركة
+- استمرار الصداقة
+
+### 10.4 مخطط التصريحات والمفاجآت
+
+**وصف السيناريو**:
+تخطيط مفاجآت ولحظات رومانسية لا تُنسى للأشخاص المهمين. جعل الأيام الخاصة أكثر تميزاً.
+
+**عناصر خلق الأجواء**:
+- تصميم مخصص
+- مفاجآت رومانسية
+- ذكريات لا تُنسى
+
+### 10.5 توجيه أجواء تخفيف التوتر
+
+**وصف السيناريو**:
+تقديم اقتراحات وعبارات لتخفيف حدة الأجواء في أوقات توتر العلاقات. المساعدة في إيجاد جسر للتصالح.
+
+**عناصر خلق الأجواء**:
+- فهم موقف الطرفين
+- اقتراحات لطيفة
+- إصلاح العلاقة
+
+---
+
+## 11. مرافقة الحيوانات الأليفة
+
+> 💡 **الفكرة الأساسية**: الحيوانات الأليفة هي عائلة، ومرافقتها تستحق أن تُسجل وتُقدر
+
+### 11.1 يومريات أنسنة الحيوانات الأليفة
+
+**وصف السيناريو**:
+إنشاء يوميات من منظور الحيوان الأليف، لتسجيل الحياة اليومية الدافئة مع المالك. تخيل كيف سيصفون الوقت الذي يقضونه معك.
+
+**عناصر خلق الأجواء**:
+- منظور لطيف
+- روتين يومي دافئ
+- تواصل عاطفي
+
+### 11.2 مفسر سلوك الحيوانات الأليفة
+
+**وصف السيناريو**:
+تفسير لغة سلوك الحيوانات الأليفة، لتعميق التواصل معها. فهم احتياجاتهم ومشاعرهم بشكل أفضل.
+
+**عناصر خلق الأجواء**:
+- تفسير احترافي
+- تعزيز الفهم
+- رعاية أفضل
+
+### 11.3 تخطيط وقت مرافقة الحيوانات الأليفة
+
+**وصف السيناريو**:
+تصميم أنشطة إبداعية للتفاعل مع الحيوانات الأليفة، لتعزيز المودة. جعل وقت المرافقة أكثر متعة ومعنى.
+
+**عناصر خلق الأجواء**:
+- أنشطة إبداعية
+- تفاعل ممتع
+- ذكريات جميلة
+
+### 11.4 إنشاء قصص تذكارية للحيوانات الأليفة
+
+**وصف السيناريو**:
+تحويل صور وذكريات الحيوانات الأليفة إلى قصص دافئة. تسجيل اللحظات الثمينة مع هذه الكرات الفراء.
+
+**عناصر خلق الأجواء**:
+- سرد دافئ
+- ذكريات ثمينة
+- حب أبدي
+
+### 11.5 دليل الطمأنينة للمبتدئين في تربية الحيوانات الأليفة
+
+**وصف السيناريو**:
+توفير مرافقة وتوجيه دافئ لمالكي الحيوانات الأليفة المبتدئين. جعل رحلة تربية الحيوانات الأليفة مليئة بالثقة والمتعة.
+
+**عناصر خلق الأجواء**:
+- توجيه شامل
+- تشجيع دافئ
+- مرافقة مطمئنة
+
+---
+
+## 12. الصحة المالية
+
+> 💡 **الفكرة الأساسية**: الحرية المالية ليست هدفاً، الصحة المالية هي الهدف
+
+### 12.1 مساعد الوعي بمشاعر الاستهلاك
+
+**وصف السيناريو**:
+الوعي بالمشاعر الكامنة وراء الاستهلاك الاندفاعي، وبناء عادات استهلاك صحية. فهم سبب رغبتك في الشراء أهم من قرار الشراء نفسه.
+
+**عناصر خلق الأجواء**:
+- وعي لطيف
+- فهم بدلاً من الحكم
+- عادات صحية
+
+### 12.2 التحفيز البصري لأهداف الادخار
+
+**وصف السيناريو**:
+تحويل أهداف الادخار إلى تقدم مرئي للأحلام. جعل الادخار رحلة لتحقيق الأحلام.
+
+**عناصر خلق الأجواء**:
+- تقدم مرئي
+- ربط بالأحلام
+- شعور بالإنجاز
+
+### 12.3 تعلم المعرفة المالية بسهولة
+
+**وصف السيناريو**:
+تعلم المعرفة المالية بطريقة سهلة وممتعة. لا ينبغي أن تكون التخطيط المالي مملًا، بل يمكن أن يكون استكشافاً ممتعاً.
+
+**عناصر خلق الأجواء**:
+- تعبير سهل
+- أمثلة ممتعة
+- معرفة عملية
+
+### 12.4 مهدئ القلق المالي
+
+**وصف السيناريو**:
+تقديم الدعم العاطفي ونصائح عملية عند مواجهة الضغوط المالية. القلق لن يحل المشكلة، لكن الهدوء يمكنه ذلك.
+
+**عناصر خلق الأجواء**:
+- تهدئة المشاعر
+- نصائح عملية
+- قوة الأمل
+
+### 12.5 لعبة تجربة الاستثمار الصغير
+
+**وصف السيناريو**:
+تجربة الاستثمار من خلال أسلوب اللعب، لخفض حاجز الدخول. تعلم الاستثمار في بيئة آمنة.
+
+**عناصر خلق الأجواء**:
+- تجربة قائمة على اللعب
+- محاولات آمنة
+- متعة التعلم
+
+---
+
+## 13. التطوير المهني
+
+> 💡 **الفكرة الأساسية**: المهنة ليست مساراً ثابتاً، بل هي أرض برية يمكن استكشافها
+
+### 13.1 مرافق في الحيرة المهنية
+
+**وصف السيناريو**:
+تقديم الاستماع والاستكشاف واقتراحات التوجيه خلال فترات الحيرة المهنية. الحيرة أمر طبيعي، المهم ألا تواجهها وحدك.
+
+**عناصر خلق الأجواء**:
+- استماع بدون أحكام
+- احتمالات للاستكشاف
+- مرافقة دافئة
+
+### 13.2 مُيقظ الشعور بالإنجاز في العمل
+
+**وصف السيناريو**:
+مساعدة المستخدمين على اكتشاف القيمة والمعنى في عملهم، لإشعال شغفهم من جديد. في بعض الأحيان، كل ما تحتاجه هو النظر من زاوية مختلفة.
+
+**عناصر خلق الأجواء**:
+- اكتشاف القيمة
+- إشعال الشغف
+- الشعور بالإنجاز
+
+### 13.3 مساعد أجواء التواصل المهني
+
+**وصف السيناريو**:
+تقديم مواضيع خفيفة واقتراحات تفاعل للتواصل الاجتماعي في مكان العمل. جعل التواصل المهني أقل إحراجاً وأكثر طبيعية.
+
+**عناصر خلق الأجواء**:
+- مواضيع خفيفة
+- تفاعل طبيعي
+- علاقات مريحة
+
+### 13.4 محفز أفكار العمل الجانبي
+
+**وصف السيناريو**:
+تحفيز أفكار العمل الجانبي بناءً على الاهتمامات والمهارات الشخصية. استكشاف الاحتمالات اللامحدودة خارج العمل.
+
+**عناصر خلق الأجواء**:
+- اكتشاف الاهتمامات
+- استكشاف الاحتمالات
+- تشجيع على العمل
+
+### 13.5 محطة تعزيز الثقة قبل المقابلة
+
+**وصف السيناريو**:
+تقديم الدعم النفسي وتشجيع الثقة قبل المقابلة. لتمكين المستخدم من استقبال الفرص بأفضل حالة.
+
+**نقاط خلق الأجواء**：
+- بناء الثقة
+- الاستعداد الكافي
+- أفضل حالة
+
+---
+
+## 14. المساحة المنزلية
+
+> 💡 **الفكرة الأساسية**：المنزل ليس مجرد مكان للعيش، بل هو ملاذ للروح
+
+### 14.1 مصمم أجواء المساحة المنزلية
+
+**وصف السيناريو**：
+تصميم مخططات أجواء المنزل بناءً على المزاج والموسم. لجعل المنزل يتغير مع المزاج والمواسم.
+
+**نقاط خلق الأجواء**：
+- تصميم الأجواء
+- تغييرات المواسم
+- التوافق مع المزاج
+
+### 14.2 دليل تحويل المنزل حسب الفصول الأربعة
+
+**وصف السيناريو**：
+تغيير ديكور المنزل مع تغير الفصول للحفاظ على الشعور بالتجديد. لجعل المنزل دائمًا مليئًا بالحيوية والمفاجآت.
+
+**نقاط خلق الأجواء**：
+- موضوع الموسم
+- الشعور بالتجديد
+- الطقوس في الحياة
+
+### 14.3 سحر المساحات الصغيرة
+
+**وصف السيناريو**：
+جعل المساحات الصغيرة تتمتع أيضًا بأجواء مريحة ودافئة. حجم المساحة ليس مهمًا، المهم هو الشعور.
+
+**نقاط خلق الأجواء**：
+- تحسين المساحة
+- الأجواء الدافئة
+- حياة مريحة
+
+### 14.4 صانع الطقوس المنزلية
+
+**وصف السيناريو**：
+خلق شعور بالطقوس للأنشطة المنزلية اليومية. لجعل الأعمال المنزلية العادية ذات معنى أيضًا.
+
+**نقاط خلق الأجواء**：
+- تصميم الطقوس
+- إعطاء المعنى
+- جودة الحياة
+
+### 14.5 مرافقة نفسية للتخلص من الأشياء
+
+**وصف السيناريو**：
+تقديم الدعم النفسي ونصائح اتخاذ القرار عند ترتيب الأشياء. التخلص من الأشياء ليس مجرد رمي، بل هو ترتيب للداخل.
+
+**نقاط خلق الأجواء**：
+- الدعم النفسي
+- المساعدة في اتخاذ القرار
+- الترتيب الداخلي
+
+---
+
+## 15. الطعام والطبخ
+
+> 💡 **الفكرة الأساسية**：الطعام هو لغة الحب، والطبخ هو طريقة للتعبير عنه
+
+### 15.1 طبخ الشفاء لشخص واحد
+
+**وصف السيناريو**：
+تصميم خطط طبخ بسيطة وشافية لمن يعيشون بمفردهم. حتى لو كنت وحدك، يجب أن تأكل جيدًا وتحب نفسك جيدًا.
+
+**نقاط خلق الأجواء**：
+- طرق بسيطة
+- نكهة شافية
+- التعبير عن حب الذات
+
+### 15.2 تصميم أجواء مائدة العطلات
+
+**وصف السيناريو**：
+تصميم ترتيبات مائدة ذات طابع احتفالي للأيام الخاصة. لجعل كل وجبة لحظة تستحق التذكر.
+
+**نقاط خلق الأجواء**：
+- تصميم الطقوس
+- المتعة البصرية
+- الذكريات الجميلة
+
+### 15.3 مطابق المزاج للطعام
+
+**وصف السيناريو**：
+التوصية بالأطعمة والطرق المناسبة بناءً على المزاج الحالي. في بعض الأحيان، كل ما نحتاجه هو تلك اللقمة من النكهة الصحيحة.
+
+**نقاط خلق الأجواء**：
+- التوافق مع المزاج
+- شفاء الطعام
+- التواصل العاطفي
+
+### 15.4 بناء ثقة المبتدئين في المطبخ
+
+**وصف السيناريو**：
+تقديم تشجيع دافئ ووصفات بسيطة لمن ليس لديهم خبرة في الطبخ. يمكن للجميع أن يصبحوا طهاة أنفسهم.
+
+**نقاط خلق الأجواء**：
+- بداية بسيطة
+- تشجيع دافئ
+- بناء الثقة
+
+### 15.5 دليل أجواء تصوير الطعام
+
+**وصف السيناريو**：
+جعل الطبخ المنزلي يبدو جذابًا في الصور أيضًا. توثيق الطعام هو أيضًا توثيق لجمال الحياة.
+
+**نقاط خلق الأجواء**：
+- خلق الأجواء
+- المتعة البصرية
+- تسجيل الحياة
+
+---
+
+## 16. أسلوب الأزياء
+
+> 💡 **الفكرة الأساسية**：الأزياء هي تعبير عن الذات، والأسلوب هو انعكاس للداخل
+
+### 16.1 لوحة مزاج الإطلالة اليومية
+
+**وصف السيناريو**：
+توليد إلهام للإطلالات بناءً على الطقاس والمناسبة والمزاج. لجعل إطلالة كل يوم تعبر عن المزاج الحالي.
+
+**نقاط خلق الأجواء**：
+- التعبير عن المزاج
+- التوافق مع المناسبة
+- بناء الثقة
+
+### 16.2 منسق خزانة الكبسولة
+
+**وصف السيناريو**：
+خلق إمكانيات تنسيق لا حصر لها باستخدام قطع محدودة. الأقل هو الأكثر، والبسيط يمكن أن يكون أنيقًا أيضًا.
+
+**نقاط خلق الأجواء**：
+- مفهوم البساطة
+- التنسيق الإبداعي
+- الموضة المستدامة
+
+### 16.3 رحلة استكشاف الأسلوب الشخصي
+
+**وصف السيناريو**：
+مساعدة المستخدمين على اكتشاف وبناء أسلوب شخصي فريد. الأزياء ليست مجرد ارتداء الملابس، بل هي ارتداء موقفك الخاص.
+
+**نقاط خلق الأجواء**：
+- استكشاف الذات
+- بناء الأسلوب
+- التعبير بثقة
+
+### 16.4 مصمم إبداعي لإعادة ارتداء الملابس القديمة
+
+**وصف السيناريو**：
+تقديم إلهام جديد لتنسيق الملابس القديمة. لإحياء الملابس القديمة وخلق موضة مستدامة.
+
+**نقاط خلق الأجواء**：
+- التنسيق الإبداعي
+- المفهوم البيئي
+- الشعور بالتجديد
+
+### 16.5 مستشار الإطلالات للمناسبات الخاصة
+
+**وصف السيناريو**：
+تصميم إطلالات تمنح الثقة للمناسبات الهامة. لجعل كل لحظة مهمة تظهر بشكل مثالي.
+
+**نقاط خلق الأجواء**：
+- التوافق مع المناسبة
+- تعزيز الثقة
+- التقديم المثالي
+
+---
+
+## المبادئ الأساسية لتصميم منتجات C-end
+
+### 1. من "الوظيفة" إلى "الشعور"
+
+تركز منتجات B-end على "أي مشكلة يمكن أن تحلها هذه الوظيفة"، بينما تركز منتجات C-end على "ما الشعور الذي يمكن أن تجلبه هذه الوظيفة".
+
+| تفكير B-end | تفكير C-end |
+|---------|---------|
+| تحسين الكفاءة | توفير الوقت لفعل الأشياء المحبوبة |
+| خفض التكاليف | جعل كل فلس يُنفق يستحق ذلك |
+| حل نقاط الألم | خلق تجارب جميلة |
+| اكتمال الوظائف | الشعور المثالي |
+
+### 2. مستويات خلق الأجواء الثلاثة
+
+**المستوى الحسي**：تصميم البصر والسمع واللمس
+- ألوان دافئة
+- أصوات مهدئة
+- حركات سلسة
+
+**المستوى العاطفي**：التواصل العاطفي وتوجيهه
+- فهم مزاج المستخدم
+- تقديم الدعم العاطفي
+- خلق مشاعر إيجابية
+
+**مستوى المعنى**：تقدير القيمة والانتماء
+- جعل المستخدم يشعر بالتفهم
+- خلق شعور بالانتماء
+- إعطاء معنى للإجراءات
+
+### 3. قوة الإيحاء النفسي
+
+النصوص والتصاميم في منتجات C-end تنقل إيحاءات نفسية：
+
+- **الإيحاء الإيجابي**："لقد قمت بعمل رائع بالفعل"、"خذ وقتك، لا بأس"
+- **إيحاء الانتماء**："الكثيرون مثلك"、"لست وحدك"
+- **إيحاء النمو**："كل محاولة هي تقدم"、"أنت تتحسن"
+
+### 4. جعل المستخدم يصبح نسخة أفضل من نفسه
+
+أفضل منتجات C-end لا تغير المستخدم، بل تساعده على أن يصبح النسخة التي يريد أن يكون عليها.
+
+- ليس "يجب عليك..."، بل "يمكنك..."
+- ليس "يجب أن..."، بل "إذا كنت تريد..."
+- ليس "أنت لست كافيًا..."، بل "أنت بالفعل..."
+
+---
+
+> 🌟 **تذكر**：ما يشتريه مستخدم C-end ليس الوظائف، بل المشاعر؛ وليس الأدوات، بل الرفقة؛ وليس الخدمات، بل الفهم.
diff --git a/docs/ar-sa/stage-1/appendix-double-diamond/index.md b/docs/ar-sa/stage-1/appendix-double-diamond/index.md
new file mode 100644
index 0000000..478892c
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-double-diamond/index.md
@@ -0,0 +1,544 @@
+---
+title: 'نموذج الألماس المزدوج: افعل الشيء الصحيح أولاً، ثم افعل الشيء بشكل صحيح'
+description: 'مقالة تمهيدية عن نموذج الألماس المزدوج Double Diamond للقراء بدون خبرة سابقة. فهم المراحل الأربع Discover و Define و Develop و Deliver، وتجنب الاستعجال في صنع النماذج الأولية قبل توضيح المشكلة.'
+---
+
+<script setup>
+const duration = 'حوالي <strong>1.5 ساعة</strong>'
+</script>
+
+# نموذج الألماس المزدوج: افعل الشيء الصحيح أولاً، ثم افعل الشيء بشكل صحيح
+
+<a id="top-dd"></a>
+
+## دليل هذا الفصل
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Double Diamond', 'التفكير التصميمي', 'تحليل المتطلبات', 'تصميم الحلول']"
+  coreOutput="تعريف مشكلة أوضح ونقطة تحقق أكثر منطقية"
+  expectedOutput="عدم الاستعجال في رسم النموذج الأولي، بل معرفة التفكير في المشكلة أولاً ثم مقارنة الحلول"
+>
+
+العديد من الأشخاص عند صنع منتجهم الأول، الخطأ الأكثر شيوعًا ليس "عدم بذل جهد كافٍ"، بل الدخول بسرعة كبيرة في الحل.
+
+بمجرد أن يظهر اتجاه في الذهن، يبدأون في التفكير في كيفية رسم الصفحة، وأين يوضع الزر، وهل يتم توصيل AI، وهل يتم عمل تسجيل دخول، وبأي أداة يتم رسم النموذج الأولي. بعد جولة كاملة من العمل، يكتشفون أن المشكلة الأساسية لم يتم التفكير فيها بوضوح: هل لدى المستخدم نقطة ألم حقيقية؟ هل هذه المشكلة تستحق الحل الآن؟ تعتقد أنك تتقدم في المشروع، لكنك في الواقع تتسارع فقط في الاتجاه الخاطئ بجدية.
+
+نموذج الألماس المزدوج (Double Diamond) مصمم لتجنب هذه الحالة.
+
+أهم تذكير قدمه هو: **"عمل الشيء الصحيح" و"عمل الشيء بشكل صحيح" هما مرحلتان مختلفتان تمامًا.** إذا لم توضح المشكلة بعد، واستعجلت في صنع نموذج أولي، فعادةً ما ستجعل الاتجاه الخاطئ أكثر اكتمالاً فقط.
+
+</ChapterIntroduction>
+
+::: info الحد الأدنى من SOP
+**الهدف**: بعد القراءة، ستكون أكثر وضوحًا حول متى يجب التفكير في المشكلة أولاً ومتى يجب البدء في التفكير في الحلول والنماذج الأولية عند صنع المنتج، لتجنب العمل بجدية في الاتجاه الخاطئ منذ البداية.
+
+**خطوات العمل**: اتبع الخطوات الأربع `Discover → Define → Develop → Deliver`، وقم فقط بما يجب القيام به في المرحلة الحالية.
+
+**النتيجة**: ستحصل على تعريف مشكلة أوضح، والعديد من الحلول القابلة للمقارنة، وأصغر نسخة قابلة للتحقق.
+
+**روابط سريعة**: [ما هو نموذج الألماس المزدوج](#dd-what) · [الألماس الأول](#dd-first) · [كيف يساعدك AI](#dd-ai)
+:::
+
+## ما ستتعلمه في هذا الفصل
+
+1. ما هو نموذج الألماس المزدوج، ولماذا هو مناسب للمبتدئين عند صنع المنتجات
+2. ماذا تفعل المراحل الأربع Discover و Define و Develop و Deliver على التوالي
+3. كيف نفرق بين "الآن يجب الاستمرار في التوسع" و"الآن يجب البدء في التضييق"
+4. كيفية استخدام نموذج الألماس المزدوج في منتجات AI وتصميم النماذج الأولية والتحقق من المتطلبات
+
+<a id="dd-what"></a>
+## [1. ما هو نموذج الألماس المزدوج بالضبط](#top-dd)
+
+نموذج الألماس المزدوج هو إطار عمل تصميم كلاسيكي روجت له **Design Council** البريطانية. يرسم عملية التصميم والابتكار الكاملة في شكل ألماسين متتاليين.
+
+السبب في كونه "ألماسًا" هو أن كل ألماس يحتوي على نوعين من الأفعال المتعاكسة لكنها مهمة بنفس القدر:
+
+- **التوسع**: افتح الأفق أولاً، وانظر إلى المزيد من الاحتمالات
+- **التضييق**: ثم ضيق النطاق، واتخذ القرارات والتضحيات
+
+العملية الكاملة تتكون من أربع خطوات:
+
+1. **Discover**: فهم واسع للمستخدمين والمشاكل والبيئة والسوق
+2. **Define**: استخلاص المشكلة الأساسية التي تستحق الحل حقًا من كمية كبيرة من المعلومات
+3. **Develop**: تطوير حلول متعددة متنوعة حول المشكلة الأساسية
+4. **Deliver**: الفرز، صنع النماذج الأولية، الاختبار، وتسليم الحل الأنسب
+
+إذا ضغطت هذه الخطوات الأربع في جملة واحدة أسهل في التذكر، فهي:
+
+- **الألماس الأول**: أوضح أولاً ما هي المشكلة التي يجب حلها بالضبط
+- **الألماس الثاني**: ثم قرر بأي حل ستحلها
+
+وهذه هي الجملة الدقيقة التي قلتها:
+
+- **الألماس الأول: عمل الشيء الصحيح**
+- **الألماس الثاني: عمل الشيء بشكل صحيح**
+
+## 2. لماذا نموذج الألماس المزدوج مناسب بشكل خاص للمبتدئين
+
+الإيقاع الأكثر شيوعًا بين المبتدئين عند صنع المنتجات غالبًا ما يكون هكذا:
+
+- التفكير في فكرة
+- الشعور بأن هذا الاتجاه رائع
+- البدء فورًا في رسم النموذج الأولي
+- أثناء العمل، اكتشاف أن الوظائف تزداد أكثر فأكثر
+- في النهاية، عدم المعرفة ما هي المشكلة التي يتم حلها بالضبط
+
+قيمة نموذج الألماس المزدوج ليست في جعل العملية معقدة، بل في **إجبارك على فصل "فهم المشكلة" و"تصميم الحل"**.
+
+هذا الأمر يبدو عاديًا، لكنه مهم جدًا في الواقع. لأن العديد من المنتجات الفاشلة لم تفشل لأن التنفيذ لم يكن جادًا، بل لأن:
+
+- تم اختيار المشكلة الخاطئة
+- تم سوء فهم المستخدم
+- تم تثبيت الحل مبكرًا جدًا
+- تم إنفاق الكثير من الوقت في صقل التفاصيل، دون التحقق من الاتجاه
+
+نموذج الألماس المزدوج يذكرك باستمرار:
+
+- لا تفترض أن المشكلة ثابتة لمجرد أن الفكرة مريحة
+- لا تفترض أن الحل يستحق التنفيذ لمجرد أنه يمكن صنعه
+- لا تفترض أن المستخدم سيحتاجه حقًا لمجرد أن النموذج الأولي يبدو كاملًا
+
+<a id="dd-first"></a>
+## [3. الألماس الأول: عمل الشيء الصحيح](#top-dd)
+
+الألماس الأول يركز على **المشكلة نفسها**، وليس الحل.
+
+يمكنك فهمه كجملة واحدة: **لا تستعجل في العمل، أوضح أولاً ما إذا كان يستحق العمل أم لا.**
+
+### 3.1 Discover: افتح مساحة المشكلة أولاً
+
+المهمة الأساسية لمرحلة Discover هي **البحث الواسع، وليس الاستنتاج السريع**.
+
+ما يتم فعله عادةً في هذه الخطوة يشمل:
+
+- مشاهدة كيف يعمل المستخدمون في السيناريوهات الحقيقية
+- مقابلة المستخدمين المحتملين، ومعرفة متى واجهوا المشكلة آخر مرة
+- مراقبة كيف يتدبرون الأمر حاليًا
+- النظر إلى كيفية تعامل المنافسين والبدائل
+- جمع معلومات السوق والعمليات والقيود وسلسلة القيمة
+
+العديد من الأشخاص يخطئون في الاعتقاد بأن Discover هو مجرد "مشاهدة المزيد من المعلومات". لكن الأهم هو: **تحتاج إلى فهم الأشخاص والسيناريوهات، وليس فقط البحث عن كومة من المعلومات.**
+
+مثلاً، إذا كنت تريد صنع أداة "AI يساعد في تنظيم محاضر الاجتماعات"، ففي مرحلة Discover يجب أن تركز أكثر على:
+
+- أين يكون المستخدم في أكثر ألم بعد الاجتماع
+- هل الصعوبة في التدوين، أم في التنظيم، أم في المشاركة
+- هل يكتبون بأنفسهم، أم يجعلون المتدربين يكتبون، أم يستمعون للتسجيل مرة أخرى، أم لا ينظمون أبدًا
+- أي سيناريوهات الاجتماعات تحتاج أكثر لمحاضر، وأيها لا تحتاج أبدًا
+
+الهدف الأهم في هذه الخطوة ليس الوصول إلى إجابة، بل **لا تعتقد أنك تعرف الإجابة مبكرًا جدًا.**
+
+### 3.2 Define: استخلص المشكلة الأساسية من كومة المعلومات
+
+إذا كان Discover هو فتح الأفق، فإن Define هو بدء التضييق.
+
+ما يجب فعله في مرحلة Define ليس الاحتفاظ بكل الملاحظات، بل السؤال:
+
+- أي مشكلة هي الأكثر استحقاقًا للحل أولاً
+- أي مشكلة هي الأكثر تكرارًا والأكثر ألمًا والأكثر قيمة
+- أي سيناريو سنستهدفه فقط في النسخة الأولى
+
+جوهر هذه الخطوة هو تحويل موضوع واسع إلى تعريف مشكلة واضح.
+
+مثلاً، في البداية قد تقول:
+
+> أريد صنع أداة AI لتحسين كفاءة الاجتماعات.
+
+في مرحلة Define، قد يصبح التعبير الأفضل:
+
+> سنحل أولاً مشكلة عدم قدرة فرق المشاريع على إخراج محضر يتضمن المهام والمسؤولين والمواعيد النهائية في غضون 10 دقائق بعد اجتماعات التعاون التي تستمر من 30 إلى 60 دقيقة.
+
+هنا تبدأ المشكلة في الوضوح:
+
+- من هو المستخدم
+- ما هو السيناريو
+- ما هو العائق
+- ما هو معيار النجاح
+
+جوهر Define هو **التضييق من "مشاكل كثيرة" إلى "أي مشكلة سنحلها أولاً هذه المرة".**
+
+## 4. الألماس الثاني: عمل الشيء بشكل صحيح
+
+عندما تكمل الألماس الأول، حينها فقط تكون مناسبًا حقًا للدخول في الألماس الثاني. لأنك في هذه اللحظة لا تحل اتجاهًا غامضًا، بل مشكلة محددة تم تضييقها.
+
+### 4.1 Develop: تطوير حلول متنوعة حول المشكلة الأساسية
+
+تركيز مرحلة Develop هو **استكشاف حلول محتملة متعددة حول نفس المشكلة**.
+
+لاحظ أن التوسع هنا يختلف عن مرحلة Discover.
+
+- توسع Discover هو استكشاف مساحة المشكلة
+- توسع Develop هو استكشاف مساحة الحلول
+
+بالعودة إلى مثال محاضر الاجتماعات، في مرحلة Develop، يمكنك البدء في التفكير:
+
+- هل نصنع أداة ويب أم إضافة للاجتماعات
+- هل نعالج بعد رفع التسجيل أم نسجل في الوقت الفعلي
+- هل نعمل ملخص فقط أم نركز على استخراج المهام
+- هل نؤكد على الكفاءة الشخصية أم على مزامنة الفريق
+- هل نعطي المستخدم حرية التعديل أم نخرج قالبًا منظمًا مباشرة
+
+هذه الخطوة مناسبة جدًا للعصف الذهني، ومناسبة جدًا أيضًا للعمل مع الفريق لفتح الحلول.
+
+لكن هناك شرط مسبق: **جميع الحلول يجب أن تخدم نفس المشكلة المحددة.**
+إذا لم يتم تعريف المشكلة بوضوح، فمن السهل أن يتحول Develop مرة أخرى إلى فوضى في الوظائف.
+
+### 4.2 Deliver: اختيار الحل، صنع النموذج الأولي، الاختبار والتسليم
+
+مرحلة Deliver هي مرحلة التضييق في الألماس الثاني.
+
+ما يجب عليك فعله هنا ليس الاستمرار في التفكير في المزيد، بل بدء الحكم:
+
+- أي حل هو الأنسب للمرحلة الحالية
+- أي نسخة هي الأصغر لكنها الأكثر فائدة
+- أي الوظائف يجب تنفيذها أولاً وأيها يمكن تأجيله
+- كيفية صنع نموذج أولي واختباره والتحقق منه على نطاق صغير
+
+العديد من الأشخاص يعتقدون أن Deliver يعني "الإطلاق". في الواقع معناه الأكثر دقة هو: **تحويل حل إلى شيء قابل للاختبار والتحقق والتكرار.**
+
+قد يكون:
+
+- مخطط تدفق منخفض الدقة
+- نموذج أولي Figma
+- MVP قابل للتشغيل
+- اختبار مستخدمين على نطاق صغير
+- نسخة مكررة بعد تغذية راجعة حقيقية
+
+تركيز Deliver ليس "التسليم المثالي"، بل **وضع الحل في بيئة حقيقية للتحقق في أسرع وقت ممكن.**
+
+## 5. جدول مقارنة سهل التذكر
+
+إذا كنت دائمًا تخلط بين المراحل الأربع، يمكنك حفظ هذا الإصدار مباشرة:
+
+| المرحلة | ماذا تفعل | الكلمات المفتاحية | المخرجات الشائعة |
+| --- | --- | --- | --- |
+| Discover | فهم المشكلة | بحث، مراقبة، مقابلات، جمع معلومات | رؤى المستخدمين، ملاحظات السيناريوهات، قائمة المشاكل |
+| Define | تعريف المشكلة | استخلاص، تركيز، تضحيات، إعادة صياغة المشكلة | تعريف المشكلة، الأولويات، نقطة دخول MVP |
+| Develop | استكشاف الحلول | عصف ذهني، مقارنة، إبداع مشترك، تصور النماذج الأولية | قائمة الحلول، مخططات التدفق، اتجاهات النماذج الأولية |
+| Deliver | التحقق من الحلول | نموذج أولي، اختبار، تكرار، تسليم | نموذج أولي، تغذية راجعة من الاختبار، نسخة محسنة |
+
+وإذا ضغطنا أكثر، فهذا هو الشكل:
+
+- **Discover / Define**: حل "عمل الشيء الصحيح"
+- **Develop / Deliver**: حل "عمل الشيء بشكل صحيح"
+
+## 6. أخطاء نموذج الألماس المزدوج الأكثر شيوعًا
+
+### 6.1 Discover لم يكتمل بعد، وتم الانتقال مباشرة إلى Deliver
+
+هذا هو الأكثر شيوعًا. العديد من الأشخاص بمجرد أن تكون لديهم فكرة يبدأون في رسم النماذج الأولية وكتابة PRD وتوصيل النماذج وصنع الصفحات.
+
+المشكلة ليست أنك لا تعمل بجدية، بل أنك ربما لم تؤكد بعد ما إذا كانت المشكلة تستحق الحل.
+
+### 6.2 Discover لفترة طويلة، لكن Define لا يحدث أبدًا
+
+النوع الآخر من المتطرفين هو البحث المستمر، والاطلاع المستمر على المواد، والمقابلات المستمرة، لكن عدم الجراءة على التضييق.
+
+الألماس المزدوج ليس لجعلك تتوسع إلى ما لا نهاية، بل لتذكيرك: بعد التوسع يجب الدخول في الحكم والتضحيات.
+
+### 6.3 بعد Define، يتم تعديل المشكلة سرًا
+
+العديد من الفرق في مرحلة Develop، بسبب سهولة حل معين، تقوم بتعديل تعريف المشكلة بشكل عكسي ليتوافق مع الحل الموجود.
+
+هذا خطير جدًا. لأنك ربما لا تحل المشكلة، بل تبحث عن مبرر للحل الذي تفضله.
+
+### 6.4 سوء فهم Deliver على أنه "إطلاق شامل"
+
+Deliver لا يعني أنه لا يُعد منتهيًا إلا بعد إكمال المنتج بالكامل. في كثير من الأحيان، نموذج أولي قابل للاختبار، أو جولة تجريب مستخدمين حقيقيين، هي بالفعل deliver جيد.
+
+## 7. في منتجات AI، كيفية استخدام نموذج الألماس المزدوج
+
+منتجات AI عرضة بشكل خاص للوقوع في فخ "القدرات أولاً"، لأن قدرات النموذج تبدو مغرية جدًا. ستشعر برغبة قوية في التفكير مباشرة:
+
+- هل يتم توصيل الوسائط المتعددة
+- هل يتم عمل Agent
+- هل يتم إضافة سير عمل
+- هل يتم توصيل الصوت والصور والبحث عبر الإنترنت
+
+لكن نموذج الألماس المزدوج سيجبرك على السؤال أولاً:
+
+- أين يعلق المستخدم حقًا
+- هل هذه النقطة العائقية تتطلب AI حتمًا
+- إذا لم يتم استخدام AI، فأين أسوأ جزء في الطريقة الحالية
+- بعد إضافة AI، ما هو التقدم الأساسي
+
+هذا يساعدك في تجنب حالة شائعة: **قدرات قوية جدًا، لكن القيمة ضعيفة جدًا.**
+
+ترتيب عملي هو:
+
+1. في مرحلة Discover، راقب كيف يتعامل المستخدمون مع المهام حاليًا
+2. في مرحلة Define، اكتب السيناريو الأكثر ألمًا كتعريف مشكلة واضح
+3. في مرحلة Develop، قارن أي قدرات AI هي الأنسب لخدمة هذه المشكلة
+4. في مرحلة Deliver، اصنع أصغر نسخة ودع المستخدمين الحقيقيين يختبرونها
+
+## 8. قالب ألماس مزدوج يمكن استخدامه مباشرة
+
+إذا كنت تصنع منتجك الخاص، يمكنك البدء بالكتابة وفقًا لهذا الترتيب:
+
+### Discover
+
+- من هم المستخدمون الذين لاحظتهم؟
+- متى واجهوا هذه المشكلة آخر مرة؟
+- كيف يحلونها حاليًا؟
+- أين يكون أكثر ما يزعجهم وأبطأهم وأقل ما يطمئنهم؟
+
+### Define
+
+- من بين هذه المشاكل، أيها الأكثر استحقاقًا للحل أولاً؟
+- أي سيناريو هو الأكثر تكرارًا أو الأكثر أهمية؟
+- من سنخدم في النسخة الأولى فقط، وماذا سنحل فقط؟
+- بعد الحل الناجح، ماذا سيتغير في حالة المستخدم؟
+
+### Develop
+
+- بالنسبة لهذه المشكلة، ما هي الحلول المحتملة؟
+- أي الحلول هي الأخف والأسرع والأسهل للتحقق؟
+- أيها يجب عمله، وأيها يمكن تأجيله؟
+
+### Deliver
+
+- ما هو أصغر شيء يمكننا تسليمه للتحقق من هذا الاتجاه؟
+- هل هو مخطط تدفق، أم نموذج أولي، أم MVP؟
+- من نحتاج لاختباره؟
+- بعد الاختبار، كيف نحكم على ما إذا كنا سنستمر أم نعدل أم نتخلى؟
+
+## 9. مثال يمكن فهمه حتى من المبتدئين تمامًا
+
+لنفترض أنك تريد صنع أداة AI "تساعد طلاب الجامعات في إعداد سيرهم الذاتية للبحث عن عمل".
+
+العديد من الأشخاص في البداية سيدخلون مباشرة في الألماس الثاني، ويبدأون في التفكير:
+
+- هل يتم تجميل تلقائي بنقرة واحدة
+- هل يتم إعادة كتابة ذكية
+- هل يتم مطابقة تلقائية مع وصف الوظيفة
+- هل يتم توليد مقدمة ذاتية
+
+لكن وفقًا لنموذج الألماس المزدوج، العملية الأفضل ستكون:
+
+### الألماس الأول
+
+**Discover**
+
+- تحدث مع الخريجين الجدد عن متى عدلوا سيرتهم الذاتية آخر مرة
+- انظر كيف يحولون سيرتهم القديمة إلى نسخة جديدة
+- افهم ما يزعجهم أكثر: "لا أعرف كيف أكتب" أم "لا أعرف كيف أعدل" أم "لا أعرف كيف أحكم على جودتها"
+
+**Define**
+
+- أخيرًا تضيق إلى مشكلة أكثر تحديدًا:
+- ليس "طلاب الجامعات لا يعرفون كيف يصنعون سيرة ذاتية"
+- بل "الطالب الذي يقدم على تدريب لأول مرة، يجد صعوبة في تحويل خبراته السابقة إلى تعبيرات تتناسب مع الوظيفة، ولذلك يؤخر التقديم"
+
+### الألماس الثاني
+
+**Develop**
+
+- فكر في عدة حلول: مكتبة قوالب، إعادة كتابة AI، مقارنة مع الوظيفة، تقييم السيرة الذاتية، مراجع حالات
+
+**Deliver**
+
+- النسخة الأولى فقط "إعادة كتابة نقاط الخبرة بناءً على وصف الوظيفة"
+- جربها مع 5 طلاب، وانظر ما إذا كانوا سيقدمون النسخة الأولى من سيرتهم الذاتية بشكل أسرع
+
+ستكتشف أنه بمجرد أن يتم تنفيذ الألماس الأول بشكل متين، سيكون الألماس الثاني أوضح بكثير.
+
+## 10. ملخص
+
+أقوى جانب في نموذج الألماس المزدوج هو أنه يساعدك في تقسيم كتلة الفوضى الكاملة إلى أربع حركات أوضح:
+
+- توسع أولاً لفهم المشكلة
+- ثم ضيق لتعريف المشكلة
+- ثم توسع لاستكشاف الحلول
+- وأخيرًا ضيق لتسليم الحل
+
+إنه لا يجعلك أبطأ، بل يجعلك **توفر الكثير من المسارات التي تبدو مشغولة لكنها في الاتجاه الخاطئ.**
+
+خاصة في عصر AI، حيث أصبح صنع الأشياء أسرع فأسرع، يصبح نموذج الألماس المزدوج أكثر أهمية. لأنه عندما يصبح "الصنع" أسهل فأسهل، ستكون القدرة النادرة حقًا هي: **هل تحل مشكلة تستحق الحل، وهل تستخدم الطريقة المناسبة لحلها.**
+
+تذكر هذه الجملة فقط:
+
+**افعل الشيء الصحيح أولاً، ثم افعل الشيء بشكل صحيح.**
+
+<a id="dd-ai"></a>
+## [11. كيفية استخدام AI لمساعدتك في تشغيل عملية الألماس المزدوج](#top-dd)
+
+نموذج الألماس المزدوج نفسه ليس أداة AI، لكن AI مناسب جدًا ليكون "مسرعًا" في المراحل الأربع. المفتاح ليس جعل AI يتخذ القرارات بدلاً منك، بل جعله يساعدك في توسيع الأفق وتنظيم المعلومات ومقارنة الحلول وتوليد مواد التحقق.
+
+### 11.1 في مرحلة Discover، استخدم AI للقيام بجولة تمهيدية للمعلومات
+
+قبل المقابلات والبحث الرسمي، يمكنك جعل AI يساعدك في عمل مسح خفيف للمشاكل، مثلاً:
+
+- ما هي البدائل الشائعة في السوق
+- عما يشكو المستخدمون أكثر في المجتمعات العامة
+- في أي سيناريوهات ومجموعات تظهر هذه المشكلة عادةً
+- ما الذي تتجاهله المنتجات الحالية عادةً
+
+هذه الخطوة لا يمكنها استبدال البحث الحقيقي، لكنها مناسبة جدًا لمساعدتك في بناء خريطة مشاكل بسرعة.
+
+إدخال بسيط للمبتدئين يمكن أن يكون:
+
+```text
+أريد صنع أداة تساعد طلاب الجامعات في تعديل سيرهم الذاتية.
+لا تساعدني في التفكير في الوظائف أولاً، بل ساعدني في رؤية ما هي المشاكل الأكثر شيوعًا التي يواجهها الناس في هذه المسألة.
+```
+
+AI قد يخرج:
+
+```text
+خريطة المشاكل الأولية:
+
+1. لا أعرف ما هي الخبرات التي يجب كتابتها
+2. لا أعرف كيف أعدل لتناسب الوظيفة
+3. عدلت عدة نسخ لكنني لا أزال غير متأكد مما إذا كانت جيدة بما فيه الكفاية
+4. أحتاج شخصًا يراجع لي، لكن من المحرج أن أزعج الآخرين في كل مرة
+5. بسبب عدم اليقين، أؤخر التقديم دائمًا
+```
+
+هدف هذا النوع من المخرجات ليس أن يستنتج بدلاً منك، بل أن يساعدك في الدخول إلى Discover بشكل أسرع.
+
+### 11.2 في مرحلة Define، دع AI يساعدك في تضييق تعريف المشكلة
+
+العديد من الأشخاص بعد جمع كومة من المواد، أصعب شيء هو ضغط المشكلة في جملة واحدة واضحة حقًا. يمكنك تسليم ملاحظات البحث إلى AI وجعله يساعدك في ضغطها في عدة تعريفات مشاكل مرشحة:
+
+```text
+فيما يلي ملاحظات البحث وتغذية المستخدمين التي جمعتها في مرحلة Discover:
+[ألصق المحتوى]
+
+ساعدني في ثلاثة أشياء:
+1. تلخيص أنماط المشاكل الأكثر تكرارًا
+2. ترتيب 3 مشاكل تستحق الحل أولاً حسب تكرار المشكلة وشدة الألم وقابلية التحقق
+3. اكتب كل مشكلة كتعريف مشكلة محدد في جملة واحدة
+```
+
+هذا سيساعدك على الدخول إلى Define بشكل أسهل، بدلاً من البقاء في حالة "المشاكل كثيرة".
+
+يمكنك حتى كتابة الإدخال ببساطة شديدة:
+
+```text
+المشاكل التي جمعتها حاليًا هي:
+1. الجميع لا يعرف ماذا يكتب في السيرة الذاتية
+2. الجميع لا يعرف كيف يعدل
+3. الجميع يشعر دائمًا بأنه لم يعدل بشكل جيد ويخاف من التقديم
+
+ساعدني في رؤية أي مشكلة أنسب للحل أولاً في النسخة الأولى.
+```
+
+AI قد يخرج:
+
+```text
+المشكلة المقترح حلها أولاً:
+
+"الطالب الذي يقدم على تدريب لأول مرة، غير متأكد مما إذا كانت سيرته الذاتية قد وصلت إلى مستوى قابل للتقديم، ولذلك يعدلها مرارًا ويؤخر التقديم."
+
+الأسباب:
+1. هذه المشكلة أكثر تحديدًا
+2. يمكنها تفسير سلوك التأجيل
+3. أسهل في تصميم نسخة صغيرة للتحقق
+```
+
+هذا النوع من المخرجات مفيد جدًا، لأنه يساعدك على التضييق من كومة مشاكل غامضة إلى تعريف أقرب إلى نقطة بداية MVP.
+
+### 11.3 في مرحلة Develop، استخدم AI لتوسيع حلول متعددة
+
+العديد من الأشخاص بمجرد تعريف المشكلة، يركزون فقط على الحل الأول الذي يتبادر إلى الذهن. AI مناسب جدًا في هذه الخطوة لمساعدتك في التوسيع الإجباري:
+
+```text
+لقد عرفت المشكلة الأساسية: [تعريف مشكلتك]
+لا تعطيني إجابة نهائية مباشرة، بل اقترح 2-3 اتجاهات حل من كل من الزوايا التالية:
+1. MVP الأخف
+2. الحل الأنسب للتحقق من الطلب
+3. الحل الأنسب لتحسين التجربة
+4. حل لا يعتمد على AI
+5. حل يعتمد على AI
+أخيرًا قارن مزايا ومخاطر وتكلفة التحقق لكل حل.
+```
+
+بهذه الطريقة لن تكون مقيدًا بحل واحد في مرحلة مبكرة جدًا.
+
+يمكنك كتابة إدخال بسيط:
+
+```text
+تعريف مشكلتي الحالي هو:
+"طالب الجامعة غير متأكد مما إذا كانت سيرته الذاتية يمكن تقديمها، ولذلك يؤخر التقديم دائمًا."
+
+ساعدني في التفكير في 4 حلول مختلفة، لا تعطيني واحدًا فقط.
+```
+
+AI قد يخرج:
+
+```text
+الحل 1: قائمة تحقق لقابلية تقديم السيرة الذاتية
+الحل 2: إعادة كتابة مستهدفة بناءً على وصف الوظيفة
+الحل 3: تقديم تحذيرات المخاطر بعد أن يحمل المستخدم سيرته الذاتية
+الحل 4: تقديم مقارنة مع حالات ممتازة لمساعدة المستخدم في تقييم الفجوة
+```
+
+هذا يجعل من الأسهل الدخول في "مقارنة الحلول" بدلاً من التركيز فقط على اتجاه إعادة كتابة AI منذ البداية.
+
+### 11.4 في مرحلة Deliver، استخدم AI لتوليد نصوص النماذج الأولية ومواد الاختبار
+
+عندما تدخل مرحلة Deliver، AI مناسب جدًا لتسريع هذه الأعمال:
+
+- توليد نصوص الصفحات في النماذج الأولية منخفضة الدقة
+- تنظيم سكريبت اختبار المستخدمين
+- توليد عدة إصدارات قابلة للمقارنة من العناوين والأزرار والتعليمات
+- تنظيم التغذية الراجعة وقائمة المشاكل بعد الاختبار
+
+مثلاً، يمكنك جعل AI يساعدك في توليد سكريبت اختبار مستخدمين لمدة 20 دقيقة، أو مساعدتك في تنظيم تغذية 5 مستخدمين راجعة إلى أساس حكم "استمر / عدل الاتجاه / توقف".
+
+إدخال بسيط يمكن أن يكون:
+
+```text
+صنعت نموذجًا أوليًا بسيطًا جدًا:
+المستخدم يحمل سيرته الذاتية، والنظام يخبره بأي الأماكن لا تزال غير مناسبة للتقديم.
+
+ساعدني في توليد سكريبت اختبار مستخدمين لمدة 15 دقيقة.
+```
+
+AI قد يخرج:
+
+```text
+سكريبت اختبار 15 دقيقة:
+
+1. اطلب من المستخدم أولًا وصف تجربة تقديم السيرة الذاتية الأخيرة
+2. دع المستخدم يكمل تحميل السيرة الذاتية بشكل مستقل
+3. راقب ما إذا كان يفهم نتائج التغذية الراجعة
+4. اسأل: أي من هذه التلميحات كانت الأكثر فائدة، وأيها أربكك
+5. اسأل: قبل التقديم المرة القادمة، هل تريد استخدامه مرة أخرى
+```
+
+هذا النوع من المخرجات عملي جدًا، لأنه يساعدك على الانتقال من "أنهيت النموذج الأولي" إلى "كيف أختبر بعد ذلك".
+
+### 11.5 دع AI يلعب دور "حارس المرحلة"
+
+أكثر المشاكل شيوعًا في نموذج الألماس المزدوج هو أن الأشخاص يتخطون المراحل. يمكنك جعل AI مباشرة يعمل كحارس، يذكرك في أي مرحلة أنت بالضبط:
+
+```text
+العب دور مدرب عملية المنتج.
+فيما يلي حالة مشروعي الحالية: [وصفك]
+احكم على ما إذا كنت أشبه بالوجود في Discover أم Define أم Develop أم Deliver.
+وأخبرني:
+1. هل قفزت مبكرًا جدًا إلى المرحلة التالية
+2. ما هو الإجراء الأكثر أهمية الذي يجب إكماله في المرحلة الحالية
+3. أي الأشياء يجب ألا أفعلها الآن
+```
+
+هذا مفيد جدًا للمبتدئين، لأنك تتسرع بسهولة في "رسم النموذج الأولي قبل أن توضح المشكلة".
+
+## 📚 الواجبات
+
+يرجى إكمال الواجبات التالية بناءً على المحتوى أعلاه:
+
+1. اختر فكرة منتج تريد صنعها مؤخرًا، واكتب مسودتها في أربع خطوات Discover و Define و Develop و Deliver
+2. في مرحلة Define، أجبر نفسك على تقليص المشكلة إلى جملة واحدة محددة
+3. في مرحلة Develop، اذكر 3 حلول مختلفة على الأقل، بدلاً من التركيز فقط على أول فكرة تتبادر إلى الذهن
+4. في مرحلة Deliver، اكتب أصغر نسخة تحقق يمكن تسليمها في غضون أسبوع
+
+## قراءة إضافية
+
+هذه المقالة تشير أساسًا إلى المواد الرسمية من Design Council حول Double Diamond، وهي مناسبة للمتابعة والقراءة:
+
+- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
+- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
+- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
diff --git a/docs/ar-sa/stage-1/appendix-idea-sources/index.md b/docs/ar-sa/stage-1/appendix-idea-sources/index.md
new file mode 100644
index 0000000..0a0c443
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-idea-sources/index.md
@@ -0,0 +1,301 @@
+---
+title: 'من أين تأتي الأفكار: 3 مصادر مرجعية مناسبة جدًا للمبتدئين'
+description: 'مقالة تمهيدية حول مصادر أفكار المنتجات للقراء بدون خبرة سابقة. تركز على تنظيم المواقع المناسبة لتصفح الأفكار ومصادر الاتجاهات والأعمال الحقيقية وقوائم المستثمرين، لمساعدتك في العثور على اتجاهات أكثر تحديدًا بسرعة.'
+---
+
+<script setup>
+const duration = 'حوالي <strong>1.5 ساعة</strong>'
+</script>
+
+# من أين تأتي الأفكار: 3 مصادر مرجعية الأكثر ملاءمة للمبتدئين
+
+<a id="top-idea-sources"></a>
+
+## دليل هذا الفصل
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['البحث عن أفكار', 'اتجاه المنتج', 'اكتشاف الاحتياجات', 'مراقبة الصناعة']"
+  coreOutput="اتجاه منتج أكثر تحديدًا يستحق المتابعة"
+  expectedOutput="معرفة أين تتصفح وكيف تنظر وما الذي تنظر إليه أولاً، بدلاً من البقاء مع أفكار فارغة مثل 'AI + صناعة معينة'"
+>
+
+العديد من الأشخاص يتعثرون في الخطوة الأولى، ليس لأنهم لا يملكون أي إلهام على الإطلاق، بل لأنهم بعد تصفح الكثير من المحتوى، ما يبقى في أذهانهم هم مجرد مصطلحات كبيرة:
+
+- AI for education
+- AI for healthcare
+- AI for finance
+- AI agent for business
+
+هذه ليست أفكارًا بعد. إنها فقط تخبرك بأن "الاتجاه كبير"، لكنها لا تخبرك بـ:
+
+- من يستخدمه
+- في أي سيناريو يُستخدم
+- كيف يتعاملون معه حاليًا
+- أي خطوة تستحق البدء بها أولاً
+
+هذه المقالة لا تتحدث عن منهجيات فارغة، بل تنظم مباشرة مجموعة من المصادر الأكثر فائدة لك.
+
+</ChapterIntroduction>
+
+::: info الحد الأدنى من SOP
+**الهدف**: بعد القراءة، ستتعرف على أين تتصفح عندما لا يكون لديك أفكار، وأي الروابط مناسبة لرؤية "الاحتياجات المحددة"، وأيها مناسب لرؤية "الاتجاهات"، وأيها مناسب لرؤية "الأعمال الحقيقية".
+
+**خطوات العمل**: تصفح قائمة الأفكار أولاً، ثم انظر إلى المنتجات الصغيرة المربحة، ثم اطلع على الاتجاهات والمصادر الأكثر ارتباطًا بالأعمال، وأخيرًا احتفظ باتجاه واحد أنت مستعد لمواصلته.
+
+**النتيجة**: ستحصل على اتجاه أكثر تحديدًا يستحق التحقق، بدلاً من التوقف عند المصطلحات الكبيرة.
+
+**روابط سريعة**: [قائمة التطبيقات المرجعية](#idea-apps) · [مصادر الاتجاهات](#idea-trends) · [مصادر أكثر ارتباطًا بالأعمال](#idea-business) · [مصادر VC / المسرعات](#idea-vc) · [أقصر مسار](#idea-path) · [كيف يساعدك AI](#idea-ai)
+:::
+
+## ما ستتعلمه في هذا الفصل
+
+1. أي المواقع مناسبة لتصفح الأفكار مباشرة
+2. أي المواقع مناسبة لرؤية المنتجات الصغيرة المربحة بالفعل
+3. أي المصادر مناسبة لرؤية الاتجاهات والتغيرات في الصناعة
+4. أي المصادر أقرب إلى الأعمال الحقيقية والمدفوعات الحقيقية
+5. أقصر مسار استخدام مناسب للمبتدئين تمامًا
+
+<a id="idea-apps"></a>
+## [1. قائمة التطبيقات المرجعية: انظر أولاً إلى ما يفعله الآخرون بالفعل](#top-idea-sources)
+
+هذا هو أكثر نقاط البداية ملاءمة للمبتدئين، لأنه الأكثر تحديدًا.
+
+### المستوى الأول: افتح وستجد قائمة أفكار، اختر مباشرة
+
+- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+  الغرض الأساسي من هذا الـ subreddit هو: المستخدمون الحقيقيون ينشرون مباشرة "أتمنى لو صنع أحدهم XX". كل منشور عادةً ما يكون طلب منتج محدد، مع بعض وصف السيناريو. بعد الدخول، رتب حسب `Top -> Past Month` أو `Top -> Past Year`، وفي 20 دقيقة يمكنك استعراض مجموعة من الاحتياجات الحقيقية.
+- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+  مشابه لما سبق، لكنه يميل أكثر إلى البرمجيات / التطبيقات. التنسيق الشائع للمنشورات هو "أحتاج تطبيقًا يمكنه عمل XX"، بتفاصيل أكثر دقة، والعديد منها عبارة عن أفكار صغيرة وجميلة.
+- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+  أكثر اكتمالاً من الاثنين السابقين. العديد من المنشورات ليست مجرد طلب من جملة واحدة، بل تتضمن بعض تحليل السوق ونموذج العمل ولماذا يستحق القيام به الآن.
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+  ينشر أسبوعيًا أفكار ريادة أعمال غير متحقق منها، وتشمل الحقول الشائعة المستخدم المستهدف وطريقة تحقيق الدخل وأفكار التحقق الأولية. التنسيق موحد ومناسب للاستعراض السريع.
+- [IdeasAI](https://ideasai.com/)
+  يستخدم AI لتوليد أفكار ريادة أعمال، ويمكنك الاستمرار في التصفح. الجودة غير مستقرة، لكنه مناسب جدًا لتحفيز الإلهام عندما "لا تشعر بأي شيء"، ثم النزول بنفسك إلى سيناريوهات أكثر تحديدًا.
+
+### المستوى الثاني: انظر إلى المنتجات الصغيرة المربحة التي يصنعها الآخرون بالفعل، واستنتج الأفكار بشكل عكسي
+
+منطق هذا النوع من المنصات هو: الآخرون قد تحققوا بالفعل من الطلب، بل وبدأوا بالفعل في كسب المال. أنت تنظر إليها ليس للنسخ، بل لرؤية "ما هي المشكلة الصغيرة التي يدفع لها الأشخاص بالفعل".
+
+- [Starter Story](https://www.starterstory.com/)
+  يجمع العديد من حالات الأعمال الصغيرة الحقيقية، عادةً مع مقابلات مع المؤسسين وبيانات الدخل وعملية البداية. ركز على المنتجات الصغيرة ذات الدخل الشهري من 10 آلاف إلى 100 ألف دولار، فعادةً ما تكون أكثر تخصصًا وأقرب إلى حجم المنتج الذي يمكن للشخص العادي فهمه.
+- [Indie Hackers — Products](https://www.indiehackers.com/products)
+  المكان الذي يعرض فيه المطورون المستقلون منتجاتهم، والعديد منهم يعلنون عن الدخل والنمو publicly. رتب حسب الدخل، وانظر إلى المنتجات التي تكسب من بضعة آلاف إلى بضعة عشر ألف دولار شهريًا لترى أي مشاكل محددة يحلونها.
+- [MicroConf Blog](https://microconf.com/blog)
+  يميل أكثر نحو Micro SaaS. مناسب لرؤية "منتجات صغيرة بما يكفي، لكن شخص ما مستعد للدفع مقابلها".
+- [1000 Tools](https://1000.tools/)
+  موقع تجميع لأدوات AI. مناسب لرؤية أي الفئات قد صنعها شخص ما بالفعل، لكن بشكل متوسط، أو أي الاتجاهات لم يتم تغطيتها جيدًا بعد في السوق المحلي / في صناعة معينة.
+- [Product Hunt](https://www.producthunt.com/)
+  انظر إلى أنواع المنتجات التي تظهر بشكل متكرر مؤخرًا، لا تركز فقط على المنتج الأول، بل ركز على أي الفئات يستمر الأشخاص في صنعها ولكن لا يوجد فائز واضح بعد.
+- [BetaList](https://betalist.com/)
+  مناسب لرؤية المنتجات المبكرة والفرق التي لا تزال تجرب الاتجاهات.
+
+### عند النظر إلى المنتجات، لا تنظر فقط إلى المنتج نفسه، بل انظر أيضًا إلى التقييمات السلبية و"خدمات الوكالة"
+
+- [G2](https://www.g2.com/)
+  طريقة الاستخدام: انظر إلى التقييمات من نجمة واحدة ونجمتين. في التقييمات السلبية عادةً ما تكون مخفية "أين لم ينجح المنتج الحالي".
+- [Capterra](https://www.capterra.com/)
+  طريقة الاستخدام: مشابهة لـ G2، مناسبة لرؤية الشكاوى الحقيقية حول منتجات SaaS.
+- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhubajie
+  طريقة الاستخدام: ابحث عن "وكالة" و"تنظيم بالنيابة" و"إدخال بيانات بالنيابة" و"تفريغ بالنيابة". إذا كانت خدمة يدوية معينة تُباع جيدًا، فعادةً ما يكون هناك عملية قابلة للتكرار وقابلة لتحويلها إلى منتج.
+
+الحكم على الإشارات بسيط:
+
+- المستخدمون يشكون بالفعل من الأدوات الحالية
+- المستخدمون يدفعون بالفعل لشخص آخر للقيام بالأمر بالنيابة عنهم
+- المستخدمون يستثمرون بالفعل الكثير من الجهد والوقت في هذه العملية
+
+### المستوى الرابع: شاهد الفيديوهات، فهناك من يساعدك مباشرة في تحليل الأفكار
+
+إذا كنت لا تحب تصفح المنتديات والقوائم، وتميل أكثر إلى "شخص يساعدني في تحليل الأفكار"، فإن الفيديوهات والبودكاست مناسبة جدًا أيضًا.
+
+- ابحث عن `Greg Isenberg startup ideas`
+  مناسب لرؤية شخص يحلل مباشرة 2 إلى 3 أفكار محددة، مع الحديث عن حجم السوق وتحليل المنافسة ونقطة الدخول.
+- ابحث عن `My First Million podcast`
+  المقدمان غالبًا ما يقومان بعصف ذهني لأفكار تجارية طوال الحلقة، بكثافة عالية، وغالبًا ما تظهر أفكار متخصصة محددة جدًا.
+- ابحث عن `YC startup ideas` أو `Michael Seibel startup ideas`
+  مناسب للمبتدئين، المحتوى مباشر، والعديد يتحدثون مباشرة عن كيفية اختيار الاتجاه.
+
+<a id="idea-trends"></a>
+## [2. مصادر الاتجاهات: انظر إلى الاتجاهات التي ترتفع](#top-idea-sources)
+
+دور مواقع الاتجاهات ليس إعطاءك أفكارًا مباشرة، بل مساعدتك في الحكم: هل الاتجاه معين يرتفع، وهل يستحق المتابعة.
+
+- [Exploding Topics](https://explodingtopics.com/)
+  يتتبع بالبيانات المواضيع وفئات المنتجات التي تنمو بسرعة لكنها لم تدخل بعد الوعي العام. مناسب لرؤية الاتجاهات "التي ترتفع لكنها ليست مزدحمة جدًا بعد".
+- [Google Trends](https://trends.google.com/)
+  ابحث عن كلمات مفتاحية، وانظر إلى خط الاتجاه خلال العام الماضي، ثم انظر إلى "الاستعلامات ذات الصلة" في قسم "الارتفاع".
+- [Glimpse](https://meetglimpse.com/)
+  مشابه لـ Google Trends.
+- صفحات ملخص تقارير الصناعة
+  مناسب عندما يكون لديك اتجاه بالفعل وتريد رؤية موقع هذا الاتجاه في الصناعة بسرعة.
+- محتوى الاتجاهات من McKinsey / BCG / Gartner
+  يميل أكثر نحو منظور المؤسسات والصناعات الكبيرة، مناسب للجانب B، الصناعات التقليدية.
+- [State of AI Report](https://www.stateof.ai/)
+  إذا كان اتجاهك مرتبطًا بتقنية AI نفسها، فإن هذا النوع من التقارير السنوية مناسب جدًا لبناء صورة شاملة.
+
+عند النظر إلى الاتجاهات، ركز فقط على ثلاثة أشياء:
+
+- هل هذه الكلمة ترتفع باستمرار
+- في أي سيناريو محدد تقع
+- من سيكون أول من يدفع وقتًا أو تكلفة تحويل أو ميزانية لها
+
+<a id="idea-business"></a>
+## [3. مصادر أكثر ارتباطًا بالأعمال: انظر إلى من ينفق المال ومن يشكو ومن يبيع خدمات يدوية](#top-idea-sources)
+
+إذا كنت تبحث عن اتجاه "أقرب إلى الأعمال الحقيقية" وليس فقط "يبدو رائعًا"، فعليك النظر في مصادر أقرب إلى سير العمل.
+
+### انظر إلى من ينفق المال حقيقية على ماذا
+
+- [موقع المشتريات الحكومية الصيني](https://www.ccgp.gov.cn/)
+  طريقة الاستخدام: ابحث عن كلمات مثل "موقع ذكي" و"نظام إدارة مختبرات" و"جمع بيانات" و"إدارة عيادة" و"نظام تسعير"، وانظر إلى الميزانيات والمتطلبات التقنية وسيناريوهات الاستخدام.
+- مراكز الموارد العامة للمقاطعات والمدن
+  طريقة الاستخدام: انظر إلى ما تشتريه الحكومات المحلية والشركات المملوكة للدولة بالفعل من أنظمة.
+- منصات المناقصات المختلفة
+  طريقة الاستخدام: انظر إلى احتياجات الشراء من جانب الشركات وأنواع الأنظمة المتكررة.
+
+الإشارة القوية من هذه المصادر هي: لا يتعلق الأمر بالحديث عن المستقبل، بل يكشف عن "شخص ما مستعد بالفعل لدفع المال مقابل هذا الأمر اليوم".
+
+### انظر إلى من يشكو حقيقية من ماذا
+
+- الصناعة التحويلية: مجتمعات الآلات، منتديات التحكم الصناعي
+- الطب: Dingxiangyuan، Yimaitong
+- البناء / الهندسة: Tumugangxian، Glodon Community
+- المالية / المحاسبة: منتدى China Accounting Vision
+- التجارة الخارجية: Fubu Foreign Trade Forum، Mike Circle
+- المطاعم / التجزئة:zhiye canyin wang، Lianshangwang Forum
+- الأقسام الرأسية على [Reddit](https://www.reddit.com/): `r/smallbusiness`، `r/Entrepreneur`، `r/SaaS`، `r/healthcare`، `r/manufacturing`
+- [V2EX](https://www.v2ex.com/)
+- Jike
+- Xiaohongshu
+
+عند البحث، لا تبحث فقط عن "AI" و"innovation"، بل الأكثر فعالية هو البحث عن:
+
+- مزعج جدًا
+- هل هناك طريقة أفضل
+- أطلب توصية بأداة
+- Excel لم يعد يكفي
+- I wish there was
+- is there a tool for
+- I hate
+
+### انظر إلى من يبيع خدمات يدوية متكررة
+
+- [Fiverr](https://www.fiverr.com/)
+- [Upwork](https://www.upwork.com/)
+- Zhubajie
+- Taobao
+- Xianyu
+
+إذا رأيت هذه الخدمات تُباع جيدًا، فمن الجدير بالمتابعة:
+
+- نساعدك في تحويل عروض أسعار PDF إلى Excel
+- نساعدك في تنظيم بيانات العملاء بشكل جماعي
+- نساعدك في تعديل السيرة الذاتية / تعديل النصوص / التفريغ / الأرشفة
+
+وراء هذا النوع من الخدمات عادةً ليس احتياجًا لمرة واحدة، بل سير عمل يتكرر.
+
+### انظر إلى سير العمل الكامل، وليس فقط إلى قائمة الأفكار
+
+أحيانًا الطريقة الأكثر مباشرة هي اختيار صناعة، ومراجعة العملية بالكامل، والعثور على الخطوات التي لا تزال تعتمد على WeChat و Excel والورق والقلم والهاتف.
+
+- التجارة الخارجية: البحث عن موردين، الاستفسار عن الأسعار، مقارنة الأسعار، إعداد عروض الأسعار، الإرسال للعملاء، متابعة الردود، ترتيب التفتيش، حجز الشحن، التخليص الجمركي.
+  نقطة الدخول الجديرة بالمشاهدة: تنظيم عروض أسعار الموردين في عروض أسعار للعملاء.
+- عيادة الأسنان: الاستقبال، التصوير، قراءة الأشعة، التواصل حول الخطة، المتابعة، العلاج، إعادة الكشف.
+  نقطة الدخول الجديرة بالمشاهدة: شرح الخطة للمريض والمتابعة المستمرة.
+- مواقع البناء: التفتيش، التصوير، الإرسال إلى المجموعة، تنظيم التقرير، التسليم للعميل.
+  نقطة الدخول الجديرة بالمشاهدة: من صور الموقع إلى التقرير المتوافق.
+
+<a id="idea-vc"></a>
+## [4. مصادر VC / المسرعات: انظر إلى "أين تتجه الأمواج"](#top-idea-sources)
+
+هذا النوع من المصادر مناسب لمساعدتك في العثور على الاتجاهات الكبيرة، وليس مناسبًا لاستبدال التحقق مباشرة.
+
+- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
+  طريقة الاستخدام: مناسب للعثور على نقاط الدخول، لأنه غالبًا ما يقول مباشرة "نريد أن نرى شخصًا يصنع هذا".
+- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
+  طريقة الاستخدام: يميل أكثر نحو الاتجاهات الكبيرة وحكم القطاعات، مناسب لبناء إحساس بالصناعة.
+- [NFX](https://www.nfx.com/)
+  طريقة الاستخدام: مناسب للاستعراض السريع لمجموعة من مواضيع ريادة الأعمال.
+- [Sequoia Capital](https://www.sequoiacap.com/article/)
+  طريقة الاستخدام: لا يسرد الأفكار بالضرورة مباشرة، لكنه غالبًا ما يتحدث عن نوع معين من تحولات المنصة والفرص.
+- [First Round Review](https://review.firstround.com/)
+  طريقة الاستخدام: مناسب للحفر العميق في اتجاه معين، ليس بالضرورة قائمة أفكار، لكن جودة المقالات عادةً عالية جدًا.
+
+مزايا هذا النوع من المصادر:
+
+- يمكن أن تخبرك بالاتجاهات المستقبلية التي تستحق المشاهدة
+- يمكن أن تخبرك أي القطاعات قد تستمر في الدفع
+- يمكن أن تدخلك بسرعة في سياق قطاع معين
+
+قيود هذا النوع من المصادر:
+
+- عادةً من منظور المستثمر
+- لا تخبرك بالضرورة بأي دور هو الأكثر ألمًا
+- لا تخبرك بالضرورة بأي خطوة من العملية هي الأكثر إعاقة
+- لا تخبرك بالضرورة من يدفع المال بالفعل مقابل هذا اليوم
+
+لذا الطريقة الأفضل للاستخدام هي: استخدمها أولاً للعثور على الاتجاه، ثم عد إلى المنتجات المرجعية ومنتديات الصناعة ومعلومات المشتريات وسير العمل الحقيقية للعثور على نقاط دخول أكثر تحديدًا.
+
+<a id="idea-path"></a>
+## [5. أقصر مسار استخدام مناسب لـ "من ليس لديه أفكار ويعرف فقط أنه يريد أن يصنع مساعدًا"](#top-idea-sources)
+
+إذا كنت تسلك مسارًا واحدًا فقط هو الأقصر، يمكنك القيام بذلك على النحو التالي:
+
+1. الخطوة الأولى، 30 دقيقة.
+   افتح [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)، رتب حسب `Top -> Past Year`، واستعرض بسرعة 50 منشورًا، واحفظ جميع الاتجاهات التي تشعر أنها "يبدو أنني أستطيع صنعها".
+2. الخطوة الثانية، 30 دقيقة.
+   افتح [Starter Story](https://www.starterstory.com/) أو [Indie Hackers Products](https://www.indiehackers.com/products)، رتب حسب الدخل، وانظر إلى المنتجات متوسطة الدخل، لا تنظر فقط إلى الأكثر نجاحًا. اعثر على الاتجاهات المرتبطة بالخطوة الأولى، وانظر لمن يبيعون تحديدًا وأي خطوة يحلونها.
+3. الخطوة الثالثة، 20 دقيقة.
+   اذهب إلى [Google Trends](https://trends.google.com/) وابحث عن الكلمات المفتاحية ذات الصلة، وانظر إلى ما إذا كان الاتجاه ينمو، ثم انظر إلى كلمات "الارتفاع" في "الاستعلامات ذات الصلة".
+4. الخطوة الرابعة، 20 دقيقة.
+   اذهب إلى G2 / Capterra / منتديات الصناعة / منصات المناقصات / Fiverr والأماكن المشابهة، وانظر إلى أين تكون المشكلة الأكثر إزعاجًا اليوم في هذا الاتجاه، وأين لا يزال الاعتماد على العمل اليدوي.
+
+بعد الانتهاء، يكفي أن تتمكن من قول الجملة التالية بوضوح:
+
+- نوع معين من الأشخاص، في سيناريو معين، عالقين في خطوة معينة من العملية، يعتمدون حاليًا بشكل أساسي على طريقة معينة غير فعالة.
+
+<a id="idea-ai"></a>
+## [6. كيف يساعدك AI](#top-idea-sources)
+
+تركيز هذه المقالة ليس على AI، لكن AI مناسب جدًا للتنظيم.
+
+الاستخدامات الأكثر عملية هي اثنتان فقط:
+
+- أرسل الروابط وعناوين المنشورات وكلمات المستخدمين الأصلية التي تصفحتها إلى AI، ودعه يساعدك في تصنيفها إلى "مجموعة مستخدمين / سيناريو / نقطة ألم / بديل".
+- دع AI يساعدك في جمع المعلومات المبعثرة إلى 3 اتجاهات مرشحة، بدلاً من الاستمرار في التوسع في 50 وظيفة.
+
+يمكنك السؤال مباشرة هكذا:
+
+```text
+لقد تصفحت هذه المصادر مؤخرًا:
+1. [ألصق العنوان أو الكلمات الأصلية]
+2. [ألصق العنوان أو الكلمات الأصلية]
+3. [ألصق العنوان أو الكلمات الأصلية]
+
+لا تعطني قائمة وظائف.
+قم بثلاثة أشياء فقط:
+1. صنّف حسب المجموعة المستهدفة والسيناريو
+2. ابحث عن خطوات المشاكل المتكررة
+3. ساعدني في تنظيمها في 3 اتجاهات مرشحة أكثر تحديدًا
+```
+
+## قراءة إضافية
+
+- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
+- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
+- [NFX](https://www.nfx.com/)
+- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+- [Starter Story](https://www.starterstory.com/)
+- [Indie Hackers - Products](https://www.indiehackers.com/products)
+- [Product Hunt](https://www.producthunt.com/)
+- [BetaList](https://betalist.com/)
+- [IdeasAI](https://ideasai.com/)
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+- [Google Trends](https://trends.google.com/)
+- [Exploding Topics](https://explodingtopics.com/)
+- [G2](https://www.g2.com/)
+- [Capterra](https://www.capterra.com/)
diff --git a/docs/ar-sa/stage-1/appendix-industry-scenarios/index.md b/docs/ar-sa/stage-1/appendix-industry-scenarios/index.md
new file mode 100644
index 0000000..c7207a0
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-industry-scenarios/index.md
@@ -0,0 +1,764 @@
+---
+title: 'مرجع لسيناريوهات التطبيق الصناعي لقطاع الأعمال (B2B)'
+description: 'يلخص هذا المستند تطبيقات النماذج اللغوية الكبيرة (LLM) في سيناريوهات قطاع الأعمال، بما في ذلك التصنيع الصناعي، خدمة العملاء الذكية، قطاع التعليم، البرمجة الذكية، المجال الطبي، الأمن السيبراني، الإدارة المالية، وخدمات المؤسسات، لتوفير مرجع لمطوري تطبيقات الذكاء الاصطناعي الموجهة لعملاء المؤسسات.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'حوالي <strong>6 ساعات</strong>'
+
+const interestPoint = ref('')
+const purpose = ref('')
+
+// مجموعة المواضيع لكل صناعة
+const topicPool = {
+  'manufacturing': [
+    { title: 'منصة تصميم مظهر حافلات الطاقة الجديدة بمساعدة الذكاء الاصطناعي', desc: 'تصميم مفاهيم المظهر بناءً على نماذج توليد الصور' },
+    { title: 'مساعد التصميم والمراجعة الذكي للمخططات', desc: 'بناء قاعدة معرفة لمعايير تصميم المؤسسة باستخدام تقنية RAG' },
+    { title: 'التوليد والإدارة التلقائية للوثائق الفنية', desc: 'التوليد التلقائي لمواصفات المنتج وأدلة التشغيل بناءً على LLM' },
+    { title: 'مساعد التوليد التلقائي لتقارير فحص معدات الإنتاج', desc: 'وصف حالة المعدات صوتيًا، وتوليد تقرير فحص منظم' },
+    { title: 'مساعد أسئلة وأجوبة معرفي لتشخيص أعطال المعدات الصناعية', desc: 'بناء قاعدة معرفة متجهة بناءً على حالات الأعطال التاريخية' }
+  ],
+  'customer-service': [
+    { title: 'نظام الرد التلقائي للخدمة الذكية متعدد القنوات وتوليد أوامر العمل', desc: 'التكامل مع رسائل قنوات متعددة، وفهم النية عبر LLM ثم توليد الردود' },
+    { title: 'مساعد اكتشاف العملاء المحتملين واقتراحات المتابعة', desc: 'تحليل سجلات المحادثات التاريخية لتحديد العملاء ذوي النية العالية' },
+    { title: 'البحث الذكي عن المعرفة الداخلية للمؤسسة ومساعد الأسئلة والأجوبة', desc: 'بناء قاعدة معرفة متجهة بناءً على الوثائق الداخلية' },
+    { title: 'أداة التلخيص الذكي لمحادثات خدمة العملاء وتوليد أوامر العمل', desc: 'التوليد التلقائي لملخصات المحادثات واستخراج المعلومات الرئيسية' },
+    { title: 'نظام قاعدة معرفة توصية أفضل النصوص لخدمة العملاء', desc: 'تحليل الحالات المتميزة واستخلاص قوالب أفضل النصوص' }
+  ],
+  'education': [
+    { title: 'نظام تخطيط مسار تعلم اللغات المخصص والتوجيه الذكي', desc: 'تقييم مستوى المتعلم وتخطيط المهام اليومية' },
+    { title: 'منصة الكتابة الآلية للخطط الدراسية وعرض الموارد التعليمية', desc: 'توليد إطار الخطة الدراسية بناءً على المنهج الدراسي' },
+    { title: 'نظام التصحيح الآلي للواجبات وتحليل تشخيص حالة التعلم', desc: 'التصحيح التلقائي للأسئلة الذاتية وتوليد اقتراحات التصحيح' },
+    { title: 'بناء نموذج كفاءة المواهب للوظائف وخريطة التعلم', desc: 'تحليل وصف الوظيفة (JD) لاستخلاص متطلبات القدرات' },
+    { title: 'تدريب عملي محاكاة لمحادثة اللغة الأجنبية الفردية', desc: 'يقوم LLM بلعب أدوار مختلفة لإجراء محادثات لفظية' }
+  ],
+  'programming': [
+    { title: 'مساعد الإكمال التلقائي للكود وإصلاح الأخطاء (Bugs) الذكي', desc: 'مكون IDE الإضافي يوفر اقتراحات إكمال الكود في الوقت الفعلي' },
+    { title: 'منصة بناء التطبيقات منخفضة الكود (Low-code) وأتمتة العمليات', desc: 'وصف المتطلبات بلغة طبيعية وتحويلها إلى تكوينات منخفضة الكود' },
+    { title: 'نظام توليد حالات اختبار الوحدة', desc: 'تحليل الشفرة المصدرية عبر AST وتوليد حالات اختبار للشروط الحدية' },
+    { title: 'أداة التحليل الذكي للكود والترحيل بين لغات البرمجة', desc: 'تحليل جودة الكود وتقديم اقتراحات التحسين' },
+    { title: 'أداة التوليد التلقائي لكود واجهة المستخدم الأمامية (UI)', desc: 'التعرف على صور التصميم وتوليد CSS متجاوب' }
+  ],
+  'healthcare': [
+    { title: 'مساعد التفسير الذكي لتقارير الفحوصات الطبية', desc: 'التعرف على المؤشرات الرئيسية عبر OCR وتفسير القيم غير الطبيعية' },
+    { title: 'خبير استشارات صحية يعتمد على تقنية استرجاع المعرفة', desc: 'بناء رسم بياني للمعرفة الطبية، واسترجاع وتوليد الإجابات عبر RAG' },
+    { title: 'منصة تحليل قرارات بيانات الأبحاث السريرية', desc: 'دمج بيانات EMR والمساعدة في توليد شفرات التحليل الإحصائي' },
+    { title: 'أداة التوليد التلقائي لتقارير التصوير الطبي', desc: 'وصف خصائص الصورة والتوليد التلقائي لتقرير منظم' },
+    { title: 'مساعد ذكي لتذكير إدارة الأدوية للأمراض المزمنة', desc: 'توليد تذكيرات أدوية مخصصة ودعم فحص موانع استعمال الأدوية' }
+  ],
+  'security': [
+    { title: 'محرك اكتشاف وإصلاح الثغرات الأمنية في الكود', desc: 'فحص الكود عبر SAST وتحليل مبادئ الثغرات' },
+    { title: 'نظام التعرف والاعتراض الذكي لرسائل التصيد الاحتيالي المولدة عبر الذكاء الاصطناعي', desc: 'تحليل محتوى البريد الإلكتروني للتعرف على رسائل التصيد المولدة عبر AI' },
+    { title: 'مساعد التوليد التلقائي للتقارير اليومية للعمليات الأمنية', desc: 'تجميع السجلات والاستخراج التلقائي للأحداث الرئيسية' },
+    { title: 'مساعد التوليد الذكي لتقارير اختبار الاختراق', desc: 'التوليد التلقائي للتقارير بناءً على وصف الثغرات' },
+    { title: 'مساعد الاستعلام والتحليل الذكي لمعلومات التهديدات', desc: 'التكامل مع مصادر متعددة لمعلومات التهديدات وتفسير محتواها' }
+  ],
+  'finance': [
+    { title: 'مساعد التوليد الذكي لتقارير العناية الواجبة للائتمان', desc: 'إدخال البيانات المالية والتوليد التلقائي لتقارير العناية الواجبة للائتمان' },
+    { title: 'مستشار ذكي لإدارة الثروات في البنوك الخاصة', desc: 'تحليل ملف تعريف مخاطر العميل وتوليد توصيات تخصيص الأصول' },
+    { title: 'مساعد التوليد الذكي والتحقق من الامتثال لنشرات الاكتتاب العام (IPO)', desc: 'قوالب معيارية والتعبئة التلقائية لوصف الأعمال' },
+    { title: 'نظام التوليد التلقائي للتقارير المالية للمؤسسات والإنذار المبكر للشذوذ التشغيلي', desc: 'التوليد التلقائي للتحليل المالي ومناقشة الإدارة' },
+    { title: 'تدريب على النصوص الذكي لوكلاء التأمين', desc: 'محاكاة المحادثات وتقييم امتثال النصوص وقوة الإقناع' }
+  ],
+  'enterprise': [
+    { title: 'منصة مراجعة الامتثال واقتراحات التعديل لدورة حياة عقود المؤسسات بالكامل', desc: 'مقارنة البنود مع قاعدة القوانين وتوليد تقرير مراجعة الامتثال' },
+    { title: 'تفريغ صوتي لمحادثات المبيعات وتوصية بالنصوص', desc: 'تفريغ عبر ASR وتحليل المحادثة وتوصية بأفضل النصوص' },
+    { title: 'نظام التوليد الذكي والتصميم للمحتوى التسويقي', desc: 'توليد النصوص التسويقية واستخلاص نقاط البيع' },
+    { title: 'منصة تحليل إعلانات المنافسين', desc: 'جمع إعلانات المنافسين وتحليل استراتيجيات الإعلان' },
+    { title: 'نظام التحليل الذكي لاختيار المواضيع الرائجة على الإنترنت وتوصية المحتوى', desc: 'تحليل اتجاهات المواضيع الرائجة والتوصية بزوايا المواضيع' }
+  ],
+  'content': [
+    { title: 'منصة مساعدة إنشاء محتوى الأفلام والروايات', desc: 'توفير مخططات القصة، وتصميم الشخصيات، وتوليد الحوار' },
+    { title: 'مساعد الكتابة الذكية لقصص العلامة التجارية للمؤسسات والمقالات الدعائية', desc: 'إدخال كلمات مفتاحية للعلامة التجارية وتوليد نصوص بأساليب متعددة' },
+    { title: 'نظام إدارة تفاعل البث المباشر للشخصيات الرقمية الافتراضية والدفع', desc: 'صورة الشخصية الرقمية + صوت TTS + محادثة LLM' },
+    { title: 'توليد نصوص الفيديو القصير والمونتاج الذكي', desc: 'توليد نصوص الفيديو القصير واللوحات القصصية' },
+    { title: 'نظام التوليد الذكي والتصميم للمحتوى التسويقي', desc: 'توليد النصوص التسويقية واستخلاص نقاط البيع' }
+  ],
+  'government': [
+    { title: 'نظام التوجيه الصوتي الذكي والتوزيع التلقائي للخط الساخن الحكومي 12345', desc: 'التعرف على الصوت، وفهم الطلبات والتوزيع الذكي' },
+    { title: 'روبوت التوجيه الذكي والأسئلة والأجوبة حول السياسات لقاعات الخدمات الحكومية', desc: 'استرجاع RAG لقاعدة المعرفة الحكومية' },
+    { title: 'منصة المطابقة الذكية والدفع الدقيق للسياسات الداعمة للمؤسسات', desc: 'ملف تعريف المؤسسة يطابق تلقائيًا السياسات المعمول بها' },
+    { title: 'مساعد المراجعة المسبقة الذكية والتحقق من الامتثال لمواد الموافقات الإدارية', desc: 'التعرف عبر OCR واستخراج المعلومات الرئيسية' },
+    { title: 'منصة ذكية لإدارة وتحديد أحداث الشبكة الحضرية', desc: 'تحديد أنواع الأحداث وتوزيعها' }
+  ],
+  'legal': [
+    { title: 'وكيل للكشف بنقرة واحدة عن ثغرات ومخاطر العقود', desc: 'مطابقة قائمة المخاطر لتحديد المشاكل المحتملة' },
+    { title: 'مستشار تقييم ذكي بنسبة فوز القضايا المماثلة باستخدام AI', desc: 'استخراج سمات القضية، مطابقة واسترجاع القضايا المماثلة' },
+    { title: 'رادار للرصد الآني لتغييرات القوانين واللوائح وتحليل تأثيرها على الأعمال', desc: 'تحليل محتوى التغييرات وتقييم تأثيرها على الأعمال' },
+    { title: 'أداة صياغة تلقائية لخطابات المحامين باستخدام AIGC', desc: 'إدخال وقائع الحقائق، توليد خطابات محاماة معيارية' },
+    { title: 'إضافة لـ "ترجمة" البنود القانونية المعقدة إلى لغة مبسطة', desc: 'توليد تفسيرات سهلة الفهم' }
+  ],
+  'travel': [
+    { title: 'مولّد خطط سفر للمسافر الكسول باستخدام AIGC', desc: 'توليد جدول الرحلة اليومية' },
+    { title: 'روبوت للتنبؤ باتجاه أسعار تذاكر الطيران والفنادق عبر الإنترنت وقفل الأسعار المنخفضة تلقائيًا', desc: 'نماذج ML للتنبؤ باتجاهات الأسعار' },
+    { title: 'نظام فحص مسبق ذكي لمستندات التأشيرة ومساعد آلي لتعبئة النماذج', desc: 'التحقق من اكتمال المعلومات عبر التعرف البصري على الحروف OCR' },
+    { title: 'مترجم صوتي آني للسفر الخارجي ومدير تعريب القوائم بصريًا', desc: 'ترجمة صوتية بدون اتصال، OCR لصور القوائم' },
+    { title: 'مساعد لتوليد يوميات سفر جميلة ونصوص لمنصات التواصل الاجتماعي تلقائيًا من مسارات الرحلة', desc: 'استخراج معلومات الصور، توليد نصوص اليوميات' }
+  ],
+  'emotion': [
+    { title: 'رفيق افتراضي لمرافقة عميقة على مدار 24 ساعة باستخدام النماذج اللغوية الكبيرة LLM', desc: 'نظام ذاكرة لتخزين سجل المحادثات' },
+    { title: 'مستشار AI للتعرف على المشاعر متعددة الوسائط والتوجيه النفسي', desc: 'تحليل نبرة الصوت + التعرف على مشاعر النص' },
+    { title: 'إنسان رقمي للتدريب الإدراكي واسترجاع الذاكرة لكبار السن المصابين بمرض آلزهايمر باستخدام AI', desc: 'تدريب عبر ألعاب إدراكية، تحفيز الذاكرة بالصور القديمة' },
+    { title: 'مدرب محاكاة تواصل اجتماعي باستخدام AIGC للأشخاص ذوي القلق الاجتماعي', desc: 'محاكاة مشاهد تواصل اجتماعي افتراضية' },
+    { title: 'مساعد مراقبة مزاج على مدار الساعة وتحفيز المشاعر الإيجابية باستخدام AI', desc: 'تحليل اتجاهات المزاج وتوليد محتوى تحفيزي' }
+  ],
+  'entertainment': [
+    { title: 'محرك قرارات مستقلة لـ NPC في ألعاب العالم المفتوح مدعوم بـ LLM', desc: 'دمج شجرة سلوك NPC مع قرارات LLM' },
+    { title: 'أداة استنتاج قصص ألعاب أدوار الغمر باستخدام AIGC ومساعد التحكم في سير اللعبة لـ DM', desc: 'اختيارات اللاعب تؤدي إلى تفرعات في القصة' },
+    { title: 'معدّل توليدي لنهايات الروايات التفاعلية', desc: 'اختيارات القارئ تؤثر على مسار القصة' },
+    { title: 'تحليل بصري CV لمعارك الرياضات الإلكترونية ومعلق ذكي AI', desc: 'تحليل الآني للشاشة أثناء اللعب' },
+    { title: 'نظام توليد تلقائي للكتب الصوتية عبر تركيب الكلام TTS متعدد الأدوار', desc: 'توزيع أدوار النص، توليد نبرات صوت مخصصة' }
+  ],
+  'ecommerce': [
+    { title: 'أداة إنتاج دفعة واحدة لصفحات تفاصيل المنتجات بمعدل تحويل عالٍ باستخدام AIGC', desc: 'توليد نصوص نقاط البيع وأوصاف المشاهد' },
+    { title: 'مصنع لتوليد فيديوهات العرض والتجربة الافتراضية للملابس على موديلات باستخدام AI', desc: 'توليد تأثيرات ارتداء الموديلات الافتراضية' },
+    { title: 'مساعد ترجمة وتلميع محلي بلغات متعددة للتجارة الإلكترونية عبر الحدود باستخدام LLM', desc: 'ترجمة وصف المنتج بلغات متعددة' },
+    { title: 'نظام بث مباشر لبيع المنتجات عبر إنسان رقمي باستخدام AIGC على مدار 24 ساعة', desc: 'صورة إنسان رقمي + توليد الآني للنصوص الترويجية' },
+    { title: 'محرك رؤى لاتجاهات السوق المستوحاة من AI والتنبؤ بالمنتجات الأكثر مبيعاً', desc: 'رؤى نقاط الاتجاه، اقتراحات اختيار المنتجات' }
+  ],
+  'energy': [
+    { title: 'مستشار تحليل سلوك استهلاك الكهرباء المنزلية باستخدام AI واستراتيجيات توفير الطاقة', desc: 'تحليل أنماط استهلاك الكهرباء، توليد اقتراحات توفير الطاقة' },
+    { title: 'نظام التعرف البصري CV للطائرات بدون طيار للكشف عن عيوب الوحدات الكهروضوئية', desc: 'تصوير تفتيش الطائرات بدون طيار، تحليل الصور بالأشعة تحت الحمراء الحرارية' },
+    { title: 'وكيل استراتيجية التنبؤ باتجاه أسعار تداول الكهرباء الفوري وتحقيق الربح الآلي باستخدام AI', desc: 'نموذج التنبؤ بالأسعار، توليد الاستراتيجيات' },
+    { title: 'مساعد الحساب الآلي لانبعاثات الكربون على طول سلسلة القيمة للمؤسسات وتوليد تقارير ESG', desc: 'حساب معامل انبعاثات الكربون، توليد تقارير ESG' },
+    { title: 'نظام التنبؤ بحمل الكهرباء في الطقس القاسي والقيادة بجدولة الطوارئ باستخدام AI', desc: 'نموذج التنبؤ بالحمل، توليد استراتيجيات الجدولة' }
+  ],
+  'av-media': [
+    { title: 'أداة التعرف على المقاطع المثيرة في الفيديوهات الطويلة والمونتاج الآلي للفيديوهات القصيرة باستخدام AI', desc: 'تحليل محتوى الفيديو، التعرف على الإطارات الرئيسية' },
+    { title: 'مساعد الفصل الذكي لضوضاء الخلفية في الفيديو وتحسين الصوت البشري باستخدام AI', desc: 'نموذج فصل الصوت، إزالة ضوضاء الخلفية' },
+    { title: 'محطة عمل لاستعادة الصور القديمة بدقة 4K فائقة والتلوين الذكي باستخدام AI', desc: 'نموذج الدقة الفائقة للفيديو، تلوين آلي عبر AI' },
+    { title: 'نظام تحويل النص إلى تعليق صوتي بمستوى بشري عبر TTS والتحكم في المشاعر', desc: 'نماذج TTS متعددة النبرات، التحكم في المشاعر' },
+    { title: 'مساعد النسخ الذكي لتسجيلات الاجتماعات واستخراج المهام الأساسية باستخدام AI', desc: 'فصل وتحويل الصوت في الاجتماعات متعددة المشاركين' }
+  ],
+  'ai-marketing': [
+    { title: 'محرك كتابة تلقائية لنصوص المنشورات الرائجة على شياوهونغشو (RED) باستخدام AIGC', desc: 'توليد نصوص ترويجية، تحسين الرموز التعبيرية' },
+    { title: 'أداة التنضيد الذكي لملصقات التسويق والتكيف مع أحجام متعددة باستخدام AI', desc: 'المطابقة الذكية لقوالب الملصقات' },
+    { title: 'منصة توليد إبداعي لشعارات العلامات التجارية AIGC وبناء نظام الهوية البصرية VI', desc: 'توليد إبداعي للشعار، توليد معايير VI' },
+    { title: 'مساعد تتبع الاتجاهات السائدة عبر الإنترنت وتوليد أفكار التسويق الاستغلالية باستخدام AI', desc: 'تحليل زوايا التسويق، توليد خطط إبداعية' },
+    { title: 'مساعد توليد إبداعي لنصوص الفيديوهات القصيرة وإرشادات القصص المصورة باستخدام AIGC', desc: 'توليد النصوص والقصص المصورة، اقتراحات التصوير' }
+  ],
+  'data-intelligence': [
+    { title: 'أداة توليد تلقائي لعبارات SQL من اللغة الطبيعية', desc: 'تحويل استعلامات اللغة الطبيعية إلى SQL' },
+    { title: 'نظام جرد وتصنيف ذكي لكتالوج أصول البيانات المؤسسية', desc: 'جمع البيانات الوصفية، تصنيف تلقائي' },
+    { title: 'محرك الكشف الآلي عن الحالات الشاذة لجودة البيانات واقتراحات الإصلاح', desc: 'محرك القواعد + نماذج ML للكشف عن الحالات الشاذة' },
+    { title: 'مساعد توليد التقارير الذكية وتكوين التصورات', desc: 'تكوين التقارير عبر المحادثات' },
+    { title: 'مساعد الإجابة على الأسئلة الذكي حول تعريفات المقاييس', desc: 'بناء قاعدة معرفية بناءً على مستندات تعريف المقاييس' }
+  ]
+}
+
+// جدول تعيين مسارات التوصيات المحددة مسبقاً
+const recommendationMap = {
+  // نقطة الاهتمام: المحتوى الإبداعي
+  'creative-content': {
+    'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
+    'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
+    'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
+    'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
+  },
+  // نقطة الاهتمام: الخدمات التقنية
+  'tech-service': {
+    'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
+    'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
+    'improve-experience': ['customer-service', 'enterprise', 'programming'],
+    'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
+  },
+  // نقطة الاهتمام: الذكاء البياني
+  'data-intel': {
+    'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
+    'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
+    'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
+    'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
+  },
+  // نقطة الاهتمام: خدمة المستخدمين
+  'user-service': {
+    'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
+    'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
+    'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
+    'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
+  },
+  // نقطة الاهتمام: حلول الصناعة
+  'industry-solution': {
+    'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
+    'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
+    'improve-experience': ['healthcare', 'education', 'government', 'travel'],
+    'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
+  }
+}
+
+const interestOptions = [
+  { label: 'إنشاء محتوى إبداعي', value: 'creative-content', desc: 'محتوى إبداعي مثل النصوص والصور والفيديو' },
+  { label: 'أدوات الخدمة التقنية', value: 'tech-service', desc: 'أدوات التطوير والأتمتة والمساعدة في البرمجة' },
+  { label: 'تحليل البيانات الذكي', value: 'data-intel', desc: 'تحليل البيانات والتنبؤ واتخاذ القرارات الذكية' },
+  { label: 'تجربة خدمة المستخدمين', value: 'user-service', desc: 'خدمة العملاء والتسويق وتجربة المستخدم' },
+  { label: 'حلول الصناعة', value: 'industry-solution', desc: 'تطبيقات متعمقة لصناعات محددة' }
+]
+
+const purposeOptions = [
+  { label: 'رفع الكفاءة', value: 'increase-efficiency', desc: 'الأتمتة وتسريع العمليات' },
+  { label: 'خفض التكاليف', value: 'reduce-cost', desc: 'تقليل العمالة وتحسين الموارد' },
+  { label: 'تحسين التجربة', value: 'improve-experience', desc: 'رضا المستخدمين وجودة الخدمة' },
+  { label: 'ابتكار الأعمال', value: 'innovate-business', desc: 'منتجات ونماذج جديدة' }
+]
+
+const industries = [
+  { key: 'manufacturing', name: 'الصناعة التحويلية', anchor: '#_1-الصناعة-التحويلية' },
+  { key: 'customer-service', name: 'خدمة العملاء الذكية', anchor: '#_2-خدمة-العملاء-الذكية' },
+  { key: 'education', name: 'قطاع التعليم', anchor: '#_3-قطاع-التعليم' },
+  { key: 'programming', name: 'البرمجة الذكية', anchor: '#_4-البرمجة-الذكية' },
+  { key: 'healthcare', name: 'القطاع الطبي', anchor: '#_5-القطاع-الطبي' },
+  { key: 'security', name: 'الأمن السيبراني', anchor: '#_6-الأمن-السيبراني' },
+  { key: 'finance', name: 'الإدارة المالية والتأمين والقطاع المصرفي', anchor: '#_7-الإدارة-المالية-والتأمين-والقطاع-المصرفي' },
+  { key: 'enterprise', name: 'خدمات المؤسسات', anchor: '#_8-خدمات-المؤسسات' },
+  { key: 'content', name: 'إنتاج المحتوى والتشغيل', anchor: '#_9-إنتاج-المحتوى-والتشغيل' },
+  { key: 'government', name: 'الإدارة الحكومية الذكية', anchor: '#_10-الإدارة-الحكومية-الذكية' },
+  { key: 'legal', name: 'الشؤون القانونية وإدارة العقود', anchor: '#_11-الشؤون-القانونية-وإدارة-العقود' },
+  { key: 'travel', name: 'خدمات السفر والتنقل', anchor: '#_12-خدمات-السفر-والتنقل' },
+  { key: 'emotion', name: 'الرفقة العاطفية', anchor: '#_13-الرفقة-العاطفية' },
+  { key: 'entertainment', name: 'الترفيه والتسلية', anchor: '#_14-الترفيه-والتسلية' },
+  { key: 'ecommerce', name: 'خدمات التجارة الإلكترونية', anchor: '#_15-خدمات-التجارة-الإلكترونية' },
+  { key: 'energy', name: 'الطاقة', anchor: '#_16-الطاقة' },
+  { key: 'av-media', name: 'الصوت والفيديو', anchor: '#_17-الصوت-والفيديو' },
+  { key: 'ai-marketing', name: 'تسويق الذكاء الاصطناعي', anchor: '#_18-تسويق-الذكاء-الاصطناعي' },
+  { key: 'data-intelligence', name: 'ذكاء البيانات', anchor: '#_19-ذكاء-البيانات' }
+]
+
+// حساب نتائج التوصية - سحب عشوائي من مجموعة المواضيع
+const recommendationTopics = computed(() => {
+  if (!interestPoint.value || !purpose.value) return []
+  
+  const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
+  const topics = []
+  
+  // استخراج عشوائي لـ 1-2 موضوع من كل صناعة موصى بها
+  keys.forEach(key => {
+    const industry = industries.find(item => item.key === key)
+    const industryTopics = topicPool[key] || []
+    
+    if (industry && industryTopics.length > 0) {
+      // استخراج عشوائي لـ 1-2 موضوع
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          industryKey: key,
+          industryName: industry.name,
+          industryAnchor: industry.anchor
+        })
+      })
+    }
+  })
+  
+  // فرز عشوائي وتقييد العدد الإجمالي
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// الحصول على وصف الاختيار الحالي
+const currentSelection = computed(() => {
+  const interest = interestOptions.find(i => i.value === interestPoint.value)
+  const pur = purposeOptions.find(p => p.value === purpose.value)
+  return {
+    interest: interest?.label || '',
+    purpose: pur?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // تأخير التمرير لضمان اكتمال تحديث DOM
+  setTimeout(() => {
+    // محاولة البحث عبر ID (يدعم تنسيقات متعددة)
+    let element = document.querySelector(anchor)
+    
+    // إذا لم يتم العثور عليه، جرب تنسيقات ID محتملة أخرى
+    if (!element) {
+      // محاولة إزالة بادئة الشرطة السفلية
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // إذا لم يتم العثور عليه بعد، ابحث عبر نص العنوان
+    if (!element) {
+      // استخراج اسم الصناعة من نقطة الارتساء
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // مطابقة تامة أو مطابقة جزئية
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // تمييز الفقرة المستهدفة
+      element.style.backgroundColor = '#f0f9ff'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  interestPoint.value = ''
+  purpose.value = ''
+}
+</script>
+
+# مرجع لاتجاهات سيناريوهات التطبيق الصناعي للجانب B
+
+## مقدمة الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['تطبيقات الجانب B', 'التطبيقات الصناعية', 'سيناريوهات AI', 'مرجع التطبيق', 'حلول الصناعة']" coreOutput="التعرف على 15+ سيناريو تطبيق صناعي للجانب B" expectedOutput="العثور على اتجاه المشروع المناسب لعملاء المؤسسات">
+
+يُلخص هذا المستند <strong>التطبيقات العملية لنماذج LLM الكبيرة في سيناريوهات مؤسسات الجانب B</strong>. على عكس الجانب C الذي يركز على تجربة المستخدم والمشاعر، تركز منتجات الجانب B بشكل أكبر على <strong>حل احتياجات العمل الفعلية، وتحسين الكفاءة، وتقليل التكاليف</strong>. يتمتع كل سيناريو <strong>بجدوى التطبيق العملي</strong>، ويغطي المنهجية الكاملة من <strong>تحليل المتطلبات إلى التنفيذ التقني</strong>، وهو مناسب كمرجع لمطوري تطبيقات AI الموجهة لعملاء المؤسسات.
+
+</ChapterIntroduction>
+
+## الاختيار السريع لاتجاه الصناعة
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: 600; margin-bottom: 8px;">ابحث عن سيناريو التطبيق المناسب لك</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    اختر اهتمامك والهدف الذي تريد تحقيقه، وسيقوم النظام بتوصية سيناريوهات الصناعة ذات الصلة، انقر على العلامة للانتقال إلى القسم المقابل.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="interestPoint" placeholder="اختر اهتمامك" style="width: 100%;">
+        <el-option 
+          v-for="item in interestOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="purpose" placeholder="اختر غرض التنفيذ" style="width: 100%;">
+        <el-option 
+          v-for="item in purposeOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <!-- عرض نتائج التوصية - تنسيق الجدول -->
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
+      نوصي لك بـ {{ recommendationTopics.length }} سيناريو تطبيق
+      <span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
+        ({{ currentSelection.interest }} + {{ currentSelection.purpose }})
+      </span>
+    </div>
+    <el-table 
+      :data="recommendationTopics" 
+      style="width: 100%; cursor: pointer;"
+      @row-click="(row) => scrollToAnchor(row.industryAnchor)"
+      highlight-current-row>
+      <el-table-column prop="title" label="سيناريو التطبيق" min-width="300">
+        <template #default="scope">
+          <div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industryName" label="الصناعة التابعة" width="180" align="center">
+        <template #default="scope">
+          <el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 10px; font-size: 12px; color: #909399;">
+      💡 انقر على أي صف في الجدول للانتقال إلى قسم الصناعة المقابل
+    </div>
+  </div>
+  
+  <!-- مطالبة عند عدم الاختيار بالكامل -->
+  <div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
+    <span v-if="!interestPoint && !purpose">💡 يرجى اختيار اهتمامك والغرض من التنفيذ</span>
+    <span v-else-if="!interestPoint">💡 يرجى اختيار اهتمامك</span>
+    <span v-else>💡 يرجى اختيار غرض التنفيذ</span>
+  </div>
+  
+  <!-- زر إعادة التعيين -->
+  <div v-if="interestPoint || purpose" style="margin-top: 12px;">
+    <el-button size="small" @click="resetSelection">إعادة الاختيار</el-button>
+  </div>
+</el-card>
+
+## مقدمة سريعة عن الصناعات
+
+### الاختيار التقني السائد
+
+في تطوير تطبيقات الذكاء الاصطناعي، تشمل الاتجاهات التقنية الشائعة:
+
+1. **LLM (النموذج اللغوي الكبير)**: بارع في معالجة مهام اللغة الطبيعية، مثل الحوار، وإنشاء النصوص، والتلخيص، والترجمة، وغيرها، ومناسب لبناء تطبيقات خدمة العملاء الذكية، وإنشاء المحتوى، والمعرفة والأسئلة والأجوبة.
+2. **VLM (نموذج اللغة المرئية)**: يجمع بين الفهم البصري وقدرات اللغة، ويمكنه تحقيق وصف الصور، والإجابة على الأسئلة المرئية، وإنشاء المحتوى متعدد الوسائط، وغيرها من الوظائف، وهو مناسب لسيناريوهات مثل تحليل الصور الطبية، وفحص الجودة الصناعية، والتصميم الإبداعي.
+3. **GenAI (الذكاء الاصطناعي التوليدي)**: يشمل إنشاء النصوص، وإنشاء الصور (مثل Stable Diffusion، DALL·E)، وإنشاء الفيديو وغيرها من التقنيات، ويمكنه إنشاء محتوى إبداعي بسرعة، وهو مناسب لمجالات مثل التصميم المساعد، وإنتاج مواد التسويق، والتعليم والتدريب.
+
+### استراتيجية الاختيار
+
+يمكن للمتعلمين اختيار اتجاه التطبيق المناسب لهم بناءً على الأبعاد التالية:
+
+1. **التوجه بالاهتمام**: إعطاء الأولوية للصناعة أو الاتجاه التقني الذي يهمك، للحفاظ على الدافع للتعلم. على سبيل المثال:
+   - مهتم بالتصميم الإبداعي: يمكنك تجربة تطبيقات إنتاج المحتوى والتصميم الصناعي
+   - مهتم بالتحديات التقنية: يمكنك تجربة تطبيقات الأمن السيبراني والاتجاه الطبي
+   - مهتم بالقيمة الاجتماعية: يمكنك تجربة تطبيقات الحكومة الذكية وصناعة التعليم
+
+2. **التكيف مع الصناعة**: اختيار السيناريوهات بناءً على خلفيتك الصناعية أو مزايا الموارد:
+   - العاملون في الصناعة التحويلية: يمكن إعطاء الأولوية لتطبيقات التصنيع الصناعي وخدمات المؤسسات
+   - العاملون في التعليم: يمكن التركيز أولاً على تطبيقات صناعة التعليم وإنتاج المحتوى
+   - العاملون في المجال الطبي: يمكن استكشاف التطبيقات الطبية وإدارة الصحة
+
+3. **الصعوبة التقنية**: اختيار مستوى التعقيد المناسب بناءً على أساسك التقني:
+   - مستوى المبتدئين: خدمة العملاء الذكية، إنشاء المحتوى، أنظمة الأسئلة والأجوبة البسيطة
+   - المستوى المتوسط: فحص الجودة الصناعية، تحليل الصور الطبية، مساعد الكود الذكي
+   - المستوى الاحترافي: التحكم في المخاطر المالية، الأمن السيبراني، التطبيقات المعقدة متعددة الوسائط
+
+## 1. الصناعة التحويلية 
+
+تدور سيناريوهات الصناعة التحويلية بشكل أساسي حول ثلاثة اتجاهات رئيسية: التصميم المساعد، وتحسين الإنتاج، والصيانة الذكية. تشمل التطبيقات الشائعة استخدام الذكاء الاصطناعي للمساعدة في تصميم مظهر المنتج، والمراجعة الآلية للمخططات، والإنشاء الذكي للوثائق التقنية، وتشخيص أعطال المعدات الصناعية، مما يمكن أن يحسن بشكل كبير من كفاءة التصميم ويقلل من تكاليف الصيانة.
+| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
+| :--: | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+|  1   | منصة التصميم المساعد بالذكاء الاصطناعي لمظهر حافلات الطاقة الجديدة | تصميم مفاهيم المظهر بناءً على نماذج توليد الصور، مع دمج LLM لإجراء فحوصات معايير التصميم والتكرار الإبداعي؛ تكامل خدمة العرض ثلاثي الأبعاد Three.js |
+|  2   | مساعد تصميم ومراجعة الرسومات الهندسية الذكي | استخدام تقنية RAG لبناء قاعدة معرفية لمعايير تصميم المؤسسة، و DALL·E لتوليد صور مرجعية تساعد في الفهم؛ تكامل CAD API لتحليل الرسومات الهندسية تلقائياً |
+|  3   | إنشاء وإدارة المستندات الفنية تلقائياً | إنشاء مواصفات المنتج وأدلة التشغيل تلقائياً من قاعدة بيانات المنتجات باستخدام LLM، وتخزين المستندات التاريخية في قاعدة بيانات المتجهات ChromaDB لدعم البحث الذكي |
+|  4   | مساعد إنشاء تقارير فحص معدات الإنتاج تلقائياً | يقوم مفتشو الصيانة بوصف حالة المعدات صوتياً، ويقوم LLM بإنشاء تقرير الفحص بشكل هيكلي؛ وربط سجلات الأعطال التاريخية تلقائياً |
+|  5   | نظام الجدولة الذكية وتخطيط المسارات لرافعات الشوك في المصانع | يقوم LLM بتحليل مهام الطلبات ومواقع المستودعات، ويتكامل مع Map API لإنشاء خطة جدولة مثالية |
+|  6   | مستودع بيانات قائم على استرجاع المعلومات عبر LLM | استخدام تقنية Text-to-SQL لتحويل اللغة الطبيعية إلى استعلامات قاعدة بيانات، و Superset لعرض نتائج الاستعلام بصرياً؛ استخدام Doris أو ClickHouse كمحرك OLAP |
+|  7   | مساعد أسئلة وأجوبة معرفي لتشخيص أعطال المعدات الصناعية | بناء قاعدة معرفية للمتجهات بناءً على حالات الأعطال التاريخية، ويقدم LLM اقتراحات التشخيص والحلول بناءً على وصف العطل |
+|  8   | إنشاء تقارير فحص جودة الإنتاج ذكياً وتصنيف العيوب | التعرف على العيوب في صور فحص الجودة عبر OCR، وإنشاء تقرير فحص هيكلي بواسطة LLM؛ وتصنيف أنواع العيوب ودرجة خطورتها تلقائياً |
+|  9   | مساعد جرد المخزون ذكي وإنشاء تقارير الجرد | إدخال بيانات الجرد، ومقارنة مخزون النظام تلقائياً وإنشاء تقرير الفروقات بواسطة LLM؛ إنذار مبكر للمخزون غير الطبيعي |
+|  10  | نظام أسئلة وأجوبة ذكي لاقتراحات تحسين العمليات | بناء قاعدة معرفية RAG بناءً على مستندات عمليات الإنتاج، ويقدم LLM اقتراحات للتحسين بناءً على مشاكل الإنتاج |
+
+## 2. خدمة العملاء الذكية
+
+تركز سيناريوهات خدمة العملاء الذكية على تحسين كفاءة خدمة العملاء وتحسين تجربة المستخدم. تغطي التطبيقات النموذجية تكامل خدمة العملاء متعددة القنوات، والإنشاء الذكي للردود، وتحليل مشاعر العملاء، والمعالجة الآلية لتذاكر الدعم، مما يساعد الشركات على تحقيق خدمة عملاء على مدار الساعة 7×24.
+
+| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
+| :--: | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+|  1   | نظام الرد الآلي وتوليد تذاكر الدعم لخدمة العملاء الذكية متعددة القنوات | التكامل مع رسائل WeChat و APP والموقع الرسمي متعددة القنوات، يقوم LLM بفهم النية ثم إنشاء رد وتأسيس تذكرة تلقائياً؛ استخدام LangChain لبناء تدفق الحوار، و MySQL لتخزين بيانات التذاكر |
+|  2   | مساعد اكتشاف العملاء المحتملين واقتراحات المتابعة | يقوم LLM بتحليل سجلات محادثات خدمة العملاء التاريخية، وتحديد خصائص العملاء ذوي النية العالية وتسجيلهم؛ نظام التوصيات مدمج مع خوارزمية التصفية التعاونية |
+|  3   | البحث المعرفي الذكي الداخلي للشركة ومساعد الأسئلة والأجوبة | بناء قاعدة معرفية للمتجهات بناءً على Confluence والمستندات الداخلية، يقوم LLM بتوليد الإجابات بالتكامل مع تقنية RAG |
+|  4   | نظام إدارة استطلاعات رضا العملاء وتحسين الخدمة | يقوم LLM بتحليل محتوى محادثات خدمة العملاء تلقائياً لتصنيف المشاعر وتقييم مستوى الرضا؛ تقارير BI لعرض نتائج التحليل |
+|  5   | أداة التلخيص الذكي لمحادثات خدمة العملاء وإنشاء التذاكر | بعد انتهاء خدمة العملاء للمحادثة، يقوم LLM بإنشاء ملخص للمحادثة تلقائياً واستخراج المعلومات الأساسية؛ تعبئة حقول التذكرة تلقائياً |
+|  6   | مساعد الكشف التلقائي عن امتثال نصوص خدمة العملاء | يقوم موظف خدمة العملاء بإدخال محتوى الرد، ويقوم LLM بالكشف الفوري عن امتثال النصوص والكلمات الحساسة؛ تقديم اقتراحات للتعديل |
+|  7   | أداة التلخيص التلقائي وتوليد التصنيفات لتذاكر خدمة العملاء | يقوم LLM بتوليد ملخصات لسجلات المحادثات الطويلة والتصنيف والوسم التلقائي؛ Elasticsearch يدعم البحث بالنص الكامل في التذاكر |
+|  8   | أداة مراقبة مشاعر العملاء والإنذار المبكر بالشذوذ | تحليل خصائص نبرة الصوت والمشاعر النصية في الوقت الفعلي، يتعرف LLM على المشاعر غير الطبيعية ويطلق إنذارات؛ WebSocket لدفع رسائل الإنذار |
+|  9   | نظام قاعدة معرفية لتوصية نصوص خدمة العملاء المثالية | يقوم LLM بتحليل حالات محادثات خدمة العملاء المتميزة، واستخراج قوالب النصوص المثالية؛ نظام التوصيات يوصي بالنصوص في الوقت الفعلي بناءً على سياق المحادثة |
+|  10  | مساعد تحليل محتوى المكالمات الصادرة الذكية والفحص | بعد تفريغ تسجيلات المكالمات الصادرة، يقوم LLM بتحليل المحتوى واستخراج المعلومات الأساسية؛ إنشاء تقارير فحص الجودة واقتراحات التحسين تلقائياً |
+
+## 3. قطاع التعليم
+
+تهدف سيناريوهات قطاع التعليم إلى تحقيق التعليم المخصص والإدارة التعليمية الذكية. تشمل التطبيقات الأساسية تخطيط مسارات التعلم الذكية، والتصحيح التلقائي للواجبات، وإنشاء خطط الدروس، وتحليل الأداء التعليمي، مما يدفع نحو التوزيع الأمثل للموارد التعليمية وتحقيق التعليم المخصص.
+
+| الرقم | اسم سيناريو التطبيق | مرجع التنفيذ |
+| :--: | ---------------------------------------- | ------------------------------------------------------------------------------------------ |
+|  1   | تخطيط مسار تعلم اللغة المخصص ونظام التوجيه الذكي     | يقيم LLM المستوى الحالي للمتعلم، ويخطط للمهام اليومية بناءً على أهداف التعلم؛ توصي خوارزمية التوصية بالموارد التعليمية بالدمج مع خريطة المعرفة     |
+|  2   | منصة الكتابة الآلية لخطط الدروس وعرض الموارد التعليمية         | ينشئ LLM إطار خطة الدرس والتصميم التعليمي بناءً على المنهج الدراسي؛ يخزن متجه المكتبة خطط الدروس والعروض التقديمية الممتازة، ويدعم البحث بالكلمات المفتاحية والتوصيات المماثلة |
+|  3   | نظام التصحيح الآلي للواجبات وتحليل تشخيص الحالة التعليمية         | يقوم LLM بالتصحيح التلقائي للأسئلة الذاتية وإنشاء اقتراحات التصحيح، وتحدد خريطة المعرفة نقاط الضعف لدى الطلاب                               |
+|  4   | بناء نموذج كفاءة المواهب للوظائف وخريطة التعلم         | يحلل LLM وصف الوظيفة (JD) لاستخراج متطلبات القدرات، وبناء ملف تعريف لقدرات الوظيفة؛ ينشئ خريطة تعلم مخصصة بناءً على الفجوة                 |
+|  5   | بناء نظام المناهج المدرسية وأدوات إعداد العروض التقديمية           | يحلل LLM خصائص المدرسة واحتياجات الطلاب، وينشئ إطارًا للمناهج المدرسية؛ يتكامل مع واجهة إنشاء PPT لإعداد العروض التقديمية تلقائيًا                |
+|  6   | التدريب العملي لمحاكاة المواقف الفردية لمحادثة اللغة الأجنبية             | يتقمص LLM أدوارًا مختلفة لإجراء محادثات لفظية، وتتعرف ASR على النطق وتقيّمه؛ ينشئ TTS نموذجًا قياسيًا للنطق                     |
+|  7   | منصة التوجيه للتخطيط المهني والتوصية بالبيانات الضخمة لرغبات القبول الجامعي     | يحلل LLM درجات الطالب، وترتيبه، واهتماماته، وغيرها من المعلومات، ويوصي بالجامعات والتخصصات بالدمج مع بيانات القبول                             |
+|  8   | مساعد البرمجة للأطفال                         | يشرح LLM منطق الكود ويقدم إرشادات برمجية، ويدعم التبديل بين لغة الكتل و Python                                   |
+|  9   | أداة إنشاء خرائط ذهنية للمعلومات تلقائيًا وتوصية بمسار التعلم | عند إدخال موضوع الدرس، ينشئ LLM خريطة ذهنية للمعلومات تلقائيًا؛ ويوصي بالمحتوى التعليمي التالي بناءً على تقدم التعلم                   |
+|  10  | محرك التصحيح والتسجيل الآلي لمقالات اللغتين الصينية والإنجليزية           | يسجل LLM ويقيم المقالات من أبعاد متعددة مثل الفكرة، والهيكل، واللغة، والتنوع، وينشئ تعليقات؛ ويقارنها بنماذج مقالات ممتازة                         |
+
+## 4. البرمجة الذكية
+
+تهدف سيناريوهات البرمجة الذكية إلى تحسين كفاءة التطوير وجودة الكود. تشمل التطبيقات النموذجية الإكمال التلقائي للكود، والإصلاح التلقائي للأخطاء (Bug)، وإنشاء الاختبارات الآلية، وتحويل الكود، مما يتيح للمطورين التركيز على منطق الأعمال بدلاً من أعمال الترميز المتكررة.
+
+| الرقم | اسم سيناريو التطبيق                     | مرجع التنفيذ                                                                                             |
+| :--: | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
+|  1   | مساعد الإكمال التلقائي للكود والإصلاح التلقائي للأخطاء (Bug)  | نموذج كود مضبوط بدقة بناءً على CodeLlama، توفر إضافة IDE اقتراحات إكمال الكود في الوقت الفعلي؛ يحلل LLM تتبع الخطأ لتحديد موقع Bug تلقائيًا وإنشاء كود الإصلاح |
+|  2   | منصة بناء التطبيقات منخفضة التعليمات البرمجية وأتمتة العمليات   | يصف المستخدم المتطلبات بلغة طبيعية، ويقوم LLM بتحويلها إلى تكوينات منخفضة التعليمات البرمجية أو أطر عمل برمجية                                             |
+|  3   | نظام إنشاء حالات اختبار الوحدة             | يقوم AST بتحليل الشفرة المصدرية لاستخراج منطق الدوال، ويقوم LLM بإنشاء حالات اختبار لشروط الحدود وسيناريوهات الاستثناء؛ التكامل مع Jest/Pytest لتشغيل الاختبارات          |
+|  4   | أداة التحليل الذكي للشفرة البرمجية ونقل اللغات       | تحليل بنية الشفرة البرمجية بناءً على Tree-sitter، ويقوم LLM بتحليل جودة الشفرة البرمجية وتقديم اقتراحات للتحسين؛ دمج محرك القواعد لتحقيق التحويل بين اللغات              |
+|  5   | أداة التوليد التلقائي لعبارات SQL من اللغة الطبيعية  | يقوم LLM بتحويل استعلامات اللغة الطبيعية إلى SQL، ويدعم استعلامات الربط المعقدة متعددة الجداول واستعلامات التجميع                                             |
+|  6   | منصة الاختبار الآلي لواجهات API وتوليد الوثائق | يقوم LLM بتحليل تعليقات الشفرة البرمجية وتعريفات الواجهات، ويقوم تلقائيًا بإنشاء حالات الاختبار ووثائق API؛ تكامل Postman لتنفيذ الاختبارات                        |
+|  7   | أداة التسجيل الذكي والصيانة لبرامج اختبار واجهة المستخدم    | يقوم ملحق المتصفح بتسجيل مسار عمليات المستخدم، ويقوم LLM بتحليل نية العملية لإنشاء نصوص اختبار برمجية؛ يقوم الذكاء الاصطناعي بإصلاح المحددات المعطلة                        |
+|  8   | تحليل سجلات النظام وتحديد الأعطال           | تجميع بيانات السجلات عبر ELK Stack، ويقوم LLM بتحليل سجلات الاستثناء لاستخراج المعلومات الرئيسية وتحديد السبب الجذري؛ ويوصي بحلول الإصلاح                         |
+|  9   | أداة التوليد التلقائي لشفرة واجهة المستخدم الأمامية (UI)   | التعرف على بنية التخطيط لمخططات التصميم عبر OCR، ويقوم LLM بإنشاء CSS المتجاوب وشفرة المكونات؛ تكامل TailwindCSS لدعم أطر عمل الأنماط المتعددة      |
+|  10  | مساعد التصميم الذكي والنمذجة لهيكل قاعدة البيانات     | إدخال مستندات متطلبات العمل إلى LLM، والتوليد التلقائي لمخططات ER وهياكل جداول البيانات؛ دعم تصدير نصوص إنشاء الجداول لـ MySQL/PostgreSQL               |
+
+## 5. القطاع الطبي
+
+تسعى سيناريوهات القطاع الطبي إلى تحسين كفاءة التشخيص والعلاج وجودة الخدمات الطبية. تشمل التطبيقات الشائعة التوليد التلقائي للسجلات الطبية، والإجابة على الأسئلة الطبية المعرفية، والمساعدة في تحليل الصور الطبية، ودعم تطوير الأدوية، مما يدفع عجلة التحول الذكي في الصناعة الطبية.
+
+| الرقم | اسم سيناريو التطبيق                       | مرجع التنفيذ                                                                              |
+| :--: | ---------------------------------- | ------------------------------------------------------------------------------------- |
+|  1   | مساعد التفسير الذكي لتقارير الفحوصات الطبية           | رفع صورة تقرير الفحص، والتعرف على المؤشرات الرئيسية عبر OCR، ويقوم LLM بتفسير القيم غير الطبيعية وإنشاء شرح مبسط                      |
+|  2   | خبير استشارات صحية قائم على تقنية استرجاع المعرفة     | بناء شبكة معرفية طبية (ICD-10، نشرة معلومات الأدوية، إرشادات التشخيص والعلاج)، واسترجاع وإنشاء إجابات عبر RAG                    |
+|  3   | منصة تحليل القرار للبيانات السريرية والبحثية           | دمج بيانات EMR ونتائج الفحوصات، ويقوم LLM بالمساعدة في إنشاء شفرات التحليل الإحصائي والمخططات المرئية؛ دعم دراسات الأتراب وتحليل البقاء على قيد الحياة |
+|  4   | نظام التوليد الذكي لأسئلة الامتحانات الطبية وتحليل الإجابات الخاطئة     | إدخال فصول الكتب المدرسية ونقاط المعرفة، ويقوم LLM بإنشاء أسئلة تدريبية وشروحات؛ وجمع تلقائي للإجابات الخاطئة وإنشاء تحليل لنقاط الضعف              |
+|  5   | خبير أسئلة وأجوبة ذكي لشبكة المعرفة في دورة تطوير الأدوية بالكامل | بناء شبكة معرفية للأدوية-الأهداف-الأمراض، ويقوم LLM بالإجابة على الأسئلة المتعلقة بالبحث والتطوير؛ دعم استرجاع الوثائق والتوصية بخطط التجارب          |
+|  6   | مساعد أسئلة وأجوبة ذكي لنشرة معلومات الأدوية             | رفع صورة نشرة معلومات الدواء أو إدخال اسم الدواء، ويقوم LLM بالإجابة على أسئلة حول الجرعة وطريقة الاستخدام، والآثار الجانبية، واحتياطات الاستخدام              |
+|  7   | مساعد إنشاء مقالات التوعية بالأمراض           | إدخال اسم المرض والجمهور المستهدف، ويقوم LLM بإنشاء مقالات توعوية سهلة الفهم؛ دعم إصدارات متعددة (نسخة المريض/نسخة الأسرة)           |
+|  8   | أداة التوليد التلقائي لتقارير التصوير الطبي           | يصف طبيب الأشعة خصائص الصورة، ويقوم LLM تلقائيًا بإنشاء تقرير منظم؛ دعم قوالب أنواع الفحوصات الشائعة                  |
+|  9   | مساعد التوليد الذكي لأرشيف السجلات الجراحية والتوثيق | إدخال صوتي للخطوات الرئيسية أثناء الجراحة، وLLM يولد سجلات جراحية مهيكلة؛ ربط تلقائي بأكواد العمليات الجراحية                  |
+|  10  | مساعد ذكي لتذكيرات أدوية الأمراض المزمنة           | يدخل المريض قائمة الأدوية، وLLM يولد تذكيرات أدوية مخصصة؛ يدعم فحص موانع الاستخدام والأسئلة والأجوبة التفاعلية                  |
+
+## 6. الأمن السيبراني
+
+تركز سيناريوهات الأمن السيبراني على الحماية الأمنية وإدارة المخاطر. تشمل التطبيقات الأساسية اكتشاف الثغرات، وتحليل معلومات التهديدات، والتعرف على رسائل التصيد، والاستجابة للحوادث الأمنية، مما يبني نظام حماية أمني ذكي وشامل للمؤسسات.
+
+| الرقم | اسم سيناريو التطبيق                        | مرجع التنفيذ                                                                               |
+| :--: | ----------------------------------- | -------------------------------------------------------------------------------------- |
+|  1   | محرك اكتشاف وإصلاح ثغرات أمان الكود          | أدوات تحليل الكود الثابت (SAST) تفحص الكود، وLLM يحلل مبادئ الثغرات ويولد اقتراحات الإصلاح؛ يتكامل مع خط أنابيب CI/CD    |
+|  2   | نظام التعرف والاعتراض الذكي لرسائل التصيد الاحتيالي المولدة بواسطة AI | LLM يحلل محتوى البريد الإلكتروني وخصائص المرسل وأمان الروابط، للتعرف على رسائل التصيد المولدة بواسطة AI؛ يتصل ببوابة البريد للاعتراض في الوقت الفعلي |
+|  3   | مساعد التوليد التلقائي للتقارير اليومية للعمليات الأمنية            | تجميع سجلات أجهزة الأمان، وLLM يستخرج الأحداث الرئيسية تلقائيًا ويولد تقارير يومية؛ تمييز الأحداث الشاذة بـ highlight                |
+|  4   | مساعد الأسئلة والأجوبة الذكي لقاعدة المعرفة الأمنية              | بناء قاعدة معرفة متجهة بناءً على وثائق الأمان وقاعدة بيانات CVE، وLLM يجيب على أسئلة تقنيات الأمان واقتراحات المعالجة                     |
+|  5   | مساعد التوليد الذكي لتقارير اختبار الاختراق            | بعد اكتمال اختبار الاختراق، يقوم LLM بتوليد تقرير تلقائي بناءً على وصف الثغرة؛ توليد دفعي لاقتراحات إصلاح الثغرات                     |
+|  6   | حماية الأكواد الخبيثة ومراقبة الامتثال للخصوصية          | تحليل سلوك الملفات المشبوهة في بيئة اختبار معزولة (Sandbox)، وLLM يتعرف على الميزات الخبيثة ويولد توقيعات؛ مسح وتحديد بيانات الخصوصية                     |
+|  7   | أداة توليد قوائم فحص الامتثال للتكوينات الأمنية      | إدخال نوع النظام المستهدف، وLLM يولد قائمة فحص التكوين الأمني؛ يدعم معايير مثل حماية المستوى 2.0 (Dengbao 2.0) وCIS                   |
+|  8   | مساعد الاستعلام والتحليل الذكي لمعلومات التهديدات          | الاتصال بمصادر متعددة لمعلومات التهديدات (مفتوحة المصدر، تجارية)، وLLM يفسر المعلومات ويربطها بأصول المؤسسة؛ يوصي باستراتيجيات الحماية               |
+|  9   | مساعد توليد تقارير مراجعة الحوادث الأمنية            | بعد وقوع حادث أمني، يقوم LLM بتوليد تقرير مراجعة تلقائي بناءً على الجدول الزمني؛ تحليل السبب الجذري واقتراحات التحسين                     |
+|  10  | مركز رصد وإنذار معلومات التهديدات العالمية          | يجمع الروبوت (Crawler) الأخبار الأمنية العالمية والإفصاحات عن الثغرات، وLLM يستخرج المعلومات الرئيسية ويقيّم التأثير؛ إشعارات إنذار عبر البريد الإلكتروني/الرسائل النصية          |
+
+## 7. الإدارة المالية، التأمين والقطاع المصرفي
+
+تتمحور سيناريوهات القطاع المالي حول التحكم في المخاطر والذكاء المالي. تشمل التطبيقات النموذجية تقييم مخاطر الائتمان، ومستشاري إدارة الثروات، وتوليد التقارير المالية، ومراقبة غسل الأموال، مما يعزز كفاءة التشغيل وقدرات إدارة المخاطر في المؤسسات المالية.
+
+| الرقم | اسم سيناريو التطبيق                           | مرجع التنفيذ                                                                             |
+| :--: | -------------------------------------- | ------------------------------------------------------------------------------------ |
+|  1   | مساعد التوليد الذكي لتقارير التحقيق الائتماني               | إدخال المعلومات الأساسية للشركة والبيانات المالية، وLLM يولد تلقائيًا تقرير التحقيق الائتماني؛ تحديد تلقائي لنقاط المخاطرة                 |
+|  2   | مستشار ذكي لإدارة الثروات في البنوك الخاصة               | LLM يحلل تفضيلات المخاطر المالية للعميل وأهدافه المالية، ويولد اقتراحات تخصيص الأصول؛ يتصل بمنتجات التمويل وقاعدة بيانات الصناديق               |
+|  3   | مساعد التوليد الذكي والتحقق من الامتثال لكتاب طرح عام أولي (IPO)       | قوالب معيارية لمخطط طرح الأسهم، وLLM يملأ تلقائيًا وصف الأعمال وعوامل المخاطر؛ محرك قواعد التحقق من الامتثال للتحقق من الاتساق الداخلي والخارجي |
+|  4   | نظام التوليد التلقائي للتقارير المالية للشركات والإنذار المبكر بالحالات الشاذة | جمع البيانات تلقائيًا من الأنظمة المالية، وLLM يولد التحليل المالي وقسم مناقشة الإدارة؛ قواعد الإنذار المبكر للمؤشرات الشاذة             |
+|  5   | مساعد استخراج معلومات المستندات المالية والأسئلة والأجوبة             | تحميل صور الفواتير، والتعرف البصري على الحروف (OCR) لاستخراج المعلومات، وLLM يجيب على الأسئلة المتعلقة بالمستندات؛ يدعم فواتير ضريبة القيمة المضافة وتذاكر القطار، إلخ           |
+|  6   | مساعد البحث الذكي والأسئلة والأجوبة لحالات الامتثال             | بناء قاعدة معرفة بناءً على حالات العقوبات التنظيمية، وLLM يجيب على أسئلة الامتثال ويوفر مراجع للحالات                           |
+|  7   | مدرب المحادثات الذكي لوكلاء التأمين                 | LLM يتقمص أدوار أنواع مختلفة من العملاء لإجراء محادثات محاكاة، ويقيم امتثال ومتانة حديث الوكيل؛ تحليل تفريغ التسجيلات الصوتية         |
+|  8   | منصة تحليل شروط منتجات التأمين والمقارنة مع المنافسين         | تحليل مهيكلي للشروط، وLLM يولد ملخصات لأبرز النقاط والملاحظات الهامة                                           |
+|  9   | خدمة التعرف على مشاعر خطاب العميل                   | التعرف على المشاعر من الكلام الصوتي مع فحص امتثال الحديث، وتقديم اقتراحات تحسين فورية للوكيل                                 |
+|  10  | مساعد الاستعلام والحوار الذكي لتقدم مطالبات التأمين         | يدخل المستخدم رقم الوثيقة أو رقم البلاغ، وLLM يستعلم عن تقدم المطالبة ويجيب على الأسئلة المتعلقة بالمطالبات                           |
+
+## 8. خدمات المؤسسات
+
+تسعى سيناريوهات خدمات المؤسسات إلى تحسين الكفاءة التشغيلية للمنظمات ومستوى الإدارة. تشمل التطبيقات الشائعة إدارة علاقات العملاء، والتنبؤ بالمبيعات، ورصد الرأي العام، والإدارة الذكية للموارد البشرية، مما يساعد الشركات على تحقيق التحول الرقمي والارتقاء بمستواها.
+
+| الرقم | اسم سيناريو التطبيق                       | مرجع التنفيذ                                                                       |
+| :--: | ---------------------------------- | ------------------------------------------------------------------------------ |
+|  1   | منصة تحليل احتفاظ العملاء والإنذار المبكر بالتسرب         | جمع بيانات سلوك المستخدمين عبر نقاط التتبع، ونماذج التعلم الآلي (ML) تتنبأ باحتمالية التسرب، وLLM يولد اقتراحات الاستبقاء                |
+|  2   | منصة الوصول للعملاء المحتملين ورسائل التسويق البريدية B2B     | تصفية العملاء المستهدفين من بيانات السجل التجاري للشركات، وLLM يولد محتوى تسويقي مخصص؛ الاتصال بمنصة إرسال البريد الإلكتروني الجماعي             |
+|  3   | منصة مراقبة خط أنابيب المبيعات والتنبؤ بالأداء         | جمع البيانات تلقائيًا من إدارة علاقات العملاء (CRM)، وLLM يحلل قمع المبيعات ويتنبأ بتحقيق الأداء؛ دفع إنذارات الشذوذ للمديرين           |
+|  4   | رادار رصد الرأي العام عن العلامة التجارية والإنذار المبكر للأزمات         | جمع بيانات الرأي العام من الشبكة بأكملها (وسائل التواصل الاجتماعي، الأخبار، المنتديات)، وLLM يحلل المشاعر واتجاهات الانتشار؛ دفع إنذارات الأزمات |
+|  5   | مساعد كتابة رسائل البريد الإلكتروني المهنية الذكي وإدارة مشاعر التواصل | فهم سياق البريد الإلكتروني، وLLM يولد مسودات رسائل احترافية؛ تحليل المشاعر وتقديم اقتراحات للتحسين                     |
+|  6   | نظام التحليل الذكي للسير الذاتية ومطابقة الوظائف         | تحليل ملفات PDF للسير الذاتية لاستخراج المعلومات الرئيسية، LLM يطابق الوظائف المناسبة ويولد نصائح المقابلات؛ تكامل نظام ATS        |
+|  7   | دليل إرشاد الموظفين الجدد ومساعد الإجابة على الأسئلة         | قاعدة معرفة وثائق الإلحاق باسترجاع RAG، LLM يجيب على أسئلة الموظفين الجديدة الشائعة                                |
+|  8   | منصة إدارة ملاحظات أداء الموظفين وأهداف OKR    | جمع بيانات نظام OKR، LLM يحلل حالة إنجاز الأهداف ويولد اقتراحات الملاحظات؛ جمع ملاحظات 360 درجة             |
+|  9   | محاضر الاجتماعات الذكية وإدارة المهام             | تفريغ تسجيلات الاجتماعات، LLM يستخرج نقاط النقاش الرئيسية والمهام؛ الإنشاء التلقائي للمهام في نظام المهام               |
+|  10  | التعرف على الفواتير والمعالجة التلقائية لتعويض النفقات         | OCR للتعرف على معلومات الفاتورة، التحقق التلقائي من صحة الفاتورة وامتثال التعويضات؛ التكامل مع النظام المالي                   |
+
+## 9. إنتاج المحتوى والعمليات
+
+تركز سيناريوهات إنتاج المحتوى والعمليات على توليد الأفكار وإدارة حركة المرور. تشمل التطبيقات الأساسية كتابة النصوص الإعلانية، وإنتاج مقاطع الفيديو القصيرة، والبث المباشر بالشخصيات الرقمية، وتحسين SEO، مما يساعد الشركات على تحسين كفاءة إنتاج المحتوى ومعدلات التحويل التسويقي.
+
+| الرقم | اسم سيناريو التطبيق                              | مرجع التنفيذ                                                                   |
+| :--: | ----------------------------------------- | -------------------------------------------------------------------------- |
+|  1   | منصة مساعدة إنشاء محتوى الأفلام والتلفزيون والروايات                | LLM يوفر مساعدة في الإنشاء مثل مخطط القصة، وتصميم الشخصيات، وتوليد الحوار؛ خريطة ذهنية لتصور بنية القصة     |
+|  2   | مساعد الكتابة الذكية لقصص العلامة التجارية ومقالات العلاقات العامة        | إدخال كلمات العلامة التجارية الرئيسية ومعلومات المنتج، LLM يولد إصدارات نصوص بأنماط متعددة؛ تكامل واجهة اختبار A/B         |
+|  3   | نظام إدارة تفاعل البث المباشر بالشخصيات الرقمية الافتراضية والبث          | نمذجة مظهر الشخصية الرقمية + صوت TTS + حوار LLM، استجابة في الوقت الفعلي لتعليقات الجمهور؛ تكامل بث OBS       |
+|  4   | توليد نصوص الفيديو القصير والمونتاج الذكي                  | LLM يولد نصوص الفيديو القصير واللوحات القصصية، Sora/Runway يولد مقاطع فيديو؛ أدوات المونتاج للتجميع التلقائي       |
+|  5   | تفريغ صوتي لمحادثات المبيعات والتوصية بالعبارات                | تفريغ تسجيلات المكالمات عبر ASR، LLM يحلل المحادثة ويوصي بالعبارات المثالية؛ تكامل نظام CRM                |
+|  6   | نظام التصميم والتوليد الذكي للمحتوى التسويقي                | إدخال معلومات المنتج، LLM يولد النصوص التسويقية ويستخرج نقاط البيع؛ تكامل قوالب Canva/AIGA Design         |
+|  7   | نظام مراقبة عائد الاستثمار للإعلانات متعددة المنصات في الوقت الفعلي وتحسين الاستراتيجية | واجهة برمجة تطبيقات منصة الإعلانات لجمع البيانات، LLM يحلل أداء الإعلانات ويولد اقتراحات التحسين؛ دفع تنبيهات الاستثناءات    |
+|  8   | تحليل الكلمات المفتاحية لمحركات البحث وحركة المرور                  | جمع بيانات مؤشر بايدو و 5118، LLM يحلل اتجاهات الكلمات المفتاحية والمنافسة؛ التوصية باختيار موضوعات المحتوى          |
+|  9   | منصة تحليل إعلانات المنافسين                      | واجهة برمجة تطبيقات منصة بيانات طرف ثالث لجمع إعلانات المنافسين، LLM يحلل استراتيجيات الإعلان وخصائص الإبداع                |
+|  10  | نظام التحليل الذكي للمواضيع الرائجة على الإنترنت والتوصية بالمحتوى        | جمع بيانات بحث ويبو الساخن وقائمة TikTok الرائجة، LLM يحلل اتجاهات المواضيع الرائجة ويوصي بزوايا المواضيع؛ جدولة المحتوى بالتقويم |
+
+## 10. الإدارة الحكومية الذكية
+
+تسعى سيناريوهات الحكومة الذكية إلى تحسين كفاءة الخدمات الحكومية وقدرات الحوكمة. تشمل التطبيقات النموذجية التنقل الصوتي الذكي للخطوط الحكومية الساخنة، والإجابة الذكية على السياسات، وتحسين الموافقات الإدارية، وإدارة الحوادث الحضرية، مما يدفع بناء الحكومة الرقمية.
+
+| الرقم | اسم سيناريو التطبيق                               | مرجع التنفيذ                                                             |
+| :--: | ------------------------------------------ | -------------------------------------------------------------------- |
+|  1   | نظام التنقل الصوتي الذكي والتوجيه التلقائي للخط الحكومي الساخن 12345   | التعرف على صوت مكالمات المواطنين، LLM يفهم الطلبات ويوجهها بذكاء إلى القسم المختص؛ التدفق التلقائي لنظام أوامر العمل |
+|  2   | روبوت الإرشاد الذكي والإجابة على السياسات في قاعات الخدمات الحكومية       | قاعدة المعرفة الحكومية باسترجاع RAG، LLM يجيب على إجراءات الخدمة وأسئلة السياسات؛ التكامل مع نظام أخذ الأرقام        |
+|  3   | منصة المطابقة الذكية والدفع الدقيق لسياسات دعم الشركات             | التحليل المهيكل للسياسات، الملف التعليمي للشركة للمطابقة التلقائية مع السياسات المعمول بها؛ دفع تنبيهات عبر الرسائل القصيرة/البريد الإلكتروني          |
+|  4   | مساعد المراجعة المسبقة الذكية لمواد الموافقات الإدارية والتحقق من الامتثال         | التعرف عبر OCR واستخراج المعلومات الرئيسية من المواد، LLM يتحقق من اكتمال المواد وامتثالها              |
+|  5   | نظام اكتشاف السلوك غير الطبيعي في مراقبة الفيديو للأمن العام           | تحليل تدفق الفيديو في الوقت الفعلي، نماذج الرؤية الحاسوبية (CV) تكتشف السلوكيات غير الطبيعية (قتال، سقوط، إلخ)؛ دفع التنبيهات        |
+|  6   | منصة إدارة التعرف الذكي على الأحداث والجدولة الشبكية الحضرية       | جمع بيانات الإدراك الحضري (إنترنت الأشياء، الكاميرات)، LLM يتعرف على نوع الحدث ويوجهه              |
+|  7   | نظام تحليل البيانات الضخمة للرأي العام الاجتماعي والإنذار المبكر بالمخاطر           | تحليل ودمج متعدد المصادر للخطوط الحكومية الساخنة، والرأي العام على الإنترنت، واستطلاعات الرأي الاجتماعي؛ LLM يتعرف على بؤر المخاطر     |
+|  8   | منصة التعرف الرقمي والأرشفة الذكية للسجلات الحكومية       | التعرف عبر OCR على المحتوى النصي للسجلات، LLM يستخرج المعلومات الرئيسية ويصنفها تلقائيًا؛ دعم البحث في النص الكامل       |
+|  9   | منصة القيادة لحالات الطوارئ العامة والجدولة الذكية لموارد الإنقاذ | جمع معلومات الحدث، LLM يولد خطة الاستجابة للطوارئ؛ خوارزمية تحسين جدولة الموارد                 |
+|  10  | نظام مراقبة شبكي وتتبع دقيق لتلوث الهواء البيئي       | جمع بيانات مستشعرات جودة الهواء، نماذج الرؤية الحاسوبية (CV) تتعرف على مصادر التلوث؛ LLM يحلل اتجاهات التلوث ويتتبع مصادره    |
+
+## 11. الشؤون القانونية وإدارة العقود
+
+تركز سيناريوهات الشؤون القانونية على تحسين كفاءة الخدمات القانونية وإدارة الامتثال. تشمل التطبيقات الشائعة مراجعة العقود، وتحليل القضايا، ومراقبة اللوائح، وتوليد المستندات القانونية، مما يوفر أدوات ذكية لدعم المتخصصين في المجال القانوني.
+
+| الرقم | اسم سيناريو التطبيق                                             | مرجع التنفيذ                                                         |
+| :--: | -------------------------------------------------------- | ---------------------------------------------------------------- |
+|  1   | وكيل "البحث عن الأخطاء" بنقرة واحدة لمخاطر وثغرات العقود                              | التحليل المهيكل لنص العقد، LLM يتعرف على المشاكل المحتملة مقابل قائمة المخاطر؛ وضع علامات على البنود عالية المخاطر |
+|  2   | منصة مراجعة الامتثال وتقديم توصيات التعديل طوال دورة حياة عقود الشركة               | مقارنة بنود العقد بقاعدة البيانات القانونية، LLM يولد تقرير مراجعة الامتثال؛ تتبع توصيات التعديل         |
+|  3   | مستشار تقييم ذكي بنسبة فوز القضايا المماثلة عبر AI                           | استخراج خصائص القضية، البحث والمطابقة للقضايا المماثلة؛ LLM يحلل العوامل المؤثرة في نسبة الفوز                 |
+|  4   | رادار المراقبة في الوقت الفعلي لتغييرات القوانين واللوائح وتحليل الأثر على الأعمال                   | التحديث الفعلي لقاعدة بيانات القوانين واللوائح، LLM يحلل محتوى التغييرات ويقيّم الأثر على الأعمال؛ دفع تنبيهات مبكرة |
+|  5   | أداة إنشاء مسودة خطاب المحامي تلقائياً عبر AIGC                                 | إدخال بيانات الوقائع، يقوم LLM بإنشاء قالب خطاب محامي موحد؛ فحص العناصر والتحقق من الامتثال         |
+|  6   | جهاز تسجيل لتفريغ تسجيلات الجلسات في الوقت الفعلي واستخراج نقاط النزاع تلقائياً               | تفريغ تسجيلات المحكمة عبر ASR، يقوم LLM باستخراج نقاط النزاع والحجج الرئيسية؛ وضع علامات زمنية        |
+|  7   | نظام مراقبة تلقائية لمخالفات الملكية الفكرية عبر الإنترنت وجمع الأدلة عبر البلوك تشين             | مراقبة المخالفات على منصات التجارة الإلكترونية ووسائل التواصل الاجتماعي؛ جمع وحفظ أدلة المخالفات تلقائياً                 |
+|   8   | Agent مبني على LLM للتحقق من اتساق البيانات الرئيسية في نشرة إصدار الاكتتاب العام وتحذير المخاطر | مقارنة بيانات الفصول المتعددة في نشرة الإصدار، يتعرف LLM على التناقضات والشذوذ في البيانات؛ وضع علامات المخاطر         |
+|  9   | إضافة "ترجمة" البنود القانونية المعقدة إلى لغة مبسطة                     | تحديد النص القانوني، يقوم LLM بإنشاء شرح سهل الفهم                             |
+|  10  | نظام فرز سلسلة الأدلة في القضايا ذكياً وعرضها بشكل مرئي                       | رفع مواد الأدلة، يقوم LLM بتحليل العلاقات بين الأدلة والجدول الزمني                           |
+
+## 12. خدمات السفر والتنقل
+
+تسعى سيناريوهات السفر والتنقل إلى تحسين تجربة السفر وتسهيل الخدمات. تشمل التطبيقات الأساسية التخطيط الذكي للرحلات، والتنبؤ بالأسعار، والجولات الافتراضية، وخدمات الترجمة، مما يجعل السفر أكثر سهولة ومتعة.
+
+| الرقم | اسم سيناريو التطبيق                                 | مرجع التنفيذ                                                                            |
+| :--: | -------------------------------------------- | ----------------------------------------------------------------------------------- |
+|  1   | مولد دليل رحلات تلقائي للمسافرين الكسالى مبني على AIGC                   | إدخال تفضيلات المستخدم (عدد الأيام، الميزانية، الاهتمامات)، يقوم LLM بإنشاء جدول الرحلة اليومي؛ تقوم API المعالم السياحية بالحصول على أوقات العمل وتذاكر الدخول |
+|  2   | روبوت للتنبؤ باتجاه أسعار تذاكر الطيران والفنادق عبر الإنترنت وقفل أقل سعر تلقائياً | جمع بيانات أسعار OTA، نماذج ML للتنبؤ باتجاهات الأسعار؛ تنبيهات مراقبة الأسعار                                |
+|  3   | مستشار لإعادة جدولة الرحلات بين شركات الطيران واقتراح خطط طوارئ بعد إلغاء الرحلات | مراقبة حالة الرحلات، يقوم LLM بتحليل خطط الرحلات البديلة؛ مقارنة أسعار شركات الطيران المتعددة                                      |
+|  4   | نظام فحص مسبق ذكي لمستندات التأشيرة ومساعد تعبئة النماذج تلقائياً         | التقاط صور المستندات ورفعها، التعرف على المعلومات عبر OCR والتحقق من اكتمالها؛ التعبئة التلقائية للنماذج                                  |
+|  5   | مترجم صوتي في الوقت الفعلي للسفر إلى الخارج ومترجم القوائم بصرياً         | نموذج ترجمة صوتية بدون اتصال، التعرف على صور القوائم عبر OCR وترجمتها                                           |
+|  6   | محلل دليل "تجنب الفخاخ" للفنادق مبني على تقييمات حقيقية من البيانات الضخمة     | جمع بيانات تقييمات الفنادق، يقوم LLM باستخراج الكلمات المفتاحية للتقييمات الإيجابية والسلبية                                          |
+|  7   | منصة تفاعلية للمعاينة الغامرة عبر VR للوجهات والاختيار الافتراضي للغرف       | التقاط صور بانورامية بزاوية 360 درجة، تقنية VR لتحقيق المعاينة الغامرة؛ جولة افتراضية في الغرفة                                 |
+|  8   | مساعد لإنشاء يوميات سفر جميلة ونصوص لمنشورات وسائل التواصل الاجتماعي تلقائياً من آثار الرحلة       | استخراج معلومات الوقت والموقع من الصور، يقوم LLM بإنشاء نصوص اليوميات؛ إنشاء قوالب منسقة                                |
+|  9   | منصة إدارة جمع فواتير سفر العمل تلقائياً وتعويضات الامتثال       | ربط API منصة سفر العمل، جمع معلومات الفواتير تلقائيا؛ التحقق من الامتثال                                       |
+|  10  | تنقل ذكي وتنبؤ باختناق حركة المرور في مناطق الجذب في الوقت الفعلي وتخطيط مسارات لتجنب أوقات الذروة   | جمع بيانات حركة المرور في مناطق الجذب، نماذج ML للتنبؤ بأوقات الذروة؛ توصيات لتجنب أوقات الزحام                                     |
+
+## 13. الرفقة العاطفية
+
+تركز سيناريوهات الرفقة العاطفية على الصحة النفسية والراحة العاطفية. تشمل التطبيقات النموذجية الرفيق الافتراضي، والاستشارات العاطفية، والتدريب المعرفي، والتوجيه النفسي، مما يوفر للمستخدمين رفقة ودعماً على مدار الساعة.
+
+| الرقم | اسم سيناريو التطبيق                                 | مرجع التنفيذ                                                    |
+| :--: | -------------------------------------------- | ----------------------------------------------------------- |
+|  1   | رفيق افتراضي لمرافقة عميقة على مدار 24 ساعة مبني على نموذج LLM كبير    | نظام الذاكرة لتخزين سجل المحادثات، يقوم LLM بإنشاء ردود مخصصة؛ وحدة الدعم العاطفي      |
+|  2   | مستشار AI للتوجيه النفسي والتعرف على المشاعر متعدد الوسائط             | تحليل نبرة الصوت + التعرف على المشاعر النصية، يقوم LLM بإنشاء اقتراحات التوجيه؛ إنذار التدخل في الأزمات |
+|  3   | إنسان رقمي للتدريب المعرفي واستعادة الذاكرة لكبار السن المصابين بمرض الزهايمر | تدريب الألعاب المعرفية (الذاكرة، الحساب، اللغة)؛ تحفيز استرجاع الذكريات عبر الصور القديمة/الأغاني القديمة   |
+|  4   | مدرب AIGC لمحاكاة التدريبات الاجتماعية للأشخاص المصابين بالرهاب الاجتماعي             | محاكاة سيناريوهات اجتماعية افتراضية، يتقمص LLM أدواراً مختلفة؛ اقتراحات للمهارات الاجتماعية            |
+|  5   | آلة تخصيص قصص ما قبل النوم للأطفال عبر AI التوليدي                 | يدخل الوالدان الموضوع والتفضيلات، يقوم LLM بإنشاء قصة مخصصة؛ إنشاء موسيقى خلفية          |
+|  6   | استعادة الحياة الرقمية للمتوفين ونظام حوار LLM عبر الزمان والمكان        | تدريب نموذج مخصص باستخدام بيانات ما قبل الوفاة (الصوت، النص)؛ إنشاء حوار الذكريات          |
+|  7   | روبوت دردشة متطابق للشخصية ومتعاطف مبني على AI لبيانات MBTI | إدخال نتائج اختبار MBTI، يقوم LLM بإنشاء تحليل الشخصية وردود متعاطفة؛ توصيات تطابق الشخصية |
+|  8   | مراقبة مزاج على مدار الساعة ومساعد AI لتحفيز المشاعر الإيجابية         | تسجيل حالة المزاج يومياً، يقوم LLM بتحليل الاتجاهات وإنشاء محتوى تحفيزي؛ دفع تذكيرات إيجابية  |
+|  9   | منفذ AI آمن الخصوصية للمراهقين للفضفضة                 | منفذ فضفضة مجهول، يوفر LLM الاستماع والنصائح؛ إنذار الكلمات الحساسة                |
+|  10  | نظام تربية حيوان أليف افتراضي AI يتمتع بقدرة التطور الذاتي       | تدريب نموذج شخصية الحيوان الأليف، التطور والنمو من خلال التفاعل والحوار؛ نظام الأزياء الافتراضية            |
+
+## 14. الترفيه والتسلية
+
+تسعى سيناريوهات الترفيه والتسلية إلى توفير تجارب ترفيهية رقمية غنية. تشمل التطبيقات الشائعة اتخاذ القرارات الذكية لـ NPC في الألعاب، والمساعدة في ألعاب الغموض، وإنشاء المحتوى، ومعالجة الصوت والفيديو، لتلبية الاحتياجات الترفيهية المتنوعة للمستخدمين.
+
+| الرقم | اسم سيناريو التطبيق                                 | مرجع التنفيذ                                                  |
+| :--: | -------------------------------------------- | --------------------------------------------------------- |
+|  1   | محرك قرارات مستقلة لـ NPC في ألعاب العالم المفتوح مبني على LLM | دمج شجرة سلوك NPC مع قرارات LLM، نظام الحوار لإنشاء تفاعلات مخصصة؛ محرك السلوك |
+|  2   | أداة مساعدة لاستنتاج حبكات ألعاب الغموض الغامرة عبر AIGC والتحكم في سير اللعبة لـ DM | اختيارات اللاعب تؤدي إلى تشعبات في الحبكة، يقوم LLM بإنشاء منطق الاستنتاج؛ إنشاء بطاقات الأدلة تلقائياً    |
+|  3   | مولّد تعديل النهايات التفاعلية للروايات                     | اختيارات القارئ تؤثر على مسار الحبكة، LLM يولّد فروع نهايات متعددة                |
+|  4   | محطة عمل AIGC التلقائية للنمذجة ثلاثية الأبعاد لشخصيات الأنمي       | وصف نصي لتوليد رسم تخطيطي للشخصية، أدوات نمذجة ثلاثية الأبعاد تلقائية؛ عرض الخامات والمواد   |
+|  5   | تحليل الرؤية الحاسوبية CV لمعارك الرياضات الإلكترونية ومعقب ذكي بالذكاء الاصطناعي         | تحليل لحظي لمشاهد اللعبة، التعرف على اللحظات المفتاحية؛ LLM يولّد نص التعليق          |
+|  6   | محرك خوارزمية توصية المحتوى الفكري المخصص                   | ملف اهتمام المستخدم، توصية مطابقة للمحتوى الفكري                            |
+|  7   | برنامج تصحيح الصوت بالذكاء الاصطناعي وتجميل صوت الكاريوكي               | معالجة تقليل ضوضاء الصوت وتحسين الصوت البشري؛ خوارزمية تصحيح صوت بالذكاء الاصطناعي                       |
+|  8   | أداة استخراج ومونتاج بالذكاء الاصطناعي لحصريات قصة شخصية في أعمال سينمائية وتلفزيونية         | تحليل محتوى الفيديو، استخراج المقاطع المتعلقة بالشخصية؛ مونتاج تلقائي وتوليد              |
+|  9   | نظام توليد تلقائي للكتب الصوتية بتركيب صوت TTS متعدد الشخصيات        | توزيع الأدوار النصية، توليد نبرة صوت مخصصة؛ إضافة موسيقى خلفية ومؤثرات صوتية          |
+|  10  | مدرب مراجعة مبارزات التعلم المعزز للألعاب الورقية ولعب الطاولة               | تحليل وضع اللعب، محاكاة خصم بالذكاء الاصطناعي؛ توليد اقتراحات المراجعة                   |
+
+## 15. خدمات التجارة الإلكترونية
+
+تركز سيناريوهات خدمات التجارة الإلكترونية على كفاءة العمليات وتحسين معدلات التحويل. تشمل التطبيقات الأساسية توليد محتوى المنتجات، البث المباشر للبيع، خدمة العملاء، تحليل الأسعار، وغيرها، مما يساعد التجار على تحقيق عمليات ذكية.
+
+| الرقم | اسم سيناريو التطبيق                                  | مرجع التنفيذ                                                   |
+| :--: | --------------------------------------------- | ---------------------------------------------------------- |
+|  1   | أداة إنتاج دفعة لصفحات تفاصيل منتجات AIGC بمعدل تحويل عالي          | إدخال معلومات المنتج، LLM يولّد نصوص نقاط البيع وأوصاف المشاهد؛ توليد صور خلفية       |
+|  2   | مصنع توليد فيديو عرض وتجربة ارتداء ذكية بالذكاء الاصطناعي لموديلات الأزياء الافتراضية    | معالجة صور الملابس المسطحة، توليد تأثير ارتداء الموديل الافتراضي؛ فيديو عرض متعدد الزوايا       |
+|  3   | مساعد ترجمة وتلميع محلي متعدد اللغات LLM للتجارة الإلكترونية عبر الحدود       | ترجمة متعددة اللغات لوصف المنتج، تلميع وتكييف ثقافي؛ واجهة نشر متعددة المنصات           |
+|  4   | روبوت تحليل مشاعر العملاء وردود ذكية قائم على NLP       | تحليل مشاعر محادثات الاستشارات، توليد ردود تهدئة تلقائية؛ تصنيف المراجعات الإيجابية والسلبية           |
+|  5   | نظام بث مباشر للبيع بالتجارة الإلكترونية بشخصية رقمية AIGC على مدار 24 ساعة         | صورة شخصية رقمية + توليد نصوص لحظية، استدعاء معلومات المنتج لحظياً؛ ردود تفاعل على التعليقات  |
+|  6   | إضافة مقارنة أسعار وتوقعات الاتجاهات بالذكاء الاصطناعي للمنتجات نفسها عبر الإنترنت            | جلب أسعار منصات التجارة الإلكترونية، عرض رسوم بيانية للمقارنة؛ توقع اتجاهات الأسعار               |
+|  7   | منصة فرز ذكي بالذكاء الاصطناعي لصور مشتريات العملاء وتوليف فيديو قصير        | تقييم جودة صور مشتريات العملاء، توصية تلقائية بالمحتوى عالي الجودة؛ توليف قوالب فيديو قصير       |
+|  8   | تحليل صوتي لمحادثات المبيعات اللحظية وتوصية بنصوص حديث ذهبية قائمة على LLM | نسخ ASR للمكالمات، فحص امتثال النصوص اللحظي؛ توصية بالنصوص                  |
+|  9   | محرك رؤى اتجاهات السوق الشائعة وتوقع المنتجات الرائجة بالذكاء الاصطناعي            | جمع وتحليل بيانات وسائل التواصل الاجتماعي والتجارة الإلكترونية، LLM يستخلص اتجاهات النقاط الساخنة؛ توصيات اختيار المنتجات |
+|  10  | نظام تجميع ملفات تعريف مستخدمي حركة المرور الخاصة وتشغيل دقيق بالذكاء الاصطناعي      | تحليل تجميع بيانات سلوك المستخدم، توليد علامات ملف التعريف؛ تشغيل تسويق آلي         |
+
+## 16. الطاقة
+
+تسعى سيناريوهات الطاقة إلى تحقيق الإدارة الذكية والتحول الأخضر في قطاع الطاقة. تشمل التطبيقات النموذجية تحليل استهلاك الكهرباء، فحص المعدات، حساب انبعاثات الكربون، تحسين الإرسال، وغيرها، لدفع التشغيل الفعال لأنظمة الطاقة.
+
+| الرقم | اسم سيناريو التطبيق                                     | مرجع التنفيذ                                               |
+| :--: | ------------------------------------------------ | ------------------------------------------------------ |
+|  1   | محلل سلوك استهلاك الكهرباء المنزلية بالذكاء الاصطناعي ومستشار استراتيجيات توفير الطاقة               | جمع بيانات العدادات الذكية، تحليل أنماط الاستهلاك؛ LLM يولّد توصيات توفير الطاقة       |
+|  2   | نظام التعرف البصري CV بالطائرات بدون طيار لعيوب الوحدات الكهروضوئية               | تصوير تفتيش بالطائرات بدون طيار، تحليل صور الأشعة تحت الحمراء الحرارية؛ تمييز واكتشاف العيوب           |
+|  3   | وكيل استراتيجية التداول الآلي للطاقة وتوقع اتجاه أسعار الكهرباء الفورية بالذكاء الاصطناعي | جمع بيانات سوق الكهرباء، نموذج توقع الأسعار؛ توليد الاستراتيجيات وتنفيذ التداول     |
+|  4   | نظام إنذار مبكر لخطر الانفجار الحراري وفحص صحة بطاريات التخزين غير المدمر بالذكاء الاصطناعي   | مراقبة بيانات تشغيل البطارية، نموذج تقييم الصحة؛ دفع إنذارات المخاطر         |
+|  5   | مساعد حساب تلقائي لانبعاثات الكربون عبر السلسلة الكاملة للمؤسسة وتوليد تقارير ESG بالذكاء الاصطناعي  | جمع بيانات استهلاك الطاقة، حساب معاملات انبعاثات الكربون؛ توليد تلقائي لتقارير ESG     |
+|  6   | نظام قيادة وتوجيه الطوارئ وتوقع أحمال الطاقة في ظروف الطقس القاسية بالذكاء الاصطناعي       | ربط بيانات الأرصاد الجوية، نموذج توقع الأحمال؛ توليد استراتيجيات الإرسال               |
+|  7   | حارس إنذار وتعرف بالفيديو بالذكاء الاصطناعي للسلوكيات المخالفة في محطات الوقود             | تحليل مراقبة الفيديو، اكتشاف السلوكيات المخالفة (استخدام الهاتف، التدخين، إلخ)؛ دفع الإنذارات |
+|  8   | نظام مراقبة وتحديد دقيق لتسربات خطوط أنابيب النفط والغاز الطويلة بالموجات الصوتية بالذكاء الاصطناعي       | جمع بيانات مستشعرات الموجات الصوتية، نموذج كشف التسرب؛ حساب خوارزمية التحديد         |
+|  9   | نظام تجميع موارد محطات الطاقة الافتراضية واتخاذ قرارات تداول الكهرباء بالذكاء الاصطناعي           | ربط الموارد الموزعة، تحسين الإرسال والتجميع؛ تنفيذ استراتيجيات التداول             |
+|  10  | تتبع مواقع العاملين في المناجم بالذكاء الاصطناعي وإنذار اختراق المناطق الخطرة           | تحديد المواقع عبر UWB/البلوتوث، تتبع مسارات الأفراد؛ سياج إلكتروني للمناطق الخطرة           |
+
+## 17. الصوت والفيديو
+
+تركز سيناريوهات الصوت والفيديو على إنتاج المحتوى ومعالجة الوسائط. تشمل التطبيقات الشائعة تحرير الفيديو، تركيب الكلام، توليد الترجمة النصية، ترميم الفيديو، وغيرها، لتحسين كفاءة إنتاج محتوى الصوت والفيديو وجودته.
+
+| الرقم | اسم سيناريو التطبيق                                 | مرجع التنفيذ                                           |
+| :--: | -------------------------------------------- | -------------------------------------------------- |
+|  1   | أداة تعرف تلقائي بالذكاء الاصطناعي للمقاطع المميزة في الفيديوهات الطويلة ومونتاج تلقائي للفيديوهات القصيرة   | تحليل محتوى الفيديو، التعرف على الإطارات الرئيسية؛ مونتاج تلقائي للمقاطع المميزة         |
+|  2   | مساعد فصل ذكي لضوضاء خلفية الفيديو وتحسين الصوت البشري بالذكاء الاصطناعي       | نموذج فصل الصوت، إزالة ضوضاء الخلفية؛ معالجة تحسين الصوت البشري           |
+|  3   | محطة عمل ترميم بدقة 4K فائقة وتلوين ذكي بالذكاء الاصطناعي للمواد القديمة     | نموذج دقة فيديو فائقة، ترميم جودة المواد القديمة؛ تلوين تلقائي بالذكاء الاصطناعي        |
+|  4   | نظام تحكم بالأداء العاطفي ودبلجة TTS بجودة صوت بشري حقيقي من النص          | نموذج TTS متعدد النبرات، توليد مع تحكم عاطفي؛ تصدير الصوت            |
+|  5   | أداة تعرف تلقائي ASR لصوت الفيديو وتوليد ترجمة نصية ثنائية اللغة      | التعرف على الكلام لتوليد الترجمة النصية، ترجمة متعددة اللغات؛ تراكب الترجمة النصية ثنائية اللغة         |
+|  6   | محرك المسح الذكي بالذكاء الاصطناعي للأجسام غير المرغوب فيها في إطارات الفيديو             | تتبع الهدف في الفيديو، إزالة وإصلاح الأجسام؛ معالجة الاتساق بين الإطارات         |
+|  7   | آلة التلحين التلقائي AIGC لموسيقى خلفية خالية من حقوق الطبع والنشر               | نموذج توليد الموسيقى، التحكم في نمط المزاج والمشاعر؛ فحص حقوق الطبع والنشر               |
+|  8   | برنامج استنساخ نبرة صوت شخصيات معينة وتحويل الصوت بالذكاء الاصطناعي           | تدريب نموذج نبرة الصوت باستخدام عينات صوتية قليلة؛ معالجة تحويل الصوت                 |
+|  9   | منصة تحويل النصوص إلى لوحات قصصية وإنشاء فيديوهات المعاينة الديناميكية بالذكاء الاصطناعي | تحليل النص لإنشاء لوحات قصصية، توليد فيديو معاينة بالذكاء الاصطناعي                  |
+|  10  | مساعد النسخ الذكي بالذكاء الاصطناعي لتسجيلات الاجتماعات واستخراج المهام الأساسية       | فصل وتفريغ صوت متعدد الأشخاص في الاجتماعات، استخراج المهام باستخدام LLM؛ وضع علامات زمنية |
+
+## 18. التسويق بالذكاء الاصطناعي
+
+تسعى سيناريوهات التسويق بالذكاء الاصطناعي إلى تعزيز كفاءة التسويق والإنتاج الإبداعي. تشمل التطبيقات الأساسية إنشاء النصوص، وتصميم الملصقات، وتتبع المواضيع الرائجة، وتحليل المنافسين، مما يساعد الشركات على تحقيق تسويق دقيق ونشر العلامة التجارية.
+
+| الرقم | اسم سيناريو التطبيق                               | مرجع التنفيذ                                         |
+| :--: | ------------------------------------------ | ------------------------------------------------ |
+|  1   | محرك الكتابة التلقائية AIGC للمنشورات الرائجة على Xiaohongshu           | إدخال الموضوع، توليد نصوص ترويجية باستخدام LLM؛ تحسين الرموز التعبيرية والوسوم |
+|  2   | أداة التنسيق الذكي لملصقات التسويق وتكييفها مع أحجام متعددة       | إدخال النص، المطابقة الذكية لقوالب الملصقات والتصدير بأحجام متعددة           |
+|  3   | منصة الإبداع AIGC لتصميم شعارات العلامات التجارية وبناء نظام الهوية البصرية | إدخال كلمات مفتاحية للعلامة التجارية، توليد أفكار الشعار؛ إنشاء مواصفات الهوية البصرية       |
+|  4   | مساعد تتبع المواضيع الرائجة على الإنترنت وتوليد أفكار التسويق المستندة إليها     | جمع بيانات المواضيع الرائجة، تحليل زوايا التسويق باستخدام LLM؛ إنشاء خطط إبداعية     |
+|  5   | مراقبة العائد على الاستثمار للإعلانات في الوقت الفعلي ومدير المزايدة الذكي بميزانية الذكاء الاصطناعي    | ربط بيانات منصات الإعلانات، نموذج تحليل الأداء؛ تحسين استراتيجيات المزايدة     |
+|  6   | محلل استراتيجيات التسويق التنافسية بعمق ومولد التقارير الأسبوعية بالذكاء الاصطناعي       | جمع وتحليل محتوى المنافسين، استخراج الاستراتيجيات؛ إنشاء تقارير أسبوعية تلقائياً         |
+|  7   | توزيع الكلمات المفتاحية لمحركات البحث بالذكاء الاصطناعي والكتابة المجمعة لمقالات جذب الزيارات   | تحليل الكلمات المفتاحية، إنشاء مقالات مجمعة؛ اقتراحات تحسين SEO           |
+|  8   | خبير كتابة رسائل البريد الإلكتروني التسويقية المخصصة لآلاف الأشخاص بالذكاء الاصطناعي         | بيانات ملف تعريف المستخدم، إنشاء محتوى مخصص؛ اختبار A/B           |
+|  9   | رادار الإنذار المبكر بالذكاء الاصطناعي لأزمات الرأي العام ومراقبة السمعة عبر الإنترنت     | جمع بيانات الرأي العام عبر الإنترنت، تحليل المشاعر؛ دفع تنبيهات الأزمات         |
+|  10  | مساعد الإبداع AIGC لنصوص الفيديو القصير وتوجيه اللوحات القصصية     | إدخال الموضوع، إنشاء النصوص واللوحات القصصية؛ إرشادات واقتراحات التصوير           |
+
+## 19. الذكاء المعتمد على البيانات
+
+تركز سيناريوهات الذكاء المعتمد على البيانات على تحليل البيانات واستخراج القيمة. تشمل التطبيقات النموذجية الاستعلام بلغة طبيعية، والتوليد المرئي، وحوكمة البيانات، وبناء رسوم بيانية للمعلومات، مما يساعد الشركات على تحقيق دعم القرارات المبنية على البيانات.
+
+| الرقم | اسم سيناريو التطبيق                           | مرجع التنفيذ                                                     |
+| :--: | -------------------------------------- | ------------------------------------------------------------ |
+|  1   | محرك استعلام البيانات بلغة طبيعية يعتمد على Text-to-SQL    | تحويل اللغة الطبيعية إلى استعلامات SQL، عرض النتائج بشكل مرئي                      |
+|  2   | BI محادثي: إنشاء مخططات مرئية بجملة واحدة        | وصف متطلبات البيانات، إنشاء مخططات تلقائياً؛ دعم التبديل بين أنواع المخططات المتعددة               |
+|  3   | أداة التعرف على جداول Excel بتحويل لقطة الشاشة بنقرة واحدة          | بعد رفع لقطة الشاشة، يقوم VLM بالتعرف على بنية الجدول والبيانات؛ تصدير كملف Excel        |
+|  4   | أداة سحرية للتعرف بالذكاء الاصطناعي لتحويل الصور ولقطات الشاشة إلى جداول Excel    | التعرف على بنية الجدول عبر OCR للصور، تصدير البيانات كملف Excel                      |
+|  5   | البناء الآلي لرسوم بيانية للمعلومات من البيانات غير المتجانسة متعددة المصادر         | ربط مصادر بيانات متعددة، استخراج الكيانات والعلاقات؛ التخزين في قاعدة بيانات رسوم بيانية                   |
+|  6   | مساعد التفسير الذكي لتقارير البيانات وتحليل الاتجاهات         | رفع صورة تقرير البيانات أو إدخال البيانات، يقوم VLM بتفسير محتوى المخطط وتحليل الاتجاهات       |
+|  7   | مساعد التفسير الذكي لهيكل جداول قاعدة البيانات ومولد أمثلة الاستعلامات | إدخال اسم الجدول أو وصف الحقل، يقوم LLM بإنشاء وصف إنشاء الجدول واستعلامات SQL كمثال           |
+|  8   | التوافق الذكي للبيانات الرئيسية للشركة وحوكمة إلغاء التكرار بالذكاء الاصطناعي       | مطابقة البيانات الرئيسية متعددة المصادر، تحديد السجلات المكررة؛ تكوين قواعد الدمج                   |
+|  9   | أداة تحويل مستندات متطلبات البيانات ذكيًا إلى حالات اختبار                 | إدخال وصف متطلبات البيانات، يقوم LLM بإنشاء سيناريوهات الاختبار وحالات التحقق                 |
+|  10  | مساعد الإجابة الذكي على أسئلة تعريف مقاييس البيانات               | بناء قاعدة معرفية بناءً على مستندات تعريف المؤشرات، يجيب LLM على أسئلة حول تعريفات المؤشرات ومنطق الحساب وغيرها |
diff --git a/docs/ar-sa/stage-1/appendix-jobs-to-be-done/index.md b/docs/ar-sa/stage-1/appendix-jobs-to-be-done/index.md
new file mode 100644
index 0000000..992912a
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-jobs-to-be-done/index.md
@@ -0,0 +1,494 @@
+---
+title: 'استخدم Jobs to Be Done للعثور على ما يريد المستخدم إنجازه حقًا'
+description: 'مقالة تمهيدية عن Jobs to Be Done للقراء بدون خبرة سابقة. فهم أن المستخدم لا يشتري الوظائف، بل "يوظف" منتجك في سيناريو محدد لإنجاز تقدم، وتعلم استخدام JTBD لتفكيك اتجاه المنتج وأسئلة المقابلة وتعليمات AI.'
+---
+
+<script setup>
+const duration = 'حوالي <strong>1.5 ساعة</strong>'
+</script>
+
+# استخدم Jobs to Be Done للعثور على ما يريد المستخدم إنجازه حقًا
+
+<a id="top-jtbd"></a>
+
+## دليل هذا الفصل
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['JTBD', 'احتياجات المستخدم', 'تفكير المنتج', 'رؤى المتطلبات']"
+  coreOutput="جملة JTBD واحدة تشبه الاحتياج الحقيقي"
+  expectedOutput="القدرة على تضييق الفكرة الغامضة إلى سيناريو مستخدم واتجاه MVP أكثر تحديدًا"
+>
+
+العديد من الأشخاص عند بداية صنع المنتج، الخطأ الأكثر شيوعًا هو التركيز بالكامل على "ما الوظائف التي سأصنعها". ترى الآخرين لديهم تصنيف ذكي، فتريد إضافته؛ ترى الآخرين لديهم تلخيص تلقائي، فتريد توصيله؛ ترى الآخرين صنعوا Agent ووسائط متعددة وسير عمل، فتشعر بأنك لا يجب أن تكون أقل.
+
+لكن في الواقع، نادرًا ما يقرر المستخدم استخدام منتج لأن "اسم الوظيفة رائع". هم في لحظة محددة، يريدون دفع شيء ما خطوة إلى الأمام، فيقومون مؤقتًا بـ "توظيف" أداة أو خدمة أو حتى شخص، لمساعدتهم في إكمال هذه الخطوة.
+
+هذا بالضبط ما يريد إطار **Jobs to Be Done (JTBD)** تذكيرنا به: **المستخدم لا يشتري الوظائف نفسها، بل يوظف نوعًا من الحلول لمساعدة نفسه في إنجاز تقدم.**
+
+هذه المقالة ستأخذك بلغة مباشرة قدر الإمكان، من الصفر لفهم JTBD، وتحويله إلى أداة تحليل يمكنك استخدامها مباشرة عند صنع تطبيقات AI.
+
+</ChapterIntroduction>
+
+::: info الحد الأدنى من SOP
+**الهدف**: بعد القراءة، ستكون أكثر وضوحًا حول كيفية تضييق فكرة غامضة إلى احتياج بسيناريو مستخدم حقيقي، بدلاً من الاحتفاظ فقط بمجموعة من أسماء الوظائف في ذهنك.
+
+**خطوات العمل**: اكتب فكرة غامضة واحدة، ابحث عن 3 مستخدمين محتملين وتحدث معهم عن "كيف تعاملوا مع الأمر آخر مرة"، ثم نظّمها في جملة JTBD واحدة.
+
+**النتيجة**: ستحصل على فرضية احتياج أوضح، وتعرف ما يجب حله أولاً في النسخة الأولى.
+
+**روابط سريعة**: [ما هو JTBD](#jtbd-what) · [صيغة الجملة الواحدة](#jtbd-formula) · [كيف يساعدك AI](#jtbd-ai)
+:::
+
+## ما ستتعلمه في هذا الفصل
+
+1. ما هو Jobs to Be Done، ولماذا هو أقرب إلى الاحتياجات الحقيقية من "عصف الوظائف"
+2. كيف نفرق بين "الوظيفة التي يقول المستخدم أنه يريدها" و"ما يريد المستخدم إنجازه حقًا"
+3. كيف تستخدم قالبًا بسيطًا لتفكيك فكرة غامضة إلى سيناريو ومحفز وعقبة ومعيار نجاح
+4. كيفية استخدام JTBD في منتجات AI وأسئلة المقابلة وتنظيم التعليمات
+
+<a id="jtbd-what"></a>
+## [1. ما هو Jobs to Be Done](#top-jtbd)
+
+يُختصر Jobs to Be Done غالبًا بـ **JTBD**. الفكرة الأساسية وراءه مرتبطة بالتعبير الكلاسيكي الذي روجته فرقة Clayton Christensen: **المستخدمون سيوظفون منتجًا معينًا لإنجاز مهمة.**
+
+"المهمة" هنا ليست إجراءً سطحيًا في قائمة المهام، بل نوع من **التقدم** يأمل المستخدم أن يحدث في حالته. مثلاً:
+
+- ليس "أريد أداة AI لمحاضر الاجتماعات"، بل "أريد خلال 10 دقائق بعد الاجتماع ترتيب النقاط الرئيسية والمهام والمسؤولين بوضوح، بدلاً من الاعتماد على الذاكرة لاستكمال الملاحظات"
+- ليس "أريد تطبيقًا لتتبع المصاريف"، بل "أريد أن أعرف أين يذهب مالي حقًا، حتى لا أشعر بالقلق في نهاية الشهر"
+- ليس "أريد مُحسّنًا للسيرة الذاتية"، بل "أريد تقديم سيرة ذاتية لائقة بثقة أكبر، ولا أريد الشك في كل مرة أقدم فيها أن كتابتي سيئة للغاية"
+
+لذا، **JTBD لا يركز على شكل المنتج، بل على سبب احتياج المستخدم له في هذه اللحظة.**
+
+هذا هو السبب أيضًا في أن العديد من المنتجات التي تبدو مختلفة تتنافس في الواقع على نفس الوظيفة. المستخدم يريد "ألا يكون الطريق إلى العمل مملًا"، والأشياء القابلة للتسكين قد تكون فيديوهات قصيرة أو بودكاست أو ألعاب أو دردشة أو حتى الغفوة. المستخدم يريد "فهم ملف PDF طويل بسرعة"، والأشياء القابلة للتسكين قد تكون أداة تلخيص AI أو متدرب أو زميل أو القراءة بصعوبة بنفسه أو عدم القراءة أبدًا.
+
+بمجرد أن تنظر إلى المشكلة بهذه الزاوية، ستكتشف أن منافسك الحقيقي غالبًا ليس "تطبيقًا آخر يشبهك"، بل **جميع البدائل المقبولة للمستخدم حاليًا**.
+
+## 2. ما الفرق بين JTBD وصورة المستخدم وقائمة الوظائف
+
+العديد من المبتدئين عند بداية تحليل المتطلبات، يكتبون أولاً صورة المستخدم: 25 سنة، أنثى، مدينة من الدرجة الأولى، موظفة مكتبية، تحب أدوات الكفاءة، مستعدة لتجربة منتجات جديدة. هذه المعلومات لا يمكن القول إنها غير مفيدة تمامًا، لكنها عادةً **لا تكفي لتفسير سبب اتخاذ الشخص إجراءً في هذه اللحظة.**
+
+JTBD يهتم أكثر بالأسئلة التالية:
+
+- في أي سيناريو قرر البحث عن حل
+- ما الذي تعثر فيه بالضبط في ذلك الوقت
+- ما الشيء الذي يريد دفعه إلى الخطوة التالية
+- بأي طريقة غير فعالة يتدبر الأمر حاليًا
+- إذا تم حل الأمر جيدًا، أي نتيجة ستجعله يشعر أن "الأمر يستحق"
+
+بعبارة أخرى، **صورة المستخدم أشبه بـ "من هذا الشخص تقريبًا"، بينما JTBD أشبه بـ "ما الذي يريد هذا الشخص إنجازه بالضبط الآن".**
+
+وبالمثل، قائمة الوظائف أيضًا تضلل الناس بسهولة. المستخدم يقول "أريد التصدير إلى Word" و"أريد إعادة كتابة AI" و"أريد الإدخال الصوتي"، كلها تعبيرات سطحية. JTBD سيستمر في السؤال:
+
+- لماذا تحتاج إلى التصدير إلى Word الآن، وليس PDF؟
+- تريد إعادة الكتابة، هل لأن الأسلوب سيء، أم لأنك تحتاج إلى التكيف مع جماهير مختلفة؟
+- تريد الإدخال الصوتي، هل لأنك كسول عن الكتابة، أم لأنك غالبًا ما تمشي أو تقود أو تسجل فورًا بعد الاجتماع؟
+
+في كثير من الأحيان، **الوظيفة هي مجرد ترجمة مؤقتة للوظيفة**. إذا جمعت الوظائف فقط، فمن السهل أن تصنع منتجًا "يضيف كل ما يقوله المستخدم"؛ لكن إذا استطعت رؤية الوظيفة وراء الوظائف، ستكون لديك فرصة أكبر لصنع حل سلس حقًا وتنافسي حقًا.
+
+## 3. مثال يمكن حتى للمبتدئين فهمه
+
+لا تستعجل في التفكير في منتجات AI معقدة، لنبدأ بمثال من الحياة.
+
+لنفترض أن شخصًا لا يلحق بتناول الفطور قبل الخروج في الصباح، فيشتري غالبًا شطيرة وقهوة عند مدخل المترو. ظاهريًا، هو "يشتري" الفطور؛ لكن بالنظر إليه من منظور JTBD، ما يريد إنجازه حقًا قد يكون:
+
+- في صباحات متسرعة، حل وجبة بأقل جهد ذهني
+- ألا يجوع بشكل فظيع قبل الوصول إلى الشركة
+- ألا يعطل إيقاع التنقل بسبب تناول الفطور
+
+في هذه اللحظة، ما يوظفه المستخدم ليس "شطيرة من علامة تجارية ثابتة"، بل حل يمكنه دفع صباحه بسلاسة. إذا كان المتجر المجاور أسرع وأقرب وأكثر استقرارًا، فقد يستبدل خياره فورًا.
+
+نقل هذا المنطق إلى منتجات AI يكون أكثر وضوحًا.
+
+مثلاً، إذا كنت تريد صنع "أداة AI لمحاضر الاجتماعات". إذا توقفت عند مستوى الوظائف فقط، فمن السهل أن تبدأ في التفكير:
+
+- هل يتم دعم رفع الصوت
+- هل يتم توصيل فصل المتحدثين
+- هل يتم التصدير إلى Markdown
+- هل يتم توليد المهام تلقائيًا
+
+كل هذا صحيح، لكنه غير كافٍ. مع JTBD اسأل طبقة أخرى، ما يريد المستخدم إنجازه حقًا قد يكون:
+
+- أريد خلال 10 دقائق بعد الاجتماع، مشاركة نتائج المناقشة مع من لم يحضر
+- أريد استخراج المهام والمسؤولين والمواعيد النهائية بوضوح، بدلاً من جعل الفريق يتعاون بالذاكرة
+- أريد تقليل وقت تنظيم محتوى الاجتماع المتكرر، وتوفير الجهد للقرارات والتقدم
+
+بمجرد توضيح الوظيفة، ستطفو أولويات العديد من الوظائف تلقائيًا. الأهم في النسخة الأولى ربما ليس "دعم 12 تنسيق تصدير"، بل:
+
+- هيكل المحضر يجب أن يكون واضحًا بما فيه الكفاية
+- استخراج المهام يجب أن يكون مستقرًا
+- مشاركة الرابط يجب أن تكون مريحة
+- نتيجة الإخراج يجب أن تجعل المستخدم يجرؤ على إعادة توجيهها للفريق مباشرة
+
+هذه هي قيمة JTBD: **يساعدك على العودة من "ما القدرات التي سأجمعها" إلى "ما التقدم الذي سأساعد المستخدم على تحقيقه".**
+
+## 4. قالب JTBD عملي
+
+إذا كنت مبتدئًا، يمكنك ألا تحاول جعل JTBD أكاديميًا جدًا. أمسك أولاً بأهم 5 عناصر عملية فقط.
+
+### 4.1 السيناريو
+
+في أي لحظة وأي بيئة يتذكر المستخدم هذا المنتج؟
+
+- بعد الاجتماع
+- عندما يطلب المدير مواد بشكل مفاجئ
+- في المساء عند الاستعداد لتقديم السيرة الذاتية
+- في نهاية الشهر عندما يكتشف أن المال لا يكفي مرة أخرى
+
+**الاحتياجات بدون سيناريو عادةً ليست حقيقية بعد.**
+
+### 4.2 المحفز
+
+ما الذي جعله يقرر البحث عن حل فورًا؟
+
+- أن يثقل عليه مستند طويل ولا يعرف من أين يبدأ القراءة
+- غدًا يجب تسليم المواد، واليوم يكتشف أن التنسيق فوضوي
+- للتو سأله المدير عن التقدم، ويدرك أنه لم ينظم بوضوح
+- يريد الاستمرار في التسجيل، لكن الكتابة اليدوية والنسخ والتنظيم كلها مزعجة جدًا
+
+نقطة التحفيز غالبًا ما تحمل مشاعر. هذه المشاعر مهمة، لأنها تحدد سبب اتخاذ المستخدم إجراءً في هذه اللحظة.
+
+### 4.3 التقدم المطلوب إنجازه
+
+لا يريد فقط "القيام بإجراء"، بل يريد دفع نفسه إلى أي حالة جديدة؟
+
+- من الفوضى إلى الوضوح
+- من القلق إلى الطمأنينة
+- من التأجيل إلى البدء
+- من انخفاض الكفاءة إلى السلاسة
+- من عدم القدرة على الشرح إلى القدرة على التسليم المباشر
+
+في هذه الخطوة، كلمة "التقدم" مهمة جدًا. لأن الكثير من الناس لا يشترون الأدوات حقًا، بل يشترون **تغير الحالة**.
+
+### 4.4 البديل الحالي
+
+بدون منتجك، كيف يفعل ذلك؟
+
+- نسخ ولصق يدويًا
+- استخدام Excel أو الملاحظات للتدبير
+- طلب المساعدة من زميل
+- التأجيل وعدم الفعل
+- التبديل بين عدة أدوات
+
+من هو البديل، هو بيئتك التنافسية الحقيقية.
+
+### 4.5 معيار النجاح
+
+كيف يُعرف أن الأمر قد حُل حقًا؟
+
+- الحصول على نتيجة قابلة للمشاركة خلال 10 دقائق
+- عدم الحاجة إلى تعديل كبير قبل الإرسال للآخرين
+- عدم نسيان العناصر أو الأخطاء أو المهام بسهولة
+- معرفة الخطوة التالية من أول استخدام
+
+إذا لم تستطع حتى توضيح "كيف يحكم المستخدم على ما إذا كان الأمر يستحق"، فهذا الاتجاه على الأرجح لم يتم تضييقه جيدًا بعد.
+
+<a id="jtbd-formula"></a>
+## [5. صيغة الجملة الواحدة التي يمكن استخدامها مباشرة](#top-jtbd)
+
+عندما تريد ترتيب اتجاه منتج، يمكنك استخدام هذه الصيغة العملية جدًا:
+
+> عندما __________، أريد __________، لكي أتمكن من __________.  
+> حاليًا لا يمكنني سوى __________ لإنجاز هذا الأمر بالكاد.
+
+مثلاً:
+
+> عندما أنتهي من اجتماع مشروع مليء بالمعلومات، أريد الحصول بسرعة على محضر يتضمن المهام والمسؤولين والمواعيد النهائية، لكي أتمكن من مزامنة الفريق فورًا ودفع التنفيذ.  
+> حاليًا لا يمكنني سوى الاعتماد على ذاكرتي وتصفح سجل الدردشة والتنظيم اليدوي لإنجاز هذا الأمر بالكاد.
+
+مثال آخر:
+
+> عندما أستعد لتقديم وظيفة جديدة، أريد تحويل خبراتي السابقة بسرعة إلى نسخة تتناسب أكثر مع الوظيفة، لكي أتمكن من تقديم سيرة ذاتية لائقة بثقة أكبر.  
+> حاليًا لا يمكنني سوى نسخ سيرتي القديمة مرارًا وتعديل الصياغة يدويًا، حتى أصبح أقل ثقة مع كل تعديل.
+
+إذا استطعت كتابة جملة واحدة بهذه الدرجة من الوضوح، فتصميم الصفحات وتصميم التعليمات والحكم على أولويات الوظائف سيصبح أسهل بكثير.
+
+## 6. عند صنع منتجات AI، ثلاث طبقات من الوظائف التي يجب مراعاتها بشكل خاص
+
+العديد من منتجات AI تبدو قوية جدًا في العرض التوضيحي للوظائف، لكنها لا تحافظ على المستخدمين بعد الإطلاق الفعلي، والسبب الشائع هو أنها حلت الإجراء السطحي فقط ولم تحل الوظيفة الأعمق.
+
+يمكنك تقسيم الوظيفة تقريبًا إلى ثلاث طبقات:
+
+### 6.1 طبقة الوظائف
+
+ما هي المهمة السطحية؟
+
+- تلخيص المستندات
+- إعادة كتابة النصوص
+- استخراج المهام
+- توليد الصور
+
+هذه هي الطبقة الأسهل للمستخدم في التعبير عنها شفهيًا.
+
+### 6.2 الطبقة العاطفية
+
+ما الذي يريد المستخدم تقليله من عدم الراحة، أو ما الشعور الذي يريد الحصول عليه؟
+
+- لا يريد أن يذعر هكذا
+- لا يريد أن يبدو غير محترف
+- لا يريد البدء من الصفر في كل مرة
+- يريد شعورًا أكبر بالسيطرة
+
+العديد من نوايا الدفع مرتبطة ارتباطًا وثيقًا بالطبقة العاطفية في الواقع.
+
+### 6.3 الطبقة الاجتماعية
+
+ما الذي يريد المستخدم أن يصبح عليه في نظر الآخرين؟
+
+- أن يبدو أكثر موثوقية
+- أن يكون أكثر تنظيمًا في الفريق
+- أن يكون أكثر احترافية أمام العملاء
+- أن يكون أكثر قدرة على التعبير على منصات التواصل الاجتماعي
+
+إذا صنعت الطبقة الوظيفية فقط، فمن السهل استبدال منتجك؛ لكن إذا فهمت الطبقة العاطفية والاجتماعية في نفس الوقت، فستجد قيمة لزجة حقيقية بسهولة أكبر.
+
+## 7. استخدام JTBD بشكل عكسي لفرز اتجاهات المنتج
+
+أحيانًا ليس لديك منتج بالفعل، بل لديك 3 إلى 5 أفكار ولا تعرف أيها تصنع. JTBD مناسب جدًا هنا للفرز.
+
+يمكنك أخذ كل فكرة وسؤال نفسك 5 أسئلة:
+
+1. هل السيناريو المقابل لهذه الفكرة محدد بما فيه الكفاية؟
+2. هل يستخدم المستخدم بالفعل طريقة غير فعالة لحل المشكلة الآن؟
+3. هل ألم هذه الوظيفة قوي بما فيه الكفاية، أو متكرر بما فيه الكفاية؟
+4. إذا صنعتها جيدًا، هل سيشعر المستخدم بوضوح بـ "تحسنت حالتي"؟
+5. هل يمكن في النسخة الأولى التركيز فقط على الخطوة الرئيسية لهذه الوظيفة، وصنع نسخة صغيرة لكنها مفيدة؟
+
+إذا كان اتجاه ما في النهاية لا يزال يمكنك قول "يبدو مثيرًا للاهتمام" فقط، لكن لا يمكنك توضيح المحفز والبديل ومعيار النجاح، فهو على الأرجح مجرد إلهام غامض، وليس اتجاهًا ناضجًا.
+
+## 8. أسئلة يمكن استخدامها مباشرة في مقابلات المستخدمين
+
+العديد من الأشخاص عند القيام بالبحث يسألون: "ما الوظائف التي تريدها؟" هذا النوع من الأسئلة يحصل بسهولة على إجابات سطحية.
+
+JTBD أنسب لطرح الأسئلة التالية:
+
+- متى واجهت هذه المشكلة آخر مرة؟
+- ماذا كنت تفعل في ذلك الوقت، ولماذا تعثرت؟
+- كيف حللتها في النهاية؟
+- في هذه العملية، أين كان أكثر ما يزعجك وأبطأك وأقل ما يطمئنك؟
+- إذا كانت هناك أداة يمكنها مساعدتك، أي نتيجة ستجعلك تشعر أنها مفيدة حقًا؟
+- ما البدائل التي جربتها؟ ولماذا لم تكن جيدة بما فيه الكفاية؟
+
+هذا النوع من الأسئلة يعيد الحوار إلى التجارب الحقيقية بدلاً من البقاء في التفضيلات المتخيلة.
+
+## 9. استخدام AI لمساعدتك في تفكيك JTBD
+
+JTBD نفسه ليس اختراع AI، لكن AI مناسب جدًا لمساعدتك في تنظيم وتلخيص JTBD.
+
+مثلاً، إذا جمعت 5 إلى 10 تعليقات من المستخدمين، يمكنك إرسالها للنموذج وجعله يلخص وفقًا للهيكل التالي:
+
+```text
+العب دور مساعد بحث المنتج.
+سأعطيك بعض الكلمات الأصلية للمستخدم، لا تعط اقتراحات وظيفية أولاً،
+بل نظم أولاً وفقًا لإطار Jobs to Be Done:
+
+1. في أي سيناريو يوجد المستخدم
+2. ما هو الحدث الذي حفزه على اتخاذ إجراء
+3. ما هو التقدم الذي يريد إنجازه حقًا
+4. ما هو البديل الحالي
+5. ما هو معيار النجاح الأكثر أهمية لديه
+6. ما هي الكلمات العاطفية المتكررة في هذه التعليقات
+
+أخيرًا، نظم هذه المحتويات في 3 فرضيات JTBD الأكثر استحقاقًا للتحقق أولاً.
+```
+
+إذا كان لديك فكرة بالفعل، يمكنك أيضًا جعل AI يساعدك في الجولة الأولى من التضييق:
+
+```text
+أريد صنع [فكرتك للمنتج].
+لا تعطني قائمة وظائف مباشرة، بل استخدم طريقة Jobs to Be Done لمساعدتي في التحليل:
+
+1. أي سيناريوهات محددة قد يخدمها هذا المنتج
+2. ما هي الوظيفة الأساسية التي يريد المستخدم إنجازها في كل سيناريو
+3. ما هي البدائل الحالية
+4. أي وظيفة هي الأنسب كبداية لـ MVP ولماذا
+5. اكتب الوظيفة الموصى بها نهائيًا كجملة JTBD واضحة
+```
+
+## 10. 4 أخطاء شائعة للمبتدئين
+
+### 10.1 كتابة الوظيفة كاسم وظيفة
+
+"تلخيص AI" و"تصنيف ذكي" و"توليد تلقائي" ليست وظائف، بل هي طرق تنفيذ محتملة فقط.
+
+### 10.2 كتابة المجموعة المستهدفة بشكل واسع جدًا
+
+"جميع العاملين" و"جميع الطلاب" و"جميع رواد الأعمال" عادةً ما تكون واسعة جدًا. كلما كانت أوسع، صعب عليك رؤية السيناريوهات الحقيقية.
+
+### 10.3 الاستماع فقط لما يقوله المستخدم، دون النظر إلى ما يفعله
+
+المستخدم سيصف ما يريده، لكن أولوياته الحقيقية غالبًا ما تكون مخفية في كيفية تدبيره للمشكلة حاليًا.
+
+### 10.4 الرغبة في صنع منصة شاملة من البداية
+
+الطريقة الصحيحة لاستخدام JTBD عادةً ليست "سأصنع منصة كبيرة تفعل كل شيء"، بل التركيز أولاً على خطوة رئيسية واحدة في سيناريو واحد، وصنعها مريحة جدًا.
+
+## 11. ملخص
+
+أكثر جانب قيم في Jobs to Be Done ليس إعطائك مصطلحًا جديدًا، بل مساعدتك في تغيير زاوية المراقبة: **لا تركز فقط على وظائف المنتج، بل ركز على ما يريد المستخدم دفذه إلى الخطوة التالية.**
+
+عندما تبدأ في سؤال نفسك مرارًا:
+
+- في أي سيناريو يوظف المستخدم هذا المنتج
+- أين تعثر بالضبط
+- بأي طريقة يتدبر الأمر حاليًا
+- بعد حل المشكلة، ماذا ستتغير حالته
+
+ستكتشف أن العديد من الأفكار الغامضة أصبحت واضحة فجأة، وأن العديد من الوظائف الفخمة لم تعد مهمة جدًا فجأة أيضًا.
+
+صنع المنتجات، خاصة منتجات AI، أكثر ما يخافه هو الانغماس في عرض القدرات منذ البداية. JTBD يمكنه سحب انتباهك إلى المكان المهم حقًا: **لماذا يحتاجك المستخدم، وما التقدم الذي تساعده في إنجازه بالضبط.**
+
+<a id="jtbd-ai"></a>
+## [12. كيفية استخدام AI لمساعدتك في تطبيق JTBD](#top-jtbd)
+
+JTBD ليس اختراع AI، لكن AI مناسب جدًا ليكون مساعدك البحثي ومساعد التنظيم ومساعد المقارنة في هذا الإطار. المفتاح هو: **دع AI يساعدك في التنظيم والتوسيع، بدلاً من التخمين بدلاً منك عن المستخدم.**
+
+يمكنك استخدامه هكذا:
+
+### 12.1 دع AI يساعدك في إعادة كتابة الفكرة الغامضة كفرضية JTBD
+
+عندما يكون لديك فقط وصف غامض في ذهنك، مثل "أريد صنع أداة تساعد طلاب الجامعات في إيجاد تدريب"، يمكنك جعل AI يساعدك أولاً في تفكيكها إلى عدة وظائف محتملة:
+
+```text
+لدي فكرة منتج غامضة الآن: [فكرتك]
+لا تعطني قائمة وظائف مباشرة، بل استخدم طريقة Jobs to Be Done لمساعدتي في التحليل:
+1. أي سيناريوهات محددة قد تقابلها
+2. ما هو التقدم الذي يريد المستخدم إنجازه حقًا في كل سيناريو
+3. ما هي البدائل الحالية المحتملة
+4. أي وظيفة أنسب لصنع MVP أولاً
+أخيرًا اكتب كل وظيفة كجملة JTBD واضحة.
+```
+
+يمكنك حتى أن تكتب الإدخال ببساطة شديدة:
+
+```text
+أريد صنع شيء يساعد طلاب الجامعات في إيجاد تدريب.
+أنا الآن لا أستطيع أن أشرح بالضبط ماذا سأصنع، ساعدني في التفكير ماذا يريد المستخدم إنجازه حقًا.
+```
+
+AI قد يعطي مخرجات مفيدة مثل هذه:
+
+```text
+اتجاهات JTBD المحتملة:
+
+1. عندما أستعد لأول مرة لتقديم طلب تدريب، أريد أن أعرف بسرعة ما المواد التي يجب أن أعد أولاً،
+لكي لا أتأخر في التقديم بسبب الفوضى في المعلومات.
+
+2. عندما أرى وظيفة تدريب، أريد أن أحكم بسرعة على ما إذا كانت تست التقديم،
+لكي لا أضيع وقتًا كثيرًا على وظائف غير مناسبة.
+
+3. عندما أبدأ التقديم، أريد تحويل سيرتي الذاتية الحالية إلى نسخة تتناسب أكثر مع الوظيفة،
+لكي أتمكن من إكمال التقديم بسرعة أكبر ورفع معدل القبول.
+```
+
+قيمة هذا النوع من المخرجات هي أنه سيأخذ فكرتك الواسعة جدًا ويقسمها إلى عدة اتجاهات أقرب إلى السيناريوهات الحقيقية.
+
+### 12.2 دع AI يساعدك في تنظيم الكلمات الأصلية من المقابلات
+
+إذا قمت بالفعل ببعض مقابلات المستخدمين، يمكنك تسليم سجلات المقابلات إلى AI وجعله يساعدك في استخلاص السيناريوهات المتكررة ونقاط التحفيز والبدائل ومعايير النجاح.
+
+```text
+فيما يلي الكلمات الأصلية من 5 مستخدمين.
+لا تعط حلولاً أولاً، بل نظم وفقًا لإطار JTBD:
+1. في أي سيناريو يوجد المستخدم
+2. ما هو الحدث الذي حفزه على اتخاذ إجراء
+3. ما هو التقدم الذي يريد إنجازه حقًا
+4. ما هو البديل الحالي
+5. ما هو معيار النجاح الأكثر أهمية لديه
+6. أي المعلومات تتكرر عبر عدة مستخدمين
+أخيرًا نظم في 3 فرضيات JTBD الأكثر استحقاقًا للتحقق أولاً.
+```
+
+يمكنك أيضًا كتابة إدخال بسيط جدًا هكذا:
+
+```text
+سألت 3 أشخاص، قالوا تقريبًا هكذا:
+
+1. في كل مرة أريد تقديم تدريب يجب أن أعدل سيرتي الذاتية من جديد، هذا مزعج جدًا.
+2. أكثر ما أخافه حقًا هو أنني لا أعرف ما إذا كانت كتابتي صحيحة.
+3. أنا الآن أطلب من الطلاب الأكبر سناً مساعدتي في المراجعة، لكن من المحرج أن أزعجهم في كل مرة.
+
+ساعدني في التنظيم، ماذا يريدون إنجازه حقًا.
+```
+
+AI قد يخرج:
+
+```text
+نتيجة التنظيم:
+
+- السيناريو المشترك: قبل تقديم طلب تدريب، يجب التعامل مع السيرة الذاتية
+- الصعوبة المشتركة: لا أعرف كيف أعدل إلى مستوى "جيد بما فيه الكفاية"
+- البديل الحالي: طلب مساعدة الطلاب الأكبر سناً في المراجعة، التعديل المتكرر بنفسه
+- JTBD المحتمل:
+  عندما أستعد لتقديم تدريب، أريد أن أحكم بسرعة على ما إذا كانت سيرتي الذاتية قد وصلت إلى مستوى قابل للتقديم،
+  لكي لا أبقى عالقًا في "سأعدل مرة أخرى" ولا أستطيع التقديم.
+```
+
+هذا النوع من المخرجات مفيد جدًا، لأنه يساعدك على استخلاص شيء أشبه بـ "الاحتياج" من الكلمات المتفرقة.
+
+### 12.3 دع AI يقوم بجولة خفيفة من البحث عبر الإنترنت
+
+قبل أن تبدأ المقابلات واسعة النطاق، يمكنك جعل AI يساعدك في بعض المسح الخفيف للمعلومات الخارجية:
+
+- في المنتديات العامة أو المجتمعات، كيف يشكو الناس من هذه المشكلة
+- أي طبقة من المشكلة تحلها المنتجات الموجودة أساسًا
+- ما هي البدائل الأكثر شيوعًا لدى المستخدمين
+- في التقييمات الشائعة، ما أكثر ما يرضي الناس وما أقل ما يرضيهم
+
+هذا النوع من البحث لا يمكنه استبدال مقابلات المستخدمين الحقيقية، لكنه مناسب جدًا كإحماء لمرحلة Discover، لمساعدتك في بناء خريطة المشاكل أولاً.
+
+إدخال بسيط يمكن أن يكون:
+
+```text
+ساعدني في البحث:
+"ما هي نقاط الألم الأكثر شيوعًا عند تعديل السيرة الذاتية وتقديم طلبات التدريب لطلاب الجامعات؟"
+ركز على ما يقوله الناس بأنفسهم في المنتديات العامة ومنشورات الخبرة ومجتمعات التوظيف.
+ساعدني في تنظيم 5 مشاكل الأكثر شيوعًا.
+```
+
+AI قد يخرج:
+
+```text
+تنظيم نقاط الألم الشائعة:
+
+1. لا أعرف ماذا أكتب في السيرة الذاتية، الخبرات قليلة جدًا
+2. لا أعرف كيف أعدل لتناسب وظائف مختلفة
+3. عدلت عدة نسخ، لكنني لا أزال غير متأكد مما إذا كانت جيدة بما فيه الكفاية
+4. لا أجد شخصًا موثوقًا لمساعدتي في المراجعة
+5. عملية التقديم معقدة، من السهل التأجيل
+```
+
+هذا النوع من المخرجات لا يمكن اعتباره استنتاجًا نهائيًا، لكنه مناسب جدًا لمساعدتك في تحديد أي نوع من المشاكل يجب أن تعطي الأولوية للمقابلات عنه.
+
+### 12.4 دع AI يلعب دور "الجانب المعارض"
+
+في كثير من الأحيان، نكون عاطفيين جدًا تجاه أفكارنا. يمكنك جعل AI يلعب خصمًا، يضغطك لتوضيح المشكلة بشكل أفضل:
+
+```text
+العب دور مستشار بحث منتجات صارم جدًا.
+فيما يلي فرضية JTBD الخاصة بي: [فرضيتك]
+انتقدها من الزوايا التالية:
+1. هل هذا السيناريو واسع جدًا
+2. هل هذه الوظيفة مكتوبة كوظيفة بدلاً من تقدم حقيقي
+3. هل البديل ضعيف جدًا
+4. هل معيار النجاح غير واضح بما فيه الكفاية
+5. ما هو الخطر الذي يحتاج أكثر إلى التحقق في هذه الفرضية
+```
+
+فائدة القيام بذلك هي أنك تستطيع اكتشاف بشكل أسرع ما إذا كنت تنظر إلى الاحتياج أم فقط إلى الحل الذي يعجبك.
+
+## 📚 الواجبات
+
+يرجى إكمال الواجبات التالية بناءً على المحتوى أعلاه:
+
+1. اختر فكرة منتج تريد صنعها مؤخرًا، واكتبها بوضوح باستخدام صيغة JTBD
+2. أكمل العناصر الخمسة لهذه الفكرة: السيناريو، المحفز، التقدم، البديل، معيار النجاح
+3. ابحث عن 3 مستخدمين محتملين، واسأل على الأقل مرة "متى واجهت هذه المشكلة آخر مرة"
+4. سلم الكلمات الأصلية للمقابلة إلى AI ونظمها في 3 فرضيات JTBD الأكثر استحقاقًا للتحقق أولاً
+
+## قراءة إضافية
+
+- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
+- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
+- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
+- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
diff --git a/docs/ar-sa/stage-1/appendix-mom-test/index.md b/docs/ar-sa/stage-1/appendix-mom-test/index.md
new file mode 100644
index 0000000..292019e
--- /dev/null
+++ b/docs/ar-sa/stage-1/appendix-mom-test/index.md
@@ -0,0 +1,589 @@
+---
+title: 'اختبار الأم: كيفية التحقق من المتطلبات من خلال مقابلات المستخدمين'
+description: 'مقالة تمهيدية لاختبار الأم موجهة للقراء بدون خبرة مسبقة. تعلم كيفية تجنب الملاحظات المجاملية، وإجراء مقابلات مستخدمين تركز على السلوكيات الحقيقية والحقائق الملموسة والمشاكل القائمة، لتحويل "يبدو جيدًا" إلى أحكام أكثر موثوقية حول المتطلبات.'
+---
+
+<script setup>
+const duration = 'حوالي <strong>1.5 ساعة</strong>'
+</script>
+
+# اختبار الأم: كيفية التحقق من المتطلبات من خلال مقابلات المستخدمين
+
+<a id="top-mom"></a>
+
+## مقدمة الفصل
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['مقابلات المستخدمين', 'التحقق من المتطلبات', 'أبحاث المستخدمين', 'دراسة المنتجات']"
+  coreOutput="مجموعة واحدة من أسئلة المقابلة التي تكشف معلومات حقيقية"
+  expectedOutput="عدم اعتبار التشجيع المجاملي من المستخدمين كتحقق، واستخدام السلوكيات الحقيقية للحكم على الاتجاه"
+>
+
+الكثير من الأشخاص عندما يقومون بأول بحث عن المنتج، يعتقدون أن الأهم هو "التحدث مع شخص ما". لذلك يذهبون لسؤال الأصدقاء والزملاء وحتى أفراد العائلة:
+
+- ما رأيك في هذه الفكرة؟
+- إذا كان هناك منتج مثل هذا، هل ستستخدمه؟
+- هل تبدو هذه الميزة جيدة؟
+
+غالبًا ما يعطيهم الطرف الآخر ردودًا مشجعة جدًا:
+
+- جيد جدًا
+- يبدو مفيدًا
+- أعتقد أنه يمكنك تجربته
+
+المشكلة هي أن هذه الإجابات عادةً لا تساعدك في اتخاذ القرار. إنها تشبه المجاملة والدعم، أو رد فعل طبيعي لا يريد أن يحبطك. تعتقد أنك حصلت على "تحقق من السوق"، لكنك في الواقع جمعت فقط مجموعة من المواساة التي يصعب استخدامها في اتخاذ القرار.
+
+طريقة اختبار الأم مصممة خصيصًا لحل هذه المشكلة. إنها تذكرنا: **ليس أن المستخدمين يخدعونك عمدًا، بل طريقة طرحك للأسئلة توجه بطبيعتها الشخص الآخر نحو إجابات لطيفة لكنها غير مفيدة.**
+
+</ChapterIntroduction>
+
+::: info الحد الأدنى من الإجراءات القياسية
+**الهدف**: بعد القراءة، ستكون أكثر وضوحًا حول كيفية التحدث مع المستخدمين، حتى لا تسمع فقط "يبدو جيدًا"، بل تحصل فعلاً على معلومات تساعدك في الحكم على الاتجاه.
+
+**الإجراءات**: غيّر الأسئلة الخمسة التي كنت تنوي طرحها، مع إعطاء الأولوية لأسئلة مثل "متى كانت آخر مرة حدث فيها هذا" و"كيف تعاملت معه في ذلك الوقت".
+
+**النتيجة**: سيكون من الأسهل عليك التمييز بين الآراء والأدلة الحقيقية التي تدعم القرار.
+
+**الكلمات المفتاحية للانتقال السريع**: [ما هو اختبار الأم](#mom-what) · [المبادئ الأساسية الثلاثة](#mom-principles) · [كيف يساعدك الذكاء الاصطناعي](#mom-ai)
+:::
+
+## سوف تتعلم المحتوى التالي
+
+1. ما المشكلة التي يحلها اختبار الأم حقًا، ولماذا العديد من "أبحاث المستخدمين" لا تحصل فعلاً على معلومات حقيقية
+2. المبادئ الأساسية القليلة لهذه الطريقة: اسأل أقل عن الآراء، واسأل أكثر عن السلوكيات؛ اسأل أقل عن الافتراضات، واسأل أكثر عن الحقائق
+3. كيفية تحويل سؤال يسهل الحصول على إجابات إيجابية كاذبة إلى سؤال مقابلة أكثر قيمة
+4. كيفية استخدام اختبار الأم مع JTBD والتحقق من المتطلبات وحكم MVP معًا
+
+<a id="mom-what"></a>
+## [1. ما هو اختبار الأم بالضبط](#top-mom)
+
+اختبار الأم يأتي من كتاب يحمل نفس الاسم لروب فيتزباتريك. اسمه يبدو وكأنه مزحة، لكنه يصيب الهدف بدقة:
+
+**حتى والدتك، سيكون من الصعب عليها أن تخبرك مباشرة بأن "هذه فكرة سيئة".**
+
+السبب ليس أنها غير صادقة، بل:
+
+- هي لا تريد أن تؤذيك
+- ستشجعك بشكل لا إرادي
+- من السهل عليها أن تجيب وفقًا لطريقة تعبيرك
+
+في الواقع، ليس فقط الأمهات، بل الأصدقاء والزملاء وزملاء الدراسة السابقين، وحتى الكثير من الغرباء، عندما يواجهون فكرة منتجك، غالبًا ما يعطون "ملاحظات إيجابية" مماثلة. هذا لا يعني أن الطلب موجود فعلاً، بل يعني فقط أنك صغت السؤال بطريقة يسهل الحصول على إجابات لطيفة.
+
+لذلك، النقطة المهمة في اختبار الأم ليست أبدًا "لا تسأل والدتك"، بل:
+
+**لا تصغ سؤالك بطريقة يجيب فيها أي شخص وفقًا لما تريده.**
+
+ما تريد هذه الطريقة تعليمه حقًا هو كيفية الحصول من خلال المحادثة على معلومات أقرب إلى المتطلبات الحقيقية، بدلاً من جمع مجموعة من التعليقات التي تجعلك تشعر بالرضا.
+
+## 2. ما هي المشكلة الأساسية التي يحلها
+
+اختبار الأم يحل بشكل أساسي وهمًا معرفيًا شائعًا جدًا:
+
+**اعتبار الملاحظات الإيجابية المجاملية كمتطلبات حقيقية.**
+
+على سبيل المثال، إذا سألت:
+
+- ما رأيك في فكرة هذا التطبيق؟
+- إذا صنعت أداة بالذكاء الاصطناعي تساعدك في كتابة سيرتك الذاتية، هل ستستخدمها؟
+- هل هذه الميزة ذات قيمة؟
+
+الخاصية المشتركة لهذه الأسئلة هي:
+
+- أنها جميعًا تسأل عن "الآراء"
+- أنها جميعًا تحمل تلميحًا
+- أنها جميعًا تتحدث عن مستقبل لم يحدث بعد
+
+وإجابات الناس عن "الآراء" و"الافتراضات المستقبلية" عادةً غير مستقرة. الكثير من الأشخاص يبالغون في تقدير اهتمامهم، يبالغون في تقدير قدرتهم على التنفيذ، ويبالغون في تقدير رغبتهم المستقبلية في الشراء.
+
+لذلك يذكرك اختبار الأم:
+
+- لا تثق كثيرًا في تقييم الآخرين لفكرتك
+- لا تثق كثيرًا في توقعات الآخرين للسلوك المستقبلي
+- حاول العودة إلى السلوكيات الحقيقية التي حدثت بالفعل للمستخدمين
+
+لأنه مقارنة بـ "هل ستستخدم"، "كيف تعاملت مع هذه المشكلة في المرة الأخيرة" غالبًا ما يكون أقرب إلى الحقيقة.
+
+<a id="mom-principles"></a>
+## [3. المبادئ الأساسية الثلاثة](#top-mom)
+
+إذا كنت تريد فقط تذكر الأجزاء الأهم أولاً، يمكنك البدء بالمبادئ الثلاثة التالية.
+
+### 3.1 تحدث أقل عن فكرتك، وتحدث أكثر عن التجارب الحقيقية السابقة للمستخدم
+
+العديد من المقابلات غير الفعالة تبدأ بشرح الحل الخاص بك، وشرح مدى حماسك، وشرح المنتج الذي تخطط لصنعه. المشكلة هي أنه بمجرد أن تتحدث كثيرًا، يتحول الطرف الآخر بسهولة إلى حالة "مساعدتك" و"تشجيعك".
+
+في المقابل، الطريقة الأفضل هي التركيز على تجارب الطرف الآخر:
+
+- متى كانت آخر مرة واجهت فيها هذه المشكلة؟
+- ماذا كنت تفعل في ذلك الوقت؟
+- كيف تعاملت معها في النهاية؟
+- أي خطوة كانت الأكثر إزعاجًا؟
+
+ستجد أن هذه الأسئلة تعيد المحادثة بشكل أكثر طبيعية إلى الواقع، بدلاً من البقاء في التفضيلات المتخيلة.
+
+### 3.2 اسأل أقل عن الآراء المجردة، واسأل أكثر عن الحقائق الملموسة
+
+"أعتقد أن هذه الميزة جيدة" "يبدو جيدًا" "يبدو مفيدًا بعض الشيء"، هذه التعبيرات مجردة جدًا ويصعب توجيه قرارات المنتج.
+
+المعلومات الأكثر قيمة عادةً تبدو هكذا:
+
+- الأسبوع الماضى قضيت ساعتين في التعامل مع هذه المشكلة
+- أنا أستخدم Excel و WeChat للتغلب عليها
+- الشهر الماضى أنفقت المال بالفعل على أداة مشابهة
+- أكثر ما أخشاه هو ارتكاب الخطأ، وليس البطء
+
+هذه هي المعلومات الحقيقية التي تساعدك في الحكم على قوة المشكلة وتكرارها وإمكانية الدفع.
+
+### 3.3 اسأل أقل عن الحل الذي يريده المستخدم، وانظر أكثر في كيفية حل المشكلة حاليًا
+
+المستخدمون جيدون في وصف مشاكلهم، لكنهم ليسوا بالضرورة جيدين في تصميم الحلول.
+
+إذا سألت:
+
+- هل تريد ذكاءً اصطناعيًا يساعدك تلقائيًا في هذا؟
+- هل تعتقد أن إضافة ميزة ذكية ستساعد؟
+
+ما تحصل عليه عادةً هو موقف غامض تجاه حل معين، وليس الطلب نفسه.
+
+الأسئلة الأفضل هي:
+
+- ما الطريقة التي تستخدمها حاليًا للتعامل مع هذه المشكلة؟
+- لماذا اخترت هذه الطريقة؟
+- ما الذي لا يكون جيدًا بما فيه الكفاية فيها؟
+
+رؤية البدائل الحالية غالبًا ما تكون أهم من السؤال المباشر "ماذا تريد".
+
+## 4. لماذا يعطي الناس دائمًا إجابات لطيفة لكنها غير مفيدة
+
+إذا كنت تستطيع فهم هذا الأمر، ستقل أخطاء الحكم كثيرًا عند إجراء المقابلات.
+
+### 4.1 الناس يحافظون على الأدب بشكل لا إرادي
+
+خاصة عندما يكون لدى محدثك علاقة بك، سيكون من الصعب عليه أن يقول مباشرة:
+
+- هذا الاتجاه لا يبدو جيدًا
+- أنا لن أستخدمه أبدًا
+- هذه المشكلة ليست مهمة جدًا بالنسبة لي
+
+سيقول على الأرجح "جيد" "يمكن تجربته عندما تتاح الفرصة".
+
+### 4.2 الناس يبالغون في تقدير أنفسهم المستقبلية
+
+الكثير من الناس يؤمنون بصدق أنهم في المستقبل سيكونون:
+
+- أكثر انضباطًا
+- أكثر استعدادًا للتعلم
+- أكثر استعدادًا للدفع
+- أكثر استعدادًا لتجربة أدوات جديدة
+
+لذلك جملة "إذا كان متاحًا فأعتقد أنني سأستخدمه" غالبًا لا تساوي الاستخدام الفعلي في المستقبل.
+
+### 4.3 طريقة طرحك للأسئلة توجه الإجابات نفسها
+
+عندما تسأل:
+
+- هل فكرتي جيدة؟
+- هل هذه الميزة مفيدة جدًا بالنسبة لك؟
+
+أنت في الواقع تضع "الإجابة الصحيحة" سرًا في السؤال.
+
+هذا هو السبب في أن اختبار الأم يؤكد بشكل خاص: **لا تحول المقابلة إلى بحث عن الموافقة.**
+
+## 5. مقارنة مباشرة: أي الأسئلة تفشل بسهولة وأيها أكثر قيمة
+
+هذه المقارنات يستخدمها كل مبتدئ تقريبًا.
+
+| الأسئلة التي تفشل بسهولة | الأسئلة الأكثر قيمة |
+| --- | --- |
+| ما رأيك في فكرتي؟ | متى كانت آخر مرة واجهت فيها هذه المشكلة؟ |
+| إذا كان هناك هذا المنتج هل ستستخدمه؟ | كيف تتعامل مع هذا الأمر حاليًا؟ |
+| هل أنت مستعد للدفع مقابل هذه الميزة؟ | هل أنفقت المال على هذه المشكلة في المرة السابقة؟ على ماذا؟ |
+| هل تعتقد أن هذه الميزة مهمة؟ | أي خطوة في هذه العملية هي الأكثر إزعاجًا والأبطأ والأقل راحة؟ |
+| هل تريد ذكاءً اصطناعيًا يساعدك تلقائيًا؟ | لماذا لم تجد حلاً أفضل حتى الآن؟ |
+
+ما هو مهم في هذا الجدول ليس الجمل المحددة، بل الاتجاه وراءها:
+
+- من الآراء إلى الحقائق
+- من المستقبل إلى الماضي
+- من حلولك إلى مشاكل المستخدم
+
+## 6. إيقاع مقابلة يمكن استخدامه حتى من قبل المبتدئين
+
+إذا كنت تريد أن تذهب للتحدث مع شخص ما الآن، يمكنك اتباع هذا التسلسل مباشرة.
+
+### 6.1 الافتتاح: اشرح أنك تتعلم، وليس تبيع
+
+على سبيل المثال:
+
+> أنا أدرس مؤخرًا كيف يتعامل الناس مع هذا النوع من المشاكل، وأريد أن أفهم الوضع الحقيقي أولاً، أنا لست هنا لبيع شيء.
+
+هذا التعبير يجعل من الأسهل على الطرف الآخر التخلي عن العبء النفسي "يجب أن أعطيك ملاحظات إيجابية".
+
+### 6.2 ابدأ من آخر تجربة حقيقية
+
+يمكنك البدء بأسئلة من هذا النوع:
+
+- متى كانت آخر مرة واجهت فيها هذه المشكلة؟
+- ماذا حدث في ذلك الوقت؟
+- ما كان رد فعلك الأول وكيف تعاملت معه؟
+
+بمجرد أن تدخل المحادثة في أحداث محددة، تتحسن جودة المعلومات عادةً بشكل ملحوظ.
+
+### 6.3 اطرح أسئلة متابعة حول السلوك والتكلفة والبدائل
+
+استمر في السؤال:
+
+- ما الطريقة التي تستخدمها حاليًا للحل؟
+- ما أكثر شيء غير مريح في هذه الطريقة؟
+- كم من الوقت أو المال أو الجهد أنفقت على هذا؟
+- هل جربت طرقًا أخرى؟ لماذا لم تستمر في استخدامها؟
+
+### 6.4 أخيرًا احكم على الألم والأولوية
+
+لا تحتاج إلى السؤال مباشرة "هل يؤلمك"، يمكنك الحكم من التفاصيل:
+
+- هل يواجه هذا كثيرًا
+- هل يتخذ بالفعل إجراءات نشطة للتعويض
+- هل هو مستعد بالفعل لدفع التكاليف من أجل هذا
+- هل يُظهر مشاعر واضحة عند الحديث عن هذا الأمر
+
+كل هذه أكثر فائدة من سؤال "هل هذه نقطة ألم بالنسبة لك".
+
+## 7. مثال أكثر اكتمالاً
+
+لنفترض أنك تريد صناعة منتج "ذكاء اصطناعي يساعد طلاب الجامعات في تحسين سيرهم الذاتية".
+
+### طريقة خاطئة
+
+تذهب لسؤال زميل:
+
+> أريد صناعة أداة ذكاء اصطناعي لتحسين السيرة الذاتية، ما رأيك؟  
+> إذا كانت تستطيع تعديل السيرة الذاتية تلقائيًا وفقًا للوظيفة، هل ستستخدمها؟
+
+في هذه الحالة، سيقول الطرف الآخر على الأرجح:
+
+- يبدو جيدًا
+- أعتقد أنه سيكون مفيدًا
+- إذا كان مجانيًا سأجربه
+
+هذه الإجابات لا تساعدك تقريبًا في الحكم على مدى قوة الطلب.
+
+### طريقة أفضل
+
+يمكنك التغيير إلى:
+
+> متى كانت آخر مرة عدّلت فيها سيرتك الذاتية؟  
+> لماذا عدّلتها في ذلك الوقت؟  
+> كيف عدّلتها؟  
+> أي خطوة كانت الأصعب؟  
+> هل طلبت من أحد أن يراجعها لك؟  
+> هل أنفقت المال أو الكثير من الوقت على أمر السيرة الذاتية من قبل؟
+
+من خلال هذه الأسئلة، قد تحصل على معلومات مثل:
+
+- الكثير من الناس لا يعرفون كيف يكتبون، بل لا يعرفون كيف يعيدون كتابة سيرتهم لتناسب وظائف مختلفة
+- أكثر ما يؤلمهم ليس التنسيق، بل "عدم معرفة الخبرات التي تستحق الكتابة"
+- يتأخرون ليس لأنهم كسالى، بل لأن تعديل السيرة الذاتية في كل مرة يستنزف طاقتهم
+- يستخدمون بالفعل نصائح الطلبة الأكبر سنًا ومواقع القوالب وأدوات الذكاء الاصطناعي ومساعدة الأصدقاء كحلول مؤقتة
+
+في هذه اللحظة، تكون أقرب بكثير إلى المشكلة الحقيقية.
+
+## 8. كيفية استخدام اختبار الأم و JTBD معًا
+
+إذا كان JTBD يساعدك في رؤية "التقدم الذي يريد المستخدم تحقيقه"، فإن اختبار الأم يعلمك:
+
+**كيف تتأكد من خلال المقابلات أن هذا العمل موجود فعلاً.**
+
+يمكنك استخدام الاثنين معًا:
+
+1. استخدم JTBD أولاً لافتراض عمل معين
+2. ثم استخدم طريقة اختبار الأم لسؤال المستخدمين عن آخر تجربة حقيقية لهم
+3. انظر ما إذا كان هذا العمل متكررًا وحقيقيًا ويستحق الأولوية فعلًا
+
+على سبيل المثال، افتراض JTBD الخاص بك هو:
+
+> عندما أستعد لتقديم طلب تدريب، أريد تعديل سيرتي الذاتية القديمة بسرعة لتتناسب مع الوظيفة، حتى أتمكن من إكمال التقديم في أقرب وقت ممكن.
+
+يمكنك استخدام أسئلة بأسلوب اختبار الأم للتحقق:
+
+- متى كانت آخر مرة قدمت فيها على تدريب؟
+- كيف عدّلت سيرتك الذاتية في ذلك الوقت؟
+- أي فقرة كانت الأصعب في كتابتها؟
+- بعد الانتهاء من التعديل، كيف تحكم على ما إذا كانت جيدة بما فيه الكفاية؟
+
+بهذه الطريقة، تتصل الطرق:
+
+- JTBD يساعدك في تعريف فرضية الطلب
+- اختبار الأم يساعدك في التحقق من الفرضية من خلال المقابلات
+
+## 9. الأخطاء الأكثر شيوعًا التي يرتكبها المبتدئون عند إجراء مقابلات المستخدمين
+
+### 9.1 تحويل المقابلة إلى عرض تقديمي للمنتج
+
+إذا تحدثت كثيرًا عن أفكارك الخاصة، سيبدأ الطرف الآخر بسهولة في مساعدتك بدلاً من إخبارك بالوضع الحقيقي.
+
+### 9.2 جميع أشخاص المقابلة من المعارف
+
+المعارف ليسوا مستبعدون من التحدث معهم، لكنهم أكثر ميلاً لتشجيعك. تحتاج على الأقل إلى خلط بعض الأشخاص الأقرب إلى المستخدمين الحقيقيين، بدلاً من البحث فقط عن أشخاص يدعمونك.
+
+### 9.3 متابعة سريعة للأسئلة عن الوظائف في وقت مبكر جدًا
+
+إذا لم تكن قد فهمت المشكلة بعد، وبدأت في متابعة الأسئلة عن الأزرار والواجهات وتفاصيل الوظائف، فعادةً ما يكون ذلك دخولًا مبكرًا جدًا في مرحلة الحل.
+
+### 9.4 اعتبار جملة "سأستخدمه" كنتيجة تحقق
+
+المقابلة تساعدك على الأكثر في الحكم على الاتجاه، ولا تعني أن التحقق اكتمل. التحقق الحقيقي يعتمد في النهاية على ما إذا كان المستخدم مستعدًا لدفع تكاليف حقيقية، مثل الوقت وتكلفة التبديل وسلوك التجربة وحتى الدفع.
+
+### 9.5 عدم الترتيب بعد انتهاء المقابلة
+
+إذا تركتها بعد الانتهاء من التحدث، ستصبح المعلومات سريعًا انطباعات غامضة. من الأفضل الترتيب في أقرب وقت ممكن:
+
+- المشاكل ذات التكرار العالي
+- الكلمات العاطفية في كلمات المستخدم الأصلية
+- البدائل الحالية
+- التكاليف المدفوعة بالفعل
+- أحكامك الجديدة الخاصة
+
+## 10. قائمة أسئلة يمكن نسخها واستخدامها مباشرة
+
+إذا كنت تريد البدء في أقرب وقت، إليك مجموعة من الأسئلة العامة بما فيه الكفاية.
+
+### أسئلة الافتتاح
+
+- متى كانت آخر مرة واجهت فيها هذه المشكلة؟
+- ماذا حدث بالتحديد في ذلك الوقت؟
+
+### أسئلة السلوك
+
+- كيف تعاملت معها في ذلك الوقت؟
+- لماذا اخترت هذه الطريقة؟
+
+### أسئلة التكلفة
+
+- كم من الوقت أو الجهد يستهلكه هذا الأمر عادةً؟
+- هل أنفقت المال من قبل لحله؟
+
+### أسئلة البدائل
+
+- هل جربت أدوات أو طرقًا أخرى؟
+- لماذا لم تستمر في استخدامها؟
+
+### أسئلة الختام
+
+- إذا واجهت نفس المشكلة في المستقبل، ما الذي تعتقد أنه يجب أن يكون عليه الحل المثالي؟
+
+لاحظ أنه يمكن طرح سؤال الختام هذا، لكن من الأفضل وضعه في النهاية. لأنك تحتاج في البداية إلى الحصول على الحقائق، وليس الأمنيات.
+
+## 11. ملخص
+
+أهم مساهمة لاختبار الأم ليست إعطائك مجموعة من مهارات "التحدث بشكل أفضل"، بل مساعدتك في بناء طريقة حكم أكثر وضوحًا:
+
+- لا تثق بسرعة في مدح الآخرين لفكرتك
+- لا تعتبر "إذا كان متاحًا سأستخدمه" طلبًا حقيقيًا
+- لا تدع المقابلة تتحول إلى بحثك عن الموافقة
+
+المقابلات ذات القيمة الحقيقية يجب أن تعود قدر الإمكان إلى هذه الأشياء:
+
+- آخر تجربة حقيقية للمستخدم
+- كيف يتعامل معها حاليًا
+- ما التكاليف التي دفعها بالفعل
+- في أي الأماكن يش بعدم الراحة بشكل واضح
+
+عندما تبدأ في السؤال بهذه الطريقة، المعلومات التي تحصل عليها، رغم أنها قد لا تكون لطيفة جدًا في بعض الأحيان، لكنها عادةً أكثر فائدة.  
+وعند صنع المنتج، **الحقيقة المفيدة أهم دائمًا من التشجيع اللطيف.**
+
+<a id="mom-ai"></a>
+## [12. كيفية استخدام الذكاء الاصطناعي لمساعدتك في إجراء مقابلات المستخدمين](#top-mom)
+
+اختبار الأم هو في جوهره طريقة "للتحدث مع أشخاص حقيقيين"، لذلك لا يمكن للذكاء الاصطناعي أن يحل محل المقابلات الحقيقية. لكن الذكاء الاصطناعي مناسب جدًا لمساعدتك قبل وأثناء وبعد المقابلة، خاصة في تقليل حاجز الدخول للمبتدئين.
+
+### 12.1 دع الذكاء الاصطناعي يساعدك في إعادة كتابة الأسئلة "السهلة الفشل"
+
+الكثير من الناس يعرفون أنه لا ينبغي لهم سؤال "ما رأيك في فكرتي"، لكن بمجرد أن يتحدثون يعودون إلى هذه الجمل. يمكنك أولاً تسليم الأسئلة التي تستعد لطرحها إلى الذكاء الاصطناعي وجعله يساعدك في إعادة كتابتها:
+
+```text
+فيما يلي الأسئلة التي أريد طرحها عند إجراء مقابلات المستخدمين:
+[ألصق أسئلتك]
+
+يرجى استخدام مبادئ اختبار الأم لمساعدتي في إعادة كتابتها:
+1. احذف الأسئلة الرأيية
+2. احذف الأسئلة التي تفترض المستقبل
+3. حاول تغييرها إلى أسئلة تتمحور حول السلوكيات الحقيقية السابقة والبدائل القائمة والتكاليف المدفوعة
+4. أخيرًا رتبها في قائمة من 8-10 أسئلة يمكن استخدامها مباشرة في المقابلات
+```
+
+حتى الإدخال البسيط جدًا مقبول تمامًا:
+
+```text
+أريد أن أسأل المستخدمين:
+1. ما رأيك في صناعة أداة ذكاء اصطناعي لتحسين السيرة الذاتية؟
+2. هل ستستخدمها؟
+3. هل أنت مستعد للدفع؟
+
+يرجى مساعدتي في تغييرها إلى طريقة طرح أفضل.
+```
+
+قد يكون الناتج المفيد من الذكاء الاصطناعي مثل هذا:
+
+```text
+الأسئلة المعاد كتابتها:
+
+1. متى كانت آخر مرة عدّلت فيها سيرتك الذاتية؟
+2. لماذا عدّلتها في ذلك الوقت؟
+3. كيف عدّلتها؟
+4. أي خطوة استغرقت أكثر وقت؟
+5. هل طلبت من أحد أن يراجعها لك؟
+6. هل أنفقت المال أو الكثير من الوقت على تعديل السيرة الذاتية من قبل؟
+```
+
+هذا الناتج مفيد جدًا لأنه يحول أسئلتك الأصلية "التي تسأل عن الآراء" مباشرة إلى أسئلة "تسأل عن السلوكيات الحقيقية".
+
+### 12.2 دع الذكاء الاصطناعي يساعدك في إنشاء خطط مقابلات مختلفة لكل فئة
+
+نفس الاتجاه، مع مجموعات مختلفة من الناس، ستكون نقاط التركيز في المقابلة مختلفة. على سبيل المثال، الطلاب ومديري الموارد البشرية والعاملون المستقلون يهتمون بأشياء مختلفة تمامًا. يمكنك أن تطلب من الذكاء الاصطناعي إنشاء نسخة من خطة المقابلة لكل فئة:
+
+- للمستخدمين الجدد، التركيز على فهم آخر تجربة حقيقية
+- للمستخدمين المكثفين، التركيز على فهم البدائل وشدة الألم
+- للمستخدمين الدافعين، التركيز على فهم ما إذا كانوا قد دفعوا تكاليف بالفعل من أجل هذا
+
+بهذه الطريقة ستكون لديك إيقاع أفضل عند التحدث الفعلي، بدلاً من طرح نفس مجموعة الأسئلة على كل شخص.
+
+على سبيل المثال، يمكنك الإدخال مباشرة هكذا:
+
+```text
+سأتحدث مع نوعين من الأشخاص:
+1. طلاب الجامعات الذين يبحثون عن تدريب لأول مرة
+2. طلبة أكبر سنًا سبق لهم مراجعة العديد من السير الذاتية للآخرين
+
+يرجى إعطائي خطة مقابلة لكل فئة، 6 أسئلة لكل منها.
+```
+
+قد يكون ناتج الذكاء الاصطناعي:
+
+```text
+لطلاب الجامعات:
+1. متى كانت آخر مرة قدمت فيها على تدريب؟
+2. أي خطوة كانت الأصعب في ذلك الوقت؟
+3. كيف تعرف ما إذا كانت سيرتك الذاتية يمكن تقديمها؟
+...
+
+للطلبة الأكبر سنًا:
+1. متى كانت آخر مرة ساعدت فيها شخصًا في مراجعة سيرته الذاتية؟
+2. ما أكثر المشاكل وضوحًا التي تراها بشكل متكرر؟
+3. ما هي الخطوة التي يواجه فيها الطلاب الأصغر سنًا أكبر صعوبة؟
+...
+```
+
+بهذه الطريقة، لا تحتاج إلى كتابة الأسئلة من الصفر، وسيكون التحضير للمقابلة أسهل بكثير.
+
+### 12.3 دع الذكاء الاصطناعي يساعدك في ترتيب سجلات المقابلات
+
+بعد انتهاء المقابلات، أكثر المشاكل شيوعًا ليست "عدم وجود معلومات"، بل "المعلومات مشتتة جدًا". الذكاء الاصطناعي مناسب جدًا لمساعدتك في ترتيب المحادثات المجزأة في ملاحظات منظمة:
+
+```text
+فيما يلي سجلات مقابلاتي مع 3 مستخدمين.
+يرجى الترتيب من منظور اختبار الأم:
+1. أي المحتويات هي حقائق وأيها مجرد آراء
+2. ما هو آخر سلوك حقيقي للمستخدم
+3. ما هي البدائل الحالية
+4. ما هي تكاليف الوقت والمال أو الجهد التي دفعها المستخدم بالفعل
+5. أي المشاكل تم ذكرها بشكل متكرر
+6. أي العبارات تبدو إيجابية لكن الأدلة عليها غير كافية
+```
+
+هذه الخطوة ذات قيمة خاصة لأنها تساعدك في فصل المحتوى "الذي يبدو جيدًا" عن المحتوى "الذي يدعم الحكم فعلاً".
+
+يمكن أن يكون الإدخال البسيط:
+
+```text
+هذا سجل محادثتي مع مستخدم:
+
+- قالت إذا كان هناك أداة فستجربها على الأرجح
+- الأسبوع الماضي قضيت ليلة كاملة في تعديل سيرتها الذاتية
+- تعتمد حاليًا بشكل أساسي على الأصدقاء لمراجعة سيرتها
+- قالت أن أصعب شيء هو عدم معرفة ما الذي يجب تعديله حتى يكون جاهزًا للتقديم
+
+يرجى مساعدتي في التمييز بين الآراء والحقائق.
+```
+
+قد يكون ناتج الذكاء الاصطناعي:
+
+```text
+الآراء:
+- إذا كان هناك أداة فستجربها على الأرجح
+
+الحقائق:
+- الأسبوع الماضي قضيت ليلة كاملة في تعديل السيرة الذاتية
+- البديل الحالي هو طلب مساعدة الأصدقاء لمراجعتها
+- أصعب نقطة هي عدم معرفة متى تعتبر "جاهزة للتقديم"
+
+النقاط التي يمكن استخدامها للحكم على المتطلبات:
+- هذه المشكلة حدثت مؤخرًا
+- المستخدم دفع بالفعل تكاليف وقت واضحة
+- الحل الحالي يعتمد على الآخرين وغير مستقر
+```
+
+هذا الناتج يخبر المبتدئ بشكل حدسي: أي الكلمات يمكن استخدامها للحكم وأيها يمكن الاستماع إليها فقط.
+
+### 12.4 دع الذكاء الاصطناعي يقوم بجولة خفيفة من البحث على الإنترنت أولاً
+
+إذا لم تبدأ المقابلات بعد، يمكنك أن تطلب من الذكاء الاصطناعي القيام ببعض الأبحاث الخارجية الخفيفة جدًا، مثل:
+
+- في المجتمعات العامة، كيف يشتكي الناس مؤخرًا من هذه المشكلة
+- ما أكثر شيء يتم انتقاده في الأدوات الحالية
+- هل دفع المستخدمون بالفعل مقابل مشاكل مشابهة
+- ما هي البدائل الموجودة في السوق
+
+هذه المعلومات لا يمكنها أن تحل محل المقابلات الحقيقية، لكنها تساعدك على الدخول في الحالة بشكل أسرع ومعرفة من أين تبدأ الأسئلة.
+
+على سبيل المثال، يمكن أن يكون الإدخال البسيط:
+
+```text
+يرجى البحث من أجلي:
+"ما الذي يشتكي منه طلاب الجامعات أكثر شيء عند تعديل سيرهم الذاتية"
+ساعدني في ترتيب 5 شكاوى الأكثر شيوعًا، واكتبها بلغة بسيطة.
+```
+
+قد يكون ناتج الذكاء الاصطناعي:
+
+```text
+الشكاوى الشائعة:
+
+1. لا أعرف ما الذي يجب كتابته في السيرة الذاتية
+2. يجب تعديلها لكل وظيفة، الأمر متعب جدًا
+3. عدّلت العديد من النسخ لكنني لست متأكدًا من جودتها
+4. لا يوجد أحد يعطيني ملاحظات موثوقة
+5. أشعر دائمًا أنني لست مستعدًا بعد، لذلك أؤجل باستمرار
+```
+
+قيمة هذه النتيجة تكمن في أنها ستسهل عليك العثور على نقطة دخول للمقابلة.
+
+### 12.5 دع الذكاء الاصطناعي يلعب دور "مدرب مراجعة المقابلات"
+
+يمكنك أيضًا أن تعطي سجل مقابلة مستخدم أنجزتها للتو للذكاء الاصطناعي وجعله ينتقدك:
+
+```text
+فيما يلي سجل مقابلة مستخدم قمت بها.
+يرجى مراجعتها من منظور اختبار الأم:
+1. أي الأسئلة طرحتها بشكل يشبه البحث عن الموافقة
+2. أي الأسئلة تحمل توجيهًا واضحًا
+3. أي الأماكن كان يمكن فيها متابعة السؤال عن الحقائق
+4. إذا جاءت مرة أخرى، كيف يمكن طرح هذه المحادثة بشكل أفضل
+```
+
+هذا مفيد جدًا للمبتدئين، لأنك ستطور بسرعة حساسية تجاه "هل أنا أجمع الأدلة أم أجمع التشجيع".
+
+## 📚 الواجبات
+
+يرجى إكمال الواجبات التالية بناءً على المحتوى أعلاه:
+
+1. اختر اتجاه منتج تريد صناعته مؤخرًا، واكتب أولاً 5 أسئلة "سهلة الفشل" كنت ستطرحها في الأصل
+2. أعد كتابة هذه الأسئلة الخمسة لتصبح أكثر توافقًا مع أسلوب اختبار الأم
+3. ابحث عن 3 مستخدمين محتملين، واسأل على الأقل مرة واحدة "متى كانت آخر مرة واجهت فيها هذه المشكلة"
+4. بعد انتهاء المقابلة، رتب 4 فئات من المعلومات: السلوكيات الحقيقية، البدائل، التكاليف المدفوعة، الصعوبات المتكررة
+
+## قراءة موسعة
+
+- [موقع اختبار الأم الرسمي](https://momtestbook.com/)
+- [روب فيتزباتريك: اختبار الأم](https://www.robfitz.com/the-mom-test/)
diff --git a/docs/ar-sa/stage-1/building-prototype/images b/docs/ar-sa/stage-1/building-prototype/images
new file mode 120000
index 0000000..2d2129b
--- /dev/null
+++ b/docs/ar-sa/stage-1/building-prototype/images
@@ -0,0 +1 @@
+/Users/sanbu/Code/2025重要开源项目/easy-vibe/docs/zh-cn/stage-1/building-prototype/images
\ No newline at end of file
diff --git a/docs/ar-sa/stage-1/building-prototype/index.md b/docs/ar-sa/stage-1/building-prototype/index.md
new file mode 100644
index 0000000..1766222
--- /dev/null
+++ b/docs/ar-sa/stage-1/building-prototype/index.md
@@ -0,0 +1,604 @@
+---
+title: 'صنع النموذج الأولي - من تحليل الأعمال إلى تنفيذ نموذج منتج متعدد الصفحات'
+description: 'تجربة الدورة الكاملة من تحليل الأعمال إلى تنفيذ نموذج منتج متعدد الصفحات. تعلم كيف تطرح أسئلة الأعمال وتحلل المتطلبات وتستخدم AI IDE لتوليد تطبيقات صفحة واحدة ومتعددة الصفحات مع تحسين واختبار النموذج الأولي.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'حوالي <strong>8 ساعات</strong>'
+const relatedArticles =
+  relatedArticlesMap['ar-sa/stage-1/building-prototype'] ?? []
+</script>
+
+# المستوى الثالث: صنع النموذج الأولي عمليًا
+
+## دليل هذا الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['تحليل الأعمال', 'تصميم النماذج الأولية', 'البرمجة بمساعدة AI', 'تطبيقات متعددة الصفحات']" coreOutput="نموذج أولي لمنصة مواد التجارة الإلكترونية" expectedOutput="نموذج ويب تفاعلي">
+
+في الفصل السابق، تعلمنا كيفية **إيجاد أفكار جيدة** — انطلاقًا من احتياجات المستخدمين، للعثور على اتجاه يرغب الناس في الدفع مقابل него. لكن إيجاد الاتجاه هو مجرد الخطوة الأولى، **التحدي الحقيقي لمدير المنتج هو: كيف تحول المتطلبات الغامضة إلى منتج قابل للاستخدام.**
+
+في هذا الفصل، سنحل **مشكلة واقعية**: يلقي المدير عليك عبارة "استخدم AI لتحسين كفاءة نشر المنتجات على منصة التجارة الإلكترونية" — كيف تحولها إلى **نموذج أولي لمنتج قابل للاستخدام؟**
+
+على عكس صنع لعبة الثعبان أو الآلة الحاسبة، **الأعمال الحقيقية لا يمكن بناؤها بالخيال**:
+
+1. **تحديد نقطة الألم**: تحدث مع فريق التشغيل، واستخرج **نقطة الألم الحقيقية** من عبارة "تحسين الكفاءة" الغامضة
+2. **ركز على الأهم**: من بين مجموعة من المشاكل، حل **الأكثر إيلامًا أولًا**، لا تفكر في حل كل شيء دفعة واحدة
+3. **تحقق بسرعة**: استخدم AI IDE لصنع **نموذج أولي لصفحة واحدة** أولًا، ثم وسّعه إلى تطبيق متعدد الصفحات
+4. **اصنع شيئًا قابلًا للاستخدام**: سلم أخيرًا **منصة مواد تجارة إلكترونية يمكن عرضها وتشغيلها**
+
+سننتقل من **صنع الألعاب إلى صنع التطبيقات**، ونتعلم **التعاطف والتفكير في الاحتياجات الحقيقية للعملاء**.
+
+</ChapterIntroduction>
+
+::: info ℹ️ ملاحظة
+قد تحتوي هذه المقالة على بعض المصطلحات التجارية، إذا لم تفهمها يمكنك سؤال AI للحصول على شرح.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
+      { title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
+      { title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
+      { title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. تحديد المتطلبات قبل كتابة الكود
+
+في البرامج التعليمية السابقة، استخدمنا AI IDE لتوليد لعبة الثعبان وألعاب صغيرة متنوعة بسهولة، لكن هذه تُعد مجرد مشاريع ألعاب ولا يمكن تطبيقها في العمل والحياة؛ إذا أردنا أن تكون قدرات AI مفيدة حقًا للجميع، فيجب أن نجمع بين سيناريوهات الحياة والعمل في البرمجة بنمط vibe coding.
+
+في الفصل السابق تعلمنا كيفية إيجاد **أفكار جيدة يرغب الناس في الدفع مقابلها**، لكن إيجاد الاتجاه هو مجرد البداية. عند صنع منتج حقيقي، ستكتشف: **هناك فجوة هائلة بين معرفة "ماذا نصنع" ومعرفة "كيف نصنع".**
+
+هذه الفجوة هي **تحديد المتطلبات بشكل ملموس**.
+
+على سبيل المثال، في المشاريع الصفية أو الشخصية، نبدأ غالبًا من أبسط وظيفة قابلة للتنفيذ لصنع المنتجات والتطبيقات:
+
+- "اصنع لوحة Kanban، ضع المهام فيها."
+- "ساعدني في صنع أداة رسم."
+- "ساعدني في صنع برنامج لجمع الاستبيانات."
+
+غالبًا ما تكون هذه مجرد أداة أو وحدة وظيفية واحدة، بل لا يمكن حتى اعتبارها مشكلة عمل واضحة. الأهم من ذلك، **هذه الأفكار غالبًا ما تكون "أنت تعتقد أنها مفيدة" وليست "المستخدم يحتاجها حقًا".**
+
+في المشاريع على مستوى المؤسسات أو المشاريع الناشئة، غالبًا ما ينطلق مديرو المنتجات والمهندسون من مسألة أعمال أكبر. على سبيل المثال، يمكننا افتراض السيناريو التالي:
+
+<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
+  <div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ سيناريو الأعمال:</div>
+  <div style="color: #606266; line-height: 1.6;">
+    <p>أنت مدير منتج التجارة الإلكترونية لمتجر. أعطاك المدير مسألة غامضة لكنها تمثل ضغطًا كبيرًا:</p>
+    <p style="font-style: italic; margin-top: 10px;">"الجميع يستخدمون AI الآن لصنع الصور وكتابة النصوص، ويبدو الأمر بسيطًا جدًا. ساعدني في ذلك لجعل نشر المنتجات الجديدة على منصة التجارة الإلكترونية أكثر كفاءة."</p>
+  </div>
+</el-card>
+
+في هذه اللحظة قد تفكر: "المدير يحلم مرة أخرى!"، ومع ذلك، في العمل الفعلي هذه الظاهرة المتمثلة في اتخاذ القرار بعبارة غامضة شائعة جدًا، بل أكثر تكرارًا من طلبك للشاي بالحليب أسبوعيًا. لذلك، لتكون موظفًا مؤهلاً (أو CEO لشركة ناشئة)، يجب أن نتعلم كيفية الانتقال من صنع الأدوات الشخصية إلى صنع نماذج أولية لمنتجات حقيقية.
+
+بما أننا تعلمنا استخدام AI IDE، إذا فكرت مليًا، هذا المطلب بسيط جدًا في الواقع، أليس كذلك؟ فقط أعطِ AI prompt بناءً على هذا، وارمه لـ Agent وستنتهي المشكلة!
+
+```
+يرجى الرجوع إلى متطلباتي xxxx،
+وساعدني في تصميم منصة مواد التجارة الإلكترونية،
+تتضمن وظائف إنشاء وإدارة مواد مثل أوصاف المنتجات والصور ومقاطع الفيديو.
+```
+
+إذا حمست وأرسلت هذا المطلب مباشرة كنموذج أولي للمدير — تهانينا، مكافأة هذا الربع ستُلغى!
+
+**لماذا يحدث هذا؟ هذا هو الألم الأساسي الذي يجب علينا حله:**
+
+عندما تعلمنا استخدام AI IDE سابقًا، كنا نصنع **مشاريع ألعاب نستخدمها نحن** مثل لعبة الثعبان والآلة الحاسبة — وظائف بسيطة، نعرف ما نريده، ونستخدمها بأنفسنا. لكن **سيناريوهات الأعمال الحقيقية مختلفة تمامًا**:
+
+- **أنت لست المستخدم**: المدير يريد "تحسين الكفاءة"، لكنك لا تعرف كيف يعمل فريق التشغيل يوميًا وأين يواجهون العقبات؛
+- **AI لا يفهم الأعمال أيضًا**: إذا أعطيت AI مطلبًا غامضًا، سيخمن بناءً على معرفته العامة، والنتيجة قد تبدو جيدة لكنها غير قابلة للاستخدام عمليًا؛
+- **الفكرة الجيدة لا تساوي منتجًا جيدًا**: قد تعتقد أن "إضافة وظيفة إنشاء AI" رائعة، لكن المستخدم قد لا يحتاجها أصلًا، أو قد يكون استخدامها أكثر إزعاجًا من الطريقة السابقة.
+
+**لهذا السبب يجب أن نتعلم "من الفكرة إلى فهم المستخدم"** فقط عندما يحل إبداعك مشكلة شخص آخر حقًا، وتطرح أسئلة وتفهم الأعمال بعمق، يمكنك صنع أشياء ذات قيمة حقيقية. (الفكرة الجيدة حتى أكثر أهمية من التقنية الجيدة)
+
+### 1.1 من الخيال إلى الواقع: تعلم كيف تطرح أسئلة الأعمال
+
+::: info 💡 أولًا: ما هي المتطلبات؟ ما هي الأعمال؟
+
+**المتطلبات** هي ما يريده المستخدم حقًا، هي المشاكل التي يواجهها ويريد حلها. مثل "يريد المدير أن أجعل نشر المنتجات أسرع"، هذا مطلب.
+
+**الأعمال** هي ما يفعله المستخدم فعليًا كل يوم، طريقة عملهم. مثل ما يفعله فريق تشغيل التجارة الإلكترونية يوميًا: نشر المنتجات، تغيير الأسعار، صنع الصور، عرض البيانات... هذه كلها أعمال.
+
+**لماذا نهتم بالأعمال؟**
+لأنك إذا لم تفهم الأعمال، فالأداة التي تصنعها قد تكون "تبدو جيدة لكن لا أحد يستخدمها". فقط عندما تفهم حقًا كيف يعمل المستخدم يوميًا وأين يواجه العقبات، يمكنك صنع ما يساعدهم حقًا.
+
+:::
+
+من أبسط منظور، يمكنك أن تسأل نفسك أولاً بضعة أسئلة:
+
+- عندما يقول المدير "**كفاءة أعلى**"، ماذا يعني تحديدًا؟ هل يعني **العمل بشكل أسرع**؟ أم **إنفاق أقل**؟ أم **بيع المزيد**؟
+- كيف يتم نشر المنتجات حاليًا؟ **أين توجد العقبات**؟
+- كم **منتج جديد** يُنشر يوميًا؟ لكل منتج كم **صورة** يجب صنعها وكم **كلمة** يجب كتابتها؟
+- في العمل الحالي، **أي شيء هو الأكثر إزعاجًا** و**أقل ما تريد فعله**؟
+
+لكن هذه كلها أسئلة تخمينية، يجب أن نسأل فريق أعمال التجارة الإلكترونية مباشرة، "أين تكمن صعوباتكم واهتماماتكم؟"، للحصول على إجابات أكثر دقة من خلال التواصل:
+
+::: info 📋 نتائج مقابلة الأعمال الحقيقية
+
+سألنا أشخاصًا يعملون في تشغيل التجارة الإلكترونية، وقالوا هذه الشكاوى:
+
+**1. أشياء كثيرة جدًا ومتنوعة**
+- شخص واحد يدير عدة متاجر، لكل متجر العديد من المنتجات التي يجب التعامل معها؛
+- مشغول طوال اليوم: **نشر منتجات جديدة**، **تغيير الأسعار**، **صنع الصور**، **عرض البيانات**، شيء لم ينتهِ قبل أن يبدأ شيء آخر.
+
+**2. صنع المحتوى ليس مرة واحدة بل تجربة وتكرار**
+- ابدأ أولاً باستخدام **الصور من المصنع** أو **المواد المستخدمة سابقًا** أو **الصور المرجعية من الإنترنت**، ونشر المنتجات بسرعة **للتجربة**؛
+- أنفق مبلغًا صغيرًا على الترويج، **شاهد هل هناك من يشتري**؛
+- فقط **المنتجات التي تباع جيدًا**، سيتم بذل الجهد في صنع صورها وكتابة تفاصيلها وتصوير مقاطع فيديو لها.
+
+:::
+بعد مقابلة فريق الأعمال، نحن متحمسون، لأننا الآن قادرون حقًا على صنع نموذج أولي مثالي يتناسب مع الأعمال! — خطأ مرة أخرى، إذا حاولنا "إرضاء جميع المطالب دفعة واحدة"، سيكون المنتج ضخمًا جدًا ومن الصعب تنفيذه في وقت الدورة. لذلك، نحتاج إلى مزيد من التنظيم والتضييق للعثور على نقطة الألم الأساسية الحقيقية.
+
+### 1.2 من التوسع إلى التضييق: تحديد نقطة الألم الأساسية والوظائف
+
+::: info 💡 لماذا "التضييق"؟ ما هي "نقطة الألم"؟
+
+**المشاكل كثيرة، لكن أيها نبدأ بها أولًا؟**
+قد يخبرك المستخدم بحزمة من المشاكل: A مزعج، B مزعج، C مزعج... لكن إذا حاولت حل جميع المشاكل دفعة واحدة، قد لا تحل أيًا منها بشكل جيد. لذلك يجب **التضييق** — أي اختيار **الأكثر إيلامًا والأكثر إلحاحًا والأكثر قابلية للحل** من بين مجموعة من المشاكل للبدء به.
+
+**ما هي نقطة الألم؟**
+هي المشكلة المحددة التي **يزعجها المستخدم أكثر وتستهلك وقته أكثر ويريد حلها بشدة**. ليست "أعتقد أنها مفيدة"، بل شيء **يشتكو منه المستخدم يوميًا ويتألم في كل مرة يفعله**.
+
+:::
+
+من خلال المقابلة أعلاه، اكتشفنا أن فريق التشغيل يواجه العديد من المشاكل: انقطاع الإيقاع بسبب الأنشطة، إدارة متاجر متعددة، التنقل بين النشر/تغيير الأسعار/صنع الصور/عرض البيانات...
+
+إذا حاولنا "حل جميع هذه المشاكل"، سنصنع أداة **ضخمة وشاملة لكنها غير سهلة الاستخدام**.
+
+دعنا نصنف هذه المشاكل (يمكنك طلب المساعدة من AI)، هناك تقريبًا ثلاث فئات:
+
+1. **مشاكل الإيقاع**: متى يتم النشر، متى يتم تعديل الأسعار؛
+2. **مشاكل الكفاءة**: كيفية إدارة متاجر ومنتجات متعددة في نفس الوقت؛
+3. **مشاكل المحتوى**: كيفية صنع صور ومنتجات تجارية بسرعة.
+
+بالنسبة لدورتنا، الأنسب للبدء به هو **الفئة الثالثة: مشاكل صنع المحتوى**. لكن "صنع المحتوى بسرعة" لا يزال تجريديًا بعض الشيء، دعنا نسأل فريق الأعمال عن العقبات المحددة:
+
+::: info 📋 فريق الأعمال يقول: هناك مكانان مؤلمان في صنع المحتوى
+
+**الألم 1: صنع الصور والنصوص بشكل جماعي مرهق جدًا**
+- المواد متناثرة في كل مكان: القرص السحابي، سجلات WeChat، منصة الخلفية... **العثور عليها صعب**؛
+- يجب نشر العديد من المنتجات مرة واحدة، **لا يوجد وقت للإتقان واحدًا تلو الآخر**، فقط تُركب بسرعة؛
+- المتطلبات ليست عالية، **يكفي أن تكون قابلة للعرض والنشر**، لا تحتاج إلى أن تكون جميلة.
+
+**الألم 2: الحلول الجيدة لا يمكن حفظها لإعادة الاستخدام**
+- العناوين والتخطيطات الجيدة التي تم صنعها سابقًا، **عندما نريد استخدامها مرة أخرى لا نجدها**؛
+- الحلول متناثرة في سجلات المحادثة وروابط المنتجات السابقة؛
+- عند الحاجة لاستخدامها يجب **البحث طويلاً ونسخ ولصق وتعديل لفترة طويلة**؛
+- ينقص أداة يمكن **الحفظ والإدارة والتطبيق المباشر**.
+
+:::
+
+بناءً على نقطتي الألم هاتين، سنصنع أداة بسيطة: **مساعدة فريق التشغيل في صنع الصور والنصوص بشكل جماعي، وحفظ الحلول الجيدة للاستخدام المباشر في المرة القادمة**.
+
+ستقوم بفعلين فقط (يمكنك طلب المساعدة من AI للتفصيل، وتذكر حذف الوظائف بناءً على ملاحظات الأعمال باستمرار):
+
+::: info الوظيفة 1: إنشاء صور ومنتجات التجارة الإلكترونية بشكل جماعي
+
+**ماذا تفعل؟**
+إعطاء النظام بعض معلومات المنتج، وسيقوم تلقائيًا بإنشاء صور المنتج والنصوص القابلة للنشر على منصات التجارة الإلكترونية (مثل Douyin و Taobao).
+
+**المدخلات**
+| النوع | المحتوى |
+|------|------|
+| معلومات المنتج | الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، إلخ |
+| صور المنتج | صور بخلفية بيضاء أو صور مشاهد بسيطة |
+| صور مرجعية | لقطات شاشة لمنتجات بيعت جيدًا سابقًا أو روابط مرجعية |
+| طريقة الاستيراد | استيراد جماعي عبر Excel، أو ملء مباشر على الصفحة |
+
+**المخرجات (مواد التجارة الإلكترونية المولدة)**
+- **الصورة الرئيسية للمنتج**: صورة عرض المنتج مع نقاط بيع نصية (الصورة الأولى التي يراها المستخدم عند التصفح)
+- **عنوان المنتج**: مجموعة كلمات مفتاحية يمكن البحث عنها
+- **نص نقاط البيع**: 1-2 جملة جذابة للمشترين
+- كلها **منتجات جاهزة يمكن تعديلها قليلاً ونشرها**
+
+**التأثير**
+- سابقًا: كل منتج يجب البدء من الصفر لصنع الصور وكتابة النصوص
+- الآن: رمي مجموعة من المنتجات في النظام، وبعد التوليد اختر وعدّل
+
+:::
+
+::: info الوظيفة 2: حفظ الحلول الجيدة كقوالب
+
+**المدخلات**
+| النوع | المحتوى |
+|------|------|
+| مجموعة كاملة | الصورة الرئيسية + العنوان + النص |
+
+**المخرجات**
+| الوظيفة | الوصف |
+|------|------|
+| التطبيق | عند صنع منتجات جديدة، استخدم القالب للتوليد التلقائي |
+| التعديل | تعديل العنوان والنص مباشرة |
+| الإدارة | إعطاء اسم وإضافة علامات (مثل "قالب حقائب رجالية" "عنوان ترويج كبير")، للسهولة في البحث |
+
+**التأثير**
+1. استيراد منتجات جديدة
+2. الاختيار: ترك النظام يولد افتراضيًا، أو **استخدام القالب الذي حفظته**
+3. النظام يطبق نمط القالب تلقائيًا ويخرج صور ونصوص جديدة
+
+:::
+
+---
+
+**مراجعة ما فعلناه للتو:**
+
+1. **اسأل أولًا**: لا تبدأ بالعمل مباشرة، بل اسأل فريق التشغيل "ما الذي يزعجكم أكثر"؛
+2. **اعثر على نقطة الألم**: اكتشفنا أن أكثر ما يؤلمهم هو "صنع الصور وكتابة النصوص مرهق جدًا" و"الحلول الجيدة لا يمكن حفظها"؛
+3. **ضيق النطاق**: لا نصنع منصة شاملة، بل نفعل وظيفتين فقط: "إنشاء الصور والنصوص بشكل جماعي + حفظ القوالب".
+
+**لماذا هذا مهم؟**
+
+الخطأ الشائع للمبتدئين في صنع المنتجات: كلما زادت الوظائف كان ذلك أفضل. لكن ما يحتاجه المستخدم حقًا هو **حل المشكلة الأكثر إيلامًا**. صنع مجموعة من الوظائف لكنها كلها غير سهلة الاستخدام، أفضل من صنع وظيفة أو اثنتين تساعد المستخدم حقًا.
+
+**جوهر تفكير المنتج والأعمال:**
+- لا تفكر "أعتقد أن المستخدم يحتاج إلى ماذا"
+- اذهب واسأل المستخدم "ماذا تفعل كل يوم؟ أين الألم؟"
+- من مجموعة من المشاكل **ضيق** إلى الأكثر إيلامًا والأكثر قابلية للحل
+- اصنع **أصغر نسخة قابلة للاستخدام** أولًا، ثم حسّن تدريجيًا
+
+هذا ما يجب التفكير فيه قبل كتابة الكود. الكود مجرد أداة، **فهم المستخدم وتحديد المشكلة بدقة** هو الخطوة الأولى.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
+      { title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
+      { title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
+      { title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. نموذج أولي في 10 دقائق: دع AI IDE ينفذ "الوظيفة الأساسية"
+
+::: info 💡 اقتراح خطة البرمجة
+إذا كنت تشعر أن IDE الحالي ليس ذكيًا بما فيه الكفاية، أو أنك استهلكت حصتك بسرعة، يمكنك شراء **خطة برمجة Plan**. راجع [هذه المقالة](../../stage-2/backend/modern-cli/) لاستخدام Claude في البرمجة.
+:::
+
+التفكير جيد، لكن لا تفرط في التفكير، دعنا نتحكم في التأمل المفرط ونحاول البدء بصنع النموذج الأولي من صفحة واحدة.
+
+### 2.1 الخطوة الأولى: أخبر AI بما تريده بلغة بسيطة
+
+في البداية لا تسعى للغة مثالية في prompt، ابدأ من أكثر تعبير طبيعي لديك. تمامًا مثل وصف المتطلبات لزميل العمل، أخبر AI بما تريد صنعه بلغة بسيطة، ثم دع AI يساعدك في تحسينه إلى تعبير أكثر احترافية.
+
+#### 2.1.1 ابدأ بالوصف الشفهي (موصى به للمبتدئين)
+
+صف فكرتك بكلماتك الخاصة، حتى لو كانت خشنة لا بأس:
+
+```
+أريد صنع أداة تساعد فريق تشغيل التجارة الإلكترونية في إنشاء الصور الرئيسية والنصوص للمنتجات تلقائيًا.
+فريق التشغيل يصنع الصور والنصوص يدويًا واحدًا تلو الآخر، وهذا مزعج جدًا.
+فكرتي هي: يرفعون معلومات المنتج، والنظام يولد مجموعة من المسودات تلقائيًا،
+وفريق التشغيل يختار الجيد وعدّل قليلاً ليكون جاهزًا للاستخدام.
+
+ابدأ بأبسط إصدار: صفحة واحدة، على اليسار ملء معلومات المنتج،
+على اليمين عرض النتائج المولدة. يمكن رفع الصور وملء النصوص،
+بعد التوليد عرض معاينة الصورة الرئيسية والنصوص.
+```
+
+بعد ذلك، أرسل هذه الفقرة إلى AI (مثل ChatGPT أو Claude)، واطلب منه مساعدتك في التوسيع. عادةً ما سيساعدك AI في إضافة تفاصيل لم تفكر فيها، وينظم أفكارك بشكل أوضح، وفي النهاية يولد prompt مناسبًا لإرساله إلى AI IDE.
+
+يمكنك أن تقول لـ AI بهذه الطريقة:
+```
+ساعدني في توسيع الأفكار أعلاه، وتنظيمها في وثيقة منطق أعمال واضحة،
+ثم ولّد prompt مناسبًا لإرساله إلى AI IDE (مثل Cursor أو Trae)،
+لاستخدامه لتوليد كود نموذج أولي لتطبيق صفحة واحدة.
+```
+
+ستُرجع AI وثيقة منظمة من المتطلبات و prompt المقابل. تحقق منها بنفسك، واحذف الوظائف غير الضرورية، وبعد التأكد من صحتها استخدمها لتوليد الكود.
+
+فائدة هذا النهج: ما تصفه شفهيًا هو أفكارك الحقيقية، لكن قد تفوت بعض التفاصيل المهمة. عندما يساعدك AI في التوسيع، قد يسأل "هل تريد دعم الرفع الجماعي؟" وهو سؤال لم تفكر فيه، مما يساعدك في التحقق الإضافي. يمكنك اختيار الاحتفاظ أو حذف الوظائف غير العملية بناءً على الملاحظات، وتحديد prompt النسخة الأولى الذي تعطيه لـ AI من خلال التعديل المتكرر.
+
+#### 2.1.2 تخطي مرحلة التوسيع: أرسل وثيقة الأعمال المنظمة مباشرة إلى AI
+
+إذا كنت قد نظمت بالفعل وثيقة منطق الأعمال في الفصول السابقة (مثل وصف المتطلبات المكتوب بلغة بسيطة)، يمكنك استخدام التنسيق أدناه مباشرة لإرساله إلى AI IDE، متخطيًا خطوة توسيع AI. مناسب للحالات التي تكون فيها المتطلبات واضحة بالفعل وتريد البدء مباشرة في كتابة الكود:
+
+```
+ساعدني في تنفيذ تطبيق صفحة واحدة بناءً على منطق الأعمال للتحقق من وظائف اللعب الأساسية.
+
+مرجع منطق الأعمال كما يلي:
+1. مساعدة فريق التشغيل في إنشاء المسودة الأولى للصور والنصوص بشكل جماعي:
+- **المدخلات (دعم الرفع المباشر والاستيراد الجماعي للمواد):**
+  - المعلومات الأساسية للمنتج: الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، الفئة المستهدفة، إلخ؛
+  - صور المنتج: صور بخلفية بيضاء / صور مشاهد بسيطة؛
+  - كل توليد يدعم رفع لقطات شاشة لمنتجات ناجحة سابقًا أو روابط مرجعية إضافية؛
+  - دعم الاستيراد الجماعي عبر Excel، أو الإدخال/الرفع عبر الإنترنت على الصفحة.
+  - دعم تحديد ما إذا كان سيتم حفظ مواد المنتج في مكتبة المواد على الصفحة، للسهولة في الاستخدام لاحقًا
+- **المخرجات (محتوى يمكن نشره مباشرة أو نشره بعد تعديل بسيط):**
+  - لكل منتج مسودة صورة رئيسية "مقبولة تحتوي على نقاط بيع أساسية"؛
+  - عنوان "ببنية معقولة يحتوي على كلمات مفتاحية أساسية" + 1-2 جملة نص نقاط بيع.
+- **التغيير المتوقع في طريقة الاستخدام:**
+  من البدء من الصفر لكل دفعة منتجات إلى رمي مجموعة منتجات في النظام، وأخذ المسودات المولدة للفرز والتعديل الدقيق.
+
+ابدأ بالوظيفة الأولى، الوظيفة الثانية (مكتبة القوالب) ستُضاف لاحقًا.
+```
+
+#### 2.1.3 طريقة المبرمج (متقدم): دع AI يساعدك في كتابة "prompt الـ prompt"
+
+إذا كنت تريد تحكمًا أدق في عملية توليد الكود، يمكنك أولًا جعل AI (مثل ChatGPT) يولد prompt مخصصًا لـ AI IDE بناءً على متطلباتك:
+
+```
+بناءً على الأفكار أدناه، ساعدني في كتابة prompt لـ coding Agent،
+أحتاج إلى استخدام هذا prompt لتوليد الكود.
+
+[الصق وصف منطق الأعمال هنا]
+
+المتطلبات:
+1. يجب أن يتضمن prompt وصفًا واضحًا لتخطيط الصفحة
+2. تحديد هياكل البيانات والمنطق التفاعلي
+3. تحديد مجموعة التقنيات (مثل React + Tailwind)
+4. قائمة نقاط الوظائف الأساسية التي يجب تنفيذها
+```
+
+عادةً ما سُولد AI prompt منظمًا مشابهًا لما يلي:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png)
+
+يمكنك تعديل هذا prompt قليلاً ثم إرساله إلى AI IDE لتوليد الكود.
+
+### 2.2 الخطوة الثانية: دع AI IDE يولد الكود مباشرة
+
+#### 2.2.1 التحضير: فهم العمليات الأساسية لـ AI IDE
+
+إذا لم تكن معتادًا بعد على الاستخدام الأساسي لـ AI IDE (مثل Cursor و Trae و Windsurf)، نوصي بأولًا قراءة [البرنامج التعليمي الأساسي لـ IDE](/ar-sa/appendix/2-development-tools/ide-basics/) في الملحق، لمعرفة كيفية:
+- إنشاء مشروع جديد
+- التحدث مع AI Agent
+- فهم عملية توليد الكود من قبل AI
+
+#### 2.2.2 ابدأ توليد الكود
+
+الآن حصلت على prompt الأولي، لنأخذ أسلوب prompt الأول كمثال، ودع AI يساعدنا في توليد الكود. أولًا أنشئ نافذة ومجلدًا مقابلًا، وافتح المجلد (أنشئ مشروعًا جديدًا في عنوان المجلد المفضل لديك):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png)
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png)
+
+في الشريط الجانبي اختر نموذجًا تفضله (يوصى بـ gemini أو gpt أو glm أو kimi أو minimax، إلخ)، وأدخل prompt الذي حصلت عليه في الخطوة الأولى:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png)
+
+بعد النقر على توليد، سنرى الجزء المألوف، سيقوم AI بناءً على prompt بتخطيط هيكل المشروع والملفات الضرورية وإعطاء المحتوى الأولي لكل ملف.
+
+::: warning ⚠️ ملاحظة خاصة: قد يتوقف AI وينتظر تأكيدك
+أثناء عملية التوليد، غالبًا ما **يتوقف AI Agent لينتظر إدخالك أو تأكيدك**، مثل:
+- السؤال عما إذا كنت ستستمر في الخطوة التالية
+- طلب منك الضغط على Enter لتأكيد عملية معينة
+- السؤال عن اختيارك في تفصيل تقني معين
+
+**إذا رأيت أن AI لا يتحرك، تحقق أولًا من واجهة المحادثة، لمعرفة ما إذا كان ينتظر ردك.** العديد من المبتدئين يعتقدون أن AI يفكر، لكنه في الواقع توقف منذ فترة وينتظرك. رد بفاعلية أو اضغط Enter، وسيستمر AI في العمل.
+:::
+
+في هذه اللحظة لا تنسَ الضغط على Enter لتأكيد المعلومات (وإلا ستعلق في الانتظار، بعض AI IDE لا تواجه هذه المشكلة):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png)
+
+إذا واجهت السيناريو التالي، هذا يعني أنه تم تشغيل خدمة محليًا، تحتاج إلى النقر على تخطي، وإلا ستعلق على هذه الواجهة (إذا لم يظهر شيء بعد اكتمال توليد الكود، تحتاج إلى قول بنشاط "ساعدني في تشغيل هذا المشروع"):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png)
+
+::: info 💡 شرح السيناريو
+**شرح السيناريو**: أنشأت مشروع React + TypeScript باستخدام `npm create vite@latest` (easy-vibe-web)، وبعد الإنشاء سيقوم الكمبيوتر تلقائيًا بتشغيل هذه صفحة الويب "لتسهيل رؤية التأثير فورًا".
+
+**الخدمة المحلية**: يمكن فهمها على أن الكمبيوتر فتح نافذة عرض صفحة ويب مؤقتة، تعمل فقط على جهازك، لا يمكن للآخرين الوصول إليها.
+
+**localhost (العنوان المحلي)**: `localhost` يعني "هذا الكمبيوتر نفسه"، عندما يتصفحه المتصفح، فإنه في الواقع يزور صفحة الويب التي تعمل على جهازك.
+
+**المنفذ**: يمكن فهم المنفذ على أنه رقم لتمييز خدمات الويب المختلفة التي تعمل على نفس الكمبيوتر، هذا المشروع يستخدم 5174.
+
+**رابط الوصول `http://localhost:5174/`**: هذا العنوان يعني "زور صفحة الويب رقم 5174 على هذا الكمبيوتر"، افتحها في المتصفح لرؤية التأثير.
+
+**شرح هذا السيناريو**: النظام أراد استخدام 5173 في الأصل، لكن هذا الرقم كان مشغولاً فتم التبديل تلقائيًا إلى 5174، هذا أمر طبيعي.
+
+**دليل التشغيل**: افتح المتصفح، أدخل `http://localhost:5174/` في شريط العنوان واضغط Enter، لرؤية صفحة المشروع الحالية.
+:::
+
+بعد التأكد من كل شيء، انتظر قليلاً حتى يعمل الذكاء الاصطناعي، يمكننا الحصول على النتيجة التالية:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png)
+
+يمكننا رؤية أن هناك بالفعل رسم وظيفي أولي، لكن واجهة الواجهة الأمامية قبيحة جدًا، في هذه اللحظة يمكننا محاولة التحدث مع AI مباشرة لتحسين عرض الواجهة:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png)
+
+بعد التحسين يمكننا الحصول على واجهة أجمل:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png)
+
+يمكنك تعديل وظائف صفحة الويب حسب احتياجاتك، ويمكنك إرفاق لقطات شاشة والسؤال بحرية، مثل: "أنا لا أحتاج وظيفة الاستيراد الجماعي حاليًا، ساعدني في إلغائها"، "الأشياء التي يجب إدخالها على اليسار كثيرة جدًا، ساعدني في الاحتفاظ بـ xxxxx فقط". حتى يمكنك الرجوع إلى مواقع ويب ناضجة أخرى، مثل هنا يمكننا الرجوع مباشرة إلى منتج تصميم من Google كـ "مرجع" (يمكنك لصق لقطة شاشة لأي موقع ويب ناضج تحبه):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png)
+
+أخيرًا يمكننا الحصول على:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png)
+
+### 2.3 ماذا تفعل عند مواجهة أخطاء
+
+في الممارسة الفعلية، مواجهة الأخطاء أمر حتمي، هذا طبيعي، ولا يعني أنك أخطأت في مكان ما. لا تحتاج إلى فهم الخطأ، فقط أعطِ AI "ما تراه" بالكامل.
+
+طرق المعالجة الشائعة ثلاثة فقط:
+
+- **الطريقة الأولى: خطأ في الصفحة أو الطرفية**
+  عندما تصبح الصفحة حمراء أو شاشة بيضاء، أو تظهر كومة من النصوص الحمراء في الطرفية، فقط التقط صورة شاشة أو انسخ جميع معلومات الخطأ وأرسلها إلى AI، واطلب منه الإصلاح.
+
+- **الطريقة الثانية: الوظيفة خاطئة لكن لا يوجد خطأ**
+  مثل عدم استجابة الزر، أو عدم عرض البيانات، أو اختلال الأنماط، صف "ماذا يحدث الآن + ماذا تريد في الأصل" بلغة بسيطة، وأضف لقطة شاشة عند الضرورة.
+
+- **الطريقة الثالثة: غير متأكد مما إذا كانت هناك مشكلة**
+  يمكنك سؤال AI مباشرة: "ساعدني في فحص ما إذا كانت هناك مشاكل واضحة في هذه الوظيفة، وهل يحتاج تعديل."
+
+#### 2.3.1 أسئلة شائعة للمبتدئين
+
+- **س: لا أعرف أين توجد معلومات الخطأ؟**
+- ج: بشكل عام، انظر إلى كل "النصوص الحمراء". في الطرفية أو وحدة التحكم أو الصفحة، اعثر على التلميح الأحمر، حدد الكل وانسخه إلى AI.
+
+- **س: ماذا أفعل إذا أصلح AI ولا يزال نفس الخطأ يظهر؟**
+- ج: هذا شائع. استمر في التقاط صورة أو نسخ أحدث معلومات الخطأ وإرسالها إليه، واطلب منه المزيد من الإصلاح بناءً على التعديل السابق.
+
+- **س: هل أحتاج إلى فهم خطة إصلاح AI بالكامل؟**
+- ج: لا تحتاج إلى فهم كل شيء دفعة واحدة. يمكنك التركيز على نقطة أو نقطتين في كل مرة، بمرور الوقت ستفهم المزيد والمزيد من الكود، مثلما تتراكم مفردات اللغة الإنجليزية.
+
+- **س: ماذا أفعل إذا تم التعديل عدة مرات ولم يتم حل المشكلة؟**
+- ج: يمكنك تجربة:
+  - استخدام وظيفة "التراجع عن الإصدار" في IDE، والعثور على زر التراجع في محادثة الذكاء الاصطناعي، والعودة إلى إصدار يعمل وإعادة البدء؛
+  - تغيير النموذج أو تعديل prompt، وجعل الظاهرة ومعلومات الخطأ أكثر تحديدًا؛
+  - حزم "الكود الحالي + سجل الأخطاء + السلوك المتوقع"، وأرسلها دفعة واحدة إلى AI، واطلب منه إعادة هيكلة الجزء المشكل بالكامل.
+
+## 3. التوسع من صفحة واحدة إلى تطبيق متعدد الصفحات
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
+      { title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
+      { title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
+      { title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
+    ]" />
+  </ClientOnly>
+</div>
+
+عندما يكتمل توليد منطق الوظيفة الأساسية بشكل أساسي، يمكننا توليد باقي المحتوى. على سبيل المثال، في هذه اللحظة النقر على الإعدادات أو بعض الأزرار لا فائدة منه على الإطلاق.
+
+يمكنك أن تطلب من AI التحقق بناءً على متطلبات prompt الأعمال، وتوليد الأجزاء غير المولدة، أو جعل AI يكمل مباشرة الصفحات غير المنفذة، ويمكنك أيضًا تحديد صفحة معينة وطلب من AI إكمالها حتى تصبح الصفحة قابلة للنقر والوظائف تعمل بشكل طبيعي:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png)
+
+بعد الانتظار قليلاً، يمكننا رؤية أن البرنامج قد أضاف عدة صفحات ووظائف تفاعلية على الأساس السابق:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png)
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png)
+
+في هذه اللحظة تحتاج فقط إلى النقر يدويًا على كل وظيفة وزر تهتم به، والتأكد من أن التفاعل طبيعي، وإذا كانت هناك وظائف لا تعمل، يمكنك التواصل مع AI وطلب منه المساعدة في الإصلاح.
+
+## 4. اجعل النموذج الأولي "يبدو احترافيًا"
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'تحليل المتطلبات', description: 'من الغامض إلى المحدد' },
+      { title: 'التحقق من صفحة واحدة', description: 'تنفيذ الوظيفة الأساسية' },
+      { title: 'التوسع متعدد الصفحات', description: 'تحسين بنية التطبيق' },
+      { title: 'التحسين والتجميل', description: 'تحسين تجربة المستخدم' }
+    ]" />
+  </ClientOnly>
+</div>
+
+بعد وجود بنية متعددة الصفحات، الخطوة الأخيرة هي تحويل النموذج الأولي من "يعمل" إلى "سهل الاستخدام ومظهر احترافي". هذا يتطلب منا تجربة العملية الكاملة يدويًا (عملية المستخدم)، وجعل الأجزاء التي لا تعمل يصلحها AI، حتى نتمكن من محاكاة مستخدم جديد يمر بجميع العملية من الصفر في كل مرة نحدّث فيها، والحصول على النتائج المتوقعة.
+
+دعنا نراجع المتطلبات الأولية:
+
+```
+1. مساعدة فريق التشغيل في إنشاء المسودة الأولى للصور والنصوص بشكل جماعي:
+- **المدخلات (دعم الرفع المباشر والاستيراد الجماعي للمواد):**
+  - المعلومات الأساسية للمنتج: الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، الفئة المستهدفة، إلخ؛
+  - صور المنتج: صور بخلفية بيضاء / صور مشاهد بسيطة؛
+  - كل توليد يدعم رفع لقطات شاشة لمنتجات ناجحة سابقًا أو روابط مرجعية إضافية؛
+  - دعم الاستيراد الجماعي عبر Excel، أو الإدخال/الرفع عبر الإنترنت على الصفحة.
+  - دعم تحديد ما إذا كان سيتم حفظ مواد المنتج في مكتبة المواد على الصفحة
+- **المخرجات (محتوى يمكن نشره مباشرة أو نشره بعد تعديل بسيط):**
+  - لكل منتج مسودة صورة رئيسية "مقبولة تحتوي على نقاط بيع أساسية"؛
+  - عنوان "ببنية معقولة يحتوي على كلمات مفتاحية أساسية" + 1-2 جملة نص نقاط بيع.
+- **التغيير المتوقع في طريقة الاستخدام:**
+  من البدء من الصفر لكل دفعة منتجات إلى رمي مجموعة منتجات في النظام، وأخذ المسودات المولدة للفرز والتعديل الدقيق.
+
+2. تحويل المخرجات الجيدة إلى مكتبة قوالب قابلة لإعادة الاستخدام:
+- **ما الذي يمكن حفظه؟**
+  - أي مخرج يعتقد فريق التشغيل أنه "جيد" يمكن حفظه بنقرة واحدة:
+    - يمكن أن يكون مجموعة كاملة من "الصورة الرئيسية + العنوان + نقاط البيع"؛
+    - أو حفظ جزء منه فقط، مثل بنية عنوان معينة أو نص نقاط بيع.
+- **ماذا يمكن فعله بعد الحفظ؟**
+  - **إعادة الاستخدام:**
+    - استخدم هذا المحفوظ، طبّق على مجموعة جديدة من معلمات المنتج، وأعد توليد مسودات الصور والنصوص؛
+    - أو على نفس المنتج، ولّد نسخًا متعددة بناءً على هذا القالب لاختبار A/B.
+  - **التعديل:**
+    - تعديل نص العنوان / نص نقاط البيع مباشرة؛
+    - إذا كان يدعم تعديل الصور، يمكن تعديل النصوص والملصقات في الصورة الرئيسية بدقة.
+  - **الإدارة:**
+    - إعطاء اسم للمحفوظ وإضافة علامات (مثل "قالب صور حقائب رجالية" "بنية عنوان ترويج كبير")، ودعم التصنيف حسب المتجر، للسهولة في البحث لاحقًا.
+- **كيف تستخدم عند النشر الجديد؟**
+  - بعد استيراد منتجات جديدة، يمكن لفريق التشغيل الاختيار:
+    - استخدام منطق التوليد الافتراضي للنظام، أو
+    - تحديد "استخدام قالب محفوظ معين للتوليد"؛
+  - النظام يطبق تلقائيًا بنية ونمط القالب بناءً على بيانات المنتج الجديدة، ويخرج مسودة جديدة للصورة الرئيسية + العنوان + نقاط البيع.
+```
+
+إذا كنت تحتاج في كل مرة إلى إنشاء بيانات جديدة للاختبار، فهذا يستغرق وقتًا طويلاً، في هذه الحالة نستخدم عادةً طريقة تسمى "بيانات الاختبار"، يمكنك التواصل مع AI بالطريقة التالية، وطلب منه إنشاء مدخل لبيانات اختبار سريعة على الواجهة، لتسهيل اختبار ما إذا كانت جميع الوظائف تعمل بشكل طبيعي:
+
+```
+أحتاج الآن إلى اختبار عملية المستخدم هذه، للتأكد من أنه يمكنه إكمالها بالكامل، يرجى توليد مدخل بيانات اختبار بناءً على المتطلبات أدناه، لتمكيني من النقر واختبار ما إذا كانت العملية الكاملة تعمل بشكل طبيعي بسرعة:
+1. مساعدة فريق التشغيل في إنشاء المسودة الأولى للصور والنصوص بشكل جماعي:
+- **المدخلات (دعم الرفع المباشر والاستيراد الجماعي للمواد):**
+  - المعلومات الأساسية للمنتج: الاسم، الفئة، العلامة التجارية، المادة، الحجم، اللون، الفئة المستهدفة، إلخ؛
+  - صور المنتج: صور بخلفية بيضاء / صور مشاهد بسيطة؛
+  - كل توليد يدعم رفع لقطات شاشة لمنتجات ناجحة سابقًا أو روابط مرجعية إضافية؛
+  - دعم الاستيراد الجماعي عبر Excel، أو الإدخال/الرفع عبر الإنترنت على الصفحة.
+  - دعم تحديد ما إذا كان سيتم حفظ مواد المنتج في مكتبة المواد على الصفحة
+- **المخرجات (محتوى يمكن نشره مباشرة أو نشره بعد تعديل بسيط):**
+  - لكل منتج مسودة صورة رئيسية "مقبولة تحتوي على نقاط بيع أساسية"؛
+  - عنوان "ببنية معقولة يحتوي على كلمات مفتاحية أساسية" + 1-2 جملة نص نقاط بيع.
+- **التغيير المتوقع في طريقة الاستخدام:**
+  من البدء من الصفر لكل دفعة منتجات إلى رمي مجموعة منتجات في النظام، وأخذ المسودات المولدة للفرز والتعديل الدقيق.
+```
+
+سهل الحصول على النتيجة (إذا كنت تعتقد أن بيانات واحدة غير كافية، يمكنك أن تطلب من AI توليد حالات اختبار متعددة):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png)
+
+بعد النقر نحصل على النتيجة:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png)
+
+في هذه اللحظة ما نحصل عليه مباشرة هو النتيجة، وليس "عملية توليد افتراضية"، إذا أردنا محاكاة عملية توليد حقيقية، يمكننا التحدث مع AI مباشرة: "يرجى محاكاة عملية توليد حقيقية، وإعطائي النتيجة بعد فترة من الوقت بعد النقر."
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png)
+
+بعد التأكد من وظيفة التوليد، يجب أيضًا التأكد من أن وظائف مكتبة القوالب تعمل بشكل طبيعي، من بطاقة التوليد على الصفحة يمكننا أن نعرف أن وظيفة حفظ مكتبة القوالب لم تُنفذ بعد، في هذه اللحظة نحتاج إلى مزيد من المحادثة العميقة مع AI، "يرجى التأكد من أن المتطلبات [الصق محتوى البند 2 أعلاه هنا] تعمل بشكل طبيعي، يمكن النقر على نتيجة لحفظ القالب المقابل، وبعد الفتح يمكن رؤية معلمات التوليد"
+
+التوليد غالبًا ليس مرة واحدة، غالبًا ما يحتاج إلى لقطات شاشة للتصحيح:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png)
+
+أخيرًا نحصل على النتيجة المتوقعة:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png)
+
+بالإضافة إلى تجربة عملية عملية لمتطلبات العملية، يمكنك أيضًا أن تطلب من AI مساعدتك في فحص المتطلبات مباشرة، مثل:
+
+- "يرجى مقارنة متطلباتي الأولية، والتحقق مما إذا كان التطبيق الحالي يغطي جميع الوظائف الأساسية."
+- "ساعدني في عمل قائمة وظائف، وحدد ما تم إنجازه وما لم يُنفذ بعد أو تجربته غير كافية."
+
+عادةً ما سيُخرج AI قائمة تحقق، يمكنك التفكير بناءً على النتائج فيما إذا كنت بحاجة إلى الاستمرار في التحسين، وبعد التعديل المتكرر يمكنك الحصول على نتيجة نموذج أولي أكثر اكتمالاً.
+
+## 5. 📚 الواجب: أعد إنشاء منصة التجارة الإلكترونية الخاصة بك
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 مهمة التحدي: أعد إنشاء منصة مواد التجارة الإلكترونية</div>
+  </template>
+
+  <p>
+    بالرجوع إلى prompt ومحتوى هذا الدرس، أكمل دورة كاملة:
+  </p>
+
+  <ul>
+    <li>
+      <strong>ممارسة الدورة الكاملة</strong>
+      <ul>
+        <li>تنظيم الأعمال وتوليد prompt → توليد نموذج أولي لصفحة واحدة → توليد نموذج أولي متعدد الصفحات</li>
+      </ul>
+    </li>
+    <li>
+      <strong>مشاركة النتائج</strong>
+      <ul>
+        <li>التقط لقطة شاشة لبرنامجك وشاركها مع الجميع</li>
+      </ul>
+    </li>
+    <li>
+      <strong>سؤال تفكيري</strong>
+      <ul>
+        <li>اترك مجالاً للقسم التالي "ربط نموذج اللغة الكبير (LLM) وقدرات إنشاء الصور من النص"، فكر مسبقًا: كيف يمكنك تضمين قدرات مثل "AI لكتابة النصوص / إنشاء صور مرافقة / إنشاء نصوص برمجية" في منصتك؟</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## الخطوة التالية
+
+في القسم التالي، سنضيف قدرات AI محددة (نص إلى نص، صورة إلى نص، نص إلى صورة) إلى منصة إنتاج المحتوى هذه، مثل:
+
+- التوليد التلقائي لمسودة نصية وعناوين بديلة متعددة لمهمة محتوى معينة
+- التوليد التلقائي لمسودة صور مرافقة بناءً على وصف المهمة (نص إلى صورة)
+- التصنيف والملخص التلقائي لمهام المحتوى السابقة، لمساعدتك في تخطيط مواضيع النشاط التالي
+
+<RelatedArticlesSection
+  title="متابعة التعلم"
+  description="يوصى بالمتابعة بترتيب 'ربط قدرات AI → دورة مشروع كاملة → هندسة التصميم'."
+  :items="relatedArticles"
+/>
diff --git a/docs/ar-sa/stage-1/complete-project-practice/index.md b/docs/ar-sa/stage-1/complete-project-practice/index.md
new file mode 100644
index 0000000..4bf1d91
--- /dev/null
+++ b/docs/ar-sa/stage-1/complete-project-practice/index.md
@@ -0,0 +1,301 @@
+---
+title: 'مشروع عملي كامل - من العرض التجريبي إلى النموذج الأولي بمستوى المنتج'
+description: 'اخرج من مرحلة العرض التجريبي، وتعلم كيفية إكمال مسار المنتج وبناء بيانات محاكاة واقعية والتكرار السريع من خلال التعليقات، وأخيرًا إكمال نموذج أولي لمنتج AI كامل قابل للعرض والتفاعل.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'حوالي <strong>3 أيام</strong>'
+const relatedArticles =
+  relatedArticlesMap['ar-sa/stage-1/complete-project-practice'] ?? []
+</script>
+
+# المستوى الخامس: مشروع عملي كامل
+
+## دليل هذا الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['تفكير المنتج', 'بيانات المحاكاة', 'تحسين التفاعل', 'LocalStorage']" coreOutput="نموذج أولي لمنتج AI كامل الوظائف" expectedOutput="تطبيق ويب بمسار كامل وبيانات حقيقية">
+
+في الفصل السابق، قمنا بتوصيل قدرات AI، وأصبح العرض التجريبي يعمل، لكنه لا يزال <strong>بعيدًا</strong> عن "المنتج" الحقيقي: عند تحديث الصفحة <strong>تختفي البيانات</strong>، وعند حدوث خطأ <strong>تظهر شاشة بيضاء</strong>، والقائمة لا تحتوي إلا على "بيانات اختبار 1، بيانات اختبار 2"، وإذا أخطأ المستخدم في النقر <strong>لا يمكن التراجع</strong>...
+
+هذا الفصل سيملأ <strong>كل هذه الفجوات</strong>: سنقوم <strong>بإكمال مسار المنتج بالكامل</strong>، واستخدام AI لتوليد <strong>بيانات أعمال واقعية</strong> بدلاً من البيانات الوهمية، وإضافة <strong>معالجة الأخطاء والتغذية الراجعة للمستخدم</strong>، وأخيرًا صقل نموذج أولي <strong>كامل يمكن عرضه للآخرين وتقديمه</strong>.
+
+هذا هو <strong>الفصل الأخير</strong> من المرحلة الأولى، وبعد إكمال هذه الخطوة، ستكون قد أكملت التحول من "لا أعرف البرمجة تمامًا" إلى "<strong>القدرة على صنع نموذج أولي لمنتج AI بشكل مستقل</strong>".
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
+      { title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
+      { title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
+      { title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. رفض "المسار السعيد": إكمال المسار الأساسي
+
+العديد من المبتدئين عند صنع النماذج الأولية غالبًا ما يصنعون فقط "المسار السعيد" (المسار الأكثر مثالية): المستخدم ينقر -> API يستجيب بنجاح -> تظهر النتيجة.
+لكن في العالم الحقيقي، الأمور غالبًا لا تسير بسلاسة. لجعل النموذج الأولي الخاص بك يبدو كمنتج حقيقي، تحتاج إلى مراعاة العناصر "الخفية" التالية.
+
+### 1.1 إضافة "الانتظار" و"التغذية الراجعة"
+
+عندما ينقر المستخدم على "توليد نص"، غالبًا ما يحتاج AI إلى بضع ثوانٍ للاستجابة. إذا لم تكن الواجهة تستجيب، سيعتقد المستخدم أن البرنامج معطل.
+**تحتاج إلى جعل AI IDE يضيف حالة التحميل:**
+
+> مثال على التعليمات:
+> "عندما أنقر على زر التوليد، قم بتغيير الزر إلى 'جارٍ التوليد...' واجعله غير قابل للنقر، وفي نفس الوقت اعرض رسمًا متحركًا للتحميل في المنطقة اليمنى. حتى تعود نتيجة API، ثم استعد الحالة الطبيعية."
+
+### 1.2 التعامل مع "الفشل" و"الاستثناءات"
+
+قد تنتهي صلاحية API Key، وقد ينقطع الاتصال بالشبكة.
+**تحتاج إلى جعل AI IDE يعالج الأخطاء:**
+
+> مثال على التعليمات:
+> "إذا فشل طلب API، لا تبلغ عن الخطأ مباشرة في وحدة التحكم، بل اعرض مربع رسالة حمراء (Toast) في أعلى الصفحة، تخبر المستخدم بـ 'فشل التوليد، يرجى المحاولة لاحقًا'، واسمح للمستخدم بالنقر على التوليد مرة أخرى."
+
+### 1.3 استمرارية سجل المحادثة
+
+في عملية التفاعل مع AI، نحتاج إلى حفظ محتوى المحادثة، حتى يتمكن المستخدم من مراجعة التاريخ ومواصلة التواصل السابق. في هذه المرحلة لا نقدم قاعدة بيانات بعد، ويمكننا اختيار أحد الحلول الخفيفة التالية:
+
+**اختيار حل التخزين:**
+
+| الحل | سيناريو الاستخدام | الميزات |
+| ---------------- | -------------------------------- | ------------------------------------ |
+| **LocalStorage** | مشروع أمامي فقط، بيانات المستخدم محفوظة في المتصفح | تنفيذ بسيط، لا تضيع عند التحديث، لا يمكن المزامنة عبر الأجهزة |
+| **ملف JSON** | نموذج أولي محلي، البيانات مخزنة كملف | هيكل واضح، سهل التصحيح، قابل للتعديل يدويًا |
+| **ملف TXT** | الحل الأبسط، تسجيل سريع للمحتوى النصي | تنسيق حر، توافق جيد |
+
+**مثال على محتوى المحادثة:**
+سجل المحادثة المحفوظ عادةً ما يتضمن المحتوى التالي:
+
+```json
+[
+  {
+    "role": "user",
+    "content": "ساعدني في توليد نص تسويقي لسماعات بلوتوث لمنصة Douyin",
+    "timestamp": "2026-01-20 10:30:00"
+  },
+  {
+    "role": "assistant",
+    "content": "[نص تسويقي لسماعات بلوتوث]\n\n🎧 وداعًا للتأخير، تجربة استماع غامرة\n\nيا بنات! هذه السماعات رهيبة حقًا\n\n✅ عزل ضوضاء نشط 40 ديسيبل، دخول فوري لعالم الموسيقى\n✅ 30 ساعة عمر بطارية فائق، أسبوع تنقل بدون شحن\n✅ مكالمات واضحة وجهاً لوجه، حتى في المترو الصاخب\n✅ تصميم نصف داخل الأذن، مريح حتى مع الاستخدام الطويل\n\n💰 عرض محدود، انقر على الرابط أدناه للحصول عليها!",
+    "timestamp": "2026-01-20 10:30:05"
+  }
+]
+```
+
+**تعليمات التنفيذ:**
+
+> "ساعدني في تنفيذ وظيفة حفظ سجل المحادثة. ادعم حفظ سجل محادثات المستخدم و AI كملف JSON (أو استخدم LocalStorage). عند الدخول إلى الصفحة في كل مرة، يتم تحميل المحادثات السابقة تلقائيًا، مع دعم عرض وحذف سجل المحادثات الفردية."
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
+      { title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
+      { title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
+      { title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. ضخ الروح: محاكاة البيانات الحقيقية (Mock Data)
+
+الصفحة الفارغة لا يمكنها إقناع أحد. تخيل أنك تعرض "محطة مواد التجارة الإلكترونية" لشخص آخر، لكن السجل فارغ تمامًا، أو يحتوي فقط على سطر واحد "test / test / test".
+للحصول على أفضل تأثير عرضي، نحتاج إلى "تزوير" بعض البيانات الواقعية لجعل النموذج الأولي يبدو كمنتج حقيقي تم تشغيله لمدة نصف عام.
+
+### 2.1 دع AI يساعدك في تصميم هيكل البيانات
+
+لا نحتاج إلى التفكير بأنفسنا في ماذا نسمي كل حقل (مثلاً هل نسميه `name` أم `title`)، يمكن ترك هذا الأمر تمامًا لـ AI.
+
+تحتاج فقط إلى إخبار AI بـ **سيناريو عملك**:
+
+> **مثال على التعليمات:**
+> "أقوم بصنع نموذج أولي لـ **محطة مواد التجارة الإلكترونية على Douyin**.
+> ساعدني في تصميم هيكل بيانات JSON لوصف 'مهمة منتج'.
+> يجب أن تتضمن هذه المهمة: المعلومات الأساسية للمنتج (الاسم، الفئة)، المواد المدخلة (روابط الصور)، ونتائج AI المولدة (العنوان، النص، صورة الملصق).
+> أعطني مباشرة مثال JSON."
+
+سيقوم AI تلقائيًا بناءً على وصفك بابتكار حقول مثل `productName` و `generatedContent`.
+
+### 2.2 دع AI ينتج دفعة واحدة بيانات "واقعية"
+
+بعد الحصول على هيكل البيانات، الخطوة التالية هي جعل AI يساعدك في "ملء الفراغات" وتوليد مجموعة من البيانات التي تبدو حقيقية.
+
+**نصائح حول التعليمات:**
+لا يمكنك فقط إخبار AI "ساعدني في توليد بيانات"، تحتاج أن تخبره كما لو كنت تكلف متدربًا، إخباره بـ **خلفية العمل** و**متطلبات المحتوى**:
+
+- **خلفية العمل**: أخبر AI أننا نعمل في "التجارة الإلكترونية على Douyin"، لذا يجب أن تكون عناوين المنتجات جذابة (مثل "سر النحافة" و"لا بد للطلاب")، وأن يكون النص بأسلوب محادثة.
+- **متطلبات الصور**: لجعل النموذج الأولي يبدو جيدًا، يجب ألا تكون الصور رموزًا رمادية بدائية، بل يفضل أن تكون صورًا ملونة عشوائية للمناظر الطبيعية أو الأشياء الحقيقية.
+
+> **مثال على التعليمات:**
+> "بناءً على الهيكل المصمم للتو، ساعدني في توليد 10 بيانات محاكاة واقعية.
+> (ملاحظة: ليس بالضرورة بصيغة JSON. إذا كنت تكتب كودًا أماميًا، يمكنك جعله يولد مصفوفة JavaScript مباشرة؛ إذا كنت تستخدم Python، يمكنك جعله يولد List.)
+>
+> **متطلبات سيناريو العمل**:
+>
+> 1. افترض أن هذا متجر متعدد الأقسام، وتشمل المنتجات فئات 'ملابس نسائية' و'إلكترونيات' و'مستحضرات تجميل'.
+> 2. **العناوين والنصوص المولدة يجب أن تكون بأسلوب Douyin**: مثلاً العناوين يجب أن تتضمن رموز تعبيرية (🔥, ✨)، والنصوص يجب أن تستخدم عبارات مثل 'رهيبة' و'جربتها بنفسي'.
+> 3. **حقل الصور**: استخدم التنسيق `https://picsum.photos/seed/{random_id}/300/400` بشكل موحد، لضمان اختلاف كل صورة."
+
+**مثال على بيانات المحاكاة المولدة:**
+
+```javascript
+export const mockProductTasks = [
+  {
+    id: 'task_001',
+    name: 'فستان صيفي بنقشات فرنسي كلاسيكي',
+    status: 'completed',
+    input: {
+      category: 'ملابس نسائية',
+      features: ['تضييق الخصر', 'يرقق القوام', 'أنيق'],
+      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
+    },
+    output: {
+      generatedTitle: '✨من تلبسها تحلى! هذا الفستان المنقوش الفرنسي رهيب حقًا🔥',
+      generatedCopy:
+        'يا بنات! هذا الفستان ينحّف القوام حقًا! تصميم تضييق الخصر رهيب، بمجرد لبسه يظهر لك خصرك. القماش منفس جدًا، في الصيف ما يخنق أبدًا. الخيار الأول للمواعيد والتنزهات! 👗',
+      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
+    },
+    createdAt: '2026-01-20T10:00:00Z'
+  },
+  {
+    id: 'task_002',
+    name: 'سماعات بلوتوث فائقة عزل الضوضاء Pro',
+    status: 'completed',
+    input: {
+      category: 'إلكترونيات',
+      features: ['عزل الضوضاء', 'عمر بطارية فائق', 'تأخير منخفض'],
+      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
+    },
+    output: {
+      generatedTitle: '🎧 أخيرًا وجدتها! عزل الضوضاء في هذه السماعات قوي جدًا! 🔇',
+      generatedCopy:
+        'بمجرد لبسها، يسكت العالم فورًا. جودة صوت رائعة، الاستماع للموسيقى كأنك في الحفل. عمر البطارية ممتاز أيضًا، شحنة واحدة تكفي لأسبوع! لا بد للطلاب!',
+      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
+    },
+    createdAt: '2026-01-21T14:30:00Z'
+  }
+  // ... المزيد من البيانات
+]
+```
+
+### 2.3 (متقدم) استخدام LocalStorage لتنفيذ "الإضافة والحذف والتعديل المزيف"
+
+إذا كنت تريد أن تكون بيانات المحاكاة المولدة للتو قابلة للعرض والحذف والتعديل، بل وحتى أن تكون المهام المولدة حديثًا لا تزال موجودة بعد تحديث الصفحة، يمكنك الجمع بين `LocalStorage`.
+
+> **مثال على التعليمات:**
+> "ساعدني في تنفيذ وظيفة تخزين البيانات.
+>
+> 1. اقرأ البيانات من `localStorage` أولاً.
+> 2. إذا كان `localStorage` فارغًا، استخدم بيانات المحاكاة المولدة للتو للتهيئة، واحفظها في `localStorage`.
+> 3. في نفس الوقت ساعدني في كتابة دالتي `addProductTask` و `deleteProductTask`، كل عملية يجب أن تقوم بتحديث `localStorage` بشكل متزامن."
+
+من خلال هذه الخطوة، سيكون لدى النموذج الأولي الخاص بك "ذاكرة"، وتجربة المستخدم ستكون مطابقة تقريبًا للمنتج الحقيقي.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
+      { title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
+      { title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
+      { title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. جمع التعليقات والتكرار السريع
+
+العمل خلف الأبواب المغلقة لا ينتج منتجات جيدة. الآن نموذجك الأولي لديه "الوظائف الأساسية" + "المسار الكامل" + "بيانات العرض"، حان الوقت لعرضه على الآخرين.
+
+### 3.1 من تختبر؟ كيف تختبر؟
+
+- **ابحث عن أصدقاء / زملاء**: لا يحتاجون إلى فهم التكنولوجيا، فقط دعهم يحاولون استخدامه.
+- **راقب بدلاً من التوجيه**: لا تقل "انقر هنا"، بل انظر إلى أين سينقرون. إذا لم يتمكنوا من العثور على الزر، فهذا يعني أن التصميم به مشكلة.
+- **طريقة ساحر أوز العجيب (Wizard of Oz)**: إذا لم يكن AI متصلاً بعد، يمكنك تعديل البيانات يدويًا في الخلفية (أو قاعدة البيانات) لمحاكاة استجابة AI، والتحقق أولاً مما إذا كان المستخدم يحتاج هذه الوظيفة.
+
+### 3.2 مواجهة الأخطاء والشكاوى
+
+- **تشوهات في التصميم**: قد تظهر فوضوية على أحجام شاشات مختلفة.
+  - **الإجراء**: خذ لقطة شاشة وأرسلها إلى AI IDE -> "التصميم تشوه على هذا العرض، ساعدني في إصلاحه."
+- **تفاعل غير مريح**: "هذه العملية معقدة جدًا".
+  - **الإجراء**: أخبر AI IDE بالاقتراح -> "المستخدم يشعر أن الرفع ثم التوليد بطيء جدًا، هل يمكن تغييره إلى توليد بنقرة واحدة؟"
+- **متطلبات جديدة**: "لو كانت هناك هذه الوظيفة لكان رائعًا".
+  - **الإجراء**: قيّم ما إذا كانت أساسية، وإذا كانت كذلك، دع AI ينفذ نسخة مبسطة بسرعة.
+
+**تذكر: في هذه المرحلة، AI هو أفضل مساعد لك في التعديل. أنت مسؤول فقط عن اكتشاف المشاكل، واترك تعديل الكود له.**
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'إكمال المسار', description: 'من وظيفة واحدة إلى حلقة كاملة' },
+      { title: 'ضخ الروح', description: 'محاكاة بيانات الأعمال الحقيقية' },
+      { title: 'التكرار بالتغذية الراجعة', description: 'إصلاح التجربة بناءً على تعليقات حقيقية' },
+      { title: 'المشروع النهائي', description: 'مشروع التخرج الخاص بك' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. 🎓 مشروع التخرج: أكمل "مشروع التخرج" الخاص بك
+
+تهانينا! لقد أكملت العملية الكاملة من "المتطلبات" إلى "النموذج الأولي" ثم إلى "تكامل AI". الآن، حان وقت عرض نتيجتك النهائية.
+
+**مشروع التخرج هذا لا يقتصر على "محطة مواد التجارة الإلكترونية" فقط.** تحتاج إلى الجمع بين اهتماماتك أو خلفيتك المهنية لصنع نموذج أولي لمنتج AI فريد.
+
+### اختيار الموضوع والمتطلبات
+
+تحتاج إلى اختيار السيناريو الأقرب من **[مرجع اتجاهات السيناريوهات متعددة التصنيفات](../appendix-industry-scenarios/index.md)**، أو ابتكار سيناريو جديد تمامًا بناءً على أفكارك الخاصة.
+
+**يجب أن يستخدم المشروع بشكل شامل كل ما تعلمته في الفصول السابقة:**
+
+1.  **بناء النموذج الأولي**: استخدم تقنيات الواجهة الأمامية لبناء واجهة جميلة وسهلة الاستخدام.
+2.  **التحكم في المتطلبات**: لا تسعَ للشمولية، بل ركز على الإغلاق المنطقي للوظائف الأساسية.
+3.  **توصيل API**: قم بتوصيل نماذج AI حقيقية (LLM / VLM إلخ)، لمنح التطبيق ذكاءً حقيقيًا.
+4.  **تنفيذ تطبيق قابل للتشغيل**: ليس مجرد صفحة ثابتة، بل تطبيق ديناميكي فيه تدفق بيانات وتغذية راجعة تفاعلية.
+
+### مخرجات المشروع
+
+في النهاية تحتاج إلى تقديم المحتوى التالي:
+
+1.  **تطبيق نموذج أولي كامل**: منشور عبر الإنترنت أو قابل للتشغيل محليًا، مع مسار استخدام كامل.
+2.  **فيديو عرض لمدة 30 ثانية**: سجل فيديو يقدم باختصار سيناريو تطبيقك ويعرض التشغيل الفعلي للوظائف الأساسية.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 قائمة التحدي النهائي</div>
+  </template>
+
+  <p>
+    هذه هي المعركة الأخيرة في المرحلة الأولى. تحقق من عملك وفقًا للقائمة التالية:
+  </p>
+
+  <div style="font-weight: bold; margin-bottom: 10px;">فحص ذاتي للوظائف الأساسية</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>سيناريو واضح</strong>: تم اختيار صناعة أو سيناريو تطبيق محدد</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>إغلاق منطقي</strong>: المسار الأساسي يعمل بالكامل، وليس فقط المسار السعيد</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>مدعوم بـ AI</strong>: تم استدعاء API نموذج كبير حقيقي، وليس ردودًا مبرمجة مسبقًا</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>تجربة كاملة</strong>: يتضمن التحميل ومعالجة الأخطاء وبيانات المحاكاة</label></li>
+  </ul>
+
+  <div style="font-weight: bold; margin: 20px 0 10px;">تحضير المخرجات</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>تطبيق النموذج الأولي</strong>: الكود مكتمل وقابل للتشغيل</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>فيديو العرض</strong>: حوالي 30 ثانية، يعرض بوضوح أهم النقاط البارزة</label></li>
+  </ul>
+</el-card>
+
+## الخطوة التالية
+
+بعد إكمال مشروع التخرج، أصبح لديك القدرة على "تطوير نموذج أولي لتطبيق AI بشكل مستقل".
+في المرحلة الثانية القادمة، سنتعمق في تطوير Full Stack الأكثر تعقيدًا، ونتعلم كيفية تحويل هذا النموذج الأولي إلى تطبيق حقيقي قابل للنشر بقاعدة بيانات ونظام مستخدمين بمستوى تجاري.
+
+نلتقي في المرحلة القادمة!
+
+<RelatedArticlesSection
+  title="مواصلة التقدم"
+  description="تهانينا على إكمال المرحلة الأولى، هذه الفصول يمكن أن تساعدك في الدخول إلى التطوير الهندسي."
+  :items="relatedArticles"
+/>
diff --git a/docs/ar-sa/stage-1/finding-great-idea/index.md b/docs/ar-sa/stage-1/finding-great-idea/index.md
new file mode 100644
index 0000000..4cf2dae
--- /dev/null
+++ b/docs/ar-sa/stage-1/finding-great-idea/index.md
@@ -0,0 +1,1082 @@
+---
+title: 'إيجاد فكرة جيدة - من احتياجات المستخدمين إلى منتجات يدفعون مقابلها'
+description: 'تعلم كيفية اكتشاف الفرص التجارية من نقاط الألم اليومية، وإتقان المنهجية النظامية لتحليل الاحتياجات، وصقل الأفكار العادية لتصبح مفاهيم منتجات يرغب المستخدمون في الدفع مقابلها.'
+---
+
+<script setup>
+const duration = 'حوالي <strong>3 ساعات</strong>'
+</script>
+
+# المستوى المبتدئ الثاني: إيجاد فكرة جيدة
+
+## مقدمة الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['اكتشاف الاحتياجات', 'تفكير المنتج', 'تحليل المستخدمين', 'نموذج العمل']" coreOutput="3 مفاهيم منتجات تم التحقق منها" expectedOutput="اتجاهات بدء مشروع/منتج قابلة للتنفيذ">
+
+في الفصل السابق، تعلمنا كيفية استخدام AI IDE لصنع الأشياء، ولكن هناك سؤال أكثر جوهرية: <strong>ماذا نصنع؟</strong>
+
+الكثير من الناس يفكرون فوراً في "صنع أداة AI" أو "بناء منصة اجتماعية"، والنتيجة هي أن لا أحد يستخدم ما صنعوه. أين تكمن المشكلة؟ <strong>لم يجدوا احتياجاً حقيقياً.</strong>
+
+والواقع أكثر قسوة هو: <strong>العديد من المنتجات تحل المشاكل، لكن المستخدمين ببساطة غير مستعدين للدفع مقابلها.</strong>
+
+في هذا الفصل، من خلال قصة شياو مينغ، سنتعلم كيفية إيجاد اتجاهات منتجات تستحق العناء.
+
+بعد إكمال هذا الفصل، ستمتلك <strong>منهجية كاملة لإيجاد الأفكار</strong>، بالإضافة إلى 3 مفاهيم منتجات تم التحقق منها.
+
+</ChapterIntroduction>
+
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Step 1', description: 'بناء معايير الحكم' },
+      { title: 'Step 2', description: 'اكتشاف نقاط الألم اليومية' },
+      { title: 'Step 3', description: 'التقسيم الأفقي للجمهور' },
+      { title: 'Step 4', description: 'الحفر العمودي في السيناريوهات' },
+      { title: 'Step 5', description: 'التحقق من صحة الاحتياجات' },
+      { title: 'Step 6', description: 'صقل مفهوم المنتج' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Step 1：بناء معايير الحكم —— ما نوع الاحتياجات التي يدفع المستخدمون مقابلها
+
+::: warning لماذا هذا الفصل مهم؟
+
+قد يتساءل البعض: "أليس هذا دورة لتعليم Vibe Coding؟ لماذا نتعلم 'إيجاد الاحتياجات' أولاً؟ ألا يمكننا البدء بكتابة الكود مباشرة؟"
+
+في الواقع، العديد من دورات البرمجة في السوق تعلمك مباشرة كيفية تنفيذ المشاريع: صنع قائمة مهام، صنع آلة حاسبة، صنع مدونة شخصية... هذه المشاريع تساعد بالفعل في التعرف على بناء الجملة والأدوات، لكن المشكلة هي:
+
+<strong>إذا كان الاتجاه خاطئاً، كلما تعمقت أكثر، زاد الخطأ.</strong>
+
+تخيل:
+- قضيت أسبوعين في صنع "نظام إدارة تقويم"، لكن هناك بالفعل 100 نظام أفضل في السوق
+- صنعت "حاسباً للسعرات الحرارية بالتصوير"، لكن المستخدم يحذفه بعد استخدام مرة واحدة
+- صنعت "دفتر حسابات شخصي"، لكن حتى أنت نفسك تتكاسل عن استخدامه
+
+بعد الانتهاء من هذه المشاريع، هل يمكنك كتابتها في سيرتك الذاتية؟ على الأرجح لا، لأن <strong>لم تحل مشاكل حقيقية، ولم تنتج قيمة حقيقية</strong>.
+
+والأكثر قسوة هو: بما أننا سنستثمر وقتاً في التعلم، لماذا لا نسعى لتحقيق نتائج أفضل؟
+
+بما أن Vibe Coding يتيح لنا تحويل الأفكار إلى منتجات بسرعة، فيجب أن نتعلم <strong>إيجاد الأفكار التي تستحق العناء</strong>. أن نتدرب بأقرب طريقة للواقع — ليس بصنع "مشاريع تدريبية"، بل بصنع "منتجات يرغب الناس في استخدامها".
+
+لهذا السبب يجب أن نتعلم أولاً "إيجاد فكرة جيدة".
+
+---
+
+**يرى الكاتب بشكل شخصي** أن الوقت ثمين جداً، **وبما أننا نفعل شيئاً، يجب أن نحقق أفضل نتيجة ممكنة**، وإلا فلماذا لا نذهب للعب؟ وكمسؤولية، سيبذل الكاتب قصارى جهده لدعمك لتحقيق أفضل نتيجة.
+
+حتى لو لم يكن أحد يؤمن بقدرتك على القيام بعمل جيد، سيظل الكاتب يأمل بثبات أن تتمكن من تحقيق أفضل نتيجة. بما أنك اخترت vibecoding لصنع منتجات، فجرب واكتشف إلى أين يمكنك الوصول!
+
+:::
+
+
+---
+
+## الافتتاحية: قصة شياو مينغ المبرمج المستقل
+
+شياو مينغ مبرمج، يعمل منذ ثلاث سنوات. في يوم من الأيام خطرت له فكرة: ماذا لو صنع تطبيق لياقة بدنية، يساعد المستخدمين على وضع خطط تمارين وتسجيل بيانات التدريب. هذه الفكرة أثارته كثيراً، وشعر أنه وجد أخيراً مشروعاً يمكنه تنفيذه.
+
+خلال العام التالي، خصص شياو مينغ تقريباً كل وقته الحر. صنع تطبيقاً بوظائف شاملة — وحدة دورات، نظام تسجيل حضور، وظائف مجتمعية، تحليل بيانات، كل ما يلزم موجود. الواجهة كانت جميلة أيضاً، على الأقل هو نفسه كان راضياً عنها.
+
+في يوم الإطلاق، كان شياو مينغ مليئاً بالتوقعات. أنفق مبلغاً كبيراً على الترويج، وفي الشهر الأول كان هناك 50 ألف تحميل. يبدو أن البداية كانت جيدة، أليس كذلك؟
+
+لكن المشاكل ظهرت بسرعة. بعد التحميل، يستخدم المستخدمون التطبيق مرة واحدة ثم يحذفونه، وكان معدل الاحتفاظ في اليوم السابع 5% فقط. صنع بعض الوظائف المدفوعة، لكن لم يكن هناك مستخدم مستعد لدفع المال. وما أحزنه أكثر هو أن منتجات ناضجة مثل Keep وBohe Health وFitTime، وظائفها أكثر شمولاً من تطبيقه، ومحتواها أفضل، فلماذا ينتقل المستخدمون إلى تطبيقه؟
+
+بعد عام، خسر شياو مينغ 200 ألف.
+
+جلس أمام الكمبيوتر، ينظر إلى البيانات الكئيبة في لوحة التحكم، ولم يكن في عقله سوى سؤال واحد: تطبيقي جيد جداً، لماذا لا أحد يستخدمه؟ والأكثر من ذلك، لماذا لا أحد مستعد للدفع؟
+
+
+
+فشل شياو مينغ لم يكن بسبب ضعف مهاراته التقنية، ولا لأن المنتج سيء. بصراحة، وظائف تطبيقه كانت شاملة، والواجهة كانت جميلة.
+
+**المشكلة كانت في نقطة البداية.**
+
+لم يسأل أبداً السؤال الأكثر أساسية: هل المستخدمون يحتاجونه حقاً؟
+
+رأى أن سوق تطبيقات اللياقة كبير، وتقييم Keep بمليارات، فاعتقد أن هذه فرصة جيدة. لكنه لم يوضح عدة أمور: لماذا يحتاج المستخدمون لتطبيق لياقة آخر؟ مقارنة بـ Keep، ما هو التمايز الخاص بي؟ هل المستخدمون مستعدون للدفع مقابل ذلك؟
+
+**إذا كان الاتجاه خاطئاً، كلما تعمقت أكثر، زاد الخطأ.** قضى عاماً في تطوير اتجاه خاطئ بشكل متزايد، والنتيجة كانت فقط الابتعاد أكثر عن النجاح.
+
+
+::: tip ماذا نفعل في هذا الفصل
+
+في هذا الفصل، سنساعد شياو مينغ على إجراء مراجعة. لنرى أين تكمن مشكلته بالضبط، ثم نجد معاً اتجاهات منتجات حقيقية يدفع الناس مقابلها.
+
+سنمضي في ثلاث خطوات:
+
+**المشهد الأول: إيجاد الاحتياج الحقيقي** — أولاً نفهم بوضوح ما نوع الاحتياجات التي يدفع المستخدمون مقابلها
+
+**المشهد الثاني: استخراج فكرة جيدة** — تعلم كيفية استخراج فرص تجارية قيمة من الأفكار العادية
+
+**المشهد الثالث: صقل عبر حوار AI** — استخدام AI لتحويل الأفكار إلى خطط منتجات قابلة للتنفيذ
+
+:::
+
+---
+
+## المشهد الأول: إيجاد الاحتياج الحقيقي
+
+كان شياو مينغ محبطاً، لكنه لم يستسلم. بدأ في التفكير في سؤال: ما نوع الاحتياجات التي يدفع المستخدمون مقابلها فعلاً؟
+
+### حيرة شياو مينغ: لماذا لا يدفع المستخدمون؟
+
+ذهب إلى عدة أصدقاء استخدموا تطبيقه، ليستمع إلى أفكارهم الحقيقية.
+
+قال الصديق أ: "تطبيقك جيد جداً، لكنني أستخدم Keep بالفعل، لماذا أنتقل؟"
+
+قال الصديق ب: "تطلب مني تسجيل كل تمرين، هذا مزعج جداً، وأنا كسول للتسجيل."
+
+قال الصديق ج بشكل أكثر مباشرة: "الوظائف المجانية كافية، لماذا أدفع؟"
+
+هذه الإجابات جعلت شياو مينغ يفهم المشكلة فجأة.
+
+**المشكلة الأولى: المستخدمون لا ينتقلون، لأن الحلول الحالية كافية بالفعل.** منتجات ناضجة مثل Keep وظائفها شاملة بالفعل، وعادات المستخدمين تكونت، وتكلفة الانتقال عالية. تصنع منتجاً مشابهاً، فبماذا تقنع المستخدم بالانتقال؟
+
+**المشكلة الثانية: المستخدمون غير مستعدين لتغيير عاداتهم.** تسجيل التمارين أمر مزعج جداً للمستخدمين. إذا كان المنتج يتطلب من المستخدم تغيير أكثر من 3 عادات، فمن المرجح أن يفشل.
+
+**المشكلة الثالثة: البدائل المجانية كثيرة جداً.** وظائفك عامة جداً، بدون قيمة فريدة، والمستخدمون لا يجدون سبباً للدفع.
+
+### ما هو الاحتياج الحقيقي؟
+
+بدأ شياو مينغ في دراسة المنتجات الناجحة التي يجد المستخدمون أنفسهم مستعدين للدفع مقابلها. اكتشف نقطة مشتركة: هذه المنتجات لا تحل احتياجات من نوع "أعتقد أنها مفيدة"، بل احتياجات يدفع المستخدمون مقابلها، ويغيرون سلوكهم من أجلها، ويتحملون الإزعاج من أجلها.
+
+بعبارة أخرى، **الاحتياج الحقيقي هو ما يصوت عليه المستخدمون بأقدامهم، وليس ما يفكر فيه مدير المنتج من فراغ.**
+
+### حالات: منتجات يجد المستخدمون أنفسهم مدفوعين مقابلها
+
+درس شياو مينغ عدة حالات ناجحة، ليفهم بالضبط ما هي نقاط الألم التي التقطتها.
+
+#### Meicai: دع أصحاب المطاعم الصغيرة ينامون نوماً هنيئاً
+
+على السطح، ما يفعله Meicai بسيط جداً: مساعدة المطاعم في شراء الخضروات. لكن إذا فكرت بعمق، لماذا يستخدمه أصحاب المطاعم؟
+
+لأن أصحاب المطاعم الصغيرة يجب أن يستيقظوا في الساعة 4 فجراً للذهاب إلى سوق الجملة، هذا متعب جداً، وغالباً ما يتم خداعهم. ما يفعله Meicai ليس مجرد "تجارة إلكترونية لبيع الخضروات"، بل إعادة هيكلة سلسلة التوريد بأكملها، مما يسمح لأصحاب المطاعم الصغيرة بالنوم نوماً هنيئاً.
+
+كلما كانت نقطة الألم أشد، كانت الرغبة في الدفع أقوى. الوقت والجهد الموفّرين أكثر قيمة من المال الموفر في شراء الخضروات.
+
+#### Xiaohongshu: حل صعوبة الاختيار
+
+على السطح، Xiaohongshu هو "مشاركة تجارب التسوق من الخارج". لكن لماذا يرغب المستخدمون في قضاء الوقت في قراءة الملاحظات عليه؟
+لأن المستخدمين، عند مواجهة كم هائل من المنتجات، لا يعرفون ما يستحق الشراء وما لا يستحقونه. هم بحاجة إلى شخص يثقون به ليساعدهم في الفرز، وتوفير الوقت، وتجنب الوقوع في الأخطاء.
+
+ما يحله تطبيق Xiaohongshu في الواقع هو نقطتا ألم عميقتان: صعوبة الاختيار وانعدام الثقة. فالمستخدمون على استعداد لدفع المال مقابل "توفير الوقت" و"تجنب الأخطاء"، وهذا هو السبب الذي جعل Xiaohongshu ينجح.
+
+---
+
+بعد قراءة هذه الحالات، توصل شياو مينغ إلى اكتشاف مهم.
+
+ما يدفع المستخدمون ثمنه لم يكن أبداً "الميزات"، بل "حل المخاوف" و"إزالة القلق". ما حله موقع MeiCai كان الخوف الذي يشعر به أصحاب المطاعم الصغيرة من مشقة الشراء في الصباح الباكر، وما حله تطبيق Xiaohongshu كان خوف المستخدمين من شراء الأشياء الخطأ.
+
+**الخوف هو ما يحفز الدفع، والقلق هو ما يحفز العمل.**
+
+### مستويات الاحتياجات الثلاثة: نقاط الألم، نقاط المتعة، ونقاط الرغبة
+
+أجرى شياو مينغ المزيد من البحث ووجد أن احتياجات المستخدمين يمكن تقسيمها إلى ثلاثة أنواع:
+
+::: tip نقاط الألم (Pain Point) —— يحفزها الخوف
+
+**الجوهر:** المشاكل التي يمر بها المستخدمون والتي تجعلهم يشعرون بالألم والقلق وعدم الراحة. عدم حلها يسبب انزعاجاً شديداً، بل وقد يهدد البقاء أو السلامة.
+
+**أمثلة:**
+- مرضى السكري لا يعرفون كمية الكربوهيدرات التي سترفع مستوى السكر في الدم لديهم (الخوف: تهديد صحي)
+- أصحاب المطاعم الصغيرة يستيقظون في الساعة 4 صباحاً للذهاب إلى سوق الجملة (الخوف: مشقة البقاء)
+
+**النقطة الأساسية:** المستخدمون على استعداد لدفع المال لحل هذه المشاكل، لأن عدم حلها "مؤلم جداً".
+
+:::
+
+::: tip نقاط المتعة (Delight Point) —— الإشباع الفوري
+
+**الجوهر:** لدى المستخدم حاجة يمكن تلبيتها على الفور، مما يولد شعوراً فورياً بالرضا والسعادة.
+
+**أمثلة:**
+- توصيل الطلبات الخارجية في 30 دقيقة (الإشباع الفوري للجوع)
+- إنشاء عرض تقديمي (PPT) أنيق بضغطة واحدة (شعور بالمتعة لتوفير الوقت والجهد)
+
+**النقطة الأساسية:** جعل المستخدم يشعر "بالمتعة" هو مفتاح الاحتفاظ به، لكنها تعتبر نقطة دفع ضعيفة إذا كانت وحدها.
+:::
+
+::: tip نقاط الرغبة (Itch Point) —— الذات الافتراضية
+
+**الجوهر:** يرغب المستخدم في أن يصبح أفضل، أو أروع، أو أكثر رقيًا، لكنها ليست ضرورية. فإذا تم تلبيتها سيكون سعيداً، وإذا لم تُلبَّى فلا مشكلة في ذلك.
+
+**أمثلة:**
+- تسجيل كمية المياه التي يشربها يومياً (تخيل حياة مليئة بالانضباط الذاتي)
+- استخدام الذكاء الاصطناعي لإضافة فلاتر فنية للصور (تخيل ذوق فني)
+
+**النقطة الأساسية:** رغبة المستخدمين في الدفع مقابل "نقاط الرغبة" ضعيفة، لأنه لا توجد مشكلة حقيقية إذا لم يتم حلها.
+
+:::
+
+كيف ننظر إلى الترتيب الصحيح للأولويات؟ نصيحة جيدة هي: نقاط الألم > نقاط المتعة > نقاط الرغبة
+
+لماذا؟
+
+1. **نقاط الألم هي احتياجات للبقاء:** عدم حلها قد يؤدي إلى الهلاك (أو انزعاج شديد)، والمستخدمون مضطرون للدفع مقابلها. إنها "مسكنات الألم".
+2. **نقاط المتعة هي مكافآت فورية:** تجعل المستخدم يشعر بالمتعة، والمستخدمون سيأتون من أجلها. إنها "الهيروين" (بمعنى آلية الإدمان الإيجابية).
+3. **نقاط الرغبة هي تلبية للرغبات:** يمكن الاستغناء عنها، وهي الأسهل في التخلي عنها. إنها "الفيتامينات" أو "الكماليات".
+
+**رؤية أساسية:** الخطأ الذي يقع فيه العديد من مديري المنتجات هو: استخدام طريقة بيع نقاط الألم لتسويق منتج يعالج نقاط الرغبة.
+
+على سبيل المثال: "تسجيل شرب الماء يجعلك أكثر صحة" —— شرب الماء صحي بالفعل، لكن عدم تسجيله لن يجعلك غير صحي. هذا هو تغليف نقطة الرغبة في صورة نقطة ألم، والمستخدمون لن يقبلوا ذلك.
+
+### طريقة من 5 خطوات للتحقق من الاحتياجات الحقيقية
+
+فكر شياو مينغ: **إذن، عندما يكون لدي فكرة، كيف أحكم بسرعة على ما إذا كانت تستحق الاستثمار؟**
+
+لقد تعلم طريقة الحكم المكونة من 5 خطوات والتي يستخدمها مديرو المنتجات (للمحتوى التفصيلي، راجع الملحق أ):
+
+1. **الخطوة الأولى: تحدث مباشرة مع المستخدمين الحقيقيين لمعرفة كيف يفعلون الأشياء حالياً**
+
+   اعثر على 10 مستخدمين مستهدفين. اسألهم: "كيف تحل هذه المشكلة الآن؟" إذا كان المستخدمون يستخدمون بالفعل طريقة ما، فهذا يعني أن المشكلة موجودة بالفعل. وإذا قال المستخدمون إنهم لا يحتاجون إلى حل، فقد لا تكون هذه حاجة حقيقية.
+
+2. **الخطوة الثانية: حلل الحلول البديلة الحالية للمستخدمين واكتشف ميزتك**
+
+   قد يستخدم المستخدمون حالياً منتجات أخرى، أو Excel، أو يعتمدون على الذاكرة، أو يتحملون عدم وجود حل. تحتاج إلى معرفة عيوب هذه الحلول. يجب أن يكون منتجك أفضل بكثير منها حتى يرغب المستخدمون في التبديل.
+
+3. **الخطوة الثالثة: اختبر ما إذا كان المستخدمون على استعداد لدفع المال مقابل منتجك**
+
+   قم بالبيع المسبق أو اجمع عربوناً. احسب نسبة المستخدمين المستعدين لدفع عربون (كلما كسبت المال في وقت مبكر، كان ذلك دليلاً على صحة الاحتياج):
+   - أكثر من 10%: الاحتياج حقيقي ويستحق الاستثمار
+   - من 5% إلى 10%: الاحتياج موجود، لكنه يحتاج إلى صقل
+   - أقل من 5%: الاحتياج قد لا يكون صحيحاً
+
+4. **الخطوة الرابعة: قدّر حجم هذا السوق وما إذا كان يمكن تحقيق أرباح منه**
+
+   احسب ثلاثة أرقام: إجمالي المستخدمين المستهدفين × الاستعداد للدفع × متوسط قيمة الطلب. اضربهم لتحصل على حجم السوق. إذا كان السوق صغيراً جداً، فقد لا يستحق المجازفة.
+
+5. **الخطوة الخامسة: فكر في الخندق الدفاعي (الميزة التنافسية) لمنتجك لمنع الآخرين من نسخه**
+
+   ضع في اعتبارك هذه الحواجز: الصعوبة التقنية، تأثيرات الشبكة، العلامة التجارية، ميزة التكلفة. هذه ستساعدك على الحفاظ على قدرتك التنافسية على المدى الطويل.
+
+**ملخص هذا الفصل: مكاسب شياو مينغ**
+
+1. **معيار الاحتياج الحقيقي**
+   - المعيار الأهم هو استعداد المستخدم للدفع.
+   - المستخدم على استعداد لتغيير سلوكه من أجله.
+   - في حالة عدم وجود حل، سيتكبد المستخدم خسارة كبيرة.
+
+2. **تجنب الاحتياجات الزائفة**
+   - نقاط الرغبة ليست نقاط ألم، ولا يمكن معاملتها كاحتياجات حقيقية.
+   - إذا كان السوق صغيراً جداً، فمن الصعب الحفاظ على نموذج عمل.
+   - إذا كان الحل أكثر تعقيداً من المشكلة، فسيتخلى المستخدمون عنه.
+
+3. **ترتيب الأولويات**
+   - الأولوية الحقيقية هي: نقاط الألم > نقاط المتعة > نقاط الرغبة.
+
+**مخرجات هذا الفصل**
+- لقد فهمت ما هو الاحتياج الحقيقي.
+- لقد أتقنت التصنيف ثلاثي المستويات للاحتياجات: نقاط الألم، نقاط المتعة، ونقاط الرغبة.
+- لقد تعلمت كيفية استخدام طريقة الحكم المكونة من 5 خطوات للتحقق من صحة الاحتياجات.
+
+---
+
+## الفصل الثاني: استخراج الأفكار الجيدة
+
+يعرف شياو مينغ الآن ما هو الاحتياج الحقيقي، لكنه لا يزال لا يعرف من أين يبدأ. لا يمكنه ببساطة اختلاق احتياج من العدم، أليس كذلك؟
+
+قرر أن يبدأ من الأشياء الأكثر ألفة بالنسبة له —— الأشخاص والأحداث من حوله.
+
+### البدء من نفسه: أخت شياو مينغ الكبرى
+
+تذكر شياو مينغ أخته الكبرى. فقد أنجبت طفلاً مؤخراً، وكانت دائماً تشكو من عدم وجود وقت للتمارين الرياضية، ومن عدم قدرتها على التخلص من دهون البطن، وكانت تشعر بالقلق الشديد بشكل عام.
+
+في أحد الأيام سألها: "كيف تحلين مشكلة اللياقة البدنية الآن؟"
+
+تنهدت الأخت وقالت: "أتابع تمارين تطبيق Keep، لكن تلك الحركات لا تناسب الجسم بعد الولادة، وبعد الانتهاء منها يزداد ألم ظهري. الذهاب إلى الصالة الرياضية؟ لا يوجد أحد لمساعدتي في رعاية الطفل. استمدار مدرب شخصي؟ تبلغ تكلفة الحصة الواحدة من 300 إلى 500 يوان، وهذا مكلف جداً. والتمرن بشكل عشوائي بمفردي، أخاف من الإصابة."
+
+بعد الاستماع إلى ذلك، شعر شياو مينغ أن هذا قد يكون الاحتياج الحقيقي الذي يبحث عنه.
+
+مشاكل أخته الكبرى في الواقع محددة جداً: الوقت مجزأ، وتحتاج إلى رعاية الطفل، ولا يوجد وقت متواصل لممارسة الرياضة؛ الجسم به قيود، وانفصال عضلات البطن المستقيمة وارتخاء عضلات قاع الحوض يمنعها من ممارسة الرياضة العنيفة؛ تشعر بقلق نفسي كبير بسبب تغير شكل جسمها، وتخشى أن تنفر منها زوجها، ولديها عقدة نقص اجتماعية؛ المعلومات مشوشة للغاية، فهناك الكثير من المعلومات على الإنترنت، ولا تعرف أي التمارين مناسبة لمرحلة ما بعد الولادة؛ وهناك أيضاً الشعور بالوحدة، فلا أحد يفهم وضعها، وتنعدم الدعم من الأقران.
+
+كل هذه نقاط ألم حقيقية، وليست مجرد "نقاط رغبة" من نوعية "سيكون من الجيد أن تتوفر".
+
+---
+
+### التقسيم الأفقي: احتياجات الفئات المختلفة
+
+أدرك شياو مينغ أن فكرة "تطبيق لياقة بدنية" واسعة جداً. إنه يريد مساعدة الجميع على ممارسة الرياضة، ولكن المشكلة هي أن احتياجات الجميع مختلفة.
+
+قام بعمل تقسيم أفقي، وقسم "الأشخاص الذين يرغبون في ممارسة الرياضة" إلى عدة فئات (للحصول على التفاصيل، راجع الملحق ب):
+
+تحتاج فئة بناء العضلات إلى حساب دقيق لكمية البروتين التي يتناولونها، والتسجيل اليدوي متعب جداً، ولديهم استعداد عالٍ للدفع، ويسعون وراء الكفاءة. يجب على مرضى السكري التحكم بصرامة في الكربوهيدرات، لكن من الصعب تقديرها عند تناول الطعام بالخارج، وهذا احتياج أساسي، ومستعدون للدفع، ومعدل إعادة الشراء مرتفع. ترغب الأمهات بعد الولادة في استعادة قوامهن ولكن ليس لديهن وقت للحساب، ويحتاجن إلى حلول بسيطة، وهن حساسات للوقت، ويحتجن إلى خدمة شاملة. فئة الطلبات الجاهزة تتناول الطعام الجاهز يومياً ولا تعرف عدد السعرات الحرارية التي استهلكتها، وهذا سيناريو متكرر، لكن الاستعداد للدفع متوسط. يحتاج طلاب الدراسات العليا إلى أدوات تعليمية فعالة، لكنهم لا يعرفون ماذا يستخدمون، وهذا احتياج أساسي، لكن متوسط قيمة الطلب منخفض.
+
+اختار شياو مينغ فئة "الأمهات بعد الولادة". لماذا؟
+
+أولاً، هو نفسه يمثل المستخدم —— أخته الكبرى هي أم بعد الولادة، وهو يفهم بطبيعته نقاط ألم هذه المجموعة. ثانياً، نقاط الألم مؤلمة جداً —— القلق بشأن التعافي بعد الولادة حقيقي، وليس مجرد "نقطة رغبة" من نوعية "سيكون من الجيد أن تتوفر". ثالثاً، الاستعداد القوي للدفع —— الأمهات على استعداد لإنفاق المال لاستعادة قوامهن. رابعاً، المنافسة ليست شرسة نسبياً —— لا توجد منتجات في السوق مخصصة خصيصاً للأمهات بعد الولادة.
+
+::: tip منطق التقسيم لدى مدير المنتج
+
+لماذا يعتبر تقسيم الفئات المستهدفة مهماً جداً؟
+
+لأن الأدوات العامة يصعب أن تنتصر. فقد احتلت المنصات الكبرى بالفعل سوق "المنتجات العامة"، ومن الصعب جداً التفوق عليها في الوظائف. احتياجات الفئات المتخصصة أكثر ألماً —— احتياج الأمهات بعد الولادة لللياقة البدنية هو احتياج أساسي، بينما بالنسبة لممارس اللياقة العاديين هو مجرد "أمر جيد". خدمة مجموعة صغيرة بشكل جيد أسهل في بناء سمعة جيدة من محاولة إرضاء الجميع. نقاط ألم الفئات المتخصصة أكثر تحديداً، وهم أكثر استعداداً للدفع مقابل الحلول.
+
+:::
+
+---
+
+### الحفر العمودي: سيناريو المستخدم الكامل
+
+بعد العثور على الفئة المستهدفة، لم يتوقف شياو مينغ عند وظيفة "اللياقة البدنية بعد الولادة" فقط. أراد أن يفهم السيناريو الكامل للمستخدم بعمق أكبر (للحصول على التفاصيل، راجع الملحق ج).
+
+لقد راقب الحياة اليومية لأخته الكبرى.
+
+في الساعة 6 صباحاً، نام الطفل للتو، وكان لدى أخته 30 دقيقة من الفراغ. أرادت ممارسة الرياضة، لكنها خشيت أن توقظ طفلها، ولم تكن تعرف الحركات الآمنة التي يمكنها القيام بها.
+
+في الساعة 10 صباحاً، كانت أخت شياو مينغ تحمل طفلها لتنويمه، وكان ظهرها يؤلمها كثيراً. أرادت القيام ببعض تمارين الإصلاح، لكن يديها ليستا فارغتين.
+
+في الساعة 3 مساءً، نام الطفل، وأرادت الأخت ممارسة الرياضة. لكن جسدها كان متعباً جداً، ولم تكن تعرف ما إذا كانت لا تزال قادرة على ذلك.
+
+في الساعة 8 مساءً، أصبحت الأخت أخيراً متفرغة، لكنها كانت قلقة جداً. نظرت إلى نفسها في المرآة، وشعرت أن حياتها قد انتهت، وبكت سراً وهي تتصفح صورها القديمة.
+
+اكتشف شياو مينغ أن نقطة ألم أخته لم تكن "عدم وجود دورات لياقة بدنية"، بل "الخوف والقلق بشأن التعافي بعد الولادة".
+
+---
+
+::: info التفكير السينمائي لمدير المنتج
+
+يعتقد الكثير من الناس أن نقاط الألم هي مجرد احتياجات وظيفية، لكن هذا ليس صحيحاً. نقاط الألم هي المشاعر في السيناريو مضافة إلى الاستعداد للدفع.
+
+عندما تنظر الأمهات بعد الولادة إلى أجسادهن المتغيرة في المرآة، فإن نقطة الألم الحقيقية ليست "عدم معرفة كيفية ممارسة الرياضة"، بل الخوف —— القلق من عدم التعافي الجيد للجسم وترك آثار جانبية؛ والقلق —— النظر إلى أنفسهن في المرآة والشعور بأن حياتهن قد انتهت؛ والعجز —— عدم معرفة من أين تبدأ وعدم وجود من يوجههن؛ والوحدة —— الجميع يلد بسهولة، بينما أحتاج أنا إلى وقت طويل للتعافي.
+
+التصميم الجيد للمنتج يجب أن يحل المشاعر، وليس فقط الوظائف. فوراء المشاعر تكمن قوة دفع المستخدم للدفع.
+
+:::
+---
+
+### إعادة هيكلة القيمة: من "تطبيق لياقة بدنية" إلى "مساعد تعافي الأمهات بعد الولادة"
+
+بناءً على التحليل أعلاه، أعاد شياو مينغ تصميم هذا المنتج.
+
+::: tip مفهوم المنتج بعد إعادة الهيكلة: "مساعد تعافي الأمهات بعد الولادة"
+
+**التموضع الأساسي:** ليس مجرد أداة للياقة البدنية، بل "مدرب إعادة تأهيل حصري + داعم نفسي" للأمهات بعد الولادة
+
+**الوظائف الأساسية:**
+1. **تمارين مجزأة:**
+   - تستغرق كل مرة 10-15 دقيقة فقط
+   - يمكن ممارستها حتى أثناء نوم الطفل
+   - توفير حركات "يمكن القيام بها أثناء حمل الطفل"
+
+2. **دورات مخصصة لما بعد الولادة:**
+   - مصنفة حسب مرحلة ما بعد الولادة (0-3 أشهر، 3-6 أشهر، أكثر من 6 أشهر)
+   - تمارين مخصصة لانفصال عضلات البطن المستقيمة وإصلاح عضلات قاع الحوض
+   - كل حركة بها تنبيهات "احتياطات ما بعد الولادة"
+
+3. **تصحيح الحركات بالذكاء الاصطناعي:**
+   - التعرف على الحركات عبر كاميرا الهاتف
+   - تنبيهات فورية مثل "الركبتان مثنيتان كثيراً"، "يجب إبقاء الظهر مستقيماً"
+   - تجنب الإصابات الناتجة عن الحركات الخاطئة
+
+4. **مجتمع الدعم النفسي:**
+   - مجتمع خاص بالأمهات بعد الولادة فقط
+   - مشاركة تقدم التعافي والتشجيع المتبادل
+   - انضمام مستشارين نفسيين محترفين
+
+5. **خطط مخصصة:**
+   - مصممة حسب طريقة الولادة (طبيعية/قيصرية) والحالة الجسدية
+   - مراعاة الاحتياجات الخاصة لفترة الرضاعة
+
+**نموذج الأعمال:**
+- الدورات الأساسية مجانية
+- الدورات المتقدمة: 99 يوان/شهر (تشمل تصحيح الحركات بالذكاء الاصطناعي وخطط مخصصة)
+- مدرب خاص فردي: 299 يوان/شهر (توجيه عبر الإنترنت)
+- عضوية المجتمع: 199 يوان/سنة (تشمل الدعم النفسي وإجابات الخبراء)
+
+**مزايا تنافسية:**
+- الاحترافية: التعاون مع مؤسسات إعادة التأهيل بعد الولادة، مع دعم طبي
+- تماسك المجتمع: الرابط العاطفي بين الأمهات بعد الولادة قوي جداً
+- تراكم البيانات: كلما زادت بيانات المستخدمين الجسدية، أصبحت الخطط أكثر دقة
+
+**حجم السوق:**
+- حوالي 10 مليون مولود جديد سنوياً في الصين
+- سوق إعادة التأهيل بعد الولادة حوالي 50 مليار يوان
+- الهدف: خدمة 1% من الأمهات بعد الولادة = 100,000 مستخدم
+- ARPU (متوسط الإيرادات لكل مستخدم): 500 يوان/سنة
+- الإيرادات المحتملة: 50 مليون يوان/سنة
+
+:::
+
+مقارنة بين الفكرة الأصلية والمفهوم بعد إعادة الهيكلة:
+
+| البُعد | الفكرة الأصلية | بعد إعادة الهيكلة |
+|--------|---------------|-------------------|
+| المستخدمون المستهدفون | جميع ممارسي اللياقة (عام جداً) | الأمهات بعد الولادة (محدد بدقة) |
+| حل المشكلة | تسجيل التمارين (رغبة ثانوية) | قلق التعافي بعد الولادة (مشكلة حقيقية) |
+| المزايا التنافسية | التكنولوجيا (سهلة النسخ) | الاحترافية + المجتمع + البيانات |
+| الاستعداد للدفع | منخفض (بدائل مجانية كثيرة) | مرتفع (حاجة أساسية + قيمة عاطفية) |
+| مساحة التوسع | محدودة | يمكن التوسع لفترة الحمل وما قبل الحمل |
+
+**هذا هو التطور من "مجرد وظيفة" إلى "منتج يدفع الناس مقابله".**
+
+---
+
+### المزيد من الأمثلة: من الفكرة العادية إلى الفكرة الجيدة
+
+شعر شياو مينغ أن هذه الطريقة مفيدة جداً. فاستخدم نفس الطريقة لتحليل بعض الأمثلة الأخرى، لمعرفة ما إذا كانت هذه الطريقة عامة وقابلة للتطبيق (للحالات التفصيلية راجع الملحق د).
+
+#### المثال الأول: من "قياس السعرات الحرارية" إلى "كل بأمان يا صديق السكري"
+
+الفكرة العادية هي التقاط صور للطعام للتعرف على السعرات الحرارية ومساعدة الأشخاص في إنقاص الوزن والتحكم في النظام الغذائي. لكن المشكلة أن هناك منتجات ناضجة بالفعل في السوق مثل بوها جيانكانغ (Boohee) و MyFitnessPal.
+
+قام شياو مينغ بالتقسيم الأفقي ووجد أن فئة مرضى السكري مثيرة للاهتمام: يجب عليهم التحكم بشكل صارم في الكربوهيدرات، لكن من الصعب تقديرها عند تناول الطعام بالخارج. وعند الحفر العمودي في سيناريوهاتهم: قبل الوجبة لا يعرفون ما إذا كان بإمكانهم أكل هذا الطبق، ويقلقون من ارتفاع السكر في الدم؛ أثناء الوجبة يحتاجون إلى تذكير فوري "كم كربوهيدرات تناولت بالفعل"؛ وبعد الوجبة يحتاجون إلى تسجيل تغيرات السكر في الدم لمعرفة العلاقة مع النظام الغذائي.
+
+المنتج بعد إعادة الهيكلة يسمى "كل بأمان يا صديق السكري"، ويتموضع كـ "مساعد سلامة غذائية" لمرضى السكري.
+
+---
+
+#### المثال الثاني: من "مساعد الأخبار" إلى "ضابط استخبارات استثمارية"
+
+الفكرة العادية هي تجميع أخبار من منصات مختلفة لتوفير فتحها واحدة تلو الأخرى. لكن جينريتوتياو (Toutiao) وتينسنت نيوز وغيرها تقوم بذلك بشكل ممتاز بالفعل.
+
+بعد التقسيم الأفقي، وجد شياو مينغ أن المحللين الماليين لديهم احتياجات خاصة: يحتاجون إلى تتبع ديناميكيات صناعات معينة، لكن المعلومات متفرقة جداً. وعند الحفر العمودي في سيناريوهاتهم: صباحاً يطلعون على ديناميكيات الأسهم الأمريكية overnight وتغيرات أسعار الصرف؛ قبل الظهر يتتبعون إعلانات الشركات في محفظتهم وأخبار الصناعة؛ بعد الظهر يبحثون في أهداف استثمارية محتملة ويحتاجون إلى معلومات صناعية كبيرة.
+
+المنتج بعد إعادة الهيكلة يسمى "ضابط الاستخبارات الاستثمارية"، ويتموضع كـ "رادار معلومات ومساعد قرار" للممارسين الماليين.
+
+---
+
+#### المثال الثالث: من "منصة مستعملة جامعية" إلى "مساعد تصفية التخرج"
+
+الفكرة العادية هي منصة تداول سلع مستعملة في الحرم الجامعي. لكن شيانيو (Xianyu) وزوانزوان (Zhuanzhuan) يقومان بذلك بشكل ممتاز بالفعل.
+
+بعد التقسيم الأفقي، وجد شياو مينغ أن الخريجين لديهم احتياجات خاصة: الأشياء كثيرة جداً، وبيعها واحداً تلو الآخر مزعج. وعند الحفر العمودي في سيناريوهاتهم: قبل أسبوع من التخرج يجب مغادرة الحرم الجامعي، ولا يوجد وقت للبيع ببطء؛ لا يعرفون من يحتاج أشيائي؛ التفاوض والتسليم واستلام المال، كلها مرهقة.
+
+المنتج بعد إعادة الهيكلة يسمى "مساعد تصفية التخرج"، ويتموضع كـ "مدير أصول المغادرة" للخريجين.
+
+---
+
+### ملخص هذا الفصل: مكاسب شياو مينغ
+
+من خلال الفصل الثاني، فهم شياو مينغ ما يلي:
+
+**1. الانطلاق من النفس**
+- أنت نفسك المستخدم، تفهم بشكل طبيعي نقاط ألم هذه المجموعة
+- الهواية هي أفضل نقطة بداية، والشغف هو أفضل محرك
+
+**2. التقسيم الأفقي للجمهور**
+- لا تخدم "الجميع"، ابحث عن "الفئة التي تعاني أكثر"
+- كلما كان التقسيم أدق، زادت الفرص، وازداد استعداد المستخدمين للدفع
+
+**3. الحفر العمودي في السيناريوهات**
+- صِف رحلة المستخدم الكاملة: قبل الاستخدام، أثناء الاستخدام، بعد الاستخدام
+- ابحث عن نقاط اللمس العاطفية: الخوف، القلق، العجز، الوحدة……
+
+**4. إعادة هيكلة القيمة**
+- الترقية من "وظيفة" إلى "حل"
+- الترقية من "أداة" إلى "مساعد/مدير/شريك"
+
+---
+
+📦 **مخرجات هذا الفصل:**
+- العثور على مستخدمين مستهدفين دقيقين (الأمهات بعد الولادة)
+- فهم السيناريوهات الكاملة للمستخدمين ومشاعرهم الحقيقية
+- إعادة هيكلة مفهوم المنتج، مع تموضع تفاضلي واضح
+
+---
+
+## الفصل الثالث: صقل الحوار مع الذكاء الاصطناعي
+
+لدى شياو مينغ الآن اتجاه منتج واضح: مساعد تعافي الأمهات بعد الولادة. لكنه لا يزال لا يعرف كيف يفعل ذلك بالتحديد، من أين يبدأ، وما مدى صعوبة التنفيذ التقني.
+
+قرر استخدام الذكاء الاصطناعي لمساعدته في صقل مفهوم المنتج، وتحويل الأفكار إلى خطة قابلة للتنفيذ.
+
+### الجولة الأولى: طرح الفكرة الأصلية
+
+أخبر شياو مينغ الذكاء الاصطناعي بفكرته: "أريد إنشاء تطبيق مساعد تعافي للأمهات بعد الولادة، لمساعدة الأمهات على استعادة قوامهن. لكنني قلق بشأن صعوبة التنفيذ التقني، خاصة وظيفة تصحيح الحركات بالذكاء الاصطناعي، هل يمكنني القيام بذلك بمفردي؟"
+
+---
+
+### الجولة الثانية: الذكاء الاصطناعي يساعد في تخطيط MVP
+
+رد الذكاء الاصطناعي: "سؤال رائع! دعنا نقوم بتخطيط MVP (المنتج الأدنى القابل للتطبيق)."
+
+اقترح الذكاء الاصطناعي القيام بذلك على ثلاث مراحل. المرحلة الأولى هي 1-2 شهر، والهدف هو التحقق من الطلب. عدم إنشاء تطبيق، بل البدء ببرنامج صغير على WeChat، يوفر فقط دورات مخصصة لما بعد الولادة (فيديو) ومجتمع تسجيل الحضور. استخدام الطريقة اليدوية لتقديم إرشادات الحركات، حيث يقوم المستخدمون برفع مقاطع الفيديو ويرد المدرب. الهدف هو التحقق مما إذا كانت الأمهات بعد الولادة مستعدات للدفع.
+
+المرحلة الثانية هي 3-6 أشهر، إذا نجح التحقق في المرحلة الأولى، تتم إضافة الوظائف الأساسية. تطوير تصحيح الحركات بالذكاء الاصطناعي، يمكن استخدام SDK جاهز، مثل التعرف على جسم الإنسان من بايدو. إضافة خطط مخصصة، وتحسين وظائف المجتمع.
+
+المرحلة الثالثة هي 6-12 شهراً، التوسع. تطوير تطبيق مستقل، والتعاون مع مؤسسات إعادة التأهيل بعد الولادة، والتوسع لتشمل فترة الحمل وما قبل الحمل.
+
+بخصوص التنفيذ التقني، اقترح الذكاء الاصطناعي استخدام قدرات الذكاء الاصطناعي الجاهزة لتصحيح الحركات، مثل واجهات برمجة التطبيقات (API) من بايدو وتينسنت، دون الحاجة إلى التطوير من الصفر، مما يقلل التكاليف. في المرحلة المبكرة استخدام نموذج هجين يدوي مع الذكاء الاصطناعي، والانتقال تدريجياً.
+
+بالنسبة لتكاليف البدء، تطوير البرنامج الصغير 10-20 ألف يوان (عبر الاستعانة بمصادر خارجية) أو القيام بذلك بنفسه باستخدام AI IDE، وإنتاج المحتوى من خلال التعاون مع مدربي إعادة التأهيل بعد الولادة، والبدء بالترويج من مجموعات الأمهات و Xiaohongshu.
+
+مؤشرات التحقق هي 100 مستخدم في الشهر الأول، بمعدل تحويل مدفوع 10%. إذا تم تحقيق ذلك، فهذا يعني أن الطلب حقيقي، ويجب الاستمرار في الاستثمار؛ وإذا لم يتم تحقيق ذلك، يجب تعديل الاتجاه في الوقت المناسب.
+
+---
+
+### الجولة الثالثة: شياو مينغ يعبر عن مخاوفه
+
+فكر شياو مينغ وسأل مرة أخرى: "أنا قلق بشأن إنتاج المحتوى. دورات إعادة التأهيل بعد الولادة تحتاج إلى إرشاد احترافي، وليس لدي خلفية طبية، كيف أضمن جودة الدورات؟"
+
+---
+
+### الجولة الرابعة: الذكاء الاصطناعي يقدم حلاً
+
+رد الذكاء الاصطناعي: "هذا مخاوف العديد من رواد الأعمال التقنيين، لكن هناك حلاً."
+
+الحل الأول هو التعاون مع محترفين. ابحث عن مدربي إعادة التأهيل بعد الولادة وأطباء التغذية في المستشفيات للتعاون، حيث تقدم أنت التكنولوجيا والمنتج، ويقدمون المحتوى الاحترافي، ويمكن استخدام نموذج تقاسم الإيرادات.
+
+الحل الثاني هو دمج المحتوى عالي الجودة الموجود. في البداية يمكن استخدام مقاطع فيديو إعادة التأهيل بعد الولادة المتاحة للعامة، مثل تلك الموجودة على YouTube وBilibili. القيام بمراجعة وتنظيم المحتوى بنفسك، ثم إنتاج محتوى أصلي لاحقاً.
+
+الحل الثالث هو المحتوى الذي ينشئه المستخدمون. تشجيع الأمهات ذوات الخبرة على مشاركة طرق التعافي الخاصة بهن، واستخدام تصويت المجتمع لفرز المحتوى عالي الجودة، وبناء نظام بيئي للمحتوى تدريجياً.
+
+اقترح الذكاء الاصطناعي استخدام الحل الأول أولاً. الخطوات المحددة هي: العثور على 2-3 مدربين لإعادة التأهيل بعد الولادة، والتفاوض معهم على التعاون، حيث تقوم بتطوير المنتج ويوفرون الدورات. تقاسم الإيرادات بنسبة 70% لك و30% لهم. هذا يضمن جودة المحتوى ويقلل التكاليف في نفس الوقت. تكلفة إنتاج الدورات في المرحلة المبكرة 0 يوان، باستخدام نموذج تقاسم الإيرادات، تحتاج فقط لاستثمار وقت التطوير وتكاليف الترويج.
+
+**نصيحتي: استخدم الحل الأول أولاً**
+
+الخطوات المحددة:
+1. ابحث عن 2-3 مدربين لإعادة التأهيل بعد الولادة
+2. التفاوض معهم على التعاون: أنت تطور المنتج، وهم يوفرون الدورات
+3. تقاسم الإيرادات: أنت تأخذ 70%، وهم يأخذون 30%
+4. هذا يضمن جودة المحتوى ويقلل التكاليف في نفس الوقت
+
+**التكاليف المبكرة:**
+- إنتاج الدورات: 0 يوان (باستخدام نموذج تقاسم الإيرادات)
+- تحتاج فقط لاستثمار وقت التطوير وتكاليف الترويج
+
+:::
+
+---
+
+### الجولة الخامسة: شياو مينغ يسأل عن الترويج
+
+كان لدى شياو مينغ قلق أخير: "هل ستكون تكاليف الترويج مرتفعة؟ كيف أجد فئة الأمهات بعد الولادة؟"
+
+---
+### الجولة السادسة: AI يقدم استراتيجية ترويجية
+
+ردّ AI قائلاً: "مجموعة الأمهات بعد الولادة في الواقع سهلة العثور عليها، ويمكن أن تكون تكلفة الترويج منخفضة جداً."
+
+الأكثر توصية هو Xiaohongshu. ابحث عن كلمات مفتاحية مثل "تعافي ما بعد الولادة"، "انفصال العضلة المستقيمة"، وابحث عن المدونين ذوي الصلة، وتواصل معهم عبر رسائل خاصة للتعاون. استخدم طريقة "تجربة مجانية لمدة شهر واحد" مقابل الترويج، التكلفة تكاد تكون 0.
+
+ثانياً، مجموعات الأمهات. ابحث عن مجموعات WeChat ومجموعات QQ، وادخلها تحت مسمى "مشاركة تجارب التعافي بعد الولادة"، وشارك محتوى ذا قيمة حقيقية، دون إعلانات مباشرة، لبناء الثقة تدريجياً.
+
+يمكنك أيضاً التعاون مع أقسام الولادة في المستشفيات، وتقديم إرشادات مجانية للتعافي بعد الولادة، وتوزيع منشورات في المستشفى، التكلفة هي مجرد رسوم طباعة بضع مئات من اليوان. أو التعاون مع متاجر الأمومة والطفولة، ووضع مواد ترويجية، وشراء منتجات الأمومة والطفولة مع بطاقات تجريبية مجانية، التكلفة هي فقط رسوم إنتاج البطاقات التجريبية.
+
+مؤشرات التحقق هي: 100 مستخدم في الشهر الأول، 10 مستخدمين مدفوعين (معدل تحويل 10%)، إجمالي تكلفة الترويج أقل من 1000 يوان، وتكلفة الاستحواذ على العميل أقل من 10 يوان لكل شخص. إذا تم تحقيق هذا المؤشر، فهذا يعني أن الطلب حقيقي ويمكن الاستمرار في الاستثمار.
+
+---
+
+### النهاية: أصبح لدى شياو مينغ خطة واضحة
+
+بعد 6 جولات من المحادثة، أصبح لدى شياو مينغ أخيراً خطة واضحة.
+
+المرحلة الأولى هي 1-2 شهر: إنشاء تطبيق WeChat Mini Program، والتعاون مع 2-3 مدربي إعادة تأهيل ما بعد الولادة (نموذج تقاسم الأرباح)، وتقديم دورات حصرية لما بعد الولادة (فيديو) ومجتمع تسجيل الوصول فقط، واستخدام الطريقة اليدوية لتقديم إرشادات الحركة. الهدف هو 100 مستخدم، ومعدل تحويل مدفوع 10%.
+
+المرحلة الثانية هي 3-6 أشهر: إذا تم التحقق من نجاح المرحلة الأولى، استمر في الاستثمار. أضف وظيفة تصحيح الحركة بالـ AI، وزد الخطط المخصصة، وحسّن وظائف المجتمع.
+
+المرحلة الثالثة هي 6-12 شهرًا: تطوير تطبيق مستقل، والتعاون مع مؤسسات إعادة تأهيل ما بعد الولادة، والتوسع لتشمل فترة الحمل وفترة الاستعداد للحمل.
+
+تكلفة البدء منخفضة جدًا: التطوير يتم باستخدام AI IDE بنفسه (0 يوان)، المحتوى بتقاسم الأرباح مع المدربين (0 يوان مسبقًا)، الترويج عبر Xiaohongshu ومجموعات الأمهات (أقل من 1000 يوان). التكلفة الإجمالية أقل من 1000 يوان.
+
+---
+
+### طريقة الخطوات الخمس لصقل محادثة AI
+
+من خلال هذه الحالة، لخص شياو مينغ عملية قياسية للحوار مع AI (للمحتوى التفصيلي، راجع الملحق E).
+
+**الخطوة الأولى: اطرح فكرتك الأصلية.** صِف فكرتك الأولية، حتى لو كانت خامًا، لا بأس بذلك. أخبر AI بمخاوفك، مثل المنافسة الشديدة، أو عدم معرفة كيفية التمايز وغيرها.
+
+**الخطوة الثانية: دع AI يساعدك في تخطيط MVP.** ما هي الوظائف التي يجب أن يتضمنها الحد الأدنى من المنتج القابل للتطبيق؟ كم عدد المراحل؟ ما هو هدف كل مرحلة؟ هل صعوبة التنفيذ التقني كبيرة؟
+
+**الخطوة الثالثة: اطرح مخاوفك.** صعوبة التنفيذ التقني؟ تكلفة إنتاج المحتوى؟ تكلفة الترويج؟ صعوبة الاستحواذ على المستخدمين؟ أخبر AI بجميع مخاوفك.
+
+**الخطوة الرابعة: دع AI يقدم حلولاً.** بناءً على مخاوفك، سيقدم AI اقتراحات محددة. مقارنة بين حلول متعددة، واختيار الأمثل. تقدير التكلفة.
+
+**الخطوة الخامسة: التأكيد النهائي على الخطة.** قم بتنظيم خطة عمل واضحة، وحدد مؤشرات التحقق. إذا لم يتم تحقيقها، قم بتعديل الاتجاه في الوقت المناسب.
+
+**قالب الأوامر (Prompt):**
+```
+أريد أن أصنع [مفهوم المنتج]،
+لكنني قلق بشأن [مخاوفك].
+ساعدني في:
+1. تخطيط MVP (المنتج الأدنى المقبول)
+2. تقديم اقتراحات محددة للتنفيذ التقني
+3. تقدير التكاليف
+4. تحديد مؤشرات التحقق
+```
+
+---
+
+### ملخص هذا الفصل: مكاسب شياو مينغ
+
+من خلال الفصل الثالث، فهم شياو مينغ ثلاثة أشياء.
+
+**أولاً، استخدام محادثة AI لصقل مفهوم المنتج.** لا تتوقع الحصول على إجابة مثالية من محادثة واحدة، بل قم بتكرارات متعددة. أخبر AI بملاحظاتك وتجاربك وردود الفعل من الأشخاص من حولك. إذا كانت اقتراحات AI غير معقولة، أشر إلى ذلك في الوقت المناسب. في النهاية، يجب أن تصل إلى خطة عمل محددة.
+
+**ثانياً، المبدأ الأساسي لـ MVP.** التقليل إلى الحد الأدنى، والقيام فقط بالوظائف الأساسية. قابل للتحقق، والقدرة على التحقق بسرعة مما إذا كان الطلب حقيقيًا. تكلفة منخفضة، والتحقق بأقل تكلفة ممكنة.
+
+**ثالثاً، مؤشرات التحقق.** إذا كان معدل التحويل المدفوع أكبر من 10%، فهذا يعني أن الطلب حقيقي ويستحق الاستثمار. إذا كان معدل التحويل المدفوع 5-10%، فهذا يعني أن الطلب موجود ولكنه يحتاج إلى صقل. إذا كان معدل التحويل المدفوع أقل من 5%، فهذا يعني أن الطلب غير صالح، ويجب تعديله في الوقت المناسب.
+
+---
+
+📦 **مخرجات هذا الفصل:**
+- أصبح لديك خطة MVP واضحة
+- عرفت مسار التنفيذ التقني
+- حددت مؤشرات التحقق
+
+---
+
+## الفصل الأخير: خطوتك القادمة
+
+### قاعدة حفظ
+
+**شخص واحد، أمر واحد، نقطة دخول واحدة، تقطيع أفقي وحفر عمودي لإيجاد نقاط الألم، حوار AI لصقل المفهوم، التحقق بخمس خطوات قبل البدء**
+
+**الشرح:**
+- **شخص واحد:** ابدأ بنفسك، فأنت تفهم هذه المجموعة بشكل طبيعي
+- **أمر واحد:** ركّز على شيء واحد محدد، لا تطمع في الكثير
+- **نقطة دخول واحدة:** ابحث عن نقطة الدخول، وكلما كانت أدق كان ذلك أفضل
+- **التقطيع الأفقي:** قسّم الجمهور أفقيًا للعثور على المستخدمين الأكثر استعدادًا للدفع
+- **الحفر العمودي:** احفر عموديًا في السيناريوهات لفهم الرحلة الكاملة للمستخدم
+- **حوار AI:** استخدم محادثة AI لصقل مفهوم المنتج
+- **التحقق بخمس خطوات:** استخدم طريقة الحكم بخمس خطوات للتحقق من صحة الطلب
+
+---
+
+### تمرين بعد الفصل
+
+اختر مشكلة صغيرة تواجهها في حياتك اليومية، وقم بتوسيعها باستخدام طريقة هذا الفصل:
+
+::: tip مهمة التمرين
+
+**1. صِف هذه المشكلة** (بجملة واحدة)
+- مثال: "أريد إنشاء تطبيق لتتبع المصاريف، يساعد المستخدمين على تسجيل نفقاتهم"
+
+**2. التقطيع الأفقي: ابحث عن 3 مجموعات قد تكون لديها احتياجات مختلفة**
+- مثال: أصحاب الأعمال الصغيرة والمتوسطة، آباء الطلاب الدوليين، العاملون المستقلون
+
+**3. اختر إحدى المجموعات، وقم بالحفر العمودي: صِف سيناريوهاتهم الكاملة ومشاعرهم الحقيقية**
+- مثال: سيناريو آباء الطلاب الدوليين — يريدون معرفة كم أنفق أبناؤهم في الخارج، لكن الأبناء لا يقولون
+
+**4. إعادة بناء مفهوم المنتج: التطور من "وظيفة واحدة" إلى "حل متكامل"**
+- مثال: "مدير أموال الطلاب الدوليين" — ليس مجرد تسجيل مصاريف، بل جعل الآباء "على دراية" بنفقات أبنائهم في الخارج
+
+**5. استخدم قائمة التحقق لتقييم فكرتك** (انظر الملحق F)
+
+**شارك تحليلك في المجتمع وناقشه مع المتدربين الآخرين!**
+
+:::
+
+---
+
+## الملحق: منهجية SOP
+
+### الملحق أ: طريقة الحكم بخمس خطوات لتحليل الاحتياجات
+
+عندما يكون لديك فكرة، كيف تحكم بسرعة على ما إذا كانت تستحق الاستثمار؟
+
+**الخطوة الأولى: التحقق من المستخدم — ابحث عن 10 مستخدمين مستهدفين**
+
+**لا تسأل:** "هل ستستخدم منتجي؟" (معدل إيجابية كاذبة 90%)
+
+**اسأل:**
+1. "كيف تحل هذه المشكلة حاليًا؟" (فهم السلوك الحقيقي)
+2. "خلال الأسبوع الماضي، كم مرة أزعجتك هذه المشكلة؟" (فهم التكرار)
+3. "كم من المال/الوقت أنفقت لحلها؟" (فهم الاستعداد للدفع)
+4. "إذا كان هناك حل، لكنه يتطلب تغيير العادات، هل ستوافق؟" (فهم تكلفة التغيير)
+
+**معايير الحكم:**
+- إذا قال أكثر من 3 مستخدمين "أعاني من هذه المشكلة كل يوم" — قد تكون نقطة ألم
+- إذا قال المستخدم "إنها مثيرة للاهتمام، لكنني لست في عجلة من أمري" — من المحتمل جدًا أنها مجرد رغبة
+- إذا قال المستخدم "أستخدم حاليًا XX للحل، لكنني لست راضيًا تمامًا" — هناك فرصة
+
+**السؤال الرئيسي:** ما هي الطريقة التي يستخدمها المستخدمون حاليًا لحل هذه المشكلة؟
+
+| نوع البديل | الشرح | الحكم على الفرصة |
+|------------|------|---------|
+| **لا يوجد بديل** | المستخدم يتحمل بصمت | فرصة كبيرة، لكنها تتطلب تثقيف السوق |
+| **استخدام طريقة بدائية** | Excel، العمل اليدوي، تعاون عدة أشخاص | فرصة جيدة، المستخدمون يتوقون لحل أفضل |
+| **استخدام عدة أدوات معًا** | أداة A + أداة B + أداة C | فرصة جيدة، الدمج له قيمة |
+| **استخدام منتج ناضج** | لكن المستخدم غير راضٍ | هناك فرصة، لكنها تتطلب التمايز |
+| **استخدام منتج ناضج** | المستخدم راضٍ جدًا | الفرصة ضئيلة، ما لم يكن هناك ابتكار تخريبي |
+
+::: tip ما هو "الابتكار التخريبي"؟
+
+**تعريف بسيط:** لا يتعل الأمر بجعل المنتج أفضل فحسب، بل بخدمة مجموعات المستخدمين التي تم تجاهلها سابقًا بطريقة أبسط/أرخص.
+
+**أمثلة:**
+- الهواتف التقليدية ← الهواتف الذكية (ليس هناك المزيد من الوظائف، بل طريقة تفاعل مختلفة تمامًا)
+- سيارات الأجرة التقليدية ← DiDi (ليست سيارة أفضل، بل جعل استدعاء السيارة متاحًا في أي وقت وفي أي مكان)
+- المكتبات التقليدية ← الكتب الإلكترونية (ليس هناك المزيد من الكتب، بل جعل الحمل والشراء أكثر ملاءمة)
+
+**النقطة الأساسية:** يبدأ الابتكار التخريبي غالبًا من "السوق المنخفضة" أو "مجموعات المستخدمين الجدد"، ويتقدم تدريجيًا نحو الأعلى.
+
+:::
+
+**حالات دراسية:**
+- مرضى السكري يستخدمون حاليًا "الخبرة + التخمين" للتحكم في النظام الغذائي (طريقة بدائية للغاية) — فرصة كبيرة
+- الأشخاص العاديون الذين يتبعون حمية يستخدمون تطبيق Bohe Health (منتج ناضج، مستوى الرضا متوسط) — هناك فرصة للقيام بالتخصص الدقيق
+- الطلاب يستخدمون مجموعات WeChat للمعاملات المستعملة (عدة أدوات معًا) — هناك فرصة للقيام بالدمج
+
+**الطريقة الأكثر فعالية: البيع المسبق أو الدفع المقدم**
+
+**خطوات التشغيل:**
+1. أنشئ صفحة هبوط بسيطة تصف مفهوم منتجك
+2. ضع زر "بيع مسبق" أو "حجز"
+3. انظر كم عدد الأشخاص المستعدين للدفع (حتى لو كان يوانًا واحدًا فقط)
+
+**معايير الحكم:**
+- المستخدمون المستعدون لدفع مقدمًا > 10%: الطلب حقيقي، يستحق التنفيذ
+- المستخدمون المستعدون لدفع مقدمًا 5-10%: الطلب موجود، لكنه يحتاج إلى صقل
+- المستخدمون المستعدون لدفع مقدمًا < 5%: الطلب غير صالح، أو أن مفهوم المنتج به مشكلة
+
+**ملاحظة:** الكثير من الأشخاص يقولون "سأشتري"، لكن من يدفعون فعليًا هم عملاؤك المستهدفون.
+
+**صيغة بسيطة:**
+```
+حجم السوق المحتمل = عدد المستخدمين المستهدفين × الاستعداد للدفع × متوسط قيمة الطلب
+```
+
+**حالة دراسية: منصة تداول سلع مستعملة داخل الحرم الجامعي**
+- المستخدمون المستهدفون: طلاب الجامعات على مستوى البلاد 40 مليون
+- من لديهم طلب على تداول السلع المستعملة: 50% = 20 مليون
+- المستعدون لاستخدام المنصة: 10% = 2 مليون
+- تكرار المعاملات السنوي: مرتان
+- عمولة المنصة: 5%
+- متوسط قيمة الطلب: 100 يوان
+- حجم السوق المحتمل = 2 مليون × 2 × 100 × 5% = 20 مليون/سنة
+
+**معايير الحكم:**
+- حجم السوق > 1 مليار: مسار كبير، يستحق العمل عليه
+- حجم السوق 1-10 مليون: مسار صغير ومتوسط، يمكن العمل فيه ولكن السقف واضح
+- حجم السوق < 1 مليون: سوق متخصصة، مناسبة كعمل جانبي أو مشروع صغير وجميل
+
+**سؤال جوهري:** إذا نجح المنتج، ماذا تفعل حيال نسخه من قبل الآخرين؟
+
+**أنواع الخنادق الدفاعية الشائعة:**
+
+| نوع الخندق الدفاعي | الشرح | المثال |
+|-----------|------|------|
+| **تأثير الشبكة** | كلما زاد المستخدمون، زادت قيمة المنتج | WeChat، DiDi |
+| **تراكم البيانات** | كلما زادت البيانات، أصبحت الخوارزميات أكثر دقة | Toutiao، Douyin |
+| **الوعي بالعلامة التجارية** | احتلال عقل المستخدم | Coca-Cola، Nike |
+| **تأثير الحجم** | كلما زاد الحجم، انخفضت التكلفة | JD Logistics، Amazon |
+| **براءات الاختراع التقنية** | حواجز التكنولوجيا الأساسية | Huawei، DJI |
+| **تكلفة التحويل** | تكلفة انتقال المستخدم عالية | برمجيات المؤسسات، أنظمة التشغيل |
+
+**واقع المشاريع المبكرة:**
+- معظم المشاريع المبكرة ليس لديها خنادق دفاعية واضحة
+- لكن هذا لا يهم، الأهم هو <strong>التحرك بسرعة</strong>
+- احتل السوق أولاً، ثم ابنِ الحواجز
+
+---
+
+### الملحق ب: طريقة التقسيم الأفقي للجمهور
+
+لا تحاول خدمة "جميع مستخدمي XX"، بل ابحث عن <strong>مجموعة محددة من الأشخاص</strong> تكون احتياجاتهم أكثر إلحاحًا وتحديدًا.
+
+**الخطوة الأولى: اذكر جميع الفئات الممكنة**
+
+بالنسبة لمفهوم منتجك، اذكر جميع الفئات الممكنة.
+
+**الخطوة الثانية: تقييم القيمة التجارية لكل فئة**
+
+| بُعد التقييم | الشرح |
+|---------|------|
+| قوة نقطة الألم | هل احتياج هذه الفئة هو نقطة ألم أم مجرد رغبة؟ |
+| الاستعداد للدفع | كم يرغبون في الدفع مقابل الحل؟ |
+| حجم السوق | كم عدد الأشخاص في هذه الفئة؟ |
+| مستوى المنافسة | هل الحلول الحالية مُرضية؟ |
+| فهمك للفئة | هل تفهم هذه الفئة؟ هل لديك قنوات للوصول إليها؟ |
+
+**الخطوة الثالثة: اختر فئة واحدة للتحليل المتعمق**
+
+اختر فئة:
+- تعاني من أشد نقاط الألم
+- لديها أقوى استعداد للدفع
+- تفهمها أفضل ما يمكن
+- ذات منافسة منخفضة نسبيًا
+
+::: tip مثال على التقسيم
+
+**مفهوم المنتج:** تطبيق لتتبع المصاريف
+
+| الفئة المحددة | نقطة الألم | الاستعداد للدفع | حجم السوق | مستوى المنافسة |
+|---------|------|---------|---------|---------|
+| موظفو المكاتب العاديون | متاعب في التسجيل | منخفض | كبير | عالي |
+| أصحاب الأعمال الصغيرة والمتوسطة | خلط بين النفقات الشخصية والشركات | عالي | متوسط | متوسط |
+| المستقلون | دخل غير مستقر، الحاجة للتنبؤ بالتدفق النقدي | عالي | متوسط | متوسط |
+| آباء الطلاب المغتربين | يريدون معرفة كم ينفق أبناؤهم، لكن الأبناء لا يخبرونهم | عالي | صغير | منخفض |
+
+**الاختيار:** آباء الطلاب المغتربين (نقطة الألم الأقوى، استعداد عالي للدفع، منافسة منخفضة نسبيًا)
+
+:::
+
+---
+
+### الملحق ج: طريقة الحفر العمودي للاكتشاف
+
+بعد العثور على الفئة المستهدفة، لا تتوقف عند ميزة واحدة، بل يجب أن تفهم <strong>السيناريو الكامل</strong> للمستخدم.
+
+**الخطوة الأولى: صف يوم المستخدم**
+
+من الصباح إلى المساء، صِف السيناريو الكامل للمستخدم عند استخدامه لمنتجك.
+
+**الخطوة الثانية: حلل نقاط الألم في كل سيناريو**
+
+في كل سيناريو، ما هي المشاكل التي يواجهها المستخدم؟ وما هي مشاعره؟
+
+**الخطوة الثالثة: ابحث عن المحفزات العاطفية**
+
+الخوف، القلق، العجز، الوحدة، الغضب، الندم……
+
+**الخطوة الرابعة: إعادة بناء القيمة**
+
+بناءً على السيناريو والمشاعر، أعد بناء قيمة المنتج.
+
+::: tip مثال على الحفر العميق
+
+**الفئة:** الأمهات الجدد
+
+| الوقت | السيناريو | نقطة الألم | المشاعر |
+|------|------|------|------|
+| 6 صباحًا | الطفل نام للتو، لديها 30 دقيقة فراغ | لا تعرف أي تمارين آمنة للقيام بها | الخوف |
+| 10 صباحًا | تحمل الطفل لتنويمه، ألم شديد في الظهر | يداها مشغولتان، تريد القيام بتمارين التعافي | القلق |
+| 3 مساءً | الطفل نائم، تريد ممارسة الرياضة | الجسد متعب جدًا، لا تدري إن كانت قادرة | العجز |
+| 8 مساءً | أخيرًا لديها وقت فراغ | تنظر في المرآة وتشعر أن حياتها انتهت | الاكتئاب |
+| على المدى الطويل | لا أحد يفهمها | تشعر أنها الوحيدة التي تعاني هكذا | الوحدة |
+
+**إعادة بناء القيمة:** الترقية من "أداة لياقة" إلى "مدرب تعافي + داعم نفسي"
+
+:::
+
+---
+
+### الملحق د: المزيد من الأمثلة لتحويل الفكرة العادية إلى فكرة ممتازة
+
+#### المثال الأول: من "تطبيق تتبع مصاريف" إلى "مدير مالية الدراسة بالخارج"
+
+**الفكرة العادية:** تطبيق تتبع مصاريف تلقائي، يتصل بالبطاقة البنكية ويصنف النفقات تلقائيًا
+
+**المشكلة:** السوق يحتوي بالفعل على SuiShouJi و Wacai وكشف حسابات Alipay……
+
+**التقسيم الأفقي:**
+- آباء الطلاب المغتربين: يريدون معرفة كم أنفق أبناؤهم في الخارج، وهل تجاوزوا الميزانية
+
+**الحفر العمودي:**
+- نقطة الألم ليست "تسجيل المصاريف"، بل <strong>"الشعور بفقدان السيطرة"</strong>——لا يعرفون كم أنفق الطفل ولا أين أنفق
+- السيناريو: رؤية كشف حساب البطاقة الائتمانية كل شهر، لكن الطفل لا يخبرهم أبدًا بما أنفقه
+
+**بعد إعادة البناء:** "مدير مالية الدراسة بالخارج"——ليس مجرد تسجيل مصاريف، بل جعل الآباء "على دراية" بنفقات أبنائهم في الخارج
+
+**الميزات الأساسية:**
+- مزامنة نفقات الأبناء في الوقت الفعلي
+- تنبيهات تجاوز الميزانية
+- تقرير تحليل النفقات الشهري
+- مقارنة النفقات مع الطلاب المماثلين ("ابنك أنفق أكثر من المتوسط بنسبة 20%")
+
+---
+
+#### المثال الثاني: من "أداة تقنية البومودورو" إلى "إثبات العمل عن بُعد"
+
+**الفكرة العادية:** تطبيق تقنية البومودورو، يساعد المستخدمين على التركيز في العمل
+
+**المشكلة:** الهواتف تحتوي بالفعل على وقت استخدام الشاشة، و Forest، و Tomato Todo……
+
+**التقسيم الأفقي:**
+- العاملون عن بُعد: يحتاجون لإثبات للرئيس "أنا أعمل بالفعل"
+
+**الحفر العمودي:**
+- نقطة الألم ليست "عدم التركيز"، بل <strong>"أزمة ثقة"</strong>——الرئيس لا يراني، كيف أثبت أنني أعمل؟
+- السيناريو: في نهاية كل يوم، يسأل الرئيس "كيف كان العمل اليوم؟"، لا توجد طريقة لإثبات ذلك
+
+**بعد إعادة البناء:** "إثبات العمل عن بُعد"——مساعدة العاملين عن بُعد على بناء الثقة مع أصحاب العمل
+
+**الميزات الأساسية:**
+- تتبع تلقائي لساعات العمل
+- تقرير الإنتاجية
+- ملخص نشاط الشاشة (نسخة تحمي الخصوصية)
+- إنشاء "تقرير عمل" تلقائي يوميًا وإرساله للمدير
+
+---
+
+#### المثال الثالث: من "تجارة الكتب المستعملة" إلى "مكتبة كتب مصورة"
+
+**الفكرة العادية:** منصة لبيع الكتب المستعملة
+
+**المشكلة:** DuoZhuaYu، XianShu، Kongfz……
+
+**التقسيم الأفقي:**
+- الأمهات: كتب الأطفال المصورة تُقرأ مرة واحدة ثم تُترك، لكن شراء الجديدة مكلف للغاية
+
+**الحفر العمودي:**
+- نقطة الألم ليست "الكتب غالية"، بل <strong>"دورة حياة الكتب المصورة قصيرة"</strong>——الكتب التي يقرأها الطفل في سن 3 سنوات، لن يقرأها في سن 4 سنوات
+- السيناريو: المنزل ممتلئ بالكتب المصورة التي لم يعد الطفل يقرأها، لكن التخلص منها أمر مؤسف
+
+**بعد إعادة البناء:** "مكتبة كتب مصورة تصل إلى باب منزلك"——ليس بيع كتب مستعملة، بل توفير "إيجار حق استخدام" للكتب المصورة
+
+**الميزات الأساسية:**
+- اشتراك الكتب المصورة (إرسال 5 كتب مناسبة للعمر شهريًا، إرجاعها بعد قراءتها واستبدالها بأخرى جديدة)
+- تتبع تقدم القراءة
+- توصيات مناسبة للعمر
+- ضمان التعقيم
+
+---
+
+### الملحق هـ: طريقة الخطوات الخمس لصقل مفهوم المنتج عبر محادثات الذكاء الاصطناعي
+
+من خلال جولات متعددة من محادثات الذكاء الاصطناعي، يتم صقل الفكرة العادية تدريجيًا لتصبح مفهوم منتج دقيقًا وقابلًا للتنفيذ.
+
+**الإجراء:**
+- صِف فكرتك الأولية (حتى لو كانت أولية جدًا)
+- أخبر الذكاء الاصطناعي عن مخاوفك (منافسة شديدة، لا تعرف كيف تتميز، إلخ)
+
+**نص التلميح:**
+```
+أريد إنشاء [مفهوم المنتج]،
+لكنني اكتشفت [المشكلة/المخاوف].
+```
+
+**الإجراء:**
+- اطلب من الذكاء الاصطناعي مساعدتك في وضع خطة للحد الأدنى للمنتج القابل للتطبيق (MVP)
+- ناقش صعوبة وتكلفة التنفيذ التقني
+- حدد مؤشرات التحقق
+
+**نص التلميح:**
+```
+يرجى مساعدتي في:
+1. تخطيط MVP
+2. تقديم اقتراحات محددة للتنفيذ التقني
+3. تقدير التكلفة
+4. تحديد مؤشرات التحقق
+```
+
+**الإجراء:**
+- ما صعوبة التنفيذ التقني؟
+- ما تكلفة إنتاج المحتوى؟
+- ما تكلفة الترويج؟
+- ما صعوبة اكتساب المستخدمين؟
+
+**نص التلميح:**
+```
+أنا قلق بشأن:
+1. [المخاوف 1]
+2. [المخاوف 2]
+3. [المخاوف 3]
+```
+
+**الإجراء:**
+- تقديم نصائح محددة لمعالجة مخاوفك
+- مقارنة بين عدة حلول واختيار الأفضل
+- تقدير التكلفة
+
+**نص التلميح:**
+```
+بالنسبة لمخاوفي، يرجى تقديم حلول محددة.
+```
+
+**الإجراء:**
+- تنظيم خطة عمل واضحة
+- تحديد مؤشرات التحقق
+- إذا لم يتم تحقيقها، تعديل المسار في الوقت المناسب
+
+**نص التلميح:**
+```
+يرجى مساعدتي في تنظيم خطة عمل واضحة.
+```
+
+::: tip مهارات أساسية
+
+- **محادثات متعددة:** لا تتوقع الحصول على إجابة مثالية في محادثة واحدة، كرر العملية عدة مرات
+- **توفير المعلومات:** أخبر الذكاء الاصطناعي بملاحظاتك وتجاربك وردود الفعل من الأشخاص من حولك
+- **تحدي الذكاء الاصطناعي:** إذا كانت اقتراحات الذكاء الاصطناعي غير منطقية، أشر إلى ذلك فورًا
+- **التركيز على التنفيذ:** في النهاية، يجب أن تؤدي العملية إلى خطة عمل محددة
+
+:::
+
+---
+
+### الملحق و: قائمة التحقق من المتطلبات
+
+قبل أن تقرر قضاء الوقت في التطوير، استخدم القائمة التالية للتحقق من فكرتك——<strong>السؤال الجوهري هو: هل سيدفع المستخدم مقابل هذا؟</strong>
+
+::: tip قائمة التحقق من المتطلبات
+
+**1. وضوح شخصية المستخدم**
+- ☐ هل يمكنك وصف المستخدم المستهدف في جملة واحدة؟
+- ☐ هل يمكنك ذكر ما هي بدائلهم الحالية؟
+- ☐ هل يمكنك وصف التفاصيل الدقيقة لسيناريو استخدامهم؟
+- ☐ هل تمتلك هذه الفئة القدرة على الدفع؟
+
+**2. تقييم قوة نقطة الألم**
+- ☐ ما الثمن الذي يدفعه المستخدم حاليًا لحل هذه المشكلة؟ (الوقت/المال/الجهد)
+- ☐ ما هي العواقب إذا لم يتم حل هذه المشكلة؟
+- ☐ هل يبحث المستخدمون بالفعل عن حلول؟
+- ☐ كم يرغب المستخدم في الدفع لحل هذه المشكلة؟
+
+**3. التمايز في الحل**
+- ☐ مقارنة بالحلول الحالية، ما هي مزاياك؟
+- ☐ هل هذه الميزة كافية لجعل المستخدمين على استعداد للتحول؟
+- ☐ ما مدى صعوبة نسخ ميزتك من قبل المنصات الكبرى؟
+- ☐ هل تمايزك كافٍ لدفع المستخدمين مقابل الخدمة؟
+
+**4. جدوى نموذج العمل**
+- ☐ هل المستخدمون على استعداد للدفع مقابل هذا؟ كم سيدفعون؟ (يجب إجراء اختبار فعلي)
+- ☐ ما هو التكلفة التقريبية للاستحواذ على عميل؟
+- ☐ هل يمكن لقيمة دورة حياة العميل (LTV) أن تغطي تكلفة الاستحواذ على العملاء (CAC)؟
+- ☐ هل هناك طرق أخرى لتحقيق الدخل؟ (الإعلانات، الخدمات المتميزة، قطاع الأعمال B2B، إلخ)
+
+**5. خطة التحقق السريع**
+- ☐ هل يمكنك بناء نموذج أولي قابل للاختبار بأقل تكلفة (في غضون 1-2 أسبوع)؟
+- ☐ هل يمكنك العثور على 10 مستخدمين مستهدفين لإجراء مقابلات معهم؟
+- ☐ هل يمكنك تصميم تجربة للتحقق من الفرضية الأساسية؟
+- ☐ هل يمكنك جعل المستخدمين يدفعون دفعة مقدمة للتحقق من رغبتهم في الدفع؟
+
+:::
+
+<strong>لا تسأل "هل ستستخدم هذا المنتج؟"</strong> هذا النوع من الأسئلة يجلب دائمًا إجابات إيجابية كاذبة.
+
+<strong>بل اسأل:</strong>
+- "كيف تحل هذه المشكلة حاليًا؟" (لفهم السلوك الحقيقي)
+- "خلال الأسبوع الماضي، كم مرة أزعجتك هذه المشكلة؟" (لفهم التكرار)
+- "إذا كان هناك حل، لكنه يتطلب منك تغيير عاداتك الحالية، هل ستوافق؟" (لفهم تكلفة التغيير)
+- "إذا كان السعر XX ريال، هل ستشتريه؟" (لفهم نية الدفع)
+
+**أفضل طريقة للتحقق:** اطلب من المستخدمين دفع عربون. الكثيرون يقولون إنهم على استعداد للدفع، لكن من يدفعون المال فعلًا هم مستخدموك المستهدفون.
+
+**المؤشرات الرئيسية:**
+- نسبة المستخدمين المستعدين لدفع عربون > 10%: الطلب حقيقي، ويستحق الاستثمار
+- نسبة المستخدمين المستعدين لدفع عربون 5-10%: الطلب موجود، لكن يحتاج إلى صقل
+- نسبة المستخدمين المستعدين لدفع عربون < 5%: الطلب غير حقيقي، أو أن مفهوم المنتج به مشكلة
+
+---
+
+## ملخص الفصل
+
+في هذا الفصل، من خلال قصة شياو مينغ، تعلمنا كيفية تقييم أفكار المنتجات من منظور مدير المنتج — <strong>الجوهر يدور دائمًا حول: هل سيدفع المستخدمون مقابل هذا؟</strong>
+
+::: info النقاط الجوهرية
+
+**1. المعايير الثلاثة للطلب الحقيقي:**
+- المستخدمون على استعداد للدفع مقابلها (المعيار الأهم)
+- المستخدمون على استعداد لتغيير سلوكهم من أجلها
+- في غياب الحل، سيتكبد المستخدمون خسائر كبيرة
+
+**2. المسار من الفكرة العادية إلى منتج يدفع الناس مقابله:**
+- <strong>التقسيم الأفقي:</strong> إيجاد فئة محددة، وكلما كانت أكثر تحديدًا زادت نية الدفع
+- <strong>الحفر العمودي:</strong> فهم السيناريو الكامل، وحل المشاعر وليس فقط الوظائف
+- <strong>إعادة بناء القيمة:</strong> التطور من مجرد أداة إلى حل متكامل، وبناء مبرر للدفع
+
+**3. تجنب فخ الطلب المزيف:**
+- حل نقطة ألم وهمية (حكة وليست نقطة ألم حقيقية)
+- حجم السوق صغير جدًا، ولا يمكنه دعم نموذج عمل
+- الحل أكثر تعقيدًا من المشكلة نفسها
+
+**4. طرق التحقق من نية الدفع:**
+- إجراء مقابلات متعمقة مع 10 مستخدمين مستهدفين
+- جعل المستخدمين يدفعون دفعة مقدمة للتحقق من نيتهم الحقيقية
+- نسبة المستخدمين المستعدين لدفع عربون > 10% فقط هي التي تستحق الاستثمار
+
+**5. استخدام محادثات AI لصقل مفهوم المنتج:**
+- التكرار المتعدد، والتحسين المستمر
+- التركيز على التنفيذ، والوصول إلى خطة عمل
+- تحديد مؤشرات التحقق، والتعديل في الوقت المناسب
+
+:::
+
+**تذكر:** مدير المنتج الجيد لا يخلق الطلب من العدم، بل يكتشف الطلبات الحقيقية <strong>المتجاهلة، والمُقلل من شأنها، أو التي تم تلبيتها بشكل خاطئ</strong>، ويجد طريقة تجعل المستخدمين على استعداد للدفع مقابلها.
+
+في الفصل التالي، سنتخذ أفكارنا التي تم التحقق منها، ونبدأ في تعلم كيفية استخدام AI IDE لتحويلها إلى نموذج أولي تفاعلي للمنتج.
\ No newline at end of file
diff --git a/docs/ar-sa/stage-1/integrating-ai-capabilities/index.md b/docs/ar-sa/stage-1/integrating-ai-capabilities/index.md
new file mode 100644
index 0000000..f5269bf
--- /dev/null
+++ b/docs/ar-sa/stage-1/integrating-ai-capabilities/index.md
@@ -0,0 +1,803 @@
+---
+title: 'إضافة قدرات الذكاء الاصطناعي إلى النموذج الأولي - ربط واجهات برمجة النص والصور'
+description: 'ربط قدرات الذكاء الاصطناعي الحقيقية في نموذج ويب أولي موجود: فهم المفاهيم الأساسية لواجهة برمجة التطبيقات (API)، تعلم كيفية العثور على مفتاح API والأمثلة الرسمية؛ التطبيق العملي لدمج نموذج نص DeepSeek وخدمات توليد صور متعددة (SiliconFlow Qwen-Image، Recraft، Seedream)، وإتقان طرق اختيار النماذج الشائعة.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'حوالي <strong>1 يوم</strong>'
+const relatedArticles =
+  relatedArticlesMap['ar-sa/stage-1/integrating-ai-capabilities'] ?? []
+</script>
+
+# المبتدئ 4: ضخ قدرات الذكاء الاصطناعي في النموذج الأولي
+
+## دليل الفصل
+
+<ChapterIntroduction :duration="duration" :tags="['API', 'نموذج نصي', 'نص إلى صورة', 'تكامل النموذج الأولي']" coreOutput="ربط نموذج أولي بنموذج نصي واحد + نموذج صورة واحد (اختياري)" expectedOutput="نموذج أولي للذكاء الاصطناعي قادر على استدعاء واجهة برمجة تطبيقات (API) حقيقية">
+
+في الفصول السابقة، أكملنا العملية الكاملة من <strong>إيجاد فكرة جيدة</strong> إلى <strong>صنع نموذج أولي للمنتج</strong>. لكن النموذج الأولي الحالي ليس سوى "غلاف" — النقر على الزر لن يولد محتوى فعليًا، والبيانات على الصفحة كلها ثابتة.
+
+أتذكر ما أكدنا عليه في الفصل الأول؟ <strong>"نريد صنع منتج يرغب الناس في الدفع مقابله"، وليس "نموذج أولي يبدو لائقًا فقط".</strong> القيمة الحقيقية تأتي من قدرة المنتج على <strong>حل مشاكل حقيقية</strong>، ولتحقيق ذلك، يجب أن يكون النموذج الأولي قادرًا على <strong>العمل بشكل فعلي</strong>.
+
+هذا الفصل سيجعل النموذج الأولي <strong>"ينبض بالحياة"</strong>: سنقوم بربط <strong>قدرات ذكاء اصطناعي حقيقية</strong>، بدءًا من الحصول على مفتاح API، إلى فهم الوثائق الرسمية، والسماح لبيئة تطوير الذكاء الاصطناعي (AI IDE) بمساعدتك في دمج الواجهة في الكود. سوف تتخذ من <strong>نموذج DeepSeek النصي</strong> كمثال، وتتعلم كيف تجعل تطبيقك <strong>يستدعي نموذجًا كبيرًا لتوليد المحتوى فعليًا</strong>؛ وإذا كنت مهتمًا، يمكنك <strong>اختيار دمج توليد الصور</strong> أيضًا.
+
+بعد الانتهاء من هذا الفصل، لن يكون نموذجك الأولي <strong>عرضًا ثابتًا</strong> بعد الآن، بل سيكون <strong>تطبيقًا قادرًا على استدعاء قدرات ذكاء اصطناعي حقيقية وحل مشاكل حقيقية</strong>.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'أساسيات API', description: 'فهم المفاهيم الأساسية ومعايير الأمان' },
+      { title: 'ربط النصوص', description: 'تطبيق عملي لتوليد النصوص عبر DeepSeek' },
+      { title: 'ربط الصور', description: 'فهم وتوليد الصور عبر VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 1. المفاهيم الأساسية لـ API
+
+كما ذكرنا سابقًا، هدفنا هو "إدخال قدرات الذكاء الاصطناعي"، بحيث لا يظل النموذج الأولي مجرد عرض ثابت، بل أداة قادرة على استدعاء خدمات ذكاء اصطناعي حقيقية. لتحقيق ذلك، يكمن المفتاح في فهم واستخدام API (واجهة برمجة التطبيقات).
+
+API هو مفهوم تجريدي مهم في مجال الحوسبة، ويمكننا فهمه ببساطة على أنه: **"ترسل سؤالاً بالتنسيق الذي يطلبه الطرف الآخر، ويقوم الطرف الآخر بالرد بنتيجة بنفس التنسيق".**
+
+- **ما ترسله**: يتضمن عادةً "مفتاح (API Key)" و"ما تريد توليده"
+- **ما يردونه عليك**: إذا نجح الطلب يعطيك النتيجة؛ وإذا فشل سيخبرك بالسبب (مثل "المفتاح غير صحيح" أو "الرصيد غير كافٍ" أو "المعلمات خاطئة")
+
+على وجه التحديد، تحتاج إلى إتقان العناصر الأساسية التالية:
+
+1. **API Key**: "تصريح مرورك"، وهو أيضًا "مفتاح محفظتك". إذا حصل عليه شخص آخر، يمكنه استدعاء الواجهة نيابة عنك وتكبد رسوم.
+2. **Endpoint (مسار الواجهة)**: المسار المحدد لطلب API، والذي يخبر الخادم بالوظيفة التي تريد الوصول إليها. يتكون عنوان الطلب الكامل عادةً من "الرابط الأساسي + مسار Endpoint". على سبيل المثال:
+   - توليد النص: الرابط الأساسي (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = الرابط الكامل `https://api.service.com/v1/chat/completions`
+   - توليد الصور: الرابط الأساسي (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = الرابط الكامل `https://api.service.com/v1/images/generations`
+3. **الاستدعاء/الطلب**: عملية إرسال مهمة إلى خدمة الذكاء الاصطناعي والحصول على نتيجة
+4. **محتوى الطلب**: المحتوى المحدد الذي ترسله إلى الذكاء الاصطناعي، مثل موضوع المقالة التي تريد من الذكاء الاصطناعي كتابتها، أو وصف الصورة التي تريد توليدها، إلخ.
+5. **نتيجة الاستجابة**: المحتوى الذي يعيده الذكاء الاصطناعي بعد الانتهاء من المعالجة، مثل المقالة أو الصور المولدة، إلخ.
+6. **معالجة الأخطاء**: عند حدوث مشاكل (مثل خطأ في مفتاح API، أو طلبات متكررة جدًا، إلخ)، معرفة كيفية التحقيق فيها وحلها.
+
+::: info ℹ️ ما هي API
+للحصول على شرح أعمق لواجهة برمجة التطبيقات (API)، يرجى مراجعة الملحق: [مقدمة في API](/zh-cn/appendix/4-server-and-backend/api-intro).
+
+::: warning 🔐 **ملاحظات أمان API**
+مفتاح API هو "تصريح المرور" لطلب خدمات الذكاء الاصطناعي، وهو عبارة عن سلسلة نصية سرية تُستخدم للمصادقة والفوترة.
+
+نظرًا لأن مفتاح API مرتبط مباشرة بحسابك وتكاليفك، يجب الانتباه جيدًا إلى:
+
+- **عدم مشاركته أبدًا** في محادثات جماعية، أو التقاط لقطة شاشة وتحميلها على الإنترنت، أو نشره في منتديات عامة
+- **عدم كتابته بشكل ثابت في الكود** (Hard-coding) ثم رفعه إلى مستودع Git (خاصة المستودعات العامة)
+- إذا اشتبهت في تسريب المفتاح، **قم بتغييره فورًا**
+
+سنقوم في المحتوى التالي **بلصق مفتاح API مباشرة في بيئة تطوير الذكاء الاصطناعي (AI IDE) للعمل عليه**، **لا تفعل ذلك في المشاريع الحقيقية!!**، وبما أننا نتدرب يمكننا فعل ذلك. (عندما تصبح أكثر مهارة، ستتمكن من جعل الذكاء الاصطناعي ينشئ ملف تكوين، وتضع مفتاح API في ملف التكوين فقط)
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'أساسيات API', description: 'فهم المفاهيم الأساسية ومعايير الأمان' },
+      { title: 'ربط النصوص', description: 'تطبيق عملي لتوليد النصوص عبر DeepSeek' },
+      { title: 'ربط الصور', description: 'فهم وتوليد الصور عبر VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 2. ربط واجهة برمجة توليد النصوص: DeepSeek
+
+على الرغم من أن API تتضمن هذه المفاهيم التقنية، إلا أنه في مرحلة تطوير النموذج الأولي، يمكن أن تكون العملية الفعلية بسيطة وفعالة للغاية. الفكرة الأساسية هي:
+
+> **ابحث عن المثال الرسمي، واحصل على مفتاح API، ودع بيئة تطوير الذكاء الاصطناعي (AI IDE) تساعدك في ربطه بالزر.**
+
+بعد إتقان هذه المفاهيم، ستجد أنه سواء كان ربط نموذج نصي أو نموذج صوري، فإن العملية الأساسية هي نفسها: عندما ينقر المستخدم على الزر، تقوم الواجهة الأمامية بتجميع المدخلات وإرسال طلب؛ وبعد أن تعيد الواجهة النتيجة، يتم عرضها على الصفحة. بعد ذلك، سنتحقق من ذلك من خلال العمل الفعلي.
+
+في قسم `1.2 بناء النموذج الأولي عمليًا`، قمت بالفعل ببناء نموذج أولي تفاعلي. ما سنقوم به بعد ذلك هو تحويل "الوظائف التي تبدو وكأنها ذكاء اصطناعي" في النموذج الأولي إلى قدرات قابلة للاستخدام فعليًا: **عندما ينقر المستخدم على الزر، يرسل النموذج الأولي طلبًا إلى خدمة ذكاء اصطناعي خارجية، ويعرض النص المُعاد.**
+
+::: info ℹ️ امتداد للمبادئ
+إذا كنت ترغب في معرفة المزيد عن المبادئ ذات الصلة، يرجى مراجعة الملحق: [مقدمة في النماذج اللغوية الكبيرة (LLM)](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
+::: details اعرف المزيد: ما هو DeepSeek؟
+
+**شركة هانغتشو ديب سيك لأبحاث تكنولوجيا الذكاء الاصطناعي الأساسية المحدودة** (Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.)، والمعروفة باسمها التجاري DeepSeek، هي **شركة صينية للذكاء الاصطناعي (AI) تطوّر نماذج لغوية كبيرة (LLMs)**. يقع المقر الرئيسي لـ DeepSeek في هانغتشو بمقاطعة تشجيانغ، وهي مملوكة ومموّلة من صندوق التحوط الصيني High-Flyer. تأسست DeepSeek في يوليو 2023 على يد ليانغ وين فنغ، المؤسس المشارك لـ High-Flyer، والذي يشغل أيضًا منصب الرئيس التنفيذي للشركتين. أطلقت الشركة في يناير 2025 روبوت الدردشة الذي يحمل نفس الاسم ونموذجها DeepSeek-R1.
+
+دعونا نلقي نظرة على مقارنة أداء DeepSeek مع النماذج الرائدة الأخرى في ترتيب معيار GPQA. الجدير بالذكر أن DeepSeek هو نموذج مفتوح المصدر (يمكن للجميع تنزيل النموذج من الإنترنت)، بينما النماذج الشائعة الأخرى مثل Grok و Google Gemini و ChatGPT هي نماذج مغلقة المصدر. كما نرى، اقترب DeepSeek بشكل كبير من مستوى النماذج من الدرجة الأولى.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
+
+GPQA هو اختصار لـ "Graduate-Level Google-Proof Q&A Benchmark"، وهو معيار بمستوى الدراسات العليا مخصص لمهام الإجابة على الأسئلة العلمية. فيما يلي مقدمة مفصلة.
+
+يحتوي GPQA على 448 سؤالًا من أسئلة الاختيار من متعدد، تغطي مجالات فرعية في علم الأحياء والفيزياء والكيمياء، مثل ميكانيكا الكم، والكيمياء العضوية، وعلم الأحياء الجزيئي، وغيرها. تمت كتابة هذه الأسئلة بواسطة 61 خبيرًا يحملون درجة الدكتوراه أو يدرسون للحصول عليها، وخضعت لعملية تحقق صارمة.
+:::
+
+اتبع هذه الخطوات الثلاث لتحقيق تكامل سريع لواجهة برمجة التطبيقات (API) الخاصة بتوليد النصوص باستخدام النماذج الكبيرة:
+
+1. **إنشاء API Key على منصة DeepSeek**
+2. **العثور على مثال لتوليد النصوص في وثائق DeepSeek** (عادةً ما يكون هناك كود جاهز يمكن نسخه مباشرة)
+3. **افتح AI IDE، والصق API Key + المثال الرسمي بداخله**، وأخبر الذكاء الاصطناعي بالوظيفة التي تريد تنفيذها:
+   > ساعدني في ربط واجهة برمجة التطبيقات (API) الخاصة بهذا النموذج الكبير، لدعم مهمة توليد النصوص لهذا التطبيق
+
+بعد ذلك سنقوم بعرض توضيحي، يمكنك متابعة الخطوات وتجربة العملية الكاملة. أولاً، قم بتسجيل حساب في [DeepSeek](https://platform.deepseek.com/usage) وإنشاء API Key، وقم بشحن رصيد صغير للتحقق.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
+
+انقر على "API KEYS" وابحث عن "create new API key" في أسفل الشاشة. ستحصل في النهاية على مفتاح API يشبه sk-8573341c39fc44315aadc071c53rh7d2.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
+
+بمجرد حصولك على المفتاح، ستكون لديك الصلاحية لاستدعاء النموذج.
+
+في هذه المرحلة، يمكنك قراءة وثائق [API](https://api-docs.deepseek.com/) مباشرةً، والتي توفر عادةً أمثلة للاستدعاء باستخدام curl أو Python.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
+
+بعد العثور على المثال، يمكنك نسخ جميع المحتويات من الوثائق بالإضافة إلى المفتاح إلى مربع حوار AI IDE، واطلب منه مساعدتك في دمج النموذج اللغوي الكبير في النموذج الأولي الذي قمت بتطويره مسبقًا.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
+
+استخدم الرسالة المرجعية التالية:
+
+```
+ارجع إلى طريقة الاستدعاء هذه وساعدني في دعم وظيفة توليد النصوص التسويقية، يمكنها توليد نصوص تسويقية لمنصة Douyin بناءً على معلومات المنتج عند النقر، بأنماط متعددة.
+مفتاح API：sk-8573341c39aefa1efe
+مرجع طلب API：
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+بعد فترة من توليد الأكواد بالذكاء الاصطناعي، يمكننا بسهولة الحصول على زر توليد النصوص المقابل لاختباره. إذا لم تتمكن من العثور على المدخل، يمكنك أن تطلب من AI IDE أن يخبرك من أي صفحة يمكنك الوصول إلى هذه الصفحة. وإذا لم تتمكن من العثور عليه حقًا، يمكنك أن تطلب من AI IDE إعادة البناء والتحسين مباشرة بناءً على أفكارك، للحصول على نتيجة توليد النصوص النهائية.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
+
+بالطبع، قد تتساءل هنا، كيف أعرف أنه تم استدعاء النموذج الكبير فعلًا بدلاً من مجرد استخدام ردود مبرمجة مسبقًا؟ يمكنك إدخال نصوص مخصصة، والسماح للنموذج الكبير بتوليد النصوص المقابلة بناءً على التحليل المخصص الذي تحدده فورًا.
+
+إذا وجدت أن الردود مختلفة في كل مرة ومنطقية، يمكنك أن تطمئن إلى أن استدعاء API قد تم بشكل طبيعي لتوليد النصوص. يمكنك أيضًا التحقق من نجاح الاستدعاء في [منصة إدارة استخدام API](https://platform.deepseek.com/usage) (على الرغم من أنه قد تحتاج إلى الانتظار بضع دقائق لتظهر).
+
+## المزيد من خيارات نماذج توليد النصوص
+
+بالإضافة إلى DeepSeek، يمكنك أيضًا تجربة نماذج لغوية كبيرة أخرى. نظرًا لأن معظم النماذج توفر **واجهة متوافقة مع OpenAI**، فإن التبديل بينها سهل للغاية — كل ما عليك فعله هو تغيير API Key وعنوان URL الأساسي واسم النموذج.
+
+### تكامل MiniMax
+
+::: details اعرف المزيد: ما هو MiniMax؟
+
+**MiniMax** هي شركة صينية للذكاء الاصطناعي، تكرس جهودها للبحث وتطوير تقنيات الذكاء الاصطناعي العام. أطلقت MiniMax سلسلة النموذج اللغوي الكبير MiniMax-M2.7 من تطويرها الخاص، والتي حققت أداءً ممتازًا في العديد من اختبارات المعايير، وتتميز بنسبة أداء إلى تكلفة عالية جدًا.
+
+**الخصائص الرئيسية لسلسلة MiniMax-M2.7:**
+
+- **سياق طويل جدًا**: يدعم نافذة سياق تصل إلى 204,800 رمز (tokens)، مما يجعله مناسبًا لمعالجة المستندات الطويلة والمحادثات متعددة الأدوار
+- **نسبة أداء إلى تكلفة عالية**: بسعر تنافسي للغاية
+- **واجهة متوافقة مع OpenAI**: يمكن استخدام OpenAI SDK مباشرة للاستدعاء، دون الحاجة لتعلم تنسيق API جديد
+- **نموذجان متاحان**:
+  - `MiniMax-M2.7`: النموذج الرائد، مناسب للمهام المعقدة
+  - `MiniMax-M2.7-highspeed`: الإصدار عالي السرعة، يحافظ على نفس الأداء ولكنه أسرع
+:::
+
+طريقة التوصيل هي نفسها الخاصة بـ DeepSeek، وتتطلب ثلاث خطوات فقط:
+
+1. انتقل إلى [منصة MiniMax المفتوحة](https://platform.minimax.io/) لتسجيل حساب وإنشاء API Key
+2. ابحث عن مثال الاستدعاء في وثائق MiniMax
+3. انسخ API Key + المثال والصقهما في AI IDE
+
+نظرًا لأن MiniMax توفر واجهة متوافقة مع OpenAI، يمكنك ببساطة نسخ مثال curl أدناه مع API Key الخاص بك، وإرسالهما إلى AI IDE لإجراء التكامل:
+
+```bash
+curl https://api.minimax.io/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${MINIMAX_API_KEY}" \
+  -d '{
+        "model": "MiniMax-M2.7",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+::: tip ✅ نصيحة
+تنسيق واجهة برمجة تطبيقات MiniMax متطابق تقريبًا مع DeepSeek (كلاهما يستخدم تنسيق OpenAI المتوافق)، لذلك إذا كنت قد دمجت DeepSeek بنجاح بالفعل، فإن التبديل إلى MiniMax يتطلب تعديل ثلاثة أشياء فقط:
+1. **عنوان URL الأساسي**: غيّره إلى `https://api.minimax.io/v1`
+2. **مفتاح API**: استخدم مفتاح API الخاص بـ MiniMax
+3. **اسم النموذج**: غيّره إلى `MiniMax-M2.7` أو `MiniMax-M2.7-highspeed`
+
+لمزيد من المعلومات، يرجى الرجوع إلى [وثائق واجهة MiniMax المتوافقة مع OpenAI](https://platform.minimax.io/docs/api-reference/text-openai-api).
+:::
+
+# 3. دمج واجهة برمجة تطبيقات تحويل الصور إلى نصوص: Qwen3 VL
+
+::: info ℹ️ امتداد للمبدأ
+إذا كنت ترغب في معرفة المزيد عن المبادئ ذات الصلة، يرجى الاطلاع على الملحق: [مقدمة إلى نماذج اللغة المرئية (VLM)](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
+
+::: details معرفة المزيد: ما هو Qwen3 VL؟
+
+**Qwen3 VL** هو أحدث إصدار من سلسلة نماذج اللغة المرئية متعددة الوسائط التي أطلقتها فريق Qwen التابع لشركة Alibaba Cloud. يشير اختصار VL إلى "Vision-Language"، أي نموذج اللغة المرئية. يمكنه فهم محتوى الصور، وإنشاء أوصاف نصية بناءً على الصور، والإجابة على أسئلة حول الصور، واستخراج المعلومات من الصور، وغير ذلك.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
+
+**تشمل القدرات الرئيسية لـ Qwen3 VL:**
+
+- **فهم الصور**: القدرة على التعرف على الأشياء والمشاهد والأشخاص والنصوص وغيرها من المحتويات في الصور
+- **الإجابة المرئية على الأسئلة**: الإجابة بدقة على الأسئلة المتعلقة بالصور بناءً على استفسارات المستخدم
+- **وصف الصور**: إنشاء أوصاف نصية مفصلة أو موجزة للصور
+- **فهم الصور المتعددة**: دعم معالجة صور متعددة في نفس الوقت وإجراء تحليل مقارن
+- **استخراج النصوص**: استخراج المحتوى النصي من الصور (قدرة OCR)
+
+**لماذا تختار Qwen3 VL؟**
+
+مقارنة بالجيل السابق من النماذج، حقق Qwen3 VL تحسنًا كبيرًا في دقة فهم الصور، ويدعم مهام تحليل الصور الأطول والأكثر تعقيدًا. كما يتميز بأداء ممتاز في فهم اللغة الصينية، وتكلفة استدعاء واجهة برمجة التطبيقات (API) منخفضة نسبيًا، مما يمنحه نسبة قيمة عالية مقابل التكلفة. بالإضافة إلى ذلك، فإن نافذة السياق الخاصة به أكبر، مما يتيح له معالجة مهام الاستدلال المرئي الأكثر تعقيدًا.
+
+**سيناريوهات التطبيق النموذجية:**
+
+- التجارة الإلكترونية: إنشاء عناوين وأوصاف ونقاط بيع تلقائيًا لصور المنتجات
+- إنشاء المحتوى: إنشاء نصوص أو اقتراحات للصور المرفقة تلقائيًا بناءً على صور المواد
+- المكاتب: استخراج محتوى الصور، والتعرف التلقائي على التقارير
+- التعليم: التحليل التلقائي لأسئلة الصور، واستخراج نقاط المعرفة
+
+:::
+
+في الأجزاء السابقة، أوضحنا كيفية دمج واجهة برمجة تطبيقات إنشاء النصوص، ولكن بالنسبة لسيناريوهات التطبيق المذكورة سابقًا، سنلاحظ مشكلة واحدة: نحن نقوم برفع صورة، وإذا استخدمنا النماذج اللغوية الكبيرة (LLM) فقط، فلن تتمكن من فهم محتوى الصورة بشكل جيد، ومن المرجح أن تختلف النتائج المُنشأة.
+
+نأمل أن يكون هناك نموذج يمكنه مساعدتنا في تحويل الصورة إلى وصف نصي، وهذا يتطلب استخدام نماذج اللغة المرئية (VLM). في هذه الحالة، سنستخدم نموذج اللغة المرئية لإنشاء أوصاف لنقاط بيع المنتجات، مما يعزز تجربة المستخدم.
+
+للراحة، سنستخدم واجهة برمجة التطبيقات (API) التي توفرها [منصة SiliconFlow السحابية](https://cloud.siliconflow.cn/me) لدمج واجهة برمجة تطبيقات تحويل الصور إلى نصوص.
+
+::: details معرفة المزيد: ما هي Siliconflow
+**SiliconFlow** هي منصة تجميع نماذج ذكاء اصطناعي معروفة محليًا، وتوفر خدمات واجهة برمجة تطبيقات (API) لمجموعة متنوعة من نماذج اللغة الكبيرة ونماذج اللغة المرئية السائدة.
+
+**ميزات المنصة:**
+
+- **دعم نماذج متعددة**: دمج مجموعة متنوعة من نماذج الذكاء الاصطناعي السائدة، بما في ذلك نماذج مفتوحة المصدر مثل سلسلة DeepSeek و Qwen و Llama وغيرها
+- **التحسين التقني**: التحسين للاستدلال للنماذج مفتوحة المصدر، وتوفير خدمات API بزمن استجابة منخفض وتزامن عالٍ
+- **توافق الواجهة**: توفير واجهات API متوافقة مع تنسيق OpenAI، مما يسهل التكامل مع التطبيقات الحالية
+- **الدفع عند الطلب**: دعم الاستخدام بطريقة الدفع بناءً على حجم الاستدعاءات
+
+تعتبر SiliconFlow ناضجة نسبيًا في خدمات استدلال النماذج الكبيرة مفتوحة المصدر، وهي واحدة من الخيارات الشائعة لاستخدام نماذج الذكاء الاصطناعي المحلية مفتوحة المصدر.
+:::
+
+بالدخول إلى الصفحة الرئيسية لمنصة SiliconFlow، يمكننا رؤية العديد من النماذج للاختيار من بينها. ابحث عن الفلتر في الزاوية اليسرى العليا، وانقر لتوسيع الفلتر، ثم حدد علامة التبويب "الرؤية" (Vision)، ويمكننا رؤية العديد من نماذج تحويل الصور إلى نصوص، مثل Zhipu GLM-4.6V أو Qwen3-VL.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
+
+يمكننا اختيار أي نموذج لاختباره، وهنا نأخذ `Qwen/Qwen3-VL-8B-Instruct` كمثال.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
+
+ادخل إلى [منصة SiliconFlow](https://cloud.siliconflow.cn/me/account/ak)، وفي قسم مفاتيح API، انقر على "إنشاء مفتاح API جديد" لإنشاء مفتاح API (API Key) جديد.
+
+يمكنك استخدام الكود أدناه مباشرة ككود مرجعي، وإرساله مع مفتاح API الذي أنشأته إلى بيئة تطوير الذكاء الاصطناعي (AI IDE) لإجراء تكامل الوظائف.
+
+::: details كود مرجعي لتحويل الصور إلى نصوص
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+:::
+
+في هذا السيناريو، نحاول مباشرةً جعل AI IDE يساعدنا في تنفيذ وظيفة توليد نصوص نقاط البيع للتجارة الإلكترونية والكلمات المفتاحية تلقائيًا من الصور المرفوعة، كما هو موضح أدناه:
+
+```
+بناءً على واجهة برمجة تطبيقات تحويل الصورة إلى نص أدناه، ساعدنا في تنفيذ وظيفة توليد نصوص نقاط البيع للتجارة الإلكترونية والكلمات المفتاحية تلقائيًا من الصور المرفوعة
+
+<تم حذف الكود هنا، يجب عليك لصق المفتاح والكود المرجعي بنفسك>
+```
+
+أخيرًا نحصل على نتيجة التوليد:
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'أساسيات API', description: 'فهم المفاهيم الأساسية ومعايير الأمان' },
+      { title: 'ربط النص', description: 'تطبيق عملي لتوليد النصوص من DeepSeek' },
+      { title: 'ربط الصور', description: 'فهم وتوليد الصور باستخدام VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 4. ربط واجهة برمجة تطبيقات توليد الصور: Seedream
+
+في الأجزاء السابقة تعاملنا بشكل أساسي مع المهام المتعلقة بالنص، بعد ذلك سنحاول ربط وظيفة توليد الصور، التي تدعم توليد الصور من الأوصاف النصية، أو تعديل الصور.
+
+::: info ℹ️ امتداد للمبدأ
+إذا كنت ترغب في معرفة المزيد عن المحتوى المتعلق بالمبادئ، يرجى الاطلاع على الملحق: [مقدمة في توليد الصور](/zh-cn/appendix/8-artificial-intelligence/image-generation).
+
+::: details اعرف المزيد: ما هو [Seedream](https://seed.bytedance.com/en/seedream4_5)؟
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png)
+
+> ربما تعرف بالفعل Nano Banana (الذي طورته Google)، لكن من الأفضل ألا تفوت Seedream. Seedream 4.5 هو نموذج إنشاء صور من الجيل الجديد الذي طورته ByteDance. إنه يدمج قدرات توليد الصور وتحريرها في بنية موحدة. يتيح له ذلك التعامل بمرونة مع المهام متعددة الوسائط المعقدة، مثل التوليد القائم على المعرفة، والاستدلال المعقد، واتساق المرجع. بالإضافة إلى ذلك، فإن سرعة الاستدلال لديه أسرع بكثير من الجيل السابق، ويمكنه إنشاء صور عالية الدقة مذهلة بدقة تصل إلى 4K.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png)
+
+**القدرات الرئيسية:**
+
+- **توليد الصور من النص**: توليد صور من أوصاف نصية، ودعم أنماط متعددة (واقعي، كرتوني، رسم حبر، سايبربانك، إلخ)
+- **نقل الأسلوب**: تحويل صورة إلى أسلوب فني محدد
+- **متغيرات الصور**: إنشاء صور جديدة بأسلوب مشابه بناءً على صورة مرجعية
+- **تحسين الدقة**: تعزيز وضوح الصورة وتفاصيلها
+- **تحرير الصور**: تحرير وتعديل الصور الحالية من خلال تعليمات اللغة الطبيعية
+
+**لماذا تختار Seedream؟**
+
+- **استقرار الشبكة المحلية**: سرعة وصول محلية عالية، وزمن استجابة منخفض
+- **نتائج ممتازة**: أداء مستقر وموثوق في سيناريوهات التجارة الإلكترونية والمواد
+- **تحسين اللغة الصينية**: فهم أكثر دقة للكلمات المفتاحية الصينية، مناسب للمستخدمين المحليين
+- **سرعة عالية**: كفاءة توليد عالية، وقت استجابة قصير
+- **جودة مستقرة**: إنشاء صور عالية الدقة بدقة تصل إلى 4K
+
+**سيناريوهات التطبيق النموذجية:**
+
+- التجارة الإلكترونية: إنشاء الصور الرئيسية، وصور صفحات التفاصيل، وملصقات الترويج
+- وسائل التواصل الاجتماعي: إنشاء الصور الرمزية، والرموز التعبيرية، والصور المصاحبة
+- التصميم: إنشاء صور المفاهيم، وصور المواد، وصور الخلفيات بسرعة
+- التسويق: إنشاء صور الإعلانات، وبانرات الأنشطة، وملصقات الأعياد
+
+**التكامل مع Qwen3 VL:**
+
+يمكن استخدام واجهتي برمجة التطبيقات هاتين بشكل تسلسلي: استخدم أولاً Qwen3 VL لتحليل الصورة المرجعية وفهم محتوى الصورة؛ ثم استخدم Seedream لإنشاء صور جديدة بناءً على محتوى الكلمات المفتاحية للصورة المرجعية المحللة.
+:::
+
+ربما تكون قد رأيت الكثير من "ملصقات AI / صور AI الرئيسية / صور شخصيات AI" على Douyin أو Bilibili أو YouTube، والتي تستخدم في جوهرها التقنية المقدمة في هذا القسم. ما تحتاج إلى القيام به بسيط للغاية: قم بتنظيم إدخال المستخدم في جملة واحدة، واطلب واجهة برمجة تطبيقات الصور، ثم اعرض الصورة المُعادة. النموذج المستخدم في هذا الوقت يسمى نموذج توليد الصور / تحرير الصور.
+
+سنوضح خطوة بخطوة كيفية دمج Seedream API في مشروعك (بمساعدة AI IDE).
+
+بعد [زيارة الصفحة الرئيسية](https://www.volcengine.com/experience/ark?launch=seedream)، انقر لتسجيل الدخول.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png)
+
+بعد تسجيل الدخول، ابحث عن خيار الشحن في الزاوية العلوية اليمنى من الصفحة.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png)
+
+يتطلب الشحن مصادقة الاسم الحقيقي.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png)
+
+بعد نجاح المصادقة، يمكنك [شحن 1 يوان للاختبار](https://console.volcengine.com/finance/fund/recharge).
+
+ارجع إلى [الواجهة الأولية](https://www.volcengine.com/experience/ark?launch=seedream) وانقر على الوصول عبر API.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png)
+
+أولاً، قم بإنشاء مفتاح API، ثم انقر لتحديد الخيار.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png)
+
+سيأخذك هذا إلى الخطوة الثانية. هنا، تحتاج إلى التأكد من أن الخدمة التي تستدعيها هي Seedream 4.5، ونسخ مثال الاستدعاء المقدم. (لقطة الشاشة هنا التُقطت في وقت مبكر، لذا لا يزال إصدار النموذج 4.0)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png)
+
+بعد تجهيز مفتاح API ومثال الاستدعاء، يمكنك لصقهما مباشرة في AI IDE، والسماح له بإنشاء عرض تفاعلي للواجهة الأمامية أو دمج القدرة في النموذج الأولي الحالي. لاحظ أنه في الصورة يمكنك اختيار ما إذا كان توليد صورة من نص أو توليد صورة واحدة من صور متعددة، تحتاج إلى اختيار الكود المرجعي بناءً على المتطلبات الحالية.
+
+::: warning ⚠️ تلميح مهم
+المثال الافتراضي هنا معقد نسبيًا. تذكر تعطيل **"إضافة علامة مائية"** و**"الاستجابة المتدفقة"**، لضمان عدم إنشاء علامة مائية وعدم فشل الطلب.
+:::
+
+نظرًا لأننا سنستخدم وضع إنشاء الصور المرجعية لاحقًا، فإننا نذهب أولاً إلى وظيفة إنشاء صورة واحدة من صور متعددة. يتم نسخ الكود المرجعي على النحو التالي:
+
+```
+curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer xxxxxxx" \
+  -d '{
+    "model": "doubao-seedream-4-5-251128",
+    "prompt": "غيّر ملابس الصورة الأولى لتصبح مثل ملابس الصورة الثانية",
+    "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
+    "sequential_image_generation": "disabled",
+    "response_format": "url",
+    "size": "2K",
+    "stream": false,
+    "watermark": true
+}'
+```
+
+بعد الحصول على كود مرجعي للصور، نجعل AI IDE يدعم وظائف مهام الصور الشائعة في التجارة الإلكترونية:
+
+```
+يرجى بناءً على واجهة برمجة التطبيقات أدناه، مساعدتي في تنفيذ الوظائف الشائعة لأعمال التجارة الإلكترونية في هذا المشروع (مثل إنشاء الملصقات، وإنشاء الصورة الرئيسية لتجارة Douyin الإلكترونية، إلخ)
+
+<الصق مفتاح API وكود تحرير الصور هنا>
+```
+
+تأثير التنفيذ كالتالي:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png)
+من الجدير بالذكر أنه نظرًا لأن إنشاء الصور قد يواجه غالبًا بعض المشاكل الغريبة، يُنصح بأن تسمح لـ AI IDE بعرض رسائل الخطأ الكاملة لتسهيل النسخ واللصق لإجراء التعديلات (وإلا فقد يظهر فشل الإنشاء بشكل متكرر دون معرفة السبب)، على سبيل المثال يمكنك أن تقول:
+
+```
+لا تعرض فقط فشل إنشاء الصورة، بل اعرض السبب الكامل للفشل في كل مرة، مثل عدم تطابق الصور، خطأ في الطلب، انتهاء المهلة، إلخ!
+```
+
+في بعض الأحيان لا يتم تطبيق التحديثات بعد التعديل على صفحة الويب. إذا لاحظت أن صفحة الويب تستمر في إظهار الأخطاء بعد التعديل (بشكل متكرر)، يمكنك أيضًا محاولة القول مباشرةً لـ AI IDE: يرجى إعادة تشغيل هذا المشروع.
+
+في أعمال التجارة الإلكترونية، قد نرغب في جعل الملابس التي يحملها المستخدم يتم ارتداؤها تلقائيًا على شخصية، أو إنشاء صور بيع وجذابة للمنتجات أو ملصقات تلقائيًا. هنا المطالبة التي نحاول استخدامها هي جعلها تنشئ ملصقًا للتجارة الإلكترونية:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png)
+
+يمكنك، بناءً على سيناريو العمل الذي تتخيله، استخدام واجهة برمجة تطبيقات تحويل النص إلى صورة أو تحويل الصورة إلى صورة لتحقيق وظائف مختلفة.
+
+## المزيد من الخيارات المختلفة لخدمات الصور
+
+فيما يلي خيارات أخرى. يُنصح بأن تقوم بتشغيل نتائج إنشاء الصور من Qwen أولاً، ثم استخدام الخدمات التالية كبديل بناءً على التأثير والتكلفة (اختر بناءً على تجربة الاستخدام الفعلية).
+
+### تكامل Recraft
+
+إذا كان نموذجك الأولي يميل أكثر إلى "إنتاج التصميم" (مثل إنشاء رسوم توضيحية بأسلوب العلامة التجارية، ملصقات تسويقية، مواد بأسلوب متجهي)، فإن Recraft غالبًا سيكون أكثر ملاءمة. طريقة التكامل هي نفسها تمامًا كما في القسم السابق: **الحصول على المفتاح + العثور على المثال الرسمي + جعل AI IDE يطبق المثال على الزر/الصفحة الخاصة بك**.
+
+::: details معرفة المزيد: ما هو Recraft؟
+
+> Recraft هي أداة AI موجهة للمصممين والرسامين والمسوقين - تأسست في عام 2022 في الولايات المتحدة، ومقرها في لندن. تساعد في إنشاء/تكرار المرئيات (الصور، الفن المتجهي، الرسومات ثلاثية الأبعاد)، مع ميزات مثل مخرجات عالية الجودة (أي حجم/طول للنص)، وتحديد دقيق للعناصر، وتصميم متسق مع العلامة التجارية. موثوق بها من قبل أكثر من 3 ملايين مستخدم في 200 دولة (بما في ذلك Ogilvy و Netflix)، وتم إنشاء أكثر من 350 مليون صورة، ويهدف فريقها إلى جعلها أداة لا غنى عنها للمصممين، مما يضمن قدرة المبدعين على التحكم في سير عملهم المدعوم بالـ AI.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png)
+
+أولاً، لا يزال يتعين علينا العثور على [مدخل API](https://www.recraft.ai/profile/api) للحصول على مفتاح API.
+
+نظرًا لعدم توفير رصيد مجاني هنا، نحتاج إلى شحن 1,000 نقطة بأنفسنا. يدعم هذا الموقع Alipay و WeChat Pay، لذلك من السهل الحصول على 1,000 نقطة (ملاحظة: لا تشحن أكثر من الضروري).
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png)
+
+بعد ذلك، لا نزال نتبع نفس الطريقة: الذهاب إلى الوثائق الرسمية للعثور على مثال الطلب المقابل:
+
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
+
+:::
+
+### تكامل Qwen Image / Qwen Image Edit
+
+إ كنت ترغب في استخدام طريقة أبسط للاتصال بخدمة إنشاء الصور، يمكنك التفكير في Qwen Image (Tongyi Wanxiang). يبقى النهج كما هو: تعامله كـ "واجهة برمجة تطبيقات لإنشاء الصور"، وقم بتوصيله بزر النموذج الأولي الخاص بك.
+
+::: details معرفة المزيد: ما هو Qwen Image / Qwen Image Edit؟
+
+**Qwen Image** (المعروف أيضًا باسم Tongyi Wanxiang) هي سلسلة نماذج إنشاء الصور التي أطلقتها فريق Tongyi التابع لـ Alibaba Cloud، وتتضمن بشكل أساسي نموذجين كبيرين:
+
+**1. Qwen Image —— نموذج تحويل النص إلى صورة (Text-to-Image)**
+
+ينشئ صورًا جديدة بناءً على وصف نصي. تقوم بإدخال مطالبة، ويفهم النموذج نيتك ويقوم بإنشاء صورة تتطابق مع الوصف.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png)
+
+**القدرات الرئيسية:**
+
+- **تحويل النص إلى صورة**: إنشاء صور من وصف نصي، ودعم أنماط متعددة (واقعي، كرتوني، رسم بالحبر، سايبربانك، إلخ)
+- **نقل الأسلوب**: تحويل صورة إلى أسلوب فني محدد
+- **متغيرات الصورة**: إنشاء صور جديدة بأسلوب مشابه بناءً على صورة مرجعية
+- **تحسين الدقة**: تعزيز وضوح الصورة وتفاصيلها
+
+**2. Qwen Image Edit —— نموذج تحويل الصورة إلى صورة (Image-to-Image)**
+
+تحرير وتعديل الصور الحالية. من خلال تعليمات اللغة الطبيعية، دع النموذج يفهم نية التعديل الخاصة بك ويقوم بإنشاء النتيجة.
+
+**القدرات الرئيسية:**
+
+- **الاستبدال المحلي**: استبدال كائن أو شخص معين في الصورة (مثل "تغيير الخلفية إلى شاطئ البحر")
+- **إزالة العناصر**: إزالة العناصر غير المرغوب فيها من الصورة
+- **تحويل الأسلوب**: إضافة فلاتر أو تأثيرات فنية إلى الصورة
+- **توسيع الصورة**: توسيع حدود الصورة لإنشاء محتوى جديد
+- **تحرير ذكي للصور**: تجميل تلقائي، ضبط الإضاءة والظلال، إصلاح العيوب
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png)
+
+**لماذا تختار سلسلة Qwen Image؟**
+
+- **مُحسّن للصينية**: فهم أكثر دقة للمطالبات الصينية، ومناسب للمستخدمين المحليين
+- **تكلفة منخفضة**: مقارنة بالمنتجات التنافسية الدولية، السعر أكثر بأسعار معقولة
+- **سرعة عالية**: كفاءة إنشاء عالية، وقت استجابة قصير
+- **جودة مستقرة**: أداء مستقر وموثوق في سيناريوهات التجارة الإلكترونية والمواد
+- **أنماط متنوعة**: دعم مجموعة متنوعة من الأنماط الفنية والتأثيرات الإبداعية
+
+**سيناريوهات التطبيق النموذجية:**
+
+- التجارة الإلكترونية: إنشاء الصور الرئيسية، صور صفحات التفاصيل، ملصقات ترويجية
+- وسائل التواصل الاجتماعي: إنشاء صور الملف الشخصي، الرموز التعبيرية، الصور المصاحبة
+- التصميم: إنشاء سريع للرسومات المفاهيمية، صور المواد، صور الخلفية
+- التسويق: إعلانات، لافتات الأنشطة، ملصقات الأعياد
+  :::
+
+تحقق من الموقع الرسمي لـ [SiliconFlow](https://siliconflow.cn/). يوجد قسم "Playground" على الجانب الأيسر، حيث يمكنك تجربة نماذج مختلفة دون إجراء استدعاءات API. يوجد زر "Filters" في أعلى صفحة الويب؛ انقر فوقه لتصفية قائمة النماذج الموجودة على اليمين.
+
+إذا اخترت "Image"، فسترى فقط جميع نماذج تحويل النص إلى صورة المدعومة حاليًا. في هذه الحالة، سنستخدم Qwen/Qwen-Image.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png)
+
+بعد إعداد كل شيء، نحتاج إلى الرجوع إلى وثائق واجهة برمجة تطبيقات إنشاء الصور المقابلة. يمكنك العثور على أي قسم يحمل علامة "API Reference" في صفحة الوثائق الرسمية. انقر فوقه، ثم انتقل إلى [قسم API لإنشاء الصور](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) وابحث عن مثال الطلب ذي الصلة.
+
+يمكنك إرسال مثال الطلب التالي مع API KEY إلى AI IDE، لتحقيق وظيفة إنشاء الصور.
+
+```bash
+curl --request POST \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
+  --header 'Content-Type: application/json' \
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
+  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
+}
+'
+```
+
+يمكن استخدام النموذج Qwen/Qwen-Image أو Qwen/Qwen-Image-Edit-2509 هنا.
+
+::: details كود مرجعي لتحرير الصور
+
+انسخ الكود التالي والمفتاح (key)، وأرسلهما معًا إلى AI IDE:
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+
+prompt: str = "اجعل السماء في وقت المساء، مع قمر ونجوم، بأسلوب حالم"
+negative_prompt: str = "ضبابي، جودة منخفضة، مشوّه"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+
+:::
+
+# الملحق: كيفية العثور على نموذج AI "الأقوى حالياً"
+
+تتطور النماذج النصية (والتي تُعرف غالباً بـ "النماذج اللغوية الكبيرة" أو LLMs) بسرعة كبيرة، ونحتاج دائماً إلى التأكد من أننا نستخدم أحد النماذج ذات الأداء الأفضل. من خلال الموقعين التاليين، يمكنك بسهولة رؤية "النماذج الشائعة الاستخدام حالياً والتي تحظى بتقييمات أفضل".
+
+بشكل عام، يمكن فهم هذه المواقع على أنها **"ساحة منافسة للنماذج"**: حيث يتم وضع مخرجات نموذجين معاً، وتصوت للنموذج الذي تفضله. النموذج الحاصل على أصوات أعلى، يعني عادةً أن المزيد من الناس يرون أنه "أفضل في الاستخدام".
+
+بالإضافة إلى ذلك، قد تلاحظ أحياناً في هذه الساحات نماذج مجهولة وغامضة ("Unknown Model"). هذا يعني عادةً: أن شخصاً ما قام بإدخال "نموذج اختبار داخلي" سراً لإجراء اختبار أعمى، وقد تتيح لك الفرصة لتجربة قدرات أقوى مسبقاً.
+
+## LMArena
+
+الموقع: <https://lmarena.ai/>
+
+يناسب LMArena بشكل أفضل لتحديد "الإجابة التي يفضلها معظم الناس لنموذج معين". كلما زادت الأصوات وارتفعت النتيجة، يعني ذلك عادةً أنه أكثر استقراراً في سيناريوهات الاستخدام الفعلية.
+
+طريقة استخدام بسيطة هي:
+
+1. النظر مباشرة إلى لوحة المتصدرين (Leaderboard)
+2. اختيار التوجه الذي ترغب فيه أولاً (على سبيل المثال: محادثة عامة / برمجة / رؤية حاسوبية)
+3. اختيار النموذج المتاح لك من بين أفضل 3 (يمكنك الوصول إليه، وسعره مقبول، و زمن الاستجابة مقبول)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png)
+
+## Artificial Analysis
+
+الموقع: <https://artificialanalysis.ai/>
+
+يناسب Artificial Analysis بشكل أفضل لمقارنة "الأداء / السعر / السرعة" في جدول واحد، ويمكنك اعتباره كجدول مواصفات لاختيار النموذج.
+
+طرق الاستخدام الشائعة هي:
+
+1. العثور على فئة النموذج التي تهتم بها (نص / توليد صور، إلخ)
+2. النظر إلى مؤشرات الجودة (Quality) + السعر (Price) + زمن الاستجابة/الإنتاجية (Latency/Throughput)
+3. اختيار نموذج يمثل "أفضل قيمة شاملة" يناسب منتجك
+
+::: tip ✅ نصيحة
+لا تتجادل بناءً على الشعور حول "أيهما أقوى". النهج الأكثر موثوقية هو: اختبار 2~3 نماذج في نفس الوقت باستخدام نفس مجموعة المدخلات، ثم اتخاذ القرار بناءً على لوحات المتصدرين والأسعار.
+:::
+
+## الخلاصة
+
+عند التكامل مع مختلف خدمات AI، لا داعي لتخيل أن الـ API معقد للغاية. من خلال إمساك المفاهيم الأساسية التالية، يمكنك التعامل مع معظم السيناريوهات بشكل أساسي:
+
+**جوهر الـ API هو جسر اتصال**. ما يفعله بسيط جداً: إرسال طلبك، ثم إعادة استجابة النموذج إليك. لا تحتاج إلى الاهتمام بما يحدث في الخلفية، كل ما عليك فعله هو تنظيم تنسيق الطلب بشكل صحيح.
+
+**الـ SDK هو تغليف للـ API**. إذا كان الـ API هو الواجهة الخام (raw)، فإن الـ SDK هو مجموعة أدوات جاهزة - حيث يقوم بإنجاز التفاصيل المملة مثل توقيع الطلبات، ومعالجة الأخطاء، والتحقق من المعلمات نيابةً عنك. في التطوير اليومي، يُفضل اختيار الـ SDK بدلاً من استدعاء الـ API مباشرة، مما يوفر عليك الكثير من المتاعب.
+
+**عند قراءة الوثائق، يكفي التركيز على ثلاثة أشياء فقط**: عنوان الخدمة (endpoint)، وبيانات الاعتماد (API key)، وكيفية ملء معلمات الاستدعاء. بمجرد توضيح هذه النقاط الثلاث، فإن نجاح الاستدعاء هو مسألة وقت فقط.
+
+باقي العمل، ستقوم بيئة التطوير المتكاملة (IDE) وأدوات التطوير الحديثة بمساعدتك في إنجازه. ركز على منطق عملك، واترك أمور الاستدعاءات الأساسية لهذه الـ SDKs وسلاسل الأدوات الناضجة.
+
+# 5. 📚 الواجب: تكامل قدرتك الأولى في AI
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 مهمة التحدي: تكامل قدرات AI في مساحة عملك</div>
+  </template>
+
+  <p>
+    بالرجوع إلى الـ prompts ومحتوى هذا الدرس، قم بإكمال دورة كاملة مغلقة:
+  </p>
+
+  <ul>
+    <li>
+      <strong>ممارسة الدورة الكاملة المغلقة</strong>
+      <ul>
+        <li>اختر واتصل بخدمة AI (LLM / نص لصورة / صورة لصورة) → قم بتنفيذ التفاعل بين الواجهة الأمامية والخلفية → قم بدمجها في النموذج الأولي الخاص بك</li>
+      </ul>
+    </li>
+    <li>
+      <strong>مشاركة النتائج</strong>
+      <ul>
+        <li>التقط لقطة شاشة لصفحة وظيفتك وشاركها مع الجميع</li>
+      </ul>
+    </li>
+    <li>
+      <strong>سؤال تفكيري</strong>
+      <ul>
+        <li>اترك مساحة للدرس التالي "ممارسة مشروع كامل"، وفكر مسبقاً: كيف تنوي دمج هذه قدرات AI معاً لصنع وظيفة ممتعة؟</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## الخطوة التالية
+
+في القسم التالي، سنربط هذه قدرات AI المتباينة معاً، ونبني منتجاً كاملاً بالجمع بين سيناريوهات العمل الفعلية:
+
+- ربط مراحل مثل تخطيط المحتوى، ورفع المنتجات، وتحليل البيانات في مسار عمل كامل
+- تضمين قدرات AI التي تعلمناها في هذا الدرس (توليد النصوص عبر LLM، نص لصورة، تحرير الصور، إلخ) في عقد العمل الفعلية
+- بناء "مساحة عمل AI للتجارة الإلكترونية" قابلة للاستخدام فعلياً، وليس مجرد demo معزول
+
+<RelatedArticlesSection
+  title="مقالات ذات صلة"
+  description="مسار التعلم الموصى به من قدرة AI فردية إلى مسار منتج كامل."
+  :items="relatedArticles"
+/> 
diff --git a/docs/ar-sa/stage-1/introduction-to-ai-ide/index.md b/docs/ar-sa/stage-1/introduction-to-ai-ide/index.md
new file mode 100644
index 0000000..86a4822
--- /dev/null
+++ b/docs/ar-sa/stage-1/introduction-to-ai-ide/index.md
@@ -0,0 +1,1246 @@
+
+# المستوى المبتدئ الثاني: تعلم أدوات برمجة الذكاء الاصطناعي
+
+## مقدمة هذا الفصل
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'حوالي <strong>يوم واحد</strong>، يمكن إكماله على مراحل'
+const relatedArticles =
+  relatedArticlesMap['ar-sa/stage-1/introduction-to-ai-ide'] ?? []
+</script>
+
+<ChapterIntroduction :duration="duration" :tags="['إعداد بيئة التطوير المحلية', 'IDE و AI IDE', 'تقنيات التطوير الفعالة']" coreOutput="لعبة صغيرة مبتكرة" expectedOutput="إنشاء باستخدام Trae">
+
+في الفصل السابق، جربنا البرمجة بالذكاء الاصطناعي على z.ai، لكن النسخة الويب لديها العديد من القيود —— <strong>لا يمكن الحفظ في أي وقت</strong>، <strong>صعوبة إدارة الملفات</strong>، و<strong>عدم القدرة على إنشاء مشاريع معقدة</strong>. هذا الفصل يساعدك على نقل بيئة التطوير إلى جهازك الشخصي، لتتمكن من <strong>إنشاء أشياء بشكل مستقل حقاً</strong>.
+
+سنوضح أولاً <strong>ما الفرق بين IDE و AI IDE</strong>، ولماذا يمكن للأخير أن <strong>يضاعف كفاءتك</strong>؛ ثم <strong>سنرشدك خطوة بخطوة</strong> لإنشاء لعبة Snake محلياً باستخدام Trae، وتمرير <strong>العملية الكاملة</strong> من التثبيت إلى التشغيل؛ وأخيراً سنشارك بعض <strong>النصائح العملية</strong> للتواصل مع الذكاء الاصطناعي، لتجنب الاختيارات الخاطئة.
+
+بعد إتمام هذا الفصل، ستتمكن من <strong>إتقان سير عمل التطوير المشابه للمبرمجين المحترفين</strong>.
+
+::: tip نصيحة للمتقدمين
+إذا كان لديك أساس برمجي معين وتريد استخدام أدوات أقوى مبكراً، يمكنك الرجوع إلى [أدوات CLI Coding الحديثة](../../stage-2/backend/modern-cli/) للاستخدام بطريقة سطر الأوامر.
+:::
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'المعرفة بالبيئة', description: 'فهم IDE و AI IDE' },
+      { title: 'التطبيق العملي', description: 'إنشاء لعبة Snake مع Trae' },
+      { title: 'تفاصيل الأدوات', description: 'التعرف على واجهة IDE' },
+      { title: 'مهارات التواصل', description: 'التحدث بفعالية مع AI' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. ما هي البيئة والأدوات المطلوبة لكتابة الأكواد
+
+### 1.1 تغيير طريقة التفكير: عند مواجهة مشكلة، اسأل الذكاء الاصطناعي أولاً
+
+قبل البدء في تقديم البيئات والأدوات المختلفة، تجدر الإشارة أولاً إلى أنك بحاجة إلى **تغيير عادات تفكيرك**.
+
+في تعلم البرمجة التقليدي، إذا كنت تريد تثبيت Python أو تكوين Conda أو حل مشكلة فشل تثبيت npm، فستفتح عادةً محرك البحث، وتجد درساً تعليمياً، ثم تتبع الخطوات خطوة بخطوة. إذا حدث خطأ في المنتصف، قد تحتاج إلى البحث عن رسالة الخطأ مرة أخرى والمحاولة بشكل متكرر.
+
+خطأ! ❌
+
+في عصر الذكاء الاصطناعي، خاصة عند استخدام AI IDE، تذكر مبدأ أساسياً: **أي عملية يمكن أن تسأل عنها الذكاء الاصطناعي أولاً، بل ويمكنك تركه يقوم بها نيابة عنك.**
+
+- **لا تعرف كيفية تثبيت البيئة؟** اسأل الذكاء الاصطناعي مباشرة في الشريط الجانبي: “أريد كتابة Python، ساعدني في التحقق مما إذا كان Python مثبتاً، وإذا لم يكن كذلك فساعدني في تثبيته.”
+- **هل الشبكة عالقة؟** إذا استمر التحميل أو ظهر خطأ أثناء تثبيت حزم التبعيات، أرسل الخطأ مباشرة إلى الذكاء الاصطناعي: “فشل التنزيل، هل هي مشكلة شبكة؟ هل يمكنك مساعدتي في تغيير مصدر مرآة محلي؟”
+- **لا تتذكر الأوامر؟** لا حاجة لحفظ أوامر Git أو Conda، أخبر الذكاء الاصطناعي مباشرة: “ساعدني في إنشاء بيئة افتراضية جديدة باسم demo.”
+
+### 1.2 لماذا نحتاج إلى بيئة وأدوات
+
+من “كتابة بضعة أسطر من الكود” إلى “إنشاء مشروع قابل للصيانة على المدى الطويل”، تختلف متطلبات البيئة والأدوات تماماً.
+
+نظرياً، يمكنك كتابة الكود باستخدام برنامج المفكرة المدمج في النظام، لكن المشاكل ستظهر بسرعة:
+
+- **الكود كله نص أسود**، الكلمات المفتاحية والسلاسل النصية والتعليقات مختلطة معاً، من الصعب تمييز البنية بنظرة واحدة
+- **لا توجد اقتراحات ذكية**، يجب كتابة كل كلمة بالكامل يدوياً، خطأ إملائي في حرف واحد يتطلب فحصاً متكرراً
+- **الفوضى عند كثرة الملفات**، التبديل بين عشرات الملفات، غالباً لا تجد السطر الذي تريد تعديله
+- **التخمين عند حدوث الأخطاء**، لا تعرف أين المشكلة عند تعطل البرنامج، يجب طباعة السجلات سطراً سطراً للتجربة والخطأ
+
+لذلك، أنت بحاجة إلى IDE (بيئة التطوير المتكاملة). فهي تعرض الكود بألوان مختلفة، وتقدم اقتراحات تلقائية أثناء الكتابة، وتنظم الملفات حسب المشروع، وتتبع الأخطاء خطوة بخطوة، مما يجعل التطوير أكثر كفاءة وأقل عرضة للأخطاء.
+
+## 2. ما هو IDE، ولماذا نحتاجه
+
+::: info نصيحة للمراجعة
+إذا لم تكن معتاداً على ماهية IDE وما هي وظيفة كل عنصر في الواجهة، ننصحك بقراءة [مقدمة في IDE](/zh-cn/appendix/2-development-tools/ide-basics) أولاً، للتعرف على المفاهيم الأساسية والوظائف الشائعة لـ IDE.
+:::
+
+في العصر المبكر للبرمجة، كنا نحتاج فقط إلى محرر نصوص بسيط ومعالج لغة. لكن مع زيادة تعقيد المشاريع، احتاج المطورون بشدة إلى أداة يمكنها إدارة الملفات بكفاءة، ودعم تمييز بناء الجملة، وتصحيح الأخطاء، وهكذا ولدت بيئة التطوير المتكاملة (IDE).
+
+يمكنك فهم IDE على أنه برنامج مخصص لـ “تحرير وإدارة وتشغيل وتصحيح” الأكواد. كان مظهر IDE المبكر “بدائياً” جداً، يعمل تقريباً بالكامل عبر لوحة المفاتيح.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)
+
+واجهة الطرفية (Terminal) مصدر الصورة: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
+
+من بين “IDE المدمجة” المعروفة والمتطورة وظيفياً، مثل `Vim`، تُستخدم غالباً للعمليات البعيدة على الخوادم.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png)
+
+لزيادة الكفاءة، نحتاج إلى IDE حديث يدعم تشغيل الماوس، وعادة ما يتضمن:
+
+- **محرر الكود المصدري**: تمييز بناء الجملة، الإكمال التلقائي.
+- **أدوات البناء والتشغيل**: مترجم/مفسر مدمج.
+- **أداة التصحيح**: نقاط التوقف، عرض المتغيرات.
+
+غالباً ما تتضمن IDE الحديثة أيضاً أدوات مثل Git. الأكثر شعبية هو **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)** من Microsoft، وهو خفيف وقابل للتوسيع. على الرغم من وجود IDE احترافية مثل مجموعة JetBrains، إلا أن VS Code هو الأكثر صداقة للمبتدئين.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png)
+
+المفهوم الأساسي لـ VS Code هو “كل شيء هو مكون إضافي”. من خلال آلية المكونات الإضافية يدعم لغات متعددة؛ تثبيت مكون Python يجعله Python IDE، وتثبيت مكون C++ يجعله C++ IDE. بدون مكونات إضافية، هو مجرد محرر نصوص متقدم.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png)
+
+بل يمكن استخدامه حتى لتحرير مستندات Markdown.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png)
+
+باختصار، IDE هو مجموعة أدوات تساعد المطورين على كتابة الأكواد وتشغيل البرامج بكفاءة.
+
+لمزيد من التفاصيل، يرجى مراجعة [قسم مبادئ IDE المرئي في الملحق](/zh-cn/appendix/2-development-tools/ide-basics).
+
+## 3. ما الفرق بين AI IDE و IDE العادي
+
+IDE العادي (مثل VS Code الأصلي) هو في الأساس “مجموعة أدوات”:
+يمكنك فتح المشروع وكتابة الكود وتشغيله وتصحيح أخطائه، ويمكنك أيضاً تثبيت مكونات إضافية، لكن بشرط أن تعرف بنفسك ماذا تفعل وكيف تفعل:
+
+- عند حدوث خطأ، تقرأ الرسالة بنفسك وتتحقق بنفسك من السطر المسبب للمشكلة؛
+- إذا كنت تريد إضافة صفحة جديدة أو واجهة جديدة، تبحث بنفسك عن الملف المناسب وتكتب الكود بنفسك؛
+- إذا كنت تريد تهيئة البيئة أو حزم المشروع، تبحث في التوثيق وتتبع الخطوات بنفسك.
+
+لكن في AI IDE، يمكنك استخدام نموذج اللغة الكبير مباشرة لمساعدتك في البرمجة وتعديل الملفات:
+
+- قل مباشرة “اصنع صفحة تسجيل دخول”، وسيقوم بتوليد هيكل الكود الأساسي؛
+- أرسل رسالة الخطأ والكود ذي الصلة إليه، وسيقوم بتحليل السبب أولاً ثم تقديم اقتراحات التعديل؛
+- بعد تأكيدك، دعه ينشئ ملفات جديدة تلقائياً ويعدل الكود دفعة واحدة، ويتعامل مع المهام الشاقة عبر الملفات.
+
+على سبيل المثال، يمكنك تحديد جزء من التعليمات البرمجية وطلب "إعادة هيكلة" أو "إضافة تعليقات"؛ يمكنك أيضًا السؤال في الشريط الجانبي "كيف تم تصميم هذا المشروع؟"، ومن خلال `@اسم_الملف` أو `@المشروع_بالكامل` تحديد نطاق المرجع، واستخدام جملة واحدة لإكمال العمليات المعقدة تلقائيًا مثل إنشاء ملفات جديدة، وكتابة التعليمات البرمجية، وتشغيلها.
+
+في أحدث إصدار من VS Code، تم دمج مساعد نموذج لغوي كبير مدمج. يمكنك التحدث مباشرة مع النموذج حول مستودع التعليمات البرمجية بالكامل، أو ملف معين، أو حتى دالة معينة. يمكنك أيضًا، تمامًا كما كنت تفعل عند استخدام أدوات كتابة التعليمات البرمجية التلقائية على الويب سابقًا، إرسال متطلباتك في شكل prompts إلى Agent البرمجة المدمج، ليتولى هو تلقائيًا تنفيذ الوظائف المطلوبة، وإنشاء الملفات، وتعديل التعليمات البرمجية، وإعداد البيئة، وغيرها.
+
+يمكنك تنزيل وتثبيت VS Code، ثم النقر على مدخل الشريط الجانبي في الزاوية العلوية اليمنى لفتح منطقة وظائف AI وتجربة هذه القدرات.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png)
+
+ومع ذلك، فإن VS Code ليس بيئة التطوير المتكاملة (IDE) الأقوى في قدرات AI. في السيناريوهات التي تتطلب قدرًا كبيرًا من البرمجة بمساعدة AI، غالبًا ما نأمل في استخدام أدوات "أكثر ذكاءً وأعلى كفاءة" — فبيئة التطوير المتكاملة AI الجيدة يمكن أن توفر وقتًا كبيرًا في كتابة التعليمات البرمجية وإصلاح الأخطاء (Bugs). أدناه، سنقدم several بيئات تطوير متكاملة AI الأكثر شيوعًا حاليًا، ويمكنك اختيار أي بيئة تطوير متكاملة AI لاستخدامها وفقًا لتفضيلاتك الشخصية.
+
+نظرًا لأن VS Code مفتوح المصدر (يمكن لأي شخص تنزيل التعليمات البرمجية المصدرية وتجميعها بنفسه)، فإن الغالبية العظمى من بيئات التطوير المتكاملة AI المتوفرة في السوق حاليًا تم تطويرها بشكل ثانوي بناءً على VS Code. لذلك لا داعي للقلق بشأن "تعلم العديد من بيئات التطوير المتكاملة" — **طالما أنك على دراية بالاستخدام الأساسي لـ VS Code**، فلن تحتاج إلى إعادة التعلم عند الانتقال إلى بيئات التطوير المتكاملة AI هذه.
+
+بشكل عام، بالنسبة للاختلافات بين بيئات التطوير المتكاملة AI المختلفة، تتركز بشكل أساسي في أربعة جوانب: السعر؛ وأنواع النماذج المتاحة (قد تكون بعض النماذج المتقدمة مقيدة في مناطق معينة)؛ وقدرات Agent (مستوى الذكاء والقدرة على التنفيذ عند المساعدة في كتابة التعليمات البرمجية)؛ وسرعة التشغيل والأداء. يمكنك الاختيار بناءً على تأثيرات الاختبار الفعلي، فالأفضل هو ما يناسبك.
+
+> تتضمن بيئة التطوير المتكاملة AI النموذجية بشكل عام القدرات الأساسية التالية:
+>
+> - إنشاء التعليمات البرمجية والإكمال الذكي: في بيئة التطوير المتكاملة التقليدية، نعتمد عادةً على إدخال بضعة أحرف لإكمال أسماء المتغيرات أو الدوال؛ في بيئة التطوير المتكاملة AI الحديثة، يمكنك كتابة بضعة أسطر من Pseudocode أو وصف المتطلبات ببساطة، والسماح لبيئة التطوير المتكاملة بإكمال المنطق بالكامل تلقائيًا، أو حتى إنشاء جزء كبير أو كتلة كاملة من التعليمات البرمجية مباشرة بناءً على التعليمات.
+> - فهم التعليمات البرمجية والإجابة على الأسئلة: يمكن لبيئة التطوير المتكاملة فهم والإجابة على الأسئلة حول جزء معين من التعليمات البرمجية، أو ملف معين، أو حتى بنية دليل المشروع بالكامل.
+> - إعادة هيكلة التعليمات البرمجية وتحسينها: يمكن لبيئة التطوير المتكاملة إعادة كتابة أو تحسين منطق تنفيذ جزء معين من التعليمات البرمجية بناءً على نيتك.
+> - إنشاء الاختبارات تلقائيًا: يمكن لبيئة التطوير المتكاملة إنشاء تعليمات برمجية للاختبار تلقائيًا لدوال ووحدات مختلفة، مما يسهل عليك إجراء اختبارات مستهدفة.
+> - تنفيذ المهام بأسلوب Agent: يمكن لـ Agent الذكي إنشاء التعليمات البرمجية وتعبئتها وتثبيتها وتشغيلها وتعديلها تلقائيًا، ويمكنه في العديد من المهام أن يحل محل مهندس البرمجيات المبتدئ جزئيًا.
+
+::: details Antigravity
+
+### [Antigravity](https://antigravity.google/)
+
+Antigravity هو بيئة تطوير متكاملة AI جديدة أطلقتها Google في نوفمبر 2025 مع Gemini 3، وتتبنى نموذج تطوير "Agent-First" (الأولوية للوكيل الذكي). على عكس البرمجة بمساعدة AI التقليدية، يجعل Antigravity وكيل AI "منفذًا نشطًا"، قادرًا على تشغيل أدوات مثل المحرر والطرفية (Terminal) والمتصفح مباشرة، ليتولى المزيد من أعمال "التنفيذ" و"التخطيط" و"التحقق". يحتاج المطورون فقط إلى طرح النية العامة، وسيقوم الوكيل تلقائيًا بتقسيم المهام، ووضع الخطط، وتنفيذ التعليمات البرمجية، وتشغيل الاختبارات، وإنشاء النتائج. يدعم التبديل بين النماذج المتعددة، بما في ذلك Gemini 3 Pro و Claude Sonnet 4.5 وغيرها، وهو متوفر حاليًا كمعاينة عامة، ويدعم جميع الأنظمة الأساسية مثل Windows و macOS و Linux.
+:::
+
+::: details Trae
+
+### [Trae](https://www.trae.ai/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png)
+
+Trae هو مساعد برمجة AI أطلقته ByteDance، ويدعم أكثر من 100 لغة برمجة، ويمكن دمجه في بيئات التطوير المتكاملة السائدة. تشمل وظائفه: إنشاء التعليمات البرمجية باللغة الطبيعية، والتصحيح التلقائي، وتحويل التصاميم إلى مكونات React/Vue وغيرها. بعد التحديث الذي أجرته في أغسطس 2025، أضافت Trae ميزات مثل استيراد التبعيات الذكي، واقتراحات إعادة التسمية، وإدارة قوائم المهام؛ وبدأ وضع SOLO أيضًا في دعم إنشاء التعليمات البرمجية الخلفية وتحرير وثائق البنية التقنية.
+:::
+
+::: details Cursor
+
+### [Cursor](https://cursor.com/)
+
+Cursor هو محرر تعليمات برمجية AI طورته Anysphere، ومبني خصيصًا على VS Code، مع التركيز على تحسين سيناريوهات مستودعات التعليمات البرمجية الضخمة والتعاون متعدد الملفات. يدعم نماذج مثل GPT-4o و Claude 3.7؛ ويمكن لوضع Claude Max الذي أطلق في عام 2025 التعامل مع مشاريع بمستوى ملايين الأسطر من التعليمات البرمجية. ألغى الإصدار الاحترافي قيود عدد الطلبات، مما يجعله مناسبًا جدًا للمشاريع المعقدة على مستوى المؤسسات.
+
+حاليًا، يمكن القول إن Cursor واحد من أفضل بيئات التطوير المتكاملة AI "التي تحتوي على واجهة أمامية" من حيث التجربة الشاملة، مع قاعدة مستخدمين ضخمة وتيرة تحديثات عالية جدًا. أكبر عيوبه هو ارتفاع سعره — حيث يكلف الإصدار الاحترافي حوالي 20 دولارًا شهريًا.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png)
+:::
+
+::: details Qoder
+
+### [Qoder](https://qoder.com/)
+
+Qoder هو بيئة تطوير متكاملة AI أطلقتها Alibaba، وتؤكد على "التعاون الشفاف" و"تعزيز قدرات هندسة السياق". فهو يدعم من خلال Action Flow تقسيم المهام إلى خطوات متعددة، وتتبع عملية تنفيذ AI في الوقت الفعلي؛ كما يدعم التوجيه الديناميكي للنماذج المتعددة وإدارة آلة حالة المهام، وهو مناسب جدًا للإدارة المعمارية في المشاريع المتوسطة والكبيرة وتحليل "الهندسة العكسية" للأنظمة القديمة.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png)
+:::
+
+::: details CodeBuddy
+
+### [CodeBuddy](https://www.codebuddy.com/)
+
+CodeBuddy هي أداة برمجة AI أطلقتها Tencent Cloud، وتؤكد على دعم التعليمات الصينية وقدرات الامتثال على مستوى المؤسسات. توفر ميزات مثل إكمال التعليمات البرمجية، ومراجعة التعليمات البرمجية المجمعة، والتبديل بين النماذج المتعددة؛ ويمكن لـ Agent الذكي المسمى Craft إنشاء تعليمات برمجية متعددة الملفات ودمج API. يدعم إصدار المؤسسات النشر الخاص، وقد اجتاز شهادة حماية البيانات من المستوى الثالث، وهو مناسب للصناعات ذات المتطلبات العالية لأمن البيانات مثل التمويل والرعاية الصحية.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png)
+:::
+
+::: details VS Code + Cline
+
+### VS Code + [Cline](https://cline.bot/)
+
+Cline هو مكون إضافي لـ Agent برمجة AI لـ VS Code (Visual Studio Code)، ويمكنه التبديل بمرونة بين النماذج اللغوية الكبيرة المستخدمة من خلال تكوين نقاط نهاية API مختلفة. يدعم Cline الإدخال متعدد الوسائط، وامتداد أدوات MCP، ومراقبة التكاليف، وجميع العمليات تتطلب تأكيد المستخدم قبل تنفيذها. إنه مناسب جدًا للتحقق السريع من الأفكار أو التكامل مع عمليات التطوير الحالية. الوظائف الأساسية مجانية، بينما يدعم إصدار المؤسسات نشر النماذج في بيئات خاصة.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png)
+:::
+
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro هو بيئة تطوير متكاملة AI للبرمجة أطلقتها AWS (Amazon Web Services)، وهي متكاملة بعمق مع Amazon Bedrock ونظام AWS للخدمات السحابية. يدعم Kiro مجموعة متنوعة من النماذج اللغوية الكبيرة مثل Claude و Nova، وهو مناسب بشكل خاص لسيناريوهات التطوير التي تتطلب تكاملاً وثيقًا مع خدمات AWS السحابية. يوفر Kiro قدرات إنشاء التعليمات البرمجية الذكية، والاختبار الآلي، والتوصيل السلس مع موارد AWS (مثل Lambda و S3 و DynamoDB)، مما يمنحه ميزة فريدة في تطوير التطبيقات السحابية الأصلية.
+
+> **ملاحظة**: إذا كنت ترغب في استخدام النماذج المتعلقة بـ Anthropic Claude، فستحتاج إلى استخدام Cursor أو Kiro أو Antigravity كبيئة تطوير متكاملة (IDE). بيئات التطوير المتكاملة هذه لديها تعاون رسمي أو تكامل عميق مع Anthropic، مما يوفر تجربة Claude أكثر استقرارًا واكتمالاً.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'الوعي بالبيئة', description: 'فهم IDE و AI IDE' },
+      { title: 'ممارسة محلية', description: 'استخدام Trae لبناء لعبة الثعبان' },
+      { title: 'شرح الأدوات', description: 'التعرف على واجهة IDE' },
+      { title: 'مهارات التواصل', description: 'الحوار الفعّال مع الذكاء الاصطناعي' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. تطبيق عملي: إنشاء لعبة الثعبان محليًا باستخدام AI IDE
+
+تحدثنا سابقًا بشكل أساسي عن "المفاهيم" و"الاختلافات". في هذا القسم الفرعي، من خلال تطبيق عملي كامل، سنحول المفاهيم المجردة إلى عمليات ملموسة: **إنشاء مجلد فارغ جديد ← فتحه باستخدام AI IDE ← الدردشة في الشريط الجانبي، وجعله ينشئ لك لعبة ثعبان من الصفر باستخدام React.** نأخذ Trae المذكور أعلاه كمثال، أولاً تحتاج إلى تثبيت Trae وفهم ماهيته ببساطة.
+
+::: tip 💡 نصيحة صغيرة: الانتقال السلس من الويب إلى المحلي
+إذا كنت قد طورت بالفعل مشاريع سابقًا على منصات برمجة الذكاء الاصطناعي الويب مثل z.ai أو غيرها، يمكنك تنزيل الكود مباشرة إلى جهازك المحلي، ثم فتحه باستخدام AI IDE لمواصلة التطوير. بهذه الطريقة يمكنك الاحتفاظ بإنجازاتك السابقة، والاستمتاع بقدرات المساعدة الأقوى للذكاء الاصطناعي في بيئة التطوير المحلية (IDE).
+
+خطوات العملية بسيطة للغاية:
+1. انقر على زر التنزيل في منصات مثل z.ai، واحفظ المشروع محليًا
+2. بعد فك الضغط، افتح المجلد باستخدام AI IDE مثل Trae/Cursor
+3. واصل الحوار مع الذكاء الاصطناعي في الشريط الجانبي، وقم بتحسين مشروعك بشكل تكراري
+:::
+
+### 4.1 الاستعدادات: تثبيت Trae والتعرف عليه
+
+#### 4.1.1 ما هو Trae
+
+الاسم الكامل لـ Trae يمكن فهمه على أنه "The Real AI Engineer"، وهو بيئة تطوير متكاملة (IDE) ذكية متكيفة مع الذكاء الاصطناعي طورتها شركة ByteDance. تم بناؤه على أساس VS Code الشهير، مما يعني أنه إذا كنت معتادًا بالفعل على VS Code، فستشعر بالألفة والراحة عند استخدام Trae، سواء في تخطيط الواجهة أو العمليات الأساسية.
+
+الهدف الأساسي من Trae هو أن يصبح "شريك برمجة ذكي" للمطورين. من خلال التكامل العميق مع قدرات الذكاء الاصطناعي، يمكنه معالجة الكثير من الأعمال المتكررة تلقائيًا، مما يوفر لك تجربة تطوير أكثر بديهية وكفاءة. إنه ليس مجرد "أداة إكمال الكود"، بل يهدف إلى مرافقة سير عمل التطوير بالكامل، من إنشاء المشاريع وكتابة الكود والتصحيح والاختبار إلى النشر.
+
+#### 4.1.2 تثبيت Trae
+
+ينقسم Trae إلى نسخة دولية ونسخة صينية. النسخة الدولية تتطلب القدرة على الوصول إلى الشبكات الخارجية، لكن يمكنها استخدام أحدث النماذج الخارجية مثل GPT-5؛ بينما النسخة الصينية تدعم بشكل أساسي أحدث النماذج الكبيرة المحلية، مثل GLM و Qwen و Kimi وغيرها.
+
+رابط تنزيل النسخة الدولية: https://www.trae.ai/
+رابط تنزيل النسخة الصينية: https://www.trae.cn/
+
+##### تسعير Trae وطريقة الاستخدام
+
+::: info 💡 نصيحة اختيار النسخة (يُنصح بالنسخة CN للمبتدئين)
+- **يُنصح المبتدئون بشدة بتنزيل النسخة الصينية (نسخة CN، trae.cn)**، تجربة الاستخدام أفضل حاليًا، والميزات الأساسية مجانية دون الحاجة لشبكات خارجية
+- إذا كنت بحاجة لاستخدام نماذج خارجية مثل GPT-5، وتسمح ظروف شبكتك بذلك، يمكنك اختيار النسخة الدولية
+- إذا كان لديك مفتاح API لنموذج طرف ثالث، فإن ربط نموذج الطرف الثالث يمكن أن يوفر تحكمًا مرنًا في التكاليف
+:::
+
+> 💡 **يُنصح حاليًا باستخدام نموذج OpenRouter المجاني للاختبار**
+> 
+> حتى وقت كتابة هذا الدليل (2026-02-12)، لا يزال من الممكن تجربة نموذج StepFun مجانًا. يمكنك الرجوع إلى طريقة ربط النموذج في القسم 4.2 أدناه، وربط `stepfun/step-3.5-flash:free`.
+
+فيما يتعلق بتكاليف Trae وطرق استخدامه، هناك الخيارات التالية المتاحة:
+
+- **النسخة المحلية CN (يُنصح بها بشدة)**: الاستخدام الأساسي مجاني، وتجربة الاستخدام العامة أفضل حاليًا من النسخة الدولية، ومناسبة جدًا للمبتدئين. نظرًا لوجود عدد كبير من المستخدمين، قد تحتاج أحيانًا للانتظار في طابور.
+- **النسخة الدولية**: سعر الاشتراك حوالي 3 دولارات أمريكية شهريًا تقريبًا، ويمكنها الوصول إلى النماذج الخارجية مثل GPT-5، لكنها تتطلب القدرة على الوصول إلى الشبكات الخارجية.
+- **ربط نموذج طرف ثالث**: إذا كان لديك بالفعل Token API لنموذج محلي كبير (مثل DeepSeek و Tongyi Qianwen و Kimi وغيرها)، يمكنك ربط هذه الـ APIs واستخدامها من خلال وظيفة تكوين نموذج الطرف الثالث في Trae. عادةً ما توفر مزودو الخدمات السحابية الكبرى (مثل Alibaba Cloud و Tencent Cloud و Baidu Cloud وغيرها) خطط اشتراك Coding Plan، وبعد الشراء يمكنك استخدام واجهات برمجة تطبيقات النماذج الكبيرة الخاصة بهم بأسعار أكثر تنافسية. بهذه الطريقة يمكنك اختيار النموذج المفضل لديك بحرية، والتحكم في تكاليف الاستخدام في نفس الوقت.
+
+يُنصح المبتدئون بالبدء بتجربة النسخة المجانية CN المحلية (رابط التنزيل: https://www.trae.cn/)، تجربة استخدام النسخة CN أفضل حاليًا ومجانية تمامًا. إذا واجهت مشاكل في الانتظار أو كنت بحاجة لخدمة أكثر استقرارًا، يمكنك التفكير في ربط نموذج طرف ثالث وشراء خطة Coding Plan من مزود الخدمة السحابية المقابل.
+
+#### 4.1.3 مقدمة موجزة عن واجهة Trae
+
+من حيث شكل الواجهة، Trae مشابه جدًا لـ VS Code الذي نستخدمه يوميًا: نفس التخطيط الكلاسيكي ذو الأعمدة الثلاثة مع مستكشف الموارد على اليسار، ومنطقة التحرير في الوسط، ولوحة الإضافات على اليمين.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png)
+
+الشريط الجانبي الموجود على اليمين هو نافذة تفاعل Copilot، ويمكن أيضًا فهمها كنافذة Agent. إذا لم تتمكن من رؤيتها مؤقتًا، يمكنك النقر على أيقونة الشريط الجانبي في الزاوية العلوية اليمنى من Trae لفتحها.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png)
+
+بعد فتح الشريط الجانبي، سترى خيار `Builder`، وهذا هو وضع Agent. ببساطة يمكن فهمه على أنه "النسخة المحلية" من z.ai، حيث يمكنه مساعدتك في تشغيل بيئة الجهاز المحلي، وتثبيت بيئات التشغيل، وفتح صفحات الويب وغيرها.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png)
+
+بعد النقر على "Builder"، سترى وضع "Chat" ووضع "Builder with MCP":
+
+- **وضع Chat**: يُستخدم بشكل أساسي للحوار مع الكود الموجود في المجلد الحالي، أو استخدامه كنموذج دردشة عادي. (يمكنك فتح مجلد من خلال قائمة "File" في الزاوية العلوية اليسرى، وإجراء عمليات التحرير في هذا المجلد. في هذه الحالة، لن يتم إنشاء أو تعديل الملفات التي ينشئها Builder إلا داخل هذا المجلد.)
+- **وضع Builder with MCP**: يوفر للمزيد من الأدوات المتاحة لـ Agent (مثل ربط نموذج اللغة ببرامج أخرى، والاستعلام عن الطقس، إلخ). يمكنك الفهم البسيط بأن: MCP يمكن أن يجعل نموذج اللغة يستدعي أدوات خارجية متنوعة بشكل أكثر ملاءمة.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)
+
+في المنطقة السفلية، سترى أيضًا خيار اختيار النموذج، حيث يمكنك النقر لتعديل النموذج الكبير المستخدم حاليًا. في النسخة الصينية، يمكنك اختيار استخدام نماذج محلية مثل Kimi k2 أو GLM؛ وإذا كنت تستخدم النسخة الدولية من Trae، يمكنك أيضًا اختيار نماذج خارجية مثل ChatGPT أو Claude. ومع ذلك، نظرًا للتطور السريع للنماذج الكبيرة المحلية، أصبحت التجربة العملية لـ Kimi و Qwen و GLM وغيرها في العديد من المهام قريبة بالفعل من Claude 3.5 أو 3.7، وهي كافية تمامًا للتطوير اليومي، ولا نُلزم هنا باستخدام النسخة الدولية أو المحلية للعمل.
+
+**يجب ملاحظة أنه لا يُنصح هنا باستخدام وضع Auto (الاختيار التلقائي للنموذج)، إذا كانت نسخة دولية، ننصح باستخدام نموذج Gemini أو GPT، وإذا كانت نسخة محلية، ننصحك بتجربة نماذج محلية مثل Kimi k2 أو Minimax أو GLM،** النماذج المختلفة لها سيناريوهات استخدام مختلفة، ولا يوجد قاعدة صارمة بأن أحدهما أفضل من الآخر بالتأكيد، يمكنك تغيير النموذج عند مواجهة صعوبات في مهام مختلفة وعدم القدرة على الحل، ومن خلال اختبارات متعددة الحصول على أفضل النتائج التجريبية الخاصة بك.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png)
+
+ما سبق كان مقدمة موجزة عن Trae. بعد ذلك، يمكننا مراجعة العمليات التي قمنا بها سابقًا في z.ai، ومحاولة القيام بنفس الأشياء في Trae.
+
+### 4.2 الخطوة الأولى: إنشاء مجلد فارغ جديد وفتحه باستخدام AI IDE
+
+قبل البدء الفعلي، نحتاج أولاً إلى إعداد دليل عمل مشروع نظيف.
+باستخدام مثال هذا القسم الفرعي كمثال، يمكنك إنشاء مجلد فارغ جديد محليًا باسم snake-game-react.
+
+بعد ذلك، افتح AI IDE المثبت، واختر في واجهة البدء فتح مجلد أو Open Folder، واستورد هذا المجلد الفارغ كدليل جذر للمشروع؛ أو يمكنك سحب المجلد وإفلاته مباشرة في نافذة IDE لإتمام الفتح. في هذا الوقت، لن يظهر أي ملفات كود في مستكشف الموارد على اليسار، مما يشير إلى أننا نبدأ من حالة مشروع فارغة تمامًا.
+
+::: details 📚 اختياري: ربط API أو Coding Plan من مزود خدمة سحابية
+
+سيقدم هذا القسم كيفية ربط API أو Coding Plan من مزود خدمة سحابية، للحصول على استدعاءات نموذج أكثر استقرارًا وتكرارًا. سيتم تقديم لقطة شاشة للربط في Trae في الجزء الختامي.
+
+**ما هو Coding Plan**
+
+Coding Plan هو خطة اشتراك تطلقها مزودو الخدمات السحابية الكبرى، وبعد الشراء يمكنك **استخدام** واجهة برمجة تطبيقات النموذج الكبير الخاص بالمزود بشكل غير محدود أو بتكرار عالٍ خلال فترة زمنية معينة. مقارنة بطريقة الدفع حسب Token، فإن Coding Plan أشبه بـ "باقة شهرية" — تدفع مبلغًا ثابتًا، ويمكنك استخدامه بثقة وجرأة دون القلق من أن كل استدعاء سيكلفك رسومًا.
+
+**لماذا تحتاج لشراء Coding Plan**
+قد تتساءل: بما أنه يمكن استخدام استدعاءات API للنماذج الكبيرة مباشرة، فلماذا نشتري خطة البرمجة (Coding Plan)؟ الأسباب الرئيسية هي: **الاستخدام المستمر**: الميزة الأساسية لخطة البرمجة هي أنه يمكنك استدعاء النماذج الكبيرة في أي وقت وبشكل متكرر، دون القلق من ارتفاع التكاليف، ولا تحتاج إلى مراقبة عداد الفوترة باستمرار.
+
+**خطط البرمجة المُوصى بها من خدمات السحابة المحلية**
+
+فيما يلي خيارات خطط البرمجة المُوصى بها التي تقدمها شركات الخدمات السحابية المحلية الرئيسية:
+
+- Zhipu AI (BigModel Plan): https://bigmodel.cn/glm-coding
+- Volcengine (ByteDance Cloud AI Plan): https://www.volcengine.com/activity/codingplan
+
+> 💡 **يمكنك أيضًا الاتصال مباشرة بواجهة برمجة تطبيقات النماذج الكبيرة (API)**
+> بالإضافة إلى خطة البرمجة، يمكنك أيضًا الاتصال بواجهات برمجة تطبيقات النماذج الكبيرة مباشرة من خلال Add Model. يمكنك الرجوع إلى طريقة الاتصال بواجهة برمجة تطبيقات StepFun المجانية عبر OpenRouter أدناه، وإدخال واجهة برمجة التطبيقات (API) إلى Trae لاستخدامها. لقد ثبت بالاختبار أنها تلبي احتياجات البرمجة الأساسية.
+> إذا كنت بحاجة إلى إضافة رصيد، يُنصح بإضافة 10 يوانات أولاً لتجربة المدة التي ستستغرقها، مثل النماذج عالية التكلفة والفعالية مثل DeepSeek وغيرها.
+
+**كيفية الاتصال بخطة البرمجة (Coding Plan)**
+
+خطوات الاتصال بخطة البرمجة بسيطة جدًا، ويمكن إكمالها في بضع دقائق فقط:
+
+1. قم بزيارة الموقع الرسمي لمزود الخدمة السحابية الذي اخترته (مثل Zhipu AI: https://bigmodel.cn/glm-coding ، Volcengine: https://www.volcengine.com/activity/codingplan)
+2. قم بتسجيل حساب وتسجيل الدخول
+3. ابحث عن صفحة "التسعير" أو "Coding Plan"
+4. اختر الباقة المناسبة لك وأكمل عملية الدفع
+5. بعد نجاح الدفع، ستحصل على مفتاح واجهة برمجة التطبيقات (API Key) أو معرف الخطة (Plan ID)
+
+::: tip 🎯 توصية النموذج المخصص
+
+عند إدخال نموذج مخصص في Trae، **نوصي افتراضيًا باستخدام حل OpenRouter**. يوفر OpenRouter واجهة برمجة تطبيقات (API) موحدة، مما يسمح بالاتصال بسهولة بمجموعة متنوعة من النماذج اللغوية الكبيرة.
+
+**حتى 12 فبراير 2026، يمكنك أيضًا استخدام واجهة برمجة تطبيقات StepFun المجانية:**
+
+- **`stepfun/step-3.5-flash:free`**: نموذج مجاني توفره StepFun، ويدعم أيضًا الاتصال والاستخدام المباشر في Trae.
+
+**نماذج مجانية أخرى:**
+
+- **`openrouter/free`**: هذا خيار نموذج يستخدم واجهة برمجة تطبيقات LLM مجانية افتراضيًا، ويمكن استخدامه مباشرة في الاتصال بالنموذج المخصص (Custom Model) في Trae (فقط اكتب معرف النموذج مباشرة)، ويمكنك تجربة وظائف برمجة الذكاء الاصطناعي دون دفع أي رسوم.
+
+هذه الخيارات المجانية مثالية جدًا للمبتدئين لتجربة البرمجة بالذكاء الاصطناعي، وقبل الاستثمار في بيئة الإنتاج الرسمية، يمكنك أولاً التعرف على سير العمل في بيئة تطوير الذكاء الاصطناعي (AI IDE) من خلال هذه الحلول المجانية.
+
+**اختياري: الاتصال بواجهة برمجة تطبيقات استدعاء النماذج الكبيرة (باستخدام DeepSeek كمثال)**
+
+1. قم بزيارة منصة DeepSeek: https://platform.deepseek.com/usage
+2. قم بتسجيل حساب وتسجيل الدخول
+3. قم بشراء حزمة Token بقيمة 10 يوانات في صفحة إضافة الرصيد
+4. بعد نجاح إضافة الرصيد، قم بإنشاء ونسخ مفتاح واجهة برمجة التطبيقات (API Key) في صفحة API Keys
+5. في Trae، انقر فوق **"Add Model"**، وابحث عن DeepSeek، واختر النموذج المقابل، وأدخل مفتاح واجهة برمجة التطبيقات (API Key) لبدء الاستخدام
+
+من خلال الواجهة التالية، يمكنك الإضافة بنجاح (لاحظ أنه بعد تحديد خيار النموذج [يجب التمرير إلى الأسفل]، يوجد أدناه "نموذج مخصص"، وبعد النقر عليه يمكنك إدخال معرف النموذج، في هذه المرحلة يمكنك إدخال معرف النموذج الموصى به أعلاه مثل `stepfun/step-3.5-flash:free` وكتابته مباشرة، وفي نفس الوقت انقر فوق Get Key أدناه للذهاب إلى الموقع الرسمي للحصول على مفتاح واجهة برمجة التطبيقات (API Key) المقابل واكتبه للاستخدام العادي.)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png)
+:::
+
+### 4.3 الخطوة الثانية: الدردشة في الشريط الجانبي، وجعل الذكاء الاصطناعي يصمم لعبة الثعبان باستخدام React
+
+بعد ذلك، افتح الشريط الجانبي لدردشة الذكاء الاصطناعي: عادةً بالضغط على `Ctrl+L` أو النقر على أيقونة الدردشة الموجودة على اليمين. ثم أدخل موجهًا واضحًا بما فيه الكفاية في الدردشة:
+
+> يُرجى تنفيذ لعبة الثعبان باستخدام بنية React، بما في ذلك التحكم بلوحة المفاتيح، وزيادة الطول والنقاط عند أكل الطعام، وعرض "انتهت اللعبة" عند الاصطدام بالجدار أو بنفسها مع إمكانية إعادة التشغيل. بعد التنفيذ، ساعدني في تشغيل هذا المشروع. إذا واجهت بيئة برنامج غير مثبتة، قم بتثبيت البيئة المفقودة تلقائيًا.
+
+في هذه العملية، تحتاج إلى إدراك أن الذكاء الاصطناعي ليس مجرد نموذج دردشة، بل يمكنه مساعدتك في تشغيل بيئة الجهاز المحلي: إنشاء الملفات، وتثبيت التبعيات، وتنفيذ أوامر التشغيل، وما إلى ذلك. يمكنك ببساطة استخدام اللغة الطبيعية لوصف الهدف الذي تريد تحقيقه، وسيقوم الذكاء الاصطناعي بتحديد الأوامر المحددة التي يجب تنفيذها وكيفية تنظيم الكود البرمجي.
+
+إذا واجهت مشاكل أثناء التنفيذ، سيعرض الذكاء الاصطناعي رسائل الخطأ وحلولها في المحادثة، ويمكنك الاستمرار في التحدث معه لتعديلها بدلاً من الاضطرار إلى تذكر جميع تفاصيل الأوامر بنفسك.
+
+::: warning ⚠️ ملاحظة هامة
+على سبيل المثال، كما هو موضح في الشكل أدناه، **أحيانًا يتوقف وكيل الذكاء الاصطناعي (AI Agent) أثناء التنفيذ، وذلك لأنه يحتاج إلى انتظارك لإدخال بعض المعلومات للتفاعل**، مثل إدخال اسم الإنشاء، أو الضغط على Enter لتأكيد تنفيذ الأمر. أو النقر على الأمر لتنفيذه. في الحالات العادية، يمكننا ببساطة الضغط على Enter، وإذا لم تكن متأكدًا مما يجب فعله في هذه الخطوة، يمكنك التقاط لقطة شاشة للواجهة الحالية وسؤال النموذج الكبير عن كيفية المتابعة.
+:::
+
+كما هو موضح في الشكل، نحتاج هنا إلى النقر فوق Run للتأكيد:
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png)
+
+كما هو موضح في الشكل، نحتاج هنا فقط إلى إدخال y للتأكيد:
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png)
+
+كما هو موضح في الشكل، نحن هنا نقوم بإنشاء قالب، لكننا لا نعرف كيفية المتابعة، يمكننا التقاط لقطة شاشة لهذا الجزء وسؤال النموذج الكبير:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png)
+
+هناك سبب آخر لتوقف وكيل الذكاء الاصطناعي (AI Agent) أثناء التنفيذ وهو أنه تم بدء تشغيل "خدمة" في هذه المرحلة، ولعبة الثعبان الخاصة بنا في حد ذاتها تعتبر نوعًا من "الخدمات"، وإذا رأيت عنوان URL للأمر كما يلي، فهذا يعني أن الوكيل قد بدأ تشغيل خدمة محلية على الكمبيوتر لنا، ويمكننا زيارة عنوان URL المقابل للوصول إلى لعبة الثعبان الخاصة بنا، وبما أن الخدمة تحتاج إلى الاستمرار في العمل، فستتوقف هنا. نحتاج فقط إلى النقر فوق زر `Skip`.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png)
+
+أثناء هذه العملية، إذا واجهت بعض المصطلحات أو محتوى يصعب فهمه، فلا تقلق، يمكنك الرجوع إلى قسم "شرح المصطلحات الحاسوبية" في الملحق، أو سؤال الذكاء الاصطناعي مباشرة، أو طرح أسئلة في الوقت المناسب!
+
+إذا واجهت ظواهر غير متوقعة أثناء العملية، مثل عدم انتهاء اللعبة عند اصطدام الثعبان بالجدار، أو عدم تحرك الثعبان بعد النقر على "ابدأ"، فما عليك سوى وصف الظاهرة للوكيل (Agent) في الشريط الجانبي. وإذا واجهت رسائل خطأ، تذكر التقاط لقطة شاشة أو نسخ الخطأ إلى وكيل الشريط الجانبي، وإذا استمرت المشكلة دون حل بعد عدة محاولات، حاول تغيير النموذج.
+
+بعد لحظات قصيرة، يمكننا الحصول على نتيجة مشابهة لـ z.ai:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png)
+
+يمكننا النقر على علامة الصح في الزاوية اليمنى السفلية لتأكيد تغييرات الكود، أو النقر فوق زر `Cancel` لإلغاء التغييرات. أو النقر فوق 2 files need review لتوسيع وعرض الكود بعد التغيير.
+
+ومن الجدير بالملاحظة هنا أيضًا أنه نظرًا لأن تعديل الكود ليس صحيحًا بالضرورة، فنحن بحاجة إلى معرفة أن جميع وكلاء بيئات التطوير (IDE Agents) يدعمون التراجع عن الكود. على سبيل المثال، إذا قمت بإجراء تعديل خاطئ عن طريق الخطأ هنا، أو إذا كانت نتيجة هذه العملية غير مرضية لك، بعد انتهاء التعديل يمكننا العودة إلى جزء مربع الإدخال، والنقر على زر Revert للتراجع عن العملية إلى حالتها قبل التعديل، ويمكنك تعديل النص المدخل لإجراء عملية أخرى:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png)
+
+### 4.4 الخطوة الثالثة (اختياري): سؤال الذكاء الاصطناعي عن تفاصيل تنفيذ الكود
+
+عندما تصبح لعبة الثعبان قابلة للتشغيل بشكل طبيعي، إذا لم تكن ملمًا جدًا بالواجهة الأمامية أو React، يمكنك الاستمرار في نفس نافذة الدردشة، واطلب من الذكاء الاصطناعي مساعدتك في استعراض الكود بطريقة سهلة ومبسطة قدر الإمكان. لست بحاجة إلى التبديل بين الأدوات، ولا داعي للبحث في الوثائق عمدًا، فقط استمر في طرح الأسئلة حول المشروع الحالي.
+
+من الممارسات العملية الجيدة أن تطلب من الذكاء الاصطناعي شرح "كيف تتحرك اللعبة" بشكل عام أولاً، ثم الانتقال إلى التفاصيل الدقيقة. على سبيل المثال، يمكنك السؤال مباشرة:
+
+> "يُرجى الشرح من الأعلى إلى الأسفل، كيف تتحرك لعبة الثعبان هذه خطوة بخطوة؟ استخدم أقل قدر ممكن من المصطلحات التقنية."
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png)
+
+ثم تابع طرح الأسئلة على النقاط الرئيسية بناءً على إجابته، على سبيل المثال:
+> "كيف يتم تسجيل كل جزء من جسم الثعبان على الشاشة؟ بأي هيكل بيانات؟ هل يمكنك إعطاء مثال توضيحي؟"  
+> "كيف تتحكم في 'الحركة كل فترة زمنية'؟ أي جزء من الكود مسؤول عن ذلك؟"  
+> "عندما يأكل الثعبان الطعام، ما هي الخطوات التي تقوم بها؟ وفي أي جزء من المنطق يتم الحكم على أنه أكله؟"  
+> "الاصطدام بالجدار والاصطدام بنفسه، في أي أجزاء من الكود يتم الحكم على كل منهما؟"
+
+إذا رأيت ملفًا معينًا (مثل `SnakeGame.tsx`) ولكنك لا تعرف على الإطلاق ماذا يفعل، فيمكنك أيضًا أن تطلب من الذكاء الاصطناعي شرحه لك بشكل مقسم إلى كتل:
+
+> "يرجى شرح `SnakeGame.tsx` مقسمًا حسب الوظائف: ما المسؤول عنه كل كتلة تقريبًا، باستخدام مصطلحات أبسط."
+
+في هذه الجولة من المحادثة، يمكنك اعتبار كل كلمة لا تفهمها مدخلًا لسؤال متابع، على سبيل المثال:
+
+> "ماذا تقصد بـ 'الحالة' التي ذكرتها للتو؟ هل يمكنك تفسيرها بمثال من الحياة اليومية؟"  
+> "ما هو الغرض الرئيسي من 'المؤقت' الذي ذكرته هنا؟ ماذا سيحدث إذا أزلناه؟"
+
+من خلال هذه الطريقة، هدفك ليس حفظ جميع المفاهيم دفعة واحدة، بل توضيح ثلاثة أشياء أولاً: ما هي البيانات الأساسية في هذه اللعبة (الثعبان، الطعام، النقاط، حالة اللعبة، إلخ)، متى تتغير هذه البيانات (عند الحركة، أكل الطعام، انتهاء اللعبة، إلخ)، وأي جزء صغير من الكود يتوافق مع كل تغيير. طالما تم توضيح هذه النقاط الثلاث، يمكنك بشكل أساسي فهم المنطق الرئيسي لهذا الكود.
+
+### 4.5 الخطوة الرابعة: دع الذكاء الاصطناعي يجعل الواجهة أجمل
+
+هنا نود تنبيهك أولاً لأمر مهم جدًا للمبتدئين: لا تقل للذكاء الاصطناعي فقط "أريد أن أجعل هذه الواجهة أجمل". هذا التعبير غامض جدًا حتى على المصممين البشر، فما بالك بالذكاء الاصطناعي — ما هو الأسلوب الذي تعنيه بـ "أجمل"؟ ما هي الأجزاء التي تحتاج إلى تعديل؟ هل المشكلة في التخطيط أم في الألوان؟ الذكاء الاصطناعي لا يمكنه استنتاج كل ذلك من جملتك هذه. لجعل الذكاء الاصطناعي ينتج حقًا شيئًا قريبًا مما تتخيل، تحتاج إلى تعلم كيفية تفكيك الهدف الغامض "أريد أن تبدو جميلة" إلى سلسلة من المتطلبات الصغيرة المحددة والقابلة للتنفيذ.
+
+على سبيل المثال، سيقول الكثير من الناس في البداية هكذا:
+
+> "أريد أن أجعل هذه الواجهة أجمل قليلاً."
+
+على سبيل المثال، يمكنك أولاً تقديم مجموعة من المتطلبات العامة:
+
+> "ساعدني في تحسين واجهة اللعبة بشكل عام:
+>
+> - عرض منطقة اللعبة في الوسط، ولا تضعها في الزاوية اليسرى العليا؛
+> - تغيير لون الخلفية إلى لون أفتح، لجعل الثعبان والطعام أكثر بروزًا؛
+> - تكبير النقاط ووضعها في مكان واضح؛
+> - استخدام اللون الأزرق كلون رئيسي، وتحسين الألوان والأزرار بشكل عام."
+
+إذا كنت تأمل في الحصول على ردود فعل أوضح عند "انتهاء اللعبة"، يمكنك إضافة المزيد من التفاصيل:
+
+> "عندما تنتهي اللعبة، يرجى عرض 'انتهت اللعبة' في وسط الشاشة، مع زر 'إعادة البدء' تحته، يمكنه إعادة ضبط اللعبة."
+
+سيقوم الذكاء الاصطناعي بناءً على وصفك بتعديل مكونات React والأنماط مباشرة. بعد الحفظ، قم بتحديث المتصفح، وستتمكن من رؤية الواجهة الجديدة. إذا كان لا يزال هناك فارق بين التأثير وما تخيلته، يمكنك الاستمرار في إجراء تعديلات صغيرة خطوة بخطوة، على سبيل المثال:
+
+> "اجعل النقاط أكبر قليلاً، واللون أكثر بروزًا."  
+> "اجعل منطقة اللعبة أكثر تماسكًا قليلاً، مع ترك مساحة بيضاء صغيرة حولها."  
+> "غيّر زر إعادة البدء إلى نمط أزرق بزوايا دائرية، وضعه في الوسط أسفل الرسالة."
+
+في هذه المرحلة، إذا تسبب أي تعديل في ظهور خطأ، فلا داعي للبحث عنه بنفسك. فقط انسخ رسالة الخطأ إلى نافذة الدردشة، أو أضف وصفًا موجزًا، مثل "هذا هو الخطأ الذي ظهر بعد أن قمت بتحسين الواجهة للتو"، ودع الذكاء الاصطناعي يساعدك في تحديد مكان المشكلة وإصلاحها في سياق المشروع الحالي. بهذه الطريقة، يمكنك من خلال حلقة مستمرة من "المحادثة والتحديث" صقل العرض التجريبي (Demo) الذي يعمل تدريجيًا إلى منتج صغير بواجهة واضحة وتفاعل سلس.
+
+### 4.6 (اختياري) الرجوع إلى بنية z.ai لتعديل نتيجة لعبة الثعبان
+
+بالنسبة لمبتدئي البرمجة بالذكاء الاصطناعي (vibe coding)، فإن أصعب شيء هو في الواقع عدم معرفة ما يُعد "أفضل ممارسة"، وعدم معرفة البنية الأنسب؛ وبسبب عدم المعرفة بأساسيات الحاسوب، لا يمكن توجيه الذكاء الاصطناعي بشكل جيد. طريقة حل هذه المشكلة هي "الرجوع مباشرة إلى نموذج"؛ هل تتذكر ما قلناه سابقًا عن إمكانية عرض الكود في z.ai؟ في الواقع، تم بالفعل تقديم مرجع لأفضل بنية في README (الجزء الخاص بتقديم الوظائف والبنية التقنية في المشروع):
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png)
+
+نريد أن نجعل النتيجة المحلية تتطابق قدر الإمكان مع نتيجة z.ai، يمكننا نسخ المحتوى الكامل لـ README هذا ولصقه في الشريط الجانبي لـ Trae، وجعله يعدل الكود المحلي بناءً على بنية README.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png)
+
+أخيرًا، يمكننا الحصول على نمط تصميم صفحة مشابه جدًا لـ z.ai:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'التعرف على البيئة', description: 'فهم IDE و AI IDE' },
+      { title: 'تطبيق عملي محلي', description: 'استخدام Trae لبناء لعبة الثعبان' },
+      { title: 'شرح مفصل للأدوات', description: 'التعرف على واجهة IDE' },
+      { title: 'مهارات التواصل', description: 'التحدث بكفاءة مع الذكاء الاصطناعي' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 5. ما هي وظيفة كل زر في الواجهة
+
+في العمليات المذكورة أعلاه، أكملنا بسرعة حلقة إنشاء البرامج المصغرة، لكننا لا نزال لا نعرف الكثير عن بيئة التطوير (IDE). من أجل التعرف بدقة على هذه الأداة التي سترافقنا لفترة طويلة. سنقوم في هذا القسم بشرح مفصل لكل تفصيلة في بيئة التطوير، ونبدأ بالواجهة. تختلف واجهات بيئات التطوير بالذكاء الاصطناعي قليلاً، لكن معظمها يتبع [تخطيط VS Code](https://code.visualstudio.com/docs/getstarted/getting-started).
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp)
+
+الوظيفة المحددة لكل جزء هي:
+
+- **Title Bar (شريط العنوان)**: يعرض اسم الملف وأزرار التحكم بالنافذة.
+- **Activity Bar (شريط النشاط)**: للتبديل بين طرق عرض الملفات والبحث والوظائف الأخرى.
+- **Side Bar (الشريط الجانبي)**: يعرض محتويات محددة مثل قائمة الملفات.
+- **Editor Groups (منطقة التحرير)**: المنطقة الأساسية لكتابة الكود.
+- **Breadcrumbs (مسار التنقل)**: يعرض مسار الملف ويدعم الانتقال السريع.
+- **Minimap (خريطة الكود المصغرة)**: للمعاينة السريعة وتحديد موقع الكود.
+- **Panel (اللوحة السفلية)**: تحتوي على نافذة الطرفية والمخرجات.
+- **Status Bar (شريط الحالة)**: يعرض حالة البيئة الحالية.
+
+للحصول على شرح أكثر تفصيلاً، يرجى الاطلاع على [قسم مبادئ IDE الافتراضي والمرئي في الملحق](/zh-cn/appendix/2-development-tools/ide-basics).
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'التعرف على البيئة', description: 'فهم IDE و AI IDE' },
+      { title: 'تطبيق عملي محلي', description: 'استخدام Trae لبناء لعبة الثعبان' },
+      { title: 'شرح مفصل للأدوات', description: 'التعرف على واجهة IDE' },
+      { title: 'مهارات التواصل', description: 'التحدث بكفاءة مع الذكاء الاصطناعي' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 6. كيف تتحدث مع الذكاء الاصطناعي بفعالية
+
+مع تزايد قدرات الذكاء الاصطناعي، أصبح بإمكاننا تسليم الكثير من أعمال "جعل المبرمجين يكتبون الكود" إلى الذكاء الاصطناعي.  
+ولكن، في الاستخدام الفعلي ستكتشف: باستخدام نفس الذكاء الاصطناعي، يمكن لبعض الأشخاص الحصول على مشروع صغير يعمل بجمل قليلة، بينما يتحدث آخرون لفترة طويلة وتكون النتيجة مختلفة تمامًا عما يريدون. غالبًا لا يكمن الاختلاف في "من هو أذكى"، بل في — طريقتك في التحدث مع الذكاء الاصطناعي، هل هي محددة كفاية؟ هل تتبع خطوات كافية؟  
+في هذا القسم، سننطلق من عدة سيناريوهات شائعة لنقدم بعض طرق طرح الأسئلة المناسبة تمامًا للمبتدئين، لمساعدتك على جعل الذكاء الاصطناعي يقدم نتائج قابلة للاستخدام بشكل أكثر استقرارًا.
+
+### 6.1 اشرح احتياجاتك بوضوح: من "الفكرة الغامضة" إلى "الوصف المحدد"
+
+كثير من الناس عند استخدام الذكاء الاصطناعي لأول مرة، يعتادون على قول جملة عامة جداً، مثل:
+
+> "ساعدني في عمل صفحة ويب."  
+> "ساعدني في كتابة برنامج صغير."
+
+في هذه الحالة، يمكن للذكاء الاصطناعي فقط "تخيل" ما تريده، لذا سيعطيك شيئًا يبدو مكتملًا، ولكنه غالبًا ما يختلف كثيرًا عما تريد فعله حقًا.  
+لجعل الذكاء الاصطناعي يفهمك بشكل أفضل، تحتاج إلى تفكيك "الأفكار في رأسك" وشرحها خطوة بخطوة في بضع جمل.
+
+يمكنك البدء بإضافة التفاصيل من هذه الجوانب:
+
+1. **أخبره بما ستستخدمه من أجله**  
+   على سبيل المثال، لا تقل فقط "موقع شخصي"، بل قل:
+   - "أريد إنشاء صفحة ويب لمحة شخصية من صفحة واحدة فقط، لإرسالها إلى مسؤولي التوظيف."
+2. **أخبره بالأقسام الرئيسية التي تحتاجها تقريبًا**  
+   لا داعي لاستخدام مصطلحات تقنية، فقط صف ما تريد أن يظهر على الصفحة، مثل:
+   - "يجب أن تحتوي الصفحة على ثلاثة أجزاء: الأعلى هو الاسم وجملة تعريفية عن النفس، والوسط يعرض عدة خبرات عمل، والأسفل يضع البريد الإلكتروني ورقم WeChat."
+
+3. **أخبره بمستواك وقيودك**  
+   اجعل AI يعمل بطريقة يفهمها المبتدئ تمامًا، مثل:
+   - "أنا لا أعرف كيفية كتابة التعليمات البرمجية على الإطلاق، يرجى استخدام أبسط طريقة فقط، حتى أتمكن من نسخها مباشرة إلى ملف وفتحه في المتصفح."
+
+4. **أخبره كيف تريد استلام النتيجة**  
+   على سبيل المثال:
+   - "يرجى إعطائي كود كامل يمكن حفظه مباشرة كـ `index.html` وفتحه في المتصفح."
+
+بدمج كل ذلك معًا، يمكنك أن تقول لـ AI ما يلي:
+
+> "أنا لا أعرف كيفية كتابة التعليمات البرمجية على الإطلاق، وأريد إنشاء صفحة ويب لملف شخصي تحتوي على صفحة واحدة فقط، لإرسالها إلى مسؤولي التوظيف لرؤيتها.  
+> تحتاج الصفحة إلى ثلاثة أجزاء: السطر العلوي هو الاسم وجملة تعريفية عن النفس، والوسط هو عدة خبرات عمل، والأسفل هو البريد الإلكتروني ورقم WeChat.
+
+عندما توضح هذه المعلومات، سيتمكن AI من الاقتراب أكثر من احتياجاتك الحقيقية، بدلاً من إعطائك شيئًا "يبدو رائعًا ولكنك لا تستطيع استخدامه".
+
+### 6.2 التحكم في الوتيرة: اجعلها "تعمل أولاً"، ثم اجعلها معقدة تدريجيًا
+
+بالنسبة للمبتدئين تمامًا، فإن الفخ الأكثر شيوعًا هو: الرغبة في إنشاء شيء "كامل جدًا" و"ذو وظائف كثيرة" من البداية.  
+مثل:
+
+> "ساعدني في إنشاء موقع ويب مثل Taobao."  
+> "ساعدني في إنشاء نظام يمكنه التسجيل وتسجيل الدخول ووضع الطلبات."
+
+النتيجة غالبًا هي: يعطيك AI كومة كبيرة من التعليمات البرمجية، وبعد نسخها إما لا تفتح، أو تظهر أخطاء في كل مكان؛ ولا يمكنك فهم أين تكمن المشكلة، وفي النهاية تستسلم.
+
+النهج الأنسب هو **التحكم في الوتيرة بنشاط**، وجعل AI يتبعك خطوة بخطوة، بدلاً من إلقاء كل شيء عليك دفعة واحدة. يمكنك تقديم المتطلبات بالترتيب التالي:
+
+1. **الخطوة الأولى: اطلب أولاً "أصغر مثال"**  
+   تحقق من شيء واحد فقط: هل يمكنك رؤية شيء ما في المتصفح.  
+   على سبيل المثال:
+
+   > "يرجى إعطائي أبسط مثال أولاً، طالما أنني أستطيع رؤية سطر 'هذه صفحتي الرئيسية' في المتصفح.  
+   > ثم أخبرني خطوة بخطوة: ما يجب أن يسمى اسم الملف، وكيف يجب حفظه، وكيف تفتحه."
+
+2. **الخطوة الثانية: على هذا الأساس، أضف المحتوى ببطء حتى يكتمل**  
+   عندما تتأكد من "أنني أستطيع بالفعل رؤية ذلك السطر"، قل:
+
+   > "على أساس ما سبق، ساعدني في إضافة منطقة 'خبرات العمل'، وأعد إرسال الكود الكامل إلي. لا ترسل الجزء المعدل فقط."
+
+3. **الخطوة الثالثة: بعد أن يصبح الهيكل جاهزًا تقريبًا، فكر فيما إذا كان يبدو جيدًا**  
+   على سبيل المثال:
+   > "الآن يمكن للصفحة عرض المحتوى بشكل طبيعي. بعد ذلك، يرجى مساعدتي في تحسينها قليلاً: توسيط المحتوى بالكامل، جعل العنوان أكبر قليلاً، واستخدام خط مريح. يرجى إعطائي الكود الكامل المحدث."
+
+مع كل إضافة، تقوم بتشغيلها مرة واحدة أولاً، وتتأكد من حدوث تغيير فعلي، ثم تطلب من AI إضافة المزيد. بهذه الطريقة، حتى لو حدثت مشكلة في خطوة معينة، يمكنك العودة بسرعة إلى حالة "الإصدار السابق كان يعمل بشكل طبيعي"، بدلاً من الاضطرار إلى الهدم بالكامل والبدء من جديد.
+
+### 6.3 استخدم لقطات الشاشة والنسخ بحكمة: إذا لم تكن تعرف كيف تقولها، "ألقِ الشاشة لـ AI"
+
+تكمن الصعوبة التي يواجهها الكثير من المبتدئين تمامًا ليس في "عدم معرفة كيفية تعديل الكود"، بل في **عدم معرفة كيفية التعبير عن المشكلة**.  
+مثل:
+
+- فجأة يظهر في المتصفح مجموعة كبيرة من رسائل الخطأ باللغة الإنجليزية، التي لا تفهمها على الإطلاق.
+- تخطيط صفحة الويب ليس كما تريد، لكنك لا تعرف ما هي الكلمات التي يجب استخدامها لوصفه.
+
+في هذه الحالات، لا داعي لاستخراج المصطلحات التقنية بالقوة، أسهل طريقة هي —— **إعطاء ما تراه لـ AI كما هو**.
+
+يمكنك القيام بذلك:
+
+1. **انسخ نص الخطأ**  
+   عندما ترى سلسلة من رسائل الخطأ الحمراء، يمكنك نسخها مباشرة، ثم تقول:
+
+   > "هذه رسالة الخطأ الكاملة التي ظهرت بعد التشغيل. لا أفهم هذه الإنجليزية، يرجى شرحها أولاً بكلمات يفهمها الشخص العادي، ماذا تعني تقريبًا.  
+   > ثم أخبرني، ما هو أبسط تعديل يجب أن أقوم به الآن."
+
+2. **أظهر لقطة الشاشة لـ AI**
+   إذا شعرت أن "هذه الصفحة تبدو خاطئة"، لكنك لا تعرف كيف تصفها، يمكنك:
+   - التقاط لقطة شاشة للصفحة الحالية؛
+   - نسخ الكود الذي تستخدمه بالكامل إلى AI؛
+   - ثم توضح:
+     > "هذا هو شكل الصفحة الآن، وهذا هو الكود الكامل لدي.
+     > كنت أتمنى في الأصل أن يكون التخطيط بثلاثة أعمدة، لكنه أصبح الآن بعمود واحد. يرجى مساعدتي في معرفة السبب، وإعطائي كود كامل معدل."
+
+   ::: tip 💡 ملاحظة تكميلية حول وظيفة لقطة الشاشة
+
+   تجدر الإشارة إلى أن **ليس كل نماذج AI تدعم "رؤية الصور"**. هذا يتضمن مفهومين مختلفين:
+
+   - **نماذج اللغة الكبيرة النصية البحتة (LLM)**: يمكنها فقط معالجة الإدخال النصي، ولا يمكنها التعرف على محتوى الصور. إذا أرسلت لها لقطة شاشة، فإما ترفض المعالجة، أو لا تستطيع فهم المعلومات الموجودة في الصورة بشكل صحيح.
+
+   - **النماذج متعددة الوسائط**: يمكنها معالجة أنواع متعددة من المدخلات مثل النصوص والصور في نفس الوقت، ويمكنها "فهم" لقطة الشاشة التي أرسلتها، وتقديم اقتراحات بناءً على محتوى الصورة.
+
+   **مرجع قدرات النماذج الشائعة** (بأخذ النماذج المتاحة في Trae كمثال):
+
+   | النموذج | هل يدعم إدخال الصور |
+   |------|-----------------|
+   | سلسلة Doubao-Seed | ✅ يدعم |
+   | GLM-4.7 / 4.6 | ❌ لا يدعم |
+   | MiniMax-M2.7 / M2.5 | ❌ لا يدعم |
+   | DeepSeek-V3.1 | ❌ لا يدعم |
+   | Kimi-K2.5 | ✅ يدعم |
+   | Kimi-K2-0905 | ❌ لا يدعم |
+   | Qwen-3-Coder | ❌ لا يدعم |
+   | سلسلة Gemini | ✅ يدعم |
+   | سلسلة GPT | ✅ يدعم |
+
+   **اقتراحات للاستخدام**: إذا كنت تريد من AI مساعدتك في فحص مشاكل الواجهة من خلال لقطة الشاشة، يرجى التأكد أولاً من أن النموذج الذي تستخدمه يدعم إدخال الصور. إذا لم يكن يدعم، يمكنك استخدام وصف نصي للمشكلة، أو نسخ رسالة الخطأ ولصقها لـ AI.
+
+   :::
+
+3. **عندما تصادف صفحة ويب تعجبك وتريد إنشاء شيء مشابه**  
+   لا داعي لقول "ما هو اسم هذا التخطيط"، فقط:
+   - التقط لقطة شاشة أو انسخ العناوين الرئيسية والفقرات لتلك الصفحة؛
+   - ثم قل:
+     > "أريد إنشاء صفحة بهيكل مشابه لهذا، لا تحتاج إلى أن تكون متطابقة تمامًا.  
+     > يرجى مساعدتي في بناء إطار مشابه باستخدام كود أبسط، ثم سأقوم باستبدال النصوص بنفسي."
+
+باختصار: أنت مسؤول عن "نقل ما تراه إلى AI"، ثم تستخدم أبسط الكلمات لتقول "كيف أريد أن يبدو"؛ أما الباقي من "ترجمة إلى كود، وشرح المصطلحات، وإيجاد المشاكل"، فاتركه لـ AI.
+
+### 6.4 عندما لا يعمل الكود الذي أنشأه AI: مجموعة طرق تعامل عامة
+
+في الممارسة الفعلية، ستواجه بالتأكيد هذا الموقف:  
+يعطيك AI كودًا بجدية، وأنت تنسخه بأمانة، لكن النتيجة إما أن تكون المتصفح فارغًا تمامًا، أو أنه ليس التأثير الذي قاله على الإطلاق.  
+هذا لا يعني أنك "لا تستطيع التعلم"، ولا يعني أن AI مخطئ تمامًا، بل إنه لا يزال هناك عدد قليل من جولات "التأكيد المتبادل" بينكما.
+
+عندما "لا يعمل" الكود، يمكنك اتباع مجموعة العمليات الثابتة التالية للتحدث مع AI:
+
+1. **أوضح أولاً "ماذا فعلت + كيف يبدو الآن"**  
+   تجنب قول "لا يفتح" أو "لا يعمل" فقط. يمكنك وصفه هكذا:
+
+   > بعد الفتح، الصفحة فارغة تمامًا، ولم تظهر كلمة الترحيب التي قلتها.
+   > فتحت صفحة xxxx، ولا يوجد فيها الجزء الذي ذكرته للتو، هذا لا يمكن استخدامه
+
+2. **أرسل الكود الكامل الحالي لـ AI**  
+   في كثير من الأحيان تكمن المشكلة في: نسخ سطر أقل، أو اختلاط محتوى المرة السابقة مع محتوى هذه المرة.  
+   يمكنك أن تقول:
+
+   > "فيما يلي كل الكود الموجود في ملفي حاليًا.  
+   > يرجى المقارنة لمعرفة ما إذا كان هناك شيء مفقود، أو مكتوب بشكل خاطئ، أو ترتيب غير صحيح.  
+   > يرجى إعطائي كود كامل مصحح مباشرة، لا ترسل جزءًا صغيرًا فقط."
+
+3. **إذا كانت هناك رسائل خطأ، قدمها معًا**  
+   مثل الأخطاء التي تظهر في الزاوية العلوية اليمنى من المتصفح، أو بعض النصوص الحمراء في الأسفل. يمكنك:
+   - نسخ نص الخطأ؛
+   - أو التقاط لقطة شاشة؛
+   - ثم تقول:
+     > "هذه رسالة الخطأ التي أراها. لا أفهمها على الإطلاق، يرجى شرح ما هي المشكلة تقريبًا بطريقة بسيطة أولاً، ثم أخبرني ما هي الأسطر التي أحتاج إلى تعديلها الآن."
+
+4. **اطلب منه أن يشرح خطوة بخطوة باستخدام "وضع المبتدئ"**  
+   يمكنك توضح وضعك مباشرة، وجعله لا يحذف الخطوات الوسيطة:
+
+   > "أنا لا أعرف كيفية كتابة التعليمات البرمجية على الإطلاق، يرجى إخباري خطوة بخطوة:  
+   > في الخطوة 1 أي سطر يجب تعديله،  
+   > في الخطوة 2 كيف أحفظ،  
+   > في الخطوة 3 كيف أعد فتح الصفحة أو تحديثها.  
+   > يرجى كتابة كل خطوة بجمل كاملة."
+
+5. **أخيرًا، اطلب منه مساعدتك في عمل "مقارنة لما يجب أن تراه"**  
+   على سبيل المثال:
+   > يرجى قول ذلك أولاً، وفقًا للكود الذي قمت بتعديله، ماذا يجب أن أرى عادةً عند فتح صفحة الويب.
+
+طالما أنك تتفاعل مع AI وفقًا لهذه العملية، يمكن حل معظم حالات "الكود لا يعمل" في بضع جولات من التفاعل.  
+في نفس الوقت، ستتعرف تدريجيًا على أنواع المشاكل الشائعة، ويمكنك حلها مباشرة في المرة القادمة التي تواجه فيها موقفًا مشابهًا.
+
+## 7. ملخص والخطوة التالية
+في هذا الفصل، أتممتَ ترقية من "القدرة على لعب لعبة ثعبان مُولّدة بالذكاء الاصطناعي داخل صفحة ويب" إلى "القدرة على بناء لعبة صغيرة بنفسك محليًا باستخدام بيئة تطوير متكاملة مدعومة بالذكاء الاصطناعي". لقد فهمتَ ثلاثة أمور بشكل عام: لماذا لا يمكن الاستغناء عن بيئة تطوير متكاملة مثل VS Code عند كتابة التعليمات البرمجية؛ وبناءً على ذلك، عند إضافة الذكاء الاصطناعي (مثل Trae، Cursor، وغيرها)، لم تعد بيئة التطوير مجرد صندوق أدوات، بل أصبحت بمثابة "مهندس متدرب" قادر على فهم اللغة الطبيعية، ومساعدتك في إنشاء الملفات، وإعداد البيئة، وتعديل الكود؛ وما هي وظيفة كل منطقة في واجهة بيئة التطوير (الملفات على اليسار، الطرفية في الأسفل، منطقة التحرير في الوسط، ولوحة الذكاء الاصطناعي على اليمين)، وبالتالي لم تعد تشعر بالحيرة عند استخدامها.
+
+والأهم من ذلك، أنك نفّذتَ بالفعل عملية كاملة: إنشاء مجلد فارغ محليًا ← فتحه باستخدام بيئة تطوير مدعومة بالذكاء الاصطناعي ← وصف المتطلبات في المحادثة الجانبية ← السماح للذكاء الاصطناعي بتوليد المشروع وتشغيل خادم التطوير ← عند ظهور مشاكل، إرسال "الظاهرة + الكود بالكامل + لقطة شاشة للخطأ" إلى الذكاء الاصطناعي، وطلب منه إصلاحها خطوة بخطوة في "وضع المبتدئين". خلال هذه العملية، تدربتَ أيضًا على كيفية كتابة مطالبات أكثر فعالية: توضيح الهدف، وهيكل المحتوى، ومستوى خبرتك، والتحكم في الوتيرة، والانتقال من "جعلها تعمل أولاً" إلى "جعلها تبدو جميلة وممتعة".
+
+في الفصل التالي، سننقل التركيز من "معرفة كيفية استخدام الأدوات" إلى "بناء نموذج أولي يرغب الناس فعلاً في استخدامه": البدء من منظور المستخدم، وتصميم القواعد، والتفاعلات، والتغذية الراجعة، ثم السماح للذكاء الاصطناعي بمساعدتك في تحويل هذه الأفكار إلى نموذج مبدئي للمنتج.
+
+## 8. 📚 واجب: بناء لعبة أكثر تعقيدًا باستخدام بيئة تطوير متكاملة محلية مدعومة بالذكاء الاصطناعي
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 مهمة تحدّي: اصنع لعبتك الخاصة</div>
+  </template>
+
+  <p>
+    لقد قمت سابقًا ببناء لعبة ثعبان باستخدام بيئة تطوير متكاملة محلية مدعومة بالذكاء الاصطناعي. والآن يُرجى تحدي نفسك ببناء لعبة صغيرة أكثر تعقيدًا، مع المرور بالعملية الكاملة المتمثلة في "وصف المتطلبات ←
+    توليد المشروع ← التشغيل محليًا ← التصحيح والتكرار".
+  </p>
+
+  <ol>
+    <li>
+      <strong>اختر لعبة أكثر تعقيدًا من لعبة الثعبان</strong>
+      <ul>
+        <li>يمكن أن تكون "تيتريس" أو "اضرب الخلد" أو "كاسحة الألغام" أو "2048" أو "حرب الطائرات" وما إلى ذلك</li>
+        <li>أو لعبة أصلية بسيطة من تخيلك</li>
+      </ul>
+    </li>
+    <li>
+      <strong>يجب استخدام بيئة تطوير متكاملة محلية مدعومة بالذكاء الاصطناعي لإكمال العملية بالكامل</strong>
+      <ul>
+        <li>إنشاء مجلد فارغ جديد، وفتحه باستخدام بيئة التطوير المدعومة بالذكاء الاصطناعي</li>
+        <li>وصف متطلبات اللعبة بوضوح في المحادثة الجانبية</li>
+        <li>السماح للذكاء الاصطناعي بإنشاء الملفات، وبناء هيكل المشروع، وتنفيذ المنطق الأساسي</li>
+        <li>تشغيل خادم التطوير محليًا، والتأكد من أن اللعبة تعمل بشكل صحيح</li>
+      </ul>
+    </li>
+    <li>
+      <strong>يجب أن تحتوي على "قابلية اللعب" والتغذية الراجعة الأساسية</strong>
+      <ul>
+        <li>يجب أن تتضمن ثلاث حالات على الأقل: البداية، قيد التقدم، والنهاية</li>
+        <li>يجب أن يكون لدى اللاعب طريقة تشغيل واضحة (لوحة المفاتيح أو الماوس)</li>
+        <li>يجب أن تكون هناك تغذية راجعة واضحة على الشاشة للنتيجة أو التقدم</li>
+      </ul>
+    </li>
+    <li>
+      <strong>القيام بجولتين (2) من التكرار على الأقل</strong>
+      <ul>
+        <li>في الجولة الأولى، دع الذكاء الاصطناعي يصنع نسخة "قابلة للعب"</li>
+        <li>بعد الجولة الثانية، ابدأ تدريجيًا في اقتراح تحسينات محددة (الأنماط، الصعوبة، تحسين التفاعل، إلخ)</li>
+      </ul>
+    </li>
+  </ol>
+</el-card>
+
+<RelatedArticlesSection
+  title="تابع التعلم"
+  description="يُنصح بالبدء بالتطبيق العملي للنماذج الأولية أولاً، ثم دمج قدرات الذكاء الاصطناعي تدريجيًا."
+  :items="relatedArticles"
+/>
+
+# الملحق
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
+  <div style="font-weight: bold; margin-bottom: 8px;">تنقل في الملحق</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    هنا توجد مواد تكميلية "للاستشعار عند الحاجة": عُد إليها عندما تواجه مصطلحات لا تفهمها، أو لم تجد مدخلاً لواجهة معينة.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1-map" style="text-decoration: none; color: inherit;"><b>الملحق الأول: جدول مرجعي سريع للمصطلحات الحاسوبية الشائعة</b></a><br/>
+      <span style="font-size: 12px; color: #909399">عندما تصادف مصطلحًا حاسوبيًا لا تفهمه، تعال هنا للبحث السريع عن معناه. يُنصح بقراءته بالكامل مرة واحدة.</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>الملحق الثاني: تحليل شريط القوائم في Visual Studio Code</b></a><br/>
+      <span style="font-size: 12px; color: #909399">عندما لا تعرف ما فائدة واجهة بيئة التطوير المدعومة بالذكاء الاصطناعي، استخدم المحتوى التالي للمحادثة مع الذكاء الاصطناعي والبحث فيه، أو قم بعرضه مباشرة.</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    الدعم: اضغط على Ctrl/⌘+F للبحث عن كلمات مفتاحية؛ عند مواجهة كلمات جديدة، يمكنك نسخ رسالة الخطأ وطلب من الذكاء الاصطناعي شرحها في "وضع المبتدئين".
+  </div>
+</el-card>
+
+# الملحق الأول: جدول مرجعي سريع للمصطلحات الحاسوبية الشائعة
+
+<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: bold; margin-bottom: 10px;">🗺️ خريطة المصطلحات: ما الذي ستواجهه هنا...</div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;">🖥️ <b>واجهة الأدوات</b></a><br/>
+      <span style="font-size: 12px; color: #909399">IDE / الطرفية / اللوحة</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-network" style="text-decoration: none; color: inherit;">🌐 <b>خدمات الشبكة</b></a><br/>
+      <span style="font-size: 12px; color: #909399">URL / المنفذ / المحلي</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;">⚙️ <b>الواجهة الأمامية والخلفية</b></a><br/>
+      <span style="font-size: 12px; color: #909399">API / JSON / واجهة</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-code-basic" style="text-decoration: none; color: inherit;">📝 <b>أساسيات الكود</b></a><br/>
+      <span style="font-size: 12px; color: #909399">متغيرات / دوال / مكونات</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" style="margin-top: 10px;">
+    <el-col :span="6">
+      <a href="#term-debug" style="text-decoration: none; color: inherit;">🐞 <b>التصحيح والأخطاء</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Bug / نقاط التوقف / السجلات</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-project" style="text-decoration: none; color: inherit;">📂 <b>إدارة المشاريع</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Git / مستودع / التزام (Commit)</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;">🤖 <b>أدوات الذكاء الاصطناعي</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Agent / نموذج / مفتاح (Key)</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-browser" style="text-decoration: none; color: inherit;">🛠️ <b>المتصفح</b></a><br/>
+      <span style="font-size: 12px; color: #909399">DevTools / وحدة التحكم</span>
+    </el-col>
+  </el-row>
+</el-card>
+
+لا تحتاج إلى حفظ هذا القسم عن ظهر قلب، الأهم هو بناء انطباع أولي في ذهنك.
+
+## <span id="term-tool-ui">[أولاً: المصطلحات المتعلقة بـ "واجهة الأداة"](#appendix-1-map)</span>
+
+### 1. IDE، المحرر، الطرفية
+
+**IDE (بيئة التطوير المتكاملة)**  
+يمكنك تخيل الـ IDE على أنه "مكتب عمل المبرمج":
+
+- من جهة هناك سطح للكتابة (المحرر)،
+- ومن جهة أخرى مقابس طاقة وأزرار (التشغيل، التصحيح)،
+- وفي الأدراج أدوات صغيرة متنوعة (البحث، إدارة الإصدارات).  
+  كل من VS Code و Trae و Cursor يعتبر بيئة تطوير متكاملة (IDE) أو أدوات معدلة بناءً عليها.
+
+**محرر الأكواد (Editor)**  
+أقرب ما يكون إلى "مفكرة متقدمة"، وهو مسؤول فقط عن:
+
+- السماح لك بالكتابة والبرمجة؛
+- استخدام الألوان للتمييز بين المحتوى المختلف (تلوين بناء الجملة)؛
+- تزويدك بالإكمال التلقائي.  
+  تلك المنطقة داخل الـ IDE التي تكتب فيها الكود، هي محرر الأكواد.
+
+**الطرفية / سطر الأوامر (Terminal / نافذة سطر الأوامر)**  
+نافذة بخلفية سوداء ونص أبيض، تقوم فيها **بإدخال الأوامر** لجعل الكمبيوتر ينفذ المهام:
+
+- مثلاً: `npm run dev` يعني "قم بتشغيل خادم التطوير من أجلي"؛
+- `python main.py` يعني "قم بتشغيل ملف البايثون هذا".  
+  يمكنك تخيلها على النحو التالي: "أنت ترسل رسائل نصية كأوامر إلى الكمبيوتر، وهو يرد عليك كتابياً بنتائج التنفيذ".
+
+### 2. عدة مناطق شائعة داخل الـ IDE
+
+**شريط النشاط (Activity Bar)**  
+الصف العمودي من الأيقونات الصغيرة في أقصى اليسار، يشبه "علامات التبويب الوظيفية":
+
+- النقر على أيقونة الملفات → يعرض قائمة الملفات على اليسار؛
+- النقر على أيقونة العدسة المكبرة → يتحول اليسار إلى نافذة بحث؛
+- النقر على أيقونة Git → يعرض إدارة الإصدارات على اليسار.
+
+**الشريط الجانبي (Side Bar)**  
+تلك المنطقة الكبيرة إلى يمين شريط النشاط، وهي مخصصة لعرض المحتوى الخاص بالوضع الحالي:
+
+- وضع الملفات: يعرض الملفات والمجلدات الموجودة في المشروع؛
+- وضع البحث: يعرض قائمة نتائج البحث؛
+- وضع إدارة الكود المصدري: يعرض الملفات التي تم تعديلها.
+
+**منطقة التحرير (Editor)**  
+أكبر منطقة في المنتصف، وهي المكان الذي تشاهد فيه المحتوى وتعدله فعلياً بعد فتح الملف؛  
+علامات التبويب (Tab) في الأعلى تمثل "الملفات المفتوحة حالياً".
+
+**اللوحة السفلية (Panel)**  
+عادةً في الأسفل، ولها عدة أنواع شائعة:
+
+- Terminal (الطرفية): لإدخال الأوامر وتشغيل المشروع؛
+- Problems (المشاكل): تسرد الملفات وأرقام الأسطر التي بها أخطاء؛
+- Output (المخرجات): معلومات التشغيل التي تطبعها بعض الأدوات؛
+- Debug Console (وحدة تحكم التصحيح): المخرجات أثناء عملية التصحيح.
+
+**شريط الحالة (Status Bar)**  
+ذلك الشريط الرفيع في الأسفل:
+
+- يعرض لغة الملف الحالي (JS، HTML، Python، إلخ)؛
+- يعرض المسافة البادئة سواء كانت "مسافتين" أم "4 مسافات"؛
+- يعرض ما إذا كانت هناك أخطاء، وما هو فرع Git الحالي.  
+  يمكنك اعتباره "تقريراً مصغراً عن حالة بيئة التحرير الحالية".
+
+## <span id="term-network">[ثانياً: المصطلحات المتعلقة بـ "الويب / الشبكة / الخدمات"](#appendix-1-map)</span>
+
+### 1. URL، http، المنفذ، الخدمة المحلية
+
+**URL (عنوان الويب)**  
+هي تلك السلسلة من الأحرف في شريط عنوان المتصفح، مثل:
+
+- `https://www.trae.cn/`
+- `http://localhost:3000/`  
+  إنه بمثابة "العنوان الكامل لغرفة ما في عالم الإنترنت".
+
+**HTTP / HTTPS**  
+ما تراه في بداية عنوان الويب `http://` أو `https://`:
+
+- HTTP: طريقة النقل العادية؛
+- HTTPS: تحتوي على طبقة تشفير إضافية، وهي أكثر أماناً.  
+  يمكنك تذكرها مؤقتاً على النحو التالي: "عند كتابة عنوان الويب، يبدأ عادةً بـ `http` أو `https`".
+
+**المنفذ (Port)**  
+يمكنك تخيل الكمبيوتر كمبنى، والمنفذ هو **رقم الغرفة**:
+
+- `:3000` يمثل الغرفة رقم 3000؛
+- على نفس الكمبيوتر، يمكن تشغيل عدة خدمات في نفس الوقت، وتحتل كل منها منفذاً مختلفاً.  
+  `http://localhost:3000` يعني "الوصول إلى الخدمة التي تعمل في الغرفة رقم 3000 على جهاز الكمبيوتر الخاص بي".
+
+**المحلي (Local / localhost)**  
+يشير إلى جهاز الكمبيوتر الخاص بك.
+
+- يمكن فهم `localhost` على أنه "هذا الجهاز نفسه".  
+  عندما تزور `http://localhost:3000`، فأنت في الواقع تتعامل مع برنامج يعمل على جهاز الكمبيوتر الخاص بك، بدلاً من الدخول إلى الإنترنت للوصول إلى خوادم الآخرين.
+
+**الخدمة (Service / Server)**  
+"الخدمة" هي برنامج **يعمل في الخلفية باستمرار، وينتظر تعليماتك في أي وقت**:
+
+- خدمة الويب: عندما يزور المتصفح عنواناً معيناً، تقوم بإرجاع محتوى صفحة الويب؛
+- خدمة الألعاب: مسؤولة عن إدارة المباريات، وحفظ التقدم، ولوحة المتصدرين، إلخ.  
+  إن تنفيذ الأمر `npm run dev` في الطرفية لتشغيل المشروع، هو في جوهره "فتح خدمة ويب محلية".
+
+## <span id="term-frontend-backend">[ثالثاً: المصطلحات المتعلقة بـ "الواجهة الأمامية / الخلفية / البيانات"](#appendix-1-map)</span>
+
+### 1. الواجهة الأمامية، الخلفية
+
+**الواجهة الأمامية (Frontend)**  
+الجزء الذي **يستطيع المستخدم رؤيته والنقر عليه**:
+
+- الأزرار، النصوص، الصور، والرسوم المتحركة على صفحة الويب؛
+- الصفحات المبرمجة باستخدام React / Vue.
+مسؤول عن عرض الواجهة والاستجابة لعمليات المستخدم (النقر، الإدخال، السحب والإفلات، إلخ).
+
+**الخلفية (Backend)**  
+الجزء الذي **لا يراه** المستخدم، والذي يعمل على الخادم:
+
+- تخزين وقراءة البيانات (معلومات المستخدم، الطلبات، النقاط، إلخ)؛
+- تنفيذ قواعد العمل (التحقق من تسجيل الدخول، التحقق من الصلاحيات).  
+  يمكنك تشبيه الواجهة الأمامية بـ "الواجهة والموظفين"، والخلفية بـ "المستودع ونظام الحسابات".
+
+### 2. واجهة برمجة التطبيقات (API)، الطلب، الاستجابة، JSON
+
+**واجهة برمجة التطبيقات / API**  
+مجموعة من القواعد "لطرح الأسئلة + تقديم الإجابات" تم الاتفاق عليها مسبقًا بين الواجهة الأمامية والخلفية.
+
+- الواجهة الأمامية تقول: "سأسألك باستخدام هذا العنوان وهذا التنسيق"؛
+- الخلفية تقول: "سأعيد لك النتائج بهذا التنسيق".
+
+**الطلب (Request)**  
+"سؤال" ترسله الواجهة الأمامية إلى الخلفية:
+
+- إلى أين يذهب الطلب (URL)؛
+- بأي طريقة (GET، POST، إلخ)؛
+- ما هي المعاملات المرفقة (مثل معرف المستخدم).
+
+**الاستجابة (Response)**  
+"الرد" من الخلفية إلى الواجهة الأمامية:
+
+- رمز الحالة (200 للنجاح، 404 غير موجود، 500 خطأ في الخادم)؛
+- البيانات الفعلية (في الغالب تكون بصيغة JSON).
+
+**JSON**  
+تنسيق لتمثيل البيانات **باستخدام طريقة كتابة تشبه جداً كود JavaScript**، على سبيل المثال:
+
+```json
+{
+  "name": "Alice",
+  "score": 120
+}
+```
+
+يمكن فهمها على أنها "نسخة الآلة من دفتر ملاحظات أزواج المفاتيح والقيم"، وتستخدمها الواجهة الأمامية والخلفية بشكل متكرر لتبادل البيانات.
+
+## <span id="term-code-basic">[رابعًا: مصطلحات تتعلق بـ "كتابة الكود" بحد ذاته](#appendix-1-map)</span>
+
+### 1. المتغير، المُعرّف، الحالة
+
+**المتغير (Variable)**  
+"ملصق يُلصق على قطعة من البيانات".
+
+- على سبيل المثال، تسجيل شيء مثل النقاط باسم `score`؛
+- لاحقًا، باستخدام اسم `score`، يمكنك قراءة وكتابة هذه البيانات:
+
+```js
+let score = 0
+score = score + 10
+```
+
+**المُعرّف (Identifier)**  
+اسم شامل لـ "جميع الأسماء التي تختارها بنفسك":
+
+- اسم المتغير: `score`
+- اسم الدالة: `moveSnake`
+- اسم المكون: `SnakeGame`  
+  الأمر يشبه تسمية المجلدات "صور" "عمل" "فواتير"، لتسهيل التمييز بين "الأشياء" المختلفة في الكود.
+
+**الحالة (State)**  
+"سجل الحالة الرئيسية" الحالي للبرنامج:
+
+- هل انتهت اللعبة أم لا؛
+- في أي خلية توجد الأفعى الآن؛
+- كم عدد النقاط الحالية.  
+  في React، يتم الفهم بشكل عام على النحو التالي: **بمجرد تغير الحالة، يجب أن تتحدث الواجهة وفقًا لذلك**.
+
+### 2. الدالة، المكون، الوحدة
+
+**الدالة (Function)**  
+تغليف "شيء يمكن القيام به مرارًا وتكرارًا" وإعطاؤه اسمًا:
+
+```js
+function sayHello(name) {
+  console.log('Hello, ' + name)
+}
+```
+
+لاحقًا، بمجرد كتابة `sayHello('Bob')`، يكون ذلك مكافئًا لإعادة تنفيذ تلك الأسطر مرة أخرى.
+
+**المكون (Component)**  
+في الواجهة الأمامية، "قطعة صغيرة من الواجهة + منطق صغير يمكن إعادة استخدامه":
+
+- يمكن أن يكون الزر مكونًا؛
+- يمكن أن يكون شريط التنقل العلوي مكونًا؛
+- يمكن أن تكون منطقة اللعبة بأكملها مكونًا أيضًا.  
+  يمكن تجميع المكونات معًا، تمامًا مثل بناء مكعبات الليغو.
+
+**الوحدة (Module)**  
+"ملف يتكون من مجموعة من التعليمات البرمجية ذات الصلة":
+
+- يُخصص `snakeLogic.ts` للكود المتعلق بـ "كيف تتحرك الأفعى"؛
+- يُخصص `score.ts` للكود الخاص بحساب النقاط.  
+  يمكن للوحدات "استيراد / تصدير" بعضها البعض، مثل الأدوات الموجودة في أدراج مختلفة.
+
+### 3. بناء الجملة، لغة البرمجة، إطار العمل
+
+**بناء الجملة (Syntax)**  
+"القواعد النحوية" و"علامات الترقيم" الخاصة بلغة برمجة معينة:
+
+- يجب وضع السلاسل النصية بين علامتي اقتباس؛
+- هل يجب كتابة فاصلة منقوطة في نهاية كل جملة أم لا؛
+- يجب إحاطة كتل الكود بأقواس معقوفة `{}`.  
+  إذا أخطأت في بناء الجملة، سيُصدر المترجم / المُفسّر مباشرة "خطأ في بناء الجملة".
+
+**لغة البرمجة (Programming Language)**  
+مجموعة كاملة من القواعد والمفردات للتواصل مع الكمبيوتر، مثل:
+
+- JavaScript، Python، Java، C++، Go……  
+  تختلف اللغات المختلفة فيما يناسبها من مهام، وطرق الكتابة، والبيئة الأدواتية.
+
+**إطار العمل (Framework)**  
+مجموعة كبيرة من الأكواد والأنماط التي يساعدك الآخرون على "بناء هيكلها الأساسي" مسبقًا:
+
+- الواجهة الأمامية: React، Vue (تساعدك في التعامل مع تحديثات الواجهة، وإدارة الحالة، إلخ)؛
+- الخلفية: Django، Spring Boot، إلخ.  
+  أنت في الأساس "تملأ المحتوى على هيكل جاهز"، وهو أسهل بكثير من بناء العجلة من الصفر.
+
+## <span id="term-debug">[خامسًا: مصطلحات تتعلق بـ "التصحيح / البحث عن الأخطاء"](#appendix-1-map)</span>
+
+### 1. الخطأ البرمجي (Bug)، رسالة الخطأ، السجلات / console.log
+
+**الخطأ البرمجي (Bug)**  
+عندما يختلف سلوك البرنامج عما توقعته، فهذا هو الـ Bug:
+
+- من المفترض أن يظهر زر، لكنه لم يظهر؛
+- من المفترض إضافة 10 نقاط، لكن تمت إضافة الكثير منها؛
+- تظهر صفحة بيضاء بمجرد فتح الصفحة.
+
+**رسالة الخطأ (Error Message)**  
+ذلك النص الإنجليزي "الذي يبدو مخيفًا" الذي يظهر على الشاشة / في الطرفية بعد تعطل البرنامج.  
+على الرغم من أنه يبدو سيئًا، إلا أنه عادةً يخبرك بـ:
+
+- أين حدث الخطأ تقريبًا؛
+- أي ملف، وحول أي سطر يجب التحقق.  
+  يمكنك ببساطة نسخه وإعطائه للذكاء الاصطناعي لترجمته وتحليله.
+
+**السجل (Log)**  
+"الكلام" الذي يقوله البرنامج بنفسه أثناء التشغيل.  
+الأكثر شيوعًا في الواجهة الأمامية هو:
+
+```js
+console.log('النقاط الحالية', score)
+```
+
+يمكنك فهمه على النحو التالي: **الإبلاغ عن رقم بفاعلية في الخطوات الرئيسية، لتسهيل التأكد من أن البرنامج يسير كما تريد**.
+
+> **ما هو console.log؟**
+>
+> - يمكن فهم `console` على أنه "سبورة صغيرة للتصحيح"؛
+> - `.log` يعني "كتابة سطر من النص على السبورة الصغيرة"؛
+> - اضغط على F12 في المتصفح لفتح لوحة Console في أدوات المطور، وستتمكن من رؤية هذه المخرجات.
+
+### 2. التصحيح، نقطة التوقف، التنفيذ خطوة بخطوة، اللقطة
+
+**التصحيح (Debug / تصحيح الأخطاء)**  
+عندما تكون هناك مشكلة في البرنامج، لا تبدأ بالتعديل بشكل عشوائي، بل:
+
+- أوقف البرنامج عند سطر معين (نقطة توقف)؛
+- انظر إلى القيمة الحالية لكل متغير؛
+- تقدم خطوة بخطوة، ولاحظ "من أين بدأ الأمر يصبح خاطئًا".
+
+**نقطة التوقف (Breakpoint)**  
+يمكنك التفكير في نقطة التوقف على أنها "إدراج زر إيقاف مؤقت عند هذا السطر":
+
+- عادةً ما يستمر البرنامج في العمل طوال الوقت للأسفل؛
+- عندما يصل إلى السطر الذي أدخلت فيه نقطة التوقف، سيتوقف مؤقتًا، في انتظار أن تقوم بالفحص.
+
+**التنفيذ خطوة بخطوة (Step)**  
+بعد التوقف عند نقطة التوقف، يمكنك اختيار:
+
+- التنفيذ سطرًا بسطر للأسفل (step over)؛
+- الدخول داخل دالة معينة لرؤية التفاصيل (step into).  
+  الأمر يشبه مشاهدة التحلل الحركي لرقصة ما، بدلاً من مشاهدة فيديو سريع التشغيل مباشرة.
+
+**اللقطة (Snapshot) —— فهم مبسط**  
+يمكن فهم "اللقطة" هنا على أنها:
+
+> **في نقطة زمنية معينة، التقاط "صورة للحالة الحالية"، لتسهيل المقارنة لاحقًا.**  
+> في الأدوات الفعلية، قد تشير "اللقطة" إلى:
+
+- الحالة الكاملة للمشروع في لحظة إجراء Commit؛
+- الوضع العام للذاكرة / المتغيرات في نقطة زمنية معينة أثناء التصحيح.  
+  يكفي أن تتذكر هذا التشبيه الآن: **اللقطة ≈ صورة محفوظة لحالة في لحظة معينة**.
+
+## <span id="term-project">[سادسًا: مصطلحات تتعلق بـ "إدارة المشاريع"](#appendix-1-map)</span>
+
+### 1. المشروع، مساحة العمل، المجلد
+
+**المشروع (Project)**  
+ما يتم وضعه في نفس المجلد لتحقيق تطبيق معين:
+
+- ملفات الكود المصدري
+- ملفات التكوين
+- الأصول (الصور، الصوتيات، إلخ)
+
+**مساحة العمل (Workspace)**  
+مفهوم يستخدمه VS Code / Trae لوصف "ما هي المجموعة من الأشياء التي تم فتحها في هذه المرة":
+
+- فتح مجلد → مساحة عمل بسيطة؛
+- في بعض الأحيان، يتم دمج مجلدات متعددة في مساحة عمل متعددة المشاريع.
+
+### 2. Git، المستودع، الإيداع (Commit)
+
+**Git (أداة التحكم في الإصدارات)**  
+يمكن فهمها على أنها "آلة زمن" للمشروع:
+
+- في كل مرة تنتهي فيها من تعديل مجموعة من المحتوى، يمكنك "التقاط صورة جماعية للإصدار"؛
+- عند الحاجة لاحقًا، يمكنك العودة إلى حالة تاريخية معينة.
+
+**المستودع (Repository / Repo)**  
+بعد تفعيل Git، يُطلق على مجلد المشروع الذي يحتوي على "سجل الإصدارات" اسم "المستودع".
+
+**الإيداع (Commit)**  
+في كل مرة تشعر فيها أن "هذه التعديلات تعتبر إنجازًا مرحليًا"، يمكنك:
+
+- كتابة وصف (مثل: `Add score panel`)؛
+- تعبئة جميع التعديلات الحالية في إصدار واحد؛
+- سيقوم Git بحفظ حالة هذه اللحظة.  
+  هذا الإجراء يسمى "إجراء Commit".
+## <span id="term-ai-tool">[سابعاً: المصطلحات المتعلقة بـ "أدوات تطوير الذكاء الاصطناعي"](#appendix-1-map)</span>
+
+### 1. بيئة التطوير المتكاملة للذكاء الاصطناعي (AI IDE)، والوكيل (Agent)، ووضع SOLO
+
+**AI IDE**  
+بناءً على بيئة التطوير المتكاملة (IDE) العادية، تُضاف طبقة من الذكاء الاصطناعي "تستطيع فهم الكلام البشري والعمل بشكل مستقل":
+
+- تقول لها "اصنع لعبة Snake"، فتقوم ببناء المشروع وكتابة الكود لك؛
+- تعطيها لقطة شاشة لخطأ (Error)، فتقوم بشرحه أولاً ثم تحاول إصلاحه؛
+- يمكنها تعديل ملفات متعددة معاً، وليس مجرد الإكمال سطراً بسطر.
+
+**Agent (الوكيل الذكي)**  
+يمكنك تخيل الوكيل (Agent) على أنه **مهندس ذكاء اصطناعي صغير في حالة استعداد دائم**:
+
+- يقرأ هيكل مشروعك؛
+- يقسم المهام (تثبيت التبعيات أولاً، ثم توليد الكود، ثم تشغيل المشروع)؛
+- عند ظهور خطأ أثناء التشغيل، يقوم بتعديل خطته بناءً على رسالة الخطأ.
+
+**وضع SOLO (باستخدام Trae كمثال)**  
+يعني:
+
+> أنت فقط تحتاج إلى توضيح "النقطة النهائية"،  
+> وهي تقوم بتخطيط "المسار" بنفسها،  
+> وتنفذه خطوة بخطوة محلياً،  
+> وتتوقف فقط عند النقاط الحراسية لتسألك ما إذا كنت تريد الاستمرار.
+
+### 2. النماذج (Models)، والمفاتيح (API Key)
+
+**النموذج (Model، يشير هنا تحديداً إلى النموذج اللغوي الكبير)**  
+يمكن فهم هذا المصطلح ببساطة على أنه "ذلك الكم الهائل من خلايا الدماغ الخاصة بالذكاء الاصطناعي" الموجود في الخلفية:
+
+- مثل GPT، وClaude، وKimi، وGLM وغيرها؛
+- تختلف مستويات النماذج في "فهم اللغة الصينية" و"كتابة الكود" و"الاستنتاج المنطقي"؛
+- عادةً ما يمكنك التبديل بين نماذج مختلفة من القائمة المنسدلة داخل بيئة تطوير الذكاء الاصطناعي (AI IDE).
+
+**مفتاح API (API Key)**  
+يمكنك فهم مفتاح API (API Key) على أنه **"رقم هوية + كلمة مرور متقدمة" طويلة جداً**،  
+وظيفته الوحيدة هي:
+
+> إخبار خوادم الطرف الآخر: "أنا المستخدم الفلاني، يرجى السماح لي باستخدام خدمات الذكاء الاصطناعي الخاصة بكم، وتسجيل الاستخدام في حسابي."
+
+بعض النقاط المهمة:
+
+- هذه السلسلة عادةً ما تكون عبارة عن حروف وأرقام عشوائية طويلة؛
+- يجب عدم نشرها في أماكن عامة (المستودعات، لقطات الشاشة، الدردشات الجماعية)، لأن أي شخص يحصل عليها يمكنه انتحال حسابك؛
+- إدخال مفتاح API في الأداة يعادل "إدخال المفتاح في القفل"، وبعدها يمكن للأداة مساعدتك في استدعاء خدمات الذكاء الاصطناعي المقابلة.
+
+## <span id="term-browser">[ثامناً،المصطلحات المتعلقة بـ "المتصفح / أدوات المطور"](#appendix-1-map)</span>
+
+**Chrome (متصفح جوجل)**
+أحد أكثر المتصفحات استخداماً في تطوير الواجهة الأمامية حالياً:
+
+- يفتح صفحات الويب بسرعة؛
+- يحتوي على "أدوات مطور" قوية ومدمجة، مما يسهل التحقق من المشاكل.
+
+**تحديث（Refresh / Reload）**  
+إعادة تحميل صفحة الويب الحالية:
+
+- بعد تعديل كود الواجهة الأمامية، إذا لم تكن هناك أداة تحديث تلقائي، يجب عليك الضغط على تحديث يدوياً لرؤية التأثير.
+
+**أدوات المطور（DevTools）**  
+مجموعة من لوحات الأدوات المخصصة للمطورين داخل المتصفح:
+
+- عرض هيكل صفحة الويب (Elements)؛
+- عرض الأنماط (Styles)؛
+- عرض الأخطاء والسجلات (Console)؛
+- عرض طلبات الشبكة (Network).  
+  في متصفح Chrome، يتم فتحها عادةً بالضغط على `F12` أو `Ctrl+Shift+I`.
+
+**Console（وحدة التحكم）**  
+علامة تبويب داخل أدوات المطور، مخصصة لعرض:
+
+- المخرجات التي تكتبها باستخدام `console.log(...)`؛
+- الأخطاء التي تحدث أثناء التشغيل (بالنص الأحمر).  
+  يمكنك اعتبارها "صندوق محادثة البرنامج":
+- إذا كان للبرنامج شيء ليقوله، فإنه يكتبه هنا؛
+- وهي المنطقة التي تنظر إليها أكثر شيء أثناء تصحيح الأخطاء (Debugging).
+
+إذا واجهت مصطلحات جديدة لاحقاً أثناء عملية التعلم، يمكنك أيضاً اتباع هذا النمط وطلب المساعدة من الذكاء الاصطناعي لإضافة المحتوى بالكامل:
+
+- اكتب أولاً جملة "ماذا يفعل؟"؛
+- ثم اكتب جملة "بماذا يمكن تشبيهه؟"؛
+- وأخيراً أعطِ مثالاً صغيراً وبسيطاً جداً.  
+  هكذا ستزداد "قاموس مصطلحاتك الشخصي" فائدة مع الوقت، وستتمكن تدريجياً من التواصل مع الكمبيوتر بشكل أفضل.
+---
+title: 'Beginner 2: AI Coding Tools'
+description: 'Move from web AI coding to local development: understand IDE vs AI IDE, build a snake game with Trae, and learn practical AI collaboration tips.'
+---
diff --git a/docs/ar-sa/stage-1/learning-map/index.md b/docs/ar-sa/stage-1/learning-map/index.md
new file mode 100644
index 0000000..f925bab
--- /dev/null
+++ b/docs/ar-sa/stage-1/learning-map/index.md
@@ -0,0 +1,275 @@
+---
+title: 'من الفكرة إلى منتج AI - خريطة طريق تعلم Easy-Vibe'
+description: 'خريطة طريق كاملة لتعلم برمجة الذكاء الاصطناعي: من الصفر إلى التطوير الشامل. أتقن أدوات AI IDE مثل Vibe Coding و Claude Code و Cursor، وتعلم التفكير في المنتجات والتطوير الشامل وتكامل قدرات الذكاء الاصطناعي.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['ar-sa/stage-1/learning-map'] ?? []
+</script>
+
+# من الفكرة إلى منتج AI
+
+::: info شكر خاص
+شكر خاص لطلاب **جامعة تسينغهوا بم-campus شنتشن الدولي للدراسات العليا** على اختبار هذه الدورة التدريبية وتقديم الملاحظات والدعم! آراؤكم ومساهماتكم جعلت هذه الدورة أفضل. [👉 عرض قائمة المساهمين الكاملة](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
+:::
+
+في الماضي، كان صنع البرمجيات يتطلب مستوى عالٍ: كنت بحاجة إلى فهم البرمجة والخوارزميات، والحصول على خبرة مشروع لعدة سنوات.
+الآن الأمر مختلف. طالما لديك فكرة، يمكن للذكاء الاصطناعي مساعدتك في كتابة التعليمات البرمجية.
+
+هذا تغيير كبير: **لغات البرمجة أصبحت لغات طبيعية**.
+
+مع ظهور النماذج اللغوية الكبيرة (LLM)، لم يعد التطوير "حكرًا على خبراء التقنية"، بل أصبح أداة يمكن للجميع استخدامها. كان أصعب جزء في الماضي هو "كيفية كتابة التعليمات البرمجية"، أما الآن فأصعب جزء هو "**ماذا تريد أن تصنع**".
+
+> **ما هو Vibe Coding؟**
+> ببساطة، هو "البرمجة بالكلام". Vibe Coding يعني أنه يمكنك الاعتماد على التحدث مع الذكاء الاصطناعي فقط، بدلاً من كتابة التعليمات البرمجية مباشرة، لإكمال مشاريع البرمجة.
+
+بالطبع، جعل الذكاء الاصطناعي يكتب التعليمات البرمجية هو مجرد الخطوة الأولى. لصنع منتج حقيقي قابل للاستخدام، ستواجه هذه المشكلات:
+- كيف تجعل الذكاء الاصطناعي يكتب تعليمات برمجية نظيفة وقابلة للصيانة؟
+- كيف تجمع التعليمات البرمجية المتناثرة في تطبيق يعمل؟
+- كيف تجعل التطبيق يعمل فعليًا ويستخدمه الناس؟
+- كيف تدمج قدرات الذكاء الاصطناعي مثل إنشاء النصوص والتعرف على الصور في منتجك؟
+
+ستجد الإجابات على هذه الأسئلة في هذه الدورة.
+
+سواء كنت طالبًا أو معلمًا أو طبيبًا أو عاملًا أو أي شخص عادي لا يعرف أي شيء عن التقنية - لا تحتاج إلى تعلم البرمجة لسنوات، يمكنك صنع نموذج أولي للمنتج يعمل ويمكن عرضه في غضون أسبوعين.
+
+| هويتك | ما يمكن أن تساعدك هذه الدورة |
+|---------|-------------|
+| طالب | الواجبات والمسابقات وريادة الأعمال، اصنع مشاريعك بنفسك، بدلاً من طلب المساعدة من الآخرين |
+| محترف | أتمتة العمل المتكرر، تحسين الكفاءة، حتى تطوير مشروع جانبي |
+| مدير منتجات / مصمم | الأفكار لم تعد تبقى على الورق، يمكنك إنشاء عرض تجريبي سريع لرؤسائك/عملائك |
+| رائد أعمال / صاحب مشروع صغير | التحقق من الأفكار بتكلفة منخفضة، يمكنك صنع MVP دون إنفاق آلاف على الاستعانة بمصادر خارجية |
+| معلم / عامل في مجال التعليم | إنشاء أدوات تعليمية ومواد دورات والاختبار الآلي، تحسين كفاءة التدريس |
+| طبيب / محامي / عامل محترف | أتمتة العمليات المهنية، وبناء أدوات الكفاءة الخاصة بك |
+| أي شخص | استخدام الذكاء الاصطناعي لحل مشكلات محددة في الحياة/العمل، تحويل المستحيل إلى ممكن |
+
+في عصر الذكاء الاصطناعي، القدرة على التنفيذ والأفكار أهم دائمًا من التقنية.
+
+## مسار النمو: من "يعرف استخدام الذكاء الاصطناعي" إلى "يعرف صنع منتجات الذكاء الاصطناعي"
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>دليل المبتدئين</h3>
+    <p class="stage-role">تجربة برمجة الذكاء الاصطناعي</p>
+    <div class="stage-tags">
+      <span>لعبة الثعبان الصغيرة</span>
+      <span>البدء من الصفر</span>
+      <span>أول تجربة لـ Vibecoding</span>
+      <span>إنشاء في بضع دقائق</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>المرحلة الأولى</h3>
+    <p class="stage-role">مدير المنتجات / العمليات</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>تفكيك المتطلبات والنماذج الأولية</span>
+      <span>تكامل قدرات الذكاء الاصطناعي</span>
+      <span>تطوير Demo كامل</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>المرحلة الثانية</h3>
+    <p class="stage-role">مطور متوسط/مبتدئ / مطور مستقل</p>
+    <div class="stage-tags">
+      <span>من Figma إلى التعليمات البرمجية</span>
+      <span>قاعدة بيانات Supabase</span>
+      <span>تكامل دفع Stripe</span>
+      <span>قاعدة معرفة Dify</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>المرحلة الثالثة</h3>
+    <p class="stage-role">مطور متقدم / مهندس معماري</p>
+    <div class="stage-tags">
+      <span>ويب/تطبيقات صغيرة/متعدد المنصات</span>
+      <span>أدوات MCP المتقدمة</span>
+      <span>RAG & LangGraph</span>
+      <span>تفكير المهندس المتقدم</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+من خلال مسار التعلم الكامل هذا، ستحصل على:
+
+- **قدرة تطوير Vibe Coding:** إتقان التفكير في vibecoding وأدوات الترميز بالذكاء الاصطناعي، وزيادة كفاءة التطوير عدة مرات. لم تعد بحاجة إلى حفظ القواعد عن ظهر قلب، بل تعلم كيفية توجيه الذكاء الاصطناعي لتوليد تعليمات برمجية عالية الجودة.
+- **مهارات التطوير الشامل:** من تصميم واجهة المستخدم إلى تنفيذ الواجهة الأمامية، من تصميم قاعدة البيانات إلى تطوير API، من التطوير المحلي إلى النشر السحابي، إتقان مجموعة التقنيات الكاملة لتطبيقات الويب الحديثة.
+- **تكامل قدرات الذكاء الاصطناعي:** تعلم استدعاء واجهات برمجة تطبيقات الذكاء الاصطناعي متعددة الوسائط المختلفة، ودمج قدرات الذكاء الاصطناعي مثل النصوص والصور والكلام بسلاسة في تطبيقاتك، وبناء منتجات ذكية من خلال تقنيات مثل RAG.
+- **التفكير في المنتجات وقدرات العمليات:** من بحث المستخدمين إلى تفكيك المتطلبات، من تصميم MVP إلى تكرار المنتج، من تكامل المدفوعات إلى إدارة المستخدمين، تشكيل حلقة كاملة من تطوير المنتجات والعمليات.
+
+# ماذا يمكنك أن تفعل بعد التعلم؟
+
+## المرحلة الأولى: اصنع نموذجك الأولي للمنتج
+
+هذه المرحلة مناسبة للطلاب الذين ليس لديهم أساس برمجي على الإطلاق، أو الذين يعرفون القليل فقط لكنهم ليسوا واثقين. لا تحتاج إلى تعلم الكثير من النظريات أولاً، بل اتبع الخطوات مباشرة وتعلم استخدام أدوات الذكاء الاصطناعي لكتابة التعليمات البرمجية أثناء العملية.
+
+**بعد التعلم ستتمكن من**:
+- استخدام أدوات برمجة الذكاء الاصطناعي بشكل مستقل لإكمال تطبيق ويب
+- تحويل أفكار المنتجات إلى نماذج أولية قابلة للنقر والتفاعل
+- إضافة ميزات ذكاء اصطناعي للنموذج الأولي (مثل إنشاء الصور من النصوص، المحادثة الذكية)
+- معرفة كيفية استكشاف الأخطاء وإصلاحها عند مواجهتها
+
+ببساطة، ستتمكن من صنع شيء "يعمل ويمكن عرضه للآخرين".
+
+يمكننا أولاً تجربة برمجة الذكاء الاصطناعي من خلال الألعاب الصغيرة، ثم تعلم كيفية استخدام أدوات برمجة الذكاء الاصطناعي لمساعدتك في كتابة التعليمات البرمجية وإصلاح الأخطاء. ثم البدء بصفحة بسيطة، والعمل تدريجيًا نحو تطبيق متعدد الصفحات تفاعلي، ثم إضافة ميزات ذكاء اصطناعي مثل إنشاء الصور من النصوص والمحادثة الذكية. أخيرًا، إكمال مشروع كامل بشكل مستقل، مما يتيح لأفكارك الإبداعية فرصة حقيقية للتحقق.
+
+# لماذا نستخدم نهج قائم على المشاريع للتدريب؟
+
+> **تحديات العالم الحقيقي**
+>
+> السبب في الواقع بسيط جدًا: بالنظر إلى حالة معظم الطلاب حاليًا، عند الدخول المباشر إلى سوق العمل، من المرجح جدًا أن تواجه صعوبات في المشاريع الحقيقية وتحت "الضرب المجتمعي" من الرؤساء/العملاء. المشاهد الأكثر شيوعًا في العالم الحقيقي هي:
+
+> مديرك/رئيسك: نريد صنع xxx، والهدف هو تحقيق تأثير yyy.
+>
+> الوثائق؟ الأطر الجاهزة؟ مواصفات المتطلبات التفصيلية؟ في كثير من الأحيان لا يوجد أي منها.
+
+العديد من المهام في العمل الحقيقي هي في جوهرها حل مشكلات لم يسبق رؤيتها من قبل في بيئة عالية عدم اليقين: المتطلبات غامضة، والحدود متغيرة، ولا أحد يخبرك بالإجابة الصحيحة، تحتاج إلى البحث عن المعلومات بنفسك، وإجراء التجارب، وبناء النماذج الأولية، والتكرار المستمر، وأخيرًا تقديم حل "يعمل ويمكن استخدامه ويمكن إطلاقه".
+
+ما تريد هذه الدورة القيام به هو إعطائك "محاكاة للضرب المجتمعي" مسبقًا في بيئة آمنة نسبيًا:
+
+- من خلال مهام مشروع تبدو صعبة إلى حد ما، إجبارك على ممارسة تفكيك المشكلات، وتصميم الحلول، والبحث عن المعلومات بنفسك
+- من خلال السقالات والتعليمات البرمجية غير "المبسطة"، ستتعلم قراءة وفهم وتعديل قاعدة تعليمات برمجية متوسطة إلى كبيرة
+- من خلال الحلقة الكاملة من الفكرة إلى الإطلاق، ستجرب العملية الكاملة للمنتج من الصفر إلى الواحد
+
+على المدى القصير، هذا التدريب مؤلم بالفعل؛ لكن على المدى الطويل، سيعزز بشكل كبير قدرتك التنافسية في البحث عن عمل والتطور المهني: ستكون أكثر قدرة على تحمل المسؤوليات، وأكثر قدرة على إيجاد اختراقات في بيئات غير مؤكدة، وأكثر قدرة على تحويل الذكاء الاصطناعي إلى منتجات حقيقية، بدلاً من البقاء عند مرحلة "تجربة العرض التوضيحي".
+
+# فن طرح الأسئلة: مهارة أساسية في عصر الذكاء الاصطناعي
+
+في عصر الذكاء الاصطناعي، طرح الأسئلة هو أيضًا نوع من "المهارات الأساسية". نفس التعليمات البرمجية، نفس الخطأ، **كيف تطرح سؤالك يحدد تقريبًا نوع الإجابة التي يمكن للذكاء الاصطناعي تقديمها**: هل هي إجابة عامة، أم حلول قابلة للتنفيذ خطوة بخطوة.
+
+**عادات جيدة**: اجعل "سؤال الذكاء الاصطناعي" جزءًا من عملية التطوير اليومية: عندما تواجه شيئًا لا تفهمه أو مشكلة عالقة، اسأل على الفور.
+
+## لماذا هذه مهارة أساسية؟
+
+- **نادرًا ما توجد وثائق كاملة في الواقع**: في أغلب الأحيان تواجه متطلبات غير واضحة، تعليمات برمجية نصف مكتملة، رسائل خطأ متفرقة
+- **الذكاء الاصطناعي هو معلمك وزميلك في أي وقت**: الشخص الذي يعرف كيف يسأل يمكن أن يحول الذكاء الاصطناعي إلى "برمجة زوجية عالية الجودة"
+- **الحد الأعلى للقدرة يحدده التواصل**: كلما زادت المعلومات الرئيسية التي تقدمها، وكلما كان تنسيق المخرجات أكثر تحكمًا، كانت الإجابة أكثر قابلية للاستخدام
+
+**سوء فهم شائع**: سؤال واحد فقط "لماذا الخطأ؟" عادة ما يحصل فقط على كومة من التخمينات. املأ السياق، وستحصل على حلول قابلة للتنفيذ.
+
+## كيفية "إطعام" المعلومات للذكاء الاصطناعي: لقطات الشاشة مقابل النسخ واللصق
+
+كلتا الطريقتين ممكنتان، لكن للاستخدامات المختلفة:
+
+| الطريقة | سيناريو الاستخدام | المتطلبات الرئيسية |
+| ------------ | ----------------------------------------- | ----------------------------------------- |
+| **النسخ واللصق** | تتبع أخطاء المكدس، السجلات، التعليمات البرمجية، التكوينات، إرجاع API | حاول أن تكون كاملاً، لا تقتطع سطرًا واحدًا من الكلمات الرئيسية |
+| **لقطة شاشة** | مشاكل تخطيط UI، التفاعلات غير الطبيعية، أزرار واجهة الأدوات غير موجودة | لقطة شاشة كاملة + حدد المنطقة الرئيسية، من الأفضل إضافة جملة وصفية نصية |
+
+::: danger ⚠️ شرط مسبق مهم
+**ليس كل الذكاء الاصطناعي يدعم إدخال الصور.** التواصل بلقطات الشاشة يتطلب أن يمتلك الذكاء الاصطناعي قدرات متعددة الوسائط (أي القدرة على فهم وتحليل الصور). حاليًا، تشمل نماذج الذكاء الاصطناعي التي تدعم إدخال الصور: Claude (Anthropic)، GPT-4V/GPT-4o (OpenAI)، Gemini (Google)، وبعض النماذج المحلية الكبيرة.
+
+**إذا كان الذكاء الاصطناعي الذي تستخدمه لا يدعم إدخال الصور**، فلن يتم التعرف على لقطات الشاشة، فيرجى استخدام طريقة النسخ واللصق للتواصل.
+:::
+
+## تقنيات المطالبات التي تجعل الذكاء الاصطناعي "يشرح بشكل جيد"
+
+إذا كنت لا تريد الإجابة فقط، بل تريد "تعلم" الإجابة. استخدام تعليمات مشابهة لما يلي يمكن أن يحسن بشكل كبير من جودة الشرح:
+
+> **مثال على سؤال تعليمي**
+>
+> - "يرجى شرح هذا المفهوم في 5 جمل أولاً، ثم أعطني بعض الأسئلة لاختبار ما إذا كنت قد فهمت بشكل صحيح."
+> - "يرجى شرح رسالة الخطأ هذه بالتفصيل، لا أفهم سبب الخطأ."
+
+# بعد المثابرة لفترة طويلة ما زلت لا أستطيع الحل، أريد الاستسلام
+
+ربما تكون طريقة مثابرتك خاطئة. لا تعاني بمفردك في الظلام، يمكنك التحدث مع المؤلف والمساعدين التعليميين: أخبرهم بصدق عن الطرق التي جربتها، والنقاط المحددة التي واجهتها، وحالتك النفسية الحالية. في كثير من الأحيان، بمجرد تعديل الاتجاه قليلاً، أو إضافة نقطة معرفية رئيسية، يمكنك الاستمرار في المضي قدمًا.
+
+# أعتقد أن بعض تصميمات الدورة التعليمية غير معقولة
+
+نرحب بك دائمًا للتواصل مع المؤلف، أو تقديم مشكلة، أو تقديم ملاحظات مباشرة في المجموعة/الفصل. نأمل بشدة أن نعمل معك لتحسين هذه الدورة التعليمية: ما هو غير واضح، ما هي التجربة السيئة، ما الذي جعلك تهدر الجهد، يمكن الإشارة إليه بصراحة. كلما كانت الملاحظات أكثر واقعية وتحديدًا، زادت مساعدتها للقادمين الجدد لتجنب الأخطاء.
+
+# المراجع
+
+- [جامعة نانجينغ قسم علوم الكمبيوتر والتكنولوجيا تجربة أساسيات أنظمة الكمبيوتر](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="ماذا تتعلم بعد ذلك"
+  description="وفقًا لمسار 'من يعرف استخدام الذكاء الاصطناعي إلى يعرف صنع المنتجات'، استمر في المضي قدمًا."
+  :items="relatedArticles"
+/>
diff --git a/docs/de-de/guide/introduction.md b/docs/de-de/guide/introduction.md
new file mode 100644
index 0000000..ab874ee
--- /dev/null
+++ b/docs/de-de/guide/introduction.md
@@ -0,0 +1,82 @@
+# Projektvorstellung
+
+2025 wird von vielen als das erste Jahr der KI-Programmierung angesehen. Immer mehr Menschen beginnen, KI zum Schreiben von Code einzusetzen, aber die Ergebnisse bleiben oft auf Spielzeugebene -- man wei&szlig; nicht, wie man den Vibe Coding-Entwicklungsprozess organisiert, welche Tools man w&auml;hlen soll und welche wichtigen Schritte vom Prototyp bis zum Go-Live noch fehlen.
+
+Wir verwenden einen schrittweisen **dreistufigen Praxis-Pfad**: In der Anf&auml;ngerphase steigen die Teilnehmer durch kleine Spiele schnell in die KI-Programmierung ein, in der ersten Phase erlernen sie die Vibe Coding-Arbeitsweise und erstellen Web-Anwendungsprototypen, in der zweiten Phase lernen sie die Full-Stack-Entwicklung und das Deployment, in der dritten Phase bauen sie komplexe, plattform&uuml;bergreifende Anwendungen.
+
+Jede Phase ist mit vollst&auml;ndigen Projektpraktika ausgestattet, damit Sie in echten Herausforderungen vom Spielzeug zum Produkt reifen und schlie&szlig;lich die F&auml;higkeit erwerben, **jede Idee als nutzbare Anwendung zu realisieren**.
+
+Wir glauben, dass Sie mit der Beherrschung von Vibe Coding und systematischem Training ein **Allround-Entwickler** werden k&ouml;nnen, der Frontend- und Backend-Entwicklung, KI-F&auml;higkeitsintegration und Produktdesign in sich vereint.
+
+Dieses Projekt richtet sich haupts&auml;chlich an drei Arten von Lernenden:
+
+- **Anf&auml;nger (Allrounder / Produkt- und Betriebsseite)**: Hilft Nicht-Technik-Background-Rollen und Einsteigern, Schl&uuml;sselkonzepte zu verstehen und das erste KI-Kleintool oder den ersten Produktprototyp abzuschlie&szlig;en.
+- **Mittelstufe-Entwickler (Studierende und Entwickler mit gewissen Grundlagen)**: Systematische Beherrschung von Vibe Coding und nativer KI-Anwendungsentwicklung.
+- **Fortgeschrittene Entwickler (Unternehmen & Startups, Open-Source- und Indie-Entwickler)**: Unterst&uuml;tzt Teams und Einzelpersonen beim schnellen Aufbau, der Validierung und Iteration nativer KI-Anwendungen.
+
+## Inhaltliche Navigation
+
+### Gesamtanhang
+
+[KI-F&auml;higkeitsw&ouml;rterbuch: G&auml;ngige KI-Kernkonzepte, Begriffe und Szenario-Erkl&auml;rungen](/de-de/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### Null, Kindergarten
+
+| Kapitel | Wichtige Inhalte | Status |
+| :--- | :--- | :--- |
+| [Anf&auml;nger: Lernkarte](/de-de/stage-1/learning-map/) | Gesamt&uuml;bersicht des Lernpfads | ✅ |
+| [Anf&auml;nger: Im KI-Zeitalter gen&uuml;gt Sprechen zum Programmieren](/de-de/stage-1/ai-capabilities-through-games/) | Erste Erfahrungen mit KI-Programmierung am Beispiel von Snake | ✅ |
+
+### Eins, KI-Produktmanager
+
+| Kapitel | Wichtige Inhalte | Status |
+| :--- | :--- | :--- |
+| [Anf&auml;nger II: KI-IDE-Tools kennenlernen](/de-de/stage-1/introduction-to-ai-ide/) | IDE bedienen, Benutzeroberfl&auml;che und effiziente Prompt-Methoden beherrschen | ✅ |
+| [Anf&auml;nger III: Prototypen erstellen](/de-de/stage-1/building-prototype/) | Vom Produkt-Analysis bis zum Multi-Page-Produktprototyp -- vollst&auml;ndiger Zyklus | ✅ |
+| [Anf&auml;nger IV: KI-F&auml;higkeiten in den Prototyp einbauen](/de-de/stage-1/integrating-ai-capabilities/) | API-Integration g&auml;ngiger KI-F&auml;higkeiten (Text, Bild, Video) verstehen und umsetzen | ✅ |
+| [Anf&auml;nger V: Vollst&auml;ndiges Projektpraktikum](/de-de/stage-1/complete-project-practice/) | Echte Szenarien simulieren, Nutzerfeedback iterativ einarbeiten und Projekt pr&auml;sentieren (inkl. Abschlussaufgabe) | ✅ |
+
+#### Anhang
+
+| Kapitel | Wichtige Inhalte | Status |
+| :--- | :--- | :--- |
+| [Anhang A: Produkt-Denken Erg&auml;nzung](/de-de/stage-1/appendix-a-product-thinking/) | Produkt-Denken-Rahmen von der Ideenbewertung bis zur Anforderungsaufschl&uuml;sselung und MVP | ✅ |
+| [Anhang B: H&auml;ufige Fehler und L&ouml;sungen](/de-de/stage-1/appendix-b-common-errors/) | H&auml;ufige Fehler und Behebungsstrategien beim Vibe Coding | ✅ |
+| [Anhang: Woher Ideen finden](/de-de/stage-1/appendix-idea-sources/) | Nischige Richtungen aus Referenz-Apps, Trends und VC-Listen ableiten | ✅ |
+| [Anhang: Double-Diamond-Modell](/de-de/stage-1/appendix-double-diamond/) | Verstehen, zuerst das Problem zu definieren, bevor man die L&ouml;sung entwirft | ✅ |
+| [Anhang: Jobs to Be Done](/de-de/stage-1/appendix-jobs-to-be-done/) | Mit der JTBD-Methode erkennen, was Nutzer wirklich erreichen wollen | ✅ |
+| [Anhang: The Mom Test Interview-Methode](/de-de/stage-1/appendix-mom-test/) | Bedarfsvalidierung durch Nutzerinterviews | ✅ |
+
+### Zwei, Junior-/Mid-Level-Entwickler
+
+#### Frontend-Bereich
+
+| Kapitel | Wichtige Inhalte | Status |
+| :--- | :--- | :--- |
+| Lovart zur Materialerstellung nutzen | Lovart zum Batch-Generieren von visuellen Materialien wie Charakteren und Szenen beherrschen, Materialgrundlage f&uuml;r UI-Design und Frontend-Entwicklung schaffen | 🚧 |
+| Figma und MasterGo Einf&uuml;hrung | Design-Tools zur Informationsarchitektur und Seitenstruktur nutzen, Grundlage f&uuml;r die Frontend-Implementierung schaffen | 🚧 |
+| Erste moderne Anwendung erstellen -- UI-Design | Komponentenbasierte Oberfl&auml;che basierend auf Designentw&uuml;rfen umsetzen, erste Pipeline vom Design zum Code | 🚧 |
+| Seiten und Schaltfl&auml;chen nach UI-Design-Richtlinien gestalten | Mainstream-Design-Richtlinien f&uuml;r Seitenstruktur und Schaltfl&auml;chen-Hierarchie lernen und KI-gest&uuml;tzte Designentw&uuml;rfe erstellen | 🚧 |
+| [Hogwarts-Portraits gemeinsam erstellen](/de-de/stage-2/frontend/hogwarts-portraits/) | Eine Frontend-Anwendung mit KI-F&auml;higkeiten von 0 auf 1 erstellen, Design und Entwicklung verkn&uuml;pfen | 🚧 |
+
+#### Backend-Entwicklung
+
+| Kapitel | Wichtige Inhalte | Status |
+| :--- | :--- | :--- |
+| Was ist eine API? | HTTP-Schnittstellen und Request-Response-Modell verstehen, Vorbereitung auf Backend-Integration und Abstimmung | 🚧 |
+| [Von der Datenbank zu Supabase](/de-de/stage-2/backend/database-supabase/) | Datenbank und API auf Supabase umsetzen, Datenmodell und Frontend-Seite verkn&uuml;pfen | 🚧 |
+| LLM-unterst&uuml;tztes Schreiben von API-Code und API-Dokumentation | LLM beim Generieren von API- und Datenbankdokumentation sowie Code unterst&uuml;tzen, lesbaren und testbaren Backend-Code erstellen | 🚧 |
+| Git-Workflow und Zeabur-Deployment | Code im Git-Workflow verwalten und die Anwendung auf Zeabur bereitstellen | 🚧 |
+| Moderne CLI-Entwicklungstools | CLI-basierte KI-Programmierungstools zur Beschleunigung von Entwicklung und Debugging nutzen, einen pers&ouml;nlichen Engineering-Workflow aufbauen | 🚧 |
+| Stripe-Integration und andere Zahlungssysteme | Zahlungssystem integrieren, Zahlungs-Pipeline und grundlegende Abrechnungsprozesse abschlie&szlig;en | 🚧 |
+| Erste moderne Anwendung erstellen -- Full-Stack-Anwendung | Frontend, Backend und Zahlungsmodul integrieren, eine bereitstellbare Full-Stack-Web-Anwendung erstellen | 🚧 |
+| Moderne Frontend-Komponentenbibliothek + Trae-Praxis | Moderne Frontend-Komponentenbibliothek und Trae nutzen, unabh&auml;ngig ein Produkt mit Login/Registrierung und Zahlungsunterst&uuml;tzung erstellen | 🚧 |
+
+#### KI-F&auml;higkeiten Anhang
+
+| Kapitel | Wichtige Inhalte | Status |
+| :--- | :--- | :--- |
+| [Dify-Einf&uuml;hrung und Wissensdatenbank-Integration](/de-de/stage-2/ai-capabilities/dify-knowledge-base/) | Dify Workflow und grundlegendes RAG zum Aufbau eines toolbasierten Produkts nutzen, Vorlage f&uuml;r sp&auml;tere App-Upgrades erstellen | 🚧 |
+| KI-W&ouml;rterbuch abfragen und multimodale APIs integrieren | Geeignete Modelle und APIs finden und multimodale F&auml;higkeiten wie Text und Bild in Produkte integrieren | 🚧 |
+
+### Drei, Senior-Entwickler
diff --git a/docs/de-de/stage-1/ai-capabilities-through-games/index.md b/docs/de-de/stage-1/ai-capabilities-through-games/index.md
new file mode 100644
index 0000000..949d4ee
--- /dev/null
+++ b/docs/de-de/stage-1/ai-capabilities-through-games/index.md
@@ -0,0 +1,768 @@
+# Anfänger I: Im AI-Zeitalter reicht es zu sprechen, um programmieren zu können
+
+Dies ist ein **auf Projekt-Based Learning basierendes** Lern-Tutorial. Wir ermutigen dich, den Schritten zu folgen und die Ergebnisse zu reproduzieren.
+Keine Sorge vor Fehlern oder Änderungen – wir glauben immer an dich. Bitte behalte Folgendes im Gedächtnis:
+
+<div style="text-align: center;">
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">Fertigstellen ist wichtiger als Perfektion</span>
+</div>
+</div>
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Etwa <strong>4 Stunden</strong>, in mehreren Sitzungen abschließbar'
+const relatedArticles =
+  relatedArticlesMap['de-de/stage-1/ai-capabilities-through-games'] ?? []
+</script>
+
+## Kapitelübersicht
+
+<ChapterIntroduction :duration="duration" :tags="['Konversationelles AI-Programmieren', 'AI-native Mini-Spiele', 'Snake-Spiel-Praxis']" coreOutput="AI-native Snake + eigenes Mini-Spiel" expectedOutput="1 lauffähige AI-native Snake + (optional) 1 selbst erstelltes AI-native Mini-Spiel oder Demo">
+
+Wenn du **überhaupt nicht programmieren kannst** oder nur ein wenig davon verstehst, ist dieses Kapitel genau für dich gemacht. Wir beginnen mit den Grundlagen: AI durch **Gespräche** Code schreiben zu lassen – ohne Syntax auswendig zu lernen, ohne Umgebungen einzurichten, und alles läuft direkt im Browser.
+
+Du wirst **dein erstes lauffähiges Programm** selbst bauen – eine Snake, die „Wörter frisst, Gedichte schreibt und malt". Durch diese praktische Übung wirst du erleben, wie sich AI-Programmieren wirklich anfühlt: Nicht dass AI dein Denken ersetzt, sondern dass du deine Ideen aussprichst und AI sie umsetzt.
+
+Alle Kreationen beginnen bei 0 und werden zu 1. Wir freuen uns, dir Selbstvertrauen und Professionalität zu vermitteln. Für dich gilt: **Ausführungsfähigkeit is all you need**.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
+      { title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
+      { title: 'Native Praxis', description: 'AI-native Snake bauen' },
+      { title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Herausforderungen und Chancen für normale Menschen
+
+Viele Menschen haben den Kopf voller Produktideen: ein kleines Tool zur Budgetverwaltung, eine Webseite, die das Wachstum des Kindes dokumentiert, oder sogar ein kleines Spiel. Aber sobald sie an Code oder Programmierer denken, werden sie sofort abgeschreckt.
+
+Seit dem Aufkommen von AI gibt es erstmals eine völlig neue Möglichkeit für normale Menschen: Du musst nicht programmieren können, du musst nur lernen, AI klar zu sagen, was du willst. Daten von GitHub Copilot [zeigen](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics), dass über 15 Millionen Entwickler AI-gestütztes Programmieren nutzen und im Durchschnitt 46% des Codes von AI generiert wird! Bei Java-Projekten liegt dieser Anteil bei 61%.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 20px;">🚀</span>
+      <span style="font-weight: bold; font-size: 16px;">Effizienz- und Adaptionssteigerung</span>
+    </div>
+  </template>
+  
+  <el-row :gutter="20" style="margin-bottom: 24px;">
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Geschwindigkeitssteigerung</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">Tage</span></div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Aufgabendauer (vorher 9.6 Tage)</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Ersttags-Installationsrate</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Vorschlagsannahmerate</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <div style="line-height: 1.8; color: #606266;">
+    Was wirklich begeistert, ist der Sprung in der Effizienz: Die Geschwindigkeit bei der Aufgabenerledigung stieg um <b>55%</b>. Was früher 9,6 Tage brauchte, ist jetzt in <b>2,4 Tagen</b> erledigt. Dieser sichtbare Effizienzgewinn zeigt, dass AI nicht mehr nur ein „optionales Werkzeug" ist, sondern zu einem unverzichtbaren Programmierassistenten im Entwicklungsprozess wird. Die Adaptionsraten bestätigen dies: Am Tag der Zugangsgewährung installierten <b>81%</b> der Entwickler sofort und begannen es zu nutzen; davon <b>96%</b> übernahmen noch am selben Tag AI-generierte Codevorschläge. Mit anderen Worten: Entwickler integrierten AI fast sofort in ihre tägliche Arbeit.
+  </div>
+</el-card>
+
+Für normale Menschen ist dieser Trend noch bedeutsamer: Wenn selbst professionelle Programmierer stark auf AI angewiesen sind, um Code zu schreiben, **warum sollten wir, die nicht programmieren können, nicht direkt mit AI sprechen, um unsere Ideen umzusetzen?**
+
+Das Ziel dieses Kurses ist es, dir eine neue Fähigkeit beizubringen: Anwendungen durch natürliche Sprachgespräche zu erstellen. Wir bringen dir bei, wie du mit AI in der Sprache des Computers kommunizierst und wie du AI dazu bringst, die Ideen in deinem Kopf in echte, nutzbare Produkte zu verwandeln.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
+      { title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
+      { title: 'Native Praxis', description: 'AI-native Snake bauen' },
+      { title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Wie weit kann AI dich bringen?
+
+In diesem Abschnitt diskutieren wir nur eine Frage: Wenn du überhaupt nicht programmieren kannst, wieweit kann die heutige AI dich bringen?
+
+Grob gesagt kannst du die Fähigkeiten aktueller Modelle so verstehen: Sie können **einfache interne Tools**, **Daten-Visualisierungs-Dashboards** und einige **leichte Mini-Spiele** entwickeln. Diese Fähigkeiten reichen für **eigene Tools** und für die **Validierung von Anforderungen aus der Perspektive eines Produktmanagers** völlig aus. Um jedoch per Knopfdruck ein **marktreifes, ausgereiftes Produkt** zu generieren, ist in der Regel immer noch menschliche Arbeit bei der **Prozessgestaltung**, **Detailoptimierung** und fortlaufenden Verbesserung nötig.
+
+Schauen wir uns als Nächstes am Beispiel des Snake-Spiels an, wieweit AI-Programmieren tatsächlich gehen kann.
+
+### 2.1 Ein Snake-Spiel in 60 Sekunden
+
+Öffne zunächst die experimentelle Webseite [z.ai](https://chat.z.ai/), die im Tutorial verwendet wird. `z.ai` ist eine von Zhipu AI (einem der führenden chinesischen Sprachmodellunternehmen) entwickelte AI-Plattform, deren Kernfunktionen von Zhipus selbstentwickelter GLM-Serie bereitgestellt werden. Die Plattform integriert mehrere AI-Funktionen, darunter Folien-Generierung, Poster-Design und Full-Stack-Entwicklung. In diesem Tutorial konzentrieren wir uns auf die Nutzung des Full-Stack-Entwicklungsmoduls.
+
+::: details 💡 Was ist das neue Paradigma „Programmieren im Browser"?
+
+Früher erforderte die Entwicklung einer Webanwendung:
+- Installation einer Programmierumgebung (z. B. Python, Node.js)
+- Einrichtung eines Code-Editors
+- Erlernen von Sprachen wie HTML/CSS/JavaScript
+- Bewältigung von Abhängigkeiten und Fehlern
+
+Heute reicht es mit AI-Programmierplattformen aus:
+- Browser öffnen, Webseite aufrufen
+- Gewünschte Funktionen in natürlicher Sprache beschreiben
+- AI generiert automatisch Code und zeigt Echtzeitvorschau
+
+Dieses Paradigma „Gespräch als Programmierung" verwandelt das Programmieren vom „Code schreiben" zum „Anforderungen beschreiben". Du musst dich nicht um technische Details kümmern, sondern musst AI nur klar sagen, was du willst, und es verwandelt deine Ideen in lauffähige Programme. Das ist das neue Paradigma des Programmierens im AI-Zeitalter – **Vibe Coding**.
+:::
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
+
+Gib nach der Eingabe unserer einfachen Anforderung auf **Full-Stack-Entwicklung** klicken, kannst du den kompletten Erstellungsprozess der Webseite in Echtzeit beobachten. Normalerweise reicht die Zeit für eine Tasse Kaffee, und die Webseite ist automatisch fertig!
+
+```
+Erstelle ein Snake-Spiel für mich:
+1. Steuerung der Schlange mit Pfeiltasten
+2. Die Schlange wird nach dem Fressen von Nahrung länger und der Punktestand erhöht sich
+3. Das Spiel endet bei Kollision mit Wänden oder dem eigenen Körper
+4. Es sollte Start- und Neustart-Buttons geben
+5. Die Oberfläche soll übersichtlich und ansprechend sein
+```
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
+
+Nach der Generierung siehst du rechts eine durchblätterbare Weboberfläche. Du kannst nach oben und unten scrollen, um den Seiteninhalt zu betrachten, oder oben auf die 🧭 -Schaltfläche klicken, um in den Vollbildmodus zu wechseln.
+
+> Von links nach rechts oben: Pfeil-Schaltfläche öffnet die Seitenleiste mit dem Gesprächsverlauf, Stift-Schaltfläche für einen neuen Dialog, Kreisschaltfläche aktualisiert die Seite, Kompass-Schaltfläche schaltet in den Vollbildmodus, Download-Schaltfläche lädt das Projekt herunter, <>-Schaltfläche schaltet zur Code-Ansicht, Publish-Schaltfläche veröffentlicht das Projekt.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
+
+Wenn du den Quellcode der Webseite anzeigen möchtest, klicke auf das Code-Symbol oben rechts, um den vollständigen Code zu sehen.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png)
+
+::: tip 🌐 Entdecke weitere AI-Programmierwerkzeuge
+
+Neben z.ai empfehlen wir dir, auch folgende hervorragende AI-Programmierplattformen auszuprobieren:
+
+| Werkzeug | Adresse | Merkmale |
+|------|------|------|
+| **Google AI Studio** (empfohlen) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Offizielles Google-Produkt, unterstützt Gemini-Modelle, geeignet für schnelle Prototypenentwicklung |
+| **Figma Make** | [figma.com/make](https://www.figma.com/make) | Tiefe Integration mit Designwerkzeugen, geeignet für Designer zur schnellen Erstellung interaktiver Prototypen |
+| **Coze** | [coze.com](https://www.coze.cn) | AI-Bot-Plattform von ByteDance, bietet No-Code-Visuellerstellung. Tiefe Integration mit nationalen Modellen wie Doubao und Kimi, unterstützt Plugin-Marktplatz, geplante Aufgaben und Multi-Kanal-Publishing |
+| **v0.dev** | [v0.dev](https://v0.dev) | AI-UI-Generierungstool von Vercel, generiert lauffähige React-Komponenten-Code aus Beschreibungen |
+| **Bolt.new** | [bolt.new](https://bolt.new) | AI-Full-Stack-Entwicklungsplattform von StackBlitz, generiert und deployt komplette Webanwendungen |
+| **Lovable** | [lovable.dev](https://lovable.dev) | Spezialisiert auf hochwertige React-Anwendungen, unterstützt GitHub-Integration und One-Click-Deployment |
+| **Replit Agent** | [replit.com](https://replit.com) | Online IDE mit integriertem AI-Programmierassistenten, unterstützt mehrere Sprachen und Echtzeit-Zusammenarbeit |
+
+Für einen detaillierten Vergleich und Tutorial zu Web-Programmierwerkzeugen siehe unsere Ergänzungslektüre: [Vergleich von 7 Vibe-Coding-Plattformen](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
+:::
+
+### 2.2 Was kann und was kann konversationelles Programmieren?
+
+Dieser Abschnitt konzentriert sich auf eine konkrete Frage: Wenn du dich nur auf konversationelle AI verlässt und keinen Code schreibst, wieweit kann es die Dinge vorantreiben?
+
+Auf Erfahrungsebene lautet eine relativ stabile Schlussfolgerung: Es kann dir helfen, etwas „kleines, aber Vollständiges" zu erstellen, aber „wann ist es genug" musst du bei jedem Schritt selbst entscheiden.
+
+#### Besser bei „kleinen und klaren" Anwendungen
+
+Aus dem vorherigen Snake-Beispiel hast du bereits ein typisches Muster gesehen:
+Solange du die Oberfläche und Interaktion klar beschreiben kannst, kann AI normalerweise innerhalb weniger Gesprächsrunden eine vollständige Webseite erstellen, die sich öffnen, anklicken und spielen lässt.
+
+Solche Aufgaben haben oft gemeinsame Merkmale:
+
+- Klaren Umfang: eine Webseite, ein einfaches internes Tool, ein kleines Spielprinzip
+- Sichtbare Ergebnisse: Du kannst sofort im Browser überprüfen, ob es wie erwartet funktioniert
+- Direkte Fehlerbehebung: Bei Problemen kannst du in nachfolgenden Gesprächen spezifische Phänomene beschreiben und Korrekturen anfordern (durch Kopieren von Fehlern oder Screenshots)
+
+Innerhalb dieser Grenzen kannst du konversationelle AI als einen „Hilfsentwickler mit guter Ausführung" betrachten. Du musst nur in jeder Runde die Anforderungen in natürlicher Sprache verfeinern und korrigieren, um schnell einen brauchbaren Prototyp zu erhalten.
+
+**Erfolgsquote von AI bei kleinen Projekten:**
+<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
+
+#### Große Projekte brauchen eine „Prozessperspektive"
+
+Sobald du den Bereich „klein und klar" verlässt und erwartest, dass AI mit wenigen Gesprächsrunden ein komplexes System End-to-End erstellt, wirst du schnell an Grenzen stoßen. Große Projekte müssen Backends anbinden, Datenbanken verbinden, Drittanbieterdienste integrieren und betreffen Berechtigungen, Sicherheit, Nebenläufigkeit und viele Geschäftsregeln – das Ziel ist die Lieferung eines kompletten Systems, nicht einer einzigen Webseite.
+
+In diesem Fall ist es vernünftiger, nicht alle Anforderungen auf einmal an AI zu werfen, sondern zuerst einen klaren Gesamtprozess zu skizzieren: Was sind die Schlüsselschritte, was sind die Eingaben, Ausgaben und Zustandsänderungen bei jedem Schritt, und welche Knoten sind am empfindlichsten für Leistung und Sicherheit. Basierend auf diesem Prozessdiagramm kannst du relativ unabhängige Schritte herauslösen und der konversationellen AI zur Generierung von Schnittstellen, Modulen, Skripten und Tests übergeben.
+
+Nach aktueller Leistungsfähigkeit ist AI besser darin, einzelne kleine Schritte zu beschleunigen, während du (oder dein Team) entscheidest, wie die Schritte aufgeteilt und verknüpft werden, sowie für die endgültige Architektur, Systemintegration und den Betrieb verantwortlich bist.
+
+#### Der Unterschied zwischen „können schreiben" und „brauchbar sein"
+
+Auf den ersten Blick scheint AI alles zu können, aber wie brauchbar sind diese Dinge wirklich, und wieweit? Wie sollten wir das einordnen?
+
+Eine hilfreiche Faustregel:
+
+::: warning ⚠️ Leitfaden für Anwendungsszenarien
+
+- **Prototyp / Demo / internes Tool**: Sehr geeignet, um von AI die erste Version erstellen zu lassen, dann selbst Details zu iterieren.
+- **Große Produkte für echte Nutzer**: Erfordert normalerweise langfristiges Engagement von Ingenieuren in Architektur, Abstraktion, Leistung und Wartung.
+- **Stark sicherheits- oder compliancekritische Systeme** (z. B. Zahlung, Risikokontrolle, Medizin): In der aktuellen Phase sollte man nicht „generieren und sofort live schalten"; es muss strenge Prüf- und Testprozesse geben.
+  :::
+
+Heutzutage kannst du AI relativ beruhigt als effizienten Partner für Demos und interne Tools betrachten:
+Solange du bereit bist, mehr zu testen, mehr zu iterieren und ein paar Runden „Hier stimmt etwas nicht, bitte korrigiere es und erkläre warum" zu spielen, ist die Qualität auf Prototyp- und Tool-Ebene normalerweise ausreichend und hat praktischen Wert.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
+      { title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
+      { title: 'Native Praxis', description: 'AI-native Snake bauen' },
+      { title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Praxis: Deine erste AI-native Anwendung
+
+Kommen wir zum praktischen Teil. Im vorherigen Abschnitt haben wir mit AI schnell einen spielbaren Snake-Prototyp erstellt und grob verstanden, was AI kann und was nicht. Als Nächstes lernen wir, wie man mit grundlegenden **Vibe Coding**-Techniken eine **moderne** AI-native Snake erstellt. Wir lassen die Schlange Textzeichen statt Bohnen fressen. Am Ende soll das Spiel basierend auf den gefressenen Textzeichen ein Gedicht und ein Bild generieren.
+Durch dieses praktische Beispiel verstehst du den Kern des neuen Programmierparadigmas: Wie man Anforderungen klar in natürlicher Sprache ausdrückt.
+
+### 3.1 AI-native Snake
+
+Am Anfang können wir auf die einfachste Weise mit dem großen Modell sprechen, was uns hilft, schnell einen Produktprototyp zu erhalten. Gib einfach im Chat ein:
+
+> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel für mich
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png)
+
+> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel, das Folgendes unterstützen soll:
+>
+> 1. Ich kann verschiedene Wörter fressen, die in einer Box gesammelt werden
+>    ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png)
+
+> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel, das Folgendes unterstützen soll:
+>
+> 1. Ich kann verschiedene Wörter fressen, die in einer Box gesammelt werden
+> 2. Wenn die Schlange 8 Wörter gefressen hat, soll das LLM basierend auf diesen Wörtern ein Gedicht erstellen; wir können das Gedicht nach Bedarf neu mischen.
+> 3. Nach Abschluss des Gedichts wird automatisch ein Bild basierend auf dem Gedicht erstellt.
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png)
+
+Beachte, dass während der Entwicklung Probleme auftreten können, bei denen zum Beispiel das Klicken auf einen Button keine Reaktion zeigt, Fehler bei der Nutzung von Funktionen auftreten, Funktionen nicht wie erwartet arbeiten oder die Frontend-Oberfläche nicht dem erwarteten Design entspricht.
+
+In diesem Fall müssen wir das Modell weiter fragen, um diese unerwarteten Probleme zu beheben.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png)
+
+### 3.2 Neue Funktionen zum Spiel hinzufügen
+
+Nachdem die Grundfunktionen fertig sind, können wir versuchen, unserem Programm einige neue Extras hinzuzufügen! Wenn du das Fressen von Wörtern oder Zeichen zu langweilig findest, kannst du die Schlange Wörter in verschiedenen Farben fressen lassen und entsprechend die Farbe der Schlange ändern.
+
+Du kannst auch Spezialeffekte für den „Fress"-Vorgang hinzufügen oder magische Wörter einführen, die Effekte auslösen – zum Beispiel die Geschwindigkeit oder Größe der Schlange erhöhen. Eine andere Idee ist, bei jedem gefressenen Wort ein Gedicht und ein Bild generieren zu lassen, anstatt bis zu acht Wörtern zu warten.
+
+Wenn das zu anspruchsvoll klingt, kannst du das Sprachmoduell direkt um Hilfe bitten! Es kann kreative Vorschläge machen, um dein Spiel interessanter zu gestalten. Probier es aus!
+
+```
+1. „Wörter-entfesseln-Welten"-Mechanismus
+Jedes Mal, wenn die Schlange ein Wort frisst, assoziiert das LLM poetisch damit (z. B. „Baum" → „Wald", „Schatten") und das Bildmodell erstellt sofort ein kleines Kunstwerk für dieses Wort. Diese Bilder setzen sich nach und nach zu einem einzigartigen, vom Spieler geschaffenen Panorama zusammen, sodass der Spieler bei jedem Durchlauf „malend und dichtend" spielt.
+
+2. „Gedicht-Puzzle"-Gameplay
+Jedes gefressene Wort löst das LLM aus, einen kurzen Vers zu generieren, und das Bildmodell erstellt eine Illustration. Diese Verse und Bilder setzen sich wie ein Puzzle zusammen und bilden am Ende einer Runde ein AI-gestaffeltes Gedicht und Bild.
+
+3. „Magische Wörter" & „Story-Verzweigungen"
+Besondere „magische Wörter" (z. B. „Wind", „Nacht", „Traum") lösen nicht nur LLM-Gedichte aus, sondern ändern auch die Stimmung oder das Thema der Szene – der Stil der Bildgenerierung wechselt zu Nacht, Sturm oder traumhafter Atmosphäre.
+Story-Verzweigung: Das LLM gibt zu Beginn ein Thema oder Rätsel (z. B. „Herbsterinnerungen"). Die Wortwahl des Spielers beeinflusst direkt die Entwicklung der Geschichte und der Gedichte, und das Bildmodell aktualisiert Hintergrund und visuelle Effekte in Echtzeit.
+
+4. „Echtzeit-Interaktionsgenerierung"
+Nach jedem Wort generiert das LLM eine Dialogzeile oder Beschreibung; NPCs im Spiel können mit dem Spieler „sprechen" oder die Umgebung ändert sich entsprechend.
+Das Aussehen der Schlange oder die Hindernisse im Spiel können sich basierend auf den gefressenen Wörtern visuell verändern – dank des Bildmodells.
+
+5. „Kreation & Teilen"
+Spieler können am Ende der Sitzung ihre AI-kreierten Gedichte und Bilder speichern und teilen und ihre einzigartige „AI-Kollaboration" präsentieren.
+Bestenlisten für „Schönstes Gedicht + Kunst", „Kreativste Wortkombination" etc., die Replayability und Kreativität fördern.
+
+6. „Satz-Snake"-Herausforderung
+Umgekehrter Modus: Das LLM gibt einen Vers oder ein Rätsel, und der Spieler muss die Schlange leiten, um die Wörter in der richtigen Reihenfolge zu fressen und den Satz zu rekonstruieren. Falsche Wörter lösen über das Bildgenerierungsmodell lustige oder künstlerische Konsequenzen aus.
+
+7. „Themen-Level" & „Stilauswahl"
+Zu Beginn des Spiels wählt der Spieler ein Thema (z. B. „Märchen", „Sci-Fi", „Tang-Gedichte"); LLM und Bildmodell passen Wortauswahl, Gedichtstil und visuelle Effekte entsprechend an, sodass jeder Durchlauf frisch wirkt.
+
+8. „Live-Zusammenarbeit"
+Wenn ein spezielles Wort gefressen wird, kann das LLM den Spieler auffordern, einen Satz oder Stil einzugeben, und generiert dann entsprechende Verse und Illustrationen – eine echte Mensch-AI-Kollaboration.
+
+9. „AI-Easter Eggs & Erfolge"
+Bestimmte Wortkombinationen werden vom LLM als spezielle Themen oder interne Witze erkannt (z. B. „Mond", „Osmanthus", „Flussufer") und lösen seltene Verse und Illustrationen aus, die Erkundung belohnen.
+
+10. „Wachsende Geschichte"
+Mit dem Wachsen der Schlange generiert das LLM ein fortlaufendes Geschichtsgedicht, und das Bildmodell erstellt ein nahtloses langes Scroll- oder Panorama-Bild, sodass der Spieler gleichzeitig „schreibt, malt und spielt".
+```
+
+Darüber hinaus können wir das LLM bitten, projektweite Prompts für uns zu generieren. Im vorherigen Abschnitt haben wir nur selbst den Prompt für das Snake-Spiel geschrieben. Lass uns jetzt versuchen, das Modell einen Prompt mit einem Gesamtframework und Implementierungspfad generieren zu lassen (du kannst das direkt mit z.ai machen).
+
+Wenn du lernen möchtest, bessere Prompts zu schreiben, siehe das [Prompt-Engineering-Appendix](/de-de/appendix/8-artificial-intelligence/prompt-engineering).
+
+> Ich möchte, dass AI ein Web-Snake-Spiel generiert. Ich brauche einen umfassenderen Prompt, damit das Ergebnis beeindruckender und interessanter wird. Bitte generiere einen entsprechenden Prompt. Das aktuelle Ziel ist: ein Snake-Spiel zu generieren, das die Funktion des Fressens verschiedener Wörter zur Gedichtgenerierung implementieren soll und ein Bildgenerierungsmodul enthalten sollte.
+
+Die Antwort von z.ai wird ungefähr so aussehen:
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png)
+
+Wir können diesen Prompt verwenden, um das Projekt im Full-Stack-Modus neu zu generieren:
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png)
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
+      { title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
+      { title: 'Native Praxis', description: 'AI-native Snake bauen' },
+      { title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
+    ]" />
+  </ClientOnly>
+</div>
+
+### 3.3 Versuche, andere Mini-Spiele zu erstellen
+
+Neben dem Snake-Spiel können wir der Fantasie freien Lauf lassen.
+
+Erschaffe alles, was du willst, versuche sogar, alles kaputt zu machen! Und dann fang von vorne an!
+
+```
+1. AI-Kunstgalerie-Plattform
+   Beschreibung: Eine Online-Galerie zur Präsentation von AI-generierter Kunst, auf der Nutzer Werke hochladen, teilen und kommentieren können.
+   Funktionen: Nutzerkontosystem, Kunstwerk-Upload und -Präsentation, Bewertungssystem, Kategorisierungsbrowser, AI-Generierungstool-Integration.
+   Technische Highlights: React/Vue-Frontend, Node.js-Backend, MongoDB-Datenbank, AI-API-Integration.
+
+2. Retro-Spiele-Archiv
+   Beschreibung: Eine Website, die klassische Spiele ehrt, mit Spielgeschichte, Spielanleitungen und online spielbaren Retro-Spielen.
+   Funktionen: Spieledatenbank, Zeitstrahl-Anzeige, Online-Emulator, Nutzerkommentare, Spielsammlung.
+   Technische Highlights: Responsive Design, WebGL/Canvas-Spiele, RESTful API, Nutzer-Authentifizierungssystem.
+
+3. Nachhaltiger-Lebensstil-Tracker
+   Beschreibung: Eine Website, die Nutzern hilft, ihren CO2-Fußabdruck durch Umweltschutztipps und Community-Challenges zu verfolgen und zu reduzieren.
+   Funktionen: Persönlicher CO2-Rechner, Zielsetzung, Fortschrittsverfolgung, Community-Challenges, Umweltschutzwissensdatenbank.
+   Technische Highlights: Datenvisualisierung, mobile Optimierung, Social-Funktionen, Push-Benachrichtigungen.
+
+4. Virtuelle-Küchen-Assistent
+   Beschreibung: Eine AI-basierte Kochberatungsplattform mit personalisierten Rezeptvorschlägen und Schritt-für-Schritt-Kochanweisungen.
+   Funktionen: Rezeptdatenbank, Zutatenerkennung, personalisierte Empfehlungen, Küchentimer, Nährwertanalyse.
+   Technische Highlights: Bilderkennungs-API, ML-Empfehlungssystem, Sprachsteuerung, Echtzeit-Videoführung.
+
+5. Indie-Musik-Entdeckungsplattform
+   Beschreibung: Eine Musikstreaming-Plattform, die sich auf unabhängige und aufstrebende Künstler konzentriert, mit einzigartigem Entdeckungserlebnis.
+   Funktionen: Musikstreaming, Künstlerprofile, personalisierte Empfehlungen, Playlist-Erstellung, Community-Bewertungen.
+   Technische Highlights: Audio-Stream-Verarbeitung, Empfehlungsalgorithmus, Social-Funktionen, Musikvisualisierung.
+
+6. Minimalistische Aufgabenverwaltung
+   Beschreibung: Ein Aufgabenverwaltungstool mit zen-ästhetischem Design, das sich auf einfache und effiziente Aufgabenorganisation konzentriert.
+   Funktionen: Aufgabenerstellung und -kategorisierung, Prioritäteneinstellung, Fortschrittsverfolgung, Teamzusammenarbeit, Datenanalyse.
+   Technische Highlights: Minimalistisches UI-Design, Drag-and-Drop, Echtzeit-Synchronisation, plattformübergreifende Kompatibilität.
+
+7. Sci-Fi-Schreibwerkstatt
+   Beschreibung: Eine Plattform für Sci-Fi-Autoren mit kreativen Werkzeugen und Inspiration, einschließlich Worldbuilding-Hilfe und Charakterentwicklungstools.
+   Funktionen: Geschichtenstrukturwerkzeuge, Charakterprofile, Worldbuilding-Vorlagen, Schreibstatistiken, Community-Feedback.
+   Technische Highlights: Rich-Text-Editor, Datenvisualisierung, kollaboratives Editieren, AI-gestützte Kreation.
+
+8. Persönliches Wissens-Graph
+   Beschreibung: Ein Tool, das Nutzern hilft, persönliche Wissensnetzwerke aufzubauen und verschiedene Ideen und Informationen zu visualisieren und zu verknüpfen.
+   Funktionen: Knotenerstellung und -verknüpfung, Tag-System, Suchfunktion, Import/Export-Werkzeuge, Visualisierungsdiagramme.
+   Technische Highlights: Graph-Datenbank, Datenvisualisierungsalgorithmen, Markdown-Unterstützung, geräteübergreifende Synchronisation.
+
+9. Virtueller Pflanzengarten
+   Beschreibung: Eine interaktive Pflanzenenzyklopädie, in der Nutzer die Pflanzenwelt erkunden und virtuelle Gärten anlegen können.
+   Funktionen: Pflanzendatenbank, 3D-Pflanzenmodelle, Wachstumssimulation, Gartenbauanleitung, Community-Showcase.
+   Technische Highlights: 3D-Rendering, saisonale Wechselsimulation, AR-Integration, Pflanzen-Identifikations-API.
+
+10. Programmier-Challenge-Arena
+    Beschreibung: Eine Online-Wettbewerbsplattform für Programmierer mit verschiedenen Schwierigkeitsstufen.
+    Funktionen: Herausforderungsaufgaben, Code-Editor, automatische Bewertung, Bestenliste, Lernpfad.
+    Technische Highlights: Code-Sandbox-Umgebung, Echtzeit-Bewertungssystem, Algorithmus-Visualisierung, Social-Learning-Funktionen.
+```
+
+Und noch mehr... Wenn du gerne spielst, lass uns gemeinsam versuchen, Spiele zu erschaffen!
+
+```
+1. 3D Open-World RPG
+   Beschreibung: Ein Fantasy-RPG mit weitläufiger Open World, Quests und Charakterentwicklung.
+   Funktionen: Tag-Nacht-Zyklus, dynamisches Wetter, Skill-Baum, Multiplayer-Koop, Handwerkssystem.
+   Technische Highlights: Three.js oder Babylon.js für 3D-Rendering, serverseitige Spiellogik, Charakteranpassung, Save-System.
+
+2. Ego-Shooter (FPS) Arena
+   Beschreibung: Ein schnelles Multiplayer-FPS mit verschiedenen Spielmodi und Karten.
+   Funktionen: Team-Deathmatch, Capture-the-Flag, Waffenanpassung, Rangliste.
+   Technische Highlights: WebGL/Three.js für 3D-Grafik, Multiplayer-Netzwerkcode, Treffererkennung, Voice-Chat.
+
+3. AI-Schach und Multiplayer
+   Beschreibung: Eine voll funktionsfähige Schachplattform mit AI-Gegnern und Online-Multiplayer.
+   Funktionen: AI-Schwierigkeitsstufen, Endspiel-Herausforderungen, Turniermodus, Replay-Analyse.
+   Technische Highlights: Schachlogikbibliothek, WebSocket für Echtzeit-Multiplayer, ELO-Ranglistensystem, Anti-Cheat.
+
+4. Mahjong Online-Multiplayer
+   Beschreibung: Ein traditionelles Mahjong-Spiel mit Online-Multiplayer und Punktestand.
+   Funktionen: Mehrere Regelwerke, private Räume, Ranglistensystem, Replay-Funktion.
+   Technische Highlights: Tile-Matching-Logik, Echtzeit-Multiplayer, Lobby-System, Punktestand-Tracking.
+
+5. Rundenbasiertes Strategiespiel
+   Beschreibung: Ein taktisches Strategiespiel mit Raster-Kampf und Einheitenverwaltung.
+   Funktionen: Kampagnenmodus, Gefechtsmodus, Einheitenupgrade, Nebel des Krieges, Multiplayer.
+   Technische Highlights: Raster-Bewegungssystem, AI-Entscheidungsfindung, Runden-Synchronisation, Save/Load-System.
+
+6. Zeitfahren-Rennspiel
+   Beschreibung: Ein 3D-Rennspiel mit Fokus auf Zeitfahren und Streckenrekorde.
+   Funktionen: Mehrere Strecken, Autoanpassung, Geister-Replay, Bestenliste.
+   Technische Highlights: 3D-Auto-Physik, Streckeneditor, Replay-System, Online-Bestenliste.
+
+7. Kartenspiel (Deck-Building)
+   Beschreibung: Ein strategisches Kartenspiel, in dem Spieler Decks bauen und gegen Gegner antreten.
+   Funktionen: Kartensammlung, Deck-Building, Rangliste, Saison-Events.
+   Technische Highlights: Kartenspiellogik, Matchmaking-System, AI-Gegner, Kartenanimationen.
+
+8. Battle Royale (Top-Down 2D)
+   Beschreibung: Ein Top-Down-2D-Battle-Royale mit schrumpfender Spielzone und Loot-Mechanik.
+   Funktionen: Solo- und Squad-Modus, Waffenvielfalt, In-Game-Events, Bestenliste.
+   Technische Highlights: Echtzeit-Multiplayer, Zonen-Schrumpfungslogik, Loot-Spawn-System, Matchmaking.
+
+9. Horror-Überlebensspiel (Ego-Perspektive)
+   Beschreibung: Ein Ego-Perspektive-Horrorspiel mit Ressourcenmanagement und Fluchtmechanik.
+   Funktionen: Atmosphärische Umgebung, Rätsel, Enemy-AI, Multiple Endings.
+   Technische Highlights: Dynamische Beleuchtung, Sound-Design, Enemy-Pathfinding, Save-System.
+
+10. Rhythmus-Musikspiel (3D)
+    Beschreibung: Ein 3D-Rhythmus-Spiel, in dem Spieler im Takt der Musik Noten treffen.
+    Funktionen: Mehrere Schwierigkeitsstufen, Streckeneditor, Custom-Song-Unterstützung, Bestenliste.
+    Technische Highlights: Audioanalyse, Beat-Synchronisation, 3D-Noten-Spuren, Input-Timing-Erkennung.
+```
+
+## 📚 Assignment
+
+<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🎯 Kapitelaufgabe: Erstelle deine erste AI-native Mini-Spiele</div>
+  </template>
+
+  <p>
+    In diesem Abschnitt hast du den kompletten Prozess von „Gespräch-generiertes Snake" bis zum „Verständnis des AI-native Mini-Spiel-Design-Gedankens" durchlaufen. Die folgende Aufgabe hilft dir, dieses Verständnis in echte Fähigkeiten umzuwandeln.
+  </p>
+
+  <ol>
+    <li>
+      <strong>Reproduziere das AI-native Snake-Spiel vollständig</strong>
+      <ul>
+        <li>Mindestens implementiert: Die Schlange kann sich bewegen, nach dem Fressen von „Nahrung" ändern sich Länge und Punktestand, Kollision mit Wänden oder dem eigenen Körper beendet das Spiel.</li>
+        <li>Während der Reproduktion übe, Fehlerphänomene + Fehlermeldungen + relevante Code-Snippets zusammen an AI zu übergeben und es um Korrektur im „Anfängermodus" zu bitten.</li>
+      </ul>
+    </li>
+    <li>
+      <strong>(Optional) Erstelle 1 AI-native Mini-Spiel oder Demo</strong>
+      <ul>
+        <li>Kann jedes leichte Gameplay rund um Text, Bilder, Musik oder Rhythmus sein, z. B. „Wörter fressen und Gedichte schreiben", „Rhythmus-Tippen", „Generatives Endless Runner" etc.</li>
+        <li>Der Fokus liegt nicht auf aufwendiger Grafik, sondern darauf, dass du klar sagen kannst: Wobei hat AI konkret geholfen, und welches „schwer manuell Machbare oder Umständliche" es gelöst hat.</li>
+      </ul>
+    </li>
+  </ol>
+
+  <p>
+    Das ist das komplette Tutorial! Du brauchst möglicherweise <strong>4 Stunden</strong>, um alle Inhalte abzuschließen und dein eigenes Snake-Spiel zu bauen. Keine Eile – erkunde, experimentiere und genieße den Prozess. Wenn du auf Konzepte stößt, die du nicht verstehst, schau in den Anhang unten.
+  </p>
+</el-card>
+
+## Anhang
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
+  <div style="font-weight: bold; margin-bottom: 8px;">Anhang-Navigation</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Hier sind einige grundlegende Konzepte zu diesem Kapitel: Wenn du beim Lernen auf Fragen wie „Was ist Frontend?" oder „Was genau ist Vibe Coding?" stößt, kannst du jederzeit hier nachschlagen.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>Anhang 1: Brauchen wir Frontend-Entwicklungswissen?</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Verstehe die Rolle des Frontends in einer Anwendung und was „sichtbar" bedeutet.</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>Anhang 2: Was genau ist Vibe Coding</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Verstehe den Kerngedanken des „konversationellen Entwickelns" und wie man mit AI zusammenarbeitet.</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="16" style="margin-top: 10px;">
+    <el-col :span="12">
+      <a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>Anhang 3: Modellkontext</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Verstehe Konzepte wie „Kontextlänge", die oft gehört aber leicht verwechselt werden.</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>Anhang 4: Instruction-Following-Fähigkeit</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Verstehe, warum Modelle manchmal „nicht zuhören", und wie man klarer schreibt.</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    Tipp: Du kannst mit Ctrl/⌘+F nach Stichwörten suchen oder unverständliche Abschnitte an AI kopieren, um sie im „komplett für Anfänger verständlichen" Modus erklären zu lassen.
+  </div>
+</el-card>
+
+## <span id="appendix-1">[Anhang 1: Brauchen wir Frontend-Entwicklungswissen?](#appendix-nav)</span>
+
+::: tip 💡 Ein Satz zusammengefasst
+Du musst nicht programmieren können, aber Grundkenntnisse helfen dir, Anforderungen besser an AI zu beschreiben.
+:::
+
+<el-row :gutter="16" style="margin: 20px 0;">
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">👁️</span>
+          <span style="font-weight: bold;">Frontend</span>
+          <el-tag type="success" size="small">Sichtbar</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        Alles, was Nutzer <strong>sehen und anklicken</strong> können
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Webseiten-Titel, Text, Bilder</li>
+          <li>Schaltflächen, Eingabefelder, Dropdown-Menüs</li>
+          <li>Spieloberfläche, Animationen</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">⚙️</span>
+          <span style="font-weight: bold;">Backend</span>
+          <el-tag type="info" size="small">Unsichtbar</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        Datenverarbeitung auf dem Server
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Nutzerpunktestand-Speicherung</li>
+          <li>Login-Authentifizierung</li>
+          <li>Level-Inhaltsvergabe</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+### Frontend-Dreiercombo
+
+Der Browser baut Seiten mit drei Arten von „Code":
+
+<el-tabs type="border-card" style="margin: 20px 0;">
+  <el-tab-pane label="🏗️ HTML - Struktur">
+    <div style="padding: 10px;">
+      <p><strong>Funktion:</strong> Definiert, <strong>welche</strong> Elemente auf der Seite vorhanden sind</p>
+      <p><strong>Analogy:</strong> Strukturskizze eines Hauses (wo Wände, Türen, Fenster sind)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>&lt;button&gt;Klick mich&lt;/button&gt;
+&lt;h1&gt;Überschrift&lt;/h1&gt;
+&lt;img src="photo.png"&gt;</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="🎨 CSS - Stil">
+    <div style="padding: 10px;">
+      <p><strong>Funktion:</strong> Steuert, <strong>wie</strong> Elemente aussehen</p>
+      <p><strong>Analogy:</strong> Inneneinrichtung eines Hauses (Farbe, Material, Layout)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button {
+  background: blue;
+  color: white;
+  border-radius: 8px;
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="⚡ JavaScript - Verhalten">
+    <div style="padding: 10px;">
+      <p><strong>Funktion:</strong> Lässt die Seite <strong>interaktiv</strong> werden</p>
+      <p><strong>Analogy:</strong> Elektrische Schalter eines Hauses (Reaktion auf Klicks)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button.onclick = () => {
+  alert('Du hast mich geklickt!')
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+</el-tabs>
+
+### Wie wird Code zur Seite?
+
+Wenn du eine Webseite öffnest, verarbeitet der Browser drei Arten von Code nacheinander:
+
+**1. HTML – Seitenstruktur definieren**
+Der Browser parst zuerst HTML, versteht, welche Elemente vorhanden sind (Überschriften, Absätze, Bilder, Buttons usw.) und ihre Hierarchie.
+
+**2. CSS – Stile anwenden**
+Dann wendet der Browser CSS-Regeln an und fügt den Elementen Stile hinzu: Farbe, Größe, Position, Abstand usw., damit die Seite ansprechend wird.
+
+**3. JavaScript – Interaktion hinzufügen**
+Schließlich wird JavaScript ausgeführt, um die Seite „lebendig" zu machen: auf Klicks reagieren, Formulare absenden, Animationen abspielen usw.
+
+**4. Seitendarstellung**
+Das Zusammenspiel dieser drei ergibt die Webseite, die du schließlich siehst.
+
+### Moderne Frontend-Frameworks: Von HTML zu React/Vue
+
+Die zuvor vorgestellte HTML/CSS/JavaScript-Dreiercombo ist die Grundlage aller Webseiten. Wenn Seiten jedoch komplexer werden, stößt die direkte Nutzung auf Herausforderungen: Code ist schwer wartbar, viel Wiederholung, komplizierte Datensynchronisation.
+
+**Moderne Frontend-Frameworks** (wie React, Vue, Angular) bauen auf HTML/CSS/JS auf und machen die Entwicklung effizienter:
+
+**1. HTML/CSS/JS (Grundstufe)**
+Direkte Manipulation von Seitenelementen, geeignet für einfache Seiten. Bei wachsendem Code vermischen sich alle Logiken, was die Wartung erschwert.
+
+**2. jQuery (Übergangsphase)**
+Vereinfachte DOM-Manipulation, machte Code übersichtlicher. Aber Seitenstatus musste weiterhin manuell verwaltet werden, bei Datenänderungen mussten selbst die entsprechenden Elemente gefunden und aktualisiert werden.
+
+**3. React/Vue (Moderne Phase)**
+Nutzt komponentenbasierte und zustandsgesteuerte Designs:
+- **Komponenten**: Zerlegt die Seite in unabhängige, wiederverwendbare Module (wie Buttons, Karten, Navigationsleisten)
+- **Zustandsgesteuert**: Bei Datenänderungen aktualisiert das Framework automatisch die entsprechende Oberfläche, ohne manuelle Eingriffe
+
+::: tip 💡 Einfach verstanden
+- **HTML/CSS/JS** = Grundmaterialien (Ziegel, Zement, Bewehrung)
+- **React/Vue** = Baugerüst (stellt Regeln und Werkzeuge für den Hausbau bereit)
+
+Im Zeitalter des AI-gestützten Programmierens musst du nicht alle Details von Frameworks verstehen; es reicht, die Grundkonzepte zu kennen, um AI durch natürliche Sprachbeschreibungen Code generieren zu lassen.
+:::
+
+### Im Vibe Coding
+
+**Kernpunkt: Du musst keinen Code schreiben, du musst nur beschreiben können.**
+
+Nach dem Verständnis von Frontend-Konzepten kannst du Anforderungen so an AI beschreiben:
+
+> „Erstelle mit React eine Bestenliste-Seite: rechts die Punkteliste, bei Klick auf eine Zeile werden unten die Spielerdetails angezeigt, im minimalistischen modernen Stil."
+
+Wenn du HTML, CSS, JavaScript und andere Frontend-Grundlagen vertiefen möchtest, siehe das [Web-Basics-Appendix](/de-de/appendix/3-browser-and-frontend/javascript-deep-dive). Für die Entwicklungsgeschichte der Frontend-Technologie siehe das [Frontend-Evolutionsgeschichte-Appendix](/de-de/appendix/3-browser-and-frontend/frontend-frameworks).
+
+## <span id="appendix-2">[Anhang 2: Was genau ist Vibe Coding](#appendix-nav)</span>
+
+> 💡 Was ist Vibe Coding? Der Informatiker [Andrej Karpathy](https://karpathy.ai/) (Mitbegründer von OpenAI, ehemaliger AI-Chef bei Tesla) prägte im Februar 2025 den Begriff **Vibe Coding**. Dieser Begriff beschreibt eine Programmiermethode, die auf LLMs basiert und **es Programmierern ermöglicht, lauffähigen Code durch natürliche Sprachbeschreibungen statt manuelles Codieren zu generieren.**
+
+![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png)
+
+Wörtlich verstanden kann Vibe Coding als „Entwicklung durch Sprechen" verstanden werden. Der Kernwandel besteht darin: Du musst nicht mehr selbst Code Zeile für Zeile schreiben, Syntax nachschlagen und Bugs beheben; stattdessen beschreibst du in natürlicher Sprache, was du willst, z. B.:
+
+„Ich brauche eine Login-Seite mit Eingabefeld für Handynummer und Bestätigungscode."
+„Nach erfolgreichem Login Weiterleitung zur Startseite mit Benutzername oben rechts."
+„Ein einfaches Snake-Minispiel mit Tastatursteuerung."
+
+Große Sprachmodelle (LLM) übersetzen solche Beschreibungen automatisch in wirklich lauffähigen Code und generieren die entsprechende Seiten, Logik und Datenstrukturen. Nachdem du das Ergebnis gesehen hast, kannst du mit natürlicher Sprache Änderungswünsche äußern, z. B. „Button etwas größer", „Hintergrund dunkler", „Punktestand speichern und Bestenliste anzeigen", und AI passt die Implementierung weiter an.
+
+In diesem Modus musst du nicht erst eine Programmiersprache lernen, um Code zu schreiben; stattdessen konzentrierst du dich darauf: klar zu beschreiben, was getan werden soll, das Ergebnis zu beurteilen und neue Änderungen vorzuschlagen. AI übernimmt die Umsetzung dieser übergeordneten Ideen in konkrete Implementierung und reduziert so mechanische, repetitive Codierungsarbeit erheblich.
+
+Für weitere Details zu Vibe Coding siehe: [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
+
+Für mehr von Karpathys Gedanken siehe: [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
+
+### Wie man sich als Vibe-Coding-Meister ausgibt
+
+In der Praxis werden beim echten Vibe Coding oft keine komplexen Prompts verwendet. Vielleicht brauchst du am Anfang einen konkreten, etwas komplexen Prompt für das gesamte Programm, aber danach genügen oft einfache Prompts wie diese:
+
+```
+"Es gibt einen Bug im Code, bitte beheben."
+"Ich will keinen Teil-Code, gib mir den kompletten korrigierten Code."
+"Dein Code hat immer noch Probleme."
+"Bitte korrigiere erneut und gib den vollständigen korrigierten Code."
+"Es lief vorhin, warum geht es jetzt nicht mehr?"
+"Hast du mich nicht verstanden? Ändere nicht meinen ursprünglichen Code."
+"Füge keine Debugging-Funktionen hinzu."
+"Tu nichts, was ich nicht verlangt habe."
+"Wo ist die Funktion, die ich verlangt habe?"
+"Verstehst du nicht, was ich sage?"
+"Ich brauche nur eine Funktion."
+"Ich habe dir gesagt, meinen vorherigen Code zu beachten."
+"Bitte füge keine unnötigen Kommentare hinzu."
+"Bitte ändere nicht die grundlegende Logik meines ursprünglichen Codes."
+"Hilf mir, den Code zu ändern."
+"Ändere basierend auf meinem Code..."
+"Ändere nicht meine Variablennamen!!!"
+"Ändere nicht die ursprünglichen Funktionsnamen!"
+"Rühr nicht an meinen Variablen."
+"Füge keine zusätzlichen Funktionen hinzu."
+"Generiere nicht nur ein Gerüst, sondern vollständigen Code."
+```
+
+Das mag übertrieben klingen, aber in der Praxis sind das genau die Prompts, die wir täglich verwenden können. Wegen der **Kontextlängenbegrenzung** großer Sprachmodelle oder weil ihre **Instruction-Following-Fähigkeit** nicht immer stark ist, kann das Modell Inhalte vergessen, die früher im Gespräch besprochen wurden. Beim Vibe Coding bevorzugen wir Modelle mit langem Kontext und starker Instruction-Following-Fähigkeit; wir können dies anhand von Rankings oder Metriken beurteilen.
+
+Alternativ neigen Modelle dazu, im Stil ihrer Trainingsdaten zu antworten. Manche sprechen sehr formell, andere mögen viele Verzierungen, und einige Modelle mögen es, viele Kommentare oder unnötige Module im Code hinzuzufügen.
+
+## <span id="appendix-3">[Anhang 3: Modellkontext](#appendix-nav)</span>
+
+Modellkontext kann als das Kurzzeitgedächtnis von AI verstanden werden. Er bezieht sich auf alle Textinhalte, die das Modell in einer einzelnen Konversation oder Aufgabe „sehen" und „erinnern" kann, einschließlich deiner vorherigen Fragen, Systemanweisungen, relevante Materialien usw.
+
+Gerade wegen des Kontexts kann AI verstehen, dass du eine Frage stellst, die sich auf frühere Inhalte bezieht, und kann runde für runde, scheinbar kohärente natürliche Gespräche führen. Ohne Kontext würde jede deiner Aussagen im Modell wie eine völlig neue Frage wirken, und es könnte nicht wissen, was du zuvor gesagt hast.
+
+Jedes Modell hat seine eigene effektive Kontextlänge (Context Window). Diese wird normalerweise in Token (grob als „Wortfragmente") gemessen; aktuell liegen die meisten Modelle zwischen 32k und 128k Token. Je länger der Kontext, desto mehr kann das Modell „lesen", z. B.:
+
+- Einmal eine längere Arbeit oder einen Bericht lesen
+- In einem Gespräch mehrere Quellen und Fälle referenzieren
+- Das Modell komplexe Diskussionsergebnisse aus früheren Runden merken lassen
+
+Wenn deine Eingabe die Kontextbegrenzung des Modells erreicht oder überschreitet, treten häufig folgende Phänomene auf:
+
+- Das Modell beginnt, Details oder Schlüsselinformationen aus längeren Texten zu vergessen
+- Im weiteren Verlauf des Gesprächs weicht das Thema vom ursprünglichen Ziel ab
+- Zwischen verschiedenen Fragen zum selben Material sind die referenzierten Inhalte inkonsistent
+
+Diese Phänomene bedeuten nicht, dass das Modell plötzlich „dümmer" wird, sondern sind natürliche Folgen, wenn die Kontextkapazität erschöpft oder fast erschöpft ist.
+
+In der Praxis wünscht man sich sowohl einen möglichst langen Kontext als auch das Bewusstsein:
+- Je länger der Kontext, desto mehr Rechenressourcen werden verbraucht
+- Die entsprechenden Aufrufkosten steigen ebenfalls
+
+Daher muss man bei der Entwicklung von AI-Anwendungen eine Balance finden zwischen dem, was das Modell sehen kann, und der Kostenkontrolle sowie Effizienzsteigerung. Zum Beispiel:
+- Informationen, die langfristig erhalten bleiben müssen, werden aufbereitet, bevor sie dem Modell übergeben werden
+- Unnötige Details werden nicht immer wieder unverändert in den Kontext gestopft
+- Externe Wissensdatenbanken übergeben „langfristiges Gedächtnis" an das System, anstatt es in den Modellkontext zu quetschen
+
+## <span id="appendix-4">[Anhang 4: Instruction-Following-Fähigkeit](#appendix-nav)</span>
+
+Die Instruction-Following-Fähigkeit bezieht sich darauf: Ob das Modell nach dem Verstehen deiner Anweisung in der Lage ist, diese korrekt und vollständig auszuführen. Sie umfasst nicht nur die Beantwortung von Fragen, sondern auch die Ausführung von Aufgaben im angegebenen Format, Stil und mit den angegebenen Schritten.
+
+Zum Beispiel sind folgende Anweisungen mit klaren Anforderungen:
+
+- Fasse diesen Artikel in drei Hauptpunkte zusammen
+- Schreibe eine höfliche Antwort-E-Mail im formellen Stil
+- Übersetze dieses Wort ins Englische und bilde jeweils einen Beispielsatz
+- Extrahiere Autor, Datum und Hauptereignis aus dem Artikel
+
+Ein Modell mit starker Instruction-Following-Fähigkeit hat normalerweise folgende Eigenschaften:
+
+- Ausgabe in der geforderten Menge  
+  Wenn drei Hauptpunkte gefordert werden, werden nicht fünf geliefert.
+- Abdeckung aller angegebenen Elemente  
+  Wenn Autor, Datum und Ereignis gefordert werden, wird keines davon weggelassen.
+- Einhaltung des angegebenen Formats und Stils  
+  Wenn ein formeller Stil gefordert wird, wird keine zu umgangssprachliche Antwort geliefert.
+- Keine unnötigen zusätzlichen Erweiterungen  
+  Wenn nur Übersetzung und Beispielsatz gefordert werden, wird kein großer irrelevanter Erklärungsblock ausgegeben.
+
+In der Praxis ist eine starke Instruction-Following-Fähigkeit aus folgenden Gründen sehr wichtig:
+
+- Verbesserte Stabilität: Bei gleicher Anweisung sind Ausgabestruktur und Verhaltensmuster über verschiedene Zeitpunkte und bei mehrfacher Ausführung konsistenter, ohne willkürliche Ergänzungen
+- Verbesserte Reproduzierbarkeit: Wenn du einen Prompt in ein Produkt oder einen Prozess integrierst, kannst du erwarten, wie das Modell grob antwortet, was Testen und Iteration erleichtert
+- Einfachere Systemintegration: Wenn die Modellausgabe dem erwarteten Format entspricht, ist die automatische Anbindung an Backend-Programme, Workflows oder andere Tools einfacher
+
+Daher sollte man bei der Auswahl und Bewertung eines großen Sprachmodells neben Intelligenz und Wissensabdeckung besonders auf seine Instruction-Following-Fähigkeit achten. Für industrielle Anwendungen ist oft wichtiger, ob es stabil und korrekt Anweisungen ausführen kann, als gelegentlich eine beeindruckende Antwort zu liefern.
+
+<RelatedArticlesSection
+  title="Weiterlernen"
+  description="Von der spielerischen Erfahrung ausgehend, empfehlen wir dir, zur lokalen Entwicklung und Produktpraxis überzugehen."
+  :items="relatedArticles"
+/>
+---
+title: 'Anfaenger 1: Im KI-Zeitalter reicht Reden zum Programmieren'
+description: 'Baue eine AI-native Snake-Variante per Dialog und uebertrage den Workflow auf dein eigenes Mini-Spiel oder Demo.'
+---
diff --git a/docs/de-de/stage-1/appendix-a-product-thinking/index.md b/docs/de-de/stage-1/appendix-a-product-thinking/index.md
new file mode 100644
index 0000000..bec1544
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-a-product-thinking/index.md
@@ -0,0 +1,154 @@
+---
+title: 'Produktthinking und Loesungsentwurf'
+description: 'Wie du von "ein Tool bauen" zu "ein wertvolles Produkt entwerfen" kommst: Ideenquellen, Zerlegung in Loesungsbausteine, Verfeinerung und sinnvoller AI-Einsatz.'
+---
+
+<script setup>
+const duration = 'ca. <strong>6 Stunden</strong>'
+</script>
+
+# Produktthinking und Loesungsentwurf
+
+## Kapiteluebersicht
+
+<ChapterIntroduction :duration="duration" :tags="['Produktthinking', 'Beduerfnisanalyse', 'Loesungsentwurf', 'Nutzereinblicke']" coreOutput="1 kompletter Produktentwurf" expectedOutput="Umsetzbare Produktideen">
+
+In den vorherigen Kapiteln hast du gelernt, wie du mit AI IDEs schnell Prototypen und kleine Tools umsetzt. In diesem Anhang verschieben wir den Fokus von <strong>"Kann ich es bauen?"</strong> zu <strong>"Was lohnt es sich zu bauen?"</strong>.
+
+Wir behandeln:
+
+1. Was ist eine Idee und wann ist sie gut genug, um Zeit zu investieren?
+2. Wie zerlegt man eine Idee in eine umsetzbare App (Scope, Nutzer, Szenario, Kernfluss)?
+3. Wie wird aus "funktioniert irgendwie" eine Anwendung, die Menschen gerne nutzen?
+4. Wo verstärkt AI den Wert wirklich (und wo ist AI nur Deko)?
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Ideenquellen', description: 'Verlaessliche Produktideen finden' },
+      { title: 'Loesungszerlegung', description: 'Ideen in umsetzbare Apps verwandeln' },
+      { title: 'Verfeinerung', description: 'Von funktionsfaehig zu benutzerfreundlich' },
+      { title: 'AI-Verstaerkung', description: 'AI sinnvoll einsetzen, um Wert zu schaffen' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Was du lernen wirst
+
+Am Ende solltest du beantworten koennen:
+
+1. Woher kommen verlaessliche Ideen?
+2. Wie wird aus einer Idee ein umsetzbarer Loesungsentwurf?
+3. Woran erkenne ich eine "gute" App und wie verbessere ich sie?
+4. An welcher Stelle setze ich AI ein, um den Nutzen zu vergroessern?
+5. Wie finde ich die ersten echten Nutzer?
+
+---
+
+# 1. Verlaessliche Ideen finden
+
+Viele suchen nach einem "genialen Einfall". In der Praxis entstehen die meisten guten Apps aus konkreten Situationen: wiederkehrende Probleme, echte Friktion, klare Zielgruppen.
+
+## 1.1 Was ist eine Idee?
+
+Eine Idee ist nicht nur Begeisterung. Eine umsetzbare Idee hat mindestens:
+
+1. Eine klare Zielgruppe (wer genau?).
+2. Ein konkretes Nutzungsszenario (wann/wo tritt das Problem auf?).
+3. Eine konkrete Aufgabe (welches Ergebnis will der Nutzer erreichen?).
+4. Eine plausible Verbesserung gegenueber dem Status quo (warum ist es heute nervig/teuer/risikoreich?).
+
+## 1.2 Idee vs. Bedarf (Need)
+
+Eine Idee ist deine Hypothese. Ein Bedarf ist ein Problem, das Nutzer bereits aktiv loesen (auch mit schlechten Workarounds).
+
+Eine einfache Unterscheidung:
+
+- Echter Bedarf: Nutzer investieren heute schon Zeit/Geld/Stress, um das Problem zu umgehen.
+- Scheinbedarf: Nutzer finden es "interessant", aber wuerden weder bezahlen noch Verhalten aendern.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png)
+
+## 1.3 Warum "gute" Ideen wachsen
+
+Gute Ideen haben oft einen natuerlichen Pfad:
+
+Problem -> kleiner Nutzen sofort -> Weiterempfehlung -> wiederkehrende Nutzung.
+
+Schlechte Ideen benoetigen konstanten externen Schub (Marketing, Erklaeren, Push), weil der Kernnutzen nicht trifft.
+
+## 1.4 Vier stabile Ideenquellen
+
+Diese Quellen liefern haeufig bessere Startpunkte als Trends:
+
+1. Eigene Arbeit: repetitive Ablaufe, Koordination, Reporting, QA, Deployment.
+2. Communities: Foren/Chats, in denen dieselben Fragen staendig wiederkommen.
+3. Beschwerden: App-Reviews, Kommentare, "Warum geht das nicht einfacher?"-Momente.
+4. Bestehende Produkte: nicht kopieren, sondern Luecken finden (zu teuer, zu komplex, zu wenig spezialisiert).
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png)
+
+---
+
+# 2. Loesungszerlegung: Von Idee zu App
+
+Eine Idee wird erst dann baubar, wenn du sie in Entscheidungen uebersetzt.
+
+## 2.1 Minimum: Nutzer, Szenario, Kernfluss
+
+Definiere:
+
+1. Nutzerprofil: Rolle, Ziel, Constraints, Zahlungsbereitschaft.
+2. Szenario: Trigger -> Arbeitsschritte -> Ergebnis.
+3. Kernfluss: die 3-7 Schritte, die den Wert liefern.
+
+## 2.2 Scope schneiden (MVP)
+
+Prinzip: Ein MVP ist nicht "weniger Features", sondern "ein klares Versprechen, das haelt".
+
+Hilfsfragen:
+
+- Was ist der kleinste Moment, in dem der Nutzer "Ah, das spart mir wirklich Zeit" sagt?
+- Welche Schritte kann ich streichen, ohne den Kernwert zu verlieren?
+- Welche Annahme ist am riskantesten? (Die muss zuerst validiert werden.)
+
+---
+
+# 3. Verfeinerung: Von benutzbar zu gern genutzt
+
+Wenn die erste Version steht, ist die Arbeit nicht vorbei. Jetzt geht es um:
+
+1. Klarheit: Nutzer verstehen sofort, was der naechste Schritt ist.
+2. Friktion: weniger Klicks, weniger Formulare, weniger Kontextwechsel.
+3. Vertrauen: transparente Daten, nachvollziehbare Ergebnisse, saubere Defaults.
+
+Ein guter Test: Kann ein neuer Nutzer in 60 Sekunden Wert bekommen, ohne eine Anleitung zu lesen?
+
+---
+
+# 4. AI-Verstaerkung: AI dort einsetzen, wo sie Wert verstaerkt
+
+AI ist besonders stark, wenn sie:
+
+1. Sprache/Unstruktur in Struktur verwandelt (Text -> Aufgaben, Notizen -> ToDos).
+2. Zusammenfasst und priorisiert (lange Inhalte -> Kernpunkte + naechste Aktionen).
+3. Personalisierung ermoeglicht (unterschiedliche Nutzer brauchen unterschiedliche Vorschlaege).
+
+AI ist oft schwach, wenn sie nur als "Chatbot-Schicht" auf eine App geklebt wird, ohne den Kernfluss besser zu machen.
+
+---
+
+## Abschluss: Dein Output
+
+Nach diesem Anhang solltest du einen Loesungsentwurf schreiben koennen, der enthaelt:
+
+1. Zielgruppe und Use-Case
+2. Kernproblem und warum es teuer/nervig ist
+3. Kernfluss (3-7 Schritte)
+4. MVP-Scope
+5. Validierungsplan (wie du in 7 Tagen echte Signale sammelst)
+
+<RelatedArticlesSection />
+
diff --git a/docs/de-de/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/de-de/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..d71011e
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,359 @@
+# Sieben AI-Programmier-Tools im Vergleich
+
+## Kapitel&uuml;bersicht
+
+Angesichts der schillernden Auswahl an AI-Programmier-Tools: Welches ist das richtige f&uuml;r Sie? Dieses Kapitel vergleicht 7 g&auml;ngige Web Vibe Coding Plattformen wie Lovable, Replit, Z.ai usw. anhand einer einheitlichen Praxisaufgabe &ndash; der Entwicklung eines "Snake + AI-Poesie"-Spiels. Wir vergleichen sie aus mehreren Dimensionen wie Anf&auml;ngerfreundlichkeit, Code-Kontrollierbarkeit und Bereitstellungskomfort, um Ihnen bei der schnellen Auswahl des besten Entwicklungstools zu helfen.
+
+---
+
+# 1. Snake-Spiel mit Vibe Coding erstellen: Vollst&auml;ndiges Praxis-Tutorial
+
+Dieser Artikel stellt eine neue Softwareentwicklungspraxis vor &ndash; "Vibe Coding", die KI nutzt, um den Anwendungsentwicklungsprozess zu beschleunigen.
+
+Als N&auml;chstes werden wir nacheinander die Kernkonzepte von Vibe Coding vorstellen, erkl&auml;ren, was ein AI Agent ist, und praktische Methoden zum Schreiben von Prompts geben. Schlie&szlig;lich werden wir durch eine vollst&auml;ndige Praxis das "Snake"-Spiel von Grund auf erstellen und mehrere g&auml;ngige Vibe Coding Plattformen im Detail vergleichen, um Ihnen bei der Auswahl der besten Tool-Kombination zu helfen.
+
+## Was Sie lernen werden:
+
+- **Was ist Vibe Coding**: Definition, Workflow und wichtigste Vorteile verstehen.
+- **Die Rolle von AI Agents**: Arbeitsweise von AI Agents und Unterschiede zu traditionellen Programmen verstehen.
+- **Wie man gute Prompts schreibt**: Klare, spezifische Prompt-Formulierungen f&uuml;r bessere Ergebnisse beherrschen.
+- **Vibe Coding Tools**: Eine Reihe g&auml;ngiger AI-Programmier- und Design-Plattformen kennenlernen.
+- **Plattform-Vergleich**: Bewertung und Vergleich der Vor- und Nachteile von 7 verschiedenen AI Agent Plattformen aus der Perspektive von Einsteigern.
+- **UI / UX Tools**: Lernen, wie man Figma, Mastergo und andere UI/UX-Tools in den gesamten Workflow integriert.
+
+## 1. Einleitung
+
+In den bisherigen Kursen haben wir stets das Full-Stack-Entwicklungsmodell von z.ai f&uuml;r Programmieraufgaben verwendet.
+
+Haben wir uns jedoch jemals gefragt: Sein Kern ist eigentlich der "AI Agent" (anders als gew&ouml;hnliche Chat-KI und viel intelligenter)? Denn es kommuniziert nicht nur mit Ihnen, sondern kann auch denken (wenn Sie ihm eine Aufgabe geben, plant es zun&auml;chst) und proaktiv handeln (z.B. Web-Suche aufrufen, Computerbefehle ausf&uuml;hren, Webseiten &ouml;ffnen). Wir werden sp&auml;ter darauf zur&uuml;ckkommen.
+
+## 1. Was ist Vibe Coding?
+
+Vibe Coding ist eine neue Softwareentwicklungsmethode, die KI nutzt, um den Anwendungsentwicklungsprozess zu beschleunigen. Es ist kein Ersatz f&uuml;r traditionelle Programmierung, sondern ein "konversationelleres" Programmiermodell. Dieses Konzept wurde vom AI-Forscher Andrej Karpathy vorgeschlagen: In diesem Workflow schreiben Entwickler nicht mehr Zeile f&uuml;r Zeile Code selbst, sondern steuern haupts&auml;chlich AI Agents, um Anwendungen zu generieren, zu optimieren und zu debuggen.
+
+Die Kernidee von Vibe Coding ist der &Uuml;bergang von **"code-first"** zu **"intent-first"**. Sie m&uuml;ssen nicht mehr ab der ersten Codezeile planen, sondern beschreiben das gew&uuml;nschte Ergebnis in nat&uuml;rlicher Sprache.
+
+Ein typischer Vibe Coding-Workflow ist ein iterativer Kreislauf:
+
+- **Ziel beschreiben**: Zun&auml;chst mit einem Satz oder Absatz beschreiben, was Sie implementieren m&ouml;chten, z.B.: "Ein einfaches Snake-Spiel mit Python-Backend, das Gedichte generieren kann."
+- **AI generiert Code**: Der AI Agent analysiert Ihre Anforderungen, generiert eine erste Codeversion mit grundlegender Struktur, Frontend-Seiten und Backend-Logik.
+- **Ausf&uuml;hren und beobachten**: Den generierten Code ausf&uuml;hren, pr&uuml;fen, ob er wie erwartet funktioniert, und dabei Bugs oder Schw&auml;chen entdecken.
+- **Feedback geben und iterieren**: Bei Fehlern oder unbefriedigenden Ergebnissen im Dialog weiter instruieren, z.B.: "Die Schlange bewegt sich zu langsam, mach sie schneller" oder "Der API Key in der `.env`-Datei wird nicht richtig gelesen, bitte den Backend-Code reparieren."
+- **Obige Schritte wiederholen**: Kontinuierlich im Kreislauf "Beschreiben &rarr; Generieren &rarr; Ausf&uuml;hren &rarr; Feedback" iterieren, bis die Anwendung zufrieden stellend ist.
+
+### Die wichtigsten Vorteile von Vibe Coding:
+
+- **Einstiegsh&uuml;rde senken**: Auch Designer, Gr&uuml;nder und Studierende ohne Programmiererfahrung k&ouml;nnen durch nat&uuml;rliche Sprache an der Anwendungsentwicklung teilnehmen.
+- **Schnelle Prototypen**: Die Zeit von der Idee zum MVP (Minimum Viable Product) wird drastisch verk&uuml;rzt.
+- **Effizienz steigern**: Automatische Erledigung gro&szlig;er Mengen repetitiver, mechanischer Codierungsarbeit (wie Boilerplate-Code), sodass Entwickler sich auf Architektur-Design und Probleabstraktion konzentrieren k&ouml;nnen.
+- **Experimentieren f&ouml;rdern**: Ermutigt zu schnellem Ergebnis und kontinuierlicher Verbesserung, was das Ausprobieren neuer Ideen und Funktionen erleichtert.
+
+## 2. Was sind Vibe Coding Online-Plattformen (Web-based)?
+
+In diesem Praxis-Test werden Sie feststellen, dass die von uns bewerteten Tools in zwei Kategorien eingeteilt werden: **Web-based (Online-Plattformen)** und **IDE (lokale Entwicklungsumgebungen)**.
+
+Obwohl beide im Kern AI-gest&uuml;tzt Code schreiben, gibt es gewaltige Unterschiede in der Nutzererfahrung und den Anwendungsszenarien:
+
+### Vibe Coding Online-Plattformen (Web-based)
+
+**Repr&auml;sentative Tools:** Lovable, Replit, Z.ai, v0
+
+Das ist wie ein "Ready-to-move-in"-Hotelapartment.
+
+- **Keine Umgebungskonfiguration n&ouml;tig**: Sie m&uuml;ssen sich nicht um Python-Umgebung, Node.js-Version oder Abh&auml;ngigkeitsinstallation k&uuml;mmern. Browser &ouml;ffnen, URL eingeben, direkt loslegen.
+- **Ein-Klick-Vorschau und Bereitstellung**: Nach der Codegenerierung zeigt die Plattform das Ergebnis automatisch in einem Seitenfenster an. Wenn fertig, einen Klick, um einen Link zu generieren und mit Freunden zu teilen.
+- **Geeignete Szenarien:**
+  - **Schnelle Ideenvalidierung (MVP)**: Eine Idee im Kopf, mal eine halbe Stunde ausprobieren.
+  - **Einsteiger**: Komplett frei von komplexen Umgebungsfehlern, nur die Freude an AI-Programmierung erleben.
+  - **Leichtgewichtige Anwendungen**: Eine einfache Tool-Webseite, ein kleines Spiel oder eine pers&ouml;nliche Pr&auml;sentationsseite.
+
+### AI IDE (Lokale Entwicklungsumgebung)
+
+**Repr&auml;sentative Tools:** Cursor, Trae, VS Code + AI-Plugin
+
+Das ist wie ein "voll ausgestattetes" Eigenheim.
+
+- **Starke lokale F&auml;higkeiten**: L&auml;uft auf Ihrem Computer, hat direkten Zugriff auf alle Ihre lokalen Dateien und nutzt die Rechenleistung Ihres Computers.
+- **Nahtlose professionelle Workflow-Integration**: Geeignet f&uuml;r gro&szlig;e Projekte, freie Plugin-Installation, Verbindung zu lokalen Datenbanken, komplexes Debugging.
+- **Geeignete Szenarien:**
+  - **Professionelle Projektentwicklung**: Langfristig zu wartende, strukturell komplexe kommerzielle Projekte.
+  - **Tiefe Anpassung**: Extreme Code-Kontrolle oder tiefe Integration mit bestehendem lokalem Workflow (wie Git, Docker).
+  - **Datenschutz**: Code komplett lokal, besser konform zu Sicherheitsrichtlinien mancher Unternehmen.
+
+**Zusammenfassend:** Wenn Sie gerade erst mit AI-Programmierung beginnen oder nur schnell etwas Kleines ausprobieren wollen, sind **Online-Plattformen** der perfekte Startpunkt. Wenn Sie professioneller Entwickler sind oder das Projekt immer komplexer wird, bietet eine **lokale IDE** eine h&ouml;here Obergrenze.
+
+---
+
+## 3. Was ist ein AI Agent?
+
+### Was ist ein AI Agent?
+
+Ein AI Agent ist ein Softwaresystem, das seine Umgebung wahrnehmen, Entscheidungen treffen und autonom handeln kann, um bestimmte Ziele zu erreichen. Im Vergleich zu traditioneller Software, die festen Anweisungen folgt und einen einzigen Prozessablauf hat, sind AI Agents flexibler und anpassungsf&auml;higer.
+
+Hier sind einige Schl&uuml;sseleigenschaften, die AI Agents von traditionellen Programmen unterscheiden:
+
+- **Autonomie**: AI Agents haben hohe Unabh&auml;ngigkeit. Traditionelle Programme m&uuml;ssen meist Schritt f&uuml;r Schritt von Menschen ausgel&ouml;st werden, w&auml;hrend ein Agent basierend auf seinem Ziel selbst entscheiden kann, was er als N&auml;chstes tun soll.
+- **Wahrnehmung und Ged&auml;chtnis**: Agents sammeln Daten aus der Umgebung (z.B. API-Antworten, Sensordaten, Nutzereingaben) und behalten Kontext durch "Ged&auml;chtnis", um Erfahrung in sp&auml;teren Aktionen wiederzuverwenden und die Leistung kontinuierlich zu verbessern.
+- **Rationalit&auml;t und Zielorientierung**: Agents analysieren und planen um ein gegebenes Ziel herum und w&auml;hlen die geeignete Aktionssequenz, um h&ouml;here "Leistungskennzahlen" zu verfolgen.
+- **Werkzeugnutzung**: Ein Hauptmerk moderner AI Agents ist die F&auml;higkeit, externe Tools aufzurufen und nicht auf "Textgenerierung" beschr&auml;nkt zu bleiben. Sie k&ouml;nnen z.B. Webseiten durchsuchen, Code ausf&uuml;hren, Datenbanken abfragen, E-Mails senden &ndash; ein Gehirn, das "Tools orchestriert".
+
+Man kann es sich so vorstellen:
+
+- Ein **traditionelles Programm** ist wie ein Taschenrechner. Man gibt Zahlen und Operatoren ein, es rechnet nur, wenn man den Knopf dr&uuml;ckt.
+- Ein **AI-Assistent** ist wie ein menschlicher Assistent. Man bittet ihn "Finde Restaurants in meiner N&auml;he", er gibt Suchergebnisse und listet Optionen auf, aber die Entscheidung trifft am Ende man selbst.
+- Ein **AI Agent** ist eher wie ein automatisiertes Forschungsteam. Man gibt nur ein hochrangiges Ziel (z.B. "Plane eine Japanreise f&uuml;r mich"), und es zerlegt die Aufgabe, recherchiert online, bucht Fl&uuml;ge und Hotels (per API), erstellt einen Zeitplan und liefert das Ergebnis &ndash; fast ohne dass Sie sich um Details k&uuml;mmern m&uuml;ssen.
+
+---
+
+# 2. Zum Thema Prompt-Schreiben
+
+## 1. Prompt am besten auf einmal oder in mehreren Schritten schreiben?
+
+Viele sind versucht, in einem einzigen Prompt "eine vollst&auml;ndige Full-Stack-Anwendung" zu beschreiben. Tats&auml;chlich sind die aktuellen Tools bereits leistungsstark genug, um m&ouml;glicherweise auf einmal ein einigerma&szlig;en akzeptables Ergebnis zu liefern. Insgesamt ist es jedoch oft besser, die Arbeit in kleine Schritte zu unterteilen und phasenweise zu iterieren, um nicht in einer "nicht mehr &auml;nderbaren" Sackgasse zu landen.
+
+> **Kleiner Tipp:** Anstatt "alles auf einmal" zu erwarten, lieber das gro&szlig;e Ziel in ausf&uuml;hrbare kleine To-dos aufteilen.
+> Zum Beispiel: Nicht direkt "build me a Snake game" sagen, sondern aufteilen in:
+> "1. Zun&auml;chst ein Snake-Spiel-Frontend erstellen",
+> "2. Dann ein Backend zur Punkteaufzeichnung implementieren",
+> "3. Schlie&szlig;lich Frontend und Backend verbinden".
+> So kann AI Ihre Anforderungen genauer verstehen und zuverl&auml;ssigere Ergebnisse liefern.
+
+## 2. Je klarer, desto besser
+
+- In Vibe Coding sind Ihre geschriebenen Prompts genauso wichtig wie Ihr geschriebener Code. Je klarer und spezifischer der Prompt, desto n&auml;her ist das Ergebnis an dem, was Sie sich vorstellen.
+- Ziel und Einschr&auml;nkungen von Anfang an klar formulieren, reduziert sp&auml;tere &Auml;nderungen, was nicht nur Zeit spart, sondern auch Kontingent und Kosten.
+
+---
+
+# 3. Tool-&Uuml;bersicht (Vibe Coding / UIUX Tools)
+
+## 1. AI Agent Plattformen
+
+| **Name** | **Plattform** |
+| --- | --- |
+| **[Lovable](https://lovable.dev/)** | Web-based |
+| **[Cursor](https://cursor.com/cn/agents)** | PC |
+| **[Z.ai](https://chat.z.ai/)** | Web-based |
+| **[Replit](https://replit.com/~)** | Web-based |
+| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
+| **[Trae](https://www.trae.ai/)** | PC |
+| **[V0](https://v0.app/)** | Web-based |
+
+## 2. AI UIUX Plattformen
+
+| **Name** | **Plattform** |
+| --- | --- |
+| **[Mastergo](https://mastergo.com/)** | Web-based |
+| **[Figma](https://www.figma.com/)** | Web-based, PC-Plugin |
+
+---
+
+# 4. Praxis-Tutorial (Vibe Coding + UI Kombination)
+
+1. Geben Sie im Chat-Fenster der Vibe Coding Plattform Ihre Programmbeschreibung ein.
+   Beispiel:
+
+   > Bitte erstellen Sie eine einfache Snake-Webanwendung mit Frontend und Backend.
+   >
+   > 1. Frontend
+   >
+   > - Seite 1: Spiel-Seite
+   >   - Tastatursteuerung der Schlangenbewegung.
+   >   - Die Schlange frisst keine Nahrung, sondern englische W&ouml;rter.
+   >   - Seitenleiste zeigt gesammelte W&ouml;rter und deren Anzahl.
+   >   - Nach Spielende bleiben gesammelte W&ouml;rter erhalten und werden im n&auml;chsten Spiel fortgesetzt.
+   > - Seite 2: Gedicht-Seite (Make Poem)
+   >   - Dieselbe Wortliste wie auf der Spiel-Seite anzeigen (Datenkonsistenz).
+   >   - Einen Button zum Senden der aktuell gesammelten W&ouml;rter an das Backend zur Generierung eines Gedichts.
+   >   - Nach Gedichtgenerierung die verwendeten W&ouml;rter aus der Liste entfernen oder deren Z&auml;hler verringern.
+   >
+   > * Einfache Navigation zum Wechseln zwischen Game und Make Poem.
+   > * Sicherstellen, dass gesammelte W&ouml;rter auf beiden Seiten sichtbar sind.
+   >
+   > 2. Backend
+   >
+   > - Backend-Schnittstelle bereitstellen, die gesammelte W&ouml;rter empf&auml;ngt und ein Gedicht zur&uuml;ckgibt.
+   > - DeepSeek API zur Gedichtgenerierung verwenden.
+   > - API Key in `.env`-Datei speichern und in `.gitignore` ignorieren.
+
+2. DeepSeek API Key eingeben. (Erh&auml;ltlich unter [https://platform.deepseek.com/](https://platform.deepseek.com/))
+   1. Der API Key des LLM wird verwendet, um gro&szlig;e Modelle in Ihrem eigenen Projekt aufzurufen. Da es sich um sensible Informationen handelt, die nicht &ouml;ffentlich sein d&uuml;rfen, muss er separat in einer Konfigurationsdatei gespeichert werden.
+      **Warum eine `.env`-Datei verwenden und sie nicht auf GitHub hochladen?**
+   - Die `.env`-Datei dient speziell zur Speicherung von **Schl&uuml;sseln oder Passw&ouml;rtern** (z.B. DeepSeek API Key).
+   - Wenn diese Datei auf GitHub hochgeladen wird, kann jeder Ihren Schl&uuml;ssel sehen und missbrauchen.
+   - Aus Sicherheitsgr&uuml;nden m&uuml;ssen wir `.env` in der `.gitignore`-Datei deklarieren, damit Git sie nicht verfolgt.
+   - So kann Ihr Projekt diese Schl&uuml;ssel lokal weiterhin nutzen, ohne sie im Repository preiszugeben.
+
+3. Nachdem das Ergebnis angezeigt wurde, k&ouml;nnen Sie bei Fehlern oder gew&uuml;nschten &Auml;nderungen Ihre &Auml;nderungsw&uuml;nsche direkt im Chat-Fenster eingeben.
+4. Wenn Sie mit dem Seitendesign unzufrieden sind, k&ouml;nnen Sie das Interface auch in Figma oder Mastergo neu gestalten und die Designideen an den Agent zur&uuml;ckmelden.
+
+- **Beispiel**
+
+> Bitte entwerfen Sie eine **zweiseitige Web-Anwendung** namens _Word-Snake_.
+>
+> - **Game-Seite:**
+> - Schlange wird per Tastatur gesteuert.
+> - Die Schlange frisst englische W&ouml;rter statt normale Nahrung.
+> - Rechtes Panel zeigt gesammelte W&ouml;rter und deren Anzahl.
+> - Nach Spielende wird der Wortbestand nicht gel&ouml;scht, sondern im n&auml;chsten Spiel weiterverwendet.
+> - **Make Poem-Seite:**
+> - Denselben gemeinsamen Wortbestand anzeigen.
+> - Nutzer w&auml;hlt einige W&ouml;rter aus und klickt auf **Generate Poem**-Button.
+> - Diese W&ouml;rter an das Backend senden, das DeepSeek API generiert ein Gedicht.
+> - Nach Gedichtgenerierung die verwendeten W&ouml;rter aus dem Bestand l&ouml;schen oder verringern.
+> - **Navigation:** Einfacher Tab oder Top-Men&uuml; zum Wechseln zwischen den beiden Seiten.
+> - **Gemeinsamer Zustand:** Sicherstellen, dass gesammelte W&ouml;rter auf beiden Seiten stets synchron sichtbar sind.
+
+- **Ergebnis-Beispiel**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. AI Agent Plattform-Vergleich (Wie man die beste Kombination f&uuml;r einfache Projekte w&auml;hlt)
+
+Verschiedene Vibe Coding Plattformen haben unterschiedliche St&auml;rken und Workflows. Wir haben denselben "Snake-Spiel mit DeepSeek API"-Anforderungssatz auf mehreren Plattformen getestet und aus der Perspektive von Einsteigern bewertet. Hier ist die Zusammenfassung.
+
+## 1. Vergleichskriterien
+
+1. **Ziel**
+   Ein Snake-Web-App mit DeepSeek API integrieren.
+2. **Spieldetails**
+   1. Das Spiel generiert Gedichte &uuml;ber die DeepSeek LLM API.
+   2. Die Schlange frisst englische W&ouml;rter; gesammelte W&ouml;rter bleiben nach Spielende erhalten und werden im n&auml;chsten Spiel weiterverwendet. Gleiche W&ouml;rter k&ouml;nnen mehrfach gesammelt und separat gez&auml;hlt werden.
+   3. Wenn ein Gedicht generiert wird, werden die verwendeten W&ouml;rter aus dem Bestand entfernt.
+
+3. **Must-Haves**
+   1. Eine lauff&auml;hige Frontend-Seite mit Snake-Spiel (Tastatursteuerung, Canvas-Rendering).
+   2. Wort-Sammelmechanismus (W&ouml;rter erscheinen auf dem Brett, Schlange frisst sie, Seitenleiste-Liste wird aktualisiert).
+   3. Persistenz des Wortbestands &uuml;ber mehrere Spielrunden.
+   4. Backend mit DeepSeek API (ohne API Key zun&auml;chst ein Mock-Gedicht zur&uuml;ckgeben).
+   5. "Gedicht generieren"-Button: Klick ruft Backend auf, zeigt Gedicht, aktualisiert Wortbestand basierend auf Nutzung.
+   6. `.env`-Unterst&uuml;tzung f&uuml;r API Key und `.gitignore` zur Vermeidung von Schl&uuml;ssellecks.
+
+4. **Nice-to-Haves**
+   1. Nutzer kann ausw&auml;hlen, welche W&ouml;rter f&uuml;r das Gedicht verwendet werden.
+   2. Nutzerfreundliche Erfahrung (z.B. klare Wortliste in der Seitenleiste, gutes Layout im Gedicht-Bereich).
+   3. Kommentare im Code f&uuml;r Einsteiger, die die Schl&uuml;ssellogik erkl&auml;ren.
+
+## 2. Codierungsergebnis-Vergleich
+
+### 1. Lovable (Web-based)
+
+- **Plattform-Typ:** Web
+- **Haupteigenschaften und Workflow:** Lovable macht Integration und Zusammenarbeit gut, automatisiert Initialisierungen wie die Verbindung mit Supabase-Datenbank und macht den Projektaufbau sehr reibungslos. Sie beschreiben einfach die Projektanforderungen, und der Agent verbindet alle Dienste und erstellt die Grundstruktur.
+- **Geeignete Nutzer:** F&uuml;r Einsteiger, die zum ersten Mal Vibe Coding ausprobieren, ist Lovable eine sehr freundliche Wahl. Es vereinfacht die Komplexit&auml;t der Mehrdienst-Verkettung und l&auml;sst Sie sich auf Prompts und Iterationen konzentrieren statt auf Umgebungskonfiguration. Dank hoher Automatisierung erhalten Sie schnell einen lauff&auml;higen Prototyp.
+- **Prompt-Prozess:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **Snake-Spiel-Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **Preis:** Relativ teuer, aber mit einer Uni-E-Mail k&ouml;nnen Sie durch Studenten-Verifizierung den halben Preis erhalten.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor (IDE)
+
+- **Plattform-Typ:** Desktop-Anwendung (PC)
+- **Haupteigenschaften und Workflow:** Cursor ist eine propriet&auml;re IDE mit integrierten AI-F&auml;higkeiten, unterst&uuml;tzt Windows, macOS und Linux. Es baut Codegenerierung, intelligentes Umschreiben und Codebasis-Abfrage direkt in die Entwicklungsumgebung ein. Im Vergleich zu Web-Tools ist es n&auml;her an der traditionellen lokalen Entwicklungserfahrung. Da es eine lokale Umgebung ist, variieren die Konfigurationen verschiedener Computer, was gelegentlich zu umgebungsbezogenen Problemen f&uuml;hren kann. Der Vorteil: Das Projekt ist lokal, keine zus&auml;tzte Download- oder Laufzeitumgebung n&ouml;tig, Cursor erledigt viele m&uuml;hsame Schritte f&uuml;r Sie.
+- **Geeignete Nutzer:** F&uuml;r Nutzer mit gewissen Programmierkenntnissen ist Cursor eine sehr leistungsstarke und vertraute Umgebung. F&uuml;r absolute Einsteiger ohne Vorkenntnisse ist die Lernkurve jedoch steiler, da man selbst Projektstruktur, Abh&auml;ngigkeitsmanagement und Dateiorganisation verstehen muss. Besser geeignet f&uuml;r Entwickler, die AI-Unterst&uuml;tzung in ihren traditionellen Codierungs-Workflow integrieren wollen.
+- **Prompt-Prozess:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **Snake-Spiel-Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **Preis:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai (Web-based)
+
+- **Plattform-Typ:** Web
+- **Haupteigenschaften und Workflow:** Z.ai ist relativ direkt zu bedienen, aber eine offensichtliche Herausforderung ist: Sie m&uuml;ssen den generierten Code **manuell kopieren und einf&uuml;gen**. Die Plattform selbst hat kein Echtzeit-Vorschaufenster, sodass man die Code-Ausf&uuml;hrung nicht sofort sehen kann.
+- **Geeignete Nutzer:** Diese Plattform erfordert einen "hands-on" Ansatz. Fehlende Automatisierung bedeutet, dass Sie direkt mit dem Code arbeiten m&uuml;ssen, was f&uuml;r Leute, die AI-Outputs tief verstehen wollen, eine Art Training ist. H&auml;ufiges Kopieren und Einf&uuml;gen bringt jedoch Effizienzprobleme und Fehler Risiken mit sich. Besser geeignet f&uuml;r Leute, die "rohe AI-Code-Outputs" sehen wollen, nicht f&uuml;r diejenigen, die ein One-Click-Erlebnis suchen.
+- **Prompt-Prozess:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **Snake-Spiel-Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **Preis:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit (Web-based)
+
+- **Plattform-Typ:** Web
+- **Haupteigenschaften und Workflow:** Replit ist eine All-in-One Online-Entwicklungs- und Bereitstellungsumgebung. Im Browser k&ouml;nnen Sie Code schreiben, Programme ausf&uuml;hren und eine Online-Zugriffs-URL generieren. Vor dem Codieren zeigt es einen klaren Aktionsplan; au&szlig;erdem gibt es einen visuellen Editor, in dem Sie direkt im Vorschaufenster die UI &auml;ndern k&ouml;nnen, und der Quellcode wird automatisch synchronisiert. So k&ouml;nnen Sie jederzeit &uuml;berpr&uuml;fen, ob die AI-Ausgabe Ihren Erwartungen entspricht, und die Anzahl der Hin- und Her-Korrekturen erheblich reduzieren.
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **Geeignete Nutzer:** Replit ist sehr einsteigerfreundlich. Es vereinfacht den vollst&auml;ndigen Kreislauf von der Codierung bis zur Bereitstellung, ohne zus&auml;tzte Server- oder Hosting-Konfiguration. Die Kollaborationsfunktion ist ebenfalls stark, ideal f&uuml;r Gruppenprojekte unter Kommilitonen oder Remote-Hilfe.
+- **Prompt-Prozess:** W&auml;hrend des Aufbaus verstand die AI die Anforderungen nicht sofort; es dauerte etwa 3 Iterationsrunden, bis das Ergebnis zufriedenstellend war.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **Snake-Spiel-Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **Preis:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Minimax (Web-based)
+
+- **Plattform-Typ:** Web
+- **Haupteigenschaften und Workflow:** Minimax ben&ouml;tigt bei der Aufgabenausf&uuml;hrung oft l&auml;nger. Der Prozess umfasst h&auml;ufig: AI entdeckt und repariert automatisch Fehler, daher kann der gesamte Prozess langsam oder etwas m&uuml;hsam sein. In diesem Projekt erstellt der Agent zun&auml;chst einen detaillierten Plan und baut dann Schritt f&uuml;r Schritt Backend, Datenbank und Frontend-Logik auf.
+- **Geeignete Nutzer:** Da es automatisch Tests ausf&uuml;hrt und Fehler repariert, sind Zeit- und Token-Verbrauch hoch, aber man kann klar sehen, wie AI Probleme lokalisiert und l&ouml;st, was aus Lernperspektive sehr wertvoll ist.
+- **Prompt-Prozess:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+- **Snake-Spiel-Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+
+- **Preis:** Die kostenlose Version kann bei komplexen Projekten wahrscheinlich nicht vollst&auml;ndig durchlaufen, daher wird ein kostenpflichtiges Upgrade empfohlen, um sicherzustellen, dass das Projekt vollst&auml;ndig erstellt werden kann.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+### 6. Trae (IDE)
+
+- **Plattform-Typ:** Desktop-Anwendung (PC)
+- **Haupteigenschaften und Workflow:** Als Desktop-Anwendung hat Trae gegen&uuml;ber Web-Tools normalerweise Vorteile bei Leistung und Reaktionsgeschwindigkeit. Es erfordert jedoch Download und Installation, was f&uuml;r einige Nutzer eine etwas h&ouml;here Einstiegsh&uuml;rde darstellt. Da es eine lokale Umgebung ist, bringen unterschiedliche Computerkonfigurationen und Abh&auml;ngigkeitsumgebungen eine gewisse Unsicherheit mit sich. Der Vorteil: Trae hilft Ihnen, Projekterstellung und Laufzeitkonfiguration lokal abzuschlie&szlig;en; Sie k&ouml;nnen direkt auf Ihrem Rechner entwickeln und debuggen.
+- **Geeignete Nutzer:** Besser geeignet f&uuml;r Nutzer, die langfristig Vibe Coding-Projekte betreiben und ein spezielles Desktop-Tool verwenden m&ouml;chten. F&uuml;r Gelegenheitsnutzer ist es m&ouml;glicherweise nicht die leichteste Wahl.
+- **Prompt-Prozess:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+- **Snake-Spiel-Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+
+- **Preis:** Preis relativ g&uuml;nstig, selbst die kostenlose Version reicht f&uuml;r qualitativ gute kleine Projekte.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+### 7. V0 (Web-based)
+
+- **Plattform-Typ:** Web
+- **Haupteigenschaften und Workflow:** V0 ist ein Tool von Vercel, das sich auf die Generierung von React-UI-Komponenten konzentriert. Es zeichnet sich durch die Erzeugung hochwertiger, produktionsreifer Oberfl&auml;chen aus. In der Praxis kann man jedoch auf Probleme sto&szlig;en wie "Code-Ansicht schwer zu finden" oder "keine klare Angabe, wo der API Key konfiguriert werden sollte".
+- **Geeignete Nutzer:** V0 ist sehr geeignet f&uuml;r Studierende oder Designer, die sich auf Frontend und UI/UX-Design konzentrieren. Es ist jedoch keine vollst&auml;ndige Full-Stack-L&ouml;sung; Sie ben&ouml;tigen weiterhin andere Plattformen f&uuml;r Backend-Logik und API-Integration. Wenn Ihr Ziel "ein komplettes Projekt in einem Durchgang" ist, ist es m&ouml;glicherweise nicht die beste Erstwahl.
+- **Prompt-Prozess:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
+
+- **Snake-Spiel-Ergebnis:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
+- **Preis:** Kostenlose Nutzer k&ouml;nnen etwa 4-5 einfache Projekte erstellen.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
+
+## 3. Plattform-Gesamtvergleich
+
+| **Plattform** | **Bewertung** | **Plattform** | **Anmerkungen** |
+| --- | --- | --- | --- |
+| **[Lovable](https://lovable.dev/)** | Sehr freundlich f&uuml;r AI-Programmier-Einsteiger, einfacher Einstieg, reibungslose Erfahrung, ideal als Erstwahl. | Web-based | Automatisiert Supabase- und andere Dienstverbindungen, reduziert Konfigurationsaufwand. |
+| **[Cursor](https://cursor.com/cn/agents)** | Geeignet f&uuml;r Nutzer mit Entwicklungserfahrung, steigert Produktivit&auml;t und Code-Qualit&auml;t erheblich. | PC | Erfordert gewisse Programmierkenntnisse, lokales Umfeld erfordert eigenes Verst&auml;ndnis von Projektstruktur und Abh&auml;ngigkeiten. |
+| **[Z.ai](https://chat.z.ai/)** | Besser geeignet f&uuml;r Nutzer mit Programmierkenntnissen, die AI-Code-Output-Details direkt untersuchen wollen. | Web-based | Kein Vorschaufenster, Ergebnispr&uuml;fung m&uuml;hsam; Code manuell kopieren, Ordner und Dateien manuell erstellen und Service manuell starten. |
+| **[Replit](https://replit.com/~)** | Empfohlen f&uuml;r Nutzer, die Ideen schnell zu zug&auml;nglichen Online-Services machen wollen. | Web-based | All-in-One Online-Entwicklung und -Bereitstellung, unterst&uuml;tzt Kollaboration und bietet visuellen Editor. |
+| **[Minimax](https://agent.minimaxi.com/)** | Geeignet f&uuml;r Leute, die den gesamten AI-Fehlererkennungs- und -Reparaturprozess sehen und daraus lernen wollen, aber insgesamt langsamer und token-intensiv. | Web-based | L&auml;ngerer Gesamtprozess, AI f&uuml;hrt mehrfach automatisch Tests aus und repariert Fehler. |
+| **[Trae](https://www.trae.ai/)** | F&uuml;r Nutzer mit Programmiererfahrung, die Desktop-IDE + AI Agent kombinieren wollen, ein leistungsstarkes Effizienz-Tool. | PC | Lokale Installation und Umgebungskonfiguration erforderlich, aber bessere Leistung, geeignet f&uuml;r langfristige Vibe Coding-Projekte. |
+| **[V0](https://v0.app/)** | Optimiert f&uuml;r Nicht-Entwickler, die schnell React-UI erstellen wollen, geeignet f&uuml;r Frontend-/Design-orientierte Studierende. | Web-based | Fokussiert auf React-UI-Generierung, muss mit anderen Plattformen f&uuml;r Backend und vollst&auml;ndigen App-Aufbau kombiniert werden. |
+---
+title: 'Vergleich von 7 KI-Programmiertools'
+description: 'Praxisnaher Vergleich von Web-Vibe-Coding-Plattformen mit einer einheitlichen Aufgabe: Bedienbarkeit, Code-Kontrolle und Deployment.'
+---
diff --git a/docs/de-de/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/de-de/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..4b4d2cd
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,348 @@
+# Website mit Design- und Programmier-Agent entwerfen
+
+## Kapitel&uuml;bersicht
+
+Dieses Kapitel zeigt, wie Design und Entwicklung durch AI perfekt zusammenarbeiten. Sie spielen die Rolle des Produktmanagers, leiten den "Design-Agent" bei der Erstellung von Logo-Design, Farbschema und Seitenlayout an und koordinieren dann den "Programmier-Agent" bei der Umsetzung der visuellen Entw&uuml;rfe in lauff&auml;higen Code. Von der Ideenfindung bis zum Website-Launch erleben Sie den vollst&auml;ndigen AI-gest&uuml;tzten Entwicklungsprozess und werden zu einem Ein-Personen-Team.
+
+---
+
+# 1. Erste Schritte
+
+## 1. Tutorial-Einf&uuml;hrung
+
+Lassen Sie uns AI Design Agent und Coding Agent verwenden, um eine vollst&auml;ndige Website von Grund auf zu erstellen.
+
+- **Design-Agent**: Verantwortlich f&uuml;r die Erstellung von Logo, Seitenlayout, Farbschema und anderen visuellen Elementen
+- **Coding-Agent**: Schreibt tats&auml;chlichen Code (HTML/CSS/JS etc.) basierend auf Ihren Anforderungen an Funktionen und Layout und erstellt eine lauff&auml;hige Website
+
+## 2. Design-Agent und Coding-Agent
+
+- **Design-Agent**: AI, die basierend auf Ihren Prompts Bilder, Seitenmodelle oder Designstile generiert.
+- Mastergo
+- Lovart
+- Figma MCP
+- **Coding-Agent**: AI, die basierend auf Ihren Funktions- und Layoutanforderungen tats&auml;chlichen Code (HTML/CSS/JS etc.) schreibt.
+- Z.AI
+- Trae
+- Cursor
+- Lovable
+
+---
+
+# 2. Logo mit Design-Agent erstellen
+
+## 1. Wichtige Aspekte beim Logo-Design
+
+Das Logo ist eines der Schl&uuml;sselelemente, die den ersten Eindruck Ihrer Website bestimmen. Um vom AI Design-Agent zufriedenstellende Ergebnisse zu erhalten, m&uuml;ssen Sie in Ihrem Prompt klar beschreiben, welche Art von Logo Sie m&ouml;chten.
+
+1. **Markenname / Text**
+
+- Text, der im Logo erscheinen muss (z.B.: Website-Titel, Markenname).
+
+2. **Stil (Stimmung / Atmosph&auml;re)**
+
+- Das Gesamtgef&uuml;hl oder die Atmosph&auml;re, die das Logo vermitteln soll.
+- _Beispiele: Minimalistisch, niedlich, schlicht, modern, Retro, futuristisch etc._
+
+3. **Farbschema** (optional)
+
+- Am besten die Logo-Farben mit dem Gesamtton der Website abstimmen.
+- Spezifische Hex-Codes oder grobe Farbt&ouml;ne (kalt, warm etc.) angeben.
+- _Beispiele: **`#171721`** (Schwarz), **`#FF7130`** (Orange)._
+
+4. **Form (Gestalt / Struktur)**
+
+- Kl&auml;ren, ob das Logo eine bestimmte Form oder Komposition ben&ouml;tigt.
+- _Beispiele: Text innerhalb eines Kreises, Icon + Text-Kombination, Icon-dominiertes Logo etc._
+
+5. **Icon / Symbol-Elemente** (optional)
+
+- Grafiken oder Symbole, die im Logo erscheinen sollen.
+- _Beispiele: B&uuml;cher-Icon, Blitz-Symbol, AI-bezogene Grafik, abstrakte geometrische Formen etc._
+
+## 2. Logo-Design-Prompt schreiben
+
+**Beispiel-Prompt**
+
+```
+"Bitte entwerfe ein minimalistisches Logo mit dem Markennamen 'My First Website'.
+Verwende Schwarz (#171721) und Orange (#FF7130) und platziere den Text innerhalb eines Kreises."
+```
+
+```
+"Bitte entwerfe ein Logo mit dem Markennamen 'AIID'.
+Der Gesamtstil soll futuristisch, sauber und schlicht sein, Hauptfarben Blau und Wei&szlig;.
+Kombiniere ein abstraktes AI-Symbol mit dem Text und exportiere als PNG mit transparentem Hintergrund."
+```
+
+## 3. Design beim Agent anfordern
+
+- Obigen Prompt eingeben &rarr; Mehrere Designentw&uuml;rfe des Agents vergleichen.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. Endg&uuml;ltiges Logo bestimmen
+
+- Die bevorzugte Version aus den Entw&uuml;rfen ausw&auml;hlen und herunterladen.
+
+---
+
+# 3. Website-Struktur planen
+
+## 1. Grundlegende Bereiche verstehen
+
+Bevor Sie mit der Website-Erstellung beginnen, ist es wichtig zu planen, welche Men&uuml;s (Bereiche) Sie einf&uuml;gen wollen. Das Men&uuml;-Design h&auml;ngt davon ab, was Sie den Besuchern zeigen m&ouml;chten und welche Aktionen Sie von ihnen erwarten.
+Generell besteht eine Website aus Grundbereichen wie **Home / About / Contact**.
+
+## 2. Selbst eine Struktur-Skizze zeichnen (optional)
+
+Sie k&ouml;nnen zun&auml;chst basierend auf dem Website-Ziel eine einfache Men&uuml;struktur entwerfen.
+
+### Grundmen&uuml;
+
+1. **Home**
+   1. Die Hauptseite, die Besucher nach dem Betreten der Website zuerst sehen
+   2. Enth&auml;lt normalerweise Logo, Hero-Bereich und einen kurzen Slogan oder eine Einleitung
+2. **About**
+   1. Vorstellung, wer Sie sind oder Zweck des Projekts / Service
+   2. Pers&ouml;nliches Portfolio: Selbstvorstellung + kurzer Lebenslauf
+   3. Service-Website: Vision, Ziele und Kernfunktionen
+3. **Contact**
+   1. Kontaktinformationen wie E-Mail, Telefonnummer, Social-Media-Links etc.
+   2. Auch ein einfaches Kontaktformular m&ouml;glich
+
+### Optionale Men&uuml;s
+
+4. **Services / Projects**
+   1. Pr&auml;sentation Ihrer Dienstleistungen oder Projekte / Portfolio
+   2. Normalerweise als Liste oder Karten dargestellt
+
+5. **Gallery**
+   1. Zur Anzeige von Bildern, Fotos oder Designarbeiten
+
+6. **Blog / News**
+   1. F&uuml;r Artikel, Updates oder Logs
+
+7. **FAQ**
+   1. H&auml;ufig gestellte Fragen und Antworten kompakt zusammengefasst
+
+## 3. Farbschema w&auml;hlen (optional)
+
+Wenn Sie bereits ein Logo haben oder bestimmte Farben f&uuml;r das Website-Design verwenden m&ouml;chten, k&ouml;nnen Sie die Farbcodes direkt im Prompt angeben.
+
+**Beispiel:** `#171721, #872B97, #FF7130, #FF3C68`
+
+Auch ohne eigenes Farbschema k&ouml;nnen Sie &uuml;ber Farb-Websites oder Suchbegriffe Inspiration finden.
+
+- **Farbreferenz-Websites**
+  - https://colorhunt.co/
+  - https://coolors.co/
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+- **Farbsuche &uuml;ber Google-Schl&uuml;sselw&ouml;rter**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. Website-Design-Prompt schreiben
+
+**Beispiel-Prompt**
+
+```
+"Bitte entwerfe eine One-Page-Website mit den Bereichen Home, About und Contact.
+Verwende die Farben #171721, #FF7130 und #FF3C68.
+Der Gesamtstil soll modern und schlicht sein."
+```
+
+---
+
+# 4. Website mit Design-Agent entwerfen
+
+## 1. Prompt eingeben &rarr; Designentw&uuml;rfe generieren
+
+- Die geplante Struktur und das gew&auml;hlte Farbschema im Prompt angeben.
+
+**Mastergo Prompt-Beispiel**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+## 2. Designentw&uuml;rfe pr&uuml;fen und &Auml;nderungsw&uuml;nsche stellen
+
+Sie k&ouml;nnen dem Agent Feedback geben, z.B.:
+
+- "Zu verspielt, den Gesamtstil schlichter machen."
+- "Eine andere Schriftart verwenden."
+- "Farbkombination anpassen."
+- "Diesen Bereich entfernen."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
+
+## 3. Endg&uuml;ltiges Design bestimmen
+
+Wenn Sie den Designentwurf nach mehreren &Auml;nderungsrunden zufrieden sind, k&ouml;nnen Sie das Design in Code umwandeln, den der Coding-Agent verstehen und weiterverarbeiten kann.
+
+Die Methode zur Umwandlung von Design in Code variiert je nach Plattform, erfolgt aber normalerweise &uuml;ber die Installation und Nutzung bestimmter Plugins innerhalb der Design-Plattform.
+
+**Mastergo-Beispiel**
+
+1. [Mastergo Plugin-Website](https://mastergo.com/community/plugin) &ouml;ffnen und nach **seal** suchen.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
+
+2. Zur&uuml;ck zur Design-Seite, auf das **Quadrat-Icon (Plugins)** klicken.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
+
+3. Den Design-Bereich, den Sie in Code umwandeln m&ouml;chten, ausw&auml;hlen und auf **Generate** klicken, um den Code zu generieren.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
+
+---
+
+# 5. Website mit Coding-Agent erstellen
+
+## 1. Grundkonzepte von HTML/CSS/JS verstehen
+
+Eine Website besteht im Wesentlichen aus drei Sprachen:
+
+- **HTML (HyperText Markup Language)** &rarr; Struktur (Skelett)
+- **CSS (Cascading Style Sheets)** &rarr; Stil (Erscheinungsbild)
+- **JavaScript (JS)** &rarr; Funktionalit&auml;t (Interaktion)
+
+Diese drei arbeiten zusammen und bilden die komplette Webseite, die wir sehen.
+
+1. **HTML (Struktur)**
+
+- Definiert, "was auf der Seite angezeigt wird"
+- Platzierung von Text, Bildern, Buttons, Links etc.
+- Vergleichbar mit **W&auml;nden und Rahmen** eines Geb&auml;udes
+
+**Beispiel**
+
+```html
+<h1>Hallo!</h1>
+<p>Das ist meine erste Website.</p>
+<a href="contact.html">Kontakt</a>
+```
+
+2. **CSS (Stil)**
+
+- Bestimmt, "wie der Inhalt angezeigt wird"
+- Steuert Schriftgr&ouml;&szlig;e, Farbe, Abst&auml;nde, Hintergrund, Button-Form etc.
+- Gibt dem HTML "Kleidung" und visuellen Stil
+
+**Beispiel**
+
+```css
+h1 {
+  color: #FF7130;   /* Textfarbe */
+  font-size: 36px;  /* Schriftgr&ouml;&szlig;e */
+  text-align: center; /* Zentrierte Ausrichtung */
+}
+
+body {
+  background-color: #171721; /* Hintergrundfarbe */
+  color: white; /* Standard-Textfarbe */
+}
+```
+
+3. **JavaScript (JS) (Funktionalit&auml;t)**
+
+- Erm&ouml;glicht der Webseite, mit Nutzern zu interagieren
+- Kann Button-Klicks, Men&uuml;-Aufklappen, Bilderkarussells, Formular-Übermittlung etc. umsetzen
+- Wenn HTML/CSS das statische Skelett und Aussehen sind, dann ist JS das **Gehirn**, das die Webseite "lebendig" macht
+
+**Beispiel**
+
+```javascript
+function showAlert() {
+  alert("Der Button wurde geklickt!");
+}
+```
+
+```html
+<button onclick="showAlert()">Klick mich</button>
+```
+
+## 2. Coding-Agent Code generieren lassen
+
+**Beispiel-Prompt**
+
+```
+"Bitte schreibe HTML und CSS f&uuml;r eine One-Page-Website mit Home-, About- und Contact-Bereichen.
+Verwende die Farben #171721, #FF7130, #FF3C68.
+Schwarzer Hintergrund, wei&szlig;er Text."
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
+
+## 3. Website starten
+
+Nachdem der Entwurfscode generiert wurde, startet der Agent normalerweise automatisch das Projekt und zeigt die generierte Website-Seite an.
+
+Wenn Sie den Agent neu gestartet haben oder die Website-Anzeige nicht erscheint, k&ouml;nnen Sie einen Prompt wie diesen eingeben:
+
+```
+"Please activate the project"
+```
+
+Damit l&auml;sst der Agent das Projekt neu starten und &ouml;ffnet die Vorschauseite, damit Sie den aktuellen Stand sehen k&ouml;nnen.
+
+## 4. Einfache &Auml;nderungen vornehmen
+
+Sie k&ouml;nnen den Entwurf weiterhin &uuml;ber nat&uuml;rliche Sprache feinjustieren, z.B.:
+
+- "Den Button gr&ouml;&szlig;er machen."
+- "Schriftst&auml;rke erh&ouml;hen."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
+
+## 5. Website-Textinhalte &auml;ndern
+
+Die vom Agent generierte Erstversion enth&auml;lt meist automatisch generierten Platzhaltertext. Um sie n&auml;her an Ihrem realen Szenario zu bringen, k&ouml;nnen Sie den tats&auml;chlichen Inhalt vorbereiten und den Agent ihn ersetzen lassen.
+
+**Anwendungsbeispiel**: About-Seite der AIID-Website aktualisieren
+
+1. Zun&auml;chst den Inhalt, den Sie auf der About-Seite zeigen m&ouml;chten, aufschreiben. F&uuml;r besseres Agent-Verst&auml;ndnis kann der Inhalt im Markdown-Format gespeichert werden.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
+
+2. Dann im Dialog dem Agent mitteilen, den Inhalt der Datei auf der angegebenen Seite anzuwenden.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
+
+3. Die aktualisierte Version nach der Inhaltsanwendung ansehen.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
+
+## 6. Bilder einf&uuml;gen
+
+Wenn Sie bestimmte Bilder einf&uuml;gen m&ouml;chten (z.B. Logo, Hintergrundbild), k&ouml;nnen Sie diese zun&auml;chst in den Projektordner hochladen und im Prompt angeben, an welcher Stelle der Seite diese Bilder verwendet werden sollen.
+
+- **Beispiel:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png)
+
+- **Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png)
+
+---
+
+# 6. Design und Code integrieren
+
+## 1. Design-Dateien mit Website-Code integrieren (optional)
+
+Wenn Sie vom Design-Agent Codedateien heruntergeladen haben, k&ouml;nnen Sie diese in das aktuelle Projektverzeichnis verschieben und den Coding-Agent bitten, diesen Design-Code mit dem bestehenden Projekt zu mergen.
+
+- **Beispiel:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png)
+
+- **Ergebnis:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
+---
+title: 'Eine Website mit Design- und Coding-Agents bauen'
+description: 'Von Idee bis Launch: Design-Agent fuer Visuals, Coding-Agent fuer Umsetzung. Ein wiederverwendbarer Workflow fuer Solo-Entwicklung.'
+---
diff --git a/docs/de-de/stage-1/appendix-b-common-errors/index.md b/docs/de-de/stage-1/appendix-b-common-errors/index.md
new file mode 100644
index 0000000..934f87f
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-b-common-errors/index.md
@@ -0,0 +1,325 @@
+---
+title: 'Was tun bei Fehlern im Code - Praxisleitfaden: Screenshots an die KI senden'
+description: 'Lernen Sie, wie Sie der KI effizient Fragen stellen, um verschiedene Fehler bei der Entwicklung zu l&ouml;sen. Beherrschen Sie den Standardprozess aus Screenshot, Beschreibung und Problemeingrenzung und machen Sie die KI zu Ihrem Debugging-Assistenten.'
+---
+
+<script setup>
+const duration = 'Etwa <strong>30 Minuten</strong>'
+</script>
+
+# Was tun bei Fehlern im Code
+
+## Kapitel&uuml;bersicht
+
+<ChapterIntroduction :duration="duration" :tags="['Debugging-Tipps', 'KI-Zusammenarbeit', 'Problemeingrenzung', 'Entwicklertools']" coreOutput="Ein standardisierter Fehlerbehebungsprozess" expectedOutput="90 % der h&auml;ufigen Fehler selbstst&auml;ndig beheben k&ouml;nnen">
+
+In der KI-&Auml;ra hat sich die Art und Weise, wie man Fehler behebt, ver&auml;ndert.
+
+Sie m&uuml;ssen nicht alle Fehlertypen auswendig kennen, kein Debugging-Experte sein und nicht einmal verstehen, was der Fehler bedeutet.
+
+<strong>Sie m&uuml;ssen nur eines lernen: wie man die KI richtig fragt.</strong>
+
+Dieses Kapitel vermittelt Ihnen einen <strong>von einfach bis fortgeschritten</strong> strukturierten Behebungsprozess:
+
+1. <strong>Schritt 1: Direkt fragen</strong>: Ph&auml;nomen beschreiben + Screenshot, mit einem Satz fragen
+2. <strong>Schritt 2: Informationen erg&auml;nzen</strong>: Wenn das Problem nicht gel&ouml;st werden kann, F12 &ouml;ffnen und wichtige Informationen nachreichen
+
+Mit diesem Prozess k&ouml;nnen Sie <strong>90 % der Fehler selbst beheben</strong>.
+
+</ChapterIntroduction>
+
+::: info Hinweis
+Alle Methoden in diesem Kapitel basieren auf praktischer Erfahrung mit KI-IDEs wie Cursor/Trae/Claude und lassen sich direkt in der t&auml;glichen Entwicklung anwenden.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Direkt fragen', description: 'Ph&auml;nomen beschreiben + Screenshot' },
+      { title: 'Info erg&auml;nzen', description: 'F12 &ouml;ffnen, Problem eingrenzen' },
+      { title: 'Iterativ l&ouml;sen', description: 'Bis das Problem gel&ouml;st ist' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Kernprinzip: Screenshot an die KI senden
+
+::: warning Warum ist dieses Kapitel so wichtig?
+
+Viele Anf&auml;nger reagieren auf Fehlermeldungen wie folgt:
+- In Panik geraten und blind Code &auml;ndern
+- Eine halbe Stunde nach "Wie l&ouml;se ich den Fehler xxx" suchen
+- Versuchen, selbst zu verstehen, was der Fehler bedeutet
+- Sich bis nachts um drei allein durchs Debugging qu&auml;len
+
+<strong>Das ist alles verschwendete Zeit.</strong>
+
+In der KI-&Auml;ra ist Debugging etwas sehr Einfaches geworden:
+
+```
+Fehlermeldung sehen → Screenshot machen → KI fragen → Den Anweisungen der KI folgen
+```
+
+Sie m&uuml;ssen den Fehler nicht verstehen, nicht debuggen k&ouml;nnen und nicht einmal wissen, wo das Problem liegt.
+
+<strong>Sie m&uuml;ssen nur lernen, wie man fragt.</strong>
+
+:::
+
+### 1.1 Die einfachste Fragestellung
+
+Keine komplizierten Vorlagen n&ouml;tig -- zwei Methoden zur Auswahl:
+
+**Methode 1: Ph&auml;nomen beschreiben**
+
+Format: Was Sie gerade getan haben, was jetzt aufgetreten ist
+
+```
+Ich habe gerade den Code der Login-Seite ge&auml;ndert, jetzt ist die Seite wei&szlig;. Was soll ich tun?
+```
+
+**Methode 2: Screenshot**
+
+Einfach einen Screenshot der aktuellen Seite oder Fehlermeldung machen
+
+```
+[Screenshot]
+
+Wie l&ouml;se ich diesen Fehler?
+```
+
+**Die beste Methode: Beschreibung + Screenshot**
+
+```
+Ich habe gerade den Code der Login-Seite ge&auml;ndert, jetzt ist die Seite wei&szlig;.
+
+[Screenshot]
+
+Was soll ich tun?
+```
+
+**Merken: Beschreiben Sie den Kontext klar und f&uuml;gen Sie einen Screenshot hinzu -- so kann die KI das Problem schneller l&ouml;sen.**
+
+### 1.2 Wie man das Problem klar beschreibt
+
+Viele Anf&auml;nger wissen, dass sie fragen sollen, aber nicht, wie. Dabei gen&uuml;gt es, drei Dinge klar zu machen:
+
+**1. Was Sie gerade getan haben**
+
+```
+Ich habe gerade auf Speichern geklickt
+Ich habe gerade den Code der Login-Seite ge&auml;ndert
+Ich habe gerade die Seite aktualisiert
+```
+
+**2. Was Sie jetzt sehen**
+
+```
+Die Seite ist jetzt leer
+Der Button reagiert nicht auf Klicks
+Jetzt wird eine Fehlermeldung angezeigt
+```
+
+**3. Welches Ergebnis Sie erzielen m&ouml;chten**
+
+```
+Ich m&ouml;chte, dass die Daten erfolgreich gespeichert werden
+Ich m&ouml;chte, dass die Seite normal angezeigt wird
+Ich m&ouml;chte, dass nach dem Klick auf den Button eine Meldung erscheint
+```
+
+**Vollst&auml;ndiges Beispiel:**
+
+```
+Ich habe gerade auf Speichern geklickt, jetzt zeigt die Seite den Fehler "Speichern fehlgeschlagen".
+
+[Screenshot]
+
+Ich m&ouml;chte, dass die Formulardaten erfolgreich in der Datenbank gespeichert werden. Was soll ich tun?
+```
+
+**Wichtige Prinzipien:**
+- In einfachen Worten beschreiben, keine Fachbegriffe verwenden
+- Chronologisch vorgehen: Was zuerst getan wurde, was dann passiert ist
+- Die eigenen Erwartungen aussprechen, damit die KI wei&szlig;, was Sie wollen
+
+## 2. Erster Schritt: Direkt das Ph&auml;nomen beschreiben und fragen
+
+Wenn Sie auf ein Problem sto&szlig;en, <strong>&ouml;ffnen Sie noch nicht sofort F12</strong>. Beschreiben Sie zuerst das Ph&auml;nomen, machen Sie einen Screenshot der aktuellen Seite und geben Sie es der KI.
+
+Oft kann die KI anhand des Screenshots direkt eine L&ouml;sung vorschlagen.
+
+### 2.1 H&auml;ufige Ph&auml;nomene beschreiben
+
+::: tip Einfach beschreiben
+
+**Seite ist wei&szlig;**
+```
+Die Seite &ouml;ffnet sich und ist leer. Was soll ich tun?
+
+[Screenshot]
+```
+
+**Button reagiert nicht auf Klicks**
+```
+Dieser Button reagiert nicht. Bitte pr&uuml;fen.
+
+[Screenshot]
+```
+
+**Daten lassen sich nicht speichern**
+```
+Ich habe auf Speichern geklickt, aber die Daten wurden nicht gespeichert. Was soll ich tun?
+
+[Screenshot]
+```
+
+**Styling stimmt nicht**
+```
+Dieser Button ist verschoben. Wie kann ich das anpassen?
+
+[Screenshot]
+```
+
+**API-Fehler**
+```
+Beim Aufruf der Schnittstelle ist ein Fehler aufgetreten. Bitte pr&uuml;fen.
+
+[Screenshot]
+```
+
+:::
+
+### 2.2 Wenn die KI das Problem direkt l&ouml;st
+
+Herzlichen Gl&uuml;ckwunsch, das Problem ist gel&ouml;st! Folgen Sie einfach den Anweisungen der KI.
+
+### 2.3 Wenn die KI "weitere Informationen ben&ouml;tigt"
+
+Jetzt m&uuml;ssen Sie F12 &ouml;ffnen und wichtige Informationen nachreichen. Weiter unten.
+
+## 3. Zweiter Schritt: Wichtige Informationen erg&auml;nzen
+
+Wenn die KI weitere Informationen ben&ouml;tigt, &ouml;ffnen Sie je nach Problemtyp F12 und erg&auml;nzen Sie die entsprechenden Inhalte.
+
+### 3.1 Wann Informationen erg&auml;nzt werden m&uuml;ssen
+
+Die KI k&ouml;nnte wie folgt antworten:
+- "Bitte &ouml;ffnen Sie die Console und pr&uuml;fen Sie, ob Fehler vorliegen"
+- "Machen Sie einen Screenshot des Network-Panels"
+- "Ich ben&ouml;tige die genaue Fehlermeldung"
+
+In diesem Fall erg&auml;nzen Sie die Screenshots anhand der folgenden Anleitung.
+
+### 3.2 Console-Informationen erg&auml;nzen (wei&szlig;e Seite / Fehler)
+
+::: tip Arbeitsschritte
+
+**Schritt 1: F12 dr&uuml;cken, um die Entwicklertools zu &ouml;ffnen**
+
+Auf dem Mac: `Cmd+Option+I`, oder Rechtsklick auf die Seite und "Untersuchen" w&auml;hlen.
+
+**Schritt 2: Zum Tab Console wechseln**
+
+**Schritt 3: Screenshot der roten Fehlermeldungen machen**
+
+**Schritt 4: An die KI senden**
+
+```
+Die Console zeigt folgende Fehler:
+
+[Screenshot]
+```
+
+:::
+
+### 3.3 Network-Informationen erg&auml;nzen (Datenprobleme / API-Fehler)
+
+::: tip Arbeitsschritte
+
+**Schritt 1: F12 dr&uuml;cken, um die Entwicklertools zu &ouml;ffnen**
+
+**Schritt 2: Zum Tab Network wechseln**
+
+**Schritt 3: Die Aktion erneut ausf&uuml;hren** (auf Speichern klicken / Seite aktualisieren)
+
+**Schritt 4: Die entsprechende Anfrage finden und einen Screenshot machen**
+
+- URL und Statuscode pr&uuml;fen
+- Payload (gesendete Parameter) pr&uuml;fen
+- Response (R&uuml;ckgabeergebnis) pr&uuml;fen
+
+**Schritt 5: An die KI senden**
+
+```
+Network-Informationen wie folgt:
+
+Anfrage: [Screenshot 1]
+Parameter: [Screenshot 2]
+Antwort: [Screenshot 3]
+```
+
+:::
+
+### 3.4 Elements-Informationen erg&auml;nzen (Styling-Probleme)
+
+::: tip Arbeitsschritte
+
+**Schritt 1: Rechtsklick auf das Element → "Untersuchen"**
+
+Die Entwicklertools positionieren sich automatisch auf diesem Element.
+
+**Schritt 2: Screenshot des Styles-Panels machen**
+
+**Schritt 3: An die KI senden**
+
+```
+Element-Styling wie folgt:
+
+[Screenshot]
+```
+
+:::
+
+## 4. Dritter Schritt: Iterativ bis zur L&ouml;sung
+
+### 4.1 Ineffiziente Vorgehensweisen
+
+Diese Vorgehensweisen verschwenden Ihre Zeit:
+
+Bei einer Fehlermeldung in Panik geraten und blind Code &auml;ndern
+Eine halbe Stunde nach L&ouml;sungen suchen
+Versuchen, selbst die Bedeutung jedes Fehlers zu verstehen
+Sich allein bis nachts um drei durchs Debugging qu&auml;len
+
+### 4.2 Effiziente Vorgehensweise
+
+Gehen Sie nach diesem Prozess vor:
+
+Zun&auml;chst das Ph&auml;nomen beschreiben und mit Screenshot fragen
+Wenn die KI weitere Informationen ben&ouml;tigt, F12 &ouml;ffnen und erg&auml;nzen
+Den Empfehlungen entsprechend den Code &auml;ndern
+Nach der &Auml;nderung testen; falls das Problem weiterhin besteht, weiter mit Screenshot fragen
+
+## 5. Zusammenfassung: Vollst&auml;ndiger Prozess
+
+```
+Problem aufgetreten
+    ↓
+Ph&auml;nomen direkt beschreiben + Screenshot
+    ↓
+An die KI senden: "Was soll ich tun?"
+    ↓
+Hat die KI das Problem direkt gel&ouml;st?
+    ↓ Ja
+Den Anweisungen der KI folgen
+    ↓
+Testen, ob das Problem gel&ouml;st ist
+    ↓
+    ↓ Nein / KI ben&ouml;tigt weitere Informationen
+F12 &ouml;ffnen, wichtige Informationen erg&auml;nzen
+    ↓
+Erneut an die KI senden
+    ↓
+Wiederholen, bis das Problem gel&ouml;st ist
+```
diff --git a/docs/de-de/stage-1/appendix-c-consumer-scenarios/index.md b/docs/de-de/stage-1/appendix-c-consumer-scenarios/index.md
new file mode 100644
index 0000000..638c61b
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-c-consumer-scenarios/index.md
@@ -0,0 +1,642 @@
+---
+title: 'C-End Konsumszenarien - Inspirationsreferenz'
+description: 'Dieses Dokument fasst kreative Anwendungsrichtungen von LLM in C-End-Konsumszenarien zusammen, inklusive Inspirationszenarien aus Lebensstil, emotionaler Begleitung, Unterhaltung, persoenlichem Wachstum und sozialer Interaktion als Referenz fuer Entwickler von AI-Anwendungen fuer Endverbraucher.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'ca. <strong>4 Stunden</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// Themenpool pro Szenario: Fokus auf Gefuehl, Atmosphaere und psychologische Suggestion
+const topicPool = {
+  'lifestyle': [
+    { title: 'Morgenritual-Aktivierer', desc: 'Erstellt persoenliche Morgenrituale basierend auf Wetter, Terminen und Stimmung' },
+    { title: 'Wohlfuehl-Atmosphaere fuer Single-Haushalte', desc: 'Gestaltet Wohlfuehl-Ambiente mit Licht, Musik und Duft-Kombinationen' },
+    { title: 'Wochenend-Wellness-Plan-Generator', desc: 'Empfiehlt die perfekte Couch-Kombination: Film + Snacks + Ambiente' },
+    { title: 'Einschlaf-Geschichten-Radio', desc: 'Sanfte Geschichten und Meditationsfuehrungen als persoenlicher Begleiter zum Einschlafen' },
+    { title: 'Alltagsaesthetik-Inspiration', desc: 'Entdeckt Schoenheit im Alltag und generiert Aesthetik-Tipps und Ritualfuehrer' }
+  ],
+  'emotion': [
+    { title: 'Nachtlicher Zuhoerer', desc: '24/7 verfuegbarer emotionaler Zuhoerer ohne Wertung' },
+    { title: 'Trennungs-Begleiter', desc: 'Sanfte Begleitung, Heilungsraete und emotionale Entlastung nach einer Trennung' },
+    { title: 'Angstbewaeltigungs-Atemtrainer', desc: 'Erkennt Angst und fuehrt Atemuebungen und Achtsamkeitsmeditation an' },
+    { title: 'Selbstvertrauens-Aufbauer', desc: 'Hilft durch positive Dialoge und psychologische Suggestion beim Wiederaufbau von Selbstwert' },
+    { title: 'Emotionales Tagebuch-Analyst', desc: 'Analysiert Emotionstagebuecher, erkennt Muster und gibt warme Einblicke' }
+  ],
+  'entertainment': [
+    { title: 'Immersives Murder-Mystery DM', desc: 'Spielt den Spielleiter, erzeugt Spannung und treibt die Handlung voran' },
+    { title: 'Open-World-Seelen-NPC', desc: 'NPCs mit Persoenlichkeit, die sich an Spielergeschichten erinnern' },
+    { title: 'Personalisierter Podcast-Generator', desc: 'Erstellt eigene Podcasts basierend auf Interessen, natuerlich wie ein Gespraech' },
+    { title: 'Virtuelles Konzert-Ambiente', desc: 'Erzeugt Live-Gefuehl bei Online-Konzerten mit Echtzeit-Interaktion' },
+    { title: 'Interaktiver Roman-Mitschreiber', desc: 'Erstellt gemeinsam Geschichten, jede Wahl beeinflusst die Handlung' }
+  ],
+  'growth': [
+    { title: 'Persoenlicher Wachstums-Begleiter', desc: 'Dokumentiert Entwicklung, ermutigt und blickt auf wichtige Meilensteine zurueck' },
+    { title: 'Gamifizierter Gewohnheits-Coach', desc: 'Verwandelt oede Gewohnheitsbildung in ein spannendes Abenteuerspiel' },
+    { title: 'Lernpartner-Vermittlung', desc: 'Findet gleichgesinnte Lernpartner fuer gegenseitige Motivation' },
+    { title: 'Taegliche Kleinodes-Entdecker', desc: 'Hilft, kleine Schoenheiten im Alltag zu finden und Dankbarkeit zu kultivieren' },
+    { title: 'Lebenssimulator', desc: 'Simuliert verschiedene Lebensentscheidungen und erlebt alternative Wege' }
+  ],
+  'social': [
+    { title: 'Eisbrecher-Thema-Generator', desc: 'Bietet interessante Themen fuer soziale Anlaesse zum Aufbrechen' },
+    { title: 'Social-Media-Copywriter', desc: 'Generiert stilvolle Posts basierend auf Fotos und Stimmung' },
+    { title: 'Date-Atmosphaere-Planer', desc: 'Plant komplette Date-Ambientes von Ort ueber Themen bis Ueberraschungen' },
+    { title: 'Remote-Party-Animator', desc: 'Belebt Online-Geselligkeit mit Spielen und Interaktion' },
+    { title: 'Sozialenergie-Manager', desc: 'Hilft Introvertierten, soziale Energie zu managen' }
+  ],
+  'creative': [
+    { title: 'Inspiration-Notfallkit', desc: 'Unerwartete kreative Funken bei Ideenblockaden' },
+    { title: 'Personal-Style-Entdecker', desc: 'Hilft, den eigenen einzigartigen Stil zu finden' },
+    { title: 'Bullet-Journal-Aesthetik-Berater', desc: 'Bietet Layout-, Farb- und Content-Tipps fuer Buecher und Tagebuecher' },
+    { title: 'Fotografie-Kompositions-Leitfaden', desc: 'Gibt Foto- und Bearbeitungstipps basierend auf Szene und gewuenschter Stimmung' },
+    { title: 'Stimmungsbasierter Musik-Matcher', desc: 'Empfiehlt die perfekte Musikauswahl fuer aktuelle Stimmung und Szene' }
+  ],
+  'travel': [
+    { title: 'City-Walk-Entdeckerfuehrer', desc: 'Erkunde Staedte wie ein Einheimischer und finde versteckte Orte' },
+    { title: 'Reise-Tagebuch-Generator', desc: 'Verwandelt Reisefotos und Stimmungen in schoene Reiseberichte' },
+    { title: 'Solo-Reise-Begleiter', desc: 'Bietet Begleitung, Ratschlaege und Sicherheit fuer Alleinreisende' },
+    { title: 'Zielort-Atmosphaere-Vorschau', desc: 'Erlebe die Atmosphaere des Reiseziels vorab immersiv' },
+    { title: 'Reisefotografie-Stimmungsberater', desc: 'Gibt Anleitung fuer atmosphaerische Reisefotos basierend auf Szene und Licht' }
+  ],
+  'health': [
+    { title: 'Motivations-Aktivierer', desc: 'Gibt genau die richtige Ermutigung wenn man sich nicht bewegen moechte' },
+    { title: 'Gesunde-Kueche-Inspiration', desc: 'Generiert gesunde, wohltuende Rezepte basierend auf Stimmung und Zutaten' },
+    { title: 'Schlafqualitaet-Optimierer', desc: 'Erstellt umfassend optimale Schlafbedingungen von Umwelt bis Psyche' },
+    { title: 'Koerperwahrnehmungs-Leitfaden', desc: 'Lenkt die Aufmerksamkeit auf Koerpersignale und foerdert Koerper-Geist-Verbindung' },
+    { title: 'Selbstfuersorge-Erinnerung', desc: 'Erinnert daran, im Alltag innezuhalten und sich selbst zu pflegen' }
+  ],
+  'learning': [
+    { title: 'Gamifizierter Wissens-Explorer', desc: 'Verwandt oedes Lernen in ein spannendes Entdeckungsabenteuer' },
+    { title: 'Sprachlern-Szenariopartner', desc: 'Spielt verschiedene Rollen fuer natuerliches Sprachenlernen in Dialogen' },
+    { title: 'Neugier-Befriediger', desc: 'Beantwortet wilde Fragen und stillt die Neugier auf die Welt' },
+    { title: 'Lesebuch-Inspiration', desc: 'Hilft beim Ordnen von Leseeindruecken und findet neue Perspektiven' },
+    { title: 'Wissensvermittlung-Gestalter', desc: 'Verwandelt Gelerntes in interessante Teilen-Inhalte' }
+  ],
+  'relationship': [
+    { title: 'Beziehungs-Kommunikationscoach', desc: 'Hilft, schwierige Gefuehle auszudruecken und Beziehungen zu verbessern' },
+    { title: 'Familien-Gedanken-Erinnerung', desc: 'Erinnert daran, sich um Familie zu kuemmern mit herzlichen Interaktions-Tipps' },
+    { title: 'Freundschaftspflege-Berater', desc: 'Hilft, Fernfreundschaften zu pflegen und gemeinsame Themen zu finden' },
+    { title: 'Liebesgesten- und Ueberraschungsplaner', desc: 'Plant unvergessliche Ueberraschungen und romantische Momente' },
+    { title: 'Konfliktdeeskalations-Berater', desc: 'Bietet Ratschlaege und Formulierungen zur Entspannung bei Beziehungskonflikten' }
+  ],
+  'pet': [
+    { title: 'Haustier-Tagebuch', desc: 'Tagebucheintraege aus der Perspektive des Haustiers' },
+    { title: 'Haustier-Verhaltensdeuter', desc: 'Entschluesselt die Korpersprache des Haustiers' },
+    { title: 'Haustier-Aktivitaeten-Planer', desc: 'Plant kreative Interaktionsaktivitaeten mit dem Haustier' },
+    { title: 'Haustier-Gedaechtnis-Geschichten', desc: 'Verwandelt Fotos und Erinnerungen in herzliche Geschichten' },
+    { title: 'Neulings-Haustierfuehrer', desc: 'Bietet waerme Begleitung und Anleitung fuer Erst-Haustierbesitzer' }
+  ],
+  'finance': [
+    { title: 'Kaufimpuls-Bewusstsein', desc: 'Erkennt Emotionen hinter Impulskaeufen und foerdert gesunde Konsumgewohnheiten' },
+    { title: 'Sparziel-Visualisierer', desc: 'Verwandelt Sparziele in sichtbare Traumfortschritte' },
+    { title: 'Finanzwissen-Spaasschule', desc: 'Lerne Finanzwissen auf unterhaltsame Weise' },
+    { title: 'Finanzangst-Beruhiger', desc: 'Bietet emotionale Unterstuetzung und praktische Ratschlaege bei Finanzstress' },
+    { title: 'Mini-Investment-Experience', desc: 'Spielerischer Einstieg ins Investieren mit niedriger Hemmschwelle' }
+  ],
+  'career': [
+    { title: 'Karriereorientierungs-Begleiter', desc: 'Bietet Zuhoeren, Erkundung und Orientierung in beruflichen Uebergangsphasen' },
+    { title: 'Beruflicher Sinn-Aktivierer', desc: 'Hilft, Wert und Bedeutung in der Arbeit zu entdecken' },
+    { title: 'Beruflicher Netzwerk-Berater', desc: 'Bietet lockere Themen und Interaktionstipps fuer berufliche Netzwerke' },
+    { title: 'Nebenverdienst-Ideengeber', desc: 'Weckt kreative Nebenverdienst-Ideen basierend auf Faehigkeiten und Interessen' },
+    { title: 'Vorstellungsgespraech-Confidence-Booster', desc: 'Psychologische Vorbereitung und Motivation vor Vorstellungsgespraechen' }
+  ],
+  'home': [
+    { title: 'Wohnraum-Atmosphaere-Gestalter', desc: 'Designt Wohn-Ambientes basierend auf Stimmung und Jahreszeit' },
+    { title: 'Jahreszeiten-Einrichtungsberater', desc: 'Passt die Einrichtung an die Jahreszeiten an fuer Abwechslung' },
+    { title: 'Kleine-Raum-Magie', desc: 'Schoene, gemuetliche Atmosphaere auch auf engem Raum' },
+    { title: 'Haushaltsritual-Gestalter', desc: 'Verleiht alltaeglichen Haushaltsaktivitaeten Sinn und Ritual' },
+    { title: 'Ausmisten-Begleiter', desc: 'Psychologische Unterstuetzung und Entscheidungs Hilfe beim Ausmuellen' }
+  ],
+  'food': [
+    { title: 'Solo-Mahlzeit-Genuss', desc: 'Einfache, wohltuende Rezepte fuer Single-Haushalte' },
+    { title: 'Festtisch-Ambiente-Designer', desc: 'Festliche Tischdekorationen fuer besondere Anlaesse' },
+    { title: 'Stimmungsbasierter Kuechen-Matcher', desc: 'Empfiehlt Speisen und Zubereitungen passend zur aktuellen Stimmung' },
+    { title: 'Kuechenanfaenger-Motivator', desc: 'Waerme Ermutigung und einfache Rezepte fuer Kochanfaenger' },
+    { title: 'Food-Fotografie-Ambiente-Guide', desc: 'Macht auch einfache Gerichte fotogen' }
+  ],
+  'fashion': [
+    { title: 'Outfit-Moodboard des Tages', desc: 'Generiert Outfit-Inspiration basierend auf Wetter, Anlass und Stimmung' },
+    { title: 'Capsule-Wardrobe-Stylist', desc: 'Unendige Kombinationsmoeglichkeiten mit wenigen Teilen' },
+    { title: 'Personal-Style-Reise', desc: 'Hilft, den eigenen einzigartigen Stil zu entdecken und aufzubauen' },
+    { title: 'Upcycling-Style-Kreativierer', desc: 'Neue Kombinationsideen fuer vorhandene Kleidung' },
+    { title: 'Anlass-Outfit-Berater', desc: 'Selbstbewusste Outfits fuer besondere Anlaesse' }
+  ]
+}
+
+// Vordefinierte Empfehlungszuordnung nach Atmosphaere und Gefuehl
+const recommendationMap = {
+  // Atmosphaere: heilsam
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Atmosphaere: Wachstum
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Atmosphaere: sozial
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // Atmosphaere: Entdeckung
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Atmosphaere: Alltag
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'Heilsam', value: 'healing', desc: 'Waerme, Trost, Heilung' },
+  { label: 'Wachstum', value: 'growth', desc: 'Fortschritt, Durchbruch, Transformation' },
+  { label: 'Sozial', value: 'social', desc: 'Verbindung, Teilen, Interaktion' },
+  { label: 'Entdeckung', value: 'explore', desc: 'Neugier, Abenteuer, Finden' },
+  { label: 'Alltag', value: 'daily', desc: 'Gewoehnlich, echt, im Moment' }
+]
+
+const feelingOptions = [
+  { label: 'Entspannen', value: 'relax', desc: 'Stress abbauen, abschalten' },
+  { label: 'Inspiration suchen', value: 'inspire', desc: 'Kreativitaet anregen, Impulse erhalten' },
+  { label: 'Verbindung wuenschen', value: 'connect', desc: 'Mit Menschen verbinden, emotionale Resonanz' },
+  { label: 'Kurz entfliehen', value: 'escape', desc: 'Der Realitaet entfliehen, eintauchen' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'Lebensstil', anchor: '#_1-lebensstil' },
+  { key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_2-emotionale-begleitung' },
+  { key: 'entertainment', name: 'Unterhaltung', anchor: '#_3-unterhaltung' },
+  { key: 'growth', name: 'Persoenliches Wachstum', anchor: '#_4-persoenliches-wachstum' },
+  { key: 'social', name: 'Soziale Interaktion', anchor: '#_5-soziale-interaktion' },
+  { key: 'creative', name: 'Kreativer Ausdruck', anchor: '#_6-kreativer-ausdruck' },
+  { key: 'travel', name: 'Reiseerfahrung', anchor: '#_7-reiseerfahrung' },
+  { key: 'health', name: 'Koerperliche und geistige Gesundheit', anchor: '#_8-koerperliche-und-geistige-gesundheit' },
+  { key: 'learning', name: 'Wissensentdeckung', anchor: '#_9-wissensentdeckung' },
+  { key: 'relationship', name: 'Beziehungspflege', anchor: '#_10-beziehungspflege' },
+  { key: 'pet', name: 'Haustier-Begleitung', anchor: '#_11-haustier-begleitung' },
+  { key: 'finance', name: 'Finanzielle Gesundheit', anchor: '#_12-finanzielle-gesundheit' },
+  { key: 'career', name: 'Karriereentwicklung', anchor: '#_13-karriereentwicklung' },
+  { key: 'home', name: 'Wohnraum', anchor: '#_14-wohnraum' },
+  { key: 'food', name: 'Kulinarik', anchor: '#_15-kulinarik' },
+  { key: 'fashion', name: 'Mode und Stil', anchor: '#_16-mode-und-stil' }
+]
+
+// Empfehlungen berechnen: zufaellig aus dem Themenpool auswaehlen
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // Aus jedem empfohlenen Szenario 1-2 Themen zufaellig auswaehlen
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // 1-2 Themen zufaellig auswaehlen
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // Zufaellig sortieren und Gesamtzahl begrenzen
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Beschreibung der aktuellen Auswahl abrufen
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // Scrollen verzoegern, damit das DOM aktualisiert ist
+  setTimeout(() => {
+    // Suche per ID versuchen (unterstuetzt mehrere Formate)
+    let element = document.querySelector(anchor)
+    
+    // Falls nicht gefunden, andere moegliche ID-Formate versuchen
+    if (!element) {
+      // Unterstrich-Praefix entfernen
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // Falls weiter nicht gefunden, per Ueberschriftentext suchen
+    if (!element) {
+      // Szenarionamen aus dem Anchor extrahieren
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // Exakte oder partielle Uebereinstimmung
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // Zielabschnitt hervorheben
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# C-End Konsumszenarien - Inspirationsreferenz
+
+## Kapiteluebersicht
+
+<ChapterIntroduction :duration="duration" :tags="['C-End-Apps', 'Lebensstil', 'Emotionales Erlebnis', 'Atmosphaere']" coreOutput="15+ Lebensszenario-Inspirationen entdecken" expectedOutput="Produktrichtungen finden, die Nutzer beruehren">
+
+Dieses Dokument fasst <strong>kreative Anwendungsrichtungen von LLM in C-End-Konsumszenarien</strong> zusammen. Anders als B-End-Produkte, die auf Effizienz und Schmerzpunkte fokussieren, legen C-End-Produkte mehr Wert auf <strong>Atmosphaere, psychologische Suggestion und Gefuehlsbetonung</strong>, damit Nutzer emotionale Resonanz und positive Erlebnisse haben.
+
+</ChapterIntroduction>
+
+## Schnellauswahl der Szenario-Atmosphaere
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Finden Sie inspirierende Szenarien</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Waehlen Sie Ihre gewuenschte Atmosphaere und aktuelle Stimmung - das System empfiehlt passende Szenarien. Klicken Sie auf Tags, um zum entsprechenden Kapitel zu springen.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="Atmosphaere-Typ waehlen" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="Aktuelle Stimmung waehlen" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      Fuer Sie empfohlen {{ currentSelection.vibe }} × {{ currentSelection.feeling }}  Szenarien:
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      Neu waehlen
+    </el-button>
+  </div>
+</el-card>
+
+---
+
+## 1. Lebensstil
+
+> 💡 **Kernkonzept**：Alltaegliches mit Ritualen versehen und Schoenheit in Details schaffen
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Morgenritual-Aktivierungsassistent | Integriert Wetter-API und Kalenderdaten; LLM generiert persoenliche Morgenplaene; spielt passende Musik ueber Smart Speaker ab und laesst Licht langsam heller werden |
+| 2 | Atmosphaeren-Gestalter fuer Single-Haushalte | Bindet Smart-Home-Geraete ein (Licht, Lautsprecher, Duftspender); LLM passt Parameter nach Uhrzeit und Stimmung an; lernt Nutzerpraeferenzen und optimiert laufend |
+| 3 | Wochenend-Wellness-Plan-Generator fuer Zuhause | Bindet Streaming-APIs fuer Filmlisten ein und kombiniert Nutzerpraeferenzen zu Film + Essen + Einrichtung |
+| 4 | Einschlaf-Radio fuer innere Ruhe | Nutzt TTS fuer sanfte Geschichten, mischt White Noise und laesst die Lautstaerke intelligent abfallen; passt Inhalte anhand von Schlafdaten an |
+| 5 | Alltagsaesthetik-Inspirationsfaenger | Analysiert Umgebungsfotos per Bilderkennung, LLM generiert Aesthetik-Tipps; Content-Empfehlungen im Stil von Pinterest/Xiaohongshu |
+
+---
+
+## 2. Emotionale Begleitung
+
+> 💡 **Kernkonzept**：Bedingungslose Annahme und Begleitung als sanfter emotionaler Raum
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Naechtlicher Kummerkasten-Zuhoerer | Ende-zu-Ende-Verschluesselung fuer Privatsphaere; LLM-Emotionsanalyse versteht Gefuehle; Langzeitgedaechtnis speichert Nutzerstories und begleitet in Mehr-Runden-Dialogen |
+| 2 | Trennungs-Heilungsbegleiter | Erkennt emotionale Phasen und bietet phasenweise Unterstuetzung (Erzaehlphase -> Entlastungsphase -> Wiederaufbau); RAG-Suche in psychologischer Wissensbasis |
+| 3 | Atemcoach gegen Angst | Bindet Biosensordaten ein (Herzrate/Atem); ueberwacht Angstniveau in Echtzeit; fuehrt per Stimme Atemrhythmus und progressive Muskelentspannung an |
+| 4 | Mentor zum Wiederaufbau von Selbstvertrauen | Dialograhmen aus positiver Psychologie, dokumentiert kleine Erfolge und gibt Feedback; kognitive Umstrukturierung hilft gegen negative Selbstgespraeche |
+| 5 | Intelligente Deutung des Emotionstagebuchs | NLP-Modell zur Emotionserkennung, Zeitreihenanalyse entdeckt Muster; visualisierte Emotionskarte und praediktive Emotionswarnungen |
+
+---
+
+## 3. Unterhaltung
+
+> 💡 **Kernkonzept**：Immersive Erlebnisse schaffen, Unterhaltung als Zufluchtsort der Seele
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Immersiver Murder-Mystery-DM | LLM generiert Handlungszweige in Echtzeit, Sprachsynthese spielt NPCs; Schwierigkeit und Tempo passen sich Spielerreaktionen an; AR/VR-Szenenrendering |
+| 2 | Seelenvoller NPC fuer Open-World-Spiele | Langzeitgedaechtnis-Datenbank speichert Spielerinteraktionen, LLM generiert persoenliche Dialoge; Affective Computing gibt NPCs echte emotionale Reaktionen |
+| 3 | Personalisierte Podcast-Content-Generierung | Generiert eigene Inhalte anhand des Interessenprofils; TTS klont bevorzugte Stimmen; beantwortet Hoererfragen interaktiv in Echtzeit |
+| 4 | Atmosphaeren-Team fuer virtuelle Konzerte | Virtuelle Avatare, Echtzeit-Chat-Interaktion, virtuelle Lightsticks/Fan-Requisiten; raeumliches Audio schafft Live-Gefuehl |
+| 5 | Co-Creation-Partner fuer interaktive Romane | LLM generiert Handlung in Echtzeit, Nutzerentscheidungen beeinflussen den Verlauf; mehrere Enden und dynamische Figurenbeziehungen |
+
+---
+
+## 4. Persoenliches Wachstum
+
+> 💡 **Kernkonzept**：Wachstum ist keine Askese, sondern eine spannende Reise der Selbstentdeckung
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Zeuge persoenlichen Wachstums | Visualisiert Wachstumspfade als Timeline, markiert Meilensteine automatisch; Vergleichsbilder zeigen "frueheres Ich" vs. "heutiges Ich" |
+| 2 | Gamifizierter Coach fuer Gewohnheitsaufbau | Gamification-Mechaniken (XP, Level, Abzeichen), soziale Ranglisten, AI-Coach-Rollenspiel wie "Abenteuermentor" |
+| 3 | Matching fuer Lernpartner | Matching-Algorithmus nach Interessen und Lernzielen, Lerngruppen-Community, gegenseitige Check-ins |
+| 4 | Entdecker kleiner taeglicher Gluecksmomente | Bilderkennung entdeckt schoene Alltagsmomente, Gratitude-Journal-Fuehrung, woechentlicher Rueckblick auf schoene Momente |
+| 5 | Lebenssimulations-Erlebnis | Mehrzweigige Story simuliert Folgen verschiedener Entscheidungen, Vergleich paralleler Leben; visualisierte Entscheidungsfolgen |
+
+---
+
+## 5. Soziale Interaktion
+
+> 💡 **Kernkonzept**：Soziales natuerlich und entspannt gestalten, komfortable Verbindung finden
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Eisbrecher-Themengenerator | Intelligente Themenempfehlungen nach Anlass und Teilnehmenden, Echtzeit-Gespraechsanalyse fuer Anschlussfragen; Rettungshinweise fuer peinliche Momente |
+| 2 | Social-Post-Atmosphaeren-Texter | Analysiert Bildinhalte, LLM generiert Texte in mehreren Stilen (literarisch/humorvoll/tiefgehend); intelligente Emoji- und Layout-Empfehlungen |
+| 3 | Date-Atmosphaerenplaner | Generiert Date-Plaene nach Interessen beider Personen, empfiehlt Restaurants/Aktivitaeten und Gespraechsthemen; Wetter- und Verkehrshinweise in Echtzeit |
+| 4 | Stimmungsmacher fuer Remote-Treffen | Online-Spielbibliothek, Eisbrecher-Aktivitaetsgenerator, Themenrad; virtuelle Hintergruende und Filter staerken die Atmosphaere |
+| 5 | Assistent fuer soziale Energie | Bewertet Energieverbrauch nach sozialen Aktivitaeten, gibt Erholungsvorschlaege (Alleinzeit-Aktivitaeten); intelligente Planung des Sozialkalenders |
+
+---
+
+## 6. Kreativer Ausdruck
+
+> 💡 **Kernkonzept**：Jeder hat Kreativitaet, sie muss nur geweckt werden
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Notfallkit gegen Inspirationsmangel | Cross-Domain-Assoziationsalgorithmus, zufaellige Stimuluswoerter, kreative Prompt-Bibliothek; Mindmap-Tool fuer Ideendivergenz |
+| 2 | Guide zur Entdeckung des persoenlichen Stils | Bildanalyse erkennt vorhandenen Stil, empfiehlt Stiltrends, virtuelle Anprobe/Make-up; Timeline der Stilentwicklung |
+| 3 | Aesthetikberater fuer Bullet Journals und Tagebuecher | Layout-Vorlagen, Farbpaletten, Deko-Elemente; Handschrifterkennung und Content-Verschoenerung |
+| 4 | Fotografie-Kompositions- und Atmosphaeren-Guide | Szenenerkennung und Kompositionsvorschlaege, Filterstil-Empfehlungen, intelligente Anpassung von Bearbeitungsparametern; Lernpfad fuer Fototechnik |
+| 5 | Musik-Stimmungs-Matcher | Algorithmus fuer musikalische Emotionsanalyse, Stimmungserkennung, persoenliche Playlists; Musikgeschichten und Hintergrundinfos |
+
+---
+
+## 7. Reiseerkundung
+
+> 💡 **Kernkonzept**：Reisen ist nicht nur Landschaften sehen, sondern verschiedene Lebensweisen erfahren
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | City-Walk-Erkundungsfuehrer | Aggregiert Inhalte lokaler Kenner, empfiehlt Nischenorte, AR-Navigation; Echtzeit-Uebersetzung und Spracherklaerungen |
+| 2 | Reise-Stimmungs-Tagebuchgenerator | Automatische Fotoklassifikation und Auswahl, LLM generiert schoene Reiseberichte, Geotag-Timeline; Reisevideo mit einem Klick |
+| 3 | Begleitassistent fuer Solo-Reisen | Echtzeit-Positionsfreigabe und Sicherheitshinweise, lokale Notfallkontakte, AI-Reisefuehrer per Stimme; Community fuer Alleinreisende |
+| 4 | Atmosphaerenvorschau des Reiseziels | VR/360-Grad-Panorama, Simulation lokaler Geraeusche und Gerueche, kulturelle Hintergruende; virtuelle "Probewohnen"-Erfahrung |
+| 5 | Atmosphaerenberatung fuer Reisefotografie | Golden-Hour-Erinnerungen, Kompositionshilfslinien, Empfehlungen lokaler Fotospots; Tipps fuer Farbgrading nach der Aufnahme |
+
+---
+
+## 8. Koerperliche und geistige Gesundheit
+
+> 💡 **Kernkonzept**：Gesundheit ist kein Ziel, sondern sanfte Selbstfuersorge
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Aktivierer fuer Bewegungsmotivation | Empfiehlt passende Sportarten nach Nutzerzustand, Mikro-Workouts (5 Minuten), gamifizierte Sport-Challenges; soziale Sport-Check-ins |
+| 2 | Inspirationskueche fuer gesunde Ernaehrung | Erkennt Zutaten im Kuehlschrank, empfiehlt persoenliche Rezepte, analysiert Naehrstoffkombinationen; Step-by-step-Kochanleitung |
+| 3 | Atmosphaeren-Optimierer fuer Schlafqualitaet | Analysiert Schlaftracking-Daten, generiert Einschlafrituale, empfiehlt Umweltoptimierung (Temperatur/Luftfeuchte/Licht); intelligentes Wecken |
+| 4 | Guide fuer Koerperwahrnehmung | Fuehrt Body-Scan-Meditation an, verbindet Koerperbereiche mit Emotionen, Uebungen fuer Koerper-Geist-Verbindung; Biofeedback-Visualisierung |
+| 5 | Erinnerung an Selbstfuersorge | Ueberwacht Arbeitsintensitaet, erinnert regelmaessig an Pausen, empfiehlt Mikro-Selbstfuersorge (Wasser/Stretching/Tiefatmen); Selbstfuersorge-Protokoll |
+
+---
+
+## 9. Wissensentdeckung
+
+> 💡 **Kernkonzept**：Lernen ist ein endloses Abenteuer, Neugier ist der beste Lehrer
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Gamifizierter Guide zur Wissensentdeckung | Visualisiert Wissenspunkte als Karte, Lernpfad mit Leveln, Erfolgsabzeichen; AI-Mentor-Rollenspiel |
+| 2 | Szenario-Partner fuer Sprachenlernen | LLM spielt verschiedene Rollen fuer Dialoge, korrigiert Aussprache, erklaert kulturelle Hintergruende; immersive Szenariosimulation |
+| 3 | Assistent zur Befriedigung von Neugier | Bindet Wikipedia/Wissensgraphen ein, erklaert komplexe Konzepte verstaendlich, empfiehlt verwandtes Wissen; Neugier-Protokoll |
+| 4 | Inspirationsgeber fuer Lesenotizen | Analysiert Buchinhalte, extrahiert und verknuepft Standpunkte, empfiehlt Denkperspektiven; Vorlagen und Verschoenerung fuer Lesenotizen |
+| 5 | Atmosphaeren-Gestalter fuer Wissensaustausch | Erstellt automatisch Wissenskarten, optimiert Share-Texte, verbessert Visuals; Datenfeedback fuer Social Sharing |
+
+---
+
+## 10. Beziehungspflege
+
+> 💡 **Kernkonzept**：Gute Beziehungen brauchen Pflege - aber das muss nicht kompliziert sein
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Kommunikationscoach fuer intime Beziehungen | Generiert Vorlagen fuer Gefuehlsausdruck, leitet gewaltfreie Kommunikation an, bietet Formulierungen zur Konfliktloesung; bewertet Beziehungsgesundheit |
+| 2 | Erinnerungsassistent fuer Familienfuersorge | Erinnerungen an wichtige Daten (Geburtstage/Jahrestage), Vorschlaege fuer Fuersorgeformulierungen, Familienaktivitaeten; erstellt Familienalben |
+| 3 | Atmosphaeren-Gestalter fuer Freundschaftspflege | Protokolliert Freundesinteraktionen, empfiehlt gemeinsame Themen, organisiert Remote-Treffen; Freundschafts-Timeline und Erinnerungsgenerierung |
+| 4 | Planer fuer Gestandnisse und Ueberraschungen | Generiert persoenliche Ueberraschungsplaene, empfiehlt Geschenke und romantische Formulierungen; Zeitplan und Erinnerungen fuer die Umsetzung |
+| 5 | Guide zur Konfliktentschaerfung | Formulierungen zur emotionalen Abkuehlung, Perspektivwechsel-Anleitung, Schritte zur Versoehnung; Tracking der Beziehungsreparatur |
+
+---
+
+## 11. Haustier-Begleitung
+
+> 💡 **Kernkonzept**：Haustiere sind Familie, ihre Begleitung verdient es, festgehalten zu werden
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Anthropomorphes Haustier-Tagebuch | Analysiert Haustierverhalten, generiert Tagebucheintraege in Ich-Perspektive, ordnet Fotos automatisch zu; Haustier-"Freundeskreis" |
+| 2 | Deuter fuer Haustierverhalten | Analysiert Videos von Haustierverhalten, Gesundheitswarnungen, Trainingstipps; Wissensbasis zu Rassemerkmalen |
+| 3 | Planer fuer gemeinsame Haustierzeit | Aktivitaetsempfehlungen fuer Haustiere, DIY-Spielzeuganleitungen, haustierfreundliche Orte; Haustier-Social-Matching |
+| 4 | Generator fuer Haustier-Erinnerungsgeschichten | Waehlt Fotos und Videos aus, generiert Timeline-Geschichten, kombiniert passende Musik; automatische Erstellung von Erinnerungsalbum/-video |
+| 5 | Beruhigender Guide fuer neue Haustierhalter | Phasenweiser Pflegeguide, FAQ, Umgang mit Notfaellen; Community-Support fuer Einsteiger |
+
+---
+
+## 12. Finanzielle Gesundheit
+
+> 💡 **Kernkonzept**：Finanzielle Freiheit ist nicht das Ziel - finanzielle Gesundheit schon
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Assistent fuer Konsum-Emotionsbewusstsein | Analysiert Konsumaufzeichnungen und Emotion-Konsum-Zusammenhaenge, warnt vor Impulskaeufen; empfiehlt alternative Formen der Befriedigung |
+| 2 | Visuelle Motivation fuer Sparziele | Visualisiert Ziel-Fortschritt, rendert Traumszenen, feiert Meilensteine; Spiel zum Aufbau von Spargewohnheiten |
+| 3 | Finanzwissen leicht gelernt | Liefert Wissen in kleinen Einheiten, szenariobasierte Fallbeispiele, interaktive Q&A; Wissenstests und Zertifikate |
+| 4 | Beruhiger fuer Finanzangst | Bewertet finanzielle Gesundheit, Stressmanagement-Techniken, kleine Handlungsplaene; finanzpsychologische Beratung |
+| 5 | Spiel fuer Kleininvestment-Erfahrung | Virtuelle Investmentsimulation, Risikoaufklaerung, Portfolio-Spiel; Anleitung zu echten Kleininvestitionen |
+
+---
+
+## 13. Karriereentwicklung
+
+> 💡 **Kernkonzept**：Karriere ist kein Schienenstrang, sondern eine Wildnis zum Erkunden
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Begleiter bei beruflicher Orientierungslosigkeit | Berufliches Interessensassessment, Kompetenzinventar, Brancheninformationen; Dialog mit Karrierementor |
+| 2 | Aktivierer fuer berufliches Erfolgserleben | Dokumentiert Arbeitsergebnisse, extrahiert Wert, visualisiert Erfolge; sammelt positives Feedback von Kollegen/Kunden |
+| 3 | Assistent fuer Workplace-Social-Atmosphaere | Empfiehlt berufliche Gespraechsthemen, Networking-Techniken, Branchenveranstaltungen; optimiert LinkedIn-Inhalte |
+| 4 | Inspirationsgeber fuer Nebenprojekte | Matching von Faehigkeiten, Interessen und Marktnachfrage, Nebenprojekt-Fallbibliothek, Startguide; Side-Project-Community |
+| 5 | Confidence-Booster vor Vorstellungsgespraechen | Simulierte Interviews, Vorbereitung haeufiger Fragen, Techniken zur Staerkung von Selbstvertrauen; Image-Tipps |
+
+---
+
+## 14. Wohnraum
+
+> 💡 **Kernkonzept**：Zuhause ist nicht nur ein Wohnort, sondern ein Zufluchtsort der Seele
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Atmosphaeren-Designer fuer Wohnraeume | Analysiert Raumfotos, empfiehlt Stile, Moebel und Dekoration; AR-Vorschau des Effekts |
+| 2 | Guide fuer saisonale Wohnraumveraenderung | Empfiehlt saisonale Themen, Aufbewahrungs- und Praesentationsideen, Festtagsdeko; erstellt Einkaufsliste |
+| 3 | Magie fuer kleine Wohnungen | Raumoptimierungsalgorithmus, Empfehlungen fuer Multifunktionsmoebel, Aufbewahrungstipps; visuelle Raumvergroesserung |
+| 4 | Gestalter von Wohnritualen | Designt Alltagsrituale (Morgen/Abend/Wochenende), erinnert an Ausfuehrung; Feedback zur Ritualwirkung |
+| 5 | Psychologische Begleitung beim Ausmisten | Bewertet emotionalen Wert von Gegenstaenden, fuehrt durch Ausmist-Schritte, psychologische Unterstuetzung; Spenden-/Recyclingkanaele |
+
+---
+
+## 15. Kulinarik
+
+> 💡 **Kernkonzept**：Essen ist die Sprache der Liebe, Kochen ist eine Art der Liebeserforschung
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Heilende Solo-Mahlzeiten | Erkennt Kuehlschrankzutaten, empfiehlt einfache Rezepte, Step-by-step-Anleitung; Aesthetik fuer Solo-Plating |
+| 2 | Atmosphaerendesign fuer Festtafeln | Festtagsmenues, Tischdeko-Plaene, Atmosphaeren-Tipps; Optimierung der Gaesteerfahrung |
+| 3 | Koch-Stimmungs-Matcher | Algorithmus fuer Stimmung-Essen-Zusammenhaenge, Rezepte zur Emotionsregulation, Comfort-Food-Empfehlungen; Kochtherapie-Anleitung |
+| 4 | Vertrauensaufbau fuer Kochanfaenger | Supereinfache Rezepte, Rettungstipps bei Fehlern, Formulierungen fuer Selbstvertrauen; schrittweise Steigerung der Schwierigkeit |
+| 5 | Atmosphaeren-Guide fuer Food-Fotografie | Plating-Tipps, Nutzung von Naturlicht, Aufnahmewinkel; Filter- und Nachbearbeitungstipps |
+
+---
+
+## 16. Mode und Stil
+
+> 💡 **Kernkonzept**：Mode ist Selbstdarstellung, Stil ist der sichtbare Ausdruck des Inneren
+
+| Nr. | Szenario-Name | Szenario-Funktion |
+| :--: | ------------ | ------------ |
+| 1 | Outfit-Moodboard des Tages | Kombinierte Empfehlungen nach Wetter/Anlass/Stimmung, virtuelle Anprobe, Styling-Inspiration; Kleiderschrankverwaltung |
+| 2 | Capsule-Wardrobe-Stylist | Kleiderschrank-Inventar, Kombinationssets fuer Einzelteile, One-piece-multiple-looks; Einkaufstipps zum Schliessen von Luecken |
+| 3 | Reise zur Entdeckung des persoenlichen Stils | Stiltest, Referenz-Icon-Empfehlungen, Pfad der Stilentwicklung; Aufbau von Selbstvertrauen |
+| 4 | Kreativer fuer neue Looks aus alter Kleidung | Upcycling-Inspiration, neue Kombinationsweisen, Akzentuierung mit Accessoires; nachhaltige Modephilosophie |
+| 5 | Stylingberater fuer besondere Anlaesse | Deutet Dresscodes, generiert Stylingplaene, Make-up- und Frisurvorschlaege; stimmige Gesamtkoordination |
+
+---
+
+## Kernprinzipien fuer C-End-Produktdesign
+
+### 1. Von "Funktion" zu "Gefuehl"
+
+B-End-Produkte fragen: "Welches Problem loest diese Funktion?" C-End-Produkte fragen: "Welches Gefuehl erzeugt diese Funktion?"
+
+| B-End-Denken | C-End-Denken |
+|---------|---------|
+| Effizienz steigern | Zeit fuer die Dinge sparen, die man liebt |
+| Kosten senken | Jeden Cent wertvoll ausgeben |
+| Schmerzpunkte loesen | Schoene Erlebnisse schaffen |
+| Vollstaendige Funktionalitaet | Stimmung passt |
+
+### 2. Drei Ebenen der Atmosphaere-Gestaltung
+
+**Sinnesebene**: Gestaltung von Sehen, Hoeren und Fuehlen
+- Waerme Farben
+- Beruhigende Geraeusche
+- Fliessende Animationen
+
+**Emotionale Ebene**: Resonanz und Fuehrung von Emotionen
+- Die Stimmung des Nutzers verstehen
+- Emotionale Unterstuetzung bieten
+- Positive Emotionen erzeugen
+
+**Bedeutungsebene**: Anerkennung von Wert und Zugehoerigkeit
+- Nutzer fuehlen sich verstanden
+- Zugehoerigkeitsgefuehl schaffen
+- Handlungen Sinn verleihen
+
+### 3. Die Kraft psychologischer Suggestion
+
+C-End-Produkte vermitteln durch Text und Design psychologische Suggestionen:
+
+- **Positive Suggestion**: "Du machst das schon gut", "Geh langsam vor, das ist in Ordnung"
+- **Zugehoerigkeits-Suggestion**: "Viele Menschen fuehlen wie du", "Du bist nicht allein"
+- **Wachstums-Suggestion**: "Jeder Versuch ist Fortschritt", "Du wirst besser"
+
+### 4. Nutzer zu einer besseren Version ihrer selbst machen
+
+Die besten C-End-Produkte aendern Nutzer nicht, sondern helfen ihnen, die Person zu werden, die sie sein moechten.
+
+- Nicht "du solltest...", sondern "du kannst..."
+- Nicht "du musst...", sondern "wenn du moechtest..."
+- Nicht "du bist noch nicht genug...", sondern "du hast bereits..."
+
+---
+
+> 🌟 **Merke**: C-End-Nutzer kaufen keine Funktionen, sondern Gefuehle; keine Werkzeuge, sondern Begleitung; keine Services, sondern Verstaendnis.
diff --git a/docs/de-de/stage-1/appendix-consumer-scenarios/index.md b/docs/de-de/stage-1/appendix-consumer-scenarios/index.md
new file mode 100644
index 0000000..2c85315
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-consumer-scenarios/index.md
@@ -0,0 +1,232 @@
+---
+title: 'C-End Szenarien - Inspirationsreferenz'
+description: 'Ideenpool fuer LLM-Anwendungen im Konsumentenbereich: Lifestyle, Emotion, Unterhaltung, Wachstum und mehr. Fokus: Gefuehl, Atmosphaere und geringe Friktion.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'ca. <strong>4 Stunden</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// Themenpool pro Kategorie: Fokus auf Gefuehl, Atmosphaere, psychologische Suggestion.
+const topicPool = {
+  lifestyle: [
+    { title: 'Morgenritual-Aktivierer', desc: 'Erstellt persoenliche Morgenrituale basierend auf Wetter, Terminen und Stimmung' },
+    { title: 'Wohlfuehl-Atmosphaere fuer Single-Haushalte', desc: 'Gestaltet Wohlfuehl-Ambiente mit Licht, Musik und Duft-Kombinationen' }
+  ],
+  emotion: [
+    { title: 'Nachtlicher Zuhoerer', desc: '24/7 verfuegbarer emotionaler Zuhoerer ohne Wertung' },
+    { title: 'Angstbewaeltigungs-Atemtrainer', desc: 'Fuehrt durch Atemuebungen und Achtsamkeit, wenn Stress hoch ist' }
+  ],
+  entertainment: [
+    { title: 'Immersives Mystery-Adventure', desc: 'Interaktives Story-Spiel, das sich an Entscheidungen erinnert' },
+    { title: 'Personalisierter Podcast-Generator', desc: 'Erstellt kurze Audio-Snacks aus deinen Themen und Quellen' }
+  ],
+  growth: [
+    { title: 'Gamifizierter Gewohnheits-Coach', desc: 'Verwandelt Gewohnheiten in ein motivierendes Quest-System' },
+    { title: 'Persoenlicher Lern-Sparringspartner', desc: 'Hilft beim Lernen, fragt ab und baut einen Plan aus deinem Ziel' }
+  ],
+  social: [
+    { title: 'Eisbrecher-Thema-Generator', desc: 'Gibt passende Themen fuer Dates, Dinner oder Team-Events' },
+    { title: 'Social-Media-Copywriter', desc: 'Formuliert Posts im passenden Ton aus Foto + Kontext' }
+  ],
+  travel: [
+    { title: 'City-Walk-Entdeckerfuehrer', desc: 'Walks wie ein Local: Routen, Spots, Timing, kleine Geschichten' },
+    { title: 'Reise-Tagebuch-Generator', desc: 'Macht aus Notizen/Fotos einen schoen strukturierten Reisebericht' }
+  ],
+  health: [
+    { title: 'Schlafqualitaet-Optimierer', desc: 'Baut eine Schlafroutine aus Licht, Sound, Atem und Gewohnheiten' },
+    { title: 'Gesunde-Kueche-Inspiration', desc: 'Rezepte nach Stimmung, Zeit, Zutaten und Ziel (z.B. leicht/satt)' }
+  ]
+}
+
+// Vordefinierte Empfehlungspfade (VibePoint + Feeling -> Kategorien).
+const recommendationMap = [
+  { vibe: 'healing', feeling: 'calm', picks: ['emotion', 'health', 'lifestyle'] },
+  { vibe: 'growth', feeling: 'focused', picks: ['growth', 'learning', 'lifestyle'] },
+  { vibe: 'social', feeling: 'connected', picks: ['social', 'entertainment', 'lifestyle'] },
+  { vibe: 'explore', feeling: 'curious', picks: ['travel', 'entertainment', 'learning'] },
+  { vibe: 'daily', feeling: 'light', picks: ['lifestyle', 'health', 'social'] }
+]
+
+const categories = [
+  { key: 'lifestyle', name: 'Lebensstil', anchor: '#_1-lebensstil' },
+  { key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_2-emotion' },
+  { key: 'entertainment', name: 'Unterhaltung', anchor: '#_3-unterhaltung' },
+  { key: 'growth', name: 'Persoenliches Wachstum', anchor: '#_4-wachstum' },
+  { key: 'social', name: 'Soziale Interaktion', anchor: '#_5-sozial' },
+  { key: 'travel', name: 'Reiseerfahrung', anchor: '#_6-reise' },
+  { key: 'health', name: 'Gesundheit', anchor: '#_7-gesundheit' }
+]
+
+function pickTopics(keys) {
+  const results = []
+  for (const key of keys) {
+    const pool = topicPool[key] || []
+    if (pool.length === 0) continue
+    // 1-2 zufaellige Themen je Kategorie.
+    const count = Math.min(pool.length, Math.random() > 0.6 ? 2 : 1)
+    const shuffled = [...pool].sort(() => Math.random() - 0.5)
+    results.push(...shuffled.slice(0, count).map((t) => ({ ...t, category: key })))
+  }
+  return results.slice(0, 8)
+}
+
+const recommended = computed(() => {
+  const v = vibePoint.value.trim()
+  const f = feeling.value.trim()
+  const match =
+    recommendationMap.find((x) => x.vibe === v && x.feeling === f) ||
+    recommendationMap.find((x) => x.vibe === v) ||
+    recommendationMap.find((x) => x.feeling === f)
+  const picks = match?.picks?.filter((k) => k in topicPool) || ['lifestyle', 'emotion', 'growth']
+  return pickTopics(picks)
+})
+
+function scrollToAnchor(anchor) {
+  if (!anchor) return
+  const id = anchor.replace(/^#/, '')
+  const el = document.getElementById(id)
+  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+</script>
+
+# C-End Szenarien - Inspirationsreferenz
+
+<ChapterIntroduction :duration="duration" :tags="['C-End', 'Szenarien', 'Inspiration', 'Atmosphaere']" coreOutput="Eine priorisierte Ideenliste" expectedOutput="3-5 lohnende Startpunkte">
+
+Dieses Dokument ist eine Inspirationssammlung fuer Konsumenten-Apps. Der Fokus liegt nicht nur auf "Funktionen", sondern auf <strong>Gefuehl</strong> und <strong>Atmosphaere</strong>: Warum wuerde jemand wiederkommen? Welche Emotion wird gestaerkt? Welche Friktion wird entfernt?
+
+</ChapterIntroduction>
+
+## Schnell-Generator (optional)
+
+Waehle einen Vibe und ein Feeling. Du bekommst ein paar zufaellige Ideen zum Start.
+
+<div class="vp-doc" style="display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: end;">
+  <div>
+    <label style="display: block; font-weight: 600; margin-bottom: 6px;">VibePoint</label>
+    <select v-model="vibePoint" style="width: 100%; padding: 8px;">
+      <option value="">(frei)</option>
+      <option value="healing">healing</option>
+      <option value="growth">growth</option>
+      <option value="social">social</option>
+      <option value="explore">explore</option>
+      <option value="daily">daily</option>
+    </select>
+  </div>
+  <div>
+    <label style="display: block; font-weight: 600; margin-bottom: 6px;">Feeling</label>
+    <select v-model="feeling" style="width: 100%; padding: 8px;">
+      <option value="">(frei)</option>
+      <option value="calm">calm</option>
+      <option value="focused">focused</option>
+      <option value="connected">connected</option>
+      <option value="curious">curious</option>
+      <option value="light">light</option>
+    </select>
+  </div>
+</div>
+
+<div style="margin-top: 12px;">
+  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+    <button v-for="c in categories" :key="c.key" class="VPButton medium" type="button" @click="scrollToAnchor(c.anchor)">
+      {{ c.name }}
+    </button>
+  </div>
+</div>
+
+<div v-if="recommended.length" style="margin-top: 16px;">
+  <h3>Empfehlungen</h3>
+  <ul>
+    <li v-for="(t, idx) in recommended" :key="idx">
+      <strong>{{ t.title }}</strong>: {{ t.desc }}
+    </li>
+  </ul>
+</div>
+
+---
+
+## 1. Lebensstil
+
+### 1.1 Morgenritual-Aktivierer
+
+Ein kleiner Begleiter, der morgens aus Wetter, Kalender und Stimmung eine Mini-Routine baut (5-10 Minuten) und den Start in den Tag leichter macht.
+
+### 1.2 Wohlfuehl-Atmosphaere fuer Single-Haushalte
+
+Licht, Musik, Duft, kurze Impulse. Ziel ist ein spuerbar "waermeres" Zuhause ohne viel Aufwand.
+
+## 2. Emotion
+
+### 2.1 Nachtlicher Zuhoerer
+
+Ein sicherer Raum fuer Gedanken. Keine Bewertung, klare Grenzen, Fokus auf Empathie und Reflexion.
+
+### 2.2 Angstbewaeltigungs-Atemtrainer
+
+Wenn Stress hoch ist: Atem, Grounding, kurze Uebungen. Einfach, schnell, wiederholbar.
+
+## 3. Unterhaltung
+
+### 3.1 Immersives Mystery-Adventure
+
+Eine Story, die sich an Entscheidungen erinnert, Charaktere mit Kontinuitaet, kurze Sessions.
+
+### 3.2 Personalisierter Podcast-Generator
+
+Taeglicher 5-Minuten-Clip aus deinem Themenmix: Zusammenfassung, Einordnung, naechste Schritte.
+
+## 4. Wachstum
+
+### 4.1 Gamifizierter Gewohnheits-Coach
+
+Quest-System statt ToDo-Liste. Kleine Belohnungen, klare Progression, weniger Schuldgefuehl.
+
+### 4.2 Lern-Sparringspartner
+
+Stellt Fragen, baut einen Plan, trackt Fortschritt. Fokus auf "dranbleiben".
+
+## 5. Sozial
+
+### 5.1 Eisbrecher-Thema-Generator
+
+Passende Themen fuer Situationen (Date, Team-Dinner, Networking) plus kurze Follow-ups.
+
+### 5.2 Social-Media-Copywriter
+
+Aus Foto + Kontext -> 3 Textvarianten in unterschiedlichem Ton (locker, sachlich, poetisch).
+
+## 6. Reise
+
+### 6.1 City-Walk-Entdeckerfuehrer
+
+Routen mit Timing (Sonne/Andrang), kleine Geschichten und "warum genau hier".
+
+### 6.2 Reise-Tagebuch-Generator
+
+Aus Notizen/Fotos -> ein sauberer Bericht, inklusive Highlights und Learnings.
+
+## 7. Gesundheit
+
+### 7.1 Schlafqualitaet-Optimierer
+
+Routine, Umgebung, kleine Schritte. Fokus: weniger Friktion, mehr Kontinuitaet.
+
+### 7.2 Gesunde-Kueche-Inspiration
+
+Rezepte nach Zeit, Zutaten und Ziel. Einfach starten, nicht ueberfordern.
+
+---
+
+## Notizen zum Produktdenken fuer C-End
+
+1. Nutzer kaufen selten "Funktionen". Sie kaufen Gefuehl: Sicherheit, Ruhe, Zugehoerigkeit, Neugier, Kontrolle.
+2. Gute C-End Produkte sind leicht, ritualisierbar und liefern schnell einen kleinen Nutzen.
+3. Copy und UI transportieren Suggestion: "Du bist nicht allein", "Das ist machbar", "Du machst Fortschritt".
+
+<RelatedArticlesSection />
+
diff --git a/docs/de-de/stage-1/appendix-double-diamond/index.md b/docs/de-de/stage-1/appendix-double-diamond/index.md
new file mode 100644
index 0000000..67d931f
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-double-diamond/index.md
@@ -0,0 +1,544 @@
+---
+title: 'Double-Diamond-Modell: Erst das Richtige tun, dann die Dinge richtig tun'
+description: 'Ein Einf&uuml;hrungsartikel zum Double-Diamond-Modell f&uuml;r Einsteiger. Verstehen Sie die vier Phasen Discover, Define, Develop und Deliver und vermeiden Sie es, voreilig Prototypen zu erstellen, bevor das Problem klar ist.'
+---
+
+<script setup>
+const duration = 'Etwa <strong>1,5 Stunden</strong>'
+</script>
+
+# Double-Diamond-Modell: Erst das Richtige tun, dann die Dinge richtig tun
+
+<a id="top-dd"></a>
+
+## Kapitel&uuml;bersicht
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Double Diamond', 'Design Thinking', 'Anforderungsanalyse', 'L&ouml;sungsdesign']"
+  coreOutput="1 klarere Problemdefinition und 1 geeigneterer Validierungsansatz"
+  expectedOutput="Nicht mehr sofort Prototypen zeichnen, sondern erst das Problem durchdenken und dann L&ouml;sungen vergleichen"
+>
+
+Viele Menschen, die zum ersten Mal ein Produkt entwickeln, fallen nicht in die Falle "nicht hart genug gearbeitet", sondern in die, zu schnell in die L&ouml;sung einzusteigen.
+
+Sobald eine Richtung im Kopf auftaucht, beginnen sie dar&uuml;ber nachzudenken, wie die Seiten aussehen sollen, wo die Buttons hingeh&ouml;ren, ob sie AI integrieren sollten, ob sie eine Login-Registrierung brauchen und welches Tool f&uuml;r den Prototyp geeignet ist. Nach all der Arbeit stellen sie fest, dass die grundlegendste Frage &uuml;berhaupt nicht gekl&auml;rt ist: Hat der Nutzer wirklich dieses Problem? Lohnt es sich, dieses Problem jetzt zu l&ouml;sen? Sie dachten, sie w&uuml;rden das Projekt vorantreiben, aber eigentlich beschleunigen sie nur in die falsche Richtung.
+
+Das Double-Diamond-Modell wurde genau entwickelt, um diese Situation zu vermeiden.
+
+Seine wertvollste Erinnerung ist: **"Die richtigen Dinge tun" und "die Dinge richtig tun" sind zwei v&ouml;llig verschiedene Phasen.** Wenn Sie noch nicht einmal das Problem verstanden haben und schon eilig einen Prototypen erstellen, machen Sie meist nur die falsche Richtung vollst&auml;ndiger.
+
+</ChapterIntroduction>
+
+::: info Minimales SOP
+**Ziel**: Nach dem Lesen wissen Sie besser, wann Sie zuerst &uuml;ber das Problem nachdenken sollten und wann es an der Zeit ist, L&ouml;sungen und Prototypen zu entwerfen. So vermeiden Sie es, von Anfang an sehr flei&szlig;ig in die falsche Richtung zu arbeiten.
+
+**Aktionspunkte**: Gehen Sie nacheinander die vier Schritte `Discover &rarr; Define &rarr; Develop &rarr; Deliver` durch und tun Sie in jedem Schritt nur das, was in dieser Phase ansteht.
+
+**Ergebnis**: Sie erhalten eine klarere Problemdefinition, mehrere vergleichbare L&ouml;sungen und eine &uuml;berpr&uuml;fbare minimale Version.
+
+**Stichwortspr&uuml;nge**: [Was ist das Double-Diamond-Modell](#dd-what) &middot; [Erste Diamant](#dd-first) &middot; [Wie AI Ihnen hilft](#dd-ai)
+:::
+
+## Was Sie lernen werden
+
+1. Was das Double-Diamond-Modell ist und warum es sich f&uuml;r Einsteiger in der Produktentwicklung eignet
+2. Was die vier Phasen Discover, Define, Develop und Deliver jeweils bewirken
+3. Wie man unterscheidet: "Soll ich weiter divergieren?" oder "Soll ich jetzt konvergieren?"
+4. Wie man das Double-Diamond-Modell bei AI-Produkten, Prototyp-Design und Anforderungsvalidierung einsetzt
+
+<a id="dd-what"></a>
+## [1. Was ist das Double-Diamond-Modell &uuml;berhaupt?](#top-dd)
+
+Das Double-Diamond-Modell ist ein klassischer Designprozess-Rahmen, der vom britischen **Design Council** popularisiert wurde. Es stellt einen vollst&auml;ndigen Design- und Innovationsprozess als zwei aufeinanderfolgende Diamanten dar.
+
+Warum "Diamanten"? Weil jeder Diamant zwei entgegengesetzte, aber gleicherma&szlig;en wichtige Aktionen enth&auml;lt:
+
+- **Divergieren**: Zun&auml;chst den Horizont erweitern und mehr M&ouml;glichkeiten betrachten
+- **Konvergieren**: Dann den Bereich verengen, Entscheidungen treffen und Priorit&auml;ten setzen
+
+Der gesamte Prozess besteht aus vier Schritten:
+
+1. **Discover**: Nutzer, Probleme, Umfeld und Markt umfassend verstehen
+2. **Define**: Aus den vielen Informationen das wirklich l&ouml;swerte Kernproblem herausfiltern
+3. **Develop**: Mehrere L&ouml;sungsans&auml;tze um das Kernproblem divergieren
+4. **Deliver**: Ausw&auml;hlen, Prototypen erstellen, testen und die geeignetste L&ouml;sung liefern
+
+Wenn man diese vier Schritte auf einen einpr&auml;gsamen Satz komprimiert:
+
+- **Erster Diamant**: Zun&auml;chst kl&auml;ren, welches Problem &uuml;berhaupt gel&ouml;st werden soll
+- **Zweiter Diamant**: Dann entscheiden, mit welchem Ansatz es gel&ouml;st werden soll
+
+Das l&auml;sst sich auch so ausdr&uuml;cken:
+
+- **Erster Diamant: Die richtigen Dinge tun**
+- **Zweiter Diamant: Die Dinge richtig tun**
+
+## 2. Warum das Double-Diamond-Modell besonders f&uuml;r Einsteiger geeignet ist
+
+Der typische Rhythmus von Einsteigern bei der Produktentwicklung sieht oft so aus:
+
+- Eine Idee kommt auf
+- Man findet die Richtung toll
+- Sofort Prototypen zeichnen
+- Beim Erstellen werden es immer mehr Funktionen
+- Am Ende wei&szlig; man nicht mehr, welches Problem man eigentlich l&ouml;st
+
+Der Wert des Double-Diamond-Modells liegt nicht darin, den Prozess komplizierter zu machen, sondern darin, **"das Problem verstehen" und "die L&ouml;sung entwerfen" voneinander zu trennen**.
+
+Das klingt banal, ist aber in der Praxis &auml;u&szlig;erst wichtig. Denn viele gescheiterte Produkte scheitern nicht an mangelndem Engagement, sondern daran, dass:
+
+- Das falsche Problem gew&auml;hlt wurde
+- Die Nutzer missverstanden wurden
+- Zu fr&uuml;h eine L&ouml;sung festgelegt wurde
+- Viel Zeit in Detailveredelung investiert wurde, ohne die Richtung zu validieren
+
+Das Double-Diamond-Modell erinnert Sie st&auml;ndig daran:
+
+- Nicht davon ausgehen, dass das Problem bereits gekl&auml;rt ist, nur weil die Idee naheliegt
+- Nicht davon ausgehen, dass die L&ouml;sung es wert ist, umgesetzt zu werden, nur weil sie machbar ist
+- Nicht davon ausgehen, dass die Nutzer sie wirklich brauchen, nur weil der Prototyp komplett aussieht
+
+<a id="dd-first"></a>
+## [3. Erster Diamant: Die richtigen Dinge tun](#top-dd)
+
+Der erste Diamant konzentriert sich auf **das Problem selbst**, nicht auf die L&ouml;sung.
+
+Man kann ihn in einem Satz zusammenfassen: **Nicht sofort loslegen, sondern zuerst kl&auml;ren, ob es sich &uuml;berhaupt lohnt.**
+
+### 3.1 Discover: Zun&auml;chst den Problemraum &ouml;ffnen
+
+Die Kernaufgabe der Discover-Phase ist **umfassende Recherche, keine schnellen Schl&uuml;sse**.
+
+Typische T&auml;tigkeiten in diesem Schritt:
+
+- Beobachten, wie Nutzer in echten Szenarien agieren
+- Potenzielle Nutzer interviewen und herausfinden, wann sie zuletzt ein Problem hatten
+- Beobachten, wie sie sich aktuell behelfen
+- Wettbewerbs- und Alternativl&ouml;sungen analysieren
+- Markt-, Prozess-, Restriktions- und Wertsch&ouml;pfungsinformationen sammeln
+
+Viele glauben, Discover bedeute einfach "mehr Material lesen". Wichtiger ist jedoch: **Sie m&uuml;ssen Menschen und Szenarien verstehen, nicht nur Informationen sammeln.**
+
+Wenn Sie beispielsweise ein Tool entwickeln m&ouml;chten, das "AI beim Erstellen von Meeting-Protokollen hilft", sollten Sie in der Discover-Phase vor allem Folgendes kl&auml;ren:
+
+- Was Nutzer nach Meetings am meisten belastet
+- Ist das Aufzeichnen das Problem, das Zusammenfassen oder das Weiterleiten
+- Schreiben sie selbst, lassen sie Praktikanten schreiben, h&ouml;ren sie Aufnahmen ab oder verzichten sie ganz auf Protokolle
+- Welche Meeting-Szenarien Protokolle am meisten ben&ouml;tigen und welche &uuml;berhaupt nicht
+
+Das wichtigste Ziel dieses Schritts ist nicht, eine Antwort zu finden, sondern **nicht zu fr&uuml;h zu glauben, man h&auml;tte bereits die Antwort.**
+
+### 3.2 Define: Aus den Informationen das Kernproblem destillieren
+
+Wenn Discover das &Ouml;ffnen des Horizonts ist, ist Define das Einengen.
+
+In der Define-Phase geht es nicht darum, alle Beobachtungen zu behalten, sondern zu fragen:
+
+- Welches Problem ist wirklich am wichtigsten und sollte zuerst gel&ouml;st werden
+- Welches Problem am h&auml;ufigsten auftritt, am schmerzhaftesten ist und den gr&ouml;&szlig;ten Wert bietet
+- Auf welches Szenario wir uns in der ersten Version konzentrieren sollten
+
+Der Kern dieses Schritts besteht darin, ein breites Thema auf eine klare Problemdefinition zu verdichten.
+
+Vielleicht sagen Sie zun&auml;chst:
+
+> Ich m&ouml;chte ein AI-Tool entwickeln, das die Meeting-Effizienz steigert.
+
+In der Define-Phase k&ouml;nnte eine bessere Formulierung lauten:
+
+> Wir l&ouml;sen zun&auml;chst das Problem, dass Projektteams nach 30 bis 60 Minuten dauernden Kooperationsmeetings nicht in der Lage sind, innerhalb von 10 Minuten ein Protokoll mit Aufgaben, Verantwortlichen und Fristen zu erstellen.
+
+Jetzt wird das Problem konkreter:
+
+- Wer sind die Nutzer
+- Was ist das Szenario
+- Wo liegt der Engpass
+- Was ist das Erfolgskriterium
+
+Das Wesen von Define ist: **Von "es gibt viele Probleme" konvergieren zu "welches Problem l&ouml;sen wir diesmal zuerst".**
+
+## 4. Zweiter Diamant: Die Dinge richtig tun
+
+Erst wenn der erste Diamant abgeschlossen ist, sollten Sie in den zweiten Diamanten eintreten. Denn jetzt l&ouml;sen Sie keine vage Richtung mehr, sondern ein konkretes, bereits eingegrenztes Problem.
+
+### 4.1 Develop: L&ouml;sungsans&auml;tze um das Kernproblem divergieren
+
+Der Fokus der Develop-Phase liegt auf **der Exploration mehrerer m&ouml;glicher L&ouml;sungen f&uuml;r dasselbe Problem**.
+
+Beachten Sie: Diese Divergenz unterscheidet sich von der Discover-Phase.
+
+- Die Divergenz in Discover erforscht den Problemraum
+- Die Divergenz in Develop erforscht den L&ouml;sungsraum
+
+Beim Meeting-Protokoll-Beispiel k&ouml;nnten Sie in der Develop-Phase Folgendes in Betracht ziehen:
+
+- Web-Tool oder Meeting-Plugin
+- Hochgeladene Audioaufzeichnung nachtr&auml;glich verarbeiten oder Echtzeit-Mitschrift
+- Nur Zusammenfassung oder Fokus auf Aufgabenextraktion
+- Pers&ouml;nliche Effizienz oder Team-Synchronisation betonen
+- Freie Bearbeitung f&uuml;r Nutzer oder direkte strukturierte Vorlage ausgeben
+
+Dieser Schritt eignet sich gut f&uuml;r Brainstorming und die Zusammenarbeit im Team.
+
+Aber es gibt eine Voraussetzung: **Alle L&ouml;sungen m&uuml;ssen demselben definierten Problem dienen.**
+Wenn das Problem nicht klar definiert ist, wird Develop schnell wieder zu einem ungeordneten Sammelsurium von Funktionen.
+
+### 4.2 Deliver: L&ouml;sung ausw&auml;hlen, Prototyp erstellen, testen und liefern
+
+Deliver ist die Konvergenzphase im zweiten Diamanten.
+
+Jetzt geht es nicht mehr darum, weiter nachzudenken, sondern zu entscheiden:
+
+- Welcher Ansatz passt am besten zur aktuellen Phase
+- Welche Version am kleinsten, aber am n&uuml;tzlichsten ist
+- Welche Funktionen zuerst entwickelt werden m&uuml;ssen und welche sp&auml;ter kommen k&ouml;nnen
+- Wie man Prototypen erstellt, testet und in kleinem Rahmen validiert
+
+Viele glauben, Deliver bedeute einfach "launch". Genauer gesagt bedeutet es: **Eine L&ouml;sung in etwas &Uuml;berpr&uuml;fbares, Validierbares und Iterierbares verwandeln.**
+
+Das kann sein:
+
+- Ein Low-Fidelity-Flussdiagramm
+- Ein Figma-Prototyp
+- Ein lauff&auml;higer MVP
+- Ein kleiner Nutzer-Test
+- Eine iterative Version nach echtem Feedback
+
+Der Fokus von Deliver liegt nicht auf "perfekter Auslieferung", sondern darauf, **die L&ouml;sung so schnell wie m&ouml;glich in einer realen Umgebung zu validieren.**
+
+## 5. Eine einpr&auml;gsame &Uuml;bersichtstabelle
+
+Wenn Sie die vier Phasen immer wieder durcheinanderbringen, merken Sie sich einfach diese Version:
+
+| Phase | Was Sie tun | Schl&uuml;sselw&ouml;rter | Typische Ergebnisse |
+| --- | --- | --- | --- |
+| Discover | Problem verstehen | Recherche, Beobachtung, Interviews, Informationssammlung | Nutzererkenntnisse, Szenarienotizen, Problemliste |
+| Define | Problem definieren | Destillieren, Fokussieren, Priorisieren, Problem umformulieren | Problemdefinition, Priorit&auml;ten, MVP-Ansatz |
+| Develop | L&ouml;sungen erkunden | Brainstorming, Vergleichen, Co-Kreation, Prototyp-Ideen | L&ouml;sungsliste, Flussskizzen, Prototyp-Richtung |
+| Deliver | L&ouml;sung validieren | Prototyp, Testen, Iterieren, Ausliefern | Prototyp, Test-Feedback, optimierte Version |
+
+Noch kompakter:
+
+- **Discover / Define**: "Die richtigen Dinge tun"
+- **Develop / Deliver**: "Die Dinge richtig tun"
+
+## 6. Die h&auml;ufigsten Missverst&auml;ndnisse zum Double-Diamond-Modell
+
+### 6.1 Direkt zu Deliver springen, ohne Discover
+
+Das ist der h&auml;ufigste Fehler. Viele beginnen sofort mit dem Zeichnen von Prototypen, dem Schreiben von PRDs, dem Anbinden von Modellen und dem Erstellen von Seiten, sobald sie eine Idee haben.
+
+Das Problem ist nicht, dass Sie nicht flei&szlig;ig genug arbeiten, sondern dass Sie m&ouml;glicherweise nicht einmal best&auml;tigt haben, ob sich das Problem &uuml;berhaupt zu l&ouml;sen lohnt.
+
+### 6.2 Lange Discover-Phase, aber nie Define
+
+Ein anderer Extremfall: st&auml;ndig recherchieren, Material lesen, Interviews f&uuml;hren, aber sich nicht trauen zu konvergieren.
+
+Das Double-Diamond-Modell soll Sie nicht endlos divergieren lassen, sondern erinnert Sie: Nach der Divergenz m&uuml;ssen Sie in die Entscheidungs- und Priorisierungsphase &uuml;bergehen.
+
+### 6.3 Nach Define das Problem heimlich &auml;ndern
+
+Viele Teams &auml;ndern in der Develop-Phase die Problemdefinition, weil ein bestimmter Ansatz einfacher umsetzbar ist.
+
+Das ist gef&auml;hrlich. Denn Sie l&ouml;sen m&ouml;glicherweise gar kein Problem, sondern suchen nur Rechtfertigungen f&uuml;r Ihren bevorzugten Ansatz.
+
+### 6.4 Deliver als "kompletter Launch" missverstehen
+
+Deliver bedeutet nicht, dass das fertige Produkt komplett sein muss. Oft ist ein testbarer Prototyp oder eine kleine Nutzererprobung bereits ein gutes Deliverable.
+
+## 7. Wie das Double-Diamond-Modell bei AI-Produkten eingesetzt wird
+
+AI-Produkte neigen besonders zur "F&auml;higkeiten zuerst"-Falle, weil die Modellf&auml;higkeiten so verlockend aussehen. Man m&ouml;chte direkt dar&uuml;ber nachdenken:
+
+- Soll ich multimodal integrieren
+- Soll ich einen Agenten erstellen
+- Soll ich einen Workflow hinzuf&uuml;gen
+- Soll ich Sprache, Bilder oder Websuche anbinden
+
+Das Double-Diamond-Modell zwingt Sie jedoch, zuerst zu fragen:
+
+- Wo genau h&auml;ngen die Nutzer fest
+- Muss dieses Problem zwingend mit AI gel&ouml;st werden
+- Wenn man keine AI verwendet, was genau ist am aktuellen Ansatz am schlechtesten
+- Wenn AI hinzugef&uuml;gt wird, was ist der zentrale Fortschritt
+
+Das hilft Ihnen, eine h&auml;ufige Situation zu vermeiden: **Starke F&auml;higkeiten, schwacher Wert.**
+
+Ein praktischer Ablauf:
+
+1. In der Discover-Phase beobachten, wie Nutzer Aufgaben aktuell erledigen
+2. In der Define-Phase das schmerzhafteste Szenario als klare Problemdefinition formulieren
+3. In der Develop-Phase vergleichen, welche AI-F&auml;higkeiten am besten zu diesem Problem passen
+4. In der Deliver-Phase eine Minimalversion erstellen und von echten Nutzern testen lassen
+
+## 8. Eine direkt anwendbare Double-Diamond-Vorlage
+
+Wenn Sie an Ihrem eigenen Produkt arbeiten, k&ouml;nnen Sie in dieser Reihenfolge vorgehen:
+
+### Discover
+
+- Wer sind die Nutzer, die ich beobachte?
+- Wann hatten sie zuletzt dieses Problem?
+- Wie l&ouml;sen sie es derzeit?
+- Was sie am meisten nervt, am langsamsten ist und sie am wenigsten beruhigt?
+
+### Define
+
+- Welches dieser Probleme ist am wertvollsten und sollte zuerst gel&ouml;st werden?
+- Welches Szenario ist am h&auml;ufigsten oder am kritischsten?
+- Wen und was bedienen wir in der ersten Version ausschlie&szlig;lich?
+- Wie &auml;ndert sich der Nutzerstatus, wenn das Problem erfolgreich gel&ouml;st ist?
+
+### Develop
+
+- Welche m&ouml;glichen L&ouml;sungen gibt es f&uuml;r dieses Problem?
+- Welche L&ouml;sungen sind am leichtesten, am schnellsten und am einfachsten zu validieren?
+- Was muss zwingend gemacht werden, was kann sp&auml;ter erfolgen?
+
+### Deliver
+
+- Was ist das Minimalste, das wir liefern k&ouml;nnen, um diese Richtung zu validieren?
+- Ist es ein Flussdiagramm, ein Prototyp oder ein MVP?
+- Wen m&uuml;ssen wir zum Testen einladen?
+- Wie entscheiden wir nach dem Test, ob wir weitermachen, &auml;ndern oder abbrechen?
+
+## 9. Ein Beispiel, das auch Einsteiger verstehen
+
+Angenommen, Sie m&ouml;chten ein AI-Tool entwickeln, "das Hochschulabsolventen bei der Vorbereitung von Lebensl&auml;ufen f&uuml;r Bewerbungen hilft".
+
+Viele w&uuml;rden sofort in den zweiten Diamanten springen und &uuml;ber Folgendes nachdenken:
+
+- Ein-Klick-Versch&ouml;nerung
+- Intelligentes Umschreiben
+- Automatisches JD-Matching
+- Generierung von Selbstvorstellungen
+
+Nach dem Double-Diamond-Modell w&auml;re ein besserer Prozess:
+
+### Erster Diamant
+
+**Discover**
+
+- Mit frischen Absolventen dar&uuml;ber sprechen, wann sie zuletzt einen Lebenslauf ge&auml;ndert haben
+- Beobachten, wie sie ihren alten Lebenslauf in eine neue Version umwandeln
+- Verstehen, ob sie am meisten von "nicht wissen, was sie schreiben sollen", "nicht wissen, wie sie &auml;ndern sollen" oder "nicht beurteilen k&ouml;nnen, ob es gut genug ist" betroffen sind
+
+**Define**
+
+- Zu einer spezifischeren Problemdefinition konvergieren:
+- Nicht "Studierende k&ouml;nnen keine Lebensl&auml;ufe erstellen"
+- Sondern "Studierende bei der ersten Bewerbung um ein Praktikum k&ouml;nnen ihre bisherigen Erfahrungen nicht in Formulierungen umwandeln, die zur Stellenbeschreibung passen, und verz&ouml;gern deshalb ihre Bewerbung"
+
+### Zweiter Diamant
+
+**Develop**
+
+- Mehrere L&ouml;sungsans&auml;tze erw&auml;gen: Vorlagenbibliothek, AI-Umschreibung, Stellenvergleich, Lebenslauf-Bewertung, Fallbeispiele
+
+**Deliver**
+
+- Erste Version nur: "Erfahrungs-Bullet-Points basierend auf der Stellenbeschreibung umschreiben"
+- 5 Studierenden zum Test geben und pr&uuml;fen, ob sie schneller die erste Version ihres Lebenslaufs einreichen
+
+Sie werden feststellen: Wenn der erste Diamant gr&uuml;ndlich bearbeitet wurde, wird der zweite viel klarer.
+
+## 10. Zusammenfassung
+
+Die gr&ouml;&szlig;te St&auml;rke des Double-Diamond-Modells liegt darin, ein Chaos in vier klarere Aktionen zu zerlegen:
+
+- Erst divergieren, um das Problem zu verstehen
+- Dann konvergieren, um das Problem zu definieren
+- Dann divergieren, um L&ouml;sungen zu erkunden
+- Schlie&szlig;lich konvergieren, um die L&ouml;sung zu liefern
+
+Es macht Sie nicht langsamer, sondern hilft Ihnen, **viele Umwege zu vermeiden, die besch&auml;ftigt aussehen, aber in die falsche Richtung f&uuml;hren.**
+
+Besonders in der AI-&Auml;ra, in der das Erstellen von Dingen immer schneller wird, ist das Double-Diamond-Modell sogar noch wichtiger. Denn wenn "etwas zu bauen" immer einfacher wird, wird die wirklich seltene F&auml;higkeit: **L&ouml;sen Sie ein Problem, das es wert ist, gel&ouml;st zu werden, und tun Sie es auf angemessene Weise.**
+
+Merken Sie sich nur diesen einen Satz:
+
+**Erst die richtigen Dinge tun, dann die Dinge richtig tun.**
+
+<a id="dd-ai"></a>
+## [11. Wie Sie AI nutzen k&ouml;nnen, um den Double-Diamond-Prozess zu durchlaufen](#top-dd)
+
+Das Double-Diamond-Modell ist kein AI-Tool, aber AI eignet sich hervorragend als "Beschleuniger" in den vier Phasen. Der Schl&uuml;ssel liegt nicht darin, AI f&uuml;r Sie entscheiden zu lassen, sondern darin, sie zu nutzen, um Ihren Horizont zu erweitern, Informationen zu ordnen, L&ouml;sungen zu vergleichen und Validierungsmaterial zu erstellen.
+
+### 11.1 In der Discover-Phase: AI f&uuml;r eine erste Informationsgrundlage nutzen
+
+Vor offiziellen Interviews und Recherche k&ouml;nnen Sie AI zun&auml;chst einen leichten Problemaufkl&auml;rungsscan durchf&uuml;hren lassen:
+
+- Welche g&auml;ngigen Alternativl&ouml;sungen gibt es auf dem Markt
+- Worauf Nutzer in &ouml;ffentlichen Communitys am h&auml;ufigsten klagen
+- In welchen Szenarien und bei welchen Zielgruppen dieses Problem auftritt
+- Was bestehende Produkte &uuml;bersehen
+
+Dieser Schritt kann echte Recherche nicht ersetzen, eignet sich aber gut, um schnell eine Problem-Landkarte zu erstellen.
+
+Ein einfacher Einsteiger-Prompt k&ouml;nnte lauten:
+
+```text
+Ich m&ouml;chte ein Tool entwickeln, das Studierenden beim Umschreiben von Lebensl&auml;ufen hilft.
+Bitte schlage nicht sofort Funktionen vor, sondern zeige zuerst, welche Schwierigkeiten in diesem Problem am h&auml;ufigsten auftreten.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+Erste Problem-Landkarte:
+
+1. Man wei&szlig; nicht, welche Erfahrungen man erw&auml;hnen sollte
+2. Man wei&szlig; nicht, wie man den Lebenslauf auf eine bestimmte Stelle anpasst
+3. Nach vielen &Uuml;berarbeitungen ist man sich immer noch nicht sicher, ob es gut genug ist
+4. Man braucht jemanden zum Gegenlesen, m&ouml;chte aber nicht st&auml;ndig um Gef&auml;lligkeiten bitten
+5. Wegen der Unsicherheit verschobt man den Lebenslauf immer wieder
+```
+
+Diese Ausgabe soll Ihnen nicht die Entscheidung abnehmen, sondern Ihnen den schnelleren Einstieg in Discover erm&ouml;glichen.
+
+### 11.2 In der Define-Phase: AI beim Konvergieren der Problemdefinition unterst&uuml;tzen
+
+Nachdem man viele Informationen gesammelt hat, ist das Schwierigste oft, das Problem in einen wirklich klaren Satz zu verdichten. Sie k&ouml;nnen Ihre Recherche-Notizen an AI &uuml;bergeben und sie bitten, daraus mehrere Problemdefinitionen zu komprimieren:
+
+```text
+Hier sind die Nutzer-Feedbacks und Recherche-Notizen, die ich in der Discover-Phase gesammelt habe:
+[Inhalt einf&uuml;gen]
+
+Bitte hilf mir bei drei Dingen:
+1. Die h&auml;ufigsten Problemmuster zusammenfassen
+2. Nach H&auml;ufigkeit, Schmerzintensit&auml;t und Validierbarkeit 3 priorisierte Probleme identifizieren
+3. Jedes Problem als konkrete Problemdefinition formulieren
+```
+
+So kommen Sie leichter in die Define-Phase, anstatt im Zustand "es gibt so viele Probleme" stecken zu bleiben.
+
+Sie k&ouml;nnen die Eingabe auch sehr einfach formulieren:
+
+```text
+Die Probleme, die ich bisher gesammelt habe:
+1. Man wei&szlig; nicht, was man im Lebenslauf schreiben soll
+2. Man wei&szlig; nicht, wie man ihn anpasst
+3. Man hat nie das Gef&uuml;hl, er sei gut genug, und traut sich nicht, ihn abzuschicken
+
+Bitte sage mir, welches Problem sich am besten f&uuml;r die erste Version eignet.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+Empfohlenes Priorit&auml;tsproblem:
+
+"Studierende bei ihrer ersten Praktikumsbewerbung sind sich nicht sicher, ob ihr Lebenslauf bereit zum Abschicken ist, &uuml;berarbeiten ihn endlos und verschoben die Bewerbung."
+
+Gr&uuml;nde:
+1. Dieses Problem ist konkreter
+2. Es erkl&auml;rt das Verschleppungsverhalten
+3. Es ist einfacher, eine kleine Version zur Validierung zu entwerfen
+```
+
+Diese Art von Ausgabe ist sehr n&uuml;tzlich, denn sie hilft, aus einer Vielzahl vager Probleme eine Definition herauszudestillieren, die als MVP-Startpunkt dienen kann.
+
+### 11.3 In der Develop-Phase: AI nutzen, um mehrere L&ouml;sungen zu divergieren
+
+Viele verharren nach der Problemdefinition auf dem ersten L&ouml;sungsansatz, der ihnen in den Sinn kommt. AI eignet sich hervorragend daf&uuml;r, Sie zur Divergenz zu zwingen:
+
+```text
+Ich habe ein Kernproblem definiert: [Ihre Problemdefinition]
+Bitte gib mir nicht sofort eine Endl&ouml;sung, sondern schlage aus folgenden Perspektiven jeweils 2-3 L&ouml;sungsrichtungen vor:
+1. Das leichtgewichtigste MVP
+2. Der am besten zur Bedarfsvalidierung geeignete Ansatz
+3. Der erfahrungssteigernde Ansatz
+4. Ein Ansatz ohne AI
+5. Ein Ansatz mit AI
+Vergleiche schlie&szlig;lich die Vorteile, Risiken und Validierungskosten jedes Ansatzes.
+```
+
+So werden Sie nicht zu fr&uuml;h auf einen einzigen Ansatz festgelegt.
+
+Ein einfacher Prompt k&ouml;nnte lauten:
+
+```text
+Meine aktuelle Problemdefinition lautet:
+"Studierende sind sich nicht sicher, ob ihr Lebenslauf abschickbereit ist, und verschoben ihn deshalb st&auml;ndig."
+
+Bitte schlage mir 4 verschiedene L&ouml;sungsans&auml;tze vor, nicht nur einen.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+Ansatz 1: Checkliste f&uuml;r abschickbereite Lebensl&auml;ufe
+Ansatz 2: Gezieltes Umschreiben basierend auf der Stellenbeschreibung
+Ansatz 3: Lebenslauf hochladen und Risikohinweise erhalten
+Ansatz 4: Hervorragende Beispiele zum Vergleich zeigen
+```
+
+Jetzt k&ouml;nnen Sie leichter "L&ouml;sungen vergleichen", anstatt von Anfang an nur auf AI-Umschreibung zu starren.
+
+### 11.4 In der Deliver-Phase: AI beim Generieren von Prototyp-Text und Testmaterial unterst&uuml;tzen
+
+Wenn Sie in die Deliver-Phase eintreten, ist AI hervorragend daf&uuml;r geeignet, folgende Aufgaben zu beschleunigen:
+
+- Seitentexte f&uuml;r Low-Fidelity-Prototypen generieren
+- Nutzer-Testskripte erstellen
+- Mehrere vergleichbare Versionen von &Uberschriften, Buttons und Beschreibungen erstellen
+- Feedback und Problemlisten nach Tests zusammenfassen
+
+Beispielsweise k&ouml;nnten Sie AI bitten, ein 20-min&uuml;tiges Nutzer-Testskript zu erstellen oder 5 Nutzer-Feedbacks in "weitermachen / Richtung &auml;ndern / pausieren" zu kategorisieren.
+
+Ein minimaler Prompt k&ouml;nnte lauten:
+
+```text
+Ich habe einen einfachen Prototyp erstellt:
+Der Nutzer l&auml;dt einen Lebenslauf hoch und das System zeigt an, welche Stellen noch nicht bewerbungstauglich sind.
+
+Bitte generiere ein 15-min&uuml;tiges Nutzer-Testskript.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+15-min&uuml;tiges Testskript:
+
+1. Bitte den Nutzer zun&auml;chst, seine letzte Lebenslauferfahrung zu beschreiben
+2. Den Nutzer den Lebenslauf selbstst&auml;ndig hochladen lassen
+3. Beobachten, ob er die Feedback-Ergebnisse versteht
+4. Fragen: Welche Hinweise waren am hilfreichsten, welche verwirrend
+5. Fragen: W&uuml;rden Sie das Tool vor der n&auml;chsten Bewerbung erneut nutzen
+```
+
+Diese Art von Ausgabe ist sehr praktisch, denn sie hilft, von "Ich habe den Prototyp fertig" zu "Wie teste ich als N&auml;chstes" zu gelangen.
+
+### 11.5 AI als "Phasen-W&auml;chter" einsetzen
+
+Das h&auml;ufigste Problem beim Double-Diamond-Modell ist, dass Menschen Phasen &uuml;berspringen. Sie k&ouml;nnen AI direkt als W&auml;chter fungieren lassen, der Sie erinnert, wo Sie sich gerade befinden:
+
+```text
+Bitte spiele die Rolle eines Produktprozess-Coachs.
+Hier ist mein aktueller Projektstatus: [Ihre Beschreibung]
+Bitte beurteile, ob ich mich eher in Discover, Define, Develop oder Deliver befinde.
+Und sage mir:
+1. Ob ich zu fr&uuml;h in die n&auml;chste Phase gesprungen bin
+2. Welche Aktion in der aktuellen Phase am wichtigsten nachzuholen ist
+3. Welche Dinge ich jetzt noch nicht tun sollte
+```
+
+Das ist besonders hilfreich f&uuml;r Einsteiger, da man leicht dazu neigt, "Prototypen zu zeichnen, bevor man das Problem durchdacht hat".
+
+## Assignments
+
+Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
+
+1. W&auml;hlen Sie eine Produktidee, an der Sie k&uuml;rzlich gedacht haben, und erstellen Sie einen Entwurf f&uuml;r die vier Schritte Discover, Define, Develop, Deliver
+2. In der Define-Phase: Zwingen Sie sich, das Problem auf einen konkreten Satz zu verdichten
+3. In der Develop-Phase: Listen Sie mindestens 3 verschiedene L&ouml;sungsans&auml;tze auf, anstatt nur den ersten Gedanken zu verfolgen
+4. In der Deliver-Phase: Beschreiben Sie eine minimale validierbare Version, die Sie innerhalb einer Woche liefern k&ouml;nnen
+
+## Weiterf&uuml;hrende Literatur
+
+Dieser Artikel bezieht sich haupts&auml;chlich auf die offiziellen Materialien des Design Council zum Double Diamond. Hier sind empfehlenswerte weiterf&uuml;hrende Quellen:
+
+- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
+- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
+- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
diff --git a/docs/de-de/stage-1/appendix-idea-sources/index.md b/docs/de-de/stage-1/appendix-idea-sources/index.md
new file mode 100644
index 0000000..1ca16c8
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-idea-sources/index.md
@@ -0,0 +1,301 @@
+---
+title: 'Woher Ideen finden: 3 beste Referenzquellen f&uuml;r Anf&auml;nger'
+description: 'Ein Ideen-Leitfaden f&uuml;r Einsteiger ohne Vorkenntnisse. Fokussiert auf Websites zum direkten St&ouml;bern, Trends, echte Gesch&auml;ftsquellen und VC-Listen, um schnell konkretere Richtungen zu finden.'
+---
+
+<script setup>
+const duration = 'Etwa <strong>1,5 Stunden</strong>'
+</script>
+
+# Woher Ideen finden: 3 beste Referenzquellen f&uuml;r Anf&auml;nger
+
+<a id="top-idea-sources"></a>
+
+## Kapitel&uuml;bersicht
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Ideen finden', 'Produktrichtung', 'Bedarfsentdeckung', 'Branchenbeobachtung']"
+  coreOutput="Eine konkretere, recherchew&uuml;rdige Produktrichtung"
+  expectedOutput="Wissen, wo man st&ouml;bbern sollte, worauf man achten muss und was man zuerst anschauen sollte -- nicht nur bei 'KI + irgendeine Branche' stehen bleiben"
+>
+
+Viele Menschen bleiben beim ersten Schritt stecken, nicht weil sie &uuml;berhaupt keine Inspiration haben, sondern weil sie nach dem St&ouml;bern vieler Inhalte nur noch Schlagworte im Kopf behalten:
+
+- AI for education
+- AI for healthcare
+- AI for finance
+- AI agent for business
+
+Das sind noch keine Ideen. Sie sagen nur "die Richtung ist gro&szlig;", aber nicht:
+
+- Wer nutzt es
+- In welchem Szenario
+- Wie aktuell behelfsm&auml;&szlig;ig gearbeitet wird
+- Welcher Schritt als Erstes sinnvoll ist
+
+Dieser Artikel verzichtet auf leere Methodik und stellt Ihnen direkt eine Reihe besser nutzbarer Quellen vor.
+
+</ChapterIntroduction>
+
+::: info Minimales SOP
+**Ziel**: Nach dem Lesen wissen Sie, wo Sie zuerst st&ouml;bern, wenn Ihnen nichts einf&auml;llt, welche Links sich f&uuml;r "konkrete Bedarfe" eignen, welche f&uuml;r Trends und welche f&uuml;r echte Gesch&auml;ftsszenarien.
+
+**Aktion**: Zun&auml;chst eine Ideenliste st&ouml;bern, dann profitable Kleinprodukte ansehen, dann Trends und gesch&auml;ftsn&auml;here Quellen pr&uuml;fen, am Ende 1 Richtung behalten, die Sie weiter recherchieren m&ouml;chten.
+
+**Ergebnis**: Sie erhalten 1 konkretere, validierungsw&uuml;rdige Richtung statt bei Schlagworten stehen zu bleiben.
+
+**Stichwortspr&uuml;nge**: [Referenz-App-Liste](#idea-apps) · [Trend-Quellen](#idea-trends) · [Gesch&auml;ftsn&auml;here Quellen](#idea-business) · [VC-/Accelerator-Quellen](#idea-vc) · [K&uuml;rzester Pfad](#idea-path) · [Wie KI hilft](#idea-ai)
+:::
+
+## Was Sie lernen werden
+
+1. Welche Websites sich zum direkten Ideen-St&ouml;bern eignen
+2. Welche Websites sich eignen, um bereits profitable Kleinprodukte zu entdecken
+3. Welche Quellen sich f&uuml;r Trends und Branchenver&auml;nderungen eignen
+4. Welche Quellen n&auml;her an echten Gesch&auml;ften und echten Zahlungen sind
+5. Ein k&uuml;rzester Nutzungspfad f&uuml;r Anf&auml;nger ohne Vorkenntnisse
+
+<a id="idea-apps"></a>
+## [1. Referenz-App-Liste: Zuerst sehen, was andere bereits tun](#top-idea-sources)
+
+Das ist der beste Ausgangspunkt f&uuml;r Anf&auml;nger, weil es am konkretesten ist.
+
+### Erste Liga: Direkt Ideenlisten &ouml;ffnen, einfach ausw&auml;hlen
+
+- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+  Dieses Subreddit hat den Kernzweck: Echte Nutzer posten direkt "Ich w&uuml;nsche mir, dass jemand ein XX baut". Jeder Post ist meist ein konkretes Produktbed&uuml;rfnis, oft mit etwas Szenario-Beschreibung. Sortieren nach `Top -> Past Month` oder `Top -> Past Year`, schon haben Sie in 20 Minuten eine Reihe echter Bedarfe.
+- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+  &Auml;hnlich wie oben, aber eher Software/App-Fokus. Das Beitragsformat ist h&auml;ufig "Ich brauche eine App, die XX kann" -- kleinteiliger, viele kleine, sch&ouml;ne Nischen.
+- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+  Vollst&auml;ndiger als die vorherigen. Viele Posts bestehen nicht nur aus einem Satz, sondern enthalten etwas Marktanalyse, Gesch&auml;ftsmodell und warum es sich jetzt lohnt.
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+  W&ouml;chentlich neue, nicht validierte Startup-Ideen, typische Felder sind Zielgruppe, Monetarisierung, erste Validierungsans&auml;tze. Einheitliches Format, schnelles &Uuml;berfliegen.
+- [IdeasAI](https://ideasai.com/)
+  KI-generierte Startup-Ideen, endlos scrollbar. Qualit&auml;t schwankend, aber gut, um in der Phase "gar kein Gef&uuml;hl" Inspiration zu erhalten und dann selbst in Nischenszenarien abzutauchen.
+
+### Zweite Liga: Bereits profitable Kleinprodukte anderer ansehen, Ideen zur&uuml;ckableiten
+
+Die Logik dieser Plattformen: Andere haben den Bedarf bereits validiert, verdienen sogar schon Geld. Sie schauen nicht, um zu kopieren, sondern um zu sehen, "welche kleinen Probleme bereits jemand bezahlt".
+
+- [Starter Story](https://www.starterstory.com/)
+  Viele echte Kleinunternehmer-Case-Studies, oft mit Gr&uuml;nder-Interviews, Umsatzzahlen, Startprozess. Fokus auf Produkte mit 10k bis 100k USD Monatsumsatz -- meist n&auml;her an dem, was normale Menschen sich vorstellen k&ouml;nnen.
+- [Indie Hackers — Products](https://www.indiehackers.com/products)
+  Indie-Entwickler zeigen ihre Produkte, viele ver&ouml;ffentlichen Umsatz und Wachstum. Nach Umsatz sortieren und sehen, welche konkreten Probleme die Produkte mit einigen Tausend bis Zehntausend USD l&ouml;sen.
+- [MicroConf Blog](https://microconf.com/blog)
+  Fokus auf Micro SaaS. Gut f&uuml;r "klein genug, aber jemand zahlt daf&uuml;r".
+- [1000 Tools](https://1000.tools/)
+  KI-Tool-Aggregator. Gut, um zu sehen, welche Kategorien bereits besetzt, aber mittelm&auml;&szlig;ig umgesetzt sind, oder welche Richtungen im Inland/in bestimmten Branchen noch unerschlossen sind.
+- [Product Hunt](https://www.producthunt.com/)
+  Wiederkehrende Produkttypen beobachten, nicht nur Platz 1 im Fokus -- eher sehen, welche Kategorien immer wieder auftauchen, aber noch kein klarer Gewinner existiert.
+- [BetaList](https://betalist.com/)
+  Gut f&uuml;r Fr&uuml;hphasen-Produkte und Teams, die noch an der Richtung arbeiten.
+
+### Beim Produkt-Ansehen nicht nur das Produkt selbst betrachten, sondern auch negative Bewertungen und "Dienstleister"
+
+- [G2](https://www.g2.com/)
+  Nutzung: 1- und 2-Sterne-Bewertungen ansehen. In den schlechten Bewertungen versteckt sich oft "welcher Schritt der bestehenden Tools nicht gut gemacht ist".
+- [Capterra](https://www.capterra.com/)
+  Nutzung: &Auml;hnlich wie G2, gut f&uuml;r echte Beschwerden bei SaaS-Produkten.
+- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / ZhuBaJie
+  Nutzung: Nach "Dienstleister", "Vertretung", "Eingabe", "Transkription" suchen. Wenn eine bestimmte manuelle Dienstleistung gut l&auml;uft, verbirgt sich dahinter meist ein wiederholbarer, produktisierbarer Prozess.
+
+Signalschwellen sind einfach:
+
+- Nutzer beschweren sich bereits &uuml;ber bestehende Tools
+- Nutzer zahlen bereits daf&uuml;r, dass andere es f&uuml;r sie erledigen
+- Nutzer investieren bereits viel Arbeitskraft und Zeit in diesen Prozess
+
+### Vierte Liga: Videos ansehen, manche Menschen zerlegen Ideen direkt für dich
+
+Wenn Sie lieber "jemand erkl&auml;rt mir die Gedanken" m&ouml;gen statt Foren und Rankings zu durchsuchen, eignen sich Videos und Podcasts ebenfalls.
+
+- Suche nach `Greg Isenberg startup ideas`
+  Gut, um jemanden zu sehen, der 2-3 konkrete Ideen analysiert, Marktgr&ouml;&szlig;e, Wettbewerb und Ansatzpunkte erkl&auml;rt.
+- Suche nach `My First Million podcast`
+  Zwei Moderatoren brainstormen oft eine ganze Folge lang Gesch&auml;ftsideen, hohe Dichte, h&auml;ufig sehr konkrete Nischen.
+- Suche nach `YC startup ideas` oder `Michael Seibel startup ideas`
+  Gut f&uuml;r Anf&auml;nger, direkte Sprache, viele erkl&auml;ren direkt, wie man die Richtung w&auml;hlt.
+
+<a id="idea-trends"></a>
+## [2. Trend-Quellen: Sehen, welche Richtungen aufsteigen](#top-idea-sources)
+
+Trend-Seiten geben Ihnen nicht direkt Ideen, sondern helfen einzusch&auml;tzen: Ob eine Richtung an Dynamik gewinnt und ob es sich lohnt, weiter zu recherchieren.
+
+- [Exploding Topics](https://explodingtopics.com/)
+  Datengetriebenes Tracking von schnell wachsenden, aber noch nicht im Mainstream angekommenen Themen und Produktkategorien. Gut f&uuml;r "im Kommen, aber noch nicht &uuml;berlaufen".
+- [Google Trends](https://trends.google.com/)
+  Keywords suchen, Trendlinie der letzten 12 Monate ansehen, dann in "Verwandte Suchanfragen" die "Steigenden" Begriffe pr&uuml;fen.
+- [Glimpse](https://meetglimpse.com/)
+  &Auml;hnlich wie Google Trends
+- Branchenbericht-Zusammenfassungen
+  Gut, wenn Sie bereits eine Richtung haben und schnell sehen wollen, wo die Branche steht.
+- McKinsey / BCG / Gartner Trend-Inhalte
+  Eher Unternehmens- und Gro&szlig;branchen-Perspektive, gut f&uuml;r B2B, Industrie, traditionelle Branchen.
+- [State of AI Report](https://www.stateof.ai/)
+  Wenn Ihre Richtung mit KI-Technologie selbst zu tun hat, eignet sich dieser Jahresbericht gut, um den &Uuml;berblick zu gewinnen.
+
+Bei Trends nur auf drei Dinge achten:
+
+- Steigt der Begriff kontinuierlich?
+- In welchem konkreten Szenario zeigt er sich?
+- Wer w&uuml;rde als Erster Zeit, Wechselkosten oder Budget daf&uuml;r aufwenden?
+
+<a id="idea-business"></a>
+## [3. Gesch&auml;ftsn&auml;here Quellen: Wer gibt Geld aus, wer beschwert sich, wer verkauft manuelle Dienstleistungen](#top-idea-sources)
+
+Wenn Sie keine "coole" Richtung suchen, sondern eine "n&auml;her am echten Gesch&auml;ft", m&uuml;ssen Sie Quellen n&auml;her an Workflows nutzen.
+
+### Wer gibt wirklich Geld f&uuml;r was aus
+
+- [Chinesische Regierungseinkaufsplattform](https://www.ccgp.gov.cn/)
+  Nutzung: Begriffe wie "Smart Construction Site", "Labormanagementsystem", "Datenerfassung", "Praxismanagement", "Angebotsystem" suchen, Budget, technische Anforderungen, Nutzungsszenarien ansehen.
+- &Ouml;ffentliche Ressourcentransaktionszentren der Provinzen und St&auml;dte
+  Nutzung: Sehen, was lokale Regierungen und Staatsunternehmen tats&auml;chlich einkaufen.
+- BiBiao / QianliMa / BiaoShiTong
+  Nutzung: Unternehmensseitige Beschaffungsbedarfe und h&auml;ufige Systemtypen sehen.
+
+Das starke Signal dieser Quellen: Es wird nicht &uuml;ber die Zukunft diskutiert, sondern "heute zahlt bereits jemand daf&uuml;r".
+
+### Wer beschwert sich &uuml;ber was
+
+- Fertigungsindustrie: Maschinenbau-Foren, SPS-Foren
+- Gesundheitswesen: Dingxiangyuan, Yimaitong
+- Bau / Ingenieurwesen: Tumu Online, Glodon-Community
+- Finanzen / Buchhaltung: Chinesisches Rechnungswesen-Forum
+- Au&szlig;enhandel: Fubu-Au&szlig;enhandelsforum, Mike-Community
+- Gastronomie / Einzelhandel: Zhiye Catering, Lianshang-Forum
+- [Reddit](https://www.reddit.com/) vertikale Subreddits: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
+- [V2EX](https://www.v2ex.com/)
+- Jike
+- Xiaohongshu
+
+Bei der Suche nicht nur "KI" oder "Innovation" verwenden, effektiver ist:
+
+- zu umst&auml;ndlich
+- gibt es einen besseren Weg
+- Empfehlung f&uuml;r Tools gesucht
+- Excel reicht nicht mehr aus
+- I wish there was
+- is there a tool for
+- I hate
+
+### Wer verkauft wiederkehrende manuelle Dienstleistungen
+
+- [Fiverr](https://www.fiverr.com/)
+- [Upwork](https://www.upwork.com/)
+- ZhuBaJie
+- Taobao
+- Xianyu
+
+Wenn Sie sehen, dass diese Dienstleistungen gut laufen, lohnt sich weitere Recherche:
+
+- PDF-Angebote in Excel &uuml;bertragen
+- Kundendaten batchweise bereinigen
+- Lebenslauf / Texte &uuml;berarbeiten / Transkription / Archivierung
+
+Hinter solchen Dienstleistungen steckt meist kein einmaliger Bedarf, sondern ein wiederkehrender Workflow.
+
+### Vollst&auml;ndige Workflows ansehen, nicht nur Ideenlisten
+
+Manchmal ist der direkteste Weg, eine Branche auszuw&auml;hlen, den Prozess einmal durchzugehen und nach Schritten zu suchen, die noch mit WeChat, Excel, Stift, Papier und Telefon erledigt werden.
+
+- Au&szlig;enhandel: Lieferanten finden, anfragen, vergleichen, Angebote erstellen, an Kunden senden, Antworten verfolgen, Inspektion arrangieren, Buchung, Verzollung.
+  Interessanter Ansatzpunkt: Lieferantenangebot in Kundenangebot &uuml;berf&uuml;hren.
+- Zahnarztpraxis: Empfang, R&ouml;ntgen, Befundung, Behandlungsplan-Besprechung, Follow-up, Behandlung, Kontrolltermin.
+  Interessanter Ansatzpunkt: Dem Patienten den Behandlungsplan erkl&auml;ren und kontinuierlich folgen.
+- Baustelle: Inspektion, fotografieren, in Gruppenchat posten, Bericht erstellen, an Auftraggeber &uuml;bergeben.
+  Interessanter Ansatzpunkt: Von Baustellenfotos zum compliance-Bericht.
+
+<a id="idea-vc"></a>
+## [4. VC-/Accelerator-Quellen: "Wohin die Welle geht" sehen](#top-idea-sources)
+
+Diese Quellen eignen sich gut, um gro&szlig;e Richtungen zu finden, aber nicht als direkter Validierungsersatz.
+
+- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
+  Nutzung: Gut f&uuml;r Ansatzpunkte, da oft direkt gesagt wird "Wir m&ouml;chten sehen, dass jemand das baut".
+- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
+  Nutzung: Eher gro&szlig;e Trends und Track-Einsch&auml;tzungen, gut f&uuml;r Branchengef&uuml;hl.
+- [NFX](https://www.nfx.com/)
+  Nutzung: Gut f&uuml;r schnelles &Uuml;berfliegen einer Reihe von Startup-Themen.
+- [Sequoia Capital](https://www.sequoiacap.com/article/)
+  Nutzung: Nicht immer direkte Ideenlisten, aber oft Erkl&auml;rungen zu Plattformwandel und Chancen.
+- [First Round Review](https://review.firstround.com/)
+  Nutzung: Gut f&uuml;r tieferes Eintauchen, nicht unbedingt Ideenliste, aber hohe Artikelqualit&auml;t.
+
+Vorteile dieser Quellen:
+
+- Zeigen, welche Richtungen zukunftstr&auml;chtig sind
+- Zeigen, welche Tracks voraussichtlich weiter gef&ouml;rdert werden
+- Erm&ouml;glichen schnellen Einstieg in die Sprache eines bestimmten Tracks
+
+Einschr&auml;nkungen dieser Quellen:
+
+- Meist Investorenperspektive
+- Nicht immer klar, welche Rolle am meisten Schmerz hat
+- Nicht immer klar, welcher Prozessschritt am st&auml;rksten blockiert
+- Nicht immer klar, wer heute bereits daf&uuml;r zahlt
+
+Bessere Nutzung: Zun&auml;chst Richtung finden, dann zur&uuml;ck zu Referenzprodukten, Branchenforen, Beschaffungsinformationen und echten Workflows gehen, um konkretere Ansatzpunkte zu finden.
+
+<a id="idea-path"></a>
+## [5. K&uuml;rzester Nutzungspfad f&uuml;r "Jemand ohne Idee, der nur einen Assistenten bauen will"](#top-idea-sources)
+
+Wenn Sie nur einen k&uuml;rzesten Weg gehen m&ouml;chten:
+
+1. Schritt, 30 Minuten.
+   [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/) &ouml;ffnen, nach `Top -> Past Year` sortieren, schnell 50 Posts &uuml;berfliegen, alle Richtungen speichern, bei denen Sie denken "Das k&ouml;nnte ich vielleicht bauen".
+2. Schritt, 30 Minuten.
+   [Starter Story](https://www.starterstory.com/) oder [Indie Hackers Products](https://www.indiehackers.com/products) &ouml;ffnen, nach Umsatz sortieren, mittelgro&szlig;e Produkte ansehen, nicht nur die erfolgreichsten. Richtungen finden, die mit Schritt 1 zusammenh&auml;ngen, sehen, an wen sie konkret verkauft werden und welchen Schritt sie l&ouml;sen.
+3. Schritt, 20 Minuten.
+   [Google Trends](https://trends.google.com/) aufrufen, verwandte Keywords suchen, pr&uuml;fen, ob der Trend steigt, dann "Verwandte Suchanfragen"-Spitzenworte ansehen.
+4. Schritt, 20 Minuten.
+   G2 / Capterra / Branchenforen / Beschaffungsplattformen / Fiverr aufrufen, pr&uuml;fen, wo es heute am meisten nervt und wo noch manuell gearbeitet wird.
+
+Nach dem Durchlesen reicht es, diesen Satz sagen zu k&ouml;nnen:
+
+- Eine bestimmte Art von Mensch, in einem bestimmten Szenario, wird von einem bestimmten Prozessschritt blockiert, und behilft sich aktuell mit einer bestimmten umst&auml;ndlichen Methode.
+
+<a id="idea-ai"></a>
+## [6. Wie KI Ihnen hilft](#top-idea-sources)
+
+Dieses Kapitel behandelt nicht prim&auml;r KI, aber KI eignet sich gut zum Strukturieren.
+
+Die zwei n&uuml;tzlichsten Anwendungen:
+
+- Links, Beitragstitel und Nutzer-Zitate, die Sie gefunden haben, an die KI senden und sie nach "Zielgruppe / Szenario / Schmerzpunkt / Alternative" sortieren lassen.
+- KI bitten, aus vielen verstreuten Informationen 3 Kandidatenrichtungen zusammenzufassen, statt weiter 50 Funktionen zu generieren.
+
+Direkt so fragen:
+
+```text
+Ich habe k&uuml;rzlich diese Quellen gefunden:
+1. [Titel oder Zitat einf&uuml;gen]
+2. [Titel oder Zitat einf&uuml;gen]
+3. [Titel oder Zitat einf&uuml;gen]
+
+Bitte keine Funktionsliste geben.
+Bitte nur drei Dinge tun:
+1. Nach Zielgruppe und Szenario kategorisieren
+2. Wiederkehrende m&uuml;hsame Schritte identifizieren
+3. Mir 3 konkretere Kandidatenrichtungen zusammenfassen
+```
+
+## Weiterf&uuml;hrende Literatur
+
+- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
+- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
+- [NFX](https://www.nfx.com/)
+- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+- [Starter Story](https://www.starterstory.com/)
+- [Indie Hackers - Products](https://www.indiehackers.com/products)
+- [Product Hunt](https://www.producthunt.com/)
+- [BetaList](https://betalist.com/)
+- [IdeasAI](https://ideasai.com/)
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+- [Google Trends](https://trends.google.com/)
+- [Exploding Topics](https://explodingtopics.com/)
+- [G2](https://www.g2.com/)
+- [Capterra](https://www.capterra.com/)
diff --git a/docs/de-de/stage-1/appendix-industry-scenarios/index.md b/docs/de-de/stage-1/appendix-industry-scenarios/index.md
new file mode 100644
index 0000000..605c018
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-industry-scenarios/index.md
@@ -0,0 +1,719 @@
+---
+title: 'B2B-Branchenszenarien - Inspirationsreferenz'
+description: 'Dieses Dokument sammelt praktische LLM-Anwendungen fuer B2B-Unternehmensszenarien, darunter Fertigung, intelligenter Kundenservice, Bildung, Programmierung, Gesundheitswesen, Cybersicherheit, Finanzdienstleistungen und Unternehmensservices. Es dient als Referenz fuer Entwickler von AI-Anwendungen im B2B-Bereich.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'ca. <strong>6 Stunden</strong>'
+
+const interestPoint = ref('')
+const purpose = ref('')
+
+const topicPool = {
+  manufacturing: [
+    { title: 'AI-gestuetzte Designplattform', desc: 'Konzeptdesign fuer Produktoptik mit Bildgenerierungsmodellen' },
+    { title: 'Intelligenter Assistent fuer Zeichnungspruefung', desc: 'Designnormen mit RAG als Wissensbasis nutzbar machen' },
+    { title: 'Automatische technische Dokumentation', desc: 'Spezifikationen und Handbuecher mit LLM erzeugen' },
+    { title: 'Automatische Anlagen-Inspektionsberichte', desc: 'Sprachbeschreibung in strukturierte Berichte umwandeln' },
+    { title: 'Q&A fuer Industrieanlagen-Fehlerdiagnose', desc: 'Historische Fehlerfaelle als Vektor-Wissensbasis nutzen' }
+  ],
+  'customer-service': [
+    { title: 'Multikanal-Kundenservice mit Auto-Antworten', desc: 'Nachrichten verstehen, Antworten erzeugen und Tickets anlegen' },
+    { title: 'Lead-Erkennung und Follow-up-Empfehlungen', desc: 'Dialoghistorien analysieren und Kaufabsicht bewerten' },
+    { title: 'Interner Wissens-Q&A-Assistent', desc: 'Interne Dokumente als RAG-Wissensbasis erschliessen' },
+    { title: 'Gespraechszusammenfassung und Ticket-Erstellung', desc: 'Kerninformationen extrahieren und Felder automatisch fuellen' },
+    { title: 'Best-Practice-Skript-Wissensbasis', desc: 'Erfolgreiche Servicefaelle in Skriptvorlagen verdichten' }
+  ],
+  education: [
+    { title: 'Personalisierter Sprachlernpfad', desc: 'Lernniveau einschaetzen und taegliche Aufgaben planen' },
+    { title: 'Automatische Unterrichtsentwuerfe', desc: 'Aus Lehrplaenen Unterrichtsrahmen und Ressourcen erzeugen' },
+    { title: 'Automatische Korrektur und Lernanalyse', desc: 'Subjektive Aufgaben bewerten und Hinweise geben' },
+    { title: 'Kompetenzmodell und Lernlandkarte', desc: 'Stellenanforderungen in Lernpfade uebersetzen' },
+    { title: 'Fremdsprachen-Szenariotraining', desc: 'LLM spielt Rollen fuer muendliche Uebungen' }
+  ],
+  programming: [
+    { title: 'Code-Vervollstaendigung und Bug-Fix', desc: 'IDE-Plugin liefert Vorschlaege und Reparaturen' },
+    { title: 'Low-Code-App-Bau und Automatisierung', desc: 'Natuerliche Sprache in Low-Code-Konfigurationen umwandeln' },
+    { title: 'Unit-Test-Generator', desc: 'Code per AST analysieren und Grenzfaelle erzeugen' },
+    { title: 'Code-Analyse und Sprachmigration', desc: 'Qualitaet pruefen und Migrationsvorschlaege geben' },
+    { title: 'Frontend-UI-Codegenerierung', desc: 'Designbilder erkennen und responsives CSS erzeugen' }
+  ],
+  healthcare: [
+    { title: 'Intelligente Laborbefund-Interpretation', desc: 'Kennzahlen per OCR erkennen und Auffaelligkeiten erklaeren' },
+    { title: 'Gesundheitsberatung mit Wissens-Retrieval', desc: 'Medizinische Wissensgraphen und RAG fuer Antworten nutzen' },
+    { title: 'Datenanalyse fuer klinische Forschung', desc: 'EMR-Daten integrieren und Auswertungscode unterstuetzen' },
+    { title: 'Automatische Bildbefunde', desc: 'Bildmerkmale in strukturierte Berichte ueberfuehren' },
+    { title: 'Medikationsassistent fuer chronische Krankheiten', desc: 'Erinnerungen erzeugen und Kontraindikationen pruefen' }
+  ],
+  security: [
+    { title: 'Code-Sicherheitsluecken erkennen und beheben', desc: 'SAST-Ergebnisse mit LLM erklaeren und Fixes vorschlagen' },
+    { title: 'AI-Phishing-Mail-Erkennung', desc: 'Mailinhalte, Absender und Links auf Risiken pruefen' },
+    { title: 'Automatische Security-Tagesberichte', desc: 'Logs zusammenfassen und Schluesselereignisse extrahieren' },
+    { title: 'Penetrationstest-Berichtsgenerator', desc: 'Schwachstellenbeschreibungen in Berichte umwandeln' },
+    { title: 'Threat-Intelligence-Analyse', desc: 'Mehrere Quellen anbinden und Auswirkungen bewerten' }
+  ],
+  finance: [
+    { title: 'Kredit-Due-Diligence-Berichte', desc: 'Finanzdaten analysieren und Risikoberichte erzeugen' },
+    { title: 'Private-Banking-Vermoegensberater', desc: 'Risikoprofil analysieren und Allokation empfehlen' },
+    { title: 'IPO-Prospekt und Compliance-Pruefung', desc: 'Vorlagen fuellen und Konsistenz pruefen' },
+    { title: 'Finanzbericht und Anomaliewarnung', desc: 'Finanzanalyse automatisieren und Abweichungen markieren' },
+    { title: 'Training fuer Versicherungsagenten', desc: 'Kundendialoge simulieren und Skripte bewerten' }
+  ],
+  enterprise: [
+    { title: 'Compliance-Pruefung im Vertragslebenszyklus', desc: 'Klauseln mit Regeln vergleichen und Aenderungen vorschlagen' },
+    { title: 'Verkaufsgespraech-Transkription', desc: 'ASR nutzen und passende Skripte empfehlen' },
+    { title: 'Marketing-Content und Design', desc: 'Verkaufstexte und Kernargumente erzeugen' },
+    { title: 'Analyse von Wettbewerber-Werbung', desc: 'Anzeigen sammeln und Platzierungsstrategien auswerten' },
+    { title: 'Netzweite Trendanalyse', desc: 'Hot Topics erkennen und Themenwinkel empfehlen' }
+  ],
+  content: [
+    { title: 'Assistenz fuer Film- und Romaninhalte', desc: 'Outline, Figuren und Dialoge erzeugen' },
+    { title: 'Markengeschichte und PR-Artikel', desc: 'Markenkeywords in mehrere Textstile uebersetzen' },
+    { title: 'Virtueller Avatar fuer Livestreams', desc: 'Digitaler Mensch, TTS und LLM-Dialog kombinieren' },
+    { title: 'Short-Video-Skript und Schnitt', desc: 'Skripte, Storyboards und Schnittvorschlaege erzeugen' },
+    { title: 'Marketing-Content-System', desc: 'Copy und Selling Points strukturiert generieren' }
+  ],
+  government: [
+    { title: 'Buergerhotline mit Sprachdialog und Dispatch', desc: 'Anliegen erkennen und automatisch weiterleiten' },
+    { title: 'Service-Wegweiser und Politik-Q&A', desc: 'Verwaltungswissen per RAG abrufbar machen' },
+    { title: 'Foerderpolitik-Matching', desc: 'Unternehmensprofile mit passenden Programmen abgleichen' },
+    { title: 'Vorpruefung von Verwaltungsunterlagen', desc: 'Dokumente per OCR erkennen und Vollstaendigkeit pruefen' },
+    { title: 'Stadt-Grid-Ereignismanagement', desc: 'Ereignistypen erkennen und Einsatzstellen zuteilen' }
+  ],
+  legal: [
+    { title: 'Agent fuer Vertragsrisiken', desc: 'Klauseln mit Risikolisten vergleichen und markieren' },
+    { title: 'AI-Berater fuer Gewinnwahrscheinlichkeit', desc: 'Fallmerkmale extrahieren und aehnliche Faelle finden' },
+    { title: 'Monitoring von Gesetzesaenderungen', desc: 'Aenderungen auswerten und Auswirkungen analysieren' },
+    { title: 'AIGC-Entwurf fuer Anwaltsschreiben', desc: 'Sachverhalte in standardisierte Schreiben ueberfuehren' },
+    { title: 'Rechtsklauseln in Alltagssprache', desc: 'Komplexe Klauseln verstaendlich erklaeren' }
+  ],
+  travel: [
+    { title: 'AIGC-Reisefuehrer-Generator', desc: 'Aus Praeferenzen Tagesplaene erzeugen' },
+    { title: 'Flug- und Hotelpreisprognose', desc: 'OTA-Daten sammeln und Preistrends vorhersagen' },
+    { title: 'Reiseplan-Reorganisation bei Flugausfall', desc: 'Alternativen analysieren und Notfallplaene empfehlen' },
+    { title: 'Visa-Unterlagen-Pruefung', desc: 'Fotos per OCR auswerten und Formulare fuellen' },
+    { title: 'Sprach- und Menueuebersetzung auf Reisen', desc: 'Offline-Sprache und Menuebilder uebersetzen' }
+  ],
+  emotion: [
+    { title: 'Virtueller 24-Stunden-Begleiter', desc: 'Gespraechshistorie merken und empathisch antworten' },
+    { title: 'Multimodale Emotionserkennung', desc: 'Stimme und Text fuer Unterstuetzung auswerten' },
+    { title: 'Kognitives Training fuer Alzheimer', desc: 'Spiele und Erinnerungsimpulse kombinieren' },
+    { title: 'Sozialtraining bei sozialer Angst', desc: 'Szenarien simulieren und Tipps geben' },
+    { title: 'Stimmungsmonitoring und positive Impulse', desc: 'Trends erkennen und ermutigende Inhalte erzeugen' }
+  ],
+  entertainment: [
+    { title: 'Open-World-NPC-Entscheidungsengine', desc: 'Verhaltensbaeume mit LLM-Entscheidungen kombinieren' },
+    { title: 'Murder-Mystery-DM-Assistent', desc: 'Spielerentscheidungen in Handlungszweige uebersetzen' },
+    { title: 'Interaktive Romanenden', desc: 'Leserentscheidungen generieren neue Enden' },
+    { title: 'E-Sport-Analyse und AI-Kommentar', desc: 'Spielbilder analysieren und Kommentare erzeugen' },
+    { title: 'Mehrrollen-TTS-Hoerbuch', desc: 'Textrollen verteilen und Stimmen erzeugen' }
+  ],
+  ecommerce: [
+    { title: 'Produktdetailseiten in hoher Konversion', desc: 'Selling Points und Szenenbeschreibungen erzeugen' },
+    { title: 'Virtuelle Kleidermodelle und Try-on', desc: 'Anprobeeffekte und Praesentationsvideos generieren' },
+    { title: 'Mehrsprachige E-Commerce-Lokalisierung', desc: 'Produkttexte uebersetzen und kulturell polieren' },
+    { title: 'Digitaler Livestream-Verkauf', desc: 'Avatar, Echtzeit-Skript und Produktdaten verbinden' },
+    { title: 'Trend-Insight und Bestseller-Prognose', desc: 'Social- und Shopdaten fuer Produktauswahl auswerten' }
+  ],
+  energy: [
+    { title: 'Stromverbrauchsanalyse im Haushalt', desc: 'Verbrauchsmuster erkennen und Sparstrategien ableiten' },
+    { title: 'PV-Defekterkennung per Drohne', desc: 'Thermische Bilder analysieren und Defekte markieren' },
+    { title: 'Strompreisprognose und Handelsstrategie', desc: 'Preise vorhersagen und Strategien erzeugen' },
+    { title: 'CO2-Footprint und ESG-Bericht', desc: 'Emissionsfaktoren berechnen und Berichte erstellen' },
+    { title: 'Lastprognose bei Extremwetter', desc: 'Wetterdaten anbinden und Notfalldispatch planen' }
+  ],
+  'av-media': [
+    { title: 'Highlight-Erkennung und Short-Video-Schnitt', desc: 'Keyframes finden und Clips automatisch schneiden' },
+    { title: 'Rauschtrennung und Stimmverstaerkung', desc: 'Audio separieren und Sprache verbessern' },
+    { title: '4K-Restauration alter Aufnahmen', desc: 'Super-Resolution und Kolorierung einsetzen' },
+    { title: 'Realistische TTS-Synchronisation', desc: 'Mehrstimmige TTS mit Emotionssteuerung nutzen' },
+    { title: 'Meeting-Transkription und To-do-Extraktion', desc: 'Sprecher trennen und Aufgaben extrahieren' }
+  ],
+  'ai-marketing': [
+    { title: 'Virale Social-Copy mit AIGC', desc: 'Themen, Emojis und Hashtags optimieren' },
+    { title: 'Marketing-Poster mit AI-Layout', desc: 'Poster automatisch an Formate anpassen' },
+    { title: 'Markenlogo und VI-System', desc: 'Logoideen und visuelle Regeln generieren' },
+    { title: 'Trend-Hunting fuer Marketingideen', desc: 'Hot Topics finden und kreative Winkel ableiten' },
+    { title: 'Short-Video-Skript und Storyboard', desc: 'Skripte, Shots und Drehhinweise erzeugen' }
+  ],
+  'data-intelligence': [
+    { title: 'Natural-Language-to-SQL', desc: 'Natuerliche Sprache in SQL-Abfragen umwandeln' },
+    { title: 'Datenasset-Katalog und Klassifikation', desc: 'Metadaten sammeln und automatisch klassifizieren' },
+    { title: 'Datenqualitaets-Anomalien', desc: 'Regeln und ML fuer Erkennung und Reparaturhinweise nutzen' },
+    { title: 'Intelligente Berichte und Visualisierung', desc: 'Berichte dialogisch konfigurieren' },
+    { title: 'Q&A fuer Datenkennzahlen', desc: 'Kennzahlendefinitionen als Wissensbasis nutzen' }
+  ]
+}
+
+const recommendationMap = {
+  'creative-content': {
+    'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
+    'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
+    'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
+    'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
+  },
+  'tech-service': {
+    'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
+    'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
+    'improve-experience': ['customer-service', 'enterprise', 'programming'],
+    'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
+  },
+  'data-intel': {
+    'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
+    'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
+    'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
+    'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
+  },
+  'user-service': {
+    'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
+    'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
+    'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
+    'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
+  },
+  'industry-solution': {
+    'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
+    'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
+    'improve-experience': ['healthcare', 'education', 'government', 'travel'],
+    'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
+  }
+}
+
+const interestOptions = [
+  { label: 'Kreative Inhalte', value: 'creative-content', desc: 'Texte, Bilder, Videos und andere Inhalte' },
+  { label: 'Technische Services', value: 'tech-service', desc: 'Entwicklungstools, Automatisierung, Code-Assistenz' },
+  { label: 'Datenintelligenz', value: 'data-intel', desc: 'Analyse, Prognose und Entscheidungsunterstuetzung' },
+  { label: 'Nutzerservice', value: 'user-service', desc: 'Kundenservice, Marketing und Nutzererlebnis' },
+  { label: 'Branchenloesungen', value: 'industry-solution', desc: 'Tiefe Anwendungen fuer konkrete Branchen' }
+]
+
+const purposeOptions = [
+  { label: 'Effizienz steigern', value: 'increase-efficiency', desc: 'Automatisieren und Prozesse beschleunigen' },
+  { label: 'Kosten senken', value: 'reduce-cost', desc: 'Personalaufwand und Ressourcenverbrauch reduzieren' },
+  { label: 'Erlebnis verbessern', value: 'improve-experience', desc: 'Servicequalitaet und Zufriedenheit erhoehen' },
+  { label: 'Geschaeft erneuern', value: 'innovate-business', desc: 'Neue Produkte und neue Modelle erkunden' }
+]
+
+const industries = [
+  { key: 'manufacturing', name: 'Industriefertigung', anchor: '#_1-industriefertigung' },
+  { key: 'customer-service', name: 'Intelligenter Kundenservice', anchor: '#_2-intelligenter-kundenservice' },
+  { key: 'education', name: 'Bildungswesen', anchor: '#_3-bildungswesen' },
+  { key: 'programming', name: 'Intelligentes Programmieren', anchor: '#_4-intelligentes-programmieren' },
+  { key: 'healthcare', name: 'Gesundheitswesen', anchor: '#_5-gesundheitswesen' },
+  { key: 'security', name: 'Cybersicherheit', anchor: '#_6-cybersicherheit' },
+  { key: 'finance', name: 'Finanzen und Versicherung', anchor: '#_7-finanzen-und-versicherung' },
+  { key: 'enterprise', name: 'Unternehmensservices', anchor: '#_8-unternehmensservices' },
+  { key: 'content', name: 'Content-Produktion und Betrieb', anchor: '#_9-content-produktion-und-betrieb' },
+  { key: 'government', name: 'Smart Government', anchor: '#_10-smart-government' },
+  { key: 'legal', name: 'Recht und Vertragsmanagement', anchor: '#_11-recht-und-vertragsmanagement' },
+  { key: 'travel', name: 'Reise und Mobilitaet', anchor: '#_12-reise-und-mobilitaet' },
+  { key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_13-emotionale-begleitung' },
+  { key: 'entertainment', name: 'Unterhaltung und Freizeit', anchor: '#_14-unterhaltung-und-freizeit' },
+  { key: 'ecommerce', name: 'E-Commerce Services', anchor: '#_15-e-commerce-services' },
+  { key: 'energy', name: 'Energie', anchor: '#_16-energie' },
+  { key: 'av-media', name: 'Audio und Video', anchor: '#_17-audio-und-video' },
+  { key: 'ai-marketing', name: 'AI-Marketing', anchor: '#_18-ai-marketing' },
+  { key: 'data-intelligence', name: 'Datenintelligenz', anchor: '#_19-datenintelligenz' }
+]
+
+const recommendationTopics = computed(() => {
+  if (!interestPoint.value || !purpose.value) return []
+
+  const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
+  const topics = []
+
+  keys.forEach(key => {
+    const industry = industries.find(item => item.key === key)
+    const industryTopics = topicPool[key] || []
+
+    if (industry && industryTopics.length > 0) {
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          industryKey: key,
+          industryName: industry.name,
+          industryAnchor: industry.anchor
+        })
+      })
+    }
+  })
+
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+const currentSelection = computed(() => {
+  const interest = interestOptions.find(i => i.value === interestPoint.value)
+  const pur = purposeOptions.find(p => p.value === purpose.value)
+  return {
+    interest: interest?.label || '',
+    purpose: pur?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  setTimeout(() => {
+    let element = document.querySelector(anchor)
+
+    if (!element) {
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+
+    if (!element) {
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      })
+      element.style.backgroundColor = '#f0f9ff'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  interestPoint.value = ''
+  purpose.value = ''
+}
+</script>
+
+# B2B-Branchenszenarien - Inspirationsreferenz
+
+## Kapiteluebersicht
+
+<ChapterIntroduction :duration="duration" :tags="['B2B-Anwendungen', 'Industrie', 'AI-Szenarien', 'Umsetzung', 'Branchenloesungen']" coreOutput="15+ B2B-Branchenszenarien verstehen" expectedOutput="Eine passende Richtung fuer Unternehmenskunden finden">
+
+Dieses Dokument sammelt <strong>praktische LLM-Anwendungen in B2B-Unternehmensszenarien</strong>. Im Unterschied zu B2C-Produkten stehen hier reale Geschaeftsprobleme, Effizienzsteigerung, Kostensenkung und Prozesssicherheit im Vordergrund. Die Beispiele helfen dabei, von der Anforderungsanalyse bis zur technischen Umsetzung konkrete Projektideen zu finden.
+
+</ChapterIntroduction>
+
+## Branchenschnellauswahl
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Passende Anwendungsszenarien finden</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Waehlen Sie Interessengebiet und Ziel. Das System empfiehlt passende Branchenrichtungen; ein Klick auf eine Zeile springt direkt zum Abschnitt.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="interestPoint" placeholder="Interessengebiet waehlen" style="width: 100%;">
+        <el-option v-for="item in interestOptions" :key="item.value" :label="item.label" :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="purpose" placeholder="Ziel waehlen" style="width: 100%;">
+        <el-option v-for="item in purposeOptions" :key="item.value" :label="item.label" :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
+      Empfohlen: {{ recommendationTopics.length }} Anwendungsszenarien
+      <span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
+        ({{ currentSelection.interest }} + {{ currentSelection.purpose }})
+      </span>
+    </div>
+    <el-table :data="recommendationTopics" style="width: 100%; cursor: pointer;" @row-click="(row) => scrollToAnchor(row.industryAnchor)" highlight-current-row>
+      <el-table-column prop="title" label="Anwendungsszenario" min-width="300">
+        <template #default="scope">
+          <div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industryName" label="Branche" width="180" align="center">
+        <template #default="scope">
+          <el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 10px; font-size: 12px; color: #909399;">
+      Klicken Sie auf eine Tabellenzeile, um zum passenden Branchenkapitel zu springen.
+    </div>
+  </div>
+
+  <div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
+    <span v-if="!interestPoint && !purpose">Bitte Interessengebiet und Ziel waehlen.</span>
+    <span v-else-if="!interestPoint">Bitte Interessengebiet waehlen.</span>
+    <span v-else>Bitte Ziel waehlen.</span>
+  </div>
+
+  <div v-if="interestPoint || purpose" style="margin-top: 12px;">
+    <el-button size="small" @click="resetSelection">Auswahl zuruecksetzen</el-button>
+  </div>
+</el-card>
+
+## Branchenschnellvorstellung
+
+### Gängige Technologieauswahl
+
+In AI-Anwendungsprojekten tauchen besonders haeufig drei technische Richtungen auf:
+
+1. **LLM**: gut fuer Sprache, Dialoge, Zusammenfassungen, Textgenerierung, Uebersetzung und Wissens-Q&A.
+2. **VLM**: verbindet Bildverstehen und Sprache, etwa fuer Bildbeschreibung, visuelle Q&A, Medizinbilder, Qualitaetspruefung und Design.
+3. **GenAI**: erzeugt Texte, Bilder, Audio oder Video und eignet sich fuer Designassistenz, Marketingmaterial, Training und Content-Produktion.
+
+### Auswahlstrategie
+
+Wählen Sie eine Richtung nicht nur nach Trend, sondern nach drei praktischen Kriterien:
+
+1. **Interesse**: Wer sich fuer Design interessiert, kann Content oder Industriedesign testen; wer technische Tiefe sucht, kann Security, Medizin oder Entwicklungswerkzeuge waehlen.
+2. **Branchennaehe**: Eigene Ressourcen senken die Einstiegskosten. Fertigung, Bildung, Medizin, Handel oder Verwaltung liefern jeweils andere Daten, Workflows und Fachwoerter.
+3. **Schwierigkeit**: Einsteiger starten mit Kundenservice, Content oder einfachen Q&A-Systemen; Fortgeschrittene koennen Qualitaetspruefung, medizinische Bildanalyse oder Code-Assistenz bearbeiten.
+
+## 1. Industriefertigung
+
+Fertigungsszenarien drehen sich um Design, Produktion, Qualitaetspruefung und Wartung. AI kann Informationen strukturieren, wiederkehrende Dokumente erzeugen und Expertenwissen leichter nutzbar machen.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | AI-gestuetzte Designplattform | Bildmodelle erzeugen Konzepte; LLM prueft Designregeln; Three.js zeigt 3D-Ansichten. |
+| 2 | Zeichnungspruefungsassistent | CAD-Daten analysieren; RAG greift auf Konstruktionsnormen zu. |
+| 3 | Technische Dokumentation | Produktdatenbank plus LLM erzeugt Spezifikationen und Handbuecher. |
+| 4 | Anlagen-Inspektionsbericht | Spracheingabe wird transkribiert und als strukturierter Bericht gespeichert. |
+| 5 | Stapler-Dispatch und Routenplanung | Auftraege, Lagerorte und Karten-API erzeugen optimale Fahrwege. |
+| 6 | Datenabfrage per natuerlicher Sprache | Text-to-SQL fragt OLAP-Systeme wie Doris oder ClickHouse ab. |
+| 7 | Fehlerdiagnose-Q&A | Historische Stoerfaelle werden als Vektorwissen abgefragt. |
+| 8 | Qualitaetspruefbericht | OCR und CV erkennen Defekte; LLM erzeugt Bericht und Klassifikation. |
+| 9 | Inventurassistent | Bestandsdaten werden abgeglichen; Abweichungen und Warnungen entstehen automatisch. |
+| 10 | Prozessoptimierungs-Q&A | Produktionswissen wird per RAG erschlossen und in Verbesserungsvorschlaege ueberfuehrt. |
+
+## 2. Intelligenter Kundenservice
+
+Kundenservice profitiert stark von LLM, weil viel Kommunikation, Zusammenfassung, Klassifikation und Wissenssuche anfallen.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Multikanal-Auto-Antworten | Website, App und Messenger anbinden; LLM erkennt Absicht und erstellt Tickets. |
+| 2 | Lead-Erkennung | Dialoge analysieren, Kaufabsicht bewerten und Follow-up empfehlen. |
+| 3 | Internes Wissens-Q&A | Confluence und Dokumente vektorisieren; RAG erzeugt Antworten. |
+| 4 | Zufriedenheitsanalyse | Gespraeche nach Sentiment, Problemtyp und Loesungsstatus auswerten. |
+| 5 | Gespraechszusammenfassung | Nach Chatende Zusammenfassung und Ticketfelder automatisch ausfuellen. |
+| 6 | Skript-Compliance | Antworten auf verbotene Aussagen und Compliance-Risiken pruefen. |
+| 7 | Ticket-Klassifikation | Lange Gespraeche zusammenfassen und mit Tags versehen. |
+| 8 | Emotionswarnung | Tonfall und Textsignal auswerten; bei Risiko per WebSocket warnen. |
+| 9 | Best-Practice-Skripte | Gute Faelle analysieren und passende Vorlagen im Kontext empfehlen. |
+| 10 | Outbound-Qualitaetspruefung | Telefonaufnahmen transkribieren, Kernaussagen extrahieren und QA-Berichte erzeugen. |
+
+## 3. Bildungswesen
+
+AI kann Unterricht individualisieren, Lernstaende erfassen und Lehrkraefte bei Material, Feedback und Verwaltung entlasten.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Personalisierter Lernpfad | Niveau und Ziel analysieren; taegliche Aufgaben und Ressourcen empfehlen. |
+| 2 | Unterrichtsentwurf | Lehrplan eingeben; LLM erzeugt Ziele, Ablauf und Materialien. |
+| 3 | Korrektur und Lernanalyse | Aufgaben bewerten; Wissensluecken ueber Graphen lokalisieren. |
+| 4 | Kompetenzmodell | Stellenanzeigen analysieren und Lernlandkarten ableiten. |
+| 5 | Schulcurriculum | Schulprofil und Lernbedarf in Kursrahmen und Folien ueberfuehren. |
+| 6 | Fremdsprachenpraxis | LLM spielt Rollen; ASR bewertet Aussprache; TTS liefert Vorbild. |
+| 7 | Studien- und Karriereberatung | Punktzahlen, Interessen und Zulassungsdaten kombinieren. |
+| 8 | Programmiercoach fuer Kinder | Code erklaeren und zwischen Blocksprache und Python vermitteln. |
+| 9 | Wissens-Mindmap | Kursthema in Mindmap und naechste Lernschritte umwandeln. |
+| 10 | Essay-Bewertung | Struktur, Sprache und Argumentation bewerten und kommentieren. |
+
+## 4. Intelligentes Programmieren
+
+Entwicklungswerkzeuge sind naheliegende B2B-Szenarien, weil Code, Logs, Tickets und Dokumentation bereits stark strukturiert sind.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Code-Vervollstaendigung und Bug-Fix | IDE-Plugin, Fehlerspur-Analyse und automatische Reparaturvorschlaege. |
+| 2 | Low-Code-App-Bau | Natuerliche Sprache in Komponenten, Datenmodelle und Workflows ueberfuehren. |
+| 3 | Unit-Test-Generator | AST analysieren und Grenzfaelle fuer Jest oder Pytest erzeugen. |
+| 4 | Code-Analyse und Migration | Tree-sitter, Regeln und LLM fuer Qualitaet und Sprachwechsel kombinieren. |
+| 5 | Natural-Language-to-SQL | Datenfragen in sichere SQL-Abfragen uebersetzen. |
+| 6 | API-Test und Dokumentation | Schnittstellenbeschreibungen in Testfaelle und API-Doku umwandeln. |
+| 7 | UI-Testwartung | Browseraktionen aufzeichnen und instabile Selektoren reparieren. |
+| 8 | Loganalyse | ELK-Daten auswerten, Ursachen verdichten und Fixes empfehlen. |
+| 9 | UI-Codegenerierung | Designbilder per OCR/VLM auswerten und Komponenten erzeugen. |
+| 10 | Datenbankschema-Design | Anforderungen in ER-Modelle und DDL-Skripte ueberfuehren. |
+
+## 5. Gesundheitswesen
+
+Gesundheitsszenarien verlangen Fachwissen, Datenschutz und menschliche Pruefung. AI eignet sich vor allem fuer Assistenz, Strukturierung und Erklaerung.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Laborbefund-Interpretation | Berichtsbilder erkennen, Werte extrahieren und Auffaelligkeiten erklaeren. |
+| 2 | Gesundheitsberatung mit RAG | Leitlinien, ICD-10 und Arzneimittelinformationen abrufbar machen. |
+| 3 | Klinische Forschungsanalyse | EMR-Daten integrieren und Analysecode erzeugen. |
+| 4 | Medizinische Uebungsfragen | Lehrbuchkapitel in Aufgaben, Loesungen und Fehleranalysen umwandeln. |
+| 5 | Pharma-Forschungs-Q&A | Wirkstoff-, Ziel- und Krankheitsgraph fuer Recherche nutzen. |
+| 6 | Arzneimittel-Q&A | Beipackzettel erkennen und Dosierung, Risiken und Hinweise beantworten. |
+| 7 | Patientenverstaendliche Artikel | Krankheitsname und Zielgruppe in einfache Texte ueberfuehren. |
+| 8 | Bildbefund-Generator | Radiologische Merkmale in strukturierte Berichtsvorlagen schreiben. |
+| 9 | OP-Bericht | Sprachaufzeichnungen in codierte, strukturierte OP-Dokumentation ueberfuehren. |
+| 10 | Medikations-Erinnerung | Medikamentenliste analysieren und Erinnerungen samt Warnungen erzeugen. |
+
+## 6. Cybersicherheit
+
+Security-Szenarien verbinden Logdaten, Code, Bedrohungswissen und klare Handlungsablaeufe. LLM hilft beim Erklaeren und Priorisieren.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Code-Schwachstellen-Fix | SAST-Ergebnisse erklaeren und Pull-Request-Vorschlaege erzeugen. |
+| 2 | Phishing-Erkennung | Mailtext, Sender und Links analysieren und Gateway-Regeln anstossen. |
+| 3 | Security-Tagesbericht | Logs zusammenfassen und wichtige Ereignisse hervorheben. |
+| 4 | Security-Wissens-Q&A | CVE- und interne Dokumente als RAG-Wissen nutzen. |
+| 5 | Penetrationstest-Bericht | Schwachstellen in Berichte und Reparaturhinweise ueberfuehren. |
+| 6 | Malware- und Datenschutzmonitoring | Sandboxsignale auswerten und sensible Daten erkennen. |
+| 7 | Compliance-Checkliste | Systemtyp in Sicherheitschecklisten nach CIS oder anderen Standards umsetzen. |
+| 8 | Threat-Intelligence-Q&A | Externe und interne Quellen verbinden und auf eigene Assets beziehen. |
+| 9 | Incident-Postmortem | Zeitlinie, Ursache und Verbesserungen aus Ereignisdaten erzeugen. |
+| 10 | Globales Threat-Monitoring | Sicherheitsnews und Disclosure-Daten sammeln, bewerten und melden. |
+
+## 7. Finanzen und Versicherung
+
+Finanzszenarien drehen sich um Risiko, Compliance, Dokumente, Beratung und Berichte. AI sollte hier immer mit Audit- und Review-Prozessen gekoppelt werden.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Kredit-Due-Diligence | Unternehmens- und Finanzdaten in Risikoberichte ueberfuehren. |
+| 2 | Vermoegensberatung | Risikopraeferenz und Zielportfolio analysieren. |
+| 3 | IPO-Prospekt | Vorlagen fuellen und Datenkonsistenz pruefen. |
+| 4 | Finanzbericht | Managementanalyse und Warnungen vor Kennzahlenabweichungen erzeugen. |
+| 5 | Beleg-Q&A | Rechnungen per OCR erkennen und Rueckfragen beantworten. |
+| 6 | Compliance-Fallrecherche | Straf- und Regulierungsfaelle abrufbar machen. |
+| 7 | Versicherungscoach | Kundenszenarien simulieren und Skripte bewerten. |
+| 8 | Versicherungsproduktvergleich | Klauseln strukturieren und Unterschiede hervorheben. |
+| 9 | Emotionserkennung im Vertrieb | Stimme und Formulierungen fuer Coachinghinweise auswerten. |
+| 10 | Schadenstatus-Dialog | Police oder Fallnummer abfragen und Status erklaeren. |
+
+## 8. Unternehmensservices
+
+Unternehmensservices betreffen CRM, HR, Marketing, Meeting-Workflows und interne Verwaltung. Gute Projekte starten meist bei einem konkreten, wiederkehrenden Prozess.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Kundenabwanderungswarnung | Verhalten erfassen, Churn-Risiko modellieren und Rueckgewinnung empfehlen. |
+| 2 | B2B-Outreach | Firmendaten filtern und personalisierte E-Mails erzeugen. |
+| 3 | Sales-Pipeline-Prognose | CRM-Daten analysieren und Zielerreichung vorhersagen. |
+| 4 | Markenmonitoring | Nachrichten und Social Media auswerten und Krisen frueh erkennen. |
+| 5 | E-Mail-Assistent | Kontext verstehen und professionelle Antwortentwuerfe erzeugen. |
+| 6 | CV-Parsing und Matching | Lebenslaeufe extrahieren und passende Stellen empfehlen. |
+| 7 | Onboarding-Q&A | Handbuecher und Prozesse fuer neue Mitarbeiter abrufbar machen. |
+| 8 | OKR-Feedback | Zielerreichung analysieren und Feedbackvorschlaege erzeugen. |
+| 9 | Meeting-Notizen | Transkription, Entscheidungen und Aufgaben automatisch erfassen. |
+| 10 | Rechnungs- und Spesenprozess | OCR, Plausibilitaetspruefung und Finanzsystemanbindung kombinieren. |
+
+## 9. Content-Produktion und Betrieb
+
+Content-Prozesse sind gut geeignet, weil Entwurf, Varianten, Bewertung und Distribution stark wiederholbar sind.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Film- und Romanassistenz | Outline, Figuren, Dialoge und Storystruktur erzeugen. |
+| 2 | Markenstory und PR-Text | Markenkeywords in mehrere Versionen fuer A/B-Tests umwandeln. |
+| 3 | Virtueller Livestream-Avatar | Avatar, TTS, LLM-Dialog und OBS-Streaming verbinden. |
+| 4 | Short-Video-Skript und Schnitt | Skript, Storyboard und Highlight-Clips generieren. |
+| 5 | Verkaufsgespraech-Skripte | Telefonaufnahmen analysieren und erfolgreiche Formulierungen empfehlen. |
+| 6 | Marketing-Content-System | Produktdaten in Copy, Bilder und Kampagnenvarianten ueberfuehren. |
+| 7 | ROI-Monitoring fuer Ads | Plattform-APIs auswerten und Optimierungen vorschlagen. |
+| 8 | Keyword- und Traffic-Analyse | Suchdaten analysieren und Content-Themen empfehlen. |
+| 9 | Wettbewerber-Werbung | Anzeigen sammeln und Strategien sowie Creatives vergleichen. |
+| 10 | Trendanalyse und Redaktionsplan | Hot Topics auswerten und Kalenderplaene erzeugen. |
+
+## 10. Smart Government
+
+Verwaltungsprojekte muessen Verstaendlichkeit, Nachvollziehbarkeit und Sicherheit verbinden. AI kann Buergeranliegen strukturieren und interne Arbeit beschleunigen.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Buergerhotline-Dispatch | Anruf erkennen, Anliegen klassifizieren und an Abteilungen leiten. |
+| 2 | Service-Wegweiser | Verwaltungswissen per RAG fuer Verfahren und Politikfragen nutzen. |
+| 3 | Foerderpolitik-Matching | Unternehmensprofile mit passenden Programmen abgleichen. |
+| 4 | Unterlagen-Vorpruefung | OCR und Regeln pruefen Vollstaendigkeit und Compliance. |
+| 5 | Videoanomalie im oeffentlichen Raum | CV erkennt Schlaegerei, Sturz oder andere Risiken. |
+| 6 | Stadt-Grid-Dispatch | IoT- und Kameradaten in Ereignistypen und Arbeitsauftraege ueberfuehren. |
+| 7 | Oeffentliche Meinung und Risiko | Hotline, Netzbeobachtung und Umfragen zusammen analysieren. |
+| 8 | Digitale Archivierung | OCR extrahiert Text; LLM klassifiziert Akten. |
+| 9 | Notfallressourcen-Dispatch | Ereignisdaten in Reaktionsplaene und Ressourcenverteilung ueberfuehren. |
+| 10 | Umweltmonitoring | Luftsensoren und CV-Quellen auswerten und Trends erklaeren. |
+
+## 11. Recht und Vertragsmanagement
+
+Rechtliche Szenarien profitieren von Dokumentenstrukturierung, Aehnlichkeitssuche und klarer Risikoerklaerung. Fachliche Pruefung bleibt zwingend.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Vertragsrisiko-Agent | Vertragsklauseln gegen Risikolisten pruefen. |
+| 2 | Vertragslebenszyklus-Review | Regelwerke vergleichen und Aenderungsvorschlaege verfolgen. |
+| 3 | Gewinnwahrscheinlichkeitsanalyse | Fallmerkmale und aehnliche Urteile auswerten. |
+| 4 | Gesetzesaenderungsradar | Aenderungen erkennen, zusammenfassen und Auswirkungen melden. |
+| 5 | Anwaltsschreiben-Entwurf | Sachverhalte in formale Schreiben und Checklisten ueberfuehren. |
+| 6 | Gerichtstranskription | Audio transkribieren und Streitpunkte mit Zeitstempeln extrahieren. |
+| 7 | IP-Verletzungsmonitoring | Plattformen beobachten und Beweise sichern. |
+| 8 | IPO-Datenkonsistenz | Prospektkapitel vergleichen und Abweichungen markieren. |
+| 9 | Klauseln in Alltagssprache | Markierte Rechtsklauseln einfach erklaeren. |
+| 10 | Beweisketten-Visualisierung | Materialien hochladen, Beziehungen und Zeitlinien analysieren. |
+
+## 12. Reise und Mobilitaet
+
+Reiseszenarien verbinden Planung, Preise, Uebersetzung, Bewertungen und Echtzeitdaten. AI macht aus vielen kleinen Informationen nutzbare Empfehlungen.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | AIGC-Reisefuehrer | Tage, Budget und Interessen in Reiseplaene umwandeln. |
+| 2 | Preisprognose fuer Flug und Hotel | OTA-Daten sammeln, Trends modellieren und Warnungen senden. |
+| 3 | Reorganisation bei Flugausfall | Statusdaten pruefen und Alternativrouten empfehlen. |
+| 4 | Visa-Unterlagen-Assistent | Dokumente erkennen, Vollstaendigkeit pruefen und Formulare fuellen. |
+| 5 | Reiseuebersetzung | Sprache offline uebersetzen und Menuebilder per OCR erklaeren. |
+| 6 | Hotelbewertungsanalyse | Bewertungen auswerten und Risiken sowie Vorteile verdichten. |
+| 7 | VR-Zielvorschau | 360-Grad-Bilder und virtuelle Zimmerbesichtigung kombinieren. |
+| 8 | Reisebericht aus Fotos | Zeit und Ort extrahieren und Social Copy erzeugen. |
+| 9 | Geschaeftsreise-Abrechnung | Plattform-APIs und Rechnungen fuer Compliance pruefen. |
+| 10 | Besucherflussprognose | Auslastungsdaten modellieren und Routen mit weniger Andrang empfehlen. |
+
+## 13. Emotionale Begleitung
+
+Emotionale AI-Anwendungen verlangen besondere Vorsicht, Datenschutz und klare Eskalationsmechanismen. Sie eignen sich eher als begleitende Assistenz als als Ersatz fuer Fachhilfe.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Virtueller Begleiter | Dialogverlauf speichern und personalisierte Antworten erzeugen. |
+| 2 | Emotionserkennung und Beratung | Stimme und Text analysieren; Krisenhinweise erkennen. |
+| 3 | Alzheimer-Training | Kognitive Spiele und Erinnerungsmedien kombinieren. |
+| 4 | Sozialangst-Coach | Virtuelle soziale Situationen simulieren. |
+| 5 | Gute-Nacht-Geschichten fuer Kinder | Thema und Vorlieben in personalisierte Geschichten verwandeln. |
+| 6 | Digitale Erinnerungsperson | Vorhandene Texte und Stimmen fuer Erinnerungsdialoge nutzen. |
+| 7 | Persoenlichkeitsspiegel | Testdaten in Analyse und empathische Antworten ueberfuehren. |
+| 8 | Stimmungsmonitor | Tagebuchdaten auswerten und positive Impulse senden. |
+| 9 | Anonyme Jugendberatung | Niedrigschwellige Gespraeche mit Sicherheitswarnungen kombinieren. |
+| 10 | Virtuelles Haustier | Persoenlichkeitsmodell und Interaktion wachsen lassen. |
+
+## 14. Unterhaltung und Freizeit
+
+Unterhaltungsszenarien nutzen AI fuer Story, Personalisierung, Audio, Video und Gameplay. Der Kern ist meist ein besseres Erlebnis, nicht nur Automatisierung.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Open-World-NPC-Engine | Verhaltensbaum und LLM-Dialoge verbinden. |
+| 2 | Murder-Mystery-DM-Assistent | Entscheidungen in Hinweise, Logik und Zweige ueberfuehren. |
+| 3 | Interaktive Romanenden | Leserwahl in alternative Enden umwandeln. |
+| 4 | 3D-Charaktergenerierung | Textbeschreibung in Skizze, Modell und Material ueberfuehren. |
+| 5 | E-Sport-Kommentator | Spielbild analysieren und Kommentare erzeugen. |
+| 6 | Humor-Empfehlung | Nutzerprofil mit passenden Inhalten abgleichen. |
+| 7 | AI-Stimmkorrektur | Rauschen reduzieren und Gesangsstimme verbessern. |
+| 8 | Serienclip-Extraktion | Figurenbezogene Szenen erkennen und schneiden. |
+| 9 | Mehrrollen-Hoerbuch | Rollen verteilen, Stimmen erzeugen und Effekte mischen. |
+| 10 | Spielanalyse-Coach | Partien auswerten und Trainingshinweise geben. |
+
+## 15. E-Commerce Services
+
+E-Commerce-Projekte zielen auf schnellere Content-Produktion, bessere Conversion, Kundenservice und Preis- oder Trendanalyse.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Produktdetailseiten-Batchproduktion | Produktdaten in Selling Points, Szenen und Bilder ueberfuehren. |
+| 2 | Virtuelles Kleidermodel | Produktbilder in Try-on und Demo-Videos umwandeln. |
+| 3 | Mehrsprachige Lokalisierung | Produkttexte uebersetzen und kulturell anpassen. |
+| 4 | Sentimentbasierter Kundenbot | Beratungsgespräche analysieren und passende Antworten erzeugen. |
+| 5 | Digitaler Livestream-Verkauf | Avatar, Produktdaten und Echtzeitskript verbinden. |
+| 6 | Preisvergleichs-Plugin | Preise crawlen, Trends zeigen und Warnungen ausloesen. |
+| 7 | Kaeuferbild-Auswahl und Short-Video | UGC bewerten und in Video-Vorlagen einsetzen. |
+| 8 | Verkaufsdialog-Analyse | ASR und Compliance-Check mit Skriptempfehlung kombinieren. |
+| 9 | Trend- und Bestseller-Prognose | Social- und Shopdaten fuer Produktauswahl analysieren. |
+| 10 | Private-Traffic-Cluster | Nutzerverhalten clustern und Marketingautomatisierung ausloesen. |
+
+## 16. Energie
+
+Energieszenarien verbinden Messdaten, Prognosen, Inspektion und Nachhaltigkeitsberichte. AI hilft vor allem bei Analyse und operativer Empfehlung.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Stromverbrauchsanalyse | Smart-Meter-Daten auswerten und Sparhinweise geben. |
+| 2 | PV-Defekterkennung | Drohnenbilder und Thermodaten fuer Defektmarkierung nutzen. |
+| 3 | Strompreisstrategie | Marktpreise prognostizieren und Handelsstrategie erzeugen. |
+| 4 | Batteriegesundheit | Betriebsdaten analysieren und Thermal-Runaway-Risiken warnen. |
+| 5 | CO2-Footprint und ESG | Energieverbrauch in Emissionen und Berichte umrechnen. |
+| 6 | Netzlast bei Extremwetter | Wetter- und Lastdaten fuer Dispatch-Strategien nutzen. |
+| 7 | Tankstellen-Sicherheitsvideo | Riskante Handlungen erkennen und Alarm senden. |
+| 8 | Pipeline-Lecksuche | Akustiksensoren analysieren und Leckposition berechnen. |
+| 9 | Virtuelles Kraftwerk | Dezentrale Ressourcen buendeln und Handelsentscheidungen unterstuetzen. |
+| 10 | Minensicherheit | Standortdaten verfolgen und Sperrzonenalarm ausloesen. |
+
+## 17. Audio und Video
+
+Audio- und Videoszenarien verbessern Produktion, Restauration, Transkription und Wiederverwertung von Medieninhalten.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Highlight-Erkennung | Langvideos analysieren und kurze Clips schneiden. |
+| 2 | Rauschtrennung | Audiomodelle entfernen Hintergrund und verstaerken Stimme. |
+| 3 | 4K-Restauration | Super-Resolution und Kolorierung fuer alte Aufnahmen nutzen. |
+| 4 | TTS-Synchronisation | Mehrere Stimmen und Emotionen generieren. |
+| 5 | Bilinguale Untertitel | ASR, Uebersetzung und Untertitel-Overlay kombinieren. |
+| 6 | Objektentfernung im Video | Tracking und Inpainting fuer konsistente Frames nutzen. |
+| 7 | Lizenzfreie Musik | Musikmodelle erzeugen Stilvarianten und pruefen Rechte. |
+| 8 | Stimmklon und Voice Conversion | Wenige Samples fuer personalisierte Stimmen nutzen. |
+| 9 | Drehbuch zu Storyboard | Skripte parsen und Vorschauvideos generieren. |
+| 10 | Meeting-Transkription | Sprechertrennung, Aufgabenextraktion und Zeitstempel erzeugen. |
+
+## 18. AI-Marketing
+
+AI-Marketing kombiniert Content-Erstellung, Layout, Trendanalyse, Budgetsteuerung und Markenmonitoring.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Virale Social-Copy | Themen in kurze, teilbare Copy mit Hashtags umsetzen. |
+| 2 | Posterlayout | Copy und Vorlage in mehrere Formate exportieren. |
+| 3 | Markenlogo und VI | Markenkeywords in Logoideen und visuelle Regeln verwandeln. |
+| 4 | Trend-Hunting | Hot Topics sammeln und Marketingwinkel ableiten. |
+| 5 | ROI- und Budgetsteuerung | Ad-Plattformdaten analysieren und Gebote optimieren. |
+| 6 | Wettbewerber-Wochenbericht | Konkurrenzinhalte sammeln, Strategien erkennen und berichten. |
+| 7 | SEO-Artikel-Batch | Keywords analysieren und Artikel mit Optimierungshinweisen erzeugen. |
+| 8 | Personalisierte Marketingmail | Nutzerprofile in individuelle E-Mails und A/B-Tests uebersetzen. |
+| 9 | Markenreputation | Netzweite Stimmung auswerten und Krisenwarnungen senden. |
+| 10 | Short-Video-Storyboard | Thema in Skript, Shots und Drehhinweise ueberfuehren. |
+
+## 19. Datenintelligenz
+
+Datenintelligenz macht Daten fuer Fachbereiche nutzbar: Fragen, Visualisierungen, Qualitaet, Governance und Kennzahlendefinitionen.
+
+| Nr. | Anwendungsszenario | Umsetzungsreferenz |
+| :--: | --- | --- |
+| 1 | Text-to-SQL-Datenabfrage | Natuerliche Sprache in SQL und Visualisierung umwandeln. |
+| 2 | Dialogisches BI | Eine Frage erzeugt Diagramme und alternative Darstellungen. |
+| 3 | Screenshot zu Excel | Tabellenstrukturen per VLM erkennen und exportieren. |
+| 4 | Bild zu Tabelle | OCR erkennt Zellstruktur und Daten. |
+| 5 | Wissensgraph aus heterogenen Daten | Entitaeten und Beziehungen extrahieren und speichern. |
+| 6 | Berichtserklaerung | Diagramme oder Daten hochladen und Trends erklaeren lassen. |
+| 7 | Schema-Q&A | Tabellen und Felder erklaeren und Beispiel-SQL erzeugen. |
+| 8 | Master-Data-Deduplizierung | Mehrere Quellen abgleichen und Dubletten zusammenfuehren. |
+| 9 | Datenanforderung zu Testfaellen | Anforderungen in Pruefszenarien und Validierungen uebersetzen. |
+| 10 | Kennzahlen-Q&A | Definitionen, Berechnungslogik und Abhaengigkeiten abrufbar machen. |
diff --git a/docs/de-de/stage-1/appendix-jobs-to-be-done/index.md b/docs/de-de/stage-1/appendix-jobs-to-be-done/index.md
new file mode 100644
index 0000000..2aafb12
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-jobs-to-be-done/index.md
@@ -0,0 +1,496 @@
+---
+title: 'Mit Jobs to Be Done herausfinden, was Nutzer wirklich erreichen wollen'
+description: 'Ein Einf&uuml;hrungsartikel zu Jobs to Be Done f&uuml;r Einsteiger. Verstehen Sie, dass Nutzer keine Funktionen kaufen, sondern in bestimmten Szenarien Ihr Produkt "einstellen", um einen Fortschritt zu erzielen. Lernen Sie, mit JTBD Produktrichtungen, Interviewfragen und AI-Prompts zu strukturieren.'
+---
+
+<script setup>
+const duration = 'Etwa <strong>1,5 Stunden</strong>'
+</script>
+
+# Mit Jobs to Be Done herausfinden, was Nutzer wirklich erreichen wollen
+
+<a id="top-jtbd"></a>
+
+## Kapitel&uuml;bersicht
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['JTBD', 'Nutzerbed&uuml;rfnisse', 'Produktdenken', 'Bedarfserkenntnis']"
+  coreOutput="1 JTBD-Satz, der einem echten Bedarf n&auml;her kommt"
+  expectedOutput="Eine vage Idee zu einem konkreteren Nutzerszenario und einer MVP-Richtung verdichten k&ouml;nnen"
+>
+
+Viele Anf&auml;nger machen bei der Produktentwicklung am h&auml;ufigsten den Fehler, ihre gesamte Aufmerksamkeit auf "Welche Funktionen will ich bauen" zu richten. Man sieht, dass andere intelligente Kategorisierung haben, man will auch welche; man sieht, dass andere automatische Zusammenfassung haben, man will auch welche; man sieht, dass andere Agenten, Multimodalit&auml;t und Workflows gebaut haben, man f&uuml;hlt sich auch nicht zur&uuml;ckbleiben.
+
+In der Realit&auml;t entscheiden sich Nutzer aber selten deshalb f&uuml;r ein Produkt, weil "der Funktionsname cool klingt". Vielmehr m&ouml;chten sie in einem bestimmten Moment etwas voranbringen und "stellen" ad hoc ein Werkzeug, einen Service oder sogar eine Person ein, die ihnen bei diesem Schritt hilft.
+
+Genau das ist es, was die **Jobs to Be Done (JTBD)** -Methode uns verdeutlichen will: **Nutzer kaufen nicht die Funktion an sich, sondern stellen eine L&ouml;sung ein, die ihnen hilft, einen Fortschritt zu erzielen.**
+
+Dieser Artikel f&uuml;hrt Sie in verst&auml;ndlicher Sprache durch JTBD und macht es zu einem Analysewerkzeug, das Sie direkt bei der Entwicklung von AI-Anwendungen einsetzen k&ouml;nnen.
+
+</ChapterIntroduction>
+
+::: info Minimales SOP
+**Ziel**: Nach dem Lesen wissen Sie besser, wie Sie eine vage Idee in einen Satz mit echtem Nutzerszenario verdichten, anstatt nur eine Sammlung von Funktionsnamen im Kopf zu haben.
+
+**Aktionspunkte**: 1 vage Idee aufschreiben, 3 potenzielle Nutzer nach "Wie haben Sie das letzte Mal damit umgebracht" fragen und dann zu 1 JTBD-Satz zusammenfassen.
+
+**Ergebnis**: Sie erhalten eine klarere Bedarfshypothese und wissen, was in der ersten Version priorit&auml;r gel&ouml;st werden sollte.
+
+**Stichwortspr&uuml;nge**: [Was ist JTBD](#jtbd-what) &middot; [Ein-Satz-Formel](#jtbd-formula) &middot; [Wie AI Ihnen hilft](#jtbd-ai)
+:::
+
+## Was Sie lernen werden
+
+1. Was Jobs to Be Done ist und warum es n&auml;her an echten Bed&uuml;rfnissen liegt als "Funktions-Brainstorming"
+2. Wie man unterscheidet zwischen "Funktionen, die Nutzer sagen zu wollen" und "was Nutzer wirklich erreichen wollen"
+3. Wie man mit einer einfachen Vorlage eine vage Idee in Szenario, Ausl&ouml;ser, Hindernis und Erfolgskriterium zerlegt
+4. Wie man JTBD bei AI-Produkten, Interview-Fragen und Prompt-Strukturierung anwendet
+
+<a id="jtbd-what"></a>
+## [1. Was ist Jobs to Be Done?](#top-jtbd)
+
+Jobs to Be Done wird oft als **JTBD** abgek&uuml;rzt. Die Kernidee dahinter h&auml;ngt mit dem klassischen Ausdruck zusammen, den Clayton Christensens Team verbreitet hat: **Nutzer "stellen" ein Produkt ein, um etwas zu erledigen.**
+
+Dieses "Etwas" ist keine oberfl&auml;chliche Aktion auf einer To-do-Liste, sondern ein **Fortschritt**, den der Nutzer f&uuml;r seinen Zustand anstrebt. Zum Beispiel:
+
+- Nicht "Ich brauche ein AI-Protokoll-Tool", sondern "Ich m&ouml;chte innerhalb von 10 Minuten nach einem Meeting die wichtigsten Punkte, Aufgaben und Verantwortlichen zusammenfassen, anstatt mich auf Erinnerung zu verlassen"
+- Nicht "Ich brauche eine Haushaltsbuch-App", sondern "Ich m&ouml;chte wissen, wohin mein Geld geht, damit ich am Monatsende nicht mehr &auml;ngstlich bin"
+- Nicht "Ich brauche einen Lebenslauf-Optimierer", sondern "Ich m&ouml;chte zuversichtlicher einen ansehnlichen Lebenslauf verschicken, ohne bei jeder Bewerbung zu zweifeln, dass er schlecht geschrieben ist"
+
+Deshalb konzentriert sich **JTBD nicht darauf, wie das Produkt aussieht, sondern darauf, warum der Nutzer es in diesem Moment braucht.**
+
+Das erkl&auml;rt auch, warum viele scheinbar unterschiedliche Produkte tats&auml;chlich um denselben Job konkurrieren. Wenn ein Nutzer "auf dem Arbeitsweg weniger gelangweilt sein" m&ouml;chte, k&ouml;nnte er Kurzvideos, Podcasts, Spiele, Chats oder sogar Nickerchen einsetzen. Wenn ein Nutzer "ein langes PDF schnell verstehen" m&ouml;chte, k&ouml;nnte er AI-Zusammenfassungs-Tools, Praktikanten, Kollegen, sich selbst durchbei&szlig;en oder es erst einmal liegen lassen.
+
+Mit dieser Perspektive werden Sie feststellen, dass Ihre wahren Konkurrenten oft nicht nur "eine andere App, die wie Ihre aussieht" sind, sondern **alle akzeptablen Alternativl&ouml;sungen, die dem Nutzer aktuell zur Verf&uuml;gung stehen.**
+
+## 2. Worin unterscheidet sich JTBD von Personas und Funktionslisten?
+
+Viele Einsteiger beginnen die Bedarfsanalyse mit Personas: 25 Jahre alt, weiblich, Gro&szlig;stadt, B&uuml;roangestellte, mag Effizienz-Tools, offen f&uuml;r neue Produkte. Diese Informationen sind nicht ganz nutzlos, aber sie **erkl&auml;ren oft nicht, warum eine Person in diesem Moment handelt.**
+
+JTBD interessiert sich eher f&uuml;r folgende Fragen:
+
+- In welchem Szenario hat er beschlossen, nach einer L&ouml;sung zu suchen?
+- Was genau hat ihn blockiert?
+- Was m&ouml;chte er zum n&auml;chsten Schritt voranbringen?
+- Mit welchem behelfsm&auml;&szlig;igen Ansatz h&auml;lt er sich aktuell &uuml;ber Wasser?
+- Welches Ergebnis w&uuml;rde ihn das Gef&uuml;hl haben lassen: "Es hat sich gelohnt"
+
+Mit anderen Worten: **Personas beschreiben eher, wer dieser Mensch ungef&auml;hr ist; JTBD beschreibt eher, was dieser Mensch jetzt wirklich erreichen will.**
+
+Gleichzeitig f&uuml;hren Funktionslisten oft in die Irre. Nutzer sagen: "Ich will Word-Export", "Ich will AI-Umschreibung", "Ich will Spracheingabe". Das sind alles oberfl&auml;chliche &Auml;u&szlig;erungen. JTBD fragt weiter:
+
+- Warum ben&ouml;tigen Sie jetzt Word-Export und nicht PDF?
+- M&ouml;chten Sie umschreiben, weil der Stil schlecht ist, oder weil Sie verschiedene Zielgruppen ansprechen m&uuml;ssen?
+- M&ouml;chten Sie Spracheingabe, weil Sie nicht tippen m&ouml;chten, oder weil Sie h&auml;ufig unterwegs, beim Autofahren oder direkt nach Meetings aufzeichnen?
+
+Oft ist **eine Funktion nur eine vorl&auml;ufige &Uuml;bersetzung eines Jobs.** Wenn Sie nur Funktionen sammeln, machen Sie leicht ein Produkt, das "alles aufstapelt, was Nutzer sagen". Wenn Sie den dahinterliegenden Job erkennen, haben Sie eher die Chance, eine wirklich handliche und wettbewerbsf&auml;hige L&ouml;sung zu entwickeln.
+
+## 3. Ein Beispiel, das auch Einsteiger verstehen
+
+Lassen Sie uns zun&auml;chst nicht an komplexe AI-Produkte denken, sondern mit einem Alltagsbeispiel beginnen.
+
+Angenommen, jemand hat morgens vor dem Verlassen des Hauses keine Zeit zum Fr&uuml;hst&uuml;ck und kauft oft ein Sandwich und Kaffee am U-Bahn-Eingang. Oberfl&auml;chlich betrachtet "kauft" er ein Fr&uuml;hst&uuml;ck. Mit der JTBD-Perspektive k&ouml;nnte das, was er wirklich erreichen will, jedoch sein:
+
+- An einem morgendlichen Tag in Eile mit minimalem geistigen Aufwand eine Mahlzeit organisieren
+- Sicherstellen, dass er vor der Ankunft im B&uuml;ro nicht hungrig wird
+- Sein Arbeitsweg-Tempo nicht durch Fr&uuml;hst&uuml;ck beeintr&auml;chtigen
+
+In diesem Fall stellt der Nutzer nicht "eine bestimmte Sandwich-Marke" ein, sondern eine L&ouml;sung, die ihm hilft, seinen Morgen reibungslos zu gestalten. Wenn der nahe gelegene Supermarkt schneller, n&auml;her und zuverl&auml;ssiger ist, k&ouml;nnte er sofort wechseln.
+
+Diesen Logik auf AI-Produkte &uuml;bertragen, wird es noch offensichtlicher.
+
+Wenn Sie beispielsweise ein "AI-Meeting-Protokoll-Tool" entwickeln m&ouml;chten, w&uuml;rden Sie auf Funktionsebene leicht dar&uuml;ber nachdenken:
+
+- Audio-Upload unterst&uuml;tzen
+- Sprecher-Trennung integrieren
+- Markdown-Export anbieten
+- Automatische Aufgaben generieren
+
+Das alles ist nicht falsch, aber noch nicht ausreichend. Mit JTBD eine Ebene tiefer gefragt, k&ouml;nnte der Nutzer Folgendes wirklich erreichen wollen:
+
+- Innerhalb von 10 Minuten nach dem Meeting die Diskussionsergebnisse an nicht anwesende Personen weiterleiten
+- Aufgaben, Verantwortliche und Fristen sauber extrahieren, damit das Team nicht aus dem Ged&auml;chtnis zusammenarbeiten muss
+- Die Zeit f&uuml;r wiederholtes Zusammenfassen von Meeting-Inhalten reduzieren und Energie f&uuml;r Entscheidungen und Fortschritt aufwenden
+
+Sobald der Job klar formuliert ist, ergeben sich viele Funktionspriorit&auml;ten automatisch. Vielleicht ist das Wichtigste in der ersten Version nicht "12 Exportformate unterst&uuml;tzen", sondern:
+
+- Protokollstruktur muss klar genug sein
+- Aufgabenerkennung muss zuverl&auml;ssig sein
+- Freigabelink muss bequem sein
+- Ergebnisse m&uuml;ssen direkt an das Team weitergeleitet werden k&ouml;nnen
+
+Das ist der Wert von JTBD: **Es hilft Ihnen, von "Welche F&auml;higkeiten will ich aufstapeln" zur&uuml;ckzukehren zu "Welchen Fortschritt will ich dem Nutzer erm&ouml;glichen".**
+
+## 4. Eine n&uuml;tzliche JTBD-Vorlage
+
+Wenn Sie Einsteiger sind, m&uuml;ssen Sie JTBD zun&auml;chst nicht zu akademisch betrachten. Konzentrieren Sie sich auf die 5 wichtigsten Elemente.
+
+### 4.1 Szenario
+
+In welchem Moment und in welcher Umgebung denkt der Nutzer an dieses Produkt?
+
+- Nach einem Meeting
+- Wenn der Chef spontan Material anfordert
+- Abends bei der Vorbereitung einer Bewerbung
+- Am Monatsende, wenn das Geld wieder nicht reicht
+
+**Ein Bedarf ohne Szenario ist meist noch nicht echt genug.**
+
+### 4.2 Ausl&ouml;ser
+
+Was bringt ihn dazu, sofort nach einer L&uuml;sung zu suchen?
+
+- Von langen Dokumenten &uuml;berw&auml;ltigt und wei&szlig; nicht, wo man anfangen soll
+- Morgen muss Material abgegeben werden, heute erst gemerkt, dass das Format chaotisch ist
+- Gerade vom Chef nach dem Fortschritt gefragt und bemerkt, dass man nicht klar zusammengefasst hat
+- M&ouml;chte kontinuierlich aufzeichnen, aber handschriftlich, kopieren und zusammenstellen ist zu aufwendig
+
+Ausl&ouml;ser sind oft emotional aufgeladen. Diese Emotion ist wichtig, denn sie bestimmt, warum der Nutzer in diesem Moment handelt.
+
+### 4.3 Gew&uuml;nschter Fortschritt
+
+Er will nicht nur "eine Aktion ausf&uuml;hren", sondern sich in einen neuen Zustand bringen:
+
+- Von Chaos zu Klarheit
+- Von Angst zu Sicherheit
+- Von Aufschieben zu Aufbrechen
+- Von Ineffizienz zu Leichtigkeit
+- Von Unklarheit zu direkter Lieferung
+
+In diesem Schritt ist das Wort "Fortschritt" entscheidend. Denn viele kaufen nicht das Werkzeug, sondern die **Zustandsver&auml;nderung.**
+
+### 4.4 Aktuelle Alternativl&ouml;sung
+
+Wie macht er es ohne Ihr Produkt?
+
+- Manuell kopieren und einf&uuml;gen
+- Mit Excel oder Notizen k&auml;mpfen
+- Kollegen um Hilfe bitten
+- Aufschieben
+- Zwischen mehreren Tools hin- und herwechseln
+
+Wer die Alternative ist, das ist Ihre echte Wettbewerbsumgebung.
+
+### 4.5 Erfolgskriterium
+
+Wann gilt das Problem als wirklich gel&ouml;st?
+
+- Innerhalb von 10 Minuten ein teilbares Ergebnis erhalten
+- Ohne gr&ouml;&szlig;ere Nachbearbeitung an andere versenden k&ouml;nnen
+- Keine wichtigen Punkte &uuml;bersehen, keine Fehler machen, nichts vergessen
+- Beim ersten Mal wissen, wie es weitergeht
+
+Wenn Sie nicht einmal sagen k&ouml;nnen, "wie der Nutzer beurteilt, ob es sich gelohnt hat", ist die Richtung wahrscheinlich noch nicht ausreichend konvergiert.
+
+<a id="jtbd-formula"></a>
+## [5. Eine direkt anwendbare Ein-Satz-Formel](#top-jtbd)
+
+Wenn Sie eine Produktrichtung strukturieren m&ouml;chten, k&ouml;nnen Sie zun&auml;chst diese sehr praktische Formel verwenden:
+
+> Wenn __________, m&ouml;chte ich __________, um __________.
+> Aktuell kann ich __________ nur m&uuml;hsam nutzen, um dieses Ziel zu erreichen.
+
+Beispiel:
+
+> Wenn ich nach einem informationsreichen Projektmeeting fertig bin, m&ouml;chte ich schnell ein Protokoll mit Aufgaben, Verantwortlichen und Fristen erhalten, um sofort mein Team zu informieren und die Umsetzung voranzutreiben.
+> Aktuell kann ich nur durch eigene Erinnerung, Durchsuchen von Chat-Verl&auml;ufen und manuelle Zusammenstellung m&uuml;hsam dieses Ziel erreichen.
+
+Ein weiteres Beispiel:
+
+> Wenn ich mich auf eine neue Stelle bewerbe, m&ouml;chte ich schnell meine bisherigen Erfahrungen in eine Version umschreiben, die besser zur Stelle passt, um zuversichtlicher einen ansehnlichen Lebenslauf verschicken zu k&ouml;nnen.
+> Aktuell kann ich nur durch wiederholtes Kopieren des alten Lebenslaufs und manuelles &Auml;ndern der Formulierungen m&uuml;hsam dieses Ziel erreichen, und am Ende bin ich immer unsicherer.
+
+Wenn Sie einen Satz auf diese Klarheitsstufe bringen k&ouml;nnen, wird das darauf folgende Seitendesign, die Prompt-Gestaltung und die Priorisierung von Funktionen deutlich einfacher.
+
+## 6. Bei AI-Produkten: Drei Job-Ebenen besonders beachten
+
+Viele AI-Produkte wirken in Funktionsdemonstrationen beeindruckend, k&ouml;nnen Nutzer nach dem echten Launch jedoch nicht halten. Der h&auml;ufige Grund: Nur die oberfl&auml;chliche Aktion wurde gel&ouml;st, nicht der tiefere Job.
+
+Sie k&ouml;nnen einen Job grob in drei Ebenen unterteilen:
+
+### 6.1 Funktionsebene
+
+Was ist die oberfl&auml;chlichste Aufgabe?
+
+- Dokumente zusammenfassen
+- Texte umschreiben
+- Aufgaben extrahieren
+- Bilder generieren
+
+Das ist die Ebene, die Nutzer am leichtesten aussprechen.
+
+### 6.2 Emotionale Ebene
+
+Welche Unannehmlichkeit m&ouml;chte der Nutzer reduzieren oder welches Gef&uuml;hl gewinnen?
+
+- Nicht so in Panik sein wollen
+- Nicht unprofessionell wirken wollen
+- Nicht jedes Mal bei null anfangen wollen
+- Mehr Kontrolle haben wollen
+
+Viel Zahlungsbereitschaft h&auml;ngt tats&auml;chlich stark mit der emotionalen Ebene zusammen.
+
+### 6.3 Soziale Ebene
+
+Wie m&ouml;chte der Nutzer in den Augen anderer erscheinen?
+
+- Zuverl&auml;ssiger wirken
+- Im Team besser organisiert erscheinen
+- Vor Kunden professioneller auftreten
+- Auf Social-Media-Plattformen besser ausdr&uuml;cken k&ouml;nnen
+
+Wenn Sie nur die Funktionsebene bedienen, ist das Produkt leicht ersetzbar; wenn Sie gleichzeitig die emotionale und soziale Ebene verstehen, finden Sie eher einen wirklich klebrigen Wert.
+
+## 7. JTBD umgekehrt zur Produktrichtungsfilterung nutzen
+
+Manchmal haben Sie noch kein Produkt, sondern 3 bis 5 Ideen und wissen nicht, welche Sie umsetzen sollen. JTBD eignet sich hervorragend als Filter.
+
+Nehmen Sie jede Idee und stellen Sie sich 5 Fragen:
+
+1. Ist das Szenario, das dieser Idee entspricht, konkret genug?
+2. Nutzt der Nutzer bereits eine behelfsm&auml;&szlig;ige L&ouml;sung?
+3. Ist der Schmerz dieses Jobs stark genug oder h&auml;ufig genug?
+4. Wenn ich es gut mache, wird der Nutzer merklich "eine Zustandsverbesserung" sp&uuml;ren?
+5. Kann die erste Version nur um den wichtigsten Schritt dieses Jobs herum eine sehr kleine, aber n&uuml;tzliche Version sein?
+
+Wenn eine Richtung am Ende nur "klingt interessant" ist, aber keine klaren Ausl&ouml;ser, Alternativl&ouml;sungen und Erfolgskriterien formuliert werden kann, ist sie wahrscheinlich eher eine vage Inspiration als eine ausgereifte Richtung.
+
+## 8. Interview-Fragen, die Sie direkt verwenden k&ouml;nnen
+
+Viele beginnen eine Umfrage mit: "Welche Funktionen m&ouml;chten Sie?" Diese Frage liefert leicht oberfl&auml;chliche Antworten.
+
+JTBD eignet sich besser f&uuml;r folgende Fragen:
+
+- Wann hatten Sie das letzte Mal dieses Problem?
+- Was haben Sie damals getan und warum sind Sie h&auml;ngengeblieben?
+- Wie haben Sie es schlie&szlig;lich gel&ouml;st?
+- Was war in diesem Prozess das Nervigste, Langsamste oder Beunruhigendste?
+- Wenn es ein Tool g&auml;be, das Ihnen hilft: Welches Ergebnis w&uuml;rde Sie wirklich &uuml;berzeugen?
+- Welche Alternativmethoden haben Sie ausprobiert und warum waren sie nicht gut genug?
+
+Diese Frageweise hat einen Vorteil: Sie bringt das Gespr&auml;ch zur&uuml;ck zu echten Erlebnissen, anstatt bei imagin&auml;ren Pr&auml;ferenzen zu bleiben.
+
+## 9. AI nutzen, um JTBD-Analyse durchzuf&uuml;hren
+
+JTBD wurde nicht von AI erfunden, aber AI eignet sich hervorragend, um JTBD zu ordnen und zu destillieren.
+
+Wenn Sie beispielsweise 5 bis 10 Nutzer-Feedbacks gesammelt haben, k&ouml;nnen Sie diese dem Modell geben und es bitten, nach folgender Struktur zusammenzufassen:
+
+```text
+Bitte spiele die Rolle eines Produktforschungsassistenten.
+Ich werde dir einige Nutzer-Originalzitate geben. Bitte gib zun&auml;chst keine Funktionsvorschl&auml;ge,
+sondern ordne sie nach dem Jobs-to-Be-Done-Framework:
+
+1. In welchem Szenario befindet sich der Nutzer
+2. Was ist das ausl&ouml;sende Ereignis f&uuml;r seine Handlung
+3. Welchen Fortschritt m&ouml;chte er wirklich erreichen
+4. Was ist die aktuelle Alternativl&ouml;sung
+5. Welches Erfolgskriterium ist ihm am wichtigsten
+6. Welche Emotionsw&ouml;rter tauchen in diesen Feedbacks wiederholt auf
+
+Fasse abschlie&szlig;end diese Inhalte in 3 priorisierte JTBD-Hypothesen zusammen.
+```
+
+Wenn Sie bereits eine Idee haben, k&ouml;nnen Sie AI auch beim ersten Konvergierungsschritt unterst&uuml;tzen:
+
+```text
+Ich m&ouml;chte [Ihre Produktidee] entwickeln.
+Bitte gib mir nicht direkt eine Funktionsliste, sondern analysiere sie mit der Jobs-to-Be-Done-Methode:
+
+1. Welche konkreten Szenarien k&ouml;nnte dieses Produkt bedienen
+2. Was ist der Kern-Job, den der Nutzer in jedem Szenario erreichen will
+3. Welche bestehenden Alternativl&ouml;sungen gibt es
+4. Welcher Job eignet sich am besten als MVP-Startpunkt und warum
+5. Formuliere den empfohlenen Job als klaren JTBD-Satz
+```
+
+Der Vorteil: Sie werden nicht sofort von AI zu "50 Funktionen brainstormen" gedr&auml;ngt, sondern kl&auml;ren zun&auml;chst die Richtung.
+
+## 10. Die 4 h&auml;ufigsten Fehler von Einsteigern
+
+### 10.1 Den Job als Funktionsnamen formulieren
+
+"AI-Zusammenfassung", "Intelligente Kategorisierung", "Automatische Generierung" sind keine Jobs, sondern nur m&ouml;gliche Implementierungsweisen.
+
+### 10.2 Die Zielgruppe zu weit formulieren
+
+"Alle B&uuml;roangestellten", "Alle Studierenden", "Alle Gr&uuml;nder" sind meist zu allgemein. Je allgemeiner, desto schwerer erkennen Sie echte Szenarien.
+
+### 10.3 Nur h&ouml;ren, was Nutzer sagen, nicht beobachten, was Nutzer tun
+
+Nutzer beschreiben, was sie wollen, aber ihre wahren Priorit&auml;ten verstecken sich oft darin, wie sie aktuell improvisieren.
+
+### 10.4 Von Anfang an eine komplette Plattform bauen wollen
+
+Die richtige Herangehensweise an JTBD ist meist nicht "Ich baue eine All-in-One-Plattform", sondern zun&auml;chst den wichtigsten Schritt in einem Szenario ins Visier zu nehmen und ihn sehr handlich zu machen.
+
+## 11. Zusammenfassung
+
+Der wertvollste Beitrag von Jobs to Be Done besteht nicht darin, Ihnen ein neues Schlagwort zu geben, sondern Ihnen zu helfen, die Perspektive zu wechseln: **Nicht auf Produktfunktionen starren, sondern darauf, was Nutzer voranbringen m&ouml;chten.**
+
+Wenn Sie anfangen, sich wiederholt zu fragen:
+
+- In welchem Szenario stellen Nutzer dieses Produkt ein
+- Wo genau h&auml;ngen sie fest
+- Mit welcher Methode k&auml;mpfen sie sich aktuell durch
+- Wie &auml;ndert sich ihr Zustand, wenn das Problem gel&ouml;st ist
+
+werden Sie feststellen, dass viele urspr&uuml;nglich vage Ideen pl&ouml;tzlich klar werden und viele urspr&uuml;nglich beeindruckende Funktionen pl&ouml;tzlich weniger wichtig sind.
+
+Bei der Produktentwicklung, besonders bei AI-Produkten, ist das Schlimmste, sich von Anfang an in der Pr&auml;sentation von F&auml;higkeiten zu verlieren. JTBD hilft Ihnen, die Aufmerksamkeit auf das wirklich Wichtige zur&uuml;ckzulenken: **Warum Nutzer Sie brauchen und welchen Fortschritt Sie ihnen erm&ouml;glichen.**
+
+<a id="jtbd-ai"></a>
+## [12. Wie Sie AI nutzen k&ouml;nnen, um JTBD zu praktizieren](#top-jtbd)
+
+JTBD wurde nicht von AI erfunden, aber AI eignet sich hervorragend als Forschungsassistent, Ordnungsassistent und Gegen&uuml;ber in dieser Methode. Der Schl&uuml;ssel: **AI beim Ordnen und Erweitern helfen lassen, nicht Nutzer f&uuml;r Sie erfinden lassen.**
+
+Sie k&ouml;nnen es so einsetzen:
+
+### 12.1 AI helfen lassen, vage Ideen in JTBD-Hypothesen umzuschreiben
+
+Wenn Sie nur eine vage Beschreibung im Kopf haben, wie "Ich m&ouml;chte ein Tool entwickeln, das Studierenden bei der Praktikumssuche hilft", k&ouml;nnen Sie zun&auml;chst AI bitten, es in m&ouml;gliche Jobs aufzuteilen:
+
+```text
+Ich habe eine vage Produktidee: [Ihre Idee]
+Bitte gib mir nicht direkt eine Funktionsliste, sondern analysiere sie mit der Jobs-to-Be-Done-Methode:
+1. Welche konkreten Szenarien k&ouml;nnten entsprechen
+2. Welchen Fortschritt wollen Nutzer in jedem Szenario wirklich erreichen
+3. Welche Alternativl&ouml;sungen k&ouml;nnten es geben
+4. Welcher Job eignet sich am besten f&uuml;r ein MVP
+Formuliere abschlie&szlig;end jeden Job als klaren JTBD-Satz.
+```
+
+Sie k&ouml;nnen die Eingabe auch sehr anf&auml;ngerhaft formulieren:
+
+```text
+Ich m&ouml;chte etwas entwickeln, das Studierenden bei der Praktikumssuche hilft.
+Ich kann noch nicht genau sagen, was es sein soll. Hilf mir herauszufinden, was Nutzer wirklich erreichen wollen.
+```
+
+AI k&ouml;nnte folgende n&uuml;tzliche Ausgabe liefern:
+
+```text
+M&ouml;gliche JTBD-Richtungen:
+
+1. Wenn ich mich zum ersten Mal auf ein Praktikum bewerbe, m&ouml;chte ich schnell wissen, welche Unterlagen ich zuerst vorbereiten sollte,
+damit ich nicht wegen Informationschaos meine Bewerbung aufschiebe.
+
+2. Wenn ich eine Praktikumsstelle sehe, m&ouml;chte ich schnell beurteilen k&ouml;nnen, ob es sich lohnt, mich zu bewerben,
+damit ich nicht zu viel Zeit auf ungeeignete Stellen verschwende.
+
+3. Wenn ich mit der Bewerbung beginne, m&ouml;chte ich meinen bestehenden Lebenslauf in eine Version umschreiben, die besser zur Stelle passt,
+damit ich schneller abschicken und die Erfolgsquote erh&ouml;hen kann.
+```
+
+Der Wert dieser Ausgabe liegt darin, Ihre urspr&uuml;nglich sehr allgemeine Idee in mehrere richtungen&auml;here Szenarien aufzuteilen.
+
+### 12.2 AI beim Ordnen von Interview-Originalzitaten helfen lassen
+
+Wenn Sie bereits mehrere Nutzer-Interviews durchgef&uuml;hrt haben, k&ouml;nnen Sie die Interviewaufzeichnungen an AI &uuml;bergeben und sie bitten, wiederkehrende Szenarien, Ausl&ouml;ser, Alternativl&ouml;sungen und Erfolgskriterien zu destillieren.
+
+```text
+Hier sind die Originalzitate von 5 Nutzern.
+Bitte gib zun&auml;chst keine L&ouml;sungsvorschl&auml;ge, sondern ordne sie nach dem JTBD-Framework:
+1. In welchem Szenario befindet sich der Nutzer
+2. Was ist das ausl&ouml;sende Ereignis f&uuml;r seine Handlung
+3. Welchen Fortschritt m&ouml;chte er wirklich erreichen
+4. Was ist die aktuelle Alternativl&ouml;sung
+5. Welches Erfolgskriterium ist ihm am wichtigsten
+6. Welche Informationen tauchen bei mehreren Nutzern wiederholt auf
+Fasse abschlie&szlig;end in 3 priorisierte JTBD-Hypothesen zusammen.
+```
+
+Eine sehr einfache Eingabe k&ouml;nnte so aussehen:
+
+```text
+Ich habe 3 Personen gefragt, sie sagten ungef&auml;hr Folgendes:
+
+1. Jedes Mal, wenn ich mich auf ein Praktikum bewerbe, muss ich meinen Lebenslauf neu anpassen. Das ist extrem nervig.
+2. Was ich eigentlich am meisten f&uuml;rchte, ist, nicht zu wissen, ob ich es richtig mache.
+3. Ich lasse derzeit &auml;ltere Kommilitonen gegenlesen, aber es ist mir peinlich, st&auml;ndig um Gef&auml;lligkeiten zu bitten.
+
+Hilf mir herauszufinden, was sie wirklich erreichen wollen.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+Zusammenfassung:
+
+- Gemeinsames Szenario: Vor der Praktikumsbewerbung muss der Lebenslauf bearbeitet werden
+- Gemeinsame Schwierigkeit: Nicht wissen, wie man es "gut genug" macht
+- Aktuelle Alternativl&ouml;sung: &Auml;ltere Kommilitonen bitten, selbstst&auml;ndig wiederholt &uuml;berarbeiten
+- M&ouml;glicher JTBD:
+  Wenn ich mich auf ein Praktikum bewerbe, m&ouml;chte ich schneller beurteilen k&ouml;nnen, ob mein Lebenslauf abschickbereit ist,
+  damit ich nicht st&auml;ndig im "Noch ein bisschen &uuml;berarbeiten" festh&auml;nge und ihn nie verschicke.
+```
+
+Diese Ausgabe ist sehr n&uuml;tzlich, denn sie hilft, aus verstreuten Originalzitaten etwas herauszudestillieren, das eher einem "Bedarf" entspricht.
+
+### 12.3 AI eine leichte Webrecherche durchf&uuml;hren lassen
+
+Bevor Sie mit umfangreichen Interviews beginnen, k&ouml;nnen Sie AI zun&auml;chst einen leichten Scan externer Informationen durchf&uuml;hren lassen:
+
+- Wie wird in &ouml;ffentlichen Foren oder Communitys &uuml;ber dieses Problem geklagt
+- Welche Probleme l&ouml;sen bestehende Produkte haupts&auml;chlich
+- Was ist die h&auml;ufigste Alternativl&ouml;sung der Nutzer
+- Was wird in Bewertungen am meisten gelobt und kritisiert
+
+Diese Recherche kann echte Nutzer-Interviews nicht ersetzen, eignet sich aber gut als Aufw&auml;rm&uuml;bung in der Discover-Phase, um zun&auml;chst eine Problemlandkarte zu erstellen.
+
+Ein einfacher Prompt k&ouml;nnte lauten:
+
+```text
+Bitte recherchiere f&uuml;r mich:
+"Was sind die h&auml;ufigsten Schmerzpunkte beim Umschreiben von Lebensl&auml;ufen und Bewerben f&uuml;r Praktika bei Studierenden?"
+Konzentriere dich auf das, was Leute in &ouml;ffentlichen Foren, Erfahrungsberichten und Bewerbungs-Communitys selbst sagen.
+Fasse es in 5 h&auml;ufigsten Problemen zusammen.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+H&auml;ufigste Schmerzpunkte:
+
+1. Nicht wissen, welche Erfahrungen im Lebenslauf stehen sollten
+2. Nicht wissen, wie man f&uuml;r verschiedene Stellen anpasst
+3. Nach vielen &Uuml;berarbeitungen immer noch unsicher, ob es gut genug ist
+4. Keine zuverl&auml;ssige Person zum Gegenlesen finden
+5. Komplexer Bewerbungsprozess, der zum Aufschieben verleitet
+```
+
+Diese Art von Ausgabe kann nicht als endg&uuml;ltige Schlussfolgerung dienen, hilft aber zu entscheiden, welche Art von Problem priorisiert interviewt werden sollte.
+
+### 12.4 AI als "Gegenspieler" fungieren lassen
+
+Oft sind wir zu sehr mit unseren eigenen Ideen verbunden. Sie k&ouml;nnen AI gezielt als kritischen Gegen&uuml;ber einsetzen, der Sie zwingt, das Problem klarer zu formulieren:
+
+```text
+Bitte spiele die Rolle eines sehr strengen Produktforschungsberaters.
+Hier ist meine JTBD-Hypothese: [Ihre Hypothese]
+Kritisiere sie aus folgenden Perspektiven:
+1. Ist dieses Szenario zu weit gefasst
+2. Wurde dieser Job als Funktion statt als echter Fortschritt formuliert
+3. Ist die Alternativl&ouml;sung zu schwach
+4. Ist das Erfolgskriterium unklar
+5. Was ist das gr&ouml;&szlig;te Risiko, das bei dieser Hypothese validiert werden muss
+```
+
+Der Vorteil: Sie erkennen schneller, ob Sie sich auf den Bedarf oder nur auf Ihre bevorzugte L&ouml;sung konzentrieren.
+
+## Assignments
+
+Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
+
+1. W&auml;hlen Sie eine Produktidee, an die Sie k&uuml;rzlich gedacht haben, und formulieren Sie sie mit einer JTBD-Formel klar
+2. Erg&auml;nzen Sie diese Idee mit den 5 Elementen: Szenario, Ausl&ouml;ser, Fortschritt, Alternativl&ouml;sung, Erfolgskriterium
+3. Finden Sie 3 potenzielle Nutzer und fragen Sie mindestens einmal: "Wann hatten Sie das letzte Mal dieses Problem?"
+4. &Uuml;bergeben Sie die Interview-Originalzitate an AI und fassen Sie sie in 3 priorisierte JTBD-Hypothesen zusammen
+
+## Weiterf&uuml;hrende Literatur
+
+- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
+- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
+- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
+- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
diff --git a/docs/de-de/stage-1/appendix-mom-test/index.md b/docs/de-de/stage-1/appendix-mom-test/index.md
new file mode 100644
index 0000000..6c66b6a
--- /dev/null
+++ b/docs/de-de/stage-1/appendix-mom-test/index.md
@@ -0,0 +1,589 @@
+---
+title: 'The Mom Test: Wie man Bed&uuml;rfnisse durch Nutzerinterviews validiert'
+description: 'Ein Einf&uuml;hrungsartikel zu The Mom Test f&uuml;r Einsteiger. Lernen Sie, h&ouml;fliches Feedback zu vermeiden und Nutzerinterviews auf der Basis echten Verhaltens, konkreter Fakten und bestehender Probleme durchzuf&uuml;hren.'
+---
+
+<script setup>
+const duration = 'Etwa <strong>1,5 Stunden</strong>'
+</script>
+
+# The Mom Test: Wie man Bed&uuml;rfnisse durch Nutzerinterviews validiert
+
+<a id="top-mom"></a>
+
+## Kapitel&uuml;bersicht
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Nutzerinterviews', 'Bedarfsvalidierung', 'Nutzerforschung', 'Produktrecherche']"
+  coreOutput="1 Satz Interview-Fragen, die echte Informationen zutage f&ouml;rdern"
+  expectedOutput="Nutzerh&ouml;flichkeit nicht mehr als Validierung betrachten und stattdessen echtes Verhalten zur Richtungsbewertung nutzen"
+>
+
+Viele denken beim ersten Mal, wenn sie eine Produktrecherche durchf&uuml;hren, das Wichtigste sei "mit jemandem zu sprechen". Also fragen sie Freunde, Kollegen oder sogar Familienmitglieder:
+
+- Was h&auml;ltst du von meiner Idee?
+- W&uuml;rdest du ein solches Produkt nutzen, wenn es g&auml;be?
+- Klingt diese Funktion nicht ganz gut?
+
+Die anderen geben dann oft sehr ermutigendes Feedback:
+
+- Das ist toll
+- Klingt sehr n&uuml;tzlich
+- Ich denke, du k&ouml;nntest es ausprobieren
+
+Das Problem ist, dass diese Antworten Ihnen in der Regel nicht bei der Entscheidungsfindung helfen. Sie sind eher H&ouml;flichkeit, Unterst&uuml;tzung oder eine nat&uuml;rliche Reaktion, um Ihnen nicht den Wind aus den Segeln zu nehmen. Sie denken, Sie h&auml;tten "Marktvalidierung" erhalten, aber tats&auml;chlich haben Sie nur eine Reihe von schwer verwertbaren Trostpflastern gesammelt.
+
+The Mom Test wurde genau entwickelt, um dieses Problem zu l&ouml;sen. Es erinnert uns: **Nutzer wollen Sie nicht absichtlich t&auml;uschen, sondern Ihre Frageweise f&uuml;hrt sie nat&uuml;rlich zu sch&ouml;nen, aber nutzlosen Antworten.**
+
+</ChapterIntroduction>
+
+::: info Minimales SOP
+**Ziel**: Nach dem Lesen wissen Sie besser, wie Sie mit Nutzern sprechen, ohne nur "klingt gut" zu h&ouml;ren, sondern wirklich Informationen zu erhalten, die Ihnen bei der Richtungsbewertung helfen.
+
+**Aktionspunkte**: &Auml;ndern Sie Ihre urspr&uuml;nglich geplanten 5 Fragen und priorisieren Sie "Wann war das letzte Mal" und "Wie haben Sie das damals gel&ouml;st".
+
+**Ergebnis**: Sie k&ouml;nnen leichter unterscheiden, was Meinungen sind und was wirklich evidenzbasierte Erkenntnisse.
+
+**Stichwortspr&uuml;nge**: [Was ist The Mom Test](#mom-what) &middot; [Drei Kernprinzipien](#mom-principles) &middot; [Wie AI Ihnen hilft](#mom-ai)
+:::
+
+## Was Sie lernen werden
+
+1. Welches Problem The Mom Test eigentlich l&ouml;st und warum viele "Nutzerbefragungen" keine echten Informationen liefern
+2. Die wichtigsten Prinzipien dieser Methode: Weniger nach Meinungen fragen, mehr nach Verhalten; weniger nach Hypothesen, mehr nach Fakten
+3. Wie man eine Frage, die leicht zu falsch-positivem Feedback f&uuml;hrt, in eine wertvollere Interview-Frage umschreibt
+4. Wie man The Mom Test mit JTBD, Bedarfsvalidierung und MVP-Bewertung verkn&uuml;pft
+
+<a id="mom-what"></a>
+## [1. Was ist The Mom Test &uuml;berhaupt?](#top-mom)
+
+The Mom Test stammt aus dem gleichnamigen Buch von Rob Fitzpatrick. Der Name klingt wie ein Witz, trifft aber den Nagel auf den Kopf:
+
+**Selbst Ihre Mutter wird Ihnen nur schwer direkt sagen: "Das ist eine schlechte Idee."**
+
+Der Grund ist nicht, dass sie nicht ehrlich ist, sondern:
+
+- Sie will Sie nicht verletzen
+- Sie wird Sie unbewusst ermutigen
+- Sie neigt dazu, in Ihrem Ausdruck zu antworten
+
+Nicht nur M&uuml;tter, sondern auch Freunde, Kollegen, ehemalige Mitsch&uuml;ler und sogar viele Fremde geben oft &auml;hnliches "positives Feedback", wenn sie mit Ihrer Produktidee konfrontiert werden. Das bedeutet nicht, dass der Bedarf wirklich existiert, sondern nur, dass Sie die Frage so formuliert haben, dass sie leicht eine sch&ouml;ne Antwort provozieren.
+
+Also geht es bei The Mom Test nie um "Frag deine Mama nicht", sondern:
+
+**Stellen Sie Ihre Fragen nicht so, dass jeder Ihnen zustimmt.**
+
+Die Methode will Ihnen beibringen, wie Sie durch Gespr&auml;che Informationen erhalten, die n&auml;her an echten Bed&uuml;rfnissen sind, anstatt eine Sammlung von sich gut anf&uuml;hlenden Kommentaren zu sammeln.
+
+## 2. Welches Kernproblem es l&ouml;st
+
+The Mom Test l&ouml;st haupts&auml;chlich eine sehr h&auml;ufige kognitive T&auml;uschung:
+
+**H&ouml;fliches positives Feedback als echten Bedarf zu betrachten.**
+
+Wenn Sie fragen:
+
+- Was h&auml;ltst du von dieser App-Idee?
+- W&uuml;rdest du ein AI-Tool nutzen, das dir beim Schreiben von Lebensl&auml;ufen hilft?
+- Ist diese Funktion nicht sehr wertvoll?
+
+Diese Fragen haben gemeinsame Merkmale:
+
+- Sie fragen nach "Meinungen"
+- Sie enthalten eine leichte Andeutung
+- Sie reden &uuml;ber eine Zukunft, die noch nicht eingetreten ist
+
+Und die Antworten auf "Meinungen" und "zuk&uuml;nftige Hypothesen" sind meist instabil. Viele Menschen &uuml;bersch&auml;tzen ihr Interesse, ihre Ausf&uuml;hrungsbereitschaft und ihre zuk&uuml;nftige Zahlungsbereitschaft.
+
+The Mom Test erinnert Sie daran:
+
+- Vertrauen Sie nicht zu sehr auf die Bewertungen anderer zu Ihrer Idee
+- Vertrauen Sie nicht zu sehr auf die Vorhersagen anderer zu ihrem zuk&uuml;nftigen Verhalten
+- Kehren Sie m&ouml;glichst zu dem zur&uuml;ck, was Nutzer bereits getan haben
+
+Denn im Vergleich zu "W&uuml;rden Sie es nutzen" ist "Wie haben Sie das letzte Mal damit umgegangen" oft n&auml;her an der Wahrheit.
+
+<a id="mom-principles"></a>
+## [3. Die drei wichtigsten Prinzipien](#top-mom)
+
+Wenn Sie sich nur das Wichtigste merken m&ouml;chten, starten Sie mit diesen drei Prinzipien.
+
+### 3.1 Weniger &uuml;ber Ihre Idee reden, mehr &uuml;ber die echten Erfahrungen des Nutzers
+
+In vielen ineffektiven Interviews wird zu Beginn die eigene L&ouml;sung vorgestellt, man erz&auml;hlt, wie aufregend sie ist und welches Produkt man entwickeln will. Das Problem: Sobald Sie zu viel erz&auml;hlen, schaltet der andere leicht in den "Unterst&uuml;tzen"- und "Ermutigen"-Modus.
+
+Besser ist es, den Schwerpunkt auf die Erfahrungen des Gespr&auml;chspartners zu legen:
+
+- Wann hatten Sie das letzte Mal dieses Problem?
+- Was haben Sie damals getan?
+- Wie haben Sie es schlie&szlig;lich gel&ouml;st?
+- Welcher Schritt war am m&uuml;hsamsten?
+
+Diese Fragen f&uuml;hren das Gespr&auml;ch nat&uuml;rlicher zur&uuml;ck zur Realit&auml;t, anstatt bei imagin&auml;ren Pr&auml;ferenzen zu bleiben.
+
+### 3.2 Weniger nach abstrakten Meinungen fragen, mehr nach konkreten Fakten
+
+"Ich finde diese Funktion gut", "Klingt gut", "Scheint n&uuml;tzlich zu sein" &ndash; diese &Auml;u&szlig;erungen sind zu abstrakt, um Produktentscheidungen zu leiten.
+
+Wertvollere Informationen sehen eher so aus:
+
+- Letzte Woche habe ich daf&uuml;r 2 Stunden verschwendet
+- Aktuell k&auml;mpfe ich mit Excel und WeChat
+- Letzten Monat habe ich bereits f&uuml;r ein &auml;hnliches Tool bezahlt
+- Meine gr&ouml;&szlig;te Angst ist es, falsch zu machen, nicht langsam zu sein
+
+Das sind die Informationen, die Ihnen wirklich helfen, Problemst&auml;rke, H&auml;ufigkeit und Zahlungsbereitschaft zu beurteilen.
+
+### 3.3 Weniger fragen, welche L&ouml;sung der Nutzer will, mehr beobachten, wie er aktuell l&ouml;st
+
+Nutzer sind gut darin, ihre Schwierigkeiten zu beschreiben, aber nicht unbedingt darin, L&ouml;sungen zu entwerfen.
+
+Wenn Sie fragen:
+
+- M&ouml;chten Sie ein AI-Tool, das das automatisch f&uuml;r Sie erledigt?
+- Denken Sie, eine intelligente Funktion w&auml;re hilfreich?
+
+Erhalten Sie meist nur eine vage Haltung zu einer L&ouml;sung, nicht den Bedarf selbst.
+
+Bessere Fragen:
+
+- Welche Methode nutzen Sie aktuell, um dieses Problem zu l&ouml;sen?
+- Warum haben Sie sich f&uuml;r diese Vorgehensweise entschieden?
+- Was ist daran nicht gut genug?
+
+Die bestehenden Alternativl&ouml;sungen zu verstehen, ist oft wichtiger als direkt zu fragen, "was wollen Sie".
+
+## 4. Warum Menschen Ihnen immer sch&ouml;ne, aber nutzlose Antworten geben
+
+Wenn Sie dies verstehen, werden Sie bei Interviews weniger Fehleinsch&auml;tzungen machen.
+
+### 4.1 Menschen sind unbewusst h&ouml;flich
+
+Besonders wenn Ihr Gespr&auml;chspartner eine Beziehung zu Ihnen hat, wird er nur schwer direkt sagen:
+
+- Diese Richtung klingt nicht vielversprechend
+- Ich w&uuml;rde es &uuml;berhaupt nicht nutzen
+- Dieses Problem ist f&uuml;r mich nicht so wichtig
+
+Er wird eher sagen: "Ganz gut", "Man k&ouml;nnte es mal probieren".
+
+### 4.2 Menschen &uuml;bersch&auml;tzen ihr zuk&uuml;nftiges Ich
+
+Viele glauben ernsthaft, sie w&uuml;rden in Zukunft:
+
+- Disziplinierter sein
+- Lernbereiter sein
+- Zahlungsbereiter sein
+- Offener f&uuml;r neue Tools sein
+
+Also bedeutet "Ich w&uuml;rde es nutzen, wenn es g&auml;be" oft nicht, dass sie es wirklich tun werden.
+
+### 4.3 Ihre Frageweise selbst f&uuml;hrt die Antwort
+
+Wenn Sie fragen:
+
+- Ist meine Idee nicht ganz gut?
+- Ist diese Funktion f&uuml;r Sie nicht sehr hilfreich?
+
+Haben Sie heimlich die "richtige Antwort" in die Frage eingebaut.
+
+Deshalb betont The Mom Test besonders: **Machen Sie das Interview nicht zu einer Suche nach Best&auml;tigung.**
+
+## 5. Direktvergleich: Welche Fragen leicht ins Leere f&uuml;hren, welche wertvoller sind
+
+Diese Gegen&uuml;berstellung wird fast jeder Einsteiger nutzen.
+
+| Leider nutzlose Fragen | Wertvollere Fragen |
+| --- | --- |
+| Was h&auml;ltst du von meiner Idee? | Wann hattest du das letzte Mal dieses Problem? |
+| W&uuml;rdest du dieses Produkt nutzen? | Wie l&ouml;st du das aktuell? |
+| W&uuml;rdest du f&uuml;r diese Funktion bezahlen? | Hast du letztes Mal f&uuml;r dieses Problem Geld ausgegeben? Wof&uuml;r? |
+| Findest du diese Funktion wichtig? | Welcher Schritt in diesem Prozess ist am nervigsten, langsamsten oder beunruhigendsten? |
+| M&ouml;chtest du ein AI-Tool, das das automatisch macht? | Warum hast du bisher noch keine bessere L&ouml;sung gefunden? |
+
+Das Wichtigste an dieser Tabelle ist nicht der konkrete Satz, sondern die Richtung dahinter:
+
+- Von Meinungen zu Fakten
+- Von der Zukunft zur Vergangenheit
+- Von Ihrer L&ouml;sung zum Problem des Nutzers
+
+## 6. Eine Interview-Struktur, die Einsteiger sofort nutzen k&ouml;nnen
+
+Wenn Sie jetzt sofort jemanden finden und sprechen m&ouml;chten, k&ouml;nnen Sie in dieser Reihenfolge vorgehen.
+
+### 6.1 Er&ouml;ffnung: Erkl&auml;ren Sie, dass Sie lernen, nicht verkaufen
+
+Zum Beispiel:
+
+> Ich erforsche gerade, wie Leute mit solchen Problemen umgehen. Ich m&ouml;chte die reale Situation verstehen, nicht etwas verkaufen.
+
+Diese Formulierung macht es dem Gespr&auml;chspartner leichter, die psychologische Last "Ich muss positives Feedback geben" abzulegen.
+
+### 6.2 Mit dem letzten echten Erlebnis beginnen
+
+Beginnen Sie mit Fragen wie:
+
+- Wann hatten Sie das letzte Mal dieses Problem?
+- Was ist damals passiert?
+- Was war Ihre erste Reaktion?
+
+Sobald das Gespr&auml;ch in konkrete Ereignisse eintritt, steigt die Informationsqualit&auml;t meist deutlich.
+
+### 6.3 Weiter nach Verhalten, Kosten und Alternativl&ouml;sungen fragen
+
+Weiterfragen:
+
+- Welche Methode nutzen Sie aktuell zur L&ouml;sung?
+- Was ist das Unangenehmste an dieser Methode?
+- Wie viel Zeit, Geld oder Energie haben Sie daf&uuml;r aufgewendet?
+- Haben Sie andere Methoden ausprobiert? Warum nicht weiter verwendet?
+
+### 6.4 Erst am Ende Schmerzintensit&auml;t und Priorit&auml;t bewerten
+
+Sie m&uuml;ssen nicht direkt nach "Tut es weh?" fragen. Sie k&ouml;nnen aus Details beurteilen:
+
+- Tritt es h&auml;ufig auf
+* Handelt er bereits aktiv, um Abhilfe zu schaffen
+* Ist er bereits bereit, daf&uuml;r Kosten auf sich zu nehmen
+* Zeigt er beim Erz&auml;hlen sp&uuml;rbare Emotionen
+
+All das ist n&uuml;tzlicher als die Frage "Ist das Ihr Schmerzpunkt?".
+
+## 7. Ein vollst&auml;ndigeres Beispiel
+
+Angenommen, Sie m&ouml;chten ein Produkt entwickeln: "AI hilft Studierenden beim Umschreiben von Lebensl&auml;ufen".
+
+### Falsche Frageweise
+
+Sie fragen einen Kommilitonen:
+
+> Ich m&ouml;chte ein AI-Lebenslauf-Optimierungstool entwickeln. Was h&auml;ltst du davon?
+> Wenn es Lebensl&auml;ufe automatisch an Stellen anpassen k&ouml;nnte, w&uuml;rdest du es nutzen?
+
+In diesem Fall wird der andere wahrscheinlich sagen:
+
+- Klingt gut
+- Ich denke, das w&auml;re n&uuml;tzlich
+* Wenn es kostenlos ist, w&uuml;rde ich es ausprobieren
+
+Diese Antworten helfen Ihnen kaum zu beurteilen, wie stark der Bedarf wirklich ist.
+
+### Bessere Frageweise
+
+Sie k&ouml;nnten es so formulieren:
+
+> Wann hast du zuletzt deinen Lebenslauf ge&auml;ndert?
+> Warum musstest du ihn &auml;ndern?
+> Wie hast du ihn ge&auml;ndert?
+> Welcher Schritt war am schwierigsten?
+> Hast du jemals jemanden gebeten, deinen Lebenslauf gegenzulesen?
+> Hast du jemals Zeit oder viel Geld f&uuml;r deinen Lebenslauf aufgewendet?
+
+Durch diese Fragen k&ouml;nnten Sie folgende Informationen erhalten:
+
+- Viele k&ouml;nnen nicht schreiben, sondern wissen nicht, wie sie ihn auf verschiedene Stellen anpassen sollen
+* Ihr gr&ouml;&szlig;ter Schmerz ist nicht das Layout, sondern "nicht zu wissen, welche Erfahrungen erw&auml;hnenswert sind"
+* Sie schieben auf, nicht aus Faulheit, sondern weil jeder Lebenslauf-&Auml;nderungsprozess extrem ersch&ouml;pfend ist
+* Sie behelfen sich bereits mit Ratschl&auml;gen von &auml;lteren Kommilitonen, Vorlagen-Websites, AI-Tools und Freunden als Gegenleser
+
+Jetzt sind Sie dem echten Problem viel n&auml;her.
+
+## 8. Wie The Mom Test und JTBD zusammenarbeiten
+
+Wenn JTBD Ihnen hilft zu erkennen, "welchen Fortschritt Nutzer erzielen wollen", lehrt The Mom Test Sie eher:
+
+**Wie Sie durch Interviews best&auml;tigen, ob dieser Job wirklich existiert.**
+
+Sie k&ouml;nnen beide Methoden nahtlos verkn&uuml;pfen:
+
+1. Zun&auml;chst mit JTBD einen Job hypothetisieren
+2. Dann mit The Mom Test bei Nutzern nach ihren letzten echten Erlebnissen fragen
+3. Pr&uuml;fen, ob dieser Job wirklich h&auml;ufig, echt und priorisierbar ist
+
+Wenn Ihre JTBD-Hypothese beispielsweise lautet:
+
+> Wenn ich mich auf ein Praktikum bewerbe, m&ouml;chte ich meinen alten Lebenslauf schnell in eine Version umschreiben, die zur Stelle passt, um die Bewerbung so bald wie m&ouml;glich abzuschicken.
+
+K&ouml;nnen Sie mit The Mom Test-Fragen validieren:
+
+- Wann hast du dich zuletzt beworben?
+- Wie hast du damals deinen Lebenslauf ge&auml;ndert?
+- Welcher Abschnitt war am schwersten zu schreiben?
+- Wie beurteilst du nach der &Auml;nderung, ob er gut genug ist?
+
+So verbinden sich die Methoden:
+
+- JTBD hilft Ihnen, die Bedarfshypothese zu definieren
+- The Mom Test hilft Ihnen, die Hypothese durch Interviews zu validieren
+
+## 9. Die h&auml;ufigsten Fehler bei Nutzerinterviews
+
+### 9.1 Das Interview zur Produktvorstellung machen
+
+Wenn Sie zu viel &uuml;ber Ihre eigene Idee erz&auml;hlen, f&auml;ngt der andere leicht an, Ihnen zuzustimmen, anstatt Ihnen die reale Situation zu schildern.
+
+### 9.2 Nur Bekannte interviewen
+
+Bekannte k&ouml;nnen zwar sprechen, neigen aber eher zur Ermutigung. Sie m&uuml;ssen mindestens einige Personen einbeziehen, die n&auml;her an echten Nutzern sind.
+
+### 9.3 Zu fr&uuml;h nach Funktionen fragen
+
+Wenn Sie das Problem noch nicht verstanden haben und bereits nach Buttons, Oberfl&auml;chen und Funktionsdetails fragen, betreten Sie zu fr&uuml;h die L&ouml;sungsphase.
+
+### 9.4 Ein "Ich w&uuml;rde es nutzen" als Validierungsergebnis betrachten
+
+Interviews helfen Ihnen h&ouml;chstens bei der Richtungsbewertung, sie sind keine abgeschlossene Validierung. Echte Validierung erfordert letztlich, dass Nutzer bereit sind, echte Kosten auf sich zu nehmen: Zeit, Wechselaufwand, Testverhalten oder sogar Bezahlung.
+
+### 9.5 Nach dem Interview nicht zusammenfassen
+
+Wenn Sie nach dem Gespr&auml;ch die Informationen einfach liegen lassen, werden sie schnell zu vagen Eindr&uuml;cken. Am besten sofort zusammenfassen:
+
+- H&auml;ufig erw&auml;hnte Probleme
+- Emotionsw&ouml;rter aus Nutzerzitaten
+- Aktuelle Alternativl&ouml;sungen
+- Bereits aufgewendete Kosten
+- Ihre eigenen neuen Einsch&auml;tzungen
+
+## 10. Eine Fragenliste, die Sie direkt kopieren k&ouml;nnen
+
+Wenn Sie schnell starten m&ouml;chten, hier eine ausreichend universelle Frageliste.
+
+### Er&ouml;ffnungsfragen
+
+- Wann hatten Sie das letzte Mal dieses Problem?
+- Was genau ist damals passiert?
+
+### Verhaltensfragen
+
+- Wie haben Sie es damals gel&ouml;st?
+- Warum haben Sie sich f&uuml;r diese Vorgehensweise entschieden?
+
+### Kostenfragen
+
+- Wie viel Zeit oder Energie kostet Sie diese Angelegenheit normalerweise?
+- Haben Sie jemals Geld ausgegeben, um es zu l&ouml;sen?
+
+### Alternativl&ouml;sungsfragen
+
+- Haben Sie andere Tools oder Methoden ausprobiert?
+- Warum haben Sie sie nicht weiter verwendet?
+
+### Abschlussfragen
+
+- Wenn Sie dieses Problem in Zukunft wieder haben: Wie sollte die ideale L&ouml;sung Ihrer Meinung nach aussehen?
+
+Beachten Sie: Diese Abschlussfrage k&ouml;nnte gestellt werden, aber am besten sp&auml;ter im Interview. Denn vorher ben&ouml;tigen Sie eher Fakten als W&uuml;nsche.
+
+## 11. Zusammenfassung
+
+Der wichtigste Beitrag von The Mom Test ist nicht, Ihnen eine "bessere Gespr&auml;chsf&uuml;hrung" beizubringen, sondern Ihnen eine klarere Urteilsmethode zu geben:
+
+- Nicht zu schnell das Lob anderer f&uuml;r Ihre Idee glauben
+- "Ich w&uuml;rde es nutzen, wenn es g&auml;be" nicht als echten Bedarf betrachten
+- Das Interview nicht zu einer Suche nach Best&auml;tigung machen
+
+Echt wertvolle Interviews sollten sich auf Folgendes konzentrieren:
+
+- Das letzte echte Erlebnis des Nutzers
+- Wie er aktuell damit umgeht
+- Welche Kosten er bereits auf sich genommen hat
+- Wo er offensichtlich Unbehagen versp&uuml;rt
+
+Wenn Sie anfangen, so zu fragen, sind die Informationen zwar manchmal weniger schmeichelhaft, aber meist n&uuml;tzlicher.
+Bei der Produktentwicklung gilt: **N&uuml;tzliche Wahrheiten sind immer wichtiger als sch&ouml;ne Ermutigungen.**
+
+<a id="mom-ai"></a>
+## [12. Wie Sie AI bei Nutzerinterviews unterst&uuml;tzen lassen](#top-mom)
+
+The Mom Test ist im Kern eine Methode zum "Sprechen mit echten Menschen", daher kann AI reale Interviews nicht ersetzen. Aber AI eignet sich hervorragend als Unterst&uuml;tzung vor, w&auml;hrend und nach Interviews, besonders um die Einstiegsh&uuml;rde f&uuml;r Einsteiger zu senken.
+
+### 12.1 AI helfen lassen, "leicht nutzlose" Fragen umzuschreiben
+
+Viele wissen, dass sie nicht fragen sollten: "Was h&auml;ltst du von meiner Idee?" Aber wenn sie anfangen zu sprechen, kehren sie automatisch zu solchen S&auml;tzen zur&uuml;ck. Sie k&ouml;nnen zun&auml;chst Ihre geplanten Interview-Fragen an AI &uuml;bergeben und sie umschreiben lassen:
+
+```text
+Hier sind die Fragen, die ich bei Nutzerinterviews stellen m&ouml;chte:
+[Ihre Fragen einf&uuml;gen]
+
+Bitte schreibe sie nach den Prinzipien von The Mom Test um:
+1. Meinungsfragen entfernen
+2. Zukunfts-Hypothese-Fragen entfernen
+3. Stattdessen auf vergangenes echtes Verhalten, bestehende Alternativl&ouml;sungen und bereits aufgewendete Kosten konzentrieren
+4. Am Ende in eine Liste von 8-10 direkt verwendbaren Interview-Fragen zusammenfassen
+```
+
+Eine sehr anf&auml;ngerhafte Eingabe ist ebenfalls m&ouml;glich:
+
+```text
+Ich m&ouml;chte Nutzer fragen:
+1. Was h&auml;ltst du davon, wenn ich ein AI-Lebenslauf-Tool entwickle?
+2. W&uuml;rdest du es nutzen?
+3. W&auml;rst du bereit, daf&uuml;r zu bezahlen?
+
+Bitte schreibe die Fragen besser.
+```
+
+AI k&ouml;nnte folgende n&uuml;tzliche Ausgabe liefern:
+
+```text
+Umgeschriebene Fragen:
+
+1. Wann hast du zuletzt deinen Lebenslauf ge&auml;ndert?
+2. Warum musstest du ihn &auml;ndern?
+3. Wie hast du ihn ge&auml;ndert?
+4. Welcher Schritt hat am meisten Zeit gekostet?
+5. Hast du jemanden gebeten, dir beim Gegenlesen zu helfen?
+6. Hast du jemals Geld oder viel Zeit f&uuml;r die Lebenslauf&auml;nderung aufgewendet?
+```
+
+Diese Ausgabe ist sehr hilfreich, denn sie &auml;ndert Ihre urspr&uuml;nglichen "nach Meinungen fragenden" Fragen direkt in "nach echtem Verhalten fragende" Fragen.
+
+### 12.2 AI helfen lassen, verschiedene Interview-Leitf&auml;den f&uuml;r verschiedene Zielgruppen zu erstellen
+
+Bei derselben Richtung sind die Interview-Schwerpunkte f&uuml;r verschiedene Zielgruppen unterschiedlich. Studierende, HR-Profis, Freiberufler haben v&ouml;llig unterschiedliche Anliegen. Sie k&ouml;nnen AI bitten, f&uuml;r jede Zielgruppe einen eigenen Leitfaden zu erstellen:
+
+- F&uuml;r neue Nutzer: Schwerpunkt auf dem letzten echten Erlebnis
+- F&uuml;r Power-User: Schwerpunkt auf Alternativl&ouml;sungen und Schmerzintensit&auml;t
+- F&uuml;r zahlende Nutzer: Schwerpunkt auf bereits aufgewendeten Kosten
+
+So haben Sie beim echten Gespr&auml;ch mehr Rhythmus und stellen nicht jedem dieselben Fragen.
+
+Sie k&ouml;nnten direkt so eingeben:
+
+```text
+Ich werde mit zwei Arten von Menschen sprechen:
+1. Studierende, die zum ersten Mal ein Praktikum suchen
+2. &Auml;ltere Kommilitonen, die bereits vielen beim Lebenslauf geholfen haben
+
+Bitte gib mir jeweils einen Interview-Leitfaden mit 6 Fragen pro Zielgruppe.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+F&uuml;r Studierende:
+1. Wann hast du dich zuletzt auf ein Praktikum beworben?
+2. Welcher Schritt war am schwierigsten?
+3. Woher wei&szligt du, ob dein Lebenslauf bewerbungsbereit ist?
+...
+
+F&uuml;r &auml;ltere Kommilitonen:
+1. Wann hast du zuletzt jemandem beim Lebenslauf geholfen?
+2. Welche offensichtlichen Probleme siehst du am h&auml;ufigsten?
+3. Woran scheitern j&uuml;ngere Kommilitonen am meisten?
+...
+```
+
+So m&uuml;ssen Sie nicht von null anfangen und die Interview-Vorbereitung wird deutlich entspannter.
+
+### 12.3 AI beim Ordnen von Interview-Aufzeichnungen helfen lassen
+
+Nach dem Interview ist das h&auml;ufigste Problem nicht "keine Informationen", sondern "Informationen sind zu verstreut". AI eignet sich hervorragend, um fragmentierte Gespr&auml;che in strukturierte Notizen zu ordnen:
+
+```text
+Hier sind meine Interview-Aufzeichnungen mit 3 Nutzern.
+Bitte ordne sie aus der Perspektive von The Mom Test:
+1. Was sind Fakten, was sind nur Meinungen
+2. Was war das letzte echte Verhalten des Nutzers
+3. Was ist die aktuelle Alternativl&ouml;sung
+4. Welche Zeit-, Geld- oder Energiekosten hat der Nutzer bereits aufgewendet
+5. Welche Probleme wurden wiederholt erw&auml;hnt
+6. Welche &Auml;u&szlig;erungen klingen positiv, sind aber nicht ausreichend belegt
+```
+
+Dieser Schritt ist besonders wertvoll, denn er hilft, "gut klingende" von "wirklich urteilsf&auml;higen" Inhalten zu trennen.
+
+Eine einfache Eingabe k&ouml;nnte so aussehen:
+
+```text
+Hier ist meine Aufzeichnung nach einem Gespr&auml;ch mit einem Nutzer:
+
+- Sie sagte, sie w&uuml;rde ein Tool ausprobieren, wenn es eines g&auml;be
+- Letzte Woche hat sie einen Abend damit verbracht, ihren Lebenslauf zu &auml;ndern
+- Aktuell l&auml;sst sie haupts&auml;chlich Freunde gegenlesen
+- Sie sagte, das Schwerste sei, nicht zu wissen, wann der Lebenslauf "abschickbereit" ist
+
+Bitte teile mir mit, was Meinungen und was Fakten sind.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+Meinungen:
+- Sie w&uuml;rde ein Tool ausprobieren, wenn es eines g&auml;be
+
+Fakten:
+- Letzte Woche einen Abend f&uuml;r die Lebenslauf&auml;nderung aufgewendet
+- Aktuelle Alternativl&ouml;sung: Freunde bitten, gegenzulesen
+- Hauptschmerz: Nicht wissen, wann man "abschicken kann"
+
+F&uuml;r die Bedarfserkenntnis relevante Punkte:
+- Das Problem ist k&uuml;rzlich aufgetreten
+- Der Nutzer hat bereits erhebliche Zeitkosten investiert
+- Die aktuelle L&ouml;sung ist von anderen abh&auml;ngig und instabil
+```
+
+Diese Ausgabe zeigt Einsteigern sehr deutlich: Welche Aussagen f&uuml;r Urteile verwendet werden k&ouml;nnen und welche nur zur Kenntnis genommen werden sollten.
+
+### 12.4 AI zun&auml;chst eine leichte Webrecherche durchf&uuml;hren lassen
+
+Wenn Sie noch nicht mit Interviews begonnen haben, k&ouml;nnen Sie AI zun&auml;chst eine sehr leichte externe Recherche durchf&uuml;hren lassen:
+
+- Wie wird in &ouml;ffentlichen Communitys &uuml;ber dieses Problem geklagt
+- Was wird an bestehenden Tools am meisten kritisiert
+- Ob Nutzer bereits f&uuml;r &auml;hnliche Probleme bezahlen
+- Welche Alternativl&ouml;sungen auf dem Markt bereits existieren
+
+Diese Informationen k&ouml;nnen echte Interviews nicht ersetzen, helfen aber, schneller in den Zustand zu kommen, in dem Sie wissen, wo Sie ansetzen sollten.
+
+Ein einfacher Prompt k&ouml;nnte lauten:
+
+```text
+Bitte recherchiere f&uuml;r mich:
+"Was beklagen Studierende am h&auml;ufigsten beim Umschreiben von Lebensl&auml;ufen"
+Fasse es in 5 h&auml;ufigste Beschwerden zusammen, in sehr einfachen Worten.
+```
+
+AI k&ouml;nnte ausgeben:
+
+```text
+H&auml;ufige Beschwerden:
+
+1. Nicht wissen, was im Lebenslauf stehen sollte
+2. F&uuml;r jede Stelle muss man ihn neu anpassen, das ist zu anstrengend
+3. Nach vielen &Uuml;berarbeitungen immer noch unsicher, ob es gut ist
+4. Niemand gibt verl&auml;ssliches Feedback
+5. Man hat st&auml;ndig das Gef&uuml;hl, nicht bereit zu sein, also schiebt man es auf
+```
+
+Der Wert solcher Ergebnisse liegt darin, dass sie Ihnen den Einstiegspunkt f&uuml;r Interviews erleichtern.
+
+### 12.5 AI als "Interview-Nachbereitungs-Coach" nutzen
+
+Sie k&ouml;nnen auch eine gerade abgeschlossene Interview-Aufzeichnung an AI &uuml;bergeben und sie bitten, Sie zu kritisieren:
+
+```text
+Hier ist eine meiner Nutzer-Interview-Aufzeichnungen.
+Bitte hilf mir aus der Perspektive von The Mom Test bei der Nachbereitung:
+1. Bei welchen Fragen suchte ich zu sehr nach Best&auml;tigung
+2. Welche Fragen hatten offensichtliche Lenkungen
+3. Wo h&auml;tte ich weiter nach Fakten fragen k&ouml;nnen
+4. Wenn ich noch einmal k&ouml;nnte, wie k&ouml;nnte dieses Gespr&auml;ch besser gef&uuml;hrt werden
+```
+
+Das ist besonders hilfreich f&uuml;r Einsteiger, denn Sie entwickeln schneller ein Gesp&uuml;r daf&uuml;r, ob Sie "Beweise sammeln" oder "Ermutigung sammeln".
+
+## Assignments
+
+Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
+
+1. W&auml;hlen Sie eine Produktrichtung, an der Sie k&uuml;rzlich denken, und schreiben Sie zun&auml;chst 5 "leicht nutzlose" Fragen, die Sie urspr&uuml;nglich gestellt h&auml;tten
+2. Schreiben Sie diese 5 Fragen im Stil von The Mom Test um
+3. Finden Sie 3 potenzielle Nutzer und fragen Sie mindestens einmal: "Wann hatten Sie das letzte Mal dieses Problem?"
+4. Nach dem Interview ordnen Sie 4 Arten von Informationen: Echtes Verhalten, Alternativl&ouml;sungen, bereits aufgewendete Kosten, wiederkehrende Schwierigkeiten
+
+## Weiterf&uuml;hrende Literatur
+
+- [The Mom Test Offizielle Website](https://momtestbook.com/)
+- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
diff --git a/docs/de-de/stage-1/building-prototype/index.md b/docs/de-de/stage-1/building-prototype/index.md
new file mode 100644
index 0000000..c6beb8f
--- /dev/null
+++ b/docs/de-de/stage-1/building-prototype/index.md
@@ -0,0 +1,650 @@
+---
+title: 'Prototyp erstellen - Von der Geschäftsanalyse zur Multi-Page-Produktprototyp-Implementierung'
+description: 'Den vollständigen Kreislauf von der Geschäftsanalyse zur Multi-Page-Produktprototyp-Implementierung erleben. Lernen Sie, wie man das Geschäft befragt, Anforderungen zerlegt, AI IDE für Single-Page- und Multi-Page-Anwendungen nutzt und den Prototyp optimiert und testet.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Etwa <strong>8 Stunden</strong>'
+const relatedArticles =
+  relatedArticlesMap['de-de/stage-1/building-prototype'] ?? []
+</script>
+
+# Anfänger III: Prototyp erstellen
+
+## Kapitelübersicht
+
+<ChapterIntroduction :duration="duration" :tags="['Geschäftsanalyse', 'Prototyp-Design', 'AI-unterstützte Programmierung', 'Multi-Page-Anwendung']" coreOutput="1 E-Commerce-Material-Workspace-Prototyp" expectedOutput="Interaktiver Web-Prototyp">
+
+Im letzten Kapitel haben wir gelernt, wie man <strong>gute Ideen findet</strong> &mdash; von Nutzerbedürfnissen ausgehend und Richtungen findet, für die jemand zu zahlen bereit ist. Aber eine Richtung zu finden ist nur der erste Schritt. <strong>Die wahre Herausforderung für Produktmanager ist: Wie verwandelt man vage Anforderungen in ein nutzbares Produkt?</strong>
+
+Dieses Kapitel löst ein <strong>reales Problem</strong>: Der Chef gibt Ihnen den Satz "Nutze AI, um die Effizienz beim Veröffentlichen von Produkten auf E-Commerce-Plattformen zu steigern" &mdash; wie machen Sie daraus einen <strong>nutzbaren Produktprototyp</strong>?
+
+Im Gegensatz zum Snake-Spiel oder Taschenrechner zuvor <strong>kann man bei echten Geschäften nicht einfach Funktionen erfinden</strong>:
+
+1. <strong>Schmerzpunkte klären</strong>: Mit dem Operations-Team sprechen, aus dem vagen "Effizienz steigern" die <strong>echten Schmerzpunkte</strong> herausholen
+2. <strong>Prioritäten setzen</strong>: Aus vielen Problemen zunächst das <strong>schmerzhafteste</strong> lösen, nicht alles auf einmal
+3. <strong>Schnell validieren</strong>: Mit AI IDE zunächst einen <strong>Single-Page-Prototyp</strong> erstellen, wenn er funktioniert, zu Multi-Page erweitern
+4. <strong>Etwas Nutzbares erstellen</strong>: Am Ende einen <strong>demo-fähigen, bedienbaren E-Commerce-Material-Workspace</strong> liefern
+
+Wir lernen den <strong>Übergang vom Spielzeug zur Anwendung</strong> und entwickeln <strong>Einfühlungsvermögen und das Nachdenken über echte Kundenbedürfnisse</strong>.
+
+</ChapterIntroduction>
+
+::: info Hinweis
+In diesem Artikel könnten einige Geschäftsbegriffe vorkommen. Wenn Sie diese nicht verstehen, können Sie AI um eine Erklärung bitten.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
+      { title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
+      { title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
+      { title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Anforderungen klären, bevor man Code schreibt
+
+In den bisherigen Tutorials haben wir mit AI IDE mühelos Snake und verschiedene kleine Spiele generiert, aber das sind lediglich Spielzeugprojekte, die nicht im Berufs- oder Alltag eingesetzt werden können. Wenn wir AI-Fähigkeiten wirklich für alle nutzbar machen wollen, sollten wir Vibe Coding mit Lebens- und Arbeitsszenarien verbinden.
+
+Im letzten Kapitel haben wir gelernt, wie man <strong>gute Ideen findet, für die jemand zu zahlen bereit ist</strong>. Aber eine Richtung zu finden ist nur der Anfang. Bei der echten Produktentwicklung werden Sie feststellen: <strong>Zwischen "wissen, was zu tun ist" und "wissen, wie man es umsetzt" liegt eine gewaltige Kluft.</strong>
+
+Diese Kluft ist die <strong>Konkretisierung von Anforderungen</strong>.
+
+Ein Beispiel: In Kurs- oder persönlichen Projekten beginnen wir oft mit der einfachsten ausführbaren Funktion:
+
+- "Mach ein Kanban-Board, liste die Aufgaben auf."
+- "Hilf mir, ein Zeichen-Tool zu erstellen."
+- "Hilf mir, eine Umfrage-Software zu bauen."
+
+Das sind oft nur ein Tool oder ein Funktionsmodul &ndash; nicht einmal ein klares Geschäftsproblem. Noch wichtiger: <strong>Diese Ideen sind oft nur "nützlich in Ihrer Meinung", nicht "was Nutzer wirklich brauchen."</strong>
+
+In Unternehmens- oder Gründungsprojekten gehen Produktmanager und Ingenieure oft von einer größeren geschäftlichen Aufgabenstellung aus. Nehmen wir folgendes Szenario an:
+
+<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
+  <div style="font-weight: bold; color: #303133; margin-bottom: 10px;">Geschäftsszenario:</div>
+  <div style="color: #606266; line-height: 1.6;">
+    <p>Sie sind der E-Commerce-Operations-Produktmanager eines Shops. Der Chef gibt Ihnen eine vage, aber druckvolle Aufgabenstellung:</p>
+    <p style="font-style: italic; margin-top: 10px;">"Alle nutzen AI für Bilder und Copywriting in WeChat-Öffentlichkeitskanälen, ganz einfach. Mach mal, dass wir beim Einstellen neuer Produkte auf Douyin E-Commerce effizienter werden."</p>
+  </div>
+</el-card>
+
+Jetzt denken Sie vielleicht: "Chef, Sie träumen schon wieder!" In der Praxis ist solch vages Diktat jedoch sehr häufig &ndash; sogar häufiger als Ihre wöchentliche Bubble-Tea-Bestellung. Um ein fähiger Angestellter (oder besser: CEO eines Startups) zu sein, müssen wir lernen, von Selbstnutzungs-Tools zu echten Produktprototypen zu wechseln.
+
+Da wir AI IDE gelernt haben, fällt uns diese Anforderung eigentlich leicht &ndash; man muss AI nur einen Prompt geben, alles erledigt der Agent:
+
+```
+Bitte beziehe dich auf meine Anforderung xxxx,
+hilf mir, einen E-Commerce-Material-Workspace zu entwerfen,
+der Generierung und Verwaltung von Produktbeschreibungen, Bildern, Videos etc. umfasst.
+```
+
+Wenn Sie begeistert diese Anforderung direkt in einen Prototyp umsetzen und dem Chef schicken &ndash; herzlichen Glückwunsch, Ihre Quartalsprämie ist gestrichen!
+
+**Warum ist das so? Das ist genau der Kernschmerzpunkt, den wir lösen müssen:**
+
+Bisher haben wir mit AI IDE nur Spielzeugprojekte wie Snake oder Taschenrechner gemacht &ndash; einfache Funktionen, man weiß, was man will, und man nutzt sie selbst. Aber **echte Geschäftsszenarien sind völlig anders**:
+
+- **Sie sind nicht der Nutzer**: Der Chef will "Effizienz steigern", aber Sie wissen nicht, wie das Operations-Team täglich arbeitet und wo es hängt
+- **AI kennt das Geschäft nicht**: Sie geben AI eine vage Anforderung, und es kann nur auf generischem Wissen raten &ndash; das Ergebnis sieht aus wie das Richtige, funktioniert aber in der Praxis nicht
+- **Gute Idee ist nicht gleich gutes Produkt**: Sie denken, "AI-Generierung hinzufügen" sei cool, aber Nutzer brauchen es vielleicht gar nicht, oder es ist umständlicher als zuvor
+
+**Deshalb müssen wir lernen: "Von der Idee zum Nutzer-Verständnis."** Nur wenn Ihre Kreativität wirklich fremde Probleme löst &ndash; durch Fragen und tiefes Geschäftsverständnis &ndash; können Sie wirklich Wertvolles schaffen. (Gute Ideen sind sogar wichtiger als gute Technik.)
+
+### 1.1 Von der Vorstellung zur Realität: Lernen, das Geschäft zu befragen
+
+::: info Zunächst klären: Was ist eine Anforderung? Was ist ein Geschäft?
+
+**Anforderung** ist das, was Nutzer wirklich wollen &ndash; ihre Probleme, die sie lösen möchten. Zum Beispiel "Der Chef will, dass ich Produkte schneller einstelle" &ndash; das ist eine Anforderung.
+
+**Geschäft** ist das, was Nutzer täglich tun &ndash; ihre Arbeitsweise. Zum Beispiel E-Commerce-Operations: Produkte einstellen, Preise ändern, Bilder erstellen, Daten analysieren... Das alles ist Geschäft.
+
+**Warum sich fürs Geschäft interessieren?**
+Weil Ihr Tool sonst "gut aussieht, aber niemand nutzt". Nur wenn Sie wirklich verstehen, wie Nutzer täglich arbeiten und wo sie feststecken, können Sie etwas bauen, das ihnen wirklich hilft.
+
+:::
+
+Aus der einfachsten Perspektive können Sie sich zunächst folgende Fragen stellen:
+
+- Der Chef sagt "**etwas effizienter**" &ndash; was genau heißt das? **Schneller** machen? **Geld sparen**? **Mehr verkaufen**?
+- Wie werden Produkte aktuell eingestellt? **Wo läuft es nicht rund**?
+- Wie viele **neue Produkte** gibt es täglich? Wie viele **Bilder** und **Texte** pro Produkt?
+- Was ist **am nervigsten**, was **möchte man am wenigsten tun**?
+
+Das sind jedoch nur Vermutungen. Wir müssen direkt mit dem Douyin E-Commerce-Operations-Team sprechen: "Wo liegen eure Schwierigkeiten und worauf achtet ihr?" Durch Kommunikation erhalten wir präzisere Antworten:
+
+::: info Echte Geschäftsbefragungsergebnisse
+
+Wir haben E-Commerce-Operations-Mitarbeiter gefragt. Sie berichteten folgende Probleme:
+
+**1. Zu viele Aufgaben, zu unübersichtlich**
+- Eine Person muss mehrere Shops betreuen, jeder Shop hat viele Produkte
+- Täglich hin- und herhetzen: **Neue Produkte einstellen**, **Preise ändern**, **Bilder erstellen**, **Daten analysieren** &ndash; eine Sache ist noch nicht fertig, die nächste ruft
+
+**2. Inhalte werden nicht auf einmal erstellt, sondern iterativ**
+- Zunächst **Herstellerbilder**, **frühere Materialien** oder **Referenzbilder aus dem Web** verwenden, um das Produkt **schnell einzustellen** und zu testen
+- Etwas Geld für Werbung ausgeben, **schauen, ob jemand kauft**
+- Nur bei **gut verkäuflichen Produkten** werden Bilder, Detailbeschreibungen und Videos sorgfältig erstellt
+
+:::
+
+Nach der Geschäftsbefragung sind wir voller Enthusiasmus &ndash; jetzt können wir wirklich den perfekten, geschäftsgerechten Produktprototyp erstellen! &mdash; Schon wieder falsch gedacht. Wenn wir versuchen, "alle Anforderungen auf einmal zu erfüllen", wird das Produkt riesig und lässt sich im Kurs-Zeitrahmen kaum realisieren. Deshalb müssen wir weiter strukturieren und verdichten, um den wahren Kernschmerzpunkt zu identifizieren.
+
+### 1.2 Von Divergenz zu Konvergenz: Den Kernschmerzpunkt des Geschäfts identifizieren
+
+::: info Warum "konvergieren"? Was ist ein "Schmerzpunkt"?
+
+**Viele Probleme, aber welches zuerst?**
+
+Nutzer erzählen Ihnen vielleicht eine Reihe von Problemen: A ist nervig, B ist nervig, C ist auch nervig... Aber wenn Sie versuchen, alle auf einmal zu lösen, wird wahrscheinlich nichts richtig. Deshalb **konvergieren** &mdash; aus vielen Problemen das **schmerzhafteste, dringendste, am besten lösbare** herausgreifen und zuerst angehen.
+
+**Was ist ein Schmerzpunkt?**
+Das ist das konkrete Problem, das Nutzer **am meisten nervt, am meisten Zeit kostet und am dringendsten lösen** wollen. Nicht "ich finde es nützlich", sondern etwas, über das Nutzer **täglich klagen und bei dem jeder Durchlauf quälend ist**.
+
+:::
+
+Durch das obige Interview haben wir viele Operations-Probleme entdeckt: Unterbrechung durch Aktionen, Verwaltung mehrerer Shops, ständiges Wechseln zwischen Einstellen/Ändern/Bilderstellen/Daten...
+
+Wenn wir versuchen, "all diese Probleme zu lösen", erhalten wir ein **riesiges, aber unbrauchbares** Tool.
+
+Lassen Sie uns diese Probleme kategorisieren (AI kann helfen). Es gibt grob drei Typen:
+
+1. **Rhythmus-Probleme**: Wann Produkte einstellen, wann Preise anpassen
+2. **Effizienz-Probleme**: Wie man mehrere Shops und Produkte gleichzeitig verwaltet
+3. **Content-Probleme**: Wie man schnell Produktbilder und Copywriting erstellt
+
+Für unseren Kurs ist **Typ 3: Content-Erstellung** am besten geeignet. Aber "schnell Content erstellen" ist immer noch abstrakt. Fragen wir das Geschäftsteam genauer:
+
+::: info Das Geschäftsteam sagt: Content-Erstellung hat zwei schmerzhafteste Stellen
+
+**Schmerz 1: Batch-Bilderstellung und Copywriting sind extrem mühsam**
+- Materialien überall verteilt: Cloud-Speicher, WeChat-Verlauf, Plattform-Backend... **Schwer zu finden**
+- Viele Produkte gleichzeitig einstellen, **keine Zeit für sorgfältige Erstellung**, nur schnell zusammenstellen
+- Anspruch nicht hoch: **Sichtbar und einstellbar** reicht, muss nicht schick sein
+
+**Schmerz 2: Gute Lösungen können nicht gespeichert und wiederverwendet werden**
+- Früher gute Titel und Layouts: **Beim nächsten Mal nicht mehr auffindbar**
+- Lösungen verstreut in Chat-Verläufen und alten Produkt-Links
+- Wenn man sie braucht: **Halben Tag suchen, kopieren, ändern**
+- Es fehlt ein Tool zum **Sammeln, Verwalten und direkten Wiederverwenden**
+
+:::
+
+Basierend auf diesen beiden Schmerzpunkten erstellen wir ein einfaches kleines Tool: **Operations-Team bei Batch-Bilderstellung und Copywriting helfen, plus gute Lösungen für spätere Wiederverwendung speichern**.
+
+Es macht nur zwei Dinge (lassen Sie AI bei der Detaillierung helfen, und denken Sie daran, Funktionen basierend auf Geschäfts-Feedback kontinuierlich zu reduzieren):
+
+::: info Funktion 1: Batch-generierte E-Commerce-Produktbilder und Copywriting
+
+**Was macht das?**
+Dem System Produktinformationen geben, und es generiert automatisch Produktbilder und Texte, die auf E-Commerce-Plattformen (wie Douyin, Taobao) eingestellt werden können.
+
+**Eingabe**
+| Typ | Inhalt |
+|------|------|
+| Produktinformationen | Name, Kategorie, Marke, Material, Größe, Farbe etc. |
+| Produktbilder | Weißgrund oder einfaches Szenario-Foto |
+| Referenzbilder | Screenshots früherer Bestseller oder Referenz-Links |
+| Import-Methode | Excel Batch-Import oder direkt auf der Seite ausfüllen |
+
+**Ausgabe (generierte E-Commerce-Materialien)**
+- **Produkt-Hauptbild**: Produktansicht mit Text-Selling-Points (das Bild, das Nutzer beim Scrollen zuerst sehen)
+- **Produkttitel**: Keyword-Kombination, die bei der Suche gefunden wird
+- **Selling-Point-Copywriting**: 1-2 Sätze, die Käufer anziehen
+- Alles **nach kleiner Korrektur einstellbar**
+
+**Ergebnis**
+- Früher: Jedes Produkt von Grund auf neu erstellen
+- Jetzt: Eine Charge Produkte ins System geben, Entwürfe generieren, auswählen und nachbessern
+
+:::
+
+::: info Funktion 2: Gute Lösungen als Vorlagen speichern
+
+**Eingabe**
+| Typ | Inhalt |
+|------|------|
+| Ein kompletter Satz | Hauptbild + Titel + Copywriting |
+
+**Ausgabe**
+| Funktion | Beschreibung |
+|------|------|
+| Anwenden | Beim nächsten neuen Produkt die Vorlage automatisch anwenden |
+| Bearbeiten | Titel und Copywriting direkt ändern |
+| Verwalten | Benennen, taggen (z.B. "Herrentaschen-Vorlage", "Großverkaufs-Titel"), leicht auffindbar |
+
+**Ergebnis**
+1. Neues Produkt importieren
+2. Auswählen: Systemstandard-Generierung oder **meine gespeicherte Vorlage verwenden**
+3. System wendet automatisch Vorlagen-Stil an und generiert neue Bilder und Copywriting
+
+:::
+
+---
+
+**Rückblick auf das, was wir gerade getan haben:**
+
+1. **Zuerst Fragen stellen**: Nicht direkt mit dem Programmieren beginnen, sondern zuerst das Operations-Team fragen "Was nervt euch am meisten"
+2. **Schmerzpunkte finden**: Entdeckt, dass sie am meisten unter "Bilder und Copywriting erstellen ist zu mühsam" und "gute Lösungen können nicht gespeichert werden" leiden
+3. **Umfang eingrenzen**: Keine allesumfassende Plattform bauen, sondern nur "Batch-Generierung von Bildern und Copywriting + Vorlagen speichern" &ndash; diese beiden Funktionen
+
+**Warum ist das so wichtig?**
+
+Ein häufiger Fehler von Anfängern bei der Produktentwicklung ist: Mehr Funktionen ist besser. Aber was Nutzer wirklich brauchen, ist **die Lösung des schmerzhaftesten Problems**. Eine Reihe von Funktionen, die alle nicht richtig funktionieren, ist schlechter als ein bis zwei Funktionen, die Nutzer wirklich unterstützen.
+
+**Kern des Produkt- und Geschäftsdenkens:**
+- Nicht selbst denken "Ich glaube, Nutzer brauchen das"
+- Nutzer fragen "Was machst du jeden Tag? Wo tut es am meisten weh?"
+- Aus einer Menge von Problemen **konvergieren** auf das schmerzhafteste, am besten lösbare
+- Zuerst die **minimal nutzbare** Version erstellen, dann schrittweise iterieren
+
+Das ist es, was wir klären müssen, bevor wir Code schreiben. Code ist nur ein Werkzeug &ndash; **Nutzer verstehen, das richtige Problem finden** ist der erste Schritt.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
+      { title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
+      { title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
+      { title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. In 10 Minuten einen Prototyp erstellen: AI IDE lässt die "Kernfunktion" Wirklichkeit werden
+
+::: info Programmier-Plan-Empfehlung
+Wenn Sie das Gefühl haben, dass Ihre aktuelle IDE nicht intelligent genug ist oder Ihr Kontingent schnell aufgebraucht ist, können Sie einen **Programmier-Plan** erwerben. Zur Vorbereitung lesen Sie [diesen Artikel](../../stage-2/backend/modern-cli/) über die Verwendung von Claude zum Programmieren.
+:::
+
+Nachdenken ist gut, aber man sollte nicht übermäßig reflektieren. Wir steuern die übermäßige Reflexion und versuchen, mit einer einzelnen Seite einen Prototyp zu erstellen.
+
+### 2.1 Erster Schritt: AI in einfachen Worten sagen, was Sie wollen
+
+Am Anfang müssen Sie keine perfekten Prompts anstreben. Beginnen Sie mit Ihrem natürlichsten Ausdruck. Beschreiben Sie AI wie einem Kollegen Ihre Anforderungen in einfachen Worten, und lassen Sie AI Ihnen helfen, sie in einen professionelleren Ausdruck zu optimieren.
+
+#### 2.1.1 Mit einer mündlichen Beschreibung beginnen (empfohlen für Anfänger)
+
+Beschreiben Sie Ihre Idee zuerst in Ihren eigenen Worten &ndash; auch wenn es noch so rau ist:
+
+```
+Ich möchte ein Tool erstellen, das E-Commerce-Operations-Mitarbeitern hilft,
+automatisch Produkt-Hauptbilder und Copywriting zu generieren.
+Operations-Mitarbeiter müssen aktuell manuell Bild für Bild und Text für Text
+erstellen, was sehr mühsam ist.
+Meine Idee: Sie laden Produktinformationen hoch, das System generiert automatisch
+einen Satz Entwürfe, die Operations-Mitarbeiter wählen die brauchbaren aus,
+ändern sie leicht und können sie verwenden.
+
+Zuerst die einfachste Version: eine Seite, links Produktinformationen eingeben,
+rechts die generierten Ergebnisse anzeigen. Bilder hochladen, Text eingeben,
+nach der Generierung Hauptbild-Vorschau und Copywriting anzeigen.
+```
+
+Senden Sie diesen Text dann an eine AI (wie ChatGPT, Claude etc.), damit sie ihn für Sie erweitert. AI hilft Ihnen normalerweise dabei, Details zu ergänzen, an die Sie noch nicht gedacht haben, Ihre Ideen klarer zu strukturieren und schließlich einen Prompt zu generieren, der sich für AI IDE eignet.
+
+Sie können AI so ansprechen:
+```
+Hilf mir, die obige Idee zu erweitern und in ein klares
+Geschäftslogik-Dokument zu strukturieren. Generiere dann einen Prompt,
+der sich für AI IDE (wie Cursor, Trae) eignet, um Single-Page-Prototyp-Code
+zu generieren.
+```
+
+AI wird eine strukturierte Anforderung und den entsprechenden Prompt zurückgeben. Überprüfen Sie diese selbst, entfernen Sie unnötige Funktionen und bestätigen Sie sie, bevor Sie den Code generieren.
+
+Der Vorteil dieses Ansatzes: Die mündliche Beschreibung enthält die authentischsten Ideen, kann aber wichtige Details übersehen. Wenn AI für Sie erweitert, könnte sie Fragen stellen wie "Soll Batch-Upload unterstützt werden?", an die Sie noch nicht gedacht haben. So können Sie Ihre Anforderungen weiter validieren. Sie können basierend auf dem Feedback entscheiden, ob Sie unpraktische Funktionen beibehalten oder entfernen möchten, und durch wiederholte Überarbeitung den ersten Prompt für AI festlegen.
+
+#### 2.1.2 Den Erweiterungsschritt überspringen: Geschäftsdokument direkt an AI übergeben
+
+Wenn Sie in den vorherigen Kapiteln bereits ein Geschäftslogik-Dokument erstellt haben (z.B. eine in einfachen Worten verfasste Anforderungsbeschreibung), können Sie das folgende Format direkt verwenden und an AI IDE senden &ndash; ohne den Zwischenschritt der AI-Erweiterung. Dies eignet sich, wenn die Anforderungen bereits klar sind und Sie direkt mit dem Programmieren beginnen möchten:
+
+```
+Hilf mir, basierend auf der Geschäftslogik eine Single-Page-Anwendung
+zu implementieren, um die Kernfunktion zu validieren.
+
+Geschäftslogik-Referenz:
+1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
+   stapelweise zu generieren:
+- **Eingabe (direkter Upload und Batch-Import unterstützt):**
+  - Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
+    Zielgruppe etc.;
+  - Produktbilder: Weißgrund / einfaches Szenario-Foto;
+  - Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
+    Bestseller oder Referenz-Links möglich;
+  - Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
+  - Auf der Seite kann angegeben werden, ob Produktmaterialien in der
+    Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
+- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
+  werden können):**
+  - Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
+    grundlegende Selling-Points enthält;
+  - Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
+    Selling-Point-Copywriting.
+- **Erwartete Änderung der Arbeitsweise:**
+  Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
+  System, mit System-Entwürfen zur Auswahl und Feinjustierung.
+
+Zuerst die erste Funktion implementieren, die zweite Funktion (Vorlagenbibliothek)
+wird später hinzugefügt.
+```
+
+#### 2.1.3 Der Programmierer-Ansatz (fortgeschritten): AI helfen lassen, einen "Prompt für Prompts" zu schreiben
+
+Wenn Sie den Code-Generierungsprozess feiner steuern möchten, können Sie zuerst AI (wie ChatGPT) bitten, basierend auf Ihren Anforderungen einen speziell für AI IDE bestimmten Prompt zu generieren:
+
+```
+Basierend auf der folgenden Idee, hilf mir, einen Prompt für einen Coding Agent
+zu schreiben, um Code zu generieren. Ich muss diesen Prompt verwenden, um Code
+zu erstellen.
+
+[Deine Geschäftslogik-Beschreibung hier einfügen]
+
+Anforderungen:
+1. Der Prompt soll eine klare Seitenlayout-Beschreibung enthalten
+2. Datenstrukturen und Interaktionslogik klar definieren
+3. Technology Stack angeben (z.B. React + Tailwind)
+4. Die zu implementierenden Kernfunktionen auflisten
+```
+
+Normalerweise generiert AI einen strukturierten Prompt wie den folgenden:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png)
+
+Sie können diesen Prompt nach kleinen Anpassungen an AI IDE senden, um Code zu generieren.
+
+### 2.2 Zweiter Schritt: AI IDE direkt Code generieren lassen
+
+#### 2.2.1 Vorbereitung: Grundlegende Bedienung von AI IDE verstehen
+
+Wenn Sie mit AI IDE (wie Cursor, Trae, Windsurf etc.) noch nicht vertraut sind, empfehlen wir, zunächst das [IDE-Grundlagen-Tutorial](/de-de/appendix/2-development-tools/ide-basics/) im Anhang zu lesen, um zu erfahren:
+- Wie man ein neues Projekt erstellt
+- Wie man mit dem AI Agent kommuniziert
+- Wie man den Code-Generierungsprozess der AI versteht
+
+#### 2.2.2 Mit der Code-Generierung beginnen
+
+Jetzt haben Sie den initialen Prompt erhalten. Wir nehmen den ersten Prompt-Stil als Beispiel und lassen AI uns beim Generieren von Code helfen. Erstellen Sie zuerst ein Fenster und den entsprechenden Ordner, öffnen Sie den Ordner (initialisieren Sie ein neues Projekt in Ihrem bevorzugten Ordner):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png)
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png)
+
+Wählen Sie in der Seitenleiste ein Modell Ihrer Wahl (empfohlen: gemini, gpt, glm, kimi, minimax etc.) und geben Sie den Prompt aus dem ersten Schritt ein:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png)
+
+Nach dem Klick auf Generieren sehen wir den vertrauten Vorgang: AI plant basierend auf dem Prompt die Verzeichnisstruktur des Projekts, die notwendigen Dateien und gibt den ursprünglichen Inhalt jeder Datei an.
+
+::: warning Wichtiger Hinweis: AI kann anhalten und auf Ihre Bestätigung warten
+Während des Generierungsprozesses hält der **AI Agent oft an und wartet auf Ihre Eingabe oder Bestätigung**, zum Beispiel:
+- Fragt Sie, ob Sie mit dem nächsten Schritt fortfahren möchten
+- Bittet Sie, die Eingabetaste zu drücken, um eine Aktion zu bestätigen
+- Fragt Sie nach der Wahl eines technischen Details
+
+**Wenn AI nicht mehr reagiert, prüfen Sie zuerst die Dialogoberfläche, ob sie auf Ihre Antwort wartet.** Viele Anfänger denken, AI würde noch nachdenken, aber sie hat bereits angehalten und wartet auf Sie. Aktiv antworten oder Eingabetaste drücken, dann arbeitet AI weiter.
+:::
+
+Vergessen Sie auch hier nicht, die Eingabetaste zu drücken, um die Informationen zu bestätigen (andernfalls geraten Sie in eine Warteschleife; einige AI IDEs haben dieses Problem nicht):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png)
+
+Wenn Sie die folgende Szene sehen, bedeutet das, dass bereits ein lokaler Dienst gestartet wurde. Sie müssen auf Überspringen klicken, sonst bleiben Sie auf dieser Oberfläche (wenn nach der Code-Generierung nichts erscheint, müssen Sie aktiv sagen: "Hilf mir, dieses Projekt zu starten"):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png)
+
+::: info Szenario-Erklärung
+**Szenario-Beschreibung**: Sie haben mit `npm create vite@latest` ein React + TypeScript-Projekt (easy-vibe-web) erstellt. Nach Abschluss der Erstellung startet Ihr Computer automatisch die Webseite, damit Sie das Ergebnis sofort sehen können.
+
+**Lokaler Dienst**: Kann als temporäres Webseiten-Anzeigefenster auf Ihrem Computer verstanden werden, das nur auf Ihrem eigenen Rechner läuft und für andere nicht zugänglich ist.
+
+**localhost (lokale Adresse)**: `localhost` bedeutet "dieser Computer selbst". Wenn Sie im Browser darauf zugreifen, greifen Sie tatsächlich auf die Webseite zu, die auf Ihrem Computer läuft.
+
+**Port**: Ein Port kann als Nummer verstanden werden, die verschiedene Webdienste auf demselben Computer unterscheidet. Dieses Projekt verwendet 5174.
+
+**Zugriffslink `http://localhost:5174/`**: Diese Adresse bedeutet "Zugriff auf die Webseite mit der Nummer 5174 auf diesem Computer". Im Browser öffnen, um das Ergebnis zu sehen.
+
+**Aktuelle Szenario-Erklärung**: Das System wollte ursprünglich 5173 verwenden, aber diese Nummer war bereits belegt, daher wurde automatisch auf 5174 gewechselt. Das ist normal.
+
+**Bedienungsanleitung**: Öffnen Sie den Browser, geben Sie `http://localhost:5174/` in die Adressleiste ein und drücken Sie Enter, um die aktuelle Projektseite zu sehen.
+:::
+
+Nachdem alles bestätigt ist, warten Sie einen Moment, bis der Agent seine Arbeit beendet hat. Wir erhalten folgendes Ergebnis:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png)
+
+Man sieht bereits eine erste funktionale Ansicht, aber das Frontend sieht noch sehr unschön aus. Jetzt können wir versuchen, direkt mit AI zu dialogieren und die Oberfläche zu optimieren:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png)
+
+Nach der Optimierung erhalten wir eine deutlich ansprechendere Oberfläche:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png)
+
+Sie können die Webseiten-Funktionen nach Ihren eigenen Bedürfnissen anpassen, Screenshots anhängen und frei Fragen stellen, wie zum Beispiel: "Ich brauche die Batch-Import-Funktion derzeit nicht, bitte entfernen", "Links muss zu viel eingegeben werden, behalte nur xxxxx". Sie können sogar andere ausgereifte Websites als Referenz heranziehen &ndash; hier können wir direkt ein Design-Produkt von Google als "Referenz" verwenden (Sie können einen Screenshot einer ausgereiften Website einfügen, die Ihnen gefällt):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png)
+
+Schließlich erhalten wir:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png)
+
+### 2.3 Was tun bei Fehlern
+
+In der Praxis sind Fehler unvermeidlich. Das ist normal und bedeutet nicht, dass Sie etwas falsch gemacht haben. Sie müssen die Fehler nicht verstehen &ndash; geben Sie einfach das "Was Sie sehen" vollständig an AI weiter.
+
+Es gibt grundsätzlich drei Behandlungsmethoden:
+
+- **Methode 1: Seiten- oder Terminal-Fehler**
+  Wenn die Seite rot wird, weiß wird oder im Terminal viele rote Zeilen erscheinen, machen Sie einen Screenshot oder kopieren Sie die gesamte Fehlermeldung und senden Sie sie an AI, damit sie Ihnen bei der Reparatur hilft.
+
+- **Methode 2: Funktion falsch, aber kein Fehler**
+  Zum Beispiel reagiert ein Button nicht, Daten werden nicht angezeigt, das Layout ist durcheinander. Beschreiben Sie in einfachen Worten "Was gerade passiert + Was Sie eigentlich wollen", bei Bedarf mit einem Screenshot.
+
+- **Methode 3: Unsicher, ob es ein Problem gibt**
+  Sie können AI direkt fragen: "Hilf mir zu prüfen, ob diese Funktion offensichtliche Probleme hat und ob sie angepasst werden muss."
+
+#### 2.3.1 Häufige Fragen von Anfängern
+
+- **F: Ich weiß nicht, wo die Fehlermeldung ist?**
+- A: Suchen Sie grundsätzlich nach allem, was "rot" ist. Im Terminal, in der Konsole oder auf der Seite &ndash; finden Sie die roten Hinweise, markieren Sie alles und kopieren Sie es zu AI.
+
+- **F: AI hat es repariert, aber es kommt derselbe Fehler &ndash; was nun?**
+- A: Das ist ein häufiges Szenario. Machen Sie weiterhin Screenshots oder kopieren Sie die neueste Fehlermeldung und senden Sie sie an AI, damit sie auf Basis der letzten Änderung weiter repariert.
+
+- **F: Muss ich AI's Reparaturansatz vollständig verstehen?**
+- A: Nicht auf einmal. Konzentrieren Sie sich jedes Mal auf ein bis zwei Punkte. Mit der Zeit werden Sie zunehmend mehr Code verstehen &ndash; wie beim Aufbau eines englischen Wortschatzes.
+
+- **F: Viele Male geändert, das Problem ist immer noch nicht gelöst &ndash; was nun?**
+- A: Sie können Folgendes versuchen:
+  - Die "Versionsrücksetzung"-Funktion der IDE verwenden. Im Agent-Dialog den Rückgängig-Button finden und zu einer lauffähigen Version zurückkehren und neu beginnen;
+  - Ein anderes Modell wählen oder den Prompt anpassen, Phänomene und Fehlermeldungen spezifischer beschreiben;
+  - "Aktuellen Code + Fehler-Log + erwartetes Verhalten" zusammenpacken und AI auf einmal übergeben, damit sie den Problembereich insgesamt restrukturiert.
+
+## 3. Von der Single-Page zur Multi-Page-Anwendung erweitern
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
+      { title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
+      { title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
+      { title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Wenn die Logik der Kernfunktion grundsätzlich generiert ist, können wir die restlichen Inhalte erstellen. Zum Beispiel sind Klicks auf Einstellungen oder bestimmte Buttons zu diesem Zeitpunkt noch völlig wirkungslos.
+
+Sie können AI bitten, basierend auf den Anforderungen des Geschäftsprompts zu prüfen und die noch nicht generierten Teile zu erstellen. Oder Sie lassen AI die nicht vollständig implementierten Seiten direkt ergänzen. Sie können auch eine bestimmte Seite angeben, die AI implementieren soll, bis alle Seiten klickbar und alle Funktionen ordnungsgemäß interaktiv sind:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png)
+
+Nach kurzer Wartezeit sehen wir, dass das Programm auf der bisherigen Basis mehrere Seiten und interaktive Funktionen ergänzt hat:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png)
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png)
+
+Jetzt müssen Sie nur noch manuell jede Funktion und jeden Button anklicken, die Sie interessieren, und sicherstellen, dass die Interaktion ordnungsgemäß funktioniert. Wenn es nicht interaktive Funktionen gibt, können Sie mit AI kommunizieren und sie um Hilfe bei der Reparatur bitten.
+
+## 4. Den Prototyp "wie echt" aussehen lassen
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
+      { title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
+      { title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
+      { title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Nachdem wir die Multi-Page-Struktur haben, ist der letzte Schritt, den Prototyp von "es läuft" zu "lässt sich flüssig bedienen und sieht professionell aus" zu bringen. Dafür müssen wir den gesamten Prozess (Nutzer-Flow) einmal selbst durchlaufen und die nicht funktionierenden Teile von AI reparieren lassen, damit wir nach jedem Refresh den vollständigen Prozess als neuer Nutzer simulieren und die erwarteten Ergebnisse erhalten können.
+
+Lassen Sie uns die ursprünglichen Anforderungen rekapitulieren:
+
+```
+1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
+   stapelweise zu generieren:
+- **Eingabe (direkter Upload und Batch-Import unterstützt):**
+  - Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
+    Zielgruppe etc.;
+  - Produktbilder: Weißgrund / einfaches Szenario-Foto;
+  - Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
+    Bestseller oder Referenz-Links möglich;
+  - Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
+  - Auf der Seite kann angegeben werden, ob Produktmaterialien in der
+    Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
+- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
+  werden können):**
+  - Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
+    grundlegende Selling-Points enthält;
+  - Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
+    Selling-Point-Copywriting.
+- **Erwartete Änderung der Arbeitsweise:**
+  Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
+  System, mit System-Entwürfen zur Auswahl und Feinjustierung.
+
+2. Gute Outputs als wiederverwendbare Vorlagenbibliothek konservieren:
+- **Was kann gespeichert werden?**
+  - Jeder Output, von dem der Operations-Mitarbeiter findet, dass er "gut
+    funktioniert", kann mit einem Klick gespeichert werden:
+    - Kann eine komplette Kombination aus "Hauptbild + Titel + Selling-Point"
+      sein;
+    - Oder nur ein Teil davon, z.B. eine bestimmte Titel-Struktur oder ein
+      bestimmter Selling-Point-Text.
+- **Was kann nach dem Speichern getan werden?**
+  - **Wiederverwenden:**
+    - Diese gespeicherte Vorlage verwenden, neue Produkt-Parameter einsetzen,
+      neue Bild- und Textentwürfe generieren;
+    - Oder auf demselben Produkt basierend auf der Vorlage mehrere Varianten
+      für A/B-Tests generieren.
+  - **Bearbeiten:**
+    - Titel-Text / Selling-Point-Text direkt ändern;
+    - Wenn Bildbearbeitung unterstützt wird, können Text, Sticker etc. im
+      Hauptbild feinjustiert werden.
+  - **Verwalten:**
+    - Gespeicherte Vorlagen benennen, taggen (z.B. "Herrentaschen-Hauptbild-Vorlage",
+      "Großverkaufs-Titel-Struktur"), nach Shop kategorisieren für einfache
+      spätere Suche.
+- **Wie beim nächsten Mal verwenden?**
+  - Nach Import eines neuen Produkts kann der Operations-Mitarbeiter wählen:
+    - Systemstandard-Logik verwenden, oder
+    - "Meine gespeicherte Vorlage verwenden" angeben;
+  - Das System wendet basierend auf den neuen Produktdaten automatisch Struktur
+    und Stil der Vorlage an und generiert neue Hauptbild + Titel +
+    Selling-Point-Entwürfe.
+```
+
+Wenn bei jedem Test neue Daten manuell erstellt werden müssen, kostet das viel Zeit. Zu diesem Zeitpunkt verwenden wir normalerweise eine Methode namens "Testdaten". Wir können wie folgt mit AI kommunizieren und AI bitten, auf der Oberfläche einen schnellen Testdaten-Eingang zu generieren, damit wir testen können, ob alle Funktionen ordnungsgemäß durchlaufen werden:
+
+```
+Ich muss jetzt diesen Nutzungsprozess testen und sicherstellen, dass er
+vollständig durchlaufen werden kann. Bitte generiere basierend auf den
+folgenden Anforderungen einen Testdaten-Eingang, damit ich nach einem Klick
+schnell testen kann, ob der gesamte Prozess normal funktioniert:
+1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
+   stapelweise zu generieren:
+- **Eingabe (direkter Upload und Batch-Import unterstützt):**
+  - Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
+    Zielgruppe etc.;
+  - Produktbilder: Weißgrund / einfaches Szenario-Foto;
+  - Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
+    Bestseller oder Referenz-Links möglich;
+  - Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
+  - Auf der Seite kann angegeben werden, ob Produktmaterialien in der
+    Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
+- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
+  werden können):**
+  - Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
+    grundlegende Selling-Points enthält;
+  - Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
+    Selling-Point-Copywriting.
+- **Erwartete Änderung der Arbeitsweise:**
+  Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
+  System, mit System-Entwürfen zur Auswahl und Feinjustierung.
+```
+
+Man erhält schnell Ergebnisse (wenn Ihnen ein Datensatz zu wenig ist, können Sie AI bitten, mehrere testbare Use Cases zu generieren):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png)
+
+Nach dem Klick erhalten wir das Ergebnis:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png)
+
+Was wir hier direkt erhalten, ist das Ergebnis &ndash; es gibt keinen "simulierten Generierungsprozess". Wenn wir einen realistischen Generierungsprozess simulieren möchten, können wir direkt mit AI dialogieren: "Bitte simuliere einen realistischen Generierungsprozess, bei dem die Ergebnisse erst nach einiger Zeit nach dem Klick angezeigt werden."
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png)
+
+Nachdem die Generierungsfunktion durchlaufen ist, müssen wir auch sicherstellen, dass die Vorlagenbibliothek ordnungsgemäß funktioniert. Auf der Generierungskarte der Seite können wir sehen, dass die Vorlagenbibliothek-Speicherfunktion noch nicht implementiert ist. Jetzt müssen wir mit AI weitergehend kommunizieren: "Bitte hilf mir sicherzustellen, dass die Anforderung [hier den Inhalt von Punkt 2 oben einfügen] erfüllt ist, ein Ergebnis angeklickt werden kann, um die entsprechende Vorlage zu speichern, und nach dem Öffnen die Generierungsparameter sichtbar sind."
+
+Generierung ist oft nicht in einem Schritt erledigt &ndash; häufig sind Screenshots und Korrekturen nötig:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png)
+
+Schließlich erhalten wir das erwartete Ergebnis:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png)
+
+Neben der manuellen Überprüfung des Anforderungsprozesses können Sie AI auch bitten, direkt eine Anforderungsprüfung durchzuführen, zum Beispiel:
+
+- "Bitte vergleiche meine ursprünglichen Anforderungen und prüfe, ob die aktuelle Anwendung alle Kernfunktionen abdeckt."
+- "Hilf mir, eine Funktionsliste zu erstellen, die markiert, was bereits fertig ist und was noch nicht implementiert ist oder unzureichend ist."
+
+AI gibt normalerweise eine Checkliste aus. Basierend auf den Ergebnissen können Sie überlegen, ob weitere Verbesserungen nötig sind. Nach wiederholten Überarbeitungen erhalten Sie einen relativ vollständigen Prototyp.
+
+## 5. Hausaufgabe: Erstellen Sie Ihren eigenen Douyin E-Commerce-Workspace
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Herausforderung: E-Commerce-Material-Workspace nachbauen</div>
+  </template>
+
+  <p>
+    Referenzieren Sie die Prompts und Inhalte dieser Lektion und schließen Sie einen vollständigen Kreislauf ab:
+  </p>
+
+  <ul>
+    <li>
+      <strong>Vollständiger Praxis-Kreislauf</strong>
+      <ul>
+        <li>Geschäftsstrukturierung &rarr; Prompt-Generierung &rarr; Single-Page-Prototyp-Generierung &rarr; Multi-Page-Prototyp-Generierung</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Ergebnisse teilen</strong>
+      <ul>
+        <li>Machen Sie Screenshots Ihres Programms und teilen Sie sie mit anderen</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Denkaufgabe</strong>
+      <ul>
+        <li>Bereiten Sie sich auf die nächste Lektion "Anbindung von Large Language Models (LLM) und Text-to-Image-Fähigkeiten" vor und überlegen Sie im Voraus: Wie könnten Sie "AI-Copywriting / Bildgenerierung / Skriptgenerierung" etc. in Ihren Workspace einbetten?</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Nächste Schritte
+
+In der nächsten Lektion werden wir auf Basis dieses Content-Produktions-Workspaces konkrete AI-Fähigkeiten anbinden (Text-zu-Text, Bild-zu-Text, Text-zu-Bild), zum Beispiel:
+
+- Automatische Generierung von Copywriting-Entwürfen und mehreren Titel-Alternativen für eine Content-Aufgabe
+- Automatische Generierung von Bild-Entwürfen basierend auf der Aufgabenbeschreibung (Text-to-Image)
+- Automatische Kategorisierung und Zusammenfassung historischer Content-Aufgaben, um Sie bei der Planung des nächsten Events zu unterstützen
+
+<RelatedArticlesSection
+  title="Weiterlernen"
+  description="Empfehlung: in der Reihenfolge 'AI-Fähigkeiten anbinden &rarr; vollständiger Projekt-Kreislauf &rarr; Design-Engineering' fortsetzen."
+  :items="relatedArticles"
+/>
diff --git a/docs/de-de/stage-1/complete-project-practice/index.md b/docs/de-de/stage-1/complete-project-practice/index.md
new file mode 100644
index 0000000..8fca968
--- /dev/null
+++ b/docs/de-de/stage-1/complete-project-practice/index.md
@@ -0,0 +1,301 @@
+---
+title: 'Vollst&auml;ndiges Projektpraktikum - Vom Demo zum produktionsreifen Prototyp'
+description: 'Verlassen Sie die Demo-Phase und lernen Sie, die Produktkette zu vervollst&auml;ndigen, realistische Simulationsdaten zu erstellen, durch Feedback schnell zu iterieren und schlie&szlig;lich einen pr&auml;sentierbaren, interaktiven vollst&auml;ndigen AI-Produktprototyp fertigzustellen.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Etwa <strong>3 Tage</strong>'
+const relatedArticles =
+  relatedArticlesMap['de-de/stage-1/complete-project-practice'] ?? []
+</script>
+
+# Anf&auml;nger V: Vollst&auml;ndiges Projektpraktikum
+
+## Kapitel&uuml;bersicht
+
+<ChapterIntroduction :duration="duration" :tags="['Produktdenken', 'Simulationsdaten', 'Interaktionsvervollst&auml;ndigung', 'LocalStorage']" coreOutput="1 vollst&auml;ndiger AI-Produktprototyp" expectedOutput="Eine Web-Anwendung mit vollst&auml;ndiger Kette und realen Daten">
+
+Im letzten Kapitel haben wir AI-F&auml;higkeiten integriert und das Demo l&auml;uft. Aber es ist von einem echten "Produkt" noch <strong>weit entfernt</strong>: Sobald die Seite aktualisiert wird, <strong>sind die Daten weg</strong>, bei Fehlern gibt es eine <strong>wei&szlig;e Seite</strong>, die Liste zeigt nur "Testdaten 1, Testdaten 2", und wenn der Nutzer falsch klickt, <strong>kann er es nicht r&uuml;ckg&auml;ngig machen</strong>...
+
+In diesem Kapitel werden wir <strong>alle diese L&uuml;cken f&uuml;llen</strong>: Wir werden die <strong>vollst&auml;ndige Kette des Produkts erg&auml;nzen</strong>, mit AI <strong>realistische Gesch&auml;ftsdaten</strong> generieren, anstelle von Platzhalterdaten, <strong>Fehlerbehandlung und Nutzer-Feedback</strong> hinzuf&uuml;gen und schlie&szlig;lich einen <strong>vollst&auml;ndigen Prototyp polieren, den man vorf&uuml;hren kann</strong>.
+
+Dies ist das <strong>letzte Kapitel der Anf&auml;ngerphase</strong>. Wenn Sie diesen Schritt abgeschlossen haben, haben Sie die Verwandlung von "kann &uuml;berhaupt nicht programmieren" zu "<strong>kann unabh&auml;ngig AI-Produktprototypen erstellen</strong>" vollzogen.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Kette vervollst&auml;ndigen', description: 'Von Einzelfunktion zum vollst&auml;ndigen Kreislauf' },
+      { title: 'Seele einhauchen', description: 'Echte Gesch&auml;ftsdaten simulieren' },
+      { title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
+      { title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. "Happy Path" ablehnen: Die Kernkette vervollst&auml;ndigen
+
+Viele Einsteiger erstellen Prototypen oft nur f&uuml;r den "Happy Path" (den Idealfall): Nutzer klickt &rarr; API antwortet erfolgreich &rarr; Ergebnis wird angezeigt.
+In der realen Welt l&auml;uft aber oft nicht alles so glatt. Damit Ihr Prototyp wie ein echtes Produkt aussieht, m&uuml;ssen Sie folgende "unsichtbare" Aspekte ber&uuml;cksichtigen.
+
+### 1.1 "Warten" und "Feedback" hinzuf&uuml;gen
+
+Wenn der Nutzer auf "Copywriting generieren" klickt, ben&ouml;tigt AI oft mehrere Sekunden, um zu antworten. Wenn die Oberfl&auml;che nicht reagiert, denkt der Nutzer, das Programm sei kaputt.
+**Lassen Sie die AI IDE einen Loading-Status hinzuf&uuml;gen:**
+
+> Prompt-Beispiel:
+> "Wenn ich auf den Generieren-Button klicke, &auml;ndere den Button in 'Generiere...' und deaktiviere ihn. Zeige gleichzeitig im rechten Bereich eine Lade-Animation. Erst wenn die API ein Ergebnis zur&uuml;ckgibt, kehre zum Normalzustand zur&uuml;ck."
+
+### 1.2 "Fehler" und "Ausnahmen" behandeln
+
+API Keys k&ouml;nnen ablaufen, Netzwerke k&ouml;nnen unterbrochen werden.
+**Lassen Sie die AI IDE Fehler behandeln:**
+
+> Prompt-Beispiel:
+> "Wenn die API-Anfrage feh schl&auml;gt, zeige nicht einfach einen Fehler in der Konsole, sondern zeige oben auf der Seite eine rote Benachrichtigung (Toast), die dem Nutzer sagt: 'Generierung fehlgeschlagen, bitte sp&auml;ter erneut versuchen', und erlaube dem Nutzer, erneut auf Generieren zu klicken."
+
+### 1.3 Chat-Verlauf persistieren
+
+Bei der Interaktion mit AI m&uuml;ssen wir den Konversationsinhalt speichern, damit Nutzer den Verlauf &uuml;berpr&uuml;fen und fr&uuml;here Gespr&auml;che fortsetzen k&ouml;nnen. Aktuell f&uuml;hren wir noch keine Datenbank ein; Sie k&ouml;nnen eine der folgenden leichtgewichtigen L&ouml;sungen w&auml;hlen:
+
+**Speicherl&ouml;sung-Auswahl:**
+
+| L&ouml;sung | Anwendungsbereich | Eigenschaften |
+| --- | --- | --- |
+| **LocalStorage** | Reines Frontend-Projekt, Nutzerdaten im Browser gespeichert | Einfache Implementierung, geht bei Aktualisierung nicht verloren, keine ger&auml;te&uuml;bergreifende Synchronisierung |
+| **JSON-Datei** | Lokaler Prototyp, Daten als Datei gespeichert | Klare Struktur, leicht zu debuggen, manuell bearbeitbar |
+| **TXT-Datei** | Einfachste L&ouml;sung, schnelle Textaufzeichnung | Freies Format, gute Kompatibilit&auml;t |
+
+**Beispiel f&uuml;r Konversationsinhalt:**
+Der gespeicherte Chat-Verlauf enth&auml;lt normalerweise folgende Inhalte:
+
+```json
+[
+  {
+    "role": "user",
+    "content": "Hilf mir, einen Douyin-Verkaufstext f&uuml;r Bluetooth-Kopfh&ouml;rer zu generieren",
+    "timestamp": "2026-01-20 10:30:00"
+  },
+  {
+    "role": "assistant",
+    "content": "[Bluetooth-Kopfh&ouml;rer Empfehlungstext]\n\nTsch&uuml;ss Verz&ouml;gerung, immersives H&ouml;rerlebnis\n\nHey! Diese Bluetooth-Kopfh&ouml;rer sind wirklich unglaublich\n\n40dB aktive Ger&auml;uschunterdr&uuml;ckung, sofort in die Musikwelt eintauchen\n30 Stunden Akkulaufzeit, eine Woche Pendeln ohne Aufladen\nKristallklare Anrufe wie von Angesicht zu Angesicht\nHalb-In-Ear-Design, langes Tragen ohne Schmerzen\n\nZeitlich begrenztes Angebot, klicken Sie auf den Link unten!",
+    "timestamp": "2026-01-20 10:30:05"
+  }
+]
+```
+
+**Implementierungs-Prompt:**
+
+> "Bitte implementiere eine Chat-Verlauf-Speicherfunktion. Unterst&uuml;tze das Speichern von Nutzer- und AI-Konversationsaufzeichnungen als JSON-Datei (oder verwende LocalStorage). Lade beim &Ouml;ffnen der Seite automatisch den Verlauf und unterst&uuml;tze das Anzeigen und L&ouml;schen einzelner Konversationsaufzeichnungen."
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Kette vervollst&auml;ndigen', description: 'Von Einzelfunktion zum vollst&auml;ndigen Kreislauf' },
+      { title: 'Seele einhauchen', description: 'Echte Gesch&auml;ftsdaten simulieren' },
+      { title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
+      { title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Seele einhauchen: Echte Daten simulieren (Mock Data)
+
+Eine leere Seite kann niemanden &uuml;berzeugen. Stellen Sie sich vor, Sie pr&auml;sentieren einen "E-Commerce-Material-Workspace", aber der Verlauf ist v&ouml;llig leer oder zeigt nur eine Zeile "test / test / test".
+F&uuml;r die bestm&ouml;gliche Demo-Wirkung m&uuml;ssen wir "realistische Daten f&auml;lschen", damit Ihr Prototyp wie ein echtes Produkt aussieht, das seit einem halben Jahr in Betrieb ist.
+
+### 2.1 AI beim Entwerfen der Datenstruktur helfen lassen
+
+Wir m&uuml;ssen nicht selbst &uuml;berlegen, wie jedes Feld hei&szlig;en soll (z.B. `name` oder `title`). Das k&ouml;nnen wir komplett AI &uuml;berlassen.
+
+Sie m&uuml;ssen AI nur Ihr **Gesch&auml;ftsszenario** mitteilen:
+
+> **Prompt-Beispiel:**
+> "Ich arbeite an einem Prototyp f&uuml;r einen **Douyin E-Commerce Material-Workspace**.
+> Bitte entwerfe eine JSON-Datenstruktur, die eine 'Produktaufgabe' beschreibt.
+> Diese Aufgabe sollte enthalten: Produktbasisinformationen (Name, Kategorie), Eingabematerialien (Bild-Links) sowie AI-generierte Ergebnisse (Titel, Copywriting, Poster-Bild).
+> Bitte gib mir direkt ein JSON-Beispiel."
+
+AI wird basierend auf Ihrer Beschreibung automatisch Felder wie `productName`, `generatedContent` usw. vorschlagen.
+
+### 2.2 AI "realistische" Daten in Batch produzieren lassen
+
+Nachdem die Datenstruktur steht, ist der n&auml;chste Schritt, AI beim "Ausf&uuml;llen" zu helfen und einen Satz realistisch aussehender Daten zu generieren.
+
+**Prompt-Techniken:**
+Sie k&ouml;nnen AI nicht einfach sagen "Generiere Daten f&uuml;r mich". Sie m&uuml;ssen es wie einem Praktikanten eine Aufgabe stellen und ihm **Gesch&auml;ftskontext** und **Inhaltsanforderungen** mitteilen:
+
+- **Gesch&auml;ftskontext**: Erkl&auml;ren Sie AI, dass wir im "Douyin E-Commerce" t&auml;tig sind, also sollten Produkttitel aufmerksamkeitsstark sein (z.B. "Figur-schmeichelndes Wunder", "Studierenden-Must-have") und das Copywriting umgangssprachlich sein.
+- **Bildanforderungen**: Damit der Prototyp gut aussieht, sollten die Bilder keine schwarz-wei&szlig;en Platzhalter sein, sondern am besten zuf&auml;llige bunte Landschafts- oder Produktfotos.
+
+> **Prompt-Beispiel:**
+> "Bitte generiere basierend auf der soeben erstellten Struktur 10 realistische Simulationsdaten.
+> (Hinweis: Nicht zwingend im JSON-Format. Wenn Sie Frontend schreiben, k&ouml;nnen Sie direkt JavaScript-Arrays generieren; bei Python Listen.)
+>
+> **Gesch&auml;ftsszenario-Anforderungen**:
+>
+> 1. Angenommen, dies ist ein Kaufhaus, das Produkte in den Kategorien 'Damenmode', 'Elektronik' und 'Kosmetik' umfasst.
+> 2. **Generierte Titel und Copywriting sollten sehr 'Douyin-Stil' sein**: Titel sollten Emojis enthalten, Copywriting im umgangssprachlichen 'Unglaublich!'-Stil verfasst sein.
+> 3. **Bildfeld**: Bitte einheitlich das Format `https://picsum.photos/seed/{random_id}/300/400` verwenden, um sicherzustellen, dass jedes Bild anders ist."
+
+**Generiertes Mock-Data-Beispiel:**
+
+```javascript
+export const mockProductTasks = [
+  {
+    id: 'task_001',
+    name: 'Sommerkleid im franz&ouml;sischen Vintage-Blumenstil',
+    status: 'completed',
+    input: {
+      category: 'Damenmode',
+      features: ['Taillenbetonung', 'Figurschmeichelnd', 'Elegant'],
+      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
+    },
+    output: {
+      generatedTitle: 'Wer es tr&auml;gt sieht toll aus! Dieses franz&ouml;sische Blumenkleid ist wirklich unglaublich',
+      generatedCopy:
+        'M&auml;dels! Dieses Kleid ist wirklich figurschmeichelnd! Die taillenbetonende Design ist genial, sofort hat man eine Taille. Der Stoff ist sehr atmungsaktiv, im Sommer tr&auml;gt man es gar nicht schw&uuml;l. Perfekt f&uuml;r Dates und Shopping! ',
+      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
+    },
+    createdAt: '2026-01-20T10:00:00Z'
+  },
+  {
+    id: 'task_002',
+    name: 'Super Noise-Cancelling Bluetooth Kopfh&ouml;rer Pro',
+    status: 'completed',
+    input: {
+      category: 'Elektronik',
+      features: ['Noise-Cancelling', 'Ultra-Lange Akkulaufzeit', 'Niedrige Latenz'],
+      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
+    },
+    output: {
+      generatedTitle: ' Endlich gefunden! Die Noise-Cancelling dieser Kopfh&ouml;rer ist unglaublich stark!',
+      generatedCopy:
+        'Aufsetzen und die Welt wird sofort leise. Unglaubliche Klangqualit&auml;t, Musik h&ouml;ren wie live. Die Akkulaufzeit ist auch beeindruckend, einmal aufladen reicht f&uuml;r eine Woche! Ein Must-have f&uuml;r Studierende!',
+      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
+    },
+    createdAt: '2026-01-21T14:30:00Z'
+  }
+  // ... weitere Daten
+]
+```
+
+### 2.3 (Fortgeschritten) Mit LocalStorage "Pseudo-CRUD" implementieren
+
+Wenn Sie m&ouml;chten, dass die generierten "Simulationsdaten" nicht nur angezeigt, sondern auch gel&ouml;scht, ge&auml;ndert und sogar nach dem Aktualisieren der Seite noch vorhanden sind, k&ouml;nnen Sie `LocalStorage` verwenden.
+
+> **Prompt-Beispiel:**
+> "Bitte implementiere eine Datenspeicherfunktion.
+>
+> 1. Priorit&auml;t: Zun&auml;chst Daten aus `localStorage` lesen.
+> 2. Wenn `localStorage` leer ist, mit den generierten Mock-Daten initialisieren und in `localStorage` speichern.
+> 3. Schreibe zus&auml;tzlich `addProductTask` und `deleteProductTask` Funktionen, die bei jeder Operation `localStorage` synchron aktualisieren."
+
+Durch diesen Schritt erh&auml;lt Ihr Prototyp "Ged&auml;chtnis" und die Nutzererfahrung ist nahezu identisch mit einem echten Produkt.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Kette vervollst&auml;ndigen', description: 'Von Einzelfunktion zum vollst&auml;ndigen Kreislauf' },
+      { title: 'Seele einhauchen', description: 'Echte Gesch&auml;ftsdaten simulieren' },
+      { title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
+      { title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Feedback sammeln und schnell iterieren
+
+Man kann kein gutes Produkt hinter verschlossenen T&uuml;ren entwickeln. Jetzt hat Ihr Prototyp "Kernfunktionen" + "vollst&auml;ndige Kette" + "Demo-Daten" und es ist Zeit, ihn anderen zu zeigen.
+
+### 3.1 Wen zum Testen einladen? Wie testen?
+
+- **Freunde/Kollegen finden**: Sie m&uuml;ssen nicht technikversiert sein, sie m&uuml;ssen es nur einmal ausprobieren.
+- **Beobachten statt leiten**: Nicht "Klick hier" sagen, sondern sehen, wohin sie klicken w&uuml;rden. Wenn sie den Button nicht finden, liegt ein Designproblem vor.
+- **"Wizard of Oz"-Methode**: Wenn Ihre AI noch nicht angeschlossen ist, k&ouml;nnen Sie manuell im Hintergrund (oder in der Datenbank) Daten &auml;ndern, um die AI-R&uuml;ckgabe zu simulieren und zun&auml;chst zu validieren, ob Nutzer diese Funktion ben&ouml;tigen.
+
+### 3.2 Mit Bugs und Kritik umgehen
+
+- **Layout-Probleme**: Auf verschiedenen Bildschirmgr&ouml;&szlig;en kann es chaotisch aussehen.
+  - **Aktion**: Screenshot an AI IDE senden &rarr; "Bei dieser Bildschirmbreite ist es verschoben, bitte reparieren."
+- **Ungeschickte Bedienung**: "Dieser Prozess ist zu umst&auml;ndlich".
+  - **Aktion**: Den Vorschlag an AI IDE weitergeben &rarr; "Nutzer finden Hochladen und dann Generieren zu langsam, kann man es zu einem Klick zusammenfassen?"
+- **Neue Anforderungen**: "Wenn es diese Funktion g&auml;be, w&auml;re es toll."
+  - **Aktion**: Pr&uuml;fen, ob es zum Kern geh&ouml;rt; wenn ja, AI eine vereinfachte Version schnell implementieren lassen.
+
+**Merken: In dieser Phase ist AI Ihr bester Modifikationsassistent. Sie sind nur f&uuml;r die Problemerkennung verantwortlich, die Code-&Auml;nderung &uuml;bernimmt AI.**
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Kette vervollst&auml;ndigen', description: 'Von Einzelfunktion zum vollst&auml;ndigen Kreislauf' },
+      { title: 'Seele einhauchen', description: 'Echte Gesch&auml;ftsdaten simulieren' },
+      { title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
+      { title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. Abschlussprojekt: Vervollst&auml;ndigen Sie Ihre "Abschlussarbeit"
+
+Herzlichen Gl&uuml;ckwunsch! Sie haben den gesamten Prozess von "Anforderungen" &uuml;ber "Prototyp" bis "AI-Integration" durchlaufen. Jetzt ist es Zeit, Ihr finales Ergebnis zu pr&auml;sentieren.
+
+**Dieses Abschlussprojekt ist nicht mehr auf den "E-Commerce Material-Workspace" beschr&auml;nkt.** Sie m&uuml;ssen basierend auf Ihren Interessen oder Branchenhintergrund einen einzigartigen AI-Produktprototyp entwickeln.
+
+### Themenauswahl und Anforderungen
+
+Sie m&uuml;ssen das Szenario w&auml;hlen, das Ihnen am ehesten entspricht, aus der **[Mehrbranchen-Szenarioreferenz](../appendix-industry-scenarios/index.md)**, oder ein v&ouml;llig neues Szenario basierend auf Ihren eigenen Ideen entwerfen.
+
+**Das Projekt muss alle Inhalte aus den vorherigen Lektionen integriert nutzen:**
+
+1. **Prototyp-Erstellung**: Frontend-Technologie verwenden, um eine &auml;sthetische, benutzerfreundliche Oberfl&auml;che zu erstellen.
+2. **Anforderungskontrolle**: Nicht alles auf einmal, aber die Kernfunktionslogik muss geschlossen sein.
+3. **API-Integration**: Echte AI-Modelle (LLM/VLM etc.) integrieren, um der Anwendung echte Intelligenz zu verleihen.
+4. **Eine spielbare Anwendung erstellen**: Nicht nur statische Seiten, sondern eine dynamische Anwendung mit Datenfluss und Interaktions-Feedback.
+
+### Projekt-Outputs
+
+Am Ende m&uuml;ssen Sie Folgendes einreichen:
+
+1. **Eine vollst&auml;ndige Prototyp-Anwendung**: Online bereitgestellt oder lokal ausf&uuml;hrbar, mit vollst&auml;ndiger Nutzungskette.
+2. **Ein 30-Sekunden-Demo-Video**: Ein Video aufnehmen, das kurz Ihr Anwendungsszenario vorstellt und die Kernfunktionen in Aktion zeigt.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Abschlussherausforderung-Checkliste</div>
+  </template>
+
+  <p>
+    Dies ist die letzte Herausforderung von Stage 1. Bitte &uuml;berpr&uuml;fen Sie Ihr Werk anhand der folgenden Checkliste:
+  </p>
+
+  <div style="font-weight: bold; margin-bottom: 10px;">Kernfunktionen-Selbstpr&uuml;fung</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Klares Szenario</strong>: Ein konkretes Branchen- oder Anwendungsszenario ausgew&auml;hlt</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Geschlossene Logik</strong>: Kernprozess funktioniert, nicht nur der Happy Path</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>AI-getrieben</strong>: Echte LLM-API aufgerufen, keine vordefinierten Antworten</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Vollst&auml;ndige Erfahrung</strong>: Loading, Fehlerbehandlung und Simulationsdaten enthalten</label></li>
+  </ul>
+
+  <div style="font-weight: bold; margin: 20px 0 10px;">Liefergegenst&auml;nde</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Prototyp-Anwendung</strong>: Code ist fertiggestellt und ausf&uuml;hrbar</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Demo-Video</strong>: Etwa 30 Sekunden, zeigt klar die Kern-Highlights</label></li>
+  </ul>
+</el-card>
+
+## N&auml;chste Schritte
+
+Nach Abschluss des Abschlussprojekts verf&uuml;gen Sie &uuml;ber die F&auml;higkeit, "unabh&auml;ngig AI-Anwendungsprototypen zu entwickeln".
+In Stage 2 werden wir uns mit komplexerer Full-Stack-Entwicklung befassen und lernen, wie man diesen Prototypen in eine echte, online-f&auml;hige, datenbankgest&uuml;tzte Anwendung mit Benutzersystem verwandelt.
+
+Wir sehen uns im n&auml;chsten Stage!
+
+<RelatedArticlesSection
+  title="Weiter fortgeschritten"
+  description="Herzlichen Gl&uuml;ckwunsch zum Abschluss von Stage 1. Diese Kapitel helfen Ihnen, in die professionelle Entwicklung &uuml;berzugehen."
+  :items="relatedArticles"
+/>
diff --git a/docs/de-de/stage-1/finding-great-idea/index.md b/docs/de-de/stage-1/finding-great-idea/index.md
new file mode 100644
index 0000000..a6bbb19
--- /dev/null
+++ b/docs/de-de/stage-1/finding-great-idea/index.md
@@ -0,0 +1,1078 @@
+---
+title: 'Gute Ideen finden - Von Nutzerbedürfnissen zu zahlungsbereiten Kunden'
+description: 'Lernen Sie, wie Sie aus alltäglichen Schmerzpunkten Geschäftschancen entdecken, beherrschen Sie systematische Methoden der Bedarfsanalyse und verwandeln Sie gewöhnliche Ideen in Produktkonzepte, für die Nutzer zu zahlen bereit sind.'
+---
+
+<script setup>
+const duration = 'Etwa <strong>3 Stunden</strong>'
+</script>
+
+# Anfänger II: Gute Ideen finden
+
+## Kapitelübersicht
+
+<ChapterIntroduction :duration="duration" :tags="['Bedarfserkennung', 'Produktdenken', 'Nutzeranalyse', 'Geschäftsmodell']" coreOutput="3 validierte Produktkonzepte" expectedOutput="Umsetzbare Gründungs-/Produktrichtung">
+
+Wir haben gelernt, mit AI IDE Dinge zu erstellen, aber es gibt eine grundlegendere Frage: <strong>Was erstellen?</strong>
+
+Viele wollen sofort „ein AI-Tool" oder „eine Social Platform" entwickeln, aber das Ergebnis ist ein Produkt, das niemand nutzt. Wo liegt das Problem? <strong>Der echte Bedarf wurde nicht gefunden.</strong>
+
+Die noch härtere Realität: <strong>Viele Produkte lösen zwar Probleme, aber Nutzer sind einfach nicht bereit zu bezahlen.</strong>
+
+In diesem Kapitel lernen wir anhand der Geschichte von Xiao Ming, wie man Produktrichtungen findet, die es wert sind, umgesetzt zu werden.
+
+Nach Abschluss dieses Kapitels werden Sie über eine <strong>vollständige Methodik zur Ideenfindung</strong> sowie 3 validierte Produktkonzepte verfügen.
+
+</ChapterIntroduction>
+
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Schritt 1', description: 'Beurteilungskriterien aufbauen' },
+      { title: 'Schritt 2', description: 'Alltägliche Schmerzpunkte entdecken' },
+      { title: 'Schritt 3', description: 'Zielgruppen horizontal aufteilen' },
+      { title: 'Schritt 4', description: 'Szenarien vertikal vertiefen' },
+      { title: 'Schritt 5', description: 'Bedarfswahrheit validieren' },
+      { title: 'Schritt 6', description: 'Produktkonzept polieren' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Schritt 1: Beurteilungskriterien aufbauen —— Welche Bedürfnisse Nutzer zum Bezahlen bewegen
+
+::: warning Warum ist dieses Kapitel so wichtig?
+
+Manche finden es vielleicht seltsam: „Ist das nicht ein Kurs über Vibe Coding? Warum zuerst ‚Bedarfsfindung' lernen? Kann man nicht einfach direkt mit dem Code anfangen?"
+
+Natürlich bringen viele Programmierkurse Ihnen direkt Projekte bei: eine Todo-Liste, einen Taschenrechner, einen persönlichen Blog... Diese Projekte helfen Ihnen zwar, Syntax und Tools zu beherrschen, aber das Problem ist:
+
+<strong>Falsche Richtung heißt: Je tiefer, desto falscher.</strong>
+
+Stellen Sie sich vor:
+- Sie verbringen zwei Wochen mit einem „Kalender-Management-System", aber es gibt bereits 100 bessere auf dem Markt
+- Sie erstellen eine „Kalorien-Foto-Berechnung", aber Nutzer deinstallieren sie nach einmaliger Nutzung
+- Sie bauen ein „persönliches Haushaltsbuch", aber nicht einmal Sie selbst nutzen es regelmäßig
+
+Diese Projekte können Sie nicht in Ihren Lebenslauf aufnehmen, weil <strong>sie keine echten Probleme lösen und keinen echten Wert schaffen</strong>.
+
+Noch härter: Wenn wir schon Zeit investieren, warum nicht bessere Ergebnisse anstreben?
+
+Da Vibe Coding uns ermöglicht, Ideen schnell in Produkte umzusetzen, sollten wir auch lernen, <strong>Ideen zu finden, die es wert sind, umgesetzt zu werden</strong>. Mit einem Ansatz, der nah an der Praxis ist, trainieren wir uns – nicht „Übungsprojekte", sondern „Produkte, die Leute nutzen wollen".
+
+Deshalb lernen wir zuerst „gute Ideen finden".
+
+---
+
+**Meine persönliche Meinung:** Zeit ist sehr kostbar. **Wenn wir es tun, dann machen wir es richtig.** Warum sonst nicht einfach spielen? Als Verantwortung werde ich mein Bestes tun, um Sie zu unterstützen.
+
+Auch wenn niemand glaubt, dass Sie es gut machen kann, werde ich fest daran glauben, dass Sie Ihr Bestes geben. Mit Vibe Coding Produkte entwickeln – versuchen Sie herauszufinden, wie weit Sie kommen können!
+
+:::
+
+
+---
+
+## Einstieg: Die Geschichte des Indie-Entwicklers Xiao Ming
+
+Xiao Ming ist Programmierer seit drei Jahren. Eines Tages kam ihm die Idee: Eine Fitness-APP entwickeln, die Nutzern hilft, Trainingspläne zu erstellen und Trainingsdaten aufzuzeichnen. Diese Idee machte ihn sehr aufgeregt; er glaubte, endlich ein Projekt gefunden zu haben, das er umsetzen konnte.
+
+Im folgenden Jahr investierte Xiao Ming fast seine gesamte Freizeit. Er entwickelte eine funktionsreiche APP – Kursmodul, Check-in-System, Community-Funktion, Datenanalyse, alles war vorhanden. Das Interface sah auch ganz gut aus, zumindest seiner Meinung nach.
+
+Am Launch-Tag war Xiao Ming voller Erwartungen. Er gab viel Geld für Werbung aus und im ersten Monat wurde die APP 50.000 Mal heruntergeladen. Das klingt nach einem guten Start, oder?
+
+Aber bald traten Probleme auf. Nutzer luden die APP herunter, nutzten sie einmal und deinstallierten sie. Die 7-Tage-Retention lag bei nur 5%. Er integrierte mehrere kostenpflichtige Funktionen, aber fast kein Nutzer war bereit zu bezahlen. Noch frustrierender: Keep, Bohee Health, FitTime und andere etablierte Produkte hatten mehr Funktionen, besseren Inhalt – warum sollten Nutzer zu seiner APP wechseln?
+
+Nach einem Jahr hatte Xiao Ming 200.000 Yuan verloren.
+
+Er saß vor dem Computer, sah die düsteren Backend-Daten und stellte sich nur eine Frage: Meine APP ist doch ganz gut – warum nutzt sie niemand? Und warum will niemand dafür bezahlen?
+
+
+
+Xiao Mings Scheitern lag nicht an mangelnden technischen Fähigkeiten und auch nicht daran, dass das Produkt schlecht war. Ehrlich gesagt: Seine APP hatte viele Funktionen und ein ansprechendes Interface.
+
+**Das Problem lag am Startpunkt.**
+
+Er hatte nie die grundlegendste Frage gestellt: Brauchen die Nutzer das wirklich?
+
+Er sah, dass der Fitness-APP-Markt riesig war und Keep mit Milliarden bewertet wurde, und hielt es für eine gute Gelegenheit. Aber er hatte einige Dinge nicht geklärt: Warum brauchen Nutzer eine weitere Fitness-APP? Was ist meine Differenzierung gegenüber Keep? Sind die Nutzer bereit, dafür zu bezahlen?
+
+**Falsche Richtung: Je tiefer, desto falscher.** Er verbrachte ein Jahr damit, eine falsche Richtung immer weiter zu perfektionieren – und entfernte sich nur immer weiter vom Erfolg.
+
+
+::: tip Was wir in diesem Kapitel tun
+
+Lassen Sie uns Xiao Mings Fall gemeinsam analysieren. Schauen wir, wo genau das Problem lag, und finden wir dann Produktrichtungen, für die Nutzer wirklich zu zahlen bereit sind.
+
+Wir gehen in drei Akten vor:
+
+**Akt 1: Echte Bedürfnisse finden** —— Klären, welche Art von Bedürfnissen Nutzer zum Bezahlen bewegen
+
+**Akt 2: Gute Ideen entdecken** —— Lernen, aus gewöhnlichen Gedanken wertvolle Geschäftschancen zu heben
+
+**Akt 3: Mit AI verfeinern** —— Ideen mit AI in umsetzbare Produktlösungen verwandeln
+
+:::
+---
+
+## Akt 1: Echte Bedürfnisse finden
+
+Xiao Ming war frustriert, aber er gab nicht auf. Er begann, über eine Frage nachzudenken: Welche Art von Bedürfnissen bringt Nutzer dazu zu bezahlen?
+
+### Xiao Mings Verwirrung: Warum zahlen Nutzer nicht?
+
+Er suchte mehrere Freunde auf, die seine APP genutzt hatten, um ihre ehrliche Meinung zu hören.
+
+Freund A sagte: „Deine APP ist ganz gut, aber ich nutze bereits Keep. Warum sollte ich wechseln?"
+
+Freund B sagte: „Du willst, dass ich jedes Training aufzeichne. Das ist zu mühsam, ich bin zu faul dafür."
+
+Freund C sagte direkter: „Die kostenlosen Funktionen reichen mir. Warum sollte ich bezahlen?"
+
+Diese Antworten ließen Xiao Ming plötzlich erkennen, wo das Problem lag.
+
+**Erstes Problem: Nutzer wechseln nicht, weil die bestehende Lösung bereits gut genug ist.** Keep und andere etablierte Produkte haben bereits umfassende Funktionen und die Nutzer haben sich an Gewohnheiten gewöhnt. Die Wechselkosten sind hoch. Warum sollten Nutzer zu einem ähnlichen Produkt wechseln?
+
+**Zweites Problem: Nutzer sind nicht bereit, Gewohnheiten zu ändern.** Training aufzuzeichnen ist für Nutzer zu mühsam. Wenn ein Produkt den Nutzer verlangt, mehr als 3 Gewohnheiten zu ändern, wird es wahrscheinlich scheitern.
+
+**Drittes Problem: Es gibt zu viele kostenlose Alternativen.** Die Funktionen sind zu generisch, haben keinen einzigartigen Wert, und Nutzer finden keinen Grund zu bezahlen.
+
+### Was sind echte Bedürfnisse?
+
+Xiao Ming begann, erfolgreiche Produkte zu studieren, die Nutzer zum Bezahlen bewegen. Er entdeckte eine Gemeinsamkeit: Diese Produkte lösten keine „Ich finde es nützlich"-Bedürfnisse, sondern Bedürfnisse, für die Nutzer zu zahlen, ihr Verhalten zu ändern und Unannehmlichkeiten in Kauf zu nehmen bereit waren.
+
+Mit anderen Worten: **Echte Bedürfnisse werden durch die Füße der Nutzer bestätigt, nicht von Produktmanagern ausgedacht.**
+
+### Fallstudie: Produkte, die Nutzer zum Bezahlen bewegen
+
+Xiao Ming untersuchte mehrere erfolgreiche Beispiele, um zu verstehen, welche Schmerzpunkte sie genau trafen.
+
+#### Meicaiwang: Kleinen Restaurant-Besitzern eine gute Nachtruhe ermöglichen
+
+Oberflächlich betrachtet macht Meicaiwang etwas sehr Einfaches: Restaurants beim Gemüsekauf helfen. Aber wenn man genauer hinsieht, warum nutzen Restaurant-Besitzer es?
+
+Weil kleine Restaurant-Besitzer täglich um 4 Uhr morgens aufstehen müssen, um zum Großmarkt zu gehen – sehr anstrengend und oft übervorteilt. Meicaiwang tut nicht einfach „E-Commerce-Gemüseverkauf", sondern restrukturiert die gesamte Lieferkette, damit Restaurant-Besitzer besser schlafen können.
+
+Je schmerzhafter der Schmerzpunkt, desto stärker die Zahlungsbereitschaft. Die eingesparte Zeit und Energie sind wertvoller als das gesparte Gemüse-Geld.
+
+#### Xiaohongshu: Entscheidungsschwierigkeiten lösen
+
+Oberflächlich ist Xiaohongshu „Einkaufs-Erfahrungen im Ausland teilen". Aber warum sind Nutzer bereit, Zeit damit zu verbringen, Notizen zu lesen?
+
+Weil Nutzer angesichts einer Flut von Produkten nicht wissen, was sich zu kaufen lohnt und was nicht. Sie brauchen eine vertrauenswürdige Person, die ihnen beim Filtern hilft, Zeit spart und Fehler vermeidet.
+
+Xiaohongshu löst tatsächlich zwei tiefe Schmerzpunkte: Entscheidungsschwierigkeiten und Vertrauensmangel. Nutzer sind bereit, für „Zeit sparen" und „Fehler vermeiden" zu bezahlen. Deshalb konnte Xiaohongshu erfolgreich werden.
+
+---
+
+Nach diesen Fallstudien hatte Xiao Ming eine wichtige Entdeckung gemacht.
+
+Nutzer bezahlen nie für „Funktionen", sondern für „Angst lösen" und „Unsicherheit beseitigen". Meicaiwang löst die Angst kleiner Restaurant-Besitzer vor der Mühsal des frühen Einkaufs, Xiaohongshu löst die Angst der Nutzer vor Fehlkäufen.
+
+**Angst treibt Zahlungen an, Unsicherheit treibt Handlungen an.**
+
+### Die drei Ebenen von Bedürfnissen: Schmerzpunkte, Freude-Punkte und Juckpunkte
+
+Xiao Ming entdeckte bei weiteren Untersuchungen, dass Nutzerbedürfnisse in drei Typen unterteilt werden können:
+
+::: tip Schmerzpunkte (Pain Point) —— Angstgetrieben
+
+**Essenz:** Probleme, die Nutzer gerade durchmachen und die Schmerz, Angst oder Unbequemlichkeit verursachen. Wenn sie nicht gelöst werden, fühlt es sich sehr schlecht an – es kann sogar Überleben oder Sicherheit gefährden.
+
+**Beispiele:**
+- Diabetiker wissen nicht, wie viele Kohlenhydrate den Blutzucker in die Höhe treiben (Angst: Gesundheitsgefahr)
+- Kleine Restaurant-Besitzer stehen um 4 Uhr morgens auf, um zum Großmarkt zu gehen (Angst: Mühsal beim Überleben)
+
+**Kern:** Nutzer sind bereit dafür zu bezahlen, weil es „sehr weh tut", wenn es ungelöst bleibt.
+
+:::
+
+::: tip Freude-Punkte (Delight Point) —— Sofortige Befriedigung
+
+**Essenz:** Nutzer haben ein Bedürfnis, das sofort befriedigt werden kann und sofortige Freude erzeugt.
+
+**Beispiele:**
+- Essensbestellung in 30 Minuten geliefert (sofortige Hunger-Befriedigung)
+- Ein-Klick-generierte ansprechende PPT (Zeit- und Energieersparnis als Freude-Erlebnis)
+
+**Kern:** Nutzer „Freude" zu bereiten ist der Schlüssel zur Retention, aber allein als Zahlungspunkt weniger stark.
+:::
+
+::: tip Juckpunkte (Itch Point) —— Virtuelles Selbstbild
+
+**Essenz:** Nutzer möchten besser, cooler, raffinierter werden, aber es ist nicht zwingend erforderlich. Wenn es erfüllt wird, sind sie glücklich; wenn nicht, ist es auch okay.
+
+**Beispiele:**
+- Tägliche Trinkwassermenge aufzeichnen (vorgestelltes diszipliniertes Leben)
+- Fotos mit AI-Kunstfiltern versehen (vorgestellter künstlerischer Geschmack)
+
+**Kern:** Die Zahlungsbereitschaft für „Juckpunkte" ist geringer, weil es auch ohne Lösung in Ordnung ist.
+
+:::
+
+Wie sieht die richtige Prioritätsreihenfolge aus? Ein guter Rat lautet: Schmerzpunkte > Freude-Punkte > Juckpunkte
+
+Warum?
+
+1. **Schmerzpunkte sind Überlebensbedürfnisse:** Wenn sie nicht gelöst werden, ist es unerträglich (oder bedrohlich), Nutzer müssen zahlen. Es ist ein „Schmerzmittel".
+2. **Freude-Punkte sind sofortige Belohnungen:** Wenn Nutzer sich freuen, kommen sie wieder. Es ist „Heroin" (positiv gemeinte Suchtmechanismen).
+3. **Juckpunkte sind Wunscherfüllungen:** Optional, am leichtesten wegzulassen. Es sind „Vitamine" oder „Luxusgüter".
+
+**Schlüsselerkenntnis:** Der Fehler vieler Produktmanager besteht darin, Juckpunkte-Produkte wie Schmerzpunkte zu vermarkten.
+
+Zum Beispiel: „Wasser aufzeichnen macht Sie gesünder" – Wasser trinken ist zwar gesund, aber ohne Aufzeichnung ist man nicht ungesund. Hier wird ein Juckpunkt als Schmerzpunkt verpackt, und Nutzer werden nicht darauf anspringen.
+
+### Die 5-Schritte-Methode zur Validierung echter Bedürfnisse
+
+Xiao Ming dachte: **Wenn ich eine Idee habe, wie kann ich schnell beurteilen, ob sie investitionswürdig ist?**
+
+Er erlernte die von Produktmanagern häufig verwendete 5-Schritte-Beurteilungsmethode (Details siehe Anhang A):
+
+1. **Schritt 1: Direkt mit echten Nutzern sprechen, ihre aktuellen Vorgehensweisen verstehen**
+
+   Finden Sie 10 Zielgruppen-Nutzer. Fragen Sie: „Wie lösen Sie dieses Problem aktuell?" Wenn Nutzer bereits eine Methode verwenden, besteht das Problem tatsächlich. Wenn Nutzer sagen, es muss nicht gelöst werden, ist es möglicherweise kein echtes Bedürfnis.
+
+2. **Schritt 2: Die bestehenden Alternativen der Nutzer analysieren und Ihre Vorteile finden**
+
+   Nutzer verwenden möglicherweise andere Produkte, Excel, ihr Gedächtnis, oder sie ertragen das Problem einfach. Sie müssen herausfinden, welche Nachteile diese Lösungen haben. Ihr Produkt muss deutlich besser sein, damit Nutzer wechseln wollen.
+
+3. **Schritt 3: Testen, ob Nutzer für Ihr Produkt bezahlen wollen**
+
+   Machen Sie Vorverkäufe oder nehmen Sie Anzahlungen. Erfassen Sie den Anteil der Nutzer, die bereit sind, Anzahlung zu leisten (je früher Sie Geld verdienen, desto eher ist das Bedürfnis echt):
+   - Über 10%: Bedürfnis ist echt, investitionswürdig
+   - 5% bis 10%: Bedürfnis existiert, muss aber noch geschliffen werden
+   - Unter 5%: Bedürfnis besteht möglicherweise nicht
+
+4. **Schritt 4: Abschätzen, wie groß dieser Markt ist und ob sich damit Geld verdienen lässt**
+
+   Berechnen Sie drei Zahlen: Gesamtzahl der Ziel-Nutzer × Zahlungsbereitschaft × Durchschnittseinkommen pro Nutzer. Multiplizieren Sie diese, um die Marktgröße zu erhalten. Wenn der Markt zu klein ist, lohnt es sich möglicherweise nicht.
+
+5. **Schritt 5: Überlegen, welchen Burggraben Ihr Produkt hat, um Nachahmung zu verhindern**
+
+   Berücksichtigen Sie diese Barrieren: Technische Schwierigkeit, Netzwerkeffekt, Marke, Kostenvorteil. Diese helfen Ihnen, langfristig wettbewerbsfähig zu bleiben.
+
+**Zusammenfassung dieses Aktes: Xiao Mings Erkenntnisse**
+
+1. **Kriterien für echte Bedürfnisse**
+   - Das wichtigste Kriterium ist, dass Nutzer bereit sind zu bezahlen.
+   - Nutzer sind bereit, dafür ihr Verhalten zu ändern.
+   - Ohne Lösung erleiden Nutzer erhebliche Verluste.
+
+2. **Falsche Bedürfnisse vermeiden**
+   - Juckpunkte sind keine Schmerzpunkte und können nicht als echte Bedürfnisse behandelt werden.
+   - Der Markt ist zu klein, um ein Geschäftsmodell zu tragen.
+   - Die Lösung ist komplizierter als das Problem, Nutzer werden aufgeben.
+
+3. **Prioritätsreihenfolge**
+   - Die tatsächliche Priorität lautet: Schmerzpunkte > Freude-Punkte > Juckpunkte.
+
+**Output dieses Aktes**
+- Ich verstehe, was echte Bedürfnisse sind.
+- Ich habe die dreistufige Klassifizierung von Bedürfnissen gelernt: Schmerzpunkte, Freude-Punkte, Juckpunkte.
+- Ich habe die 5-Schritte-Beurteilungsmethode zur Validierung von Bedürfnissen gelernt.
+
+---
+
+## Akt 2: Gute Ideen entdecken
+
+Xiao Ming weiß jetzt, was echte Bedürfnisse sind, aber er weiß immer noch nicht, wo er anfangen soll. Man kann doch nicht einfach ein Bedürfnis aus dem Nichts erfinden?
+
+Er beschloss, bei dem anzufangen, was ihm am vertrautesten ist – bei den Menschen und Dingen um ihn herum.
+
+### Von sich ausgehend: Xiao Mings Schwester
+
+Xiao Ming dachte an seine Schwester. Sie hatte gerade ein Kind bekommen und beschwerte sich ständig, keine Zeit zum Trainieren zu haben, die Pfunde am Bauch nicht loszuwerden und sehr angespannt zu sein.
+
+Eines Tages fragte er sie: „Wie löst du aktuell dein Fitness-Problem?"
+
+Seine Schwester seufzte: „Ich trainiere mit Keep, aber die Übungen sind für den Körper nach der Entbindung nicht geeignet, danach tut der Rücken noch mehr weh. Ins Fitnessstudio gehen? Niemand passt auf das Baby auf. Personal Trainer buchen? 300 bis 500 Yuan pro Stunde, zu teuer. Alleine trainieren? Angst vor Verletzungen."
+
+Nachdem Xiao Ming das gehört hatte, dachte er, dass dies das echte Bedürfnis sein könnte, das er gesucht hatte.
+
+Die Probleme seiner Schwester waren tatsächlich sehr konkret: Zeit ist fragmentiert, sie muss auf das Baby aufpassen, hat keine zusammenhängende Zeit zum Trainieren; körperliche Einschränkungen, Rectus-Diastase (gerissene Bauchmuskeln), Beckenboden-Schwäche, kein intensives Training möglich; psychische Anspannung, veränderte Figur, Angst, dass ihr Mann sie nicht mehr attraktiv findet, soziale Unsicherheit; Informationschaos, zu viele Online-Infos, keine Ahnung, welche Übungen postpartal geeignet sind; und Einsamkeit, niemand versteht ihre Situation, fehlende Gleichgesinnte.
+
+Das sind alles echte Schmerzpunkte, keine „schön-wäre"-Juckpunkte.
+
+---
+
+### Horizontale Aufteilung: Bedürfnisse unterschiedlicher Zielgruppen
+
+Xiao Ming erkannte, dass die Idee „Fitness-APP" zu allgemein war. Er wollte allen beim Trainieren helfen, aber das Problem war, dass die Bedürfnisse aller unterschiedlich sind.
+
+Er machte eine horizontale Aufteilung und teilte „Personen, die trainieren wollen" in mehrere Gruppen (detaillierte Methode siehe Anhang B):
+
+Fitness- und Muskelaufbau-Interessierte müssen ihre Proteinaufnahme genau berechnen, manuelle Aufzeichnung ist zu mühsam, ihre Zahlungsbereitschaft ist hoch, sie streben nach Effizienz. Diabetiker müssen Kohlenhydrate streng kontrollieren, aber beim Essen außerhaus ist das schwer abzuschätzen – das ist ein Muss, sie sind zahlungsbereit, die Wiederholungsrate ist hoch. Mütter nach der Entbindung möchten ihre Figur zurückbekommen, haben aber keine Zeit für Berechnungen, brauchen einfache Lösungen, sind zeitkritisch, brauchen eine All-in-One-Lösung. Takeaway-Esser essen jeden Tag außerhaus und wissen nicht, wie viele Kalorien sie konsumieren – das ist ein häufiges Szenario, aber die Zahlungsbereitschaft ist mittel. Studierende brauchen effiziente Lernwerkzeuge, wissen aber nicht, welche – das ist ein Muss, aber der durchschnittliche Umsatz pro Nutzer ist niedrig.
+
+Xiao Ming wählte die Zielgruppe „Mütter nach der Entbindung". Warum?
+
+Erstens: Er selbst kennt den Nutzer – seine Schwester ist eine postpartale Mutter, er versteht die Schmerzpunkte dieser Gruppe von Natur aus. Zweitens: Die Schmerzpunkte sind sehr stark – die Angst nach der Entbindung ist real, kein „schön-wäre"-Juckpunkt. Drittens: Starke Zahlungsbereitschaft – Mütter sind bereit, Geld für die Rückgewinnung ihrer Figur auszugeben. Viertens: Relativ wenig Konkurrenz – es gibt auf dem Markt kein speziell auf postpartale Mütter zugeschnittenes Produkt.
+
+::: tip Die Segmentierungslogik des Produktmanagers
+
+Warum ist die Segmentierung von Zielgruppen so wichtig?
+
+Weil Allzweck-Tools schwer gewinnen können. Große Plattformen haben den „Allzweck"-Markt bereits besetzt, Sie können sie funktional kaum übertreffen. Die Bedürfnisse von Nischengruppen sind schmerzhafter – für postpartale Mütter ist Fitness ein Muss, für normale Fitness-Interessierte nur „hätte ich auch gerne". Eine kleine Gruppe gut zu bedienen, ist einfacher für den Aufbau von Reputation als alle zufriedenzustellen. Die Schmerzpunkte von Nischengruppen sind konkreter, und sie sind eher bereit, für Lösungen zu bezahlen.
+
+:::
+
+---
+
+### Vertikale Vertiefung: Das vollständige Nutzer-Szenario
+
+Nachdem er die Zielgruppe gefunden hatte, blieb Xiao Ming nicht bei der einzigen Funktion „postpartales Training" stehen. Er wollte das vollständige Nutzer-Szenario besser verstehen (detaillierte Methode siehe Anhang C).
+
+Er beobachtete einen Tag im Leben seiner Schwester.
+
+Um 6 Uhr morgens war das Baby gerade eingeschlafen, seine Schwester hatte 30 Minuten frei. Sie wollte trainieren, aber hatte Angst, das Baby aufzuwecken, und wusste nicht, welche Übungen sicher waren.
+
+Um 10 Uhr morgens hielt seine Schwester das Baby im Arm und wiegte es in den Schlaf, der Rücken tat ihr weh. Sie wollte etwas Rückbildungs-Training machen, aber ihre Hände waren besetzt.
+
+Um 15 Uhr schlief das Baby, seine Schwester wollte trainieren. Aber ihr Körper war sehr müde, sie wusste nicht, ob sie noch trainieren konnte.
+
+Um 20 Uhr abends hatte seine Schwester endlich Zeit, aber war sehr angespannt. Sie sah sich im Spiegel an und dachte, ihr Leben sei ruiniert, blätterte heimlich durch alte Fotos und weinte.
+
+Xiao Ming erkannte, dass der Schmerzpunkt seiner Schwester nicht „keine Fitnesskurse" war, sondern „die Angst und Unsicherheit der postpartalen Erholung".
+
+---
+
+::: info Das Szenario-Denken des Produktmanagers
+
+Viele glauben, Schmerzpunkte seien Funktionsanforderungen – das stimmt nicht. Schmerzpunkte sind Emotionen im Szenario kombiniert mit Zahlungsbereitschaft.
+
+Wenn eine postpartale Mutter vor dem Spiegel steht und ihre veränderte Figur sieht, ist der eigentliche Schmerzpunkt nicht „ich weiß nicht, wie ich trainieren soll", sondern Angst – Sorge, dass sich der Körper nicht gut erholt und Folgeschäden bleiben; Anspannung – beim Anblick im Spiegel das Gefühl, das Leben sei ruiniert; Hilflosigkeit – nicht zu wissen, wo man anfangen soll, ohne Anleitung; Einsamkeit – andere erholen sich schnell, aber ich brauche so lange.
+
+Gute Produktdesign lösen Emotionen, nicht nur Funktionen. Hinter Emotionen steckt die Motivation der Nutzer zu bezahlen.
+
+:::
+---
+
+### Wert-Rekonstruktion: Von „Fitness-APP" zu „Postpartale Erholungs-Assistentin"
+
+Basierend auf der obigen Analyse entwarf Xiao Ming das Produkt neu.
+
+::: tip Rekonstruiertes Produktkonzept: „Postpartale Erholungs-Assistentin"
+
+**Kernpositionierung:** Nicht nur ein Fitness-Tool, sondern die „persönliche Reha-Trainerin + psychologische Begleiterin" für postpartale Mütter
+
+**Kernfunktionen:**
+1. **Fragmentiertes Training:**
+   - Nur 10-15 Minuten pro Einheit
+   - Auch trainieren, wenn das Baby schläft
+   - Übungen, die „auch mit Baby auf dem Arm" machbar sind
+
+2. **Postpartale Spezialkurse:**
+   - Nach postpartaler Phase gestaffelt (0-3 Monate, 3-6 Monate, über 6 Monate)
+   - Spezielles Training für Rectus-Diastase und Beckenboden-Rehabilitation
+   - Jede Übung hat „postpartale Hinweise"
+
+3. **AI-Bewegungskorrektur:**
+   - Handycam erkennt Bewegungen
+   - Echtzeit-Hinweise wie „Knie zu weit gebeugt", „Rücken gerade halten"
+   - Vermeidung von Verletzungen durch falsche Ausführung
+
+4. **Psychologische Unterstützungs-Community:**
+   - Private Community nur für postpartale Mütter
+   - Fortschritte teilen, sich gegenseitig ermutigen
+   - Professionelle psychologische Berater als Mitglieder
+
+5. **Personalisierte Pläne:**
+   - Angepasst an Entbindungsart (natürliche Geburt/Kaiserschnitt) und körperlichen Zustand
+   - Berücksichtigung der besonderen Bedürfnisse in der Stillzeit
+
+**Geschäftsmodell:**
+- Basiskurse kostenlos
+- Premium-Kurse: 99 Yuan/Monat (inklusive AI-Bewegungskorrektur, personalisierter Plan)
+- 1-zu-1-Personal Training: 299 Yuan/Monat (Online-Betreuung)
+- Community-Mitgliedschaft: 199 Yuan/Jahr (inklusive psychologischer Unterstützung, Experten-Fragen)
+
+**Wettbewerbsbarrieren:**
+- Professionalität: Zusammenarbeit mit postpartalen Reha-Einrichtungen, medizinische Rückendeckung
+- Community-Bindung: Starke emotionale Verbindungen unter postpartalen Müttern
+- Datenakkumulation: Je mehr Körperdaten der Nutzer, desto präzisere Pläne
+
+**Marktgröße:**
+- Etwa 10 Millionen Neugeborene pro Jahr in China
+- Postpartaler Reha-Markt: ca. 50 Milliarden Yuan
+- Ziel: 1% der postpartalen Mütter bedienen = 100.000 Nutzer
+- ARPU (Average Revenue Per User): 500 Yuan/Jahr
+- Potentieller Umsatz: 50 Millionen Yuan/Jahr
+
+:::
+
+Vergleich zwischen der ursprünglichen Idee und dem rekonstruierten Konzept:
+
+| Dimension | Ursprüngliche Idee | Rekonstruiert |
+|-----------|-------------------|---------------|
+| Zielgruppe | Alle Fitness-Interessierten (breit und allgemein) | Postpartale Mütter (präzise) |
+| Gelöstes Problem | Training aufzeichnen (Juckpunkt) | Postpartale Erholungsangst (Schmerzpunkt) |
+| Wettbewerbsbarriere | Technologie (leicht kopierbar) | Professionalität + Community + Daten |
+| Zahlungsbereitschaft | Niedrig (viele kostenlose Alternativen) | Hoch (Muss-Bedarf + emotionaler Wert) |
+| Erweiterungspotenzial | Begrenzt | Erweiterbar auf Schwangerschaft, Familienplanung |
+
+**Das ist die Evolution von „einer Funktion" zu „einem Produkt, für das Nutzer bezahlen".**
+
+---
+
+### Weitere Beispiele: Von gewöhnlichen Ideen zu guten Ideen
+
+Xiao Ming fand diese Methode sehr nützlich. Er analysierte mit der gleichen Methode noch einige andere Beispiele, um zu prüfen, ob sie allgemein anwendbar ist (detaillierte Fälle siehe Anhang D).
+
+#### Beispiel 1: Von „Kalorienmessung" zu „Zucker-Krankensicheres Essen"
+
+Die gewöhnliche Idee ist, Lebensmittel per Foto zu erkennen und Kalorien zu berechnen, um Diät-Interessierte bei der Ernährungskontrolle zu helfen. Das Problem ist, dass es bereits etablierte Produkte wie Bohee Health und MyFitnessPal auf dem Markt gibt.
+
+Xiao Ming segmentierte horizontal und fand, dass die Gruppe der Diabetiker sehr interessant ist: Sie müssen Kohlenhydrate streng kontrollieren, aber beim Essen außerhaus ist das schwer abzuschätzen. Er vertiefte ihre Szenarien: Vor dem Essen wissen sie nicht, ob ein Gericht sicher ist, Sorge vor Blutzucker-Anstieg; während des Essens benötigen sie Echtzeit-Erinnerungen „Sie haben bereits so viele Kohlenhydrate gegessen"; nach dem Essen müssen sie den Blutzuckerverlauf aufzeichnen und den Zusammenhang mit der Ernährung sehen.
+
+Das rekonstruierte Produkt heißt „Zucker-Krankensicheres Essen", positioniert als „Ernährungs-Sicherheitsassistent" für Diabetiker.
+
+---
+
+#### Beispiel 2: Von „Nachrichten-Assistent" zu „Investitions-Recherche-Offizier"
+
+Die gewöhnliche Idee ist, Nachrichten verschiedener Plattformen zu aggregieren, damit man sie nicht einzeln öffnen muss. Aber Toutiao, Tencent News und andere haben das bereits gut gemacht.
+
+Xiao Ming segmentierte horizontal und fand, dass Finanzanalysten besondere Bedürfnisse haben: Sie müssen Branchen-Updates verfolgen, aber die Informationen sind zu verstreut. Er vertiefte ihre Szenarien: Morgens die overnight US-Aktien-Entwicklung und Wechselkursschwankungen beobachten; vormittags Bekanntmachungen und Branchen-Nachrichten der Portfoliounternehmen verfolgen; nachmittags potenzielle Anlageziele recherchieren, viel Brancheninformation benötigt.
+
+Das rekonstruierte Produkt heißt „Investitions-Recherche-Offizier", positioniert als „Informations-Radar und Entscheidungsassistent" für Finanzfachleute.
+
+---
+
+#### Beispiel 3: Von „Campus-Zweitmarkt-Plattform" zu „Absolventen-Aufräum-Assistent"
+
+Die gewöhnliche Idee ist eine Campus-Zweitmarkt-Handelsplattform. Aber Xianyu und Zhuanzhuan haben das bereits gut gemacht.
+
+Xiao Ming segmentierte horizontal und fand, dass Absolventen besondere Bedürfnisse haben: Zu viele Dinge, einzeln zu verkaufen ist zu mühsam. Er vertiefte ihre Szenarien: Eine Woche vor dem Abschluss müssen sie den Campus verlassen, keine Zeit zum langsamen Verkaufen; sie wissen nicht, wer ihre Dinge braucht; Verhandeln, Übergabe, Zahlungseingang – zu umständlich.
+
+Das rekonstruierte Produkt heißt „Absolventen-Aufräum-Assistent", positioniert als „Vermögensverwalter für den Auszug".
+
+---
+
+### Zusammenfassung dieses Aktes: Xiao Mings Erkenntnisse
+
+Durch Akt 2 verstand Xiao Ming:
+
+**1. Von sich ausgehend**
+- Sie selbst sind Nutzer und verstehen die Schmerzpunkte dieser Gruppe von Natur aus
+- Hobbys sind der beste Ausgangspunkt, Leidenschaft ist der beste Antrieb
+
+**2. Zielgruppen horizontal aufteilen**
+- Bedienen Sie nicht „alle", finden Sie „die am stärksten betroffene Gruppe"
+- Je feiner die Segmentierung, desto größer die Chance, desto stärker die Zahlungsbereitschaft
+
+**3. Szenarien vertikal vertiefen**
+- Beschreiben Sie die vollständige Nutzer-Reise: Vor der Nutzung, während der Nutzung, nach der Nutzung
+- Finden Sie emotionale Berührungspunkte: Angst, Anspannung, Hilflosigkeit, Einsamkeit...
+
+**4. Wert-Rekonstruktion**
+- Von „Funktion" aufwerten zu „Lösung"
+- Von „Tool" aufwerten zu „Assistentin/Verwalterin/Begleiterin"
+
+---
+
+📦 **Output dieses Aktes:**
+- Eine präzise Zielgruppe gefunden (postpartale Mütter)
+- Das vollständige Szenario und die echten Emotionen der Nutzer verstanden
+- Das Produktkonzept rekonstruiert, mit klarer Differenzierungspositionierung
+
+---
+
+## Akt 3: Mit AI verfeinern
+
+Xiao Ming hat jetzt eine klare Produktrichtung: Postpartale Erholungs-Assistentin. Aber er weiß immer noch nicht genau, wie er vorgehen soll, wo er anfangen soll und wie hoch der technische Aufwand ist.
+
+Er beschloss, AI zu nutzen, um sein Produktkonzept zu verfeinern und seine Idee in einen ausführbaren Plan zu verwandeln.
+
+### Runde 1: Die ursprüngliche Idee vorbringen
+
+Xiao Ming teilte AI seine Idee mit: „Ich möchte eine postpartale Erholungs-Assistenten-APP entwickeln, die postpartalen Müttern hilft, ihre Figur zurückzubekommen. Aber ich mache mir Sorgen über den technischen Aufwand, besonders bei der AI-Bewegungskorrektur – kann ich das als Einzelperson schaffen?"
+
+---
+
+### Runde 2: AI hilft bei der MVP-Planung
+
+AI antwortete: „Gute Frage! Lassen Sie uns eine MVP-Planung (Minimum Viable Product) erstellen."
+
+AI schlug vor, in drei Phasen vorzugehen. Phase 1 ist 1-2 Monate, Ziel ist die Bedarfsvalidierung. Keine APP, erst einmal ein WeChat-Mini-Programm, das nur postpartale Spezialkurse (Videos) und eine Check-in-Community bietet. Bewegungsanleitung manuell bereitstellen – Nutzer laden Videos hoch, Trainer antworten. Ziel ist zu validieren, ob postpartale Mütter bereit sind zu bezahlen.
+
+Phase 2 ist 3-6 Monate, wenn Phase 1 erfolgreich validiert wurde, werden Kernfunktionen hinzugefügt. AI-Bewegungskorrektur entwickeln, mit fertigen SDKs wie Baidu Human Body Detection. Personalisierte Pläne hinzufügen, Community-Funktionen optimieren.
+
+Phase 3 ist 6-12 Monate, Skalierung. Eigenständige APP entwickeln, mit postpartalen Reha-Einrichtungen zusammenarbeiten, auf Schwangerschaft und Familienplanung erweitern.
+
+Zur technischen Umsetzung schlug AI vor, für die AI-Bewegungskorrektur fertige AI-Fähigkeiten wie Baidu- oder Tencent-APIs zu nutzen, ohne von Grund auf zu entwickeln, was die Kosten senkt. Anfangs ein hybrides Modell aus menschlicher und AI-Betreuung, schrittweise übergehen.
+
+Die Startkosten: Mini-Programm-Entwicklung 10.000-20.000 Yuan (Outsourcing) oder selbst mit AI IDE; Content-Erstellung in Zusammenarbeit mit postpartalen Reha-Trainer; Vermarktung über Mami-Gruppen und Xiaohongshu.
+
+Die Validierungskennzahlen: Erster Monat 100 Nutzer, 10% Conversion-Rate. Wenn erreicht, ist das Bedürfnis echt, weiter investieren; wenn nicht, rechtzeitig anpassen.
+
+---
+
+### Runde 3: Xiao Ming äußert Bedenken
+
+Xiao Ming dachte nach und fragte: „Ich mache mir Sorgen um die Content-Erstellung. Postpartale Reha-Kurse brauchen professionelle Anleitung, ich habe keinen medizinischen Hintergrund – wie kann ich die Kursqualität garantieren?"
+
+---
+
+### Runde 4: AI bietet Lösungen
+
+AI antwortete: „Das ist eine Sorge vieler technisch orientierter Gründer, aber es gibt Lösungen."
+
+Lösung 1: Zusammenarbeit mit Fachleuten. Finden Sie postpartale Reha-Trainer, Ärzte aus klinischen Ernährungsabteilungen; Sie stellen Technologie und Produkt, sie stellen professionellen Content. Ein Aufteilungsmodell ist möglich.
+
+Lösung 2: Integration bestehender qualitativ hochwertiger Inhalte. Anfangs können öffentliche postpartale Reha-Videos von YouTube, Bilibili usw. verwendet werden. Eigenständige Inhaltsprüfung und Zusammenstellung, später dann Original-Inhalte erstellen.
+
+Lösung 3: Nutzer-generierte Inhalte. Erfahrene Mütter ermutigen, ihre eigenen Erholungsmethoden zu teilen; mit Community-Voting qualitativ hochwertige Inhalte filtern, schrittweise ein Content-Ökosystem aufbauen.
+
+AI empfahl, zuerst Lösung 1 zu verwenden. Konkrete Vorgehensweise: 2-3 postpartale Reha-Trainer finden, mit ihnen über Zusammenarbeit sprechen; Sie entwickeln das Produkt, sie stellen Kurse. Umsatzaufteilung: Sie bekommen 70%, sie 30%. So wird sowohl die Content-Qualität gesichert als auch die Kosten gesenkt. Vorabkosten für Kurserstellung: 0 Yuan mit Aufteilungsmodell, Sie müssen nur Entwicklungszeit und Vermarktungskosten investieren.
+
+**Mein Vorschlag: Zuerst Lösung 1 verwenden**
+
+Konkrete Vorgehensweise:
+1. 2-3 postpartale Reha-Trainer finden
+2. Mit ihnen über Zusammenarbeit sprechen: Sie entwickeln das Produkt, sie stellen Kurse
+3. Umsatzaufteilung: Sie bekommen 70%, sie 30%
+4. So wird sowohl die Content-Qualität gesichert als auch die Kosten gesenkt
+
+**Vorabkosten:**
+- Kurserstellung: 0 Yuan (mit Aufteilungsmodell)
+- Sie müssen nur Entwicklungszeit und Vermarktungskosten investieren
+
+:::
+---
+
+### Runde 5: Xiao Ming fragt nach Vermarktung
+
+Xiao Ming hatte noch eine letzte Sorge: „Werden die Vermarktungskosten sehr hoch? Wie findet man die Zielgruppe der postpartalen Mütter?"
+
+---
+
+### Runde 6: AI bietet Vermarktungsstrategie
+
+AI antwortete: „Die Zielgruppe der postpartalen Mütter ist eigentlich leicht zu finden, die Vermarktungskosten können sehr niedrig sein."
+
+Am meisten empfohlen wird Xiaohongshu. Suchen Sie nach Keywords wie „postpartale Erholung", „Rectus-Diastase" und finden Sie relevante Blogger, kontaktieren Sie sie per Direktnachricht. Tauschen Sie Vermarktung gegen „1 Monat kostenlose Testversion" – Kosten fast 0.
+
+Zweitens: Mami-Gruppen. Suchen Sie nach WeChat-Gruppen, QQ-Gruppen, treten Sie im Namen von „postpartale Erholung Erfahrungsaustausch" bei, teilen Sie nützliche Inhalte, keine direkte Werbung, schrittweise Vertrauensaufbau.
+
+Außerdem: Zusammenarbeit mit Krankenhäusern (Gynäkologie/Entbindungsabteilung), kostenlose postpartale Erholungsberatung anbieten, Flyer im Krankenhaus verteilen – Kosten sind nur die Druckkosten von einigen hundert Yuan. Oder Zusammenarbeit mit Baby-Geschäften, Werbematerialien platzieren, Testkarten beim Kauf von Baby-Produkten verschenken – Kosten sind nur die Herstellung der Testkarten.
+
+Validierungskennzahlen: Erster Monat 100 Nutzer, 10 zahlende Nutzer (10% Conversion-Rate), Gesamtvermarktungskosten unter 1.000 Yuan, Akquisitionskosten unter 10 Yuan pro Nutzer. Wenn diese Kennzahlen erreicht werden, ist das Bedürfnis echt und man kann weiter investieren.
+
+---
+
+### Fazit: Xiao Ming hat einen klaren Plan
+
+Nach 6 Runden von Gesprächen hatte Xiao Ming endlich einen klaren Plan.
+
+Phase 1 ist 1-2 Monate: Ein WeChat-Mini-Programm erstellen, mit 2-3 postpartalen Reha-Trainer zusammenarbeiten (Aufteilungsmodell), nur postpartale Spezialkurse (Videos) und Check-in-Community anbieten, Bewegungsanleitung manuell bereitstellen. Ziel: 100 Nutzer, 10% Conversion-Rate.
+
+Phase 2 ist 3-6 Monate: Wenn Phase 1 erfolgreich validiert wurde, weiter investieren. AI-Bewegungskorrektur hinzufügen, personalisierte Pläne hinzufügen, Community-Funktionen optimieren.
+
+Phase 3 ist 6-12 Monate: Eigenständige APP entwickeln, mit postpartalen Reha-Einrichtungen zusammenarbeiten, auf Schwangerschaft und Familienplanung erweitern.
+
+Die Startkosten sind sehr niedrig: Entwicklung selbst mit AI IDE (0 Yuan), Content mit Trainern aufteilen (vorab 0 Yuan), Vermarktung über Xiaohongshu und Mami-Gruppen (unter 1.000 Yuan). Gesamtkosten unter 1.000 Yuan.
+
+---
+
+### Die 5-Schritte-Methode der AI-Verfeinerung
+
+Durch diesen Fall fasste Xiao Ming einen Standardprozess für AI-Gespräche zusammen (Details siehe Anhang E).
+
+**Schritt 1: Die ursprüngliche Idee vorbringen.** Beschreiben Sie Ihre erste Idee, auch wenn sie noch grob ist. Sagen Sie AI Ihre Bedenken, z.B. starker Wettbewerb, unklare Differenzierung usw.
+
+**Schritt 2: AI bei der MVP-Planung helfen lassen.** Was sollte das Minimum Viable Product enthalten? In wie vielen Phasen? Was ist das Ziel jeder Phase? Ist der technische Aufwand hoch?
+
+**Schritt 3: Ihre Bedenken äußern.** Technischer Aufwand? Content-Erstellungskosten? Vermarktungskosten? Schwierigkeit der Nutzergewinnung? Sagen Sie AI alle Ihre Sorgen.
+
+**Schritt 4: AI Lösungen anbieten lassen.** AI gibt konkrete Vorschläge zu Ihren Bedenken. Mehrere Lösungen vergleichen, die beste auswählen. Kosten schätzen.
+
+**Schritt 5: Den Plan finalisieren.** Einen klaren Aktionsplan zusammenstellen, Validierungskennzahlen setzen. Wenn nicht erreicht, rechtzeitig anpassen.
+
+**Prompt-Vorlage:**
+```
+Ich möchte ein [Produktkonzept] entwickeln,
+aber ich mache mir Sorgen über [Ihre Bedenken].
+Bitte helfen Sie mir:
+1. Ein MVP zu planen
+2. Konkrete Vorschläge zur technischen Umsetzung zu geben
+3. Die Kosten zu schätzen
+4. Validierungskennzahlen zu setzen
+```
+
+---
+
+### Zusammenfassung dieses Aktes: Xiao Mings Erkenntnisse
+
+Durch Akt 3 verstand Xiao Ming drei Dinge.
+
+**Erstens: Produktkonzepte durch AI-Gespräche verfeinern.** Erwarten Sie nicht die perfekte Antwort in einem Gespräch, iterieren Sie über mehrere Runden. Sagen Sie AI Ihre Beobachtungen, Erlebnisse, Feedback von Menschen um Sie herum. Wenn AIs Vorschläge unvernünftig sind, weisen Sie darauf hin. Am Ende muss es auf einen konkreten Aktionsplan hinauslaufen.
+
+**Zweitens: Kernprinzipien des MVP.** Minimierung, nur die Kernfunktionen umsetzen. Validierbarkeit, schnell prüfen, ob das Bedürfnis echt ist. Niedrige Kosten, mit minimalen Kosten validieren.
+
+**Drittens: Validierungskennzahlen.** Conversion-Rate über 10%: Bedürfnis ist echt, investitionswürdig. Conversion-Rate 5-10%: Bedürfnis existiert, muss aber geschliffen werden. Conversion-Rate unter 5%: Bedürfnis besteht nicht, rechtzeitig anpassen.
+
+---
+
+📦 **Output dieses Kapitels:**
+- Ein klarer MVP-Plan
+- Kenntnis des technischen Umsetzungswegs
+- Validierungskennzahlen festgelegt
+
+---
+
+## Schlussakt: Ihre Aktion
+
+### Merkspruch
+
+**Eine Person, eine Sache, ein Einstiegspunkt – horizontal teilen, vertikal graben, Schmerzpunkte finden, mit AI verfeinern, in 5 Schritten validieren, dann handeln**
+
+**Erklärung:**
+- **Eine Person:** Von sich selbst ausgehend, Sie verstehen diese Gruppe von Natur aus
+- **Eine Sache:** Auf eine konkrete Sache fokussieren, nicht zu viel wollen
+- **Ein Einstiegspunkt:** Den Einstiegspunkt finden, je feiner desto besser
+- **Horizontal teilen:** Zielgruppen horizontal aufteilen, Nutzer mit höchster Zahlungsbereitschaft finden
+- **Vertikal graben:** Szenarien vertikal vertiefen, die vollständige Nutzer-Reise verstehen
+- **Mit AI verfeinern:** Produktkonzept durch AI-Gespräche verfeinern
+- **In 5 Schritten validieren:** Mit der 5-Schritte-Methode die Echtheit des Bedürfnisses validieren
+
+---
+
+### Übung nach dem Kapitel
+
+Wählen Sie ein kleines Ärgernis aus Ihrem Alltag und erweitern Sie es mit der Methode dieses Kapitels:
+
+::: tip Übungsaufgabe
+
+**1. Beschreiben Sie dieses Ärgernis** (1 Satz)
+- Beispiel: „Ich möchte eine Haushalts-APP entwickeln, die Nutzern hilft, Ausgaben aufzuzeichnen"
+
+**2. Horizontal aufteilen: Finden Sie 3 Gruppen mit möglicherweise unterschiedlichen Bedürfnissen**
+- Beispiel: Kleine Unternehmensgründer, Eltern von Auslandsstudenten, Freiberufler
+
+**3. Wählen Sie eine Gruppe und vertikal vertiefen: Beschreiben Sie ihr vollständiges Szenario und echte Emotionen**
+- Beispiel: Szenario der Eltern von Auslandsstudenten – möchten wissen, wie viel ihr Kind im Ausland ausgibt, aber das Kind sagt es nicht
+
+**4. Rekonstruieren Sie das Produktkonzept: Evolution von „einer Funktion" zu „einer Lösung"**
+- Beispiel: „Studienfinanz-Verwalter" – nicht nur Buchführung, sondern Eltern haben den „Überblick" über die Ausgaben ihres Kindes im Ausland
+
+**5. Bewerten Sie Ihre Idee mit der Validierungs-Checkliste** (siehe Anhang F)
+
+**Teilen Sie Ihre Analyse in der Community und diskutieren Sie mit anderen Lernenden!**
+
+:::
+---
+
+## Anhang: SOP-Methodik
+
+### Anhang A: Die 5-Schritte-Beurteilungsmethode der Bedarfsanalyse
+
+Wenn Sie eine Idee haben, wie können Sie schnell beurteilen, ob sie investitionswürdig ist?
+
+**Schritt 1: Nutzervalidierung —— 10 Zielgruppen-Nutzer finden**
+
+**Nicht fragen:** „Würden Sie mein Produkt nutzen?" (Falsch-Positiv-Rate 90%)
+
+**Fragen Sie stattdessen:**
+1. „Wie lösen Sie dieses Problem aktuell?" (Echtes Verhalten verstehen)
+2. „Wie oft hat Sie dieses Problem in der letzten Woche geplagt?" (Häufigkeit verstehen)
+3. „Wie viel Geld/Zeit haben Sie bereits investiert, um es zu lösen?" (Zahlungsbereitschaft verstehen)
+4. „Wenn es eine Lösung gäbe, aber Sie müssten Ihre Gewohnheiten ändern – wären Sie bereit?" (Änderungskosten verstehen)
+
+**Beurteilungskriterien:**
+- Wenn mehr als 3 Nutzer sagen „Ich ärgere mich täglich darüber" – möglicherweise ein Schmerzpunkt
+- Wenn Nutzer sagen „Interessant, aber ich habe es nicht eilig" – wahrscheinlich ein Juckpunkt
+- Wenn Nutzer sagen „Ich nutze aktuell XX dafür, bin aber nicht zufrieden" – Chance vorhanden
+
+**Schlüsselquestion:** Welche Methode nutzen Nutzer aktuell, um dieses Problem zu lösen?
+
+| Art der Alternative | Beschreibung | Chance |
+|---------------------|-------------|--------|
+| **Keine Alternative** | Nutzer ertragen es still | Große Chance, aber Marktbildung nötig |
+| **Sehr umständliche Methode** | Excel, manuell, Zusammenarbeit mehrerer Personen | Gute Chance, Nutzer sehnen sich nach einer besseren Lösung |
+| **Mehrere Tools zusammengestellt** | Tool A + Tool B + Tool C | Gute Chance, Integration hat Wert |
+| **Etabliertes Produkt** | Aber Nutzer unzufrieden | Chance vorhanden, aber Differenzierung nötig |
+| **Etabliertes Produkt** | Nutzer sehr zufrieden | Sehr kleine Chance, außer disruptive Innovation |
+
+::: tip Was ist „disruptive Innovation"?
+
+**Einfache Definition:** Nicht das Produkt besser machen, sondern auf einfachere/günstigere Weise eine zuvor vernachlässigte Nutzergruppe bedienen.
+
+**Beispiele:**
+- Traditionelle Handys → Smartphones (nicht mehr Funktionen, sondern völlig andere Interaktionsweise)
+- Traditionelle Taxis → Didi (nicht bessere Autos, sondern Taxi-Rufen jederzeit und überall)
+- Traditionelle Buchhandlungen → E-Books (nicht mehr Bücher, sondern einfacheres Mitführen und Kaufen)
+
+**Kern:** Disruptive Innovation beginnt oft beim „unteren Markt" oder bei „neuen Nutzergruppen" und erodiert schrittweise nach oben.
+
+:::
+
+**Fälle:**
+- Diabetiker kontrollieren aktuell mit „Erfahrung + Raten" ihre Ernährung (sehr umständliche Methode) – große Chance
+- Normale Abnehm-Interessierte nutzen Bohee Health (etabliertes Produkt, mittlere Zufriedenheit) – Chance für Nische
+- Studierende nutzen WeChat-Gruppen für Zweitmarkt-Handel (mehrere Tools zusammengestellt) – Chance für Integration
+
+**Die effektivste Methode: Vorverkauf oder Anzahlung**
+
+**Vorgehensweise:**
+1. Erstellen Sie eine einfache Landingpage, die Ihr Produktkonzept beschreibt
+2. Platzieren Sie einen „Vorverkauf"- oder „Reservierung"-Button
+3. Sehen Sie, wie viele Leute bereit sind zu bezahlen (auch wenn es nur 1 Yuan ist)
+
+**Beurteilungskriterien:**
+- Nutzer, die Anzahlung zahlen wollen > 10%: Bedürfnis ist echt, investitionswürdig
+- Nutzer, die Anzahlung zahlen wollen 5-10%: Bedürfnis existiert, muss aber geschliffen werden
+- Nutzer, die Anzahlung zahlen wollen < 5%: Bedürfnis besteht nicht, oder Produktkonzept hat Probleme
+
+**Hinweis:** Viele sagen „Ich würde es kaufen", aber nur die, die tatsächlich Geld bezahlen, sind Ihre Ziel-Nutzer.
+
+**Einfache Formel:**
+```
+Potentielle Marktgröße = Anzahl der Ziel-Nutzer × Zahlungsbereitschaft × Durchschnittseinkommen pro Nutzer
+```
+
+**Fall: Campus-Zweitmarkt-Handelsplattform**
+- Ziel-Nutzer: 40 Millionen Studierende in China
+- Mit Zweitmarkt-Bedarf: 50% = 20 Millionen
+- Bereit, eine Plattform zu nutzen: 10% = 2 Millionen
+- Jahres-Handelsfrequenz: 2
+- Plattform-Provision: 5%
+- Durchschnittlicher Umsatz pro Nutzer: 100 Yuan
+- Potentielle Marktgröße = 2 Millionen × 2 × 100 × 5% = 20 Millionen Yuan/Jahr
+
+**Beurteilungskriterien:**
+- Marktgröße > 1 Milliarde Yuan: Großer Markt, investitionswürdig
+- Marktgröße 100 Millionen bis 1 Milliarde Yuan: Mittelgroßer Markt, machbar, aber klare Decke
+- Marktgröße < 100 Millionen Yuan: Nischenmarkt, geeignet als Nebenprojekt oder „klein aber fein"
+
+**Schlüsselquestion:** Wenn das Produkt erfolgreich ist, was passiert bei Nachahmung?
+
+**Häufige Burggraben-Typen:**
+
+| Burggraben-Typ | Beschreibung | Beispiel |
+|---------------|-------------|----------|
+| **Netzwerkeffekt** | Mehr Nutzer = größerer Produktwert | WeChat, Didi |
+| **Datenakkumulation** | Mehr Daten = präzisere Algorithmen | Toutiao, TikTok |
+| **Markenbekanntheit** | Besetzung im Nutzer-Bewusstsein | Coca-Cola, Nike |
+| **Skaleneffekt** | Größere Skala = niedrigere Kosten | JD Logistics, Amazon |
+| **Technologie-Patente** | Kerntechnologie-Barriere | Huawei, DJI |
+| **Wechselkosten** | Hohe Migrationskosten für Nutzer | Unternehmenssoftware, Betriebssysteme |
+
+**Realität für Frühphasen-Projekte:**
+- Die meisten Frühphasen-Projekte haben keinen offensichtlichen Burggraben
+- Aber das ist nicht schlimm, das Wichtigste ist <strong>schnell zu sein</strong>
+- Erst den Markt besetzen, dann Barrieren aufbauen
+
+---
+
+### Anhang B: Methode der horizontalen Zielgruppenaufteilung
+
+Versuchen Sie nicht, „alle XX-Nutzer" zu bedienen, sondern finden Sie <strong>eine spezifische Gruppe</strong>, deren Bedürfnisse schmerzhafter und konkreter sind.
+
+**Schritt 1: Alle möglichen Segment-Gruppen auflisten**
+
+Listen Sie für Ihr Produktkonzept alle möglichen Gruppen auf.
+
+**Schritt 2: Den Geschäftswert jeder Gruppe bewerten**
+
+| Bewertungsdimension | Beschreibung |
+|--------------------|-------------|
+| Schmerzpunkt-Intensität | Ist das Bedürfnis dieser Gruppe ein Schmerzpunkt oder ein Juckpunkt? |
+| Zahlungsbereitschaft | Wie viel sind sie bereit für eine Lösung zu bezahlen? |
+| Marktgröße | Wie viele Personen gehören dieser Gruppe an? |
+| Wettbewerbsintensität | Sind bestehende Lösungen zufriedenstellend? |
+| Ihr Verständnis der Gruppe | Verstehen Sie diese Gruppe? Haben Sie Zugang zu ihr? |
+
+**Schritt 3: Eine Gruppe für die tiefe Analyse auswählen**
+
+Wählen Sie eine Gruppe mit:
+- Den schmerzhaftesten Schmerzpunkten
+- Der stärksten Zahlungsbereitschaft
+- Die Sie am besten verstehen
+- Relativ wenig Konkurrenz
+
+::: tip Segmentierungsbeispiel
+
+**Produktkonzept:** Haushalts-APP
+
+| Segment-Gruppe | Schmerzpunkt | Zahlungsbereitschaft | Marktgröße | Wettbewerbsintensität |
+|---------------|-------------|---------------------|-----------|---------------------|
+| Gewöhnliche Angestellte | Aufzeichnung ist mühsam | Niedrig | Groß | Hoch |
+| Kleine Unternehmensgründer | Private/Unternehmensausgaben vermischt | Hoch | Mittel | Mittel |
+| Freiberufler | Instabiles Einkommen, Cashflow-Vorhersage nötig | Hoch | Mittel | Mittel |
+| Eltern von Auslandsstudenten | Möchten wissen, wie viel das Kind ausgibt, aber das Kind sagt es nicht | Hoch | Klein | Niedrig |
+
+**Auswahl:** Eltern von Auslandsstudenten (schmerzhaftester Schmerzpunkt, hohe Zahlungsbereitschaft, relativ wenig Konkurrenz)
+
+:::
+---
+
+### Anhang C: Methode der vertikalen Szenariovertiefung
+
+Nachdem Sie die Zielgruppe gefunden haben, bleiben Sie nicht bei einer einzigen Funktion stehen, sondern verstehen Sie das <strong>vollständige Szenario</strong> der Nutzer.
+
+**Schritt 1: Einen Tag im Leben des Nutzers beschreiben**
+
+Von morgens bis abends, beschreiben Sie das vollständige Szenario des Nutzers bei der Nutzung Ihres Produkts.
+
+**Schritt 2: Die Schmerzpunkte jedes Szenarios analysieren**
+
+In jedem Szenario: Auf welches Problem stößt der Nutzer? Welche Emotionen hat er?
+
+**Schritt 3: Emotionale Berührungspunkte finden**
+
+Angst, Anspannung, Hilflosigkeit, Einsamkeit, Wut, Reue...
+
+**Schritt 4: Wert rekonstruieren**
+
+Basierend auf Szenario und Emotionen den Produktwert rekonstruieren.
+
+::: tip Vertiefungsbeispiel
+
+**Gruppe:** Postpartale Mütter
+
+| Zeit | Szenario | Schmerzpunkt | Emotion |
+|------|---------|-------------|---------|
+| 6 Uhr morgens | Baby gerade eingeschlafen, 30 Minuten frei | Weiß nicht, welche Übungen sicher sind | Angst |
+| 10 Uhr morgens | Baby auf dem Arm, Rücken tut weh | Hände besetzt, möchte Rückbildungs-Training machen | Anspannung |
+| 15 Uhr | Baby schläft, möchte trainieren | Körper sehr müde, weiß nicht, ob trainieren noch möglich ist | Hilflosigkeit |
+| 20 Uhr abends | Endlich frei | Sieht sich im Spiegel an, fühlt, das Leben sei ruiniert | Depression |
+| Langfristig | Niemand versteht es | Fühlt, nur sie selbst leide so | Einsamkeit |
+
+**Wert-Rekonstruktion:** Von „Fitness-Tool" aufwerten zu „Reha-Trainerin + psychologische Begleiterin"
+
+:::
+---
+
+### Anhang D: Weitere Beispiele von gewöhnlichen Ideen zu guten Ideen
+
+#### Beispiel 1: Von „Haushalts-APP" zu „Studienfinanz-Verwalter"
+
+**Gewöhnliche Idee:** Automatische Haushalts-APP, verbindet Bankkarten und klassifiziert Ausgaben automatisch
+
+**Problem:** Es gibt bereits Sui Shou Ji, Wacai, Alipay-Kontoauszüge...
+
+**Horizontale Aufteilung:**
+- Eltern von Auslandsstudenten: Möchten wissen, wie viel ihr Kind im Ausland ausgibt, ob es das Budget übersteigt
+
+**Vertikale Vertiefung:**
+- Der Schmerzpunkt ist nicht „Buchführung", sondern <strong>„Kontrollverlust"</strong> – man weiß nicht, wie viel das Kind ausgibt und wofür
+- Szenario: Jeden Monat die Kreditkartenabrechnung sehen, aber das Kind sagt nie freiwillig, wofür es das Geld ausgegeben hat
+
+**Rekonstruiert:** „Studienfinanz-Verwalter" – nicht nur Buchführung, sondern Eltern haben den „Überblick" über die Ausgaben ihres Kindes im Ausland
+
+**Kernfunktionen:**
+- Echtzeit-Synchronisation der Ausgaben des Kindes
+- Budget-Überschreitungs-Warnung
+- Monatlicher Ausgaben-Analyse-Bericht
+- Vergleich mit gleichartigen Studierenden („Ihr Kind gibt 20% mehr als der Durchschnitt aus")
+
+---
+
+#### Beispiel 2: Von „Pomodoro-Tool" zu „Remote-Arbeits-Nachweis"
+
+**Gewöhnliche Idee:** Pomodoro-APP, hilft Nutzern sich zu konzentrieren
+
+**Problem:** Smartphones haben bereits Bildschirmzeit, Forest, Pomodoro ToDo...
+
+**Horizontale Aufteilung:**
+- Remote-Arbeiter: Müssen dem Chef beweisen „Ich arbeite wirklich"
+
+**Vertikale Vertiefung:**
+- Der Schmerzpunkt ist nicht „mangelnde Konzentration", sondern <strong>„Vertrauenskrise"</strong> – der Chef sieht mich nicht, wie beweise ich, dass ich arbeite?
+- Szenario: Nach Feierabend fragt der Chef „Wie war die Arbeit heute?", und man kann es nicht beweisen
+
+**Rekonstruiert:** „Remote-Arbeits-Nachweis" – Remote-Arbeitern helfen, Vertrauen zum Arbeitgeber aufzubauen
+
+**Kernfunktionen:**
+- Automatische Arbeitszeiterfassung
+- Produktivitätsbericht
+- Bildschirmaktivitäts-Zusammenfassung (datenschutzfreundlich)
+- Automatisch generierter „Arbeitsbericht" jeden Tag, an den Vorgesetzten gesendet
+
+---
+
+#### Beispiel 3: Von „Gebrauchtbücher-Handel" zu „Bilderbuch-Bibliothek"
+
+**Gewöhnliche Idee:** Gebrauchtbücher-Handelsplattform
+
+**Problem:** Duozhuayu, Xianshu, Kongfuzi Old Book Network...
+
+**Horizontale Aufteilung:**
+- Mütter: Kinder-Bilderbücher nach dem Lesen ungenutzt, aber neu kaufen ist teuer
+
+**Vertikale Vertiefung:**
+- Der Schmerzpunkt ist nicht „Bücher sind teuer", sondern <strong>„kurze Lebensdauer von Bilderbüchern"</strong> – Bücher, die das Kind mit 3 Jahren liest, liest es mit 4 Jahren nicht mehr
+- Szenario: Zuhause sind Bilderbücher vollgestapelt, das Kind liest sie nicht mehr, aber wegzuwerfen wäre schade
+
+**Rekonstruiert:** „Bilderbuch-Bibliothek nach Hause" – keine Gebrauchtbücher verkaufen, sondern „Nutzungsrechte-Miete" für Bilderbücher anbieten
+
+**Kernfunktionen:**
+- Bilderbuch-Abo (monatlich 5 altersgerechte Bilderbücher, nach dem Lesen zurücksenden und neue bekommen)
+- Lese-Fortschritts-Tracking
+- Altersgerechte Empfehlungen
+- Hygiene-Garantie
+
+---
+
+### Anhang E: Die 5-Schritte-Methode der AI-Verfeinerung von Produktkonzepten
+
+Durch mehrere AI-Gesprächsrunden eine gewöhnliche Idee schrittweise in ein umsetzbares, präzises Produktkonzept verwandeln.
+
+**Vorgehen:**
+- Beschreiben Sie Ihre erste Idee (auch wenn sie noch grob ist)
+- Sagen Sie AI Ihre Bedenken (starker Wettbewerb, unklare Differenzierung usw.)
+
+**Prompt:**
+```
+Ich möchte ein [Produktkonzept] entwickeln,
+aber ich habe festgestellt [Problem/Bedenken].
+```
+
+**Vorgehen:**
+- AI bitten, einen Minimum Viable Product-Plan zu erstellen
+- Technischen Aufwand und Kosten diskutieren
+- Validierungskennzahlen setzen
+
+**Prompt:**
+```
+Bitte helfen Sie mir:
+1. Ein MVP zu planen
+2. Konkrete Vorschläge zur technischen Umsetzung zu geben
+3. Die Kosten zu schätzen
+4. Validierungskennzahlen zu setzen
+```
+
+**Vorgehen:**
+- Technischer Aufwand?
+- Content-Erstellungskosten?
+- Vermarktungskosten?
+- Schwierigkeit der Nutzergewinnung?
+
+**Prompt:**
+```
+Ich mache mir Sorgen über:
+1. [Bedenken 1]
+2. [Bedenken 2]
+3. [Bedenken 3]
+```
+
+**Vorgehen:**
+- Konkrete Vorschläge zu Ihren Bedenken
+- Mehrere Lösungen vergleichen, die beste auswählen
+- Kosten schätzen
+
+**Prompt:**
+```
+Bitte geben Sie mir konkrete Lösungen für meine Bedenken.
+```
+
+**Vorgehen:**
+- Einen klaren Aktionsplan zusammenstellen
+- Validierungskennzahlen setzen
+- Wenn nicht erreicht, rechtzeitig anpassen
+
+**Prompt:**
+```
+Bitte helfen Sie mir, einen klaren Aktionsplan zusammenzustellen.
+```
+
+::: tip Wichtige Techniken
+
+- **Mehrere Runden:** Erwarten Sie nicht die perfekte Antwort in einem Gespräch, iterieren Sie über mehrere Runden
+- **Informationen bereitstellen:** Sagen Sie AI Ihre Beobachtungen, Erlebnisse, Feedback von Menschen um Sie herum
+- **AI hinterfragen:** Wenn AIs Vorschläge unvernünftig sind, weisen Sie darauf hin
+- **Fokus auf Umsetzung:** Am Ende muss es auf einen konkreten Aktionsplan hinauslaufen
+
+:::
+---
+
+### Anhang F: Bedarfsvalidierungs-Checkliste
+
+Bevor Sie Zeit in die Entwicklung investieren, validieren Sie Ihre Idee mit der folgenden Checkliste – <strong>die Kernfrage ist: Sind Nutzer bereit, dafür zu bezahlen?</strong>
+
+::: tip Bedarfsvalidierungs-Checkliste
+
+**1. Klarheit der Nutzer-Persona**
+- ☐ Können Sie die Ziel-Nutzer in einem Satz beschreiben?
+- ☐ Können Sie sagen, was ihre aktuelle Alternative ist?
+- ☐ Können Sie konkrete Details ihres Nutzungsszenarios beschreiben?
+- ☐ Hat diese Gruppe Kaufkraft?
+
+**2. Bewertung der Schmerzpunkt-Intensität**
+- ☐ Was kostet es Nutzer aktuell, dieses Problem zu lösen? (Zeit/Geld/Energie)
+- ☐ Welche Folgen hat es, wenn das Problem nicht gelöst wird?
+- ☐ Suchen Nutzer bereits nach Lösungen?
+- ☐ Wie viel sind Nutzer bereit, für die Lösung zu bezahlen?
+
+**3. Differenzierung der Lösung**
+- ☐ Was ist Ihr Vorteil gegenüber bestehenden Lösungen?
+- ☐ Ist dieser Vorteil ausreichend, um Nutzer zum Wechseln zu bewegen?
+- ☐ Ist es für große Plattformen schwierig, Ihre Funktion zu kopieren?
+- ☐ Ist Ihre Differenzierung ausreichend, um Nutzer-Zahlungen zu rechtfertigen?
+
+**4. Machbarkeit des Geschäftsmodells**
+- ☐ Sind Nutzer bereit zu bezahlen? Wie viel? (Muss getestet werden!)
+- ☐ Wie hoch sind voraussichtlich die Akquisitionskosten?
+- ☐ Kann der Lifetime Value (LTV) der Nutzer die Akquisitionskosten (CAC) decken?
+- ☐ Gibt es andere Monetarisierungswege? (Werbung, Premium-Services, B2B usw.)
+
+**5. Schnelle Validierungsmöglichkeit**
+- ☐ Kann mit minimalen Kosten (1-2 Wochen) ein testbares Prototyp erstellt werden?
+- ☐ Können 10 Ziel-Nutzer für Interviews gefunden werden?
+- ☐ Kann ein Experiment zur Validierung der Kernhypothese designt werden?
+- ☐ Können Nutzer eine Anzahlung leisten, um die Zahlungsbereitschaft zu validieren?
+
+:::
+
+<strong>Fragen Sie nicht „Würden Sie dieses Produkt nutzen?"</strong> – Diese Frage erzeugt nur falsch-positive Antworten.
+
+<strong>Fragen Sie stattdessen:</strong>
+- „Wie lösen Sie dieses Problem aktuell?" (Echtes Verhalten verstehen)
+- „Wie oft hat Sie dieses Problem in der letzten Woche geplagt?" (Häufigkeit verstehen)
+- „Wenn es eine Lösung gäbe, aber Sie müssten Ihre aktuellen Gewohnheiten ändern – wären Sie bereit?" (Änderungskosten verstehen)
+- „Wenn es XX Yuan kosten würde, würden Sie es kaufen?" (Zahlungsbereitschaft verstehen)
+
+**Die beste Validierung:** Nutzer eine Anzahlung leisten lassen. Viele sagen, sie würden bezahlen, aber nur die, die tatsächlich Geld hinlegen, sind Ihre Ziel-Nutzer.
+
+**Schlüsselkennzahlen:**
+- Anteil der Nutzer, die Anzahlung zahlen wollen > 10%: Bedürfnis ist echt, investitionswürdig
+- Anteil der Nutzer, die Anzahlung zahlen wollen 5-10%: Bedürfnis existiert, muss aber geschliffen werden
+- Anteil der Nutzer, die Anzahlung zahlen wollen < 5%: Bedürfnis besteht nicht, oder Produktkonzept hat Probleme
+
+---
+
+## Kapitelzusammenfassung
+
+In diesem Kapitel haben wir anhand der Geschichte von Xiao Ming gelernt, Produktideen aus der Perspektive eines Produktmanagers zu betrachten – <strong>der Kern dreht sich immer um: Sind Nutzer bereit, dafür zu bezahlen?</strong>
+
+::: info Kernpunkte
+
+**1. Die drei Kriterien für echte Bedürfnisse:**
+- Nutzer sind bereit dafür zu bezahlen (wichtigstes Kriterium)
+- Nutzer sind bereit dafür ihr Verhalten zu ändern
+- Ohne Lösung erleiden Nutzer erhebliche Verluste
+
+**2. Der Weg von einer gewöhnlichen Idee zu einem Produkt, für das Nutzer bezahlen:**
+- <strong>Horizontal aufteilen:</strong> Eine spezifische Zielgruppe finden, je feiner die Segmentierung, desto stärker die Zahlungsbereitschaft
+- <strong>Vertikal vertiefen:</strong> Das vollständige Szenario verstehen, Emotionen lösen, nicht nur Funktionen
+- <strong>Wert-Rekonstruktion:</strong> Vom Tool zur Lösung evoluieren, einen Grund für Zahlungen schaffen
+
+**3. Fallen falscher Bedürfnisse vermeiden:**
+- Pseudo-Schmerzpunkte lösen (Juckpunkte statt Schmerzpunkte)
+- Marktgröße zu klein, um ein Geschäftsmodell zu tragen
+- Lösung komplizierter als das Problem
+
+**4. Methoden zur Validierung der Zahlungsbereitschaft:**
+- 10 Ziel-Nutzer für tiefe Interviews finden
+- Nutzer eine Anzahlung leisten lassen, um echte Bereitschaft zu validieren
+- Erst ab einem Anteil > 10% zahlungsbereiter Nutzer ist es investitionswürdig
+
+**5. Produktkonzepte durch AI-Gespräche verfeinern:**
+- Mehrere Runden iterieren, kontinuierlich optimieren
+- Fokus auf Umsetzung, auf einen Aktionsplan kommen
+- Validierungskennzahlen setzen, rechtzeitig anpassen
+
+:::
+
+**Merken Sie sich:** Gute Produktmanager erfinden keine Bedürfnisse aus dem Nichts, sondern entdecken die <strong>übersehenen, unterschätzten und falsch befriedigten</strong> echten Bedürfnisse und finden Wege, wie Nutzer bereit sind, dafür zu bezahlen.
+
+Im nächsten Kapitel werden wir mit validierten Ideen lernen, wie man sie mit AI IDE in interaktive Produktprototypen verwandelt.
diff --git a/docs/de-de/stage-1/integrating-ai-capabilities/index.md b/docs/de-de/stage-1/integrating-ai-capabilities/index.md
new file mode 100644
index 0000000..90dfa87
--- /dev/null
+++ b/docs/de-de/stage-1/integrating-ai-capabilities/index.md
@@ -0,0 +1,812 @@
+---
+title: 'AI-Fähigkeiten in den Prototyp integrieren - Text- und Bild-API anbinden'
+description: 'Echte AI-Fähigkeiten in einen bestehenden Web-Prototyp integrieren: API-Kernkonzepte verstehen, API Key und offizielle Beispiele finden; DeepSeek Textmodell und verschiedene Bildgenerierungsdienste (SiliconFlow Qwen-Image, Recraft, Seedream) in der Praxis integrieren und gängige Modellauswahl-Methoden beherrschen.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Etwa <strong>1 Tag</strong>'
+const relatedArticles =
+  relatedArticlesMap['de-de/stage-1/integrating-ai-capabilities'] ?? []
+</script>
+
+# Anfänger IV: AI-Fähigkeiten in den Prototyp integrieren
+
+## Kapitelübersicht
+
+<ChapterIntroduction :duration="duration" :tags="['API', 'Textmodell', 'Text-zu-Bild', 'Prototyp-Integration']" coreOutput="Prototyp mit 1 Textmodell + 1 Bildmodell (optional) verbunden" expectedOutput="AI-Prototyp mit realer API-Anbindung">
+
+In den vorherigen Kapiteln haben wir den vollständigen Prozess von der <strong>Ideenfindung</strong> bis zum <strong>Produktprototyp</strong> durchlaufen. Aber der aktuelle Prototyp ist nur eine "Hülle" &ndash; ein Klick auf den Button generiert keinen echten Inhalt, die Daten auf der Seite sind hartcodiert.
+
+Erinnern Sie sich, was wir im ersten Kapitel betont haben? <strong>Wir wollen "Produkte, für die jemand zu zahlen bereit ist" erstellen, nicht "gut aussehende Prototypen".</strong> Der echte Wert entsteht dadurch, dass das Produkt <strong>echte Probleme löst</strong>. Um das zu erreichen, muss der Prototyp <strong>wirklich funktionieren</strong>.
+
+Dieses Kapitel bringt den Prototyp zum <strong>"Leben"</strong>: Wir binden <strong>echte AI-Fähigkeiten</strong> ein, vom Erhalt des API Keys über das Lesen der offiziellen Dokumentation bis zur Integration durch AI IDE. Am Beispiel des <strong>DeepSeek Textmodells</strong> lernen Sie, wie Sie die Anwendung <strong>echt große Modelle zur Inhaltsgenerierung aufrufen</strong> lassen; bei Interesse können Sie optional <strong>auch die Bildgenerierung integrieren</strong>.
+
+Nach diesem Kapitel ist Ihr Prototyp <strong>nicht mehr nur eine statische Demo</strong>, sondern eine <strong>Anwendung, die echte AI-Fähigkeiten aufrufen und echte Probleme lösen kann</strong>.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
+      { title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
+      { title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 1. API-Grundkonzepte
+
+Wir erwähnten, dass unser Ziel ist, "AI-Fähigkeiten zu integrieren" und den Prototypen von einer statischen Demo zu einem Tool zu machen, das echte AI-Dienste aufrufen kann. Der Schlüssel dafür liegt im Verständnis und der Nutzung von APIs (Application Programming Interfaces).
+
+API ist ein wichtiges Abstraktionskonzept im Computerbereich. Man kann es sich einfach vorstellen als: **Sie senden "eine Frage" im gewünschten Format und erhalten "ein Ergebnis" im selben Format zurück.**
+
+- **Was Sie senden**: Enthält normalerweise einen "Schlüssel (API Key)" und "was Sie generieren möchten"
+- **Was Sie zurückbekommen**: Bei Erfolg das Ergebnis; bei Fehler die Ursache (z.B. "Schlüssel falsch", "Guthaben unzureichend", "Parameter fehlerhaft")
+
+Konkret müssen Sie folgende Kernelemente beherrschen:
+
+1. **API Key**: Ihr "Ausweis" und zugleich Ihr "Geldschlüssel". Wer ihn hat, kann in Ihrem Namen API-Aufrufe tätigen und Kosten verursachen.
+2. **Endpoint (Schnittstellenpfad)**: Der spezifische Pfad der API-Anfrage, der dem Server sagt, welche Funktion Sie nutzen möchten. Die vollständige Anfrage-URL besteht normalerweise aus "Basis-URL + Endpoint-Pfad". Zum Beispiel:
+   - Textgenerierung: Basis-URL (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = Vollständige URL `https://api.service.com/v1/chat/completions`
+   - Bildgenerierung: Basis-URL (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = Vollständige URL `https://api.service.com/v1/images/generations`
+3. **Aufruf/Anfrage**: Der Prozess, eine Aufgabe an den AI-Dienst zu senden und Ergebnisse zu erhalten
+4. **Anfrage-Inhalt**: Was Sie an AI senden, z.B. das Thema des Artikels, den AI schreiben soll, oder die Beschreibung des zu generierenden Bildes
+5. **Antwort-Ergebnis**: Was AI nach der Verarbeitung zurückgibt, z.B. den generierten Artikel oder das Bild
+6. **Fehlerbehandlung**: Wissen, wie man Probleme diagnostiziert, wenn etwas schiefgeht (falscher API Key, zu häufige Anfragen etc.)
+
+::: info Was ist eine API?
+Eine ausführlichere Erklärung finden Sie im Anhang: [API-Einführung](/de-de/appendix/4-server-and-backend/api-intro).
+
+::: warning API-Sicherheitshinweise
+API Key ist Ihr "Ausweis" für AI-Dienst-Anfragen &ndash; eine Passwort-Zeichenkette zur Authentifizierung und Abrechnung.
+
+Da der API Key direkt mit Ihrem Konto und den Kosten verbunden ist, beachten Sie unbedingt:
+
+- **Niemals** in Gruppenchats teilen, als Screenshot online stellen oder in öffentlichen Foren veröffentlichen
+- **Nicht** im Code hartcodieren und in ein Git-Repository laden (besonders öffentliche Repos)
+- Wenn Sie vermuten, dass der Key kompromittiert wurde: **Sofort einen neuen Key erstellen**
+
+Wir werden in den folgenden Inhalten den API KEY **direkt in die AI IDE einfügen**. **In echten Projekten nicht so vorgehen!!** Da es sich um eine Übung handelt, ist es in Ordnung. (Wenn Sie fortgeschrittener sind, können Sie AI eine Konfigurationsdatei generieren lassen und den API Key dort eintragen.)
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
+      { title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
+      { title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 2. Textgenerierungs-API integrieren: DeepSeek
+
+Obwohl APIs diese technischen Konzepte beinhalten, kann die praktische Umsetzung in der Prototyp-Phase sehr einfach und effizient sein. Das Kernprinzip:
+
+> **Offizielles Beispiel finden, API Key besorgen, AI IDE an den Button anbinden lassen.**
+
+Mit diesem Verständnis werden Sie feststellen: Ob Text- oder Bildmodell &ndash; der grundlegende Ablauf ist derselbe: Wenn der Nutzer auf einen Button klickt, bereitet das Frontend die Eingabe vor und sendet die Anfrage; die Schnittstelle gibt das Ergebnis zurück, das dann auf der Seite angezeigt wird. Als Nächstes werden wir dies durch praktische Anwendung überprüfen.
+
+In "1.2 Prototyp erstellen" haben Sie bereits einen interaktiven Prototypen erstellt. Als Nächstes verwandeln wir die "AI-ähnlichen Funktionen" im Prototyp in echte Fähigkeiten: **Wenn der Nutzer auf den Button klickt, sendet der Prototyp eine Anfrage an einen externen AI-Dienst und zeigt den zurückgegebenen Text an.**
+
+::: info Prinzip-Erweiterung
+Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Große Sprachmodelle (LLM) Einführung](/de-de/appendix/8-artificial-intelligence/llm-principles).
+::: details Mehr erfahren: Was ist DeepSeek?
+
+**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, unter dem Handelsnamen DeepSeek, ist ein **chinesisches AI-Unternehmen, das große Sprachmodelle (LLMs) entwickelt**. DeepSeek hat seinen Hauptsitz in Hangzhou, Provinz Zhejiang, und wird von dem chinesischen Hedgefonds High-Flyer besessen und finanziert. DeepSeek wurde im Juli 2023 von Liang Wenfeng, Mitbegründer von High-Flyer, gegründet, der auch CEO beider Unternehmen ist. Das Unternehmen brachte im Januar 2025 den gleichnamigen Chatbot und das DeepSeek-R1-Modell auf den Markt.
+
+Schauen wir uns an, wie DeepSeek im GPQA-Benchmark-Ranking im Vergleich zu anderen Top-Modellen abschneidet. Bemerkenswert: DeepSeek ist ein Open-Source-Modell (jeder kann das Modell aus dem Internet herunterladen), während andere gängige Modelle wie Grok, Google Gemini und ChatGPT proprietär sind. Wie wir sehen, hat DeepSeek die Spitze bereits weitgehend erreicht.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
+
+GPQA steht für "Graduate-Level Google-Proof Q&A Benchmark", ein Benchmark für wissenschaftliche Frage-Antwort-Aufgaben auf Graduiertenniveau. Hier ist eine detaillierte Einführung.
+
+GPQA enthält 448 Multiple-Choice-Fragen aus Teilbereichen der Biologie, Physik und Chemie, wie Quantenmechanik, organische Chemie, Molekularbiologie usw. Diese Fragen wurden von 61 Experten mit Doktortitel oder in Doktorandenausbildung verfasst und durchliefen einen strengen Verifizierungsprozess.
+:::
+
+Folgen Sie diesen 3 Schritten, um die schnelle Integration der LLM-Generierungs-API zu realisieren:
+
+1. **Einen API Key auf der DeepSeek-Plattform erstellen**
+2. **Das Textgenerierungs-Beispiel in der DeepSeek-Dokumentation finden** (oft gibt es fertigen Code zum direkten Kopieren)
+3. **AI IDE öffnen, API Key + offizielles Beispiel einfügen** und AI sagen, welche Funktion implementiert werden soll:
+   > Hilf mir, die API dieses großen Modells zu integrieren, unterstütze die Copywriting-Generierung dieser Anwendung
+
+Als Nächstes demonstrieren wir den Ablauf. Sie können den gesamten Prozess einmal mitschreiben. Registrieren Sie zunächst ein [DeepSeek](https://platform.deepseek.com/usage)-Konto, erstellen Sie einen API Key und laden Sie ein kleines Guthaben auf.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
+
+Klicken Sie auf "API KEYS" und finden Sie unten auf dem Bildschirm "create new API key". Sie erhalten schließlich einen API Key wie sk-8573341c39fc44315aadc071c53rh7d2.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
+
+Sobald Sie den Schlüssel haben, verfügen Sie über die Berechtigung, das Modell aufzurufen.
+
+Nun können Sie die [API](https://api-docs.deepseek.com/)-Dokumentation lesen, die normalerweise curl- oder Python-Aufrufbeispiele bietet.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
+
+Nachdem Sie das Beispiel gefunden haben, können Sie den gesamten Inhalt der Dokumentation zusammen mit dem Schlüssel in den AI IDE-Dialog kopieren und das LLM in den bereits entwickelten Prototypen integrieren lassen.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
+
+Verwenden Sie folgenden Prompt als Referenz:
+
+```
+Beziehe dich auf diese Aufrufmethode und hilf mir, die Copywriting-Generierung zu unterstützen.
+Basierend auf Produktinformationen soll nach Klick Douyin E-Commerce-Copywriting in verschiedenen Stilen generiert werden.
+
+Referenzmaterialien:
+api key: sk-8573341c39aefa1efe
+api Anfrage-Referenz:
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+Nach einer Weile der AI-Codegenerierung erhalten Sie leicht den entsprechenden Copywriting-Generierungs-Button zum Testen. Wenn Sie den Einstieg nicht finden, können Sie AI IDE nach der relevanten Seite fragen. Wenn Sie wirklich nicht weiterkommen, können Sie AI IDE direkt basierend auf Ihren Ideen umgestalten lassen, um das endgültige Copywriting-Generierungsergebnis zu erhalten.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
+
+Sie fragen sich vielleicht: Woher weiß ich, ob das große Modell wirklich aufgerufen wurde und nicht nur eine feste Antwort eingebaut ist? Sie können benutzerdefiniertes Copywriting eingeben und das große Modell bitten, basierend auf Ihrer angegebenen benutzerdefinierten Analyse entsprechendes Copywriting zu generieren.
+
+Wenn die Ergebnisse bei jedem Aufruf unterschiedlich, aber logisch sind, können Sie zuversichtlich annehmen, dass die API erfolgreich aufgerufen wird. Sie können auch die [API-Nutzungsverwaltungsplattform](https://platform.deepseek.com/usage) prüfen, ob der Aufruf erfolgreich war (es kann einige Minuten dauern, bis die Daten angezeigt werden).
+
+## Weitere Textgenerierungs-Modelle
+
+Neben DeepSeek können Sie auch andere große Sprachmodelle ausprobieren. Da die meisten Modelle eine **OpenAI-kompatible Schnittstelle** bieten, ist der Wechsel sehr einfach &ndash; nur API Key, Basis-URL und Modellname müssen geändert werden.
+
+### MiniMax-Integration
+
+::: details Mehr erfahren: Was ist MiniMax?
+
+**MiniMax** ist ein chinesisches AI-Unternehmen, das an der Entwicklung allgemeiner KI-Technologie forscht. MiniMax hat die selbstentwickelte MiniMax-M2.7 LLM-Serie auf den Markt gebracht, die in mehreren Benchmarks hervorragende Ergebnisse erzielt und ein exzellentes Preis-Leistungs-Verhältnis bietet.
+
+**Hauptmerkmale der MiniMax-M2.7-Serie:**
+
+- **Ultra-langer Kontext**: Unterstützt ein Kontextfenster von 204.800 Tokens, ideal für lange Dokumente und Multi-Runden-Dialoge
+- **Hervorragendes Preis-Leistungs-Verhältnis**: Sehr wettbewerbsfähige Preise
+- **OpenAI-kompatible Schnittstelle**: Direkt mit OpenAI SDK aufrufbar, ohne neues API-Format lernen zu müssen
+- **Zwei verfügbare Modelle**:
+  - `MiniMax-M2.7`: Flaggschiff-Modell für komplexe Aufgaben
+  - `MiniMax-M2.7-highspeed`: Hochgeschwindigkeitsversion mit gleicher Leistung aber schneller
+:::
+
+Die Integration erfolgt wie bei DeepSeek in drei Schritten:
+
+1. Auf der [MiniMax Open Platform](https://platform.minimax.io/) registrieren und API Key erstellen
+2. Aufrufbeispiel in der MiniMax-Dokumentation finden
+3. API Key + Beispiel in die AI IDE einfügen
+
+Da MiniMax eine OpenAI-kompatible Schnittstelle bietet, können Sie direkt das folgende curl-Beispiel mit Ihrem API Key kopieren und an die AI IDE zur Integration senden:
+
+```bash
+curl https://api.minimax.io/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${MINIMAX_API_KEY}" \
+  -d '{
+        "model": "MiniMax-M2.7",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+::: tip Hinweis
+MiniMax API-Format ist nahezu identisch mit DeepSeek (beide verwenden das OpenAI-kompatible Format). Wenn Sie DeepSeek bereits erfolgreich integriert haben, müssen Sie nur drei Dinge ändern:
+1. **Basis-URL**: Ändern zu `https://api.minimax.io/v1`
+2. **API Key**: MiniMax API Key verwenden
+3. **Modellname**: Ändern zu `MiniMax-M2.7` oder `MiniMax-M2.7-highspeed`
+
+Weitere Informationen finden Sie in der [MiniMax OpenAI-kompatiblen Schnittstellendokumentation](https://platform.minimax.io/docs/api-reference/text-openai-api).
+:::
+
+# 3. Bild-zu-Text-API integrieren: Qwen3 VL
+
+::: info Prinzip-Erweiterung
+Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Visuelle Sprachmodelle (VLM) Einführung](/de-de/appendix/8-artificial-intelligence/multimodal-models).
+
+::: details Mehr erfahren: Was ist Qwen3 VL?
+
+**Qwen3 VL** ist die neueste Version der multimodalen visuellen Sprachmodellserie, die vom Qwen-Team von Alibaba Cloud entwickelt wurde. VL steht für "Vision-Language", also visuelles Sprachmodell. Es kann Bildinhalte verstehen und basierend auf Bildern Textbeschreibungen generieren, Fragen zu Bildern beantworten und Bildinformationen extrahieren.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
+
+**Hauptfähigkeiten von Qwen3 VL:**
+
+- **Bildverstehen**: Kann Objekte, Szenen, Personen und Text in Bildern erkennen
+- **Visuelle Frage-Antwort**: Basierend auf Nutzerfragen präzise Antworten zu Bildern geben
+- **Bildbeschreibung**: Detaillierte oder kompakte Textbeschreibungen von Bildern generieren
+- **Multi-Bild-Verständnis**: Unterstützt die gleichzeitige Verarbeitung mehrerer Bilder für Vergleichsanalysen
+- **Textextraktion**: Textinhalte aus Bildern extrahieren (OCR-Fähigkeit)
+
+**Warum Qwen3 VL wählen?**
+
+Im Vergleich zur vorherigen Generation hat Qwen3 VL die Genauigkeit des Bildverstehens deutlich verbessert und unterstützt längere, komplexere Bildanalyseaufgaben. Es zeichnet sich durch hervorragendes Chinesisch-Verständnis aus, und die API-Aufrufkosten sind relativ niedrig mit einem guten Preis-Leistungs-Verhältnis. Außerdem ist das Kontextfenster größer und kann komplexere visuelle Schlussfolgerungsaufgaben bewältigen.
+
+**Typische Anwendungsszenarien:**
+
+- E-Commerce: Automatische Generierung von Titeln, Beschreibungen und Selling-Points für Produktbilder
+- Content-Erstellung: Automatische Copywriting- oder Bildvorschläge basierend auf Materialbildern
+- Büro: Bildinhalts-Extraktion, automatische Berichtserkennung
+- Bildung: Automatische Analyse von Bildaufgaben, Extraktion von Wissenspunkten
+
+:::
+
+Im vorherigen Abschnitt haben wir erklärt, wie man eine Textgenerierungs-API integriert. Für unsere Anwendungsszenarien stellen wir jedoch ein Problem fest: Wir laden ein Bild hoch, und wenn wir nur ein großes Sprachmodell verwenden, kann es den Bildinhalt nicht gut verstehen, was zu abweichenden Ergebnissen führen kann.
+
+Wir möchten ein Modell, das uns hilft, ein Bild in eine Textbeschreibung umzuwandeln. Dafür benötigen wir ein visuelles Sprachmodell (VLM). In unserem Beispiel werden wir das visuelle Sprachmodell verwenden, um Selling-Point-Beschreibungen für Produkte zu generieren und die Nutzererfahrung zu verbessern.
+
+Der Einfachheit halber verwenden wir die API-Schnittstelle der [SiliconFlow Cloud-Plattform](https://cloud.siliconflow.cn/me) für die Integration der Bild-zu-Text-API.
+
+::: details Mehr erfahren: Was ist SiliconFlow?
+**SiliconFlow** ist eine bekannte inländische AI-Modell-Aggregationsplattform, die API-Schnittstellendienste für verschiedene gängige große Sprachmodelle und visuelle Sprachmodelle anbietet.
+
+**Plattform-Features:**
+
+- **Multi-Modell-Unterstützung**: Integriert verschiedene gängige AI-Modelle, einschließlich Open-Source-Modelle wie DeepSeek, Qwen, Llama-Serie usw.
+- **Technologische Optimierung**: Inferenzoptimierung für Open-Source-Modelle mit API-Diensten für niedrige Latenz und hohe Parallelität
+- **Schnittstellenkompatibilität**: Bietet eine mit dem OpenAI-Format kompatible API-Schnittstelle für einfache Integration in bestehende Anwendungen
+- **Nutzungsabhängige Abrechnung**: Unterstützt nutzungsabhängige Abrechnung nach API-Aufrufen
+
+SiliconFlow ist im Bereich der Inferenzdienste für Open-Source-Großmodelle relativ etabliert und eine der gängigen Optionen für die Nutzung inländischer Open-Source-AI-Modelle.
+:::
+
+Auf der Startseite der SiliconFlow-Plattform sehen wir viele verfügbare Modelle. Finden Sie den Filter oben links, klicken Sie, um den Filter zu öffnen, und wählen Sie das Tag "Vision". Wir sehen dann viele Bild-zu-Text-Modelle, wie z.B. Zhipu GLM-4.6V oder Qwen3-VL.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
+
+Wir können ein beliebiges Modell zum Testen auswählen. Hier verwenden wir `Qwen/Qwen3-VL-8B-Instruct` als Beispiel.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
+
+Gehen Sie zur [SiliconFlow-Plattform](https://cloud.siliconflow.cn/me/account/ak), klicken Sie unter API-Schlüssel auf "Neuen API-Schlüssel erstellen", um einen neuen API Key zu erstellen.
+
+Sie können den folgenden Code als Referenzcode verwenden und ihn zusammen mit dem generierten API Key an die AI IDE senden, um die Funktionsintegration durchzuführen.
+
+::: details Bild-zu-Text-Referenzcode
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+```
+
+:::
+
+In diesem Szenario lassen wir AI IDE direkt helfen, die Funktion zum automatischen Generieren von E-Commerce-Selling-Point-Texten und Keywords aus hochgeladenen Bildern zu implementieren, wie folgt:
+
+```
+Basierend auf der folgenden Bild-zu-Text-API, hilf uns, eine Funktion zu implementieren,
+die aus hochgeladenen Bildern automatisch E-Commerce-Selling-Point-Texte und Keywords generiert.
+
+<Code hier ausgelassen, Sie müssen den Schlüssel und den Referenzcode selbst einfügen>
+```
+
+Schließlich erhalten wir das Generierungsergebnis:
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
+      { title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
+      { title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 4. Bildgenerierungs-API integrieren: Seedream
+
+In den vorherigen Abschnitten haben wir hauptsächlich mit textbezogenen Aufgaben gearbeitet. Als Nächstes werden wir die Integration der Bildgenerierungsfunktion ausprobieren, die die Generierung von Bildern aus Textbeschreibungen oder die Bearbeitung von Bildern unterstützt.
+
+::: info Prinzip-Erweiterung
+Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Bildgenerierung Einführung](/de-de/appendix/8-artificial-intelligence/image-generation).
+
+::: details Mehr erfahren: Was ist [Seedream](https://seed.bytedance.com/en/seedream4_5)?
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png)
+
+> Vielleicht kennen Sie bereits Nano Banana (von Google entwickelt), aber Sie sollten Seedream nicht verpassen. Seedream 4.5 ist ein neues Bildgenerierungsmodell von ByteDance. Es integriert Bildgenerierung und Bildbearbeitungsfähigkeiten in einer einheitlichen Architektur. Dies ermöglicht die flexible Bearbeitung komplexer multimodaler Aufgaben wie wissensbasierte Generierung, komplexes Schlussfolgern und Referenzkonsistenz. Außerdem ist die Inferenzgeschwindigkeit deutlich schneller als bei der Vorgängerversion, und es kann hochauflösende Bilder mit bis zu 4K-Auflösung generieren.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png)
+
+**Hauptfähigkeiten:**
+
+- **Text-zu-Bild**: Bilder aus Textbeschreibungen generieren, unterstützt verschiedene Stile (realistisch, Cartoon, Tuschmalerei, Cyberpunk usw.)
+- **Stiltransfer**: Ein Bild in einen bestimmten Kunststil umwandeln
+- **Bildvarianten**: Neue Bilder im ähnlichen Stil basierend auf einem Referenzbild generieren
+- **Auflösungsverbesserung**: Bildklarheit und Details verbessern
+- **Bildbearbeitung**: Bestehende Bilder durch natürlichsprachliche Anweisungen bearbeiten und verändern
+
+**Warum Seedream wählen?**
+
+- **Stabiles Inlandsnetzwerk**: Schnelle Zugriffszeiten im Inland, niedrige Latenz
+- **Hervorragende Ergebnisse**: Stabile und zuverlässige Leistung in E-Commerce- und Material-Szenarien
+- **Chinesisch-Optimierung**: Genaueres Verständnis für chinesische Prompts, geeignet für inländische Nutzer
+- **Hohe Geschwindigkeit**: Hohe Generierungseffizienz, kurze Antwortzeiten
+- **Stabile Qualität**: Generierung hochauflösender Bilder bis zu 4K
+
+**Typische Anwendungsszenarien:**
+
+- E-Commerce: Hauptbilder, Detailseiten-Illustrationen, Werbeplakate generieren
+- Social Media: Avatare, Memes, Illustrationen generieren
+- Design: Schnelle Konzeptbilder, Materialbilder, Hintergrundbilder erstellen
+- Marketing: Werbebilder, Event-Banner, Festtagsplakate erstellen
+
+**Kombination mit Qwen3 VL:**
+
+Diese beiden APIs können in Reihe geschaltet werden: Zuerst Qwen3 VL verwenden, um ein Referenzbild zu analysieren und den Bildinhalt zu verstehen; dann Seedream verwenden, um basierend auf den analysierten Prompts des Referenzbildes neue Bilder zu generieren.
+:::
+
+Viele "AI-Plakate / AI-Hauptbilder / AI-Charakterbilder", die Sie möglicherweise auf Douyin, Bilibili oder YouTube sehen, nutzen im Wesentlichen die in diesem Abschnitt vorgestellte Technik. Was Sie tun müssen, ist einfach: Die Nutzereingabe zu einem Satz zusammenfassen, die Bild-API anfragen und das zurückgegebene Bild anzeigen. Das hier verwendete Modell wird als Bildgenerierungs-/Bildbearbeitungsmodell bezeichnet.
+
+Wir werden schrittweise demonstrieren, wie Sie die Seedream API in Ihr Projekt integrieren (mit Unterstützung durch AI IDE).
+
+Nachdem Sie die [Startseite](https://www.volcengine.com/experience/ark?launch=seedream) aufgerufen haben, klicken Sie auf Anmelden.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png)
+
+Nach der Anmeldung finden Sie die Aufladeoption oben rechts auf der Seite.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png)
+
+Für die Aufladung ist eine Identitätsverifizierung erforderlich.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png)
+
+Nach erfolgreicher Verifizierung können Sie [1 Yuan zum Testen aufladen](https://console.volcengine.com/finance/fund/recharge).
+
+Kehren Sie zur [ursprünglichen Seite](https://www.volcengine.com/experience/ark?launch=seedream) zurück und klicken Sie auf API-Zugriff.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png)
+
+Erstellen Sie zunächst einen API Key und klicken Sie dann auf die Auswahloption.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png)
+
+Dies bringt Sie zu Schritt 2. Hier müssen Sie bestätigen, dass der aufgerufene Dienst Seedream 4.5 ist, und das bereitgestellte Aufrufbeispiel kopieren. (Der Screenshot wurde früher erstellt, daher ist die Modellversion noch 4.0.)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png)
+
+Nachdem Sie den API Key und das Aufrufbeispiel vorbereitet haben, können Sie diese direkt in die AI IDE einfügen und eine Frontend-Interaktionsdemo generieren lassen oder die Fähigkeit in einen bestehenden Prototypen integrieren. Beachten Sie, dass Sie im Bild auswählen können, ob Sie Text-zu-Bild oder Mehrere-Bilder-zu-einem-Bild verwenden möchten. Sie müssen den Referenzcode entsprechend Ihren aktuellen Anforderungen auswählen.
+
+::: warning Wichtiger Hinweis
+Das Standardbeispiel hier ist relativ komplex. Denken Sie daran, **"Wasserzeichen hinzufügen"** und **"Streaming-Antwort"** zu deaktivieren, um sicherzustellen, dass kein Wasserzeichen generiert wird und keine Anfragefehler auftreten.
+:::
+
+Da wir später den Referenzbild-Generierungsmodus verwenden, wählen wir zunächst die Funktion Mehrere-Bilder-zu-einem-Bild. Der kopierte Referenzcode sieht wie folgt aus:
+
+```
+curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer xxxxxxx" \
+  -d '{
+    "model": "doubao-seedream-4-5-251128",
+    "prompt": "Ersetze die Kleidung in Bild 1 durch die Kleidung in Bild 2",
+    "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
+    "sequential_image_generation": "disabled",
+    "response_format": "url",
+    "size": "2K",
+    "stream": false,
+    "watermark": true
+}'
+```
+
+Mit dem Bildreferenzcode lassen wir AI IDE gängige Bildaufgaben im E-Commerce unterstützen:
+
+```
+Bitte basierend auf der folgenden API hilf mir, die gängigen Funktionen im E-Commerce-Geschäft zu implementieren
+(z.B. Plakatgenerierung, Douyin E-Commerce-Hauptbild-Generierung usw.)
+
+<Hier API KEY und Bildbearbeitungscode einfügen>
+```
+
+Das Ergebnis sieht wie folgt aus:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png)
+
+Es ist erwähnenswert, dass die Bildgenerierung oft zu seltsamen Problemen führen kann. Es wird empfohlen, AI IDE so einzustellen, dass es vollständige Fehlermeldungen anzeigt, um das Kopieren und Einfügen für Korrekturen zu erleichtern (andernfalls wird möglicherweise wiederholt "Generierung fehlgeschlagen" angezeigt, ohne dass klar ist, warum). Zum Beispiel können Sie sagen:
+
+```
+Zeige nicht nur "Bildgenerierung fehlgeschlagen", sondern zeige jedes Mal den vollständigen Fehlergrund,
+wie z.B. Bildinkompatibilität, Anfragefehler, Timeout usw.!
+```
+
+Manchmal werden Aktualisierungen nach einer Änderung nicht auf der Webseite angewendet. Wenn Sie feststellen, dass die Webseite nach einer Änderung weiterhin Fehler anzeigt (mehrmals hintereinander), können Sie auch versuchen, AI IDE direkt zu sagen: Bitte starten Sie dieses Projekt neu.
+
+Im E-Commerce-Geschäft möchten wir möglicherweise, dass Nutzer hochgeladene Kleidung automatisch auf einer Person tragen können, oder automatisch attraktive Verkaufsimages und Plakate für Produkte generieren. Hier probieren wir einen Prompt aus, um ein E-Commerce-Plakat zu generieren:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png)
+
+Sie können je nach Ihren eigenen Geschäftsszenarien die Text-zu-Bild- oder Bild-zu-Bild-API verwenden, um verschiedene Funktionen zu implementieren.
+
+## Weitere Bildgenerierungsdienste
+
+Nachfolgend finden Sie weitere Optionen. Es wird empfohlen, zunächst die Qwen-Bildgenerierung erfolgreich zum Laufen zu bringen und dann basierend auf Ergebnissen und Kosten die folgenden Dienste als Ersatz auszuprobieren (wählen Sie nach persönlichem Erfahrungseindruck).
+
+### Recraft-Integration
+
+Wenn Ihr Prototyp eher in Richtung "Design-Produktion" geht (z.B. Generierung von Marken-Stil-Illustrationen, Marketing-Plakaten, Vektor-Stil-Materialien), ist Recraft oft die bessere Wahl. Die Integration erfolgt genau wie im vorherigen Abschnitt: **Key besorgen + offizielles Beispiel finden + AI IDE das Beispiel in Ihren Button/Ihre Seite integrieren lassen**.
+
+::: details Mehr erfahren: Was ist Recraft?
+
+> Recraft ist ein AI-Tool für Designer, Illustratoren und Vermarkter &ndash; 2022 in den USA gegründet, mit Hauptsitz in London. Es hilft bei der Generierung/Iteration von visuellen Elementen (Bilder, Vektorgrafiken, 3D-Grafiken) mit Vorteilen wie hochwertiger Ausgabe (jede Textgröße/-länge), präziser Elementplatzierung und markenkonsistentem Design. Vertraut von über 3 Millionen Nutzern in 200 Ländern (einschließlich Ogilvy, Netflix) und über 350 Millionen generierten Bildern. Das Team zielt darauf ab, es zu einem unverzichtbaren Designer-Tool zu machen und sicherzustellen, dass Creator ihre AI-gestützten Workflows kontrollieren können.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png)
+
+Zunächst müssen wir den [API-Zugang](https://www.recraft.ai/profile/api) finden, um den API Key zu erhalten.
+
+Da hier kein kostenloses Kontingent bereitgestellt wird, müssen wir 1.000 Credits selbst aufladen. Diese Website unterstützt Alipay und WeChat Pay, sodass es einfach ist, 1.000 Credits zu erhalten (Hinweis: Nicht mehr als notwendig aufladen).
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png)
+
+Danach folgen wir weiterhin derselben Methode: Zur offiziellen Dokumentation gehen und die entsprechenden Anfragebeispiele finden:
+
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
+
+:::
+
+### Qwen Image / Qwen Image Edit Integration
+
+Wenn Sie einen einfacheren Weg zur Integration eines Bildgenerierungsdienstes bevorzugen, können Sie Qwen Image (Tongyi Wanxiang) in Betracht ziehen. Der Ansatz bleibt derselbe: Behandeln Sie es als "Bildgenerierungs-API" und binden Sie es an den Button Ihres Prototyps an.
+
+::: details Mehr erfahren: Was ist Qwen Image / Qwen Image Edit?
+
+**Qwen Image** (auch bekannt als Tongyi Wanxiang) ist eine Bildgenerierungsmodellserie des Qwen-Teams von Alibaba Cloud, die hauptsächlich zwei Modelle umfasst:
+
+**1. Qwen Image &mdash; Text-zu-Bild-Modell**
+
+Generiert basierend auf Textbeschreibungen völlig neue Bilder. Sie geben einen Prompt ein, das Modell versteht Ihre Absicht und generiert ein Bild, das der Beschreibung entspricht.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png)
+
+**Hauptfähigkeiten:**
+
+- **Text-zu-Bild**: Bilder aus Textbeschreibungen generieren, unterstützt verschiedene Stile (realistisch, Cartoon, Tuschmalerei, Cyberpunk usw.)
+- **Stiltransfer**: Ein Bild in einen bestimmten Kunststil umwandeln
+- **Bildvarianten**: Neue Bilder im ähnlichen Stil basierend auf einem Referenzbild generieren
+- **Auflösungsverbesserung**: Bildklarheit und Details verbessern
+
+**2. Qwen Image Edit &mdash; Bild-zu-Bild-Modell**
+
+Bearbeitet und verändert bestehende Bilder. Durch natürlichsprachliche Anweisungen versteht das Modell Ihre Änderungsabsicht und generiert das Ergebnis.
+
+**Hauptfähigkeiten:**
+
+- **Lokaler Austausch**: Ein bestimmtes Objekt oder eine Person im Bild ersetzen (z.B. "Hintergrund zum Strand ändern")
+- **Elemententfernung**: Unerwünschte Elemente aus dem Bild entfernen
+- **Stiltransfer**: Filter oder künstlerische Effekte auf das Bild anwenden
+- **Bilderweiterung**: Bildränder erweitern und neue Inhalte generieren
+- **Intelligente Bildbearbeitung**: Automatische Verschönerung, Lichtanpassung, Fehlerkorrektur
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png)
+
+**Warum die Qwen Image Serie wählen?**
+
+- **Chinesisch-Optimierung**: Genaueres Verständnis für chinesische Prompts, geeignet für inländische Nutzer
+- **Niedrige Kosten**: Im Vergleich zu internationalen Wettbewerbern erschwinglicher
+- **Hohe Geschwindigkeit**: Hohe Generierungseffizienz, kurze Antwortzeiten
+- **Stabile Qualität**: Stabile und zuverlässige Leistung in E-Commerce- und Material-Szenarien
+- **Vielfältige Stile**: Unterstützt verschiedene Kunststile und kreative Effekte
+
+**Typische Anwendungsszenarien:**
+
+- E-Commerce: Hauptbilder, Detailseiten-Illustrationen, Werbeplakate generieren
+- Social Media: Avatare, Memes, Illustrationen generieren
+- Design: Schnelle Konzeptbilder, Materialbilder, Hintergrundbilder erstellen
+- Marketing: Werbebilder, Event-Banner, Festtagsplakate erstellen
+  :::
+
+Besuchen Sie die offizielle Website von [SiliconFlow](https://siliconflow.cn/). Auf der linken Seite gibt es einen "Playground"-Bereich, in dem Sie verschiedene Modelle ohne API-Aufruf ausprobieren können. Oben auf der Seite gibt es einen "Filters"-Button; klicken Sie darauf, um die Modellliste auf der rechten Seite zu filtern.
+
+Wenn Sie "Image" auswählen, sehen Sie nur die aktuell unterstützten Text-zu-Bild-Modelle. In diesem Fall verwenden wir Qwen/Qwen-Image.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png)
+
+Nachdem alles eingerichtet ist, müssen wir die entsprechende Bildgenerierungs-API-Dokumentation konsultieren. Sie können auf der offiziellen Dokumentationsseite jeden Abschnitt finden, der als "API Reference" markiert ist. Klicken Sie darauf und navigieren Sie zum [API-Bereich für Bildgenerierung](https://docs.siliconflow.cn/cn/api-reference/images/images-generations), um das entsprechende Anfragebeispiel zu finden.
+
+Sie können das folgende Anfragebeispiel zusammen mit dem API Key an die AI IDE senden, um die Bildgenerierungsfunktion zu implementieren.
+
+```bash
+curl --request POST \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
+  --header 'Content-Type: application/json' \
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
+  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
+}
+'
+```
+
+Hier können Sie entweder Qwen/Qwen-Image oder Qwen/Qwen-Image-Edit-2509 als Modell verwenden.
+
+::: details Bildbearbeitungs-Referenzcode
+
+Kopieren Sie den folgenden Code zusammen mit dem Key und senden Sie beides an AI IDE:
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+
+prompt: str = "Verwandle den Himmel in eine Abendstimmung mit Mond und Sternen, im traumhaften Stil"
+negative_prompt: str = "verschwommen, niedrige Qualität, verzerrt"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+
+:::
+
+# Anhang: Wie man "aktuell stärkere" AI-Modelle findet
+
+Die Entwicklung von Textmodellen (auch oft als "große Sprachmodelle" bezeichnet) verläuft sehr schnell. Wir müssen immer sicherstellen, dass wir eines der leistungsstärkeren Modelle verwenden. Über die folgenden zwei Websites können Sie bequem sehen, "welche Modelle aktuell häufig verwendet und besser bewertet werden".
+
+Im Allgemeinen können diese Websites als **"Modell-Arenen"** verstanden werden: Sie stellen die Ausgaben zweier Modelle nebeneinander, und Sie stimmen für diejenige, die Ihnen besser gefällt. Modelle mit mehr Stimmen bedeuten in der Regel, dass mehr Menschen sie "besser" finden.
+
+Darüber hinaus sehen Sie möglicherweise gelegentlich mysteriöse anonyme Modelle ("Unknown Model") in diesen Großmodell-Arenen. Dies bedeutet normalerweise: Jemand hat ein "internes Testmodell" für Blindtests eingeschleust, und Sie haben möglicherweise die Chance, stärkere Fähigkeiten vorab zu erleben.
+
+## LMArena
+
+Website: <https://lmarena.ai/>
+
+LMArena eignet sich besser dafür zu beurteilen, "welches Modell die meisten Nutzer bevorzugen". Mehr Stimmen und höhere Scores bedeuten in der Regel, dass es in realen Anwendungsszenarien stabiler ist.
+
+Eine einfache Nutzung:
+
+1. Direkt das Leaderboard ansehen
+2. Zunächst eine Richtung wählen (z.B. allgemeiner Dialog / Programmierung / Vision)
+3. Wählen Sie eines der Top 3, das Sie nutzen können (zugänglich, Preis akzeptabel, Latenz akzeptabel)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png)
+
+## Artificial Analysis
+
+Website: <https://artificialanalysis.ai/>
+
+Artificial Analysis eignet sich besser dafür, "Leistung / Preis / Geschwindigkeit" in einer Tabelle zu vergleichen. Sie können es als Parametertabelle für die Modellauswahl verwenden.
+
+Typische Nutzung:
+
+1. Finden Sie die Modellkategorie, die Sie interessiert (Text / Bildgenerierung usw.)
+2. Qualitätsindikatoren (Quality) + Preis (Price) + Latenz/Durchsatz (Latency/Throughput) vergleichen
+3. Wählen Sie das Modell mit dem besten "Gesamtpreis-Leistungs-Verhältnis" für Ihr Produkt
+
+::: tip Empfehlung
+Verlassen Sie sich nicht auf Ihr Bauchgefühl, um zu argumentieren, "welches besser ist". Ein zuverlässigerer Ansatz: Testen Sie 2-3 Modelle gleichzeitig mit denselben Eingaben und treffen Sie dann Ihre Entscheidung basierend auf dem Ranking und den Preisen.
+:::
+
+## Zusammenfassung
+
+Bei der Integration verschiedener AI-Dienste müssen Sie APIs nicht als zu kompliziert betrachten. Wenn Sie die folgenden Kernkonzepte beherrschen, können Sie die meisten Szenarien bewältigen:
+
+**Eine API ist im Kern eine Kommunikationsbrücke.** Was sie tut, ist einfach: Ihre Anfrage senden und die Antwort des Modells zurückbringen. Sie müssen sich nicht um das kümmern, was im Hintergrund passiert, sondern nur das Anfrageformat korrekt zusammenstellen.
+
+**Ein SDK ist eine Kapselung der API.** Wenn API die rohe Schnittstelle ist, dann ist ein SDK ein fertiges Werkzeugkasten &ndash; es übernimmt die mühsamen Details wie Anfragesignaturen, Fehlerbehandlung und Parametervalidierung für Sie. Im täglichen Entwicklungsalltag sollten Sie SDKs gegenüber direkten API-Aufrufen bevorzugen, um sich viel Mühe zu sparen.
+
+**Beim Lesen der Dokumentation genügt es, auf drei Dinge zu achten**: Die Dienstadresse (Endpoint), die Anmeldeinformationen (API Key) und wie die Aufrufparameter ausgefüllt werden. Wenn Sie diese drei Punkte geklärt haben, ist es nur eine Frage der Zeit, bis der Aufruf funktioniert.
+
+Die restliche Arbeit erledigen IDEs und moderne Entwicklungstools für Sie. Konzentrieren Sie sich auf Ihre Geschäftslogik und überlassen Sie die zugrunde liegenden Aufrufe diesen ausgereiften SDKs und Toolchains.
+
+# 5. Hausaufgabe: Ihre erste AI-Fähigkeit integrieren
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Herausforderung: AI-Fähigkeiten in Ihren Workspace integrieren</div>
+  </template>
+
+  <p>
+    Beziehen Sie sich auf die Prompts und Inhalte dieser Lektion und schließen Sie einen vollständigen Zyklus ab:
+  </p>
+
+  <ul>
+    <li>
+      <strong>Vollständiger Praxis-Zyklus</strong>
+      <ul>
+        <li>Wählen und integrieren Sie einen AI-Dienst (LLM / Text-zu-Bild / Bild-zu-Bild) &rarr; Frontend-Backend-Interaktion implementieren &rarr; In Ihren Prototypen integrieren</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Ergebnisse teilen</strong>
+      <ul>
+        <li>Machen Sie Screenshots Ihrer Funktionsseite und teilen Sie sie mit allen</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Denkaufgabe</strong>
+      <ul>
+        <li>Bereiten Sie sich auf das nächste Kapitel "Vollständiges Projektpraktikum" vor, indem Sie im Voraus überlegen: Wie möchten Sie diese AI-Fähigkeiten kombinieren, um interessante Funktionen zu schaffen?</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Nächste Schritte
+
+Im nächsten Kapitel werden wir diese verteilten AI-Fähigkeiten verketten und in einem realen Geschäftsszenario ein vollständiges Produkt erstellen:
+
+- Content-Planung, Produkteinstellung, Datenanalyse und andere Schritte zu einem vollständigen Geschäftsprozess verketten
+- Die in dieser Lektion gelernten AI-Fähigkeiten (LLM-Copywriting-Generierung, Text-zu-Bild, Bildbearbeitung usw.) in tatsächliche Geschäftsknotenpunkte einbetten
+- Einen wirklich nutzbaren "E-Commerce AI Workspace" erstellen, keine isolierte Demo
+
+<RelatedArticlesSection
+  title="Weiterlernen"
+  description="Empfohlener Lernpfad von 'einzelnen AI-Fähigkeiten' zum 'vollständigen Produktprozess'."
+  :items="relatedArticles"
+/>
diff --git a/docs/de-de/stage-1/introduction-to-ai-ide/index.md b/docs/de-de/stage-1/introduction-to-ai-ide/index.md
new file mode 100644
index 0000000..342b5a7
--- /dev/null
+++ b/docs/de-de/stage-1/introduction-to-ai-ide/index.md
@@ -0,0 +1,493 @@
+---
+title: 'AI-Programmierwerkzeuge lernen'
+description: 'Lernen Sie den Unterschied zwischen IDE und AI IDE kennen, richten Sie eine lokale Entwicklungsumgebung ein und erstellen Sie mit Trae ein erstes Snake-Spiel. Dieses Kapitel zeigt den kompletten Ablauf von Installation, Projektstart, Ausfuehrung, Fehlerbehebung und Kommunikation mit AI.'
+---
+
+# Anfaenger II: AI-Programmierwerkzeuge lernen
+
+## Kapiteluebersicht
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'ca. <strong>1 Tag</strong>, in mehreren Sitzungen moeglich'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/introduction-to-ai-ide'] ?? []
+</script>
+
+<ChapterIntroduction :duration="duration" :tags="['Lokale Entwicklungsumgebung', 'IDE und AI IDE', 'Trae', 'Agent-Entwicklung']" coreOutput="1 selbst erstelltes Spiel" expectedOutput="Ein lokal laufendes Snake-Spiel">
+
+Im vorherigen Kapitel haben wir AI-Programmierung im Browser ausprobiert. Eine Web-Plattform ist bequem, aber sie hat Grenzen: Dateien lassen sich schwer langfristig verwalten, lokale Abhaengigkeiten sind eingeschraenkt, und komplexere Projekte werden schnell unuebersichtlich. In diesem Kapitel holen wir die Entwicklungsumgebung auf den eigenen Rechner.
+
+Sie lernen, was eine IDE ist, wodurch sich eine AI IDE unterscheidet, wie Trae als lokales Werkzeug funktioniert und wie man AI nicht nur zum Chatten, sondern zum Erstellen, Aendern, Ausfuehren und Reparieren von Projekten nutzt. Am Ende haben Sie einen Arbeitsablauf, der dem Alltag echter Entwickler schon deutlich naeher kommt.
+
+::: tip Fortgeschrittenen-Hinweis
+Wenn Sie bereits programmieren koennen und lieber in der Kommandozeile arbeiten, lesen Sie spaeter auch [Moderne CLI Coding Werkzeuge](../../stage-2/backend/modern-cli/).
+:::
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Umgebung verstehen', description: 'IDE und AI IDE einordnen' },
+      { title: 'Lokal ueben', description: 'Snake-Spiel mit Trae' },
+      { title: 'Werkzeug kennen', description: 'IDE-Oberflaeche verstehen' },
+      { title: 'Besser fragen', description: 'Mit AI klar kommunizieren' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Welche Umgebung man zum Programmieren braucht
+
+### 1.1 Denkwechsel: Bei Problemen zuerst AI fragen
+
+Beim klassischen Programmierlernen sucht man oft erst im Web: Wie installiere ich Python? Wie konfiguriere ich Conda? Warum haengt `npm install`? Danach arbeitet man Tutorials Schritt fuer Schritt ab und sucht bei jeder Fehlermeldung erneut.
+
+Mit einer AI IDE sollten Sie diese Gewohnheit aendern. Wenn Sie nicht wissen, was zu tun ist, fragen Sie zuerst die AI im Seitenpanel. Sie kann Befehle erklaeren, passende Schritte vorschlagen oder sogar direkt fuer Sie ausfuehren.
+
+- **Umgebung unklar?** Fragen Sie: "Ich moechte Python schreiben. Bitte pruefe, ob Python installiert ist, und hilf mir bei der Installation, falls es fehlt."
+- **Abhaengigkeiten laden nicht?** Schreiben Sie: "Der Download schlaegt fehl. Ist das ein Netzwerkproblem? Bitte hilf mir, eine passende Spiegelquelle zu verwenden."
+- **Befehl vergessen?** Fragen Sie: "Bitte erstelle eine neue virtuelle Umgebung mit dem Namen `demo`."
+
+Der wichtige Punkt ist: Sie muessen nicht alle Befehle auswendig kennen. Sie muessen lernen, das Ziel klar zu beschreiben und die AI Schritt fuer Schritt pruefen zu lassen.
+
+### 1.2 Warum Werkzeuge noetig sind
+
+Ein paar Codezeilen kann man theoretisch in einem einfachen Texteditor schreiben. Fuer ein wartbares Projekt reicht das aber nicht:
+
+- **Ohne Syntaxhervorhebung** sehen Schluesselwoerter, Strings und Kommentare gleich aus.
+- **Ohne Vervollstaendigung** muss jeder Name exakt selbst getippt werden.
+- **Ohne Projektansicht** verliert man bei mehreren Dateien schnell den Ueberblick.
+- **Ohne Debugging** bleibt bei Fehlern oft nur Raten und Log-Ausgabe.
+
+Eine IDE, also eine integrierte Entwicklungsumgebung, loest diese Probleme. Sie organisiert Dateien, hebt Code farbig hervor, bietet Autovervollstaendigung, startet Programme und hilft beim Debugging.
+
+## 2. Was ist eine IDE?
+
+::: info Vorbereitung
+Wenn Ihnen IDEs noch neu sind, lesen Sie spaeter auch [IDE Grundlagen](/zh-cn/appendix/2-development-tools/ide-basics). Dort werden typische Bereiche wie Editor, Terminal, Seitenleiste und Debugger noch einmal in Ruhe erklaert.
+:::
+
+Fruehe Entwickler arbeiteten mit einfachen Editoren und Kommandozeilentools. Als Projekte groesser wurden, brauchte man Werkzeuge, die Dateien, Ausfuehrung und Debugging in einer Oberflaeche vereinen. Daraus entstand die IDE.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)
+
+Bildquelle der Terminal-Oberflaeche: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
+
+Auch heute werden Werkzeuge wie `Vim` oft auf Servern verwendet.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png)
+
+Moderne IDEs sind fuer Einsteiger komfortabler. Sie enthalten normalerweise:
+
+- **Quellcode-Editor**: Syntaxhervorhebung und Autovervollstaendigung.
+- **Build- und Startwerkzeuge**: Programme koennen direkt ausgefuehrt werden.
+- **Debugger**: Breakpoints, Variablenansicht und schrittweises Ausfuehren.
+- **Projektverwaltung**: Dateien und Ordner bleiben im Zusammenhang sichtbar.
+
+Die bekannteste leichte IDE ist **[Visual Studio Code](https://code.visualstudio.com/)**. Sie ist erweiterbar und fuer viele Sprachen geeignet.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png)
+
+VS Code folgt dem Prinzip "Alles ist eine Erweiterung". Mit Python-Erweiterung wird es zur Python-IDE, mit C++-Erweiterung zur C++-IDE. Ohne Erweiterungen ist es eher ein guter Texteditor.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png)
+
+Es eignet sich auch sehr gut zum Schreiben von Markdown-Dokumenten.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png)
+
+Kurz gesagt: Eine IDE ist ein Werkzeugset, das Schreiben, Verwalten, Ausfuehren und Reparieren von Code effizienter macht.
+
+## 3. Was unterscheidet eine AI IDE von einer gewoehnlichen IDE?
+
+Eine normale IDE ist ein Werkzeugkasten. Sie koennen Dateien oeffnen, Code schreiben, Programme starten und Erweiterungen installieren. Aber Sie muessen selbst wissen, welche Datei wichtig ist, welcher Befehl ausgefuehrt werden muss und wie eine Fehlermeldung zu lesen ist.
+
+Eine AI IDE fuegt ein grosses Sprachmodell und haeufig einen Agenten hinzu. Dadurch koennen Sie Aufgaben in natuerlicher Sprache formulieren:
+
+- "Erstelle eine Login-Seite."
+- "Hier ist die Fehlermeldung. Bitte erklaere die Ursache und schlage eine Reparatur vor."
+- "Fasse die Projektstruktur zusammen und erklaere mir, welche Dateien wichtig sind."
+- "Fuege eine Bestenliste zum Spiel hinzu und starte danach die App."
+
+Eine gute AI IDE kann Dateien lesen, neue Dateien erzeugen, Code ueber mehrere Dateien hinweg aendern, Befehle im Terminal ausfuehren und nach Ihrer Bestaetigung Tests oder Entwicklungsserver starten.
+
+VS Code selbst enthaelt inzwischen ebenfalls AI-Funktionen. Trotzdem sind spezialisierte AI IDEs in vielen Aufgaben staerker, weil sie Agentenablaeufe, Kontextverwaltung, Dateiaenderungen und Modellintegration gezielter ausbauen.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png)
+
+Viele AI IDEs basieren auf VS Code. Wenn Sie die Grundbedienung von VS Code verstehen, koennen Sie deshalb relativ leicht zwischen Trae, Cursor, Kiro, Qoder oder aehnlichen Werkzeugen wechseln.
+
+Typische AI-IDE-Faehigkeiten sind:
+
+- **Codegenerierung und Vervollstaendigung**: Aus wenigen Saetzen oder Pseudocode entsteht lauffaehige Logik.
+- **Codeverstaendnis und Q&A**: Die IDE beantwortet Fragen zu Dateien, Funktionen und Projektstruktur.
+- **Refactoring und Optimierung**: Bestehender Code wird nach Ihrer Absicht umgeschrieben.
+- **Testgenerierung**: Fuer Funktionen und Module koennen Testfaelle erzeugt werden.
+- **Agentische Ausfuehrung**: Ein Agent kann Dateien erstellen, Abhaengigkeiten installieren, Programme starten und Fehler iterativ reparieren.
+
+### Aktuelle AI IDEs im Ueberblick
+
+::: details Antigravity
+
+### [Antigravity](https://antigravity.google/)
+
+Antigravity ist eine von Google vorgestellte AI IDE mit Agent-First-Ansatz. Der Agent kann Editor, Terminal und Browser bedienen, Aufgaben planen, Code ausfuehren, Tests starten und Ergebnisse zusammenfassen. Sie eignet sich besonders, wenn man mit Gemini- und anderen modernen Modellen arbeiten moechte.
+:::
+
+::: details Trae
+
+### [Trae](https://www.trae.ai/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png)
+
+Trae ist ein AI-Programmierassistent von ByteDance. Es unterstuetzt viele Programmiersprachen, kann Code aus natuerlicher Sprache erzeugen, beim Debugging helfen und Designentwuerfe in React- oder Vue-Komponenten umwandeln. Fuer dieses Kapitel nutzen wir Trae als Beispiel, weil es fuer Einsteiger einen relativ klaren Agentenablauf bietet.
+:::
+
+::: details Cursor
+
+### [Cursor](https://cursor.com/)
+
+Cursor ist ein AI-Codeeditor auf Basis von VS Code. Er ist besonders stark bei groesseren Codebasen, Multi-File-Aenderungen und Kontextarbeit. Cursor ist sehr beliebt, aber die Pro-Version kostet ungefaehr 20 US-Dollar pro Monat.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png)
+:::
+
+::: details Qoder
+
+### [Qoder](https://qoder.com/)
+
+Qoder betont transparente Zusammenarbeit und Kontext-Engineering. Es kann Aufgaben in Schritte zerlegen, Ausfuehrung sichtbar machen und eignet sich fuer groessere Projekte, Architekturarbeit und Analyse alter Systeme.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png)
+:::
+
+::: details CodeBuddy
+
+### [CodeBuddy](https://copilot.tencent.com/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png)
+
+CodeBuddy ist ein AI-Programmierwerkzeug von Tencent Cloud. Es unterstuetzt Codevervollstaendigung, Code-Review, mehrere Modelle und Enterprise-Anforderungen wie private Bereitstellung und Compliance.
+:::
+
+::: details Cline
+
+### [Cline](https://cline.bot/)
+
+Cline ist ein Agent-Plugin fuer VS Code. Es kann ueber verschiedene API-Endpunkte mit unterschiedlichen Modellen arbeiten, unterstuetzt MCP-Werkzeuge und verlangt fuer Aktionen normalerweise eine Nutzerbestaetigung. Es ist gut geeignet, um Ideen schnell in bestehenden VS-Code-Workflows zu testen.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image12.png)
+:::
+
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro ist eine AI-IDE von AWS und integriert sich eng mit Amazon Bedrock sowie AWS-Diensten wie Lambda, S3 oder DynamoDB. Sie eignet sich besonders fuer Cloud-native Entwicklung im AWS-Umfeld.
+:::
+
+::: tip Modellhinweis
+Wenn Sie Anthropic-Claude-Modelle stabil nutzen wollen, sind Cursor, Kiro oder Antigravity oft geeignete Optionen, weil sie offizielle oder tiefere Integrationen anbieten.
+:::
+
+## 4. Mit Trae ein Snake-Spiel lokal erstellen
+
+Bis hierhin ging es um Begriffe. Jetzt bringen wir das in die Praxis: Wir erstellen einen leeren Ordner, oeffnen ihn in einer AI IDE, schreiben im Seitenpanel eine klare Aufgabe und lassen Trae ein Snake-Spiel mit React erzeugen.
+
+Wenn Sie vorher schon auf z.ai oder einer anderen Web-Plattform Code erstellt haben, koennen Sie diesen Code auch herunterladen und lokal in Trae weiterbearbeiten. So bleiben alte Ergebnisse erhalten, und Sie bekommen trotzdem die staerkere lokale Umgebung.
+
+### 4.1 Trae installieren
+
+Trae kann von der offiziellen Website installiert werden. Je nach Region gibt es unterschiedliche Versionen.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png)
+
+- **CN-Version**: Fuer Einsteiger in China meist einfacher, oft kostenlos nutzbar und ohne Auslandsnetzwerk bequemer.
+- **Internationale Version**: Bietet Zugang zu internationalen Modellen, setzt aber passende Netzwerkbedingungen und haeufig ein Abo voraus.
+- **Drittanbieter-Modelle**: Wenn Sie API-Token fuer Modelle wie DeepSeek, Qwen, Kimi oder andere Anbieter besitzen, koennen Sie diese als Custom Model einbinden.
+
+Die genaue Version ist weniger wichtig als der Arbeitsablauf: Projektordner oeffnen, Agent starten, Aufgabe klar beschreiben, Ergebnis pruefen.
+
+### 4.2 Trae-Oberflaeche verstehen
+
+Trae sieht VS Code sehr aehnlich: links Dateibaum, in der Mitte Editor, rechts AI-Panel.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png)
+
+Das rechte Panel ist das Copilot- oder Agentenfenster. Wenn es nicht sichtbar ist, oeffnen Sie es ueber das Symbol rechts oben.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image15.png)
+
+Im Seitenpanel finden Sie normalerweise einen **Builder**-Modus. Er funktioniert aehnlich wie ein lokaler z.ai-Agent: Er kann Dateien anlegen, Abhaengigkeiten installieren, Befehle starten und lokale Webseiten oeffnen.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image16.png)
+
+Es gibt oft mehrere Modi:
+
+- **Chat**: Gut fuer Fragen zum aktuellen Projekt oder fuer allgemeine Erklaerungen.
+- **Builder**: Gut fuer Aufgaben, bei denen Dateien erstellt oder geaendert werden.
+- **Builder with MCP**: Erweitert den Agenten um zusaetzliche Werkzeuge, etwa externe Dienste oder lokale Integrationen.
+
+Im Modellmenue koennen Sie das verwendete Modell waehlen. Vermeiden Sie am Anfang nach Moeglichkeit den Auto-Modus, wenn Sie reproduzierbare Ergebnisse wollen. Testen Sie fuer internationale Versionen Modelle wie Gemini oder GPT; fuer chinesische Versionen koennen Kimi, GLM, Qwen oder MiniMax gute Alltagsoptionen sein. Entscheidend ist nicht ein Dogma, sondern ob das Modell Ihre Aufgabe verlaesslich loest.
+
+### 4.3 Leeren Projektordner vorbereiten
+
+Erstellen Sie lokal einen leeren Ordner, zum Beispiel:
+
+```txt
+snake-game-react
+```
+
+Oeffnen Sie diesen Ordner in Trae. Der Dateibaum sollte anfangs leer oder fast leer sein. Damit weiss der Agent klar, dass er ein neues Projekt von Grund auf anlegen soll.
+
+::: details Optional: API oder Coding Plan einbinden
+
+Einige Cloud-Anbieter bieten Coding Plans oder Modell-APIs an. Damit kann man Modelle haeufiger oder stabiler nutzen als ueber einzelne Token-Abrechnung.
+
+Der typische Ablauf:
+
+1. Website des Anbieters oeffnen.
+2. Konto registrieren und anmelden.
+3. Preis- oder Coding-Plan-Seite finden.
+4. Passenden Plan kaufen oder eine API aktivieren.
+5. API Key kopieren.
+6. In Trae ueber **Add Model** oder **Custom Model** eintragen.
+
+Fuer erste Uebungen reicht oft ein kostenloses oder sehr guenstiges Modell. Zahlen Sie am Anfang nur kleine Betraege ein, bis Sie wissen, wie lange Ihr Guthaben reicht.
+
+:::
+
+### 4.4 Snake-Spiel mit einem klaren Prompt erstellen
+
+Oeffnen Sie das AI-Seitenpanel, zum Beispiel mit `Ctrl+L` oder ueber das Chat-Symbol. Geben Sie dann eine konkrete Aufgabe ein:
+
+> Bitte implementiere mit React ein Snake-Spiel. Es soll Tastatursteuerung, Essen, Wachstum, Punkteanzeige, Game Over bei Wandkontakt oder Selbstkollision und einen Neustart-Button enthalten. Erstelle das Projekt, installiere fehlende Abhaengigkeiten und starte es lokal. Wenn eine Umgebung fehlt, erklaere zuerst kurz, was installiert werden muss, und hilf mir dann Schritt fuer Schritt.
+
+Der Agent wird normalerweise Dateien anlegen, Abhaengigkeiten installieren und einen Entwicklungsserver starten. Dabei kann er anhalten, wenn er eine Bestaetigung braucht.
+
+::: warning Wichtiger Hinweis
+Manchmal pausiert ein Agent, weil ein Befehl eine Eingabe erwartet, etwa `y`, `Enter`, einen Projektnamen oder eine Auswahl. Wenn Sie unsicher sind, machen Sie einen Screenshot und fragen Sie die AI: "Was soll ich in diesem Schritt tun?"
+:::
+
+Typische Situationen:
+
+- Wenn ein Button wie **Run** erscheint, muessen Sie die Ausfuehrung bestaetigen.
+- Wenn ein Paketmanager `y` erwartet, reicht meist die Eingabe `y`.
+- Wenn ein lokaler Entwicklungsserver gestartet wurde, bleibt der Prozess im Terminal aktiv. Das ist normal; oeffnen Sie die angezeigte URL im Browser.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png)
+
+Wenn das Ergebnis nicht passt, beschreiben Sie das sichtbare Problem:
+
+- "Die Schlange bewegt sich nach Start nicht."
+- "Beim Wandkontakt erscheint kein Game Over."
+- "Der Punktestand wird nicht aktualisiert."
+- "Hier ist die Fehlermeldung. Bitte erklaere und behebe sie."
+
+Nach kurzer Zeit sollten Sie ein lauffaehiges Ergebnis sehen.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)
+
+### 4.5 Aenderungen pruefen und zurueckrollen
+
+AI IDEs zeigen Aenderungen normalerweise vor oder nach dem Schreiben an. Sie koennen akzeptieren, ablehnen oder einzelne Dateien pruefen.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png)
+
+Wenn der Agent eine schlechte Aenderung macht, nutzen Sie **Revert** oder die Versionshistorie der IDE. Das ist eine wichtige Gewohnheit: Lassen Sie AI schnell arbeiten, aber behalten Sie Kontrolle ueber die Aenderungen.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image22.png)
+
+## 5. Den generierten Code verstehen und verbessern
+
+Wenn das Spiel laeuft, ist die Arbeit nicht beendet. Jetzt koennen Sie dieselbe AI nutzen, um das Projekt zu verstehen.
+
+Fragen Sie zum Beispiel:
+
+> Bitte erklaere mir von oben nach unten, wie dieses Snake-Spiel funktioniert. Verwende moeglichst wenig Fachwoerter.
+
+Danach koennen Sie gezielt nachhaken:
+
+> Wie wird der Koerper der Schlange im Code gespeichert? Kannst du eine Alltagsanalogie verwenden?
+
+> Wo im Code wird gesteuert, dass sich die Schlange in festen Zeitabstaenden bewegt?
+
+> Welche Schritte passieren, wenn die Schlange Essen erreicht?
+
+> Wo werden Wandkollision und Selbstkollision erkannt?
+
+Wenn Sie eine Datei wie `SnakeGame.tsx` sehen und sie nicht verstehen, fragen Sie:
+
+> Bitte teile `SnakeGame.tsx` in Funktionsbereiche auf und erklaere jeden Bereich in einfachen Worten.
+
+So lernen Sie nicht alle Konzepte auf einmal, sondern erkennen zuerst die Hauptdaten: Schlange, Essen, Punktzahl und Spielzustand. Danach verstehen Sie, wann diese Daten geaendert werden: Bewegung, Essen, Game Over, Neustart.
+
+### 5.1 Oberflaeche gezielt verbessern
+
+Sagen Sie nicht nur: "Mach es schoener." Das ist zu ungenau. Beschreiben Sie konkrete Aenderungen:
+
+> Bitte verbessere die Spieloberflaeche:
+>
+> - Zentriere den Spielbereich.
+> - Nutze einen hellen Hintergrund.
+> - Mache Schlange und Essen gut sichtbar.
+> - Vergroessere die Punktzahl.
+> - Verwende Blau als Hauptfarbe fuer Buttons.
+
+Fuer Game Over:
+
+> Wenn das Spiel vorbei ist, zeige in der Mitte "Game Over" und darunter einen Neustart-Button.
+
+Wenn das Ergebnis noch nicht passt, gehen Sie in kleinen Schritten weiter:
+
+> Die Punktzahl soll groesser und auffaelliger sein.
+
+> Der Spielbereich soll kompakter wirken und mehr Abstand zum Rand haben.
+
+> Der Neustart-Button soll blau, abgerundet und zentriert sein.
+
+Wenn eine Aenderung Fehler erzeugt, kopieren Sie die Fehlermeldung ins Chatfenster und schreiben Sie: "Dieser Fehler ist nach der Oberflaechenanpassung aufgetreten. Bitte finde die Ursache im aktuellen Projekt und behebe sie."
+
+### 5.2 Gute Referenzen nutzen
+
+Einsteiger wissen oft noch nicht, was eine gute Architektur oder ein gutes UI ist. Dann hilft es, Referenzen zu verwenden. Wenn Sie auf z.ai bereits ein gutes Ergebnis hatten, kopieren Sie dessen README oder Projektbeschreibung in Trae und bitten Sie:
+
+> Bitte vergleiche mein lokales Projekt mit dieser README-Beschreibung und passe Struktur, Funktionen und Oberflaeche so an, dass sie dem beschriebenen Ergebnis naeher kommen.
+
+So erhalten Sie nicht nur "irgendein" Spiel, sondern naehern sich einem konsistenteren Ergebnis.
+
+## 6. IDE-Oberflaeche im Detail
+
+Nachdem der erste Ablauf funktioniert, lohnt sich ein Blick auf die IDE selbst. Die meisten AI IDEs folgen dem VS-Code-Layout.
+
+Typische Bereiche:
+
+- **Title Bar**: Dateiname, Fenstersteuerung und Hauptmenues.
+- **Activity Bar**: Wechsel zwischen Dateien, Suche, Git, Erweiterungen und Debugging.
+- **Side Bar**: Dateibaum oder Suchergebnisse.
+- **Editor Groups**: Hauptbereich zum Lesen und Schreiben von Code.
+- **Breadcrumbs**: Pfadnavigation innerhalb der Datei.
+- **Minimap**: Kleine Codeuebersicht fuer schnelle Orientierung.
+- **Panel**: Terminal, Ausgabe, Probleme und Debug-Informationen.
+- **Status Bar**: Umgebung, Branch, Sprache und andere Statusinformationen.
+
+Wenn Sie diese Bereiche erkennen, koennen Sie AI besser anleiten: "Oeffne die Datei im Editor", "Starte den Befehl im Terminal", "Pruefe die Fehlermeldung im Problems-Panel".
+
+## 7. Wie man als Einsteiger besser mit AI spricht
+
+AI ist stark, aber sie braucht klare Aufgaben. Der Unterschied zwischen guten und schlechten Ergebnissen liegt oft nicht an der Intelligenz des Modells, sondern daran, wie konkret Sie fragen.
+
+### 7.1 Von vager Idee zu konkreter Beschreibung
+
+Schlecht:
+
+> Hilf mir, eine Website zu bauen.
+
+Besser:
+
+> Ich kann noch nicht programmieren. Ich moechte eine einseitige persoenliche Website erstellen, die ich Bewerbern oder Recruitern schicken kann. Die Seite soll oben meinen Namen und einen kurzen Satz haben, in der Mitte drei berufliche Stationen zeigen und unten E-Mail sowie Kontaktmoeglichkeit enthalten. Bitte gib mir eine vollstaendige `index.html`, die ich direkt im Browser oeffnen kann.
+
+Ergaenzen Sie moeglichst:
+
+1. Wofuer das Ergebnis genutzt wird.
+2. Welche Inhalte enthalten sein muessen.
+3. Welche Einschraenkungen gelten.
+4. In welcher Form Sie das Ergebnis brauchen.
+
+### 7.2 Erst lauffaehig, dann komplex
+
+Einsteiger wollen oft sofort ein komplettes System: Login, Registrierung, Bestellung, Datenbank, Adminbereich. Das fuehrt schnell zu grossen Codebloecken, die man nicht versteht.
+
+Besser:
+
+1. Erst ein Minimalbeispiel.
+2. Dann einen Bereich hinzufuegen.
+3. Danach Oberflaeche verbessern.
+4. Erst spaeter Datenhaltung, Login oder Deployment.
+
+Beispiel:
+
+> Bitte gib mir zuerst nur ein minimales Beispiel, das im Browser eine Zeile "Das ist meine Startseite" zeigt. Erklaere mir Dateiname, Speichern und Oeffnen Schritt fuer Schritt.
+
+Danach:
+
+> Fuege nun einen Bereich "Berufserfahrung" hinzu und sende mir wieder den vollstaendigen Code.
+
+### 7.3 Screenshots und Fehlermeldungen nutzen
+
+Wenn Sie ein Problem nicht beschreiben koennen, geben Sie AI das, was Sie sehen:
+
+- Kopieren Sie rote Fehlermeldungen.
+- Machen Sie Screenshots von falschem Layout.
+- Beschreiben Sie knapp, was erwartet war.
+
+Beispiel:
+
+> Hier ist die vollstaendige Fehlermeldung. Ich verstehe das Englisch nicht. Bitte erklaere mir zuerst in einfachen Worten, was ungefaehr passiert ist, und sage mir danach, was ich am einfachsten aendern soll.
+
+Wenn das Modell Bilder unterstuetzt:
+
+> Das ist der aktuelle Screenshot und hier ist mein Code. Ich wollte drei Spalten, aber es erscheint nur eine Spalte. Bitte finde die Ursache und gib mir die korrigierte vollstaendige Datei.
+
+::: tip Bildfaehigkeit pruefen
+Nicht jedes Modell kann Screenshots verstehen. Reine LLMs verarbeiten nur Text. Multimodale Modelle koennen Bilder lesen. Wenn Ihr Modell keine Bilder unterstuetzt, kopieren Sie Fehlermeldungen und beschreiben Sie das Layout in Worten.
+:::
+
+### 7.4 Wenn AI-Code nicht funktioniert
+
+Fehler sind normal. Nutzen Sie eine feste Routine:
+
+1. **Nicht sofort neu anfangen.** Erst Fehlermeldung kopieren.
+2. **Problem isolieren.** Was wurde zuletzt geaendert?
+3. **AI im Projektkontext fragen.** Nicht nur die Fehlermeldung, sondern auch Ziel und letzte Aenderung nennen.
+4. **Kleine Reparatur verlangen.** Keine komplette Neuentwicklung, wenn nur ein Detail kaputt ist.
+5. **Nach jeder Reparatur testen.**
+
+Guter Prompt:
+
+> Nach deiner letzten Aenderung startet das Projekt nicht mehr. Hier ist die Fehlermeldung. Bitte erklaere zuerst die Ursache, aendere dann nur die noetigen Stellen und starte danach erneut den Test.
+
+### 7.5 AI nicht blind vertrauen
+
+AI kann Dateien aendern, aber Sie bleiben verantwortlich. Gewoehnen Sie sich an drei Kontrollen:
+
+- **Diff ansehen**: Welche Dateien wurden geaendert?
+- **Starten oder testen**: Laeuft das Projekt wirklich?
+- **Rueckgängig machen koennen**: Wenn etwas schlechter wird, Revert nutzen.
+
+Das Ziel ist nicht, jeden Code sofort zu verstehen, sondern genug Kontrolle zu behalten, um sinnvoll mit dem Agenten zu arbeiten.
+
+## 8. Hauefige Begriffe
+
+| Begriff | Bedeutung |
+| --- | --- |
+| IDE | Entwicklungsumgebung zum Schreiben, Starten und Debuggen von Code. |
+| AI IDE | IDE mit integriertem Sprachmodell und oft Agentenfaehigkeiten. |
+| Agent | AI-System, das mehrschrittige Aufgaben planen und Werkzeuge bedienen kann. |
+| Terminal | Befehlsfenster innerhalb oder ausserhalb der IDE. |
+| Dependency | Externe Bibliothek, die ein Projekt benoetigt. |
+| Dev Server | Lokaler Server, der eine Web-App waehrend der Entwicklung bereitstellt. |
+| Revert | Aenderungen auf einen frueheren Zustand zuruecksetzen. |
+| Prompt | Die Anweisung, die Sie der AI geben. |
+| Diff | Vergleich zwischen altem und neuem Code. |
+| Build | Produktions- oder Pruefprozess, der zeigt, ob ein Projekt korrekt gebaut werden kann. |
+
+## 9. Zusammenfassung
+
+In diesem Kapitel haben Sie gelernt:
+
+1. Eine IDE ist mehr als ein Texteditor: Sie organisiert, startet und debuggt Projekte.
+2. Eine AI IDE erweitert die IDE um Sprachmodell, Kontextverstaendnis und Agentenaktionen.
+3. Trae kann ein lokales Projekt erstellen, Abhaengigkeiten installieren und ein React-Spiel starten.
+4. AI funktioniert am besten, wenn Sie Ziele, Grenzen und erwartete Ausgabe konkret beschreiben.
+5. Einsteiger sollten zuerst lauffaehige Minimalversionen erstellen und danach schrittweise verbessern.
+
+Der naechste sinnvolle Schritt ist, mit einem sehr kleinen eigenen Projekt zu ueben: ein Timer, eine To-do-Liste, ein Mini-Spiel oder eine persoenliche Seite. Wichtig ist nicht, sofort perfekt zu programmieren, sondern den Kreislauf zu beherrschen: beschreiben, erzeugen lassen, ausfuehren, pruefen, nachfragen und verbessern.
+
+<RelatedArticles :articles="relatedArticles" />
diff --git a/docs/de-de/stage-1/learning-map/index.md b/docs/de-de/stage-1/learning-map/index.md
new file mode 100644
index 0000000..1638b56
--- /dev/null
+++ b/docs/de-de/stage-1/learning-map/index.md
@@ -0,0 +1,275 @@
+---
+title: 'Von der Idee zum AI-Produkt - Easy-Vibe Lernpfad'
+description: 'Vollst&auml;ndiger Lernpfad f&uuml;r AI-Programmierung: Von null bis Full-Stack-Entwicklung. Beherrschen Sie Vibe Coding, Claude Code, Cursor und andere AI IDE-Tools. Lernen Sie Produktdenken, Full-Stack-Entwicklung und AI-F&auml;higkeitsintegration.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['de-de/stage-1/learning-map'] ?? []
+</script>
+
+# Von der Idee zum AI-Produkt
+
+::: info Besonderer Dank
+Besonderer Dank an die Studierenden der **Tsinghua Universit&auml;t Shenzhen International Graduate School** f&uuml;r das Testen, Feedback und die Unterst&uuml;tzung dieses Kurses! Eure Meinungen und Beitr&auml;ge haben diesen Kurs besser gemacht. [Zur vollst&auml;ndigen Beitr&auml;gerliste](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
+:::
+
+Fr&uuml;her war die H&uuml;rde f&uuml;r Softwareentwicklung sehr hoch: Man musste Programmierung und Algorithmen verstehen und &uuml;ber Jahre von Projekterfahrung verf&uuml;gen.
+Heute ist das anders. Solange Sie eine Idee haben, kann AI Ihnen beim Schreiben von Code helfen.
+
+Das ist eine gewaltige Ver&auml;nderung: **Programmiersprachen werden zu nat&uuml;rlichen Sprachen.**
+
+Mit dem Aufkommen gro&szlig;er Sprachmodelle (LLMs) ist Entwicklung nicht mehr "das exklusive Vorrecht von Tech-Genies", sondern ein Werkzeug, das jeder nutzen kann. Das einst schwierigste Problem war "wie man Code schreibt"; jetzt ist das schwierigste Problem: "**Was willst du erstellen?**".
+
+> **Was ist Vibe Coding?**
+> Kurz gesagt: "Programmieren durch Sprechen". Vibe Coding bedeutet, dass Sie sich darauf verlassen k&ouml;nnen, ausschlie&szlig;lich mit AI zu kommunizieren, anstatt Code direkt zu schreiben, um Programmierprojekte abzuschlie&szlig;en.
+
+Nat&uuml;rlich ist es nur der erste Schritt, AI Code schreiben zu lassen. Um ein wirklich nutzbares Produkt zu erstellen, werden Sie auf folgende Probleme sto&szlig;en:
+- Wie l&auml;sst man AI sauberen, wartbaren Code schreiben?
+- Wie f&uuml;gt man zerstreuten Code zu einer lauff&auml;higen Anwendung zusammen?
+- Wie bringt man die Anwendung wirklich online, damit sie von Menschen genutzt wird?
+- Wie integriert man AI-F&auml;higkeiten wie Textgenerierung und Bilderkennung in Ihr Produkt?
+
+In diesem Kurs finden Sie Antworten auf diese Fragen.
+
+Egal ob Sie Studierende, Lehrkraft, Arzt, Arbeiter oder eine beliebige Person ohne technisches Vorwissen sind &ndash; ohne vorher jahrelang Programmieren gelernt zu haben, k&ouml;nnen Sie in zwei Wochen einen lauff&auml;higen, demo-f&auml;higen Produktprototyp erstellen.
+
+| Ihre Identit&auml;t | Was dieser Kurs Ihnen bietet |
+|---|---|
+| Studierende | Hausaufgaben, Wettbewerbe, Gr&uuml;ndung: Projekte selbst&auml;ndig umsetzen, ohne andere zu bitten |
+| Berufst&auml;tige | Wiederkehrende Arbeit automatisieren, Effizienz steigern, sogar ein Nebenprojekt entwickeln |
+| Produktmanager / Designer | Ideen bleiben nicht auf dem Papier; schnell ein Demo f&uuml;r Chef/Kunden erstellen |
+| Gr&uuml;nder / Kleinunternehmer | Ideen kosteng&uuml;nstig validieren, ohne Tausende f&uuml;r eine Agentur auszugeben |
+| Lehrkr&auml;fte / P&auml;dagogen | Lehrmittel, Kursmaterialien, automatisierte Aufgaben erstellen, Lehr-Effizienz steigern |
+| &Auml;rzte / Anw&auml;lte / Fachkr&auml;fte | Professionelle Abl&auml;ufe automatisieren, eigene Effizienz-Tools entwickeln |
+| Jeder | AI nutzen, um konkrete Probleme im Leben/Beruf zu l&ouml;sen, Unm&ouml;gliches m&ouml;glich machen |
+
+In der AI-&Auml;ra sind Umsetzungskraft und Ideen stets wichtiger als Technik.
+
+## Wachstumspfad: Von "AI nutzen k&ouml;nnen" zu "AI-Produkte erstellen k&ouml;nnen"
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>Neueinsteiger</h3>
+    <p class="stage-role">AI-Programmierung erleben</p>
+    <div class="stage-tags">
+      <span>Snake-Spiel</span>
+      <span>Null-Vorkenntnisse</span>
+      <span>Vibe Coding erleben</span>
+      <span>In Minuten generieren</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>Stage 1</h3>
+    <p class="stage-role">Produktmanager / Operations</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>Anforderungsanalyse & Prototyp</span>
+      <span>AI-F&auml;higkeiten integrieren</span>
+      <span>Vollst&auml;ndige Demo-Entwicklung</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>Stage 2</h3>
+    <p class="stage-role">Junior-/Mid-Level Entwickler</p>
+    <div class="stage-tags">
+      <span>Figma zu Code</span>
+      <span>Supabase Datenbank</span>
+      <span>Stripe-Zahlung</span>
+      <span>Dify Wissensbasis</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>Stage 3</h3>
+    <p class="stage-role">Senior Entwickler / Architekt</p>
+    <div class="stage-tags">
+      <span>Web/Mini-App/Multi-Plattform</span>
+      <span>MCP Advanced Tools</span>
+      <span>RAG & LangGraph</span>
+      <span>Senior Engineer Mindset</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+Durch diesen vollst&auml;ndigen Lernpfad werden Sie erwerben:
+
+- **Vibe Coding Entwicklungsf&auml;higkeiten:** Vibe Coding Denken und AI-Coding-Tools meisterhaft einsetzen, die Entwicklungseffizienz um ein Vielfaches steigern. Keine Syntax mehr auswendig lernen, sondern lernen, AI zur Generierung hochwertigen Codes zu leiten.
+- **Full-Stack-Entwicklungs-Know-how:** Von UI-Design &uuml;ber Frontend-Implementierung, von Datenbank-Design bis API-Entwicklung, von lokaler Entwicklung bis Cloud-Deployment &ndash; den vollst&auml;ndigen Technologie-Stack moderner Web-Anwendungen beherrschen.
+- **AI-F&auml;higkeitsintegration:** Lernen, verschiedene multimodale AI-APIs aufzurufen und AI-F&auml;higkeiten wie Text, Bild und Sprache nahtlos in Ihre Anwendungen zu integrieren. Durch RAG und andere Technologien intelligente Produkte aufbauen.
+- **Produktdenken und Operations-F&auml;higkeiten:** Von Nutzerforschung &uuml;ber Anforderungszerlegung, von MVP-Design bis Produkt-Iteration, von Zahlungsintegration bis Nutzermanagement &ndash; einen vollst&auml;ndigen Produktentwicklungs- und Operations-Kreislauf bilden.
+
+# Was k&ouml;nnen Sie nach Abschluss tun?
+
+## Stage 1: Ihren ersten Produktprototyp erstellen
+
+Diese Phase richtet sich an Personen, die &uuml;berhaupt keine Programmiererfahrung haben oder nur ein bisschen k&ouml;nnen, sich aber nicht sicher f&uuml;hlen. Sie m&uuml;ssen nicht erst eine Menge Theorie lernen, sondern steigen direkt ein und lernen beim Tun, AI-Tools zum Schreiben von Code zu nutzen.
+
+**Nach Abschluss k&ouml;nnen Sie:**
+- Mit AI-Programmier-Tools unabh&auml;ngig eine Web-Anwendung erstellen
+- Produktideen in klickbare, interaktive Prototypen umsetzen
+- Dem Prototypen AI-Funktionen hinzuf&uuml;gen (z.B. Text-to-Image, intelligente Konversation)
+- Wissen, wie man Fehler diagnostiziert und behebt
+
+Kurz gesagt: Etwas erstellen, das "l&auml;uft und anderen vorgef&uuml;hrt werden kann".
+
+Wir k&ouml;nnen zun&auml;chst AI-Programmierung durch kleine Spiele erleben, dann lernen, AI-Programmier-Tools beim Schreiben von Code und Beheben von Fehlern zu unterst&uuml;tzen. Danach beginnen wir mit einfachen Seiten und erstellen schrittweise interaktive Multi-Page-Anwendungen, erg&auml;nzt um AI-Funktionen wie Text-to-Image und intelligente Konversation. Schlie&szlig;lich schlie&szlig;en Sie unabh&auml;ngig ein vollst&auml;ndiges Projekt ab, sodass Ihre Ideen echte Umsetzungschancen erhalten.
+
+# Warum projektbasiertes Training?
+
+> **Herausforderungen der echten Welt**
+>
+> Der Grund ist eigentlich ganz einfach: Im aktuellen Zustand werden die meisten von Ihnen, direkt ins Berufsleben eintretend, bei echten Projekten und unter dem "Druck" von Chefs/Kunden kaum vorankommen. In der echten Welt sind h&auml;ufigere Szenarien:
+
+> Ihr Betreuer / Ihr Chef: Wir m&ouml;chten ein xxx machen, das Ziel ist es, den Effekt yyy zu erreichen.
+>
+> Dokumentation? Fertige Frameworks? Detaillierte Anforderungsspezifikationen? Oft existieren diese nicht.
+
+Viele Aufgaben in der echten Arbeitswelt bestehen im Wesentlichen darin, in einer hochgradig unsicheren Umgebung nie gesehene Probleme zu l&ouml;sen: Anforderungen sind vage, Grenzen verschieben sich, niemand sagt Ihnen die richtige Antwort. Sie m&uuml;ssen selbst recherchieren, experimentieren, Prototypen erstellen und st&auml;ndig iterieren, um schlie&szlig;lich eine "laufende, nutzbare, online-f&auml;hige" L&ouml;sung zu pr&auml;sentieren.
+
+Dieser Kurs m&ouml;chte genau das in einer relativ sicheren Umgebung tun: Ihnen eine "simulierte Herausforderung" im Voraus geben.
+
+- Durch scheinbar anspruchsvolle Projektaufgaben zwingen wir Sie, Probleml&ouml;sung, Designentw&uuml;rfe und selbst&auml;ndige Informationssuche zu &uuml;ben
+- Durch nicht "idiotensichere" Ger&uuml;ste und Code lernen Sie, eine mittelgro&szlig;e Codebasis zu lesen, zu verstehen und anzupassen
+- Durch den vollst&auml;ndigen Kreislauf von der Idee bis zum Launch erleben Sie den kompletten Prozess von 0 auf 1 eines echten Produkts
+
+Kurzfristig ist dieses Training anspruchsvoll; langfristig wird es Ihre Wettbewerbsf&auml;higkeit bei der Jobsuche und Karriereentwicklung erheblich steigern: Sie k&ouml;nnen mehr verantworten, in unsicheren Umgebungen eher Durchbr&uuml;che finden und AI eher in echte Produkte umsetzen, statt bei "Demo spielen" stehen zu bleiben.
+
+# Die Kunst des Fragens: Eine unerl&auml;ssliche F&auml;higkeit in der AI-&Auml;ra
+
+In der AI-&Auml;ra geh&ouml;rt auch das Fragen zu den "Grundlagen". Bei gleichem Code und gleichem Fehler: **Wie Sie fragen, bestimmt fast, welche Antwort AI geben kann** &ndash; ob oberfl&auml;chlich oder Schritt f&uuml;r Schritt mit umsetzbaren L&ouml;sungen.
+
+**Gute Gewohnheit entwickeln:** "AI fragen" als Teil des t&auml;glichen Entwicklungs-Workflows betrachten: Bei jeder Frage, bei der Sie nicht weiterkommen, sofort fragen.
+
+## Warum ist diese F&auml;higkeit unerl&auml;sslich?
+
+- **Echte Dokumentation ist selten:** Meistens stehen Sie vor unklaren Anforderungen, unfertigem Code und verstreuten Fehlermeldungen
+- **AI ist Ihr always-on Mentor + Kollege:** Wer gut fragen kann, macht daraus "hochwertige Pair-Programming"-Sessions
+- **Das Leistungslimit wird durch Kommunikation bestimmt:** Je mehr Schl&uuml;sselinformationen Sie liefern und je besser Sie das Ausgabeformat steuern, desto nutzbarer die Antworten
+
+**H&auml;ufiger Fehler:** Nur "Warum gibt es einen Fehler?" zu fragen, bringt meist nur Spekulationen. Wenn Sie den Kontext vervollst&auml;ndigen, erhalten Sie umsetzbare L&ouml;sungen.
+
+## Wie man AI Informationen "zuf&uuml;hrt": Screenshot vs. Copy &amp; Paste
+
+Beide Methoden funktionieren, aber f&uuml;r unterschiedliche Zwecke:
+
+| Methode | Geeignetes Szenario | Wichtige Anforderungen |
+| --- | --- | --- |
+| **Copy &amp; Paste** | Fehler-Stacktraces, Logs, Code, Konfiguration, API-Antworten | M&ouml;glichst vollst&auml;ndig, nicht nur eine Zeile mit Schl&uuml;sselw&ouml;rtern |
+| **Screenshot** | UI-Layout-Probleme, Interaktionsanomalien, Tool-Interface wo man Buttons nicht findet | Vollbild + wichtige Bereiche markieren, am besten mit einem Satz Textbeschreibung |
+
+::: danger Wichtige Voraussetzung
+**Nicht alle AI-Modelle unterst&uuml;tzen Bildeingabe.** Screenshot-Kommunikation erfordert multimodale AI-F&auml;higkeiten. Aktuell unterst&uuml;tzen Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google) sowie einige nationale gro&szlig;e Modelle wie Qwen, Wenxin Yiyan etc. Bildeingabe.
+
+**Wenn Ihre AI keine Bildeingabe unterst&uuml;tzt**, k&ouml;nnen Screenshots nicht erkannt werden. Bitte verwenden Sie in diesem Fall Copy &amp; Paste zur Kommunikation.
+:::
+
+## Prompt-Techniken, mit denen AI "gut und erkl&auml;rend" antwortet
+
+Wenn Sie nicht nur die Antwort, sondern auch "die Antwort verstehen" wollen. Verwenden Sie &auml;hnliche Anweisungen, die die Erkl&auml;rungsqualit&auml;t deutlich verbessern:
+
+> **Lern-Frage-Beispiele**
+>
+> - "Bitte erkl&auml;re dieses Konzept zun&auml;chst in 5 S&auml;tzen, und gib mir dann einige Fragen, um zu pr&uuml;fen, ob ich es richtig verstanden habe."
+> - "Bitte erkl&auml;re diese Fehlermeldung im Detail; ich verstehe nicht, warum dieser Fehler auftritt."
+
+# Ich habe lange durchgehalten, aber es klappt nicht. Ich m&ouml;chte aufgeben
+
+Vielleicht ist Ihre Methode falsch. K&auml;mpfen Sie nicht allein im Dunkeln. Sprechen Sie mit den Autoren und Tutoren: Teilen Sie ehrlich, was Sie bereits versucht haben, wo genau Sie feststecken und wie Ihr aktueller Gem&uuml;tszustand ist. Oft reicht eine kleine Richtungs&auml;nderung oder das Auff&uuml;llen eines fehlenden Schl&uuml;sselwissens, um weiterzumachen.
+
+# Ich finde einige Tutorial-Designs unangemessen
+
+Feedback ist jederzeit willkommen &ndash; kontaktieren Sie die Autoren, reichen Sie ein Issue ein oder geben Sie direkt in der Gruppe/im Unterricht Feedback. Wir hoffen sehr, dieses Tutorial gemeinsam mit Ihnen immer besser zu machen: Was unklar ist, was schlecht erlebbar ist, wo Sie Zeit verschwendet haben &ndash; alles kann offen kritisiert werden. Je authentischer und konkreter das Feedback, desto mehr hilft es sp&auml;teren Lernenden, Fehler zu vermeiden.
+
+# Referenzen
+
+- [Nanjing Universit&auml;t, Informatik-Fakult&auml;t, Computer System Grundlagen Kurspraktikum](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="Was Sie als N&auml;chstes lernen k&ouml;nnen"
+  description="Folgen Sie dem Pfad 'von AI nutzen zu Produkterstellung' und gehen Sie weiter."
+  :items="relatedArticles"
+/>
diff --git a/docs/en/guide/introduction.md b/docs/en/guide/introduction.md
new file mode 100644
index 0000000..62945d5
--- /dev/null
+++ b/docs/en/guide/introduction.md
@@ -0,0 +1,82 @@
+# Project Introduction
+
+2025 is regarded by many as the first year of AI programming. More and more people are starting to use AI to write code, but what they produce often remains at the toy level — they don't know how to use Vibe Coding to organize their development workflow, which tools to choose, or what critical steps lie between a prototype and a live product.
+
+We adopt a progressive **three-stage practical learning path**: a beginner onboarding stage where you quickly get started with AI programming through mini-games, Stage 1 where you master the Vibe Coding workflow and complete a web application prototype, Stage 2 where you learn full-stack development and deployment, and Stage 3 where you build cross-platform complex applications.
+
+Each stage comes with a complete hands-on project, guiding you from toy to product through real-world challenges, ultimately equipping you with the ability to **turn any idea into a working application**.
+
+We believe that by mastering Vibe Coding combined with systematic training, you alone can become a **versatile developer who combines front-end and back-end development, AI capability integration, and product design**.
+
+This project is primarily designed for three types of learners:
+
+- **Beginners (non-technical people / product and operations roles)**: Help non-technical stakeholders and entry-level learners understand key concepts and complete their first AI-powered tool or product prototype.
+- **Junior to mid-level developers (students and developers with some foundation)**: Systematically master Vibe Coding and native AI application development.
+- **Senior developers (companies and startups, open-source and independent developers)**: Support teams and individuals in rapidly building, validating, and iterating on native AI applications.
+
+## 📖 Content Navigation
+
+### General Appendix
+
+[AI Capability Dictionary: Common AI core concepts, terminology, and scenario explanations](/en/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### Stage 0: Kindergarten
+
+| Chapter                                                                                      | Key Content                                                    | Status |
+| :------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :----- |
+| [Beginner Onboarding: Learning Map](/en/stage-1/learning-map/)                               | Overview of the complete learning path                         | ✅     |
+| [Beginner Onboarding: In the AI Era, If You Can Talk, You Can Code](/en/stage-1/ai-capabilities-through-games/) | Get an initial feel for AI programming capabilities through cases like Snake | ✅     |
+
+### Stage 1: AI Product Manager
+
+| Chapter                                                                          | Key Content                                                                                              | Status |
+| :------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | :----- |
+| [1.2: Getting to Know AI IDE Tools](/en/stage-1/introduction-to-ai-ide/)         | Learn to use an IDE, master the interface structure and efficient prompting                              | ✅     |
+| [1.3: Build a Prototype Hands-On](/en/stage-1/building-prototype/)               | A complete loop from product analysis and breakdown to multi-page product prototype implementation      | ✅     |
+| [1.4: Adding AI Capabilities to Your Prototype](/en/stage-1/integrating-ai-capabilities/) | Understand and complete API integration for common AI capabilities (text, image, video)                  | ✅     |
+| [1.5: Complete Project Practice](/en/stage-1/complete-project-practice/)          | Simulate real-world scenarios, iterate based on user feedback, and complete a project showcase (includes a final assignment) | ✅     |
+
+#### Appendix
+
+| Chapter                                                                  | Key Content                                                                           | Status |
+| :----------------------------------------------------------------------- | :------------------------------------------------------------------------------------ | :----- |
+| [Appendix A: Product Thinking Supplement](/en/stage-1/appendix-a-product-thinking/)    | A product thinking framework from idea evaluation to requirement breakdown and MVP    | ✅     |
+| [Appendix B: Common Errors and Solutions](/en/stage-1/appendix-b-common-errors/) | Common errors and troubleshooting methods in Vibe Coding                              | ✅     |
+| [Appendix: Where to Find Ideas](/en/stage-1/appendix-idea-sources/)          | Discover niche directions from reference apps, trends, and VC lists                   | ✅     |
+| [Appendix: Double Diamond Model](/en/stage-1/appendix-double-diamond/)           | Understand the complete rhythm of defining the problem first, then expanding into solution design | ✅     |
+| [Appendix: Jobs to Be Done](/en/stage-1/appendix-jobs-to-be-done/)  | Use the JTBD method to understand what users truly want to accomplish                 | ✅     |
+| [Appendix: The Mom Test Interview Method](/en/stage-1/appendix-mom-test/) | A research method for validating needs through user interviews                        | ✅     |
+
+### Stage 2: Junior to Mid-level Developer
+
+#### Front-end Section
+
+| Chapter                                                                                                                | Key Content                                                                     | Status |
+| :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :----- |
+| Using Lovart to produce assets                                                                                          | Learn to use Lovart to batch-generate character, scene, and other visual assets, providing a foundation for UI design and front-end development | 🚧     |
+| Getting started with Figma and MasterGo                                                                                 | Use design tools to organize information architecture and page structure, laying the groundwork for front-end implementation | 🚧     |
+| Building your first modern application — UI design                                                                      | Complete a component-based interface from design mockups, implementing the first link from design to code | 🚧     |
+| Designing pages and buttons following UI design specifications                                                           | Learn to use mainstream design specifications to organize page structure and button hierarchy, and leverage AI to generate design proposals | 🚧     |
+| [Let's Build Hogwarts Portraits Together](/en/stage-2/frontend/hogwarts-portraits/) | Build a front-end application with AI capabilities from scratch, connecting design and development | 🚧     |
+
+#### Back-end Development Section
+
+| Chapter                                                                                                                    | Key Content                                                                                       | Status |
+| :------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | :----- |
+| What is an API                                                                                                             | Understand HTTP interfaces and the request-response model, preparing for back-end integration and debugging | 🚧     |
+| [From Database to Supabase](/en/stage-2/backend/database-supabase/) | Set up databases and APIs on Supabase, connecting data models to front-end pages                  | 🚧     |
+| Using large language models to assist in writing interface code and documentation                                          | Use LLMs to help generate interface and database documentation and code, creating readable and testable back-end services | 🚧     |
+| Git workflows and Zeabur deployment                                                                                        | Manage code with Git workflows and deploy applications to Zeabur for going live                   | 🚧     |
+| Modern CLI development tools                                                                                               | Use CLI-based AI programming tools to accelerate development and debugging, forming a personal engineering workflow | 🚧     |
+| How to integrate payment systems like Stripe                                                                               | Integrate payment systems, completing the payment flow and basic settlement process               | 🚧     |
+| Building your first modern application — full-stack application                                                            | Combine front-end, back-end, and payment modules to deliver a deployable full-stack web application | 🚧     |
+| Modern front-end component library + Trae in practice                                                                     | Use a modern front-end component library with Trae to independently build a product with login/registration and payment support | 🚧     |
+
+#### AI Capabilities Appendix
+
+| Chapter                                                                                                                                                                  | Key Content                                                                                       | Status |
+| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | :----- |
+| [Getting Started with Dify and Knowledge Base Integration](/en/stage-2/ai-capabilities/dify-knowledge-base/) | Build tool-type products using Dify Workflow and basic RAG, creating a template for future application upgrades | 🚧     |
+| Learning to query the AI dictionary and integrate multi-modal APIs                                                                                               | Learn to find suitable models and APIs, and integrate text, image, and other multi-modal capabilities into your product | 🚧     |
+
+### Stage 3: Senior Developer
diff --git a/docs/en/stage-1/ai-capabilities-through-games/index.md b/docs/en/stage-1/ai-capabilities-through-games/index.md
index 8c40689..4c1c99b 100644
--- a/docs/en/stage-1/ai-capabilities-through-games/index.md
+++ b/docs/en/stage-1/ai-capabilities-through-games/index.md
@@ -1,3 +1,8 @@
+---
+title: 'Beginner 1: In The AI Era, Talking Is Programming'
+description: 'Build an AI-native snake game through conversation, then generalize the workflow to create your own mini game or demo.'
+---
+
 # Primary 1: AI Era, If You Can Speak, You Can Code
 
 This is a **project-based learning** tutorial. We encourage you to follow the steps one by one and try to reproduce the results.
diff --git a/docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
index e0c54ac..802ba32 100644
--- a/docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
+++ b/docs/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -1,3 +1,8 @@
+---
+title: 'Comparison Of 7 AI Coding Tools'
+description: 'A hands-on benchmark of popular Web Vibe Coding platforms using one unified task, covering beginner-friendliness, code control, and deployment.'
+---
+
 # Seven AI Programming Tools Comparison
 
 ## Chapter Introduction
diff --git a/docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
index 3400d53..22cf0c6 100644
--- a/docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
+++ b/docs/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -1,3 +1,8 @@
+---
+title: 'Build A Website With Design + Coding Agents'
+description: 'From idea to launch: coordinate a design agent to produce visuals, then use a coding agent to turn it into a working website with a reusable workflow.'
+---
+
 # Designing Websites with Design and Programming Agents
 
 ## Chapter Introduction
diff --git a/docs/en/stage-1/integrating-ai-capabilities/index.md b/docs/en/stage-1/integrating-ai-capabilities/index.md
index c8845c1..c23a049 100644
--- a/docs/en/stage-1/integrating-ai-capabilities/index.md
+++ b/docs/en/stage-1/integrating-ai-capabilities/index.md
@@ -452,7 +452,7 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
   -H "Authorization: Bearer xxxxxxx" \
   -d '{
     "model": "doubao-seedream-4-5-251128",
-    "prompt": "将图1的服装换为图2的服装",
+    "prompt": "Replace the outfit in image 1 with the outfit in image 2",
     "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
     "sequential_image_generation": "disabled",
     "response_format": "url",
diff --git a/docs/en/stage-1/introduction-to-ai-ide/index.md b/docs/en/stage-1/introduction-to-ai-ide/index.md
index 9daa5a1..8019b9a 100644
--- a/docs/en/stage-1/introduction-to-ai-ide/index.md
+++ b/docs/en/stage-1/introduction-to-ai-ide/index.md
@@ -1,3 +1,7 @@
+---
+title: 'Beginner 2: Learn AI Coding Tools'
+description: 'Move from web-based AI coding to local development: understand IDE vs AI IDE, build a snake game with Trae, and learn practical AI collaboration tips.'
+---
 
 # Beginner Level 2: Learn AI Programming Tools
 
diff --git a/docs/en/stage-2/backend/database-supabase/index.md b/docs/en/stage-2/backend/database-supabase/index.md
index 94276d4..21a1ba4 100644
--- a/docs/en/stage-2/backend/database-supabase/index.md
+++ b/docs/en/stage-2/backend/database-supabase/index.md
@@ -1,1747 +1,135 @@
-# From Database to Supabase
+---
+title: 'Supabase Database (Postgres) Basics'
+description: 'A practical guide to using Supabase Postgres: schema design, SQL editor basics, auth concepts, storage URLs, realtime, and a repeatable integration workflow.'
+---
 
-In the previous lesson, we learned the basics of UI design tools (Mastergo and Figma), how to use GitHub for code retrieval and version control, and how to deploy websites with Zeabur so more people can access our apps.
+<script setup>
+const duration = 'Approx. <strong>6 hours</strong>'
+</script>
 
-To make this lesson easier to connect, let's quickly review the previous core points with a few short questions:
+# Supabase Database (Postgres) Basics
 
-1. What are frontend design tools, and how do Figma and MasterGo work?
-2. What are the basic methods for turning design drafts into code?
-3. What is GitHub, how do you configure SSH, and how do you create your first repository?
-4. What does deployment mean, how do you use Zeabur, and how do you deploy GitHub/local code to a public network?
+<ChapterIntroduction :duration="duration" :tags="['Supabase', 'Postgres', 'SQL', 'Backend']" coreOutput="A working Supabase-backed app skeleton" expectedOutput="A repeatable database integration workflow">
 
-If any of the above still feels blurry, review the previous lesson notes first. You can always ask questions in the WeChat study group.
+This chapter focuses on the database part of Supabase (Postgres). You will learn how to design a minimal schema, use the SQL Editor safely, and integrate a Supabase database into an application in a standardized way.
 
-In this lesson, we move from "an app that can run" to "an app that looks like a real online product." That means not only managing data changes with a database, but also building a complete user system (registration, login, authorization) and other core backend capabilities. We use Supabase as the main path: first implement "database + user system," then use Supabase modules to understand the core components of modern cloud backend services.
+</ChapterIntroduction>
 
-# What you will learn
+## What You Will Build
 
-1. What data is, what a database is, and common database usage
-2. What Supabase is and how to do basic database operations with it
-3. How to add basic user management with Supabase
-4. Supabase advanced features: realtime, storage, and edge functions
-5. How to enable Google and GitHub login for Supabase
+By the end, you should be able to:
 
-- A basic app that supports user sign-up/sign-in and stores data in an online database
-- A reusable Supabase backend template (database + user management, etc.) for future projects
+1. Create tables, indexes, and constraints for an app.
+2. Seed data and run queries in the SQL Editor.
+3. Integrate the database into an app (schema -> SQL -> code changes).
+4. Understand the basics of Auth / Realtime / Storage at a conceptual level.
 
-# 1. What is Database
+---
 
-## 1.1 What is Data
+## 1. SQL Editor Basics And Core Operations
 
-In the digital world, data is everywhere. Data is simply the carrier of information: your friend's contact info, a WeChat article, a short video, a game character level. In apps, data is everything that needs to be recorded and managed: user profiles, order history, app settings, and so on.
+### 1.1 `CREATE`: Define Schema
 
-In programs, data has different forms. The simplest form is variables:
-
-```python
-# Python variable definition examples
-
-# Integer variable: stores age information
-age = 30
-
-# Boolean variable: stores status (whether active)
-is_active = True  # True means active, False means inactive
-
-# List variable: stores a set of score data
-scores = [85, 92, 78, 90]  # Contains 4 integer elements representing different scores
-
-# Dictionary variable: stores multiple related information of a user
-user_info = {
-    "age": 30,           # Key "age" corresponds to the value of age
-    "height": 1.80,      # Key "height" corresponds to the value of height (unit: meter)
-    "login_count": 156   # Key "login_count" corresponds to the value of login times
-}
-```
-
-For more complex data such as user profiles and order history, tables are usually used:
-
-| user_id | name  | email             |
-| ------- | ----- | ----------------- |
-| 1001    | Alice | alice@example.com |
-| 1002    | Bob   | bob@example.com   |
-
-| order_id | user_id | amount | status    |
-| -------- | ------- | ------ | --------- |
-| 901      | 1001    | 29.99  | completed |
-| 902      | 1002    | 15.50  | pending   |
-
-For hierarchical, variable-structure data, JSON is often better. JSON is a universal internet data format that almost all systems can parse. For example, one order may contain multiple items, and each item has its own fields.
-
-```json
-{
-  "order_id": 901,
-  "user_id": 1001,
-  "amount": 29.99,
-  "status": "completed",
-  "items": [
-    { "sku": "BG-001", "name": "Beef Burger", "quantity": 1, "price": 18.00 },
-    { "sku": "SD-003", "name": "French Fries", "quantity": 1, "price": 6.99 },
-    { "sku": "DK-002", "name": "Cola", "quantity": 1, "price": 5.00 }
-  ],
-  "shipping_address": {
-    "street": "123 Tech Park Road",
-    "city": "Shenzhen",
-    "zip_code": "518057"
-  }
-}
-```
-
-There is also vector data. After unstructured data (text/images/audio) is processed by AI embedding models, the output is typically a high-dimensional float array:
-
-`[0.123, -0.456, 0.789, ..., -0.234]`
-
-In real projects, there are many data shapes and many corresponding storage systems:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image1.png)
-
-## 1.2 Why We Need Database
-
-Real-world data is complex. To store and use data efficiently, we need a dedicated system to manage it: this is the purpose of databases.
-
-A database is a specialized program that organizes, stores, manages, and queries data safely and efficiently.
-
-Without a database, app data quickly breaks down:
-
-- once users close the browser, in-memory data disappears
-- login state and preferences cannot be persisted
-- key shared data (inventory, orders) cannot be coordinated across users
-
-Databases can be deployed locally or in the cloud. Cloud databases support elastic scaling and can handle high concurrency and larger data volume.
-
-Core problems databases solve:
-
-- **Persistent storage**: data survives app restarts
-- **Efficient query and analysis**: SQL supports filtering, aggregation, analysis
-- **High performance and high concurrency**: indexing, caching, pooling, distributed architecture
-- **Integrity and consistency**: constraints, uniqueness, data validity guarantees
-- **Security and recovery**: authentication, authorization, encryption, backup/restore
-
-## 1.3 Relational Database VS Non-Relational Database (NOSQL)
-
-In practice, you typically choose between relational databases and NoSQL databases.
-
-Relational databases are like strictly structured spreadsheets. You define schema in advance (field types and rules) and connect tables by relational keys. This is highly reliable and great for scenarios such as finance and inventory where correctness is critical, but schema changes can be less flexible.
-
-NoSQL databases are more like flexible containers. They can store documents, key-value data, and changing structures without fixed schema upfront. They are easier to scale for rapidly changing and large-volume internet scenarios, but they trade off some relational query power and strict consistency.
-
-In typical usage:
-
-- relational DBs: transactions, inventory, order systems, accounting, strong consistency
-- NoSQL DBs: social content, logs, IoT high-write streams, recommendation features
-
-In early-stage startups, you usually do not need to over-optimize database type at day one. Mature cloud providers already offer strong defaults. In real business settings, teams usually match business needs with vendor support first, then optimize later.
-
-You can also refer to cloud vendor database selection guides, such as:
-[Aliyun database selection recommendation](https://help.aliyun.com/zh/govcloud/getting-started/select-database-services)
-
-| Database Type | Database | Price | Typical Scenarios |
-| ------------ | ---------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Relational | RDS MySQL | Low | Basic: learning and small websites. HA: medium pressure business scenarios. Cluster: no-interruption and heavier traffic |
-|  | RDS SQL Server | High | Basic: testing and small commercial sites. HA: enterprise websites. Cluster: no-interruption enterprise business |
-|  | RDS PostgreSQL | Lowest | Basic: learning and small websites. HA: medium business pressure. Cluster: heavy access and often better performance than common MySQL setups |
-|  | RDS PPAS | High | General and dedicated enterprise Oracle-compatible scenarios |
-|  | DRDS | Medium | Entry to enterprise and high-concurrency online business |
-| NoSQL | Redis | Medium | Hot standby persistent data and cache acceleration under read pressure |
-|  | MongoDB | Medium | Single node for dev/test, replica set for read-heavy scenarios, sharded clusters for high-scale online workloads |
-
-Let's use one concrete "blog platform" example to compare SQL and NoSQL storage models.
-
-Assume we need:
-
-- Users: id, username, email
-- Posts: id, title, content, author_id
-- Comments: id, content, commenter_id, post_id
-- Tags: id, name
-- Post-tag many-to-many relationships
-
-### Relational database (SQL) example
-
-In SQL, we normalize entities into separate tables and connect with foreign keys.
-
-- `users` table
-
-| user_id (PK) | username | email             |
-| -------------- | -------- | ----------------- |
-| 101            | Alice    | alice@example.com |
-| 102            | Bob      | bob@example.com   |
-
-- `posts` table
-
-| post_id (PK) | title     | content                        | author_id (FK) |
-| -------------- | --------- | ------------------------------ | ---------------- |
-| 1              | SQL Intro | This is an article about SQL... | 101              |
-| 2              | NoSQL Intro | NoSQL provides flexible models...   | 102              |
-
-- `comments` table
-
-| comment_id (PK) | body             | commenter_id (FK) | post_id (FK) |
-| ----------------- | ---------------- | ------------------- | -------------- |
-| 1001              | Great article!       | 102                 | 1              |
-| 1002              | Learned a lot.         | 101                 | 2              |
-| 1003              | Any more examples? | 101                 | 1              |
-
-- `tags` table
-
-| tag_id (PK) | tag_name |
-| ------------- | -------- |
-| 51            | database   |
-| 52            | technology     |
-| 53            | beginner     |
-
-- `post_tags` table (many-to-many relation)
-
-| post_id (FK) | tag_id (FK) |
-| -------------- | ------------- |
-| 1              | 51            |
-| 1              | 52            |
-| 2              | 51            |
-| 2              | 52            |
-| 2              | 53            |
-
-To fetch complete post information (post + author + comments + tags), we use multi-table joins:
+Example (a minimal `todos` table):
 
 ```sql
-SELECT
-    p.title,
-    p.content,
-    u.username AS author,
-    c.body AS comment,
-    t.tag_name AS tag
-FROM
-    posts p
-JOIN
-    users u ON p.author_id = u.user_id
-LEFT JOIN
-    comments c ON p.post_id = c.post_id
-LEFT JOIN
-    post_tags pt ON p.post_id = pt.post_id
-LEFT JOIN
-    tags t ON pt.tag_id = t.tag_id
-WHERE
-    p.post_id = 1;
-```
-
-This is SQL's strength: flexible complex queries with consistency and low redundancy.
-
-### NoSQL database (NoSQL) example
-
-In NoSQL document databases (for example MongoDB), related business data is often aggregated into a single document, reducing joins at read time.
-
-A sample document in `posts`:
-
-```json
-{
-  "_id": 1,
-  "title": "SQL Intro",
-  "content": "This is an article about SQL...",
-  "author": {
-    "user_id": 101,
-    "username": "Alice",
-    "email": "alice@example.com"
-  },
-  "tags": [
-    "database",
-    "technology"
-  ],
-  "comments": [
-    {
-      "comment_id": 1001,
-      "body": "Great article!",
-      "commenter": {
-        "user_id": 102,
-        "username": "Bob"
-      }
-    },
-    {
-      "comment_id": 1003,
-      "body": "Any more examples?",
-      "commenter": {
-        "user_id": 101,
-        "username": "Alice"
-      }
-    }
-  ]
-}
-```
-
-The advantage is obvious: one lookup can return full business context.
-
-The trade-off is data redundancy. If `username` changes, many documents may need updates. In read-heavy scenarios (blogs, product pages), this trade-off is often acceptable for faster reads. In write-heavy scenarios, you need careful design trade-offs.
-
-If you want to explore more databases:
-
-Examples of SQL databases:
-[Db2](https://www.ibm.com/products/db2-database), [MySQL](https://cloud.ibm.com/catalog#highlights), [PostgreSQL](https://www.ibm.com/think/topics/postgresql), [YugabyteDB](https://www.yugabyte.com/), [CockroachDB](https://www.cockroachlabs.com/), [Oracle Database](https://www.ibm.com/products/postgres-enterprise), [Azure SQL Database](https://www.ibm.com/consulting/microsoft)
-
-Examples of NoSQL databases:
-[Redis](https://www.ibm.com/think/topics/redis), [CouchDB](https://www.ibm.com/think/topics/couchdb), [MongoDB](https://www.ibm.com/think/topics/mongodb), [Cassandra](https://cloud.ibm.com/catalog#highlights), [Elasticsearch](https://www.ibm.com/think/topics/elasticsearch), [BigTable](https://www.techtarget.com/searchdatamanagement/news/252512583/Google-scales-up-Cloud-Bigtable-NoSQL-database), [Neo4j](https://neo4j.com/users/ibm/), [HBase](https://www.ibm.com/think/topics/hbase)
-
-# 2. Supabase
-
-Above, we discussed database categories and usage. But in real projects, a database is only one backend module. You also need sign-in/sign-up, permissions, file upload/storage, APIs, scheduled jobs, realtime notifications, and more.
-
-That broader context is **backend services**. A complete app is usually frontend + backend. In traditional workflows, teams had to build servers, configure databases, design APIs, implement security, and maintain operations manually.
-
-To reduce repeated backend groundwork, the industry created **BaaS (Backend as a Service)**: package common backend capabilities (DB/auth/storage/realtime, etc.) as cloud services that developers can call directly via SDK/API.
-
-[Supabase](https://supabase.com/) is a modern BaaS representative. It uses PostgreSQL as the core and integrates Auth, Storage, Realtime, Edge Functions, Vector, and more into a "Postgres-centered one-stop backend platform."
-
-Next, we move from "choosing only a database" to "choosing a complete backend development platform."
-
-## 2.1 Step by Step Guide
-
-After understanding Supabase's positioning, let's walk along the Supabase console path and break down each capability and responsibility.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image2.png)
-
-After signing in at Supabase and clicking **New project**:
-
-- set project name
-- set DB password
-- choose region near your target users
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image3.png)
-
-After creation, the left sidebar shows key modules: Table Editor, SQL Editor, Database, Authentication, and so on.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image4.png)
-
-### Table Editor
-
-Table Editor is Supabase's visual data table editor. You can inspect and edit DB data without writing SQL, similar to spreadsheet interaction.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image5.png)
-
-The key concept here is **Schema**.
-
-Schemas are resource containers for tables, views, functions, indexes, etc. They help with:
-
-- avoiding naming conflicts
-- permission isolation
-
-In daily development, most people mainly use:
-
-- `public`: default business tables (posts/comments/orders/etc.)
-- `auth`: authentication tables (for example `auth.users`), usually do not edit built-in auth schema tables manually
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image6.png)![](/zh-cn/stage-2/backend/database-supabase/images/image7.png)
-
-### SQL Editor
-
-SQL Editor is the SQL execution console. You can run model-generated SQL directly and inspect results quickly.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image8.png)
-
-After executing SQL, you can view new tables in Table Editor (`public` schema). Executed SQL is also saved in the left private history, and can be starred.
-
-### Database
-
-Database is the management center where you inspect tables and relationships (foreign key constraints) visually.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image9.png)
-
-You can also create tables manually in `Database -> Tables`.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image10.png)
-
-### Authentication
-
-Authentication manages sign-up/sign-in and permissions. It supports registration, login, password reset, email verification, and OAuth providers (Google/GitHub/others). User data is synced automatically into `auth.users`.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image11.png)
-
-Provider options are visible in the Provider panel. By default, email login is enabled. For GitHub/Google login, extra provider config is required.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image12.png)
-
-In `Sign In / Providers`, you can configure registration behavior (for example, whether email confirmation is required).
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image13.png)
-
-You can also use third-party auth systems in `Third Party Auth` (for example Clerk).
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image14.png)
-
-You can enable rate-limiting policies in `Rate Limits` to control abusive traffic.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image15.png)
-
-### Storage
-
-Storage is Supabase file storage and is S3-compatible in concept. It stores files (images/videos/docs/audio), supports public/private access control, and supports permanent/temporary link generation.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image16.png)
-
-We cover concrete usage in later project sections.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image17.png)
-
-If needed, you can operate via S3-compatible settings.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image18.png)
-
-> Amazon Cloud (AWS) is a cloud platform. S3 is AWS's object storage service and has effectively become an industry standard for object storage APIs.
->
-> **Why S3-compatible APIs matter:** there is a large ecosystem of SDKs/tools/docs. Compatibility dramatically reduces integration cost.
-
-### Edge Functions
-
-If you do not want to self-host a full backend, but still need secure server-side logic, use Edge Functions. They are globally distributed server functions managed by Supabase.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image19.png)
-
-A core use case is secure API proxying. Never expose sensitive keys (OpenAI/Stripe/etc.) in frontend code. Instead:
-
-- frontend calls your Supabase function
-- function securely uses secrets stored in Supabase
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image20.png)
-
-Function secrets are injected as environment variables (for example through `Deno.env.get`), so keys are never exposed to browsers.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image21.png)
-
-Minimal Edge Function request example:
-
-```javascript
-// Core config (replace with your own values)
-const projectId = "your Supabase project ID";
-const functionName = "target Edge Function name";
-const supabaseKey = "Supabase anon_key";
-
-async function callEdgeFunction() {
-  const url = `https://${projectId}.supabase.co/functions/v1/${functionName}`;
-
-  try {
-    const response = await fetch(url, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "Authorization": `Bearer ${supabaseKey}`
-      },
-      body: JSON.stringify({ order_id: "123", action: "refund" })
-    });
-
-    const result = await response.json();
-    console.log("Success:", result);
-  } catch (error) {
-    console.error("Failed:", error.message);
-  }
-}
-
-callEdgeFunction();
-```
-
-Edge Functions integrate with Supabase auth sessions and RLS. They can identify current users and operate with your security model.
-
-Typical scenarios:
-
-- third-party webhooks
-- email notifications
-- PDF generation
-- custom API endpoints and business rules
-
-Example: Clerk only manages auth identity. If you need user data synchronized into business tables, you can listen to Clerk webhooks via Edge Functions and write into Supabase automatically.
-
-### Realtime
-
-Realtime allows clients to receive DB changes instantly through WebSocket instead of polling.
-
-It includes:
-
-1. **Postgres Changes**: subscribe to row-level `INSERT`/`UPDATE`/`DELETE`
-2. **Broadcast**: low-latency temporary channel messages
-3. **Presence**: online status tracking/synchronization
-
-We will use it in project-based sections later.
-
-### Project Settings
-
-Project Settings is for deeper resource and parameter configuration.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image22.png)
-
-At beginner stage, focus on:
-
-1. **Data API**: your Supabase URL (`https://xxx.supabase.co`)
-2. **API Keys**: anon key vs service_role key
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image23.png)
-
-`anon` is for restricted client access under RLS. `service_role` is high-privilege server key and must never be exposed publicly.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image24.png)
-
-## 2.1 Create Your First SQL Table
-
-After understanding the console, let's move to core DB operations.
-
-There are two common ways to create tables in Supabase:
-
-1. (recommended) generate SQL via LLM and run it in SQL Editor
-2. visual creation via `Database -> Tables -> New table`
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image25.png)
-
-You can define table name and column types in `Columns`.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image26.png)
-
-Relational DBs rely on table relationships. Configure relations in `Foreign keys`.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image27.png)
-
-Example (student table referencing class table):
-
-```sql
-CREATE TABLE students (
-    student_id INT PRIMARY KEY,
-    student_name VARCHAR(50),
-    class_id INT,
-    FOREIGN KEY (class_id) REFERENCES classes(class_id)
-);
-```
-
-Visualized example:
-
-Classes table:
-
-| class_id | class_name |
-| -------- | ---------- |
-| 101      | Grade 1 Class 1 |
-| 102      | Grade 1 Class 2 |
-
-Students table:
-
-| student_id | student_name | class_id |
-| ---------- | ------------ | -------- |
-| 2024001    | Zhang San    | 101      |
-| 2024002    | Li Si        | 102      |
-| 2024003    | Wang Wu      | 101      |
-
-In Supabase, after adding a foreign key, choose referenced table and column directly.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image28.png)
-
-## 2.3 SQL Editor 简介与数据库基本操作
-
-Now we run a series of SQL scripts and practice CRUD step by step.
-
-All sample SQL files are available here:
-
-https://github.com/THU-SIGS-AIID/Project5-Supabase-Demos/tree/main/apps/sql-examples
-
-### **2.3.1 **`CREATE`** - 创建表结构**
-
-`CREATE TABLE` defines schema, columns, data types, and constraints.
-
-```sql
--- Step 1: Create the 'orders' table
--- This file is fully independent and creates a sample table for later steps.
-CREATE TABLE IF NOT EXISTS orders (
-  id serial PRIMARY KEY,
-  user_id int NOT NULL,            -- User ID
-  status text NOT NULL,            -- Order status (e.g. paid, pending)
-  amount numeric(10, 2) NOT NULL,  -- Order total amount
-  details jsonb,                   -- Item and extra details as JSON
-  placed_at timestamptz DEFAULT now(), -- Order creation time
-  is_paid boolean DEFAULT false    -- Paid flag
-);
-```
-
-After execution, check Table Editor:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image29.png)
-
-### **2.3.2 **`INSERT`** - 填充初始数据**
-
-After creating the table structure, the next step is to use `INSERT INTO` to add data rows into the table.
-
-```sql
--- Step 2: Insert initial rows into the orders table
--- Provides realistic, varied data for demo/testing. All values are self-contained.
-INSERT INTO orders (user_id, status, amount, details, placed_at, is_paid) VALUES
-  (2001, 'pending', 23.50, '{"items":[{"sku":"BGR001","name":"Beef Burger","qty":1,"price":12.00}]}', now() - interval '2 days', false),
-  (2002, 'paid', 50.00, '{"items":[{"sku":"BGR002","name":"Chicken Burger","qty":2,"price":10.00},{"sku":"DRK001","name":"Lemonade","qty":2,"price":5.00}]}', now() - interval '1 day', true),
-  (2003, 'cancelled', 15.00, '{"items":[{"sku":"FRY001","name":"French Fries","qty":3,"price":5.00}], "reason":"Not available"}', now() - interval '45 days', false),
-  (2004, 'paid', 22.98, '{"items":[{"sku":"BGR003","name":"Veggie Burger","qty":2,"price":9.99}], "promo":"SUMMER22"}', now() - interval '10 days', true),
-  (2005, 'pending', 18.75, '{"items":[{"sku":"SAL001","name":"Salad","qty":1,"price":6.75},{"sku":"BGR001","name":"Beef Burger","qty":1,"price":12.00}]}', now() - interval '7 hours', false),
-  (2006, 'paid', 8.00, '{"items":[{"sku":"DRK002","name":"Cola","qty":2,"price":4.00}]}', now() - interval '3 hours', true),
-  (2007, 'refunded', 14.50, '{"items":[{"sku":"BGR003","name":"Veggie Burger","qty":1,"price":9.99},{"sku":"FRY001","name":"French Fries","qty":1,"price":4.51}], "refund_reason":"Late delivery"}', now() - interval '15 days', false),
-  (2008, 'paid', 26.99, '{"items":[{"sku":"BGR002","name":"Chicken Burger","qty":2,"price":10.00},{"sku":"DRK001","name":"Lemonade","qty":1,"price":6.99}]}', now() - interval '12 days', true),
-  (2009, 'pending', 9.99, '{"items":[{"sku":"BGR003","name":"Veggie Burger","qty":1,"price":9.99}]}', now() - interval '30 minutes', false),
-  (2010, 'paid', 19.89, '{"items":[{"sku":"BGR001","name":"Beef Burger","qty":1,"price":12.00},{"sku":"DRK002","name":"Cola","qty":2,"price":3.95}]}', now() - interval '5 days', true),
-  (2011, 'cancelled', 0.00, '{"items":[], "reason":"User cancelled"}', now() - interval '2 days', false);
-
--- Expected Output:
--- After running this script, SELECT * FROM orders will show about 11 rows with varied user_id, status, amount, details (JSON), placed_at, and is_paid fields.
--- For example:
--- | id | user_id | status    | amount | is_paid | placed_at           |
--- |----|---------|-----------|--------|---------|---------------------|
--- | 1  | 2001    | pending   | 23.50  | false   | 2025-10-28 13:40:00Z|
--- | 2  | 2002    | paid      | 50.00  | true    | ...                 |
--- |... | ...     | ...       | ...    | ...     | ...                 |
-```
-
-After the script executes successfully, initial data is now inserted into the table. You can refresh Table Editor to see the result, or open a new SQL Editor tab and run `SELECT * FROM orders;` to view it directly:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image30.png)
-
-### **2.3.3 **`SELECT`** - 读取与查询数据**
-
-`SELECT` is used to query, filter, and format data:
-
-```sql
--- Example 1: Select all fields for all orders
-SELECT * FROM orders;
-
--- Example 2: Select only pending orders
-SELECT id, user_id, amount FROM orders WHERE status = 'pending';
-
--- Example 3: Select paid orders
-SELECT id, status, is_paid, amount FROM orders WHERE is_paid = true;
-
--- Example 4: Extract JSON item list
-SELECT id, details -> 'items' AS item_list FROM orders;
-```
-
-Example 2 result:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image31.png)
-
-Example 3 (paid orders):
-
-| id  | status | is_paid | amount |
-| --- | ------ | ------- | ------ |
-| 2   | paid   | true    | 50.00  |
-| 4   | paid   | true    | 22.98  |
-| 6   | paid   | true    | 8.00   |
-| 8   | paid   | true    | 26.99  |
-| 10  | paid   | true    | 19.89  |
-
-Example 4 (JSON array extract):
-
-| id  | item_list                                                                                                            |
-| --- | -------------------------------------------------------------------------------------------------------------------- |
-| 1   | `[{"qty":1,"sku":"BGR001","name":"Beef Burger","price":12}]`                                                         |
-| 2   | `[{"qty":2,"sku":"BGR002","name":"Chicken Burger","price":10},{"qty":2,"sku":"DRK001","name":"Lemonade","price":5}]` |
-| 3   | `[{"qty":3,"sku":"FRY001","name":"French Fries","price":5}]`                                                         |
-| ... | ...                                                                                                                  |
-
-### **2.3.4 **`INSERT`** - 插入单条记录**
-
-In 2.3.2, we demonstrated batch initialization inserts at the beginning. Now let's see how to insert a single new row.
-
-```sql
--- Step 4: INSERT a new order (single row)
--- Example: Add a new paid order for user 2012 with one Chicken Burger
-INSERT INTO orders (user_id, status, amount, details, is_paid)
-VALUES (
-  2012, 'paid', 9.99,
-  '{"items":[{"sku":"BGR002","name":"AIID Burger","qty":100,"price":1000}]}',
-  true
-);
--- Expected Output:
--- Before (table fragment):
--- | id | user_id | status | amount | is_paid |
--- | ...|   ...   |  ...   |  ...   |  ...    |
---
--- After (last row):
--- | id | user_id | status | amount | is_paid |
--- | xx |  2012   |  paid  |  9.99  |  true   |
--- (where xx = next serial value)
-```
-
-Now run `SELECT * FROM orders;` again. You will see the `orders` table increase successfully from 11 rows to 12 rows.
-
-### **2.3.5 **`UPDATE`** - 修改现有数据**
-
-In practical work, we frequently update table data. We can use `UPDATE` to modify existing records in a table.
-
-```sql
--- Step 5: UPDATE example
--- Example: Mark order with id=1 as paid and update its status
-UPDATE orders SET status = 'paid', is_paid = true WHERE id = 1;
--- Expected Output:
--- Before (row with id=1):
--- | id | status  | is_paid |
--- | 1  | pending |  false  |
--- After (row with id=1):
--- | id | status | is_paid |
--- | 1  | paid   |  true   |
--- All other rows remain unchanged.
-```
-
-### **2.3.6 **`DELETE`** - 删除数据**
-
-`DELETE` can be used to remove records from a table, and with conditions, it can target only a specific subset of data.
-
-```sql
--- Step 6: DELETE example
--- Example: Delete orders older than 2 days to clean up old data
-DELETE FROM orders WHERE placed_at < now() - interval '2 days';
--- Expected Output:
--- Before (filtered for affected rows):
--- | id | status    | placed_at           |
--- |  3 | shipped   | 2025-10-13 ...     |  <-- will be deleted
---
--- After:
--- No such rows remain. SELECT * FROM orders WHERE placed_at < now()-interval '2 days' yields zero rows.
--- Other rows in orders table are unaffected.
-```
-
-Before executing, you can run `SELECT id, status, placed_at FROM orders WHERE placed_at < now() - interval '2 days';` to inspect the rows matching the condition. After running `DELETE`, execute the same query again: `SELECT id, status, placed_at FROM orders WHERE placed_at < now() - interval '2 days';`. It should return an empty result, which means those rows were deleted successfully.
-
-## 2.4 RLS (Row level security)
-
-After basic CRUD, we need one key security concept: **RLS (Row Level Security)**.
-
-RLS solves data isolation:
-
-- user A should see only user A's rows
-- user B should not access user A's private rows
-
-For example, in `orders`, define policy: users can read only rows whose `user_id` matches current authenticated user.
-
-Once RLS is enabled, every `SELECT`/`INSERT`/`UPDATE`/`DELETE` request must pass at least one matching policy, or the DB will reject it.
-
-Supabase provides `auth.uid()` to reference the current authenticated user id, making policy writing straightforward.
-
-You can configure policies in the Supabase RLS UI:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image32.png)
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image33.png)
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image34.png)
-
-In practice, policies are often created in initialization SQL:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image35.png)
-
-# 3. The First SQL Application
-
-Now we move to practical project exercises. We use a burger-shop scenario to practice Supabase end to end: DB initialization, app connection, auth, and RLS behavior.
-
-## 3.1 Clone and Run Supabase Demos
-
-Clone the demo repository:
-
-https://github.com/THU-SIGS-AIID/Project5-Supabase-Demos
-
-If you already configured SSH keys, prefer SSH clone:
-
-`git@github.com:THU-SIGS-AIID/Project5-Supabase-Demos.git`
-
-If network/SSH has issues, use **Download ZIP**.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image36.png)
-
-After cloning, ask Trae or Claude Code to run a target project directory directly.
-
-## 3.2 Project1 - burger-shop-menu-crud
-
-In `project-burger-shop-menu-crud-1`, we initialize Supabase with SQL scripts and connect frontend reads/writes to Supabase.
-
-### Create a Database Using Scripts
-
-First, we need to create the required tables in Supabase. In the Project1 directory, there is a folder named `scripts`, which contains one database script file `init.sql`. It can automatically create all related database resources (including table schemas and initial data). We will frequently use this file later to initialize tables in the database.
-
-```sql
-......
-
--- ============================================================================
--- 2. Create Menu Items Table
--- ============================================================================
-
-create table if not exists public.menu_items (
+create table if not exists public.todos (
   id uuid primary key default gen_random_uuid(),
-  name text not null,
-  description text,
-  category text check (category in ('burger','side','drink')) default 'burger',
-  price_cents int not null check (price_cents > 0),
-  available boolean default true,
-  emoji text,
-  created_at timestamptz not null default now(),
-  updated_at timestamptz not null default now()
+  user_id uuid not null,
+  title text not null,
+  is_done boolean not null default false,
+  created_at timestamptz not null default now()
 );
-
--- Comments for documentation
-comment on table public.menu_items is 'Burger shop menu items for CRUD demo';
-comment on column public.menu_items.id is 'Unique identifier for each menu item';
-comment on column public.menu_items.name is 'Display name of the menu item';
-comment on column public.menu_items.description is 'Detailed description of the menu item';
-comment on column public.menu_items.category is 'Category: burger, side, or drink';
-comment on column public.menu_items.price_cents is 'Price in cents (integer) to avoid floating point issues';
-comment on column public.menu_items.available is 'Whether the item is currently available for order';
-comment on column public.menu_items.emoji is 'Optional emoji representation of the menu item';
-comment on column public.menu_items.created_at is 'Timestamp when the item was created';
-comment on column public.menu_items.updated_at is 'Timestamp when the item was last updated';
-
-......
 ```
 
-After running the initialization SQL script in SQL Editor, you can see the created tables in Table Editor. The specific execution logic of the database initialization code is:
-
-1. Create the `menu_items` table:
-2. This table stores all items in the burger shop menu. It includes fields such as `name` (product name), `description`, `price_cents` (price in cents to avoid floating-point precision issues), `category`, and `available` (whether it is currently sellable). This covers the information required by a menu item.
-3. Create the `promo_codes` table:
-4. This table manages promotions such as discount codes. It defines fields like `code`, `discount_type` (percentage or fixed amount), and `discount_value`.
-5. Disable Row Level Security (RLS):
-6. For convenience during development and testing, RLS is explicitly disabled in the script. But based on the RLS core logic we learned earlier: RLS is a key security capability in Supabase, and can precisely control "who can access/modify which data" through policies (for example, only admins can edit promo codes while regular users can only view menus). Therefore, in production, you must enable RLS and configure proper policies to block unauthorized access at the data layer.
-7. Insert seed data:
-8. To let the frontend display realistic menu and promo data right after startup (without manual test-data entry), the `init.sql` script also inserts seed data into `menu_items` and `promo_codes`. For example, you can see various burgers, sides, drinks, and multiple discount codes.
-
-### Set up the connection with database
-
-Once the database is ready, we need to connect this frontend project with Supabase so it can read data normally. We need to place the Supabase project URL and anon key into the expected configuration. This project provides two flexible approaches:
-
-1. Configure via environment variables
-
-Create a `.env` file in the project root and fill in your Supabase credentials:
-
-```
-NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
-```
-
-2. Configure directly in the project page
-
-To make quick demos and switching among different Supabase projects easier, the homepage provides a Settings button in the upper-right corner. You can click it and directly input or paste the Supabase URL and anon key in the popup modal.
-
-After clicking "Save", this information is used to dynamically create a Supabase client instance, similar to the following code:
-
-Client creation example:
-
-```JavaScript
-import { createClient, type SupabaseClient } from '@supabase/supabase-js';
-
-export function maybeCreateBrowserClient(): SupabaseClient | null {
-  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
-  const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
-  if (!url || !anon) return null;
-  return createClient(url, anon);
-}
-```
-
-After creating the database and filling the Supabase link configuration, you can see an interface like the following. You can try CRUD operations on products and observe corresponding table changes in Supabase.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image37.png)
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image38.png)
-
-### 📚 Assignment
-
-1. Try adding and deleting items, then inspect changes in Table Editor.
-
-## 3.4 Project2 - burger-shop-auth-users
-
-Project1 focuses on menu CRUD and DB connection. Project2 adds user authentication and RLS permission control.
-
-The login page supports email/password registration and sign-in via Supabase Auth native methods:
-
-```javascript
-const { error: err } = await supabaseClient.auth.signUp({
-  email,
-  password,
-  options: {
-    data: {
-      full_name: fullName || null,
-      birthday: birthday || null,
-      avatar_url: avatarUrl || null
-    }
-  }
-});
-```
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image39.png)
-
-After login, Supabase creates session automatically. With RLS, each user only sees their own account data.
-
-Initialize with `init.sql` first (if initialization fails, clean old tables or recreate the Supabase project).
-
-After sign-up and email verification, you can enter shop UI:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image40.png)
-
-To access admin UI, modify corresponding role field to `admin` in DB:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image41.png)
-
-By default, each new email sign-up requires email confirmation. You can disable forced confirmation in `Authentication -> Sign In / Providers -> Confirm email`.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image42.png)
-
-### 📚 Assignment
-
-1. Claim starter pack and complete purchase flow.
-2. Locate role-related table and set role to `admin`, then modify product quantities in admin page.
-3. Locate wallet balance table and modify values to increase remaining wallet amount.
-
-# 4. Build Your First Supabase App
-
-Now that you understand DB operations, auth, and RLS, build your own app with database + user login.
-
-## 4.1 为任意应用接入 Supabase 数据库的标准化流程
-
-Use this standardized process:
-
-1. Clarify requirements and tell AI clearly.
-   1. Describe app function and required DB behavior (for example: local React Todo needs cloud sync with Supabase).
-   2. Add constraints if needed (timestamp format, money precision, per-user visibility).
-   3. Review AI output and correct missing fields.
-2. Ask AI to generate `init.sql` based on confirmed schema; run in SQL Editor; if errors, feed error back and iterate.
-3. Ask AI to refactor code according to SQL schema and communication logic.
-4. Configure Supabase URL/key and test end-to-end.
-   1. run app and test DB interactions
-   2. inspect Table Editor sync behavior
-   3. if failures occur, report exact symptoms to AI and iterate
-
-For auth pages, ask AI directly to integrate email sign-up/sign-in and define page routing expectations.
-
-You can also ask AI to migrate implementation patterns from an existing project path directly.
-
-## 4.2 Case Study : Build an Online Snake Game
-
-Following the SOP above, use `Project5-Supabase-Demos/apps_snakegame` as concrete practice: add leaderboard + user auth.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image43.png)
-
-### 4.2.1 分析项目，识别数据需求
-
-First, similar to the standardized process above, we can clarify requirements with AI and let AI provide a corresponding modification plan based on our project and requirements. We then implement based on that plan.
-
-**You can use the following prompt to guide AI:**
-
-> "I have a snake game. The directory is at {paste the absolute path of the snake game here}. Now I want to add an online leaderboard with Supabase, and also support a user login system. The leaderboard should display rankings by username and email.
->
-> Please help me analyze what tables I need to create to implement this feature. What fields should each table include?"
-
-You will then get a response similar to:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image44.png)
-
-### 4.2.2 生成 `init.sql` 脚本
-
-Then ask AI to generate `scripts/init.sql` for Supabase initialization:
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image45.png)
-
-### 4.2.3 改造项目代码
-
-Then ask AI to refactor game code for:
-
-- leaderboard as independent page
-- auth via email
-- registration/login required before game
-
-If conversation context gets too long, start a fresh chat and pass `init.sql` as context.
-
-If auth is unstable, reference:
-
-`Project5-Supabase-Demos/apps/project-burger-shop-auth-users-2`
-
-Successful result criteria:
-
-- users can register and sign in
-- signed-in users can view leaderboard correctly
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image46.png)
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image47.png)
-
-### 📚 课程作业
-
-1. Integrate user auth into snake game demo.
-2. Integrate user auth into your own application.
-
-# 5. Become Supabase Master
-
-The above covered basic operations. Next are advanced concepts and features: why Supabase is selected in this curriculum, and how to implement more complex interactions.
-
-You do not need to master everything immediately. Learn on demand as projects require.
-
-## 5.1 Why We choose Supabase
-
-Why choose Supabase among many backend options?
-
-Startups face a common tension:
-
-- want full backend control
-- must ship quickly
-
-Self-building backend from scratch often consumes months (DB/realtime/auth/API/storage/jobs/monitoring, etc.). Supabase packages these capabilities into ready-to-use services, letting teams focus scarce time on product features instead of infrastructure.
-
-Supabase alternatives exist (PocketBase, Appwrite, etc.), but Supabase is often stronger for full SQL ecosystem maturity and community scale.
-
-Compared with closed systems like Firebase, Supabase's open-source approach reduces vendor lock-in risk and supports self-hosting.
-
-Selection is context-dependent:
-
-- tiny personal experiments: ultra-light tools may be enough
-- enterprise compliance scenarios: specialized enterprise identity stack may fit better
-- MVP and early growth: Supabase is often sufficient and can scale with integrations (Stripe, Resend, Cloudflare, etc.)
-
-## 5.2 Google & Github Login Support
-
-Earlier we covered email sign-up/sign-in. In production UX, social login usually improves conversion and user convenience.
-
-This section explains full details for Google and GitHub OAuth and password reset.
-
-Reference project:
-`Project5-Supabase-Demos/apps/project-burger-shop-auth-advanced-supabase-6`
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image48.png)
-
-### 5.2.1 OAuth 流程：第三方登录是如何工作的？
-
-Third-party login uses OAuth 2.0. Its essence is delegated authorization: users grant limited profile access without exposing provider passwords to your app.
-
-Typical flow:
-
-1. user clicks Google sign-in button
-2. user is redirected to Google authorization page
-3. user consents; Google returns one-time authorization code via callback URL
-4. Supabase backend exchanges code for access token
-5. Supabase fetches profile, creates/links account, and establishes session
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image49.png)
-
-### 5.2.2 配置 Google Cloud 获取 Client ID 和 Secret
-
-No matter which third-party login method you use, you normally need to configure a Client ID and Client Secret. For Google login, you first need to create an OAuth 2.0 Client ID in Google Cloud Platform to obtain these values.
-
-1. **Enter Google Cloud Console**:
-2. Visit [Google Cloud Console](https://console.cloud.google.com/).
-3. Create a new project or select an existing one.
-4. **Configure OAuth consent screen**:
-5. In the left navigation, go to `APIs & Services` -> `OAuth consent screen`.
-6. Select the `External` user type, then click `Create`.
-7. Fill required information such as app name and user support email.
-8. In `Authorized domains`, add your Supabase project domain in the format `*.supabase.co`.
-9. Save and continue. In the `Scopes` and `Test users` steps, you can skip for now and save directly.
-10. **Create credentials**:
-11. Go to `APIs & Services` -> `Credentials`.
-12. Click `+ CREATE CREDENTIALS`, then select `OAuth client ID`.
-13. Select `Web application` for `Application type`.
-14. Give it a name, for example `Supabase Auth`.
-15. In `Authorized redirect URIs`, click `ADD URI` and fill your Supabase callback URL. You can find this URL in Supabase Dashboard at `Authentication` -> `Providers` -> `Google`. The format is usually `https://<your-project-id>.supabase.co/auth/v1/callback`.
-    ![](/zh-cn/stage-2/backend/database-supabase/images/image50.png)
-16. Click `CREATE`.
-17. **Get Client ID and Client Secret**:
-18. After creation succeeds, a popup shows your **Client ID** and **Client Secret**. Be sure to copy and store them immediately.
-
-### 5.2.3 配置 GitHub 获取 Client ID 和 Secret
-
-Similarly, you need to register an OAuth application on GitHub.
-
-1. **Enter GitHub Developer Settings**:
-   1. Sign in to your GitHub account.
-   2. Click your avatar in the upper-right corner and enter `Settings`.
-   3. At the bottom of the left navigation, find `Developer settings`.
-
-2. **Register a new application**:
-3. Select `OAuth Apps`, then click `New OAuth App`.
-4. Fill in an app name, for example `My Burger Shop`.
-5. **Homepage URL**: fill your online app URL, or local development URL `http://localhost:3000`.
-6. **Authorization callback URL**: fill in your Supabase project callback URL. You can find it in Supabase Dashboard at `Authentication` -> `Providers` -> `GitHub`. The format is `https://<your-project-id>.supabase.co/auth/v1/callback`.
-7. Click `Register application`.
-8. **Get Client ID and Client Secret**:
-9. After registration, the page displays your **Client ID**.
-   ![](/zh-cn/stage-2/backend/database-supabase/images/image51.png)
-10. Click `Generate a new client secret` to generate your **Client Secret**. Again, copy and store it immediately.
-
-### 5.2.4 在 Supabase 中配置 Provider
-
-Now configure the credentials you obtained in Supabase.
-
-1. **Enter Supabase Dashboard**:
-2. Select your project, then go to `Authentication` -> `Providers`.
-3. **Enable and configure Google**:
-4. Find `Google` and enable it.
-5. Paste the **Client ID** and **Client Secret** from Google Cloud into the corresponding fields.
-6. Click `Save`.
-7. **Enable and configure GitHub**:
-   1. Find `GitHub` and enable it.
-   2. Paste the **Client ID** and **Client Secret** from GitHub into the corresponding fields.
-   3. Click `Save`.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image52.png)
-
-At this point, your website can already support third-party account login. You can directly ask AI to use `Project5-Supabase-Demos/apps/project-burger-shop-auth-advanced-supabase-6` as reference and add user login support to your own project, integrating both GitHub and Google authentication with minimal cost.
-
-### 5.2.6 密码重置实现
-
-Password reset is a core production auth feature.
-
-Reference project includes full implementation:
-`project-burger-shop-auth-advanced-supabase-6`
-
-Core flow:
-
-1. user enters email; frontend calls `supabase.auth.resetPasswordForEmail()` with redirect URL
-2. Supabase sends reset email
-3. user clicks email link and is redirected to reset page
-4. user submits new password through `supabase.auth.updateUser()`
-
-You can customize reset templates in:
-`Authentication -> Email Templates`
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image53.png)
-
-## 5.3 Realtime Function
-
-Supabase Realtime is one of its strongest capabilities. It is useful for collaborative docs, live dashboards, game lobbies, and customer-support systems.
-
-Project:
-`Project5-Supabase-Demos/apps/project-burger-shop-realtime-orders-3`
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image54.png)
-
-### 5.3.1 数据库实时变动 Postgres Changes
-
-Postgres Changes subscribes to row changes in specific tables/events.
-
-Enable realtime replication with SQL:
+### 1.2 `INSERT`: Seed Data
 
 ```sql
-ALTER TABLE public.chat_messages REPLICA IDENTITY FULL;
-DO $$
-BEGIN
-  IF NOT EXISTS (
-    SELECT 1 FROM pg_publication_tables
-    WHERE pubname = 'supabase_realtime'
-      AND schemaname = 'public'
-      AND tablename = 'chat_messages'
-  ) THEN
-    ALTER PUBLICATION supabase_realtime ADD TABLE public.chat_messages;
-  END IF;
-END $$;
+insert into public.todos (user_id, title, is_done)
+values
+  ('00000000-0000-0000-0000-000000000000', 'First todo', false);
 ```
 
-Client subscription example:
-
-```typescript
-const sub = supabase
-  .channel('chat_messages_channel')
-  .on('postgres_changes', {
-    event: 'INSERT',
-    schema: 'public',
-    table: 'chat_messages'
-  }, (payload: any) => {
-    console.log('New message received:', payload.new);
-    const newMessage = payload.new as Message;
-  })
-  .subscribe((status: string) => {
-    console.log('Chat subscription status:', status);
-  });
-```
-
-Key points:
-
-- `.channel(...)`: isolate communication scope
-- `.on('postgres_changes', ...)`: subscribe event source and filter
-- `payload.new`: newly inserted row content
-- `.subscribe()`: activate channel
-
-### 5.3.2 信息广播同步 Broadcast & Presence
-
-For low-latency temporary states (for example cursor tracking), use Broadcast + Presence rather than DB writes.
-
-- Presence: shared online-state synchronization
-- Broadcast: temporary low-latency message passing
-
-Presence implementation steps:
-
-1. Create presence-enabled channel
-
-```text
-const ch = supabase.channel('lobby_presence', {
-  config: {
-    presence: { key: anonymousUser.id },
-  }
-});
-```
-
-2. Subscribe and track current user
-
-```text
-const me = {
-  id: anonymousUser.id,
-  name: anonymousUser.name,
-  color: anonymousUser.color
-};
-
-ch.subscribe(async (status) => {
-  if (status === 'SUBSCRIBED') {
-    await ch.track(me);
-  }
-});
-```
-
-3. Sync full online list
-
-```text
-ch.on('presence', { event: 'sync' }, () => {
-  const state = ch.presenceState();
-  const flat = {};
-  Object.values(state).forEach((arr) => {
-    arr.forEach((u) => { flat[u.id] = { ...u }; });
-  });
-  setOnline(flat);
-});
-```
-
-4. Listen join/leave events
-
-```text
-ch.on('presence', { event: 'join' }, ({ key, newPresences }) => {
-  console.log('User joined:', key, newPresences);
-});
-
-ch.on('presence', { event: 'leave' }, ({ key, leftPresences }) => {
-  console.log('User left:', key, leftPresences);
-});
-```
-
-Broadcast cursor example:
-
-Sender:
-
-```typescript
-const handleMouseMove = (e) => {
-  const payload = {
-    id: anonymousUser.id,
-    x: e.clientX,
-    y: e.clientY,
-    name: anonymousUser.name,
-    color: anonymousUser.color
-  };
-
-  channelRef.current?.send({
-    type: 'broadcast',
-    event: 'cursor',
-    payload
-  });
-};
-
-document.addEventListener('mousemove', handleMouseMove);
-```
-
-Receiver:
-
-```typescript
-ch.on('broadcast', { event: 'cursor' }, ({ payload }) => {
-  setOnline((prev) => ({
-    ...prev,
-    [payload.id]: {
-      ...(prev[payload.id] || {}),
-      x: payload.x,
-      y: payload.y
-    }
-  }));
-});
-```
-
-Presence keeps "who is online"; Broadcast carries temporary shared states.
-
-## 5.4 Storage
-
-A real app handles not only structured data (orders/users), but also unstructured files (avatars, product images, documents).
-
-If such files are all stored in business servers directly, storage pressure and IO bottlenecks can become severe.
-
-In practice, files are stored in object storage systems (S3/OSS/etc.), and apps access files through URL addresses.
-
-Project:
-`project-burger-shop-storage-uploads-4`
-
-This project demonstrates avatar upload flow and uses `Uppy` + `Tus` resumable upload against Supabase upload endpoint.
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image55.png)
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image56.png)
-
-### 5.4.1. Bucket
-
-Storage is organized by buckets (like folders), each with independent policies and settings.
-
-Like DB RLS, Storage permissions are controlled with SQL policies on `storage.objects` and `storage.buckets`.
-
-Example: only allow authenticated users to upload image files under user-specific folder in `avatars` bucket:
-
-```text
-CREATE POLICY "Allow authenticated uploads to avatars bucket"
-ON storage.objects FOR INSERT
-TO authenticated
-WITH CHECK (
-  bucket_id = 'avatars' AND
-  auth.uid() = (storage.foldername(name))[1]::uuid AND
-  (storage.extension(name) IN ('png', 'jpg', 'jpeg'))
-);
-
-CREATE POLICY "Allow public read access to avatars"
-ON storage.objects FOR SELECT
-USING ( bucket_id = 'avatars' );
-```
-
-### 5.4.2 获取可访问文件 URL
-
-In this project, create a public bucket named `avatars`. After upload, you get a storage path (for example `public/avatar1.png`) and need to convert it to HTTP-accessible URL.
-
-Two URL strategies:
-
-#### 1. 公开 URL (Public URL) - 永久链接
-
-For files in public bucket:
-
-```typescript
-const { data } = supabase.storage
-  .from('avatars')
-  .getPublicUrl('public/avatar1.png');
-const publicUrl = data.publicUrl;
-```
-
-Pros:
-
-- simple fixed URL structure
-- cache-friendly (CDN/browser)
-
-Best for truly public resources (logo/public posters).
-
-Risk:
-
-- hotlink traffic abuse can increase bandwidth costs
-
-#### 2. 签名 URL (Signed URL) - 临时授权链接
-
-Recommended for most production private/controlled assets:
-
-```typescript
-const { data, error } = await supabase.storage
-  .from('avatars')
-  .createSignedUrl('private/user-invoice.pdf', 3600);
-const signedUrl = data?.signedUrl;
-```
-
-Benefits:
-
-- expiring authorization
-- safer permission boundaries
-- much better anti-hotlink behavior
-
-For private assets (avatars, paid content, invoices), prefer signed URLs by default.
-
-## 5.5 Edge Function
-
-Edge Function is a core serverless pattern. "Serverless" does not mean no servers; it means you do not manage server provisioning/ops yourself. You write function logic, provider runs it on trigger and charges by usage.
-
-Common edge-function providers:
-
-- AWS Lambda@Edge
-- Cloudflare Workers
-- Vercel Edge Functions
-
-In Supabase, Edge Functions run on Deno + TypeScript and are deployed globally for low-latency execution close to users.
-
-Project:
-`Project5-Supabase-Demos/apps/project-burger-shop-edge-function-5`
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image57.png)
-
-### 5.5.1 LLM Chat 案例解析
-
-If you want ChatGPT-like features, never expose model API keys in frontend code. Use edge function as secure proxy.
-
-```typescript
-// scripts/llm-chat.ts
-import "jsr:@supabase/functions-js/edge-runtime.d.ts";
-import { OpenAI } from "npm:openai";
-
-const OPENAI_API_KEY = Deno.env.get("OPENAI_API_KEY");
-
-Deno.serve(async (req) => {
-  try {
-    const openai = new OpenAI({ apiKey: OPENAI_API_KEY });
-    const { prompt } = await req.json();
-
-    const stream = await openai.chat.completions.create({
-      model: "gpt-3.5-turbo",
-      messages: [{ role: "user", content: prompt }],
-      stream: true,
-    });
-
-    return new Response(stream.toReadableStream(), {
-      headers: { "Content-Type": "text/event-stream" },
-    });
-  } catch (err) {
-  }
-});
-```
-
-Key idea: API key remains server-side in Supabase secrets.
-
-### 5.5.2 创建并部署函数
-
-Supabase provides a very user-friendly interface, so you can complete deployment without touching the command line.
-
-1. **Open the Edge Functions panel**:
-2. Sign in to your Supabase project Dashboard.
-3. In the left navigation, click the code-like icon and enter `Edge Functions`.
-4. **Create a new function**:
-5. Click `Create a new function`.
-   ![](/zh-cn/stage-2/backend/database-supabase/images/image58.png)
-6. Name the function, for example `llm-chat`.
-7. **Paste code**:
-   ![](/zh-cn/stage-2/backend/database-supabase/images/image59.png)
-8. In the online editor popup, **delete all default placeholder code**.
-9. Open your local `llm-chat.ts` file and **copy all content**.
-10. **Paste** the copied code into the Supabase online editor.
-11. **Configure environment variables (Secrets)**:
-    1. Find `Secrets` in the sidebar.
-       ![](/zh-cn/stage-2/backend/database-supabase/images/image60.png)
-    2. `Name`: enter `OPENAI_API_KEY`.
-    3. `Value`: paste your own OpenAI API Key.
-    4. Click `Save`. The secret set here is encrypted and securely injected into the runtime environment of your function.
-
-If a function needs to be updated, remember to run `Deploy updates` in the Edge Function section. Supabase will build and deploy this function in the cloud. After a few minutes, your function can be accessed online.
-
-Beyond being a secure proxy for language-model calls, Edge Functions are useful in far more scenarios. In fact, any task requiring server-side logic, from simple API calls and data validation to more complex computation, can be implemented with Edge Functions. It gives you a lightweight and scalable backend without managing server infrastructure.
-
-If you want to explore more possibilities, refer to other examples in this project. For example:
-
-- Image generation (`txt2img.ts`): this function shows how to call third-party text-to-image APIs (such as Stability AI or Midjourney) through Edge Functions to generate images dynamically. This is a typical compute-intensive or external-service-secure-call scenario. Just like `llm-chat`, the API key is stored securely in Supabase backend. The frontend only sends text prompts and displays generated images, making the flow secure and efficient.
-- Send email (`send-email.ts`): sending welcome emails, transaction notifications, or password-reset emails is a common requirement. The `send-email.ts` example demonstrates integrating email services (such as Resend or SendGrid) through Edge Functions. You do not need to expose sensitive email-service API keys in client code. Just create a function and let the frontend trigger email sending through this function.
-
-## 5.6 Clerk Login
-
-Clerk is a specialized identity/auth platform. It covers registration, login, MFA, session, permission management, and more.
-
-This part explains full integration with Supabase.
-
-Project:
-`project-burger-shop-auth-advanced-clerk-7`
-
-![](/zh-cn/stage-2/backend/database-supabase/images/image61.png)
-
-### 5.6.1 创建 Clerk 应用与获取密钥
-
-Before using this project, you need a Clerk account and an application.
-
-1. Register and create:
-   1. Visit [dashboard.clerk.com](https://dashboard.clerk.com/) and register an account.
-   2. Click `Create application`.
-      ![](/zh-cn/stage-2/backend/database-supabase/images/image62.png)
-   3. Enter your application name (for example, `Burger Shop`).
-   4. In `How will your users sign in?`, keep `Email`, `Google`, and `GitHub` selected by default.
-   5. Click `Create application`.
-2. Get API keys:
-   1. After creation, you will be guided to the API Keys page.
-      ![](/zh-cn/stage-2/backend/database-supabase/images/image63.png)
-   2. Find the Publishable key (starts with `pk_`) and Secret key (starts with `sk_`).
-      ![](/zh-cn/stage-2/backend/database-supabase/images/image64.png)
-   3. Copy them into your `.env.local` file (refer to this project's `.env.example`):
-
-      ```bash
-      NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
-      CLERK_SECRET_KEY=sk_test_...
-      ```
-
-### 5.6.2 配置 Supabase 和 Clerk 的原生集成
-
-Supabase and Clerk provide native integration:
-
-1. In Clerk dashboard:
-   1. go to Integrations
-   2. activate Supabase integration
-   3. copy Clerk Domain (`https://<id>.clerk.accounts.dev` or custom domain)
-2. In Supabase dashboard:
-   1. go to Authentication -> Providers
-   2. add Clerk provider
-   3. paste Clerk Domain
-   4. save
-
-### 5.6.3 通过 Webhook 同步用户数据至 Supabase
-
-Native integration only solves authentication authorization. It does not sync already-registered Clerk users into Supabase. For easier management, we also need to keep a backup of user data in Supabase `public.users` for relational queries or data analysis. We can implement this with Clerk Webhooks. The full flow is:
-
-1. **Clerk sends notifications**: when a user registers or updates profile in Clerk, Clerk sends a POST request to the configured Webhook URL.
-2. **Supabase receives and writes**: an Edge Function receives the request, verifies the signature (for security), and then updates user data into Supabase tables.
-
-Before we start, we need to configure the table used for synchronization:
+### 1.3 `SELECT`: Query Data
 
 ```sql
--- File: init.sql
-
--- 1. Create `users` table for synced Clerk users
--- This table will store user data pushed from Clerk Webhooks.
-CREATE TABLE public.users (
-  id TEXT NOT NULL PRIMARY KEY, -- Corresponds to Clerk User ID
-  email TEXT,
-  first_name TEXT,
-  last_name TEXT,
-  image_url TEXT,
-  created_at TIMESTAMPTZ DEFAULT NOW(),
-  updated_at TIMESTAMPTZ DEFAULT NOW()
-);
-
--- 2. Enable Row Level Security (RLS) on the table
--- This is an important security measure to ensure users cannot access any data by default.
-ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
-
--- 3. Create RLS policies
--- Policy 1: Allow authenticated users to read their own user info.
--- `auth.jwt()->>'sub'` extracts the user ID from the JWT provided by Clerk.
-CREATE POLICY "Authenticated users can view their own user record"
-ON public.users FOR SELECT
-TO authenticated
-USING ( (SELECT auth.jwt()->>'sub') = id );
-
--- Policy 2: Allow users to update their own info.
-CREATE POLICY "Authenticated users can update their own user record"
-ON public.users FOR UPDATE
-TO authenticated
-USING ( (SELECT auth.jwt()->>'sub') = id );
+select id, title, is_done, created_at
+from public.todos
+order by created_at desc
+limit 20;
 ```
 
-Then enable the corresponding Edge Function in Supabase:
+### 1.4 `UPDATE`: Modify Rows
 
-```JavaScript
-// File path: supabase/functions/clerk-webhooks/index.ts
-
-import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
-import { Webhook } from 'npm:svix'
-import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
-
-// Get Clerk Webhook signing secret from environment variables
-const CLERK_WEBHOOK_SECRET = Deno.env.get('CLERK_WEBHOOK_SECRET')
-
-if (!CLERK_WEBHOOK_SECRET) {
-  throw new Error('CLERK_WEBHOOK_SECRET is not set in environment variables')
-}
-const supabaseAdmin = createClient(
-  Deno.env.get('SUPABASE_URL')!,
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
-)
-
-serve(async (req) => {
-  try {
-    // 1. Get Svix signature info from request headers
-    const headers = Object.fromEntries(req.headers)
-    const svix_id = headers['svix-id']
-    const svix_timestamp = headers['svix-timestamp']
-    const svix_signature = headers['svix-signature']
-
-    if (!svix_id || !svix_timestamp || !svix_signature) {
-      return new Response('Missing Svix headers', { status: 400 })
-    }
-
-    const payload = await req.json()
-    const body = JSON.stringify(payload)
-
-    // 2. Verify Webhook signature validity using the secret
-    const wh = new Webhook(CLERK_WEBHOOK_SECRET)
-    const evt = wh.verify(body, {
-      'svix-id': svix_id,
-      'svix-timestamp': svix_timestamp,
-      'svix-signature': svix_signature,
-    })
-
-    const { id } = evt.data
-    const eventType = evt.type
-    console.log(`Received webhook event: ${eventType} for user: ${id}`)
-
-    // 3. Execute database operations based on event type
-    switch (eventType) {
-      case 'user.created': {
-        const { id, first_name, last_name, image_url, email_addresses } = evt.data
-        const { error } = await supabaseAdmin.from('users').insert({
-          id,
-          first_name,
-          last_name,
-          image_url,
-          email: email_addresses[0]?.email_address,
-        })
-        if (error) throw error
-        console.log(`User ${id} created in Supabase.`)
-        break
-      }
-      case 'user.updated': {
-        const { id, first_name, last_name, image_url, email_addresses } = evt.data
-        const { error } = await supabaseAdmin
-          .from('users')
-          .update({
-            first_name,
-            last_name,
-            image_url,
-            email: email_addresses[0]?.email_address,
-            updated_at: new Date().toISOString(), // Update timestamp
-          })
-          .eq('id', id)
-        if (error) throw error
-        console.log(`User ${id} updated in Supabase.`)
-        break
-      }
-      case 'user.deleted': {
-        // For delete events, ID might be at the top level
-        const deletedId = id
-        if (!deletedId) {
-          return new Response('Deleted user ID not found', { status: 400 })
-        }
-        const { error } = await supabaseAdmin.from('users').delete().eq('id', deletedId)
-        if (error) throw error
-        console.log(`User ${deletedId} deleted from Supabase.`)
-        break
-      }
-    }
-
-    return new Response('Webhook processed successfully', { status: 200 })
-  } catch (err) {
-    console.error('Error processing webhook:', err.message)
-    return new Response(`Webhook Error: ${err.message}`, { status: 400 })
-  }
-})
+```sql
+update public.todos
+set is_done = true
+where id = '00000000-0000-0000-0000-000000000000';
 ```
 
-After initializing the Supabase table and function, you still need to enable Webhooks in Clerk:
+### 1.5 `DELETE`: Remove Rows
 
-- In Clerk Dashboard -> **Webhooks**, add an Endpoint and fill in the Supabase Edge Function URL.
-- Check events such as `user.created`, `user.updated`, and `user.deleted`.
+```sql
+delete from public.todos
+where id = '00000000-0000-0000-0000-000000000000';
+```
 
-![](/zh-cn/stage-2/backend/database-supabase/images/image65.png)
+::: warning Safety Tips
+Always run `SELECT` first with the same `WHERE` clause you plan to use for `UPDATE`/`DELETE`.
+:::
 
-Once the setup succeeds, you can see different request attempts in `Message Attempts`. Click each one to inspect detailed response payloads. If a webhook call to Edge Function fails, you can quickly identify the cause from the returned details. It is recommended to compare request logs from both Clerk and Supabase to verify each function setting is correct.
+---
 
-### 5.6.4 Clerk 中的第三方登录支持
+## 2. Standardized Workflow: Integrate Supabase Into Any App
 
-Before config, distinguish:
+Use this repeatable flow:
 
-- development environment (local/internal testing)
-- production environment (public real users)
+1. Analyze the project and identify data needs (entities + relationships).
+2. Produce an `init.sql` (schema + seed) you can run end-to-end.
+3. Refactor app code to use Supabase (data access layer + env vars).
+4. Validate: create/read/update/delete + edge cases.
 
-Clerk separates these for security and policy reasons.
+---
 
-1. **Development quick verification**
+## 3. Auth (Conceptual)
 
-- In Clerk dashboard -> SSO connections -> Add connection -> For all users
-- choose GitHub/Google and add
-- Clerk shared credentials handle local testing quickly
+Supabase Auth provides common flows such as:
 
-2. **Production custom credentials**
+- Email/password
+- OAuth providers (e.g. Google, GitHub)
+- Password reset
 
-When switching to production instance, shared credentials are not enough. Configure custom OAuth credentials:
+Your app typically needs:
 
-- copy callback/redirect URL from Clerk
-- configure OAuth app on provider side
-- paste client ID/secret back into Clerk
+1. A login UI / flow.
+2. A session store.
+3. Server-side verification for protected actions.
 
-2.1 GitHub production steps:
+---
 
-- GitHub Developer Settings -> OAuth Apps -> New OAuth app
-- set application name/homepage/callback URL
-- generate client secret
-- paste into Clerk SSO connection
+## 4. Realtime (Conceptual)
 
-2.2 Google production steps:
+Supabase Realtime can help with:
 
-- Google Cloud Console -> APIs & Services -> Credentials
-- create OAuth client (Web application)
-- set authorized origins and redirect URI
-- copy client ID/secret to Clerk
+- Postgres changes (subscribe to row changes)
+- Broadcast & Presence (sync ephemeral state)
 
-Notes:
+Use it when realtime creates user value (collaboration, live dashboards, chat), not "because it exists".
 
-1. avoid WebView login for Google OAuth
-2. testing mode has user limits; switch publishing status to production after review
-3. configure sub-address handling policy if needed
-4. optionally integrate Clerk Google One Tap component
+---
 
-3. test social login
+## 5. Storage (Conceptual)
 
-- use Clerk Account Portal sign-in page
-- test GitHub/Google sign-in redirect and callback behavior
+Storage is for files (images, documents). Two URL patterns:
 
-# 6. 从 Supabase 到更多后端开发组件（进阶）
+1. Public URL: stable link if bucket/object is public.
+2. Signed URL: time-limited link for private content.
 
-So far we viewed backend capabilities through Supabase. From a broader engineering perspective, each Supabase module has specialized alternatives in the market.
+---
 
-Why understand alternatives:
+## Exercises
 
-- decide when all-in Supabase is enough
-- replace only one module when scaling/compliance/cost changes
-- broaden system design trade-off understanding
+1. Design a small schema for your app (2-3 tables).
+2. Write `init.sql` that can be executed from scratch.
+3. Implement CRUD in your app and validate the behavior.
 
-This section compares common alternatives by features, pricing, ease of use, and community traction.
-
-## 同类 Baas 平台
-
-| Platform/Service | Type | Free Tier/Pricing | Features / Use Cases |
-| ------------------------ | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| Firebase (Google) | Fully managed BaaS (Auth + Firestore + Storage + Functions + Hosting) | Spark free tier; Blaze pay-as-you-go | Most mature ecosystem, great docs, fast onboarding, strong realtime; but complex billing and stronger lock-in |
-| Supabase | Open-source BaaS (Postgres + Auth + Storage + Edge Functions + Realtime) | Free: 500MB DB, 1GB storage, limited function calls; Pro by plan | SQL-first Firebase-like experience; modern DX, can self-host |
-| Appwrite Cloud | Open-source all-in-one BaaS | Free basic tier, paid by resources | modern UX, unified APIs, self-host option; ecosystem smaller than Firebase/Supabase |
-| Nhost | Postgres + GraphQL + Auth + Storage + Functions | Free: 1GB DB, 1GB storage, limited function calls | Similar to "Supabase + Hasura"; GraphQL-native |
-| AWS Amplify | AWS full-stack backend suite | Free quotas for hosting/cognito/functions | strong enterprise reliability; steeper learning curve |
-| Xata | Multi-model DB + Auth + Edge Functions | Free: 250k records, 15GB bandwidth | strong DX and UI, but less all-in-one than Firebase/Supabase |
-| Convex | Managed DB + Auth + Functions (frontend-first) | Free developer tier; paid by usage | very fast MVP development; higher platform binding risk |
-
-## 认证 (Auth)
-
-| Tool/Platform | Features | Free Tier/Pricing | Fit and Trade-offs |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Firebase Authentication | email/password, phone, social, anonymous, etc. | Spark up to 50k MAU | easy integration, rich docs, but Firebase lock-in |
-| Auth0 (Okta) | enterprise SSO/MFA/rules/extensibility | free 25k MAU then paid | enterprise-grade but can become expensive |
-| AWS Cognito | AWS-native identity service | free 10k MAU/month then pay-as-you-go | strong AWS integration, higher complexity |
-| Logto | open-source auth platform | self-host free, cloud free 50k MAU | strong emerging alternative, smaller ecosystem |
-| Keycloak | open-source IAM/SSO | free self-host | powerful and extensible, higher ops complexity |
-
-## 文件存储 (Storage)
-
-| Platform/Service | Type | Free Tier/Pricing | Features/Use Cases |
-| ---------------------------------------- | -------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Amazon S3 | cloud object storage | AWS free tier: 5GB + request quotas | industry standard object storage, high reliability |
-| Google Cloud Storage / Firebase Storage | cloud object storage | Spark free + Blaze paid | strong Firebase integration, fine-grained rules |
-| Tencent COS / Aliyun OSS | domestic cloud object storage | pay-as-you-go + newcomer quotas | strong domestic ecosystem integration |
-| MinIO | open-source S3-compatible storage | free self-host | lightweight S3-compatible storage for private deployment |
-| Cloudinary / Imgix | media storage + CDN | basic free plans | strong media transformation capabilities |
-
-## 边缘函数 (Edge Functions)
-
-| Platform/Service | Features | Free Tier/Pricing | Fit and Trade-offs |
-| -------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Cloudflare Workers | globally distributed JS/Wasm runtime | free 100k req/day | ultra-low latency edge execution |
-| Vercel Edge Functions | deep Next.js integration | hobby free quotas | excellent frontend integration |
-| Netlify Edge / Functions | Node functions + edge routes | free credit-based quotas | easy git-integrated deployment |
-| AWS Lambda@Edge / CloudFront Functions | AWS edge compute | lambda free quotas + cloudfront pricing | powerful but more complex setup |
-
-## 实时通信 (Realtime)
-
-| Platform/Service | Features | Free Tier/Pricing | Fit and Trade-offs |
-| -------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| Firebase Realtime DB / Firestore | realtime DB push updates | spark free + blaze paid | easy realtime listening, weaker complex querying |
-| Ably | pub/sub realtime messaging platform | free 6M messages/month | robust global realtime service |
-| Pusher Channels | event-push channels | sandbox free tier | quick chat/notification integrations |
-| Self-host WebSocket/Socket.IO | custom realtime infra | self-host infra cost | highest flexibility, highest ops burden |
-
-## 数据库
-
-| Platform/Tool | DB Type | Free Tier/Pricing | Key Features |
-| ---------------------------- | --------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------- |
-| Neon | serverless PostgreSQL | free tier + branch compute limits | modern serverless Postgres with branching workflow |
-| Aiven PostgreSQL | managed relational DB | small free plans + paid | managed operations across cloud providers |
-| CockroachDB Cloud | distributed SQL (Postgres-compatible) | free storage quota | horizontal scaling and consistency |
-| TiDB Cloud | distributed relational (MySQL-compatible) | free cluster quotas | strong distributed MySQL-compatible architecture |
-| MongoDB Atlas | document NoSQL | free M0 cluster | flexible document modeling |
-| SQLPub | multi-database platform | free request/storage quotas | one-stop multi-DB service |
-
-Different options optimize different dimensions: flexibility, cost, ease of use, compliance, ecosystem fit, and scalability.
-
-# 总结
-
-In today's lesson, we systematically learned foundational database concepts, Supabase core definitions, and practical operation details. During later project practice, you can always come back to this document as a reference based on your specific application scenario and requirements.
-
-Please always remember one key principle: **Ship first, perfect later.** You do not need to achieve everything in one step. Through continuous iteration and optimization, we can gradually approach better outcomes. Wish you smooth progress in your upcoming project practice.
-
-# 📚 课后作业
-
-1. Build an application with user management + database support.  
-   Try to include additional Supabase features (Realtime / cloud storage / Edge function).
diff --git a/docs/en/stage-2/frontend/lovart-assets/index.md b/docs/en/stage-2/frontend/lovart-assets/index.md
index 9bdf17d..e447401 100644
--- a/docs/en/stage-2/frontend/lovart-assets/index.md
+++ b/docs/en/stage-2/frontend/lovart-assets/index.md
@@ -1,951 +1,91 @@
-<script setup>
-import { relatedArticlesMap } from '@theme/data/relatedArticles'
+---
+title: 'Lovart Assets: Prompts And Practical Workflow'
+description: 'A practical, prompt-driven workflow for generating usable UI/illustration assets and integrating them into a product build. Includes a Gradio-based demo assignment outline.'
+---
 
-const relatedArticles = relatedArticlesMap['en/stage-2/frontend/lovart-assets'] ?? []
+<script setup>
+const duration = 'Approx. <strong>4 hours</strong>'
 </script>
 
-# Starting from NanoBanana: Build Your Own Asset Production Agent
+# Lovart Assets: Prompts And Practical Workflow
 
-## Chapter 1: Generate Your First Image Asset in 1 Minute
+<ChapterIntroduction :duration="duration" :tags="['Assets', 'Prompting', 'Design', 'Workflow']" coreOutput="A small prompt library + usable assets" expectedOutput="Assets that are consistent and product-ready">
 
-Before we discuss design, style, or prompt engineering, let's generate the first image with the fewest possible steps.
+This chapter is about creating production-usable visual assets (icons, small illustrations, UI elements) with a prompt-first workflow, then integrating them into your product build.
 
-### 1.1 Meet NanoBanana
+</ChapterIntroduction>
 
-Before discussing design style and prompt engineering, let's solve a more important thing first: **confirm that you can actually generate an image.**
+## 1. Prompt Patterns That Work
 
-Mainstream large models now already support image generation and editing. These are usually called **generative models**.
+When you want repeatable, consistent results, your prompt should specify:
 
-To keep the process as simple as possible, this tutorial uses a model with stable image generation and editing capabilities as the example: NanoBanana. It is an image generation model from Google. Its formal name is **Gemini 3.1 Flash Image Preview**. It supports direct image generation from natural language, and also supports editing based on existing images.
+1. Subject: what exactly is in the image.
+2. Style: 3D / flat / isometric / vector / clay / etc.
+3. Materials: glassmorphism, matte, glossy, paper, etc.
+4. Lighting: studio soft light, backlight, rim light, etc.
+5. View: isometric, top-down, front view.
+6. Output constraints: transparent background, PNG, aspect ratio, no text, etc.
 
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image1.png)
+Example prompt templates:
 
-In terms of core capability, it is not fundamentally different from other models you may have heard of (such as GPT-4o, Claude, Qwen, Midjourney, and others): **you provide the description, and the model generates the result.**
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image2.png)![](/zh-cn/stage-2/frontend/lovart-assets/images/image3.png)![](/zh-cn/stage-2/frontend/lovart-assets/images/image4.png)
-
-You can think of it as a "brush." In this chapter we care about only one thing:
-👉 **can this brush draw its first stroke in your hands?**
-
-In practical usage, NanoBanana can be used directly through official platforms like **Google AI Studio**, and it can also be integrated into development workflows via **API**. This tutorial uses the API approach. A NanoBanana 2 model is also available now, and you can try the latest model as well.
-
-### 1.2 A "Hello World" Level Generation
-
-Before we start, you only need to complete these three steps:
-
-1. Create a new folder in Trae
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image5.png)
-
-2. Create a new Python file
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image6.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image7.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image8.png)
-
-3. Paste the full code below
-
-Trae will automatically complete environment setup and dependency installation. No extra configuration is needed.
-
-The code uses a NanoBanana API Key. We will not expand on the application process here. As long as you can obtain the key and fill in the corresponding parameter, that is enough. **At this stage, you do not need to understand every line of code. It only needs to run successfully.**
-
-```Python
-# /// script
-# dependencies = [
-#  "gradio>=4.0.0",
-#  "pillow>=10.0.0",
-#  "requests>=2.31.0",
-# ]
-# ///
-
-import gradio as gr
-import requests
-import base64
-from PIL import Image
-import io
-import os
-import time
-import re
-from typing import Optional, Dict, Any, List
-
-# 配置 API 信息
-NANOBANANA_API_URL: str = "YOUR API URL"
-NANOBANANA_API_KEY: str = "YOUR API KEY"
-OUTPUT_DIR: str = "outputs"
-
-# 确保输出目录存在
-os.makedirs(OUTPUT_DIR, exist_ok=True)
-
-def image_to_base64_data_uri(image: Image.Image) -> str:
-    """
-    将 PIL 图像转换为 OpenAI API 兼容的 data URI 格式。
-    """
-    buffer = io.BytesIO()
-    # 统一转为 PNG 以保证兼容性
-    image.save(buffer, format="PNG")
-    encoded = base64.b64encode(buffer.getvalue()).decode('utf-8')
-    return f"data:image/png;base64,{encoded}"
-
-def base64_to_image(base64_str: str) -> Optional[Image.Image]:
-    """
-    将纯 base64 字符串转换为 PIL Image。
-    """
-    try:
-        image_bytes = base64.b64decode(base64_str)
-        return Image.open(io.BytesIO(image_bytes))
-    except Exception as e:
-        print(f"Base64 解码失败: {e}")
-        return None
-
-def extract_base64_from_response(content: Any) -> Optional[str]:
-    """
-    核心解析逻辑：从 API 返回的 content 中提取图片 Base64 数据。
-    兼容 Markdown 格式和结构化列表格式。
-    """
-    if not content:
-        return None
-
-    base64_data = None
-
-    # 1. 尝试结构化提取 (List)
-    # 对应返回格式: [{"type": "image_url", "image_url": {"url": "data:..."}}]
-    if isinstance(content, list):
-        for part in reversed(content):  # 倒序查找，通常最新的图片在最后
-            if isinstance(part, dict):
-                # 检查 image_url 或 output_image 字段
-                img_field = part.get("image_url") or part.get("image") or part.get("output_image")
-                if isinstance(img_field, dict):
-                    url = img_field.get("url", "")
-                    if url.startswith("data:image/") and "," in url:
-                        return url.split(",", 1)[1].strip()
-
-        # 如果列表中没有结构化图片，尝试把列表里的文本拼起来找 Markdown
-        text_parts = [
-            str(p.get("text", ""))
-            for p in content
-            if isinstance(p, dict) and p.get("type") in ["text", "input_text"]
-        ]
-        content_str = "".join(text_parts)
-    else:
-        content_str = str(content)
-
-    # 2. 尝试 Markdown 正则提取 (String)
-    # 对应返回格式: "Here is your image: ![img](data:image/png;base64,AAAA...)"
-    pattern = re.compile(r"!\[.*?\]\((data:image/[^;]+;base64,[^)]+)\)", re.IGNORECASE)
-    match = pattern.search(content_str)
-
-    if match:
-        data_url = match.group(1)
-        if "," in data_url:
-            return data_url.split(",", 1)[1].strip()
-
-    return None
-
-def synthesize(prompt: str, input_image: Optional[Image.Image]) -> Optional[Image.Image]:
-    """
-    调用 Nanobanana API 进行生成。
-    """
-    if not prompt or not prompt.strip():
-        gr.Warning("请输入提示词")
-        return None
-
-    print(f">>> 开始任务: {prompt[:50]}...")
-
-    headers = {
-        "Content-Type": "application/json",
-        "Authorization": f"Bearer {NANOBANANA_API_KEY}"
-    }
-
-    # 构造符合 OpenAI Vision / Chat 标准的 payload
-    messages = []
-
-    if input_image is not None:
-        # 图生图/多模态输入模式
-        print(">>> 检测到输入图片，使用多模态模式")
-        img_base64 = image_to_base64_data_uri(input_image)
-        messages.append({
-            "role": "user",
-            "content": [
-                {"type": "text", "text": prompt},
-                {"type": "image_url", "image_url": {"url": img_base64}}
-            ]
-        })
-    else:
-        # 纯文生图模式
-        messages.append({
-            "role": "user",
-            "content": prompt
-        })
-
-    payload = {
-        "messages": messages,
-        # 使用第一段代码中验证可用的模型
-        "model": "gemini-2.5-flash-image",
-        # 可选参数，视 API 支持情况而定
-        "stream": False
-    }
-
-    try:
-        # 增加超时时间，图片生成通常较慢
-        response = requests.post(NANOBANANA_API_URL, headers=headers, json=payload, timeout=120)
-
-        # 检查 HTTP 状态
-        if response.status_code != 200:
-            error_msg = f"API 请求失败: {response.status_code} - {response.text}"
-            print(error_msg)
-            gr.Error(error_msg)
-            return None
-
-        result = response.json()
-        # Debug: 打印返回结果的前一部分，方便调试
-        print(f"API 原始响应 (截取): {str(result)[:200]}...")
-
-        # 提取 Content
-        content = None
-        if "choices" in result and len(result["choices"]) > 0:
-            content = result["choices"][0].get("message", {}).get("content")
-
-        if not content:
-            gr.Warning("API 返回结果中没有 content 字段")
-            return None
-
-        # 使用之前验证过的逻辑提取 Base64
-        base64_str = extract_base64_from_response(content)
-
-        if base64_str:
-            output_image = base64_to_image(base64_str)
-            if output_image:
-                return output_image
-
-        # 如果没提取到图片，可能是模型拒绝了或只返回了文本
-        text_content = str(content) if not isinstance(content, list) else " ".join([str(x) for x in content])
-        gr.Info(f"未生成图片，模型返回文本: {text_content[:100]}...")
-        return None
-
-    except requests.exceptions.Timeout:
-        gr.Error("请求超时，请稍后重试")
-        return None
-    except Exception as e:
-        import traceback
-        traceback.print_exc()
-        gr.Error(f"发生未知错误: {str(e)}")
-        return None
-
-# Gradio 界面配置
-with gr.Blocks(title="Nanobanana Image Generator") as app:
-    gr.Markdown("# 🍌 Nanobanana Text/Image to Image")
-    gr.Markdown("基于 Gemini-2.5-Flash-Image 模型，支持文生图与图生图。")
-
-    with gr.Row():
-        with gr.Column():
-            prompt_input = gr.Textbox(
-                label="提示词 (Prompt)",
-                placeholder="例如: A cyberpunk cat holding a neon sign...",
-                lines=3
-            )
-            image_input = gr.Image(
-                label="参考图 (可选，用于图生图)",
-                type="pil",
-                height=300
-            )
-            submit_btn = gr.Button("开始生成", variant="primary")
-
-        with gr.Column():
-            image_output = gr.Image(label="生成结果", format="png")
-
-    submit_btn.click(
-        fn=synthesize,
-        inputs=[prompt_input, image_input],
-        outputs=image_output
-    )
-
-if __name__ == "__main__":
-    app.launch(share=True)
+```text
+[Subject], [style], [materials], [lighting], [view], clean background, no text, high detail, 1024x1024, PNG
 ```
 
-When Trae indicates successful execution, click the local link it provides (usually `http://127.0.0.1:7860`).
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image9.png)
-
-If everything is correct, you will see a working AI drawing interface.
-
-This interface looks simple, but it already includes two of the most important capabilities in commercial-grade drawing tools: text-to-image and image-to-image.
-
-* **Left side:** **Instruction area (** **Input** Zone) - this is where you issue commands.
-* **Prompt (prompt box):** Enter your creative description (English is recommended).
-* **Input** Image (reference image box):
-  * **Text-to-image mode:** keep it **empty**.
-  * **Image-to-image mode:** drag a local image here, and AI will create based on it.
-* **Submit button:** click to send instructions and start generation.
-* **Right side: display area (** **Output** Zone) - this is where results appear.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image10.png)
-
-Now we can try generating your first image.
-
-The example prompt used here is:
-
-> **A red apple**
-
-This is intentionally simplified, without style details or parameter constraints.
-
-#### Actual Process
-
-After running the code, the flow can be summarized in three steps:
-
-1. Send the text description to the model
-2. The model generates the corresponding image
-3. The image is saved as a local file
-
-After a few seconds, you will see generated results locally. Because model generation is stochastic, the same prompt can produce different outputs. You can generate multiple times and choose the image you prefer.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image11.png)![](/zh-cn/stage-2/frontend/lovart-assets/images/image12.png)
-
-You can also enrich your prompt with more constraints and descriptions. For example, the prompt below tends to generate a more distinctive result:
-
-```Plain
-"A hyper-realistic close-up of a fresh red apple with water droplets on its skin, sitting on a dark rustic wooden table. Cinematic dramatic lighting, rim light, shallow depth of field, bokeh background, 8k resolution, macro photography."
-(一个超写实的带水珠的新鲜红苹果特写，放在深色粗糙木桌上。电影级戏剧光效，轮廓光，浅景深，背景虚化，8k分辨率，微距摄影。)
+```text
+Minimal vector logo of [X] combined with [Y], flat design, black line art, no gradients, centered, white background
 ```
 
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image13.png)
+## 2. Small Asset Ideas (Examples)
 
-Click download in the Output Image area to save the image locally.
+- A set of weather icons: frosted glass style, soft gradients, studio lighting, isometric view.
+- A minimal vector logo: coffee cup + code symbol, flat black line, centered.
+- A friendly 3D memoji-like character: clay render, soft light, neutral background.
+- A remote-work flat illustration: corporate style, clean shapes, consistent palette.
+- Game UI buttons: capsule shape, jelly material, white icon, consistent shadows.
 
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image14.png)
+## 3. Quality Checklist
 
-### 1.3 Common Material-Generation Scenarios for Image Models
+Before you accept an asset, check:
 
-In real work, large-model image generation is more often used for **efficiently producing design assets**, rather than creating one-off art pieces.
+1. Consistency: same style across the set.
+2. Legibility: readable at small sizes (32px-64px).
+3. Background: truly transparent if required.
+4. No text artifacts.
+5. Composition: centered and not cropped.
 
-If you look at high-engagement cases from design marketing accounts, you will find that most outputs are concentrated in two scenarios:
+## 4. Practical Mini-Assignment (Gradio Demo Outline)
 
-* **Text-to-image (0 to 1)**
-* **Reference-image generation (1 to N)**
+Goal: build a small tool that:
 
-#### 1) Text-to-Image: Quickly Get Design Assets
+1. Takes an input paragraph or instruction.
+2. Generates an English image generation prompt.
+3. Optionally accepts a reference image for image-to-image.
+4. Calls an image generation API and renders the result.
 
-This category is about efficiency. When you need to fill visual blanks in design (such as empty states, avatars, and illustrations), AI essentially acts as an **instant stock-image library**.
+Recommended constraints:
 
-1. ##### Generate UI Design Assets
+- Use Gradio 4+ Blocks (not Interface).
+- Fixed 60/40 layout: left for prompt generation, right for image generation.
+- Validate empty input, show friendly errors, do not crash.
 
-* Trend: frosted-glass and clay-style 3D icons, common on Dribbble
-* Typical appearance: translucent materials, glowing edges, candy-like color palettes for functional or weather icons
+Suggested UI components:
 
-**Example Prompt:**
+- `input_text` (multiline textbox)
+- `identify_intent_btn`
+- `intent_status` (readonly textbox)
+- `system_prompt` (editable only for "article illustration" intent)
+- `confirm_prompt_btn`
+- `generation_prompt` (editable)
+- `ref_image` (optional upload)
+- `generate_btn`
+- `result_image`
 
-> A set of 3D weather icons (sun, cloud, rain), glassmorphism style, frosted glass texture, soft pastel gradient colors, soft studio lighting, isometric view, transparent background, 4k.
+## Output
 
-（一套 3D 天气图标，毛玻璃风格，磨砂质感，柔和渐变色，影棚光，等轴视图）
+Deliver:
 
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image15.png)
+1. A small prompt library (5-10 prompts).
+2. A consistent asset set (at least 6 assets).
+3. A working Gradio demo script with a clean UX flow.
 
-2. ##### Generate Logos
-
-* Trend: minimalist lines and geometric combinations with a tech feel
-* Typical appearance: black-and-white color schemes, negative space, clear brand identity
-
-**Example Prompt:**
-
-> Minimalist vector logo design for a tech brand "Coffee Code", combining a coffee cup with coding brackets < >, flat design, solid black lines, white background, Paul Rand style, svg.
-
-（极简矢量 Logo，结合咖啡杯与代码符号，扁平设计，纯黑线条）
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image16.png)
-
-3. ##### Generate Website User Avatars
-
-* Trend: SaaS websites often use 3D virtual avatars to avoid real-person copyright risk
-* Typical appearance: friendly expressions, cartoon proportions, Pixar- or Memoji-like styles
-
-**Example Prompt:**
-
-> Close-up portrait of a friendly young tech professional, smiling, Memoji 3D style, clay render, bright colors, soft lighting, solid plain background, Pixar character design.
-
-（友好的年轻科技从业者，3D Memoji 风格，黏土渲染）
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image17.png)
-
-4. ##### Generate Article Illustrations
-
-* Trend: abstract flat illustrations commonly used in tech-company blogs
-* Typical appearance: purple-blue palettes, exaggerated character proportions, floating UI elements
-
-**Example Prompt:**
-
-> Editorial flat illustration representing remote work, a person sitting on a giant globe using a laptop, corporate memphis art style, vibrant colors (purple and teal), vector texture.
-
-（远程办公主题扁平插画，企业孟菲斯风格）
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image18.png)
-
-#### 2) Reference-Image Generation: Keep Visual Consistency
-
-This category focuses more on **scalability**. Use it when you already have a satisfactory key visual and need to generate a full set of assets in the same style.
-
-5. ##### Generate a Similar Set of Buttons or Interaction Assets from a Key Visual
-
-In game development, UI consistency is very important. Suppose you already have a main-screen **"PLAY"** button and now need to expand a full set of function buttons in a unified style (such as pause, settings, home). With pure manual drawing, it is hard to keep gloss, perspective, and color values fully consistent across every button.
-
-**Basic workflow:**
-
-1. Save the existing blue "PLAY" button image
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image19.png)
-
-2. Drag it into the **Input**** Image** area as the reference master
-3. Keep style descriptions in the prompt unchanged and only modify the subject content
-
-With this flow, you can get different functions in the same style by only changing subject descriptions.
-
-**Example Prompt:**
-
-**Variant A: Pause Button (icon type)**
-
-> A capsule-shaped game UI button with a white pause icon (two vertical bars) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.
-
-（胶囊形游戏 UI 按钮，白色暂停图标，蓝色果冻质感）
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image20.png)
-
-**Variant B: Settings Button (complex icon)**
-
-> A capsule-shaped game UI button with a white gear icon (settings symbol) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.
-
-（胶囊形游戏 UI 按钮，白色齿轮图标，蓝色果冻质感）
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image21.png)
-
-**Variant C: Replay Button (shape variation)**
-
-If you need to change the button shape, describe that shape directly in the prompt. The model will try to change the structure while keeping material characteristics.
-
-> A round game UI button with a white circular arrow icon (replay symbol) inside. Same glossy blue jelly style, shiny plastic texture, white thick outline, vector illustration, high quality.
-
-（圆形游戏 UI 按钮，循环箭头图标，蓝色果冻质感）
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image22.png)
-
-With this set of operations, you can not only change button function and icon, but also button shape, while keeping high consistency in material, color, and lighting. This is exactly the core value of large models in design-asset scaling scenarios.
-
-## Chapter 2: A More Controllable Image Generation Assistant - Lovart as an Example
-
-In the first part, we directly called NanoBanana with code and experienced the basic "input -> generate" flow. This works when requirements are simple. But as tasks include more constraints, for example:
-
-* multiple images with consistent style
-* repeated iteration on existing results
-* dynamically adjusting generation direction based on user input
-
-the one-shot calling pattern gradually becomes insufficient.
-
-At this point, we need to introduce an **AI Agent**. This section uses **Lovart** as an example to show how the overall workflow changes when image generation gains a "thinking layer." Note: this is not an advertisement. It is only to help everyone quickly grasp the convenience of AI Agents.
-
-### 2.0 First Look at Lovart: Your AI Design Agent
-
-Lovart is an agent-based web design tool. Compared with ordinary image generation tools, it adds one extra layer of "thinking and planning" before generation.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image23.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image24.png)
-
-After entering Lovart, you mainly need to understand the following controls:
-
-#### Model Selection
-
-Click the cube icon below the input box to view currently available generation models (such as GPT Image, Flux, etc.).
-
-To stay consistent with earlier examples, this section still uses NanoBanana as the underlying generation model.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image25.png)
-
-#### Thinking Mode
-
-This is Lovart's core switch:
-
-* **Fast Mode (⚡):** close to native API behavior, fast response, suitable for single images with clear instructions
-* **Thinking Mode (💡):** agent mode, where AI first decomposes requirements and rewrites prompts, then generates
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image26.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image27.png)
-
-#### Internet Capability
-
-After enabling the globe icon, the agent can retrieve online information during generation (for example design trends and color styles) as auxiliary input.
-
-### 2.1 Why Is Native API Still Not Enough?
-
-Even if you can already generate good images via Python, native APIs still have limitations in complex tasks. The key reason is that native APIs are fundamentally imperative. If you ask for a concrete object, they can execute directly. But when the input becomes "plan a complete set of game assets," they will not proactively decompose that goal into executable substeps.
-
-Lovart's core difference is its agent mechanism. Between user input and the image generation model, it adds a logic layer for understanding and planning: first identify user intent, then decompose tasks and rewrite prompts, and only then execute generation.
-
-### 2.2 Practical Demo: Build a Full IP Sticker Pack in 5 Minutes
-
-Take **"create an IP sticker pack of a programmer duck"** as an example and look at how the agent participates in the full workflow.
-
-#### Step 1: Planning (Agent Thinking Capability)
-
-**Native API issue:**
-You need to think through character settings and emotional states yourself, and write separate prompts for every image.
-
-**Lovart approach:**
-
-1. Turn on 💡 **Thinking Mode**
-2. Input one instruction:
-
-> 设计一套程序员鸭子的 IP 表情包，风格要扁平化、可爱
-
-AI does not draw immediately. It first searches online for relevant programmer-duck references, then outputs a decomposed plan, automatically creates scenarios such as Debug, Coffee Break, Panic, and generates multiple visual descriptions.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image28.png)![](/zh-cn/stage-2/frontend/lovart-assets/images/image29.png)
-
-At this step, AI shifts from "executor" to "planner." After AI analyzes the requirement, you can see programmer-duck images with multiple styles and contents on the Lovart canvas and start selecting your preferred style.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image30.png)
-
-#### Step 2: Consistency (Reference-Based Visual Anchoring)
-
-In Lovart, images are not only outputs. They are also inputs for follow-up generation.
-
-##### Full Reference Image
-
-* Choose your favorite "standard duck" from drafts and click the image on the canvas
-* The image automatically appears in the dialogue area as a reference
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image31.png)
-
-* Input a new action (such as happy) and generate
-
-The generated result will inherit color palette, proportions, and detail characteristics from the master reference.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image32.png)
-
-##### Local Reference / Multi-Image Composition
-
-Besides using full images as references, Lovart also supports:
-
-* **selecting only local regions** (for example, only reference a hat or expression)
-
-Click the left tab on the canvas, choose "Mark," and annotate the local region in the target image. That part is automatically synced into the dialogue box. For example, we can change only the background color here.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image33.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image34.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image35.png)
-
-You can see the newly generated image only changes the background color, which matches our requirement.
-
-* **referencing sub-elements from multiple images** and combining them into a new result
-
-For example: you can keep the main character from image A, while replacing only the hat with the style from image B. The agent automatically merges these visual constraints in the background.
-
-Using programmer ducks as an example, we can keep the duck from the first image and replace the subject element in the second image.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image36.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image37.png)
-
-The final effect is also very strong. You can try other combinations too.
-
-#### Step 3: Delivery (Agent Tool Calling)
-
-After generation, you can directly execute operations such as upscale, background removal, and erasing.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image38.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image39.png)
-
-These are not simple filters. They are results from the agent orchestrating different tools automatically.
-
-After style direction is confirmed, you can quickly generate a full set of sticker images.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image40.png)
-
-What we finally get is production-ready assets that can be delivered directly, not just one showcase image.
-
-### 2.3 Usage and Pricing Notes
-
-Lovart uses a subscription model. Different plans correspond to different usage quotas and feature permissions. Refer to the official site for specific details.
-
-This tutorial does not recommend or compare any specific plan. If you need it in actual use, choose paid upgrades based on your own situation.
-Currently, payment methods include **Alipay** and others.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image41.png)
-
-#### Summary
-
-Lovart does not replace underlying models. Instead, through an agent mechanism, it upgrades image generation from "single execution" to a "continuous workflow."
-
-When tasks involve planning, consistency, and delivery, the advantage of this type of tool becomes very clear.
-
-## Chapter 3: Build an Intelligent Drawing Assistant by Yourself
-
-Besides using Lovart directly, we can also implement a simplified drawing assistant ourselves.
-
-In this chapter, we use "automatic illustration for articles" as an example. Starting from a real problem, we build a minimal practical agent with a thinking layer step by step.
-
-### 3.1 Pain Point: Why Sending Long Articles Directly to an Image Model Does Not Work
-
-If you directly send a long article to NanoBanana and ask for illustration, the result is usually not ideal. The issue is not that the model "cannot draw." The issue is that **it is not good at understanding long text**.
-
-Image generation models are better at short and clear visual descriptions. But when the input becomes an article with structure, key points, and contextual relationships, the model cannot determine which parts should be represented visually. This often causes off-topic images, or results that capture only scattered details without overall summarization.
-
-In essence, image models have "execution" capability but lack an analysis-and-selection process for long text.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image42.png)
-
-### 3.2 Solution: Use an Agent to Split "Understanding" and "Execution"
-
-To solve this, the key is not a more complicated prompt. The key is **to think clearly before drawing**. So we introduce an independent "thinking layer" into the generation flow, and use it to build the simplest practical agent.
-
-This agent has only one core objective: **make the final generated image match the user's true intent as closely as possible.**
-
-The full flow can be summarized as:
-**long-text input -> language-model understanding and intent judgment -> generation of suitable visual prompt -> image-model execution -> output image**
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image43.png)
-
-How can our agent understand user intent?
-
-Here we use a simplified **thinking layer** with three intents: invalid input, direct drawing instruction, and long text that needs understanding.
-
-In this agent, role division can be summarized in four points:
-
-1. **Language model as decision core**
-   It understands article content, judges user intent, routes tasks to suitable generation paths, and decides "what to do next" and how to generate visual prompts.
-2. **Image model as executor**
-   The image model does not do understanding or intent judgment. It only receives prepared visual instructions and focuses on rendering.
-3. **User as interactive guide**
-   Besides entering text directly, users can manually adjust generated prompts or add reference images to guide and fine-tune final results.
-4. **Gradio and backend APIs as application carrier**
-   They connect UI, model invocation, and result display to ensure the full agent can run stably as a complete web app.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image44.png)
-
-### 3.3 Practical Preparation: Obtain APIs
-
-Looks fun, right? To run the full flow above, we only need two types of APIs.
-
-#### Hand: NanoBanana API (Image Generation)
-
-Directly reuse the API Key and API URL already configured in Chapter 1. No additional setup is required.
-
-#### Brain: SiliconFlow API (Text Thinking)
-
-We need a large language model to handle the "thinking layer." This tutorial uses model services provided by SiliconFlow:
-[https://cloud.siliconflow.cn](https://cloud.siliconflow.cn/)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image45.png)
-
-SiliconFlow provides interfaces compatible with OpenAI API conventions, so it can be called conveniently via standard network requests. Here we use the free `Qwen2.5-7B-Instruct` model. Everything needed for invocation is already included in the prompt below. Before you start, you only need to register an account and create an API Key on the official site.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image46.png)
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image47.png)
-
-This key will be used for later model calls.
-
-### 3.4 Build the Agent:
-
-In this experiment we mainly use Trae to help write code. The tutorial uses `Gemini-3-Pro-Preview`. The overall approach is: create a new project, copy the full prompt below into the dialogue box, replace API keys step by step, run code, and complete testing.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image48.png)
-
-#### Step 1️⃣: Gradio Blocks Base Framework and UI Layout
-
-In this step, our main goal is to build the "appearance" of the whole agent first and complete the front-end page design. Copy the prompt below into Trae. After implementation, you will get a local URL (usually `http://127.0.0.1:7860`) to view the interface and verify the result.
-
-```Plain
-板块 1：Gradio Blocks 基础框架与界面布局
-1、任务目标
-·基于 Gradio 4.0.0+ 的 Blocks 布局，实现「LLM+Nanobanana 文生图」项目的基础界面，严格遵循固定左右分栏布局，初始化所有 UI 组件并设置正确的初始状态。
-
-2、技术栈要求
-·必须使用 Gradio 4.0.0+ 的 Blocks 模式开发，禁止使用 Interface 模式；
-·依赖：gradio>=4.0.0，pillow>=10.0.0（仅导入，暂不实现图片处理逻辑）；
-·代码需是完整可运行的 Python 文件，包含所有必要的导入语句。
-
-3、界面布局规则（核心约束，融合实战细节）
-·整体布局：
-页面标题：LLM 驱动的文生图全流程工具；
-固定左右分栏：左侧占 60% 宽度，右侧占 40% 宽度，使用 gr.Row 和 gr.Column 实现比例控制。
-·左侧 60%（提示词生成流程区）组件清单：
-input_text：gr.Textbox，标签「输入文本（教程段落 / 绘图指令）」，lines=6，占位符「请输入需要配图的教程文本或直接绘图指令...」；
-identify_intent_btn：gr.Button，value="识别意图"，初始状态正常可点击；
-intent_status：gr.Textbox，标签「意图类型 / 处理状态」，lines=2，interactive=False，初始值「未识别意图」；
-system_prompt：gr.Textbox，标签「System Prompt（仅文章配图意图可编辑）」，lines=4，interactive=False，占位符「LLM 生成提示词的约束规则...」；
-confirm_prompt_btn：gr.Button，value="确认生成生图提示词"，interactive=False（初始禁用防误触）；
-generation_prompt：gr.Textbox，标签「生图提示词（可编辑）」，lines=3，interactive=True，初始值为空，占位符「生成的英文生图提示词将显示在此，支持手动修改...」。
-·右侧 40%（Nanobanana 生图功能区）组件清单：
-ref_image：gr.Image，标签「参考图（可选，图生图）」，type=filepath，height=300，允许上传；
-generate_btn：gr.Button，value="生成图片"，interactive=False（初始禁用，无提示词不可点击）；
-result_image：gr.Image，标签「生成结果」，type=pil，height=300，初始为空，interactive=False。
-
-4、交互逻辑要求
-·所有组件的 interactive 初始状态严格按上述配置，后续通过函数动态更新；
-·按钮禁用状态需直观（置灰），避免用户误操作。
-
-5、输出要求
-·生成完整的 Python 代码，仅实现界面布局和组件初始化，不包含任何业务逻辑；
-·代码注释清晰，组件命名与实战版一致（input_text/identify_intent_btn 等）；
-·代码可直接运行，界面结构与描述完全一致。
-```
-
-After opening `http://127.0.0.1:7860` in the browser, you can see Trae generated the page according to requirements. It is generally aligned, and we can move on to the next step.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image49.png)
-
-#### Step 2️⃣: LLM Intent Recognition Module (SiliconFlow API)
-
-When using VLMs for drawing in daily work, there are usually three common input cases:
-
-1. Meaningless content, such as "hello" or "have you eaten today," which cannot map to drawable requirements.
-2. Articles/long text, such as a structured paragraph around 200 words, where you must first understand structure/content before generating an image that summarizes the text.
-3. Direct drawing instructions, such as "draw a dog taking a bath," where requirements are already specific enough for immediate generation.
-
-As before, copy the prompt below into Trae and add the API obtained in earlier steps.
-
-```Plain
-板块 2：LLM 意图识别模块（Siliconflow API）
-1、任务目标
-在已实现的 Gradio 界面基础上，为「识别意图」按钮添加点击逻辑，调用 Siliconflow API 完成意图识别，并联动组件状态。
-
-2、技术栈要求
-基于 Gradio 4.0.0+ Blocks；
-依赖：requests>=2.31.0，openai；
-输出完整可运行 Python 文件，包含板块 1 界面 + 本模块逻辑。
-
-3、核心业务规则（绝对不可偏离）
-·意图分类规则（仅 3 类，严格返回数字 + 描述）
-1 = 无意义内容：仅闲聊、寒暄、无关对话，没有任何绘图或配图需求（如 “你好”“今天吃了吗”）；
-2 = 文章 / 长文本配图需求：用户输入一段完整文章、教程、段落、说明性文字，内容偏叙事 / 说明 / 讲解，隐含需要为这段内容生成配图的意图，不需要用户明确说 “为这段文字配图”；
-3 = 直接绘图指令：用户输入简短、明确的画图命令，没有长文本背景，直接要求画某个内容（如 “画一只 Apple 风格的猫”）。
-·LLM 调用约束（融合实战版模板）
-接口地址：https://api.siliconflow.cn/v1/chat/completions；
-模型：Qwen/Qwen2.5-7B-Instruct；
-temperature=0.1；
-统一定义代码：
-python
-运行
-LLM_BASE_URL = "https://api.siliconflow.cn/v1"
-LLM_API_KEY = ""  # 用户自行替换
-LLM_MODEL = "Qwen/Qwen2.5-7B-Instruct"# 实战验证的意图识别模板（固化到代码中）
-INTENT_PROMPT_TEMPLATE = """你需要识别用户输入文本的意图，仅返回以下 3 类结果中的一种（格式：数字 + 中文描述）：
-1 = 无意义内容；2 = 文章 / 长文本配图需求；3 = 直接绘图指令。
-
-用户输入：{user_input}
-
-识别结果：
-仅提取返回结果中的数字和描述，禁止额外内容。"""
-
-4、组件联动规则
-·结果为 1：intent_status 显示「1 = 无意义内容：无绘图需求」，system_prompt 保持禁用，confirm_prompt_btn 禁用；
-·结果为 2：intent_status 显示「2 = 文章 / 长文本配图需求：为输入内容生成配图」，启用 system_prompt 并填充默认规则，激活 confirm_prompt_btn；
-·结果为 3：intent_status 显示「3 = 直接绘图指令：根据指令生成图片」，system_prompt 禁用且填充默认规则，激活 confirm_prompt_btn。
-
-5、异常处理
-API 异常、解析异常均给出友好提示，不崩溃，组件恢复初始状态。
-
-6、输出要求
-生成完整可运行代码，替换 LLM_API_KEY 即可使用，逻辑清晰注释完整，意图识别模板严格使用实战版。
-```
-
-Refresh `http://127.0.0.1:7860` and test whether it correctly detects all three cases.
-
-1. Meaningless content: try inputting "你好", "谢谢", and so on. It should be recognized correctly.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image50.png)
-
-2. Article/long text: here we use a paragraph about AI generated by Doubao. You can also test with your own paper paragraph.
-
-```Plain
-人工智能正在以前所未有的深度和广度重塑教育生态系统。通过自适应学习算法，AI系统能够构建每个学生的认知图谱，实时追踪他们的知识掌握轨迹，并动态调整教学内容的难度和呈现方式。在传统课堂环境中，教师往往难以同时满足不同学习风格和能力水平的学生需求，而基于深度学习的教育平台可以分析学生在交互式模拟实验中的行为模式，识别他们在量子力学或微积分等复杂概念理解上的微妙障碍，并提供精准的认知支架。
-
-高级自然语言处理引擎驱动的虚拟导师不仅能够解构开放性问题，如"如何评价法国大革命对现代民主制度的影响"，还能引导苏格拉底式对话，激发批判性思维。当学生撰写关于气候变化对极地生态系统影响的论文时，AI写作助手可以分析其论证逻辑的严密性，指出数据引用中的时效性问题，并建议更精准的科学术语。在特殊教育领域，计算机视觉技术使AI能够识别自闭症谱系儿童在社交互动中的非语言线索，调整干预策略，而情感计算算法则帮助检测在线学习时的挫折感，及时提供鼓励性反馈。
-
-然而，这种技术融合引发了一系列伦理困境。算法偏见可能无意中边缘化特定文化背景的学生，数据采集的透明度问题引发了对学术隐私的关切，而过度依赖自动化评分系统可能削弱教师对学生思维过程的深层理解。更复杂的是，当AI开始生成高度逼真的虚拟实验室体验时，我们需要重新定义"实践经验"在教育中的价值。未来教育的范式可能演变为人类教师专注于培养创造力、同理心和道德判断力，而AI系统则承担知识传递、技能训练和个性化评估的职能，形成一种协同进化的教育共生体，既能发挥机器的计算优势，又能保留人类教育的独特温度.
-```
-
-This is also detected successfully.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image51.png)
-
-3. Direct drawing instruction: here we input "我要画一只猫", and it is also correctly detected.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image52.png)
-
-At this point, we have successfully completed step 2: intent recognition.
-
-#### Step 3️⃣: Prompt Generation Module (Second LLM Call)
-
-After intent recognition, for articles or long text there is one more crucial step: generating the drawing prompt. This is exactly the core of this agent.
-
-```SQL
-板块 3：生图提示词生成模块（LLM 二次调用）
-1、任务目标
-在意图识别基础上，实现「确认生成生图提示词」按钮逻辑，调用 LLM 将文本优化为适合绘图的英文视觉提示词，填充到编辑框并联动「生成图片」按钮。
-
-2、技术栈要求
-同板块 2，输出完整代码 = 板块 1 + 板块 2 + 本模块；
-共用板块 2 定义的 LLM_BASE_URL、LLM_API_KEY、LLM_MODEL，不新增密钥。
-
-3、核心业务规则（融合实战版 Prompt 组装逻辑）
-·提示词生成输入规则（必须严格遵循）
-生图提示词生成不再是简单字符串拼接，而是构建标准 Chat 消息列表，代码结构如下：
-python
-运行
-messages=[# System角色：网页上用户最终确认/编辑后的system_prompt内容{"role": "system", "content": final_system_prompt},# User角色：承载待处理数据，明确任务目标{"role": "user", "content": f"请为以下内容生成视觉提示词：\n\n{user_input}"}]
-意图为 2 时：System 内容取用户编辑后的 system_prompt 最终版本；
-意图为 3 时：System 内容取禁用状态下填充的默认规则
-user_input 为用户最初输入到 input_text 框的原始文本。
-·实战验证的 System Prompt 预设（固化到代码中）
-python
-运行
-SYSTEM_PROMPT_DEFAULT = """你现在是一个创建NanoBanana画图提示词的助手。
-需要根据我的内容处理，我这个图片的作用是能说明这一段在说什么，并且让大家知道这段话的上下结构就是整体说的是什么意思。
-里面可能会类似PPT有一些讲解（如：左上角展示核心观点，右下角展示数据）。
-设计风格要求：简约，Apple设计思维（Apple Design Philosophy）。
-约束：请直接返回NanoBanana可用的英文提示词，不要返回任何解释、前缀或多余的废话。"""
-·LLM 调用约束
-与板块 2 共用同一套 LLM_BASE_URL、LLM_API_KEY、LLM_MODEL；
-temperature=0.7（保证提示词的创意性与适配性）；
-max_tokens=200（限制输出长度，匹配提示词约束）；
-严格使用上述标准 Chat 消息列表结构，禁止字符串拼接。
-·示例输入输出（核心参考）
-输入示例 1（文章配图意图）：原始文本：「AI 如何改变教育：随着人工智能技术的发展，教师的角色从知识传授者转变为引导者，AI 助手可辅助学生完成个性化学习，课堂上人机协作成为常态。」最终 System Prompt：SYSTEM_PROMPT_DEFAULT（未修改）输出预期："Minimalist illustration, Apple Design Philosophy, 1024x1024. Top left shows 'AI + Education' core concept, bottom right shows data of teacher-student-AI collaboration, soft color palette, clean lines, no redundant elements."
-输入示例 2（直接绘图指令）：原始文本：「画一只 Apple 风格的猫，坐在 MacBook 旁边」最终 System Prompt：SYSTEM_PROMPT_DEFAULT（禁用状态）输出预期："Minimalist cat, Apple style, 1024x1024, sitting next to a silver MacBook, clean white background, soft shadows, geometric shapes, no extra details."
-·提示词输出强制约束
-纯英文，无中文；
-必须包含 Apple Design Philosophy/Apple style + 1024x1024；
-长度 50–200 字符，代码内校验；
-无额外解释、前缀或废话，仅返回提示词本身。
-
-4、组件联动规则
-生成成功：将提示词填入 generation_prompt 框，激活 generate_btn，intent_status 追加「提示词生成成功，可修改后生成图片」；
-生成失败：提示具体原因（如 API 调用失败、长度不达标），generate_btn 保持禁用，generation_prompt 框为空；
-用户手动修改 / 清空 generation_prompt 框：
-清空时自动禁用 generate_btn；
-非空时保持 generate_btn 激活。
-
-5、异常处理
-API 调用失败：友好提示「提示词生成失败：{具体错误信息}」，不崩溃；
-提示词校验失败：明确提示原因（如 “未包含 Apple style”“长度仅 40 字符”），允许重试；
-响应解析失败：提示「无法解析 LLM 返回结果，请重试」。
-
-6、输出要求
-完整可运行代码，替换 LLM_API_KEY 即可使用；
-代码结构清晰、注释完善，界面美观简洁；
-严格实现标准 Chat 消息列表结构，参数与示例逻辑一致；
-包含提示词长度、内容校验逻辑，错误提示友好。
-```
-
-Use the same long text from step 2 for testing.
-
-It is worth noting that the default System Prompt we preset for prompt generation is:
-
-> 你现在是一个创建NanoBanana画图提示词的助手。
-> 需要根据我的内容处理，我这个图片的作用是能说明这一段在说什么，并且让大家知道这段话的上下结构就是整体说的是什么意思。
-> 里面可能会类似PPT有一些讲解（如：左上角展示核心观点，右下角展示数据）。
-> 设计风格要求：简约，Apple设计思维（Apple Design Philosophy）。
-> 约束：请直接返回NanoBanana可用的英文提示词，不要返回任何解释、前缀或多余的废话。
-
-If you want to switch to other preset templates, you can modify the earlier prompt or directly modify it through Trae dialogue.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image53.png)
-
-Besides changing underlying code, we can also edit quickly on the webpage. For example, I added one line, "add 'Pic Prompt' at the beginning." You can see the new generated prompt also starts with it. This design is for quickly adjusting the system prompt for generation, so we can switch styles fast.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image54.png)
-
-#### Step 4️⃣: NanoBanana Text-to-Image / Image-to-Image Module
-
-Finally we are at the last step. Without connecting an image model, it is not a complete agent.
-
-```Bash
-板块 4：Nanobanana 文生图 / 图生图模块（最终版）
-1、任务目标
-实现「生成图片」按钮逻辑，调用真实 Nanobanana API，支持文生图 / 图生图，解析 Base64 并展示图片。
-
-2、技术栈要求
-基于 Gradio 4.0.0+ Blocks；
-依赖：requests, pillow, base64, io, re；
-完整代码 = 板块 1+2+3 + 本模块。
-
-3、核心 API 配置（实战验证固化）
-固化代码配置：
-python
-运行
-# 固化到代码中的API配置
-NANOBANANA_API_URL = "https://api.zyai.online/v1/chat/completions"
-NANOBANANA_MODEL = "gemini-2.5-flash-image"
-NANOBANANA_API_KEY = ""  # 用户自行替换
-鉴权方式：Header Authorization: Bearer {NANOBANANA_API_KEY}。
-
-4、图片预处理要求（必须实现）实现函数 image_to_base64_data_uri (ref_image_path)，核心逻辑：
-将 PIL 图片转为 PNG 格式；
-自动缩放到 1024x1024 分辨率；
-透明通道转为白色背景；
-编码为 Base64，返回格式：data:image/png;base64,...。
-
-5、请求构建规则（严格按实战版分支逻辑）
-·核心函数定义实现函数 generate_image (prompt, ref_image_path)：
-入参：prompt（generation_prompt 框内容）、ref_image_path（ref_image 上传的文件路径）；
-返回：PIL Image（展示到 result_image）或错误提示。
-·逻辑分支 1：纯文生图（ref_image_path 为空）
-python
-运行
-messages = [{"role": "user", "content": prompt}]
-·逻辑分支 2：图生图（ref_image_path 有值）
-python
-运行
-# 先调用图片预处理函数
-image_base64 = image_to_base64_data_uri(ref_image_path)
-messages = [{"role": "user","content": [{"type": "text", "text": prompt},{"type": "image_url", "image_url": {"url": image_base64}}]}]
-
-6、响应解析要求（必须兼容两种格式）从 choices [0].message.content 中提取图片 Base64，支持：
-结构化 JSON 返回的 image_url 字段；
-Markdown 格式 
-；
-统一提取 Base64 编码，解码后转换为 PIL Image 返回。
-
-7、组件联动与异常处理
-生成成功：将 PIL Image 展示到 result_image，intent_status 提示「图片生成成功」；
-生成 / 解析 / 上传失败：在 intent_status 显示清晰文字提示（如 “Base64 解析失败”“API 调用超时”），不崩溃。
-
-8、输出要求
-完整可运行代码，替换 LLM_API_KEY 和 NANOBANANA_API_KEY 即可直接运行，全流程可用，分支逻辑严格匹配实战版。
-```
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image55.png)
-
-So exciting. We finally generated the first image of this agent. Looking closely, the generated image matches both our text and prompt. At this point, you have basically implemented your own agent.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image56.png)
-
-We also added image-to-image. Upload an image you like, and AI will automatically borrow style cues.
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image57.png)
-
-It is also worth mentioning that prompts generated in earlier steps can be edited directly on the webpage, and generation always uses the final prompt at click time. Even if I change it here to "a cute cat," the final output will be just a cute kitten.
-
-## Chapter 4: Summary
-
-![](/zh-cn/stage-2/frontend/lovart-assets/images/image58.png)
-
-**Whew, finally finished.**
-Honestly, when I finished the last line, I exhaled deeply myself, and you followed the full path to here. Running through this full workflow is already impressive by itself. It means you really put your hands on the keyboard and completed things step by step. Bravo.
-
-During the writing of this tutorial, I kept asking what we really want to leave behind. The answer is not model names, parameter values, or fixed tricks. It is helping you gradually build a feel for division of labor: what AI can safely understand and plan for you, and where you only need to decide direction. Once this division is established, many workflows that once looked complex start becoming smooth.
-
-Looking back, this path is not actually complicated. Clarify the problem you want to solve, let a language model decompose long text, then pass organized visual intent to an image model for rendering, and finally package the full process into your own assistant. At that point, you are no longer simply "using models." You are building a system that can work with you over the long term. That is exactly what this tutorial most wants to deliver.
-
-But you already did great. If you have made it this far, you already have a solid initial grasp of Vibe Coding. Give yourself a short break.
-
-<RelatedArticlesSection
-  title="Related Articles"
-  description='If you want to truly connect "asset generation" into product workflows, continue with these chapters.'
-  :items="relatedArticles"
-/>
diff --git a/docs/en/stage-3/cross-platform/android-app/index.md b/docs/en/stage-3/cross-platform/android-app/index.md
index aa7345f..3bdaaae 100644
--- a/docs/en/stage-3/cross-platform/android-app/index.md
+++ b/docs/en/stage-3/cross-platform/android-app/index.md
@@ -81,7 +81,7 @@ We need Android Studio to provide the Android SDK and emulator required for runn
 
 **Special reminder for beginners:**
 
-Although modern versions of Android Studio have greatly simplified configuration, it still depends on the **JDK (Java Development Kit)** under the hood. If this is your first time doing development, or if you encounter errors related to environment variables or SDK configuration during installation, do not panic. You can refer to this detailed setup guide: [Android Studio2024版本安装环境SDK、Gradle配置](https://blog.csdn.net/keiraee/article/details/142321644?ops_request_misc=elastic_search_misc&request_id=a2b858d1f665095c53afa9114ad8864d&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-142321644-null-null.142^v102^pc_search_result_base4&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&spm=1018.2226.3001.4187)
+Although modern versions of Android Studio have greatly simplified configuration, it still depends on the **JDK (Java Development Kit)** under the hood. If this is your first time doing development, or if you encounter errors related to environment variables or SDK configuration during installation, do not panic. You can refer to this detailed setup guide: [Android Studio 2024 setup: SDK and Gradle configuration](https://blog.csdn.net/keiraee/article/details/142321644?ops_request_misc=elastic_search_misc&request_id=a2b858d1f665095c53afa9114ad8864d&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-142321644-null-null.142^v102^pc_search_result_base4&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&spm=1018.2226.3001.4187)
 
 ![](../../../../zh-cn/stage-3/cross-platform/android-app/images/image6.png)
 
@@ -654,7 +654,7 @@ Under the `Production` menu, click `Create new release`, upload your `.aab` file
 
 ![](../../../../zh-cn/stage-3/cross-platform/android-app/images/image64.png)
 
-_If you have already completed developer account registration, this video tutorial can guide you through the rest of the process:_ [Android应用上传GooglePlay谷歌市场全流程教程](https://www.bilibili.com/video/BV16REQzGEnk/?share_source=weixin&vd_source=b42f227a4f2d413fbde18499d83227cf)
+_If you have already completed developer account registration, this video tutorial can guide you through the rest of the process:_ [Full workflow: uploading an Android app to Google Play](https://www.bilibili.com/video/BV16REQzGEnk/?share_source=weixin&vd_source=b42f227a4f2d413fbde18499d83227cf)
 
 # 7 Final Notes
 
@@ -674,6 +674,6 @@ I am really looking forward to your next creation. Keep going!
 
 # References
 
-CSDN: [（2024.03.04）如何打包Android Studio项目？](https://blog.csdn.net/GenuineMonster/article/details/136443130?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%20%E6%89%93%E5%8C%85%20APK%20%E5%B9%B6%E5%88%86%E4%BA%AB&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-136443130.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
+CSDN: [How to package/build an Android Studio project (2024-03-04)](https://blog.csdn.net/GenuineMonster/article/details/136443130?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%20%E6%89%93%E5%8C%85%20APK%20%E5%B9%B6%E5%88%86%E4%BA%AB&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-136443130.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
 
-CSDN: [Android Studio安装及配置](https://blog.csdn.net/Changersh/article/details/149838228?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-149838228.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
+CSDN: [Android Studio installation and configuration](https://blog.csdn.net/Changersh/article/details/149838228?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20studio%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-149838228.142^v102^pc_search_result_base4&spm=1018.2226.3001.4187)
diff --git a/docs/es-es/guide/introduction.md b/docs/es-es/guide/introduction.md
new file mode 100644
index 0000000..dfe64b3
--- /dev/null
+++ b/docs/es-es/guide/introduction.md
@@ -0,0 +1,82 @@
+# Introducción al Proyecto
+
+2025 es considerado por muchos como el año inaugural de la programación con IA. Cada vez más personas comienzan a usar IA para escribir código, pero a menudo los resultados se quedan en el nivel de juguetes: no saben cómo organizar el flujo de desarrollo con Vibe Coding, no saben qué herramientas elegir, y mucho menos cuáles son los pasos clave entre el prototipo y el despliegue en producción.
+
+Adoptamos una **ruta práctica de tres etapas, progresiva**: la etapa de iniciación permite a los novatos familiarizarse rápidamente con la programación con IA a través de juegos pequeños; la primera etapa domina el flujo de trabajo de Vibe Coding y completa un prototipo de aplicación web; la segunda etapa aprende desarrollo fullstack y despliegue en producción; la tercera etapa construye aplicaciones complejas multiplataforma.
+
+Cada etapa está acompañada de proyectos prácticos completos, que te permiten avanzar de juguete a producto en desafíos reales, y finalmente adquirir la capacidad de **convertir cualquier idea en una aplicación funcional**.
+
+Creemos que, dominando Vibe Coding junto con un entrenamiento sistemático, una sola persona puede convertirse en un **desarrollador integral que combina desarrollo frontend y backend, integración de capacidades de IA y diseño de productos**.
+
+Este proyecto está dirigido principalmente a tres tipos de aprendices:
+
+- **Novatos (personas sin formación técnica / perfiles de producto y operaciones)**: ayuda a quienes no tienen antecedentes técnicos y a los aprendices principiantes a comprender los conceptos clave y completar su primera herramienta de IA o prototipo de producto.
+- **Desarrolladores junior e intermedios (estudiantes y desarrolladores con cierta base)**: dominar sistemáticamente vibe coding y el desarrollo de aplicaciones nativas de IA.
+- **Desarrolladores senior (empresas y startups, desarrolladores de código abierto e independientes)**: apoyar a equipos e individuos para construir, validar e iterar rápidamente aplicaciones nativas de IA.
+
+## 📖 Navegación de Contenido
+
+### Apéndice General
+
+[Diccionario de capacidades de IA: conceptos centrales, términos y escenarios comunes de IA](/es-es/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### Etapa Cero: Jardín de Infancia
+
+| Sección                                                                                   | Contenido clave                               | Estado |
+| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
+| [Introducción: Mapa de aprendizaje](/es-es/stage-1/learning-map/)                                 | Visión general de la ruta de aprendizaje completa                       | ✅   |
+| [Introducción: En la era de la IA, saber hablar es saber programar](/es-es/stage-1/ai-capabilities-through-games/) | Experimentar inicialmente las capacidades de la programación con IA a través de casos como el juego Snake | ✅   |
+
+### Etapa Uno: Product Manager de IA
+
+| Sección                                                                          | Contenido clave                                                 | Estado |
+| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
+| [Nivel 2: Conociendo las herramientas AI IDE](/es-es/stage-1/introduction-to-ai-ide/)        | Aprender a usar IDE, dominar la estructura de la interfaz y las formas eficientes de usar prompts                 | ✅   |
+| [Nivel 3: Construyendo un prototipo](/es-es/stage-1/building-prototype/)                | Ciclo completo desde el análisis de producto hasta la implementación de un prototipo multipágina           | ✅   |
+| [Nivel 4: Añadiendo capacidades de IA al prototipo](/es-es/stage-1/integrating-ai-capabilities/) | Comprender y completar la integración de API de capacidades de IA comunes (texto, imagen, video)        | ✅   |
+| [Nivel 5: Práctica de proyecto completo](/es-es/stage-1/complete-project-practice/)         | Simular escenarios reales, recibir retroalimentación de usuarios, iterar y completar la presentación del proyecto (incluye proyecto final) | ✅   |
+
+#### Apéndices
+
+| Sección                                                                  | Contenido clave                                  | Estado |
+| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
+| [Apéndice A: Pensamiento de producto](/es-es/stage-1/appendix-a-product-thinking/)    | Marco de pensamiento de producto desde la evaluación de ideas hasta la descomposición de requisitos y MVP | ✅   |
+| [Apéndice B: Errores comunes y soluciones](/es-es/stage-1/appendix-b-common-errors/) | Errores comunes en vibe coding y métodos de solución        | ✅   |
+| [Apéndice: De dónde sacar ideas](/es-es/stage-1/appendix-idea-sources/)          | Encontrar direcciones específicas a partir de aplicaciones de referencia, tendencias y listas de VC  | ✅   |
+| [Apéndice: Modelo Double Diamond](/es-es/stage-1/appendix-double-diamond/)           | Comprender el ritmo completo de definir primero el problema y luego desarrollar la solución  | ✅   |
+| [Apéndice: Jobs to Be Done](/es-es/stage-1/appendix-jobs-to-be-done/)  | Usar el método JTBD para comprender lo que el usuario realmente quiere lograr        | ✅   |
+| [Apéndice: Método de entrevistas The Mom Test](/es-es/stage-1/appendix-mom-test/) | Método de investigación para validar necesidades a través de entrevistas con usuarios            | ✅   |
+
+### Etapa Dos: Desarrollador Junior e Intermedio
+
+#### Parte Frontend
+
+| Sección                                                                                                                | Contenido clave                                                                     | Estado |
+| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
+| Uso de Lovart para producir materiales                                                                                        | Aprender a usar Lovart para generar por lotes materiales visuales como personajes y escenarios, proporcionando una base de materiales para el diseño UI y el desarrollo frontend | 🚧   |
+| Introducción a Figma y MasterGo                                                                                      | Usar herramientas de diseño para organizar la arquitectura de información y la estructura de páginas, sentando las bases para la implementación frontend                           | 🚧   |
+| Construir la primera aplicación moderna - Diseño UI                                                                              | Completar una interfaz basada en componentes a partir del diseño, realizando el primer enlace de diseño a código                       | 🚧   |
+| Diseñar páginas y botones con referencia a especificaciones de diseño UI                                                                              | Aprender a organizar la estructura de páginas y la jerarquía de botones con especificaciones de diseño convencionales, y usar IA para generar esquemas de diseño             | 🚧   |
+| [Construyendo retratos de Hogwarts juntos](/es-es/stage-2/frontend/hogwarts-portraits/) | De 0 a 1, crear una aplicación frontend integrando capacidades de IA, uniendo diseño y desarrollo                         | 🚧   |
+
+#### Parte de Desarrollo Backend
+
+| Sección                                                                                                                    | Contenido clave                                                      | Estado |
+| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
+| Qué es una API                                                                                                      | Comprender las interfaces HTTP y el modelo petición-respuesta, preparándose para la integración backend y la depuración conjunta          | 🚧   |
+| [De la base de datos a Supabase](/es-es/stage-2/backend/database-supabase/) | Implementar bases de datos y APIs en Supabase, conectando modelos de datos con páginas frontend        | 🚧   |
+| Modelos grandes asistiendo en la redacción de código de interfaz y documentación de interfaz                                                                                | Usar modelos grandes para ayudar a generar interfaces, documentación de base de datos y código, logrando un backend legible y testeable    | 🚧   |
+| Flujo de trabajo Git y despliegue en Zeabur                                                                                        | Gestionar código en un flujo de trabajo Git, y desplegar la aplicación en Zeabur para ponerla en línea           | 🚧   |
+| Herramientas modernas de desarrollo CLI                                                                                               | Usar herramientas de programación AI tipo CLI para acelerar el desarrollo y la depuración, formando un flujo de trabajo de ingeniería personal   | 🚧   |
+| Cómo integrar sistemas de pago como Stripe                                                                                      | Integrar sistemas de pago, completando el enlace de cobro y el flujo básico de liquidación                      | 🚧   |
+| Construir la primera aplicación moderna - Aplicación fullstack                                                                               | Integrar frontend, backend y módulo de pago para completar una aplicación web fullstack que pueda ponerse en línea           | 🚧   |
+| Biblioteca de componentes frontend moderna + Práctica con Trae                                                                                    | Usar una biblioteca de componentes frontend moderna y Trae para completar independientemente un producto con login, registro y soporte de pago | 🚧   |
+
+#### Apéndice de Capacidades de IA
+
+| Sección                                                                                                                                                                  | Contenido clave                                                       | Estado |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
+| [Introducción a Dify e integración de base de conocimientos](/es-es/stage-2/ai-capabilities/dify-knowledge-base/) | Usar Dify Workflow y RAG básico para construir un producto tipo herramienta, preparando el terreno para futuras actualizaciones de aplicaciones | 🚧   |
+| Aprender a consultar el diccionario de IA e integrar APIs multimodales                                                                                                                               | Aprender a encontrar modelos y APIs adecuados, e integrar capacidades multimodales como texto e imagen en el producto   | 🚧   |
+
+### Etapa Tres: Desarrollador Senior
diff --git a/docs/es-es/stage-1/ai-capabilities-through-games/index.md b/docs/es-es/stage-1/ai-capabilities-through-games/index.md
new file mode 100644
index 0000000..c5a19e9
--- /dev/null
+++ b/docs/es-es/stage-1/ai-capabilities-through-games/index.md
@@ -0,0 +1,219 @@
+# Nivel Basico 1: En la era de la IA, saber hablar es saber programar
+
+Este es un tutorial de aprendizaje **basado en proyectos**. Te recomendamos seguir los pasos uno por uno y tratar de reproducir los resultados.
+No tengas miedo de equivocarte o de cambiar cosas. Recuerda:
+
+<div style="text-align: center;">
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">Terminar es mas importante que ser perfecto</span>
+</div>
+</div>
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'aprox. <strong>4 horas</strong> (puede hacerse en varias sesiones)'
+const relatedArticles =
+  relatedArticlesMap['es-es/stage-1/ai-capabilities-through-games'] ?? []
+</script>
+
+## Introduccion del capitulo
+
+<ChapterIntroduction :duration="duration" :tags="['Programacion conversacional', 'Mini-juegos nativos de IA', 'Practica con Snake']" coreOutput="Snake nativo de IA + un mini-juego propio" expectedOutput="1 Snake nativo de IA ejecutable + (opcional) 1 mini-juego o demo propio">
+
+Si <strong>no sabes programar</strong> o solo conoces lo minimo, este capitulo es para ti. Empezamos desde cero: vas a usar <strong>conversacion</strong> para que la IA te ayude a escribir codigo. Sin memorizar sintaxis ni configurar entornos, en muchos casos puedes ejecutarlo directamente en una pagina web.
+
+Construiras tu <strong>primer programa que corre</strong>: una version de Snake que puede "comerse palabras", "escribir poemas" o "dibujar". Veras como se siente programar con IA: no es que la IA piense por ti; tu expresas tu intencion y la IA la implementa.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Nivel 1: Hablar = Programar', description: 'Aprende programacion con IA a traves de juegos. De Snake a tus propios mini-juegos nativos de IA.' },
+      { title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
+      { title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
+      { title: 'Extender y crear', description: 'Crear un juego propio' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. La dificultad de la gente comun y la oportunidad
+
+Mucha gente tiene ideas: una herramienta para gastos, una pagina para registrar el crecimiento de un hijo, o incluso un mini-juego. Pero al pensar en "escribir codigo" o "buscar programadores", se desanima.
+
+Con la IA aparece una posibilidad real: no necesitas saber programar para empezar; necesitas aprender a decirle a la IA con claridad que quieres. Incluso para desarrolladores profesionales, la IA ya es parte del flujo de trabajo, lo que significa que para quienes no programan, hablar bien con un agente se vuelve una habilidad muy valiosa.
+
+Esta parte del curso busca que desarrolles una nueva capacidad: <strong>crear aplicaciones describiendo requisitos en lenguaje natural</strong>. Aprenderas a comunicarte con la IA "como una computadora": objetivos claros, pasos, entradas y salidas, y como depurar cuando algo no sale bien.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Dificultad y oportunidad', description: 'Una nueva forma de crear con IA' },
+      { title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
+      { title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
+      { title: 'Extender y crear', description: 'Crear un juego propio' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Hasta donde puede llegar la IA hoy
+
+Pregunta concreta: si no sabes escribir codigo, hasta donde puedes llegar con una IA conversacional?
+
+De forma realista, hoy la IA suele funcionar muy bien para:
+
+- herramientas internas simples,
+- tableros de visualizacion,
+- mini-juegos ligeros,
+- prototipos para validar ideas desde perspectiva de producto.
+
+Para productos grandes y listos para produccion, aun hace falta trabajo humano en diseno de flujo, detalles, seguridad, rendimiento y mantenibilidad. Pero para prototipos y herramientas personales, el nivel es sorprendentemente util.
+
+### 2.1 Construye Snake en 60 segundos (con z.ai)
+
+Abre la pagina de laboratorio del curso: [z.ai](https://chat.z.ai/). En este tutorial usaremos su modo de "desarrollo full-stack" para ver como la IA crea un proyecto y lo previsualiza.
+
+::: details Que significa "programar desde el navegador"
+
+Antes, para hacer una app web tenias que instalar entornos (Node.js, Python), configurar editor, aprender HTML/CSS/JS y resolver dependencias.
+
+Ahora, con plataformas de programacion con IA:
+
+- abres el navegador,
+- describes la funcionalidad en lenguaje natural,
+- la IA genera codigo y muestra vista previa.
+
+Este estilo se parece a "conversar = programar": el foco pasa de escribir sintaxis a describir requisitos.
+
+:::
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
+
+Pega un requerimiento simple como este y ejecutalo:
+
+```txt
+Haz un juego de Snake:
+1. Control con flechas
+2. Al comer, la serpiente crece y sube la puntuacion
+3. Chocar con la pared o contigo mismo termina el juego
+4. Boton de iniciar y reiniciar
+5. Interfaz simple y agradable
+```
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
+
+Cuando termine, a la derecha veras la pagina lista para probar. Normalmente puedes:
+
+- hacer scroll,
+- entrar en pantalla completa,
+- descargar el proyecto,
+- ver el codigo.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
+
+Para ver el codigo, usa el icono de codigo en la esquina superior derecha.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png)
+
+::: tip Explora mas herramientas
+
+Ademas de z.ai, puedes probar herramientas como Google AI Studio, v0.dev, Bolt, Replit Agent y otras. Lo importante no es la marca, sino practicar el mismo ciclo:
+
+1. describir requisito,
+2. probar en el navegador,
+3. corregir con una instruccion concreta,
+4. iterar.
+
+:::
+
+### 2.2 Que puede y que no puede hacer la programacion conversacional
+
+Un resumen practico:
+
+- La IA es muy buena para construir algo "pequeno y completo" si describes bien UI e interacciones.
+- Para proyectos grandes, necesitas una vision de proceso: dividir el problema en pasos, definir entradas/salidas, y luego pedir a la IA que implemente modulos por separado.
+- "Que pueda escribirlo" no significa "que este listo para uso real". Para produccion hay que revisar arquitectura, seguridad, pruebas y calidad.
+
+::: warning Guia rapida de escenarios
+
+- **Prototipo / demo / herramienta interna**: excelente para que la IA haga la primera version, luego tu iteras.
+- **Producto grande para usuarios reales**: requiere inversion sostenida en ingenieria.
+- **Alta seguridad / alta regulacion (pagos, salud, riesgo)**: no se debe "generar y publicar" sin revision y pruebas estrictas.
+
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Dificultad y oportunidad', description: 'Una nueva forma de crear con IA' },
+      { title: 'Exploracion rapida', description: 'Experiencia de 60 segundos' },
+      { title: 'Practica nativa', description: 'Construir Snake nativo de IA' },
+      { title: 'Extender y crear', description: 'Crear un juego propio' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Practica: hacer un Snake "nativo de IA"
+
+La idea de "nativo de IA" es que el juego no solo sea un Snake tradicional. Puedes agregar una habilidad IA dentro del gameplay, por ejemplo:
+
+- al comer una palabra, traducirla y generar ejemplos,
+- al comer un tema, generar una frase o un mini poema,
+- al comer un prompt, generar una imagen o un icono.
+
+Lo importante es practicar el mismo patron: describir claramente y pedir a la IA que implemente, y luego iterar en base al resultado.
+
+> Consejos al pedir cambios:
+>
+> 1. describe el fenomeno observable,
+> 2. explica el comportamiento esperado,
+> 3. si hay error, copia el error completo,
+> 4. pide que modifique el codigo minimo necesario.
+
+Para seguir el flujo visual de la practica, veras capturas de referencia:
+
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png)
+>
+>    ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png)
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png)
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png)
+
+En esta practica tambien puedes aprender un habito clave: cuando algo sale mal, no "adivines". Copia y pega el error a la IA y pide explicacion simple y una correccion concreta.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png)
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png)
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
+
+## 4. Extiende: crea un mini-juego propio
+
+Una vez que Snake funcione, tu objetivo no es "memorizar codigo", sino crear variaciones.
+
+Algunas ideas:
+
+- un juego de reaccion (click en el momento correcto),
+- un quiz corto de vocabulario,
+- un contador/temporizador con recompensas,
+- un "generador" que produce tarjetas y puntuacion.
+
+Lo mas importante: define primero el objetivo y el bucle del juego (entrada -> estado -> salida) y luego pide a la IA que lo implemente.
+
+![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png)
+
+## Tarea
+
+1. Repite el juego Snake basico con tus propios colores y UI.
+2. Agrega una habilidad IA dentro del juego (traduccion, resumen, generacion de texto, etc.).
+3. Crea una variante de mini-juego (aunque sea muy simple) y asegurate de que sea jugable.
+
+## Siguiente paso
+
+En los siguientes capitulos conectaremos capacidades IA mas concretas (texto a texto, imagen a texto, texto a imagen) y avanzaremos hacia proyectos mas completos.
+
+<RelatedArticles :articles="relatedArticles" />
+---
+title: 'Principiante 1: En la era de la IA, hablar es programar'
+description: 'Crea una serpiente AI-native con dialogo y aplica el metodo para construir tu propio mini juego o demo.'
+---
diff --git a/docs/es-es/stage-1/appendix-a-product-thinking/index.md b/docs/es-es/stage-1/appendix-a-product-thinking/index.md
new file mode 100644
index 0000000..3acae3a
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-a-product-thinking/index.md
@@ -0,0 +1,152 @@
+---
+title: 'Pensamiento de producto y diseno de soluciones'
+description: 'Como pasar de "construir una herramienta" a "disenar un producto valioso": fuentes de ideas, descomposicion en MVP, mejora de UX y uso razonable de IA.'
+---
+
+<script setup>
+const duration = 'Aprox. <strong>6 horas</strong>'
+</script>
+
+# Pensamiento de producto y diseno de soluciones
+
+## Introduccion del capitulo
+
+<ChapterIntroduction :duration="duration" :tags="['Producto', 'Necesidades', 'Diseno de soluciones', 'Insights de usuario']" coreOutput="1 esquema completo de producto" expectedOutput="Ideas de producto ejecutables">
+
+En capitulos anteriores ya aprendiste a construir prototipos con AI IDEs. Aqui cambiamos el foco de <strong>"puedo construirlo?"</strong> a <strong>"que vale la pena construir?"</strong>.
+
+Vamos a trabajar un metodo repetible para:
+
+1. Encontrar ideas mas confiables (no solo inspiracion).
+2. Convertir una idea en un flujo de producto construible.
+3. Pasar de "funciona" a "se usa de verdad".
+4. Usar IA donde aumenta el valor y no solo "se ve cool".
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Fuentes de ideas', description: 'Encontrar ideas confiables' },
+      { title: 'Descomposicion', description: 'Convertir idea en app construible' },
+      { title: 'Mejora', description: 'De usable a buena' },
+      { title: 'IA como amplificador', description: 'Aplicar IA donde aporta valor' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Lo que aprenderas
+
+Al final deberias poder responder:
+
+1. De donde salen ideas confiables?
+2. Como descomponer una idea en un MVP construible?
+3. Como evaluar y mejorar una app para que la gente la use?
+4. Donde usar IA para amplificar valor?
+5. Como conseguir los primeros usuarios reales?
+
+---
+
+# 1. Fuentes de ideas confiables
+
+No necesitas una "idea genial". Necesitas un problema real en un escenario real.
+
+## 1.1 Que es una idea (en sentido de producto)?
+
+Una idea construible tiene al menos:
+
+1. Un usuario objetivo claro (quien exactamente?).
+2. Un escenario concreto (cuando/donde ocurre).
+3. Una tarea concreta (que quiere lograr).
+4. Una mejora plausible frente a como se hace hoy.
+
+## 1.2 Idea vs necesidad real
+
+Una idea es una hipotesis. Una necesidad real es algo que el usuario ya intenta resolver (aunque sea con workarounds).
+
+Regla rapida:
+
+- Necesidad real: el usuario ya paga con tiempo/dinero/estres.
+- Necesidad falsa: el usuario dice "interesante", pero no cambia conducta ni paga.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png)
+
+## 1.3 Por que algunas ideas crecen solas
+
+Cuando el valor es inmediato y el flujo es corto, la recomendacion aparece de forma natural:
+
+Problema -> valor pequeno inmediato -> repeticion -> recomendacion.
+
+Si el producto necesita mucha explicacion o empuje externo, suele ser senal de que el dolor no es fuerte.
+
+## 1.4 Cuatro fuentes estables
+
+1. Tu trabajo: procesos repetitivos, coordinacion, reportes, QA.
+2. Comunidades: preguntas repetidas y quejas recurrentes.
+3. Reviews/comentarios: fricciones y "por que esto es tan dificil?".
+4. Productos existentes: encontrar huecos (caro, complejo, poco especializado).
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png)
+
+---
+
+# 2. Descomposicion: de idea a app
+
+Una idea se vuelve construible cuando se convierte en decisiones.
+
+## 2.1 Minimo: usuario, escenario, flujo
+
+Define:
+
+1. Usuario: rol, objetivo, restricciones, presupuesto.
+2. Escenario: disparador -> pasos -> resultado.
+3. Flujo principal: 3-7 pasos que entregan valor.
+
+## 2.2 Cortar alcance (MVP)
+
+Un MVP no es "menos features", es "una promesa clara que se cumple".
+
+Preguntas utiles:
+
+- Cual es el primer minuto donde el usuario dice "esto me ahorro tiempo"?
+- Que se puede quitar sin romper el valor central?
+- Cual es la suposicion mas riesgosa? (validala primero)
+
+---
+
+# 3. Mejora: de usable a buena
+
+Despues del MVP, el trabajo es:
+
+1. Claridad: el usuario entiende el siguiente paso sin leer manual.
+2. Friccion baja: menos clicks, menos formularios, menos contexto.
+3. Confianza: datos claros, resultados explicables, defaults seguros.
+
+Test simple: un usuario nuevo obtiene valor en 60 segundos?
+
+---
+
+# 4. IA como amplificador de valor
+
+La IA aporta mas cuando:
+
+1. Convierte lenguaje en estructura (texto -> tareas, notas -> plan).
+2. Resume y prioriza (mucho contenido -> accion).
+3. Personaliza (recomendaciones segun contexto).
+
+Suele aportar poco cuando solo se pega un chat sin mejorar el flujo central.
+
+---
+
+## Output esperado
+
+Un esquema de producto que incluya:
+
+1. Usuario y caso de uso
+2. Problema central y coste actual
+3. Flujo principal (3-7 pasos)
+4. Alcance del MVP
+5. Plan de validacion (7 dias) y metricas
+
+<RelatedArticlesSection />
+
diff --git a/docs/es-es/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/es-es/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..9780810
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,359 @@
+# Comparacion de 7 herramientas de programacion con IA
+
+## Resumen del capitulo
+
+Frente a la gran cantidad de herramientas de programacion con IA, cual es la mas adecuada para ti? Este capitulo realiza una evaluacion comparativa profunda de 7 plataformas principales de Web Vibe Coding como Lovable, Replit, Z.ai y otras, a traves de una tarea practica unificada: desarrollar un juego de "Snake + IA que escribe poesia". Compararemos desde multiples dimensiones como la amigabilidad para principiantes, la controlabilidad del codigo y la comodidad de despliegue, para ayudarte a elegir rapidamente la mejor herramienta de desarrollo asistido.
+
+---
+
+# 1. Construir un juego Snake con Vibe Coding: tutorial practico completo
+
+Este articulo presenta una nueva practica de desarrollo de software llamada "Vibe Coding (codificacion de ambiente)", que utiliza inteligencia artificial para acelerar el proceso de construccion de aplicaciones.
+
+A continuacion, presentaremos secuencialmente los conceptos centrales de Vibe Coding, explicaremos que es un AI Agent, y proporcionaremos metodos practicos para escribir prompts. Finalmente, a traves de una practica completa de construccion desde cero del juego "Snake (Serpiente)", y una comparacion detallada de multiples plataformas de Vibe Coding principales, te ayudaremos a elegir la combinacion de herramientas mas adecuada para ti.
+
+## Aprenderas:
+
+- **Que es Vibe Coding:** entender su definicion, flujo de trabajo y ventajas clave.
+- **El rol del AI Agent:** comprender como funciona un AI Agent y en que se diferencia de un programa tradicional.
+- **Como escribir buenos prompts:** dominar la escritura de prompts claros y especificos para obtener mejores resultados.
+- **Herramientas de Vibe Coding:** conocer un conjunto de plataformas principales de programacion y diseno con IA.
+- **Comparacion de plataformas:** evaluar y comparar las ventajas y desventajas de 7 plataformas de AI Agent desde la perspectiva de un principiante.
+- **Herramientas UI / UX:** aprender como integrar herramientas UI/UX como Figma y Mastergo en el flujo de trabajo general.
+
+## 1. Introduccion
+
+En las lecciones anteriores, siempre hemos usado el modelo de desarrollo fullstack de z.ai para completar tareas de programacion.
+
+Sin embargo, nos hemos preguntado: su nucleo es realmente un "AI Agent" (diferente de la IA de chat comun, y mucho mas inteligente)? Esto se debe a que no solo conversa contigo, sino que es capaz de pensar (cuando le das una tarea, primero elabora un plan) y tomar acciones proactivas (como invocar busqueda web, ejecutar comandos de computadora, abrir paginas web, etc.). Lo explicaremos en detalle mas adelante.
+
+## 1. Que es Vibe Coding?
+
+Vibe Coding es un nuevo enfoque de desarrollo de software que utiliza IA para acelerar el proceso de desarrollo de aplicaciones. No es un reemplazo de la programacion tradicional, sino un modo de programacion mas "conversacional". Este concepto fue propuesto por el investigador de IA Andrej Karpathy: en este flujo de trabajo, los desarrolladores ya no escriben codigo linea por linea manualmente, sino que principalmente guian al AI Agent para generar, optimizar y depurar aplicaciones.
+
+La idea central de Vibe Coding es pasar de **"centrado en codigo (code-first)"** a **"centrado en intenciones (intent-first)"*. Ya no necesitas concebir desde la primera linea de codigo, sino describir el resultado que deseas en lenguaje natural.
+
+Un flujo de trabajo tipico de Vibe Coding es un ciclo iterativo continuo:
+
+- **Describir el objetivo:** primero describe en una frase o parrafo la funcionalidad que deseas implementar, por ejemplo: "crear un juego de Snake simple con un backend en Python que pueda generar poesia."
+- **IA genera codigo:** el AI Agent analiza tus necesidades, genera una version inicial del codigo, incluyendo la estructura basica, la pagina frontend y la logica backend.
+- **Ejecutar y observar:** ejecuta el codigo generado, verifica si funciona como se espera, y descubre bugs o areas de mejora.
+- **Retroalimentar e iterar:** si hay errores o los resultados no son ideales, continua dando instrucciones en la conversacion, por ejemplo: "la serpiente se mueve muy lento, acelera la velocidad", o "ahora la API Key en el archivo `.env` no se esta leyendo correctamente, por favor arregla el codigo del backend."
+- **Repetir los pasos anteriores:** itera continuamente en el ciclo de "describir -> generar -> ejecutar -> retroalimentar" hasta que la aplicacion alcance un estado satisfactorio.
+
+### Principales ventajas de Vibe Coding:
+
+- **Reduccion de la barrera de entrada:** permite que disenadores, emprendedores, estudiantes y otros sin experiencia en programacion participen en el desarrollo de aplicaciones a traves del lenguaje natural.
+- **Prototipado rapido:** el tiempo desde la idea hasta el producto minimo viable (MVP) se reduce drasticamente.
+- **Mejora de eficiencia:** maneja automaticamente una gran cantidad de trabajo de codificacion repetitivo y mecanico (como codigo boilerplate), permitiendo a los desarrolladores enfocarse en el diseno de arquitectura y la abstraccion de problemas.
+- **Fomento de la experimentacion:** anima a producir primero rapidamente y luego refinar continuamente, facilitando la prueba de nuevas ideas y funcionalidades.
+
+## 2. Que son las plataformas de Vibe Coding en linea (Web-based)?
+
+En esta prueba practica, descubriras que las herramientas que evaluamos se dividen en dos categorias: **Web-based (plataformas en linea)** y **IDE (entorno de desarrollo local)**.
+
+Aunque su nucleo es usar IA para ayudarte a escribir codigo, hay una gran diferencia en la experiencia de uso y los escenarios aplicables:
+
+### Plataformas de Vibe Coding en linea (Web-based)
+
+**Herramientas representativas:** Lovable, Replit, Z.ai, v0
+
+Es como un apartamento hotelero "listo para vivir".
+
+- **Sin configuracion de entorno:** no necesitas preocuparte por el entorno de Python, la version de Node.js, ni la instalacion de dependencias. Abres el navegador, introduces la URL y puedes empezar a codificar directamente.
+- **Vista previa y despliegue con un clic:** despues de generar el codigo, la plataforma suele mostrar automaticamente el resultado en la ventana derecha. Cuando este listo, haz clic en un boton para generar un enlace y compartirlo con tus amigos.
+- **Escenarios adecuados:**
+  - **Validacion rapida de ideas (MVP):** tienes una idea en mente y quieres dedicar media hora a ver si puedes hacerla realidad.
+  - **Principiantes:** no quieres que los complejos errores de entorno te frustren; solo quieres experimentar la diversion de la programacion con IA.
+  - **Aplicaciones ligeras:** hacer una pagina web de herramienta simple, un pequeno juego o una pagina de presentacion personal.
+
+### AI IDE (entorno de desarrollo local)
+
+**Herramientas representativas:** Cursor, Trae, VS Code + plugin de IA
+
+Es como una vivienda propia "completamente renovada".
+
+- **Poderosas capacidades locales:** se ejecuta en tu computadora y puede acceder directamente a todos tus archivos locales, utilizando la potencia de calculo de tu equipo.
+- **Integracion sin fisuras con flujos de trabajo profesionales:** adecuado para proyectos grandes, puedes instalar libremente todo tipo de plugins, conectarte a bases de datos locales y realizar depuracion compleja.
+- **Escenarios adecuados:**
+  - **Desarrollo de proyectos profesionales:** proyectos comerciales complejos que requieren mantenimiento a largo plazo.
+  - **Personalizacion profunda:** necesitas control extremo sobre los detalles del codigo, o necesitas integracion profunda con flujos de trabajo locales existentes (como Git, Docker).
+  - **Privacidad de datos:** el codigo permanece completamente local, mas compatible con ciertas normativas de seguridad empresarial.
+
+**En resumen:** si estas empezando con la programacion con IA, o solo quieres hacer algo pequeno rapidamente, las **plataformas en linea** son un excelente punto de partida. Si eres un desarrollador profesional o tu proyecto se vuelve cada vez mas complejo, un **IDE local** te proporcionara un techo mas alto.
+
+---
+
+## 3. Que es un AI Agent?
+
+### Que es un AI Agent?
+
+Un AI Agent es un sistema de software capaz de percibir su entorno, tomar decisiones y actuar autonomamente para lograr objetivos especificos. Comparado con el software tradicional que sigue instrucciones fijas con un flujo unico, los AI Agents son mas flexibles y adaptables.
+
+A continuacion, algunas caracteristicas clave que distinguen a los AI Agents de los programas tradicionales:
+
+- **Autonomia (Autonomy):** los AI Agents tienen un alto grado de independencia. Los programas tradicionales suelen requerir que una persona los active paso a paso, mientras que un Agent puede decidir autonomamente su siguiente paso basandose en el objetivo.
+- **Percepcion y memoria (Perception & Memory):** el Agent recopila datos del entorno (por ejemplo, respuestas de API, datos de sensores, entrada del usuario, etc.) y retiene el contexto a traves de la "memoria", reutilizando experiencia en acciones posteriores y mejorando continuamente los resultados.
+- **Racionalidad y orientacion a objetivos (Rationality & Goal-Orientation):** el Agent analiza y planifica en torno al objetivo dado, seleccionando la secuencia de acciones mas adecuada para buscar un mayor "indicador de rendimiento".
+- **Uso de herramientas (Tool Use):** una caracteristica clave de los AI Agents modernos es la capacidad de invocar herramientas externas, sin limitarse a "generar texto". Por ejemplo, puede navegar la web, ejecutar codigo, consultar bases de datos, enviar correos electronicos, etc.; es un cerebro que "despacha herramientas".
+
+Puedes entenderlo con esta analogia:
+
+- Un **programa tradicional** es como una calculadora. Le das numeros y operadores, y solo ejecuta el calculo cuando presionas el boton.
+- Un **asistente de IA** es como un asistente humano. Le pides "ayudame a encontrar restaurantes cercanos", te dara resultados de busqueda y listara opciones, pero al final tu tomas la decision.
+- Un **AI Agent** es mas como un equipo de investigacion automatizado. Solo necesitas dar un objetivo de alto nivel (por ejemplo, "planificame un viaje a Japon"), y descompondra la tarea, buscara informacion en internet, reservara vuelos y hoteles (via API), organizara el itinerario, y finalmente te entregara los resultados, casi sin necesidad de que intervengas en los detalles.
+
+---
+
+# 2. Sobre la escritura de prompts
+
+## 1. Es mejor escribir un prompt completo de una vez o dividirlo en multiples pasos?
+
+Muchas personas tienen la tentacion de intentar explicar en un solo prompt "crear una aplicacion fullstack completa" de una vez. De hecho, las herramientas actuales ya son lo suficientemente potentes como para potencialmente dar un resultado decente en un intento. Pero en terminos de experiencia general y tasa de exito, dividir el trabajo en pequenos pasos e iterar por etapas suele dar mejores resultados y es menos probable que termines en un callejon sin salida de "ya no se puede modificar".
+
+> **Pequeno consejo:** En lugar de esperar "hacerlo perfecto de una vez", es mejor dividir el objetivo grande en pequenas tareas ejecutables (To-do).
+> Por ejemplo, en lugar de decir directamente "build me a Snake game", dividelo en:
+> "1. Primero haz el frontend de un juego de Snake",
+> "2. Luego implementa un backend que registre puntuaciones",
+> "3. Finalmente conecta el frontend y el backend".
+> Esto permite que la IA comprenda tus necesidades con mayor precision y produzca resultados mas fiables.
+
+## 2. Cuanto mas claro, mejor
+
+- En Vibe Coding, los prompts que escribes son tan importantes como el codigo que escribes. Cuanto mas claro y especifico sea el prompt, mas cerca estara el resultado de lo que tienes en mente.
+- Explicar claramente los objetivos y restricciones desde el principio puede reducir la cantidad de iteraciones posteriores, lo que no solo ahorra tiempo sino tambien uso de cuotas y costos.
+
+---
+
+# 3. Resumen de herramientas (Vibe Coding / UIUX)
+
+## 1. Plataformas de AI Agent
+
+| **Name**                                   | **Platform** |
+| ------------------------------------------ | ------------ |
+| **[Lovable](https://lovable.dev/)**        | Web-based    |
+| **[Cursor](https://cursor.com/cn/agents)** | PC           |
+| **[Z.ai](https://chat.z.ai/)**             | Web-based    |
+| **[Replit](https://replit.com/~)**         | Web-based    |
+| **[Minimax](https://agent.minimaxi.com/)** | Web-based    |
+| **[Trae](https://www.trae.ai/)**           | PC           |
+| **[V0](https://v0.app/)**                  | Web-based    |
+
+## 2. Plataformas AI UIUX
+
+| **Name**                              | **Platform**         |
+| ------------------------------------- | -------------------- |
+| **[Mastergo](https://mastergo.com/)** | Web-based            |
+| **[FIgma](https://www.figma.com/)**   | Web-based, PC Plugin |
+
+---
+
+# 4. Tutorial practico (combinacion de Vibe Coding + UI)
+
+1. En la ventana de chat de la plataforma de Vibe Coding que elijas, introduce la descripcion del programa que deseas.
+   Ejemplo:
+
+   > Por favor construye una aplicacion web simple de Snake (Serpiente) con frontend y backend.
+   >
+   > 1. Frontend
+   >
+   > - Pagina 1: pagina del juego
+   >   - Usa el teclado para controlar el movimiento de la serpiente.
+   >   - La serpiente no come comida, sino palabras en ingles.
+   >   - La barra lateral de la pagina muestra las palabras recolectadas y su cantidad.
+   >   - Al terminar el juego, las palabras recolectadas se conservan y se mantienen en la nueva partida.
+   > - Pagina 2: pagina de escribir poesia (Make Poem)
+   >   - Muestra la misma lista de palabras que la pagina del juego (datos consistentes).
+   >   - Proporciona un boton para enviar las palabras actualmente recolectadas al backend para generar un poema.
+   >   - Despues de generar el poema, las palabras utilizadas se eliminan de la lista o se reduce su contador.
+   >
+   > * Anade navegacion simple para cambiar entre las paginas Game y Make Poem.
+   > * Asegurate de que las palabras recolectadas sean visibles en ambas paginas.
+   >
+   > 2. Backend
+   >
+   > - Proporciona un endpoint backend que reciba las palabras recolectadas y devuelva un poema.
+   > - Usa la API de DeepSeek para generar poesia.
+   > - Almacena la API Key en un archivo `.env` e ignora ese archivo en `.gitignore`.
+
+2. Introduce tu DeepSeek API Key. (Puedes obtenerla en [https://platform.deepseek.com/](https://platform.deepseek.com/))
+   1. La API Key del LLM se usa para invocar el modelo grande en tu propio proyecto. Como es informacion sensible, no puede ser publica, por lo que debe escribirse por separado en un archivo de configuracion.
+      **Por que usar un archivo `.env` y no subirlo a GitHub?**
+   - El archivo `.env` se usa especificamente para almacenar **claves o contrasenas** (por ejemplo, la DeepSeek API Key).
+   - Si este archivo se sube a GitHub, todo el mundo podra ver tu clave y usarla indebidamente.
+   - Por seguridad, necesitamos declarar en el archivo `.gitignore` que se ignore `.env`, para que Git no lo rastree.
+   - De esta forma, tu proyecto puede seguir usando estas claves normalmente en tu maquina local, pero no se filtraran en el repositorio.
+
+3. Despues de ver el resultado generado, si encuentras errores o algo que quieras modificar, puedes introducir directamente tu solicitud de cambio en la ventana de chat.
+4. Si no estas satisfecho con el diseno de la pagina, tambien puedes elegir redisenar la interfaz en Figma o Mastergo, y luego retroalimentar las ideas de diseno al Agent.
+
+- **Ejemplo**
+
+  > Por favor disena una **aplicacion web de dos paginas** llamada _Word-Snake_.
+  >
+  > - **Pagina Game:**
+  > - La serpiente se controla con el teclado.
+  > - La serpiente come palabras en ingles, no comida normal.
+  > - El panel derecho muestra las palabras recolectadas y su cantidad.
+  > - Al terminar el juego, el inventario de palabras no se vacia; se sigue usando en la nueva ronda.
+  > - **Pagina Make Poem:**
+  > - Muestra el mismo inventario de palabras compartido.
+  > - El usuario selecciona algunas palabras y hace clic en el boton **Generate Poem**.
+  > - Se envian estas palabras al backend, donde la API de DeepSeek genera un poema.
+  > - Despues de generar el poema, se eliminan o reducen del inventario las palabras utilizadas.
+  > - **Navegacion:** cambia entre las dos paginas con un Tab simple o menu superior.
+  > - **Estado compartido:** asegurate de que las palabras recolectadas siempre permanezcan sincronizadas y visibles en ambas paginas.
+
+- **Ejemplo de resultado**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. Comparacion de plataformas de AI Agent (como elegir la mejor combinacion para proyectos simples)
+
+Las diferentes plataformas de Vibe Coding tienen caracteristicas y flujos de trabajo distintos. Usamos el mismo conjunto de requisitos para un "juego de Snake con API DeepSeek" y lo probamos en multiples plataformas, evaluando sus pros y contras desde la perspectiva de un principiante. A continuacion el resumen.
+
+## 1. Criterios de comparacion
+
+1. **Objetivo (Goal)**
+   Construir una aplicacion web de Snake (Serpiente) integrada con la API de DeepSeek.
+2. **Detalles del juego (Game Details)**
+   1. El juego genera poesia a traves de la API DeepSeek LLM.
+   2. La serpiente come palabras en ingles; las palabras recolectadas se conservan despues de terminar el juego y se siguen usando en la nueva partida. La misma palabra puede ser recolectada multiples veces, con conteo separado.
+   3. Cuando se genera un poema, las palabras utilizadas se eliminan del inventario.
+
+3. **Funciones esenciales (Must-Haves)**
+   1. Una pagina frontend funcional con el juego de Snake (control por teclado, renderizado Canvas).
+   2. Mecanismo de recoleccion de palabras (las palabras aparecen en el tablero; al comerlas, la lista de la barra lateral se actualiza).
+   3. Persistencia del inventario de palabras entre multiples rondas de juego.
+   4. Backend usando la API de DeepSeek (si no hay API Key, se puede devolver poesia simulada primero).
+   5. Boton "Generar poesia": al hacer clic invoca el backend, muestra el poema y actualiza el inventario de palabras segun su uso.
+   6. Soporte de `.env` para la API Key y `.gitignore` para evitar la filtracion de claves.
+
+4. **Extras (Nice-to-Haves)**
+   1. El usuario puede elegir que palabras usar para generar poesia.
+   2. Experiencia de usuario amigable (por ejemplo, barra lateral que muestra claramente la lista de palabras, area de visualizacion de poesia con diseno razonable).
+   3. Comentarios en el codigo para principiantes que expliquen la logica clave.
+
+## 2. Comparacion de resultados de codificacion
+
+### 1. Lovable (Web-based)
+
+- **Tipo de plataforma:** Web
+- **Caracteristicas principales y flujo de trabajo:** Lovable hace un buen trabajo en integracion y colaboracion. Completa automaticamente tareas de inicializacion como la conexion a la base de datos Supabase, haciendo que el proceso de configuracion del proyecto sea muy fluido. Solo necesitas describir los requisitos del proyecto, y el Agent te ayudara a conectar todo tipo de servicios y construir la estructura basica.
+- **Usuarios adecuados:** Para los principiantes que prueban Vibe Coding por primera vez, Lovable es una opcion muy amigable. Simplifica la complejidad de conectar multiples servicios, permitiendote enfocarte en los prompts y la iteracion en lugar de en la configuracion del entorno. Gracias a su alta automatizacion, puedes obtener rapidamente un prototipo funcional.
+- **Proceso de prompts:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **Resultado del juego Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **Precio:** Relativamente caro, pero si tienes un correo universitario, puedes obtener la mitad de precio mediante la verificacion de estudiante.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor (IDE)
+
+- **Tipo de plataforma:** Aplicacion de escritorio (PC)
+- **Caracteristicas principales y flujo de trabajo:** Cursor es un IDE propietario con capacidades de IA integradas, compatible con Windows, macOS y Linux. Incrusta funciones como generacion de codigo, reescritura inteligente y consulta de codigo directamente en el entorno de desarrollo. Comparado con las herramientas web, se asemeja mas a la experiencia de desarrollo local tradicional. Al ser un entorno local, las configuraciones varian entre computadoras, por lo que ocasionalmente pueden surgir problemas relacionados con el entorno. La ventaja es que el proyecto esta en tu maquina local, sin necesidad de descargar o configurar adicionalmente un entorno de ejecucion; Cursor te ayuda a manejar muchos de los pasos mas tediosos.
+- **Usuarios adecuados:** Para usuarios que ya tienen cierta base de programacion, Cursor es un entorno muy potente y familiar. Pero para principiantes absolutos, necesitan comprender por si mismos conceptos como la estructura del proyecto, la gestion de dependencias y la organizacion de archivos, por lo que la curva de aprendizaje es mas pronunciada. Mas adecuado para desarrolladores que quieren incorporar un asistente de IA en su flujo de codificacion tradicional.
+- **Proceso de prompts:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **Resultado del juego Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **Precio:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai (Web-based)
+
+- **Tipo de plataforma:** Web
+- **Caracteristicas principales y flujo de trabajo:** El uso de Z.ai es bastante directo, pero un desafio obvio es que necesitas **copiar y pegar manualmente el codigo generado**. La plataforma en si carece de una ventana de vista previa en tiempo real, por lo que es dificil ver el resultado del codigo inmediatamente.
+- **Usuarios adecuados:** Esta plataforma requiere un uso mas "manual". La falta de automatizacion significa que debes lidiar directamente con el codigo, lo cual es en realidad una forma de entrenamiento para quienes quieren profundizar en la comprension de lo que genera la IA. Sin embargo, el copiar y pegar frecuente genera problemas de eficiencia y riesgo de errores. Mas adecuado para estudiantes que quieren ver "codigo generado por IA en su forma original", no para quienes buscan una experiencia de un solo clic.
+- **Proceso de prompts:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **Resultado del juego Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **Precio:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit (Web-based)
+
+- **Tipo de plataforma:** Web
+- **Caracteristicas principales y flujo de trabajo:** Replit es un entorno de desarrollo y despliegue en linea todo-en-uno; puedes escribir codigo, ejecutar programas y generar URLs accesibles en linea directamente desde el navegador. Antes de empezar a codificar, te presenta un plan de accion claro; ademas proporciona un editor visual donde puedes modificar la UI directamente en la ventana de vista previa, y el codigo fuente se actualiza automaticamente. Esto te permite verificar en todo momento si el resultado de la IA cumple con lo esperado, reduciendo drasticamente la cantidad de iteraciones necesarias.
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **Usuarios adecuados:** Replit es muy amigable para principiantes. Simplifica el ciclo completo desde la codificacion hasta el despliegue, sin necesidad de configurar servidores adicionales ni servicios de hosting por tu cuenta. Las funciones de colaboracion tambien son potentes, ideales para que companeros de clase trabajen juntos en proyectos o pidan ayuda remota para revisar codigo.
+- **Proceso de prompts:** Durante la construccion, la IA no comprendio completamente los requisitos desde el principio; hubo aproximadamente 3 rondas de iteracion antes de que el resultado final alcanzara el efecto ideal.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **Resultado del juego Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **Precio:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Minimax (Web-based)
+
+- **Tipo de plataforma:** Web
+- **Caracteristicas principales y flujo de trabajo:** Minimax suele tardar bastante en ejecutar tareas. Su proceso a menudo incluye: la IA descubre y repara errores automaticamente, por lo que todo el proceso puede ser lento e incluso un tanto laborioso. Tomando este proyecto como ejemplo, el Agent generalmente genera primero un plan detallado y luego construye paso a paso el backend, la base de datos y la logica frontend.
+- **Usuarios adecuados:** Dado que ejecuta automaticamente pruebas y repara errores, tanto el tiempo como el consumo de Token son considerables, pero puedes ver claramente como la IA identifica y resuelve problemas, lo cual es muy valioso desde una perspectiva de aprendizaje.
+- **Proceso de prompts:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+- **Resultado del juego Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+
+- **Precio:** La version gratuita probablemente no pueda completar proyectos complejos de principio a fin sin problemas, por lo que se recomienda actualizar a una version de pago para asegurar que el proyecto se pueda construir completamente.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+### 6. Trae (IDE)
+
+- **Tipo de plataforma:** Aplicacion de escritorio (PC)
+- **Caracteristicas principales y flujo de trabajo:** Como aplicacion de escritorio, Trae suele tener ventaja en rendimiento y velocidad de respuesta frente a las herramientas web. Pero requiere descarga e instalacion, lo que supone una barrera de entrada ligeramente mayor para algunos usuarios. Igualmente, al ser un entorno local, las diferencias en configuraciones de diferentes computadoras y entornos de dependencias introducen cierta incertidumbre. La ventaja es que Trae te ayuda a completar la creacion del proyecto y la configuracion de ejecucion localmente; puedes desarrollar y depurar directamente en tu maquina.
+- **Usuarios adecuados:** Mas adecuado para usuarios que planean realizar proyectos de Vibe Coding a largo plazo y desean usar una herramienta de escritorio dedicada. Para estudiantes que solo quieren "probar de vez en cuando", puede que no sea la opcion mas ligera.
+- **Proceso de prompts:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+- **Resultado del juego Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+
+- **Precio:** Precio relativamente asequible; incluso la version gratuita es suficiente para completar pequenos proyectos de buena calidad.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+### 7. V0 (Web-based)
+
+- **Tipo de plataforma:** Web
+- **Caracteristicas principales y flujo de trabajo:** V0 es una herramienta enfocada en generar componentes UI de React, proporcionada por Vercel. Sobresale en generar interfaces de alta calidad aptas para produccion. Sin embargo, en uso practico, te encontraras con problemas como "dificultad para encontrar la vista de codigo" y "falta de indicaciones claras sobre donde configurar la API Key".
+- **Usuarios adecuados:** V0 es ideal para estudiantes o disenadores enfocados en frontend y diseno UI/UX. Pero no es una solucion fullstack completa; aun necesitaras usar otras plataformas para implementar la logica del backend y la integracion de APIs, por lo que si tu objetivo es "construir una aplicacion completa de forma integral", puede que no sea la mejor primera opcion.
+- **Proceso de prompts:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
+
+- **Resultado del juego Snake:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
+- **Precio:** Los usuarios gratuitos pueden construir aproximadamente 4-5 proyectos simples.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
+
+## 3. Tabla comparativa resumida de plataformas
+
+| **Plataforma**                               | **Resena**                                                                                           | **Plataforma** | **Notas**                                                                                      |
+| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------- |
+| **[Lovable](https://lovable.dev/)**        | Muy amigable para principiantes en programacion con IA, facil de empezar y experiencia fluida; la opcion ideal para iniciarse.                | Web-based    | Completa automaticamente la conexion de servicios como Supabase, reduciendo costos de configuracion.                                   |
+| **[Cursor](https://cursor.com/cn/agents)** | Adecuado para usuarios con experiencia en desarrollo; mejora drasticamente la productividad y la calidad del codigo.                             | PC           | Requiere cierta base de programacion; en el entorno local necesitas comprender la estructura del proyecto y las dependencias.                         |
+| **[Z.ai](https://chat.z.ai/)**             | Mas adecuado para usuarios con base de programacion que quieren estudiar directamente los detalles del codigo generado por la IA.                           | Web-based    | Sin ventana de vista previa, verificar resultados es mas complicado; requiere pegar codigo manualmente, crear carpetas y archivos y ejecutar el servicio manualmente. |
+| **[Replit](https://replit.com/~)**         | Recomendado para usuarios que quieren convertir rapidamente ideas en servicios en linea accesibles.                                   | Web-based    | Desarrollo y despliegue en linea todo-en-uno, soporta colaboracion y proporciona un editor visual.                             |
+| **[Minimax](https://agent.minimaxi.com/)** | Adecuado para quienes quieren ver todo el proceso de la IA detectando y reparando errores automaticamente y aprender de el, pero en general es lento y consume muchos Tokens. | Web-based    | Todo el proceso es largo; la IA ejecuta multiples pruebas automaticamente y repara errores.                                |
+| **[Trae](https://www.trae.ai/)**           | Para usuarios con experiencia en programacion que buscan la combinacion de IDE de escritorio + AI Agent; una herramienta poderosa para mejorar la eficiencia. | PC           | Requiere instalacion local y configuracion del entorno, pero mejor rendimiento; adecuado para proyectos de Vibe Coding a largo plazo.              |
+| **[V0](https://v0.app/)**                  | Optimizado para no desarrolladores que quieren crear rapidamente efectos visuales de React UI; adecuado para estudiantes orientados a frontend / diseno.  | Web-based    | Enfocado en generar React UI; necesita combinarse con otras plataformas para completar el backend y la construccion de la aplicacion completa.                  |
+---
+title: 'Comparacion de 7 herramientas de programacion con IA'
+description: 'Una evaluacion practica de plataformas Web de Vibe Coding con una tarea unificada, comparando facilidad para principiantes, control de codigo y despliegue.'
+---
diff --git a/docs/es-es/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/es-es/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..a7c9e7a
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,348 @@
+# Disenar un sitio web con Agent de diseno y programacion
+
+## Resumen del capitulo
+
+Este capitulo mostrara como el diseno y el desarrollo pueden colaborar perfectamente a traves de la IA. Tu asumiras el rol de product manager, dirigiendo al "Agent de diseno" para completar el diseno del logotipo, el esquema de colores y el layout de la pagina, y luego coordinando con el "Agent de programacion" para convertir los bocetos visuales en codigo ejecutable. Desde la concepcion creativa hasta la publicacion del sitio web, experimenta el flujo de desarrollo potenciado por IA de principio a fin, convirtiendo a una sola persona en todo un equipo.
+
+---
+
+# 1. Guia de inicio
+
+## 1. Introduccion al tutorial
+
+Vamos a usar un Agent de diseno de IA y un Agent de codificacion para construir un sitio web completo desde cero.
+
+- **Agent de diseno**: responsable de crear el logotipo, el layout de la pagina web, el esquema de colores y otros elementos visuales
+- **Agent de codificacion**: segun los requisitos y layout que definas en los prompts, escribe el codigo real como HTML/CSS/JS, construyendo un sitio web funcional
+
+## 2. Agent de diseno vs Agent de codificacion
+
+- **Agent de diseno**: IA que genera imagenes, mockups de pagina o estilos de diseno basandose en los prompts que le proporcionas.
+- Mastergo
+- Lovart
+- Figma MCP
+- **Agent de codificacion**: IA que escribe el codigo real (HTML/CSS/JS, etc.) basandose en las funcionalidades y layout que solicitas en tus prompts.
+- Z.AI
+- Trae
+- Cursor
+- Lovable
+
+---
+
+# 2. Crear un logotipo con el Agent de diseno
+
+## 1. Elementos clave a considerar al disenar un logotipo
+
+El logotipo es uno de los elementos clave que determinan la primera impresion de tu sitio web. Para obtener resultados satisfactorios del Agent de diseno de IA, necesitas describir claramente en tu prompt que tipo de logotipo deseas.
+
+1. **Nombre de marca / texto**
+
+- El texto que debe aparecer en el logotipo (por ejemplo: titulo del sitio web, nombre de la marca, etc.).
+
+2. **Estilo (estado de animo / atmosfera)**
+
+- La sensacion o atmosfera general que el logotipo debe transmitir.
+- _Ejemplos: minimalista, mono, limpio, moderno, retro, futurista, etc._
+
+3. **Esquema de colores** (opcional)
+
+- Es preferible que los colores del logotipo coincidan con el tono general del sitio web.
+- Puedes especificar codigos hexadecimales concretos o tonos generales (frios, calidos, etc.).
+- _Ejemplos: **`#171721`** (negro), **`#FF7130`** (naranja)._
+
+4. **Forma (figura / estructura)**
+
+- Define si el logotipo necesita una forma o composicion especifica.
+- _Ejemplos: texto dentro de un circulo, combinacion de icono + texto, logotipo centrado en un icono, etc._
+
+5. **Icono / elemento simbolico** (opcional)
+
+- Graficos o simbolos que deseas que aparezcan en el logotipo.
+- _Ejemplos: icono de libro, simbolo de rayo, graficos relacionados con IA, formas geometricas abstractas, etc._
+
+## 2. Escribir prompts para el diseno del logotipo
+
+**Ejemplo de prompt**
+
+```
+"Por favor disename un logotipo de estilo minimalista. El nombre de la marca es 'My First Website'.
+Usa negro (#171721) y naranja (#FF7130), y coloca el texto dentro de un circulo."
+```
+
+```
+"Por favor disena un logotipo con el nombre de marca 'AIID'.
+El estilo general debe ser futurista, limpio y simple, con azul y blanco como colores principales.
+Combina un grafico abstracto que simbolice la IA con el texto, y exportalo como PNG con fondo transparente."
+```
+
+## 3. Solicitar el diseno al Agent
+
+- Introduce el prompt anterior -> compara los multiples disenos generados por el Agent.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. Confirmar el logotipo final
+
+- Selecciona tu version favorita entre los borradores y descargala.
+
+---
+
+# 3. Planificar la estructura de tu sitio web
+
+## 1. Conocer las secciones basicas
+
+Antes de empezar realmente a crear el sitio web, es muy importante planificar que menus (secciones) incluir. El diseno de los menus depende de lo que quieras que vean los visitantes y que acciones deseas que realicen.
+Generalmente, un sitio web esta compuesto por secciones basicas como **Home / About / Contact**.
+
+## 2. Dibujar primero un esquema de estructura (opcional)
+
+Puedes escribir primero un esquema simple de la estructura de menus basandote en los objetivos del sitio web.
+
+### Menus basicos
+
+1. **Home**
+   1. La pagina principal que los visitantes ven al entrar al sitio web
+   2. Suele incluir el logotipo, un area visual principal y un lema o introduccion breve
+2. **About**
+   1. Presenta quien eres, o el proposito del proyecto / servicio
+   2. Portafolio personal: presentacion + breve curriculum
+   3. Sitio web de servicios: vision, objetivos y funcionalidades principales
+3. **Contact**
+   1. Informacion de contacto, como correo electronico, numero de telefono, enlaces a redes sociales, etc.
+   2. Tambien puedes anadir un formulario de contacto simple
+
+### Menus opcionales
+
+4. **Services / Projects**
+   1. Muestra los servicios que ofreces, o tus proyectos / portafolio
+   2. Generalmente presentados en formato de lista o tarjetas
+
+5. **Gallery**
+   1. Para mostrar imagenes, fotos o trabajos de diseno
+
+6. **Blog / News**
+   1. Para publicar articulos, actualizaciones o diarios
+
+7. **FAQ**
+   1. Recopila las preguntas frecuentes de los visitantes con sus respuestas
+
+## 3. Elegir un esquema de colores (opcional)
+
+Si ya tienes un logotipo, o quieres disenar el sitio web con una combinacion de colores especifica, puedes incluir directamente en tu prompt los codigos de color que deseas usar.
+
+**Ejemplo:** `#171721, #872B97, #FF7130, #FF3C68`
+
+Incluso si no se te ocurre un esquema de colores en este momento, puedes encontrar inspiracion a traves de sitios web de colores o buscando palabras clave.
+
+- **Sitios web de referencia de colores**
+  - https://colorhunt.co/
+  - https://coolors.co/
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+- **Buscar esquemas de colores en Google por palabras clave**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. Escribir el prompt para el diseno del sitio web
+
+**Ejemplo de prompt**
+
+```
+"Por favor disena un sitio web de una sola pagina compuesto por las secciones Home, About y Contact.
+Usa los colores #171721, #FF7130 y #FF3C68.
+El estilo general debe ser moderno y limpio."
+```
+
+---
+
+# 4. Disenar el sitio web con el Agent de diseno
+
+## 1. Introducir el prompt -> generar el diseno
+
+- Escribe en el prompt la estructura que has planificado y los colores que has seleccionado.
+
+**Ejemplo de prompt en Mastergo**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+## 2. Revisar el diseno y sugerir cambios
+
+Puedes proporcionar retroalimentacion al Agent segun tus necesidades, por ejemplo:
+
+- "Es demasiado recargado, simplifica el estilo general."
+- "Cambia la fuente."
+- "Ajusta la combinacion de colores."
+- "Elimina esta seccion de aqui."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
+
+## 3. Confirmar el diseno final
+
+Cuando hayas realizado multiples rondas de modificaciones al diseno y estes satisfecho, puedes convertir este diseno en codigo, para que el Agent de codificacion pueda entenderlo y continuar trabajando.
+
+La forma de convertir el diseno a codigo varia segun la plataforma, pero generalmente se hace instalando y usando ciertos plugins dentro de la plataforma de diseno.
+
+**Ejemplo con Mastergo**
+
+1. Abre el [sitio de plugins de Mastergo](https://mastergo.com/community/plugin) y busca **seal**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
+
+2. Vuelve a la pagina de diseno y haz clic en el **icono de cubo (plugin)**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
+
+3. Selecciona el area de diseno que deseas convertir a codigo y haz clic en el boton **Generate** para generar el codigo.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
+
+---
+
+# 5. Construir el sitio web con el Agent de codificacion
+
+## 1. Entender los conceptos basicos de HTML/CSS/JS
+
+Un sitio web esta esencialmente compuesto por tres lenguajes:
+
+- **HTML (HyperText Markup Language)** -> Estructura (esqueleto)
+- **CSS (Cascading Style Sheets)** -> Estilos (apariencia)
+- **JavaScript (JS)** -> Funcionalidad (interaccion)
+
+Estos tres trabajan juntos para formar la pagina web completa que vemos.
+
+1. **HTML (Estructura)**
+
+- Define "que se muestra" en la pagina
+- Se usa para colocar elementos como texto, imagenes, botones, enlaces, etc.
+- Es como los **muros y el armazon** de un edificio
+
+**Ejemplo**
+
+```html
+<h1>Hola!</h1>
+<p>Este es mi primer sitio web.</p>
+<a href="contact.html">Contacto</a>
+```
+
+2. **CSS (Estilos)**
+
+- Decide "como se muestra el contenido"
+- Controla el tamano del texto, colores, espaciado, fondo, forma de los botones, etc.
+- Le da a HTML su "ropa" y estilo visual
+
+**Ejemplo**
+
+```css
+h1 {
+  color: #FF7130;   /* Color del texto */
+  font-size: 36px;  /* Tamano de fuente */
+  text-align: center; /* Alineacion centrada */
+}
+
+body {
+  background-color: #171721; /* Color de fondo */
+  color: white; /* Color de texto predeterminado */
+}
+```
+
+3. **JavaScript (JS) (Funcionalidad)**
+
+- Permite que la pagina web interactue con el usuario
+- Puede implementar efectos dinamicos como clics de botones, menus desplegables, carruseles de imagenes, envio de formularios, etc.
+- Si HTML/CSS son el esqueleto y la apariencia estaticos, entonces JS es el **cerebro** que hace que la pagina web "cobrara vida"
+
+**Ejemplo**
+
+```javascript
+function showAlert() {
+  alert("Se ha hecho clic en el boton!");
+}
+```
+
+```html
+<button onclick="showAlert()">Haz clic en mi</button>
+```
+
+## 2. Dejar que el Agent de codificacion genere el codigo
+
+**Ejemplo de prompt**
+
+```
+"Por favor escribe HTML y CSS para un sitio web de una sola pagina con las secciones Home, About y Contact.
+Usa los colores #171721, #FF7130, #FF3C68.
+Fondo negro y texto blanco."
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
+
+## 3. Ejecutar el sitio web
+
+Cuando se ha generado el codigo borrador, el Agent generalmente inicia automaticamente el proyecto y muestra la pagina del sitio web generada.
+
+Si has reiniciado el Agent o la pagina del sitio web no aparece, puedes introducir un prompt como este:
+
+```
+"Please activate the project"
+```
+
+Para que el Agent reinicie el proyecto y abra la pagina de vista previa, facilitandote ver el efecto actual.
+
+## 4. Realizar modificaciones simples
+
+Puedes seguir ajustando el borrador mediante lenguaje natural, por ejemplo:
+
+- "Haz el boton mas grande."
+- "La fuente mas gruesa."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
+
+## 5. Modificar el contenido del texto del sitio web
+
+El sitio web de la version inicial generada por el Agent generalmente incluye algo de texto de marcador de posicion generado automaticamente. Para que se acerque mas a tu escenario real, puedes preparar el contenido real de antemano y luego pedirle al Agent que lo reemplace.
+
+**Ejemplo de aplicacion**: actualizar la pagina About del sitio web AIID
+
+1. Primero escribe el contenido que deseas mostrar en la pagina About. Para facilitar la comprension del Agent, puedes guardar el contenido en formato Markdown.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
+
+2. Luego dile al Agent en la conversacion que aplique el contenido del archivo a la pagina especificada.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
+
+3. Revisa la version actualizada despues de aplicar el contenido.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
+
+## 6. Insertar imagenes
+
+Si deseas anadir imagenes especificas (por ejemplo, logotipo, imagen de fondo, etc.), primero sube las imagenes a la carpeta del proyecto y luego indica en el prompt en que posicion de la pagina deseas usarlas.
+
+- **Ejemplo:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png)
+
+- **Resultado:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png)
+
+---
+
+# 6. Integrar diseno y codigo
+
+## 1. Integrar los archivos de diseno con el codigo del sitio web (opcional)
+
+Cuando hayas descargado los archivos de codigo del Agent de diseno, puedes moverlos al directorio del proyecto actual y luego pedirle al Agent de codificacion que te ayude a fusionar este codigo de diseno con el proyecto existente.
+
+- **Ejemplo:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png)
+
+- **Resultado:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
+---
+title: 'Construir un sitio con agentes de diseno y programacion'
+description: 'Del concepto al lanzamiento: coordina un agente de diseno para el visual y un agente de codigo para convertirlo en un sitio funcionando con un flujo reutilizable.'
+---
diff --git a/docs/es-es/stage-1/appendix-b-common-errors/index.md b/docs/es-es/stage-1/appendix-b-common-errors/index.md
new file mode 100644
index 0000000..957891c
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-b-common-errors/index.md
@@ -0,0 +1,325 @@
+---
+title: 'Qué hacer cuando encuentras errores al escribir código - Guía práctica para preguntar a la IA con capturas de pantalla'
+description: 'Aprende a preguntar eficientemente a la IA para resolver diversos errores de desarrollo, domina el flujo estándar de capturas de pantalla, descripción y localización de problemas, y convierte a la IA en tu asistente de depuración.'
+---
+
+<script setup>
+const duration = 'Aproximadamente <strong>30 minutos</strong>'
+</script>
+
+# Qué hacer cuando encuentras errores al escribir código
+
+## Resumen del capítulo
+
+<ChapterIntroduction :duration="duration" :tags="['Técnicas de depuración', 'Colaboración con IA', 'Resolución de problemas', 'Herramientas de desarrollo']" coreOutput="Un flujo estandarizado de resolución de errores" expectedOutput="Poder resolver independientemente el 90% de los errores comunes">
+
+En la era de la IA, la forma de resolver errores ha cambiado.
+
+No necesitas memorizar todos los tipos de errores, no necesitas ser un experto en depuración, ni siquiera necesitas entender qué significa el error.
+
+<strong>Solo necesitas aprender una cosa: cómo preguntar a la IA.</strong>
+
+Este capítulo te enseñará un flujo de resolución <strong>de lo simple a lo avanzado</strong>:
+
+1. <strong>Paso 1: Pregunta directamente</strong>: Describe el síntoma + captura de pantalla, una sola frase
+2. <strong>Paso 2: Complementa información</strong>: Si no se puede resolver, abre F12 y añade información clave
+
+Después de dominar este flujo, <strong>podrás resolver el 90% de los errores por tu cuenta</strong>.
+
+</ChapterIntroduction>
+
+::: info Nota
+Todos los métodos de este capítulo se basan en la experiencia real de uso de AI IDEs como Cursor/Trae/Claude, y pueden aplicarse directamente al desarrollo diario.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Preguntar directamente', description: 'Describe el síntoma + captura de pantalla' },
+      { title: 'Complementar información', description: 'Abre F12 para localizar el problema' },
+      { title: 'Iterar hasta resolver', description: 'Hasta que el problema se resuelva' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Método central: pregunta a la IA con capturas de pantalla
+
+::: warning ¿Por qué es importante este capítulo?
+
+La primera reacción de muchos principiantes al encontrar errores es:
+- Entrar en pánico y empezar a modificar código al azar
+- Pasar media hora buscando "cómo solucionar el error xxx"
+- Intentar entender qué significa el error por sí mismos
+- Depurar solo hasta altas horas de la noche
+
+<strong>Todo esto es perder el tiempo.</strong>
+
+En la era de la IA, la depuración se ha convertido en algo muy simple:
+
+```
+Ver error → Captura de pantalla → Pregunta a la IA → Haz lo que dice la IA
+```
+
+No necesitas entender el error, no necesitas saber depurar, ni siquiera necesitas saber dónde está el problema.
+
+<strong>Solo necesitas aprender cómo preguntar.</strong>
+
+:::
+
+### 1.1 La forma más simple de preguntar
+
+No necesitas plantillas complejas, elige entre dos métodos:
+
+**Método 1: Describe el síntoma**
+
+Formato: qué hiciste, qué apareció ahora
+
+```
+Acabo de modificar el código de la página de login y ahora la página está en blanco, ¿qué hago?
+```
+
+**Método 2: Captura de pantalla**
+
+Haz una captura de pantalla directamente de la página actual o del mensaje de error
+
+```
+[captura de pantalla]
+
+¿Cómo soluciono este error?
+```
+
+**El mejor método: Descripción + captura de pantalla**
+
+```
+Acabo de modificar el código de la página de login y ahora la página está en blanco.
+
+[captura de pantalla]
+
+¿Qué hago?
+```
+
+**Recuerda: describe claramente el contexto, añade una captura de pantalla, y la IA podrá ayudarte más rápido.**
+
+### 1.2 Cómo explicar el problema claramente
+
+Muchos principiantes saben que deben preguntar, pero no saben cómo expresarse. En realidad, solo necesitas explicar tres cosas:
+
+**1. Qué acabas de hacer**
+
+```
+Acabo de hacer clic en el botón guardar
+Acabo de modificar el código de la página de login
+Acabo de actualizar la página
+```
+
+**2. Qué ves ahora**
+
+```
+Ahora la página está en blanco
+Ahora el botón no responde al hacer clic
+Ahora muestra un mensaje de error
+```
+
+**3. Qué efecto quieres lograr**
+
+```
+Quiero que los datos se guarden correctamente
+Quiero que la página se muestre normalmente
+Quiero que aparezca un aviso después de hacer clic en el botón
+```
+
+**Ejemplo completo:**
+
+```
+Acabo de hacer clic en el botón guardar, y ahora la página muestra un error de "error al guardar".
+
+[captura de pantalla]
+
+Quiero que los datos del formulario se guarden correctamente en la base de datos, ¿qué debo hacer?
+```
+
+**Principios clave:**
+- Describe en lenguaje llano, sin terminología técnica
+- Sigue el orden cronológico: qué hiciste primero, qué pasó después
+- Expresa tu expectativa para que la IA sepa qué quieres
+
+## 2. Paso 1: Describe el síntoma directamente
+
+Cuando encuentres un problema, <strong>no te apresures a abrir F12</strong>. Primero describe el síntoma, haz una captura de pantalla de la página actual y pásasela a la IA.
+
+Muchas veces, la IA puede dar una solución directamente al ver la captura de pantalla.
+
+### 2.1 Cómo describir síntomas comunes
+
+::: tip Simplemente describe
+
+**Página en blanco**
+```
+La página se abre en blanco, ¿qué hago?
+
+[captura de pantalla]
+```
+
+**El botón no responde al hacer clic**
+```
+Al hacer clic en este botón no pasa nada, ayúdame a revisar.
+
+[captura de pantalla]
+```
+
+**Los datos no se guardan**
+```
+Hice clic en guardar, pero los datos no se guardaron, ¿qué hago?
+
+[captura de pantalla]
+```
+
+**El estilo no se muestra correctamente**
+```
+El botón está desalineado, ¿cómo lo ajusto?
+
+[captura de pantalla]
+```
+
+**Error en la API**
+```
+La llamada a la API da error, ayúdame a revisar.
+
+[captura de pantalla]
+```
+
+:::
+
+### 2.2 Si la IA lo resuelve directamente
+
+¡Felicidades, problema resuelto! Simplemente haz las modificaciones que indica la IA.
+
+### 2.3 Si la IA dice "necesito más información"
+
+Entonces es cuando necesitas abrir F12 y complementar información clave. Sigue leyendo.
+
+## 3. Paso 2: Complementa información clave
+
+Cuando la IA dice que necesita más información, según el tipo de problema, abre F12 y captura el contenido correspondiente.
+
+### 3.1 Cuándo necesitas complementar información
+
+La IA podría responder así:
+- "Por favor, abre la Console a ver si hay errores"
+- "Haz una captura de pantalla del panel Network"
+- "Necesito ver el mensaje de error específico"
+
+En ese caso, sigue las indicaciones de abajo para complementar las capturas.
+
+### 3.2 Complementar información de Console (página en blanco/errores)
+
+::: tip Pasos
+
+**Paso 1: Presiona F12 para abrir las herramientas de desarrollo**
+
+En Mac es `Cmd+Option+I`, o haz clic derecho en la página y selecciona "Inspeccionar".
+
+**Paso 2: Cambia a la pestaña Console**
+
+**Paso 3: Haz una captura de pantalla de los errores en rojo**
+
+**Paso 4: Envíalo a la IA**
+
+```
+Los errores de Console son los siguientes:
+
+[captura de pantalla]
+```
+
+:::
+
+### 3.3 Complementar información de Network (problemas de datos/errores de API)
+
+::: tip Pasos
+
+**Paso 1: Presiona F12 para abrir las herramientas de desarrollo**
+
+**Paso 2: Cambia a la pestaña Network**
+
+**Paso 3: Repite la operación** (haz clic en guardar/actualiza la página)
+
+**Paso 4: Encuentra la petición correspondiente y haz una captura de pantalla**
+
+- Mira la URL y el código de estado
+- Mira el Payload (parámetros enviados)
+- Mira el Response (resultado devuelto)
+
+**Paso 5: Envíalo a la IA**
+
+```
+La información de Network es la siguiente:
+
+Petición: [captura 1]
+Parámetros: [captura 2]
+Respuesta: [captura 3]
+```
+
+:::
+
+### 3.4 Complementar información de Elements (problemas de estilos)
+
+::: tip Pasos
+
+**Paso 1: Clic derecho en el elemento → "Inspeccionar"**
+
+Las herramientas de desarrollo se posicionarán automáticamente en ese elemento.
+
+**Paso 2: Haz una captura de pantalla del panel Styles**
+
+**Paso 3: Envíalo a la IA**
+
+```
+Los estilos del elemento son los siguientes:
+
+[captura de pantalla]
+```
+
+:::
+
+## 4. Paso 3: Itera hasta resolver
+
+### 4.1 Lo que NO debes hacer
+
+Estas acciones harán que pierdas tiempo:
+
+Entrar en pánico al ver un error y empezar a modificar código al azar
+Pasar media hora buscando soluciones de errores
+Intentar entender el significado de cada error por tu cuenta
+Depurar solo hasta altas horas de la noche
+
+### 4.2 Lo que SÍ debes hacer
+
+Sigue este flujo:
+
+Primero describe el síntoma y haz una captura de pantalla para preguntar
+Cuando la IA diga que necesita más información, abre F12 y complementa
+Modifica el código según las sugerencias
+Después de modificar, prueba; si el problema persiste, sigue haciendo capturas y preguntando
+
+## 5. Resumen: Flujo completo
+
+```
+Encuentras un problema
+    ↓
+Describe el síntoma directamente + captura de pantalla
+    ↓
+Pásalo a la IA: "¿Qué hago?"
+    ↓
+¿La IA lo resolvió directamente?
+    ↓ Sí
+Haz lo que dice la IA
+    ↓
+Prueba si se resolvió
+    ↓
+    ↓ No / La IA necesita más información
+Abre F12 y complementa información clave
+    ↓
+Envíalo de nuevo a la IA
+    ↓
+Repite hasta resolver
+```
diff --git a/docs/es-es/stage-1/appendix-c-consumer-scenarios/index.md b/docs/es-es/stage-1/appendix-c-consumer-scenarios/index.md
new file mode 100644
index 0000000..b41c351
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-c-consumer-scenarios/index.md
@@ -0,0 +1,642 @@
+---
+title: 'Referencia de inspiracion para escenarios de consumo B2C'
+description: 'Una coleccion de direcciones creativas de aplicacion de modelos LLM en escenarios de consumo B2C, cubriendo estilo de vida, compania emocional, entretenimiento y mas.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'aprox. <strong>4 horas</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// Pool de temas por escenario: énfasis en sensación, ambiente y sugestión psicológica
+const topicPool = {
+  'lifestyle': [
+    { title: 'Asistente de despertar con ritual matutino', desc: 'Genera rituales matutinos según clima, agenda y ánimo para empezar bien cada día' },
+    { title: 'Creador de ambiente para vivir solo', desc: 'Diseña ambientes domésticos para quienes viven solos, con sugerencias de luz, música y aromas' },
+    { title: 'Generador de planes reparadores de fin de semana en casa', desc: 'Recomienda la combinación perfecta según el ánimo: película + snacks + ambientación' },
+    { title: 'Radio calmante antes de dormir', desc: 'Genera historias suaves y meditaciones guiadas como una radio privada para conciliar el sueño' },
+    { title: 'Capturador de inspiración estética cotidiana', desc: 'Descubre belleza en lo cotidiano y genera sugerencias estéticas con sentido de ritual' }
+  ],
+  'emotion': [
+    { title: 'Confidente nocturno', desc: 'Un espacio emocional disponible 24 horas, sin juicio, para recibir cualquier preocupación' },
+    { title: 'Acompañante para sanar una ruptura', desc: 'Ofrece compañía amable, consejos de recuperación y salida emocional durante una ruptura' },
+    { title: 'Coach de respiración contra la ansiedad', desc: 'Percibe la ansiedad y guía ejercicios de respiración y mindfulness' },
+    { title: 'Mentor para reconstruir la confianza', desc: 'Ayuda a reconstruir identidad y valor personal con diálogo positivo y sugestión psicológica' },
+    { title: 'Interpretación inteligente del diario emocional', desc: 'Analiza diarios emocionales, encuentra patrones y ofrece ideas y consejos cálidos' }
+  ],
+  'entertainment': [
+    { title: 'DM inmersivo para juegos de misterio', desc: 'Actúa como anfitrión, crea suspense y hace avanzar la trama' },
+    { title: 'NPC con alma en juegos de mundo abierto', desc: 'NPC con personalidad que recuerda historias del jugador y genera vínculos emocionales reales' },
+    { title: 'Generación de podcasts personalizados', desc: 'Genera podcasts exclusivos según intereses, con naturalidad de conversación entre amigos' },
+    { title: 'Equipo de ambiente para concierto virtual', desc: 'Crea sensación de directo en conciertos online con interacción, apoyo y ambiente en tiempo real' },
+    { title: 'Compañero de cocreación de novela interactiva', desc: 'Crea historias junto con lectores; cada elección cambia el rumbo del mundo' }
+  ],
+  'growth': [
+    { title: 'Testigo del crecimiento personal', desc: 'Registra la trayectoria de crecimiento y ofrece ánimo y revisión en hitos importantes' },
+    { title: 'Coach gamificado de hábitos', desc: 'Convierte la formación de hábitos en una aventura divertida' },
+    { title: 'Emparejador de compañeros para aprender habilidades', desc: 'Encuentra compañeros afines para supervisarse y compartir avances' },
+    { title: 'Descubridor diario de pequeñas alegrías', desc: 'Ayuda a descubrir pequeños momentos bellos y cultivar gratitud y optimismo' },
+    { title: 'Simulador de experiencias de vida', desc: 'Simula decisiones vitales y explora posibilidades de vidas paralelas' }
+  ],
+  'social': [
+    { title: 'Generador de temas rompehielos', desc: 'Ofrece temas interesantes en situaciones sociales para reducir incomodidad y acercar personas' },
+    { title: 'Redactor de ambiente para publicaciones sociales', desc: 'Genera textos con estilo según fotos y estado de ánimo' },
+    { title: 'Planificador de ambiente para citas', desc: 'Diseña una experiencia completa de cita: lugar, conversación y sorpresa' },
+    { title: 'Animador de reuniones remotas', desc: 'Activa reuniones online con juegos e interacción guiada' },
+    { title: 'Asistente de gestión de energía social', desc: 'Ayuda a personas introvertidas a gestionar energía y encontrar un ritmo social cómodo' }
+  ],
+  'creative': [
+    { title: 'Kit de emergencia contra el bloqueo creativo', desc: 'Aporta chispas inesperadas cuando aparece el bloqueo creativo' },
+    { title: 'Guía de exploración del estilo personal', desc: 'Ayuda a descubrir un estilo propio, desde la ropa hasta la expresión' },
+    { title: 'Asesor estético para journaling y diarios', desc: 'Sugiere maquetación, paletas y contenido creativo para diarios' },
+    { title: 'Guía de composición y ambiente fotográfico', desc: 'Ofrece consejos de foto y edición según escena y sensación buscada' },
+    { title: 'Emparejador de música y estado de ánimo', desc: 'Recomienda la combinación musical perfecta según ánimo y contexto' }
+  ],
+  'travel': [
+    { title: 'Guía para paseos urbanos', desc: 'Explora la ciudad como una persona local y descubre lugares ocultos' },
+    { title: 'Generador de diario emocional de viaje', desc: 'Convierte fotos y emociones de viaje en relatos y recuerdos bellos' },
+    { title: 'Acompañante para viajar en solitario', desc: 'Ofrece compañía, consejos y seguridad para viajar solo' },
+    { title: 'Vista previa del ambiente del destino', desc: 'Permite sentir el destino antes de salir y entrar en ambiente' },
+    { title: 'Guía de ambiente para fotografía de viaje', desc: 'Ayuda a tomar fotos con historia según escena y luz' }
+  ],
+  'health': [
+    { title: 'Activador de motivación deportiva', desc: 'Da el empujón justo cuando no apetece moverse' },
+    { title: 'Cocina de inspiración saludable', desc: 'Genera recetas saludables y reparadoras según ánimo e ingredientes' },
+    { title: 'Optimizador de ambiente para dormir mejor', desc: 'Crea un entorno de sueño de calidad desde lo ambiental hasta lo psicológico' },
+    { title: 'Guía de conciencia corporal', desc: 'Guía la atención hacia señales del cuerpo y fortalece la conexión cuerpo-mente' },
+    { title: 'Recordatorio de autocuidado', desc: 'Recuerda detenerse y cuidarse en medio del ajetreo' }
+  ],
+  'learning': [
+    { title: 'Guía gamificada de exploración del conocimiento', desc: 'Convierte el aprendizaje aburrido en una aventura de exploración' },
+    { title: 'Compañero situacional para aprender idiomas', desc: 'Interpreta roles distintos para aprender idioma de forma natural en diálogos' },
+    { title: 'Asistente para satisfacer la curiosidad', desc: 'Responde ideas curiosas y alimenta la curiosidad por el mundo' },
+    { title: 'Inspirador de notas de lectura', desc: 'Ayuda a ordenar reflexiones de lectura y encontrar nuevos ángulos' },
+    { title: 'Creador de ambiente para compartir conocimiento', desc: 'Convierte lo aprendido en contenido interesante para compartir' }
+  ],
+  'relationship': [
+    { title: 'Coach de comunicación para relaciones íntimas', desc: 'Ayuda a expresar emociones difíciles y mejorar relaciones cercanas' },
+    { title: 'Asistente de cuidado familiar', desc: 'Recuerda cuidar a la familia y ofrece sugerencias de interacción cálida' },
+    { title: 'Creador de ambiente para mantener amistades', desc: 'Ayuda a sostener amistades a distancia y crear temas comunes' },
+    { title: 'Planificador de confesiones y sorpresas', desc: 'Diseña sorpresas y momentos románticos memorables para personas importantes' },
+    { title: 'Guía para suavizar conflictos', desc: 'Ofrece consejos y frases para aliviar tensiones relacionales' }
+  ],
+  'pet': [
+    { title: 'Diario antropomórfico de mascotas', desc: 'Genera diarios desde la perspectiva de la mascota y registra momentos cálidos' },
+    { title: 'Intérprete del comportamiento animal', desc: 'Interpreta lenguaje conductual y profundiza el vínculo con la mascota' },
+    { title: 'Planificador de tiempo de calidad con mascotas', desc: 'Diseña actividades creativas para interactuar y fortalecer el afecto' },
+    { title: 'Generador de historias conmemorativas de mascotas', desc: 'Convierte fotos y recuerdos de la mascota en historias cálidas' },
+    { title: 'Guía tranquila para nuevos cuidadores', desc: 'Ofrece compañía y orientación amable a nuevos dueños de mascotas' }
+  ],
+  'finance': [
+    { title: 'Asistente de conciencia emocional del consumo', desc: 'Detecta emociones detrás de compras impulsivas y construye una visión saludable del consumo' },
+    { title: 'Motivación visual para metas de ahorro', desc: 'Convierte metas de ahorro en progreso visual hacia sueños' },
+    { title: 'Aprendizaje ligero de finanzas personales', desc: 'Enseña finanzas de manera ligera y entretenida' },
+    { title: 'Aliviador de ansiedad financiera', desc: 'Ofrece apoyo emocional y consejos prácticos ante presión financiera' },
+    { title: 'Juego de inversión de bajo monto', desc: 'Permite experimentar la inversión de forma gamificada y con menor barrera de entrada' }
+  ],
+  'career': [
+    { title: 'Acompañante para la confusión profesional', desc: 'Escucha, explora y orienta durante etapas de duda profesional' },
+    { title: 'Activador de sentido de logro laboral', desc: 'Ayuda a descubrir valor y sentido en el trabajo y reavivar entusiasmo' },
+    { title: 'Asistente de ambiente social en el trabajo', desc: 'Propone temas ligeros y consejos de interacción para el entorno laboral' },
+    { title: 'Generador de inspiración para proyectos paralelos', desc: 'Activa ideas de side projects según intereses y habilidades' },
+    { title: 'Estación de confianza antes de entrevistas', desc: 'Ofrece preparación psicológica y ánimo antes de entrevistas' }
+  ],
+  'home': [
+    { title: 'Diseñador de ambiente para el hogar', desc: 'Diseña ambientes domésticos según estado de ánimo y estación' },
+    { title: 'Guía de transformación estacional del hogar', desc: 'Renueva la decoración por temporada para mantener frescura' },
+    { title: 'Magia para espacios pequeños', desc: 'Hace que los espacios pequeños se sientan cómodos y cálidos' },
+    { title: 'Creador de rituales domésticos', desc: 'Crea rituales para actividades cotidianas del hogar' },
+    { title: 'Acompañamiento psicológico para decluttering', desc: 'Ofrece apoyo psicológico y consejos de decisión al ordenar objetos' }
+  ],
+  'food': [
+    { title: 'Cocina reparadora para comer a solas', desc: 'Diseña comidas sencillas y reconfortantes para quienes viven solos' },
+    { title: 'Diseño de ambiente para mesas festivas', desc: 'Diseña mesas con ritual para días especiales' },
+    { title: 'Emparejador de cocina y estado de ánimo', desc: 'Recomienda alimentos y preparaciones según el ánimo actual' },
+    { title: 'Generador de confianza para principiantes en cocina', desc: 'Ofrece ánimo cálido y recetas sencillas a quienes empiezan desde cero' },
+    { title: 'Guía de ambiente para fotografía gastronómica', desc: 'Hace que la comida casera también se vea apetecible en fotos' }
+  ],
+  'fashion': [
+    { title: 'Mood board del outfit de hoy', desc: 'Genera inspiración de vestimenta según clima, ocasión y ánimo' },
+    { title: 'Estilista de armario cápsula', desc: 'Crea infinitas combinaciones con prendas limitadas' },
+    { title: 'Viaje de exploración del estilo personal', desc: 'Ayuda a descubrir y construir un estilo personal único' },
+    { title: 'Creativo para reinventar ropa antigua', desc: 'Da nueva inspiración para combinar ropa antigua' },
+    { title: 'Asesor de look para ocasiones especiales', desc: 'Diseña looks que den confianza para momentos importantes' }
+  ]
+}
+
+// Mapa predefinido de recomendaciones según ambiente y sensación
+const recommendationMap = {
+  // Ambiente: reparador
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiente: crecimiento
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiente: social
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // Ambiente: exploración
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiente: cotidiano
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'Reparador', value: 'healing', desc: 'Cálido, calmante, sanador' },
+  { label: 'Crecimiento', value: 'growth', desc: 'Progreso, avance, transformación' },
+  { label: 'Social', value: 'social', desc: 'Conexión, compartir, interacción' },
+  { label: 'Exploración', value: 'explore', desc: 'Curiosidad, aventura, descubrimiento' },
+  { label: 'Cotidiano', value: 'daily', desc: 'Sencillo, real, presente' }
+]
+
+const feelingOptions = [
+  { label: 'Quiero relajarme', value: 'relax', desc: 'Aliviar presión, despejar la mente' },
+  { label: 'Busco inspiración', value: 'inspire', desc: 'Activar creatividad, encontrar ideas' },
+  { label: 'Deseo conexión', value: 'connect', desc: 'Conectar con personas, resonar emocionalmente' },
+  { label: 'Escapar por un momento', value: 'escape', desc: 'Salir de la realidad, vivir inmersión' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'Estilo de vida', anchor: '#_1-estilo-de-vida' },
+  { key: 'emotion', name: 'Acompañamiento emocional', anchor: '#_2-acompañamiento-emocional' },
+  { key: 'entertainment', name: 'Entretenimiento y ocio', anchor: '#_3-entretenimiento-y-ocio' },
+  { key: 'growth', name: 'Crecimiento personal', anchor: '#_4-crecimiento-personal' },
+  { key: 'social', name: 'Interacción social', anchor: '#_5-interacción-social' },
+  { key: 'creative', name: 'Expresión creativa', anchor: '#_6-expresión-creativa' },
+  { key: 'travel', name: 'Exploración de viajes', anchor: '#_7-exploración-de-viajes' },
+  { key: 'health', name: 'Salud física y mental', anchor: '#_8-salud-física-y-mental' },
+  { key: 'learning', name: 'Exploración del conocimiento', anchor: '#_9-exploración-del-conocimiento' },
+  { key: 'relationship', name: 'Gestión de relaciones', anchor: '#_10-gestión-de-relaciones' },
+  { key: 'pet', name: 'Acompañamiento de mascotas', anchor: '#_11-acompañamiento-de-mascotas' },
+  { key: 'finance', name: 'Salud financiera', anchor: '#_12-salud-financiera' },
+  { key: 'career', name: 'Desarrollo profesional', anchor: '#_13-desarrollo-profesional' },
+  { key: 'home', name: 'Espacio del hogar', anchor: '#_14-espacio-del-hogar' },
+  { key: 'food', name: 'Cocina y gastronomía', anchor: '#_15-cocina-y-gastronomía' },
+  { key: 'fashion', name: 'Estilo y vestimenta', anchor: '#_16-estilo-y-vestimenta' }
+]
+
+// Calcula recomendaciones tomando elementos aleatorios del pool de temas
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // Toma aleatoriamente 1-2 temas de cada escenario recomendado
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // Toma aleatoriamente 1-2 temas
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // Orden aleatorio y límite total
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Obtiene la descripción de la selección actual
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // Retrasa el desplazamiento para asegurar que el DOM esté actualizado
+  setTimeout(() => {
+    // Intenta buscar por ID (soporta varios formatos)
+    let element = document.querySelector(anchor)
+    
+    // Si no se encuentra, prueba otros formatos posibles
+    if (!element) {
+      // Intenta quitar el prefijo de guion bajo
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // Si aún no se encuentra, busca por texto del encabezado
+    if (!element) {
+      // Extrae el nombre del escenario desde el ancla
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // Coincidencia exacta o parcial
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // Resalta el bloque de destino
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# Referencia de inspiración para escenarios de consumo B2C
+
+## Introducción del capítulo
+
+<ChapterIntroduction :duration="duration" :tags="['Aplicaciones B2C', 'Estilo de vida', 'Experiencia emocional', 'Creación de ambiente']" coreOutput="Descubrir más de 15 inspiraciones de escenarios de vida" expectedOutput="Encontrar una dirección de producto que emocione a los usuarios">
+
+Este documento resume <strong>direcciones creativas de aplicación de modelos LLM en escenarios de consumo B2C</strong>. A diferencia de los productos B2B, que se centran en eficiencia y puntos de dolor, los productos B2C se enfocan más en <strong>crear sensaciones, sugestiones psicológicas y ambiente</strong>, para que el usuario obtenga resonancia emocional y una experiencia agradable.
+
+</ChapterIntroduction>
+
+## Selección rápida de ambiente
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Encuentra la inspiración que te toca</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Elige el ambiente que quieres y tu sensación actual. El sistema recomendará escenarios relacionados; haz clic en una etiqueta para saltar a la sección correspondiente.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="Elige tipo de ambiente" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="Elige tu sensación actual" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      Escenarios recomendados para {{ currentSelection.vibe }} × {{ currentSelection.feeling }}:
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      Elegir de nuevo
+    </el-button>
+  </div>
+</el-card>
+
+---
+
+## 1. Estilo de vida
+
+> 💡 **Idea central**: convertir la rutina cotidiana en una experiencia con rituales y crear belleza en los detalles
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Asistente de despertar con ritual matutino | Integra API de clima y datos de calendario; un LLM genera planes matutinos personalizados; reproduce música a medida con altavoces inteligentes y enciende las luces gradualmente |
+| 2 | Creador de ambiente para vivir solo | Se conecta a dispositivos de hogar inteligente (luces, audio, difusor); el LLM ajusta parámetros según la hora y el estado de ánimo; aprende preferencias para optimizar continuamente |
+| 3 | Generador de planes reparadores para quedarse en casa el fin de semana | Se conecta a APIs de streaming para obtener listas de contenido y combina historial de preferencias para proponer película + comida + ambientación |
+| 4 | Radio calmante antes de dormir | Usa TTS para generar historias suaves, mezcla ruido blanco y reduce el volumen gradualmente; ajusta el contenido según datos de sueño |
+| 5 | Capturador de inspiración estética cotidiana | Analiza fotos del entorno mediante reconocimiento de imagen, genera sugerencias estéticas con LLM y recomienda contenido al estilo Pinterest/Xiaohongshu |
+
+---
+
+## 2. Acompañamiento emocional
+
+> 💡 **Idea central**: aceptación y compañía incondicionales, como un contenedor amable para las emociones
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Confidente nocturno | Cifrado de extremo a extremo para proteger la privacidad; análisis emocional con LLM; memoria de largo plazo para guardar historias del usuario y acompañamiento en diálogos continuos |
+| 2 | Acompañante para sanar una ruptura | Algoritmo de identificación de etapas emocionales; apoyo por fases (desahogo → descarga → reconstrucción); recuperación RAG sobre una base de conocimiento psicológica |
+| 3 | Coach de respiración contra la ansiedad | Entrada de datos de biosensores (ritmo cardiaco/respiración), monitoreo en tiempo real del nivel de ansiedad, guía de respiración por voz y relajación muscular progresiva |
+| 4 | Mentor para reconstruir la confianza | Marco conversacional de psicología positiva; registro y retroalimentación sobre pequeños logros; técnicas de reestructuración cognitiva para cambiar el diálogo interno negativo |
+| 5 | Interpretación inteligente del diario emocional | Modelo NLP de reconocimiento emocional, análisis de series temporales para detectar patrones; visualización del mapa emocional y alertas predictivas |
+
+---
+
+## 3. Entretenimiento y ocio
+
+> 💡 **Idea central**: crear experiencias inmersivas para que el entretenimiento sea un refugio emocional
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | DM inmersivo para juegos de misterio | El LLM genera ramificaciones de trama en tiempo real, usa síntesis de voz para interpretar NPC, ajusta dificultad y ritmo según la reacción de los jugadores; renderizado de escenas AR/VR |
+| 2 | NPC con alma en juegos de mundo abierto | Base de datos de memoria a largo plazo para historial de interacción; diálogos personalizados con LLM; computación afectiva para respuestas emocionales creíbles |
+| 3 | Generación de podcasts personalizados | Crea contenido exclusivo según el grafo de intereses del usuario; TTS clona voces preferidas; interacción en tiempo real para responder preguntas de oyentes |
+| 4 | Equipo de ambiente para concierto virtual | Renderizado de avatares, interacción en tiempo real con mensajes, varitas luminosas y objetos de apoyo virtuales; audio espacial para sensación de presencia |
+| 5 | Compañero de cocreación de novela interactiva | El LLM genera trama en tiempo real; las elecciones del usuario cambian la historia; múltiples finales y relaciones dinámicas entre personajes |
+
+---
+
+## 4. Crecimiento personal
+
+> 💡 **Idea central**: crecer no es una penitencia, sino un viaje interesante de autodescubrimiento
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Testigo del crecimiento personal | Línea de tiempo visual para mostrar el progreso; marcado automático de hitos; comparativas de "mi yo de antes" frente a "mi yo actual" |
+| 2 | Coach gamificado de hábitos | Mecánicas de juego (experiencia, niveles, insignias), clasificaciones sociales y coach de IA con rol narrativo, por ejemplo "mentor de aventuras" |
+| 3 | Emparejador de compañeros para aprender habilidades | Algoritmo de matching por intereses y metas de aprendizaje, comunidades de grupos de estudio y mecanismo de registro con supervisión mutua |
+| 4 | Descubridor diario de pequeñas alegrías | Reconocimiento de imágenes para encontrar momentos bonitos; guía de gratitude journal; revisión semanal de momentos positivos |
+| 5 | Simulador de experiencias de vida | Simula resultados de decisiones con tramas ramificadas, compara vidas paralelas y visualiza consecuencias |
+
+---
+
+## 5. Interacción social
+
+> 💡 **Idea central**: hacer que socializar sea ligero y natural, encontrando formas cómodas de conexión
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Generador de temas rompehielos | Recomendación inteligente de temas según ocasión y participantes; análisis de conversación en tiempo real para sugerir continuidad; rescate en momentos incómodos |
+| 2 | Redactor de ambiente para publicaciones sociales | Análisis de imágenes, textos en varios estilos con LLM (artístico/humorístico/profundo); recomendación inteligente de emojis y maquetación |
+| 3 | Planificador de ambiente para citas | Genera planes de cita según intereses de ambas partes; recomienda restaurantes/actividades y temas de conversación; alertas de clima y tráfico |
+| 4 | Animador de reuniones remotas | Biblioteca de juegos online, generador de actividades rompehielos, ruleta de temas; fondos virtuales y filtros para reforzar el ambiente |
+| 5 | Asistente de gestión de energía social | Evalúa el desgaste tras actividades sociales, sugiere recuperación (actividades en solitario) y planifica inteligentemente el calendario social |
+
+---
+
+## 6. Expresión creativa
+
+> 💡 **Idea central**: todas las personas tienen creatividad; solo necesita despertarse
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Kit de emergencia contra el bloqueo creativo | Algoritmo de asociaciones entre dominios, generación de estímulos aleatorios, biblioteca de prompts creativos y herramienta de expansión tipo mapa mental |
+| 2 | Guía de exploración del estilo personal | Análisis de imagen para reconocer el estilo actual; recomendaciones de tendencias; prueba virtual de ropa/maquillaje; línea de evolución del estilo |
+| 3 | Asesor estético para journaling y diarios | Recomendación de plantillas de maquetación, generación de paletas, sugerencias decorativas, reconocimiento de escritura manual y embellecimiento de contenido |
+| 4 | Guía de composición y ambiente fotográfico | Reconocimiento de escena, sugerencias de composición, filtros recomendados, ajuste inteligente de parámetros de edición y ruta de aprendizaje fotográfico |
+| 5 | Emparejador de música y estado de ánimo | Análisis emocional de música, detección del estado de ánimo, listas personalizadas e historias/contexto de las canciones |
+
+---
+
+## 7. Exploración de viajes
+
+> 💡 **Idea central**: viajar no es solo ver paisajes, sino sentir distintas formas de vida
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Guía para paseos urbanos | Agrega contenido de expertos locales, recomienda lugares poco conocidos, ofrece navegación AR, traducción en tiempo real y explicación por voz |
+| 2 | Generador de diario emocional de viaje | Clasifica y selecciona fotos automáticamente, genera relatos de viaje con LLM, marca ubicaciones en una línea de tiempo y crea videos con un clic |
+| 3 | Acompañante para viajar en solitario | Compartición de ubicación en tiempo real, alertas de seguridad, contactos de emergencia locales, guía de IA por voz y comunidad para viajeros solos |
+| 4 | Vista previa del ambiente del destino | Panoramas VR/360°, simulación de sonidos y aromas locales, contexto cultural y experiencia virtual de "probar vivir allí" |
+| 5 | Guía de ambiente para fotografía de viaje | Recordatorios de hora dorada, líneas de composición, puntos fotográficos locales y sugerencias de color grading |
+
+---
+
+## 8. Salud física y mental
+
+> 💡 **Idea central**: la salud no es una meta, sino una forma amable de cuidarse
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Activador de motivación deportiva | Recomienda tipos de ejercicio según el estado del usuario, ofrece microejercicios de 5 minutos, retos gamificados y registro social de actividad |
+| 2 | Cocina de inspiración saludable | Reconocimiento de ingredientes en la nevera, recetas personalizadas, análisis nutricional y guía de cocina paso a paso |
+| 3 | Optimizador de ambiente para dormir mejor | Analiza datos de sueño, genera rituales nocturnos, sugiere mejoras ambientales (temperatura/humedad/luz) y ofrece despertar inteligente |
+| 4 | Guía de conciencia corporal | Meditación de escaneo corporal, relación entre emociones y partes del cuerpo, ejercicios de conexión cuerpo-mente y visualización de biofeedback |
+| 5 | Recordatorio de autocuidado | Monitorea intensidad de trabajo, recuerda descansos, sugiere microcuidados (beber agua/estirar/respirar) y registra autocuidado |
+
+---
+
+## 9. Exploración del conocimiento
+
+> 💡 **Idea central**: aprender es una aventura interminable, y la curiosidad es la mejor maestra
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Guía gamificada de exploración del conocimiento | Visualiza mapas de conceptos, rutas de aprendizaje por niveles, sistema de insignias y mentor de IA con rol narrativo |
+| 2 | Compañero situacional para aprender idiomas | El LLM interpreta distintos roles en conversaciones, corrige pronunciación, explica contexto cultural y simula situaciones inmersivas |
+| 3 | Asistente para satisfacer la curiosidad | Conexión a Wikipedia/grafos de conocimiento, explicación simple de conceptos complejos, recomendaciones relacionadas y registro de curiosidades |
+| 4 | Inspirador de notas de lectura | Analiza libros, extrae y relaciona ideas, recomienda ángulos de reflexión, plantillas y embellecimiento de notas |
+| 5 | Creador de ambiente para compartir conocimiento | Genera tarjetas de conocimiento, optimiza copy para compartir, mejora visuales y ofrece retroalimentación de datos sociales |
+
+---
+
+## 10. Gestión de relaciones
+
+> 💡 **Idea central**: las buenas relaciones requieren atención, y atenderlas no tiene por qué ser complicado
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Coach de comunicación para relaciones íntimas | Genera plantillas de expresión emocional, guía comunicación no violenta, ofrece frases para resolver conflictos y evalúa salud relacional |
+| 2 | Asistente de cuidado familiar | Recordatorios de fechas importantes (cumpleaños/aniversarios), sugerencias de mensajes afectivos, actividades familiares y creación de álbum familiar |
+| 3 | Creador de ambiente para mantener amistades | Registro de interacciones con amigos, temas comunes recomendados, organización de reuniones remotas y generación de línea de tiempo de recuerdos |
+| 4 | Planificador de confesiones y sorpresas | Genera planes personalizados de sorpresa, recomienda regalos, sugiere frases románticas, cronograma y recordatorios |
+| 5 | Guía para suavizar conflictos | Frases para bajar la intensidad emocional, guía para ponerse en el lugar del otro, pasos de reconciliación y seguimiento de reparación |
+
+---
+
+## 11. Acompañamiento de mascotas
+
+> 💡 **Idea central**: las mascotas son familia, y su compañía merece ser registrada y valorada
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Diario antropomórfico de mascotas | Analiza comportamiento, genera diarios en primera persona, añade imágenes automáticamente y crea un "muro social" para la mascota |
+| 2 | Intérprete del comportamiento animal | Analiza videos de comportamiento, alerta sobre salud, ofrece consejos de entrenamiento y base de conocimiento por raza |
+| 3 | Planificador de tiempo de calidad con mascotas | Recomienda actividades, tutoriales de juguetes DIY, lugares pet-friendly y matching social para mascotas |
+| 4 | Generador de historias conmemorativas de mascotas | Selecciona fotos y videos, genera historias en línea de tiempo, añade música y crea álbumes/videos conmemorativos automáticamente |
+| 5 | Guía tranquila para nuevos cuidadores | Guía de cuidado por etapas, respuestas a problemas frecuentes, manejo de emergencias y comunidad de apoyo para principiantes |
+
+---
+
+## 12. Salud financiera
+
+> 💡 **Idea central**: la libertad financiera no es el objetivo; la salud financiera sí
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Asistente de conciencia emocional del consumo | Analiza registros de gasto, relaciona emociones y consumo, alerta sobre compras impulsivas y propone satisfacciones alternativas |
+| 2 | Motivación visual para metas de ahorro | Visualiza progreso, renderiza escenas de sueños, celebra hitos y gamifica el hábito de ahorrar |
+| 3 | Aprendizaje ligero de finanzas personales | Entrega conocimiento fragmentado, casos situacionales, preguntas interactivas, pruebas y certificados |
+| 4 | Aliviador de ansiedad financiera | Evalúa salud financiera, ofrece técnicas de gestión del estrés, planes de pequeños pasos y apoyo psicológico financiero |
+| 5 | Juego de inversión de bajo monto | Simulación de inversión virtual, educación de riesgos, juego de portafolio y guía hacia inversión real de bajo monto |
+
+---
+
+## 13. Desarrollo profesional
+
+> 💡 **Idea central**: la carrera profesional no es una vía fija, sino un territorio abierto para explorar
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Acompañante para la confusión profesional | Evaluación de intereses, inventario de habilidades, recomendaciones de información sectorial y conversaciones con mentor profesional |
+| 2 | Activador de sentido de logro laboral | Registro de resultados, extracción de valor, visualización de logros y recopilación de feedback positivo de colegas/clientes |
+| 3 | Asistente de ambiente social en el trabajo | Recomendación de temas profesionales, técnicas de networking, eventos del sector y optimización de contenido en LinkedIn |
+| 4 | Generador de inspiración para proyectos paralelos | Matching entre habilidades, intereses y demanda de mercado; casos de side projects, guía de inicio y comunidad |
+| 5 | Estación de confianza antes de entrevistas | Entrevistas simuladas, preparación de preguntas frecuentes, técnicas de confianza y sugerencias de imagen |
+
+---
+
+## 14. Espacio del hogar
+
+> 💡 **Idea central**: el hogar no es solo un lugar donde vivir, sino un refugio para la mente
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Diseñador de ambiente para el hogar | Analiza fotos del espacio, recomienda estilos, muebles/decoración y previsualización AR |
+| 2 | Guía de transformación estacional del hogar | Recomienda temas por temporada, organización y exhibición, decoración festiva y listas de compra |
+| 3 | Magia para espacios pequeños | Algoritmos de optimización espacial, muebles multifuncionales, técnicas de orden y trucos de ampliación visual |
+| 4 | Creador de rituales domésticos | Diseño de rituales cotidianos (mañana/noche/fin de semana), recordatorios de ejecución y feedback sobre efecto |
+| 5 | Acompañamiento psicológico para decluttering | Evalúa valor emocional de objetos, guía pasos de descarte, ofrece apoyo psicológico y recomienda canales de donación/reciclaje |
+
+---
+
+## 15. Cocina y gastronomía
+
+> 💡 **Idea central**: la comida es el lenguaje del amor, y cocinar es una forma de expresarlo
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Cocina reparadora para comer a solas | Reconocimiento de ingredientes en la nevera, recetas sencillas, guía paso a paso y estética de emplatado individual |
+| 2 | Diseño de ambiente para mesas festivas | Menús temáticos, propuestas de montaje de mesa, técnicas de ambientación y optimización de experiencia de invitados |
+| 3 | Emparejador de cocina y estado de ánimo | Algoritmo emoción-comida, recetas para regulación emocional, recomendación de comfort food y guía terapéutica de cocina |
+| 4 | Generador de confianza para principiantes en cocina | Recetas ultrafáciles, técnicas de rescate ante errores, frases de confianza y progresión gradual de dificultad |
+| 5 | Guía de ambiente para fotografía gastronómica | Consejos de emplatado, uso de luz natural, ángulos de captura, filtros y sugerencias de postproducción |
+
+---
+
+## 16. Estilo y vestimenta
+
+> 💡 **Idea central**: vestirse es autoexpresión, y el estilo es la manifestación externa de lo interior
+
+| N.º | Escenario de aplicación | Funcionalidad del escenario |
+| :--: | ------------ | ------------ |
+| 1 | Mood board del outfit de hoy | Recomendaciones combinando clima, ocasión y estado de ánimo; prueba virtual, inspiración de conjuntos y gestión del armario |
+| 2 | Estilista de armario cápsula | Inventario del armario, combinaciones de prendas, planes de múltiples usos y sugerencias de compra para cubrir vacíos |
+| 3 | Viaje de exploración del estilo personal | Test de estilo, recomendación de referentes, ruta de evolución y construcción de confianza |
+| 4 | Creativo para reinventar ropa antigua | Inspiración para transformar ropa, nuevas combinaciones, detalles con accesorios y moda sostenible |
+| 5 | Asesor de look para ocasiones especiales | Interpretación del dress code, generación de propuestas, consejos de maquillaje/peinado y coordinación general |
+
+---
+
+## Principios centrales para diseñar productos B2C
+
+### 1. De "función" a "sensación"
+
+Los productos B2B se preguntan "qué problema resuelve esta función"; los productos B2C se preguntan "qué sensación aporta esta función".
+
+| Pensamiento B2B | Pensamiento B2C |
+|---------|---------|
+| Mejorar la eficiencia | Ahorrar tiempo para hacer lo que gusta |
+| Reducir costes | Hacer que cada euro valga la pena |
+| Resolver puntos de dolor | Crear experiencias agradables |
+| Funcionalidad completa | Sensación bien lograda |
+
+### 2. Tres niveles para crear ambiente
+
+**Nivel sensorial**: diseño visual, auditivo y táctil
+- Colores cálidos
+- Sonidos relajantes
+- Animaciones fluidas
+
+**Nivel emocional**: resonancia y guía emocional
+- Comprender el estado de ánimo del usuario
+- Ofrecer apoyo emocional
+- Crear emociones positivas
+
+**Nivel de significado**: reconocimiento de valor y pertenencia
+- Hacer que el usuario se sienta comprendido
+- Crear sentido de pertenencia
+- Dar significado a la acción
+
+### 3. El poder de la sugestión psicológica
+
+El copy y el diseño de un producto B2C siempre transmiten sugestiones psicológicas:
+
+- **Sugestión positiva**: "ya lo estás haciendo bien", "ve despacio, no pasa nada"
+- **Sugestión de pertenencia**: "muchas personas sienten lo mismo", "no estás solo"
+- **Sugestión de crecimiento**: "cada intento es progreso", "estás mejorando"
+
+### 4. Ayudar al usuario a ser una mejor versión de sí mismo
+
+Los mejores productos B2C no cambian al usuario; le ayudan a convertirse en la persona que quiere ser.
+
+- No es "deberías...", sino "puedes..."
+- No es "tienes que...", sino "si quieres..."
+- No es "aún no eres suficiente...", sino "ya has..."
+
+---
+
+> 🌟 **Recuerda**: los usuarios B2C no compran funciones, sino sensaciones; no compran herramientas, sino compañía; no compran servicios, sino comprensión.
diff --git a/docs/es-es/stage-1/appendix-consumer-scenarios/index.md b/docs/es-es/stage-1/appendix-consumer-scenarios/index.md
new file mode 100644
index 0000000..80ba6ae
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-consumer-scenarios/index.md
@@ -0,0 +1,1350 @@
+---
+title: 'Referencia de inspiracion para escenarios de consumo B2C'
+description: 'Una coleccion de direcciones creativas de aplicacion de modelos LLM en escenarios de consumo B2C, cubriendo estilo de vida, compania emocional, entretenimiento y mas.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'aprox. <strong>4 horas</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// Pool de temas por escenario: énfasis en sensación, ambiente y sugestión psicológica
+const topicPool = {
+  'lifestyle': [
+    { title: 'Asistente de despertar con ritual matutino', desc: 'Genera rituales matutinos según clima, agenda y ánimo para empezar bien cada día' },
+    { title: 'Creador de ambiente para vivir solo', desc: 'Diseña ambientes domésticos para quienes viven solos, con sugerencias de luz, música y aromas' },
+    { title: 'Generador de planes reparadores de fin de semana en casa', desc: 'Recomienda la combinación perfecta según el ánimo: película + snacks + ambientación' },
+    { title: 'Radio calmante antes de dormir', desc: 'Genera historias suaves y meditaciones guiadas como una radio privada para conciliar el sueño' },
+    { title: 'Capturador de inspiración estética cotidiana', desc: 'Descubre belleza en lo cotidiano y genera sugerencias estéticas con sentido de ritual' }
+  ],
+  'emotion': [
+    { title: 'Confidente nocturno', desc: 'Un espacio emocional disponible 24 horas, sin juicio, para recibir cualquier preocupación' },
+    { title: 'Acompañante para sanar una ruptura', desc: 'Ofrece compañía amable, consejos de recuperación y salida emocional durante una ruptura' },
+    { title: 'Coach de respiración contra la ansiedad', desc: 'Percibe la ansiedad y guía ejercicios de respiración y mindfulness' },
+    { title: 'Mentor para reconstruir la confianza', desc: 'Ayuda a reconstruir identidad y valor personal con diálogo positivo y sugestión psicológica' },
+    { title: 'Interpretación inteligente del diario emocional', desc: 'Analiza diarios emocionales, encuentra patrones y ofrece ideas y consejos cálidos' }
+  ],
+  'entertainment': [
+    { title: 'DM inmersivo para juegos de misterio', desc: 'Actúa como anfitrión, crea suspense y hace avanzar la trama' },
+    { title: 'NPC con alma en juegos de mundo abierto', desc: 'NPC con personalidad que recuerda historias del jugador y genera vínculos emocionales reales' },
+    { title: 'Generación de podcasts personalizados', desc: 'Genera podcasts exclusivos según intereses, con naturalidad de conversación entre amigos' },
+    { title: 'Equipo de ambiente para concierto virtual', desc: 'Crea sensación de directo en conciertos online con interacción, apoyo y ambiente en tiempo real' },
+    { title: 'Compañero de cocreación de novela interactiva', desc: 'Crea historias junto con lectores; cada elección cambia el rumbo del mundo' }
+  ],
+  'growth': [
+    { title: 'Testigo del crecimiento personal', desc: 'Registra la trayectoria de crecimiento y ofrece ánimo y revisión en hitos importantes' },
+    { title: 'Coach gamificado de hábitos', desc: 'Convierte la formación de hábitos en una aventura divertida' },
+    { title: 'Emparejador de compañeros para aprender habilidades', desc: 'Encuentra compañeros afines para supervisarse y compartir avances' },
+    { title: 'Descubridor diario de pequeñas alegrías', desc: 'Ayuda a descubrir pequeños momentos bellos y cultivar gratitud y optimismo' },
+    { title: 'Simulador de experiencias de vida', desc: 'Simula decisiones vitales y explora posibilidades de vidas paralelas' }
+  ],
+  'social': [
+    { title: 'Generador de temas rompehielos', desc: 'Ofrece temas interesantes en situaciones sociales para reducir incomodidad y acercar personas' },
+    { title: 'Redactor de ambiente para publicaciones sociales', desc: 'Genera textos con estilo según fotos y estado de ánimo' },
+    { title: 'Planificador de ambiente para citas', desc: 'Diseña una experiencia completa de cita: lugar, conversación y sorpresa' },
+    { title: 'Animador de reuniones remotas', desc: 'Activa reuniones online con juegos e interacción guiada' },
+    { title: 'Asistente de gestión de energía social', desc: 'Ayuda a personas introvertidas a gestionar energía y encontrar un ritmo social cómodo' }
+  ],
+  'creative': [
+    { title: 'Kit de emergencia contra el bloqueo creativo', desc: 'Aporta chispas inesperadas cuando aparece el bloqueo creativo' },
+    { title: 'Guía de exploración del estilo personal', desc: 'Ayuda a descubrir un estilo propio, desde la ropa hasta la expresión' },
+    { title: 'Asesor estético para journaling y diarios', desc: 'Sugiere maquetación, paletas y contenido creativo para diarios' },
+    { title: 'Guía de composición y ambiente fotográfico', desc: 'Ofrece consejos de foto y edición según escena y sensación buscada' },
+    { title: 'Emparejador de música y estado de ánimo', desc: 'Recomienda la combinación musical perfecta según ánimo y contexto' }
+  ],
+  'travel': [
+    { title: 'Guía para paseos urbanos', desc: 'Explora la ciudad como una persona local y descubre lugares ocultos' },
+    { title: 'Generador de diario emocional de viaje', desc: 'Convierte fotos y emociones de viaje en relatos y recuerdos bellos' },
+    { title: 'Acompañante para viajar en solitario', desc: 'Ofrece compañía, consejos y seguridad para viajar solo' },
+    { title: 'Vista previa del ambiente del destino', desc: 'Permite sentir el destino antes de salir y entrar en ambiente' },
+    { title: 'Guía de ambiente para fotografía de viaje', desc: 'Ayuda a tomar fotos con historia según escena y luz' }
+  ],
+  'health': [
+    { title: 'Activador de motivación deportiva', desc: 'Da el empujón justo cuando no apetece moverse' },
+    { title: 'Cocina de inspiración saludable', desc: 'Genera recetas saludables y reparadoras según ánimo e ingredientes' },
+    { title: 'Optimizador de ambiente para dormir mejor', desc: 'Crea un entorno de sueño de calidad desde lo ambiental hasta lo psicológico' },
+    { title: 'Guía de conciencia corporal', desc: 'Guía la atención hacia señales del cuerpo y fortalece la conexión cuerpo-mente' },
+    { title: 'Recordatorio de autocuidado', desc: 'Recuerda detenerse y cuidarse en medio del ajetreo' }
+  ],
+  'learning': [
+    { title: 'Guía gamificada de exploración del conocimiento', desc: 'Convierte el aprendizaje aburrido en una aventura de exploración' },
+    { title: 'Compañero situacional para aprender idiomas', desc: 'Interpreta roles distintos para aprender idioma de forma natural en diálogos' },
+    { title: 'Asistente para satisfacer la curiosidad', desc: 'Responde ideas curiosas y alimenta la curiosidad por el mundo' },
+    { title: 'Inspirador de notas de lectura', desc: 'Ayuda a ordenar reflexiones de lectura y encontrar nuevos ángulos' },
+    { title: 'Creador de ambiente para compartir conocimiento', desc: 'Convierte lo aprendido en contenido interesante para compartir' }
+  ],
+  'relationship': [
+    { title: 'Coach de comunicación para relaciones íntimas', desc: 'Ayuda a expresar emociones difíciles y mejorar relaciones cercanas' },
+    { title: 'Asistente de cuidado familiar', desc: 'Recuerda cuidar a la familia y ofrece sugerencias de interacción cálida' },
+    { title: 'Creador de ambiente para mantener amistades', desc: 'Ayuda a sostener amistades a distancia y crear temas comunes' },
+    { title: 'Planificador de confesiones y sorpresas', desc: 'Diseña sorpresas y momentos románticos memorables para personas importantes' },
+    { title: 'Guía para suavizar conflictos', desc: 'Ofrece consejos y frases para aliviar tensiones relacionales' }
+  ],
+  'pet': [
+    { title: 'Diario antropomórfico de mascotas', desc: 'Genera diarios desde la perspectiva de la mascota y registra momentos cálidos' },
+    { title: 'Intérprete del comportamiento animal', desc: 'Interpreta lenguaje conductual y profundiza el vínculo con la mascota' },
+    { title: 'Planificador de tiempo de calidad con mascotas', desc: 'Diseña actividades creativas para interactuar y fortalecer el afecto' },
+    { title: 'Generador de historias conmemorativas de mascotas', desc: 'Convierte fotos y recuerdos de la mascota en historias cálidas' },
+    { title: 'Guía tranquila para nuevos cuidadores', desc: 'Ofrece compañía y orientación amable a nuevos dueños de mascotas' }
+  ],
+  'finance': [
+    { title: 'Asistente de conciencia emocional del consumo', desc: 'Detecta emociones detrás de compras impulsivas y construye una visión saludable del consumo' },
+    { title: 'Motivación visual para metas de ahorro', desc: 'Convierte metas de ahorro en progreso visual hacia sueños' },
+    { title: 'Aprendizaje ligero de finanzas personales', desc: 'Enseña finanzas de manera ligera y entretenida' },
+    { title: 'Aliviador de ansiedad financiera', desc: 'Ofrece apoyo emocional y consejos prácticos ante presión financiera' },
+    { title: 'Juego de inversión de bajo monto', desc: 'Permite experimentar la inversión de forma gamificada y con menor barrera de entrada' }
+  ],
+  'career': [
+    { title: 'Acompañante para la confusión profesional', desc: 'Escucha, explora y orienta durante etapas de duda profesional' },
+    { title: 'Activador de sentido de logro laboral', desc: 'Ayuda a descubrir valor y sentido en el trabajo y reavivar entusiasmo' },
+    { title: 'Asistente de ambiente social en el trabajo', desc: 'Propone temas ligeros y consejos de interacción para el entorno laboral' },
+    { title: 'Generador de inspiración para proyectos paralelos', desc: 'Activa ideas de side projects según intereses y habilidades' },
+    { title: 'Estación de confianza antes de entrevistas', desc: 'Ofrece preparación psicológica y ánimo antes de entrevistas' }
+  ],
+  'home': [
+    { title: 'Diseñador de ambiente para el hogar', desc: 'Diseña ambientes domésticos según estado de ánimo y estación' },
+    { title: 'Guía de transformación estacional del hogar', desc: 'Renueva la decoración por temporada para mantener frescura' },
+    { title: 'Magia para espacios pequeños', desc: 'Hace que los espacios pequeños se sientan cómodos y cálidos' },
+    { title: 'Creador de rituales domésticos', desc: 'Crea rituales para actividades cotidianas del hogar' },
+    { title: 'Acompañamiento psicológico para decluttering', desc: 'Ofrece apoyo psicológico y consejos de decisión al ordenar objetos' }
+  ],
+  'food': [
+    { title: 'Cocina reparadora para comer a solas', desc: 'Diseña comidas sencillas y reconfortantes para quienes viven solos' },
+    { title: 'Diseño de ambiente para mesas festivas', desc: 'Diseña mesas con ritual para días especiales' },
+    { title: 'Emparejador de cocina y estado de ánimo', desc: 'Recomienda alimentos y preparaciones según el ánimo actual' },
+    { title: 'Generador de confianza para principiantes en cocina', desc: 'Ofrece ánimo cálido y recetas sencillas a quienes empiezan desde cero' },
+    { title: 'Guía de ambiente para fotografía gastronómica', desc: 'Hace que la comida casera también se vea apetecible en fotos' }
+  ],
+  'fashion': [
+    { title: 'Mood board del outfit de hoy', desc: 'Genera inspiración de vestimenta según clima, ocasión y ánimo' },
+    { title: 'Estilista de armario cápsula', desc: 'Crea infinitas combinaciones con prendas limitadas' },
+    { title: 'Viaje de exploración del estilo personal', desc: 'Ayuda a descubrir y construir un estilo personal único' },
+    { title: 'Creativo para reinventar ropa antigua', desc: 'Da nueva inspiración para combinar ropa antigua' },
+    { title: 'Asesor de look para ocasiones especiales', desc: 'Diseña looks que den confianza para momentos importantes' }
+  ]
+}
+
+// Mapa predefinido de recomendaciones según ambiente y sensación
+const recommendationMap = {
+  // Ambiente: reparador
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiente: crecimiento
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiente: social
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // Ambiente: exploración
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiente: cotidiano
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'Reparador', value: 'healing', desc: 'Cálido, calmante, sanador' },
+  { label: 'Crecimiento', value: 'growth', desc: 'Progreso, avance, transformación' },
+  { label: 'Social', value: 'social', desc: 'Conexión, compartir, interacción' },
+  { label: 'Exploración', value: 'explore', desc: 'Curiosidad, aventura, descubrimiento' },
+  { label: 'Cotidiano', value: 'daily', desc: 'Sencillo, real, presente' }
+]
+
+const feelingOptions = [
+  { label: 'Quiero relajarme', value: 'relax', desc: 'Aliviar presión, despejar la mente' },
+  { label: 'Busco inspiración', value: 'inspire', desc: 'Activar creatividad, encontrar ideas' },
+  { label: 'Deseo conexión', value: 'connect', desc: 'Conectar con personas, resonar emocionalmente' },
+  { label: 'Escapar por un momento', value: 'escape', desc: 'Salir de la realidad, vivir inmersión' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'Estilo de vida', anchor: '#_1-estilo-de-vida' },
+  { key: 'emotion', name: 'Acompañamiento emocional', anchor: '#_2-acompañamiento-emocional' },
+  { key: 'entertainment', name: 'Entretenimiento y ocio', anchor: '#_3-entretenimiento-y-ocio' },
+  { key: 'growth', name: 'Crecimiento personal', anchor: '#_4-crecimiento-personal' },
+  { key: 'social', name: 'Interacción social', anchor: '#_5-interacción-social' },
+  { key: 'creative', name: 'Expresión creativa', anchor: '#_6-expresión-creativa' },
+  { key: 'travel', name: 'Exploración de viajes', anchor: '#_7-exploración-de-viajes' },
+  { key: 'health', name: 'Salud física y mental', anchor: '#_8-salud-física-y-mental' },
+  { key: 'learning', name: 'Exploración del conocimiento', anchor: '#_9-exploración-del-conocimiento' },
+  { key: 'relationship', name: 'Gestión de relaciones', anchor: '#_10-gestión-de-relaciones' },
+  { key: 'pet', name: 'Acompañamiento de mascotas', anchor: '#_11-acompañamiento-de-mascotas' },
+  { key: 'finance', name: 'Salud financiera', anchor: '#_12-salud-financiera' },
+  { key: 'career', name: 'Desarrollo profesional', anchor: '#_13-desarrollo-profesional' },
+  { key: 'home', name: 'Espacio del hogar', anchor: '#_14-espacio-del-hogar' },
+  { key: 'food', name: 'Cocina y gastronomía', anchor: '#_15-cocina-y-gastronomía' },
+  { key: 'fashion', name: 'Estilo y vestimenta', anchor: '#_16-estilo-y-vestimenta' }
+]
+
+// Calcula recomendaciones tomando elementos aleatorios del pool de temas
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // Toma aleatoriamente 1-2 temas de cada escenario recomendado
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // Toma aleatoriamente 1-2 temas
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // Orden aleatorio y límite total
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Obtiene la descripción de la selección actual
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // Retrasa el desplazamiento para asegurar que el DOM esté actualizado
+  setTimeout(() => {
+    // Intenta buscar por ID (soporta varios formatos)
+    let element = document.querySelector(anchor)
+    
+    // Si no se encuentra, prueba otros formatos posibles
+    if (!element) {
+      // Intenta quitar el prefijo de guion bajo
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // Si aún no se encuentra, busca por texto del encabezado
+    if (!element) {
+      // Extrae el nombre del escenario desde el ancla
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // Coincidencia exacta o parcial
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // Resalta el bloque de destino
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# Referencia de inspiración para escenarios de consumo B2C
+
+## Introducción del capítulo
+
+<ChapterIntroduction :duration="duration" :tags="['Aplicaciones B2C', 'Estilo de vida', 'Experiencia emocional', 'Creación de ambiente']" coreOutput="Descubrir más de 15 inspiraciones de escenarios de vida" expectedOutput="Encontrar una dirección de producto que emocione a los usuarios">
+
+Este documento resume <strong>direcciones creativas de aplicación de modelos LLM en escenarios de consumo B2C</strong>. A diferencia de los productos B2B, que se centran en eficiencia y puntos de dolor, los productos B2C se enfocan más en <strong>crear sensaciones, sugestiones psicológicas y ambiente</strong>, para que el usuario obtenga resonancia emocional y una experiencia agradable.
+
+</ChapterIntroduction>
+
+## Selección rápida de ambiente
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Encuentra la inspiración que te toca</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Elige el ambiente que quieres y tu sensación actual. El sistema recomendará escenarios relacionados; haz clic en una etiqueta para saltar a la sección correspondiente.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="Elige tipo de ambiente" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="Elige tu sensación actual" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      Escenarios recomendados para {{ currentSelection.vibe }} × {{ currentSelection.feeling }}:
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      Elegir de nuevo
+    </el-button>
+  </div>
+</el-card>
+
+## Vista rápida de direcciones de escenario
+
+<el-row :gutter="16" style="margin-top: 24px;">
+  <el-col :span="8" v-for="scenario in scenarios.slice(0, 6)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} direcciones de inspiración</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(6, 12)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} direcciones de inspiración</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(12, 16)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} direcciones de inspiración</div>
+    </el-card>
+  </el-col>
+</el-row>
+
+---
+
+## 1. Estilo de vida
+
+> 💡 **Idea central**: convertir la rutina en ritual y crear belleza en los detalles
+
+### 1.1 Asistente de despertar con ritual matutino
+
+**Descripción del escenario**:
+Al despertar cada día, genera un ritual matutino personalizado según el clima, la agenda y el estado de ánimo. Puede ser música suave, un té adecuado para el ánimo del día, un estiramiento de 5 minutos o una frase de ánimo en el tono justo.
+
+**Claves para crear ambiente**:
+- Despertar gradual, no presión repentina
+- Experiencia multisensorial visual y auditiva
+- Hacer que el comienzo de cada día genere expectativa
+
+**Sugestión psicológica**:
+> "Hoy puede ser un buen día, porque mereces ser tratado con ternura"
+
+### 1.2 Creador de ambiente para vivir solo
+
+**Descripción del escenario**:
+Diseña ambientes domésticos para personas que viven solas, combinando de forma inteligente luces, música y aromas para que una casa de una sola persona también tenga calidez y sentido de pertenencia.
+
+**Claves para crear ambiente**:
+- Ajuste automático según hora y estado de ánimo
+- Temas estacionales
+- Sensación de estar acompañado
+
+### 1.3 Generador de planes reparadores de fin de semana en casa
+
+**Descripción del escenario**:
+El viernes por la noche, genera el plan perfecto para quedarse en casa según el ánimo y el clima: recomendaciones de películas, snacks, decoración e incluso un rincón ideal para no hacer nada.
+
+**Claves para crear ambiente**:
+- Presentación visual calmante
+- Elecciones sin presión
+- Convertir quedarse en casa en un disfrute
+
+### 1.4 Radio calmante antes de dormir
+
+**Descripción del escenario**:
+Antes de dormir, genera contenido calmante personalizado: historias suaves, meditaciones guiadas, ruido blanco o un simple saludo de buenas noches que acompaña la entrada al sueño.
+
+**Claves para crear ambiente**:
+- Voz y ritmo relajantes
+- Diseño de volumen que se desvanece gradualmente
+- Sensación de seguridad y relajación
+
+### 1.5 Capturador de inspiración estética cotidiana
+
+**Descripción del escenario**:
+Encuentra belleza en pequeñas cosas cotidianas y ofrece sugerencias estéticas y guías de ritual. Por ejemplo, cómo hacer que un café tenga más estilo o cómo convertir un escritorio en un espacio de flujo.
+
+**Claves para crear ambiente**:
+- Descubrir lo extraordinario en lo común
+- Cultivar sensibilidad hacia la belleza
+- Convertir la vida en una forma de arte
+
+---
+
+## 2. Acompañamiento emocional
+
+> 💡 **Idea central**: aceptación y compañía incondicional como contenedor amable de las emociones
+
+### 2.1 Confidente nocturno
+
+**Descripción del escenario**:
+Un espacio emocional disponible 24 horas que acepta cualquier preocupación sin juicio. Alegría, tristeza, rabia o confusión: siempre hay un lugar donde dejarlo.
+
+**Claves para crear ambiente**:
+- Seguridad absoluta y protección de privacidad
+- No interrumpir, no sermonear, solo escuchar
+- Respuestas suaves y empáticas
+
+**Sugestión psicológica**:
+> "Todas tus emociones tienen sentido; estoy aquí contigo"
+
+### 2.2 Acompañante para sanar una ruptura
+
+**Descripción del escenario**:
+Durante el punto bajo de una ruptura, ofrece compañía amable, consejos de recuperación y salida emocional. No se apresura a sacarte de ahí; te permite avanzar poco a poco.
+
+**Claves para crear ambiente**:
+- Permitir que la tristeza exista
+- Orientación emocional gradual
+- Reconstrucción del sentido de valor personal
+
+### 2.3 Coach de respiración contra la ansiedad
+
+**Descripción del escenario**:
+Percibe la ansiedad del usuario y guía ejercicios de respiración y mindfulness. En momentos de tensión, ofrece un ancla confiable.
+
+**Claves para crear ambiente**:
+- Detección emocional inmediata
+- Métodos simples y eficaces de alivio
+- Sensación de calma y control
+
+### 2.4 Mentor para reconstruir la confianza
+
+**Descripción del escenario**:
+Ayuda a reconstruir identidad y autoestima mediante diálogo positivo y sugestión psicológica. Registra cada pequeño avance y acompaña el proceso de transformación.
+
+**Claves para crear ambiente**:
+- Descubrir fortalezas ignoradas
+- Celebrar cada pequeña victoria
+- Construir un diálogo interno positivo
+
+### 2.5 Interpretación inteligente del diario emocional
+
+**Descripción del escenario**:
+Analiza el diario emocional del usuario, detecta patrones y ofrece ideas y consejos cálidos. Ayuda a conocerse mejor y convivir en paz con las emociones.
+
+**Claves para crear ambiente**:
+- Trayectorias emocionales visuales
+- Ideas cálidas, no análisis fríos
+- Consejos accionables
+
+---
+
+## 3. Entretenimiento y ocio
+
+> 💡 **Idea central**: crear experiencias inmersivas para que el entretenimiento sea un refugio mental
+
+### 3.1 DM inmersivo para juegos de misterio
+
+**Descripción del escenario**:
+Actúa como director de una partida de misterio, crea suspense y hace avanzar la trama. Ajusta el ritmo en tiempo real según las reacciones de los jugadores para crear una experiencia memorable.
+
+**Claves para crear ambiente**:
+- Apertura envolvente
+- Suspense en la medida justa
+- Juego de rol inmersivo
+
+### 3.2 NPC con alma en juegos de mundo abierto
+
+**Descripción del escenario**:
+NPC con personalidad que recuerdan la historia del jugador y generan vínculos emocionales reales. No son solo emisores de misiones, sino amigos dentro del mundo del juego.
+
+**Claves para crear ambiente**:
+- Memoria persistente y continuidad
+- Interacción personalizada
+- Conexión emocional real
+
+### 3.3 Generación de podcasts personalizados
+
+**Descripción del escenario**:
+Genera podcasts exclusivos según los intereses del usuario, con naturalidad de conversación entre amigos. El contenido puede ser divulgación, narración de historias o simple compañía.
+
+**Claves para crear ambiente**:
+- Sensación de conversación ligera y natural
+- Contenido ajustado al gusto personal
+- Compañía disponible en cualquier momento
+
+### 3.4 Equipo de ambiente para concierto virtual
+
+**Descripción del escenario**:
+Crea sensación de directo para conciertos online con interacción, apoyo y atmósfera en tiempo real. Incluso en casa y a solas, el usuario puede sentir la energía de un concierto.
+
+**Claves para crear ambiente**:
+- Inmersión visual y auditiva
+- Interacción y resonancia en tiempo real
+- Sensación de participación colectiva
+
+### 3.5 Compañero de cocreación de novela interactiva
+
+**Descripción del escenario**:
+Crea historias junto con lectores, donde cada elección afecta el rumbo del mundo. El lector deja de ser consumidor pasivo y se convierte en cocreador.
+
+**Claves para crear ambiente**:
+- Posibilidades ilimitadas
+- Capacidad real de decisión
+- Crear una historia propia
+
+---
+
+## 4. Crecimiento personal
+
+> 💡 **Idea central**: crecer no es penitencia, sino un viaje interesante de autodescubrimiento
+
+### 4.1 Testigo del crecimiento personal
+
+**Descripción del escenario**:
+Registra la trayectoria de crecimiento del usuario y ofrece ánimo y retrospectiva en hitos importantes. Hace visible el progreso y conserva el recuerdo del esfuerzo.
+
+**Claves para crear ambiente**:
+- Trayectoria de crecimiento visual
+- Conmemoración de momentos importantes
+- Mirada cálida hacia atrás y hacia adelante
+
+**Sugestión psicológica**:
+> "Has llegado muy lejos sin darte cuenta"
+
+### 4.2 Coach gamificado de hábitos
+
+**Descripción del escenario**:
+Convierte la formación de hábitos, a menudo aburrida, en una aventura divertida. Cada pequeño hábito sostenido se vuelve un logro dentro del juego.
+
+**Claves para crear ambiente**:
+- Mecanismos de motivación gamificados
+- Feedback positivo inmediato
+- Hacer que la constancia sea interesante
+
+### 4.3 Emparejador de compañeros para aprender habilidades
+
+**Descripción del escenario**:
+Encuentra compañeros afines para aprender, supervisarse mutuamente y compartir avances. Aprender deja de ser un viaje solitario.
+
+**Claves para crear ambiente**:
+- Encontrar personas en la misma frecuencia
+- Ambiente de motivación mutua
+- Alegría de progresar juntos
+
+### 4.4 Descubridor diario de pequeñas alegrías
+
+**Descripción del escenario**:
+Ayuda a descubrir pequeños momentos bellos de la vida y cultivar gratitud y optimismo. Cada día registra algo pequeño por lo que vale la pena agradecer.
+
+**Claves para crear ambiente**:
+- Descubrir belleza ignorada
+- Cultivar el hábito de agradecer
+- Acumular energía positiva
+
+### 4.5 Simulador de experiencias de vida
+
+**Descripción del escenario**:
+Simula distintas decisiones vitales y permite experimentar posibilidades de vidas paralelas. Ayuda a explorar opciones y tomar decisiones más auténticas.
+
+**Claves para crear ambiente**:
+- Experiencia de elección segura
+- Explorar facetas desconocidas de uno mismo
+- Sin correcto o incorrecto, solo experiencia
+
+---
+
+## 5. Interacción social
+
+> 💡 **Idea central**: hacer que socializar sea ligero y natural, y encontrar formas cómodas de conexión
+
+### 5.1 Generador de temas rompehielos
+
+**Descripción del escenario**:
+Ofrece temas interesantes en situaciones sociales para reducir incomodidad y acercar personas. Ya sea una reunión con desconocidos o un reencuentro con amigos, siempre aparece un tema adecuado.
+
+**Claves para crear ambiente**:
+- Temas ligeros e interesantes
+- Adecuación a distintos contextos
+- Inicio natural de conversación
+
+### 5.2 Redactor de ambiente para publicaciones sociales
+
+**Descripción del escenario**:
+Genera textos con estilo según fotos y estado de ánimo. Compartir se vuelve una forma de expresión y registrar momentos gana calidez.
+
+**Claves para crear ambiente**:
+- Coherencia con el estilo personal
+- Estilo sin artificio
+- Expresión emocional auténtica
+
+### 5.3 Planificador de ambiente para citas
+
+**Descripción del escenario**:
+Diseña una experiencia completa de cita, desde el lugar hasta los temas de conversación y las sorpresas. Convierte cada cita en un buen recuerdo.
+
+**Claves para crear ambiente**:
+- Diseño integral de experiencia
+- Sorpresas en la medida justa
+- Creación de atmósfera romántica
+
+### 5.4 Animador de reuniones remotas
+
+**Descripción del escenario**:
+Activa reuniones online con juegos e interacción guiada. Hace que una reunión remota también tenga la energía de estar cara a cara.
+
+**Claves para crear ambiente**:
+- Juegos y actividades interesantes
+- Guía para una interacción natural
+- Sensación de participación colectiva
+
+### 5.5 Asistente de gestión de energía social
+
+**Descripción del escenario**:
+Ayuda a personas introvertidas a gestionar su energía social y encontrar un ritmo cómodo. No hace falta forzarse para disfrutar de la socialización.
+
+**Claves para crear ambiente**:
+- Respeto por los límites personales
+- Encontrar una forma propia
+- No exigir cambiar la personalidad
+
+---
+
+## 6. Expresión creativa
+
+> 💡 **Idea central**: todas las personas tienen creatividad; a veces solo hay que despertarla
+
+### 6.1 Kit de emergencia contra el bloqueo creativo
+
+**Descripción del escenario**:
+Aporta chispas inesperadas de inspiración cuando aparece el bloqueo creativo. No da respuestas estándar, sino llaves para abrir nuevas rutas de pensamiento.
+
+**Claves para crear ambiente**:
+- Romper patrones mentales
+- Conexiones inesperadas
+- Activar la creatividad interna
+
+### 6.2 Guía de exploración del estilo personal
+
+**Descripción del escenario**:
+Ayuda al usuario a descubrir un estilo propio, desde la forma de vestir hasta la forma de expresarse. Cada persona puede encontrar su propia voz.
+
+**Claves para crear ambiente**:
+- Descubrir lo propio y singular
+- Animar a experimentar y probar
+- Construir una marca personal
+
+### 6.3 Asesor estético para journaling y diarios
+
+**Descripción del escenario**:
+Ofrece sugerencias estéticas de maquetación, paleta y contenido para diarios y bullet journals. Registrar se convierte en arte y los recuerdos ganan textura.
+
+**Claves para crear ambiente**:
+- Guía estética visual
+- Inspiración creativa para el contenido
+- Estilo personalizado
+
+### 6.4 Guía de composición y ambiente fotográfico
+
+**Descripción del escenario**:
+Ofrece consejos de fotografía y edición según la escena y la sensación buscada. Cada foto puede transmitir la emoción deseada.
+
+**Claves para crear ambiente**:
+- Priorizar la atmósfera sobre la técnica
+- Expresión visual de emociones
+- Ojo para descubrir belleza
+
+### 6.5 Emparejador de música y estado de ánimo
+
+**Descripción del escenario**:
+Recomienda la combinación musical perfecta según el ánimo y la escena. La música es resonancia emocional y creadora de ambiente.
+
+**Claves para crear ambiente**:
+- Ajuste emocional preciso
+- Recomendaciones por contexto
+- Poder reparador de la música
+
+---
+
+## 7. Exploración de viajes
+
+> 💡 **Idea central**: viajar no es solo mirar paisajes, sino sentir otras formas de vida
+
+### 7.1 Guía para paseos urbanos
+
+**Descripción del escenario**:
+Explora la ciudad como una persona local y descubre lugares ocultos. No se trata solo de marcar lugares turísticos, sino de sentir el pulso real de la ciudad.
+
+**Claves para crear ambiente**:
+- Perspectiva local
+- Descubrimientos y sorpresas inesperadas
+- Entrar en el alma de la ciudad
+
+### 7.2 Generador de diario emocional de viaje
+
+**Descripción del escenario**:
+Convierte fotos y emociones de viaje en relatos y recuerdos bellos. Cada viaje deja una huella singular.
+
+**Claves para crear ambiente**:
+- Registro emocional
+- Escritura cuidada
+- Recuerdos duraderos
+
+### 7.3 Acompañante para viajar en solitario
+
+**Descripción del escenario**:
+Ofrece compañía, consejos y seguridad para personas que viajan solas. Viajar en solitario también puede sentirse cuidado y acompañado.
+
+**Claves para crear ambiente**:
+- Construcción de seguridad
+- Compañía interesante
+- Solo, pero no solitario
+
+### 7.4 Vista previa del ambiente del destino
+
+**Descripción del escenario**:
+Permite experimentar de forma inmersiva el ambiente del destino antes de salir. La anticipación se vuelve parte del viaje.
+
+**Claves para crear ambiente**:
+- Vista previa inmersiva
+- Activar expectativa e imaginación
+- Entrar en modo viaje con antelación
+
+### 7.5 Guía de ambiente para fotografía de viaje
+
+**Descripción del escenario**:
+Orienta para tomar fotos de viaje con sentido narrativo según escena y luz. No solo registra, sino que cuenta la historia del viaje.
+
+**Claves para crear ambiente**:
+- Composición con narrativa
+- Captura de emociones
+- Perspectiva única
+
+---
+
+## 8. Salud física y mental
+
+> 💡 **Idea central**: la salud no es una meta, sino una forma amable de autocuidado
+
+### 8.1 Activador de motivación deportiva
+
+**Descripción del escenario**:
+Da el ánimo justo cuando no apetece moverse. No obliga: despierta la motivación interna.
+
+**Claves para crear ambiente**:
+- Comprender la falta de ganas
+- Guía progresiva
+- Celebrar cada pequeña acción
+
+### 8.2 Cocina de inspiración saludable
+
+**Descripción del escenario**:
+Genera recetas saludables y reparadoras según ánimo e ingredientes. Comer sano también puede ser un disfrute delicioso.
+
+**Claves para crear ambiente**:
+- Atractivo gastronómico
+- Preparaciones simples
+- Equilibrio saludable
+
+### 8.3 Optimizador de ambiente para dormir mejor
+
+**Descripción del escenario**:
+Crea un ambiente de sueño de calidad desde el entorno hasta lo psicológico. Hace que dormir sea uno de los momentos más esperados del día.
+
+**Claves para crear ambiente**:
+- Optimización del entorno
+- Relajación psicológica
+- Diseño de ritual
+
+### 8.4 Guía de conciencia corporal
+
+**Descripción del escenario**:
+Guía al usuario para atender señales corporales y construir conexión cuerpo-mente. En medio del ajetreo, invita a detenerse y escuchar el cuerpo.
+
+**Claves para crear ambiente**:
+- Guía amable
+- Conciencia corporal
+- Integración cuerpo-mente
+
+### 8.5 Recordatorio de autocuidado
+
+**Descripción del escenario**:
+Recuerda al usuario detenerse y cuidarse en medio del ajetreo. Un pequeño recordatorio puede cambiar el estado de todo el día.
+
+**Claves para crear ambiente**:
+- Recordatorios oportunos
+- Acciones simples
+- Cuidado amable
+
+---
+
+## 9. Exploración del conocimiento
+
+> 💡 **Idea central**: aprender es una aventura interminable; la curiosidad es la mejor maestra
+
+### 9.1 Guía gamificada de exploración del conocimiento
+
+**Descripción del escenario**:
+Convierte el aprendizaje aburrido en una aventura de exploración. Cada punto de conocimiento es un tesoro por descubrir.
+
+**Claves para crear ambiente**:
+- Experiencia gamificada
+- Placer de explorar
+- Satisfacción de logro
+
+### 9.2 Compañero situacional para aprender idiomas
+
+**Descripción del escenario**:
+Interpreta distintos roles para aprender idiomas de forma natural en diálogos situacionales. No es memorizar, sino aprender usando.
+
+**Claves para crear ambiente**:
+- Escenarios reales
+- Roles interesantes
+- Adquisición natural
+
+### 9.3 Asistente para satisfacer la curiosidad
+
+**Descripción del escenario**:
+Responde ideas curiosas y satisface la curiosidad por el mundo. No hay preguntas tontas, solo respuestas esperando ser descubiertas.
+
+**Claves para crear ambiente**:
+- Animar a preguntar
+- Respuestas interesantes
+- Despertar más curiosidad
+
+### 9.4 Inspirador de notas de lectura
+
+**Descripción del escenario**:
+Ayuda a ordenar reflexiones de lectura y descubrir nuevos ángulos de pensamiento. La lectura se convierte en diálogo con el autor y con uno mismo.
+
+**Claves para crear ambiente**:
+- Pensamiento profundo
+- Perspectiva personal
+- Conexión de conocimientos
+
+### 9.5 Creador de ambiente para compartir conocimiento
+
+**Descripción del escenario**:
+Convierte lo aprendido en contenido interesante para compartir. Compartir no es solo salida; también profundiza la comprensión.
+
+**Claves para crear ambiente**:
+- Expresión interesante
+- Alegría de compartir
+- Difusión del conocimiento
+
+---
+
+## 10. Gestión de relaciones
+
+> 💡 **Idea central**: una buena relación necesita cuidado, y cuidar no tiene que ser complicado
+
+### 10.1 Coach de comunicación para relaciones íntimas
+
+**Descripción del escenario**:
+Ayuda a expresar emociones difíciles y mejorar relaciones cercanas. A veces solo hace falta encontrar la forma adecuada de decir lo que se siente.
+
+**Claves para crear ambiente**:
+- Espacio seguro para expresarse
+- Consejos suaves
+- Mayor comprensión
+
+### 10.2 Asistente de cuidado familiar
+
+**Descripción del escenario**:
+Recuerda cuidar a la familia y ofrece sugerencias de interacción cálida. En medio del trabajo y la prisa, ayuda a no olvidar los vínculos más importantes.
+
+**Claves para crear ambiente**:
+- Recordatorios oportunos
+- Gestos sencillos de cuidado
+- Conexión cálida
+
+### 10.3 Creador de ambiente para mantener amistades
+
+**Descripción del escenario**:
+Ayuda a sostener amistades a distancia y crear temas compartidos. La distancia no es el problema; la atención es la clave.
+
+**Claves para crear ambiente**:
+- Crear oportunidades de conexión
+- Temas compartidos
+- Continuidad de la amistad
+
+### 10.4 Planificador de confesiones y sorpresas
+
+**Descripción del escenario**:
+Diseña sorpresas memorables y momentos románticos para personas importantes. Hace que los días especiales sean aún más especiales.
+
+**Claves para crear ambiente**:
+- Diseño personalizado
+- Sorpresas románticas
+- Recuerdos inolvidables
+
+### 10.5 Guía para suavizar conflictos
+
+**Descripción del escenario**:
+Ofrece consejos y frases para aliviar tensiones cuando una relación está tirante. Ayuda a encontrar un puente hacia la reconciliación.
+
+**Claves para crear ambiente**:
+- Comprender ambas posiciones
+- Consejos moderados
+- Reparar la relación
+
+---
+
+## 11. Acompañamiento de mascotas
+
+> 💡 **Idea central**: las mascotas son familia; su compañía merece registrarse y apreciarse
+
+### 11.1 Diario antropomórfico de mascotas
+
+**Descripción del escenario**:
+Genera diarios desde la perspectiva de la mascota y registra la vida cotidiana con su persona. Imagina cómo describiría el tiempo compartido contigo.
+
+**Claves para crear ambiente**:
+- Perspectiva adorable
+- Cotidiano cálido
+- Conexión emocional
+
+### 11.2 Intérprete del comportamiento animal
+
+**Descripción del escenario**:
+Interpreta el lenguaje conductual de la mascota para profundizar el vínculo. Ayuda a comprender mejor sus necesidades y emociones.
+
+**Claves para crear ambiente**:
+- Interpretación profesional
+- Mayor comprensión
+- Mejor cuidado
+
+### 11.3 Planificador de tiempo de calidad con mascotas
+
+**Descripción del escenario**:
+Diseña actividades creativas para interactuar con mascotas y fortalecer el afecto. Hace que el tiempo compartido sea más interesante y significativo.
+
+**Claves para crear ambiente**:
+- Actividades creativas
+- Interacción divertida
+- Buenos recuerdos
+
+### 11.4 Generador de historias conmemorativas de mascotas
+
+**Descripción del escenario**:
+Convierte fotos y recuerdos de la mascota en historias cálidas. Registra los momentos valiosos compartidos.
+
+**Claves para crear ambiente**:
+- Narrativa cálida
+- Recuerdos preciosos
+- Amor duradero
+
+### 11.5 Guía tranquila para nuevos cuidadores
+
+**Descripción del escenario**:
+Ofrece compañía y orientación cálida a nuevos dueños de mascotas. Hace que el camino de cuidar una mascota empiece con confianza y alegría.
+
+**Claves para crear ambiente**:
+- Orientación completa
+- Ánimo cálido
+- Acompañamiento tranquilizador
+
+---
+
+## 12. Salud financiera
+
+> 💡 **Idea central**: la libertad financiera no es la única meta; la salud financiera importa más
+
+### 12.1 Asistente de conciencia emocional del consumo
+
+**Descripción del escenario**:
+Detecta las emociones detrás de compras impulsivas y ayuda a construir una visión saludable del consumo. Entender por qué se quiere comprar importa más que comprar o no comprar.
+
+**Claves para crear ambiente**:
+- Conciencia amable
+- Comprensión sin juicio
+- Hábitos saludables
+
+### 12.2 Motivación visual para metas de ahorro
+
+**Descripción del escenario**:
+Convierte metas de ahorro en progreso visual hacia un sueño. Ahorrar se transforma en un viaje para hacer realidad algo deseado.
+
+**Claves para crear ambiente**:
+- Progreso visual
+- Conexión con sueños
+- Satisfacción de logro
+
+### 12.3 Aprendizaje ligero de finanzas personales
+
+**Descripción del escenario**:
+Enseña finanzas personales de manera ligera y entretenida. Gestionar dinero no debería ser aburrido; también puede ser una exploración interesante.
+
+**Claves para crear ambiente**:
+- Expresión ligera
+- Casos interesantes
+- Conocimiento práctico
+
+### 12.4 Aliviador de ansiedad financiera
+
+**Descripción del escenario**:
+Ofrece apoyo emocional y consejos prácticos ante presión financiera. La ansiedad no resuelve problemas, pero la calma sí ayuda.
+
+**Claves para crear ambiente**:
+- Calmar emociones
+- Consejos prácticos
+- Fuerza de la esperanza
+
+### 12.5 Juego de inversión de bajo monto
+
+**Descripción del escenario**:
+Permite experimentar la inversión de forma gamificada y reduce la barrera de entrada. Aprender inversión en un entorno seguro.
+
+**Claves para crear ambiente**:
+- Experiencia gamificada
+- Prueba segura
+- Placer de aprender
+
+---
+
+## 13. Desarrollo profesional
+
+> 💡 **Idea central**: la carrera no es una vía fija, sino un territorio abierto para explorar
+
+### 13.1 Acompañante para la confusión profesional
+
+**Descripción del escenario**:
+Durante periodos de duda profesional, ofrece escucha, exploración y orientación. Estar confundido es normal; lo importante es no afrontarlo a solas.
+
+**Claves para crear ambiente**:
+- Escucha sin juicio
+- Exploración de posibilidades
+- Compañía cálida
+
+### 13.2 Activador de sentido de logro laboral
+
+**Descripción del escenario**:
+Ayuda a descubrir valor y sentido en el trabajo y reavivar entusiasmo. A veces solo hace falta cambiar el ángulo de mirada.
+
+**Claves para crear ambiente**:
+- Descubrir valor
+- Reavivar entusiasmo
+- Sentido de logro
+
+### 13.3 Asistente de ambiente social en el trabajo
+
+**Descripción del escenario**:
+Ofrece temas ligeros y consejos de interacción para socializar en el trabajo. Hace que el contacto profesional sea menos incómodo y más natural.
+
+**Claves para crear ambiente**:
+- Temas ligeros
+- Interacción natural
+- Relaciones cómodas
+
+### 13.4 Generador de inspiración para proyectos paralelos
+
+**Descripción del escenario**:
+Activa ideas de proyectos paralelos según intereses y habilidades personales. Explora posibilidades infinitas fuera del trabajo principal.
+
+**Claves para crear ambiente**:
+- Excavación de intereses
+- Exploración de posibilidades
+- Ánimo para actuar
+
+### 13.5 Estación de confianza antes de entrevistas
+
+**Descripción del escenario**:
+Ofrece preparación psicológica y ánimo antes de entrevistas. Ayuda a llegar a la oportunidad en el mejor estado posible.
+
+**Claves para crear ambiente**:
+- Construcción de confianza
+- Preparación suficiente
+- Mejor estado personal
+
+---
+
+## 14. Espacio del hogar
+
+> 💡 **Idea central**: el hogar no es solo un lugar donde vivir, sino un refugio mental
+
+### 14.1 Diseñador de ambiente para el hogar
+
+**Descripción del escenario**:
+Diseña ambientes domésticos según estado de ánimo y estación. Permite que el hogar cambie con el ánimo y el paso de las estaciones.
+
+**Claves para crear ambiente**:
+- Diseño de atmósfera
+- Cambios estacionales
+- Ajuste al estado de ánimo
+
+### 14.2 Guía de transformación estacional del hogar
+
+**Descripción del escenario**:
+Renueva la decoración del hogar según la estación para mantener frescura. Hace que la casa conserve vida y sorpresa.
+
+**Claves para crear ambiente**:
+- Temas estacionales
+- Sensación de novedad
+- Ritual de vida cotidiana
+
+### 14.3 Magia para espacios pequeños
+
+**Descripción del escenario**:
+Hace que espacios pequeños también tengan una atmósfera cómoda y cálida. El tamaño no es lo importante; lo importante es la sensación.
+
+**Claves para crear ambiente**:
+- Optimización del espacio
+- Ambiente cálido
+- Vida cómoda
+
+### 14.4 Creador de rituales domésticos
+
+**Descripción del escenario**:
+Crea rituales para actividades cotidianas del hogar. Incluso las tareas comunes pueden ganar sentido.
+
+**Claves para crear ambiente**:
+- Diseño de ritual
+- Atribución de significado
+- Calidad de vida
+
+### 14.5 Acompañamiento psicológico para decluttering
+
+**Descripción del escenario**:
+Ofrece apoyo psicológico y ayuda para decidir mientras se ordenan objetos. Ordenar no es solo tirar cosas; también es ordenar el interior.
+
+**Claves para crear ambiente**:
+- Apoyo psicológico
+- Ayuda para decidir
+- Orden interior
+
+---
+
+## 15. Cocina y gastronomía
+
+> 💡 **Idea central**: la comida es lenguaje de amor y cocinar es una forma de expresarlo
+
+### 15.1 Cocina reparadora para comer a solas
+
+**Descripción del escenario**:
+Diseña comidas sencillas y reconfortantes para quienes viven solos. Incluso a solas, vale la pena comer bien y cuidarse bien.
+
+**Claves para crear ambiente**:
+- Preparación sencilla
+- Sabor reparador
+- Expresión de amor propio
+
+### 15.2 Diseño de ambiente para mesas festivas
+
+**Descripción del escenario**:
+Diseña mesas con sentido de ritual para días especiales. Hace que cada comida sea un momento digno de recordar.
+
+**Claves para crear ambiente**:
+- Diseño de ritual
+- Disfrute visual
+- Buenos recuerdos
+
+### 15.3 Emparejador de cocina y estado de ánimo
+
+**Descripción del escenario**:
+Recomienda alimentos y preparaciones adecuadas al ánimo actual. A veces lo que necesitamos es justo ese sabor correcto.
+
+**Claves para crear ambiente**:
+- Ajuste al estado de ánimo
+- Poder reparador de la comida
+- Conexión emocional
+
+### 15.4 Generador de confianza para principiantes en cocina
+
+**Descripción del escenario**:
+Ofrece ánimo cálido y recetas sencillas a personas sin base culinaria. Cualquiera puede convertirse en su propio chef.
+
+**Claves para crear ambiente**:
+- Comienzo simple
+- Ánimo cálido
+- Construcción de confianza
+
+### 15.5 Guía de ambiente para fotografía gastronómica
+
+**Descripción del escenario**:
+Hace que la comida casera también pueda fotografiarse con un ambiente apetecible. Registrar comida también es registrar la belleza de la vida.
+
+**Claves para crear ambiente**:
+- Creación de atmósfera
+- Disfrute visual
+- Registro de la vida
+
+---
+
+## 16. Estilo y vestimenta
+
+> 💡 **Idea central**: vestirse es expresarse; el estilo es la manifestación exterior de lo interior
+
+### 16.1 Mood board del outfit de hoy
+
+**Descripción del escenario**:
+Genera inspiración de vestimenta según clima, ocasión y estado de ánimo. Permite que cada outfit exprese el ánimo del momento.
+
+**Claves para crear ambiente**:
+- Expresión del estado de ánimo
+- Ajuste a la ocasión
+- Construcción de confianza
+
+### 16.2 Estilista de armario cápsula
+
+**Descripción del escenario**:
+Crea combinaciones infinitas con prendas limitadas. Menos es más, y lo simple también puede tener mucho estilo.
+
+**Claves para crear ambiente**:
+- Filosofía minimalista
+- Combinaciones creativas
+- Moda sostenible
+
+### 16.3 Viaje de exploración del estilo personal
+
+**Descripción del escenario**:
+Ayuda a descubrir y construir un estilo personal único. Vestirse no es solo ponerse ropa, sino expresar una actitud propia.
+
+**Claves para crear ambiente**:
+- Exploración de uno mismo
+- Construcción de estilo
+- Expresión de confianza
+
+### 16.4 Creativo para reinventar ropa antigua
+
+**Descripción del escenario**:
+Aporta nuevas ideas de combinación para ropa antigua. Da nueva vida a prendas viejas y crea moda sostenible.
+
+**Claves para crear ambiente**:
+- Combinaciones creativas
+- Filosofía ecológica
+- Sensación de novedad
+
+### 16.5 Asesor de look para ocasiones especiales
+
+**Descripción del escenario**:
+Diseña looks que den confianza para ocasiones importantes. Hace que cada momento clave tenga una presentación impecable.
+
+**Claves para crear ambiente**:
+- Ajuste a la ocasión
+- Aumento de confianza
+- Presentación impecable
+
+---
+
+## Principios centrales para diseñar productos B2C
+
+### 1. De "función" a "sensación"
+
+Los productos B2B preguntan "qué problema resuelve esta función"; los productos B2C preguntan "qué sensación genera esta función".
+
+| Pensamiento B2B | Pensamiento B2C |
+|---------|---------|
+| Aumentar eficiencia | Ahorrar tiempo para hacer lo que gusta |
+| Reducir costes | Hacer que cada euro gastado valga la pena |
+| Resolver puntos de dolor | Crear buenas experiencias |
+| Funcionalidad completa | Sensación correcta |
+
+### 2. Tres capas para crear ambiente
+
+**Capa sensorial**: diseño visual, auditivo y táctil
+- Colores cálidos
+- Sonidos relajantes
+- Animaciones fluidas
+
+**Capa emocional**: resonancia y guía emocional
+- Entender el estado de ánimo del usuario
+- Ofrecer apoyo emocional
+- Crear emociones positivas
+
+**Capa de significado**: reconocimiento de valor y pertenencia
+- Hacer que el usuario se sienta comprendido
+- Crear sentido de pertenencia
+- Dar significado a la acción
+
+### 3. El poder de la sugestión psicológica
+
+El copy y el diseño de un producto B2C transmiten sugestiones psicológicas:
+
+- **Sugestión positiva**: "Ya lo estás haciendo bien", "Ve poco a poco, no pasa nada"
+- **Sugestión de pertenencia**: "A muchas personas les pasa lo mismo", "No estás solo"
+- **Sugestión de crecimiento**: "Cada intento es progreso", "Estás mejorando"
+
+### 4. Ayudar al usuario a ser una mejor versión de sí mismo
+
+Los mejores productos B2C no intentan cambiar al usuario; le ayudan a convertirse en quien quiere ser.
+
+- No "deberías...", sino "puedes..."
+- No "tienes que...", sino "si quieres..."
+- No "todavía no eres suficiente...", sino "ya has..."
+
+---
+
+> 🌟 **Recuerda**: el usuario B2C no compra funciones, compra sensaciones; no compra herramientas, compra compañía; no compra servicios, compra comprensión.
diff --git a/docs/es-es/stage-1/appendix-double-diamond/index.md b/docs/es-es/stage-1/appendix-double-diamond/index.md
new file mode 100644
index 0000000..b0d5a40
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-double-diamond/index.md
@@ -0,0 +1,544 @@
+---
+title: 'Modelo Double Diamond: primero haz lo correcto, luego hazlo bien'
+description: 'Comprende las cuatro etapas de Discover, Define, Develop, Deliver para evitar crear prototipos antes de entender bien el problema.'
+---
+
+<script setup>
+const duration = 'Aproximadamente <strong>1.5 horas</strong>'
+</script>
+
+# Modelo Double Diamond: primero haz lo correcto, luego hazlo bien
+
+<a id="top-dd"></a>
+
+## Resumen del capitulo
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Double Diamond', 'Pensamiento de diseno', 'Analisis de necesidades', 'Diseno de soluciones']"
+  coreOutput="1 definicion de problema mas clara y 1 punto de entrada de validacion mas razonable"
+  expectedOutput="Dejar de precipitarse a dibujar prototipos, sabiendo primero pensar claramente en el problema y luego comparar soluciones"
+>
+
+Muchas personas, la primera vez que hacen un producto, caen en la trampa mas facil: no es que "no se esfuercen lo suficiente", sino que entran demasiado rapido en la solucion.
+
+Apenas les viene una direccion a la mente, ya estan pensando en como dibujar la pagina, donde poner los botones, si conectar IA, si hacer login y registro, con que herramienta hacer el prototipo. Despues de un rato de trabajo, descubren que el problema mas fundamental no se ha pensado claramente: el usuario realmente tiene este punto de dolor? Vale la pena resolver este problema ahora? Crees que estas avanzando en el proyecto, pero en realidad solo estas acelerando en la direccion equivocada.
+
+El modelo Double Diamond existe precisamente para evitar esta situacion.
+
+Su recordatorio mas valioso es: **"hacer lo correcto" y "hacerlo bien" son dos etapas completamente diferentes.** Si aun no has aclarado el problema y te precipitas a hacer prototipos, normalmente solo haras la direccion equivocada mas completa.
+
+</ChapterIntroduction>
+
+::: info SOP minimo
+**Objetivo**: Despues de leer, sabras mejor cuando hacer productos, cuando pensar primero en el problema y cuando empezar a pensar en soluciones y prototipos, evitando precipitarte en la direccion equivocada desde el principio.
+
+**Accion**: Sigue los cuatro pasos `Discover -> Define -> Develop -> Deliver`, haciendo solo lo que corresponde a la etapa actual en cada paso.
+
+**Resultado**: Obtendras una definicion de problema mas clara, varias soluciones comparables y una version minima verificable.
+
+**Enlaces rapidos**: [Que es el Double Diamond](#dd-what) · [Primer diamante](#dd-first) · [Como te ayuda la IA](#dd-ai)
+:::
+
+## Aprenderas lo siguiente
+
+1. Que es el modelo Double Diamond, y por que es adecuado para personas sin experiencia al hacer productos
+2. Que hacen las cuatro etapas Discover, Define, Develop y Deliver respectivamente
+3. Como distinguir entre "ahora debo seguir divergiendo" y "ahora debo empezar a converger"
+4. Como usar el modelo Double Diamond en productos de IA, diseno de prototipos y validacion de necesidades
+
+<a id="dd-what"></a>
+## [1. Que es exactamente el modelo Double Diamond](#top-dd)
+
+El modelo Double Diamond es un marco clasico de proceso de diseno promovido por el **Design Council** del Reino Unido. Representa un proceso completo de diseno e innovacion como dos formas de diamante consecutivas.
+
+La razon de ser "diamantes" es que cada diamante contiene dos acciones opuestas pero igualmente importantes:
+
+- **Divergencia**: primero abrir el campo de vision, ver mas posibilidades
+- **Convergencia**: luego reducir el alcance, tomar decisiones y priorizar
+
+Todo el proceso tiene cuatro pasos:
+
+1. **Discover**: entender ampliamente a los usuarios, problemas, entorno y mercado
+2. **Define**: extraer de la gran cantidad de informacion el problema central que realmente vale la pena resolver
+3. **Develop**: explorar multiples soluciones alrededor del problema central
+4. **Deliver**: filtrar, prototipar, probar y entregar la solucion mas adecuada
+
+Si comprimes estos cuatro pasos en una frase facil de recordar, seria:
+
+- **Primer diamante**: primero aclarar que problema resolver exactamente
+- **Segundo diamante**: luego decidir con que solucion resolverlo
+
+Que es exactamente lo que dijiste muy bien:
+
+- **Primer diamante: hacer lo correcto**
+- **Segundo diamante: hacerlo bien**
+
+## 2. Por que el modelo Double Diamond es especialmente adecuado para principiantes
+
+El ritmo mas comun de los principiantes al hacer productos suele ser:
+
+- Se les ocurre una idea
+- Les parece que esta direccion es genial
+- Empiezan inmediatamente a dibujar prototipos
+- Haciendo y haciendo, descubren que las funciones son cada vez mas
+- Al final no saben que problema estan resolviendo exactamente
+
+El valor del modelo Double Diamond no esta en complicar el proceso, sino en **obligarte a separar "entender el problema" y "disenar la solucion".**
+
+Esto suena muy comun, pero en realidad es muy importante. Porque muchos productos fracasados no es que la ejecucion no fuera seria, sino:
+
+- Eligieron el problema equivocado
+- Malentendieron al usuario
+- Se bloquearon demasiado pronto en una solucion
+- Gastaron mucho tiempo en pulir detalles sin validar la direccion
+
+El modelo Double Diamond te esta recordando constantemente:
+
+- No porque una idea te parezca facil, asumas que el problema ya esta confirmado
+- No porque una solucion pueda implementarse, asumas que vale la pena hacerla
+- No porque un prototipo parezca completo, asumas que los usuarios realmente lo necesitaran
+
+<a id="dd-first"></a>
+## [3. Primer diamante: hacer lo correcto](#top-dd)
+
+El primer diamante se centra en **el problema en si**, no en la solucion.
+
+Puedes entenderlo como una frase: **no te precipites, primero averigua si realmente vale la pena hacerlo.**
+
+### 3.1 Discover: primero abre el espacio del problema
+
+La tarea central de la fase Discover es **investigar ampliamente, no llegar rapido a conclusiones.**
+
+Lo que normalmente se hace en este paso incluye:
+
+- Ver como los usuarios actuan en escenarios reales
+- Entrevistar a usuarios potenciales, entender cuando fue la ultima vez que encontraron el problema
+- Observar como se las arreglan actualmente
+- Ver como manejan la competencia y las soluciones alternativas
+- Recoger informacion de mercado, procesos, restricciones y relaciones aguas arriba/aguas abajo
+
+Muchas personas confunden Discover con "ver mas informacion". Pero lo mas critico es: **tienes que entender a las personas y los escenarios, no solo buscar un monton de informacion.**
+
+Por ejemplo, si quieres hacer una herramienta de "IA que ayuda a organizar actas de reuniones", en la fase Discover deberias prestar mas atencion a:
+
+- Despues de la reunion, donde duele mas exactamente al usuario
+- Es dificil tomar notas, organizarlas o sincronizarlas
+- Ahora escriben ellos mismos, le piden al becario, escuchan la grabacion, o simplemente no organizan
+- Que escenarios de reunion necesitan mas actas y cuales no las necesitan en absoluto
+
+El objetivo mas importante de este paso no es llegar a una respuesta, sino **no asumir demasiado pronto que ya conoces la respuesta.**
+
+### 3.2 Define: extraer el problema central de un monton de informacion
+
+Si Discover abre el campo de vision, Define empieza a cerrarlo.
+
+Lo que hay que hacer en la fase Define no es mantener todas las observaciones, sino preguntar:
+
+- Cual es el problema que realmente merece la pena resolver primero
+- Que problema aparece con mas frecuencia, es el mas doloroso y el mas valioso
+- En que escenario unico debemos centrarnos en la primera version
+
+El nucleo de este paso es converger un tema amplio en una definicion de problema clara.
+
+Por ejemplo, al principio dices:
+
+> Quiero hacer una herramienta con IA para mejorar la eficiencia de las reuniones.
+
+En la fase Define, una mejor expresion podria ser:
+
+> Primero resolvamos el problema de que los equipos de proyecto, despues de reuniones de colaboracion de 30 a 60 minutos, no pueden producir en 10 minutos un acta con tareas pendientes, responsables y fechas limite.
+
+En este punto el problema empieza a aclararse:
+
+- Quien es el usuario
+- Cual es el escenario
+- Cual es el punto de bloqueo
+- Cual es el criterio de exito
+
+La esencia de Define es **converger de "hay muchos problemas" a "que problema resolver primero esta vez".**
+
+## 4. Segundo diamante: hacerlo bien
+
+Cuando completas el primer diamante, solo entonces es realmente apropiado entrar en el segundo. Porque ahora no estas resolviendo una direccion vaga, sino un problema concreto que ha sido convergido.
+
+### 4.1 Develop: diverge soluciones alrededor del problema central
+
+El foco de la fase Develop es **explorar multiples soluciones posibles alrededor del mismo problema.**
+
+Nota, la divergencia aqui es diferente de la fase Discover.
+
+- La divergencia de Discover explora el espacio de problemas
+- La divergencia de Develop explora el espacio de soluciones
+
+Por ejemplo, en el caso de las actas de reuniones, al llegar a la fase Develop, puedes empezar a pensar:
+
+- Hacer una herramienta web o un plugin de reuniones
+- Procesar despues de subir la grabacion o registrar en tiempo real
+- Solo hacer resumenes o enfocarse en extraer tareas pendientes
+- Enfatizar la eficiencia individual o la sincronizacion del equipo
+- Dar al usuario libertad de edicion o producir directamente plantillas estructuradas
+
+Este paso es ideal para brainstorming y para abrir las soluciones con el equipo.
+
+Pero hay un requisito previo: **todas las soluciones deben servir al mismo problema ya definido.**  
+Si el problema no esta claramente definido, Develop facilmente se convierte de nuevo en funciones volando en todas direcciones.
+
+### 4.2 Deliver: elegir la solucion, hacer prototipos, probar y entregar
+
+La fase Deliver es la fase de convergencia del segundo diamante.
+
+Lo que debes hacer aqui no es seguir pensando mas, sino empezar a juzgar:
+
+- Que solucion es mas adecuada para la etapa actual
+- Que version es la mas pequena pero mas util
+- Que funciones deben hacerse primero y cuales pueden esperar
+- Como hacer prototipos, pruebas y validacion a pequena escala
+
+Muchas personas piensan que Deliver equivale a "lanzamiento". Pero su significado mas preciso es: **convertir una solucion en algo que se pueda probar, verificar e iterar.**
+
+Puede ser:
+
+- Un diagrama de flujo de baja fidelidad
+- Un prototipo en Figma
+- Un MVP funcional
+- Una prueba de usuario a pequena escala
+- Una version iterada despues de retroalimentacion real
+
+El punto de Deliver no es "entrega perfecta", sino **poner la solucion en un entorno real para verificarla lo antes posible.**
+
+## 5. Una tabla de comparacion facil de recordar
+
+Si siempre te confundes con las cuatro etapas, puedes recordar directamente esta version:
+
+| Etapa | Que estas haciendo | Palabras clave | Productos comunes |
+| --- | --- | --- | --- |
+| Discover | Entender el problema | Investigacion, observacion, entrevistas, recopilar informacion | Insights de usuarios, notas de escenario, lista de problemas |
+| Define | Definir el problema | Extraer, enfocar, priorizar, reescribir el problema | Definicion del problema, prioridades, punto de entrada MVP |
+| Develop | Explorar soluciones | Brainstorming, comparacion, cocreacion, conceptos de prototipo | Lista de soluciones, bocetos de flujo, direccion del prototipo |
+| Deliver | Verificar soluciones | Prototipos, pruebas, iteracion, entrega | Prototipos, retroalimentacion de pruebas, version optimizada |
+
+Comprimiendolo aun mas:
+
+- **Discover / Define**: resolver "hacer lo correcto"
+- **Develop / Deliver**: resolver "hacerlo bien"
+
+## 6. Los errores mas comunes con el modelo Double Diamond
+
+### 6.1 Pasar directamente a Deliver sin Discover
+
+Este es el mas comun. Muchas personas apenas tienen una idea y ya estan dibujando prototipos, escribiendo PRDs, conectando modelos, haciendo paginas.
+
+El problema no es que no trabajes en serio, sino que puede que ni siquiera hayas confirmado si el problema vale la pena resolver.
+
+### 6.2 Discover mucho tiempo, pero nunca llegar a Define
+
+Otro extremo es investigar continuamente, leer informacion constantemente, hacer entrevistas sin parar, pero sin atreverse a converger.
+
+El Double Diamond no es para que diverjas infinitamente, sino para recordarte: despues de la divergencia debes entrar en la evaluacion y priorizacion.
+
+### 6.3 Despues de Define, cambiar el problema a escondidas
+
+Muchos equipos, al llegar a Develop, modifican la definicion del problema para adaptarse a una solucion que es mas facil de implementar.
+
+Esto es peligroso. Porque puede que no estes resolviendo el problema, sino buscando justificaciones para la solucion que te gusta.
+
+### 6.4 Confundir Deliver con "lanzamiento completo"
+
+Deliver no significa que debas completar todo el producto para considerar que ha terminado. Muchas veces, un prototipo que se puede probar o una ronda de pruebas con usuarios reales ya es un buen deliver.
+
+## 7. Como usar el modelo Double Diamond en productos de IA
+
+Los productos de IA son especialmente propensos a caer en la trampa de "las capacidades primero", porque las capacidades del modelo parecen demasiado atractivas. Querras pensar directamente en:
+
+- Deberia conectar multimodalidad?
+- Deberia hacer un Agent?
+- Deberia anadir workflows?
+- Deberia conectar voz, imagen, busqueda en la web?
+
+Pero el modelo Double Diamond te obliga a preguntar primero:
+
+- En que paso exactamente el usuario esta bloqueado
+- Este bloqueo requiere SI o SI IA?
+- Sin IA, cual es exactamente la mayor debilidad del metodo actual
+- Despues de anadir IA, cual es el progreso mas importante
+
+Esto te ayuda a evitar una situacion comun: **capacidades fuertes, valor debil.**
+
+Una secuencia practica es:
+
+1. En la fase Discover, observar como los usuarios manejan las tareas actualmente
+2. En la fase Define, escribir el escenario mas doloroso como una definicion de problema clara
+3. En la fase Develop, comparar que capacidades de IA sirven mejor a este problema
+4. En la fase Deliver, hacer una version minima para que usuarios reales la prueben
+
+## 8. Una plantilla Double Diamond que puedes usar directamente
+
+Si estas haciendo tu propio producto, puedes seguir esta secuencia:
+
+### Discover
+
+- Quien es el usuario que he observado?
+- Cuando fue la ultima vez que encontraron este problema?
+- Como lo resuelven ahora?
+- Cual es la parte mas molesta, lenta o que menos confianza les da?
+
+### Define
+
+- De todos estos problemas, cual merece la pena resolver primero?
+- Que escenario es el mas frecuente o critico?
+- A quien serviremos primero en la primera version, y que problema resolveremos?
+- Despues de resolverlo exitosamente, como cambiara el estado del usuario?
+
+### Develop
+
+- Para este problema, que soluciones posibles hay?
+- Que soluciones son las mas ligeras, rapidas y faciles de verificar?
+- Que es imprescindible y que puede esperar?
+
+### Deliver
+
+- Cual es lo minimo que podemos entregar para verificar esta direccion?
+- Es un diagrama de flujo, un prototipo o un MVP?
+- A quien necesitamos pedir que pruebe?
+- Despues de la prueba, como decidimos si continuar, modificar o abandonar?
+
+## 9. Un ejemplo que incluso un principiante puede entender
+
+Supongamos que quieres hacer una herramienta de IA para "ayudar a universitarios a preparar su curriculum de busqueda de empleo".
+
+Muchas personas entrarian directamente en el segundo diamante, pensando:
+
+- Deberia hacer embellecimiento con un clic?
+- Deberia hacer reescritura inteligente?
+- Deberia hacer matching automatico con la descripcion del puesto?
+- Deberia generar una presentacion personal?
+
+Pero siguiendo el modelo Double Diamond, un mejor proceso seria:
+
+### Primer diamante
+
+**Discover**
+
+- Hablar con graduados recientes sobre cuando fue la ultima vez que modificaron su curriculum
+- Ver como pasan de un curriculum viejo a una nueva version
+- Entender si lo que mas les frustra es "no saber escribir", "no saber modificar" o "no saber juzgar si esta bien"
+
+**Define**
+
+- Finalmente converger en un problema mas concreto:
+- No es "los universitarios no saben hacer curriculums"
+- Sino "los estudiantes que envian su primera candidatura de practica tienen dificultades para reescribir sus experiencias existentes de forma adaptada al puesto, por lo que retrasan el envio"
+
+### Segundo diamante
+
+**Develop**
+
+- Pensar varias soluciones: biblioteca de plantillas, reescritura con IA, comparacion con el puesto, puntuacion del curriculum, referencia de casos
+
+**Deliver**
+
+- La primera version solo hace "reescribir los bullet points de experiencias segun la descripcion del puesto"
+- Probar con 5 estudiantes, ver si enviaran su primera version mas rapido
+
+Descubriras que, una vez que el primer diamante se hace solidamente, el segundo diamante se vuelve mucho mas claro.
+
+## 10. Resumen
+
+Lo mas poderoso del modelo Double Diamond es que te ayuda a descomponer una masa confusa en cuatro acciones mas claras:
+
+- Primero diverge para entender el problema
+- Luego converge para definir el problema
+- Luego diverge para explorar soluciones
+- Finalmente converge para entregar la solucion
+
+No te hace mas lento, sino que te hace **evitar muchos desvios que parecen ocupados pero van en la direccion equivocada.**
+
+Especialmente en la era de la IA, donde hacer cosas se vuelve cada vez mas rapido, el modelo Double Diamond se vuelve aun mas importante. Porque cuando "hacerlo" es cada vez mas facil, la capacidad verdaderamente escasa se convierte en: **estas resolviendo un problema que vale la pena resolver, y lo estas haciendo de la forma adecuada.**
+
+Recuerda solo esta frase:
+
+**Primero haz lo correcto, luego hazlo bien.**
+
+<a id="dd-ai"></a>
+## [11. Como usar la IA para recorrer el proceso Double Diamond](#top-dd)
+
+El modelo Double Diamond en si no es una herramienta de IA, pero la IA es muy adecuada para actuar como "acelerador" en las cuatro etapas. La clave no es que la IA tome decisiones por ti, sino que te ayude a expandir tu campo de vision, organizar informacion, comparar soluciones y generar materiales de validacion.
+
+### 11.1 En la fase Discover, usar la IA para hacer una primera preparacion de informacion
+
+Antes de las entrevistas e investigacion formales, puedes pedir a la IA que haga un barrido ligero de problemas, como:
+
+- Que soluciones alternativas comunes existen en el mercado
+- De que se quejan mas los usuarios en comunidades publicas
+- En que escenarios y grupos de personas es mas frecuente este problema
+- Que suelen ignorar los productos existentes
+
+Este paso no puede sustituir la investigacion real, pero es ideal para construir rapidamente un mapa de problemas.
+
+Una entrada simple para principiantes podria ser:
+
+```text
+Quiero hacer una herramienta para ayudar a universitarios a modificar su curriculum.
+No me des ideas de funciones todavia, primero ayudame a ver que problemas encuentra mas a menudo la gente con este tema.
+```
+
+La IA podria responder:
+
+```text
+Mapa inicial de problemas:
+
+1. No saber que experiencias incluir
+2. No saber como adaptar el curriculum a cada puesto
+3. Modificar muchas versiones sin certeza de si esta bien
+4. Necesitar que alguien lo revise, pero no querer molestar siempre
+5. Por la incertidumbre, posponer continuamente el envio
+```
+
+La funcion de este tipo de resultado no es sacar conclusiones por ti, sino ayudarte a entrar mas rapido en Discover.
+
+### 11.2 En la fase Define, dejar que la IA te ayude a converger la definicion del problema
+
+Despues de recoger mucha informacion, lo mas dificil para mucha gente es comprimir el problema en una frase verdaderamente clara. Puedes pasar tus notas de investigacion a la IA y pedirle que las comprima en varias definiciones de problema candidatas:
+
+```text
+A continuacion estan los comentarios de usuarios y notas de investigacion que he recogido en la fase Discover:
+[pega el contenido]
+
+Por favor ayudame a hacer tres cosas:
+1. Identificar los patrones de problemas que aparecen con mas frecuencia
+2. Organizar 3 problemas que merezca la pena priorizar, segun frecuencia, intensidad de dolor y verificabilidad
+3. Escribir cada problema como una definicion concreta en una frase
+```
+
+Asi te sera mas facil entrar en Define, en lugar de quedarte atrapado en "hay muchos problemas".
+
+Puedes incluso hacer la entrada muy simple:
+
+```text
+Los problemas que he recogido son:
+1. La gente no sabe que poner en el curriculum
+2. La gente no sabe como modificarlo
+3. La gente siempre siente que no esta bien modificado y no se atreve a enviarlo
+
+Ayudame a ver, cual problema es mas adecuado para resolver primero en la primera version.
+```
+
+La IA podria responder:
+
+```text
+Problema sugerido para priorizar:
+
+"Los estudiantes que envian su primera candidatura de practica no estan seguros de si su curriculum ha alcanzado el nivel necesario para enviar, por lo que lo modifican repetidamente y retrasan el envio."
+
+Razones:
+1. Este problema es mas concreto
+2. Puede explicar el comportamiento de procrastinacion
+3. Es mas facil disenar una version pequena para verificar
+```
+
+Este tipo de resultado es muy util porque te ayuda a converger de un monton de problemas vagos a una definicion mas como un punto de partida para un MVP.
+
+### 11.3 En la fase Develop, usar la IA para diverger multiples soluciones
+
+Muchas personas, una vez definido el problema, se fijan solo en la primera solucion que les viene a la mente. La IA es ideal en este paso para forzarte a diverger:
+
+```text
+Ya he definido un problema central: [tu definicion del problema]
+Por favor no me des una respuesta final directamente, sino que propongas 2-3 direcciones de solucion desde cada uno de estos angulos:
+1. El MVP mas ligero
+2. La solucion mas adecuada para verificar la necesidad
+3. La solucion mas adecuada para mejorar la experiencia
+4. Una solucion que no dependa de IA
+5. Una solucion que dependa de IA
+Finalmente, compara las ventajas, riesgos y costos de verificacion de cada solucion.
+```
+
+Asi no te ataras demasiado pronto a una unica solucion.
+
+Una entrada simple podria ser:
+
+```text
+Mi definicion de problema ahora es:
+"Los universitarios no estan seguros de si su curriculum ya se puede enviar, por lo que siguen posponiendo el envio."
+
+Por favor ayudame a pensar en 4 soluciones diferentes, no me des solo una.
+```
+
+La IA podria responder:
+
+```text
+Solucion 1: Checklist de "preparacion para enviar" del curriculum
+Solucion 2: Reescritura adaptada segun la descripcion del puesto
+Solucion 3: Subir el curriculum y recibir alertas de riesgo
+Solucion 4: Proporcionar comparacion con casos excelentes para ayudar al usuario a juzgar la distancia
+```
+
+En este punto te sera mas facil entrar en "comparar soluciones", en lugar de fijarte solo en la reescritura con IA desde el principio.
+
+### 11.4 En la fase Deliver, usar la IA para generar textos de prototipos y materiales de prueba
+
+Cuando entras en la fase Deliver, la IA es muy adecuada para acelerar estos trabajos:
+
+- Generar textos de pagina para prototipos de baja fidelidad
+- Organizar un guion de prueba de usuario
+- Generar multiples versiones comparables de titulos, botones y descripciones
+- Organizar la retroalimentacion y la lista de problemas despues de las pruebas
+
+Por ejemplo, puedes pedir a la IA que genere un guion de prueba de usuario de 20 minutos, o que te ayude a resumir la retroalimentacion de 5 usuarios en criterios de "continuar / modificar direccion / pausar".
+
+Una entrada minima podria ser:
+
+```text
+He hecho un prototipo muy simple:
+el usuario sube su curriculum y el sistema le indica que partes aun no estan listas para enviar.
+
+Por favor ayudame a generar un guion de prueba de usuario de 15 minutos.
+```
+
+La IA podria responder:
+
+```text
+Guion de prueba de 15 minutos:
+
+1. Primero pedir al usuario que describa su ultima experiencia enviando un curriculum
+2. Dejar que el usuario complete independientemente la subida del curriculum
+3. Observar si entiende los resultados de la retroalimentacion
+4. Preguntar: de estas indicaciones, cuales son las mas utiles y cuales te confunden
+5. Preguntar: antes del proximo envio, te gustaria usar esto de nuevo?
+```
+
+Este tipo de resultado es muy practico porque te ayuda a pasar de "ya termine el prototipo" a "como lo pruebo ahora".
+
+### 11.5 Dejar que la IA actue como "guardian de etapas"
+
+El problema mas comun del modelo Double Diamond es que la gente se salta etapas. Puedes pedir directamente a la IA que actue como guardian, recordandote en que etapa estas realmente:
+
+```text
+Por favor actua como coach de proceso de producto.
+A continuacion esta el estado actual de mi proyecto: [tu descripcion]
+Por favor juzga en que etapa estoy mas: Discover, Define, Develop o Deliver.
+Y dime:
+1. Me he saltado demasiado pronto a la siguiente etapa?
+2. Cual es la accion mas importante que debo completar en la etapa actual?
+3. Que cosas no debo hacer ahora?
+```
+
+Esto es especialmente util para principiantes, porque es facil "empezar a dibujar prototipos antes de haber aclarado el problema".
+
+## 📚 Tareas
+
+Por favor completa las siguientes tareas basandote en el contenido anterior:
+
+1. Elige una idea de producto que quieras hacer recientemente, y escribe un borrador de sus cuatro pasos: Discover, Define, Develop, Deliver
+2. En la fase Define, obligate a comprimir el problema en una frase concreta
+3. En la fase Develop, lista al menos 3 soluciones diferentes, en lugar de fijarte solo en la primera que se te ocurra
+4. En la fase Deliver, escribe una version minima de verificacion que puedas entregar en una semana
+
+## Lectura adicional
+
+Este articulo se basa principalmente en los materiales oficiales del Design Council sobre el Double Diamond, adecuados para seguir profundizando:
+
+- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
+- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
+- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
diff --git a/docs/es-es/stage-1/appendix-idea-sources/index.md b/docs/es-es/stage-1/appendix-idea-sources/index.md
new file mode 100644
index 0000000..d7ace19
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-idea-sources/index.md
@@ -0,0 +1,301 @@
+---
+title: 'De donde sacar ideas: 3 fuentes de referencia mas adecuadas para principiantes'
+description: 'Articulo introductorio de ideas de producto para lectores sin experiencia. Lista sitios web, fuentes de tendencias y listas de VC para encontrar direcciones especificas.'
+---
+
+<script setup>
+const duration = 'Aproximadamente <strong>1.5 horas</strong>'
+</script>
+
+# De donde sacar ideas: 3 fuentes de referencia mas adecuadas para principiantes
+
+<a id="top-idea-sources"></a>
+
+## Resumen del capitulo
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Buscar ideas', 'Direccion de producto', 'Descubrimiento de necesidades', 'Observacion de la industria']"
+  coreOutput="1 direccion de producto mas concreta y que valga la pena investigar"
+  expectedOutput="Saber donde buscar, como analizar y que mirar primero, sin quedarse solo con ideas vagas como 'AI + cierto sector'"
+>
+
+Muchas personas se quedan atascadas en el primer paso, no porque no tengan ninguna inspiracion, sino porque despues de ver mucho contenido, lo que les queda en la cabeza son palabras grandes:
+
+- AI for education
+- AI for healthcare
+- AI for finance
+- AI agent for business
+
+Todas estas aun no son ideas. Solo te dicen que "la direccion es muy grande", pero no te dicen:
+
+- Quien las usa
+- En que escenario se usan
+- Como se las arreglan ahora
+- Que paso vale la pena atacar primero
+
+Este articulo no habla de metodologias abstractas, directamente te ofrece un conjunto de fuentes mas utiles.
+
+</ChapterIntroduction>
+
+::: info SOP minimo
+**Objetivo**: Despues de leer, sabras a donde ir cuando no tengas ideas, cuales enlaces son buenos para ver "necesidades concretas", cuales para ver "tendencias" y cuales para ver "negocios reales".
+
+**Accion**: Primero revisa una ronda de listas de ideas, luego una ronda de pequenos productos que ya generan dinero, despues mira tendencias y fuentes mas orientadas a negocios, y finalmente quedate con 1 direccion que estes dispuesto a seguir investigando.
+
+**Resultado**: Obtendras 1 direccion mas concreta y que valga la pena verificar, en lugar de quedarte con palabras grandes.
+
+**Enlaces rapidos**: [Lista de aplicaciones de referencia](#idea-apps) · [Fuentes de tendencias](#idea-trends) · [Fuentes mas orientadas a negocios](#idea-business) · [Fuentes de VC / aceleradoras](#idea-vc) · [Camino mas corto](#idea-path) · [Como te ayuda la IA](#idea-ai)
+:::
+
+## Aprenderas lo siguiente
+
+1. Que sitios web son adecuados para buscar ideas directamente
+2. Que sitios web son adecuados para ver pequenos productos que ya generan dinero
+3. Que fuentes son adecuadas para ver tendencias y cambios en la industria
+4. Que fuentes estan mas cerca de negocios reales y pagos reales
+5. Un camino minimo adecuado para personas sin experiencia
+
+<a id="idea-apps"></a>
+## [1. Lista de aplicaciones de referencia: primero mira lo que otros ya estan haciendo](#top-idea-sources)
+
+Este es el mejor punto de partida para principiantes, porque es lo mas concreto.
+
+### Primer nivel: abres y ya tienes una lista de ideas, solo elige
+
+- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+  El uso principal de este subreddit es: usuarios reales publican directamente "Ojala alguien hiciera un XX". Cada post suele ser una necesidad de producto concreta, con algo de descripcion del escenario. Entra y ordena por `Top -> Past Month` o `Top -> Past Year`, en 20 minutos puedes escanear un lote de necesidades reales.
+- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+  Similar al anterior, pero mas orientado a software / Apps. El formato comun de los posts es "Necesito una aplicacion que pueda hacer XX", con mayor granularidad, muchos son nichos pequenos y atractivos.
+- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+  Mas completo que los dos anteriores. Muchos posts no son solo una necesidad de una linea, sino que incluyen un poco de analisis de mercado, modelo de negocio y por que vale la pena hacerlo ahora.
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+  Publica semanalmente ideas de startup no validadas. Los campos comunes incluyen usuario objetivo, forma de monetizacion y enfoque de validacion inicial. Formato uniforme, ideal para escaneo rapido.
+- [IdeasAI](https://ideasai.com/)
+  Usa IA para generar ideas de startup, puedes seguir navegando. La calidad es variable, pero es muy util para estimular la inspiracion cuando "no tienes ninguna sensacion", y luego profundizar por tu cuenta en escenarios mas especificos.
+
+### Segundo nivel: mira los pequenos productos rentables que otros ya hacen, e infiere ideas
+
+La logica de este tipo de plataformas es: otros ya han validado la necesidad, e incluso ya estan ganando dinero. Tu los miras no para copiar, sino para ver "que problemas pequenos ya tienen clientes dispuestos a pagar".
+
+- [Starter Story](https://www.starterstory.com/)
+  Recopila muchos casos reales de pequenos negocios, generalmente con entrevistas a fundadores, datos de ingresos y proceso de inicio. Enfocate en los pequenos productos con ingresos mensuales de 10 mil a 100 mil dolares; suelen ser mas de nicho y mas cercanos a la escala de productos que una persona comun puede entender.
+- [Indie Hackers — Products](https://www.indiehackers.com/products)
+  Donde los desarrolladores independientes muestran sus productos; muchos publican sus ingresos y crecimiento. Ordena por ingresos y mira que problemas concretos resuelven los productos que ganan de miles a decenas de miles de dolares al mes.
+- [MicroConf Blog](https://microconf.com/blog)
+  Orientado a Micro SaaS. Ideal para ver cortes de productos "suficientemente pequenos, pero donde alguien esta dispuesto a pagar".
+- [1000 Tools](https://1000.tools/)
+  Sitio de agregacion de herramientas de IA. Ideal para ver que categorias ya tienen competidores, pero con calidad mediocre, o que direcciones aun no estan bien cubiertas en ciertos mercados verticales.
+- [Product Hunt](https://www.producthunt.com/)
+  Mira los tipos de productos que aparecen repetidamente. No te fijes solo en el numero uno, enfocate en que categorias tienen actividad continua pero aun sin un ganador claro.
+- [BetaList](https://betalist.com/)
+  Ideal para ver productos en etapa temprana y equipos que aun estan probando direcciones.
+
+### Al mirar productos, no mires solo el producto en si; mira tambien las malas resenas y los "servicios de reemplazo"
+
+- [G2](https://www.g2.com/)
+  Modo de uso: mira las resenas de 1 y 2 estrellas. Las malas resenas suelen esconder "que parte del producto existente no esta bien hecha".
+- [Capterra](https://www.capterra.com/)
+  Modo de uso: similar a G2, ideal para ver quejas reales sobre productos SaaS.
+- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhubajie
+  Modo de uso: busca "hacer por ti", "organizar por ti", "transcribir por ti". Si cierto servicio manual se vende bien, detras suele haber un proceso repetible y susceptible de ser convertido en producto.
+
+La senal de juicio es simple:
+
+- Los usuarios ya se estan quejando de las herramientas existentes
+- Los usuarios ya estan pagando para que alguien haga el trabajo por ellos
+- Los usuarios ya estan invirtiendo mucho trabajo manual y tiempo en este proceso
+
+### Cuarto nivel: mira videos, hay quien directamente te desglosa ideas
+
+Si no te gusta navegar foros ni rankings, y prefieres "alguien que me desglose las ideas", entonces los videos y podcasts tambien son muy utiles.
+
+- Busca `Greg Isenberg startup ideas`
+  Ideal para ver a alguien desglosando directamente 2 o 3 ideas concretas, incluyendo tamano de mercado, analisis de competencia y punto de entrada.
+- Busca `My First Million podcast`
+  Los dos presentadores suelen dedicar episodios enteros a hacer brainstorming de ideas de negocio; alta densidad y a menudo surgen nichos muy concretos.
+- Busca `YC startup ideas` o `Michael Seibel startup ideas`
+  Adecuado para principiantes, contenido directo, muchos explican explicitamente como elegir una direccion.
+
+<a id="idea-trends"></a>
+## [2. Fuentes de tendencias: mira que direcciones estan emergiendo](#top-idea-sources)
+
+La funcion de los sitios de tendencias no es darte ideas directamente, sino ayudarte a juzgar: si cierta direccion esta ganando traccion y si vale la pena seguir investigando.
+
+- [Exploding Topics](https://explodingtopics.com/)
+  Usa datos para rastrear temas y categorias de productos que crecen rapidamente pero que aun no han entrado en el mainstream. Ideal para ver direcciones "que estan emergiendo pero que aun no estan especialmente saturadas".
+- [Google Trends](https://trends.google.com/)
+  Busca palabras clave, mira la linea de tendencias del ultimo ano, y luego revisa las "consultas relacionadas" con "terminos en alza".
+- [Glimpse](https://meetglimpse.com/)
+  Similar a Google Trends.
+- Paginas de resumenes de informes de la industria
+  Adecuadas cuando ya tienes una direccion y quieres ver rapidamente su posicion en la industria.
+- Contenido de tendencias de McKinsey / BCG / Gartner
+  Mas orientado a la perspectiva empresarial y de grandes industrias; adecuado para B2B, industria y sectores tradicionales.
+- [State of AI Report](https://www.stateof.ai/)
+  Si tu direccion esta relacionada con la tecnologia de IA en si, este tipo de informes anuales son ideales para construir una vision general.
+
+Al mirar tendencias, enfocate solo en tres cosas:
+
+- Si el termino esta en calentamiento continuo
+- En que escenario concreto se enmarca
+- Quien seria el primero en invertir tiempo, costos de cambio o presupuesto en ello
+
+<a id="idea-business"></a>
+## [3. Fuentes mas orientadas a negocios: mira quien esta gastando dinero, quien se esta quejando, quien esta vendiendo servicios manuales](#top-idea-sources)
+
+Si lo que buscas no es una direccion que "suena genial", sino una mas cercana a "negocios reales", entonces debes mirar fuentes mas proximas a los flujos de trabajo.
+
+### Mira quien esta gastando dinero real en que
+
+- [China Government Procurement Network](https://www.ccgp.gov.cn/)
+  Modo de uso: busca terminos como "construccion inteligente", "sistema de gestion de laboratorio", "recopilacion de datos", "gestion de clinicas", "sistema de presupuestos", y mira los presupuestos, requisitos tecnicos y escenarios de uso.
+- Centros de transaccion de recursos publicos de cada provincia y ciudad
+  Modo de uso: mira que sistemas estan comprando realmente los gobiernos locales y las empresas publicas.
+- Bibiao / Qianlima / Biaoshitong
+  Modo de uso: mira las necesidades de compra del lado empresarial y los tipos de sistemas de alta frecuencia.
+
+La senal fuerte de estas fuentes es: no se esta hablando del futuro, sino exponiendo "hoy alguien ya esta dispuesto a pagar por esto".
+
+### Mira quien se esta quejando de que
+
+- Manufactura: comunidades de maquinaria, foros de control industrial
+- Salud: Dingxiangyuan, Yimaitong
+- Construccion / Ingenieria: Tumuzai Xianxi, Glodon Community
+- Finanzas / Contabilidad: Foro de China Accounting Vision
+- Comercio exterior: Fubu Foreign Trade Forum, Mikiquan
+- Hosteleria / Retail: Zhiye Canyin Wang, Lianshang Wang Forum
+- [Reddit](https://www.reddit.com/) en secciones verticales: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
+- [V2EX](https://www.v2ex.com/)
+- Jike
+- Xiaohongshu
+
+Al buscar, no busques solo "AI" o "innovacion"; es mas efectivo buscar:
+
+- demasiado engorroso
+- hay alguna mejor manera
+- recomienden herramientas
+- ya no puedo gestionarlo con Excel
+- I wish there was
+- is there a tool for
+- I hate
+
+### Mira quien esta vendiendo servicios manuales repetitivos
+
+- [Fiverr](https://www.fiverr.com/)
+- [Upwork](https://www.upwork.com/)
+- Zhubajie Wang
+- Taobao
+- Xianyu
+
+Si ves que estos servicios se venden bien, vale la pena investigar mas:
+
+- Te organizan los presupuestos en PDF a Excel
+- Te organizan masivamente los datos de clientes
+- Te revisan el CV / redactan textos / hacen transcripciones / archivan documentos
+
+Detras de estos servicios normalmente no hay necesidades de un solo uso, sino flujos de trabajo que se repiten.
+
+### Mira flujos de trabajo completos, no solo listas de ideas
+
+A veces el metodo mas directo es elegir una industria, revisar todo el proceso y encontrar los pasos que aun dependen de WeChat, Excel, papel y lapiz, o telefono.
+
+- Comercio exterior: buscar proveedores, solicitar cotizaciones, comparar precios, hacer presupuestos, enviar a clientes, hacer seguimiento de respuestas, organizar inspecciones, reservar transporte, despacho de aduanas.
+  Corte digno de analizar: organizar presupuestos de proveedores en presupuestos para clientes.
+- Clinicas dentales: recepcion, radiografias, lectura de radiografias, comunicacion del plan, seguimiento, tratamiento, revisita.
+  Corte digno de analizar: explicar el plan al paciente y hacer seguimiento continuo.
+- Obras de construccion: inspeccion, fotos, envio al grupo, elaboracion de informes, entrega al cliente.
+  Corte digno de analizar: de fotos en sitio a informes de cumplimiento.
+
+<a id="idea-vc"></a>
+## [4. Fuentes de VC / aceleradoras: mira "hacia donde sopla la corriente"](#top-idea-sources)
+
+Este tipo de fuentes son adecuadas para encontrar direcciones generales, no para reemplazar directamente la validacion.
+
+- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
+  Modo de uso: ideal para encontrar cortes, porque a menudo dice directamente "queremos ver a alguien haciendo esto".
+- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
+  Modo de uso: mas orientado a grandes tendencias y evaluacion de sectores, ideal para construir sensibilidad a la industria.
+- [NFX](https://www.nfx.com/)
+  Modo de uso: ideal para escanear rapidamente un conjunto de temas de startup.
+- [Sequoia Capital](https://www.sequoiacap.com/article/)
+  Modo de uso: no necesariamente lista ideas directamente, pero a menudo habla sobre ciertos tipos de cambios de plataforma y oportunidades.
+- [First Round Review](https://review.firstround.com/)
+  Modo de uso: ideal para profundizar en una direccion; no necesariamente es una lista de ideas, pero la calidad de los articulos suele ser muy alta.
+
+Ventajas de este tipo de fuentes:
+
+- Pueden decirte que direcciones futuras valen la pena explorar
+- Pueden decirte que sectores probablemente seguiran recibiendo impulso
+- Pueden hacerte entrar rapidamente en el lenguaje de un sector
+
+Limitaciones de este tipo de fuentes:
+
+- Suele ser desde la perspectiva de inversores
+- No necesariamente te dice que rol es el que mas sufre
+- No necesariamente te dice que paso del proceso es el mas bloqueado
+- No necesariamente te dice quien ya esta pagando por esto hoy
+
+Por lo tanto, un mejor uso es: primero usa estas fuentes para encontrar una direccion, y luego vuelve a los productos de referencia, foros de la industria, informacion de compras y flujos de trabajo reales para encontrar cortes mas especificos.
+
+<a id="idea-path"></a>
+## [5. El camino mas corto para quienes "no tienen ideas y solo saben hacer asistentes"]( #top-idea-sources)
+
+Si solo quieres seguir un camino minimo, puedes hacerlo asi:
+
+1. Primer paso, 30 minutos.
+   Abre [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/), ordena por `Top -> Past Year`, escanea rapidamente 50 posts y guarda todas las direcciones que pienses "esto creo que podria hacerlo".
+2. Segundo paso, 30 minutos.
+   Abre [Starter Story](https://www.starterstory.com/) o [Indie Hackers Products](https://www.indiehackers.com/products), ordena por ingresos, mira los productos de ingresos medios, no solo los mas exitosos. Encuentra direcciones relacionadas con el primer paso y mira especificamente a quien venden y que paso resuelven.
+3. Tercer paso, 20 minutos.
+   Ve a [Google Trends](https://trends.google.com/) y busca palabras clave relacionadas, mira si la tendencia esta creciendo, y luego revisa los "terminos en alza" en "consultas relacionadas".
+4. Cuarto paso, 20 minutos.
+   Ve a G2 / Capterra / foros de la industria / plataformas de licitacion / Fiverr y similares, y mira en esta direccion que es exactamente lo que mas molesta hoy y donde aun se depende del trabajo manual.
+
+Despues de ver todo, te basta con poder expresar claramente esta frase:
+
+- Cierta tipo de persona, en cierto escenario, esta bloqueada por cierto paso del proceso, y actualmente depende principalmente de cierto metodo torpe para sobrevivir.
+
+<a id="idea-ai"></a>
+## [6. Como te ayuda la IA](#top-idea-sources)
+
+El foco de este articulo no es la IA, pero la IA es muy util para organizar.
+
+Los usos mas practicos son solo dos:
+
+- Pega a la IA los enlaces, titulos de posts y palabras textuales de usuarios que has encontrado, y dejala que te los clasifique en "publico / escenario / punto de dolor / solucion alternativa".
+- Deja que la IA te ayude a condensar un monton de informacion dispersa en 3 direcciones candidatas, en lugar de seguir divergiendo en 50 funcionalidades.
+
+Puedes preguntar directamente asi:
+
+```text
+He encontrado estas fuentes recientemente:
+1. [pega titulo o cita textual]
+2. [pega titulo o cita textual]
+3. [pega titulo o cita textual]
+
+Por favor no me des una lista de funcionalidades.
+Por favor haz solo tres cosas:
+1. Clasifica por publico y escenario
+2. Identifica los pasos problematicos que se repiten
+3. Ayudame a organizarlo en 3 direcciones candidatas mas concretas
+```
+
+## Lectura adicional
+
+- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
+- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
+- [NFX](https://www.nfx.com/)
+- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+- [Starter Story](https://www.starterstory.com/)
+- [Indie Hackers - Products](https://www.indiehackers.com/products)
+- [Product Hunt](https://www.producthunt.com/)
+- [BetaList](https://betalist.com/)
+- [IdeasAI](https://ideasai.com/)
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+- [Google Trends](https://trends.google.com/)
+- [Exploding Topics](https://explodingtopics.com/)
+- [G2](https://www.g2.com/)
+- [Capterra](https://www.capterra.com/)
diff --git a/docs/es-es/stage-1/appendix-industry-scenarios/index.md b/docs/es-es/stage-1/appendix-industry-scenarios/index.md
new file mode 100644
index 0000000..de89209
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-industry-scenarios/index.md
@@ -0,0 +1,765 @@
+---
+title: 'Referencia de escenarios de aplicación industrial B2B'
+description: 'Este documento recopila las aplicaciones prácticas de los modelos LLM en escenarios empresariales B2B, incluyendo áreas como la industria manufacturera, servicio al cliente inteligente, educación, programación inteligente, salud, ciberseguridad, gestión financiera, servicios empresariales y más, sirviendo como referencia para desarrolladores de aplicaciones de IA orientadas a clientes empresariales.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'Aprox. <strong>6 horas</strong>'
+
+const interestPoint = ref('')
+const purpose = ref('')
+
+// Grupo de temas por industria
+const topicPool = {
+  'manufacturing': [
+    { title: 'Plataforma de diseño asistido por IA para exteriores de autobuses de nueva energía', desc: 'Diseño conceptual de exteriores basado en modelos de generación de imágenes' },
+    { title: 'Asistente inteligente de diseño y revisión de planos técnicos', desc: 'Construcción de una base de conocimiento de normativas de diseño empresarial mediante tecnología RAG' },
+    { title: 'Generación y gestión automatizada de documentación técnica', desc: 'Generación automática de especificaciones de productos y manuales de operación basada en LLM' },
+    { title: 'Asistente de generación automática de informes de inspección de equipos de producción', desc: 'Descripción por voz del estado del equipo, generación estructurada de informes de inspección' },
+    { title: 'Asistente de preguntas y respuestas sobre diagnóstico de fallos en equipos industriales', desc: 'Construcción de una base de conocimiento vectorial basada en casos históricos de fallos' }
+  ],
+  'customer-service': [
+    { title: 'Sistema de respuesta automática y generación de tickets de servicio al cliente multicanal inteligente', desc: 'Integración de mensajes multicanal, LLM comprende la intención y genera respuestas' },
+    { title: 'Asistente de prospección y seguimiento de clientes potenciales', desc: 'Análisis de registros de conversaciones históricas para identificar clientes con alta intención de compra' },
+    { title: 'Sistema inteligente de búsqueda y respuestas del conocimiento interno empresarial', desc: 'Construcción de una base de conocimiento vectorial basada en documentos internos' },
+    { title: 'Herramienta de resumen inteligente de conversaciones y generación de tickets de servicio', desc: 'Generación automática de resúmenes de sesión y extracción de información clave' },
+    { title: 'Sistema de base de conocimiento de guiones de ventas destacados del servicio al cliente', desc: 'Análisis de casos exitosos para extraer plantillas de guiones ganadores' }
+  ],
+  'education': [
+    { title: 'Sistema de planificación de rutas de aprendizaje de idiomas personalizado y tutoría inteligente', desc: 'Evaluación del nivel del aprendiz, planificación de tareas de estudio diarias' },
+    { title: 'Plataforma de elaboración automatizada de planes de clase y recomendación de recursos educativos', desc: 'Generación de estructura de planes de clase según el programa de estudios' },
+    { title: 'Sistema de corrección automatizada de tareas y análisis diagnóstico del rendimiento', desc: 'Corrección automática de preguntas subjetivas y generación de sugerencias de corrección' },
+    { title: 'Construcción de modelos de competencias laborales y mapas de aprendizaje', desc: 'Análisis de descripciones de puestos para extraer requisitos de competencias' },
+    { title: 'Práctica conversacional individualizada de idiomas extranjeros en escenarios simulados', desc: 'LLM asume diferentes roles para practicar conversaciones orales' }
+  ],
+  'programming': [
+    { title: 'Asistente de autocompletado de código inteligente y reparación automática de bugs', desc: 'Plugin de IDE que ofrece sugerencias de autocompletado en tiempo real' },
+    { title: 'Plataforma de construcción de aplicaciones low-code y automatización de flujos', desc: 'Descripción de requisitos en lenguaje natural, conversión a configuración low-code' },
+    { title: 'Sistema de generación de casos de prueba unitarios', desc: 'Análisis AST del código fuente, generación de casos de prueba con condiciones límite' },
+    { title: 'Herramienta de análisis inteligente de código y migración entre lenguajes', desc: 'Análisis de la calidad del código y sugerencias de optimización' },
+    { title: 'Herramienta de generación automática de código de interfaz de usuario (UI)', desc: 'Reconocimiento de imágenes de diseño, generación de CSS responsivo' }
+  ],
+  'healthcare': [
+    { title: 'Asistente inteligente de interpretación de informes de análisis clínicos', desc: 'OCR identifica indicadores clave, interpretación de valores anómalos' },
+    { title: 'Experto en consultas de salud basado en tecnología de búsqueda de conocimiento', desc: 'Construcción de un grafo de conocimiento médico, búsqueda RAG para generar respuestas' },
+    { title: 'Plataforma de análisis de decisión de datos de investigación clínica', desc: 'Integración de datos EMR, asistencia en la generación de código de análisis estadístico' },
+    { title: 'Herramienta de generación automática de informes de imágenes médicas', desc: 'Descripción de características de imágenes, generación automática de informes estructurados' },
+    { title: 'Asistente inteligente de recordatorio de medicación para enfermedades crónicas', desc: 'Generación de recordatorios de medicación personalizados, verificación de contraindicaciones' }
+  ],
+  'security': [
+    { title: 'Motor de detección y reparación de vulnerabilidades de seguridad en código', desc: 'Escaneo SAST del código, análisis de principios de vulnerabilidad' },
+    { title: 'Sistema inteligente de identificación e interceptación de correos de phishing generados por IA', desc: 'Análisis del contenido del correo, identificación de correos de phishing generados por IA' },
+    { title: 'Asistente de generación automática de informes diarios de operaciones de seguridad', desc: 'Resumen de registros, extracción automática de eventos clave' },
+    { title: 'Asistente de generación inteligente de informes de pruebas de penetración', desc: 'Generación automática de informes basada en descripciones de vulnerabilidades' },
+    { title: 'Asistente de consulta y análisis inteligente de inteligencia sobre amenazas', desc: 'Conexión con múltiples fuentes de inteligencia sobre amenazas, interpretación del contenido' }
+  ],
+  'finance': [
+    { title: 'Asistente de generación inteligente de informes de debida diligencia crediticia', desc: 'Entrada de datos financieros, generación automática de informes de debida diligencia crediticia' },
+    { title: 'Asesor inteligente de gestión de patrimonio bancario privado', desc: 'Análisis del perfil de riesgo del cliente, generación de recomendaciones de asignación de activos' },
+    { title: 'Asistente de generación inteligente y verificación de cumplimiento de prospectos de IPO', desc: 'Plantillas modulares, llenado automático de descripciones del negocio' },
+    { title: 'Sistema de generación automática de informes financieros y alerta de anomalías operativas', desc: 'Generación automática de análisis financiero y discusión de la dirección' },
+    { title: 'Entrenador de guiones de venta inteligente para agentes de seguros', desc: 'Simulación de conversaciones, evaluación de la conformidad y persuasión de los guiones' }
+  ],
+  'enterprise': [
+    { title: 'Plataforma de revisión de cumplimiento y sugerencias de modificación de contratos empresariales en todo su ciclo de vida', desc: 'Comparación de cláusulas con bases de datos normativas, generación de informes de cumplimiento' },
+    { title: 'Transcripción por voz de reuniones de ventas y recomendación de guiones', desc: 'Transcripción ASR, análisis de conversaciones y recomendación de guiones ganadores' },
+    { title: 'Sistema inteligente de generación y diseño de contenido de marketing', desc: 'Generación de textos de marketing y extracción de puntos de venta' },
+    { title: 'Plataforma de análisis de publicidad de la competencia', desc: 'Recopilación de anuncios de la competencia, análisis de estrategias de publicación' },
+    { title: 'Sistema de análisis inteligente de temas populares y recomendación de contenido', desc: 'Análisis de tendencias populares y recomendación de ángulos temáticos' }
+  ],
+  'content': [
+    { title: 'Plataforma de asistencia creativa para contenido de cine y televisión y novelas', desc: 'Proporciona sinopsis, desarrollo de personajes, generación de diálogos' },
+    { title: 'Asistente de redacción inteligente de historias de marca y artículos de relaciones públicas', desc: 'Entrada de palabras clave de marca, generación de textos en múltiples estilos' },
+    { title: 'Sistema de gestión de transmisión en vivo e interacción de avatares digitales virtuales', desc: 'Imagen digital + voz TTS + diálogo LLM' },
+    { title: 'Generación de guiones de videos cortos y edición inteligente', desc: 'Generación de guiones y storyboards de videos cortos' },
+    { title: 'Sistema inteligente de generación y diseño de contenido de marketing', desc: 'Generación de textos de marketing y extracción de puntos de venta' }
+  ],
+  'government': [
+    { title: 'Sistema de navegación por voz inteligente y despacho automático de la línea de servicio ciudadano 12345', desc: 'Reconocimiento de voz, comprensión de solicitudes y despacho inteligente' },
+    { title: 'Robot de guía inteligente y respuestas sobre políticas para oficinas de servicios gubernamentales', desc: 'Búsqueda RAG en base de conocimiento gubernamental' },
+    { title: 'Plataforma de emparejamiento inteligente y envío preciso de políticas de beneficio empresarial', desc: 'Perfil empresarial con emparejamiento automático de políticas aplicables' },
+    { title: 'Asistente de pre-revisión inteligente y verificación de cumplimiento de materiales administrativos', desc: 'Reconocimiento OCR y extracción de información clave' },
+    { title: 'Plataforma de identificación inteligente y gestión de despacho de eventos urbanos en cuadrícula', desc: 'Identificación del tipo de evento y despacho' }
+  ],
+  'legal': [
+    { title: 'Agent de detección de riesgos y vulnerabilidades en contratos con un clic', desc: 'Identificación de problemas potenciales comparando con listas de verificación de riesgos' },
+    { title: 'Asesor de evaluación inteligente por IA de la tasa de éxito en casos similares', desc: 'Extracción de características del caso, búsqueda y emparejamiento de casos similares' },
+    { title: 'Radar de monitoreo en tiempo real de cambios legislativos y análisis de impacto empresarial', desc: 'Análisis del contenido modificado y evaluación del impacto empresarial' },
+    { title: 'Herramienta de redacción automática AIGC de cartas de abogado', desc: 'Entrada de declaración de hechos, generación de cartas de abogado estandarizadas' },
+    { title: 'Plugin de explicación en lenguaje sencillo de cláusulas legales complejas', desc: 'Generación de explicaciones fáciles de entender' }
+  ],
+  'travel': [
+    { title: 'Generador de itinerarios automáticos basado en AIGC para viajeros perezosos', desc: 'Generación de planes de itinerario diario' },
+    { title: 'Robot de predicción de tendencias de precios de vuelos y hoteles y bloqueo automático de precios bajos', desc: 'Modelo ML de predicción de tendencias de precios' },
+    { title: 'Sistema de pre-revisión inteligente de documentos de visa y asistencia de llenado automatizado', desc: 'Verificación de integridad de información mediante OCR' },
+    { title: 'Asistente de traducción por voz en tiempo real y traducción visual de menús para viajes al extranjero', desc: 'Traducción de voz sin conexión, OCR de imágenes de menús' },
+    { title: 'Asistente de generación automática de diarios de viaje ilustrados y textos para redes sociales', desc: 'Extracción de información de fotos, generación de textos de diarios de viaje' }
+  ],
+  'emotion': [
+    { title: 'Compañero virtual de compañía profunda 24 horas basado en modelos LLM', desc: 'Sistema de memoria que almacena el historial de conversaciones' },
+    { title: 'Asesor de IA de reconocimiento emocional multimodal y orientación psicológica', desc: 'Análisis de tono de voz + reconocimiento de emociones en texto' },
+    { title: 'Avatar digital de entrenamiento cognitivo y recuperación de memorias para personas con Alzheimer', desc: 'Juegos cognitivos de entrenamiento, fotografías antiguas que activan recuerdos' },
+    { title: 'Entrenador de práctica social simulada con AIGC para personas con ansiedad social', desc: 'Simulación de escenarios sociales virtuales' },
+    { title: 'Asistente de monitoreo del estado de ánimo las 24 horas y motivación emocional positiva con IA', desc: 'Análisis de tendencias emocionales y generación de contenido motivacional' }
+  ],
+  'entertainment': [
+    { title: 'Motor de toma de decisiones autónoma para NPC de juegos de mundo abierto impulsado por LLM', desc: 'Árbol de comportamiento del NPC integrado con toma de decisiones LLM' },
+    { title: 'Herramienta de deducción de tramas AIGC y asistencia de control de DM para juegos de misterio inmersivos', desc: 'Las elecciones de los jugadores activan ramas de la historia' },
+    { title: 'Modificador generativo de finales de novelas interactivas', desc: 'Las elecciones del lector influyen en la dirección de la trama' },
+    { title: 'Análisis visual CV y comentarista inteligente por IA de partidas de esports', desc: 'Análisis en tiempo real de la pantalla del juego' },
+    { title: 'Sistema de generación automática de audiolibros con síntesis TTS multicolor', desc: 'Asignación de personajes del texto, generación de voces personalizadas' }
+  ],
+  'ecommerce': [
+    { title: 'Herramienta de producción masiva de páginas de detalles de productos AIGC con alta tasa de conversión', desc: 'Generación de textos de puntos de venta y descripciones de escenarios' },
+    { title: 'Fábrica de generación de videos de prueba de vestir y exhibición de modelos virtuales con IA', desc: 'Generación de efectos de prueba de vestir en modelos virtuales' },
+    { title: 'Asistente de traducción y pulido localizado multilingüe con LLM para comercio electrónico transfronterizo', desc: 'Traducción multilingüe de descripciones de productos' },
+    { title: 'Sistema de transmisión en vivo con avatares digitales AIGC las 24 horas', desc: 'Imagen digital + generación de guiones en tiempo real' },
+    { title: 'Motor de análisis de tendencias de mercado por IA y predicción de productos exitosos', desc: 'Análisis de tendencias populares, recomendaciones de selección de productos' }
+  ],
+  'energy': [
+    { title: 'Asesor de análisis del comportamiento de consumo eléctrico doméstico y estrategias de ahorro energético con IA', desc: 'Análisis de patrones de consumo, generación de recomendaciones de ahorro' },
+    { title: 'Sistema de reconocimiento visual CV por dron de defectos en paneles fotovoltaicos', desc: 'Inspección con dron, análisis de imágenes termoinfrarrojas' },
+    { title: 'Agente de predicción de tendencias de precios de mercado eléctrico al contado y estrategia automática de ganancias con IA', desc: 'Modelo de predicción de precios, generación de estrategias' },
+    { title: 'Asistente de cálculo automático de emisiones de carbono en toda la cadena empresarial y generación de informes ESG con IA', desc: 'Cálculo de factores de emisión de carbono, generación de informes ESG' },
+    { title: 'Sistema de predicción de carga ante clima extremo y comando de despacho de emergencia de la red eléctrica con IA', desc: 'Modelo de predicción de carga, generación de estrategias de despacho' }
+  ],
+  'av-media': [
+    { title: 'Herramienta de identificación por IA de fragmentos destacados y edición automática de videos cortos a partir de videos largos', desc: 'Análisis del contenido del video, identificación de fotogramas clave' },
+    { title: 'Asistente de separación inteligente de ruido de fondo y mejora de voz por IA en video', desc: 'Modelo de separación de audio, eliminación de ruido de fondo' },
+    { title: 'Estación de trabajo de restauración 4K y colorización inteligente por IA de material audiovisual antiguo', desc: 'Modelo de superresolución de video, colorización automática por IA' },
+    { title: 'Sistema de doblaje TTS de texto a voz de nivel realista y control emocional', desc: 'Modelo TTS multicolor, control emocional' },
+    { title: 'Asistente de transcripción inteligente por IA y extracción de tareas pendientes de grabaciones de reuniones', desc: 'Separación y transcripción de voz en reuniones multilingües' }
+  ],
+  'ai-marketing': [
+    { title: 'Motor de redacción automática AIGC de textos virales para Xiaohongshu (RED)', desc: 'Generación de textos de recomendación, optimización de emoji' },
+    { title: 'Herramienta de diseño inteligente de pósters de marketing y adaptación a múltiples tamaños', desc: 'Emparejamiento inteligente de plantillas de pósters' },
+    { title: 'Plataforma de generación creativa AIGC de LOGO de marca y construcción del sistema de identidad visual (VI)', desc: 'Generación creativa de LOGO, generación de normativas VI' },
+    { title: 'Asistente de seguimiento de tendencias populares por IA y generación creativa de marketing oportunista', desc: 'Análisis de ángulos de marketing, generación de propuestas creativas' },
+    { title: 'Asistente de generación creativa AIGC de guiones de videos cortos y guía de storyboards', desc: 'Generación de guiones y storyboards, sugerencias de filmación' }
+  ],
+  'data-intelligence': [
+    { title: 'Herramienta de generación automática de sentencias SQL a partir de lenguaje natural', desc: 'Conversión de consultas en lenguaje natural a SQL' },
+    { title: 'Sistema inteligente de inventario y clasificación de activos de datos empresariales', desc: 'Recopilación de metadatos, clasificación automática' },
+    { title: 'Motor de detección automática de anomalías de calidad de datos y sugerencias de reparación', desc: 'Motor de reglas + modelos ML para detección de anomalías' },
+    { title: 'Asistente de generación inteligente de informes y configuración de visualización', desc: 'Generación conversacional de configuraciones de informes' },
+    { title: 'Asistente inteligente de preguntas y respuestas sobre definiciones de indicadores de datos', desc: 'Construcción de base de conocimiento basada en documentos de definición de indicadores' }
+  ]
+}
+
+// Tabla de mapeo predefinida de recomendaciones
+const recommendationMap = {
+  // Punto de interés: Contenido creativo
+  'creative-content': {
+    'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
+    'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
+    'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
+    'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
+  },
+  // Punto de interés: Servicios técnicos
+  'tech-service': {
+    'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
+    'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
+    'improve-experience': ['customer-service', 'enterprise', 'programming'],
+    'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
+  },
+  // Punto de interés: Inteligencia de datos
+  'data-intel': {
+    'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
+    'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
+    'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
+    'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
+  },
+  // Punto de interés: Servicio al usuario
+  'user-service': {
+    'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
+    'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
+    'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
+    'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
+  },
+  // Punto de interés: Soluciones sectoriales
+  'industry-solution': {
+    'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
+    'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
+    'improve-experience': ['healthcare', 'education', 'government', 'travel'],
+    'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
+  }
+}
+
+const interestOptions = [
+  { label: 'Generación de contenido creativo', value: 'creative-content', desc: 'Textos, imágenes, videos y otros contenidos creativos' },
+  { label: 'Herramientas de servicios técnicos', value: 'tech-service', desc: 'Herramientas de desarrollo, automatización, asistencia de código' },
+  { label: 'Análisis de inteligencia de datos', value: 'data-intel', desc: 'Análisis de datos, predicción, toma de decisiones inteligente' },
+  { label: 'Experiencia de servicio al usuario', value: 'user-service', desc: 'Atención al cliente, marketing, experiencia de usuario' },
+  { label: 'Soluciones sectoriales', value: 'industry-solution', desc: 'Aplicaciones profundas en industrias específicas' }
+]
+
+const purposeOptions = [
+  { label: 'Mejorar la eficiencia', value: 'increase-efficiency', desc: 'Automatización, aceleración de procesos' },
+  { label: 'Reducir costos', value: 'reduce-cost', desc: 'Reducción de personal, optimización de recursos' },
+  { label: 'Mejorar la experiencia', value: 'improve-experience', desc: 'Satisfacción del usuario, calidad del servicio' },
+  { label: 'Innovación empresarial', value: 'innovate-business', desc: 'Nuevos productos, nuevos modelos' }
+]
+
+const industries = [
+  { key: 'manufacturing', name: 'Industria manufacturera', anchor: '#_1-industria-manufacturera' },
+  { key: 'customer-service', name: 'Servicio al cliente inteligente', anchor: '#_2-servicio-al-cliente-inteligente' },
+  { key: 'education', name: 'Sector educativo', anchor: '#_3-sector-educativo' },
+  { key: 'programming', name: 'Programación inteligente', anchor: '#_4-programación-inteligente' },
+  { key: 'healthcare', name: 'Sector salud', anchor: '#_5-sector-salud' },
+  { key: 'security', name: 'Ciberseguridad', anchor: '#_6-ciberseguridad' },
+  { key: 'finance', name: 'Gestión financiera, seguros y banca', anchor: '#_7-gestión-financiera-seguros-y-banca' },
+  { key: 'enterprise', name: 'Servicios empresariales', anchor: '#_8-servicios-empresariales' },
+  { key: 'content', name: 'Producción y gestión de contenido', anchor: '#_9-producción-y-gestión-de-contenido' },
+  { key: 'government', name: 'Administración pública inteligente', anchor: '#_10-administración-pública-inteligente' },
+  { key: 'legal', name: 'Asuntos legales y gestión de contratos', anchor: '#_11-asuntos-legales-y-gestión-de-contratos' },
+  { key: 'travel', name: 'Turismo y servicios de viaje', anchor: '#_12-turismo-y-servicios-de-viaje' },
+  { key: 'emotion', name: 'Acompañamiento emocional', anchor: '#_13-acompañamiento-emocional' },
+  { key: 'entertainment', name: 'Entretenimiento y ocio', anchor: '#_14-entretenimiento-y-ocio' },
+  { key: 'ecommerce', name: 'Servicios de comercio electrónico', anchor: '#_15-servicios-de-comercio-electrónico' },
+  { key: 'energy', name: 'Energía', anchor: '#_16-energía' },
+  { key: 'av-media', name: 'Audio y video', anchor: '#_17-audio-y-video' },
+  { key: 'ai-marketing', name: 'Marketing con IA', anchor: '#_18-marketing-con-ia' },
+  { key: 'data-intelligence', name: 'Inteligencia de datos', anchor: '#_19-inteligencia-de-datos' }
+]
+
+// Calcular resultados de recomendación - extracción aleatoria del grupo de temas
+const recommendationTopics = computed(() => {
+  if (!interestPoint.value || !purpose.value) return []
+  
+  const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
+  const topics = []
+  
+  // Extraer 1-2 temas aleatoriamente de cada industria recomendada
+  keys.forEach(key => {
+    const industry = industries.find(item => item.key === key)
+    const industryTopics = topicPool[key] || []
+    
+    if (industry && industryTopics.length > 0) {
+      // Extraer 1-2 temas aleatoriamente
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          industryKey: key,
+          industryName: industry.name,
+          industryAnchor: industry.anchor
+        })
+      })
+    }
+  })
+  
+  // Ordenar aleatoriamente y limitar el total
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Obtener descripción de la selección actual
+const currentSelection = computed(() => {
+  const interest = interestOptions.find(i => i.value === interestPoint.value)
+  const pur = purposeOptions.find(p => p.value === purpose.value)
+  return {
+    interest: interest?.label || '',
+    purpose: pur?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // Retraso del desplazamiento para asegurar la actualización del DOM
+  setTimeout(() => {
+    // Intentar encontrar por ID (soporta múltiples formatos)
+    let element = document.querySelector(anchor)
+    
+    // Si no se encuentra, intentar otros formatos de ID posibles
+    if (!element) {
+      // Intentar quitar el prefijo de guion bajo
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // Si aún no se encuentra, buscar por texto del título
+    if (!element) {
+      // Extraer el nombre de la industria del ancla
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // Coincidencia exacta o por inclusión
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // Resaltar la sección de destino
+      element.style.backgroundColor = '#f0f9ff'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  interestPoint.value = ''
+  purpose.value = ''
+}
+</script>
+
+# Referencia de escenarios de aplicación industrial B2B
+
+## Guía del capítulo
+
+<ChapterIntroduction :duration="duration" :tags="['Aplicaciones B2B', 'Aplicaciones industriales', 'Escenarios de IA', 'Referencia de implementación', 'Soluciones sectoriales']" coreOutput="Conocer más de 15 escenarios de aplicación B2B por industria" expectedOutput="Encontrar la dirección de proyecto adecuada para clientes empresariales">
+
+Este documento recopila las <strong>aplicaciones prácticas de los modelos LLM en escenarios empresariales B2B</strong>. A diferencia del enfoque B2C centrado en la experiencia del usuario y las emociones, los productos B2B se centran más en <strong>resolver necesidades reales del negocio, mejorar la eficiencia y reducir costos</strong>. Cada escenario cuenta con <strong>viabilidad real de implementación</strong>, abarcando desde el <strong>análisis de requisitos hasta la implementación técnica</strong>, sirviendo como referencia para desarrolladores de aplicaciones de IA orientadas a clientes empresariales.
+
+</ChapterIntroduction>
+
+## Selección rápida de dirección sectorial
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Encuentra el escenario de aplicación adecuado para ti</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Selecciona tu área de interés y el objetivo que deseas alcanzar. El sistema recomendará escenarios sectoriales relevantes. Haz clic en las etiquetas para saltar al capítulo correspondiente.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="interestPoint" placeholder="Seleccionar área de interés" style="width: 100%;">
+        <el-option 
+          v-for="item in interestOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="purpose" placeholder="Seleccionar objetivo" style="width: 100%;">
+        <el-option 
+          v-for="item in purposeOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <!-- Visualización de resultados de recomendación - formato de tabla -->
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
+      Se recomiendan {{ recommendationTopics.length }} escenarios de aplicación para ti
+      <span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
+        ({{ currentSelection.interest }} + {{ currentSelection.purpose }})
+      </span>
+    </div>
+    <el-table 
+      :data="recommendationTopics" 
+      style="width: 100%; cursor: pointer;"
+      @row-click="(row) => scrollToAnchor(row.industryAnchor)"
+      highlight-current-row>
+      <el-table-column prop="title" label="Escenario de aplicación" min-width="300">
+        <template #default="scope">
+          <div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industryName" label="Industria" width="180" align="center">
+        <template #default="scope">
+          <el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 10px; font-size: 12px; color: #909399;">
+      Haz clic en cualquier fila de la tabla para saltar al capítulo de la industria correspondiente
+    </div>
+  </div>
+  
+  <!-- Mensaje cuando la selección está incompleta -->
+  <div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
+    <span v-if="!interestPoint && !purpose">Selecciona un área de interés y un objetivo</span>
+    <span v-else-if="!interestPoint">Selecciona un área de interés</span>
+    <span v-else>Selecciona un objetivo</span>
+  </div>
+  
+  <!-- Botón de restablecimiento -->
+  <div v-if="interestPoint || purpose" style="margin-top: 12px;">
+    <el-button size="small" @click="resetSelection">Restablecer selección</el-button>
+  </div>
+</el-card>
+
+## Introducción rápida a las industrias
+
+### Tecnologías principales
+
+En el desarrollo de aplicaciones de IA, las direcciones tecnológicas comunes incluyen:
+
+1. **LLM (Grandes modelos de lenguaje)**: Especializados en procesar tareas de lenguaje natural, como diálogo, generación de texto, resumen, traducción, etc., adecuados para construir aplicaciones de atención al cliente inteligente, creación de contenido, preguntas y respuestas de conocimiento.
+2. **VLM (Modelos de lenguaje visual)**: Combinan comprensión visual y capacidades lingüísticas, permitiendo descripción de imágenes, preguntas y respuestas visuales, generación de contenido multimodal, etc., aplicables a escenarios como análisis de imágenes médicas, control de calidad industrial y diseño creativo.
+3. **GenAI (IA generativa)**: Incluye generación de texto, generación de imágenes (como Stable Diffusion, DALL·E), generación de video, etc., capaz de generar contenido creativo rápidamente, aplicable a áreas como diseño asistido, producción de materiales de marketing y educación.
+
+### Estrategia de selección
+
+Los aprendices pueden elegir la dirección de aplicación adecuada según las siguientes dimensiones:
+
+1. **Orientación por interés**: Priorizar la industria o dirección tecnológica que más les interese para mantener la motivación de aprendizaje. Por ejemplo:
+   - Interés en diseño creativo: probar aplicaciones de producción de contenido o diseño industrial
+   - Interés en desafíos técnicos: probar aplicaciones en ciberseguridad o sector salud
+   - Interés en impacto social: probar aplicaciones en administración pública inteligente o educación
+
+2. **Adaptación sectorial**: Combinar el trasfondo sectorial propio o las ventajas de recursos para elegir escenarios:
+   - Profesionales de la industria manufacturera: considerar primero aplicaciones de fabricación industrial o servicios empresariales
+   - Educadores: priorizar aplicaciones del sector educativo o producción de contenido
+   - Profesionales de la salud: explorar aplicaciones del sector salud o gestión de la salud
+
+3. **Dificultad técnica**: Elegir el nivel adecuado de complejidad según la base técnica propia:
+   - Nivel inicial: servicio al cliente inteligente, creación de contenido, sistemas simples de preguntas y respuestas
+   - Nivel intermedio: control de calidad industrial, análisis de imágenes médicas, asistente de código inteligente
+   - Nivel profesional: control de riesgos financieros, ciberseguridad, aplicaciones multimodales complejas
+
+## 1. Industria manufacturera 
+
+Los escenarios de la industria manufacturera se centran principalmente en tres direcciones: asistencia al diseño, optimización de la producción y mantenimiento inteligente. Las aplicaciones comunes incluyen la utilización de IA para asistir el diseño de productos, la revisión automatizada de planos, la generación inteligente de documentación técnica, el diagnóstico de fallos en equipos industriales, etc., capaces de mejorar significativamente la eficiencia del diseño y reducir los costos de mantenimiento.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Plataforma de diseño asistido por IA para exteriores de autobuses de nueva energía | Diseño conceptual de exteriores basado en modelos de generación de imágenes, combinado con LLM para verificación de normativas de diseño e iteración creativa; integración de renderizado 3D con Three.js |
+| 2 | Asistente inteligente de diseño y revisión de planos técnicos | Construcción de una base de conocimiento de normativas de diseño empresarial mediante tecnología RAG, DALL·E genera imágenes de referencia para facilitar la comprensión; integración con API de CAD para análisis automatizado de planos |
+| 3 | Generación y gestión automatizada de documentación técnica | Generación automática de especificaciones de productos y manuales de operación a partir de la base de datos del producto mediante LLM, ChromaDB almacena documentos históricos para búsqueda inteligente |
+| 4 | Asistente de generación automática de informes de inspección de equipos de producción | El personal de inspección describe el estado del equipo por voz, LLM genera informes de inspección estructurados; asociación automática con registros históricos de fallos |
+| 5 | Sistema inteligente de despacho y planificación de rutas para carretillas elevadoras en fábrica | LLM analiza tareas de pedidos y ubicaciones del almacén, combinado con API de mapas para generar el plan de despacho óptimo |
+| 6 | Almacén de datos basado en recuperación de información LLM | Tecnología Text-to-SQL para convertir lenguaje natural en consultas a bases de datos, Superset para visualización de resultados; Doris o ClickHouse como motor OLAP |
+| 7 | Asistente de preguntas y respuestas sobre diagnóstico de fallos en equipos industriales | Construcción de una base de conocimiento vectorial basada en casos históricos de fallos, LLM proporciona recomendaciones de diagnóstico y soluciones según la descripción del fallo |
+| 8 | Generación inteligente de informes de control de calidad y clasificación de defectos en producción | OCR identifica defectos en fotografías de control de calidad, LLM genera informes de control de calidad estructurados; clasificación automática de tipos y gravedad de defectos |
+| 9 | Asistente inteligente de inventario y generación de informes de recuento | Ingreso de datos de recuento, LLM compara automáticamente con el inventario del sistema y genera informe de diferencias; alerta de inventario anómalo |
+| 10 | Sistema inteligente de preguntas y respuestas sobre optimización de procesos de producción | Construcción de base de conocimiento RAG basada en documentos de procesos de producción, LLM proporciona recomendaciones de optimización según problemas de producción |
+
+## 2. Servicio al cliente inteligente
+
+Los escenarios de servicio al cliente inteligente se centran en la mejora de la eficiencia del servicio al cliente y la optimización de la experiencia del usuario. Las aplicaciones típicas abarcan la integración multicanal, la generación de respuestas inteligentes, el análisis de emociones de los clientes, el procesamiento automatizado de tickets, etc., ayudando a las empresas a lograr servicio al cliente 24/7.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Sistema de respuesta automática y generación de tickets de servicio al cliente multicanal inteligente | Integración de mensajes de múltiples canales (WeChat, APP, sitio web, etc.), LLM comprende la intención y genera respuestas creando tickets automáticamente; uso de LangChain para construir el flujo de conversación, MySQL para almacenar datos de tickets |
+| 2 | Asistente de prospección y seguimiento de clientes potenciales | LLM analiza registros históricos de conversaciones de servicio al cliente, identifica características de clientes con alta intención de compra y los puntúa; sistema de recomendación combinado con algoritmos de filtrado colaborativo |
+| 3 | Sistema inteligente de búsqueda y respuestas del conocimiento interno empresarial | Construcción de base de conocimiento vectorial basada en Confluence y documentos internos, LLM combinado con tecnología RAG para generar respuestas |
+| 4 | Sistema de encuestas de satisfacción del cliente y gestión de mejora del servicio | LLM analiza automáticamente el contenido de las conversaciones de servicio al cliente para clasificación de sentimientos y puntuación de satisfacción; informes BI muestran los resultados del análisis |
+| 5 | Herramienta de resumen inteligente de conversaciones y generación de tickets de servicio | Tras finalizar la conversación, LLM genera automáticamente un resumen de la sesión y extrae información clave; llenado automático de campos del ticket |
+| 6 | Asistente de detección automática de conformidad de guiones de servicio al cliente | El agente ingresa el contenido de respuesta, LLM detecta en tiempo real la conformidad del guion y palabras sensibles; proporciona sugerencias de modificación |
+| 7 | Herramienta de resumen automático y clasificación de tickets de servicio al cliente | LLM genera resúmenes y clasificación automática de etiquetas a partir de registros de conversaciones largas; Elasticsearch soporta búsqueda de texto completo en tickets |
+| 8 | Herramienta de monitoreo de emociones del cliente y alerta de anomalías | Análisis en tiempo real de características de tono de voz y emociones en texto, LLM identifica emociones anómalas y activa alertas; notificaciones de alerta por WebSocket |
+| 9 | Sistema de base de conocimiento de guiones ganadores del servicio al cliente | LLM analiza casos de conversación excelentes de agentes, extrae plantillas de guiones ganadores; sistema de recomendación sugiere guiones en tiempo real según el contexto de la conversación |
+| 10 | Asistente de análisis de contenido de llamadas salientes y control de calidad | Tras la transcripción de grabaciones de llamadas salientes, LLM analiza el contenido de la conversación para extraer información clave; generación automática de informes de control de calidad y sugerencias de mejora |
+
+## 3. Sector educativo
+
+Los escenarios del sector educativo buscan lograr una enseñanza personalizada y una gestión educativa inteligente. Las aplicaciones centrales incluyen planificación inteligente de rutas de aprendizaje, corrección automatizada de tareas, generación de planes de clase, análisis del rendimiento académico, etc., promoviendo la optimización de la asignación de recursos educativos y la enseñanza adaptada a las capacidades de cada estudiante.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Sistema de planificación de rutas de aprendizaje de idiomas personalizado y tutoría inteligente | LLM evalúa el nivel actual del aprendiz, planifica tareas de estudio diarias según los objetivos de aprendizaje; algoritmo de recomendación combinado con grafo de conocimiento para recomendar recursos de aprendizaje |
+| 2 | Plataforma de elaboración automatizada de planes de clase y recomendación de recursos educativos | LLM genera la estructura del plan de clase y el diseño didáctico según el programa de estudios; base de conocimiento vectorial almacena planes de clase y materiales de calidad, soportando búsqueda por palabras clave y recomendaciones similares |
+| 3 | Sistema de corrección automatizada de tareas y análisis diagnóstico del rendimiento | LLM corrige automáticamente preguntas subjetivas y genera sugerencias de corrección, el grafo de conocimiento identifica los puntos débiles de conocimiento del estudiante |
+| 4 | Construcción de modelos de competencias laborales y mapas de aprendizaje | LLM analiza las descripciones de puestos para extraer requisitos de competencias, construyendo perfiles de competencias laborales; generación de mapas de aprendizaje personalizados según las brechas identificadas |
+| 5 | Sistema de construcción del currículo escolar y herramientas de elaboración de materiales didácticos | LLM analiza las características de la escuela y las necesidades de los estudiantes, genera la estructura del currículo escolar; integración con API de generación de PPT para crear automáticamente materiales |
+| 6 | Práctica conversacional individualizada de idiomas extranjeros en escenarios simulados | LLM asume diferentes roles para practicar conversaciones orales, ASR reconoce la pronunciación y la puntúa; TTS genera ejemplos de pronunciación estándar |
+| 7 | Plataforma de recomendación basada en big data para selección de carreras universitarias y orientación profesional | LLM analiza información del estudiante como puntuaciones, clasificaciones e intereses, combinado con datos de admisión para recomendar universidades y carreras |
+| 8 | Asistente de programación para niños | LLM explica la lógica del código y proporciona orientación de programación, soportando alternancia entre lenguajes por bloques y Python |
+| 9 | Herramienta de generación automática de mapas mentales de conceptos y recomendación de rutas de aprendizaje | Ingreso del tema del curso, LLM genera automáticamente mapas mentales de conceptos; recomendación del siguiente contenido de estudio según el progreso |
+| 10 | Motor de calificación y corrección automatizada de redacciones en chino e inglés | LLM califica desde múltiples dimensiones (temática, estructura, lenguaje, diversidad) y genera comentarios; comparación con redacciones modelo destacadas |
+
+## 4. Programación inteligente
+
+Los escenarios de programación inteligente buscan mejorar la eficiencia del desarrollo y la calidad del código. Las aplicaciones típicas incluyen autocompletado inteligente de código, reparación automática de bugs, generación automatizada de pruebas, conversión de código, etc., permitiendo a los desarrolladores centrarse en la lógica del negocio en lugar de tareas de codificación repetitivas.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Asistente de autocompletado de código inteligente y reparación automática de bugs | Modelo de código ajustado basado en CodeLlama, plugin de IDE que ofrece sugerencias de autocompletado en tiempo real; LLM analiza el stack de errores para localizar automáticamente bugs y generar código de corrección |
+| 2 | Plataforma de construcción de aplicaciones low-code y automatización de flujos | El usuario describe los requisitos en lenguaje natural, LLM los convierte en configuración low-code o framework de código |
+| 3 | Sistema de generación de casos de prueba unitarios | Análisis AST del código fuente para extraer la lógica de funciones, LLM genera casos de prueba con condiciones límite y escenarios de excepción; integración con Jest/Pytest para ejecutar pruebas |
+| 4 | Herramienta de análisis inteligente de código y migración entre lenguajes | Análisis de la estructura del código basado en Tree-sitter, LLM analiza la calidad del código y proporciona sugerencias de optimización; combinación con motor de reglas para conversión entre lenguajes |
+| 5 | Herramienta de generación automática de sentencias SQL a partir de lenguaje natural | LLM convierte consultas en lenguaje natural a SQL, soportando uniones complejas de múltiples tablas y consultas de agregación |
+| 6 | Plataforma de pruebas automatizadas de API y generación de documentación | LLM analiza comentarios del código y definiciones de interfaces, genera automáticamente casos de prueba y documentación de API; integración con Postman para ejecución de pruebas |
+| 7 | Herramienta inteligente de grabación y mantenimiento de scripts de pruebas UI | Plugin del navegador que graba las operaciones del usuario, LLM analiza la intención de las operaciones para generar scripts de prueba; IA repara localizadores obsoletos |
+| 8 | Análisis de registros del sistema y localización de fallos | ELK Stack recopila datos de registros, LLM analiza registros anómalos para extraer información clave y localizar la causa raíz; recomendación de soluciones de reparación |
+| 9 | Herramienta de generación automática de código de interfaz de usuario (UI) | Imágenes de diseño reconocidas por OCR para identificar la estructura de layout, LLM genera CSS responsivo y código de componentes; integración con TailwindCSS para soportar múltiples frameworks de estilos |
+| 10 | Asistente de diseño inteligente y modelado de estructura de base de datos | Documentos de requisitos del negocio ingresados a LLM, generación automática de diagramas ER y estructuras de tablas; soporte de exportación de scripts DDL para MySQL/PostgreSQL |
+
+## 5. Sector salud
+
+Los escenarios del sector salud buscan mejorar la eficiencia diagnóstica y la calidad de los servicios médicos. Las aplicaciones comunes incluyen generación automatizada de historiales clínicos, preguntas y respuestas sobre conocimiento médico, análisis asistido de imágenes, soporte a la investigación farmacológica, etc., promoviendo la transformación inteligente del sector de la salud.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Asistente inteligente de interpretación de informes de análisis clínicos | Carga de imágenes de informes de análisis, OCR identifica indicadores clave, LLM interpreta valores anómalos y genera explicaciones en lenguaje sencillo |
+| 2 | Experto en consultas de salud basado en tecnología de búsqueda de conocimiento | Construcción de un grafo de conocimiento médico (ICD-10, prospectos de medicamentos, guías clínicas), búsqueda RAG para generar respuestas |
+| 3 | Plataforma de análisis de decisión de datos de investigación clínica | Integración de datos EMR y resultados de análisis, LLM asiste en la generación de código de análisis estadístico y gráficos de visualización; soporte para estudios de cohorte y análisis de supervivencia |
+| 4 | Sistema inteligente de generación de preguntas de examen médico y análisis de errores | Ingreso de capítulos de libros de texto y puntos de conocimiento, LLM genera preguntas de práctica y explicaciones; registro automático de errores y generación de análisis de puntos débiles |
+| 5 | Experto en preguntas y respuestas del grafo de conocimiento del proceso completo de investigación farmacológica | Construcción de un grafo de conocimiento fármaco-diana-enfermedad, LLM responde preguntas relacionadas con investigación; soporte para búsqueda bibliográfica y recomendación de protocolos experimentales |
+| 6 | Asistente inteligente de preguntas y respuestas sobre prospectos de medicamentos | Carga de imágenes de prospectos o ingreso del nombre del medicamento, LLM responde preguntas sobre dosificación, efectos adversos, precauciones, etc. |
+| 7 | Asistente de generación de artículos de divulgación sobre enfermedades | Ingreso del nombre de la enfermedad y la audiencia, LLM genera artículos de divulgación accesibles; soporte de múltiples versiones (versión para pacientes/versión para familiares) |
+| 8 | Herramienta de generación automática de informes de imágenes médicas | El radiólogo describe las características de las imágenes, LLM genera automáticamente un informe estructurado; soporte de plantillas para tipos comunes de exámenes |
+| 9 | Asistente de generación y archivo inteligente de registros quirúrgicos | Grabación por voz de pasos clave durante la cirugía, LLM genera registros quirúrgicos estructurados; asociación automática con códigos quirúrgicos |
+| 10 | Asistente inteligente de recordatorio de medicación para enfermedades crónicas | El paciente ingresa su lista de medicamentos, LLM genera recordatorios de medicación personalizados; soporte de verificación de contraindicaciones y preguntas y respuestas interactivas |
+
+## 6. Ciberseguridad
+
+Los escenarios de ciberseguridad se centran en la protección de seguridad y el control de riesgos. Las aplicaciones centrales abarcan detección de vulnerabilidades, análisis de inteligencia sobre amenazas, identificación de correos de phishing, respuesta a incidentes de seguridad, etc., construyendo un sistema integral de protección de seguridad inteligente para las empresas.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Motor de detección y reparación de vulnerabilidades de seguridad en código | Herramienta de análisis estático de código (SAST) escanea el código, LLM analiza los principios de las vulnerabilidades y genera sugerencias de reparación; integración con pipeline CI/CD |
+| 2 | Sistema inteligente de identificación e interceptación de correos de phishing generados por IA | LLM analiza el contenido del correo, las características del remitente y la seguridad de los enlaces, identifica correos de phishing generados por IA; integración con la pasarela de correo para interceptar en tiempo real |
+| 3 | Asistente de generación automática de informes diarios de operaciones de seguridad | Resumen de registros de dispositivos de seguridad, LLM extrae automáticamente eventos clave y genera informes diarios; marcado highlight de eventos anómalos |
+| 4 | Asistente inteligente de preguntas y respuestas de la base de conocimiento de seguridad | Construcción de base de conocimiento vectorial basada en documentos de seguridad y la base CVE, LLM responde preguntas sobre técnicas de seguridad y procedimientos de respuesta |
+| 5 | Asistente de generación inteligente de informes de pruebas de penetración | Tras completar la prueba de penetración, LLM genera automáticamente el informe según la descripción de vulnerabilidades; generación masiva de sugerencias de reparación |
+| 6 | Protección contra código malicioso y monitoreo de cumplimiento de privacidad | Análisis en sandbox del comportamiento de archivos sospechosos, LLM identifica características maliciosas y genera firmas; escaneo de identificación de datos privados |
+| 7 | Herramienta de generación de listas de verificación de configuración de seguridad | Ingreso del tipo de sistema objetivo, LLM genera listas de verificación de configuración de seguridad; soporte de estándares como MLPS 2.0, CIS, etc. |
+| 8 | Asistente de consulta y análisis inteligente de inteligencia sobre amenazas | Conexión con múltiples fuentes de inteligencia sobre amenazas (código abierto, comerciales), LLM interpreta la inteligencia y la relaciona con los activos empresariales; recomendación de estrategias de protección |
+| 9 | Asistente de generación de informes de revisión post-incidente de seguridad | Tras un incidente de seguridad, LLM genera automáticamente un informe de revisión según la línea de tiempo; análisis de causa raíz y sugerencias de mejora |
+| 10 | Centro de monitoreo y alerta temprana de inteligencia sobre amenazas global | Rastreo web de información de seguridad global y divulgación de vulnerabilidades, LLM extrae información clave y evalúa el impacto; notificaciones de alerta por correo/SMS |
+
+## 7. Gestión financiera, seguros y banca
+
+Los escenarios del sector financiero se centran en el control de riesgos y la inteligencia empresarial. Las aplicaciones típicas incluyen evaluación de riesgos crediticios, asesor de gestión patrimonial, generación de informes financieros, monitoreo contra el blanqueo de capitales, etc., mejorando la eficiencia operativa y la capacidad de gestión de riesgos de las instituciones financieras.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Asistente de generación inteligente de informes de debida diligencia crediticia | Ingreso de información básica de la empresa y datos financieros, LLM genera automáticamente el informe de debida diligencia crediticia; marcado automático de puntos de riesgo |
+| 2 | Asesor inteligente de gestión de patrimonio bancario privado | LLM analiza el perfil de riesgo y los objetivos financieros del cliente, genera recomendaciones de asignación de activos; integración con productos financieros y base de fondos |
+| 3 | Asistente de generación inteligente y verificación de cumplimiento de prospectos de IPO | Plantillas modulares del prospecto de oferta, LLM llena automáticamente la descripción del negocio y los factores de riesgo; motor de reglas de verificación de cumplimiento para comprobar la consistencia entre secciones |
+| 4 | Sistema de generación automática de informes financieros y alerta de anomalías operativas | Recopilación automática de datos del sistema financiero, LLM genera la sección de análisis financiero y discusión de la dirección; reglas de alerta para indicadores anómalos |
+| 5 | Asistente de extracción de información y preguntas y respuestas sobre facturas y recibos financieros | Carga de imágenes de facturas, OCR reconoce la información, LLM responde preguntas relacionadas con los documentos; soporte para facturas de IVA, billetes de tren, etc. |
+| 6 | Asistente de búsqueda inteligente y preguntas y respuestas sobre casos regulatorios | Construcción de base de conocimiento basada en casos de sanciones regulatorias, LLM responde preguntas de cumplimiento y proporciona referencias de casos |
+| 7 | Entrenador inteligente de guiones para agentes de seguros | LLM asume el papel de diferentes tipos de clientes para simular conversaciones, evalúa la conformidad y la persuasión del guion del agente; análisis de transcripción de grabaciones |
+| 8 | Plataforma de análisis de cláusulas de pólizas de seguros y comparación con la competencia | Análisis estructurado de cláusulas, LLM genera resúmenes de puntos destacados y precauciones |
+| 9 | Servicio de reconocimiento de emociones en conversaciones con clientes | Reconocimiento de emociones por voz combinado con detección de conformidad del guion, retroalimentación en tiempo real de sugerencias de mejora para el agente |
+| 10 | Asistente de consulta inteligente del progreso de reclamaciones de seguros y diálogo | El usuario ingresa el número de póliza o de denuncia, LLM consulta el progreso de la reclamación y responde preguntas relacionadas |
+
+## 8. Servicios empresariales
+
+Los escenarios de servicios empresariales buscan mejorar la eficiencia operativa y el nivel de gestión organizacional. Las aplicaciones comunes incluyen gestión de relaciones con clientes, predicción de ventas, monitoreo de reputación, gestión inteligente de RRHH, etc., ayudando a las empresas a lograr su transformación digital.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Plataforma de análisis de retención de clientes y alerta temprana de pérdida | Recopilación de datos de comportamiento mediante tracking de usuarios, modelo ML predice la probabilidad de pérdida, LLM genera sugerencias de retención |
+| 2 | Plataforma de prospección y correo de marketing B2B | Filtrado de clientes objetivo a partir de datos empresariales, LLM genera contenido de marketing personalizado; integración con plataforma de envío masivo de correos |
+| 3 | Plataforma de monitoreo de pipeline de ventas y predicción de resultados | Recopilación automática de datos de CRM, LLM analiza el embudo de ventas y predice el cumplimiento de objetivos; alertas de anomalías para los gerentes |
+| 4 | Radar de monitoreo de reputación de marca y alerta temprana de crisis | Recopilación de datos de opinión pública de toda la web (redes sociales, noticias, foros), LLM analiza sentimientos y tendencias de propagación; alertas de crisis |
+| 5 | Asistente inteligente de redacción de correos profesionales y gestión de la comunicación emocional | Comprensión del contexto del correo, LLM genera borradores de correos profesionales; análisis de emociones con retroalimentación de sugerencias de mejora |
+| 6 | Sistema de análisis inteligente de currículums y emparejamiento con puestos | Análisis de PDF de currículums para extraer información clave, LLM empareja con puestos adecuados y genera sugerencias de entrevista; integración con sistemas ATS |
+| 7 | Guía de incorporación y asistente de preguntas y respuestas para nuevos empleados | Búsqueda RAG en base de conocimiento de documentos de incorporación, LLM responde preguntas frecuentes de los nuevos empleados |
+| 8 | Plataforma de retroalimentación de desempeño y gestión de objetivos OKR | Recopilación de datos del sistema OKR, LLM analiza el cumplimiento de objetivos y genera sugerencias de retroalimentación; recopilación de feedback 360° |
+| 9 | Registro inteligente de reuniones y gestión de tareas pendientes | Transcripción de grabaciones de reuniones, LLM extrae puntos clave de discusión y tareas pendientes; creación automática de tareas en el sistema de gestión |
+| 10 | Reconocimiento de facturas y procesamiento automatizado de reembolsos | OCR reconoce la información de las facturas, verificación automática de autenticidad y cumplimiento de políticas de reembolso; integración con el sistema financiero |
+
+## 9. Producción y gestión de contenido
+
+Los escenarios de producción y gestión de contenido se centran en la generación creativa y la gestión de tráfico. Las aplicaciones centrales incluyen creación de textos, producción de videos cortos, transmisión en vivo con avatares digitales, optimización SEO, etc., ayudando a las empresas a mejorar la eficiencia de producción de contenido y las tasas de conversión de marketing.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Plataforma de asistencia creativa para contenido de cine y televisión y novelas | LLM proporciona asistencia creativa como sinopsis, desarrollo de personajes, generación de diálogos; mapas mentales para visualizar la estructura de la historia |
+| 2 | Asistente de redacción inteligente de historias de marca y artículos de relaciones públicas | Ingreso de palabras clave de marca e información del producto, LLM genera versiones de textos en múltiples estilos; integración con API de pruebas A/B |
+| 3 | Sistema de gestión de transmisión en vivo e interacción de avatares digitales virtuales | Modelado de imagen digital + voz TTS + diálogo LLM, respuesta en tiempo real a los comentarios de los espectadores; integración con transmisión OBS |
+| 4 | Generación de guiones de videos cortos y edición inteligente | LLM genera guiones y storyboards de videos cortos, Sora/Runway genera fragmentos de video; herramienta de edición los ensambla automáticamente |
+| 5 | Transcripción por voz de reuniones de ventas y recomendación de guiones | Transcripción ASR de llamadas telefónicas, LLM analiza la conversación y recomienda guiones ganadores; integración con sistema CRM |
+| 6 | Sistema inteligente de generación y diseño de contenido de marketing | Ingreso de información del producto, LLM genera textos de marketing y extracción de puntos de venta; integración con plantillas de Canva/Gaoding |
+| 7 | Sistema de monitoreo en tiempo real del ROI de publicidad multicanal y optimización de estrategias | Integración con APIs de plataformas publicitarias para recopilar datos, LLM analiza el rendimiento y genera sugerencias de optimización; alertas de anomalías |
+| 8 | Análisis de palabras clave de motores de búsqueda y análisis de tráfico | Recopilación de datos de Baidu Index, 5118, LLM analiza tendencias y competitividad de palabras clave; recomendación de temas de contenido |
+| 9 | Plataforma de análisis de publicidad de la competencia | API de plataformas de datos de terceros para recopilar anuncios de la competencia, LLM analiza estrategias de publicación y características creativas |
+| 10 | Sistema de análisis inteligente de temas populares y recomendación de contenido de toda la web | Recopilación de datos de tendencias de Weibo, listas populares de Douyin, LLM analiza tendencias y recomienda ángulos temáticos; programación calendario de contenido |
+
+## 10. Administración pública inteligente
+
+Los escenarios de administración pública inteligente buscan mejorar la eficiencia del servicio gubernamental y la capacidad de gobernanza. Las aplicaciones típicas incluyen navegación inteligente de líneas de servicio gubernamental, preguntas y respuestas sobre políticas, optimización de trámites administrativos, gestión de eventos urbanos, etc., promoviendo la construcción del gobierno digital.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Sistema de navegación por voz inteligente y despacho automático de la línea de servicio ciudadano 12345 | Reconocimiento de voz de las llamadas de los ciudadanos, LLM comprende la solicitud y la despacha inteligentemente al departamento correspondiente; flujo automático de tickets |
+| 2 | Robot de guía inteligente y respuestas sobre políticas para oficinas de servicios gubernamentales | Búsqueda RAG en base de conocimiento gubernamental, LLM responde sobre procedimientos y políticas; integración con sistema de turnos |
+| 3 | Plataforma de emparejamiento inteligente y envío preciso de políticas de beneficio empresarial | Análisis estructurado de políticas, perfil empresarial con emparejamiento automático de políticas aplicables; recordatorios por SMS/correo |
+| 4 | Asistente de pre-revisión inteligente y verificación de cumplimiento de materiales administrativos | Reconocimiento OCR de materiales y extracción de información clave, LLM verifica la integridad y conformidad de los documentos |
+| 5 | Sistema de detección de comportamiento anómalo en videovigilancia de seguridad pública | Análisis en tiempo real de flujos de video, modelo CV detecta comportamientos anómalos (peleas, caídas, etc.); notificaciones de alerta |
+| 6 | Plataforma de identificación inteligente y gestión de despacho de eventos urbanos en cuadrícula | Recopilación de datos de percepción urbana (IoT, cámaras), LLM identifica el tipo de evento y lo despacha |
+| 7 | Sistema de análisis big data de opinión pública y alerta temprana de riesgos sociales | Análisis fusionado de múltiples fuentes de datos (línea de servicio gubernamental, opinión pública en internet, encuestas comunitarias); LLM identifica puntos calientes de riesgo |
+| 8 | Plataforma de digitalización y archivo inteligente de registros gubernamentales | OCR reconoce el contenido textual de los archivos, LLM extrae información clave y los clasifica automáticamente; soporte de búsqueda de texto completo |
+| 9 | Plataforma de comando de emergencia y despacho inteligente de recursos de rescate para eventos públicos | Recopilación de información del evento, LLM genera el plan de respuesta de emergencia; algoritmo de optimización de despacho de recursos |
+| 10 | Sistema de monitoreo en cuadrícula de contaminación ambiental atmosférica y localización precisa de fuentes | Recopilación de datos de sensores de calidad del aire, modelo CV identifica fuentes de contaminación; LLM analiza tendencias de contaminación y rastrea el origen |
+
+## 11. Asuntos legales y gestión de contratos
+
+Los escenarios de asuntos legales se centran en la mejora de la eficiencia de los servicios legales y la gestión de cumplimiento. Las aplicaciones comunes incluyen revisión de contratos, análisis de casos, monitoreo regulatorio, generación de documentos legales, etc., proporcionando herramientas inteligentes para los profesionales del derecho.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Agent de detección de riesgos y vulnerabilidades en contratos con un clic | Análisis estructurado del texto del contrato, LLM identifica problemas potenciales comparando con la lista de verificación de riesgos; marcado de cláusulas de alto riesgo |
+| 2 | Plataforma de revisión de cumplimiento y sugerencias de modificación de contratos empresariales en todo su ciclo de vida | Comparación de cláusulas contractuales con la base de datos normativa, LLM genera informes de cumplimiento; seguimiento de sugerencias de modificación |
+| 3 | Asesor de evaluación inteligente por IA de la tasa de éxito en casos similares | Extracción de características del caso, búsqueda y emparejamiento de casos similares; LLM analiza los factores que influyen en el éxito |
+| 4 | Radar de monitoreo en tiempo real de cambios legislativos y análisis de impacto empresarial | Actualización en tiempo real de la base de datos legislativa, LLM analiza el contenido modificado y evalúa el impacto empresarial; notificaciones de alerta |
+| 5 | Herramienta de redacción automática AIGC de cartas de abogado | Ingreso de la declaración de hechos, LLM genera plantillas de cartas de abogado estandarizadas; verificación de elementos y cumplimiento normativo |
+| 6 | Grabadora de transcripción en tiempo real de juicios y extracción automatizada de puntos de controversia | Transcripción ASR de grabaciones de juicios, LLM extrae puntos de controversia y argumentos clave; marcado de marcas de tiempo |
+| 7 | Sistema de monitoreo automatizado de infracciones de propiedad intelectual y obtención de pruebas blockchain de toda la web | Monitoreo de infracciones en plataformas de comercio electrónico y redes sociales; recopilación y almacenamiento automático de evidencia |
+| 8 | Agent de verificación de consistencia de datos clave y alerta temprana de riesgos en prospectos de IPO basado en LLM | Comparación de datos entre múltiples secciones del prospecto, LLM identifica inconsistencias y anomalías en los datos; marcado de riesgos |
+| 9 | Plugin de explicación en lenguaje sencillo de cláusulas legales complejas | Selección de disposiciones legales, LLM genera explicaciones fáciles de entender |
+| 10 | Sistema de organización inteligente y visualización de la cadena de pruebas de un caso | Carga de materiales probatorios, LLM analiza las relaciones entre pruebas y la línea de tiempo |
+
+## 12. Turismo y servicios de viaje
+
+Los escenarios de turismo y viajes buscan mejorar la experiencia de viaje y la comodidad del servicio. Las aplicaciones centrales incluyen planificación inteligente de itinerarios, predicción de precios, tours virtuales, servicios de traducción, etc., haciendo que los viajes sean más agradables y sin complicaciones.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Generador de itinerarios automáticos basado en AIGC para viajeros perezosos | Ingreso de preferencias del usuario (días, presupuesto, intereses), LLM genera planes de itinerario diario; API de atracciones para obtener horarios y precios de entradas |
+| 2 | Robot de predicción de tendencias de precios de vuelos y hoteles de toda la web y bloqueo automático de precios bajos | Recopilación de datos de precios de plataformas OTA, modelo ML predice tendencias de precios; alertas de monitoreo de precios |
+| 3 | Asesor de reorganización de itinerarios entre aerolíneas y recomendación de planes de emergencia tras cancelación de vuelos | Monitoreo del estado de vuelos, LLM analiza planes de itinerario alternativos; comparación de precios entre aerolíneas |
+| 4 | Sistema de pre-revisión inteligente de documentos de visa y asistencia de llenado automatizado | Carga de fotos de documentos, verificación de integridad de información mediante OCR; llenado automático de formularios |
+| 5 | Asistente de traducción por voz en tiempo real y traducción visual de menús para viajes al extranjero | Modelo de traducción por voz sin conexión, OCR de imágenes de menús para reconocimiento y traducción |
+| 6 | Analizador de guía para evitar hoteles problemáticos basado en reseñas reales de big data | Recopilación de datos de reseñas de hoteles, LLM extrae palabras clave de reseñas positivas y negativas |
+| 7 | Plataforma de vista previa inmersiva en VR y selección virtual de habitaciones en el destino | Recopilación de imágenes panorámicas 360°, tecnología VR para vista previa inmersiva; recorrido virtual de habitaciones |
+| 8 | Asistente de generación automática de diarios de viaje ilustrados y textos para redes sociales a partir de huellas de viaje | Extracción de información de fecha y lugar de las fotos, LLM genera textos de diarios de viaje; composición con plantillas |
+| 9 | Plataforma de recopilación automática de facturas de viajes de negocios y gestión de reembolsos conforme a normativa | Integración con API de plataformas de viajes, recopilación automática de información de facturas; verificación de cumplimiento |
+| 10 | Predicción en tiempo real de congestión de visitantes y navegación con rutas de visita en horarios no pico | Recopilación de datos de flujo de visitantes en atracciones, modelo ML predice períodos de congestión; recomendación de horarios no pico |
+
+## 13. Acompañamiento emocional
+
+Los escenarios de acompañamiento emocional se centran en la salud mental y el consuelo emocional. Las aplicaciones típicas incluyen compañeros virtuales, consultas emocionales, entrenamiento cognitivo, orientación psicológica, etc., proporcionando acompañamiento y apoyo las 24 horas del día.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Compañero virtual de compañía profunda 24 horas basado en modelos LLM | Sistema de memoria que almacena el historial de conversaciones, LLM genera respuestas personalizadas; módulo de apoyo emocional |
+| 2 | Asesor de IA de reconocimiento emocional multimodal y orientación psicológica | Análisis de tono de voz + reconocimiento de emociones en texto, LLM genera sugerencias de orientación; alerta de intervención en crisis |
+| 3 | Avatar digital de entrenamiento cognitivo y recuperación de memorias para personas con Alzheimer | Juegos cognitivos (memoria, cálculo, lenguaje) para entrenamiento; fotografías antiguas/canciones antiguas que activan recuerdos |
+| 4 | Entrenador de práctica social simulada con AIGC para personas con ansiedad social | Simulación de escenarios sociales virtuales, LLM asume diferentes roles; sugerencias de habilidades sociales |
+| 5 | Generador personalizado de cuentos para dormir para niños con IA generativa | Los padres ingresan el tema y las preferencias, LLM genera cuentos personalizados; generación de música de fondo |
+| 6 | Sistema de restauración digital de vidas de seres queridos fallecidos y diálogo trans temporal con LLM | Entrenamiento de modelo personalizado con datos vitales (voz, textos); generación de conversaciones con memoria |
+| 7 | Chatbot empático de espejo de personalidad basado en datos MBTI con IA | Ingreso de resultados de tests MBTI, LLM genera análisis de personalidad y respuestas empáticas; recomendaciones de compatibilidad de personalidad |
+| 8 | Asistente de monitoreo del estado de ánimo las 24 horas y motivación emocional positiva con IA | Registro diario del estado de ánimo, LLM analiza tendencias y genera contenido motivacional; envío de recordatorios positivos |
+| 9 | Refugio anónimo de desahogo para adolescentes con protección de privacidad con IA | Entrada anónima de desahogo, LLM proporciona escucha y sugerencias; alerta por palabras sensibles |
+| 10 | Sistema de crianza de mascotas virtuales con IA y capacidad de evolución autónoma | Entrenamiento de modelo de personalidad de mascota, crecimiento y evolución a través de interacción conversacional; sistema de vestuario virtual |
+
+## 14. Entretenimiento y ocio
+
+Los escenarios de entretenimiento y ocio buscan ofrecer una rica experiencia de entretenimiento digital. Las aplicaciones comunes incluyen toma de decisiones inteligente de NPC en juegos, asistencia en juegos de misterio, creación de contenido, procesamiento de audio y video, etc., satisfaciendo las diversas necesidades de entretenimiento de los usuarios.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Motor de toma de decisiones autónoma para NPC de juegos de mundo abierto impulsado por LLM | Árbol de comportamiento del NPC integrado con toma de decisiones LLM, sistema de diálogo genera interacciones personalizadas; motor de comportamiento |
+| 2 | Herramienta de deducción de tramas AIGC y asistencia de control de DM para juegos de misterio inmersivos | Las elecciones de los jugadores activan ramas de la historia, LLM genera lógica deductiva; generación automática de tarjetas de pistas |
+| 3 | Modificador generativo de finales de novelas interactivas | Las elecciones del lector influyen en la dirección de la trama, LLM genera múltiples ramas de finales |
+| 4 | Estación de trabajo de generación automática AIGC de modelos 3D de personajes de anime | Texto descriptivo genera bocetos de personajes, herramientas de modelado 3D crean automáticamente los modelos; renderizado de texturas y materiales |
+| 5 | Análisis visual CV y comentarista inteligente por IA de partidas de esports | Análisis en tiempo real de la pantalla del juego, identificación de momentos clave; LLM genera textos de comentario |
+| 6 | Motor de algoritmo de recomendación de contenido humorístico personalizado | Perfil de intereses del usuario, emparejamiento y recomendación de contenido humorístico |
+| 7 | Software de corrección de afinación por IA y embellecimiento vocal para karaoke | Procesamiento de reducción de ruido y mejora de voz; algoritmo de corrección de afinación por IA |
+| 8 | Herramienta de extracción por IA y edición de tramas específicas de personajes en series y películas | Análisis del contenido del video, extracción de fragmentos relacionados con personajes; edición automática |
+| 9 | Sistema de generación automática de audiolibros con síntesis TTS multicolor | Asignación de personajes del texto, generación de voces personalizadas; adición de música de fondo y efectos de sonido |
+| 10 | Entrenador de revisión y juego de ajedrez y juegos de mesa con aprendizaje por refuerzo | Análisis de partidas, simulación de oponentes con IA; generación de sugerencias de revisión |
+
+## 15. Servicios de comercio electrónico
+
+Los escenarios de servicios de comercio electrónico se centran en la eficiencia operativa y la mejora de la conversión. Las aplicaciones centrales incluyen generación de contenido de productos, transmisión en vivo de ventas, servicio al cliente, análisis de precios, etc., ayudando a los comerciantes a lograr una operación inteligente.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Herramienta de producción masiva de páginas de detalles de productos AIGC con alta tasa de conversión | Ingreso de información del producto, LLM genera textos de puntos de venta y descripciones de escenarios; generación de imágenes de fondo |
+| 2 | Fábrica de generación de videos de prueba de vestir y exhibición de modelos virtuales con IA para moda | Procesamiento de fotos planas de ropa, generación de efectos de prueba de vestir en modelos virtuales; videos de exhibición desde múltiples ángulos |
+| 3 | Asistente de traducción y pulido localizado multilingüe con LLM para comercio electrónico transfronterizo | Traducción multilingüe de descripciones de productos, pulido de adaptación cultural; interfaces de publicación en múltiples plataformas |
+| 4 | Robot de análisis de sentimientos de clientes y respuesta inteligente basado en NLP | Análisis de sentimientos en conversaciones de consultas, generación automática de respuestas de consuelo; clasificación de reseñas positivas y negativas |
+| 5 | Sistema de transmisión en vivo con avatares digitales AIGC las 24 horas | Imagen digital + generación de guiones en tiempo real, invocación en tiempo real de información de productos; respuestas interactivas a comentarios |
+| 6 | Plugin de comparación de precios por IA y predicción de tendencias de productos similares de toda la web | Rastreo de precios en plataformas de comercio electrónico, visualización de comparación de precios; predicción de tendencias de precios |
+| 7 | Plataforma de selección inteligente por IA de fotos de reseñas de clientes y síntesis de videos cortos | Puntuación de calidad de fotos de reseñas de clientes, recomendación automática de contenido de calidad; síntesis con plantillas de videos cortos |
+| 8 | Análisis por voz en tiempo real de conversaciones de ventas y recomendación de guiones ganadores basado en LLM | Transcripción ASR de llamadas, detección de conformidad de guiones en tiempo real; recomendación de guiones |
+| 9 | Motor de análisis de tendencias de mercado por IA y predicción de productos exitosos | Recopilación y análisis de datos de redes sociales y comercio electrónico, LLM identifica tendencias populares; recomendaciones de selección de productos |
+| 10 | Sistema de agrupación por IA de perfiles de usuarios de tráfico privado y operación de precisión | Análisis de agrupación de datos de comportamiento de usuarios, generación de etiquetas de perfiles; activación de marketing automatizado |
+
+## 16. Energía
+
+Los escenarios del sector energético buscan lograr una gestión inteligente y la transición verde de la industria energética. Las aplicaciones típicas incluyen análisis de consumo eléctrico, detección de equipos, cálculo de emisiones de carbono, optimización de despacho, etc., promoviendo la operación eficiente de los sistemas energéticos.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Asesor de análisis del comportamiento de consumo eléctrico doméstico y estrategias de ahorro energético con IA | Recopilación de datos de medidores inteligentes, análisis de patrones de consumo; LLM genera recomendaciones de ahorro energético |
+| 2 | Sistema de reconocimiento visual CV por dron de defectos en paneles fotovoltaicos | Inspección con dron, análisis de imágenes termoinfrarrojas; detección y marcado de defectos |
+| 3 | Agente de predicción de tendencias de precios de mercado eléctrico al contado y estrategia automática de ganancias con IA | Recopilación de datos del mercado eléctrico, modelo de predicción de precios; generación y ejecución de estrategias de trading |
+| 4 | Sistema de evaluación de salud no destructiva por IA y alerta temprana de riesgo de fuga térmica de baterías de almacenamiento | Monitoreo de datos operativos de baterías, modelo de evaluación de salud; alertas de riesgo |
+| 5 | Asistente de cálculo automático de emisiones de carbono en toda la cadena empresarial y generación de informes ESG con IA | Recopilación de datos de consumo energético, cálculo de factores de emisión de carbono; generación automática de informes ESG |
+| 6 | Sistema de predicción de carga ante clima extremo y comando de despacho de emergencia de la red eléctrica con IA | Integración de datos meteorológicos, modelo de predicción de carga; generación de estrategias de despacho |
+| 7 | Guardián de reconocimiento por video por IA y alerta de comportamientos indebidos en gasolineras | Análisis de videovigilancia, detección de comportamientos indebidos (hablar por teléfono, fumar, etc.); notificaciones de alerta |
+| 8 | Sistema de monitoreo por ondas acústicas por IA y localización precisa de fugas en oleoductos y gasoductos de gran longitud | Recopilación de datos de sensores acústicos, modelo de detección de fugas; cálculo de algoritmos de localización |
+| 9 | Sistema de agregación de recursos de plantas virtuales y toma de decisiones de trading eléctrico por IA | Conexión de recursos distribuidos, optimización de despacho agregado; ejecución de estrategias de trading |
+| 10 | Seguimiento por IA de la ubicación de personal en minas y alerta de intrusión en zonas peligrosas | Localización UWB/Bluetooth, seguimiento de trayectoria del personal; vallas electrónicas en zonas peligrosas |
+
+## 17. Audio y video
+
+Los escenarios de audio y video se centran en la producción de contenido y el procesamiento de medios. Las aplicaciones comunes incluyen edición de video, síntesis de voz, generación de subtítulos, restauración de video, etc., mejorando la eficiencia y calidad de la producción de contenido audiovisual.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Herramienta de identificación por IA de fragmentos destacados y edición automática de videos cortos a partir de videos largos | Análisis del contenido del video, identificación de fotogramas clave; edición automática de fragmentos destacados |
+| 2 | Asistente de separación inteligente de ruido de fondo y mejora de voz por IA en video | Modelo de separación de audio, eliminación de ruido de fondo; procesamiento de mejora de voz |
+| 3 | Estación de trabajo de restauración 4K y colorización inteligente por IA de material audiovisual antiguo | Modelo de superresolución de video, restauración de calidad de material antiguo; colorización automática por IA |
+| 4 | Sistema de doblaje TTS de texto a voz de nivel realista y control emocional | Modelo TTS multicolor, generación con control emocional; exportación de audio |
+| 5 | Herramienta de reconocimiento automático ASR de voz de video y generación de subtítulos bilingües | Reconocimiento de voz para generar subtítulos, traducción a múltiples idiomas; superposición de subtítulos bilingües |
+| 6 | Motor de eliminación inteligente por IA de objetos innecesarios en la imagen del video | Seguimiento de objetivos en video, eliminación y reparación de objetos; procesamiento de consistencia entre fotogramas |
+| 7 | Compositor automático AIGC de música de fondo sin derechos de autor | Modelo de generación musical, control de estilo y emoción; detección de derechos de autor |
+| 8 | Software de clonación de timbre de voz por IA y conversión de voz para personas específicas | Entrenamiento de modelo de timbre con pocas muestras de voz; procesamiento de cambio de voz |
+| 9 | Plataforma de conversión de guiones a storyboards con un clic y generación de videos de previsualización dinámica por IA | Análisis de guiones para generar storyboards, IA genera videos de previsualización |
+| 10 | Asistente de transcripción inteligente por IA y extracción de tareas pendientes de grabaciones de reuniones | Separación y transcripción de voz en reuniones de múltiples participantes, LLM extrae tareas pendientes; marcado de marcas de tiempo |
+
+## 18. Marketing con IA
+
+Los escenarios de marketing con IA buscan mejorar la eficiencia del marketing y la producción creativa. Las aplicaciones centrales incluyen generación de textos, diseño de pósters, seguimiento de tendencias, análisis de la competencia, etc., ayudando a las empresas a lograr un marketing preciso y la difusión de marca.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Motor de redacción automática AIGC de textos virales para Xiaohongshu (RED) | Ingreso del tema, LLM genera textos de recomendación; optimización de emoji y etiquetas de temas |
+| 2 | Herramienta de diseño inteligente de pósters de marketing y adaptación a múltiples tamaños | Ingreso del texto, emparejamiento inteligente de plantillas de pósters y exportación en múltiples tamaños |
+| 3 | Plataforma de generación creativa AIGC de LOGO de marca y construcción del sistema de identidad visual (VI) | Ingreso de palabras clave de marca, generación creativa de LOGO; generación de normativas VI |
+| 4 | Asistente de seguimiento de tendencias populares por IA y generación creativa de marketing oportunista | Recopilación de datos de tendencias, LLM analiza ángulos de marketing; generación de propuestas creativas |
+| 5 | Monitor en tiempo real del ROI de publicidad y asistente de puja presupuestaria por IA | Integración con datos de plataformas publicitarias, modelo de análisis de rendimiento; optimización de estrategias de puja |
+| 6 | Analizador profundo de estrategias de marketing de la competencia y generador semanal de informes por IA | Recopilación y análisis de contenido de la competencia, extracción de estrategias; generación automática de informes semanales |
+| 7 | Diseño inteligente de palabras clave de motores de búsqueda y redacción masiva de artículos para generar tráfico | Análisis de palabras clave, generación masiva de artículos; sugerencias de optimización SEO |
+| 8 | Experto en redacción por IA de correos de marketing personalizados para cada usuario | Datos de perfiles de usuarios, generación de contenido personalizado; pruebas A/B |
+| 9 | Radar de monitoreo de reputación de marca de toda la web y alerta temprana de crisis de opinión pública por IA | Recopilación de datos de opinión pública de toda la web, análisis de sentimientos; notificaciones de alerta de crisis |
+| 10 | Asistente de generación creativa AIGC de guiones de videos cortos y guía de storyboards | Ingreso del tema, generación de guiones y storyboards; guía de sugerencias de filmación |
+
+## 19. Inteligencia de datos
+
+Los escenarios de inteligencia de datos se centran en el análisis de datos y la extracción de valor. Las aplicaciones típicas incluyen consultas en lenguaje natural, generación de visualizaciones, gobernanza de datos, construcción de grafos de conocimiento, etc., ayudando a las empresas a lograr un soporte para la toma de decisiones basada en datos.
+
+| N.º | Nombre del escenario de aplicación | Referencia de implementación |
+| :--: | --- | --- |
+| 1 | Motor de consulta en lenguaje natural basado en Text-to-SQL | Conversión de lenguaje natural a consultas SQL, visualización de resultados |
+| 2 | BI conversacional: generar gráficos de visualización con una frase | Descripción de necesidades de datos, generación automática de gráficos; soporte de cambio entre múltiples tipos de gráficos |
+| 3 | Herramienta de reconocimiento de tablas Excel a partir de capturas de pantalla con un clic | Carga de capturas de pantalla, VLM reconoce la estructura de la tabla y los datos; exportación a archivo Excel |
+| 4 | Herramienta de reconocimiento por IA de tablas a partir de imágenes y capturas de pantalla para Excel | OCR de imágenes para reconocer la estructura de la tabla, exportación de datos a Excel |
+| 5 | Construcción automatizada de grafos de conocimiento de datos heterogéneos multifuente | Conexión de múltiples fuentes de datos, extracción de entidades y relaciones; almacenamiento en base de datos de grafos |
+| 6 | Asistente de interpretación inteligente y análisis de tendencias de informes de datos | Carga de imágenes de informes de datos o ingreso de datos, VLM interpreta el contenido de los gráficos y analiza tendencias |
+| 7 | Asistente de interpretación inteligente de estructura de tablas de base de datos y generación de ejemplos de consultas | Ingreso de nombre de tabla o descripción de campos, LLM genera descripción de la tabla y sentencias SQL de ejemplo |
+| 8 | Alineación inteligente de datos maestros empresariales y eliminación de duplicados por IA | Emparejamiento de datos maestros multifuente, identificación de registros duplicados; configuración de reglas de fusión |
+| 9 | Herramienta de conversión inteligente de documentos de requisitos de datos a casos de prueba | Ingreso de descripción de requisitos de datos, LLM genera escenarios de prueba y casos de validación |
+| 10 | Asistente inteligente de preguntas y respuestas sobre definiciones de indicadores de datos | Construcción de base de conocimiento basada en documentos de definición de indicadores, LLM responde preguntas sobre definiciones de indicadores, lógica de cálculo, etc. |
diff --git a/docs/es-es/stage-1/appendix-jobs-to-be-done/index.md b/docs/es-es/stage-1/appendix-jobs-to-be-done/index.md
new file mode 100644
index 0000000..52abd96
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-jobs-to-be-done/index.md
@@ -0,0 +1,496 @@
+---
+title: 'Usa Jobs to Be Done para encontrar lo que los usuarios realmente quieren lograr'
+description: 'Comprende que los usuarios no compran funciones, sino que "contratan" tu producto para completar un progreso en un escenario especifico.'
+---
+
+<script setup>
+const duration = 'Aproximadamente <strong>1.5 horas</strong>'
+</script>
+
+# Usa Jobs to Be Done para encontrar lo que los usuarios realmente quieren lograr
+
+<a id="top-jtbd"></a>
+
+## Resumen del capitulo
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['JTBD', 'Necesidades del usuario', 'Pensamiento de producto', 'Insight de necesidades']"
+  coreOutput="1 frase JTBD que se parezca mas a una necesidad real"
+  expectedOutput="Poder convertir una idea vaga en un escenario de usuario y una direccion MVP mas concretos"
+>
+
+Muchas personas que empiezan a hacer productos cometen el error de centrar toda su atencion en "que funcionalidad voy a hacer". Ves que otros tienen clasificacion inteligente, y tu tambien quieres anadirla; ves que otros tienen resumen automatico, y tu tambien quieres integrarlo; ves que otros han hecho Agent, multimodal, workflows, y sientes que no puedes quedarte atras.
+
+Pero en la realidad, los usuarios rara vez deciden usar un producto porque "el nombre de la funcion es genial". Lo que hacen es, en un momento concreto, querer avanzar en algo, y por ello "contratan" temporalmente una herramienta, un servicio, o incluso a una persona, para ayudarles a completar ese paso.
+
+Esto es exactamente lo que el metodo **Jobs to Be Done (JTBD)** quiere recordarnos: **los usuarios no compran funciones en si, sino que contratan alguna solucion para ayudarles a completar un progreso.**
+
+Este articulo te guiara desde cero para entender JTBD en un lenguaje lo mas claro posible, y convertirlo en una herramienta de analisis que puedas usar directamente al hacer aplicaciones de IA.
+
+</ChapterIntroduction>
+
+::: info SOP minimo
+**Objetivo**: Despues de leer, sabras mejor como convertir una idea vaga en una necesidad con un escenario de usuario real, en lugar de tener solo un monton de nombres de funciones en la cabeza.
+
+**Accion**: Escribe 1 idea vaga, encuentra 3 usuarios potenciales y preguntales "la ultima vez, como lo manejaste", y luego organizalo en 1 frase JTBD.
+
+**Resultado**: Obtendras una hipotesis de necesidad mas clara, sabiendo que debes resolver primero en la primera version.
+
+**Enlaces rapidos**: [Que es JTBD](#jtbd-what) · [Formula de una frase](#jtbd-formula) · [Como te ayuda la IA](#jtbd-ai)
+:::
+
+## Aprenderas lo siguiente
+
+1. Que es Jobs to Be Done, y por que esta mas cerca de las necesidades reales que el "brainstorming de funciones"
+2. Como distinguir entre "funciones que el usuario dice querer" y "lo que el usuario realmente quiere lograr"
+3. Como usar una plantilla simple para descomponer una idea vaga en escenario, disparador, obstaculo y criterio de exito
+4. Como usar JTBD en productos de IA, preguntas de entrevistas y organizacion de prompts
+
+<a id="jtbd-what"></a>
+## [1. Que es Jobs to Be Done](#top-jtbd)
+
+Jobs to Be Done se abrevia comunmente como **JTBD**. Su idea central esta relacionada con la expresion clasica promovida por el equipo de Clayton Christensen: **los usuarios "contrataran" un producto para completar una tarea.**
+
+La "tarea" aqui no es una accion superficial de una lista de pendientes, sino un **progreso** que el usuario espera que ocurra en su estado. Por ejemplo:
+
+- No es "quiero una herramienta de actas con IA", sino "quiero tener los puntos clave, las tareas pendientes y los responsables organizados en 10 minutos despues de la reunion, sin depender de la memoria para completar las notas"
+- No es "quiero una app de contabilidad", sino "quiero saber en que se me va el dinero, para no estar ansioso a fin de mes"
+- No es "quiero un optimizador de curriculum", sino "quiero enviar un curriculum decente con mas confianza, sin dudar cada vez de que lo he escrito mal"
+
+Entonces, **JTBD no se centra en como se ve el producto, sino en por que el usuario lo necesita en este momento.**
+
+Es por eso que muchos productos aparentemente diferentes en realidad compiten por el mismo job. El usuario quiere "no aburrirse en el camino al trabajo", y los objetos que puede contratar pueden ser videos cortos, podcasts, juegos, chat, o incluso echar una cabezadita. El usuario quiere "entender rapidamente un PDF muy largo", y los objetos que puede contratar pueden ser una herramienta de resumen con IA, un becario, un colega, leerlo a duras penas, o simplemente no leerlo.
+
+Una vez que miras los problemas desde esta perspectiva, descubres que tu verdadero competidor muchas veces no es solo "otra app parecida a la tuya", sino **todas las soluciones alternativas aceptables para el usuario**.
+
+## 2. En que se diferencia JTBD de los perfiles de usuario y las listas de funciones
+
+Muchos principiantes, al hacer analisis de necesidades, primero escriben un perfil de usuario: 25 anos, mujer, ciudad de primer nivel, oficinista, le gustan las herramientas de eficiencia, dispuesta a probar productos nuevos. Esta informacion no se puede decir que sea completamente inutil, pero normalmente **no es suficiente para explicar por que una persona tomara accion en este momento.**
+
+JTBD se preocupa mas por las siguientes preguntas:
+
+- En que escenario decide buscar una solucion
+- Que es exactamente lo que le tiene bloqueado en ese momento
+- Que quiere llevar al siguiente nivel
+- Que metodo torpe esta usando actualmente para arreglarselas
+- Si las cosas se resuelven bien, que resultado le hara sentir que "valio la pena"
+
+Es decir, **el perfil de usuario es mas como "quien es probablemente esta persona", mientras que JTBD es mas como "que quiere realmente lograr esta persona ahora".**
+
+Asimismo, las listas de funciones tambien pueden desviar a uno. El usuario dice "quiero exportar a Word", "quiero reescritura con IA", "quiero entrada de voz"; todo esto son solo expresiones superficiales. JTBD seguira preguntando:
+
+- Por que necesitas exportar a Word ahora, y no a PDF?
+- Quieres reescribir, es porque el estilo es malo, o porque necesitas adaptarlo a diferentes destinatarios?
+- Quieres entrada de voz, es porque te da pereza escribir, o porque frecuentemente estas caminando, conduciendo, o necesitas registrar justo despues de una reunion?
+
+Muchas veces, **la funcion es solo una traduccion temporal del job**. Si solo recoges funciones, es facil hacer un producto donde "agregas lo que el usuario dice"; si puedes ver el job detras, tienes mas oportunidades de hacer una solucion verdaderamente comoda y competitiva.
+
+## 3. Un ejemplo que hasta un principiante puede entender
+
+Primero no te apresures a pensar en productos complejos de IA; empecemos con un ejemplo de la vida cotidiana.
+
+Supongamos que alguien siempre llega tarde para desayunar antes de salir de casa por la manana, y a menudo compra un sandwich y un cafe en la entrada del metro. En la superficie, "compra" un desayuno; pero si lo miramos con JTBD, lo que realmente quiere lograr puede ser:
+
+- Resolver una comida de la forma que menos esfuerzo mental requiera en una manana con prisa
+- Evitar llegar a la oficina muerto de hambre
+- No retrasar el ritmo de desplazamiento por desayunar
+
+En este caso, el usuario no esta contratando "un sandwich de una marca fija", sino una solucion que le ayude a avanzar su manana sin problemas. Si la tienda de conveniencia de al lado es mas rapida, mas cercana y mas estable, probablemente cambiara inmediatamente su eleccion.
+
+Llevando esta logica a productos de IA es aun mas evidente.
+
+Por ejemplo, si quieres hacer una "herramienta de actas de reuniones con IA". Si te quedas solo en el nivel de funciones, facilmente empezaras a pensar:
+
+- Deberia soportar la subida de audio?
+- Deberia integrar separacion de hablantes?
+- Deberia exportar a Markdown?
+- Deberia generar automaticamente tareas pendientes?
+
+Nada de esto esta mal, pero no es suficiente. Si preguntas un nivel mas con JTBD, lo que el usuario realmente quiere lograr puede ser:
+
+- Quiero tener los resultados de la discusion sincronizados con los que no asistieron en 10 minutos despues de la reunion
+- Quiero extraer limpiamente las tareas, responsables y fechas limite, sin que el equipo colabore de memoria
+- Quiero reducir el tiempo de organizacion repetitiva de contenido de reuniones, guardando energia para la toma de decisiones y el avance
+
+Una vez que el job queda claro, muchas prioridades de funciones aparecen automaticamente. Lo mas importante en la primera version puede no ser "soportar 12 formatos de exportacion", sino:
+
+- La estructura del acta debe ser suficientemente clara
+- La extraccion de tareas pendientes debe ser estable
+- Compartir el enlace debe ser facil
+- El resultado debe ser lo suficientemente confiable para reenviarlo directamente al equipo
+
+Este es el valor de JTBD: **te ayuda a volver de "que capacidades quiero apilar" a "que progreso quiero ayudar al usuario a alcanzar".**
+
+## 4. Una plantilla JTBD util
+
+Si eres principiante, primero no intentes hacer JTBD muy academico. Con capturar los 5 elementos mas practicos es suficiente.
+
+### 4.1 Escenario
+
+En que momento y en que entorno el usuario piensa en este producto?
+
+- Despues de una reunion
+- Cuando el jefe pide materiales de urgencia
+- Por la noche preparando el curriculum para enviar
+- A fin de mes descubriendo que el dinero no llega
+
+**Una necesidad sin escenario normalmente no es lo suficientemente real.**
+
+### 4.2 Disparador
+
+Que le hace decidir buscar una solucion inmediatamente?
+
+- Abrumado por un documento largo, sin saber por donde empezar
+- Tienes que entregar algo manana, y hoy descubres que el formato es un desastre
+- Tu jefe te acaba de preguntar por el progreso, y te das cuenta de que no lo tienes organizado
+- Quieres mantener un registro, pero escribir a mano, copiar y organizar es muy complicado
+
+Los disparadores suelen venir con emocion. Esta emocion es importante, porque determina por que el usuario tomara accion en este momento.
+
+### 4.3 El progreso que quiere lograr
+
+No solo quiere "hacer una accion", sino a que nuevo estado quiere llevarse?
+
+- De la confusion a la claridad
+- De la ansiedad a la tranquilidad
+- De la procrastinacion a la accion
+- De la ineficiencia a la fluidez
+- De no saber explicarse a poder entregar directamente
+
+En este paso, la palabra "progreso" es clave. Porque lo que mucha gente realmente compra no es una herramienta, sino un **cambio de estado**.
+
+### 4.4 Solucion alternativa actual
+
+Sin tu producto, como lo hace ahora?
+
+- Copiar y pegar a mano
+- Arreglarselas con Excel o notas
+- Pedir ayuda a un colega
+- Posponerlo y no hacerlo
+- Saltar entre varias herramientas
+
+Quien sea la solucion alternativa, ese es tu verdadero entorno competitivo.
+
+### 4.5 Criterio de exito
+
+Como se sabe que el problema esta realmente resuelto?
+
+- Obtener un resultado compartible en 10 minutos
+- Poder enviar a otros sin necesidad de grandes revisiones
+- No olvidar, equivocarse ni perderse cosas facilmente
+- Saber que hacer a continuacion desde el primer uso
+
+Si ni siquiera puedes explicar "como juzga el usuario si valio la pena", entonces esta direccion probablemente aun no esta bien definida.
+
+<a id="jtbd-formula"></a>
+## [5. Formula de una frase que puedes usar directamente](#top-jtbd)
+
+Cuando quieras organizar una direccion de producto, puedes usar esta formula muy practica:
+
+> Cuando __________, quiero __________, para __________.  
+> Ahora solo puedo __________ para arreglarmelas con esto.
+
+Por ejemplo:
+
+> Cuando termino una reunion de proyecto con mucha informacion, quiero obtener rapidamente un acta con tareas, responsables y fechas limite, para poder sincronizar inmediatamente al equipo y avanzar en la ejecucion.  
+> Ahora solo puedo arreglarmelas recordando, revisando el historial de chat y organizando manualmente.
+
+Otro ejemplo:
+
+> Cuando me preparo para enviar mi candidatura a un nuevo puesto, quiero reescribir rapidamente mis experiencias en una version mas adaptada al puesto, para poder enviar un curriculum decente con mas confianza.  
+> Ahora solo puedo copiar repetidamente mi antiguo curriculum y modificar las formulaciones a mano, hasta que ya no estoy seguro de nada.
+
+Si puedes escribir una frase con este nivel de claridad, el diseno de paginas, el diseno de prompts y la priorizacion de funciones seran mucho mas faciles.
+
+## 6. Al hacer productos de IA, presta atencion a estos tres niveles de job
+
+Muchos productos de IA parecen impresionantes en las demos, pero despues de lanzarse no retienen a los usuarios. La razon comun es que solo resuelven la accion superficial, sin resolver el job mas profundo.
+
+Puedes dividir un job en tres niveles:
+
+### 6.1 Nivel funcional
+
+Cual es la tarea mas superficial?
+
+- Resumir documentos
+- Reescribir textos
+- Extraer tareas pendientes
+- Generar imagenes
+
+Este es el nivel que los usuarios expresan mas facilmente.
+
+### 6.2 Nivel emocional
+
+Que molestia quiere reducir el usuario, o que sensacion quiere obtener?
+
+- No quiere sentirse tan agobiado
+- No quiere parecer poco profesional
+- No quiere empezar de cero cada vez
+- Quiere sentir mas control
+
+Mucha disposicion a pagar esta fuertemente relacionada con el nivel emocional.
+
+### 6.3 Nivel social
+
+Como quiere que lo perciban los demas?
+
+- Parecer mas confiable
+- Parecer mas organizado en el equipo
+- Parecer mas profesional ante los clientes
+- Saber expresarse mejor en redes sociales
+
+Si solo haces el nivel funcional, el producto es facil de reemplazar; si tambien entiendes el nivel emocional y el social, sera mas facil encontrar un valor verdaderamente pegajoso.
+
+## 7. Usa JTBD para filtrar direcciones de producto
+
+A veces no es que ya tengas un producto, sino que tienes 3 a 5 ideas y no sabes cual hacer. Aqui JTBD es ideal para filtrar.
+
+Puedes tomar cada idea y preguntarte 5 cosas:
+
+1. El escenario correspondiente a esta idea es lo suficientemente concreto?
+2. El usuario ya esta usando algun metodo torpe para resolverlo?
+3. El dolor de este job es lo suficientemente fuerte, o lo suficientemente frecuente?
+4. Si lo hago bien, el usuario sentira claramente que "su estado mejoro"?
+5. Puedo hacer una primera version solo en torno al paso clave de este job, algo pequeno pero util?
+
+Si despues de hablar de una direccion solo puedes decir "me parece interesante", pero no puedes explicar el disparador, la solucion alternativa y el criterio de exito, probablemente sea solo una inspiracion vaga, no una direccion madura.
+
+## 8. Preguntas que puedes usar directamente para entrevistar usuarios
+
+Mucha gente, al hacer investigacion, pregunta: "Que funciones quieres?" Este tipo de pregunta facilmente obtiene respuestas superficiales.
+
+JTBD es mas adecuado para hacer este tipo de preguntas:
+
+- Cuando fue la ultima vez que encontraste este problema?
+- Que estabas haciendo en ese momento, por que te bloqueaste?
+- Como lo resolviste al final?
+- En este proceso, cual fue la parte mas molesta, mas lenta o que menos confianza te dio?
+- Si hubiera una herramienta que te ayudara, que resultado te haria sentir que realmente es util?
+- Que metodos alternativos has probado? Por que no fueron lo suficientemente buenos?
+
+Este tipo de preguntas tiene una ventaja: lleva la conversacion de vuelta a las experiencias reales, en lugar de quedarse en preferencias imaginadas.
+
+## 9. Usa IA para ayudarte con el analisis JTBD
+
+JTBD no fue inventado por la IA, pero la IA es muy adecuada para ayudarte a organizar y refinar JTBD.
+
+Por ejemplo, si ya has recogido 5 a 10 comentarios de usuarios, puedes pasarlos al modelo y pedirle que los resuma siguiendo esta estructura:
+
+```text
+Por favor actua como asistente de investigacion de producto.
+Te dare algunas citas textuales de usuarios. Por favor no des sugerencias de funciones primero,
+sino organiza primero siguiendo el marco de Jobs to Be Done:
+
+1. En que escenario se encuentra el usuario
+2. Cual es el evento que detona su accion
+3. Cual es el progreso que realmente quiere lograr
+4. Cual es la solucion alternativa actual
+5. Cual es el criterio de exito que mas le importa
+6. Que palabras emocionales aparecen repetidamente en estos comentarios
+
+Finalmente, organiza todo esto en 3 hipotesis JTBD que mas valga la pena verificar primero.
+```
+
+Si ya tienes una idea, tambien puedes pedir a la IA que te ayude con la primera ronda de convergencia:
+
+```text
+Quiero hacer [tu idea de producto].
+Por favor no me des una lista de funciones directamente, sino analiza usando el metodo Jobs to Be Done:
+
+1. Que escenarios concretos podria servir este producto
+2. En cada escenario, cual es el job central que el usuario quiere completar
+3. Que soluciones alternativas existen actualmente
+4. Que job es mas adecuado como punto de partida para un MVP, y por que
+5. Escribe el job final recomendado como una frase JTBD clara
+```
+
+La ventaja de hacer esto es que no seras arrastrado inmediatamente por la IA a "brainstormear 50 funciones", sino que primero aclararas la direccion.
+
+## 10. Los 4 errores mas comunes de los principiantes
+
+### 10.1 Escribir el job como un nombre de funcion
+
+"Resumen con IA", "clasificacion inteligente", "generacion automatica" no son jobs, solo son posibles formas de implementacion.
+
+### 10.2 Escribir un grupo demasiado amplio
+
+"Todos los oficinistas", "todos los estudiantes", "todos los emprendedores" suelen ser demasiado amplios. Cuanto mas amplio, mas dificil es ver escenarios reales.
+
+### 10.3 Solo escuchar lo que el usuario dice, sin observar lo que hace
+
+El usuario describira lo que quiere, pero sus verdaderas prioridades suelen estar ocultas en como se arregla actualmente para resolver los problemas.
+
+### 10.4 Querer hacer una plataforma completa desde el principio
+
+La forma correcta de usar JTBD normalmente no es "voy a hacer una gran plataforma que haga de todo", sino primero enfocarse en el paso mas critico de un escenario y hacerlo excepcionalmente bien.
+
+## 11. Resumen
+
+Lo mas valioso de Jobs to Be Done no es darte un nuevo termino, sino ayudarte a cambiar tu angulo de observacion: **no te centres solo en las funciones del producto, sino en lo que el usuario quiere avanzar al siguiente paso.**
+
+Cuando empieces a preguntarte repetidamente:
+
+- En que escenario contrata el usuario este producto
+- Donde se ha quedado bloqueado exactamente
+- Que metodo esta usando para arreglarselas
+- Despues de resolver el problema, como cambiara su estado
+
+Descubriras que muchas ideas originalmente vagas se aclaran de repente, y muchas funciones originalmente llamativas dejan de ser tan importantes.
+
+Hacer productos, especialmente productos de IA, es facil caer en la trampa de obsesionarse con la demostracion de capacidades desde el principio. JTBD te ayuda a devolver la atencion a lo realmente importante: **por que te necesita el usuario, y que progreso le estas ayudando a completar.**
+
+<a id="jtbd-ai"></a>
+## [12. Como usar la IA para practicar JTBD](#top-jtbd)
+
+JTBD no fue inventado por la IA, pero la IA es muy adecuada para actuar como tu asistente de investigacion, asistente de organizacion y asistente de contraste dentro de este metodo. La clave es: **dejar que la IA te ayude a organizar y expandir, no que adivine por ti lo que piensan los usuarios.**
+
+Puedes usarlo asi:
+
+### 12.1 Dejar que la IA te ayude a reescribir ideas vagas como hipotesis JTBD
+
+Cuando solo tienes una descripcion vaga en mente, como "quiero hacer una herramienta para ayudar a universitarios a encontrar practicas", primero puedes pedir a la IA que la descomponga en varios jobs posibles:
+
+```text
+Tengo una idea vaga de producto: [tu idea]
+Por favor no me des una lista de funciones directamente, sino analiza usando el enfoque de Jobs to Be Done:
+1. A que escenarios concretos podria corresponder
+2. En cada escenario, cual es el progreso que el usuario realmente quiere lograr
+3. Cual podria ser la solucion alternativa actual
+4. Que job es mas adecuado para hacer primero un MVP
+Finalmente, escribe cada job como una frase JTBD clara.
+```
+
+Incluso puedes escribir la entrada de forma muy basica:
+
+```text
+Quiero hacer algo para ayudar a universitarios a encontrar practicas.
+No se muy bien que hacer exactamente, ayudame a pensar que es lo que los usuarios realmente quieren lograr.
+```
+
+La IA podria dar un resultado util como este:
+
+```text
+Posibles direcciones JTBD:
+
+1. Cuando me preparo por primera vez para enviar candidaturas de practicas, quiero saber rapidamente que materiales debo preparar primero,
+para no estar posponiendo el envio por la confusion de informacion.
+
+2. Cuando veo una oferta de practicas, quiero juzgar rapidamente si vale la pena aplicar,
+para no perder demasiado tiempo en puestos que no me convienen.
+
+3. Cuando empiezo a enviar candidaturas, quiero adaptar mi curriculum existente a una version mas ajustada al puesto,
+para poder enviarlo mas rapido y mejorar mi tasa de aprobacion.
+```
+
+El valor de este tipo de resultado es que descompone tu idea original muy general en varias direcciones mas cercanas a escenarios reales.
+
+### 12.2 Dejar que la IA te ayude a organizar citas textuales de entrevistas
+
+Si ya has hecho varias entrevistas con usuarios, puedes pasar las transcripciones a la IA y pedirle que extraiga los escenarios, disparadores, soluciones alternativas y criterios de exito que se repiten.
+
+```text
+A continuacion estan las citas textuales de 5 usuarios.
+Por favor no des soluciones primero, sino organiza siguiendo el marco JTBD:
+1. En que escenario se encuentra el usuario
+2. Cual es el evento que detona su accion
+3. Cual es el progreso que realmente quiere lograr
+4. Cual es la solucion alternativa actual
+5. Cual es el criterio de exito que mas le importa
+6. Que informacion se repite entre multiples usuarios
+Finalmente, organiza en 3 hipotesis JTBD que mas valga la pena verificar primero.
+```
+
+Una entrada simple de principiante tambien podria ser:
+
+```text
+Pregunte a 3 personas, y mas o menos dijeron esto:
+
+1. Cada vez que quiero enviar una practica tengo que rehacer el curriculum, es muy molesto.
+2. En realidad lo que mas miedo me da es no saber si lo he escrito bien.
+3. Ahora le pido a companeros de cursos superiores que me lo revisen, pero me da pena molestarles siempre.
+
+Ayudame a organizar, que es lo que realmente quieren lograr.
+```
+
+La IA podria responder:
+
+```text
+Resultado organizado:
+
+- Escenario comun: antes de enviar candidaturas de practicas, necesitan trabajar en el curriculum
+- Dificultad comun: no saben como modificarlo hasta que este "lo suficientemente bien"
+- Solucion alternativa actual: pedir a companeros de cursos superiores que lo revisen, modificarlo una y otra vez
+- Posible JTBD:
+  Cuando me preparo para enviar candidaturas de practicas, quiero juzgar mas rapidamente si mi curriculum ya esta listo para enviar,
+  para no quedarme atascado en "lo modifico una vez mas" y retrasar el envio indefinidamente.
+```
+
+Este tipo de resultado es muy util porque te ayuda a extraer de citas textuales dispersas algo que se parece mas a una "necesidad".
+
+### 12.3 Dejar que la IA haga una ronda ligera de investigacion en la red
+
+Antes de empezar entrevistas a gran escala, puedes pedir a la IA que haga un barrido de informacion externa muy ligero, como:
+
+- En foros o comunidades publicas, como se queja la gente de este problema
+- En el mercado, que nivel de problema resuelven principalmente los productos existentes
+- Cual es la solucion alternativa mas comun de los usuarios
+- En las resenas comunes, cuales son los puntos que mas satisfaccion y mas insatisfaccion generan
+
+Esta investigacion no puede sustituir las entrevistas reales con usuarios, pero es ideal como calentamiento en la fase de Discover, ayudandote a construir primero un mapa de problemas.
+
+Una entrada simple podria ser:
+
+```text
+Por favor ayudame a buscar:
+"Cuales son los puntos de dolor mas comunes cuando los universitarios modifican su curriculum y envian candidaturas de practicas?"
+Prioriza lo que la gente dice en foros publicos, posts de experiencia y comunidades de busqueda de empleo.
+Organizalo en 5 problemas mas comunes.
+```
+
+La IA podria responder:
+
+```text
+Puntos de dolor comunes organizados:
+
+1. No saber que poner en el curriculum, muy poca experiencia
+2. No saber como adaptarlo a diferentes puestos
+3. Modificar muchas versiones pero sin certeza de si es suficientemente bueno
+4. No encontrar a alguien fiable que lo revise
+5. El proceso de envio es complicado, facil de procrastinar
+```
+
+Este tipo de resultado no debe tomarse como conclusion final, pero es ideal para decidir que tipo de problema priorizar en las entrevistas.
+
+### 12.4 Dejar que la IA actue como "abogado del diablo"
+
+Muchas veces nos encariñamos demasiado con nuestras propias ideas. Puedes pedir especificamente a la IA que asuma el rol de alguien critico, obligandote a explicar el problema mas claramente:
+
+```text
+Por favor actua como un consultor de investigacion de producto muy estricto.
+A continuacion esta mi hipotesis JTBD: [tu hipotesis]
+Por favor critica desde los siguientes angulos:
+1. Este escenario es demasiado amplio?
+2. Este job esta escrito como una funcion en lugar de un progreso real?
+3. La solucion alternativa es demasiado debil?
+4. El criterio de exito no es lo suficientemente claro?
+5. Cual es el riesgo que mas necesita ser verificado en esta hipotesis?
+```
+
+La ventaja de hacer esto es que descubriras mas rapidamente si estas mirando necesidades o solo estas mirando la solucion que te gusta.
+
+## 📚 Tareas
+
+Por favor completa las siguientes tareas basandote en el contenido anterior:
+
+1. Elige una idea de producto que quieras hacer recientemente, y escribela claramente usando la formula JTBD
+2. Completa los 5 elementos para esta idea: escenario, disparador, progreso, solucion alternativa, criterio de exito
+3. Encuentra 3 usuarios potenciales, y al menos una vez logra preguntar "cuando fue la ultima vez que encontraste este problema"
+4. Pasa las citas textuales de las entrevistas a la IA, y organiza en 3 hipotesis JTBD que mas valga la pena verificar primero
+
+## Lectura adicional
+
+- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
+- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
+- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
+- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
diff --git a/docs/es-es/stage-1/appendix-mom-test/index.md b/docs/es-es/stage-1/appendix-mom-test/index.md
new file mode 100644
index 0000000..a5039d1
--- /dev/null
+++ b/docs/es-es/stage-1/appendix-mom-test/index.md
@@ -0,0 +1,589 @@
+---
+title: 'The Mom Test: Como validar necesidades a traves de entrevistas con usuarios'
+description: 'Aprende a evitar retroalimentacion educada, y haz entrevistas centradas en comportamientos reales, hechos concretos y problemas existentes.'
+---
+
+<script setup>
+const duration = 'Aproximadamente <strong>1.5 horas</strong>'
+</script>
+
+# The Mom Test: Como validar necesidades a traves de entrevistas con usuarios
+
+<a id="top-mom"></a>
+
+## Resumen del capitulo
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Entrevistas con usuarios', 'Validacion de necesidades', 'Investigacion de usuarios', 'Investigacion de producto']"
+  coreOutput="1 conjunto de preguntas de entrevista que obtienen informacion mas real"
+  expectedOutput="Dejar de tomar la retroalimentacion educada como validacion, y poder juzgar direcciones con comportamientos reales"
+>
+
+Muchas personas, la primera vez que hacen investigacion de producto, creen que lo mas importante es "hablar con alguien". Asi que van y preguntan a amigos, colegas e incluso familiares:
+
+- Que te parece esta idea?
+- Si existiera un producto asi, lo usarias?
+- Esta funcion suena bastante bien, no?
+
+La otra persona suele dar una retroalimentacion muy alentadora:
+
+- Esta muy bien
+- Suena util
+- Creo que deberias probarlo
+
+El problema es que estas respuestas normalmente no te ayudan a tomar decisiones. Son mas bien cortesia, apoyo, o una reaccion natural para no desanimarte en el momento. Crees haber obtenido "validacion de mercado", pero en realidad solo has recogido un monton de consuelos dificiles de usar para tomar decisiones.
+
+El metodo The Mom Test fue creado precisamente para resolver este problema. Nos recuerda: **no es que los usuarios te esten mintiendo a proposito, sino que tu forma de hacer las preguntas lleva naturalmente a la otra persona hacia respuestas agradables pero inutiles.**
+
+</ChapterIntroduction>
+
+::: info SOP minimo
+**Objetivo**: Despues de leer, sabras mejor como hablar con usuarios sin escuchar solo "suena bien", sino obtener informacion que realmente te ayude a juzgar la direccion.
+
+**Accion**: Reescribe las 5 preguntas que ibas a hacer, priorizando "cuando fue la ultima vez que paso esto" y "como lo manejaste entonces".
+
+**Resultado**: Te sera mas facil distinguir que son opiniones y que son verdaderas evidencias para tomar decisiones.
+
+**Enlaces rapidos**: [Que es The Mom Test](#mom-what) · [Tres principios centrales](#mom-principles) · [Como te ayuda la IA](#mom-ai)
+:::
+
+## Aprenderas lo siguiente
+
+1. Que problema esta resolviendo exactamente The Mom Test, y por que muchas "investigaciones de usuarios" en realidad no investigan informacion real
+2. Los principios mas importantes de este metodo: preguntar menos opiniones y mas comportamientos; preguntar menos hipotesis y mas hechos
+3. Como transformar una pregunta que facilmente genera falsos positivos en una pregunta de entrevista mas valiosa
+4. Como usar The Mom Test junto con JTBD, validacion de necesidades y evaluacion de MVP
+
+<a id="mom-what"></a>
+## [1. Que es exactamente The Mom Test](#top-mom)
+
+The Mom Test proviene del libro homonimo de Rob Fitzpatrick. Su nombre suena como una broma, pero da muy en el clavo:
+
+**Incluso tu madre tendria dificultades para decirte directamente "es una mala idea".**
+
+La razon no es que no sea honesta, sino:
+
+- No quiere lastimarte
+- Te alentara inconscientemente
+- Easily seguira tu forma de expresarte al responder
+
+Y no solo tu madre; amigos, colegas, ex companeros de clase, e incluso muchos desconocidos, al enfrentarse a tu idea de producto, tambien suelen dar "retroalimentacion positiva" similar. Esto no significa que la necesidad sea real, solo significa que formulaste la pregunta de una forma que facilmente obtiene respuestas agradables.
+
+Por lo tanto, el punto de The Mom Test nunca ha sido "no le preguntes a tu madre", sino:
+
+**No formules la pregunta de forma que cualquiera te siga la corriente.**
+
+Lo que este metodo realmente quiere ensenarte es como obtener informacion mas cercana a las necesidades reales a traves de la conversacion, en lugar de recoger un monton de comentarios que te hagan sentir bien.
+
+## 2. Cual es el problema central que resuelve
+
+The Mom Test resuelve principalmente una ilusion cognitiva muy comun:
+
+**Tomar la retroalimentacion positiva por cortesia como una necesidad real.**
+
+Por ejemplo, cuando preguntas:
+
+- Que te parece la idea de esta App?
+- Si hiciera una herramienta con IA que te ayude a escribir el curriculum, la usarias?
+- Es valiosa esta funcion?
+
+Estas preguntas tienen en comun:
+
+- Todas preguntan "opiniones"
+- Todas tienen cierta insinuacion
+- Todas hablan de un futuro que aun no ha ocurrido
+
+Las respuestas de las personas sobre "opiniones" y "hipotesis futuras" suelen ser inestables. Muchas personas sobreestiman su interes, su capacidad de ejecucion y su disposicion futura a pagar.
+
+Por eso The Mom Test te recuerda:
+
+- No confies demasiado en las evaluaciones de otros sobre tu idea
+- No confies demasiado en las predicciones de otros sobre su comportamiento futuro
+- Vuelve siempre a los comportamientos reales que el usuario ya ha tenido
+
+Porque comparado con "la usarias?", "como manejaste esto la ultima vez?" suele estar mas cerca de la verdad.
+
+<a id="mom-principles"></a>
+## [3. Los tres principios mas importantes](#top-mom)
+
+Si solo quieres recordar lo mas importante, empieza con estos tres principios.
+
+### 3.1 Habla menos de tu idea, y mas de las experiencias reales pasadas del usuario
+
+Muchas entrevistas ineficaces empiezan presentando la propia solucion, hablando de lo emocionado que se esta y del producto que se planea hacer. El problema es que, una vez que hablas demasiado, la otra persona facilmente cambia a un estado de "apoyarte" y "alentarte".
+
+En contraste, una mejor forma de hacerlo es centrarse en las experiencias de la otra persona:
+
+- Cuando fue la ultima vez que encontraste este problema?
+- Que estabas haciendo en ese momento?
+- Como lo resolviste al final?
+- Cual fue el paso mas complicado?
+
+Descubriras que este tipo de preguntas llevan la conversacion de vuelta a la realidad de forma mas natural, en lugar de quedarse en preferencias imaginadas.
+
+### 3.2 Pregunta menos opiniones abstractas, y mas hechos concretos
+
+"Me parece bien esta funcion", "suena bien", "parece util" son expresiones demasiado abstractas para guiar decisiones de producto.
+
+Informacion mas valiosa suele verse asi:
+
+- La semana pasada pase 2 horas peleando con esto
+- Ahora me arreglas con Excel y WeChat
+- El mes pasado ya gaste dinero en una herramienta similar
+- Lo que mas miedo me da es hacerlo mal, no hacerlo lento
+
+Esta es la informacion que realmente te ayuda a juzgar la intensidad, frecuencia y posibilidad de pago de un problema.
+
+### 3.3 Pregunta menos que solucion quiere el usuario, y observa mas como resuelve el problema ahora
+
+Los usuarios son muy buenos describiendo sus frustraciones, pero no necesariamente disenando soluciones.
+
+Si preguntas:
+
+- Te gustaria que una IA te hiciera esto automaticamente?
+- Crees que anadir una funcion inteligente seria util?
+
+Lo que obtienes suele es solo una actitud vaga hacia una solucion, no la necesidad en si.
+
+Mejores preguntas son:
+
+- Que metodo usas ahora para manejar este problema?
+- Por que elegiste esta forma?
+- En que falla?
+
+Entender las soluciones alternativas existentes suele ser mas importante que preguntar directamente "que quieres".
+
+## 4. Por que la gente siempre te da respuestas agradables pero inutiles
+
+Si puedes entender esto, cometeras menos errores de juicio en las entrevistas.
+
+### 4.1 Las personas son inconscientemente educadas
+
+Especialmente cuando el interlocutor tiene una relacion contigo, le resulta dificil decir directamente:
+
+- Esta direccion no suena muy viable
+- No la usaria en absoluto
+- Este problema no es tan importante para mi
+
+Es mas probable que diga "esta muy bien", "se podria probar cuando haya oportunidad".
+
+### 4.2 Las personas sobreestiman su yo futuro
+
+Mucha gente cree sinceramente que en el futuro:
+
+- Sera mas disciplinada
+- Estara mas dispuesta a aprender
+- Estara mas dispuesta a pagar
+- Estara mas dispuesta a probar herramientas nuevas
+
+Por eso la frase "si existiera, probablemente la usaria" muchas veces no equivale a que realmente la usara en el futuro.
+
+### 4.3 Tu forma de preguntar ya esta guiando la respuesta
+
+Cuando preguntas:
+
+- Te parece buena esta idea?
+- Esta funcion te resulta muy util?
+
+En realidad ya has metido la "respuesta correcta" en la pregunta.
+
+Es por eso que The Mom Test enfatiza tanto: **no conviertas la entrevista en una busqueda de validacion.**
+
+## 5. Comparacion directa: que preguntas se desperdician facilmente y cuales son mas valiosas
+
+Estas comparaciones son utiles para casi todos los principiantes.
+
+| Preguntas que se desperdician facilmente | Preguntas mas valiosas |
+| --- | --- |
+| Que te parece esta idea? | Cuando fue la ultima vez que encontraste este problema? |
+| Usarias este producto si existiera? | Como estas manejando esto ahora? |
+| Estarias dispuesto a pagar por esta funcion? | Has gastado dinero en este problema alguna vez? En que? |
+| Crees que esta funcion es importante? | Cual es el paso mas molesto, lento o inseguro de este proceso? |
+| Te gustaria que una IA te hiciera esto automaticamente? | Por que aun no has encontrado una solucion mas comoda? |
+
+Lo mas importante de esta tabla no son las frases concretas, sino la direccion detras:
+
+- De opiniones hacia hechos
+- Del futuro hacia el pasado
+- De tu solucion hacia el problema del usuario
+
+## 6. Un ritmo de entrevista que incluso un principiante puede usar inmediatamente
+
+Si quieres ir a hablar con alguien ahora mismo, puedes seguir esta secuencia directamente.
+
+### 6.1 Apertura: explica que estas aprendiendo, no vendiendo
+
+Por ejemplo:
+
+> Estoy investigando como la gente maneja este tipo de problemas, quiero entender la situacion real primero, no estoy aqui para vender nada.
+
+Este tipo de expresion ayuda a la otra persona a liberarse de la carga de "tener que darte retroalimentacion positiva".
+
+### 6.2 Empieza preguntando por la ultima experiencia real
+
+Puedes empezar con este tipo de preguntas:
+
+- Cuando fue la ultima vez que encontraste este problema?
+- Que paso en ese momento?
+- Cual fue tu primera reaccion, como lo manejaste?
+
+Una vez que la conversacion entra en eventos concretos, la calidad de la informacion suele mejorar notablemente.
+
+### 6.3 Profundiza preguntando sobre comportamientos, costos y soluciones alternativas
+
+Sigue preguntando:
+
+- Que metodo usas ahora para resolverlo?
+- Cual es la parte mas incomoda de este metodo?
+- Cuanto tiempo, dinero o esfuerzo has invertido en esto?
+- Has probado otros metodos? Por que no los seguiste usando?
+
+### 6.4 Finalmente juzga la intensidad del dolor y la prioridad
+
+No necesitas preguntar directamente "te duele?", puedes juzgarlo por los detalles:
+
+- Lo encuentra frecuentemente?
+- Ya esta intentando compensar activamente?
+- Ya esta dispuesto a invertir costos en esto?
+- Cuando habla de esto, muestra emocion evidente?
+
+Todo esto es mas util que una simple pregunta "es este tu punto de dolor?".
+
+## 7. Un ejemplo mas completo
+
+Supongamos que quieres hacer un producto de "IA que ayuda a universitarios a mejorar su curriculum".
+
+### Forma incorrecta de preguntar
+
+Vas y le preguntas a un companero:
+
+> Quiero hacer una herramienta de optimizacion de curriculum con IA, que te parece?  
+> Si pudiera modificar automaticamente el curriculum segun el puesto, la usarias?
+
+En este caso, la otra persona probablemente dira:
+
+- Suena bien
+- Creo que seria util
+- Si es gratis, la probara
+
+Estas respuestas casi no te ayudan a juzgar si la necesidad es realmente fuerte.
+
+### Forma mejor de preguntar
+
+Podrias cambiar a:
+
+> Cuando fue la ultima vez que modificaste tu curriculum?  
+> Por que tuviste que modificarlo?  
+> Como lo hiciste?  
+> Cual fue el paso mas bloqueante?  
+> Has pedido a alguien que te lo revise?  
+> Has gastado dinero o mucho tiempo alguna vez en el tema del curriculum?
+
+A traves de estas preguntas, la informacion que puedes obtener seria:
+
+- Mucha gente no es que no sepa escribir, sino que no sabe como adaptarlo a diferentes puestos
+- Lo mas doloroso no es el formato, sino "no saber que experiencias vale la pena incluir"
+- Procrastinan, no por vagos, sino porque cada vez que modifican el curriculum es muy agotador
+- Ya estan usando consejos de companeros de cursos superiores, sitios de plantillas, herramientas de IA y revision de amigos para arreglarselas
+
+En este punto, estas mucho mas cerca del problema real.
+
+## 8. Como usar The Mom Test junto con JTBD
+
+Si JTBD te ayuda a ver "que progreso quiere lograr el usuario", entonces The Mom Test te ensena mas bien:
+
+**Como confirmar a traves de entrevistas si este job realmente existe.**
+
+Puedes perfectamente conectar ambos:
+
+1. Primero usa JTBD para hipotetizar un job
+2. Luego usa el estilo de The Mom Test para preguntar a los usuarios sobre su ultima experiencia real
+3. Mira si este job es realmente frecuente, real y digno de priorizar
+
+Por ejemplo, tu hipotesis JTBD es:
+
+> Cuando me preparo para enviar candidaturas de practicas, quiero adaptar rapidamente mi curriculum viejo a una version ajustada al puesto, para completar el envio lo antes posible.
+
+Entonces puedes usar preguntas estilo The Mom Test para verificar:
+
+- Cuando fue la ultima vez que enviaste una candidatura?
+- Como modificaste tu curriculum en ese momento?
+- Que seccion fue la mas dificil de escribir?
+- Despues de modificarlo, como juzgabas si era lo suficientemente bueno?
+
+Asi, los metodos se conectan:
+
+- JTBD te ayuda a definir la hipotesis de necesidad
+- The Mom Test te ayuda a verificar la hipotesis a traves de entrevistas
+
+## 9. Los errores mas comunes de los principiantes al hacer entrevistas con usuarios
+
+### 9.1 Convertir la entrevista en una presentacion de producto
+
+Si hablas demasiado de tu propia idea, la otra persona facilmente empezara a apoyarte en lugar de contarte la situacion real.
+
+### 9.2 Entrevistar solo a conocidos
+
+Los conocidos pueden ser entrevistados, pero es mas probable que te alienten. Necesitas al menos mezclar con personas mas cercanas a los usuarios reales, en lugar de buscar solo a quienes te apoyan.
+
+### 9.3 Persiguir preguntas sobre funciones demasiado pronto
+
+Si aun no has aclarado el problema y empiezas a preguntar sobre botones, interfaces y detalles de funciones, probablemente estas entrando en la solucion demasiado pronto.
+
+### 9.4 Tomar un "la usaria" como resultado de validacion
+
+Las entrevistas pueden ayudarte a juzgar la direccion como maximo, no equivalen a una validacion completada. La verdadera validacion, al final, depende de si el usuario esta dispuesto a asumir costos reales, como tiempo, costos de cambio, comportamiento de prueba o incluso pago.
+
+### 9.5 No organizar despues de la entrevista
+
+Si dejas la informacion ahi, rapidamente se convertira en impresiones vagas. Es mejor organizar lo antes posible:
+
+- Problemas que aparecen con alta frecuencia
+- Palabras emocionales en las citas textuales del usuario
+- Soluciones alternativas actuales
+- Costos ya incurridos
+- Tus propios nuevos juicios
+
+## 10. Lista de preguntas que puedes copiar y usar directamente
+
+Si quieres empezar rapidamente, aqui tienes un conjunto de preguntas suficientemente generales.
+
+### Preguntas de apertura
+
+- Cuando fue la ultima vez que encontraste este problema?
+- Que paso exactamente en ese momento?
+
+### Preguntas sobre comportamiento
+
+- Como lo manejaste en ese momento?
+- Por que elegiste esa forma?
+
+### Preguntas sobre costos
+
+- Cuanto tiempo o esfuerzo te suele llevar esto?
+- Has gastado dinero alguna vez para resolverlo?
+
+### Preguntas sobre soluciones alternativas
+
+- Has probado otras herramientas o metodos?
+- Por que no los seguiste usando?
+
+### Preguntas de cierre
+
+- Si volvieras a encontrar el mismo problema en el futuro, como deberia ser la solucion ideal?
+
+Nota: esta pregunta de cierre puede hacerse, pero es mejor dejarla para el final. Porque primero necesitas obtener hechos, no deseos.
+
+## 11. Resumen
+
+La contribucion mas importante de The Mom Test no es darte un conjunto de tecnicas para "saber hablar mejor", sino ayudarte a establecer una forma mas lucida de juzgar:
+
+- No confies demasiado rapido en los elogios de otros sobre tu idea
+- No tomes "si existiera, la usaria" como una necesidad real
+- No dejes que la entrevista se convierta en una busqueda de validacion
+
+Las entrevistas verdaderamente valiosas deben volver siempre a estas cosas:
+
+- La ultima experiencia real del usuario
+- Como lo maneja ahora
+- Que costos ya ha incurrido
+- En que areas se siente claramente incomodo
+
+Cuando empieces a preguntar de esta manera, la informacion que obtengas a veces no sonara tan agradable, pero sera mas util.  
+Y al hacer productos, **la verdad util siempre es mas importante que el elogio agradable.**
+
+<a id="mom-ai"></a>
+## [12. Como usar la IA para ayudarte con las entrevistas de usuarios](#top-mom)
+
+The Mom Test es esencialmente un metodo de "hablar con personas reales", por lo que la IA no puede sustituir las entrevistas reales. Pero la IA es muy adecuada para asistirte antes, durante y despues de las entrevistas, especialmente para reducir la barrera de entrada de los principiantes.
+
+### 12.1 Dejar que la IA reescriba las preguntas "que se desperdician facilmente"
+
+Muchas personas saben que no deberian preguntar "que te parece esta idea?", pero al abrir la boca vuelven a este tipo de frases. Puedes pasar primero a la IA las preguntas que has preparado, y pedirle que las reescriba:
+
+```text
+Estas son las preguntas que quiero hacer en una entrevista con usuarios:
+[pega tus preguntas]
+
+Por favor reescribelas usando los principios de The Mom Test:
+1. Elimina las preguntas de opinion
+2. Elimina las preguntas que hipotizan sobre el futuro
+3. Cambialas a preguntas que giren en torno a comportamientos reales pasados, soluciones alternativas existentes y costos ya incurridos
+4. Finalmente, organizalas en una lista de 8-10 preguntas listas para usar en entrevistas
+```
+
+Una entrada muy basica tambien funciona:
+
+```text
+Quiero preguntar a los usuarios:
+1. Que te parece si hago una herramienta de IA para modificar curriculums?
+2. La usarias?
+3. Estarias dispuesto a pagar?
+
+Por favor ayudame a reescribirlas de una mejor manera.
+```
+
+La IA podria dar un resultado util como este:
+
+```text
+Preguntas reescritas:
+
+1. Cuando fue la ultima vez que modificaste tu curriculum?
+2. Por que tuviste que modificarlo?
+3. Como lo hiciste?
+4. Cual paso te llevo mas tiempo?
+5. Has pedido a alguien que te lo revise?
+6. Has gastado dinero o mucho tiempo alguna vez en modificar tu curriculum?
+```
+
+Este tipo de resultado es muy util porque transforma directamente tus preguntas "de opinion" en preguntas "de comportamiento real".
+
+### 12.2 Dejar que la IA genere guiones de entrevista para diferentes perfiles
+
+La misma direccion, para diferentes grupos de personas, tiene diferentes focos de entrevista. Por ejemplo, estudiantes, Recursos Humanos y trabajadores freelance tienen preocupaciones completamente diferentes. Puedes pedir a la IA que genere una version del guion para cada tipo de interlocutor:
+
+- Para usuarios principiantes, enfocate en entender la ultima experiencia real
+- Para usuarios intensivos, enfocate en entender las soluciones alternativas y la intensidad del dolor
+- Para usuarios de pago, enfocate en entender si ya han incurrido costos por esto
+
+Asi tendras mas ritmo en las conversaciones reales, en lugar de hacer las mismas preguntas a todo el mundo.
+
+Por ejemplo, puedes ingresar directamente:
+
+```text
+Voy a hablar con dos tipos de personas:
+1. Universitarios buscando su primera practica
+2. Companeros de cursos superiores que ya han revisado muchos curriculums para otros
+
+Por favor dame un guion de entrevista para cada grupo, con 6 preguntas cada uno.
+```
+
+La IA podria responder:
+
+```text
+Para universitarios:
+1. Cuando fue la ultima vez que enviaste una candidatura de practica?
+2. Cual fue el paso mas bloqueante en ese momento?
+3. Como sabes si tu curriculum esta listo para enviar?
+...
+
+Para companeros de cursos superiores:
+1. Cuando fue la ultima vez que revisaste el curriculum de alguien?
+2. Que problemas obvios ves con mas frecuencia?
+3. En que paso se atascan mas facilmente los estudiantes de primeros cursos?
+...
+```
+
+Asi, no tienes que inventar preguntas desde cero, y la preparacion de entrevistas sera mucho mas facil.
+
+### 12.3 Dejar que la IA organice las notas de entrevista
+
+Despues de las entrevistas, el problema mas comun no es "falta de informacion", sino "informacion demasiado dispersa". La IA es muy adecuada para ayudarte a organizar conversaciones fragmentadas en notas estructuradas:
+
+```text
+A continuacion estan las notas de mis entrevistas con 3 usuarios.
+Por favor organiza siguiendo la perspectiva de The Mom Test:
+1. Que contenido es hecho y que es solo opinion
+2. Cual fue el ultimo comportamiento real del usuario
+3. Cual es la solucion alternativa actual
+4. Cuales son los costos de tiempo, dinero o esfuerzo que el usuario ya ha incurrido
+5. Que problemas se mencionan repetidamente
+6. Que afirmaciones suenan positivas pero carecen de evidencia
+```
+
+Este paso es especialmente valioso porque te ayuda a separar lo que "suena bien" de lo que "realmente puede sustentar una decision".
+
+Una entrada simple podria ser:
+
+```text
+Estas son mis notas despues de hablar con un usuario:
+
+- Dijo que si hubiera una herramienta probablemente la probara
+- La semana pasada paso una noche entera modificando su curriculum
+- Ahora depende principalmente de amigos que le revisen
+- Dijo que lo mas dificil es no saber cuando esta "listo para enviar"
+
+Por favor ayudame a separar que son opiniones y que son hechos.
+```
+
+La IA podria responder:
+
+```text
+Opiniones:
+- Si hubiera una herramienta probablemente la probara
+
+Hechos:
+- La semana pasada paso una noche entera modificando su curriculum
+- La solucion alternativa actual es pedir a amigos que le revisen
+- El punto mas dificil es no saber cuando se puede considerar "listo para enviar"
+
+Puntos clave para juzgar la necesidad:
+- Este problema acaba de ocurrir recientemente
+- El usuario ya ha invertido un costo de tiempo significativo
+- La solucion actual depende de otros, es inestable
+```
+
+Este resultado puede mostrar muy intuitivamente a los principiantes: que frases se pueden usar para tomar decisiones y cuales solo se pueden escuchar.
+
+### 12.4 Dejar que la IA haga una ronda ligera de busqueda en la web
+
+Si aun no has empezado las entrevistas, primero puedes pedir a la IA que haga una investigacion externa muy ligera, como:
+
+- En comunidades publicas, como se queja la gente recientemente de este problema
+- De que se quejan mas los usuarios de las herramientas existentes
+- Si los usuarios ya han gastado dinero en problemas similares
+- Que soluciones alternativas ya existen en el mercado
+
+Este tipo de informacion no puede sustituir las entrevistas reales, pero te ayuda a entrar en contexto mas rapidamente, sabiendo por donde empezar a preguntar.
+
+Por ejemplo, una entrada simple podria ser:
+
+```text
+Por favor ayudame a buscar:
+"De que se quejan mas los universitarios al modificar su curriculum"
+Organizalo en 5 quejas mas comunes, escritas en lenguaje coloquial.
+```
+
+La IA podria responder:
+
+```text
+Quejas comunes:
+
+1. No saber que poner exactamente en el curriculum
+2. Tener que modificarlo para cada puesto, es muy cansado
+3. Modificar muchas versiones y seguir sin seguridad de si esta bien
+4. Nadie puede darme retroalimentacion fiable
+5. Sentir siempre que no esta listo, por lo que sigo posponiendo
+```
+
+El valor de este tipo de resultado es que te facilita encontrar un punto de entrada para las entrevistas.
+
+### 12.5 Dejar que la IA actue como "coach de revision de entrevistas"
+
+Tambien puedes pasar las notas de una entrevista recien terminada a la IA y pedirle que te haga criticas:
+
+```text
+A continuacion estan las notas de una entrevista con un usuario.
+Por favor ayudame a revisar desde la perspectiva de The Mom Test:
+1. Que preguntas son demasiado parecidas a buscar validacion
+2. Que preguntas tienen una guia obvia
+3. Donde podria haber profundizado mas en los hechos
+4. Si pudieras repetirlo, como se podria preguntar mejor en esta conversacion
+```
+
+Esto es especialmente util para principiantes, porque desarrollaras mas rapidamente una sensibilidad sobre "si realmente estoy recogiendo evidencia o solo recogiendo animos".
+
+## 📚 Tareas
+
+Por favor completa las siguientes tareas basandote en el contenido anterior:
+
+1. Elige una direccion de producto que quieras hacer recientemente, y primero escribe 5 preguntas "que se desperdician facilmente" que hubieras hecho originalmente
+2. Reescribe estas 5 preguntas en un estilo mas acorde con The Mom Test
+3. Encuentra 3 usuarios potenciales, y al menos una vez logra preguntar "cuando fue la ultima vez que encontraste este problema"
+4. Despues de la entrevista, organiza 4 tipos de informacion: comportamientos reales, soluciones alternativas, costos incurridos, dificultades que se repiten
+
+## Lectura adicional
+
+- [The Mom Test sitio web oficial](https://momtestbook.com/)
+- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
diff --git a/docs/es-es/stage-1/building-prototype/index.md b/docs/es-es/stage-1/building-prototype/index.md
new file mode 100644
index 0000000..088a0e6
--- /dev/null
+++ b/docs/es-es/stage-1/building-prototype/index.md
@@ -0,0 +1,605 @@
+---
+title: 'Construyendo un prototipo - Del analisis de negocio al prototipo multipagina'
+description: 'Experimenta el ciclo completo desde el analisis de negocio hasta la implementacion de un prototipo de producto multipagina.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Aproximadamente <strong>8 horas</strong>'
+const relatedArticles =
+  relatedArticlesMap['es-es/stage-1/building-prototype'] ?? []
+</script>
+
+# Construyendo un prototipo
+
+## Resumen del capitulo
+
+<ChapterIntroduction :duration="duration" :tags="['Analisis de negocio', 'Diseno de prototipo', 'Programacion asistida por IA', 'Aplicacion multipagina']" coreOutput="1 prototipo de espacio de trabajo de materiales de e-commerce" expectedOutput="Prototipo web interactivo">
+
+En el capitulo anterior, aprendimos como <strong>encontrar buenas ideas</strong>: partiendo de las necesidades de los usuarios, encontrar direcciones por las que alguien este dispuesto a pagar. Pero encontrar la direccion es solo el primer paso; <strong>lo que realmente pone a prueba al product manager es: como convertir necesidades vagas en un producto util.</strong>
+
+Este capitulo va a resolver un <strong>problema real</strong>: tu jefe te dice "usa IA para mejorar la eficiencia de publicar productos en plataformas de e-commerce" -- como lo conviertes en un <strong>prototipo de producto util</strong>?
+
+A diferencia de hacer un juego de Snake o una calculadora, <strong>en negocios reales no puedes inventar funcionalidades de la nada</strong>:
+
+1. <strong>Aclarar los puntos de dolor</strong>: hablar con el equipo de operaciones, extraer de la vaga "mejorar la eficiencia" los <strong>verdaderos puntos de dolor</strong>
+2. <strong>Elegir lo mas importante</strong>: de todos los problemas, resolver primero <strong>el mas doloroso</strong>, sin intentar hacer todo de una vez
+3. <strong>Validar rapidamente</strong>: usar el AI IDE para hacer primero un <strong>prototipo de una sola pagina</strong>, y una vez que funcione, expandirlo a multipagina
+4. <strong>Hacer algo util</strong>: entregar finalmente un <strong>espacio de trabajo de materiales de e-commerce que se pueda demostrar y operar</strong>
+
+Aprenderemos la <strong>transicion de hacer juguetes a hacer aplicaciones</strong>, y a <strong>empatizar y pensar en las necesidades reales de los clientes</strong>.
+
+</ChapterIntroduction>
+
+::: info Nota
+En este capitulo pueden aparecer terminos de negocio. Si no los entiendes, puedes preguntar a la IA para obtener una explicacion.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
+      { title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
+      { title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
+      { title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Definir los requisitos antes de escribir codigo
+
+En los tutoriales anteriores, usamos AI IDE para generar facilmente el juego de Snake y otros juegos pequenos, pero estos solo pueden considerarse proyectos de juguete y no se pueden aplicar al trabajo y la vida cotidiana. Si queremos que las capacidades de IA sean realmente utiles para todos, deberiamos combinar la programacion Vibe Coding con escenarios de la vida real y del trabajo.
+
+En el capitulo anterior aprendimos como encontrar <strong>buenas ideas por las que la gente este dispuesta a pagar</strong>, pero encontrar la direccion es solo el comienzo. Cuando realmente haces un producto, descubres que: <strong>saber "que hacer" y saber "como hacerlo" tienen una enorme brecha entre ellos.</strong>
+
+Esta brecha es la <strong>concrecion de los requisitos</strong>.
+
+Por ejemplo, en clase o en proyectos personales, a menudo empezamos con la funcion ejecutable mas simple:
+
+- "Haz un tablero kanban, pon las tareas en una lista."
+- "Hazme una herramienta de dibujo."
+- "Hazme un software para recoger cuestionarios."
+
+Estas a menudo son solo una herramienta, un modulo funcional, ni siquiera pueden considerarse un problema de negocio claro. Lo mas critico es que <strong>estas ideas a menudo son solo "tu crees que son utiles", no "los usuarios realmente las necesitan".</strong>
+
+En proyectos empresariales o de startup, los product managers e ingenieros suelen partir de una proposicion de negocio mas grande. Por ejemplo, podemos suponer este escenario:
+
+<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
+  <div style="font-weight: bold; color: #303133; margin-bottom: 10px;">Escenario de negocio:</div>
+  <div style="color: #606266; line-height: 1.6;">
+    <p>Eres el product manager de operaciones de e-commerce de una tienda. Tu jefe te ha dado una proposition vaga pero con mucha presion:</p>
+    <p style="font-style: italic; margin-top: 10px;">"Ahora todo el mundo en las cuentas oficiales esta usando IA para hacer imagenes y textos, parece muy facil. Ayudame con esto, para que seamos mas eficientes cuando subamos productos nuevos al e-commerce de TikTok."</p>
+  </div>
+</el-card>
+
+En este momento puedes pensar: "Jefe, estas sonando otra vez!" Sin embargo, en el trabajo real, este tipo de decisiones vagas con una sola frase son muy comunes, incluso mas frecuentes que las veces que pides te con leche a la semana. Por lo tanto, para ser un buen profesional (y mas aun si eres el CEO de una nueva startup), debemos aprender a pasar de hacer herramientas para nosotros mismos a hacer prototipos de productos reales.
+
+Como hemos aprendido AI IDE, si lo piensas bien, este requisito es bastante simple: solo tienes que darle un prompt a la IA basado en esto, pasarlo al Agent y ya esta, no?
+
+```
+Por favor refierete a mi necesidad xxxx,
+ayudame a disenar un espacio de trabajo de materiales de e-commerce,
+que incluya funciones de generacion y gestion de materiales como descripciones de productos, imagenes y videos.
+```
+
+Si emocionado conviertes directamente este requisito en un prototipo y se lo envias al jefe -- felicidades, tu bonificacion de este trimestre acaba de ser cancelada!
+
+**Por que? Este es el punto de dolor central que vamos a resolver:**
+
+Antes aprendimos AI IDE haciendo proyectos de juguete como el juego de Snake o una calculadora -- funcionalidades simples, tu sabes lo que quieres, y lo haces para ti mismo. Pero **los escenarios de negocio reales son completamente diferentes**:
+
+- **Tu no eres el usuario**: el jefe quiere "mejorar la eficiencia", pero no sabes como trabaja exactamente el equipo de operaciones cada dia ni donde se atascan;
+- **La IA tampoco entiende el negocio**: si le das a la IA un requisito vago, solo puede adivinar basandose en conocimientos generales. Lo que produce puede parecer correcto, pero en realidad no se puede usar;
+- **Una buena idea no equivale a un buen producto**: crees que "anadir una funcion de generacion con IA" es genial, pero los usuarios puede que no lo necesiten, o que sea mas complicado de usar que antes.
+
+**Por eso debemos aprender a "pasar de tener una idea a entender a los usuarios"** Solo cuando tu creatividad resuelve realmente los problemas de los demas, cuando preguntas, cuando profundizas en el entendimiento del negocio, puedes crear algo verdaderamente valioso. (Una buena idea puede ser incluso mas importante que una buena tecnologia).
+
+### 1.1 De la imaginacion a la realidad: aprender a hacer preguntas sobre el negocio
+
+::: info Primero aclaremos: que es un requisito? Que es un negocio?
+
+Un **requisito** es lo que el usuario realmente quiere, los problemas que encuentra, lo que quiere resolver. Por ejemplo, "el jefe quiere que publique productos mas rapido", eso es un requisito.
+
+Un **negocio** es lo que los usuarios hacen realmente cada dia, su forma de trabajar. Por ejemplo, lo que hace el equipo de operaciones de e-commerce cada dia: publicar productos, cambiar precios, hacer imagenes, ver datos... todo esto es negocio.
+
+**Por que prestar atencion al negocio?**
+Porque si no entiendes el negocio, la herramienta que hagas puede ser "parece buena, pero nadie la usa". Solo entendiendo realmente como trabajan los usuarios cada dia y donde se atascan, puedes hacer algo que realmente les ayude.
+
+:::
+
+Desde la perspectiva mas simple, puedes empezar por preguntarte:
+
+- Cuando el jefe dice "**mas eficiencia**", que significa exactamente? Quiere **hacerlo mas rapido**? O quiere **gastar menos**? O quiere **vender mas**?
+- Como se publican los productos ahora? **Donde esta el problema**?
+- Cuantos **productos nuevos** hay que hacer cada dia? Cuantas **imagenes** y cuanto **texto** por producto?
+- En el trabajo actual, **que es lo mas molesto**, **lo que menos quieres hacer**?
+
+Pero estas son preguntas que suponemos; debemos preguntar directamente al equipo de operaciones de e-commerce de primera linea: "Cuales son sus dificultades y en que se enfocan?" A traves de la comunicacion, obtendremos respuestas mas precisas:
+
+::: info Resultado de la entrevista real de negocio
+
+Preguntamos a personas que hacen operaciones de e-commerce, y nos contaron estas frustraciones:
+
+**1. Demasiadas cosas y muy dispersas**
+- Una persona tiene que gestionar varias tiendas, cada tienda tiene muchos productos que preparar;
+- Cada dia va de aqui para alla: **publicar productos nuevos**, **cambiar precios**, **hacer imagenes**, **ver datos**; una cosa no termina y ya hay que hacer otra.
+
+**2. Hacer contenido no es hacerlo bien de una vez, sino ir probando**
+- Primero usan **las imagenes del fabricante**, **materiales usados antes** o **imagenes de referencia encontradas en internet** para **publicar** rapidamente el producto y probar;
+- Gastan un poco en promocion para **ver si alguien compra**;
+- Solo para los **productos que venden bien**, se toman el tiempo de hacer buenas imagenes, escribir descripciones detalladas y grabar videos.
+
+:::
+Despues de entrevistar al equipo de negocio, sentimos entusiasmo, porque ahora realmente podemos hacer un prototipo perfecto que se ajuste al negocio! -- Nos equivocamos de nuevo. Si intentamos "satisfacer todas las demandas de una vez", el producto sera muy grande y dificil de implementar dentro del tiempo del curso. Por lo tanto, necesitamos organizar y priorizar aun mas, para encontrar el verdadero punto de dolor central.
+
+### 1.2 De la divergencia a la convergencia: identificar el punto de dolor central y la funcionalidad del negocio
+
+::: info Por que "converger"? Que es un "punto de dolor"?
+
+**Hay muchos problemas, pero cual hacemos primero?**
+
+Los usuarios pueden contarte un monton de problemas: A tambien es molesto, B tambien es molesto, C tambien... Pero si intentas resolver todos los problemas a la vez, probablemente no hagas bien ninguno. Por eso hay que **converger**: elegir de todos los problemas el **mas doloroso, el mas urgente y el mas resoluble** para empezar.
+
+**Que es un punto de dolor?**
+Es el problema concreto que los usuarios **mas odian, en el que mas tiempo gastan y que mas quieren resolver**. No es "me parece util", sino algo de lo que los usuarios **se quejan todos los dias y que les duele cada vez que hacen**.
+
+:::
+
+A traves de la entrevista anterior, descubrimos que las operaciones encuentran muchos problemas: el ritmo interrumpido por promociones, tener que gestionar multiples tiendas, ir de publicar/cambiar precios/hacer imagenes/ver datos de un lado a otro...
+
+Si intentamos "resolver todos estos problemas", terminaremos con una herramienta **grande y completa pero inutil**.
+
+Vamos a clasificar estos problemas (puedes pedirle ayuda a la IA); aproximadamente hay tres categorias:
+
+1. **Problemas de ritmo**: cuando publicar, cuando ajustar precios;
+2. **Problemas de eficiencia**: como gestionar bien multiples tiendas y multiples productos a la vez;
+3. **Problemas de contenido**: como hacer rapidamente imagenes y textos de productos.
+
+Para nuestro curso, lo mas adecuado para resolver primero es la **categoria 3: el problema de hacer contenido**. Pero "hacer contenido rapidamente" sigue siendo algo abstracto, asi que preguntamos al equipo de negocio donde se atascan especificamente:
+
+::: info El equipo de negocio dice: hay dos cosas mas dolorosas al hacer contenido
+
+**Dolor 1: hacer imagenes y textos en lote es demasiado laborioso**
+- Los materiales estan por todas partes: en la nube, en el historial de WeChat, en el backend de la plataforma... **encontrarlos es muy dificil**;
+- Hay que publicar muchos productos a la vez, **no hay tiempo para hacerlos uno por uno con cuidado**, solo se puede hacer algo rapido;
+- Los requisitos no son altos, **con que se pueda ver y publicar**, no necesita ser muy elaborado.
+
+**Dolor 2: las buenas soluciones no se pueden guardar y reutilizar**
+- Los titulos y layouts que funcionaron bien antes, **la proxima vez que se necesitan no se encuentran**;
+- Las soluciones estan dispersas en el historial de chat y en enlaces de productos anteriores;
+- Cuando se necesitan hay que **buscar un buen rato y copiar/pegar/modificar otro rato**;
+- Falta una herramienta para **guardar, gestionar y aplicar directamente**.
+
+:::
+
+Basandose en estos dos puntos de dolor, vamos a hacer una pequena herramienta: **ayudar al equipo de operaciones a hacer imagenes y textos en lote, y ademas poder guardar las buenas soluciones para usarlas directamente la proxima vez**.
+
+Solo hace dos cosas (puedes pedirle a la IA que las refine, recuerda ir recortando funcionalidades segun el feedback del negocio):
+
+::: info Funcionalidad 1: Generar en lote imagenes y textos de productos de e-commerce
+
+**Para que sirve?**
+Le das al sistema informacion del producto, y automaticamente te genera imagenes y textos que se pueden usar para publicar en plataformas de e-commerce (como TikTok, Taobao).
+
+**Entrada**
+| Tipo | Contenido |
+|------|------|
+| Informacion del producto | Nombre, categoria, marca, material, talla, color, etc. |
+| Imagenes del producto | Foto con fondo blanco o con escenario simple |
+| Imagenes de referencia | Capturas de productos que se vendieron bien antes o enlaces de referencia |
+| Forma de importar | Importar en lote via Excel, o rellenar directamente en la pagina |
+
+**Salida (materiales de e-commerce generados)**
+- **Imagen principal del producto**: imagen de presentacion con puntos de venta en texto (la primera imagen que ve el usuario al desplazar)
+- **Titulo del producto**: combinacion de palabras clave que se pueden buscar
+- **Texto de puntos de venta**: 1-2 frases atractivas para los compradores
+- Todo es un producto final que **con pequenos ajustes se puede publicar**
+
+**Resultado esperado**
+- Antes: cada producto habia que hacerlo desde cero, imagen y texto
+- Ahora: pasas un lote de productos al sistema, y despues de generar borradores solo eliges y ajustas
+
+:::
+
+::: info Funcionalidad 2: Guardar las buenas soluciones como plantillas
+
+**Entrada**
+| Tipo | Contenido |
+|------|------|
+| Un conjunto completo | Imagen principal + titulo + texto |
+
+**Salida**
+| Funcion | Descripcion |
+|------|------|
+| Aplicar | Al hacer un producto nuevo la proxima vez, generar automaticamente con la plantilla |
+| Modificar | Cambiar directamente el titulo y el texto |
+| Gestionar | Poner nombre, etiquetar (ej. "plantilla de bolsos de hombre", "titulo de promocion"), para facilitar la busqueda |
+
+**Resultado esperado**
+1. Importar un producto nuevo
+2. Elegir: dejar que el sistema genere por defecto, o **usar mi plantilla guardada**
+3. El sistema aplica automaticamente el estilo de la plantilla, generando nuevas imagenes y textos
+
+:::
+
+---
+
+**Repasemos lo que acabamos de hacer:**
+
+1. **Primero hicimos preguntas**: en lugar de empezar directamente a hacer, primero preguntamos al equipo de operaciones "que es lo que mas les molesta";
+2. **Encontramos los puntos de dolor**: descubrimos que lo mas doloroso es "hacer imagenes y textos es demasiado trabajoso" y "las buenas soluciones no se pueden guardar";
+3. **Convergimos el alcance**: no hacemos una plataforma grande y completa, solo hacemos dos funciones: "generar imagenes y textos en lote + guardar plantillas".
+
+**Por que es importante hacer esto?**
+
+Un error comun de los principiantes al hacer productos es: cuantas mas funcionalidades, mejor. Pero lo que los usuarios realmente necesitan es **que se resuelva el problema mas doloroso**. Mejor hacer una o dos funcionalidades que realmente ayuden al usuario que un monton que no funcionen bien.
+
+**El nucleo del pensamiento de producto y negocio:**
+- No pienses "creo que el usuario necesita esto"
+- Ve y pregunta al usuario "que haces cada dia? Donde te duele mas?"
+- De todos los problemas, **converge** al mas doloroso y mas resoluble
+- Haz primero la **version minima usable**, y luego itera poco a poco
+
+Esto es lo que debemos aclarar antes de escribir codigo. El codigo es solo una herramienta; **entender al usuario y encontrar el problema correcto** es el primer paso.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
+      { title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
+      { title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
+      { title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Producir un prototipo en 10 minutos: dejar que el AI IDE implemente la "funcionalidad central"
+
+::: info Sobre el Plan de programacion
+Si sientes que tu IDE actual no es lo suficientemente inteligente, o que te quedas sin cuota muy rapido, puedes comprar un **plan de programacion**. Puedes prever este articulo de referencia sobre el uso de Claude para programar.
+:::
+
+Pensar es bueno, pero no hay que sobre-pensar. Dejemos de lado el exceso de reflexion y intentemos hacer un prototipo empezando con una sola pagina.
+
+### 2.1 Primer paso: dile a la IA en lenguaje llano que quieres
+
+Al principio no busques el prompt perfecto; empieza con tu expresion mas natural. Como cuando le describes un requisito a un companero, dile a la IA en lenguaje llano lo que quieres hacer, y luego deja que la IA te ayude a optimizarlo en algo mas profesional.
+
+#### 2.1.1 Empezar con una descripcion verbal (recomendado para principiantes)
+
+Primero describe la idea con tus propias palabras, aunque sea rudimentario, no importa:
+
+```
+Quiero hacer una herramienta que ayude a operaciones de e-commerce a generar automaticamente imagenes principales y textos de productos.
+Los de operaciones normalmente tienen que hacer imagenes y escribir textos uno por uno, lo cual es muy molesto.
+Mi idea es: suben la informacion del producto, el sistema genera un lote de borradores,
+y los de operaciones eligen los buenos, los ajustan un poco y ya los pueden usar.
+
+Primero hagamos la version mas simple: una pagina, a la izquierda se rellena la informacion del producto,
+a la derecha se muestra el resultado generado. Que se puedan subir imagenes, rellenar texto,
+y despues de generar, mostrar la vista previa de la imagen principal y el texto.
+```
+
+A continuacion, enviale este texto a la IA (como ChatGPT, Claude, etc.) y pidele que te ayude a expandirlo. La IA normalmente te ayudara a completar detalles que no habias considerado, organizar tu idea mas claramente, y finalmente generar un prompt adecuado para enviar al AI IDE.
+
+Puedes decirle a la IA asi:
+```
+Ayudame a expandir la idea anterior, organizala en un documento de logica de negocio claro,
+y luego genera un prompt adecuado para enviar a un AI IDE (como Cursor, Trae),
+para generar el codigo de un prototipo de aplicacion de una sola pagina.
+```
+
+La IA devolvera un conjunto de requisitos estructurados y el prompt correspondiente. Tu lo revisas, eliminas las funcionalidades innecesarias, confirmas que esta todo correcto, y luego lo usas para generar el codigo.
+
+La ventaja de hacer esto es que lo que describes verbalmente es tu idea mas autentica, aunque puede faltar algunos detalles importantes. Cuando la IA te ayuda a expandir, puede preguntar cosas como "quieres soportar subida en lote?" que no habias pensado, ayudandote a validar mas. Puedes elegir conservar o eliminar funcionalidades poco practicas segun el feedback, y en iteraciones sucesivas determinar el prompt inicial para la IA.
+
+#### 2.1.2 Saltarse la expansion: enviar directamente tu documento de negocio organizado a la IA
+
+Si ya has organizado el documento de logica de negocio en capitulos anteriores (por ejemplo, una descripcion de requisitos en lenguaje llano), puedes usar directamente el siguiente formato para enviarlo al AI IDE, ahorrando el paso intermedio de la expansion. Adecuado cuando los requisitos ya estan claros y quieres empezar a escribir codigo directamente:
+
+```
+Ayudame a implementar una aplicacion de una sola pagina basandote en la logica de negocio, para validar la funcionalidad central.
+
+La logica de negocio es la siguiente:
+1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
+- **Entrada (soporta subida directa e importacion en lote de materiales):**
+  - Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
+  - Imagenes del producto: foto con fondo blanco / foto con escenario simple;
+  - Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
+  - Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
+  - Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
+- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
+  - Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
+  - Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
+- **Cambio esperado en la forma de uso:**
+  Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
+
+Primero hagamos la primera funcionalidad; la segunda (biblioteca de plantillas) la anadiremos despues.
+```
+
+#### 2.1.3 El enfoque del programador (avanzado): dejar que la IA escriba "el prompt del prompt"
+
+Si quieres controlar mas finamente el proceso de generacion de codigo, primero puedes pedirle a la IA (como ChatGPT) que genere un prompt especifico para el AI IDE basandose en tus requisitos:
+
+```
+Basandote en la siguiente idea, ayudame a escribir un prompt para enviar a un coding Agent que generara codigo,
+necesito usar este prompt para generar codigo.
+
+[Pega aqui tu descripcion de la logica de negocio]
+
+Requisitos:
+1. El prompt debe incluir una descripcion clara del layout de la pagina
+2. Definir claramente la estructura de datos y la logica de interaccion
+3. Especificar el stack tecnologico (ej. React + Tailwind)
+4. Listar los puntos de funcionalidad central a implementar
+```
+
+Normalmente la IA generara un prompt estructurado como el siguiente:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png)
+
+Puedes modificar ligeramente este prompt y luego enviarlo al AI IDE para generar codigo.
+
+### 2.2 Segundo paso: dejar que el AI IDE genere codigo directamente
+
+#### 2.2.1 Preparacion: conocer las operaciones basicas del AI IDE
+
+Si aun no estas familiarizado con el uso basico del AI IDE (como Cursor, Trae, Windsurf, etc.), te recomendamos primero ver el [tutorial basico de IDE](/es-es/appendix/2-development-tools/ide-basics/) en el apendice, para entender como:
+- Crear un nuevo proyecto
+- Conversar con el AI Agent
+- Entender el proceso de generacion de codigo de la IA
+
+#### 2.2.2 Empezar a generar codigo
+
+Ya tienes el prompt inicial; usemos el primer estilo de prompt como ejemplo para que la IA nos ayude a generar codigo. Primero crea una ventana y la carpeta correspondiente, abre la carpeta (inicializa un nuevo proyecto en la direccion de carpeta que prefieras):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png)
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png)
+
+En la barra lateral, elige el modelo que prefieras (se recomiendan gemini, gpt, glm, kimi, minimax, etc.), e introduce el prompt obtenido en el primer paso:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png)
+
+Despues de hacer clic en generar, veremos la etapa familiar: la IA planificara la estructura de directorios del proyecto, los archivos necesarios y dara el contenido inicial de cada archivo.
+
+::: warning Nota especial: la IA puede detenerse esperando tu confirmacion
+Durante el proceso de generacion, el AI Agent frecuentemente **se detendra esperando tu input o confirmacion**, por ejemplo:
+- Preguntandote si quieres continuar al siguiente paso
+- Pidiendote que presiones Enter para confirmar una operacion
+- Preguntandote sobre alguna eleccion tecnica
+
+**Si ves que la IA no avanza, primero revisa la interfaz de chat para ver si esta esperando tu respuesta.** Muchos principiantes creen que la IA esta pensando, cuando en realidad ya se detuvo esperandote. Responde activamente o presiona Enter, y la IA continuara trabajando.
+:::
+
+Tambien recuerda presionar Enter para confirmar la informacion (de lo contrario se quedara esperando; algunos AI IDE no tienen este problema):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png)
+
+Si te encuentras con la siguiente situacion, significa que ya se ha iniciado un servicio local; necesitas hacer clic para saltar, de lo contrario te quedaras en esta pantalla (si despues de generar el codigo no aparece nada, necesitas decir activamente "ayudame a iniciar este proyecto"):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png)
+
+::: info Explicacion del escenario
+**Explicacion del escenario**: usaste `npm create vite@latest` para crear un proyecto React + TypeScript (easy-vibe-web). Una vez completada la creacion, la computadora automaticamente "ejecutara" esta pagina web, para que puedas ver el efecto inmediatamente.
+
+**Servicio local**: se puede entender como que tu computadora ha abierto temporalmente una ventana de muestra de pagina web, que solo se ejecuta en tu computadora; los demas no pueden acceder.
+
+**localhost (direccion local)**: `localhost` significa "esta computadora misma". Cuando el navegador accede a esta direccion, en realidad esta accediendo a la pagina web que se esta ejecutando en tu computadora.
+
+**Puerto**: el puerto se puede entender como un numero que se usa para distinguir diferentes servicios de paginas web que se ejecutan en la misma computadora. Este proyecto usa el 5174.
+
+**Enlace de acceso `http://localhost:5174/`**: esta direccion significa "acceder a la pagina web con numero 5174 en esta computadora". Abriendo este enlace en el navegador podras ver el efecto.
+
+**Explicacion de este escenario**: el sistema originalmente queria usar el puerto 5173, pero ese numero ya estaba en uso, asi que cambio automaticamente al 5174. Esto es normal.
+
+**Instrucciones de operacion**: abre el navegador, introduce `http://localhost:5174/` en la barra de direcciones y presiona Enter para ver la pagina del proyecto actual.
+:::
+
+Despues de confirmar todo, espera un momento a que el agente termine de ejecutarse, y podemos obtener el siguiente resultado:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png)
+
+Podemos ver que ya hay una vista preliminar de las funcionalidades, pero la pagina frontend se ve muy fea. En este momento podemos intentar hablar directamente con la IA para optimizar la visualizacion de la interfaz:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png)
+
+Despues de optimizar, podemos obtener una interfaz mas bonita:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png)
+
+Puedes modificar las funcionalidades de la pagina web segun tus necesidades; puedes adjuntar capturas de pantalla y preguntar libremente, por ejemplo: "Todavia no necesito la funcion de importacion en lote, ayudame a quitarla", "Hay demasiadas cosas que rellenar a la izquierda, ayudame a dejar solo xxxxx". Incluso puedes referenciar otros sitios web maduros; por ejemplo, aqui podemos referirnos directamente a un producto de diseno de Google (puedes pegar una captura de pantalla de un sitio web maduro que te guste):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png)
+
+Finalmente podemos obtener:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png)
+
+### 2.3 Que hacer cuando hay errores
+
+En la practica, encontrar errores es inevitable; es un fenomeno normal y no significa que hayas hecho algo mal. No necesitas entender el error; solo pasa "lo que ves" completamente a la IA.
+
+Solo hay tres formas comunes de manejarlos:
+
+- **Forma 1: Error en la pagina o terminal**
+  Cuando la pagina se pone roja, queda en blanco, o aparecen un monton de letras rojas en la terminal, simplemente haz una captura de pantalla o copia toda la informacion del error y enviasela a la IA para que te ayude a repararlo.
+
+- **Forma 2: La funcionalidad no esta bien pero no hay error**
+  Por ejemplo, el boton no responde, los datos no se muestran, los estilos estan desordenados. Describe en lenguaje llano "que esta pasando ahora + lo que tu querias", y si es necesario, anade una captura de pantalla.
+
+- **Forma 3: No estas seguro de si hay algun problema**
+  Puedes preguntar directamente a la IA: "Ayudame a revisar si esta funcionalidad tiene algun problema obvio, si necesita ajustes."
+
+#### 2.3.1 Preguntas frecuentes de principiantes
+
+- **P: No se donde esta la informacion del error?**
+- R: Generalmente, mira todas las "letras rojas". En la terminal, la consola o la pagina, busca las indicaciones en rojo, selecciona todo y copialo para la IA.
+
+- **P: Que hago si la IA lo arregla pero sigue dando el mismo error?**
+- R: Esto es comun. Sigue haciendo capturas de pantalla o copiando la ultima informacion del error y enviasela, para que lo repare aun mas basandose en la ultima modificacion.
+
+- **P: Necesito entender completamente el plan de reparacion de la IA?**
+- R: No necesitas entenderlo todo de una vez. Puedes centrarte en uno o dos puntos cada vez; con el tiempo, iras entendiendo cada vez mas codigo, como cuando acumulas vocabulario en ingles.
+
+- **P: Despues de muchas modificaciones, el problema sigue sin resolverse?**
+- R: Puedes intentar:
+  - Usar la funcion de "rollback de version" del IDE, encontrar el boton de deshacer en el chat del agente, volver a una version que funcionaba y empezar de nuevo;
+  - Cambiar de modelo o ajustar el prompt, describiendo el fenomeno y la informacion del error de forma mas especifica;
+  - Empaquetar "codigo actual + log de errores + comportamiento esperado" y enviarlo todo de una vez a la IA, para que reestructure completamente la parte problematica.
+
+## 3. Expandir de aplicacion de una sola pagina a multipagina
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
+      { title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
+      { title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
+      { title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Cuando la logica de la funcionalidad central esta basicamente generada, podemos generar el resto del contenido. Por ejemplo, en este punto, si hacemos clic en configuracion o en algunos botones, no hacen nada.
+
+Puedes pedirle a la IA que revise segun los requisitos del prompt de negocio y genere las partes que faltan, o pedirle directamente que complete las paginas no implementadas. Tambien puedes especificar una pagina para que la IA la complete, hasta que las paginas se puedan hacer clic y las funcionalidades puedan interactuar normalmente:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png)
+
+Despues de esperar un momento, podemos ver que el programa ya ha completado multiples paginas y funcionalidades interactivas basandose en lo anterior:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png)
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png)
+
+En este punto solo necesitas hacer clic manualmente en cada funcion y boton que te interese, asegurandote de que la interaccion sea normal. Si hay funcionalidades que no se pueden interactuar, puedes comunicarte con la IA para que te ayude a repararlas.
+
+## 4. Hacer que el prototipo "parezca profesional"
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Analisis de necesidades', description: 'De lo vago a lo concreto' },
+      { title: 'Validacion de una pagina', description: 'La funcionalidad central toma forma' },
+      { title: 'Expansion multipagina', description: 'Completar la estructura de la aplicacion' },
+      { title: 'Mejora estetica', description: 'Mejorar la experiencia del usuario' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Despues de tener la estructura multipagina, el ultimo paso es hacer que el prototipo pase de "funcional" a "comodo de usar y profesional". Para ello, necesitamos experimentar todo el flujo (flujo de usuario) y hacer que la IA repare las partes que no funcionan, para que podamos simular un nuevo usuario recorriendo todo el flujo desde cero cada vez que actualizamos, obteniendo el resultado esperado.
+
+Recordemos los requisitos iniciales:
+
+```
+1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
+- **Entrada (soporta subida directa e importacion en lote de materiales):**
+  - Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
+  - Imagenes del producto: foto con fondo blanco / foto con escenario simple;
+  - Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
+  - Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
+  - Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
+- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
+  - Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
+  - Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
+- **Cambio esperado en la forma de uso:**
+  Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
+
+2. Guardar las buenas soluciones como una biblioteca de plantillas reutilizables:
+- **Que se puede guardar?**
+  - Cualquier salida que las operaciones consideren "buena" se puede guardar con un clic:
+    - Puede ser la combinacion completa de "imagen principal + titulo + puntos de venta";
+    - O solo una parte, como una estructura de titulo o un texto de puntos de venta.
+- **Que se puede hacer despues de guardar?**
+  - **Reutilizar:**
+    - Usar esta entrada guardada para generar un nuevo lote de imagenes y textos con los parametros de nuevos productos;
+    - O sobre el mismo producto, generar multiples variantes basadas en la plantilla para hacer tests A/B.
+  - **Editar:**
+    - Modificar directamente el titulo / texto de puntos de venta;
+    - Si se soporta edicion de imagen, se pueden ajustar elementos como texto y pegatinas en la imagen principal.
+  - **Gestionar:**
+    - Poner nombre a las entradas guardadas, etiquetar (ej. "plantilla de imagen principal de bolsos de hombre", "estructura de titulo de promocion"), soportar clasificacion por tienda para facilitar la busqueda posterior.
+- **Como usarlo la proxima vez que se publique un producto nuevo?**
+  - Despues de importar productos nuevos, las operaciones pueden elegir:
+    - Usar la logica por defecto del sistema, o
+    - Especificar "usar una de mis plantillas guardadas para generar";
+  - El sistema basandose en los datos del nuevo producto, aplica automaticamente la estructura y el estilo de la plantilla, generando nuevos borradores de imagen principal + titulo + puntos de venta.
+```
+
+Si cada vez que pruebas necesitas crear datos nuevos, esto lleva mucho tiempo. En este caso, normalmente usamos algo llamado "datos de prueba". Podemos comunicarnos con la IA de la siguiente manera, para que genere en la interfaz una entrada rapida de datos de prueba que nos permita verificar que todas las funcionalidades funcionan correctamente:
+
+```
+Necesito probar el proceso de uso del usuario, asegurandome de que pueda completarse totalmente. Por favor genera una entrada de datos de prueba basandote en los siguientes requisitos, para que pueda hacer clic y probar rapidamente si todo el flujo funciona normalmente:
+1. Ayudar a operaciones a generar en lote la primera version de borradores de imagenes y textos:
+- **Entrada (soporta subida directa e importacion en lote de materiales):**
+  - Informacion basica del producto: nombre, categoria, marca, material, talla, color, publico objetivo, etc.;
+  - Imagenes del producto: foto con fondo blanco / foto con escenario simple;
+  - Cada generacion soporta subir capturas de productos exitosos anteriores o enlaces de referencia;
+  - Soporta importar en lote via Excel, o rellenar/subir online en la pagina.
+  - Soporta especificar en la pagina si guardar los materiales en la biblioteca, para facilitar el proximo uso
+- **Salida (contenido que se puede publicar directamente o con pequenos cambios):**
+  - Para cada producto, un borrador de imagen principal "presentable, con puntos de venta basicos";
+  - Un titulo "con estructura razonable y palabras clave centrales" + 1-2 frases de puntos de venta.
+- **Cambio esperado en la forma de uso:**
+  Pasar de empezar cada lote desde cero a pasar un lote de productos al sistema y usar los borradores generados para filtrar y ajustar.
+```
+
+Es facil obtener resultados (si crees que un dato es muy poco, puedes pedirle a la IA que genere multiples casos de prueba):
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png)
+
+Despues de hacer clic, obtenemos el resultado:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png)
+
+En este punto lo que obtenemos directamente es el resultado, no hay un "proceso de generacion simulado". Si queremos simular un proceso de generacion real, podemos hablar directamente con la IA: "Por favor simula un proceso de generacion real, que me des el resultado despues de un rato al hacer clic."
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png)
+
+Despues de verificar la funcionalidad de generacion, tambien debemos asegurarnos de que la funcionalidad de la biblioteca de plantillas funciona correctamente. En la tarjeta de generacion de la pagina podemos ver que la funcion de guardado de plantillas no se ha implementado; necesitamos tener una conversacion mas profunda con la IA: "Por favor ayudame a asegurarme de que el requisito [pega aqui el contenido del punto 2 de arriba] funciona correctamente, que se pueda hacer clic en un resultado para guardar la plantilla correspondiente, y que al abrirlo se puedan ver los parametros de generacion"
+
+La generacion a menudo no se consigue de una sola vez; frecuentemente hay que hacer capturas de pantalla para corregir:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png)
+
+Finalmente obtenemos el resultado esperado:
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png)
+
+Ademas de experimentar manualmente el flujo de requisitos, tambien puedes pedirle a la IA que haga directamente una verificacion de requisitos, por ejemplo:
+
+- "Por favor compara con mis requisitos originales, revisa si la aplicacion actual ya cubre todas las funcionalidades centrales."
+- "Ayudame a hacer una lista de funcionalidades, indicando cuales ya estan completadas, cuales aun no estan implementadas o tienen una experiencia insuficiente."
+
+La IA generalmente generara un checklist, y puedes pensar si necesitas seguir mejorando basandote en los resultados. Despues de iteraciones repetidas, puedes obtener un resultado de prototipo bastante completo.
+
+## 5. Asignacion: replica tu propio espacio de trabajo de e-commerce de TikTok
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Mision de desafio: replica el espacio de trabajo de materiales de e-commerce</div>
+  </template>
+
+  <p>
+    Referenciando los prompts y el contenido de esta leccion, completa un ciclo cerrado:
+  </p>
+
+  <ul>
+    <li>
+      <strong>Practica de ciclo cerrado completo</strong>
+      <ul>
+        <li>Generacion de prompts a partir del analisis de negocio -> generacion de prototipo de una pagina -> generacion de prototipo multipagina</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Compartir resultados</strong>
+      <ul>
+        <li>Haz capturas de pantalla de tu programa y compartelas con todos</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Pregunta de reflexion</strong>
+      <ul>
+        <li>Para la proxima seccion "integrar capacidades de LLM y generacion de texto a imagen", piensa con antelacion: como podrias integrar capacidades como "IA que escribe textos / genera imagenes / genera scripts" en tu espacio de trabajo?</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Proximo paso
+
+En la siguiente seccion, construiremos sobre este espacio de trabajo de produccion de contenido e integraremos capacidades especificas de IA (texto a texto, imagen a texto, texto a imagen), por ejemplo:
+
+- Generar automaticamente un primer borrador de texto y multiples opciones de titulos para una tarea de contenido
+- Generar automaticamente un borrador de imagen de acompanamiento basandose en la descripcion de la tarea (texto a imagen)
+- Clasificar y resumir automaticamente las tareas de contenido historicas, ayudandote a planificar los temas de la proxima campana
+
+<RelatedArticlesSection
+  title="Sigue aprendiendo"
+  description="Se recomienda seguir el orden 'integrar capacidades de IA -> ciclo completo de proyecto -> ingenieria de diseno'."
+  :items="relatedArticles"
+/>
diff --git a/docs/es-es/stage-1/complete-project-practice/index.md b/docs/es-es/stage-1/complete-project-practice/index.md
new file mode 100644
index 0000000..3e04814
--- /dev/null
+++ b/docs/es-es/stage-1/complete-project-practice/index.md
@@ -0,0 +1,301 @@
+---
+title: 'Practica de proyecto completo - De Demo a prototipo de nivel de producto'
+description: 'Sal de la fase de Demo, aprende a mejorar los enlaces del producto, construye datos de simulacion realistas, e itera rapidamente con retroalimentacion.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Aproximadamente <strong>3 dias</strong>'
+const relatedArticles =
+  relatedArticlesMap['es-es/stage-1/complete-project-practice'] ?? []
+</script>
+
+# Practica de proyecto completo
+
+## Resumen del capitulo
+
+<ChapterIntroduction :duration="duration" :tags="['Pensamiento de producto', 'Datos de simulacion', 'Mejora de interaccion', 'LocalStorage']" coreOutput="1 prototipo de producto IA con funcionalidad completa" expectedOutput="Aplicacion web con flujo completo y datos realistas">
+
+En el capitulo anterior integramos capacidades de IA y el Demo ya funciona, pero aun esta <strong>lejos</strong> de ser un verdadero "producto": al actualizar la pagina los <strong>datos desaparecen</strong>, un error causa <strong>pantalla en blanco</strong>, la lista solo tiene "dato de prueba 1, dato de prueba 2", y si el usuario hace clic en el lugar equivocado <strong>no puede deshacer</strong>...
+
+Este capitulo va a <strong>llenar todos estos huecos</strong>: vamos a <strong>completar el flujo completo del producto</strong>, usar IA para generar <strong>datos de negocio realistas</strong> en lugar de datos falsos, anadir <strong>manejo de errores y retroalimentacion al usuario</strong>, y finalmente pulir un prototipo completo que <strong>se pueda mostrar a otros</strong>.
+
+Este es el <strong>ultimo capitulo</strong> de la etapa inicial. Despues de completar este paso, habras logrado la transformacion de "no saber programar en absoluto" a "<strong>poder crear independientemente un prototipo de producto IA</strong>".
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
+      { title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
+      { title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
+      { title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Rechaza el "Happy Path": completa el flujo central
+
+Muchos principiantes que hacen prototipos suelen limitarse al "Happy Path" (el camino ideal): el usuario hace clic -> la API responde con exito -> se muestra el resultado.
+Pero en el mundo real, las cosas rara vez son tan simples. Para que tu prototipo parezca un producto real, necesitas considerar los siguientes eslabones "invisibles".
+
+### 1.1 Anadir "espera" y "retroalimentacion"
+
+Cuando el usuario hace clic en "generar texto", la IA suele tardar varios segundos en responder. Si la interfaz no muestra ninguna reaccion, el usuario pensara que el programa se ha roto.
+**Necesitas que tu AI IDE te ayude a anadir estados de Loading:**
+
+> Ejemplo de prompt:
+> "Cuando haga clic en el boton de generar, cambialo a 'Generando...' y desactivalo, y al mismo tiempo muestra una animacion de carga en el area derecha. Solo restaura el estado normal despues de que la API devuelva el resultado."
+
+### 1.2 Manejar "fallos" y "excepciones"
+
+La API Key puede caducar, la red puede desconectarse.
+**Necesitas que tu AI IDE te ayude a manejar los errores:**
+
+> Ejemplo de prompt:
+> "Si la peticion a la API falla, no muestres el error directamente en la consola. En su lugar, muestra una notificacion roja (Toast) en la parte superior de la pagina que diga 'Generacion fallida, por favor intenta de nuevo mas tarde', y permite que el usuario vuelva a hacer clic en generar."
+
+### 1.3 Persistencia del historial de conversacion
+
+En el proceso de interaccion con la IA, necesitamos guardar el contenido de las conversaciones para que el usuario pueda revisar el historial y continuar intercambios anteriores. En esta etapa aun no introducimos una base de datos; puedes elegir entre las siguientes soluciones ligeras:
+
+**Opciones de almacenamiento:**
+
+| Opcion | Escenario aplicable | Caracteristicas |
+| ---------------- | -------------------------------- | ------------------------------------ |
+| **LocalStorage** | Proyecto puramente frontend, datos del usuario guardados en el navegador | Implementacion simple, no se pierde al actualizar, no se sincroniza entre dispositivos |
+| **Archivo JSON** | Prototipo local, datos almacenados en formato archivo | Estructura clara, facil de depurar, editable manualmente |
+| **Archivo TXT** | Solucion mas simple, registro rapido de contenido de texto | Formato libre, buena compatibilidad |
+
+**Ejemplo de contenido de conversacion:**
+El historial de conversacion guardado suele incluir el siguiente contenido:
+
+```json
+[
+  {
+    "role": "user",
+    "content": "Ayudame a generar un texto de venta para unos auriculares Bluetooth en TikTok",
+    "timestamp": "2026-01-20 10:30:00"
+  },
+  {
+    "role": "assistant",
+    "content": "[Texto recomendacion de auriculares Bluetooth]\n\n🎧 Adios al retraso, experiencia de escucha inmersiva\n\n chicas! Estos auriculares Bluetooth son increibles\n\n 40dB de cancelacion activa de ruido, entra instantaneamente al mundo de la musica\n 30 horas de bateria super larga, una semana de viaje sin cargar\n llamadas claras como en persona, incluso en el metro ruidoso\n diseno semi-in-ear, comodos de usar durante horas\n\n Oferta por tiempo limitado, haz clic en el enlace de abajo para conseguirlos!",
+    "timestamp": "2026-01-20 10:30:05"
+  }
+]
+```
+
+**Prompt de implementacion:**
+
+> "Por favor ayudame a implementar la funcion de guardado del historial de conversacion. Soporta guardar los registros de conversacion entre el usuario y la IA como un archivo JSON (o usando LocalStorage). Cada vez que se entra a la pagina, carga automaticamente el historial de conversacion, y permite ver y eliminar registros individuales."
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
+      { title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
+      { title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
+      { title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Inyectar el alma: datos realistas simulados (Mock Data)
+
+Una pagina vacia no puede convencer a nadie. Imagina que le muestras a alguien un "espacio de trabajo de materiales de e-commerce", y el historial esta completamente vacio, o solo tiene una linea "test / test / test".
+Para lograr el mejor efecto de demostracion, necesitamos "falsificar" algunos datos realistas que hagan que tu prototipo parezca un producto real que ha estado operando durante medio ano.
+
+### 2.1 Deja que la IA te ayude a disenar la estructura de datos
+
+No necesitamos pensar por nosotros mismos como deberia llamarse cada campo (por ejemplo, si debe ser `name` o `title`); esto se lo podemos dejar completamente a la IA.
+
+Solo necesitas decirle a la IA tu **escenario de negocio**:
+
+> **Ejemplo de prompt:**
+> "Estoy haciendo un prototipo de un **espacio de trabajo de materiales de e-commerce para TikTok**.
+> Por favor ayudame a disenar una estructura de datos JSON para describir una 'tarea de producto'.
+> Esta tarea deberia incluir: informacion basica del producto (nombre, categoria), materiales de entrada (enlaces de imagenes), y resultados generados por IA (titulo, texto, imagen de poster).
+> Por favor dame directamente un ejemplo JSON."
+
+La IA automaticamente concebira campos como `productName`, `generatedContent` basandose en tu descripcion.
+
+### 2.2 Deja que la IA produzca en lote datos "realistas"
+
+Con la estructura de datos lista, el siguiente paso es hacer que la IA te ayude a "rellenar los huecos" y generar un conjunto de datos que parezcan reales.
+
+**Tecnicas de prompt:**
+No puedes simplemente decirle a la IA "generame datos"; necesitas, como si le asignaras una tarea a un pasante, decirle el **contexto de negocio** y los **requisitos de contenido**:
+
+- **Contexto de negocio**: dile a la IA que hacemos "e-commerce para TikTok", asi que los titulos de productos deben ser llamativos (por ejemplo "el arma secreta para verse mas delgado/a", "imprescindible para estudiantes"), y los textos deben ser coloquiales.
+- **Requisitos de imagen**: para que el prototipo se vea bien, las imagenes no deben ser marcadores de posicion en blanco y negro; es mejor usar imagenes aleatorias coloridas de paisajes u objetos reales.
+
+> **Ejemplo de prompt:**
+> "Basandote en la estructura disenada anteriormente, generame 10 datos de simulacion realistas.
+> (Nota: no necesariamente en formato JSON. Si estas escribiendo frontend, puedes hacer que genere directamente un array JavaScript; si usas Python, puedes hacer que genere una List.)
+>
+> **Requisitos del escenario de negocio**:
+>
+> 1. Supongamos que esta es una tienda departamental general, con productos en las categorias de 'moda femenina', 'tecnologia' y 'cosmetica'.
+> 2. **Los titulos y textos generados deben ser muy 'estilo TikTok'**: por ejemplo, los titulos deben incluir emojis (, ), y los textos deben usar un tono como 'increible', 'probado y comprobado'.
+> 3. **Campo de imagen**: usa uniformemente el formato `https://picsum.photos/seed/{random_id}/300/400`, asegurando que cada imagen sea diferente."
+
+**Ejemplo de Mock Data generado:**
+
+```javascript
+export const mockProductTasks = [
+  {
+    id: 'task_001',
+    name: 'Vestido retro floral frances de verano',
+    status: 'completed',
+    input: {
+      category: 'Moda femenina',
+      features: ['cintura ajustada', 'efecto adelgazante', 'elegante'],
+      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
+    },
+    output: {
+      generatedTitle: ' Quien se lo ponga se vera genial! Este vestido floral frances es realmente increible ',
+      generatedCopy:
+        ' Chicas! Este vestido realmente estiliza muchisimo! El diseno de cintura ajustada es increible, te da forma al instante. La tela es muy transpirable, no sofoca en verano. Primera opcion para citas y paseos!',
+      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
+    },
+    createdAt: '2026-01-20T10:00:00Z'
+  },
+  {
+    id: 'task_002',
+    name: 'Auriculares Bluetooth Pro con cancelacion de ruido superpotente',
+    status: 'completed',
+    input: {
+      category: 'Tecnologia',
+      features: ['cancelacion de ruido', 'bateria extralarga', 'baja latencia'],
+      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
+    },
+    output: {
+      generatedTitle: ' Finalmente los encontre! La cancelacion de ruido de estos auriculares es brutal! ',
+      generatedCopy:
+        'Ponetelos y el mundo se silencia al instante. Calidad de sonido increible, escuchar musica es como estar en vivo. La bateria tambien es impresionante, una carga dura una semana! Imprescindible para estudiantes!',
+      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
+    },
+    createdAt: '2026-01-21T14:30:00Z'
+  }
+  // ... mas datos
+]
+```
+
+### 2.3 (Avanzado) Usar LocalStorage para implementar "falsas operaciones CRUD"
+
+Si deseas que los "datos de simulacion" generados no solo se puedan ver, sino que tambien se puedan eliminar y modificar, e incluso que las tareas recien generadas persistan despues de actualizar la pagina, puedes combinarlo con `LocalStorage`.
+
+> **Ejemplo de prompt:**
+> "Por favor ayudame a implementar una funcion de almacenamiento de datos.
+>
+> 1. Lee primero los datos desde `localStorage`.
+> 2. Si `localStorage` esta vacio, inicializa con los datos Mock generados anteriormente y guardalos en `localStorage`.
+> 3. Al mismo tiempo ayudame a escribir las funciones `addProductTask` y `deleteProductTask`, que deben sincronizar los cambios con `localStorage` en cada operacion."
+
+Con este paso, tu prototipo tendra "memoria", y la experiencia del usuario sera practicamente identica a la de un producto real.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
+      { title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
+      { title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
+      { title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Recopilar retroalimentacion e iterar rapidamente
+
+No se pueden hacer buenos productos a puerta cerrada. Ahora tu prototipo ya tiene "funcionalidad central" + "flujo completo" + "datos de demostracion"; es hora de mostrarselo a otros.
+
+### 3.1 Con quien probar? Como probar?
+
+- **Busca amigos/colegas**: no necesitan entender de tecnologia, solo necesitan intentar usarlo.
+- **Observa en lugar de guiar**: no digas "haz clic aqui", sino mira adonde hacen clic ellos. Si no encuentran un boton, es que el diseno tiene un problema.
+- **Metodo "Wizard of Oz"**: si tu IA aun no esta bien conectada, puedes modificar manualmente los datos en segundo plano (o en la base de datos) para simular la respuesta de la IA, verificando primero si el usuario realmente necesita esta funcionalidad.
+
+### 3.2 Ante bugs y criticas
+
+- **Estilos desordenados**: pueden desordenarse en diferentes tamanos de pantalla.
+  - **Accion**: haz una captura de pantalla y enviala al AI IDE -> "En este ancho de pantalla esta desordenado, ayudame a arreglarlo."
+- **Operacion incomoda**: "Este flujo es demasiado complicado".
+  - **Accion**: dile la sugerencia al AI IDE -> "El usuario cree que subir primero y luego generar es muy lento, se puede cambiar a generacion con un solo clic?"
+- **Nuevas necesidades**: "Si tuviera esta funcionalidad seria genial".
+  - **Accion**: evalua si es esencial; si lo es, haz que la IA implemente rapidamente una version simplificada.
+
+**Recuerda: en esta etapa, la IA es tu mejor asistente de modificaciones. Tu solo necesitas encargarte de descubrir los problemas; las modificaciones de codigo dejaselas a ella.**
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Completar el flujo', description: 'De funcionalidad aislada a ciclo completo' },
+      { title: 'Inyectar el alma', description: 'Datos de negocio realistas simulados' },
+      { title: 'Iterar con retroalimentacion', description: 'Mejorar la experiencia con retroalimentacion real' },
+      { title: 'Proyecto final', description: 'Tu proyecto de graduacion' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. Proyecto final de la etapa: completa tu "proyecto de graduacion"
+
+Felicidades! Has completado todo el proceso desde los "requisitos" hasta el "prototipo" y despues la "integracion de IA". Ahora es el momento de mostrar tu resultado final.
+
+**Este proyecto final no se limita al "espacio de trabajo de materiales de e-commerce".** Necesitas combinar tus propios intereses o experiencia profesional para crear un prototipo de producto IA unico.
+
+### Seleccion de tema y requisitos
+
+Necesitas elegir el escenario mas cercano de la **[referencia de escenarios por categoria de industria](../appendix-industry-scenarios/index.md)**, o concebir un escenario completamente nuevo basandote en tus propias ideas.
+
+**El proyecto debe utilizar de manera integral todo lo aprendido en las lecciones anteriores:**
+
+1.  **Construccion del prototipo**: usa tecnologia frontend para construir una interfaz bonita y facil de usar.
+2.  **Control de requisitos**: no busques algo exhaustivo, pero si que la funcionalidad central forme un ciclo logico cerrado.
+3.  **Integracion de API**: integra modelos de IA reales (LLM/VLM, etc.), dotando a la aplicacion de verdadera inteligencia.
+4.  **Implementar una aplicacion funcional**: no solo paginas estaticas, sino una aplicacion dinamica con flujo de datos y retroalimentacion interactiva.
+
+### Entregables
+
+Al final necesitas entregar los dos siguientes elementos:
+
+1.  **Una aplicacion de prototipo completa**: desplegada en linea o ejecutable localmente, con un flujo de uso completo.
+2.  **Un video de demostracion de 30 segundos**: graba un video presentando brevemente el escenario de tu aplicacion y demostrando la operacion real de la funcionalidad central.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Lista de verificacion del desafio final</div>
+  </template>
+
+  <p>
+    Esta es la ultima batalla del Stage 1. Por favor revisa tu proyecto segun la siguiente lista:
+  </p>
+
+  <div style="font-weight: bold; margin-bottom: 10px;">Autoverificacion de funcionalidad central</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Escenario claro</strong>: has seleccionado una industria o escenario de aplicacion concreto</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Ciclo logico cerrado</strong>: el flujo central funciona, no solo el Happy Path</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Impulsado por IA</strong>: se ha llamado realmente a la API de un modelo grande, no respuestas predefinidas</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Experiencia completa</strong>: incluye Loading, manejo de errores y datos de simulacion</label></li>
+  </ul>
+
+  <div style="font-weight: bold; margin: 20px 0 10px;">Preparacion de entregables</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Aplicacion de prototipo</strong>: el codigo esta completo y puede ejecutarse</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Video de demostracion</strong>: unos 30 segundos, mostrando claramente los puntos destacados centrales</label></li>
+  </ul>
+</el-card>
+
+## Proximo paso
+
+Despues de completar el proyecto final, ya tienes la capacidad de "desarrollar independientemente un prototipo de aplicacion IA".
+En el siguiente Stage 2, profundizaremos en el desarrollo fullstack mas complejo, aprendiendo como convertir este prototipo en una aplicacion de nivel comercial que realmente pueda ponerse en linea, con base de datos y sistema de usuarios.
+
+Nos vemos en la siguiente etapa!
+
+<RelatedArticlesSection
+  title="Sigue avanzando"
+  description="Felicidades por completar el Stage 1. Estos capitulos pueden ayudarte a entrar en el desarrollo de ingenieria."
+  :items="relatedArticles"
+/>
diff --git a/docs/es-es/stage-1/finding-great-idea/index.md b/docs/es-es/stage-1/finding-great-idea/index.md
new file mode 100644
index 0000000..a382f1e
--- /dev/null
+++ b/docs/es-es/stage-1/finding-great-idea/index.md
@@ -0,0 +1,139 @@
+---
+title: 'Encontrar buenas ideas - De las necesidades de los usuarios a quienes estan dispuestos a pagar'
+description: 'Aprende a descubrir oportunidades a partir de dolores cotidianos, evaluar si alguien pagara y convertir una idea en un concepto de producto ejecutable.'
+---
+
+<script setup>
+const duration = 'Aprox. <strong>3 horas</strong>'
+</script>
+
+# Principiante 2: Encontrar buenas ideas
+
+## Introduccion del capitulo
+
+<ChapterIntroduction :duration="duration" :tags="['Descubrimiento de necesidades', 'Pensamiento de producto', 'Analisis de usuarios', 'Modelo de negocio']" coreOutput="3 conceptos de producto validados" expectedOutput="Una direccion de emprendimiento/producto ejecutable">
+
+Ya aprendiste a construir con un AI IDE, pero la pregunta mas importante es: <strong>que construir?</strong>
+
+Mucha gente empieza con "hagamos una herramienta de IA" o "montemos una plataforma social" y termina con algo que nadie usa. El motivo mas comun es simple: <strong>no habia una necesidad real</strong>.
+
+Incluso si el producto resuelve algo, todavia queda la parte dificil: <strong>que el usuario pague</strong>.
+
+En este capitulo, a traves de un caso y un conjunto de marcos practicos, aprenderas un metodo para encontrar ideas y convertirlas en conceptos validables.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Step 1', description: 'Definir criterios' },
+      { title: 'Step 2', description: 'Encontrar dolores cotidianos' },
+      { title: 'Step 3', description: 'Segmentar audiencias' },
+      { title: 'Step 4', description: 'Profundizar escenarios' },
+      { title: 'Step 5', description: 'Validar si es real' },
+      { title: 'Step 6', description: 'Pulir el concepto' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Step 1: Definir criterios (cuando paga la gente?)
+
+Un error tipico es evaluar ideas por "me gusta" o "suena bien". Lo que buscamos es <strong>voluntad de pago</strong>.
+
+Usa este checklist:
+
+1. Dolor fuerte: frecuente, caro, riesgoso o estresante.
+2. Usuario claro: puedes describir quien es en una frase.
+3. Escenario concreto: cuando y donde ocurre el problema.
+4. Alternativas malas: hoy se resuelve con friccion o con soluciones incompletas.
+5. Beneficio medible: ahorra tiempo/dinero, reduce riesgo o aumenta ingresos.
+
+::: warning Importante
+No preguntes "Usarias esto?" Esa pregunta produce falsos positivos.
+Pregunta por comportamiento real: "Como lo resuelves hoy?", "Cuantas veces te paso esta semana?", "Cuanto te costo en tiempo o dinero?"
+:::
+
+## Step 2: Encontrar dolores cotidianos
+
+Las mejores ideas vienen de problemas repetidos.
+
+Fuentes practicas:
+
+- Tu trabajo: reportes, coordinacion, aprobaciones, QA, despliegues.
+- Tu vida: salud, finanzas, estudio, viajes, familia.
+- Nichos: industria con regulacion, facturacion, soporte, operaciones.
+
+Ejercicio rapido:
+
+1. Escribe 20 molestias reales que hayas visto en el ultimo mes.
+2. Elige 5 que ocurran semanalmente.
+3. Para cada una, anota quien lo sufre y que alternativa usa hoy.
+
+## Step 3: Segmentar audiencias (horizontal)
+
+Un mismo problema tiene distinta voluntad de pago segun la persona.
+
+Ejemplo: "organizar archivos" no paga casi nadie; pero "organizar documentos para auditoria" lo paga una empresa.
+
+Hazlo asi:
+
+1. Lista 3-5 grupos posibles de usuarios.
+2. Para cada grupo, define: objetivo, contexto, restricciones, presupuesto.
+3. Elige 1 grupo donde el dolor sea mas caro o mas urgente.
+
+## Step 4: Profundizar escenarios (vertical)
+
+No disenes "una app". Disena <strong>un flujo</strong> que resuelva un escenario completo.
+
+Plantilla:
+
+- Disparador: que pasa para que el usuario necesite la solucion?
+- Pasos actuales: que hace hoy (y que le molesta)?
+- Momento de valor: en que minuto entiende que le ahorraste algo?
+- Resultado: que cambia al final?
+
+## Step 5: Validar si es real (antes de construir)
+
+Objetivo: validar 2 cosas.
+
+1. Existe el problema (frecuencia e impacto).
+2. Existe voluntad de pago o al menos una accion fuerte (dejar email, reservar, prepagar).
+
+Metodos de bajo costo:
+
+- 10 entrevistas con usuarios objetivo (30 min cada una).
+- Landing simple con propuesta de valor y CTA (lista de espera / reserva).
+- Demo clickable o prototipo y medir conversion.
+- Pre-venta o deposito (la validacion mas honesta).
+
+## Step 6: Pulir el concepto con IA
+
+Aqui la IA ayuda a convertir una intuicion en un concepto ejecutable.
+
+Prompt para copiar:
+
+```text
+Actua como consultor de producto. Quiero refinar una idea.
+1) Usuario objetivo:
+2) Dolor principal:
+3) Escenario concreto (cuando/donde):
+4) Solucion actual y por que es mala:
+5) Propuesta de valor en una frase:
+6) MVP en 7 dias:
+7) Riesgos/objeciones:
+8) Plan de validacion y metricas:
+Devuelveme: (a) concepto pulido, (b) alcance del MVP, (c) plan de validacion en 7 dias.
+```
+
+## Salida esperada: 3 conceptos de producto
+
+Al final, deberias tener 3 conceptos, cada uno con:
+
+- Usuario objetivo claro
+- Problema concreto
+- Propuesta de valor en una frase
+- MVP (1-2 semanas)
+- Experimento de validacion y metricas
+
+<RelatedArticlesSection />
+
diff --git a/docs/es-es/stage-1/integrating-ai-capabilities/index.md b/docs/es-es/stage-1/integrating-ai-capabilities/index.md
new file mode 100644
index 0000000..477df38
--- /dev/null
+++ b/docs/es-es/stage-1/integrating-ai-capabilities/index.md
@@ -0,0 +1,808 @@
+---
+title: 'Anadiendo capacidades de IA al prototipo - Integracion de APIs de texto e imagen'
+description: 'Integra capacidades reales de IA en tu prototipo web: comprende los conceptos centrales de API, aprende a encontrar API Keys y ejemplos oficiales.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'aprox. <strong>1 dia</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/integrating-ai-capabilities'] ?? []
+</script>
+
+# Nivel inicial 4: Incorporar capacidades de IA al prototipo
+
+## Introduccion del capitulo
+
+<ChapterIntroduction :duration="duration" :tags="['API', 'Modelo de texto', 'Generacion de imagenes', 'Integracion de prototipo']" coreOutput="Conectar el prototipo con 1 modelo de texto + 1 modelo de imagen opcional" expectedOutput="Un prototipo de IA que puede llamar APIs reales">
+
+En los capitulos anteriores completamos el flujo completo desde <strong>encontrar una buena idea</strong> hasta <strong>crear un prototipo de producto</strong>. Pero por ahora el prototipo sigue siendo solo una "carcasa": al hacer clic en los botones no se genera contenido real y los datos de la pagina estan escritos de forma fija.
+
+Recuerda lo que enfatizamos en el primer capitulo: <strong>queremos crear "productos por los que alguien estaria dispuesto a pagar", no "prototipos que solo parecen decentes".</strong> El valor real viene de que el producto pueda <strong>resolver problemas reales</strong>, y para lograrlo el prototipo debe <strong>funcionar de verdad</strong>.
+
+Este capitulo hara que el prototipo <strong>"cobre vida"</strong>: conectaremos <strong>capacidades reales de IA</strong>, desde obtener una API Key hasta leer la documentacion oficial y pedir al AI IDE que integre la interfaz en el codigo. Usaremos el <strong>modelo de texto DeepSeek</strong> como ejemplo para aprender como hacer que una aplicacion <strong>llame de verdad a un modelo grande para generar contenido</strong>; si te interesa, tambien puedes hacer de forma opcional la <strong>integracion de generacion de imagenes</strong>.
+
+Al terminar este capitulo, tu prototipo <strong>dejara de ser una demo estatica</strong> y se convertira en <strong>una aplicacion capaz de llamar capacidades reales de IA y resolver problemas reales</strong>.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
+      { title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
+      { title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 1. Conceptos basicos de API
+
+Como mencionamos antes, nuestro objetivo es "conectar capacidades de IA" para que el prototipo deje de ser una demo estatica y se convierta en una herramienta capaz de llamar servicios reales de IA. La clave para lograrlo es entender y usar APIs.
+
+API es un concepto abstracto importante en informatica. Podemos entenderlo de forma simple asi: **envias una pregunta en el formato que la otra parte exige, y la otra parte devuelve un resultado en un formato acordado**.
+
+- **Lo que envias**: normalmente incluye una "clave (API Key)" y "lo que quieres generar"
+- **Lo que recibes**: si todo sale bien, devuelve el resultado; si falla, indica la causa, por ejemplo "clave incorrecta", "saldo insuficiente" o "parametro mal escrito"
+
+En concreto, necesitas dominar estos elementos centrales:
+
+1. **API Key**: tu "pase de acceso" y tambien la "llave de tu cartera". Si otra persona la obtiene, puede llamar la API en tu nombre y generar costes.
+2. **Endpoint (ruta de interfaz)**: la ruta concreta de una solicitud API, que indica al servidor que funcion quieres usar. La direccion completa suele componerse de "URL base + endpoint". Por ejemplo:
+   - Generacion de texto: URL base (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = URL completa `https://api.service.com/v1/chat/completions`
+   - Generacion de imagenes: URL base (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = URL completa `https://api.service.com/v1/images/generations`
+3. **Llamada/solicitud**: el proceso de enviar una tarea a un servicio de IA y obtener el resultado.
+4. **Contenido de la solicitud**: el contenido concreto que envias a la IA, por ejemplo el tema del articulo que quieres que escriba o la descripcion de la imagen que quieres generar.
+5. **Resultado de respuesta**: lo que la IA devuelve tras procesar la solicitud, por ejemplo un articulo o una imagen generada.
+6. **Manejo de errores**: saber diagnosticar y resolver problemas como API Key incorrecta o demasiadas solicitudes.
+
+::: info ℹ️ Que es una API
+Para una explicacion mas profunda de API, consulta el apendice: [Introduccion a API](/es-es/appendix/4-server-and-backend/api-intro).
+
+::: warning 🔐 **Notas de seguridad sobre API**
+La API Key es tu "pase de acceso" para solicitar servicios de IA. Es una cadena secreta usada para autenticacion y facturacion.
+
+Como la API Key esta directamente vinculada a tu cuenta y costes, presta especial atencion:
+
+- Nunca la **compartas en chats grupales, subas capturas a internet** ni la publiques en foros abiertos.
+- **No la hardcodees en el codigo** ni la subas a un repositorio Git, especialmente si es publico.
+- Si sospechas que la clave se filtro, **reemplazala de inmediato**.
+
+En los siguientes pasos **pegaremos directamente la API KEY en el AI IDE para practicar**. **No hagas esto en un proyecto formal.** Aqui lo hacemos solo porque es un ejercicio. Cuando tengas mas soltura, puedes pedir a la IA que genere un archivo de configuracion y poner la API KEY alli.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
+      { title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
+      { title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 2. Conectar una API de generacion de texto: DeepSeek
+
+Aunque API implica estos conceptos tecnicos, en la etapa de prototipado la operacion real puede ser muy simple y eficiente. La idea central es:
+
+> **Encontrar el ejemplo oficial, obtener la API Key y pedir al AI IDE que la conecte al boton.**
+
+Cuando entiendas estos conceptos, veras que conectar un modelo de texto o un modelo de imagen sigue esencialmente el mismo flujo: cuando el usuario hace clic en un boton, el frontend organiza la entrada y envia una solicitud; cuando la interfaz devuelve el resultado, lo muestra en la pagina. A continuacion lo comprobaremos con una practica real.
+
+En `1.2 Crear un prototipo con tus manos`, ya construiste un prototipo interactivo. Ahora vamos a convertir las funciones que "parecen IA" en capacidades realmente utilizables: **cuando el usuario haga clic en un boton, el prototipo enviara una solicitud a un servicio externo de IA y mostrara el texto devuelto.**
+
+::: info ℹ️ Ampliacion conceptual
+Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos de lenguaje grandes (LLM)](/es-es/appendix/8-artificial-intelligence/llm-principles).
+::: details Saber mas: que es DeepSeek
+
+**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, que opera bajo la marca DeepSeek, es una **empresa china de inteligencia artificial dedicada al desarrollo de modelos de lenguaje grandes (LLMs)**. DeepSeek tiene sede en Hangzhou, Zhejiang, y pertenece al fondo cuantitativo chino High-Flyer, que tambien la financia. Fue fundada en julio de 2023 por Liang Wenfeng, cofundador de High-Flyer, quien tambien es CEO de ambas companias. En enero de 2025 lanzo su chatbot homonimo y el modelo DeepSeek-R1.
+
+Veamos como se compara DeepSeek con otros modelos lideres en el benchmark GPQA. Cabe destacar que DeepSeek es un modelo open source, es decir, cualquiera puede descargarlo desde internet, mientras que otros modelos comunes como Grok, Google Gemini y ChatGPT son cerrados. Como se puede observar, DeepSeek ya se acerca bastante al primer grupo de modelos.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
+
+GPQA significa "Graduate-Level Google-Proof Q&A Benchmark". Es un benchmark de nivel posgrado para tareas de preguntas y respuestas cientificas. A continuacion va una explicacion mas detallada.
+
+GPQA contiene 448 preguntas de opcion multiple que cubren subcampos de biologia, fisica y quimica, como mecanica cuantica, quimica organica y biologia molecular. Las preguntas fueron redactadas por 61 expertos con doctorado o en proceso de doctorado y pasaron por un proceso estricto de verificacion.
+:::
+
+Con estos 3 pasos puedes integrar rapidamente una API de generacion con modelo grande:
+
+1. **Crear una API Key en la plataforma de DeepSeek**
+2. **Encontrar el ejemplo de generacion de texto en la documentacion de DeepSeek** (normalmente hay codigo listo para copiar)
+3. **Abrir el AI IDE, pegar la API Key + el ejemplo oficial** y decirle a la IA que funcion debe implementar:
+   > Ayudame a conectar esta API del modelo grande para soportar la tarea de generacion de copy en esta aplicacion
+
+A continuacion haremos una demostracion. Puedes seguir el flujo completo paso a paso. Primero registra una cuenta en [DeepSeek](https://platform.deepseek.com/usage), crea una API Key y recarga una pequena cantidad para verificar la llamada.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
+
+Haz clic en "API KEYS" y busca "create new API key" en la parte inferior de la pantalla. Al final obtendras una API key parecida a `sk-8573341c39fc44315aadc071c53rh7d2`.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
+
+Una vez obtenida la clave, ya tienes permiso para llamar al modelo.
+
+En este punto puedes leer directamente la documentacion de [API](https://api-docs.deepseek.com/), que normalmente ofrece ejemplos de llamada con curl o Python.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
+
+Despues de encontrar el ejemplo, puedes copiar el contenido de la documentacion y la clave en el cuadro de dialogo del AI IDE, y pedirle que integre el modelo grande en el prototipo que ya desarrollaste.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
+
+Puedes usar como referencia este prompt:
+
+```
+Toma como referencia este metodo de llamada y ayudame a soportar una funcion de generacion de copy. Debe poder generar copy de ecommerce para Douyin/TikTok a partir de la informacion del producto al hacer clic, con varios estilos.
+
+Material de referencia:
+api key：sk-8573341c39aefa1efe
+Referencia de solicitud API:
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+Tras un rato de generacion de codigo por parte de la IA, normalmente obtendremos facilmente un boton de generacion de copy para probar. Si no encuentras la entrada, puedes pedir al AI IDE que te indique desde que pagina se accede; si aun asi no la encuentras, puedes pedirle que refactorice y mejore directamente segun tu idea hasta obtener el resultado final de generacion de copy.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
+
+Puede que aqui te preguntes: como se si realmente esta llamando al modelo grande y no solo usando respuestas fijas integradas? Puedes introducir un copy personalizado y pedir al modelo que genere el resultado segun el analisis personalizado que acabas de especificar.
+
+Si ves que cada resultado es diferente y logicamente coherente, puedes considerar que la API ya se esta llamando correctamente. Tambien puedes revisar en la [plataforma de gestion de uso de API](https://platform.deepseek.com/usage) si la llamada fue exitosa, aunque puede tardar unos minutos en aparecer.
+
+## Mas opciones de modelos de generacion de texto
+
+Ademas de DeepSeek, tambien puedes probar otros modelos de lenguaje grandes. Como la mayoria ofrece **interfaces compatibles con OpenAI**, cambiar de modelo es muy sencillo: solo necesitas sustituir la API Key, la URL base y el nombre del modelo.
+
+### Integracion de MiniMax
+
+::: details Saber mas: que es MiniMax
+
+**MiniMax** es una empresa china de inteligencia artificial dedicada a la investigacion y desarrollo de tecnologias de inteligencia artificial general. MiniMax lanzo su propia serie de modelos de lenguaje grandes MiniMax-M2.7, que ha mostrado buen rendimiento en varios benchmarks y ofrece una relacion coste-rendimiento muy alta.
+
+**Principales caracteristicas de la serie MiniMax-M2.7:**
+
+- **Contexto ultralargo**: soporta una ventana de contexto de 204,800 tokens, adecuada para documentos largos y conversaciones de multiples turnos.
+- **Alta relacion coste-rendimiento**: precio muy competitivo.
+- **Interfaz compatible con OpenAI**: se puede llamar directamente con el OpenAI SDK sin aprender un nuevo formato de API.
+- **Dos modelos disponibles**:
+  - `MiniMax-M2.7`: modelo insignia, adecuado para tareas complejas.
+  - `MiniMax-M2.7-highspeed`: version de alta velocidad, con rendimiento similar pero mas rapida.
+:::
+
+La forma de integrarlo es igual que DeepSeek y solo requiere tres pasos:
+
+1. Ir a la [plataforma abierta de MiniMax](https://platform.minimax.io/), registrar una cuenta y crear una API Key.
+2. Encontrar un ejemplo de llamada en la documentacion de MiniMax.
+3. Pegar la API Key + el ejemplo en el AI IDE.
+
+Como MiniMax ofrece una interfaz compatible con OpenAI, puedes copiar directamente el siguiente ejemplo curl junto con tu API Key y enviarlo al AI IDE para integrarlo:
+
+```bash
+curl https://api.minimax.io/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${MINIMAX_API_KEY}" \
+  -d '{
+        "model": "MiniMax-M2.7",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+::: tip ✅ Consejo
+El formato de API de MiniMax es casi identico al de DeepSeek, ya que ambos son compatibles con OpenAI. Si ya integraste DeepSeek correctamente, cambiar a MiniMax solo requiere modificar tres lugares:
+1. **URL base**: cambiarla a `https://api.minimax.io/v1`
+2. **API Key**: usar la API Key de MiniMax
+3. **Nombre del modelo**: cambiarlo a `MiniMax-M2.7` o `MiniMax-M2.7-highspeed`
+
+Para mas informacion, consulta la [documentacion de la interfaz compatible con OpenAI de MiniMax](https://platform.minimax.io/docs/api-reference/text-openai-api).
+:::
+
+# 3. Conectar una API de imagen a texto: Qwen3 VL
+
+::: info ℹ️ Ampliacion conceptual
+Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos vision-lenguaje (VLM)](/es-es/appendix/8-artificial-intelligence/multimodal-models).
+
+::: details Saber mas: que es Qwen3 VL
+
+**Qwen3 VL** es la version mas reciente de la serie de modelos multimodales vision-lenguaje lanzada por el equipo Tongyi Qianwen de Alibaba Cloud. VL significa "Vision-Language", es decir, modelo vision-lenguaje. Puede entender el contenido de una imagen, generar descripciones textuales a partir de imagenes, responder preguntas sobre imagenes y extraer informacion visual.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
+
+**Las principales capacidades de Qwen3 VL incluyen:**
+
+- **Comprension de imagenes**: identifica objetos, escenas, personas, texto y otros contenidos dentro de una imagen.
+- **Preguntas y respuestas visuales**: responde con precision preguntas del usuario sobre una imagen.
+- **Descripcion de imagenes**: genera descripciones textuales detalladas o concisas.
+- **Comprension de multiples imagenes**: permite procesar varias imagenes a la vez para compararlas.
+- **Extraccion de texto**: extrae texto de imagenes mediante capacidades OCR.
+
+**Por que elegir Qwen3 VL?**
+
+Comparado con la generacion anterior, Qwen3 VL mejora de forma notable la precision de comprension de imagenes y soporta tareas de analisis visual mas largas y complejas. Tiene buen rendimiento en comprension de chino, costes de API relativamente bajos y una buena relacion coste-rendimiento. Ademas, su ventana de contexto es mayor y puede manejar tareas de razonamiento visual mas complejas.
+
+**Escenarios de uso tipicos:**
+
+- Ecommerce: generar automaticamente titulos, descripciones y puntos de venta a partir de imagenes de producto.
+- Creacion de contenido: generar copy o sugerencias visuales a partir de imagenes de material.
+- Oficina: extraer contenido de imagenes y reconocer informes automaticamente.
+- Educacion: analizar automaticamente preguntas en imagenes y extraer puntos de conocimiento.
+
+:::
+
+En la seccion anterior explicamos como conectar una API de generacion de texto. Pero en nuestros escenarios anteriores aparece un problema: subimos una imagen, y si usamos solo un modelo de lenguaje, no puede entender bien el contenido visual, por lo que el resultado generado puede desviarse bastante.
+
+Queremos un modelo que nos ayude a convertir una imagen en descripcion textual. Para eso necesitamos un modelo vision-lenguaje (VLM). En este caso, usaremos un VLM para generar descripciones de puntos de venta del producto y mejorar la experiencia de usuario.
+
+Para simplificar, usaremos la API ofrecida por la [plataforma cloud SiliconFlow](https://cloud.siliconflow.cn/me) para conectar una API de imagen a texto.
+
+::: details Saber mas: que es SiliconFlow
+**SiliconFlow** es una conocida plataforma china de agregacion de modelos de IA que ofrece servicios API para multiples modelos de lenguaje grandes y modelos vision-lenguaje populares.
+
+**Caracteristicas de la plataforma:**
+
+- **Soporte multimodelo**: integra multiples modelos de IA populares, incluidos modelos open source como DeepSeek, Qwen y la serie Llama.
+- **Optimizacion tecnica**: optimiza la inferencia de modelos open source y ofrece servicios API de baja latencia y alta concurrencia.
+- **Compatibilidad de interfaz**: ofrece APIs compatibles con el formato OpenAI, facilitando la integracion en aplicaciones existentes.
+- **Pago bajo demanda**: permite facturacion por volumen de llamadas.
+
+SiliconFlow esta relativamente maduro en servicios de inferencia para modelos open source y es una opcion comun para usar modelos chinos open source de IA.
+:::
+
+Al entrar en la pagina principal de SiliconFlow, veras muchos modelos disponibles. Busca el filtro en la esquina superior izquierda, abrelo y selecciona la etiqueta de vision. Alli veras muchos modelos de imagen a texto, por ejemplo GLM-4.6V de Zhipu o Qwen3-VL.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
+
+Puedes elegir cualquiera para probar. Aqui usaremos `Qwen/Qwen3-VL-8B-Instruct` como ejemplo.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
+
+Entra en la [plataforma SiliconFlow](https://cloud.siliconflow.cn/me/account/ak), haz clic en "Crear nueva API Key" dentro de la seccion de claves API y crea una nueva API Key.
+
+Puedes usar directamente el siguiente codigo como referencia y enviarlo junto con la API Key generada al AI IDE para integrar la funcion.
+
+::: details Codigo de referencia de imagen a texto
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+```
+
+:::
+
+En este escenario, probamos directamente pedir al AI IDE que implemente una funcion para generar automaticamente texto de puntos de venta ecommerce y palabras clave a partir de una imagen subida, como se muestra a continuacion:
+
+```
+Basandote en la siguiente API de imagen a texto, ayudanos a implementar una funcion que genere automaticamente texto de puntos de venta ecommerce y palabras clave a partir de imagenes subidas.
+
+<Codigo omitido aqui; debes pegar por tu cuenta la clave y el codigo de referencia>
+```
+
+Finalmente se obtiene el resultado generado:
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Bases de API', description: 'Comprender conceptos clave y normas de seguridad' },
+      { title: 'Conectar texto', description: 'Practica de generacion de texto con DeepSeek' },
+      { title: 'Conectar imagenes', description: 'Comprension y generacion de imagenes con VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 4. Conectar una API de generacion de imagenes: Seedream
+
+En las secciones anteriores trabajamos principalmente con tareas relacionadas con texto. Ahora intentaremos conectar capacidades de generacion de imagenes, para soportar generar imagenes desde descripciones de texto o modificar imagenes existentes.
+
+::: info ℹ️ Ampliacion conceptual
+Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a la generacion de imagenes](/es-es/appendix/8-artificial-intelligence/image-generation).
+
+::: details Saber mas: que es [Seedream](https://seed.bytedance.com/en/seedream4_5)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png)
+
+> Tal vez ya conozcas Nano Banana, desarrollado por Google, pero no conviene pasar por alto Seedream. Seedream 4.5 es una nueva generacion de modelo de creacion de imagenes desarrollada por ByteDance. Integra generacion y edicion de imagenes en una arquitectura unificada, lo que le permite manejar de forma flexible tareas multimodales complejas, como generacion basada en conocimiento, razonamiento complejo y consistencia con referencias. Ademas, su velocidad de inferencia es mucho mayor que la generacion anterior y puede generar imagenes HD impresionantes con resolucion de hasta 4K.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png)
+
+**Capacidades principales:**
+
+- **Texto a imagen**: genera imagenes a partir de descripciones textuales y soporta varios estilos, como realista, cartoon, tinta china o cyberpunk.
+- **Transferencia de estilo**: convierte una imagen a un estilo artistico especificado.
+- **Variantes de imagen**: genera nuevas imagenes de estilo similar basadas en una referencia.
+- **Mejora de resolucion**: aumenta claridad y detalles.
+- **Edicion de imagenes**: edita y modifica imagenes existentes mediante instrucciones en lenguaje natural.
+
+**Por que elegir Seedream?**
+
+- **Red estable en China**: acceso rapido y baja latencia dentro de China.
+- **Buenos resultados**: rendimiento estable y fiable en ecommerce y escenarios de material visual.
+- **Optimizacion para chino**: comprende mejor prompts en chino, adecuado para usuarios locales.
+- **Rapidez**: alta eficiencia de generacion y tiempos de respuesta cortos.
+- **Calidad estable**: genera imagenes HD de hasta 4K.
+
+**Escenarios de uso tipicos:**
+
+- Ecommerce: generar imagen principal, imagenes para pagina de detalle y posters promocionales.
+- Redes sociales: generar avatar, stickers e imagenes de apoyo.
+- Diseno: producir rapidamente conceptos, materiales y fondos.
+- Marketing: crear anuncios, banners de campana y posters festivos.
+
+**Combinacion con Qwen3 VL:**
+
+Estas dos APIs pueden encadenarse: primero usar Qwen3 VL para analizar una imagen de referencia y entender su contenido; luego usar Seedream para generar una nueva imagen basandose en el prompt derivado del analisis.
+:::
+
+Muchos "posters de IA / imagenes principales de IA / personajes de IA" que ves en Douyin, Bilibili o YouTube usan esencialmente las tecnologias explicadas en esta seccion. Lo que necesitas hacer es sencillo: convertir la entrada del usuario en una frase, solicitar la API de imagenes y mostrar la imagen devuelta. El modelo usado aqui se llama modelo de generacion/edicion de imagenes.
+
+Mostraremos paso a paso como integrar la API de Seedream en tu proyecto, con ayuda del AI IDE.
+
+Tras [visitar la pagina inicial](https://www.volcengine.com/experience/ark?launch=seedream), haz clic en iniciar sesion.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png)
+
+Despues de iniciar sesion, busca la opcion de recarga en la esquina superior derecha.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png)
+
+Para recargar se requiere verificacion de identidad real.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png)
+
+Tras completar la verificacion, puedes [recargar 1 yuan para pruebas](https://console.volcengine.com/finance/fund/recharge).
+
+Vuelve a la [pantalla inicial](https://www.volcengine.com/experience/ark?launch=seedream) y haz clic en acceso API.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png)
+
+Primero crea una API key y luego haz clic en la opcion de seleccion.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png)
+
+Esto te llevara al paso 2. Alli debes confirmar que el servicio llamado es Seedream 4.5 y copiar el ejemplo de llamada proporcionado. La captura es antigua, por eso la version del modelo aun aparece como 4.0.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png)
+
+Despues de preparar la API Key y el ejemplo de llamada, puedes pegarlos directamente en el AI IDE para que genere una demo de interaccion frontend o integre la capacidad en el prototipo existente. Observa que en la pagina puedes elegir entre texto a imagen o generar una sola imagen a partir de varias imagenes; debes seleccionar el codigo de referencia segun tu necesidad actual.
+
+::: warning ⚠️ Nota importante
+El ejemplo por defecto aqui es relativamente complejo. Recuerda desactivar **"agregar marca de agua"** y **"respuesta en streaming"** para evitar marcas de agua y posibles fallos de solicitud.
+:::
+
+Como luego usaremos el modo de generacion con imagenes de referencia, primero entramos en la funcion de generar una sola imagen a partir de varias imagenes. El codigo de referencia copiado es:
+
+```
+curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer xxxxxxx" \
+  -d '{
+    "model": "doubao-seedream-4-5-251128",
+    "prompt": "Sustituye la ropa de la imagen 1 por la ropa de la imagen 2",
+    "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
+    "sequential_image_generation": "disabled",
+    "response_format": "url",
+    "size": "2K",
+    "stream": false,
+    "watermark": true
+}'
+```
+
+Con el codigo de referencia de imagenes, pedimos al AI IDE que soporte funciones de imagen comunes en ecommerce:
+
+```
+Basandote en la siguiente API, ayudame a implementar en este proyecto funciones comunes de ecommerce, por ejemplo generacion de posters o generacion de imagen principal para ecommerce en Douyin/TikTok.
+
+<Pega aqui la API KEY y el codigo de edicion de imagenes>
+```
+
+El resultado implementado queda asi:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png)
+
+Vale la pena notar que la generacion de imagenes suele encontrarse con problemas raros. Te recomendamos pedir al AI IDE que muestre el mensaje de error completo para poder copiarlo y corregirlo; de lo contrario, puede repetir "generacion fallida" sin decir por que. Por ejemplo, puedes decir:
+
+```
+No muestres solo "fallo la generacion de imagen". Muestra siempre la razon completa del fallo, por ejemplo imagenes no compatibles, error de solicitud, timeout, etc.
+```
+
+A veces los cambios no se aplican en la pagina despues de actualizar. Si ves que la pagina sigue mostrando errores una y otra vez tras modificarla, tambien puedes probar a decir directamente al AI IDE: reinicia este proyecto.
+
+En ecommerce, tal vez queramos que la ropa subida por el usuario se pruebe automaticamente sobre una persona, o generar automaticamente imagenes de venta y posters atractivos para un producto. Aqui probamos un prompt que le pide generar un poster ecommerce:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png)
+
+Puedes usar APIs de texto a imagen o imagen a imagen para implementar distintas funciones segun el escenario de negocio que imagines.
+
+## Mas opciones de servicios de imagen
+
+A continuacion se ofrecen otras opciones. Te recomendamos primero hacer funcionar la generacion de imagenes con Qwen y luego sustituirla por los siguientes servicios segun resultado y coste, de acuerdo con tu experiencia real.
+
+### Integracion de Recraft
+
+Si tu prototipo se orienta mas a "produccion de diseno", por ejemplo generar ilustraciones de estilo de marca, posters de marketing o materiales vectoriales, Recraft suele ser mas comodo. El modo de integracion es identico al de la seccion anterior: **obtener la Key + encontrar el ejemplo oficial + pedir al AI IDE que lleve el ejemplo a tu boton/pagina**.
+
+::: details Saber mas: que es Recraft
+
+> Recraft es una herramienta de IA para disenadores, ilustradores y profesionales de marketing. Fue fundada en Estados Unidos en 2022 y tiene sede en Londres. Ayuda a generar e iterar efectos visuales, como imagenes, arte vectorial y graficos 3D, con ventajas como salidas de alta calidad, posicionamiento preciso de elementos y diseno consistente con la marca. Cuenta con la confianza de mas de 3 millones de usuarios en 200 paises y regiones, incluidos Ogilvy y Netflix, y ya ha creado mas de 350 millones de imagenes. Su equipo busca convertirla en una herramienta imprescindible para disenadores, permitiendo que los creadores controlen sus flujos de trabajo asistidos por IA.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png)
+
+Primero, todavia necesitamos encontrar la [entrada de API](https://www.recraft.ai/profile/api) para obtener una API Key.
+
+Como aqui no hay cuota gratuita, necesitamos recargar 1,000 creditos. El sitio soporta Alipay y WeChat Pay, asi que es facil obtener esos creditos. Nota: no recargues mas de lo necesario.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png)
+
+Despues seguimos el mismo metodo: ir a la documentacion oficial y encontrar el ejemplo de solicitud correspondiente:
+
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
+
+:::
+
+### Integracion de Qwen Image / Qwen Image Edit
+
+Si quieres conectar un servicio de generacion de imagenes de una forma mas simple, puedes considerar Qwen Image. La idea no cambia: tratarlo como una "API de generacion de imagenes" y conectarlo al boton de tu prototipo.
+
+::: details Saber mas: que son Qwen Image / Qwen Image Edit
+
+**Qwen Image** es una serie de modelos de generacion de imagenes lanzada por el equipo Tongyi de Alibaba Cloud. Incluye principalmente dos modelos:
+
+**1. Qwen Image: modelo de texto a imagen (Text-to-Image)**
+
+Genera imagenes completamente nuevas a partir de descripciones textuales. Introduces un prompt, el modelo entiende tu intencion y genera una imagen acorde a la descripcion.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png)
+
+**Capacidades principales:**
+
+- **Texto a imagen**: genera imagenes a partir de descripciones textuales y soporta varios estilos, como realista, cartoon, tinta china o cyberpunk.
+- **Transferencia de estilo**: convierte una imagen a un estilo artistico especificado.
+- **Variantes de imagen**: genera nuevas imagenes de estilo similar basadas en una referencia.
+- **Mejora de resolucion**: aumenta claridad y detalles.
+
+**2. Qwen Image Edit: modelo de imagen a imagen (Image-to-Image)**
+
+Edita y modifica imagenes existentes. Mediante instrucciones en lenguaje natural, el modelo entiende tu intencion de edicion y genera el resultado.
+
+**Capacidades principales:**
+
+- **Reemplazo local**: sustituye un objeto o una persona en la imagen, por ejemplo "cambia el fondo por la playa".
+- **Eliminacion de elementos**: elimina elementos no deseados de la imagen.
+- **Cambio de estilo**: anade filtros o efectos artisticos.
+- **Expansion de imagen**: extiende los bordes de una imagen y genera nuevo contenido.
+- **Retoque inteligente**: embellece automaticamente, ajusta luz y sombras y repara imperfecciones.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png)
+
+**Por que elegir la serie Qwen Image?**
+
+- **Optimizacion para chino**: comprende mejor prompts en chino, adecuado para usuarios locales.
+- **Bajo coste**: mas asequible que muchos competidores internacionales.
+- **Rapidez**: alta eficiencia de generacion y respuesta corta.
+- **Calidad estable**: rendimiento fiable en ecommerce y escenarios de material visual.
+- **Variedad de estilos**: soporta varios estilos artisticos y efectos creativos.
+
+**Escenarios de uso tipicos:**
+
+- Ecommerce: generar imagen principal, imagenes de detalle y posters promocionales.
+- Redes sociales: generar avatar, stickers e imagenes de apoyo.
+- Diseno: producir rapidamente conceptos, materiales y fondos.
+- Marketing: crear anuncios, banners de campana y posters festivos.
+  :::
+
+Consulta el sitio oficial de [SiliconFlow](https://siliconflow.cn/). En la parte izquierda hay una seccion "Playground", donde puedes probar distintos modelos sin hacer llamadas API. En la parte superior de la pagina hay un boton "Filters"; al hacer clic puedes filtrar la lista de modelos de la derecha.
+
+Si eliges "Image", veras solo los modelos de texto a imagen soportados actualmente. En este caso usaremos Qwen/Qwen-Image.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png)
+
+Tras completar la configuracion, necesitamos consultar la documentacion correspondiente de API de generacion de imagenes. En la documentacion oficial puedes encontrar una seccion marcada como "API Reference". Haz clic alli, navega a la [seccion de API de generacion de imagenes](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) y busca el ejemplo de solicitud correspondiente.
+
+Puedes enviar el siguiente ejemplo de solicitud junto con la API KEY al AI IDE para implementar la funcion de generacion de imagenes.
+
+```bash
+curl --request POST \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
+  --header 'Content-Type: application/json' \
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
+  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
+}
+'
+```
+
+El modelo aqui puede ser Qwen/Qwen-Image o Qwen/Qwen-Image-Edit-2509.
+
+::: details Codigo de referencia para edicion de imagenes
+
+Copia el siguiente codigo y la key, y envialos juntos al AI IDE:
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+
+prompt: str = "Convierte el cielo en un atardecer, con luna y estrellas, estilo onirico"
+negative_prompt: str = "borroso, baja calidad, deformado"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+
+:::
+
+# Apendice: como encontrar modelos de IA "mas fuertes actualmente"
+
+Los modelos de texto, tambien llamados con frecuencia "modelos de lenguaje grandes", evolucionan muy rapido. Siempre necesitamos asegurarnos de usar uno de los modelos con mejor rendimiento. Con los dos sitios siguientes puedes ver facilmente que modelos son mas usados y mejor valorados actualmente.
+
+En general, estos sitios pueden entenderse como **"arenas de modelos"**: ponen juntas las salidas de dos modelos y votas por la que prefieres. Un modelo con mas votos suele significar que mas personas lo consideran "mas util".
+
+Ademas, a veces puedes ver modelos anonimos misteriosos ("Unknown Model") en estas arenas. Normalmente significa que alguien ha incluido discretamente un "modelo interno de prueba" para evaluacion ciega, y tal vez tengas la oportunidad de experimentar capacidades mas fuertes antes de tiempo.
+
+## LMArena
+
+Sitio web: <https://lmarena.ai/>
+
+LMArena es mas adecuado para juzgar "que respuesta de modelo prefiere la mayoria". Cuantos mas votos y mayor puntuacion, normalmente mas estable es en escenarios reales.
+
+Una forma simple de usarlo:
+
+1. Mira directamente el ranking (Leaderboard)
+2. Elige primero el area que necesitas, por ejemplo conversacion general, programacion o vision
+3. Dentro del Top 3, elige el que puedas usar: accesible, coste aceptable y latencia aceptable
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png)
+
+## Artificial Analysis
+
+Sitio web: <https://artificialanalysis.ai/>
+
+Artificial Analysis es mas adecuado para comparar "calidad / precio / velocidad" en una misma tabla. Puedes tratarlo como una tabla de parametros para seleccionar modelos.
+
+Uso habitual:
+
+1. Encuentra la categoria de modelo que te interesa, por ejemplo texto o generacion de imagenes
+2. Revisa calidad (Quality) + precio (Price) + latencia/throughput (Latency/Throughput)
+3. Elige el modelo cuya relacion global coste-rendimiento encaje mejor con tu producto
+
+::: tip ✅ Recomendacion
+No discutas "cual es mas fuerte" solo por intuicion. Un metodo mas fiable es probar 2 o 3 modelos con el mismo conjunto de entradas y luego decidir combinando ranking y precio.
+:::
+
+## Resumen
+
+Al integrar distintos servicios de IA, no hace falta imaginar las APIs como algo demasiado complejo. Si dominas los siguientes conceptos centrales, podras manejar la mayoria de escenarios:
+
+**La esencia de una API es ser un puente de comunicacion**. Hace algo muy simple: envia tu solicitud y trae de vuelta la respuesta del modelo. No necesitas preocuparte por lo que ocurre detras; solo debes organizar correctamente el formato de la solicitud.
+
+**Un SDK es una capa de encapsulacion sobre la API**. Si la API es una interfaz raw, el SDK es una caja de herramientas lista para usar: se encarga de detalles tediosos como firma de solicitudes, manejo de errores y validacion de parametros. En el desarrollo diario, priorizar SDK frente a llamadas API directas ahorra muchos problemas.
+
+**Al leer documentacion, basta con fijarse en tres cosas**: direccion del servicio (endpoint), credencial de identidad (API key) y como rellenar los parametros de llamada. Si entiendes estas tres cosas, hacer funcionar la llamada es cuestion de tiempo.
+
+El resto del trabajo lo completaran el IDE y las herramientas modernas de desarrollo. Concetrate en tu logica de negocio y deja las llamadas de bajo nivel a SDKs y toolchains maduros.
+
+# 5. 📚 Tarea: integra tu primera capacidad de IA
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 Reto: integrar capacidades de IA en tu workspace</div>
+  </template>
+
+  <p>
+    Toma como referencia los prompts y contenidos de esta leccion y completa un ciclo cerrado:
+  </p>
+
+  <ul>
+    <li>
+      <strong>Practica de ciclo completo</strong>
+      <ul>
+        <li>Elige e integra un servicio de IA (LLM / texto a imagen / imagen a imagen) → implementa interaccion frontend-backend → integralo en tu prototipo</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Compartir resultados</strong>
+      <ul>
+        <li>Captura la pagina de tu funcion y compartela con los demas</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Pregunta de reflexion</strong>
+      <ul>
+        <li>Reserva espacio mental para la siguiente seccion, "practica de proyecto completo": piensa de antemano como combinar estas capacidades de IA y que funcion interesante quieres crear.</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Siguiente paso
+
+En la siguiente seccion conectaremos estas capacidades de IA dispersas y las combinaremos con un escenario de negocio real para construir un producto completo:
+
+- Conectar planificacion de contenido, publicacion de productos, analisis de datos y otros pasos en un flujo de negocio completo
+- Integrar las capacidades de IA aprendidas en esta leccion, como generacion de copy con LLM, texto a imagen y edicion de imagenes, en nodos reales del negocio
+- Implementar un "workspace de IA para ecommerce" realmente utilizable, no una demo aislada
+
+<RelatedArticlesSection
+  title="Articulos relacionados"
+  description="Ruta recomendada para pasar de capacidades de IA puntuales a un flujo completo de producto."
+  :items="relatedArticles"
+/>
diff --git a/docs/es-es/stage-1/introduction-to-ai-ide/index.md b/docs/es-es/stage-1/introduction-to-ai-ide/index.md
new file mode 100644
index 0000000..f02a69a
--- /dev/null
+++ b/docs/es-es/stage-1/introduction-to-ai-ide/index.md
@@ -0,0 +1,1252 @@
+
+# Nivel basico 2: aprende herramientas de programacion con IA
+
+## Introduccion del capitulo
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Aprox. <strong>1 dia</strong>, se puede completar en varias sesiones'
+const relatedArticles =
+  relatedArticlesMap['es-es/stage-1/introduction-to-ai-ide'] ?? []
+</script>
+
+<ChapterIntroduction :duration="duration" :tags="['Configuracion de entorno local', 'IDE y AI IDE', 'Tecnicas de desarrollo eficiente']" coreOutput="1 minijuego original" expectedOutput="Creado con Trae">
+
+Antes experimentamos la programacion con IA en z.ai, pero la version web tiene muchas limitaciones: <strong>no permite guardar en cualquier momento</strong>, <strong>no facilita gestionar archivos</strong> y tampoco <strong>sirve bien para proyectos complejos</strong>. Este capitulo te ayuda a llevar el entorno de desarrollo a tu propio ordenador, para que puedas <strong>crear cosas de forma realmente independiente</strong>.
+
+Primero aclararemos <strong>cual es la diferencia entre un IDE y un AI IDE</strong>, y por que este ultimo puede <strong>multiplicar tu eficiencia</strong>. Luego te guiaremos <strong>paso a paso</strong> para crear localmente un juego de Snake con Trae, recorriendo el <strong>flujo completo</strong> desde la instalacion hasta la ejecucion. Al final compartiremos algunas <strong>tecnicas practicas para conversar con la IA</strong>, para que evites desvio innecesarios.
+
+Al terminar este capitulo, habras <strong>dominado un flujo de desarrollo parecido al de un programador</strong>.
+
+::: tip 💡 Consejo avanzado
+Si ya tienes cierta base de programacion y quieres usar herramientas mas potentes por adelantado, puedes consultar [Herramientas modernas de CLI Coding](../../stage-2/backend/modern-cli/) para desarrollar desde la linea de comandos.
+:::
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Entorno', description: 'Entender IDE y AI IDE' },
+      { title: 'Practica local', description: 'Crear Snake con Trae' },
+      { title: 'Herramienta', description: 'Conocer la interfaz del IDE' },
+      { title: 'Comunicacion', description: 'Hablar eficazmente con la IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Que entorno y herramientas necesitas para escribir codigo
+
+### 1.1 Cambio de mentalidad: ante un problema, pregunta primero a la IA
+
+Antes de presentar distintos entornos y herramientas, conviene recordar algo importante: necesitas **cambiar tus habitos de pensamiento**.
+
+En el aprendizaje tradicional de programacion, si necesitas instalar Python, configurar Conda o resolver un fallo de instalacion de npm, normalmente abres un buscador, encuentras un tutorial y sigues los pasos uno por uno. Si aparece un error en medio, tal vez tengas que buscar el mensaje de error y probar varias veces.
+
+Error! ❌
+
+En la era de la IA, especialmente al usar un AI IDE, recuerda un principio central: **cualquier operacion se puede preguntar primero a la IA, e incluso dejar que la IA la haga por ti.**
+
+- **No sabes como instalar el entorno?** Pregunta directamente a la IA en la barra lateral: "Quiero escribir Python. Ayudame a comprobar si Python esta instalado; si no, instalalo por favor."
+- **La red se queda bloqueada?** Si al instalar dependencias todo queda cargando o aparece un error, pasa el error a la IA: "La descarga fallo. Es un problema de red? Puedes ayudarme a cambiar a otro mirror?"
+- **No recuerdas comandos?** No hace falta memorizar comandos de Git o Conda. Dile directamente a la IA: "Ayudame a crear un nuevo entorno virtual llamado demo."
+
+### 1.2 Por que necesitas entorno y herramientas
+
+Pasar de "probar unas lineas de codigo" a "construir un proyecto mantenible a largo plazo" exige entornos y herramientas completamente distintos.
+
+En teoria, tambien puedes escribir codigo con el bloc de notas del sistema, pero los problemas aparecen enseguida:
+
+- **Todo el codigo es texto negro**: palabras clave, strings y comentarios se mezclan, y cuesta ver la estructura de un vistazo.
+- **No hay sugerencias inteligentes**: hay que escribir cada palabra completa a mano, y una letra mal escrita obliga a revisar una y otra vez.
+- **Con muchos archivos todo se desordena**: al cambiar entre docenas de archivos, a menudo no encuentras la linea que necesitas modificar.
+- **Al fallar solo puedes adivinar**: si el programa se rompe, no sabes donde esta el problema y solo puedes imprimir logs linea por linea.
+
+Por eso necesitas un IDE (Integrated Development Environment, entorno de desarrollo integrado). Un IDE muestra el codigo con colores, ofrece sugerencias al escribir, organiza archivos por proyecto y permite rastrear errores paso a paso, haciendo el desarrollo mas eficiente y menos propenso a errores.
+
+## 2. Que es un IDE y por que lo necesitas
+
+::: info Lectura previa
+Si todavia no sabes que es un IDE o para que sirve cada elemento de su interfaz, te recomendamos leer primero [Introduccion a IDE](/es-es/appendix/2-development-tools/ide-basics) para conocer los conceptos basicos y funciones habituales.
+:::
+
+En los primeros tiempos de la programacion, bastaban un editor de texto simple y un procesador del lenguaje. Pero al aumentar la complejidad de los proyectos, los desarrolladores necesitaron con urgencia una herramienta que gestionara archivos de forma eficiente, soportara resaltado de sintaxis y permitiera depurar. Asi nacio el entorno de desarrollo integrado, o IDE.
+
+Puedes entender un IDE como un programa especializado para "editar, gestionar, ejecutar y depurar" codigo. Los IDE tempranos tenian un aspecto muy "primitivo" y se operaban casi por completo con el teclado.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)
+
+Interfaz de terminal. Fuente de la imagen: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
+
+Los "IDE integrados" conocidos y maduros, como `Vim`, se usan a menudo para operaciones remotas en servidores.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png)
+
+Para trabajar con mas eficiencia, necesitamos IDE modernos que soporten operaciones con raton. Normalmente incluyen:
+
+- **Editor de codigo fuente**: resaltado de sintaxis y autocompletado.
+- **Herramientas de build y ejecucion**: compilador/interprete integrado.
+- **Depurador**: depuracion con breakpoints e inspeccion de variables.
+
+Los IDE modernos suelen integrar tambien herramientas como Git. El mas popular es **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)** de Microsoft: ligero y extensible. Aunque existen IDE profesionales como la suite de JetBrains, VS Code es el mas amable para principiantes.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png)
+
+La idea central de VS Code es "todo es un plugin". Mediante su sistema de plugins soporta muchos lenguajes: instala el plugin de Python y se convierte en un IDE de Python; instala el plugin de C++ y se convierte en un IDE de C++. Sin plugins, es solo un editor de texto avanzado.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png)
+
+Incluso puede usarse para editar documentos Markdown.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png)
+
+En resumen, un IDE es un conjunto de herramientas que ayuda a los desarrolladores a escribir codigo y ejecutar programas con eficiencia.
+
+Para una explicacion mas detallada, consulta [la seccion del apendice sobre el principio visual de un IDE](/es-es/appendix/2-development-tools/ide-basics).
+
+## 3. En que se diferencia un AI IDE de un IDE normal
+
+Un IDE normal, como VS Code original, es en esencia una "caja de herramientas":  
+puede abrir proyectos, escribir codigo, ejecutar y depurar, e instalar plugins, pero parte de una condicion: debes saber por tu cuenta que hacer y como hacerlo.
+
+- Cuando hay un error, lees el mensaje y buscas que linea tiene el problema.
+- Si quieres agregar una pagina o API nueva, buscas el archivo correspondiente y escribes el codigo.
+- Si quieres configurar el entorno o empaquetar, consultas documentacion y sigues los pasos.
+
+En un AI IDE, en cambio, puedes usar directamente un modelo de lenguaje grande para ayudarte a programar y modificar archivos:
+
+- Dices "haz una pagina de login" y primero genera una estructura basica de codigo.
+- Le pasas el mensaje de error y el codigo relacionado para que analice la causa y proponga cambios.
+- Tras tu confirmacion, puede crear archivos, modificar codigo en lote y encargarse del trabajo repetitivo entre varios archivos.
+
+Por ejemplo, puedes seleccionar un bloque de codigo y pedirle "refactoriza esto" o "agrega comentarios". Tambien puedes preguntar en la barra lateral "como esta disenado este proyecto?", usando `@nombre-de-archivo` o `@todo-el-proyecto` para indicar el alcance de referencia, y completar con una frase tareas tediosas como crear archivos, escribir codigo y ejecutar.
+
+En la version mas reciente de VS Code ya hay integrado un asistente basado en un modelo de lenguaje grande. Puedes conversar con el modelo sobre todo el repositorio, un archivo concreto o incluso una funcion. Tambien puedes, como hiciste antes con herramientas web de autoprogramacion, enviar requisitos como prompts al Agent de codigo integrado para que implemente funciones, cree archivos, modifique codigo, configure entornos y mas.
+
+Puedes descargar e instalar VS Code, hacer clic en la entrada de la barra lateral en la esquina superior derecha y abrir el area de funciones de IA para probar estas capacidades.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png)
+
+Sin embargo, VS Code no es el IDE con capacidades de IA mas fuertes. Para escenarios que requieren mucha asistencia de IA al programar, a menudo conviene usar herramientas "mas inteligentes y eficientes": un buen AI IDE puede ahorrar mucho tiempo escribiendo codigo y corrigiendo bugs. A continuacion presentamos varios AI IDE populares; puedes elegir cualquiera segun tus preferencias.
+
+Como VS Code es open source, cualquiera puede descargar el codigo fuente y compilarlo por su cuenta. Por eso, la gran mayoria de AI IDE del mercado estan desarrollados sobre VS Code. No tienes que preocuparte por "aprender muchos IDE": **si conoces el uso basico de VS Code**, pasar a estos AI IDE no requiere empezar de cero.
+
+En general, las diferencias entre AI IDE se concentran en cuatro aspectos: precio; tipos de modelos disponibles, pues algunos modelos avanzados pueden estar restringidos en ciertas regiones; capacidad del Agent, es decir, que tan inteligente y capaz es al ayudarte a programar; y velocidad/rendimiento. Puedes elegir segun tus pruebas reales: la mejor herramienta es la que mejor te funcione.
+
+> Un AI IDE tipico suele tener estas capacidades centrales:
+>
+> - Generacion y autocompletado inteligente de codigo: en un IDE tradicional escribimos unos caracteres para completar nombres de variables o funciones; en un AI IDE moderno puedes escribir unas lineas de pseudocodigo o explicar brevemente el requisito, y el IDE completa la logica, o incluso genera bloques grandes de codigo segun la instruccion.
+> - Comprension de codigo y Q&A: el IDE puede entender y responder preguntas sobre un fragmento, un archivo o incluso toda la estructura del proyecto.
+> - Refactorizacion y optimizacion: el IDE puede reescribir u optimizar la logica de un fragmento segun tu intencion.
+> - Generacion automatica de tests: el IDE puede generar tests para distintas funciones y modulos, facilitando pruebas dirigidas.
+> - Ejecucion de tareas tipo Agent: un Agent inteligente puede generar, empaquetar, instalar, ejecutar y modificar codigo; en muchas tareas puede reemplazar parcialmente el trabajo de un ingeniero junior.
+
+::: details Antigravity
+
+### [Antigravity](https://antigravity.google/)
+
+Antigravity es un AI IDE nuevo lanzado por Google en noviembre de 2025 junto con Gemini 3. Usa un modo de desarrollo "Agent-First". A diferencia de la asistencia de codigo tradicional, Antigravity convierte al agente de IA en un "ejecutor activo": puede operar directamente el editor, terminal, navegador y otras herramientas, asumiendo mas trabajo de ejecucion, planificacion y verificacion. El desarrollador solo plantea una intencion de alto nivel; el agente divide tareas, crea planes, escribe codigo, ejecuta pruebas y genera resultados. Soporta cambio entre modelos como Gemini 3 Pro y Claude Sonnet 4.5. Actualmente se ofrece como public preview y soporta Windows, macOS y Linux.
+:::
+
+::: details Trae
+
+### [Trae](https://www.trae.ai/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png)
+
+Trae es un asistente de programacion con IA lanzado por ByteDance. Soporta mas de 100 lenguajes de programacion y puede integrarse con IDE populares. Sus funciones incluyen generar codigo desde lenguaje natural, depuracion automatica y convertir disenos en componentes React/Vue. Tras la actualizacion de agosto de 2025, Trae agrego importacion inteligente de dependencias, sugerencias de renombrado, gestion de listas de tareas y mas; el modo SOLO tambien empezo a soportar generacion de backend y edicion de documentos de arquitectura tecnica.
+:::
+
+::: details Cursor
+
+### [Cursor](https://cursor.com/)
+
+Cursor es un editor de codigo con IA desarrollado por Anysphere, personalizado sobre VS Code y optimizado para repositorios grandes y colaboracion entre multiples archivos. Soporta modelos como GPT-4o y Claude 3.7. El modo Claude Max lanzado en 2025 puede manejar proyectos de millones de lineas de codigo. La version Pro elimino limites de solicitudes, por lo que es adecuada para proyectos empresariales complejos.
+
+Actualmente, Cursor puede considerarse uno de los AI IDE con interfaz grafica de mejor experiencia global. Tiene una base de usuarios grande y un ritmo alto de iteracion. Su mayor desventaja es el precio: la version Pro cuesta alrededor de 20 USD al mes.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png)
+:::
+
+::: details Qoder
+
+### [Qoder](https://qoder.com/)
+
+Qoder es un AI IDE lanzado por Alibaba que enfatiza la "colaboracion transparente" y una "capacidad reforzada de context engineering". Mediante Action Flow permite dividir tareas en varios pasos y seguir en tiempo real la ejecucion de la IA. Tambien soporta routing dinamico entre modelos y gestion de estado de tareas, por lo que es adecuado para gobernanza de arquitectura en proyectos medianos/grandes y analisis de "reverse engineering" de sistemas legacy.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png)
+:::
+
+::: details CodeBuddy
+
+### [CodeBuddy](https://www.codebuddy.com/)
+
+CodeBuddy es una herramienta de programacion con IA lanzada por Tencent Cloud, centrada en soporte para instrucciones en chino y cumplimiento empresarial. Ofrece autocompletado de codigo, revision de codigo por lotes y cambio entre modelos. Su agente Craft puede generar codigo en multiples archivos e integrar APIs. La version enterprise soporta despliegue privado y ha pasado certificacion de seguridad de nivel 3, adecuada para sectores con altas exigencias de seguridad de datos como finanzas y salud.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png)
+:::
+
+::: details VS Code + Cline
+
+### VS Code + [Cline](https://cline.bot/)
+
+Cline es un plugin de AI programming Agent para VS Code (Visual Studio Code). Permite cambiar de forma flexible el modelo grande configurando distintos endpoints de API. Cline soporta entrada multimodal, extension de herramientas MCP y monitoreo de costes; todas las operaciones requieren confirmacion del usuario antes de ejecutarse. Es muy adecuado para validar ideas rapidamente o integrarse con flujos de desarrollo existentes. Las funciones basicas son gratuitas, y la version enterprise soporta desplegar modelos en entornos privados.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png)
+:::
+
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro es un AI programming IDE lanzado por AWS, profundamente integrado con Amazon Bedrock y el ecosistema de servicios cloud de AWS. Soporta varios modelos grandes como Claude y Nova, y es especialmente adecuado para escenarios que requieren integracion estrecha con servicios AWS. Kiro ofrece generacion inteligente de codigo, pruebas automatizadas e integracion fluida con recursos de AWS como Lambda, S3 y DynamoDB, lo que le da ventajas particulares en desarrollo cloud-native.
+
+> **Nota**: si quieres usar modelos relacionados con Anthropic Claude, necesitas usar Cursor, Kiro o Antigravity como IDE. Estos IDE tienen colaboracion oficial o integracion profunda con Anthropic y ofrecen una experiencia de Claude mas estable y completa.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Entorno', description: 'Entender IDE y AI IDE' },
+      { title: 'Practica local', description: 'Crear Snake con Trae' },
+      { title: 'Herramienta', description: 'Conocer la interfaz del IDE' },
+      { title: 'Comunicacion', description: 'Hablar eficazmente con la IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. Practica: crear un juego de Snake en local con un AI IDE
+
+Lo anterior trato sobre "conceptos" y "diferencias". En esta seccion convertiremos esas ideas abstractas en acciones concretas mediante una practica completa: **crear una carpeta vacia -> abrirla con un AI IDE -> conversar en la barra lateral para que use React y genere desde cero un juego de Snake.** Aqui usaremos Trae como ejemplo, asi que primero debemos instalarlo y entender brevemente que es.
+
+::: tip 💡 Consejo: conexion fluida de la web a local
+Si antes desarrollaste un proyecto en z.ai u otra plataforma web de programacion con IA, puedes descargar el codigo a local y abrirlo con un AI IDE para seguir trabajando. Asi conservas el resultado anterior y ademas aprovechas las capacidades mas potentes de un IDE local.
+
+Los pasos son sencillos:
+1. En z.ai u otra plataforma, haz clic en descargar y guarda el proyecto en local
+2. Descomprimelo y abre la carpeta con un AI IDE como Trae o Cursor
+3. Sigue conversando con la IA en la barra lateral para iterar y mejorar el proyecto
+:::
+
+### 4.1 Preparacion: instalar y conocer Trae
+
+#### 4.1.1 Que es Trae
+
+El nombre Trae puede entenderse como "The Real AI Engineer". Es un entorno de desarrollo integrado con IA adaptativa desarrollado por ByteDance. Esta construido sobre el popular VS Code, lo que significa que si ya estabas acostumbrado a VS Code, al usar Trae tanto el layout como las operaciones basicas te resultaran familiares y comodas.
+
+El objetivo central de Trae es ser el "companero inteligente de programacion" del desarrollador. Gracias a una integracion profunda de capacidades de IA, puede automatizar mucho trabajo repetitivo y ofrecer una experiencia de desarrollo mas intuitiva y eficiente. No es solo una "herramienta de autocompletado", sino que busca ayudar durante todo el flujo: crear proyectos, escribir codigo, depurar, probar y desplegar.
+
+#### 4.1.2 Instalar Trae
+
+Trae tiene version internacional y version china. La internacional requiere acceso a red internacional, pero permite usar modelos extranjeros recientes como GPT-5; la version china soporta principalmente modelos grandes chinos recientes, como GLM, Qwen y Kimi.
+
+Descarga de la version internacional: https://www.trae.ai/  
+Descarga de la version china: https://www.trae.cn/
+
+##### Precio y formas de uso de Trae
+
+::: info 💡 Consejo de version (para principiantes se recomienda CN)
+- **Para empezar desde cero recomendamos mucho descargar la version china (CN, trae.cn)**. Actualmente ofrece mejor experiencia, las funciones basicas son gratuitas y no requiere red internacional.
+- Si necesitas usar modelos extranjeros como GPT-5 y tu red lo permite, puedes elegir la version internacional.
+- Si ya tienes una API Key de un modelo de terceros, conectarlo puede ayudarte a controlar costes con flexibilidad.
+:::
+
+> 💡 **Actualmente se recomienda probar con modelos gratuitos de OpenRouter**
+> 
+> En el momento de escribir este tutorial (2026-02-12), todavia se puede probar gratis el modelo de StepFun. Puedes consultar la forma de conexion en la seccion 4.2 y conectar `stepfun/step-3.5-flash:free`.
+
+Sobre el coste y uso de Trae, hay varias opciones:
+
+- **Version CN nacional (muy recomendada)**: uso basico gratuito; por ahora la experiencia global es mejor que la internacional y es muy adecuada para principiantes. Como hay muchos usuarios, a veces puede haber cola.
+- **Version internacional**: la suscripcion cuesta alrededor de 3 USD al mes y permite acceder a modelos extranjeros como GPT-5, pero requiere acceso a red internacional.
+- **Conexion de modelos de terceros**: si ya tienes Token API de modelos nacionales como DeepSeek, Tongyi Qianwen o Kimi, puedes conectarlos mediante la configuracion de modelos de terceros de Trae. Los grandes proveedores cloud como Alibaba Cloud, Tencent Cloud o Baidu Cloud suelen ofrecer planes Coding Plan; tras comprarlos, puedes usar sus APIs de modelos grandes a menor coste. Asi eliges libremente tu modelo preferido y controlas el coste.
+
+Se recomienda a principiantes empezar con la version CN gratuita (descarga: https://www.trae.cn/). Actualmente funciona mejor y es completamente gratuita. Si encuentras colas o necesitas un servicio mas estable, puedes conectar un modelo de terceros y comprar el Coding Plan correspondiente del proveedor cloud.
+
+#### 4.1.3 Introduccion rapida a la interfaz de Trae
+
+En cuanto a interfaz, Trae se parece mucho a VS Code: mantiene el layout clasico de tres columnas, con explorador de recursos a la izquierda, editor en el centro y panel extendido a la derecha.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png)
+
+La barra lateral derecha es la ventana de interaccion de Copilot, que tambien puede entenderse como ventana del Agent. Si no la ves, puedes abrirla haciendo clic en el icono de barra lateral en la esquina superior derecha de Trae.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png)
+
+Al abrir la barra lateral veras una opcion `Builder`: ese es el modo Agent. De forma simple, es como una "version local" de z.ai; puede operar tu entorno local, instalar runtimes, abrir paginas web, etc.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png)
+
+Tras hacer clic en "Builder", veras los modos "Chat" y "Builder with MCP":
+
+- **Modo Chat**: se usa principalmente para conversar sobre el codigo de la carpeta actual o como modelo de chat normal. Puedes abrir una carpeta desde el menu "File" en la esquina superior izquierda y editar dentro de esa carpeta. En ese caso, los archivos que Builder cree o modifique solo ocurriran dentro de esa carpeta.
+- **Modo Builder with MCP**: ofrece mas herramientas al Agent, por ejemplo conectar el modelo de lenguaje con otro software o consultar el clima. Puedes entenderlo asi: MCP permite que el modelo llame herramientas externas con mas facilidad.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)
+
+En la zona inferior tambien veras la opcion de seleccion de modelo; al hacer clic puedes cambiar el modelo grande actual. En la version china puedes elegir modelos nacionales como Kimi k2 o GLM; si usas Trae internacional, tambien puedes elegir modelos extranjeros como ChatGPT o Claude. Sin embargo, como los modelos nacionales avanzan muy rapido, Kimi, Qwen y GLM ya se acercan en muchas tareas a Claude 3.5 o 3.7 y son suficientes para desarrollo diario. Aqui no exigimos usar una version concreta.
+
+**Ten en cuenta que aqui no se recomienda usar modo Auto (seleccion automatica de modelo). Si es la version internacional, recomendamos Gemini o GPT; si es la version china, recomendamos probar modelos nacionales como Kimi k2, MiniMax o GLM.** Cada modelo encaja mejor en escenarios distintos; no hay una regla dogmatica sobre cual es mejor. Si una tarea se atasca, cambia de modelo y usa varias pruebas para encontrar tu mejor resultado.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png)
+
+Esto es una introduccion breve a Trae. A continuacion, podemos repasar lo que hicimos antes en z.ai e intentar hacer lo mismo en Trae.
+
+### 4.2 Paso 1: crea una carpeta vacia y abrela con el AI IDE
+
+Antes de empezar, primero necesitamos preparar un directorio de trabajo limpio.  
+Para el ejemplo de esta seccion, puedes crear localmente una carpeta vacia llamada snake-game-react.
+
+Despues abre el AI IDE instalado, elige abrir carpeta u Open Folder en la pantalla inicial, e importa esa carpeta vacia como raiz del proyecto. Tambien puedes arrastrar la carpeta directamente a la ventana del IDE. En ese momento, el explorador de la izquierda no mostrara archivos de codigo, lo que indica que empezamos desde un proyecto totalmente en blanco.
+
+::: details 📚 Opcional: conectar API o Coding Plan de proveedores cloud
+
+Esta seccion explica como conectar API o Coding Plan de proveedores cloud para obtener llamadas de modelo mas estables y frecuentes. Al final se muestran capturas de conexion en Trae.
+
+**Que es Coding Plan**
+
+Coding Plan es un plan de suscripcion ofrecido por grandes proveedores cloud. Tras comprarlo, puedes usar durante cierto periodo la API de modelos grandes de ese proveedor **sin limite o con alta frecuencia**. Frente al cobro por Token, Coding Plan se parece mas a un "paquete mensual": pagas una cantidad fija y puedes usarlo con tranquilidad sin preocuparte por cada llamada.
+
+**Por que comprar Coding Plan**
+
+Tal vez preguntes: si ya puedo llamar modelos grandes directamente por API, por que comprar Coding Plan? La razon principal es: **puedes usarlo continuamente**. Su ventaja central es que permite llamar modelos grandes en cualquier momento y con frecuencia, sin miedo a que el coste se dispare ni necesidad de revisar la tabla de facturacion todo el tiempo.
+
+**Coding Plan nacionales recomendados**
+
+Estas son opciones recomendadas de Coding Plan de proveedores cloud principales en China:
+
+- Zhipu AI (BigModel Plan): https://bigmodel.cn/glm-coding  
+- Volcengine (ByteDance Cloud AI Plan): https://www.volcengine.com/activity/codingplan
+
+> 💡 **Tambien puedes conectar directamente APIs de modelos grandes**
+> Ademas de Coding Plan, puedes conectar APIs de modelos mediante Add Model. Puedes consultar mas abajo el metodo para conectar la API gratuita OpenRouter StepFun y usarla en Trae. En pruebas, cubre necesidades basicas de programacion.
+> Si necesitas recargar saldo, se recomienda probar primero con 10 yuan para ver cuanto dura, por ejemplo con modelos de buena relacion coste-rendimiento como DeepSeek.
+
+**Como conectar Coding Plan**
+
+Los pasos son muy simples y solo tardan unos minutos:
+
+1. Visita el sitio del proveedor cloud elegido, por ejemplo Zhipu AI: https://bigmodel.cn/glm-coding o Volcengine: https://www.volcengine.com/activity/codingplan
+2. Registra una cuenta e inicia sesion
+3. Busca la pagina "Pricing" o "Coding Plan"
+4. Elige el paquete adecuado y completa el pago
+5. Tras pagar, recibiras una API Key o Plan ID
+
+::: tip 🎯 Recomendacion de modelo personalizado
+
+Al conectar modelos personalizados en Trae, **recomendamos por defecto la opcion OpenRouter**. OpenRouter ofrece una API unificada que facilita conectar multiples modelos de lenguaje grandes.
+
+**Hasta el 12 de febrero de 2026, tambien puedes usar la API gratuita de StepFun:**
+
+- **`stepfun/step-3.5-flash:free`**: modelo gratuito ofrecido por StepFun, tambien conectable directamente en Trae.
+
+**Otros modelos gratuitos:**
+
+- **`openrouter/free`**: opcion de modelo que usa por defecto una API LLM gratuita. Puede usarse directamente en Custom Model de Trae escribiendolo como model ID, sin pagar, para experimentar programacion con IA.
+
+Estas opciones gratuitas son ideales para principiantes. Antes de entrar en produccion, puedes familiarizarte con el flujo del AI IDE usando estas alternativas.
+
+**Opcional: conectar API de modelos grandes (ejemplo con DeepSeek)**
+
+1. Visita la plataforma DeepSeek: https://platform.deepseek.com/usage
+2. Registra una cuenta e inicia sesion
+3. Compra un paquete de Token de 10 yuan en la pagina de recarga
+4. Tras recargar, crea y copia la API Key en la pagina API Keys
+5. En Trae, haz clic en **"Add Model"**, busca DeepSeek, elige el modelo correspondiente e introduce la API Key
+
+Con la siguiente interfaz puedes agregarlo correctamente. Ojo: tras ver las opciones de seleccion de modelo, **debes desplazarte hasta el final**. Abajo hay una opcion "Custom Model"; solo al hacer clic podras introducir el model ID. Aqui puedes escribir directamente el model ID recomendado, por ejemplo `stepfun/step-3.5-flash:free`. Luego haz clic abajo para obtener Key, ve al sitio oficial y escribe la API Key correspondiente para usarlo normalmente.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png)
+:::
+
+### 4.3 Paso 2: conversa en la barra lateral y deja que la IA disene Snake con React
+
+Ahora abre la barra lateral de chat con IA: normalmente con `Ctrl+L` o haciendo clic en el icono de chat a la derecha. Luego escribe un prompt suficientemente claro:
+
+> Usa arquitectura React para implementar un juego de Snake, con control por teclado, crecimiento y puntos al comer comida, mensaje "Game over" al chocar contra la pared o contra si mismo, y soporte para reiniciar. Cuando lo implementes, ayudame a arrancar el proyecto. Si falta algun entorno o programa, instalalo automaticamente.
+
+Durante este proceso debes entender que la IA no es solo un modelo de chat: puede operar tu entorno local, crear archivos, instalar dependencias, ejecutar comandos de arranque, etc. Puedes describir el objetivo en lenguaje natural y dejar que la IA decida que comandos ejecutar y como organizar el codigo.
+
+Si aparece un problema durante la ejecucion, la IA mostrara el error y la solucion propuesta en la conversacion. Puedes seguir pidiendole ajustes sin memorizar todos los detalles de comandos.
+
+::: warning ⚠️ Atencion
+Como se muestra abajo, **a veces el AI Agent se pausa durante la ejecucion porque espera que introduzcas alguna informacion interactiva**, por ejemplo un nombre, Enter para confirmar una instruccion o hacer clic para ejecutarla. En general basta con pulsar Enter. Si no sabes que hacer en ese paso, puedes capturar la pantalla y preguntar al modelo como operar.
+:::
+
+Como se muestra, aqui debemos hacer clic en Run para confirmar:
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png)
+
+Como se muestra, aqui solo necesitamos introducir y para confirmar:
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png)
+
+Como se muestra, aqui estamos creando una plantilla pero no sabemos como operar; podemos capturar esta parte y preguntar al modelo:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png)
+
+Otra razon por la que el AI Agent se pausa es que en ese momento se ha iniciado un "service". Nuestro Snake tambien es una especie de "service". Si ves una URL como la del comando siguiente, significa que el Agent ha ejecutado un servicio local en tu ordenador; puedes visitar esa URL para abrir Snake. Como el servicio debe seguir ejecutandose, aqui parece quedar pausado. Solo tienes que hacer clic en `Skip`.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png)
+
+Si durante el proceso encuentras terminos o contenido que no entiendes, no te preocupes. Puedes consultar la seccion "explicacion de terminos de computacion" del apendice, preguntar directamente a la IA o plantear dudas a tiempo.
+
+Si encuentras comportamientos inesperados, por ejemplo Snake no termina al chocar contra la pared, o la serpiente no se mueve tras hacer clic en iniciar, solo describe el fenomeno al Agent de la barra lateral. Si hay errores, recuerda capturar pantalla o copiar el error al Agent. Si despues de varios intentos sigue sin resolverse, prueba a cambiar de modelo.
+
+Tras esperar un momento, obtendremos un resultado similar al de z.ai:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png)
+
+Podemos hacer clic en el check de la esquina inferior derecha para confirmar los cambios de codigo, o en `Cancel` para cancelarlos. Tambien puedes hacer clic donde dice 2 files need review para desplegar y revisar el codigo modificado.
+
+Tambien conviene recordar que las modificaciones de codigo no siempre son correctas. Los Agent de IDE suelen soportar rollback. Por ejemplo, si aqui haces una modificacion equivocada o el resultado no te satisface, tras terminar puedes volver al area de entrada, hacer clic en Revert y regresar al estado anterior. Luego ajusta el texto de entrada y vuelve a intentarlo:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png)
+
+### 4.4 Paso 3 (opcional): preguntar a la IA por detalles de implementacion
+
+Cuando Snake ya pueda ejecutarse correctamente, si todavia no conoces bien frontend o React, puedes seguir en la misma ventana de chat y pedir a la IA que te guie por el codigo con lenguaje lo mas cotidiano posible. No necesitas cambiar de herramienta ni buscar documentacion: pregunta continuamente sobre el proyecto actual.
+
+Un metodo util es pedir primero una explicacion general de "como se mueve el juego" y luego bajar a detalles concretos. Por ejemplo, pregunta:
+
+> "Explicame de arriba abajo como funciona paso a paso este juego de Snake. Usa la menor cantidad posible de terminos tecnicos."
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png)
+
+Luego sigue preguntando puntos clave segun su respuesta, por ejemplo:
+
+> "Cada segmento del cuerpo de la serpiente en pantalla, con que estructura de datos se guarda? Puedes poner una analogia?"  
+> "Como controlas que se mueva cada cierto tiempo? En que parte del codigo esta?"  
+> "Cuando la serpiente come comida, que pasos haces? En que logica se detecta?"  
+> "Donde se detecta chocar contra la pared y chocar contra si misma?"
+
+Si ves un archivo, por ejemplo `SnakeGame.tsx`, pero no sabes que hace, puedes pedir a la IA que lo explique por bloques:
+
+> "Divide `SnakeGame.tsx` en varios bloques por funcion y explicame que hace cada uno con palabras sencillas."
+
+En esta conversacion, cualquier palabra que no entiendas puede ser una entrada para preguntar mas:
+
+> "Que significa exactamente 'estado' en lo que acabas de decir? Puedes explicarlo con un ejemplo cotidiano?"  
+> "Para que sirve aqui el 'temporizador'? Que pasaria si lo quitamos?"
+
+Con este metodo, tu objetivo no es memorizar todos los conceptos de golpe, sino aclarar tres cosas: que datos centrales hay en el juego (serpiente, comida, puntuacion, estado del juego), cuando cambian esos datos (movimiento, comer comida, fin del juego) y que pequeno bloque de codigo corresponde a cada cambio. Si entiendes estos tres puntos, podras leer la logica principal del codigo.
+
+### 4.5 Paso 4: pedir a la IA que mejore la interfaz
+
+Aqui va un recordatorio importante para principiantes: no le digas solo a la IA "quiero que esta pantalla se vea mejor". Incluso para un disenador humano eso es demasiado vago, y mas aun para un modelo. "Mejor" que estilo es, que zonas ajustar, es problema de layout o de colores? La IA no puede deducirlo de una frase. Para acercarte al resultado que imaginas, debes convertir una meta vaga como "quiero que se vea bonito" en una lista de requisitos concretos y ejecutables.
+
+Por ejemplo, mucha gente empieza asi:
+
+> "Quiero que esta pantalla se vea un poco mejor."
+
+Puedes empezar con un conjunto de requisitos generales:
+
+> "Ayudame a mejorar la interfaz general del juego:
+>
+> - Centra el area de juego, que no quede pegada arriba a la izquierda;
+> - Usa un fondo mas claro para que la serpiente y la comida destaquen;
+> - Aumenta el tamano de la puntuacion y ponla en un lugar visible;
+> - Usa azul como color principal y mejora la paleta y los botones."
+
+Si quieres una respuesta mas clara cuando termina el juego, puedes agregar:
+
+> "Cuando termine el juego, muestra 'Game over' en el centro de la pantalla y debajo un boton 'Reiniciar' que resetee el juego."
+
+La IA modificara directamente los componentes React y estilos segun tu descripcion. Tras guardar y refrescar el navegador, veras la nueva interfaz. Si todavia no coincide con lo que imaginabas, puedes hacer ajustes pequenos:
+
+> "Haz la puntuacion un poco mas grande y con color mas llamativo."  
+> "Haz el area de juego un poco mas compacta y deja algo de margen alrededor."  
+> "Cambia el boton de reiniciar a estilo azul con esquinas redondeadas y centralo debajo del aviso."
+
+En esta etapa, si una modificacion causa error, no necesitas investigarlo a la fuerza. Copia el error en el chat o agrega una descripcion breve, como "este error aparecio despues de mejorar la interfaz", para que la IA lo ubique y repare dentro del contexto del proyecto. Asi, en un ciclo de "conversar y refrescar", puedes pulir un demo funcional hasta convertirlo en un producto pequeno con interfaz clara e interaccion fluida.
+
+### 4.6 (Opcional) modificar Snake tomando como referencia la arquitectura de z.ai
+
+Para principiantes de vibe coding, lo mas dificil suele ser no saber que cuenta como "best practice" ni que arquitectura conviene. Como falta base de computacion, tambien cuesta guiar bien a la IA. La solucion es "referenciar directamente". Recuerdas que dijimos que en z.ai se puede ver el codigo? En el README correspondiente, que presenta funciones y arquitectura tecnica del proyecto, ya hay una buena referencia arquitectonica:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png)
+
+Si queremos que el resultado local se parezca lo mas posible al de z.ai, podemos copiar todo el README, pegarlo en la barra lateral de Trae y pedirle que modifique el codigo local segun esa arquitectura.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png)
+
+Al final obtendremos un estilo de pagina muy parecido al de z.ai:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Entorno', description: 'Entender IDE y AI IDE' },
+      { title: 'Practica local', description: 'Crear Snake con Trae' },
+      { title: 'Herramienta', description: 'Conocer la interfaz del IDE' },
+      { title: 'Comunicacion', description: 'Hablar eficazmente con la IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 5. Para que sirve cada boton de la interfaz
+
+Con las operaciones anteriores ya completamos rapidamente un ciclo minimo de generacion de programa, pero todavia no podemos decir que dominamos el IDE. Para familiarizarnos a fondo con esta herramienta que nos acompanara durante mucho tiempo, en esta seccion explicaremos cada detalle del IDE, empezando por la interfaz. Las interfaces de distintos AI IDE varian un poco, pero la mayoria hereda [el layout de VS Code](https://code.visualstudio.com/docs/getstarted/getting-started).
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp)
+
+La funcion concreta de cada parte es:
+
+- **Title Bar (barra de titulo)**: muestra el nombre del archivo y los controles de ventana.
+- **Activity Bar (barra de actividad)**: cambia entre vistas como archivos y busqueda.
+- **Side Bar (barra lateral)**: muestra listas de archivos y otros contenidos concretos.
+- **Editor Groups (area de editor)**: zona central para escribir codigo.
+- **Breadcrumbs (ruta de navegacion)**: muestra la ruta del archivo y permite saltar.
+- **Minimap (minimapa de codigo)**: permite previsualizar y ubicar codigo rapidamente.
+- **Panel (panel inferior)**: contiene terminal y ventanas de salida.
+- **Status Bar (barra de estado)**: muestra el estado del entorno actual.
+
+Para una explicacion mas detallada, consulta [la seccion del apendice sobre el principio visual de un IDE](/es-es/appendix/2-development-tools/ide-basics).
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Entorno', description: 'Entender IDE y AI IDE' },
+      { title: 'Practica local', description: 'Crear Snake con Trae' },
+      { title: 'Herramienta', description: 'Conocer la interfaz del IDE' },
+      { title: 'Comunicacion', description: 'Hablar eficazmente con la IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 6. Como hablar con la IA de forma eficaz
+
+A medida que la IA se vuelve mas capaz, ya podemos entregarle muchas tareas que antes dependian de un programador.  
+Pero en la practica veras algo muy claro: usando la misma IA, algunas personas consiguen un proyecto pequeno que funciona con pocas frases, mientras otras conversan durante mucho tiempo y reciben algo que no querian. La diferencia no suele estar en quien es mas inteligente, sino en si hablas con la IA de forma concreta y por pasos.  
+En esta seccion partimos de varios escenarios comunes y mostramos formas de preguntar pensadas para principiantes, para que la IA produzca resultados utilizables con mas estabilidad.
+
+### 6.1 Explica bien la necesidad: de una idea vaga a una descripcion concreta
+
+Muchas personas, la primera vez que usan IA, solo escriben una frase muy general, por ejemplo:
+
+> "Ayudame a hacer una pagina web."  
+> "Ayudame a escribir una aplicacion pequena."
+
+En ese caso, la IA solo puede imaginar por su cuenta lo que quieres. Puede darte algo que parece completo, pero que se aleja bastante de lo que realmente tenias en mente.  
+Para que la IA entienda mejor, conviene separar la idea que tienes en la cabeza y explicarla en varias frases.
+
+Puedes completar la peticion desde estos angulos:
+
+1. **Dile para que usaras eso**  
+   Por ejemplo, en vez de decir solo "sitio personal", di:
+   - "Quiero crear una pagina personal de una sola pagina para enviarla a reclutadores."
+
+2. **Dile que bloques de contenido necesitas**  
+   No hace falta usar palabras tecnicas. Describe lo que quieres ver en la pagina:
+   - "La pagina debe tener tres partes: arriba mi nombre y una frase de presentacion, en medio varias experiencias laborales, y abajo mi email y mi contacto."
+
+3. **Dile tu nivel y tus limites**  
+   Pide que trabaje de una forma adecuada para principiantes:
+   - "No se programar. Usa solo la forma mas sencilla, para que pueda copiarlo en un archivo y abrirlo en el navegador."
+
+4. **Dile como quieres recibir el resultado**  
+   Por ejemplo:
+   - "Dame el codigo completo que pueda guardar directamente como `index.html` y abrir en el navegador."
+
+Juntando todo, podrias decirle a la IA:
+
+> "No se programar. Quiero hacer una pagina personal de una sola pagina para enviarla a reclutadores.  
+> La pagina necesita tres partes: arriba mi nombre y una frase de presentacion, en medio varias experiencias laborales, y abajo email y contacto.  
+> Dame el codigo completo que pueda guardar como `index.html` y abrir en el navegador."
+
+Cuando explicas estos datos, la IA puede acercarse mucho mas a tu necesidad real, en vez de darte algo que parece impresionante pero no te sirve.
+
+### 6.2 Usa el ritmo correcto: primero que funcione, luego hacerlo mas complejo
+
+Para principiantes, una trampa comun es querer empezar con algo "muy completo" y con "muchas funciones".  
+Por ejemplo:
+
+> "Ayudame a crear un sitio como Taobao."  
+> "Ayudame a crear un sistema con registro, inicio de sesion y pedidos."
+
+El resultado suele ser una gran cantidad de codigo. Lo copias y no abre, o aparecen errores por todas partes; no sabes donde esta el problema y acabas abandonando.
+
+Una forma mas adecuada es **controlar el ritmo** y hacer que la IA avance contigo paso a paso, en lugar de pedirle todo de una vez. Puedes pedirlo en este orden:
+
+1. **Paso 1: pide primero un ejemplo minimo**  
+   Comprueba una sola cosa: si puedes ver algo en el navegador.  
+   Por ejemplo:
+
+   > "Primero dame el ejemplo mas simple: que en el navegador solo se vea una linea que diga 'Esta es mi pagina principal'.  
+   > Despues dime paso a paso como debe llamarse el archivo, como guardarlo y como abrirlo."
+
+2. **Paso 2: sobre esa base, completa el contenido poco a poco**  
+   Cuando confirmes que de verdad puedes ver esa linea, di:
+
+   > "Sobre la version anterior, agrega una seccion de 'experiencia laboral' y vuelve a enviarme el codigo completo. No envies solo la parte modificada."
+
+3. **Paso 3: cuando la estructura ya este bien, piensa en el aspecto visual**  
+   Por ejemplo:
+   > "La pagina ya muestra el contenido correctamente. Ahora ayudame a mejorar un poco el estilo: centra el conjunto, haz el titulo mas grande y usa una fuente comoda. Dame el codigo completo actualizado."
+
+Cada vez que agregues un paso, ejecutalo primero y confirma que cambio de verdad antes de pedir lo siguiente. Asi, si algo falla, puedes volver rapidamente a la ultima version que funcionaba, sin tirar todo el trabajo.
+
+### 6.3 Usa capturas y copias: si no sabes explicarlo, muestra lo que ves
+
+Para muchos principiantes, la dificultad no es "no saber modificar codigo", sino **no saber describir el problema**.  
+Por ejemplo:
+
+- El navegador muestra muchos errores en ingles y no los entiendes.
+- El diseno de la pagina no se parece a lo que querias, pero no sabes que palabras usar.
+
+En estos casos, no hace falta forzar terminos profesionales. La forma mas simple es **entregar a la IA exactamente lo que estas viendo**.
+
+Puedes hacerlo asi:
+
+1. **Copia el texto del error**  
+   Cuando veas un mensaje rojo de error, copialo entero y di:
+
+   > "Este es el mensaje de error completo que aparece al ejecutar. No entiendo el ingles; primero explicamelo con palabras normales.  
+   > Despues dime cual es el cambio mas simple que debo hacer ahora."
+
+2. **Muestra una captura a la IA**  
+   Si sientes que "esta pagina se ve mal", pero no sabes describirlo:
+   - haz una captura de la pagina actual;
+   - copia tambien todo el codigo que estas usando;
+   - y explica:
+     > "Asi se ve la pagina ahora, y este es mi codigo completo.  
+     > Yo queria que fuera un diseno de tres columnas, pero ahora aparece como una sola columna. Ayudame a encontrar la causa y dame el codigo completo corregido."
+
+   ::: tip 💡 Nota sobre la funcion de capturas
+
+   Ten en cuenta que **no todos los modelos de IA pueden "ver imagenes"**. Aqui hay dos conceptos distintos:
+
+   - **Modelo grande solo de texto (LLM)**: solo procesa entrada de texto y no puede reconocer contenido de imagenes. Si le envias una captura, puede rechazarla o no entender correctamente la informacion de la imagen.
+
+   - **Modelo multimodal**: puede procesar texto, imagenes y otros tipos de entrada al mismo tiempo; puede "entender" la captura y dar sugerencias segun lo que muestra.
+
+   **Referencia de capacidades de modelos comunes** (tomando como ejemplo los modelos disponibles en Trae):
+
+   | Modelo | Soporta entrada de imagen |
+   |--------|---------------------------|
+   | Serie Doubao-Seed | ✅ Si |
+   | GLM-4.7 / 4.6 | ❌ No |
+   | MiniMax-M2.7 / M2.5 | ❌ No |
+   | DeepSeek-V3.1 | ❌ No |
+   | Kimi-K2.5 | ✅ Si |
+   | Kimi-K2-0905 | ❌ No |
+   | Qwen-3-Coder | ❌ No |
+   | Serie Gemini | ✅ Si |
+   | Serie GPT | ✅ Si |
+
+   **Sugerencia de uso**: si quieres que la IA revise un problema de interfaz mediante una captura, confirma primero que el modelo soporta entrada de imagen. Si no la soporta, describe el problema con texto o copia y pega el mensaje de error.
+
+   :::
+
+3. **Cuando veas una pagina que te gusta y quieras algo parecido**  
+   No necesitas decir como se llama ese tipo de layout. Hazlo directo:
+   - captura la pagina o copia sus titulos y parrafos principales;
+   - luego di:
+     > "Quiero hacer una pagina con una estructura parecida a esta, no tiene que ser identica.  
+     > Ayudame a crear una base similar con codigo sencillo, y luego yo cambiare los textos."
+
+En resumen: tu tarea es llevarle a la IA lo que ves y decirle con palabras simples en que quieres convertirlo; lo demas, traducirlo a codigo, explicar terminos y localizar problemas, se lo puedes encargar a la IA.
+
+### 6.4 Cuando el codigo generado por la IA no funciona: un metodo general
+
+En la practica vas a encontrarte con esta situacion:  
+la IA te da codigo con mucha seguridad, tu lo copias con cuidado, pero el navegador queda en blanco o el resultado no se parece a lo que prometia.  
+Eso no significa que "no puedas aprender", ni que la IA este completamente equivocada. Normalmente falta algunas rondas de confirmacion entre ambos.
+
+Cuando el codigo "no funciona", puedes hablar con la IA siguiendo este flujo fijo:
+
+1. **Primero explica que hiciste y que ves ahora**  
+   Evita decir solo "no abre" o "no sirve". Puedes describirlo asi:
+
+   > Despues de abrirlo, la pagina esta completamente en blanco y no muestra el texto de bienvenida que mencionaste.  
+   > Abri la pagina xxxx y no aparece la parte que acababa de pedir; asi no me sirve.
+
+2. **Envia a la IA tu codigo completo actual**  
+   Muchas veces el problema es que copiaste una linea de menos, o mezclaste la version anterior con la nueva.  
+   Puedes decir:
+
+   > "Abajo esta todo el codigo que tengo ahora en este archivo.  
+   > Comparalo y dime si falta algo, si hay algo escrito mal o si el orden no es correcto.  
+   > Dame directamente una version completa corregida, no solo un fragmento."
+
+3. **Si hay un mensaje de error, incluyelo tambien**  
+   Por ejemplo, una alerta en la esquina del navegador o texto rojo en la parte inferior. Puedes:
+   - copiar el texto del error;
+   - o tomar una captura;
+   - y decir:
+     > "Este es el error que veo. No lo entiendo. Explicame primero de forma simple que problema parece ser y luego dime que lineas debo cambiar ahora."
+
+4. **Pide que explique en "modo principiante" paso a paso**  
+   Puedes decir claramente tu situacion para que no omita pasos intermedios:
+
+   > "No se programar. Dime paso a paso:  
+   > en el paso 1, que linea debo cambiar;  
+   > en el paso 2, como debo guardar;  
+   > en el paso 3, como debo volver a abrir o refrescar la pagina.  
+   > Escribe cada paso con frases completas."
+
+5. **Al final, pide una comparacion de lo que deberias ver**  
+   Por ejemplo:
+   > Primero dime que deberia ver en la pagina si abro el codigo corregido y todo funciona normalmente.
+
+Si sigues este flujo al interactuar con la IA, la mayoria de los casos de "el codigo no funciona" se pueden resolver en unas cuantas rondas.  
+Al mismo tiempo, iras reconociendo patrones comunes de error y la proxima vez podras resolver situaciones parecidas con mas rapidez.
+
+## 7. Resumen y siguiente paso
+
+En este capitulo hiciste una mejora importante: pasaste de "jugar en una pagina web a un Snake generado por IA" a "crear en local un minijuego con un AI IDE". Ya entiendes, en terminos generales, tres cosas: por que programar depende de un IDE como VS Code; como, al sumar IA (Trae, Cursor, etc.), el IDE deja de ser solo una caja de herramientas y gana algo parecido a un "ingeniero en practicas" que entiende lenguaje natural, crea archivos, prepara el entorno y modifica codigo; y para que sirve cada zona de la interfaz del IDE (archivos a la izquierda, terminal abajo, editor en el centro, panel de IA a la derecha).
+
+Mas importante aun, ya recorriste un flujo completo: crear una carpeta vacia localmente -> abrirla con el AI IDE -> describir la necesidad en el chat lateral -> pedir a la IA que genere el proyecto e inicie el servidor de desarrollo -> cuando aparezca un problema, entregar "fenomeno + codigo completo + captura del error" y pedir que lo corrija paso a paso en modo principiante. En ese proceso tambien practicaste como escribir prompts mas eficaces: aclarar objetivo, estructura del contenido y nivel propio, controlar el ritmo, y avanzar desde "primero que funcione" hasta "luego que se vea mejor y sea mas divertido".
+
+En el proximo capitulo cambiaremos el foco de "saber usar herramientas" a "hacer un prototipo que alguien realmente quiera usar": partir de la perspectiva del usuario, disenar reglas, interacciones y feedback, y despues dejar que la IA convierta esas ideas en un primer producto.
+
+## 8. 📚 Tarea: crear un juego mas complejo con un AI IDE local
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 Reto: crea tu propio juego</div>
+  </template>
+
+  <p>
+    Ya hiciste un Snake con un AI IDE local. Ahora prueba un minijuego un poco mas complejo y recorre el flujo completo:
+    describir la necesidad -> generar el proyecto -> ejecutarlo en local -> depurar e iterar.
+  </p>
+
+  <ol>
+    <li>
+      <strong>Elige un juego mas complejo que Snake</strong>
+      <ul>
+        <li>Puede ser Tetris, Whac-A-Mole, Buscaminas, 2048, un shooter de aviones u otro similar</li>
+        <li>Tambien puede ser un juego original sencillo inventado por ti</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Debes completar todo el proceso con un AI IDE local</strong>
+      <ul>
+        <li>Crea una carpeta vacia y abrela con el AI IDE</li>
+        <li>Describe claramente los requisitos del juego en el chat lateral</li>
+        <li>Deja que la IA cree archivos, prepare la estructura del proyecto e implemente la logica principal</li>
+        <li>Inicia el servidor de desarrollo local y confirma que el juego funciona correctamente</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Debe tener jugabilidad basica y feedback</strong>
+      <ul>
+        <li>Incluye al menos tres estados: inicio, partida en curso y final</li>
+        <li>El jugador debe tener una forma clara de controlar el juego, con teclado o raton</li>
+        <li>La pantalla debe mostrar puntuacion o progreso de forma clara</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Realiza al menos 2 rondas de iteracion</strong>
+      <ul>
+        <li>En la primera ronda, pide a la IA una version jugable</li>
+        <li>Desde la segunda ronda, plantea mejoras concretas: estilo, dificultad, interaccion, etc.</li>
+      </ul>
+    </li>
+  </ol>
+</el-card>
+
+<RelatedArticlesSection
+  title="Seguir aprendiendo"
+  description="Te recomendamos entrar primero en la practica de prototipos y luego incorporar capacidades de IA paso a paso."
+  :items="relatedArticles"
+/>
+
+# Apendice
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
+  <div style="font-weight: bold; margin-bottom: 8px;">Navegacion del apendice</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Esta es una referencia para consultar cuando la necesites: vuelve aqui si no entiendes un termino o no encuentras una entrada en la interfaz.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1-map" style="text-decoration: none; color: inherit;"><b>Apendice 1: glosario rapido de terminos informaticos comunes</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Cuando veas un termino informatico que no entiendes, consultalo aqui. Conviene leerlo una vez completo.</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="/es-es/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Apendice 2: explicacion de la barra de menus de Visual Studio Code</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Si no sabes para que sirve una parte del AI IDE, usa este contenido para preguntar a la IA o consultalo directamente.</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    Consejo: usa Ctrl/⌘+F para buscar palabras clave. Si aparece un termino nuevo, copia el error y pide a la IA que lo explique en modo principiante.
+  </div>
+</el-card>
+
+# Apendice 1: glosario rapido de terminos informaticos comunes
+
+<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: bold; margin-bottom: 10px;">🗺️ Mapa de terminos: aqui encontraras...</div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;">🖥️ <b>Interfaz de herramientas</b></a><br/>
+      <span style="font-size: 12px; color: #909399">IDE / terminal / panel</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-network" style="text-decoration: none; color: inherit;">🌐 <b>Servicios de red</b></a><br/>
+      <span style="font-size: 12px; color: #909399">URL / puerto / local</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;">⚙️ <b>Frontend y backend</b></a><br/>
+      <span style="font-size: 12px; color: #909399">API / JSON / interfaz</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-code-basic" style="text-decoration: none; color: inherit;">📝 <b>Fundamentos de codigo</b></a><br/>
+      <span style="font-size: 12px; color: #909399">variable / funcion / componente</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" style="margin-top: 10px;">
+    <el-col :span="6">
+      <a href="#term-debug" style="text-decoration: none; color: inherit;">🐞 <b>Depuracion y errores</b></a><br/>
+      <span style="font-size: 12px; color: #909399">bug / breakpoint / log</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-project" style="text-decoration: none; color: inherit;">📂 <b>Gestion de proyectos</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Git / repositorio / commit</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;">🤖 <b>Herramientas de IA</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Agent / modelo / Key</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-browser" style="text-decoration: none; color: inherit;">🛠️ <b>Navegador</b></a><br/>
+      <span style="font-size: 12px; color: #909399">DevTools / consola</span>
+    </el-col>
+  </el-row>
+</el-card>
+
+No necesitas memorizar esta parte. Lo mas importante es formar primero una impresion general.
+
+## <span id="term-tool-ui">[1. Terminos relacionados con la interfaz de herramientas](#appendix-1-map)</span>
+
+### 1. IDE, editor y terminal
+
+**IDE (entorno de desarrollo integrado)**  
+Puedes imaginar un IDE como el "banco de trabajo" de un programador:
+
+- una mesa para escribir (editor),
+- enchufes y botones (ejecutar, depurar),
+- cajones con herramientas pequenas (busqueda, control de versiones).  
+  VS Code, Trae y Cursor son IDE o herramientas construidas sobre un IDE.
+
+**Editor de codigo (Editor)**  
+Se parece mas a un "bloc de notas avanzado" y se encarga de:
+
+- permitirte escribir codigo;
+- distinguir contenidos con colores (resaltado de sintaxis);
+- ofrecer autocompletado.  
+  La zona del IDE donde escribes codigo es el editor de codigo.
+
+**Terminal / linea de comandos (Terminal / command line)**  
+Es una ventana de fondo negro y texto claro donde **escribes comandos** para que la computadora trabaje:
+
+- por ejemplo, `npm run dev` significa "inicia el servidor de desarrollo";
+- `python main.py` significa "ejecuta este archivo Python".  
+  Puedes imaginarlo asi: envias mensajes de texto con instrucciones a la computadora, y ella responde con texto sobre el resultado.
+
+### 2. Zonas comunes de un IDE
+
+**Barra de actividad (Activity Bar)**  
+Es la fila vertical de iconos a la izquierda, como pestanas de funciones:
+
+- icono de archivos -> muestra la lista de archivos;
+- icono de lupa -> cambia a busqueda;
+- icono de Git -> muestra control de versiones.
+
+**Barra lateral (Side Bar)**  
+Es el area grande a la derecha de la barra de actividad. Muestra el contenido del modo actual:
+
+- modo archivos: muestra archivos y carpetas del proyecto;
+- modo busqueda: muestra resultados de busqueda;
+- modo control de codigo fuente: muestra que archivos cambiaron.
+
+**Area de editor (Editor)**  
+La zona central mas grande es donde ves y modificas el contenido de los archivos abiertos.  
+Las pestanas superiores muestran que archivos estan abiertos.
+
+**Panel inferior (Panel)**  
+Normalmente esta abajo y contiene varias vistas comunes:
+
+- Terminal: escribir comandos para ejecutar el proyecto;
+- Problems: listar archivos y lineas con errores;
+- Output: mostrar informacion impresa por herramientas;
+- Debug Console: salida durante la depuracion.
+
+**Barra de estado (Status Bar)**  
+Es la barra delgada en la parte inferior:
+
+- muestra el lenguaje del archivo actual (JS, HTML, Python, etc.);
+- muestra si la indentacion usa 2 o 4 espacios;
+- muestra si hay errores y cual es la rama Git actual.  
+  Puedes verla como una pequena ficha de salud del entorno de edicion.
+
+## <span id="term-network">[2. Terminos sobre paginas web, red y servicios](#appendix-1-map)</span>
+
+### 1. URL, http, puerto y servicio local
+
+**URL (direccion web)**  
+Es la cadena que aparece en la barra de direcciones del navegador, por ejemplo:
+
+- `https://www.trae.cn/`
+- `http://localhost:3000/`  
+  Es como la direccion completa de una habitacion dentro del mundo de internet.
+
+**HTTP / HTTPS**  
+Son los textos `http://` o `https://` que ves al inicio de una URL:
+
+- HTTP: metodo de transferencia normal;
+- HTTPS: agrega una capa de cifrado y es mas seguro.  
+  Puedes recordarlo asi: las direcciones web suelen empezar con `http` o `https`.
+
+**Puerto (Port)**  
+Imagina una computadora como un edificio. Un puerto es **el numero de una puerta**:
+
+- `:3000` significa puerta 3000;
+- en la misma computadora pueden ejecutarse varios servicios, cada uno usando un puerto.  
+  `http://localhost:3000` significa "visitar el servicio que corre en la puerta 3000 de mi propia computadora".
+
+**Local / localhost**  
+Se refiere a tu propia computadora.
+
+- `localhost` puede entenderse como "esta maquina misma".  
+  Cuando visitas `http://localhost:3000`, estas hablando con un programa que se ejecuta en tu computadora, no con un servidor de otra persona en internet.
+
+**Servicio (Service / Server)**  
+Un servicio es un programa que **sigue ejecutandose en segundo plano y espera instrucciones**:
+
+- servicio web: cuando el navegador visita una direccion, devuelve contenido web;
+- servicio de juego: gestiona partidas, guardados, rankings, etc.  
+  Ejecutar `npm run dev` en la terminal es, en esencia, abrir un servicio web local.
+
+## <span id="term-frontend-backend">[3. Terminos sobre frontend, backend y datos](#appendix-1-map)</span>
+
+### 1. Frontend y backend
+
+**Frontend**  
+La parte que el usuario **puede ver y tocar**:
+
+- botones, texto, imagenes y animaciones de una pagina;
+- paginas escritas con React o Vue.  
+  Se encarga de mostrar la interfaz y responder a acciones del usuario, como clics, entradas de texto o arrastres.
+
+**Backend**  
+La parte que el usuario **no ve** y que se ejecuta en el servidor:
+
+- guardar y leer datos (usuarios, pedidos, puntuaciones, etc.);
+- ejecutar reglas de negocio (validar inicio de sesion, permisos, etc.).  
+  Puedes comparar el frontend con la tienda y el vendedor, y el backend con el almacen y el sistema de cuentas.
+
+### 2. API, request, response y JSON
+
+**API / interfaz**  
+Un conjunto de reglas acordadas entre frontend y backend para "hacer preguntas y devolver respuestas".
+
+- El frontend dice: "te preguntare usando esta direccion y este formato";
+- el backend dice: "te devolvere el resultado con este formato".
+
+**Peticion (Request)**  
+Una "pregunta" que el frontend envia al backend:
+
+- a donde va (URL);
+- con que metodo (GET, POST, etc.);
+- que parametros lleva (por ejemplo, ID de usuario).
+
+**Respuesta (Response)**  
+La "contestacion" que el backend devuelve al frontend:
+
+- codigo de estado (200 exito, 404 no encontrado, 500 error del servidor);
+- datos reales, normalmente en JSON.
+
+**JSON**  
+Un formato para representar datos con una escritura **muy parecida a codigo JavaScript**, por ejemplo:
+
+```json
+{
+  "name": "Alice",
+  "score": 120
+}
+```
+
+Puedes entenderlo como un bloc de notas de pares clave-valor para maquinas. Frontend y backend lo usan con frecuencia para intercambiar datos.
+
+## <span id="term-code-basic">[4. Terminos sobre escribir codigo](#appendix-1-map)</span>
+
+### 1. Variable, identificador y estado
+
+**Variable**  
+Una "etiqueta pegada a un dato".
+
+- Por ejemplo, puedes guardar la puntuacion con el nombre `score`;
+- despues, usando `score`, puedes leer o modificar ese dato:
+
+```js
+let score = 0
+score = score + 10
+```
+
+**Identificador (Identifier)**  
+El nombre general de las cosas que nombras en el codigo:
+
+- nombre de variable: `score`
+- nombre de funcion: `moveSnake`
+- nombre de componente: `SnakeGame`  
+  Es como llamar a carpetas "fotos", "trabajo" o "facturas" para distinguir cosas distintas.
+
+**Estado (State)**  
+El registro de las condiciones clave actuales del programa:
+
+- si el juego ya termino;
+- en que celda esta la serpiente;
+- cual es la puntuacion actual.  
+  En React se suele entender asi: **cuando cambia el estado, la interfaz debe actualizarse**.
+
+### 2. Funcion, componente y modulo
+
+**Funcion (Function)**  
+Empaqueta una accion que puede repetirse y le da un nombre:
+
+```js
+function sayHello(name) {
+  console.log('Hello, ' + name)
+}
+```
+
+Despues, escribir `sayHello('Bob')` equivale a ejecutar otra vez esas lineas internas.
+
+**Componente (Component)**  
+En frontend, una pieza reutilizable que combina una parte pequena de interfaz y una parte pequena de logica:
+
+- un boton puede ser un componente;
+- una navegacion superior puede ser un componente;
+- toda el area del juego tambien puede ser un componente.  
+  Los componentes se pueden ensamblar como piezas de construccion.
+
+**Modulo (Module)**  
+Un archivo formado por un conjunto de codigo relacionado:
+
+- `snakeLogic.ts` guarda codigo relacionado con como se mueve la serpiente;
+- `score.ts` guarda codigo para calcular la puntuacion.  
+  Los modulos pueden importarse y exportarse entre si, como herramientas guardadas en cajones distintos.
+
+### 3. Sintaxis, lenguaje de programacion y framework
+
+**Sintaxis (Syntax)**  
+Las reglas gramaticales y de puntuacion de un lenguaje de programacion:
+
+- si los strings necesitan comillas;
+- si cada instruccion debe terminar con punto y coma;
+- si los bloques de codigo se envuelven con `{}`.  
+  Si escribes mal la sintaxis, el compilador o interprete reportara directamente un error de sintaxis.
+
+**Lenguaje de programacion (Programming Language)**  
+Un conjunto completo de reglas y vocabulario para comunicarse con la computadora, por ejemplo:
+
+- JavaScript、Python、Java、C++、Go……  
+  Cada lenguaje sirve mejor para ciertas tareas y tiene su propia forma de escribir y su propio ecosistema de herramientas.
+
+**Framework**  
+Un conjunto grande de codigo y patrones donde otra persona ya preparo la estructura base:
+
+- frontend: React, Vue (ayudan con actualizacion de interfaz, gestion de estado, etc.);
+- backend: Django, Spring Boot, etc.  
+  Es como rellenar contenido sobre una estructura ya hecha, mucho mas facil que construir todo desde cero.
+
+## <span id="term-debug">[5. Terminos sobre depuracion y busqueda de errores](#appendix-1-map)</span>
+
+### 1. Bug, error, log / console.log
+
+**Bug**  
+Cuando el programa se comporta de una forma distinta a la esperada, eso es un bug:
+
+- deberia aparecer un boton, pero no aparece;
+- deberia sumar 10 puntos, pero suma demasiado;
+- la pagina queda en blanco al abrirla.
+
+**Mensaje de error (Error Message)**  
+El texto en ingles que aparece en pantalla o en la terminal cuando el programa falla.  
+Aunque se vea intimidante, normalmente indica:
+
+- mas o menos donde esta el problema;
+- que archivo y que linea cercana debes revisar.  
+  Puedes copiarlo directamente y pedir a la IA que lo traduzca y analice.
+
+**Log**  
+Lo que el programa "dice" durante su ejecucion.  
+Lo mas comun en frontend es:
+
+```js
+console.log('Puntuacion actual', score)
+```
+
+Puedes entenderlo asi: **en pasos clave, el programa informa valores para que confirmes si avanza como esperabas**.
+
+> **Que es console.log?**
+>
+> - `console` puede entenderse como una pequena pizarra de depuracion;
+> - `.log` significa escribir una linea en esa pizarra;
+> - si abres DevTools con F12 y entras en el panel Console, veras esas salidas.
+
+### 2. Depuracion, breakpoint, ejecucion paso a paso y snapshot
+
+**Depuracion (Debug)**  
+Cuando el programa tiene un problema, no empiezas cambiando codigo al azar. En cambio:
+
+- haces que el programa se detenga en una linea (breakpoint);
+- miras el valor actual de cada variable;
+- avanzas paso a paso y observas desde donde empieza a ir mal.
+
+**Breakpoint**  
+Puedes imaginar un breakpoint como poner un boton de pausa en una linea:
+
+- normalmente el programa corre hacia abajo;
+- cuando llega a la linea con breakpoint, se detiene temporalmente para que lo revises.
+
+**Ejecucion paso a paso (Step)**  
+Despues de detenerte en un breakpoint, puedes elegir:
+
+- ejecutar una linea cada vez (step over);
+- entrar dentro de una funcion para verla con detalle (step into).  
+  Es como ver una secuencia descompuesta paso a paso, no en avance rapido.
+
+**Snapshot - explicacion simple**  
+Aqui puedes entender "snapshot" como:
+
+> **Tomar una foto del estado actual en un momento concreto para compararlo despues.**  
+> En herramientas reales, "snapshot" puede referirse a:
+
+- el estado completo del proyecto en el momento de un commit;
+- el estado general de memoria o variables en un momento de depuracion.  
+  Por ahora basta con esta imagen mental: **snapshot = registro de un estado en cierto momento**.
+
+## <span id="term-project">[6. Terminos sobre gestion de proyectos](#appendix-1-map)</span>
+
+### 1. Proyecto, workspace y carpeta
+
+**Proyecto (Project)**  
+El conjunto de elementos colocados en una misma carpeta para crear una aplicacion:
+
+- archivos de codigo fuente
+- archivos de configuracion
+- recursos, como imagenes o audio
+
+**Workspace**  
+Concepto que VS Code / Trae usa para describir "que conjunto de cosas esta abierto ahora":
+
+- abrir una carpeta -> un workspace simple;
+- a veces se combinan varias carpetas en un workspace multiproyecto.
+
+### 2. Git, repositorio y commit
+
+**Git (herramienta de control de versiones)**  
+Puedes entenderlo como una "maquina del tiempo" del proyecto:
+
+- cada vez que terminas un conjunto de cambios, puedes guardar una foto de esa version;
+- despues, si lo necesitas, puedes volver a un estado anterior.
+
+**Repositorio (Repository / Repo)**  
+Despues de activar Git, la carpeta de proyecto que contiene historial de versiones se llama repositorio.
+
+**Commit**  
+Cada vez que sientas que "estos cambios ya son un avance concreto", puedes:
+
+- escribir una descripcion (por ejemplo: `Add score panel`);
+- empaquetar todos los cambios actuales como una version;
+- Git guardara el estado de ese momento.  
+  Esa accion se llama hacer un commit.
+
+## <span id="term-ai-tool">[7. Terminos sobre herramientas de desarrollo con IA](#appendix-1-map)</span>
+
+### 1. AI IDE, Agent y modo SOLO
+
+**AI IDE**  
+Sobre un IDE normal, agrega una capa de IA que entiende lenguaje natural y puede actuar:
+
+- si dices "haz un Snake", puede preparar el proyecto y escribir codigo;
+- si le das una captura de error, puede explicarla y luego intentar corregirla;
+- puede modificar varios archivos juntos, no solo completar una linea.
+
+**Agent**  
+Puedes imaginar un Agent como un **pequeno ingeniero de IA siempre disponible**:
+
+- lee la estructura del proyecto;
+- divide tareas (instalar dependencias, generar codigo, ejecutar el proyecto);
+- cuando algo falla, ajusta el plan segun el error.
+
+**Modo SOLO (tomando Trae como ejemplo)**  
+Significa:
+
+> tu solo explicas el destino final;  
+> la IA planifica la ruta;  
+> ejecuta pasos localmente;  
+> y solo pregunta si debe continuar en puntos clave.
+
+### 2. Modelo y clave (API Key)
+
+**Modelo (Model, aqui: modelo grande de lenguaje)**  
+Puedes entenderlo como "el cerebro de IA que hay detras":
+
+- por ejemplo GPT, Claude, Kimi, GLM, etc.;
+- distintos modelos tienen niveles diferentes en comprension de idiomas, escritura de codigo y razonamiento;
+- en un AI IDE normalmente puedes cambiar de modelo desde un menu desplegable.
+
+**Clave / API Key**  
+Puedes entender una API Key como **una contrasena avanzada y un identificador muy largos**.  
+Su funcion es:
+
+> decirle al servidor de otra empresa: "soy este usuario; permite que use tu servicio de IA y registra mi consumo".
+
+Puntos importantes:
+
+- suele ser una cadena larga de letras y numeros aleatorios;
+- no debe publicarse en repositorios, capturas o chats, porque otros podrian usar tu cuenta;
+- escribir la API Key en una herramienta equivale a insertar una llave en una cerradura: despues la herramienta puede llamar al servicio de IA correspondiente.
+
+## <span id="term-browser">[8. Terminos sobre navegador y herramientas de desarrollador](#appendix-1-map)</span>
+
+**Chrome**  
+Uno de los navegadores mas usados para desarrollo frontend:
+
+- abre paginas rapidamente;
+- trae herramientas de desarrollador potentes para revisar problemas.
+
+**Refrescar (Refresh / Reload)**  
+Volver a cargar la pagina actual:
+
+- despues de modificar codigo frontend, si no hay recarga automatica, debes refrescar manualmente para ver el efecto.
+
+**Herramientas de desarrollador (DevTools)**  
+Un conjunto de paneles del navegador pensados para desarrolladores:
+
+- ver la estructura de la pagina (Elements);
+- ver estilos (Styles);
+- revisar errores y logs (Console);
+- revisar peticiones de red (Network).  
+  En Chrome normalmente se abren con `F12` o `Ctrl+Shift+I`.
+
+**Console**  
+Una pestana de DevTools dedicada a mostrar:
+
+- la salida de `console.log(...)` que escribes;
+- errores que ocurren durante la ejecucion, normalmente en rojo.  
+  Puedes verla como el chat del programa:
+- si el programa tiene algo que decir, lo escribe aqui;
+- durante la depuracion, esta suele ser una de las zonas que mas miras.
+
+Si mas adelante encuentras terminos nuevos durante el aprendizaje, tambien puedes pedir a la IA que complete tu glosario con este estilo:
+
+- primero una frase sobre para que sirve;
+- luego una frase sobre como imaginarlo;
+- al final, un ejemplo muy simple.  
+  Asi tu glosario personal sera cada vez mas util y podras comunicarte mejor con la computadora.
+---
+title: 'Principiante 2: Herramientas de programacion con IA'
+description: 'Pasar de programar con IA en la web a un flujo local: entender IDE vs AI IDE, construir un juego de serpiente con Trae y mejorar la colaboracion con IA.'
+---
diff --git a/docs/es-es/stage-1/learning-map/index.md b/docs/es-es/stage-1/learning-map/index.md
new file mode 100644
index 0000000..f40d689
--- /dev/null
+++ b/docs/es-es/stage-1/learning-map/index.md
@@ -0,0 +1,275 @@
+---
+title: 'De la idea al producto de IA - Ruta de aprendizaje de Easy-Vibe'
+description: 'Ruta de aprendizaje completa de programación con IA: de cero al desarrollo fullstack. Domina Vibe Coding, Claude Code, Cursor y otras herramientas AI IDE, aprende pensamiento de producto, desarrollo fullstack e integración de capacidades de IA.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['es-es/stage-1/learning-map'] ?? []
+</script>
+
+# De la idea al producto de IA
+
+::: info Agradecimiento especial
+¡Un agradecimiento especial a los estudiantes de la **Universidad de Tsinghua, Campus de Shenzhen** por sus pruebas, retroalimentación y apoyo a este curso! Sus opiniones y contribuciones han hecho que este curso sea mejor. [👉 Ver lista completa de contribuyentes](https://github.com/datawhlechina/easy-vibe#-contributing--contributors)
+:::
+
+Antes, crear software tenía una barrera muy alta: necesitabas saber programar, entender algoritmos y tener años de experiencia en proyectos.
+Ahora es diferente. Mientras tengas una idea, la IA puede ayudarte a escribir código.
+
+Este es un cambio enorme: **los lenguajes de programación se están convirtiendo en lenguaje natural**.
+
+La aparición de los modelos de lenguaje grande (LLM) ha hecho que el desarrollo ya no sea "exclusivo de los gurús técnicos", sino una herramienta que todos pueden utilizar. Antes, lo más difícil era "cómo escribir código"; ahora, lo más difícil es "**qué quieres hacer**".
+
+> **¿Qué es Vibe Coding?**
+> En pocas palabras, es "programar hablando". Vibe coding significa que puedes depender únicamente de conversar con la IA, en lugar de escribir código directamente, para completar proyectos de programación.
+
+Por supuesto, hacer que la IA escriba código es solo el primer paso. Para crear un producto realmente funcional, aún te enfrentarás a estas preguntas:
+- ¿Cómo hacer que la IA escriba código limpio y mantenible?
+- ¿Cómo unir código disperso en una aplicación funcional?
+- ¿Cómo poner la aplicación realmente en línea y que la gente la use?
+- ¿Cómo integrar capacidades de IA como generación de texto y reconocimiento de imágenes en tu producto?
+
+Estas preguntas encontrarán respuesta en este curso.
+
+No importa si eres estudiante, profesor, médico, trabajador o cualquier persona sin conocimientos técnicos, no necesitas aprender a programar durante años; en dos semanas podrás crear un prototipo de producto funcional y demostrable.
+
+| Tu perfil | Lo que este curso puede hacer por ti |
+|---------|-------------|
+| Estudiante | Tareas, competiciones, emprendimiento; haz tus propios proyectos sin depender de nadie |
+| Profesional | Automatiza trabajos repetitivos, mejora tu eficiencia e incluso desarrolla un negocio secundario |
+| Product Manager / Diseñador | Tus ideas ya no se quedan en papel; puedes crear demos rápidamente para tu jefe/clientes |
+| Emprendedor / PyME | Valida ideas a bajo costo; puedes crear un MVP sin gastar miles en outsourcing |
+| Profesor / Educador | Crea herramientas didácticas, presentaciones y evaluaciones automatizadas, mejorando la eficiencia educativa |
+| Médico / Abogado / Profesional | Automatiza procesos profesionales y crea tus propias herramientas de eficiencia |
+| Cualquier persona | Usa IA para resolver problemas específicos de tu vida/trabajo, haciendo lo imposible posible |
+
+En la era de la IA, la capacidad de ejecución y las ideas siempre son más importantes que la tecnología.
+
+## Ruta de crecimiento: de "saber usar IA" a "saber crear productos de IA"
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>Introducción</h3>
+    <p class="stage-role">Experimenta la programación con IA</p>
+    <div class="stage-tags">
+      <span>Mini juego Snake</span>
+      <span>Inicio desde cero</span>
+      <span>Primera experiencia de Vibecoding</span>
+      <span>Generación en minutos</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>Primera Etapa</h3>
+    <p class="stage-role">Product Manager / Operaciones</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>Descomposición de requisitos y prototipo</span>
+      <span>Integración de capacidades de IA</span>
+      <span>Desarrollo de Demo completo</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>Segunda Etapa</h3>
+    <p class="stage-role">Desarrollador junior/intermedio / Desarrollador independiente</p>
+    <div class="stage-tags">
+      <span>De Figma a código</span>
+      <span>Base de datos Supabase</span>
+      <span>Integración de pago Stripe</span>
+      <span>Base de conocimientos Dify</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>Tercera Etapa</h3>
+    <p class="stage-role">Desarrollador senior / Arquitecto</p>
+    <div class="stage-tags">
+      <span>Web/Mini-programas/Multiplataforma</span>
+      <span>Herramientas avanzadas MCP</span>
+      <span>RAG y LangGraph</span>
+      <span>Mentalidad de ingeniero senior</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+A través de esta ruta de aprendizaje completa, obtendrás:
+
+- **Capacidad de desarrollo Vibe Coding:** Domina la mentalidad de vibecoding y las herramientas de codificación con IA, multiplicando tu eficiencia de desarrollo. Ya no necesitas memorizar sintaxis, sino aprender a guiar la IA para generar código de alta calidad.
+- **Habilidades de desarrollo fullstack:** Desde el diseño UI hasta la implementación frontend, desde el diseño de base de datos hasta el desarrollo de API, desde el desarrollo local hasta el despliegue en la nube, domina la pila tecnológica completa de aplicaciones web modernas.
+- **Integración de capacidades de IA:** Aprende a llamar a diversas APIs multimodales de IA, integrando capacidades de IA como texto, imagen y voz en tus aplicaciones, y construyendo productos inteligentes a través de tecnologías como RAG.
+- **Pensamiento de producto y capacidad operativa:** Desde la investigación de usuarios hasta la descomposición de requisitos, desde el diseño de MVP hasta la iteración del producto, desde la integración de pagos hasta la gestión de usuarios, formando un ciclo completo de desarrollo y operación de productos.
+
+# ¿Qué podrás hacer al terminar?
+
+## Primera Etapa: Crea tu primer prototipo de producto
+
+Esta etapa es adecuada para personas que no tienen ninguna base de programación, o que solo saben un poco pero no se sienten seguras. No necesitas aprender mucha teoría primero; en su lugar, sigue los pasos directamente y aprende a usar herramientas de IA para escribir código mientras lo haces.
+
+**Al terminar podrás**:
+- Completar independientemente una aplicación web con herramientas de programación con IA
+- Convertir ideas de producto en prototipos clicables e interactivos
+- Añadir funcionalidades de IA al prototipo (como generación de imágenes desde texto, chat inteligente)
+- Saber cómo diagnosticar y resolver errores cuando aparezcan
+
+En pocas palabras, podrás crear algo "que funcione y que puedas demostrar a otros".
+
+Podemos primero experimentar la programación con IA a través de juegos pequeños, y luego aprender a usar herramientas de programación con IA para ayudarte a escribir código y corregir errores. Luego, comenzando con páginas simples, crearemos gradualmente una aplicación multipágina interactiva, y añadiremos funcionalidades de IA como generación de imágenes desde texto y chat inteligente. Finalmente, completarás independientemente un proyecto completo, permitiendo que tus ideas tengan una posibilidad real de materializarse.
+
+# ¿Por qué usar un enfoque basado en proyectos para entrenar?
+
+> **Desafíos del mundo real**
+>
+> La razón es bastante simple: según el estado actual de la mayoría de los estudiantes, al entrar directamente al mundo laboral, muy probablemente tendrán dificultades bajo los "golpes de la realidad" de proyectos reales y jefes/clientes. Los escenarios más comunes en el mundo real son:
+
+> Tu mentor/jefe: Queremos hacer un xxx, el objetivo es alcanzar el efecto yyy.
+>
+> ¿Documentación? ¿Frameworks existentes? ¿Especificaciones detalladas de requisitos? Muchas veces no existen.
+
+Muchas tareas en el trabajo real consisten esencialmente en resolver problemas nunca antes vistos en un entorno de alta incertidumbre: los requisitos son vagos, los límites cambian, nadie te da la respuesta correcta, y necesitas investigar por tu cuenta, hacer experimentos, construir prototipos e iterar constantemente, para finalmente entregar una solución que "funcione, sea usable y pueda ponerse en producción".
+
+Lo que este curso quiere hacer es darte una "simulación de golpes de la realidad" en un entorno relativamente seguro:
+
+- A través de tareas de proyecto con cierta dificultad, obligarte a practicar la descomposición de problemas, el diseño de soluciones y la búsqueda independiente de información
+- A través de andamios y código no tan "simplificados", enseñarte a leer, entender y modificar una base de código mediana o grande
+- A través del ciclo completo de la idea al despliegue, hacerte experimentar el proceso completo de un producto real de 0 a 1
+
+A corto plazo, este entrenamiento es bastante exigente; pero a largo plazo, mejorará enormemente tu competitividad en la búsqueda de empleo y el desarrollo profesional: podrás soportar más presión, encontrar puntos de avance en entornos inciertos y tener más capacidad para convertir la IA en productos realmente implementados, en lugar de quedarte en la etapa de "jugar con demos".
+
+# El arte de preguntar: una habilidad esencial en la era de la IA
+
+En la era de la IA, preguntar también es una "habilidad fundamental". Con el mismo código y el mismo error, **cómo preguntas casi determina qué tipo de respuesta puede dar la IA**: ¿generalidades o pasos concretos y aplicables?
+
+**Desarrolla buenos hábitos:** Considera "preguntar a la IA" como parte de tu flujo de desarrollo diario: cuando no entiendas algo o estés atascado, pregunta inmediatamente.
+
+## ¿Por qué es una habilidad esencial?
+
+- **Rara vez hay documentación completa en la realidad:** La mayoría de las veces te enfrentas a requisitos poco claros, código a medio hacer, mensajes de error dispersos
+- **La IA es tu tutor y colega personal:** Quien sabe preguntar puede convertirlo en "programación en pareja de alta calidad"
+- **Tu límite superior lo determina la comunicación:** Cuanta más información clave puedas proporcionar y mejor puedas limitar el formato de salida, más utilizable será la respuesta
+
+**Error común:** Preguntar solo "¿por qué da error?" generalmente solo genera conjeturas. Completar el contexto te dará soluciones accionables.
+
+## Cómo "alimentar" información a la IA: captura de pantalla vs copiar y pegar
+
+Ambos métodos funcionan, pero tienen usos diferentes:
+
+| Método         | Escenario aplicable                                  | Requisito clave                                  |
+| ------------ | ----------------------------------------- | ----------------------------------------- |
+| **Copiar y pegar** | Stack trace de errores, logs, código, configuración, respuestas de API      | Intenta ser completo, no copies solo una línea clave              |
+| **Captura de pantalla**     | Problemas de layout UI, anomalías de interacción, no encuentras botones en la interfaz de herramientas | Captura completa + anota las áreas clave, preferiblemente con una breve descripción textual |
+
+::: danger ⚠️ Requisito previo importante
+**No todos los modelos de IA soportan entrada de imágenes.** La comunicación por capturas de pantalla requiere que la IA tenga capacidades multimodales (es decir, poder entender y analizar imágenes). Actualmente, las IA que soportan entrada de imágenes incluyen: Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), y algunos modelos nacionales como Tongyi Qianwen, Wenxin Yiyan, etc.
+
+**Si la IA que usas no soporta entrada de imágenes**, las capturas de pantalla no podrán ser reconocidas; en ese caso, usa el método de copiar y pegar texto para comunicarte.
+:::
+
+## Técnicas de prompt para que la IA "explique bien"
+
+Si no solo quieres la respuesta, sino "aprender" la respuesta. Usar instrucciones como las siguientes puede mejorar significativamente la calidad de las explicaciones:
+
+> **Ejemplo de pregunta de aprendizaje**
+>
+> - "Por favor, primero explica este concepto en 5 frases, y luego hazme algunas preguntas para verificar que lo he entendido correctamente."
+> - "Por favor, explica detalladamente este mensaje de error, no entiendo por qué da error."
+
+# He insistido mucho pero aún no lo logro, quiero rendirme
+
+Puede que tu método de perseverancia no sea el correcto. No luches solo en la oscuridad; puedes venir a hablar con los autores y asistentes: explica honestamente los métodos que ya has probado, los puntos específicos donde estás atascado y tu estado mental actual. Muchas veces, con solo un pequeño ajuste de dirección o completar un conocimiento clave, podrás seguir avanzando.
+
+# Creo que algunos diseños del tutorial no son razonables
+
+Siempre eres bienvenido a contactar a los autores, crear un issue o dar retroalimentación directamente en el grupo o en clase. Esperamos mucho trabajar contigo para mejorar este tutorial: qué no está claro, qué tiene mala experiencia de usuario, qué te hizo perder tiempo, todo se puede señalar honestamente. La retroalimentación más real y específica es la que más ayuda a los futuros estudiantes a evitar errores.
+
+# Referencia
+
+- [Universidad de Nanjing, Departamento de Ciencias de la Computación y Tecnología, Curso de Fundamentos de Sistemas Informáticos](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="Qué aprender a continuación"
+  description="Continúa avanzando siguiendo la ruta de 'de saber usar IA a saber crear productos'."
+  :items="relatedArticles"
+/>
diff --git a/docs/fr-fr/guide/introduction.md b/docs/fr-fr/guide/introduction.md
new file mode 100644
index 0000000..1edbaba
--- /dev/null
+++ b/docs/fr-fr/guide/introduction.md
@@ -0,0 +1,82 @@
+# Presentation du projet
+
+En 2025, de nombreuses personnes considèrent cette année comme le point de départ de la programmation par IA. De plus en plus de gens commencent à utiliser l'IA pour écrire du code, mais les résultats restent souvent au stade de prototype -- sans savoir comment organiser un processus de développement avec le Vibe Coding, quels outils choisir, et encore moins quelles étapes clés séparent le prototype de la mise en production.
+
+Nous adoptons une **approche pratique en trois étapes** : l'étape débutant permet de se familiariser rapidement avec la programmation par IA grâce à des mini-jeux ; la première étape permet de maîtriser le flux de travail du Vibe Coding et de réaliser un prototype d'application Web ; la deuxième étape couvre le développement full-stack et le déploiement en production ; la troisième étape permet de construire des applications complexes multiplateformes.
+
+Chaque étape est accompagnée d'un projet pratique complet, vous permettant de passer du prototype au produit grâce à des défis concrets, et d'acquérir finalement la capacité à **transformer n'importe quelle idée en une application fonctionnelle**.
+
+Nous sommes convaincus qu'en maîtrisant le Vibe Coding associé à une formation systématique, vous pouvez devenir à vous seul un **développeur polyvalent, combinant développement front-end et back-end, intégration de capacités IA et conception de produits**.
+
+Ce projet s'adresse principalement à trois types d'apprenants :
+
+- **Débutants (grand public / côté produit et operations)** : aider les profils non techniques et les apprenants débutants à comprendre les concepts clés et à réaliser un premier petit outil IA ou prototype de produit.
+- **Développeurs intermédiaires (étudiants et développeurs ayant quelques bases)** : maîtriser systématiquement le Vibe Coding et le développement d'applications IA natives.
+- **Développeurs avancés (entreprises et startups, open source et développeurs indépendants)** : accompagner les équipes et les individus dans la création, la validation et l'itération rapide d'applications IA natives.
+
+## 📖 Navigation du contenu
+
+### Appendice général
+
+[Dictionnaire des capacités IA : explication des concepts clés, termes et scénarios courants](/fr-fr/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### Étape 0 : Maternelle
+
+| Chapitre | Contenu clé | Statut |
+| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
+| [Guide debutant : carte d'apprentissage](/fr-fr/stage-1/learning-map/) | Aperçu global du parcours d'apprentissage | ✅ |
+| [Guide debutant : À l'ère de l'IA, savoir parler, c'est savoir coder](/fr-fr/stage-1/ai-capabilities-through-games/) | Découvrir les capacités de la programmation IA grâce à des exemples comme le jeu du serpent | ✅ |
+
+### Étape 1 : Chef de produit IA
+
+| Chapitre | Contenu clé | Statut |
+| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
+| [Niveau 1 chapitre 2 : Decouvrir les outils AI IDE](/fr-fr/stage-1/introduction-to-ai-ide/) | Apprendre à utiliser un IDE, maîtriser la structure de l'interface et les méthodes de prompting efficaces | ✅ |
+| [Niveau 1 chapitre 3 : Creer un prototype](/fr-fr/stage-1/building-prototype/) | De l'analyse produit au prototype multipage, un cycle complet | ✅ |
+| [Niveau 1 chapitre 4 : Ajouter des capacites IA au prototype](/fr-fr/stage-1/integrating-ai-capabilities/) | Comprendre et intégrer les API de capacités IA courantes (texte, image, vidéo) | ✅ |
+| [Niveau 1 chapitre 5 : Projet complet pratique](/fr-fr/stage-1/complete-project-practice/) | Simuler des scénarios réels, itérer à partir des retours utilisateurs et finaliser la présentation du projet (projet de fin de parcours inclus) | ✅ |
+
+#### Annexes
+
+| Chapitre | Contenu clé | Statut |
+| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
+| [Annexe A : Complement sur la pensee produit](/fr-fr/stage-1/appendix-a-product-thinking/) | Du cadrage des idées à la réflexion produit en passant par le MVP | ✅ |
+| [Annexe B : Erreurs courantes et solutions](/fr-fr/stage-1/appendix-b-common-errors/) | Erreurs fréquentes en Vibe Coding et méthodes de dépannage | ✅ |
+| [Annexe : Ou trouver des idees](/fr-fr/stage-1/appendix-idea-sources/) | Identifier des directions à partir d'applications de référence, de tendances et de listes de VC | ✅ |
+| [Annexe : Le modele Double Diamond](/fr-fr/stage-1/appendix-double-diamond/) | Comprendre le rythme complet : définir d'abord le problème, puis concevoir la solution | ✅ |
+| [Annexe : Jobs to Be Done](/fr-fr/stage-1/appendix-jobs-to-be-done/) | Utiliser la méthode JTBD pour comprendre ce que l'utilisateur veut vraiment accomplir | ✅ |
+| [Annexe : The Mom Test - Entretiens utilisateurs](/fr-fr/stage-1/appendix-mom-test/) | Méthode de recherche pour valider les besoins via des entretiens utilisateurs | ✅ |
+
+### Étape 2 : Développeur intermédiaire
+
+#### Partie front-end
+
+| Chapitre | Contenu clé | Statut |
+| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
+| Utiliser lovart pour produire des ressources | Apprendre à utiliser lovart pour générer en masse des visuels (personnages, décors, etc.), fournissant une base de ressources pour le design UI et le développement front-end | 🚧 |
+| Introduction à Figma et MasterGo | Utiliser les outils de design pour structurer l'architecture de l'information et la mise en page, posant les bases de l'implémentation front-end | 🚧 |
+| Construire une premiere application moderne - Design UI | Réaliser une interface basée sur les composants à partir des maquettes, établissant le premier lien entre design et code | 🚧 |
+| Concevoir des pages et boutons selon les normes UI | Apprendre à organiser la structure des pages et la hiérarchie des boutons selon les standards de design dominants, et utiliser l'IA pour générer des propositions | 🚧 |
+| [Creer des portraits de Poudlard ensemble](/fr-fr/stage-2/frontend/hogwarts-portraits/) | Créer de A à Z une application front-end intégrant des capacités IA, en combinant design et développement | 🚧 |
+
+#### Partie back-end
+
+| Chapitre | Contenu clé | Statut |
+| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
+| Qu'est-ce qu'une API | Comprendre les interfaces HTTP et le modèle requête/réponse, en préparation de l'intégration et des tests back-end | 🚧 |
+| [De la base de données à Supabase](/fr-fr/stage-2/backend/database-supabase/) | Implémenter une base de données et une API sur Supabase, relier le modèle de données aux pages front-end | 🚧 |
+| Rediger du code d'interface et de la documentation assistee par LLM | Utiliser les LLM pour générer du code d'interface et de la documentation de base de données, réalisant un back-end lisible et testable | 🚧 |
+| Flux de travail Git et deploiement Zeabur | Gérer le code avec un flux Git et déployer l'application sur Zeabur pour la mise en production | 🚧 |
+| Outils de développement CLI modernes | Utiliser les outils CLI de programmation IA pour accélérer le développement et le débogage, et établir un flux de travail personnel industrialisé | 🚧 |
+| Comment integrer un systeme de paiement comme stripe | Intégrer un système de paiement et compléter le circuit de facturation et le processus de règlement de base | 🚧 |
+| Construire une premiere application moderne - Application full-stack | Combiner front-end, back-end et module de paiement pour livrer une application Web full-stack déployable | 🚧 |
+| Bibliotheque de composants front-end modernes + Trae en pratique | Utiliser une bibliothèque de composants front-end modernes et Trae pour réaliser de manière autonome un produit avec connexion/inscription et support de paiement | 🚧 |
+
+#### Appendice capacites IA
+
+| Chapitre | Contenu clé | Statut |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
+| [Introduction à Dify et integration de base de connaissances](/fr-fr/stage-2/ai-capabilities/dify-knowledge-base/) | Créer un produit de type outil avec Dify Workflow et un RAG basique, en préparation des évolutions futures de l'application | 🚧 |
+| Apprendre à consulter le dictionnaire IA et integrer des API multimodales | Apprendre à trouver les modèles et API appropriés, et intégrer les capacités multimodales (texte, image, etc.) dans le produit | 🚧 |
+
+### Étape 3 : Développeur avancé
diff --git a/docs/fr-fr/stage-1/ai-capabilities-through-games/images b/docs/fr-fr/stage-1/ai-capabilities-through-games/images
new file mode 120000
index 0000000..71a58c7
--- /dev/null
+++ b/docs/fr-fr/stage-1/ai-capabilities-through-games/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/ai-capabilities-through-games/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/ai-capabilities-through-games/index.md b/docs/fr-fr/stage-1/ai-capabilities-through-games/index.md
new file mode 100644
index 0000000..47a4088
--- /dev/null
+++ b/docs/fr-fr/stage-1/ai-capabilities-through-games/index.md
@@ -0,0 +1,679 @@
+# Niveau 1 : À l'ère de l'IA, savoir parler, c'est savoir programmer
+
+Ceci est un tutoriel basé sur l'<strong>apprentissage par projet</strong>. Nous vous encourageons à suivre les étapes une par une et à essayer de reproduire les résultats.
+Ne craignez pas de faire des erreurs ou de modifier le contenu, nous croyons toujours que vous pouvez y arriver. N'oubliez jamais :
+
+<div style="text-align: center;">
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">Terminer vaut mieux que parfait 🐣</span>
+</div>
+</div>
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Environ <strong>4 heures</strong>, réalisables en plusieurs sessions'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/ai-capabilities-through-games'] ?? []
+</script>
+
+## Introduction du chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Programmation conversationnelle par IA', 'Mini-jeu IA-native', 'Projet pratique : Snake']" coreOutput="Snake IA-native + mini-jeu original" expectedOutput="1 Snake IA-native fonctionnel + (optionnel) 1 mini-jeu ou démo IA-native de votre création">
+
+Si vous <strong>ne savez absolument pas programmer</strong>, ou que vous ne connaissez que les bases, ce chapitre est fait pour vous. Nous commencerons par les fondamentaux : utiliser la <strong>conversation</strong> pour demander à l'IA d'écrire du code, sans avoir besoin de mémoriser la syntaxe, de configurer un environnement, et en faisant tourner le tout directement dans le navigateur.
+
+Vous créerez de vos propres mains <strong>votre premier programme fonctionnel</strong> — un jeu de Snake qui « mange des mots, écrit des poèmes et dessine ». À travers ce projet pratique, vous découvrirez ce que signifie vraiment la programmation par IA : ce n'est pas l'IA qui pense à votre place, c'est vous qui exprimez vos idées et l'IA qui les réalise.
+
+Toute création commence par un passage de 0 à 1, et nous sommes ravis de transmettre confiance et expertise à chaque étape. Pour vous, <strong>l'exécution is all you need</strong>.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
+      { title: 'Premier contact', description: 'Développement express en 60 secondes' },
+      { title: 'Projet pratique', description: 'Créer un Snake IA-native' },
+      { title: 'Explorer et créer', description: 'Réinventer le jeu' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Le défi et l'opportunité pour les non-programmeurs
+
+Beaucoup de gens ont la tête pleine d'idées de produits : un petit outil pour gérer ses comptes, une page web pour suivre la croissance de leur enfant, voire un mini-jeu. Mais dès qu'ils pensent au code à écrire, au développeur à trouver, ils abandonnent tout de suite.
+
+Depuis l'apparition de l'IA, une toute nouvelle possibilité s'est offerte pour la première fois aux non-techniciens : vous n'avez pas besoin de savoir coder, il vous suffit de savoir exprimer clairement à l'IA ce que vous voulez. Les [données de GitHub Copilot](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics) montrent que plus de 15 millions de développeurs utilisent déjà l'IA pour les aider à coder, et qu'en moyenne 46 % du code est généré par l'IA ! Sur les projets Java, cette proportion atteint 61 %.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 20px;">🚀</span>
+      <span style="font-weight: bold; font-size: 16px;">Bond en efficacité et taux d'adoption</span>
+    </div>
+  </template>
+  
+  <el-row :gutter="20" style="margin-bottom: 24px;">
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #409EFF; font-size: 24px; font-weight: bold;">55 %</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Gain de vitesse</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #67C23A; font-size: 24px; font-weight: bold;">2,4 <span style="font-size: 14px;">jours</span></div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Durée des tâches (contre 9,6 jours)</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81 %</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Taux d'installation dès le premier jour</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96 %</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">Taux d'adoption des suggestions</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <div style="line-height: 1.8; color: #606266;">
+    Ce qui est vraiment excitant, c'est le bond en efficacité : la vitesse à laquelle les développeurs accomplissent leurs tâches a augmenté de <b>55 %</b>. Ce qui prenait 9,6 jours à livrer ne nécessite plus que <b>2,4 jours</b>. Cette amélioration visible montre que l'IA n'est plus un « outil optionnel », mais un assistant de programmation devenu indispensable dans le flux de développement. Les chiffres d'adoption le confirment : le jour même où ils ont obtenu l'accès, <b>81 %</b> des développeurs l'ont installé et commencé à l'utiliser immédiatement ; parmi eux, <b>96 %</b> ont adopté les suggestions de code dès le premier jour. En d'autres termes, les développeurs ont quasi instantanément intégré l'IA dans leur travail quotidien.
+  </div>
+</el-card>
+
+Pour les non-programmeurs, cette tendance est encore plus significative : si les développeurs professionnels s'appuient massivement sur l'IA pour coder, <strong>pourquoi ne pas simplement discuter avec l'IA pour concrétiser nos propres idées ?</strong>
+
+L'objectif de ce cours est de vous former à une nouvelle compétence : créer des applications grâce au dialogue en langage naturel. Nous vous apprendrons à communiquer avec l'IA dans le langage des ordinateurs, et comment la laisser transformer vos idées en produits réels et utilisables.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
+      { title: 'Premier contact', description: 'Développement express en 60 secondes' },
+      { title: 'Projet pratique', description: 'Créer un Snake IA-native' },
+      { title: 'Explorer et créer', description: 'Réinventer le jeu' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Jusqu'où l'IA peut-elle vous aider ?
+
+Dans cette section, nous n'aborderons qu'une seule question : si vous ne savez pas coder du tout, jusqu'où l'IA actuelle peut-elle vous aider ?
+
+Globalement, vous pouvez comprendre les capacités des modèles actuels comme suit : ils sont capables de développer des <strong>outils internes simples</strong>, des <strong>tableaux de bord de data visualisation</strong>, ainsi que quelques <strong>mini-jeux légers</strong>. Ces capacités suffisent pour créer des <strong>outils personnels</strong> et <strong>valider des besoins du point de vue produit</strong>. Mais si vous espérez générer en un clic un <strong>produit commercial mature</strong>, il faudra généralement encore un travail humain pour <strong>la conception du flux</strong>, <strong>le polissage des détails</strong>.
+
+Voyons concrètement, avec l'exemple du jeu de Snake, ce que la programmation par IA peut accomplir aujourd'hui.
+
+### 2.1 Créer un Snake en 60 secondes
+
+Commencez par ouvrir la page expérimentale utilisée dans ce cours : [z.ai](https://chat.z.ai/). `z.ai` est une plateforme IA développée par Zhipu AI (l'une des principales entreprises chinoises de grands modèles de langage), dont les capacités sont fournies par la série de modèles GLM développée en interne. La plateforme intègre plusieurs fonctionnalités IA, notamment la génération de diapositives, la conception d'affiches et le développement full-stack. Dans ce tutoriel, nous nous concentrerons sur l'utilisation du module de développement full-stack.
+
+::: details 💡 Qu'est-ce que le nouveau mode « coder dans le navigateur » ?
+
+Autrefois, développer une application web nécessitait :
+- Installer un environnement de programmation (Python, Node.js, etc.)
+- Configurer un éditeur de code
+- Apprendre HTML/CSS/JavaScript
+- Gérer les dépendances et les erreurs
+
+Maintenant, grâce aux plateformes de programmation par IA, il vous suffit de :
+- Ouvrir votre navigateur et accéder à la page
+- Décrire ce que vous voulez en langage naturel
+- L'IA génère le code et affiche un aperçu en temps réel
+
+Ce mode « dialoguer pour coder » transforme la programmation : au lieu « d'écrire du code », vous « décrivez vos besoins ». Vous n'avez pas besoin de comprendre les détails techniques, il vous suffit d'expliquer clairement à l'IA ce que vous souhaitez, et elle transforme vos idées en un programme fonctionnel. C'est le nouveau paradigme de la programmation à l'ère de l'IA — le <strong>Vibe Coding</strong>.
+:::
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
+
+Après avoir saisi vos besoins et cliqué sur le bouton **Développement full-stack**, vous pouvez observer en temps réel le processus complet de création de la page. En général, le temps de préparer un café suffit pour que la page soit générée automatiquement !
+
+```
+Crée-moi un jeu de Snake :
+1. Contrôler le serpent avec les flèches directionnelles
+2. Le serpent grandit et le score augmente quand il mange la nourriture
+3. Le jeu se termine si le serpent heurte un mur ou son propre corps
+4. Il faut des boutons Démarrer et Recommencer
+5. L'interface doit être simple et élégante
+```
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
+
+Une fois la génération terminée, vous verrez apparaître à droite une interface navigable. Vous pouvez faire défiler la page ou cliquer sur le bouton 🧭 en haut à droite pour passer en mode plein écran.
+
+> Les boutons de gauche à droite ont les fonctions suivantes : le bouton flèche ouvre la barre latérale de l'historique des conversations, le bouton crayon crée une nouvelle conversation, le bouton flèche circulaire rafraîchit la page, le bouton boussole bascule en mode plein écran, le bouton Download télécharge le projet, le bouton <> bascule vers la vue code, et le bouton Publish publie le projet.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
+
+Si vous souhaitez consulter le code source de la page, cliquez sur l'icône de code en haut à droite pour voir le code complet.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png)
+
+::: tip 🌐 Explorer d'autres outils de programmation par IA
+
+Outre z.ai, nous vous recommandons également d'essayer les plateformes suivantes :
+
+| Outil | Adresse | Caractéristiques |
+|------|---------|-----------------|
+| **Google AI Studio** (recommandé) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Proposé par Google, avec le modèle Gemini, idéal pour le prototypage rapide |
+| **Figma Make** | [figma.com/make](https://www.figma.com/make) | Intégré à l'outil de design, adapté aux designers pour des prototypes interactifs |
+| **Coze** | [coze.com](https://www.coze.cn) | Plateforme de création de bots IA par ByteDance, développement sans code, intégration avec Doubao, Kimi et d'autres modèles chinois |
+| **v0.dev** | [v0.dev](https://v0.dev) | Outil de génération d'UI par Vercel, génère des composants React fonctionnels à partir d'une description |
+| **Bolt.new** | [bolt.new](https://bolt.new) | Plateforme de développement full-stack par StackBlitz, génère et déploie des applications web complètes |
+| **Lovable** | [lovable.dev](https://lovable.dev) | Spécialisé dans les applications React de haute qualité, avec intégration GitHub et déploiement en un clic |
+| **Replit Agent** | [replit.com](https://replit.com) | IDE en ligne avec assistant de programmation IA, supporte plusieurs langages et collaboration en temps réel |
+
+Pour en savoir plus sur la comparaison détaillée des outils de programmation en ligne, consultez notre lecture complémentaire : [Comparaison de 7 plateformes Vibe Coding](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
+:::
+
+### 2.2 Ce que la programmation conversationnelle peut et ne peut pas faire
+
+Cette section se concentre sur une question précise : lorsque vous dépendez uniquement d'une IA conversationnelle, sans écrire aucune ligne de code, jusqu'où pouvez-vous réellement aller ?
+
+En pratique, une conclusion relativement stable est la suivante : elle peut vous aider à réaliser quelque chose de « petit mais complet », mais la notion de « suffisant » reste à votre appréciation à chaque étape.
+
+#### Plus performant pour les applications « petites et claires »
+
+À partir de l'exemple du Snake ci-dessus, vous avez déjà observé un schéma typique : tant que vous pouvez décrire clairement l'interface et les interactions, l'IA peut généralement, en quelques tours de conversation, assembler une page web complète, navigable et jouable.
+
+Ce type de tâche présente souvent plusieurs caractéristiques communes :
+
+- Périmètre clair : une page web, un outil interne simple, un petit jeu
+- Résultat visible : vous pouvez immédiatement vérifier dans le navigateur si cela fonctionne comme prévu
+- Correction directe : en cas de problème, vous pouvez le signaler dans la conversation suivante et demander une correction (en copiant l'erreur ou en envoyant une capture d'écran à l'IA)
+
+Dans ces limites, vous pouvez considérer l'IA conversationnelle comme un « développeur assistant » efficace. Il vous suffit d'affiner et de corriger les besoins à chaque tour en langage naturel pour obtenir rapidement un prototype utilisable.
+
+**Taux de réussite de l'IA pour les petits projets :**
+<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
+
+#### Les grands projets nécessitent une « vision de flux »
+
+Dès que vous dépassez le cadre des applications petites et claires, espérer qu'une IA termine un système complexe de bout en bout en quelques conversations atteint vite ses limites. Les grands projets impliquent souvent un backend, une base de données, l'intégration de services tiers, ainsi que des questions de permissions, de sécurité, de concurrence et de nombreuses règles métier, avec pour objectif de livrer un système complet intégré aux opérations existantes, et non une simple page web.
+
+Dans ce cas, l'approche la plus raisonnable n'est pas de tout jeter à l'IA d'un coup, mais de commencer par cartographier clairement le flux global : quelles sont les étapes clés, quelles sont les entrées/sorties et les changements d'état à chaque étape, quels nœuds sont les plus sensibles en termes de performance et de sécurité. Ensuite, sur la base de ce diagramme de flux, séparer les étapes relativement indépendantes et les confier à l'IA conversationnelle pour générer des interfaces, des modules, des scripts et des tests.
+
+Avec les capacités actuelles, l'IA est plus performante pour accélérer une série de petites étapes, tandis que vous (ou votre équipe) décidez comment les découper, les enchaîner, et vous chargez de l'architecture, de l'intégration système et de la maintenance.
+
+#### La différence entre « écrire » et « utiliser »
+
+À première vue, l'IA semble capable de tout faire, mais dans la pratique, jusqu'où ces résultats sont-ils réellement utilisables ?
+
+Une référence utile est la suivante :
+
+::: warning ⚠️ Guide des scénarios d'utilisation
+
+- **Prototype / Démo / Outil interne** : très adapté pour confier à l'IA la première version, puis itérer les détails vous-même.
+- **Produit grand public** : nécessite généralement un investissement continu de la part d'ingénieurs sur l'architecture, l'abstraction, les performances et la maintenance.
+- **Systèmes critiques / fortement réglementés (paiement, contrôle des risques, santé, etc.)** : à ce stade, il ne faut pas « déployer directement après génération » ; un processus strict de revue et de test est indispensable.
+  :::
+
+À l'heure actuelle, vous pouvez relativement sereinement considérer l'IA comme un partenaire efficace pour les démos et les outils internes : tant que vous êtes prêt à tester, itérer et poser des questions supplémentaires (« c'est faux ici, corrige et explique pourquoi »), la qualité globale au niveau prototype et outil interne est généralement suffisante et pertinente.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
+      { title: 'Premier contact', description: 'Développement express en 60 secondes' },
+      { title: 'Projet pratique', description: 'Créer un Snake IA-native' },
+      { title: 'Explorer et créer', description: 'Réinventer le jeu' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Pratique : votre première application IA-native
+
+Revenons à la pratique. Dans la partie précédente, nous avons rapidement créé un prototype jouable de Snake avec l'IA, et nous avons compris ce que l'IA peut et ne peut pas faire. Nous allons maintenant apprendre à utiliser les techniques de base du <strong>vibe coding</strong> pour créer un jeu de Snake <strong>moderne</strong> version IA-native. Nous allons faire en sorte que le serpent mange des caractères textuels au lieu de haricots. Enfin, le jeu générera un poème d'après les mots mangés, puis dessinera une image.
+À travers ce cas concret, vous comprendrez le concept fondamental de ce nouveau mode de programmation : comment exprimer clairement vos besoins en langage naturel.
+
+### 3.1 Snake IA-native
+
+Au début, nous pouvons dialoguer avec le modèle de la manière la plus simple possible, ce qui nous aidera à obtenir rapidement un prototype de produit. Nous pouvons saisir directement dans la boîte de dialogue :
+
+> **💡 Exemple de prompt :** Crée-moi un jeu de Snake
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png)
+
+> **💡 Exemple de prompt :** Crée-moi un jeu de Snake qui supporte :
+>
+> 1. Je peux manger différents mots, ils seront collectés dans une boîte
+>    ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png)
+
+> **💡 Exemple de prompt :** Crée-moi un jeu de Snake qui supporte :
+>
+> 1. Je peux manger différents mots, ils seront collectés dans une boîte
+> 2. Quand le serpent a mangé 8 mots, le LLM doit créer un poème à partir de ces mots, et nous pouvons le remixer selon nos besoins.
+> 3. Une fois le poème terminé, l'étape suivante créera automatiquement une image basée sur ce poème.
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png)
+
+Notez que pendant le développement, vous pouvez rencontrer des problèmes : boutons sans réaction, erreurs lors de l'utilisation de fonctionnalités, comportement inattendu, ou interface qui ne correspond pas au design attendu.
+
+Dans ce cas, vous devez poser des questions supplémentaires au modèle pour l'aider à résoudre ces problèmes imprévus.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png)
+
+### 3.2 Ajouter de nouvelles fonctionnalités au jeu
+
+Une fois les fonctionnalités de base terminées, vous pouvez essayer d'ajouter des nouveautés à votre programme ! Si vous trouvez que le fait que le serpent mange des mots ou des caractères est un peu ennuyeux, vous pouvez faire manger des mots de différentes couleurs au serpent et changer sa couleur en conséquence.
+
+Vous pouvez également ajouter des effets spéciaux au processus de « mangeage », ou introduire des « mots magiques » qui déclenchent des effets — par exemple en augmentant la vitesse ou la taille du serpent. Une autre idée est de faire générer un poème et une image par le modèle à chaque fois que le serpent mange un mot, plutôt que d'attendre qu'il en mange huit.
+
+Si cela vous semble trop difficile, vous pouvez demander directement au modèle de langage de l'aide ! Il peut fournir des suggestions créatives pour rendre votre jeu plus amusant. Essayez !
+
+```
+1. Mécanique "Les mots déverrouillent des mondes"
+Chaque fois que le serpent mange un mot, le LLM fait une association poétique (par exemple, "arbre" → "forêt", "ombrage"), et le modèle d'image génère instantanément une petite œuvre d'art pour ce mot. Ces images s'assemblent progressivement en un panorama unique créé par le joueur.
+
+2. Jouabilité "Puzzle poétique"
+Chaque mot mangé par le serpent déclenche la génération d'un vers court par le LLM et une illustration par le modèle d'image. Ces vers et images se combinent comme un puzzle pour former, à la fin de la partie, un poème et un tableau collaboratifs avec l'IA.
+
+3. "Mots magiques" et "Branches narratives"
+Des "mots magiques" spéciaux (par exemple, "vent", "nuit", "rêve") ne déclenchent pas seulement de la poésie, mais changent aussi l'ambiance ou le thème — transformant le style de l'image générée en nocturne, tempête ou ambiance onirique.
+
+4. "Génération en temps réel"
+Après chaque mot, le LLM génère une ligne de dialogue ou de description, un NPC dans le jeu peut "parler" au joueur, ou l'environnement change en conséquence.
+
+5. "Créer et partager"
+Les joueurs peuvent sauvegarder et partager leurs poèmes et images créés par l'IA à la fin de la session.
+
+6. "Snake par phrase" — mode inversé
+Le LLM donne un vers ou une énigme, le joueur doit guider le serpent pour manger les mots dans le bon ordre pour reconstituer la phrase.
+
+7. "Niveaux thématiques" et "Sélection de style"
+Au début, le joueur choisit un thème (par exemple, "conte de fées", "science-fiction", "poésie Tang"), et le LLM ainsi que le modèle d'image adaptent les mots, le style poétique et les effets visuels en conséquence.
+
+8. "Co-création en direct"
+Quand un mot spécial est mangé, le LLM peut inviter le joueur à saisir une phrase ou à choisir un style, puis l'IA génère les vers et illustrations correspondants.
+
+9. "Easter eggs IA" et "Succès"
+Certaines combinaisons de mots sont identifiées par le LLM comme des thèmes spéciaux, déclenchant des vers et illustrations rares.
+
+10. "Histoire qui grandit"
+Au fil de la croissance du serpent, le LLM génère un poème narratif continu, et le modèle d'image crée un long parchemin panoramique.
+```
+
+De plus, nous pouvons demander au LLM de générer directement un prompt de niveau projet. Dans la section précédente, nous n'avons écrit nous-mêmes que le prompt du Snake. Maintenant, essayons de demander au modèle de générer un prompt avec un cadre d'ensemble et un chemin de réalisation (vous pouvez utiliser z.ai directement).
+
+Si vous souhaitez apprendre à écrire de meilleurs prompts, consultez [l'annexe sur le Prompt Engineering](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering).
+
+> Je veux que l'IA génère un jeu de Snake en page web, avec un prompt plus complet pour un résultat plus impressionnant et amusant. Génère le prompt correspondant. L'objectif actuel : créer un jeu de Snake avec la fonctionnalité de génération de poèmes à partir de mots mangés, incluant un module de génération d'images.
+
+La réponse de z.ai ressemblera à ceci :
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png)
+
+Nous pouvons utiliser ce prompt en mode développement full-stack pour régénérer le projet :
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png)
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Défis et opportunités', description: 'Les nouvelles possibilités pour tous' },
+      { title: 'Premier contact', description: 'Développement express en 60 secondes' },
+      { title: 'Projet pratique', description: 'Créer un Snake IA-native' },
+      { title: 'Explorer et créer', description: 'Réinventer le jeu' }
+    ]" />
+  </ClientOnly>
+</div>
+
+### 3.3 Essayer de créer d'autres mini-jeux
+
+Outre le Snake, nous pouvons laisser libre cours à notre imagination.
+
+Créer tout ce que nous voulons, même essayer de tout casser ! Puis recommencer à zéro !
+
+```
+1. Galerie d'art IA
+   Description : une galerie en ligne présentant des œuvres d'art générées par IA, avec upload, partage et commentaires.
+   Fonctionnalités : comptes utilisateurs, upload et affichage d'œuvres, système de notation, navigation par catégorie, intégration d'outils de génération IA.
+
+2. Archives de jeux rétro
+   Description : un site rendant hommage aux jeux classiques, avec historique, guides de jeu et jeux rétro jouables en ligne.
+
+3. Suivi de vie durable
+   Description : un site aidant à suivre et réduire l'empreinte carbone grâce à des conseils écologiques et des défis communautaires.
+
+4. Assistant culinaire virtuel
+   Description : une plateforme de cuisine assistée par IA avec recommandations de recettes personnalisées et instructions étape par étape.
+
+5. Plateforme de découverte musicale underground
+   Description : un service de streaming musical centré sur les artistes indépendants et émergents.
+
+6. Gestionnaire de tâches minimaliste
+   Description : un outil de gestion de tâches avec une esthétique zen, axé sur la simplicité et l'efficacité.
+
+7. Atelier d'écriture science-fiction
+   Description : une plateforme offrant des outils créatifs et de l'inspiration aux écrivains de SF, incluant la construction d'univers et le développement de personnages.
+
+8. Graphe de connaissances personnel
+   Description : un outil permettant de construire un réseau de connaissances personnel, avec visualisation et connexion d'idées.
+
+9. Jardin botanique virtuel
+   Description : une encyclopédie interactive des plantes où les utilisateurs peuvent explorer le monde végétal et créer un jardin virtuel.
+
+10. Arène de défis de programmation
+    Description : une plateforme de compétition en ligne pour programmeurs avec des défis de différents niveaux de difficulté.
+```
+
+Et aussi... si vous aimez les jeux, essayons ensemble d'en créer !
+
+```
+1. RPG monde ouvert 3D
+2. FPS arène multijoueur
+3. Échecs IA et multijoueur
+4. Mahjong en ligne multijoueur
+5. Jeu de stratégie au tour par tour
+6. Course automobile contre la montre
+7. Jeu de cartes à collectionner
+8. Battle royale (vue 2D du dessus)
+9. Jeu d'horreur survival (vue à la première personne)
+10. Jeu de rythme musical (3D)
+```
+
+## 📚 Devoir
+
+<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🎯 Devoir du chapitre : réaliser vos premiers mini-jeux IA-native</div>
+  </template>
+
+  <p>
+    Dans cette section, vous avez suivi les étapes du processus complet : de la « génération conversationnelle d'un Snake » à la « compréhension des principes de conception d'un mini-jeu IA-native ». Le devoir ci-dessous vous aide à transformer cette compréhension en compétence réelle.
+  </p>
+
+  <ol>
+    <li>
+      <strong>Reproduire intégralement le jeu de Snake IA-native</strong>
+      <ul>
+        <li>Au minimum : le serpent peut se déplacer, sa longueur et son score changent quand il mange de la « nourriture », et le jeu se termine s'il heurte un mur ou son propre corps.</li>
+        <li>Lors de la reproduction, pratiquez en envoyant à l'IA le phénomène erroné + le message d'erreur + l'extrait de code clé, en demandant une correction en « mode débutant ».</li>
+      </ul>
+    </li>
+    <li>
+      <strong>(Optionnel) Créer 1 mini-jeu ou démo IA-native original</strong>
+      <ul>
+        <li>Il peut s'agir de n'importe quel gameplay léger autour de texte, images, musique, rythme, etc.</li>
+        <li>L'important n'est pas la qualité visuelle, mais de pouvoir expliquer clairement : en quoi l'IA vous a concrètement aidé, et ce qu'elle a résolu de « difficile ou fastidieux à faire manuellement ».</li>
+      </ul>
+    </li>
+  </ol>
+
+  <p>
+    Voilà pour le tutoriel complet ! Il vous faudra peut-être <strong>4 heures</strong> pour terminer tout le contenu et construire votre propre jeu de Snake. Ne vous pressez pas — explorez, expérimentez et profitez du processus. Si vous rencontrez des concepts difficiles à comprendre, n'hésitez pas à consulter les annexes ci-dessous.
+  </p>
+</el-card>
+
+## Annexes
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
+  <div style="font-weight: bold; margin-bottom: 8px;">Navigation des annexes</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Voici quelques concepts de base liés à ce chapitre : si vous rencontrez des questions comme « qu'est-ce que le frontend ? » ou « qu'est-ce que le Vibe Coding ? », vous pouvez revenir ici à tout moment.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>Annexe 1 : Avons-nous besoin de connaissances en développement frontend ?</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Comprendre la place du frontend dans une application, savoir ce qui est « visible ».</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>Annexe 2 : Qu'est-ce que le Vibe Coding exactement ?</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Comprendre les principes du « développement conversationnel » et comment collaborer avec l'IA.</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="16" style="margin-top: 10px;">
+    <el-col :span="12">
+      <a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>Annexe 3 : Contexte des modèles</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Clarifier les concepts souvent entendus mais facilement confondus comme la « longueur de contexte ».</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>Annexe 4 : Capacité de suivi des instructions</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Comprendre pourquoi le modèle « ne comprend pas » parfois, et comment écrire plus clairement.</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    Astuce : vous pouvez utiliser Ctrl/⌘+F pour rechercher des mots-clés, ou copier les passages que vous ne comprenez pas et les donner à l'IA en lui demandant de les réexpliquer « de façon compréhensible pour un vrai débutant ».
+  </div>
+</el-card>
+
+## <span id="appendix-1">[Annexe 1 : Avons-nous besoin de connaissances en développement frontend ?](#appendix-nav)</span>
+
+::: tip 💡 En résumé
+Vous n'avez pas besoin de savoir coder, mais connaître les concepts de base vous aidera à mieux décrire vos besoins à l'IA.
+:::
+
+<el-row :gutter="16" style="margin: 20px 0;">
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">👁️</span>
+          <span style="font-weight: bold;">Frontend</span>
+          <el-tag type="success" size="small">Visible</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        Tout ce que l'utilisateur peut <strong>voir et cliquer</strong>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Titres, textes, images de la page</li>
+          <li>Boutons, champs de saisie, menus déroulants</li>
+          <li>Interface de jeu, animations</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">⚙️</span>
+          <span style="font-weight: bold;">Backend</span>
+          <el-tag type="info" size="small">Invisible</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        Traitement des données sur le serveur
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Stockage des scores</li>
+          <li>Vérification de connexion</li>
+          <li>Attribution des niveaux</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+### La trinité du frontend
+
+Le navigateur construit les pages à partir de trois types de « code » :
+
+<el-tabs type="border-card" style="margin: 20px 0;">
+  <el-tab-pane label="🏗️ HTML - La structure">
+    <div style="padding: 10px;">
+      <p><strong>Rôle :</strong> Définir <strong>quels éléments</strong> se trouvent sur la page</p>
+      <p><strong>Analogie :</strong> Le plan de la maison (où sont les murs, les portes, les fenêtres)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>&lt;button&gt;Cliquez ici&lt;/button&gt;
+&lt;h1&gt;Titre&lt;/h1&gt;
+&lt;img src="photo.png"&gt;</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="🎨 CSS - Le style">
+    <div style="padding: 10px;">
+      <p><strong>Rôle :</strong> Contrôler <strong>l'apparence</strong> des éléments</p>
+      <p><strong>Analogie :</strong> La décoration de la maison (couleurs, matériaux, agencement)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button {
+  background: blue;
+  color: white;
+  border-radius: 8px;
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="⚡ JavaScript - Le comportement">
+    <div style="padding: 10px;">
+      <p><strong>Rôle :</strong> Rendre la page <strong>interactive</strong></p>
+      <p><strong>Analogie :</strong> L'électricité de la maison (la réponse au clic)</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button.onclick = () => {
+  alert('Vous avez cliqué !')
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+</el-tabs>
+
+### Comment le code devient-il une page ?
+
+Quand vous ouvrez une page web, le navigateur traite les trois types de code dans l'ordre :
+
+**1. HTML — Définir la structure de la page**
+Le navigateur analyse d'abord le HTML pour comprendre quels éléments se trouvent sur la page (titres, paragraphes, images, boutons, etc.) et leurs relations hiérarchiques.
+
+**2. CSS — Appliquer les styles**
+Ensuite, le navigateur applique les règles CSS pour ajouter des styles aux éléments : couleurs, tailles, positions, espacements, etc.
+
+**3. JavaScript — Ajouter de l'interactivité**
+Enfin, le code JavaScript est exécuté pour rendre la page « vivante » : répondre aux clics, soumettre des formulaires, lire des animations, etc.
+
+**4. Affichage de la page**
+La combinaison de ces trois éléments produit la page web que vous voyez finalement.
+
+### Les frameworks frontend modernes : de HTML à React/Vue
+
+HTML, CSS et JavaScript constituent la « trinité » du développement frontend ; ils sont la base de toutes les pages web. Mais quand les pages deviennent complexes, les utiliser directement devient difficile : le code est dur à maintenir, il y a beaucoup de travail répétitif, et la synchronisation des données est problématique.
+
+Les <strong>frameworks frontend modernes</strong> (React, Vue, Angular) s'appuient sur HTML/CSS/JS pour rendre le développement plus efficace :
+
+**1. HTML/CSS/JS (stade de base)**
+Manipulation directe des éléments de la page, adapté aux pages simples. Mais quand le volume de code augmente, toute la logique est mélangée, ce qui rend la maintenance difficile.
+
+**2. jQuery (stade de transition)**
+Simplifie les manipulations du DOM, rendant le code plus concis. Mais il faut toujours gérer manuellement l'état de la page et mettre à jour manuellement les éléments correspondants quand les données changent.
+
+**3. React/Vue (stade moderne)**
+Adopte une conception par composants et pilotée par l'état :
+- **Composants** : découper la page en modules indépendants et réutilisables (boutons, cartes, barres de navigation)
+- **Pilotage par l'état** : quand les données changent, le framework met à jour automatiquement l'interface correspondante
+
+::: tip 💡 Pour comprendre simplement
+- **HTML/CSS/JS** = matériaux de base (briques, ciment, acier)
+- **React/Vue** = charpente de construction (fournit les normes et outils pour bâtir)
+
+À l'ère de la programmation assistée par IA, vous n'avez pas besoin de maîtriser tous les détails des frameworks ; il vous suffit de comprendre leurs concepts de base pour pouvoir utiliser le langage naturel pour demander à l'IA de générer du code.
+:::
+
+### Dans le Vibe Coding
+
+**Point clé : vous n'avez pas besoin de coder, juste de savoir décrire.**
+
+Une fois les concepts frontend compris, vous pouvez décrire vos besoins à l'IA ainsi :
+
+> « Crée une page de classement avec React, avec la liste des scores à droite, et en cliquant sur une ligne, affiche les détails du joueur en dessous, dans un style épuré et moderne. »
+
+Pour approfondir les bases du frontend (HTML, CSS, JavaScript), consultez [l'annexe sur les fondamentaux du Web](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive). Pour comprendre l'évolution historique du frontend, consultez [l'annexe sur l'évolution des frameworks frontend](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks).
+
+## <span id="appendix-2">[Annexe 2 : Qu'est-ce que le Vibe Coding exactement](#appendix-nav)</span>
+
+> 💡 Qu'est-ce que le Vibe Coding ? L'informaticien [Andrej Karpathy](https://karpathy.ai/) (co-fondateur d'OpenAI, ancien responsable IA chez Tesla) a introduit le terme **vibe coding** en février 2025. Ce concept désigne une méthode de programmation reposant sur les LLM, <strong>permettant aux développeurs de générer du code fonctionnel en fournissant des descriptions en langage naturel plutôt qu'en écrivant manuellement du code.</strong>
+
+![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png)
+
+Littéralement, le Vibe Coding peut être compris comme une façon de « développer en parlant ». Son changement fondamental est le suivant : vous n'avez plus besoin d'écrire du code ligne par ligne, de vérifier la syntaxe, de déboguer ; vous décrivez simplement ce que vous voulez en langage naturel, par exemple :
+
+« J'ai besoin d'une page de connexion, avec un champ pour le numéro de téléphone et un champ pour le code de vérification. »
+« Après une connexion réussie, rediriger vers la page d'accueil et afficher le nom d'utilisateur en haut à droite. »
+« Donne-moi un simple jeu de Snake contrôlable au clavier avec les flèches directionnelles. »
+Les grands modèles de langage (LLM) traduisent automatiquement ces descriptions en code réellement exécutable et génèrent les pages, la logique et les structures de données correspondantes. Après avoir vu le résultat, vous exprimez vos modifications en langage naturel : « rends le bouton plus grand », « change le fond en sombre », « enregistre le score et affiche un classement », et l'IA continue à ajuster l'implémentation selon vos demandes.
+
+Dans ce mode, vous n'avez pas besoin d'apprendre un langage de programmation avant de coder ; vous concentrez votre énergie sur : décrire clairement ce que vous voulez faire, évaluer le résultat « est-ce que ça correspond ? », puis proposer de nouvelles modifications. L'IA se charge de traduire ces idées de haut niveau en implémentation concrète, réduisant ainsi considérablement le travail de codage mécanique et répétitif.
+
+Pour plus de détails sur le Vibe Coding : [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
+
+Pour plus de contenu de Karpathy : [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
+
+### Comment faire semblant d'être un maître du Vibe Coding
+
+En réalité, dans un vrai processus de vibe coding, on n'utilise généralement pas de prompts très complexes. Peut-être qu'au début on doit fournir un prompt global précis et modérément complexe pour l'ensemble du programme, mais ensuite, à chaque étape, vous n'aurez probablement besoin que de ce type de prompts :
+
+```
+"Il y a un bug dans le code, corrige-le."
+"Je ne veux pas un bout de code, donne-moi le code corrigé complet."
+"Ton code a toujours des problèmes."
+"Corrige à nouveau et donne-moi le code corrigé complet."
+"Ça marchait tout à l'heure, pourquoi ça ne marche plus ?"
+"Tu n'as pas compris ce que je voulais ? Ne modifie pas mon code d'origine."
+"N'ajoute pas de fonctionnalités de débogage."
+"Ne fais pas ce que je ne t'ai pas demandé."
+"Où est la fonctionnalité que je t'ai demandée ?"
+"Tu ne me comprends pas ?"
+"Je veux juste une fonction."
+"Je t'ai dit de te référer à mon code précédent."
+"N'ajoute pas de commentaires inutiles."
+"Ne modifie pas la logique de base de mon code."
+"Aide-moi à modifier le code."
+"Modifie en te basant sur mon code..."
+"Ne change pas mes noms de variables !!!"
+"Ne change pas les noms de fonctions originaux !"
+"Ne touche pas à mes variables."
+"N'ajoute pas de fonctionnalités supplémentaires."
+"Ne génère pas juste un squelette, génère le code complet."
+```
+
+Cela peut paraître exagéré, mais en réalité, ce sont les types de prompts que nous utilisons couramment dans notre travail quotidien. En raison de la <strong>limite de longueur de contexte</strong> des grands modèles de langage, ou parfois de leur <strong>capacité de suivi des instructions</strong> qui n'est pas très forte, le modèle peut oublier des contenus discutés plus tôt dans la conversation. En vibe coding, nous préférons les modèles à contexte long et ceux avec une forte capacité de suivi des instructions.
+
+## <span id="appendix-3">[Annexe 3 : Contexte des modèles](#appendix-nav)</span>
+
+Le contexte d'un modèle peut être compris comme la mémoire à court terme de l'IA. Il désigne tout le contenu textuel que le modèle peut « voir » et « retenir » au cours d'une conversation ou d'une tâche, y compris vos questions précédentes, les instructions système, les documents de référence, etc.
+
+C'est précisément grâce au contexte que l'IA peut comprendre que vous poursuivez sur le sujet précédent, et mener des conversations tour par tour qui semblent cohérentes et naturelles. Sans contexte, chaque phrase serait pour le modèle une question entièrement nouvelle, incapable de savoir ce que vous avez dit avant.
+
+Chaque modèle a sa propre longueur de contexte effective (context window), généralement mesurée en tokens (une unité correspondant approximativement à des « fragments de mots »). Les modèles actuels se situent généralement entre 32k et 128k tokens. Plus le contexte est long, plus le modèle peut « lire » de contenu en une seule fois.
+
+Quand le contenu que vous saisissez approche ou dépasse la limite de contexte du modèle, plusieurs phénomènes courants peuvent apparaître :
+
+- Le modèle commence à oublier des détails ou des informations clés dans les longs textes
+- La conversation dévie progressivement de l'objectif initial
+- Les contenus cités deviennent incohérents entre différentes questions
+
+Ces phénomènes ne signifient pas que le modèle est soudainement « devenu bête », mais résultent naturellement lorsque la capacité de contexte est saturée ou presque saturée.
+
+Dans la pratique, nous souhaitons un contexte aussi long que possible, tout en étant conscients que :
+
+- Plus le contexte est long, plus les ressources de calcul sont importantes
+- Le coût d'appel augmente en conséquence
+
+Il faut donc trouver un équilibre entre laisser le modèle voir suffisamment de contenu et maîtriser les coûts et l'efficacité.
+
+## <span id="appendix-4">[Annexe 4 : Capacité de suivi des instructions](#appendix-nav)</span>
+
+La capacité de suivi des instructions désigne la capacité du modèle, après avoir compris vos instructions, à les exécuter de manière précise et complète. Cela inclut non seulement la capacité à répondre à des questions, mais aussi à accomplir des tâches selon un format, un style et des étapes spécifiés.
+
+Un modèle avec une forte capacité de suivi des instructions présente généralement les caractéristiques suivantes :
+
+- Il produit le contenu dans la quantité demandée
+- Il couvre tous les éléments spécifiés
+- Il respecte le format et le ton spécifiés
+- Il ne fait pas d'extensions inutiles
+
+En pratique, une forte capacité de suivi des instructions est très importante car elle améliore la stabilité, la reproductibilité et facilite l'intégration système.
+
+<RelatedArticlesSection
+  title="Continuer l'apprentissage"
+  description="À partir de l'« expérience ludique », nous vous recommandons de poursuivre vers le développement local et la pratique produit."
+  :items="relatedArticles"
+/>
+---
+title: 'Debutant 1 : A l ere de l IA, parler c est programmer'
+description: 'Creer un jeu du serpent AI-native par conversation, puis reutiliser la methode pour construire ton propre mini jeu ou demo.'
+---
diff --git a/docs/fr-fr/stage-1/appendix-a-product-thinking/images b/docs/fr-fr/stage-1/appendix-a-product-thinking/images
new file mode 120000
index 0000000..6da89a3
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-a-product-thinking/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/appendix-a-product-thinking/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/appendix-a-product-thinking/index.md b/docs/fr-fr/stage-1/appendix-a-product-thinking/index.md
new file mode 100644
index 0000000..eb956bc
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-a-product-thinking/index.md
@@ -0,0 +1,1100 @@
+---
+title: 'Pensée produit et conception de solutions'
+description: "Apprenez à passer de la construction d'outils IA au fait de penser, juger et peaufiner une application IA qui a du sens. Maîtrisez les concepts essentiels et les méthodes pratiques de la pensée produit."
+---
+
+<script setup>
+const duration = 'Environ <strong>6 heures</strong>'
+</script>
+
+# Pensée produit et conception de solutions
+
+## Guide du chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['pensée produit', 'analyse des besoins', 'conception de solution', 'insight utilisateur']" coreOutput="1 solution produit complète" expectedOutput="idées de conception produit applicables">
+
+Dans les chapitres précédents, vous avez appris à construire différents petits outils dans z.ai et dans un IDE IA local, et vous avez aussi essayé de gérer des sujets d'ingénierie comme la configuration d'environnement et l'installation de dépendances avec Trae. Vous avez désormais la capacité de faire passer une idée du navigateur vers un projet local.
+
+Nous allons maintenant déplacer notre attention de <strong>« peut-on le construire ? »</strong> vers <strong>« qu'est-ce qu'il vaut vraiment la peine de construire ? »</strong>.
+
+Cette leçon abordera de façon systématique :
+- ce qu'est une « idée » et ce qui fait une « bonne idée »
+- comment juger si une direction produit mérite d'être investie
+- comment utiliser un processus reproductible pour transformer une inspiration vague en solution d'application claire
+
+<strong>Objectif principal :</strong> passer de la capacité à construire des outils à la capacité de créer de vraies applications IA que les gens utilisent et qui génèrent de la valeur réelle.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Sources d’idées', description: 'Trouver des idées produit fiables' },
+      { title: 'Découpage de solution', description: 'Transformer une idée en application concrète' },
+      { title: 'Affinage et jugement', description: 'Du fonctionnel vers l’agréable à utiliser' },
+      { title: 'Amplification par l’IA', description: 'Utiliser l’IA pour créer de la valeur' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Ce que vous allez apprendre
+
+En résumé, vous allez apprendre les bases de la construction d’une application : d’où viennent les idées → comment une idée devient une application → comment une application passe de utilisable à excellente → comment utiliser l’IA dans une application → comment trouver des utilisateurs après le lancement.
+
+1. Je veux construire une application, d’où viennent des idées fiables ?
+2. Une fois l’idée trouvée, comment la découper en quelque chose de réalisable ?
+3. Après l’avoir construite, comment la juger et la peaufiner pour en faire une « bonne application » ?
+4. À quelle étape, et comment, utiliser raisonnablement l’IA pour amplifier la valeur ?
+5. Une fois l’application prête, comment trouver les premiers vrais utilisateurs à partir de zéro ?
+
+# 1. Je veux construire une application, d’où viennent des idées fiables ?
+
+Quand on parle de construire une application, beaucoup de gens réagissent d’abord en pensant qu’il faut trouver une idée créative suffisamment marquante. Alors ils regardent les classements tous les jours, lisent des rapports, étudient les produits à la mode, et fixent les histoires de réussite des autres en espérant tomber un jour sur une idée vraiment différente.
+
+Mais la réalité est plus simple et plus dure : beaucoup de gens n’ont en fait aucune idée, ils sont simplement anxieux parce qu’ils n’en ont pas. D’autres se fixent dès le départ une barre beaucoup trop haute : si ce n’est pas assez intéressant, ils ne commencent pas, comme si le banal équivalait à l’échec. Pourtant, quand on avance réellement sur le terrain, on découvre que les applications qui tiennent dans le temps et avancent régulièrement ne sont pas, pour la plupart, sorties d’un brainstorming nocturne, mais ont grandi petit à petit dans des situations de vie très concrètes, autour de problèmes réels.
+
+Le but de ce chapitre est donc de résoudre une question de départ : **comment avoir une idée ? Est-ce que cette idée est fiable ? Vaut-elle votre temps et votre énergie pour la transformer en vraie application ?**
+
+## 1.1 Qu’est-ce qu’une idée
+
+Commençons par une question très basique, mais souvent négligée : qu’est-ce qui compte exactement comme une idée ?
+
+Dans la conversation courante, ce que les gens appellent une idée est souvent une excitation très subjective. Vous voyez peut-être une vidéo dans la rue, vous trouvez immédiatement que cette direction est géniale, et une phrase vous vient à l’esprit : « je pourrais faire quelque chose de similaire ». Ou bien, lors d’une discussion, tout le monde se plaint qu’un produit est difficile à utiliser, et vous ajoutez au passage : « s’il existait un outil qui faisait tout ça automatiquement pour moi… ». À ce moment-là, vous avez bien une pensée floue, mais on est encore loin de quelque chose qui peut réellement être construit.
+
+Ici, fixons-nous un standard un peu plus rigoureux. Nous n’appelons une pensée une idée que lorsqu’elle satisfait au moins les points suivants :
+
+Premièrement, **elle doit viser un type d’utilisateur clair**. Il ne s’agit pas de dire vaguement « tout le monde », mais de pouvoir expliquer clairement à qui cela s’adresse principalement. Est-ce pour les étudiants, les nouveaux arrivants dans le monde du travail, les parents qui ont des enfants, ou bien les développeurs indépendants, les vendeurs e-commerce, les petits entrepreneurs ? Des personnes différentes accordent de l’importance à des choses totalement différentes pour une même activité. Si vous n’avez même pas défini la cible, tous les jugements qui suivent vont flotter dans le vide.
+
+Deuxièmement, **elle doit être ancrée dans un scénario concret**. À quel moment cette application est-elle utilisée ? Dans le métro du matin, pendant une pause au travail, avant de dormir, ou le week-end lorsqu’il faut organiser des documents ? Même des outils qui paraissent abstraits, comme les notes ou la gestion de tâches, quand on les observe attentivement, ont toujours une partie qui est utilisée fréquemment et qui est fortement liée à certains contextes.
+
+Troisièmement, **elle doit aider l’utilisateur à accomplir une tâche claire**. La tâche n’a pas besoin d’être énorme, mais elle doit pouvoir être formulée. Par exemple : organiser la liste des choses à faire de la journée, condenser un long article en quelques points clés, générer un compte rendu de réunion structuré, ou produire un itinéraire réaliste pour une sortie du week-end dans une ville. Plus vous pouvez formuler la tâche précisément, plus il sera facile ensuite de concevoir les fonctionnalités et d’évaluer la valeur.
+
+Quatrièmement, **elle doit proposer une méthode ou un outil meilleur que l’existant**. Comment l’utilisateur faisait-il cette tâche auparavant ? En mémoire, sur papier, dans Excel, avec des captures d’écran, ou en jonglant entre différentes applications ? Si vous apportez quelque chose de manifestement plus simple, plus stable et plus agréable, alors l’idée commence vraiment à avoir de la valeur.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image1.png)
+
+Si vous n’arrivez pas à formuler clairement ce qui précède, ce n’est pas grave. Nous sommes à l’ère de l’IA : vous pouvez transformer tout cela en un prompt complet, y ajouter votre idée, vos utilisateurs cibles et votre scénario d’usage, puis laisser un grand modèle vous aider à compléter et à affiner. Considérez le modèle comme un partenaire produit toujours disponible : dialoguez avec lui, questionnez-le, modifiez, et vous pourrez rendre concret un concept encore flou.
+
+## 1.2 Idées et besoins utilisateurs : la première ligne de défense contre l’auto-satisfaction
+
+Quand on construit une application pour la première fois, le piège le plus facile est celui de l’auto-satisfaction. C’est-à-dire que vous vous enthousiasme tellement pour votre idée que vous la trouvez révolutionnaire, mais quand vous l’expliquez à des utilisateurs ordinaires, leur réaction reste calme, parfois un peu perdue. Ils hochent poliment la tête et disent seulement : « c’est pas mal ». Ensuite, une fois le produit lancé, ils ne le téléchargent pas et ne l’utilisent pas dans la durée.
+
+Pour éviter cela, il faut séparer l’idée et le besoin utilisateur.
+
+Commençons par ce qu’est un **besoin utilisateur**. On peut le résumer simplement : dans un scénario concret, ce sont les coûts que l’utilisateur souhaite réduire, ou les valeurs qu’il souhaite augmenter, pour atteindre un objectif donné. Ces coûts ne sont pas seulement financiers ; ils comprennent aussi le temps, l’énergie, la charge mentale, le risque d’erreur et même la pression sociale. Par exemple, un nouveau venu dans le monde du travail peut être prêt à payer pour un jeu de modèles simplement pour être moins nerveux lors de son premier compte rendu ; un parent peut accepter de payer un peu plus si cela lui garantit une demi-heure rien qu’à lui chaque jour.
+
+Quand on comprend cela, on voit que **le simple « cool » ne suffit pas à créer un besoin**. Beaucoup d’idées sont effectivement assez nouvelles, mais si elles ne rendent pas l’utilisateur plus efficace, plus serein ou plus confiant dans un objectif précis, il sera difficile de bâtir une application vraiment durable.
+
+Il existe un fossé souvent négligé entre l’idée et le besoin. **L’idée représente votre jugement subjectif, pas une preuve appuyée par des données.** Le besoin, lui, représente ce que les utilisateurs vivent réellement et ce qui les préoccupe. Vous pouvez trouver qu’une fonctionnalité de génération automatique de poèmes est très cool, mais pour la plupart des utilisateurs, un outil qui leur fait gagner dix minutes par jour sur des tâches répétitives de tri et d’organisation sera sans doute bien plus attractif. À moins d’être Steve Jobs ou de posséder un sens du design exceptionnel, faire croire à tout le monde qu’une fonctionnalité de génération de poèmes est « forcément cool » et qu’ils devraient spontanément vous suivre, ce n’est pas simple.
+
+Pour juger une idée, il existe une manière simple de distinguer ce qui ressemble à un **vrai besoin** ou à un **faux besoin**. Un vrai besoin se reconnaît au fait que, même sans votre application, les gens essaient déjà activement de résoudre ce problème. Même si la méthode actuelle est maladroite, ils sont prêts à y consacrer du temps, de l’énergie, voire de l’argent. Par exemple, certaines personnes écrivent leurs propres scripts juste pour alléger un peu leur travail répétitif. Dans ce genre de cas, si vous pouvez proposer une solution plus conviviale et plus généralisable, vous avez souvent une vraie chance de vous installer.
+
+Le faux besoin, au contraire, fonctionne dans l’autre sens. Si vous ne le soulevez pas vous-même, la plupart des gens ne verront même pas que c’est un problème, et encore moins quelque chose d’absolument nécessaire à résoudre. Les scénarios que vous décrivez existent davantage dans votre imagination que dans la vie quotidienne des utilisateurs. Après votre présentation, ils trouveront l’idée sympathique, intéressante, mais n’achèteront pas, et risquent même d’oublier aussitôt. De telles idées peuvent servir pour des histoires, mais elles sont dangereuses pour un produit.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png)
+
+Donc, **la première ligne de défense contre l’auto-satisfaction est de comprendre les besoins utilisateurs.** Dès le départ, vous devez vous forcer à répondre à une question apparemment simple mais très importante : à part moi, qui d’autre se plaint vraiment de ce problème ? Vous pouvez aller voir les forums, les communautés, les commentaires, ou demander directement à quelques personnes autour de vous qui pourraient devenir des utilisateurs. Si vous entendez rarement des plaintes émotionnellement fortes du type « je suis bloqué dessus à chaque fois » ou « la méthode actuelle est vraiment trop pénible », cela veut dire que cette idée reste encore assez éloignée d’un vrai besoin.
+
+## 1.3 Pourquoi les bonnes idées sont de bonnes idées
+
+Toutes les idées n’ont pas le même destin. Certaines, même si vous ne passez que quelques jours à en faire une version grossière mais fonctionnelle, attirent naturellement un petit groupe de vrais utilisateurs prêts à rester et à vous faire des retours avec patience. D’autres, même si vous empilez les fonctionnalités, dépensez de l’argent en publicité et faites beaucoup de promotion sur différentes plateformes, ne parviennent qu’à gonfler temporairement quelques chiffres grâce à une force externe, puis retombent vite dans le silence.
+
+La différence fondamentale derrière cela est de savoir si l’idée touche vraiment un point de problème essentiel.
+
+**Une bonne idée accueille naturellement la croissance** : même sous une forme très rudimentaire, avec seulement quelques boutons simples, si elle résout un petit problème précis de l’utilisateur, elle peut déclencher un certain niveau de croissance organique. Par exemple, un petit outil qui convertit rapidement la parole en texte peut, au début, n’être qu’une page web avec quelques boutons, mais si la qualité de reconnaissance est bonne et que l’usage est naturel, beaucoup de gens seront prêts à partager le lien à leurs proches, parce que cela leur fait simplement gagner du temps.
+
+**Une mauvaise idée dépend souvent dès le départ d’une force externe pour fonctionner**. Même si l’interface est jolie et le cœur du produit très “haut de gamme”, vous devez pousser sans cesse, faire du bruit, expliquer encore et encore ; et dès que votre effort commercial ralentit, les chiffres d’usage chutent brutalement. Vous continuez à injecter des ressources, à nouer des partenariats, à organiser des opérations, mais vous avez toujours l’impression de ramer à contre-courant. Le problème n’est pas que vous exécutez mal, c’est que le point de départ ne touche pas une douleur suffisamment réelle.
+
+Bien sûr, les situations ci-dessus ne sont pas absolues. Par exemple, sur un marché en phase initiale, il peut y avoir un délai avant que les utilisateurs perçoivent la valeur ; et lorsqu’il existe des concurrents, il faut aussi prendre en compte le design, la difficulté d’utilisation, la marque, etc. Mais ce sont des sujets plus profonds, que nous ne traiterons pas ici.
+
+Quand on se demande s’il faut continuer à investir dans une idée, ce qui compte vraiment n’est pas à quel point l’idée paraît brillante, mais si elle peut naturellement faire naître un chemin allant du problème à la solution. On ne cherche pas à prouver qu’on est créatif ; on cherche un point de départ utile, à partir duquel on pourra peu à peu polir un petit outil jusqu’à en faire une vraie application utile.
+
+Le choix compte plus que l’effort.
+
+## 1.4 D’où viennent les bonnes idées : quatre sources et des exemples concrets
+
+Quand beaucoup de gens pensent à trouver une idée, ils s’imaginent un individu assis à son bureau, le regard fixé sur le plafond, en espérant qu’un éclair d’inspiration tombe du ciel. En réalité, les bonnes idées viennent rarement comme ça. Elles naissent plutôt de petites observations de la vie quotidienne, de questions répétées dans des communautés, de tonnes de plaintes en ligne, ou encore d’un tri progressif à partir de produits déjà existants.
+
+Si vous prenez vraiment au sérieux les quatre sources suivantes, vous pourrez facilement y dénicher des directions de départ.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png)
+
+### Aimer sa propre vie
+
+Il existe un principe très simple mais très efficace : **plus vous participez activement à votre propre vie, plus vous découvrez facilement les problèmes, et plus vous êtes capable de juger quels problèmes méritent d’être résolus.** Participer signifie ici que vous ne regardez pas la vie des autres à travers un écran, mais que vous la vivez, l’essayez et vous y trompez vous-même. Plus vous prenez vos centres d’intérêt au sérieux, plus ils ont de chances de devenir un terrain fertile pour faire naître des idées.
+
+Par exemple, si vous aimez particulièrement vivre avec des chats, une journée passée avec votre propre chat vous donnera souvent plus d’informations que la lecture de cent conseils “comment s’occuper d’un chat”. Vous saurez où les chats font tomber les objets, vous saurez à quelle heure ils sont les plus actifs, dans quelles situations ils se stressent le plus, et vous vivrez personnellement les détails du nettoyage de la litière, du brossage, de la coupe des griffes et des visites chez le vétérinaire. **Chaque expérience un peu pénible est en réalité un indice potentiel de produit.**
+
+Prenons la photo de votre chat : beaucoup ont déjà connu cette scène, le téléphone levé, mais le chat refuse obstinément de regarder l’objectif, baisse la tête pour se lécher les pattes ou fixe un autre coin de la pièce. Ne pourrait-on pas imaginer un petit outil qui afficherait sur l’écran du téléphone ou de la tablette un point rouge, une plume ou un petit insecte en mouvement, juste pour attirer l’attention du chat ? Lorsque vous appuyez sur le bouton photo, l’outil bougerait automatiquement près de la caméra avant pour “tromper” le regard du chat et le faire regarder vers l’objectif, tout en prenant plusieurs photos d’affilée pour vous aider à choisir celle qui est nette et jolie. En allant un peu plus loin, l’application pourrait même enregistrer quelles couleurs et quels trajectoires de mouvement attirent le plus chaque chat, et utiliser la prochaine fois un mode de jeu “exclusif” pour ce chat afin d’augmenter le taux de réussite.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image4.png)
+
+Si vous aimez le maquillage ou les soins de la peau, chaque produit sur l’étagère de votre salle de bain représente énormément d’essais, d’erreurs et de décisions. Vous avez peut-être déjà l’habitude de prendre une photo de chaque maquillage avec votre album photo, mais à chaque fois que vous revenez dessus, il faut vous rappeler quel rouge à lèvres et quelle palette vous aviez utilisés ce jour-là. Ne pourrait-on pas enregistrer tout cela de manière systématique pour créer votre propre catalogue de looks ? L’application pourrait même vous aider à voir quels looks sont les plus fréquents selon les contextes, quelles combinaisons rendent le mieux en photo, afin que vous n’ayez plus à repartir de zéro à chaque fois que vous choisissez votre maquillage.
+
+Plus concrètement, beaucoup de gens vivent ce genre de situation : le matin, le temps presse, vous ouvrez votre album pour retrouver “ce maquillage de trajet qui avait si bien marché”, mais après avoir fait défiler pendant longtemps, vous ne savez toujours plus quels produits vous aviez vraiment utilisés. Ne pourrait-on pas imaginer une petite fonction qui, après la prise d’une photo de maquillage, vous laisse simplement dire à votre téléphone : “Aujourd’hui c’est un maquillage d’entretien, j’ai utilisé la palette orange-brun n°01 et un rouge à lèvres couleur pâte de haricot rouge”, et l’application reconnaît automatiquement cela pour générer une “recette de maquillage” liée à la photo ? La prochaine fois, il suffirait de chercher “entretien”, “ombre à paupières orange-brun”, “pâte de haricot” pour voir instantanément tous les looks associés, voire générer automatiquement une liste “aujourd’hui uniquement des maquillages adaptés au trajet, réalisables en cinq minutes”. Les quelques minutes gagnées chaque matin sont un problème très concret qui a été résolu.
+
+Si vous aimez les city walks ou les formes de slow travel, vous utilisez peut-être déjà plusieurs outils pour reconstruire votre expérience : l’application de carte enregistre les itinéraires, les notes listent les cafés à visiter, l’album photo rassemble des images et des impressions le long du parcours. Alors, pourquoi ne pas imaginer une application qui relie itinéraires, lieux visités, photos et texte dans un journal de marche avec une timeline et une vraie histoire ? Mieux encore, vous pourriez partager l’itinéraire en un clic avec vos amis, afin qu’ils puissent vivre une autre version de la même ville.
+
+On peut aussi aller chercher un détail encore plus quotidien : beaucoup de gens, lors d’un city walk, ressentent cette frustration très simple, “ce coin était magnifique sur le moment, mais une fois rentré, impossible de le retrouver sur la carte”. Ne pourrait-on pas créer une fonction ultra légère : quand vous arrivez dans un endroit qui vous plaît, vous maintenez le bouton des écouteurs et dites “marque cet endroit, c’est un bon trajet pour une promenade en amoureux”, et l’application place instantanément un marqueur vocal à l’endroit où vous êtes, en enregistrant automatiquement l’heure, la météo et le niveau sonore ? Plus tard, vous ou vos amis, en ouvrant la carte de la ville, pourriez voir ces “points d’ambiance testés sur le terrain” : les coins où l’on peut rêver seul, ceux qui sont beaux la nuit, ceux qui sont parfaits pour parler en marchant. Les petits carrefours qui seraient sinon “oubliés juste après être passés” deviendraient ainsi peu à peu une base de données d’expériences urbaines pleine de relief.
+
+Ces exemples veulent en fait montrer une seule chose : **vous devez aimer votre vie, car votre vie est votre meilleure source d’idées.** Les petites contrariétés quotidiennes, les solutions de fortune improvisées, les endroits qui vous semblent un peu pénibles mais que vous continuez à supporter : si vous acceptez de les regarder un peu mieux et de vous demander si un petit outil pourrait les améliorer, ils peuvent tous devenir des prototypes de produits futurs.
+
+### Explorer votre propre audience
+
+Ce qu’on appelle “vos assets d’audience”, ce sont simplement des personnes que vous pouvez déjà toucher. Cela peut être vos lecteurs, une communauté que vous animez, un groupe interne dans votre entreprise, ou une communauté d’intérêt à laquelle vous participez depuis longtemps. Tant que vous avez un canal vous permettant d’entendre de façon régulière ce que certaines personnes disent, craignent et espèrent au quotidien, vous avez un avantage énorme sur quelqu’un qui part de zéro.
+
+Prenons un exemple très simple. Si vous organisez une communauté de designers, ce que vous voyez chaque jour dans le groupe est en fait un trésor de besoins. Quelqu’un se plaint que les clients modifient toujours les maquettes, quelqu’un n’aime pas le modèle de facturation de certains sites de ressources, quelqu’un trouve que jongler avec plusieurs tailles de formats fait perdre beaucoup de temps. Derrière chaque plainte se cache un indice potentiel de produit. Par exemple, vous pourriez créer un outil simple d’adaptation de tailles qui génère en un clic un design dans les formats courants de chaque plateforme ; ou un petit outil qui enregistre et réutilise des composants fréquents pour aider les designers à faire plus vite leur travail répétitif.
+
+Si vous êtes dans une communauté de préparation aux examens, le groupe peut être rempli en permanence de sujets similaires : “je n’ai pas la forme aujourd’hui”, “mon planning a encore pris du retard”, “quels documents étudier pour être plus efficace”, “comment tenir mes check-ins”. Vous n’avez pas besoin d’imaginer tout cela de toutes pièces. Il suffit d’observer un moment, d’organiser les difficultés que tout le monde répète, et vous pouvez déjà esquisser la direction fonctionnelle initiale d’une application d’apprentissage : objectifs mieux découpés, retour de check-in plus humain, visualisation de progression plus réaliste.
+
+Dans ces cas-là, vous n’avez pas besoin de construire dès le départ un grand produit pour tout le monde. Il suffit d’admettre une chose : ce petit cercle de personnes que vous avez sous la main est votre meilleur point de départ. Plus vous les comprenez profondément, plus vous percevez leurs petits tracas, dits ou tus, et plus vous avez de chances de construire quelque chose qui sera réellement utilisé.
+
+### Explorer les besoins dans l’espace public
+
+Même si vous n’avez pas encore votre propre communauté ou votre propre groupe de lecteurs, ce n’est absolument pas un problème. Chaque jour, d’innombrables personnes racontent bruyamment leurs difficultés et leurs frustrations sur différentes plateformes du web. Ces voix publiques sont une immense réserve d’or, simplement la plupart des gens ne les écoutent jamais sérieusement.
+
+Vous pouvez choisir quelques plateformes liées à des secteurs qui vous intéressent, puis rechercher régulièrement des mots-clés chargés d’émotion. Par exemple : **“c’est pénible”, “des recommandations ?”, “comment résoudre ça”, “vraiment trop compliqué”, “il n’y a pas mieux ?”** Ensuite, parcourez patiemment les publications et les commentaires, en vous concentrant sur deux types d’informations.
+
+Le premier type, ce sont les problèmes qui reviennent sans cesse depuis longtemps. Par exemple, dans les espaces liés à la recherche d’emploi, on voit régulièrement des gens demander comment écrire un CV, préparer sa présentation, ou relancer après un entretien ; dans les groupes de parents, les questions reviennent sans cesse autour des repas de bébé, de l’organisation des horaires ou de la communication avec les enfants ; dans les communautés de petits commerçants, tout le monde s’inquiète en permanence de la gestion des stocks, des flux de trésorerie ou des plannings du personnel. Ces problèmes répétés de longue date sont des douleurs systémiques qu’un secteur expose encore et encore.
+
+Le second type, ce sont les situations où les utilisateurs s’en sortent avec des moyens très maladroits. Par exemple, certaines personnes écrivent toutes leurs tâches sur papier puis prennent une photo pour l’envoyer dans le cloud ; d’autres copient-colle sans cesse d’une application à l’autre juste pour transformer un contenu d’un format à un autre ; d’autres encore rassemblent manuellement les données de plusieurs canaux dans un seul tableau. Dans ces cas-là, si vous observez bien, vous trouverez beaucoup de petites failles susceptibles d’être rendues plus systématiques, plus outillées et plus simples.
+
+Explorer les besoins dans l’espace public, c’est en fait entraîner une capacité : passer du rôle de simple observateur à celui de capteur. Quand vous vous habituez à chercher ces mots-clés, à noter les cas, votre cerveau accumule peu à peu une sensibilité aux vrais problèmes, et cette sensibilité vous aide ensuite à chaque étape de la conception produit.
+
+### Se tenir sur les épaules des géants
+
+Une autre source d’idées souvent négligée, ce sont les produits et projets existants. Le monde a déjà produit énormément de personnes très compétentes qui ont exploré des chemins pour nous. Vous n’êtes pas obligé de repartir de zéro à chaque fois ; vous pouvez vous placer à l’endroit où d’autres sont déjà arrivés, puis faire un pas de plus.
+
+Les **hackathons, concours d’innovation produit et startup demo days** font souvent apparaître beaucoup de petits projets intéressants. Ils ont généralement deux caractéristiques : peu de temps et peu de ressources. Cela ressemble justement à votre situation si vous voulez lancer une petite application. Quand vous regardez ces projets récompensés, posez-vous deux questions : si ce produit ne servait qu’un segment encore plus étroit, serait-il plus facile à faire décoller ? Si on coupait la moitié, voire les deux tiers des fonctionnalités pour ne garder que la boucle essentielle, le produit ne deviendrait-il pas au contraire plus clair ?
+
+De la même manière, les outils listés sur les **classements produits, les projets open source et les sites de collecte d’outils** peuvent tous servir de point de départ. Choisissez-en quelques-uns qui vous intéressent et démontez-les un par un : à qui ils rendent service, quel problème ils résolvent, quelles sont les lacunes évidentes de leur forme actuelle, et ce qui changerait s’ils étaient déplacés dans un autre contexte ou un autre pays. Il ne s’agit pas de copier, mais de vous entraîner à comprendre la relation entre problème et solution.
+
+Le monde hors ligne fonctionne de la même manière. Quand vous faites la queue pour vous inscrire à l’hôpital, attendez un table au restaurant, remplissez plusieurs fois les mêmes champs dans une administration, ou réécrivez encore et encore les mêmes informations sur des formulaires papier, arrêtez-vous un instant et demandez-vous : y a-t-il ici de la place pour **la systématisation, la numérisation et l’automatisation** ? Les situations chaotiques, répétitives et peu efficaces sont souvent le terreau où poussent les outils de demain.
+
+Si vous continuez longtemps à miner ces quatre sources, vous découvrirez que les idées ne sont pas des miracles qui tombent du ciel. Ce sont des sous-produits d’une interaction de longue durée avec la vie, avec les autres et avec le monde de l’information.
+
+## 1.5 Résumer une bonne idée en une phrase : l’art du moins pour plus
+
+Une fois que vous savez d’où viennent les idées, l’exercice suivant est **d’essayer d’expliquer votre idée en une seule phrase**. Cela paraît simple, mais c’est en réalité très strict, car cela vous oblige à affronter une vérité : **votre idée a-t-elle réellement un noyau clair ?**
+
+Les gens retiennent rarement quelqu’un parce qu’il sait tout faire. Ils retiennent plutôt une caractéristique nette : un style reconnaissable, une manière de parler stable, ou une phrase clé dans les discussions. Les produits fonctionnent pareil. **Mieux vaut qu’une personne garde une impression simple et claire de vous que d’essayer de lui faire retenir dix fonctionnalités.**
+
+Une erreur fréquente quand on écrit cette phrase est d’être trop large. Par exemple : “C’est une application qui aide les utilisateurs à améliorer leur anglais.” C’est juste, mais cela ne dit presque rien. Pour qui : débutants, étudiants, professionnels ? Comment : vocabulaire, compréhension orale, expression, correction écrite ? Quel effort faut-il fournir et quel changement peut-on attendre ? L’information essentielle se dilue.
+
+Une meilleure version est beaucoup plus précise. Par exemple : “Une application de vocabulaire qui aide les personnes qui prennent le métro à mémoriser 100 mots essentiels en un mois avec 10 minutes par jour.” Là, on dit déjà trois choses importantes : le coût d’utilisation est contrôlable (10 minutes par jour), le résultat attendu est visible (100 mots en un mois) et le scénario est clair (le temps de trajet). L’utilisateur peut rapidement juger si cela lui convient.
+
+Cet exercice de la phrase unique vous oblige en réalité à répondre sans cesse à trois questions : **qui vous aidez exactement, dans quel scénario vous voulez qu’on pense à vous, et quel résultat vous apportez dans quel délai.** Ce n’est qu’en acceptant de combiner ces détails, même au prix d’un style moins spectaculaire, que votre idée devient compréhensible et partageable.
+
+Vous pouvez aussi appliquer cet entraînement à votre propre avenir. Essayez d’écrire une seule phrase sur vos trois prochaines années : qui vous servez principalement, quel type de problème vous résolvez, et quels résultats visibles vous avez produits. Cela aide à prendre de meilleures décisions : ce qu’il faut absolument garder, et ce qu’il est possible de lâcher. Savoir renoncer est souvent plus difficile, mais aussi plus juste, que savoir ajouter.
+
+Si vous ne savez pas où apprendre ce style, c’est très simple : lisez les textes qui se battent chaque jour pour capter l’attention des utilisateurs. Regardez les **descriptions d’une ligne dans les stores, les gros titres des pages d’accueil d’outils ou de jeux, et le texte principal des landing pages**. Recopiez-les, analysez leur structure, puis demandez à l’IA de rédiger une version pour votre propre idée.
+
+## 1.6 Utiliser l’IA pour faire diverger la réflexion et trouver une différenciation
+
+Autrefois, l’idéation reposait surtout sur la réflexion personnelle. Avec l’IA, vous disposez en pratique d’un partenaire de brainstorming disponible à la demande. Bien utilisée, elle peut élargir énormément votre espace d’idées.
+
+Quand vous êtes bloqué et que vous tournez toujours autour des mêmes quelques pensées, décrivez votre idée actuelle à l’IA le plus clairement possible, puis demandez-lui de vous aider sur des tâches précises. Par exemple : **pour la même tâche centrale, listez 20 groupes d’utilisateurs différents** ; ou bien reformulez le cas d’usage pour des étudiants, des freelances, des parents et des petits commerçants ; ou encore demandez à l’IA de répondre depuis les points de vue produit, opérations, marketing et technique.
+
+Vous verrez apparaître des scénarios auxquels vous n’auriez pas pensé seul. Votre tâche n’est pas d’accepter tout cela, mais de choisir **la petite zone sur laquelle vous avez une meilleure compréhension et un meilleur avantage de ressources**. Par exemple, l’IA peut lister beaucoup de secteurs, mais si vous vous sentez le plus proche des contextes éducation et création de contenu, alors vous devez approfondir en priorité dans ces directions.
+
+Autre principe important : **une idée commune n’est pas forcément une idée invalide.** Beaucoup de débutants essaient d’éviter tout ce qui est “déjà connu”, en pensant que si d’autres l’ont fait, il n’y a plus de chance. En réalité, c’est plus subtil. Les outils de vocabulaire, les applications de tâches, la comptabilité légère et le suivi d’habitudes restent populaires parce que les problèmes de fond sont réels et persistants. Dans ces espaces-là, la compétition n’est souvent pas de trouver “une idée complètement neuve”, mais **de mieux comprendre un sous-groupe précis et d’exécuter les détails plus proches de sa vraie vie**.
+
+Vous pouvez d’abord lister des idées de débutant classiques, comme un aide-vocabulaire, une application de check-in quotidien, un assistant de prise de notes de lecture, un générateur de CV et un outil d’habitude. Puis, pour chacune, faites un découpage avec l’IA et posez-vous trois questions :
+
+- Si je ne m’adresse qu’à un groupe très précis (par exemple des designers, des juristes, des jeunes mères, des étudiants de master), à quoi cette idée ressemblera-t-elle différemment ?
+- Si je ne cible qu’un scénario fixe (trajet, pause déjeuner de 10 minutes, 30 minutes avant de dormir), est-ce que la fonction et la présentation peuvent devenir plus focalisées ?
+- Si j’optimise à l’extrême la manière dont le résultat est livré (plus facile à partager, à imprimer, ou à importer dans d’autres systèmes), est-ce que cela suffit déjà à créer une différenciation ?
+
+La valeur de l’IA ici n’est pas de remplacer votre décision, mais de transformer un chemin étroit en carte plus large. Vous pouvez voir rapidement là où d’autres sont déjà fortement installés, et quels coins restent relativement ouverts. Mais le choix final revient toujours à une vieille question : où vous vous sentez vraiment concerné, vraiment compétent, et prêt à investir sur le long terme ?
+
+Rappel essentiel : toute discussion sur les idées et la créativité doit finir par revenir aux besoins utilisateurs. L’IA peut accélérer la génération de variations, mais après autant de tours de brainstorming que nécessaire, le critère final reste le même : est-ce que cette idée répond vraiment à une douleur réelle pour un groupe précis, et est-ce qu’elle fait avancer d’un pas un problème qu’ils essaient déjà de résoudre en boucle ?
+
+## Résumé
+
+Utilisez des dimensions simples pour vérifier si une idée est suffisamment claire. Distinguez ce que vous trouvez cool de ce dont les utilisateurs ont réellement besoin. Comprenez que les bonnes idées le sont parce qu’elles touchent très tôt une vraie douleur. Apprenez à creuser en continu dans votre vie, dans les groupes que vous pouvez atteindre, dans l’espace public et dans les produits existants. Entraînez-vous à résumer votre idée en une phrase. Faites de l’IA un partenaire pour élargir la réflexion, pas un outil pour remplacer le jugement.
+
+Quand vous avez déjà une à trois idées de ce type et que vous pouvez **les décrire chacune en une phrase** (qui elle sert, dans quel contexte, avec quel résultat attendu), arrêtez de courir après de nouvelles idées et concentrez-vous sur l’étape suivante : comment en découper une pour en faire un produit réellement constructible et réellement utilisable par de vrais utilisateurs.
+
+Et si l’idée est encore brute ? C’est parfaitement normal. **Être brouillon au début, c’est normal.** L’important, c’est de commencer. Un projet n’a pas besoin d’être parfait pour exister.
+
+## 📚 Assignments
+
+Veuillez réaliser les exercices suivants à partir du contenu ci-dessus :
+
+1. En partant de vos centres d’intérêt, utilisez l’IA pour générer plusieurs « idées » d’application.
+2. Demandez à l’IA d’évaluer, pour chacune de vos idées, s’il s’agit d’un vrai besoin ou d’un faux besoin, puis de donner des insights et des suggestions sur les besoins utilisateurs.
+3. Choisissez une ou deux sources parmi les quatre grandes sources, ou demandez à l’IA de générer plusieurs idées d’application.
+4. Parmi toutes ces Idea, choisissez vos trois idées préférées et essayez de les résumer chacune en une phrase riche en information.
+
+# 2. Une fois l’idée trouvée, comment la découper en application réalisable ?
+
+Dans le chapitre précédent, nous avons résolu une question de départ : quel type d’idée mérite vraiment d’être pris au sérieux.
+
+Le vrai défi commence ici. Beaucoup de gens tombent précisément à cette étape : dans leur tête, ils ont un plan qui semble complet, mais dès qu’il faut passer à l’action, tout paraît trop complexe pour commencer. Trop de fonctionnalités, trop de pages, une technologie qui semble intimidante ; on repousse alors sans cesse, jusqu’à transformer le projet en une phrase d’**auto-réconfort** :
+
+> « Ce n’est pas grave, je le ferai peut-être plus tard... »
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image5.png)
+
+N’y pensez plus : c’est maintenant qu’il faut commencer. Ce chapitre va vous aider à apprendre une méthode pour passer d’une idée à une version réalisable. Vous verrez que créer quelque chose à partir de rien ne dépend pas du génie, mais d’une série d’actions concrètes que l’on peut pratiquer encore et encore : **diverger, converger, découper, affiner, s’inspirer, questionner**. En suivant cet ordre, même sans équipe et sans beaucoup de temps, vous pouvez transformer une idée en demo d’application qui fonctionne.
+
+## 2.1 De l’idée à la solution : le modèle du double diamant, de la divergence à la convergence
+
+Une fois que vous avez appris à dessiner des pages et à proposer des idées, vous allez vite rencontrer un autre problème courant : les idées deviennent de plus en plus nombreuses. Vous écrivez sur un tableau blanc toutes sortes de scénarios et de fonctionnalités, vous remplissez le papier de versions différentes de pages ; cela donne une impression d’avancement, mais au moment de construire réellement, cela devient plus difficile. Tout semble important, tout semble mériter un essai.
+
+C’est là qu’un cadre de réflexion classique et très facile à comprendre devient utile : le modèle du double diamant. Son sens est assez simple : dans beaucoup d’étapes de la vie comme du produit, il faut d’abord diverger, puis converger, au lieu de vouloir tout terminer d’un seul coup dès le début.
+
+### Qu’est-ce que le modèle du double diamant ?
+
+Le double diamant est un cadre de processus d’innovation et de design proposé par le Design Council britannique. Il décrit l’ensemble du processus comme deux losanges reliés : le premier diamant va de la « découverte du problème » à la « définition claire du problème ». Il insiste sur l’exploration large, la recherche et la compréhension des utilisateurs, puis sur la convergence vers le vrai problème central à résoudre. Le second diamant va du « développement de solutions » à la « livraison de la solution finale ». Il commence par l’exploration audacieuse de pistes possibles et de prototypes, puis converge par sélection, filtrage et affinage vers l’option la plus faisable.
+
+Le cœur du modèle est que les deux phases, problème et solution, doivent passer par un mouvement **divergence -> convergence**. Cela évite de sauter trop vite vers une solution et augmente la qualité ainsi que les chances de réussite de l’innovation.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image6.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image7.png)
+
+### Premier diamant : comprendre le problème, diverger d’un point vers l’ensemble puis converger
+
+**Dans le modèle du double diamant, le premier diamant porte sur le problème lui-même.** Vous partez d’une perception floue, vous faites émerger progressivement davantage de situations et de possibilités liées, puis vous convergeez une première fois pour trouver le point de problème qui mérite réellement d’être résolu.
+
+Pour votre application, cela se traduit par quelques actions.
+
+**Dans la phase de divergence, listez autant que possible les scénarios d’usage, les obstacles et les résultats attendus par les utilisateurs.** Ne jugez pas trop tôt ; étalez d’abord tout ce qui vous vient à l’esprit. Pour une application de traitement de documents, vous pouvez par exemple lister des usages dans les transports, avant une réunion, avant de rédiger un rapport ou pendant une rétrospective. Vous pouvez lister les peurs : un résumé inexact, une structure désordonnée, des points clés manqués. Vous pouvez aussi lister les attentes : comprendre plus vite ce qu’un article veut dire, trouver rapidement les parties qui concernent l’utilisateur.
+
+**Dans la phase de convergence, forcez-vous à choisir seulement les une ou deux situations les plus fréquentes et les plus douloureuses.** Supposons que, parmi de nombreux scénarios, vous découvriez que le problème le plus souvent mentionné est celui-ci : lorsqu’un utilisateur reçoit un long document de travail, il veut d’abord comprendre ce que ce document essaie de dire et quelles en sont les conclusions principales. Dans ce cas, l’objectif de la première version peut devenir : aider l’utilisateur à comprendre en cinq minutes le sens central d’un long texte, au lieu de résoudre tous les problèmes liés aux documents.
+
+À la fin du premier diamant, vous devez être beaucoup plus clair qu’au départ : **quel problème vous voulez vraiment résoudre, et pourquoi sa priorité est plus élevée que celle des problèmes voisins.**
+
+### Second diamant : concevoir la solution, de l’idée brute au plan exécutable
+
+**La deuxième partie du double diamant concerne la naissance de la solution.** Vous savez déjà à peu près quel problème résoudre ; l’étape suivante consiste à imaginer autant de façons que possible de le résoudre, puis à choisir celle qui convient le mieux à la première version.
+
+Dans cette phase de divergence, il s’agit d’ajouter des idées : fonctionnalités, scénarios plus précis, formes d’interaction possibles. Pour un outil de résumé de longs textes, vous pouvez imaginer plusieurs niveaux de résumé, différentes formes de restitution, une lecture audio, la possibilité de marquer des passages importants, ou plusieurs styles de résumé. À ce stade, il n’est pas nécessaire de décider ; il faut surtout ouvrir le champ des possibles.
+
+Dans la phase de convergence, utilisez un outil d’évaluation simple mais très pratique : valeur utilisateur × faisabilité × coût en temps. Donnez à chaque idée une note approximative sur ces trois dimensions, par exemple de 1 à 5, puis choisissez en priorité les idées qui ont un bon score global et un coût temporel contrôlable pour composer le MVP, c’est-à-dire la version minimale viable.
+
+Par exemple, la lecture audio peut avoir une valeur utilisateur correcte, mais son intégration technique et front-end peut coûter plus cher en temps. Un résumé texte simple et l’extraction des points clés offrent une valeur tout aussi visible, avec une faisabilité plus élevée et un coût plus faible : c’est donc plus adapté à une première version.
+
+Pendant tout ce processus, rappelez-vous une chose : **l’objectif de la première version n’est pas de créer une application parfaite, mais une version réelle que quelqu’un peut vraiment utiliser.** Elle n’a pas besoin de tout couvrir ; il suffit qu’elle fonctionne correctement sur une tâche précise.
+
+Vous pouvez aussi fixer une limite temporelle au second diamant. Par exemple : livrer une version utilisable en un mois. Dans toutes les idées divergentes, celles qui demandent plusieurs mois peuvent alors être placées dans une liste « plus tard ». Ainsi, vous évitez d’être bloqué dès le début par l’envie de trop faire.
+
+Quand vous prenez l’habitude d’utiliser le double diamant pour organiser vos idées, beaucoup de situations confuses deviennent plus nettes. Vous savez à quel moment il faut penser large, et à quel moment il faut couper avec décision. Vous arrêtez de vouloir tout résoudre d’un coup et vous apprenez à alterner entre divergence et convergence.
+
+## 2.2 Obtenir des étapes exécutables : apprendre à passer de l’abstrait au concret
+
+Après avoir fait diverger les idées, obtenir des idées est relativement simple ; obtenir des étapes exécutables est beaucoup plus difficile. Dire « je veux faire un outil qui améliore l’efficacité » ou « je veux faire une application pour les créateurs » semble ambitieux, mais cela aide très peu au moment d’agir. Au quotidien, vous faites face à des questions très concrètes : **quelle petite partie faut-il construire en premier, quelles pages sont nécessaires**, faut-il prendre en charge l’inscription, faut-il intégrer le paiement.
+
+La capacité nécessaire ici s’appelle **découper et affiner pour transformer l’abstrait en concret**. Il s’agit de transformer un objectif vaste et flou, étape par étape, en éléments d’action minimaux que l’on peut exécuter immédiatement. Cette capacité est importante pour construire un produit, mais elle l’est aussi dans la vie.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image8.png)
+
+### Commencer par un exemple de vie : que signifie vraiment « j’ai envie de manger un burger » ?
+
+Ne parlons pas encore d’application. Revenons à une phrase très simple de la vie quotidienne : « j’ai envie de manger un burger ». À première vue, ce n’est pas compliqué. Mais si vous la découpez sérieusement, vous découvrirez beaucoup de branches concrètes.
+
+D’abord, il y a **la motivation et le besoin intérieur central**. Avez-vous vraiment envie du goût d’un burger ? Voulez-vous simplement régler rapidement un repas ? Voulez-vous passer un moment avec des amis ? Ou réagissez-vous seulement à une belle photo vue en ligne ? Cela semble anodin, mais cela influence directement les choix suivants. Si l’objectif est de voir des amis, l’environnement et l’expérience comptent. Si vous êtes pressé, la vitesse peut compter davantage que le goût.
+
+Ensuite vient **le périmètre de l’action**. Quel type de burger voulez-vous ? À quelle heure ? Voulez-vous seulement le burger, ou un menu avec boisson, frites et dessert ? Si vous avez quelque chose à faire plus tard et que vous ne voulez pas trop manger, le choix change. Vous pouvez même vous demander s’il faut résoudre en même temps le petit-déjeuner de demain, par exemple en emportant un burger simple en plus.
+
+Puis vient **la manière de réaliser cela**. Est-ce que le burger doit être mangé sur place, peut-il être livré, ou êtes-vous prêt à le faire vous-même à la maison ? Chaque choix correspond à une chaîne d’actions totalement différente. Manger sur place implique de chercher un lieu, vérifier les horaires, organiser le trajet. Commander implique de regarder la plateforme, comparer prix et délais. Le faire soi-même implique des ingrédients, des outils et une recette.
+
+Une fois tout cela clarifié, la phrase floue « j’ai envie de manger un burger » devient une suite d’actions concrètes : ouvrir une application de livraison, chercher un restaurant déjà apprécié, choisir un menu, enlever la boisson, garder burger et frites, ajouter une note sans sauce, puis passer commande. Ces actions sont petites, mais immédiatement exécutables ; elles peuvent même être transformées par une IA en plan procédural.
+
+**C’est le sens du découpage et de l’affinage : passer d’un souhait vaste et abstrait à une liste que l’on peut exécuter concrètement.**
+
+### Exemple d’application : par où commencer pour améliorer l’efficacité du traitement de documents ?
+
+Prenons maintenant un exemple plus complexe. Supposons que vous ayez un souhait qui semble raisonnable : « je veux faire une application qui améliore l’efficacité du traitement de documents ». La direction est bonne, mais si vous vous arrêtez à cette demi-phrase, vous ne savez presque pas par où commencer. Vous ne savez pas quelle page dessiner en premier, jusqu’où doit aller la première version, ni comment expliquer l’idée à quelqu’un.
+
+Vous pouvez alors reprendre la méthode de découpage précédente et la rendre plus concrète étape par étape. Pour des raisons de temps, nous ne montrons ici que deux niveaux de découpage.
+
+#### Premier niveau de découpage et d’affinage
+
+**D’abord, vous devez définir ce qu’est un « document ».** Le mot est très large : il peut désigner un tableur, un rapport Word, un fichier PDF, un texte Markdown avec des notes de code, un fichier TXT, voire un document scanné sous forme d’image ou un article académique avec graphiques et formules. Chaque type de document implique des différences d’implémentation. Si le document est une image, il faudra peut-être d’abord ajouter de l’OCR. Si c’est un tableur, le besoin central sera plutôt l’extraction et l’analyse de données, et non une simple réduction de texte.
+
+**Ensuite, vous devez définir ce que signifie « traiter ». Traiter en quoi, et avec quelle méthode ?** Pour certains, traiter signifie réduire un rapport de 50 pages en un résumé lisible de 5 pages. Pour d’autres, cela signifie normaliser des fichiers Word, PDF et Markdown désordonnés dans un modèle commun. D’autres encore s’intéressent à la traduction, à la réécriture et au polissage pour transformer un brouillon passable en version publiable. Posez-vous directement la question : dans mon cas, « traiter » veut-il dire « lire plus vite », « mieux modifier » ou « transmettre plus facilement » ? Selon la réponse, la page d’entrée et la page d’opération seront totalement différentes.
+
+**Le mot « application » doit aussi être défini.** Est-ce un petit outil pour vous seul, ou un produit destiné à un groupe d’utilisateurs ? Une application web, une application mobile, ou une fonction intégrée dans un système existant ? Si vous voulez seulement l’utiliser sur votre ordinateur, une page web rudimentaire ou un script en ligne de commande peut coûter beaucoup moins cher. Si vous voulez que des collègues l’utilisent ensemble, il faudra peut-être réfléchir aux comptes, aux permissions et à la collaboration. À ce stade, il suffit de répondre à une phrase simple : sur quel appareil, et dans quel scénario, vais-je utiliser cela ?
+
+Revenons ensuite à la phrase elle-même : « améliorer l’efficacité du traitement de documents ». Il faut aussi découper les mots clés. **« Avec quoi améliorer » ?** Faut-il forcément utiliser l’IA ? Pas nécessairement. Certaines améliorations d’efficacité peuvent être résolues par des règles, des modèles ou des raccourcis : générer en un clic une couverture de rapport standard, insérer automatiquement une mention légale, appliquer une structure fixe. Ces besoins n’ont peut-être pas besoin de modèle. En revanche, si vous faites face à beaucoup de textes longs non structurés qu’il faut comprendre, résumer ou réécrire, l’IA devient naturellement pertinente.
+
+Le mot « efficacité » mérite lui aussi d’être découpé. **L’efficacité signifie-t-elle seulement la vitesse, ou inclut-elle aussi la qualité, le taux d’erreur et la difficulté de compréhension ?** Lire les points clés d’un document de 20 pages en 5 minutes au lieu de 30, c’est de la vitesse. Repérer rapidement une contradiction logique ou un conflit de données, c’est de la qualité. Aider quelqu’un qui ne connaît pas le jargon professionnel à comprendre un rapport grâce à des annotations, c’est abaisser le seuil cognitif. Demandez-vous : si cette application réussit très bien, quel est le plus grand changement pour l’utilisateur ? « Il passe deux fois moins de temps sur les documents » ou « il se sent moins épuisé lorsqu’il travaille avec des documents » ? Une réponse claire donne une base aux priorités de fonctionnalités.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image9.png)
+
+#### Deuxième niveau de découpage et d’affinage
+
+Supposons que le premier niveau nous donne ce résultat : « je veux faire une application web qui utilise l’IA pour améliorer la vitesse et la qualité de conversion de PDF en texte ». C’est déjà beaucoup plus précis que « améliorer l’efficacité du traitement de documents » : le type de document est défini (PDF), la méthode de traitement aussi (conversion en texte), la direction d’optimisation également (vitesse et qualité), ainsi que la voie technique (IA) et le support (application web).
+
+Mais cette phrase reste un objectif intermédiaire, pas encore un vrai plan produit exécutable. Beaucoup d’informations clés restent générales : **quelle IA utiliser, quel niveau d’amélioration viser, quels scénarios adapter, quels utilisateurs servir**. Il faut donc continuer à descendre et transformer cette phrase en décisions de design et en choix techniques plus fins.
+
+Commençons par « IA ». S’agit-il d’un modèle OCR léger uniquement chargé de reconnaître le texte, ou faut-il introduire un LLM, voire un modèle multimodal, pour corriger les erreurs, reconstruire la mise en page, réorganiser le contenu et comprendre la structure ? Ces choix produisent des conséquences très différentes :
+
+- Coût : calcul, appels API, latence d’inférence, investissement ponctuel ou coût continu.
+- Difficulté de développement : simple intégration d’une API OCR ou conception de prompts, gestion du contexte, voire système d’entraînement et d’évaluation.
+- Forme produit et stratégie de lancement : petit outil d’extraction rapide de texte ou plateforme intelligente capable de restituer plans, tableaux et hiérarchies de titres.
+
+Vient ensuite **le découpage du « document PDF ». Quel type de PDF voulez-vous vraiment prendre en charge ?** Si vous limitez le périmètre aux PDF textuels, principalement composés de texte copiable, vous n’avez pas besoin de traiter dès le départ les scans, les graphiques complexes, les formules ou les mises en page extrêmes. À l’inverse, si vous promettez que « n’importe quel PDF » peut être envoyé, vous devez résoudre dès le début l’OCR des PDF image, la reconstruction de mise en page, l’extraction de tableaux et la gestion texte-image, ce qui multiplie la complexité.
+
+À ce niveau, faites volontairement un rétrécissement et écrivez clairement les compromis. Par exemple : la version actuelle sert principalement les rapports et documents explicatifs PDF à structure claire et majoritairement textuels ; elle ne garantit pas le résultat pour les scans et les documents très mixtes en images et texte. Ainsi, tous les objectifs de vitesse et de qualité reposent sur des conditions contrôlables et explicables, et vous pouvez mieux gérer les attentes des utilisateurs.
+
+Puis regardons « convertir en texte de haute qualité ». Ici, la qualité peut se diviser au moins en trois dimensions :
+
+1. **La reconnaissance est-elle globalement correcte ?** Quel est le taux d’erreur sur les mots, la ponctuation et les symboles spéciaux ? Y a-t-il des blocs de texte illisibles ?
+2. **Les paragraphes et la structure des titres sont-ils conservés ?** Les niveaux de chapitres, séparations de paragraphes, listes et citations sont-ils autant que possible restitués en texte brut ?
+3. **Le résultat est-il facile à modifier et à réutiliser ?** Le texte généré est-il propre, le format régulier, et l’utilisateur doit-il faire beaucoup de nettoyage manuel avant de copier dans Word, Notion ou un éditeur de code ?
+
+**Choisissez d’abord les deux ou trois éléments qui comptent le plus pour vous comme direction principale de la qualité.** Par exemple : garantir en priorité une structure de paragraphes claire et une hiérarchie de titres de base, tout en acceptant quelques erreurs de reconnaissance que l’utilisateur peut corriger en quelques minutes. Ainsi, « haute qualité » cesse d’être un adjectif vide et devient un standard que l’on peut écrire et mesurer.
+
+Regardons enfin la « vitesse ». Si votre objectif parle d’améliorer la vitesse et la qualité, alors « rapide » doit être défini par **un ordre de grandeur perceptible**, et non seulement par une impression. Le compromis caché est important :
+
+- voulez-vous prendre en charge de très longs documents, quitte à faire attendre l’utilisateur ?
+- ou voulez-vous cibler les documents courts et moyens, avec une limite de pages, et livrer le résultat en quelques secondes ou dizaines de secondes ?
+
+Si le scénario typique est de convertir rapidement un rapport, une proposition ou un résumé de recherche d’une dizaine de pages avant une réunion, le choix naturel est :
+
+- fixer une limite raisonnable par document, par exemple « PDF textuel de moins de 20 pages » ;
+- donner un indicateur de délai, par exemple « traitement généralement terminé en environ 10 secondes ».
+
+Une fois ces deux points écrits, les choix techniques (traitement parallèle, file asynchrone), la microcopie d’interface (temps estimé, message d’expiration) et la gestion des attentes peuvent tous s’optimiser autour de l’expérience « documents courts à moyens + retour rapide ».
+
+**Enfin, l’« application web » elle-même doit être resserrée.** Ce n’est pas seulement un choix de support. Demandez-vous : est-ce plutôt un outil temporaire pour vous et un petit groupe interne, ou dès le départ un service en ligne stable pour des utilisateurs réels ?
+
+Si c’est le premier cas, vous pouvez couper beaucoup de complexité : pas besoin d’un système complet de comptes et de permissions, pas besoin d’historique de tâches, de gestion de projets ou de collaboration d’équipe dans la première version. Concentrez-vous sur un flux minimal :
+
+**ouvrir la page -> téléverser le PDF -> attendre le traitement -> afficher le texte modifiable -> copier ou télécharger en un clic**.
+
+Si l’objectif est un service public stable, les versions suivantes devront progressivement considérer la concurrence, les files de traitement, les quotas, la récupération d’erreurs, les logs, la supervision, la sécurité et les permissions. Mais à ce stade de découpage, vous pouvez le définir comme un « petit outil dans le navigateur, utilisable sans connexion » et concentrer toute l’interaction sur le chemin le plus simple.
+
+Lorsque les compromis derrière les mots clés « IA », « PDF », « conversion de haute qualité », « vitesse » et « application web » sont exprimés plus concrètement, la phrase initiale peut se resserrer en une description plus claire et plus exécutable :
+
+> Fournir aux utilisateurs un petit outil basé sur le navigateur, qui prend en charge en priorité les rapports PDF à structure claire et majoritairement textuels. Grâce à un flux d’analyse adapté et à un nettoyage IA léger, il produit en environ 10 secondes un texte modifiable, avec paragraphes clairs, hiérarchie de titres globalement préservée et taux d’erreur acceptable, sans connexion requise.
+
+Après simplification, cela peut devenir :
+
+> Fournir un outil web où l’utilisateur téléverse un PDF textuel de moins de 20 pages et reçoit en environ 10 secondes un texte modifiable avec structure de paragraphes claire, titres préservés, copie en un clic et téléchargement en `.txt`.
+
+Ce type de description n’est plus un slogan vide. Il peut devenir directement un prompt, une instruction de plan pour une IA de développement, un brief pour designer ou un document d’évaluation rapide pour un ingénieur.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image10.png)
+
+À ce stade, deux changements très concrets apparaissent. Premièrement, vous n’êtes plus écrasé par la phrase « je veux faire une application d’efficacité » ; vous avez des étapes sur lesquelles agir immédiatement. Deuxièmement, le coût de communication avec les autres baisse fortement, car vous disposez d’une première solution déjà assez précise.
+
+Passer de l’abstrait au concret, c’est transformer un grand souhait en une liste de tâches que n’importe qui, y compris une IA, peut comprendre et commencer à exécuter. Une fois les problèmes décomposés jusqu’à un niveau atomique, il ne reste en pratique que deux options pour chaque sous-problème :
+
+1. Je résous et j’exécute ce sous-problème.
+2. Une IA ou un autre expert résout et exécute ce sous-problème.
+
+## 2.3 Imaginer votre application sur un tableau blanc : dessiner la première application
+
+Quand beaucoup de gens pensent à commencer une application, les premiers mots qui surgissent sont code, backend, base de données, API et framework. Ce n’est pas surprenant : on nous a longtemps inculqué que construire une application est d’abord un problème technique. Mais si vous mettez toute votre attention sur la technologie dès le départ, vous risquez d’oublier l’essentiel : **qu’est-ce que l’utilisateur vient vraiment faire chez vous ?**
+
+Une pratique très simple, mais souvent négligée, consiste à dessiner d’abord. Vous n’avez pas besoin d’un logiciel professionnel : un tableau blanc, une feuille de papier ou une application de notes suffisent. L’important est de dessiner le parcours complet de l’utilisateur, de son arrivée à sa sortie, avec quelques croquis de pages simples, au lieu d’ouvrir directement l’éditeur pour coder.
+
+Vous pouvez d’abord diviser l’application en trois types de pages : page d’entrée, page d’opération, page de résultat.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image11.png)
+
+### Page d’entrée : par où l’utilisateur arrive et ce qu’il voit au premier regard
+
+La page d’entrée est le premier contact entre l’utilisateur et votre application. Beaucoup de gens conçoivent au début une page d’accueil générique remplie de boutons, de modules et d’espaces de promotion, comme si cela rendait le produit plus riche et plus impressionnant. Mais si vous dessinez cette page sur papier, que vous l’accrochez au mur et que vous faites semblant d’être un visiteur pour la première fois, une question très réelle apparaît : **où dois-je cliquer d’abord ?**
+
+Quand vous dessinez la page d’entrée, pensez comme un guide. Posez des questions concrètes : comment l’utilisateur arrive-t-il ici ? En cliquant sur un lien partagé, en cherchant dans un store, en scannant un QR code ? Chaque source crée des attentes différentes. Un utilisateur qui vient par un lien envoyé par un ami sait peut-être déjà à peu près ce que vous faites ; la page peut alors aller directement à l’essai de la fonction centrale. Un utilisateur venu du store ne sait peut-être rien ; la page doit donc l’aider, en une phrase, à comprendre à quoi sert l’application et comment commencer.
+
+Concrètement, dessinez un cadre de téléphone sur papier, écrivez le titre en haut, puis la zone principale au centre. Notez clairement : qu’est-ce que cette page doit dire à l’utilisateur, et quel choix souhaitez-vous qu’il fasse ici ? Cliquer sur un gros bouton de démarrage, regarder un exemple de résultat, ou remplir une information de base ?
+
+Plus la page de départ est simple et concrète, plus l’utilisateur qui arrive a de chances de ne pas se perdre et de commencer rapidement.
+
+### Page d’opération : ce que l’utilisateur doit saisir, cliquer ou choisir
+
+Une fois que l’utilisateur décide de continuer, il arrive sur la page d’opération, c’est-à-dire la zone de travail de l’application. C’est là que l’interaction réelle se produit, et c’est aussi l’endroit le plus souvent surchargé.
+
+Un exercice très efficace consiste à **n’autoriser l’utilisateur à faire qu’une seule chose**. Écrivez cette chose sur papier dans sa forme la plus simple : soumettre un texte, enregistrer une idée par la voix, choisir un modèle, configurer un paramètre. Puis construisez autour en réduisant au maximum les entrées et les boutons.
+
+Pour une application de résumé automatique de longs textes, la page d’opération la plus grossière mais fonctionnelle peut se limiter à quelques éléments : un champ pour coller le texte, une option de longueur de résumé, un bouton de génération. Vous pouvez ignorer d’abord les détails visuels comme les polices, couleurs et icônes, pour vous concentrer sur : **l’utilisateur sait-il immédiatement quoi faire, de quoi a-t-il besoin, et risque-t-il de se perdre au milieu ?**
+
+Le bénéfice du croquis papier est de pouvoir tester plusieurs versions à coût très faible. Vous pouvez dessiner une version avec toutes les entrées sur une seule page, puis une version en deux petites étapes, et les rejouer mentalement : laquelle bloque le moins ? Par rapport à modifier un flux déjà codé, ce type d’ajustement sur papier coûte presque rien.
+
+### Page de résultat : ce que l’utilisateur obtient et comment l’afficher
+
+Beaucoup d’applications traitent la page de résultat comme un détail. Le développeur pense souvent : le résultat n’est qu’un texte, une image ou une suite de données, il suffit de l’afficher. Pour l’utilisateur, c’est l’inverse. S’il a accepté de saisir, d’attendre et d’essayer, c’est précisément parce qu’il espère voir sur cette page quelque chose de clair et utile.
+
+Quand vous dessinez la page de résultat, partez de ces questions : **quelle est l’information centrale que l’utilisateur veut vraiment voir, et doit-elle être placée à l’endroit le plus visible ?** Quels résultats doivent pouvoir être exportés, sauvegardés ou partagés, et où se trouvent ces entrées ? Faut-il ajouter une explication simple pour que l’utilisateur comprenne ce que le résultat signifie ?
+
+Avec l’exemple du résumé de longs textes, une page de résultat plutôt agréable peut afficher en haut quelques points clés concis, puis un résumé plus détaillé, et garder en bas le lien vers le texte d’origine. À côté, deux boutons bien visibles : copier les points clés et exporter en document. Sur papier, essayez de placer ces zones et d’annoter l’action prévue pour chaque bouton.
+
+Quand les pages d’entrée, d’opération et de résultat sont dessinées, reliez-les par des flèches et parcourez le chemin complet, de la première visite jusqu’à la fin. **Ce processus révèle beaucoup de problèmes que vous n’aviez pas vus**, par exemple : si l’utilisateur veut modifier un détail depuis la page de résultat, comment revient-il à la page d’opération ? S’il hésite sur la page d’opération, existe-t-il une sortie claire ou un brouillon sauvegardé ?
+
+Le cœur de cette section tient en une phrase : dessinez d’abord le processus d’usage, puis seulement ensuite pensez à l’implémentation technique. Même sans savoir coder, vous pouvez **transformer une idée abstraite en prototype visible avec quelques croquis simples**. Plus cette étape est claire, plus la suite sera facile, que vous construisiez vous-même ou avec d’autres.
+
+## 2.4 S’inspirer des applications existantes : copier intelligemment les devoirs
+
+Quand on construit sa première application, on ressent souvent une pression psychologique : il faudrait partir de zéro, inventer soi-même la structure des pages, les interactions et la mise en page visuelle, comme si cela seul comptait comme un vrai produit. En réalité, si vous insistez trop sur ce principe, vous risquez de dépenser énormément d’énergie sur des détails peu importants.
+
+En design d’application, une attitude plus efficace et plus mature consiste à **copier intelligemment les devoirs**. Il ne s’agit pas d’imiter aveuglément, mais d’emprunter de manière sélective des solutions déjà validées, afin de garder votre énergie pour la valeur qui vous est propre.
+
+Il existe sur Internet beaucoup de sites qui collectent des captures d’interfaces, ainsi que de nombreuses pages de présentation dans les stores. Ces endroits sont comme un immense atlas de références. Choisissez plusieurs applications proches de votre direction, par exemple des outils similaires ou des produits destinés au même public, et analysez-les page par page.
+
+Ce qu’il faut observer en priorité n’est pas la beauté des couleurs, mais la manière dont elles traitent plusieurs zones clés :
+
+- comment la navigation est conçue : en bas ou en haut, plusieurs entrées centrales fixes ou un seul bouton principal ;
+- comment les formulaires sont organisés : tout remplir sur une même page ou découper en petites étapes ;
+- lors de l’affichage du résultat, l’information la plus importante est-elle bien mise en évidence, et les informations secondaires sont-elles bien rangées ;
+- quand un nouvel utilisateur arrive pour la première fois, existe-t-il un guide court qui lui montre quoi faire ensuite ?
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image12.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image13.png)
+
+Vous pouvez consulter ces sites de captures et de références :
+
+- [https://www.uisources.com/](https://www.uisources.com/)
+- [https://screenlane.com/](https://screenlane.com/)
+- [https://pagecollective.com/](https://pagecollective.com/)
+- [https://patttterns.net/](https://patttterns.net/)
+- [https://mobbin.com/](https://mobbin.com/)
+- [https://refero.design/](https://refero.design/)
+- [https://scrnshts.club/](https://scrnshts.club/)
+- [https://godly.website](https://godly.website/)
+
+En plus des applications existantes, les projets gagnants de hackathons peuvent aussi inspirer. Un hackathon est une activité de développement collaborative, limitée dans le temps et très intense, où l’on doit produire un prototype ou une solution en peu de temps. Ces projets sont des solutions livrées par des praticiens sous forte contrainte ; ils sont souvent bruts, mais montrent précisément comment compresser le passage d’une idée à un produit qui tourne. Vous pouvez les utiliser pour comprendre ce qu’est un prototype minimal. Mais comme un hackathon reste une compétition courte, la créativité peut y dépasser l’utilité réelle ; les projets gagnants ne conviennent pas toujours comme référence pour un produit de long terme. Il faut juger selon votre situation.
+
+Vous pouvez aussi vous inspirer de sites d’outils : météo, traduction multilingue, encyclopédie de Pokémon, guides de jeux, classements de voitures populaires, annuaires d’outils IA. Ces sites ont souvent des fonctions très simples, mais ils peuvent être d’excellentes « applications » pour certaines personnes. Une idée n’a pas besoin d’être complexe ; elle doit être utile. En observant différents types d’applications, vous comprendrez mieux ce qu’est une vraie demande de marché.
+
+## 2.5 Ne pas attendre que tout soit prêt pour enquêter sur les besoins utilisateurs
+
+Beaucoup de gens disent vouloir faire un produit guidé par les utilisateurs, mais dans la pratique ils préfèrent s’enfermer, construire d’abord la version complète qu’ils imaginent, puis seulement trouver le courage de la montrer. **Cela semble plus présentable, au moins on ne montre pas un brouillon. Mais du point de vue produit, c’est une habitude dangereuse.**
+
+La raison est simple : plus vous contactez les utilisateurs tard, plus vous avez déjà investi dans les détails ; si la direction est mauvaise, la perte est plus grande. Vous avez peut-être écrit beaucoup de code pour une fonction peu importante, dessiné beaucoup d’écrans pour un détail qui intéresse peu de gens, pour découvrir finalement que le vrai blocage des utilisateurs se trouve ailleurs.
+
+Pour éviter cela, gardez en tête un principe simple : demander pendant que l’on dessine, **demander pendant que l’on construit, ne pas attendre la fin pour demander**.
+
+### Demander pendant le dessin : commencer à collecter du feedback dès l’étape papier
+
+Quand vous venez de dessiner, sur tableau blanc ou papier, la page d’entrée, la page d’opération et la page de résultat, vous avez déjà de quoi dialoguer avec les utilisateurs. À ce stade, trouvez deux ou trois personnes qui pourraient devenir des utilisateurs cibles, montrez-leur les croquis et écoutez leur première réaction.
+
+Vous n’avez pas besoin d’entretien compliqué. Observez quelques détails : quand elles voient la page d’entrée, disent-elles spontanément ce que vous espériez, par exemple « ça ressemble à un outil de résumé de longs textes » ? Sur la page d’opération, suivent-elles naturellement l’ordre attendu, par exemple coller le texte puis choisir une longueur de résumé ? Sur la page de résultat, leur regard va-t-il immédiatement vers la partie que vous voulez mettre en avant, ou se perd-il dans un coin peu important ?
+
+Ces observations révèlent les grands problèmes de design avant la première ligne de code. Vous pouvez corriger une fois le prototype papier, puis continuer, au lieu d’attendre que toute l’application soit construite pour changer la structure.
+
+### Demander pendant la construction : inviter des personnes à tester dès la version semi-finie
+
+Quand vous avez une version semi-finie qui permet de traverser le flux de base, il n’y a plus de raison de rester seul à l’utiliser. Même si l’interface est brute, même si beaucoup de fonctions ne sont pas encore présentes, **dès qu’elle accomplit la tâche minimale que vous avez définie, elle peut être testée par de vrais utilisateurs**.
+
+Commencez par des personnes autour de vous, puis par celles que vous avez rencontrées via vos audiences, communautés ou espaces publics. Choisissez des gens prêts à essayer de nouveaux outils. Envoyez-leur un lien, expliquez simplement ce que la version actuelle peut faire, puis demandez-leur de parcourir le chemin de l’entrée au résultat sans trop d’explications de votre part.
+
+**Votre rôle n’est pas de vous défendre, mais d’observer.** Où hésitent-ils ? À quelle étape s’arrêtent-ils ? Quel bouton regardent-ils longtemps sans oser cliquer ? Vous pouvez ensuite poser quelques questions précises : quelle étape a été la plus pénible, quel résultat vous a le plus satisfait, qu’est-ce que vous pensiez trouver mais que vous n’avez pas vu ?
+
+Tester à ce stade a un avantage énorme : vous n’êtes pas encore trop attaché émotionnellement à une solution. Il devient plus facile d’accepter de couper des fonctions qui semblent cool mais que les utilisateurs ne remarquent pas, et d’améliorer de petits détails discrets mais fréquents dans l’usage réel.
+
+### Ne pas avoir peur de montrer quelque chose de brut
+
+Beaucoup de gens ne veulent pas montrer une version précoce par peur de paraître non professionnels. Pourtant, les personnes produit les plus mûres ont rarement honte de leurs premières versions, parce qu’elles savent qu’exposer tôt les problèmes coûte le moins cher.
+
+Changez de perspective : vous ne montrez pas un produit inachevé, vous invitez quelqu’un à participer à son amélioration. Si vous dites clairement qu’il s’agit d’une version très précoce, et que vous cherchez des retours directs plutôt que des compliments, la plupart des personnes concernées par le problème accepteront d’aider.
+
+À ce stade, vous avez appris à transformer une idée abstraite en parcours utilisateur concret avec un tableau blanc ou du papier ; vous savez découper un souhait large en actions minimales que l’on peut commencer demain ; vous savez qu’il ne faut pas tout mettre dans la première version, mais utiliser le double diamant pour alterner divergence et convergence jusqu’au MVP le plus pertinent ; vous savez vous inspirer intelligemment des applications existantes pour la navigation, les formulaires et les résultats ; et surtout, vous savez qu’il ne faut pas attendre que tout soit prêt pour faire entrer les utilisateurs.
+
+Grâce à ces outils et à ces étapes, vous pouvez déjà transformer une idée en application utilisable. Mais vous verrez aussi qu’entre une application utilisable et une application vraiment agréable, il reste encore une couche à franchir.
+
+Parlons donc maintenant de ce qu’est une bonne application, et de la manière de faire avancer votre application après une première version utilisable.
+
+## 📚 Assignments
+
+Veuillez réaliser les exercices suivants à partir du contenu ci-dessus :
+
+1. Utilisez le LLM de votre choix pour demander, à partir de votre idée précédente, une divergence selon le modèle du double diamant ; sélectionnez ensuite une solution réalisable à partir des résultats.
+2. À partir de l’idée précédente, utilisez la méthode de découpage et d’affinage pour obtenir une description plus exécutable, par exemple : « Fournir un outil web où l’utilisateur téléverse un PDF textuel de moins de 20 pages et reçoit en 10 secondes un texte modifiable avec structure de paragraphes claire, titres préservés, copie en un clic et téléchargement en `.txt`. »
+3. À partir de l’idée affinée, essayez de dessiner votre application sur un tableau blanc. L’application doit se concentrer sur deux parties : la conception UI et les fonctionnalités nécessaires, en indiquant où se trouve chaque fonction.
+
+# 3. Après l’avoir construite, comment juger et peaufiner une bonne application
+
+Quand vous avez enfin construit la première version et que vous la mettez dans le monde réel entre les mains d’utilisateurs, vous entrez dans une étape totalement différente. Tout ce qui précédait restait au niveau des idées et du design ; maintenant, le produit est testé pour la première fois par de vrais scénarios d’usage. Vous verrez où les utilisateurs cliquent mal, où ils hésitent, où ils restent bloqués, mais aussi les étapes où ils avancent de manière étonnamment fluide, ou les zones où ils s’arrêtent quelques secondes de plus que prévu. Ces détails sont beaucoup plus honnêtes que toutes les idées que vous vous faites du produit.
+
+La question centrale de ce chapitre est donc : lorsque l’application existe déjà, et qu’un premier groupe d’utilisateurs l’utilise, comment juger à quelle distance elle se trouve d’une bonne application, et comment utiliser les informations issues de l’usage réel pour la peaufiner progressivement ?
+
+## 3.1 Qu’est-ce qu’une bonne application : 4 caractéristiques essentielles
+
+Pour juger si une application est bonne, il ne suffit pas de regarder à quel point vous l’aimez vous-même, ni le nombre de téléchargements ou les usages sur un ou deux jours. Il faut regarder si elle possède des caractéristiques plus profondes et plus stables. On peut commencer par les points suivants.
+
+### Une bonne application apporte une valeur concrète
+
+La caractéristique la plus directe d’une bonne application est qu’elle apporte un bénéfice réel dans un scénario précis. Ce bénéfice n’a pas besoin d’être grandiose ni emballé dans de grands mots, mais il doit être suffisamment concret pour que vous puissiez dire clairement : **qu’a-t-elle évité à l’utilisateur, combien de temps lui a-t-elle fait gagner, ou quelle erreur rend-elle moins probable ?**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image14.png)
+
+Prenons un outil simple de compte rendu de réunion. S’il permet de téléverser un enregistrement, ou d’enregistrer directement pendant la réunion, puis de générer automatiquement un compte rendu structuré avec les actions à faire, les responsables et les dates limites, il ne fait pas seulement gagner du temps de frappe. Il économise l’effort mental de prise de notes, d’organisation, de filtrage et de mise en forme. Vous pouvez dire très concrètement que cet outil économise environ vingt minutes par réunion à une personne. Si toute l’équipe a dix réunions de ce type par semaine, le gain total devient considérable.
+
+Autre exemple : un outil de compression d’images en apparence banal. S’il réduit un lot d’images au tiers de leur taille d’origine tout en gardant une différence presque invisible à l’œil nu, avec export en un clic, structure de dossiers préservée et noms de fichiers uniformisés, sa valeur ne se limite pas à économiser de l’espace disque. Il rend aussi le transfert plus rapide, l’envoi plus fluide et l’intégration avec d’autres systèmes moins sujette aux erreurs. Cette valeur concrète, même ordinaire, est souvent beaucoup plus fiable qu’un vague « gain d’efficacité ».
+
+Donc, lorsque vous dites que votre application a de la valeur, il vaut mieux découper cette valeur en un ou deux scénarios concrets et l’expliquer avec des mots simples : combien de temps, de travail manuel ou de risque votre application enlève-t-elle à l’utilisateur ?
+
+### L’utilisateur la prend en main facilement, presque sans lire de mode d’emploi
+
+Une autre caractéristique sous-estimée mais extrêmement importante est que **les bonnes applications n’ont généralement pas besoin de beaucoup d’explications**. Quand un utilisateur les ouvre pour la première fois, il comprend intuitivement par où commencer, ce qui se passera s’il clique sur tel élément, et quel bouton sert à l’action principale. L’entrée importante se trouve à un endroit vraiment visible, pas dans le troisième niveau d’un menu.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image15.png)
+
+Imaginez un utilisateur qui vient de télécharger votre application. Il l’ouvre peut-être dans une file d’attente, dans un bus ou dans un café. Le réseau n’est pas forcément stable, et il n’a aucune patience pour lire une longue explication. Le temps de confusion qu’il accepte se compte souvent en secondes. Si, pendant ces quelques secondes, il ne voit aucun guidage clair et ne sait pas quoi faire ensuite, il risque de fermer l’application et de ne jamais revenir.
+
+Ainsi, quand vous trouvez votre logique produit fluide, trouvez quelqu’un qui n’a jamais vu votre application et laissez-le l’explorer depuis zéro sans que vous parliez. Observez seulement où il s’arrête, où il hésite, à quel moment son visage dit « qu’est-ce que c’est ? ». Si l’utilisateur est bloqué dès l’entrée par des popups, des options complexes ou une obligation de lier un compte, il aura du mal à ressentir la valeur que vous vouliez vraiment offrir.
+
+**La facilité de prise en main est au fond une forme de respect du coût utilisateur.** Vous reconnaissez que personne n’a l’obligation de passer du temps à étudier votre application.
+
+### Dans les scénarios fréquents ou critiques, l’utilisateur pense naturellement à vous
+
+Une bonne application possède souvent un rythme d’usage stable : soit fréquent, soit critique. **Fréquent** signifie qu’elle s’intègre dans la vie quotidienne, comme une messagerie ouverte plusieurs fois par jour, un outil de trajet utilisé tous les jours, ou une application de suivi que l’on renseigne régulièrement. **Critique** signifie que, même si l’application n’est pas utilisée chaque jour, l’utilisateur pense à elle en premier lorsqu’un certain scénario arrive : déclaration fiscale, calcul de budget travaux, gestion de questions d’entretien, checklist de documents de visa.
+
+Demandez-vous : à quel moment et dans quelle situation l’utilisateur utilisera-t-il vraiment votre application ? S’il ne l’a pas, ressentira-t-il une gêne réelle ? Dans ce type de scénario, comment fait-il aujourd’hui ? S’il existe une solution de remplacement, même pénible mais déjà habituelle, vous devez non seulement aligner les fonctionnalités, mais aussi lui faire sentir que passer chez vous vaut vraiment le coup.
+
+Une erreur fréquente consiste à lier directement la fréquence d’usage à la qualité. Ce n’est pas nécessaire. Faire un rapport annuel, gérer un dossier administratif ou effectuer un gros virement n’est pas fréquent, mais quand cela arrive, c’est important. **Si votre application traite ce type de scénario critique avec stabilité, rapidité et clarté, elle peut tout à fait être une bonne application.**
+
+**Ce qui doit vraiment vous alerter, c’est une application que l’utilisateur n’utilise ni souvent, ni dans un moment important**, et dont la disparition de son téléphone ne lui manquerait qu’au moment de faire du nettoyage plusieurs mois plus tard. Cela signifie souvent que l’application n’est liée à aucun scénario réel, et qu’elle ne fait qu’empiler des fonctionnalités à faible présence.
+
+### L’esprit d’aide
+
+Quand beaucoup de gens commencent un produit, ils pensent en même temps à la facturation, aux hausses de prix, aux limites qui forcent à payer, ou aux moyens de verrouiller les données pour éviter que l’utilisateur parte. Le calcul commercial n’est pas un problème en soi. Mais si toute la réflexion tourne autour de cela dès le départ, on crée facilement une application qui inspire la méfiance : trop de permissions dès l’entrée, trop de points de paiement, des fonctionnalités conçues moins pour aider l’utilisateur à terminer sa tâche que pour l’amener vers un bouton payant.
+
+À l’inverse, les vraies bonnes applications portent souvent une forme d’aide simple. Elles réfléchissent bien sûr à leur survie et à leur modèle économique, mais dans le parcours et l’expérience, la priorité reste : **comment aider l’utilisateur à accomplir cette tâche plus facilement, et non comment ajouter une étape pour créer une friction artificielle**. On le voit dans de petits choix : des indications claires aux moments clés, peu de barrières à l’export ou à la migration, une vraie valeur expérimentable avant de demander un paiement.
+
+Cet esprit d’aide apparaît souvent dans des détails minuscules. Le formulaire ne demande pas une série d’informations sans lien avec la tâche juste pour collecter plus de données. Le tutoriel suit l’objectif utilisateur au lieu de l’ordre interne des modules. On sent que l’application aide sincèrement à réussir une chose, et ne traite pas l’utilisateur comme une ressource à extraire.
+
+Un point important : **une bonne application n’a pas besoin d’être grande**. Elle peut être petite, servir un type de personne, un scénario et une tâche, mais le faire très bien. Par exemple, aider spécifiquement des designers à exporter des fichiers au format demandé par une imprimerie, ou aider des freelances à organiser leurs cas projets. Le périmètre est restreint, mais la valeur peut être réelle.
+
+## 3.2 Comprendre les besoins : **la pyramide de Maslow**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image16.png)
+
+Avant de construire une application, beaucoup de gens sautent directement aux fonctionnalités : peut-on ajouter quelque chose ici, faut-il mettre un bouton là ? Mais ce qui décide réellement si une application peut survivre, c’est le niveau de besoin humain qu’elle touche, et avec quelle précision.
+
+La pyramide des besoins de Maslow est souvent citée dans de nombreux domaines, non pas parce qu’elle serait parfaitement rigoureuse, mais parce qu’elle offre un cadre d’observation suffisamment utile. Vous n’avez pas besoin de la traiter comme une vérité psychologique stricte. Servez-vous-en comme d’un cadre simple pour rattacher les motivations des utilisateurs à quelques niveaux clairs, afin de juger quel type de besoin votre application satisfait. Plus vous pouvez satisfaire de besoins pertinents, meilleure l’application peut devenir.
+
+On divise généralement la pyramide en cinq niveaux, de bas en haut : besoins physiologiques, sécurité, appartenance et amour, estime, accomplissement de soi.
+
+### Les besoins physiologiques et liés à la survie
+
+Ce niveau est le plus fondamental : manger, dormir, maintenir son état de survie. Cela semble éloigné d’Internet, mais beaucoup d’applications agissent à ce niveau.
+
+La livraison de repas, les courses, les services de proximité, la réservation d’hôtel ou les VTC aident essentiellement à résoudre, avec moins de coût temporel, des besoins de base : manger, se déplacer, se reposer. Le suivi sportif, le sommeil ou l’alimentation relèvent davantage de la santé, mais pour beaucoup de gens, ils servent à maintenir un corps qui ne part pas complètement hors de contrôle ; on peut donc les voir comme une extension de ce niveau.
+
+Si votre application agit ici, les utilisateurs seront **très sensibles à la stabilité, à la fiabilité et à la prévisibilité**. Une livraison qui n’arrive pas, une voiture introuvable, une réservation d’hôtel erronée créent de fortes réactions, parce que ces problèmes interrompent directement le rythme de base de la vie.
+
+### Les besoins de sécurité et de certitude
+
+La sécurité inclut la sécurité physique, mais aussi la sécurité économique, informationnelle et psychologique.
+
+Beaucoup d’outils travaillent en réalité à ce niveau : gestion de budget, gestion d’actifs, assistants d’assurance, modèles de contrats, gestionnaires de mots de passe, sauvegarde, protection de la vie privée, synchronisation cloud, récupération de données. Leur promesse centrale est souvent : réduire les erreurs, fournir une solution de secours quand quelque chose se passe mal, ou au moins donner un sentiment de contrôle.
+
+Une catégorie typique est celle des petits outils anti-perte, anti-oubli, anti-erreur : rappels d’agenda, rappels de prise de médicaments, alertes d’expiration de documents importants, mémos sur des échéances clés. Même s’ils ne vous rappellent que quelques fois par jour, s’ils vous sauvent une ou deux fois dans un moment critique, vous les rangez vite parmi les outils indispensables.
+
+Quand vous concevez ce type de produit, demandez-vous : **quel risque précis réduisez-vous pour l’utilisateur : argent, temps, relation, conformité ou droit ?** Si vous-même ne pouvez pas le dire clairement, l’utilisateur aura du mal à vous faire confiance.
+
+### Appartenance, connexion et sentiment d’être vu
+
+Le niveau suivant est celui de l’appartenance et de l’amour. En termes simples : je ne veux pas être seul, je veux être relié à certaines personnes. C’est le territoire naturel des applications sociales, communautaires et de groupes d’intérêt.
+
+Fil d’actualité, groupes de discussion, forums, communautés de passionnés, clubs de lecture en ligne, guildes dans les jeux, groupes de jeunes parents, entraide d’étudiants internationaux, plateformes anonymes de discussion professionnelle : tout cela offre une forme d’appartenance. Il y a des gens qui me ressemblent, qui regardent les mêmes sujets, se plaignent des mêmes difficultés, partagent des expériences proches.
+
+Certaines applications semblent fonctionnelles, mais ce qui retient vraiment les utilisateurs se trouve à ce niveau. Dans une application de budget, les gens partagent leurs progrès d’épargne ; dans une application de course, ils se comparent et pointent leur présence ; dans une application d’apprentissage, ils se surveillent mutuellement. Ces modules sociaux, en apparence additionnels, lient l’application à une identité de groupe.
+
+Si votre application veut se placer à ce niveau, le contenu ne suffit pas. Il faut comprendre **pourquoi l’utilisateur sentirait qu’il est “entre les siens”, s’il accepte d’y laisser des traces et d’interagir légèrement mais réellement avec d’autres**. Sinon, vous ne construisez qu’un outil de diffusion à sens unique.
+
+### Respect, valeur personnelle et accomplissement
+
+Le niveau suivant est celui de l’estime et de l’estime de soi. L’être humain ne veut pas seulement être accepté ; il commence aussi à se demander : suis-je quelqu’un de valable ici ? Suis-je vu, reconnu ? Ce que j’ai accompli est-il remarqué ?
+
+Les check-ins, badges, classements, titres et systèmes de réussite jouent souvent à ce niveau. Une application d’apprentissage donne un titre après un certain nombre d’heures, une application sportive délivre un certificat, une plateforme de création attribue des statuts aux auteurs, une communauté met en avant les contributions de qualité.
+
+L’erreur fréquente est de croire qu’ajouter beaucoup de badges, points et titres suffit à motiver. L’utilisateur ne cherche pas une décoration voyante ; il veut que son effort réel soit enregistré et pris au sérieux. Si votre système de réussite est déconnecté de l’investissement réel, par exemple un titre « expert » obtenu après quelques clics, l’effet disparaît vite et peut même paraître bon marché.
+
+La question clé n’est donc pas d’avoir ou non un système d’incitation, mais : **votre application offre-t-elle une scène d’accumulation où l’utilisateur peut voir clairement son passage de débutant à plus compétent**, et marque-t-elle les étapes importantes avec une forme de rituel ?
+
+### Accomplissement de soi et dépassement de soi
+
+Le sommet de la pyramide renvoie à la personne que je veux devenir et à ce que je veux apporter. Cela semble abstrait, mais dans les scénarios concrets, les manifestations sont très pratiques.
+
+Les outils de création, comme l’écriture, le dessin, la production musicale, le montage vidéo ou la gestion de projets de programmation, fournissent en surface des capacités techniques ; en profondeur, ils portent le désir de créer quelque chose qui nous appartient. Les plateformes d’apprentissage long terme, les outils de planification de carrière et les outils d’habitudes répondent eux aussi à un objectif de croissance personnelle plus long.
+
+Il existe aussi le besoin d’aider les autres. Beaucoup utilisent des plateformes de partage de connaissances, des communautés de questions-réponses, des applications d’intérêt public ou des outils de création collaborative, non seulement pour gagner des points ou du trafic, mais parce qu’aider quelqu’un ou faire avancer un projet donne le sentiment de faire quelque chose de significatif. Cela appartient aussi à l’accomplissement de soi.
+
+Quand votre application touche vraiment ce niveau, elle peut devenir très collante : même si l’interface n’est pas la plus belle et que les fonctions ne sont pas les plus complètes, l’utilisateur reste, parce que **l’application établit un lien plus profond avec ce qu’il est et ce qu’il fait**.
+
+Utiliser la pyramide de Maslow comme perspective produit aide à éviter deux biais.
+
+**Premier biais : s’accrocher au mauvais niveau.** Si vous construisez un outil de stockage sécurisé, il se situe au niveau de la sécurité. Si vous imitez aveuglément les produits sociaux avec likes, commentaires et classements, vous risquez de ne pas gagner l’attention sociale, tout en donnant aux personnes qui cherchent seulement un stockage fiable l’impression que vous perdez votre objectif.
+
+**Deuxième biais : oublier l’ordre entre les niveaux.** Si l’expérience de base n’est pas stable, il est difficile pour l’utilisateur de poursuivre un accomplissement de soi chez vous. Une application qui plante souvent ou perd parfois des données ne sera pas sauvée par des badges ou des courbes de progression. En revanche, si la base est solide, vous pouvez ajouter progressivement des valeurs de niveau supérieur.
+
+Dans la pratique, vous pouvez vous auto-vérifier ainsi :
+
+- demandez d’abord : quel niveau de besoin mon application satisfait-elle principalement ? Choisissez-en un seul ;
+- demandez ensuite : au-dessus de ce niveau central, puis-je naturellement étendre vers le niveau supérieur, sans coller un concept artificiel ;
+- enfin, regardez les niveaux plus bas : ai-je des faiblesses évidentes qui freinent l’utilisateur ?
+
+Quand vous pouvez répondre clairement, votre compréhension de ce que les utilisateurs veulent vraiment ne reste plus au niveau flou de « ils devraient aimer », et cela vous aide à construire une meilleure application.
+
+## 3.3 Classer par type d’utilisateur : différences entre applications C-end et B-end
+
+Après avoir construit l’application, vous découvrirez vite une autre chose importante : s’adresser à des particuliers et s’adresser à des entreprises ou organisations sont deux jeux totalement différents. Les deux s’appellent des utilisateurs, mais leurs priorités ne sont pas les mêmes.
+
+- C-end (Consumer End) : côté consommateur, avec pour cœur les utilisateurs individuels ordinaires. Par exemple WeChat, Douyin ou Meituan sont utilisés par des individus ; les scénarios qui servent directement des personnes relèvent du C-end.
+- B-end (Business End) : côté entreprise, avec pour cœur les entreprises, institutions ou organisations. Par exemple DingTalk, des logiciels financiers comme Yonyou ou Kingdee, ou les systèmes de caisse de magasins. Les utilisateurs sont des employés, équipes ou organisations, et le produit sert l’exploitation, la gestion ou la production.
+
+### Applications C-end : vie, émotions et habitudes des particuliers
+
+Les applications C-end s’adressent aux individus et s’insèrent dans leur vie quotidienne. Les types courants incluent contenu, outils, divertissement, social, apprentissage, etc.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image17.png)
+
+Les applications de contenu, comme les lectures d’actualité, plateformes de vidéos courtes ou outils de podcast, aident l’utilisateur à extraire ce qui l’intéresse d’une masse d’informations en temps limité, tout en lui donnant régulièrement de nouvelles raisons de revenir.
+
+Les outils, comme la gestion de budget, les tâches, les fichiers ou le calendrier, fournissent souvent une solution plus pratique qu’une méthode brute pour une tâche précise. Ils deviennent une partie de l’infrastructure quotidienne.
+
+Les applications de divertissement, jeux, interactions légères et petits outils amusants, offrent une détente émotionnelle. Leur qualité se mesure davantage à la volonté des utilisateurs d’y passer du temps de manière continue.
+
+Les applications sociales tournent autour de la connexion et de l’interaction entre personnes ; les applications d’apprentissage autour de l’amélioration d’une compétence, comme mémoriser du vocabulaire, faire des exercices, suivre des lectures ou gérer des cours.
+
+Malgré leurs différences, ces applications partagent plusieurs préoccupations.
+
+**Premièrement, la croissance utilisateur.** Comment faire essayer l’application à plus de gens pour la première fois ? Cela implique canaux, messages de diffusion et incitations, mais la condition reste d’avoir un scénario d’usage clair. Sinon, les meilleures méthodes de croissance n’amènent qu’une curiosité de courte durée.
+
+**Deuxièmement, la rétention et le retour.** Le point n’est pas seulement que quelqu’un soit venu, mais qu’il veuille rester et revenir. Une application de contenu sans contenu durablement intéressant sera vite remplacée. Un outil qui n’aide pas l’utilisateur à accomplir sa tâche lors des premiers usages clés aura du mal à créer une habitude. Observez la rétention au jour 1, au jour 7 et au jour 30 pour savoir combien de personnes vous intègrent réellement à leur rythme de vie.
+
+**Troisièmement, la conversion et le paiement.** L’utilisateur paie rarement parce que la version gratuite est mauvaise ; il paie plutôt parce qu’après avoir déjà reçu une partie de la valeur, il voit que les fonctions payantes offrent une commodité supérieure : quota plus élevé, collaboration plus forte, modèles plus professionnels, performance plus stable.
+
+**Quatrièmement, le partage.** Beaucoup de produits C-end se diffusent vite parce qu’ils contiennent naturellement du partage. Si l’utilisateur génère une image, une vidéo ou un texte, il doit souvent envoyer le résultat à quelqu’un pour atteindre son objectif. Si votre marque apparaît de manière naturelle et non gênante, vous pouvez gagner une diffusion par bouche-à-oreille.
+
+Une manière simple de juger si un besoin C-end est réel consiste à voir si l’utilisateur accepte de former une petite habitude autour de lui : ouvrir l’application chaque jour, la lier à son rythme de vie, l’utiliser pour enregistrer des moments importants. À l’inverse, si l’utilisateur vient seulement par publicité ou opération, l’utilise une fois puis disparaît, vous répondez probablement à une curiosité temporaire, pas à un besoin long terme.
+
+### Applications B-end : efficacité, coûts et contrôle du risque pour les organisations
+
+Les applications B-end servent des entreprises, équipes, institutions ou départements. Les catégories courantes incluent ERP, CRM, outils de collaboration, SaaS et systèmes internes de gestion métier.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image18.png)
+
+La grande différence avec le C-end est qu’elles doivent satisfaire plusieurs rôles en même temps. L’utilisateur direct peut être un employé de première ligne, le décideur un manager ou patron, les données appartiennent à l’organisation, et les validations impliquent plusieurs départements. Il faut que l’utilisateur trouve le produit pratique, **que le décideur voie le retour sur investissement**, et que l’organisation se sente en sécurité côté risque et conformité.
+
+Les applications B-end ont plusieurs points d’attention essentiels.
+
+**Premièrement, améliorer l’efficacité.** Il ne s’agit pas seulement de réduire le temps d’une personne, mais de réduire le temps total de processus, les coûts de collaboration et les échanges inutiles. Si une commande devait passer par cinq systèmes avant l’expédition, et qu’elle circule maintenant via une entrée unifiée, la valeur est très concrète pour l’entreprise.
+
+**Deuxièmement, réduire les coûts.** Cela inclut les coûts humains, de formation et de maintenance. Un système puissant mais lourd à former et maintenir paraît peu rentable à beaucoup de PME. À l’inverse, des outils SaaS plus légers, faciles à apprendre et rapides à rentabiliser, survivent souvent mieux.
+
+**Troisièmement, contrôler les risques et garantir la conformité.** En finance, santé, fabrication ou administration, conformité et traçabilité sont centrales. Une bonne application B-end sacrifie parfois un peu de liberté d’usage pour obtenir des permissions plus nettes, des logs plus stricts et des chaînes d’approbation plus claires. Pour un individu, cela semble moins flexible ; pour l’organisation, c’est précisément la valeur.
+
+**Quatrièmement, gérer les permissions et les responsabilités.** Qui peut voir quoi, qui peut modifier quoi, qui répond de quel résultat ? Ces questions sont cruciales. Si elles sont mal conçues, l’audit, les litiges et la responsabilisation deviennent coûteux. Juger une bonne application B-end ne consiste donc pas seulement à regarder si l’interface est agréable, mais aussi si son modèle de permissions est rigoureux, compréhensible et maintenable.
+
+Pour passer d’un secteur à une application, vous pouvez procéder ainsi : **choisissez un secteur que vous comprenez un peu, comme l’éducation, l’e-commerce, la fabrication, la finance ou la santé**, puis analysez ses opérations quotidiennes. Quels processus dépendent encore fortement du travail manuel ? Quelles informations sont dispersées dans plusieurs systèmes ou discussions privées ? Quels maillons ont un taux d’erreur élevé mais difficile à détecter rapidement ? Autour de ces zones, vous pouvez souvent concevoir de petits outils très ciblés.
+
+Dans l’éducation, un angle concret est l’optimisation des plannings de cours et de l’utilisation des salles. Il n’a pas besoin de remplacer tout le système académique ; s’il aide seulement les responsables à organiser enseignants, salles et horaires, éviter les conflits, proposer de meilleures combinaisons et exporter un planning lisible, il économise déjà beaucoup de communication et de modifications.
+
+Dans l’e-commerce, le besoin fréquent est la gestion de commandes multicanal. Un marchand peut avoir des boutiques sur plusieurs plateformes et des commandes dispersées. Un outil qui agrège ces commandes, puis centralise après-vente et logistique, résout déjà une douleur quotidienne importante.
+
+Dans la fabrication, beaucoup d’entreprises suivent encore la production avec papier ou Excel. Un simple outil de suivi d’ordres de travail peut aider les responsables de terrain à voir l’état de chaque étape, au lieu de passer la journée à demander et appeler.
+
+Dans la finance ou la santé, l’entrée n’a pas forcément besoin d’être le front-office. Cela peut être un assistant de vérification de conformité, un générateur de modèles de documents ou une checklist de pièces d’approbation. Tant que vous pouvez dire clairement quelle tâche, pour quel rôle, dans quel processus, devient plus contrôlable grâce à votre outil, la direction mérite d’être essayée.
+
+Les secteurs ci-dessus ont souvent déjà des produits de sociétés mûres. C’est une bonne source de référence : cherchez des mots clés comme « secteur + besoin central + produit », par exemple « système de planning éducation » ou « outil de gestion multicanal e-commerce ». Vous trouverez des sites, fonctions, avis, cas clients et vidéos de démonstration. Ces informations vous aident à comprendre comment les produits mûrs résolvent les mêmes problèmes et à éviter trop d’essais à partir de zéro.
+
+## 3.4 Peaufiner avec les données utilisateurs : de « je trouve ça bien » à « les utilisateurs trouvent ça bien »
+
+Après avoir construit l’application, une illusion apparaît facilement : plus vous l’utilisez, plus elle vous semble fluide, et vous supposez que les utilisateurs ressentent la même chose. En réalité, plus un produit est le vôtre, plus vous êtes aveugle aux problèmes des autres. Pour faire passer une application d’un projet qui vous satisfait à un vrai bon produit, vous devez intégrer les retours utilisateurs réels dans la boucle.
+
+### Concevoir un mécanisme de feedback simple pour donner la parole aux utilisateurs
+
+Vous n’avez pas besoin de construire immédiatement un système complexe de support client ou de data. Commencez par des moyens simples.
+
+**Le groupe de discussion est le plus direct.** Si vous avez déjà un petit groupe d’utilisateurs, invitez-les à poster leurs problèmes et idées issus de l’usage quotidien. Votre rôle est de répondre sérieusement, noter et résumer régulièrement, pas de vous défendre. Plus vous créez une atmosphère où l’on peut parler franchement, plus le feedback devient précieux.
+
+Les questionnaires conviennent lorsque vous devez **collecter une quantité relativement structurée d’informations en une fois**, par exemple après une itération de version. Pour obtenir un bon taux de réponse, gardez le questionnaire court et posez des questions concrètes : quelle fonction avez-vous le plus utilisée récemment ? À quelle étape êtes-vous le plus souvent bloqué ? Évitez les questions trop générales comme « que pensez-vous de l’application ? ».
+
+Les popups après usage sont aussi courants. Après une tâche terminée, vous pouvez afficher une note très courte et une zone de suggestion : « cette expérience était-elle fluide ? ». Parfois, une simple note chiffrée suffit à repérer un problème évident dans un flux.
+
+Les entretiens un à un coûtent plus cher, mais rapportent souvent plus. **Choisissez quelques utilisateurs de types différents et demandez-leur 20 à 40 minutes** pour parler de leurs habitudes. Laissez-les utiliser le produit en décrivant ce qu’ils voient et ressentent. Passer du temps à comprendre les besoins utilisateurs n’est jamais une perte.
+
+### Extraire trois types d’information d’un feedback désordonné
+
+Les retours utilisateurs sont généralement mélangés. Vous pouvez les classer en trois catégories : **bugs, problèmes d’expérience, nouveaux besoins**.
+
+**Un bug signifie qu’un comportement annoncé ne se produit pas dans certaines conditions, ou se produit mal.** Par exemple : échec de téléversement, crash, bouton sans réponse, résultat manifestement incorrect. Pour ces problèmes, reproduisez vite, corrigez, puis informez les utilisateurs affectés afin qu’ils voient que vous prenez cela au sérieux.
+
+**Un problème d’expérience signifie que le parcours, la position d’une action ou la formulation ne suit pas le chemin le plus fluide.** Par exemple : les utilisateurs hésitent toujours devant un bouton parce qu’ils ne savent pas si l’action est irréversible ; une fonction importante est cachée dans un coin ; un réglage par défaut va contre l’habitude majoritaire et impose une correction à chaque fois. Ce type de retour doit être jugé avec les données et l’observation pour décider quoi modifier et jusqu’où.
+
+**Un nouveau besoin apparaît quand les utilisateurs proposent des fonctions ou scénarios que vous n’aviez pas prévus.** Certains méritent réflexion : plusieurs formats d’export, collaboration d’équipe, intégration avec d’autres outils. Mais vous n’avez pas à faire tout ce que les utilisateurs demandent. Il faut surtout déterminer s’il existe un problème commun derrière ces demandes, et si elles correspondent toujours au groupe et à la tâche centrale que vous vouliez servir. Sinon, vous serez tiré dans toutes les directions et finirez avec un produit qui veut tout faire sans rien faire profondément.
+
+Prenez l’habitude d’étiqueter chaque retour : bug, problème d’expérience ou nouveau besoin. Résumez régulièrement ces étiquettes pour voir quels problèmes se concentrent sur quelles fonctions ou quels flux. Vous ne réparez plus seulement de manière passive ; vous organisez vos itérations autour des problèmes fréquents.
+
+### Utiliser trois indicateurs simples pour décider s’il faut continuer à investir
+
+Avec des ressources limitées, vous avez besoin d’indicateurs simples mais efficaces pour juger si l’application mérite un investissement long terme.
+
+**Le premier est la rétention.** La rétention ne consiste pas à voir combien de personnes ont ouvert l’application un jour donné, mais **combien continuent à l’utiliser sur une période**. Même une mesure grossière suffit : combien de personnes l’utilisent encore au moins une fois dans la semaine suivant le téléchargement, combien reviennent dans le mois. Si la majorité l’essaie une ou deux fois puis disparaît, l’application n’a pas montré assez de valeur au départ, ou son seuil d’usage est trop élevé.
+
+**Le deuxième est la fréquence de retour.** Parmi les personnes qui ne l’ont pas désinstallée, à quelle fréquence reviennent-elles ? Un outil quotidien et une application utilisée une fois par trimestre n’ont pas le même positionnement, donc pas le même étalon. Mais vous devez avoir une hypothèse raisonnable de rythme d’usage et la comparer aux données. Une fréquence plus élevée que prévu peut signaler une valeur plus forte ; une fréquence beaucoup plus basse oblige à vérifier si le scénario est mal choisi ou si l’expérience fatigue l’utilisateur.
+
+**Le troisième est la volonté de recommandation.** Des utilisateurs recommandent-ils spontanément votre application ? Vous pouvez l’observer de plusieurs façons : proposer une entrée de partage naturelle après une tâche réussie et voir combien l’utilisent ; regarder si quelqu’un recommande spontanément le produit dans un groupe ; demander en entretien : si quelqu’un autour de vous rencontrait le même problème, lui conseilleriez-vous cet outil ? La recommandation est souvent plus parlante qu’une note de satisfaction, car elle engage la crédibilité personnelle de l’utilisateur.
+
+En combinant ces trois indicateurs avec les retours précédents, vous pouvez juger l’état actuel de l’application. Même si les fonctions sont incomplètes, s’il existe déjà des personnes qui restent et reviennent dans un scénario précis, le produit mérite probablement d’être investi et poli. À l’inverse, si vous avez corrigé beaucoup de bugs, ajouté des fonctions, mais que rétention et retour ne progressent pas, et que presque personne ne recommande l’application, il faut réfléchir calmement : faut-il réduire le périmètre, revenir au scénario central initial, voire changer de direction ?
+
+# 4. À quelle étape, et comment, utiliser raisonnablement l’IA pour amplifier la valeur ?
+
+Dès que vous commencez sérieusement à construire une application, une tentation très commune apparaît : peut-on ajouter un peu plus d’IA ? Cette tentation est forte parce que vous voyez chaque jour des messages du type « l’IA renforce tel secteur », « l’IA reconstruit complètement tel processus », « l’IA règle tout en un clic ». À force, il devient facile de transformer un problème simple en slogan séduisant, d’empiler des appels à des modèles dans la stack technique et de voir les coûts augmenter sans contrôle.
+
+Même si ce tutoriel porte sur le développement d’applications AI-native, il faut dire clairement qu’à l’échelle d’une petite application ou d’un produit qui démarre, **le plus dangereux n’est pas de ne pas utiliser l’IA, mais d’utiliser l’IA pour l’IA**. Vous pourriez d’abord construire un outil simple et fiable, mais vous êtes attiré par les nouvelles capacités et vous ajoutez sans cesse des fonctions qui paraissent intelligentes. Au final, une direction qui pouvait atterrir devient chère, complexe, et sans gain de valeur évident. La question centrale de ce chapitre est donc : à quel stade, dans quels maillons, et sous quelle forme l’IA peut-elle vraiment amplifier la valeur de votre application ?
+
+## 4.1 Ne pas faire de l’IA pour l’IA
+
+Une méthode très pratique pour vérifier si vous tombez dans ce piège consiste, avant chaque ajout de fonction IA, à vous forcer à répondre sérieusement à deux questions.
+
+**Première question : sans IA, cette application tient-elle encore debout ?** Autrement dit, si l’on retire temporairement toutes les capacités IA, ce que vous faites reste-t-il utile en soi ? Les utilisateurs ont-ils un besoin réel ? Sont-ils prêts à y consacrer du temps chaque jour, chaque semaine ou chaque mois ?
+
+Cette phrase paraît un peu à contre-courant, parce que presque toutes les pages produit mettent aujourd’hui l’IA au premier plan, comme si un outil sans IA n’était pas moderne. Mais si votre application s’effondre complètement sans IA, le problème n’est souvent pas que votre technologie manque d’avancement. Le problème est plus profond : le besoin que vous avez choisi n’est peut-être pas douloureux, voire pas vraiment réel.
+
+Imaginez un outil d’organisation de tâches. Si votre différence principale consiste à ajouter dans la liste des tâches des suggestions générées par un modèle, comme des titres automatiques, une classification automatique ou des descriptions complétées, mais que les utilisateurs ne souffrent pas du tout de devoir écrire un titre et veulent seulement noter une tâche rapidement, ces capacités intelligentes auront beau être impressionnantes, elles auront du mal à créer une valeur durable. À l’inverse, si vous prenez du recul et vous demandez quelle est la valeur la plus simple sans IA, vous trouverez peut-être une direction plus solide : rassembler les tâches dispersées entre plusieurs canaux, aider l’utilisateur à voir ce qu’il peut réellement terminer dans la journée, faire apparaître les risques avant la fin de l’agenda pour l’aider à prioriser et à renoncer. Construire ces bases vaut souvent mieux que d’ajouter des étiquettes intelligentes dès le départ.
+
+**Deuxième question : avec l’IA, qu’est-ce qui s’améliore concrètement ?** Les formules larges comme « amélioration de l’efficacité », « expérience réinventée » ou « montée en intelligence » ne suffisent pas. Il faut descendre à une ou deux dimensions que l’utilisateur lui-même peut percevoir clairement.
+
+Vous pouvez vous interroger ainsi :
+
+- la vitesse d’exécution de la tâche a-t-elle nettement augmenté ? Par exemple, une page de texte qui devait être écrite de zéro ne demande plus que cinq minutes de relecture et de modification ;
+- la qualité du résultat a-t-elle clairement progressé ? Par exemple, l’utilisateur produit dans le même temps un contenu plus structuré, plus professionnel et plus adapté à son public ;
+- le processus d’usage est-il devenu plus fluide ou plus léger ? Par exemple, un formulaire ennuyeux devient une conversation de questions-réponses ;
+- le coût réel a-t-il diminué ? Par exemple, moins d’externalisation, moins d’heures de support humain, une formation plus courte ou une décision plus rapide.
+
+Si votre réponse reste au niveau de « ça semble un peu plus pratique » ou « ça a l’air plus cool », il y a de fortes chances que cette fonction IA n’ait pas encore trouvé son vrai point d’appui.
+
+Ces deux questions ont un ordre clair : d’abord vérifier que l’application a du sens sans IA, puis demander précisément ce que l’IA améliore.
+
+## 4.2 Réfléchir au rôle que joue l’IA
+
+Quand vous avez confirmé que l’application tient même sans IA, et que vous avez trouvé un point d’amélioration clair, l’étape suivante consiste à répondre plus précisément : **dans votre application, que fait exactement l’IA ?** Beaucoup de produits se trompent ici parce qu’ils traitent l’IA comme une énergie abstraite, et non comme un rôle avec des responsabilités claires. Le résultat est un empilement de fonctions : tout semble un peu intelligent, mais l’utilisateur ne voit pas quelle partie est vraiment indispensable.
+
+Une approche plus claire consiste à voir l’IA comme plusieurs composants possibles : **elle peut être le cerveau, les yeux ou les mains**. Selon l’objectif produit, choisissez la partie qu’elle doit prendre en charge. Si possible, commencez par un ou deux rôles bien faits, plutôt que de tout ajouter d’un coup.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image19.png)
+
+**Quand l’IA joue le rôle du cerveau, elle comprend et génère surtout du texte, ou raisonne entre des informations complexes.** Par exemple, dans un assistant de compte rendu de réunion, elle doit extraire les points vraiment importants d’un long enregistrement, et non simplement lister tout dans l’ordre chronologique. Dans une application d’apprentissage, elle doit distinguer si l’utilisateur n’a pas compris un concept ou s’il a seulement fait une erreur d’inattention, puis donner un retour différent. Dans ces scénarios, la valeur de l’IA vient de sa capacité à lire les paroles de l’utilisateur, comprendre les matériaux fournis et produire une sortie structurée et logique. Votre travail consiste à aider l’utilisateur à poser clairement le problème et à fournir un contexte assez précis.
+
+**Quand l’IA joue le rôle des yeux, elle traite surtout des contenus non textuels comme les images et les vidéos**, pour les transformer en descriptions compréhensibles par la machine, puis agir à partir de ces descriptions. Un outil d’organisation de documents papier peut reconnaître, à partir de photos, des factures, contrats ou notices en texte recherchable. Une application d’apprentissage du dessin peut comprendre le croquis de l’utilisateur et signaler des problèmes de composition ou de ligne. Un outil de conseil pour aménager une pièce peut analyser une photo, reconnaître la disposition et les objets, puis proposer des améliorations simples. Ici, l’IA agit comme une paire d’yeux analytiques : votre application ne se limite plus au texte saisi au clavier, elle touche le monde physique de l’utilisateur.
+
+**Quand l’IA joue le rôle des mains, elle exécute une suite d’actions concrètes**, au lieu de se limiter à une suggestion ou à un texte. Certaines plateformes d’automatisation permettent par exemple de créer un workflow : lire une pièce jointe dans un mail, en résumer les points clés, envoyer le résumé dans un groupe, stocker l’original dans le cloud, puis créer automatiquement une tâche de suivi. Ici, l’IA décide dynamiquement de l’étape suivante selon le contexte : reconnaître si un mail est une plainte, vérifier si un formulaire est complet, et déclencher la suite appropriée.
+
+Dans les produits réels, les rôles de l’IA peuvent être encore plus précis.
+
+Dans le traitement du texte, elle peut traduire, résumer, répondre à des questions, continuer un texte ou analyser le sentiment : classer automatiquement les demandes clients, extraire des clauses dans un assistant juridique, corriger une rédaction dans une application éducative.
+
+- La base technique est principalement celle des **Large Language Models (LLM)**, qui apprennent des régularités du langage et des connaissances générales à partir de corpus massifs. Ils peuvent comprendre de longs contextes et générer des textes cohérents.
+- Côté compréhension, un LLM peut reconnaître l’intention, extraire les informations clés et juger une tonalité émotionnelle. Côté génération, il peut résumer, répondre, réécrire, continuer ou traduire, ce qui automatise ou semi-automatise beaucoup de tâches de lecture, synthèse et rédaction.
+- Dans un **robot de service client**, le système peut d’abord classer une phrase en demande, plainte ou après-vente, extraire commande, date et nom de produit, puis laisser le LLM générer une réponse naturelle et complète avec le contexte et la base de connaissances de l’entreprise.
+
+Dans le traitement d’image, elle peut reconnaître, classer, générer, restaurer ou améliorer : marquer des lésions dans l’imagerie médicale, détourer automatiquement un produit e-commerce, générer une illustration à partir d’un texte.
+
+- La compréhension d’image s’appuie souvent sur des modèles visuels de deep learning comme les **Convolutional Neural Networks (CNN)**, qui apprennent bords, textures et structures pour la détection, la segmentation et la classification fine.
+- La génération et la restauration reposent sur des modèles génératifs comme les **modèles de diffusion** et les **GAN**, capables de créer de nouvelles images à partir d’un texte ou d’une référence, ou d’améliorer des images floues, incomplètes ou de faible résolution.
+- Beaucoup de systèmes combinent aussi des LLM : le texte utilisateur est d’abord compris en langage naturel, puis transformé en prompts, styles et contraintes de composition adaptés au modèle visuel.
+- Dans une fonction e-commerce de **génération intelligente d’image principale**, le système détoure d’abord le produit, utilise ensuite un LLM pour interpréter la demande du marchand, par exemple « salon nordique minimaliste, lumière naturelle douce », puis génère un fond et une lumière cohérents avant de filtrer les résultats moins bons.
+
+Dans l’audio et la vidéo, elle peut générer, transcrire, réduire le bruit, monter ou créer des sous-titres : intro et outro automatiques pour podcast, vidéo explicative générée depuis un script, transcription et traduction en temps réel dans une réunion.
+
+- Côté compréhension, le système utilise des **modèles de reconnaissance vocale** pour convertir la parole en texte et analyser locuteur, langue, vitesse et émotion approximative ; des modèles visuels comprennent les scènes, personnes et objets.
+- Côté génération, un LLM comprend et réécrit scripts, réunions ou instructions, puis pilote la **synthèse vocale (TTS)** et des modèles de génération ou montage vidéo pour composer les images, remplacer des fonds, insérer des plans et aligner les sous-titres. Des modèles audio peuvent aussi produire musique d’ambiance et sons, avec réduction de bruit et amélioration de qualité.
+- Dans un produit de **texte vers courte vidéo**, l’utilisateur saisit un paragraphe ; le système le découpe en segments et scènes, génère une narration et un storyboard simple, produit la voix avec TTS, choisit ou génère les images, aligne sous-titres et audio, puis exporte une vidéo prête à publier.
+
+Dans l’interaction vocale, elle peut reconnaître, synthétiser, détecter l’émotion ou gérer le dialogue : comprendre des commandes dans une enceinte connectée, annoncer un itinéraire, corriger une prononciation.
+
+- Le front-end convertit la voix en texte avec un **modèle de reconnaissance vocale** et extrait ton, volume et vitesse comme indices d’état.
+- Le back-end utilise la **synthèse vocale (TTS)** pour produire une réponse naturelle. Les modèles de reconnaissance émotionnelle peuvent ajuster le ton et la vitesse de la réponse pour rendre l’échange plus proche d’une conversation réelle.
+- Avec une **enceinte connectée**, quand l’utilisateur dit « je suis un peu fatigué aujourd’hui, mets une musique relaxante », le système transcrit, utilise un LLM et l’historique d’écoute pour comprendre ce que « relaxant » signifie pour lui, choisit une playlist plus douce, puis adoucit la voix de réponse si un état de fatigue est détecté.
+
+Tout cela n’est qu’une introduction aux grands domaines d’application de l’IA. Dans un vrai contexte métier, vous devrez souvent intégrer plusieurs AI API récentes et les tester sur différentes tâches. Il faut aussi comprendre progressivement la vraie capacité actuelle de l’IA, ce qu’elle peut résoudre, où elle échoue facilement et où sont ses limites. Sans cela, vous risquez de concevoir des fonctions et des parcours sur une mauvaise estimation de capacité.
+
+## 4.3 Se familiariser avec les capacités et les limites de l’IA
+
+Quand vous intégrez réellement l’IA dans une application, vous découvrez vite un écart : la promesse « toute-puissante » des discours marketing et les contraintes d’une fonction précise sont parfois très éloignées. Pour éviter de trop promettre et de décevoir, **vous devez avoir une compréhension de base des grandes capacités actuelles de l’IA, mais aussi connaître leurs frontières. Il faut beaucoup tester, analyser les Bad Case, éviter les situations où l’IA est très susceptible de se tromper, ou ajouter des avertissements clairs.**
+
+Les modèles actuels hallucinent encore dans beaucoup de scénarios, surtout quand on les laisse improviser librement ou qu’on ne leur donne pas de références fiables. Ils peuvent produire des réponses confiantes mais fausses, inventer des fichiers, données ou événements inexistants. Ainsi, dès que les résultats ont des conséquences sérieuses, comme des états financiers, documents juridiques ou conseils médicaux, vous devez ajouter dans le design une relecture humaine ou des contrôles multiples. Ne traitez pas la sortie du modèle comme une instruction directement exécutable.
+
+La confidentialité et la sécurité des données doivent aussi être prises de front. Vous devez savoir quelles données peuvent être envoyées au modèle, lesquelles doivent être anonymisées, et lesquelles ne doivent jamais entrer dans un système tiers. Pour des contrats, dossiers médicaux ou informations d’identité, expliquez clairement le traitement dans l’interface et les conditions, et choisissez si possible un mode de déploiement plus sûr et contrôlable.
+
+Pour rendre cela plus concret, prenons l’exemple d’un Agent. Il ne s’agit pas ici d’enseigner comment construire un Agent de zéro, ni de courir après une architecture à la mode. L’objectif est de montrer une façon de penser : certains parlent d’Agent comme d’un nouveau mot à la mode ; d’autres s’en servent pour découper clairement les tâches et les frontières.
+
+Barret Li Jing, auteur et praticien de longue date des applications IA, a donné un résumé que je trouve très juste. Il montre une méthode mûre : découper d’abord le problème, puis seulement discuter de la place de l’IA.
+
+> Un Agent a deux variables : le workflow, qui contrôle la direction de la tâche, et le context, qui contrôle la génération du contenu.
+>
+> 1) Si le workflow et le context sont tous deux très déterministes, la tâche est facile à automatiser, comme du RPA classique. Pour le traitement de factures ou le remplissage de formulaires, l’IA sert surtout de colle et a un espace limité.
+>
+> 2) Si le workflow est déterministe mais le context incertain, c’est-à-dire un processus fixe avec des entrées variables, l’Agent doit compléter par compréhension sémantique. Par exemple pour le service client ou l’analyse de contrats, il faut parfois utiliser recherche externe, graphe de connaissances ou outils pour combler les manques d’information.
+>
+> 3) Si le workflow est incertain mais le context déterminé, l’entrée est claire mais les chemins possibles sont nombreux. L’Agent doit planifier de manière autonome, par exemple pour générer un rapport d’analyse de marché ou une recommandation personnalisée.
+>
+> 4) Si workflow et context sont tous deux incertains, c’est le cas le plus complexe. Il faut raisonner et explorer, comme pour concevoir une solution innovante ou collecter des informations entre départements. Ce type tend vers des Agents plus généraux, dont l’efficacité dépend de la richesse des outils, notamment de la capacité à programmer.
+>
+> Donc, pour bien construire un Agent, il faut d’abord clarifier le scénario. Au fond, l’automatisation résout les problèmes de « déterminisme », tandis que l’intelligence résout les problèmes d’« incertitude ».
+
+La valeur de ce découpage est de transformer l’idée floue « faire un Agent » en questions que l’on peut juger : où sont le déterminisme et l’incertitude dans la tâche ? Quand processus et informations sont déterminés, un programme traditionnel suffit souvent. Quand l’incertitude apparaît, la compréhension sémantique, la reconnaissance de motifs et la planification de l’IA deviennent utiles. Mais plus l’incertitude est forte, plus les risques nouveaux introduits par l’IA sont élevés. C’est pourquoi beaucoup d’équipes commencent par le deuxième cas : workflow fixe, context incertain. Elles utilisent la compréhension de l’IA tout en bornant le risque par un processus fixe.
+
+Revenons à la question de départ : que signifie vraiment comprendre les limites de l’IA ?
+
+D’abord, comprendre que les scénarios n’ont pas tous le même besoin d’IA. Comme le montre l’exemple workflow/context : quand tout est déterminé, l’IA a peu d’espace ; quand le flux est fixe mais l’information variable, l’IA sert à comprendre et compléter ; quand le flux est incertain, elle doit planifier et explorer. Le fond de cette méthode consiste à identifier la source et le degré d’incertitude. La force centrale de l’IA est de trouver des motifs et relations dans l’incertitude. Cela vaut aussi pour la reconnaissance d’image, la génération de contenu ou les systèmes de recommandation.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image20.png)
+
+Mais l’IA, en résolvant une incertitude, en introduit aussi une nouvelle. Ses sorties sont probabilistes : elle peut mal comprendre, raisonner de travers ou halluciner. Les tolérances varient énormément selon les scénarios et les utilisateurs. Il faut donc demander :
+
+**Les utilisateurs et le système peuvent-ils supporter l’incertitude ajoutée par l’IA ?** Dans le service client, si l’IA comprend mal l’intention, l’utilisateur peut souvent corriger immédiatement. Dans une approbation financière automatisée, une erreur peut avoir des conséquences graves. Dans la génération d’avatar, un résultat mauvais peut être régénéré ; dans un plan de construction, une erreur de détail peut créer un risque réel.
+
+**La précision de l’IA atteint-elle la ligne minimale du scénario ? Cette ligne dépend de l’usage.** Pour classer des photos personnelles par visage, 80 % de précision peut suffire, car l’utilisateur peut corriger quelques cas. Pour la sécurité, manquer 20 % de cibles suspectes est inacceptable. Pour du contenu social, une créativité de 60/100 peut suffire si l’utilisateur retouche. Pour une clause juridique, même 95/100 peut être insuffisant. Il faut connaître la marge d’erreur acceptable de votre scénario.
+
+**Quand l’IA se trompe, existe-t-il un moyen de réparation ?** Dans un workflow fixe, vous pouvez mettre une validation humaine aux points clés pour localiser l’incertitude. Si le workflow lui-même est incertain, chaque étape peut dériver et il devient difficile de savoir quand intervenir. En restauration de photo ancienne, un résultat peu réaliste peut être rejeté ; en aide au diagnostic médical, une anomalie mal localisée peut être beaucoup plus grave.
+
+**Pouvez-vous mesurer et optimiser la performance de l’IA ?** Si la tâche n’a pas de critère clair de vrai ou faux, comment savoir si l’IA réussit ? Si le feedback arrive très tard, comment itérer ? Sans mesure, l’incertitude devient une boîte noire. Un système de recommandation peut suivre clics et durée de consultation ; une publicité créative ne révèle parfois sa qualité qu’après la campagne.
+
+Le jugement mûr n’est pas « il y a de l’incertitude, donc on peut utiliser l’IA », mais « cette incertitude peut être traitée par l’IA, et je peux gérer la nouvelle incertitude qu’elle introduit ». Il faut développer cette capacité de jugement : **sur ce point de fonction, jusqu’où l’IA aide-t-elle, cela vaut-il l’investissement, et quelle manière d’investir offre le meilleur rapport coût-valeur ?** Cette capacité vous évitera beaucoup de détours lors de vos futurs choix produit.
+
+# 5. Une fois l’application prête, comment trouver les premiers vrais utilisateurs à partir de zéro ?
+
+Quand vous avez enfin construit une application, le problème suivant devient : comment faire apparaître les premiers vrais utilisateurs ?
+
+À ce stade, beaucoup d’équipes ont une illusion : puisque le produit existe, il suffit maintenant de le promouvoir, d’acheter de la visibilité ou de chercher de l’exposition ; plus de gens le verront, et tout démarrera naturellement. Mais si vous poursuivez trop vite une exposition massive, vous tombez facilement dans un piège classique : vous brûlez du temps et du budget précieux, les données montrent que des gens sont venus, mais vous ne savez toujours pas si quelqu’un veut vraiment l’utiliser dans la durée.
+
+La chose la plus importante à cette étape tient en une phrase : **prouver au coût le plus faible possible que certaines personnes veulent réellement utiliser cette application, et qu’elles acceptent de revenir après l’avoir utilisée**. Dans le langage produit et croissance, on appelle généralement cette étape le « cold start ».
+
+Le cold start consiste à faire démarrer un produit tout neuf alors que presque tout est à zéro. Vous n’avez pas de base utilisateurs, pas de bouche-à-oreille, pas de volume de recherche, pas de reconnaissance de marque, et presque tous les indicateurs sont à 0. Dans cet environnement froid, vous devez faire apparaître les premières personnes réellement prêtes à utiliser le produit, puis construire autour d’elles une première boucle d’usage.
+
+Ce travail est très différent de l’optimisation d’un produit qui possède déjà utilisateurs et données. On peut avancer en quatre étapes simples :
+
+1. Comprendre d’abord que la croissance se divise en 0–1 et 1–N, et savoir ce qu’il faut résoudre maintenant.
+2. Clarifier qui vous devez vraiment aller chercher, sans regarder seulement l’utilisateur final.
+3. Une fois les cibles clarifiées, choisir une ou deux voies de cold start adaptées à vos ressources.
+4. Dans une réalité de ressources limitées, apprendre à choisir et concentrer l’effort sur la partie la plus critique.
+
+## 5.1 Distinguer d’abord deux étapes : 0–1 et 1–N
+
+Avant de parler de trouver des utilisateurs, clarifiez une chose : **la croissance se fait par étapes**. Si vous mélangez toutes les tâches de croissance, vous ne saurez pas où concentrer votre énergie. La distinction la plus simple et la plus pratique est : 0–1 et 1–N.
+
+### 0–1 : comment démarrer quand personne n’utilise encore
+
+0–1 désigne le passage de zéro utilisateur à un petit groupe de personnes réellement prêtes à utiliser. Le « froid » du cold start vient du fait qu’au début, presque tous les indicateurs sont nuls : pas de téléchargements, pas de recherches, pas de bouche-à-oreille ; votre application n’existe presque pas dans le monde.
+
+À ce moment, vous ne pouvez pas compter sur le trafic naturel ou la chance. Vous devez agir et construire les premières fondations.
+
+**Trouver un petit groupe de seed users réellement prêts à utiliser**, pas simplement des connaissances qui ouvrent l’application par politesse ou curiosité. Ces personnes doivent avoir un vrai besoin lié au problème que vous résolvez.
+
+**Préparer la première expérience d’usage et l’offre initiale**, pour que l’utilisateur qui entre ne voie pas une coquille vide. Même si les fonctions ne sont pas complètes, il doit pouvoir accomplir une opération centrale complète et ressentir la valeur.
+
+**Expliquer simplement ce que fait le produit et quel problème il résout.** Sans marque connue, l’utilisateur ne vous accorde que quelques secondes d’attention. Il doit comprendre très vite « en quoi cela m’aide ».
+
+**Obtenir un premier canal de contact**, pour mettre ce message devant des utilisateurs potentiels. Cela peut être une petite communauté, un forum, un cercle d’amis. La taille compte moins que la précision avec laquelle vous atteignez les personnes qui en ont vraiment besoin.
+
+En 0–1, l’essentiel est de faire entrer les premières personnes avec un vrai besoin et de leur faire traverser une boucle complète : arrivée, usage, feedback. Quand cette boucle fonctionne, vous prouvez que l’application n’est pas un concept suspendu dans l’air, mais quelque chose que des gens veulent et utilisent.
+
+### 1–N : comment passer à l’échelle quand des gens veulent déjà utiliser
+
+Quand vous accumulez progressivement un groupe d’utilisateurs qui reviennent, la question devient : comment passer de dizaines ou centaines de personnes à des milliers, dizaines de milliers, voire plus. C’est ce que l’on appelle généralement croissance, expansion ou mise à l’échelle.
+
+En 1–N, vous commencez à vous préoccuper de sujets plus complexes : mécanismes, organisation, monétisation, marque, équipe. Par exemple :
+
+**Avez-vous trouvé des canaux d’acquisition relativement stables**, et savez-vous à peu près combien de nouveaux utilisateurs apporte une unité de budget ou de temps ? À ce stade, il ne s’agit plus de chance, mais de chemins de croissance répétables et prévisibles.
+
+**Avez-vous commencé à construire des mécanismes de service**, comme support client, opérations, éducation utilisateur ? Avec plus d’utilisateurs, vous ne pouvez plus accompagner tout le monde un par un comme au début ; il faut des systèmes standardisés.
+
+**Comment ce produit gagnera-t-il de l’argent ?** Abonnement, paiement unique, services à valeur ajoutée ou autre ? Le modèle économique n’a pas besoin d’être parfaitement clair dès le premier jour, mais en 1–N, il faut penser sérieusement à la durabilité.
+
+**Quelle impression de marque voulez-vous laisser ?** Au début, vous diffusez peut-être dans un petit cercle ; avec l’échelle, vous devez réfléchir à la manière dont davantage de personnes se souviennent de vous, vous font confiance et vous recommandent.
+
+**Quelles capacités manquent encore à l’équipe, et quels maillons doivent être suivis durablement ?** Une personne ou une petite équipe peut porter 0–1, mais 1–N demande souvent plus de rôles.
+
+Ces sujets sont importants, mais si vous les abordez trop tôt, vous risquez de tourner à vide. Tant que vous ne savez pas si des gens veulent vraiment utiliser et rester, parler modèle économique et marque détourne l’attention du point le plus urgent.
+
+### Pourquoi se concentrer d’abord sur 0–1 ?
+
+Pour un développeur indépendant ou une petite équipe, **0–1 est la priorité réelle**. La raison est simple : si vous ne trouvez pas les premiers vrais utilisateurs, toutes les discussions sur l’échelle, la monétisation et la marque restent vides.
+
+Le 0–1 est le moment le plus fragile et le plus critique du cycle de vie du produit. Il décide si vous pouvez prouver la valeur, établir la confiance initiale et poser la base de la croissance future. Ce n’est qu’après avoir réellement traversé 0–1 que vous pouvez parler sérieusement de 1–N.
+
+Ensuite, concentrons-nous sur 0–1 : clarifier d’abord **qui chercher**, puis discuter des chemins concrets de cold start.
+
+## 5.2 Les cibles du cold start : seed users, offre, trafic et canaux
+
+Selon le type d’application, on rencontre souvent plusieurs cibles clés : seed users, côté offre, côté trafic et côté canal.
+
+### Première catégorie : les seed users
+
+**Les seed users sont les premiers utilisateurs que vous atteignez.** Ils sont peu nombreux, mais très proches de votre profil cible. Ce que vous devez obtenir d’eux n’est pas seulement des inscriptions et données d’usage, mais aussi un feedback de première main sur la direction et l’expérience.
+
+- Pour un outil personnel, les seed users peuvent être les personnes qui souffrent depuis longtemps d’un problème précis : créateurs de contenu qui organisent souvent de longs textes, professionnels qui préparent souvent des rapports, étudiants qui manipulent beaucoup de documents.
+- Pour une application éducative, ce peut être un petit groupe de candidats préparant le même examen, ou des parents d’un même niveau scolaire.
+
+Au cold start, fixez-vous un objectif clair : par exemple, trouver d’abord 20 à 50 utilisateurs prêts à coopérer, puis passer une ou deux semaines à utiliser le produit et discuter avec eux. L’important n’est pas la quantité, mais la densité d’échange qui clarifie la logique produit.
+
+### Deuxième catégorie : le côté offre
+
+**Dans certains produits de plateforme à deux ou plusieurs côtés**, avoir seulement des utilisateurs finaux ne suffit pas. Sans assez d’offre, les utilisateurs entrent puis repartent vite, parce qu’ils ne trouvent rien à utiliser.
+
+**Le côté offre peut être composé de créateurs, enseignants, prestataires, marchands, chauffeurs, propriétaires**, etc. Il détermine la richesse et l’attractivité de la plateforme.
+
+- Pour une plateforme de ressources pour designers, il faut d’abord convaincre des designers de téléverser des travaux, même seulement une petite partie gratuite. Sinon, les utilisateurs ne voient que quelques exemples et ne restent pas.
+- Pour un outil de réservation en ligne, sans marchands ou institutions prêts à accepter des réservations, les utilisateurs ne trouvent aucune cible réelle.
+
+Au cold start, soyez clair : résolvez-vous d’abord le côté demande, le côté offre, ou les deux en même temps ? Beaucoup de plateformes ont traversé ce choix. Le simple fait de reconnaître ce problème structurel vous place déjà devant ceux qui ne pensent qu’à attirer des utilisateurs finaux.
+
+### Troisième catégorie : le côté trafic
+
+Le côté trafic regroupe les personnes ou organisations capables de **diriger en peu de temps une quantité significative d’attention vers vous**. Il peut s’agir de créateurs, comptes verticaux, médias, gestionnaires de communautés ou plateformes d’outils avec beaucoup d’utilisateurs.
+
+- Pour un outil professionnel, convaincre quelques créateurs spécialisés carrière de présenter naturellement l’application peut attirer rapidement des personnes sensibles aux outils d’efficacité.
+- Pour un assistant de sujets destiné aux créateurs Xiaohongshu, coopérer avec plusieurs créateurs de taille moyenne et leur faire montrer l’usage en situation peut transformer leur audience en seed users potentiels.
+
+Au cold start, ne cherchez pas forcément les plus gros comptes. Des sources de trafic plus petites, mais dont l’audience recoupe fortement votre cible, sont souvent plus ouvertes à des essais personnalisés. Votre tâche est de les trouver, puis de proposer une collaboration claire : ce que vous faites et ce que l’autre y gagne.
+
+### Quatrième catégorie : le côté canal
+
+Les canaux sont les organisations ou entrées qui vous aident à **atteindre de manière stable des utilisateurs cibles dans un scénario donné**. La différence avec le trafic est que le trafic apporte plutôt une attention ponctuelle, tandis qu’un canal crée une connexion plus longue et structurée.
+
+- Écoles, organismes de formation, entreprises, associations professionnelles et fournisseurs de logiciels sont des canaux typiques.
+- Si votre application aide vraiment une institution à gagner en efficacité, réduire ses coûts ou améliorer son service, elle a une raison de la recommander à de nombreux utilisateurs dans son système.
+
+Au cold start, ne rêvez pas de signer un grand canal d’un coup. Commencez par un petit pilote : une ou deux classes, une petite entreprise, une communauté locale. Laissez-les utiliser le produit en interne, puis décidez d’élargir selon les retours.
+
+Découper les cibles du cold start évite de mettre toute l’énergie sur l’acquisition d’utilisateurs finaux et d’ignorer les autres maillons importants. Selon votre produit, dessinez une carte simple des rôles : qui est chaque cible, combien y en a-t-il maintenant, quels sont les objectifs à court terme. Une fois cette carte claire, vous pouvez parler des chemins.
+
+## 5.3 Méthodes de cold start : trois chemins principaux selon les cibles
+
+Quand vous savez qui chercher, la question suivante est : par quel chemin les trouver et les servir ?
+
+En pratique, vous n’avez pas à vous limiter à une seule méthode. Choisissez selon vos ressources et les caractéristiques du produit. La plupart du temps, vous aurez un chemin principal et un ou deux compléments.
+
+### Chemin 1 : ouvrir la brèche avec les seed users, utiliser d’abord votre portée privée
+
+Ce chemin vise surtout les seed users et une partie du côté offre.
+
+Pour la plupart des développeurs indépendants, petites équipes et startups en démarrage, le moyen le plus réaliste, le moins coûteux et le plus facile à contrôler consiste à partir de sa portée privée existante.
+
+La portée privée n’est pas un concept d’opérations compliqué. Ce sont simplement les personnes que vous pouvez déjà contacter activement : votre cercle d’amis, des communautés métier auxquelles vous participez, des groupes d’intérêt où vous avez une voix, les lecteurs d’un compte que vous entretenez.
+
+Dans ce chemin, il y a trois actions clés :
+
+1. **Inviter activement un petit nombre d’utilisateurs très ciblés à essayer**
+   L’important n’est pas le volume, mais la correspondance avec le profil cible. Si vous construisez un outil de CV pour les jeunes actifs, cherchez d’abord des diplômés récents ou étudiants en recherche de stage, pas des connaissances avec dix ans d’expérience.
+   Dans l’invitation, dites clairement :
+   1. pour quelle personne et quel problème l’application est faite ;
+   2. combien de temps vous espérez que l’essai prendra ;
+   3. comment vous traiterez leur feedback.
+2. **Collecter consciemment les retours et améliorer vite**
+   La valeur des seed users n’est pas de gonfler les chiffres, mais de révéler les angles morts. Utilisez des discussions un à un ou de petits questionnaires pour comprendre dans quel scénario ils pensent au produit, où ils bloquent, ce qui est utile ou inutile.
+3. **Faire produire aux seed users les premiers contenus ou cas**
+   Les traces d’usage réelles sont déjà du contenu : avis, captures comparatives, histoires d’utilisation. Elles serviront plus tard à présenter le produit.
+
+Pendant ce processus, résistez à l’envie de diffusion massive. Si vous ne servez pas bien ces quelques dizaines de personnes, exposer davantage le produit ne fera qu’amplifier les problèmes.
+
+### Chemin 2 : utiliser contenu ou bénéfices pour donner une première raison claire
+
+Ce chemin vise surtout seed users et côté trafic, et il est fréquent dans les marchés compétitifs.
+
+Quand l’utilisateur a beaucoup d’alternatives, « venez essayer ce nouveau produit » suffit rarement. Il faut une raison plus claire et plus attirante pour qu’il accepte de faire le premier pas.
+
+Deux approches courantes :
+
+1. Utiliser des **bénéfices concrets** comme accroche.
+   1. Une nouvelle plateforme de cours peut proposer au début quelques cours gratuits de qualité, ou des places limitées en promotion.
+   2. Une application e-commerce peut utiliser coupons, réductions ou offres groupées pour rendre le premier essai peu risqué.
+2. **Attirer durablement par du contenu vertical**
+   Sur Douyin, Xiaohongshu, un compte public, un podcast ou autre, publiez régulièrement du contenu utile autour d’un thème vertical qui intéresse votre cible : conseils de carrière, programmation, gestion émotionnelle, cuisine, méthodes d’apprentissage.
+   Les personnes attirées par le contenu ne deviennent pas toujours immédiatement utilisatrices, mais elles vous accordent déjà une base de confiance. Quand vous présentez l’outil au bon moment, elles l’examinent plus sérieusement.
+
+Si vous choisissez le contenu, acceptez que ce soit plus lent au départ mais plus durable. Il faut produire du contenu solide et ne pas se laisser guider uniquement par les vues ou lectures. **Ce qui aide vraiment le cold start, c’est le petit groupe qui trouve une résonance dans votre contenu, pas le trafic bref qui arrive puis disparaît.** Dans tous les cas, il faut guider les personnes vers l’application et leur faire vivre une expérience complète.
+
+### Chemin 3 : s’appuyer sur de grandes plateformes et trouver une brèche dans un écosystème existant
+
+Ce chemin vise surtout le côté offre, le côté trafic et les canaux.
+
+Dans beaucoup de domaines, créer son propre écosystème de zéro coûte très cher. Mais si vous vous considérez d’abord comme une nouvelle boutique, un nouveau compte ou un nouveau plugin dans une grande plateforme, la difficulté de cold start baisse fortement.
+
+- En e-commerce, entrer sur Taobao, Pinduoduo, JD ou d’autres plateformes évite de construire paiement, logistique et système d’avis à partir de zéro. Les méthodes courantes incluent ventes par créateurs, promotion interne, emplacements d’activité et live.
+- Les outils et applications de contenu peuvent créer des plugins ou mini-outils pour des plateformes mûres et publier leurs services dans des marketplaces ouvertes, afin que les utilisateurs avec un besoin explicite les trouvent plus facilement.
+
+La logique est **d’admettre que les grandes plateformes ont déjà concentré les utilisateurs dans certains scénarios, et que votre travail consiste à trouver le petit coin qui correspond à votre produit**. S’appuyer sur elles ne veut pas dire renoncer à l’indépendance ; c’est une façon plus réaliste d’ouvrir la situation au cold start.
+
+## 5.4 Choisir quand les ressources sont limitées : au stade 0–1, ne faire que la partie la plus critique
+
+Vous avez confirmé être encore en 0–1, clarifié les cibles, choisi à peu près un chemin de cold start, puis vous découvrez que les ressources manquent.
+
+Les ressources ne sont pas seulement l’argent : temps, énergie, personnes, attention, relations et canaux comptent aussi. Au cold start, si vous voulez « essayer plusieurs voies à la fois », le résultat est souvent le même : beaucoup d’activité, peu de profondeur, aucun résultat convaincant et une mauvaise compréhension des utilisateurs.
+
+À cette étape, il faut réduire volontairement. L’objectif n’est pas de faire beaucoup, mais de faire solidement la petite partie la plus importante. Vous pouvez reconstruire votre action depuis trois angles.
+
+### Du but à la tâche concrète
+
+Beaucoup de gens se fixent des objectifs comme « voir la réaction du marché », « commencer à faire des utilisateurs » ou « attirer une vague d’essais ». C’est trop vague pour savoir si vos actions quotidiennes avancent vraiment.
+
+Une méthode plus réaliste consiste à resserrer l’objectif en une petite tâche : dans les quatre prochaines semaines, faire utiliser plusieurs fois l’application en situation réelle par vingt utilisateurs correspondant au profil cible, et obtenir d’eux des retours assez concrets.
+
+**Un segment n’est pas “toute personne pouvant utiliser ce type d’outil”, mais un groupe que vous pouvez décrire avec une étiquette précise.** Si votre outil génère des rapports de travail, la cible peut être « professionnels des opérations Internet avec 1 à 3 ans d’expérience », et non « salariés ». Ces personnes ont un problème concret et continu : elles doivent faire des rapports, ont peu de temps et veulent un rendu professionnel.
+
+**Une tâche d’usage complète doit aussi être explicite.** Pour cet outil de rapport, elle peut être : l’utilisateur rassemble les données et matériaux de la semaine, les importe, génère un brouillon, le révise deux ou trois fois selon la structure proposée, exporte en PPT ou document, puis l’utilise vraiment en réunion. S’il clique deux fois par curiosité puis ferme, ce n’est pas une utilisation complète.
+
+Les retours doivent être précis :
+
+- lors de l’import des données, y a-t-il une étape incompréhensible, une entrée introuvable ou des erreurs de clic fréquentes ;
+- la structure générée correspond-elle aux habitudes de rapport de son entreprise, par exemple « contexte–objectif–processus–résultat » ;
+- quelles pages sont vraiment utilisées, lesquelles sont supprimées à chaque fois ;
+- après usage, sent-il clairement que la préparation passe de trois heures à une heure, ou seulement que « c’est un peu plus pratique » sans pouvoir le dire.
+
+### Ne pas tout essayer une fois
+
+Une fois le petit objectif défini, la question suivante est : comment trouver ces vingt utilisateurs et les accompagner dans leur scénario réel ?
+
+Les méthodes sont nombreuses : contenu, communauté, publicité, créateurs, institutions, plateformes. Mais avec des ressources limitées, vous n’avez pas besoin de connaître toutes les méthodes ; vous devez choisir **celle qui est la plus naturelle pour vous maintenant et la plus facile à poursuivre**.
+
+Si vous écrivez déjà des articles longs et avez des lecteurs attentifs, commencez par le contenu. Rédigez par exemple un récit très concret de préparation d’un vrai rapport mensuel avec votre outil : données brutes, structure, brouillon, corrections, présentation finale. Ajoutez des captures avant/après pour montrer le gain de temps, de clarté et de qualité. À la fin, ne mettez pas seulement un lien froid : dites clairement que si le lecteur fait aussi des rapports opérationnels et veut vous aider à améliorer l’outil, il peut vous contacter ou remplir un formulaire ; vous sélectionnerez vingt personnes pour un suivi un à un.
+
+Si vous avez plusieurs communautés stables, comme un groupe d’opérations ou un groupe d’anciens élèves, partez plutôt de cette portée privée. Dites franchement : « je construis un outil de génération de rapports ; il fonctionne déjà mais reste brut ; je cherche des personnes qui ont vraiment ce besoin pour le tester avec moi ». Parmi les volontaires, choisissez les plus proches du profil, créez un petit groupe, demandez-leur de tester, d’envoyer captures, critiques et idées, puis suivez chaque jour.
+
+Si vous avez des contacts dans un secteur vertical, par exemple des enseignants en formation ou un responsable de petite entreprise, faites un pilote dans une classe ou une petite équipe. Proposez un plan clair : pendant un mois, tous les rapports hebdomadaires de cette équipe seront générés avec votre outil ; vous fournissez support et ajustements ; en échange, ils vous accordent dix minutes par semaine pour dire ce qui est fluide et ce qui est pénible.
+
+### Ne peaufiner que la partie la plus critique
+
+Quand vous avez un petit objectif et un chemin principal, imposez-vous une contrainte : ne travailler que cette petite partie.
+
+Les équipes en cold start partagent souvent une émotion : l’anxiété. Avec l’anxiété, on cherche vite de nouvelles actions : créer un compte vidéo court, tourner des tutoriels, dépenser un petit budget publicitaire, contacter des médias. **Chaque action paraît raisonnable seule, mais ensemble elles vous font changer de direction chaque jour sans approfondir aucune voie.**
+
+Vous pouvez définir une contrainte très concrète : pendant les quatre prochaines semaines, ne faire que deux choses. Premièrement, autour de ces vingt utilisateurs, améliorer encore et encore l’expérience en situation réelle pour passer de « à peine utilisable » à « globalement fluide ». Deuxièmement, le long du chemin principal choisi, trouver quelques nouveaux utilisateurs, enregistrer leurs comportements et retours, puis comparer leurs points communs et différences avec le premier groupe.
+
+Pendant ces quatre semaines, face à toute nouvelle idée ou opportunité, demandez-vous : est-ce que cela améliore clairement l’usage de ces vingt utilisateurs, ou m’aide vraiment à trouver le prochain groupe similaire ?
+
+Cette méthode reconnaît une réalité du cold start : vous avez peu d’informations et ne pouvez pas juger correctement dix directions à la fois. Mieux vaut faire des améliorations vérifiables dans un scénario concret et auprès d’un groupe précis. Par exemple, vous pouvez voir clairement que chez ces jeunes profils d’opérations, l’outil réduit vraiment le temps de préparation des rapports et aide vraiment à clarifier les points clés.
+
+Vous devez faire tourner une boucle : **trouver des utilisateurs -> guider l’usage -> collecter le feedback -> améliorer l’expérience -> obtenir une utilisation continue**. Ce n’est qu’après avoir fait tourner cette boucle que vous saurez quels utilisateurs chercher, avec quels mots leur parler, où le parcours casse le plus souvent et quels ajustements les ramènent. Ajouter un nouveau canal ou tester un autre partenariat n’a de sens qu’après cela.
+
+# Résumé
+
+Revenons à la question initiale : si je veux construire une application, par où commencer de manière fiable ?
+
+Tout cet article suit une ligne principale : **clarifier d’abord ce qu’est une idée, comprendre sa relation avec les besoins utilisateurs, puis la découper progressivement en un chemin complet qui peut être construit, utilisé, amélioré, amplifié par l’IA et relié à des utilisateurs.**
+
+Dans le premier chapitre, nous sommes partis de l’idée elle-même. Une idée n’est plus seulement « ça a l’air cool » dans votre tête ; elle doit viser un groupe clair d’utilisateurs, **être ancrée dans un scénario concret, aider à accomplir une tâche précise et proposer une meilleure méthode que l’existant**. Vous avez appris à examiner vos idées à travers le jeu, le parcours utilisateur, la tâche et le problème résolu. Vous avez aussi vu le fossé entre idée et besoin utilisateur, contenu l’auto-satisfaction, distingué vrai besoin et faux besoin, et compris que les bonnes et mauvaises idées divergent très tôt. Vous avez appris à ne plus attendre passivement l’inspiration, mais à chercher dans votre vie, votre audience, les espaces publics et les produits existants ; puis à résumer une idée en une phrase, utiliser l’IA pour brainstormer et trouver une différenciation par groupe et scénario.
+
+Dans le deuxième chapitre, vous êtes passé de la réflexion à l’action. Vous avez appris à alterner divergence et convergence, à ouvrir les idées avec le double diamant puis à les resserrer selon valeur utilisateur, faisabilité et coût en temps. Vous avez pratiqué le passage de l’abstrait au concret, en transformant des souhaits vagues comme « je veux faire une application d’efficacité » en actions minimales exécutables. Vous avez dessiné avant de construire, séparé l’application en page d’entrée, page d’opération et page de résultat, et cartographié le chemin de l’utilisateur. Vous avez aussi cessé de voir les références comme une copie, pour analyser navigation, formulaires, résultats et guidage afin d’emprunter l’expérience mûre. Surtout, vous n’attendez plus que le produit soit fini pour parler aux utilisateurs : vous demandez dès le prototype et la version semi-finie.
+
+Dans le troisième chapitre, vous avez construit vos critères pour distinguer ce qui est simplement utilisable de ce qui est vraiment bon. Vous ne dites plus vaguement « cette application est pas mal » ; vous regardez si elle économise du temps, réduit les erreurs, diminue le coût de communication et allège la charge mentale. Vous savez qu’une bonne application doit être presque auto-explicative, apparaître naturellement dans les scénarios clés et porter un vrai esprit d’aide. Vous avez aussi compris la différence entre C-end et B-end : le premier se concentre davantage sur l’émotion et la diffusion, le second sur efficacité, coût, risque et conformité. Vous ne vous fiez plus seulement à votre préférence ; vous utilisez feedback, rétention, fréquence de retour et recommandation pour décider si l’investissement vaut la peine.
+
+Dans le quatrième chapitre, vous avez élargi la perspective du produit aux capacités IA. Vous avez appris à résister à l’impulsion de faire de l’IA pour l’IA, et à poser deux questions : l’application tient-elle sans IA, et qu’est-ce que l’IA améliore concrètement ? Vous avez vu les capacités et limites de l’IA dans le texte, l’image, la vidéo et l’automatisation, et compris où déléguer au modèle et où garder une validation humaine. Vous avez aussi appris à regarder des indicateurs plus profonds : temps de tâche réduit, qualité de résultat améliorée, fréquence d’usage plus élevée, volonté de payer pour des fonctions IA.
+
+Dans le cinquième chapitre, tout revient à une réalité : même avec une bonne application et de l’IA, sans utilisateurs, la valeur reste zéro. Vous avez distingué 0–1 et 1–N, mis de côté temporairement les grands sujets de marque, organisation et échelle, et concentré l’attention sur une chose : faire utiliser le produit à vingt vrais utilisateurs et les faire revenir. Vous avez appris à cold-starter par trois lignes : seed users proches de vous, contenu ou bénéfices limités, plateformes et canaux existants. Vous avez aussi séparé les objets : seed users, côté offre, côté trafic et côté canal. Quand les ressources sont limitées, vous choisissez la voie la plus naturelle et la plus facile à lancer, puis vous l’approfondissez au lieu d’ouvrir dix canaux à moitié faits.
+
+En réunissant tout cela, la méthode n’a rien de mystérieux : **partir d’une idée fiable enracinée dans un vrai besoin ; utiliser dessin, écriture et découpage pour la faire converger vers une application minimale viable ; utiliser de vrais utilisateurs et des indicateurs explicites pour la polir ; introduire raisonnablement l’IA aux points clés ; enfin, avec des ressources limitées, utiliser le bon cold start pour trouver les premières personnes prêtes à payer.**
+
+La suite consiste simplement à abandonner trop d’imagination, choisir une direction, la construire et la lancer pour qu’elle soit testée par le monde réel. **Toutes les discussions sur les idées, les méthodes, l’IA et la croissance doivent finir sur une personne concrète, un scénario concret et une tâche concrète.**
+
+C’est pourquoi un début brut n’est pas grave. Fonctions incomplètes, flux rigides, interface simple, peu importe. Même si personne ne répond au lancement, même si personne ne veut s’inscrire ou payer, ce n’est pas une conclusion finale. Ce sont des états de processus qui indiquent seulement quoi modifier ensuite. Ce qui compte est de progresser, de faire des rétrospectives, de résumer, de relever vos limites et de rencontrer davantage de personnes prêtes à donner des conseils utiles.
+
+À ce stade, l’auteur pense qu’il suffit de profiter du processus. Comme le dit le jeu narratif bien connu *To the Moon* :
+
+**_"The ending isn't any more important than any of the moments leading to it."_**
+
+**_La fin n’est jamais plus importante que le chemin qui y mène._**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image21.png)
diff --git a/docs/fr-fr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/fr-fr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..a25d1ab
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,359 @@
+# Comparaison de sept outils de programmation AI
+
+## Introduction du chapitre
+
+Face à la multitude d'outils de programmation AI, lequel est le plus adapté à vos besoins ? Ce chapitre propose une évaluation comparative approfondie de 7 plateformes Web Vibe Coding grand public — Lovable, Replit, Z.ai et autres — à travers une tâche pratique commune : développer un jeu « Snake + Poésie AI ». Nous comparerons la convivialité pour les débutants, la maîtrise du code et la facilité de déploiement pour vous aider à choisir rapidement le meilleur outil d'assistance au développement.
+
+---
+
+# 1. Construire un jeu Snake avec Vibe Coding : Tutoriel complet
+
+Cet article présente une pratique de développement émergente — le « Vibe Coding (codage ambiance) » — qui utilise l'intelligence artificielle pour accélérer le processus de construction d'applications.
+
+Nous présenterons successivement les concepts fondamentaux du Vibe Coding, expliquerons ce qu'est un AI Agent, et proposerons des méthodes pratiques pour écrire des prompts. Enfin, nous construirons de zéro un jeu « Snake » complet, et comparerons en détail plusieurs plateformes Vibe Coding pour vous aider à choisir la combinaison d'outils la plus adaptée.
+
+## Vous apprendrez :
+
+- **Qu'est-ce que le Vibe Coding :** comprendre sa définition, son flux de travail et ses avantages clés.
+- **Le rôle de l'AI Agent :** comprendre le fonctionnement d'un AI Agent et sa différence avec les programmes traditionnels.
+- **Comment écrire de bons prompts :** maîtriser l'écriture de prompts clairs et spécifiques pour obtenir de meilleurs résultats.
+- **Outils Vibe Coding :** découvrir un ensemble de plateformes AI de programmation et de design.
+- **Comparaison de plateformes :** évaluer et comparer les forces et faiblesses de 7 plateformes AI Agent du point de vue d'un débutant.
+- **Outils UI / UX :** apprendre à intégrer Figma, Mastergo et autres outils UI/UX dans le flux de travail global.
+
+## 1. Introduction
+
+Dans les cours précédents, nous avons toujours utilisé le modèle de développement full-stack de z.ai pour accomplir les tâches de programmation.
+
+Mais nous sommes-nous demandé : son cœur est en réalité un « AI Agent » (différent de l'AI chatbot classique, et bien plus intelligent) ? Parce qu'il ne fait pas que dialoguer avec vous — il peut réfléchir (quand vous lui donnez une tâche, il élabore d'abord un plan), et aussi prendre des initiatives (comme appeler une recherche web, exécuter des commandes système, ouvrir des pages web, etc.). Nous détaillerons cela plus tard.
+
+## 1. Qu'est-ce que le Vibe Coding ?
+
+Le Vibe Coding est une nouvelle approche de développement logiciel qui utilise l'IA pour accélérer le processus de développement d'applications. Ce n'est pas un remplacement de la programmation traditionnelle, mais un mode de programmation plus « conversationnel ». Ce concept a été proposé par le chercheur en IA Andrej Karpathy : dans ce flux de travail, les développeurs n'écrivent plus le code ligne par ligne, mais s'appuient principalement sur la direction d'un AI Agent pour générer, optimiser et déboguer des applications.
+
+L'idée centrale du Vibe Coding est de passer d'une approche **« centrée sur le code (code-first) »** à une approche **« centrée sur l'intention (intent-first) »**. Vous n'avez plus besoin de concevoir à partir de la première ligne de code, mais vous décrivez le résultat souhaité en langage naturel.
+
+Le flux de travail typique du Vibe Coding est un cycle itératif :
+
+- **Décrire l'objectif :** décrivez d'abord en une phrase ou un paragraphe la fonctionnalité que vous souhaitez implémenter, par exemple : « Crée un jeu Snake simple avec un backend Python qui peut générer de la poésie. »
+- **L'IA génère le code :** l'AI Agent analyse votre besoin, génère le code initial, incluant la structure de base, les pages frontend et la logique backend.
+- **Exécuter et observer :** exécutez le code généré, vérifiez s'il fonctionne comme prévu, et identifiez les bugs ou les lacunes.
+- **Retourner et itérer :** s'il y a des erreurs ou des résultats insatisfaisants, continuez à donner des instructions dans la conversation, par exemple : « Le serpent se déplace trop lentement, accélère-le », ou « Le fichier `.env` ne lit pas correctement la clé API, corrige le code backend. »
+- **Répéter les étapes ci-dessus :** itérez continuellement dans le cycle « description → génération → exécution → retour » jusqu'à ce que l'application atteigne un état satisfaisant.
+
+### Avantages principaux du Vibe Coding :
+
+- **Réduction de la barrière d'entrée :** permet aux designers, entrepreneurs, étudiants et autres personnes sans expérience en programmation de participer au développement d'applications via le langage naturel.
+- **Prototypage rapide :** le temps entre l'idée et le produit minimum viable (MVP) est considérablement réduit.
+- **Amélioration de l'efficacité :** traitement automatique d'une grande quantité de travail de codage répétitif et mécanique (comme le code boilerplate), permettant aux développeurs de se concentrer sur la conception architecturale et l'abstraction des problèmes.
+- **Favorise l'expérimentation :** encourage une approche « produire d'abord rapidement, puis perfectionner », facilitant les essais de nouvelles idées et fonctionnalités.
+
+## 2. Qu'est-ce qu'une plateforme Vibe Coding en ligne (Web-based) ?
+
+Dans ce test pratique, vous remarquerez que les outils évalués sont divisés en deux catégories : **Web-based (plateformes en ligne)** et **IDE (environnements de développement locaux)**.
+
+Bien que leur cœur soit le même — utiliser l'IA pour vous aider à écrire du code — ils diffèrent considérablement en termes d'expérience utilisateur et de scénarios d'utilisation :
+
+### Plateformes Vibe Coding en ligne (Web-based)
+
+**Outils représentatifs :** Lovable, Replit, Z.ai, v0
+
+C'est comme un appartement hôtel meublé « prêt à emménager ».
+
+- **Pas de configuration d'environnement :** vous n'avez pas besoin de vous soucier de l'environnement Python, de la version Node.js, ni de l'installation des dépendances. Ouvrez le navigateur, entrez l'URL, et vous pouvez commencer à coder immédiatement.
+- **Prévisualisation et déploiement en un clic :** une fois le code généré, la plateforme affiche généralement automatiquement le résultat dans la fenêtre de droite. Une fois terminé, un seul clic génère un lien partageable avec vos amis.
+- **Scénarios adaptés :**
+  - **Validation rapide d'idées (MVP) :** vous avez une idée en tête et voulez passer une demi-heure à voir si c'est faisable.
+  - **Débutants :** vous ne voulez surtout pas être découragé par des erreurs d'environnement complexes, vous voulez juste expérimenter le plaisir de la programmation AI.
+  - **Applications légères :** créer une page d'outil simple, un petit jeu ou une page de présentation personnelle.
+
+### AI IDE (environnement de développement local)
+
+**Outils représentatifs :** Cursor, Trae, VS Code + plugins AI
+
+C'est comme une maison en propriété « entièrement rénovée ».
+
+- **Puissantes capacités locales :** il s'exécute sur votre ordinateur, peut accéder directement à tous vos fichiers locaux et exploiter la puissance de calcul de votre machine.
+- **Intégration transparente avec les flux professionnels :** adapté aux projets volumineux, vous pouvez installer librement divers plugins, vous connecter à des bases de données locales, et effectuer des débogages complexes.
+- **Scénarios adaptés :**
+  - **Développement de projets professionnels :** projets commerciaux nécessitant une maintenance à long terme et une structure complexe.
+  - **Personnalisation approfondie :** besoin d'un contrôle extrême sur les détails du code, ou nécessité de s'intégrer profondément avec les flux de travail locaux existants (comme Git, Docker).
+  - **Confidentialité des données :** le code reste entièrement en local, plus conforme aux normes de sécurité de certaines entreprises.
+
+**En résumé :** si vous découvrez tout juste la programmation AI, ou si vous voulez juste créer rapidement un petit projet pour vous amuser, les **plateformes en ligne** sont un excellent point de départ. Si vous êtes un développeur professionnel, ou si votre projet devient de plus en plus complexe, un **IDE local** vous offrira un plafond plus élevé.
+
+---
+
+## 3. Qu'est-ce qu'un AI Agent ?
+
+### Qu'est-ce qu'un AI Agent ?
+
+Un AI Agent est un système logiciel capable de percevoir son environnement, de prendre des décisions et d'agir de manière autonome pour atteindre un objectif spécifique. Comparé aux logiciels traditionnels qui suivent des instructions fixes et des flux uniques, l'AI Agent est plus flexible et adaptatif.
+
+Voici quelques caractéristiques clés qui distinguent un AI Agent d'un programme traditionnel :
+
+- **Autonomie :** l'AI Agent possède un haut degré d'indépendance. Les programmes traditionnels nécessitent généralement une intervention humaine étape par étape, tandis que l'Agent peut décider de lui-même de la prochaine action en fonction de l'objectif.
+- **Perception et mémoire :** l'Agent collecte des données depuis l'environnement (par exemple, réponses API, données de capteurs, entrées utilisateur, etc.) et conserve le contexte grâce à la « mémoire », permettant de réutiliser l'expérience dans les actions ultérieures et d'améliorer continuellement les résultats.
+- **Rationalité et orientation objectif :** l'Agent analyse et planifie autour de l'objectif donné, choisissant la séquence d'actions la plus appropriée pour optimiser les « indicateurs de performance ».
+- **Utilisation d'outils :** une caractéristique majeure des AI Agents modernes est la capacité d'appeler des outils externes, au-delà de la simple « génération de texte ». Par exemple, il peut naviguer sur le web, exécuter du code, interroger des bases de données, envoyer des emails, etc. — c'est un « cerveau qui orchestre des outils ».
+
+Analogie pour comprendre :
+
+- Un **programme traditionnel** est comme une calculatrice. Vous lui donnez des nombres et des opérateurs, il n'exécute le calcul que lorsque vous appuyez sur un bouton.
+- Un **assistant AI** est comme un assistant humain. Vous lui demandez « Trouve-moi un restaurant à proximité », il vous donne les résultats de recherche et liste les options, mais c'est vous qui prenez la décision finale.
+- Un **AI Agent** est plutôt comme une équipe de recherche automatisée. Vous donnez simplement un objectif de haut niveau (comme « Planifie-moi un voyage au Japon »), et il décompose les tâches, cherche des informations en ligne, réserve des vols et hôtels (via API), organise l'itinéraire, et vous livre le résultat — le tout presque sans intervention de votre part sur les détails.
+
+---
+
+# 2. À propos de la rédaction des prompts
+
+## 1. Mieux vaut-il écrire un prompt parfait d'un coup ou procéder par étapes ?
+
+Beaucoup de gens sont tentés de tout expliquer en un seul prompt pour « créer une application full-stack complète ». En fait, les outils actuels sont suffisamment puissants pour potentiellement produire un résultat décent en une seule fois. Mais en termes d'expérience globale et de taux de réussite, décomposer le travail en petites étapes et itérer par phases donne souvent de meilleurs résultats, et réduit le risque de se retrouver coincé dans une impasse « impossible à modifier ».
+
+> **Petit conseil :** au lieu d'espérer « tout faire en une fois », décomposez le grand objectif en petites tâches exécutables (To-do).
+> Par exemple, au lieu de dire directement « build me a Snake game », décomposez en :
+> « 1. D'abord, crée le frontend d'un jeu Snake »,
+> « 2. Ensuite, implémente un backend pour enregistrer les scores »,
+> « 3. Enfin, connecte le frontend et le backend ».
+> Cela permet à l'IA de comprendre plus précisément vos besoins et de produire un résultat plus fiable.
+
+## 2. Plus c'est clair, mieux c'est
+
+- En Vibe Coding, les prompts que vous écrivez sont aussi importants que le code que vous écrivez. Plus le prompt est clair et spécifique, plus le résultat sera proche de ce que vous avez en tête.
+- Définir clairement les objectifs et les contraintes dès le début réduit le nombre de modifications ultérieures — ce qui fait gagner du temps et économise les crédits et les coûts.
+
+---
+
+# 3. Panorama des outils (Vibe Coding / Outils UIUX)
+
+## 1. Plateformes AI Agent
+
+| **Nom**                                   | **Plateforme** |
+| ------------------------------------------ | ------------ |
+| **[Lovable](https://lovable.dev/)**        | Web-based    |
+| **[Cursor](https://cursor.com/cn/agents)** | PC           |
+| **[Z.ai](https://chat.z.ai/)**             | Web-based    |
+| **[Replit](https://replit.com/~)**         | Web-based    |
+| **[Minimax](https://agent.minimaxi.com/)** | Web-based    |
+| **[Trae](https://www.trae.ai/)**           | PC           |
+| **[V0](https://v0.app/)**                  | Web-based    |
+
+## 2. Plateformes AI UIUX
+
+| **Nom**                              | **Plateforme**         |
+| ------------------------------------- | -------------------- |
+| **[Mastergo](https://mastergo.com/)** | Web-based            |
+| **[FIgma](https://www.figma.com/)**   | Web-based, PC Plugin |
+
+---
+
+# 4. Tutoriel pratique (Vibe Coding + UI combiné)
+
+1. Dans la fenêtre de chat de la plateforme Vibe Coding de votre choix, entrez la description du programme que vous souhaitez.
+   Exemple :
+
+   > Merci de construire une application web Snake simple avec frontend et backend.
+   >
+   > 1. Frontend
+   >
+   > - Page 1 : Page de jeu
+   >   - Contrôler le déplacement du serpent avec le clavier.
+   >   - Le serpent ne mange pas de la nourriture, mais des mots anglais.
+   >   - La barre latérale affiche les mots collectés et leur nombre.
+   >   - Après la fin du jeu, les mots collectés sont conservés et continuent dans la nouvelle partie.
+   > - Page 2 : Page de poésie (Make Poem)
+   >   - Afficher la même liste de mots que la page de jeu (données cohérentes).
+   >   - Fournir un bouton pour envoyer les mots collectés au backend afin de générer un poème.
+   >   - Après génération du poème, les mots utilisés sont retirés de la liste ou leur compteur est décrémenté.
+   >
+   > * Ajouter une navigation simple pour basculer entre les pages Game et Make Poem.
+   > * S'assurer que les mots collectés sont visibles sur les deux pages.
+   >
+   > 2. Backend
+   >
+   > - Fournir une API backend qui reçoit les mots collectés et retourne un poème.
+   > - Utiliser l'API DeepSeek pour générer la poésie.
+   > - Stocker la clé API dans un fichier `.env`, et ignorer ce fichier dans `.gitignore`.
+
+2. Entrez votre clé API DeepSeek. (Vous pouvez l'obtenir sur [https://platform.deepseek.com/](https://platform.deepseek.com/))
+   1. La clé API du LLM est utilisée pour appeler le grand modèle dans votre propre projet. Étant une information sensible, elle ne peut pas être publique et doit être écrite séparément dans un fichier de configuration.
+      **Pourquoi utiliser un fichier `.env` et ne pas le pousser sur GitHub ?**
+   - Le fichier `.env` est spécifiquement conçu pour stocker des **clés ou mots de passe** (comme la clé API DeepSeek).
+   - Si ce fichier est poussé sur GitHub, tout le monde pourra voir votre clé et l'utiliser frauduleusement.
+   - Pour des raisons de sécurité, nous devons déclarer dans le fichier `.gitignore` d'ignorer `.env`, pour que Git ne le suive pas.
+   - Ainsi, votre projet peut toujours utiliser ces clés localement, sans les divulguer dans le dépôt.
+
+3. Après avoir consulté le résultat généré, si vous trouvez des erreurs ou des points à modifier, vous pouvez directement entrer vos demandes de modification dans la fenêtre de chat.
+4. Si vous n'êtes pas satisfait du design de la page, vous pouvez également choisir de redessiner l'interface dans Figma ou Mastergo, puis transmettre les idées de design à l'Agent.
+
+- **Exemple**
+
+> Merci de concevoir une **application Web à deux pages** nommée _Word-Snake_.
+>
+> - **Page Game :**
+> - Le serpent est contrôlé par le clavier.
+> - Le serpent mange des mots anglais, pas de la nourriture classique.
+> - Le panneau latéral affiche les mots collectés et leur nombre.
+> - Après la fin du jeu, l'inventaire des mots n'est pas vidé, il continue dans la nouvelle partie.
+> - **Page Make Poem :**
+> - Afficher le même inventaire partagé de mots.
+> - L'utilisateur sélectionne certains mots et clique sur le bouton **Generate Poem**.
+> - Ces mots sont envoyés au backend, où l'API DeepSeek génère un poème.
+> - Après génération du poème, les mots utilisés sont retirés de l'inventaire.
+> - **Navigation :** basculer entre les deux pages via des onglets simples ou un menu en haut.
+> - **État partagé :** s'assurer que les mots collectés restent toujours synchronisés et visibles sur les deux pages.
+
+- **Exemple de résultat**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. Comparaison des plateformes AI Agent (comment choisir la meilleure combinaison pour un projet simple)
+
+Différentes plateformes Vibe Coding ont chacune leurs particularités et leur flux de travail. Nous avons testé la même exigence « jeu Snake avec API DeepSeek » sur plusieurs plateformes, et évalué leurs forces et faiblesses du point de vue d'un débutant. Voici le résumé.
+
+## 1. Critères de comparaison
+
+1. **Objectif**
+   Construire une application web Snake intégrée à l'API DeepSeek.
+2. **Détails du jeu**
+   1. Le jeu génère de la poésie via l'API DeepSeek LLM.
+   2. Le serpent mange des mots anglais, les mots collectés sont conservés après la fin du jeu et continuent dans la nouvelle partie. Les mêmes mots peuvent être collectés plusieurs fois et sont comptés séparément.
+   3. Quand un poème est généré, les mots utilisés sont retirés de l'inventaire.
+
+3. **Fonctionnalités indispensables**
+   1. Une page frontend exécutable, incluant le jeu Snake (contrôle clavier, rendu Canvas).
+   2. Mécanisme de collecte de mots (les mots apparaissent sur le plateau, quand le serpent les mange, la liste latérale se met à jour).
+   3. Persistance de l'inventaire des mots entre les parties.
+   4. Un backend utilisant l'API DeepSeek (si pas de clé API, peut d'abord retourner des poèmes simulés).
+   5. Un bouton « Générer un poème » : au clic, appelle le backend, affiche le poème, et met à jour l'inventaire en fonction de l'utilisation.
+   6. Support du fichier `.env` pour la clé API, et exclusion via `.gitignore` pour éviter la fuite de la clé.
+
+4. **Bonus**
+   1. L'utilisateur peut choisir quels mots utiliser pour générer le poème.
+   2. UX conviviale (par exemple, barre latérale affichant clairement la liste de mots, mise en page raisonnable de la zone de poésie).
+   3. Commentaires dans le code pour les débutants, expliquant la logique clé.
+
+## 2. Comparaison des résultats de codage
+
+### 1. Lovable (Web-based)
+
+- **Type de plateforme :** Web
+- **Caractéristiques principales et flux de travail :** Lovable excelle dans l'intégration et la collaboration. Il automatise des tâches comme la connexion à la base de données Supabase, rendant le processus de configuration du projet très fluide. Il suffit de décrire les besoins du projet pour que l'Agent connecte les différents services et construise la structure de base.
+- **Utilisateurs ciblés :** Pour les débutants qui essaient le Vibe Coding pour la première fois, Lovable est un choix très convivial. Il simplifie la complexité de la connexion multi-services, vous permettant de vous concentrer sur les prompts et l'itération plutôt que sur la configuration de l'environnement. Grâce à une automatisation poussée, vous obtenez rapidement un prototype fonctionnel.
+- **Processus de prompts :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **Résultat du jeu Snake :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **Prix :** relativement élevé, mais si vous avez un email universitaire, vous pouvez bénéficier d'une réduction de 50% via la vérification étudiante.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor (IDE)
+
+- **Type de plateforme :** Application desktop (PC)
+- **Caractéristiques principales et flux de travail :** Cursor est un IDE propriétaire intégrant des capacités AI, supportant Windows, macOS et Linux. Il intègre directement la génération de code, la réécriture intelligente et la recherche dans la base de code dans l'environnement de développement. Comparé aux outils Web, il offre une expérience plus proche du développement local traditionnel. Étant un environnement local, les configurations varient d'un ordinateur à l'autre, ce qui peut occasionner des problèmes liés à l'environnement. L'avantage est que le projet est sur votre machine, pas besoin de télécharger ou configurer un environnement d'exécution supplémentaire — Cursor gère de nombreuses étapes fastidieuses pour vous.
+- **Utilisateurs ciblés :** Pour les utilisateurs ayant déjà des bases en programmation, Cursor est un environnement très puissant et familier. Mais pour les débutants complets, il faut comprendre soi-même la structure du projet, la gestion des dépendances et l'organisation des fichiers — la courbe d'apprentissage est plus raide. Plus adapté aux développeurs qui souhaitent intégrer un assistant AI dans leur flux de codage traditionnel.
+- **Processus de prompts :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **Résultat du jeu Snake :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **Prix :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai (Web-based)
+
+- **Type de plateforme :** Web
+- **Caractéristiques principales et flux de travail :** L'utilisation de Z.ai est assez directe, mais un défi notable : vous devez **copier-coller manuellement le code généré**. La plateforme elle-même manque d'une fenêtre de prévisualisation en temps réel, ce qui rend difficile de voir immédiatement le résultat de l'exécution du code.
+- **Utilisateurs ciblés :** Cette plateforme requiert une utilisation assez « manuelle ». L'absence d'automatisation signifie que vous devez interagir directement avec le code, ce qui est un exercice formateur pour ceux qui veulent comprendre en profondeur le contenu généré par l'IA. Mais les copier-coller fréquents posent des problèmes d'efficacité et de risque d'erreur. Plus adapté à ceux qui veulent voir « le code brut généré par l'IA » plutôt que ceux qui recherchent une expérience en un clic.
+- **Processus de prompts :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **Résultat du jeu Snake :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **Prix :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit (Web-based)
+
+- **Type de plateforme :** Web
+- **Caractéristiques principales et flux de travail :** Replit est un environnement de développement et de déploiement en ligne tout-en-un. Dans le navigateur, vous pouvez écrire du code, exécuter des programmes et générer des URL d'accès en ligne. Avant de commencer à coder, il affiche un plan d'action clair ; il propose aussi un éditeur visuel où vous pouvez modifier l'UI directement dans la fenêtre de prévisualisation, et le code source se met à jour automatiquement. Cela vous permet de vérifier en permanence si la sortie de l'IA correspond à vos attentes, réduisant considérablement les allers-retours de modification.
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **Utilisateurs ciblés :** Replit est très convivial pour les débutants. Il simplifie le cycle complet du codage au déploiement, sans nécessiter de configuration supplémentaire de serveur ou de service d'hébergement. Les fonctionnalités de collaboration sont également solides, adaptées pour les projets entre camarades de classe ou pour demander de l'aide à distance.
+- **Processus de prompts :** Pendant la construction, l'IA n'a pas compris le besoin du premier coup — environ 3 itérations ont été nécessaires pour obtenir le résultat idéal.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **Résultat du jeu Snake :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **Prix :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Minimax (Web-based)
+
+- **Type de plateforme :** Web
+- **Caractéristiques principales et flux de travail :** Minimax prend généralement plus de temps pour exécuter les tâches. Son processus inclut souvent : l'IA découvre et corrige automatiquement les erreurs, ce qui rend l'ensemble plus lent, voire un peu chaotique. Pour ce projet, l'Agent génère généralement d'abord un plan détaillé, puis construit étape par étape le backend, la base de données et la logique frontend.
+- **Utilisateurs ciblés :** Comme il exécute automatiquement les tests et corrige les erreurs, la consommation de temps et de tokens est importante, mais vous pouvez clairement voir comment l'IA localise et résout les problèmes — ce qui est très valuable d'un point de vue apprentissage.
+- **Processus de prompts :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+- **Résultat du jeu Snake :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+
+- **Prix :** La version gratuite ne permet probablement pas de mener à bien un projet complexe du début à la fin, il est donc recommandé de passer à la version payante pour garantir que le projet puisse être construit complètement.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+### 6. Trae (IDE)
+
+- **Type de plateforme :** Application desktop (PC)
+- **Caractéristiques principales et flux de travail :** En tant qu'application desktop, Trae est généralement plus performant et plus réactif que les outils Web. Mais il nécessite un téléchargement et une installation, ce qui peut représenter une barrière d'entrée légèrement plus élevée pour certains utilisateurs. De même, étant un environnement local, les différences de configuration et de dépendances entre les ordinateurs introduisent une certaine incertitude. L'avantage est que Trae vous aide à créer et configurer le projet localement, et vous pouvez développer et déboguer directement sur votre machine.
+- **Utilisateurs ciblés :** Plus adapté aux utilisateurs qui prévoient de faire du Vibe Coding sur le long terme et souhaitent utiliser un outil desktop dédié. Pour ceux qui veulent juste « essayer de temps en temps », ce n'est peut-être pas le choix le plus léger.
+- **Processus de prompts :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+- **Résultat du jeu Snake :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+
+- **Prix :** Le prix est relativement abordable, même la version gratuite suffit pour réaliser des petits projets de bonne qualité.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+### 7. V0 (Web-based)
+
+- **Type de plateforme :** Web
+- **Caractéristiques principales et flux de travail :** V0 est un outil spécialisé dans la génération de composants UI React, fourni par Vercel. Il excelle dans la génération d'interfaces de haute qualité, prêtes pour la production. Cependant, en utilisation réelle, on rencontre des problèmes comme « difficile de trouver la vue code » ou « pas d'indication claire sur où configurer la clé API ».
+- **Utilisateurs ciblés :** V0 est très adapté aux étudiants ou designers focalisés sur le frontend et le design UI/UX. Mais ce n'est pas une solution full-stack complète — vous avez toujours besoin d'autres plateformes pour implémenter la logique backend et l'intégration API. Si votre objectif est de « construire une application complète en un seul endroit », ce n'est probablement pas le meilleur premier choix.
+- **Processus de prompts :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
+
+- **Résultat du jeu Snake :**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
+- **Prix :** Les utilisateurs gratuits peuvent construire environ 4 à 5 projets simples.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
+
+## 3. Tableau comparatif récapitulatif
+
+| **Plateforme**                                   | **Avis**                                                                     | **Plateforme** | **Notes**                                                                      |
+| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
+| **[Lovable](https://lovable.dev/)**        | Très convivial pour les débutants en programmation AI, prise en main simple et fluide, un choix idéal pour démarrer.                 | Web-based    | Complète automatiquement les connexions de services comme Supabase, réduisant les coûts de configuration.                                   |
+| **[Cursor](https://cursor.com/cn/agents)** | Adapté aux utilisateurs ayant déjà une expérience de développement, améliore considérablement la productivité et la qualité du code.                             | PC           | Nécessite des bases en programmation, l'environnement local demande de comprendre la structure du projet et les dépendances.                         |
+| **[Z.ai](https://chat.z.ai/)**             | Plus adapté aux utilisateurs avec des bases en programmation qui veulent étudier directement les détails du code généré par l'IA.                           | Web-based    | Pas de fenêtre de prévisualisation, vérifier les résultats est plus fastidieux ; nécessite de copier-coller manuellement le code, créer des dossiers et fichiers et lancer les services manuellement. |
+| **[Replit](https://replit.com/~)**         | Recommandé pour ceux qui veulent transformer rapidement une idée en service en ligne accessible.                                   | Web-based    | Développement et déploiement en ligne tout-en-un, supporte la collaboration et fournit un éditeur visuel.                             |
+| **[Minimax](https://agent.minimaxi.com/)** | Adapté à ceux qui veulent voir le processus complet de détection et correction automatique des erreurs par l'IA et en tirer des leçons, mais globalement lent et coûteux en tokens. | Web-based    | Le processus global est long, l'IA exécute plusieurs fois les tests automatiquement et corrige les erreurs.                                |
+| **[Trae](https://www.trae.ai/)**           | Pour les utilisateurs expérimentés en programmation qui souhaitent combiner un IDE desktop et un AI Agent, c'est un outil puissant pour améliorer l'efficacité. | PC           | Nécessite une installation locale et une configuration d'environnement, mais de meilleures performances, adapté aux projets Vibe Coding à long terme.              |
+| **[V0](https://v0.app/)**                  | Optimisé pour les non-développeurs qui veulent créer rapidement des effets visuels React UI, adapté aux étudiants orientés frontend / design.  | Web-based    | Spécialisé dans la génération d'UI React, nécessite de collaborer avec d'autres plateformes pour le backend et la construction d'applications complètes.                  |
+---
+title: 'Comparatif de 7 outils de programmation IA'
+description: 'Evaluation pratique de plateformes Web de Vibe Coding avec une tache unifiee, en comparant prise en main, controle du code et deploiement.'
+---
diff --git a/docs/fr-fr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/fr-fr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..cd6ea3f
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,348 @@
+# Concevoir un site web avec des Agents de design et de programmation
+
+## Introduction du chapitre
+
+Ce chapitre montrera comment le design et le développement peuvent parfaitement collaborer grâce à l'IA. Vous jouerez le rôle de chef de produit, dirigeant un « Agent de design » pour créer le Logo, le schéma de couleurs et la mise en page, puis coordonnant un « Agent de programmation » pour transformer les maquettes visuelles en code exécutable. De l'idée créative à la mise en ligne du site, vous vivrez le flux de développement complet propulsé par l'IA, et deviendrez une équipe à vous seul.
+
+---
+
+# 1. Guide de démarrage
+
+## 1. Présentation du tutoriel
+
+Construisons un site web complet à partir de zéro en utilisant un Agent de design AI et un Agent de codage.
+
+- **Agent de design** : responsable de la création du logo, de la mise en page des pages, du schéma de couleurs et d'autres éléments visuels
+- **Agent de codage** : écrit le code réel (HTML/CSS/JS etc.) en fonction des besoins et de la mise en page que vous spécifiez dans vos prompts, pour construire un site web fonctionnel
+
+## 2. Agent de design et Agent de codage
+
+- **Agent de design** : une IA qui génère des images, des maquettes ou des styles de design en fonction des prompts que vous fournissez.
+- Mastergo
+- Lovart
+- Figma MCP
+- **Agent de codage** : une IA qui écrit du code réel (HTML/CSS/JS etc.) en fonction des fonctionnalités et de la mise en page que vous demandez dans vos prompts.
+- Z.AI
+- Trae
+- Cursor
+- Lovable
+
+---
+
+# 2. Créer un Logo avec l'Agent de design
+
+## 1. Éléments clés à considérer pour le design du Logo
+
+Le Logo est l'un des éléments clés qui déterminent la première impression de votre site web. Pour obtenir des résultats satisfaisants de l'Agent de design AI, vous devez décrire clairement dans votre prompt le type de Logo que vous souhaitez.
+
+1. **Nom de marque / Texte**
+
+- Le texte qui doit apparaître dans le Logo (par exemple : titre du site, nom de marque, etc.).
+
+2. **Style (humeur / atmosphère)**
+
+- Le sentiment ou l'ambiance globale que le Logo doit transmettre.
+- _Exemples : minimaliste, mignon, épuré, moderne, vintage, futuriste, etc._
+
+3. **Schéma de couleurs** (optionnel)
+
+- Il est préférable que les couleurs du Logo correspondent au ton général du site web.
+- Vous pouvez spécifier des codes hexadécimaux précis ou des tons généraux (froids, chauds, etc.).
+- _Exemples : **`#171721`** (noir), **`#FF7130`** (orange)._
+
+4. **Forme (structure / composition)**
+
+- Précisez si le Logo nécessite une forme ou une composition spécifique.
+- _Exemples : texte à l'intérieur d'un cercle, combinaison icône + texte, Logo principalement basé sur une icône, etc._
+
+5. **Éléments d'icône / symbole** (optionnel)
+
+- Les graphiques ou symboles que vous souhaitez voir apparaître dans le Logo.
+- _Exemples : icône de livre, symbole d'éclair, graphique lié à l'IA, forme géométrique abstraite, etc._
+
+## 2. Rédiger le prompt de design du Logo
+
+**Exemple de prompt**
+
+```
+"Merci de concevoir un Logo au style minimaliste, le nom de marque est 'My First Website'.
+Utilise le noir (#171721) et l'orange (#FF7130), et place le texte à l'intérieur d'un cercle."
+```
+
+```
+"Merci de concevoir un Logo avec 'AIID' comme nom de marque.
+Le style global doit être futuriste, propre et épuré, avec le bleu et le blanc comme couleurs principales.
+Combine un graphique abstrait symbolisant l'IA avec le texte, et exporte en PNG avec fond transparent."
+```
+
+## 3. Demander le design à l'Agent
+
+- Saisissez le prompt ci-dessus -> comparez les plusieurs propositions de design générées par l'Agent.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. Finaliser le Logo
+
+- Choisissez la version que vous préférez parmi les brouillons et téléchargez-la.
+
+---
+
+# 3. Planifier la structure de votre site web
+
+## 1. Comprendre les sections de base
+
+Avant de vraiment commencer à construire le site web, il est important de planifier les menus (sections) à inclure. Le design des menus dépend de ce que vous voulez que les visiteurs voient et des actions que vous attendez d'eux.
+En général, un site web se compose généralement de sections de base comme **Home / About / Contact**.
+
+## 2. Dessinez d'abord un croquis de structure (optionnel)
+
+Vous pouvez d'abord écrire une structure de menu simple en fonction des objectifs du site.
+
+### Menu de base
+
+1. **Home**
+   1. La page principale que les visiteurs voient en premier en arrivant sur le site
+   2. Comprend généralement le Logo, une zone visuelle principale et un slogan ou une brève présentation
+2. **About**
+   1. Présente qui vous êtes, ou le but du projet / service
+   2. Portfolio personnel : présentation + bref CV
+   3. Site de services : vision, objectifs et fonctionnalités clés
+3. **Contact**
+   1. Coordonnées, comme email, numéro de téléphone, liens vers les réseaux sociaux, etc.
+   2. Vous pouvez aussi ajouter un simple formulaire de contact
+
+### Menus optionnels
+
+4. **Services / Projects**
+   1. Présente les services que vous offrez, ou vos projets / portfolio
+   2. Généralement affiché sous forme de liste ou de cartes
+
+5. **Gallery**
+   1. Pour afficher des images, photos ou créations graphiques
+
+6. **Blog / News**
+   1. Pour publier des articles, des actualités ou un journal
+
+7. **FAQ**
+   1. Compile les questions fréquemment posées par les visiteurs et leurs réponses
+
+## 3. Choisir un schéma de couleurs (optionnel)
+
+Si vous avez déjà un Logo, ou si vous voulez utiliser une combinaison de couleurs spécifique pour le site, vous pouvez directement inclure les codes couleur dans votre prompt.
+
+**Exemple :** `#171721, #872B97, #FF7130, #FF3C68`
+
+Même si vous n'avez pas encore de schéma de couleurs en tête, vous pouvez trouver de l'inspiration sur des sites spécialisés ou en cherchant par mots-clés.
+
+- **Sites de référence pour les couleurs**
+  - https://colorhunt.co/
+  - https://coolors.co/
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+- **Recherche de couleurs par mots-clés sur Google**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. Rédiger le prompt de design du site web
+
+**Exemple de prompt**
+
+```
+"Merci de concevoir un site web monopage composé des sections Home, About et Contact.
+Utilise les couleurs #171721, #FF7130 et #FF3C68.
+Le style global doit être moderne et épuré."
+```
+
+---
+
+# 4. Concevoir le site web avec l'Agent de design
+
+## 1. Saisir le prompt -> générer la maquette
+
+- Écrivez dans le prompt la structure planifiée et les couleurs choisies.
+
+**Exemple de prompt Mastergo**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+## 2. Réviser la maquette et faire des retours
+
+Vous pouvez faire des retours à l'Agent en fonction de vos besoins, par exemple :
+
+- « C'est trop chargé, rends le style global plus épuré. »
+- « Change la police. »
+- « Ajuste la combinaison de couleurs. »
+- « Supprime cette section ici. »
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
+
+## 3. Finaliser le design
+
+Une fois que vous êtes satisfait de la maquette après plusieurs itérations, vous pouvez transformer ce design en code, pour que l'Agent de codage puisse le comprendre et continuer le travail.
+
+La méthode pour convertir le design en code varie selon les plateformes, mais se fait généralement en installant et utilisant certains plugins dans la plateforme de design.
+
+**Exemple Mastergo**
+
+1. Ouvrez le [site des plugins Mastergo](https://mastergo.com/community/plugin), cherchez **seal**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
+
+2. Retournez à la page de design, cliquez sur l'**icône carrée (plugin)**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
+
+3. Sélectionnez la zone de design que vous voulez convertir en code, cliquez sur le bouton **Generate** pour générer le code.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
+
+---
+
+# 5. Construire le site web avec l'Agent de codage
+
+## 1. Comprendre les concepts de base de HTML/CSS/JS
+
+Un site web est essentiellement composé de trois langages :
+
+- **HTML (HyperText Markup Language)** -> Structure (squelette)
+- **CSS (Cascading Style Sheets)** -> Style (apparence)
+- **JavaScript (JS)** -> Fonctionnalité (interaction)
+
+Ces trois éléments travaillent ensemble pour former la page web complète que nous voyons.
+
+1. **🏗️ HTML (structure)**
+
+- Définit « ce qui est affiché » dans la page
+- Utilisé pour placer du texte, des images, des boutons, des liens et autres éléments
+- Analogie : les **murs et la charpente** d'un bâtiment
+
+**Exemple**
+
+```html
+<h1>Hello!</h1>
+<p>This is my first website.</p>
+<a href="contact.html">Contact</a>
+```
+
+2. **🎨 CSS (style)**
+
+- Détermine « comment le contenu est affiché »
+- Contrôle la taille du texte, les couleurs, les espaces, les arrière-plans, la forme des boutons, etc.
+- Donne à HTML ses « vêtements » et son style visuel
+
+**Exemple**
+
+```css
+h1 {
+  color: #FF7130;   /* Text color */
+  font-size: 36px;  /* Font size */
+  text-align: center; /* Center alignment */
+}
+
+body {
+  background-color: #171721; /* Background color */
+  color: white; /* Default text color */
+}
+```
+
+3. **⚙️ JavaScript (JS) (fonctionnalité)**
+
+- Permet à la page web d'interagir avec l'utilisateur
+- Peut implémenter des clics de bouton, des menus déroulants, des carrousels d'images, des soumissions de formulaire et autres effets dynamiques
+- Si HTML/CSS sont le squelette et l'apparence statiques, alors JS est le **cerveau** qui donne vie à la page web
+
+**Exemple**
+
+```javascript
+function showAlert() {
+  alert("The button has been clicked!");
+}
+```
+
+```html
+<button onclick="showAlert()">Click me</button>
+```
+
+## 2. Laisser l'Agent de codage générer le code
+
+**Exemple de prompt**
+
+```
+"Merci d'écrire le HTML et CSS pour un site web monopage contenant les sections Home, About et Contact.
+Utilise les couleurs #171721, #FF7130, #FF3C68.
+Fond noir, texte blanc."
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
+
+## 3. Lancer le site web
+
+Une fois le code brouillon généré, l'Agent démarre généralement le projet automatiquement et affiche la page web générée.
+
+Si vous avez redémarré l'Agent, ou si la page web ne s'affiche pas, vous pouvez entrer un prompt comme :
+
+```
+"Please activate the project"
+```
+
+Pour que l'Agent redémarre le projet et ouvre la page de prévisualisation, afin que vous puissiez voir le résultat actuel.
+
+## 4. Faire des modifications simples
+
+Vous pouvez continuer à affiner le brouillon via le langage naturel, par exemple :
+
+- « Rends le bouton plus grand. »
+- « La police plus grasse. »
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
+
+## 5. Modifier le contenu textuel du site
+
+Le site web généré en première version par l'Agent contient généralement du texte de remplissage automatique. Pour le rendre plus adapté à votre cas réel, vous pouvez préparer le contenu réel à l'avance, puis demander à l'Agent de le remplacer.
+
+**Exemple d'application** : mise à jour de la page About du site AIID
+
+1. Écrivez d'abord le contenu que vous souhaitez afficher sur la page About. Pour faciliter la compréhension par l'Agent, vous pouvez enregistrer le contenu au format Markdown.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
+
+2. Ensuite, dites à l'Agent dans la conversation d'appliquer le contenu de ce fichier à la page spécifiée.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
+
+3. Consultez la version mise à jour après application du contenu.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
+
+## 6. Insérer des images
+
+Si vous souhaitez ajouter des images spécifiques (par exemple Logo, image de fond, etc.), vous pouvez d'abord uploader les images dans le dossier du projet, puis indiquer dans votre prompt où les utiliser dans la page.
+
+- **Exemple :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png)
+
+- **Résultat :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png)
+
+---
+
+# 6. Intégrer le design et le code
+
+## 1. Intégrer les fichiers de design avec le code du site web (optionnel)
+
+Une fois que vous avez téléchargé les fichiers de code depuis l'Agent de design, vous pouvez les déplacer dans le répertoire du projet actuel, puis demander à l'Agent de codage de fusionner le code de design avec le projet existant.
+
+- **Exemple :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png)
+
+- **Résultat :**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
+---
+title: 'Construire un site avec des agents design et code'
+description: 'De l idee a la mise en ligne : piloter un agent design pour le visuel puis un agent code pour produire un site fonctionnel, avec un workflow reutilisable.'
+---
diff --git a/docs/fr-fr/stage-1/appendix-b-common-errors/index.md b/docs/fr-fr/stage-1/appendix-b-common-errors/index.md
new file mode 100644
index 0000000..8064cb0
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-b-common-errors/index.md
@@ -0,0 +1,325 @@
+---
+title: "Que faire en cas d'erreur de code - Guide pratique pour poser des questions à l'IA"
+description: "Apprenez à poser efficacement des questions à l'IA pour résoudre les erreurs de développement, maîtrisez le processus standard de capture d'écran, de description et de localisation des problèmes, et faites de l'IA votre assistant de débogage."
+---
+
+<script setup>
+const duration = 'Environ <strong>30 minutes</strong>'
+</script>
+
+# Que faire en cas d'erreur de code
+
+## Introduction du chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Techniques de débogage', 'Collaboration IA', 'Résolution de problèmes', 'Outils de développement']" coreOutput="Un processus standardisé de résolution des erreurs" expectedOutput="Capable de résoudre 90 % des erreurs courantes de manière autonome">
+
+À l'ère de l'IA, la façon de résoudre les erreurs a changé.
+
+Vous n'avez pas besoin de mémoriser tous les types d'erreurs, de devenir un expert du débogage, ni même de comprendre ce que signifie l'erreur.
+
+<strong>Vous n'avez besoin d'apprendre qu'une seule chose : comment poser des questions à l'IA.</strong>
+
+Ce chapitre vous enseignera un processus de résolution <strong>du simple à l'avancé</strong> :
+
+1. <strong>Première étape : Poser directement la question</strong> : décrire le phénomène + capture d'écran, poser la question en une phrase
+2. <strong>Deuxième étape : Fournir des informations supplémentaires</strong> : si cela ne résout pas le problème, ouvrir F12 pour ajouter des informations clés
+
+En maîtrisant ce processus, <strong>vous pourrez résoudre 90 % des erreurs par vous-même</strong>.
+
+</ChapterIntroduction>
+
+::: info Remarque
+Toutes les méthodes de ce chapitre sont basées sur l'expérience réelle avec Cursor/Trae/Claude et d'autres IDE IA, et peuvent être directement appliquées au développement quotidien.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Poser directement', description: 'Décrire le phénomène + capture d\'écran' },
+      { title: 'Compléter les infos', description: 'Ouvrir F12 pour localiser le problème' },
+      { title: 'Résolution itérative', description: 'Jusqu\'à la résolution du problème' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Principe fondamental : Capturer l'écran et poser la question à l'IA
+
+::: warning Pourquoi ce chapitre est-il important ?
+
+Beaucoup de débutants, face à une erreur, réagissent ainsi :
+- Panique, et se mettent à modifier le code au hasard
+- Passent une demi-heure à chercher "comment résoudre l'erreur xxx"
+- Essayent de comprendre par eux-mêmes ce que signifie l'erreur
+- Font du debug seul jusqu'à minuit
+
+<strong>Tout cela est une perte de temps.</strong>
+
+À l'ère de l'IA, le débogage est devenu une tâche simple :
+
+```
+Voir l'erreur → Capturer l'écran → Poser la question à l'IA → Suivre les instructions de l'IA
+```
+
+Vous n'avez pas besoin de comprendre l'erreur, ni de savoir déboguer, ni même de savoir où se trouve le problème.
+
+<strong>Vous avez juste besoin d'apprendre comment poser la question.</strong>
+
+:::
+
+### 1.1 La façon la plus simple de poser une question
+
+Pas besoin de modèle complexe, choisissez parmi deux méthodes :
+
+**Méthode 1 : Décrire le phénomène**
+
+Format : ce que vous venez de faire, ce qui apparaît maintenant
+
+```
+Je viens de modifier le code de la page de connexion, maintenant la page est blanche, que faire ?
+```
+
+**Méthode 2 : Capture d'écran**
+
+Capturer directement la page actuelle ou le message d'erreur
+
+```
+[Capture d'écran]
+
+Comment résoudre cette erreur ?
+```
+
+**La meilleure méthode : Description + Capture d'écran**
+
+```
+Je viens de modifier le code de la page de connexion, maintenant la page est blanche.
+
+[Capture d'écran]
+
+Que faire ?
+```
+
+**Retenez : Décrivez clairement le contexte, ajoutez une capture d'écran, et l'IA pourra vous aider à résoudre le problème plus rapidement.**
+
+### 1.2 Comment bien expliquer le problème
+
+Beaucoup de débutants savent qu'il faut poser des questions, mais ne savent pas comment s'exprimer. En réalité, il suffit d'expliquer clairement trois choses :
+
+**1. Ce que vous venez de faire**
+
+```
+Je viens de cliquer sur le bouton Enregistrer
+Je viens de modifier le code de la page de connexion
+Je viens de rafraîchir la page
+```
+
+**2. Ce que vous voyez maintenant**
+
+```
+La page est vide maintenant
+Le bouton ne réagit pas au clic maintenant
+Un message d'erreur s'affiche maintenant
+```
+
+**3. Ce que vous voulez obtenir**
+
+```
+Je veux que les données soient enregistrées avec succès
+Je veux que la page s'affiche normalement
+Je veux qu'une alerte apparaisse après le clic sur le bouton
+```
+
+**Exemple complet :**
+
+```
+Je viens de cliquer sur le bouton Enregistrer, la page affiche maintenant l'erreur "Échec de l'enregistrement".
+
+[Capture d'écran]
+
+Je veux que les données du formulaire soient enregistrées avec succès dans la base de données, que faire ?
+```
+
+**Principes clés :**
+- Décrivez dans un langage simple, sans jargon technique
+- Suivez l'ordre chronologique : ce que vous avez fait d'abord, puis ce qui s'est passé
+- Exprimez vos attentes pour que l'IA sache ce que vous souhaitez
+
+## 2. Première étape : Décrire directement le phénomène
+
+Face à un problème, <strong>ne vous précipitez pas pour ouvrir F12</strong>. Décrivez d'abord le phénomène, capturez la page actuelle, et montrez-le à l'IA.
+
+Souvent, l'IA peut directement vous donner une solution rien qu'en voyant la capture d'écran.
+
+### 2.1 Comment décrire les phénomènes courants
+
+::: tip Décrivez simplement
+
+**Page blanche**
+```
+La page s'ouvre mais est vide, que faire ?
+
+[Capture d'écran]
+```
+
+**Le bouton ne réagit pas au clic**
+```
+Cliquer sur ce bouton ne produit aucun effet, pouvez-vous vérifier ?
+
+[Capture d'écran]
+```
+
+**Les données ne s'enregistrent pas**
+```
+J'ai cliqué sur Enregistrer, les données ne sont pas sauvegardées, que faire ?
+
+[Capture d'écran]
+```
+
+**L'affichage est incorrect**
+```
+Ce bouton est décalé, comment l'ajuster ?
+
+[Capture d'écran]
+```
+
+**Erreur d'API**
+```
+L'appel à l'API renvoie une erreur, pouvez-vous vérifier ?
+
+[Capture d'écran]
+```
+
+:::
+
+### 2.2 Si l'IA a résolu directement le problème
+
+Félicitations, le problème est résolu ! Suivez simplement les instructions de l'IA pour modifier.
+
+### 2.3 Si l'IA dit "besoin de plus d'informations"
+
+C'est le moment d'ouvrir F12 et de fournir des informations clés. Voyons comment.
+
+## 3. Deuxième étape : Fournir les informations clés
+
+Quand l'IA indique qu'elle a besoin de plus d'informations, selon le type de problème, ouvrez F12 et capturez le contenu correspondant.
+
+### 3.1 Quand faut-il fournir des informations supplémentaires ?
+
+L'IA peut répondre ainsi :
+- "Veuillez ouvrir la Console pour voir s'il y a des erreurs"
+- "Capturer le panneau Network pour que je puisse voir"
+- "J'ai besoin de voir le message d'erreur spécifique"
+
+À ce moment, suivez les instructions ci-dessous pour fournir des captures d'écran.
+
+### 3.2 Fournir les informations de la Console (page blanche/erreur)
+
+::: tip Étapes à suivre
+
+**Première étape : Appuyer sur F12 pour ouvrir les outils de développement**
+
+Sur Mac, c'est `Cmd+Option+I`, ou faites un clic droit sur la page et sélectionnez "Inspecter".
+
+**Deuxième étape : Basculer vers l'onglet Console**
+
+**Troisième étape : Capturer les messages d'erreur en rouge**
+
+**Quatrième étape : Envoyer à l'IA**
+
+```
+L'erreur de la Console est la suivante :
+
+[Capture d'écran]
+```
+
+:::
+
+### 3.3 Fournir les informations Network (problème de données/erreur API)
+
+::: tip Étapes à suivre
+
+**Première étape : Appuyer sur F12 pour ouvrir les outils de développement**
+
+**Deuxième étape : Basculer vers l'onglet Network**
+
+**Troisième étape : Recommencer l'opération** (cliquer sur Enregistrer/rafraîchir la page)
+
+**Quatrième étape : Trouver la requête correspondante et capturer l'écran**
+
+- Regarder l'URL et le code d'état
+- Regarder le Payload (paramètres envoyés)
+- Regarder la Response (résultat retourné)
+
+**Cinquième étape : Envoyer à l'IA**
+
+```
+Les informations Network sont les suivantes :
+
+Requête : [Capture d'écran 1]
+Paramètres : [Capture d'écran 2]
+Réponse : [Capture d'écran 3]
+```
+
+:::
+
+### 3.4 Fournir les informations Elements (problème de style)
+
+::: tip Étapes à suivre
+
+**Première étape : Clic droit sur l'élément → "Inspecter"**
+
+Les outils de développement se positionneront automatiquement sur cet élément.
+
+**Deuxième étape : Capturer le panneau Styles**
+
+**Troisième étape : Envoyer à l'IA**
+
+```
+Le style de l'élément est le suivant :
+
+[Capture d'écran]
+```
+
+:::
+
+## 4. Troisième étape : Itérer jusqu'à la résolution
+
+### 4.1 Les pratiques inefficaces
+
+Ces pratiques vous font perdre du temps :
+
+Voir une erreur et paniquer, se mettre à modifier le code au hasard
+Passer une demi-heure à chercher une solution en ligne
+Essayer de comprendre chaque erreur par soi-même
+Faire du debug seul jusqu'à minuit
+
+### 4.2 Les pratiques efficaces
+
+Suivez ce processus :
+
+D'abord, décrire directement le phénomène et capturer l'écran pour poser la question
+Quand l'IA dit qu'elle a besoin de plus d'informations, ouvrir F12 pour compléter
+Suivre les suggestions pour modifier le code
+Après modification, tester, et si le problème persiste, continuer à capturer et poser la question
+
+## 5. Résumé : Processus complet
+
+```
+Rencontrer un problème
+    ↓
+Décrire directement le phénomène + capture d'écran
+    ↓
+Envoyer à l'IA : "Que faire ?"
+    ↓
+L'IA résout directement ?
+    ↓ Oui
+Suivre les instructions de l'IA
+    ↓
+Tester si le problème est résolu
+    ↓
+    ↓ Non / L'IA a besoin de plus d'informations
+Ouvrir F12, fournir les informations clés
+    ↓
+Renvoyer à l'IA
+    ↓
+Répéter jusqu'à résolution
+```
diff --git a/docs/fr-fr/stage-1/appendix-c-consumer-scenarios/images b/docs/fr-fr/stage-1/appendix-c-consumer-scenarios/images
new file mode 120000
index 0000000..11d711b
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-c-consumer-scenarios/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/appendix-c-consumer-scenarios/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/appendix-c-consumer-scenarios/index.md b/docs/fr-fr/stage-1/appendix-c-consumer-scenarios/index.md
new file mode 100644
index 0000000..43f0b5a
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-c-consumer-scenarios/index.md
@@ -0,0 +1,642 @@
+---
+title: "Inspiration pour scénarios de consommation B2C"
+description: "Ce document recense les directions créatives d'application des grands modèles LLM dans les scénarios de consommation B2C, couvrant des domaines tels que le style de vie, l'accompagnement émotionnel, les loisirs, le développement personnel, les interactions sociales, etc., afin de servir de référence aux développeurs d'applications IA grand public."
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'Environ <strong>4 heures</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// Pool de thèmes pour chaque scénario - accent sur les sensations, l'ambiance, les suggestions psychologiques
+const topicPool = {
+  'lifestyle': [
+    { title: 'Assistant de réveil rituel matinal', desc: 'Générer un rituel matinal personnalisé selon la météo, l\'agenda et l\'humeur, pour bien commencer chaque journée' },
+    { title: 'Créateur d\'ambiance pour célibataires', desc: 'Concevoir des solutions d\'ambiance intérieure pour les personnes vivant seules : éclairage, musique, diffuseur d\'huiles essentielles' },
+    { title: 'Générateur de programme cocooning week-end', desc: 'Recommander la combinaison parfaite selon l\'humeur du moment : film + snacks + décoration d\'ambiance' },
+    { title: 'Radio apaisante du soir', desc: 'Générer des histoires douces, des guidages de méditation, une radio personnelle pour s\'endormir' },
+    { title: 'Chasseur d\'inspiration esthétique du quotidien', desc: 'Découvrir la beauté dans les petites choses du quotidien, générer des suggestions esthétiques et des guides rituels' }
+  ],
+  'emotion': [
+    { title: 'Confident nocturne', desc: 'Réceptacle émotionnel disponible 24h/24, accueillant sans jugement toutes les confidences' },
+    { title: 'Accompagnateur de guérison post-rupture', desc: 'Offrir une présence douce, des conseils de guérison et un exutoire émotionnel pendant les moments difficiles' },
+    { title: 'Coach de respiration anti-anxiété', desc: 'Percevoir l\'anxiété, guider des exercices de respiration et de méditation en pleine conscience' },
+    { title: 'Mentor de reconstruction de la confiance en soi', desc: 'Aider à reconstruire l\'estime de soi et le sentiment de valeur grâce à des dialogues positifs et des suggestions psychologiques' },
+    { title: 'Analyse intelligente du journal émotionnel', desc: 'Analyser le journal émotionnel, découvrir les schémas émotionnels, offrir des perspectives chaleureuses et des conseils' }
+  ],
+  'entertainment': [
+    { title: 'Maître du jeu immersif (murder mystery)', desc: 'Jouer le rôle du maître du jeu, créer une ambiance mystérieuse, faire avancer l\'intrigue' },
+    { title: 'NPC sensible dans un monde ouvert', desc: 'Des NPC avec une vraie personnalité, qui se souviennent de l\'histoire du joueur et créent des liens émotionnels authentiques' },
+    { title: 'Génération de contenu podcast personnalisé', desc: 'Générer un podcast exclusif selon les centres d\'intérêt, aussi naturel qu\'une conversation entre amis' },
+    { title: 'Équipe d\'ambiance pour concert virtuel', desc: 'Créer une atmosphère live pour les concerts en ligne : interactions en temps réel, soutien, rendu d\'ambiance' },
+    { title: 'Partenaire de co-création de fiction interactive', desc: 'Co-créer une histoire avec le lecteur, chaque choix influence la direction du monde narratif' }
+  ],
+  'growth': [
+    { title: 'Témoin de croissance personnelle', desc: 'Enregistrer les trajectoires de développement, offrir encouragements et rétrospectives aux moments clés' },
+    { title: 'Coach ludifié de formation d\'habitudes', desc: 'Transformer la formation d\'habitudes ennuyeuses en une aventure ludique' },
+    { title: 'Appariement de partenaires d\'apprentissage', desc: 'Trouver des partenaires d\'apprentissage partageant les mêmes centres d\'intérêt, s\'encourager mutuellement et partager les progrès' },
+    { title: 'Découvreur de petites joies quotidiennes', desc: 'Aider à découvrir les petites beautés de la vie, cultiver la gratitude et un état d\'esprit positif' },
+    { title: 'Simulateur d\'expériences de vie', desc: 'Simuler différents choix de vie, explorer les possibilités d\'une réalité parallèle' }
+  ],
+  'social': [
+    { title: 'Générateur de sujets brise-glace', desc: 'Fournir des sujets intéressants lors d\'événements sociaux, dissiper la gêne et rapprocher les gens' },
+    { title: 'Styliste d\'ambiance pour publications sociales', desc: 'Générer des textes élégants pour les réseaux sociaux à partir de photos et de l\'humeur' },
+    { title: 'Planificateur d\'ambiance pour rendez-vous', desc: 'Concevoir un plan d\'ambiance complet pour les rendez-vous : lieu, sujets de conversation et surprises' },
+    { title: 'Animateur de réunions à distance', desc: 'Animer les réunions en ligne, organiser des jeux et guider les interactions' },
+    { title: 'Assistant de gestion d\'énergie sociale', desc: 'Aider les introvertis à gérer leur énergie sociale et à trouver un rythme social confortable' }
+  ],
+  'creative': [
+    { title: 'Kit d\'urgence anti-panne d\'inspiration', desc: 'Fournir des étincelles d\'inspiration inattendues en cas de blocage créatif' },
+    { title: 'Guide d\'exploration du style personnel', desc: 'Aider à découvrir un style personnel unique, du vestimentaire à l\'expression' },
+    { title: 'Consultant esthétique pour journal et bulletins', desc: 'Fournir des suggestions esthétiques de mise en page, couleurs et contenu créatif' },
+    { title: 'Guide d\'ambiance photographique', desc: 'Fournir des conseils de photographie et de retouche selon le contexte et l\'ambiance souhaitée' },
+    { title: 'Adaptateur musique-humeur', desc: 'Recommander la combinaison musicale parfaite selon l\'humeur et le contexte du moment' }
+  ],
+  'travel': [
+    { title: 'Guide d\'exploration urbaine à pied', desc: 'Explorer la ville comme un local, découvrir des lieux cachés et authentiques' },
+    { title: 'Génération de journal de voyage émotionnel', desc: 'Transformer les photos et sentiments de voyage en un récit de voyage poétique et des souvenirs' },
+    { title: 'Compagnon pour voyageurs solitaires', desc: 'Offrir compagnie, conseils et sentiment de sécurité aux voyageurs solo' },
+    { title: 'Aperçu d\'ambiance de destination', desc: 'Vivre une expérience immersive de la destination avant le départ, se mettre dans l\'ambiance' },
+    { title: 'Guide d\'ambiance photographique de voyage', desc: 'Guider pour prendre des photos de voyage pleines d\'histoires selon le contexte et la lumière' }
+  ],
+  'health': [
+    { title: 'Réveilleur de motivation sportive', desc: 'Offrir juste ce qu\'il faut d\'encouragement et de motivation quand l\'envie de bouger n\'est pas là' },
+    { title: 'Cuisine inspiration alimentation saine', desc: 'Générer des recettes saines réconfortantes selon l\'humeur et les ingrédients disponibles' },
+    { title: 'Optimisateur d\'ambiance pour la qualité du sommeil', desc: 'Créer une ambiance de sommeil optimale de l\'environnement au psychologique' },
+    { title: 'Guide de perception corporelle', desc: 'Guider l\'attention sur les signaux du corps, établir la connexion corps-esprit' },
+    { title: 'Assistant rappel de self-care', desc: 'Rappeler de s\'arrêter dans l\'agitation et de prendre soin de soi' }
+  ],
+  'learning': [
+    { title: 'Guide ludifié d\'exploration des savoirs', desc: 'Transformer l\'apprentissage de connaissances ennuyeuses en une aventure d\'exploration amusante' },
+    { title: 'Partenaire de scénarios d\'apprentissage linguistique', desc: 'Jouer différents rôles, acquérir naturellement la langue dans des dialogues situationnels' },
+    { title: 'Assistant de satisfaction de la curiosité', desc: 'Répondre à toutes sortes d\'idées farfelues, satisfaire la curiosité pour le monde' },
+    { title: 'Stimulateur d\'inspiration pour notes de lecture', desc: 'Aider à organiser les réflexions de lecture, découvrir de nouveaux angles de pensée' },
+    { title: 'Créateur d\'ambiance pour le partage de connaissances', desc: 'Transformer les connaissances acquises en contenus de partage intéressants' }
+  ],
+  'relationship': [
+    { title: 'Coach de communication en couple', desc: 'Aider à exprimer les émotions difficiles à dire, améliorer les relations intimes' },
+    { title: 'Assistant rappel d\'attention familiale', desc: 'Rappeler de prendre soin de sa famille, fournir des suggestions d\'interactions chaleureuses' },
+    { title: 'Mainteneur d\'ambiance d\'amitié', desc: 'Aider à entretenir les amitiés à distance, créer des sujets de conversation communs' },
+    { title: 'Planificateur de déclarations et surprises', desc: 'Planifier des moments inoubliables et romantiques pour les personnes importantes' },
+    { title: 'Guide d\'apaisement des conflits', desc: 'Fournir des conseils et des formulations pour apaiser l\'ambiance lors de tensions relationnelles' }
+  ],
+  'pet': [
+    { title: 'Journal anthropomorphique de l\'animal', desc: 'Générer un journal du point de vue de l\'animal, enregistrer les moments chaleureux avec le maître' },
+    { title: 'Interprète du comportement animal', desc: 'Décoder le langage comportemental de l\'animal, approfondir le lien avec lui' },
+    { title: 'Planificateur de moments complicité animal', desc: 'Concevoir des activités créatives pour interagir avec l\'animal, renforcer la complicité' },
+    { title: 'Générateur d\'histoires souvenir animalières', desc: 'Transformer les photos et souvenirs de l\'animal en histoires chaleureuses' },
+    { title: 'Guide rassurant pour nouveaux maîtres', desc: 'Offrir une présence chaleureuse et des conseils aux nouveaux propriétaires d\'animaux' }
+  ],
+  'finance': [
+    { title: 'Assistant de conscience émotionnelle des dépenses', desc: 'Percevoir les émotions derrière les achats impulsifs, construire une vision saine de la consommation' },
+    { title: 'Motivation visuelle des objectifs d\'épargne', desc: 'Transformer les objectifs d\'épargne en progression visuelle de rêves' },
+    { title: 'Apprendre la gestion financière facilement', desc: 'Apprendre les connaissances financières de manière légère et amusante' },
+    { title: 'Apaisseur d\'anxiété financière', desc: 'Offrir soutien émotionnel et conseils pratiques face à la pression financière' },
+    { title: 'Jeu d\'expérience d\'investissement à petit montant', desc: 'Découvrir l\'investissement par le jeu, baisser la barrière d\'entrée' }
+  ],
+  'career': [
+    { title: 'Compagnon de doute professionnel', desc: 'Offrir écoute, exploration et suggestions d\'orientation pendant les périodes de doute professionnel' },
+    { title: 'Réveilleur de sentiment d\'accomplissement au travail', desc: 'Aider à découvrir la valeur et le sens dans le travail, raviver l\'enthousiasme' },
+    { title: 'Assistant d\'ambiance sociale au travail', desc: 'Fournir des sujets de conversation légers et des suggestions d\'interaction pour le networking professionnel' },
+    { title: 'Stimulateur d\'idées d\'activité secondaire', desc: 'Stimuler des idées créatives d\'activité parallèle selon les centres d\'intérêt et compétences' },
+    { title: 'Station-service de confiance avant entretien', desc: 'Offrir préparation psychologique et encouragement avant un entretien' }
+  ],
+  'home': [
+    { title: 'Designer d\'ambiance d\'espace intérieur', desc: 'Concevoir des solutions d\'ambiance intérieure selon l\'humeur et la saison' },
+    { title: 'Guide de transformation saisonnière du logement', desc: 'Changer la décoration intérieure au fil des saisons, garder un sentiment de fraîcheur' },
+    { title: 'Magie des petits espaces', desc: 'Créer une ambiance chaleureuse et confortable même dans les petits espaces' },
+    { title: 'Créateur de rituels du quotidien à la maison', desc: 'Créer des rituels pour les activités domestiques quotidiennes' },
+    { title: 'Compagnon psychologique du désencombrement', desc: 'Offrir soutien psychologique et conseils de décision lors du tri des affaires' }
+  ],
+  'food': [
+    { title: 'Cuisine réconfortante pour une personne', desc: 'Concevoir des solutions culinaires simples et réconfortantes pour les personnes vivant seules' },
+    { title: 'Design d\'ambiance de table de fête', desc: 'Concevoir une mise en table rituelle pour les occasions spéciales' },
+    { title: 'Adaptateur cuisine-humeur', desc: 'Recommander des aliments et recettes adaptés selon l\'humeur du moment' },
+    { title: 'Constructeur de confiance pour débutants en cuisine', desc: 'Offrir encouragements chaleureux et recettes simples aux cuisiniers débutants' },
+    { title: 'Guide d\'ambiance photographie culinaire', desc: 'Faire en sorte que même les plats maison rendent irrésistiblement bien en photo' }
+  ],
+  'fashion': [
+    { title: 'Mood board de tenue du jour', desc: 'Générer des inspirations de tenues selon la météo, l\'occasion et l\'humeur' },
+    { title: 'Styliste de garde-robe capsule', desc: 'Créer des combinaisons infinies avec un nombre limité de pièces' },
+    { title: 'Voyage d\'exploration du style personnel', desc: 'Aider à découvrir et construire un style personnel unique' },
+    { title: 'Créatif de relookage vestimentaire', desc: 'Offrir de nouvelles inspirations d\'association pour les vêtements existants' },
+    { title: 'Consultant look pour occasions spéciales', desc: 'Concevoir des tenues qui inspirent confiance pour les événements importants' }
+  ]
+}
+
+// Table de correspondance de recommandations prédéfinie - basée sur l'ambiance et les sensations
+const recommendationMap = {
+  // Point d'ambiance : Guérison
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Point d'ambiance : Croissance
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Point d'ambiance : Social
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // Point d'ambiance : Exploration
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Point d'ambiance : Quotidien
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'Guérison', value: 'healing', desc: 'Chaleur, apaisement, réconfort' },
+  { label: 'Croissance', value: 'growth', desc: 'Progrès, percée, transformation' },
+  { label: 'Social', value: 'social', desc: 'Connexion, partage, interaction' },
+  { label: 'Exploration', value: 'explore', desc: 'Curiosité, aventure, découverte' },
+  { label: 'Quotidien', value: 'daily', desc: 'Ordinaire, authentique, ici et maintenant' }
+]
+
+const feelingOptions = [
+  { label: 'Envie de se détendre', value: 'relax', desc: 'Relâcher la pression, se vider l\'esprit' },
+  { label: 'Chercher l\'inspiration', value: 'inspire', desc: 'Stimuler la créativité, trouver l\'élan' },
+  { label: 'Besoin de connexion', value: 'connect', desc: 'Se connecter aux autres, résonance émotionnelle' },
+  { label: 'S\'évader un moment', value: 'escape', desc: 'Échapper à la réalité, immersion totale' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'Style de vie', anchor: '#_1-style-de-vie' },
+  { key: 'emotion', name: 'Accompagnement émotionnel', anchor: '#_2-accompagnement-emotionnel' },
+  { key: 'entertainment', name: 'Divertissement et loisirs', anchor: '#_3-divertissement-et-loisirs' },
+  { key: 'growth', name: 'Développement personnel', anchor: '#_4-developpement-personnel' },
+  { key: 'social', name: 'Interactions sociales', anchor: '#_5-interactions-sociales' },
+  { key: 'creative', name: 'Expression créative', anchor: '#_6-expression-creative' },
+  { key: 'travel', name: 'Voyage et exploration', anchor: '#_7-voyage-et-exploration' },
+  { key: 'health', name: 'Santé physique et mentale', anchor: '#_8-sante-physique-et-mentale' },
+  { key: 'learning', name: 'Exploration des savoirs', anchor: '#_9-exploration-des-savoirs' },
+  { key: 'relationship', name: 'Entretien des relations', anchor: '#_10-entretien-des-relations' },
+  { key: 'pet', name: 'Compagnie animulaire', anchor: '#_11-compagnie-animulaire' },
+  { key: 'finance', name: 'Santé financière', anchor: '#_12-sante-financiere' },
+  { key: 'career', name: 'Développement professionnel', anchor: '#_13-developpement-professionnel' },
+  { key: 'home', name: 'Espace intérieur', anchor: '#_14-espace-interieur' },
+  { key: 'food', name: 'Gastronomie et cuisine', anchor: '#_15-gastronomie-et-cuisine' },
+  { key: 'fashion', name: 'Style vestimentaire', anchor: '#_16-style-vestimentaire' }
+]
+
+// Calculer les résultats de recommandation - tirer au hasard depuis le pool de thèmes
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // Tirer au hasard 1-2 thèmes de chaque scénario recommandé
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // Tirer au hasard 1-2 thèmes
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // Trier aléatoirement et limiter le nombre total
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Obtenir la description de la sélection actuelle
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // Retarder le défilement pour s'assurer que le DOM est mis à jour
+  setTimeout(() => {
+    // Essayer de trouver par ID (prend en charge plusieurs formats)
+    let element = document.querySelector(anchor)
+    
+    // Si non trouvé, essayer d'autres formats d'ID possibles
+    if (!element) {
+      // Essayer sans le préfixe underscore
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // Si toujours pas trouvé, chercher par texte de titre
+    if (!element) {
+      // Extraire le nom du scénario depuis l'ancre
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // Correspondance exacte ou partielle
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // Mettre en surbrillance le paragraphe cible
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# Inspiration pour scénarios de consommation B2C
+
+## Introduction du chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Applications B2C', 'Style de vie', 'Expérience émotionnelle', 'Création d\'ambiance']" coreOutput="Découvrir plus de 15 inspirations de scénarios de vie" expectedOutput="Trouver une direction de produit qui touche les utilisateurs">
+
+Ce document recense les <strong>directions d'application créatives des grands modèles LLM dans les scénarios de consommation B2C</strong>. Contrairement au B2B qui se concentre sur l'efficacité et les points de douleur, les produits B2C accordent davantage d'importance à la <strong>création de sensations, aux suggestions psychologiques et à l'ambiance</strong>, permettant aux utilisateurs de ressentir une résonance émotionnelle et une expérience agréable lors de l'utilisation.
+
+</ChapterIntroduction>
+
+## Sélection rapide d'ambiance de scénario
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Trouvez l'inspiration de scénario qui vous touche</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Choisissez l'ambiance souhaitée et votre sensation du moment, le système recommandera des directions de scénarios pertinentes. Cliquez sur un tag pour accéder au chapitre correspondant.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="Choisir le type d'ambiance" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="Choisir votre sensation" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      Scénarios recommandés pour vous : {{ currentSelection.vibe }} x {{ currentSelection.feeling }}
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      Rechoisir
+    </el-button>
+  </div>
+</el-card>
+
+---
+
+## 1. Style de vie
+
+> 💡 **Concept clé** : Donner un sens rituel au quotidien ordinaire, créer de la beauté dans les détails
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Assistant de réveil rituel matinal | Intégration de l'API météo, des données du calendrier, le LLM génère un programme matinal personnalisé ; couplé à un enceinte intelligente pour une musique sur mesure, éclairage intelligent avec réveil progressif |
+| 2 | Créateur d'ambiance pour célibataires | Connexion aux appareils domotiques (éclairage, enceinte, diffuseur), le LLM ajuste automatiquement les paramètres selon l'heure/l'humeur ; apprentissage continu des préférences utilisateur |
+| 3 | Générateur de programme cocooning week-end | Connexion aux API de plateformes de streaming pour les programmes, génération de combinaisons film + gastronomie + décoration basées sur les préférences historiques |
+| 4 | Radio apaisante du soir | Synthèse vocale TTS pour générer des histoires douces, algorithme de mixage de bruits blancs, volume décroissant intelligent ; ajustement du contenu selon les données de sommeil |
+| 5 | Chasseur d'inspiration esthétique du quotidien | Reconnaissance d'image analysant les photos d'environnement, le LLM génère des suggestions esthétiques ; recommandations de contenu style Pinterest/Xiaohongshu |
+
+---
+
+## 2. Accompagnement émotionnel
+
+> 💡 **Concept clé** : Accueil inconditionnel et présence, devenir un doux contenant pour les émotions
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Confident nocturne | Chiffrement de bout en bout garantissant la confidentialité, analyse émotionnelle par LLM, mémoire à long terme des histoires utilisateur, conversation multi-tours pour un accompagnement continu |
+| 2 | Accompagnateur de guérison post-rupture | Algorithme d'identification du stade émotionnel, soutien différencié par phase (expression -> libération -> reconstruction) ; base de connaissances psychologiques avec recherche RAG |
+| 3 | Coach de respiration anti-anxiété | Intégration de données de capteurs biométriques (fréquence cardiaque/respiration), monitoring en temps réel du niveau d'anxiété ; guidage vocal du rythme respiratoire, instructions de relaxation musculaire progressive |
+| 4 | Mentor de reconstruction de la confiance en soi | Cadre de dialogue de psychologie positive, enregistrement et retour des petites réussites ; techniques de restructuration cognitive pour changer les autodialogues négatifs |
+| 5 | Analyse intelligente du journal émotionnel | Modèle NLP de reconnaissance émotionnelle, analyse de séries temporelles pour découvrir les schémas émotionnels ; visualisation du spectre émotionnel, alertes prédictives |
+
+---
+
+## 3. Divertissement et loisirs
+
+> 💡 **Concept clé** : Créer des expériences immersives, faire du divertissement un refuge pour l'âme
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Maître du jeu immersif (murder mystery) | Le LLM génère en temps réel des branches narratives, synthèse vocale pour incarner les NPC, ajustement dynamique de la difficulté et du rythme selon les réactions ; rendu de scènes AR/VR |
+| 2 | NPC sensible dans un monde ouvert | Base de données de mémoire à long terme stockant l'historique des interactions, dialogues personnalisés générés par LLM ; calcul émotionnel pour des réactions émotionnelles authentiques des NPC |
+| 3 | Génération de contenu podcast personnalisé | Contenu exclusif basé sur le graphe d'intérêts, clonage vocal TTS de la voix préférée ; interaction en temps réel avec les questions des auditeurs |
+| 4 | Équipe d'ambiance pour concert virtuel | Rendu d'avatars, interactions de commentaires en temps réel, bâtons lumineux virtuels/accessoires de soutien ; audio spatial pour une sensation de live |
+| 5 | Partenaire de co-création de fiction interactive | Le LLM génère l'intrigue en temps réel, les choix utilisateur influencent le déroulement ; fins multiples, développement dynamique des relations entre personnages |
+
+---
+
+## 4. Développement personnel
+
+> 💡 **Concept clé** : La croissance n'est pas une ascèse, c'est un voyage fascinant de découverte de soi
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Témoin de croissance personnelle | Visualisation chronologique de la trajectoire de croissance, marquage automatique des jalons ; comparatifs « moi d'avant » vs « moi d'aujourd'hui » |
+| 2 | Coach ludifié de formation d'habitudes | Mécanismes de ludification (points d'expérience, niveaux, badges), classement social, rôle de coach IA (ex. « mentor de l'aventure ») |
+| 3 | Appariement de partenaires d'apprentissage | Algorithme de matching basé sur les intérêts et objectifs, communautés d'apprentissage, mécanisme de suivi mutuel |
+| 4 | Découvreur de petites joies quotidiennes | Reconnaissance d'image pour détecter les beaux moments, guidage de journal de gratitude, rétrospective hebdomadaire des moments agréables |
+| 5 | Simulateur d'expériences de vie | Simulation narrative multi-branches des conséquences de différents choix, comparaison de vies parallèles ; visualisation des conséquences des décisions |
+
+---
+
+## 5. Interactions sociales
+
+> 💡 **Concept clé** : Rendre les interactions sociales légères et naturelles, trouver un mode de connexion confortable
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Générateur de sujets brise-glace | Recommandation intelligente de sujets basée sur le contexte et les participants, analyse de conversation en temps réel pour suggestions de prolongation ; sauvetage des moments gênants |
+| 2 | Styliste d'ambiance pour publications sociales | Analyse du contenu image, génération de textes multi-styles (littéraire/humoristique/profond) ; recommandation intelligente d'emojis et de mise en forme |
+| 3 | Planificateur d'ambiance pour rendez-vous | Génération de plans de rendez-vous basés sur les intérêts communs, recommandations de restaurants/activités, suggestions de sujets de conversation ; rappels météo et trafic en temps réel |
+| 4 | Animateur de réunions à distance | Bibliothèque de jeux en ligne, générateur d'activités brise-glace, roue de sujets ; fonds virtuels et filtres pour renforcer l'ambiance |
+| 5 | Assistant de gestion d'énergie sociale | Évaluation de la dépense énergétique après les activités sociales, suggestions de récupération (activités en solitaire) ; planification intelligente du calendrier social |
+
+---
+
+## 6. Expression créative
+
+> 💡 **Concept clé** : Chacun a de la créativité, il suffit juste de l'éveiller
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Kit d'urgence anti-panne d'inspiration | Algorithme d'association trans-domaines, génération de stimuli aléatoires, bibliothèque de prompts créatifs ; outil de divergence d'idées en carte mentale |
+| 2 | Guide d'exploration du style personnel | Analyse d'image pour identifier le style existant, recommandation de tendances, essayage virtuel/makeup ; timeline d'évolution du style |
+| 3 | Consultant esthétique pour journal et bulletins | Recommandation de modèles de mise en page, génération de palettes de couleurs, suggestions d'éléments décoratifs ; reconnaissance d'écriture manuscrite et embellissement |
+| 4 | Guide d'ambiance photographique | Identification de scène et suggestions de composition, recommandation de filtres, ajustement intelligent des paramètres de retouche ; parcours d'apprentissage de la photographie |
+| 5 | Adaptateur musique-humeur | Algorithme d'analyse émotionnelle musicale, reconnaissance de l'humeur utilisateur, génération de playlists personnalisées ; histoires et contexte musical |
+
+---
+
+## 7. Voyage et exploration
+
+> 💡 **Concept clé** : Voyager, ce n'est pas seulement voir des paysages, c'est aussi ressentir des modes de vie différents
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Guide d'exploration urbaine à pied | Agrégation de contenus d'initiés locaux, recommandation de lieux insolites, navigation AR ; traduction et commentaire vocal en temps réel |
+| 2 | Génération de journal de voyage émotionnel | Tri et sélection automatiques des photos, génération de récits de voyage poétiques par LLM, timeline géolocalisée ; vidéo de voyage en un clic |
+| 3 | Compagnon pour voyageurs solitaires | Partage de localisation en temps réel et alertes de sécurité, contacts d'urgence locaux, guide vocal IA ; communauté de voyageurs solo |
+| 4 | Aperçu d'ambiance de destination | Aperçu VR/360°, simulation des sons et odeurs locaux, présentation du contexte culturel ; expérience de « test d'hébergement » virtuel |
+| 5 | Guide d'ambiance photographique de voyage | Rappel de l'heure dorée, lignes de composition, points de prise de vue typiques ; suggestions de style d'étalonnage en post-production |
+
+---
+
+## 8. Santé physique et mentale
+
+> 💡 **Concept clé** : La santé n'est pas un objectif, c'est un doux acte de self-care
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Réveilleur de motivation sportive | Recommandation intelligente du type d'exercice selon l'état utilisateur, options de micro-exercices (5 minutes), défis sportifs ludifiés ; check-in sportif social |
+| 2 | Cuisine inspiration alimentation saine | Identification des ingrédients du frigo, recommandation de recettes personnalisées, analyse nutritionnelle ; guide de cuisson étape par étape |
+| 3 | Optimisateur d'ambiance pour la qualité du sommeil | Analyse des données de monitoring du sommeil, génération de rituels du coucher, conseils d'optimisation de l'environnement (température/humidité/lumière) ; réveil intelligent |
+| 4 | Guide de perception corporelle | Guidage de méditation de scan corporel, associations émotionnelles des parties du corps, exercices de connexion corps-esprit ; biofeedback visualisé |
+| 5 | Assistant rappel de self-care | Monitoring de l'intensité de travail, rappels réguliers de pause, suggestions de micro-activités de soin (boire/s'étirer/respirer profondément) ; journal de self-care |
+
+---
+
+## 9. Exploration des savoirs
+
+> 💡 **Concept clé** : Apprendre est une aventure sans fin, la curiosité est le meilleur des professeurs
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Guide ludifié d'exploration des savoirs | Visualisation cartographique des connaissances, parcours d'apprentissage en mode « niveau », système de badges de réussite ; jeu de rôle de tuteur IA |
+| 2 | Partenaire de scénarios d'apprentissage linguistique | Le LLM joue différents rôles dans des dialogues, correction de prononciation, présentation du contexte culturel ; simulation immersive de scénarios |
+| 3 | Assistant de satisfaction de la curiosité | Connexion Wikipédia/graphes de connaissances, vulgarisation de concepts complexes, recommandation de savoirs connexes ; journal de curiosité |
+| 4 | Stimulateur d'inspiration pour notes de lecture | Analyse du contenu du livre, extraction et mise en relation d'idées, recommandation d'angles de réflexion ; modèles et embellissement de notes de lecture |
+| 5 | Créateur d'ambiance pour le partage de connaissances | Génération automatique de fiches de connaissances, optimisation des textes de partage, embellissement visuel ; retour sur les données de partage social |
+
+---
+
+## 10. Entretien des relations
+
+> 💡 **Concept clé** : Les bonnes relations demandent de l'attention, et l'attention n'a pas besoin d'être compliquée
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Coach de communication en couple | Génération de modèles d'expression émotionnelle, guidage en communication non violente, formulations de résolution de conflits ; évaluation de la santé relationnelle |
+| 2 | Assistant rappel d'attention familiale | Rappels des dates importantes (anniversaires/commémorations), suggestions de messages attentionnés, recommandations d'activités familiales ; album familial généré |
+| 3 | Mainteneur d'ambiance d'amitié | Historique des interactions entre amis, recommandation de sujets communs, organisation de réunions à distance ; timeline et souvenirs d'amitié |
+| 4 | Planificateur de déclarations et surprises | Génération de plans de surprises personnalisés, recommandation de cadeaux, suggestions de formulations romantiques ; planning d'exécution et rappels |
+| 5 | Guide d'apaisement des conflits | Formulations de désamorçage émotionnel, guidage de changement de perspective, suggestions d'étapes de réconciliation ; suivi de réparation relationnelle |
+
+---
+
+## 11. Compagnie animulaire
+
+> 💡 **Concept clé** : Les animaux de compagnie sont des membres de la famille, leur présence mérite d'être enregistrée et chérie
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Journal anthropomorphique de l'animal | Analyse du comportement animal, génération de journal à la première personne, illustration automatique des photos ; « fil social » de l'animal |
+| 2 | Interprète du comportement animal | Analyse vidéo du comportement animal, alertes sanitaires, conseils d'éducation ; base de connaissances des caractéristiques de race |
+| 3 | Planificateur de moments complicité animal | Recommandations d'activités avec l'animal, tutoriels de jouets DIY, lieux accueillants pour animaux ; matchmaking social animal |
+| 4 | Générateur d'histoires souvenir animalières | Sélection de photos et vidéos, génération d'histoires chronologiques, accompagnement musical ; album/vidéo souvenir auto-généré |
+| 5 | Guide rassurant pour nouveaux maîtres | Guide d'entretien par étapes, FAQ, gestion des urgences ; communauté de soutien pour débutants |
+
+---
+
+## 12. Santé financière
+
+> 💡 **Concept clé** : La liberté financière n'est pas l'objectif, la santé financière l'est
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Assistant de conscience émotionnelle des dépenses | Analyse des relevés de dépenses, corrélation émotions-dépenses, alertes anti-achats impulsifs ; suggestions de satisfactions alternatives |
+| 2 | Motivation visuelle des objectifs d'épargne | Visualisation de la progression vers l'objectif, rendu de scènes de rêve, célébration des jalons ; jeu de formation d'habitudes d'épargne |
+| 3 | Apprendre la gestion financière facilement | Envoi de connaissances fragmentées, enseignement par scénarios, quiz interactifs ; tests et certificats de connaissances |
+| 4 | Apaisseur d'anxiété financière | Évaluation de la santé financière, techniques de gestion du stress, plans d'action progressifs ; conseil psychologique financier |
+| 5 | Jeu d'expérience d'investissement à petit montant | Simulation d'investissement virtuel, éducation aux risques, jeu de portefeuille d'investissement ; guidage vers le micro-investissement réel |
+
+---
+
+## 13. Développement professionnel
+
+> 💡 **Concept clé** : La carrière n'est pas une voie ferrée, c'est un champ ouvert à explorer
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Compagnon de doute professionnel | Tests d'intérêts professionnels, inventaire des compétences, recommandation d'informations sectorielles ; dialogue avec un mentor de carrière |
+| 2 | Réveilleur de sentiment d'accomplissement au travail | Enregistrement des réalisations professionnelles, extraction de la valeur, visualisation des succès ; collecte de retours positifs collègues/clients |
+| 3 | Assistant d'ambiance sociale au travail | Recommandations de sujets professionnels, techniques de networking, événements sectoriels ; optimisation de contenu LinkedIn |
+| 4 | Stimulateur d'idées d'activité secondaire | Matching compétences-intérêts-demande du marché, bibliothèque de cas de side projects, guide de démarrage ; communauté d'échange |
+| 5 | Station-service de confiance avant entretien | Simulation d'entretien, préparation aux questions courantes, techniques de renforcement de la confiance ; conseils d'image |
+
+---
+
+## 14. Espace intérieur
+
+> 💡 **Concept clé** : La maison n'est pas seulement un lieu de résidence, c'est le refuge de l'âme
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Designer d'ambiance d'espace intérieur | Analyse de photos d'espace, recommandations de style, suggestions mobilier/décoration ; prévisualisation AR |
+| 2 | Guide de transformation saisonnière du logement | Thèmes saisonniers, suggestions de rangement et de mise en valeur, plans de décoration festive ; génération de liste de courses |
+| 3 | Magie des petits espaces | Algorithme d'optimisation spatiale, mobilier multifonction, techniques de rangement ; astuces d'agrandissement visuel |
+| 4 | Créateur de rituels du quotidien à la maison | Design de rituels quotidiens (matin/soir/week-end), rappels d'exécution ; retour sur les effets des rituels |
+| 5 | Compagnon psychologique du désencombrement | Évaluation de la valeur émotionnelle des objets, guidage étape par étape du tri, soutien psychologique ; recommandation de canaux de don/recyclage |
+
+---
+
+## 15. Gastronomie et cuisine
+
+> 💡 **Concept clé** : La nourriture est un langage d'amour, cuisiner est une façon d'exprimer l'amour
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Cuisine réconfortante pour une personne | Identification des ingrédients du frigo, recettes simples, guide étape par étape ; esthétique de dressage solo |
+| 2 | Design d'ambiance de table de fête | Menu thématique festif, plan de mise en table, techniques d'ambiance ; optimisation de l'expérience des convives |
+| 3 | Adaptateur cuisine-humeur | Algorithme d'association humeur-aliment, recettes de régulation émotionnelle, recommandations de comfort food ; guidage de guérison par la cuisine |
+| 4 | Constructeur de confiance pour débutants en cuisine | Recettes ultra-simples, astuces de sauvetage des ratés, formulations de renforcement de la confiance ; progression graduelle de difficulté |
+| 5 | Guide d'ambiance photographie culinaire | Suggestions de dressage, utilisation de la lumière naturelle, guidage des angles de prise de vue ; filtres et retouches recommandés |
+
+---
+
+## 16. Style vestimentaire
+
+> 💡 **Concept clé** : S'habiller, c'est s'exprimer ; le style est la manifestation extérieure de l'intérieur
+
+| N° | Nom du scénario | Fonctionnalité du scénario |
+| :--: | ------------ | ------------ |
+| 1 | Mood board de tenue du jour | Recommandation combinée météo/occasion/humeur, essayage virtuel, inspiration de looks ; gestion de garde-robe |
+| 2 | Styliste de garde-robe capsule | Inventaire de la garde-robe, combinaisons de pièces, programmes une pièce-multi looks ; conseils d'achat (combler les lacunes) |
+| 3 | Voyage d'exploration du style personnel | Test de style, recommandation d'icônes de référence, parcours d'évolution stylistique ; construction de la confiance |
+| 4 | Créatif de relookage vestimentaire | Inspirations de transformation de vêtements anciens, nouvelles associations, techniques d'accessoirisation ; mode durable |
+| 5 | Consultant look pour occasions spéciales | Décryptage du dress code, génération de plans de tenue, suggestions coiffure et maquillage ; coordination de l'ensemble |
+
+---
+
+## Principes fondamentaux pour la conception de produits B2C
+
+### 1. De la « fonctionnalité » au « ressenti »
+
+Les produits B2B se demandent « quel problème cette fonctionnalité résout-elle », les produits B2C se demandent « quel ressenti cette fonctionnalité procure-t-elle ».
+
+| Pensée B2B | Pensée B2C |
+|---------|---------|
+| Améliorer l'efficacité | Gagner du temps pour faire ce qu'on aime |
+| Réduire les coûts | Faire en sorte que chaque euro en vaille la peine |
+| Résoudre les points de douleur | Créer des expériences agréables |
+| Fonctionnalité complète | Le ressenti est au rendez-vous |
+
+### 2. Les trois niveaux de la création d'ambiance
+
+**Niveau sensoriel** : conception visuelle, auditive et tactile
+- Couleurs chaleureuses
+- Sons apaisants
+- Animations fluides
+
+**Niveau émotionnel** : résonance et guidage des émotions
+- Comprendre l'humeur de l'utilisateur
+- Offrir un soutien émotionnel
+- Créer des émotions positives
+
+**Niveau de sens** : adhésion aux valeurs et sentiment d'appartenance
+- Faire sentir à l'utilisateur qu'il est compris
+- Créer un sentiment d'appartenance
+- Donner du sens aux actions
+
+### 3. La puissance de la suggestion psychologique
+
+Le texte et le design des produits B2C transmettent tous des suggestions psychologiques :
+
+- **Suggestions positives** : « Tu fais déjà du bon travail », « Prends ton temps, ce n'est pas grave »
+- **Suggestions d'appartenance** : « Beaucoup de gens sont comme toi », « Tu n'es pas seul(e) »
+- **Suggestions de croissance** : « Chaque essai est un progrès », « Tu deviens meilleur(e) »
+
+### 4. Permettre aux utilisateurs de devenir la meilleure version d'eux-mêmes
+
+Le meilleur produit B2C ne change pas l'utilisateur, il l'aide à devenir la personne qu'il souhaite être.
+
+- Pas « tu devrais... », mais « tu peux... »
+- Pas « tu dois... », mais « si tu le souhaites... »
+- Pas « tu n'es pas encore assez... », mais « tu es déjà... »
+
+---
+
+> 🌟 **Rappelez-vous** : les utilisateurs B2C n'achètent pas des fonctionnalités, ils achètent des sensations ; pas des outils, mais de la compagnie ; pas des services, mais de la compréhension.
diff --git a/docs/fr-fr/stage-1/appendix-consumer-scenarios/images b/docs/fr-fr/stage-1/appendix-consumer-scenarios/images
new file mode 120000
index 0000000..d30bd6b
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-consumer-scenarios/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/appendix-consumer-scenarios/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/appendix-consumer-scenarios/index.md b/docs/fr-fr/stage-1/appendix-consumer-scenarios/index.md
new file mode 100644
index 0000000..86c40af
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-consumer-scenarios/index.md
@@ -0,0 +1,1340 @@
+---
+title: "Références d'inspiration pour les scénarios grand public"
+description: "Ce document rassemble les directions d'application créative des grands modèles de langage (LLM) dans les scénarios de consommation grand public, couvrant les domaines du mode de vie, de la compagnie émotionnelle, du divertissement, de la croissance personnelle, des interactions sociales, etc., pour offrir des références créatives aux développeurs d'applications IA."
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'environ <strong>4 heures</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// Thème pool pour chaque scénario - accent sur les sensations, l'atmosphère et les suggestions psychologiques
+const topicPool = {
+  'lifestyle': [
+    { title: 'Assistant de rituel matinal', desc: 'Génère un rituel matinal personnalisé selon la météo, l\'emploi du temps et l\'humeur' },
+    { title: 'Créateur d\'atmosphère pour célibataires', desc: 'Conçoit des ambiances domestiques : éclairage, musique et senteurs en harmonie' },
+    { title: 'Générateur de week-end cocooning', desc: 'Recommande la combinaison parfaite : film + encas + décoration pour un week-end à la maison' },
+    { title: 'Radio apaisante du soir', desc: 'Génère des histoires douces et des méditations guidées pour s\'endormir paisiblement' },
+    { title: 'Chasseur d\'inspiration esthétique', desc: 'Découvre la beauté dans les petites choses du quotidien' }
+  ],
+  'emotion': [
+    { title: 'Confident nocturne', desc: 'Écouteur émotionnel 24h/24, accueille toutes vos pensées sans jugement' },
+    { title: 'Compagnon de guérison après rupture', desc: 'Accompagnement bienveillant pendant les moments difficiles avec des conseils de guérison' },
+    { title: 'Coach de respiration anti-stress', desc: 'Détecte l\'anxiété et guide des exercices de respiration et de pleine conscience' },
+    { title: 'Guide de reconstruction de confiance', desc: 'Aide à retrouver l\'estime de soi par des dialogues positifs et des suggestions psychologiques' },
+    { title: 'Analyseur intelligent de journal émotionnel', desc: 'Analyse votre journal, identifie les schémas émotionnels et offre des insights chaleureux' }
+  ],
+  'entertainment': [
+    { title: 'Maître du jeu de meurtre mystérieux', desc: 'Joue le rôle de l\'animateur, crée une ambiance de mystère et fait avancer l\'intrigue' },
+    { title: 'NPC vivant en monde ouvert', desc: 'Des NPC mémorables qui se souviennent de votre histoire et créent de véritables liens' },
+    { title: 'Générateur de podcast personnalisé', desc: 'Crée un podcast sur mesure, comme une conversation naturelle entre amis' },
+    { title: 'Groupe d\'ambiance de concert virtuel', desc: 'Recrée l\'ambiance d\'un concert en direct avec interactions en temps réel' },
+    { title: 'Partenaire de fiction interactive', desc: 'Co-crée des histoires où chaque choix influence le cours du récit' }
+  ],
+  'growth': [
+    { title: 'Témoin de votre croissance', desc: 'Enregistre votre parcours et encourage aux moments importants' },
+    { title: 'Coach ludique d\'habitudes', desc: 'Transforme la prise d\'habitudes en une aventure de jeu captivante' },
+    { title: 'Matching de partenaires d\'apprentissage', desc: 'Trouve des partenaires motivés pour apprendre ensemble et partager les progrès' },
+    { title: 'Chasseur de petits bonheurs quotidiens', desc: 'Aide à découvrir les petites joies de la vie et cultive la gratitude' },
+    { title: 'Simulateur de vie', desc: 'Simule différents choix de vie pour explorer les possibilités parallèles' }
+  ],
+  'social': [
+    { title: 'Générateur de sujets de brise-glace', desc: 'Propose des sujets intéressants pour briser la glace en toute occasion' },
+    { title: 'Styliste de publications sociales', desc: 'Génère des textes élégants pour vos publications selon vos photos et votre humeur' },
+    { title: 'Planificateur de rendez-vous romantiques', desc: 'Conçoit une expérience complète : lieu, sujets de conversation et surprises' },
+    { title: 'Animateur de réunions à distance', desc: 'Animer les rencontres en ligne avec des jeux et des interactions' },
+    { title: 'Gestionnaire d\'énergie sociale', desc: 'Aide les introvertis à gérer leur énergie sociale et trouver leur rythme' }
+  ],
+  'creative': [
+    { title: 'Kit d\'urgence pour panne d\'inspiration', desc: 'Offre des étincelles d\'inspiration inattendues quand le blocage créeatif frappe' },
+    { title: 'Guide d\'exploration du style personnel', desc: 'Aide à découvrir votre style unique, de la tenue à l\'expression' },
+    { title: 'Consultant esthétique pour bullet journals', desc: 'Conseille la mise en page, les couleurs et les idées créatives de vos carnets' },
+    { title: 'Guide de composition photographique', desc: 'Propose des conseils de photo et de retouche selon l\'ambiance souhaitée' },
+    { title: 'Sélecteur musical selon l\'humeur', desc: 'Recommande la combinaison musicale parfaite selon votre état d\'esprit' }
+  ],
+  'travel': [
+    { title: 'Guide de flânerie urbaine', desc: 'Explorez la ville comme un local et découvrez des pépites cachées' },
+    { title: 'Générateur de journal de voyage', desc: 'Transforme vos photos et émotions en récits de voyage poétiques' },
+    { title: 'Compagnon de voyage en solo', desc: 'Accompagne et rassure les voyageurs solitaires tout au long du parcours' },
+    { title: 'Aperçu d\'ambiance de destination', desc: 'Immersion dans l\'ambiance de votre destination avant le départ' },
+    { title: 'Guide photographique de voyage', desc: 'Aide à capturer des photos pleines de sens et d\'émotions' }
+  ],
+  'health': [
+    { title: 'Éveilleur de motivation sportive', desc: 'L\'encouragement juste au bon moment quand vous n\'avez pas envie de bouger' },
+    { title: 'Cuisine inspirante santé', desc: 'Génère des recettes saines et réconfortantes selon l\'humeur et les ingrédients' },
+    { title: 'Optimiseur de sommeil', desc: 'Crée une ambiance propice au sommeil, de l\'environnement au mental' },
+    { title: 'Guide de conscience corporelle', desc: 'Guide l\'attention vers les signaux du corps pour renforcer la connexion corps-esprit' },
+    { title: 'Rappel de bienveillance envers soi', desc: 'Vous rappelle de faire une pause et de prendre soin de vous' }
+  ],
+  'learning': [
+    { title: 'Guide ludique d\'exploration du savoir', desc: 'Transforme l\'apprentissage en aventure passionnante' },
+    { title: 'Partenaire de langue par scénarios', desc: 'Joue différents rôles pour apprendre une langue naturellement en situation' },
+    { title: 'Satisfaisant de curiosité', desc: 'Répond à toutes vos questions farfelues et nourrit votre soif de découverte' },
+    { title: 'Inspiration de notes de lecture', desc: 'Aide à organiser vos réflexions et à découvrir de nouvelles perspectives' },
+    { title: 'Créateur d\'ambiance pour partage de connaissances', desc: 'Transforme vos apprentissages en contenus de partage captivants' }
+  ],
+  'relationship': [
+    { title: 'Coach de communication intime', desc: 'Aide à exprimer les sentiments difficiles et améliore les relations proches' },
+    { title: 'Rappel de attention familiale', desc: 'Vous rappelle de prendre soin de votre famille avec des suggestions d\'interactions' },
+    { title: 'Entreteneur d\'amitiés', desc: 'Aide à maintenir les amitiés à distance en créant des sujets communs' },
+    { title: 'Planificateur de déclarations et surprises', desc: 'Organise des moments inoubliables pour vos proches' },
+    { title: 'Médiateur de conflits', desc: 'Propose des conseils et des formulations pour apaiser les tensions relationnelles' }
+  ],
+  'pet': [
+    { title: 'Journal de vie de votre animal', desc: 'Rédige un journal du point de vue de votre animal compagnon' },
+    { title: 'Interprète du comportement animal', desc: 'Décrypte le langage corporel de votre animal pour renforcer votre lien' },
+    { title: 'Planificateur d\'activités avec votre animal', desc: 'Conçoit des activités créatives pour partager des moments complices' },
+    { title: 'Générateur d\'histoires commémoratives', desc: 'Transforme les photos et souvenirs de votre animal en récits touchants' },
+    { title: 'Guide rassurant pour nouveaux maîtres', desc: 'Accompagne avec bienveillance les nouveaux propriétaires d\'animaux' }
+  ],
+  'finance': [
+    { title: 'Sensible aux émotions d\'achat', desc: 'Identifie les émotions derrière les achats impulsifs pour une consommation saine' },
+    { title: 'Visualisation d\'objectifs d\'épargne', desc: 'Transforme vos objectifs d\'épargne en une barre de progression motivante' },
+    { title: 'Apprentissage ludique de la finance', desc: 'Apprenez les bases de la gestion financière de manière amusante' },
+    { title: 'Apaiseur d\'anxiété financière', desc: 'Offre un soutien émotionnel et des conseils pratiques face au stress financier' },
+    { title: 'Jeu d\'initiation aux petits investissements', desc: 'Découvrez l\'investissement par le jeu dans un environnement sûr' }
+  ],
+  'career': [
+    { title: 'Compagnon dans le doute professionnel', desc: 'Écoute, explore et oriente lors des périodes de remise en question' },
+    { title: 'Réveilleur de sens au travail', desc: 'Aide à retrouver la valeur et la signification de votre travail' },
+    { title: 'Facilitateur de relations professionnelles', desc: 'Propose des sujets légers et des conseils d\'interaction pour le milieu professionnel' },
+    { title: 'Stimulateur d\'idées de projets secondaires', desc: 'Déclenche des idées de projets parallèles selon vos intérêts et compétences' },
+    { title: 'Boosteur de confiance avant entretien', desc: 'Prépare mentalement et renforce la confiance avant les entretiens d\'embauche' }
+  ],
+  'home': [
+    { title: 'Designer d\'atmosphère domestique', desc: 'Conçoit des ambiances selon l\'humeur et la saison' },
+    { title: 'Guide de décoration saisonnière', desc: 'Renouvelez votre intérieur au fil des saisons pour garder un sentiment de fraîcheur' },
+    { title: 'Magicien des petits espaces', desc: 'Transformez les petits espaces en lieux chaleureux et confortables' },
+    { title: 'Créateur de rituels domestiques', desc: 'Donnez un sens aux activités quotidiennes à la maison' },
+    { title: 'Accompagnateur de tri minimaliste', desc: 'Soutien psychologique et aide à la décision lors du rangement' }
+  ],
+  'food': [
+    { title: 'Cuisine réconfortante pour solo', desc: 'Conçoit des recettes simples et réconfortantes pour les personnes vivant seules' },
+    { title: 'Décorateur de table festive', desc: 'Crée des mises en table élégantes pour les occasions spéciales' },
+    { title: 'Sélecteur culinaire selon l\'humeur', desc: 'Recommande des recettes adaptées à votre état d\'esprit du moment' },
+    { title: 'Constructeur de confiance en cuisine', desc: 'Encourage les débutants avec des recettes simples et un soutien chaleureux' },
+    { title: 'Guide de photographie culinaire', desc: 'Donnez à vos plats maison une allure irrésistible en photo' }
+  ],
+  'fashion': [
+    { title: 'Tableau d\'inspiration quotidien', desc: 'Génère des idées de tenues selon la météo, l\'occasion et l\'humeur' },
+    { title: 'Styliste de garde-robe capsule', desc: 'Créez des combinaisons infinies avec un nombre limité de pièces' },
+    { title: 'Voyage d\'exploration du style personnel', desc: 'Aide à découvrir et construire votre style vestimentaire unique' },
+    { title: 'Rénovateur de vieux vêtements', desc: 'Donne une nouvelle vie à vos anciens vêtements avec des idées de mix & match' },
+    { title: 'Consultant en style pour grandes occasions', desc: 'Conçoit des looks confiants pour vos moments importants' }
+  ]
+}
+
+// Table de correspondance des recommandations - basée sur l'ambiance et les sensations
+const recommendationMap = {
+  // Ambiance : bienveillante
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiance : croissance
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiance : sociale
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // Ambiance : exploration
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Ambiance : quotidien
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'Bienveillante', value: 'healing', desc: 'Chaleur, réconfort, guérison' },
+  { label: 'Croissance', value: 'growth', desc: 'Progrès, dépassement, transformation' },
+  { label: 'Sociale', value: 'social', desc: 'Connexion, partage, interaction' },
+  { label: 'Exploration', value: 'explore', desc: 'Curiosité, aventure, découverte' },
+  { label: 'Quotidien', value: 'daily', desc: 'Simple, authentique, dans l\'instant' }
+]
+
+const feelingOptions = [
+  { label: 'Se détendre', value: 'relax', desc: 'Relâcher la pression, se vider l\'esprit' },
+  { label: 'Chercher l\'inspiration', value: 'inspire', desc: 'Stimuler la créativité, trouver des idées' },
+  { label: 'Se connecter', value: 'connect', desc: 'Rencontrer, partager des émotions' },
+  { label: 'S\'évader', value: 'escape', desc: 'Fuir la routine, vivre une expérience immersive' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'Mode de vie', anchor: '#_1-mode-de-vie' },
+  { key: 'emotion', name: 'Compagnie émotionnelle', anchor: '#_2-compagnie-émotionnelle' },
+  { key: 'entertainment', name: 'Divertissement', anchor: '#_3-divertissement' },
+  { key: 'growth', name: 'Croissance personnelle', anchor: '#_4-croissance-personnelle' },
+  { key: 'social', name: 'Interactions sociales', anchor: '#_5-interactions-sociales' },
+  { key: 'creative', name: 'Expression créative', anchor: '#_6-expression-créative' },
+  { key: 'travel', name: 'Voyage et exploration', anchor: '#_7-voyage-et-exploration' },
+  { key: 'health', name: 'Santé physique et mentale', anchor: '#_8-santé-physique-et-mentale' },
+  { key: 'learning', name: 'Exploration du savoir', anchor: '#_9-exploration-du-savoir' },
+  { key: 'relationship', name: 'Relations humaines', anchor: '#_10-relations-humaines' },
+  { key: 'pet', name: 'Animaux de compagnie', anchor: '#_11-animaux-de-compagnie' },
+  { key: 'finance', name: 'Santé financière', anchor: '#_12-santé-financière' },
+  { key: 'career', name: 'Développement professionnel', anchor: '#_13-développement-professionnel' },
+  { key: 'home', name: 'Espace domestique', anchor: '#_14-espace-domestique' },
+  { key: 'food', name: 'Gastronomie', anchor: '#_15-gastronomie' },
+  { key: 'fashion', name: 'Style vestimentaire', anchor: '#_16-style-vestimentaire' }
+]
+
+// Calcul des recommandations - tirage aléatoire du thème pool
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+
+  // Tirer 1-2 thèmes de chaque scénario recommandé
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+
+    if (scenario && scenarioTopics.length > 0) {
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Obtenir la description de la sélection actuelle
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  setTimeout(() => {
+    let element = document.querySelector(anchor)
+
+    if (!element) {
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+
+    if (!element) {
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      })
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# Références d'inspiration pour les scénarios grand public
+
+## Introduction au chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Applications grand public', 'Mode de vie', 'Expérience émotionnelle', 'Création d\'ambiance']" coreOutput="Découvrir 15+ directions d\'inspiration" expectedOutput="Trouver la direction produit qui touche les utilisateurs">
+
+Ce document rassemble les <strong>directions d'application créative des grands modèles de langage (LLM) dans les scénarios de consommation grand public</strong>. Contrairement aux produits B2B qui se concentrent sur l'efficacité et les points de douleur, les produits grand public accordent plus d'importance à la <strong>création de sensations, de suggestions psychologiques et d'ambiance</strong>, permettant aux utilisateurs de vivre une résonance émotionnelle et une belle expérience.
+
+</ChapterIntroduction>
+
+## Sélection rapide d'ambiance de scénario
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Trouvez l'inspiration de scénario qui vous touche</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Choisissez l'ambiance souhaitée et votre ressenti actuel, le système recommandera les scénarios pertinents. Cliquez sur les étiquettes pour accéder au chapitre correspondant.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="Choisir le type d'ambiance" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="Choisir le ressenti actuel" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      Scénarios recommandés {{ currentSelection.vibe }} × {{ currentSelection.feeling }} :
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      Choisir à nouveau
+    </el-button>
+  </div>
+</el-card>
+
+## Aperçu des directions de scénarios
+
+<el-row :gutter="16" style="margin-top: 24px;">
+  <el-col :span="8" v-for="scenario in scenarios.slice(0, 6)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} directions d'inspiration</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(6, 12)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} directions d'inspiration</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(12, 16)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} directions d'inspiration</div>
+    </el-card>
+  </el-col>
+</el-row>
+
+---
+
+## 1. Mode de vie
+
+> 💡 **Idée clé** : Transformer le quotidien ordinaire en rituel, créer de la beauté dans les détails
+
+### 1.1 Assistant de rituel matinal
+
+**Description du scénario** :
+Chaque matin, génère un rituel personnalisé selon la météo, l'emploi du temps et votre humeur : une musique douce, une tasse de thé adaptée, 5 minutes d'étirements, ou un mot d'encouragement.
+
+**Points clés de l'ambiance** :
+- Un réveil progressif, pas une alarme brutale
+- Une expérience multisensorielle (visuelle et auditive)
+- Donner envie d'anticiper chaque journée
+
+**Suggestion psychologique** :
+> "Aujourd'hui sera une belle journée, car vous méritez d'être traité avec douceur"
+
+### 1.2 Créateur d'atmosphère pour célibataires
+
+**Description du scénario** :
+Conçoit des ambiances domestiques pour les personnes vivant seules, en harmonisant éclairage, musique et senteurs pour créer un sentiment de chaleur et d'appartenance.
+
+**Points clés de l'ambiance** :
+- Ajustement automatique selon l'heure et l'humeur
+- Thèmes saisonniers changeants
+- Créer une sensation de "compagnie"
+
+### 1.3 Générateur de week-end cocooning
+
+**Description du scénario** :
+Le vendredi soir, génère le plan de week-end parfait selon votre humeur et la météo : film, encas, décoration, et même le coin idéal pour rêvasser.
+
+**Points clés de l'ambiance** :
+- Présentation visuelle réconfortante
+- Expérience de choix sans pression
+- Rendre le fait de rester à la maison un plaisir
+
+### 1.4 Radio apaisante du soir
+
+**Description du scénario** :
+Chaque soir avant de dormir, génère un contenu apaisant personnalisé : histoires douces, méditations guidées, bruits blancs, ou simplement un "bonne nuit" chaleureux.
+
+**Points clés de l'ambiance** :
+- Sons et rythmes apaisants
+- Volume en diminution progressive
+- Créer un sentiment de sécurité et de détente
+
+### 1.5 Chasseur d'inspiration esthétique
+
+**Description du scénario** :
+Découvre la beauté dans les petites choses du quotidien et offre des suggestions d'esthétique de vie et de rituels : comment rendre un café plus élégant, transformer un bureau en espace de concentration.
+
+**Points clés de l'ambiance** :
+- Découvrir l'extraordinaire dans l'ordinaire
+- Cultiver la sensibilité à la beauté
+- Faire de la vie un art
+
+---
+
+## 2. Compagnie émotionnelle
+
+> 💡 **Idée clé** : L'accueil inconditionnel et la présence, devenir un réceptacle bienveillant des émotions
+
+### 2.1 Confident nocturne
+
+**Description du scénario** :
+Un espace d'écoute émotionnel 24h/24, qui accueille toutes vos pensées sans jugement. Que ce soit la joie, la tristesse, la colère ou la confusion, il y a toujours une place pour vous.
+
+**Points clés de l'ambiance** :
+- Sécurité et protection absolues de la vie privée
+- Ne pas interrompre, ne pas sermonner, juste écouter
+- Réponses chaleureuses et empathiques
+
+**Suggestion psychologique** :
+> "Toutes vos émotions sont légitimes, je suis là avec vous"
+
+### 2.2 Compagnon de guérison après rupture
+
+**Description du scénario** :
+Pendant la période difficile d'une rupture, offre une présence bienveillante, des conseils de guérison et un espace pour exprimer vos émotions. Pas besoin de se presser, prenez votre temps.
+
+**Points clés de l'ambiance** :
+- Autoriser la tristesse à exister
+- Apaisement progressif des émotions
+- Reconstruire l'estime de soi
+
+### 2.3 Coach de respiration anti-stress
+
+**Description du scénario** :
+Détecte les signes d'anxiété et guide des exercices de respiration et de pleine conscience. Un point d'ancrage fiable dans les moments de tension.
+
+**Points clés de l'ambiance** :
+- Sensibilisation immédiate aux émotions
+- Méthodes de soulagement simples et efficaces
+- Créer un sentiment de calme et de contrôle
+
+### 2.4 Guide de reconstruction de confiance en soi
+
+**Description du scénario** :
+Aide à retrouver l'estime de soi et la valeur personnelle par des dialogues positifs et des suggestions psychologiques. Chaque petit progrès est célébré.
+
+**Points clés de l'ambiance** :
+- Découvrir les qualités négligées
+- Célébrer chaque petite victoire
+- Construire un dialogue intérieur positif
+
+### 2.5 Analyseur intelligent de journal émotionnel
+
+**Description du scénario** :
+Analyse votre journal émotionnel, identifie les schémas et offre des insights chaleureux. Vous aide à mieux vous connaître et à vivre en paix avec vos émotions.
+
+**Points clés de l'ambiance** :
+- Visualisation des trajectoires émotionnelles
+- Insights chaleureux plutôt qu'une analyse froide
+- Suggestions actionnables
+
+---
+
+## 3. Divertissement
+
+> 💡 **Idée clé** : Créer des expériences immersives, faire du divertissement un refuge pour l'âme
+
+### 3.1 Maître du jeu de meurtre mystérieux
+
+**Description du scénario** :
+Joue le rôle de l'animateur d'un jeu de rôle d'enquête, crée une ambiance mystérieuse et fait avancer l'intrigue en temps réel selon les réactions des joueurs.
+
+**Points clés de l'ambiance** :
+- Un début captivant
+- Un suspense bien dosé
+- Un jeu de rôle immersif
+
+### 3.2 NPC vivant en monde ouvert
+
+**Description du scénario** :
+Des NPC avec de la profondeur, qui se souviennent de l'histoire du joueur et créent de véritables liens émotionnels. Pas de simples distributeurs de quêtes, mais des amis dans le monde du jeu.
+
+**Points clés de l'ambiance** :
+- Mémoire persistante et continuité
+- Interactions personnalisées
+- Connexion émotionnelle authentique
+
+### 3.3 Générateur de podcast personnalisé
+
+**Description du scénario** :
+Génère un podcast sur mesure selon vos centres d'intérêt, avec un ton naturel comme une conversation entre amis. Partage de connaissances, récits ou simple compagnie.
+
+**Points clés de l'ambiance** :
+- Ton de conversation détendu et naturel
+- Contenu adapté à vos goûts
+- Compagnie disponible à tout moment
+
+### 3.4 Groupe d'ambiance de concert virtuel
+
+**Description du scénario** :
+Recrée l'ambiance d'un concert en direct avec interactions en temps réel, encouragements et effets d'atmosphère. Même seul chez soi, ressentez la ferveur d'un concert.
+
+**Points clés de l'ambiance** :
+- Immersion visuelle et sonore
+- Interactions et résonance en temps réel
+- Créer un sentiment de participation collective
+
+### 3.5 Partenaire de fiction interactive
+
+**Description du scénario** :
+Co-créez des histoires où chaque choix influence le cours du récit. Le lecteur n'est plus un consommateur passif, mais le co-créateur de l'histoire.
+
+**Points clés de l'ambiance** :
+- Des possibilités infinies
+- Un véritable pouvoir de choix
+- Créer votre propre histoire
+
+---
+
+## 4. Croissance personnelle
+
+> 💡 **Idée clé** : La croissance n'est pas une ascèse, mais un voyage joyeux de découverte de soi
+
+### 4.1 Témoin de votre croissance
+
+**Description du scénario** :
+Enregistre votre parcours de croissance, encourage et fait le point aux moments clés. Rendre la croissance visible et les efforts mémorables.
+
+**Points clés de l'ambiance** :
+- Visualisation du parcours de croissance
+- Commémoration des moments importants
+- Bilan chaleureux et perspectives
+
+**Suggestion psychologique** :
+> "Vous avez déjà parcouru si loin sans même vous en rendre compte"
+
+### 4.2 Coach ludique d'habitudes
+
+**Description du scénario** :
+Transforme la prise d'habitudes ennuyeuse en une aventure de jeu captivante. Chaque petite habitude maintenue devient un accomplissement dans le jeu.
+
+**Points clés de l'ambiance** :
+- Mécanismes de motivation ludiques
+- Retour positif immédiat
+- Rendre la persévérance amusante
+
+### 4.3 Matching de partenaires d'apprentissage
+
+**Description du scénario** :
+Trouve des partenaires d'apprentissage qui partagent vos centres d'intérêt pour s'encourager mutuellement et partager les progrès. L'apprentissage n'est plus un voyage solitaire.
+
+**Points clés de l'ambiance** :
+- Trouver des partenaires sur la même longueur d'onde
+- Une atmosphère d'encouragement mutuel
+- La joie de progresser ensemble
+
+### 4.4 Chasseur de petits bonheurs quotidiens
+
+**Description du scénario** :
+Aide à découvrir les petites joies de la vie et cultive la gratitude et une attitude positive. Chaque jour, noter une petite chose pour laquelle être reconnaissant.
+
+**Points clés de l'ambiance** :
+- Découvrir les beautés négligées
+- Cultiver l'habitude de la gratitude
+- Accumuler de l'énergie positive
+
+### 4.5 Simulateur de vie
+
+**Description du scénario** :
+Simulez différents choix de vie et expérimentez les possibilités d'univers parallèles. Aide à explorer différentes options pour faire des choix plus éclairés.
+
+**Points clés de l'ambiance** :
+- Expérimenter les choix en sécurité
+- Explorer un soi inconnu
+- Pas de bon ou mauvais, seulement l'expérience
+
+---
+
+## 5. Interactions sociales
+
+> 💡 **Idée clé** : Rendre la sociabilité naturelle et détendue, trouver un mode de connexion confortable
+
+### 5.1 Générateur de sujets de brise-glace
+
+**Description du scénario** :
+Propose des sujets de conversation intéressants pour toute occasion sociale, brisant la glace et rapprochant les gens.
+
+**Points clés de l'ambiance** :
+- Sujets légers et amusants
+- Adaptés à différentes occasions
+- Ouvertures de conversation naturelles
+
+### 5.2 Styliste de publications sociales
+
+**Description du scénario** :
+Génère des textes élégants pour vos publications selon vos photos et votre humeur. Transformer le partage en expression personnelle.
+
+**Points clés de l'ambiance** :
+- En accord avec votre style personnel
+- Élégant sans être forcé
+- Expression émotionnelle authentique
+
+### 5.3 Planificateur de rendez-vous romantiques
+
+**Description du scénario** :
+Conçoit une expérience complète : du lieu aux sujets de conversation en passant par les surprises. Chaque rendez-vous devient un souvenir mémorable.
+
+**Points clés de l'ambiance** :
+- Conception d'une expérience complète
+- Surprises bien dosées
+- Créer une atmosphère romantique
+
+### 5.4 Animateur de réunions à distance
+
+**Description du scénario** :
+Anime les rencontres en ligne, organise des jeux et guide les interactions. Rendre les réunions virtuelles aussi chaleureuses qu'en présentiel.
+
+**Points clés de l'ambiance** :
+- Jeux et activités amusants
+- Guidage d'interactions naturelles
+- Créer un sentiment de participation collective
+
+### 5.5 Gestionnaire d'énergie sociale
+
+**Description du scénario** :
+Aide les introvertis à gérer leur énergie sociale et trouver leur rythme confortable. Pas besoin de se forcer pour profiter des joies de la sociabilité.
+
+**Points clés de l'ambiance** :
+- Respect des limites personnelles
+- Trouver sa propre façon d'interagir
+- Pas besoin de changer de personnalité
+
+---
+
+## 6. Expression créative
+
+> 💡 **Idée clé** : Tout le monde a de la créativité, il suffit de l'éveiller
+
+### 6.1 Kit d'urgence pour panne d'inspiration
+
+**Description du scénario** :
+Offre des étincelles d'inspiration inattendues lors d'un blocage créatif. Pas de réponses standard, mais des clés pour ouvrir de nouvelles perspectives.
+
+**Points clés de l'ambiance** :
+- Briser les schémas de pensée
+- Connexions inattendues
+- Stimuler la créativité intérieure
+
+### 6.2 Guide d'exploration du style personnel
+
+**Description du scénario** :
+Aide à découvrir votre style unique, de la tenue vestimentaire à l'expression de soi. Chacun peut trouver sa propre voix.
+
+**Points clés de l'ambiance** :
+- Découvrir son moi unique
+- Encourager l'expérimentation
+- Construire sa marque personnelle
+
+### 6.3 Consultant esthétique pour bullet journals
+
+**Description du scénario** :
+Conseille la mise en page, les couleurs et les idées créatives de vos carnets et journaux. Transformer le fait de noter en art.
+
+**Points clés de l'ambiance** :
+- Direction esthétique visuelle
+- Inspiration créative de contenu
+- Style personnalisé
+
+### 6.4 Guide de composition photographique
+
+**Description du scénario** :
+Propose des conseils de photographie et de retouche selon le scénario et l'ambiance souhaitée. Chaque photo peut transmettre l'émotion voulue.
+
+**Points clés de l'ambiance** :
+- L'ambiance prime sur la technique
+- Expression visuelle des émotions
+- L'œil qui découvre la beauté
+
+### 6.5 Sélecteur musical selon l'humeur
+
+**Description du scénario** :
+Recommande la combinaison musicale parfaite selon l'humeur et le contexte. La musique est résonance émotionnelle et créatrice d'ambiance.
+
+**Points clés de l'ambiance** :
+- Association émotionnelle précise
+- Recommandations contextuelles
+- Le pouvoir guérisseur de la musique
+
+---
+
+## 7. Voyage et exploration
+
+> 💡 **Idée clé** : Voyager, ce n'est pas seulement voir des paysages, c'est vivre des modes de vie différents
+
+### 7.1 Guide de flânerie urbaine
+
+**Description du scénario** :
+Explorez la ville comme un local et découvrez des pépites cachées. Pas seulement les sites touristiques, mais le vrai pouls de la ville.
+
+**Points clés de l'ambiance** :
+- Le regard du local
+- Découvertes et surprises inattendues
+- S'immerger dans l'âme de la ville
+
+### 7.2 Générateur de journal de voyage
+
+**Description du scénario** :
+Transforme vos photos de voyage et vos émotions en récits poétiques et souvenirs durables. Chaque voyage laisse une empreinte unique.
+
+**Points clés de l'ambiance** :
+- Enregistrement des émotions
+- Écriture poétique
+- Souvenirs éternels
+
+### 7.3 Compagnon de voyage en solo
+
+**Description du scénario** :
+Accompagne, conseille et rassure les voyageurs solitaires. Voyager seul tout en se sentant entouré et en sécurité.
+
+**Points clés de l'ambiance** :
+- Création d'un sentiment de sécurité
+- Compagnie intéressante
+- Seul mais pas isolé
+
+### 7.4 Aperçu d'ambiance de destination
+
+**Description du scénario** :
+Immersion dans l'ambiance de votre destination avant le départ. L'anticipation devient partie du voyage.
+
+**Points clés de l'ambiance** :
+- Aperçu immersif
+- Stimuler l'attente et l'imagination
+- Entrer progressivement en mode voyage
+
+### 7.5 Guide photographique de voyage
+
+**Description du scénario** :
+Guide la prise de photos narratives selon le contexte et la lumière. Pas seulement enregistrer, mais raconter l'histoire du voyage.
+
+**Points clés de l'ambiance** :
+- Composition narrative
+- Capture des émotions
+- Perspective unique
+
+---
+
+## 8. Santé physique et mentale
+
+> 💡 **Idée clé** : La santé n'est pas un objectif, c'est un acte de bienveillance envers soi
+
+### 8.1 Éveilleur de motivation sportive
+
+**Description du scénario** :
+L'encouragement juste au bon moment quand vous n'avez pas envie de bouger. Pas de la contrainte, mais le réveil de votre motivation intérieure.
+
+**Points clés de l'ambiance** :
+- Comprendre la réticence à bouger
+- Guidage progressif
+- Célébrer chaque petit geste
+
+### 8.2 Cuisine inspirante santé
+
+**Description du scénario** :
+Génère des recettes saines et réconfortantes selon l'humeur et les ingrédients disponibles. Manger sainement peut aussi être un plaisir gustatif.
+
+**Points clés de l'ambiance** :
+- L'attrait de la gastronomie
+- Des recettes simples
+- L'équilibre entre santé et plaisir
+
+### 8.3 Optimiseur de sommeil
+
+**Description du scénario** :
+Crée une ambiance propice au sommeil, de l'environnement au mental. Faire du sommeil le moment le plus attendu de la journée.
+
+**Points clés de l'ambiance** :
+- Optimisation de l'environnement
+- Relaxation mentale
+- Rituel d'endormissement
+
+### 8.4 Guide de conscience corporelle
+
+**Description du scénario** :
+Guide l'attention vers les signaux du corps pour renforcer la connexion corps-esprit. Faire une pause dans l'agitation pour écouter son corps.
+
+**Points clés de l'ambiance** :
+- Guidage en douceur
+- Prise de conscience corporelle
+- Harmonie corps-esprit
+
+### 8.5 Rappel de bienveillance envers soi
+
+**Description du scénario** :
+Vous rappelle de faire une pause et de prendre soin de vous au milieu de l'agitation. Un petit rappel qui peut changer toute la journée.
+
+**Points clés de l'ambiance** :
+- Rappels opportuns
+- Actions simples
+- Attention bienveillante
+
+---
+
+## 9. Exploration du savoir
+
+> 💡 **Idée clé** : L'apprentissage est une aventure sans fin, la curiosité est la meilleure des enseignantes
+
+### 9.1 Guide ludique d'exploration du savoir
+
+**Description du scénario** :
+Transforme l'apprentissage monotone en aventure passionnante. Chaque connaissance est un trésor à découvrir.
+
+**Points clés de l'ambiance** :
+- Expérience ludique
+- Le plaisir de l'exploration
+- La satisfaction de l'accomplissement
+
+### 9.2 Partenaire de langue par scénarios
+
+**Description du scénario** :
+Joue différents rôles pour apprendre une langue naturellement en situation. Pas de mémorisation par cœur, mais l'apprentissage par la pratique.
+
+**Points clés de l'ambiance** :
+- Scénarios réalistes
+- Rôles intéressants
+- Acquisition naturelle
+
+### 9.3 Satisfaisant de curiosité
+
+**Description du scénario** :
+Répond à toutes vos questions farfelues et nourrit votre curiosité envers le monde. Il n'y a pas de questions stupides, seulement des réponses à découvrir.
+
+**Points clés de l'ambiance** :
+- Encourager les questions
+- Réponses intéressantes
+- Stimuler encore plus de curiosité
+
+### 9.4 Inspiration de notes de lecture
+
+**Description du scénario** :
+Aide à organiser vos réflexions de lecture et à découvrir de nouvelles perspectives. La lecture devient un dialogue avec l'auteur et avec soi-même.
+
+**Points clés de l'ambiance** :
+- Réflexion approfondie
+- Perspectives personnelles
+- Connexion des connaissances
+
+### 9.5 Créateur d'ambiance pour partage de connaissances
+
+**Description du scénario** :
+Transforme vos apprentissages en contenus de partage captivants. Partager n'est pas seulement transmettre, c'est aussi approfondir sa compréhension.
+
+**Points clés de l'ambiance** :
+- Expression engageante
+- La joie de partager
+- Diffusion du savoir
+
+---
+
+## 10. Relations humaines
+
+> 💡 **Idée clé** : Les bonnes relations demandent de l'attention, mais l'attention n'a pas besoin d'être compliquée
+
+### 10.1 Coach de communication intime
+
+**Description du scénario** :
+Aide à exprimer les sentiments difficiles à formuler et améliore les relations proches. Parfois, il suffit de trouver les bons mots.
+
+**Points clés de l'ambiance** :
+- Un espace d'expression en sécurité
+- Conseils bienveillants
+- Améliorer la compréhension mutuelle
+
+### 10.2 Rappel de attention familiale
+
+**Description du scénario** :
+Vous rappelle de prendre soin de votre famille et propose des suggestions d'interactions chaleureuses. Ne pas oublier les plus importants.
+
+**Points clés de l'ambiance** :
+- Rappels opportuns
+- Gestes d'attention simples
+- Connexion chaleureuse
+
+### 10.3 Entreteneur d'amitiés
+
+**Description du scénario** :
+Aide à maintenir les amitiés à distance en créant des sujets communs. La distance n'est pas un problème, l'attention est la clé.
+
+**Points clés de l'ambiance** :
+- Créer des occasions de connexion
+- Sujets communs
+- Pérennité des amitiés
+
+### 10.4 Planificateur de déclarations et surprises
+
+**Description du scénario** :
+Organise des surprises inoubliables et des moments romantiques pour vos proches. Rendre les occasions spéciales encore plus spéciales.
+
+**Points clés de l'ambiance** :
+- Conception personnalisée
+- Surprises romantiques
+- Souvenirs mémorables
+
+### 10.5 Médiateur de conflits
+
+**Description du scénario** :
+Propose des conseils et des formulations pour apaiser les tensions relationnelles. Aide à trouver le pont de la réconciliation.
+
+**Points clés de l'ambiance** :
+- Comprendre les positions de chacun
+- Conseils bienveillants
+- Réparation des relations
+
+---
+
+## 11. Animaux de compagnie
+
+> 💡 **Idée clé** : Les animaux sont de la famille, leur compagnie mérite d'être enregistrée et chérie
+
+### 11.1 Journal de vie de votre animal
+
+**Description du scénario** :
+Rédige un journal du point de vue de votre animal, relatant ses journées avec vous. Imaginez comment il décrirait ses moments passés à vos côtés.
+
+**Points clés de l'ambiance** :
+- Un regard mignon
+- Des moments du quotidien réconfortants
+- Connexion émotionnelle
+
+### 11.2 Interprète du comportement animal
+
+**Description du scénario** :
+Décrypte le langage corporel de votre animal pour renforcer votre lien. Mieux comprendre ses besoins et ses émotions.
+
+**Points clés de l'ambiance** :
+- Interprétation professionnelle
+- Améliorer la compréhension
+- Mieux prendre soin de son animal
+
+### 11.3 Planificateur d'activités avec votre animal
+
+**Description du scénario** :
+Conçoit des activités créatives pour partager des moments complices avec votre animal. Rendre le temps passé ensemble plus amusant et significatif.
+
+**Points clés de l'ambiance** :
+- Activités créatives
+- Interactions amusantes
+- Beaux souvenirs
+
+### 11.4 Générateur d'histoires commémoratives
+
+**Description du scénario** :
+Transforme les photos et souvenirs de votre animal en récits touchants. Préserver les moments précieux passés avec votre compagnon.
+
+**Points clés de l'ambiance** :
+- Récit chaleureux
+- Souvenirs précieux
+- Un amour éternel
+
+### 11.5 Guide rassurant pour nouveaux maîtres
+
+**Description du scénario** :
+Accompagne avec bienveillance les nouveaux propriétaires d'animaux. Rendre le voyage avec un animal rempli de confiance et de joie.
+
+**Points clés de l'ambiance** :
+- Guide complet
+- Encouragement chaleureux
+- Compagnie rassurante
+
+---
+
+## 12. Santé financière
+
+> 💡 **Idée clé** : La liberté financière n'est pas un objectif, la santé financière l'est
+
+### 12.1 Sensible aux émotions d'achat
+
+**Description du scénario** :
+Identifie les émotions derrière les achats impulsifs pour construire une relation saine avec la consommation. Comprendre pourquoi on veut acheter est plus important que de savoir si on achète.
+
+**Points clés de l'ambiance** :
+- Sensibilisation en douceur
+- Comprendre sans juger
+- Construire de bonnes habitudes
+
+### 12.2 Visualisation d'objectifs d'épargne
+
+**Description du scénario** :
+Transforme vos objectifs d'épargne en une barre de progression motivante vers vos rêves. L'épargne devient un voyage vers vos aspirations.
+
+**Points clés de l'ambiance** :
+- Progression visuelle
+- Connexion avec vos rêves
+- Satisfaction de l'accomplissement
+
+### 12.3 Apprentissage ludique de la finance
+
+**Description du scénario** :
+Apprenez les bases de la gestion financière de manière amusante. La finance ne doit pas être ennuyeuse, elle peut être une exploration passionnante.
+
+**Points clés de l'ambiance** :
+- Expression accessible
+- Exemples amusants
+- Connaissances pratiques
+
+### 12.4 Apaiseur d'anxiété financière
+
+**Description du scénario** :
+Offre un soutien émotionnel et des conseils pratiques face au stress financier. L'anxiété ne résout pas les problèmes, mais le calme peut aider.
+
+**Points clés de l'ambiance** :
+- Apaisement émotionnel
+- Conseils pratiques
+- Le pouvoir de l'espoir
+
+### 12.5 Jeu d'initiation aux petits investissements
+
+**Description du scénario** :
+Découvrez l'investissement par le jeu, réduisant la barrière à l'entrée. Apprendre dans un environnement sûr.
+
+**Points clés de l'ambiance** :
+- Expérience ludique
+- Essai en sécurité
+- Le plaisir d'apprendre
+
+---
+
+## 13. Développement professionnel
+
+> 💡 **Idée clé** : La carrière n'est pas une ligne droite, c'est un terrain d'exploration
+
+### 13.1 Compagnon dans le doute professionnel
+
+**Description du scénario** :
+Écoute, explore et oriente lors des périodes de remise en question professionnelle. Le doute est normal, l'important est de ne pas y faire face seul.
+
+**Points clés de l'ambiance** :
+- Écoute sans jugement
+- Explorer les possibilités
+- Présence chaleureuse
+
+### 13.2 Réveilleur de sens au travail
+
+**Description du scénario** :
+Aide à retrouver la valeur et la signification de votre travail, ravive la passion. Parfois, il suffit de changer de perspective.
+
+**Points clés de l'ambiance** :
+- Découvrir la valeur
+- Raviver l'enthousiasme
+- Sentiment d'accomplissement
+
+### 13.3 Facilitateur de relations professionnelles
+
+**Description du scénario** :
+Propose des sujets légers et des conseils d'interaction pour le milieu professionnel. Rendre les relations de travail moins gênantes et plus naturelles.
+
+**Points clés de l'ambiance** :
+- Sujets légers
+- Interactions naturelles
+- Relations confortables
+
+### 13.4 Stimulateur d'idées de projets secondaires
+
+**Description du scénario** :
+Déclenche des idées de projets parallèles selon vos intérêts et compétences. Explorer les possibilités infinies au-delà du travail.
+
+**Points clés de l'ambiance** :
+- Explorer vos centres d'intérêt
+- Explorer les possibilités
+- Encourager l'action
+
+### 13.5 Boosteur de confiance avant entretien
+
+**Description du scénario** :
+Prépare mentalement et renforce la confiance avant les entretiens d'embauche. Vous permettre d'aborder les opportunités dans votre meilleur état.
+
+**Points clés de l'ambiance** :
+- Construction de la confiance
+- Préparation complète
+- Être dans son meilleur état
+
+---
+
+## 14. Espace domestique
+
+> 💡 **Idée clé** : La maison n'est pas seulement un lieu de résidence, c'est un refuge pour l'âme
+
+### 14.1 Designer d'atmosphère domestique
+
+**Description du scénario** :
+Conçoit des ambiances selon l'humeur et la saison. Laissez votre maison évoluer avec vos états d'âme et les saisons.
+
+**Points clés de l'ambiance** :
+- Conception d'ambiance
+- Changement saisonnier
+- Harmonie avec l'humeur
+
+### 14.2 Guide de décoration saisonnière
+
+**Description du scénario** :
+Renouvelez votre intérieur au fil des saisons pour garder un sentiment de fraîcheur. La maison reste toujours vivante et pleine de surprises.
+
+**Points clés de l'ambiance** :
+- Thèmes saisonniers
+- Un sentiment de nouveauté
+- Le rituel du quotidien
+
+### 14.3 Magicien des petits espaces
+
+**Description du scénario** :
+Transformez les petits espaces en lieux chaleureux et confortables. La taille ne compte pas, le ressenti est ce qui importe.
+
+**Points clés de l'ambiance** :
+- Optimisation de l'espace
+- Ambiance chaleureuse
+- Vie confortable
+
+### 14.4 Créateur de rituels domestiques
+
+**Description du scénario** :
+Donnez un sens rituel aux activités quotidiennes à la maison. Rendre les tâches ménagères significatives.
+
+**Points clés de l'ambiance** :
+- Conception de rituels
+- Donner du sens
+- Qualité de vie
+
+### 14.5 Accompagnateur de tri minimaliste
+
+**Description du scénario** :
+Soutien psychologique et aide à la décision lors du rangement. Le minimalisme n'est pas seulement jeter des choses, c'est aussi ranger son intérieur.
+
+**Points clés de l'ambiance** :
+- Soutien psychologique
+- Aide à la décision
+- Rangement intérieur
+
+---
+
+## 15. Gastronomie
+
+> 💡 **Idée clé** : La nourriture est un langage d'amour, la cuisine est une façon de l'exprimer
+
+### 15.1 Cuisine réconfortante pour solo
+
+**Description du scénario** :
+Conçoit des recettes simples et réconfortantes pour les personnes vivant seules. Même seul, on peut bien manger et bien se traiter.
+
+**Points clés de l'ambiance** :
+- Recettes simples
+- Saveurs réconfortantes
+- Expression d'amour de soi
+
+### 15.2 Décorateur de table festive
+
+**Description du scénario** :
+Crée des mises en table élégantes avec une touche rituelle pour les occasions spéciales. Chaque repas devient un moment mémorable.
+
+**Points clés de l'ambiance** :
+- Conception rituelle
+- Plaisir visuel
+- Beaux souvenirs
+
+### 15.3 Sélecteur culinaire selon l'humeur
+
+**Description du scénario** :
+Recommande des recettes adaptées à votre humeur du moment. Parfois, on a juste besoin du plat qui réconforte.
+
+**Points clés de l'ambiance** :
+- Accord avec l'humeur
+- La nourriture comme réconfort
+- Connexion émotionnelle
+
+### 15.4 Constructeur de confiance en cuisine
+
+**Description du scénario** :
+Encourage les débutants avec des recettes simples et un soutien chaleureux. Chacun peut devenir le chef de sa propre cuisine.
+
+**Points clés de l'ambiance** :
+- Début en douceur
+- Encouragement chaleureux
+- Construction de la confiance
+
+### 15.5 Guide de photographie culinaire
+
+**Description du scénario** :
+Donnez à vos plats maison une allure irrésistible en photo. Photographier la gastronomie, c'est aussi capturer la beauté de la vie.
+
+**Points clés de l'ambiance** :
+- Création d'ambiance
+- Plaisir visuel
+- Enregistrement de la vie
+
+---
+
+## 16. Style vestimentaire
+
+> 💡 **Idée clé** : La mode est une expression de soi, le style est le reflet de l'intérieur
+
+### 16.1 Tableau d'inspiration quotidien
+
+**Description du scénario** :
+Génère des idées de tenues selon la météo, l'occasion et l'humeur. Chaque tenue exprime votre état d'esprit du jour.
+
+**Points clés de l'ambiance** :
+- Expression de l'humeur
+- Accord avec l'occasion
+- Construction de la confiance
+
+### 16.2 Styliste de garde-robe capsule
+
+**Description du scénario** :
+Créez des combinaisons infinies avec un nombre limité de pièces. Moins c'est plus, la simplicité peut aussi être stylée.
+
+**Points clés de l'ambiance** :
+- Philosophie minimaliste
+- Combinaisons créatives
+- Mode durable
+
+### 16.3 Voyage d'exploration du style personnel
+
+**Description du scénario** :
+Aide à découvrir et construire votre style vestimentaire unique. S'habiller, ce n'est pas seulement porter des vêtements, c'est affirmer son attitude.
+
+**Points clés de l'ambiance** :
+- Exploration de soi
+- Construction du style
+- Expression confiante
+
+### 16.4 Rénovateur de vieux vêtements
+
+**Description du scénario** :
+Donne une nouvelle vie à vos anciens vêtements avec des idées de mix & match. Mode durable et renouveau créatif.
+
+**Points clés de l'ambiance** :
+- Combinaisons créatives
+- Philosophie éco-responsable
+- Sentiment de nouveauté
+
+### 16.5 Consultant en style pour grandes occasions
+
+**Description du scénario** :
+Conçoit des looks confiants pour vos moments importants. Chaque moment clé mérite une présentation parfaite.
+
+**Points clés de l'ambiance** :
+- Accord avec l'occasion
+- Boost de confiance
+- Présentation parfaite
+
+---
+
+## Principes clés pour la conception de produits grand public
+
+### 1. De la "fonctionnalité" au "ressenti"
+
+Les produits B2B se concentrent sur "quel problème cette fonctionnalité résout-elle", les produits grand public sur "quelle sensation cette fonctionnalité procure-t-elle".
+
+| Pensée B2B | Pensée grand public |
+|-----------|---------------------|
+| Améliorer l'efficacité | Gagner du temps pour faire ce qu'on aime |
+| Réduire les coûts | Chaque euro dépensé vaut la peine |
+| Résoudre les points de douleur | Créer de belles expériences |
+| Fonctionnalités complètes | Le ressenti est là |
+
+### 2. Les trois niveaux de création d'ambiance
+
+**Niveau sensoriel** : design visuel, sonore, tactile
+- Couleurs chaleureuses
+- Sons apaisants
+- Animations fluides
+
+**Niveau émotionnel** : résonance et guidance émotionnelle
+- Comprendre l'humeur de l'utilisateur
+- Offrir un soutien émotionnel
+- Créer des émotions positives
+
+**Niveau du sens** : identification des valeurs et appartenance
+- Faire sentir à l'utilisateur qu'il est compris
+- Créer un sentiment d'appartenance
+- Donner du sens aux actions
+
+### 3. Le pouvoir des suggestions psychologiques
+
+Le copywriting et le design des produits grand public transmettent des suggestions psychologiques :
+
+- **Suggestions positives** : "Vous avez déjà fait du bon travail", "Prenez votre temps, ce n'est pas grave"
+- **Suggestions d'appartenance** : "Beaucoup de gens sont comme vous", "Vous n'êtes pas seul"
+- **Suggestions de croissance** : "Chaque tentative est un progrès", "Vous vous améliorez"
+
+### 4. Aider l'utilisateur à devenir une meilleure version de lui-même
+
+Les meilleurs produits grand public ne changent pas l'utilisateur, ils l'aident à devenir la personne qu'il veut être.
+
+- Pas "Tu devrais...", mais "Tu peux..."
+- Pas "Tu dois...", mais "Si tu le souhaites..."
+- Pas "Tu n'es pas encore...", mais "Tu es déjà..."
+
+---
+
+> 💡 **À retenir** : Les utilisateurs grand public n'achètent pas des fonctionnalités, mais des sensations ; pas des outils, mais de la compagnie ; pas des services, mais de la compréhension.
diff --git a/docs/fr-fr/stage-1/appendix-double-diamond/index.md b/docs/fr-fr/stage-1/appendix-double-diamond/index.md
new file mode 100644
index 0000000..a7de951
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-double-diamond/index.md
@@ -0,0 +1,542 @@
+---
+title: "Le modèle Double Diamond : faire d'abord les bonnes choses, puis faire les choses correctement"
+description: "Article d'introduction au Double Diamond pour les lecteurs débutants. Comprendre les quatre phases Discover, Define, Develop, Deliver, et éviter de se précipiter dans les prototypes avant d'avoir compris le problème."
+---
+
+<script setup>
+const duration = 'Environ <strong>1,5 heure</strong>'
+</script>
+
+# Le modèle Double Diamond : faire d'abord les bonnes choses, puis faire les choses correctement
+
+<a id="top-dd"></a>
+
+## Introduction du chapitre
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Double Diamond', 'Design Thinking', 'Analyse des besoins', 'Conception de solutions']"
+  coreOutput="1 définition de problème plus claire et 1 point d'entrée de validation plus raisonnable"
+  expectedOutput="Ne plus se précipiter pour dessiner des prototypes, mais savoir d'abord clarifier le problème avant de comparer les solutions"
+>
+
+Beaucoup de gens, lorsqu'ils créent un produit pour la première fois, le piège le plus courant n'est pas « ne pas travailler assez dur », mais de passer trop vite à la solution.
+
+À peine une direction a-t-elle germé dans leur esprit qu'ils commencent à penser : comment dessiner les pages, où placer les boutons, faut-il intégrer l'IA, faut-il faire un système de connexion, quel outil utiliser pour les prototypes. Après s'être agité un moment, ils se rendent compte que le problème fondamental n'a jamais été vraiment clarifié : les utilisateurs ont-ils vraiment ce point de douleur ? Ce problème mérite-t-il d'être résolu maintenant ? Vous pensiez faire avancer le projet, mais en réalité vous accélérez juste dans la mauvaise direction.
+
+Le modèle Double Diamond est conçu pour éviter ce genre de situation.
+
+Son rappel le plus précieux est : **« faire les bonnes choses » et « faire les choses correctement » sont deux étapes complètement différentes.** Si vous n'avez pas encore compris le problème et que vous vous précipitez pour faire un prototype, vous ne ferez généralement que rendre la mauvaise direction plus complète.
+
+</ChapterIntroduction>
+
+::: info SOP minimale
+**Objectif** : après avoir lu, vous saurez mieux quand réfléchir d'abord au problème et quand commencer à penser aux solutions et aux prototypes, évitant ainsi de travailler dur dans la mauvaise direction dès le début.
+
+**Actions** : suivez les quatre étapes `Discover → Define → Develop → Deliver`, en ne faisant à chaque étape que ce qui est nécessaire.
+
+**Résultat** : vous obtiendrez une définition de problème plus claire, plusieurs solutions comparables, et une version minimale validable.
+
+**Navigation rapide** : [Qu'est-ce que le Double Diamond](#dd-what) · [Le premier diamant](#dd-first) · [Comment l'IA peut vous aider](#dd-ai)
+:::
+
+## Ce que vous apprendrez
+
+1. Qu'est-ce que le modèle Double Diamond, et pourquoi il est adapté aux débutants en création de produit
+2. Ce que font les quatre phases Discover, Define, Develop, Deliver
+3. Comment distinguer « je devrais continuer à diverger » de « je devrais commencer à converger »
+4. Comment appliquer le modèle Double Diamond aux produits AI, à la conception de prototypes et à la validation des besoins
+
+<a id="dd-what"></a>
+## [1. Qu'est-ce que le modèle Double Diamond](#top-dd)
+
+Le modèle Double Diamond est un cadre de processus de design classique promu par le **Design Council** britannique. Il représente un processus complet de design et d'innovation sous la forme de deux diamants consécutifs.
+
+La raison pour laquelle c'est des « diamants » est que chaque diamant comprend deux actions opposées mais toutes deux importantes :
+
+- **Divergence** : élargir d'abord la vision, voir plus de possibilités
+- **Convergence** : réduire ensuite le périmètre, prendre des décisions et faire des compromis
+
+Le processus complet se déroule en quatre étapes :
+
+1. **Discover** : comprendre largement les utilisateurs, les problèmes, l'environnement et le marché
+2. **Define** : extraire des masses d'informations le problème central véritablement digne d'être résolu
+3. **Develop** : diverger autour du problème central pour trouver plusieurs solutions
+4. **Deliver** : filtrer, prototyper, tester et livrer la solution la plus appropriée
+
+Si l'on compresse ces quatre étapes en une seule phrase facile à retenir :
+
+- **Le premier diamant** : comprendre d'abord quel problème résoudre exactement
+- **Le deuxième diamant** : décider ensuite quelle solution utiliser pour le résoudre
+
+C'est aussi la phrase que vous avez prononcée avec justesse :
+
+- **Le premier diamant : faire les bonnes choses**
+- **Le deuxième diamant : faire les choses correctement**
+
+## 2. Pourquoi le modèle Double Diamond est particulièrement adapté aux débutants
+
+Le rythme le plus courant chez les débutants en création de produit ressemble souvent à ça :
+
+- Avoir une idée
+- Trouver la direction cool
+- Commencer immédiatement à dessiner des prototypes
+- En construisant, découvrir que les fonctionnalités se multiplient
+- Finalement, ne plus savoir quel problème on résout
+
+La valeur du modèle Double Diamond n'est pas de rendre le processus plus complexe, mais de **vous forcer à séparer « comprendre le problème » et « concevoir la solution »**.
+
+Cela semble banal, mais c'est en réalité très important. Parce que beaucoup de produits qui échouent ne le font pas par manque d'effort, mais parce que :
+
+- Ils ont choisi le mauvais problème
+- Ils ont mal compris les utilisateurs
+- Ils ont verrouillé une solution trop tôt
+- Ils ont passé beaucoup de temps à peaufiner les détails sans valider la direction
+
+Le modèle Double Diamond vous rappelle constamment :
+
+- Ne présumez pas que le problème est établi juste parce que l'idée semble bonne
+- Ne présumez pas que la solution mérite d'être réalisée juste parce qu'elle est réalisable
+- Ne présumez pas que les utilisateurs en auront vraiment besoin juste parce que le prototype paraît complet
+
+<a id="dd-first"></a>
+## [3. Le premier diamant : faire les bonnes choses](#top-dd)
+
+Le premier diamant se concentre sur **le problème lui-même**, pas sur la solution.
+
+Vous pouvez le résumer en une phrase : **ne vous précipitez pas, déterminez d'abord si ça vaut la peine d'être fait.**
+
+### 3.1 Discover : ouvrir d'abord l'espace du problème
+
+La tâche centrale de la phase Discover est de **faire une recherche large, pas de tirer des conclusions rapides**.
+
+Les activités typiques de cette étape incluent :
+
+- Observer comment les utilisateurs se comportent dans des scénarios réels
+- Interviewer des utilisateurs potentiels pour comprendre quand ils ont rencontré le problème pour la dernière fois
+- Observer comment ils se débrouillent actuellement
+- Examiner comment les concurrents et les alternatives gèrent la situation
+- Collecter des informations sur le marché, les processus, les contraintes, la chaîne de valeur
+
+Beaucoup de gens pensent à tort que Discover consiste à « lire plus de documentation ». En réalité, ce qui est plus crucial, c'est : **vous devez comprendre les personnes et les contextes, pas juste accumuler des informations.**
+
+Par exemple, si vous voulez créer un outil « AI qui aide à organiser les comptes rendus de réunion », en phase Discover, il serait plus pertinent de se concentrer sur :
+
+- Où les utilisateurs souffrent-ils le plus après une réunion
+- Est-ce la prise de notes, l'organisation, ou la synchronisation qui est difficile
+- Est-ce qu'ils écrivent eux-mêmes, demandent à des stagiaires, réécoutent les enregistrements, ou ne font simplement pas de compte rendu
+- Quels types de réunions nécessitent le plus un compte rendu, lesquels n'en ont pas besoin du tout
+
+L'objectif le plus important de cette étape n'est pas d'obtenir une réponse, mais de **ne pas supposer trop tôt que vous connaissez déjà la réponse.**
+
+### 3.2 Define : extraire le problème central de la masse d'informations
+
+Si Discover est l'ouverture, Define est le recentrage.
+
+La phase Define ne consiste pas à conserver toutes les observations, mais à se demander :
+
+- Quel est le problème véritablement prioritaire à résoudre
+- Quel problème est le plus fréquent, le plus douloureux, le plus porteur de valeur
+- Quelle est la seule scène à cibler pour la première version
+
+L'essence de cette étape est de transformer un sujet large en une définition de problème claire.
+
+Par exemple, au début vous disiez :
+
+> Je veux créer un outil AI pour améliorer l'efficacité des réunions.
+
+En phase Define, une meilleure formulation pourrait devenir :
+
+> Nous allons d'abord résoudre le problème des équipes projet qui, après des réunions collaboratives de 30 à 60 minutes, ne parviennent pas à produire en 10 minutes un compte rendu incluant les tâches, les responsables et les délais.
+
+À ce stade, le problème commence à devenir clair :
+
+- Qui est l'utilisateur
+- Quel est le contexte
+- Quel est le blocage
+- Quel est le critère de succès
+
+L'essence de Define est de **passer de « beaucoup de problèmes » à « quel problème résoudre en premier cette fois-ci ».**
+
+## 4. Le deuxième diamant : faire les choses correctement
+
+Ce n'est qu'après avoir terminé le premier diamant qu'il est vraiment approprié d'entrer dans le deuxième. Parce qu'à ce stade, vous ne résolvez pas une direction vague, mais un problème spécifique qui a été cerné.
+
+### 4.1 Develop : diverger les solutions autour du problème central
+
+L'accent de la phase Develop est de **plorer plusieurs solutions possibles pour le même problème**.
+
+Notez que cette divergence est différente de celle de la phase Discover.
+
+- La divergence de Discover explore l'espace des problèmes
+- La divergence de Develop explore l'espace des solutions
+
+Par exemple, pour le cas du compte rendu de réunion, en phase Develop, vous pouvez commencer à penser :
+
+- Faire un outil web ou un plugin de réunion
+- Traiter après upload de l'enregistrement ou faire une prise de notes en temps réel
+- Ne faire que des résumés ou se concentrer sur l'extraction des tâches
+- Mettre l'accent sur l'efficacité individuelle ou la synchronisation d'équipe
+- Donner aux utilisateurs la liberté d'éditer ou produire directement un modèle structuré
+
+Cette étape se prête bien au brainstorming, et aussi à l'élargissement des solutions avec l'équipe.
+
+Mais il y a un prérequis : **toutes les solutions doivent servir le même problème déjà défini.**
+Si le problème n'est pas clairement défini, Develop risque de redevenir une dispersion de fonctionnalités.
+
+### 4.2 Deliver : choisir la solution, faire le prototype, tester et livrer
+
+La phase Deliver est l'étape de convergence du deuxième diamant.
+
+Ce qu'il faut faire ici n'est pas de continuer à imaginer plus, mais de commencer à juger :
+
+- Quelle solution est la plus adaptée à la phase actuelle
+- Quelle version est la plus petite mais la plus utile
+- Quelles fonctionnalités sont essentielles d'abord, lesquelles peuvent attendre
+- Comment prototyper, tester et valider à petite échelle
+
+Beaucoup de gens pensent que Deliver équivaut à « mise en ligne ». En réalité, son sens plus précis est : **transformer une solution en quelque chose de testable, de validable et d'itérable.**
+
+Cela peut être :
+
+- Un flux basse fidélité
+- Un prototype Figma
+- Un MVP fonctionnel
+- Un test utilisateur à petite échelle
+- Une version itérée après des retours réels
+
+L'essentiel de Deliver n'est pas la « livraison parfaite », mais de **mettre la solution dans un environnement réel pour validation aussi rapidement que possible.**
+
+## 5. Un tableau comparatif facile à retenir
+
+Si vous n'arrivez jamais à distinguer les quatre phases, retenez simplement cette version :
+
+| Phase | Ce que vous faites | Mots-clés | Produits courants |
+| --- | --- | --- | --- |
+| Discover | Comprendre le problème | Recherche, observation, entretiens, collecte d'informations | Insights utilisateurs, notes de contexte, liste de problèmes |
+| Define | Définir le problème | Synthèse, focalisation, compromis, reformulation | Définition du problème, priorités, point d'entrée MVP |
+| Develop | Explorer les solutions | Brainstorming, comparaison, co-création, hypothèses de prototype | Liste de solutions, schémas de flux, direction de prototype |
+| Deliver | Valider les solutions | Prototypage, tests, itération, livraison | Prototype, retours de test, version optimisée |
+
+Compressé encore plus, cela donne :
+
+- **Discover / Define** : résoudre « faire les bonnes choses »
+- **Develop / Deliver** : résoudre « faire les choses correctement »
+
+## 6. Les malentendus les plus courants sur le modèle Double Diamond
+
+### 6.1 Passer directement à Deliver sans Discover
+
+C'est le cas le plus fréquent. Beaucoup de gens, à peine ont-ils une idée, se mettent à dessiner des prototypes, rédiger des PRD, intégrer des modèles, créer des pages.
+
+Le problème n'est pas que vous ne travaillez pas sérieusement, mais que vous n'avez peut-être même pas confirmé si le problème mérite d'être résolu.
+
+### 6.2 Faire beaucoup de Discover, mais jamais Define
+
+L'autre extrême est de toujours faire des recherches, lire des documents, interviewer, sans jamais oser converger.
+
+Le Double Diamond ne vous demande pas de diverger indéfiniment, mais vous rappelle : après la divergence, il faut entrer dans le jugement et les compromis.
+
+### 6.3 Après Define, modifier subrepticement le problème
+
+Beaucoup d'équipes, en phase Develop, modifient la définition du problème pour l'adapter à une solution plus facile à réaliser.
+
+C'est dangereux. Vous n'êtes peut-être plus en train de résoudre le problème, mais en train de trouver des justifications pour la solution que vous préférez.
+
+### 6.4 Confondre Deliver avec « mise en ligne complète »
+
+Deliver ne signifie pas qu'il faut terminer le produit complet. Très souvent, un prototype testable ou un essai utilisateur réel constitue déjà un bon deliver.
+
+## 7. Comment utiliser le modèle Double Diamond dans les produits AI
+
+Les produits AI tombent particulièrement facilement dans le piège du « capacités d'abord », parce que les capacités des modèles semblent très alléchantes. Vous aurez envie de penser directement :
+
+- Faut-il intégrer le multimodal
+- Faut-il faire un Agent
+- Faut-il ajouter des workflows
+- Faut-il intégrer la voix, l'image, la recherche en ligne
+
+Mais le modèle Double Diamond vous oblige à demander d'abord :
+
+- Où les utilisateurs sont-ils vraiment bloqués
+- Ce blocage nécessite-t-il absolument l'IA
+- Sans IA, qu'est-ce qui manque le plus dans les méthodes actuelles
+- Une fois l'IA ajoutée, quel est le progrès le plus essentiel
+
+Cela vous aide à éviter une situation courante : **capacités puissantes, valeur faible.**
+
+Un ordre pratique serait :
+
+1. En phase Discover, observer comment les utilisateurs gèrent les tâches actuellement
+2. En phase Define, écrire le scénario le plus douloureux en une définition de problème claire
+3. En phase Develop, comparer quelles capacités AI sont les plus adaptées à ce problème
+4. En phase Deliver, construire une version minimale et la faire tester par de vrais utilisateurs
+
+## 8. Un modèle Double Diamond prêt à l'emploi
+
+Si vous êtes en train de créer votre propre produit, vous pouvez suivre cet ordre :
+
+### Discover
+
+- Qui sont les utilisateurs que j'ai observés ?
+- Quand est la dernière fois qu'ils ont rencontré ce problème ?
+- Comment le résolvent-ils actuellement ?
+- Où est-ce le plus pénible, le plus lent, le plus angoissant ?
+
+### Define
+
+- Parmi tous ces problèmes, lequel mérite le plus d'être résolu en priorité ?
+- Quel scénario est le plus fréquent ou le plus crucial ?
+- Qui et quoi servirons-nous uniquement dans la première version ?
+- Une fois le problème résolu, quel sera le changement d'état de l'utilisateur ?
+
+### Develop
+
+- Pour ce problème, quelles solutions sont possibles ?
+- Quelles sont les plus légères, les plus rapides, les plus faciles à valider ?
+- Qu'est-ce qui est indispensable, qu'est-ce qui peut attendre ?
+
+### Deliver
+
+- Que pouvons-nous livrer au minimum pour valider cette direction ?
+- Un flux, un prototype, ou un MVP ?
+- Qui devons-nous trouver pour tester ?
+- Après le test, comment décider : continuer, modifier ou abandonner ?
+
+## 9. Un exemple compréhensible même par un débutant
+
+Supposons que vous voulez créer un outil AI pour « aider les étudiants à préparer leur CV de candidature ».
+
+Beaucoup de gens entreraient directement dans le deuxième diamant, commençant à penser :
+
+- Faut-il embellir en un clic
+- Faut-il faire de la réécriture intelligente
+- Faut-il faire correspondre automatiquement avec l'offre d'emploi
+- Faut-il générer une lettre de motivation
+
+Mais selon le modèle Double Diamond, un meilleur processus serait :
+
+### Premier diamant
+
+**Discover**
+
+- Aller parler aux diplômés récents pour savoir quand ils ont modifié leur CV pour la dernière fois
+- Voir comment ils transforment l'ancien CV en nouvelle version
+- Comprendre s'ils sont surtout gênés par « ne pas savoir écrire », « ne pas savoir modifier », ou « ne pas savoir juger si c'est bien »
+
+**Define**
+
+- Converger vers un problème plus spécifique :
+- Ce n'est pas « les étudiants ne savent pas faire de CV »
+- Mais « les étudiants qui postulent pour la première fois à un stage ont du mal à reformuler leurs expériences existantes en formulations adaptées au poste, ce qui les pousse à retarder leur candidature »
+
+### Deuxième diamant
+
+**Develop**
+
+- Imaginer plusieurs solutions : bibliothèque de modèles, réécriture AI, comparaison avec l'offre, notation du CV, exemples de référence
+
+**Deliver**
+
+- La première version ne fait que « reformuler les points d'expérience en fonction de la description du poste »
+- La faire tester par 5 étudiants, pour voir s'ils soumettent leur première version de CV plus rapidement
+
+Vous constaterez que, une fois le premier diamant bien fait, le deuxième devient beaucoup plus clair.
+
+## 10. Résumé
+
+La force du modèle Double Diamond réside dans le fait qu'il vous aide à décomposer un ensemble chaotique en quatre actions plus claires :
+
+- D'abord, diverger pour comprendre le problème
+- Puis, converger pour définir le problème
+- Ensuite, diverger pour explorer les solutions
+- Enfin, converger pour livrer la solution
+
+Il ne vous ralentit pas, il vous fait **gagner les détours qui donnent l'impression d'être occupé mais vont dans la mauvaise direction.**
+
+Surtout à l'ère de l'IA, où créer des choses devient de plus en plus rapide, le modèle Double Diamond devient encore plus important. Parce que quand « produire » devient de plus en plus facile, la capacité vraiment rare sera : **êtes-vous en train de résoudre un problème qui mérite d'être résolu, et le faites-vous de la bonne manière.**
+
+Retenez juste cette phrase :
+
+**Faites d'abord les bonnes choses, puis faites les choses correctement.**
+
+<a id="dd-ai"></a>
+## [11. Comment utiliser l'IA pour piloter votre processus Double Diamond](#top-dd)
+
+Le modèle Double Diamond n'est pas un outil AI en soi, mais l'IA est très bien adaptée pour servir d'« accélérateur » dans les quatre phases. L'essentiel n'est pas de laisser l'IA décider à votre place, mais de l'utiliser pour élargir votre vision, organiser les informations, comparer les solutions et générer du matériel de validation.
+
+### 11.1 En phase Discover, utilisez l'IA pour préparer le terrain
+
+Avant les entretiens et la recherche formels, vous pouvez demander à l'IA de faire un balayage léger des problèmes, comme :
+
+- Quelles alternatives existent sur le marché
+- De quoi les utilisateurs se plaignent-ils le plus dans les communautés publiques
+- Dans quels contextes et pour quels publics ce problème est-il courant
+- Que les produits existants négligent-ils souvent
+
+Cette étape ne remplace pas la recherche terrain, mais elle est idéale pour construire rapidement une carte des problèmes.
+
+Une entrée très simple pour un débutant pourrait être :
+
+```text
+Je veux créer un outil pour aider les étudiants à modifier leur CV.
+Ne me proposez pas de fonctionnalités, aidez-moi d'abord à voir quels problèmes les gens rencontrent le plus souvent.
+```
+
+L'IA pourrait répondre :
+
+```text
+Carte préliminaire des problèmes :
+
+1. Ne sait pas quelles expériences mentionner
+2. Ne sait pas comment adapter le CV pour chaque poste
+3. Après de nombreuses modifications, on n'est toujours pas sûr que c'est bien
+4. On a besoin de quelqu'un pour relire, mais on ne veut pas déranger
+5. Parce qu'on n'est pas sûr, on retarde l'envoi
+```
+
+Ce type de résultat ne remplace pas vos conclusions, mais vous permet d'entrer plus vite dans le Discover.
+
+### 11.2 En phase Define, laissez l'IA vous aider à converger vers une définition du problème
+
+Beaucoup de gens, après avoir collecté beaucoup de matériel, trouvent la partie la plus difficile de condenser le problème en une phrase vraiment claire. Vous pouvez confier vos notes de recherche à l'IA et lui demander de les compresser en plusieurs définitions candidates :
+
+```text
+Voici les retours utilisateurs et les notes de recherche que j'ai collectés en phase Discover :
+[insérez le contenu]
+
+Merci de m'aider à faire trois choses :
+1. Identifier les modèles de problèmes les plus fréquents
+2. Classer 3 problèmes prioritaires par fréquence, intensité de douleur et validabilité
+3. Écrire chaque problème en une définition spécifique
+```
+
+Vous pouvez même écrire une entrée très simple :
+
+```text
+Les problèmes que j'ai collectés sont :
+1. Les gens ne savent pas quoi mettre dans leur CV
+2. Les gens ne savent pas comment le modifier
+3. Les gens trouvent toujours que ce n'est pas assez bien et n'osent pas l'envoyer
+
+Lequel est le plus adapté pour une première version ?
+```
+
+L'IA pourrait répondre :
+
+```text
+Problème recommandé en priorité :
+
+« Les étudiants qui postulent pour la première fois à un stage ne sont pas sûrs que leur CV est au niveau requis pour être envoyé, ce qui les pousse à modifier sans cesse et à retarder leur candidature. »
+
+Raisons :
+1. Ce problème est plus spécifique
+2. Il explique le comportement de procrastination
+3. Il est plus facile de concevoir une petite version pour le valider
+```
+
+Ce type de résultat est utile parce qu'il vous aide à passer d'un ensemble de problèmes flous à une définition plus proche d'un point de départ MVP.
+
+### 11.3 En phase Develop, utilisez l'IA pour diverger sur plusieurs solutions
+
+Beaucoup de gens, une fois le problème défini, ne se concentrent que sur la première solution qui leur vient à l'esprit. L'IA est idéale ici pour vous forcer à diverger :
+
+```text
+J'ai défini un problème central : [votre définition du problème]
+Ne me donnez pas une seule réponse finale, mais proposez 2-3 directions de solution pour chacun des angles suivants :
+1. Le MVP le plus léger
+2. La solution la plus adaptée pour valider le besoin
+3. La solution la plus adaptée pour améliorer l'expérience
+4. Une solution sans IA
+5. Une solution avec IA
+Enfin, comparez les avantages, les risques et les coûts de validation de chaque solution.
+```
+
+Ainsi, vous ne vous enfermerez pas trop tôt dans une seule solution.
+
+Une entrée simple pourrait être :
+
+```text
+Ma définition du problème est :
+« Les étudiants ne sont pas sûrs que leur CV est prêt à être envoyé, donc ils retardent. »
+
+Proposez-moi 4 solutions différentes, pas une seule.
+```
+
+L'IA pourrait répondre :
+
+```text
+Solution 1 : Checklist de validation du CV
+Solution 2 : Réécriture ciblée en fonction de la description du poste
+Solution 3 : Upload du CV avec indicateurs de risque
+Solution 4 : Comparaison avec des exemples de qualité pour aider à évaluer l'écart
+```
+
+Vous êtes alors plus en mesure d'entrer dans la « comparaison de solutions » au lieu de ne vous concentrer que sur la réécriture AI.
+
+### 11.4 En phase Deliver, utilisez l'IA pour générer des textes de prototype et du matériel de test
+
+Quand vous entrez en phase Deliver, l'IA est très adaptée pour accélérer ces tâches :
+
+- Générer les textes de pages pour un prototype basse fidélité
+- Organiser un script de test utilisateur
+- Générer plusieurs versions comparables de titres, boutons, descriptions
+- Synthétiser les retours post-test en liste de problèmes
+
+Par exemple, vous pouvez demander à l'IA de générer un script de test utilisateur de 20 minutes, ou de classer les retours de 5 utilisateurs en « continuer / changer de direction / mettre en pause ».
+
+Une entrée minimale pourrait être :
+
+```text
+J'ai fait un prototype très simple :
+l'utilisateur uploade son CV, le système lui indique quels éléments ne sont pas encore prêts pour l'envoi.
+
+Générez-moi un script de test utilisateur de 15 minutes.
+```
+
+L'IA pourrait répondre :
+
+```text
+Script de test de 15 minutes :
+
+1. D'abord, demandez à l'utilisateur de décrire sa dernière expérience de candidature
+2. Laissez l'utilisateur uploader son CV de manière autonome
+3. Observez s'il comprend les résultats du retour
+4. Demandez : parmi ces indications, lesquelles sont les plus utiles, lesquelles sont confuses
+5. Demandez : avant la prochaine candidature, aimeriez-vous réutiliser cet outil
+```
+
+Ce type de résultat est pratique parce qu'il vous fait passer de « j'ai fini mon prototype » à « comment je le teste ensuite ».
+
+### 11.5 Laissez l'IA jouer le rôle de « gardien des phases »
+
+Le problème le plus courant du modèle Double Diamond est que les gens sautent les étapes. Vous pouvez demander à l'IA de jouer un gardien, pour vous rappeler où vous êtes vraiment :
+
+```text
+Merci de jouer le rôle de coach en processus produit.
+Voici l'état actuel de mon projet : [votre description]
+Déterminez si je suis plutôt en Discover, Define, Develop ou Deliver.
+Et dites-moi :
+1. Est-ce que j'ai sauté une étape trop tôt
+2. Quelle est l'action la plus importante à compléter à l'étape actuelle
+3. Quelles choses je ne dois pas faire pour l'instant
+```
+
+C'est particulièrement utile pour les débutants, car il est facile de « commencer à dessiner des prototypes avant d'avoir clarifié le problème ».
+
+## 📚 Exercices
+
+En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
+
+1. Choisissez une idée produit que vous avez récemment, et rédigez le brouillon des quatre étapes Discover, Define, Develop, Deliver
+2. En phase Define, forcez-vous à réduire le problème à une phrase spécifique
+3. En phase Develop, listez au moins 3 solutions différentes, au lieu de ne vous concentrer que sur la première idée venue
+4. En phase Deliver, écrivez une version minimale validable livrable en une semaine
+
+## Lectures complémentaires
+
+Cet article s'inspire principalement des ressources officielles du Design Council sur le Double Diamond, idéales pour approfondir :
+
+- [Design Council : The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
+- [Design Council : Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
+- [Design Council : History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
diff --git a/docs/fr-fr/stage-1/appendix-idea-sources/index.md b/docs/fr-fr/stage-1/appendix-idea-sources/index.md
new file mode 100644
index 0000000..d73e0eb
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-idea-sources/index.md
@@ -0,0 +1,301 @@
+---
+title: "Où trouver des idées : 3 sources de référence idéales pour les débutants"
+description: "Article d'introduction sur les sources d'idées produit pour les lecteurs débutants. Recense les sites web idéaux pour parcourir des idées, les sources de tendances, les sources d'activités réelles et les listes VC, pour vous aider à trouver rapidement une direction plus concrète à partir de liens."
+---
+
+<script setup>
+const duration = 'Environ <strong>1,5 heure</strong>'
+</script>
+
+# Où trouver des idées : 3 sources de référence idéales pour les débutants
+
+<a id="top-idea-sources"></a>
+
+## Introduction du chapitre
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Trouver des idées', 'Direction produit', 'Découverte de besoins', 'Observation sectorielle']"
+  coreOutput="1 direction produit plus concrète et digne d'investigation"
+  expectedOutput="Savoir où chercher, comment regarder, par quoi commencer — ne plus se contenter d'idées vides comme « AI + secteur X »"
+>
+
+Beaucoup de gens restent bloqués à la première étape, non pas parce qu'ils manquent totalement d'inspiration, mais parce qu'après avoir parcouru beaucoup de contenu, il ne reste dans leur esprit que de grands concepts :
+
+- AI for education
+- AI for healthcare
+- AI for finance
+- AI agent for business
+
+Ce ne sont pas encore des idées. Elles vous disent simplement « la direction est vaste », sans vous dire :
+
+- Qui l'utilise
+- Dans quel contexte
+- Comment les gens s'en sortent actuellement
+- Quelle étape mérite d'être attaquée en premier
+
+Cet article ne présente pas de méthodologie abstraite, mais compile directement un ensemble de sources plus utiles.
+
+</ChapterIntroduction>
+
+::: info SOP minimale
+**Objectif** : après avoir lu, vous saurez où aller chercher quand vous n'avez pas d'idées, quels liens consulter pour les « besoins concrets », lesquels pour les « tendances », et lesquels pour les « activités réelles ».
+
+**Actions** : parcourez d'abord une liste d'idées, puis consultez des petits produits rentables, ensuite les tendances et les sources plus opérationnelles, et enfin gardez 1 direction que vous êtes prêt à approfondir.
+
+**Résultat** : vous obtiendrez 1 direction plus concrète, digne de validation, au lieu de rester sur de grands concepts.
+
+**Navigation rapide** : [Liste d'applications de référence](#idea-apps) · [Sources de tendances](#idea-trends) · [Sources plus opérationnelles](#idea-business) · [Sources VC / accélérateurs](#idea-vc) · [Chemin le plus court](#idea-path) · [Comment l'IA peut vous aider](#idea-ai)
+:::
+
+## Ce que vous apprendrez
+
+1. Quels sites web sont idéaux pour parcourir directement des idées
+2. Quels sites permettent de voir des petits produits déjà rentables
+3. Quelles sources conviennent pour observer les tendances et les évolutions sectorielles
+4. Quelles sources sont plus proches des activités réelles et des paiements réels
+5. Un chemin le plus court adapté aux débutants
+
+<a id="idea-apps"></a>
+## [1. Liste d'applications de référence : voyez d'abord ce que les autres font déjà](#top-idea-sources)
+
+C'est le meilleur point de départ pour les débutants, car c'est le plus concret.
+
+### Premier niveau : des listes d'idées directement accessibles
+
+- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+  L'utilisation principale de ce subreddit est : de vrais utilisateurs postent directement « j'aimerais que quelqu'un crée un XX ». Chaque post est généralement un besoin produit concret, souvent accompagné d'une description de contexte. Triez par `Top -> Past Month` ou `Top -> Past Year`, et en 20 minutes vous pourrez balayer un ensemble de besoins réels.
+- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+  Similaire au précédent, mais plus orienté logiciel/App. Le format courant est « j'ai besoin d'une application qui fait XX », avec un niveau de détail plus fin, beaucoup de niches petites mais intéressantes.
+- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+  Plus complet que les deux précédents. Beaucoup de posts ne sont pas qu'une seule phrase de besoin, mais incluent une analyse de marché, un modèle économique et pourquoi c'est le bon moment.
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+  Publie chaque semaine des idées de startup non validées. Les champs courants incluent le public cible, le mode de monétisation et les pistes de validation initiale. Format uniforme, idéal pour un parcours rapide.
+- [IdeasAI](https://ideasai.com/)
+  Génère des idées de startup par AI, on peut naviguer indéfiniment. La qualité est inégale, mais c'est parfait pour stimuler l'inspiration quand on est « complètement bloqué », avant de creuser soi-même dans des scénarios plus spécifiques.
+
+### Deuxième niveau : voyez les petits produits rentables que d'autres ont déjà créés, et déduisez des idées
+
+La logique de ces plateformes est : d'autres ont déjà validé le besoin, voire gagnent déjà de l'argent. Vous les consultez non pas pour copier, mais pour voir « quels petits problèmes génèrent déjà des paiements ».
+
+- [Starter Story](https://www.starterstory.com/)
+  Recueille de nombreux cas réels de petites entreprises, généralement avec des interviews de fondateurs, des données de revenus et le processus de démarrage. Concentrez-vous sur les petits produits avec des revenus mensuels de 10 000 à 100 000 dollars — généralement plus niche et plus proches d'une échelle de produit compréhensible par tous.
+- [Indie Hackers — Products](https://www.indiehackers.com/products)
+  Là où les développeurs indépendants présentent leurs produits, beaucoup publient leurs revenus et leur croissance. Triez par revenus et regardez quels problèmes concrets résolvent les produits générant quelques milliers à quelques dizaines de milliers de dollars par mois.
+- [MicroConf Blog](https://microconf.com/blog)
+  Plutôt orienté Micro SaaS. Idéal pour voir des « produits assez petits, mais pour lesquels les gens sont prêts à payer ».
+- [1000 Tools](https://1000.tools/)
+  Agrégateur d'outils AI. Utile pour voir quelles catégories sont déjà occupées mais avec une qualité moyenne, ou quelles directions ne sont pas encore bien couvertes dans un pays ou un secteur vertical.
+- [Product Hunt](https://www.producthunt.com/)
+  Observez les types de produits qui apparaissent de manière récurrente, ne vous limitez pas au numéro 1 — regardez surtout les catégories où les gens continuent de créer sans qu'il n'y ait encore de gagnant clair.
+- [BetaList](https://betalist.com/)
+  Idéal pour découvrir des produits en phase précoce et des équipes encore en exploration.
+
+### Quand vous examinez les produits, ne regardez pas seulement le produit lui-même — regardez aussi les avis négatifs et les « services de substitution »
+
+- [G2](https://www.g2.com/)
+  Utilisation : regardez les avis 1 et 2 étoiles. Les avis négatifs cachent souvent « quelle étape du produit existant est mal faite ».
+- [Capterra](https://www.capterra.com/)
+  Utilisation : similaire à G2, adapté pour voir les plaintes réelles sur les produits SaaS.
+- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhu Ba Jie
+  Utilisation : cherchez « faire à votre place », « saisie à votre place », « retranscription à votre place ». Si un certain service manuel se vend bien, il y a généralement derrière un processus reproductible et productisable.
+
+Les signaux à repérer sont simples :
+
+- Les utilisateurs se plaignent déjà des outils existants
+- Les utilisateurs paient déjà pour des services de substitution
+- Les utilisateurs ont déjà investi beaucoup de main-d'œuvre et de temps dans ce processus
+
+### Quatrième niveau : regardez des vidéos, certains font le travail de décomposition d'idées pour vous
+
+Si vous n'aimez pas parcourir des forums et des classements, et préférez « quelqu'un qui décompose les idées pour moi », alors les vidéos et les podcasts sont aussi très adaptés.
+
+- Recherchez `Greg Isenberg startup ideas`
+  Idéal pour voir quelqu'un décomposer directement 2 à 3 idées concrètes, avec un aperçu du marché, une analyse concurrentielle et un angle d'attaque.
+- Recherchez `My First Million podcast`
+  Les deux animateurs font souvent des épisodes entiers de brainstorming d'idées business, à haute densité, avec souvent des niches très concrètes.
+- Recherchez `YC startup ideas` ou `Michael Seibel startup ideas`
+  Adapté aux débutants, contenu direct, beaucoup expliquent comment choisir une direction.
+
+<a id="idea-trends"></a>
+## [2. Sources de tendances : voir quelles directions sont en croissance](#top-idea-sources)
+
+Les sites de tendances ne vous donnent pas directement des idées, mais vous aident à juger : une direction est-elle en train de monter, mérite-t-on d'y regarder de plus près.
+
+- [Exploding Topics](https://explodingtopics.com/)
+  Utilise les données pour suivre les sujets et catégories de produits en croissance rapide mais pas encore entrés dans le grand public. Idéal pour voir les directions « en montée mais pas encore bondées ».
+- [Google Trends](https://trends.google.com/)
+  Recherchez un mot-clé, regardez la courbe de tendance sur l'année écoulée, puis consultez les « requêtes associées » avec les termes « en hausse ».
+- [Glimpse](https://meetglimpse.com/)
+  Similaire à Google Trends.
+- Pages de synthèse de rapports sectoriels
+  Adapté quand vous avez déjà une direction et voulez rapidement voir sa position dans le secteur.
+- Contenu de tendances de McKinsey / BCG / Gartner
+  Plus orienté entreprises et grandes industries, adapté au B2B, à l'industrie et aux secteurs traditionnels.
+- [State of AI Report](https://www.stateof.ai/)
+  Si votre direction est liée à la technologie AI elle-même, ce type de rapport annuel est idéal pour établir une vue d'ensemble.
+
+En regardant les tendances, concentrez-vous sur trois choses seulement :
+
+- Le terme est-il en croissance continue
+- Dans quel scénario concret s'inscrit-il
+- Qui sera le premier à y consacrer du temps, des coûts de changement ou un budget
+
+<a id="idea-business"></a>
+## [3. Sources plus opérationnelles : voir qui dépense, qui se plaint, qui vend des services manuels](#top-idea-sources)
+
+Si vous cherchez non pas une direction « qui a l'air cool » mais une direction « plus proche des activités réelles », il faut consulter des sources plus proches des flux de travail.
+
+### Voir qui dépense vraiment et pour quoi
+
+- [China Government Procurement Network](https://www.ccgp.gov.cn/)
+  Utilisation : cherchez des termes comme « chantier intelligent », « système de gestion de laboratoire », « collecte de données », « gestion de clinique », « système de devis », et examinez les budgets, les exigences techniques et les scénarios d'utilisation.
+- Centres d'échange de ressources publiques de chaque province et ville
+  Utilisation : voyez quels systèmes les gouvernements locaux et les entreprises d'État achètent réellement.
+- Bi Biao Wang / Qianlima Tender Network / Biao Shi Tong
+  Utilisation : voyez les besoins d'achat côté entreprise et les types de systèmes à haute fréquence.
+
+Le signal fort de ces sources est : il ne s'agit pas de discussions sur l'avenir, mais de la révélation que « aujourd'hui déjà, quelqu'un est prêt à payer pour cette chose ».
+
+### Voir de quoi les gens se plaignent vraiment
+
+- Industrie manufacturière : communautés de mécanique, forums d'automatisation industrielle
+- Santé : Dingxiangyuan, Yimaitong
+- Construction / Ingénierie : Tumu Online, forums Guanglianda
+- Finance / Comptabilité : Forum China Accounting Vision
+- Commerce extérieur : Forum Fubu Foreign Trade, Mike Quan
+- Restauration / Commerce de détail : Zhiye Catering Network, Lianshang Wang Forum
+- Sections verticales de [Reddit](https://www.reddit.com/) : `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
+- [V2EX](https://www.v2ex.com/)
+- Jike
+- Xiaohongshu
+
+Ne cherchez pas seulement « AI » ou « innovation » — ce qui est plus efficace, c'est de chercher :
+
+- C'est trop compliqué
+- Y a-t-il une meilleure méthode
+- Recommandez un outil
+- Excel ne suffit plus
+- I wish there was
+- is there a tool for
+- I hate
+
+### Voir qui vend des services manuels répétitifs
+
+- [Fiverr](https://www.fiverr.com/)
+- [Upwork](https://www.upwork.com/)
+- Zhu Ba Jie Wang
+- Taobao
+- Xianyu
+
+Si vous voyez que ces services se vendent bien, ça vaut la peine d'investiguer :
+
+- Transformer vos devis PDF en Excel
+- Organiser en masse vos données clients
+- Modifier votre CV / corriger vos textes / faire des transcriptions / archiver
+
+Derrière ces services, il n'y a généralement pas un besoin ponctuel, mais un flux de travail qui se répète.
+
+### Regarder les flux de travail complets, pas seulement les listes d'idées
+
+Parfois, la méthode la plus directe est de choisir un secteur, d'examiner ses processus, et de trouver les étapes qui dépendent encore de WeChat, Excel, papier-crayon et téléphone.
+
+- Commerce extérieur : trouver des fournisseurs, demande de prix, comparaison, création de devis, envoi aux clients, suivi des réponses, organisation des inspections, réservation de fret, dédouanement.
+  Angle d'attaque intéressant : transformer les devis fournisseurs en devis clients.
+- Cliniques dentaires : accueil, radiographie, lecture des radios, discussion du plan de traitement, suivi, traitement, rendez-vous de contrôle.
+  Angle d'attaque intéressant : expliquer le plan au patient et assurer un suivi continu.
+- Chantiers de construction : inspection, photos, envoi dans le groupe, compilation du rapport, transmission au client.
+  Angle d'attaque intéressant : des photos de terrain au rapport de conformité.
+
+<a id="idea-vc"></a>
+## [4. Sources VC / accélérateurs : voir « dans quelle direction souffle le vent »](#top-idea-sources)
+
+Ce type de source vous aide à trouver de grandes directions, mais ne remplace pas la validation.
+
+- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
+  Utilisation : idéal pour trouver des angles d'attaque, car il indique souvent directement « nous aimerions voir quelqu'un créer ça ».
+- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
+  Utilisation : plus orienté grandes tendances et jugement de secteur, idéal pour se faire une sensibilité sectorielle.
+- [NFX](https://www.nfx.com/)
+  Utilisation : idéal pour balayer rapidement un ensemble de sujets de startup.
+- [Sequoia Capital](https://www.sequoiacap.com/article/)
+  Utilisation : ne liste pas nécessairement des idées directement, mais parle souvent de changements de plateforme et d'opportunités.
+- [First Round Review](https://review.firstround.com/)
+  Utilisation : idéal pour approfondir une direction, pas forcément une liste d'idées, mais la qualité des articles est généralement excellente.
+
+Avantages de ces sources :
+
+- Elles peuvent vous dire quelles directions méritent d'être suivies à l'avenir
+- Elles peuvent vous dire quels secteurs pourraient continuer à être poussés
+- Elles vous permettent d'entrer rapidement dans le jargon d'un secteur
+
+Limites de ces sources :
+
+- Généralement du point de vue des investisseurs
+- Ne vous disent pas nécessairement quel rôle souffre le plus
+- Ne vous disent pas nécessairement quelle étape du processus est la plus bloquante
+- Ne vous disent pas nécessairement qui paie déjà pour ça aujourd'hui
+
+Donc la meilleure utilisation est : utilisez-les d'abord pour trouver une direction, puis revenez aux produits de référence, aux forums sectoriels, aux informations d'achat et aux flux de travail réels pour trouver des angles d'attaque plus concrets.
+
+<a id="idea-path"></a>
+## [5. Le chemin le plus court pour ceux qui « n'ont pas d'idées et ne savent faire que des assistants »](#top-idea-sources)
+
+Si vous ne prenez qu'un seul chemin le plus court, voici comment faire :
+
+1. Première étape, 30 minutes.
+   Ouvrez [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/), triz par `Top -> Past Year`, balayez rapidement 50 posts, et sauvegardez toutes les directions où vous vous dites « ça, je pourrais peut-être le faire ».
+2. Deuxième étape, 30 minutes.
+   Ouvrez [Starter Story](https://www.starterstory.com/) ou [Indie Hackers Products](https://www.indiehackers.com/products), triez par revenus, regardez les produits à revenus moyens, pas seulement les plus performants. Trouvez des directions liées à la première étape, et voyez à qui ils vendent exactement et quelle étape ils résolvent.
+3. Troisième étape, 20 minutes.
+   Allez sur [Google Trends](https://trends.google.com/) et cherchez les mots-clés associés, voyez si la tendance est à la hausse, puis regardez les termes « en hausse » dans les « requêtes associées ».
+4. Quatrième étape, 20 minutes.
+   Allez sur G2 / Capterra / forums sectoriels / plateformes d'appels d'offres / Fiverr et autres, pour voir où exactement cette direction est la plus pénible aujourd'hui, et où on dépend encore du travail manuel.
+
+Après ce parcours, être capable de formuler clairement cette phrase suffit :
+
+- Un certain type de personne, dans un certain contexte, est bloqué par une certaine étape du processus, et s'en sort principalement avec une méthode de fortune.
+
+<a id="idea-ai"></a>
+## [6. Comment l'IA peut vous aider](#top-idea-sources)
+
+L'accent ici n'est pas sur l'IA, mais l'IA est très adaptée pour organiser.
+
+Les deux utilisations les plus pratiques sont :
+
+- Collez à l'IA les liens, titres de posts et propos d'utilisateurs que vous avez trouvés, et demandez-lui de les classer par « population / contexte / point de douleur / alternative ».
+- Demandez à l'IA de condenser un ensemble d'informations dispersées en 3 directions candidates, au lieu de continuer à diverger en 50 fonctionnalités.
+
+Vous pouvez demander directement :
+
+```text
+Voici les sources que j'ai consultées récemment :
+1. [collez le titre ou la citation]
+2. [collez le titre ou la citation]
+3. [collez le titre ou la citation]
+
+Ne me donnez pas de liste de fonctionnalités.
+Faites seulement trois choses :
+1. Classifiez par population et contexte
+2. Identifiez les étapes problématiques qui reviennent
+3. Aidez-moi à organiser le tout en 3 directions candidates plus concrètes
+```
+
+## Lectures complémentaires
+
+- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
+- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
+- [NFX](https://www.nfx.com/)
+- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+- [Starter Story](https://www.starterstory.com/)
+- [Indie Hackers - Products](https://www.indiehackers.com/products)
+- [Product Hunt](https://www.producthunt.com/)
+- [BetaList](https://betalist.com/)
+- [IdeasAI](https://ideasai.com/)
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+- [Google Trends](https://trends.google.com/)
+- [Exploding Topics](https://explodingtopics.com/)
+- [G2](https://www.g2.com/)
+- [Capterra](https://www.capterra.com/)
diff --git a/docs/fr-fr/stage-1/appendix-industry-scenarios/index.md b/docs/fr-fr/stage-1/appendix-industry-scenarios/index.md
new file mode 100644
index 0000000..2aa207a
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-industry-scenarios/index.md
@@ -0,0 +1,698 @@
+---
+title: "Références de scénarios d'application B2B"
+description: "Ce document recense les applications concrètes des modèles LLM dans les scénarios d'entreprise B2B, couvrant l'industrie manufacturière, le service client intelligent, l'éducation, la programmation assistée par IA, la santé, la cybersécurité, la finance, les services d'entreprise et d'autres domaines, offrant une référence aux développeurs d'applications IA destinées aux clients professionnels."
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'Environ <strong>6 heures</strong>'
+
+const interestPoint = ref('')
+const purpose = ref('')
+
+// Pool de sujets par industrie
+const topicPool = {
+  'manufacturing': [
+    { title: "Plateforme d'aide au design extérieur de bus électriques par IA", desc: "Conception de design conceptuel basée sur des modèles de génération d'images" },
+    { title: "Assistant intelligent de conception et vérification de plans", desc: "Construction d'une base de connaissances de normes de conception d'entreprise via RAG" },
+    { title: "Génération automatique et gestion de documentation technique", desc: "Génération automatique de spécifications produit et de manuels d'utilisation basée sur LLM" },
+    { title: "Assistant de génération automatique de rapports d'inspection d'équipements", desc: "Description vocale de l'état des équipements, génération structurée de rapports d'inspection" },
+    { title: "Assistant Q&R de diagnostic de pannes d'équipements industriels", desc: "Construction d'une base de connaissances vectorielle basée sur les historiques de pannes" }
+  ],
+  'customer-service': [
+    { title: "Système de réponse automatique multicanal et génération de tickets", desc: "Intégration multi-canal, LLM compréhend l'intention et génère la réponse" },
+    { title: "Assistant de prospection et suivi de prospects potentiels", desc: "Analyse des historiques de conversations pour identifier les prospects à forte intention" },
+    { title: "Système de recherche intelligente et Q&R de connaissances internes", desc: "Construction d'une base de connaissances vectorielle à partir de documents internes" },
+    { title: "Outil de résumé intelligent de conversations et génération de tickets", desc: "Génération automatique de résumés de session et extraction d'informations clés" },
+    { title: "Système de recommandation de scripts de service client", desc: "Analyse des cas exemplaires, extraction de modèles de scripts performants" }
+  ],
+  'education': [
+    { title: "Planification de parcours d'apprentissage linguistique personnalisé et système de tutorat intelligent", desc: "Évaluation du niveau de l'apprenant, planification des tâches quotidiennes" },
+    { title: "Plateforme de création automatique de plans de cours et de ressources pédagogiques", desc: "Génération de cadres de plans de cours basée sur le programme" },
+    { title: "Système de correction automatique et diagnostic de résultats scolaires", desc: "Correction automatique de questions ouvertes et génération de suggestions" },
+    { title: "Construction de modèles de compétences et cartographie d'apprentissage", desc: "Analyse des descriptions de postes pour extraire les compétences requises" },
+    { title: "Pratique orale de langues en scénarios individuels", desc: "LLM joue différents rôles pour des dialogues oraux" }
+  ],
+  'programming': [
+    { title: "Assistant de complétion de code et correction automatique de bugs", desc: "Plugin IDE fournissant des suggestions de complétion en temps réel" },
+    { title: "Plateforme de construction low-code et automatisation de processus", desc: "Description en langage naturel convertie en configuration low-code" },
+    { title: "Système de génération de tests unitaires", desc: "Analyse AST du code source, génération de tests aux limites" },
+    { title: "Outil d'analyse de code et migration entre langages", desc: "Analyse de la qualité du code et suggestions d'optimisation" },
+    { title: "Outil de génération automatique de code UI frontend", desc: "Reconnaissance d'images de maquettes, génération de CSS responsive" }
+  ],
+  'healthcare': [
+    { title: "Assistant intelligent d'interprétation de rapports médicaux", desc: "OCR pour identifier les indicateurs clés, interpréter les valeurs anormales" },
+    { title: "Conseiller en santé basé sur la recherche documentaire", desc: "Construction d'un graphe de connaissances médicales, réponses par RAG" },
+    { title: "Plateforme d'analyse décisionnelle de données de recherche clinique", desc: "Intégration de données EMR, assistance à la génération de code d'analyse statistique" },
+    { title: "Outil de génération automatique de rapports d'imagerie médicale", desc: "Description des caractéristiques d'imagerie, génération automatique de rapports structurés" },
+    { title: "Assistant intelligent de rappels médicamenteux pour maladies chroniques", desc: "Génération de rappels personnalisés, vérification des contre-indications" }
+  ],
+  'security': [
+    { title: "Moteur de détection et correction de vulnérabilités de code", desc: "Analyse SAST du code, analyse des principes de vulnérabilité" },
+    { title: "Système de détection et interception de phishing par IA", desc: "Analyse du contenu des e-mails, identification des tentatives de phishing générées par IA" },
+    { title: "Assistant de génération automatique de rapports quotidiens de sécurité", desc: "Consolidation des journaux, extraction automatique des événements clés" },
+    { title: "Assistant de génération intelligente de rapports de tests de pénétration", desc: "Génération automatique de rapports basée sur les descriptions de vulnérabilités" },
+    { title: "Assistant de recherche et d'analyse de renseignements sur les menaces", desc: "Connexion à des sources multiples de renseignements sur les menaces" }
+  ],
+  'finance': [
+    { title: "Assistant intelligent de génération de rapports de due diligence", desc: "Saisie de données financières, génération automatique de rapports de due diligence" },
+    { title: "Conseiller intelligent en gestion de patrimoine bancaire privé", desc: "Analyse du profil de risque du client, génération de suggestions d'allocation d'actifs" },
+    { title: "Assistant de génération et vérification de conformité de prospectus IPO", desc: "Modèles modulaires, remplissage automatique des descriptions commerciales" },
+    { title: "Système de génération automatique de rapports financiers et d'alertes d'anomalies", desc: "Génération automatique d'analyses financières et de discussions de la direction" },
+    { title: "Assistant de simulation de scripts pour agents d'assurance", desc: "Simulation de dialogues, évaluation de la conformité et de la force de persuasion" }
+  ],
+  'enterprise': [
+    { title: "Plateforme de vérification de conformité et suggestions de modification pour le cycle de vie des contrats", desc: "Comparaison des clauses avec le référentiel réglementaire, génération de rapports de conformité" },
+    { title: "Transcription vocale de ventes et recommandation de scripts", desc: "Transcription ASR, analyse des conversations et recommandation de scripts performants" },
+    { title: "Système de génération intelligente de contenu marketing", desc: "Génération de textes marketing et extraction de points de vente" },
+    { title: "Plateforme d'analyse des dépenses publicitaires des concurrents", desc: "Collecte des publicités concurrentes, analyse des stratégies de diffusion" },
+    { title: "Système d'analyse et de recommandation de sujets tendances", desc: "Analyse des tendances et recommandation d'angles de sujets" }
+  ],
+  'content': [
+    { title: "Plateforme d'aide à la création de contenu pour films et romans", desc: "Fourniture de synopsis, développement de personnages, génération de dialogues" },
+    { title: "Assistant intelligent de rédaction d'histoires de marque et de RP", desc: "Saisie de mots-clés de marque, génération de textes multi-styles" },
+    { title: "Système de gestion d'interaction et de diffusion en direct par avatar numérique", desc: "Avatar numérique + synthèse vocale TTS + dialogue LLM" },
+    { title: "Génération de scripts vidéo courts et montage intelligent", desc: "Génération de scripts et storyboards pour vidéos courtes" },
+    { title: "Système de génération intelligente de contenu marketing", desc: "Génération de textes marketing et extraction de points de vente" }
+  ],
+  'government': [
+    { title: "Système de navigation vocale intelligente et de répartition automatique pour la ligne d'assistance 12345", desc: "Reconnaissance vocale, compréhension des demandes et répartition intelligente" },
+    { title: "Robot d'accueil et de questions-réponses sur les services administratifs", desc: "Recherche RAG dans la base de connaissances gouvernementales" },
+    { title: "Plateforme de correspondance et de diffusion ciblée de politiques de soutien aux entreprises", desc: "Appariement automatique des profils d'entreprises avec les politiques applicables" },
+    { title: "Assistant de pré-examen des documents administratifs et de vérification de conformité", desc: "OCR et extraction d'informations clés" },
+    { title: "Plateforme d'identification et de gestion des événements urbains", desc: "Identification du type d'événement et répartition" }
+  ],
+  'legal': [
+    { title: "Agent de détection de risques contractuels en un clic", desc: "Identification des problèmes potentiels par comparaison avec une liste de contrôle" },
+    { title: "Conseiller IA d'évaluation du taux de succès de litiges similaires", desc: "Extraction de caractéristiques de cas, recherche et correspondance de cas similaires" },
+    { title: "Radar de surveillance en temps réel des changements législatifs", desc: "Analyse des modifications et évaluation de l'impact commercial" },
+    { title: "Outil AIGC de rédaction automatique de lettres de mise en demeure", desc: "Saisie des faits, génération de modèles de lettres de mise en demeure normalisées" },
+    { title: "Plugin de traduction en langage simple de clauses juridiques complexes", desc: "Génération d'explications accessibles" }
+  ],
+  'travel': [
+    { title: "Générateur d'itinéraires paresseux basé sur l'AIGC", desc: "Génération d'itinéraires quotidiens" },
+    { title: "Robot de prédiction de tendances de prix de vols et d'hôtels et verrouillage automatique des prix bas", desc: "Modèle ML de prédiction des tendances de prix" },
+    { title: "Système de pré-examen des documents de visa et d'aide au remplissage automatique", desc: "Vérification OCR de l'exhaustivité des informations" },
+    { title: "Assistant de traduction vocale en temps réel et de visualisation de menus en voyage", desc: "Traduction vocale hors ligne, OCR de photos de menus" },
+    { title: "Assistant de génération de récits de voyage et de posts sociaux à partir de traces de voyage", desc: "Extraction d'informations de photos, génération de textes de récits" }
+  ],
+  'emotion': [
+    { title: "Compagnon virtuel d'accompagnement profond 24h/24 basé sur les LLM", desc: "Système de mémorisation stockant l'historique des conversations" },
+    { title: "Conseiller AI de reconnaissance émotionnelle multimodale et d'accompagnement psychologique", desc: "Analyse du ton vocal + reconnaissance émotionnelle textuelle" },
+    { title: "Agent numérique de rééducation cognitive et de stimulation mnésique pour personnes atteintes de la maladie d'Alzheimer", desc: "Jeux cognitifs, stimulation par vieilles photos" },
+    { title: "Coach de simulation sociale AIGC pour personnes souffrant d'anxiété sociale", desc: "Simulation de scénarios sociaux virtuels" },
+    { title: "Assistant de suivi d'humeur 24h/24 et de motivation positive par IA", desc: "Analyse des tendances d'humeur et génération de contenu motivant" }
+  ],
+  'entertainment': [
+    { title: "Moteur de décision autonome de PNJ pour jeux en monde ouvert basé sur les LLM", desc: "Arbre de comportement des PNJ fusionné avec les décisions LLM" },
+    { title: "Outil AIGC de progression narrative et d'assistance MJ pour murder games immersifs", desc: "Choix des joueurs déclenchant des branches narratives" },
+    { title: "Modificateur génératif de fins pour fiction interactive", desc: "Les choix des lecteurs influencent le cours de l'histoire" },
+    { title: "Analyste visuel CV et commentateur intelligent de parties esport", desc: "Analyse en temps réel du gameplay" },
+    { title: "Système de génération automatique de livres audio multi-voix par TTS", desc: "Attribution de rôles textuels, génération de voix personnalisées" }
+  ],
+  'ecommerce': [
+    { title: "Outil de production en masse de fiches produit à fort taux de conversion par AIGC", desc: "Génération de textes vendeurs et de descriptions de scènes" },
+    { title: "Usine de génération de vidéos d'essayage virtuel par IA pour vêtements", desc: "Génération d'essayages virtuels" },
+    { title: "Assistant de traduction et d'adaptation multilingue LLM pour e-commerce transfrontalier", desc: "Traduction multilingue de descriptions de produits" },
+    { title: "Système de live shopping 24h/24 par avatar numérique AIGC", desc: "Avatar numérique + génération de scripts en temps réel" },
+    { title: "Moteur de détection de tendances et de prédiction de produits populaires par IA", desc: "Analyse des tendances, suggestions de sélection" }
+  ],
+  'energy': [
+    { title: "Analyse IA des comportements de consommation domestique et conseiller en économie d'énergie", desc: "Analyse des modes de consommation, génération de conseils d'économie" },
+    { title: "Système de détection CV de défauts de panneaux photovoltaïques par drone", desc: "Inspection par drone, analyse d'images thermoinfrarouges" },
+    { title: "Agent de prédiction de tendances de prix de l'énergie et de stratégie automatique de profit", desc: "Modèle de prédiction des prix, génération de stratégies" },
+    { title: "Assistant IA de comptabilisation automatique des émissions carbone et de génération de rapports ESG", desc: "Calcul des facteurs d'émission, génération de rapports ESG" },
+    { title: "Système IA de prévision de charge en conditions météorologiques extrêmes et de commande d'urgence", desc: "Modèle de prévision de charge, génération de stratégies d'ordonnancement" }
+  ],
+  'av-media': [
+    { title: "Outil IA d'identification de moments forts et de montage automatique de vidéos longues", desc: "Analyse du contenu vidéo, identification des images clés" },
+    { title: "Assistant IA de séparation intelligente du bruit de fond et d'amélioration vocale", desc: "Modèle de séparation audio, suppression du bruit de fond" },
+    { title: "Station de restauration 4K et colorisation IA pour images anciennes", desc: "Modèle de super-résolution, colorisation automatique" },
+    { title: "Système de doublage TTS de qualité professionnelle et contrôle des émotions", desc: "Modèle TTS multi-voix, contrôle émotionnel" },
+    { title: "Assistant de transcription intelligente et d'extraction de TODO à partir d'enregistrements de réunions", desc: "Séparation et transcription vocale de réunions multi-participants" }
+  ],
+  'ai-marketing': [
+    { title: "Moteur AIGC de rédaction automatique de posts viraux pour Xiaohongshu", desc: "Génération de posts sponsorisés, optimisation d'emojis" },
+    { title: "Outil IA de mise en page de supports marketing et d'adaptation multi-tailles", desc: "Association intelligente de modèles de supports" },
+    { title: "Plateforme AIGC de création de logos et de construction de charte VI", desc: "Génération créative de logos, génération de normes VI" },
+    { title: "Assistant de suivi des tendances et de génération d'idées marketing opportunistes", desc: "Analyse des angles marketing, génération de concepts créatifs" },
+    { title: "Outil AIGC de génération de scripts vidéo courts et d'aide au storyboard", desc: "Génération de scripts et de storyboards, conseils de tournage" }
+  ],
+  'data-intelligence': [
+    { title: "Outil de génération automatique de requêtes SQL en langage naturel", desc: "Conversion de requêtes en langage naturel en SQL" },
+    { title: "Système intelligent d'inventaire et de classification des actifs de données d'entreprise", desc: "Collecte de métadonnées, classification automatique" },
+    { title: "Moteur de détection automatique et de suggestions de correction d'anomalies de données", desc: "Moteur de règles + modèle ML de détection d'anomalies" },
+    { title: "Assistant de génération et de configuration de rapports intelligents", desc: "Génération conversationnelle de configurations de rapports" },
+    { title: "Assistant Q&R intelligent sur les indicateurs de données", desc: "Construction d'une base de connaissances à partir de documents de définition d'indicateurs" }
+  ]
+}
+
+// Table de correspondance des recommandations
+const recommendationMap = {
+  'creative-content': {
+    'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
+    'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
+    'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
+    'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
+  },
+  'tech-service': {
+    'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
+    'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
+    'improve-experience': ['customer-service', 'enterprise', 'programming'],
+    'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
+  },
+  'data-intel': {
+    'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
+    'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
+    'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
+    'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
+  },
+  'user-service': {
+    'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
+    'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
+    'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
+    'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
+  },
+  'industry-solution': {
+    'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
+    'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
+    'improve-experience': ['healthcare', 'education', 'government', 'travel'],
+    'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
+  }
+}
+
+const interestOptions = [
+  { label: 'Création de contenu', value: 'creative-content', desc: 'Textes, images, vidéos et autres contenus créatifs' },
+  { label: 'Outils techniques', value: 'tech-service', desc: 'Outils de développement, automatisation, assistance au code' },
+  { label: 'Analyse de données', value: 'data-intel', desc: 'Analyse de données, prévision, décision intelligente' },
+  { label: 'Expérience utilisateur', value: 'user-service', desc: 'Service client, marketing, expérience utilisateur' },
+  { label: 'Solutions sectorielles', value: 'industry-solution', desc: 'Applications approfondies dans des secteurs spécifiques' }
+]
+
+const purposeOptions = [
+  { label: 'Améliorer l\'efficacité', value: 'increase-efficiency', desc: 'Automatisation, accélération des processus' },
+  { label: 'Réduire les coûts', value: 'reduce-cost', desc: 'Réduction de la main-d\'œuvre, optimisation des ressources' },
+  { label: 'Améliorer l\'expérience', value: 'improve-experience', desc: 'Satisfaction client, qualité de service' },
+  { label: 'Innovation commerciale', value: 'innovate-business', desc: 'Nouveaux produits, nouveaux modèles' }
+]
+
+const industries = [
+  { key: 'manufacturing', name: 'Industrie manufacturière', anchor: '#_1-industrie-manufacturiere' },
+  { key: 'customer-service', name: 'Service client intelligent', anchor: '#_2-service-client-intelligent' },
+  { key: 'education', name: 'Éducation', anchor: '#_3-education' },
+  { key: 'programming', name: 'Programmation intelligente', anchor: '#_4-programmation-intelligente' },
+  { key: 'healthcare', name: 'Santé', anchor: '#_5-sante' },
+  { key: 'security', name: 'Cybersécurité', anchor: '#_6-cybersecurite' },
+  { key: 'finance', name: 'Finance, banque et assurance', anchor: '#_7-finance-banque-et-assurance' },
+  { key: 'enterprise', name: 'Services d\'entreprise', anchor: '#_8-services-dentreprise' },
+  { key: 'content', name: 'Production et exploitation de contenu', anchor: '#_9-production-et-exploitation-de-contenu' },
+  { key: 'government', name: 'Administration publique intelligente', anchor: '#_10-administration-publique-intelligente' },
+  { key: 'legal', name: 'Affaires juridiques et gestion contractuelle', anchor: '#_11-affaires-juridiques-et-gestion-contractuelle' },
+  { key: 'travel', name: 'Tourisme et voyages', anchor: '#_12-tourisme-et-voyages' },
+  { key: 'emotion', name: 'Accompagnement émotionnel', anchor: '#_13-accompagnement-emotionnel' },
+  { key: 'entertainment', name: 'Loisirs et divertissement', anchor: '#_14-loisirs-et-divertissement' },
+  { key: 'ecommerce', name: 'E-commerce', anchor: '#_15-e-commerce' },
+  { key: 'energy', name: 'Énergie', anchor: '#_16-energie' },
+  { key: 'av-media', name: 'Audiovisuel', anchor: '#_17-audiovisuel' },
+  { key: 'ai-marketing', name: 'Marketing IA', anchor: '#_18-marketing-ia' },
+  { key: 'data-intelligence', name: 'Intelligence de données', anchor: '#_19-intelligence-de-donnees' }
+]
+
+const recommendationTopics = computed(() => {
+  if (!interestPoint.value || !purpose.value) return []
+  const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
+  const topics = []
+  keys.forEach(key => {
+    const industry = industries.find(item => item.key === key)
+    const industryTopics = topicPool[key] || []
+    if (industry && industryTopics.length > 0) {
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      selected.forEach(topic => {
+        topics.push({ ...topic, industryKey: key, industryName: industry.name, industryAnchor: industry.anchor })
+      })
+    }
+  })
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+const currentSelection = computed(() => {
+  const interest = interestOptions.find(i => i.value === interestPoint.value)
+  const pur = purposeOptions.find(p => p.value === purpose.value)
+  return { interest: interest?.label || '', purpose: pur?.label || '' }
+})
+
+const scrollToAnchor = (anchor) => {
+  setTimeout(() => {
+    let element = document.querySelector(anchor)
+    if (!element) {
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    if (!element) {
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      element.style.backgroundColor = '#f0f9ff'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => { element.style.backgroundColor = ''; element.style.padding = '' }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  interestPoint.value = ''
+  purpose.value = ''
+}
+</script>
+
+# Références de scénarios d'application B2B
+
+## Introduction du chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Applications B2B', 'Applications industrielles', 'Scénarios IA', 'Références de mise en œuvre', 'Solutions sectorielles']" coreOutput="Découvrir plus de 15 scénarios d'application B2B" expectedOutput="Trouver une direction de projet adaptée aux clients professionnels">
+
+Ce document recense les <strong>applications concrètes des modèles LLM dans les scénarios d'entreprise B2B</strong>. Contrairement aux applications B2C centrées sur l'expérience utilisateur et l'émotion, les produits B2B mettent l'accent sur la <strong>résolution de besoins métier réels, l'amélioration de l'efficacité et la réduction des coûts</strong>. Chaque scénario présente une <strong>faisabilité de mise en œuvre concrète</strong>, couvrant une démarche complète de <strong>l'analyse des besoins à l'implémentation technique</strong>, destinée aux développeurs d'applications IA pour les clients professionnels.
+
+</ChapterIntroduction>
+
+## Sélection rapide par secteur
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Trouvez votre scénario d'application</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Sélectionnez votre domaine d'intérêt et votre objectif, le système recommandera les scénarios pertinents. Cliquez sur un tag pour accéder au chapitre correspondant.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="interestPoint" placeholder="Sélectionnez un domaine d'intérêt" style="width: 100%;">
+        <el-option v-for="item in interestOptions" :key="item.value" :label="item.label" :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="purpose" placeholder="Sélectionnez un objectif" style="width: 100%;">
+        <el-option v-for="item in purposeOptions" :key="item.value" :label="item.label" :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
+      {{ recommendationTopics.length }} scénarios d'application recommandés
+      <span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
+        ({{ currentSelection.interest }} + {{ currentSelection.purpose }})
+      </span>
+    </div>
+    <el-table :data="recommendationTopics" style="width: 100%; cursor: pointer;" @row-click="(row) => scrollToAnchor(row.industryAnchor)" highlight-current-row>
+      <el-table-column prop="title" label="Scénario d'application" min-width="300">
+        <template #default="scope">
+          <div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industryName" label="Secteur" width="180" align="center">
+        <template #default="scope">
+          <el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 10px; font-size: 12px; color: #909399;">
+      💡 Cliquez sur n'importe quelle ligne du tableau pour accéder au chapitre correspondant
+    </div>
+  </div>
+  
+  <div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
+    <span v-if="!interestPoint && !purpose">💡 Veuillez sélectionner un domaine d'intérêt et un objectif</span>
+    <span v-else-if="!interestPoint">💡 Veuillez sélectionner un domaine d'intérêt</span>
+    <span v-else>💡 Veuillez sélectionner un objectif</span>
+  </div>
+  
+  <div v-if="interestPoint || purpose" style="margin-top: 12px;">
+    <el-button size="small" @click="resetSelection">Réinitialiser</el-button>
+  </div>
+</el-card>
+
+## Présentation rapide des secteurs
+
+### Choix technologique courant
+
+En développement d'applications IA, les directions technologiques courantes incluent :
+
+1. **LLM (grands modèles de langage)** : compétents pour les tâches en langage naturel telles que la conversation, la génération de texte, le résumé, la traduction, etc., adaptés à la construction d'applications de service client, de création de contenu et de Q&R.
+2. **VLM (modèles vision-langage)** : combinent la compréhension visuelle et les capacités linguistiques pour la description d'images, la réponse aux questions visuelles, la génération de contenu multimodal, etc.
+3. **GenAI (IA générative)** : inclut la génération de texte, d'images (Stable Diffusion, DALL·E), de vidéos, etc., permettant de créer rapidement du contenu créatif.
+
+### Stratégie de sélection
+
+Les apprenants peuvent choisir leur direction en fonction des dimensions suivantes :
+
+1. **Orienté par l'intérêt** : prioriser les secteurs ou directions techniques qui vous intéressent.
+2. **Adaptation sectorielle** : tirer parti de votre expérience professionnelle ou de vos ressources.
+3. **Difficulté technique** : choisir en fonction de votre niveau technique.
+
+## 1. Industrie manufacturière 
+
+Les scénarios de l'industrie manufacturière s'articulent autour de trois axes principaux : l'aide à la conception, l'optimisation de la production et la maintenance intelligente.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Plateforme d'aide au design extérieur de bus électriques par IA | Génération de designs conceptuels, vérification des normes via LLM, intégration Three.js pour le rendu 3D |
+| 2 | Assistant intelligent de conception et vérification de plans | Base de connaissances RAG des normes de conception, API CAD pour l'analyse automatique des plans |
+| 3 | Génération automatique et gestion de documentation technique | Génération automatique de spécifications et manuels à partir de la base de données produit, stockage vectoriel ChromaDB |
+| 4 | Assistant de génération automatique de rapports d'inspection d'équipements | Description vocale de l'état des équipements, génération structurée de rapports par LLM, association automatique des historiques de pannes |
+| 5 | Système intelligent de planification et d'ordonnancement pour chariots industriels | LLM analyse les commandes et les positions d'entrepôt, génération de plans d'ordonnancement optimaux via API cartographiques |
+| 6 | Entrepôt de données basé sur LLM et recherche en langage naturel | Conversion Text-to-SQL, visualisation Superset, moteur OLAP Doris ou ClickHouse |
+| 7 | Assistant Q&R de diagnostic de pannes d'équipements industriels | Base de connaissances vectorielle construite à partir d'historiques de pannes, suggestions de diagnostic par LLM |
+| 8 | Génération intelligente de rapports de contrôle qualité et classification de défauts | OCR pour identifier les défauts, génération structurée de rapports par LLM, classification automatique des types de défauts |
+| 9 | Assistant intelligent d'inventaire et génération de rapports d'inventaire | Saisie des données d'inventaire, comparaison automatique avec le stock système, alertes sur les écarts |
+| 10 | Système Q&R intelligent d'optimisation de processus de fabrication | Base de connaissances RAG construite à partir de documents de processus, suggestions d'optimisation par LLM |
+
+## 2. Service client intelligent
+
+Les scénarios de service client se concentrent sur l'amélioration de l'efficacité et l'optimisation de l'expérience utilisateur.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Système de réponse automatique multicanal et génération de tickets | Intégration multi-canal (WeChat, APP, site web), compréhension LLM des intentions, création automatique de tickets, construction du flux conversationnel via LangChain, stockage MySQL |
+| 2 | Assistant de prospection et suivi de prospects potentiels | Analyse LLM des historiques de conversations, identification et scoring des prospects à forte intention, système de recommandation avec filtrage collaboratif |
+| 3 | Système de recherche intelligente et Q&R de connaissances internes | Base de connaissances vectorielle construite à partir de Confluence et documents internes, réponses LLM via RAG |
+| 4 | Système d'enquête de satisfaction et d'amélioration du service | Analyse LLM du contenu des conversations pour la classification émotionnelle et le scoring de satisfaction, rapports BI |
+| 5 | Outil de résumé intelligent de conversations et génération de tickets | Résumé automatique de session après clôture de la conversation, extraction d'informations clés, remplissage automatique des champs du ticket |
+| 6 | Assistant de détection automatique de conformité des scripts de service | Détection en temps réel de la conformité des réponses du service client, identification des mots sensibles, suggestions de modification |
+| 7 | Outil de résumé automatique et classification de tickets de service | Résumé automatique et étiquetage de longues conversations par LLM, recherche plein texte via Elasticsearch |
+| 8 | Outil de surveillance émotionnelle des clients et alertes d'anomalies | Analyse en temps réel des caractéristiques vocales et du sentiment textuel, alertes LLM sur les émotions anormales, notifications WebSocket |
+| 9 | Système de recommandation de scripts de service client performants | Analyse LLM des conversations exemplaires, extraction de modèles de scripts performants, recommandation contextuelle en temps réel |
+| 10 | Assistant d'analyse de contenu et de contrôle qualité pour appels sortants | Transcription ASR des appels sortants, analyse de contenu par LLM, génération automatique de rapports de contrôle et suggestions d'amélioration |
+
+## 3. Éducation
+
+Les scénarios éducatifs visent à réaliser un enseignement personnalisé et une gestion éducative intelligente.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Planification de parcours d'apprentissage linguistique personnalisé et système de tutorat intelligent | Évaluation LLM du niveau de l'apprenant, planification quotidienne des tâches d'apprentissage, algorithme de recommandation combinant graphe de connaissances |
+| 2 | Plateforme de création automatique de plans de cours et de ressources pédagogiques | Génération LLM de cadres de plans de cours et de conceptions pédagogiques, stockage vectoriel de plans de cours et supports, recherche par mots-clés et recommandation de similarité |
+| 3 | Système de correction automatique et diagnostic de résultats scolaires | Correction automatique LLM de questions ouvertes avec suggestions, localisation des lacunes via graphe de connaissances |
+| 4 | Construction de modèles de compétences et cartographie d'apprentissage | Analyse LLM des descriptions de postes pour extraire les compétences, construction de profils de compétences, génération de cartes d'apprentissage personnalisées |
+| 5 | Outil de construction de programmes scolaires et de création de supports de cours | Analyse LLM des caractéristiques de l'école et des besoins des élèves, génération de cadres de programmes scolaires, intégration d'API de génération PPT |
+| 6 | Pratique orale de langues en scénarios individuels | LLM joue différents rôles pour des dialogues oraux, reconnaissance ASR de la prononciation et notation, synthèse TTS de la prononciation standard |
+| 7 | Plateforme de recommandation et d'orientation universitaire basée sur le big data | Analyse LLM des scores, classements et intérêts des candidats, recommandation d'établissements et de filières basée sur les données d'admission |
+| 8 | Assistant de code pour l'initiation à la programmation des enfants | Explication LLM de la logique du code et guidance de programmation, support commutation bloc-langage et Python |
+| 9 | Outil de génération automatique de cartes mentales de connaissances et recommandation de parcours | Saisie d'un sujet de cours, génération automatique de cartes mentales par LLM, recommandation du contenu suivant en fonction de la progression |
+| 10 | Moteur de notation et de correction automatique de compositions en chinois et anglais | Scoring multidimensionnel par LLM (structure, langue, diversité) et génération d'annotations, comparaison avec des modèles de compositions |
+
+## 4. Programmation intelligente
+
+Les scénarios de programmation intelligente visent à améliorer l'efficacité du développement et la qualité du code.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Assistant de complétion de code et correction automatique de bugs | Complétion de code en temps réel via plugin IDE basé sur un modèle CodeLlama fine-tuné, analyse LLM des piles d'erreur pour localiser les bugs et générer le code correctif |
+| 2 | Plateforme de construction low-code et automatisation de processus | Description en langage naturel convertie par LLM en configuration low-code ou en squelette de code |
+| 3 | Système de génération de tests unitaires | Analyse AST du code source pour extraire la logique des fonctions, LLM génère des tests aux limites et aux scénarios d'exception, intégration Jest/Pytest |
+| 4 | Outil d'analyse de code et migration entre langages | Analyse de la structure du code via Tree-sitter, suggestions d'optimisation par LLM, migration entre langages via moteur de règles |
+| 5 | Outil de génération automatique de requêtes SQL en langage naturel | Conversion LLM de requêtes en langage naturel en SQL, support des jointures multi-tables et des agrégations |
+| 6 | Plateforme de tests API automatisés et génération de documentation | Analyse LLM des commentaires de code et des définitions d'API, génération automatique de tests et de documentation API, intégration Postman |
+| 7 | Outil de capture et de maintenance intelligente de scripts de tests UI | Plugin navigateur pour capturer les trajectoires utilisateur, LLM analyse l'intention et génère des scripts de test, correction par IA des localisateurs obsolètes |
+| 8 | Analyse de journaux système et localisation de pannes | Collecte de journaux via ELK Stack, analyse LLM des journaux anormaux pour extraire les informations clés et identifier la cause racine, suggestions de correction |
+| 9 | Outil de génération automatique de code UI frontend | Reconnaissance OCR de la structure de mise en page des maquettes, génération par LLM de CSS responsive et de composants, intégration TailwindCSS |
+| 10 | Assistant intelligent de conception et de modélisation de structures de bases de données | Saisie des documents de besoins métier, génération automatique de diagrammes ER et de structures de tables, support d'export vers MySQL/PostgreSQL |
+
+## 5. Santé
+
+Les scénarios de santé visent à améliorer l'efficacité du diagnostic et la qualité des services médicaux.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Assistant intelligent d'interprétation de rapports médicaux | Upload de photos de rapports médicaux, OCR pour identifier les indicateurs clés, interprétation LLM des valeurs anormales et génération d'explications accessibles |
+| 2 | Conseiller en santé basé sur la recherche documentaire | Construction d'un graphe de connaissances médicales (CIM-10, notices de médicaments, guides de diagnostic), réponses par RAG |
+| 3 | Plateforme d'analyse décisionnelle de données de recherche clinique | Intégration de données EMR et de résultats de laboratoire, assistance LLM à la génération de code d'analyse statistique et de visualisations |
+| 4 | Outil de génération automatique de rapports d'imagerie médicale | Description des caractéristiques d'imagerie par le radiologue, génération automatique de rapports structurés par LLM, support de modèles pour les types d'examens courants |
+| 5 | Génération intelligente et résolution automatique de questions d'examens médicaux | Saisie de chapitres et de points de connaissances, génération LLM d'exercices et d'explications, archivage automatique des erreurs et analyse des lacunes |
+| 6 | Assistant Q&R intelligent sur les notices de médicaments | Upload de photos ou saisie de noms de médicaments, réponses LLM sur le dosage, les effets secondaires et les précautions |
+| 7 | Assistant de génération d'articles de vulgarisation médicale | Saisie de noms de maladies et de publics cibles, génération LLM d'articles vulgarisés, support de versions multiples (patient/famille) |
+| 8 | Outil de génération automatique de rapports d'imagerie médicale | Description des caractéristiques d'imagerie par le radiologue, génération automatique de rapports structurés par LLM, support de modèles pour les types d'examens courants |
+| 9 | Assistant de génération et d'archivage de comptes rendus opératoires | Saisie vocale des étapes clés pendant l'opération, génération structurée de comptes rendus par LLM, association automatique des codes opératoires |
+| 10 | Assistant intelligent de rappels médicamenteux pour maladies chroniques | Saisie de la liste des médicaments du patient, génération LLM de rappels personnalisés, vérification des contre-indications et Q&R interactif |
+
+## 6. Cybersécurité
+
+Les scénarios de cybersécurité se concentrent sur la protection et la gestion des risques.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Moteur de détection et correction de vulnérabilités de code | Analyse statique du code (SAST), analyse LLM des principes de vulnérabilité et génération de suggestions de correction, intégration au pipeline CI/CD |
+| 2 | Système de détection et interception de phishing par IA générative | Analyse LLM du contenu des e-mails, des caractéristiques de l'expéditeur et de la sécurité des liens, identification du phishing généré par IA, interception en temps réel via la passerelle de messagerie |
+| 3 | Assistant de génération automatique de rapports quotidiens de sécurité | Consolidation des journaux des équipements de sécurité, extraction automatique des événements clés par LLM, marquage highlight des événements anormaux |
+| 4 | Assistant Q&R intelligent sur les connaissances en sécurité | Base de connaissances vectorielle construite à partir de documents de sécurité et de la base CVE, réponses LLM sur les techniques de sécurité et les recommandations de traitement |
+| 5 | Assistant de génération intelligente de rapports de tests de pénétration | Après les tests de pénétration, génération automatique de rapports par LLM basée sur les descriptions de vulnérabilités, génération en masse de suggestions de correction |
+| 6 | Protection contre le code malveillant et surveillance de la conformité à la vie privée | Analyse en bac à sable des comportements des fichiers suspects, identification par LLM des caractéristiques malveillantes et génération de signatures, scan d'identification des données privées |
+| 7 | Outil de génération de listes de contrôle de conformité de la configuration de sécurité | Saisie du type de système cible, génération LLM de listes de contrôle, support des normes telles que la protection classifiée 2.0 et CIS |
+| 8 | Assistant de recherche et d'analyse de renseignements sur les menaces | Connexion à des sources multiples de renseignements (open source, commerciaux), interprétation LLM des renseignements et corrélation avec les actifs de l'entreprise, recommandation de stratégies de protection |
+| 9 | Assistant de génération de rapports post-incident de sécurité | Après un incident de sécurité, génération automatique de rapports post-mortem par LLM basée sur la chronologie, analyse de la cause racine et suggestions d'amélioration |
+| 10 | Centre de surveillance et d'alerte sur les menaces mondiales | Collecte de données de sécurité et de divulgations de vulnérabilités via scraping, extraction LLM des informations clés et évaluation de l'impact, alertes par e-mail/SMS |
+
+## 7. Finance, banque et assurance
+
+Les scénarios financiers s'articulent autour du contrôle des risques et de l'intelligence métier.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Assistant intelligent de génération de rapports de due diligence de crédit | Saisie des informations de base et des données financières de l'entreprise, génération automatique de rapports de due diligence, marquage automatique des points de risque |
+| 2 | Conseiller intelligent en gestion de patrimoine bancaire privé | Analyse LLM du profil de risque et des objectifs financiers du client, génération de suggestions d'allocation d'actifs, connexion aux produits de gestion de patrimoine et aux fonds |
+| 3 | Assistant de génération et de vérification de conformité de prospectus IPO | Modèles modulaires de prospectus, remplissage automatique par LLM des descriptions commerciales et des facteurs de risque, vérification de cohérence par moteur de règles |
+| 4 | Système de génération automatique de rapports financiers et d'alertes d'anomalies | Collecte automatique des données du système financier, génération LLM d'analyses financières et de discussions de la direction, alertes sur les indicateurs anormaux |
+| 5 | Assistant d'extraction d'informations de justificatifs et Q&R | Upload de photos de factures, reconnaissance OCR des informations, réponses LLM aux questions liées aux justificatifs, support de factures de TVA, reçus de train, etc. |
+| 6 | Assistant de recherche et Q&R de jurisprudence | Base de connaissances construite à partir de sanctions réglementaires, réponses LLM aux questions de conformité et références de cas |
+| 7 | Assistant de simulation de scripts pour agents d'assurance | LLM joue différents types de clients pour des dialogues simulés, évaluation de la conformité et de la force de persuasion des scripts, analyse de transcriptions d'enregistrements |
+| 8 | Plateforme d'analyse de clauses de polices d'assurance et comparaison des concurrents | Analyse structurée des clauses, génération LLM de résumés des points forts et des points d'attention |
+| 9 | Service de reconnaissance émotionnelle dans les conversations clients | Reconnaissance émotionnelle vocale combinée à la détection de conformité des scripts, feedback en temps réel à l'agent pour amélioration |
+| 10 | Assistant intelligent de suivi et de Q&R de progression de sinistres | Saisie du numéro de police ou de déclaration de sinistre par l'utilisateur, consultation LLM de la progression du sinistre et réponses aux questions liées |
+
+## 8. Services d'entreprise
+
+Les scénarios de services d'entreprise visent à améliorer l'efficacité opérationnelle et le niveau de management.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Plateforme d'analyse de rétention et d'alerte de churn | Collecte de données comportementales via tracking, modèle ML de prédiction du churn, génération LLM de suggestions de rétention |
+| 2 | Plateforme de prospection et marketing par e-mail pour prospects B2B | Filtrage des données commerciales pour identifier les cibles, génération LLM de contenu marketing personnalisé, connexion à une plateforme d'envoi groupé |
+| 3 | Plateforme de suivi du pipeline commercial et de prévision de performance | Collecte automatique de données CRM, analyse LLM de l'entonnoir des ventes et prévision des objectifs, alertes push aux managers |
+| 4 | Radar de surveillance de l'e-réputation de marque et d'alerte de crise | Collecte de données d'opinion sur tout le web (réseaux sociaux, actualités, forums), analyse LLM du sentiment et des tendances de propagation, alertes de crise |
+| 5 | Assistant de rédaction intelligente d'e-mails professionnels et de gestion émotionnelle | Compréhension contextuelle des e-mails, génération LLM de brouillons professionnels, feedback d'analyse émotionnelle |
+| 6 | Système d'analyse intelligente de CV et de correspondance postes | Analyse PDF des CV pour extraire les informations clés, correspondance LLM avec les postes appropriés et génération de suggestions d'entretien, intégration ATS |
+| 7 | Assistant d'accueil et Q&R pour les nouveaux employés | Recherche RAG dans la base de connaissances des documents d'intégration, réponses LLM aux questions fréquentes des nouveaux employés |
+| 8 | Plateforme de feedback sur la performance et gestion OKR | Collecte de données OKR, analyse LLM de l'avancement des objectifs et génération de suggestions de feedback, collecte de feedback 360° |
+| 9 | Prise de notes intelligentes de réunions et gestion des TODO | Transcription des enregistrements de réunions, extraction LLM des points clés et des TODO, création automatique de tâches dans le système de gestion |
+| 10 | Reconnaissance de factures et traitement automatique de remboursements | Reconnaissance OCR des informations de factures, vérification automatique de l'authenticité et de la conformité des remboursements, connexion au système financier |
+
+## 9. Production et exploitation de contenu
+
+Les scénarios de production et d'exploitation de contenu se concentrent sur la création et le trafic.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Plateforme d'aide à la création de contenu pour films et romans | Assistance LLM à la création : synopsis, développement de personnages, génération de dialogues ; visualisation de la structure narrative en carte mentale |
+| 2 | Assistant intelligent de rédaction d'histoires de marque et de RP | Saisie de mots-clés de marque et d'informations produit, génération LLM de plusieurs versions stylistiques de textes ; intégration de tests A/B |
+| 3 | Système de gestion d'interaction et de diffusion en direct par avatar numérique | Modélisation d'avatar + synthèse vocale TTS + dialogue LLM, réponse en temps réel aux commentaires en direct ; intégration OBS pour la diffusion |
+| 4 | Génération de scripts vidéo courts et montage intelligent | Génération LLM de scripts et de storyboards, Sora/Runway pour les extraits vidéo ; assemblage automatique par l'outil de montage |
+| 5 | Transcription vocale de ventes et recommandation de scripts | Transcription ASR des appels téléphoniques, analyse LLM des conversations et recommandation de scripts performants ; intégration CRM |
+| 6 | Système de génération intelligente de contenu marketing | Saisie des informations produit, génération LLM de textes marketing et d'extraction de points de vente ; intégration de modèles Canva/Gaoding Design |
+| 7 | Système de surveillance en temps réel du ROI des publicités et d'optimisation stratégique | Connexion API aux plateformes publicitaires pour collecter les données, analyse LLM de l'efficacité et génération de suggestions d'optimisation, alertes sur les anomalies |
+| 8 | Analyse de mots-clés et de trafic des moteurs de recherche | Collecte de données Baidu Index et 5118, analyse LLM des tendances des mots-clés et de la compétitivité, recommandation de sujets |
+| 9 | Plateforme d'analyse des dépenses publicitaires des concurrents | Collecte de données publicitaires via API de plateformes tierces, analyse LLM des stratégies de diffusion et des caractéristiques créatives |
+| 10 | Système d'analyse intelligente des tendances et de recommandation de sujets | Collecte de données de tendances (Recherche Weibo, classement Douyin), analyse LLM des tendances et recommandation d'angles de sujets ; planification de contenu calendaire |
+
+## 10. Administration publique intelligente
+
+Les scénarios d'administration publique visent à améliorer l'efficacité des services publics et la capacité de gouvernance.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Système de navigation vocale intelligente et de répartition automatique pour la ligne 12345 | Reconnaissance vocale des appels des citoyens, compréhension LLM des demandes et répartition automatique vers le service compétent ; circulation automatique des tickets |
+| 2 | Robot d'accueil et de questions-réponses sur les services administratifs | Recherche RAG dans la base de connaissances gouvernementales, réponses LLM aux procédures et questions de politique ; connexion au système de prise de numéro |
+| 3 | Plateforme de correspondance et de diffusion ciblée de politiques de soutien aux entreprises | Analyse structurée des politiques, correspondance automatique des profils d'entreprises avec les politiques applicables ; rappels par SMS/e-mail |
+| 4 | Assistant de pré-examen des documents administratifs et de vérification de conformité | OCR des documents et extraction d'informations clés, vérification LLM de l'exhaustivité et de la conformité des documents |
+| 5 | Système de détection de comportements anormaux par vidéo surveillance publique | Analyse en temps réel des flux vidéo, détection CV de comportements anormaux (bagarres, chutes) ; alertes push |
+| 6 | Plateforme d'identification intelligente d'événements urbains et de gestion de dispatch | Collecte de données urbaines (IoT, caméras), identification LLM du type d'événement et répartition |
+| 7 | Système d'analyse multidimensionnelle d'opinion publique et d'alertes de risques | Fusion de données multi-sources (ligne 12345, opinion en ligne, visites de terrain), identification LLM des points chauds de risque |
+| 8 | Plateforme de numérisation, d'identification intelligente et d'archivage de dossiers administratifs | OCR du contenu textuel des archives, extraction LLM des informations clés et classification automatique ; support de recherche plein texte |
+| 9 | Plateforme de commande d'urgence et de distribution de ressources de secours | Collecte d'informations sur les événements, génération LLM de plans de réponse d'urgence ; optimisation algorithmique de la distribution des ressources |
+| 10 | Système de surveillance en grille de la pollution atmosphérique et de traçabilité de la source | Collecte de données des capteurs de qualité de l'air, modèle CV d'identification des sources de pollution ; analyse LLM des tendances de pollution et traçabilité |
+
+## 11. Affaires juridiques et gestion contractuelle
+
+Les scénarios juridiques se concentrent sur l'amélioration de l'efficacité des services juridiques et la gestion de la conformité.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Agent de détection de risques contractuels en un clic | Analyse structurée des textes contractuels, identification par LLM des problèmes potentiels par comparaison avec une liste de contrôle ; marquage des clauses à haut risque |
+| 2 | Plateforme de vérification de conformité et de suggestions de modification pour le cycle de vie des contrats | Comparaison des clauses avec la base de données réglementaire, génération LLM de rapports de conformité ; suivi des suggestions de modification |
+| 3 | Conseiller AI d'évaluation du taux de succès de litiges similaires | Extraction de caractéristiques de cas, recherche et correspondance de cas similaires ; analyse LLM des facteurs influençant le succès |
+| 4 | Radar de surveillance en temps réel des changements législatifs et d'analyse d'impact | Mise à jour en temps réel de la base de données juridique, analyse LLM des modifications et évaluation de l'impact commercial ; alertes push |
+| 5 | Outil AIGC de rédaction automatique de lettres de mise en demeure | Saisie des faits, génération LLM de modèles de lettres de mise en demeure normalisées ; vérification des éléments et conformité |
+| 6 | Enregistreur de transcription en temps réel et extraction automatique des points litigieux | Transcription ASR des audiences, extraction LLM des points litigieux et des arguments clés ; annotation de timestamps |
+| 7 | Système de surveillance automatique de violations de propriété intellectuelle et de preuves blockchain | Surveillance des violations de propriété intellectuelle sur les plateformes e-commerce et les réseaux sociaux ; collecte automatique de preuves |
+| 8 | Agent de vérification de cohérence et d'alerte de risques pour les prospectus IPO | Comparaison de données multi-chapitres des prospectus, identification LLM des incohérences et des anomalies de données ; marquage des risques |
+| 9 | Plugin de traduction en langage simple de clauses juridiques complexes | Sélection de clauses juridiques, génération LLM d'explications accessibles |
+| 10 | Système intelligent de structuration et de visualisation de chaînes de preuves | Upload de documents de preuves, analyse LLM des relations entre les preuves et de la chronologie |
+
+## 12. Tourisme et voyages
+
+Les scénarios de tourisme visent à améliorer l'expérience de voyage et la commodité.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Générateur d'itinéraires paresseux basé sur l'AIGC | Saisie des préférences (durée, budget, intérêts), génération LLM d'itinéraires quotidiens ; API de lieux touristiques pour les horaires et les billets |
+| 2 | Robot de prédiction de tendances de prix de vols et d'hôtels et verrouillage automatique des prix bas | Collecte de données de prix des OTA, modèle ML de prédiction des tendances ; alertes de surveillance des prix |
+| 3 | Conseiller en recomposition d'itinéraire inter-compagnies et suggestions de plans de secours après annulation de vol | Surveillance de l'état des vols, analyse LLM de plans de rechange ; comparaison multi-compagnies |
+| 4 | Système de pré-examen des documents de visa et d'aide au remplissage automatique | Photos des documents uploadées, vérification OCR de l'exhaustivité des informations ; remplissage automatique des formulaires |
+| 5 | Assistant de traduction vocale en temps réel et de visualisation de menus pour voyages à l'étranger | Modèle de traduction vocale hors ligne, OCR de photos de menus et traduction |
+| 6 | Analyseur de commentaires d'hôtels basé sur le big data pour éviter les mauvaises surprises | Collecte de données de commentaires d'hôtels, extraction LLM des mots-clés positifs et négatifs |
+| 7 | Plateforme de prévisualisation immersive en VR et sélection interactive de chambres | Collecte de panoramas à 360°, prévisualisation immersive en VR ; visite virtuelle des chambres |
+| 8 | Assistant de génération de récits de voyage et de posts sociaux à partir de traces de voyage | Extraction d'informations de lieu et de date à partir des photos, génération LLM de textes de récits ; modèles de mise en page |
+| 9 | Plateforme de collecte et de gestion de justificatifs de frais de déplacement professionnels | Connexion API aux plateformes de voyages d'affaires, collecte automatique de justificatifs ; vérification de conformité |
+| 10 | Navigation prédictive de la congestion touristique et planification d'itinéraires hors pointe | Collecte de données de fréquentation touristique, modèle ML de prédiction des périodes de pointe ; recommandation d'horaires hors pointe |
+
+## 13. Accompagnement émotionnel
+
+Les scénarios d'accompagnement émotionnel se concentrent sur la santé mentale et le soutien affectif.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Compagnon virtuel d'accompagnement profond 24h/24 basé sur les LLM | Système de mémorisation stockant l'historique des conversations, génération LLM de réponses personnalisées ; module de soutien émotionnel |
+| 2 | Conseiller AI de reconnaissance émotionnelle multimodale et de soutien psychologique | Analyse du ton vocal + reconnaissance émotionnelle textuelle, génération LLM de conseils de soutien ; alerte d'intervention en crise |
+| 3 | Agent numérique de rééducation cognitive et de stimulation mnésique pour personnes atteintes de la maladie d'Alzheimer | Jeux cognitifs (mémoire, calcul, langage) ; stimulation par vieilles photos/vieilles chansons |
+| 4 | Coach de simulation sociale AIGC pour personnes souffrant d'anxiété sociale | Simulation de scénarios sociaux virtuels, LLM jouant différents rôles ; suggestions de techniques sociales |
+| 5 | Machine à histoires personnalisées générative pour enfants par IA | Saisie par les parents du thème et des préférences, génération LLM d'histoires personnalisées ; génération de musique de fond |
+| 6 | Système de résurrection numérique et de dialogue inter-temporel via LLM pour les défunts | Entraînement d'un modèle personnalisé à partir de données (voix, textes) du défunt ; génération de dialogues mémoriels |
+| 7 | Robot de chat empathique basé sur les données MBTI | Saisie des résultats du test MBTI, génération LLM d'analyse de personnalité et de réponses empathiques ; recommandation de correspondances de personnalité |
+| 8 | Assistant de suivi d'humeur 24h/24 et de motivation positive par IA | Enregistrement quotidien de l'état émotionnel, analyse LLM des tendances et génération de contenu motivant ; rappels positifs push |
+| 9 | Arbre à confidences pour adolescents avec respect de la vie privée | Entrée anonyme pour la confidence, LLM fournit écoute et conseils ; alerte sur les mots sensibles |
+| 10 | Système d'animaux de compagnie virtuels à évolution autonome | Entraînement d'un modèle de personnalité de l'animal, interaction et croissance évolutives ; système de personnalisation virtuelle |
+
+## 14. Loisirs et divertissement
+
+Les scénarios de loisirs visent à offrir une expérience de divertissement numérique riche.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Moteur de décision autonome de PNJ pour jeux en monde ouvert basé sur les LLM | Arbre de comportement des PNJ fusionné avec les décisions LLM, système de dialogue pour des interactions personnalisées ; moteur de comportement |
+| 2 | Outil AIGC de progression narrative et d'assistance MJ pour murder games immersifs | Les choix des joueurs déclenchent des branches narratives, génération LLM de logique déductive ; génération automatique de cartes d'indices |
+| 3 | Modificateur génératif de fins pour fiction interactive | Les choix des lecteurs influencent le cours de l'histoire, génération LLM de multiples branches de fins |
+| 4 | Station de travail AIGC de modélisation 3D de personnages de style anime | Description textuelle pour générer des croquis de personnages, modélisation 3D automatique ; rendu de textures |
+| 5 | Analyste visuel CV et commentateur intelligent de parties esport | Analyse en temps réel du gameplay, identification des moments clés ; génération LLM de commentaires de match |
+| 6 | Moteur de recommandation algorithmique de contenu humoristique | Profilage d'intérêts des utilisateurs, correspondance et recommandation de contenu humoristique |
+| 7 | Logiciel d'optimisation vocale et d'embellissement de chant KTV | Traitement de réduction du bruit et d'amélioration vocale ; algorithme IA d'optimisation vocale |
+| 8 | Outil d'extraction et de montage intelligent de scènes par personnage de séries | Analyse du contenu vidéo, extraction de séquences par personnage ; montage automatique |
+| 9 | Système de génération automatique de livres audio multi-voix par TTS | Attribution de rôles textuels, génération de voix personnalisées ; ajout de musique de fond et d'effets sonores |
+| 10 | Coach d'analyse et de révision de parties de jeux de société basé sur l'apprentissage par renforcement | Analyse de parties, simulation d'adversaire par IA ; génération de suggestions de révision |
+
+## 15. E-commerce
+
+Les scénarios d'e-commerce se concentrent sur l'efficacité opérationnelle et l'amélioration des taux de conversion.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Outil de production en masse de fiches produit à fort taux de conversion par AIGC | Saisie d'informations produit, génération LLM de textes vendeurs et de descriptions de scènes ; génération d'images de fond |
+| 2 | Usine de génération de vidéos d'essayage virtuel par IA pour vêtements | Traitement de photos de vêtements à plat, génération d'essayages virtuels ; vidéos multi-angles |
+| 3 | Assistant de traduction et d'adaptation multilingue LLM pour e-commerce transfrontalier | Traduction multilingue de descriptions de produits, adaptation culturelle ; interfaces de publication multi-plateformes |
+| 4 | Robot d'analyse de sentiment client basé sur le NLP et réponse intelligente | Analyse de sentiment des conversations de conseil, génération automatique de réponses apaisantes ; classification des avis positifs/négatifs |
+| 5 | Système de live shopping 24h/24 par avatar numérique AIGC | Avatar numérique + génération de scripts en temps réel, appel en temps réel aux informations produit ; interaction avec les commentaires en direct |
+| 6 | Plugin IA de comparaison de prix et de prédiction de tendances pour les produits similaires sur tout le web | Scraping de prix sur les plateformes e-commerce, tableaux comparatifs ; prédiction des tendances de prix |
+| 7 | Plateforme de filtrage intelligent de photos de clients et de synthèse de vidéos courtes | Scoring de qualité des photos des clients, recommandation automatique des contenus de qualité ; synthèse de modèles de vidéos courtes |
+| 8 | Analyse en temps réel de conversations de vente et recommandation de scripts performants basée sur LLM | Transcription ASR des appels, détection en temps réel de la conformité des scripts ; recommandation de scripts |
+| 9 | Moteur de détection de tendances du marché et de prédiction de produits populaires par IA | Collecte et analyse de données de réseaux sociaux et d'e-commerce, détection LLM des tendances et points chauds ; suggestions de sélection de produits |
+| 10 | Système de segmentation d'utilisateurs par IA et d'exploitation fine basé sur les données comportementales | Analyse par clustering de données comportementales, génération de tags de profils ; déclenchement automatisé du marketing |
+
+## 16. Énergie
+
+Les scénarios énergétiques visent à réaliser une gestion intelligente et une transition verte du secteur de l'énergie.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Analyse IA des comportements de consommation domestique et conseiller en économie d'énergie | Collecte de données des compteurs intelligents, analyse des modes de consommation ; génération LLM de conseils d'économie |
+| 2 | Système de détection CV de défauts de panneaux photovoltaïques par drone | Inspection par drone, analyse d'images thermoinfrarouges ; détection et annotation de défauts |
+| 3 | Agent de prédiction de tendances de prix de l'énergie et de stratégie automatique de profit | Collecte de données du marché de l'énergie, modèle de prédiction des prix ; génération de stratégies et exécution de transactions |
+| 4 | Système de détection non destructive de la santé des batteries et d'alerte sur les risques de surchauffe | Surveillance des données de fonctionnement des batteries, modèle d'évaluation de la santé ; alertes push sur les risques |
+| 5 | Assistant IA de comptabilisation automatique des émissions carbone et de génération de rapports ESG | Collecte de données de consommation d'énergie, calcul des facteurs d'émission ; génération automatique de rapports ESG |
+| 6 | Système IA de prévision de charge en conditions météorologiques extrêmes et de commande d'urgence | Connexion aux données météorologiques, modèle de prévision de charge ; génération de stratégies d'ordonnancement |
+| 7 | Gardien IA de détection de violations dans les stations-service et alerte | Analyse vidéo des stations-service, détection de violations (appels téléphoniques, tabagisme) ; alertes push |
+| 8 | Système IA de surveillance par ondes acoustiques et de localisation précise de fuites d'oléoducs | Collecte de données de capteurs acoustiques, modèle de détection de fuites ; calcul de localisation |
+| 9 | Système d'agrégation de ressources virtuelles et de prise de décision de trading d'électricité par IA | Connexion de ressources distribuées, optimisation de l'ordonnancement agrégé ; exécution de stratégies de trading |
+| 10 | Suivi IA de la position des personnes dans les mines et alerte d'intrusion dans les zones dangereuses | Localisation UWB/BLE, suivi des trajectoires de personnes ; barrières électroniques pour les zones dangereuses |
+
+## 17. Audiovisuel
+
+Les scénarios audiovisuels se concentrent sur la production et le traitement des médias.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Outil IA d'identification de moments forts et de montage automatique de vidéos longues | Analyse du contenu vidéo, identification des images clés ; montage automatique des moments forts |
+| 2 | Assistant IA de séparation intelligente du bruit de fond et d'amélioration vocale | Modèle de séparation audio, suppression du bruit de fond ; amélioration vocale |
+| 3 | Station de restauration 4K et de colorisation IA pour images anciennes | Modèle de super-résolution, restauration de la qualité des images anciennes ; colorisation automatique |
+| 4 | Système de doublage TTS de qualité professionnelle et contrôle des émotions | Modèle TTS multi-voix, contrôle émotionnel ; export audio |
+| 5 | Outil de reconnaissance vocale ASR automatique et génération de sous-titres bilingues | Reconnaissance vocale pour génération de sous-titres, traduction multilingue ; superposition de sous-titres bilingues |
+| 6 | Moteur IA d'effacement intelligent d'objets superflus dans les vidéos | Suivi de cibles vidéo par modèle de suivi d'objets, suppression et restauration par frames ; gestion de la cohérence inter-frames |
+| 7 | Compositeur automatique de musique de fond sans droits d'auteur par AIGC | Modèle de génération musicale, contrôle des émotions et du style ; détection des droits d'auteur |
+| 8 | Logiciel de clonage et de conversion vocale par IA pour voix de personnalités spécifiques | Entraînement d'un modèle de voix avec peu d'échantillons ; traitement de conversion vocale |
+| 9 | Plateforme de conversion de scripts en storyboards et génération de vidéos de prévisualisation par IA | Analyse de scripts pour génération de storyboards, génération LLM de vidéos de prévisualisation |
+| 10 | Assistant de transcription intelligente de réunions et d'extraction de TODO à partir d'enregistrements | Séparation et transcription vocale de réunions multi-participants, extraction LLM des TODO ; annotation de timestamps |
+
+## 18. Marketing IA
+
+Les scénarios de marketing IA visent à améliorer l'efficacité marketing et la production créative.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Moteur AIGC de rédaction automatique de posts viraux pour Xiaohongshu | Saisie de sujets, génération LLM de posts sponsorisés ; optimisation d'emojis et de tags de sujets |
+| 2 | Outil IA de mise en page de supports marketing et d'adaptation multi-tailles | Saisie de textes, association intelligente de modèles de supports et export multi-tailles |
+| 3 | Plateforme AIGC de création de logos et de construction de charte VI | Saisie de mots-clés de marque, génération créative de logos ; génération de normes VI |
+| 4 | Assistant de suivi des tendances et de génération d'idées marketing opportunistes par IA | Collecte de données de tendances, analyse LLM des angles marketing ; génération de concepts créatifs |
+| 5 | Gestionnaire de budget publicitaire et système deenchères IA en temps réel | Connexion aux données des plateformes publicitaires, modèle d'analyse d'efficacité ; optimisation des stratégies d'enchères |
+| 6 | Analyseur approfondi des stratégies marketing des concurrents et générateur de rapports hebdomadaires par IA | Collecte et analyse de contenu des concurrents, extraction de stratégies ; génération automatique de rapports hebdomadaires |
+| 7 | Planification de mots-clés SEO et rédaction en masse d'articles par IA | Analyse de mots-clés, génération en masse d'articles ; suggestions d'optimisation SEO |
+| 8 | Expert en rédaction d'e-mails marketing personnalisés un-à-un | Données de profils d'utilisateurs, génération de contenu personnalisé ; tests A/B |
+| 9 | Radar de surveillance de la réputation de marque sur tout le web et alerte de crise IA | Collecte de données d'opinion sur tout le web, analyse de sentiment ; alertes push en cas de crise |
+| 10 | Outil AIGC de génération de scripts vidéo courts et d'aide au storyboard | Saisie de sujets, génération de scripts et de storyboards ; conseils de tournage |
+
+## 19. Intelligence de données
+
+Les scénarios d'intelligence de données se concentrent sur l'analyse et la valorisation des données.
+
+| # | Scénario d'application | Référence d'implémentation |
+|---|---|---|
+| 1 | Moteur de recherche en langage naturel basé sur le Text-to-SQL | Conversion de requêtes en langage naturel en SQL, visualisation des résultats |
+| 2 | BI conversationnel : génération de graphiques en une phrase | Description des besoins en données, génération automatique de graphiques ; support de la bascule entre plusieurs types de graphiques |
+| 3 | Outil de reconnaissance de tableaux à partir de captures d'écran | Upload de captures d'écran, reconnaissance VLM de la structure et des données du tableau ; export en fichier Excel |
+| 4 | Outil IA de reconnaissance de tableaux à partir d'images et de captures d'écran | Reconnaissance OCR de la structure des tableaux à partir d'images, export des données en Excel |
+| 5 | Construction automatisée de graphes de connaissances à partir de données multi-sources | Connexion multi-sources, extraction d'entités et de relations ; stockage en base de données de graphes |
+| 6 | Assistant intelligent d'interprétation de rapports de données et d'analyse de tendances | Upload d'images ou saisie de données de rapports de données, interprétation VLM des graphiques et analyse de tendances |
+| 7 | Assistant d'interprétation de structures de tables de bases de données et de génération de requêtes exemple | Saisie de noms de tables ou de descriptions de champs, génération LLM de descriptions de tables et de requêtes SQL exemple |
+| 8 | Alignement intelligent et déduplication IA des données maîtresses d'entreprise | Correspondance multi-sources de données maîtresses, identification des enregistrements en double ; configuration de règles de fusion |
+| 9 | Outil de conversion de spécifications de données en scénarios de test | Saisie de descriptions de besoins en données, génération LLM de scénarios de test et de cas de validation |
+| 10 | Assistant Q&R intelligent sur les indicateurs de données | Construction d'une base de connaissances à partir de documents de définition d'indicateurs, réponses LLM sur la portée et la logique de calcul des indicateurs |
diff --git a/docs/fr-fr/stage-1/appendix-jobs-to-be-done/index.md b/docs/fr-fr/stage-1/appendix-jobs-to-be-done/index.md
new file mode 100644
index 0000000..f996060
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-jobs-to-be-done/index.md
@@ -0,0 +1,496 @@
+---
+title: "Jobs to Be Done : trouver ce que les utilisateurs veulent vraiment accomplir"
+description: "Article d'introduction à Jobs to Be Done pour les lecteurs débutants. Comprendre que les utilisateurs n'achètent pas des fonctionnalités mais « emploient » votre produit pour accomplir une progression dans un contexte spécifique, et apprendre à utiliser JTBD pour décomposer la direction produit, les questions d'entretien et les prompts AI."
+---
+
+<script setup>
+const duration = 'Environ <strong>1,5 heure</strong>'
+</script>
+
+# Jobs to Be Done : trouver ce que les utilisateurs veulent vraiment accomplir
+
+<a id="top-jtbd"></a>
+
+## Introduction du chapitre
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['JTBD', 'Besoins utilisateurs', 'Réflexion produit', 'Découverte de besoins']"
+  coreOutput="1 phrase JTBD qui ressemble davantage à un vrai besoin"
+  expectedOutput="Transformer une idée vague en un scénario utilisateur et une direction MVP plus concrets"
+>
+
+Beaucoup de gens, quand ils commencent à créer un produit, font l'erreur la plus courante de concentrer toute leur attention sur « quelles fonctionnalités je vais créer ». Ils voient que d'autres ont une classification intelligente, ils veulent aussi l'ajouter ; ils voient que d'autres ont un résumé automatique, ils veulent aussi l'intégrer ; ils voient que d'autres ont fait des Agents, du multimodal, des workflows, ils se sentent obligés d'en faire autant.
+
+Mais dans la réalité, les utilisateurs décident rarement d'utiliser un produit parce que « le nom de la fonctionnalité est cool ». Ils sont plutôt dans un moment précis, voulant faire avancer une tâche, et « embauchent » temporairement un outil, un service, voire une personne pour les aider à franchir cette étape.
+
+C'est exactement ce que la méthode **Jobs to Be Done (JTBD)** nous rappelle : **les utilisateurs n'achètent pas des fonctionnalités en soi, ils emploient une certaine solution pour les aider à accomplir une progression.**
+
+Cet article vous guidera, dans un langage aussi simple que possible, pour comprendre JTBD depuis zéro et en faire un outil d'analyse directement utilisable pour vos applications AI.
+
+</ChapterIntroduction>
+
+::: info SOP minimale
+**Objectif** : après avoir lu, vous saurez mieux comment transformer une idée vague en un besoin avec un vrai scénario utilisateur, au lieu de n'avoir en tête qu'une liste de noms de fonctionnalités.
+
+**Actions** : écrivez 1 idée vague, trouvez 3 utilisateurs potentiels et demandez-leur « comment avez-vous géré ça la dernière fois », puis organisez le tout en 1 phrase JTBD.
+
+**Résultat** : vous obtiendrez une hypothèse de besoin plus claire, sachant ce que la première version doit résoudre en priorité.
+
+**Navigation rapide** : [Qu'est-ce que JTBD](#jtbd-what) · [La formule en une phrase](#jtbd-formula) · [Comment l'IA peut vous aider](#jtbd-ai)
+:::
+
+## Ce que vous apprendrez
+
+1. Qu'est-ce que Jobs to Be Done, et pourquoi c'est plus proche des besoins réels que le « brainstorming de fonctionnalités »
+2. Comment distinguer « les fonctionnalités que les utilisateurs disent vouloir » de « ce qu'ils veulent vraiment accomplir »
+3. Comment utiliser un modèle simple pour décomposer une idée vague en contexte, déclencheur, obstacle et critère de succès
+4. Comment utiliser JTBD pour les produits AI, les questions d'entretien et l'organisation des prompts
+
+<a id="jtbd-what"></a>
+## [1. Qu'est-ce que Jobs to Be Done](#top-jtbd)
+
+Jobs to Be Done est souvent abrégé en **JTBD**. L'idée centrale derrière cette méthode est liée à l'expression classique popularisée par l'équipe de Clayton Christensen : **les utilisateurs vont « employer » un certain produit pour accomplir une tâche.**
+
+La « tâche » ici n'est pas une action superficielle de liste de choses à faire, mais une **progression** que l'utilisateur souhaite voir dans son état. Par exemple :
+
+- Pas « je veux un outil AI de compte rendu », mais « je veux organiser les points clés, les tâches et les responsables en moins de 10 minutes après la réunion, sans dépendre de ma mémoire pour compléter les notes »
+- Pas « je veux une app de comptabilité », mais « je veux savoir où va mon argent, pour ne plus être anxieux en fin de mois »
+- Pas « je veux un optimiseur de CV », mais « je veux soumettre un CV décent avec plus de confiance, sans douter de la qualité de ce que j'ai écrit à chaque candidature »
+
+Donc, **JTBD ne s'intéresse pas à l'apparence du produit, mais à la raison pour laquelle l'utilisateur en a besoin à ce moment précis.**
+
+C'est aussi pourquoi de nombreux produits apparemment différents sont en réalité en concurrence pour le même job. L'utilisateur qui veut « ne pas s'ennuyer sur le chemin du travail » peut embaucher des vidéos courtes, des podcasts, des jeux, des chats, ou même la sieste. L'utilisateur qui veut « comprendre rapidement un PDF très long » peut embaucher un outil de résumé AI, un stagiaire, un collègue, lire lui-même en serrant les dents, ou simplement ne pas lire pour l'instant.
+
+Une fois que vous regardez le problème sous cet angle, vous découvrirez que vos véritables concurrents ne sont souvent pas « une autre app qui vous ressemble », mais **toutes les alternatives actuellement acceptables pour l'utilisateur**.
+
+## 2. Quelle est la différence entre JTBD, les personas et les listes de fonctionnalités
+
+Beaucoup de débutants, quand ils commencent l'analyse des besoins, écrivent d'abord un persona : 25 ans, femme, ville de premier rang, cadre, aime les outils d'efficacité, prête à essayer de nouveaux produits. Ce type d'information n'est pas totalement inutile, mais il est généralement **insuffisant pour expliquer pourquoi une personne agirait à ce moment précis**.
+
+JTBD s'intéresse davantage aux questions suivantes :
+
+- Dans quel contexte a-t-il décidé de chercher une solution
+- Qu'est-ce qui le bloquait exactement à ce moment-là
+- Quelle tâche veut-il faire passer à l'étape suivante
+- Quelle méthode de fortune utilise-t-il actuellement
+- Si les choses sont bien résolues, quel résultat lui ferait dire « ça valait le coup »
+
+Autrement dit, **le persona ressemble davantage à « qui est cette personne en gros », tandis que JTBD ressemble davantage à « que veut-elle vraiment accomplir maintenant »**.
+
+De même, les listes de fonctionnalités peuvent facilement vous égarer. Les utilisateurs disent « je veux exporter en Word », « je veux une réécriture AI », « je veux une saisie vocale » — tout cela n'est qu'expression de surface. JTBD continue de creuser :
+
+- Pourquoi avez-vous besoin d'exporter en Word maintenant, et pas en PDF ?
+- Vous voulez réécrire, est-ce parce que le style est mauvais, ou parce qu'il faut adapter à différents publics ?
+- Vous voulez la saisie vocale, est-ce parce que vous êtes paresseux pour taper, ou parce que vous êtes souvent en marchant, en conduisant, ou juste après une réunion pour prendre des notes immédiatement ?
+
+Très souvent, **les fonctionnalités ne sont qu'une traduction temporaire du job**. Si vous ne collectez que des fonctionnalités, vous risquez de construire un produit « qui empile tout ce que les utilisateurs disent » ; si vous pouvez voir le job derrière, vous avez plus de chances de créer une solution vraiment fluide et véritablement compétitive.
+
+## 3. Un exemple compréhensible même par un débutant
+
+Ne vous précipitez pas pour penser à des produits AI complexes, commençons par un exemple de la vie quotidienne.
+
+Supposons que quelqu'un n'a jamais le temps de prendre le petit-déjeuner avant de sortir le matin, alors il achète souvent un sandwich et un café à l'entrée du métro. En surface, il « achète » un petit-déjeuner ; mais vu par JTBD, ce qu'il veut vraiment accomplir pourrait être :
+
+- Résoudre un repas le matin pressé, avec le moins d'effort mental possible
+- Ne pas avoir faim avant d'arriver au bureau
+- Ne pas retarder son trajet à cause du petit-déjeuner
+
+Ici, l'utilisateur n'embauche pas « un sandwich d'une marque spécifique », mais une solution qui l'aide à faire avancer sa matinée sans encombre. Si le convenience store d'à côté est plus rapide, plus proche et plus fiable, il pourrait changer immédiatement.
+
+Transposons cette logique aux produits AI et cela devient encore plus évident.
+
+Par exemple, vous voulez créer un « outil AI de compte rendu de réunion ». Si vous vous arrêtez au niveau des fonctionnalités, vous commencerez facilement à penser :
+
+- Faut-il supporter l'upload audio
+- Faut-il intégrer la séparation des locuteurs
+- Faut-il exporter en Markdown
+- Faut-il générer automatiquement les tâches
+
+Tout cela n'est pas faux, mais ce n'est pas suffisant. Avec JTBD, on demande une couche de plus : ce que l'utilisateur veut vraiment accomplir pourrait être :
+
+- Je veux, dans les 10 minutes après la réunion, synchroniser les résultats de la discussion avec les absents
+- Je veux extraire proprement les tâches, les responsables et les délais, pour que l'équipe ne collabore plus à base de mémoire
+- Je veux réduire le temps passé à organiser le contenu des réunions, pour consacrer mon énergie aux décisions et à l'avancement
+
+Une fois le job clairement énoncé, beaucoup de priorités de fonctionnalités émergent naturellement. La chose la plus importante pour la première version n'est peut-être pas « supporter 12 formats d'exportation », mais :
+
+- La structure du compte rendu doit être suffisamment claire
+- L'extraction des tâches doit être fiable
+- Le lien de partage doit être pratique
+- Le résultat doit être assez fiable pour être directement transféré à l'équipe
+
+C'est la valeur de JTBD : **il vous aide à passer de « quelles capacités dois-je empiler » à « quelle progression je dois aider l'utilisateur à accomplir ».**
+
+## 4. Un modèle JTBD pratique
+
+Si vous êtes débutant, ne cherchez pas à rendre JTBD trop académique. Saisissez les 5 éléments les plus utiles pour commencer.
+
+### 4.1 Contexte
+
+À quel moment, dans quel environnement l'utilisateur pense-t-il à ce produit ?
+
+- Juste après une réunion
+- Quand le patron demande soudainement un document
+- Le soir en préparant une candidature
+- En fin de mois quand on réalise que l'argent manque à nouveau
+
+**Un besoin sans contexte n'est généralement pas encore assez réel.**
+
+### 4.2 Déclencheur
+
+Qu'est-ce qui le pousse à chercher immédiatement une solution ?
+
+- Être submergé par un long document, sans savoir par où commencer
+- Devoir rendre un document demain, et découvrir aujourd'hui que le format est chaotique
+- Venir d'être rappelé par le manager sur l'avancement, et réaliser qu'on n'a pas organisé clairement
+- Vouloir tenir un journal, mais l'écriture manuelle, le copier-coller et l'organisation sont trop pénibles
+
+Le déclencheur porte souvent une émotion. Cette émotion est importante, car elle détermine pourquoi l'utilisateur passe à l'action à ce moment précis.
+
+### 4.3 La progression souhaitée
+
+Il ne veut pas seulement « faire une action », mais se propulser vers quel nouvel état ?
+
+- Du chaos à la clarté
+- De l'anxiété à la tranquillité
+- De la procrastination au démarrage
+- De l'inefficacité à la fluidité
+- De l'incapacité à expliquer à la capacité de livrer directement
+
+À cette étape, le mot « progression » est crucial. Parce que beaucoup de gens n'achètent pas vraiment un outil, mais un **changement d'état**.
+
+### 4.4 L'alternative actuelle
+
+Sans votre produit, comment fait-il ?
+
+- Copier-coller manuel
+- Se débrouiller avec Excel ou Notes
+- Demander de l'aide à un collègue
+- Remettre à plus tard
+- Naviguer entre plusieurs outils
+
+Qui est l'alternative, qui est votre véritable environnement concurrentiel.
+
+### 4.5 Critère de succès
+
+Quand peut-on dire que le problème est vraiment résolu ?
+
+- Obtenir un résultat partageable en 10 minutes
+- Pouvoir envoyer aux autres sans révision majeure
+- Ne pas facilement oublier, se tromper ou manquer quelque chose
+- Savoir quoi faire dès la première utilisation
+
+Si vous ne savez même pas « comment l'utilisateur juge si ça valait le coup », cette direction n'est probablement pas encore assez aboutie.
+
+<a id="jtbd-formula"></a>
+## [5. La formule en une phrase, prête à l'emploi](#top-jtbd)
+
+Quand vous voulez clarifier une direction produit, vous pouvez d'abord utiliser cette formule très pratique :
+
+> Quand __________, je veux __________, afin de __________.
+> Actuellement, je ne peux accomplir cette tâche qu'en __________.
+
+Par exemple :
+
+> Quand je sors d'une réunion de projet chargée en informations, je veux obtenir rapidement un compte rendu structuré avec les tâches, les responsables et les délais, afin de pouvoir synchroniser immédiatement l'équipe et faire avancer l'exécution.
+> Actuellement, je ne peux m'en sortir qu'en me remémorant, en fouillant dans l'historique de chat et en organisant manuellement.
+
+Autre exemple :
+
+> Quand je prépare une candidature pour un nouveau poste, je veux rapidement adapter mes expériences existantes en une version plus ciblée sur le poste, afin de soumettre un CV décent avec plus de confiance.
+> Actuellement, je ne fais que copier-coller l'ancien CV, modifier les formulations à la main, et à la fin, je suis de moins en moins sûr de moi.
+
+Si vous pouvez écrire une phrase avec ce niveau de clarté, la conception des pages, des prompts et la hiérératisation des fonctionnalités deviendront beaucoup plus faciles.
+
+## 6. Pour les produits AI, trois couches de job à examiner particulièrement
+
+Beaucoup de produits AI semblent impressionnants en démonstration, mais ne parviennent pas à fidéliser les utilisateurs une fois en ligne. La raison courante est qu'ils ne résolvent que l'action de surface, pas le job plus profond.
+
+Vous pouvez grossièrement diviser un job en trois couches :
+
+### 6.1 Couche fonctionnelle
+
+Quelle est la tâche la plus en surface ?
+
+- Résumer un document
+- Réécrire un texte
+- Extraire les tâches
+- Générer une image
+
+C'est la couche que les utilisateurs expriment le plus facilement.
+
+### 6.2 Couche émotionnelle
+
+Quel inconfort l'utilisateur veut-il réduire, ou quel ressenti veut-il obtenir ?
+
+- Ne plus paniquer
+- Ne plus paraître non professionnel
+- Ne plus recommencer de zéro à chaque fois
+- Avoir plus de sentiment de contrôle
+
+Beaucoup de volontés de paiement sont en réalité liées à la couche émotionnelle.
+
+### 6.3 Couche sociale
+
+Comment l'utilisateur veut-il être perçu par les autres ?
+
+- Avoir l'air plus fiable
+- Avoir l'air plus organisé dans l'équipe
+- Avoir l'air plus professionnel face aux clients
+- Avoir l'air plus expressif sur les réseaux sociaux
+
+Si vous ne faites que la couche fonctionnelle, le produit sera facilement remplaçable ; si vous comprenez aussi les couches émotionnelle et sociale, vous trouverez plus facilement une valeur vraiment engageante.
+
+## 7. Utiliser JTBD pour filtrer les directions produit en sens inverse
+
+Parfois, ce n'est pas que vous avez déjà un produit, mais que vous avez 3 à 5 idées et ne savez pas laquelle réaliser. JTBD est alors idéal pour le filtrage.
+
+Vous pouvez prendre chaque idée et vous poser 5 questions :
+
+1. Le contexte correspondant à cette idée est-il suffisamment spécifique ?
+2. Les utilisateurs utilisent-ils déjà une méthode de fortune pour s'en sortir ?
+3. La douleur de ce job est-elle suffisamment forte, ou suffisamment fréquente ?
+4. Si je le fais bien, l'utilisateur sentira-t-il clairement que « son état s'est amélioré » ?
+5. La première version peut-elle se concentrer uniquement sur l'étape clé de ce job, pour produire une version petite mais utile ?
+
+Si une direction, après réflexion, ne peut toujours être décrite que par « ça a l'air intéressant », sans pouvoir préciser le déclencheur, l'alternative et le critère de succès, c'est probablement encore une inspiration vague, pas une direction aboutie.
+
+## 8. Des questions prêtes à l'emploi pour interroger les utilisateurs
+
+Beaucoup de gens, quand ils font une étude, demandent : « Quelle fonctionnalité voulez-vous ? » Ce type de question génère facilement des réponses superficielles.
+
+JTBD est plus adapté pour poser les questions suivantes :
+
+- Quand est la dernière fois que vous avez rencontré ce problème ?
+- Que faisiez-vous à ce moment-là, pourquoi étiez-vous bloqué ?
+- Comment l'avez-vous finalement résolu ?
+- Dans ce processus, qu'est-ce qui était le plus pénible, le plus lent, le plus angoissant ?
+- S'il y avait un outil pour vous aider, quel résultat vous ferait dire qu'il est vraiment utile ?
+- Quelles alternatives avez-vous essayées ? Pourquoi n'étaient-elles pas assez bonnes ?
+
+L'avantage de cette approche est qu'elle ramène la conversation vers les expériences réelles, au lieu de rester sur des préférences imaginaires.
+
+## 9. Utiliser l'IA pour vous aider dans la décomposition JTBD
+
+JTBD n'a pas été inventé par l'IA, mais l'IA est très bien adaptée pour vous aider à organiser et affiner les analyses JTBD.
+
+Par exemple, si vous avez collecté 5 à 10 retours utilisateurs, vous pouvez les confier au modèle et lui demander de les synthétiser selon la structure suivante :
+
+```text
+Merci de jouer le rôle d'assistant de recherche produit.
+Je vais vous donner des citations d'utilisateurs, ne donnez pas d'abord de suggestions de fonctionnalités,
+mais organisez-les d'abord selon le framework Jobs to Be Done :
+
+1. Dans quel contexte se trouve l'utilisateur
+2. Quel est l'événement déclencheur de son action
+3. Quelle progression veut-il vraiment accomplir
+4. Quelle est l'alternative actuelle
+5. Quel critère de succès est le plus important pour lui
+6. Quels mots émotionnels reviennent dans ces retours
+
+Enfin, organisez tout cela en 3 hypothèses JTBD les plus dignes d'être validées en priorité.
+```
+
+Si vous avez déjà une idée, vous pouvez aussi demander à l'IA de faire une première convergence :
+
+```text
+Je veux créer un [votre idée produit].
+Ne me donnez pas directement une liste de fonctionnalités, mais analysez avec la méthode Jobs to Be Done :
+
+1. Quels contextes spécifiques ce produit pourrait-il servir
+2. Quel est le job central que l'utilisateur veut accomplir dans chaque contexte
+3. Quelles sont les alternatives existantes
+4. Quel job est le plus adapté comme point de départ MVP, et pourquoi
+5. Écrivez le job final recommandé en une phrase JTBD claire
+```
+
+L'avantage de cette approche est que vous ne vous faites pas immédiatement emporter par l'IA vers « 50 idées de fonctionnalités », mais vous clarifiez d'abord la direction.
+
+## 10. Les 4 erreurs les plus courantes chez les débutants
+
+### 10.1 Écrire le job comme un nom de fonctionnalité
+
+« Résumé AI », « Classification intelligente », « Génération automatique » — ce ne sont pas des jobs, ce sont seulement des modes de réalisation possibles.
+
+### 10.2 Écrire un public beaucoup trop large
+
+« Tous les professionnels », « tous les étudiants », « tous les entrepreneurs » — tout cela est généralement trop vague. Plus c'est vague, plus il est difficile de voir les scénarios réels.
+
+### 10.3 Écouter seulement ce que les utilisateurs disent, sans observer ce qu'ils font
+
+Les utilisateurs peuvent décrire ce qu'ils veulent, mais leurs véritables priorités sont souvent cachées dans la façon dont ils se débrouillent actuellement.
+
+### 10.4 Vouloir construire une plateforme complète dès le début
+
+La bonne approche de JTBD n'est généralement pas « je vais construire une grande plateforme qui fait tout », mais cibler d'abord l'étape la plus critique dans un scénario, et la rendre extrêmement fluide.
+
+## 11. Résumé
+
+La valeur la plus importante de Jobs to Be Done n'est pas de vous donner un nouveau terme, mais de vous aider à changer de perspective : **ne vous fixez pas uniquement sur les fonctionnalités du produit, mais sur ce que l'utilisateur veut faire avancer à l'étape suivante.**
+
+Quand vous commencerez à vous poser répétitivement ces questions :
+
+- Dans quel contexte l'utilisateur embauche-t-il ce produit
+- Où est-il exactement bloqué
+- Quelle méthode de fortune utilise-t-il actuellement
+- Une fois le problème résolu, quel sera le changement d'état
+
+Vous découvrirez que beaucoup d'idées floues deviennent soudainement claires, et que beaucoup de fonctionnalités tape-à-l'œil deviennent soudainement moins importantes.
+
+Créer un produit, surtout un produit AI, le plus grand risque est de se laisser absorber par la démonstration de capacités dès le début. JTBD vous aide à ramener l'attention sur ce qui compte vraiment : **pourquoi l'utilisateur a besoin de vous, et quelle progression vous l'aidez à accomplir.**
+
+<a id="jtbd-ai"></a>
+## [12. Comment utiliser l'IA pour mettre en pratique JTBD](#top-jtbd)
+
+JTBD n'a pas été inventé par l'IA, mais l'IA est très bien adaptée pour servir d'assistante de recherche, d'assistante d'organisation et de miroir dans cette méthode. L'essentiel est : **laissez l'IA vous aider à organiser et à élargir, pas à deviner les utilisateurs à votre place.**
+
+Voici comment l'utiliser :
+
+### 12.1 Laissez l'IA réécrire vos idées vagues en hypothèses JTBD
+
+Quand vous n'avez qu'une description vague en tête, comme « je veux créer un outil pour aider les étudiants à trouver un stage », vous pouvez d'abord demander à l'IA de la décomposer en plusieurs jobs possibles :
+
+```text
+J'ai une idée produit vague : [votre idée]
+Ne me donnez pas directement une liste de fonctionnalités, mais analysez avec la méthode Jobs to Be Done :
+1. Quels contextes spécifiques cela pourrait-il correspondre
+2. Quelle progression l'utilisateur veut vraiment accomplir dans chaque contexte
+3. Quelles pourraient être les alternatives actuelles
+4. Quel job est le plus adapté pour un MVP en premier
+Écrivez chaque job en une phrase JTBD claire.
+```
+
+Vous pouvez même écrire une entrée très basique :
+
+```text
+Je veux créer un truc pour aider les étudiants à trouver un stage.
+Je ne sais pas encore exactement quoi faire, aidez-moi à réfléchir à ce que les utilisateurs veulent vraiment accomplir.
+```
+
+L'IA pourrait répondre quelque chose comme :
+
+```text
+Directions JTBD possibles :
+
+1. Quand je prépare ma première candidature de stage, je veux savoir rapidement quels documents préparer en priorité,
+pour ne pas reporter ma candidature à cause de la confusion.
+
+2. Quand je vois une offre de stage, je veux juger rapidement si ça vaut le coup de postuler,
+pour ne pas perdre trop de temps sur des postes inadaptés.
+
+3. Quand je commence à postuler, je veux adapter mon CV existant en une version plus ciblée sur le poste,
+pour pouvoir postuler plus vite et améliorer mon taux de réussite.
+```
+
+La valeur de ce type de résultat est qu'il décompose votre pensée vague en plusieurs directions plus proches de scénarios réels.
+
+### 12.2 Laissez l'IA organiser les citations d'utilisateurs
+
+Si vous avez déjà fait quelques entretiens, vous pouvez confier les notes à l'IA pour qu'elle en extraie les contextes, déclencheurs, alternatives et critères de succès qui reviennent :
+
+```text
+Voici les citations de 5 utilisateurs.
+Ne donnez pas d'abord de solution, mais organisez selon le framework JTBD :
+1. Dans quel contexte se trouve l'utilisateur
+2. Quel est l'événement déclencheur de son action
+3. Quelle progression veut-il vraiment accomplir
+4. Quelle est l'alternative actuelle
+5. Quel critère de succès est le plus important pour lui
+6. Quelles informations reviennent chez plusieurs utilisateurs
+Enfin, organisez en 3 hypothèses JTBD prioritaires pour validation.
+```
+
+Une entrée très simple pourrait être :
+
+```text
+J'ai demandé à 3 personnes, ils m'ont dit à peu près ceci :
+
+1. Chaque fois que je dois postuler, je dois refaire mon CV, c'est vraiment pénible.
+2. En fait, ce que je crains le plus, c'est de ne pas savoir si ce que j'écris est correct.
+3. Actuellement, je demande aux anciens de m'aider à relire, mais je n'ose pas toujours les déranger.
+
+Organisez-moi ça : que veulent-ils vraiment accomplir ?
+```
+
+L'IA pourrait répondre :
+
+```text
+Résultat de l'organisation :
+
+- Contexte commun : préparer une candidature de stage, besoin de traiter le CV
+- Difficulté commune : ne pas savoir comment modifier pour que ce soit « assez bon »
+- Alternative actuelle : demander aux anciens de relire, modifier soi-même en boucle
+- JTBD possible :
+  Quand je prépare ma candidature de stage, je veux juger plus vite si mon CV a atteint le niveau pour être envoyé,
+  pour ne pas rester bloqué à « encore un peu de modification » et ne jamais l'envoyer.
+```
+
+Ce type de résultat est utile parce qu'il vous aide à extraire des notes dispersées quelque chose qui ressemble davantage à un « besoin ».
+
+### 12.3 Laissez l'IA faire une recherche en ligne légère
+
+Avant de vous lancer dans des entretiens à grande échelle, vous pouvez demander à l'IA de faire un scan externe très léger, comme :
+
+- Dans les forums ou communautés publics, comment les gens se plaignent-ils de ce problème
+- Les produits existants résolvent-ils principalement quelle couche du problème
+- Quelle est l'alternative la plus courante des utilisateurs
+- Dans les avis fréquents, qu'est-ce que les gens apprécient le plus et le moins
+
+Ce type de recherche ne remplace pas les entretiens avec de vrais utilisateurs, mais il est idéal comme échauffement en phase Discover, pour construire d'abord une carte des problèmes.
+
+Une entrée simple pourrait être :
+
+```text
+Merci de rechercher :
+« Quelles sont les douleurs les plus fréquentes quand les étudiants modifient leur CV et postulent pour des stages ? »
+Priorisez les forums publics, les posts d'expérience et les communautés de recherche d'emploi.
+Organisez en 5 problèmes les plus fréquents.
+```
+
+L'IA pourrait répondre :
+
+```text
+Douleurs fréquentes :
+
+1. Ne sait pas quoi mettre dans le CV, trop peu d'expériences
+2. Ne sait pas comment adapter pour différents postes
+3. A modifié beaucoup de versions, mais n'est toujours pas sûr que c'est assez bon
+4. Ne trouve personne de fiable pour relire
+5. Le processus de candidature est complexe, tendance à procrastiner
+```
+
+Ce type de résultat ne peut pas être considéré comme conclusion finale, mais il est idéal pour décider quel type de problème interviewer en priorité.
+
+### 12.4 Laissez l'IA jouer le rôle de « contre-partie »
+
+Très souvent, nous sommes trop attachés à nos propres idées. Vous pouvez demander à l'IA de jouer un rôle de critique pour vous forcer à clarifier vos questions :
+
+```text
+Merci de jouer le rôle d'un consultant en recherche produit très strict.
+Voici mon hypothèse JTBD : [votre hypothèse]
+Critiquez-la sous les angles suivants :
+1. Le contexte est-il trop large
+2. Le job est-il écrit comme une fonctionnalité plutôt qu'une vraie progression
+3. L'alternative est-elle trop faible
+4. Le critère de succès n'est-il pas assez clair
+5. Quel est le risque principal qui nécessite une validation pour cette hypothèse
+```
+
+L'avantage de cette approche est que vous découvrirez plus vite si vous regardez un besoin ou seulement une solution que vous aimez.
+
+## 📚 Exercices
+
+En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
+
+1. Choisissez une idée produit que vous avez récemment, et écrivez-la clairement avec une phrase JTBD
+2. Complétez les 5 éléments pour cette idée : contexte, déclencheur, progression, alternative, critère de succès
+3. Trouvez 3 utilisateurs potentiels, et demandez au moins une fois « quand est la dernière fois que vous avez rencontré ce problème »
+4. Confiez les notes d'entretien à l'IA et organisez-les en 3 hypothèses JTBD prioritaires pour validation
+
+## Lectures complémentaires
+
+- [Christensen Institute : Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
+- [Harvard Business School Online : What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
+- [Intercom : Jobs-to-be-Done : A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
+- [Mural : Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
diff --git a/docs/fr-fr/stage-1/appendix-mom-test/index.md b/docs/fr-fr/stage-1/appendix-mom-test/index.md
new file mode 100644
index 0000000..fcc281c
--- /dev/null
+++ b/docs/fr-fr/stage-1/appendix-mom-test/index.md
@@ -0,0 +1,589 @@
+---
+title: "The Mom Test : comment valider les besoins par les entretiens utilisateurs"
+description: "Article d'introduction à The Mom Test pour les lecteurs débutants. Apprenez à éviter les retours de politesse, à mener des entretiens utilisateurs axés sur les comportements réels, les faits concrets et les problèmes existants, et à transformer les « ça a l'air pas mal » en jugements de besoins plus fiables."
+---
+
+<script setup>
+const duration = 'Environ <strong>1,5 heure</strong>'
+</script>
+
+# The Mom Test : comment valider les besoins par les entretiens utilisateurs
+
+<a id="top-mom"></a>
+
+## Introduction du chapitre
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Entretien utilisateur', 'Validation des besoins', 'Recherche utilisateur', 'Étude de marché']"
+  coreOutput="1 ensemble de questions d'entretien plus à même de révéler des informations réelles"
+  expectedOutput="Ne plus prendre les encouragements de politesse pour une validation, et savoir juger la direction à partir de comportements réels"
+>
+
+Beaucoup de gens, lorsqu'ils font leur première étude de marché, pensent que le plus important est de « discuter avec des gens ». Alors ils vont demander à leurs amis, collègues, voire leur famille :
+
+- Tu penses quoi de mon idée ?
+- S'il y avait un produit comme ça, tu l'utiliserais ?
+- Cette fonctionnalité, ça a l'air pas mal, non ?
+
+L'autre personne donne souvent un retour très encourageant :
+
+- C'est pas mal
+- Ça a l'air utile
+- Je pense que tu devrais essayer
+
+Le problème, c'est que ces réponses ne vous aident généralement pas à prendre une décision. Elles ressemblent davantage à de la politesse, du soutien, ou une réaction naturelle pour ne pas vous décevoir sur le moment. Vous pensez avoir obtenu une « validation de marché », mais en réalité vous n'avez collecté qu'un ensemble de réconforts difficilement exploitables pour la prise de décision.
+
+La méthode The Mom Test a été conçue précisément pour résoudre ce problème. Elle nous rappelle : **ce n'est pas que les utilisateurs essaient de vous mentir, c'est que votre façon de poser les questions oriente naturellement l'autre personne vers des réponses flatteuses mais inutiles.**
+
+</ChapterIntroduction>
+
+::: info SOP minimale
+**Objectif** : après avoir lu, vous saurez mieux comment discuter avec les utilisateurs pour ne pas entendre uniquement « ça a l'air pas mal », mais vraiment obtenir des informations qui vous aident à juger la direction.
+
+**Actions** : réécrivez vos 5 questions initiales, en privilégiant « quand est la dernière fois que ça s'est produit » et « comment avez-vous géré ça à ce moment-là ».
+
+**Résultat** : vous saurez plus facilement distinguer ce qui est une opinion de ce qui constitue une véritable preuve pour étayer vos décisions.
+
+**Navigation rapide** : [Qu'est-ce que The Mom Test](#mom-what) · [Trois principes fondamentaux](#mom-principles) · [Comment l'IA peut vous aider](#mom-ai)
+:::
+
+## Ce que vous apprendrez
+
+1. Quel problème The Mom Test résout réellement, et pourquoi beaucoup de « recherches utilisateurs » ne capturent en fait pas d'informations réelles
+2. Les principes fondamentaux de cette méthode : moins demander des opinions, plus demander des comportements ; moins demander des hypothèses, plus demander des faits
+3. Comment transformer une question qui génère facilement des faux positifs en une question d'entretien plus précieuse
+4. Comment combiner The Mom Test avec JTBD, la validation des besoins et l'évaluation du MVP
+
+<a id="mom-what"></a>
+## [1. Qu'est-ce que The Mom Test vraiment](#top-mom)
+
+The Mom Test vient du livre du même nom de Rob Fitzpatrick. Son nom ressemble à une blague, mais il touche juste :
+
+**Même votre maman aurait du mal à vous dire directement « c'est une mauvaise idée ».**
+
+La raison n'est pas qu'elle est malhonnête, mais :
+
+- Elle ne veut pas vous blesser
+- Elle va instinctivement vous encourager
+- Elle a facilement tendance à répondre dans le sens de ce que vous exprimez
+
+Et ce n'est pas seulement votre maman — les amis, collègues, anciens camarades de classe, et même beaucoup d'inconnus, face à votre idée de produit, donnent souvent des « retours positifs » similaires. Cela ne signifie pas que le besoin est réel, seulement que vous avez formulé votre question d'une manière qui génère facilement des réponses flatteuses.
+
+Donc, l'essentiel de The Mom Test n'a jamais été « ne demandez pas à votre maman », mais :
+
+**Ne formulez pas vos questions de façon à ce que n'importe qui soit enclin à vous donner une réponse qui vous va droit au cœur.**
+
+Ce que cette méthode veut vraiment vous apprendre, c'est comment obtenir, par la conversation, des informations plus proches des besoins réels, plutôt que de collecter un ensemble de commentaires qui vous font simplement vous sentir bien.
+
+## 2. Quel est le problème fondamental qu'elle résout
+
+The Mom Test résout principalement une illusion cognitive très courante :
+
+**Prendre les retours positifs de politesse pour des besoins réels.**
+
+Par exemple, si vous demandez :
+
+- Tu penses quoi de cette idée d'application ?
+- Si je faisais un outil AI pour t'aider à écrire ton CV, tu l'utiliserais ?
+- Cette fonctionnalité, est-ce qu'elle a de la valeur ?
+
+Ces questions ont en commun :
+
+- Elles demandent toutes des « opinions »
+- Elles portent toutes une pointe de suggestion
+- Elles parlent toutes d'un futur qui n'est pas encore arrivé
+
+Or, les réponses des gens aux « opinions » et aux « hypothèses futures » sont généralement instables. Beaucoup de gens surestiment leur intérêt, leur capacité d'exécution, et leur volonté future de payer.
+
+The Mom Test vous rappelle donc :
+
+- Ne croyez pas trop les évaluations des autres sur vos idées
+- Ne croyez pas trop les prédictions des autres sur leurs comportements futurs
+- Revenez autant que possible aux comportements réels déjà observés chez les utilisateurs
+
+Parce que comparé à « est-ce que tu utiliserais ça », « comment as-tu géré ce problème la dernière fois » est souvent bien plus proche de la vérité.
+
+<a id="mom-principles"></a>
+## [3. Les trois principes fondamentaux](#top-mom)
+
+Si vous ne deviez retenir que la partie la plus importante, commencez par ces trois principes.
+
+### 3.1 Parlez moins de votre idée, parlez plus des expériences réelles passées de l'utilisateur
+
+Beaucoup d'entretiens inefficaces commencent par exposer sa propre solution, à quel point on est enthousiaste, quel produit on prépare. Le problème, c'est qu'une fois que vous avez trop parlé, l'autre personne passe facilement en mode « vous accompagner » et « vous encourager ».
+
+Une meilleure approche consiste à se concentrer sur l'expérience de l'autre :
+
+- Quand est la dernière fois que vous avez rencontré ce problème ?
+- Que faisiez-vous à ce moment-là ?
+- Comment avez-vous fini par le résoudre ?
+- Quelle étape était la plus pénible ?
+
+Ce type de questions ramène naturellement la conversation vers la réalité, au lieu de rester sur des préférences imaginaires.
+
+### 3.2 Demandez moins d'opinions abstraites, demandez plus de faits concrets
+
+« Je trouve cette fonctionnalité pas mal », « ça a l'air bien », « ça semble utile » — toutes ces expressions sont trop abstraites pour guider les décisions produit.
+
+Les informations plus précieuses ressemblent plutôt à ça :
+
+- La semaine dernière, j'ai passé 2 heures à me débattre avec ce problème
+- Actuellement, je me débrouille avec Excel et WeChat
+- Le mois dernier, j'ai déjà payé pour un outil similaire
+- Ma plus grande crainte est de me tromper, pas d'être lent
+
+Ce sont ces informations qui vous aident vraiment à juger l'intensité du problème, sa fréquence et la probabilité de paiement.
+
+### 3.3 Demandez moins aux utilisateurs quelle solution ils veulent, observez davantage comment ils résolvent le problème actuellement
+
+Les utilisateurs sont très doués pour décrire leurs frustrations, mais pas nécessairement pour concevoir des solutions.
+
+Si vous demandez :
+
+- Voudriez-vous un AI qui fait ça automatiquement pour vous ?
+- Pensez-vous qu'ajouter une fonctionnalité intelligente serait utile ?
+
+Vous n'obtiendrez généralement qu'une attitude vague envers une solution, pas le besoin lui-même.
+
+Les meilleures questions sont :
+
+- Comment gérez-vous ce problème actuellement ?
+- Pourquoi avez-vous choisi cette méthode ?
+- Qu'est-ce qui ne va pas avec cette méthode ?
+
+Comprendre les alternatives actuelles est souvent plus important que de demander directement « que voulez-vous ».
+
+## 4. Pourquoi les gens vous donnent toujours des réponses flatteuses mais inutiles
+
+Si vous comprenez cela, vous ferez beaucoup moins d'erreurs de jugement lors des entretiens.
+
+### 4.1 Les gens sont instinctivement polis
+
+Surtout quand votre interlocuteur a une relation avec vous, il aura du mal à dire directement :
+
+- Cette direction ne me semble pas viable
+- Je n'utiliserais pas ça du tout
+- Ce problème n'est pas si important pour moi
+
+Il dira plus probablement « c'est pas mal » ou « ça vaut le coup d'essayer ».
+
+### 4.2 Les gens surestiment leur futur moi
+
+Beaucoup de gens croient sincèrement qu'ils seront à l'avenir :
+
+- Plus disciplinés
+- Plus disposés à apprendre
+- Plus disposés à payer
+- Plus ouverts aux nouveaux outils
+
+Donc la phrase « si ça existait, je l'utiliserais probablement » ne signifie souvent pas que la personne l'utilisera vraiment.
+
+### 4.3 Votre façon de poser les questions oriente les réponses
+
+Quand vous demandez :
+
+- Mon idée est pas mal, non ?
+- Cette fonctionnalité vous serait très utile, n'est-ce pas ?
+
+Vous avez subtilement glissé la « bonne réponse » dans la question.
+
+C'est pourquoi The Mom Test insiste particulièrement : **ne transformez pas vos entretiens en quête de validation.**
+
+## 5. Comparaison directe : quelles questions sont inutiles, lesquelles sont plus précieuses
+
+Ces comparaisons sont utiles pour presque tous les débutants.
+
+| Questions inutiles | Questions plus précieuses |
+| --- | --- |
+| Tu penses quoi de mon idée ? | Quand est la dernière fois que tu as rencontré ce problème ? |
+| S'il y avait ce produit, tu l'utiliserais ? | Comment gérez-vous ce problème actuellement ? |
+| Serais-tu prêt à payer pour cette fonctionnalité ? | As-tu déjà dépensé de l'argent pour ce problème ? Pour quoi ? |
+| Trouves-tu cette fonctionnalité importante ? | Dans ce processus, quelle étape est la plus pénible, la plus lente, la plus angoissante ? |
+| Voudrais-tu un AI qui fait ça automatiquement ? | Pourquoi n'as-tu pas encore trouvé de meilleure solution ? |
+
+Ce qui est le plus important dans ce tableau, ce ne sont pas les phrases exactes, mais la direction sous-jacente :
+
+- Des opinions vers les faits
+- Du futur vers le passé
+- De votre solution vers le problème de l'utilisateur
+
+## 6. Un rythme d'entretien que même un débutant peut utiliser immédiatement
+
+Si vous voulez aller parler à des gens dès maintenant, vous pouvez suivre cet ordre.
+
+### 6.1 Ouverture : expliquez que vous apprenez, pas que vous vendez
+
+Par exemple :
+
+> Je fais des recherches sur la façon dont les gens gèrent ce type de problème, je veux d'abord comprendre la situation réelle, je ne viens pas vous vendre quelque chose.
+
+Cette formulation permet à l'autre personne de relâcher plus facilement le fardeau psychologique de « devoir vous donner un retour positif ».
+
+### 6.2 Commencez par la dernière expérience réelle
+
+Vous pouvez commencer par ce type de questions :
+
+- Quand est la dernière fois que vous avez rencontré ce problème ?
+- Que s'est-il passé à ce moment-là ?
+- Quelle a été votre première réaction pour le gérer ?
+
+Une fois que la conversation entre dans des événements précis, la qualité des informations s'améliore généralement de manière significative.
+
+### 6.3 Approfondissez sur les comportements, les coûts et les alternatives
+
+Continuez à demander :
+
+- Comment résolvez-vous ce problème actuellement ?
+- Qu'est-ce qui est le plus désagréable dans cette méthode ?
+- Combien de temps, d'argent ou d'énergie y consacrez-vous ?
+- Avez-vous essayé d'autres méthodes ? Pourquoi ne les avez-vous pas poursuivies ?
+
+### 6.4 Enfin, évaluez la douleur et la priorité
+
+Vous n'avez pas besoin de demander directement « est-ce douloureux ? », vous pouvez juger à partir des détails :
+
+- Est-ce que ça arrive souvent
+- Est-ce qu'il cherche activement des solutions de secours
+- Est-ce qu'il est déjà prêt à payer pour ça
+- Est-ce qu'il montre des émotions évidentes quand il en parle
+
+Tout cela est plus utile qu'une simple « est-ce que c'est votre point de douleur ».
+
+## 7. Un exemple plus complet
+
+Supposons que vous voulez créer un produit « AI qui aide les étudiants à améliorer leur CV ».
+
+### Mauvaise approche
+
+Vous allez demander à des camarades :
+
+> Je veux créer un outil d'optimisation de CV par AI, tu en penses quoi ?
+> S'il pouvait adapter automatiquement le CV selon le poste, tu l'utiliserais ?
+
+À ce moment, l'autre personne dira probablement :
+
+- Ça a l'air pas mal
+- Je pense que ça pourrait être utile
+> Si c'est gratuit, j'essaierais
+
+Ces réponses ne vous aident pratiquement pas à déterminer si le besoin est fort ou non.
+
+### Meilleure approche
+
+Vous pourriez reformuler :
+
+> Quand est la dernière fois que tu as modifié ton CV ?
+> Pourquoi devais-tu le modifier à ce moment-là ?
+> Comment t'y es-tu pris ?
+> Quelle étape t'a le plus bloqué ?
+> As-tu demandé à quelqu'un de t'aider à le relire ?
+> As-tu déjà passé beaucoup de temps ou dépensé de l'argent pour ton CV ?
+
+Grâce à ces questions, les informations que vous pourriez obtenir sont :
+
+- Beaucoup de gens ne savent pas écrire, mais ne savent pas comment adapter leur CV pour différents postes
+- Leur plus grande difficulté n'est pas la mise en page, mais « ne pas savoir quelles expériences valent la peine d'être mentionnées »
+- Ils procrastinent, pas parce qu'ils sont paresseux, mais parce que chaque modification de CV est épuisante
+- Ils utilisent déjà les conseils de leurs aînés, les sites de modèles, les outils AI et les relectures par des amis pour s'en sortir
+
+À ce stade, vous êtes bien plus proche du problème réel.
+
+## 8. Comment combiner The Mom Test avec JTBD
+
+Si JTBD vous aide à voir « ce que l'utilisateur veut accomplir », The Mom Test vous apprend plutôt :
+
+**Comment vérifier, par des entretiens, si ce job existe vraiment.**
+
+Vous pouvez tout à fait les utiliser ensemble :
+
+1. D'abord, utilisez JTBD pour formuler une hypothèse de job
+2. Puis utilisez les techniques de The Mom Test pour interroger les utilisateurs sur leur dernière expérience réelle
+3. Vérifiez si ce job est vraiment fréquent, réel et prioritaire
+
+Par exemple, votre hypothèse JTBD pourrait être :
+
+> Quand je prépare ma candidature pour un stage, je veux rapidement adapter mon ancien CV en une version adaptée au poste, pour pouvoir soumettre ma candidature dès que possible.
+
+Vous pouvez alors vérifier avec des questions de style The Mom Test :
+
+- Quand est la dernière fois que tu as postulé ?
+- Comment as-tu modifié ton CV à ce moment-là ?
+- Quelle partie a été la plus difficile à écrire ?
+- Après modification, comment jugerais-tu si c'est assez bon ?
+
+Ainsi, les méthodes se connectent :
+
+- JTBD vous aide à définir l'hypothèse de besoin
+- The Mom Test vous aide à vérifier l'hypothèse par entretien
+
+## 9. Erreurs les plus courantes des débutants lors des entretiens utilisateurs
+
+### 9.1 Transformer l'entretien en présentation produit
+
+Plus vous parlez de vos propres idées, plus l'autre personne aura tendance à vous suivre, au lieu de vous dire la réalité.
+
+### 9.2 N'interroger que des connaissances
+
+Les connaissances ne sont pas interdites, mais elles sont plus enclines à vous encourager. Vous devez au moins mélanger des personnes plus proches des utilisateurs réels, pas seulement des gens qui vous soutiennent.
+
+### 9.3 Poser des questions sur les fonctionnalités trop tôt
+
+Si vous n'avez pas encore compris le problème, commencer à poser des questions sur les boutons, l'interface et les détails des fonctionnalités, c'est généralement entrer trop tôt dans la solution.
+
+### 9.4 Prendre un « je l'utiliserais » pour un résultat de validation
+
+L'entretien vous aide au mieux à juger la direction, il ne remplace pas la validation. La vraie validation, c'est de voir si les utilisateurs sont prêts à payer un coût réel — temps, coût de changement, essai, voire paiement.
+
+### 9.5 Ne pas organiser les notes après l'entretien
+
+Si vous laissez les informations de côté après avoir discuté, elles deviennent vite des impressions floues. Il vaut mieux les organiser rapidement :
+
+- Les problèmes les plus fréquents
+- Les mots émotionnels dans les propos originaux des utilisateurs
+- Les solutions alternatives actuelles
+- Les coûts déjà engagés
+- Vos propres nouveaux jugements
+
+## 10. Liste de questions prêtes à l'emploi
+
+Si vous voulez commencer rapidement, voici un ensemble de questions suffisamment polyvalentes.
+
+### Questions d'ouverture
+
+- Quand est la dernière fois que vous avez rencontré ce problème ?
+- Que s'est-il passé exactement à ce moment-là ?
+
+### Questions sur les comportements
+
+- Comment avez-vous géré la situation à ce moment-là ?
+- Pourquoi avez-vous choisi cette méthode ?
+
+### Questions sur les coûts
+
+- Combien de temps ou d'énergie cette tâche vous prend-elle généralement ?
+- Avez-vous déjà dépensé de l'argent pour la résoudre ?
+
+### Questions sur les alternatives
+
+- Avez-vous essayé d'autres outils ou méthodes ?
+- Pourquoi ne les avez-vous pas continués ?
+
+### Questions de clôture
+
+- Si vous rencontrez le même problème à l'avenir, à quoi ressemblerait la solution idéale ?
+
+Notez que cette question de clôture peut être posée, mais il vaut mieux la garder pour la fin. Parce que vous avez d'abord besoin de recueillir des faits, pas des souhaits.
+
+## 11. Résumé
+
+La contribution la plus importante de The Mom Test n'est pas de vous donner une technique pour « mieux discuter », mais de vous aider à construire un mode de jugement plus lucide :
+
+- Ne croyez pas trop vite aux compliments des autres sur vos idées
+- Ne prenez pas « si ça existait, je l'utiliserais » pour un besoin réel
+- Ne transformez pas vos entretiens en quête de validation
+
+Un entretien véritablement précieux devrait revenir autant que possible à ces éléments :
+
+- La dernière expérience réelle de l'utilisateur
+- Comment il gère le problème actuellement
+- Ce qu'il a déjà payé
+- Où il est visiblement mal à l'aise
+
+Quand vous commencez à poser les questions de cette façon, les informations que vous obtiendrez seront parfois moins flatteuses, mais généralement plus utiles.
+Et quand on crée un produit, **une vérité utile est toujours plus importante qu'un encouragement flatteur.**
+
+<a id="mom-ai"></a>
+## [12. Comment utiliser l'IA pour vos entretiens utilisateurs](#top-mom)
+
+The Mom Test est fondamentalement une méthode pour « discuter avec de vraies personnes », l'IA ne peut donc pas remplacer les entretiens réels. Mais l'IA est très utile comme assistante avant, pendant et après les entretiens, surtout pour réduire la barrière d'entrée des débutants.
+
+### 12.1 Laissez l'IA réécrire vos questions « faciles à rater »
+
+Beaucoup de gens savent qu'ils ne devraient pas demander « tu penses quoi de mon idée », mais à la première occasion, ils reviennent à ce type de phrase. Vous pouvez d'abord confier vos questions préparées à l'IA pour qu'elle les réécrive :
+
+```text
+Voici les questions que je prépare pour des entretiens utilisateurs :
+[insérez vos questions]
+
+Merci de les réécrire selon les principes de The Mom Test :
+1. Supprimez les questions d'opinion
+2. Supprimez les questions qui supposent l'avenir
+3. Reformulez-les autant que possible autour des comportements passés réels, des alternatives existantes et des coûts déjà engagés
+4. Organisez le tout en une liste de 8 à 10 questions prêtes pour l'entretien
+```
+
+Même une entrée très basique fonctionne :
+
+```text
+Je veux demander aux utilisateurs :
+1. Tu penses quoi de mon idée d'outil AI pour améliorer les CV ?
+2. Tu l'utiliserais ?
+3. Serais-tu prêt à payer ?
+
+Aide-moi à reformuler ces questions.
+```
+
+L'IA pourrait produire quelque chose comme :
+
+```text
+Questions réécrites :
+
+1. Quand est la dernière fois que tu as modifié ton CV ?
+2. Pourquoi devais-tu le modifier ?
+3. Comment t'y es-tu pris ?
+4. Quelle étape t'a pris le plus de temps ?
+5. As-tu demandé à quelqu'un de t'aider à le relire ?
+6. As-tu déjà passé beaucoup de temps ou dépensé de l'argent pour modifier ton CV ?
+```
+
+Ce type de résultat est très utile parce qu'il transforme directement vos questions « demandant des opinions » en questions « demandant des comportements réels ».
+
+### 12.2 Laissez l'IA générer des guides d'entretien pour différents profils
+
+Pour un même domaine, face à différents publics, l'accent de l'entretien sera différent. Par exemple, les étudiants, les RH, les travailleurs indépendants ont des préoccupations complètement différentes. Vous pouvez demander à l'IA de générer une version de guide pour chaque type d'interlocuteur :
+
+- Pour les utilisateurs débutants, concentrez-vous sur la dernière expérience réelle
+- Pour les utilisateurs intensifs, concentrez-vous sur les alternatives et la douleur
+- Pour les utilisateurs payants, concentrez-vous sur les coûts déjà engagés
+
+Ainsi, vous aurez un meilleur rythme lors des vraies conversations, au lieu de poser les mêmes questions à tout le monde.
+
+Par exemple, vous pouvez saisir directement :
+
+```text
+Je vais discuter avec deux types de personnes :
+1. Étudiants qui cherchent leur premier stage
+2. Étudiants plus avancés qui ont déjà relu beaucoup de CV
+
+Donnez-moi un guide d'entretien pour chacun, 6 questions par guide.
+```
+
+L'IA pourrait générer :
+
+```text
+Pour les étudiants :
+1. Quand est la dernière fois que tu as postulé pour un stage ?
+2. Quelle étape t'a le plus bloqué ?
+3. Comment sais-tu si ton CV est prêt à être envoyé ?
+...
+
+Pour les étudiants avancés :
+1. Quand est la dernière fois que tu as aidé quelqu'un à relire son CV ?
+2. Quels problèmes évidents vois-tu le plus souvent ?
+3. À quelle étape les plus jeunes bloquent-ils le plus ?
+...
+```
+
+Ainsi, vous n'avez pas besoin d'inventer les questions à partir de zéro, la préparation de l'entretien sera beaucoup plus facile.
+
+### 12.3 Laissez l'IA organiser vos notes d'entretien
+
+Après les entretiens, le problème le plus fréquent n'est pas « manquer d'informations », mais « les informations sont trop dispersées ». L'IA est très adaptée pour vous aider à organiser des conversations fragmentées en notes structurées :
+
+```text
+Voici les notes de mes entretiens avec 3 utilisateurs.
+Merci de les organiser selon la perspective de The Mom Test :
+1. Quels contenus sont des faits, lesquels sont juste des opinions
+2. Quel est le dernier comportement réel de l'utilisateur
+3. Quelle est la solution alternative actuelle
+4. Quels sont les coûts en temps, argent ou énergie déjà engagés par l'utilisateur
+5. Quels problèmes ont été mentionnés à plusieurs reprises
+6. Quelles déclarations semblent positives mais manquent de preuves
+```
+
+Cette étape est particulièrement précieuse car elle vous aide à séparer le contenu « qui a l'air pas mal » du contenu « qui peut vraiment étayer vos décisions ».
+
+Une entrée simple pourrait être :
+
+```text
+Voici les notes après une conversation avec un utilisateur :
+
+- Elle a dit que si un outil existait, elle essaierait probablement
+- La semaine dernière, elle a passé une soirée entière à modifier son CV
+- Actuellement, elle demande principalement à des amis de l'aider à relire
+- Elle a dit que le plus difficile est de savoir quand un CV est « prêt à être envoyé »
+
+Aidez-moi à distinguer ce qui est opinion et ce qui est fait.
+```
+
+L'IA pourrait répondre :
+
+```text
+Opinions :
+- Si un outil existait, elle essaierait probablement
+
+Faits :
+- La semaine dernière, elle a passé une soirée à modifier son CV
+- La solution alternative actuelle est de demander à des amis de relire
+- Le point le plus difficile est de savoir quand on peut considérer le CV « prêt à envoyer »
+
+Points clés pour évaluer le besoin :
+- Ce problème est survenu récemment
+- L'utilisateur a déjà investi un temps significatif
+- La solution actuelle dépend d'autres personnes, elle n'est pas stable
+```
+
+Ce résultat montre très intuitivement aux débutants : quelles phrases peuvent servir à prendre des décisions, et lesquelles ne sont que des commentaires.
+
+### 12.4 Laissez l'IA faire une première recherche en ligne légère
+
+Si vous n'avez pas encore commencé vos entretiens, vous pouvez d'abord demander à l'IA de faire une recherche externe très légère, comme :
+
+- Dans les communautés publiques, comment les gens se plaignent-ils de ce problème récemment
+- Qu'est-ce qui est le plus critiqué dans les outils existants
+- Les utilisateurs ont-ils déjà payé pour des problèmes similaires
+- Quelles alternatives existent déjà sur le marché
+
+Ce type d'information ne remplace pas les entretiens avec de vraies personnes, mais peut vous aider à entrer plus rapidement dans le sujet et à savoir par où commencer les questions.
+
+Par exemple, une entrée simple pourrait être :
+
+```text
+Merci de rechercher :
+« Ce dont les étudiants se plaignent le plus quand ils modifient leur CV »
+Organisez les 5 plaintes les plus fréquentes, dans un langage très simple.
+```
+
+L'IA pourrait répondre :
+
+```text
+Plaintes fréquentes :
+
+1. Ne sait pas ce qu'il faut mettre dans le CV
+2. Devoir le modifier pour chaque poste, c'est fatigant
+3. Après de nombreuses modifications, on n'est toujours pas sûr que c'est bien
+4. Personne ne peut donner un retour fiable
+5. On a toujours l'impression de ne pas être prêt, donc on remet à plus tard
+```
+
+La valeur de ce type de résultat est qu'il vous permet de trouver plus facilement un angle d'attaque pour vos entretiens.
+
+### 12.5 Laissez l'IA jouer le rôle de « coach de débriefing d'entretien »
+
+Vous pouvez aussi confier les notes d'un entretien que vous venez de terminer à l'IA, et lui demander de vous faire des critiques :
+
+```text
+Voici les notes d'un entretien utilisateur que je viens de faire.
+Merci de m'aider à débriefé depuis la perspective de The Mom Test :
+1. Quelles questions ressemblaient trop à une recherche de validation
+2. Quelles questions étaient trop orientées
+3. Où aurais-je pu approfondir sur les faits
+4. Si je pouvais recommencer, comment pourrais-je mieux poser les questions dans cette conversation
+```
+
+C'est particulièrement utile pour les débutants, car vous développerez plus rapidement une sensibilité à « est-ce que je collecte des preuves ou des encouragements ».
+
+## 📚 Exercices
+
+En vous basant sur le contenu ci-dessus, veuillez réaliser les exercices suivants :
+
+1. Choisissez un produit que vous voulez créer récemment, et écrivez d'abord 5 questions « faciles à rater » que vous auriez posées
+2. Réécrivez ces 5 questions dans un style plus conforme à The Mom Test
+3. Trouvez 3 utilisateurs potentiels, et posez au moins une fois « quand est la dernière fois que vous avez rencontré ce problème »
+4. Après l'entretien, organisez 4 types d'informations : comportements réels, alternatives, coûts engagés, difficultés récurrentes
+
+## Lectures complémentaires
+
+- [Site officiel de The Mom Test](https://momtestbook.com/)
+- [Rob Fitzpatrick : The Mom Test](https://www.robfitz.com/the-mom-test/)
diff --git a/docs/fr-fr/stage-1/building-prototype/images b/docs/fr-fr/stage-1/building-prototype/images
new file mode 120000
index 0000000..b9f9b0c
--- /dev/null
+++ b/docs/fr-fr/stage-1/building-prototype/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/building-prototype/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/building-prototype/index.md b/docs/fr-fr/stage-1/building-prototype/index.md
new file mode 100644
index 0000000..471881c
--- /dev/null
+++ b/docs/fr-fr/stage-1/building-prototype/index.md
@@ -0,0 +1,607 @@
+---
+title: "Créer votre prototype : de l'analyse métier au prototype produit multi-pages"
+description: "Vivre le cycle complet de l'analyse métier à la réalisation d'un prototype produit multi-pages. Apprendre à poser des questions métier, décomposer les besoins, utiliser l'IDE AI pour générer des applications mono-page et multi-pages, et peaufiner et tester les prototypes."
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Environ <strong>8 heures</strong>'
+const relatedArticles =
+  relatedArticlesMap['fr-fr/stage-1/building-prototype'] ?? []
+</script>
+
+# Niveau débutant 3 : Créer votre prototype
+
+## Introduction du chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Analyse métier', 'Conception de prototype', 'Programmation assistée par AI', 'Applications multi-pages']" coreOutput="1 prototype d'atelier de contenus e-commerce" expectedOutput="Prototype Web interactif">
+
+Dans le chapitre précédent, nous avons appris à <strong>trouver de bonnes idées</strong> — partir des besoins utilisateurs pour trouver des directions pour lesquelles quelqu'un est prêt à payer. Mais trouver la direction n'est que la première étape, <strong>ce qui met vraiment à l'épreuve le chef de produit, c'est : comment transformer des besoins flous en un produit utilisable.</strong>
+
+Ce chapitre va résoudre un <strong>problème réel</strong> : votre patron vous lance un « utilise l'IA pour améliorer l'efficacité de la publication de produits sur les plateformes e-commerce » — comment transformer ça en un <strong>prototype produit fonctionnel</strong> ?
+
+Contrairement aux jeux Snake et calculatrices précédents, <strong>dans les vrais projets on ne peut pas inventer les fonctionnalités</strong> :
+
+1. <strong>Identifier les points de douleur</strong> : discuter avec les opérationnels, extraire des <strong>vrais points de douleur</strong> du vague « améliorer l'efficacité »
+2. <strong>Prioriser</strong> : parmi tous les problèmes, résoudre d'abord <strong>le plus douloureux</strong>, sans vouloir tout faire d'un coup
+3. <strong>Valider rapidement</strong> : utiliser l'IDE AI pour d'abord faire un <strong>prototype mono-page</strong>, puis étendre en multi-pages une fois que ça fonctionne
+4. <strong>Produire quelque chose d'utilisable</strong> : livrer finalement un <strong>atelier de contenus e-commerce démontrable et utilisable</strong>
+
+Nous apprendrons la transition de <strong>faire des jouets à faire des applications</strong>, et à <strong>empathiser et réfléchir aux vrais besoins des clients</strong>.
+
+</ChapterIntroduction>
+
+::: info ℹ️ Note
+Ce chapitre peut contenir des termes métier que vous ne connaissez pas — vous pouvez demander à l'IA de vous les expliquer.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Analyse des besoins', description: 'Du flou au concret' },
+      { title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
+      { title: 'Extension multi-pages', description: 'Structure d\'application complète' },
+      { title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Définir les besoins avant de coder
+
+Dans les tutoriels précédents, nous avons utilisé l'IDE AI pour générer facilement des jeux Snake et autres petits jeux, mais ce ne sont que des projets ludiques qui ne peuvent pas être appliqués au travail et à la vie quotidienne ; si nous voulons que les capacités AI soient véritablement utiles à tous, nous devons faire du Vibe Coding en combinant des scénarios de vie et de travail.
+
+Dans le chapitre précédent, nous avons appris à trouver des <strong>bonnes idées pour lesquelles quelqu'un est prêt à payer</strong>, mais trouver une direction n'est que le début. Quand on fait vraiment un produit, on découvre que : <strong>il y a un énorme fossé entre savoir « quoi faire » et savoir « comment le faire ».</strong>
+
+Ce fossé, c'est la <strong>spécification des besoins</strong>.
+
+Par exemple, dans un projet de classe ou personnel, on part souvent de la fonctionnalité exécutable la plus simple pour faire un produit ou une application :
+
+- « Fais un tableau Kanban, liste les tâches. »
+- « Aide-moi à faire un outil de dessin. »
+- « Aide-moi à faire un logiciel pour collecter des questionnaires. »
+
+Ce ne sont souvent qu'un outil, un module fonctionnel, et même pas un problème métier clair. Plus important encore, <strong>ces idées sont souvent « ce que tu trouves utile » et non « ce dont l'utilisateur a vraiment besoin ».</strong>
+
+Dans les projets d'entreprise ou de startup, les chefs de produit et les ingénieurs partent souvent d'une proposition métier plus large. Par exemple, nous pouvons imaginer le scénario suivant :
+
+<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
+  <div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ Scénario métier :</div>
+  <div style="color: #606266; line-height: 1.6;">
+    <p>Vous êtes chef de produit e-commerce dans une boutique. Le patron vous donne une proposition vague mais stressante :</p>
+    <p style="font-style: italic; margin-top: 10px;">« Maintenant tout le monde utilise l'IA pour faire des images et des textes sur les réseaux sociaux, ça a l'air simple. Aide-moi à mettre ça en place pour qu'on soit plus efficace quand on met de nouveaux produits sur TikTok Shop. »</p>
+  </div>
+</el-card>
+
+À ce moment-là, vous pourriez penser : « Patron, tu rêves encore ! » Pourtant, dans le monde réel, ce genre de décision vague en une phrase est très courant — même plus fréquent que le nombre de bubble tea que vous commandez en une semaine. Donc, pour devenir un bon professionnel (ou mieux, le CEO d'une nouvelle startup), nous devons apprendre à passer de la création d'outils personnels à la création de vrais prototypes produits.
+
+Puisque nous avons appris l'IDE AI, en y réfléchissant bien, ce besoin est assez simple — il suffit de donner un prompt à l'IA et de laisser l'Agent s'occuper de tout, non ?
+
+```
+Merci de te référer à mon besoin xxxx,
+aide-moi à concevoir un atelier de contenus e-commerce,
+incluant la génération et la gestion de descriptions produits, images, vidéos et autres contenus.
+```
+
+Si vous transformez joyeusement ce besoin en prototype et l'envoyez au patron — félicitations, votre bonus de ce trimestre est annulé !
+
+**Pourquoi ? C'est le point de douleur central que nous devons résoudre :**
+
+Quand nous avons appris l'IDE AI, nous faisions des **projets ludiques personnels** comme Snake ou une calculatrice — fonctionnalités simples, on sait ce qu'on veut, et on fait pour soi. Mais **les vrais scénarios métier sont complètement différents** :
+
+- **Vous n'êtes pas l'utilisateur** : le patron veut « améliorer l'efficacité », mais vous ne savez pas comment les opérationnels travaillent au quotidien ni où ils bloquent ;
+- **L'IA ne comprend pas le métier** : vous donnez un besoin vague à l'IA, elle ne peut que deviner à partir de connaissances générales, et le résultat peut ressembler à quelque chose mais être inutilisable en pratique ;
+- **Une bonne idée n'est pas un bon produit** : vous trouvez peut-être que « ajouter une fonctionnalité de génération AI » est cool, mais les utilisateurs pourraient ne pas en avoir besoin, ou l'utiliser pourrait être plus compliqué qu'avant.
+
+**C'est pourquoi nous devons apprendre à « passer de l'idée à la compréhension utilisateur »**. Ce n'est que lorsque votre idée résout vraiment le problème des autres, en posant des questions et en comprenant le métier en profondeur, que vous pourrez créer quelque chose de véritablement précieux. (Une bonne idée peut même être plus importante que la bonne technique.)
+
+### 1.1 De l'imaginaire au réel : apprendre à poser des questions métier
+
+::: info 💡 D'abord, clarifions : qu'est-ce qu'un besoin ? Qu'est-ce que le métier ?
+
+Un **besoin** (requirement), c'est ce que l'utilisateur veut vraiment, le problème qu'il rencontre, la chose qu'il veut résoudre. Par exemple, « le patron veut que je mette les produits en ligne plus vite » — c'est un besoin.
+
+Le **métier** (business), c'est ce que l'utilisateur fait réellement chaque jour, sa façon de travailler. Par exemple, un opérationnel e-commerce fait chaque jour : mettre des produits en ligne, modifier les prix, créer des images, analyser les données... tout ça, c'est le métier.
+
+**Pourquoi s'intéresser au métier ?**
+Parce que si vous ne comprenez pas le métier, l'outil que vous créerez risque d'être « beau mais inutilisé ». Ce n'est qu'en comprenant vraiment comment les utilisateurs travaillent au quotidien et où ils bloquent que vous pourrez créer quelque chose qui les aide vraiment.
+
+:::
+
+En partant de la perspective la plus simple, vous pouvez d'abord vous poser quelques questions :
+
+- Quand le patron dit « **efficacité améliorée** », qu'est-ce que ça veut dire exactement ? Faire les choses **plus vite** ? **Dépenser moins** ? **Vendre plus** ?
+- Comment sont mis en ligne les produits actuellement ? **Où ça coince** ?
+- Combien de **nouveaux produits** faut-il traiter chaque jour ? Combien d'**images** et combien de **textes** par produit ?
+- Dans le travail actuel, **quelle est la tâche la plus pénible**, celle qu'on **aimerait le plus éviter** ?
+
+Mais ce sont toutes des questions spéculatives. Nous devons poser directement des questions aux opérationnels TikTok Shop : « Quelles sont vos difficultés et vos points d'attention ? » pour obtenir des réponses plus précises par la communication :
+
+::: info 📋 Résultats d'entretien métier réel
+
+Nous avons demandé à des personnes faisant de l'e-commerce, voici leurs frustrations :
+
+**1. Trop de choses à faire, trop dispersées**
+- Une personne gère plusieurs boutiques, chacune avec beaucoup de produits à traiter ;
+- Chaque jour c'est la course : **mise en ligne de nouveaux produits**, **modification de prix**, **création d'images**, **analyse des données**, une tâche pas finie qu'il faut déjà passer à la suivue.
+
+**2. Le contenu n'est pas fait en une fois, c'est un processus itératif**
+- On commence avec les **images fournies par le fabricant**, les **anciens contenus** ou des **images de référence trouvées en ligne**, pour rapidement **mettre le produit en ligne** et tester ;
+- On dépense un peu en promotion pour **voir si ça vend** ;
+- Ce n'est que pour les **produits qui se vendent bien** qu'on prend le temps de faire de vraies images, descriptions détaillées et vidéos.
+
+:::
+
+Après avoir interrogé les opérationnels, nous sommes enthousiastes, car maintenant nous pouvons vraiment créer un prototype produit parfaitement adapté au métier ! — Encore raté. Si nous essayons de « satisfaire toutes les demandes d'un coup », le produit sera très volumineux et difficile à livrer dans le temps du cours. Il faut donc encore trier et converger pour identifier le vrai point de douleur central.
+
+### 1.2 De la divergence à la convergence : verrouiller le point de douleur métier central et les fonctionnalités
+
+::: info 💡 Pourquoi « converger » ? Qu'est-ce qu'un « point de douleur » ?
+
+**Il y a beaucoup de problèmes, mais par lequel commencer ?**
+
+L'utilisateur peut vous dire plein de problèmes : A est pénible, B est pénible, C est pénible... mais si vous essayez de tout résoudre en même temps, vous risquez de ne rien faire de bien. Donc il faut **converger** — c'est-à-dire, parmi tous les problèmes, choisir celui qui est **le plus douloureux, le plus urgent, le plus soluble** pour commencer.
+
+**Qu'est-ce qu'un point de douleur ?**
+C'est le problème spécifique que l'utilisateur **trouve le plus pénible, qui lui prend le plus de temps, qu'il veut le plus résoudre**. Pas « je trouve ça utile », mais la chose dont l'utilisateur **se plaint tous les jours, qui est douloureuse à chaque fois**.
+
+:::
+
+À travers les entretiens ci-dessus, nous avons découvert que les opérationnels rencontrent de nombreux problèmes : rythme perturbé par les promotions, gestion de plusieurs boutiques, jonglage entre mise en ligne / modification de prix / création d'images / analyse de données...
+
+Si nous essayons de « résoudre tous ces problèmes », nous finirons par créer un outil **vaste mais peu utilisable**.
+
+Classons ces problèmes (l'IA peut vous aider), on trouve grosso modo trois catégories :
+
+1. **Problème de rythme** : quand mettre en ligne, quand ajuster les prix ;
+2. **Problème d'efficacité** : comment gérer simultanément plusieurs boutiques et produits ;
+3. **Problème de contenu** : comment créer rapidement des images et textes de produits.
+
+Pour notre cours, le plus adapté à résoudre en premier est la **catégorie 3 : le problème de contenu**. Mais « créer du contenu rapidement » reste un peu abstrait, demandons encore aux opérationnels où ils bloquent exactement :
+
+::: info 📋 Les opérationnels disent : il y a deux endroits les plus douloureux pour le contenu
+
+**Douleur 1 : la création en masse d'images et de textes est trop pénible**
+- Les contenus sont éparpillés : cloud, messages WeChat, back-office de la plateforme... **difficiles à retrouver** ;
+- Il faut mettre en ligne beaucoup de produits d'un coup, **pas le temps de faire chaque chose soigneusement**, on assemble à la va-vite ;
+- Les exigences ne sont pas élevées, **ça doit être présentable et publiable**, pas besoin d'être magnifique.
+
+**Douleur 2 : les bonnes solutions ne peuvent pas être sauvegardées pour réutilisation**
+- Les bons titres et mises en page d'avant, **la prochaine fois on ne les retrouve plus** ;
+- Les solutions sont dispersées dans les historiques de chat, les anciens liens de produits ;
+- Quand on veut les utiliser, il faut **chercher pendant des heures, copier-coller et modifier pendant des heures** ;
+- Il manque un outil pour **sauvegarder, gérer et appliquer directement**.
+
+:::
+
+Sur la base de ces deux points de douleur, nous allons créer un petit outil simple : **aider les opérationnels à créer en masse des images et textes, et permettre de sauvegarder les bonnes solutions pour les réutiliser directement la prochaine fois**.
+
+Il ne fait que deux choses (l'IA peut vous aider à affiner, n'oubliez pas de supprimer les fonctionnalités en fonction des retours métier) :
+
+::: info Fonctionnalité 1 : Générer en masse des images et textes de produits e-commerce
+
+**À quoi ça sert ?**
+Donner au système des informations produit, il génère automatiquement des images et textes utilisables pour la mise en ligne sur les plateformes e-commerce (comme TikTok, Taobao).
+
+**Entrée**
+| Type | Contenu |
+|------|------|
+| Informations produit | Nom, catégorie, marque, matière, taille, couleur, etc. |
+| Images produit | Image sur fond blanc ou photo en situation simple |
+| Images de référence | Captures d'écran de produits qui se vendent bien ou liens de référence |
+| Mode d'importation | Import par lot via Excel, ou saisie directe sur la page |
+
+**Sortie (contenus e-commerce générés)**
+- **Image principale** : image de présentation du produit avec points de vente en texte (la première image que l'utilisateur voit en scrollant)
+- **Titre du produit** : combinaison de mots-clés trouvables par recherche
+- **Texte de vente** : 1-2 phrases pour attirer les acheteurs
+- Tous des produits finis **prêts à publier après quelques ajustements**
+
+**Résultat**
+- Avant : chaque produit nécessite de créer des images et textes à partir de zéro
+- Maintenant : on envoie un lot de produits au système, on obtient des brouillons qu'il suffit de sélectionner et peaufiner
+
+:::
+
+::: info Fonctionnalité 2 : Sauvegarder les bonnes solutions en tant que modèles
+
+**Entrée**
+| Type | Contenu |
+|------|------|
+| Un ensemble complet | Image principale + titre + texte |
+
+**Sortie**
+| Fonction | Description |
+|------|------|
+| Appliquer | Utiliser le modèle pour générer automatiquement les nouveaux produits |
+| Modifier | Modifier directement le titre et le texte |
+| Gérer | Nommer, étiqueter (ex : « modèle sac homme », « titre promo ») pour faciliter la recherche |
+
+**Résultat**
+1. Importer un nouveau produit
+2. Choisir : laisser le système générer par défaut, ou **utiliser mon modèle sauvegardé**
+3. Le système applique automatiquement le style du modèle, et produit de nouvelles images et textes
+
+:::
+
+---
+
+**Récapitulons ce que nous venons de faire :**
+
+1. **D'abord poser des questions** : au lieu de se lancer directement, on demande d'abord aux opérationnels « ce qui vous embête le plus » ;
+2. **Trouver les points de douleur** : on découvre que ce qu'ils trouvent le plus pénible, c'est « créer des images et textes est trop laborieux » et « les bonnes solutions ne peuvent pas être sauvegardées » ;
+3. **Converger le périmètre** : au lieu de faire une plateforme exhaustive, on se concentre sur « génération en masse d'images et textes + sauvegarde de modèles », ces deux fonctionnalités uniquement.
+
+**Pourquoi est-ce important ?**
+
+L'erreur de beaucoup de débutants en produit est : plus il y a de fonctionnalités, mieux c'est. Mais ce dont l'utilisateur a vraiment besoin, c'est qu'on **résolve le problème le plus douloureux**. Mieux vaut faire une ou deux fonctionnalités qui aident vraiment l'utilisateur, qu'un tas de fonctionnalités mal faites.
+
+**Le cœur de la réflexion produit et métier :**
+- Ne pas imaginer « je pense que l'utilisateur a besoin de ceci »
+- Aller demander à l'utilisateur « que fais-tu chaque jour ? Où as-tu le plus mal ? »
+- Parmi tous les problèmes, **converger** vers le plus douloureux et le plus soluble
+- D'abord créer la version **minimum viable**, puis itérer progressivement
+
+Voilà ce qu'il faut clarifier avant de coder. Le code n'est qu'un outil — **comprendre l'utilisateur et identifier le bon problème** est la première étape.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Analyse des besoins', description: 'Du flou au concret' },
+      { title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
+      { title: 'Extension multi-pages', description: 'Structure d\'application complète' },
+      { title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Produire un prototype en 10 minutes : faire atterrir la « fonctionnalité clé » avec l'IDE AI
+
+::: info 💡 Conseil Plan de programmation
+Si vous trouvez que l'IDE actuel n'est pas assez intelligent, ou que vous épuisez rapidement vos crédits, vous pouvez acheter un **Plan de programmation**. Pour anticiper, consultez [cet article](../../stage-2/backend/modern-cli/) sur l'utilisation de Claude pour programmer.
+:::
+
+Réfléchir est une bonne chose, mais il ne faut pas sur-réfléchir. Arrêtons de trop philosopher et essayons de créer un prototype en commençant par une seule page.
+
+### 2.1 Première étape : dire à l'IA ce que vous voulez en langage courant
+
+Au début, ne cherchez pas le prompt parfait. Partez de votre expression la plus naturelle. Comme si vous décriviez le besoin à un collègue, dites à l'IA en langage courant ce que vous voulez faire, puis laissez l'IA vous aider à optimiser en une expression plus professionnelle.
+
+#### 2.1.1 Commencer par l'oral (recommandé pour les débutants)
+
+Décrivez d'abord votre idée dans vos propres mots, même si c'est très brut :
+
+```
+Je veux créer un outil pour aider les opérationnels e-commerce à générer automatiquement des images principales et des textes de produits.
+Les opérationnels doivent actuellement créer les images et textes un par un manuellement, c'est très pénible.
+Mon idée : ils uploadent les informations produit, le système génère un lot de brouillons,
+et les opérationnels sélectionnent ceux qui sont bons, les modifient légèrement et les utilisent.
+
+Pour commencer, la version la plus simple : une seule page, à gauche on remplit les infos produit,
+à droite on affiche les résultats générés. On peut uploader des images, saisir du texte,
+et après génération on voit l'aperçu de l'image principale et le texte.
+```
+
+Ensuite, envoyez ce texte à une IA (comme ChatGPT, Claude, etc.) pour qu'elle vous aide à l'enrichir. L'IA vous aidera généralement à combler des détails auxquels vous n'aviez pas pensé, et à structurer votre idée plus clairement, pour finalement générer un prompt adapté à l'IDE AI.
+
+Vous pouvez dire à l'IA :
+```
+Aide-moi à enrichir l'idée ci-dessus, organise-la en un document de logique métier clair,
+puis génère un prompt adapté à un IDE AI (comme Cursor, Trae) pour générer le code d'un prototype mono-page.
+```
+
+L'IA retournera un besoin structuré et le prompt correspondant. Vérifiez-le vous-même, supprimez les fonctionnalités inutiles, et une fois confirmé, utilisez-le pour générer le code.
+
+L'avantage de cette approche : l'expression orale est l'idée la plus authentique, mais peut manquer des détails importants. Quand l'IA enrichit, elle peut poser des questions comme « voulez-vous supporter l'upload par lot ? » que vous n'aviez pas envisagées, vous aidant à valider davantage. Vous pouvez choisir de conserver ou supprimer les fonctionnalités non essentielles en fonction des retours, et déterminer le prompt initial pour l'IA après plusieurs révisions.
+
+#### 2.1.2 Passer l'étape d'enrichissement : envoyer directement votre document métier à l'IA
+
+Si vous avez déjà préparé un document de logique métier dans les chapitres précédents (par exemple, un cahier des charges en langage courant), vous pouvez directement utiliser le format suivant pour l'envoyer à l'IDE AI, en sautant l'étape d'enrichissement. Adapté quand le besoin est déjà clair et que vous voulez passer directement au code :
+
+```
+Aide-moi à implémenter une application mono-page en te référant à la logique métier, pour valider la fonctionnalité clé.
+
+La logique métier de référence est la suivante :
+1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
+- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
+  - Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
+  - Images produit : image fond blanc / photo situation simple ;
+  - Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence, permettant d'avoir des références ;
+  - Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
+  - Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque, pour réutilisation
+- **Sortie (contenu directement publiable ou publiable après légères modifications) :**
+  - Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
+  - Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
+- **Changement d'usage attendu :**
+  Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
+
+Faire d'abord la première fonctionnalité, la deuxième (bibliothèque de modèles) sera ajoutée plus tard.
+```
+
+#### 2.1.3 L'approche programmeur (avancé) : laisser l'IA écrire le « prompt de prompt »
+
+Si vous voulez contrôler plus finement le processus de génération de code, vous pouvez d'abord demander à une IA (comme ChatGPT) de générer, à partir de votre besoin, un prompt spécialement conçu pour l'IDE AI :
+
+```
+En te basant sur l'idée ci-dessous, aide-moi à écrire un prompt pour un Agent de codage,
+j'ai besoin de ce prompt pour générer du code.
+
+[Colle ici ta description de logique métier]
+
+Exigences :
+1. Le prompt doit contenir une description claire de la mise en page
+2. Préciser la structure de données et la logique d'interaction
+3. Spécifier la stack technique (ex : React + Tailwind)
+4. Lister les points fonctionnels clés à implémenter
+```
+
+L'IA générera généralement un prompt structuré comme suit :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png)
+
+Vous pouvez modifier légèrement ce prompt avant de l'envoyer à l'IDE AI pour générer le code.
+
+### 2.2 Deuxième étape : laisser l'IDE AI générer directement le code
+
+#### 2.2.1 Préparation : comprendre les opérations de base de l'IDE AI
+
+Si vous n'êtes pas encore familier avec l'utilisation basique de l'IDE AI (comme Cursor, Trae, Windsurf, etc.), il est recommandé de consulter d'abord le [tutoriel de base sur l'IDE](/fr-fr/appendix/2-development-tools/ide-basics/) en annexe, pour apprendre comment :
+- Créer un nouveau projet
+- Dialoguer avec l'AI Agent
+- Comprendre le processus de génération de code de l'IA
+
+#### 2.2.2 Commencer à générer le code
+
+Vous avez maintenant obtenu le prompt initial. Prenons le premier style de prompt comme exemple, et laissons l'IA nous aider à générer le code. Créez d'abord une fenêtre et le dossier correspondant, et ouvrez le dossier (initialisez un nouveau projet à l'emplacement de votre choix) :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png)
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png)
+
+Dans la barre latérale, choisissez un modèle que vous aimez (recommandé : gemini, gpt, glm, kimi, minimax, etc.), et saisissez le prompt obtenu à la première étape :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png)
+
+Après avoir cliqué sur Générer, nous verrons une séquence familière : l'IA va planifier la structure de répertoires du projet, les fichiers nécessaires, et donner le contenu initial de chaque fichier.
+
+::: warning ⚠️ Attention particulière : l'IA peut s'arrêter et attendre votre confirmation
+Pendant la génération, l'AI Agent **s'arrête souvent pour attendre votre saisie ou confirmation**, par exemple :
+- Vous demander si vous voulez passer à l'étape suivante
+- Vous demander d'appuyer sur Entrée pour confirmer une action
+- Vous demander un choix sur un détail technique
+
+**Si vous voyez que l'IA ne bouge plus, vérifiez d'abord l'interface de chat pour voir si elle attend votre réponse.** Beaucoup de débutants pensent que l'IA est en train de réfléchir, alors qu'elle s'est arrêtée pour les attendre. Répondez activement ou appuyez sur Entrée, et l'IA reprendra son travail.
+:::
+
+N'oubliez pas non plus d'appuyer sur Entrée pour confirmer (sinon vous resterez bloqué en attente — certains IDE AI ne rencontrent pas ce problème) :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png)
+
+Si vous rencontrez le scénario suivant, cela signifie qu'un service local a déjà été démarré. Vous devez cliquer pour passer, sinon vous resterez sur cet écran (si rien ne s'affiche après la génération du code, vous devrez dire activement « aide-moi à démarrer ce projet ») :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png)
+
+::: info 💡 Explication du scénario
+**Explication du scénario** : vous avez créé un projet React + TypeScript avec `npm create vite@latest` (easy-vibe-web). Une fois la création terminée, l'ordinateur va automatiquement « lancer » la page web, pour que vous puissiez voir le résultat immédiatement.
+
+**Service local** : on peut comprendre ça comme une fenêtre d'affichage web temporaire ouverte sur votre ordinateur, qui ne fonctionne que sur cette machine — les autres n'y ont pas accès.
+
+**localhost (adresse locale)** : `localhost` signifie « cet ordinateur lui-même ». Quand le navigateur y accède, il accède en fait à la page web exécutée sur votre ordinateur.
+
+**Port** : le port est un numéro utilisé pour distinguer les différents services web sur le même ordinateur. Ce projet utilise le port 5174.
+
+**Lien d'accès `http://localhost:5174/`** : cette adresse signifie « accéder à la page web numéro 5174 sur cet ordinateur ». Ouvrez-la dans le navigateur pour voir le résultat.
+
+**Explication de ce scénario** : le système voulait initialement utiliser le port 5173, mais celui-ci était déjà occupé, donc il a automatiquement basculé vers 5174 — c'est normal.
+
+**Instructions** : ouvrez le navigateur, tapez `http://localhost:5174/` dans la barre d'adresse et appuyez sur Entrée pour voir la page du projet actuel.
+:::
+
+Une fois toutes les confirmations terminées, attendez que l'agent s'exécute quelques instants, et vous obtiendrez le résultat suivant :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png)
+
+On peut voir qu'il y a déjà une première version fonctionnelle, mais la page frontend est vraiment laide. À ce stade, vous pouvez essayer de dialoguer directement avec l'IA pour optimiser l'affichage de l'interface :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png)
+
+Après optimisation, nous obtenons une interface plus esthétique :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png)
+
+Vous pouvez modifier les fonctionnalités de la page selon vos besoins, joindre des captures d'écran et poser des questions librement, par exemple : « Je n'ai pas besoin de la fonctionnalité d'import par lot pour l'instant, aide-moi à la supprimer », « Il y a trop de champs à remplir à gauche, garde uniquement xxxxx ». Vous pouvez même vous référer à d'autres sites matures — par exemple, vous pouvez directement « vous inspirer » d'un produit de design de Google (vous pouvez coller une capture d'écran d'un site mature que vous aimez) :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png)
+
+Et finalement obtenir :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png)
+
+### 2.3 Que faire en cas d'erreur
+
+En pratique, rencontrer des erreurs est inévitable — c'est normal et ne signifie pas que vous avez fait quelque chose de mal. Vous n'avez pas besoin de comprendre l'erreur ; il suffit de transmettre la « situation observée » en entier à l'IA.
+
+Il n'y a que trois approches courantes :
+
+- **Approche 1 : Erreur sur la page ou le terminal**
+  Quand la page devient rouge, affiche un écran blanc, ou quand le terminal affiche un tas de texte rouge, faites une capture d'écran ou copiez l'intégralité du message d'erreur et envoyez-le à l'IA pour qu'elle vous aide à réparer.
+
+- **Approche 2 : La fonctionnalité ne fonctionne pas mais pas d'erreur**
+  Par exemple, un bouton ne réagit pas, les données ne s'affichent pas, les styles sont cassés — décrivez en langage courant « ce qui se passe + ce que vous vouliez », en ajoutant une capture d'écran si nécessaire.
+
+- **Approche 3 : Vous n'êtes pas sûr s'il y a un problème**
+  Vous pouvez demander directement à l'IA : « Aide-moi à vérifier si cette fonctionnalité a des problèmes évidents, est-ce qu'il faut ajuster quelque chose. »
+
+#### 2.3.1 Questions fréquentes des débutants
+
+- **Q : Je ne sais pas où trouver le message d'erreur ?**
+- R : En général, cherchez tout le « texte rouge ». Dans le terminal, la console ou sur la page, trouvez les indications rouges, sélectionnez tout et copiez pour l'IA.
+
+- **Q : L'IA a corrigé mais l'erreur persiste ?**
+- R : C'est courant. Continuez à faire une capture d'écran ou copiez le dernier message d'erreur et envoyez-le, pour qu'elle corrige davantage sur la base de la modification précédente.
+
+- **Q : Dois-je comprendre complètement la solution de réparation de l'IA ?**
+- R : Non, pas besoin de tout comprendre d'un coup. Vous pouvez vous concentrer sur un ou deux points à chaque fois. Avec le temps, vous comprendrez de plus en plus de code, comme en accumulant du vocabulaire anglais.
+
+- **Q : J'ai corrigé plein de fois, le problème persiste ?**
+- R : Vous pouvez essayer :
+  - Utiliser la fonction « retour en arrière » de l'IDE, trouver le bouton de retour dans la conversation de l'agent, revenir à une version fonctionnelle et recommencer ;
+  - Changer de modèle ou ajuster le prompt, décrire le phénomène et le message d'erreur plus précisément ;
+  - Regrouper « code actuel + log d'erreurs + comportement attendu » et tout envoyer d'un coup à l'IA, pour qu'elle restructure globalement la partie problématique.
+
+## 3. Passer d'une application mono-page à une application multi-pages
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Analyse des besoins', description: 'Du flou au concret' },
+      { title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
+      { title: 'Extension multi-pages', description: 'Structure d\'application complète' },
+      { title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Une fois la logique de la fonctionnalité clé générée, nous pouvons générer le reste du contenu. Par exemple, à ce stade, si vous cliquez sur Paramètres ou certains boutons, ils ne fonctionnent pas du tout.
+
+Vous pouvez demander à l'IA de vérifier selon les besoins du prompt métier, de générer les parties manquantes, ou de compléter directement les pages non implémentées. Vous pouvez aussi spécifier une page pour que l'IA la complète, jusqu'à ce que toutes les pages soient cliquables et que les fonctionnalités soient interactives :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png)
+
+Après quelques instants, nous pouvons voir que le programme a complété plusieurs pages et fonctionnalités interactives sur la base de ce qui existait déjà :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png)
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png)
+
+Il vous suffit alors de cliquer manuellement sur chaque fonctionnalité et bouton qui vous intéresse, pour vous assurer que les interactions sont normales. Si une fonctionnalité n'est pas interactive, vous pouvez en parler avec l'IA pour qu'elle vous aide à la corriger.
+
+## 4. Rendre le prototype « convaincant »
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Analyse des besoins', description: 'Du flou au concret' },
+      { title: 'Validation mono-page', description: 'Fonctionnalité clé implémentée' },
+      { title: 'Extension multi-pages', description: 'Structure d\'application complète' },
+      { title: 'Peaufinage', description: 'Amélioration de l\'expérience utilisateur' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Une fois la structure multi-pages en place, la dernière étape consiste à faire passer le prototype de « ça fonctionne » à « c'est fluide à utiliser et ça a l'air pro ». Cela nécessite de tester manuellement tout le flux (parcours utilisateur), et de faire corriger par l'IA les parties qui ne fonctionnent pas, pour qu'à chaque rafraîchissement on puisse simuler un nouvel utilisateur parcourant tout le flux et obtenir le résultat attendu.
+
+Revenons au besoin initial :
+
+```
+1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
+- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
+  - Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
+  - Images produit : image fond blanc / photo situation simple ;
+  - Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence ;
+  - Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
+  - Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque
+- **Sortie (contenu directement publiable ou après légères modifications) :**
+  - Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
+  - Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
+- **Changement d'usage attendu :**
+  Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
+
+2. Capitaliser les bonnes sorties en une bibliothèque de modèles réutilisables :
+- **Que peut-on sauvegarder ?**
+  - Toute sortie que l'opérationnel juge « bonne » peut être sauvegardée en un clic :
+    - Ça peut être la combinaison complète « image principale + titre + texte de vente » ;
+    - Ou seulement une partie, comme une structure de titre ou un texte de vente spécifique.
+- **Que peut-on faire après sauvegarde ?**
+  - **Réutiliser :**
+    - Utiliser cette sauvegarde pour appliquer un lot de nouveaux paramètres produit, et régénérer des brouillons images/textes ;
+    - Ou sur le même produit, générer plusieurs variantes basées sur ce modèle pour des tests A/B.
+  - **Éditer :**
+    - Modifier directement le titre / texte de vente ;
+    - Si l'édition d'images est supportée, affiner le texte, les stickers, etc. sur l'image principale.
+  - **Gérer :**
+    - Nommer les sauvegardes, étiqueter (ex : « modèle image principale sac homme », « structure titre promo »), classer par boutique pour faciliter la recherche.
+- **Comment utiliser lors de la prochaine mise en ligne ?**
+  - Après import de nouveaux produits, l'opérationnel peut choisir :
+    - Utiliser la logique par défaut du système, ou
+    - Spécifier « utiliser un de mes modèles sauvegardés pour générer » ;
+  - Le système applique automatiquement la structure et le style du modèle aux nouvelles données produit, et génère de nouveaux brouillons image principale + titre + texte de vente.
+```
+
+Si vous devez créer de nouvelles données à chaque test, cela prend beaucoup de temps. C'est là qu'on utilise généralement ce qu'on appelle des « données de test ». Vous pouvez communiquer avec l'IA de la façon suivante, pour qu'elle génère une entrée rapide de données de test sur l'interface, pour que nous puissions vérifier que toutes les fonctionnalités fonctionnent correctement :
+
+```
+J'ai besoin de tester ce parcours utilisateur pour m'assurer qu'il fonctionne complètement.
+Merci de générer une entrée de données de test en te basant sur les besoins suivants,
+pour que je puisse cliquer et tester rapidement si le flux complet fonctionne normalement :
+1. Aider les opérationnels à générer en masse une première version de brouillons images/textes :
+- **Entrée (supporte l'upload direct et l'import par lot de contenus) :**
+  - Informations de base produit : nom, catégorie, marque, matière, taille, couleur, public cible, etc. ;
+  - Images produit : image fond blanc / photo situation simple ;
+  - Chaque génération supporte l'upload supplémentaire de captures de produits best-sellers ou liens de référence ;
+  - Supporte l'import par lot via Excel, ou la saisie en ligne / upload sur la page.
+  - Supporte la spécification sur la page pour sauvegarder ou non les contenus dans la bibliothèque
+- **Sortie (contenu directement publiable ou après légères modifications) :**
+  - Pour chaque produit, une image principale brouillon « présentable, contenant les points de vente de base » ;
+  - Un titre « bien structuré, contenant les mots-clés clés » + 1-2 phrases de texte de vente.
+- **Changement d'usage attendu :**
+  Passer de la création de zéro pour chaque lot de produits à l'envoi d'un lot au système, puis sélection et ajustement des brouillons générés.
+```
+
+On obtient facilement le résultat (si vous trouvez qu'une donnée c'est trop peu, vous pouvez demander à l'IA de générer plusieurs cas de test) :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png)
+
+Résultat après clic :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png)
+
+À ce stade, nous obtenons directement le résultat, sans qu'il y ait un « processus de génération simulé ». Si nous voulons simuler un vrai processus de génération, nous pouvons directement parler à l'IA : « Merci de simuler un vrai processus de génération, il faut attendre un moment après le clic avant de me donner le résultat. »
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png)
+
+Une fois la fonctionnalité de génération validée, nous devons aussi nous assurer que la fonctionnalité de bibliothèque de modèles fonctionne correctement. Sur la carte de génération de la page, nous pouvons voir que la fonctionnalité de favoris de la bibliothèque de modèles n'est pas implémentée. Il faut alors approfondir la conversation avec l'IA : « Merci de t'assurer que le besoin [collez ici le contenu du point 2 ci-dessus] fonctionne correctement, on peut cliquer sur un résultat pour sauvegarder le modèle correspondant, et en l'ouvrant on peut voir les paramètres de génération »
+
+La génération n'est souvent pas immédiate, il faut régulièrement corriger avec des captures d'écran :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png)
+
+Et finalement obtenir le résultat attendu :
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png)
+
+En plus du test manuel du parcours des besoins, vous pouvez aussi demander à l'IA de faire directement une vérification des besoins, par exemple :
+
+- « Merci de vérifier par rapport à mon besoin initial si l'application actuelle couvre toutes les fonctionnalités clés. »
+- « Aide-moi à lister un checklist des fonctionnalités, en indiquant lesquelles sont terminées, lesquelles ne sont pas encore implémentées ou ont une expérience insuffisante. »
+
+L'IA générera généralement un checklist, à partir duquel vous pouvez décider s'il faut continuer à améliorer. Après des modifications itératives, vous obtiendrez un prototype assez abouti.
+
+## 5. 📚 Exercice : reproduisez votre propre atelier de contenus TikTok e-commerce
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 Défi : reproduire l'atelier de contenus e-commerce</div>
+  </template>
+
+  <p>
+    En vous référant aux prompts et au contenu de ce cours, réalisez un cycle complet :
+  </p>
+
+  <ul>
+    <li>
+      <strong>Pratique du cycle complet</strong>
+      <ul>
+        <li>Génération de prompt de synthèse métier → génération de prototype mono-page → génération de prototype multi-pages</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Partage des résultats</strong>
+      <ul>
+        <li>Faites une capture d'écran de votre programme et partagez-la avec tout le monde</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Question de réflexion</strong>
+      <ul>
+        <li>Réservez de l'espace pour la prochaine section « Intégration des capacités LLM et de génération d'images à partir de texte », et anticipez : comment votre atelier pourrait-il intégrer des capacités comme « IA écrit le texte / génère les images / génère le script » ?</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Prochaine étape
+
+Dans la section suivante, nous construirons sur cet atelier de production de contenus en y intégrant des capacités AI spécifiques (texte vers texte, image vers texte, texte vers image), par exemple :
+
+- Générer automatiquement des brouillons de textes et plusieurs propositions de titres pour une tâche de contenu
+- Générer automatiquement des brouillons d'images à partir de la description de la tâche (texte vers image)
+- Classer et résumer automatiquement les tâches de contenu passées, pour vous aider à planifier les sujets de la prochaine promotion
+
+<RelatedArticlesSection
+  title="Continuer à apprendre"
+  description="Il est recommandé de continuer dans l'ordre : intégrer les capacités AI → cycle complet du projet → ingénierie du design."
+  :items="relatedArticles"
+/>
diff --git a/docs/fr-fr/stage-1/complete-project-practice/index.md b/docs/fr-fr/stage-1/complete-project-practice/index.md
new file mode 100644
index 0000000..23ebca8
--- /dev/null
+++ b/docs/fr-fr/stage-1/complete-project-practice/index.md
@@ -0,0 +1,301 @@
+---
+title: 'Projet complet - De la démo au prototype de niveau produit'
+description: 'Dépassez le stade de la démo, apprenez à compléter les parcours produit, à construire des données simulées réalistes, à itérer rapidement grâce au feedback, et finalisez un prototype AI complet, présentable et interactif.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Environ <strong>3 jours</strong>'
+const relatedArticles =
+  relatedArticlesMap['fr-fr/stage-1/complete-project-practice'] ?? []
+</script>
+
+# Débutant 5 : Projet complet en conditions réelles
+
+## Introduction du chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Esprit produit', 'Données simulées', 'Interactions complètes', 'LocalStorage']" coreOutput="1 prototype de produit AI fonctionnel" expectedOutput="Application Web avec des parcours complets et des données réalistes">
+
+Au chapitre précédent, vous avez intégré les capacités AI et la démo fonctionne, mais vous êtes encore <strong>très loin</strong> d'un vrai « produit » : au premier rafraîchissement, <strong>les données disparaissent</strong>, en cas d'erreur c'est <strong>un écran blanc</strong>, la liste ne contient que des « données de test 1, données de test 2 », et si l'utilisateur se trompe, <strong>impossible d'annuler</strong>...
+
+Ce chapitre va <strong>combler toutes ces lacunes</strong> : nous allons <strong>compléter les parcours produit</strong>, utiliser l'AI pour générer des <strong>données métier réalistes</strong> à la place des fausses données, ajouter la <strong>gestion des erreurs et le feedback utilisateur</strong>, et enfin produire un <strong>prototype complet que vous pourrez fièrement montrer</strong>.
+
+C'est le <strong>dernier chapitre</strong> de la phase débutant. Une fois cette étape franchie, vous serez passé de « incapable de programmer » à « <strong>capable de créer seul un prototype de produit AI</strong> ».
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
+      { title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
+      { title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
+      { title: 'Projet final', description: 'Votre projet de fin d\'études' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Refuser le « Happy Path » : compléter les parcours critiques
+
+Beaucoup de débutants, en réalisant un prototype, se contentent du « Happy Path » (le chemin idéal) : l'utilisateur clique -> l'API répond avec succès -> le résultat s'affiche.
+Mais dans le monde réel, les choses se passent rarement aussi bien. Pour que votre prototype ressemble à un vrai produit, vous devez prendre en compte ces étapes « invisibles ».
+
+### 1.1 Ajouter de l'attente et du feedback
+
+Lorsque l'utilisateur clique sur « Générer le texte », l'AI met souvent plusieurs secondes à répondre. Si l'interface ne réagit pas, l'utilisateur pensera que le programme est planté.
+**Demandez à votre AI IDE d'ajouter un état de chargement (Loading) :**
+
+> Exemple de prompt :
+> « Lorsque je clique sur le bouton de génération, transforme le bouton en "Génération en cours..." et rends-le non cliquable, tout en affichant une animation de chargement dans la zone de droite. Ce n'est qu'au retour de l'API que tout redevient normal. »
+
+### 1.2 Gérer les échecs et les exceptions
+
+La clé API peut expirer, le réseau peut tomber en panne.
+**Demandez à votre AI IDE de gérer les erreurs :**
+
+> Exemple de prompt :
+> « Si la requête API échoue, ne te contente pas d'afficher une erreur dans la console. Fais apparaître une notification rouge (Toast) en haut de la page indiquant "Échec de la génération, veuillez réessayer plus tard", et permets à l'utilisateur de cliquer à nouveau sur le bouton. »
+
+### 1.3 Persistance de l'historique de conversation
+
+Au cours de l'interaction avec l'AI, nous devons sauvegarder le contenu des conversations pour que l'utilisateur puisse revoir l'historique et poursuivre ses échanges précédents. À ce stade, nous n'introduisons pas encore de base de données ; vous pouvez choisir l'une des solutions légères suivantes :
+
+**Choix de la solution de stockage :**
+
+| Solution | Cas d'usage | Caractéristiques |
+| ---------------- | -------------------------------- | ------------------------------------ |
+| **LocalStorage** | Projet purement frontend, données utilisateur sauvegardées dans le navigateur | Simple à implémenter, persiste au rafraîchissement, pas de synchronisation entre appareils |
+| **Fichier JSON** | Prototype local, données stockées sous forme de fichier | Structure claire, facile à déboguer, modifiable manuellement |
+| **Fichier TXT** | Solution minimale, enregistrement rapide de texte | Format libre, bonne compatibilité |
+
+**Exemple de contenu de conversation :**
+L'historique sauvegardé contient généralement les éléments suivants :
+
+```json
+[
+  {
+    "role": "user",
+    "content": "Aide-moi à générer un texte promotionnel TikTok pour des écouteurs Bluetooth",
+    "timestamp": "2026-01-20 10:30:00"
+  },
+  {
+    "role": "assistant",
+    "content": "【Texte promotionnel écouteurs Bluetooth】\n\n🎧 Dites adieu à la latence, une expérience d'écoute immersive\n\nLes amis ! Ces écouteurs Bluetooth sont vraiment incroyables 👇\n\n✅ 40 dB de réduction de bruit active, plongez instantanément dans la musique\n✅ 30 heures d'autonomie, une semaine de trajets sans recharge\n✅ Appels clairs comme en face-à-face, même dans le métro\n✅ Design demi-intra, confortable même après des heures d'utilisation\n\n💰 Offre à durée limitée, cliquez sur le lien ci-dessous pour commander !",
+    "timestamp": "2026-01-20 10:30:05"
+  }
+]
+```
+
+**Prompt pour l'implémentation :**
+
+> « Aide-moi à implémenter la fonctionnalité de sauvegarde de l'historique de conversation. Supporte la sauvegarde des enregistrements de conversation entre l'utilisateur et l'AI sous forme de fichier JSON (ou utilise LocalStorage). Au chargement de la page, charge automatiquement l'historique précédent. Permet de consulter et de supprimer des conversations individuelles. »
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
+      { title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
+      { title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
+      { title: 'Projet final', description: 'Votre projet de fin d\'études' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Insuffler l'âme : simuler des données réalistes (Mock Data)
+
+Une page vide ne convaincra personne. Imaginez que vous présentiez un « espace de travail e-commerce » et que l'historique soit totalement vide, ou ne contienne qu'une seule ligne « test / test / test ».
+Pour obtenir le meilleur effet de démonstration, nous devons « forger » des données réalistes afin que votre prototype ressemble à un vrai produit en exploitation depuis six mois.
+
+### 2.1 Laissez l'AI concevoir la structure de données
+
+Nous n'avons pas besoin de réfléchir nous-mêmes au nom de chaque champ (par exemple, faut-il utiliser `name` ou `title` ?). Cette tâche peut être entièrement déléguée à l'AI.
+
+Il suffit de décrire votre **scénario métier** à l'AI :
+
+> **Exemple de prompt :**
+> « Je suis en train de réaliser le prototype d'un **espace de travail e-commerce TikTok**.
+> Aide-moi à concevoir une structure de données JSON pour décrire une "tâche produit".
+> Cette tâche doit contenir : les informations de base du produit (nom, catégorie), les ressources fournies en entrée (liens d'images), et les résultats générés par l'AI (titre, texte, image d'affiche).
+> Donne-moi directement un exemple JSON. »
+
+L'AI concevra automatiquement des champs comme `productName`, `generatedContent` en fonction de votre description.
+
+### 2.2 Laissez l'AI produire en masse des données « réalistes »
+
+Une fois la structure de données établie, l'étape suivante consiste à demander à l'AI de « remplir les cases » et de générer un jeu de données d'apparence réaliste.
+
+**Astuces pour les prompts :**
+Vous ne pouvez pas simplement dire à l'AI « génère des données ». Vous devez lui donner des instructions comme si vous assigniez une tâche à un stagiaire : précisez le **contexte métier** et les **exigences de contenu** :
+
+- **Contexte métier** : dites à l'AI que nous faisons du « e-commerce TikTok », donc les titres de produits doivent être accrocheurs (par exemple « L'astuce infaillible pour paraître plus mince », « Indispensable pour les étudiants »), et les textes doivent être conversationnels.
+- **Exigences pour les images** : pour que le prototype soit attrayant, les images ne doivent pas être des espaces réservés en noir et blanc ; il est préférable d'utiliser des images aléatoires en couleur (paysages ou objets réels).
+
+> **Exemple de prompt :**
+> « En te basant sur la structure conçue précédemment, génère 10 entrées de données simulées réalistes.
+> (Remarque : le format n'a pas besoin d'être JSON. Si tu écris du frontend, tu peux générer directement un tableau JavaScript ; si tu utilises Python, tu peux générer une List.)
+>
+> **Exigences du scénario métier :**
+>
+> 1. Suppose qu'il s'agit d'un grand magasin généraliste, avec des produits couvrant les catégories "Mode féminine", "Électronique" et "Beauté".
+> 2. **Les titres et textes générés doivent être très "style TikTok"** : par exemple, les titres doivent contenir des Emoji (🔥, ✨), les textes doivent utiliser un ton comme "C'est trop bien !", "Testé et approuvé".
+> 3. **Champ image** : utilise systématiquement le format `https://picsum.photos/seed/{random_id}/300/400` pour garantir que chaque image est différente. »
+
+**Exemple de Mock Data généré :**
+
+```javascript
+export const mockProductTasks = [
+  {
+    id: 'task_001',
+    name: 'Robe d\'été vintage à imprimé fleuri style français',
+    status: 'completed',
+    input: {
+      category: 'Mode féminine',
+      features: ['Taille marquée', 'Amincissant', 'Élégant'],
+      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
+    },
+    output: {
+      generatedTitle: '✨ Magnifique sur tout le monde ! Cette robe à imprimé fleuri style français est vraiment incroyable 🔥',
+      generatedCopy:
+        'Les filles ! Cette robe affine vraiment la silhouette ! La taille marquée est parfaite, on a immédiatement une silhouette élégante. Le tissu est très respirant, pas du tout étouffant en été. Idéale pour un rendez-vous ou une sortie ! 👗',
+      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
+    },
+    createdAt: '2026-01-20T10:00:00Z'
+  },
+  {
+    id: 'task_002',
+    name: 'Écouteurs Bluetooth Pro à réduction de bruit ultra-puissante',
+    status: 'completed',
+    input: {
+      category: 'Électronique',
+      features: ['Réduction de bruit', 'Autonomie prolongée', 'Faible latence'],
+      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
+    },
+    output: {
+      generatedTitle: '🎧 Enfin trouvés ! Ces écouteurs ont une réduction de bruit incroyable ! 🔇',
+      generatedCopy:
+        'Dès qu\'on les met, le monde devient silencieux. La qualité sonore est exceptionnelle, écouter de la musique c\'est comme être en concert. L\'autonomie est aussi très bonne, une seule charge pour une semaine entière ! Indispensable pour les étudiants !',
+      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
+    },
+    createdAt: '2026-01-21T14:30:00Z'
+  }
+  // ... plus de données
+]
+```
+
+### 2.3 (Avancé) Implémenter de « fausses opérations CRUD » avec LocalStorage
+
+Si vous souhaitez que les « données simulées » générées précédemment soient non seulement consultables, mais aussi supprimables et modifiables, et que les nouvelles tâches persistent après un rafraîchissement de la page, vous pouvez combiner cela avec `LocalStorage`.
+
+> **Exemple de prompt :**
+> « Aide-moi à implémenter une fonctionnalité de stockage de données.
+>
+> 1. Lis d'abord les données depuis `localStorage`.
+> 2. Si `localStorage` est vide, initialise avec les données Mock générées précédemment et stocke-les dans `localStorage`.
+> 3. Écris également les fonctions `addProductTask` et `deleteProductTask`, en mettant à jour `localStorage` à chaque opération. »
+
+Avec cette étape, votre prototype acquiert une « mémoire » et l'expérience utilisateur est presque identique à celle d'un vrai produit.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
+      { title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
+      { title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
+      { title: 'Projet final', description: 'Votre projet de fin d\'études' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Collecter les retours et itérer rapidement
+
+On ne peut pas créer un bon produit en travaillant isolément. Maintenant que votre prototype dispose de « fonctionnalités clés » + « parcours complets » + « données de démonstration », il est temps de le montrer à d'autres personnes.
+
+### 3.1 Qui tester ? Comment tester ?
+
+- **Amis / collègues** : pas besoin qu'ils comprennent la technique, il suffit de leur demander d'essayer.
+- **Observer plutôt que guider** : ne dites pas « clique ici », mais observez où ils cliquent naturellement. S'ils ne trouvent pas un bouton, c'est que le design pose problème.
+- **Méthode « Wizard of Oz »** : si votre AI n'est pas encore connectée, vous pouvez modifier manuellement les données en arrière-plan (ou dans la base de données) pour simuler le retour de l'AI, afin de valider d'abord si l'utilisateur a réellement besoin de cette fonctionnalité.
+
+### 3.2 Face aux bugs et aux critiques
+
+- **Mise en page cassée** : sur certaines tailles d'écran, l'affichage peut être dégradé.
+  - **Action** : faites une capture d'écran et envoyez-la à l'AI IDE -> « La mise en page est cassée à cette largeur d'écran, aide-moi à corriger. »
+- **Interactions maladroites** : « ce processus est trop compliqué ».
+  - **Action** : transmettez la suggestion à l'AI IDE -> « L'utilisateur trouve le processus upload puis génération trop lent, peut-on passer à une génération en un clic ? »
+- **Nouvelles demandes** : « si seulement il y avait cette fonctionnalité ».
+  - **Action** : évaluez si c'est essentiel ; si oui, demandez à l'AI d'implémenter rapidement une version simplifiée.
+
+**Rappelez-vous : à ce stade, l'AI est votre meilleur assistant pour les modifications. Vous êtes uniquement responsable d'identifier les problèmes ; confiez la modification du code à l'AI.**
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Compléter les parcours', description: 'D\'une fonctionnalité isolée à une boucle complète' },
+      { title: 'Insuffler l\'âme', description: 'Simuler des données métier réalistes' },
+      { title: 'Feedback et itération', description: 'Améliorer l\'expérience à partir des retours' },
+      { title: 'Projet final', description: 'Votre projet de fin d\'études' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. 🎓 Projet final : réalisez votre « projet de fin d'études »
+
+Félicitations ! Vous avez parcouru tout le processus, du « besoin » au « prototype » puis à l'« intégration AI ». Il est maintenant temps de présenter votre résultat final.
+
+**Ce projet final n'est plus limité à l'« espace de travail e-commerce ». Vous devez combiner vos propres centres d'intérêt ou votre expérience professionnelle pour créer un prototype de produit AI unique.**
+
+### Choix du sujet et exigences
+
+Vous devez choisir le scénario le plus pertinent parmi les **[Références de scénarios multi-sectoriels](../appendix-industry-scenarios/index.md)**, ou imaginer un scénario entièrement nouveau à partir de vos propres idées.
+
+**Le projet doit utiliser de manière intégrée tout ce que vous avez appris dans les chapitres précédents :**
+
+1. **Construction du prototype** : utilisez des technologies frontend pour créer une interface esthétique et facile à utiliser.
+2. **Maîtrise des besoins** : ne visez pas l'exhaustivité, mais assurez-vous que les fonctionnalités centrales forment une boucle logique complète.
+3. **Intégration API** : connectez un véritable modèle AI (LLM/VLM, etc.) pour donner à l'application une véritable intelligence.
+4. **Une application fonctionnelle** : pas seulement une page statique, mais une application dynamique avec un flux de données et des interactions avec feedback.
+
+### Livrables du projet
+
+Vous devez finalement soumettre les deux éléments suivants :
+
+1. **Un prototype d'application complet** : déployé en ligne ou exécutable localement, avec un parcours d'utilisation complet.
+2. **Une vidéo de démonstration de 30 secondes** : enregistrez une vidéo présentant brièvement le scénario de votre application et démontrant le fonctionnement réel des fonctionnalités clés.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 Liste de vérification finale</div>
+  </template>
+
+  <p>
+    C'est la dernière épreuve du Stage 1. Vérifiez votre travail selon la liste suivante :
+  </p>
+
+  <div style="font-weight: bold; margin-bottom: 10px;">Auto-vérification des fonctionnalités clés</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Scénario clair</strong> : un secteur ou scénario d'application spécifique a été choisi</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Boucle logique</strong> : le flux principal fonctionne, pas seulement le Happy Path</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Piloté par l'AI</strong> : l'API du grand modèle est réellement appelée, pas de réponses prédéfinies</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Expérience complète</strong> : inclut le Loading, la gestion des erreurs et les données simulées</label></li>
+  </ul>
+
+  <div style="font-weight: bold; margin: 20px 0 10px;">Préparation des livrables</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Prototype d'application</strong> : le code est terminé et exécutable</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Vidéo de démonstration</strong> : environ 30 secondes, montrant clairement les points forts</label></li>
+  </ul>
+</el-card>
+
+## Prochaine étape
+
+Une fois le projet final terminé, vous êtes désormais capable de « développer seul un prototype d'application AI ».
+Dans le Stage 2 qui suit, nous approfondirons le développement full-stack plus complexe et apprendrons comment transformer ce prototype en une véritable application commerciale, déployable en ligne, avec une base de données et un système utilisateur.
+
+Rendez-vous à la prochaine étape !
+
+<RelatedArticlesSection
+  title="Continuer à progresser"
+  description="Félicitations pour avoir terminé le Stage 1, ces chapitres peuvent vous aider à passer au développement professionnel."
+  :items="relatedArticles"
+/>
diff --git a/docs/fr-fr/stage-1/finding-great-idea/images b/docs/fr-fr/stage-1/finding-great-idea/images
new file mode 120000
index 0000000..b3840d5
--- /dev/null
+++ b/docs/fr-fr/stage-1/finding-great-idea/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/finding-great-idea/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/finding-great-idea/index.md b/docs/fr-fr/stage-1/finding-great-idea/index.md
new file mode 100644
index 0000000..efd3375
--- /dev/null
+++ b/docs/fr-fr/stage-1/finding-great-idea/index.md
@@ -0,0 +1,1071 @@
+---
+title: 'Trouver une bonne idée - Des besoins utilisateur à un produit qui se vend'
+description: "Apprenez à découvrir des opportunités commerciales dans les frustrations quotidiennes, maîtrisez la méthodologie systématique d'analyse des besoins, et transformez une idée ordinaire en un concept de produit que les utilisateurs sont prêts à payer."
+---
+
+<script setup>
+const duration = 'environ <strong>3 heures</strong>'
+</script>
+
+# Module 2 : Trouver une bonne idée
+
+## Introduction au chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['Découverte des besoins', 'Pensée produit', 'Analyse utilisateur', 'Modèle économique']" coreOutput="3 concepts de produit validés" expectedOutput="Direction entrepreneuriale / produit actionnable">
+
+Dans le chapitre précédent, nous avons appris à utiliser un AI IDE pour créer des choses, mais il y a une question plus fondamentale : <strong>que créer ?</strong>
+
+Beaucoup de gens veulent d'emblée "faire un outil IA" ou "créer une plateforme sociale", mais le résultat final n'intéresse personne. Le problème ? <strong>Ils n'ont pas trouvé un vrai besoin.</strong>
+
+La réalité est encore plus cruelle : <strong>beaucoup de produits résolvent un problème, mais les utilisateurs refusent tout simplement de payer.</strong>
+
+Dans ce chapitre, nous allons suivre l'histoire de Xiaoming pour apprendre à trouver une direction produit qui vaut la peine d'être poursuivie.
+
+À la fin de ce chapitre, vous disposerez d'une <strong>méthodologie complète pour trouver des idées</strong>, ainsi que de 3 concepts de produit validés.
+
+</ChapterIntroduction>
+
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Step 1', description: 'Établir des critères de jugement' },
+      { title: 'Step 2', description: 'Explorer les frustrations quotidiennes' },
+      { title: 'Step 3', description: 'Segmenter les groupes d\'utilisateurs' },
+      { title: 'Step 4', description: 'Approfondir les scénarios' },
+      { title: 'Step 5', description: 'Valider l\'authenticité du besoin' },
+      { title: 'Step 6', description: 'Affiner le concept de produit' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Step 1 : Établir des critères de jugement -- Quels besoins les utilisateurs sont-ils prêts à payer ?
+
+::: warning Pourquoi ce chapitre est-il important ?
+
+Certains pourraient trouver cela étrange : "Ce n'est pas un cours de Vibe Coding ? Pourquoi apprendre d'abord à 'trouver des besoins' ? Ne peut-on pas simplement commencer à coder ?"
+
+En effet, la plupart des cours de programmation vous enseignent directement à réaliser des projets : faire un Todo List, une calculatrice, un blog personnel... Ces projets vous aident certes à vous familiariser avec la syntaxe et les outils, mais le problème est :
+
+<strong>Si la direction est mauvaise, plus vous avancez, plus vous vous égarez.</strong>
+
+Imaginez :
+- Vous passez deux semaines à créer un "système de gestion de calendrier", mais il en existe déjà 100 meilleurs sur le marché
+- Vous créez un "calculateur de calories par photo", mais les utilisateurs le désinstallent après une seule utilisation
+- Vous faites un "carnet de dépenses personnel", mais vous-mêmes êtes trop paresseux pour l'utiliser
+
+Ces projets terminés, pouvez-vous les mettre sur votre CV ? Probablement pas, car <strong>ils ne résolvent pas de problèmes réels et ne créent pas de valeur réelle</strong>.
+
+Puisque nous allons investir du temps dans l'apprentissage, pourquoi ne pas viser de meilleurs résultats ?
+
+Puisque le Vibe Coding nous permet de transformer rapidement une idée en produit, nous devrions d'autant plus apprendre à <strong>trouver des idées qui valent la peine d'être réalisées</strong>. En nous entraînant de la manière la plus proche de la réalité -- non pas en faisant des "projets d'exercice", mais en créant des "produits que les gens veulent utiliser".
+
+C'est pourquoi nous devons d'abord apprendre à "trouver une bonne idée".
+
+---
+
+**L'auteur estime personnellement** que le temps est précieux, <strong>puisque nous faisons les choses, faisons-les du mieux possible</strong>, sinon pourquoi ne pas simplement jouer ? En tant que responsable, l'auteur s'efforcera aussi de vous soutenir pour que vous donniez le meilleur de vous-même.
+
+Même si personne d'autre ne croit en vous, l'auteur espérera fermement que vous pourrez donner le meilleur de vous-même. Ayant choisi le vibecoding pour créer des produits, voyez jusqu'où vous pouvez aller !
+
+:::
+
+
+---
+
+## Ouverture : L'histoire de Xiaoming, développeur indépendant
+
+Xiaoming est programmeur et travaille depuis trois ans. Un jour, il a eu une idée : et si je créais une application de fitness pour aider les utilisateurs à planifier leurs entraînements et suivre leurs données d'exercice ? Cette idée l'a enthousiasmé, il se sentait enfin prêt à se lancer.
+
+L'année suivante, Xiaoming a consacré presque tout son temps libre au projet. Il a créé une application très complète -- module de cours, système de suivi, fonctionnalité communautaire, analyse de données, tout ce qu'il fallait. L'interface était plutôt réussie, du moins il en était satisfait.
+
+Le jour du lancement, Xiaoming était plein d'espoir. Il a investi pas mal d'argent en marketing, et dès le premier mois, 50 000 personnes ont téléchargé l'application. Pas mal comme début, non ?
+
+Mais très vite, les problèmes sont apparus. Les utilisateurs téléchargeaient l'application, l'utilisaient une fois, puis la désinstallaient. Le taux de rétention à 7 jours n'était que de 5 %. Il a mis en place plusieurs fonctionnalités payantes, mais presque aucun utilisateur n'était prêt à payer. Plus décourageant encore, des produits établis comme Keep, Boohee et FitTime offraient plus de fonctionnalités et un meilleur contenu. Pourquoi les utilisateurs passeraient-ils à son application ?
+
+Au bout d'un an, Xiaoming avait perdu 200 000 yuan.
+
+Assis devant son ordinateur, regardant les données décevantes du tableau de bord, il n'avait qu'une seule question : mon application est plutôt bien faite, pourquoi personne ne l'utilise ? Et encore moins paie pour l'utiliser ?
+
+
+
+L'échec de Xiaoming n'est pas dû à un manque de compétences techniques, ni à un produit mal fait. Pour être honnête, son application avait beaucoup de fonctionnalités et une belle interface.
+
+**Le problème vient du point de départ.**
+
+Il ne s'est jamais posé la question la plus fondamentale : les utilisateurs en ont-ils vraiment besoin ?
+
+Il a vu que le marché des applications de fitness était énorme, que Keep était évalué à des milliards, et il a pensé que c'était une bonne opportunité. Mais il n'a pas clarifié plusieurs choses : pourquoi les utilisateurs auraient-ils besoin d'une autre application de fitness ? Quelle est ma différenciation par rapport à Keep ? Les utilisateurs seraient-ils prêts à payer pour cela ?
+
+<strong>Si la direction est mauvaise, plus vous avancez, plus vous vous égarez.</strong> Il a passé un an à perfectionner une mauvaise direction, pour s'éloigner de plus en plus du succès.
+
+
+::: tip Ce que nous allons faire dans ce chapitre
+
+Dans ce chapitre, nous allons aider Xiaoming à analyser ce qui n'a pas fonctionné, puis ensemble trouver une direction produit que les gens seraient réellement prêts à payer.
+
+Nous procéderons en trois étapes :
+
+**Première partie : Trouver le vrai besoin** -- Comprendre d'abord quels types de besoins les utilisateurs sont prêts à payer
+
+**Deuxième partie : Extraire une bonne idée** -- Apprendre à identifier des opportunités commerciales à partir d'idées ordinaires
+
+**Troisième partie : Affinage par conversation avec l'IA** -- Utiliser l'IA pour transformer une idée en un plan de produit réalisable
+
+:::
+
+---
+
+## Première partie : Trouver le vrai besoin
+
+Xiaoming était découragé, mais n'a pas abandonné. Il a commencé à réfléchir à une question : quels types de besoins les utilisateurs sont-ils réellement prêts à payer ?
+
+### La perplexité de Xiaoming : pourquoi les utilisateurs ne paient-ils pas ?
+
+Il est allé voir quelques amis qui avaient utilisé son application pour recueillir leurs avis sincères.
+
+L'ami A a dit : "Ton application est plutôt bien, mais j'utilise déjà Keep, pourquoi devrais-je changer ?"
+
+L'ami B a dit : "Tu me demandes d'enregistrer chaque entraînement, c'est trop compliqué, j'ai la flemme."
+
+L'ami C a été plus direct : "Les fonctionnalités gratuites suffisent, pourquoi devrais-je payer ?"
+
+Ces réponses ont fait réaliser à Xiaoming où se trouvait le problème.
+
+**Premier problème : les utilisateurs ne changent pas parce que la solution actuelle est déjà suffisante.** Des produits établis comme Keep ont déjà beaucoup de fonctionnalités, les habitudes sont prises, et le coût de migration est élevé. Pourquoi changeraient-ils pour un produit similaire ?
+
+**Deuxième problème : les utilisateurs ne veulent pas changer leurs habitudes.** Enregistrer chaque entraînement est trop fastidieux. Si un produit exige que les utilisateurs changent plus de 3 habitudes, il échouera probablement.
+
+**Troisième problème : il y a trop d'alternatives gratuites.** Vos fonctionnalités sont trop génériques, sans valeur unique, et les utilisateurs ne trouvent aucune raison de payer.
+
+### Qu'est-ce qu'un vrai besoin ?
+
+Xiaoming a commencé à étudier les produits réussis pour lesquels les utilisateurs paient. Il a découvert un point commun : ces produits ne résolvent pas des besoins du type "je trouve ça utile", mais des besoins pour lesquels les utilisateurs sont prêts à payer, à changer de comportement et à tolérer des désagréments.
+
+Autrement dit, <strong>un vrai besoin est validé par les actes des utilisateurs, pas inventé par un chef de produit.</strong>
+
+### Cas : Les produits pour lesquels les utilisateurs paient
+
+Xiaoming a étudié plusieurs cas de réussite pour comprendre quels points de douleur ils avaient ciblés.
+
+#### Meicai : Permettre aux petits restaurateurs de bien dormir
+
+En surface, ce que fait Meicai est simple : aider les restaurants à acheter des légumes. Mais si vous y réfléchissez bien, pourquoi les restaurateurs l'utiliseraient-ils ?
+
+Parce que les petits restaurateurs doivent se lever à 4 heures du matin pour aller au marché de gros, c'est épuisant, et ils se font souvent arnaquer. Ce que fait Meicai, ce n'est pas simplement du "e-commerce de légumes", c'est restructurer toute la chaîne d'approvisionnement pour que les petits restaurateurs puissent dormir tranquilles.
+
+Plus le point de douleur est intense, plus la volonté de payer est forte. Le temps et l'énergie économisés valent plus que les économies sur les légumes.
+
+#### Xiaohongshu : Résoudre la difficulté de choisir
+
+En surface, Xiaohongshu est un "partage d'expériences d'achats à l'étranger". Mais pourquoi les utilisateurs passent-ils du temps à lire des publications ?
+
+Face à une quantité massive de produits, les utilisateurs ne savent pas ce qui vaut la peine d'être acheté et ce qui ne l'est pas. Ils ont besoin de quelqu'un de confiance pour les aider à filtrer, gagner du temps et éviter les mauvais choix.
+
+Xiaohongshu résout en réalité deux points de douleur profonds : la difficulté de choisir et le manque de confiance. Les utilisateurs sont prêts à payer pour "gagner du temps" et "éviter les erreurs", c'est pourquoi Xiaohongshu a réussi.
+
+---
+
+Après avoir étudié ces cas, Xiaoming a fait une découverte importante.
+
+Ce pour quoi les utilisateurs paient n'est jamais une "fonctionnalité", mais "résoudre une peur" et "éliminer une anxiété". Meicai résout la peur des petits restaurateurs face à la difficulté des achats matinaux, Xiaohongshu résout la peur des utilisateurs de faire de mauvais achats.
+
+<strong>La peur motive le paiement, l'anxiété motive l'action.</strong>
+
+### Les trois couches des besoins : point de douleur, point de satisfaction, point de démangeaison
+
+Xiaoming a approfondi ses recherches et a découvert que les besoins des utilisateurs peuvent être classés en trois types :
+
+::: tip Point de douleur (Pain Point) -- piloté par la peur
+
+**Nature :** Un problème que l'utilisateur vit actuellement, qui le fait souffrir, s'inquiéter ou le met en difficulté. Ne pas le résoudre est insupportable, voire menace sa survie ou sa sécurité.
+
+**Exemples :**
+- Les diabétiques ne savent pas combien de glucides provoqueront un pic de glycémie (peur : menace pour la santé)
+- Les petits restaurateurs se lèvent à 4 heures du matin pour aller au marché de gros (peur : difficulté de survie)
+
+**Clé :** Les utilisateurs sont prêts à payer, car ne pas résoudre le problème est "très douloureux".
+
+:::
+
+::: tip Point de satisfaction (Delight Point) -- gratification immédiate
+
+**Nature :** L'utilisateur a un besoin qui peut être satisfait immédiatement, produisant une sensation de plaisir instantanée.
+
+**Exemples :**
+- Livraison de repas en 30 minutes (satisfaction immédiate de la faim)
+- Génération automatique de présentations élégantes (plaisir de gagner du temps et des efforts)
+
+**Clé :** Rendre l'utilisateur "heureux" est la clé de la fidélisation, mais comme point de paiement unique, c'est faible.
+:::
+
+::: tip Point de démangeaison (Itch Point) -- moi virtuel
+
+**Nature :** L'utilisateur veut devenir meilleur, plus cool, plus raffiné, mais ce n'est pas indispensable. C'est agréable si c'est satisfait, et ce n'est pas grave si ce ne l'est pas.
+
+**Exemples :**
+- Enregistrer la quantité d'eau bue chaque jour (image d'une vie disciplinée)
+- Ajouter des filtres artistiques aux photos avec l'IA (image d'un goût artistique)
+
+**Clé :** La volonté de payer pour un "point de démangeaison" est faible, car ne pas le résoudre n'a pas de conséquences.
+
+:::
+
+Quelle est la bonne priorité ? Une bonne recommandation est : point de douleur > point de satisfaction > point de démangeaison
+
+Pourquoi ?
+
+1. **Le point de douleur est un besoin de survie :** Ne pas le résoudre est insupportable (ou très douloureux), les utilisateurs doivent payer. C'est un "analgésique".
+2. **Le point de satisfaction est une récompense immédiate :** Rendez l'utilisateur heureux, et il reviendra. C'est une "mécanisme d'addiction" (au sens positif).
+3. **Le point de démangeaison est la satisfaction d'un désir :** C'est optionnel, c'est ce qui est le plus facilement éliminé. C'est une "vitamine" ou un "produit de luxe".
+
+**Insight clé :** L'erreur que font beaucoup de chefs de produit est de vendre un produit de type "point de démangeaison" avec des arguments de type "point de douleur".
+
+Par exemple : "Enregistrer votre consommation d'eau vous rendra plus en bonne santé" -- boire de l'eau est effectivement sain, mais ne pas l'enregistrer ne vous rendra pas malade. C'est emballer un point de démangeaison comme un point de douleur, les utilisateurs ne seront pas convaincus.
+
+### La méthode en 5 étapes pour valider un vrai besoin
+
+Xiaoming s'est demandé : **quand j'ai une idée, comment puis-je rapidement déterminer si elle vaut la peine d'investir ?**
+
+Il a étudié la méthode de jugement en 5 étapes couramment utilisée par les chefs de produit (détails en Annexe A) :
+
+1. **Première étape : Discuter directement avec de vrais utilisateurs pour comprendre ce qu'ils font actuellement**
+
+   Trouvez 10 utilisateurs cibles. Demandez-leur : "Comment résolvez-vous ce problème actuellement ?" Si l'utilisateur utilise déjà une méthode, le problème existe vraiment. Si l'utilisateur dit qu'il n'a pas besoin de le résoudre, ce n'est probablement pas un vrai besoin.
+
+2. **Deuxième étape : Analyser les solutions de remplacement actuelles des utilisateurs et identifier votre avantage**
+
+   Les utilisateurs utilisent peut-être d'autres produits, Excel, leur mémoire, ou tolèrent le problème. Vous devez comprendre les défauts de ces solutions. Votre produit doit être nettement meilleur pour que les utilisateurs soient prêts à changer.
+
+3. **Troisième étape : Tester si les utilisateurs sont prêts à payer pour votre produit**
+
+   Faites une prévente ou demandez un acompte. Calculez le pourcentage d'utilisateurs prêts à payer un acompte (plus tôt vous gagnez de l'argent, plus le besoin est confirmé) :
+   - Plus de 10 % : le besoin est réel, cela vaut l'investissement
+   - 5 % à 10 % : le besoin existe, mais doit être affiné
+   - Moins de 5 % : le besoin n'est probablement pas valide
+
+4. **Quatrième étape : Estimer la taille du marché et la rentabilité potentielle**
+
+   Calculez trois chiffres : nombre total d'utilisateurs cibles × volonté de payer × prix moyen. Le produit donne la taille du marché. Si le marché est trop petit, cela ne vaut peut-être pas la peine.
+
+5. **Cinquième étape : Réfléchir aux barrières à l'entrée de votre produit pour empêcher la copie**
+
+   Considérez ces barrières : difficulté technique, effet de réseau, marque, avantage de coût. Elles vous aideront à rester compétitif à long terme.
+
+**Résumé de cette partie : Ce que Xiaoming a appris**
+
+1. **Les critères d'un vrai besoin**
+   - Le critère le plus important est la volonté de payer des utilisateurs.
+   - Les utilisateurs sont prêts à changer de comportement.
+   - Sans solution, les utilisateurs subissent une perte importante.
+
+2. **Éviter les faux besoins**
+   - Un point de démangeaison n'est pas un point de douleur, il ne peut pas être considéré comme un vrai besoin.
+   - Le marché est trop petit pour soutenir un modèle économique.
+   - La solution est plus complexe que le problème, les utilisateurs abandonneront.
+
+3. **Ordre de priorité**
+   - La vraie priorité est : point de douleur > point de satisfaction > point de démangeaison.
+
+**Résultat de cette partie**
+- Je comprends ce qu'est un vrai besoin.
+- Je maîtrise la classification en trois couches des besoins : point de douleur, point de satisfaction, point de démangeaison.
+- J'ai appris à utiliser la méthode en 5 étapes pour valider l'authenticité d'un besoin.
+
+---
+
+## Deuxième partie : Extraire une bonne idée
+
+Xiaoming sait maintenant ce qu'est un vrai besoin, mais il ne sait toujours pas par où commencer. Il ne peut pas inventer un besoin à partir de rien.
+
+Il a décidé de commencer par ce qu'il connaît le mieux -- les gens et les choses autour de lui.
+
+### Partir de soi-même : La soeur de Xiaoming
+
+Xiaoming a pensé à sa soeur. Elle venait d'avoir un bébé et se plaignait toujours de ne pas avoir le temps de faire de l'exercice, de ne pas réussir à perdre du ventre, et d'être très anxieuse.
+
+Un jour, il lui a demandé : "Comment résous-tu le problème du fitness actuellement ?"
+
+Sa soeur a soupiré : "Je fais du sport avec Keep, mais ces exercices ne conviennent pas à un corps post-partum, mon dos me fait encore plus mal après. Aller à la salle de sport ? Personne pour garder le bébé. Prendre un coach personnel ? 300 à 500 yuans par séance, trop cher. M'entraîner seule ? J'ai peur de me blesser."
+
+Xiaoming a compris que c'était peut-être le vrai besoin qu'il cherchait.
+
+Les problèmes de sa soeur étaient en réalité très concrets : du temps fragmenté, besoin de s'occuper du bébé, pas de bloc de temps pour faire du sport ; des limitations physiques, diastasis des muscles abdominaux, relâchement du plancher pelvien, pas d'exercice intense possible ; beaucoup d'anxiété, corps transformé, peur d'être rejetée par son mari, complexe social ; trop d'informations contradictoires, elle ne sait pas quels exercices sont adaptés au post-partum ; et un sentiment de solitude, personne ne comprend sa situation, manque de soutien.
+
+Ce sont tous de vrais points de douleur, pas des points de démangeaison du type "c'est bien si on a".
+
+---
+
+### Segmentation horizontale : Les besoins de différents groupes
+
+Xiaoming a réalisé que l'idée "application de fitness" était trop vague. Il voulait aider tout le monde à faire du sport, mais le problème est que tout le monde a des besoins différents.
+
+Il a fait une segmentation horizontale, divisant "les personnes qui veulent faire du sport" en plusieurs catégories (méthode détaillée en Annexe B) :
+
+Les pratiquants de musculation ont besoin de calculer précisément leur apport en protéines, la saisie manuelle est trop fastidieuse, leur volonté de payer est élevée, ils recherchent l'efficacité. Les diabétiques doivent contrôler strictement les glucides, mais manger au restaurant rend difficile l'estimation, c'est un besoin essentiel, ils sont prêts à payer et le taux de réachat est élevé. Les mamans post-partum veulent retrouver leur silhouette mais n'ont pas le temps de calculer, elles ont besoin d'une solution simple, sont sensibles au temps et ont besoin d'un service clé en main. Les habitués de la livraison mangent au restaurant tous les jours sans savoir combien de calories ils consomment, c'est un scénario fréquent, mais la volonté de payer est moyenne. Les étudiants préparant des concours ont besoin d'outils d'apprentissage efficaces, mais ne savent pas lesquels utiliser, c'est un besoin essentiel, mais le prix moyen est faible.
+
+Xiaoming a choisi le groupe des "mamans post-partum". Pourquoi ?
+
+D'abord, il est lui-même utilisateur -- sa soeur est une maman post-partum, il comprend naturellement les points de douleur de ce groupe. Ensuite, le point de douleur est intense -- l'anxiété de la récupération post-partum est réelle, pas un point de démangeaison. Troisièmement, la volonté de payer est forte -- les mamans sont prêtes à dépenser pour retrouver leur silhouette. Quatrièmement, la concurrence est relativement faible -- il n'y a pas de produit spécifiquement dédié aux mamans post-partum sur le marché.
+
+::: tip La logique de segmentation du chef de produit
+
+Pourquoi la segmentation est-elle si importante ?
+
+Parce qu'il est difficile de gagner avec un outil généraliste. Les grandes plateformes ont déjà conquis le marché "général", il est difficile de les surpasser en fonctionnalités. Les besoins des segments spécifiques sont plus intenses -- pour les mamans post-partum, le fitness est un besoin essentiel, pour les pratiquants ordinaires c'est juste "ça irait". Servir bien un petit groupe est plus facile pour construire une réputation que d'essayer de plaire à tout le monde. Les points de douleur des segments sont plus spécifiques et les utilisateurs sont plus disposés à payer pour une solution.
+
+:::
+
+---
+
+### Approfondissement vertical : Le scénario utilisateur complet
+
+Après avoir identifié le groupe cible, Xiaoming ne s'est pas arrêté à la fonctionnalité unique de "fitness post-partum". Il a voulu mieux comprendre le scénario utilisateur complet (méthode détaillée en Annexe C).
+
+Il a observé une journée dans la vie de sa soeur.
+
+À 6 heures du matin, le bébé venait de s'endormir, sa soeur avait 30 minutes de libre. Elle voulait faire de l'exercice, mais craignait de réveiller le bébé et ne savait pas quels mouvements étaient sûrs.
+
+À 10 heures, sa soeur berçait le bébé pour le faire dormir, le dos lui faisait mal. Elle voulait faire des exercices de rééducation, mais ses mains étaient occupées.
+
+À 15 heures, le bébé dormait, sa soeur voulait faire du sport. Mais elle était très fatiguée et ne savait pas si elle pouvait encore s'entraîner.
+
+À 20 heures, sa soeur avait enfin du temps libre, mais elle était très anxieuse. Elle se regardait dans le miroir, se sentait détruite, et pleurait en regardant ses anciennes photos.
+
+Xiaoming a découvert que le point de douleur de sa soeur n'était pas "l'absence de cours de fitness", mais "la peur et l'anxiété de la récupération post-partum".
+
+---
+
+::: info La pensée par scénarios du chef de produit
+
+Beaucoup pensent que les points de douleur sont des besoins fonctionnels, mais ce n'est pas le cas. Un point de douleur est une émotion dans un scénario combinée à une volonté de payer.
+
+Quand une maman post-partum fait face à son corps transformé dans le miroir, le vrai point de douleur n'est pas "je ne sais pas comment faire du sport", mais la peur -- crainte d'une mauvaise récupération avec des séquelles ; l'anxiété -- en se regardant dans le miroir, elle a l'impression que sa vie est finie ; l'impuissance -- ne pas savoir par où commencer, sans personne pour guider ; la solitude -- les autres reprennent vite, alors qu'elle met du temps à se remettre.
+
+Un bon design de produit résout des émotions, pas seulement des fonctionnalités. Derrière les émotions se trouve la motivation au paiement.
+
+:::
+
+---
+
+### Reconstruction de la valeur : D'une "application de fitness" à une "assistante de récupération post-partum"
+
+Sur la base de cette analyse, Xiaoming a redessiné le produit.
+
+::: tip Concept de produit reconstruit : "Assistante de récupération post-partum"
+
+**Positionnement central :** Pas seulement un outil de fitness, mais une "coach de rééducation personnelle + soutien psychologique" pour les mamans post-partum
+
+**Fonctionnalités clés :**
+1. **Entraînements fragmentés :**
+   - Seulement 10-15 minutes par session
+   - Possibilité de s'entraîner même quand le bébé dort
+   - Exercices adaptés pour "être faits en portant le bébé"
+
+2. **Cours spécifiques post-partum :**
+   - Classés par stade post-partum (0-3 mois, 3-6 mois, plus de 6 mois)
+   - Entraînements ciblés pour le diastasis abdominal et la rééducation du plancher pelvien
+   - Chaque exercice inclut des "précautions post-partum"
+
+3. **Correction des mouvements par IA :**
+   - Reconnaissance des mouvements par la caméra du téléphone
+   - Retours en temps réel : "genoux trop fléchis", "dos à redresser"
+   - Éviter les blessures dues à des mouvements incorrects
+
+4. **Communauté de soutien psychologique :**
+   - Communauté privée uniquement pour les mamans post-partum
+   - Partage des progrès de récupération, encouragement mutuel
+   - Intégration de conseillers psychologues professionnels
+
+5. **Plans personnalisés :**
+   - Personnalisés selon le mode d'accouchement (naturel/césarienne) et la condition physique
+   - Prise en compte des besoins spécifiques de l'allaitement
+
+**Modèle économique :**
+- Cours de base gratuits
+- Cours avancés : 99 yuans/mois (avec correction IA et plan personnalisé)
+- Coaching individuel : 299 yuans/mois (guidance en ligne)
+- Adhésion communautaire : 199 yuans/an (avec soutien psychologique et réponses d'experts)
+
+**Barrières concurrentielles :**
+- Professionnalisme : partenariat avec des centres de rééducation post-partum, soutien médical
+- Adhésion communautaire : les connexions émotionnelles entre mamans post-partum sont fortes
+- Accumulation de données : plus il y a de données corporelles, plus les plans sont précis
+
+**Taille du marché :**
+- Environ 10 millions de nouveau-nés par an en Chine
+- Marché de la rééducation post-partum : environ 50 milliards de yuans
+- Objectif : servir 1 % des mamans post-partum = 100 000 utilisateurs
+- ARPU (revenu moyen par utilisateur) : 500 yuans/an
+- Revenu potentiel : 50 millions de yuans/an
+
+:::
+
+Comparaison entre l'idée originale et le concept reconstruit :
+
+| Dimension | Idée originale | Après reconstruction |
+|-----------|---------------|---------------------|
+| Utilisateurs cibles | Tous les sportifs (large et vague) | Mamans post-partum (précis) |
+| Point de douleur résolu | Enregistrer les entraînements (point de démangeaison) | Anxiété de récupération post-partum (point de douleur) |
+| Barrière concurrentielle | Technologie (facilement copiable) | Professionnalisme + communauté + données |
+| Volonté de payer | Faible (beaucoup d'alternatives gratuites) | Élevée (besoin essentiel + valeur émotionnelle) |
+| Potentiel d'extension | Limité | Extensible à la grossesse et à la préparation |
+
+<strong>C'est l'évolution d'"une fonctionnalité" à "un produit que les gens paient".</strong>
+
+---
+
+### Plus d'exemples : D'une idée ordinaire à une bonne idée
+
+Xiaoming trouvait cette méthode très utile. Il a analysé d'autres exemples avec la même approche pour vérifier qu'elle était universelle (cas détaillés en Annexe D).
+
+#### Exemple 1 : De "calcul de calories" à "Manger serein pour diabétiques"
+
+L'idée ordinaire est de photographier les aliments pour identifier les calories, aider les personnes au régime à contrôler leur alimentation. Mais le problème est qu'il existe déjà des produits établis comme Boohee et MyFitnessPal.
+
+Xiaoming a fait une segmentation et a découvert que le groupe des diabétiques était intéressant : ils doivent contrôler strictement les glucides, mais manger au restaurant rend l'estimation difficile. En approfondissant leurs scénarios : avant le repas, ils ne savent pas s'ils peuvent manger tel plat, craignant un pic de glycémie ; pendant le repas, ils ont besoin d'un rappel en temps réel "vous avez déjà consommé tant de glucides" ; après le repas, ils doivent enregistrer les variations de glycémie pour voir la relation avec l'alimentation.
+
+Le produit reconstruit s'appelle "Manger serein pour diabétiques", positionné comme "assistant de sécurité alimentaire pour les diabétiques".
+
+---
+
+#### Exemple 2 : De "assistant d'actualités" à "Officier de renseignement pour analystes financiers"
+
+L'idée ordinaire est d'agréger les actualités de différentes plateformes pour éviter d'avoir à les ouvrir une par une. Mais des produits comme Jinri Toutiao et Tencent News le font déjà très bien.
+
+Après segmentation, Xiaoming a découvert que les analystes financiers ont des besoins spécifiques : ils doivent suivre les tendances de secteurs particuliers, mais les informations sont trop dispersées. En approfondissant leurs scénarios : le matin, ils consultent les variations boursières américaines overnight et les taux de change ; l'après-midi, ils suivent les annonces des entreprises de leur portefeuille et les nouvelles sectorielles ; ils ont besoin de grandes quantités d'informations sectorielles pour analyser de potentiels investissements.
+
+Le produit reconstruit s'appelle "Officier de renseignement pour analystes financiers", positionné comme "radar d'information et assistant décisionnel pour les professionnels de la finance".
+
+---
+
+#### Exemple 3 : De "plateforme de seconde main universitaire" à "Assistant de vide grenier pour diplômés"
+
+L'idée ordinaire est une plateforme de transactions de seconde main sur les campus. Mais Xianyu et Zhuanzhuan le font déjà très bien.
+
+Après segmentation, Xiaoming a découvert que les diplômés ont des besoins spécifiques : trop de choses, vendre une par une est trop fastidieux. En approfondissant leurs scénarios : il faut quitter le campus une semaine avant la fin des études, pas le temps de vendre lentement ; ils ne savent pas qui pourrait vouloir leurs affaires ; négocier, livrer, encaisser, c'est trop compliqué.
+
+Le produit reconstruit s'appelle "Assistant de vide grenier pour diplômés", positionné comme "gestionnaire de patrimoine pour les départs".
+
+---
+
+### Résumé de cette partie : Ce que Xiaoming a appris
+
+Grâce à cette deuxième partie, Xiaoming a compris :
+
+**1. Partir de soi-même**
+- Vous êtes vous-même utilisateur, vous comprenez naturellement les points de douleur de ce groupe
+- Les passions sont le meilleur point de départ, l'enthousiasme est le meilleur moteur
+
+**2. Segmenter horizontalement les groupes**
+- Ne pas servir "tout le monde", trouver "le groupe le plus touché"
+- Plus le segment est étroit, plus il y a d'opportunités, plus la volonté de payer est forte
+
+**3. Approfondir verticalement les scénarios**
+- Décrire le parcours utilisateur complet : avant, pendant et après l'utilisation
+- Trouver les déclencheurs émotionnels : peur, anxiété, impuissance, solitude...
+
+**4. Reconstruction de la valeur**
+- Passer de "fonctionnalité" à "solution"
+- Passer d'"outil" à "assistant / gestionnaire / partenaire"
+
+---
+
+📦 **Résultat de cette partie :**
+- Un groupe cible précis identifié (mamans post-partum)
+- Compréhension du scénario utilisateur complet et des émotions réelles
+- Concept de produit reconstruit avec un positionnement différencié clair
+
+---
+
+## Troisième partie : Affinage par conversation avec l'IA
+
+Xiaoming a maintenant une direction produit claire : une assistante de récupération post-partum. Mais il ne sait toujours pas comment procéder concrètement, par où commencer, et si la réalisation technique est difficile.
+
+Il a décidé d'utiliser l'IA pour l'aider à affiner son concept de produit et transformer son idée en plan exécutable.
+
+### Premier tour : Présenter l'idée originale
+
+Xiaoming a expliqué son idée à l'IA : "Je veux créer une application d'assistance à la récupération post-partum pour aider les mamans à retrouver leur silhouette. Mais je m'inquiète de la difficulté technique, en particulier pour la fonctionnalité de correction des mouvements par IA. Puis-je le faire seul ?"
+
+---
+
+### Deuxième tour : L'IA aide à planifier le MVP
+
+L'IA a répondu : "Excellente question ! Faisons une planification de MVP (Produit Minimum Viable)."
+
+L'IA a suggéré de procéder en trois phases. La première phase est de 1 à 2 mois, l'objectif est de valider le besoin. Pas d'application, d'abord un mini-programme WeChat avec uniquement des cours post-partum (vidéo) et une communauté de suivi. Fournir un guidage des mouvements manuellement, les utilisateurs envoient des vidéos et les coachs répondent. L'objectif est de vérifier si les mamans post-partum sont prêtes à payer.
+
+La deuxième phase est de 3 à 6 mois : si la première phase est validée, ajouter les fonctionnalités clés. Développer la correction des mouvements par IA en utilisant des SDK existants, comme la reconnaissance corporelle de Baidu. Ajouter des plans personnalisés, optimiser la communauté.
+
+La troisième phase est de 6 à 12 mois : passage à l'échelle. Développer une application indépendante, collaborer avec des centres de rééducation post-partum, s'étendre à la grossesse et à la préparation à la grossesse.
+
+Concernant la réalisation technique, l'IA a suggéré d'utiliser des capacités IA existantes, comme les API de Baidu ou Tencent, sans développer à partir de zéro, pour réduire les coûts. Au début, utiliser un mode mixte humain + IA, avec une transition progressive.
+
+Pour les coûts de démarrage, le développement du mini-programme coûte 10 000 à 20 000 yuans (en sous-traitance) ou vous pouvez le faire vous-même avec un AI IDE. Pour le contenu, collaborer avec des coachs de rééducation post-partum. Pour la promotion, commencer avec les groupes de mamans et Xiaohongshu.
+
+L'indicateur de validation est de 100 utilisateurs le premier mois, avec un taux de conversion payant de 10 %. Si cet objectif est atteint, le besoin est réel et l'investissement continue ; sinon, ajuster la direction à temps.
+
+---
+
+### Troisième tour : Xiaoming exprime ses inquiétudes
+
+Xiaoming a réfléchi et demandé : "Je m'inquiète de la création de contenu. Les cours de rééducation post-partum nécessitent un guidage professionnel, je n'ai pas de formation médicale, comment garantir la qualité des cours ?"
+
+---
+
+### Quatrième tour : L'IA propose des solutions
+
+L'IA a répondu : "C'est l'inquiétude de beaucoup de créateurs de startups technologiques, mais il y a des solutions."
+
+La première solution est de collaborer avec des professionnels. Trouver des coachs de rééducation post-partum, des médecins nutritionnistes hospitaliers. Vous fournissez la technologie et le produit, ils fournissent le contenu professionnel, avec un modèle de partage de revenus.
+
+La deuxième solution est d'intégrer du contenu existant de qualité. Au début, utiliser des vidéos de rééducation post-partum disponibles publiquement, sur YouTube ou Bilibili. Faire vous-même la vérification et l'organisation du contenu, puis créer du contenu original plus tard.
+
+La troisième solution est le contenu généré par les utilisateurs. Encourager les mamans expérimentées à partager leurs méthodes de récupération, utiliser le vote communautaire pour filtrer le contenu de qualité, et construire progressivement un écosystème de contenu.
+
+L'IA a recommandé de commencer par la première solution. La démarche concrète est de trouver 2 à 3 coachs de rééducation post-partum, négocier un partenariat : vous développez le produit, ils fournissent les cours. Partage des revenus : vous prenez 70 %, ils prennent 30 %. Cela garantit la qualité du contenu tout en réduisant les coûts. Coût de création des cours : 0 yuan (avec le modèle de partage). Vous n'investissez que du temps de développement et des coûts de promotion.
+
+---
+
+### Cinquième tour : Xiaoming pose la question de la promotion
+
+Xiaoming avait une dernière inquiétude : "Les coûts de promotion seront-ils élevés ? Comment trouver le groupe des mamans post-partum ?"
+
+---
+
+### Sixième tour : L'IA propose une stratégie de promotion
+
+L'IA a répondu : "Le groupe des mamans post-partum est en réalité facile à trouver, les coûts de promotion peuvent être très bas."
+
+La meilleure approche est Xiaohongshu. Rechercher les mots-clés "récupération post-partum", "diastasis abdominal", trouver les blogueurs pertinents et les contacter en message privé. Proposer un "essai gratuit d'un mois" en échange de promotion, le coût est quasiment nul.
+
+Ensuite, les groupes de mamans. Rechercher des groupes WeChat et QQ, entrer sous couvert de "partage d'expérience de récupération post-partum", partager du contenu utile sans faire de publicité directe, construire progressivement la confiance.
+
+Il est aussi possible de collaborer avec les maternités des hôpitaux, offrir des conseils gratuits de récupération post-partum, distribuer des flyers à l'hôpital. Le coût est celui de l'impression, quelques centaines de yuans. Ou collaborer avec des magasins pour bébés, placer du matériel promotionnel, offrir des cartes d'essai avec l'achat de produits pour bébé. Le coût est celui de la fabrication des cartes.
+
+L'indicateur de validation est : 100 utilisateurs le premier mois, 10 utilisateurs payants (taux de conversion de 10 %), coût total de promotion inférieur à 1 000 yuans, coût d'acquisition inférieur à 10 yuans par personne. Si cet indicateur est atteint, le besoin est réel et l'investissement peut continuer.
+
+---
+
+### Conclusion : Xiaoming a un plan clair
+
+Après 6 tours de conversation, Xiaoming avait enfin un plan clair.
+
+La première phase est de 1 à 2 mois : créer un mini-programme WeChat, collaborer avec 2 à 3 coachs de rééducation post-partum (modèle de partage), fournir uniquement des cours post-partum (vidéo) et une communauté de suivi, avec un guidage des mouvements manuel. Objectif : 100 utilisateurs, taux de conversion payant de 10 %.
+
+La deuxième phase est de 3 à 6 mois : si la première phase est validée, continuer à investir. Ajouter la correction des mouvements par IA, des plans personnalisés, optimiser la communauté.
+
+La troisième phase est de 6 à 12 mois : développer une application indépendante, collaborer avec des centres de rééducation post-partum, s'étendre à la grossesse et à la préparation.
+
+Les coûts de démarrage sont très bas : développement avec un AI IDE (0 yuan), contenu partagé avec les coachs (0 yuan au début), promotion via Xiaohongshu et les groupes de mamans (moins de 1 000 yuans). Coût total : moins de 1 000 yuans.
+
+---
+
+### La méthode en 5 étapes d'affinage par conversation avec l'IA
+
+À travers ce cas, Xiaoming a tiré un processus standard de conversation avec l'IA (détails en Annexe E).
+
+**Première étape : Présenter l'idée originale.** Décrivez votre idée initiale, même si elle est grossière. Dites à l'IA vos inquiétudes : concurrence féroce, difficulté de différenciation, etc.
+
+**Deuxième étape : Demander à l'IA de planifier le MVP.** Quelles fonctionnalités le MVP doit-il inclure ? En combien de phases ? Quel est l'objectif de chaque phase ? La réalisation technique est-elle difficile ?
+
+**Troisième étape : Exprimer vos inquiétudes.** Difficulté technique ? Coût de création de contenu ? Coût de promotion ? Difficulté d'acquisition d'utilisateurs ? Dites toutes vos réserves à l'IA.
+
+**Quatrième étape : Demander à l'IA de proposer des solutions.** L'IA donnera des conseils concrets pour vos inquiétudes. Comparez plusieurs options, choisissez la meilleure. Estimation des coûts.
+
+**Cinquième étape : Confirmer le plan final.** Organisez un plan d'action clair, fixez des indicateurs de validation. Si les objectifs ne sont pas atteints, ajustez la direction à temps.
+
+**Modèle de prompt :**
+```
+Je veux créer un [concept de produit],
+mais je m'inquiète de [votre inquiétude].
+Aidez-moi à :
+1. Planifier un MVP
+2. Donner des conseils techniques concrets
+3. Estimer les coûts
+4. Fixer des indicateurs de validation
+```
+
+---
+
+### Résumé de cette partie : Ce que Xiaoming a appris
+
+Grâce à cette troisième partie, Xiaoming a compris trois choses.
+
+**Premièrement, utiliser la conversation avec l'IA pour affiner le concept de produit.** N'espérez pas obtenir une réponse parfaite en une seule conversation, itérez sur plusieurs tours. Dites à l'IA vos observations, vos expériences, les retours de votre entourage. Si les suggestions de l'IA ne sont pas pertinentes, signalez-le. En fin de compte, aboutissez à un plan d'action concret.
+
+**Deuxièmement, les principes fondamentaux du MVP.** Minimal : ne faire que les fonctionnalités les plus essentielles. Validable : capable de vérifier rapidement si le besoin est réel. Peu coûteux : utiliser le coût le plus bas possible pour valider.
+
+**Troisièmement, les indicateurs de validation.** Taux de conversion payant supérieur à 10 % : le besoin est réel, cela vaut l'investissement. Taux de conversion de 5 à 10 % : le besoin existe, mais doit être affiné. Taux de conversion inférieur à 5 % : le besoin n'est pas valide, ajustez à temps.
+
+---
+
+📦 **Résultat du chapitre :**
+- Un plan MVP clair
+- Un chemin de réalisation technique
+- Des indicateurs de validation définis
+
+---
+
+## Épilogue : Votre action
+
+### Méthode mnémotechnique
+
+**Une personne, un sujet, un point d'entrée ; segmenter horizontalement et creuser verticalement pour trouver les points de douleur ; affiner le concept par conversation avec l'IA ; valider en 5 étapes avant d'agir**
+
+**Explication :**
+- **Une personne :** Partez de vous-même, vous comprenez naturellement ce groupe
+- **Un sujet :** Concentrez-vous sur une chose spécifique, ne soyez pas gourmand
+- **Un point d'entrée :** Trouvez le point d'entrée, plus c'est spécifique, mieux c'est
+- **Segmenter :** Segmenter horizontalement les groupes, trouver les utilisateurs les plus disposés à payer
+- **Creuser :** Creuser verticalement les scénarios, comprendre le parcours utilisateur complet
+- **Conversation IA :** Utiliser la conversation avec l'IA pour affiner le concept de produit
+- **Valider en 5 étapes :** Utiliser la méthode en 5 étapes pour valider l'authenticité du besoin
+
+---
+
+### Exercice post-chapitre
+
+Choisissez un petit problème de votre vie quotidienne et développez-le avec la méthode de ce chapitre :
+
+::: tip Mission d'exercice
+
+**1. Décrire le problème** (1 phrase)
+- Exemple : "Je veux créer une application de gestion de dépenses pour aider les utilisateurs à suivre leurs dépenses"
+
+**2. Segmenter : Trouver 3 groupes avec des besoins potentiellement différents**
+- Exemple : petits entrepreneurs, parents d'étudiants à l'étranger, freelances
+
+**3. Choisir un groupe, creuser verticalement : Décrire leur scénario complet et leurs émotions réelles**
+- Exemple : le scénario des parents d'étudiants à l'étranger -- vouloir savoir combien leur enfant dépense, mais l'enfant ne le dit pas
+
+**4. Reconstruire le concept de produit : D'"une fonctionnalité" à "une solution"**
+- Exemple : "Gestionnaire de budget d'études" -- pas seulement enregistrer les dépenses, mais permettre aux parents d'avoir une vue claire des dépenses de leur enfant à l'étranger
+
+**5. Évaluer votre idée avec la liste de validation** (voir Annexe F)
+
+**Partagez votre analyse dans la communauté et discutez avec les autres apprenants !**
+
+:::
+
+---
+
+## Annexe : Méthodologie SOP
+
+### Annexe A : La méthode en 5 étapes pour analyser les besoins
+
+Quand vous avez une idée, comment déterminer rapidement si elle vaut la peine d'investir ?
+
+**Première étape : Validation utilisateur -- Trouver 10 utilisateurs cibles**
+
+**Ne demandez pas :** "Utiliseriez-vous mon produit ?" (taux de faux positifs de 90 %)
+
+**Demandez :**
+1. "Comment résolvez-vous ce problème actuellement ?" (comprendre le comportement réel)
+2. "Au cours de la semaine dernière, combien de fois ce problème vous a-t-il gêné ?" (comprendre la fréquence)
+3. "Combien d'argent / de temps avez-vous dépensé pour le résoudre ?" (comprendre la volonté de payer)
+4. "S'il existait une solution, mais qu'elle nécessitait de changer vos habitudes, seriez-vous prêt ?" (comprendre le coût du changement)
+
+**Critères de jugement :**
+- Si 3 utilisateurs ou plus disent "je galère avec ça tous les jours" -- c'est peut-être un point de douleur
+- Si l'utilisateur dit "c'est intéressant, mais je ne suis pas pressé" -- c'est probablement un point de démangeaison
+- Si l'utilisateur dit "j'utilise actuellement XX pour résoudre ça, mais je n'en suis pas satisfait" -- il y a une opportunité
+
+**Question clé :** Quelle méthode l'utilisateur utilise-t-il actuellement pour résoudre ce problème ?
+
+| Type de solution alternative | Description | Jugement d'opportunité |
+|---------------------------|-------------|----------------------|
+| **Pas de solution alternative** | L'utilisateur tolère le problème | Grande opportunité, mais nécessite d'éduquer le marché |
+| **Méthode rudimentaire** | Excel, manuel, collaboration entre plusieurs personnes | Bonne opportunité, les utilisateurs veulent une meilleure solution |
+| **Combinaison de plusieurs outils** | Outil A + Outil B + Outil C | Bonne opportunité, l'intégration a de la valeur |
+| **Produit mature** | Mais l'utilisateur n'est pas satisfait | Opportunité, mais nécessite une différenciation |
+| **Produit mature** | L'utilisateur est satisfait | Opportunité faible, sauf innovation disruptive |
+
+::: tip Qu'est-ce qu'une "innovation disruptive" ?
+
+**Définition simple :** Ne pas faire un meilleur produit, mais servir un groupe d'utilisateurs auparavant ignoré de manière plus simple / moins chère.
+
+**Exemples :**
+- Téléphone classique → smartphone (pas plus de fonctionnalités, mais une interaction totalement différente)
+- Taxi classique → Uber (pas de meilleures voitures, mais rendre la course disponible partout à tout moment)
+- Librairie classique → livre numérique (pas plus de livres, mais faciliter le transport et l'achat)
+
+**Clé :** L'innovation disruptive commence souvent par le "bas du marché" ou un "nouveau segment d'utilisateurs", puis grignote progressivement vers le haut.
+
+:::
+
+**Cas :**
+- Les diabétiques utilisent actuellement "l'expérience + l'intuition" pour contrôler leur alimentation (méthode rudimentaire) -- grande opportunité
+- Les personnes au régime utilisent Boohee (produit mature, satisfaction moyenne) -- opportunité de segmentation
+- Les étudiants utilisent des groupes WeChat pour les transactions de seconde main (combinaison d'outils) -- opportunité d'intégration
+
+**La méthode la plus efficace : la prévente ou l'acompte**
+
+**Étapes :**
+1. Créez une landing page simple décrivant votre concept de produit
+2. Ajoutez un bouton "Prévente" ou "Réservation"
+3. Regardez combien de personnes sont prêtes à payer (même 1 yuan)
+
+**Critères de jugement :**
+- Utilisateurs prêts à payer un acompte > 10 % : besoin réel, ça vaut le coup
+- Utilisateurs prêts à payer un acompte 5-10 % : le besoin existe, mais doit être affiné
+- Utilisateurs prêts à payer un acompte &lt; 5 % : le besoin n'est pas valide, ou le concept a un problème
+
+**Attention :** Beaucoup de gens disent "je l'achèterai", mais seuls ceux qui paient vraiment sont vos utilisateurs cibles.
+
+**Formule simple :**
+```
+Taille du marché potentiel = Nombre d'utilisateurs cibles × Volonté de payer × Prix moyen
+```
+
+**Cas : Plateforme de transactions de seconde main universitaire**
+- Utilisateurs cibles : 40 millions d'étudiants en Chine
+- Ayant besoin de transactions de seconde main : 50 % = 20 millions
+- Prêts à utiliser la plateforme : 10 % = 2 millions
+- Fréquence de transaction annuelle : 2
+- Commission de la plateforme : 5 %
+- Prix moyen : 100 yuans
+- Taille du marché potentiel = 2 millions × 2 × 100 × 5 % = 20 millions de yuans/an
+
+**Critères de jugement :**
+- Taille du marché > 1 milliard : grand segment, ça vaut le coup
+- Taille du marché 100 millions - 1 milliard : segment moyen, faisable mais plafond évident
+- Taille du marché &lt; 100 millions : marché de niche, adapté pour une activité secondaire
+
+**Question clé :** Si le produit fonctionne, que faire contre la copie ?
+
+**Types de barrières concurrentielles courantes :**
+
+| Type de barrière | Description | Exemple |
+|-----------------|-------------|---------|
+| **Effet de réseau** | Plus il y a d'utilisateurs, plus le produit a de la valeur | WeChat, Uber |
+| **Accumulation de données** | Plus de données, algorithmes plus précis | Jinri Toutiao, TikTok |
+| **Notoriété de marque** | Occupation de l'esprit utilisateur | Coca-Cola, Nike |
+| **Économies d'échelle** | Plus la taille augmente, plus les coûts baissent | JD Logistics, Amazon |
+| **Brevets technologiques** | Barrière technologique fondamentale | Huawei, DJI |
+| **Coûts de migration** | Les coûts de changement pour l'utilisateur sont élevés | Logiciel d'entreprise, systèmes d'exploitation |
+
+**La réalité des projets en début de phase :**
+- La plupart des projets en début de phase n'ont pas de barrières évidentes
+- Mais ce n'est pas grave, la clé est de <strong>aller vite</strong>
+- D'abord conquérir le marché, puis construire des barrières
+
+---
+
+### Annexe B : Méthode de segmentation horizontale
+
+N'essayez pas de servir "tous les utilisateurs XX", mais trouvez <strong>un groupe spécifique</strong> dont les besoins sont plus intenses et plus concrets.
+
+**Première étape : Lister tous les segments possibles**
+
+Pour votre concept de produit, listez tous les groupes possibles.
+
+**Deuxième étape : Évaluer la valeur commerciale de chaque groupe**
+
+| Dimension d'évaluation | Description |
+|----------------------|-------------|
+| Intensité du point de douleur | Le besoin de ce groupe est-il un point de douleur ou un point de démangeaison ? |
+| Volonté de payer | Combien seraient-ils prêts à payer pour une solution ? |
+| Taille du marché | Combien de personnes dans ce groupe ? |
+| Niveau de concurrence | Les solutions existantes sont-elles satisfaisantes ? |
+| Votre compréhension du groupe | Comprenez-vous ce groupe ? Avez-vous des canaux d'accès ? |
+
+**Troisième étape : Choisir un groupe pour une analyse approfondie**
+
+Choisissez un groupe qui a :
+- Le point de douleur le plus intense
+- La plus forte volonté de payer
+- Que vous comprenez le mieux
+- Une concurrence relativement faible
+
+::: tip Exemple de segmentation
+
+**Concept de produit :** Application de gestion de dépenses
+
+| Segment | Point de douleur | Volonté de payer | Taille du marché | Concurrence |
+|---------|-----------------|-----------------|-----------------|-------------|
+| Employés de bureau | Saisie fastidieuse | Faible | Grande | Élevée |
+| Petits entrepreneurs | Confusion dépenses personnelles/professionnelles | Élevée | Moyenne | Moyenne |
+| Freelances | Revenus instables, besoin de prévoir les flux de trésorerie | Élevée | Moyenne | Moyenne |
+| Parents d'étudiants à l'étranger | Veulent savoir combien leur enfant dépense, mais l'enfant ne le dit pas | Élevée | Petite | Faible |
+
+**Choix :** Parents d'étudiants à l'étranger (point de douleur le plus intense, forte volonté de payer, concurrence relativement faible)
+
+:::
+
+---
+
+### Annexe C : Méthode d'approfondissement vertical des scénarios
+
+Après avoir identifié le groupe, ne vous arrêtez pas à une fonctionnalité unique, mais comprenez le <strong>scénario utilisateur complet</strong>.
+
+**Première étape : Décrire une journée type de l'utilisateur**
+
+Du matin au soir, décrivez le scénario complet d'utilisation de votre produit.
+
+**Deuxième étape : Analyser les points de douleur de chaque scénario**
+
+Dans chaque scénario, quels problèmes l'utilisateur rencontre-t-il ? Quelles émotions ?
+
+**Troisième étape : Trouver les déclencheurs émotionnels**
+
+Peur, anxiété, impuissance, solitude, colère, regret...
+
+**Quatrième étape : Reconstruire la valeur**
+
+Sur la base des scénarios et des émotions, reconstruisez la valeur du produit.
+
+::: tip Exemple d'approfondissement
+
+**Groupe :** Mamans post-partum
+
+| Heure | Scénario | Point de douleur | Émotion |
+|-------|----------|-----------------|---------|
+| 6h du matin | Le bébé vient de s'endormir, 30 minutes de libre | Ne sait pas quels mouvements sont sûrs | Peur |
+| 10h du matin | Berce le bébé, le dos fait mal | Les mains sont occupées, veut faire de la rééducation | Anxiété |
+| 15h | Le bébé dort, veut faire du sport | Très fatiguée, ne sait pas si elle peut encore s'entraîner | Impuissance |
+| 20h | Enfin du temps libre | Se regarde dans le miroir, se sent détruite | Dépression |
+| Long terme | Personne ne comprend | Se sent seule dans sa souffrance | Solitude |
+
+**Valeur reconstruite :** Passer d'"outil de fitness" à "coach de rééducation + soutien psychologique"
+
+:::
+
+---
+
+### Annexe D : Plus d'exemples d'idées ordinaires transformées en bonnes idées
+
+#### Exemple 1 : De "application de dépenses" à "Gestionnaire de budget d'études"
+
+**Idée ordinaire :** Application de comptabilité automatique, connectée à la carte bancaire pour classer automatiquement les dépenses
+
+**Problème :** Il existe déjà Sui Shou Ji, Wacai, les relevés Alipay...
+
+**Segmentation :**
+- Parents d'étudiants à l'étranger : veulent savoir combien leur enfant dépense à l'étranger et s'il dépasse le budget
+
+**Approfondissement vertical :**
+- Le point de douleur n'est pas "enregistrer les dépenses", mais <strong>"le sentiment de perte de contrôle"</strong> -- ne pas savoir combien l'enfant dépense ni où
+- Scénario : chaque mois, voir le relevé de carte de crédit, mais l'enfant ne dit jamais spontanément ce qu'il a acheté
+
+**Reconstruit :** "Gestionnaire de budget d'études" -- pas seulement enregistrer, mais permettre aux parents d'avoir une vue claire des dépenses de leur enfant à l'étranger
+
+**Fonctionnalités clés :**
+- Synchronisation en temps réel des dépenses de l'enfant
+- Alerte de dépassement de budget
+- Rapport mensuel d'analyse des dépenses
+- Comparaison avec les autres étudiants du même profil
+
+---
+
+#### Exemple 2 : De "outil Pomodoro" à "Preuve de travail à distance"
+
+**Idée ordinaire :** Application Pomodoro pour aider les utilisateurs à se concentrer
+
+**Problème :** Le temps d'écran du téléphone, Forest, Pomodoro ToDo...
+
+**Segmentation :**
+- Travailleurs à distance : besoin de prouver à leur patron "je travaille vraiment"
+
+**Approfondissement vertical :**
+- Le point de douleur n'est pas "le manque de concentration", mais <strong>"la crise de confiance"</strong> -- le patron ne me voit pas, comment prouver que je travaille ?
+- Scénario : chaque soir, le patron demande "comment s'est passé le travail aujourd'hui ?", impossible de prouver
+
+**Reconstruit :** "Preuve de travail à distance" -- aider les travailleurs à distance à établir la confiance avec leur employeur
+
+**Fonctionnalités clés :**
+- Suivi automatique du temps de travail
+- Rapports de productivité
+- Résumé d'activité à l'écran (version respectueuse de la vie privée)
+- Génération automatique quotidienne d'un "rapport de travail" envoyé au supérieur
+
+---
+
+#### Exemple 3 : De "échange de livres d'occasion" à "Bibliothèque de livres d'images"
+
+**Idée ordinaire :** Plateforme d'échange de livres d'occasion
+
+**Problème :** Duozhuayu, Xianyu, Kongfuzi...
+
+**Segmentation :**
+- Mamans : les livres d'images de leurs enfants ne servent plus une fois lus, mais les neufs sont chers
+
+**Approfondissement vertical :**
+- Le point de douleur n'est pas "les livres sont chers", mais <strong>"la durée de vie courte des livres d'images"</strong> -- le livre qu'un enfant lit à 3 ans ne l'intéresse plus à 4 ans
+- Scénario : la maison est pleine de livres d'images que personne ne lit plus, mais c'est dommage de les jeter
+
+**Reconstruit :** "Bibliothèque de livres d'images à domicile" -- pas vendre des livres d'occasion, mais offrir un "service de location" de livres d'images
+
+**Fonctionnalités clés :**
+- Abonnement de livres d'images (5 livres adaptés à l'âge livrés chaque mois, renvoyez-les pour en recevoir de nouveaux)
+- Suivi de la progression de lecture
+- Recommandations adaptées à l'âge
+- Garantie de désinfection
+
+---
+
+### Annexe E : La méthode en 5 étapes d'affinage par conversation avec l'IA
+
+À travers plusieurs tours de conversation avec l'IA, transformez progressivement une idée ordinaire en un concept de produit précis et réalisable.
+
+**Action :**
+- Décrivez votre idée initiale (même grossière)
+- Dites à l'IA vos inquiétudes (concurrence féroce, difficulté de différenciation, etc.)
+
+**Prompt :**
+```
+Je veux créer un [concept de produit],
+mais je remarque que [problème/inquiétude].
+```
+
+**Action :**
+- Demandez à l'IA de planifier un MVP
+- Discutez de la difficulté technique et des coûts
+- Fixez des indicateurs de validation
+
+**Prompt :**
+```
+Aidez-moi à :
+1. Planifier un MVP
+2. Donner des conseils techniques concrets
+3. Estimer les coûts
+4. Fixer des indicateurs de validation
+```
+
+**Action :**
+- Difficulté technique ?
+- Coût de création de contenu ?
+- Coût de promotion ?
+- Difficulté d'acquisition d'utilisateurs ?
+
+**Prompt :**
+```
+Je m'inquiète de :
+1. [Inquiétude 1]
+2. [Inquiétude 2]
+3. [Inquiétude 3]
+```
+
+**Action :**
+- Pour chacune de vos inquiétudes, obtenir des conseils concrets
+- Comparer plusieurs options, choisir la meilleure
+- Estimation des coûts
+
+**Prompt :**
+```
+Pour mes inquiétudes, veuillez proposer des solutions concrètes.
+```
+
+**Action :**
+- Organiser un plan d'action clair
+- Fixer des indicateurs de validation
+- Si les objectifs ne sont pas atteints, ajuster la direction
+
+**Prompt :**
+```
+Veuillez m'aider à organiser un plan d'action clair.
+```
+
+::: tip Conseils clés
+
+- **Plusieurs tours :** N'espérez pas une réponse parfaite en une seule conversation, itérez
+- **Fournir des informations :** Dites à l'IA vos observations, expériences et retours
+- **Questionner l'IA :** Si les suggestions de l'IA ne sont pas pertinentes, signalez-le
+- **Se concentrer sur l'exécution :** Aboutissez toujours à un plan d'action concret
+
+:::
+
+---
+
+### Annexe F : Liste de validation des besoins
+
+Avant de décider d'investir du temps dans le développement, utilisez la liste suivante pour valider votre idée -- <strong>la question clé est : les utilisateurs paieront-ils pour cela ?</strong>
+
+::: tip Liste de validation des besoins
+
+**1. Clarté du profil utilisateur**
+- ☐ Pouvez-vous décrire l'utilisateur cible en une phrase ?
+- ☐ Pouvez-vous dire quelle est sa solution alternative actuelle ?
+- ☐ Pouvez-vous décrire les détails concrets de son scénario d'utilisation ?
+- ☐ Ce groupe a-t-il la capacité de payer ?
+
+**2. Évaluation de l'intensité du point de douleur**
+- ☐ Combien l'utilisateur paie-t-il actuellement pour résoudre ce problème ? (temps/argent/énergie)
+- ☐ Si le problème n'est pas résolu, quelles sont les conséquences ?
+- ☐ L'utilisateur cherche-t-il déjà des solutions ?
+- ☐ Combien l'utilisateur est-il prêt à payer pour résoudre ce problème ?
+
+**3. Différenciation de la solution**
+- ☐ Par rapport aux solutions existantes, quel est votre avantage ?
+- ☐ Cet avantage est-il suffisant pour que les utilisateurs changent ?
+- ☐ Est-il difficile pour les grandes plateformes de copier vos fonctionnalités ?
+- ☐ Votre différenciation suffit-elle à justifier le paiement des utilisateurs ?
+
+**4. Faisabilité du modèle économique**
+- ☐ Les utilisateurs paieront-ils ? Combien ? (il faut tester réellement)
+- ☐ Quel est le coût d'acquisition approximatif ?
+- ☐ La valeur vie du client (LTV) peut-elle couvrir le coût d'acquisition (CAC) ?
+- ☐ Y a-t-il d'autres modes de monétisation ? (publicité, services premium, B2B, etc.)
+
+**5. Plan de validation rapide**
+- ☐ Pouvez-vous créer un prototype testable avec un coût minimal (1-2 semaines) ?
+- ☐ Pouvez-vous trouver 10 utilisateurs cibles pour des entretiens ?
+- ☐ Pouvez-vous concevoir une expérience pour valider l'hypothèse clé ?
+- ☐ Pouvez-vous demander un acompte pour valider la volonté de payer ?
+
+:::
+
+<strong>Ne demandez pas "Utiliseriez-vous ce produit ?"</strong> Ce type de question n'obtient que des réponses faussement positives.
+
+<strong>Demandez :</strong>
+- "Comment résolvez-vous ce problème actuellement ?" (comprendre le comportement réel)
+- "Au cours de la semaine dernière, combien de fois ce problème vous a-t-il gêné ?" (comprendre la fréquence)
+- "S'il existait une solution, mais qu'elle nécessitait de changer vos habitudes, seriez-vous prêt ?" (comprendre le coût du changement)
+- "Si cela coûtait XX yuans, l'achèteriez-vous ?" (comprendre la volonté de payer)
+
+**La meilleure validation :** Demander un acompte. Beaucoup de gens disent qu'ils paieront, mais seuls ceux qui paient vraiment sont vos utilisateurs cibles.
+
+**Indicateurs clés :**
+- Pourcentage d'utilisateurs prêts à payer un acompte > 10 % : besoin réel, vaut l'investissement
+- Pourcentage d'utilisateurs prêts à payer un acompte 5-10 % : le besoin existe, mais doit être affiné
+- Pourcentage d'utilisateurs prêts à payer un acompte &lt; 5 % : le besoin n'est pas valide, ou le concept a un problème
+
+---
+
+## Résumé du chapitre
+
+Dans ce chapitre, à travers l'histoire de Xiaoming, nous avons appris à examiner les idées produit avec le regard d'un chef de produit -- <strong>le centre de tout est toujours : les utilisateurs paieront-ils pour cela ?</strong>
+
+::: info Points clés
+
+**1. Les trois critères d'un vrai besoin :**
+- Les utilisateurs sont prêts à payer (critère le plus important)
+- Les utilisateurs sont prêts à changer de comportement
+- Sans solution, les utilisateurs subissent une perte importante
+
+**2. Le chemin d'une idée ordinaire à un produit payant :**
+- <strong>Segmentation horizontale :</strong> Trouver un groupe spécifique, plus le segment est étroit, plus la volonté de payer est forte
+- <strong>Approfondissement vertical :</strong> Comprendre le scénario complet, résoudre les émotions et pas seulement les fonctionnalités
+- <strong>Reconstruction de la valeur :</strong> Passer d'un outil à une solution, établir une raison de payer
+
+**3. Éviter les pièges des faux besoins :**
+- Résoudre de faux points de douleur (points de démangeaison au lieu de points de douleur)
+- Marché trop petit pour soutenir un modèle économique
+- Solution plus complexe que le problème
+
+**4. Méthodes de validation de la volonté de payer :**
+- Trouver 10 utilisateurs cibles pour des entretiens approfondis
+- Demander un acompte pour valider la véritable intention
+- Le pourcentage d'utilisateurs prêts à payer un acompte > 10 % justifie l'investissement
+
+**5. Affiner le concept de produit par conversation avec l'IA :**
+- Itérer sur plusieurs tours, optimiser continuellement
+- Se concentrer sur l'exécution, aboutir à un plan d'action
+- Fixer des indicateurs de validation, ajuster à temps
+
+:::
+
+**À retenir :** Un bon chef de produit ne crée pas des besoins à partir de rien, il découvre les vrais besoins <strong>ignorés, sous-estimés ou mal satisfaits</strong>, et trouve un moyen de faire en sorte que les utilisateurs soient prêts à payer pour cela.
+
+Dans le prochain chapitre, nous prendrons une idée validée et apprendrons à utiliser un AI IDE pour la transformer en un prototype de produit interactif.
diff --git a/docs/fr-fr/stage-1/integrating-ai-capabilities/images b/docs/fr-fr/stage-1/integrating-ai-capabilities/images
new file mode 120000
index 0000000..45a0b54
--- /dev/null
+++ b/docs/fr-fr/stage-1/integrating-ai-capabilities/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/integrating-ai-capabilities/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/integrating-ai-capabilities/index.md b/docs/fr-fr/stage-1/integrating-ai-capabilities/index.md
new file mode 100644
index 0000000..522440d
--- /dev/null
+++ b/docs/fr-fr/stage-1/integrating-ai-capabilities/index.md
@@ -0,0 +1,808 @@
+---
+title: 'Ajouter des capacités IA à votre prototype - Intégrer les API de texte et d''image'
+description: 'Intégrez de véritables capacités IA dans un prototype Web existant : comprenez les concepts clés des API, apprenez à trouver votre API Key et les exemples officiels ; pratiquez l''intégration du modèle de texte DeepSeek et de plusieurs services de génération d''images (SiliconFlow Qwen-Image, Recraft, Seedream), et maîtrisez les méthodes courantes de sélection de modèles.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'environ <strong>1 jour</strong>'
+const relatedArticles =
+  relatedArticlesMap['fr-fr/stage-1/integrating-ai-capabilities'] ?? []
+</script>
+
+# Module 4 : Injecter des capacités IA dans votre prototype
+
+## Introduction au chapitre
+
+<ChapterIntroduction :duration="duration" :tags="['API', 'Modèle de texte', 'Texte vers image', 'Intégration de prototype']" coreOutput="Prototype connecté à 1 modèle de texte + 1 modèle d'image (optionnel)" expectedOutput="Prototype IA capable d'appeler de vraies API">
+
+Dans les chapitres précédents, nous avons terminé le processus complet, de <strong>trouver une bonne idée</strong> à <strong>créer un prototype de produit</strong>. Mais le prototype actuel n'est qu'une « coquille » -- cliquer sur un bouton ne génère pas vraiment de contenu, et les données de la page sont figées.
+
+Vous rappelez-vous ce que nous avons souligné dans le premier chapitre ? <strong>Nous voulons créer « un produit que les gens paient », pas « un prototype qui a l'air correct ».</strong> La véritable valeur vient de la capacité du produit à <strong>résoudre de vrais problèmes</strong>, et pour cela, le prototype doit <strong>réellement fonctionner</strong>.
+
+Ce chapitre va <strong>« donner vie » au prototype</strong> : nous allons intégrer de <strong>véritables capacités IA</strong>, de l'obtention d'une API Key à la lecture de la documentation officielle, en passant par la demande à l'AI IDE d'intégrer les API dans votre code. Vous prendrez le <strong>modèle de texte DeepSeek</strong> comme exemple pour apprendre à faire en sorte que votre application <strong>appelle réellement un grand modèle pour générer du contenu</strong> ; si vous êtes intéressé, vous pouvez aussi <strong>intégrer la génération d'images en option</strong>.
+
+À la fin de ce chapitre, votre prototype ne sera <strong>plus une démonstration statique</strong>, mais <strong>une application capable d'appeler de vraies capacités IA et de résoudre de vrais problèmes</strong>.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
+      { title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
+      { title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 1. Concepts de base des API
+
+Comme mentionné précédemment, notre objectif est « d'intégrer les capacités IA », pour que le prototype ne soit plus une démonstration statique, mais un outil capable d'appeler de vrais services IA. Pour réaliser cela, la clé est de comprendre et d'utiliser les API (Application Programming Interface).
+
+L'API est un concept d'abstraction important en informatique, que l'on peut comprendre simplement comme : **vous envoyez une « question » dans le format requis, et l'autre partie vous renvoie un « résultat » dans le même format**.
+
+- **Ce que vous envoyez** : généralement inclut la « clé (API Key) » et « ce que vous voulez générer »
+- **Ce que vous recevez en retour** : en cas de succès, le résultat ; en cas d'échec, la raison (par exemple « clé incorrecte », « solde insuffisant », « paramètre erroné »)
+
+Concrètement, vous devez maîtriser les éléments clés suivants :
+
+1. **API Key** : votre « passe », aussi votre « clé de portefeuille ». Si quelqu'un d'autre l'obtient, il peut utiliser l'API en votre nom et engendrer des frais.
+2. **Endpoint (chemin de l'interface)** : le chemin spécifique de la requête API, indiquant au serveur quelle fonctionnalité vous souhaitez accéder. L'adresse complète se compose généralement du « URL de base + chemin de l'endpoint ». Par exemple :
+   - Génération de texte : URL de base (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = URL complète `https://api.service.com/v1/chat/completions`
+   - Génération d'images : URL de base (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = URL complète `https://api.service.com/v1/images/generations`
+3. **Appel/Requête** : le processus d'envoi d'une tâche au service IA et d'obtention du résultat
+4. **Contenu de la requête** : ce que vous envoyez à l'IA, comme le sujet de l'article que vous voulez générer ou la description de l'image
+5. **Réponse** : ce que l'IA vous renvoie après traitement, comme l'article généré ou l'image
+6. **Gestion des erreurs** : savoir comment diagnostiquer et résoudre les problèmes (API Key incorrecte, requêtes trop fréquentes, etc.)
+
+::: info ℹ️ Qu'est-ce qu'une API
+Pour une explication plus approfondie des API, consultez l'annexe : [Introduction aux API](/fr-fr/appendix/4-server-and-backend/api-intro).
+
+::: warning 🔐 **Consignes de sécurité des API**
+L'API Key est votre « passe » pour accéder aux services IA. C'est une chaîne de caractères de type mot de passe, utilisée pour l'authentification et la facturation.
+
+Puisque l'API Key est directement liée à votre compte et à vos frais, veillez à :
+
+- Ne <strong>jamais la partager</strong> dans des chats, des captures d'écran publiées en ligne ou des forums publics
+- <strong>Ne pas la coder en dur</strong> dans le code et la committer dans un dépôt Git (surtout un dépôt public)
+- Si vous soupçonnez que la Key a été compromise, <strong>changez-la immédiatement</strong>
+
+Dans ce qui suit, nous <strong>allons directement coller l'API KEY dans l'AI IDE pour les opérations</strong>. <strong>Ne faites pas ça dans un vrai projet !!</strong> Comme nous sommes en phase d'apprentissage, c'est acceptable. (Quand vous serez plus expérimenté, vous pourrez demander à l'IA de générer un fichier de configuration dans lequel vous placerez simplement l'API KEY)
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
+      { title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
+      { title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 2. Intégrer l'API de génération de texte : DeepSeek
+
+Bien que les API impliquent des concepts techniques, la phase de développement de prototype peut être très simple et efficace. L'idée centrale est :
+
+> **Trouver l'exemple officiel, obtenir l'API Key, demander à l'AI IDE de l'intégrer à votre bouton.**
+
+Une fois ces concepts maîtrisés, vous découvrirez que le processus est le même pour l'intégration de modèles de texte ou d'images : quand l'utilisateur clique sur un bouton, le frontend organise l'entrée et envoie la requête ; quand l'interface renvoie le résultat, il l'affiche sur la page. Voyons cela en pratique.
+
+Dans la section 1.2, vous avez déjà créé un prototype interactif. Ce que nous allons faire maintenant, c'est transformer les « fonctionnalités qui ressemblent à de l'IA » en véritables capacités : <strong>quand l'utilisateur clique sur un bouton, le prototype envoie une requête à un service IA externe et affiche le texte renvoyé.</strong>
+
+::: info ℹ️ Pour aller plus loin sur les principes
+Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux grands modèles de langage (LLM)](/fr-fr/appendix/8-artificial-intelligence/llm-principles).
+::: details Pour en savoir plus : Qu'est-ce que DeepSeek ?
+
+**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, commercialisée sous le nom de DeepSeek, est une <strong>entreprise chinoise d'intelligence artificielle (IA) qui développe des grands modèles de langage (LLM)</strong>. DeepSeek est basée à Hangzhou, dans la province du Zhejiang, et est détenue et financée par le fonds quantitatif chinois High-Flyer. DeepSeek a été fondée en juillet 2023 par Liang Wenfeng, cofondateur de High-Flyer, qui est également PDG des deux entreprises. L'entreprise a lancé son chatbot éponyme et son modèle DeepSeek-R1 en janvier 2025.
+
+Regardons les performances de DeepSeek dans le classement GPQA par rapport à d'autres modèles de premier plan. Il est à noter que DeepSeek est un modèle open source (tout le monde peut télécharger le modèle depuis Internet), alors que d'autres modèles courants comme Grok, Google Gemini et ChatGPT sont propriétaires. Comme on peut le voir, DeepSeek s'est considérablement rapproché des modèles de premier rang.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
+
+GPQA signifie « Graduate-Level Google-Proof Question Answering benchmark », un benchmark de niveau graduate pour les tâches de Q&R scientifiques.
+
+GPQA contient 448 questions à choix multiples couvrant les sous-domaines de la biologie, de la physique et de la chimie, tels que la mécanique quantique, la chimie organique, la biologie moléculaire, etc. Ces questions ont été rédigées par 61 experts titulaires d'un doctorat ou en cours de doctorat, et ont fait l'objet d'un processus de validation rigoureux.
+:::
+
+Suivez ces 3 étapes pour réaliser une intégration rapide de l'API de génération de texte :
+
+1. **Créer une API Key sur la plateforme DeepSeek**
+2. **Trouver un exemple de génération de texte dans la documentation DeepSeek** (il y a généralement du code prêt à copier)
+3. **Ouvrir l'AI IDE, coller l'API Key + l'exemple officiel**, et dire à l'IA ce que vous voulez accomplir :
+   > Aide-moi à intégrer l'API de ce grand modèle de langage pour prendre en charge la fonction de génération de textes publicitaires de cette application
+
+Ensuite, nous allons faire une démonstration que vous pouvez suivre. Tout d'abord, inscrivez-vous sur [DeepSeek](https://platform.deepseek.com/usage) et créez une API Key, puis rechargez un petit montant pour vérifier.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
+
+Cliquez sur « API KEYS » et trouvez « create new API key » en bas de l'écran. Vous obtiendrez finalement une clé API comme sk-8573341c39fc44315aadc071c53rh7d2.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
+
+Une fois que vous avez la clé, vous avez l'autorisation d'appeler le modèle.
+
+À ce stade, vous pouvez directement lire la documentation [API](https://api-docs.deepseek.com/), qui fournit généralement des exemples d'appel en curl ou Python.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
+
+Après avoir trouvé l'exemple, vous pouvez copier tout le contenu de la documentation et votre clé dans la boîte de dialogue de l'AI IDE, et lui demander de vous aider à intégrer le grand modèle de langage dans le prototype déjà développé.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
+
+Référence de prompt à utiliser :
+
+```
+En te référant à cette méthode d'appel, aide-moi à prendre en charge la fonction de génération de textes publicitaires, qui peut générer des textes publicitaires pour le commerce électronique de Douyin en plusieurs styles sur la base des informations produit.
+
+Matériel de référence :
+clé API : sk-8573341c39aefa1efe
+Référence de requête API :
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+Après un certain temps de génération de code par l'IA, nous pouvons facilement obtenir le bouton de génération de texte publicitaire correspondant pour le tester. Si vous ne trouvez pas l'entrée, vous pouvez demander à l'AI IDE de vous indiquer depuis quelle page vous pouvez accéder à cette page. Si vous ne trouvez vraiment pas, vous pouvez demander à l'AI IDE de reconstruire et d'améliorer directement votre idée.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
+
+Bien sûr, vous pourriez vous demander : comment savoir si le grand modèle a vraiment été appelé et qu'il ne s'agit pas simplement d'une réponse figée intégrée ? Vous pouvez saisir du texte personnalisé et demander au modèle de générer le texte publicitaire correspondant en fonction de votre demande personnalisée.
+
+Si vous constatez que les résultats sont différents à chaque fois et logiques, vous pouvez être sûr que l'API est appelée normalement. Vous pouvez aussi vérifier sur la [plateforme de gestion d'utilisation de l'API](https://platform.deepseek.com/usage) si l'appel a réussi (bien qu'il puisse falloir attendre quelques minutes pour voir les résultats).
+
+## Autres modèles de génération de texte
+
+En plus de DeepSeek, vous pouvez aussi essayer d'autres grands modèles de langage. Comme la plupart des modèles fournissent une **interface compatible OpenAI**, le changement est très simple -- il suffit de modifier l'API Key, l'URL de base et le nom du modèle.
+
+### Intégration MiniMax
+
+::: details Pour en savoir plus : Qu'est-ce que MiniMax ?
+
+**MiniMax** est une entreprise chinoise d'intelligence artificielle dédiée à la recherche et au développement de technologies d'intelligence artificielle générale. MiniMax a lancé sa série de modèles de langage MiniMax-M2.7, qui affiche d'excellentes performances dans de nombreux benchmarks, avec un rapport qualité-prix exceptionnel.
+
+**Principales caractéristiques de la série MiniMax-M2.7 :**
+
+- **Contexte ultra-long** : prend en charge une fenêtre de contexte de 204 800 tokens, adaptée au traitement de documents longs et de dialogues multi-tours
+- **Rapport qualité-prix élevé** : prix très compétitif
+- **Interface compatible OpenAI** : peut être appelée directement avec le SDK OpenAI, sans apprentissage supplémentaire
+- **Deux modèles disponibles** :
+  - `MiniMax-M2.7` : modèle phare, adapté aux tâches complexes
+  - `MiniMax-M2.7-highspeed` : version haute vitesse, mêmes performances mais plus rapide
+:::
+
+La méthode d'intégration est identique à DeepSeek, en 3 étapes :
+
+1. Allez sur la [plateforme ouverte MiniMax](https://platform.minimax.io/) et créez un compte et une API Key
+2. Trouvez un exemple d'appel dans la documentation MiniMax
+3. Collez l'API Key + l'exemple dans l'AI IDE
+
+Comme MiniMax fournit une interface compatible OpenAI, vous pouvez directement copier l'exemple curl ci-dessous et votre clé API, et les envoyer à l'AI IDE pour l'intégration :
+
+```bash
+curl https://api.minimax.io/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${MINIMAX_API_KEY}" \
+  -d '{
+        "model": "MiniMax-M2.7",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+::: tip ✅ Conseil
+Le format d'API de MiniMax est presque identique à celui de DeepSeek (tous deux utilisent le format compatible OpenAI), donc si vous avez déjà réussi à intégrer DeepSeek, passer à MiniMax ne nécessite de modifier que trois choses :
+1. **URL de base** : changez en `https://api.minimax.io/v1`
+2. **API Key** : utilisez l'API Key de MiniMax
+3. **Nom du modèle** : changez en `MiniMax-M2.7` ou `MiniMax-M2.7-highspeed`
+
+Pour plus d'informations, consultez la [documentation de l'interface compatible OpenAI de MiniMax](https://platform.minimax.io/docs/api-reference/text-openai-api).
+:::
+
+# 3. Intégrer l'API de conversion image-texte : Qwen3 VL
+
+::: info ℹ️ Pour aller plus loin sur les principes
+Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux modèles de langage visuel (VLM)](/fr-fr/appendix/8-artificial-intelligence/multimodal-models).
+
+::: details Pour en savoir plus : Qu'est-ce que Qwen3 VL ?
+
+**Qwen3 VL** est la dernière version de la série de modèles de langage visuel multimodal développée par l'équipe Tongyi Qianwen d'Alibaba Cloud. VL signifie « Vision-Language », c'est-à-dire un modèle de langage visuel. Il est capable de comprendre le contenu des images et de générer des descriptions textuelles, de répondre à des questions sur les images et d'extraire des informations des images.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
+
+**Principales capacités de Qwen3 VL :**
+
+- **Compréhension d'images** : capable d'identifier les objets, scènes, personnages et textes dans les images
+- **Questions-réponses visuelles** : répondre avec précision aux questions sur les images
+- **Description d'images** : générer des descriptions textuelles détaillées ou concises
+- **Compréhension multi-images** : prendre en charge le traitement simultané de plusieurs images pour une analyse comparative
+- **Extraction de texte** : extraire du contenu textuel des images (capacité OCR)
+
+**Pourquoi choisir Qwen3 VL ?**
+
+Par rapport au modèle de génération précédent, Qwen3 VL a significativement amélioré la précision de la compréhension d'images, prenant en charge des tâches d'analyse d'images plus longues et plus complexes. Il excelle dans la compréhension du chinois, avec un coût d'appel API relativement faible et un excellent rapport qualité-prix. De plus, sa fenêtre de contexte est plus grande, ce qui lui permet de gérer des tâches de raisonnement visuel plus complexes.
+
+**Scénarios d'application typiques :**
+
+- Commerce électronique : génération automatique de titres, descriptions et points forts à partir de photos de produits
+- Création de contenu : génération automatique de textes publicitaires ou de suggestions d'images à partir de visuels
+- Bureau : extraction du contenu d'images, reconnaissance automatique de rapports
+- Éducation : analyse automatique de questions illustrées, extraction de points de connaissance
+
+:::
+
+Dans la partie précédente, nous avons expliqué comment intégrer l'API de génération de texte. Mais pour le scénario de notre application, nous constatons un problème : nous téléchargeons une image, et si nous n'utilisons qu'un modèle de langage, il ne peut pas bien comprendre le contenu de l'image, ce qui peut entraîner des résultats imprécis.
+
+Nous voulons un modèle capable de transformer une image en description textuelle, ce qui nécessite un modèle de langage visuel (VLM). Dans notre cas, nous utiliserons un modèle VLM pour générer des descriptions de points de vente de produits afin d'améliorer l'expérience utilisateur.
+
+Pour plus de simplicité, nous utiliserons l'API fournie par la plateforme cloud [SiliconFlow](https://cloud.siliconflow.cn/me) pour l'intégration de l'API de conversion image-texte.
+
+::: details Pour en savoir plus : Qu'est-ce que SiliconFlow ?
+**SiliconFlow** est une plateforme chinoise bien connue d'agrégation de modèles IA, offrant des services d'API pour de nombreux modèles de langage et de vision grand public et open source.
+
+**Caractéristiques de la plateforme :**
+
+- **Support multi-modèles** : intègre de nombreux modèles IA populaires, notamment DeepSeek, Qwen, Llama et d'autres modèles open source
+- **Optimisation technique** : optimisation d'inférence pour les modèles open source, offrant des services API à faible latence et haute concurrence
+- **Compatibilité d'interface** : fournit des API compatibles avec le format OpenAI pour une intégration facile
+- **Paiement à l'usage** : facturation à l'utilisation
+
+SiliconFlow est relativement mature dans les services d'inférence de modèles open source et constitue un choix courant pour l'utilisation de modèles IA open source chinois.
+:::
+
+Sur la page d'accueil de SiliconFlow, vous pouvez voir qu'il y a beaucoup de modèles disponibles. Trouvez le filtre dans le coin supérieur gauche, cliquez pour l'ouvrir, sélectionnez le tag « vision », et vous verrez plusieurs modèles de conversion image-texte, comme GLM-4.6V de Zhipu ou Qwen3-VL.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
+
+Vous pouvez choisir n'importe lequel pour tester, ici nous prenons `Qwen/Qwen3-VL-8B-Instruct` comme exemple.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
+
+Accédez à la [plateforme SiliconFlow](https://cloud.siliconflow.cn/me/account/ak), cliquez sur « Nouvelle clé API » dans la section des clés API, et créez une nouvelle clé API.
+
+Vous pouvez utiliser directement le code ci-dessous comme référence et l'envoyer à l'AI IDE avec votre clé API générée pour l'intégration fonctionnelle.
+
+::: details Code de référence pour la conversion image-texte
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+```
+
+:::
+
+Dans ce scénario, nous allons directement demander à l'AI IDE de nous aider à implémenter la fonction de génération automatique de texte de points de vente et de mots-clés à partir des images téléchargées, comme suit :
+
+```
+Sur la base de l'API de conversion image-texte ci-dessous, aide-moi à implémenter la fonction de génération automatique de texte de points de vente et de mots-clés à partir des images téléchargées.
+
+<Collez ici le code de référence et la clé>
+```
+
+Résultat final :
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Bases de l\'API', description: 'Comprendre les concepts clés et les règles de sécurité' },
+      { title: 'Intégration texte', description: 'Pratique de génération de texte avec DeepSeek' },
+      { title: 'Intégration image', description: 'Compréhension et génération d\'images VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 4. Intégrer l'API de génération d'images : Seedream Jimeng
+
+Dans les parties précédentes, nous avons principalement traité des tâches liées au texte. Nous allons maintenant essayer d'intégrer la génération d'images, en prenant en charge la génération d'images à partir de descriptions textuelles ou la modification d'images.
+
+::: info ℹ️ Pour aller plus loin sur les principes
+Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction à la génération d'images](/fr-fr/appendix/8-artificial-intelligence/image-generation).
+
+::: details Pour en savoir plus : Qu'est-ce que [Seedream Jimeng](https://seed.bytedance.com/en/seedream4_5) ?
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png)
+
+> Vous connaissez peut-être déjà Nano Banana (développé par Google), mais vous ne devriez pas manquer Seedream. Seedream 4.5 est le nouveau modèle de création d'images de ByteDance. Il intègre la génération et l'édition d'images dans une architecture unifiée, ce qui lui permet de gérer de manière flexible des tâches multimodales complexes comme la génération basée sur la connaissance, le raisonnement complexe et la cohérence de référence. De plus, sa vitesse d'inférence est bien supérieure à celle de la génération précédente, et il peut générer des images haute définition jusqu'à 4K.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png)
+
+**Principales capacités :**
+
+- **Texte vers image** : générer des images à partir de descriptions textuelles, prenant en charge plusieurs styles (réaliste, cartoon, encre, cyberpunk, etc.)
+- **Transfert de style** : convertir une image dans un style artistique spécifié
+- **Variantes d'images** : générer de nouvelles images de style similaire à partir d'une image de référence
+- **Amélioration de la résolution** : augmenter la clarté et les détails des images
+- **Édition d'images** : modifier et retoucher des images existantes via des instructions en langage naturel
+
+**Pourquoi choisir Seedream ?**
+
+- **Accès stable depuis la Chine** : vitesse d'accès rapide et latence faible
+- **Excellents résultats** : performances stables et fiables dans les scénarios de commerce électronique et de création de visuels
+- **Optimisé pour le chinois** : meilleure compréhension des prompts en chinois, adapté aux utilisateurs chinois
+- **Rapidité** : efficacité de génération élevée, temps de réponse court
+- **Qualité stable** : génération d'images haute définition jusqu'à 4K
+
+**Scénarios d'application typiques :**
+
+- Commerce électronique : génération d'images principales, de visuels pour les pages de détails, de posters promotionnels
+- Réseaux sociaux : génération d'avatars, de stickers, d'images d'accompagnement
+- Design : création rapide de concepts, de visuels, d'images d'arrière-plan
+- Marketing : création de publicités, de bannières d'événements, de posters de fêtes
+
+**Complémentarité avec Qwen3 VL :**
+
+Ces deux API peuvent être utilisées en chaîne : d'abord utilisez Qwen3 VL pour analyser l'image de référence et comprendre le contenu visuel, puis utilisez Seedream pour générer une nouvelle image basée sur le prompt dérivé de l'analyse de l'image de référence.
+:::
+
+Beaucoup de « posters IA / images principales IA / images de personnages IA » que vous voyez sur Douyin, Bilibili ou YouTube utilisent essentiellement la technologie présentée ici. Ce que vous devez faire est simple : organiser l'entrée de l'utilisateur en une phrase, envoyer une requête à l'API d'image, puis afficher l'image renvoyée. Le modèle utilisé ici s'appelle un modèle de génération d'images / d'édition d'images.
+
+Nous allons démontrer progressivement comment intégrer l'API Seedream dans votre projet (avec l'aide de l'AI IDE).
+
+[Accédez à la page d'accueil](https://www.volcengine.com/experience/ark?launch=seedream) puis cliquez sur connexion.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png)
+
+Après connexion, trouvez l'option de recharge dans le coin supérieur droit.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png)
+
+La recharge nécessite une vérification d'identité.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png)
+
+Une fois la vérification réussie, vous pouvez [recharger 1 yuan pour tester](https://console.volcengine.com/finance/fund/recharge).
+
+Retournez à la [page initiale](https://www.volcengine.com/experience/ark?launch=seedream) et cliquez sur Accès API.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png)
+
+Créez d'abord une clé API, puis cliquez sur les options de sélection.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png)
+
+Cela vous amènera à l'étape 2. Ici, vous devez confirmer que le service appelé est Seedream 4.5 et copier l'exemple d'appel fourni. (Les captures d'écran ici datent d'une période antérieure, la version du modèle affichée est donc encore la 4.0)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png)
+
+Une fois que vous avez la clé API et l'exemple d'appel, vous pouvez les coller directement dans l'AI IDE pour qu'il génère la démo frontend ou intègre la capacité dans votre prototype existant. Notez que dans l'image, vous pouvez choisir entre le mode texte-vers-image ou la génération d'une image à partir de plusieurs images. Vous devez sélectionner le code de référence en fonction de vos besoins actuels.
+
+::: warning ⚠️ Remarque importante
+L'exemple par défaut est relativement complexe. N'oubliez pas de désactiver **« Ajouter un filigrane »** et **« Réponse en flux continu »** pour éviter de générer un filigrane et de provoquer des échecs de requête.
+:::
+
+Comme nous utilisons ensuite le mode de génération à partir d'images de référence, nous allons d'abord vers la fonctionnalité de génération d'une image à partir de plusieurs images. Le code de référence est le suivant :
+
+```
+curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer xxxxxxx" \
+  -d '{
+    "model": "doubao-seedream-4-5-251128",
+    "prompt": "Remplacer la tenue de l'image 1 par celle de l'image 2",
+    "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
+    "sequential_image_generation": "disabled",
+    "response_format": "url",
+    "size": "2K",
+    "stream": false,
+    "watermark": true
+  }'
+```
+
+Avec le code de référence d'image, nous demandons à l'AI IDE de prendre en charge les tâches d'image courantes dans le commerce électronique :
+
+```
+Sur la base de l'API ci-dessous, aide-moi à implémenter les fonctionnalités courantes du commerce électronique dans ce projet (par exemple, la génération de posters, la génération d'images principales pour Douyin, etc.)
+
+<Collez ici la clé API et le code d'édition d'image>
+```
+
+Résultat de l'implémentation :
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png)
+
+Il est à noter que la génération d'images peut rencontrer des problèmes inhabituels. Il est recommandé de demander à l'AI IDE d'afficher les messages d'erreur complets pour faciliter le copier-coller et la modification (sinon, vous risquez de voir s'afficher « échec de la génération » à répétition sans savoir pourquoi). Par exemple, vous pouvez dire :
+
+```
+N'affiche pas seulement « échec de la génération d'image », affiche systématiquement la raison complète de l'échec, comme une incompatibilité d'image, une erreur de requête, un délai d'attente, etc. !
+```
+
+Parfois, après une modification, la mise à jour n'est pas appliquée à la page web. Si vous constatez que la page continue de générer des erreurs après plusieurs modifications, vous pouvez aussi essayer de dire directement à l'AI IDE : redémarre ce projet.
+
+Dans le contexte du commerce électronique, nous pourrions vouloir que les vêtements téléchargés par l'utilisateur s'habillent automatiquement sur un personnage, ou que des images de vente attrayantes et des posters soient générés automatiquement pour les produits. Ici, le prompt que nous avons essayé consistait à lui faire générer un poster pour le commerce électronique :
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png)
+
+Vous pouvez utiliser l'API texte-vers-image ou image-vers-image pour implémenter différentes fonctionnalités en fonction de vos scénarios métier imaginés.
+
+## Autres services de génération d'images
+
+Voici d'autres options. Il est recommandé de d'abord réussir l'intégration avec Qwen, puis de remplacer par les services suivants en fonction des résultats et des coûts (choisissez en fonction de votre expérience réelle).
+
+### Intégration Recraft
+
+Si votre prototype est plus orienté vers la « production de design » (par exemple, la génération d'illustrations de style de marque, de posters marketing, de ressources vectorielles), Recraft peut être plus adapté. La méthode d'intégration est identique à la section précédente : **obtenir la clé + trouver l'exemple officiel + demander à l'AI IDE d'intégrer l'exemple dans votre bouton/page**.
+
+::: details Pour en savoir plus : Qu'est-ce que Recraft ?
+
+> Recraft est un outil IA pour les designers, illustrateurs et professionnels du marketing -- fondé en 2022 aux États-Unis, basé à Londres. Il aide à générer/itérer des visuels (images, art vectoriel, graphiques 3D), avec des avantages comme une sortie de haute qualité (pour toute taille/longueur de texte), un positionnement précis des éléments et un design cohérent de marque. Approuvé par plus de 3 millions d'utilisateurs dans 200 pays (dont Ogilvy et Netflix), avec plus de 350 millions d'images créées, son équipe vise à en faire un outil indispensable pour les designers, en s'assurant que les créateurs gardent le contrôle de leur flux de travail assisté par IA.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png)
+
+Il faut d'abord trouver l'[entrée API](https://www.recraft.ai/profile/api) pour obtenir une clé API.
+
+Comme il n'y a pas de crédit gratuit ici, nous devons recharger 1 000 crédits nous-mêmes. Ce site accepte Alipay et WeChat Pay, il est donc facile d'obtenir 1 000 crédits (attention : ne rechargez pas plus que nécessaire).
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png)
+
+Ensuite, nous suivons toujours la même méthode : aller dans la documentation officielle pour trouver l'exemple de requête correspondant :
+
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
+
+:::
+
+### Intégration Qwen Image / Qwen Image Edit
+
+Si vous souhaitez utiliser une approche plus simple pour intégrer un service de génération d'images, vous pouvez envisager Qwen Image (Tongyi Wanxiang). L'approche reste la même : considérez-le comme une « API de génération d'images » et connectez-la à votre bouton de prototype.
+
+::: details Pour en savoir plus : Qwen Image / Qwen Image Edit ?
+
+**Qwen Image** (aussi appelé Tongyi Wanxiang) est la série de modèles de génération d'images de l'équipe Tongyi d'Alibaba Cloud, comprenant deux modèles principaux :
+
+**1. Qwen Image -- modèle texte-vers-image (Text-to-Image)**
+
+Génère de nouvelles images à partir de descriptions textuelles. Vous entrez un prompt, le modèle comprend votre intention et génère une image correspondante.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png)
+
+**Principales capacités :**
+
+- **Texte vers image** : générer des images à partir de descriptions textuelles, prenant en charge plusieurs styles (réaliste, cartoon, encre, cyberpunk, etc.)
+- **Transfert de style** : convertir une image dans un style artistique spécifié
+- **Variantes d'images** : générer de nouvelles images de style similaire à partir d'une image de référence
+- **Amélioration de la résolution** : augmenter la clarté et les détails des images
+
+**2. Qwen Image Edit -- modèle image-vers-image (Image-to-Image)**
+
+Modifie et retouche des images existantes via des instructions en langage naturel. Le modèle comprend votre intention de modification et génère le résultat.
+
+**Principales capacités :**
+
+- **Remplacement partiel** : remplacer un objet ou un personnage dans une image (par exemple « changer le fond pour la mer »)
+- **Suppression d'éléments** : retirer les éléments indésirables d'une image
+- **Conversion de style** : ajouter des filtres ou des effets artistiques à une image
+- **Extension d'image** : étendre les bords d'une image et générer du nouveau contenu
+- **Retouche intelligente** : embellissement automatique, ajustement de la lumière et des ombres, correction de défauts
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png)
+
+**Pourquoi choisir la série Qwen Image ?**
+
+- **Optimisé pour le chinois** : meilleure compréhension des prompts en chinois, adapté aux utilisateurs chinois
+- **Coût réduit** : prix plus abordable par rapport aux concurrents internationaux
+- **Rapidité** : efficacité de génération élevée, temps de réponse court
+- **Qualité stable** : performances stables et fiables dans les scénarios de commerce électronique et de création de visuels
+- **Styles variés** : prise en charge de nombreux styles artistiques et effets créatifs
+
+**Scénarios d'application typiques :**
+
+- Commerce électronique : génération d'images principales, de visuels pour les pages de détails, de posters promotionnels
+- Réseaux sociaux : génération d'avatars, de stickers, d'images d'accompagnement
+- Design : création rapide de concepts, de visuels, d'images d'arrière-plan
+- Marketing : création de publicités, de bannières d'événements, de posters de fêtes
+  :::
+
+Consultez le site [SiliconFlow](https://siliconflow.cn/). Sur le côté gauche, il y a une section « Playground » où vous pouvez tester différents modèles sans appel API. En haut de la page, il y a un bouton « Filters » ; cliquez pour filtrer la liste de modèles.
+
+Si vous sélectionnez « Image », vous ne verrez que les modèles de génération d'images actuellement supportés. Dans ce cas, nous utiliserons Qwen/Qwen-Image.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png)
+
+Une fois tout configuré, vous devez vous référer à la documentation correspondante de l'API de génération d'images. Vous pouvez trouver la section « API Reference » sur la page de documentation officielle. Cliquez dessus, puis naviguez vers la [section API de génération d'images](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) et trouvez l'exemple de requête correspondant.
+
+Vous pouvez envoyer l'exemple de requête suivant et votre clé API à l'AI IDE pour intégrer la fonctionnalité de génération d'images.
+
+```bash
+curl --request POST \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
+  --header 'Content-Type: application/json' \
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
+  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
+}
+'
+```
+
+Ici, le modèle peut être Qwen/Qwen-Image ou Qwen/Qwen-Image-Edit-2509.
+
+::: details Code de référence pour l'édition d'images
+
+Copiez le code ci-dessous et la clé, puis envoyez-les ensemble à l'AI IDE :
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+
+prompt: str = "Transformer le ciel en soirée, avec la lune et les étoiles, dans un style onirique"
+negative_prompt: str = "flou, basse qualité, déformé"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+
+:::
+
+# Annexe : Comment trouver « le modèle le plus puissant actuellement »
+
+Le développement des modèles de texte (souvent appelés « grands modèles de langage ») est très rapide, et nous devons toujours nous assurer que nous utilisons l'un des modèles les plus performants. Grâce aux deux sites suivants, vous pouvez facilement voir « quels modèles sont les plus utilisés et les mieux notés actuellement ».
+
+En général, ces sites peuvent être compris comme des **« arènes de modèles »** : ils mettent côte à côte les résultats de deux modèles, et vous votez pour celui que vous préférez. Plus un modèle reçoit de votes, plus il est probablement considéré comme « meilleur ».
+
+De plus, vous pouvez occasionnellement voir des modèles anonymes mystérieux (« Unknown Model ») dans ces arènes. Cela signifie généralement que quelqu'un a discrètement introduit un « modèle de test interne » pour un test en aveugle, et vous pourriez avoir l'opportunité d'expérimenter des capacités plus avancées avant les autres.
+
+## LMArena
+
+Site : <https://lmarena.ai/>
+
+LMArena est plus adapté pour déterminer « quel modèle est préféré par la majorité ». Plus il y a de votes et plus le score est élevé, plus le modèle est probablement fiable dans les scénarios d'utilisation réels.
+
+Une utilisation simple est de :
+
+1. Consulter directement le classement (Leaderboard)
+2. Choisir d'abord une direction (par exemple, conversation générale / programmation / vision)
+3. Choisir parmi les 3 premiers celui que vous pouvez utiliser (accès disponible, prix acceptable, latence acceptable)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png)
+
+## Artificial Analysis
+
+Site : <https://artificialanalysis.ai/>
+
+Artificial Analysis est plus adapté pour comparer « qualité / prix / vitesse » dans un même tableau. Vous pouvez l'utiliser comme tableau de référence pour la sélection de modèles.
+
+L'utilisation courante est de :
+
+1. Trouver la catégorie de modèles qui vous intéresse (texte / génération d'images, etc.)
+2. Consulter les indicateurs de qualité (Quality) + prix (Price) + latence/débit (Latency/Throughput)
+3. Choisir celui qui offre le meilleur rapport qualité-prix pour votre produit
+
+::: tip ✅ Conseil
+Ne vous disputez pas au feeling sur « lequel est le plus puissant ». Une approche plus fiable est de tester 2 à 3 modèles avec les mêmes entrées, puis de combiner les classements et les prix pour prendre une décision.
+:::
+
+## Résumé
+
+Lors de l'intégration de divers services IA, il n'est pas nécessaire de considérer les API comme trop complexes. Si vous maîtrisez les concepts clés suivants, vous pourrez gérer la plupart des scénarios :
+
+**L'essence de l'API est un pont de communication.** Ce qu'elle fait est simple : envoyer votre requête et ramener la réponse du modèle. Vous n'avez pas besoin de savoir ce qui se passe en coulisses, il suffit d'organiser correctement le format de la requête.
+
+**Le SDK est une encapsulation de l'API.** Si l'API est l'interface brute, le SDK est une boîte à outils prête à l'emploi -- il s'occupe des détails fastidieux comme la signature des requêtes, la gestion des erreurs et la validation des paramètres. Dans le développement quotidien, privilégiez le SDK plutôt que l'appel direct à l'API, cela vous évitera bien des tracas.
+
+**Quand vous lisez la documentation, concentrez-vous sur trois choses :** l'adresse du service (endpoint), les identifiants (clé API) et comment remplir les paramètres d'appel. Une fois ces trois points clarifiés, la mise en marche n'est qu'une question de temps.
+
+Le reste du travail sera accompli par l'IDE et les outils de développement modernes. Concentrez-vous sur votre logique métier, laissez le travail d'appel de bas niveau aux SDK et aux chaînes d'outils matures.
+
+# 5. 📚 Devoir : Intégrer votre première capacité IA
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Défi : Intégrer une capacité IA dans votre espace de travail</div>
+  </template>
+
+  <p>
+    En vous référant aux prompts et au contenu de cette leçon, complétez un cycle complet :
+  </p>
+
+  <ul>
+    <li>
+      <strong>Pratique complète en boucle fermée</strong>
+      <ul>
+        <li>Choisissez et intégrez un service IA (LLM / texte-vers-image / image-vers-image) -> Implémentez l'interaction frontend-backend -> Intégrez dans votre prototype</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Partage des résultats</strong>
+      <ul>
+        <li>Capturez d'écran votre page fonctionnelle et partagez-la avec le groupe</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Question de réflexion</strong>
+      <ul>
+        <li>Réservez de l'espace pour le prochain chapitre « Projet complet », réfléchissez à l'avance : comment combiner ces capacités IA pour créer une fonctionnalité intéressante ?</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Prochaine étape
+
+Dans le prochain chapitre, nous allons relier ces capacités IA dispersées et créer un produit complet basé sur un scénario métier réel :
+
+- Connecter les étapes de planification de contenu, de mise en ligne de produits et d'analyse de données en un flux métier complet
+- Intégrer les capacités IA apprises dans ce chapitre (génération de textes publicitaires LLM, texte-vers-image, édition d'images) dans les étapes métier réelles
+- Réaliser un « espace de travail IA commerce électronique » véritablement utilisable, et non une démo isolée
+
+<RelatedArticlesSection
+  title="Articles connexes"
+  description="Parcours d'apprentissage recommandé d'une capacité IA unique à un flux produit complet."
+  :items="relatedArticles"
+/>
diff --git a/docs/fr-fr/stage-1/introduction-to-ai-ide/images b/docs/fr-fr/stage-1/introduction-to-ai-ide/images
new file mode 120000
index 0000000..b279d40
--- /dev/null
+++ b/docs/fr-fr/stage-1/introduction-to-ai-ide/images
@@ -0,0 +1 @@
+../../../../zh-cn/stage-1/introduction-to-ai-ide/images
\ No newline at end of file
diff --git a/docs/fr-fr/stage-1/introduction-to-ai-ide/index.md b/docs/fr-fr/stage-1/introduction-to-ai-ide/index.md
new file mode 100644
index 0000000..f302c2c
--- /dev/null
+++ b/docs/fr-fr/stage-1/introduction-to-ai-ide/index.md
@@ -0,0 +1,1247 @@
+
+# Module 2 : Apprendre les outils de programmation IA
+
+## Introduction au chapitre
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'environ <strong>1 jour</strong>, réalisable en plusieurs sessions'
+const relatedArticles =
+  relatedArticlesMap['fr-fr/stage-1/introduction-to-ai-ide'] ?? []
+</script>
+
+<ChapterIntroduction :duration="duration" :tags="['Configuration de l\'environnement local', 'IDE et AI IDE', 'Techniques de développement efficace']" coreOutput="1 mini-jeu créé de toutes pièces" expectedOutput="Réalisé avec Trae">
+
+Dans le chapitre précédent, nous avons expérimenté la programmation IA sur z.ai, mais la version web a beaucoup de limitations -- <strong>pas de sauvegarde permanente</strong>, <strong>gestion de fichiers difficile</strong>, et <strong>impossibilité de faire des projets complexes</strong>. Ce chapitre vous aide à déplacer votre environnement de développement sur votre propre ordinateur, pour que vous puissiez <strong>réellement créer des choses de manière indépendante</strong>.
+
+Nous allons d'abord comprendre <strong>quelle est la différence entre un IDE et un AI IDE</strong>, et pourquoi ce dernier peut <strong>doubler votre efficacité</strong> ; puis <strong>vous guider pas à pas</strong> pour créer un jeu de serpent avec Trae en local, en parcourant le <strong>processus complet</strong> de l'installation à l'exécution ; enfin, nous partagerons quelques <strong>astuces pratiques</strong> pour communiquer avec l'IA, afin que vous évitiez les détours.
+
+À la fin de ce chapitre, vous <strong>maîtriserez un flux de développement similaire à celui d'un programmeur</strong>.
+
+::: tip 💡 Conseil pour aller plus loin
+Si vous avez déjà des bases en programmation et souhaitez utiliser des outils plus puissants, vous pouvez combiner avec la référence [Outils CLI Coding modernes](../../stage-2/backend/modern-cli/) pour un développement en ligne de commande.
+:::
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Compréhension de l\'environnement', description: 'Comprendre IDE et AI IDE' },
+      { title: 'Pratique locale', description: 'Créer un jeu de serpent avec Trae' },
+      { title: 'Détails des outils', description: 'Se familiariser avec l\'interface de l\'IDE' },
+      { title: 'Techniques de communication', description: 'Communiquer efficacement avec l\'IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. De quel environnement et quels outils a-t-on besoin pour coder
+
+### 1.1 Changement de mentalité : face à un problème, demandez d'abord à l'IA
+
+Avant de présenter les différents environnements et outils, il faut d'abord signaler que vous devez **changer vos habitudes de réflexion**.
+
+Dans l'apprentissage traditionnel de la programmation, si vous devez installer Python, configurer Conda, ou résoudre un échec d'installation npm, vous ouvrez généralement un moteur de recherche, trouvez un tutoriel, puis suivez les étapes une par une. Si une erreur se produit en cours de route, vous devrez peut-être rechercher le message d'erreur et essayer encore et encore.
+
+Faux ! ❌
+
+À l'ère de l'IA, en particulier lors de l'utilisation d'un AI IDE, gardez à l'esprit un principe fondamental : **toute opération peut d'abord être demandée à l'IA, voire lui être confiée directement.**
+
+- **Vous ne savez pas comment installer l'environnement ?** Demandez directement à l'IA dans la barre latérale : « Je veux écrire en Python, aide-moi à vérifier si Python est installé, et si ce n'est pas le cas, aide-moi à l'installer. »
+- **Le réseau est bloqué ?** Si le téléchargement de paquets tourne en boucle ou échoue, envoyez l'erreur à l'IA : « Le téléchargement a échoué, est-ce un problème réseau ? Peux-tu changer pour un miroir national ? »
+- **Vous ne vous souvenez pas des commandes ?** Pas besoin de mémoriser les commandes Git ou Conda, dites simplement à l'IA : « Crée un nouvel environnement virtuel nommé demo. »
+
+### 1.2 Pourquoi a-t-on besoin d'un environnement et d'outils
+
+Passer de « essayer d'écrire quelques lignes de code » à « faire un projet maintenable à long terme », les exigences envers l'environnement et les outils sont complètement différentes.
+
+En théorie, on peut écrire du code avec le bloc-notes du système, mais les problèmes apparaissent vite :
+
+- **Le code est tout en texte noir**, mots-clés, chaînes et commentaires sont mélangés, difficile de distinguer la structure d'un coup d'oeil
+- **Pas d'autocomplétion intelligente**, chaque mot doit être tapé au clavier en entier, une seule lettre fausse et il faut vérifier
+- **Les fichiers s'accumulent et deviennent chaotiques**, avec des dizaines de fichiers entre lesquels il faut naviguer, on ne trouve jamais la ligne à modifier
+- **En cas d'erreur, on ne peut que deviner**, le programme plante sans savoir où est le problème, on doit imprimer des logs ligne par ligne pour tâtonner
+
+C'est pourquoi vous avez besoin d'un IDE (Environnement de Développement Intégré). Il affiche le code en couleur, suggère automatiquement pendant la saisie, organise les fichiers par projet, et permet de suivre les erreurs pas à pas, rendant le développement plus efficace et moins sujet aux erreurs.
+
+## 2. Qu'est-ce qu'un IDE, pourquoi en a-t-on besoin
+
+::: info Conseil de préparation
+Si vous n'êtes pas encore familier avec ce qu'est un IDE et à quoi servent les différents éléments de l'interface, il est recommandé de lire d'abord [Introduction à l'IDE](/fr-fr/appendix/2-development-tools/ide-basics) pour comprendre les concepts de base et les fonctionnalités courantes des IDE.
+:::
+
+À l'époque des premiers pas de la programmation, nous n'avions besoin que de simples éditeurs de texte et de processeurs de langage. Mais avec l'augmentation de la complexité des projets, les développeurs avaient un besoin urgent d'un outil capable de gérer efficacement les fichiers, de supporter la coloration syntaxique et le débogage. C'est ainsi que l'IDE (Environnement de Développement Intégré) est né.
+
+Vous pouvez comprendre l'IDE comme un programme dédié à « éditer, gérer, exécuter et déboguer » le code. Les premiers IDE avaient une apparence très « primitive », fonctionnant presque entièrement au clavier.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)
+
+Interface terminal (Terminal) Source de l'image : https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
+
+Un IDE « historique » bien connu et fonctionnellement mature comme `Vim` est souvent utilisé pour les opérations distantes sur les serveurs.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png)
+
+Pour plus d'efficacité, nous avons besoin d'IDE modernes prenant en charge la souris, incluant généralement :
+
+- **Éditeur de code source** : coloration syntaxique, autocomplétion.
+- **Outils de build et d'exécution** : compilateur/interpréteur intégré.
+- **Débogueur** : débogage par points d'arrêt, inspection de variables.
+
+Les IDE modernes intègrent souvent des outils comme Git. Le plus populaire est **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)** de Microsoft, léger et extensible. Bien qu'il existe des IDE professionnels comme la suite JetBrains, VS Code est le plus convivial pour les débutants.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png)
+
+Le concept central de VS Code est « tout est plugin ». Grâce à son système de plugins, il supporte divers langages : installer le plugin Python en fait un IDE Python, installer le plugin C++ en fait un IDE C++. Sans plugin, ce n'est qu'un éditeur de texte avancé.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png)
+
+On peut même l'utiliser pour éditer des documents Markdown.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png)
+
+En résumé, un IDE est un ensemble d'outils qui aide les développeurs à écrire du code et à exécuter des programmes plus efficacement.
+
+Pour plus de détails, consultez [l'annexe sur les principes de l'IDE virtuel](/fr-fr/appendix/2-development-tools/ide-basics).
+
+## 3. Quelle est la différence entre un AI IDE et un IDE classique
+
+Un IDE classique (comme VS Code original) est essentiellement une « boîte à outils » :
+vous pouvez ouvrir un projet, écrire du code, l'exécuter et le déboguer, installer des plugins, mais à condition que vous sachiez vous-même quoi faire et comment le faire :
+
+- En cas d'erreur, vous lisez vous-même le message et cherchez quelle ligne pose problème ;
+- Pour ajouter une nouvelle page ou interface, vous trouvez vous-même le fichier correspondant et écrivez le code ;
+- Pour configurer l'environnement ou le build, vous consultez vous-même la documentation et suivez les étapes.
+
+Mais dans un AI IDE, vous pouvez utiliser directement un grand modèle de langage pour vous aider à coder et modifier des fichiers :
+
+- Dites simplement « crée une page de connexion », il génère d'abord la structure de code de base ;
+- Donnez-lui le message d'erreur et le code concerné, il analyse d'abord la cause et suggère des corrections ;
+- Après votre confirmation, il crée automatiquement des fichiers, modifie le code en masse, et gère les tâches fastidieuses à travers plusieurs fichiers.
+
+Par exemple, vous pouvez sélectionner un bloc de code et lui demander de « le refactorer » ou « d'ajouter des commentaires » ; ou dans la barre latérale demander « comment ce projet est-il conçu ? », en utilisant `@nom_de_fichier` ou `@tout_le_projet` pour spécifier la portée de référence, et accomplir en une phrase les opérations fastidieuses de création de fichiers, d'écriture de code et d'exécution.
+
+Dans les dernières versions de VS Code, un assistant de grand modèle de langage est déjà intégré. Vous pouvez dialoguer directement avec le modèle pour l'ensemble du dépôt de code, un fichier spécifique, ou même une fonction. Vous pouvez aussi, comme auparavant sur le web avec les outils de génération automatique de code, envoyer vos besoins sous forme de prompt à l'Agent de codage intégré, pour qu'il vous aide automatiquement à implémenter les fonctionnalités souhaitées, créer des fichiers, modifier le code, configurer l'environnement, etc.
+
+Vous pouvez télécharger et installer VS Code, puis cliquer sur l'icône de la barre latérale en haut à droite pour ouvrir la zone de fonctionnalités IA et découvrir ces capacités.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png)
+
+Cependant, VS Code n'est pas l'IDE avec les capacités IA les plus puissantes. Pour les scénarios nécessitant beaucoup d'assistance IA pour le codage, nous préférons souvent des outils « plus intelligents et plus efficaces » -- un bon AI IDE peut considérablement réduire le temps d'écriture de code et de correction de bugs. Ci-dessous, nous présenterons quelques AI IDE populaires actuels. Vous pouvez choisir celui qui vous convient selon vos préférences.
+
+Puisque VS Code est open source (n'importe qui peut télécharger le code source et le compiler lui-même), la grande majorité des AI IDE actuels sont des dérivés de VS Code. Vous n'avez donc pas à craindre d'avoir « beaucoup d'IDE à apprendre » -- **si vous maîtrisez les bases de VS Code**, la transition vers ces AI IDE ne nécessite pas de réapprentissage.
+
+En général, les différences entre les différents AI IDE se concentrent sur quatre aspects : le prix ; les modèles disponibles (certains modèles avancés peuvent être limités dans certaines régions) ; les capacités de l'Agent (niveau d'intelligence et d'exécution lors de l'assistance au codage) ; et la vitesse de fonctionnement et les performances. Vous pouvez faire des essais et choisir celui qui vous convient le mieux.
+
+> Un AI IDE typique offre généralement les capacités clés suivantes :
+>
+> - Génération et complétion de code intelligente : dans un IDE classique, on tape quelques caractères pour compléter un nom de variable ou de fonction ; dans un AI IDE moderne, vous pouvez écrire quelques lignes de pseudo-code ou décrire simplement vos besoins, et l'IDE complète automatiquement la logique entière, voire génère un bloc entier de code selon l'instruction.
+> - Compréhension et questions-réponses sur le code : l'IDE peut comprendre et répondre aux questions sur un bloc de code, un fichier, ou même la structure complète du projet.
+> - Refactorisation et optimisation du code : l'IDE peut réécrire ou optimiser la logique d'un bloc de code selon vos intentions.
+> - Génération automatique de tests : l'IDE peut générer automatiquement du code de test pour différentes fonctions et modules, facilitant des tests ciblés.
+> - Exécution de tâches de type Agent : l'Agent intelligent peut automatiquement générer, empaqueter, installer, exécuter et modifier le code, remplaçant en partie le travail d'un développeur junior dans de nombreuses tâches.
+
+::: details Antigravity
+
+### [Antigravity](https://antigravity.google/)
+
+Antigravity est un nouvel AI IDE publié par Google en novembre 2025 avec Gemini 3, adoptant un mode de développement « Agent-First » (Agent en premier). Contrairement à l'assistance de codage IA traditionnelle, Antigravity fait de l'agent IA un « exécuteur proactif » qui peut directement manipuler l'éditeur, le terminal et le navigateur, assumant davantage de travail « d'exécution », de « planification » et de « vérification ». Le développeur n'a qu'à exprimer son intention de haut niveau, et l'agent décompose automatiquement les tâches, élabore un plan, exécute le code, lance les tests et génère les résultats. Il supporte le basculement entre plusieurs modèles, notamment Gemini 3 Pro, Claude Sonnet 4.5, etc., et est actuellement proposé en préversion publique sur Windows, macOS et Linux.
+:::
+
+::: details Trae
+
+### [Trae](https://www.trae.ai/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png)
+
+Trae est un assistant de programmation IA développé par ByteDance, supportant plus de 100 langages de programmation et intégrable dans les IDE majeurs. Ses fonctionnalités incluent la génération de code en langage naturel, le débogage automatique et la conversion de maquettes en composants React/Vue. Après la mise à jour d'août 2025, Trae a ajouté l'importation intelligente de dépendances, des suggestions de renommage et la gestion de listes de tâches ; le mode SOLO supporte également la génération de code backend et l'édition de documents d'architecture technique.
+:::
+
+::: details Cursor
+
+### [Cursor](https://cursor.com/)
+
+Cursor est un éditeur de code IA développé par Anysphere, basé sur VS Code, optimisé pour les projets à grande échelle et la collaboration multi-fichiers. Il supporte GPT-4o, Claude 3.7 et d'autres modèles ; le mode Claude Max lancé en 2025 peut gérer des projets de plusieurs millions de lignes de code. La version professionnelle a supprimé la limite de requêtes, ce qui la rend très adaptée aux projets d'entreprise complexes.
+
+Actuellement, Cursor est probablement l'un des AI IDE avec interface graphique offrant la meilleure expérience globale, avec une base d'utilisateurs importante et une fréquence d'itération élevée. Son plus grand inconvénient est son prix élevé -- la version professionnelle coûte environ 20 dollars par mois.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png)
+:::
+
+::: details Qoder
+
+### [Qoder](https://qoder.com/)
+
+Qoder est un AI IDE développé par Alibaba, mettant l'accent sur la « collaboration transparente » et les « capacités d'ingénierie de contexte améliorées ». Il supporte le décomposition de tâches en plusieurs étapes via Action Flow et le suivi en temps réel de l'exécution de l'IA ; il supporte également le routage dynamique multi-modèles et la gestion de machines à états pour les tâches, ce qui le rend très adapté à la gouvernance d'architecture et à l'analyse de « rétro-ingénierie » des systèmes hérités dans les projets de taille moyenne à grande.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png)
+:::
+
+::: details CodeBuddy
+
+### [CodeBuddy](https://www.codebuddy.com/)
+
+CodeBuddy est un outil de programmation IA de Tencent Cloud, mettant l'accent sur le support des instructions en chinois et les capacités de conformité entreprise. Il offre des fonctionnalités de complétion de code, de revue de code en masse et de basculement entre plusieurs modèles ; l'Agent Craft peut réaliser la génération de code multi-fichiers et l'intégration d'API. La version entreprise supporte le déploiement en mode privé et a obtenu la certification de sécurité de niveau 3, ce qui la rend adaptée aux secteurs comme la finance et la santé qui ont des exigences élevées en matière de sécurité des données.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png)
+:::
+
+::: details VS Code + Cline
+
+### VS Code + [Cline](https://cline.bot/)
+
+Cline est un plugin Agent de programmation IA pour VS Code (Visual Studio Code), qui permet de changer de modèle de manière flexible en configurant différents endpoints API. Cline supporte l'entrée multimodale, l'extension d'outils MCP et la surveillance des coûts. Toutes les opérations nécessitent la confirmation de l'utilisateur avant exécution. Il est très adapté pour valider rapidement des idées ou pour s'intégrer à un flux de développement existant. Les fonctionnalités de base sont gratuites, et la version entreprise supporte le déploiement de modèles en environnement privé.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png)
+:::
+
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro est un AI IDE d'AWS (Amazon Cloud), profondément intégré à l'écosystème Amazon Bedrock et AWS Cloud Services. Il supporte Claude, Nova et d'autres modèles, et est particulièrement adapté aux scénarios de développement nécessitant une intégration étroite avec les services cloud AWS. Kiro offre des capacités de génération de code intelligente, de tests automatisés et d'intégration transparente avec les ressources AWS (comme Lambda, S3, DynamoDB), offrant un avantage unique pour le développement d'applications cloud natives.
+
+> **Remarque :** Si vous souhaitez utiliser les modèles d'Anthropic Claude, vous devez utiliser Cursor, Kiro ou Antigravity comme IDE. Ces IDE ont un partenariat officiel ou une intégration profonde avec Anthropic, offrant une expérience plus stable et complète des modèles Claude.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Compréhension de l\'environnement', description: 'Comprendre IDE et AI IDE' },
+      { title: 'Pratique locale', description: 'Créer un jeu de serpent avec Trae' },
+      { title: 'Détails des outils', description: 'Se familiariser avec l\'interface de l\'IDE' },
+      { title: 'Techniques de communication', description: 'Communiquer efficacement avec l\'IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. Pratique : Créer un jeu de serpent en local avec un AI IDE
+
+Dans les sections précédentes, nous avons surtout parlé de « concepts » et de « différences ». Dans cette section, nous allons réaliser une pratique complète pour passer des concepts abstraits à des actions concrètes : **créer un dossier vide → l'ouvrir avec l'AI IDE → dans la barre latérale, demander à l'IA de générer un jeu de serpent en React à partir de zéro.** Nous prenons Trae présenté ci-dessus comme exemple, il faut d'abord l'installer et comprendre brièvement ce qu'est Trae.
+
+::: tip 💡 Astuce : une transition fluide du web au local
+Si vous avez déjà développé des projets sur z.ai ou d'autres plateformes web de programmation IA, vous pouvez directement télécharger le code en local, puis l'ouvrir avec un AI IDE pour continuer le développement. Ainsi, vous conservez les résultats précédents tout en bénéficiant des capacités IA plus puissantes de l'IDE local.
+
+Les étapes sont simples :
+1. Sur z.ai ou d'autres plateformes, cliquez sur le bouton de téléchargement pour sauvegarder le projet en local
+2. Après décompression, ouvrez le dossier avec un AI IDE comme Trae/Cursor
+3. Continuez à dialoguer avec l'IA dans la barre latérale pour itérer et améliorer votre projet
+:::
+
+### 4.1 Préparation : Installer et comprendre Trae
+
+#### 4.1.1 Qu'est-ce que Trae
+
+Le nom complet de Trae peut être compris comme « The Real AI Engineer ». C'est un AI IDE adaptatif développé par ByteDance, construit sur la base du populaire VS Code. Si vous êtes déjà habitué à VS Code, l'utilisation de Trae vous semblera très familière et confortable, tant au niveau de la disposition de l'interface que des opérations de base.
+
+L'objectif central de Trae est d'être le « partenaire de programmation intelligent » du développeur. Grâce à l'intégration profonde des capacités IA, il peut gérer automatiquement une grande quantité de travail répétitif, offrant une expérience de développement plus intuitive et plus efficace. Ce n'est pas seulement un « outil de complétion de code », mais plutôt un compagnon qui accompagne l'ensemble du flux de développement, de la création de projet à l'écriture de code, au débogage, aux tests et au déploiement.
+
+#### 4.1.2 Installer Trae
+
+Trae existe en version internationale et en version chinoise. La version internationale nécessite un accès au réseau international mais permet d'utiliser les derniers modèles comme GPT-5. La version chinoise supporte principalement les modèles nationaux les plus récents, comme GLM, Qwen, Kimi, etc.
+
+Téléchargement de la version internationale : https://www.trae.ai/
+Téléchargement de la version chinoise : https://www.trae.cn/
+
+##### Tarification et modes d'utilisation de Trae
+
+::: info 💡 Conseil de choix de version (recommandé CN pour les débutants)
+- **Pour les débutants, la version chinoise (CN, trae.cn) est fortement recommandée**, l'expérience est actuellement meilleure et les fonctionnalités de base sont gratuites, sans besoin d'accès au réseau international
+- Si vous avez besoin de modèles internationaux comme GPT-5 et que votre connexion le permet, choisissez la version internationale
+- Si vous avez déjà des clés API de modèles tiers, vous pouvez les intégrer pour contrôler les coûts de manière flexible
+:::
+
+> 💡 **Actuellement, il est recommandé d'utiliser les modèles gratuits d'OpenRouter pour les tests**
+>
+> Au moment de la rédaction de ce tutoriel (2026-02-12), les modèles de StepFun sont encore disponibles gratuitement en essai. Pour plus de détails, reportez-vous à la section 4.2 ci-dessous sur l'intégration de modèles, en connectant `stepfun/step-3.5-flash:free`.
+
+Concernant les frais et les modes d'utilisation de Trae, plusieurs options sont disponibles :
+
+- **Version chinoise CN (fortement recommandée)** : l'utilisation de base est gratuite, l'expérience globale est actuellement meilleure que la version internationale, très adaptée aux débutants. En raison du grand nombre d'utilisateurs, il peut parfois être nécessaire d'attendre en file.
+- **Version internationale** : l'abonnement coûte environ 3 dollars par mois, permet d'accéder à des modèles internationaux comme GPT-5, mais nécessite un accès au réseau international.
+- **Intégration de modèles tiers** : si vous avez déjà des tokens API de modèles nationaux (comme DeepSeek, Tongyi Qianwen, Kimi, etc.), vous pouvez les intégrer via la fonction de configuration de modèles tiers de Trae. Les grands fournisseurs de services cloud (comme Alibaba Cloud, Tencent Cloud, Baidu Cloud, etc.) proposent généralement des abonnements Coding Plan, qui permettent d'utiliser leurs API de modèles à des prix plus avantageux après achat. Ainsi, vous pouvez choisir librement le modèle que vous préférez tout en contrôlant les coûts.
+
+Il est recommandé aux débutants de commencer par la version chinoise gratuite (téléchargement : https://www.trae.cn/), l'expérience d'utilisation de la version CN étant meilleure et entièrement gratuite. Si vous rencontrez des problèmes de file d'attente ou avez besoin d'un service plus stable, envisagez d'intégrer un modèle tiers et d'acheter le plan Coding Plan du fournisseur cloud correspondant.
+
+#### 4.1.3 Présentation de l'interface de Trae
+
+Visuellement, l'interface de Trae est très similaire à celle de VS Code : le même layout classique à trois colonnes avec l'explorateur de fichiers à gauche, la zone d'édition au centre et le panneau d'extensions à droite.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png)
+
+La barre latérale droite est la fenêtre d'interaction Copilot, aussi appelée fenêtre Agent. Si vous ne la voyez pas, cliquez sur l'icône de la barre latérale en haut à droite de Trae pour l'ouvrir.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png)
+
+Une fois la barre latérale ouverte, vous verrez une option `Builder`, c'est le mode Agent. Pour faire simple, c'est l'équivalent « local » de z.ai, capable d'opérer sur votre environnement local, d'installer des environnements d'exécution, d'ouvrir des pages web, etc.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png)
+
+Après avoir cliqué sur « Builder », vous verrez les modes « Chat » et « Builder with MCP » :
+
+- **Mode Chat** : principalement pour dialoguer avec le code du dossier courant, ou utilisé comme modèle de chat classique. (Vous pouvez ouvrir un dossier via le menu « File » en haut à gauche et effectuer des opérations d'édition dans ce dossier. Dans ce cas, les fichiers créés ou modifiés par le Builder n'affecteront que ce dossier.)
+- **Mode Builder with MCP** : fournit à l'Agent plus d'outils disponibles (par exemple, connecter le modèle de langage à d'autres logiciels, interroger la météo, etc.). Vous pouvez le comprendre simplement : MCP permet au modèle de langage d'appeler plus facilement divers outils externes.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)
+
+Dans la zone inférieure, vous verrez également les options de sélection de modèle, cliquez pour modifier le modèle actuellement utilisé. Dans la version chinoise, vous pouvez choisir des modèles nationaux comme Kimi k2 ou GLM ; si vous utilisez la version internationale de Trae, vous pouvez choisir ChatGPT ou Claude. Cependant, les modèles nationaux progressant très vite, Kimi, Qwen, GLM offrent une expérience comparable à Claude 3.5 ou 3.7 dans de nombreuses tâches, ce qui est largement suffisant pour le développement quotidien. Il n'est pas obligatoire d'utiliser la version internationale ou la version chinoise.
+
+**Il est à noter que nous ne recommandons pas d'utiliser le mode Auto (sélection automatique de modèle). Pour la version internationale, nous recommandons d'utiliser Gemini ou GPT ; pour la version chinoise, nous recommandons d'essayer Kimi k2, Minimax ou GLM.** Les différents modèles ont différents cas d'usage, il n'y a pas de règle absolue sur lequel est le meilleur. Vous pouvez changer de modèle si vous rencontrez des difficultés dans différentes tâches, et trouver par vous-même les meilleurs résultats grâce à plusieurs essais.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png)
+
+Voilà pour la présentation de Trae. Maintenant, reprenons les opérations que nous avons faites sur z.ai et essayons de les reproduire dans Trae.
+
+### 4.2 Première étape : Créer un dossier vide et l'ouvrir avec l'AI IDE
+
+Avant de commencer, préparons un répertoire de travail propre. Pour cet exemple, créez un dossier vide nommé `snake-game-react` en local.
+
+Ensuite, ouvrez l'AI IDE installé, dans l'écran de démarrage choisissez « Ouvrir un dossier » (Open Folder), et importez ce dossier vide comme racine du projet ; vous pouvez aussi glisser-déposer le dossier dans la fenêtre de l'IDE. À ce stade, aucun fichier de code n'apparaît dans l'explorateur de fichiers, indiquant que nous partons d'un projet complètement vierge.
+
+::: details 📚 Optionnel : Intégrer l'API ou le Coding Plan d'un fournisseur cloud
+
+Cette section présente comment intégrer l'API ou le Coding Plan d'un fournisseur cloud pour obtenir des appels de modèle plus stables et plus fréquents. La fin de la section inclut des captures d'écran de l'intégration dans Trae.
+
+**Qu'est-ce qu'un Coding Plan ?**
+
+Le Coding Plan est un abonnement proposé par les grands fournisseurs de services cloud. Après l'achat, vous pouvez utiliser l'API du grand modèle du fournisseur de manière **illimitée ou à haute fréquence** pendant une période donnée. Par rapport à la facturation au token, le Coding Plan ressemble davantage à un « forfait mensuel » -- vous payez un montant fixe et pouvez utiliser sans souci, sans vous soucier de chaque appel facturé.
+
+**Pourquoi acheter un Coding Plan ?**
+
+Vous vous demandez peut-être : puisque l'on peut déjà appeler les modèles via API, pourquoi acheter un Coding Plan ? Les raisons principales sont : **vous pouvez utiliser autant que vous voulez** : le plus grand avantage du Coding Plan est que vous pouvez appeler le modèle à tout moment, fréquemment, sans craindre une explosion des coûts, sans avoir à consulter constamment la facturation.
+
+**Coding Plan nationaux recommandés :**
+
+Voici les options recommandées des Coding Plan des principaux fournisseurs de services cloud nationaux :
+
+- Zhipu AI (BigModel Plan) : https://bigmodel.cn/glm-coding
+- Volcengine (ByteDance Cloud AI Plan) : https://www.volcengine.com/activity/codingplan
+
+> 💡 **Vous pouvez aussi intégrer directement les API des modèles**
+> En plus du Coding Plan, vous pouvez intégrer les API des modèles via Add Model. Vous pouvez vous référer à la méthode d'intégration de l'API gratuite d'OpenRouter StepFun décrite ci-dessous pour connecter l'API dans Trae. Les tests montrent que cela suffit à satisfaire les besoins de programmation de base.
+> Si vous devez recharger, il est recommandé de recharger 10 yuans d'abord pour voir combien de temps cela dure, par exemple avec des modèles très rentables comme DeepSeek.
+
+**Comment intégrer un Coding Plan**
+
+L'intégration d'un Coding Plan est très simple, quelques minutes suffisent :
+
+1. Visitez le site du fournisseur cloud choisi (par exemple Zhipu AI : https://bigmodel.cn/glm-coding, Volcengine : https://www.volcengine.com/activity/codingplan)
+2. Inscrivez-vous et connectez-vous
+3. Trouvez la page « Tarification » ou « Coding Plan »
+4. Choisissez le forfait adapté et effectuez le paiement
+5. Après le paiement, vous recevrez une clé API ou un ID de plan
+
+::: tip 🎯 Recommandation de modèle personnalisé
+
+Lors de l'intégration d'un modèle personnalisé dans Trae, nous **recommandons par défaut la solution OpenRouter**. OpenRouter fournit une API unifiée qui permet d'intégrer facilement plusieurs grands modèles de langage.
+
+**Au 12 février 2026, vous pouvez encore utiliser l'API gratuite de StepFun :**
+
+- **`stepfun/step-3.5-flash:free`** : modèle gratuit fourni par StepFun, utilisable directement dans Trae.
+
+**Autres modèles gratuits :**
+
+- **`openrouter/free`** : une option de modèle qui utilise par défaut une API LLM gratuite, utilisable directement dans la configuration de modèle personnalisé de Trae (il suffit d'entrer l'ID du modèle), sans paiement nécessaire pour expérimenter les fonctionnalités de programmation IA.
+
+Ces options gratuites sont très adaptées aux débutants pour se familiariser avec le flux de travail des AI IDE avant de s'investir dans un environnement de production.
+
+**Optionnel : Intégrer l'API d'un modèle (exemple avec DeepSeek)**
+
+1. Visitez la plateforme DeepSeek : https://platform.deepseek.com/usage
+2. Inscrivez-vous et connectez-vous
+3. Sur la page de recharge, achetez un pack de tokens de 10 yuans
+4. Après la recharge, créez et copiez une clé API sur la page API Keys
+5. Dans Trae, cliquez sur **« Add Model »**, trouvez DeepSeek, sélectionnez le modèle correspondant, entrez la clé API et c'est prêt
+
+Via l'interface suivante, vous pouvez ajouter avec succès (notez qu'après avoir sélectionné les options de modèle, vous devez **absolument faire défiler jusqu'en bas**, il y a un champ « modèle personnalisé » en dessous, cliquez dessus pour pouvoir entrer l'ID du modèle. Vous pouvez alors entrer les IDs de modèle recommandés ci-dessus comme `stepfun/step-3.5-flash:free`, et cliquer sur le lien d'obtention de clé en dessous pour obtenir la clé API correspondante sur le site officiel et l'entrer pour utiliser normalement.)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png)
+:::
+
+### 4.3 Deuxième étape : Dans la barre latérale, demander à l'IA de créer un jeu de serpent en React
+
+Ouvrez la barre latérale de chat IA : généralement en appuyant sur `Ctrl+L` ou en cliquant sur l'icône de chat à droite. Puis tapez un prompt suffisamment clair :
+
+> Crée un jeu de serpent en React avec contrôle au clavier, le serpent grandit et marque des points en mangeant de la nourriture, et affiche « Game Over » quand il heurte un mur ou lui-même, avec la possibilité de recommencer. Lance le projet après l'implémentation. Si l'environnement d'exécution n'est pas installé, installe-le automatiquement.
+
+Dans ce processus, vous devez réaliser que l'IA n'est pas seulement un modèle de chat, elle peut vous aider à opérer sur votre environnement local : créer des fichiers, installer des dépendances, exécuter des commandes de démarrage, etc. Vous pouvez décrire directement en langage naturel l'objectif que vous souhaitez atteindre, et laisser l'IA décider quelles commandes exécuter et comment organiser le code.
+
+Si des erreurs se produisent pendant l'exécution, l'IA les affichera dans la conversation avec des solutions. Vous pouvez continuer à dialoguer pour les ajuster, sans avoir à mémoriser tous les détails des commandes.
+
+::: warning ⚠️ À noter
+Par exemple, comme le montre la capture d'écran ci-dessous, **parfois l'Agent IA peut se mettre en pause pendant l'exécution, car il a besoin que vous saisissiez des informations pour interagir**, comme le nom à créer, ou la confirmation d'une commande par Entrée. Ou cliquer sur une commande pour l'exécuter. En général, il suffit d'appuyer sur Entrée. Si vous n'êtes pas sûr de ce qu'il faut faire à cette étape, vous pouvez faire une capture d'écran de l'interface actuelle et demander au modèle comment procéder.
+:::
+
+Comme le montre la capture d'écran, ici nous devons cliquer sur Run pour confirmer :
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png)
+
+Comme le montre la capture d'écran, ici il suffit de taper y pour confirmer :
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png)
+
+Comme le montre la capture d'écran, ici nous sommes en train de créer un modèle mais nous ne savons pas comment procéder. Nous pouvons faire une capture d'écran de cette partie et interroger le modèle :
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png)
+
+Une autre raison pour laquelle l'Agent IA se met en pause pendant l'exécution est qu'un « service » a été lancé. Notre jeu de serpent est lui-même un « service ». Si vous voyez une URL de commande comme ci-dessous, cela signifie que l'Agent a lancé un service local sur votre ordinateur. Vous pouvez accéder à l'URL correspondante pour voir votre jeu de serpent. Comme le service doit continuer à tourner, il y a une pause ici. Il suffit de cliquer sur le bouton `Skip`.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png)
+
+Pendant ce processus, si vous rencontrez des termes ou du contenu que vous ne comprenez pas, ne vous inquiétez pas. Vous pouvez consulter la section « explication des termes informatiques » dans l'annexe, ou demander directement à l'IA, ou poser une question à temps !
+
+Si vous rencontrez des résultats inattendus pendant le processus, par exemple le serpent ne termine pas le jeu quand il heurte un mur, ou le serpent ne bouge pas après avoir cliqué sur démarrer, il vous suffit de décrire le phénomène à l'Agent de la barre latérale. En cas d'erreur, n'oubliez pas de faire une capture d'écran ou de copier l'erreur vers l'Agent de la barre latérale. Si le problème persiste après plusieurs tentatives, essayez de changer de modèle.
+
+Après un moment, nous obtenons un résultat similaire à z.ai :
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png)
+
+Vous pouvez cliquer sur la coche en bas à droite pour confirmer les modifications de code, ou sur le bouton `Cancel` pour les annuler. Vous pouvez aussi cliquer sur « 2 files need review » pour développer et voir le code modifié.
+
+Il est également important de noter que, comme les modifications de code ne sont pas toujours correctes, vous devez savoir que tous les IDE Agent supportent la réversion de code. Par exemple, si vous avez fait une modification erronée ou que le résultat ne vous satisfait pas, une fois la modification terminée, vous pouvez revenir à la zone de saisie et cliquer sur le bouton Revert pour revenir à l'état précédent la modification. Vous pouvez alors modifier le texte de saisie et relancer une opération :
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png)
+
+### 4.4 Troisième étape (optionnelle) : Demander à l'IA d'expliquer les détails de l'implémentation
+
+Quand le jeu de serpent fonctionne normalement, si vous n'êtes pas familier avec le frontend ou React, vous pouvez continuer dans la même fenêtre de chat et demander à l'IA de vous guider dans le code avec un langage le plus simple possible. Vous n'avez pas besoin de changer d'outil ni de fouiller dans la documentation, il suffit de poser des questions autour du projet actuel.
+
+Une approche pratique est de demander d'abord à l'IA d'expliquer globalement « comment le jeu fonctionne », puis de creuser dans les détails. Par exemple, vous pouvez poser directement la question :
+
+> « Explique-moi de haut en bas, étape par étape, comment ce jeu de serpent fonctionne. Utilise le moins de jargon technique possible. »
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png)
+
+Puis continuez avec des questions sur les points clés en fonction de ses réponses, par exemple :
+
+> « Comment chaque segment du corps du serpent est-il enregistré ? Quelle structure de données est utilisée ? Peux-tu faire une comparaison ? »
+> « Comment tu gères le "bouger à intervalles réguliers" ? C'est quelle partie du code ? »
+> « Quelles opérations sont effectuées quand le serpent mange la nourriture ? Dans quelle partie de la logique est-ce vérifié ? »
+> « La collision avec le mur et la collision avec soi-même, dans quelles parties du code sont-elles vérifiées ? »
+
+Si vous voyez un fichier (comme `SnakeGame.tsx`) mais ne comprenez pas du tout ce qu'il fait, vous pouvez aussi demander à l'IA de l'expliquer par blocs :
+
+> « Explique-moi `SnakeGame.tsx` par blocs fonctionnels : à quoi sert chaque bloc, avec des termes simples. »
+
+Dans cette série de dialogues, vous pouvez traiter chaque mot que vous ne comprenez pas comme un point d'entrée pour approfondir, par exemple :
+
+> « De quoi tu parles quand tu dis "état" ? Peux-tu l'expliquer avec un exemple de la vie quotidienne ? »
+> « À quoi sert le "timer" dont tu parles ? Que se passerait-il si on le retirait ? »
+
+Par cette approche, votre objectif n'est pas de mémoriser tous les concepts d'un coup, mais de comprendre trois choses : quelles sont les données clés de ce jeu (le serpent, la nourriture, le score, l'état du jeu, etc.), à quels moments ces données changent (mouvement, manger de la nourriture, fin du jeu, etc.), et à quel petit bout de code correspond chaque changement. Une fois ces trois points clarifiés, vous comprendrez fondamentalement la logique principale de ce code.
+
+### 4.5 Quatrième étape : Demander à l'IA d'améliorer l'interface
+
+Un point très important pour les débutants : ne dites pas simplement à l'IA « je veux rendre l'interface plus jolie ». Cette formulation est trop vague même pour un designer humain, encore moins pour un modèle -- quel style « joli » ? Quels éléments doivent être ajustés ? Est-ce un problème de mise en page ou de couleurs ? L'IA ne peut déduire tout cela d'une seule phrase. Pour que l'IA produise un résultat proche de vos attentes, vous devez apprendre à décomposer un objectif vague comme « je veux que ce soit joli » en une série de petites exigences concrètes et exécutables.
+
+Par exemple, beaucoup de débutants commencent par dire :
+
+> « Je veux rendre l'interface plus jolie. »
+
+Par exemple, vous pouvez d'abord donner un ensemble de besoins globaux :
+
+> « Améliore l'interface du jeu :
+>
+> - Centre la zone de jeu, ne la colle pas en haut à gauche ;
+> - Utilise une couleur de fond plus claire pour que le serpent et la nourriture soient plus visibles ;
+> - Agrandis le score et place-le dans un endroit bien visible ;
+> - Utilise le bleu comme couleur dominante et améliore le schéma de couleurs global et les boutons. »
+
+Si vous voulez un retour plus clair en « Game Over », vous pouvez ajouter :
+
+> « Quand le jeu est terminé, affiche "Game Over" au centre de l'écran, avec un bouton "Recommencer" en dessous pour réinitialiser le jeu. »
+
+L'IA modifiera directement les composants et les styles React. Après sauvegarde et rafraîchissement du navigateur, vous verrez la nouvelle interface. Si le résultat ne correspond pas encore à ce que vous imaginez, vous pouvez continuer avec des petits ajustements, par exemple :
+
+> « Le score encore un peu plus grand, avec une couleur plus visible. »
+> « La zone de jeu un peu plus compacte, avec un peu d'espace blanc autour. »
+> « Change le bouton recommencer en style bleu arrondi, centré sous le message. »
+
+À ce stade, si une modification provoque une erreur, pas besoin de chercher vous-même. Copiez simplement le message d'erreur dans la fenêtre de chat, ou accompagnez-le d'une brève description comme « c'est l'erreur qui est apparue après avoir amélioré l'interface », et laissez l'IA localiser et réparer dans le contexte du projet actuel. Ainsi, vous pouvez, dans une boucle de « dialogue continu, rafraîchissement continu », transformer un Demo fonctionnel en un petit produit fini avec une interface claire et des interactions fluides.
+
+### 4.6 (Optionnel) Référencer l'architecture de z.ai pour modifier le résultat du jeu de serpent
+
+Pour les débutants en vibe coding, la chose la plus difficile est en fait de ne pas savoir ce qui constitue une « bonne pratique », ni quelle architecture est la plus adaptée ; faute de bases en informatique, il est difficile de bien guider l'IA. La solution à ce problème est de « se référer directement » ; vous vous souvenez que nous avons dit qu'on pouvait voir le code sur z.ai ? En fait, le README (la partie du projet qui présente les fonctionnalités et l'architecture technique) donne déjà une référence d'architecture optimale :
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png)
+
+Nous voulons que le résultat local soit aussi conforme que possible à celui de z.ai. Nous pouvons copier tout le contenu de ce README et le coller dans la barre latérale de Trae, pour qu'il modifie le code local en fonction de l'architecture du README.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png)
+
+Finalement, nous obtenons un style de conception de page très similaire à celui de z.ai :
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Compréhension de l\'environnement', description: 'Comprendre IDE et AI IDE' },
+      { title: 'Pratique locale', description: 'Créer un jeu de serpent avec Trae' },
+      { title: 'Détails des outils', description: 'Se familiariser avec l\'interface de l\'IDE' },
+      { title: 'Techniques de communication', description: 'Communiquer efficacement avec l\'IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 5. À quoi sert chaque bouton de l'interface
+
+Après avoir parcouru le cycle minimal de génération, nous ne sommes pas encore tout à fait familiers avec l'IDE. Pour nous familiariser complètement avec cet outil qui nous accompagnera longtemps, nous allons expliquer en détail chaque élément de l'interface dans cette section. Les interfaces des différents AI IDE varient légèrement, mais la plupart reprennent le [layout de VS Code](https://code.visualstudio.com/docs/getstarted/getting-started).
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp)
+
+Voici le rôle de chaque section :
+
+- **Title Bar (Barre de titre)** : affiche le nom du fichier et les boutons de contrôle de la fenêtre.
+- **Activity Bar (Barre d'activité)** : bascule entre les vues fichiers, recherche, etc.
+- **Side Bar (Barre latérale)** : affiche le contenu spécifique du mode actuel.
+- **Editor Groups (Zone d'édition)** : la zone principale où vous écrivez et modifiez le code.
+- **Breadcrumbs (Fil d'Ariane)** : affiche le chemin du fichier et permet la navigation.
+- **Minimap (Mini-carte)** : aperçu rapide et repérage dans le code.
+- **Panel (Panneau inférieur)** : contient le terminal et la fenêtre de sortie.
+- **Status Bar (Barre d'état)** : affiche l'état actuel de l'environnement.
+
+Pour plus de détails, consultez [l'annexe sur les principes de l'IDE virtuel](/fr-fr/appendix/2-development-tools/ide-basics).
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Compréhension de l\'environnement', description: 'Comprendre IDE et AI IDE' },
+      { title: 'Pratique locale', description: 'Créer un jeu de serpent avec Trae' },
+      { title: 'Détails des outils', description: 'Se familiariser avec l\'interface de l\'IDE' },
+      { title: 'Techniques de communication', description: 'Communiquer efficacement avec l\'IA' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 6. Comment parler efficacement avec l'IA
+
+Avec l'IA de plus en plus puissante, nous pouvons confier à l'IA beaucoup du travail qui revenait autrefois aux programmeurs.
+Mais en pratique, vous découvrirez que pour un même AI IDE, certaines personnes obtiennent en quelques phrases un petit projet fonctionnel, tandis que d'autres discutent longuement sans obtenir le résultat souhaité. La différence ne réside pas dans « qui est plus intelligent », mais dans la façon dont vous parlez à l'IA -- est-ce assez précis et assez structuré ?
+Cette section présente quelques approches de formulation adaptées aux grands débutants, pour vous aider à obtenir plus régulièrement des résultats utilisables de l'IA.
+
+### 6.1 Décrivez clairement vos besoins : d'une « idée vague » à une « description précise »
+
+Beaucoup de débutants ont l'habitude de dire une seule phrase très générale, par exemple :
+
+> « Fais-moi une page web. »
+> « Fais-moi une petite application. »
+
+Dans ce cas, l'IA ne peut que « deviner » ce que vous voulez, et elle vous donnera quelque chose qui a l'air complet mais qui ne correspond souvent pas à ce que vous vouliez vraiment.
+Pour que l'IA comprenne mieux, vous devez décomposer « l'idée dans votre tête » en plusieurs phrases claires :
+
+1. **Dites-lui à quoi ça va servir**
+   Par exemple, ne dites pas simplement « site personnel », mais plutôt :
+   - « Je veux faire une page personnelle d'une seule page, pour l'envoyer aux recruteurs. »
+
+2. **Dites-lui quelles sections vous voulez**
+   Pas besoin de termes techniques, décrivez simplement ce que vous voulez voir sur la page, par exemple :
+   - « La page doit avoir trois parties : en haut le nom et une phrase de présentation, au milieu quelques expériences professionnelles, en bas l'e-mail et le numéro WeChat. »
+
+3. **Dites-lui votre niveau et vos limites**
+   Demandez à l'IA de faire de manière accessible aux débutants, par exemple :
+   - « Je ne sais pas coder du tout, utilise uniquement la méthode la plus simple pour que je puisse copier dans un fichier et l'ouvrir dans le navigateur. »
+
+4. **Dites-lui comment vous voulez recevoir le résultat**
+   Par exemple :
+   - « Donne-moi un code complet que je peux sauvegarder en `index.html` et ouvrir dans le navigateur. »
+
+En combinant tout cela, vous pouvez demander à l'IA ceci :
+
+> « Je ne sais pas coder du tout, je veux faire une page personnelle d'une seule page, pour l'envoyer aux recruteurs.
+> La page doit avoir trois parties : en haut le nom et une phrase de présentation, au milieu quelques expériences professionnelles, en bas l'e-mail et le numéro WeChat.
+
+Quand vous aurez clarifié toutes ces informations, l'IA pourra mieux s'approcher de vos vrais besoins, au lieu de vous donner « quelque chose qui a l'air impressionnant mais que vous ne pouvez pas utiliser ».
+
+### 6.2 Utiliser le bon rythme : d'abord « que ça marche », puis ajouter de la complexité
+
+Pour les grands débutants, le piège le plus courant est de vouloir d'emblée faire quelque chose de « très complet » avec « beaucoup de fonctionnalités ».
+Par exemple :
+
+> « Fais-moi un site comme Taobao. »
+> « Fais-moi un système avec inscription, connexion et commande. »
+
+Le résultat est souvent : l'IA vous donne un gros bloc de code, vous le copiez mais ça ne s'ouvre pas, ou ça affiche des erreurs partout ; vous ne comprenez pas où est le problème, et vous finissez par abandonner.
+
+Une approche plus adaptée est de **contrôler activement le rythme**, de demander à l'IA de procéder étape par étape, au lieu de tout vous jeter d'un coup. Vous pouvez suivre cet ordre :
+
+1. **Première étape : d'abord un « exemple minimal »**
+   Vérifiez seulement une chose : est-ce qu'on peut voir quelque chose dans le navigateur.
+   Par exemple :
+
+   > « Donne-moi d'abord l'exemple le plus simple possible, juste pour voir une ligne "Ceci est ma page d'accueil" dans le navigateur.
+   > Explique-moi ensuite étape par étape : comment nommer le fichier, comment le sauvegarder, comment l'ouvrir. »
+
+2. **Deuxième étape : sur cette base, ajouter progressivement du contenu**
+   Quand vous avez confirmé « oui, je vois bien la ligne de texte », dites :
+
+   > « Sur cette base, ajoute une section "Expériences professionnelles" et donne-moi le code complet mis à jour. Ne m'envoie pas que la partie modifiée. »
+
+3. **Troisième étape : quand la structure est bonne, penser à l'esthétique**
+   Par exemple :
+   > « Maintenant la page affiche correctement le contenu. Améliore un peu le design : centre tout, agrandis le titre, utilise une police agréable. Donne-moi le code complet mis à jour. »
+
+À chaque étape, exécutez d'abord pour vérifier qu'il y a bien un changement, puis demandez à l'IA de continuer. Ainsi, si une étape pose problème, vous pouvez rapidement revenir à la « version précédente qui fonctionnait », sans avoir à tout recommencer de zéro.
+
+### 6.3 Utiliser les captures d'écran et le copier-coller : si vous ne savez pas décrire, « montrez l'écran à l'IA »
+
+La difficulté pour les grands débutants n'est souvent pas de « ne pas savoir modifier le code », mais de **ne pas savoir comment décrire le problème**.
+Par exemple :
+
+- Le navigateur affiche soudainement plein d'erreurs en anglais que vous ne comprenez pas du tout.
+- La mise en page de la page n'est pas ce que vous vouliez, mais vous ne savez pas quels mots utiliser pour la décrire.
+
+Dans ces cas, pas besoin de chercher des termes techniques, le plus simple est de **montrer directement à l'IA ce que vous voyez**.
+
+Vous pouvez procéder ainsi :
+
+1. **Copier le texte d'erreur**
+   Quand vous voyez un message d'erreur rouge, copiez-le directement, puis dites :
+
+   > « Voici le message d'erreur complet après l'exécution. Je ne comprends pas cet anglais, explique-moi d'abord simplement ce que ça veut dire.
+   > Puis dis-moi ce que je dois modifier de la manière la plus simple. »
+
+2. **Montrer une capture d'écran à l'IA**
+   Si vous pensez « cette page ne va pas » mais ne savez pas comment le décrire, vous pouvez :
+   - Prendre une capture d'écran de la page actuelle ;
+   - Copier tout le code que vous utilisez à l'IA ;
+   - Puis expliquer :
+     > « Voici à quoi ressemble la page, et voici mon code complet.
+     > Je voulais une mise en page en trois colonnes, mais ça n'en fait qu'une. Aide-moi à trouver le problème et donne-moi le code corrigé complet. »
+
+   ::: tip 💡 Complément sur la fonctionnalité de capture d'écran
+
+   Il est important de noter que **tous les modèles IA ne supportent pas la « vision d'images »**. Cela concerne deux concepts différents :
+
+   - **Modèles de langage purement textuels (LLM)** : ils ne traitent que du texte et ne peuvent pas identifier le contenu des images. Si vous leur envoyez une capture d'écran, ils refuseront de la traiter ou ne pourront pas comprendre correctement les informations de l'image.
+
+   - **Modèles multimodaux** : capables de traiter simultanément du texte, des images et d'autres types d'entrées, ils peuvent « comprendre » vos captures d'écran et donner des suggestions basées sur le contenu de l'image.
+
+   **Référence des capacités des modèles courants** (exemple avec les modèles disponibles dans Trae) :
+
+   | Modèle | Supporte l'entrée d'images |
+   |------|-----------------|
+   | Série Doubao-Seed | ✅ Oui |
+   | GLM-4.7 / 4.6 | ❌ Non |
+   | MiniMax-M2.7 / M2.5 | ❌ Non |
+   | DeepSeek-V3.1 | ❌ Non |
+   | Kimi-K2.5 | ✅ Oui |
+   | Kimi-K2-0905 | ❌ Non |
+   | Qwen-3-Coder | ❌ Non |
+   | Série Gemini | ✅ Oui |
+   | Série GPT | ✅ Oui |
+
+   **Conseil d'utilisation** : si vous voulez utiliser des captures d'écran pour que l'IA vous aide à résoudre des problèmes d'interface, vérifiez d'abord que le modèle que vous utilisez supporte l'entrée d'images. Si ce n'est pas le cas, vous pouvez décrire le problème en texte ou copier-coller le message d'erreur à l'IA.
+
+   :::
+
+3. **Quand vous aimez une page web et voulez en faire une similaire**
+   Pas besoin de dire « comment s'appelle cette mise en page », directement :
+   - Prenez une capture d'écran ou copiez les titres et paragraphes principaux de la page ;
+   - Puis dites :
+     > « Je veux faire une page avec une structure similaire, pas forcément identique.
+     > Aide-moi avec un code simple pour créer un cadre similaire, puis je remplacerai le texte par le mien. »
+
+En résumé : vous êtes responsable de « montrer à l'IA ce que vous voyez », puis de dire avec les mots les plus simples « comment je veux que ça devienne » ; le reste -- « traduire en code, expliquer les termes, trouver les problèmes » -- laissez l'IA le faire.
+
+### 6.4 Quand le code généré par l'IA ne fonctionne pas : une méthode universelle
+
+En pratique, vous rencontrerez inévitablement cette situation :
+l'IA vous a donné un code très sérieusement, vous l'avez copié fidèlement, mais le résultat est soit une page vide, soit complètement différent de ce qui avait été décrit.
+Cela ne signifie pas que vous « ne pouvez pas apprendre », ni que l'IA s'est complètement trompée, mais qu'il vous manque quelques « allers-retours de confirmation ».
+
+Quand le code « ne fonctionne pas », suivez ce processus fixe pour dialoguer avec l'IA :
+
+1. **Dites d'abord ce que vous avez fait et ce que vous voyez**
+   Évitez de dire juste « ça ne marche pas » ou « ça ne fonctionne pas ». Décrivez ainsi :
+
+   > Après ouverture, la page est complètement vide, le texte d'accueil ne s'affiche pas.
+   > J'ai ouvert la page xxxx, et la partie dont je parlais n'est pas là, ça ne marche pas.
+
+2. **Envoyez votre code complet à l'IA**
+   Souvent, le problème vient du fait qu'une ligne a été oubliée lors de la copie, ou que l'ancien et le nouveau contenu se sont mélangés.
+   Vous pouvez dire :
+
+   > « Voici le code complet de mon fichier actuel.
+   > Compare pour voir s'il manque quelque chose, s'il y a une erreur ou si l'ordre n'est pas bon.
+   > Donne-moi directement le code complet corrigé, n'envoie pas qu'un petit bout. »
+
+3. **Fournissez aussi le message d'erreur**
+   Par exemple une erreur qui apparaît en haut à droite du navigateur, ou du texte rouge en bas. Vous pouvez :
+   - Copier le texte de l'erreur ;
+   - Ou faire une capture d'écran ;
+   - Puis dire :
+     > « Voici le message d'erreur que je vois. Je ne comprends pas du tout, explique-moi d'abord simplement ce que c'est, puis dis-moi quelles sont les lignes à modifier en priorité. »
+
+4. **Demandez le mode « débutant » étape par étape**
+   Vous pouvez directement expliquer votre situation pour qu'il ne saute pas d'étapes :
+
+   > « Je ne sais pas coder du tout, explique-moi étape par étape :
+   > Étape 1 : quelle ligne modifier,
+   > Étape 2 : comment sauvegarder,
+   > Étape 3 : comment rouvrir ou rafraîchir la page.
+   > Chaque étape doit être écrite avec des phrases complètes. »
+
+5. **Enfin, demandez-lui de faire une comparaison « ce que vous devriez voir »**
+   Par exemple :
+   > Dis-moi d'abord, avec le code corrigé, que devrais-je normalement voir quand j'ouvre la page.
+
+Tant que vous suivez ce processus pour interagir avec l'IA, la plupart des situations de « code qui ne fonctionne pas » pourront être résolues en quelques allers-retours.
+Parallèlement, vous vous familiariserez progressivement avec les types de problèmes courants, et vous pourrez les résoudre directement la prochaine fois.
+
+## 7. Résumé et prochaines étapes
+
+Dans ce chapitre, vous avez accompli une évolution : de « jouer à un jeu de serpent généré par l'IA dans le navigateur » à « créer vous-même un petit jeu en local avec un AI IDE ». Vous avez compris trois choses : pourquoi on ne peut pas se passer d'un IDE comme VS Code ; comment l'ajout de l'IA (Trae, Cursor, etc.) transforme l'IDE d'une simple boîte à outils en un « stagiaire » qui comprend le langage naturel, crée des fichiers, installe des environnements et modifie le code ; et à quoi sert chaque zone de l'interface (fichiers à gauche, terminal en bas, éditeur au centre, panneau IA à droite).
+
+Plus important encore, vous avez accompli un cycle complet : créer un dossier vide en local → l'ouvrir avec l'AI IDE → décrire vos besoins dans la barre latérale → demander à l'IA de générer le projet et de lancer le serveur de développement → en cas de problème, envoyer « le symptôme + tout le code + la capture d'écran d'erreur » à l'IA pour qu'elle corrige en mode « débutant ». Dans ce processus, vous avez aussi pratiqué comment écrire des prompts plus efficaces : clarifier l'objectif, la structure du contenu et votre niveau, contrôler le rythme, passer de « d'abord que ça marche » à « puis que ce soit joli et amusant ».
+
+Le chapitre suivant va déplacer le focus de « savoir utiliser les outils » vers « créer un prototype que les gens veulent vraiment utiliser » : en partant de la perspective utilisateur, concevoir les règles, les interactions et les retours, puis demander à l'IA de transformer ces idées en un prototype de produit.
+
+## 8. 📚 Devoir : Créer un jeu plus complexe avec un AI IDE local
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Défi : Créez votre jeu personnel</div>
+  </template>
+
+  <p>
+    Vous avez déjà créé un jeu de serpent avec un AI IDE local. Maintenant, relevez un défi avec un jeu plus complexe, en parcourant le cycle complet « décrire les besoins → générer le projet → exécuter en local → déboguer et itérer ».
+  </p>
+
+  <ol>
+    <li>
+      <strong>Choisir un jeu plus complexe que le serpent</strong>
+      <ul>
+        <li>Vous pouvez choisir « Tétris », « Jeu du mole », « Démineur », « 2048 », « Bataille aérienne », etc.</li>
+        <li>Ou un jeu original simple de votre invention</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Utiliser obligatoirement un AI IDE local pour tout le processus</strong>
+      <ul>
+        <li>Créer un dossier vide, l'ouvrir avec l'AI IDE</li>
+        <li>Décrire clairement vos besoins de jeu dans la barre latérale</li>
+        <li>Laisser l'IA créer les fichiers, structurer le projet et implémenter la logique principale</li>
+        <li>Lancer le serveur de développement en local et vérifier que le jeu fonctionne</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Avoir une « jouabilité » et des retours de base</strong>
+      <ul>
+        <li>Au minimum trois états : début, en cours, fin</li>
+        <li>Un mode de contrôle clair pour le joueur (clavier ou souris)</li>
+        <li>Un score ou une progression visible à l'écran</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Faire au moins 2 itérations ou plus</strong>
+      <ul>
+        <li>Premier tour : l'IA fait une version « jouable »</li>
+        <li>À partir du deuxième tour : proposer des améliorations concrètes (style, difficulté, optimisation des interactions, etc.)</li>
+      </ul>
+    </li>
+  </ol>
+</el-card>
+
+<RelatedArticlesSection
+  title="Continuer l'apprentissage"
+  description="Il est recommandé de d'abord passer à la pratique des prototypes, puis d'intégrer progressivement les capacités IA."
+  :items="relatedArticles"
+/>
+
+# Annexe
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
+  <div style="font-weight: bold; margin-bottom: 8px;">Navigation de l'annexe</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Voici les ressources complémentaires « à consulter au besoin » : revenez ici quand vous rencontrez un terme que vous ne comprenez pas ou que vous ne trouvez pas l'entrée dans l'interface.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1-map" style="text-decoration: none; color: inherit;"><b>Annexe 1 : Glossaire des termes informatiques courants</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Quand vous rencontrez un terme informatique que vous ne comprenez pas, venez ici pour trouver rapidement sa signification. Il est recommandé de le lire une fois en entier.</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="/fr-fr/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Annexe 2 : Explication de la barre de menus de Visual Studio Code</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Quand vous ne savez pas à quoi sert un élément de l'interface de l'AI IDE, utilisez le contenu ci-dessous pour dialoguer avec l'IA, ou consultez-le directement.</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    Support : utilisez Ctrl/⌘+F pour rechercher des mots-clés ; en cas de nouveau terme, copiez l'erreur et demandez à l'IA de l'expliquer en « mode débutant ».
+  </div>
+</el-card>
+
+# Annexe 1 : Glossaire des termes informatiques courants
+
+<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: bold; margin-bottom: 10px;">Carte des termes : vous rencontrerez ici...</div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;"><b>Interface des outils</b></a><br/>
+      <span style="font-size: 12px; color: #909399">IDE / Terminal / Panneau</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-network" style="text-decoration: none; color: inherit;"><b>Réseau et services</b></a><br/>
+      <span style="font-size: 12px; color: #909399">URL / Port / Local</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;"><b>Frontend / Backend</b></a><br/>
+      <span style="font-size: 12px; color: #909399">API / JSON / Interface</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-code-basic" style="text-decoration: none; color: inherit;"><b>Bases du code</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Variable / Fonction / Composant</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" style="margin-top: 10px;">
+    <el-col :span="6">
+      <a href="#term-debug" style="text-decoration: none; color: inherit;"><b>Débogage</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Bug / Point d'arrêt / Log</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-project" style="text-decoration: none; color: inherit;"><b>Gestion de projet</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Git / Dépôt / Commit</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;"><b>Outils IA</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Agent / Modèle / Key</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-browser" style="text-decoration: none; color: inherit;"><b>Navigateur</b></a><br/>
+      <span style="font-size: 12px; color: #909399">DevTools / Console</span>
+    </el-col>
+  </el-row>
+</el-card>
+
+Cette section n'a pas besoin d'être mémorisée, il est plus important de se faire d'abord une impression mentale.
+
+## <span id="term-tool-ui">[I. Termes liés à « l'interface des outils »](#appendix-1-map)</span>
+
+### 1. IDE, éditeur, terminal
+
+**IDE (Environnement de Développement Intégré)**
+Imaginez l'IDE comme le « bureau du programmeur » :
+
+- D'un côté le bureau pour écrire (l'éditeur),
+- De l'autre les prises et les boutons (exécuter, déboguer),
+- Dans les tiroirs divers petits outils (recherche, gestion de versions).
+  VS Code, Trae, Cursor sont tous des IDE ou des outils basés sur des IDE.
+
+**Éditeur de code (Editor)**
+Plus comme un « bloc-notes avancé », responsable uniquement de :
+
+- Vous permettre de taper du code ;
+- Colorer différemment les éléments (coloration syntaxique) ;
+- Vous proposer de l'autocomplétion.
+  La zone où vous écrivez le code dans l'IDE est l'éditeur.
+
+**Terminal / Ligne de commande (Terminal)**
+Une fenêtre à fond noir et texte blanc, où vous **tapez des commandes** pour demander à l'ordinateur de travailler :
+
+- `npm run dev` signifie « lance le serveur de développement » ;
+- `python main.py` signifie « exécute ce fichier Python ».
+  Imaginez-le comme : « vous envoyez des SMS de commandes à votre ordinateur, et il répond avec du texte. »
+
+### 2. Zones courantes de l'IDE
+
+**Activity Bar (Barre d'activité)**
+La rangée de petites icônes verticales à l'extrême gauche, comme des « onglets de fonctionnalités » :
+
+- Cliquer sur l'icône de fichier → affiche la liste des fichiers à gauche ;
+- Cliquer sur la loupe → le panneau de recherche apparaît ;
+- Cliquer sur l'icône Git → affiche la gestion de versions.
+
+**Side Bar (Barre latérale)**
+La grande zone à droite de la barre d'activité, affichant le contenu du mode actuel :
+
+- Mode fichier : affiche les fichiers et dossiers du projet ;
+- Mode recherche : affiche la liste des résultats de recherche ;
+- Mode gestion de sources : affiche quels fichiers ont été modifiés.
+
+**Editor (Zone d'édition)**
+La plus grande zone au centre, où vous voyez et modifiez le contenu des fichiers ouverts ;
+les onglets (Tab) en haut indiquent « quels fichiers sont actuellement ouverts ».
+
+**Panel (Panneau inférieur)**
+Généralement tout en bas, comprenant plusieurs types :
+
+- Terminal : taper des commandes pour lancer le projet ;
+- Problems : lister les fichiers et lignes avec des erreurs ;
+- Output : informations d'exécution imprimées par certains outils ;
+- Debug Console : sortie lors du débogage.
+
+**Status Bar (Barre d'état)**
+La fine barre tout en bas :
+
+- Affiche le langage du fichier actuel (JS, HTML, Python, etc.) ;
+- Affiche si l'indentation est de « 2 espaces » ou « 4 espaces » ;
+- Affiche s'il y a des erreurs et quelle est la branche Git actuelle.
+  Vous pouvez la considérer comme « un petit bilan de santé de l'environnement d'édition actuel ».
+
+## <span id="term-network">[II. Termes liés à « Web / Réseau / Service »](#appendix-1-map)</span>
+
+### 1. URL, HTTP, port, service local
+
+**URL (adresse web)**
+Ce qui se trouve dans la barre d'adresse du navigateur, par exemple :
+
+- `https://www.trae.cn/`
+- `http://localhost:3000/`
+  C'est comme « l'adresse complète d'une pièce dans le monde de l'Internet ».
+
+**HTTP / HTTPS**
+Ce que vous voyez au début de l'URL : `http://` ou `https://` :
+
+- HTTP : mode de transmission normal ;
+- HTTPS : avec une couche de chiffrement supplémentaire, plus sûr.
+  Vous pouvez retenir pour l'instant : « les adresses web commencent généralement par `http` ou `https` ».
+
+**Port (Port)**
+Imaginez votre ordinateur comme un immeuble, le port est le **numéro de la porte de chaque pièce** :
+
+- `:3000` signifie la pièce numéro 3000 ;
+- Sur le même ordinateur, plusieurs services peuvent tourner simultanément, chacun occupant un port.
+  `http://localhost:3000` signifie « accéder au service qui tourne dans la pièce 3000 de mon propre ordinateur ».
+
+**Local / localhost**
+Désigne votre propre ordinateur.
+
+- `localhost` peut être compris comme « cette machine elle-même ».
+  Quand vous accédez à `http://localhost:3000`, vous communiquez en fait avec un programme qui tourne sur votre propre ordinateur, et non pas avec un serveur distant sur Internet.
+
+**Service (Service / Serveur)**
+Un « service » est un programme qui **tourne en permanence en arrière-plan et est prêt à recevoir vos instructions** :
+
+- Service web : quand le navigateur accède à une adresse, il renvoie le contenu de la page ;
+- Service de jeu : gère les parties, les sauvegardes, le classement, etc.
+  Exécuter `npm run dev` dans le terminal, c'est fondamentalement « lancer un service web en local ».
+
+## <span id="term-frontend-backend">[III. Termes liés à « Frontend / Backend / Données »](#appendix-1-map)</span>
+
+### 1. Frontend, Backend
+
+**Frontend**
+La partie que l'utilisateur **voit et sur laquelle il peut cliquer** :
+
+- Les boutons, textes, images et animations d'une page web ;
+- Les pages écrites avec React / Vue.
+  Responsable de l'affichage de l'interface et de la réponse aux actions de l'utilisateur (clic, saisie, glisser-déposer, etc.).
+
+**Backend**
+La partie que l'utilisateur **ne voit pas**, qui tourne sur le serveur :
+
+- Stocker et lire les données (informations utilisateur, commandes, scores, etc.) ;
+- Exécuter les règles métier (vérification de connexion, vérification des permissions).
+  Vous pouvez comparer le frontend au « magasin et aux vendeurs », et le backend à « l'entrepôt et au système comptable ».
+
+### 2. API, requête, réponse, JSON
+
+**Interface / API**
+Un ensemble de règles convenues entre le frontend et le backend pour « poser des questions et recevoir des réponses ».
+
+- Le frontend dit : « je t'interroge à cette adresse, dans ce format » ;
+- Le backend dit : « je te renvoie le résultat dans ce format ».
+
+**Requête (Request)**
+Une « question » envoyée par le frontend au backend :
+
+- Où aller (l'URL) ;
+- Par quelle méthode (GET, POST, etc.) ;
+- Avec quels paramètres (par exemple l'ID utilisateur).
+
+**Réponse (Response)**
+La « réponse » du backend au frontend :
+
+- Code de statut (200 succès, 404 non trouvé, 500 erreur serveur) ;
+- Les données réelles (généralement en JSON).
+
+**JSON**
+Un format de données qui utilise une **écriture très similaire au code JavaScript**, par exemple :
+
+```json
+{
+  "name": "Alice",
+  "score": 120
+}
+```
+
+On peut le comprendre comme un « carnet de notes clé-valeur version machine », souvent utilisé par le frontend et le backend pour échanger des données.
+
+## <span id="term-code-basic">[IV. Termes liés à « l'écriture de code »](#appendix-1-map)</span>
+
+### 1. Variable, identifiant, état
+
+**Variable (Variable)**
+Une « étiquette collée sur une donnée ».
+
+- Par exemple, on enregistre le score sous le nom `score` ;
+- Ensuite, en utilisant le nom `score`, on peut lire et modifier cette donnée :
+
+```js
+let score = 0
+score = score + 10
+```
+
+**Identifiant (Identifier)**
+Le terme générique pour « tous les noms que vous donnez vous-même » :
+
+- Nom de variable : `score`
+- Nom de fonction : `moveSnake`
+- Nom de composant : `SnakeGame`
+  C'est comme donner des noms aux dossiers « Photos », « Travail », « Factures » pour distinguer différentes « choses » dans le code.
+
+**État (State)**
+L'enregistrement des « situations clés » actuelles du programme :
+
+- Est-ce que le jeu est terminé ;
+- À quelle position est le serpent ;
+- Quel est le score actuel.
+  En React, on comprend généralement : **quand l'état change, l'interface doit se mettre à jour automatiquement**.
+
+### 2. Fonction, composant, module
+
+**Fonction (Function)**
+« Empaqueter » une action répétable sous un nom :
+
+```js
+function sayHello(name) {
+  console.log('Hello, ' + name)
+}
+```
+
+Ensuite, écrire `sayHello('Bob')` revient à exécuter à nouveau les lignes à l'intérieur.
+
+**Composant (Component)**
+Dans le frontend, un « petit morceau d'interface + petite logique réutilisable » :
+
+- Un bouton peut être un composant ;
+- Une barre de navigation en haut peut être un composant ;
+- La zone de jeu entière peut aussi être un composant.
+  Les composants s'assemblent comme des Legos.
+
+**Module (Module)**
+Un « fichier contenant un ensemble de code lié » :
+
+- `snakeLogic.ts` contient spécifiquement le code lié au « mouvement du serpent » ;
+- `score.ts` contient spécifiquement le code de calcul du score.
+  Les modules peuvent s'importer / s'exporter entre eux, comme des outils dans différents tiroirs.
+
+### 3. Syntaxe, langage de programmation, framework
+
+**Syntaxe**
+Les « règles grammaticales » et « habitudes de ponctuation » d'un langage de programmation :
+
+- Les chaînes de caractères doivent être entre guillemets ;
+- Faut-il un point-virgule à la fin de chaque instruction ;
+- Les blocs de code doivent être entre `{}`.
+  Une erreur de syntaxe fait que le compilateur / interpréteur affiche directement une « erreur de syntaxe ».
+
+**Langage de programmation (Programming Language)**
+Un ensemble complet de règles et de vocabulaire pour communiquer avec l'ordinateur, par exemple :
+
+- JavaScript, Python, Java, C++, Go...
+  Les différents langages sont adaptés à des tâches différentes, avec des syntaxes et des écosystèmes d'outils différents.
+
+**Framework (Framework)**
+Une grande base de code et un ensemble de pratiques que d'autres ont « préconstruites » pour vous :
+
+- Frontend : React, Vue (aide à gérer les mises à jour de l'interface, la gestion d'état, etc.) ;
+- Backend : Django, Spring Boot, etc.
+  Vous êtes en quelque sorte en train de « remplir le contenu sur une ossature existante », bien plus facile que de réinventer la roue.
+
+## <span id="term-debug">[V. Termes liés au « débogage / recherche d'erreurs »](#appendix-1-map)</span>
+
+### 1. Bug, message d'erreur, log / console.log
+
+**Bug**
+Quand le programme ne se comporte pas comme prévu, c'est un bug :
+
+- Un bouton devrait apparaître mais n'est pas là ;
+- On devrait ajouter 10 points mais on en ajoute plein ;
+- La page est blanche dès l'ouverture.
+
+**Message d'erreur (Error Message)**
+Le texte « effrayant » en anglais qui s'affiche sur l'écran ou dans le terminal quand le programme plante.
+Bien qu'il soit intimidant, il indique généralement :
+
+- En gros où est l'erreur ;
+- Quel fichier et autour de quelle ligne il faut vérifier.
+  Vous pouvez le copier directement et le donner à l'IA pour qu'elle le traduise et l'analyse.
+
+**Log (Journal)**
+Ce que le programme « dit » pendant son exécution.
+Le plus courant dans le frontend est :
+
+```js
+console.log('Score actuel', score)
+```
+
+Vous pouvez le comprendre comme : **à chaque étape clé, faire un rapport pour confirmer que le programme suit bien le comportement attendu**.
+
+> **Qu'est-ce que console.log ?**
+>
+> - `console` peut être compris comme un « petit tableau noir pour le débogage » ;
+> - `.log` c'est « écrire une ligne sur le petit tableau noir » ;
+> - Dans le navigateur, appuyez sur F12 pour ouvrir le panneau Console des outils de développement, et vous verrez ces sorties.
+
+### 2. Débogage, point d'arrêt, exécution pas à pas, instantané
+
+**Débogage (Debug)**
+Quand le programme a un problème, au lieu de modifier au hasard, on :
+
+- Fait « pause » le programme à une ligne précise (point d'arrêt) ;
+- Regarde la valeur de chaque variable à ce moment ;
+- Avance pas à pas en observant « à partir d'où ça dérape ».
+
+**Point d'arrêt (Breakpoint)**
+Vous pouvez comprendre le point d'arrêt comme « insérer un bouton de pause sur une ligne » :
+
+- Le programme court normalement de haut en bas ;
+- Quand il arrive à la ligne où vous avez inséré le point d'arrêt, il s'arrête temporairement et attend que vous inspectiez.
+
+**Exécution pas à pas (Step)**
+Après l'arrêt au point d'arrêt, vous pouvez choisir :
+
+- Avancer ligne par ligne (step over) ;
+- Entrer dans une fonction pour la détailler (step into).
+  C'est comme regarder un mouvement de danse au ralenti, au lieu de regarder la vidéo en accéléré.
+
+**Instantané (Snapshot) -- compréhension simplifiée**
+Ici, « instantané » peut être compris comme :
+
+> **À un moment donné, prendre une « photo de l'état actuel » pour pouvoir comparer plus tard.**
+> Dans les outils réels, « instantané » peut désigner :
+
+- L'état complet du projet à un instant de commit ;
+- La situation globale de la mémoire / des variables à un moment du débogage.
+  Retenez cette comparaison, elle suffit : **instantané ≈ une photo de l'état à un moment donné**.
+
+## <span id="term-project">[VI. Termes liés à la « gestion de projet »](#appendix-1-map)</span>
+
+### 1. Projet, espace de travail, dossier
+
+**Projet (Project)**
+L'ensemble des éléments placés dans un même dossier pour réaliser une application :
+
+- Les fichiers de code source
+- Les fichiers de configuration
+- Les ressources (images, audio, etc.)
+
+**Espace de travail (Workspace)**
+Le concept utilisé par VS Code / Trae pour décrire « ce qui a été ouvert dans la session actuelle » :
+
+- Ouvrir un dossier → un espace de travail simple ;
+- Parfois, plusieurs dossiers sont regroupés en un espace de travail multi-projets.
+
+### 2. Git, dépôt, commit
+
+**Git (outil de contrôle de version)**
+On peut le comprendre comme une « machine à voyager dans le temps » pour le projet :
+
+- Après chaque série de modifications, vous pouvez « prendre une photo de la version » ;
+- Plus tard, si besoin, vous pouvez revenir à un état historique.
+
+**Dépôt (Repository / Repo)**
+Une fois Git activé, le dossier du projet avec l'historique des versions s'appelle « dépôt ».
+
+**Commit**
+Chaque fois que vous estimez que vos modifications constituent une étape importante, vous pouvez :
+
+- Écrire une description (par exemple : `Add score panel`) ;
+- Empaqueter toutes les modifications actuelles en une version ;
+- Git enregistre l'état à ce moment.
+  Cette action s'appelle « faire un commit ».
+
+## <span id="term-ai-tool">[VII. Termes liés aux « outils de développement IA »](#appendix-1-map)</span>
+
+### 1. AI IDE, Agent, mode SOLO
+
+**AI IDE**
+Un IDE classique avec une couche d'IA supplémentaire capable de « comprendre le langage humain et d'agir » :
+
+- Vous dites « fais un jeu de serpent », il vous aide à structurer le projet et à écrire le code ;
+- Vous lui donnez une capture d'écran d'erreur, il l'explique d'abord puis essaie de réparer ;
+- Il peut modifier plusieurs fichiers en même temps, au lieu de compléter ligne par ligne.
+
+**Agent (Agent intelligent)**
+Vous pouvez imaginer l'Agent comme un **petit ingénieur IA en permanence disponible** :
+
+- Il lit la structure de votre projet ;
+- Il décompose les tâches (d'abord installer les dépendances, puis générer le code, puis lancer le projet) ;
+- S'il y a une erreur pendant l'exécution, il ajuste son plan en fonction du message d'erreur.
+
+**Mode SOLO (exemple de Trae)**
+Signifie :
+
+> Vous n'avez qu'à exprimer clairement « le point d'arrivée »,
+> il planifie « l'itinéraire » lui-même,
+> l'exécute pas à pas en local,
+> et ne vous demande confirmation qu'aux étapes clés.
+
+### 2. Modèle, clé (API Key)
+
+**Modèle (Model, ici spécifiquement grand modèle de langage)**
+Ce terme peut être simplement compris comme « le gros cerveau IA derrière » :
+
+- Comme GPT, Claude, Kimi, GLM, etc. ;
+- Les différents modèles ont des niveaux différents en « compréhension du chinois », « écriture de code » et « raisonnement » ;
+- Dans l'AI IDE, on peut généralement changer de modèle dans un menu déroulant.
+
+**Clé / API Key**
+Vous pouvez comprendre l'API Key comme **un très long « mot de passe avancé + numéro d'identité »**.
+Son seul rôle est :
+
+> Dire au serveur distant : « Je suis tel utilisateur, autorisez-moi à utiliser votre service IA et enregistrez ma consommation. »
+
+Quelques points importants :
+
+- Cette chaîne est généralement une longue série de lettres et chiffres aléatoires ;
+- Ne la publiez jamais dans des endroits publics (dépôt, capture d'écran, chat de groupe), quelqu'un pourrait l'utiliser pour usurper votre compte ;
+- Remplir une API Key dans un outil équivaut à « insérer la clé dans la serrure », après quoi l'outil peut appeler le service IA correspondant pour vous.
+
+## <span id="term-browser">[VIII. Termes liés au « navigateur / Outils de développement »](#appendix-1-map)</span>
+
+**Chrome (Google Chrome)**
+L'un des navigateurs les plus utilisés pour le développement frontend :
+
+- Il ouvre les pages rapidement ;
+- Il intègre des « outils de développement » assez puissants, pratiques pour chercher les problèmes.
+
+**Actualiser (Refresh / Reload)**
+Recharger la page actuelle :
+
+- Après avoir modifié le code frontend, sans outil de rafraîchissement automatique, vous devez actualiser manuellement pour voir les changements.
+
+**Outils de développement (DevTools)**
+Un ensemble de panneaux d'outils dans le navigateur réservés aux développeurs :
+
+- Voir la structure de la page (Elements) ;
+- Voir les styles (Styles) ;
+- Voir les erreurs et les logs (Console) ;
+- Voir les requêtes réseau (Network).
+  Dans Chrome, généralement accessible avec `F12` ou `Ctrl+Shift+I`.
+
+**Console**
+Un onglet des outils de développement, dédié à l'affichage de :
+
+- Vos sorties `console.log(...)` ;
+- Les erreurs survenues pendant l'exécution (texte rouge).
+  Vous pouvez le considérer comme la « boîte de dialogue du programme » :
+- Le programme a quelque chose à dire, il l'écrit ici ;
+- C'est la zone que vous consultez le plus souvent pendant le débogage.
+
+Si vous rencontrez de nouveaux termes par la suite, vous pouvez demander à l'IA de vous aider à compléter votre glossaire personnel en suivant ce modèle :
+
+- D'abord « à quoi ça sert » ;
+- Puis « à quoi on peut le comparer » ;
+- Enfin « un petit exemple très simple ».
+Ainsi, votre « glossaire personnel » deviendra de plus en plus utile, et vous pourrez mieux communiquer avec l'ordinateur.
+---
+title: 'Debutant 2 : Outils de programmation IA'
+description: 'Passer du codage IA sur le web au dev local : comprendre IDE vs AI IDE, construire un jeu du serpent avec Trae et ameliorer la collaboration avec l IA.'
+---
diff --git a/docs/fr-fr/stage-1/learning-map/index.md b/docs/fr-fr/stage-1/learning-map/index.md
new file mode 100644
index 0000000..b79ec3a
--- /dev/null
+++ b/docs/fr-fr/stage-1/learning-map/index.md
@@ -0,0 +1,275 @@
+---
+title: "De l'idée au produit AI - Parcours d'apprentissage Easy-Vibe"
+description: "Parcours d'apprentissage complet de la programmation AI : de zéro au développement full-stack. Maîtrisez le Vibe Coding, Claude Code, Cursor et d'autres outils IDE AI, apprenez la réflexion produit, le développement full-stack et l'intégration de capacités AI."
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['fr-fr/stage-1/learning-map'] ?? []
+</script>
+
+# De l'idée au produit AI
+
+::: info Remerciements spéciaux
+Un grand merci aux étudiants de l'**Université Tsinghua, Campus international de Shenzhen** pour leurs tests, retours et soutien de ce cours ! Vos avis et contributions ont permis d'améliorer ce cours. [👉 Voir la liste complète des contributeurs](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
+:::
+
+Autrefois, créer un logiciel était un processus très exigeant : il fallait connaître la programmation, comprendre les algorithmes et avoir des années d'expérience en projet.
+Aujourd'hui, tout a changé. Si vous avez une idée, l'IA peut écrire le code pour vous.
+
+C'est un changement majeur : **les langages de programmation deviennent des langages naturels**.
+
+L'apparition des grands modèles de langage (LLM) a fait en sorte que le développement n'est plus « l'apanage des experts techniques », mais un outil que tout le monde peut prendre en main. Ce qui était autrefois le plus difficile — « comment écrire du code » — est devenu ce qui est le plus difficile aujourd'hui : « **que voulez-vous créer** ».
+
+> **Qu'est-ce que le Vibe Coding ?**
+> En termes simples, c'est « programmer en parlant ». Le Vibe Coding signifie que vous pouvez réaliser un projet de programmation en vous appuyant uniquement sur des conversations avec l'IA, plutôt que d'écrire du code directement.
+
+Bien sûr, faire en sorte que l'IA écrive du code n'est que la première étape. Pour créer un produit véritablement utilisable, vous rencontrerez d'autres défis :
+- Comment faire en sorte que l'IA écrive un code propre et maintenable ?
+- Comment assembler des fragments de code en une application fonctionnelle ?
+- Comment mettre une application en ligne et la faire utiliser par de vrais utilisateurs ?
+- Comment intégrer des capacités AI comme la génération de texte et la reconnaissance d'images dans votre produit ?
+
+Ce cours vous aidera à trouver des réponses à ces questions.
+
+Que vous soyez étudiant, enseignant, médecin, ouvrier, ou toute personne sans aucune connaissance technique — sans avoir besoin d'apprendre la programmation pendant des années, vous pourrez en deux semaines créer un prototype fonctionnel et démontrable.
+
+| Votre profil | Ce que ce cours peut vous apporter |
+|---------|-------------|
+| Étudiant | Devoirs, concours, création d'entreprise : réalisez vos projets vous-même, sans dépendre de personne |
+| Professionnel | Automatisez les tâches répétitives, améliorez votre efficacité, voire développez un projet parallèle |
+| Chef de produit / Designer | Vos idées ne restent plus sur papier : créez rapidement des démos pour votre patron ou vos clients |
+| Entrepreneur / PME | Validez vos idées à moindre coût, créez un MVP sans dépenser des milliers en sous-traitance |
+| Enseignant / Formateur | Créez des outils pédagogiques, des supports de cours, générez automatiquement des exercices |
+| Médecin / Avocat / Professionnel | Automatisez vos processus métier, créez vos propres outils d'efficacité |
+| Tout le monde | Utilisez l'IA pour résoudre des problèmes concrets du quotidien ou professionnel, rendez l'impossible possible |
+
+À l'ère de l'IA, la capacité d'exécution et les idées sont toujours plus importantes que la technique.
+
+## Parcours de croissance : de « savoir utiliser l'IA » à « savoir créer des produits AI »
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>Débutant</h3>
+    <p class="stage-role">Découvrir la programmation AI</p>
+    <div class="stage-tags">
+      <span>Jeu du serpent</span>
+      <span>Prise en main sans prérequis</span>
+      <span>Première expérience Vibe Coding</span>
+      <span>Génération en quelques minutes</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>Première étape</h3>
+    <p class="stage-role">Chef de produit / Operations</p>
+    <div class="stage-tags">
+      <span>IDE AI (Cursor/Claude)</span>
+      <span>Décomposition des besoins & Prototype</span>
+      <span>Intégration de capacités AI</span>
+      <span>Développement complet d'une démo</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>Deuxième étape</h3>
+    <p class="stage-role">Développeur junior / Développeur indépendant</p>
+    <div class="stage-tags">
+      <span>De Figma au code</span>
+      <span>Base de données Supabase</span>
+      <span>Intégration de paiement Stripe</span>
+      <span>Base de connaissances Dify</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>Troisième étape</h3>
+    <p class="stage-role">Développeur senior / Architecte</p>
+    <div class="stage-tags">
+      <span>Web/Mini-programmes/Multi-plateforme</span>
+      <span>Outils avancés MCP</span>
+      <span>RAG & LangGraph</span>
+      <span>Mentalité d'ingénieur senior</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+À travers ce parcours d'apprentissage complet, vous acquerrez :
+
+- **Compétences en développement Vibe Coding :** Maîtrisez la mentalité du Vibe Coding et les outils de codage AI pour multiplier votre efficacité de développement. Au lieu de mémoriser la syntaxe, apprenez à guider l'IA pour qu'elle génère du code de haute qualité.
+- **Compétences en développement full-stack :** De la conception UI à l'implémentation frontend, de la conception de base de données au développement d'API, du développement local au déploiement cloud, maîtrisez la stack technologique complète des applications Web modernes.
+- **Intégration de capacités AI :** Apprenez à appeler diverses API AI multimodales, intégrez de manière transparente les capacités AI de texte, image et voix dans vos applications, et construisez des produits intelligents grâce à des technologies comme le RAG.
+- **Réflexion produit et compétences opérationnelles :** De la recherche utilisateur à la décomposition des besoins, de la conception MVP à l'itération produit, de l'intégration des paiements à la gestion des utilisateurs, formez un cycle complet de développement et d'exploitation de produits.
+
+# Que pourrez-vous faire après avoir appris ?
+
+## Première étape : Créer votre premier prototype de produit
+
+Cette étape est destinée à ceux qui n'ont aucune base en programmation, ou qui n'en ont qu'une petite mais manquent de confiance. Vous n'avez pas besoin d'apprendre d'abord beaucoup de théorie — vous apprenez directement en pratiquant, en utilisant des outils AI pour écrire du code.
+
+**Après avoir appris, vous pourrez :**
+- Utiliser des outils de programmation AI pour réaliser indépendamment une application web
+- Transformer une idée produit en un prototype cliquable et interactif
+- Ajouter des fonctionnalités AI à votre prototype (par exemple, génération d'images à partir de texte, conversation intelligente)
+- Savoir comment diagnostiquer et résoudre les erreurs
+
+En bref, vous serez capable de créer quelque chose qui « fonctionne et peut être montré à d'autres ».
+
+Nous pouvons d'abord découvrir la programmation AI à travers des petits jeux, puis apprendre à utiliser des outils de programmation AI pour vous aider à écrire du code et corriger les erreurs. Ensuite, en commençant par des pages simples, nous réaliserons progressivement des applications multi-pages interactives, puis ajouterons des fonctionnalités AI comme la génération d'images à partir de texte et les conversations intelligentes. Enfin, vous réaliserez indépendamment un projet complet, donnant à vos idées une véritable chance de se concrétiser.
+
+# Pourquoi utiliser une approche par projets pour s'entraîner ?
+
+> **Les défis du monde réel**
+>
+> La raison est en fait assez simple : dans l'état actuel de la plupart des étudiants, entrer directement dans le monde professionnel signifierait se faire rudement « corriger » par les projets réels et les patrons / clients. Les scénarios les plus courants dans le monde réel sont plutôt :
+
+> Votre mentor / patron : Nous devons créer un xxx, l'objectif est d'atteindre l'effet yyy.
+>
+> Documentation ? Framework existant ? Spécifications détaillées ? Bien souvent, rien de tout cela n'existe.
+
+De nombreuses tâches dans le travail réel consistent essentiellement à résoudre des problèmes jamais vus auparavant dans un environnement hautement incertain : les besoins sont flous, les périmètres évoluent, personne ne vous donne de réponse standard. Vous devez chercher vous-même des informations, faire des expériences, construire des prototypes, itérer constamment, et finalement proposer une solution « qui fonctionne, qui est utilisable et qui peut être mise en ligne ».
+
+Ce que ce cours cherche à faire, c'est de vous donner une « simulation de correction du monde réel » dans un environnement relativement sûr :
+
+- Par des projets qui semblent difficiles, vous forcer à pratiquer la décomposition de problèmes, la conception de solutions et la recherche autonome d'informations
+- Par des outils et du code qui ne sont pas « simplifiés à l'extrême », vous apprendre à lire, comprendre et modifier une base de code de taille moyenne à grande
+- Par un cycle complet de l'idée à la mise en ligne, vous faire vivre le processus complet de création d'un produit de 0 à 1
+
+À court terme, cet entraînement est effectivement exigeant ; mais à long terme, il augmentera considérablement votre compétitivité dans votre recherche d'emploi et votre évolution professionnelle : vous serez plus capable de supporter la pression, de trouver des percées dans des environnements incertains, et plus capable de transformer l'IA en produits réellement déployés, au lieu de rester au stade des « démos ».
+
+# L'art de poser des questions : une compétence essentielle à l'ère de l'IA
+
+À l'ère de l'IA, savoir poser des questions est aussi une « compétence fondamentale ». Pour un même code, une même erreur, **la façon dont vous posez la question détermine presque la qualité de la réponse que l'IA peut donner** : une réponse générique ou une correction étape par étape applicable.
+
+**Prenez une bonne habitude :** intégrez « poser des questions à l'IA » dans votre flux de développement quotidien : dès que vous ne comprenez pas quelque chose ou que vous êtes bloqué, posez la question immédiatement.
+
+## Pourquoi est-ce une compétence essentielle ?
+
+- **Rarement il existe une documentation complète dans la réalité** : la plupart du temps, vous êtes confronté à des besoins imprécis, du code à moitié fini, des messages d'erreur épars
+- **L'IA est votre mentor et collègue de toujours** : une personne qui sait poser des questions peut en faire un « pair programming de haute qualité »
+- **La limite de vos capacités est déterminée par votre communication** : plus vous fournissez d'informations clés et plus vous contraignez le format de sortie, plus la réponse sera utilisable
+
+**Malentendu courant :** poser simplement « pourquoi ça plante ? » ne donnera souvent que des suppositions. Complétez le contexte pour obtenir des solutions actionnables.
+
+## Comment « nourrir » l'IA en informations : capture d'écran vs copier-coller
+
+Les deux méthodes fonctionnent, mais pour des usages différents :
+
+| Méthode | Scénarios appropriés | Points clés |
+| ------------ | --------- | --------- |
+| **Copier-coller** | Piles d'erreurs, logs, code, configuration, réponses d'API | Copiez le plus complètement possible, ne vous contentez pas d'une seule ligne clé |
+| **Capture d'écran** | Problèmes de mise en page UI, anomalies d'interaction, interface d'outil où vous ne trouvez pas un bouton | Capture d'écran complète + annotation des zones importantes, idéalement avec une brève description textuelle |
+
+::: danger ⚠️ Prérequis important
+**Tous les modèles AI ne prennent pas en charge l'entrée d'images.** La communication par capture d'écran nécessite que l'IA possède des capacités multimodales (c'est-à-dire la capacité de comprendre et d'analyser des images). Les AI prenant actuellement en charge l'entrée d'images incluent : Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), ainsi que certains modèles chinois comme Qwen, ERNIE Bot, etc.
+
+**Si l'IA que vous utilisez ne prend pas en charge l'entrée d'images**, les captures d'écran ne pourront pas être reconnues. Dans ce cas, utilisez plutôt la méthode du copier-coller de texte.
+:::
+
+## Techniques de prompt pour que l'IA « explique bien »
+
+Si vous ne voulez pas seulement la réponse, mais « comprendre » la réponse, utiliser des instructions similaires à celles ci-dessous améliorera significativement la qualité des explications :
+
+> **Exemple de question d'apprentissage**
+>
+> - « Explique-moi d'abord ce concept en 5 phrases, puis pose-moi quelques questions pour vérifier que j'ai bien compris. »
+> - « Explique-moi en détail ce message d'erreur, je ne comprends pas pourquoi cela plante. »
+
+# J'ai persévéré longtemps mais je n'y arrive toujours pas, je veux abandonner
+
+C'est peut-être votre méthode de persévérance qui n'est pas la bonne. Ne vous débattez pas seul dans le noir — venez discuter avec les auteurs et les assistants : exposez honnêtement les méthodes que vous avez déjà essayées, les blocages spécifiques que vous rencontrez, et votre état psychologique actuel. Très souvent, un léger ajustement de direction ou l'ajout d'une connaissance clé vous permettra de continuer à avancer.
+
+# Je trouve que certains aspects du tutoriel ne sont pas bien conçus
+
+N'hésitez pas à contacter les auteurs, à soumettre une issue, ou à faire part de vos retours dans le groupe ou en cours. Nous espérons vraiment travailler avec vous pour perfectionner ce tutoriel : ce qui n'est pas clair, ce qui donne une mauvaise expérience, ce qui vous fait perdre du temps inutilement — tout cela peut être signalé franchement. Plus les retours sont authentiques et spécifiques, plus ils aideront les futurs apprenants à éviter les pièges.
+
+# Références
+
+- [Université de Nanking, Département d'informatique, Fondamentaux des systèmes informatiques, Travaux pratiques](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="Que pouvez-vous apprendre ensuite"
+  description="Continuez à progresser selon le parcours « de savoir utiliser l'IA à savoir créer des produits »."
+  :items="relatedArticles"
+/>
diff --git a/docs/index.md b/docs/index.md
index 06508a2..fa96585 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -9,7 +9,7 @@ import { withBase } from 'vitepress'
 const WELCOME_SEEN_KEY = 'easy-vibe-welcome-seen'
 
 onMounted(() => {
-  // 语言映射：浏览器语言代码 -> 网站路径
+  // Language map: browser language code -> site path
   const langMap = {
     'zh': '/zh-cn/',
     'zh-cn': '/zh-cn/',
@@ -34,14 +34,14 @@ onMounted(() => {
     'vi-vn': '/vi-vn/'
   }
 
-  // 获取浏览器语言
+  // Get browser language
   const browserLang = navigator.language.toLowerCase()
   const browserLangShort = browserLang.split('-')[0]
 
-  // 确定目标语言
+  // Resolve target language
   let targetLang = langMap[browserLang] || langMap[browserLangShort]
 
-  // 如果没有匹配的语言，默认使用中文
+  // Fallback when no match
   if (!targetLang) {
     targetLang = '/zh-cn/'
   }
@@ -61,8 +61,8 @@ onMounted(() => {
     return
   }
 
-  // 立即跳转，不显示任何内容
-  // 使用 withBase 自动处理 base 路径（根据 config.mjs 中的配置）
+  // Redirect immediately without rendering content.
+  // Use withBase to handle base path (see config.mjs).
   window.location.replace(targetPath)
 })
 </script>
diff --git a/docs/ja-jp/guide/introduction.md b/docs/ja-jp/guide/introduction.md
new file mode 100644
index 0000000..70da14c
--- /dev/null
+++ b/docs/ja-jp/guide/introduction.md
@@ -0,0 +1,82 @@
+# プロジェクト紹介
+
+2025年は、多くの人にとってAIプログラミングの元年と呼ばれています。AIを使ってコードを書く人が増えていますが、その多くはまだおもちゃレベルにとどまっています。Vibe Codingで開発プロセスをどう組むか、どのツールを選ぶべきか、プロトタイプから本番運用までに何が足りないのか、わからないことが多いでしょう。
+
+私たちは段階的な**三段階の実践パス**を採用しています。初心者向けステージではミニゲームでAIプログラミングに素早く慣れ、第一段階ではVibe Codingのワークフローを身につけWebアプリケーションのプロトタイプを完成させ、第二段階ではフルスタック開発とデプロイを学び、第三段階ではクロスプラットフォームの複雑なアプリケーションを構築します。
+
+各ステージには完全なプロジェクト実践が含まれており、実際の課題の中でおもちゃから製品へと進化し、最終的に**どんなアイデアも実用アプリとして具現化する能力**を身につけます。
+
+私たちは、Vibe Codingをマスターし、体系的なトレーニングを積めば、一人で**フロントエンド・バックエンド開発、AI能力の統合、プロダクトデザインを兼ね備えたオールラウンド開発者**になれると信じています。
+
+本プロジェクトは主に3種類の学習者を対象としています：
+
+- **初心者（一般の方 / プロダクト・運営側）**：非技術背景の方や入門学習者が重要な概念を理解し、最初のAI小ツールやプロダクトプロトタイプを完成させるのを支援します。
+- **初中級開発者（基礎のある学生や開発者）**：vibe codingとネイティブAIアプリケーション開発を体系的に習得します。
+- **上級開発者（企業・スタートアップ、オープンソース・独立開発者）**：チームや個人がネイティブAIアプリケーションを迅速に構築・検証・反復できるよう支援します。
+
+## 📖 コンテンツナビゲーション
+
+### 総付録
+
+[AI能力辞典：一般的なAIコア概念と用語、シナリオの解説](/ja-jp/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### ゼロ、ようちえん
+
+| 章节 | キーコンテンツ | 状態 |
+| :--- | :--- | :--- |
+| [初心者向け：学習マップ](/ja-jp/stage-1/learning-map/) | 全体学習パスガイド | ✅ |
+| [初心者向け：AI時代、話せばプログラミング](/ja-jp/stage-1/ai-capabilities-through-games/) | 貪食蛇などのケースでAIプログラミングの能力を初体験 | ✅ |
+
+### 一、AIプロダクトマネージャー
+
+| 章节 | キーコンテンツ | 状態 |
+| :--- | :--- | :--- |
+| [初級二：AI IDEツールを知る](/ja-jp/stage-1/introduction-to-ai-ide/) | IDEの使い方を学び、インターフェース構造と効率的なプロンプト方法を習得 | ✅ |
+| [初級三：プロトタイプを作る](/ja-jp/stage-1/building-prototype/) | プロダクト分析の分解から、マルチページプロダクトプロトタイプ実装までの完全ループ | ✅ |
+| [初級四：プロトタイプにAI能力を追加](/ja-jp/stage-1/integrating-ai-capabilities/) | 一般的なAI能力（テキスト・画像・動画）のAPI導入を理解し完了 | ✅ |
+| [初級五：完全プロジェクト実践](/ja-jp/stage-1/complete-project-practice/) | 実シナリオのシミュレーション、ユーザーフィードバックの反復とプロジェクト発表（課題あり） | ✅ |
+
+#### 付録
+
+| 章节 | キーコンテンツ | 状態 |
+| :--- | :--- | :--- |
+| [付録A：プロダクト思考補足](/ja-jp/stage-1/appendix-a-product-thinking/) | アイデア評価からニーズ分解、MVPまでのプロダクト思考フレームワーク | ✅ |
+| [付録B：よくあるエラーと解決策](/ja-jp/stage-1/appendix-b-common-errors/) | vibe codingでのよくあるエラーとトラブルシューティング方法 | ✅ |
+| [付録：アイデアの探し方](/ja-jp/stage-1/appendix-idea-sources/) | 参考アプリ、トレンド、VCリストから細分化方向を見つける | ✅ |
+| [付録：ダブルダイヤモンドモデル](/ja-jp/stage-1/appendix-double-diamond/) | まず問題を定義し、それからソリューション設計を展開する完全リズムを理解 | ✅ |
+| [付録：Jobs to Be Done](/ja-jp/stage-1/appendix-jobs-to-be-done/) | JTBD手法でユーザーが本当に達成したいことを見極める | ✅ |
+| [付録：The Mom Testユーザーインタビュー法](/ja-jp/stage-1/appendix-mom-test/) | ユーザーインタビューを通じてニーズを検証する調査方法 | ✅ |
+
+### 二、初中級開発エンジニア
+
+#### フロントエンド部分
+
+| 章节 | キーコンテンツ | 状態 |
+| :--- | :--- | :--- |
+| lovartで素材制作 | lovartを使って人物、シーンなどのビジュアル素材を一括生成し、UIデザインとフロントエンド開発に素材基盤を提供 | 🚧 |
+| FigmaとMasterGo入門 | デザインツールで情報アーキテクチャとページ構造を整理し、フロントエンド実装の基盤を作る | 🚧 |
+| 最初のモダンアプリケーション構築 - UIデザイン | デザインカンプに基づいてコンポーネント化インターフェースを完成し、デザインからコードへの最初のリンクを実現 | 🚧 |
+| UIデザイン仕様を参考にページとボタンを設計 | 主要なデザイン仕様を使ってページ構造、ボタン階層を整理し、AIでデザイン案を生成する方法を学ぶ | 🚧 |
+| [ホグワーツの肖像画を一緒に作ろう](/ja-jp/stage-2/frontend/hogwarts-portraits/) | ゼロからAI能力を組み込んだフロントエンドアプリを作り、デザインと開発を連携させる | 🚧 |
+
+#### バックエンド開発部分
+
+| 章节 | キーコンテンツ | 状態 |
+| :--- | :--- | :--- |
+| APIとは何か | HTTPインターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携の準備 | 🚧 |
+| [データベースからSupabaseまで](/ja-jp/stage-2/backend/database-supabase/) | SupabaseでデータベースとAPIを構築し、データモデルとフロントエンドページを接続 | 🚧 |
+| 大規模モデルでインターフェースコードとドキュメントを支援 | 大規模モデルでインターフェースとデータベースのドキュメントおよびコードを生成し、読みやすくテスト可能なバックエンドを実現 | 🚧 |
+| GitワークフローとZeaburデプロイ | Gitワークフローでコードを管理し、アプリケーションをZeaburにデプロイして公開 | 🚧 |
+| モダンCLI開発ツール | CLI系AIプログラミングツールで開発とデバッグを加速し、個人のエンジニアリングワークフローを形成 | 🚧 |
+| stripeなどの決済システムの統合方法 | 決済システムを導入し、課金フローと基本決済プロセスを完了 | 🚧 |
+| 最初のモダンアプリケーション構築 - フルスタックアプリ | フロントエンド、バックエンド、決済モジュールを統合し、デプロイ可能なフルスタックWebアプリを完成 | 🚧 |
+| モダンフロントエンドコンポーネントライブラリ + Trae実戦 | モダンフロントエンドコンポーネントライブラリとTraeを使い、ログイン登録と課金対応のプロダクトを独立して完成 | 🚧 |
+
+#### AI能力付録
+
+| 章节 | キーコンテンツ | 状態 |
+| :--- | :--- | :--- |
+| [Dify入門とナレッジベース統合](/ja-jp/stage-2/ai-capabilities/dify-knowledge-base/) | Dify Workflowと基本RAGでツール系プロダクトを構築し、今後のアプリアップグレードのサンプルを作成 | 🚧 |
+| AI辞典の調べ方とマルチモーダルAPIの統合を学ぶ | 適切なモデルとAPIの調べ方を学び、テキスト、画像などのマルチモーダル能力をプロダクトに組み込む | 🚧 |
+
+### 三、上級開発エンジニア
diff --git a/docs/ja-jp/stage-1/ai-capabilities-through-games/images b/docs/ja-jp/stage-1/ai-capabilities-through-games/images
new file mode 120000
index 0000000..de42bc1
--- /dev/null
+++ b/docs/ja-jp/stage-1/ai-capabilities-through-games/images
@@ -0,0 +1 @@
+../../../zh-cn/stage-1/ai-capabilities-through-games/images
\ No newline at end of file
diff --git a/docs/ja-jp/stage-1/ai-capabilities-through-games/index.md b/docs/ja-jp/stage-1/ai-capabilities-through-games/index.md
new file mode 100644
index 0000000..e28c036
--- /dev/null
+++ b/docs/ja-jp/stage-1/ai-capabilities-through-games/index.md
@@ -0,0 +1,765 @@
+# 初級一：AI 時代、話せるならプログラミングできる
+
+これは**プロジェクトベースの学習**チュートリアルです。ステップに沿って操作し、結果を再現してみましょう。
+間違えても気にしないでください。私たちはあなたができると信じています。常に覚えておいてください：
+
+<div style="text-align: center;">
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">完成は完璧より重要 🐣</span>
+</div>
+</div>
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>4 時間</strong>、複数回に分けて完了可能'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/ai-capabilities-through-games'] ?? []
+</script>
+
+## 本章のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['対話型 AI プログラミング', 'AI ネイティブミニゲーム', 'スネークゲーム実践']" coreOutput="AI ネイティブスネークゲーム + 自作ミニゲーム" expectedOutput="1つの動作する AI ネイティブスネークゲーム +（オプション）1つの自作 AI ネイティブミニゲームまたはデモ">
+
+<strong>完全にプログラミングができない</strong>、あるいは少ししか知らない場合、この章はあなたのために用意されています。最も基礎的なところから始めます：<strong>対話方式で</strong>AI にコードを書かせます。構文を覚える必要はなく、環境設定も不要で、Web ページ上で直接実行できます。
+
+最初の<strong>動作するプログラム</strong>——「単語を食べ、詩を書き、絵を描く」スネークゲームを自分で作ります。この実践を通じて、AI プログラミングが実際にどのようなものかを体験します。AI があなたの思考を代わりにするのではなく、あなたがアイデアを言葉にし、AI がそれを実現してくれます。
+
+すべての創造は 0 から 1 へのスタートです。あなたに自信と専門性を伝えられたら嬉しいです。あなたにとっては、<strong>実行力 is all you need</strong>。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
+      { title: '能力の初探', description: '60秒の高速開発体験' },
+      { title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
+      { title: '創造の拡張', description: '応用してゲームを作る' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 一般人の課題と機会
+
+多くの人は頭の中にたくさんのプロダクトアイデアを持っています：家計簿ツール、子供の成長を記録するウェブページ、あるいは小さなゲームなど。しかし、コードを書いたりプログラマーを探したりすることを考えると、すぐに諦めてしまいます。
+
+AI の登場により、初めて一般人に全く新しい可能性がもたらされました。コードを書く必要はなく、AI に自分が欲しいものを明確に伝えるだけでいいのです。GitHub Copilot からの[データ](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics)によると、1500万人以上の開発者が AI 補助プログラミングを使用しており、平均46%のコードが AI によって生成されています。Java プロジェクトではこの割合は61%に達します。
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 20px;">🚀</span>
+      <span style="font-weight: bold; font-size: 16px;">効率と採用率の飛躍</span>
+    </div>
+  </template>
+  
+  <el-row :gutter="20" style="margin-bottom: 24px;">
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">速度の向上</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">日</span></div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">タスク所要時間（元9.6日）</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">初日のインストール率</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">提案採用率</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <div style="line-height: 1.8; color: #606266;">
+    本当に興奮するのは効率の飛躍です：開発者がタスクを完了する速度が <b>55%</b> 向上しました。元々 9.6 日かかっていたコードの提出が、今では <b>2.4 日</b>で完了します。この目に見える効率の向上は、AI がもはや「オプションツール」ではなく、開発プロセスに不可欠なプログラミングアシスタントになりつつあることを示しています。採用率のデータもこれを裏付けています：アクセス権を取得した当日、<b>81%</b> の開発者が最初のうちにインストールを完了し、使用を開始しました。そのうち <b>96%</b> が当日に AI が提供するコード提案を採用しました。つまり、開発者はほぼ即座に AI を日常のコーディング作業に統合しているのです。
+  </div>
+</el-card>
+
+一般人にとって、このトレンドはさらに意義があります：プロのプログラマーでさえ大量に AI に依存してコードを書いているなら、**プログラミングのできない私たちが、なぜ AI と対話して自分のアイデアを実現できないのでしょうか？**
+
+このコースの目標は、あなたに新しいスキルを習得させることです：自然言語の対話でアプリケーションを作れるようになります。コンピュータの言葉で AI とコミュニケーションする方法、AI に頭の中のアイデアを実用的なプロダクトにする方法を教えます。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
+      { title: '能力の初探', description: '60秒の高速開発体験' },
+      { title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
+      { title: '創造の拡張', description: '応用してゲームを作る' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. AI はどこまでできるか
+
+このセクションでは、一つの問題だけを議論します：プログラミングが全くできない場合、現在の AI はどこまでできるのでしょうか？
+
+大まかに言えば、現在の大規模モデルの能力は次のように理解できます：**シンプルな社内ツール**、**データ可視化ダッシュボード**、および一部の**軽量ミニゲーム**の開発に対応できます。これらの能力は、**個人用ツール**の作成や、**プロダクトマネージャーの視点からのニーズ検証**には基本的に十分です。ただし、ワンクリックで**商用レベルの完成品**を生成したい場合、通常は**プロセス設計**や**ディテールの仕上げ**において人手による継続的な最適化が必要です。
+
+次に、スネークゲームを例に、AI プログラミングが現在どこまでできるかを具体的に見てみましょう。
+
+### 2.1 60秒でスネークゲームを作る
+
+まず、コースで使用する実験用ウェブページ [z.ai](https://chat.z.ai/) を開いてください。`z.ai` は智譜 AI（中国を代表する大規模言語モデル企業の一つ）が開発した AI プラットフォームで、その中核能力は智譜が自社開発した GLM シリーズの大規模モデルによって支えられています。このプラットフォームはスライド生成、ポスターデザイン、フルスタック開発など、複数の AI 機能を統合しています。このチュートリアルでは、そのフルスタック開発モジュールの使用に焦点を当てます。
+
+::: details 💡 「Web ページでプログラミングできる」とは？
+
+過去、Web アプリケーションを開発するには：
+- プログラミング環境のインストール（Python、Node.js など）
+- コードエディタの設定
+- HTML/CSS/JavaScript などの言語の学習
+- 各種依存関係やエラーの処理
+
+しかし今は、AI プログラミングプラットフォームを使えば、次のことだけが必要です：
+- ブラウザを開き、Web ページにアクセスする
+- 自然言語で欲しい機能を説明する
+- AI が自動的にコードを生成し、リアルタイムでプレビューする
+
+この「対話即プログラミング」のモードにより、プログラミングは「コードを書く」ことから「要件を説明する」ことになりました。あなたは技術的な詳細を気にする必要がなく、AI に欲しいものを明確に伝えるだけで、アイデアを実行可能なプログラムに変えてくれます。これが AI 時代のプログラミングの新しいパラダイム——**Vibe Coding（バイブコーディング）**です。
+:::
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
+
+シンプルな要件を入力して**フルスタック開発**ボタンをクリックすると、Web ページの完全な作成プロセスをリアルタイムで見ることができます。通常、コーヒーを淹れる時間で Web ページが自動的に生成されます！
+
+```
+スネークゲームを作ってください：
+1. 方向キーで蛇の移動を制御
+2. 食べ物を食べると蛇が長くなり、スコアが増加
+3. 壁や自分の体にぶつかるとゲームオーバー
+4. スタートとリスタートボタンを付ける
+5. シンプルで美しいインターフェース
+```
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
+
+生成が完了すると、右側にブラウズ可能な Web ページのインターフェースが表示されます。ページのコンテンツを上下にスクロールしたり、ページ上部の 🧭 ボタンをクリックしてフルスクリーンモードに切り替えて効果を確認したりできます。
+
+> 上部の左から右へのボタンの役割はそれぞれ：矢印ボタンはサイドバーの対話履歴を展開、鉛筆ボタンは新しい対話を作成、ループ矢印ボタンはページをリロード、コンパスボタンはフルスクリーンモードに切り替え、Download ボタンはプロジェクトをダウンロード、<> ボタンはコードビューに切り替え、Publish ボタンはプロジェクトを公開。
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
+
+この Web ページのソースコードを表示したい場合は、右上隅のコードアイコンをクリックして完全なコードを確認できます。
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png)
+
+::: tip 🌐 他の AI プログラミングツールを探索
+
+z.ai のほかに、以下の優れた AI プログラミングプラットフォームもおすすめです：
+
+| ツール | URL | 特徴 |
+|------|------|------|
+| **Google AI Studio**（おすすめ） | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Google 公式、Gemini モデル対応、高速プロトタイプ開発に最適 |
+| **Figma Make** | [figma.com/make](https://www.figma.com/make) | デザインツールとの深い統合、デザイナー向けのインタラクティブプロトタイプに最適 |
+| **Coze** | [coze.com](https://www.coze.cn) | ByteDance の AI Bot 開発プラットフォーム、ノーコードのビジュアル構築機能。豆包、Kimi などの中国産大規模モデルと深く統合、プラグインマーケットプレイス、スケジュールタスク、マルチチャネル配信（Feishu、WeChat など）をサポート |
+| **v0.dev** | [v0.dev](https://v0.dev) | Vercel の AI UI 生成ツール、説明を入力するだけで実行可能な React コンポーネントを生成 |
+| **Bolt.new** | [bolt.new](https://bolt.new) | StackBlitz の AI フルスタック開発プラットフォーム、完全な Web アプリケーションを直接生成・デプロイ可能 |
+| **Lovable** | [lovable.dev](https://lovable.dev) | 高品質な React アプリの生成に特化、GitHub 統合とワンクリックデプロイをサポート |
+| **Replit Agent** | [replit.com](https://replit.com) | AI プログラミングアシスタントを統合したオンライン IDE、複数言語とリアルタイムコラボレーションをサポート |
+
+他の Web プログラミングツールの詳細な比較と使用チュートリアルについては、拡張読み物を参照してください：[7 つの主流 Vibe Coding オンラインプラットフォーム実測比較](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
+:::
+
+### 2.2 対話型プログラミングでできること・できないこと
+
+このセクションでは、一つの具体的な問題に焦点を当てます：対話型 AI のみに依存し、コードを一切書かない場合、一体どこまで進めることができるのか。
+経験則として、比較的安定した結論は次のとおりです：「小さくて完成度の高い」ものを作ることはできますが、「どこまでやれば十分か」は、あなたが各ステップの詳細を自分で判断する必要があります。
+
+#### 「小さくて明確な」アプリに適している
+
+前のスネークゲームの例からわかるように、典型的なパターンがあります：
+インターフェースとインタラクションを明確に説明できれば、AI は通常、数回の対話で、開ける、クリックできる、遊べる完全な Web ページを組み立てることができます。
+
+この種のタスクにはいくつかの共通特徴があります：
+
+- 範囲が明確：1ページの Web ページ、シンプルな社内ツール、小さなゲーム
+- 結果が見える：ブラウザで期待通りに動作するかすぐに確認できる
+- 修正が直接的：問題を見つけた後、後続の対話で具体的な現象を指摘し修正を求めることができる（エラーをコピーして貼り付けたり、スクリーンショットを貼り付けたりして AI に修正させる）
+
+この範囲内では、対話型 AI を実行力のある「アシスタント開発者」と見なすことができます。各ラウンドで自然言語を使って要件を細分化・修正するだけで、素早く使えるプロトタイプを得ることができます。
+
+**AI が単独で小規模プロジェクトを完了する成功率：**
+<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
+
+#### 大規模プロジェクトには「プロセスの視点」が必要
+
+小さくて明確な範囲を超えると、数回の対話だけで AI に複雑なシステムをエンドツーエンドで完成させることは、すぐに限界に達します。大規模プロジェクトは多くの場合、バックエンド、データベース、サードパーティサービスの統合が必要で、権限、セキュリティ、同時実行、大量のビジネスルールも関係し、1ページの Web ページではなく、既存のビジネスと深く統合されたシステム全体の構築が目標です。
+
+この場合、より合理的なアプローチは、すべての要件を一度に AI に投げるのではなく、まず明確な全体プロセスを整理することです：重要なステップは何か、各ステップの入力・出力と状態変化は何か、どのノードがパフォーマンスとセキュリティに最も敏感か。このフローチャートに基づいて、比較的独立した部分を分割し、対話型 AI にインターフェース、モジュール、スクリプト、テストの生成を任せます。
+
+現在の能力では、AI は一つ一つの小さなステップを加速するのに適しており、あなた（またはチーム）がステップの分割方法、連携方法を決定し、最終的なアーキテクチャ設計、システム統合、運用保守を担当します。
+
+#### 「書ける」ことと「使える」ことの違い
+
+一見すると、AI は何でも書けるように見えますが、これらが本当に使えるのか、どこまで使えるのか、どのように区分すべきでしょうか？
+
+一つの参考となる経験則は次のとおりです：
+
+::: warning ⚠️ 適用シナリオガイド
+
+- **プロトタイプ / デモ / 社内ツール**：まず AI に初版を作らせ、その後あなたがディテールを反復するのに非常に適しています。
+- **実際のユーザー向けの大規模プロダクト**：通常、エンジニアがアーキテクチャ、抽象化、パフォーマンス、保守に長期的に取り組む必要があります。
+- **高セキュリティ / 高コンプライアンスシステム（決済、リスク管理、医療など）**：現段階では「生成してそのまま本番稼働」は推奨されず、厳格なレビューとテストプロセスを導入する必要があります。
+  :::
+
+現在、AI を効率的なデモと個人用ツールのパートナーとして比較的安心して見なすことができます：
+十分にテストし、反復し、「ここが違う、修正して理由を説明して」と何度も聞けば、プロトタイプと社内ツールのレベルでは、全体的な品質は通常十分であり、実践的な価値があります。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
+      { title: '能力の初探', description: '60秒の高速開発体験' },
+      { title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
+      { title: '創造の拡張', description: '応用してゲームを作る' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. 実践：あなた初の AI ネイティブアプリケーション
+
+実践パートに戻りましょう。前半では、AI を使って遊べるスネークゲームのプロトタイプを素早く作成し、AI が何ができて何ができないかを大まかに理解しました。次に、最も基本的な **vibe coding** のテクニックを使って、**現代版**の AI スネークゲームを作成する方法を学びます。蛇が豆ではなく文字を食べるようにします。最後に、ゲームが食べた文字に基づいて詩を生成し、絵を描かせます。
+この実際のケースを通じて、新しいプログラミング方法の核心理念を理解できます：自然言語で要件を明確に表現する方法を学びます。
+
+### 3.1 AI ネイティブスネークゲーム
+
+最初は、最もシンプルな方法で大規模モデルと対話します。これにより、迅速にプロダクトプロトタイプを得ることができます。チャットボックスに直接入力できます：
+
+> **💡 プロンプト例：** スネークゲームを作ってください
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png)
+
+> **💡 プロンプト例：** スネークゲームを作ってください。以下の機能をサポートしてください
+>
+> 1. さまざまな単語を食べることができ、それらがボックスに収集されます
+>    ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png)
+
+> **💡 プロンプト例：** スネークゲームを作ってください。以下の機能をサポートしてください：
+>
+> 1. さまざまな単語を食べることができ、それらがボックスに収集されます
+> 2. 蛇が8つの単語を食べると、LLM がそれらの単語に基づいて詩を作成し、必要に応じて詩を再ミックスできます
+> 3. 詩が完成したら、次のステップでその詩に基づいて画像が自動的に作成されます
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png)
+
+注意：開発中に期待通りにいかない問題に遭遇する場合があります。ボタンをクリックしても反応がない、機能使用時にエラーが発生する、機能が期待通りに動作しない、またはフロントエンドページが期待したデザインと一致しないなどです。
+
+この場合、モデルにさらに質問して、これらの予期せぬ問題を修正するよう助けてもらう必要があります。
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png)
+
+### 3.2 ゲームに新機能を追加する
+
+基本機能が完成したら、プログラムに新しい工夫を追加してみましょう。蛇が単語や文字を食べるプロセスが少し退屈だと思うなら、蛇に異なる色の単語を食べさせ、それに応じて蛇の色を変えることができます。
+
+また、「食べる」プロセスにエフェクトを追加したり、エフェクトをトリガーするマジックワードを導入したりすることもできます。たとえば、蛇の速度やサイズを増やすなど。別のアイデアとして、蛇が単語を食べるたびにモデルに詩と画像を生成させることもできます。8つの単語を食べるまで待つ必要はありません。
+
+これが難しいと思うなら、言語モデルに直接助けを求めることができます。創造的な提案を出して、ゲームをより面白くしてくれます。試してみてください！
+
+```
+1. "単語が世界をアンロック" メカニズム
+蛇が単語を食べるたびに、LLM がその単語に対して詩的な連想を行い（例：「木」→「森」「緑陰」）、画像モデルがその単語の小さなアートワークを即座に生成します。これらの画像は徐々にユニークなパノラマを構成し、プレイヤーは毎回プレイするたびに「絵を描き、詩を書いている」ことになります。
+
+2. "詩のパズル" プレイ
+蛇が食べた各単語が LLM に短い詩の行を生成させ、画像モデルが挿絵を生成します。これらの詩と画像はパズルのように組み合わされ、ラウンド終了時に AI コラボレーションの詩と絵になります。
+
+3. "マジックワード" & "ストーリー分岐"
+特別な「マジックワード」（例：「風」「夜」「夢」）は、LLM に詩を生成させるだけでなく、シーンの雰囲気やテーマを変えます——画像生成のスタイルを夜、嵐、夢の雰囲気に切り替えます。
+分岐ストーリー：LLM は開始時にテーマやなぞなぞ（例：「秋の思い出」）を提示します。プレイヤーの単語選択がストーリーと詩の進化に直接影響し、画像モデルはリアルタイムで背景とビジュアル効果を更新します。
+
+4. "リアルタイムインタラクティブ生成"
+各単語の後、LLM が一行の対話や説明を生成し、ゲーム内の NPC がプレイヤーに「話しかけ」たり、環境に応じて変化したりします。
+蛇の外観やゲーム内の障害物は、食べた単語に基づいて視覚的に変化します。これは画像モデルのおかげです。
+
+5. "創作 & シェア"
+プレイヤーはセッション終了時に AI 創作の詩と画像を保存・シェアでき、ユニークな「AI コラボレーション」を自慢できます。
+「最も美しい詩+アート」「最も創造的な単語の組み合わせ」などのランキングは、リプレイと創造性を促します。
+
+6. "フレーズスネーク" チャレンジ
+リバースモード：LLM が詩の一行またはなぞなぞを提示し、プレイヤーは蛇を操作して単語を順番に食べ、文を再構成する必要があります。間違った単語を食べると、画像生成モデルによって面白いまたは芸術的な結果がトリガーされます。
+
+7. "テーマレベル" & "スタイル選択"
+ゲーム開始時に、プレイヤーがテーマ（例：「童話」「SF」「唐詩」）を選択し、LLM と画像モデルの両方が単語選択、詩のスタイル、ビジュアル効果を調整し、毎回のプレイが新鮮に感じられるようにします。
+
+8. "リアルタイムコラボレーション"
+特別な単語を食べると、LLM はプレイヤーにフレーズやスタイルの入力を促し、AI が対応する詩と挿絵を生成し、真の人間-AI コラボレーションを実現します。
+
+9. "AI イースターエッグ & 実績"
+特定の単語の組み合わせが LLM によって特別なテーマや内部ジョーク（例：「月」「桂花」「川岸」）として認識され、レアな詩と挿絵がトリガーされ、探索を報酬します。
+
+10. "成長の物語"
+蛇が成長するにつれて、LLM が連続する物語詩を生成し、画像モデルがシームレスな長巻物またはパノラマを作成し、プレイヤーは「書き、描き、遊ぶ」ことを同時に楽しめます。
+```
+
+また、LLM にプロジェクトレベルのプロンプトを直接生成させるよう依頼することもできます。前のセクションでは、スネークゲームのプロンプトを自分で書きました。今回は、大規模モデルに全体フレームワークと実装パスを含むプロンプトを生成させましょう（z.ai で直接生成できます）。
+
+より良いプロンプトの書き方を学びたい場合は、[プロンプトエンジニアリング付録](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering)を参照してください。
+
+> AI にウェブスネークゲームを生成させたいのですが、より完全なプロンプトが必要で、結果をより印象的で面白くしたいです。詩を生成する機能を実装するスネークゲームを生成してください。また、画像生成モジュールを含める必要があります。
+
+z.ai の回答は次のようになります：
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png)
+
+このプロンプトを使ってフルスタック開発モードでプロジェクトを再生成できます：
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png)
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '課題と機会', description: '一般人のプログラミングの新たな可能性' },
+      { title: '能力の初探', description: '60秒の高速開発体験' },
+      { title: 'ネイティブ実践', description: 'AI ネイティブスネークゲームを作る' },
+      { title: '創造の拡張', description: '応用してゲームを作る' }
+    ]" />
+  </ClientOnly>
+</div>
+
+### 3.3 他のミニゲームを作ってみる
+
+スネークゲーム以外にも、想像力を存分に発揮させましょう。
+
+何でも創造できます。失敗しても最初からやり直すだけです！
+
+```
+1. AI アートギャラリープラットフォーム
+   説明：AI 生成アート作品を展示するオンラインギャラリー。ユーザーはアップロード、共有、コメントができます。
+   機能：ユーザーアカウントシステム、アート作品のアップロードと展示、評価システム、カテゴリブラウジング、AI 生成ツール統合。
+   技術的ハイライト：React/Vue フロントエンド、Node.js バックエンド、MongoDB データベース、AI API 統合。
+
+2. レトロゲームアーカイブ
+   説明：クラシックゲームを称えるウェブサイト。ゲームの歴史、プレイガイド、オンラインで遊べるレトロゲームを含みます。
+   機能：ゲームデータベース、タイムライン展示、オンラインエミュレータ、ユーザーレビュー、ゲームコレクション機能。
+   技術的ハイライト：レスポンシブデザイン、WebGL/Canvas ゲーム実装、RESTful API、ユーザー認証システム。
+
+3. サステナブルライフトラッカー
+   説明：エコフレンドリーなヒントとコミュニティチャレンジを通じて、ユーザーがカーボンフットプリントを追跡・削減するウェブサイト。
+   機能：個人カーボンフットプリント計算機、目標設定、進捗追跡、コミュニティチャレンジ、環境知識ベース。
+   技術的ハイライト：データ可視化、モバイル最適化、ソーシャル機能、プッシュ通知。
+
+4. バーチャルキッチンアシスタント
+   説明：AI ベースの料理指導プラットフォーム。パーソナライズされたレシピ提案とステップバイステップの料理手順を提供します。
+   機能：レシピデータベース、食材認識、パーソナライズされた推薦、料理タイマー、栄養分析。
+   技術的ハイライト：画像認識 API、機械学習推薦システム、音声制御、リアルタイムビデオガイダンス。
+
+5. インディーミュージック発見プラットフォーム
+   説明：インディーズアーティストや新進アーティストに特化した音楽ストリーミングプラットフォーム。
+   機能：音楽ストリーミング、アーティストプロフィール、パーソナライズされた推薦、プレイリスト作成、コミュニティレビュー。
+   技術的ハイライト：オーディオストリーミング処理、推薦アルゴリズム、ソーシャル機能、音楽可視化。
+
+6. ミニマリストタスク管理システム
+   説明：禅の美学を持つタスク管理ツール。シンプルさと効率的なタスク整理に焦点を当てています。
+   機能：タスクの作成と分類、優先度設定、進捗追跡、チームコラボレーション、データ分析。
+   技術的ハイライト：ミニマリスト UI デザイン、ドラッグ＆ドロップ機能、リアルタイム同期、クロスプラットフォーム互換性。
+
+7. SF ライティングワークショップ
+   説明：SF 作家のためのクリエイティブツールとインスピレーションプラットフォーム。ワールドビルディング補助とキャラクター開発ツールを含みます。
+   機能：ストーリー構造ツール、キャラクタープロフィール、ワールドビルディングテンプレート、ライティング統計、コミュニティフィードバック。
+   技術的ハイライト：リッチテキストエディタ、データ可視化、コラボレーティブ編集、AI 補助創作。
+
+8. パーソナルナレッジグラフ
+   説明：ユーザーがパーソナルナレッジネットワークを構築し、さまざまなアイデアと情報を可視化・接続するツール。
+   機能：ノードの作成と接続、タグシステム、検索機能、インポート/エクスポートツール、可視化グラフ。
+   技術的ハイライト：グラフデータベース、データ可視化アルゴリズム、Markdown サポート、クロスデバイス同期。
+
+9. バーチャル植物園
+   説明：インタラクティブな植物図鑑。ユーザーは植物の世界を探索し、バーチャルガーデンを作成できます。
+   機能：植物データベース、3D 植物モデル、成長シミュレーション、ガーデニングガイド、コミュニティ展示。
+   技術的ハイライト：3D レンダリング、季節変化シミュレーション、AR 統合、植物認識 API。
+
+10. プログラミングチャレンジアリーナ
+    説明：プログラマー向けのオンラインコンペティションプラットフォーム。さまざまな難易度レベルのプログラミングチャレンジを提供します。
+    機能：チャレンジ問題、コードエディタ、自動評価、リーダーボード、学習パス。
+    技術的ハイライト：コードサンドボックス環境、リアルタイム評価システム、アルゴリズム可視化、ソーシャル学習機能。
+```
+
+また...ゲームが好きなら、一緒にゲームを作ってみましょう！
+
+```
+1. 3D オープンワールド RPG
+   説明：広大なオープンワールド、クエスト、キャラクター成長を持つファンタジー RPG。
+   機能：昼夜サイクル、ダイナミック天気、スキルツリー、マルチプレイヤーコープ、クラフトシステム。
+   技術的ハイライト：Three.js または Babylon.js による 3D レンダリング、サーバーサイドゲームロジック、キャラクターカスタマイズ、セーブシステム。
+
+2. FPS アリーナ
+   説明：高速ペースのマルチプレイヤー FPS。さまざまなゲームモードとマップを備えています。
+   機能：チームデスマッチ、キャプチャーザフラグ、武器カスタマイズ、ランクマッチ。
+   技術的ハイライト：WebGL/Three.js による 3D グラフィックス、マルチプレイヤーネットワークコード、ヒット検出、ボイスチャット。
+
+3. AI チェス & マルチプレイヤー
+   説明：AI 対戦とオンライン対戦機能を備えた本格的なチェスプラットフォーム。
+   機能：AI 難易度レベル、エンドゲームチャレンジ、トーナメントモード、リプレイ分析。
+   技術的ハイライト：チェスロジックライブラリ、WebSocket によるリアルタイム対戦、ELO ランキングシステム、アンチチート。
+
+4. マージャンオンラインマルチプレイヤー
+   説明：オンラインマルチプレイヤーとスコアリング機能を備えた伝統的な麻雀ゲーム。
+   機能：複数のルールセット、プライベートルーム、ランキングシステム、リプレイ機能。
+   技術的ハイライト：牌マッチングロジック、リアルタイムマルチプレイヤー、ロビーシステム、スコア追跡。
+
+5. ターン制ストラテジーゲーム
+   説明：グリッドベースの戦闘とユニット管理を備えたタクティカルストラテジーゲーム。
+   機能：キャンペーンモード、スカーミッシュ、ユニットアップグレード、フォグオブウォー、マルチプレイヤー対戦。
+   技術的ハイライト：グリッド移動システム、AI 意思決定、ターン同期、セーブ/ロードシステム。
+
+6. タイムアタックレーシングゲーム
+   説明：タイムアタックとコースレコードに焦点を当てた 3D レーシングゲーム。
+   機能：複数のコース、車のカスタマイズ、ゴーストリプレイ、リーダーボード。
+   技術的ハイライト：3D カーの物理、コースエディタ、リプレイシステム、オンラインリーダーボード。
+
+7. カードバトルゲーム（デッキ構築）
+   説明：プレイヤーがデッキを構築し、対戦相手と戦うストラテジーカードゲーム。
+   機能：カード収集、デッキ構築、ランクマッチ、シーズンイベント。
+   技術的ハイライト：カードゲームロジック、マッチメイキングシステム、AI 対戦相手、カードアニメーション。
+
+8. バトルロイヤル（俯瞰 2D）
+   説明：縮小するゲームエリアとルート機能を備えた俯瞰 2D バトルロイヤル。
+   機能：ソロおよびスクワッドモード、武器の多様性、インゲームイベント、リーダーボード。
+   技術的ハイライト：リアルタイムマルチプレイヤー、ゾーン縮小ロジック、ルート生成システム、マッチメイキング。
+
+9. ホラーサバイバルゲーム（一人称）
+   説明：リソース管理と脱出メカニズムを備えた一人称ホラーゲーム。
+   機能：不気味な雰囲気、パズル、敵 AI、マルチエンディング。
+   技術的ハイライト：ダイナミックライティング、サウンドデザイン、敵の経路探索、セーブシステム。
+
+10. リズムゲーム（3D）
+    説明：音楽のビートに合わせてノートを叩く 3D リズムゲーム。
+    機能：複数の難易度レベル、コースエディタ、カスタム楽曲サポート、リーダーボード。
+    技術的ハイライト：オーディオ分析、ビート同期、3D ノートトラック、入力タイミング検出。
+```
+
+## 📚 Assignment
+
+<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🎯 本章の課題：最初の AI ネイティブミニゲームを完成させる</div>
+  </template>
+
+  <p>
+    このセクションでは、「対話でスネークゲームを生成」から「AI ネイティブミニゲームの設計思考の理解」までの完全なプロセスを体験しました。以下の課題は、この理解を自分の能力にするのに役立ちます。
+  </p>
+
+  <ol>
+    <li>
+      <strong>AI ネイティブスネークゲームを完全に再現する</strong>
+      <ul>
+        <li>最低限の実装：蛇が移動できる、「食べ物」を食べると長さとスコアが変化する、壁や自分の体にぶつかるとゲームオーバー。</li>
+        <li>再現中、エラー現象 + エラーメッセージ + 重要なコードスニペットを一度に AI に投げ、「初心者モード」で修正してもらう練習をする。</li>
+      </ul>
+    </li>
+    <li>
+      <strong>（オプション）自作の AI ネイティブミニゲームまたはデモを 1 つ作る</strong>
+      <ul>
+        <li>文字、画像、音楽、リズムなどを中心とした任意の軽量ゲームプレイで構いません。例：「単語を食べて詩を書く」「リズムタップ」「生成的ランニング」など。</li>
+        <li>重要なのはビジュアルの豪華さではなく、AI がここで具体的に何を助けたのか、人間には困難または面倒な部分を何を解決したのかを明確に説明できることです。</li>
+      </ul>
+    </li>
+  </ol>
+
+  <p>
+    これが完全なチュートリアルです！すべての内容を完了し、自分のスネークゲームを構築するには <strong>4 時間</strong>かかるかもしれません。急ぐ必要はありません——探索、実験、そしてプロセスを楽しんでください。途中で理解できない概念に遭遇した場合は、以下の付録の関連部分を参照してください。
+  </p>
+</el-card>
+
+## 付録
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
+  <div style="font-weight: bold; margin-bottom: 8px;">付録ナビゲーション</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    本章に関連する基本概念を整理しました：学習中に「フロントエンドとは何か」「Vibe Coding とは何か」などの疑問に遭遇したら、いつでもここに戻って参照できます。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>付録 1：フロントエンド開発の知識は必要？</b></a><br/>
+      <span style="font-size: 12px; color: #909399">アプリケーション全体におけるフロントエンドの位置を理解し、「見える」部分を知る。</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>付録 2：Vibe Coding とは何か</b></a><br/>
+      <span style="font-size: 12px; color: #909399">「対話型開発」の核心理念を理解し、AI とどう連携するかを知る。</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="16" style="margin-top: 10px;">
+    <el-col :span="12">
+      <a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>付録 3：モデルコンテキスト</b></a><br/>
+      <span style="font-size: 12px; color: #909399">「コンテキスト長」などよく聞くが混同しやすい概念を整理する。</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>付録 4：命令追従能力</b></a><br/>
+      <span style="font-size: 12px; color: #909399">モデルがなぜ「話を理解しない」ことがあるのか、より明確に書く方法を学ぶ。</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    ヒント：Ctrl/⌘+F でキーワードを検索できます。または、わからない段落を AI にコピーして、「完全に初心者にもわかるように」説明してもらうこともできます。
+  </div>
+</el-card>
+
+## <span id="appendix-1">[付録 1：フロントエンド開発の知識は必要？](#appendix-nav)</span>
+
+::: tip 💡 一言でまとめると
+コードを書く必要はありませんが、基本概念を理解すると AI に要件をより良く説明できるようになります。
+:::
+
+<el-row :gutter="16" style="margin: 20px 0;">
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">👁️</span>
+          <span style="font-weight: bold;">フロントエンド</span>
+          <el-tag type="success" size="small">可視</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        ユーザーが<strong>見て、触れる</strong>すべてのコンテンツ
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>ウェブページのタイトル、テキスト、画像</li>
+          <li>ボタン、入力フィールド、ドロップダウンメニュー</li>
+          <li>ゲームインターフェース、アニメーション効果</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">⚙️</span>
+          <span style="font-weight: bold;">バックエンド</span>
+          <el-tag type="info" size="small">不可視</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        サーバー上で動作するデータ処理
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>ユーザースコアの保存</li>
+          <li>ログイン認証</li>
+          <li>レベルコンテンツの配信</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+### フロントエンドの三種の神器
+
+ブラウザは三つの「コード」を使ってページを構築します：
+
+<el-tabs type="border-card" style="margin: 20px 0;">
+  <el-tab-pane label="🏗️ HTML - 骨格">
+    <div style="padding: 10px;">
+      <p><strong>役割：</strong>ページ上に<strong>何があるか</strong>を定義する</p>
+      <p><strong>例え：</strong>家の構造スケッチ（壁、ドア、窓の場所）</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>&lt;button&gt;クリック&lt;/button&gt;
+&lt;h1&gt;タイトル&lt;/h1&gt;
+&lt;img src="photo.png"&gt;</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="🎨 CSS - スタイル">
+    <div style="padding: 10px;">
+      <p><strong>役割：</strong>要素の<strong>見た目</strong>を制御する</p>
+      <p><strong>例え：</strong>家の内装（色、素材、レイアウト）</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button {
+  background: blue;
+  color: white;
+  border-radius: 8px;
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="⚡ JavaScript - 挙動">
+    <div style="padding: 10px;">
+      <p><strong>役割：</strong>ページを<strong>動かす</strong></p>
+      <p><strong>例え：</strong>家の電気回路スイッチ（クリック後の応答）</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button.onclick = () => {
+  alert('クリックされました！')
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+</el-tabs>
+
+### コードがページになる仕組み
+
+Web ページを開くと、ブラウザは三つのコードを順番に処理します：
+
+**1. HTML —— ページ構造の定義**
+ブラウザはまず HTML を解析し、ページ上にどの要素（タイトル、段落、画像、ボタンなど）があるか、そしてそれらの階層関係を理解します。
+
+**2. CSS —— スタイルの適用**
+次にブラウザは CSS ルールに従って、これらの要素にスタイルを追加します：色、サイズ、位置、間隔など、ページを見やすくします。
+
+**3. JavaScript —— インタラクションの追加**
+最後に JavaScript コードを実行し、ページを「動かします」：クリックへの応答、フォームの送信、アニメーションの再生など。
+
+**4. ページの表示**
+三つの連携結果が、あなたが最終的に見る Web ページです。
+
+### モダンフロントエンドフレームワーク：HTML から React/Vue へ
+
+前述の HTML、CSS、JavaScript はフロントエンド開発の「三種の神器」であり、すべての Web ページの基礎です。ただし、ページが複雑になると、これらだけでは課題に直面します：コードの保守が困難、反復作業が多い、データ同期が面倒など。
+
+**モダンフロントエンドフレームワーク**（React、Vue、Angular など）は HTML/CSS/JS の上に構築され、開発をより効率的にします：
+
+**1. HTML/CSS/JS（基礎段階）**
+ページ要素を直接操作し、シンプルなページに適しています。しかし、コード量が増えると、すべてのロジックが混ざり合い、保守が困難になります。
+
+**2. jQuery（過渡期）**
+DOM 操作を簡素化し、コードをより簡潔にします。ただし、ページの状態を手動で管理する必要があり、データ変更時に対応する要素を自分で見つけて更新する必要があります。
+
+**3. React/Vue（モダン期）**
+コンポーネント化と状態駆動の設計を採用：
+- **コンポーネント化**：ページを独立した再利用可能なモジュール（ボタン、カード、ナビゲーションバーなど）に分割
+- **状態駆動**：データが変更されると、フレームワークが対応する UI を自動的に更新し、手動操作が不要
+
+::: tip 💡 簡単に理解すると
+- **HTML/CSS/JS** = 基礎材料（レンガ、セメント、鉄筋）
+- **React/Vue** = 建築フレームワーク（家を建てるための規範とツールを提供）
+
+AI 補助プログラミング時代では、フレームワークのすべての詳細を深く理解する必要はありません。基本概念を理解するだけで、自然言語の説明で AI にコード生成を依頼できます。
+:::
+
+### Vibe Coding において
+
+**核となるポイント：コードを書く必要はなく、説明できれば十分です。**
+
+フロントエンドの概念を理解した後、次のように AI に要件を説明できます：
+
+> "React でリーダーボードページを作って。右側にスコアリストを表示し、行をクリックすると下にプレイヤー詳細を表示する。シンプルでモダンなスタイルに。"
+
+HTML、CSS、JavaScript などのフロントエンド基礎知識をさらに深く理解したい場合は、[Web 基礎付録](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive)を参照してください。フロントエンド技術の発展の歴史を知りたい場合は、[フロントエンド進化史付録](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks)を参照してください。
+
+## <span id="appendix-2">[付録 2：Vibe Coding とは何か](#appendix-nav)</span>
+
+> 💡 Vibe Coding とは？コンピュータ科学者 [Andrej Karpathy](https://karpathy.ai/)（OpenAI の共同創業者の一人、テスラ元 AI 責任者）が 2025 年 2 月に **vibe coding** という言葉を提案しました。この概念は、LLM に依存するコーディング方法を指し、**プログラマーが自然言語の説明を提供することで、手動でコードを書くことなく動作するコードを生成できるようにします。**
+
+![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png)
+
+文字通り、Vibe Coding は「話すことで開発する」方法として理解できます。その核となる変化は：もう自分で一行一行コードを書いたり、構文を調べたり、バグを修正したりする必要はなく、自然言語で欲しいものを直接説明するだけです。例えば：
+
+「ログインページが必要です。携帯番号の入力フィールドと認証コードの入力フィールドを付けてください。」
+「ログイン成功後、トップページにリダイレクトし、右上隅にユーザー名を表示してください。」
+「シンプルなスネークゲームを作ってください。キーボードの方向キーで操作できるように。」
+
+大規模言語モデル（LLM）がこのような説明を自動的に実際に動作するコードに翻訳し、対応するページ、ロジック、データ構造を生成します。結果を見た後、自然言語で修正意見を伝えます。例えば「ボタンをもう少し大きく」「背景をダークカラーに」「スコアを記録してリーダーボードを表示」など。AI は引き続きあなたの要件に応じて実装を調整します。
+
+このモードでは、プログラミング言語を先に学んでからコードを書く必要はありません。主な精力を次のことに注ぎます：何を作るかを明確にする、結果を見て「どこが違うか」を判断する、新しい修正を提案する。AI はこれらの上位のアイデアを具体的な実装に落とし込み、機械的で反復的なコーディング作業を大幅に削減します。
+
+Vibe Coding の詳細についてはこちらを参照してください：[https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
+
+Karpathy の共有内容の詳細についてはこちらを参照してください：[https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
+
+### Vibe Coding の達人を装う方法
+
+実際、本格的な vibe coding の過程では、複雑なプロンプトをあまり使いません。開始時にプログラム全体に対して具体的で適度に複雑なプロンプトを提供する必要があるかもしれませんが、その後の各ステップでは、次のような種類のプロンプトだけが必要です：
+
+```
+"コードにバグがあります、修正してください。"
+"部分コードは不要です。修正後の完全なコードをください。"
+"あなたのコードにはまだ問題があります。"
+"もう一度修正して、修正後の完全なコードをください。"
+"さっきまで動いていたのに、なぜ今動かないのですか？"
+"私の意図を理解していないのですか？元のコードを変更しないでください。"
+"デバッグ機能を追加しないでください。"
+"私が依頼していないことはしないでください。"
+"私が実装を依頼した機能はどこですか？"
+"私の言葉がわからないのですか？"
+"関数を一つだけください。"
+"以前のコードを参照するように言ったはずです。"
+"不要なコメントを追加しないでください。"
+"元のコードの基本ロジックを変更しないでください。"
+"コードを修正してください。"
+"私のコードをベースに修正..."
+"変数名を変更しないでください！！！"
+"元の関数名を変更しないでください！"
+"私の変数を勝手に変更しないでください。"
+"追加機能を追加しないでください。"
+"フレームワークだけを生成するのではなく、完全なコードを生成してください。"
+```
+
+これは少し誇張されているように聞こえるかもしれませんが、実際には、これらが日常の作業で使用するプロンプトです。大規模言語モデルの**コンテキスト長の制限**のため、または**命令追従能力**があまり強くないため、モデルは対話の早い段階で議論された内容を忘れることがあります。vibe coding では、長いコンテキストのモデルを使用する傾向があり、命令追従能力の強いモデルを使用します。これら二つのランキングや指標で判断できます。
+
+または、トレーニングデータセットのスタイルにより、大規模モデルはそのトレーニングデータのスタイルで回答する傾向があります。例えば、一部の人は真面目に話し、一部の人は多くの修飾を加え、一部の大規模モデルはコードに多くのコメントや不要なモジュールを追加するのが好きです。
+
+## <span id="appendix-3">[付録 3：モデルコンテキスト](#appendix-nav)</span>
+
+モデルコンテキストは、AI の短期記憶として理解できます。これは、現在の一回の対話またはタスクにおいて、モデルが「見て」および「覚えて」いるすべてのテキストコンテンツを指し、以前に入力した質問、システムが提供した説明、関連資料などを含みます。
+
+コンテキストがあるからこそ、AI はあなたが前の内容に続いて質問していることを理解し、一ラウンド一ラウンド、途切れのない自然な対話を行うことができます。コンテキストがなければ、あなたの各文はモデルにとって全く新しい質問のように見え、以前に何を言ったかを知ることができず、対話を続けることはできません。
+
+各モデルには独自の有効コンテキスト長（context window）があります。この長さは通常 token（大まかに「単語の断片」の単位と理解できます）で測定され、現在の主流モデルはほぼ 32k～128k token です。コンテキストが長いほど、モデルが一度に「読める」内容が増えます。例えば：
+
+- 長めの論文やレポートを一度に読む
+- 同じ対話ラウンドで複数の資料やケースを参照する
+- モデルに以前の数ラウンドの複雑な議論の結論を覚えさせる
+
+入力内容がモデルのコンテキスト制限に近づくまたは超えると、次のような一般的な現象がよく発生します：
+
+- モデルが長いテキストの細部や重要情報を忘れ始める
+- 対話が進むにつれて、話題が当初の目標から徐々に逸れる
+- 同じ資料に対する異なる質問間で、参照内容に不一致が生じる
+
+これらの現象は、モデルが突然「バカになった」わけではなく、コンテキスト容量が使い切られたり使い切れに近づいた後に生じる自然な結果です。
+
+実際の使用では、コンテキストを可能な限り長くしたいと同時に、次の点も意識する必要があります：
+
+- コンテキストが長いほど、消費する計算リソースが増える
+- 対応する呼び出しコスト（費用）も増加する
+
+したがって、AI アプリケーションを設計する際には、モデルに十分な量を読ませることと、コストの制御・効率の向上との間でバランスを取る必要があります。例えば：
+
+- 本当に長期保存が必要な情報を要約してからモデルに渡す
+- 不要な詳細情報を、一度にコンテキストにそのまま入れ続けない
+- 外部ナレッジベースなどの方法を使い、「長期記憶」をシステムに任せ、モデルのコンテキストに無理に入れない
+
+## <span id="appendix-4">[付録 4：命令追従能力](#appendix-nav)</span>
+
+命令追従能力とは、モデルがあなたの命令を理解した後、正確かつ完全にあなたの要求通りに実行できるかどうかを指します。質問に答えるだけでなく、指定されたフォーマット、スタイル、手順でタスクを完了することも含みます。
+
+例えば、以下はすべてモデルに明確な要求がある命令です：
+
+- この記事を3つのポイントに要約する
+- 正式で礼儀正しい口調で返信メールを書く
+- この単語を英語に翻訳し、それぞれ例文を作る
+- 記事から著者、日時、主要イベントを抽出する
+
+命令追従能力の強いモデルは、通常次の特徴を備えています：
+
+- 要求された数量通りに出力する  
+  例えば3つのポイントに要約するよう依頼すれば、5つを出力することはありません。
+- 指定されたすべての要素をカバーする  
+  例えば著者、日時、イベントの抽出を依頼すれば、そのいずれも漏らしません。
+- 指定されたフォーマットとトーンを遵守する  
+  例えば正式なトーンを依頼すれば、あまり口語的な返信を出力しません。
+- 不要な追加拡張を行わない  
+  例えば翻訳と例文の作成だけを依頼すれば、無関係な説明を大量に出力しません。
+
+実際の応用では、強い命令追従能力は非常に重要です。理由は次のとおりです：
+
+- 安定性の向上：同じ命令を異なる時刻で複数回実行した場合、出力構造と動作パターンがより一貫し、ランダムな逸脱が起こりにくい
+- 再現性の向上：プロンプトを製品やプロセスに設定する場合、モデルがおおよそどのように応答するかを予測でき、テストと反復が容易
+- システム統合の容易さ：モデルの出力が期待されるフォーマットに合致すれば、バックエンドプログラム、ワークフロー、その他のツールとの自動接続が容易
+
+したがって、大規模言語モデルを選択・評価する際には、賢いか、知識カバレッジが広いかだけでなく、命令追従能力にも特に注意する必要があります。産業級アプリケーションにとって、安定して正確に命令を実行できることは、たまに驚くような回答を出すことよりもはるかに重要です。
+
+<RelatedArticlesSection
+  title="学びを続ける"
+  description="「ゲーム化体験」から出発し、ローカル開発とプロダクト実践への継続を推奨します。"
+  :items="relatedArticles"
+/>
diff --git a/docs/ja-jp/stage-1/appendix-a-product-thinking/images b/docs/ja-jp/stage-1/appendix-a-product-thinking/images
new file mode 120000
index 0000000..d1227cf
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-a-product-thinking/images
@@ -0,0 +1 @@
+../../../zh-cn/stage-1/appendix-a-product-thinking/images
\ No newline at end of file
diff --git a/docs/ja-jp/stage-1/appendix-a-product-thinking/index.md b/docs/ja-jp/stage-1/appendix-a-product-thinking/index.md
new file mode 100644
index 0000000..18c2837
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-a-product-thinking/index.md
@@ -0,0 +1,899 @@
+---
+title: 'プロダクト思考とソリューション設計'
+description: 'AIツールの構築から、アイデアの発想・判断・磨き上げができるAIアプリへの移行を学び、プロダクト思考の核心理念と実践方法を習得する。'
+---
+
+<script setup>
+const duration = '約 <strong>6 時間</strong>'
+</script>
+
+# プロダクト思考とソリューション設計
+
+## 本章のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['プロダクト思考', 'ニーズ分析', 'ソリューション設計', 'ユーザーインサイト']" coreOutput="1つの完成したプロダクト企画" expectedOutput="実現可能なプロダクト設計のアプローチ">
+
+前の章では、z.aiとローカルAI IDEで様々な小ツールを構築する方法を学びました。また、Traeを使って環境設定や依存関係のインストールなどのエンジニアリング問題を処理する方法も試し、ブラウザからローカルプロジェクトへアイデアを移す能力を身につけました。
+
+次に、私たちの関心を<strong>「作れるかどうか」</strong>から<strong>「何を作るべきか、作る価値があるか」</strong>へと進めます。
+
+この章では、以下の内容を体系的に扱います：
+- 「アイデア」とは何か、「良いアイデア」とはどういうものか
+- プロダクトの方向性が投資に値するかどうかを判断する方法
+- 反復可能なプロセスを使って、曖昧なインスピレーションを明確なアプリ企画に変える方法
+
+<strong>コア目標：</strong>ツールを構築できることから、本当に人が使って実際の価値を生み出すAIアプリを作れることにアップグレードする。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'アイデアの出所', description: '信頼できるプロダクトアイデアを見つける' },
+      { title: 'ソリューション分解', description: 'アイデアを実現可能なアプリにする' },
+      { title: '磨き上げと判断', description: '使えるものから使いやすいものへ' },
+      { title: 'AIによる拡張', description: 'AIを合理的に活用して価値を創造' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 学習内容
+
+全体的に、アプリを作るための基本知識を学びます：アイデアの出所 → アイデアをアプリにする方法 → 使えるアプリから使いやすいアプリへ → AIの活用 → ユーザーの獲得。
+
+1. アプリを作るにあたって、どこから来たアイデアが信頼できるか？
+2. アイデアがあれば、どうやって実現可能なアプリに分解するか？
+3. 作った後、どうやって「良いアプリ」に判断し磨き上げるか？
+4. どの段階で、どのように合理的にAIを活用して価値を拡大するか？
+5. アプリがあれば、0から最初のリアルユーザーをどう見つけるか？
+
+# 1. アプリを作るにあたって、どこから来たアイデアが信頼できるか
+
+多くの人がアプリを作るといえば、まず十分に印象的なクリエイティブなアイデアを思いつくことだと反応します。だから毎日ランキングをチェックし、レポートを読み、様々な人気プロダクトを研究し、他人の成功ストーリーに注目して、いつか自分も特別に違うアイデアに出会えることを願っています。
+
+しかし実際のところ、多くの人は本当のアイデアを持っておらず、単にアイデアがないことに焦っているだけです。また、最初から高いハードルを設定する人もいます：面白くなければ始めない、普通は失敗と同義だと思う。でも実際に少し進んでみると、長く安定して続くアプリの多くは、深夜に思いついたものではなく、具体的な生活シーンの中で、リアルな問題の周りに少しずつ育ったものだということに気づくでしょう。
+
+だから、この章が解決したいのはスタート地点の問題です：**どうすればアイデアを持てるのか？そのアイデアは本当に信頼できるのか？あなたが時間とエネルギーを投じて、それをリアルなアプリにする価値があるのか？**
+
+## 1.1 アイデアとは何か
+
+まず、最も基本的でありながらもよく見過ごされる問題から始めましょう：アイデアとは一体何か。
+
+日常会話で人々がよく言うアイデアは、多くの場合、非常に主観的な興奮です。道を歩いていて動画を見かけ、瞬間的にこの方向がすごくクールだと思い、「私も似たようなものを作れる」と心の中で思うかもしれません。あるいはパーティーで誰かが製品の使い勝手の悪さに文句を言い、あなたが「こういうのが自動的に全部やってくれるものがあればいいのに」と口を挟むかもしれません。この時、確かに曖昧な考えはありますが、実際に作れるものとはまだほど遠いです。
+
+ここでは、少し厳密な基準を設けましょう。あるアイデアが以下の条件の少なくともいくつかを満たす場合にのみ、それを「アイデア」と呼びます：
+
+第一に、**明確なユーザー層に向けている必要があります**。漠然と「全員」と言うのではなく、主に誰に使われるのかを明確に説明できる必要があります。大学生、新入社員、子育て中の親、それとも独立開発者、EC事業者、小規模企業のオーナー。異なる人は同じことに対して全く異なる関心を持っており、ターゲット層さえ決まっていなければ、その後のすべての判断が宙に浮いてしまいます。
+
+第二に、**具体的なシーンに根ざしている必要があります**。このアプリはユーザーがいつ使うのか、朝の通勤電車の中、仕事の合間、寝る前、週末の資料整理の時。ノートやタスク管理のような一見抽象的なツールであっても、よく観察すれば、高頻度で使われる部分は必ず特定のシーンと密接に結びついています。
+
+第三に、**ユーザーが明確なタスクを完了するのを助ける必要があります**。タスクは大きくなくても構いませんが、説明できる必要があります。一日のToDoリストを整理する、長い記事をいくつかの要点にまとめる、会議のための構造の明確な議事録を生成する、あるいは週末の都市散策のための実行可能なルートを生成するなど。タスクを具体的に説明できれば、後の機能設計と価値評価が容易になります。
+
+第四に、**現状よりも良い方法やツールを提供する必要があります**。ユーザーが元々どのようにこのことを完了していたのか、頭で覚える、紙に書く、Excel、スクリーンショットで保存、それとも異なるアプリ間を行き来するのか。あなたが提供できるのが、明らかに手間が省けて、安定して、快適な方法であれば、そのアイデアは真に価値を持ち始めます。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image1.png)
+
+上記の思考について、うまく整理できなくても大丈夫です。今はAIの時代です。上記の内容を完全なプロンプトに整理し、あなたのアイデア、ターゲットユーザー、使用シーンをまとめて書き込み、LLMに補完と洗練を任せることができます。モデルを常にオンラインのプロダクトパートナーとして扱い、繰り返し対話、質問、修正することで、曖昧な概念を具体的にすることができます。
+
+## 1.2 アイデアとユーザーニーズ：自己満足を避ける第一の防衛線
+
+多くの人が初めてアプリを作る時に最も陥りやすい罠は、自己満足です。自己満足とは、自分のアイデアに夢中になり、世界を変革する方向だと感じているのに、一般ユーザーに話すと反応が冷静で、礼儀正しく頷きながらも「いいですね」としか言わず、製品がリリースされてもダウンロードも長期利用もされないことです。
+
+この状況を避けるには、アイデアとユーザーニーズを分けて考える必要があります。
+
+まず**ユーザーニーズ**とは何かを話しましょう。比較的簡単な言葉で要約できます：具体的なシーンにおいて、**ユーザーが目標を達成するために、下げたい様々なコスト、または増やしたい様々な価値。** ここでのコストは、お金だけでなく、時間、労力、精神的負担、ミスのリスク、さらには社交的なプレッシャーも含まれます。
+
+このことを理解すると、**単なるかっこよさだけではニーズを構成できない**ことがわかります。多くのアイデアは確かに十分に斬新ですが、ユーザーが特定の目標においてより省力的に、より安心して、より自信を持てるようにしない限り、真に持続可能なアプリを支えることは困難です。
+
+アイデアとニーズの間には、よく見過ごされる溝があります。**アイデアはあなたの主観的判断を表し、データによる裏付けではありません。** ニーズは、ユーザーが実際に何を経験し、何に悩んでいるかを表します。
+
+アイデアを判断する際、簡単な区別方法があります。**真のニーズか偽のニーズか**を見ることです。真のニーズの明確な特徴は、あなたのアプリがなくても、ユーザーが積極的にこの問題を解決しようとしていることです。
+
+偽のニーズの典型的な状況はまさに逆です。あなたが積極的に提起しなければ、大多数の人はそれが問題であることに気づきません。
+
+だから、**自己満足を避ける第一の防衛線はユーザーニーズを理解することです。** 最初に、「自分以外に、このことで真剣に悩んでいる人は誰か」という一見簡単だが非常に重要な質問に答える必要があります。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png)
+
+## 1.3 良いアイデアが良い理由
+
+すべてのアイデアが同じ運命を辿るわけではありません。良いアイデアは、数日で粗いがプロセスが通るバージョンを作っても、自然に少数のリアルユーザーを引き付けます。悪いアイデアは、機能を詰め込み、広告にお金をかけ、様々なプラットフォームで宣伝しても、最終的に外力で一時的にデータを積み上げるだけで、すぐに静寂に帰します。
+
+この背後にある最も本質的な違いは、アイデア自体が重要な問題点に触れているかどうかです。
+
+**良いアイデアは、自然に成長を迎えます**：非常に質素な形態で登場しても、ユーザーの手元の具体的な小さな問題を解決できれば、ある程度の自然な成長を得ることができます。例えば、音声を素早くテキストに変換する小ツールは、最初はウェブページに数個のシンプルなボタンがあるだけかもしれませんが、認識品質が良ければ、多くの人がリンクを友人に転送するでしょう。
+
+**悪いアイデアは、最初から外力駆動に依存することになります**。外見が良くても、継続的にプッシュしなければならず、ユーザー獲得の努力を緩めると、使用データは急降下します。
+
+もちろん、上記の状況は絶対ではありません。例えば初期市場ではユーザーが価値に気づくまで一定の遅延がある場合や、競合がある場合は外観、操作の難易度、ブランド特性などを考慮する必要がありますが、これらはより深い内容であり、当面は考慮しません。
+
+選択は努力より重要です。
+
+## 1.4 良いアイデアの出所：4つの主要な出所と具体的な例
+
+多く人がアイデアを思いつくとき、机の前に座って天井を見つめ、いつかインスピレーションが突然降ってくるのを待つ姿を想像します。しかし現実の良いアイデアは、生活の中の小さな観察、コミュニティでの繰り返しの質問、インターネット上の山のような不満、そして既存のプロダクトから少しずつ選別されるものです。
+
+以下の4つの出所から、真剣に取り組めば、スタートできる方向を容易に見つけることができます。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png)
+
+### 自分の生活を愛する
+
+非常に素朴ですが効果的な原則があります：**生活に参加すればするほど、問題を発見しやすくなり、何が解決する価値があるかを判断する能力も高まります。** 参加感とは、画面越しに他人の生活を見るのではなく、自分で体験し、試し、失敗することです。
+
+例えば、猫を飼うのが好きなら、猫と一緒に過ごす一日は、100件の「猫の飼い方のコツ」を見るよりも情報量が多いです。**毎回の少し不快な体験は、潜在的なプロダクトの手がかりです。**
+
+猫を写真に撮ることについて考えてみましょう。多くの人が経験したことがあるでしょう：スマホをかざしても猫は絶対にカメラを見てくれない。下を向いて爪を舐めるか、別の隅を見つめている。だったら、スマホやタブレットの画面に自動で動く赤い点、羽、小さな虫のアニメーションを表示して、猫の視線を引きつける小ツールがあってもいいのでは。シャッターボタンを押すと、フロントカメラの近くで自動的に一周動いて、猫の視線をカメラの方向に「騙し」、ついでに連写して、その中からはっきりして見栄えの良いものを選ぶ。さらに一歩進めば、このアプリは各猫がどの色、どの移動軌跡に最も興味を持つかを記録し、次回は自動的にその猫の「専用」遊びモードを使って成功率を高めることができる。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image4.png)
+
+メイクやスキンケアを楽しむなら、家のキャビネットに並ぶ製品一つひとつの背後には、大量の試行錯誤と意思決定があります。スマートフォンのアルバムで毎回のメイクの写真を撮る習慣があるかもしれませんが、振り返る時に、その日どの口紅、どのアイシャドウを使ったかを少しずつ思い出す必要があります。これらの情報を体系的に記録して、自分だけのメイク図鑑にできるかどうか。さらにアプリに統計を取らせて、特定のメイクがどんな場面で最も使われているか、どの組み合わせが写真で最も良い表現になるかを把握できれば、次にメイクを選ぶ時にゼロから考える必要がなくなります。
+
+もう少し具体的に、多くの人が経験するシーンを考えてみましょう。朝の時間がとても急で、アルバムを開いて「前回の成功した通勤メイク」を探そうとしても、長い時間探した末にその時どの製品を使ったか思い出せない。だったら、メイクの写真を撮った後、スマートフォンに向かって「今日は面接メイク、01番のオレンジブラウンアイシャドウとローズベージュのリップを使った」とだけ言えば、アプリが自動的に認識して「メイクレシピ」を生成し、写真と結びつける機能があってもいい。次回は「面接」「オレンジブラウンアイシャドウ」「ローズベージュ」で検索するだけで、関連するすべてのメイクがワンタップで表示され、「今日は通勤に適した、5分で完成するメイクだけ見る」というレコメンドリストも自動生成される。毎朝節約できる数分は、非常に具体的な「解決された問題」です。
+
+City walkや各種のスロートラベルが好きなら、すでに様々なツールを使って体験を組み立てているかもしれません：地図アプリでルートを記録し、メモ帳に行きたいカフェをリストアップし、アルバムに沿道の写真と感想が散在している。では、ルート、チェックインスポット、写真、テキストを一つにして、タイムラインとストーリー性のあるウォーキングログにできるアプリは作れないか。さらに、そのルートをワンタップで友人にシェアし、同じ都市で違うバージョンを歩けるようにする。
+
+さらに日常的な小さなディテールを掘り下げてみましょう。多くの人がcity walkの時に、「その角がとても美しいと思ったのに、家に帰って地図で全く見つけられない」という挫折感を経験しています。超軽量な機能を作れないか。歩いていて感覚のある角に来たら、イヤホンのボタンを長押しして、「ここにマーク、デート散歩に適した道」と言えば、アプリが瞬時に現在地に音声付きのマークポイントを落とし、時間、天気、騒音レベルを自動記録する。後で自分や友人がこの都市の地図を開くと、「通行者実測の雰囲気スポット」が見える。一人でぼーっとするのに適した場所、夜景を見るのに適した場所、友達と歩きながら話すのに適した場所。本来「歩き過ぎて忘れる」小さな角が、このように徐々に質感のある都市体験データベースに育っていく。
+
+これらの例が説明したいのは一つのことだけです：**自分の生活を愛する必要がある。生活が最高のアイデア出所です。** 毎日遭遇する困惑、その場で思いついた応急処置、少し面倒だけど我慢してきた場所。これらに少し多く目を向け、小さなツールで改善できるかどうかを考えてみれば、すべて未来のプロダクトの原型になり得ます。
+
+### 自分が持つユーザー資産から発掘する
+
+ユーザー資産とは、簡単に言えば、あなたがすでにリーチできる人々のことです。読者、運営するコミュニティ、会社の同僚グループ、長期参加している趣味コミュニティなどです。**一部の人々が日常何を話し、何に悩み、何を期待しているかを安定して聞けるチャネルがあれば**、ゼロから始める人よりも大きなアドバンテージがあります。
+
+よくある例を挙げます。あなたがデザイナーコミュニティの主催者であれば、毎日グループで見えるコンテンツは、実は非常に貴重なニーズプールです。誰かがクライアントが常に修正を繰り返すと文句を言い、誰かが特定の素材サイトの課金方式に不満を持ち、誰かが異なるサイズ間の調整が時間の無駄だと感じている。各不満の背後には、潜在的なプロダクトの手がかりが隠されています。
+
+あなたが試験対策コミュニティにいる場合、グループには長期的に似たような話題が溢れているかもしれません。今日の調子が悪い、計画がまた延期された、どの資料を見るのがより効率的か、どうすれば継続的にチェックインできるか。想像で考える必要はなく、しばらく観察して、皆が繰り返し言及する共通の難題を整理すれば、学習系アプリの初期機能の方向性を大まかに描くことができます。
+
+### 公開の場からニーズを発掘する
+
+自分のコミュニティや読者層がなくても心配する必要はありません。インターネット上では毎日、無数の人が様々なプラットフォームで自分の困難と不満を語っています。公開の場でのこれらの声は、それ自体が巨大な宝庫です。
+
+あなたの興味のある業界に関連するいくつかのプラットフォームを選び、定期的に感情の色のある重要ワードを検索できます。例えば、**「面倒」「おすすめある？」「どう解決する」「本当に不便」「もっといい方法ない？」** など。そして忍耐強く投稿とコメントを見て、二種類の情報に注目してください。
+
+一つ目は、ある問題が長期的に、繰り返し言及されていること。就職関連のセクションでは、定期的に履歴書の書き方、自己紹介の準備、面接結果のフォローアップについて質問がある。育児グループでは、離乳食の組み合わせ、生活リズムの調整、親子コミュニケーションの困惑が繰り返し現れる。小規模EC事業者のコミュニティでは、在庫管理、キャッシュフロー、スタッフのシフトが常に心配されている。これらの長期に存在する繰り返しの問題は、業界が繰り返し露呈しているシステム的なペインポイントです。
+
+もう一つは、特定のシーンでユーザーが非常に不器用な方法で無理やりやっていること。例えば、すべてのToDoを紙に書いてから写真を撮ってクラウドにアップロードする人。異なるアプリ間でコピーペーストを繰り返して、あるフォーマットから別のフォーマットに変換する人。異なるチャネルのデータを手動で一つの表にまとめる人。これらの場所は、少し注意深く観察すれば、プロセス化・ツール化できる多くの小さな切り口が見つかります。
+
+### 巨人の肩の上に立つ
+
+よく見過ごされるもう一つのアイデアの出所は、既存のプロダクトとプロジェクトです。世界にはすでに多くの素晴らしい人々が、私たちのために多くの探索の道を歩んでくれました。あなたは毎回白紙から始める必要はなく、他人が半分まで進めたところに立って、もう一歩進むことができます。
+
+**ハッカソン、プロダクトイノベーションコンテスト、スタートアップ Demo Day**のような場では、多くの面白い小さな作品が現れます。それらの多くは二つの特徴を持っています：時間が厳しく、リソースが限られている。これはあなたが今作ろうとしている小アプリと非常によく似ています。だから、これらの受賞作品を見るとき、二つの問いを多くしてみると良いでしょう。もしこのものがより狭いセグメントだけにサービスしたら、もっと実現しやすくなるか。機能を半分、さらには三分の二削って、最もコアな部分だけ残したら、むしろもっと明確になるか。
+
+同様に、**プロダクトランキング、オープンソースプロジェクト、ツールコレクションサイト**にリストされているツールも、思考の出発点になります。興味のあるものをいくつか選び、一つ一つ分解してみてください。それは誰のどんな問題を解決しているのか、現在の形態にはどのような明らかな不足があるのか、別のシーンや別の国に移行したらどう変わるか。コピーするのではなく、この分解練習を通じて、問題とソリューションの間の関係への理解を訓練するのです。
+
+長期間これらの4つの道から素材を掘り起こし続けると、アイデアは突然頭の中に現れる奇跡ではなく、生活、他人、情報世界との長期的な相互作用から自然に育つ副産物であることがわかります。
+
+## 1.5 良いアイデアを一言で要約する方法：少ないほど多いという芸術
+
+アイデアがどこから来るかを大まかに知った後、次の重要な練習は、**一言で明確に説明すること**です。この練習は簡単そうに聞こえますが、実際にはかなり残酷です。なぜなら、**あなたのアイデアが本当に明確なコアをつかんでいるかという事実に直面することになるから**です。
+
+人を記憶に留められるのは、相手が全面的に完璧だからということは少なく、多くの場合、ある明確な特徴があるからです。プロダクトも同じです。**十数個の機能を無理に覚えさせるより、素朴だが明確な印象を与える方が良い**です。
+
+一言を書く際のよくある間違いは、過度に広範囲であることです。例えば：「ユーザーの英語力を向上させるアプリ」。一見間違っていませんが、深く掘り下げると、この文はほとんど何も言っていないことがわかります。
+
+相対的に良い表現はもっと具体的です。例えば：「毎日10分の通勤時間を利用して、1ヶ月で100のコア単語を覚える暗記アプリ」。ここでは少なくとも3つのことが説明されています：使用コストは管理可能で、毎日10分だけ；予想結果は可視的で、1ヶ月で100の新単語；シーンは明確で、主に通勤中。
+
+この練習は、**誰を助けるのか、どのようなシーンであなたを思い出してほしいのか、どの程度の期間でどのような結果を達成したいのか**という3つの質問に繰り返し答えることです。
+
+## 1.6 AIを使って思考を発散させ、差別化を見つける
+
+過去にアイデアを思いつくのは、ほとんど自分でゆっくり考えるしかありませんでした。今はAIがあり、いつでも召喚できるブレーンストーミングパートナーが増えました。
+
+ある方向に行き詰まったとき、現在のアイデアをできるだけ明確にAIに説明し、いくつかのことをお願いしてみましょう。例えば、**同じコアタスクに基づいて、20種類の異なるユーザーグループをリストアップ**したり、学生、フリーランサー、子育て中の親、小規模事業者などの異なる角度から、このアイデアの可能な使用方法を再記述したりします。
+
+**一般的なアイデアは必ずしも無効なアイデアではありません。** 単語暗記、ToDoリスト、家計簿、習慣トラッキングのような一見一般的な方向は、背後にある問題が実際に普遍的に存在するからこそ、継続的に作られます。この場合、**誰が特定の小グループをよりよく理解し、細部でより彼らの生活に寄り添えるか**が競争になります。
+
+AIの価値は、あなたに代わって決定を下すことではなく、本来非常に狭い道を、より完全な地図に変えることにあります。
+
+## まとめ
+
+いくつかの簡単な次元を使って、アイデアがすでに十分明確かどうかを検査する方法を学びました。自分がかっこいいと思うことと、ユーザーが本当に必要としていることの違いを区別する必要があります。良いアイデアが良い理由は、最初からあるペインポイントに立っているからです。自分の生活、ユーザー資産、公開情報、既存プロダクトから継続的に手がかりを掘り起こすことを学びました。一言でアイデアを説明する練習も必要です。AIを思考を拡張するパートナーとして使い、判断を代替するツールとして使わないことも学びました。
+
+手元に1〜3個のそのようなアイデアがあり、**一言で説明できる**（誰に使われるのか、どのシーンで、おおよそどんな結果をもたらすのか）時、新アイデアを考え続ける衝動を止めて、次のステップに注意を向けることができます：その中の一つを、実際に作れて、実際のユーザーに使えるアプリに分解する方法。
+
+アイデアが少し微妙でも大丈夫。最初は微妙なのが正解です。**完成は常に完璧より重要です。** 始めなければ終わりはありません。
+
+## 📚 課題
+
+上記の内容に基づいて、以下の課題を完了してください：
+
+1. 自分の興味に合わせて、AIを使っていくつかのアプリの「アイデア」を生成する
+2. AIに自分のアイデアに基づいて、それが真のニーズか偽のニーズかを評価させ、ユーザーニーズインサイトと提案を得る
+3. 4つの主要な出所から1〜2つの出所を選んで「アイデア」を得るか、AIにいくつかのアプリの「アイデア」を生成させる
+4. 上記のすべての Idea から、最も好きな3つのアイデアを選び、情報量の豊富な一言でそのアイデアを要約してみる
+
+# 2. アイデアがあれば、どうやって実現可能なアプリに分解するか
+
+前の章で解決したのはスタート地点の問題でした：一体どのようなアイデアが真剣に扱う価値があるのか。
+
+本当の挑戦はここから始まります。多くの人がこのステップでつまずきます：頭の中には一見完全な青写真があるのに、いざ手を動かすと複雑すぎて手がつけられません。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image5.png)
+
+考えないで！今がその時です！この章では、アイデアから実現可能なバージョンへの分解方法を学びます。ゼロからあるものを作るのは天才に依存するのではなく、**発散、収束、分解、詳細化、参考、質問**という一連の反復練習可能な具体的なアクションに依存します。
+
+## 2.1 アイデアからソリューションへ：ダブルダイヤモンドモデルの発散と収束
+
+ページを描いてアイデアを出すことを学んだ後、すぐにもう一つの一般的な問題に直面するでしょう：アイデアがどんどん増えてくること。ホワイトボードに様々なシーンと機能を書き連ね、紙には異なるページバージョンが描かれ、一見達成感がありますが、実際にやろうとすると逆に手がつけられなくなる。なぜなら、すべてが重要に見え、どれも試す価値があるように思えるから。
+
+この時、非常に古典的で分かりやすい思考フレームワークを使う必要があります：**ダブルダイヤモンドモデル**。このモデルの意味は実はとても素朴で、人生の多くの段階で、最初に発散してから収束する必要があり、最初からすべてを一度にやり切ろうとしてはいけないということです。
+
+### ダブルダイヤモンドモデルとは
+
+ダブルダイヤモンドモデルは、英国デザイン評議会が提案したイノベーションとデザインプロセスフレームワークです。プロセス全体を連続する二つの菱形（「ダブルダイヤ」）に例えます。最初のダイヤは「問題の発見」から「明確な問題の定義」へ、まず広く発散し、十分に調査・理解してから、真に解決すべきコア問題を収束・整理することを強調します。2番目のダイヤは「解決策の発展」から「最終的なソリューションの納品」へ、可能な解決アプローチを大胆に発散・探索・反復し、その後収束・選別・磨き上げて最適で実行可能な案を出すことを強調します。ダブルダイヤモンドモデルは、問題とソリューションの両方の段階で「発散—収束」のプロセスを経ることを強調し、最初から解決策に飛びつくことを避け、イノベーションの品質と成功率を向上させます。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image6.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image7.png)
+
+### 第一ダイヤ：問題を理解し、単点から全体像への発散と収束
+
+**ダブルダイヤモンドモデルでは、第一ダイヤは問題そのものに関するものです。** まず曖昧な認識から始め、徐々により多くの関連状況と可能性を発散させ、その後一度収束して、真に解決する価値のある問題点を見つけます。
+
+アプリに対応させると、次のようなことがあります。
+
+**発散段階では、ユーザーが直面する可能性のある使用シーン、遭遇する可能性のある障害、期待する結果をできるだけ多く列挙します。** 急いで判断せず、頭の中の関連するものをすべてまず並べます。
+
+**収束段階では、最も一般的で最も痛い1〜2つの状況だけを選ぶよう自分に強います。** 例えば、多数のシーンから、最も多く言及されたのは、非常に長い作業ドキュメントを受け取った時に、このドキュメントが何を言いたいのか、主な結論は何かをまず把握したいということだと発見したとします。それなら、第一版のアプリの目標をこう定めることができます：ユーザーが5分以内に長文のコア意味を理解できるようにする。
+
+第一ダイヤの終了時には、開始時よりも明確になっているべきです：**あなたが真に解決する必要のある問題は何か、他の周辺問題と比べて、なぜ優先度が高いのか。**
+
+### 第二ダイヤ：ソリューションを設計する、粗いアイデアから実行可能な案へ
+
+**ダブルダイヤモンドの第二部分は、ソリューションの誕生に関するものです。** どの問題を解決するかを大体把握した後、次にするのは、その問題に対してできるだけ多くの解決方法を考え、その中から第一版に最も適したものを選び出すことです。
+
+発散段階では、絶えずアイデアを追加し続けることを意味します。様々な機能、より細かいシーン、様々な可能なプレイ方法をブレインストーミングできます。
+
+収束段階では、シンプルだが非常に実用的な評価ツールを取り出します：ユーザー価値 × 実現可能性 × 時間コスト。各アイデアにこの3つの次元で大まかなスコアをつけ、例えば1〜5点とし、総合スコアが高く、時間コストが管理可能なアイデアをMVP、つまり最小実行可能バージョンの構成要素として優先的に選びます。
+
+このプロセスで絶えず自分に思い出させるべきことが一つあります：**第一版の目標は完璧なアプリを作ることではなく、実際に存在し、誰かが本当に使えるバージョンを作ることです。** すべてを網羅する必要はなく、一つの具体的なタスクで十分にまともに機能すればいいのです。
+
+ダブルダイヤモンドモデルを使って思考を整理することに慣れると、多くの元々絡み合っていた状況がずっとスッキリします。どの段階で可能な限り多く考え、どの段階で断固として一部の可能性を削るべきかが分かります。
+
+## 2.2 実行可能なステップを得る：抽象から具体へ
+
+発散した後、アイデアを得ることは簡単ですが、実行可能なステップを得ることは非常に困難です。「効率を向上させるツールを作りたい」と言っても、抽象的すぎて手がつけられません。ここに必要な能力は**分解と詳細化**です。大きな抽象的な目標を、すぐに手を動かせる最小の実行可能項目に分解して詳細化することです。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image8.png)
+
+### 生活の例から始める：「ハンバーガーが食べたい」とは一体何か
+
+「ハンバーガーが食べたい」という文は一見複雑ではありませんが、真剣に分解すると、多くの具体的な分岐が隠されています。
+
+まずは**動機と内面のコアニーズ**。本当にハンバーガーが食べたいのか、味が恋しいのか、素早く食事を済ませたいのか、友達と集まりたいのか、それともいい写真を見て食いつきたのか。一見無関係に見えますが、後の選択に直接影響します。
+
+次に**行動の範囲**。どんなハンバーガーを食べたいか、何時に食べたいか、ハンバーガーだけか、セット全体が欲しいか。
+
+さらに**どうやって実現するか**。店に行くのか、デリバリーか、自分で作るか。それぞれの選択に対応する行動ルートは全く異なります。
+
+分解をすべて明確にした後、曖昧な「ハンバーガーが食べたい」という言葉は、具体的なアクションステップの列になります。
+
+**分解と詳細化の意義はここにあります：聞こえは大きくて抽象的な願いを、具体的に実行可能なリストへと導くことです。**
+
+### アプリの例：ドキュメント処理効率の向上をどこから始めるか
+
+もう少し複雑で段階的な例を見てみましょう。ある正当な願いがあると仮定します：「ドキュメント処理効率を向上させるアプリを作りたい」。この方向は正しいですが、この半分の文で止まってしまうと、どこから手をつけていいかわかりません。
+
+ここでは分解と詳細化の方法を使って、一歩ずつ具体的にしていきます。時間の都合上、ここでは2層の分解方法のみを示します。
+
+#### 第一層の分解と詳細化
+
+**まず、「ドキュメント」とは何かを定義する必要があります。** ドキュメント自体は非常に広い概念で、表、Wordレポート、PDFファイル、Markdownテキスト、TXTメモ、スキャンされた画像ドキュメント、数式を埋め込んだ学術論文などが含まれます。
+
+**次に、「処理」とは何かを定義する必要があります。** 50ページのレポートを5ページの読みやすい要約にするのか、様々な形式のWord、PDF、Markdownを統一テンプレートにするのか、翻訳、書き換え、推敲なのか。
+
+**「アプリ」についても定義する必要があります。** 自分専用の小ツールなのか、将来ユーザーがいるものなのか、Webアプリなのか、モバイルアプリなのか、既存システムに埋め込まれる小機能なのか。
+
+**「効率」も具体的に分解する必要があります。** 速度だけか、速度と品質とエラー率と理解の難易度を含むのか。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image9.png)
+
+#### 第二層の分解と詳細化
+
+第一層の分解結果が「AIを使ってPDFドキュメントをテキストに変換する速度と品質を向上させるWebアプリを作りたい」という文になったとします。
+
+しかし、この記述でも多くの重要な情報がまだ曖昧です。「どのAIを使うか」「どの程度まで向上させるか」「どの使用シーンに対応するか」「どのようなユーザーを対象とするか」などです。
+
+さらに分解を続け、この文をより細かい粒度の設計決定と技術案に変える必要があります。
+
+最終的に、以下のような明確な記述になります：
+
+> ユーザーにブラウザベースの小ツールを提供し、構造が比較的明確でテキスト主体のPDFレポートを優先サポートし、適応した解析プロセスと軽量AIクレンジングを通じて、約10秒以内に段落構造が明確でタイトル階層が基本的に保持される編集可能なテキストを出力し、ログインなしで使用可能にする。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image10.png)
+
+抽象から具体への移行は、「ドキュメント処理効率を向上させるアプリを作りたい」という大きな願望を、誰でも（あるいはAIでも）すぐに理解して実行を開始できるタスクリストに分解することです。
+
+## 2.3 ホワイトボードでアプリを構想する：最初のアプリを描く
+
+多くの人がアプリを作り始めるとき、最初に思い浮かぶのはコード、バックエンド、データベース、API、フレームワークです。しかし、最初にすべての注意を技術に向けると、最も重要なものを見落とす危険があります：**ユーザーがここで一体何をするのか。**
+
+最も簡単でよく見過ごされる方法は、まず描くことです。ホワイトボード、白紙、メモ帳で構いません。ユーザーが入ってから出るまでの全経路を、数枚の簡単なページスケッチで描き出し、エディタを開いてコードを書くのではなく先に構想します。
+
+アプリ全体をまず3種類のページに分けることができます：入口ページ、操作ページ、結果ページ。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image11.png)
+
+### 入口ページ：ユーザーがどこから入り、最初に何を見るか
+
+入口ページは、ユーザーとアプリが初めて出会う場所です。多くの人が入口を設計する時、まず汎用的なトップページを思い浮かべ、機能ボタン、モジュール入口、広告枠を詰め込み、これで十分な量と素晴らしさがあるように見えます。しかし、このページを紙に描いて壁に貼り、初めて来た人のふりをすると、突然非常に現実的な問題に気づくでしょう：**「結局どこを押せばいいんだ？」**
+
+入口ページを描く時、まず自分をガイドとして見なすことができます。いくつかの非常に具体的な質問をします：ユーザーはどのような方法で入ってくるのか、シェアリンクのクリックか、アプリストアでの検索か、ウェブページでのQRコードスキャンか。異なるソースはユーザーの予想を全く異なるものにします。
+
+### 操作ページ：ユーザーが何を入力、クリック、選択するか
+
+ユーザーが前に進むことを決めた後、次は操作ページに落ちます。つまりアプリの作業領域です。ここがユーザーと本当にインタラクションする場所であり、最も過剰に複雑に設計されやすい場所でもあります。
+
+操作ページを描く時、**ユーザーに一つのことだけさせる**という非常に効果的な練習があります。
+
+紙の上で操作ページを構想する利点は、非常に低コストで異なるバージョンを試せることです。
+
+### 結果ページ：ユーザーが何を得て、どう表示するか
+
+結果ページでは、**ユーザーが最も関心するコア情報を最も目立つ位置に配置**する必要があります。
+
+入口ページ、操作ページ、結果ページをすべて描いた後、矢印で繋ぎ、**ユーザーが初めて入ってから終了までの一歩一歩を**描きます。
+
+この章のコアは一言です：まずユーザーの操作プロセスを描き、その後技術実装を考える。コードが書けなくても、**数枚の簡単なスケッチでアイデアを目に見えるアプリの原型に変える**ことができます。
+
+## 2.4 他人のアプリを参考にする：賢く「宿題を写す」
+
+多くの人が最初のアプリを作る時、一種の心理的負担があります：ゼロから始めなければならず、ページ構造、インタラクション方法、ビジュアルレイアウトはすべて完全にオリジナルでなければならず、そうして初めてプロダクトを作っていると言えると。現実は、この原則を守ると、無関係な場所で大量のエネルギーを無駄にすることになります。
+
+アプリデザインにおいて、より効率的で成熟した態度があります：**賢く宿題を写す**です。単なる模倣ではなく、他人がすでに検証した良い解決策を選択的に借用し、あなたのユニークな価値にエネルギーを残すことです。
+
+インターネット上にはアプリのインターフェースのスクリーンショットを収集するウェブサイトがたくさんあり、アプリストアの詳細ページも大量にあります。これらは巨大な参考図鑑です。自分の方向に近いアプリをいくつか選び、サンプルのように一ページ一ページ見てください。
+
+重点的に観察するのは配色の美しさではなく、いくつかの重要なエリアでどのように処理しているかです：
+
+- ナビゲーションバーの設計、下部か上部か、固定のコア入口か一つのメインボタンだけか
+- フォームの構成、一度に同じページで全て入力するか、複数の小ステップに分けるか
+- 結果表示時に、最も重要な情報が最も目立つ位置に置かれているか、次要情報はどのように整理されているか
+- 新ユーザーが初めて来た時、使用方法を説明する短いガイドフローがあるか
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image12.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image13.png)
+
+具体的には以下のウェブサイトを参考にできます：
+
+- [https://www.uisources.com/](https://www.uisources.com/)
+- [https://screenlane.com/](https://screenlane.com/)
+- [https://pagecollective.com/](https://pagecollective.com/)
+- [https://patttterns.net/](https://patttterns.net/)
+- [https://mobbin.com/](https://mobbin.com/)
+- [https://refero.design/](https://refero.design/)
+- [https://scrnshts.club/](https://scrnshts.club/)
+- [https://godly.website](https://godly.website)
+
+## 2.5 すべてが準備できてからユーザーニーズを調査するのを待たない
+
+多くの人がユーザー主導のプロダクトを作ると言いながら、実際には最初に自分の心の中の完全なバージョンを作ってから他人に見せる習慣があります。**これは一見体面が良いですが、プロダクトの観点からは非常に危険な習慣です。**
+
+解決策：**描きながら聞く、作りながら聞く、作ってから聞くのではない。**
+
+### 描きながら聞く：紙の段階からフィードバックを収集する
+
+ホワイトボードや紙に入口ページ、操作ページ、結果ページを描いた時点で、すでにユーザーと対話する基盤があります。
+
+### 作りながら聞く：半完成品の段階で人を招いて試用する
+
+基本プロセスが通る半完成品バージョンがあれば、一人で黙って使う理由はありません。**定義した最小タスクを完了できれば、すでにリアルユーザーの試用を招待する条件を備えています。**
+
+**このプロセスであなたがすべきは弁解ではなく、観察です。**
+
+### 粗雑さを恐れない
+
+早い段階で問題を露呈させることは、コストが最も低いです。
+
+## 📚 課題
+
+上記の内容に基づいて、以下の課題を完了してください：
+
+1. 任意のLLMを使用して、前のアイデアについてAIにダブルダイヤモンドモデルを参考に発散結果を出させ、あなたがその発散結果から実行可能なソリューションセットを選ぶ必要があります。
+2. 以前に思いついたアイデアについて、分解と詳細化の方法を使用して、より具体的な実行可能な内容を得てください。例：「ユーザーにウェブツールを提供し、20ページ以下のテキスト主体PDFをアップロードすると、10秒以内に段落構造が明確でタイトル階層が保持された編集可能テキストを得られ、ワンタップコピーと.txtダウンロードをサポートする。」
+3. 詳細化したアイデアに基づいて、ホワイトボードでアプリを描いてみてください。アプリは2つの部分に注目する必要があります：UIはどのように設計すべきか、どのような機能があるべきか、各機能はどこにあるか。
+
+# 3. 作った後、どうやって「良いアプリ」に判断し磨き上げるか
+
+アプリが作られて実際の世界で人に使われるようになると、全く別の段階に入ります。これまでの議論はすべてアイデアとデザインの段階に留まっていましたが、今、プロダクトは初めて実際の使用シーンで検証されます。ユーザーが間違えた場所、躊躇した場所、立ち止まった場所が見えると同時に、どのステップが驚くほどスムーズか、あるいはあるコーナーで予想外に長く留まったかも見えるでしょう。これらのディテールは、頭の中のプロダクトへの様々な想像よりもはるかに正直です。
+
+この章で解決するコア問題は：アプリがすでに作られ、初期ユーザーが使用している時、良いアプリからどれくらい離れているか、そしてどのように実際の使用情報を利用して少しずつ磨き上げるか。
+
+## 3.1 良いアプリとは：4つのコア特徴
+
+アプリが良いかどうかを判断するには、自分がどれだけ好きか、ダウンロード数や一両日の使用回数だけを見るのではなく、より基礎的で安定した特徴があるかどうかを見る必要があります。簡単に言えば、以下の特徴を参考にできます：
+
+### 良いアプリは具体的な価値をもたらす
+
+良いアプリの最も直接的な特徴は、あるシーンでユーザーに実用的なメリットをもたらすことです。このメリットは大きくなくても、高度な言葉でパッケージングする必要もありませんが、具体的に説明できる必要があります：**ユーザーに何を少なくさせたか、どれだけの時間を節約したか、あるいは何をミスしにくくしたか。**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image14.png)
+
+例えば、簡単な会議議事録ツールが、録音をアップロードするか会議中に直接録音するだけで、終了後に自動的に構造化された会議議事録を生成し、ToDo、責任者、締め切りをリストで明確にするなら、それはタイピングの時間だけでなく、記録、整理、選別、フォーマット出力の全プロセスの精神的労力を節約します。
+
+### ユーザーが直感的に使える、マニュアルなしでわかる
+
+もう一つの過小評価されがちですが極めて重要な特徴は、**良いアプリは通常あまり説明を必要としない**ことです。ユーザーが初めて開いた時、直感で大体どこから始めればいいか分かり、何をクリックすると何が起きるかが分かります。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image15.png)
+
+**良い使い勝手は、本質的にユーザーコストに対するプロダクトの尊重です。** あなたは一つのことを認めているのです：誰にもあなたのアプリを研究する義務はない。
+
+### 高頻度または重要なシーンで自然にあなたを思い出す
+
+良いアプリはしばしば安定した使用リズムを持っています。高頻度であるか、重要であるか。**高頻度とはユーザーの日常に溶け込んでいること**。重要とは毎日使わなくても、特定のシーンに遭遇するとユーザーが真っ先にあなたを思い出すこと。
+
+**本当に警戒すべきは、ユーザーが高頻度にも使わず、重要シーンでも積極的に思い出さない**ことです。
+
+### 利他心
+
+本当に良いアプリは、比較的素朴な利他心を持っています。確かにどう生き残るかを考え、合理的な課金方法も設定しますが、デザインのパスと体験において、優先順位は常に：**ユーザーがこのことをよりスムーズに完了できるようにするか、追加の障害を作るために余計なステップを加えるか。**
+
+もう一つ重要なことがあります：**良いアプリは必ずしも大きなアプリである必要はありません。** 小さくても、ある人々、あるシーン、あるタスクに特化していれば、その小さな部分で十分に優れています。
+
+## 3.2 ニーズインサイト：マズローの欲求階層理論
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image16.png)
+
+アプリを作る前に、多くの人は機能レベルの思考に直接飛びつきます。しかし、アプリが生き残れるかどうかを決定するのは、あなたが人間のどのレベルの欲求に触れているか、そしてどれくらい正確に触れているかです。
+
+マズローの欲求階層理論は、5つの層に分けられます：生理的欲求、安全の欲求、所属と愛の欲求、尊重の欲求、自己実現の欲求。
+
+### 生理的・生存に関連するニーズ
+
+この層は最も基礎的で、食べる、寝る、生存状態そのものに直接関係します。フードデリバリー、食材購入、ランナーサービス、予約、配車などの典型的な配送・移動サービスは、本質的にユーザーがより低い時間コストで最も基本的な問題を解決するのを助けています。
+
+あなたのアプリがこの層で頑張る場合、一つの特徴があります：**ユーザーは安定、信頼性、予測可能性に特に敏感**です。
+
+### 安全感と確実性のニーズ
+
+安全のニーズには、物理的な安全だけでなく、経済的、情報的、心理的な安全感も含まれます。
+
+多くのツール型アプリは、実際には主にこの安全の層で機能しています。家計簿、資産管理、保険アシスタント、契約テンプレートツール、パスワードマネージャー、バックアップツール、プライバシー保護ツールなど。
+
+この種のプロダクトをデザインする時、もう一つ聞いてみてください：**あなたは一体ユーザーのどの種類のリスクを下げているのか、お金の、時間の、関係の、それともコンプライアンスと法務の。**
+
+### 帰属感、つながり、認められること
+
+さらに上の層は、所属と愛のニーズです。簡単に言えば、一人になりたくない、ある人たちとつながりたいということです。この層は、ソーシャル、コミュニティ、趣味グループアプリの本拠地です。
+
+もしあなたのアプリがこの層に立とうとするなら、コンテンツだけでは不十分です。考えるべきは：**ユーザーはなぜここを「仲間がいる場所」だと思うのか、ここに痕跡を残し、他人と軽くてもリアルなインタラクションを起こしたいと思うか。** そうでなければ、あなたが作っているのは単方向の放送ツールです。
+
+### 尊重、自己価値、達成感
+
+さらに上の層は、尊重と自尊のニーズです。人は受け入れられるだけでなく、ある段階で意識し始めます：私はここでまともな人間なのか、見られ、認められているのか、やったことが誰かに知られているのか。
+
+大量のチェックイン、バッジ、ランキング、称号、達成システムが、実はこの層で機能しています。
+
+この層では、重要はインセンティブシステムを作ったかどうかではなく：**あなたのアプリがユーザーに蓄積できるステージを提供しているか、初心者から熟練者への変化を明確に見えるようにしているか**です。
+
+### 自己実現と自己超越
+
+ピラミッドの最上層は、どのような人間になりたいか、そして自分の一部を貢献したいかを指します。これは非常に抽象的に聞こえますが、具体的なシーンに落とすと、非常に実践的な表現があります。
+
+例えばクリエイティブツール：執筆、絵画、音楽制作、ビデオ編集、プログラミングプロジェクト管理。表面上は技術的能力を提供していますが、背後にあるのはユーザーの何か自分のものを創造したいという渇望です。
+
+アプリが真にこの層に触れた時、非常に強い粘性を持つことが多いです：**インターフェースが最も美しくなくても、機能が最も完全でなくても、ユーザーはここに留まります。なぜならそれは、私はどんな人間か、どんなことをしているかというより深いつながりを確立しているからです。**
+
+実際のデザインでは、このように自己チェックできます：
+
+- まず自分に聞く：私のアプリが最も主要に、最もコアで満たしているのはどの層のニーズか、一つだけ選ぶ
+- 次に聞く：このコア層の上で、自然に一つ上の層に拡張する機会があるか、無理に概念を貼り付けるのではないか
+- 最後に、自分のターゲット層より下の層で、明らかな欠点がないか、ユーザーの足を引っ張っていないか
+
+## 3.3 ユーザータイプ別：CエンドアプリとBエンドアプリの違い
+
+アプリを作った後、もう一つ重要なことに気づくでしょう：一般個人ユーザーと企業・機関ユーザーに向き合うのは、全く異なるゲームルールです。どちらもユーザーと呼ばれますが、関心事は全く異なります。
+
+- **Cエンド（Consumer End）**：消費者側。一般個人ユーザーが対象。WeChat、Douyin、Meituan など。
+- **Bエンド（Business End）**：企業側。企業、機関、組織ユーザーが対象。DingTalk、財務ソフトウェア、POSシステムなど。
+
+### Cエンドアプリ：一般個人の生活、感情、習慣に向け
+
+Cエンドアプリは個人ユーザーに向けており、各人の日常生活に組み込まれています。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image17.png)
+
+これらのアプリは種類が異なりますが、いくつかの共通の関心事があります。
+
+**第一に、ユーザー成長。** つまり、より多くの人に初めてアプリを試させる方法。
+
+**第二に、リテンションと再訪。** 人が来ただけではなく、留まりたいか、戻りたいか。
+
+**第三に、コンバージョンと課金。** ユーザーが課金する理由は、無料版をひどくしたからではなく、あなたから一部の価値を得た後、有料機能がより高いレベルの利便性をもたらすと見たから。
+
+**第四に、シェアと伝播性。** 多くのCエンドプロダクトが急速に広がるのは、使用プロセスに自然なシェア性があるからです。
+
+### Bエンドアプリ：組織の効率、コスト、リスク管理に向け
+
+Bエンドアプリは企業、チーム、機関、または特定の部門に向けています。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image18.png)
+
+これらのアプリとCエンドの最大の違いは、複数のロールのニーズを同時に満たす必要があることです。
+
+Bエンドアプリにはいくつか特にコアな関心事があります。
+
+**第一に、効率の向上。** ある一人の時間が短縮されただけでなく、プロセス全体の時間が減少し、コラボレーションコストが下がり、コミュニケーションリンクが減る。
+
+**第二に、コスト削減。** 人件費、研修費、システム保守費など。
+
+**第三に、リスクコントロールとコンプライアンス保証。** 多くのBエンドシーンでは、コンプライアンスとトレーサビリティに高い要求があります。
+
+**第四に、権限管理と責任の境界。** 誰が何を見れるか、誰が何を変更できるか、誰がどの結果に責任を持つか。
+
+業界からアプリへの思考方法：**あなたがある程度理解している業界を選び**、その業界の日常的な運営の中で、どのプロセスが人工に大きく依存しているか、どの情報が複数のシステムやプライベートチャットに散在しているか、どのプロセスのエラー率が特に高いがすぐには発見されにくいかを分析します。これらの場所の周りに、非常にフォーカスされた小ツールを設計できます。
+
+## 3.4 ユーザーデータに基づく磨き上げ：自分が良いと思うものからユーザーが良いと思うものへ
+
+アプリを作った後に最も起こりやすい錯覚は、自分では使えば使うほどスムーズに感じ、どこもかなり合理的だと思い込んで、そのままユーザーも同じように感じるはずだと考えてしまうことです。実際には、自分で作ったプロダクトほど、他人がつまずいている点に気づきにくくなります。アプリを「自分ではよくできていると思う作品」から、本当に良いアプリへ育てていくには、実際のユーザーフィードバックを設計の中に取り込む必要があります。
+
+### ユーザーが話せる出口として、シンプルなフィードバックの仕組みを設計する
+
+最初から複雑なカスタマーサポートシステムやデータ分析基盤を作る必要はありません。ごくシンプルな方法から始められます。
+
+**グループチャットは最も直接的な方法です。** すでに小さなユーザーグループを持っているなら、普段の利用中に出てきた問題やアイデアを、そのグループに投稿してもらうよう促せます。あなたがやるべきことは、丁寧に返信し、記録し、定期的に整理することです。グループ内で言い訳したり、防御的に反論したりすることではありません。この小さな集団の中で、率直に話せる雰囲気を作れるほど、後から集まるフィードバックの価値は高くなります。
+
+アンケートは、**一度に比較的多くの構造化された情報を集めたいとき**に向いています。たとえば、あるバージョンをリリースした後、いくつかの具体的な機能についてユーザーがどう感じたかを知りたい場合です。回答率を高めたいなら、アンケートは長くしすぎず、質問もできるだけ具体的にします。たとえば「この期間で最もよく使った機能はどれですか」「どのステップで一番詰まりましたか」と聞く方が、「このアプリ全体をどう感じますか」と漠然と聞くより有効です。
+
+使用後のポップアップもよく使われる方法です。たとえば、ユーザーが一つのタスクを完了した後に、非常に短い評価と自由記入欄を出し、「今回の体験はスムーズでしたか」と尋ねます。場合によっては、単純な数値評価だけでも、あるフローに明らかな問題があるかどうかを判断する助けになります。
+
+1対1のインタビューはコストが高めですが、得られるリターンも大きいことがよくあります。**異なるタイプのユーザーを数人選び、20分から40分ほど時間を取ってもらい**、普段の使い方を詳しく聞いてみましょう。実際に操作してもらいながら、何を見ているのか、何を感じているのかを話してもらうと、画面を眺めているだけでは見えない問題が出てきます。以前、ある創業者がユーザーから提案をもらうために、毎日十数件のミーティングを組んで対話していた例を見たことがあります。ユーザーニーズを理解するために時間を使うことは、決して悪いことではありません。
+
+### 雑然としたフィードバックから3種類の情報を抽出する
+
+ユーザーフィードバックはたいてい混ざり合っていて、一目で整理するのは難しいものです。そこで、まずはそれらを **bug、体験上の問題、新しいニーズ** の3種類に分けてみましょう。
+
+**bug とは、本来起きるはずだと言っていた動作が、ある状況ではまったく起きなかったり、間違った動作になったりすることです。** たとえば、アップロードに失敗する、クラッシュする、ボタンが反応しない、結果が明らかにおかしい、といった問題です。この種の問題に対しては、できるだけ早く再現し、修正し、修正後には影響を受けたユーザーへ自分から知らせるべきです。そうすることで、あなたがこれらの問題を本気で扱っていることが伝わります。
+
+**体験上の問題とは、フローの長さ、操作位置、文言の表現などで、最もスムーズな経路を選べていないことです。** たとえば、ユーザーがあるボタンの前でいつも迷い、クリックすると取り返しのつかない結果になるのではないかと不安になる。重要な機能なのに目立たない隅に置かれている。デフォルト設定が多くの人の習慣と逆で、毎回余計な調整が必要になる。この種のフィードバックは、データと観察を組み合わせて判断し、変えるべきか、どの程度変えるべきかを決める必要があります。
+
+**新しいニーズとは、ユーザーがあなたの想定していなかった機能や利用シーンを提案し始めることです。** 複数のエクスポート形式、チーム共同作業、ほかのよく使うツールとの連携など、本当に検討する価値があるものもあります。ただし、ユーザーが言ったことをすべてそのまま作る必要はありません。本当に見るべきなのは、その新しいニーズの背後に共通した問題があるか、それがもともとサービスしたかった人たちや中核タスクと一致しているかです。そうでなければ、分散したニーズにあちこち引っ張られ、最後には何でもやりたいが、どれも深く作れないプロダクトになってしまいます。
+
+一つの習慣として、すべてのフィードバックにラベルを付けるとよいでしょう。それが bug なのか、体験上の問題なのか、新しいニーズなのかを記録します。定期的にこれらのラベルを集計し、どの種類の問題がどの機能やフローに集中しているかを見ます。そうすれば、ただ受け身で修正するだけでなく、高頻度の問題を意識的に中心へ置いて改善を進められます。
+
+### 3つのシンプルな指標で継続投資すべきか判断する
+
+リソースが限られている中、このアプリが継続的な長期投資に値するかを判断するためのシンプルで効果的な指標が必要です。
+
+**一つ目はリテンションです。** リテンションは、ある1日に何人がアプリを開いたかを見るものではありません。**一定期間の中で、どれだけのユーザーが継続して使っているか**を見るものです。かなり粗く数えても構いません。たとえば、ダウンロード後1週間以内に少なくとも1回使った人が何人いるか、1か月以内に戻ってきた人が何人いるかを見ます。大多数のユーザーが1、2回使っただけで戻ってこないなら、初期段階で十分な価値を感じてもらえていないか、利用のハードルが高すぎる可能性があります。
+
+**二つ目は再訪頻度です。** アプリをアンインストールしなかった人たちが、どのくらいの頻度で戻ってくるのかを見ます。毎日使えるツールと、四半期に一度だけ思い出されるアプリでは、プロダクトの位置づけが違います。だから同じ物差しでは測れません。それでも、あなたは合理的な利用リズムの想定を持ち、実際のデータと照らし合わせて、大きなズレがないかを見るべきです。頻度が期待より高いなら、価値が想定以上かもしれません。頻度が期待よりはるかに低いなら、シーンの捉え方がずれているのか、どこかの体験がユーザーを疲れさせているのかを考え直す必要があります。
+
+**三つ目は推薦意欲です。** あなたのアプリを誰かが自分から他人に勧めたいと思うかどうかです。これはいくつかの方法で観察できます。たとえば、ユーザーが特にスムーズにタスクを完了した後に自然な共有入口を用意し、実際に何人が使うかを見る。グループ内で誰かが自発的にあなたのプロダクトを薦めているかを見る。小規模なユーザーインタビューで、「身近な人が似た問題に遭遇したら、このツールを勧めますか」と聞いてみる。推薦意欲は、単純な満足度スコアよりも問題をよく表すことが多いです。なぜなら、推薦は個人の信用を伴う行為であり、ユーザーは本当に大きく助けられたと感じたときにだけ、友人へ紹介しようとするからです。
+
+この三つの指標を、前に述べたユーザーフィードバックと組み合わせて見ると、アプリが今どの状態にあるのかがだいたい判断できます。機能はまだ不完全でも、すでに一部の人が残り、特定のシーンで繰り返し使っているなら、そのアプリは投資と磨き込みを続ける価値があります。逆に、たくさんの bug を直し、新機能も積み上げたのに、リテンションと再訪がずっと上がらず、ほとんど誰も自発的に薦めないなら、一度冷静に考えるべきです。範囲を縮め、最初の中核シーンへ戻るべきなのか、場合によっては別の方向を検討すべきなのかを見直すタイミングです。
+
+# 4. どの段階で、どのように合理的にAIを活用して価値を拡大するか
+
+ひとたび本気でアプリを作り始めると、すぐに非常によくある誘惑に出会います。「ここにもう少し AI を入れられないだろうか」という誘惑です。この誘惑が強いのは、毎日のように「AI が某業界をエンパワーする」「AI が某プロセスを根本的に作り直す」「AI がすべてをワンクリックで片づける」といった宣伝を目にするからです。時間がたつにつれ、本来は素朴だった問題を、いかにも派手なスローガンに変えてしまい、技術スタックの中にいくつものモデル呼び出しを積み上げ、気づけばアカウント残高だけが減っていく、ということが起こりやすくなります。
+
+このチュートリアルは AI ネイティブアプリの開発を扱っているので、この話題を語るのは少し自分の商売道具に水を差すようにも見えます。しかし、小さなアプリや立ち上げたばかりのプロダクトにとって、**最も危険なのは AI を使わないことではなく、AI のために AI を使うことです**。本当は、まずシンプルで信頼できるツールを作ればよいのに、新しい能力に惹かれて、賢そうに見える機能を次々に足してしまう。その結果、もともと着地できたはずの方向が、高く、複雑で、しかも価値の伸びがはっきりしないものになります。この章で解決したい核心は、どの段階で、どの部分に、どのような形で AI を使えば、本当にアプリの価値を大きくできるのかを明確にすることです。
+
+## 4.1 AIのためにAIをしない
+
+自分が気づかないうちにAIのためにAIをしていないかを判断するための非常に実用的な方法は、AI機能を追加する前に、まず真剣に2つの質問に答えることを強制することです。
+
+**第一に：AIなしでも、このアプリは成立するか。** つまり、すべてのAI能力を一時的に取り除いても、あなたがやっていることはそれ自体価値のあることであり、ユーザーに現実のニーズがあり、毎日、毎週、毎月このことに真の時間を投じる意欲があるかどうか。
+
+この言い方は少し時代に逆行しているように聞こえるかもしれません。今ではほとんどのプロダクト紹介で AI が非常に目立つ位置に置かれ、AI がなければ現代的なツールではないかのように見えるからです。しかし、もしあなたのアプリが AI を外した途端に完全に成り立たなくなるなら、多くの場合、それは技術が十分に先進的ではないという問題ではありません。もっと深い問題として、あなたが捉えているニーズ自体が痛くもかゆくもない、あるいは実際には存在していない可能性があります。
+
+たとえば、ToDo を整理するツールを作るとします。主な差別化が、ToDo リストにモデルが生成したヒントを足すこと、たとえば自動タイトル付け、自動分類、自動説明補完だったとします。しかしユーザーはそもそも ToDo を書くときに、タイトルを付けることを苦痛だとは感じておらず、ただ早く用件を書き留めたいだけかもしれません。そうであれば、どれだけ賢そうな機能を足しても、継続的な価値にはなりにくいでしょう。逆に、一歩引いて、AI を使わないときにこのアプリの最も素朴な価値は何かを問い直すと、もっと堅実な方向が見えてくるかもしれません。たとえば、複数のチャネルに散らばったタスクを一か所に集めること、1日に実際に終えられる量を見える化すること、予定が破綻する前にリスクを示して、削るべきことと選ぶべきことを判断しやすくすることです。こうした基礎能力を堅く作る方が、最初から ToDo にさまざまなスマートタグを付けるより重要なことが多いのです。
+
+**第二に：AIを使った後、具体的に何が向上したか。** ここでは「効率向上」「体験再構築」「スマートアップグレード」のような非常に一般的な要約は受け付けません。ユーザー自身が明確に感知できる1〜2つの次元に落とす必要があります。
+
+自分に次のように問いかけてみてください。
+
+- タスク完了の速度が明らかに上がったか。たとえば、もともとゼロから1ページのコピーを書く必要があったものが、5分の確認と修正で済むようになったか。
+- 結果の品質が明らかに上がったか。たとえば、同じ時間で、より整理され、より専門的で、対象読者に合った内容を出せるようになったか。
+- 利用プロセスがよりスムーズ、あるいはより楽になったか。たとえば、退屈なフォーム入力を、会話に近い質疑応答に変えられたか。
+- 実際のコストが下がったか。たとえば、外注回数、人工サポート時間、研修期間、意思決定時間を減らせたか。
+
+頭の中の答えがまだ、**なんとなく**便利になりそう、少し格好よく見えそう、という程度にとどまっているなら、その AI 機能はまだ最も重要な力点を見つけられていない可能性が高いです。
+
+この二つの問いには、はっきりした順序があります。まず AI がなくてもアプリとして筋が通ることを確認し、その上で、AI を加えると具体的にどこが良くなるのかを問うのです。
+
+## 4.2 AIがどのような役割を果たすかを考える
+
+このアプリがAIを使わなくても成立し、明確な改善点を見つけた後、次に考える必要があるのは：**あなたのアプリで、AIは一体何をしているのか。** 多くのプロダクトがここで間違えるのは、AIを非常に抽象的なエネルギーとして扱い、具体的な役割を持ったパーツとして扱わないからです。
+
+より明確なアプローチは、AIをいくつかの異なるコンポーネントとして考えることです：**それは脳であり、目であり、手です。** プロダクトの目標に基づいて、どの部分を担当させるかを決める必要があります。可能であれば、最初は一つか二つの役割だけを選んでしっかりやり、全部詰め込むべきではありません。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image19.png)
+
+**脳として機能する時**、AI は主にテキスト内容を理解して生成したり、複雑な情報の間で推論したりします。たとえば、会議議事録アシスタントを作るなら、長い録音から本当に重要な論点を取り出せる必要があり、単に時系列で並べるだけでは足りません。学習アプリを作るなら、ユーザーの回答を見て、概念を理解していないのか、それとも単に手順を書き間違えただけなのかを判断し、それぞれ違うフィードバックを返す必要があります。この種のシーンでの AI の価値は、ユーザーの言葉を読み取り、与えられた材料を理解し、構造と論理を持つ出力を生成できることにあります。あなたがやるべきことは、ユーザーが問題を明確に出せるようにし、十分に正確なコンテキストを渡し、この「脳」が判断するための情報をそろえることです。
+
+**目として機能する時**、重点は画像や動画など、テキストではない内容を処理することにあります。これらを機械が理解できる記述へ変換し、その記述をもとにさらに行動します。たとえば、紙の書類を整理するツールなら、写真を撮って、請求書、契約書、包装説明書などを検索可能な文字に変えられます。絵の練習アプリなら、ユーザーが描いたラフを見て、構図や線の問題を指摘できます。部屋の整理提案ツールなら、ユーザーがアップロードした写真から部屋のレイアウトや物の分布を認識し、簡単に実行できる改善案を出せます。ここでの AI の要点は、分析できる目のように働き、アプリがキーボード入力の文字だけでなく、ユーザーの生活にある実物世界へ触れ始められることです。
+
+**手として機能する時**、AI は単に提案やテキスト結果を返すだけでなく、一連の具体的な動作を実行し始めます。たとえば一部の自動化プラットフォームでは、複数のステップを一つのワークフローとしてつなげられます。メールから添付ファイルを読み取り、内容を要点にまとめ、グループへ送信し、原文をクラウドドライブに保存し、最後にタスク管理ツールへフォローアップ項目を自動作成する、といった流れです。ここでの AI の役割は、複雑なプロセスの中で、文脈に応じて次に何をすべきかを動的に判断することです。たとえば、あるメールがクレームかどうかを見分ける、フォームがきちんと埋まっているかを判断する、そしてそれに応じて異なる後続処理を起動する、といったことです。
+
+これらに加えて、実際のアプリケーションでは、AIの役割はさらに具体的で多様になります：
+
+テキスト処理では、翻訳、要約、Q&A、続きを書くこと、感情分析などを担うことがあります。たとえば、カスタマーサポートシステムで問い合わせを自動分類する、法律文書アシスタントで契約条項を抽出する、教育アプリで作文を添削する、といった使い方です。
+
+- 技術的な基盤は主に深層学習における **大規模言語モデル（** **LLM** **）** です。大量のテキストから言語規則と世界知識を学び、長文や多ターン対話の文脈を「読める」だけでなく、一貫した文体で自然な内容を「書ける」ようになります。
+- 「理解」の側では、LLM はユーザー意図の識別、重要情報の抽出、感情傾向の判断に使えます。「生成」の側では、要約の自動作成、質問への回答、続きを書くこと、書き換え、多言語翻訳などに使われ、人が読む、整理する、書く必要のある大量の作業を自動化または半自動化できます。
+- **オンラインカスタマーサポートボット**の例では、システムがまずユーザーの一言から、問い合わせ、クレーム、アフターサポートのどれに近いかを大まかに判断し、発話の中から注文番号、時間、商品名などの重要情報を抽出します。その後、LLM が文脈と企業ナレッジベースを組み合わせて、自然で完全な回答を生成します。これにより、人手の負荷を減らし、ピーク時にも安定したサービス品質を保てます。
+
+画像処理では、認識、分類、生成、修復、強化を担うことがあります。たとえば、医療画像で病変位置を標注する、EC プラットフォームで商品を自動切り抜きして背景を差し替える、デザインツールでテキスト記述から挿絵を生成する、といった使い方です。
+
+- 画像理解は通常、**畳み込みニューラルネットワーク** **（** **CNN** **）** などの視覚深層モデルに依拠します。大量の画像からエッジ、テクスチャ、構造などの特徴を学び、物体検出、画像分割、細粒度分類、たとえば異なる病変や商品カテゴリの区別に使われます。
+- 画像生成と修復は、**拡散モデル、** **GAN** ** などの生成モデル**に依拠します。テキスト記述や参考画像から新しい画像を生成したり、ぼやけた画像、欠けた画像、低解像度画像を修復・超解像したりできます。
+- 多くのシステムでは LLM も組み合わせます。まず自然言語でユーザーの説明を理解し、その後、視覚モデルに適した「プロンプト」、スタイルタグ、構図制約を自動生成し、「何が欲しいかを聞き取る」ことから「欲しいものを描く」ことまでつなげます。
+- EC プラットフォームの**「スマート主画像生成」**を例にすると、システムはまず検出・分割モデルで商品を元画像から精密に切り抜きます。次に LLM が事業者の入力した文言、たとえば「シンプルな北欧風リビング、柔らかい自然光」を解析し、具体的なシーン、色調、スタイルパラメータへ変換します。最後に拡散モデルがそれに合う背景と光と影を生成し、構図が悪いものやスタイルが合わないものを自動で除外し、そのまま出品に使える商品主画像を出力します。
+
+音声・動画処理では、音声や動画の生成、文字起こし、ノイズ除去、編集、字幕作成を担うことがあります。たとえば、ポッドキャストツールで冒頭と締めのナレーションを自動生成する、動画プラットフォームで台本から解説動画を自動合成する、会議ソフトで会話をリアルタイム文字起こし・翻訳し、多言語字幕と録画再生を生成する、といった使い方です。
+
+- 「理解」の側では、システムは**音声認識モデル**で音声を文字へ変換し、同時に話者、言語、話速、おおよその感情を分析します。また、視覚モデルで動画画面内のシーン、人物、重要な物体を理解します。
+- 「生成」の側では、LLM を中核として、台本、会議内容、ユーザー指示を理解・分解・書き換えます。その後、**音声合成** **（** **TTS** **）で自然な音声解説を生成し、動画生成・編集モデル**によって画面を自動合成または編集し、背景を差し替え、ショットや字幕を挿入します。音声側の生成モデルは背景音楽や環境音も自動生成でき、深度ノイズ除去や音質強化と組み合わせて全体の聞き心地を高めます。
+- **「テキストから短動画を生成する」**タイプのプロダクトでは、ユーザーは文章を入力するだけで済みます。システムはまず LLM で文章をいくつかの自然な段落と画面に分け、ナレーションに適した原稿と簡単な絵コンテ記述を生成します。次に TTS モデルが音声を合成し、動画テンプレートや生成モデルが絵コンテに基づいて画面を選ぶ、または生成します。タイムライン上で字幕と音声を自動同期し、最後にそのまま公開できる短動画として書き出します。
+
+音声インタラクションでは、認識、合成、感情検出、対話管理を担うことがあります。たとえば、スマートスピーカーでユーザー指示を理解する、音声ナビでルートを読み上げる、語学学習アプリで発音を修正する、といった使い方です。
+
+- フロント側では、深層学習の**音声認識モデル**がユーザー音声をテキストに変換し、さらにイントネーション、音量、話速などの特徴を抽出して、感情や状態を判断する手がかりにします。
+- バックエンド側では、**音声合成（TTS）**が文字の返答を自然で流暢な音声出力に変えます。感情認識モデルはユーザーの現在の話し方に応じて返答の口調や速度を調整し、やり取りをより本物の会話に近づけます。
+- **スマートスピーカー**を例にすると、ユーザーが「今日は少し疲れたから、リラックスできる音楽をかけて」と言った場合、システムはまず音声認識で文字に変換します。次に LLM が過去の再生履歴を組み合わせて、ユーザーにとっての「リラックス」の好みを理解し、より穏やかなプレイリストを自動選択します。感情認識がユーザーの疲労状態を判断した後、TTS は返答を合成するときに話速を落とし、声の調子を柔らかくして、全体の交流を「聞き取れる」だけでなく「聞いて心地よい」ものにします。
+
+上の内容は、AI のいくつかの主要方向における応用と技術を簡単に紹介したものにすぎません。実際のビジネスシーンでは、多くの場合、複数の最新 AI API を導入し、異なるタスクでより全面的にテストする必要があります。現在の AI の能力がどこまで強いのか、どんな問題を解けるのか、どのような状況で間違えやすいのか、その境界がどこにあるのかを、少しずつ把握していかなければなりません。これを理解して初めて、能力を誤って見積もることでリスクを埋め込むことなく、機能とフローを合理的に設計できます。
+
+次に、この点をめぐって、AI の能力と境界をどう理解するか、実際にプロダクトを作るときに何を考えるべきかを、もう少し体系的に見ていきます。
+
+## 4.3 AIの能力と限界に習熟する
+
+実際に AI をアプリへ組み込み始めると、すぐに一つの現実に気づきます。宣伝で語られる万能感と、具体的な一機能に落としたときの制約には、かなり大きな差があることがあります。過度に約束して結果が外れるのを避けるには、**現在の AI 能力の主な方向について基本的な認識を持ち、それぞれの境界がどこにあるのかを明確にする必要があります。大量のテストを通じて Bad Case を集めて振り返り、利用時には AI が高い確率で間違える状況を避けるか、少なくともエラーに対する警告を加える必要があります。**
+
+現在のモデルは多くのシーンで、依然としてもっともらしい作り話をする問題を抱えています。特に、自由に発揮させたり、十分に信頼できる参考資料を与えなかったりすると、見た目には自信に満ちているが完全に間違った答えを出すことがあります。存在しないファイル、データ、経験を作り出すことさえあります。したがって、結果が重大な影響につながるシーン、たとえば財務報告書、法律文書、医療アドバイスなどでは、設計上、必ず人間による校正や多重チェックの層を明確に加え、モデル出力をそのまま自動実行できる指示として扱ってはいけません。
+
+同時に、プライバシーとデータセキュリティも正面から向き合う必要がある問題です。どのデータならそのままモデルに送れるのか、どのデータは匿名化処理が必要なのか、どのデータはそもそも第三者システムに出してはいけないのかを、非常にはっきり理解しておく必要があります。ユーザーがアップロードする契約書、病歴、個人識別情報などの敏感な内容については、画面と規約の中で処理方法を明確に説明し、可能であれば、こうしたシーンにはより安全で制御しやすいモデルデプロイ方式を個別に選ぶべきです。
+
+もう少し具体的に、ここではエージェント Agent に関係する例を借りて、AI 能力の境界を本当に理解するとはどういうことかを説明します。注意してほしいのは、ここで Agent をゼロから実装する方法を教えるわけでも、今すぐ特定のアーキテクチャを追うべきだと言っているわけでもないことです。この例を通じて見てほしいのは、一つの考え方です。同じ Agent という話題でも、ある人は単なる新しい用語として扱うだけですが、別の人はこの話題を使って、タスクを明確に分解し、境界をはっきり描くことができます。
+
+AI アプリの現場に長くいる著者 Barret 李靖氏が、Agent をどう作るべきか、AI を使うべきかを説明するために、私が非常に納得している整理を示していました。それは成熟した理解の仕方をよく表しています。まず問題を分解し、それから AI の使いどころを語る、という方法です。
+
+> Agent には二つの変数があります。一つはタスクの進み方を制御する workflow、もう一つは内容生成を制御する context です。
+>
+> 1）workflow と context の確定性がどちらも高い場合、この種のタスクは自動化しやすく、従来の RPA に近いものになります。たとえば請求書処理やフォーム入力タスクでは、AI は主に接着剤のような役割で、発揮できる余地は比較的限られます。
+>
+> 2）workflow は確定しているが context が不確定な場合、つまりプロセスは固定されているが入力が多様な場合、Agent は意味理解の面で補完する必要があります。たとえばカスタマーサポート Q&A や契約解析では、外部検索、知識グラフなどのツールで情報の不足を補い、推論結果を期待に近づける必要があります。
+>
+> 3）workflow は不確定だが context が確定している場合、つまり入力は明確だが進み方が多様な場合、Agent は自律的に経路を計画する必要があります。市場分析レポート生成、パーソナライズ推薦などがこれに当たります。多くの End-to-End RL Agent はこの種のタスクを得意とします。訓練段階で大量の経路計画や問題解決の考え方を学習しているからです。
+>
+> 4）workflow と context がどちらも不確定な場合は、最も複雑なシーンです。推論も探索も必要になります。革新的なソリューション設計、部門横断の情報収集などは、より汎用型 Agent に近いものです。その実行効果は、与えられたツールの豊富さに左右され、特にプログラミング能力を最大限開放することが重要です。たとえば Github でリポジトリを探して clone し、コードを修正して問題を解決することを学ばせ、人間のように働かせることです。
+>
+> したがって、Agent をうまく作るには、まずシーンを明確にする必要があります。本質的に、自動化が解くのは「確定性」の問題であり、知能化が解くのは「不確定性」の問題です。
+
+この分解方法の価値は、「Agent を作る」という曖昧な概念を、具体的に判断できる問いへ変えることにあります。あなたが向き合うタスクでは、どこが確定していて、どこが不確定なのか。プロセスも情報も確定しているなら、従来のプログラムで十分です。不確定性が現れたときに初めて、AI の意味理解、パターン認識、推論計画の能力が活きます。ただし同時に、不確定性が高いほど、AI が持ち込む新しいリスクも大きくなります。両方が不確定なシーンでは、AI の一歩一歩がずれる可能性があり、どの選択をするかを事前に知るのは難しくなります。多くのチームが第二象限、つまり workflow は確定しているが context が不確定なシーンから始めるのはこのためです。AI の理解能力を活かしながら、固定されたフローでリスクを制御範囲に閉じ込められるからです。
+
+この小節の最初の問いに戻りましょう。本当に AI の能力境界を理解するとは、どういうことでしょうか。
+
+まず、シーンごとに AI への要求が違うことを理解することです。前の workflow と context の例が示しているように、プロセスも情報も確定しているとき、AI に活躍の余地はあまりなく、従来の自動化で十分です。プロセスは確定しているが情報が不確定なとき、AI の価値は理解と補完にあります。プロセスが不確定なとき、AI には計画と探索が必要になります。この分解方法の本質は、不確定性の出どころと程度を識別することです。AI の中核能力は、不確定性の中でパターンと関連を見つけることです。この考え方は Agent だけでなく、画像認識、コンテンツ生成、推薦システムなど、あらゆる領域に同じように重要です。たとえば AI 切り抜きツールを作る場合、入力は確定しています。一枚の画像です。しかし、エッジ認識の正確さや複雑背景の処理能力こそが、不確定性のある部分です。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image20.png)
+
+しかし、AIは不確実性を解決すると同時に、新しい不確実性も導入します。その出力は確率的であり、誤解、誤推論、ハルシネーションを起こす可能性があります。異なるシーンと異なるユーザーは、この不確実性に対する許容度が全く異なります。だからさらに聞く必要があります：
+
+**AI が導入する新しい不確定性を、ユーザーとシステムは受け止められるか？** たとえばカスタマーサポートのシーンでは、AI がユーザー意図を誤解しても、ユーザーはすぐに訂正できます。この不確定性は制御可能です。しかし、財務承認を自動実行する場合、AI の一度の誤判断が深刻な結果をもたらす可能性があり、この不確定性は受け入れられません。画像生成でも同じです。ユーザーのアバターを美化するだけなら、結果が気に入らなければ再生成すればよく、試行錯誤のコストは低いです。しかし、建築設計者に施工図を生成する場合、たった一つの細部の誤りでも工事事故につながる可能性があります。
+
+**AI の正確率は、このシーンの合格ラインに達しているか？ そしてその合格ラインは、ユーザーがそれを何に使うかで決まります。** 同じ画像認識でも、ユーザーのアルバム整理や顔写真分類を助けるだけなら、識別精度が80%でも受け入れられるかもしれません。せいぜい数枚を手動で調整すればよいからです。しかし、セキュリティ監視に使う場合、20%の不審者を見逃すことは深刻な安全リスクになります。同じテキスト生成でも、ソーシャルメディア投稿を書くなら60点のアイデアで十分かもしれません。ユーザーが自分で整えられるからです。しかし、法律契約条項を生成するなら95点でも足りません。たった一つの言葉の不適切さが法的紛争を引き起こす可能性があるからです。ユーザーや用途によって、エラー率への感度は完全に違います。自分がサービスするシーンの許容範囲がどこまであるのかを、はっきり理解しておく必要があります。
+
+**AI が間違えたとき、補正する方法はあるか？** workflow が確定しているシーンでは、重要な節点に人間のレビューを置き、AI の不確定性を局所的に制御できます。しかし workflow も不確定なシーンでは、AI の一歩一歩がずれる可能性があり、いつ介入すべきかを判断するのが難しくなります。このとき、コストとリスクは急速に上がります。たとえば画像修復シーンで、AI が古い写真を十分にリアルに修復できなかったとしても、ユーザーは一目で気づき、採用しないことを選べます。しかし医学画像の補助診断シーンで、AI が異常位置を間違ってマークした場合、医師が気づきにくい可能性があり、結果ははるかに深刻です。
+
+**AI のパフォーマンスを測定し、最適化する方法はあるか？** そのタスク自体に明確な正誤基準がない場合、AI がうまくできているかどうかをどう判断するのでしょうか。ユーザーのフィードバックが遅れて返ってくる場合、どう素早く反復するのでしょうか。測定すらできないとき、AI の不確定性はブラックボックスになります。たとえば推薦システムなら、クリック率や滞在時間などの指標で効果を素早く評価できます。しかし、クリエイティブな広告コピーを生成する場合、「良い」とは何か自体が主観的で、配信後のコンバージョン率を待たなければ分からないことがあり、反復周期は長くなります。
+
+本当に成熟した判断は、「ここに不確定性があるから AI を使える」ではありません。「ここでの不確定性は AI が処理でき、AI がもたらす新しい不確定性も自分たちで管理できる」という判断です。「この機能点で、AI はどの程度助けになるのか、投資する価値があるのか、どのように投資すれば最も費用対効果が高いのか」。こうした判断力を形成できれば、今後機能を設計し、案を評価するたびに、多くの遠回りを避けられます。
+
+# 5. アプリがあれば、0から最初のリアルユーザーをどう見つけるか
+
+苦労してアプリを作った後、次の難題は、最初のリアルユーザーをどう見つけるかです。
+
+多くのチームはこの段階で、ものができたのだから、あとは広めればよい、と考えがちです。宣伝する、広告を買う、露出を増やす。より多くの人に見てもらえば自然に回り始めるように見えます。しかし最初から大規模露出を追うと、典型的な罠にはまりやすくなります。貴重な時間と予算を使い、データ上は人が来たように見えても、そのアプリを本当に継続利用したい人がいるのかは検証できないままです。
+
+この段階で最も重要なのは一つだけです。**できるだけ小さなコストで、本当に人がこのアプリを使いたいと思い、使い終わったあとも戻ってきたいと思っていることを証明することです。** 成長とプロダクトの文脈では、このステップは通常「コールドスタート」と呼ばれます。
+
+コールドスタートとは、ほとんどすべてがゼロの状態から、新しいプロダクトを本当に動き始めるところまで持っていくことです。このときは、ユーザー基盤も、口コミも、検索流入も、ブランド認知もありません。各種指標はほぼ 0 にとどまっています。そんな冷え切った環境の中で、最初に本当に使ってくれる人たちを見つけ、その人たちを中心に最初の利用ループを組み立てる必要があります。
+
+これは、その後の既にユーザーやデータのあるプロダクトを最適化する仕事とはまったく別の種類です。ざっくり言えば、次の4つのステップで進められます。
+
+1. まず、成長は 0–1 と 1–N に分けられると理解し、今の自分が何を把握すべきかを知る
+2. 本当に探すべき相手が誰なのかを明確にし、終端ユーザーだけを見ない
+3. 対象をはっきりさせたうえで、自分に合った 1〜2 本のコールドスタート経路を選ぶ
+4. リソースが限られる現実の中で、取捨選択を学び、力を最も重要な小さな部分に絞る
+
+## 5.1 まず2つの段階を区別する：0–1と1–N
+
+正式にユーザーを探し始める前に、まず一つ明確にしておく必要があります。それは、**成長には段階がある** ということです。成長に関する仕事を全部まとめて考えると、今どこに力を入れるべきか分からなくなります。最も単純で実用的な分け方は、成長を 0–1 と 1–N に分けることです。
+
+### 0–1：誰も使っていない状態で、どうコールドスタートするか
+
+0–1 とは、完全にユーザーがいない状態から、本当に使いたいと思う少数のユーザーが現れるまでのプロセスです。冷スタートの「冷」は、最初の時点でほぼすべての指標がゼロであることにあります。ダウンロードも、検索量も、口コミもありません。あなたのアプリは、この世界にまだ存在していないのと同じです。
+
+この段階でやるべきことは、自然流入や運を当てにすることではありません。自分から動いて、最初の土台を作ることです。具体的には、次のことが必要です。
+
+**本当に使ってくれる少数のシードユーザーを見つけること。** ただ知り合いから数を集めるのではなく、あなたが解きたい問題に本当のニーズを持っている人を探します。人情や好奇心で一度だけ開いて去る人ではなく、その問題に現実に困っている人です。
+
+**最初の利用体験と供給を用意すること。** ユーザーが来たとき、真っ白な画面しか見えないのではだめです。機能がまだ不完全でも、少なくとも一度はコア操作を完了でき、価値を感じられるようにします。
+
+**このプロダクトが何をするのか、何を解決するのかを簡単な言葉で説明できるようにすること。** ブランドの後ろ盾がない初期段階では、ユーザーがあなたに与える注意は数秒しかありません。「これは自分に何の役に立つのか」を最短で伝える必要があります。
+
+**最初の接触経路を確保すること。** 小さなコミュニティでも、フォーラムでも、友人関係でも構いません。大事なのは規模ではなく、本当に必要としている人へ正確に届くかどうかです。
+
+0–1 段階で本当にやるべきことは、最初のリアルニーズを持つ人を引き込み、流入から利用、そしてフィードバックまでの完全なループを回すことです。そのループが回れば、このアプリが空中楼閣ではなく、本当に必要とされ、使われるものだと証明できます。
+
+### 1–N：すでに使いたい人がいる基盤で、どうスケールするか
+
+繰り返し使いたいユーザーが少しずつ増えてきたら、ようやく問題は、数十人、数百人から、数千人、数万人、さらにその先へどう拡大するかに移ります。これが、一般に言う成長、拡張、スケールの段階です。
+
+1–N の段階では、メカニズム、組織、収益化、ブランド、チームといった、より複雑な論点を考え始めます。たとえば:
+
+**比較的安定した獲得チャネルを見つけているか。** どれだけの予算や時間を入れれば、どのくらい新規ユーザーが増えるのか。ここでは運ではなく、再現可能で予測可能な成長経路が必要です。
+
+**サービスの仕組みを整え始めているか。** たとえばサポート、運営施策、ユーザー教育です。ユーザーが増えると、初期のように一人ひとりへ手取り足取り教えることはできません。標準化されたサービス体制が必要になります。
+
+**このプロダクトでどうやって収益を得るか。** サブスク、単発課金、追加価値サービス、その他の方法か。ビジネスモデルは最初から完全に固める必要はありませんが、1–N に入ったら持続可能な形を真剣に考えるべきです。
+
+**ユーザーにどんなブランド印象を残したいか。** 早期は小さな輪の中で広がるだけでも、規模が大きくなると「覚えてもらうこと」「信頼してもらうこと」「自発的に薦めてもらうこと」を考えなければなりません。
+
+**チームにどんな能力がまだ足りないか。どの工程は長期的に見張る必要があるか。** 0–1 は一人や小さなチームでも支えられますが、1–N には複数の役割が必要になりがちです。
+
+これらはどれも重要です。しかし 0–1 の段階でそれらを先に考え始めると、空転するだけになりやすいです。まだ本当に使われるのか、残ってくれるのかが分かっていない段階で、収益モデルやブランド戦略を語っても、肝心なところから目を逸らしてしまうだけです。
+
+### なぜまず0–1に集中すべきか
+
+個人開発者や小チームにとって、1–N よりも**本当に最も重視すべきなのは 0–1**です。理由は単純です。最初のリアルユーザーすら見つけられないなら、その後のスケール、商業化、ブランド構築について語るのはすべて机上の空論だからです。
+
+0–1 段階は、プロダクトのライフサイクルの中で最も脆く、同時に最も重要な瞬間です。この段階は、そのプロダクトの価値を証明できるか、最初の信頼を作れるか、そして次の成長の土台を築けるかを決めます。0–1 を本当に回せて初めて、1–N の議論に進む資格ができます。
+
+次に、0–1 段階にさらに焦点を絞り、「いったい誰を探すべきか」という問いを明確にしてから、具体的なコールドスタートの経路を話します。
+
+## 5.2 コールドスタートの対象：シードユーザー、供給側、トラフィック側、チャネル側
+
+さまざまな種類のアプリは、たいてい次の四つの対象を避けて通れません。シードユーザー、供給側、トラフィック側、チャネル側です。
+
+### 第一類：シードユーザー
+
+**シードユーザーは、あなたが最初に接触するユーザーです。** 彼らの典型的な特徴は人数が少ないことですが、ターゲットのペルソナと非常に高く一致していることです。彼らから得たいのは、登録数や利用データだけではありません。方向性そのものと体験のフィードバックです。
+
+たとえば、個人向けツールなら、シードユーザーは、ある問題で長く困ってきた人たちかもしれません。長文を書くことが多いコンテンツクリエイター、報告資料を頻繁に作る職場の人、毎日大量の資料と向き合う学生などです。教育系アプリなら、同じ試験を準備している少人数の受験者や、特定学年の保護者がシードユーザーになりえます。
+
+コールドスタート時には、まず 20〜50 人ほどの協力してくれるユーザーを見つけ、1〜2 週間かけて使いながら対話する、といった明確な目標を立てられます。重要なのは人数ではなく、高密度なやり取りを通してプロダクトのロジックを磨き込むことです。
+
+### 第二類：供給側
+
+**一部の二面市場や多面市場のプラットフォーム型プロダクトでは、ユーザー側だけでは不十分です。** 十分な供給側がなければ、ユーザーを連れてきても、使えるものがなくてすぐに離れてしまいます。
+
+供給側は、コンテンツクリエイター、講師、サービス提供者、店舗、ドライバー、大家などであることがあります。彼らが、プラットフォームの豊かさと魅力を決めます。
+
+たとえば、デザイナー向けの素材プラットフォームを作るなら、まず一部のデザイナーに作品をアップロードしてもらう必要があります。たとえ小規模でも、無料素材の一部を開放してもらえないと、ユーザーが来てもサンプル画像しか見えず、定着しにくいでしょう。オンライン予約ツールなら、あらかじめ使ってくれそうな店舗や機関と連携していないと、普通のユーザーが来ても実際に予約できる相手がいません。
+
+冷スタートのときは、まずユーザー側を先に解くのか、供給側を先に解くのか、あるいは両方を同時に進めるのかを、はっきり理解しておく必要があります。多くのプラットフォームは、初期にこの取捨選択を経験しています。これを構造的な問題として正面から認識しているだけでも、終端ユーザーばかり集めようとする人たちより一歩先に進んでいます。
+
+### 第三類：トラフィック側
+
+トラフィック側とは、**短時間である程度のユーザーの注意をあなたへ向けられる人や組織**です。インフルエンサー、縦型メディア、コミュニティ運営者、あるいは多くのユーザーを持つツールプラットフォームがこれに当たります。
+
+たとえば、職場向けツールなら、何人かのキャリア系ブロガーに自然な形でアプリを紹介してもらえれば、仕事効率ツールに敏感な人たちを短期間で集められる可能性があります。小紅書のクリエイター向け選題アシスタントなら、数人の中堅ブロガーと協力して、実際のケースで使い方を見せてもらうと、そのクリエイターたち自体が潜在的なシードユーザーになります。
+
+冷スタートの段階で、いきなり最大級のトラフィック側を探す必要はありません。むしろ、規模は中程度でもターゲット層と強く重なる小さなトラフィック側のほうが、カスタマイズされた試みに一緒に取り組みやすいことが多いです。大事なのは、そのような人や組織を見つけ、あなたが何をするのか、相手にどんな利点があるのかを分かりやすく伝える提案を持ち込むことです。
+
+### 第四類：チャネル側
+
+チャネル側とは、**特定のシーンでターゲットユーザーに安定して届く組織や入口**を指します。トラフィック側との違いは、トラフィック側が一時的な注意の導入に寄りがちなのに対し、チャネル側はより長期的で構造化された接続方法であることです。
+
+学校、研修機関、企業、業界団体、ソフトウェアサービス事業者は、典型的なチャネル側です。あなたのアプリが、ある種の機関の効率向上、コスト削減、サービス品質向上に本当に役立つなら、相手にはそのアプリを自分たちの体制内の多くのユーザーに紹介する動機があります。
+
+冷スタート時に、大きなチャネルを一気に取りにいくのは現実的ではありません。まずは小さな範囲の試験導入から始めることができます。たとえば、1〜2 クラス、小さな会社、地域コミュニティと協力し、しばらく内部で使ってもらい、そのフィードバックを見てから規模を広げるかどうか決める、という進め方です。
+
+このように対象を分けて考える利点は、すべての力を終端ユーザーの新規獲得だけに投入し、プロダクト構造のほかの重要な部分を見落とすのを防げることです。自分のプロダクト形態に応じて、簡単な役割図を描き、それぞれの対象が誰なのか、今どれだけいるのか、短期の目標が何なのかを書き出してください。この対象図が整理できたら、具体的なコールドスタート経路を話し始められます。
+
+## 5.3 コールドスタート方法：異なる対象に対する3つの主要ルート
+
+### ルート1：シードユーザーで突破口を開く、私域を優先活用
+
+このルートは、主にシードユーザーと一部の供給側に向けたものです。
+
+多くの個人開発者、小さなチーム、さらにはスタートアップにとって、最も現実的で、コストが低く、しかもリズムをつかみやすい方法は、通常、自分がすでに持っている私域から始めることです。
+
+このルートでは、おおよそ三つの重要な行動があります。
+
+1. **少数の的確なユーザーを積極的に体験へ招くこと** - 重要なのは数ではなく、ターゲットペルソナとの一致度です。
+2. **意識的にフィードバックを集め、すばやく改善すること**
+3. **シードユーザーに最初のコンテンツや事例を生み出してもらうこと**
+
+### ルート2：コンテンツまたは特典で駆動する、明確な第一の理由を提示
+
+このルートは、主にシードユーザーとトラフィック側に向けたもので、競争の激しい領域では特に一般的です。
+
+ユーザーに多くの代替選択肢があるとき、「新しく出たから試してみて」という一言だけでは動いてもらえません。もっと明確で、もっと魅力的な理由を用意する必要があります。
+
+よくあるアプローチは二つあります。
+
+1. **実利のある特典で引き込むこと** - たとえば新しいコースプラットフォームなら、初期に高品質な無料コースをいくつか公開したり、期間限定の割引枠を出したりします。
+2. **縦深のあるコンテンツで継続的に惹きつけること** - TikTok、小紅書、公式アカウント、ポッドキャストなどで、ターゲットユーザーが関心を持つ垂直テーマを継続的に扱い、価値ある内容を出し続けます。
+
+### ルート3：ビッグプラットフォームを活用し、既存のエコシステムで突破口を見つける
+
+このルートは、主に供給側、トラフィック側、チャネル側に向けたものです。
+
+多くの分野で、新しいアプリがゼロから独自のエコシステムを作るのは、非常にコストが高いです。しかし、自分を大きなプラットフォーム上の新しい店舗、新しいアカウント、新しいプラグインとして捉えれば、コールドスタートの難易度は大きく下がります。
+
+## 5.4 リソースが限られた時の取捨選択：0–1段階で最も重要な小部分だけをする
+
+0–1 段階にいることを確認し、サービス対象を明確にし、コールドスタート経路も大まかに選んだのに、リソースがまったく足りないことに気づく。
+
+この段階では、意識的に縮小する必要があります。目標は「たくさんやること」ではなく、「最も重要な小さな部分をしっかりやること」です。ここでは、三つの角度から自分の行動の組み立て直しができます。
+
+### 目標から具体的なタスクへ
+
+コールドスタートのとき、多くの人が設定しがちな目標は、「市場の反応を見てみる」「まずユーザーを増やす」「まず試用してもらう」といった曖昧なものです。こうした表現は広すぎて、毎日やっていることが本当に目標に近づいているのか判断しづらいです。
+
+より実務的な方法は、目標を一つの具体的な小さなことへ絞ることです。たとえば、今後 4 週間で、ターゲットペルソナに合う 20 人のリアルユーザーに、彼ら自身のリアルな場面で、何度も完全にアプリを使ってもらい、そこから具体的なフィードバックを十分に集める、といった形です。
+
+**「細分化された人々」とは、単に「この種のツールを使いそうな人」ではなく、具体的なラベルを指さして説明できる一群のことです。** たとえば、レポート生成ツールなら、ターゲットは漠然とした「職場の人」ではなく、「インターネット業界の運営職で 1〜3 年目の人」に絞るべきです。この層には共通点があります。毎月本当にレポートを書く必要があり、時間が限られていて、それでも内容をある程度専門的に見せたいのです。問題は具体的で、しかも継続的です。
+
+**「完全な使用タスク」も曖昧にしてはいけません。** このレポートツールを例にすると、一回の完全なタスクは、ユーザーが最近一週間の運営データと素材を整理してツールに取り込み、初稿を生成し、その後おすすめの構成と要点に従って 2〜3 回修正し、最後に PPT または文書として出力し、実際に部門会議で使うところまで含みます。ユーザーが少し触って終わりで、なんとなく眺めただけなら、それは完全な使用とは言えません。
+
+フィードバックは、十分に細かく聞く必要があります。たとえば:
+
+- データを取り込むとき、どこか分かりにくい、入口が見つからない、あるいは毎回違う場所を押してしまうところはあるか
+- 生成された構成は、その会社のレポートの習慣に合っているか。たとえば「背景–目標–プロセス–結果」の形になっているか
+- 本当に使う画面はどれで、毎回削除される画面はどれか
+- 使ったあと、レポート準備時間が 3 時間から 1 時間に縮まったと明確に感じるか、それとも「少し便利になった気はするが、はっきりは言えない」程度なのか
+
+### 何でも試そうとしない
+
+小目標を決めたら、次の問題は、その 20 人のユーザーをどう見つけ、どうやって実際のシーンを一緒に回すかです。
+
+冷スタートの方法はたくさんあります。コンテンツを書く、コミュニティを作る、広告を打つ、インフルエンサーに頼む、機関と組む、プラットフォームに載せる。ですが、リソースが限られているなら必要なのは、方法の数ではなく、**今の自分にとって最も自然で、続けやすいものはどれか**です。
+
+もし普段から長文を書くのが得意で、最後まで読んでくれる人たちがいるなら、まずはコンテンツから始めるのがよいでしょう。たとえば、このツールを使って実際の月次レポートを準備する過程を、非常に具体的な実践記録として書きます。元データの受け取りから、構成の検討、初稿の生成、細部の修正、実際の会議室での使用までを順に示します。途中で比較スクリーンショットを挟み、使う前と後で時間、見た目、構成がどう変わったかを見せます。最後は、冷たいダウンロードリンクだけを置くのではなく、「運営レポートを作る人なら、私と一緒にこのツールを磨きたいなら連絡してください。20 人を選んで一対一でフォローします」と明確に書きます。
+
+もし、安定したコミュニティをいくつか持っているなら、たとえば運営者のグループや同窓会の仕事グループがあるなら、私域から始める方が向いています。そこで、率直にこう話せます。「レポート生成ツールを作っています。まだ使える段階ですが、かなり粗いです。本当にレポートが必要な人を集めて、一緒に使い方を磨きたいです」。自分から手を挙げてくれた人の中から、職種や仕事内容を見て最も合う人を選び、小さなグループを作って試用してもらい、スクリーンショットや不満、改善案を送ってもらい、自分は毎日そのフォローをします。
+
+もし、特定の業界で人脈があるなら、たとえば研修機関の講師を何人か知っている、あるいは中小企業の事業責任者を知っているなら、試験導入を 1 つのクラスや小さなチームに落とし込めます。具体的には、明確な試用プランを提案します。たとえば、次の 1 か月はそのチームの週報をすべてあなたのツールで作成してもらい、あなたはリアルタイムでサポートと調整を行う。その代わり、相手には毎週 10 分だけ小さな会議に付き合ってもらい、どこが一番使いやすいか、どこが一番しんどいかを教えてもらいます。
+
+### 最も重要な部分だけを磨く
+
+小目標を持ち、主経路も決めたら、次にやるべきことは、自分に「この小さな部分だけをやる」という制限をかけることです。
+
+冷スタート段階のチームに共通する特徴は、不安です。不安になると、すぐ外に新しい動きを探したくなります。短動画アカウントを作るべきか、使い方動画をいくつか撮るべきか、少し予算を入れて広告を試すべきか、何人かのメディアに連絡して記事を書いてもらうべきか。**どれも単体では悪くありませんが、合わさると、毎日あちこち向かっていて、どの経路も深くならないという結果になります。**
+
+**たとえば、今後 4 週間は二つのことだけに集中すると自分に決めます。** 一つは、20 人のユーザーを対象に、彼らの実際の場面での体験を何度も改善し、「なんとか使える」から「かなり自然に使える」状態へ持っていくこと。もう一つは、選んだ主経路に沿って少数の新規ユーザーを継続的に見つけ、その行動とフィードバックを記録し、前のグループとの共通点と違いを見ることです。
+
+この 4 週間のあいだに、新しいアイデアや新しい機会が出てきても、まず自分にこう問い直します。「それは、この期間内に 20 人のユーザーの体験を明らかに良くするか、あるいは次の似たユーザーを見つけるのに本当に役立つか。」
+
+このやり方の背景には、コールドスタートの本質を認める姿勢があります。手元にある情報は非常に限られており、同時に多くの方向で良い判断は下せません。10 か所で少しずつやるよりも、一つの具体的なシーン、一つの具体的なグループで、繰り返し検証できる改善をした方がよいのです。たとえば、ある運営新人の集団に対して、このツールがレポート準備時間を本当に短縮し、本当に重点を伝えやすくしていると、明確に見えることがあります。
+
+あなたが通るべきなのは、**ユーザーを見つける → 使ってもらうよう導く → フィードバックを集める → 体験を改善する → 継続利用してもらう** という閉ループです。このループが滑らかに回るようになって初めて、次に別のチャネルを増やしたり、新しい連携を試したりする意味が出てきます。
+
+# まとめ
+
+最初の問題に戻ります：アプリを作ること、一体どこから始めるのが信頼できるスタートか。
+
+この記事の全内容は、実は一つのメインラインを中心に展開しています：**まずアイデアが何かを明確にし、それとユーザーニーズの関係を見て、それを一歩一歩作れて、使えて、磨き上げられて、AIで拡大でき、ユーザーを見つけられる完全な使用パスに分解すること。**
+
+まず第一章では、アイデアそのものから出発しました。アイデアはもう頭の中の「なんかかっこいい」ではなく、明確なユーザー層に向け、**具体的なシーンに根ざし、具体的なタスクを完了させ、現状より良い方法を提供する**必要があります。
+
+次に第二章では、**行動を開始する**ことを学びました。**発散と収束の間を行き来**し、ダブルダイヤモンド方式でまずアイデアを広げ、その後ユーザー価値、実現可能性、時間コストに基づいて**真に実行可能なルートに収束**させること。**抽象から具体へ**の練習、ホワイトボードや紙で先に描いてから作ること、**他人のナビゲーション、フォーム、結果表示、ガイドフローを分析し、既存の経験を借りる**こと。そして、プロダクトが完全に完成してからユーザーに聞くのではなく、プロトタイプや半完成品の段階から、**描きながら聞き、作りながら聞き**、リアルユーザーに可能な限り早くデザインに関与させること。
+
+第三章では、何が「使える」で、何が「使いやすい」かを区別する自分なりの判断基準を徐々に構築しました。
+
+第四章では、視点を純粋なプロダクトからAI能力へと拡張しました。**AIのためにAIをする衝動を抑え**、真剣に2つのことを問う：AIなしでもこのアプリは成立するか、AIを使った後具体的に何が向上したか。
+
+最後の第五章では、これらすべてを一つの現実的な問題に引き戻しました：たとえすでに悪くなく、AIも使えるアプリがあっても、ユーザーがいなければ価値はゼロです。
+
+これらの内容を合わせると、一連の方法は神秘的なものではありません：**信頼できるアイデアから出発し、それがリアルなニーズに根ざしていることを確認する。描く、書く、分解する方法で、最小実行可能アプリに収束する。リアルユーザーと明確な指標を使って、少しずつ良いアプリに磨き上げる。重要ポイントで合理的にAIを導入して価値を拡大する。最後に、限られたリソースの下で、適切なコールドスタート方法で最初の対価を支払う意思のある人を見つける。**
+
+次のステップは、過度な幻想を捨て、その中から一つを選んで作り出し、推し出し、実際の世界で検証を受けることだけです。**アイデア、方法論、AI、成長に関するすべての議論は、最終的に具体的な一人の人、一つの具体的なシーン、一つの具体的なタスクに落ちなければなりません。**
+
+だから、最初は粗くても問題ありません。機能が欠けていても、プロセスが硬くても、インターフェースが簡素でも構いません。公開しても誰も反応してくれなくても、登録や課金する人がいなくても、それでも問題ありません。これらはすべてプロセスの状態であり、最終的な結論ではありません。次にどう修正すればいいかを教えてくれているだけで、真に重要なのは進歩することです。
+
+この段階で、筆者はプロセスを楽しむだけでいいと思っています。有名なインタラクティブストーリーゲーム『To the Moon』が言ったように：
+
+**_"The ending isn't any more important than any of the moments leading to it."_**
+
+**_結末は、そこに至るまでのどの瞬間よりも重要ではない。_**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image21.png)
diff --git a/docs/ja-jp/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/ja-jp/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..b6d475d
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,355 @@
+# 7つのAIプログラミングツールの比較
+
+## 本章のガイド
+
+数多くあるAIプログラミングツールの中で、どれが自分に一番合っているのでしょうか？本章では、統一された実践タスク——「スネークゲーム + AIで詩を作る」ゲームの開発——を通じて、Lovable、Replit、Z.aiなど7つの主要なWeb Vibe Codingプラットフォームを深く横断的に評価します。初心者へのやさしさ、コードの制御性、デプロイの便利さなど、複数の観点から比較し、あなたに最適な開発支援ツールの選び方をご案内します。
+
+---
+
+# 1. Vibe Codingでスネークゲームを作る：完全実践チュートリアル
+
+本記事では、「Vibe Coding（雰囲気コーディング）」と呼ばれる新興のソフトウェア開発手法についてご紹介します。これは人工知能を活用してアプリケーション構築プロセスを加速させる手法です。
+
+続いて、Vibe Codingの核心的な概念、AI Agentとは何かを説明し、実用的なプロンプトの書き方をご紹介します。最後に、ゼロから「スネーク（Snake）」ゲームを構築する完全な実践を通じて、複数の主要なVibe Codingプラットフォームを詳しく比較評価し、自分に最も適したツールの組み合わせを選べるようにします。
+
+## ここで学べる内容：
+
+- **Vibe Codingとは何か：** 定義、ワークフロー、そして主な利点について理解します。
+- **AI Agentの役割：** AI Agentの動作方式、および従来のプログラムとの違いを理解します。
+- **プロンプトの上手な書き方：** 明確で具体的なプロンプトの書き方を身につけ、より良い結果を得られるようになります。
+- **Vibe Codingツール：** 主要なAIプログラミング・デザインプラットフォームを知ります。
+- **プラットフォームの比較：** 初心者の視点から、7つの異なるAI Agentプラットフォームの長所と短所を評価・比較します。
+- **UI / UXツール：** Figma、MastergoなどのUI/UXツールを全体のワークフローに組み込む方法を学びます。
+
+## 1. はじめに
+
+これまでのレッスンでは、z.aiのフルスタック開発モデルを使ってプログラミングタスクを進めてきました。
+
+しかし、その核心が「AI Agent」であることはご存知でしょうか？（一般的なチャット式AIとは異なり、ずっとスマートです。）なぜなら、単に会話するだけでなく、思考（タスクを与えると、まず計画を立てます）し、自発的に行動（例えば、Web検索、PCコマンドの実行、Webページを開くなどのツールを呼び出す）できるからです。詳しくは後ほど説明します。
+
+## 1. Vibe Codingとは何か？
+
+Vibe Codingとは、AIを活用してアプリケーション開発プロセスを加速させる新しいソフトウェア開発手法です。従来のプログラミングの代替ではなく、より「対話型」のプログラミングモードと言えます。この概念はAI研究者のAndrej Karpathy氏によって提唱されました。このワークフローでは、開発者はコードを一行ずつ手書きするのではなく、主にAI Agentを誘導してアプリケーションの生成、最適化、デバッグを行います。
+
+Vibe Codingの核心的な考え方は、**「コード中心（code-first）」**から**「意図中心（intent-first）」**への転換です。もう最初の一行からコードを考える必要はなく、自然言語で期待する結果を記述するだけで済みます。
+
+典型的なVibe Codingのワークフローは、継続的なイテレーションのサイクルです：
+
+- **目標を記述する：** まず一文または一段落で実現したい機能を記述します。例：「Pythonバックエンド付きで、詩を生成できるシンプルなスネークゲームを作って。」
+- **AIがコードを生成：** AI Agentがあなたのニーズを解析し、基本構造、フロントエンドページ、バックエンドロジックを含む初版コードを生成します。
+- **実行して確認：** 生成されたコードを実行し、期待通りに動作するか確認します。同時にバグや不十分な点を見つけます。
+- **フィードバックして反復：** エラーや期待通りの結果でない場合は、チャットで引き続き指示を出します。例：「蛇の移動が遅すぎるので、速度を上げてください」や「`.env`ファイルのAPI Keyが正しく読み込まれていません。バックエンドコードを修正してください。」
+- **上記の手順を繰り返す：** 「記述 → 生成 → 実行 → フィードバック」のサイクルで継続的にイテレーションし、アプリケーションが満足できる状態になるまで続けます。
+
+### Vibe Codingの主な利点：
+
+- **敷居を下げる：** プログラミング経験のないデザイナー、起業家、学生なども、自然言語でアプリケーション開発に参加できるようになります。
+- **迅速なプロトタイピング：** アイデアから最小viable製品（MVP）までの時間が大幅に短縮されます。
+- **効率の向上：** テンプレートコードなど、大量の反復的・機械的なコーディング作業を自動処理し、開発者がアーキテクチャ設計や問題の抽象化に注力できるようにします。
+- **実験に有利：** まず迅速に成果物を作り、その後継続的に改良していくアプローチを奨励し、新しいアイデアや機能の試行がしやすくなります。
+
+## 2. Vibe Codingオンラインプラットフォーム（Web-based）とは何か？
+
+今回の実測では、評価するツールが**Web-based（オンラインプラットフォーム）**と**IDE（ローカル開発環境）**の2つのカテゴリーに分かれていることがわかります。
+
+どちらも基本的にはAIにコードを書かせる仕組みですが、使用感と適用シーンには大きな違いがあります：
+
+### Vibe Codingオンラインプラットフォーム (Web-based)
+
+**代表的なツール：** Lovable, Replit, Z.ai, v0
+
+「荷物を持ってすぐ入居できる」サービス付きマンションのようなものです。
+
+- **環境設定不要：** Python環境やNode.jsのバージョン、依存パッケージのインストールなどを気にする必要はありません。ブラウザを開いてURLを入力するだけで、すぐにコーディングを始められます。
+- **ワンクリックプレビューとデプロイ：** コードが生成されると、プラットフォームは通常、右側のウィンドウに自動的に実行結果を表示します。完成したら、ボタン一つでリンクを生成して友人に共有できます。
+- **適したシーン：**
+  - **アイデアの迅速な検証（MVP）：** 頭の中にアイデアがあり、30分程度で試してみたい場合。
+  - **初心者の入門：** 複雑な環境エラーで挫折したくなく、AIプログラミングの楽しさを体験したい場合。
+  - **軽量アプリケーション：** シンプルなツールWebページ、ミニゲーム、個人ポートフォリオページなど。
+
+### AI IDE (ローカル開発環境)
+
+**代表的なツール：** Cursor, Trae, VS Code + AIプラグイン
+
+「内装付き」の持ち家のようなものです。
+
+- **強力なローカル能力：** お使いのコンピュータ上で動作し、すべてのローカルファイルに直接アクセスでき、コンピュータの計算リソースを活用できます。
+- **プロのワークフローとシームレスに連携：** 大規模プロジェクトに適しており、各種プラグインを自由にインストールし、ローカルデータベースに接続し、複雑なデバッグが可能です。
+- **適したシーン：**
+  - **プロジェクト開発：** 長期メンテナンスが必要で、構造が複雑な商業プロジェクト。
+  - **深いカスタマイズ：** コードの細部を極限まで制御したい場合や、既存のローカルワークフロー（Git、Dockerなど）と深く統合する必要がある場合。
+  - **データプライバシー：** コードが完全にローカルにあり、企業のセキュリティ規範により適合します。
+
+**まとめると：** AIプログラミングに触れ始めたばかりの方や、手軽に小さなものを作ってみたい場合は、**オンラインプラットフォーム**が素晴らしい出発点です。プロの開発者の方や、プロジェクトが徐々に複雑になってきた場合は、**ローカルIDE**の方がより高い上限を提供してくれます。
+
+---
+
+## 3. AI Agentとは何か？
+
+### AI Agentとは何か？
+
+AI Agentとは、環境を認識し、意思決定を行い、特定の目標を達成するために自発的に行動できるソフトウェアシステムです。固定された指示に従い、単一のフローしか持たない従来のソフトウェアと比較して、AI Agentはより柔軟で適応性に優れています。
+
+AI Agentを従来のプログラムと区別する主な特徴は以下の通りです：
+
+- **自律性（Autonomy）：** AI Agentは高い独立性を持っています。従来のプログラムは通常、人間が一歩一歩トリガーする必要がありますが、Agentは目標に基づいて次に何をすべきかを自ら判断できます。
+- **知覚と記憶（Perception & Memory）：** Agentは環境からデータを収集し（例：APIレスポンス、センサーデータ、ユーザー入力など）、「記憶」を通じてコンテキストを保持し、その後の行動で経験を再利用し、効果を継続的に改善します。
+- **合理性と目標志向（Rationality & Goal-Orientation）：** Agentは与えられた目標に基づいて分析と計画を行い、より高い「パフォーマンス指標」を追求するために最適な行動シーケンスを選択します。
+- **ツールの使用（Tool Use）：** 近年のAI Agentの大きな特徴は、外部ツールを呼び出すことができ、「テキストの生成」にとどまらないことです。例えば、Webページの閲覧、コードの実行、データベースのクエリ、メールの送信などが可能で、「ツールを調整する」頭脳と言えます。
+
+このように例えて理解できます：
+
+- **従来のプログラム**は計算機のようなものです。数字と演算子を入力すると、ボタンを押した時にだけ計算を実行します。
+- **AIアシスタント**は人間のアシスタントのようなものです。「近くのレストランを探して」と頼むと、検索結果を表示し選択肢を提示しますが、最終的な決定はあなたが行います。
+- **AI Agent**は自動化された研究チームのようなものです。あなたは上位の目標（例：「日本旅行の計画を立てて」）を与えるだけで、Agentがタスクを分解し、インターネットで情報を調べ、航空券やホテルを予約し（API経由）、スケジュールを整理し、最終的に結果を届けてくれます。プロセスの細部にほとんど介入する必要はありません。
+
+---
+
+# 2. プロンプトの書き方について
+
+## 1. プロンプトは一度に書き上げる方が良いか、それとも複数ステップに分ける方が良いか？
+
+多くの人は、「完全なフルスタックアプリケーションを作る」ことを一つのプロンプトで一度にまとめたくなるでしょう。事実、現在のツールは十分に強力であり、一見それなりの結果を一度に出すことも可能です。しかし、全体的な体験と成功率から見ると、作業を小さなステップに分け、段階的にイテレーションする方が、結果的に良い成果が得られやすく、「どうしても変えられない」という行き詰まりに陥りにくくなります。
+
+> **ヒント：** 「一発で完璧」を期待するより、大きな目標を一つずつ実行可能な小さなTo-doに分割しましょう。
+> 例えば、「build me a Snake game」と直接言うのではなく、以下のように分けます：
+> 「1. まずスネークゲームのフロントエンドを作る」、
+> 「2. 次にスコアを記録するバックエンドを実装する」、
+> 「3. 最後にフロントエンドとバックエンドを繋ぐ」。
+> こうすることで、AIがあなたのニーズをより正確に理解し、より信頼性の高い出力を提供してくれます。
+
+## 2. 明確であればあるほど良い
+
+- Vibe Codingでは、あなたが書くプロンプトはコードと同じくらい重要です。プロンプトが明確で具体的であればあるほど、結果はあなたのイメージに近づきます。
+- 最初に目標と制約条件を明確にしておけば、後の修正の回数を減らすことができます。これは時間の節約になるだけでなく、使用量とコストの節約にもなります。
+
+---
+
+# 3. ツールの概要（Vibe Coding / UIUXツール）
+
+## 1. AI Agentプラットフォーム
+
+| **Name**                                   | **Platform** |
+| ------------------------------------------ | ------------ |
+| **[Lovable](https://lovable.dev/)**        | Web-based    |
+| **[Cursor](https://cursor.com/cn/agents)** | PC           |
+| **[Z.ai](https://chat.z.ai/)**             | Web-based    |
+| **[Replit](https://replit.com/~)**         | Web-based    |
+| **[Minimax](https://agent.minimaxi.com/)** | Web-based    |
+| **[Trae](https://www.trae.ai/)**           | PC           |
+| **[V0](https://v0.app/)**                  | Web-based    |
+
+## 2. AI UIUXプラットフォーム
+
+| **Name**                              | **Platform**         |
+| ------------------------------------- | -------------------- |
+| **[Mastergo](https://mastergo.com/)** | Web-based            |
+| **[FIgma](https://www.figma.com/)**   | Web-based, PC Plugin |
+
+---
+
+# 4. 実践チュートリアル（Vibe Coding + UIの組み合わせ）
+
+1. Vibe Codingを行うプラットフォームのチャットウィンドウで、作りたいプログラムの説明を入力します。
+   例：
+
+   > フロントエンドとバックエンドを備えたシンプルなスネーク（Snake）Webアプリケーションを構築してください。
+   >
+   > 1. フロントエンド
+   >
+   > - ページ1：ゲームページ
+   >   - キーボードで蛇の移動を操作します。
+   >   - 蛇が食べるのは食べ物ではなく、英単語です。
+   >   - ページのサイドバーに収集済みの単語とその数を表示します。
+   >   - ゲームオーバー後も、収集済みの単語は保持され、新しいゲームにも引き継がれます。
+   > - ページ2：詩を作るページ（Make Poem）
+   >   - ゲームページと同じ単語リストを表示します（データは同一）。
+   >   - ボタンを提供し、現在収集している単語をバックエンドに送信して詩を生成します。
+   >   - 詩の生成後、使用された単語をリストから削除またはカウントを減らします。
+   >
+   > * GameとMake Poemの2つのページ間を切り替えるためのシンプルなナビゲーションを追加してください。
+   > * 収集した単語が両方のページで確認できるようにしてください。
+   >
+   > 2. バックエンド
+   >
+   > - 収集した単語を受け取り、詩を返すバックエンドAPIを提供してください。
+   > - DeepSeek APIを使用して詩を生成します。
+   > - API Keyを`.env`ファイルに保存し、`.gitignore`でこのファイルを除外してください。
+
+2. DeepSeek API Keyを入力します。（[https://platform.deepseek.com/](https://platform.deepseek.com/)で取得できます）
+   1. LLMのAPI Keyは、あなた自身のプロジェクトで大規模言語モデルを呼び出すために使用します。これは機密情報であるため公開できず、設定ファイルに別途記載する必要があります。
+      **なぜ`.env`ファイルを使い、GitHubにアップロードしてはいけないのか？**
+   - `.env`ファイルは**鍵やパスワード**（例：DeepSeek API Key）を保存するために特化しています。
+   - このファイルがGitHubにアップロードされると、世界中の人があなたの鍵を見て不正使用する可能性があります。
+   - 安全のため、`.gitignore`ファイルで`.env`を除外するよう宣言し、Gitが追跡しないようにする必要があります。
+   - これにより、プロジェクトはローカルでこれらの鍵を正常に使用しながら、リポジトリで鍵が漏洩することはありません。
+
+3. 生成結果を確認した後、エラーや修正が必要な箇所があれば、チャットウィンドウで直接修正のリクエストを入力できます。
+4. ページデザインに満足できない場合は、FigmaやMastergoでインターフェースを再設計し、そのデザインコンセプトをAgentにフィードバックすることもできます。
+
+- **例**
+
+> _Word-Snake_ という名前の**2ページWebアプリケーション**を設計してください。
+>
+> - **Gameページ：**
+> - 蛇はキーボードで操作して移動します。
+> - 蛇が食べるのは通常の食べ物ではなく、英単語です。
+> - 右側のパネルに収集済みの単語と数を表示します。
+> - ゲームオーバー後も、単語の在庫はリセットされず、次のラウンドに引き継がれます。
+> - **Make Poemページ：**
+> - 同じ共有単語在庫を表示します。
+> - ユーザーが一部の単語を選択し、**Generate Poem**ボタンをクリックします。
+> - 選択した単語をバックエンドに送信し、DeepSeek APIで詩を生成します。
+> - 詩の生成後、使用された単語を在庫から削除または減らします。
+> - **ナビゲーション：** シンプルなTabまたはトップメニューで2つのページ間を切り替えます。
+> - **共有状態：** 収集した単語が両方のページで常に同期され、確認できるようにします。
+
+- **効果の例**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. AI Agentプラットフォームの比較（シンプルなプロジェクトに最適な組み合わせの選び方）
+
+それぞれのVibe Codingプラットフォームには独自の特徴とワークフローがあります。私たちは同一の「DeepSeek APIを組み込んだスネークゲーム」という要件を使って、複数のプラットフォームで実測を行い、初心者の視点から長所と短所を評価しました。以下はそのまとめです。
+
+## 1. 比較基準
+
+1. **目標（Goal）**
+   DeepSeek APIに接続されたスネーク（Snake）Webアプリケーションを構築する。
+2. **ゲームの詳細（Game Details）**
+   1. ゲームはDeepSeek LLM APIを使用して詩を生成します。
+   2. 蛇が食べるのは英単語で、収集された単語はゲーム終了後も保持され、新しいゲームでも引き続き使用されます。同じ単語は複数回収集でき、それぞれカウントされます。
+   3. 詩が生成された後、使用された単語は在庫から削除されます。
+
+3. **必須機能（Must-Haves）**
+   1. スネークゲームを含む実行可能なフロントエンドページ（キーボード操作、Canvasレンダリング）。
+   2. 単語収集の仕組み（単語がボード上に表示され、蛇が単語を食べるとサイドバーのリストが更新される）。
+   3. 複数ラウンドのゲーム間で単語在庫を永続化する機能。
+   4. DeepSeek APIを使用するバックエンド（API Keyがない場合は、まずモックの詩を返すようにする）。
+   5. 「詩を生成する」ボタン：クリック後にバックエンドを呼び出し、詩を表示し、使用状況に応じて単語在庫を更新する。
+   6. API Keyに対する`.env`サポート、および`.gitignore`による鍵の漏洩防止。
+
+4. **加点要素（Nice-to-Haves）**
+   1. ユーザーがどの単語を使って詩を生成するかを選択できる。
+   2. ユーザーエクスペリエンスが良い（例：サイドバーに単語リストが明確に表示される、詩の表示エリアのレイアウトが適切）。
+   3. 初心者向けにコードにコメントを追加し、主要なロジックを説明している。
+
+## 2. コーディング出力の比較
+
+### 1. Lovable（Web-based）
+
+- **プラットフォームタイプ：** Web
+- **主な特徴とワークフロー：** Lovableは統合とコラボレーションの面で優れています。Supabaseデータベースの接続などの初期化作業を自動的に完了し、プロジェクトのセットアッププロセスを非常にスムーズにします。プロジェクトの要件を記述するだけで、Agentが各種サービスを連携させ、基本構造を構築してくれます。
+- **対象ユーザー：** 初めてVibe Codingに挑戦する初心者にとって、Lovableは非常に使いやすい選択肢です。複数サービス連携の複雑さを簡略化し、環境設定ではなくプロンプトとイテレーションに集中できます。高度な自動化のおかげで、すぐに実行可能なプロトタイプを得られます。
+- **プロンプトのプロセス：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **スネークゲームの効果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **価格：** 比較的高めですが、学校のメールアドレスがあれば、学生認証により半額で利用できます。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor（IDE）
+
+- **プラットフォームタイプ：** デスクトップアプリケーション（PC）
+- **主な特徴とワークフロー：** CursorはAI機能を統合した専用IDEで、Windows、macOS、Linuxに対応しています。コード生成、スマートリライト、コードベース検索などの機能を開発環境に直接組み込んでいます。Webツールと比較すると、より従来のローカル開発体験に近いです。ローカル環境であるため、コンピュータごとの設定が異なり、環境関連の問題に遭遇することがあります。メリットは、プロジェクトがローカルにあるため、追加で実行環境をダウンロード・設定する必要がなく、Cursorが多くの煩雑な手順を処理してくれることです。
+- **対象ユーザー：** ある程度プログラミングの基礎があるユーザーにとって、Cursorは非常に強力で馴染みのある環境です。しかし、完全なゼロベースの初心者にとっては、プロジェクト構造、依存関係管理、ファイル編成などの概念を自分で理解する必要があり、学習曲線はやや急になります。従来のコーディングプロセスにAIアシスタントを加えたい開発者により適しています。
+- **プロンプトのプロセス：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **スネークゲームの効果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **価格：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai（Web-based）
+
+- **プラットフォームタイプ：** Web
+- **主な特徴とワークフロー：** Z.aiの使い方は比較的シンプルですが、明らかな課題が一つあります：**生成されたコードを手動でコピー＆ペーストする**必要があります。プラットフォーム自体にリアルタイムプレビューウィンドウがないため、コードの実行結果をすぐに確認するのが難しいです。
+- **対象ユーザー：** このプラットフォームは比較的「手動」の使用方式を求めます。自動化が少ないため、コードと直接向き合う必要があり、AIの出力内容を深く理解したい人にとっては逆に良い訓練になります。しかし、頻繁なコピー＆ペーストは効率の問題とミスのリスクをもたらします。ワンクリック体験を追求する人ではなく、「生のAI出力コード」を見たい方に向いています。
+- **プロンプトのプロセス：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **スネークゲームの効果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **価格：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit（Web-based）
+
+- **プラットフォームタイプ：** Web
+- **主な特徴とワークフロー：** Replitはオールインワンのオンライン開発・デプロイ環境で、ブラウザ上でコーディング、プログラムの実行、オンラインアクセスURLの生成が可能です。コーディングを始める前に、明確なアクションプランを提示します。またビジュアルエディタも提供しており、プレビューウィンドウで直接UIを変更でき、ソースコードが自動的に同期更新されます。これにより、AIの出力が期待通りかどうかを随時確認でき、修正の往復を大幅に減らすことができます。
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **対象ユーザー：** Replitは初心者に非常に使いやすいです。コーディングからデプロイまでの完全なサイクルを簡略化し、自前でサーバーやホスティングサービスを設定する必要がありません。コラボレーション機能も強力で、同級生と一緒にプロジェクトを作ったり、他の人にリモートでコードを見てもらうのに適しています。
+- **プロンプトのプロセス：** 構築中、AIは最初から要件を完全に理解しているわけではなく、約3ラウンドのイテレーションを経て、最終的に理想的な結果に到達しました。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **スネークゲームの効果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **価格：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Minimax（Web-based）
+
+- **プラットフォームタイプ：** Web
+- **主な特徴とワークフロー：** Minimaxはタスクの実行に通常かなり時間がかかります。そのプロセスには、AIが自動的にエラーを発見して修正することが多く含まれるため、全体として遅く、やや手間がかかる印象です。本プロジェクトを例にすると、Agentは通常まず詳細な計画を作成し、その後ステップバイステップでバックエンド、データベース、フロントエンドのロジックを構築していきます。
+- **対象ユーザー：** 自動的にテストを実行しエラーを修正するため、時間とTokenの消費が大きいですが、AIがどのように問題を特定し解決するかを明確に観察でき、学習の観点からは非常に価値があります。
+- **プロンプトのプロセス：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+- **スネークゲームの効果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+
+- **価格：** 無料版では複雑なプロジェクトを最初から最後までスムーズに完了するのが難しい場合があるため、プロジェクトを完全に構築できるよう、有料プランへのアップグレードをお勧めします。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+### 6. Trae（IDE）
+
+- **プラットフォームタイプ：** デスクトップアプリケーション（PC）
+- **主な特徴とワークフロー：** デスクトップアプリケーションとして、TraeはWebツールと比較してパフォーマンスとレスポンス速度で通常優位性があります。ただし、ダウンロードとインストールが必要で、一部のユーザーにとっては導入の敷居が少し高くなります。同様に、ローカル環境であるため、コンピュータの設定や依存環境の違いにより、ある程度の不確実性が生じます。メリットは、Traeがローカルでのプロジェクト作成と実行設定を支援し、直接ローカルで開発とデバッグができることです。
+- **対象ユーザー：** 長期的にVibe Codingプロジェクトを行い、専用のデスクトップツールを使用したいと考えているユーザーにより適しています。「たまに遊んでみたい」だけの方には、最も軽量な選択肢ではないかもしれません。
+- **プロンプトのプロセス：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+- **スネークゲームの効果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+
+- **価格：** 価格は比較的手頃で、無料版でも品質の良い小規模プロジェクトを十分に完了できます。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+### 7. V0（Web-based）
+
+- **プラットフォームタイプ：** Web
+- **主な特徴とワークフロー：** V0はVercelが提供する、React UIコンポーネントの生成に特化したツールです。高品質で本番環境に使用可能なインターフェースの生成において優れたパフォーマンスを発揮します。ただし実際の使用では、「コードビューが見つけにくい」「API Keyをどこに設定すべきかの明確な説明がない」といった問題に直面することがあります。
+- **対象ユーザー：** V0はフロントエンドとUI/UXデザインに注力する学生やデザイナーに非常に適しています。しかし完全なフルスタックソリューションではなく、バックエンドロジックとAPI統合を実装するには他のプラットフォームを使用する必要があるため、「ワンストップで完全なアプリケーションを構築する」ことが目標であれば、最適な第一選択ではないかもしれません。
+- **プロンプトのプロセス：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
+
+- **スネークゲームの効果：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
+- **価格：** 無料ユーザーは約4〜5個のシンプルなプロジェクトを構築できます。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
+
+## 3. プラットフォームの総合比較
+
+| **プラットフォーム**                         | **レビュー**                                                                               | **Platform** | **備考**                                                                                   |
+| ------------------------------------------ | ------------------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------------------ |
+| **[Lovable](https://lovable.dev/)**        | AIプログラミング初心者に非常にやさしく、操作がシンプルで体験がスムーズ。理想的な入門選択。 | Web-based    | Supabaseなどのサービス接続を自動的に完了し、設定コストを削減。                               |
+| **[Cursor](https://cursor.com/cn/agents)** | 開発経験のあるユーザーに適しており、生産性とコード品質を大幅に向上。                       | PC           | ある程度のプログラミング基礎が必要。ローカル環境ではプロジェクト構造や依存関係を自分で理解する必要がある。 |
+| **[Z.ai](https://chat.z.ai/)**             | プログラミングの基礎があり、AI出力コードの細部を直接研究したいユーザーにより適している。   | Web-based    | プレビューウィンドウがなく、結果の確認が面倒。コードの手動貼り付け、フォルダやファイルの手動作成、サービスの手動実行が必要。 |
+| **[Replit](https://replit.com/~)**         | アイデアを素早くアクセス可能なオンラインサービスにしたいユーザーにお勧め。                 | Web-based    | オールインワンのオンライン開発・デプロイ。コラボレーション対応、ビジュアルエディタ付き。       |
+| **[Minimax](https://agent.minimaxi.com/)** | AIの自動的なエラー検出と修正の全プロセスを見て学びたい人に適しているが、全体として遅くToken消費が大きい。 | Web-based    | 全プロセスが長く、AIが複数回自動テストを実行してエラーを修正する。                              |
+| **[Trae](https://www.trae.ai/)**           | プログラミング経験があり、デスクトップIDE + AI Agentの組み合わせを使いたいユーザー向けの効率向上ツール。 | PC           | ローカルインストールと環境設定が必要だが、パフォーマンスが良く、長期的なVibe Codingプロジェクトに適している。 |
+| **[V0](https://v0.app/)**                  | React UIの視覚効果を素早く作りたい非開発者向けに最適化。フロントエンド/デザイン志向の学生に適している。 | Web-based    | React UI生成に特化。バックエンドや完全なアプリケーション構築には他のプラットフォームとの連携が必要。 |
diff --git a/docs/ja-jp/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/ja-jp/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..a68b30b
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,344 @@
+# デザインとプログラミングAgentでウェブサイトを設計する
+
+## 本章の概要
+
+本章では、デザインと開発がAIを通じてどのように完璧に連携できるかを紹介します。あなたはプロダクトマネージャーの役割を担い、「デザインAgent」にロゴデザイン、カラースキーム、ページレイアウトを指示し、その後「プログラミングAgent」と協力してビジュアル稿を実行可能なコードに変換します。アイデアの構想からウェブサイトの公開まで、フルパイプラインのAI活用開発フローを体験し、一人でチームを務められるようになります。
+
+---
+
+# 1. 入門ガイド
+
+## 1. チュートリアルの紹介
+
+AIデザインAgentとコーディングAgentを使って、ゼロから完全なウェブサイトを構築しましょう。
+
+- **デザインAgent**：ロゴ、ウェブページレイアウト、カラースキームなどのビジュアル要素の作成を担当
+- **コーディングAgent**：あなたがプロンプトで指定した要件とレイアウトに基づいて、HTML/CSS/JSなどの実際のコードを記述し、実行可能なウェブサイトを構築
+
+## 2. デザインAgentとコーディングAgent
+
+- **デザインAgent**：あなたが提供するプロンプトに基づいて、画像、ページモックアップ、デザインスタイルを生成するAI。
+- Mastergo
+- Lovart
+- Figma MCP
+- **コーディングAgent**：あなたがプロンプトで要求した機能とレイアウトに基づいて、実際のコード（HTML/CSS/JSなど）を記述するAI。
+- Z.AI
+- Trae
+- Cursor
+- Lovable
+
+---
+
+# 2. デザインAgentを使ってロゴを作成
+
+## 1. ロゴデザイン時に考慮すべき重要要素
+
+ロゴは、ウェブサイトの第一印象を決定づける重要な要素の一つです。AIデザインAgentから満足のいく結果を得るには、プロンプトで希望するロゴのタイプを明確に説明する必要があります。
+
+1. **ブランド名 / テキスト**
+
+- ロゴに含める必要のあるテキスト（例：ウェブサイトタイトル、ブランド名など）。
+
+2. **スタイル（ムード / 雰囲気）**
+
+- ロゴが伝えたい全体的な感覚や雰囲気。
+- _例：ミニマル、キュート、シンプル、モダン、レトロ、未来感など。_
+
+3. **カラースキーム**（任意）
+
+- ロゴの配色は、ウェブサイト全体の基調と一致させることが望ましい。
+- 具体的な16進数カラーコードや、大まかな色調（寒色、暖色など）を指定可能。
+- _例：**`#171721`**（黒）、**`#FF7130`**（オレンジ）。_
+
+4. **形状（シェイプ / 構造）**
+
+- ロゴに特定の形状や構図が必要かどうかを明確にする。
+- _例：円の中にテキスト、アイコン＋テキストの組み合わせ、アイコン中心のロゴなど。_
+
+5. **アイコン / シンボル要素**（任意）
+
+- ロゴに含めたい図形や記号。
+- _例：本のアイコン、稲妻のシンボル、AI関連の図形、抽象的なジオメトリックパターンなど。_
+
+## 2. ロゴデザインのプロンプト作成
+
+**プロンプト例**
+
+```
+「ミニマルスタイルのロゴをデザインしてください。ブランド名は 'My First Website'。
+黒 (#171721) とオレンジ (#FF7130) を使用し、テキストを円の中に配置してください。」
+```
+
+```
+「ブランド名 'AIID' のロゴをデザインしてください。
+全体的に未来感があり、クリーンでシンプルなスタイルに。メインカラーは青と白。
+AIを象徴する抽象的な図形とテキストを組み合わせ、透明背景のPNGで書き出してください。」
+```
+
+## 3. Agentにデザインを依頼
+
+- 上記のプロンプトを入力 → Agentが生成した複数のデザイン案を比較。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. 最終ロゴを決定
+
+- 草案の中から一番好きなバージョンを選択してダウンロード。
+
+---
+
+# 3. ウェブサイトの構造を計画
+
+## 1. 基本セクションを理解する
+
+ウェブサイトの制作を始める前に、どのメニュー（セクション）を含めるかを計画することが重要です。メニューの設計は、訪問者に何を見せたいか、そしてどのような行動をとってほしいかによって決まります。
+一般的に、ウェブサイトは **Home / About / Contact** などの基本セクションで構成されます。
+
+## 2. 構造スケッチを自分で描く（任意）
+
+ウェブサイトの目的に基づいて、簡単なメニュー構造を書き出すことができます。
+
+### 基本メニュー
+
+1. **Home**
+   1. 訪問者がウェブサイトに入って最初に見るメインページ
+   2. 通常、ロゴ、ヒーローエリア、短いキャッチフレーズや紹介文が含まれる
+2. **About**
+   1. あなたが誰か、またはプロジェクト/サービスの目的を紹介
+   2. 個人ポートフォリオ：自己紹介＋略歴
+   3. サービス系ウェブサイト：ビジョン、目標、コア機能
+3. **Contact**
+   1. 連絡先情報（メールアドレス、電話番号、ソーシャルメディアリンクなど）
+   2. シンプルなお問い合わせフォームを追加することも可能
+
+### オプションメニュー
+
+4. **Services / Projects**
+   1. 提供するサービスや、プロジェクト/ポートフォリオの紹介
+   2. 通常、リストやカード形式で表示
+
+5. **Gallery**
+   1. 画像、写真、デザイン作品の展示用
+
+6. **Blog / News**
+   1. 記事、ニュース、ログの公開用
+
+7. **FAQ**
+   1. 訪問者からよくある質問と回答のまとめ
+
+## 3. カラースキームの選択（任意）
+
+すでにロゴがある場合や、特定のカラーリングでウェブサイトをデザインしたい場合は、プロンプトにカラーコードを直接指定することもできます。
+
+**例：** `#171721, #872B97, #FF7130, #FF3C68`
+
+カラースキームが思い浮かばない場合は、配色ウェブサイトやキーワード検索でインスピレーションを見つけることもできます。
+
+- **配色参考ウェブサイト**
+  - https://colorhunt.co/
+  - https://coolors.co/
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+- **Googleでキーワード検索して配色を探す**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. ウェブサイトデザインのプロンプト作成
+
+**プロンプト例**
+
+```
+「Home、About、Contactの3つのセクションで構成されるシングルページウェブサイトをデザインしてください。
+配色は #171721、#FF7130、#FF3C68 を使用。
+全体的にモダンでシンプルなスタイルに。」
+```
+
+---
+
+# 4. デザインAgentを使ってウェブサイトを設計
+
+## 1. プロンプトを入力 → デザイン稿を生成
+
+- プロンプトに計画した構造と選択した配色を記載。
+
+**Mastergoプロンプト例**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+## 2. デザイン稿を確認し修正意見を提示
+
+自分のニーズに合わせて、Agentにフィードバックを提出できます。例えば：
+
+- 「派手すぎるので、全体的にもっとシンプルなスタイルに変更して。」
+- 「フォントを変えて。」
+- 「カラーリングを調整して。」
+- 「この部分を削除して。」
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
+
+## 3. 最終デザインを確定
+
+デザイン稿を複数回修正して満足したら、このデザインをコードに変換し、コーディングAgentが理解して作業を続けられるようにします。
+
+デザインをコードに変換する方法はプラットフォームによって異なりますが、通常はデザインプラットフォーム内で特定のプラグインをインストールして使用します。
+
+**Mastergoの例**
+
+1. [Mastergoプラグインサイト](https://mastergo.com/community/plugin)を開き、**seal** を検索。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
+
+2. デザインページに戻り、**四角アイコン（プラグイン）** をクリック。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
+
+3. コードに変換したいデザイン領域を選択し、**Generate** ボタンをクリックしてコードを生成。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
+
+---
+
+# 5. コーディングAgentを使ってウェブサイトを構築
+
+## 1. HTML/CSS/JSの基本概念を理解する
+
+ウェブサイトは本質的に3つの言語で構成されています：
+
+- **HTML（HyperText Markup Language）** → 構造（骨組み）
+- **CSS（Cascading Style Sheets）** → スタイル（外観）
+- **JavaScript（JS）** → 機能（インタラクション）
+
+この3つが連携して、私たちが見る完全なウェブページを構成します。
+
+1. **🏗️ HTML（構造）**
+
+- ページに「何を表示するか」を定義
+- テキスト、画像、ボタン、リンクなどの要素を配置
+- 建物の **壁と骨組み** に相当
+
+**例**
+
+```html
+<h1>こんにちは！</h1>
+<p>これが私の最初のウェブサイトです。</p>
+<a href="contact.html">お問い合わせ</a>
+```
+
+2. **🎨 CSS（スタイル）**
+
+- 「コンテンツをどのように表示するか」を決定
+- 文字サイズ、色、余白、背景、ボタンの形状などを制御
+- HTMLに「服」とビジュアルスタイルを与える
+
+**例**
+
+```css
+h1 {
+  color: #FF7130;   /* テキストカラー */
+  font-size: 36px;  /* フォントサイズ */
+  text-align: center; /* 中央揃え */
+}
+
+body {
+  background-color: #171721; /* 背景色 */
+  color: white; /* デフォルトテキストカラー */
+}
+```
+
+3. **⚙️ JavaScript（JS）（機能）**
+
+- ウェブページをユーザーとインタラクティブにする
+- ボタンクリック、メニュー展開、画像スライダー、フォーム送信などの動的効果を実現
+- HTML/CSSが静的な骨組みと外観だとすれば、JSはウェブページを「活かす」 **脳** に相当
+
+**例**
+
+```javascript
+function showAlert() {
+  alert("ボタンがクリックされました！");
+}
+```
+
+```html
+<button onclick="showAlert()">クリックして</button>
+```
+
+## 2. コーディングAgentにコードを生成させる
+
+**プロンプト例**
+
+```
+「Home、About、Contactセクションを含むシングルページウェブサイトのHTMLとCSSを書いてください。
+配色は #171721、#FF7130、#FF3C68 を使用。
+背景は黒、テキストは白にしてください。」
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
+
+## 3. ウェブサイトを実行
+
+ラフコードが生成されると、Agentは通常プロジェクトを自動的に起動し、生成されたウェブページを表示します。
+
+Agentを再起動した場合や、ウェブページが表示されない場合は、次のようなプロンプトを入力してください：
+
+```
+"Please activate the project"
+```
+
+Agentがプロジェクトを再起動しプレビューページを開くので、現在の効果を確認しやすくなります。
+
+## 4. 簡単な修正を行う
+
+引き続き自然言語でラフデザインを微調整できます。例えば：
+
+- 「ボタンをもっと大きくして。」
+- 「フォントを太くして。」
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
+
+## 5. ウェブサイトのテキスト内容を修正
+
+Agentが生成した初期版のウェブサイトには、通常、自動生成されたプレースホルダーテキストが含まれています。実際のシナリオに近づけるために、事前に実際の内容を用意し、Agentに置き換えてもらうことができます。
+
+**応用例**：AIIDウェブサイトのAboutページを更新
+
+1. Aboutページに表示したい内容を事前に書く。Agentが理解しやすいように、Markdown形式で保存すると便利。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
+
+2. ダイアログでAgentに、そのファイルの内容を指定ページに適用するよう指示。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
+
+3. 内容適用後の更新版を確認。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
+
+## 6. 画像を挿入
+
+特定の画像（ロゴや背景画像など）を追加したい場合は、まず画像をプロジェクトフォルダにアップロードし、プロンプトでページのどの位置にこれらの画像を使用するかを指定します。
+
+- **例：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png)
+
+- **結果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png)
+
+---
+
+# 6. デザインとコードの統合
+
+## 1. デザインファイルとウェブサイトコードを統合（任意）
+
+デザインAgentからコードファイルをダウンロードした後、それらを現在のプロジェクトディレクトリに移動し、コーディングAgentにこれらのデザインコードと既存プロジェクトの統合を依頼できます。
+
+- **例：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png)
+
+- **結果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
diff --git a/docs/ja-jp/stage-1/appendix-b-common-errors/index.md b/docs/ja-jp/stage-1/appendix-b-common-errors/index.md
new file mode 100644
index 0000000..b802121
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-b-common-errors/index.md
@@ -0,0 +1,325 @@
+---
+title: 'コードを書くときにエラーが出たらどうするか - スクリーンショットでAIに聞く実践ガイド'
+description: 'AIに効率的に質問して開発中の様々なエラー問題を解決する方法を学び、スクリーンショット、説明、問題箇所の特定の標準フローを習得し、AIをデバッグアシスタントにする。'
+---
+
+<script setup>
+const duration = '約 <strong>30 分</strong>'
+</script>
+
+# コードを書くときにエラーが出たらどうするか
+
+## 本章のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['デバッグのコツ', 'AI協働', '問題トラブルシューティング', '開発者ツール']" coreOutput="標準化されたエラートラブルシューティングフロー" expectedOutput="よくあるエラーの90%を自力で解決できる">
+
+AI時代において、エラーのトラブルシューティング方法はすでに変わりました。
+
+すべてのエラータイプを暗記する必要も、デバッグの専門家になる必要も、エラーの意味を理解する必要すらありません。
+
+<strong>覚えるべきことは一つだけ：AIへの聞き方。</strong>
+
+本章では、<strong>基礎から応用まで</strong>のトラブルシューティングフローを教えます：
+
+1. <strong>ステップ1：直接聞く</strong>：現象を説明 + スクリーンショット、一言で質問
+2. <strong>ステップ2：情報を追加</strong>：解決できない場合、F12を開いて重要情報を追加
+
+このフローをマスターすれば、<strong>エラーの90%は自分で解決できます</strong>。
+
+</ChapterIntroduction>
+
+::: info 説明
+本章のすべての方法は、Cursor/Trae/Claude等のAI IDEの実際の使用経験に基づいており、日常開発に直接応用できます。
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '直接質問', description: '現象を説明 + スクリーンショット' },
+      { title: '情報を追加', description: 'F12を開いて問題を特定' },
+      { title: '反復解決', description: '問題が解決するまで' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 核心のコツ：スクリーンショットでAIに聞く
+
+::: warning なぜこの章が重要なのか？
+
+多くの初心者がエラーに遭遇したときの最初の反応は：
+- 慌ててコードを適当にいじる
+- 「xxx エラーの解決方法」を30分かけて検索する
+- エラーの意味を理解しようとする
+- 一人で深夜までデバッグする
+
+<strong>これらはすべて時間の無駄です。</strong>
+
+AI時代において、デバッグはとてもシンプルなことになりました：
+
+```
+エラーを発見 → スクリーンショット → AIに聞く → AIの指示に従う
+```
+
+エラーを理解する必要も、デバッグができる必要も、問題がどこにあるかを知る必要すらありません。
+
+<strong>必要なのは「聞き方」を学ぶことだけです。</strong>
+
+:::
+
+### 1.1 最もシンプルな質問方法
+
+複雑なテンプレートは不要で、以下の2つの方法から選べます：
+
+**方法1：現象を説明する**
+
+フォーマット：さっき何をしたか、今どうなったか
+
+```
+さっきログインページのコードを修正したら、ページが白くなってしまいました。どうすればいいですか？
+```
+
+**方法2：スクリーンショット**
+
+現在のページやエラー情報を直接スクリーンショットで撮る
+
+```
+[スクリーンショット]
+
+このエラーはどうやって解決しますか？
+```
+
+**最良の方法：説明 + スクリーンショット**
+
+```
+さっきログインページのコードを修正したら、ページが白くなってしまいました。
+
+[スクリーンショット]
+
+どうすればいいですか？
+```
+
+**覚えておいてください：コンテキストを明確に説明し、スクリーンショットを添えれば、AIがより早く問題を解決してくれます。**
+
+### 1.2 問題をうまく伝える方法
+
+多くの初心者は質問したいことは分かっていても、どう言えばいいか分かりません。実際には、次の3つを明確にするだけで十分です：
+
+**1. さっき何をしたか**
+
+```
+さっき保存ボタンをクリックしました
+さっきログインページのコードを修正しました
+さっきページをリロードしました
+```
+
+**2. 今どうなっているか**
+
+```
+ページが空白になっています
+ボタンを押しても反応しません
+エラーメッセージが表示されています
+```
+
+**3. どうしたいか**
+
+```
+データを保存させたい
+ページを正常に表示させたい
+ボタンを押した後にプロンプトを表示させたい
+```
+
+**完全な例：**
+
+```
+さっき保存ボタンをクリックしたら、「保存に失敗しました」というエラーが表示されました。
+
+[スクリーンショット]
+
+フォームデータをデータベースに正常に保存したいのですが、どうすればいいですか？
+```
+
+**重要な原則：**
+- 専門用語を使わず、平易な言葉で説明する
+- 時系列で説明する：先に何をして、それからどうなったか
+- 自分の期待を伝え、AIに何をしてほしいかを伝える
+
+## 2. ステップ1：直接現象を説明して質問する
+
+問題に遭遇したら、<strong>急いでF12を開く必要はありません</strong>。まず現象を直接説明し、現在のページのスクリーンショットを撮ってAIに見せましょう。
+
+多くの場合、AIはスクリーンショットを見るだけで直接解決策を提示できます。
+
+### 2.1 よくある現象の説明方法
+
+::: tip 直接説明すればOK
+
+**ページが白い**
+```
+ページを開いたら空白になっています。どうすればいいですか？
+
+[スクリーンショット]
+```
+
+**ボタンを押しても反応しない**
+```
+このボタンを押しても反応しません。見てください。
+
+[スクリーンショット]
+```
+
+**データが保存できない**
+```
+保存を押してもデータが保存されません。どうすればいいですか？
+
+[スクリーンショット]
+```
+
+**スタイルの表示がおかしい**
+```
+このボタンの位置がずれています。どうやって調整しますか？
+
+[スクリーンショット]
+```
+
+**APIエラー**
+```
+APIを呼び出したらエラーが出ました。見てください。
+
+[スクリーンショット]
+```
+
+:::
+
+### 2.2 AIが直接解決してくれたら
+
+おめでとうございます、問題は解決しました！AIの指示通りに修正すればOKです。
+
+### 2.3 AIが「もっと情報が必要」と言ってきたら
+
+このとき初めてF12を開いて、重要情報を追加する必要があります。次をご覧ください。
+
+## 3. ステップ2：重要情報を追加する
+
+AIが「もっと情報が必要」と言ってきたら、問題のタイプに応じてF12を開いて対応する内容のスクリーンショットを撮ります。
+
+### 3.1 いつ情報を追加する必要があるか
+
+AIから以下のような回答が来るかもしれません：
+- 「Consoleを開いてエラーがないか確認してください」
+- 「Networkパネルのスクリーンショットを見せてください」
+- 「具体的なエラー情報を見る必要があります」
+
+このような場合は、以下のガイドに従ってスクリーンショットを追加してください。
+
+### 3.2 Console情報の追加（ページが白い/エラーが出る場合）
+
+::: tip 操作手順
+
+**ステップ1：F12で開発者ツールを開く**
+
+Macは `Cmd+Option+I`、またはページを右クリックして「検証」を選択。
+
+**ステップ2：Consoleタブに切り替える**
+
+**ステップ3：赤いエラー情報をスクリーンショット**
+
+**ステップ4：AIに送る**
+
+```
+Consoleエラーは以下の通りです：
+
+[スクリーンショット]
+```
+
+:::
+
+### 3.3 Network情報の追加（データの問題/APIエラー）
+
+::: tip 操作手順
+
+**ステップ1：F12で開発者ツールを開く**
+
+**ステップ2：Networkタブに切り替える**
+
+**ステップ3：もう一度操作する**（保存をクリック/ページをリロード）
+
+**ステップ4：対応するリクエストを見つけてスクリーンショットを撮る**
+
+- URLとステータスコードを確認
+- Payload（送信パラメータ）を確認
+- Response（返却結果）を確認
+
+**ステップ5：AIに送る**
+
+```
+Network情報は以下の通りです：
+
+リクエスト：[スクリーンショット1]
+パラメータ：[スクリーンショット2]
+レスポンス：[スクリーンショット3]
+```
+
+:::
+
+### 3.4 Elements情報の追加（スタイルの問題）
+
+::: tip 操作手順
+
+**ステップ1：要素を右クリック → 「検証」**
+
+開発者ツールが自動的にその要素にフォーカスします。
+
+**ステップ2：Stylesパネルのスクリーンショット**
+
+**ステップ3：AIに送る**
+
+```
+要素のスタイルは以下の通りです：
+
+[スクリーンショット]
+```
+
+:::
+
+## 4. ステップ3：解決するまで反復する
+
+### 4.1 非効率なやり方
+
+以下のやり方は時間の無駄です：
+
+エラーを見て慌てて、コードを適当にいじる
+30分かけてエラーの解決方法を検索する
+各エラーの意味を理解しようとする
+一人で深夜までデバッグする
+
+### 4.2 効率的なやり方
+
+以下のフローに従いましょう：
+
+まず現象を説明してスクリーンショットで質問する
+AIが「もっと情報が必要」と言ってきたら、F12を開いて追加情報を提供する
+アドバイスに従ってコードを修正する
+修正後にテストし、問題が残っていればスクリーンショットを撮って再度質問する
+
+## 5. まとめ：完全なフロー
+
+```
+問題に遭遇
+    ↓
+現象を直接説明 + スクリーンショット
+    ↓
+AIに投げる：「どうすればいいですか？」
+    ↓
+AIが直接解決したか？
+    ↓ はい
+AIの指示に従う
+    ↓
+解決したかテストする
+    ↓
+    ↓ いいえ / AIがもっと情報を必要としている
+F12を開いて、重要情報を追加する
+    ↓
+再度AIに送る
+    ↓
+解決するまで繰り返す
+```
diff --git a/docs/ja-jp/stage-1/appendix-c-consumer-scenarios/index.md b/docs/ja-jp/stage-1/appendix-c-consumer-scenarios/index.md
new file mode 100644
index 0000000..0e75310
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-c-consumer-scenarios/index.md
@@ -0,0 +1,633 @@
+---
+title: 'C 誌消費シーンインスピレーションリファレンス'
+description: '本文書は LLM 大規模モデルの C 誌消費シーンにおけるクリエイティブな応用方向をまとめ、ライフスタイル、感情コンパニオン、エンターテインメント、自己成長、ソーシャルインタラクションなどの分野のインスピレーションシーンを網羅し、一般消費者向けの AI アプリケーション開発者に参考を提供します。'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = '約 <strong>4 時間</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// 各シーンのトピックプール - 雰囲気、感覚、心理的暗示を強調
+const topicPool = {
+  'lifestyle': [
+    { title: '朝の儀式感アラームアシスタント', desc: '天気、スケジュール、気分に基づいて専用の朝の儀式を生成し、毎日を素晴らしいスタートから始める' },
+    { title: '一人暮らしの雰囲気クリエイター', desc: '一人暮らしの方に居家の雰囲気プランを設計、照明、音楽、アロマのスマートな組み合わせアドバイス' },
+    { title: '週末のおうちデート回復プランジェネレーター', desc: '今の気分に基づいて完璧なおうちコンボを推奨：映画＋おやつ＋雰囲気コーディネート' },
+    { title: '就寝前の心の癒しラジオ', desc: '優しい物語、瞑想ガイドを生成し、眠りをサポートするプライベートラジオ' },
+    { title: '暮らしの美学インスピレーションキャッチャー', desc: '日常の小さなことから美を発見し、暮らしの美学提案と儀式感ガイドを生成' }
+  ],
+  'emotion': [
+    { title: '深夜のツリーくり聞き手', desc: '24 時間オンラインの感情のゴミ箱、判断せずにすべての悩みを受け止める' },
+    { title: '失恋回復コンパニオン', desc: '失恋のどん底期に優しい寄り添い、回復アドバイスと感情の出口を提供' },
+    { title: '不安緩和呼吸コーチ', desc: '不安感情を感知し、呼吸練習とマインドフルネス瞑想をガイド' },
+    { title: '自信再構築メンター', desc: 'ポジティブな対話と心理的暗示を通じて、自己肯定感と価値観の再構築をサポート' },
+    { title: '感情日記スマート分析', desc: '感情日記を分析し、感情パターンを発見、温かいインサイトとアドバイスを提供' }
+  ],
+  'entertainment': [
+    { title: '没入型マーダーミステリー DM', desc: 'マーダーミステリーのゲームマスターを演じ、サスペンスの雰囲気を作り出し、ストーリーを進行' },
+    { title: 'オープンワールドゲームの魂の NPC', desc: '血の通った NPC がプレイヤーのストーリーを記憶し、リアルな感情的絆を生み出す' },
+    { title: 'パーソナライズドポッドキャスト生成', desc: '興味に基づいて専用ポッドキャストを生成、友達とのおしゃべりのように自然' },
+    { title: 'バーチャルコンサートの盛り上げ役', desc: 'オンラインコンサートにライブ感を演出、リアルタイムインタラクション、応援、雰囲気レンダリング' },
+    { title: 'インタラクティブ小説共創パートナー', desc: '読者と一緒にストーリーを共創、すべての選択が世界の行方に影響' }
+  ],
+  'growth': [
+    { title: '個人の成長の証人', desc: '成長の軌跡を記録し、重要な節目で励ましと振り返りを提供' },
+    { title: '習慣形成ゲーム化コーチ', desc: '退屈な習慣形成を面白い冒険ゲームに変える' },
+    { title: 'スキル学習パートナーマッチング', desc: '志を同じくする学習仲間を見つけ、お互いに励まし合い、進歩を共有' },
+    { title: '毎日の小さな幸せ発見者', desc: '生活の中の小さな美しい瞬間を見つける手助け、感謝とポジティブなマインドを育む' },
+    { title: '人生シミュレーション体験器', desc: '異なる人生の選択肢をシミュレートし、パラレルワールドのもう一つの可能性を体験' }
+  ],
+  'social': [
+    { title: 'アイスブレイクトピックジェネレーター', desc: 'ソーシャルシーンで面白いトピックを提供し、気まずさを解消、距離を縮める' },
+    { title: 'SNS投稿文雰囲気クリエイター', desc: '写真と気分に基づいて、おしゃれな SNS 投稿文を生成' },
+    { title: 'デート雰囲気プランナー', desc: 'デートに完全な雰囲気プランを設計、場所からトピック、サプライズまで' },
+    { title: 'オンライン飲み会の盛り上げ役', desc: 'オンラインパーティーで盛り上げ、ゲームの企画、インタラクションをガイド' },
+    { title: 'ソーシャルエネルギー管理アシスタント', desc: '内向的な方のソーシャルエネルギー管理をサポート、快適なソーシャルペースを見つける' }
+  ],
+  'creative': [
+    { title: 'インスピレーション枯渇応急キット', desc: 'クリエイティブの行き詰まり時に予想外のインスピレーションスパークを提供' },
+    { title: '個人スタイル探索ガイド', desc: 'ユニークな個人スタイルの発見をサポート、ファッションから表現まで' },
+    { title: '手帳＆日記美学アドバイザー', desc: '手帳のレイアウト、配色、コンテンツアイデアの美学アドバイスを提供' },
+    { title: '写真構図雰囲気ガイド', desc: 'シーンと表現したい感覚に基づいて、写真とレタッチのアドバイスを提供' },
+    { title: '音楽気分マッチング', desc: '今の気分とシーンに基づいて、完璧な音楽コンボを推奨' }
+  ],
+  'travel': [
+    { title: '街歩き探索ガイド', desc: '地元の人のように街を探索し、隠れた宝スポットを発見' },
+    { title: '旅行気分日記生成', desc: '旅行の写真と気分を美しい旅行記と思い出に変換' },
+    { title: '一人旅コンパニオンアシスタント', desc: '一人旅の方に寄り添い、アドバイスと安心感を提供' },
+    { title: '目的地雰囲気プレビュー', desc: '出発前に目的地の雰囲気を没入的に体験、事前に入り込める' },
+    { title: '旅行写真雰囲気ガイド', desc: 'シーンと光に基づいて、ストーリー性のある旅行写真の撮り方をガイド' }
+  ],
+  'health': [
+    { title: '運動モチベーション覚醒師', desc: '動きたくない時にちょうどいい励ましとモチベーションを与える' },
+    { title: 'ヘルシー食インスピレーションキッチン', desc: '気分と食材に基づいて、癒されるヘルシーレシピを生成' },
+    { title: '睡眠の質向上雰囲気クリエイター', desc: '環境から心理まで、全方位に質の高い睡眠雰囲気を作り出す' },
+    { title: 'ボディセンシングガイド', desc: '体のシグナルに注意を向け、心身のつながりを構築' },
+    { title: 'セルフケアリマインダー', desc: '忙しい中で立ち止まり、自分を大切にするようリマインド' }
+  ],
+  'learning': [
+    { title: '知識探索ゲーム化ガイド', desc: '退屈な知識学習を面白い探検アドベンチャーに変える' },
+    { title: '語学学習シーンパートナー', desc: '異なる役を演じ、シチュエーション会話の中で自然に言語を習得' },
+    { title: '好奇心満足アシスタント', desc: 'あらゆる奇想天外な疑問に答え、世界への好奇心を満たす' },
+    { title: '読書ノートインスピレーション', desc: '読書感想の整理をサポート、新しい思考の角度を発見' },
+    { title: '知識共有雰囲気クリエイター', desc: '学んだ知識を面白い共有コンテンツに変換' }
+  ],
+  'relationship': [
+    { title: '親密な関係コミュニケーションコーチ', desc: '言いにくい感情の表現をサポートし、親密な関係を改善' },
+    { title: '家族ケアリマインダー', desc: '家族を気遣うことをリマインド、温かいインタラクションのアイデアを提供' },
+    { title: '友情維持雰囲気クリエイター', desc: '遠距離の友情の維持をサポート、共通の話題を創造' },
+    { title: '告白＆サプライズプランナー', desc: '大切な人に忘れられないサプライズとロマンチックな瞬間を企画' },
+    { title: '対立緩和雰囲気ガイド', desc: '関係が緊張した時に雰囲気を和らげるアドバイスと話術を提供' }
+  ],
+  'pet': [
+    { title: 'ペット擬人化日記', desc: 'ペットの視点で日記を生成、飼い主との温かい日常を記録' },
+    { title: 'ペット行動分析師', desc: 'ペットの行動言語を読み解き、ペットとの絆を深める' },
+    { title: 'ペットとの時間企画', desc: 'ペットとインタラクションするクリエイティブな活動をデザイン、絆を深める' },
+    { title: 'ペット記念ストーリー生成', desc: 'ペットの写真と思い出を温かいストーリーに変換' },
+    { title: '初心者ペット飼い主安心ガイド', desc: '初心者のペットオーナーに温かい寄り添いと指導を提供' }
+  ],
+  'finance': [
+    { title: '消費感情覺察アシスタント', desc: '衝動買いの背後にある感情に気づき、健全な消費観を確立' },
+    { title: '貯蓄目標ビジュアルモチベーション', desc: '貯蓄目標をビジュアル化された夢の進捗に変換' },
+    { title: '資産管理知識カジュアル学習', desc: '気軽で面白い方法で資産管理の知識を学ぶ' },
+    { title: '財務不安緩和師', desc: '財務ストレスに直面した時に感情サポートと実用的アドバイスを提供' },
+    { title: '少額投資体験ゲーム', desc: 'ゲーム化された方法で投資を体験し、参入のハードルを下げる' }
+  ],
+  'career': [
+    { title: 'キャリア迷いコンパニオン', desc: 'キャリアの迷い期に傾聴、探索、方向性のアドバイスを提供' },
+    { title: '仕事の達成感覚醒師', desc: '仕事の中の価値と意義を見つけ、情熱を再燃させる' },
+    { title: '職場ソーシャル雰囲気アシスタント', desc: '職場ソーシャルの気軽なトピックとインタラクションアイデアを提供' },
+    { title: '副業インスピレーション発掘器', desc: '個人の興味とスキルに基づいて、副業のアイデアを刺激' },
+    { title: '面接前の自信加油站', desc: '面接前に心理的な準備と自信の励ましを提供' }
+  ],
+  'home': [
+    { title: '居家空間雰囲気デザイナー', desc: '気分と季節に基づいて居家の雰囲気プランを設計' },
+    { title: '四季インテリアチェンジガイド', desc: '季節に合わせてインテリアを変え、新鮮さを保つ' },
+    { title: '小スペース空間マジック', desc: '小さなスペースでも快適で温かい雰囲気を作り出す' },
+    { title: '居家儀式感クリエイター', desc: '日常の居家活動に儀式感を創造' },
+    { title: '断捨離心理コンパニオン', desc: '片付け時に心理的サポートと意思決定アドバイスを提供' }
+  ],
+  'food': [
+    { title: '一人飯癒しレシピ', desc: '一人暮らしの方にシンプルで癒される料理プランを設計' },
+    { title: 'イベント食卓雰囲気デザイン', desc: '特別な日に儀式感のある食卓コーディネートを設計' },
+    { title: '料理気分マッチング', desc: '今の気分に基づいて適した食べ物と作り方を推奨' },
+    { title: '料理初心者自信ビルダー', desc: 'ゼロベースの料理初心者に温かい励ましとシンプルなレシピを提供' },
+    { title: 'フードフォトグラフィー雰囲気ガイド', desc: '家庭料理でも魅力的な雰囲気写真に撮る方法をガイド' }
+  ],
+  'fashion': [
+    { title: '今日のコーデ気分ボード', desc: '天気、シーン、気分に基づいてコーデインスピレーションを生成' },
+    { title: 'カプセルワードローブコーディネーター', desc: '限られたアイテムで無限のコーデの可能性を創造' },
+    { title: '個人スタイル探索の旅', desc: 'ユニークな個人スタイルの発見と確立をサポート' },
+    { title: '古着の新しい着こなしクリエイター', desc: '古い服に新しいコーデインスピレーションを提供' },
+    { title: '特別シーンスタイリングアドバイザー', desc: '重要なシーンに自信を持てるスタイリングをデザイン' }
+  ]
+}
+
+// 事前定義の推薦ルートマッピングテーブル - 雰囲気と感覚に基づく
+const recommendationMap = {
+  // 雰囲気: 癒し系
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 雰囲気: 成長系
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 雰囲気: ソーシャル系
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // 雰囲気: 探索系
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 雰囲気: 日常系
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: '癒し系', value: 'healing', desc: '温かい、安らぎ、癒し' },
+  { label: '成長系', value: 'growth', desc: '進歩、ブレイクスルー、変容' },
+  { label: 'ソーシャル系', value: 'social', desc: 'つながり、シェア、インタラクション' },
+  { label: '探索系', value: 'explore', desc: '好奇心、冒険、発見' },
+  { label: '日常系', value: 'daily', desc: '日常、リアル、今この瞬間' }
+]
+
+const feelingOptions = [
+  { label: 'リラックスしたい', value: 'relax', desc: 'ストレス解消、頭を空っぽに' },
+  { label: 'インスピレーションを得たい', value: 'inspire', desc: 'クリエイティブの刺激、気づき' },
+  { label: 'つながりが欲しい', value: 'connect', desc: '人とのつながり、感情の共鳴' },
+  { label: '現実から逃れたい', value: 'escape', desc: '現実逃避、没入体験' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'ライフスタイル', anchor: '#_1-ライフスタイル' },
+  { key: 'emotion', name: '感情コンパニオン', anchor: '#_2-感情コンパニオン' },
+  { key: 'entertainment', name: 'エンターテインメント', anchor: '#_3-エンターテインメント' },
+  { key: 'growth', name: '自己成長', anchor: '#_4-自己成長' },
+  { key: 'social', name: 'ソーシャルインタラクション', anchor: '#_5-ソーシャルインタラクション' },
+  { key: 'creative', name: 'クリエイティブ表現', anchor: '#_6-クリエイティブ表現' },
+  { key: 'travel', name: '旅行探索', anchor: '#_7-旅行探索' },
+  { key: 'health', name: '心身の健康', anchor: '#_8-心身の健康' },
+  { key: 'learning', name: '知識探索', anchor: '#_9-知識探索' },
+  { key: 'relationship', name: '関係マネジメント', anchor: '#_10-関係マネジメント' },
+  { key: 'pet', name: 'ペットコンパニオン', anchor: '#_11-ペットコンパニオン' },
+  { key: 'finance', name: '財務の健康', anchor: '#_12-財務の健康' },
+  { key: 'career', name: 'キャリア開発', anchor: '#_13-キャリア開発' },
+  { key: 'home', name: '居家空間', anchor: '#_14-居家空間' },
+  { key: 'food', name: 'グルメ料理', anchor: '#_15-グルメ料理' },
+  { key: 'fashion', name: 'ファッションスタイル', anchor: '#_16-ファッションスタイル' }
+]
+
+// 推薦結果の計算 - トピックプールからランダムに抽出
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // 各推薦シーンから 1〜2 トピックをランダムに抽出
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // ランダムソートして総数を制限
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// 現在の選択の説明を取得
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  setTimeout(() => {
+    let element = document.querySelector(anchor)
+    
+    if (!element) {
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    if (!element) {
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# C 誌消費シーンインスピレーションリファレンス
+
+## 本章のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['C 誌アプリ', 'ライフスタイル', '感情体験', '雰囲気演出']" coreOutput="15+ の生活シーンインスピレーションの発見" expectedOutput="ユーザーの心を打つプロダクト方向を見つける">
+
+本文書は <strong>LLM 大規模モデルの C 誌消費シーンにおけるクリエイティブな応用方向</strong>をまとめています。B 誌が効率やペインポイントに関心を持つのとは異なり、C 誌プロダクトは<strong>感覚の演出、心理的暗示、雰囲気</strong>を重視し、ユーザーが使用プロセスで感情の共鳴と素晴らしい体験を得るようにします。
+
+</ChapterIntroduction>
+
+## シーン雰囲気クイック選択
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">あなたの心を打つシーンインスピレーションを見つける</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    求める雰囲気と今の感覚を選択すると、システムが関連するシーン方向を推奨します。タグをクリックすると該当セクションにジャンプします。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="雰囲気タイプを選択" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="今の感覚を選択" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      おすすめの {{ currentSelection.vibe }} × {{ currentSelection.feeling }} シーン：
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      選び直す
+    </el-button>
+  </div>
+</el-card>
+
+---
+
+## 1. ライフスタイル
+
+> 💡 **コアコンセプト**：平凡な日常に儀式感を与え、ディテールの中に美しさを創造
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 朝の儀式感アラームアシスタント | 天気 API、カレンダーデータを統合し、LLM がパーソナライズされた朝のプランを生成；スマートスピーカーでカスタム音楽を再生、スマート照明の段階的点灯 |
+| 2 | 一人暮らしの雰囲気クリエイター | スマートホームデバイス（照明、スピーカー、アロマディフューザー）に接続し、LLM が時間/気分に応じて自動的にパラメータ調整；ユーザーの好みを学習し継続的に最適化 |
+| 3 | 週末のおうちデート回復プランジェネレーター | 動画配信プラットフォーム API と連携して作品リストを取得し、ユーザーの視聴履歴の好みに基づいて映画＋グルメ＋コーディネートのコンボプランを生成 |
+| 4 | 就寝前の心の癒しラジオ | TTS 音声合成で優しい物語を生成、ホワイトノイズミックスアルゴリズム、スマート音量フェードアウト；睡眠データに基づいてコンテンツを調整 |
+| 5 | 暮らしの美学インスピレーションキャッチャー | 画像認識でユーザーの環境写真を分析し、LLM が美学提案を生成；Pinterest/Instagram スタイルのコンテンツ推奨 |
+
+---
+
+## 2. 感情コンパニオン
+
+> 💡 **コアコンセプト**：無条件の受容と寄り添い、感情の優しい器になる
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 深夜のツリー聞き手 | エンドツーエンド暗号化でプライバシーを確保、LLM 感情分析で感情を理解、長期記憶でユーザーのストーリーを保存、複数ターンの対話で継続的なサポート |
+| 2 | 失恋回復コンパニオン | 感情段階認識アルゴリズム、段階ごとに異なるサポート（吐露期→発散期→再構築期）；心理学ナレッジベース RAG 検索 |
+| 3 | 不安緩和呼吸コーチ | 生体センサーデータ入力（心拍数/呼吸）、リアルタイムで不安レベルをモニタリング；音声ガイドで呼吸リズム、漸進的筋弛緩法の指導 |
+| 4 | 自信再構築メンター | ポジティブ心理学対話フレームワーク、ユーザーの小さな達成を記録してフィードバック；認知再構築技術でネガティブな自己対話の変革をサポート |
+| 5 | 感情日記スマート分析 | 感情認識 NLP モデル、時系列分析で感情パターンを発見；感情グラフの可視化、予測的アラート |
+
+---
+
+## 3. エンターテインメント
+
+> 💡 **コアコンセプト**：没入型体験の創造、エンターテインメントを心の居場所に
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 没入型マーダーミステリー DM | LLM がリアルタイムでストーリー分岐を生成、音声合成で NPC を演じ、プレイヤーの反応に応じて難易度とテンポを動的に調整；AR/VR シーンレンダリング |
+| 2 | オープンワールドゲームの魂の NPC | 長期記憶データベースがプレイヤーとのインタラクション履歴を保存、LLM がパーソナライズされた対話を生成；感情コンピューティングで NPC にリアルな感情反応を持たせる |
+| 3 | パーソナライズドポッドキャスト生成 | ユーザーの興味グラフに基づいて専用コンテンツを生成、TTS でユーザーの好きな声をクローン；リアルタイムインタラクションでリスナーの質問に回答 |
+| 4 | バーチャルコンサート盛り上げ役 | バーチャルアバターレンダリング、リアルタイムコメントインタラクション、バーチャルペンライト/応援アイテム；空間オーディオ技術でライブ感を演出 |
+| 5 | インタラクティブ小説共創パートナー | LLM がリアルタイムでストーリーを生成、ユーザーの選択が物語の行方に影響；マルチエンディング設計、キャラクター関係の動的発展 |
+
+---
+
+## 4. 自己成長
+
+> 💡 **コアコンセプト**：成長は苦行ではなく、楽しい自己発見の旅
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 個人の成長の証人 | タイムライン可視化で成長軌跡を表示、マイルストーンの自動マーク；「過去の私」vs「今の私」の比較表示 |
+| 2 | 習慣形成ゲーム化コーチ | ゲーム化メカニズム（経験値、レベル、バッジ）、ソーシャルランキング、AI コーチのキャラクター演じ（例：「冒険メンター」） |
+| 3 | スキル学習パートナーマッチング | 興味と学習目標に基づくマッチングアルゴリズム、学習グループコミュニティ、お互いのチェックインメカニズム |
+| 4 | 毎日の小さな幸せ発見者 | 画像認識で生活の中の素敵な瞬間を発見、感謝ジャーナルのガイド、毎週の素敵な瞬間の振り返り |
+| 5 | 人生シミュレーション体験器 | マルチブランチストーリーで異なる選択の結果をシミュレート、パラレル人生の比較；意思決定の結果の可視化表示 |
+
+---
+
+## 5. ソーシャルインタラクション
+
+> 💡 **コアコンセプト**：ソーシャルを気軽で自然に、快適なつながりを見つける
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | アイスブレイクトピックジェネレーター | 場面と参加者に基づくスマートトピック推奨、リアルタイム会話分析で話題継続の提案；気まずい瞬間のフォローアップヒント |
+| 2 | SNS投稿文雰囲気クリエイター | 画像コンテンツ分析、LLM が複数スタイルの文案を生成（文芸/ユーモア/シリアス）；emoji とレイアウトのスマート推奨 |
+| 3 | デート雰囲気プランナー | 双方の興味に基づくデートプラン生成、レストラン/アクティビティ推奨、会話トピック提案；リアルタイム天気と交通情報 |
+| 4 | オンライン飲み会盛り上げ役 | オンラインゲームライブラリ、アイスブレイクアクティビティジェネレーター、トピックルーレット；バーチャル背景とフィルターで雰囲気を強化 |
+| 5 | ソーシャルエネルギー管理アシスタント | ソーシャル活動後のエネルギー消費評価、回復アドバイス（一人の時間のアクティビティ推奨）；ソーシャルカレンダーのスマートプランニング |
+
+---
+
+## 6. クリエイティブ表現
+
+> 💡 **コアコンセプト**：誰にでも创造力がある、ただ目覚める必要があるだけ
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | インスピレーション枯渇応急キット | クロスドメイン連想アルゴリズム、ランダム刺激語生成、クリエイティブプロンプトライブラリ；マインドマップ式インスピレーション発散ツール |
+| 2 | 個人スタイル探索ガイド | 画像分析でユーザーの既存スタイルを識別、スタイルトレンド推奨、バーチャル試着/メイク；スタイル進化タイムライン |
+| 3 | 手帳＆日記美学アドバイザー | レイアウトテンプレート推奨、カラースキーム生成、装飾エレメント提案；手書き文字認識とコンテンツ美化 |
+| 4 | 写真構図雰囲気ガイド | シーン認識と構図アドバイス、フィルタースタイル推奨、レタッチパラメータのスマート調整；写真技法の学習パス |
+| 5 | 音楽気分マッチング | 音楽感情分析アルゴリズム、ユーザーの気分認識、パーソナライズドプレイリスト生成；音楽ストーリーと背景紹介 |
+
+---
+
+## 7. 旅行探索
+
+> 💡 **コアコンセプト**：旅行は景色を見るだけでなく、異なるライフスタイルを感じること
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 街歩き探索ガイド | 地元通コンテンツの集約、穴場スポット推奨、AR ナビゲーション；リアルタイム翻訳と音声ガイド |
+| 2 | 旅行気分日記生成 | 写真の自動分類と厳選、LLM が美しい旅行記を生成、位置情報マーク付きタイムライン；ワンクリックで旅行動画生成 |
+| 3 | 一人旅コンパニオンアシスタント | リアルタイム位置共有と安全リマインド、現地の緊急連絡先、AI ガイドの音声コンパニオン；一人旅コミュニティ交流 |
+| 4 | 目的地雰囲気プレビュー | VR/360° パノラマプレビュー、現地の音と香りのシミュレーション、文化背景紹介；バーチャル「試住」体験 |
+| 5 | 旅行写真雰囲気ガイド | ゴールデンアワー通知、構図補助線、現地名所撮影スポット推奨；後処理カラースタイル提案 |
+
+---
+
+## 8. 心身の健康
+
+> 💡 **コアコンセプト**：健康は目標ではなく、優しいセルフケア
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 運動モチベーション覚醒師 | ユーザーの状態に応じて運動タイプをスマート推奨、マイクロエクササイズ（5分）オプション、ゲーム化運動チャレンジ；ソーシャル運動チェックイン |
+| 2 | ヘルシー食インスピレーションキッチン | 冷蔵庫の食材認識、パーソナライズドレシピ推奨、栄養バランス分析；ステップバイステップの料理ガイド |
+| 3 | 睡眠の質向上雰囲気クリエイター | 睡眠モニタリングデータ分析、就寝前儀式生成、環境最適化提案（温度/湿度/照明）；スマートウェイクアップ |
+| 4 | ボディセンシングガイド | ボディスキャン瞑想ガイド、身体部位と感情の関連付け、心身接続エクササイズ；バイオフィードバック可視化 |
+| 5 | セルフケアリマインダー | 仕事の強度モニタリング、定期的な休憩リマインド、マイクロケアアクティビティ提案（水分補給/ストレッチ/深呼吸）；セルフケア記録 |
+
+---
+
+## 9. 知識探索
+
+> 💡 **コアコンセプト**：学習は終わりのない冒険、好奇心が最良の教師
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 知識探索ゲーム化ガイド | 知識ポイントマップ可視化、クリア形式の学習パス、アチーブメントバッジシステム；AI メンターのキャラクター演じ |
+| 2 | 語学学習シーンパートナー | LLM が異なるキャラクターを演じて会話、発音矯正、文化背景紹介；没入型シチュエーションシミュレーション |
+| 3 | 好奇心満足アシスタント | Wikipedia/ナレッジグラフ接続、複雑な概念のわかりやすい説明、関連知識推奨；好奇心記録 |
+| 4 | 読書ノートインスピレーション | 書籍内容分析、観点の抽出と関連付け、思考の角度の推奨；読書ノートテンプレートと美化 |
+| 5 | 知識共有雰囲気クリエイター | 知識カード自動生成、共有文案の最適化、ビジュアル美化；ソーシャル共有データフィードバック |
+
+---
+
+## 10. 関係マネジメント
+
+> 💡 **コアコンセプト**：良い関係には心を込めたお手入れが必要、でも心を込めるのは複雑じゃなくていい
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 親密な関係コミュニケーションコーチ | 感情表現テンプレート生成、非暴力コミュニケーション技法指導、対立解決話術；関係健康度評価 |
+| 2 | 家族ケアリマインダー | 重要日付のリマインド（誕生日/記念日）、ケアの話術提案、家族アクティビティ推奨；家族アルバム生成 |
+| 3 | 友情維持雰囲気クリエイター | 友人とのインタラクション記録、共通話題推奨、遠隔集会企画；友情タイムラインと思い出生成 |
+| 4 | 告白＆サプライズプランナー | パーソナライズドサプライズプラン生成、ギフト推奨、ロマンチック話術提案；実行スケジュールとリマインド |
+| 5 | 対立緩和雰囲気ガイド | 感情冷却話術、相手の立場に立つ思考のガイド、和解ステップ提案；関係修復トラッキング |
+
+---
+
+## 11. ペットコンパニオン
+
+> 💡 **コアコンセプト**：ペットは家族、彼らの寄り添いは記録し大切にする価値がある
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | ペット擬人化日記 | ペット行動分析、一人称日記生成、写真自動添付；ペットの「SNS」 |
+| 2 | ペット行動分析師 | ペット行動動画分析、健康アラート、トレーニング提案；品種特性ナレッジベース |
+| 3 | ペットとの時間企画 | ペットアクティビティ推奨、DIY おもちゃチュートリアル、ペットフレンドリースポット推奨；ペットソーシャルマッチング |
+| 4 | ペット記念ストーリー生成 | 写真と動画の厳選、タイムラインストーリー生成、音楽コーディネート；記念アルバム/動画の自動生成 |
+| 5 | 初心者ペット飼い主安心ガイド | 段階別ケアガイド、よくある質問への回答、緊急時の対応；初心者コミュニティサポート |
+
+---
+
+## 12. 財務の健康
+
+> 💡 **コアコンセプト**：財務的自由は目標ではない、財務の健康こそが目標
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 消費感情覺察アシスタント | 消費記録分析、感情-消費関連分析、衝動買いアラート；代替的満足感の提案 |
+| 2 | 貯蓄目標ビジュアルモチベーション | 目標進捗の可視化、夢シーンレンダリング、マイルストーンのお祝い；貯蓄習慣形成ゲーム |
+| 3 | 資産管理知識カジュアル学習 | 断片的な知識プッシュ、シチュエーション型ケーススタディ、インタラクティブクイズ；知識テストと証明書 |
+| 4 | 財務不安緩和師 | 財務状況の健康評価、ストレスマネジメントスキル、小さなステップのアクションプラン；財務心理カウンセリング |
+| 5 | 少額投資体験ゲーム | バーチャル投資シミュレーション、リスク教育、投資ポートフォリオゲーム；リアル少額投資のガイド |
+
+---
+
+## 13. キャリア開発
+
+> 💡 **コアコンセプト**：キャリアはレールではなく、探索できる荒野
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | キャリア迷いコンパニオン | キャリア興味診断、スキル棚卸し、業界情報推奨；キャリアメンターとの対話 |
+| 2 | 仕事の達成感覚醒師 | 業績記録、価値の抽出、達成の可視化；同僚/顧客からのポジティブフィードバック収集 |
+| 3 | 職場ソーシャル雰囲気アシスタント | 職場トピック推奨、ネットワーキングスキル、業界イベント推奨；LinkedIn コンテンツ最適化 |
+| 4 | 副業インスピレーション発掘器 | スキル-興味-市場ニーズのマッチング、副業事例集、スタートアップガイド；副業コミュニティ交流 |
+| 5 | 面接前自信加油站 | 模擬面接、よくある質問の準備、自信向上テクニック；身だしなみアドバイス |
+
+---
+
+## 14. 居家空間
+
+> 💡 **コアコンセプト**：家は住む場所ではなく、心の居場所
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 居家空間雰囲気デザイナー | 空間写真分析、スタイル推奨、家具/インテリア推奨；AR プレビュー効果 |
+| 2 | 四季インテリアチェンジガイド | 季節テーマ推奨、収納とディスプレイの提案、イベントデコレーションプラン；買い物リスト生成 |
+| 3 | 小スペース空間マジック | 空間最適化アルゴリズム、多機能家具推奨、収納テクニック；視覚的広がりのテクニック |
+| 4 | 居家儀式感クリエイター | 日常儀式のデザイン（朝/夜/週末）、儀式実行リマインド；儀式効果フィードバック |
+| 5 | 断捨離心理コンパニオン | アイテムの感情価値評価、断捨離ステップガイド、心理的サポート；寄付/リサイクルルート推奨 |
+
+---
+
+## 15. グルメ料理
+
+> 💡 **コアコンセプト**：食べ物は愛の言語、料理は愛を表現する方法
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 一人飯癒しレシピ | 冷蔵庫の食材認識、シンプルレシピ推奨、ステップバイステップガイド；一人飯の盛り付け美学 |
+| 2 | イベント食卓雰囲気デザイン | イベントテーマメニュー、食卓コーディネートプラン、雰囲気演出テクニック；ゲスト体験最適化 |
+| 3 | 料理気分マッチング | 気分-食べ物関連アルゴリズム、感情調整レシピ、コンフォートフード推奨；料理セラピーガイド |
+| 4 | 料理初心者自信ビルダー | 超シンプルレシピ、失敗挽回テクニック、自信構築の声かけ；段階的難易度アップ |
+| 5 | フードフォトグラフィー雰囲気ガイド | 料理の盛り付け提案、自然光の活用、撮影アングルのガイド；フィルターと後処理の提案 |
+
+---
+
+## 16. ファッションスタイル
+
+> 💡 **コアコンセプト**：ファッションは自己表現、スタイルは内面の外在表現
+
+| 番号 | アプリケーションシーン名 | アプリケーションシーン機能 |
+| :--: | ------------ | ------------ |
+| 1 | 今日のコーデ気分ボード | 天気/シーン/気分の総合推奨、バーチャル試着、コーデインスピレーション；ワードローブ管理 |
+| 2 | カプセルワードローブコーディネーター | ワードローブ棚卸し、アイテム別コーデ組み合わせ、1着多コーデプラン；買い物アドバイス（空欄を補完） |
+| 3 | 個人スタイル探索の旅 | スタイルテスト、参考アイコン推奨、スタイル進化パス；自信構築 |
+| 4 | 古着の新しい着こなしクリエイター | 古着リメイクインスピレーション、新しいコーデ方法、アクセサリーのポイントテクニック；サステナブルファッションの理念 |
+| 5 | 特別シーンスタイリングアドバイザー | シーンのドレスコード読み解き、スタイリングプラン生成、メイク・ヘアアドバイス；全体スタイリングの調和 |
+
+---
+
+## C 誌プロダクトを設計するコアの心得
+
+### 1. 「機能」から「感覚」へ
+
+B 誌プロダクトは「この機能がどんな問題を解決できるか」に関心を持ち、C 誌プロダクトは「この機能がどんな感覚をもたらせるか」に関心を持ちます。
+
+| B 誌の考え方 | C 誌の考え方 |
+|---------|---------|
+| 効率向上 | 好きなことにもっと時間を使える |
+| コスト削減 | 使うお金の価値を最大化 |
+| ペインポイント解決 | 素晴らしい体験の創造 |
+| 機能の充実 | 感覚が届いているか |
+
+### 2. 雰囲気を演出する 3 つのレイヤー
+
+**感覚レイヤー**：視覚、聴覚、触覚のデザイン
+- 温かい色調
+- リラックスできる音
+- スムーズなアニメーション
+
+**感情レイヤー**：感情の共鳴とガイド
+- ユーザーの気持ちを理解する
+- 感情的サポートを提供する
+- ポジティブな感情を創造する
+
+**意味レイヤー**：価値の共感と帰属感
+- ユーザーが理解されていると感じる
+- 帰属感を創造する
+- 行動に意味を与える
+
+### 3. 心理的暗示の力
+
+C 誌プロダクトの文案とデザインはすべて心理的暗示を伝えています：
+
+- **ポジティブ暗示**：「あなたはもう十分頑張っています」「ゆっくりでいいんです」
+- **帰属暗示**：「あなたと同じ人がたくさんいます」「一人じゃないんです」
+- **成長暗示**：「毎回の試みは進歩です」「あなたはもっと良くなっています」
+
+### 4. ユーザーをより良い自分にする
+
+最高の C 誌プロダクトはユーザーを変えるものではなく、ユーザーがなりたい自分をサポートするものです。
+
+- 「〜すべき」ではなく、「〜できます」
+- 「〜しなければ」ではなく、「〜したいなら」
+- 「まだ足りない」ではなく、「あなたはもう〜」
+
+---
+
+> 🌟 **覚えておいてください**：C 誌ユーザーが買っているのは機能ではなく、感覚です。ツールではなく、寄り添いです。サービスではなく、理解です。
diff --git a/docs/ja-jp/stage-1/appendix-consumer-scenarios/index.md b/docs/ja-jp/stage-1/appendix-consumer-scenarios/index.md
new file mode 100644
index 0000000..6e9cfb1
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-consumer-scenarios/index.md
@@ -0,0 +1,1350 @@
+---
+title: 'Cエンドシーンインスピレーション方向参考'
+description: '本ドキュメントは、LLM大規模言語モデルのCエンド消費シーンにおけるクリエイティブアプリケーション方向をまとめたものです。ライフスタイル、エモーショナルコンパニオン、エンターテインメント、パーソナルグロース、ソーシャルインタラクションなどの分野のインスピレーションシーンをカバーし、一般ユーザー向けのAIアプリ開発者にクリエイティブな参考を提供します。'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = '約 <strong>4 時間</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// 各シーンのトピックプール - 雰囲気、感覚、心理的暗示を強調
+const topicPool = {
+  'lifestyle': [
+    { title: '朝のルーティン目覚ましアシスタント', desc: '天気、スケジュール、気分に基づいて専用の朝ルーティンを生成し、毎日を美しく始める' },
+    { title: '一人暮らし雰囲気デザイナー', desc: '一人暮らしのために居心地の良い空間プランを設計、照明・音楽・アロマのスマートコーディネート提案' },
+    { title: '週末おうちヒーリングプランジェネレーター', desc: '今の気分に合わせて完璧なおうちプランを提案：映画+おやつ+雰囲気コーディネート' },
+    { title: '就寝前ヒーリングラジオ', desc: '優しい物語、瞑想ガイド、眠りに寄り添うプライベートラジオを生成' },
+    { title: '生活美学インスピレーションキャッチャー', desc: '日常の小さなことの中に美しさを発見し、生活美学のアドバイスと儀式感ガイドを生成' }
+  ],
+  'emotion': [
+    { title: '深夜の秘密の話し相手', desc: '24時間オンラインの感情ダンプボックス、判断せずにすべての心の内を受け入れる' },
+    { title: '失恋ヒーリングコンパニオン', desc: '失恋のどん底で優しい寄り添い、ヒーリングアドバイスと感情の出口を提供' },
+    { title: '不安緩和呼吸コーチ', desc: '不安な感情を感知し、呼吸練習とマインドフルネス瞑想をガイド' },
+    { title: '自信回復メンター', desc: 'ポジティブな対話と心理的暗示を通じて、自己認識と自己価値の再構築を支援' },
+    { title: '感情日記スマート分析', desc: '感情日記を分析し、感情のパターンを発見し、温かいインサイトとアドバイスを提供' }
+  ],
+  'entertainment': [
+    { title: '没入型マーダーミステリーDM', desc: 'マーダーミステリーの進行役を演じ、サスペンスの雰囲気を作り出し、ストーリーを推進' },
+    { title: 'オープンワールドゲームの魂を持つNPC', desc: '血の通ったNPC、プレイヤーの物語を記憶し、本物の感情的絆を生む' },
+    { title: 'パーソナライズされたポッドキャスト生成', desc: '興味に基づいて専用ポッドキャストを生成、友達と話すような自然な感じ' },
+    { title: 'バーチャルライブ雰囲気メーカー', desc: 'オンラインライブにライブ感を演出、リアルタイムインタラクション、応援、雰囲気レンダリング' },
+    { title: 'インタラクティブ小説共創パートナー', desc: '読者と共に物語を創作、各選択が世界の方向性に影響' }
+  ],
+  'growth': [
+    { title: 'パーソナルグロースの証人', desc: '成長の軌跡を記録し、重要な節目で励ましと振り返りを提供' },
+    { title: '習慣形成ゲーム化コーチ', desc: '退屈な習慣形成を楽しい冒険ゲームに変える' },
+    { title: 'スキル学習パートナーマッチング', desc: '志を同じくする学習パートナーを見つけ、互いに励まし、進歩を共有' },
+    { title: '毎日の小さな幸せ発見者', desc: '生活の中の小さな美しさを発見し、感謝とポジティブな心を育む' },
+    { title: '人生シミュレーション体験器', desc: '異なる人生の選択をシミュレーションし、パラレルワールドのもう一つの可能性を体験' }
+  ],
+  'social': [
+    { title: 'アイスブレイク話題ジェネレーター', desc: '社交の場で面白い話題を提供し、気まずさを解消し、距離を縮める' },
+    { title: 'SNS投稿雰囲気デザイナー', desc: '写真と気分に基づいて、センスのあるSNS投稿文を生成' },
+    { title: 'デート雰囲気プランナー', desc: 'デートのための完全な雰囲気プランを設計、場所から話題からサプライズまで' },
+    { title: 'オンライン集会の盛り上げ役', desc: 'オンライン集会で雰囲気を盛り上げ、ゲームを企画し、インタラクションを促進' },
+    { title: '社交エネルギー管理アシスタント', desc: '内向的な人の社交エネルギーを管理し、快適な社交リズムを見つける' }
+  ],
+  'creative': [
+    { title: 'インスピレーション枯渇救急キット', desc: 'クリエイティブなボトルネック時に思いがけないインスピレーションの火花を提供' },
+    { title: 'パーソナルスタイル探索ガイド', desc: 'ユニークなパーソナルスタイルの発見を支援、ファッションから表現まで' },
+    { title: '手帳と日記美学アドバイザー', desc: '手帳のレイアウト、配色、コンテンツのクリエイティブな美学アドバイスを提供' },
+    { title: '写真構図雰囲気ガイド', desc: 'シーンと求める雰囲気に基づいて、写真とレタッチのアドバイスを提供' },
+    { title: '音楽と気分のマッチング', desc: '今の気分とシーンに合わせて、完璧な音楽コンボをレコメンド' }
+  ],
+  'travel': [
+    { title: 'シティウォーク探索ガイド', desc: '地元の人のように都市を探索し、隠れた宝スポットを発見' },
+    { title: '旅行気分日記生成', desc: '旅行の写真と気分を美しい旅行記と思い出に変換' },
+    { title: '一人旅コンパニオンアシスタント', desc: '一人旅の旅人に寄り添い、アドバイスと安心感を提供' },
+    { title: '目的地雰囲気プレビュー', desc: '出発前に目的地の雰囲気を没入型で体験し、事前にその状態に入る' },
+    { title: '旅行写真雰囲気ガイダンス', desc: 'シーンと光に基づいて、ストーリー性のある旅行写真を撮影するガイダンス' }
+  ],
+  'health': [
+    { title: '運動モチベーション目覚まし', desc: '動きたくない時にちょうど良い励ましとモチベーションを提供' },
+    { title: 'ヘルシー食インスピレーションキッチン', desc: '気分と食材に基づいて、ヒーリング系のヘルシーレシピを生成' },
+    { title: '睡眠の質最適化雰囲気デザイナー', desc: '環境から心理まで、質の高い睡眠雰囲気を全方位的に演出' },
+    { title: 'ボディアウェアネスガイド', desc: '体のサインに注目し、心身のつながりを構築' },
+    { title: 'セルフケアリマインダーアシスタント', desc: '忙しさの中で立ち止まり、自分を大切にするようリマインド' }
+  ],
+  'learning': [
+    { title: '知識探索ゲーム化ガイド', desc: '退屈な知識学習を楽しい探索冒険に変える' },
+    { title: '言語学習シチュエーションパートナー', desc: '異なる役割を演じ、シチュエーション会話の中で自然に言語を習得' },
+    { title: '好奇心充足アシスタント', desc: '様々な奇想天外な質問に答え、世界への好奇心を満たす' },
+    { title: '読書ノートインスピレーション', desc: '読書の感想を整理し、新しい思考角度を発見' },
+    { title: '知識共有雰囲気演出', desc: '学んだ知識を面白い共有コンテンツに変換' }
+  ],
+  'relationship': [
+    { title: '親密な関係コミュニケーションコーチ', desc: '言いにくい感情の表現を助け、親密な関係を改善' },
+    { title: '家族のケアリマインダーアシスタント', desc: '家族を気遣うようリマインドし、温かいインタラクションの提案を提供' },
+    { title: '友情維持雰囲気デザイナー', desc: '遠距離の友情を維持し、共通の話題を創造' },
+    { title: '告白とサプライズプランナー', desc: '大切な人のために忘れられないサプライズとロマンチックな瞬間を企画' },
+    { title: '対立緩和雰囲気ガイダンス', desc: '関係が緊張した時に雰囲気を緩和するアドバイスと話術を提供' }
+  ],
+  'pet': [
+    { title: 'ペット擬人化日記', desc: 'ペットの視点で日記を生成し、飼い主との温かい日常を記録' },
+    { title: 'ペット行動解読師', desc: 'ペットの行動言語を解読し、ペットとのつながりを深める' },
+    { title: 'ペットとの時間プランナー', desc: 'ペットとのインタラクティブなクリエイティブ活動を設計し、絆を深める' },
+    { title: 'ペット記念ストーリー生成', desc: 'ペットの写真と思い出を温かい物語に変換' },
+    { title: '初心者ペットオーナー安心ガイド', desc: '初心者のペットオーナーに温かい寄り添いとガイダンスを提供' }
+  ],
+  'finance': [
+    { title: '消費感情アウェアネスアシスタント', desc: '衝動買いの背後にある感情を認識し、健康的な消費観を構築' },
+    { title: '貯蓄目標ビジュアル化モチベーション', desc: '貯蓄目標をビジュアル化された夢の進捗に変換' },
+    { title: '資産運用知識カジュアル学習', desc: '楽しく面白い方法で資産運用知識を学ぶ' },
+    { title: '財務不安緩和アシスタント', desc: '財務的ストレスに直面した時に感情的サポートと実用的アドバイスを提供' },
+    { title: '少額投資体験ゲーム', desc: 'ゲーム化方式で投資を体験し、導入のハードルを下げる' }
+  ],
+  'career': [
+    { title: 'キャリア迷いコンパニオン', desc: 'キャリアの迷いの時期に傾聴、探索、方向性のアドバイスを提供' },
+    { title: '仕事の達成感目覚まし', desc: '仕事の中の価値と意義を発見し、情熱を再燃' },
+    { title: '職場社交雰囲気アシスタント', desc: '職場の社交のリラックスした話題とインタラクションのアドバイスを提供' },
+    { title: '副業インスピレーションジェネレーター', desc: '個人の興味とスキルに基づいて副業のクリエイティブを刺激' },
+    { title: '面接前自信充填ステーション', desc: '面接前に心理的な準備と自信の励ましを提供' }
+  ],
+  'home': [
+    { title: '居住空間雰囲気デザイナー', desc: '気分と季節に合わせて、住まいの雰囲気プランを設計' },
+    { title: '四季のインテリアチェンジガイド', desc: '季節に合わせてインテリアを変え、新鮮さを保つ' },
+    { title: '狭い空間の魔法', desc: '小さな空間でも快適で温かい雰囲気を実現' },
+    { title: '暮らしの儀式感クリエイター', desc: '日常の暮らしの活動に儀式感を創造' },
+    { title: '断捨離心理コンパニオン', desc: '片付け時に心理的サポートと意思決定のアドバイスを提供' }
+  ],
+  'food': [
+    { title: '一人暮らしヒーリング料理', desc: '一人暮らしのためのシンプルでヒーリング系の料理プラン' },
+    { title: '特別な日のテーブル雰囲気デザイン', desc: '特別な日のために儀式感のあるテーブルセッティングを設計' },
+    { title: '料理気分マッチング', desc: '今の気分に合わせて適切な食べ物と作り方をレコメンド' },
+    { title: 'キッチン初心者の自信構築', desc: '未経験の料理人に温かい励ましとシンプルなレシピを提供' },
+    { title: '料理写真雰囲気ガイド', desc: '家庭料理でも魅力的な雰囲気のある写真を撮れるようにする' }
+  ],
+  'fashion': [
+    { title: '今日のコーデ気分ボード', desc: '天気、場面、気分に合わせてコーデのインスピレーションを生成' },
+    { title: 'カプセルワードローブコーディネーター', desc: '限られたアイテムで無限のコーディネートの可能性を創造' },
+    { title: 'パーソナルスタイル探索の旅', desc: 'ユニークなパーソナルスタイルの発見と構築を支援' },
+    { title: '古着の新しい着こなしクリエイター', desc: '古着に新しいコーディネートのインスピレーションを提供' },
+    { title: '特別な場面のスタイリングアドバイザー', desc: '重要な場面で自信を持てるスタイリングを設計' }
+  ]
+}
+
+// 雰囲気と感覚に基づく推薦リンクマッピングテーブル
+const recommendationMap = {
+  // 雰囲気ポイント：ヒーリング系
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 雰囲気ポイント：成長系
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 雰囲気ポイント：ソーシャル系
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // 雰囲気ポイント：探索系
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 雰囲気ポイント：日常系
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'ヒーリング系', value: 'healing', desc: '温かさ、安らぎ、ヒーリング' },
+  { label: '成長系', value: 'growth', desc: '進歩、ブレイクスルー、変革' },
+  { label: 'ソーシャル系', value: 'social', desc: 'つながり、共有、インタラクション' },
+  { label: '探索系', value: 'explore', desc: '好奇心、冒険、発見' },
+  { label: '日常系', value: 'daily', desc: '平凡、リアル、今' }
+]
+
+const feelingOptions = [
+  { label: 'リラックスしたい', value: 'relax', desc: 'ストレス緩和、リフレッシュ' },
+  { label: 'インスピレーションを求めている', value: 'inspire', desc: 'クリエイティブを刺激、インスピレーションを獲得' },
+  { label: 'つながりを求めている', value: 'connect', desc: '人とのつながり、感情の共鳴' },
+  { label: '現実から逃げたい', value: 'escape', desc: '現実逃避、没入体験' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'ライフスタイル', anchor: '#_1-ライフスタイル' },
+  { key: 'emotion', name: 'エモーショナルコンパニオン', anchor: '#_2-エモーショナルコンパニオン' },
+  { key: 'entertainment', name: 'エンターテインメント', anchor: '#_3-エンターテインメント' },
+  { key: 'growth', name: 'パーソナルグロース', anchor: '#_4-パーソナルグロース' },
+  { key: 'social', name: 'ソーシャルインタラクション', anchor: '#_5-ソーシャルインタラクション' },
+  { key: 'creative', name: 'クリエイティブ表現', anchor: '#_6-クリエイティブ表現' },
+  { key: 'travel', name: '旅行探索', anchor: '#_7-旅行探索' },
+  { key: 'health', name: '心身健康', anchor: '#_8-心身健康' },
+  { key: 'learning', name: '知識探索', anchor: '#_9-知識探索' },
+  { key: 'relationship', name: '関係構築', anchor: '#_10-関係構築' },
+  { key: 'pet', name: 'ペットコンパニオン', anchor: '#_11-ペットコンパニオン' },
+  { key: 'finance', name: '財務健康', anchor: '#_12-財務健康' },
+  { key: 'career', name: 'キャリア開発', anchor: '#_13-キャリア開発' },
+  { key: 'home', name: '居住空間', anchor: '#_14-居住空間' },
+  { key: 'food', name: 'グルメ料理', anchor: '#_15-グルメ料理' },
+  { key: 'fashion', name: 'ファッションスタイル', anchor: '#_16-ファッションスタイル' }
+]
+
+// 推薦結果を計算 - トピックプールからランダムに抽出
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+
+  // 各推薦シーンからランダムに1〜2個のトピックを抽出
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+
+    if (scenario && scenarioTopics.length > 0) {
+      // ランダムに1〜2個のトピックを抽出
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+
+  // ランダムに並べ替えて総数を制限
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// 現在の選択の説明を取得
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // DOMの更新完了を確実にするため遅延スクロール
+  setTimeout(() => {
+    // IDで検索を試行（複数のフォーマットに対応）
+    let element = document.querySelector(anchor)
+
+    // 見つからない場合、他のIDフォーマットを試行
+    if (!element) {
+      // アンダースコアプレフィックスを除去
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+
+    // それでも見つからない場合、見出しテキストで検索
+    if (!element) {
+      // アンカーからシーン名を抽出
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // 完全一致または部分一致
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // 対象セクションをハイライト表示
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# Cエンドシーンインスピレーション方向参考
+
+## 章節ガイド
+
+<ChapterIntroduction :duration="duration" :tags="['Cエンドアプリ', 'ライフスタイル', '感情体験', '雰囲気演出']" coreOutput="15以上の生活シーンインスピレーションを発見" expectedOutput="ユーザーの心を打つプロダクト方向を見つける">
+
+本ドキュメントは <strong>LLM大規模言語モデルのCエンド消費シーンにおけるクリエイティブアプリケーション方向</strong>をまとめたものです。Bエンドが効率とペインポイントに注目するのとは異なり、Cエンドプロダクトは<strong>雰囲気の演出、心理的暗示、ムード</strong>を重視し、ユーザーが使用プロセスで感情の共鳴と素晴らしい体験を得られるようにします。
+
+</ChapterIntroduction>
+
+## シーン雰囲気クイック選択
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">心を動かすシーンインスピレーションを見つける</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    好きな雰囲気と今の気分を選択すると、システムが関連するシーン方向を推薦します。タグをクリックすると対応する章にジャンプします。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="雰囲気タイプを選択" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="今の気分を選択" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      おすすめの {{ currentSelection.vibe }} × {{ currentSelection.feeling }} シーン：
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      再選択
+    </el-button>
+  </div>
+</el-card>
+
+## シーン方向一覧
+
+<el-row :gutter="16" style="margin-top: 24px;">
+  <el-col :span="8" v-for="scenario in scenarios.slice(0, 6)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} 個のインスピレーション方向</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(6, 12)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} 個のインスピレーション方向</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(12, 16)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} 個のインスピレーション方向</div>
+    </el-card>
+  </el-col>
+</el-row>
+
+---
+
+## 1. ライフスタイル
+
+> 💡 **コアイデア**：平凡な日常に儀式感を持たせ、細部の中に美しさを創造する
+
+### 1.1 朝のルーティン目覚ましアシスタント
+
+**シーンの説明**：
+毎朝目覚めた時、その日の天気、スケジュール、気分に合わせて専用の朝ルーティンを生成する。優しい音楽、その日の気分に合ったお茶、5分間のストレッチ、あるいはちょうど良い励ましの言葉など。
+
+**雰囲気演出のポイント**：
+- 段階的な目覚めで、急かさない
+- 視覚と聴覚のマルチセンサリー体験
+- 毎日の始まりを期待感に満ちたものにする
+
+**心理的暗示**：
+> 「今日は素晴らしい一日になる。あなたは優しく扱われる価値があるから」
+
+### 1.2 一人暮らし雰囲気デザイナー
+
+**シーンの説明**：
+一人暮らしのために住まいの雰囲気プランを設計し、照明、音楽、アロマなどの要素をスマートにコーディネートして、一人の家にも温かみと帰属感を満たす。
+
+**雰囲気演出のポイント**：
+- 時間と気分に応じて自動的に雰囲気を調整
+- 季節ごとのテーマ変化
+- 「寄り添われている」感覚を演出
+
+### 1.3 週末おうちヒーリングプランジェネレーター
+
+**シーンの説明**：
+金曜の夜、その時の気分と天気に合わせて完璧な週末おうちプランを生成する。映画のレコメンド、おやつの組み合わせ、住まいの雰囲気コーディネートの提案、さらにはぼーっとするのに適した隅っこまで。
+
+**雰囲気演出のポイント**：
+- ヒーリング系のビジュアル表現
+- プレッシャーのない選択体験
+- おうち時間を楽しみにするものにする
+
+### 1.4 就寝前ヒーリングラジオ
+
+**シーンの説明**：
+毎晩就寝前に、専用のヒーリングコンテンツを生成する。優しい物語、瞑想ガイド、ホワイトノイズ、あるいはシンプルな「おやすみ」の挨拶など、眠りに寄り添う。
+
+**雰囲気演出のポイント**：
+- 穏やかな音とリズム
+- 段階的に音量が下がる設計
+- 安心感とリラックス感を演出
+
+### 1.5 生活美学インスピレーションキャッチャー
+
+**シーンの説明**：
+日常の小さなことの中に美しさを発見し、生活美学のアドバイスと儀式感ガイドを提供する。一杯のコーヒーをどうやってもっとおしゃれにするか、机をフロー空間にするかなど。
+
+**雰囲気演出のポイント**：
+- 平凡の中に非凡を見つける
+- 美しさを感じる力を養う
+- 生活を芸術にする
+
+---
+
+## 2. エモーショナルコンパニオン
+
+> 💡 **コアイデア**：無条件の受け入れと寄り添い、感情の優しい器になる
+
+### 2.1 深夜の秘密の話し相手
+
+**シーンの説明**：
+24時間オンラインの感情ダンプボックス。判断せずにすべての心の内を受け入れる。嬉しい、悲しい、怒っている、迷っている、どんな感情でも置ける場所がある。
+
+**雰囲気演出のポイント**：
+- 絶対的な安心感とプライバシー保護
+- 口を挟まず、説教せず、ただ聞く
+- 優しい応答と共感
+
+**心理的暗示**：
+> 「あなたのすべての感情は理にかなっている。私がここにいるよ」
+
+### 2.2 失恋ヒーリングコンパニオン
+
+**シーンの説明**：
+失恋のどん底で優しい寄り添い、ヒーリングアドバイスと感情の出口を提供する。急に立ち直らせようとするのではなく、ゆっくりでいいと許してあげる。
+
+**雰囲気演出のポイント**：
+- 悲しみの存在を許容する
+- 段階的な感情のガイダンス
+- 自己価値感の再構築
+
+### 2.3 不安緩和呼吸コーチ
+
+**シーンの説明**：
+ユーザーの不安な感情を感知し、呼吸練習とマインドフルネス瞑想をガイドする。緊張している時に頼れるアンカーポイントを提供する。
+
+**雰囲気演出のポイント**：
+- 即時の感情アウェアネス
+- シンプルで効果的な緩和方法
+- 平静とコントロール感を演出
+
+### 2.4 自信回復メンター
+
+**シーンの説明**：
+ポジティブな対話と心理的暗示を通じて、自己認識と自己価値の再構築を支援する。小さな進歩を一つ一つ記録し、変革のプロセスを見守る。
+
+**雰囲気演出のポイント**：
+- 見過ごされがちな長所を発見する
+- 小さな勝利を祝う
+- ポジティブな自己対話を築く
+
+### 2.5 感情日記スマート分析
+
+**シーンの説明**：
+感情日記を分析し、感情のパターンを発見し、温かいインサイトとアドバイスを提供する。ユーザーが自分をより理解し、感情と平和に付き合えるようにする。
+
+**雰囲気演出のポイント**：
+- 視覚化された感情の軌跡
+- 冷たい分析ではなく温かいインサイト
+- アクション可能なアドバイスを提供
+
+---
+
+## 3. エンターテインメント
+
+> 💡 **コアイデア**：没入型の体験を創造し、エンターテインメントを心の憩いの場にする
+
+### 3.1 没入型マーダーミステリーDM
+
+**シーンの説明**：
+マーダーミステリーの進行役を演じ、サスペンスの雰囲気を作り出し、ストーリーを推進する。プレイヤーの反応に応じてリアルタイムでテンポを調整し、忘れられないゲーム体験を創造する。
+
+**雰囲気演出のポイント**：
+- 引き込まれるオープニング
+- 適切なサスペンスの演出
+- 没入型のロールプレイ
+
+### 3.2 オープンワールドゲームの魂を持つNPC
+
+**シーンの説明**：
+血の通ったNPC。プレイヤーの物語を記憶し、本物の感情的絆を生む。単なるクエスト発行者ではなく、ゲーム世界の中の友人。
+
+**雰囲気演出のポイント**：
+- 持続的な記憶と連続性
+- パーソナライズされたインタラクション
+- リアルな感情的つながり
+
+### 3.3 パーソナライズされたポッドキャスト生成
+
+**シーンの説明**：
+ユーザーの興味に基づいて専用ポッドキャストを生成する。友達と話すような自然な感じで。コンテンツは知識の共有、ストーリーテリング、あるいはシンプルな寄り添いなど。
+
+**雰囲気演出のポイント**：
+- リラックスした自然な対話感
+- 個人の好みに合ったコンテンツ
+- いつでも始められる寄り添い
+
+### 3.4 バーチャルライブ雰囲気メーカー
+
+**シーンの説明**：
+オンラインライブにライブ感を演出する。リアルタイムインタラクション、応援、雰囲気レンダリング。家に一人でも、ライブの熱気を感じられるようにする。
+
+**雰囲気演出のポイント**：
+- 視覚と聴覚の没入
+- リアルタイムのインタラクションと共鳴
+- 集団参加感を創造
+
+### 3.5 インタラクティブ小説共創パートナー
+
+**シーンの説明**：
+読者と共に物語を創作する。各選択が世界の方向性に影響する。読者はもう受動的な消費者ではなく、物語の共同クリエイター。
+
+**雰囲気演出のポイント**：
+- 無限の可能性
+- 本当の選択権
+- 自分だけの物語を創造する
+
+---
+
+## 4. パーソナルグロース
+
+> 💡 **コアイデア**：成長は苦行ではなく、楽しい自己発見の旅
+
+### 4.1 パーソナルグロースの証人
+
+**シーンの説明**：
+ユーザーの成長の軌跡を記録し、重要な節目で励ましと振り返りを提供する。成長を見える化し、努力を記憶する。
+
+**雰囲気演出のポイント**：
+- 視覚化された成長の軌跡
+- 重要な瞬間の記念
+- 温かい振り返りと展望
+
+**心理的暗示**：
+> 「あなたは気づかないうちに、こんなにも遠くまで来たんだね」
+
+### 4.2 習慣形成ゲーム化コーチ
+
+**シーンの説明**：
+退屈な習慣形成を楽しい冒険ゲームに変える。小さな習慣の継続が、ゲームの中の一つの達成になる。
+
+**雰囲気演出のポイント**：
+- ゲーム化のインセンティブメカニズム
+- 即時のポジティブフィードバック
+- 継続を楽しいものにする
+
+### 4.3 スキル学習パートナーマッチング
+
+**シーンの説明**：
+志を同じくする学習パートナーを見つけ、互いに励まし、進歩を共有する。学習はもう一人の孤独な旅ではない。
+
+**雰囲気演出のポイント**：
+- 同じ波長のパートナーを見つける
+- 互いに励まし合う雰囲気
+- 共に成長する喜び
+
+### 4.4 毎日の小さな幸せ発見者
+
+**シーンの説明**：
+ユーザーが生活の中の小さな美しさを発見し、感謝とポジティブな心を育むのを助ける。毎日一つの感謝する小さなことを記録する。
+
+**雰囲気演出のポイント**：
+- 見過ごされがちな美しさを発見する
+- 感謝の習慣を育む
+- ポジティブなエネルギーを蓄積する
+
+### 4.5 人生シミュレーション体験器
+
+**シーンの説明**：
+異なる人生の選択をシミュレーションし、パラレルワールドのもう一つの可能性を体験する。ユーザーが異なる可能性を探索し、よりリアルな選択をするのを助ける。
+
+**雰囲気演出のポイント**：
+- 安全な選択体験
+- 知らない自分を探索する
+- 正解も不正解もなく、体験だけがある
+
+---
+
+## 5. ソーシャルインタラクション
+
+> 💡 **コアイデア**：ソーシャルをリラックスして自然なものにし、快適なつながり方を見つける
+
+### 5.1 アイスブレイク話題ジェネレーター
+
+**シーンの説明**：
+社交の場で面白い話題を提供し、気まずさを解消し、距離を縮める。初対面の集まりでも古い友人の再会でも、適切な話題がある。
+
+**雰囲気演出のポイント**：
+- リラックスして面白い話題
+- さまざまな場面に適応
+- 自然な会話の始まり
+
+### 5.2 SNS投稿雰囲気デザイナー
+
+**シーンの説明**：
+写真と気分に基づいて、センスのあるSNS投稿文を生成する。シェアを一つの表現にし、記録に温かみを持たせる。
+
+**雰囲気演出のポイント**：
+- 個人のスタイルに合う
+- センスがあるが作っていない感じ
+- リアルな感情表現
+
+### 5.3 デート雰囲気プランナー
+
+**シーンの説明**：
+デートのための完全な雰囲気プランを設計する。場所から話題からサプライズまで。毎回のデートを美しい思い出にする。
+
+**雰囲気演出のポイント**：
+- 完全な体験デザイン
+- 適切なサプライズ
+- ロマンチックな雰囲気を演出
+
+### 5.4 オンライン集会の盛り上げ役
+
+**シーンの説明**：
+オンライン集会で雰囲気を盛り上げ、ゲームを企画し、インタラクションを促進する。リモート集会でも対面のような賑やかさを感じられるようにする。
+
+**雰囲気演出のポイント**：
+- 面白いゲームとアクティビティ
+- 自然なインタラクションを導く
+- 集団参加感を創造
+
+### 5.5 社交エネルギー管理アシスタント
+
+**シーンの説明**：
+内向的な人の社交エネルギーを管理し、快適な社交リズムを見つける。無理に性格を変える必要なく、社交の楽しさを享受できるようにする。
+
+**雰囲気演出のポイント**：
+- 個人の境界を尊重する
+- 自分に合った方法を見つける
+- 性格を変える必要はない
+
+---
+
+## 6. クリエイティブ表現
+
+> 💡 **コアイデア**：誰にでも創造力がある、ただ目覚める必要があるだけ
+
+### 6.1 インスピレーション枯渇救急キット
+
+**シーンの説明**：
+クリエイティブなボトルネック時に思いがけないインスピレーションの火花を提供する。正解ではなく、思考を広げる鍵。
+
+**雰囲気演出のポイント**：
+- 思考の固定観念を打破する
+- 予想外のつながり
+- 内在の創造力を刺激する
+
+### 6.2 パーソナルスタイル探索ガイド
+
+**シーンの説明**：
+ユーザーがユニークなパーソナルスタイルを発見するのを支援する。ファッションから表現まで。誰もが自分の声を見つけられるようにする。
+
+**雰囲気演出のポイント**：
+- ユニークな自分を発見する
+- 実験と挑戦を奨励する
+- パーソナルブランドを築く
+
+### 6.3 手帳と日記美学アドバイザー
+
+**シーンの説明**：
+手帳のレイアウト、配色、コンテンツのクリエイティブな美学アドバイスを提供する。記録をアートにし、思い出に質感を持たせる。
+
+**雰囲気演出のポイント**：
+- 視覚の美学ガイダンス
+- コンテンツのクリエイティブインスピレーション
+- パーソナライズされたスタイル
+
+### 6.4 写真構図雰囲気ガイド
+
+**シーンの説明**：
+シーンと求める雰囲気に基づいて、写真とレタッチのアドバイスを提供する。一枚一枚の写真が伝えたい感情を伝えられるようにする。
+
+**雰囲気演出のポイント**：
+- 雰囲気をテクニックより優先
+- 感情のビジュアル表現
+- 美しさを見つける目
+
+### 6.5 音楽と気分のマッチング
+
+**シーンの説明**：
+今の気分とシーンに合わせて、完璧な音楽コンボをレコメンドする。音楽は感情の共鳴であり、雰囲気のクリエイター。
+
+**雰囲気演出のポイント**：
+- 精密な感情マッチング
+- シーンに応じたレコメンド
+- 音楽のヒーリングパワー
+
+---
+
+## 7. 旅行探索
+
+> 💡 **コアイデア**：旅行は景色を見るだけでなく、異なるライフスタイルを感じること
+
+### 7.1 シティウォーク探索ガイド
+
+**シーンの説明**：
+地元の人のように都市を探索し、隠れた宝スポットを発見する。観光名所を巡るだけでなく、都市のリアルな脈動を体験する。
+
+**雰囲気演出のポイント**：
+- 地元の人の視点
+- 予想外の発見とサプライズ
+- 都市の魂に深く触れる
+
+### 7.2 旅行気分日記生成
+
+**シーンの説明**：
+旅行の写真と気分を美しい旅行記と思い出に変換する。毎回の旅行にユニークな印を残す。
+
+**雰囲気演出のポイント**：
+- 感情の記録
+- 美しい文章
+- 永遠の思い出
+
+### 7.3 一人旅コンパニオンアシスタント
+
+**シーンの説明**：
+一人旅の旅人に寄り添い、アドバイスと安心感を提供する。一人旅でも大切にされていると感じ、孤独ではないと感じられるようにする。
+
+**雰囲気演出のポイント**：
+- 安心感の演出
+- 面白い寄り添い
+- 一人でも孤独ではない
+
+### 7.4 目的地雰囲気プレビュー
+
+**シーンの説明**：
+出発前に目的地の雰囲気を没入型で体験し、事前にその状態に入る。期待を旅行の一部にする。
+
+**雰囲気演出のポイント**：
+- 没入型プレビュー
+- 期待と想像を刺激
+- 事前に旅行モードに入る
+
+### 7.5 旅行写真雰囲気ガイダンス
+
+**シーンの説明**：
+シーンと光に基づいて、ストーリー性のある旅行写真を撮影するガイダンス。記録するだけでなく、旅の物語を語る。
+
+**雰囲気演出のポイント**：
+- ストーリー性のある構図
+- 感情のキャプチャ
+- ユニークな視点
+
+---
+
+## 8. 心身健康
+
+> 💡 **コアイデア**：健康は目標ではなく、優しいセルフケア
+
+### 8.1 運動モチベーション目覚まし
+
+**シーンの説明**：
+動きたくない時にちょうど良い励ましとモチベーションを提供する。強制するのではなく、内なるモチベーションを目覚めさせる。
+
+**雰囲気演出のポイント**：
+- 動きたくない気持ちを理解する
+- 段階的なガイダンス
+- 小さなアクションを祝う
+
+### 8.2 ヘルシー食インスピレーションキッチン
+
+**シーンの説明**：
+気分と食材に基づいて、ヒーリング系のヘルシーレシピを生成する。ヘルシーな食事も美味しい楽しみになれる。
+
+**雰囲気演出のポイント**：
+- 美味しい食の誘惑
+- シンプルな作り方
+- 健康のバランス
+
+### 8.3 睡眠の質最適化雰囲気デザイナー
+
+**シーンの説明**：
+環境から心理まで、質の高い睡眠雰囲気を全方位的に演出する。睡眠を一日で最も楽しみにする瞬間にする。
+
+**雰囲気演出のポイント**：
+- 環境の最適化
+- 心理的なリラックス
+- 儀式感のデザイン
+
+### 8.4 ボディアウェアネスガイド
+
+**シーンの説明**：
+ユーザーが体のサインに注目し、心身のつながりを構築するようガイドする。忙しさの中で立ち止まり、体の声に耳を傾ける。
+
+**雰囲気演出のポイント**：
+- 優しいガイダンス
+- 体を意識する
+- 心身の統一
+
+### 8.5 セルフケアリマインダーアシスタント
+
+**シーンの説明**：
+忙しさの中で立ち止まり、自分を大切にするようリマインドする。小さな一つのリマインダーが、一日全体の状態を変えるかもしれない。
+
+**雰囲気演出のポイント**：
+- タイムリーなリマインダー
+- シンプルなアクション
+- 優しいケア
+
+---
+
+## 9. 知識探索
+
+> 💡 **コアイデア**：学びは永遠に続く冒険であり、好奇心は最高の先生
+
+### 9.1 知識探索ゲーム化ガイド
+
+**シーンの説明**：
+退屈な知識学習を楽しい探索冒険に変える。一つ一つの知識ポイントが発見を待つ宝物。
+
+**雰囲気演出のポイント**：
+- ゲーム化された体験
+- 探索の楽しさ
+- 達成の満足感
+
+### 9.2 言語学習シチュエーションパートナー
+
+**シーンの説明**：
+異なる役割を演じ、シチュエーション会話の中で自然に言語を習得する。丸暗記ではなく、使う中で学ぶ。
+
+**雰囲気演出のポイント**：
+- リアルなシチュエーション
+- 面白いキャラクター
+- 自然な習得
+
+### 9.3 好奇心充足アシスタント
+
+**シーンの説明**：
+様々な奇想天外な質問に答え、世界への好奇心を満たす。愚かな質問などなく、発見を待つ答えだけがある。
+
+**雰囲気演出のポイント**：
+- 質問を奨励する
+- 面白い回答
+- さらに好奇心を刺激する
+
+### 9.4 読書ノートインスピレーション
+
+**シーンの説明**：
+読書の感想を整理し、新しい思考角度を発見するのを助ける。読書を著者と自分自身との対話にする。
+
+**雰囲気演出のポイント**：
+- 深い思考
+- 個人の見解
+- 知識のつながり
+
+### 9.5 知識共有雰囲気演出
+
+**シーンの説明**：
+学んだ知識を面白い共有コンテンツに変換する。共有は単なるアウトプットではなく、理解を深めるプロセス。
+
+**雰囲気演出のポイント**：
+- 面白い表現
+- 共有の喜び
+- 知識の伝播
+
+---
+
+## 10. 関係構築
+
+> 💡 **コアイデア**：良い関係は心を込めて育むものであり、心を込めることは複雑でなくていい
+
+### 10.1 親密な関係コミュニケーションコーチ
+
+**シーンの説明**：
+ユーザーが言いにくい感情の表現を助け、親密な関係を改善する。時には、正しい方法で心の中の言葉を伝える必要があるだけ。
+
+**雰囲気演出のポイント**：
+- 安全な表現スペース
+- 穏やかなアドバイス
+- 理解を深める
+
+### 10.2 家族のケアリマインダーアシスタント
+
+**シーンの説明**：
+家族を気遣うようリマインドし、温かいインタラクションの提案を提供する。忙しさの中でも最も大切な人を忘れないようにする。
+
+**雰囲気演出のポイント**：
+- タイムリーなリマインダー
+- シンプルなケア
+- 温かいつながり
+
+### 10.3 友情維持雰囲気デザイナー
+
+**シーンの説明**：
+遠距離の友情を維持し、共通の話題を創造する。距離は問題ではなく、心を込めることが鍵。
+
+**雰囲気演出のポイント**：
+- つながりの機会を創造する
+- 共通の話題
+- 友情の継続
+
+### 10.4 告白とサプライズプランナー
+
+**シーンの説明**：
+大切な人のために忘れられないサプライズとロマンチックな瞬間を企画する。特別な日をさらに特別にする。
+
+**雰囲気演出のポイント**：
+- パーソナライズされたデザイン
+- ロマンチックなサプライズ
+- 忘れられない思い出
+
+### 10.5 対立緩和雰囲気ガイダンス
+
+**シーンの説明**：
+関係が緊張した時に雰囲気を緩和するアドバイスと話術を提供する。和解の橋を見つけるのを助ける。
+
+**雰囲気演出のポイント**：
+- 双方の立場を理解する
+- 穏やかなアドバイス
+- 関係の修復
+
+---
+
+## 11. ペットコンパニオン
+
+> 💡 **コアイデア**：ペットは家族であり、その寄り添いは記録され大切にされるべき
+
+### 11.1 ペット擬人化日記
+
+**シーンの説明**：
+ペットの視点で日記を生成し、飼い主との温かい日常を記録する。彼らがあなたとの時間をどう描写するかを想像してみよう。
+
+**雰囲気演出のポイント**：
+- かわいい視点
+- 温かい日常
+- 感情的なつながり
+
+### 11.2 ペット行動解読師
+
+**シーンの説明**：
+ペットの行動言語を解読し、ペットとのつながりを深める。彼らのニーズと感情をよりよく理解する。
+
+**雰囲気演出のポイント**：
+- 専門的な解読
+- 理解を深める
+- より良いケア
+
+### 11.3 ペットとの時間プランナー
+
+**シーンの説明**：
+ペットとのインタラクティブなクリエイティブ活動を設計し、絆を深める。寄り添いの時間をより面白く有意義にする。
+
+**雰囲気演出のポイント**：
+- クリエイティブなアクティビティ
+- 楽しいインタラクション
+- 美しい思い出
+
+### 11.4 ペット記念ストーリー生成
+
+**シーンの説明**：
+ペットの写真と思い出を温かい物語に変換する。ペットとの大切な時間を記録する。
+
+**雰囲気演出のポイント**：
+- 温かいナラティブ
+- 大切な思い出
+- 永遠の愛
+
+### 11.5 初心者ペットオーナー安心ガイド
+
+**シーンの説明**：
+初心者のペットオーナーに温かい寄り添いとガイダンスを提供する。ペットとの旅に自信と楽しさを満たす。
+
+**雰囲気演出のポイント**：
+- 包括的なガイダンス
+- 温かい励まし
+- 安心の寄り添い
+
+---
+
+## 12. 財務健康
+
+> 💡 **コアイデア**：財務自由が目標ではなく、財務健康が目標
+
+### 12.1 消費感情アウェアネスアシスタント
+
+**シーンの説明**：
+衝動買いの背後にある感情を認識し、健康的な消費観を構築する。なぜ買いたいのかを理解することが、買うか買わないかより重要。
+
+**雰囲気演出のポイント**：
+- 優しいアウェアネス
+- ジャッジではなく理解
+- 健康な習慣
+
+### 12.2 貯蓄目標ビジュアル化モチベーション
+
+**シーンの説明**：
+貯蓄目標をビジュアル化された夢の進捗に変換する。貯蓄を夢を実現する旅にする。
+
+**雰囲気演出のポイント**：
+- ビジュアル化された進捗
+- 夢とのつながり
+- 達成の満足感
+
+### 12.3 資産運用知識カジュアル学習
+
+**シーンの説明**：
+楽しく面白い方法で資産運用知識を学ぶ。資産運用は退屈である必要はなく、楽しい探索になり得る。
+
+**雰囲気演出のポイント**：
+- リラックスした表現
+- 面白い事例
+- 実用的な知識
+
+### 12.4 財務不安緩和アシスタント
+
+**シーンの説明**：
+財務的ストレスに直面した時に感情的サポートと実用的アドバイスを提供する。不安は問題を解決しないが、平静は解決できる。
+
+**雰囲気演出のポイント**：
+- 感情の鎮静
+- 実用的なアドバイス
+- 希望の力
+
+### 12.5 少額投資体験ゲーム
+
+**シーンの説明**：
+ゲーム化方式で投資を体験し、導入のハードルを下げる。安全な環境で投資を学ぶ。
+
+**雰囲気演出のポイント**：
+- ゲーム化された体験
+- 安全な試み
+- 学びの楽しさ
+
+---
+
+## 13. キャリア開発
+
+> 💡 **コアイデア**：キャリアはレールではなく、探索できる広野
+
+### 13.1 キャリア迷いコンパニオン
+
+**シーンの説明**：
+キャリアの迷いの時期に傾聴、探索、方向性のアドバイスを提供する。迷いは正常であり、重要なのは一人で向き合わないこと。
+
+**雰囲気演出のポイント**：
+- ジャッジしない傾聴
+- 探索の可能性
+- 温かい寄り添い
+
+### 13.2 仕事の達成感目覚まし
+
+**シーンの説明**：
+仕事の中の価値と意義を発見し、情熱を再燃させる。時には視点を変えるだけでいい。
+
+**雰囲気演出のポイント**：
+- 価値を発見する
+- 情熱を再燃させる
+- 達成感
+
+### 13.3 職場社交雰囲気アシスタント
+
+**シーンの説明**：
+職場の社交のリラックスした話題とインタラクションのアドバイスを提供する。職場の社交をあまり気まずくなく、より自然にする。
+
+**雰囲気演出のポイント**：
+- リラックスした話題
+- 自然なインタラクション
+- 快適な関係
+
+### 13.4 副業インスピレーションジェネレーター
+
+**シーンの説明**：
+個人の興味とスキルに基づいて副業のクリエイティブを刺激する。仕事以外の無限の可能性を探索する。
+
+**雰囲気演出のポイント**：
+- 興味の掘り起こし
+- 可能性の探索
+- アクションの励まし
+
+### 13.5 面接前自信充填ステーション
+
+**シーンの説明**：
+面接前に心理的な準備と自信の励ましを提供する。最高の状態でチャンスを迎えられるようにする。
+
+**雰囲気演出のポイント**：
+- 自信の構築
+- 十分な準備
+- 最高の状態
+
+---
+
+## 14. 居住空間
+
+> 💡 **コアイデア**：家は住む場所だけでなく、心の憩いの場
+
+### 14.1 居住空間雰囲気デザイナー
+
+**シーンの説明**：
+気分と季節に合わせて、住まいの雰囲気プランを設計する。家を気分と季節と共に変化させる。
+
+**雰囲気演出のポイント**：
+- 雰囲気のデザイン
+- 季節の変化
+- 気分のマッチング
+
+### 14.2 四季のインテリアチェンジガイド
+
+**シーンの説明**：
+季節に合わせてインテリアを変え、新鮮さを保つ。家に常に活力とサプライズを満たす。
+
+**雰囲気演出のポイント**：
+- 季節のテーマ
+- 新鮮な感覚
+- 生活の儀式感
+
+### 14.3 狭い空間の魔法
+
+**シーンの説明**：
+小さな空間でも快適で温かい雰囲気を実現する。空間の大きさは重要ではなく、感覚が重要。
+
+**雰囲気演出のポイント**：
+- 空間の最適化
+- 温かい雰囲気
+- 快適な生活
+
+### 14.4 暮らしの儀式感クリエイター
+
+**シーンの説明**：
+日常の暮らしの活動に儀式感を創造する。平凡な家事にも意味を持たせる。
+
+**雰囲気演出のポイント**：
+- 儀式のデザイン
+- 意味の付与
+- 生活の品質
+
+### 14.5 断捨離心理コンパニオン
+
+**シーンの説明**：
+片付け時に心理的サポートと意思決定のアドバイスを提供する。断捨離は単なるものを捨てることではなく、心の整理。
+
+**雰囲気演出のポイント**：
+- 心理的なサポート
+- 意思決定のヘルプ
+- 心の整理
+
+---
+
+## 15. グルメ料理
+
+> 💡 **コアイデア**：食べ物は愛の言葉であり、料理は愛を表現する方法
+
+### 15.1 一人暮らしヒーリング料理
+
+**シーンの説明**：
+一人暮らしのためのシンプルでヒーリング系の料理プラン。一人でもしっかり食事をとり、自分を大切にする。
+
+**雰囲気演出のポイント**：
+- シンプルな作り方
+- ヒーリングの味
+- 自愛の表現
+
+### 15.2 特別な日のテーブル雰囲気デザイン
+
+**シーンの説明**：
+特別な日のために儀式感のあるテーブルセッティングを設計する。毎食を記念すべき瞬間にする。
+
+**雰囲気演出のポイント**：
+- 儀式のデザイン
+- 視覚の享受
+- 美しい思い出
+
+### 15.3 料理気分マッチング
+
+**シーンの説明**：
+今の気分に合わせて適切な食べ物と作り方をレコメンドする。時には、その一口の合う味が必要なだけ。
+
+**雰囲気演出のポイント**：
+- 気分のマッチング
+- 食べ物のヒーリング
+- 感情のつながり
+
+### 15.4 キッチン初心者の自信構築
+
+**シーンの説明**：
+未経験の料理人に温かい励ましとシンプルなレシピを提供する。誰もが自分のシェフになれる。
+
+**雰囲気演出のポイント**：
+- シンプルな始まり
+- 温かい励まし
+- 自信の構築
+
+### 15.5 料理写真雰囲気ガイド
+
+**シーンの説明**：
+家庭料理でも魅力的な雰囲気のある写真を撮れるようにする。グルメを記録することも、生活の美しさを記録すること。
+
+**雰囲気演出のポイント**：
+- 雰囲気の演出
+- 視覚の享受
+- 生活の記録
+
+---
+
+## 16. ファッションスタイル
+
+> 💡 **コアイデア**：ファッションは自己表現であり、スタイルは内面の外側への表れ
+
+### 16.1 今日のコーデ気分ボード
+
+**シーンの説明**：
+天気、場面、気分に合わせてコーデのインスピレーションを生成する。毎日のコーデで今の気分を表現する。
+
+**雰囲気演出のポイント**：
+- 気分の表現
+- 場面のマッチング
+- 自信の構築
+
+### 16.2 カプセルワードローブコーディネーター
+
+**シーンの説明**：
+限られたアイテムで無限のコーディネートの可能性を創造する。少ないほど多い。シンプルでもスタイリッシュに。
+
+**雰囲気演出のポイント**：
+- ミニマリズムの理念
+- クリエイティブなコーディネート
+- サステナブルなファッション
+
+### 16.3 パーソナルスタイル探索の旅
+
+**シーンの説明**：
+ユーザーがユニークなパーソナルスタイルを発見し、構築するのを支援する。ファッションは服を着るだけでなく、自分の態度を着ること。
+
+**雰囲気演出のポイント**：
+- 自己の探索
+- スタイルの構築
+- 自信の表現
+
+### 16.4 古着の新しい着こなしクリエイター
+
+**シーンの説明**：
+古着に新しいコーディネートのインスピレーションを提供する。古着に新たな命を吹き込み、サステナブルなファッションを創造する。
+
+**雰囲気演出のポイント**：
+- クリエイティブなコーディネート
+- エコの理念
+- 新鮮な感覚
+
+### 16.5 特別な場面のスタイリングアドバイザー
+
+**シーンの説明**：
+重要な場面で自信を持てるスタイリングを設計する。すべての重要な瞬間に完璧なプレゼンテーションを。
+
+**雰囲気演出のポイント**：
+- 場面のマッチング
+- 自信の向上
+- 完璧なプレゼンテーション
+
+---
+
+## Cエンドプロダクトをデザインするコアメソッド
+
+### 1. 「機能」から「感覚」へ
+
+Bエンドプロダクトは「この機能はどんな問題を解決するか」に注目し、Cエンドプロダクトは「この機能はどんな感覚をもたらすか」に注目する。
+
+| Bエンド思考 | Cエンド思考 |
+|---------|---------|
+| 効率の向上 | 時間を節約して好きなことをする |
+| コスト削減 | 一円一円を有意義に使う |
+| ペインポイント解決 | 素晴らしい体験を創造する |
+| 機能の網羅 | 感覚が腑に落ちる |
+
+### 2. 雰囲気演出の3つのレベル
+
+**感覚層**：視覚、聴覚、触覚のデザイン
+- 温かみのある色
+- 穏やかな音
+- スムーズなアニメーション
+
+**感情層**：感情の共鳴とガイダンス
+- ユーザーの気分を理解する
+- 感情的なサポートを提供する
+- ポジティブな感情を創造する
+
+**意味層**：価値の認識と帰属
+- ユーザーが理解されていると感じる
+- 帰属感を創造する
+- 行動に意味を与える
+
+### 3. 心理的暗示の力
+
+Cエンドプロダクトのコピーとデザインはすべて心理的暗示を伝えている：
+
+- **ポジティブな暗示**：「あなたはすでに十分にやっている」「焦らなくていい、大丈夫」
+- **帰属の暗示**：「たくさんの人があなたと同じ」「あなたは一人ではない」
+- **成長の暗示**：「毎回の試みが進歩」「あなたはより良くなっている」
+
+### 4. ユーザーをより良い自分にする
+
+最高のCエンドプロダクトはユーザーを変えるのではなく、ユーザーがなりたい自分になるのを助ける。
+
+- 「あなたは...すべき」ではなく、「あなたは...できる」
+- 「あなたは...しなければならない」ではなく、「もし...したいなら」
+- 「あなたはまだ...」ではなく、「あなたはすでに...」
+
+---
+
+> 🌟 **覚えておこう**：Cエンドユーザーが買うのは機能ではなく感覚であり、ツールではなく寄り添いであり、サービスではなく理解である。
diff --git a/docs/ja-jp/stage-1/appendix-double-diamond/index.md b/docs/ja-jp/stage-1/appendix-double-diamond/index.md
new file mode 100644
index 0000000..c92d3f0
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-double-diamond/index.md
@@ -0,0 +1,544 @@
+---
+title: 'ダブルダイヤモンドモデル：正しいことをして、正しくやる'
+description: 'ゼロベースの読者向け Double Diamond 入門記事。Discover、Define、Develop、Deliver の4つの段階を理解し、問題が明確になる前にプロトタイプを作り始めるのを防ぐ。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 時間</strong>'
+</script>
+
+# ダブルダイヤモンドモデル：正しいことをして、正しくやる
+
+<a id="top-dd"></a>
+
+## 本章のガイド
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Double Diamond', 'デザイン思考', '要件分析', 'ソリューション設計']"
+  coreOutput="より明確な問題定義と、より合理的な検証の切り口"
+  expectedOutput="いきなりプロトタイプを作り始めるのではなく、まず問題を明確にしてからソリューションを比較できるようになる"
+>
+
+多くの人が初めてプロダクトを作るとき、最も陥りやすい罠は「不够努力」ではなく、ソリューションに早く入りすぎることです。
+
+頭の中に方向性が浮かんだ途端、ページのレイアウト、ボタンの配置、AIの統合の有無、ログイン登録の要否、プロトタイプのツール選びなどを考え始めます。色々と作業した後で、根本的な問題が全く考えられていなかったことに気づくのです：ユーザーに本当にそのペインポイントがあるのか？この問題に今取り組む価値があるのか？プロジェクトを前に進めているつもりで、実は間違った方向で一所懸命加速しているだけなのです。
+
+ダブルダイヤモンドモデル（Double Diamond）は、まさにこの状況を防ぐためにあります。
+
+このモデルが最も価値ある点は：**「正しいことをする」と「正しくやる」は、全く異なる2つの段階である**という提醒です。問題がまだ明確になっていないのに、急いでプロトタイプを作り始めると、通常は間違った方向をより完全に仕上げるだけです。
+
+</ChapterIntroduction>
+
+::: info 最小SOP
+**目的**：読み終えた後、プロダクトを作るときにいつまず問題を考え、いつからソリューションやプロトタイプを考え始めればよいかがより明確になり、いきなり間違った方向で一所懸命作業するのを防げるようになります。
+
+**アクションアイテム**：`Discover → Define → Develop → Deliver`の4つのステップに沿って進み、各ステップでその段階がやるべきことだけを行う。
+
+**結果**：より明確な問題定義、複数の比較可能なソリューション、そして検証可能な最小バージョンを得られます。
+
+**キーワードジャンプ**：[ダブルダイヤモンドモデルとは](#dd-what) · [最初のダイヤモンド](#dd-first) · [AIがどう役立つか](#dd-ai)
+:::
+
+## 以下の内容を学びます
+
+1. ダブルダイヤモンドモデルとは何か、なぜゼロベースのプロダクト作りに適しているのか
+2. Discover、Define、Develop、Deliver の4つの段階がそれぞれ何をしているのか
+3. 「今はまだ発散を続けるべき」か「今から収束を始めるべき」かをどう見分けるか
+4. ダブルダイヤモンドモデルをAIプロダクト、プロトタイプ設計、要件検証にどう活用するか
+
+<a id="dd-what"></a>
+## [1. ダブルダイヤモンドモデルとは](#top-dd)
+
+ダブルダイヤモンドモデルは、英国の**Design Council**が提唱した古典的なデザインプロセスフレームワークです。完全なデザイン・イノベーションプロセスを、2つの連続したダイヤモンド形で表します。
+
+「ダイヤモンド」の形になっているのは、各ダイヤモンドが相反するがどちらも重要な2つのアクションを含んでいるからです：
+
+- **発散**：まず視野を広げ、より多くの可能性を見る
+- **収束**：次に範囲を絞り、判断と取捨選択を行う
+
+全プロセスは4つのステップからなります：
+
+1. **Discover**：ユーザー、問題、環境、市場を広く理解する
+2. **Define**：大量の情報から、本当に解決すべき核心問題を抽出する
+3. **Develop**：核心問題を中心に複数のソリューションを発散させる
+4. **Deliver**：スクリーニング、プロトタイプ、テスト、そしてより適切なソリューションを納品する
+
+この4つのステップを最も覚えやすい一言に圧縮すると：
+
+- **最初のダイヤモンド**：まず何を解決すべきかを明確にする
+- **2つ目のダイヤモンド**：その問題をどう解決するかを決める
+
+これはあなたが正確に表現した次の言葉と同じです：
+
+- **最初のダイヤモンド：正しいことをする**
+- **2つ目のダイヤモンド：正しくやる**
+
+## 2. なぜダブルダイヤモンドモデルは初心者に特に適しているのか
+
+初心者がプロダクトを作るとき、最もよくあるリズムは次のようになります：
+
+- アイデアを思いつく
+- この方向性がかっこいいと思う
+- すぐにプロトタイプを作り始める
+- 作っているうちに機能が増えていく
+- 最終的に自分が何を解決しているのか分からなくなる
+
+ダブルダイヤモンドモデルの価値は、プロセスを複雑にすることではなく、**「問題を理解する」と「ソリューションを設計する」を切り離す**ことにあります。
+
+これはシンプルに聞こえますが、実は非常に重要です。なぜなら、多くの失敗したプロダクトは、実行が不真面目だったのではなく：
+
+- 間違った問題を選んだ
+- ユーザーを誤解した
+- ソリューションを早すぎるとロックした
+- 大量の時間を細部の磨き上げに費やし、方向性を検証しなかった
+
+ダブルダイヤモンドモデルは常に次のように提醒します：
+
+- 思いつきやすいからといって、問題が成立していると早とちりしない
+- ソリューションを作れるからといって、それが作る価値があるとは限らない
+- プロトタイプが完全に見えるからといって、ユーザーが本当に必要とするとは限らない
+
+<a id="dd-first"></a>
+## [3. 最初のダイヤモンド：正しいことをする](#top-dd)
+
+最初のダイヤモンドが焦点を当てるのは**問題そのもの**であり、ソリューションではありません。
+
+一言で理解するなら：**まず急いで作るのではなく、本当にやる価値があるかどうかを明確にする。**
+
+### 3.1 Discover：まず問題空間を広げる
+
+Discover段階の核心的なタスクは、**広く調査することであり、早急に結論を出すことではありません。**
+
+このステップで通常行うことには以下が含まれます：
+
+- ユーザーが実際のシナリオでどう行動しているかを見る
+- 潜在ユーザーにインタビューし、最後に問題に遭遇したのがいつかを理解する
+- 現在どうやって代替手段で対処しているかを見る
+- 競合や代替ソリューションの対応方法を確認する
+- 市场、プロセス、制約、サプライチェーンの情報を収集する
+
+多くの人はDiscoverを「資料をたくさん見ること」と誤解しがちです。実はもっと重要なのは：**情報とデータではなく、人とシナリオを理解することです。**
+
+例えば「AIで議事録を整理するツール」を作りたい場合、Discover段階では以下に注目すべきです：
+
+- ユーザーが会議後に最も苦痛に感じるのはどこか
+- 議事録か、整理か、それとも共有か
+- 現在は自分で書いているのか、インターンに頼んでいるのか、録音を聞き直しているのか、それとも整理していないのか
+- どの会議シナリオで議事録が最も必要で、どのシナリオでは不要なのか
+
+このステップの最も重要な目標は答えを出すことではなく、**早すぎる段階で答えが分かったと思い込まないことです。**
+
+### 3.2 Define：大量の情報から核心問題を抽出する
+
+Discoverが視野を広げることだとすれば、Defineは収束を始めることです。
+
+Define段階でやるべきことは、すべての観察を残すことではなく、次の問いに答えることです：
+
+- 本当に最優先で解決すべき問題はどれか
+- どの問題が最も頻繁に発生し、最も痛みが強く、最も価値があるか
+- 第1版ではどのシナリオに絞るべきか
+
+このステップの核心は、幅広いトピックを明確な問題定義に収束させることです。
+
+例えば最初はこう言っていたかもしれません：
+
+> 会議の効率を高めるAIツールを作りたい。
+
+Define段階に到達すると、より良い表現は次のようになるかもしれません：
+
+> プロジェクト型チームが30〜60分の協働会議を終えた後、10分以内にToDo、担当者、期限付きの議事録を出力できない問題を、まず解決する。
+
+ここで問題が明確になり始めます：
+
+- ユーザーは誰か
+- シナリオは何か
+- ボトルネックは何か
+- 成功基準は何か
+
+Defineの本質は、**「問題がたくさんある」状態から「今回はどの問題を先に解決するか」への収束です。**
+
+## 4. 2つ目のダイヤモンド：正しくやる
+
+最初のダイヤモンドを完了して初めて、2つ目のダイヤモンドに進むのが適切です。なぜなら、この時点で解決しているのは曖昧な方向ではなく、収束された具体的な問題だからです。
+
+### 4.1 Develop：核心問題を中心にソリューションを発散させる
+
+Develop段階の重点は、**同じ問題に対して、複数の可能なソリューションを探索することです。**
+
+なお、ここの発散はDiscover段階のものとは異なります：
+
+- Discoverの発散は、問題空間を探索すること
+- Developの発散は、ソリューション空間を探索すること
+
+議事録の例で言えば、Develop段階では以下のことを考え始めることができます：
+
+- Webツールにするのか、会議プラグインにするのか
+- 録音をアップロードしてから処理するのか、リアルタイムで記録するのか
+- 要約だけにするのか、ToDo抽出をメインにするのか
+- 個人効率を強調するのか、チーム共有を強調するのか
+- ユーザーに自由に編集させるのか、構造化テンプレートとして直接出力するのか
+
+このステップはブレインストーミングに適しており、チームと一緒にソリューションを広げるのにも適しています。
+
+ただし、ここには一つの前提があります：**すべてのソリューションは、定義済みの同じ問題にサービスする必要があります。**
+問題が明確に定義されていないと、Developは再び機能の乱れに戻ってしまいます。
+
+### 4.2 Deliver：ソリューションの選択、プロトタイプ、テスト、納品
+
+Deliver段階は2つ目のダイヤモンドの収束段階です。
+
+このときやるべきことは、さらに多くのアイデアを考えることではなく、判断を始めることです：
+
+- 現在の段階に最も適したソリューションはどれか
+- 最小で最も有用なバージョンはどれか
+- どの機能を先に作る必要があり、どれは後回しでいいか
+- プロトタイプ、テスト、小規模検証をどう進めるか
+
+多くの人はDeliver＝「公開」と誤解しがちです。実際のより正確な意味は：**ソリューションをテスト可能、検証可能、反復可能なものに変えることです。**
+
+それは次のようなものかもしれません：
+
+- 低 fidelity のフロー図
+- Figma プロトタイプ
+- 動作するMVP
+- 小規模なユーザーテスト
+- 実際のフィードバック後の反復バージョン
+
+Deliverのポイントは「完璧な納品」ではなく、**できるだけ早くソリューションを実際の環境で検証することです。**
+
+## 5. 最も覚えやすい比較表
+
+4つの段階がいつも混同されるなら、以下のバージョンを直接覚えてください：
+
+| 段階 | 何をしているか | キーワード | 一般的な成果物 |
+| --- | --- | --- | --- |
+| Discover | 問題を理解する | 調査、観察、インタビュー、情報収集 | ユーザーインサイト、シナリオノート、問題リスト |
+| Define | 問題を定義する | 抽出、焦点、取捨選択、問題の書き直し | 問題定義、優先順位、MVPの切り口 |
+| Develop | ソリューションを探索する | ブレインストーミング、比較、共創、プロトタイプの構想 | ソリューションリスト、フローのラフスケッチ、プロトタイプの方向性 |
+| Deliver | ソリューションを検証する | プロトタイプ、テスト、反復、納品 | プロトタイプ、テストフィードバック、最適化バージョン |
+
+さらに圧縮すると：
+
+- **Discover / Define**：「正しいことをする」を解決する
+- **Develop / Deliver**：「正しくやる」を解決する
+
+## 6. ダブルダイヤモンドモデルの最もよくある誤解
+
+### 6.1 Discover前にいきなりDeliver
+
+これが最もよくあるパターンです。アイデアを思いついた瞬間にプロトタイプを書き始め、PRDを書き、モデルを統合し、ページを作る。
+
+問題は真面目にやっていないのではなく、問題が解決する価値があるかどうかをまだ確認していない可能性があることです。
+
+### 6.2 Discoverを長くやりすぎて、Defineに入らない
+
+もう一つの極端な例は、ずっと調査し、ずっと資料を見続け、ずっとインタビューしているのに、収束するのを恐れることです。
+
+ダブルダイヤモンドは無限の発散を促すものではなく、発散の後には必ず判断と取捨選択に入る必要があることを提醒します。
+
+### 6.3 Defineの後、こっそり問題を変える
+
+多くのチームはDevelop段階で、あるソリューションが作りやすいからといって、逆に問題定義を変更して既存のソリューションに適合させようとします。
+
+これは非常に危険です。なぜなら、問題を解決しているのではなく、自分の好きなソリューションに理由を見つけているだけかもしれないからです。
+
+### 6.4 Deliverを「すべて盛りで公開」と誤解する
+
+Deliverは完全なプロダクトをすべて作り終えて初めて終わりという意味ではありません。多くの場合、テスト可能なプロトタイプ、1回の実際のユーザートライアルが、すでに良いdeliverです。
+
+## 7. AIプロダクトで、ダブルダイヤモンドモデルをどう使うか
+
+AIプロダクトは特に「能力先行」の罠に陥りやすいです。なぜならモデルの能力があまりにも魅力的に見えるからです。以下のことを考え始めたくなります：
+
+- マルチモーダルを統合するかどうか
+- Agentにするかどうか
+- ワークフローを追加するかどうか
+- 音声、画像、インターネット検索を統合するかどうか
+
+しかし、ダブルダイヤモンドモデルはまず以下の問いを強制します：
+
+- ユーザーはどのステップで本当に詰まっているのか
+- このボトルネックは本当にAIでなければ解決できないのか
+- AIを使わない場合、既存の方法はどこが最も悪いのか
+- AIを加えた後、最も核心的な進展は何か
+
+これはよくある状況を回避するのに役立ちます：**能力は強いが、価値は弱い。**
+
+実用的な順序は次の通りです：
+
+1. Discover段階でユーザーが現在タスクをどう処理しているかを観察する
+2. Define段階で最も痛みの強いシナリオを一文の明確な問題定義にする
+3. Develop段階でどのAI能力がこの問題に最も適しているかを比較する
+4. Deliver段階で最小バージョンを作り、実際のユーザーにテストしてもらう
+
+## 8. そのまま使えるダブルダイヤモンドテンプレート
+
+自分のプロダクトを作っている場合は、まずこの順序に従って書いてみてください：
+
+### Discover
+
+- 観察したユーザーは誰ですか？
+- そのユーザーが最後にこの問題に遭遇したのはいつですか？
+- 現在どうやって解決していますか？
+- 最も煩わしい、最も遅い、最も不安な部分はどこですか？
+
+### Define
+
+- この山積みの問題の中で、最も優先して解決すべきものはどれですか？
+- どのシナリオが最も頻度が高い、または最も重要ですか？
+- 第1版ではまず誰にサービスし、何だけを解決しますか？
+- 問題が解決された後、ユーザーの状態はどう変わりますか？
+
+### Develop
+
+- この問題に対して、どのような可能なソリューションがありますか？
+- どのソリューションが最も軽く、最も速く、最も検証しやすいですか？
+- 何を必ずやる必要があり、何は後回しにできますか？
+
+### Deliver
+
+- この方向を検証するために、最小で何を納品できますか？
+- フロー図、プロトタイプ、それともMVPですか？
+- 誰にテストを依頼しますか？
+- テスト後、継続、修正、中止をどう判断しますか？
+
+## 9. ゼロベースでも理解できる例
+
+「大学生の就職活動用レジュメ作成を支援する」AIツールを作りたいと仮定します。
+
+多くの人は最初から2つ目のダイヤモンドに入り、次のことを考え始めます：
+
+- ワンクリックで美しくするかどうか
+- AIで書き直すかどうか
+- JDと自動マッチングするかどうか
+- 自己紹介を生成するかどうか
+
+しかし、ダブルダイヤモンドモデルに従えば、より良いプロセスは次のようになります：
+
+### 最初のダイヤモンド
+
+**Discover**
+
+- 新卒学生が最後にレジュメを修正したのがいつかを聞きに行く
+- 古いレジュメをどうやって新しいバージョンに変えたかを見る
+- 最も苦痛なのが「書き方が分からない」「修正の仕方が分からない」なのか、「良し悪しの判断ができない」なのかを理解する
+
+**Define**
+
+- 最終的により具体的な問題に収束する：
+- 「大学生がレジュメを作れない」ではなく
+- 「初めてインターンに応募する学生が、既存の経験をポジションに合った表現に書き直せず、応募を先延ばしにしている」
+
+### 2つ目のダイヤモンド
+
+**Develop**
+
+- いくつかのソリューションを考える：テンプレートライブラリ、AI書き直し、ポジション比較、レジュメスコアリング、ケース参考
+
+**Deliver**
+
+- 第1版は「ポジション記述に基づいて経験のbullet pointsを書き直す」機能のみ
+- 5人の学生に試用してもらい、最初の版のレジュメをより早く提出できるかどうかを確認する
+
+最初のダイヤモンドをしっかりやれば、2つ目のダイヤモンドはずっと明確になることが分かるでしょう。
+
+## 10. まとめ
+
+ダブルダイヤモンドモデルが最も力を発揮するのは、全体のごちゃ混ぜ状態を4つのより明確なアクションに分解することです：
+
+- まず発散して問題を理解する
+- その後収束して問題を定義する
+- 再び発散してソリューションを探索する
+- 最後に収束してソリューションを納品する
+
+これはあなたを遅くするのではなく、**忙しく見えて実は方向が間違っている遠回りを大幅に減らしてくれます。**
+
+特にAI時代において、ものを作るスピードがますます速くなる中、ダブルダイヤモンドモデルは逆に重要になります。なぜなら「作る」ことがますます簡単になると、本当に希少な能力は次のようになるからです：**あなたが解決する価値のある問題を解決しているか、そして適切な方法でそれを解決しているかどうか。**
+
+この一言を覚えておけば十分です：
+
+**まず正しいことをして、その後正しくやる。**
+
+<a id="dd-ai"></a>
+## [11. AIを使ってダブルダイヤモンドプロセスを進める方法](#top-dd)
+
+ダブルダイヤモンドモデル自体はAIツールではありませんが、AIは4つの段階で「アクセラレーター」として非常に適しています。重要なのは、AIに意思決定を任せるのではなく、視野の拡大、情報の整理、ソリューションの比較、検証資料の生成を支援させることです。
+
+### 11.1 Discover段階で、AIを使ってまず情報の基盤を作る
+
+正式なインタビューや調査の前に、AIに軽量な問題スキャンをさせると良いでしょう：
+
+- 市場にある一般的な代替ソリューションは何か
+- ユーザーが公開コミュニティで最もよく不満を言っているのは何か
+- この問題はどのようなシナリオとユーザー層に多いか
+- 既存のプロダクトが通常見落としているのは何か
+
+このステップは実際の調査に代わるものではありませんが、問題マップを素早く構築するのに非常に適しています。
+
+シンプルな初心者入力は次のようなものです：
+
+```text
+大学生のレジュメ添削を支援するツールを作りたい。
+まず機能を考える前に、この問題で皆が最もよく遭遇するトラブルを見てほしい。
+```
+
+AIは次のような出力をするかもしれません：
+
+```text
+初期問題マップ：
+
+1. どんな経験を書けばいいか分からない
+2. ポジションに合わせてどう修正すればいいか分からない
+3. 何度修正しても十分良いかどうか確信が持てない
+4. 誰かに見てもらいたいが、毎回頼むのは気が引ける
+5. 確信がないため、提出を先延ばしにしてしまう
+```
+
+この出力の目的は、あなたに代わって結論を出すことではなく、Discoverにより早く入るためのものです。
+
+### 11.2 Define段階で、AIに問題定義の収束を支援させる
+
+多くの人は資料をたくさん集めた後、問題を本当に明確な一文に圧縮するのが最も難しいと感じます。調査ノートをAIに渡して、複数の候補問題定義に圧縮してもらうことができます：
+
+```text
+以下はDiscover段階で収集したユーザーフィードバックと調査ノートです：
+[内容を貼り付ける]
+
+次の3つのことをしてください：
+1. 最も頻繁に出現する問題パターンを分類・整理する
+2. 問題の頻度、痛みの強さ、検証可能性に基づいて、優先的に解決すべき3つの問題を整理する
+3. 各問題を具体的な問題定義の一文に書く
+```
+
+これにより、Defineによりスムーズに入れるようになります。「問題がたくさんある」状態に留まり続けることがなくなります。
+
+入力を非常にシンプルに書くこともできます：
+
+```text
+現在収集した問題は以下の通りです：
+1. 皆はレジュメに何を書けばいいか分からない
+2. 皆はどう修正すればいいか分からない
+3. 皆はいつもまだ十分に修正できていないと感じ、提出をためらう
+
+第1版ではどの問題を先に解決するのが最も適切か見てほしい。
+```
+
+AIは次のような出力をするかもしれません：
+
+```text
+優先的に解決すべき問題：
+
+「初めてインターンに応募する学生が、レジュメが提出可能なレベルに達しているか確信が持てず、何度も修正を繰り返して提出を先延ばしにしている。」
+
+理由：
+1. この問題はより具体的である
+2. 先延ばし行動を説明できる
+3. 小さなバージョンで検証しやすい
+```
+
+このような出力は非常に有用です。なぜなら、曖昧な問題の山からMVPの出発点により近い定義へと収束させてくれるからです。
+
+### 11.3 Develop段階で、AIに複数のソリューションを発散させる
+
+問題を定義した直後、頭に浮かんだ最初のソリューションだけに固執しがちです。AIはこのステップで強制的に発散させるのに非常に適しています：
+
+```text
+私はすでに核心問題を定義しました：[あなたの問題定義]
+最終的な回答を直接出すのではなく、以下の角度からそれぞれ2〜3種類の解決方向を提案してください：
+1. 最も軽量なMVP
+2. ニーズ検証に最も適したソリューション
+3. 体験向上に最も適したソリューション
+4. AIに依存しないソリューション
+5. AIに依存するソリューション
+最後に各ソリューションのメリット、リスク、検証コストを比較してください。
+```
+
+これにより、一つのソリューションに早すぎる段階で縛られなくなります。
+
+シンプルな入力は次のように書けます：
+
+```text
+私の現在の問題定義は：
+「大学生はレジュメが提出可能かどうか確信が持てず、ずっと先延ばしにしている。」
+
+4つの異なるソリューションを考えてほしい、1つだけでいいのにしないでほしい。
+```
+
+AIは次のような出力をするかもしれません：
+
+```text
+ソリューション1：レジュメ提出チェックリスト
+ソリューション2：ポジション記述に基づく针对性のある書き直し
+ソリューション3：ユーザーがレジュメをアップロードした後にリスク警告を提示
+ソリューション4：優秀なケースとの照合を提供し、ユーザーがギャップを判断できるようにする
+```
+
+これにより、「ソリューションの比較」に入りやすくなり、最初からAI書き直しという一つの方向だけに固執しなくなります。
+
+### 11.4 Deliver段階で、AIにプロトタイプのテキストとテスト資料の生成を支援させる
+
+Deliver段階に入ると、AIは次の作業を加速するのに非常に適しています：
+
+- 低 fidelity プロトタイプのページテキストの生成
+- ユーザーテストスクリプトの整理
+- 比較可能な複数バージョンのタイトル、ボタン、説明文の生成
+- テスト後のフィードバックと問題リストの整理
+
+例えば、AIに20分間のユーザーテストスクリプトを生成させたり、5人のユーザーフィードバックを「継続／方向修正／一時停止」の判断基準に整理させたりすることができます。
+
+例えば、最もシンプルな入力は次のように書けます：
+
+```text
+非常にシンプルなプロトタイプを作った：
+ユーザーがレジュメをアップロードすると、システムがどこがまだ提出に適していないかを教える。
+
+15分間のユーザーテストスクリプトを生成してほしい。
+```
+
+AIは次のような出力をするかもしれません：
+
+```text
+15分間テストスクリプト：
+
+1. まずユーザーに最近のレジュメ提出経験を説明してもらう
+2. ユーザーに自力でレジュメのアップロードを完了してもらう
+3. フィードバック結果を理解できるか観察する
+4. 質問する：これらのヒントのうち、どれが最も役立ち、どれが混乱を招いたか
+5. 質問する：次回提出前に、もう一度使いたいと思うか
+```
+
+このような出力は非常に実用的です。なぜなら、「プロトタイプが完成した」から「次にどうテストするか」まで導いてくれるからです。
+
+### 11.5 AIに「段階ゲートキーパー」を演じさせる
+
+ダブルダイヤモンドモデルで最もよくある問題は、ステップを飛ばすことです。AIに直接ゲートキーパーを務めさせ、今がどのステップにいるのかをリマインドさせることができます：
+
+```text
+あなたはプロダクトプロセスコーチとして行動してください。
+以下は私の現在のプロジェクトの状態です：[あなたの説明]
+私が現在Discover、Define、Develop、Deliverのどれにいるかを判断してください。
+そして以下を教えてください：
+1. 早すぎる次の段階へのジャンプをしていないか
+2. 現在の段階で最も補うべきアクションは何か
+3. 今はまだやるべきでないことは何か
+```
+
+これは初心者にとって特に役立ちます。なぜなら、「問題がまだ明確になっていないのにプロトタイプを作り始める」ことが非常に起こりやすいからです。
+
+## 📚 課題
+
+上記の内容に基づいて、次の課題を完了してください：
+
+1. 最近作りたいプロダクトのアイデアを1つ選び、Discover、Define、Develop、Deliverの4ステップのドラフトを書く
+2. Define段階で、問題を強制的に一文に圧縮する
+3. Develop段階で、少なくとも3種類の異なるソリューションをリストアップし、最初に思いついた方法だけに固執しない
+4. Deliver段階で、1週間以内に納品可能な最小検証バージョンを書き出す
+
+## 参考文献
+
+この記事は主にDesign CouncilのDouble Diamondに関する公式資料を参照しており、さらに深く読むのに適しています：
+
+- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
+- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
+- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
diff --git a/docs/ja-jp/stage-1/appendix-idea-sources/index.md b/docs/ja-jp/stage-1/appendix-idea-sources/index.md
new file mode 100644
index 0000000..083fb34
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-idea-sources/index.md
@@ -0,0 +1,301 @@
+---
+title: 'アイデアの見つけ方：初心者に最も適した3つの参考ソース'
+description: 'ゼロベースの読者向けのプロダクトアイデア入門記事。アイデアを直接閲覧できるサイト、トレンドソース、実際のビジネスソース、VCリストを重点的に整理し、リンクからより具体的な方向性を素早く見つけられるようにする。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 時間</strong>'
+</script>
+
+# アイデアの見つけ方：初心者に最も適した3つの参考ソース
+
+<a id="top-idea-sources"></a>
+
+## 本章のガイド
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['アイデアの発見', 'プロダクトの方向性', 'ニーズの発見', '業界観察']"
+  coreOutput="より具体的で、引き続き調査する価値のあるプロダクト方向性を1つ"
+  expectedOutput="どこを見ればいいか、どう見ればいいか、何を先に見るべきかが分かり、「AI + 某業界」のような空虚なアイデアで終わらなくなる"
+>
+
+多くの人が最初のステップで行き詰まります。それはインスピレーションが全くないからではなく、たくさんのコンテンツを見た後でも、頭の中に残るのが抽象的なキーワードだけだからです：
+
+- AI for education
+- AI for healthcare
+- AI for finance
+- AI agent for business
+
+これらはまだアイデアではありません。それらは「方向性が大きい」ことを伝えているだけで、以下を伝えていません：
+
+- 誰が使うのか
+- どんなシナリオで使うのか
+- 現在どうやって間に合わせているのか
+- どのステップを最初に切り込むのが最も価値があるのか
+
+この記事は空虚な方法論を語らず、より使いやすいソースを直接整理して提供します。
+
+</ChapterIntroduction>
+
+::: info 最小SOP
+**目的**：読み終えた後、アイデアがないときにどこをまず見ればいいか、どのリンクが「具体的なニーズ」を見るのに適しているか、どれが「トレンド」を見るのに適しているか、どれが「実際のビジネス」を見るのに適しているかが分かるようになります。
+
+**アクションアイテム**：まずアイデアリストを一巡し、次に稼ぐ小さなプロダクトを一巡し、次にトレンドとよりビジネス的なソースを見て、最後に引き続き調査したい方向性を1つ残す。
+
+**結果**：抽象的なキーワードで止まらず、より具体的で検証する価値のある方向性を1つ得られます。
+
+**キーワードジャンプ**：[参考アプリリスト](#idea-apps) · [トレンドソース](#idea-trends) · [よりビジネス的なソース](#idea-business) · [VC / アクセラレーター ソース](#idea-vc) · [最短パス](#idea-path) · [AIがどう役立つか](#idea-ai)
+:::
+
+## 以下の内容を学びます
+
+1. どのサイトがアイデアを直接閲覧するのに適しているか
+2. どのサイトがすでに稼いでいる小さなプロダクトを見るのに適しているか
+3. どのソースがトレンドと業界の変化を見るのに適しているか
+4. どのソースが実際のビジネスと実際の支払いに近いか
+5. ゼロベースに最も適した最短使用パス
+
+<a id="idea-apps"></a>
+## [1. 参考アプリリスト：まず他の人がすでに何をしているかを見る](#top-idea-sources)
+
+これは初心者に最も適したスタート地点です。最も具体的だからです。
+
+### 第一グループ：開けばアイデアリスト、直接選べる
+
+- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+  このsubredditの核心的な用途は：実際のユーザーが直接「誰かXXを作ってくれないか」と投稿することです。各投稿は通常、具体的なプロダクトニーズであり、少しのシナリオ説明も付いています。`Top -> Past Month`または`Top -> Past Year`で並べ替えて、20分で実際のニーズを多数スキャンできます。
+- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+  上記と似ていますが、よりソフトウェア/Appに焦点を当てています。投稿の一般的なフォーマットは「XXができるアプリが必要」で、粒度が小さく、小さくて美しいニッチなものが多いです。
+- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+  最初の2つより完全です。多くの投稿は単なる一文のニーズではなく、市場分析、ビジネスモデル、なぜ今やる価値があるのかも含まれています。
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+  毎週未検証のスタートアップアイデアを公開し、一般的なフィールドにはターゲットユーザー、マネタイズ方法、初期検証のアイデアが含まれます。フォーマットが統一されており、クイックスキャンに適しています。
+- [IdeasAI](https://ideasai.com/)
+  AIでスタートアップアイデアを生成し、ずっとスクロールできます。品質は安定していませんが、「全くインスピレーションがない」ときに刺激を得るのに適しており、自分で細分化シナリオに掘り下げられます。
+
+### 第二グループ：他の人がすでに稼いでいる小さなプロダクトを見て、アイデアを逆推する
+
+これらのプラットフォームの論理は：他の人がすでにニーズを検証し、収益を上げていることです。それらを見るのは、コピーするためではなく、「どのような小さな問題に支払う人がいるか」を見るためです。
+
+- [Starter Story](https://www.starterstory.com/)
+  多くの実際の小さなビジネスケースを掲載しており、通常は創業者インタビュー、収益データ、スタートプロセスが含まれます。月収1万〜10万ドルの小さなプロダクトに注目すると、よりニッチで、一般の人が理解できるプロダクト規模に近いです。
+- [Indie Hackers — Products](https://www.indiehackers.com/products)
+  インディー開発者がプロダクトを展示する場所で、多くは収益と成長を公開しています。収益順に並べ替えて、月数千〜数万ドルのプロダクトがどのような具体的な問題を解決しているかを見てください。
+- [MicroConf Blog](https://microconf.com/blog)
+  Micro SaaSに焦点を当てています。「十分に小さいが、支払う人がいる」プロダクトの切り口を見るのに適しています。
+- [1000 Tools](https://1000.tools/)
+  AIツールアグリゲーションサイト。どのカテゴリーにすでに参入者がいるが、品質が一般的なもの、または国内/ある垂直業界でまだ十分にカバーされていない方向性を見るのに適しています。
+- [Product Hunt](https://www.producthunt.com/)
+  最近繰り返し現れるプロダクトタイプを見て、一位だけを見るのではなく、どのカテゴリーに継続的に参入しているが、まだ明確な勝者がいないかに注目してください。
+- [BetaList](https://betalist.com/)
+  初期プロダクトや、まだ方向性を試しているチームを見るのに適しています。
+
+### プロダクトを見るときは、プロダクト自体だけでなく、低評価や「代行サービス」も見る
+
+- [G2](https://www.g2.com/)
+  使い方：1つ星、2つ星の評価を見る。低評価には通常「既存のプロダクトのどの部分がうまくいっていないか」が隠されています。
+- [Capterra](https://www.capterra.com/)
+  使い方：G2と同様に、SaaS系プロダクトの実際の不満を見るのに適しています。
+- タオバオ / 閑魚 / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / 猪八戒
+  使い方：「代行」「代整理」「代入力」「代転記」「代書き起こし」で検索。ある人工サービスがよく売れているなら、その背後には通常、再現可能でプロダクト化できるプロセスがあります。
+
+シグナルの判断は非常にシンプルです：
+
+- ユーザーがすでに既存のツールに不満を持っている
+- ユーザーがすでにお金を払って人にやらせている
+- ユーザーがすでにこのプロセスに多くの人力と時間を投入している
+
+### 第四グループ：動画を見る、誰かが直接アイデアを解説してくれる
+
+フォーラムやランキングをスクロールするのが好きではなく、「誰かが思考を整理してくれる」方が好きなら、動画やポッドキャストも非常に適しています。
+
+- `Greg Isenberg startup ideas`を検索
+  具体的なアイデアを2〜3個直接解説し、市場規模、競合分析、切り口も説明してくれるので適しています。
+- `My First Million podcast`を検索
+  2人の司会者がよく1回のエピソードでビジネスアイデアをブレインストーミングし、密度が高く、具体的なニッチがよく出てきます。
+- `YC startup ideas`または`Michael Seibel startup ideas`を検索
+  初心者に適しており、内容が率直で、方向性の選び方を直接話すことが多いです。
+
+<a id="idea-trends"></a>
+## [2. トレンドソース：どの方向が台頭しているかを見る](#top-idea-sources)
+
+トレンドサイトの役割は、直接アイデアを提供することではなく、ある方向が上昇しているかどうか、引き続き見る価値があるかどうかを判断するのを助けることです。
+
+- [Exploding Topics](https://explodingtopics.com/)
+  データで成長が速いが、まだ主流に入っていないトピックやプロダクトカテゴリーを追跡。まだあまり混雑していない方向を見るのに適しています。
+- [Google Trends](https://trends.google.com/)
+  キーワードを検索して過去1年のトレンドラインを見て、「関連クエリ」の「急上昇」ワードを確認。
+- [Glimpse](https://meetglimpse.com/)
+  Google Trendsと同様
+- 業界研究レポートの要約ページ
+  すでに方向性がある場合、その方向が業界内でどの位置にあるかを素早く見るのに適しています。
+- McKinsey / BCG / Gartnerのトレンドコンテンツ
+  より企業や大規模業界の視点に偏っており、BtoB、工業、伝統的業界に適しています。
+- [State of AI Report](https://www.stateof.ai/)
+  あなたの方向性がAI技術自体に関連している場合、このような年次レポートは大局観を構築するのに非常に適しています。
+
+トレンドを見るときは、次の3点にのみ注目してください：
+
+- この言葉は継続的に上昇しているか
+- それはどの具体的なシナリオに位置しているか
+- 誰が最初にそれに時間、切り替えコスト、または予算を払うのか
+
+<a id="idea-business"></a>
+## [3. よりビジネス的なソース：誰がお金を使っているか、誰が不満を言っているか、誰が人工サービスを売っているかを見る](#top-idea-sources)
+
+「かっこいい」方向性ではなく、「実際のビジネスに近い」方向性を見つけたいなら、ワークフローにより近いソースを見る必要があります。
+
+### 誰が実際に何にお金を使っているかを見る
+
+- [中国政府調達網](https://www.ccgp.gov.cn/)
+  使い方：「スマート建設現場」「実験室管理システム」「データ収集」「診療所管理」「見積システム」等の言葉で検索し、予算、技術要件、使用シナリオを見る。
+- 各省市公共資源取引センター
+  使い方：地方政府と国有企業が実際にどのシステムを調達しているかを見る。
+- 比標網 / 千里馬招標網 / 標事通
+  使い方：企業側の調達ニーズと高頻度システムタイプを見る。
+
+これらのソースの強いシグナルは、未来を議論しているのではなく、「今日すでにこのために支払う人がいる」ことを示していることです。
+
+### 誰が実際に何に不満を言っているかを見る
+
+- 製造業：機械コミュニティ、工控フォーラム
+- 医療：丁香園、医脈通
+- 建築 / エンジニアリング：土木オンライン、広聯達コミュニティ
+- 財務 / 会計：中国会計視野フォーラム
+- 貿易：福歩外贸フォーラム、米課圏
+- 飲食 / 小売：職業餐飲網、聯商網フォーラム
+- [Reddit](https://www.reddit.com/)の垂直セクション：`r/smallbusiness`、`r/Entrepreneur`、`r/SaaS`、`r/healthcare`、`r/manufacturing`
+- [V2EX](https://www.v2ex.com/)
+- 即刻
+- 小紅書
+
+検索時には「AI」「イノベーション」だけでなく、以下の言葉で検索する方が効果的です：
+
+- とても面倒
+- もっといい方法はないのか
+- おすすめツール求む
+- Excel では管理しきれない
+- I wish there was
+- is there a tool for
+- I hate
+
+### 誰が反復的な人工サービスを売っているかを見る
+
+- [Fiverr](https://www.fiverr.com/)
+- [Upwork](https://www.upwork.com/)
+- 猪八戒網
+- タオバオ
+- 閑魚
+
+これらのサービスがよく売れているなら、引き続き調べる価値があります：
+
+- PDFの見積書をExcelに整理してほしい
+- 顧客データを一括整理してほしい
+- 履歴書 / コピーの修正 / 書き起こし / アーカイブをしてほしい
+
+このようなサービスの背後には通常、一回きりのニーズではなく、繰り返し発生するワークフローがあります。
+
+### 完全なワークフローを見る、アイデアリストだけを見るのではなく
+
+時には最も直接的な方法は、一つの業界を選び、そのプロセス全体を見て、WeChat、Excel、紙とペン、電話で行われているステップを見つけることです。
+
+- 外貿：サプライヤー探し、見積もり依頼、比較、見積書作成、顧客への送付、返信フォロー、検品手配、船腹予約、通関。
+  見るべき切り口：サプライヤーの見積もりを顧客見積もりに整理する。
+- 歯科診療所：受診、レントゲン撮影、画像診断、プラン説明、フォロー、治療、再診。
+  見るべき切り口：患者にプランを説明し継続的にフォローする。
+- 建設現場：巡視、撮影、グループ送信、報告書整理、発注者に提出。
+  見るべき切り口：現場写真からコンプライアンス報告書へ。
+
+<a id="idea-vc"></a>
+## [4. VC / アクセラレーターソース：「波がどちらに打っているか」を見る](#top-idea-sources)
+
+このカテゴリーのソースは大きな方向性を見つけるのに適していますが、直接検証に代わるものではありません。
+
+- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
+  使い方：切り口を見つけるのに適しています。よく「私たちがこういうものを作る人を見たい」と直接言ってくれます。
+- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
+  使い方：より大きなトレンドとトラックの判断に偏っており、業界感覚を構築するのに適しています。
+- [NFX](https://www.nfx.com/)
+  使い方：スタートアップの課題を素早くスキャンするのに適しています。
+- [Sequoia Capital](https://www.sequoiacap.com/article/)
+  使い方：必ずしもアイデアを直接リストアップするわけではありませんが、ある種のプラットフォーム変遷と機会についてよく語ります。
+- [First Round Review](https://review.firstround.com/)
+  使い方：ある方向を深く掘り下げるのに適しており、アイデアリストとは限りませんが、記事の品質は通常非常に高いです。
+
+これらのソースのメリット：
+
+- 未来にどの方向を見る価値があるかを教えてくれる
+- どのトラックが継続的に推進される可能性があるかを教えてくれる
+- あるトラックのコンテキストに素早く入れる
+
+これらのソースの制限：
+
+- 通常、投資家の視点
+- 具体的にどの役割が最も苦痛かは必ずしも教えてくれない
+- どのプロセスのステップが最もボトルネックかは必ずしも教えてくれない
+- 今日誰がすでにそのために支払っているかは必ずしも教えてくれない
+
+したがって、より良い使い方は：まずこれらで方向性を見つけ、それから参考プロダクト、業界フォーラム、調達情報、実際のワークフローに戻ってより具体的な切り口を見つけることです。
+
+<a id="idea-path"></a>
+## [5. 「アイデアがなくてアシスタントを作ることしか思いつかない人」に最も適した最短使用パス](#top-idea-sources)
+
+もし最短のパスを1つだけ歩くなら、次のようにできます：
+
+1. 最初のステップ、30分。
+   [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)を開き、`Top -> Past Year`で並べ替えて、50の投稿を素早くスキャンし、「これなら私にもできそう」と感じる方向をすべて保存する。
+2. 2番目のステップ、30分。
+   [Starter Story](https://www.starterstory.com/)または[Indie Hackers Products](https://www.indiehackers.com/products)を開き、収益順に並べ替え、中程度の収益のプロダクトを見て、最も成功しているものだけを見ない。最初のステップに関連する方向を見つけ、それらが具体的に誰に売っているか、どのステップを解決しているかを見る。
+3. 3番目のステップ、20分。
+   [Google Trends](https://trends.google.com/)で関連キーワードを検索し、トレンドが成長しているかどうかを確認し、「関連クエリ」の急上昇ワードを見る。
+4. 4番目のステップ、20分。
+   G2 / Capterra / 業界フォーラム / 入札プラットフォーム / Fiverr等のサイトで、この方向が今日どこが最も煩わしく、どこがまだ人力に頼っているかを見る。
+
+見終わった後、次の一文をはっきりと言えれば十分です：
+
+- ある種の人々が、あるシナリオで、あるプロセスのステップでつまずき、現在は主にある愚かな方法でやりくりしている。
+
+<a id="idea-ai"></a>
+## [6. AIがどう役立つか](#top-idea-sources)
+
+この記事の焦点はAIではありませんが、AIは整理に非常に適しています。
+
+最も実用的な使い方は2つだけです：
+
+- 閲覧したリンク、投稿タイトル、ユーザーの生の言葉をAIに貼り付け、「ユーザー層 / シナリオ / ペインポイント / 代替ソリューション」に分類してもらう。
+- AIに散在する情報を3つの候補方向に整理してもらい、50の機能に発散し続けるのではなく。
+
+次のように直接聞けます：
+
+```text
+最近見たソースは以下の通りです：
+1. [タイトルまたは生の言葉を貼り付ける]
+2. [タイトルまたは生の言葉を貼り付ける]
+3. [タイトルまたは生の言葉を貼り付ける]
+
+機能リストは出さないでください。
+次の3つだけを行ってください：
+1. ユーザー層とシナリオで分類する
+2. 繰り返し現れる煩わしいステップを見つける
+3. より具体的な3つの候補方向に整理する
+```
+
+## 関連読書
+
+- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
+- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
+- [NFX](https://www.nfx.com/)
+- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+- [Starter Story](https://www.starterstory.com/)
+- [Indie Hackers - Products](https://www.indiehackers.com/products)
+- [Product Hunt](https://www.producthunt.com/)
+- [BetaList](https://betalist.com/)
+- [IdeasAI](https://ideasai.com/)
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+- [Google Trends](https://trends.google.com/)
+- [Exploding Topics](https://explodingtopics.com/)
+- [G2](https://www.g2.com/)
+- [Capterra](https://www.capterra.com/)
diff --git a/docs/ja-jp/stage-1/appendix-industry-scenarios/index.md b/docs/ja-jp/stage-1/appendix-industry-scenarios/index.md
new file mode 100644
index 0000000..80d8586
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-industry-scenarios/index.md
@@ -0,0 +1,696 @@
+---
+title: 'Bエンド産業アプリケーションシーン方向参考'
+description: '本ドキュメントは、LLM大規模言語モデルのBエンド企業シーンにおける実装アプリケーションをまとめたものです。工業製造業、スマートカスタマーサポート、教育業界、スマートプログラミング、医療、ネットワークセキュリティ、金融管理、企業サービスなどの分野の具体的なアプリケーション方向をカバーし、企業顧客向けのAIアプリ開発者に参考を提供します。'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = '約 <strong>6 時間</strong>'
+
+const interestPoint = ref('')
+const purpose = ref('')
+
+// 各業界のトピックプール
+const topicPool = {
+  'manufacturing': [
+    { title: '新エネルギーバス外観AI補助設計プラットフォーム', desc: '画像生成モデルによる外観コンセプト設計' },
+    { title: 'スマート図面設計・審査アシスタント', desc: 'RAG技術で企業設計規範ナレッジベースを構築' },
+    { title: '技術文書自動生成・管理', desc: 'LLMに基づく製品仕様書と操作マニュアルの自動生成' },
+    { title: '生産設備巡回点検レポート自動生成アシスタント', desc: '音声による設備状態記述、構造化巡回点検レポートの自動生成' },
+    { title: '工業設備故障診断ナレッジQAアシスタント', desc: '過去の故障ケースに基づくベクトルナレッジベースの構築' }
+  ],
+  'customer-service': [
+    { title: 'マルチチャネルスマートカスタマーサポート自動応答・チケット生成システム', desc: 'マルチチャネルメッセージ受信、LLMによる意図理解後の応答生成' },
+    { title: '見込み客発掘・フォローアップ提案アシスタント', desc: '過去の対話記録を分析し、高意向顧客を識別' },
+    { title: '企業内部ナレッジスマート検索・QAマネージャー', desc: '内部文書に基づくベクトルナレッジベースの構築' },
+    { title: 'カスタマーサポート対話スマートサマリー・チケット生成ツール', desc: '会話終了後の自動サマリー生成とキー情報抽出' },
+    { title: 'カスタマーサポート金牌トーク推薦ナレッジシステム', desc: '優秀な事例を分析し、金牌トークテンプレートを抽出' }
+  ],
+  'education': [
+    { title: 'パーソナライズ言語学習パス計画・スマート導学システム', desc: '学習者レベルを評価し、毎日の学習タスクを計画' },
+    { title: '授業案自動作成・教育リソース配信プラットフォーム', desc: 'カリキュラムに基づく授業案フレームワークの自動生成' },
+    { title: '宿題自動採点・学習状況診断分析システム', desc: '記述式問題の自動採点と添削アドバイスの自動生成' },
+    { title: '人材ポジションコンピテンシーモデル構築・学習マップ', desc: '求人JDを分析して能力要件を抽出' },
+    { title: '外国語スピーキング1対1シチュエーション実践演習', desc: 'LLMが異なる役割を演じ、スピーキング会話を実施' }
+  ],
+  'programming': [
+    { title: 'スマートコード補完・Bug自動修正アシスタント', desc: 'IDEプラグインによるリアルタイムコード補完提案' },
+    { title: 'ローコードアプリ構築・プロセス自動化プラットフォーム', desc: '自然言語による要件記述をローコード設定に変換' },
+    { title: 'ユニットテストケース生成システム', desc: 'AST解析によるソースコード解析、境界条件テストケースの生成' },
+    { title: 'コードスマート分析・言語移行ツール', desc: 'コード品質の分析と最適化提案' },
+    { title: 'フロントエンドUIコード自動生成ツール', desc: 'デザイン画像認識によるレスポンシブCSSの生成' }
+  ],
+  'healthcare': [
+    { title: '医学検査レポートスマート解読アシスタント', desc: 'OCRによる主要指標の認識、異常値の解読' },
+    { title: 'ナレッジ検索技術ベースの健康相談エキスパート', desc: '医学ナレッジグラフの構築、RAG検索による回答生成' },
+    { title: '臨床研究データ意思決定分析プラットフォーム', desc: 'EMRデータの統合、統計分析コードの補助生成' },
+    { title: '医学画像レポート自動生成ツール', desc: '画像特徴の記述による構造化レポートの自動生成' },
+    { title: '慢性疾患管理服薬リマインダースマートアシスタント', desc: 'パーソナライズ服薬リマインダの生成、服薬禁忌チェック対応' }
+  ],
+  'security': [
+    { title: 'コードセキュリティ脆弱性検出・修正エンジン', desc: 'SASTによるコードスキャン、脆弱性原理の分析' },
+    { title: 'AI生成フィッシングメールスマート識別・ブロックシステム', desc: 'メール内容の分析によるAI生成フィッシングメールの識別' },
+    { title: 'セキュリティ運用日報自動生成アシスタント', desc: 'ログ集約、キーイベントの自動抽出' },
+    { title: 'ペネトレーションテストレポートスマート生成アシスタント', desc: '脆弱性記述に基づくレポートの自動生成' },
+    { title: '脅威インテリジェンススマート検索・分析アシスタント', desc: 'マルチソース脅威インテリジェンスの照会、コンテンツの解読' }
+  ],
+  'finance': [
+    { title: '与信審査レポートスマート生成アシスタント', desc: '財務データ入力による与信審査レポートの自動生成' },
+    { title: 'プライベートバンクウェルスマートコンサルタント', desc: '顧客リスク許容度の分析による資産配分提案の生成' },
+    { title: 'IPO目論見書スマート生成・コンプライアンス検証アシスタント', desc: 'モジュール化テンプレートによる事業記述の自動入力' },
+    { title: '企業財務レポート自動生成・経営異常早期警戒システム', desc: '財務分析と経営層討論の自動生成' },
+    { title: '保険代理店スマートトーク練習', desc: 'シミュレーション対話によるトークのコンプライアンス性と説得力の評価' }
+  ],
+  'enterprise': [
+    { title: '企業契約ライフサイクルコンプライアンス審査・修正提案プラットフォーム', desc: '条項の法規データベースとの照合、コンプライアンス審査レポートの生成' },
+    { title: '営業通話音声書き起こし・トーク推薦', desc: 'ASR書き起こし、会話分析と金牌トークの推薦' },
+    { title: 'マーケティングコンテンツスマート生成・デザインシステム', desc: 'マーケティングコピーとセールスポイントの抽出' },
+    { title: '競合広告出稿分析プラットフォーム', desc: '競合広告の収集、出稿戦略の分析' },
+    { title: '全网トレンドトピックスマート分析・コンテンツ推薦システム', desc: 'トレンド分析とトピック提案の推薦' }
+  ],
+  'content': [
+    { title: '映像・小説コンテンツ制作補助プラットフォーム', desc: 'ストーリー概要、キャラクター設定、セリフ生成の提供' },
+    { title: '企業ブランドストーリー・PR記事スマート執筆アシスタント', desc: 'ブランドキーワード入力による複数スタイルコピーの生成' },
+    { title: 'バーチャルデジタルヒューマンライブ配信・配信管理システム', desc: 'デジタルヒューマン像 + TTS音声 + LLM対話' },
+    { title: 'ショートビデオスクリプト生成・スマート編集', desc: 'ショートビデオスクリプトと絵コンテの生成' },
+    { title: 'マーケティングコンテンツスマート生成・デザインシステム', desc: 'マーケティングコピーとセールスポイントの抽出' }
+  ],
+  'government': [
+    { title: '12345行政窓口スマート音声ナビ・自動振り分けシステム', desc: '音声認識による要望の理解とスマート振り分け' },
+    { title: '行政サービスホールスマート案内・政策QAロボット', desc: '行政ナレッジベースのRAG検索' },
+    { title: '企業支援政策スマートマッチング・精密配信プラットフォーム', desc: '企業プロファイルによる適用政策の自動マッチング' },
+    { title: '行政審査書類スマート事前審査・コンプライアンス検証アシスタント', desc: 'OCR認識とキー情報抽出' },
+    { title: '都市グリッドイベントスマート識別・配車管理プラットフォーム', desc: 'イベントタイプの識別と振り分け' }
+  ],
+  'legal': [
+    { title: '契約リスク脆弱性ワンクリック「間違い探し」Agent', desc: 'リスクチェックリストとの照合による潜在的問題の識別' },
+    { title: '類似案件勝訴率AIスマート評価コンサルタント', desc: '案件特徴抽出、類似案件の検索マッチング' },
+    { title: '法規変更リアルタイム監視・業務影響分析レーダー', desc: '変更内容の解析と業務影響の評価' },
+    { title: '弁護士レターAIGC自動起案ツール', desc: '事実陳述入力による規範的な弁護士レターの生成' },
+    { title: '複雑な法律条項「翻訳」を平易な言葉にする解説プラグイン', desc: '分かりやすい解説の生成' }
+  ],
+  'travel': [
+    { title: 'AIGCベースのラク旅ガイドジェネレーター', desc: '毎日の旅程スケジュールの自動生成' },
+    { title: '全网航空券・ホテル価格トレンド予測・低価格自動ロックボット', desc: 'MLモデルによる価格トレンド予測' },
+    { title: 'ビザ書類スマート事前審査・自動フォーム記入補助システム', desc: 'OCR認識による情報完全性チェック' },
+    { title: '海外旅行リアルタイム音声翻訳・メニュー視覚中国語化マネージャー', desc: 'オフライン音声翻訳、メニュー画像OCR' },
+    { title: '旅行足迹自動生成精美旅行記・SNS投稿アシスタント', desc: '写真情報抽出による旅行記文案の生成' }
+  ],
+  'emotion': [
+    { title: 'LLMベースの24時間深層コンパニオン仮想パートナー', desc: '記憶システムによる対話履歴の保存' },
+    { title: 'マルチモーダル感情認識・心理カウンセリングAIコンサルタント', desc: '音声トーン分析 + テキスト感情認識' },
+    { title: 'アルツハイマー老人AI認知訓練・記憶想起デジタルヒューマン', desc: '認知ゲーム訓練、古い写真による記憶トリガー' },
+    { title: '社交不安のAIGCシミュレーション社交練習コーチ', desc: 'バーチャル社交シーンのシミュレーション' },
+    { title: '全天候気分監視・AIポジティブ感情モチベーションアシスタント', desc: '気分トレンドの分析とモチベーションコンテンツの生成' }
+  ],
+  'entertainment': [
+    { title: 'LLM駆動のオープンワールドゲームNPC自律意思決定エンジン', desc: 'NPC行動木とLLM意思決定の融合' },
+    { title: '没入型マーダーミステリーAIGCストーリー推演・DMコントロール補助ツール', desc: 'プレイヤーの選択によるストーリー分岐のトリガー' },
+    { title: 'インタラクティブ小説エンディング生成式修飾器', desc: '読者の選択がストーリーの方向性に影響' },
+    { title: 'eスポーツ戦局CVビジュアル分析・AIスマート実況アナウンサー', desc: 'ゲーム画面のリアルタイム分析' },
+    { title: 'マルチキャラTTS音声合成オーディオブック自動生成システム', desc: 'テキストのキャラクター割り当て、パーソナライズ音色の生成' }
+  ],
+  'ecommerce': [
+    { title: '高コンバージョンAIGC商品詳細ページ一括生産ツール', desc: 'セールスポイントコピーとシーン記述の生成' },
+    { title: 'アパレルバーチャルモデルAIスマート試着・展示動画生成ファクトリー', desc: 'バーチャルモデル試着効果の生成' },
+    { title: '越境EC多言語LLMローカライズ翻訳・ブラッシュアップアシスタント', desc: '商品説明の多言語翻訳' },
+    { title: '24時間全天候AIGCデジタルヒューマンライブ配信システム', desc: 'デジタルヒューマン像 + リアルタイムトーク生成' },
+    { title: '市場トレンドAIインサイト・爆売り予測エンジン', desc: 'トレンドホットスポットの洞察、品揃え提案' }
+  ],
+  'energy': [
+    { title: '家庭電力使用行動AI分析・省エネ戦略コンサルタント', desc: '電力使用パターンの分析、省エネ提案の生成' },
+    { title: '太陽光パネル欠陥ドローンCVビジュアル識別システム', desc: 'ドローン巡回撮影、熱赤外画像分析' },
+    { title: '電力スポット取引価格AIトレンド予測・自動利益戦略Agent', desc: '価格予測モデル、戦略生成' },
+    { title: '企業全チェーンカーボン排出AI自動算定・ESGレポート生成アシスタント', desc: 'カーボン排出因子の計算、ESGレポートの自動生成' },
+    { title: '電網異常気象負荷AI予測・緊急配車指揮システム', desc: '気象データ連携、負荷予測モデル、配車戦略生成' }
+  ],
+  'av-media': [
+    { title: '長編動画ハイライトAI識別・ショートビデオ自動編集ツール', desc: 'ビデオコンテンツ分析、キーフレーム識別' },
+    { title: 'ビデオ背景ノイズAIスマート分離・音声強調アシスタント', desc: 'オーディオ分離モデル、背景ノイズ除去' },
+    { title: '古い映像4Kアップスケーリング修復・AIスマート着色ワークベンチ', desc: 'ビデオ超解像度モデル、AI自動着色' },
+    { title: 'テキストからリアルレベルTTS吹き替え・感情制御システム', desc: 'マルチ音色TTSモデル、感情制御生成' },
+    { title: '会議録音AIスマート書き起こし・コアToDo抽出アシスタント', desc: '複数人会議の音声分離書き起こし' }
+  ],
+  'ai-marketing': [
+    { title: 'RED爆売りコピーAIGC自動執筆エンジン', desc: '種草コピーの生成、emoji最適化' },
+    { title: 'マーケティングポスターAIスマートレイアウト・マルチサイズ適応ツール', desc: 'ポスターテンプレートのスマートマッチング' },
+    { title: 'ブランドLOGOクリエイティブAIGC生成・VI体系構築プラットフォーム', desc: 'LOGOクリエイティブ生成、VI規範生成' },
+    { title: '全网ホットAI追跡・トレンドマーケティングクリエイティブ生成アシスタント', desc: 'マーケティング角度の分析、クリエイティブプランの生成' },
+    { title: 'ショートビデオスクリプトクリエイティブAIGC生成・絵コンテガイダンスアシスタント', desc: 'スクリプトと絵コンテの生成、撮影アドバイス' }
+  ],
+  'data-intelligence': [
+    { title: '自然言語からSQL文への自動生成ツール', desc: '自然言語クエリのSQLへの変換' },
+    { title: '企業データアセットカタログスマート棚卸・分類システム', desc: 'メタデータ収集、自動分類' },
+    { title: 'データ品質異常自動検出・修正提案エンジン', desc: 'ルールエンジン + MLモデルによる異常検出' },
+    { title: 'スマートレポート生成・ビジュアル設定アシスタント', desc: '対話式レポート設定の生成' },
+    { title: 'データ指標定義スマートQAアシスタント', desc: '指標定義ドキュメントに基づくナレッジベースの構築' }
+  ]
+}
+
+// 推薦リンクマッピングテーブル
+const recommendationMap = {
+  'creative-content': {
+    'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
+    'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
+    'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
+    'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
+  },
+  'tech-service': {
+    'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
+    'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
+    'improve-experience': ['customer-service', 'enterprise', 'programming'],
+    'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
+  },
+  'data-intel': {
+    'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
+    'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
+    'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
+    'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
+  },
+  'user-service': {
+    'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
+    'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
+    'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
+    'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
+  },
+  'industry-solution': {
+    'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
+    'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
+    'improve-experience': ['healthcare', 'education', 'government', 'travel'],
+    'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
+  }
+}
+
+const interestOptions = [
+  { label: 'クリエイティブコンテンツ生成', value: 'creative-content', desc: 'コピー、画像、動画などのクリエイティブコンテンツ' },
+  { label: 'テクニカルサービスツール', value: 'tech-service', desc: '開発ツール、自動化、コード補助' },
+  { label: 'データインテリジェンス分析', value: 'data-intel', desc: 'データ分析、予測、スマート意思決定' },
+  { label: 'ユーザーサービス体験', value: 'user-service', desc: 'カスタマーサポート、マーケティング、ユーザー体験' },
+  { label: '業界ソリューション', value: 'industry-solution', desc: '特定業界のディープアプリケーション' }
+]
+
+const purposeOptions = [
+  { label: '効率向上', value: 'increase-efficiency', desc: '自動化、プロセス高速化' },
+  { label: 'コスト削減', value: 'reduce-cost', desc: '人件費削減、リソース最適化' },
+  { label: '体験改善', value: 'improve-experience', desc: 'ユーザー満足度、サービス品質' },
+  { label: 'ビジネスイノベーション', value: 'innovate-business', desc: '新製品、新モデル' }
+]
+
+const industries = [
+  { key: 'manufacturing', name: '工業製造業', anchor: '#_1-工業製造業' },
+  { key: 'customer-service', name: 'スマートカスタマーサポート', anchor: '#_2-スマートカスタマーサポート' },
+  { key: 'education', name: '教育業界', anchor: '#_3-教育業界' },
+  { key: 'programming', name: 'スマートプログラミング', anchor: '#_4-スマートプログラミング' },
+  { key: 'healthcare', name: '医療方向', anchor: '#_5-医療方向' },
+  { key: 'security', name: 'ネットワークセキュリティ', anchor: '#_6-ネットワークセキュリティ' },
+  { key: 'finance', name: '金融管理・保険銀行業', anchor: '#_7-金融管理・保険銀行業' },
+  { key: 'enterprise', name: '企業サービス', anchor: '#_8-企業サービス' },
+  { key: 'content', name: 'コンテンツ制作・運営', anchor: '#_9-コンテンツ制作・運営' },
+  { key: 'government', name: 'スマート行政', anchor: '#_10-スマート行政' },
+  { key: 'legal', name: '法律事務・契約管理', anchor: '#_11-法律事務・契約管理' },
+  { key: 'travel', name: '旅行・外出サービス', anchor: '#_12-旅行・外出サービス' },
+  { key: 'emotion', name: 'エモーショナルコンパニオン', anchor: '#_13-エモーショナルコンパニオン' },
+  { key: 'entertainment', name: 'レジャー・エンターテインメント', anchor: '#_14-レジャー・エンターテインメント' },
+  { key: 'ecommerce', name: 'ECサービス', anchor: '#_15-ECサービス' },
+  { key: 'energy', name: 'エネルギー', anchor: '#_16-エネルギー' },
+  { key: 'av-media', name: '音声・動画', anchor: '#_17-音声・動画' },
+  { key: 'ai-marketing', name: 'AIマーケティング', anchor: '#_18-AIマーケティング' },
+  { key: 'data-intelligence', name: 'データインテリジェンス', anchor: '#_19-データインテリジェンス' }
+]
+
+// 推薦結果を計算
+const recommendationTopics = computed(() => {
+  if (!interestPoint.value || !purpose.value) return []
+  
+  const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
+  const topics = []
+  
+  keys.forEach(key => {
+    const industry = industries.find(item => item.key === key)
+    const industryTopics = topicPool[key] || []
+    
+    if (industry && industryTopics.length > 0) {
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          industryKey: key,
+          industryName: industry.name,
+          industryAnchor: industry.anchor
+        })
+      })
+    }
+  })
+  
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+const currentSelection = computed(() => {
+  const interest = interestOptions.find(i => i.value === interestPoint.value)
+  const pur = purposeOptions.find(p => p.value === purpose.value)
+  return {
+    interest: interest?.label || '',
+    purpose: pur?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  setTimeout(() => {
+    let element = document.querySelector(anchor)
+    
+    if (!element) {
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    if (!element) {
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      element.style.backgroundColor = '#f0f9ff'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  interestPoint.value = ''
+  purpose.value = ''
+}
+</script>
+
+# Bエンド産業アプリケーションシーン方向参考
+
+## 章節のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['Bエンドアプリ', '産業アプリケーション', 'AIシーン', '実装参考', '業界ソリューション']" coreOutput="15以上のBエンド業界アプリケーションシーンを理解" expectedOutput="企業顧客に適したプロジェクト方向を見つける">
+
+本ドキュメントは <strong>LLM大規模言語モデルのBエンド企業シーンにおける実装アプリケーション</strong>をまとめたものです。Cエンドがユーザー体験と感情に注目するのとは異なり、Bエンドプロダクトは<strong>実際のビジネスニーズの解決、効率向上、コスト削減</strong>を重視します。各シーンは<strong>実際の実装の可能性</strong>を持ち、<strong>ニーズ分析から技術実装</strong>までの完全なアプローチをカバーしています。
+
+</ChapterIntroduction>
+
+## 業界方向クイック選択
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: 600; margin-bottom: 8px;">あなたに合ったアプリケーションシーンを見つける</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    興味の方向と実現したい目的を選択すると、システムが関連する業界シーンを推薦します。タグをクリックすると対応する章にジャンプします。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="interestPoint" placeholder="興味方向を選択" style="width: 100%;">
+        <el-option 
+          v-for="item in interestOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="purpose" placeholder="実現目的を選択" style="width: 100%;">
+        <el-option 
+          v-for="item in purposeOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
+      おすすめ {{ recommendationTopics.length }} 個のアプリケーションシーン
+      <span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
+        ({{ currentSelection.interest }} + {{ currentSelection.purpose }})
+      </span>
+    </div>
+    <el-table 
+      :data="recommendationTopics" 
+      style="width: 100%; cursor: pointer;"
+      @row-click="(row) => scrollToAnchor(row.industryAnchor)"
+      highlight-current-row>
+      <el-table-column prop="title" label="アプリケーションシーン" min-width="300">
+        <template #default="scope">
+          <div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industryName" label="所属業界" width="180" align="center">
+        <template #default="scope">
+          <el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 10px; font-size: 12px; color: #909399;">
+      テーブルの任意の行をクリックすると対応する業界の章にジャンプします
+    </div>
+  </div>
+  
+  <div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
+    <span v-if="!interestPoint && !purpose">興味方向と実現目的を選択してください</span>
+    <span v-else-if="!interestPoint">興味方向を選択してください</span>
+    <span v-else>実現目的を選択してください</span>
+  </div>
+  
+  <div v-if="interestPoint || purpose" style="margin-top: 12px;">
+    <el-button size="small" @click="resetSelection">再選択</el-button>
+  </div>
+</el-card>
+
+## 業界クイック紹介
+
+### 主要技術選択
+
+AIアプリ開発では、一般的な技術方向として以下があります：
+
+1. **LLM（大規模言語モデル）**：自然言語タスクの処理に得意。対話、テキスト生成、要約、翻訳などに適用。
+2. **VLM（視覚言語モデル）**：視覚理解と言語能力を組み合わせ、画像記述、視覚QA、マルチモーダルコンテンツ生成を実現。
+3. **GenAI（生成式AI）**：テキスト生成、画像生成、動画生成などを含む。
+
+### 選択戦略
+
+1. **興味志向**：自分が興味のある業界や技術方向を優先選択。
+2. **業界適合**：自身の業界背景やリソースの優位性に合わせてシーンを選択。
+3. **技術難易度**：自身の技術基盤に合わせて適切な複雑さを選択。
+
+## 1. 工業製造業
+
+工業製造業シーンは主に設計補助、生産最適化、スマートメンテナンスの3つの方向に展開します。
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 新エネルギーバス外観AI補助設計プラットフォーム | 画像生成モデルによる外観コンセプト設計、LLMによる設計規範チェック |
+| 2 | スマート図面設計・審査アシスタント | RAG技術による企業設計規範ナレッジベース構築 |
+| 3 | 技術文書自動生成・管理 | LLMによる製品仕様書と操作マニュアルの自動生成 |
+| 4 | 生産設備巡回点検レポート自動生成アシスタント | 音声による設備状態記述、構造化巡回点検レポートの自動生成 |
+| 5 | 工場フォークリフトスマート配車・経路計画システム | LLMによる注文タスクと倉庫位置の解析、地図APIによる最適配車方案 |
+| 6 | LLM情報検索ベースのデータウェアハウス | Text-to-SQL技術による自然言語からデータベースクエリへの変換 |
+| 7 | 工業設備故障診断ナレッジQAアシスタント | 過去の故障ケースに基づくベクトルナレッジベース構築 |
+| 8 | 生産品質検査レポートスマート生成・欠陥分類 | OCRによる検査写真の欠陥認識、LLMによる構造化品質検査レポートの生成 |
+| 9 | 在庫棚卸スマートアシスタント・棚卸レポート生成 | 棚卸データ入力、LLMによるシステム在庫との自動照合・差異レポート生成 |
+| 10 | 工芸プロセス最適化提案スマートQAシステム | 生産工芸ドキュメントに基づくRAGナレッジベースの構築 |
+
+## 2. スマートカスタマーサポート
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | マルチチャネルスマートカスタマーサポート自動応答・チケット生成システム | マルチチャネルメッセージ受信、LLMによる意図理解後の応答生成とチケット自動作成 |
+| 2 | 見込み客発掘・フォローアップ提案アシスタント | LLMによる過去のカスタマーサポート対話記録の分析、高意向顧客の識別 |
+| 3 | 企業内部ナレッジスマート検索・QAマネージャー | Confluenceと内部文書に基づくベクトルナレッジベース構築 |
+| 4 | カスタマー満足度調査・サービス改善管理システム | LLMによるカスタマーサポート対話の自動感情分類と満足度スコアリング |
+| 5 | カスタマーサポート対話スマートサマリー・チケット生成ツール | 会話終了後の自動サマリー生成とキー情報抽出 |
+| 6 | カスタマーサポートトークコンプライアンス自動検出アシスタント | カスタマーサポートの返信内容のリアルタイムコンプライアンス性検出 |
+| 7 | カスタマーサポートチケット自動要約・分類生成ツール | 長い対話記録の要約生成と自動分類タグ付け |
+| 8 | カスタマー感情監視・異常早期警告ツール | リアルタイムでの音声トーン特徴とテキスト感情の分析 |
+| 9 | カスタマーサポート金牌トーク推薦ナレッジシステム | 優秀なカスタマーサポート対話事例の分析、金牌トークテンプレートの抽出 |
+| 10 | スマート外線通話対話内容分析・品質検査アシスタント | 外線通話録音の書き起こし、LLMによる対話内容の分析 |
+
+## 3. 教育業界
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | パーソナライズ言語学習パス計画・スマート導学システム | LLMによる学習者レベル評価、毎日の学習タスクの計画 |
+| 2 | 授業案自動作成・教育リソース配信プラットフォーム | LLMによるカリキュラムに基づく授業案フレームワークの生成 |
+| 3 | 宿題自動採点・学習状況診断分析システム | LLMによる記述式問題の自動採点と学習弱点の特定 |
+| 4 | 人材ポジションコンピテンシーモデル構築・学習マップ | LLMによる求人JDの分析、ポジション能力プロファイリングの構築 |
+| 5 | 校本カリキュラム体系構築・スライド制作ツール | LLMによる学校特色と学生ニーズの分析、校本カリキュラムフレームワークの生成 |
+| 6 | 外国語スピーキング1対1シチュエーション実践演習 | LLMが異なる役割を演じるスピーキング会話、ASRによる発音の認識と採点 |
+| 7 | 大学受験大数据推薦・キャリアプランニング指導プラットフォーム | LLMによる受験生のスコア・順位・興味情報の分析 |
+| 8 | 児童プログラミングコードアシスタント | LLMによるコードロジックの解説とプログラミング指導 |
+| 9 | 知識ポイントマインドマップ自動生成・学習パス推薦ツール | コーストピック入力によるLLMの知識ポイントマインドマップの自動生成 |
+| 10 | 中英作文自動採点・添削エンジン | LLMによる立意、構造、言語、多様性などの多次元採点 |
+
+## 4. スマートプログラミング
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | スマートコード補完・Bug自動修正アシスタント | CodeLlama微調整コードモデル、IDEプラグインによるリアルタイムコード補完提案 |
+| 2 | ローコードアプリ構築・プロセス自動化プラットフォーム | 自然言語による要件記述のLLMによるローコード設定への変換 |
+| 3 | ユニットテストケース生成システム | AST解析による関数ロジックの抽出、LLMによる境界条件テストケースの生成 |
+| 4 | コードスマート分析・言語移行ツール | Tree-sitterによるコード構造の解析、LLMによるコード品質分析と最適化提案 |
+| 5 | 自然言語からSQL文への自動生成ツール | LLMによる自然言語クエリのSQLへの変換 |
+| 6 | APIインターフェース自動テスト・ドキュメント生成プラットフォーム | LLMによるコードコメントとインターフェース定義の分析 |
+| 7 | UIテストスクリプトスマート録画・保守ツール | ブラウザプラグインによるユーザー操作軌跡の録画 |
+| 8 | システムログ分析・故障特定 | ELK Stackによるログデータの収集、LLMによる異常ログの分析 |
+| 9 | フロントエンドUIコード自動生成ツール | デザイン画像OCR認識によるレスポンシブCSSとコンポーネントコードの生成 |
+| 10 | データベース構造スマート設計・モデリングアシスタント | 業務要件ドキュメント入力によるER図とデータテーブル構造の自動生成 |
+
+## 5. 医療方向
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 医学検査レポートスマート解読アシスタント | 検査レポート画像のアップロード、OCRによる主要指標の認識、LLMによる異常値の解読 |
+| 2 | ナレッジ検索技術ベースの健康相談エキスパート | 医学ナレッジグラフ（ICD-10、薬品説明書、診療ガイドライン）の構築 |
+| 3 | 臨床研究データ意思決定分析プラットフォーム | EMRデータと検査結果の統合、LLMによる統計分析コードの補助生成 |
+| 4 | 医学試験問題スマート生成・間違い解析システム | 教材の章と知識ポイントの入力による練習問題と解説の生成 |
+| 5 | 薬物研究全プロセスナレッジグラフスマートQAエキスパート | 薬物-ターゲット-疾患ナレッジグラフの構築 |
+| 6 | 薬品説明書スマートQAアシスタント | 薬品説明書画像のアップロードまたは薬名入力による用法用量等のQA |
+| 7 | 疾病知識科普記事生成アシスタント | 疾病名と受診者の入力による分かりやすい科普記事の生成 |
+| 8 | 医学画像レポート自動生成ツール | 放射線科医師の画像特徴記述による構造化レポートの自動生成 |
+| 9 | 手術記録スマート生成・アーカイブアシスタント | 手術中の音声入力による構造化手術記録の生成 |
+| 10 | 慢性疾患管理服薬リマインダースマートアシスタント | 患者の服薬リスト入力によるパーソナライズ服薬リマインダの生成 |
+
+## 6. ネットワークセキュリティ
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | コードセキュリティ脆弱性検出・修正エンジン | SASTツールによるコードスキャン、LLMによる脆弱性原理の分析 |
+| 2 | AI生成フィッシングメールスマート識別・ブロックシステム | LLMによるメール内容・送信者特徴・リンク安全性の分析 |
+| 3 | セキュリティ運用日報自動生成アシスタント | セキュリティデバイスログの集約、キーイベントの自動抽出 |
+| 4 | セキュリティナレッジベーススマートQAアシスタント | セキュリティドキュメント、CVEライブラリに基づくベクトルナレッジベースの構築 |
+| 5 | ペネトレーションテストレポートスマート生成アシスタント | ペネトレーションテスト完了後の脆弱性記述に基づくレポートの自動生成 |
+| 6 | 悪意コード防护・プライバシーコンプライアンス監視 | サンドボックスによる不審査ファイルの動作分析、LLMによる悪意特徴の識別 |
+| 7 | セキュリティ設定コンプライアンスチェックリスト生成ツール | 対象システムタイプの入力によるセキュリティ設定チェックリストの生成 |
+| 8 | 脅威インテリジェンススマート検索・分析アシスタント | マルチソース脅威インテリジェンスの照会、LLMによるインテリジェンスの解読 |
+| 9 | セキュリティインシデント振り返りレポート生成アシスタント | セキュリティインシデント発生後のタイムラインに基づく振り返りレポートの自動生成 |
+| 10 | グローバル脅威インテリジェンス監視・早期警戒センター | グローバルセキュリティニュースと脆弱性開示のクローリング |
+
+## 7. 金融管理・保険銀行業
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 与信審査レポートスマート生成アシスタント | 企業基本情報と財務データの入力による与信審査レポートの自動生成 |
+| 2 | プライベートバンクウェルスマートコンサルタント | 顧客リスク許容度と財務目標の分析による資産配分提案の生成 |
+| 3 | IPO目論見書スマート生成・コンプライアンス検証アシスタント | 目論見書のモジュール化テンプレート、LLMによる事業記述の自動入力 |
+| 4 | 企業財務レポート自動生成・経営異常早期警戒システム | 財務システムデータの自動収集、LLMによる財務分析の生成 |
+| 5 | 財務票券情報抽出・QAアシスタント | 請求書画像のアップロード、OCR認識、LLMによる関連QA |
+| 6 | コンプライアンスケーススマート検索・QAアシスタント | 規制処罰ケースに基づくナレッジベースの構築 |
+| 7 | 保険代理店スマートトーク練習 | LLMが異なるタイプの顧客を演じるシミュレーション対話 |
+| 8 | 保険商品条項分析・競合比較プラットフォーム | 条項の構造化解析、LLMによるハイライトサマリーと注意事項の生成 |
+| 9 | 顧客トーク感情識別サービス | 音声感情認識とトークコンプライアンス検出のリアルタイムフィードバック |
+| 10 | 保険理赔進捗スマート照会・対話アシスタント | ユーザーの保険証番号または案件番号の入力による理赔進捗の照会 |
+
+## 8. 企業サービス
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 顧客維持分析・解約早期警戒プラットフォーム | 行動データのトラッキング収集、MLモデルによる解約確率の予測 |
+| 2 | B2B見込み客アプローチ・マーケティングメールプラットフォーム | 企業工商データによるターゲット顧客のフィルタリング、LLMによるパーソナライズマーケティングコンテンツの生成 |
+| 3 | 営業パイプライン監視・業績予測プラットフォーム | CRMデータの自動収集、LLMによる営業ファネルの分析と業績達成の予測 |
+| 4 | ブランドレピュテーション監視・危機早期警戒レーダー | 全网レピュテーションデータの収集（ソーシャルメディア、ニュース、フォーラム）、LLMによる感情と伝播トレンドの分析 |
+| 5 | 職場メールスマート執筆・コミュニケーション感情管理アシスタント | メールコンテキストの理解、LLMによるプロフェッショナルメール草案の生成 |
+| 6 | 履歴書スマート解析・ポジションマッチングシステム | 履歴書PDFの解析によるキー情報の抽出、LLMによる適合ポジションのマッチング |
+| 7 | 企業従業員入社ガイド・QAアシスタント | 入社ドキュメントナレッジベースのRAG検索、新入社員のよくある質問への回答 |
+| 8 | 従業員パフォーマンスフィードバック・OKR目標管理プラットフォーム | OKRシステムデータの収集、LLMによる目標達成状況の分析 |
+| 9 | スマート会議記録・ToDo管理 | 会議録音の書き起こし、LLMによる主要議論点とToDo項目の抽出 |
+| 10 | 請求書識別・経費精算自動処理 | OCRによる請求書情報の認識、請求書の真贋検証と精算コンプライアンスの自動確認 |
+
+## 9. コンテンツ制作・運営
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 映像・小説コンテンツ制作補助プラットフォーム | LLMによるストーリー概要、キャラクター設定、セリフ生成 |
+| 2 | 企業ブランドストーリー・PR記事スマート執筆アシスタント | ブランドキーワードと製品情報の入力による複数スタイルコピーの生成 |
+| 3 | バーチャルデジタルヒューマンライブ配信・配信管理システム | デジタルヒューマン像モデリング + TTS音声 + LLM対話 |
+| 4 | ショートビデオスクリプト生成・スマート編集 | LLMによるショートビデオスクリプトと絵コンテの生成 |
+| 5 | 営業会話音声書き起こし・トーク推薦 | 通話ASR書き起こし、LLMによる会話分析と金牌トークの推薦 |
+| 6 | マーケティングコンテンツスマート生成・デザインシステム | 製品情報入力によるマーケティングコピーとセールスポイントの抽出 |
+| 7 | マルチプラットフォーム広告出稿ROIリアルタイム監視・戦略最適化システム | 広告プラットフォームAPI連携によるデータ収集、LLMによる出稿効果の分析 |
+| 8 | 検索エンジンキーワード・トラフィック分析 | Baidu指数、5118データ収集、LLMによるキーワードトレンドと競合度の分析 |
+| 9 | 競合広告出稿分析プラットフォーム | サードパーティデータプラットフォームAPIによる競合広告の収集 |
+| 10 | 全网ホットトピックスマート分析・コンテンツ推薦システム | Weiboホット検索、抖音トレンドデータ収集、LLMによるトレンド分析 |
+
+## 10. スマート行政
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 12345行政窓口スマート音声ナビ・自動振り分けシステム | 市民からの通話音声認識、LLMによる要望の理解と対応部門へのスマート振り分け |
+| 2 | 行政サービスホールスマート案内・政策QAロボット | 行政ナレッジベースのRAG検索、LLMによる手続きと政策問題への回答 |
+| 3 | 企業支援政策スマートマッチング・精密配信プラットフォーム | 政策の構造化解析、企業プロファイルによる適用政策の自動マッチング |
+| 4 | 行政審査書類スマート事前審査・コンプライアンス検証アシスタント | 書類OCR認識とキー情報抽出、LLMによる完全性とコンプライアンスの検証 |
+| 5 | 公共安全ビデオ監視異常行動検出システム | ビデオストリームのリアルタイム分析、CVモデルによる異常行動（喧嘩、転倒など）の検出 |
+| 6 | 都市グリッドイベントスマート識別・配車管理プラットフォーム | 都市センシングデータ（IoT、カメラ）の収集、LLMによるイベントタイプの識別と配車 |
+| 7 | 世論民意大数据分析・リスク早期警戒システム | 行政窓口、ネットレピュテーション、世論訪問等多ソースデータの融合分析 |
+| 8 | 行政アーカイブデジタル化識別・スマート分類管理プラットフォーム | OCRによるアーカイブ文字内容の認識、LLMによるキー情報の抽出と自動分類 |
+| 9 | 突発公共イベント緊急指揮・救援資源スマート配車プラットフォーム | イベント情報の収集、LLMによる緊急対応策の生成 |
+| 10 | 大気環境汚染グリッド化監視・精密発生源特定システム | 空気質量センサーデーデータの収集、CVモデルによる汚染源の識別 |
+
+## 11. 法律事務・契約管理
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 契約リスク脆弱性ワンクリック「間違い探し」Agent | 契約テキストの構造化解析、リスクチェックリストとの照合による潜在的問題の識別 |
+| 2 | 企業契約ライフサイクルコンプライアンス審査・修正提案プラットフォーム | 契約条項と法規データベースの照合、コンプライアンス審査レポートの生成 |
+| 3 | 類似案件勝訴率AIスマート評価コンサルタント | 案件特徴抽出、類似案件の検索マッチング |
+| 4 | 法規変更リアルタイム監視・業務影響分析レーダー | 法規データベースのリアルタイム更新、変更内容の解析と業務影響の評価 |
+| 5 | 弁護士レターAIGC自動起案ツール | 事実陳述入力による規範的な弁護士レターの生成 |
+| 6 | 法廷録音リアルタイム書き起こし・争点焦点自動抽出記録儀 | 法廷録音ASR書き起こし、LLMによる争点焦点とキー論点の抽出 |
+| 7 | 全网知的財産権侵害手がかり自動監視・ブロックチェーン証拠システム | ECプラットフォーム、ソーシャルメディアの侵害監視 |
+| 8 | LLMベースのIPO目論見書キーデータ一貫性チェック・リスク早期警戒Agent | 目論見書複数章節のデータ照合、不一致とデータ異常の識別 |
+| 9 | 複雑な法律条項「翻訳」を平易な言葉にする解説プラグイン | 選択した法律条文に対する分かりやすい解説の生成 |
+| 10 | 案件証拠チェーンスマート整理・ビジュアル表示システム | 証拠資料のアップロード、LLMによる証拠関係とタイムラインの分析 |
+
+## 12. 旅行・外出サービス
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | AIGCベースのラク旅ガイドジェネレーター | ユーザー設定（日数、予算、興味）の入力、毎日の旅程スケジュールの生成 |
+| 2 | 全网航空券・ホテル価格トレンド予測・低価格自動ロックボット | OTA価格データの収集、MLモデルによる価格トレンド予測 |
+| 3 | 航班欠航後のクロス航空会社旅程再構成・緊急方案推薦コンサルタント | 航班ステータス監視、LLMによる代替旅程方案の分析 |
+| 4 | ビザ書類スマート事前審査・自動フォーム記入補助システム | 書類写真のアップロード、OCR認識による情報完全性チェック |
+| 5 | 海外旅行リアルタイム音声翻訳・メニュー視覚中国語化マネージャー | オフライン音声翻訳モデル、メニュー画像OCR認識と翻訳 |
+| 6 | 大データ実評価に基づくホテル「避雷」ガイド分析儀 | ホテルレビューデータの収集、LLMによるポジネガティブ評価キーワードの抽出 |
+| 7 | 目的地没入型VRプレビュー・バーチャル部屋選択インタラクティブプラットフォーム | 360度パノラマ写真の収集、VR技術による没入型プレビュー |
+| 8 | 旅行足迹自動生成精美旅行記・SNS投稿アシスタント | 写真の時間・場所情報の抽出、LLMによる旅行記文案の生成 |
+| 9 | 企業出張請求書自動集約・コンプライアンス精算管理プラットフォーム | 出張プラットフォームAPI連携、請求書情報の自動収集 |
+| 10 | 景区混雑リアルタイム予測・時間差観光ルート計画ナビ | 景区混雑データの収集、MLモデルによる混雑時間帯の予測 |
+
+## 13. エモーショナルコンパニオン
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | LLMベースの24時間深層コンパニオン仮想パートナー | 記憶システムによる対話履歴の保存、LLMによるパーソナライズ返信の生成 |
+| 2 | マルチモーダル感情認識・心理カウンセリングAIコンサルタント | 音声トーン分析 + テキスト感情認識、LLMによるカウンセリング提案の生成 |
+| 3 | アルツハイマー老人AI認知訓練・記憶想起デジタルヒューマン | 認知ゲーム（記憶、計算、言語）訓練；古い写真/古い曲による記憶想起 |
+| 4 | 社交不安のAIGCシミュレーション社交練習コーチ | バーチャル社交シーンのシミュレーション、LLMが異なる役割を演じる |
+| 5 | 生成式AI児童就寝前物語カスタマイズ機 | 親のテーマと好みの入力によるカスタマイズ物語の生成 |
+| 6 | 逝者デジタルライフ復元・LLM時空間対話システム | 生前の資料（音声、テキスト）によるパーソナライズモデルの訓練 |
+| 7 | MBTIデータベースのAI性格ミラー・共感チャットボット | MBTIテスト結果入力、LLMによる性格分析と共感返信の生成 |
+| 8 | 全天候気分監視・AIポジティブ感情モチベーションアシスタント | 日常の気分状態の記録、LLMによるトレンドの分析とモチベーションコンテンツの生成 |
+| 9 | プライバシー保護級青少年AI悩みポスト | 匿名で悩みを吐き出す入口、LLMによる傾聴とアドバイス |
+| 10 | 自律進化能力を持つAI仮想ペット育成システム | ペット性格モデルの訓練、対話インタラクションによる成長進化 |
+
+## 14. レジャー・エンターテインメント
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | LLM駆動のオープンワールドゲームNPC自律意思決定エンジン | NPC行動木とLLM意思決定の融合、対話システムによるパーソナライズインタラクション |
+| 2 | 没入型マーダーミステリーAIGCストーリー推演・DMコントロール補助ツール | プレイヤーの選択によるストーリー分岐のトリガー、LLMによる推理ロジックの生成 |
+| 3 | インタラクティブ小説エンディング生成式修飾器 | 読者の選択がストーリーの方向性に影響 |
+| 4 | 二次元キャラクター3DモデリングAIGC自動生成ワークベンチ | テキスト記述によるキャラクターのスケッチ生成、3Dモデリングツールによる自動モデリング |
+| 5 | eスポーツ戦局CVビジュアル分析・AIスマート実況アナウンサー | ゲーム画面のリアルタイム分析、キーモメントの識別 |
+| 6 | パーソナライズユーモアコンテンツ推薦アルゴリズムエンジン | ユーザー興味プロファイリング、ユーモアコンテンツのマッチング推薦 |
+| 7 | AIスマート音調・KTV人声美化ソフトウェア | オーディオノイズ除去と人声強調処理 |
+| 8 | 映画ドラマキャラクター専用ストーリーAI抽出・編集ツール | ビデオコンテンツ分析、キャラクター関連シーンの抽出 |
+| 9 | マルチキャラTTS音声合成オーディオブック自動生成システム | テキストのキャラクター割り当て、パーソナライズ音色の生成 |
+| 10 | ボードゲーム強化学習対局リプレイコーチ | 棋局分析、AI対手によるシミレーション対局 |
+
+## 15. ECサービス
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 高コンバージョンAIGC商品詳細ページ一括生産ツール | 商品情報入力によるセールスポイントコピーとシーン記述の生成 |
+| 2 | アパレルバーチャルモデルAIスマート試着・展示動画生成ファクトリー | アパレル平置き画像処理、バーチャルモデル試着効果の生成 |
+| 3 | 越境EC多言語LLMローカライズ翻訳・ブラッシュアップアシスタント | 商品説明の多言語翻訳、文化的適応ブラッシュアップ |
+| 4 | NLPベースの顧客感情分析・スマート返信ロボット | コンサルティング対話の感情分析、自動返信の生成 |
+| 5 | 24時間全天候AIGCデジタルヒューマンライブ配信システム | デジタルヒューマン像 + リアルタイムトーク生成 |
+| 6 | 全网同種商品AI比価・トレンド予測プラグイン | ECプラットフォーム価格クローリング、比価チャート表示 |
+| 7 | 買い者レビュー画像AIスマート選別・ショートビデオ合成プラットフォーム | 買い者レビュー画像の品質スコアリング |
+| 8 | LLMベースのリアルタイム販売対話音声分析・金牌トーク推薦 | 通話ASR書き起こし、リアルタイムトークコンプライアンス検出 |
+| 9 | 市場トレンドAIインサイト・爆売り予測エンジン | ソーシャルメディアとECデータの収集分析、LLMによるトレンドホットの洞察 |
+| 10 | 私域トラフィックユーザープロファイルAIクラスタリング・精密運営システム | ユーザー行動データクラスタリング分析、プロファイルタグの生成 |
+
+## 16. エネルギー
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 家庭電力使用行動AI分析・省エネ戦略コンサルタント | スマート電力メーターデータの収集、電力使用パターンの分析 |
+| 2 | 太陽光パネル欠陥ドローンCVビジュアル識別システム | ドローン巡回撮影、熱赤外画像分析 |
+| 3 | 電力スポット取引価格AIトレンド予測・自動利益戦略Agent | 電力市場データ収集、価格予測モデル |
+| 4 | 蓄電池健康度AI非破壊検出・熱暴走リスク早期警戒システム | バッテリー運行データの監視、健康度評価モデル |
+| 5 | 企業全チェーンカーボン排出AI自動算定・ESGレポート生成アシスタント | エネルギー消費データの収集、カーボン排出因子の計算 |
+| 6 | 電網異常気象負荷AI予測・緊急配車指揮システム | 気象データ連携、負荷予測モデル |
+| 7 | ガソリンスタンド違反行為AIビデオ識別・アラームガードマン | ビデオ監視分析、違反行為（電話、喫煙など）の検出 |
+| 8 | 長距離石油ガスパイプライン漏洩音波AI監視・精密位置特定システム | 音波センサーデーデータの収集、漏洩検出モデル |
+| 9 | バーチャル発電所リソース統合・AI電力取引意思決定システム | 分散型リソースの接続、統合最適化配車 |
+| 10 | 鉱山人员位置AI追跡・危険エリア侵入アラーム | UWB/Bluetooth位置測定、人员軌跡の追跡 |
+
+## 17. 音声・動画
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | 長編動画ハイライトAI識別・ショートビデオ自動編集ツール | ビデオコンテンツ分析、キーフレーム識別 |
+| 2 | ビデオ背景ノイズAIスマート分離・音声強調アシスタント | オーディオ分離モデル、背景ノイズ除去 |
+| 3 | 古い映像4Kアップスケーリング修復・AIスマート着色ワークベンチ | ビデオ超解像度モデル、古い画質の修復 |
+| 4 | テキストからリアルレベルTTS吹き替え・感情制御システム | マルチ音色TTSモデル、感情制御生成 |
+| 5 | ビデオ音声ASR自動認識・バイリンガル字幕生成ツール | 音声認識による字幕生成、多言語翻訳 |
+| 6 | ビデオ画面余分物体AIスマート消去エンジン | ビデオターゲット追跡、物体除去修復 |
+| 7 | 著作権フリーバックグラウンドAIGC自動作曲機 | 音楽生成モデル、感情スタイル制御可能 |
+| 8 | 特定人物音色AIクローン・変声変換ソフトウェア | 少量音声サンプルによる音色モデルの訓練 |
+| 9 | 脚本ワンクリック絵コンテスクリプト・AI動的プレビデオ生成プラットフォーム | 脚本解析による絵コンテ生成、AIプレビデオの生成 |
+| 10 | 会議録音AIスマート書き起こし・コアToDo抽出アシスタント | 複数人会議の音声分離書き起こし |
+
+## 18. AIマーケティング
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | RED爆売りコピーAIGC自動執筆エンジン | トピック入力、LLMによる種草コピーの生成 |
+| 2 | マーケティングポスターAIスマートレイアウト・マルチサイズ適応ツール | コピー入力、ポスターテンプレートのスマートマッチング |
+| 3 | ブランドLOGOクリエイティブAIGC生成・VI体系構築プラットフォーム | ブランドキーワード入力、LOGOクリエイティブ生成 |
+| 4 | 全网ホットAI追跡・トレンドマーケティングクリエイティブ生成アシスタント | ホットデータ収集、LLMによるマーケティング角度の分析 |
+| 5 | 広告出稿ROIリアルタイム監視・AI予算入札マネージャー | 広告プラットフォームデータ連携、効果分析モデル |
+| 6 | 競合マーケティング戦略深層解析・AI週報生成器 | 競合コンテンツ収集分析、戦略の抽出 |
+| 7 | 検索エンジンキーワードAI配置・集客記事一括執筆 | キーワード分析、記事の一括生成 |
+| 8 | 千人千面パーソナライズマーケティングメールAI執筆エキスパート | ユーザープロファイルデータ、パーソナライズコンテンツ生成 |
+| 9 | ブランド評判全网監視・レピュテーション危機AI早期警戒レーダー | 全网レピュテーションデータ収集、感情分析 |
+| 10 | ショートビデオスクリプトクリエイティブAIGC生成・絵コンテガイダンスアシスタント | テーマ入力、スクリプトと絵コンテの生成 |
+
+## 19. データインテリジェンス
+
+| 番号 | アプリケーションシーン名 | 実装参考 |
+| :--: | --- | --- |
+| 1 | Text-to-SQLベースの自然言語データ検索エンジン | 自然言語のSQLクエリへの変換、結果のビジュアル表示 |
+| 2 | 対話式BI：一言でビジュアルチャートを生成 | データ要件の記述、チャートの自動生成 |
+| 3 | スクリーンショットワンクリックExcelテーブル識別ツール | スクリーンショットのアップロード後、VLMによるテーブル構造とデータの認識 |
+| 4 | 画像・スクリーンショットからExcelテーブルAI識別ツール | 画像OCRによるテーブル構造の認識、データのExcel出力 |
+| 5 | マルチソース異種構造データナレッジグラフ自動構築 | マルチデータソースの接続、エンティティと関係の抽出 |
+| 6 | データレポートスマート解読・トレンド分析アシスタント | データレポート画像またはデータ入力、VLMによるチャート内容の解読とトレンド分析 |
+| 7 | データベーステーブル構造スマート解読・クエリ例生成アシスタント | テーブル名またはフィールド記述の入力、建テーブル説明とサンプルクエリSQLの生成 |
+| 8 | 企業マスターデータスマート対合・AI重複排除ガバナンス | マルチソースマスターデータのマッチング、重複レコードの識別 |
+| 9 | データ要件ドキュメントスマートテストケース変換ツール | データ要件記述の入力、LLMによるテストシナリオと検証ケースの生成 |
+| 10 | データ指標定義スマートQAアシスタント | 指標定義ドキュメントに基づくナレッジベース構築 |
diff --git a/docs/ja-jp/stage-1/appendix-jobs-to-be-done/index.md b/docs/ja-jp/stage-1/appendix-jobs-to-be-done/index.md
new file mode 100644
index 0000000..9c79919
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-jobs-to-be-done/index.md
@@ -0,0 +1,496 @@
+---
+title: 'Jobs to Be Done でユーザーが本当に達成したいことを見極める'
+description: 'ゼロベースの読者向けの Jobs to Be Done 入門記事。ユーザーは機能を買っているのではなく、特定のシーンでプロダクトを「雇用」して進捗を達成していることを理解し、JTBD でプロダクト方向、インタビュー質問、AI プロンプトを分解する方法を学びます。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 時間</strong>'
+</script>
+
+# Jobs to Be Done でユーザーが本当に達成したいことを見極める
+
+<a id="top-jtbd"></a>
+
+## 本章のガイド
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['JTBD', 'ユーザーニーズ', 'プロダクト思考', 'ニーズインサイト']"
+  coreOutput="1 つのよりリアルなニーズに近い JTBD 文"
+  expectedOutput="曖昧なアイデアをより具体的なユーザーシーンと MVP 方向に絞り込める"
+>
+
+多くの人が初めてプロダクトを作る時、最も陥りやすい間違いは「自分がどんな機能を作るか」に注意を全部向けてしまうことです。他のプロダクトにスマート分類があれば自分も追加したくなり、自動サマリーがあれば自分も接続したくなり、Agent、マルチモーダル、ワークフローがあれば自分も欠かせないと感じてしまいます。
+
+しかし現実には、ユーザーが「この機能名がかっこいいから」という理由でプロダクトを使うことはめったにありません。彼らはむしろ特定の場面で、あることを前に進めたいと思い、一時的にツールやサービス、さらには人を「雇用」して、この一歩を完了させようとします。
+
+これこそが **Jobs to Be Done（JTBD）** という手法が私たちに気づかせようとしていることです：**ユーザーは機能そのものを買っているのではなく、あるソリューションを雇用して、自分の進捗を達成しようとしているのです。**
+
+本記事はできるだけ分かりやすい言葉で、ゼロから JTBD を理解し、AI アプリケーションを作る際に直接使える分析ツールにするまでを案内します。
+
+</ChapterIntroduction>
+
+::: info 最小 SOP
+**目的**：読み終わった後、曖昧なアイデアを本当にユーザーシーンのあるニーズの一文に絞り込む方法がより明確になり、頭の中に機能名の羅列だけが残ることはありません。
+
+**アクション項目**：曖昧なアイデアを 1 文書き、潜在ユーザー 3 人に「前回どう対処したか」を聞き、それを JTBD 文に整理する。
+
+**結果**：より明確なニーズ仮説が得られ、初版で何を優先すべきかがわかる。
+
+**キーワードジャンプ**：[JTBDとは](#jtbd-what) · [一文公式](#jtbd-formula) · [AIの活用法](#jtbd-ai)
+:::
+
+## この章で学ぶ内容
+
+1. Jobs to Be Done とは何か、なぜ「機能ブレスト」よりもリアルなニーズに近いのか
+2. 「ユーザーが欲しいと言う機能」と「ユーザーが本当に達成したいこと」の区別方法
+3. 簡単なテンプレートを使って、曖昧なアイデアをシーン、トリガー、障害、成功基準に分解する方法
+4. JTBD を AI プロダクト、インタビュー質問、プロンプト整理にどう活用するか
+
+<a id="jtbd-what"></a>
+## [1. Jobs to Be Done とは何か](#top-jtbd)
+
+Jobs to Be Done は **JTBD** と略されることが多いです。その背後にある核心的なアイデアは、Clayton Christensen のチームが広めた次の古典的な表現に関連しています：**ユーザーはあるプロダクトを「雇用」して一つのことを完了させる。**
+
+ここで言う「こと」とは、ToDoリストにあるような表面的な動作ではなく、ユーザーが自分の状態を変えたいと思う一種の **進捗** です。例えば：
+
+- 「AI 議事録ツールが欲しい」ではなく、「会議後 10 分以内に要点、ToDo、責任者を整理し、もう思い出しながらメモを補完したくない」
+- 「家計簿 App が欲しい」ではなく、「お金がどこに消えているのかを知りたい、月末に不安を感じたくない」
+- 「履歴書最適化ツールが欲しい」ではなく、「安心してまともな履歴書を提出したい、毎回提出するたびに自分の書いたものが不十分だと疑いたくない」
+
+だから、**JTBD が注目するのはプロダクトがどう見えるかではなく、ユーザーがなぜこの瞬間にそれを必要としているのかです。**
+
+これこそが、一見異なるプロダクトが実際には同じ Job を争っている理由でもあります。ユーザーが「通勤途中で退屈したくない」と思えば、雇用の対象はショート動画、ポッドキャスト、ゲーム、チャット、さらには居眠りかもしれません。ユーザーが「とても長い PDF を素早く理解したい」と思えば、雇用の対象は AI 要約ツール、インターン、同僚、自分で頑張って読む、あるいはとりあえず読まないことかもしれません。
+
+この視点で問題を見ると、本当の競合相手は「自分と似たような App」だけではなく、**ユーザーの現在受け入れ可能なすべての代替ソリューション** であることに気づくでしょう。
+
+## 2. JTBD とユーザーペルソナ、機能リストの違い
+
+多くの初心者が初めてニーズ分析をする時、まずユーザーペルソナを書きます：25 歳、女性、一線都市、ホワイトカラー、効率ツールが好き、新しいプロダクトを試す意欲がある。この情報は全く役に立たないわけではありませんが、通常 **一人がなぜこの瞬間に行動を起こすのかを説明するのには不十分です。**
+
+JTBD がより関心を持つのは次のような問題です：
+
+- どんなシーンでソリューションを探すことを決めたのか
+- その時、何につまずいたのか
+- 何を次のステップに進めたいのか
+- 今どんな不器用な方法でやりくりしているのか
+- もし上手く解決できたら、どんな結果なら「価値があった」と思うのか
+
+つまり、**ユーザーペルソナは「この人が大体誰か」に近く、JTBD は「この人が今本当に何を達成したいか」に近い** ということです。
+
+同様に、機能リストも人を誤導しがちです。ユーザーが「Word エクスポートが欲しい」「AI リライトが欲しい」「音声入力が欲しい」と言っても、これらは表面的な表現にすぎません。JTBD はさらに掘り下げます：
+
+- なぜ今 PDF ではなく Word でエクスポートする必要があるのか？
+- リライトしたいのは、文章のスタイルが良くないからか、それとも異なる対象に合わせる必要があるからか？
+- 音声入力が欲しいのは、タイプするのが面倒だからか、それとも歩いている時、運転している時、会議直後にすぐ記録するからか？
+
+多くの場合、**機能は Job の一時的な翻訳にすぎません**。機能だけを集めると、プロダクトは「ユーザーが言うままに積み上げる」ものになりがちですが、背後にある Job が見えれば、本当に使いやすく、本当に競争力のあるソリューションを作れる可能性がずっと高くなります。
+
+## 3. ゼロベースでも理解できる例
+
+まず複雑な AI プロダクトを考えるのは後回しにして、生活の例から始めましょう。
+
+ある人が朝出かける前にいつも朝食を食べる時間がなく、よく地下鉄の入り口でサンドイッチとコーヒーを買うと仮定します。表面的には彼は「朝食」を「購入」していますが、JTBD で見れば、彼が本当に達成したいことは：
+
+- 急いでいる朝に、最も頭を使わない方法で一食を済ませる
+- 会社に着く前に空腹でフラフラにならない
+- 朝食のために通勤のペースを崩さない
+
+この時、ユーザーが雇用しているのは「ある特定ブランドのサンドイッチ」ではなく、朝をスムーズに進められるソリューションです。隣のコンビニがより速く、より近く、より安定していれば、彼はすぐに元の選択を変えるかもしれません。
+
+このロジックを AI プロダクトに持ち込むと、より明白になります。
+
+例えば「AI 議事録ツール」を作りたいとします。機能のレベルに留まると、すぐに考え始めがちです：
+
+- 音声アップロードに対応すべきか
+- 話者分離に対応すべきか
+- Markdown エクスポートに対応すべきか
+- 自動 ToDo 生成に対応すべきか
+
+これらは間違いではありませんが、まだ不十分です。JTBD でもう一段階問い直すと、ユーザーが本当に達成したいのは：
+
+- 会議後 10 分以内に、議論結果を不参加者に同期したい
+- ToDo、責任者、締切をきれいに抽出し、チームが記憶に頼ったコラボレーションをしなくて済むようにしたい
+- 議事録の整理にかかる繰り返しの時間を減らし、意思決定と実行にエネルギーを注ぎたい
+
+Job が明確になると、多くの機能の優先順位が自動的に見えてきます。初版で最も重要なのは「12 種類のエクスポート形式に対応すること」ではなく、次のようなことかもしれません：
+
+- 議事録の構造が十分に明確であること
+- ToDo 抽出が安定していること
+- 共有リンクが便利であること
+- 出力結果がチームに直接転送できる信頼性があること
+
+これこそが JTBD の価値です：**「どの能力を積み上げるか」から「ユーザーのどんな進捗を支援するか」に注意を戻すことができます。**
+
+## 4. 使いやすい JTBD テンプレート
+
+ゼロベースなら、JTBD を学術的に考えすぎる必要はありません。まず最も実用的な 5 つの要素を掴めば十分です。
+
+### 4.1 シーン
+
+ユーザーはどんな瞬間、どんな環境でこのプロダクトを思い出すのか？
+
+- 会議が終わった後
+- 上司が急に資料を求めてきた時
+- 夜履歴書を提出する準備をしている時
+- 月末にお金がまた足りないことに気づいた時
+
+**シーンのないニーズは、通常まだリアルではありません。**
+
+### 4.2 トリガー
+
+何が彼にすぐソリューションを探す決意をさせたのか？
+
+- 長い文書に圧倒され、どこから読めばいいかわからない
+- 明日提出の資料が、今日になってフォーマットがめちゃくちゃだと気づく
+- 上司に進捗を追及され、自分が整理しきれていないことに気づく
+- 記録を続けたいが、手書き、コピー、整理が面倒すぎる
+
+トリガーには往々にして感情が伴います。この感情は重要です。なぜなら、ユーザーがなぜこの瞬間に行動を起こすのかを決めるからです。
+
+### 4.3 達成したい進捗
+
+彼は「一つの動作をする」だけでなく、自分をどんな新しい状態に進めたいのか？
+
+- 混乱から明確へ
+- 不安から安心へ
+- 先延ばしからスタートへ
+- 非効率からスムーズへ
+- うまく説明できないから直接届けられるものへ
+
+このステップで「進捗」という言葉が非常に重要です。なぜなら、多くの人が本当に買っているのはツールではなく、**状態の変化** だからです。
+
+### 4.4 現在の代替ソリューション
+
+あなたのプロダクトがない今、彼はどうしているのか？
+
+- 手作業でコピペ
+- Excel やメモアプリでやりくり
+- 同僚に頼る
+- 先延ばしにする
+- 複数のツールの間で行き来する
+
+誰が代替ソリューションか、誰があなたの本当の競争環境か。
+
+### 4.5 成功基準
+
+どうなったら本当に解決したと言えるのか？
+
+- 10 分以内に共有可能な結果が得られる
+- 大きな修正なしで他人に送れる
+- 抜け漏れ、ミス、忘れが起こりにくい
+- 初めて使っても次のステップがわかる
+
+「ユーザーがどうやって価値を判断するか」すら言えないなら、その方向性はおそらくまだ十分に絞り込まれていません。
+
+<a id="jtbd-formula"></a>
+## [5. そのまま使える一文公式](#top-jtbd)
+
+プロダクトの方向性を整理したい時、まずこの実用的なテンプレートに当てはめてみてください：
+
+> \_\_\_\_\_\_\_\_\_\_ の時、\_\_\_\_\_\_\_\_\_\_ がしたい、それは \_\_\_\_\_\_\_\_\_\_ のためだ。
+> 今は \_\_\_\_\_\_\_\_\_\_ でなんとかこのことをやり遂げている。
+
+例えば：
+
+> 情報量が多いプロジェクト会議が終わった時、ToDo、責任者、締切を含む議事録を素早く得て、すぐにチームに同期し実行を推進したい。
+> 今は自分の記憶、チャット履歴の確認、手作業での整理でなんとかやり遂げている。
+
+もう一つの例：
+
+> 新しい職種に応募する準備をする時、既存の経歴を職種に合ったバージョンに素早く書き換えて、安心してまともな履歴書を提出したい。
+> 今は古い履歴書を繰り返しコピペし、言葉を手作業で修正し、最後にはどんどん自信がなくなっている。
+
+一文をこの明確さまで書ければ、その後の画面設計、プロンプト設計、機能優先度の判断がずっと楽になります。
+
+## 6. AI プロダクトを作る時、特に注目すべき 3 つのレイヤーの Job
+
+多くの AI プロダクトは機能デモでは強そうに見えますが、実際にリリースされてもユーザーが定着しないことがよくあります。その一般的な理由は、表面的な動作を解決しただけで、より深い Job を解決していないからです。
+
+Job は大まかに 3 つのレイヤーに分けて見ることができます：
+
+### 6.1 機能レイヤー
+
+最も表面的なタスクは何か？
+
+- 文書の要約
+- コピーのリライト
+- ToDo の抽出
+- 画像の生成
+
+これはユーザーが口に出しやすいレイヤーです。
+
+### 6.2 感情レイヤー
+
+ユーザーはどんな不快感を減らしたいのか、またはどんな感情を得たいのか？
+
+- 慌てたくない
+- プロフェッショナルに見えたい
+- 毎回ゼロから始めたくない
+- コントロール感が欲しい
+
+多くの有料意欲は、実際に感情レイヤーと深く関係しています。
+
+### 6.3 社会レイヤー
+
+ユーザーは他人の目にどうなりたいのか？
+
+- より頼りに見られたい
+- チームでより組織力があると思われたい
+- 顧客の前でよりプロフェッショナルに見られたい
+- SNS でより表現力があると思われたい
+
+機能レイヤーだけをやっていれば、プロダクトは代替されやすいです。感情レイヤーと社会レイヤーも同時に理解すれば、より粘着性のある価値を見つけやすくなります。
+
+## 7. JTBD を逆に使ってプロダクト方向を絞り込む
+
+時にはすでにプロダクトがあるのではなく、3〜5 のアイデアがあって、どれを作るべきかわからないことがあります。この時、JTBD は選別に非常に適しています。
+
+各アイデアを取り上げて、それぞれに 5 つの質問をすることができます：
+
+1. このアイデアに対応するシーンは十分に具体的か？
+2. ユーザーはすでに何らかの不器用な方法で解決しているか？
+3. この Job の痛みは十分に強いか、または十分に高頻度か？
+4. もし上手くできたら、ユーザーは明らかに「状態が良くなった」と感じるか？
+5. 初版はこの Job の重要な一歩だけを囲んで、小さいが有用なバージョンを作れるか？
+
+ある方向性が最後まで説明しても「面白そう」としか言えず、トリガー、代替ソリューション、成功基準をはっきりと言えないなら、それはおそらくまだ曖昧なインスピレーションであって、成熟した方向性ではありません。
+
+## 8. そのままユーザーインタビューに使える質問
+
+多くの人は調査をする時、「どんな機能が欲しいですか？」と聞いてしまいます。この聞き方は表面的な回答を得やすいです。
+
+JTBD は次のような質問により適しています：
+
+- 前回この問題に直面したのはいつですか？
+- その時何をしていて、なぜつまずいたのですか？
+- 最終的にどう解決しましたか？
+- このプロセスで一番面倒で、一番遅くて、一番不安なのはどこですか？
+- もしツールがあれば、どんな結果なら本当に役に立つと思いますか？
+- どんな代替方法を試しましたか？なぜ十分ではなかったのですか？
+
+この聞き方には利点があります：会話をリアルな体験に引き戻し、想像上の好みに留まらせないことです。
+
+## 9. AI に JTBD 分析を手伝ってもらう
+
+JTBD 自体は AI が発明したものではありませんが、AI は JTBD の整理と洗練に非常に適しています。
+
+例えば、5〜10 件のユーザーフィードバックを収集したら、それらをモデルに渡して次の構造でまとめてもらうことができます：
+
+```text
+プロダクト研究アシスタントを演じてください。
+ユーザーの生の言葉を渡します。まず機能提案をせず、
+Jobs to Be Done のフレームワークで整理してください：
+
+1. ユーザーはどんなシーンにいるか
+2. 行動を起こすトリガーは何か
+3. 本当に達成したい進捗は何か
+4. 現在の代替ソリューションは何か
+5. 最も重視する成功基準は何か
+6. これらのフィードバックで繰り返し出現する感情ワードは何か
+
+最後に、これらを最も優先的に検証すべき 3 つの JTBD 仮説に整理してください。
+```
+
+もしすでにアイデアがあるなら、AI に第一段階の絞り込みをしてもらうこともできます：
+
+```text
+[あなたのプロダクトアイデア] を作りたい。
+機能リストを直接出すのではなく、Jobs to Be Done の方法で分析してください：
+
+1. このプロダクトがサービスする可能性のある具体的なシーンは何か
+2. 各シーンでユーザーが達成したいコア Job は何か
+3. 既存の代替ソリューションには何があるか
+4. どの Job が MVP の出発点として最も適しているか、なぜか
+5. 最終的に推奨する Job を明確な JTBD 文に書いてください
+```
+
+このようにすることで、最初から AI に「50 の機能をブレスト」させるのではなく、方向性をまず明確にできます。
+
+## 10. 初心者が最も陥りやすい 4 つの誤解
+
+### 10.1 Job を機能名にしてしまう
+
+「AI 要約」「スマート分類」「自動生成」は Job ではなく、それらは実現方法の可能性にすぎません。
+
+### 10.2 ターゲット層を広く書きすぎる
+
+「すべてのビジネスパーソン」「すべての学生」「すべての起業家」は通常広すぎます。広ければ広いほど、リアルなシーンを見えなくなります。
+
+### 10.3 ユーザーの言葉だけを聞き、行動を見ない
+
+ユーザーは自分が何を欲しがっているかを説明できますが、彼らの本当の優先順位は、今どのように問題をやりくりしているかに隠されていることが多いです。
+
+### 10.4 最初から完全なプラットフォームを作ろうとする
+
+JTBD の正しい使い方は、通常「何でもできる大きなプラットフォームを作る」ことではなく、まず一つのシーンで最も重要な一歩に注目し、それを非常に使いやすくすることです。
+
+## 11. まとめ
+
+Jobs to Be Done の最も価値のある点は、新しい用語を与えることではなく、観察の角度を変えてくれることです：**プロダクトの機能だけを見るのではなく、ユーザーが何を次のステップに進めたいのかを見る。**
+
+あなたが次のようなことを繰り返し自分に問い始めると：
+
+- ユーザーはどんなシーンでこのプロダクトを雇用しているのか
+- 彼は一体どこでつまずいているのか
+- 今どんな方法でやりくりしているのか
+- 問題が解決した後、状態はどう変わるのか
+
+元々曖昧だったアイデアが急にはっきりとし、元々派手だった機能も急に重要ではなくなっていくことに気づくでしょう。
+
+プロダクトを作る時、特に AI プロダクトを作る時、最も怖しいのは最初から能力展示に夢中になることです。JTBD はあなたの注意を本当に重要なところに引き戻してくれます：**ユーザーはなぜあなたを必要としているのか、そしてあなたは一体ユーザーのどんな進捗を支援しているのか。**
+
+<a id="jtbd-ai"></a>
+## [12. AI を活用して JTBD を実践する方法](#top-jtbd)
+
+JTBD は AI が発明したものではありませんが、AI はこの手法で研究アシスタント、整理アシスタント、対照アシスタントとして非常に適しています。重要なのは：**AI に整理と拡張をさせ、ユーザーの推測をAIに代行させないこと。**
+
+次のように活用できます：
+
+### 12.1 AI に曖昧なアイデアを JTBD 仮説に書き直させる
+
+頭の中に「大学生のインターン探しを支援するツールを作りたい」という曖昧な説明しかない時、まず AI にそれをいくつかの可能性のある Job に分解させることができます：
+
+```text
+今、曖昧なプロダクトアイデアがあります：[あなたのアイデア]
+機能リストを直接出すのではなく、Jobs to Be Done の方法で分析してください：
+1. どのような具体的なシーンに対応する可能性があるか
+2. 各シーンでユーザーが本当に達成したい進捗は何か
+3. 現在の代替ソリューションは何か
+4. どの Job を最初に MVP にするのが最も適切か
+最後に各 Job を明確な JTBD 文に書いてください。
+```
+
+非常に初心者っぽい入力でも全く問題ありません：
+
+```text
+大学生のインターン探しを支援するものを作りたい。
+具体的に何を作るかまだはっきり言えない。ユーザーが本当に何を達成したいかを考えてみて。
+```
+
+AI が返す有用な出力は次のようになります：
+
+```text
+可能性のある JTBD 方向：
+
+1. 初めてインターンに応募する準備をする時、まず何を準備すべきかを素早く知りたい、
+情報が乱雑で応募を先延ばしにしたくない。
+
+2. インターンの求人を見た時、自分が応募する価値があるかどうかを素早く判断したい、
+不適切な求人に時間を無駄にしたくない。
+
+3. 応募を始める時、既存の履歴書を求人に合ったバージョンに素早く書き換えたい、
+より早く応募を完了し、通過率を高めたい。
+```
+
+このような出力の価値は、元々非常に漠然としていたアイデアを、よりリアルなシーンに近い方向に分解してくれることです。
+
+### 12.2 AI にインタビューの生の言葉を整理させる
+
+すでに何度かユーザーインタビューを終えたなら、インタビュー記録を AI に渡して、繰り返し出現するシーン、トリガー、代替ソリューション、成功基準を抽出させることができます。
+
+```text
+以下は 5 人のユーザーのインタビュー生の言葉です。
+まずソリューションを出さず、JTBD フレームワークで整理してください：
+1. ユーザーはどんなシーンにいるか
+2. 行動を起こすトリガーは何か
+3. 本当に達成したい進捗は何か
+4. 現在の代替ソリューションは何か
+5. 最も重視する成功基準は何か
+6. どの情報が複数のユーザーで繰り返し出現しているか
+最後に、最も優先的に検証すべき 3 つの JTBD 仮説に整理してください。
+```
+
+非常にシンプルな初心者入力も次のように書けます：
+
+```text
+3 人に聞きました。大体こんな風に言っていました：
+
+1. 毎回インターンに応募するたびに履歴書を書き直すのが本当に面倒。
+2. 一番怖いのは、自分が書いたものが正しいかどうかわからないこと。
+3. 今は先輩に見てもらうようにしているけど、毎回頼むのは申し訳ない。
+
+彼らが本当に達成したいことを整理して。
+```
+
+AI は次のように出力するかもしれません：
+
+```text
+整理結果：
+
+- 共通シーン：インターン応募前の履歴書処理
+- 共通の困難：「十分良い」までどう修正すればいいかわからない
+- 現在の代替ソリューション：先輩に見てもらう、自分で繰り返し修正
+- 可能な JTBD：
+  インターンに応募する準備をする時、履歴書が応募可能なレベルに達しているかをより早く判断したい、
+  「もう少し修正」でずっと応募できずにいる状況から抜け出したい。
+```
+
+このような出力は、散らばった生の言葉から「ニーズ」により近いものを抽出してくれるので、非常に有用です。
+
+### 12.3 AI に軽量なウェブ調査を先に行わせる
+
+大規模なインタビューを始める前に、AI に少し軽い外部情報スキャンをさせることができます。例えば：
+
+- 公開フォーラムやコミュニティで、皆がこの問題にどう不満を漏らしているか
+- 市場の既存プロダクトが主にどのレベルの問題を解決しているか
+- ユーザーの最も一般的な代替ソリューションは何か
+- 一般的な評価で、最も満足されている点と最も不満な点は何か
+
+この調査はリアルなユーザーインタビューに代わるものではありませんが、Discover 段階のウォームアップとして、問題の地図を先に構築するのに非常に適しています。
+
+シンプルな入力は次のようなものです：
+
+```text
+調べてほしいことがあります：
+「大学生が履歴書を修正してインターンに応募する時、最もよくあるペインポイントは何？」
+公開フォーラム、経験談、就職コミュニティで皆が自分で言っていることを優先的に見てください。
+最も一般的な問題を 5 つに整理して。
+```
+
+AI は次のように出力するかもしれません：
+
+```text
+よくあるペインポイントの整理：
+
+1. 履歴書に何を書けばいいかわからない、経歴が少なすぎる
+2. 異なる職種に合わせてどう修正すればいいかわからない
+3. 何度も修正したが、まだ十分かどうかわからない
+4. 信頼できる人に見てもらえない
+5. 応募プロセスが複雑で、先延ばしにしがち
+```
+
+この種の出力は最終結論として扱うべきではありませんが、どの問題を優先してインタビューするかを決めるのに非常に適しています。
+
+### 12.4 AI に「反論者」を演じさせる
+
+多くの場合、私たちは自分のアイデアに感情を入れすぎてしまいます。意図的に AI に批判者を演じさせ、問題をより明確に説明するよう促すことができます：
+
+```text
+非常に厳しいプロダクト研究コンサルタントを演じてください。
+以下は私の JTBD 仮説です：[あなたの仮説]
+次の観点から批判してください：
+1. このシーンは広すぎないか
+2. この Job は機能であり、本当に進捗であるかどうか
+3. 代替ソリューションが弱すぎないか
+4. 成功基準が不明確ではないか
+5. この仮説で最も検証が必要なリスクは何か
+```
+
+このようにすることで、自分がニーズを見ているのか、それともただ自分が好きなソリューションを見ているのかをより早く発見できます。
+
+## 📚 課題
+
+上記の内容に基づいて、次の課題を完了してください：
+
+1. 最近やりたいプロダクトアイデアを一つ選び、JTBD 公式の一文で明確に書く
+2. このアイデアに 5 つの要素を補完する：シーン、トリガー、進捗、代替ソリューション、成功基準
+3. 潜在ユーザー 3 人に聞き、「前回この問題に直面したのはいつですか」を少なくとも 1 回は聞き出す
+4. インタビューの生の言葉を AI に渡し、最も優先的に検証すべき 3 つの JTBD 仮説に整理する
+
+## さらに学ぶために
+
+- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
+- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
+- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
+- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
diff --git a/docs/ja-jp/stage-1/appendix-mom-test/index.md b/docs/ja-jp/stage-1/appendix-mom-test/index.md
new file mode 100644
index 0000000..f61cac2
--- /dev/null
+++ b/docs/ja-jp/stage-1/appendix-mom-test/index.md
@@ -0,0 +1,589 @@
+---
+title: 'The Mom Test：ユーザーインタビューでニーズを検証する方法'
+description: 'ゼロベースの読者向けの The Mom Test 入門記事。礼儀正しいフィードバックを避け、実際の行動、具体的な事実、既存の問題を中心にユーザーインタビューを行い、「良さそう」をより確実なニーズ判断に変える方法を学びます。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 時間</strong>'
+</script>
+
+# The Mom Test：ユーザーインタビューでニーズを検証する方法
+
+<a id="top-mom"></a>
+
+## 本章のガイド
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['ユーザーインタビュー', 'ニーズ検証', 'ユーザーリサーチ', 'プロダクト調査']"
+  coreOutput="1 組のよりリアルな情報を引き出せるインタビュー質問"
+  expectedOutput="ユーザーの礼儀正しい励ましを検証とみなさず、実際の行動で方向性を判断できる"
+>
+
+多くの人が初めてプロダクト調査をする時、最も重要なのは「人に話を聞くこと」だと思いがちです。そこで友達や同僚、さらには家族に聞いてみます：
+
+- このアイデア、どう思う？
+- こんなプロダクトがあったら、使う？
+- この機能、悪くないよね？
+
+相手もとても励みになるフィードバックをくれるでしょう：
+
+- いいね
+- 役に立ちそう
+- 試してみたらいいと思う
+
+問題は、これらの回答は通常、判断に役立たないということです。それはむしろ礼儀、サポート、あるいはその場で盛り上げようとする自然な反応に近いものです。自分が「市場検証」を得たと思っても、実際には判断に使いづらい慰めを集めただけなのです。
+
+The Mom Test という手法は、まさにこの問題を解決するためのものです。それは私たちに注意喚起します：**ユーザーがわざと嘘をついているのではなく、あなたの質問の仕方が、自然と相手を聞こえの良いが無難な回答に導いているのです。**
+
+</ChapterIntroduction>
+
+::: info 最小 SOP
+**目的**：読み終わった後、ユーザーとどう話せば「良さそう」しか聞けない会話から、方向性を判断できる情報を引き出せるかがより明確になります。
+
+**アクション項目**：本来聞こうとしていた 5 つの質問を書き直し、「最近いつありましたか」「その時どうしましたか」を優先して聞くようにします。
+
+**結果**：どれが意見で、どれが本当に判断を支える証拠なのかを見分けやすくなります。
+
+**キーワードジャンプ**：[The Mom Testとは](#mom-what) · [3つの核心原則](#mom-principles) · [AIの活用法](#mom-ai)
+:::
+
+## この章で学ぶ内容
+
+1. The Mom Test が一体何を解決しようとしているのか、なぜ多くの「ユーザー調査」が実際にはリアルな情報を調査できていないのか
+2. この手法の最も核心的ないくつかの原則：意見を聞くのを減らし、行動を聞くのを増やす；仮定を聞くのを減らし、事実を聞くのを増やす
+3. 偽陽性フィードバックを得やすい質問を、より価値のあるインタビュー質問に書き直す方法
+4. The Mom Test と JTBD、ニーズ検証、MVP 判断をどう組み合わせて使うか
+
+<a id="mom-what"></a>
+## [1. The Mom Test とは一体何か](#top-mom)
+
+The Mom Test は Rob Fitzpatrick の同名の著書に由来します。その名前は冗談のように聞こえますが、非常に的確に指摘しています：
+
+**あなたのお母さんでさえ、「それはダメなアイデアだ」とは直接言えないのです。**
+
+その理由は彼女が不誠実だからではなく：
+
+- あなたを傷つけたくない
+- 無意識にあなたを励ましたくなる
+- あなたの表現に沿って答えやすくなる
+
+実はお母さんだけではなく、友達、同僚、昔の同級生、さらには多くの見知らぬ人も、あなたのプロダクトアイデアに直面すると、似たような「ポジティブなフィードバック」をよくくれます。これはニーズが本当に存在するという意味ではなく、あなたが質問を誰もが賛同しやすい形にしてしまっているだけです。
+
+だから The Mom Test のポイントは決して「お母さんに聞くな」ではなく：
+
+**質問を誰もがあなたに同調して答えるような形にしないことです。**
+
+この手法が本当に教えたいのは、対話を通じて、よりリアルなニーズに近い情報を手に入れる方法であり、自分を気分よくさせるコメントを集めることではありません。
+
+## 2. この手法が解決する核心的な問題
+
+The Mom Test が主に解決するのは、非常に一般的な認知の錯覚です：
+
+**礼儀正しいポジティブなフィードバックを、リアルなニーズと混同してしまう。**
+
+例えばあなたが聞くと：
+
+- この App のアイデア、どう思う？
+- AI で履歴書を書くツールがあったら、使う？
+- この機能、価値あるでしょ？
+
+これらの質問に共通する特徴は：
+
+- すべて「意見」を聞いている
+- すべて少し暗示を含んでいる
+- すべてまだ起きていない未来について話している
+
+そして「意見」と「未来の仮定」に対する回答は、通常不安定です。多くの人は自分の興味、実行力、将来の購入意欲を過大評価しがちです。
+
+だから The Mom Test は注意を促します：
+
+- 他人のあなたのアイデアに対する評価をあまり信用しない
+- 他人の未来の行動予測をあまり信用しない
+- できるだけユーザーのすでに起こった実際の行動に戻る
+
+「使うかどうか」よりも「前回どう対処したか」のほうが、真実に近いことが多いからです。
+
+<a id="mom-principles"></a>
+## [3. 3つの最も核心的な原則](#top-mom)
+
+最も重要な部分だけを先に覚えたいなら、次の 3 つの原則を先に覚えてください。
+
+### 3.1 自分のアイデアについて話すのを減らし、ユーザーの過去のリアルな体験について話す
+
+多くの無効なインタビューは冒頭で自分のソリューションを語り、自分がどれだけ興奮しているか、どんなプロダクトを作ろうとしているかを話します。問題は、あなたが話しすぎると、相手が「あなたに合わせる」「あなたを励ます」モードに入りやすくなることです。
+
+それに対して、より良い方法は相手の体験に焦点を当てることです：
+
+- 前回この問題に直面したのはいつですか？
+- その時何をしていましたか？
+- 最終的にどう対処しましたか？
+- どの手順が一番面倒でしたか？
+
+この種の質問は、想像上の好みに留まることなく、より自然に会話を現実に引き戻せることに気づくでしょう。
+
+### 3.2 抽象的な意見を聞くのを減らし、具体的な事実を聞く
+
+「この機能は良さそう」「悪くないね」「ちょっと役立ちそうかも」、これらの表現はあまりに抽象的で、プロダクトの判断に役立ちません。
+
+より価値のある情報は通常、次のようなものです：
+
+- 先週この件に 2 時間悩まされました
+- 今は Excel と WeChat でなんとかやりくりしています
+- 先月似たようなツールにお金を払いました
+- 一番怖いのは間違えることではなく、遅くなることです
+
+これらこそが、問題の強度、頻度、有料化の可能性を判断するのに本当に役立つ情報です。
+
+### 3.3 ユーザーがどんなソリューションを欲しがっているか聞くのを減らし、今どう問題を解決しているか見る
+
+ユーザーは自分の悩みを説明するのは得意ですが、ソリューションを設計するのは必ずしも得意ではありません。
+
+もし聞くと：
+
+- AI がこれを自動でやってくれる機能、欲しくない？
+- スマート機能を追加するのって役立つ？
+
+得られるのは通常、あるソリューションに対する曖昧な態度だけであり、ニーズそのものではありません。
+
+より良い質問は：
+
+- 今、この問題にどう対処していますか？
+- なぜこの方法を選んだのですか？
+- どこが良くないですか？
+
+既存の代替ソリューションを見極めることは、「何を欲しがっているか」を直接聞くよりも重要なことが多いのです。
+
+## 4. なぜ人々はいつも聞こえは良いが役に立たない回答をするのか
+
+これが理解できれば、インタビューでの誤判断が大幅に減ります。
+
+### 4.1 人は無意識に礼儀正しさを保つ
+
+特に会話の相手と関係がある場合、相手は直接言いにくいものです：
+
+- この方向、ちょっと無理そう
+- 全然使わない
+- この問題はそこまで重要じゃない
+
+むしろ「いいね」「機会があればやってみてもいいかも」と言いがちです。
+
+### 4.2 人は未来の自分を過大評価する
+
+多くの人が心から未来の自分を信じています：
+
+- もっと自律的になる
+- もっと学ぶ意欲がある
+- もっとお金を払う
+- もっと新しいツールを試す
+
+だから「あればたぶん使う」という言葉は、未来に本当に使うこととイコールではないことが多いのです。
+
+### 4.3 質問の仕方自体が答えを誘導している
+
+あなたが聞くとき：
+
+- このアイデア、いいよね？
+- この機能、役に立つでしょ？
+
+あなたは実はこっそり「正解」を質問に忍ばせているのです。
+
+これこそが The Mom Test が特に強調している理由です：**インタビューを自分への承認探しにしないこと。**
+
+## 5. 直接比較：どんな質問が無駄になりやすく、どんな質問がより価値があるか
+
+以下の対照表は、ほぼすべての初心者が使うものです。
+
+| 無駄になりやすい質問 | より価値のある質問 |
+| --- | --- |
+| このアイデア、どう思う？ | 前回この問題に直面したのはいつ？ |
+| このプロダクトがあったら使う？ | 今、この件をどう処理している？ |
+| この機能にお金を払う？ | 前回この問題にお金を使った？何に？ |
+| この機能は重要だと思う？ | このプロセスで一番面倒で、一番遅くて、一番不安なのはどの手順？ |
+| AI が自動でやってくれる機能、欲しくない？ | なぜまだもっと使いやすい解決策を見つけられていないの？ |
+
+この表で最も重要なのは具体的な文ではなく、背後にある方向性です：
+
+- 意見から事実へ
+- 未来から過去へ
+- あなたのソリューションからユーザーの問題へ
+
+## 6. ゼロベースでもすぐに使えるインタビューの流れ
+
+今すぐ誰かに話を聞きに行きたいなら、次の順序で進められます。
+
+### 6.1 オープニング：学習しているのであって、売り込んでいるのではないと伝える
+
+例えば：
+
+> 最近、皆さんがこの種の問題にどう対処しているかを調べていて、まずリアルな状況を知りたいと思っています。売り込みではありません。
+
+このような表現は、相手が「ポジティブなフィードバックをあげなきゃ」という心理的負担を減らすのに役立ちます。
+
+### 6.2 最近のリアルな体験から聞き始める
+
+まず次のような質問から始められます：
+
+- 前回この問題に直面したのはいつですか？
+- その時何が起きましたか？
+- 最初の反応はどう対処しましたか？
+
+会話が具体的な出来事に入ると、情報の質は通常明らかに向上します。
+
+### 6.3 行動、コスト、代替ソリューションについて掘り下げる
+
+引き続き聞きます：
+
+- 今、どうやって解決していますか？
+- この方法で一番不満なのは何ですか？
+- このためにどれくらいの時間、お金、または労力を費やしましたか？
+- 他の方法を試したことはありますか？なぜ続けなかったのですか？
+
+### 6.4 最後に痛みの強さと優先度を判断する
+
+「痛いですか」と直接聞く必要はなく、詳細から判断できます：
+
+- よく直面しているか
+- すでに自発的に対処しようとしているか
+- すでにコストを払う意欲があるか
+- この話をしている時に明らかな感情が表れているか
+
+これらはすべて「これがあなたのペインポイントですか」という一言よりも役立ちます。
+
+## 7. より完全な例
+
+「AI で大学生の履歴書を添削する」プロダクトを作りたいと仮定しましょう。
+
+### 誤った聞き方
+
+同僚に聞きます：
+
+> AI 履歴書最適化ツールを作ろうと思うんだけど、どう思う？
+> もし職種に合わせて自動で履歴書を修正できたら、使う？
+
+この時、相手はこう言う可能性が高いです：
+
+- 良さそう
+- 役に立ちそう
+- 無料なら試すかも
+
+これらの回答はニーズがどれほど強いかを判断するのにほとんど役立ちません。
+
+### より良い聞き方
+
+次のように変えられます：
+
+> 前回履歴書を修正したのはいつ？
+> その時なぜ修正したの？
+> どうやって修正したの？
+> どの手順が一番詰まった？
+> 誰かに見てもらったことはある？
+> 履歴書のためににお金や時間をかけたことはある？
+
+これらの質問を通じて、得られる情報は次のようなものかもしれません：
+
+- 多くの人は書けないのではなく、異なる職種に合わせて書き換える方法がわからない
+- 一番痛いのはレイアウトではなく、「どの経歴を書く価値があるか」がわからないこと
+- 怠けているのではなく、毎回履歴書を修正するのが精神的に消耗するから先延ばしにする
+- 先輩のアドバイス、テンプレートサイト、AI ツール、友達に見てもらうことでなんとか解決している
+
+この時点で、本当の問題にずっと近づいています。
+
+## 8. The Mom Test と JTBD をどう組み合わせて使うか
+
+もし JTBD が「ユーザーがどんな進捗を達成したいか」を見極めるのを助けるなら、The Mom Test はむしろこう教えていると言えます：
+
+**インタビューを通じて、この Job が本当に存在するかどうかを確認する方法。**
+
+この二つを繋げて使うことができます：
+
+1. まず JTBD で一つの Job を仮定する
+2. 次に The Mom Test の方法で、ユーザーの最近のリアルな体験について聞く
+3. この Job が本当に高頻度で、リアルで、優先してやる価値があるかを見る
+
+例えば、JTBD の仮定が次のようだとします：
+
+> インターンに応募する準備をする時、古い履歴書を職種に合ったバージョンに素早く書き換えて、できるだけ早く応募を完了したい。
+
+それなら The Mom Test スタイルの質問で検証できます：
+
+- 前回応募したのはいつ？
+- その時、どうやって履歴書を修正した？
+- どの部分が一番書きにくかった？
+- 修正後、どうやって十分かどうかを判断した？
+
+このように手法が繋がります：
+
+- JTBD はニーズ仮説の定義に役立つ
+- The Mom Test はインタビューによる仮説検証に役立つ
+
+## 9. 初心者がユーザーインタビューをする時に最も陥りやすい誤解
+
+### 9.1 インタビューをプロダクト紹介会にしてしまう
+
+自分のアイデアを話しすぎると、相手はリアルな状況を教えるのではなく、あなたに合わせ始めやすくなります。
+
+### 9.2 インタビュー相手が全部知り合い
+
+知り合いに聞くのも悪くありませんが、知り合いは励ましてくれやすいです。少なくともリアルなユーザーに近い人も混ぜる必要があり、自分を支持してくれる人だけに聞くべきではありません。
+
+### 9.3 早すぎる機能の追及
+
+問題をはっきりさせる前に、ボタン、画面、機能の詳細について聞き始めると、通常ソリューションに入るのが早すぎます。
+
+### 9.4 「使います」の一言を検証結果とみなす
+
+インタビューはせいぜい方向性の判断に役立ち、検証が完了したこととイコールではありません。本当の検証は、最終的にユーザーが実際のコスト（時間、切り替えコスト、トライアル行動、さらには有料）を払う意欲があるかどうかにかかっています。
+
+### 9.5 インタビュー終了後に整理しない
+
+聞き終わってそのままにしておくと、情報はすぐに曖昧な印象になってしまいます。できるだけ早く整理しましょう：
+
+- 高頻度で出現した問題
+- ユーザーの生の言葉の中の感情ワード
+- 現在の代替ソリューション
+- すでに払ったコスト
+- 自分の新しい判断
+
+## 10. そのままコピーして使える質問リスト
+
+すぐに始めたいなら、ここに汎用性の高い質問セットがあります。
+
+### オープニングの質問
+
+- 前回この問題に直面したのはいつですか？
+- その時具体的に何が起きましたか？
+
+### 行動の質問
+
+- その時どう対処しましたか？
+- なぜこの方法を選んだのですか？
+
+### コストの質問
+
+- この件には通常どれくらいの時間や労力がかかりますか？
+- この解決のためににお金を使ったことはありますか？
+
+### 代替ソリューションの質問
+
+- 他のツールや方法を試したことはありますか？
+- なぜ結局続けなかったのですか？
+
+### 締めくくりの質問
+
+- 将来同じ問題に直面したら、最も理想的な解決方法はどんなものだと思いますか？
+
+この締めくくりの質問は聞いてもいいですが、最後に置くのが良いでしょう。なぜなら、前半では事実をより多く手に入れる必要があり、願望ではないからです。
+
+## 11. まとめ
+
+The Mom Test の最も重要な貢献は、「よりうまく話す」スキルを与えることではなく、より冷静な判断方法を構築することです：
+
+- 他人のあなたのアイデアに対する褒め言葉を急いで信用しない
+- 「あれば使う」をリアルなニーズとみなさない
+- インタビューを自分への承認探しにしない
+
+本当に価値のあるインタビューは、これらのものにできるだけ戻るべきです：
+
+- ユーザーの最近のリアルな体験
+- 今どう対処しているか
+- すでにどんなコストを払っているか
+- どこで明らかに不快感を感じているか
+
+このように聞き始めると、得られる情報は時に聞こえは良くないかもしれませんが、通常はより役立ちます。
+プロダクトを作る時、**役に立つ真実は、聞こえの良い励ましよりも常に重要です。**
+
+<a id="mom-ai"></a>
+## [12. AI を活用してユーザーインタビューに役立てる方法](#top-mom)
+
+The Mom Test は本質的に「リアルな人と話す」手法なので、AI が実際のインタビューに代わることはありません。しかし、AI はインタビューの前、中、後でサポートするのに非常に適しており、特に初心者のハードルを下げるのに役立ちます。
+
+### 12.1 AI に「聞きづらい質問」を書き直させる
+
+「このアイデア、どう思う？」と聞くべきではないとわかっていても、口を開くとついこの言葉に戻ってしまう人は多いです。まず自分で準備した質問を AI に渡して、書き直してもらうことができます：
+
+```text
+以下はユーザーインタビューで聞こうとしている質問です：
+[質問を貼り付け]
+
+The Mom Test の原則に従って書き直してください：
+1. 意見型の質問を削除する
+2. 未来を仮定する質問を削除する
+3. 過去のリアルな行動、既存の代替ソリューション、すでに払ったコストを中心に質問を書き直す
+4. 最後にインタビューで直接使える 8〜10 の質問リストに整理する
+```
+
+初心者っぽい入力でも全く問題ありません：
+
+```text
+ユーザーに聞きたいことがあります：
+1. AI で履歴書を添削するツールを作ろうと思うんだけど、どう思う？
+2. 使う？
+3. お金払う？
+
+もっと良い聞き方に書き直して。
+```
+
+AI が出力する有用な回答は次のようになります：
+
+```text
+書き直した質問：
+
+1. 前回履歴書を修正したのはいつ？
+2. その時なぜ修正したの？
+3. どうやって修正したの？
+4. どの手順に一番時間がかかった？
+5. 誰かに見てもらったことはある？
+6. 履歴書の修正のためににお金や時間をかけたことはある？
+```
+
+このような出力は、元々「意見を聞く」質問を「リアルな行動を聞く」質問に直接変えてくれるので、非常に役立ちます。
+
+### 12.2 AI に異なる対象に合わせたインタビューのガイドラインを作成させる
+
+同じ方向性でも、異なるターゲット層に対してはインタビューの焦点が異なります。例えば学生、人事、フリーランサーでは関心事が全く違います。AI に異なる対象向けにそれぞれのガイドラインを作成させることができます：
+
+- 初心者ユーザーには、最近のリアルな体験を重点的に聞く
+- ヘビーユーザーには、代替ソリューションと痛みの強さを重点的に聞く
+- 有料ユーザーには、すでにコストを払ったかどうかを重点的に聞く
+
+こうすることで、実際に話す時にリズムができ、誰にでも同じ質問を繰り返すことがなくなります。
+
+例えば次のように入力できます：
+
+```text
+2種類の人に聞きます：
+1. 初めてインターンを探す大学生
+2. たくさんの人の履歴書を見てきた先輩
+
+それぞれインタビューガイドラインを 6 つずつの質問で作って。
+```
+
+AI は次のように出力するかもしれません：
+
+```text
+大学生向け：
+1. 前回インターンに応募したのはいつ？
+2. その時一番詰まったのはどの手順？
+3. 自分の履歴書が応募できるレベルかどうか、どうやって判断する？
+...
+
+先輩向け：
+1. 前回誰かの履歴書を見たのはいつ？
+2. よく見かける明らかな問題は何？
+3. 後輩が一番詰まるのはどの手順？
+...
+```
+
+このようにすれば、ゼロから質問を考える必要がなく、インタビューの準備がずっと楽になります。
+
+### 12.3 AI にインタビュー記録を整理させる
+
+インタビューが終わった後、最も起こりやすい問題は「情報がない」ことではなく、「情報が散らばっている」ことです。AI は断片的な会話を構造化されたメモに整理するのに非常に適しています：
+
+```text
+以下は 3 人のユーザーとのインタビュー記録です。
+The Mom Test の観点から整理してください：
+1. どの内容が事実で、どれがただの意見か
+2. ユーザーの最近のリアルな行動は何か
+3. 現在の代替ソリューションは何か
+4. ユーザーがすでに払った時間、お金、または労力コストは何か
+5. どの問題が繰り返し言及されたか
+6. どの発言がポジティブに聞こえるが、証拠が不十分か
+```
+
+このステップは特に価値があります。なぜなら、「良さそう」な内容と「本当に判断を支えられる」内容を分けるのに役立つからです。
+
+簡単な入力は次のようなものです：
+
+```text
+あるユーザーとのインタビュー記録です：
+
+- ツールがあれば試してみると言っていた
+- 先週履歴書の修正に一晩かかった
+- 今は主に友達に見てもらっている
+- 一番難しいのは、どこまで直せば「応募できる」と言えるかわからないこと
+
+意見と事実に分けてください。
+```
+
+AI は次のように出力するかもしれません：
+
+```text
+意見：
+- ツールがあれば試してみる
+
+事実：
+- 先週履歴書の修正に一晩かかった
+- 現在の代替ソリューションは友達に見てもらうこと
+- 一番の難点は「いつ応募できるレベルになるかわからない」
+
+ニーズ判断に使えるポイント：
+- この問題は最近実際に発生した
+- ユーザーはすでに明らかな時間コストを投入している
+- 現在のソリューションは他人に依存し、不安定
+```
+
+この出力は初心者に直感的に教えてくれます：どの言葉が判断に使えて、どの言葉は参考程度に聞いておけばいいか。
+
+### 12.4 AI に軽量なウェブ検索を先に行わせる
+
+インタビューを始める前に、AI に少し軽い外部調査をさせることができます。例えば：
+
+- 公開コミュニティで、皆が最近この問題にどう不満を漏らしているか
+- 既存ツールで最も批判されているのは何か
+- ユーザーがすでに似たような問題にお金を払っているかどうか
+- 市場にどんな代替ソリューションがすでに存在するか
+
+この種の情報はリアルなインタビューに代わるものではありませんが、どこから質問を始めればいいかをより早く見つけるのに役立ちます。
+
+例えば、簡単な入力は次のようなものです：
+
+```text
+調べてほしいことがあります：
+「大学生が履歴書を修正する時に最もよく不満を漏らすこと」
+最も一般的な不満を 5 つ、わかりやすい言葉でまとめて。
+```
+
+AI は次のように出力するかもしれません：
+
+```text
+よくある不満：
+
+1. 履歴書に何を書けばいいかわからない
+2. 職種ごとに書き換えるのが面倒
+3. いくら修正しても十分かどうかわからない
+4. 頼れる人に見てもらえない
+5. いつまでも準備が終わらないと感じて先延ばしにする
+```
+
+このような結果の価値は、インタビューの切り込み点を見つけやすくしてくれることにあります。
+
+### 12.5 AI に「インタビュー振り返りコーチ」をさせる
+
+インタビューが終わったばかりの記録を AI に渡して、改善点を指摘させることもできます：
+
+```text
+以下は私のユーザーインタビュー記録の一部です。
+The Mom Test の観点から振り返りを行ってください：
+1. どの質問が承認を求めるような聞き方だったか
+2. どの質問に明らかな誘導があったか
+3. どこでさらに事実について掘り下げられたか
+4. もう一度やるとしたら、この会話はどう聞けばよかったか
+```
+
+これは初心者に特に役立ちます。なぜなら、「私は証拠を集めているのか、それとも励ましを集めているのか」という感度をより早く構築できるからです。
+
+## 📚 課題
+
+上記の内容に基づいて、次の課題を完了してください：
+
+1. 最近やりたいプロダクトの方向性を一つ選び、本来聞こうとしていた「聞きづらい」質問を 5 つ書く
+2. この 5 つの質問を The Mom Test スタイルに合わせて書き直す
+3. 潜在ユーザー 3 人に聞き、「前回この問題に直面したのはいつですか」を少なくとも 1 回は聞き出す
+4. インタビュー終了後、4 種類の情報を整理する：リアルな行動、代替ソリューション、すでに払ったコスト、繰り返し出現した困難
+
+## さらに学ぶために
+
+- [The Mom Test 公式サイト](https://momtestbook.com/)
+- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
diff --git a/docs/ja-jp/stage-1/building-prototype/images b/docs/ja-jp/stage-1/building-prototype/images
new file mode 120000
index 0000000..a86d4ef
--- /dev/null
+++ b/docs/ja-jp/stage-1/building-prototype/images
@@ -0,0 +1 @@
+../../../zh-cn/stage-1/building-prototype/images
\ No newline at end of file
diff --git a/docs/ja-jp/stage-1/building-prototype/index.md b/docs/ja-jp/stage-1/building-prototype/index.md
new file mode 100644
index 0000000..02b417c
--- /dev/null
+++ b/docs/ja-jp/stage-1/building-prototype/index.md
@@ -0,0 +1,605 @@
+---
+title: 'プロトタイプを动手作る - 業務分析からマルチページプロダクトプロトタイプの実装まで'
+description: '業務分析からマルチページプロダクトプロトタイプの実装までの完全なループを体験。AI IDE を使って単一ページおよびマルチページアプリケーションを生成し、プロトタイプを美化・テストする方法を学びます。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>8 時間</strong>'
+const relatedArticles =
+  relatedArticlesMap['ja-jp/stage-1/building-prototype'] ?? []
+</script>
+
+# 初級三：プロトタイプを动手作る
+
+## 本章のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['業務分析', 'プロトタイプ設計', 'AI 支援プログラミング', 'マルチページアプリ']" coreOutput="1 つの EC素材ワークベンチプロトタイプ" expectedOutput="インタラクティブな Web プロトタイプ">
+
+前の章では、<strong>良いアイデアの見つけ方</strong>を学びました——ユーザーニーズから出発し、誰かがお金を払ってくれる方向を見つけること。しかし方向を見つけるのは第一歩にすぎず、<strong>本当にプロダクトマネージャーを試すのは：曖昧なニーズをどう使えるプロダクトにするかです。</strong>
+
+この章では、<strong>現実的な問題</strong>を解決します：上司から「AI で商品の出品から EC プラットフォームへの掲載までの効率を上げて」と一言投げかけられた時——どうやってそれを<strong>使えるプロダクトプロトタイプ</strong>にするか？
+
+前のヘビゲームや計算機とは異なり、<strong>リアルな業務では機能を勝手に考えることはできません</strong>：
+
+1. <strong>ペインポイントを明確にする</strong>：運営チームに話を聞き、曖昧な「効率アップ」から<strong>本当のペインポイント</strong>を掘り出す
+2. <strong>重点的に作る</strong>：多くの問題の中から<strong>一番痛いところ</strong>を先に解決し、一度に全部やろうとしない
+3. <strong>素早く検証する</strong>：AI IDE で先に<strong>単一ページプロトタイプ</strong>を作り、動いたらマルチページに拡張する
+4. <strong>使えるものを作る</strong>：最後に<strong>デモでき、操作できる EC素材ワークベンチ</strong>を納品する
+
+私たちは<strong>おもちゃからアプリへの転換</strong>を学び、<strong>共感と顧客のリアルなニーズを考える</strong>ことを学びます。
+
+</ChapterIntroduction>
+
+::: info ℹ️ 説明
+本記事には業務用語が含まれる場合があります。わからない場合は AI に説明を求めることができます。
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'ニーズ分析', description: '曖昧から具体へ' },
+      { title: '単一ページ検証', description: 'コア機能の実装' },
+      { title: 'マルチページ拡張', description: 'アプリ構造の完善' },
+      { title: '美化改善', description: 'ユーザー体験の向上' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. コードを書く前にニーズを確定する
+
+前のチュートリアルでは、AI IDE を使ってヘビゲームや各種ミニゲームを簡単に生成しましたが、これらはおもちゃプロジェクトにすぎず、仕事や生活には応用できません。もし AI 能力を本当に皆さんに役立てたいなら、生活や仕事のシーンと組み合わせた Vibe Coding プログラミングを行うべきです。
+
+前の章では<strong>誰かがお金を払ってくれる良いアイデアの見つけ方</strong>を学びましたが、方向を見つけるのは始まりにすぎません。本当にプロダクトを作る時、次のことに気づくでしょう：<strong>「何を作るか」を知っていることと、「どう作るか」を知っていることの間には、大きな溝があります。</strong>
+
+この溝こそが<strong>ニーズの具体化</strong>です。
+
+例えば、授業や個人のプロジェクトでは、最も簡単で実行可能な機能からプロダクトやアプリを作ることがよくあります：
+
+- 「カンバンを作って、タスクを一覧にして。」
+- 「絵を描くツールを作って。」
+- 「アンケートを収集できるソフトを作って。」
+
+これらは往々にして単なるツール、単一の機能モジュールであり、明確な業務問題とすら言えません。さらに重要なのは、<strong>これらのアイデアは往々にして「あなたが役に立つと思う」だけであり、「ユーザーが本当に必要としている」わけではない</strong>ことです。
+
+企業プロジェクトやスタートアッププロジェクトでは、プロダクトマネージャーやエンジニアは往々にしてより大きな業務の課題から出発します。例えば、次のようなシーンを想定できます：
+
+<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
+  <div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ 業務シーン：</div>
+  <div style="color: #606266; line-height: 1.6;">
+    <p>あなたはある店舗の EC 運営プロダクトマネージャーです。上司から曖昧だがプレッシャーの大きい課題を与えられました：</p>
+    <p style="font-style: italic; margin-top: 10px;">「今、公式アカウントはみんな AI で画像やコピーを作っているし、簡単そうに見える。うちでもやってくれ、TikTok EC で新商品を出品する時の効率を上げたい。」</p>
+  </div>
+</el-card>
+
+この時、あなたは「上司、また夢を見てますね！」と思うかもしれません。しかし実際の仕事では、このような曖昧な一言での決定は非常に一般的であり、週にタピオカミルクティーを頼む回数よりも多いことすらあります。したがって、立派な職場の働き手として（むしろ新興スタートアップの CEO になってほしいですが）、私たちは自作のツールから本当のプロダクトプロトタイプへの転換方法を学ばなければなりません。
+
+AI IDE を学んだので、このニーズは実はとてもシンプルだと考えるかもしれません。AI にこれに基づいてプロンプトを与え、Agent に投げれば万事解決じゃないかと：
+
+```
+私の要件 xxxx を参考に、
+EC素材ワークベンチを設計してください、
+商品説明、画像、動画などの素材の生成・管理機能を含む。
+```
+
+もし興奮してこのニーズをそのままプロトタイプに変換し、上司に送ったら——おめでとう、今四半期のボーナスはキャンセルです！
+
+**なぜこうなるのか？これこそが私たちが解決すべき核心的なペインポイントです：**
+
+以前、AI IDE を学んだ時は、ヘビゲーム、計算機のような**自分用のおもちゃプロジェクト**を作っていました——機能はシンプル、自分が何を欲しいか明確、作ったものは自分が使えばいい。しかし**リアルな業務シーンは全く異なります**：
+
+- **あなたはユーザーではない**：上司が求めているのは「効率アップ」だが、運営チームが毎日具体的にどう働き、どこでつまずいているかを知らない
+- **AI も業務を理解していない**：曖昧なニーズを AI に投げても、一般的な知識に基づいて推測するしかなく、できたものはそれっぽく見えて実際には全く使えない
+- **良いアイデア ≠ 良いプロダクト**：「AI 生成機能を追加する」のはかっこいいと思うかもしれないが、ユーザーは必要としていないかもしれないし、元の方法より面倒かもしれない
+
+**だからこそ、私たちは「アイデアからユーザー理解」を学ぶ必要があるのです。** あなたのアイデアが本当に他人の問題を解決して初めて、積極的に聞き、業務を深く理解して、本当に価値のあることができます。（良いアイデアは良い技術よりも重要なことすらあります）
+
+### 1.1 想像から現実へ：業務への質問を学ぶ
+
+::: info 💡 まず明確に：ニーズとは？業務とは？
+
+**ニーズ**とはユーザーが本当に求めているもので、彼らが直面している悩み、解決したい問題です。例えば「上司が商品の出品を早くしたいと言った」、これは一つのニーズです。
+
+**業務**とはユーザーが毎日実際にやっていること、彼らの働き方です。例えば EC 運営が毎日やること：商品出品、価格変更、画像作成、データ確認...これらはすべて業務です。
+
+**なぜ業務に関心を持つべきか？**
+業務を理解しなければ、作ったツールは「良さそうに見えるが誰も使わない」ものになりかねないからです。ユーザーが毎日どう働き、どこでつまずいているかを本当に理解して初めて、本当に役立つものが作れます。
+
+:::
+
+最もシンプルな視点から出発して、まず自分にいくつか質問できます：
+
+- 上司が言う「**効率を上げる**」は、具体的にどういう意味？**速く作る**こと？**コストを減らす**こと？**もっと売る**こと？
+- 今、商品はどうやって出品している？**どこがうまくいかない**？
+- 毎日何個の**新商品**を作る？各商品に何枚の**画像**、何文字の**テキスト**が必要？
+- 今の仕事の中で、**何が一番面倒**で、**一番やりたくない**？
+
+しかしこれらは推測の質問です。私たちは最前線の TikTok EC 担当者に直接「あなたたちの困難と関心事はどこにありますか？」と聞き、コミュニケーションを通じてより正確な答えを得る必要があります：
+
+::: info 📋 リアルな業務ヒアリング結果
+
+EC 運営をしている人に聞いたところ、次のような悩みがありました：
+
+**1. やることが多すぎて雑然としている**
+- 一人で複数の店舗を管理し、各店舗に多くの商品がある
+- 毎日忙しく行き来する：**新商品の出品**、**価格変更**、**画像作成**、**データ確認**、一つ終わらないうちに次の作業
+
+**2. コンテンツ作りは一回で完成するのではなく、試しながら作る**
+- まず**メーカー提供の画像**、**以前使った素材**や**ネットで見つけた参考画像**を使って、素早く商品を**出品**して試す
+- 少しのお金をかけてプロモーションをし、**誰かが買うか見る**
+- **売れている商品**だけ、真面目に画像を作り、詳細を書き、動画を撮る
+
+:::
+
+業務ヒアリングが終わると、私たちは情熱に駆られます。この時なら本当に業務に合った完璧なプロダクトプロトタイプが作れる！——また間違っています。「すべての要望を一度に満たそう」とすると、プロダクトは非常に大きくなり、コースの時間内に実装するのも難しくなります。したがって、さらに整理・絞り込みを行い、本当の核心的なペインポイントを見つける必要があります。
+
+### 1.2 発散から収束へ：業務の核心的なペインポイントと機能を特定する
+
+::: info 💡 なぜ「収束」が必要？「ペインポイント」とは？
+
+**問題は多いが、まずどれをやるか？**
+
+ユーザーはたくさんの問題を教えてくれるかもしれません：A も面倒、B も面倒、C も面倒...しかし、すべての問題を一度に解決しようとすると、最後は何も上手くできなくなる可能性があります。だから**収束**する必要——多くの問題の中から、**一番痛くて、一番急いでいて、一番解決できる**ものを先に選ぶのです。
+
+**ペインポイントとは？**
+ユーザーが**一番嫌で、一番時間がかかり、一番解決したい**という具体的な問題のこと。「役に立つと思う」ではなく、ユーザーが**毎日愚痴をこぼし、毎回やるのが苦痛**なことです。
+
+:::
+
+上記のヒアリングを通じて、運営が直面する問題がたくさんあることがわかりました：イベントのペースに邪魔される、複数店舗を管理する、出品/価格変更/画像作成/データ確認の間で忙しく行き来する...
+
+「これらすべての問題を全部解決する」としようとすると、最後は**大きくて包括的だが使いにくい**ツールになります。
+
+これらの問題を分類（AI に手伝ってもらうこともできます）すると、大まかに 3 種類あります：
+
+1. **ペースの問題**：いつ出品し、いつ価格を調整するか
+2. **効率の問題**：どうやって複数の店舗、複数の商品を同時に管理するか
+3. **コンテンツの問題**：どうやって商品画像とコピーを素早く作るか
+
+このコースにとって、最も適して先に解決するのは**第 3 種：コンテンツ作成の問題**です。しかし「素早くコンテンツを作る」はまだ少し抽象的なので、業務担当者に具体的にどこがつまずいているかをもう一度聞きます：
+
+::: info 📋 業務担当者の話：コンテンツ作りで最も苦痛な 2 つの場所
+
+**苦痛 1：バッチで画像とコピーを作るのが大変**
+- 素材はあちこちに散らばっている：クラウドストレージ、WeChat の履歴、プラットフォームの管理画面...**探すのが大変**
+- 一度にたくさん商品を出品する必要があり、**一つずつ丁寧に作る時間がなく**、適当に組み合わせるしかない
+- 要求は高くなく、**見られて、出品できればいい**、それほど精美でなくていい
+
+**苦痛 2：使い勝手の良いソリューションを保存して再利用できない**
+- 以前上手くいったタイトル、レイアウトを**次に使おうとしても見つからない**
+- ソリューションがチャット履歴、以前の商品リンクに散らばっている
+- 使いたい時に**ずっと探して、コピペして、長く修正する**必要がある
+- **お気に入り、管理、直接適用**できるツールがない
+
+:::
+
+上記の 2 つのペインポイントに基づいて、簡単なツールを作ります：**運営がバッチで画像とコピーを作るのを助け、良いソリューションを保存して次に直接使えるようにする**もの。
+
+それは 2 つのことだけを行います（AI に手伝ってもらって詳細化できます。業務フィードバックに基づいて常に機能を削減することを忘れないでください）：
+
+::: info 機能 1：EC 商品画像とコピーのバッチ生成
+
+**これは何をするものか？**
+システムに商品情報を入れると、自動的に EC プラットフォーム（TikTok、タオバオなど）で出品用の商品画像とテキストを生成します。
+
+**入力**
+| タイプ | 内容 |
+|------|------|
+| 商品情報 | 名前、カテゴリ、ブランド、素材、サイズ、カラーなど |
+| 商品画像 | 白背景画像またはシンプルなシーン画像 |
+| 参考画像 | 以前よく売れた商品のスクリーンショットや参考リンク |
+| インポート方法 | Excel バッチインポート、またはページ上で直接入力 |
+
+**出力（生成される EC 素材）**
+- **商品メイン画像**：テキスト付きのセールスポイント商品展示画像（ユーザーがスクロール時に最初に目にする画像）
+- **商品タイトル**：検索で見つかるキーワード組み合わせ
+- **セールスポイントコピー**：1〜2 文の買い手を引きつける言葉
+- すべて**少し修正すれば出品できる**完成品
+
+**効果**
+- 以前：各商品をゼロから画像とコピーを作成
+- 現在：商品のバッチをシステムに入れ、ドラフトを生成してから選んで少し修正するだけ
+
+:::
+
+::: info 機能 2：使い勝手の良いソリューションをテンプレートとして保存
+
+**入力**
+| タイプ | 内容 |
+|------|------|
+| セット | メイン画像 + タイトル + コピー |
+
+**出力**
+| 機能 | 説明 |
+|------|------|
+| 適用 | 次回新商品を作る時、テンプレートで自動生成 |
+| 修正 | タイトル、コピーを直接修正 |
+| 管理 | 名前を付け、タグ付け（例：「メンズバッグテンプレート」「プロモーションタイトル」）、探しやすくする |
+
+**効果**
+1. 新商品をインポート
+2. 選択：システムのデフォルト生成、または**保存済みテンプレートを使う**
+3. システムが自動的にテンプレートのスタイルを適用し、新しい画像とコピーを出力
+
+:::
+
+---
+
+**振り返り：私たちは何をしたか：**
+
+1. **まず質問した**：すぐに作り始めるのではなく、まず運営に「何が一番嫌ですか」と聞いた
+2. **ペインポイントを見つけた**：彼らが最も苦痛なのは「画像とコピーを作るのが大変」と「良いソリューションを保存できない」
+3. **範囲を絞り込んだ**：大きくて包括的なプラットフォームを作らず、「バッチ生成 + テンプレート保存」の 2 つの機能だけを作る
+
+**なぜこれが重要か？**
+
+多くの初心者のプロダクト作りの誤解は：機能が多ければ多いほど良い。しかしユーザーが本当に必要としているのは**最も痛い問題を解決すること**。たくさんの機能がどれも使いにくいより、1〜2 の機能が本当にユーザーに役立つ方が良い。
+
+**プロダクトと業務思考の核心：**
+- 自分で「ユーザーが何を必要としていると思うか」を考えない
+- ユーザーに「毎日何をしていますか？どこが一番苦痛ですか？」と聞く
+- 多くの問題から**一番痛くて、一番解決できるもの**に絞り込む
+- まず**最小限の使えるバージョン**を作り、ゆっくり反復する
+
+これがコードを書く前に明確にしておくべきこと。コードはただのツールであり、**ユーザーを理解し、問題を見つける**ことこそが第一歩です。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'ニーズ分析', description: '曖昧から具体へ' },
+      { title: '単一ページ検証', description: 'コア機能の実装' },
+      { title: 'マルチページ拡張', description: 'アプリ構造の完善' },
+      { title: '美化改善', description: 'ユーザー体験の向上' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. 10 分でプロトタイプを作る：AI IDE で「コア機能」を落とし込む
+
+::: info 💡 プログラミング Plan についての提案
+現在の IDE が十分賢くないと感じる、またはすぐに枠を使い切ってしまう場合は、**プログラミング Plan** を購入することができます。事前学習として[この記事](../../stage-2/backend/modern-cli/)を参照して Claude を使ってプログラミングを行ってください。
+:::
+
+考え過ぎるのも良くありません。過度な反省を抑えて、単一ページからプロトタイプの作成を始めましょう。
+
+### 2.1 第一歩：AI に普通の言葉でやりたいことを伝える
+
+最初から完璧なプロンプトを目指す必要はありません。最も自然な表現から始めましょう。同僚にニーズを説明するように、普通の言葉で AI に何を作りたいかを伝え、AI に手伝ってもらってより専門的な表現にブラッシュアップしてもらいましょう。
+
+#### 2.1.1 口頭から始める（初心者にお勧め）
+
+まず自分の言葉でアイデアを説明します。たとえ荒くても構いません：
+
+```
+EC 運営が自動的に商品のメイン画像とコピーを生成するツールを作りたい。
+運営は普段一つずつ手作業で画像とコピーを作っていて、とても面倒。
+私のアイデアは：商品情報をアップロードすると、システムが自動的にドラフトのバッチを生成し、
+運営は使いやすいものを選んで少し修正すれば使える。
+
+まず最もシンプルなバージョンを作る：1 つのページで、左側に商品情報を入力、
+右側に生成結果を表示。画像のアップロード、テキストの入力ができ、
+生成後にメイン画像のプレビューとコピーが表示される。
+```
+
+次に、このテキストを AI（ChatGPT、Claude など）に送り、拡張してもらいましょう。AI は通常、あなたが考慮していなかった詳細を補充し、アイデアをより明確に整理し、最後に AI IDE に適したプロンプトを生成してくれます。
+
+次のように AI に伝えられます：
+```
+上のアイデアを拡張して、明確な業務ロジックドキュメントに整理して、
+それから AI IDE（Cursor、Trae など）に送るのに適したプロンプトを生成して、
+単一ページアプリケーションのプロトタイプコードを生成するのに使う。
+```
+
+AI は構造化されたニーズと対応するプロンプトを返してくれます。自分でチェックして不要な機能を削除し、問題がなければコード生成に使いましょう。
+
+#### 2.1.2 拡張ステップをスキップ：整理済みの業務ドキュメントを直接 AI に渡す
+
+もし前の章で業務ロジックドキュメントをすでに整理しているなら、次の形式を使って直接 AI IDE に送り、AI に拡張してもらう中間ステップを省けます。ニーズがすでに明確で、すぐにコードを書き始めたい場合に適しています：
+
+```
+業務ロジックを参考に単一ページアプリケーションを実装して、コア機能の検証に使います。
+
+業務ロジックの参考：
+1. 運営の第一版の画像・テキストドラフトのバッチ生成：
+- **入力（直接アップロードとバッチインポート素材をサポート）：**
+  - 商品基本情報：名前、カテゴリ、ブランド、素材、サイズ、カラー、対象層など
+  - 商品画像：白背景画像 / シンプルなシーン画像
+  - 毎回の生成時に追加のヒット商品スクリーンショットや参考リンクのアップロードをサポート、参考物を許可
+  - Excel バッチインポート、またはページ上でオンライン入力 / アップロードをサポート
+  - ページ上で商品素材を素材ライブラリに保存するかどうかを指定でき、次回の利用に便利
+- **出力（直接出品または軽微な修正で出品可能な内容）：**
+  - 各商品につき「まともで、基本セールスポイントを含む」メイン画像ドラフト
+  - 「構造が合理的で、コアキーワードを含む」タイトル + 1〜2 文のセールスポイントコピー
+- **期待される使い方の変化：**
+  各バッチの商品をゼロから作成するのではなく、商品のバッチをシステムに入れて、システムが生成したドラフトから選別・微調整する。
+
+まず第一の機能を作り、第二の機能（テンプレートライブラリ）は後で追加する。
+```
+
+#### 2.1.3 プログラマーのやり方（応用）：AI に「プロンプトのプロンプト」を書いてもらう
+
+コード生成プロセスをより細かく制御したい場合、まず AI（ChatGPT など）にニーズに基づいて、AI IDE 専用のプロンプトを生成させることができます：
+
+```
+以下のアイデアに基づいて、coding Agent に送るコード記述用のプロンプトを作ってください。
+このプロンプトを使ってコードを生成する必要があります。
+
+[業務ロジックの説明をここに貼り付け]
+
+要件：
+1. プロンプトには明確なページレイアウトの説明を含める
+2. データ構造とインタラクションロジックを明確にする
+3. 技術スタックを指定する（例：React + Tailwind）
+4. 実装する必要のあるコア機能を列挙する
+```
+
+通常、AI は次のような構造化されたプロンプトを生成します：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png)
+
+このプロンプトを少し修正してから、AI IDE に送ってコードを生成させることができます。
+
+### 2.2 第二歩：AI IDE に直接コードを生成させる
+
+#### 2.2.1 準備：AI IDE の基本操作を理解する
+
+もし AI IDE（Cursor、Trae、Windsurf など）の基本使い方にまだ慣れていない場合、まず付録の[IDE 基礎チュートリアル](/ja-jp/appendix/2-development-tools/ide-basics/)を参照して、以下を理解することをお勧めします：
+- 新規プロジェクトの作成
+- AI Agent との対話
+- AI のコード生成プロセスの理解
+
+#### 2.2.2 コード生成を開始
+
+この時点で初期プロンプトが得られています。最初のプロンプトスタイルを例にして、AI にコードの生成を手伝ってもらいましょう。まずウィンドウと対応するフォルダーを作成し、フォルダーを開きます（お気に入りのフォルダーの場所で新規プロジェクトを初期化）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png)
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png)
+
+サイドバーで好きなモデル（gemini、gpt、glm、kimi、minimax などを推奨）を選択し、第一歩で得たプロンプトを入力：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png)
+
+生成をクリックすると、おなじみのプロセスが始まります。AI はプロンプトに基づいてプロジェクトのディレクトリ構造、必要なファイルを計画し、各ファイルの初期内容を与えます。
+
+::: warning ⚠️ 特別な注意：AI が確認を待って止まる可能性がある
+生成プロセス中、AI Agent は**あなたの入力や確認を待って止まる**ことがよくあります。例えば：
+- 次のステップに進むかどうかを聞く
+- 何かの操作を確認するためにエンターキーを押すよう促す
+- 何かの技術的な選択について聞く
+
+**AI が止まったら、まず対話画面をチェックして、あなたの返事を待っているかどうかを確認してください。** 多くの初心者は AI が思考中だと思っていますが、実際にはずっと前からあなたを待っています。積極的に返事をするかエンターキーを押せば、AI は作業を続けます。
+:::
+
+この時、エンターキーを押して情報を確認することを忘れないでください（さもないと待機状態に陥ります。一部の AI IDE ではこの問題は起こりません）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png)
+
+次のようなシーンに遭遇した場合、これはローカルでサービスがすでに起動していることを意味し、クリックしてスキップする必要があります。さもないとこの画面に留まり続けます（コード生成が完了しても何も表示されない場合、「このプロジェクトを起動して」と自発的に言う必要があります）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png)
+
+::: info 💡 シーンの説明
+**シーンの説明**：`npm create vite@latest` で React + TypeScript プロジェクト（easy-vibe-web）を作成した後、コンピュータが自動的にこの Web ページを「起動」し、すぐに効果を確認できるようにします。
+
+**ローカルサービス**：あなたのコンピュータが一時的に Web ページの展示ウィンドウを開いたものと理解でき、あなたのコンピュータ上でのみ実行され、他人はアクセスできません。
+
+**localhost（ローカルアドレス）**：`localhost` は「このコンピュータ自身」を意味し、ブラウザでアクセスすると、実際にはあなたのコンピュータで実行中の Web ページにアクセスしています。
+
+**ポート**：ポートは番号と理解でき、同じコンピュータ上で実行される異なる Web サービスを区別するために使われます。このプロジェクトが使用するのは 5174 です。
+
+**アクセスリンク `http://localhost:5174/`**：このアドレスは「このコンピュータのポート番号 5174 の Web ページにアクセスする」ことを意味し、ブラウザで開けば効果が確認できます。
+
+**今回のシーンの説明**：システムは元々 5173 を使おうとしましたが、この番号がすでに使用されていたため、自動的に 5174 に切り替えました。これは正常な動作です。
+
+**操作ガイド**：ブラウザを開き、アドレスバーに `http://localhost:5174/` と入力してエンターキーを押せば、現在のプロジェクトページが確認できます。
+:::
+
+すべて確認が完了したら、エージェントがしばらく実行されるのを待つと、次のような結果が得られます：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png)
+
+初步的な機能画面がすでにありますが、フロントエンドページがあまりにもシンプルです。この時、AI と直接対話して画面表示を最適化できます：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png)
+
+最適化後、より美しい画面が得られます：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png)
+
+自分のニーズに合わせて Web ページの機能を変更できます。スクリーンショットを添えて自由に質問できます。例えば：「バッチインポート機能はまだ不要だから、削除して」「左側の入力項目が多すぎるから、xxxxx だけ残して」。さらに、他の成熟した Web サイトを参考にすることもできます。例えば、Google のあるデザインプロダクトを直接「参考」にできます（好きな成熟した Web サイトのスクリーンショットを貼り付けることもできます）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png)
+
+最終的に得られる結果：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png)
+
+### 2.3 エラーが出たらどうする
+
+実際の操作では、エラーに遭遇するのは必然です。これは正常な現象であり、あなたが何か間違ったことをしたという意味ではありません。あなたはエラーを理解する必要はなく、「見た状況」を完全に AI に渡すだけでいいです。
+
+一般的な対処方法は 3 つだけです：
+
+- **方法 1：ページやターミナルのエラー**
+  ページが赤くなる、真っ白になる、またはターミナルに赤い文字がたくさん出る時は、スクリーンショットを撮るか、すべてのエラー情報をコピーして AI に送り、修正してもらう。
+
+- **方法 2：機能がおかしいがエラーは出ない**
+  例えばボタンが反応しない、データが表示されない、スタイルが崩れている場合、「今何が起きている + 本当はどうしたいか」を普通の言葉で説明し、必要に応じてスクリーンショットを添える。
+
+- **方法 3：問題があるかどうかわからない**
+  直接 AI に聞ける：「この機能に明らかな問題がないか、調整が必要かチェックして。」
+
+#### 2.3.1 初心者によくある質問
+
+- **Q：エラー情報がどこにあるかわからない**
+- A：一般的に、「赤い文字」をすべて見てください。ターミナル、コンソール、またはページ上で赤いプロンプトを見つけ、全選択コピーして AI に渡せばいいです。
+
+- **Q：AI が修正しても同じエラーが出る場合は？**
+- A：これはよくあることです。最新のエラー情報をスクリーンショットまたはコピーして AI に送り、前回の修正を基にさらに修正してもらう。
+
+- **Q：AI の修正案を完全に理解する必要がある？**
+- A：一度に全部理解する必要はありません。毎回 1〜2 のポイントに注目すれば、時間をかけて徐々にコードが理解できるようになります。英単語を蓄積するのと同じです。
+
+- **Q：何度も修正しても問題が解決しない場合は？**
+- A：次を試すことができます：
+  - IDE の「バージョンロールバック」機能を使い、エージェントの対話で巻き戻しボタンを見つけて、実行可能なバージョンに戻ってやり直す
+  - モデルを変えるか、プロンプトを調整し、現象やエラー情報をより具体的に説明する
+  - 「現在のコード + エラーログ + 期待される動作」をパッケージにして、一度に AI に送り、問題部分を全体としてリファクタリングしてもらう
+
+## 3. 単一ページからマルチページアプリケーションへの拡張
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'ニーズ分析', description: '曖昧から具体へ' },
+      { title: '単一ページ検証', description: 'コア機能の実装' },
+      { title: 'マルチページ拡張', description: 'アプリ構造の完善' },
+      { title: '美化改善', description: 'ユーザー体験の向上' }
+    ]" />
+  </ClientOnly>
+</div>
+
+コア機能のロジックが基本的に生成されたら、残りの部分のコンテンツを生成できます。例えば、この時点で設定や一部のボタンをクリックしても全く反応しません。
+
+AI に業務プロンプトのニーズに基づいてチェックさせ、未生成の部分を生成させたり、AI に未実装のページを直接補完させたりできます。特定のページを指定して AI に実装を補完させることもできます。ページがクリックでき、機能が正常にインタラクションできるまで続けます：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png)
+
+しばらく待つと、プログラムが以前の基礎の上に複数のページとインタラクティブ機能を補完しているのが見えます：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png)
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png)
+
+この時、あなたは各気になる機能とボタンを手動でクリックし、インタラクションが正常であることを確認するだけでいいです。インタラクションできない機能があれば、AI とコミュニケーションして修正してもらえます。
+
+## 4. プロトタイプを「それっぽく」する
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'ニーズ分析', description: '曖昧から具体へ' },
+      { title: '単一ページ検証', description: 'コア機能の実装' },
+      { title: 'マルチページ拡張', description: 'アプリ構造の完善' },
+      { title: '美化改善', description: 'ユーザー体験の向上' }
+    ]" />
+  </ClientOnly>
+</div>
+
+マルチページ構造ができたら、最後のステップはプロトタイプを「動く」状態から「使いやすくて、プロフェッショナルに見える」ものにすることです。これには、全プロセス（ユーザーフロー）を自分で体験し、実行できない部分を AI に修正してもらい、毎回リフレッシュ後にゼロから新規ユーザーとして全プロセスを歩いて期待通りの結果を得られるようにする必要があります。
+
+最初のニーズを振り返ってみましょう：
+
+```
+1. 運営の第一版の画像・テキストドラフトのバッチ生成：
+- **入力（直接アップロードとバッチインポート素材をサポート）：**
+  - 商品基本情報：名前、カテゴリ、ブランド、素材、サイズ、カラー、対象層など
+  - 商品画像：白背景画像 / シンプルなシーン画像
+  - 毎回の生成時に追加のヒット商品スクリーンショットや参考リンクのアップロードをサポート
+  - Excel バッチインポート、またはページ上でオンライン入力 / アップロードをサポート
+  - ページ上で商品素材を素材ライブラリに保存するかどうかを指定可能
+- **出力（直接出品または軽微な修正で出品可能な内容）：**
+  - 各商品につき「まともで、基本セールスポイントを含む」メイン画像ドラフト
+  - 「構造が合理的で、コアキーワードを含む」タイトル + 1〜2 文のセールスポイントコピー
+- **期待される使い方の変化：**
+  各バッチの商品をゼロから作成するのではなく、商品のバッチをシステムに入れて、システムが生成したドラフトから選別・微調整する。
+
+2. 使い勝手の良い出力を再利用可能なテンプレートライブラリとして保存：
+- **何が保存できるか？**
+  - 運営が「使いやすい」と感じた任意の出力をワンクリックでお気に入りに追加：
+    - 「メイン画像 + タイトル + セールスポイント」の完全な組み合わせ
+    - またはその一部だけ、例えばあるタイトル構造、あるセールスポイントコピー
+- **保存した後、何ができるか？**
+  - **再利用：**
+    - このお気に入りを使い、新商品パラメータのバッチを適用して、新しい画像・テキストドラフトを再生成
+    - または同じ商品で、このテンプレートに基づいて複数のバリエーションを生成し A/B テストを行う
+  - **編集：**
+    - タイトルコピー / セールスポイントコピーを直接修正
+    - 画像編集をサポートする場合、メイン画像のテキストやステッカー等の要素を微調整
+  - **管理：**
+    - お気に入りに名前を付け、タグ付け（例：「メンズバッグメイン画像テンプレート」「プロモーションタイトル構造」）、店舗別分類をサポートし、後の検索に便利に
+- **次回新商品出品時にどう使うか？**
+  - 新商品をインポート後、運営は選択できる：
+    - システムのデフォルトロジックで生成、または
+    - 「保存したテンプレートを使って生成」を指定
+  - システムは新商品データに基づき、テンプレートの構造とスタイルを自動的に適用し、新しいメイン画像 + タイトル + セールスポイントドラフトを出力
+```
+
+もし毎回テストする時に自分でデータを作成しなければならないなら、膨大な時間がかかります。この時、通常「テストデータ」という方法を使って処理します。次のように AI とコミュニケーションして、テスト用のクイックデータエントリを画面に生成させ、全機能が正常に実行できるか素早くテストできます：
+
+```
+このユーザー使用プロセスをテストする必要があり、完全に実行できることを確認したい。
+次のニーズに基づいてテストデータエントリを生成し、クリック後すぐに全プロセスが正常かどうかをテストできるようにしてください：
+1. 運営の第一版の画像・テキストドラフトのバッチ生成：
+- **入力（直接アップロードとバッチインポート素材をサポート）：**
+  - 商品基本情報：名前、カテゴリ、ブランド、素材、サイズ、カラー、対象層など
+  - 商品画像：白背景画像 / シンプルなシーン画像
+  - 毎回の生成時に追加のヒット商品スクリーンショットや参考リンクのアップロードをサポート
+  - Excel バッチインポート、またはページ上でオンライン入力 / アップロードをサポート
+  - ページ上で商品素材を素材ライブラリに保存するかどうかを指定可能
+- **出力（直接出品または軽微な修正で出品可能な内容）：**
+  - 各商品につき「まともで、基本セールスポイントを含む」メイン画像ドラフト
+  - 「構造が合理的で、コアキーワードを含む」タイトル + 1〜2 文のセールスポイントコピー
+- **期待される使い方の変化：**
+  各バッチの商品をゼロから作成するのではなく、商品のバッチをシステムに入れて、システムが生成したドラフトから選別・微調整する。
+```
+
+簡単に結果が得られます（データが少なすぎる場合は、AI に複数のテスト用ケースを生成させることができます）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png)
+
+クリックして結果を得ます：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png)
+
+この時、直接結果が得られますが、「仮の生成プロセス」があるわけではありません。リアルな生成プロセスを模擬したい場合、AI と直接対話できます：「クリックした後、しばらく経ってから結果を返すリアルな生成プロセスを模擬してください。」
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png)
+
+生成機能が実行できることを確認したら、テンプレートライブラリの機能が正常であることも確認する必要があります。ページの生成カードから、テンプレートライブラリの保存機能が実装されていないことがわかります。この時、AI とさらに深く対話する必要があります：「要件 [ここに上記の 2. の内容を貼り付け] が正常であることを確認してください。ある結果をクリックして対応するテンプレートを保存でき、開いたら生成パラメータが見えるように」
+
+生成は往々にして一回では完成せず、時にはスクリーンショットで修正が必要です：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png)
+
+最終的に期待通りの結果が得られます：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png)
+
+手動でのニーズフロー体験に加えて、AI に直接ニーズチェックをさせることもできます。例えば：
+
+- 「最初のニーズと照合して、現在のアプリケーションがすべてのコア機能をカバーしているかチェックして。」
+- 「機能リストを作って、どれが完成、どれが未実装または体験不足かをマークして。」
+
+AI は通常チェックリストを出力してくれます。結果に基づいて改善を続けるかどうかを検討できます。繰り返し修正を経て、比較的完璧なプロトタイプ結果が得られます。
+
+## 5. 📚 課題：あなた独自の TikTok EC ワークベンチを複製する
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 チャレンジタスク：EC素材ワークベンチを複製</div>
+  </template>
+
+  <p>
+    この章のプロンプトと内容を参考に、完全なループを一回完了してください：
+  </p>
+
+  <ul>
+    <li>
+      <strong>完全ループの実践</strong>
+      <ul>
+        <li>業務整理プロンプト生成 → 単一ページプロトタイプ生成 → マルチページプロトタイプ生成</li>
+      </ul>
+    </li>
+    <li>
+      <strong>成果の共有</strong>
+      <ul>
+        <li>プログラムのスクリーンショットを撮って皆に見せる</li>
+      </ul>
+    </li>
+    <li>
+      <strong>思考問題</strong>
+      <ul>
+        <li>次の「大規模言語モデル（LLM）とテキストから画像生成能力の統合」に向けて、前もって考えておく：あなたのワークベンチに、「AI コピー生成 / 画像生成 / スクリプト生成」などの能力をどう組み込めるか？</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## 次のステップ
+
+次のセクションでは、このコンテンツ制作ワークベンチを基礎として、具体的な AI 能力（テキストからテキスト、画像からテキスト、テキストから画像）を統合します。例えば：
+
+- あるコンテンツタスクに対して、自動的にコピードラフトと複数のタイトル候補を生成
+- タスクの説明に基づいて自動的に画像ドラフトを生成（テキストから画像）
+- 過去のコンテンツタスクを自動分類・要約し、次のキャンペーンの企画に役立てる
+
+<RelatedArticlesSection
+  title="学習を続ける"
+  description="「AI 能力の統合 → 完全プロジェクトループ → デザインエンジニアリング」の順序で続けることをお勧めします。"
+  :items="relatedArticles"
+/>
diff --git a/docs/ja-jp/stage-1/complete-project-practice/index.md b/docs/ja-jp/stage-1/complete-project-practice/index.md
new file mode 100644
index 0000000..7b2e08a
--- /dev/null
+++ b/docs/ja-jp/stage-1/complete-project-practice/index.md
@@ -0,0 +1,301 @@
+---
+title: '完全プロジェクト実践 - Demo からプロダクト級プロトタイプへ'
+description: 'Demo 段階から脱却し、プロダクトチェーンの完善、リアルな模擬データの構築、フィードバックによる迅速な反復を学び、最終的に展示・操作可能な完全な AI プロダクトプロトタイプを完成させます。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>3 日</strong>'
+const relatedArticles =
+  relatedArticlesMap['ja-jp/stage-1/complete-project-practice'] ?? []
+</script>
+
+# 初級五：完全プロジェクト実践
+
+## 本章のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['プロダクト思考', '模擬データ', 'インタラクション改善', 'LocalStorage']" coreOutput="1 つの機能完備な AI プロダクトプロトタイプ" expectedOutput="完全なチェーンとリアルなデータを含む Web アプリ">
+
+前の章で AI 能力を組み込み、Demo は動くようになりましたが、本当の「プロダクト」からは<strong>まだ遠い</strong>です：ページをリロードすると<strong>データが消える</strong>、エラーが出ると<strong>真っ白</strong>、リストには「テストデータ 1、テストデータ 2」しかなく、ユーザーが間違って操作しても<strong>元に戻せない</strong>...
+
+この章では、これらの<strong>穴をすべて埋めます</strong>。<strong>プロダクトの完全なチェーンを補完</strong>し、AI で<strong>リアルな業務データ</strong>を生成してダミーデータを置き換え、<strong>エラー処理とユーザーフィードバック</strong>を追加し、最後に<strong>人に見せられる、デモンストレーションできる</strong>完全なプロトタイプに仕上げます。
+
+これは初級段階の<strong>最後の章</strong>です。この一歩を終えれば、「全くプログラミングできない」から「<strong>AI プロダクトプロトタイプを独力で作れる</strong>」への脱皮が完了します。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'チェーン完善', description: '単一機能から完全なループへ' },
+      { title: '魂を注入', description: 'リアルな業務データの模擬' },
+      { title: 'フィードバック反復', description: 'リアルなフィードバックに基づく改善' },
+      { title: '最終課題', description: 'あなたの卒業制作' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. "Happy Path" を拒否：コアチェーンの完善
+
+多くの初心者がプロトタイプを作る時、往々にして「Happy Path」（最も理想的なルート）しか作りません：ユーザーがクリック → API が正常に応答 → 結果を表示。
+しかし現実世界では、物事はそう順調にはいきません。プロトタイプを本当のプロダクトのように見せるために、次のいくつかの「見えない」部分を考慮する必要があります。
+
+### 1.1 「待ち状態」と「フィードバック」の追加
+
+ユーザーが「コピー生成」をクリックした時、AI が応答するまでに数秒かかることがあります。画面に何の反応もなければ、ユーザーはプログラムが壊れたと思います。
+**AI IDE に Loading 状態を追加してもらいましょう：**
+
+> プロンプト例：
+> 「生成ボタンをクリックした時、ボタンを『生成中...』に変更してクリック不可にし、同時に右側の領域にローディングアニメーションを表示してください。API が結果を返した後にのみ、元の状態に戻してください。」
+
+### 1.2 「失敗」と「異常」の処理
+
+API Key が期限切れになる可能性もあり、ネットワークが切断される可能性もあります。
+**AI IDE にエラー処理を追加してもらいましょう：**
+
+> プロンプト例：
+> 「API リクエストが失敗した場合、コンソールに直接エラーを出すのではなく、ページ上部に赤いプロンプトボックス（Toast）を表示し、ユーザーに『生成に失敗しました。後でもう一度お試しください』と伝え、ユーザーが再度生成をクリックできるようにしてください。」
+
+### 1.3 会話履歴の永続化
+
+AI とのやり取りの中で、会話内容を保存し、ユーザーが履歴を振り返り、以前の交流を続けられるようにする必要があります。現段階ではデータベースを導入せず、次のような軽量ソリューションを選択できます：
+
+**ストレージソリューションの選択：**
+
+| ソリューション | 適用シーン | 特徴 |
+| --- | --- | --- |
+| **LocalStorage** | 純フロントエンドプロジェクト、ユーザーデータをブラウザに保存 | 実装がシンプル、リロードしても消失しない、デバイス間の同期不可 |
+| **JSON ファイル** | ローカルプロトタイプ、データをファイル形式で保存 | 構造が明確、デバッグしやすい、手動編集可能 |
+| **TXT ファイル** | 最もシンプルなソリューション、テキスト内容を素早く記録 | フォーマットが自由、互換性が高い |
+
+**会話内容の例：**
+保存された会話履歴には通常、次の内容が含まれます：
+
+```json
+[
+  {
+    "role": "user",
+    "content": "BluetoothイヤホンのTikTok販売コピーを生成して",
+    "timestamp": "2026-01-20 10:30:00"
+  },
+  {
+    "role": "assistant",
+    "content": "【Bluetoothイヤホンおすすめコピー】\n\n🎧 レイテンシフリー、没入型リスニング体験\n\nみんな！このBluetoothイヤホン本当に最高👇\n\n✅ 40dBアクティブノイズキャンセリング、一瞬で音楽の世界へ\n✅ 30時間の超長バッテリー、1週間の通勤で充電不要\n✅ 通話クリアさは対面と同じ、地下鉄の騒音でも会話可能\n✅ 半インイヤー設計、長時間着用でも痛くない、圧迫感なし\n\n💰 期間限定キャンペーン、下のリンクをクリックしてゲット！",
+    "timestamp": "2026-01-20 10:30:05"
+  }
+]
+```
+
+**実装プロンプト：**
+
+> 「会話履歴の保存機能を実装してください。ユーザーと AI の会話記録を JSON ファイルとして保存（または LocalStorage を使用）することをサポートしてください。ページに入るたびに自動的に履歴会話を読み込み、個別の会話記録の表示と削除をサポートしてください。」
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'チェーン完善', description: '単一機能から完全なループへ' },
+      { title: '魂を注入', description: 'リアルな業務データの模擬' },
+      { title: 'フィードバック反復', description: 'リアルなフィードバックに基づく改善' },
+      { title: '最終課題', description: 'あなたの卒業制作' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. 魂を注入：リアルデータの模擬（Mock Data）
+
+空っぽのページは人を感動させられません。想像してみてください、「EC素材ワークベンチ」を他人に見せようとして、履歴記録が空っぽ、あるいは「test / test / test」の一行しかない場合。
+デモンストレーション効果を最高にするために、リアルなデータを「偽造」して、プロトタイプが半年間運営された本当のプロダクトのように見せる必要があります。
+
+### 2.1 AI にデータ構造を設計させる
+
+各フィールドが何と呼ばれるべきか（例えば `name` か `title` か）を自分で考える必要はありません。これは完全に AI に任せられます。
+
+あなたは **業務シーン** を AI に伝えるだけでいいです：
+
+> **プロンプト例：**
+> 「**TikTok EC素材ワークベンチ**のプロトタイプを作っています。
+> 『商品タスク』を記述するための JSON データ構造を設計してください。
+> このタスクには：商品の基本情報（名前、カテゴリ）、入力素材（画像リンク）、および AI が生成した結果（タイトル、コピー、ポスター画像）が含まれるべきです。
+> JSON の例を直接ください。」
+
+AI はあなたの説明に基づいて、`productName`、`generatedContent` のようなフィールドを自動的に考えてくれます。
+
+### 2.2 AI に「リアルな」データを批量生成させる
+
+データ構造ができたら、次は AI に「穴埋め」をさせ、リアルに見えるデータを批量生成させます。
+
+**プロンプトのコツ：**
+AI に「データを生成して」とだけ伝えるのではなく、インターンにタスクを割り当てるように、**業務背景**と**内容要件**を伝える必要があります：
+
+- **業務背景**：AI に私たちが「TikTok EC」をやっていることを伝え、商品タイトルは目を引くものに（例えば「スタイルアップ神器」「学生必須」）、コピーは口語体にする
+- **画像要件**：プロトタイプを美しく見せるため、画像はモノクロのプレースホルダーではなく、ランダムなカラフルな風景画や実物写真が望ましい
+
+> **プロンプト例：**
+> 「先ほど設計した構造に基づいて、10 件のリアルな模擬データを生成してください。
+> （注意：必ずしも JSON 形式である必要はありません。フロントエンドを書いているなら JavaScript 配列として生成させてもいいし、Python を使っているなら List として生成させても構いません。）
+>
+> **業務シーンの要件**：
+>
+> 1. ここは総合百貨店で、商品は「レディース」「デジタル」「コスメ」の 3 カテゴリにまたがると仮定する。
+> 2. **生成されたタイトルとコピーは非常に「TikTok風」にする**：例えばタイトルには Emoji (🔥, ✨) を含め、コピーは「最高」「実測おすすめ」といった口調にする。
+> 3. **画像フィールド**：`https://picsum.photos/seed/{random_id}/300/400` という形式を統一して使用し、各画像が異なるようにする。」
+
+**生成された Mock Data の例：**
+
+```javascript
+export const mockProductTasks = [
+  {
+    id: 'task_001',
+    name: '夏用フレンチレトロ花柄ワンピース',
+    status: 'completed',
+    input: {
+      category: 'レディース',
+      features: ['ウエストマーク', 'スタイルアップ', 'エレガント'],
+      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
+    },
+    output: {
+      generatedTitle: '✨誰が着ても可愛い！このフレンチ花柄ワンピース本当に最高🔥',
+      generatedCopy:
+        'みんな！このワンピース本当にスタイルアップ効果抜群！ウエストマークが最高で、着るとすぐウエストが見えます。生地も通気性があって、夏に着ても全く蒸れません。デートやお買い物にピッタリ！👗',
+      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
+    },
+    createdAt: '2026-01-20T10:00:00Z'
+  },
+  {
+    id: 'task_002',
+    name: '超強ノイズキャンセリング Bluetooth イヤホン Pro',
+    status: 'completed',
+    input: {
+      category: 'デジタル',
+      features: ['ノイズキャンセリング', '超長バッテリー', '低レイテンシ'],
+      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
+    },
+    output: {
+      generatedTitle: '🎧 ついに見つけた！このイヤホンのノイズキャンセリングすごすぎ！🔇',
+      generatedCopy:
+        'これを着けると、世界が一瞬で静かになります。音質も最高で、音楽を聴くとまるで現場にいるみたい。バッテリーも申し分なく、1回の充電で1週間使えます！学生必須アイテム！',
+      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
+    },
+    createdAt: '2026-01-21T14:30:00Z'
+  }
+  // ... その他のデータ
+]
+```
+
+### 2.3 （応用）LocalStorage を使って「擬似的な追加・削除・更新」を実装
+
+先ほど生成した「模擬データ」をただ見るだけでなく、削除も修正もでき、さらに新しく生成したタスクがページをリロードしても残るようにしたい場合は、`LocalStorage` と組み合わせることができます。
+
+> **プロンプト例：**
+> 「データストレージ機能を実装してください。
+>
+> 1. `localStorage` から優先的にデータを読み込む。
+> 2. `localStorage` が空の場合、先ほど生成した Mock データで初期化し、それらを `localStorage` に保存する。
+> 3. 同時に `addProductTask` と `deleteProductTask` 関数を書き、毎回の操作後に `localStorage` を同期して更新する。」
+
+このステップにより、プロトタイプは「記憶」を持ち、ユーザー体験はほぼ本物のプロダクトと変わりません。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'チェーン完善', description: '単一機能から完全なループへ' },
+      { title: '魂を注入', description: 'リアルな業務データの模擬' },
+      { title: 'フィードバック反復', description: 'リアルなフィードバックに基づく改善' },
+      { title: '最終課題', description: 'あなたの卒業制作' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. フィードバックの収集と迅速な反復
+
+部屋に閉じこもっていては良いプロダクトは作れません。今、あなたのプロトタイプは「コア機能」+「完全なチェーン」+「デモデータ」を備えています。いよいよ他人に見せましょう。
+
+### 3.1 誰にテストしてもらう？どうテストする？
+
+- **友達や同僚に頼む**：技術を理解している必要はなく、ちょっと使ってみてもらうだけでOK
+- **誘導せずに観察する**：「ここをクリックして」と言うのではなく、彼らがどこをクリックするかを見る。ボタンが見つからなければ、デザインに問題があるということ
+- **「オズの魔法使い」法**：AI がまだ接続できていなければ、裏側（またはデータベース）で手動でデータを修正して AI の戻り値を模擬し、ユーザーがこの機能を必要としているかを先に検証する
+
+### 3.2 バグと不満への対応
+
+- **レイアウト崩れ**：異なる画面サイズで崩れる可能性がある
+  - **アクション**：スクリーンショットを撮って AI IDE に送る → 「この画面幅で崩れています。修正してください。」
+- **操作が煩わしい**：「このプロセスは複雑すぎる」
+  - **アクション**：提案を AI IDE に伝える → 「ユーザーがアップロードしてから生成するまで遅すぎると感じています。ワンクリック生成に変更できませんか？」
+- **新機能の要望**：「この機能があればいいのに」
+  - **アクション**：コアかどうかを評価し、コアなら AI に簡易版を迅速に実装させる
+
+**覚えておいてください：この段階では、AI はあなたの最良の修正アシスタントです。問題を見つけるのはあなたの役割で、コードの修正は AI に任せましょう。**
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'チェーン完善', description: '単一機能から完全なループへ' },
+      { title: '魂を注入', description: 'リアルな業務データの模擬' },
+      { title: 'フィードバック反復', description: 'リアルなフィードバックに基づく改善' },
+      { title: '最終課題', description: 'あなたの卒業制作' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. 🎓 ステージ最終課題：あなたの「卒業制作」を完成させよう
+
+おめでとう！あなたは「ニーズ」から「プロトタイプ」、そして「AI 統合」までの全プロセスを歩み終えました。いよいよ最終成果を披露する時です。
+
+**今回の最終課題は「EC素材ワークベンチ」に限定されません。** 自分の興味や業界のバックグラウンドと組み合わせて、唯一無二の AI プロダクトプロトタイプを作り上げる必要があります。
+
+### テーマ選びと要件
+
+**[産業多分類シーン方向リファレンス](../appendix-industry-scenarios/index.md)** から最も近いシーンを一つ選ぶか、自分のアイデアに基づいて全く新しいシーンを構想してください。
+
+**プロジェクトは前の章で学んだすべての内容を総合的に活用する必要があります：**
+
+1.  **プロトタイプの構築**：フロントエンド技術を使って美しく使いやすいインターフェースを構築する
+2.  **ニーズの制御**：大いに全てを求めるのではなく、コア機能の論理的なループを完成させる
+3.  **API の統合**：リアルな AI モデル（LLM/VLM など）を統合し、アプリケーションに真のインテリジェンスを付与する
+4.  **遊べるアプリケーションを実装する**：静的ページではなく、データフローとインタラクションフィードバックのある動的アプリケーション
+
+### 課題の成果物
+
+最終的に以下の 2 つを提出する必要があります：
+
+1.  **完全なプロトタイプアプリケーション**：デプロイされてオンラインで動作、またはローカルで実行可能で、完全な使用チェーンを備える
+2.  **30 秒のデモ動画**：アプリケーションのシーンを簡単に紹介し、コア機能の実際の操作をデモンストレーションする動画
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 最終チャレンジリスト</div>
+  </template>
+
+  <p>
+    これは Stage 1 の最後の戦いです。以下のリストに従って作品をチェックしてください：
+  </p>
+
+  <div style="font-weight: bold; margin-bottom: 10px;">コア機能セルフチェック</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>シーンが明確</strong>：特定の業界またはアプリケーションシーンを選択している</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>論理的ループ</strong>：コアプロセスが通っており、Happy Path だけではない</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>AI 駆動</strong>：大規模モデル API をリアルに呼び出しており、事前設定された返答ではない</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>体験が完全</strong>：Loading、エラー処理、模擬データを含む</label></li>
+  </ul>
+
+  <div style="font-weight: bold; margin: 20px 0 10px;">成果物の準備</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>プロトタイプアプリケーション</strong>：コードが完成し実行可能</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>デモ動画</strong>：30 秒程度でコアのハイライトを明確に展示</label></li>
+  </ul>
+</el-card>
+
+## 次のステップ
+
+最終課題が完了したら、あなたは「AI アプリケーションプロトタイプを独力で開発する」能力を備えています。
+次の Stage 2 では、より複雑なフルスタック開発に深く入り込み、このプロトタイプを、データベースがあり、ユーザーシステムがある、本当にオンラインできる商業レベルのアプリケーションにする方法を学びます。
+
+次のステージでお会いしましょう！
+
+<RelatedArticlesSection
+  title="さらにステップアップ"
+  description="Stage 1 完了おめでとう、以下の章がエンジニアリング開発に進むのに役立ちます。"
+  :items="relatedArticles"
+/>
diff --git a/docs/ja-jp/stage-1/finding-great-idea/index.md b/docs/ja-jp/stage-1/finding-great-idea/index.md
new file mode 100644
index 0000000..137df46
--- /dev/null
+++ b/docs/ja-jp/stage-1/finding-great-idea/index.md
@@ -0,0 +1,1085 @@
+---
+title: '良いアイデアを見つける - ユーザーニーズから支払いにつなげる'
+description: '日常生活のペインポイントからビジネスチャンスを見つけ、ニーズ分析の体系的な方法論を習得し、普通のアイデアをユーザーが支払いたいと思うプロダクトコンセプトに磨き上げる方法を学びます。'
+---
+
+<script setup>
+const duration = '約 <strong>3 時間</strong>'
+</script>
+
+# 初級二：良いアイデアを見つける
+
+## 本章のガイド
+
+<ChapterIntroduction :duration="duration" :tags="['ニーズ発掘', 'プロダクト思考', 'ユーザー分析', 'ビジネスモデル']" coreOutput="3つの検証済みプロダクトコンセプト" expectedOutput="実行可能な起業/プロダクトの方向性">
+
+前の章では AI IDE を使ってものを作る方法を学びましたが、もっと根本的な問題があります：<strong>何を作るのか？</strong>
+
+多くの人は最初から「AI ツールを作ろう」「ソーシャルプラットフォームを作ろう」と考えがちですが、結果的に誰も使わないものができあがります。問題はどこにあるのでしょうか？<strong>本当のニーズを見つけられていない</strong>のです。
+
+さらに残酷な現実があります：<strong>多くのプロダクトは問題を解決していても、ユーザーは支払ってくれない。</strong>
+
+この章では、小明の物語を通じて、作る価値のあるプロダクトの方向性を見つける方法を学びます。
+
+この章を学び終えると、<strong>アイデア発見の完全な方法論</strong>と、3つの検証済みプロダクトコンセプトが手に入ります。
+
+</ChapterIntroduction>
+
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Step 1', description: '判断基準を確立' },
+      { title: 'Step 2', description: '日常のペインポイントを発掘' },
+      { title: 'Step 3', description: 'ターゲット層を横分割' },
+      { title: 'Step 4', description: 'シーンを縦に深掘り' },
+      { title: 'Step 5', description: 'ニーズの真偽を検証' },
+      { title: 'Step 6', description: 'プロダクトコンセプトを磨く' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Step 1：判断基準の確立 —— どんなニーズにユーザーは支払うのか
+
+::: warning なぜこの章が重要なのか？
+
+「これは Vibe Coding を教えるコースでしょ？なぜ『ニーズを見つける』を先に学ぶの？直接コードを書けばいいじゃない」と思う人もいるかもしれません。
+
+確かに、市販のプログラミングコースの多くはプロジェクト作りから始めます：Todo List、電卓、個人ブログ…これらのプロジェクトは確かに文法やツールの習熟に役立ちますが、問題があります。
+
+<strong>方向が間違っていると、深入りすればするほど間違いが大きくなる。</strong>
+
+想像してみてください：
+- 2週間かけて「カレンダー管理システム」を作ったが、市場にはすでに100個のより良いものがある
+- 「カロリー写真計算」を作ったが、ユーザーは一度使っただけでアンインストールした
+- 「個人家計簿」を作ったが、自分すら使うのを面倒がる
+
+これらのプロジェクトを履歴書に書けますか？おそらく無理でしょう。<strong>それらは本当の問題を解決していないし、本当の価値も生み出していない</strong>からです。
+
+さらに残酷ですが：時間を投資して学ぶのなら、より良い結果を目指すべきではありませんか？
+
+Vibe Coding でアイデアを素早くプロダクトにできるのなら、<strong>作る価値のあるアイデアを見つける方法</strong>こそ学ぶべきです。実戦に最も近い方法で自分を鍛えるべきです——「練習プロジェクト」ではなく、「人が支払いたいと思うプロダクト」を作るのです。
+
+だからこそ、まず「良いアイデアを見つける」ことを学びます。
+
+---
+
+**筆者の個人的な考えとして**、時間は非常に貴重です。<strong>やるからには最高を追求しよう</strong>。でなければ、なぜ遊ばないのでしょうか？責任として、筆者も全力であなたをサポートします。
+
+誰もがあなたを信じてくれなくても、筆者はあなたが最高を尽くせることを固く信じています。vibecoding でプロダクトを作ることを選んだなら、自分がどこまで行けるか試してみてください！
+
+:::
+
+
+---
+
+## 序章：インディーズ開発者・小明の物語
+
+小明はプログラマーとして3年働いています。ある日、ふと「フィットネス APP を作ろうかな」と思いました。ユーザーのフィットネス計画を立て、トレーニングデータを記録するものです。このアイデアに彼は興奮し、やっと作るべきプロジェクトを見つけたと思いました。
+
+その後の1年間、小明はすべての业余時間を注ぎ込みました。機能が充実した APP を作りました——コースモジュール、チェックインシステム、コミュニティ機能、データ分析、必要なものはすべてありました。デザインもなかなか良く、少なくとも彼自身は満足していました。
+
+リリースの日、小明は期待に胸を膨らませていました。宣伝にたくさんのお金を使い、初月に5万人がダウンロードしました。順調なスタートに見えますよね？
+
+しかし、すぐに問題が起きました。ユーザーはダウンロードしたものの、一度使っただけでアンインストールし、7日間のリテンションはわずか5%でした。有料機能を作りましたが、支払うユーザーはほとんどいませんでした。さらに彼を落胆させたのは、Keep、薄荷健康、FitTime といった成熟したプロダクトの方が機能も充実しており、コンテンツも優れていること。ユーザーが彼の APP に乗り換える理由がないのです。
+
+1年間で、小明は20万の赤字を出しました。
+
+彼はパソコンの前に座り、惨めなバックエンドデータを見つめながら、心の中に一つの問いしかありませんでした：私の APP はちゃんと作ったはずなのに、なぜ誰も使わないのか？しかも支払ってくれないのか？
+
+
+
+小明の失敗は、技術力の問題でも、プロダクトの質の問題でもありませんでした。正直に言えば、彼の APP は機能もデザインもなかなか良かったのです。
+
+<strong>問題はスタート地点にあった。</strong>
+
+彼は一度も最も基本的な問いを投げかけていませんでした：ユーザーは本当に必要としているのか？
+
+彼はフィットネス APP 市場が大きいこと、Keep の評価額が何十億もあることを見て、これは良いチャンスだと思いました。しかし、いくつかのことは明確にしていませんでした：ユーザーはなぜ別のフィットネス APP が必要なのか？Keep と比べて、差別化は何なのか？ユーザーはこれに支払う気があるのか？
+
+<strong>方向が間違っていると、深入りすればするほど間違いが大きくなる。</strong> 彼は1年間かけて間違った方向をますます完璧にしていき、成功からは遠ざかっていきました。
+
+
+::: tip この章でやること
+
+この章では、小明の振り返りを一緒にやりましょう。問題がどこにあったのかを明らかにし、本当に人が支払いたいと思うプロダクトの方向性を一緒に見つけます。
+
+3つのステップで進めます：
+
+**第1幕：本当のニーズを見つける** —— どんなニーズにユーザーが支払うのかを明らかにする
+
+**第2幕：良いアイデアを掘り起こす** —— 普通のアイデアから価値あるビジネスチャンスを発掘する方法を学ぶ
+
+**第3幕：AI 対話で磨く** —— AI を使ってアイデアを実行可能なプロダクト案にする
+
+:::
+
+---
+
+## 第1幕：本当のニーズを見つける
+
+小明は落胆したが、諦めませんでした。彼は一つの問いを考え始めました：一体どんなニーズに、ユーザーは支払うのか？
+
+### 小明の困惑：なぜユーザーは支払わないのか？
+
+彼は自分の APP を使ったことがある何人かの友人に、本当の感想を聞きに行きました。
+
+友人 A はこう言いました：「あなたの APP は悪くないけど、もう Keep を使ってるから、乗り換える理由がないよ。」
+
+友人 B はこう言いました：「毎回のトレーニングを記録させるのは面倒すぎる。やる気にならないよ。」
+
+友人 C はもっと直接的でした：「無料機能で十分だし、なぜ有料にする必要があるの？」
+
+これらの回答で、小明は突然問題がどこにあるのか気づきました。
+
+<strong>最初の問題：ユーザーは乗り換えない。既存のソリューションで十分だから。</strong> Keep などの成熟したプロダクトは機能が充実しており、ユーザーの習慣もすでに形成されている。移行コストが高いのです。似たようなプロダクトを作っても、ユーザーが乗り換える理由がありません。
+
+<strong>2番目の問題：ユーザーは習慣を変えたがらない。</strong> トレーニング記録はユーザーにとって面倒すぎます。3つ以上の習慣を変える必要があるプロダクトなら、おそらく失敗します。
+
+<strong>3番目の問題：無料の代替品が多すぎる。</strong> 機能が汎用的すぎて独自の価値がなく、ユーザーに支払う理由が見つかりません。
+
+### 本当のニーズとは？
+
+小明はユーザーが支払う成功プロダクトを研究し始めました。そして共通点を発見しました：これらのプロダクトが解決しているのは「役に立つと思う」ニーズではなく、ユーザーが支払い、行動を変え、不便に耐える覚悟があるニーズです。
+
+言い換えれば、<strong>本当のニーズはユーザーの足で投票されるものであり、プロダクトマネージャーの頭の中で思いつくものではない。</strong>
+
+### ケーススタディ：ユーザーが支払うプロダクト
+
+小明はいくつかの成功事例を研究し、一体どんなペインポイントを掴んでいるのかを明らかにしようとしました。
+
+#### 美菜網：小規模飲食店のオーナーにぐっすり眠らせる
+
+表面的には、美菜網がやっていることは簡単です：飲食店の買い物を代行する。しかし、よく考えてみると、なぜ飲食店のオーナーはこれを使うのでしょうか？
+
+小規模飲食店のオーナーは毎日午前4時に起きて卸売市場に行かなければならず、非常に過酷で、よく騙されます。美菜網がやっているのは、単なる「EC で野菜を売る」ではなく、サプライチェーン全体を再構築し、小規模飲食店のオーナーにぐっすり眠れるようにすることです。
+
+ペインポイントが痛いほど、支払意欲は強くなります。節約できた時間と労力は、節約できた食材代よりも価値があるのです。
+
+#### 小紅書（RED）：選択の悩みを解決する
+
+表面的には、小紅書は「海外ショッピングの心得を共有する」サービスです。しかし、ユーザーはなぜ時間をかけてノートを読むのでしょうか？
+
+膨大な商品の中で、ユーザーは何が買う価値があって何がそうでないのか分かりません。信頼できる人に選別してもらい、時間を節約し、失敗を避けたいのです。
+
+小紅書が実は解決しているのは2つの深いペインポイントです：選択の困難と信頼の欠如。ユーザーは「時間の節約」と「失敗の回避」に支払う意思があり、だからこそ小紅書は成長できたのです。
+
+---
+
+これらのケースを見て、小明は重要な発見をしました。
+
+ユーザーが支払うのは決して「機能」ではなく、「恐怖の解消」と「不安の取り除き」です。美菜網は小規模飲食店オーナーの深夜の仕入れの過酷さに対する恐怖を解決し、小紅書はユーザーの買い間違いに対する恐怖を解決しています。
+
+<strong>恐怖が支払いを駆動し、不安が行動を駆動する。</strong>
+
+### ニーズの3層：ペインポイント、デライトポイント、イッチポイント
+
+小明はさらに研究を進め、ユーザーのニーズは3つのタイプに分けられることを発見しました。
+
+::: tip ペインポイント（Pain Point）—— 恐怖駆動
+
+**本質：** ユーザーが現在経験している、苦痛、不安、不便を感じる問題。解決しないと非常に不快で、生存や安全にすら脅威を与える。
+
+**例：**
+- 糖尿病患者が炭水化物をどれくらい摂ると血糖値が急上昇するか分からない（恐怖：健康への脅威）
+- 小規模飲食店オーナーが午前4時に起きて卸売市場に行く（恐怖：生存の過酷さ）
+
+**重要：** ユーザーは支払う意思がある。なぜなら解決しないと「痛い」から。
+
+:::
+
+::: tip デライトポイント（Delight Point）—— 即時の満足
+
+**本質：** ユーザーのニーズが即座に満たされ、即時の喜びを生む。
+
+**例：**
+- 出前が30分で届く（空腹の即時満足）
+- ワンクリックで美しい PPT を生成（時短の快感）
+
+**重要：** ユーザーを「気持ちよく」させることはリテンションの鍵だが、単独の支払いポイントとしては弱い。
+:::
+
+::: tip イッチポイント（Itch Point）—— 仮想の自己
+
+**本質：** ユーザーがより良く、よりクールに、より洗練されたいと思うが、必須ではない。満たされれば嬉しいが、満たされなくても問題ない。
+
+**例：**
+- 毎日の水分摂取を記録する（想像上の自律生活）
+- AI で写真にアートフィルターをかける（想像上のアートセンス）
+
+**重要：** ユーザーが「イッチポイント」に支払う意思は弱い。解決しなくても問題ないから。
+
+:::
+
+正しい優先順位はどうあるべきか？良いアドバイスは：ペインポイント > デライトポイント > イッチポイント
+
+なぜか？
+
+1. **ペインポイントは生存ニーズ：** 解決しないと死ぬ（または非常に苦しい）。ユーザーは支払わざるを得ない。「鎮痛剤」。
+2. **デライトポイントは即時報酬：** ユーザーを気持ちよくさせれば、来る。「ヘロイン」（肯定的な依存メカニズム）。
+3. **イッチポイントは欲望の充足：** あってもなくてもいい。最も削られやすい。「ビタミン」や「奢侈品」。
+
+**重要なインサイト：** 多くのプロダクトマネージャーが犯す間違いは：ペインポイントの方法でイッチポイントのプロダクトを売ろうとすること。
+
+例：「水分記録で健康になれる」——確かに健康的だが、記録しなくても不健康にはならない。これはイッチポイントをペインポイントとして包装しており、ユーザーは納得しません。
+
+### 本当のニーズを検証する5ステップ法
+
+小明は考えました：<strong>アイデアが浮かんだとき、どうやってそれが投資する価値があるかを素早く判断するのか？</strong>
+
+彼はプロダクトマネージャーがよく使う5ステップ判断法を学びました（詳細は付録A参照）：
+
+1. **ステップ1：実際のユーザーと直接話し、現在のやり方を知る**
+
+   10人のターゲットユーザーを見つける。「今この問題をどう解決していますか？」と聞く。ユーザーがすでに何らかの方法を使っているなら、問題は確かに存在する。「解決する必要はない」と言うなら、本当のニーズではないかもしれない。
+
+2. **ステップ2：ユーザーの既存の代替手段を分析し、自分の優位性を見つける**
+
+   ユーザーは他のプロダクト、Excel、記憶力、または我慢して解決しているかもしれない。これらのソリューションにどのような欠点があるかを明らかにする必要がある。プロダクトがそれらより大幅に良くないと、ユーザーは乗り換えてくれない。
+
+3. **ステップ3：ユーザーがプロダクトにお金を払う意思があるかテストする**
+
+   プリセールスや前金を取る。前金を払うユーザーの割合を統計する（早く稼げるほどニーズが正しい）：
+   - 10%超：ニーズは本物、投資する価値がある
+   - 5%〜10%：ニーズは存在するが、磨きが必要
+   - 5%未満：ニーズは成立しない可能性が高い
+
+4. **ステップ4：この市場がどれくらい大きいか、儲けられるかを試算する**
+
+   3つの数字を計算する：ターゲットユーザー総数 × 支払意欲 × 客単価。掛け合わせて市場規模を求める。市場が小さすぎる場合、作る価値がないかもしれない。
+
+5. **ステップ5：プロダクトにどのような参入障壁があるか、模倣を防ぐ方法を考える**
+
+   次のバリアを考える：技術的難易度、ネットワーク効果、ブランド、コスト優位性。これらが長期的な競争力の維持に役立つ。
+
+**この幕のまとめ：小明の学び**
+
+1. **本当のニーズの基準**
+   - 最も重要な基準はユーザーが支払う意思があること。
+   - ユーザーが行動を変える意思がある。
+   - ソリューションがない場合、ユーザーの損失は大きい。
+
+2. **偽のニーズを避ける**
+   - イッチポイントはペインポイントではなく、本当のニーズとして扱えない。
+   - 市場が小さすぎると、ビジネスモデルを支えられない。
+   - ソリューションが問題より複雑だと、ユーザーは諦める。
+
+3. **優先順位**
+   - 本当の優先順位は：ペインポイント > デライトポイント > イッチポイント。
+
+**この幕のアウトプット**
+- 本当のニーズとは何かを理解した。
+- ニーズの3層分類（ペインポイント、デライトポイント、イッチポイント）を習得した。
+- 5ステップ判断法でニーズの真偽を検証する方法を学んだ。
+
+---
+
+## 第2幕：良いアイデアを掘り起こす
+
+小明は今、本当のニーズが何かを知りました。しかし、どこから始めればいいのかまだ分かりません。空からニーズを思いつくわけにはいきません。
+
+彼は自分が最もよく知っていること——周りの人と出来事——から始めることにしました。
+
+### 自分から出発：小明の姉
+
+小明は彼の姉を思い出しました。姉は出産したばかりで、運動する時間がないと文句を言い、お腹の贅肉が減らず、全体にイライラしていました。
+
+ある日、小明は姉に聞きました：「今どうやって運動の問題を解決してるの？」
+
+姉はため息をついて言いました：「Keep でやってるけど、あの運動は産後の体に合わない。やったら腰がもっと痛くなる。ジムに行く？子どもの面倒を見てくれる人がいない。パーソナルトレーナー？1回300〜500元もする、高すぎる。自分で適当にやる？怪我が怖い。」
+
+小明はこれを聞いて、これが彼が探していた本当のニーズかもしれないと思いました。
+
+姉の悩みは実は非常に具体的です：時間が細切れで、赤ちゃんのお世話が必要で、まとまった運動時間がない；体に制限があり、腹直筋離開、骨盤底筋の緩みがあり、激しい運動ができない；心理的に不安で、体型が崩れ、夫に嫌われるのではないかと心配し、社会的なコンプレックスがある；情報が乱雑で、ネット上に情報が多すぎ、産後に適した運動が何か分からない；孤独感もあり、自分の状況を理解してくれる人がいない。
+
+これらはすべて本当のペインポイントであり、「あったらいいな」程度のイッチポイントではありません。
+
+---
+
+### 横分割：異なるユーザー層のニーズ
+
+小明は「フィットネス APP」というアイデアが広すぎることに気づきました。彼は「フィットネスをしたい人」全員にサービスを提供しようとしていましたが、全員のニーズが違うのです。
+
+彼は横分割を行い、「フィットネスをしたい人」をいくつかのカテゴリーに分けました（詳細な方法は付録B参照）：
+
+筋トレ・増量したい人はタンパク質摂取を正確に計算する必要があり、手動記録は面倒で、支払意欲が高く、効率を追求する。糖尿病患者は炭水化物を厳格にコントロールする必要があるが、外食では見積もりが難しく、これは必須ニーズで、支払意欲も高く、リピート率も高い。産後ママは体型を戻したいが計算する時間がなく、シンプルなプランが必要で、時間に敏感で、ワンストップサービスが必要。外食派は毎日外食でカロリーを把握できず、これは高頻度シーンだが、支払意欲は中程度。大学院受験生は効率的な学習ツールが必要だが何を使えばいいか分からず、これは必須ニーズだが客単価が低い。
+
+小明は「産後ママ」という層を選びました。なぜか？
+
+第一に、彼自身がユーザー——姉が産後ママであり、この層のペインポイントを自然に理解している。第二に、ペインポイントが痛い——産後回復の不安は本物で、「あったらいいな」のイッチポイントではない。第三に、支払意欲が強い——ママは体型を戻すためにお金を使う意思がある。第四に、競争が比較的激しくない——市場に産後ママ専用のプロダクトがない。
+
+::: tip プロダクトマネージャーの分割ロジック
+
+なぜユーザー層の分割がそんなに重要なのか？
+
+汎用ツールでは勝てないから。大手プラットフォームがすでに「汎用」市場を占めており、機能で勝ることは難しい。細分化された層のニーズはより痛い——産後ママのフィットネスニーズは必須だが、一般のフィットネス愛好者は「あればいい」程度。小さなグループに良いサービスを提供する方が、全員に媚びるより口コミを築きやすい。細分化された層のペインポイントはより具体的で、ソリューションに支払う意思が強い。
+
+:::
+
+---
+
+### 縦深掘り：完全なユーザーシーン
+
+ターゲット層を見つけた後、小明は「産後フィットネス」という単一機能にとどまりませんでした。ユーザーの完全なシーンをより深く理解しようとしました（詳細な方法は付録C参照）。
+
+彼は姉の1日の生活を観察しました。
+
+朝6時、赤ちゃんが寝たばかりで、姉には30分の空き時間がある。運動したいが、赤ちゃんを起こさないか心配で、安全な運動が何か分からない。
+
+午前10時、赤ちゃんを抱いてあやしている間、腰が痛い。修復運動をしたいが、手が空かない。
+
+午後3時、赤ちゃんが寝て、運動したい。でも体が疲れていて、まだ運動できるか分からない。
+
+夜8時、やっと時間があるが、不安でいっぱい。鏡の中の自分を見て、人生が終わったと思い、以前の写真を見てこっそり泣いている。
+
+小明は、姉のペインポイントは「フィットネスコースがない」ことではなく、「産後回復への恐怖と不安」であることを発見しました。
+
+---
+
+::: info プロダクトマネージャーのシーン思考
+
+多くの人はペインポイント＝機能的ニーズだと思っていますが、違います。ペインポイントはシーンにおける感情に支払意欲を合わせたものです。
+
+産後ママが鏡の中の崩れた体型を見るとき、本当のペインポイントは「フィットネスの仕方が分からない」ことではなく、恐怖——体の回復が悪く後遺症が残るのではないかという恐怖；不安——鏡の中の自分を見て人生が終わったと思う；無力感——どこから始めればいいか分からず、指導者もいない；孤独——他の人は簡単に出産したのに、自分はこんなに回復に時間がかかる。
+
+良いプロダクトデザインは、感情を解決するものであり、機能だけを解決するものではありません。感情の背後にあるのが、ユーザーが支払う原動力です。
+
+:::
+
+---
+
+### 価値の再構築：「フィットネス APP」から「産後ママ回復アシスタント」へ
+
+以上の分析に基づき、小明はこのプロダクトを再設計しました。
+
+::: tip 再構築後のプロダクトコンセプト：「産後ママ回復アシスタント」
+
+**コアポジション：** フィットネスツールではなく、産後ママの「専属リハビリコーチ＋心理サポーター」
+
+**コア機能：**
+1. **細切れトレーニング：**
+   - 毎回10〜15分だけ
+   - 赤ちゃんが寝ている間でもできる
+   - 「赤ちゃんを抱いたままでもできる」エクササイズも提供
+
+2. **産後専用コース：**
+   - 産後の時期別に分級（0〜3ヶ月、3〜6ヶ月、6ヶ月以上）
+   - 腹直筋離開、骨盤底筋リハビリの専門トレーニング
+   - 各エクササイズに「産後の注意事項」表示
+
+3. **AI 姿勢補正：**
+   - スマホカメラで動作を認識
+   - リアルタイムで「膝が曲がりすぎ」「背筋を伸ばして」を提示
+   - 間違った動作によるケガを防止
+
+4. **心理サポートコミュニティ：**
+   - 産後ママだけのプライベートコミュニティ
+   - 回復の進捗を共有、励まし合う
+   - 専門の心理カウンセラーが常駐
+
+5. **パーソナライズドプラン：**
+   - 出産方法（自然分娩/帝王切開）、体の状態に応じてカスタマイズ
+   - 授乳期の特別なニーズを考慮
+
+**ビジネスモデル：**
+- 基礎コースは無料
+- プレミアムコース：99元/月（AI 姿勢補正、専用プラン付き）
+- 個別パーソナルトレーニング：299元/月（オンライン指導）
+- コミュニティメンバーシップ：199元/年（心理サポート、専門家の Q&A 付き）
+
+**競争障壁：**
+- 専門性：産後リハビリ機関と提携、医学的バックグラウンド
+- コミュニティの粘着力：産後ママの感情的つながりが強い
+- データ蓄積：ユーザーの身体データが増えるほど、プランがより正確に
+
+**市場規模：**
+- 中国の毎年の新生児数：約1000万人
+- 産後リハビリ市場：約500億元
+- 目標：産後ママの1%をサービス = 10万人
+- ARPU（ユーザーあたり平均収入）：500元/年
+- 潜在的収入：5000万元/年
+
+:::
+
+元のアイデアと再構築後のコンセプトを比較する：
+
+| 次元 | 元のアイデア | 再構築後 |
+|------|---------|--------|
+| ターゲットユーザー | 全フィットネス層（広く浅い） | 産後ママ（精密） |
+| 解決するペインポイント | トレーニング記録（イッチポイント） | 産後回復の不安（ペインポイント） |
+| 競争障壁 | 技術（模倣されやすい） | 専門性＋コミュニティ＋データ |
+| 支払意欲 | 低い（無料代替が多い） | 高い（必須ニーズ＋感情的価値） |
+| 拡張の余地 | 限定的 | 妊娠期、妊活期にも拡張可能 |
+
+**これが「一つの機能」から「人が支払うプロダクト」への進化です。**
+
+---
+
+### さらに多くの例：普通のアイデアから良いアイデアへ
+
+小明はこの方法がとても使えると思いました。同じ方法で他の例も分析し、この方法が汎用的かどうか確認しようとしました（詳細なケースは付録D参照）。
+
+#### 例1：「カロリー測定」から「糖尿病安心食」へ
+
+普通のアイデアは写真で食べ物のカロリーを認識し、ダイエット中の人の食事管理を支援する。しかし、薄荷健康、MyFitnessPal などの成熟したプロダクトがすでに市場にある。
+
+小明は横分割を行い、糖尿病患者という層が面白いことに気づきました：彼らは炭水化物を厳格にコントロールする必要があるが、外食では見積もりが難しい。縦深掘りで彼らのシーンを見ると：食事前はこの料理が食べられるか分からず、血糖値の急上昇を心配する；食事中はリアルタイムで「すでにどれくらい炭水化物を摂ったか」を知る必要がある；食後は血糖値の変化を記録し、食事との関係を見る必要がある。
+
+再構築後のプロダクトは「糖尿病安心食」で、糖尿病患者の「食事安全アシスタント」としてポジショニングされた。
+
+---
+
+#### 例2：「ニュースアシスタント」から「投資リサーチ情報官」へ
+
+普通のアイデアは各プラットフォームのニュースを集約し、一つ一つ開く手間を省く。しかし、今日の頭条、テンセントニュースなどはすでに上手くやっている。
+
+小明は横分割を行い、金融アナリストという層に特別なニーズがあることを発見した：特定の業界の動向を追跡する必要があるが、情報が分散している。縦深掘りでシーンを見ると：朝は米国株のオーバーナイト動向、為替変動をチェック；午前は保有銘柄の公告、業界ニュースを追跡；午後は潜在的な投資対象を研究し、大量の業界情報が必要。
+
+再構築後のプロダクトは「投資リサーチ情報官」で、金融従事者の「情報レーダーと意思決定アシスタント」としてポジショニングされた。
+
+---
+
+#### 例3：「キャンパス中古プラットフォーム」から「卒業品整理アシスタント」へ
+
+普通のアイデアはキャンパス内のフリマプラットフォーム。しかし、閑魚、転転などはすでに上手くやっている。
+
+小明は横分割を行い、卒業生という層に特別なニーズがあることを発見した：モノが多すぎて、一つ一つ売るのは面倒。縦深掘りでシーンを見ると：卒業の1週間前には離校しなければならず、ゆっくり売る時間がない；誰が自分のモノを必要としているか分からない；交渉、受け渡し、受取が面倒すぎる。
+
+再構築後のプロダクトは「卒業品整理アシスタント」で、卒業生の「離校資産マネージャー」としてポジショニングされた。
+
+---
+
+### この幕のまとめ：小明の学び
+
+第2幕を通じて、小明は以下のことを理解しました：
+
+**1. 自分から出発する**
+- 自分自身がユーザーであり、この層のペインポイントを自然に理解している
+- 趣味は最高のスタート地点、情熱は最高の駆動力
+
+**2. 横分割でユーザー層を絞る**
+- 「全員」にサービスするのではなく、「最もペインポイントが痛い層」を見つける
+- 細分化すればするほどチャンスがあり、ユーザーの支払意欲も強くなる
+
+**3. 縦深掘りでシーンを掘る**
+- 完全なユーザージャーニーを描写する：使用前、使用中、使用後
+- 感情のタッチポイントを見つける：恐怖、不安、無力感、孤独……
+
+**4. 価値の再構築**
+- 「機能」から「ソリューション」へアップグレード
+- 「ツール」から「アシスタント/マネージャー/パートナー」へアップグレード
+
+---
+
+📦 **この幕のアウトプット：**
+- 精密なターゲットユーザー（産後ママ）を見つけた
+- ユーザーの完全なシーンと本当の感情を理解した
+- プロダクトコンセプトを再構築し、明確な差別化ポジションを確立した
+
+---
+
+## 第3幕：AI 対話で磨く
+
+小明は今、明確なプロダクトの方向性を持っています：産後ママ回復アシスタント。しかし、具体的にどうすればいいのか、どこから始めればいいのか、技術的な実現難度はどの程度か、まだ分かりません。
+
+彼は AI を使ってプロダクトコンセプトを磨き、アイデアを実行可能な計画にすることにしました。
+
+### 第1ラウンド：元のアイデアを投げる
+
+小明は自分のアイデアを AI に伝えました：「産後ママ回復アシスタント APP を作りたい。産後ママの体型回復をサポートしたい。でも技術的な実現難度が心配で、特に AI 姿勢補正の機能。一人でできるのかな？」
+
+---
+
+### 第2ラウンド：AI が MVP 計画を支援
+
+AI はこう返答しました：「良い質問ですね！MVP（Minimum Viable Product）の計画を立てましょう。」
+
+AI は3つのフェーズに分けることを提案しました。第1フェーズは1〜2ヶ月で、目標はニーズ検証。APP は作らず、まず WeChat ミニプログラムで産後専用コース（動画）とチェックインコミュニティのみを提供。手動で姿勢指導を行い、ユーザーが動画をアップロードし、コーチが返信する。目標は産後ママが支払う意思があるかどうかを検証すること。
+
+第2フェーズは3〜6ヶ月で、第1フェーズの検証が成功したらコア機能を追加。AI 姿勢補正を開発、既存の SDK（百度人体認識など）を使用可能。パーソナライズドプランを追加、コミュニティ機能を最適化。
+
+第3フェーズは6〜12ヶ月で、スケール。独立 APP を開発、産後リハビリ機関と提携、妊娠期、妊活期に拡張。
+
+技術的な実現について、AI は百度、テンセントの API など既存の AI 能力を使うことを提案。ゼロから開発する必要はなく、コストを削減できる。初期は手動＋AI ハイブリッドモードで、段階的に移行。
+
+スタートコストについて、ミニプログラム開発は1〜2万元（外注）または自分で AI IDE で開発、コンテンツ制作は産後リハビリコーチと提携、プロモーションはママコミュニティ、小紅書から開始。
+
+検証指標は初月100人のユーザー、10%の課金コンバージョン率。達成できればニーズは本物で継続投資；達成できなければ方向を調整。
+
+---
+
+### 第3ラウンド：小明が懸念を提示
+
+小明は考えた後、さらに聞きました：「コンテンツ制作の問題が心配です。産後リハビリコースは専門的な指導が必要で、私には医学的バックグラウンドがない。コースの品質をどう保証するの？」
+
+---
+
+### 第4ラウンド：AI が解決策を提供
+
+AI はこう返答しました：「これは多くの技術系起業家の懸念ですが、解決策があります。」
+
+解決策1は専門家との提携。産後リハビリコーチ、病院の栄養科医と提携し、あなたは技術とプロダクトを提供、彼らは専門コンテンツを提供。収益分配モデルを採用可能。
+
+解決策2は既存の良質コンテンツの統合。初期は公開されている産後リハビリ動画（YouTube、Bilibili など）を使用。自分でコンテンツ審査と整理を行い、後からオリジナルコンテンツを作成。
+
+解決策3はユーザー生成コンテンツ。経験豊富なママに自分の回復方法を共有してもらい、コミュニティ投票で良質コンテンツをスクリーニングし、段階的にコンテンツエコシステムを構築。
+
+AI は解決策1を先に使うことを推奨。具体的な手順は：2〜3人の産後リハビリコーチを見つけ、提携を交渉。あなたはプロダクトを開発し、彼らはコースを提供。収益分配で、あなたが70%、彼らが30%。これでコンテンツ品質を保証しつつ、コストを削減。初期のコンテンツ制作費は0元、分配モデルで、開発時間とプロモーションコストだけを投資すれば良い。
+
+**私の推奨：まず解決策1を使う**
+
+具体的な手順：
+1. 2〜3人の産後リハビリコーチを見つける
+2. 提携を交渉：あなたがプロダクトを開発、彼らがコースを提供
+3. 収益分配：あなたが70%、彼らが30%
+4. これでコンテンツ品質を保証しつつ、コストを削減
+
+**初期コスト：**
+- コース制作：0元（分配モデル）
+- あなたは開発時間とプロモーションコストだけを投資
+
+:::
+
+---
+
+### 第5ラウンド：小明がプロモーションについて質問
+
+小明には最後の懸念がありました：「プロモーションコストは高くない？産後ママという層にどうやってリーチするの？」
+
+---
+
+### 第6ラウンド：AI がプロモーション戦略を提供
+
+AI はこう返答しました：「産後ママという層は実は見つけやすく、プロモーションコストは低く抑えられます。」
+
+最も推奨されるのは小紅書。「産後回復」「腹直筋離開」などのキーワードで検索し、関連するブロガーを見つけて、DM で提携。「1ヶ月無料体験」でプロモーションを交換し、コストはほぼ0。
+
+次にママコミュニティ。WeChat グループ、QQ グループを検索し、「産後回復経験シェア」の名目で参加し、役立つコンテンツを共有。直接広告せず、段階的に信頼を構築。
+
+さらに病院の産婦人科と提携し、無料の産後回復指導を提供。病院でチラシを配り、コストは印刷費数百元。またはマタニティ・ベビー用品店と提携し、プロモーション資料を配置。ベビー用品購入時に体験カードを贈り、コストは体験カードの制作費。
+
+検証指標は：初月100人のユーザー、10人の有料ユーザー（10% コンバージョン率）、総プロモーションコスト1000元未満、顧客獲得コスト10元/人未満。この指標を達成できれば、ニーズは本物で継続投資可能。
+
+---
+
+### 最終：小明には明確な計画ができた
+
+6ラウンドの対話を経て、小明にはついに明確な計画ができました。
+
+第1フェーズは1〜2ヶ月：WeChat ミニプログラムを作り、2〜3人の産後リハビリコーチと提携（分配モデル）、産後専用コース（動画）とチェックインコミュニティのみを提供。手動で姿勢指導。目標は100人のユーザー、10%の課金コンバージョン率。
+
+第2フェーズは3〜6ヶ月：第1フェーズの検証が成功したら継続投資。AI 姿勢補正機能を追加、パーソナライズドプランを追加、コミュニティ機能を最適化。
+
+第3フェーズは6〜12ヶ月：独立 APP を開発、産後リハビリ機関と提携、妊娠期、妊活期に拡張。
+
+スタートコストは非常に低い：開発は自分で AI IDE で（0元）、コンテンツはコーチとの分配（初期0元）、プロモーションは小紅書＋ママコミュニティ（1000元未満）。総コスト1000元未満。
+
+---
+
+### AI 対話でプロダクトコンセプトを磨く5ステップ法
+
+このケースを通じて、小明は AI との対話の標準プロセスをまとめました（詳細は付録E参照）。
+
+**ステップ1：元のアイデアを投げる。** 初歩的なアイデアを説明する。大雑把でも構わない。競争が激しい、差別化が分からないなどの懸念を AI に伝える。
+
+**ステップ2：AI に MVP 計画を立ててもらう。** 最小限実行可能なプロダクトにはどの機能が必要か？いくつのフェーズに分けるか？各フェーズの目標は？技術的な実現難度は？
+
+**ステップ3：懸念を提示する。** 技術的な実現難度？コンテンツ制作コスト？プロモーションコスト？ユーザー獲得の難度？すべての懸念を AI に伝える。
+
+**ステップ4：AI に解決策を出してもらう。** 懸念に対して、AI は具体的な提案を出す。複数の案を比較し、最適なものを選択。コスト試算。
+
+**ステップ5：最終的に計画を確認する。** 明確な行動計画を整理し、検証指標を設定。達成できなければ、適時に方向を調整。
+
+**プロンプトテンプレート：**
+```
+[プロダクトコンセプト]を作りたい。
+でも[懸念]が心配。
+以下を手伝ってください：
+1. MVP を計画する
+2. 具体的な技術実現のアドバイスを给出する
+3. コストを見積もる
+4. 検証指標を設定する
+```
+
+---
+
+### この幕のまとめ：小明の学び
+
+第3幕を通じて、小明は3つのことを理解しました。
+
+**第一に、AI 対話でプロダクトコンセプトを磨く。** 一回の対話で完璧な答えを期待するのではなく、多ラウンドのイテレーションを行う。AI に自分の観察、経験、周囲の人のフィードバックを伝える。AI の提案が不合理なら、適時に指摘する。最後は必ず具体的な行動計画に落とし込む。
+
+**第二に、MVP のコア原則。** 最小化：最もコアな機能だけを作る。検証可能：ニーズが本物かどうかを素早く検証できる。低コスト：最低のコストで検証する。
+
+**第三に、検証指標。** 課金コンバージョン率 > 10%なら、ニーズは本物で投資する価値がある。課金コンバージョン率 5〜10%なら、ニーズは存在するが磨きが必要。課金コンバージョン率 &lt; 5%なら、ニーズは成立せず、適時に方向を調整。
+
+---
+
+📦 **本章のアウトプット：**
+- 明確な MVP 計画ができた
+- 技術的な実現パスが分かった
+- 検証指標を設定した
+
+---
+
+## 終章：あなたの行動
+
+### 覚え口诀
+
+**一人一事一切入、横切縦挖找痛点、AI对话磨概念、五步验证再动手**
+
+**解説：**
+- **一人：** 自分から出発し、その層を自然に理解する
+- **一事：** 一つの具体的なことに集中し、欲張らない
+- **一切入：** エントリーポイントを見つけ、細分化すればするほど良い
+- **横切：** 横分割でユーザー層を絞り、最も支払意欲の強いユーザーを見つける
+- **縦挖：** 縦深掘りでシーンを掘り、ユーザーの完全なジャーニーを理解する
+- **AI对话：** AI 対話でプロダクトコンセプトを磨く
+- **五步验证：** 5ステップ判断法でニーズの真偽を検証する
+
+---
+
+### 課後練習
+
+日常生活の小さな悩みを一つ選び、この章の方法で展開してみましょう：
+
+::: tip 練習タスク
+
+**1. この悩みを説明する（1文）**
+- 例：「家計簿 APP を作り、ユーザーの消費記録をサポートしたい」
+
+**2. 横分割：3つの異なるニーズを持つ可能性のある層を見つける**
+- 例：小規模企業オーナー、留学生の親、フリーランス
+
+**3. 一つの層を選び、縦深掘り：完全なシーンと本当の感情を描写する**
+- 例：留学生の親のシーン——外国で子どもがいくら使っているか知りたいが、子どもが教えてくれない
+
+**4. プロダクトコンセプトを再構築：「一つの機能」から「一つのソリューション」へ進化させる**
+- 例：「留学資金マネージャー」——単なる家計簿ではなく、親が子どもの海外での消費を「把握できる」ようにする
+
+**5. 検証チェックリストでアイデアを評価する（付録F参照）**
+
+**あなたの分析をコミュニティでシェアし、他の受講生と議論しましょう！**
+
+:::
+
+---
+
+## 付録：SOP 方法論
+
+### 付録A：ニーズ分析の5ステップ判断法
+
+アイデアが浮かんだとき、どうやってそれが投資する価値があるかを素早く判断するか？
+
+**ステップ1：ユーザー検証——10人のターゲットユーザーを見つける**
+
+**聞いてはいけない：**「私のプロダクトを使いますか？」（偽陽性率90%）
+
+**聞くべきこと：**
+1. 「今この問題をどう解決していますか？」（実際の行動を理解）
+2. 「ここ1週間、この問題に何回困りましたか？」（頻度を理解）
+3. 「これを解決するのに、いくらお金/時間を使っていますか？」（支払意欲を理解）
+4. 「ソリューションがあるけど、習慣を変える必要があるなら、変えますか？」（変革コストを理解）
+
+**判断基準：**
+- 3人以上のユーザーが「毎日このことで頭を抱えている」と言う——ペインポイントの可能性
+- ユーザーが「面白いけど、急いでない」と言う——おそらくイッチポイント
+- ユーザーが「今 XX で解決してるけど、あまり満足していない」と言う——チャンスあり
+
+**重要な問い：** ユーザーは今この問題をどう解決しているか？
+
+| 代替手段のタイプ | 説明 | チャンスの判断 |
+|------------|------|---------|
+| **代替手段がない** | ユーザーが黙って我慢している | 大きなチャンスだが、市場教育が必要 |
+| **非効率な方法** | Excel、手作業、複数人での連携 | 良いチャンス、ユーザーはより良いソリューションを求めている |
+| **複数ツールの寄せ集め** | Aツール＋Bツール＋Cツール | 良いチャンス、統合に価値がある |
+| **成熟したプロダクト** | でもユーザーは不満 | チャンスあり、差別化が必要 |
+| **成熟したプロダクト** | ユーザーは満足 | チャンスは小さい、破壊的イノベーションが必要 |
+
+::: tip 「破壊的イノベーション」とは？
+
+**簡単な定義：** プロダクトをより良くするのではなく、よりシンプル/安い方法で、これまで無視されていたユーザー層にサービスを提供する。
+
+**例：**
+- 従来型携帯 → スマートフォン（機能が多いのではなく、インタラクション方式が全く違う）
+- 従来型タクシー → DiDi（車が良いのではなく、いつでもどこでもタクシーを呼べるようにする）
+- 従来型書店 → 電子書籍（本が多いのではなく、持ち運びと購入をより便利にする）
+
+**重要：** 破壊的イノベーションは多くの場合「低価格帯」または「新規ユーザー層」から始まり、段階的に上に侵食していく。
+
+:::
+
+**ケーススタディ：**
+- 糖尿病患者は今「経験＋推測」で食事を管理している（非効率な方法）——チャンス大
+- 一般的なダイエット層は薄荷健康を使っている（成熟プロダクト、満足度は中程度）——細分化のチャンスあり
+- 学生は WeChat グループでフリマ取引している（複数ツールの寄せ集め）——統合のチャンスあり
+
+**最も効果的な方法：プリセールスまたは前金**
+
+**手順：**
+1. シンプルなランディングページを作り、プロダクトコンセプトを説明する
+2. 「プリセールス」または「予約」ボタンを設置
+3. いくら支払う意思があるか確認する（1元でも可）
+
+**判断基準：**
+- 前金を払うユーザー > 10%：ニーズは本物、作る価値あり
+- 前金を払うユーザー 5〜10%：ニーズは存在するが、磨きが必要
+- 前金を払うユーザー &lt; 5%：ニーズは成立せず、またはプロダクトコンセプトに問題あり
+
+**注意：**「買います」と言う人は多いが、本当にお金を払う人こそターゲットユーザー。
+
+**シンプルな公式：**
+```
+潜在的市場規模 = ターゲットユーザー数 × 支払意欲 × 客単価
+```
+
+**ケーススタディ：キャンパス中古取引プラットフォーム**
+- ターゲットユーザー：全国大学生 4000万人
+- 中古取引ニーズがある人：50% = 2000万人
+- プラットフォームを使う意思がある人：10% = 200万人
+- 年間取引頻度：2回
+- プラットフォーム手数料：5%
+- 平均客単価：100元
+- 潜在的市場規模 = 200万人 × 2 × 100 × 5% = 2000万元/年
+
+**判断基準：**
+- 市場規模 > 10億：大市場、作る価値あり
+- 市場規模 1〜10億：中規模市場、作れるが天井が見える
+- 市場規模 &lt; 1億：ニッチ市場、副業または小さく美しく向いている
+
+**重要な問い：** プロダクトが成功したら、模倣されたらどうするか？
+
+**一般的な参入障壁のタイプ：**
+
+| 障壁のタイプ | 説明 | 例 |
+|-----------|------|------|
+| **ネットワーク効果** | ユーザーが増えるほど価値が上がる | WeChat、DiDi |
+| **データ蓄積** | データが増えるほどアルゴリズムが正確に | 今日の頭条、Douyin |
+| **ブランド認知** | ユーザーの心に占める位置 | コカ・コーラ、ナイキ |
+| **規模の経済** | 規模が大きいほどコストが下がる | JD物流、Amazon |
+| **技術特許** | コア技術のバリア | ファーウェイ、DJI |
+| **スイッチングコスト** | ユーザーの移行コストが高い | エンタープライズソフトウェア、OS |
+
+**初期プロジェクトの現実：**
+- 大部分の初期プロジェクトには明確な参入障壁がない
+- でも心配ない、重要なのは<strong>スピード</strong>
+- 先に市場を占領し、後から障壁を構築する
+
+---
+
+### 付録B：横分割でユーザー層を絞る方法
+
+「全 XX ユーザー」にサービスしようとするのではなく、<strong>特定の層</strong>を見つける。彼らのニーズはより痛く、より具体的。
+
+**ステップ1：考えられるすべての細分化層をリストアップ**
+
+プロダクトコンセプトに対して、考えられるすべての層をリストアップする。
+
+**ステップ2：各層のビジネス価値を評価**
+
+| 評価次元 | 説明 |
+|---------|------|
+| ペインポイントの強度 | この層のニーズはペインポイントかイッチポイントか？ |
+| 支払意欲 | ソリューションにいくら払う意思があるか？ |
+| 市場規模 | この層には何人いるか？ |
+| 競争度 | 既存のソリューションに満足しているか？ |
+| あなたの層への理解 | この層を理解しているか？接点があるか？ |
+
+**ステップ3：一つの層を選んで深く分析**
+
+以下の条件を満たす層を選ぶ：
+- ペインポイントが最も痛い
+- 支払意欲が最も強い
+- 自分が最も理解している
+- 競争が比較的激しくない
+
+::: tip 分割の例
+
+**プロダクトコンセプト：** 家計簿 APP
+
+| 細分化層 | ペインポイント | 支払意欲 | 市場規模 | 競争度 |
+|---------|------|---------|---------|---------|
+| 一般会社員 | 記録が面倒 | 低い | 大きい | 高い |
+| 小規模企業オーナー | 個人/会社の支出が混在 | 高い | 中程度 | 中程度 |
+| フリーランス | 収入が不安定、キャッシュフローの予測が必要 | 高い | 中程度 | 中程度 |
+| 留学生の親 | 子どもがいくら使っているか知りたいが、教えてくれない | 高い | 小さい | 低い |
+
+**選択：** 留学生の親（ペインポイントが最も痛く、支払意欲が高く、競争が比較的激しくない）
+
+:::
+
+---
+
+### 付録C：縦深掘りでシーンを掘る方法
+
+ターゲット層を見つけた後、単一機能にとどまらず、ユーザーの<strong>完全なシーン</strong>を理解する。
+
+**ステップ1：ユーザーの1日を描写する**
+
+朝から夜まで、ユーザーがプロダクトを使う際の完全なシーンを描写する。
+
+**ステップ2：各シーンのペインポイントを分析する**
+
+各シーンで、ユーザーはどんな問題に直面しているか？どんな感情があるか？
+
+**ステップ3：感情のタッチポイントを見つける**
+
+恐怖、不安、無力感、孤独、怒り、後悔……
+
+**ステップ4：価値を再構築する**
+
+シーンと感情に基づいて、プロダクトの価値を再構築する。
+
+::: tip 深掘りの例
+
+**ターゲット層：** 産後ママ
+
+| 時間 | シーン | ペインポイント | 感情 |
+|------|------|------|------|
+| 朝6時 | 赤ちゃんが寝たばかり、30分の空き | どんな運動が安全か分からない | 恐怖 |
+| 午前10時 | 赤ちゃんを抱いてあやしている、腰が痛い | 手が空かない、修復運動をしたい | 不安 |
+| 午後3時 | 赤ちゃんが寝ている、運動したい | 体が疲れている、まだ運動できるか分からない | 無力感 |
+| 夜8時 | やっと時間がある | 鏡の中の自分を見て人生が終わったと思う | うつ |
+| 長期的 | 誰も理解してくれない | 自分だけがこんなに苦しんでいると思う | 孤独 |
+
+**価値の再構築：** 「フィットネスツール」から「リハビリコーチ＋心理サポーター」へアップグレード
+
+:::
+
+---
+
+### 付録D：さらに多くの普通のアイデアから良いアイデアへの例
+
+#### 例1：「家計簿 APP」から「留学資金マネージャー」へ
+
+**普通のアイデア：** 自動家計簿 APP、銀行口座と連携して消費を自動分類
+
+**問題：** 市場にはすでに随時記、挖財、Alipay 請求書…
+
+**横分割：**
+- 留学生の親：外国で子どもがいくら使っているか、超過していないかを知りたい
+
+**縦深掘り：**
+- ペインポイントは「家計簿」ではなく<strong>「コントロールできない感覚」</strong>——子どもがいくら使っているか、どこに使っているか分からない
+- シーン：毎月クレジットカードの明細を見るが、子どもは何に使ったか教えてくれない
+
+**再構築後：** 「留学資金マネージャー」——単なる家計簿ではなく、親が子どもの海外での消費を「把握できる」ようにする
+
+**コア機能：**
+- 子どもの消費をリアルタイムで同期
+- 予算超過アラート
+- 月次消費分析レポート
+- 同年代の学生との消費比較（「あなたのお子さんは平均より20%多く使っています」）
+
+---
+
+#### 例2：「ポモドーロツール」から「リモートワーク証明」へ
+
+**普通のアイデア：** ポモドーロ APP、集中力をサポート
+
+**問題：** スマホの画面使用時間、Forest、番茄 ToDo…
+
+**横分割：**
+- リモートワーカー：上司に「本当に仕事している」ことを証明する必要がある
+
+**縦深掘り：**
+- ペインポイントは「集中力がない」ことではなく<strong>「信頼の危機」</strong>——上司に私が見えない、どうやって仕事していることを証明するか？
+- シーン：毎日退勤時、上司が「今日の仕事はどうだった？」と聞くが、証明できない
+
+**再構築後：** 「リモートワーク証明」——リモートワーカーと雇用者の信頼を構築する
+
+**コア機能：**
+- 自動的な労働時間追跡
+- 生産性レポート
+- 画面活動サマリー（プライバシー保護版）
+- 毎日自動的に「作業報告書」を生成し、上司に送信
+
+---
+
+#### 例3：「中古書取引」から「絵本ライブラリ」へ
+
+**普通のアイデア：** 中古書取引プラットフォーム
+
+**問題：** 多抓魚、閑書、孔夫子旧書網…
+
+**横分割：**
+- ママ層：子どもの絵本を読み終わると眠ってしまい、新しいのを買うのは高い
+
+**縦深掘り：**
+- ペインポイントは「本が高い」ことではなく<strong>「絵本のライフサイクルが短い」</strong>——3歳で読んだ本は4歳では読まない
+- シーン：家に絵本が山積みになっているが、子どもはもう読まない。捨てるのは惜しい
+
+**再構築後：** 「絵本ライブラリ宅配」——中古書を売るのではなく、絵本の「使用権レンタル」を提供
+
+**コア機能：**
+- 絵本サブスクリプション（毎月5冊の年齢に合った絵本を届け、読み終わったら送り返して新しいものと交換）
+- 読書進捗追跡
+- 年齢に合ったおすすめ
+- 消毒保証
+
+---
+
+### 付録E：AI 対話でプロダクトコンセプトを磨く5ステップ法
+
+多ラウンドの AI 対話で、普通のアイデアを段階的に実行可能な精密なプロダクトコンセプトに磨き上げる。
+
+**操作：**
+- 初歩的なアイデアを説明する（大雑把でも構わない）
+- 懸念を AI に伝える（競争が激しい、差別化が分からないなど）
+
+**プロンプト：**
+```
+[プロダクトコンセプト]を作りたい。
+でも[問題/懸念]を見つけた。
+```
+
+**操作：**
+- AI に最小限実行可能なプロダクトの計画を立ててもらう
+- 技術的な実現難度とコストを議論
+- 検証指標を設定
+
+**プロンプト：**
+```
+以下を手伝ってください：
+1. MVP を計画する
+2. 具体的な技術実現のアドバイスを出す
+3. コストを見積もる
+4. 検証指標を設定する
+```
+
+**操作：**
+- 技術的な実現難度？
+- コンテンツ制作コスト？
+- プロモーションコスト？
+- ユーザー獲得の難度？
+
+**プロンプト：**
+```
+懸念事項：
+1. [懸念1]
+2. [懸念2]
+3. [懸念3]
+```
+
+**操作：**
+- 懸念に対して具体的な提案を出す
+- 複数の案を比較し、最適なものを選択
+- コスト試算
+
+**プロンプト：**
+```
+懸念に対して、具体的な解決策を出してください。
+```
+
+**操作：**
+- 明確な行動計画を整理する
+- 検証指標を設定する
+- 達成できなければ、適時に方向を調整
+
+**プロンプト：**
+```
+明確な行動計画を整理してください。
+```
+
+::: tip 重要なテクニック
+
+- **多ラウンド対話：** 一回の対話で完璧な答えを期待するのではなく、多ラウンドのイテレーションを行う
+- **情報を提供する：** 自分の観察、経験、周囲の人のフィードバックを AI に伝える
+- **AI に質問する：** AI の提案が不合理なら、適時に指摘する
+- **実行に集中する：** 最後は必ず具体的な行動計画に落とし込む
+
+:::
+
+---
+
+### 付録F：ニーズ検証チェックリスト
+
+時間を投資して開発を始める前に、以下のチェックリストでアイデアを検証する——<strong>核心的な問い：ユーザーはこれに支払うか？</strong>
+
+::: tip ニーズ検証チェックリスト
+
+**1. ユーザーペルソナの明確さ**
+- ☐ ターゲットユーザーを一言で説明できるか？
+- ☐ 現在の代替手段は何か言えるか？
+- ☐ 使用シーンの具体的な詳細を描写できるか？
+- ☐ この層に支払能力はあるか？
+
+**2. ペインポイントの強度評価**
+- ☐ ユーザーは今この問題を解決するのに何を犠牲にしているか？（時間/お金/労力）
+- ☐ 解決しない場合、どうなるか？
+- ☐ ユーザーはすでにソリューションを探しているか？
+- ☐ ユーザーはこの問題の解決にいくら払う意思があるか？
+
+**3. ソリューションの差別化**
+- ☐ 既存のソリューションと比べて、あなたの優位性は何か？
+- ☐ この優位性はユーザーに乗り換えさせるのに十分か？
+- ☐ 大手プラットフォームがあなたの機能をコピーするのは難しいか？
+- ☐ あなたの差別化はユーザーの支払いを支えるのに十分か？
+
+**4. ビジネスモデルの実現可能性**
+- ☐ ユーザーは支払う意思があるか？いくら？（必ず実際にテストする）
+- ☐ 顧客獲得コストはどれくらいか？
+- ☐ ユーザーライフタイムバリュー（LTV）で顧客獲得コスト（CAC）をカバーできるか？
+- ☐ 他の収益化方法はあるか？（広告、付加価値サービス、B2B など）
+
+**5. 迅速な検証方法**
+- ☐ 最小コスト（1〜2週間）でテスト可能なプロトタイプを作れるか？
+- ☐ 10人のターゲットユーザーにインタビューできるか？
+- ☐ 核心仮説を検証する実験を設計できるか？
+- ☐ ユーザーに前金を払ってもらい支払意欲を検証できるか？
+
+:::
+
+<strong>「私のプロダクトを使いますか？」とは聞かないこと。</strong> この質問から得られるのは偽陽性の回答ばかり。
+
+<strong>聞くべきこと：</strong>
+- 「今この問題をどう解決していますか？」（実際の行動を理解）
+- 「ここ1週間、この問題に何回困りましたか？」（頻度を理解）
+- 「ソリューションがあるけど、今の習慣を変える必要があるなら、変えますか？」（変革コストを理解）
+- 「XX 元なら買いますか？」（支払意欲を理解）
+
+**最良の検証：** ユーザーに前金を払ってもらう。支払う意思があると言う人は多いが、本当にお金を払う人こそターゲットユーザー。
+
+**重要な指標：**
+- 前金を払うユーザーの割合 > 10%：ニーズは本物、投資する価値あり
+- 前金を払うユーザーの割合 5〜10%：ニーズは存在するが、磨きが必要
+- 前金を払うユーザーの割合 &lt; 5%：ニーズは成立せず、またはプロダクトコンセプトに問題あり
+
+---
+
+## 本章のまとめ
+
+この章では、小明の物語を通じて、プロダクトマネージャーの視点でプロダクトアイデアを検証する方法を学びました——<strong>核心は常に：ユーザーはこれに支払うか？</strong>
+
+::: info 核心ポイント
+
+**1. 本当のニーズの3つの基準：**
+- ユーザーが支払う意思がある（最も重要な基準）
+- ユーザーが行動を変える意思がある
+- ソリューションがない場合、ユーザーの損失は大きい
+
+**2. 普通のアイデアから支払われるプロダクトへのパス：**
+- <strong>横分割：</strong>特定の層を見つけ、細分化すればするほど支払意欲が強くなる
+- <strong>縦深掘り：</strong>完全なシーンを理解し、機能だけでなく感情を解決する
+- <strong>価値の再構築：</strong>ツールからソリューションへ進化し、支払いの理由を確立する
+
+**3. 偽のニーズの罠を避ける：**
+- 偽のペインポイントを解決する（イッチポイントをペインポイントとして扱う）
+- 市場規模が小さすぎてビジネスモデルを支えられない
+- ソリューションが問題より複雑
+
+**4. 支払意欲を検証する方法：**
+- 10人のターゲットユーザーに深いインタビューを行う
+- ユーザーに前金を払ってもらい本当の意図を検証する
+- 前金を払うユーザーの割合 > 10% で初めて投資する価値がある
+
+**5. AI 対話でプロダクトコンセプトを磨く：**
+- 多ラウンドのイテレーションで継続的に最適化
+- 実行に集中し、行動計画に落とし込む
+- 検証指標を設定し、適時に調整
+
+:::
+
+**覚えておいてください：** 良いプロダクトマネージャーは空からニーズを創造するのではなく、<strong>見過ごされ、過小評価され、誤って満たされている</strong>本当のニーズを発見し、ユーザーが支払う方法を見つける人です。
+
+次の章では、検証済みのアイデアを持って、AI IDE を使ってインタラクティブなプロダクトプロトタイプにする方法を学びます。
diff --git a/docs/ja-jp/stage-1/integrating-ai-capabilities/images b/docs/ja-jp/stage-1/integrating-ai-capabilities/images
new file mode 120000
index 0000000..edf9b90
--- /dev/null
+++ b/docs/ja-jp/stage-1/integrating-ai-capabilities/images
@@ -0,0 +1 @@
+../../../zh-cn/stage-1/integrating-ai-capabilities/images
\ No newline at end of file
diff --git a/docs/ja-jp/stage-1/integrating-ai-capabilities/index.md b/docs/ja-jp/stage-1/integrating-ai-capabilities/index.md
new file mode 100644
index 0000000..64a89e6
--- /dev/null
+++ b/docs/ja-jp/stage-1/integrating-ai-capabilities/index.md
@@ -0,0 +1,808 @@
+---
+title: 'プロトタイプに AI 能力を追加 - テキストと画像 API の統合'
+description: '既存の Web プロトタイプに本物の AI 能力を統合する：API の核心概念を理解し、API Key と公式サンプルの見つけ方を習得。DeepSeek テキストモデルと各種画像生成サービス（SiliconFlow Qwen-Image、Recraft、Seedream）の実践的統合、およびモデル選定の一般的な方法を習得します。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>1 日</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/integrating-ai-capabilities'] ?? []
+</script>
+
+# 初級四：プロトタイプに AI 能力を注入する
+
+## 章節ガイド
+
+<ChapterIntroduction :duration="duration" :tags="['API', 'テキストモデル', 'テキストから画像', 'プロトタイプ統合']" coreOutput="プロトタイプに1つのテキストモデル＋1つの画像モデルを統合（画像はオプション）" expectedOutput="実際の API を呼び出せる AI プロトタイプ">
+
+前の章では、<strong>良いアイデアを見つける</strong>ことから<strong>プロダクトプロトタイプを作る</strong>ことまでの完全なフローを完了しました。しかし、現在のプロトタイプはまだ「空っぽの殻」です——ボタンをクリックしてもコンテンツは本当に生成されず、ページ上のデータはすべて固定値です。
+
+第1章で強調したことを覚えていますか？<strong>私たちは「人が支払うプロダクト」を作りたいのであって、「見た目がまともなプロトタイプ」を作りたいのではない。</strong> 本当の価値はプロダクトが<strong>本当の問題を解決</strong>することから生まれ、そのためにはプロトタイプが<strong>本当に動く</strong>必要があります。
+
+この章では、プロトタイプを<strong>「生きたもの」</strong>にします：<strong>実際の AI 能力</strong>を統合し、API Key の取得から、公式ドキュメントの読解、AI IDE にインターフェースの統合を任せるまでをカバーします。<strong>DeepSeek テキストモデル</strong>を例に、アプリケーションが<strong>実際に大規模モデルを呼び出してコンテンツを生成</strong>する方法を学びます。興味があれば、<strong>画像生成の統合（オプション）</strong>にも挑戦できます。
+
+この章を学び終えると、プロトタイプは<strong>静的なデモではなくなります</strong>。それは<strong>実際の AI 能力を呼び出し、本当の問題を解決できるアプリケーション</strong>になります。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'API 基礎', description: '核心概念とセキュリティ規範を理解' },
+      { title: 'テキスト統合', description: 'DeepSeek テキスト生成実践' },
+      { title: '画像統合', description: 'VLM 画像理解と生成' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 1. API の基礎概念
+
+前述の通り、私たちの目標は「AI 能力を組み込む」ことで、プロトタイプを静的なデモではなく、実際の AI サービスを呼び出せるツールにすることです。これを実現する鍵は、API（Application Programming Interface）を理解し、使用することです。
+
+API はコンピュータサイエンスにおける重要な抽象概念で、簡単に理解できます：**相手が指定した形式で「質問」を送ると、相手も同じ形式で「結果」を返す**。
+
+- **あなたが送る内容**：通常は「API Key」と「何を生成したいか」
+- **相手が返す内容**：成功すれば結果を返す。失敗すれば理由を伝える（「Key が間違っている」「残高不足」「パラメータエラー」など）
+
+具体的には、以下の核心的な要素を把握する必要があります：
+
+1. **API Key**：あなたの「通行証」であり「財布の鍵」。他人に渡されると、あなたの代わりに API を呼び出して費用が発生します。
+2. **Endpoint（エンドポイント）**：API リクエストの具体的なパスで、どの機能にアクセスするかをサーバーに伝えます。完全なリクエスト URL は通常「ベース URL ＋ Endpoint パス」で構成されます。例：
+   - テキスト生成：ベースURL (`https://api.service.com`) ＋ Endpoint (`/v1/chat/completions`) ＝ 完全URL `https://api.service.com/v1/chat/completions`
+   - 画像生成：ベースURL (`https://api.service.com`) ＋ Endpoint (`/v1/images/generations`) ＝ 完全URL `https://api.service.com/v1/images/generations`
+3. **呼び出し/リクエスト**：AI サービスにタスクを送信し、結果を取得するプロセス
+4. **リクエスト内容**：AI に送信する具体的な内容。AI に書かせたい記事のテーマ、生成したい画像の説明など。
+5. **レスポンス結果**：AI が処理完了後に返す内容。生成された記事、画像など。
+6. **エラーハンドリング**：問題が発生した時（API Key エラー、リクエスト過多など）、どのようにトラブルシューティングするか。
+
+::: info ℹ️ API とは
+API についてのより深い解説は、付録の [API 入門](/zh-cn/appendix/4-server-and-backend/api-intro) をご覧ください。
+
+::: warning 🔐 **API セキュリティに関する注意事項**
+API Key は AI サービスにリクエストするための「通行証」であり、認証と課金に使用されるパスワード文字列です。
+
+API Key はアカウントと課金に直接関連しているため、以下の点に注意してください：
+
+- 絶対に<strong>グループチャット、スクリーンショットのネット投稿</strong>、公開フォーラムへの投稿はしない
+- <strong>コードにハードコードして Git リポジトリにコミットしない</strong>（特に公開リポジトリ）
+- Key の漏洩が疑われる場合は、<strong>直ちに新しい Key に変更する</strong>
+
+以下の内容では、<strong>API KEY を AI IDE に直接貼り付けて操作</strong>します。<strong>正式なプロジェクトでは絶対にこの方法を使わないでください！！</strong>練習なのでこの方法を使います。（より熟练になったら、AI に設定ファイルを生成させ、API KEY を設定ファイルに配置するだけで済みます）
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'API 基礎', description: '核心概念とセキュリティ規範を理解' },
+      { title: 'テキスト統合', description: 'DeepSeek テキスト生成実践' },
+      { title: '画像統合', description: 'VLM 画像理解と生成' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 2. テキスト生成 API の統合：DeepSeek
+
+API にはこれらの技術概念が含まれますが、プロトタイプ開発段階では、実際の操作は非常にシンプルで効率的です。核心的なアプローチは：
+
+> **公式サンプルを見つけ、API Key を取得し、AI IDE にボタンに統合させる。**
+
+これらの概念を習得すると、テキストモデルでも画像モデルでも、本質的なフローは同じことがわかります：ユーザーがボタンをクリックすると、フロントエンドが入力を整理してリクエストを送信し、インターフェースが結果を返したら、ページに結果を表示する。次に、実際の操作でこれを確認します。
+
+`1.2 プロトタイプを作る` で、あなたはすでにインタラクティブなプロトタイプを作りました。次にやることは、プロトタイプの中の「AI のように見える機能」を本当に使える能力に変えることです：**ユーザーがボタンをクリックすると、プロトタイプが外部の AI サービスにリクエストを送信し、返されたテキストを表示する。**
+
+::: info ℹ️ 原理の詳細
+原理に関する詳細を知りたい場合は、付録の [大規模言語モデル（LLM）入門](/zh-cn/appendix/8-artificial-intelligence/llm-principles) をご覧ください。
+::: details 詳細：DeepSeek とは？
+
+**杭州深度求索人工知能基礎技術研究有限公司**（Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.）、DeepSeek を商号とする、<strong>大規模言語モデル（LLMs）を開発する中国の人工知能（AI）企業</strong>です。DeepSeek は本社を浙江省杭州に置き、中国のヘッジファンド幻方量化（High-Flyer）に所有・資金提供されています。DeepSeek は幻方量化の共同創業者である梁文鋒氏によって2023年7月に設立され、彼は両社の CEO も務めています。同社は2025年1月に同名のチャットボットと DeepSeek-R1 モデルをリリースしました。
+
+DeepSeek の GPQA ベンチマークランキングにおける他のトップモデルとのパフォーマンス比較を見てみましょう。注目すべきは、DeepSeek はオープンソース（誰でもインターネットからモデルをダウンロード可能）モデルですが、Grok、Google Gemini、ChatGPT などの一般的なモデルはクローズドソースです。ご覧の通り、DeepSeek はすでに第一陣のモデルに大きく迫っています。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
+
+GPQA は「大学院レベル Google-Proof Q&A ベンチマーク」の略で、科学 Q&A タスクのための大学院レベルのベンチマークです。詳細は以下の通りです。
+
+GPQA は448の多肢選択問題を含み、生物学、物理学、化学のサブ分野（量子力学、有機化学、分子生物学など）をカバーしています。これらの問題は61人の博士号取得者または博士課程在籍中の専門家によって作成され、厳格な検証プロセスを経ています。
+:::
+
+この3ステップに従えば、大規模モデル生成 API の迅速な統合が可能です：
+
+1. **DeepSeek プラットフォームで API Key を作成する**
+2. **DeepSeek ドキュメントでテキスト生成サンプルを見つける**（通常はコピペで使えるサンプルコードがある）
+3. **AI IDE を開き、API Key ＋公式サンプルを貼り付け**、AI に実現したい機能を伝える：
+   > この大規模モデルの API を統合して、このアプリのコピーライティング生成タスクをサポートしてください
+
+次にデモを行います。以下の全フローに沿って操作できます。まず [DeepSeek](https://platform.deepseek.com/usage) にアカウントを登録し、API Key を作成して、少額をチャージして検証します。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
+
+「API KEYS」をクリックし、画面下部の「create new API key」を見つけます。最終的に `sk-8573341c39fc44315aadc071c53rh7d2` のような API key が得られます。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
+
+Key を取得すると、モデルを呼び出す権限を持てます。
+
+ここで、[API](https://api-docs.deepseek.com/) ドキュメントを直接読むことができます。通常、curl または Python の呼び出しサンプルが提供されています。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
+
+サンプルを見つけたら、ドキュメントの内容と Key をすべて AI IDE のチャットボックスにコピーし、大規模言語モデルを既存のプロトタイプに統合するよう依頼できます。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
+
+プロンプトの参考：
+
+```
+この呼び出し方法を参考に、コピーライティング生成機能をサポートしてください。商品情報に基づいてクリックすると対応する Douyin EC 用のキャッチコピーを生成し、複数のスタイルをサポートするようにしてください。
+
+以下の参考資料：
+api key：sk-8573341c39aefa1efe
+api リクエスト参考：
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+AI のコード生成をしばらく待つと、対応するコピーライティング生成ボタンを簡単にテストできます。入口が見つからない場合は、AI IDE にどのページからそのページにアクセスできるか聞いてください。どうしても見つからない場合は、AI IDE に直接アイデアに基づいてリファクタリングと改良を依頼して、最終的なコピーライティング生成結果を得てください。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
+
+もちろん、ここで「本当に大規模モデルを呼び出しているのか、固定のレスポンスを内蔵しているだけなのか、どうやって確認するの？」と思うかもしれません。カスタムのテキストを入力して、大規模モデルがあなたが即座に指定したカスタム分析に基づいて対応するコピーライティングを生成させることで確認できます。
+
+毎回結果が異なり、論理的であれば、API が正常に呼び出されていると安心できます。[API 使用管理プラットフォーム](https://platform.deepseek.com/usage)で呼び出しが成功したかどうかも確認できます（数分待つ必要がある場合があります）。
+
+## さらに多くのテキスト生成モデルの選択
+
+DeepSeek 以外にも、他の大規模言語モデルも試せます。ほとんどのモデルは **OpenAI 互換インターフェース** を提供しているため、切り替えは非常に簡単です——API Key、ベース URL、モデル名を変更するだけです。
+
+### MiniMax 統合
+
+::: details 詳細：MiniMax とは？
+
+**MiniMax** は中国の人工知能企業で、汎用人工知能技術の研究開発に取り組んでいます。MiniMax は自社開発の MiniMax-M2.7 大規模言語モデルシリーズをリリースしており、多くのベンチマークテストで優れたパフォーマンスを示し、非常に高いコストパフォーマンスを誇ります。
+
+**MiniMax-M2.7 シリーズの主な特徴：**
+
+- **超長いコンテキスト**：204,800 トークンのコンテキストウィンドウをサポート。長文書、多ラウンド対話に適している
+- **高コストパフォーマンス**：非常に競争力のある価格
+- **OpenAI 互換インターフェース**：OpenAI SDK を直接使用して呼び出し可能。新しい API 形式を学ぶ必要がない
+- **2つの利用可能なモデル**：
+  - `MiniMax-M2.7`：フラグシップモデル、複雑なタスクに適している
+  - `MiniMax-M2.7-highspeed`：高速版、同じパフォーマンスを維持しながらより高速
+:::
+
+統合方法は DeepSeek と同じで、3ステップだけです：
+
+1. [MiniMax オープンプラットフォーム](https://platform.minimax.io/) にアクセスしてアカウントを登録し、API Key を作成
+2. MiniMax ドキュメントで呼び出しサンプルを見つける
+3. API Key ＋サンプルを AI IDE に貼り付ける
+
+MiniMax は OpenAI 互換インターフェースを提供しているため、以下の curl サンプルとあなたの API Key をコピーして、AI IDE に統合を依頼できます：
+
+```bash
+curl https://api.minimax.io/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${MINIMAX_API_KEY}" \
+  -d '{
+        "model": "MiniMax-M2.7",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+::: tip ✅ ヒント
+MiniMax の API 形式は DeepSeek とほぼ完全に同じです（どちらも OpenAI 互換形式）。したがって、DeepSeek の統合がすでに成功していれば、MiniMax に切り替えるには3つの箇所を変更するだけです：
+1. **ベース URL**：`https://api.minimax.io/v1` に変更
+2. **API Key**：MiniMax の API Key を使用
+3. **モデル名**：`MiniMax-M2.7` または `MiniMax-M2.7-highspeed` に変更
+
+詳細は [MiniMax OpenAI 互換インターフェースドキュメント](https://platform.minimax.io/docs/api-reference/text-openai-api) を参照してください。
+:::
+
+# 3. 画像からテキスト API の統合：Qwen3 VL
+
+::: info ℹ️ 原理の詳細
+原理に関する詳細を知りたい場合は、付録の [視覚言語モデル（VLM）入門](/zh-cn/appendix/8-artificial-intelligence/multimodal-models) をご覧ください。
+
+::: details 詳細：Qwen3 VL とは？
+
+**Qwen3 VL** はアリババクラウドの通義千問チームがリリースしたマルチモーダル視覚言語モデルシリーズの最新版です。VL は「Vision-Language」、つまり視覚言語モデルを表します。画像内容を理解し、画像に基づいてテキストの説明を生成、画像に関する質問に回答、画像情報の抽出などができます。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
+
+**Qwen3 VL の主な機能：**
+
+- **画像理解**：画像中の物体、シーン、人物、テキストなどを認識
+- **視覚 QA**：ユーザーの質問に基づき、画像に関する質問に正確に回答
+- **画像説明**：詳細または簡潔な画像のテキスト説明を生成
+- **複数画像理解**：複数の画像を同時に処理し、比較分析をサポート
+- **テキスト抽出**：画像からテキスト内容を抽出（OCR 機能）
+
+**なぜ Qwen3 VL を選ぶのか？**
+
+前世代モデルと比較して、Qwen3 VL は画像理解の正確さが大幅に向上し、より長く複雑な画像分析タスクをサポートしています。中国語理解で優れたパフォーマンスを示し、API 呼び出しコストが比較的低く、コストパフォーマンスが高いです。また、コンテキストウィンドウが大きく、より複雑な視覚推論タスクを処理できます。
+
+**典型的な応用シーン：**
+
+- EC：商品画像から自動的にタイトル、説明、セールスポイントを生成
+- コンテンツ制作：素材画像に基づいて自動的にコピーや画像提案を生成
+- オフィス：画像内容の抽出、帳票の自動認識
+- 教育：画像問題の自動解析、知識ポイントの抽出
+
+:::
+
+前のパートではテキスト生成 API の統合方法について説明しましたが、前のアプリケーションシーンでは一つの問題に気づきます。アップロードするのは画像ですが、大規模言語モデルだけでは画像の内容をうまく理解できず、生成結果に差が出る可能性があります。
+
+画像をテキストの説明に変換してくれるモデルが欲しい。これには視覚言語モデル（VLM）が必要です。このケースでは、視覚言語モデルを使って商品のセールスポイント説明を生成し、ユーザー体験を向上させます。
+
+利便性のため、[クラウドプラットフォーム SiliconFlow](https://cloud.siliconflow.cn/me) が提供する API インターフェースを使用して、画像からテキストへの API を統合します。
+
+::: details 詳細：SiliconFlow とは？
+**硅基流動（SiliconFlow）** は中国国内で有名な AI モデル集約プラットフォームで、各種主流の大規模言語モデルと視覚言語モデルの API インターフェースサービスを提供しています。
+
+**プラットフォームの特徴：**
+
+- **多モデルサポート**：DeepSeek、Qwen、Llama シリーズなどのオープンソースモデルを含む各種主流 AI モデルを統合
+- **技術最適化**：オープンソースモデルの推論を最適化し、低遅延・高並行の API サービスを提供
+- **インターフェース互換**：OpenAI 形式と互換性のある API インターフェースを提供。既存のアプリケーション統合に便利
+- **従量課金**：呼び出し量に応じた課金に対応
+
+SiliconFlow はオープンソース大規模モデルの推論サービスで比較的成熟しており、中国産オープンソース AI モデルを使用する際の一般的な選択肢の一つです。
+:::
+
+SiliconFlow プラットフォームのホームページに入ると、多くのモデルが選択できることがわかります。左上のフィルターを見つけて展開し、視覚タグを選択すると、智譜 GLM-4.6V や Qwen3-VL など、多くの画像からテキストへのモデルが表示されます。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
+
+どれでも選んでテストできます。ここでは `Qwen/Qwen3-VL-8B-Instruct` を例にします。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
+
+[SiliconFlow プラットフォーム](https://cloud.siliconflow.cn/me/account/ak) に入り、API キーで「新建 API 密钥」をクリックして、新しい API Key を作成します。
+
+以下のコードを参考コードとして、生成した API Key と一緒に AI IDE に送信し、機能統合を行えます。
+
+::: details 画像からテキストへの参考コード
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+```
+
+:::
+
+このシーンでは、AI IDE にアップロードされた画像から EC のセールスポイントテキストやキーワードを自動生成する機能を実装させます。以下のように指示します：
+
+```
+以下の画像からテキストへの API を基に、アップロードされた画像から EC のセールスポイントテキストとキーワードを自動生成する機能を実装してください。
+
+<ここにコードを省略、キーと参考コードを自分で貼り付ける必要があります>
+```
+
+最終的に生成結果が得られます：
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'API 基礎', description: '核心概念とセキュリティ規範を理解' },
+      { title: 'テキスト統合', description: 'DeepSeek テキスト生成実践' },
+      { title: '画像統合', description: 'VLM 画像理解と生成' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 4. 画像生成 API の統合：Seedream 即梦
+
+前のパートでは主にテキスト関連のタスクを扱いました。次は画像生成機能の統合に挑戦し、テキストの説明から画像を生成したり、画像を編集したりできるようにします。
+
+::: info ℹ️ 原理の詳細
+原理に関する詳細を知りたい場合は、付録の [画像生成入門](/zh-cn/appendix/8-artificial-intelligence/image-generation) をご覧ください。
+
+::: details 詳細：[Seedream 即梦](https://seed.bytedance.com/en/seedream4_5) とは？
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png)
+
+> Google が開発した Nano Banana は知っているかもしれませんが、Seedream も見逃せません。Seedream 4.5 は ByteDance が開発した次世代画像クリエイティブモデルです。画像生成と画像編集の機能を統一アーキテクチャに統合しています。これにより、知識に基づく生成、複雑な推論、参照の一貫性などの複雑なマルチモーダルタスクを柔軟に処理できます。さらに、推論速度は前世代より大幅に高速で、最大4K解像度の驚くべき高画質画像を生成できます。
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png)
+
+**主な機能：**
+
+- **テキストから画像（文生图）**：テキストの説明から画像を生成。複数のスタイル（リアル、カートゥーン、水墨、サイバーパンクなど）をサポート
+- **スタイル変換**：画像を指定したアートスタイルに変換
+- **画像バリエーション**：参照画像に基づいて類似スタイルの新しい画像を生成
+- **解像度向上**：画像の鮮明さとディテールを向上
+- **画像編集**：自然言語の指示で既存の画像を編集・修正
+
+**なぜ Seedream を選ぶのか？**
+
+- **国内ネットワークが安定**：国内からのアクセスが速く、遅延が低い
+- **効果が優秀**：EC、素材シーンで安定した信頼性
+- **中国語最適化**：中国語プロンプトの理解がより正確。国内ユーザーに適している
+- **速度が速い**：生成効率が高く、レスポンスタイムが短い
+- **品質が安定**：最大4K解像度の高画質画像を生成
+
+**典型的な応用シーン：**
+
+- EC：メイン画像、詳細ページ画像、プロモーションポスターの生成
+- SNS：アバター、スタンプ、画像の生成
+- デザイン：コンセプトアート、素材画像、背景画像の迅速な制作
+- マーケティング：広告画像、イベントバナー、祝日ポスターの制作
+
+**Qwen3 VL との連携：**
+
+これら2つの API は直列で使用できます：まず Qwen3 VL で参照画像を分析し、画面内容を理解。次に Seedream で分析結果を基にプロンプトを生成し、新しい画像を作成します。
+:::
+
+Douyin、Bilibili、YouTube で見かける「AI ポスター / AI メイン画像 / AI キャラクター画像」は、本質的にここで紹介する技術を使っています。あなたがやるべきことは非常にシンプルです：ユーザーの入力を一文に整理し、画像 API にリクエストを送り、返された画像を表示する。ここで使うモデルを画像生成 / 画像編集モデルと呼びます。
+
+Seedream API をプロジェクトに統合する手順を順番にデモします（AI IDE のサポートを活用）。
+
+[ホームページ](https://www.volcengine.com/experience/ark?launch=seedream)にアクセスし、ログインをクリックします。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png)
+
+ログイン後、右上のチャージオプションを見つけます。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png)
+
+チャージには本人確認が必要です。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png)
+
+認証成功後、[1元をチャージしてテスト](https://console.volcengine.com/finance/fund/recharge)できます。
+
+[初期画面](https://www.volcengine.com/experience/ark?launch=seedream)に戻り、API アクセスをクリックします。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png)
+
+まず、API key を作成し、オプション選択をクリックします。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png)
+
+これでステップ2に進みます。ここで、呼び出すサービスが Seedream 4.5 であることを確認し、提供された呼び出しサンプルをコピーします。（スクリーンショットが比較的早い時期のものなので、モデルバージョンはまだ4.0です）
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png)
+
+API Key と呼び出しサンプルの準備ができたら、AI IDE に直接貼り付けて、フロントエンドのインタラクティブデモを生成させるか、既存のプロトタイプに機能を統合させます。画像でテキストから画像か複数画像から単一画像かを選択できることに注意してください。現在のニーズに応じて参考コードを選択してください。
+
+::: warning ⚠️ 重要なヒント
+ここでのデフォルトのサンプルは比較的複雑です。**「ウォーターマーク追加」** と **「ストリーミングレスポンス」** を無効にすることを忘れないでください。ウォーターマークが生成されず、リクエスト失敗が発生しないようにするためです。
+:::
+
+後で参照画像生成モードを使用するため、まずは複数画像から単一画像への機能に行きます。参考コードは以下の通り：
+
+```
+curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer xxxxxxx" \
+  -d '{
+    "model": "doubao-seedream-4-5-251128",
+    "prompt": "将图1的服装换为图2的服装",
+    "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
+    "sequential_image_generation": "disabled",
+    "response_format": "url",
+    "size": "2K",
+    "stream": false,
+    "watermark": true
+  }'
+```
+
+画像参照コードが得られたら、AI IDE に EC で一般的に使われる画像タスク機能をサポートさせます：
+
+```
+以下の API を基に、このプロジェクトの EC ビジネスの一般的な機能（ポスター生成、Douyin EC メイン画像生成など）を実装してください。
+
+<ここに API KEY と画像編集コードを貼り付けてください>
+```
+
+実装効果は以下の通り：
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png)
+
+注目すべき点として、画像生成では奇妙な問題に頻繁に遭遇する可能性があるため、AI IDE に完全なエラーメッセージを表示させることをお勧めします。コピー＆ペーストで修正しやすくするためです（そうしないと、「生成に失敗しました」と何度も表示されるが、理由が分からないという状況になる可能性があります）。例えば、次のように言えます：
+
+```
+画像生成失敗とだけ表示せず、毎回完全な失敗理由（画像不一致、リクエストエラー、タイムアウトなど）を表示してください！
+```
+
+修正後に更新がウェブページに反映されないことがあります。修正後もウェブページでエラーが出続ける場合（何度も）、AI IDE に直接「このプロジェクトを再起動してください」と言ってみてください。
+
+EC ビジネスでは、ユーザーがアップロードした服を自動的にキャラクターに着せたり、商品の魅力的な販売画像やポスターを自動生成したりしたい場合があります。ここでは、EC ポスターを生成させるプロンプトを試します：
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png)
+
+自分の想像するビジネスシーンに応じて、テキストから画像または画像から画像 API を使って異なる機能を実装できます。
+
+## さらに多くの画像サービスの選択
+
+以下に他の選択肢を示します。まず Qwen 画像生成の結果を動かし、効果とコストに応じて以下のサービスで差し替えることをお勧めします（実際の使用感に基づいて選択）。
+
+### Recraft 統合
+
+プロトタイプが「デザイン制作」寄りの場合（ブランドスタイルのイラスト、マーケティングポスター、ベクタースタイル素材の生成など）、Recraft の方が使いやすいことが多いです。統合方法は前のセクションと完全に同じです：<strong>Key を取得 ＋ 公式サンプルを見つける ＋ AI IDE にサンプルをボタン/ページに落とし込ませる</strong>。
+
+::: details 詳細：Recraft とは？
+
+> Recraft はデザイナー、イラストレーター、マーケター向けの AI ツールで、2022年に米国で設立され、本社はロンドンにあります。ビジュアル効果（画像、ベクターアート、3D グラフィックス）の生成・イテレーションを支援し、高品質な出力（任意のテキストサイズ/長さ）、正確な要素の配置、ブランドの一貫性のあるデザインなどの利点があります。200カ国/地域の300万人以上のユーザー（Ogilvy、Netflix など含む）に信頼され、3.5億枚以上の画像が作成されています。チームはこれをデザイナーの必須ツールにすることを目指し、クリエイターが AI 補助ワークフローをコントロールできるようにしています。
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png)
+
+まず、[API エントリ](https://www.recraft.ai/profile/api) を見つけて API Key を取得する必要があります。
+
+ここでは無料枠が提供されていないため、1,000 クレジットを自分でチャージする必要があります。このサイトは Alipay と WeChat Pay に対応しているため、1,000 クレジットは簡単に取得できます（注意：必要以上にチャージしないでください）。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png)
+
+その後も同じ方法に従います：公式ドキュメントで対応するリクエストサンプルを見つけます：
+
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
+
+:::
+
+### Qwen Image / Qwen Image Edit 統合
+
+画像生成サービスをよりシンプルな方法で統合したい場合は、Qwen Image（通義万相）を検討できます。アプローチは同じです：「画像生成 API」として扱い、プロトタイプのボタンに接続するだけです。
+
+::: details 詳細：Qwen Image / Qwen Image Edit とは？
+
+**Qwen Image**（通義万相とも呼ばれる）は、アリババクラウドの通義チームがリリースした画像生成モデルシリーズで、主に2つのモデルを含みます：
+
+**1. Qwen Image——テキストから画像（Text-to-Image）モデル**
+
+テキストの説明から全く新しい画像を生成します。プロンプトを入力すると、モデルがあなたの意図を理解し、説明に合った画像を生成します。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png)
+
+**主な機能：**
+
+- **テキストから画像（文生图）**：テキストの説明から画像を生成。複数のスタイル（リアル、カートゥーン、水墨、サイバーパンクなど）をサポート
+- **スタイル変換**：画像を指定したアートスタイルに変換
+- **画像バリエーション**：参照画像に基づいて類似スタイルの新しい画像を生成
+- **解像度向上**：画像の鮮明さとディテールを向上
+
+**2. Qwen Image Edit——画像から画像（Image-to-Image）モデル**
+
+既存の画像を編集・修正します。自然言語の指示で、モデルに修正の意図を理解させ、結果を生成させます。
+
+**主な機能：**
+
+- **部分置換**：画像中の特定の物体や人物を置換（「背景を海辺に変えて」など）
+- **要素削除**：画像から不要な要素を削除
+- **スタイル変換**：画像にフィルターやアート効果を追加
+- **画像拡張**：画像の境界を拡張し、新しいコンテンツを生成
+- **スマートレタッチ**：自動美化、光影調整、欠陥修正
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png)
+
+**なぜ Qwen Image シリーズを選ぶのか？**
+
+- **中国語最適化**：中国語プロンプトの理解がより正確。国内ユーザーに適している
+- **低コスト**：海外競合と比較して価格が手頃
+- **高速**：生成効率が高く、レスポンスタイムが短い
+- **安定した品質**：EC、素材シーンで安定した信頼性
+- **多様なスタイル**：様々なアートスタイルとクリエイティブ効果をサポート
+
+**典型的な応用シーン：**
+
+- EC：メイン画像、詳細ページ画像、プロモーションポスターの生成
+- SNS：アバター、スタンプ、画像の生成
+- デザイン：コンセプトアート、素材画像、背景画像の迅速な制作
+- マーケティング：広告画像、イベントバナー、祝日ポスターの制作
+  :::
+
+[SiliconFlow](https://siliconflow.cn/) の公式サイトを確認してください。左側に「Playground」セクションがあり、API 呼び出しなしで様々なモデルを試せます。ページ上部に「Filters」ボタンがあります。クリックすると右側のモデルリストをフィルタリングできます。
+
+「Image」を選択すると、現在サポートされているすべてのテキストから画像へのモデルだけが表示されます。ここでは Qwen/Qwen-Image を使用します。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png)
+
+すべての設定が完了したら、対応する画像生成 API ドキュメントを参照する必要があります。公式ドキュメントページで「API Reference」とマークされたセクションを見つけてください。クリックして [画像生成の API セクション](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) にナビゲートし、関連するリクエストサンプルを見つけます。
+
+以下のリクエストサンプルと API KEY を AI IDE に送信するだけで、画像生成機能を実装できます。
+
+```bash
+curl --request POST \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
+  --header 'Content-Type: application/json' \
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
+  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
+}
+'
+```
+
+ここでのモデルは Qwen/Qwen-Image または Qwen/Qwen-Image-Edit-2509 を使用できます。
+
+::: details 画像編集参考コード
+
+以下のコードと Key をコピーして、AI IDE に送信します：
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+
+prompt: str = "让天空变成傍晚，有月亮和星星，梦幻风格"
+negative_prompt: str = "模糊, 低质量, 扭曲"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+
+:::
+
+# 付録：「現在より強力な」AI モデルを見つける方法
+
+テキストモデル（大規模言語モデルとも呼ばれる）の発展は非常に速く、常により良いパフォーマンスを示すモデルを使用していることを確認する必要があります。以下の2つのウェブサイトで、「現在よく使われ、評価も高いモデル」を簡単に確認できます。
+
+一般的に、この種のウェブサイトは **「モデルアリーナ」** と理解できます：2つのモデルの出力を並べて表示し、より好きな方に投票します。票が多いモデルは、より多くの人が「使いやすい」と思っていることを意味します。
+
+また、これらの大規模モデルアリーナで謎の匿名モデル（「Unknown Model」）が表示されることがあります。これは通常、「内部テストモデル」がこっそりブラインドテストに参加していることを意味し、より強力な能力に先取りして体験できるチャンスがあるかもしれません。
+
+## LMArena
+
+ウェブサイト：<https://lmarena.ai/>
+
+LMArena は「より多くの人がどのモデルの回答を好むか」を判断するのに適しています。投票数が多く、スコアが高いほど、実際の使用シーンでより安定していることを意味します。
+
+簡単な使い方：
+
+1. リーダーボード（Leaderboard）を直接見る
+2. 目的の方向（一般対話 / プログラミング / ビジョンなど）を選ぶ
+3. トップ3の中で使えるもの（アクセス可能、価格が受け入れられる、遅延が受け入れられる）を選ぶ
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png)
+
+## Artificial Analysis
+
+ウェブサイト：<https://artificialanalysis.ai/>
+
+Artificial Analysis は「効果 / 価格 / 速度」を同じ表で比較するのに適しています。モデル選定のパラメータシートとして使えます。
+
+一般的な使い方：
+
+1. 関心のあるモデルカテゴリ（テキスト / 画像生成など）を見つける
+2. 品質指標（Quality）＋価格（Price）＋遅延/スループット（Latency/Throughput）を見る
+3. 「総合的なコストパフォーマンス」がプロダクトに最も合うものを選ぶ
+
+::: tip ✅ 推奨
+「どちらが強いか」を感覚で議論しないでください。より信頼性のある方法は：同じ入力で2〜3つのモデルを同時にテストし、ランキングと価格を組み合わせて決定することです。
+:::
+
+## まとめ
+
+各種 AI サービスを統合する際、API を複雑に想像する必要はありません。以下の核心的な概念を把握すれば、ほとんどのシーンに対応できます：
+
+**API の本質は通信の橋渡し**です。やっていることはシンプル：あなたのリクエストを送信し、モデルのレスポンスを持ち帰る。背後で何が起きているかを気にする必要はなく、リクエスト形式を正しく組織するだけで済みます。
+
+**SDK は API のラッパー**です。API が raw インターフェースだとすれば、SDK は既成のツールキットです——リクエスト署名、エラーハンドリング、パラメータ検証などの面倒な詳細をすべて処理してくれます。日常の開発では、直接 API を呼び出すより SDK を優先して使うと、多くの手間が省けます。
+
+**ドキュメントを読むときは、3つのことに注目するだけで十分**です：サービスアドレス（endpoint）、認証情報（API key）、呼び出しパラメータの書き方。この3点を明確にすれば、統合は時間の問題です。
+
+残りの作業は、IDE とモダンな開発ツールがやってくれます。ビジネスロジックに集中し、低レベルの呼び出しはこれらの成熟した SDK とツールチェーンに任せましょう。
+
+# 5. 📚 課題：最初の AI 能力を統合する
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 チャレンジタスク：AI 能力をあなたのワークスペースに統合する</div>
+  </template>
+
+  <p>
+    この授業のプロンプトと内容を参考に、完全なクローズドループを完了してください：
+  </p>
+
+  <ul>
+    <li>
+      <strong>完全なクローズドループの実践</strong>
+      <ul>
+        <li>一つの AI サービス（LLM / テキストから画像 / 画像から画像）を選択し統合 → フロントエンドとバックエンドのインタラクションを実装 → プロトタイプに統合</li>
+      </ul>
+    </li>
+    <li>
+      <strong>成果の共有</strong>
+      <ul>
+        <li>機能ページのスクリーンショットをみんなにシェアする</li>
+      </ul>
+    </li>
+    <li>
+      <strong>思考問題</strong>
+      <ul>
+        <li>次の「完全なプロジェクト実践」のために空間を確保し、事前に考える：これらの AI 能力をどのように組み合わせて、面白い機能を作るか？</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## 次のステップ
+
+次のセクションでは、これらの分散した AI 能力を繋ぎ合わせ、実際のビジネスシーンに基づいた完全なプロダクトを作ります：
+
+- コンテンツ企画、商品出品、データ分析などのプロセスを一つの完全なビジネスフローに繋げる
+- この授業で学んだ AI 能力（LLM コピーライティング生成、テキストから画像、画像編集など）を実際のビジネスノードに組み込む
+- 孤立したデモではなく、本当に使える「EC AI ワークスペース」を実装する
+
+<RelatedArticlesSection
+  title="関連記事"
+  description="「単一の AI 能力」から「完全なプロダクトフロー」への推奨学習パス。"
+  :items="relatedArticles"
+/>
diff --git a/docs/ja-jp/stage-1/introduction-to-ai-ide/images b/docs/ja-jp/stage-1/introduction-to-ai-ide/images
new file mode 120000
index 0000000..beb2bbe
--- /dev/null
+++ b/docs/ja-jp/stage-1/introduction-to-ai-ide/images
@@ -0,0 +1 @@
+../../../zh-cn/stage-1/introduction-to-ai-ide/images
\ No newline at end of file
diff --git a/docs/ja-jp/stage-1/introduction-to-ai-ide/index.md b/docs/ja-jp/stage-1/introduction-to-ai-ide/index.md
new file mode 100644
index 0000000..c4741a9
--- /dev/null
+++ b/docs/ja-jp/stage-1/introduction-to-ai-ide/index.md
@@ -0,0 +1,1164 @@
+---
+title: 'AIプログラミングツールの学習'
+description: 'WebのAIプログラミングからローカル開発へ。IDEとAI IDEの違いを理解し、Traeでスネークゲームを作りながら実践フローを学ぶ。'
+---
+
+# 初級二：AI プログラミングツールを学ぶ
+
+## 本章のガイド
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>1 日</strong>、複数回に分けても可'
+const relatedArticles =
+  relatedArticlesMap['zh-cn/stage-1/introduction-to-ai-ide'] ?? []
+</script>
+
+<ChapterIntroduction :duration="duration" :tags="['ローカル開発環境構築', 'IDE と AI IDE', '効率的な開発テクニック']" coreOutput="1つの自作ミニゲーム" expectedOutput="Trae を使用して制作">
+
+前の章では、z.ai で AI プログラミングを体験しましたが、ウェブ版には多くの制限があります——<strong>いつでも保存できない</strong>、<strong>ファイル管理がしにくい</strong>、<strong>複雑なプロジェクトが作れない</strong>。この章は、開発環境を自分のパソコンに移し、<strong>本当に独立してものを作れる</strong>ようにします。
+
+まず <strong>IDE と AI IDE の違いが何か</strong>を明確にし、なぜ後者が<strong>効率を倍増</strong>させるのかを理解します。その後、<strong>手取りで</strong>Trae を使ってローカルでスネークゲームを作り、インストールから実行までの<strong>完全なフロー</strong>を体験します。最後に、AI との対話の<strong>実用的なテクニック</strong>を共有し、遠回りを避けられるようにします。
+
+この章を終えると、<strong>プログラマーと似た開発フローをマスター</strong>できます。
+
+::: tip 💡 上級者向けヒント
+プログラミングの基礎があって、より強力なツールを早めに使いたい場合は、[現代 CLI Coding ツール](../../stage-2/backend/modern-cli/)を参考に、コマンドライン方式で開発することもできます。
+:::
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '環境認知', description: 'IDE と AI IDE を理解' },
+      { title: 'ローカル実践', description: 'Trae でスネークゲームを作る' },
+      { title: 'ツール详解', description: 'IDE の画面に慣れる' },
+      { title: 'コミュニケーションテクニック', description: 'AI と効率よく対話する' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. コードを書くために必要な環境とツール
+
+### 1.1 思考の転換：問題があったら、まず AI に聞く
+
+様々な環境やツールを紹介する前に、まず<strong>思考習慣を変える</strong>必要があります。
+
+従来のプログラミング学習では、Python をインストールしたり、Conda を設定したり、npm のインストール失敗を解決したりするとき、通常は検索エンジンを開き、チュートリアルを見つけて、ステップに従って操作していました。途中でエラーが出たら、さらにエラー情報を検索し、何度も試行錯誤するという方法でした。
+
+間違いです！❌
+
+AI 時代、特に AI IDE を使用する場合、コア原則を覚えておいてください：<strong>どんな操作も、まず AI に聞いてみて、必要なら直接やらせることができます。</strong>
+
+- **環境のインストール方法が分からない？** サイドバーで AI に直接聞く：「Python を書きたいから、Python がインストールされているか確認してくれて。なければインストールして。」
+- **ネットワークが遅い？** 依存パッケージのインストール中に回り続けたりエラーが出たら、エラーをそのまま AI に投げる：「ダウンロードが失敗した。ネットワークの問題？国内のミラーサイトに切り替えてくれない？」
+- **コマンドを覚えられない？** Git コマンドや Conda コマンドを暗記する必要はありません。AI に直接伝える：「新しい仮想環境を作って。名前は demo にして。」
+
+### 1.2 なぜ環境とツールが必要なのか
+
+「数行のコードを書いてみる」ことから「長期的にメンテナンスできるプロジェクトを作る」ことになると、環境とツールに対する要件は完全に異なります。
+
+理論上、システム付属のメモ帳でもコードは書けますが、問題はすぐに起こります：
+
+- **コードがすべて黒い文字**で、キーワード、文字列、コメントが混ざり合って、構造が一目で分からない
+- **インテリセンスがない**、すべての単語を手入力する必要があり、1文字でも間違えると何度も確認し直す
+- **ファイルが増えると混乱する**、十数個のファイルを行き来して切り替え、変更したい行がどこにあるか見つからない
+- **エラーの原因が推測しかできない**、プログラムがクラッシュしてもどこが問題か分からず、1行ずつログを出力して試すしかない
+
+したがって、IDE（統合開発環境）が必要です。IDE はコードを色分けして表示し、入力時に自動補完し、ファイルをプロジェクト単位で整理し、エラーをステップごとに追跡できるため、開発の効率と正確さが大幅に向上します。
+
+## 2. IDE とは何か、なぜ IDE が必要なのか
+
+::: info 予習ヒント
+IDE が何か、各画面要素が何の役に立つかまだ馴染みがない場合は、事前に [IDE 入門](/zh-cn/appendix/2-development-tools/ide-basics) を読んで予習し、IDE の基本概念と一般的な機能を理解してください。
+:::
+
+プログラミングの初期時代は、シンプルなテキストエディタと言語プロセッサだけで十分でした。しかしプロジェクトの複雑さが増すと、開発者はファイル管理、シンタックスハイライト、デバッグを効率的に行うツールを切実に必要とするようになり、IDE（統合開発環境）が誕生しました。
+
+IDE は「コードを編集、管理、実行、デバッグする」ための専用プログラムと理解できます。初期の IDE は非常に「原始的」で、ほぼ完全にキーボード操作でした。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)
+
+ターミナル画面（Terminal） 画像出典：https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
+
+`Vim` のような機能が成熟した「内蔵 IDE」は、サーバーのリモート操作によく使われます。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png)
+
+より効率的にするために、マウス操作をサポートするモダン IDE が必要です。通常、以下を含みます：
+- **ソースコードエディタ**：シンタックスハイライト、自動補完
+- **ビルド＆実行ツール**：内蔵のコンパイラ/インタプリタ
+- **デバッガ**：ブレークポイントデバッグ、変数の確認
+
+モダン IDE にはさらに Git などのツールが内蔵されていることも多いです。最も人気のあるのは Microsoft の **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)** で、軽量で拡張性が高いです。JetBrains 全家桶などの専門 IDE もありますが、VS Code は初学者に最も親和的です。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png)
+
+VS Code のコア理念は「すべてがプラグイン」です。プラグインメカニズムを通じて各言語をサポートし、Python プラグインをインストールすれば Python IDE に、C++ プラグインをインストールすれば C++ IDE になります。プラグインをインストールしなければ、高度なテキストエディタに過ぎません。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png)
+
+Markdown ドキュメントを編集することもできます。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png)
+
+要するに、IDE は開発者が効率的にコードを書き、プログラムを実行するためのツールキットです。
+
+より詳細な解説は、[付録の仮想 IDE 可視化 IDE 原理部分](/zh-cn/appendix/2-development-tools/ide-basics)を参照してください。
+
+## 3. AI IDE と通常の IDE の違い
+
+通常の IDE（例えばオリジナルの VS Code）は本質的に「ツールボックス」です：  
+プロジェクトを開き、コードを書き、実行・デバッグでき、プラグインもインストールできますが、自分が何をすべきか、どうやるべきかを知っていることが前提です：
+
+- エラーが出たら、自分でメッセージを読み、どの行に問題があるか確認する
+- 新しいページや新しい API を追加したいとき、対応するファイルを自分で探し、自分でコードを書く
+- 環境設定やビルドを行うとき、自分でドキュメントを調べ、ステップに従って操作する
+
+しかし AI IDE では、大規模言語モデルを使ってコーディングやファイルの修正を直接支援できます：
+
+- 「ログインページを作って」と言うだけで、まずベースとなるコード構造を自動生成
+- エラーメッセージと関連コードを投げると、原因を分析し修正案を提示
+- 確認後、AI が自動的に新しいファイルを作成し、コードを一括修正し、複数ファイルにまたがる作業を処理
+
+例えば、コードの一部を選択して「リファクタリングして」「コメントを付けて」と言ったり、サイドバーで「このプロジェクトはどう設計されているの？」と聞いたりすることもできます。`@ファイル名` や `@プロジェクト全体` で参照範囲を指定し、一文で新しいファイルの作成、コードの記述、実行までの面倒な操作を自動化できます。
+
+最新版の VS Code には、大規模言語モデルアシスタントが内蔵されています。コードリポジトリ全体、特定のファイル、さらには特定の関数とモデルと対話できます。Web 版で自動コード生成ツールを使ったときと同様に、ニーズをプロンプトとしてコーディング Agent に送信し、機能の実装、ファイルの作成、コードの修正、環境設定などを自動的に行わせることができます。
+
+VS Code をインストールして、右上のサイドバー入口をクリックし、AI 機能領域を開くと、これらの機能を体験できます。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png)
+
+しかし、VS Code は AI 能力が最強の IDE ではありません。大量の AI 補助コーディングが必要なシーンでは、「もっと賢く、効率の良い」ツールを使いたいと思うでしょう——良い AI IDE はコードの記述やバグ修正の時間を大幅に削減できます。以下では、現在比較的人気のある AI IDE をいくつ紹介します。個人の好みに応じてどれでも選んで使えます。
+
+VS Code はオープンソース（誰でもソースコードをダウンロードして自分でコンパイル可能）のため、現在の市場の大多数の AI IDE は VS Code をベースに二次開発されています。したがって「いろいろな IDE を学び直す」心配はありません——<strong>VS Code の基本的な使い方に慣れていれば</strong>、これらの AI IDE に移行しても新しく学ぶ必要はありません。
+
+一般的に、異なる AI IDE 間の違いは主に4つの側面にあります：価格；使用できるモデルの種類（一部の高級モデルは特定の地域で制限される場合がある）；Agent の能力（コーディング支援時の知性と実行力）；実行速度とパフォーマンス。実際のテスト結果に基づいて選んでください。自分に合うものが最高です。
+
+> 典型的な AI IDE は以下のコア能力を備えています：
+>
+> - インテリジェントなコード生成と補完：従来の IDE では、数文字入力して変数名や関数名を補完するのが一般的でしたが、モダン AI IDE では数行の疑似コードや簡単な要件説明で、IDE が完全なロジックを自動補完し、指示に基づいて大段落のコードやモジュール全体を生成することも可能。
+> - コード理解と Q&A：IDE が特定のコード、ファイル、プロジェクト全体のディレクトリ構造に関する質問に理解して回答する。
+> - コードのリファクタリングと最適化：ユーザーの意図に基づいて、指定したコードフラグメントの実装を書き換えたり最適化したりする。
+> - テストの自動生成：各関数やモジュールに対するテストコードを自動生成し、的を絞ったテストが可能。
+> - Agent 式タスク実行：インテリジェント Agent がファイルの生成、パッケージのインストール、実行、コードの修正などを自動で行い、多くのタスクで初級ソフトウェアエンジニアの仕事を部分的に代替可能。
+
+::: details Antigravity
+
+### [Antigravity](https://antigravity.google/)
+
+Antigravity は Google が2025年11月に Gemini 3 とともにリリースした全新の AI IDE で、「Agent-First」（エージェントファースト）開発モードを採用しています。従来の AI 補助コーディングとは異なり、Antigravity は AI エージェントを「能動的な実行者」として位置づけ、エディタ、ターミナル、ブラウザなどのツールを直接操作できるようにします。開発者は高位の意図を伝えるだけで、エージェントがタスクを自動的に分解、計画を策定し、コードを実行し、テストを実行し、成果物を生成します。Gemini 3 Pro、Claude Sonnet 4.5 などの複数のモデルをサポートし、現在パブリックプレビューとして提供され、Windows、macOS、Linux の全プラットフォームをサポートしています。
+:::
+
+::: details Trae
+
+### [Trae](https://www.trae.ai/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png)
+
+Trae は ByteDance がリリースした AI プログラミングアシスタントで、100種類以上のプログラミング言語をサポートし、主流 IDE に統合できます。機能には、自然言語によるコード生成、自動デバッグ、デザイン画を React/Vue コンポーネントに変換などがあります。2025年8月のアップデート以降、Trae はインテリジェントな依存関係のインポート、リネーム提案、タスクリスト管理などの機能を追加。SOLO モードでもバックエンドコード生成と技術アーキテクチャドキュメントの編集をサポートするようになりました。
+:::
+
+::: details Cursor
+
+### [Cursor](https://cursor.com/)
+
+Cursor は Anysphere が開発した AI コードエディタで、VS Code をベースにカスタマイズされ、大規模なコードリポジトリとマルチファイル連携のシーンに最適化されています。GPT-4o、Claude 3.7 などのモデルをサポート。2025年に導入された Claude Max モードでは数百万行レベルのプロジェクトを処理できます。プロフェッショナル版はリクエスト回数の制限が撤廃され、複雑なエンタープライズプロジェクトに非常に適しています。
+
+現在、Cursor は「フロントエンドインターフェース付き AI IDE」の中で総合的な体験が最も良いものの一つで、ユーザー数も多く、機能のイテレーションも頻繁です。最大の欠点は価格が高いこと——プロフェッショナル版は月額約20ドルです。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png)
+:::
+
+::: details Qoder
+
+### [Qoder](https://qoder.com/)
+
+Qoder は Alibaba がリリースした AI IDE で、「透明な協働」と「強化されたコンテキストエンジニアリング能力」を強調しています。Action Flow を使ってタスクを複数のステップに分解し、AI の実行プロセスをリアルタイムで追跡できます。また、マルチモデルの動的ルーティングとタスク状態機管理をサポートしており、中・大規模プロジェクトでのアーキテクチャガバナンスやレガシーシステムの「リバースエンジニアリング」分析に非常に適しています。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png)
+:::
+
+::: details CodeBuddy
+
+### [CodeBuddy](https://www.codebuddy.com/)
+
+CodeBuddy は Tencent Cloud がリリースした AI プログラミングツールで、中国語の指示のサポートとエンタープライズ級のコンプライアンス能力を強調しています。コード補完、バッチコードレビュー、マルチモデル切り替えなどの機能を提供。Craft インテリジェントはマルチファイルのコード生成と API 統合を実現できます。エンタープライズ版はプライベート環境でのデプロイをサポートし、レベル3等保認証を通過しており、金融、医療などデータセキュリティ要件が高い業界に適しています。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png)
+:::
+
+::: details VS Code + Cline
+
+### VS Code + [Cline](https://cline.bot/)
+
+Cline は VS Code（Visual Studio Code）の AI プログラミング Agent プラグインで、異なる API エンドポイントを設定することで使用する大規模言語モデルを柔軟に切り替えることができます。Cline はマルチモーダル入力、MCP ツール拡張、コストモニタリングをサポートし、すべての操作はユーザーの確認後に実行されます。アイデアの迅速な検証や、既存の開発フローへの統合に非常に適しています。基本機能は無料で、エンタープライズ版はプライベート環境でのモデルデプロイをサポートしています。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png)
+:::
+
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro は AWS（Amazon Web Services）がリリースした AI プログラミング IDE で、Amazon Bedrock と AWS クラウドサービスエコシステムに深く統合されています。Claude、Nova などの複数の大規模モデルをサポートし、AWS クラウドサービスと緊密に統合する開発シーンに特に適しています。Kiro はインテリジェントなコード生成、自動テスト、AWS リソース（Lambda、S3、DynamoDB など）とのシームレスな接続能力を提供し、クラウドネイティブアプリ開発に独自の強みがあります。
+
+> **注意：** Anthropic Claude 関連のモデルを使用したい場合、Cursor、Kiro、または Antigravity を IDE として使用する必要があります。これらの IDE は Anthropic と公式提携または深い統合があり、より安定した完全な Claude モデル体験を提供できます。
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '環境認知', description: 'IDE と AI IDE を理解' },
+      { title: 'ローカル実践', description: 'Trae でスネークゲームを作る' },
+      { title: 'ツール详解', description: 'IDE の画面に慣れる' },
+      { title: 'コミュニケーションテクニック', description: 'AI と効率よく対話する' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. 実践：AI IDE を使ってローカルでスネークゲームを生成する
+
+前のセクションでは主に「概念」と「違い」について説明しました。このセクションでは、完全な実践を通じて抽象的な概念を具体的な操作に落とし込みます：**空のフォルダを作成 → AI IDE で開く → サイドバーでチャットし、React でスネークゲームをゼロから生成。** ここでは上記で紹介した Trae を例にします。
+
+::: tip 💡 ヒント：ウェブからローカルへのシームレスな移行
+以前に z.ai や他のウェブ版 AI プログラミングプラットフォームでプロジェクトを開発したことがあれば、コードをダウンロードしてローカルに持ってきて、AI IDE で開き続けて開発できます。これにより以前の成果を保持しつつ、ローカル IDE のより強力な AI 補助機能を活用できます。
+
+操作手順は非常にシンプル：
+1. z.ai などのプラットフォームでダウンロードボタンをクリックし、プロジェクトをローカルに保存
+2. 解凍後、Trae/Cursor などの AI IDE でそのフォルダを開く
+3. サイドバーで AI と対話を続け、プロジェクトを反復・最適化
+:::
+
+### 4.1 準備：Trae のインストールと概要
+
+#### 4.1.1 Trae とは
+
+Trae の正式名称は "The Real AI Engineer" と理解でき、ByteDance が開発した適応型 AI IDE です。人気のある VS Code をベースに構築されているため、すでに VS Code に慣れているなら、Trae のインターフェースレイアウトや基本操作は非常に馴染みのあるものになるでしょう。
+
+Trae のコア目標は開発者の「インテリジェントなプログラミングパートナー」になることです。AI 能力を深く統合することで、大量の反復作業を自動処理し、より直感的で効率的な開発体験を提供します。単なる「コード補完ツール」ではなく、プロジェクトの作成、コードの記述、デバッグ、テストからデプロイまでの開発ワークフロー全体をサポートします。
+
+#### 4.1.2 Trae のインストール
+
+Trae は国際版と中国版に分かれています。国際版は海外ネットワークへのアクセスが必要ですが、GPT-5 などの最新の海外モデルが使用可能。中国版は主に国内の最新の大規模モデルをサポートし、例えば GLM、Qwen、Kimi などを使用できます。
+
+国際版ダウンロード：https://www.trae.ai/
+中国版ダウンロード：https://www.trae.cn/
+
+##### Trae の料金と使用方法
+
+::: info 💡 バージョン選択のヒント（初心者は CN 版を推奨）
+- **初心者は中国版（CN 版、trae.cn）を強く推奨。** 現在の使用体験がより良く、基本機能は無料で、海外ネットワーク不要
+- GPT-5 などの海外モデルを使用したい場合、ネットワーク条件が許せば国際版を選択
+- サードパーティの API Key を既に持っている場合、サードパーティモデルを統合することでコストを柔軟に制御可能
+:::
+
+> 💡 **現在 OpenRouter の無料モデルを使ったテストを推奨**
+>
+> チチュートリアル執筆時点（2026-02-12）の時点で、StepFun のモデルを無料で試用できます。詳細は以下の 4.2 セのモデル統合方法を参照し、`stepfun/step-3.5-flash:free` を統合してください。
+>
+
+Trae の料金と使用方法には以下のオプションがあります：
+
+- **中国版 CN 版（強く推奨）**：基本使用は無料、現在の全体の使用体験が国際版より優れており、初心者に最適。ユーザー数が多いため一時的に順番待ちが発生する場合があります。
+- **国際版**：月額約3ドルのサブスクリプションで利用可能。GPT-5 などの海外モデルにアクセスできるが、海外ネットワークへの接続が必要。
+- **サードパーティモデル統合**：DeepSeek、通義千問（Qwen）、Kimi などの国内大規模モデルの Token API を既に持っている場合、Trae のサードパーティモデル設定機能でこれらの API を統合して使用可能。各クラウドサービスプロバイダ（Alibaba Cloud、Tencent Cloud、Baidu Cloud など）は通常 Coding Plan サブスクリプションを提供しており、購入するとそのクラウドベンダーの大規模モデル API をより安価に使用できます。自分の好きなモデルを自由に選びながらコストを制御できます。
+
+初心者は中国 CN 版の無料版から始めることをお勧めします（ダウンロード：https://www.trae.cn/ ）。現在 CN 版の方が使用体験が良く完全に無料です。順番待ちの問題が発生したら、サードパーティモデルの統合やクラウドベンダーの Coding Plan プランの購入を検討してください。
+
+#### 4.1.3 Trae の画面の概要
+
+インターフェースの見た目は、Trae は日常的に使っている VS Code と非常に似ています：左側にエクスプローラー、中央にエディタ、右側に拡張パネルという古典的な3カラムレイアウトです。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png)
+
+右側のサイドバーが Copilot インタラクションウィンドウ、または Agent ウィンドウとしても機能します。表示されていない場合は、Trae 右上のサイドバーアイコンをクリックして開いてください。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png)
+
+サイドバーを開くと、`Builder` オプションが表示されます。これが Agent モードです。シンプルに理解すると、z.ai の「ローカル版」のようなもので、ローカル環境で操作を実行し、環境をインストールし、ウェブページを開いたりできます。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png)
+
+"Builder" をクリックすると、"Chat" モードと "Builder with MCP" モードが表示されます：
+
+- **Chat モード**：主に現在のフォルダ内のコードと対話する、または通常のチャットモデルとして使用。（左上の "File" メニューからフォルダを開くことができます。この場合、Builder が作成・変更するファイルはすべてそのフォルダ内に限定されます。）
+- **Builder with MCP モード**：Agent に更多のツールを提供（例えば、言語モデルを他のソフトウェアと接続したり、天気をクエリしたりなど）。簡単に言うと、MCP は言語モデルに様々な外部ツールを呼び出すことをより便利にします。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)
+
+下のエリアにはモデル選択オプションがあり、クリックすると現在の大規模モデルを変更できます。中国版では Kimi k2 や GLM などの国内モデルを選択可能。国際版 Trae を使用している場合は ChatGPT や Claude などの海外モデルも選択可能。ただし、国内大規模モデルの発展は非常に速く、Kimi、Qwen、GLM などは多くのタスクで Claude 3.5 や 3.7 に近い実力を既に備えており、日常の開発には十分すぎるため、国際版か中国版のどちらを使用しても構いません。
+
+**注意：Auto モード（モデルを自動選択）の使用は推奨しません。** 国際版の場合は Gemini または GPT モデルを、中国版の場合は Kimi k2、Minimax、GLM などの国内モデルを推奨します。** 異なるモデルには異なる使用シーンがあり、教条的にどれが優れているかを断定するものではありません。**異なるタスクで行き詰まったらモデルを切り替え、複数回テストして自分にとって最適な結果を得てください。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png)
+
+以上が Trae の簡単な紹介です。次に、以前 z.ai で行った操作を振り返り、Trae で同じことを試してみましょう。
+
+### 4.2 ステップ1：空のフォルダを作成し AI IDE で開く
+
+実際に作業を始める前に、まずクリーンなプロジェクトワークディレクトリを準備する必要があります。
+
+このセクションの例では、ローカルに `snake-game-react` という名前の空フォルダを作成します。
+
+その後、インストール済みの AI IDE を開き、起動画面で "Open Folder" を選択し、その空のフォルダをプロジェクトルートとしてインポートします。または、フォルダを IDE のウィンドウにドラッグ＆ドロップして開くこともできます。この時点で、左側のエクスプローラーにはコードファイルが何も表示されず、完全に空白のプロジェクト状態から始まることを示しています。
+
+::: details 📚 オプション：クラウドサービスの API または Coding Plan の統合
+
+このセクションでは、クラウドサービスの API または Coding Plan を統合する方法を紹介します。最後に Trae での統合のスクリーンショットを含みます。
+
+**Coding Plan とは**
+
+Coding Plan は各クラウドサービスプロバイダーが提供するサブスクリプションプランで、購入すると一定期間内に<strong>無制限または高頻度で</strong>そのクラウドベンダーの大規模モデル API を使用できます。Token 単位課金よりも Coding Plan の方が「月額固定料金」のようなもの——一定の固定料金を支払えば、気兼ねず何度でも呼び出せるため、毎回の呼び出し課金を気にする必要がありません。
+
+**なぜ Coding Plan を購入するのか？**
+
+「直接 API を呼び出せるのに、なぜわざわざ Coding Plan を購入する必要があるの？」と思うかもしれません。主な理由は：<strong>いつでも自由に使える。</strong>Coding Plan の最大のメリットは、いつでも頻繁に大規模モデルを呼び出せ、費用が爆発する心配や、頻繁に課金テーブルを確認する必要がないことです。
+
+**推奨国内クラウドサービスの Coding Plan**
+
+以下は国内主流クラウドサービスプロバイダーが提供する Coding Plan の推奨オプションです：
+
+- 智譜 AI（BigModel Plan）：https://bigmodel.cn/glm-coding  
+- 火山引擎（ByteDance Cloud AI Plan）：https://www.volcengine.com/activity/codingplan
+
+> 💡 **大規模モデル API を直接統合することも可能**
+> Coding Plan 以外にも、Add Model で各モデルの API を直接統合できます。以下の OpenRouter StepFun 無料 API を統合する方法を参考に、Trae に API を統合して使用できます。テスト済みで基本的なプログラミングニーズを満たします。
+> 充填する場合は、まず10元チャージしてどれくらい使えるか体験するのがおすすめです。例えば DeepSeek などのコストパフォーマンスの高いモデル
+>
+**Coding Plan の統合手順：**
+
+Coding Plan の統合は数分で完了します：
+
+1. 選択したクラウドサービスプロバイダーの公式サイトにアクセス（例：智譜 AI https://bigmodel.cn/glm-coding 、火山引擎 https://www.volcengine.com/activity/codingplan）
+2. アカウントを登録してログイン
+3. "料金" または "Coding Plan" ページを見つける
+4. 適切なプランを選択して支払いを完了
+5. 支払い成功後、API Key または Plan ID が得られます
+
+::: tip 🎯 カスタムモデル推奨
+
+Trae でカスタムモデルを統合する際、<strong>デフォルトで OpenRouter 方案を推奨</strong>します。OpenRouter は統一 API インターフェースを提供し、複数の大規模言語モデルを便利に統合できます。
+
+**2026年2月12日時点で、無料の StepFun API も利用可能です：**
+
+- **`stepfun/step-3.5-flash:free`**：StepFun（階跃星辰）が提供する無料モデル。Trae で直接統合して使用可能。
+
+**その他の無料モデル：**
+
+- **`openrouter/free`**：無料 LLM API をデフォルトで使用するモデルオプション。Trae の Custom Model 統合でそのまま使用可能（モデル ID を直接入力するだけ）。無料で AI プログラミング機能を体験できます。
+
+これらの無料オプションは初心者に最適です。本格的な本番環境に導入する前に、無料方案で AI IDE のワークフローに慣れることができます。
+
+**オプション：大規模モデル API の統合（DeepSeek の例）**
+
+1. DeepSeek プラットフォームにアクセス：https://platform.deepseek.com/usage
+2. アカウントを登録してログイン
+3. チャージページで10元の Token パッケージを購入
+4. 充電完了後、API Keys ページで API Key を作成してコピー
+5. Trae で **"Add Model"** をクリックし、DeepSeek を選択、対応するモデルを入力、API Key を入力して使用可能
+
+以下の画面で、カスタムモデルを追加できます。（注意：モデル選択のオプションの後【必ず最後までスクロール】し、下部に「自定义模型」があるのでクリックしてモデル ID を入力。上記の推奨モデル ID である `stepfun/step-3.5-flash:free` を直接入力。同時に下部の "Get Key" をクリックして公式サイトにアクセスし、対応する API Key を入力すれば正常に使用できます。）
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png)
+:::
+
+### 4.3 ステップ2：サイドバーでチャットし、AI に React でスネークゲームを設計させる
+
+AI チャットサイドバーを開きます：通常は `Ctrl+L` または右側のチャットアイコンをクリックします。チャットに以下のように明確なプロンプトを入力します：
+
+> React を使ってスネークゲームを実装してください。キーボード操作、食べると伸びてスコアが加算、壁や自分の体にぶつかると「ゲームオーバー」を表示し、リスタートをサポートする。実装後にプロジェクトを起動してください。インストールされていないプログラム環境があれば自動的にインストールしてください。
+
+このプロセスでは、AI は単なるチャットモデルではなく、ローカル環境を操作できることに注意してください。自然言語で達成したい目標を記述し、AI に具体的な実行手順を決めさせます。
+
+実行中に問題が発生した場合、AI は対話内にエラーと処理方法を表示します。対話を続けることで修正でき、すべてのコマンドの詳細を覚える必要はありません。
+
+::: warning ⚠️ 注意
+例えば下図のように、<strong>AI Agent が実行中に一時停止することがあります。これはユーザーの入力を待っているため</strong>です。例えば、作成する名前の入力、Enter でコマンドの実行確認、またはコマンドのクリックなど。通常はそのまま Enter を押せば問題ありません。このステップで何をすべきか分からない場合は、現在の画面のスクリーンショットを撮って AI に聞いてください。
+:::
+
+以下の図では、Run をクリックして確認する必要があります：
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png)
+
+以下の図では、y を入力して確認するだけです：
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png)
+
+以下の図では、テンプレートを作成中ですが操作方法が分からず、AI に質問する例です：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png)
+
+AI Agent が実行中に一時停止するもう一つの原因は、"サービス"が開始されたためです。スネークゲーム自体が一種の"サービス"であり、以下のような URL が表示されたら、Agent がローカルでサービスを起動したことを意味します。対応する URL にアクセスしてスネークゲームを遊ぶことができます。サービスを継続的に実行する必要があるため、ここで一時停止します。`Skip` ボタンをクリックしてください。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png)
+
+このプロセスで、聞き慣れない用語や理解できない内容に遭遇しても、心配ありません。付録の「コンピュータ用語解説」を参照するか、AI に直接質問したり、その場で質問してください。
+
+期待通りの結果にならない現象に遭遇した場合、例えばスネークが壁にぶつかってもゲームオーバーにならない、クリックしてスタートしても動かないなどの場合は、サイドバー Agent に現象を記述してください。エラーが発生した場合は、スクリーンショットまたはエラーメッセージをコピーしてサイドバー Agent に投げます。複数回修正しても解決しない場合は、モデルを変更してみてください。
+
+しばらくすると、z.ai と同様の結果が得られます：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png)
+
+右下のチェックマークをクリックしてコードの変更を確定することもできますし、`Cancel` ボタンで変更を取り消すこともできます。または `2 files need review` の箇所を展開して変更後のコードを確認することもできます。
+
+ここで注意すべき点として、コードの修正が必ず正しいとは限らないことです。すべての IDE の Agent はコードのロールバックをサポートしています。例えば、誤って変更操作を行った場合や、今回の操作結果に不満な場合、修正完了後に戻って入力フィールドに移動し、`Revert` ボタンをクリックして操作前の状態に戻すことができます。入力するテキストを修正して再度実行できます：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png)
+
+### 4.4 ステップ3（オプション）：AI にコードの実装の詳細を聞く
+
+スネークゲームが正常に動作するようになったら、フロントエンドや React にまだ不慣れている場合は、同じチャットウィンドウで AI にできるだけ口語的な表現でコードの解説を依頼できます。ツールを切り替える必要はなく、ドキュメントをあえて暗記する必要もありません。現在のプロジェクトを中心に質問し続けるだけで構いません。
+
+実用的なアプローチは、AI にまず「ゲームがどう動くのか」を全体像で説明させ、その後、具体的な詳細に深掘りすることです。例えば以下のように質問できます：
+
+> 「上から順に説明して。このスネークゲームが1ステップずつどう動くのか？専門用語はできるだけ使わないで。」
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png)
+
+その後、回答に沿ってさらに核心的な点を質問します。例えば：
+
+> 「画面上の蛇の体の各節は、どのようなデータ構造で記録されているの？例えで説明して。」  
+> 「"一定時間ごとに動く"というのをコードのどの部分で実現しているの？どこがその部分？」  
+> 「食べ物を食べたとき、具体的にどのような処理を行うか？どのロジックで食べたことを判断するのか？」
+
+`SnakeGame.tsx` のようなファイルを見つけたものの、完全に内容が分からない場合も、直接 AI に分割して説明してもらうことができます：
+
+> 「`SnakeGame.tsx` を機能ごとにいくつかのブロックに分けて説明して。各ブロックがだいたい何をしているか、分かりやすい言葉で。」
+
+このラウンドの対話では、理解できない用語をすべて質問の入り口として使えます。例えば：
+
+> 「さっき言った"状態"って具体的に何？生活の中の例で説明して。」  
+> 「さっき言った"タイマー"はここで主に何をするの？それを削除するとどうなる？」
+
+このアプローチの目標は、すべての概念を一度に覚えることではなく、以下の3点を理解することです：このゲームにはどのようなコアデータがあるか（蛇、食べ物、スコア、ゲーム状態など）、これらのデータがいつ変化するのか（移動、食べ物、ゲームオーバーなど）、それぞれの変化にどのコード部分が対応しているのか。この3点が整理できれば、このコードの主要なロジックは理解できます。
+
+### 4.5 ステップ4：AI に画面を見栄え良くする
+
+ここで初心者にとって重要な注意点があります。「画面をもっと良くして」とAI に一言で言うのはやめましょう。この言い方は人間のデザイナーにとっても曖昧すぎます。ましてやモデルに——「見栄えが良い」とはどういうスタイルなのか、どこを修正すべきのか、レイアウトの問題なのか配色の問題なのか、AI にはこの一文から読み取れるものは何もありません。AI に本当に希望する効果に近づけるには、この曖昧な目標を具体的で実行可能な小さな要件に分解する必要があります。
+
+例えば、多くの人が最初にこう言います：
+
+> 「画面をもっと良くして。」
+
+例えば、以下のように具体的な要件を先に出すことができます：
+
+> 「ゲームエリアを中央に配置し、左上隅に貼り付かない。背景色は明るめにして、蛇と食べ物が目立つように。スコアを大きくして目立つ場所に配置。ブルーをメインカラーにし、全体の配色とボタンを美しくしてください。」
+
+"ゲームオーバー"時にさらに明確なフィードバックが欲しい場合は、さらに追加できます：
+
+> "ゲームオーバー時、画面中央に「ゲームオーバー」と表示し、その下に「リスタート」ボタンを配置してゲームをリセットできるようにしてください。"
+
+AI は記述に基づいて React コンポーネントとスタイルを直接修正します。保存してブラウザをリフレッシュすると、新しい画面が表示されます。まだ希望通りの効果でなければ、小さなステップで調整を繰り返すことができます。例えば：
+
+> 「スコアをもっと大きくして、色をもう少し目立つ色に。」  
+> 「ゲームエリアをもっとコンパクトにして、周囲に余白を確保。」  
+> "リスタートボタンをブルーの丸角スタイルにして、プロンプトの下に中央配置。"
+
+この段階で、修正後にエラーが発生しても、自分で解決する必要はありません。エラー情報をそのままチャットウィンドウにコピーするか、簡単な説明を添えて AI に現在のプロジェクトコンテキストで修正してもらうことで解決できます。この「対話し、修正、リフレッシュ」のサイクルを通じて、動く Demo を段階的に磨き上げることができます。
+
+### 4.6 （オプション）z.ai のアーキテクチャを参考にスネークゲームを改良する
+
+Vibe coding 初心者にとって最も難しいのは、"ベストプラクティス"が何かわからず、"どんなアーキテクチャが最適か"がわからないことです。しかし、コンピュータの基礎がないため、AI をうまく誘導できないという問題があります。解決策は"直接参考する"ことです——以前に z.ai でコードを確認したことを覚えていますか？実は README（プロジェクトの機能と技術アーキテクチャを紹介する部分）にベストプラクティスの参考が記載されています：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png)
+
+README の全内容をコピーして Trae のサイドバーに貼り付け、README のアーキテクチャに基づいてローカルのコードを修正させます。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png)
+
+最終的に z.ai と非常に似たページデザインスタイルが得られます：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '環境認知', description: 'IDE と AI IDE を理解' },
+      { title: 'ローカル実践', description: 'Trae でスネークゲームを作る' },
+      { title: 'ツール详解', description: 'IDE の画面に慣れる' },
+      { title: 'コミュニケーションテクニック', description: 'AI と効率よく対話する' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 5. 画面上の各ボタンは何をするのか
+
+上記の操作で、最小限のプログラム生成クローズドを迅速に完了しましたが、IDE にまだ慣れているとは言えません。今後長期に使うこのツールに完全に慣れるために、このセクションで IDE の各詳細を深く解説します。異なる AI IDE で画面は多少異なりますが、大部分は [VS Code のレイアウト](https://code.visualstudio.com/docs/getstarted/getting-started) を踏襲しています。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp)
+
+各部分の具体的な役割：
+
+- **Title Bar（タイトルバー）**：ファイル名とウィンドウ制御ボタンを表示
+- **Activity Bar（アクティビティバー）**：ファイル、検索、機能ビューなどの切り替え
+- **Side Bar（サイドバー）**：ファイルリストなどの具体的な内容を表示
+- **Editor Groups（エディタグループ）**：コードを記述するコアエリア
+- **Breadcrumbs（パンくずナビ）**：ファイルパスを表示、ジャンプ可能
+- **Minimap（コードミニマップ）**：コードの全体像を素早く確認
+- **Panel（ボトムパネル）**：ターミナルと出力ウィンドウを含む
+- **Status Bar（ステータスバー）**：現在の環境状態を表示
+
+より詳細な解説は、[付録の仮想 IDE 可視化 IDE 原理部分](/zh-cn/appendix/2-development-tools/ide-basics)を参照してください。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '環境認知', description: 'IDE と AI IDE を理解' },
+      { title: 'ローカル実践', description: 'Trae でスネークゲームを作る' },
+      { title: 'ツール详解', description: 'IDE の画面に慣れる' },
+      { title: 'コミュニケーションテクニック', description: 'AI と効率よく対話する' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 6. AI とどう話せば効果的なのか
+
+AI の能力がますます強くなり、私たちは多くの「プログラマーにコードを書かせる」仕事を AI に任せることができるようになりました。  
+しかし、実際に使用すると、同じ AI を使っても、数文で使える小さなプロジェクトを作れる人と、半日チャットしたのに全く意図と異なる結果になる人もいます。その違いは「誰がより賢い」からではなく——<strong>あなたが AI と話す方法が、十分に具体的で、十分にステップバイステップであるかどうか</strong>にあります。
+
+このセクションでは、いくつかの一般的なシーンから、完全な初心者向けの質問方法を紹介し、AI に安定して使える結果を得る方法を学びます。
+
+### 6.1 ニーズを明確にする：「曖昧なアイデア」から「具体的な説明」へ
+
+多くの人が AI を初めて使うとき、非常に大雑把に一言だけ言う傾向があります。例えば：
+
+> 「ウェブページを作って。」  
+> 「小さなアプリを作って。」
+
+この場合、AI は「何を作ればいいか」を自分で推測するしかなく、適当に見た目は立派なものを作ってしまいますが、あなたが本当に作りたかったものとは大きく異なる可能性があります。
+
+<strong>AI に伝えるべきことは、脳内のアイデアをいくつかの文に分解して、一つずつステップバイステップで伝えることです。</strong>
+
+以下の側面から補足するとより効果的です：
+
+1. **それに何を使いたいのかを伝える**  
+   例えば「個人紹介ページ」だけではなく、「1ページだけのシンプルな個人紹介ページを作りたい。採用する人に見せるために使いたい」と言えばより具体的です。
+   - 「1ページだけのシンプルな個人紹介ページを作りたい。採用する人に見せるために使いたい」
+
+2. **画面に何を置きたいかを伝える**  
+   専門用語を使う必要はありません。表示したいものを描写するだけで構いません。
+   - 「ページに3つの部分を置きたい：上に名前と一言の自己紹介、真ん中に数条の仕事経験、下にメールアドレスとWeChat ID」
+
+3. **自分のレベルと制約を伝える**  
+   AI に初心者向けのシンプルな書き方をさせます。
+   - 「コードは全く書けない。ブラウザで開ける完全なコードを1つのファイルにまとめてほしい。」
+
+4. **結果の受け取り方を伝える**  
+   例：
+   - 「`index.html` という名前で保存し、ブラウザで開けるようにしてほしい」
+
+これらの情報を整理すると、AI に以下のように伝えることができます：
+
+> 「コードは全く書けない。ブラウザで開ける完全なコードを1つの `index.html` ファイルにまとめてほしい。1ページだけのシンプルな個人紹介ページを作りたい。採用する人に見せるために使いたい。ページに3つの部分を置きたい：上に名前と一言の自己紹介、真ん中に数条の仕事経験、下にメールアドレスとWeChat ID。」
+
+このように情報を明確に伝えると、AI はあなたの真のニーズに近い結果を出力してくれます。
+
+### 6.2 リズム：まず「動くもの」を作り、その後少しずつ複雑にする
+
+完全な初心者によくあるよくある罠は、最初から「非常に完成度の高い」「機能が多い」ものを作ろうとすることです。  
+例えば：
+
+> 「淘宝のようなサイトを作って。」  
+> 「登録、ログイン、注文システムを作って。」
+
+結果として、AI は大量のコードを出力しますが、コピーしても開けない、またはあちこちエラーばかりです。コードを見てもどこが問題なのか分からず、最終的に諦めることになります。
+
+より適切なアプローチは、<strong>意図的にリズムをコントロール</strong>し、AI に1ステップずつつ進ませることです：
+
+1. **第1ステップ：まず「最小限の例」を作る**  
+   ブラウザで何かが表示されるかを確認するだけ。
+   例：
+   > 「まず最もシンプルな例を作ってほしい。ブラウザで『これは私のホームページ』と表示されるだけでいい。ファイル名は何にすべきか、どう保存して、どう開くかまでステップバイステップで教えて。」
+
+2. **第2ステップ：その上に徐々に内容を追加する**  
+   「本当に表示された」と確認した後に追加します。
+   > 「確認できた。その上で、『仕事経験』のエリアを追加して。完全なコードを再度送ってほしい。変更部分だけではなく、全体を送ってほしい。」
+
+3. **第3ステップ：構成がある程度になったら見栄えを改善する**  
+   例：
+   > 「ページは正常に表示できるようになった。次に見栄えを少し良くしたい。全体を中央配置に、タイトルを大きくし、見やすいフォントを使ってほしい。更新後の完全なコードを送ってほしい。」
+
+各ステップごとに実行して確認し、次に進むことで、どこかで問題が起きた場合でもすぐに「前の動いていたバージョン」に戻ることができます。すべてを一度にやろうとするのではなく、1ステップずつ進めることが重要です。
+
+### 6.3 スクリーンショットとコピペースを活用：分からないことは「画面を AI に投げる」
+
+完全な初心者が直面する難しさの多くは、「コードが分からない」ことではなく、<strong>「問題をどう表現すればよいか分からない」</strong>ことです。
+
+例えば：
+- ブラウザに突然大量の英語のエラーが表示され、全く理解できない
+- ウェブページのレイアウトが思った通りにならないが、どう表現すればよいか分からない
+
+これらの場合、専門用語を使って説明する必要はありません。最もシンプルな方法は——<strong>見ているものをそのまま AI に投げる</strong>ことです。
+
+具体的には以下のようにできます：
+
+1. **エラーメッセージをコピーする**  
+   大量の赤いエラーメッセージが表示されたら、そのままコピーして AI に送り、以下のように言います。
+
+   > 「実行後に表示された完全なエラーメッセージです。英語が読めません。普通の人が理解できる言葉で、これが大まかにどんな問題か説明して。その後、どうすればいいか教えて。」
+
+2. **AI に画面のスクリーンショットを見せる**  
+   「このページの表示がおかしい」と思っているが、どう表現すればよいか分からない場合、スクリーンショットを撮って AI に送り、コード全体を一緒に送ります。そして言います：
+     > 「これが現在のページです。これは私の現在の完全なコードです。私は元々 3列レイアウトにしたかったのに、1列になった。原因と修正方法を教えて。」
+
+3. **気に入ったウェブページを参考にする場合**  
+   違切にウェブページを開いたり、スクリーンショットやタイトル、段落をコピーして AI に送ります。
+     > 「この構造のページを作りたい。同じような構造で、私のテキストに合わせてコードを修正して。」
+
+簡単に言えば：あなたの役割は「見ているものを AI にそのまま持っていく」こと。そして「どうしたいか」を最も素朴な言葉で伝えること。残りの「翻訳してコードにする」「専門用語を調べる」は AI に任せましょう。
+
+### 6.4 AI が生成したコードが動かない時：汎用的な対処法
+
+実際の練習で、必ず次の状況に遭遇します：  
+AI は真剣に良さそうなコードを出力しましたが、あなたがそのままコピペして実行しても、ブラウザは真っ白だったり、AI が言っていた効果とは全く異なる。
+
+これはあなたが「学べられない」わけではなく、AI も完全に正しいわけでもありません。あなたと AI の間に<strong>数ラウンドの「往復確認」</strong>が不足しているだけです。
+
+コードが「動かない」場合、以下の固定フローで AI に伝えてください：
+
+1. **「自分が何をしたか ＋ 現在どうなのか」を明確に記述する**  
+   「開いたらページは完全に真っ白」「xxxx ページージを開いたが、そこに言及されている部分がない」といったように、具体的に描写。
+
+2. **現在の完全なコードを AI に送る**  
+   多くの場合、問題はコピー時に一部が欠けているか、前回と今回のコードが混ざっていることです。
+   > 「以下が私の現在のファイルの全コードです。何か不足している部分や、間違っている部分がないか確認して。修正済みの完全なコードを送ってほしい。一部だけではなく全体を送ってほしい。」
+
+3. **エラーがあれば併せて送る**  
+   例えばブラウザ右上角にポップアップエラーが表示されたり、下部に赤い文字が表示されたりした場合、エラー文字列をコピーまたはスクリーンショットを取り、以下のように伝えます。
+   > 「これは表示されたエラーです。全く理解できません。まず普通の人が理解できる言葉で、これが大まかに何の問題か説明して。その後、どの行を修正すればいいか教えて。」
+
+4. **「初心者モード」でステップバイステップで説明させる**  
+   自分の状況を明確にし、AI に省略せずに中間ステップも含めて説明させます。
+   > 「コードは全く書けません。ステップバイステップで教えて：
+   > 第1歩で何の行を修正するのか
+   > 第2歩でどう保存するのか
+   > 第3歩でどうリフレッシュするのか
+   > 各ステップは完全な文章で書いてほしい。」
+
+5. **「正しい動作時の姿」を AI に聞く**  
+   > 「修正後のコードが正常に動いた場合、ブラウザで何が表示されるか教えて。」
+
+このフローに従って AI と対話すれば、大部分の「コードが動かない」問題は数ラウンドの往復で解決できます。同時に、一般的な問題パターンも次第に似た状況で遭遇したときに自分で解決できるようになります。
+
+## 7. まとめと次のステップ
+
+この章では、ウェブブラウザで AI 生成のスネークゲームを遊べるレベルから、ローカルの AI IDE を使って自作のミニゲームを構築するレベルにアップグレードしました。主に3つのことが理解できました：なぜコードを書くときに VS Code のような IDE が必要なのか。VS Code に AI（Trae、Cursor など）を追加すると、IDE は単なるツールボックスではなく、自然言語を理解し、ファイルの新規作、環境のインストール、コードの修正などを自動で行う「インターンエンジニア」が追加されること。そして IDE の各エリア（左側のファイル、下のターミナル、中央のエディタ、右側の AI パネル）がそれぞれ何を管理しているのかがわかり、使用時に迷子になることはなくなりました。
+
+さらに重要なこととして、1回の完全なフローを実際に実行しました：ローカルで空のフォルダを作成 → AI IDE で開く → サイドバーでニーズを記述 → AI にプロジェクトを生成させ開発サーバーを起動 → 問題が発生したら「現象＋全コード＋エラーのスクリーンショット」を一緒に AI に送り、AI に「初心者モード」でステップバイステップで修正させる。
+
+この過程で、AI との効果的な対話方法も練習しました：目標と内容構造と自分のレベルを明確に伝え、リズムをコントロールし、「まず動くもの」を作ってから「見栄えを良くする」へと段階的に進める。
+
+次の章では、「使えるツール」から「本当に人が使いたいプロトタイプ」へと焦点を移します。ユーザー視点からルール、インタラクション、フィードバックを設計し、AI にこれらのアイデアを実装させます。
+
+## 8. 📚 課題：ローカル AI IDE でもう少し複雑なゲームを作る
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 チャレンジタスク：あなたの専用ゲームを作る</div>
+  </template>
+
+  <p>
+    ローカル AI IDE でスネークゲームを作った経験があります。今度はもう少し複雑なミニゲームに挑戦し、完全なフロー「ニーズ記述 → プロジェクト生成 → ローカルで実行 → デバッグとイテレーション」を体験してください。
+  </p>
+
+  <ol>
+    <li>
+      <strong>スネークより複雑なゲームを選ぶ</strong>
+      <ul>
+        <li>「ロシアンブロック」「もぐらたたし」「地雷探し」「2048」「飛行機大戦」などが考えられます</li>
+        <li>または自分で想像したシンプルなオリジナルゲーム</li>
+      </ul>
+    </li>
+    <li>
+      <strong>必ずローカル AI IDE を使用すること</strong>
+      <ul>
+        <li>空のフォルダを作成し、AI IDE で開く</li>
+        <li>サイドバーでチャットでゲームのニーズを明確に記述</li>
+        <li>AI にファイルの作成、プロジェクト構造の構築、主要ロジックの実装を行わせる</li>
+        <li>ローカルで開発サーバーを起動し、ゲームが正常に動作することを確認する</li>
+      </ul>
+    </li>
+    <li>
+      <strong>基本的な「遊びやすさ」とフィードバックがあること</strong>
+      <ul>
+        <li>少なくとも「開始」「進行中」「終了」の3つの状態を含める</li>
+        <li>明確な操作方法がある（キーボードまたはマウス）</li>
+        <li>画面上に明確なスコアや進捗のフィードバックがある</li>
+      </ul>
+    </li>
+    <li>
+      <strong>2回以上のイテレーションを行う</strong>
+      <ul>
+        <li>第1ラウンド：AI に「遊べる」バージョンを作らせる</li>
+        <li>第2ラウンド以降：具体的な改善を段階的に指示する（スタイル、難易度、インタラクション最適化など）</li>
+      </ul>
+    </li>
+  </ol>
+</el-card>
+
+<RelatedArticlesSection
+  title="継続して学ぶ"
+  description="まずプロトタイプ実践に取り組み、段階的に AI 能力を統合する。"
+  :items="relatedArticles"
+/>
+
+# 付録
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
+  <div style="font-weight: bold; margin-bottom: 8px;">付録ナビ</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    ここは「必要な時に随时参照できる」補足資料です：用語が分からない、画面の入り口が見つからない時に戻ってください。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1-map" style="text-decoration: none; color: inherit;"><b>付録一：よくあるコンピュータ用語クイックリスト</b></a><br/>
+      <span style="font-size: 12px; color: #909399">分からないコンピュータ用語が出たとき、ここで素早く意味を調べ、一通り読むことを推奨します。</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>付録二：Visual Studio Code メニューバー解析</b></a><br/>
+      <span style="font-size: 12px; color: #909399">AI IDE の画面の機能が分からないとき、以下の内容と AI で対話して調べるか、直接表示を確認。</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    Ctrl/⌘+F でキーワード検索可能。新しい用語が出たら AI にコピペしたエラーを送り、「初心者モード」で説明してもらう。
+  </div>
+</el-card>
+
+# 付録一：よくあるコンピュータ用語クイックリスト
+
+<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: bold; margin-bottom: 10px;">🗺️ 用語マップ：ここで出会う用語...</div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;">🖥️ <b>ツールインターフェース</b></a><br/>
+      <span style="font-size: 12px; color: #909399">IDE / ターミナル / パネル</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-network" style="text-decoration: none; color: inherit;">🌐 <b>ネットワークサービス</b></a><br/>
+      <span style="font-size: 12px; color: #909399">URL / ポポート / ローカル</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;">⚙️ <b>フロントエンド/バックエンド</b></a><br/>
+      <span style="font-size: 12px; color: #909399">API / JSON / インターフェース</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-code-basic" style="text-decoration: none; color: inherit;">📝 <b>コードの基礎</b></a><br/>
+      <span style="font-size: 12px; color: #909399">変数 / 関数 / コンポーネント</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" style="margin-top: 10px;">
+    <el-col :span="6">
+      <a href="#term-debug" style="text-decoration: none; color: inherit;">🐞 <b>デバッグ・エラー修正</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Bug / ブレークポイント / ログ</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-project" style="text-decoration: none; color: inherit;">📂 <b>プロジェクト管理</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Git / リポジトリ / コミット</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;">🤖 <b>AI ツール</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Agent / モデル / Key</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-browser" style="text-decoration: none; color: inherit;">🛠️ <b>ブラウザ</b></a><br/>
+      <span style="font-size: 12px; color: #909399">DevTools / コンソール</span>
+    </el-col>
+  </el-row>
+</el-card>
+
+この部分を暗記する必要はありません。まず脳に印象を作ることが重要です。
+
+## <span id="term-tool-ui">[一、ツールインターフェースに関連する用語](#appendix-1-map)</span>
+
+### 1. IDE、エディタ、ターミナル
+
+**IDE（統合開発環境）**  
+IDE を「プログラマーの作業台」に例えることができます：
+
+- 一方が書くデスク（エディタ）
+- 一方に電源コンセントやボタン（実行、デバッグ）
+- 引き出しに様々な小ツール（検索、バージョン管理）  
+  VS Code、Trae、Cursor はすべて IDE または IDE ベースのツールです。
+
+**コードエディタ（Editor）**  
+「高機能なメモ帳」のイメージで、主に以下のことを行います：
+
+- コードをタイピングする
+- 色色でコードの要素を区別する（シンタックスハイライト）
+- 入力時に自動補完  
+  IDE の中のコードを書くエリアが、コードエディタです。
+
+**ターミナル / コマンドライン（Terminal / コマンドラインウィンドウ）**  
+黒背景に白文字のウィンドウで、<strong>コマンドを入力して</strong>パソコンに作業させる：
+
+- 例：`npm run dev` は「開発サーバーを起動」
+- `python main.py` は「Python ファイルを実行」  
+  「パソコンに SMS を送って命令を出し、パソコンがテキストで返す」のようにイメージすると分かりやすいです。
+
+### 2. IDE のいくつかの一般的な領域
+
+**アクティビティバー（Activity Bar）**  
+左端の縦に並んだ小さなアイコンの列で、「機能タブ」のように機能ビューを切り替えます：
+
+- ファイルアイコンをクリック → 左側にファイルリストを表示
+- 虫眼鏡アイコンをクリック → 左側が検索モードに
+- Git アイコンをクリック → 左側にバージョン管理を表示
+
+**サイドバー（Side Bar）**  
+アクティビティバーの右側の大きな領域で、現在のモードの内容を表示：
+
+- ファイルモード：プロジェクト内のファイルとフォルダを表示
+- 検索モード：検索結果のリストを表示
+- ソースコード管理モード：変更されたファイルのリストを表示
+
+**エディタ（Editor）**  
+中央の最大の領域で、ファイルを開くと実際の内容が表示・編集される場所。  
+上のタブページ（Tab）は「現在開いているファイル」を示しています。
+
+**ボトムパネル（Panel）**  
+通常は最下部にあり、以下のようないセクションを含みます：
+
+- Terminal（ターミナル）：コマンドを実行してプロジェクトを起動
+- Problems（問題）：エラーのあるファイルと行番号をリスト
+- Output（出力）：ツールが出力する実行情報
+- Debug Console（デバッグコンソール）：デバッグ時の出力
+
+**ステータスバー（Status Bar）**  
+最下部の細いバーで：
+
+- 現在のファイルの言語（JS、HTML、Python など）を表示
+- インデントが「2スペース」か「4スペース」かを表示
+- エラーの有無、現在の Git ブランチを表示  
+  「現在の開発環境の簡易なチェックリスト」として捉えることができます。
+
+## <span id="term-network">[二、ウェブ / ネットワーク / サービスに関連する用語](#appendix-1-map)</span>
+
+### 1. URL、HTTP、ポート、ローカル
+
+**URL（ウェブアドレス）**  
+ブラウザのアドレスバーに入力する文字列です。例：
+- `https://www.trae.cn/`
+- `http://localhost:3000/`
+
+インターネット上のある場所の「部屋の完全なアドレス」と考えることができます。
+
+**HTTP / HTTPS**  
+URL の先頭に見る `http://` や `https://`：
+- HTTP：通常の転送方式
+- HTTPS：暗号化が追加され、より安全  
+  「ウェブアドレスは通常 `http` または `https` で始まる」と覚えておくと良いでしょう。
+
+**ポート（Port）**  
+1台のコンピュータをビルに見立て、ポートは<strong>各部屋のドア番号</strong>です：
+- `:3000` は 3000 号室
+- 同じコンピュータで複数のサービスを同時に実行でき、それぞれがポートを占有
+
+`http://localhost:3000` は「自分のコンピュータの 3000 号室で動いているサービスにアクセスする」という意味です。
+
+**ローカル（Local / localhost）**  
+自分のコンピュータを指します。
+
+- `localhost` は「このマシン自身」を意味します  
+  `http://localhost:3000` にアクセスすると、実際には自分のコンピュータ上で動いているプログラムと通信しているのであり、外部サーバーにアクセスしているわけではありません。
+
+**サービス（Service / Server）**  
+「<strong>バックグラウンドで常に実行され、いつでも指示を受け付ける</strong>プログラム」のことです：
+
+- ウェブサービス：ブラウザがアドレスにアクセスすると、ウェブページのコンテンツを返す
+- ゲームサービス：対局の管理、セーブ情報、ランキングなどを処理  
+  ターミナルで `npm run dev` を実行すると、本質的に「ローカルでウェブサービスを開始する」ということになります。
+
+## <span id="term-frontend-backend">[三、フロントエンド / バックエンド / データに関連する用語](#appendix-1-map)</span>
+
+### 1. フロントエンド、バックエンド
+
+**フロントエンド（Frontend）**  
+ユーザーが<strong>見えて、触れる</strong>部分：
+- ウェブページのボタン、テキスト、画像、アニメーション
+- React / Vue で作られたページ  
+  インタラクション（クリック、入力、ドラッグ）に応答する
+
+**バックエンド（Backend）**  
+ユーザーからは<strong>見えない</strong>、サーバー上で動く部分：
+- データの保存と読み取り（ユーザー情報、注文、スコアなど）
+- ビジネスルールの実行（ログイン認証、権限判断）  
+  フロントエンドを「店舗と店員」に例えると、バックエンドは「倉庫と帳簿システム」です。
+
+### 2. インターフェース、リクエスト、レスポンス、JSON
+
+**インターフェース / API**  
+フロントエンドとバックエンドが事前に約束した「質問＋回答」のルールのセットです。
+
+- フロントエンド：「このアドレス、この形式で質問する」
+- バックエンド：「この形式で結果を返す」
+
+**リクエスト（Request）**  
+フロントエンドからバックエンドへの一回の「質問」：
+- リクエスト先（URL）
+- メソッド（GET、POST など）
+- パラメータ（例えばユーザー ID）
+
+**レスポンス（Response）**  
+バックエンドからフロントエンドへの「回答」：
+- ステータスコード（200 は成功、404 は見つからない、500 はサーバーエラー）
+- 実際のデータ（多くの場合 JSON 形式）
+
+**JSON**  
+<strong>JavaScript のコードに似た書き方</strong>でデータを表現するフォーマット。例：
+```json
+{
+  "name": "Alice",
+  "score": 120
+}
+```
+「機械版のキーバリバリュース」と理解すると分かりやすいです。フロントエンドとバックエンドがデータを交換する際によく使われます。
+
+## <span id="term-code-basic">[四、コードを書くこと自体に関連する用語](#appendix-1-map)</span>
+
+### 1. 変数、識別子、状態
+
+**変数（Variable）**  
+「データにラベルを貼る」こと。
+- 例：スコアを `score` という名前で記録する
+- 以降 `score` という名前を使うだけで、そのデータの読み書きができる：
+
+```js
+let score = 0
+score = score + 10
+```
+
+**識別子（Identifier）**  
+「自分で付けたさまざまの名前」の総称：
+- 変数名：`score`
+- 関数名：`moveSnake`
+- コンポーネント名：`SnakeGame`  
+  フォルダに名前を付けるのと同じように、コード内で対象を区別できるようになります。
+
+**状態（State）**  
+プログラムの現在の「重要な状況記録」：
+- ゲームがすでに終了したかどうか
+- 蛇が現在どのマスにあるか
+- 現在のスコアはいくらか  
+  React では、<strong>状態が変わると UI も更新される</strong>という理解で良いでしょう。
+
+### 2. 関数、コンポーネント、モジュール
+
+**関数（Function）**  
+「繰り返し可能な処理をまとめて、名前を付ける」：
+```js
+function sayHello(name) {
+  console.log('Hello, ' + name)
+}
+```
+以降 `sayHello('Bob')` と書くだけで、その中の数行を再度実行できます。
+
+**コンポーネント（Component）**  
+フロントエンドの「再利用可能な小さな UI ＋ 小さなロジック」のまとまり：
+- ボタンはコンポーネント
+- トップナビゲーションはコンポーネント
+- ゲームエリア全体もコンポーネント  
+  コンポーネント同士を組み合わせて使うことができ、レゴブロックのように組み立てられます。
+
+**モジュール（Module）**  
+「関連するコードをまとめたファイル」：
+- `snakeLogic.ts` は蛇の動き方に関するコードのみ
+- `score.ts` はスコア計算に関するコードのみ  
+  モジュール同士で `import` / `export` することで、異なるファイルのツールのように使えます。
+
+### 3. シンタックス、プログラミング言語、フレームワーク
+
+**シンタックス（Syntax）**  
+プログラミング言語の「文法規則と句読点」：
+- 文字列には引用符が必要
+- 各ステートメントの末尾にセミコロンを書くかどうか
+- コードブロックは `{}` で囲む  
+  シンタックスエラーが発生すると、コンパイラ/インタプリタが「シンタックスエラーです」と表示されます
+
+**プログラミング言語（Programming Language）**  
+コンピュータとコミュニケーションの全体ルールと語彙、例：
+- JavaScript、Python、Java、C++、Go……
+
+**フレームワーク（Framework）**  
+「他人が先に骨組みを組んだ」大量のコードと定石のセット：
+- フロントエンド：React、Vue（UI の更新や状態管理などを処理）
+- バックエンド：Django、Spring Boot など  
+  元々「既存の骨組みの上に内容を埋める」ことで、ゼロから始めるよりはるかに簡単になります。
+
+## <span id="term-debug">[五、デバッグ / エラー修正に関連する用語](#appendix-1-map)</span>
+
+### 1. Bug、エラー、ログ / console.log
+
+**Bug**  
+プログラムの動作があなたの期待と異なる状態。例：
+- 本来ボタンが表示されるはずだったのに表示されない
+- 加算されるはずなのに加算されない
+- ページを開くと真っ白になる
+
+**エラーメッセージ（Error Message）**  
+プログラムがクラッシュした後、画面上やターミナルに表示される「見た目に威圧感のある」英語のテキスト。  
+不便ですが、通常は以下の情報が含まれています：
+- 大まかにどこが間違っているか
+- どのファイルの何行目付近いか
+- 一言で言えば「修正のヒント」が得られる
+
+あなたの理解できない英語のエラーをそのまま AI に投げ、AI に翻訳と修正を依頼してください。
+
+**ログ（Log）**  
+プログラムの実行中に自分で「発する」メッセージ。  
+最も一般的なのはフロントエンドの以下のコード：
+```js
+console.log('現在のスコア', score)
+```
+以下のように理解できます：**重要なステップで意図的に記録し、プログラムが意図通りに動いているか確認する**。
+
+> **console.log とは？**
+>
+> - `console` は「デバッグ用の小さな黒板」
+> - `.log` は「その小さな黒板に書き込む」
+> - ブラウザで F12 を押して開発者ツールの Console パネルを開くと、この出力が表示されます
+
+### 2. デバッグ、ブレークポイント、ステップ実行、スナップショット
+
+**デバッグ（Debug / デバッグプログラム）**  
+プログラムに問題がある場合、いきなり全部修正を試みるのではなく：
+1. プログラムを特定の行で<strong>停止させる（ブレークポイント）</strong>
+2. その時点での各変数の値を確認する
+3. 1行ずつ進めて、どこから問題が始まったか観察する
+
+**ブレークポイント（Breakpoint）**  
+ブレークポイントを「その行に一時停止ボタンを挿入する」と理解できます：
+- プログラムは通常一方向に流れて実行される
+- その行に到達すると一時停止し、確認・修正ができる
+- コードエディタでブレークポイントを設定することも可能
+
+**ステップ実行（Step）**  
+ブレークポイントから停止した後、以下のように操作できます：
+- 1行ずつ進める（step over）：ブレークポイントの次の行に進む
+- 関数の中に入って詳細を見る（step into）：その関数の内部を確認
+
+ダンスのように分解して見るのではなく、アニメーションのように部分的に見るのがコツールのコツです。
+
+**スナップショット（Snapshot）——簡易な理解**  
+ここでのスナップショットは「ある時点での現在の状態を写真に撮る」のように理解できます：
+> <strong>ある時点で、現在の状態を写真に撮る。後で比較できるように。</strong>
+実際のツールでは、スナップショットは以下を意味することがあります：
+- あるコミット時のプロジェクトの完全な状態
+- デバッグ時のある時点でのメモリ/変数全体の状況  
+ あなたはこの比喩だけで十分です：**スナップショット ≒ ある時点の状態の記録**
+
+## <span id="term-project">[六、プロジェクト管理に関連する用語](#appendix-1-map)</span>
+
+### 1. プロジェクト、ワークスペース、フォルダ
+
+**プロジェクト（Project）**  
+1つのアプリケーションを実現するために同じフォルダにまとめられたもの：
+- ソースコードファイル
+- 設定ファイル
+- 素材（画像、音声など）
+
+**ワークスペース（Workspace）**  
+VS Code / Trae が「現在このセッションで開いている一連のもの」を記述する概念：
+- 1つのフォルダを開く → シンプルなワークスペース
+- 複数のフォルダをマージして複数プロジェクトのワークスペースにすることも
+
+### 2. Git、リポジトリ、コミット（Commit）
+
+**Git（バージョン管理ツール）**  
+プロジェクトの「タイムマシン」：
+- 毎回変更をまとめて「バージョン写真」を撮る
+- 必要に戻せる時は、過去のバージョンに戻せる
+- これらの一連の動作が「コミット」を行う
+
+**リポジトリ（Repository / Repo）**  
+Git を有効にしたプロジェクトフォルダが「バージョン記録付き」になります。
+
+**コミット（Commit）**  
+「この変更は一つの段階的な成果」と思えるたときに行うアクション：
+- 説明（例：`Add score panel`）を書く
+- 現在のすべての変更をパッケージしてバージョンを保存
+- Git がこの瞬間の状態を保存  
+  この一連の動作が「コミットを行う」と呼ばれます。
+
+## <span id="term-ai-tool">[七、AI 開発ツールに関連する用語](#appendix-1-map)</span>
+
+### 1. AI IDE、Agent、SOLO モード
+
+**AI IDE**  
+通常の IDE のベースに、<strong>「人間の言葉を理解し、自ら動いて」</strong>AI のレイヤーが追加されています：
+- 「スネークゲームを作って」と言うと、プロジェクトの構築、コードの記述を自動で行う
+- エラーメッセージと関連コードを投げると、分析と修正を提案
+- 複数のファイルをまたがる修正し、1行ずつの補完ではなく大規模なコードブロックの生成や修正も実行
+
+**Agent（エージェント）**  
+<strong>常に待機している AI アシスタント</strong>としてイメージしてください：
+- プロジェクト構造を読み、タスクを分解（依存パッケージ → コード生成 → 実行 → テスト）
+- エラーが発生すると、エラー情報に基づいて自動的に修正方案を調整
+- 多くのタスクで、一部のジュニアエンジニアの仕事を部分的に代替可能
+
+**SOLO モード（Trae の場合）**  
+以下を意味します：
+> あなたは「終点」だけを明確に伝えれば、  
+> それ自ら「経路」を計画し、  
+> ローカルで一歩ずつ実行し、  
+> 重要な段階でのみに進捗を尋ねてくる。
+
+### 2. モデル、API Key
+
+**モデル（Model、ここでは大規模言語モデルを指す）**  
+「背後にある巨大な AI の頭脳」と簡単に理解できます：
+- 例：GPT、Claude、Kimi、GLM など
+- 異らなモデルで「中国語の理解」「コード生成」「推論」のレベルが異なる
+- AI IDE のドロップダウンからモデルを切り替えて使用可能
+
+**API Key / 密钥（API Key）**  
+API Key を<strong>「非常に長いパスワード＋身分証番号」</strong>と理解できます。
+その役割は一つだけ：
+> 他人のサーバーに「自分がどのユーザーで、この AI サービスを使う許可を与えてほしい」と伝え、課金を記録させる。
+
+ポイント：
+- この文字列は通常ランダムな英数字文字列です
+- 公開場所（リポジトリ、スクリーンショット、グループチャットなど）に絶対に投稿しない。他人に渡されると、あなたのアカウントが勝手に使われます
+- ツールに API Key を入力することは「鍵を鍵の穴に差し込む」のようなもので、ツールがあなたの代わりに API を呼び出せるようになります
+
+## <span id="term-browser">[八、ブラウザ / 開発者ツールに関連する用語](#appendix-1-map)</span>
+
+**Chrome（Google Chrome）**  
+現在のフロントエンド開発で最もよく使われるブラウザの一つ：
+- ページの読み込みが速い
+- 強力な「開発者ツール」が内蔵されており、問題の調査に便利
+
+**リフレッシュ（Refresh / Reload）**  
+現在のウェブページを再読み込み：
+- フロントエンドのコードを修正した後、自動リフレッシュされない場合は手動でリフレッシュ
+
+**開発者ツール（DevTools）**  
+ブラウザ内蔵の開発者向けの一連のツールパネル：
+- ウェブ構造の確認（Elements）
+- スタイルの確認（Styles）
+- エラーとログの確認（Console）
+- ネットワークリクエストの確認（Network）
+
+**Console（コンソール）**  
+開発者ツール内のタブの一つで、以下を表示：
+- `console.log(...)` の出力
+- 実行中に発生したエラー（赤文字）
+
+「プログラムのチャットルーム」のように捉えると良いでしょう：
+- プログラムが何かを言いたのか、そこに表示されます
+- デバッグ時に最もよく見る部分
+
+後で学習中に新しい用語が出た場合も、このスタイルで AI にコピーやして完全な内容を追加させることもできます：
+
+- まず「それは何をしているのか」を一文で説明
+- その後、「生活の中で例えて」で説明
+- 最後に「簡単な例」を提供
+
+このように、あなたの「個人用語集」はどんどん長くなり、実践で使えるものになります。
diff --git a/docs/ja-jp/stage-1/learning-map/index.md b/docs/ja-jp/stage-1/learning-map/index.md
new file mode 100644
index 0000000..57f2278
--- /dev/null
+++ b/docs/ja-jp/stage-1/learning-map/index.md
@@ -0,0 +1,275 @@
+---
+title: 'アイデアからAIプロダクトへ - Easy-Vibe 学習ロードマップ'
+description: 'AIプログラミングの完全な学習ロードマップ：ゼロからフルスタック開発まで。Vibe Coding、Claude Code、CursorなどのAI IDEツールをマスターし、プロダクト思考、フルスタック開発、AI能力統合を学びます。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['ja-jp/stage-1/learning-map'] ?? []
+</script>
+
+# アイデアからAIプロダクトへ
+
+::: info 特別感謝
+**清華大学深セン国際大学院**の学生の皆様に、本コースのテスト・フィードバック・サポートにご協力いただきましたこと、心より感謝申し上げます！皆様のご意見とご貢献により、このコースはさらに良くなりました。[👉 完全な貢献者リストを見る](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
+:::
+
+昔はソフトウェアを作るハードルが非常に高くて、プログラミングもアルゴリズムも理解し、数年のプロジェクト経験も必要でした。
+今は違います。アイデアさえあれば、AIがコードを書いてくれます。
+
+これは大きな変化です：**プログラミング言語が自然言語になろうとしています。**
+
+大規模言語モデル（LLM）の登場により、開発はもはや「技術エリートの専有物」ではなく、誰もが使えるツールになりました。かつて最も難しかったのは「コードの書き方」でしたが、今最も難しいのは「**何を作るか**」です。
+
+> **Vibe Codingとは？**
+> 簡単に言うと、「話してプログラミングする」ことです。雰囲気プログラミングとは、直接コードを書くのではなく、AIとだけ対話することでプログラミングプロジェクトを完成させるアプローチを指します。
+
+もちろん、AIにコードを書かせるのは最初の一歩にすぎません。本当に使えるプロダクトを作るには、以下のような問題に直面します：
+- AIにクリーンで保守性の高いコードを書かせるにはどうすればよいか？
+- 断片的なコードを動くアプリケーションに組み立てるには？
+- アプリを実際に公開し、ユーザーに使ってもらうには？
+- テキスト生成や画像認識などのAI能力をプロダクトに組み込むには？
+
+これらの問題の答えは、このコースで見つけることができます。
+
+学生、先生、医師、労働者、技術に全く疎い一般の方でも——何年もプログラミングを学ぶ必要はありません。2週間で動くデモンストレーション可能なプロダクトプロトタイプを作ることができます。
+
+| あなたの立場 | このコースでできること |
+|---------|-------------|
+| 学生 | 課題、コンテスト、起業、自分でプロジェクトを作り、人に頼らない |
+| 社会人 | 繰り返し作業を自動化し、効率を上げ、副業を開発する |
+| プロダクトマネージャー / デザイナー | アイデアを紙に留めず、素早くデモを作成して上司やクライアントに見せる |
+| 起業家 / 中小企業のオーナー | 低コストでアイデアを検証し、数万円の外注費なしでMVPを作成する |
+| 先生 / 教育関係者 | 教育ツール、教材、自動出題システムを作成し、教育効率を向上する |
+| 医師 / 弁護士 / 専門職 | 専門プロセスを自動化し、自分の効率ツールを作る |
+| すべての人 | AIで生活・仕事の具体的な問題を解決し、不可能を可能にする |
+
+AI時代において、実行力とアイデアは常に技術よりも重要です。
+
+## 成長パス：「AIを使える」から「AIプロダクトを作れる」へ
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>初心者入門</h3>
+    <p class="stage-role">AIプログラミングを体験</p>
+    <div class="stage-tags">
+      <span>ヘビミニゲーム</span>
+      <span>ゼロから始める</span>
+      <span>Vibecoding 初体験</span>
+      <span>数分で生成</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>第一段階</h3>
+    <p class="stage-role">プロダクトマネージャー / 運営</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>要件分解 & プロトタイプ</span>
+      <span>AI能力の統合</span>
+      <span>完全なDemo開発</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>第二段階</h3>
+    <p class="stage-role">初中級開発者 / インディー開発者</p>
+    <div class="stage-tags">
+      <span>Figmaからコードへ</span>
+      <span>Supabase データベース</span>
+      <span>Stripe 決済統合</span>
+      <span>Dify ナレッジベース</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>第三段階</h3>
+    <p class="stage-role">上級開発者 / アーキテクト</p>
+    <div class="stage-tags">
+      <span>Web/ミニプログラム/マルチプラットフォーム</span>
+      <span>MCP 高度ツール</span>
+      <span>RAG & LangGraph</span>
+      <span>上級エンジニア思考</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+この完全な学習パスを通じて、以下を獲得します：
+
+- **Vibe Coding開発能力：** vibecodingの思考法とAIコーディングツールに熟練し、開発効率を数倍に引き上げます。構文を暗記するのではなく、AIに高品質なコードを生成させる方法を学びます。
+- **フルスタック開発スキル：** UI設計からフロントエンド実装、データベース設計からAPI開発、ローカル開発からクラウドデプロイまで、モダンWebアプリケーションの完全な技術スタックを習得します。
+- **AI能力統合：** 各種マルチモーダルAI APIを呼び出し、テキスト、画像、音声などのAI能力をアプリにシームレスに統合し、RAG等の技術でインテリジェントなプロダクトを構築する方法を学びます。
+- **プロダクト思考と運営能力：** ユーザーリサーチから要件分解、MVP設計からプロダクト反復、決済統合からユーザー管理まで、完全なプロダクト開発・運営ループを形成します。
+
+# 学習後、何ができるようになる？
+
+## 第一段階：最初のプロダクトプロトタイプを作る
+
+この段階は、プログラミングの基礎が全くない方、または少しだけ知っているが自信がない方に適しています。まず理論をたくさん学ぶのではなく、実際に手を動かしながらAIツールを使ってコードを書く方法を学びます。
+
+**学習後できること**：
+- AIプログラミングツールで独立してWebアプリケーションを完成させる
+- プロダクトアイデアをクリック・操作可能なプロトタイプに変える
+- プロトタイプにAI機能（テキストから画像生成、インテリジェント対話など）を追加する
+- エラーが発生したときにトラブルシューティング・解決方法を知っている
+
+簡単に言うと、「動いて、他人にデモンストレーションできるもの」を作れるようになります。
+
+まずはミニゲームでAIプログラミングを体験し、その後AIプログラミングツールを使ってコードを書いたりエラーを修正する方法を学びます。次にシンプルなページから始め、徐々に操作可能なマルチページアプリケーションを作り、テキストから画像生成やインテリジェント対話といったAI機能を追加していきます。最後に完全なプロジェクトを独立して完成させ、アイデアを実際に実現する可能性を持てるようになります。
+
+# なぜプロジェクト制でトレーニングするのか？
+
+> **現実世界の課題**
+>
+> 理由は実は単純です：今の状態のまま職場に入ると、実際のプロジェクトと上司やクライアントからの「社会の洗礼」で立ち行かなくなる可能性が高いです。現実世界でより一般的なシナリオは：
+
+> メンターや上司：「xxxを作ってほしい、目標はyyyの効果を出すこと」
+>
+> ドキュメント？既存のフレームワーク？詳細な要件仕様書？多くの場合、存在しません。
+
+実際の仕事の多くのタスクは、本質的に不確実性の高い環境で見たことのない問題を解決することです：要件は曖昧で、境界線は変化し、正解を教えてくれる人はいません。自分で資料を調べ、実験し、プロトタイプを組み、反復しながら、最終的に「動いて、使えて、公開できる」ソリューションを提案する必要があります。
+
+このコースが目指しているのは、比較的安全な環境で、事前に一度「社会シミュレーション」を体験してもらうことです：
+
+- 一見難しそうなプロジェクト課題を通じて、問題の分解、設計案の作成、自力での資料探索を練習する
+- あまり「お手軽」ではないスキャフォールディングとコードを通じて、中〜大規模なコードベースの読解・理解・改造を学ぶ
+- アイデアから公開までの完全ループを通じて、実際のプロダクトをゼロからイチにする全過程を体験する
+
+短期的には、このトレーニングは確かに大変ですが、長期的には、就職やキャリアアップにおける競争力を大幅に高めます：挫折に強くなり、不確実な環境で突破口を見つける力がつき、AIを本当のプロダクトに落とし込む能力も高まります。「デモで遊ぶ」段階にとどまらなくなります。
+
+# 質問の技法：AI時代に必須のスキル
+
+AI時代において、質問することも「基本スキル」の一つです。同じコード、同じエラーに対して、**質問の仕方が、AIがどんな回答を出すかをほぼ決定します**：大ざっぱな回答か、段階的に実行可能な修正案か。
+
+**良い習慣を身につけましょう**：「AIへの質問」を日常の開発フローの一部とし、分からないことや行き詰まった問題があればすぐに質問しましょう。
+
+## なぜこれが必須スキルなのか？
+
+- **現実には完全なドキュメントがほとんどない**：多くの場合、不明確な要件、半完成品のコード、散在するエラー情報に直面する
+- **AIはあなたの常にそばにあるメンター兼同僚**：質問上手になれば、「高品質なペアプログラミング」に変わる
+- **能力の上限はコミュニケーションで決まる**：重要な情報を提供し、出力フォーマットを制約するほど、回答はより使いやすくなる
+
+**よくある誤解**：「なぜエラーが出るの？」とだけ聞いても、推測の羅列しか得られません。コンテキストを補完して初めて、実行可能なソリューションが得られます。
+
+## 情報をAIに「伝える」方法：スクリーンショット vs コピー＆ペースト
+
+どちらの方法でも構いませんが、用途が異なります：
+
+| 方法               | 適用シナリオ                                      | 重要なポイント                                  |
+| ------------ | ----------------------------------------- | ----------------------------------------- |
+| **コピー＆ペースト** | エラースタック、ログ、コード、設定、API レスポンス      | できるだけ完全に、キーワードの1行だけを切り取らないように        |
+| **スクリーンショット**     | UI レイアウトの問題、操作の異常、ツール画面でボタンが見つからない | 全画面 + 重点エリアに注釈、できればテキストの説明を一言添える |
+
+::: danger ⚠️ 重要な前提
+**すべてのAIが画像入力をサポートしているわけではありません。** スクリーンショットでのコミュニケーションには、AIにマルチモーダル能力（画像を理解・分析できる能力）が必要です。現在画像入力をサポートするAIには、Claude (Anthropic)、GPT-4V/GPT-4o (OpenAI)、Gemini (Google)、および一部の国内大規模モデル（通義千問、文心一言など）が含まれます。
+
+**使用しているAIが画像入力をサポートしていない場合**、スクリーンショットは認識されませんので、テキストをコピー＆ペーストする方式に切り替えてください。
+:::
+
+## AIに「上手に説明してもらう」ためのプロンプトのコツ
+
+答えだけではなく、「答えを学びたい」場合は、以下のような指示を使うと、説明の質が大幅に向上します：
+
+> **学習型質問の例**
+>
+> - 「まず5文でこの概念を説明してから、理解が正しいかを確認するための質問をいくつか出してください。」
+> - 「このエラーメッセージについて詳しく説明してください。なぜエラーが出るのか理解できません。」
+
+# いくら頑張っても解決できない、諦めたい
+
+もしかすると、頑張り方が間違っているのかもしれません。暗闇の中で一人で苦しむのではなく、作者やティーチングアシスタントと話してみましょう：これまでに試した方法、直面している具体的な壁、そして現在の心理状態を正直に打ち明けてください。多くの場合、方向を少し変えたり、重要な知識ポイントを一つ補うだけで、前に進めるようになります。
+
+# チュートリアルの設計に不合理なところがある
+
+いつでも著者に連絡し、issueを提出するか、グループや授業で直接フィードバックしてください。このチュートリアルをより良くしていきたいと強く願っています：どこが不明確か、どこが使いにくいか、どこで無駄な努力をしたか、率直に指摘してください。リアルで具体的なフィードバックほど、後の学習者の役立ちます。
+
+# Reference
+
+- [南京大学 計算機科学技術学科 計算機システム基礎 コース実験](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="次に何を学べるか"
+  description="「AIを使える」から「プロダクトを作れる」へのルートに沿って、さらに先に進みましょう。"
+  :items="relatedArticles"
+/>
diff --git a/docs/ko-kr/guide/introduction.md b/docs/ko-kr/guide/introduction.md
new file mode 100644
index 0000000..9c4bb33
--- /dev/null
+++ b/docs/ko-kr/guide/introduction.md
@@ -0,0 +1,82 @@
+# 프로젝트 소개
+
+2025년은 많은 사람들에게 AI 프로그래밍의 원년으로 불리고 있습니다. 점점 더 많은 사람들이 AI로 코드를 작성하기 시작했지만, 여전히 장난감 수준에 머물러 있는 경우가 많습니다. Vibe Coding으로 개발 프로세스를 어떻게 구성해야 할지, 어떤 도구를 선택해야 할지, 그리고 프로토타입에서 서비스 출시까지 어떤 핵심 단계가 필요한지 모르는 경우가 많습니다.
+
+우리는 단계적인 **3단계 실전 학습 경로**를 채택했습니다. 초보자 입문 단계에서는 소규모 게임을 통해 AI 프로그래밍에 빠르게 익숙해지고, 1단계에서는 Vibe Coding 작업 방식을 마스터하여 웹 애플리케이션 프로토타입을 완성합니다. 2단계에서는 풀스택 개발과 배포를 학습하고, 3단계에서는 크로스 플랫폼 복잡 애플리케이션을 구축합니다.
+
+각 단계에는 완전한 프로젝트 실전이 포함되어 있어, 실제 도전을 통해 장난감에서 제품으로 나아가며, 최종적으로 **어떤 아이디어든 사용 가능한 애플리케이션으로 구현하는 능력**을 갖추게 됩니다.
+
+우리는 Vibe Coding을 마스터하고 체계적인 훈련과 결합하면, 한 사람이 **프론트엔드/백엔드 개발, AI 역량 통합, 제품 설계를 모두 갖춘 올라운드 개발자**가 될 수 있다고 믿습니다.
+
+본 프로젝트는 주로 세 가지 유형의 학습자를 대상으로 합니다:
+
+- **초보자 (일반인 / 제품 및 운영 직무)**: 비기술적 배경을 가진 분들과 입문 학습자가 핵심 개념을 이해하고 첫 번째 AI 소규모 도구나 제품 프로토타입을 완성할 수 있도록 돕습니다.
+- **초중급 개발자 (기초 지식이 있는 학생 및 개발자)**: vibe coding과 네이티브 AI 애플리케이션 개발을 체계적으로 마스터합니다.
+- **고급 개발자 (기업 및 스타트업, 오픈소스 및 인디 개발자)**: 팀과 개인이 네이티브 AI 애플리케이션을 빠르게 구축, 검증 및 반복할 수 있도록 지원합니다.
+
+## 📖 콘텐츠 내비게이션
+
+### 총 부록
+
+[AI 역량 사전: 일반적인 AI 핵심 개념과 용어, 시나리오 설명](/ko-kr/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### 0단계: 유치원
+
+| 챕터                                                                                   | 핵심 콘텐츠                               | 상태 |
+| :------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
+| [초보자 입문: 학습 지도](/ko-kr/stage-1/learning-map/)                                 | 전체 학습 경로 가이드                       | ✅   |
+| [초보자 입문: AI 시대, 말할 수 있으면 코딩할 수 있다](/ko-kr/stage-1/ai-capabilities-through-games/) | 뱀 게임 등의 사례로 AI 프로그래밍 능력 체감 | ✅   |
+
+### 1단계: AI 제품 매니저
+
+| 챕터                                                                          | 핵심 콘텐츠                                                 | 상태 |
+| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
+| [초급 2: AI IDE 도구 이해하기](/ko-kr/stage-1/introduction-to-ai-ide/)        | IDE 사용법 학습, 인터페이스 구조와 효율적인 프롬프트 방식 마스터 | ✅   |
+| [초급 3: 직접 프로토타입 만들기](/ko-kr/stage-1/building-prototype/)                | 제품 분석 및 분해부터 다중 페이지 제품 프로토타입 구현까지의 완전한 사이클 | ✅   |
+| [초급 4: 프로토타입에 AI 능력 추가하기](/ko-kr/stage-1/integrating-ai-capabilities/) | 일반적인 AI 능력(텍스트, 이미지, 비디오)의 API 연동 이해 및 완성 | ✅   |
+| [초급 5: 완전한 프로젝트 실전](/ko-kr/stage-1/complete-project-practice/)         | 실제 시나리오 시뮬레이션, 사용자 피드백 반복 및 프로젝트 발표 완료(대과제 포함) | ✅   |
+
+#### 부록
+
+| 챕터                                                                  | 핵심 콘텐츠                                  | 상태 |
+| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
+| [부록 A: 제품 사고 보충](/ko-kr/stage-1/appendix-a-product-thinking/)    | 아이디어 평가부터 요구사항 분해와 MVP까지의 제품 사고 프레임워크 | ✅   |
+| [부록 B: 일반적인 오류 및 해결 방법](/ko-kr/stage-1/appendix-b-common-errors/) | vibe coding에서의 일반적인 오류 및 해결 방법        | ✅   |
+| [부록: 아이디어를 어디서 찾을까](/ko-kr/stage-1/appendix-idea-sources/)          | 참고 앱, 트렌드, VC 목록에서 세부 방향 발굴     | ✅   |
+| [부록: 더블 다이아몬드 모델](/ko-kr/stage-1/appendix-double-diamond/)           | 먼저 문제를 정의한 후 솔루션 설계를 전개하는 완전한 리듬 이해 | ✅   |
+| [부록: Jobs to Be Done](/ko-kr/stage-1/appendix-jobs-to-be-done/)  | JTBD 방법으로 사용자가 정말로 완료하고 싶은 일 파악    | ✅   |
+| [부록: The Mom Test 사용자 인터뷰 방법](/ko-kr/stage-1/appendix-mom-test/) | 사용자 인터뷰를 통한 요구사항 검증 조사 방법          | ✅   |
+
+### 2단계: 초중급 개발 엔지니어
+
+#### 프론트엔드 부분
+
+| 챕터                                                                                                                | 핵심 콘텐츠                                                                     | 상태 |
+| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
+| lovart로 소재 제작                                                                                        | lovart를 사용하여 인물, 장면 등 시각 소재를 대량 생성하고, UI 디자인과 프론트엔드 개발을 위한 소재 기반 제공 | 🚧   |
+| Figma와 MasterGo 입문                                                                                      | 디자인 도구로 정보 구조와 페이지 구조를 정리하고, 프론트엔드 구현을 위한 기반 마련 | 🚧   |
+| 첫 번째 모던 애플리케이션 구축 - UI 디자인                                                                              | 디자인 시안을 기반으로 컴포넌트화된 인터페이스 완성, 디자인에서 코드로의 첫 번째 연결 구현 | 🚧   |
+| UI 디자인 가이드라인을 참고하여 페이지와 버튼 디자인                                                                              | 주류 디자인 가이드라인을 사용하여 페이지 구조, 버튼 계층을 조직하고, AI를 활용한 디자인 제안 생성 학습 | 🚧   |
+| [함께 호그와트 초상화 만들기](/ko-kr/stage-2/frontend/hogwarts-portraits/) | 0부터 1까지 AI 능력을 연동한 프론트엔드 애플리케이션 제작, 디자인과 개발 연결 | 🚧   |
+
+#### 백엔드 개발 부분
+
+| 챕터                                                                                                                    | 핵심 콘텐츠                                                      | 상태 |
+| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
+| API란 무엇인가                                                                                                      | HTTP 인터페이스와 요청-응답 모델 이해, 백엔드 통합 및 연동 준비          | 🚧   |
+| [데이터베이스부터 Supabase까지](/ko-kr/stage-2/backend/database-supabase/) | Supabase에서 데이터베이스와 API 구축, 데이터 모델과 프론트엔드 페이지 연결 | 🚧   |
+| 대형 언어 모델 보조 인터페이스 코드 및 인터페이스 문서 작성                                                                                | 대형 언어 모델을 활용하여 인터페이스 및 데이터베이스 문서와 코드를 생성하고, 가독성과 테스트가 가능한 백엔드 구현 | 🚧   |
+| Git 워크플로우와 Zeabur 배포                                                                                        | Git 워크플로우에서 코드 관리, 애플리케이션을 Zeabur에 배포하여 서비스 | 🚧   |
+| 모던 CLI 개발 도구                                                                                               | CLI 유형 AI 프로그래밍 도구를 사용하여 개발과 디버깅을 가속화하고 개인 엔지니어링 워크플로우 형성 | 🚧   |
+| stripe 등 결제 시스템을 통합하는 방법                                                                                      | 결제 시스템 연동, 결제 플로우와 기본 정산 프로세스 완성 | 🚧   |
+| 첫 번째 모던 애플리케이션 구축 - 풀스택 애플리케이션                                                                               | 프론트엔드, 백엔드, 결제 모듈을 종합하여 서비스 가능한 풀스택 웹 애플리케이션 완성 | 🚧   |
+| 모던 프론트엔드 컴포넌트 라이브러리 + Trae 실전                                                                                    | 모던 프론트엔드 컴포넌트 라이브러리와 Trae를 사용하여 로그인/회원가입을 지원하고 유료화가 가능한 제품 독립 완성 | 🚧   |
+
+#### AI 역량 부록
+
+| 챕터                                                                                                                                                                  | 핵심 콘텐츠                                                       | 상태 |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
+| [Dify 입문과 지식 베이스 통합](/ko-kr/stage-2/ai-capabilities/dify-knowledge-base/) | Dify Workflow와 기본 RAG로 도구 유형 제품 구축, 후속 애플리케이션 업그레이드를 위한 샘플 제공 | 🚧   |
+| AI 사전 조회 및 멀티모달 API 통합 학습                                                                                                                               | 적합한 모델과 API를 찾는 방법 학습, 텍스트, 이미지 등 멀티모달 능력을 제품에 연동 | 🚧   |
+
+### 3단계: 고급 개발 엔지니어
diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md b/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md
index 2225472..39bc28d 100644
--- a/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md
+++ b/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md
@@ -762,3 +762,7 @@ Karpathy의 공유 내용을 더 보려면 여기에서 확인할 수 있습니
   description="“게임화 경험”에서 출발해 로컬 개발과 제품 실습으로 계속 들어가 보기를 추천합니다."
   :items="relatedArticles"
 />
+---
+title: 'Beginner 1: Talking Is Programming'
+description: 'Build an AI-native snake game through conversation, then reuse the workflow to create your own mini game or demo.'
+---
diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
index 8f01416..ea1134b 100644
--- a/docs/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
+++ b/docs/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -2,130 +2,130 @@
 
 ## 이 장의 가이드
 
-수많은 AI 코딩 도구 중에서 어떤 도구가 가장 나에게 잘 맞을까요? 이 장에서는 하나의 통일된 실습 과제인 “스네이크 + AI 시 쓰기” 게임 개발을 통해 Lovable, Replit, Z.ai 등 7가지 주요 Web Vibe Coding 플랫폼을 깊이 있게 가로로 비교합니다. 초보자 친화성, 코드 제어 가능성, 배포 편의성 등 여러 관점에서 비교하여, 가장 강력한 개발 보조 도구를 빠르게 고를 수 있도록 돕습니다.
+수많은 AI 코딩 도구 중에서 어떤 도구가 가장 나에게 잘 맞을까요? 이 장에서는 하나의 통일된 실습 과제인 "스네이크 + AI 시 쓰기" 게임 개발을 통해 Lovable, Replit, Z.ai 등 7가지 주요 Web Vibe Coding 플랫폼을 깊이 있게 가로로 비교합니다. 초보자 친화성, 코드 제어 가능성, 배포 편의성 등 여러 관점에서 비교하여, 가장 강력한 개발 보조 도구를 빠르게 고를 수 있도록 돕습니다.
 
 ---
 
-# 1. Vibe Coding으로 스네이크 게임 만들기: 전체 실습 튜토리얼
+# 1. Vibe Coding으로 스네이크 게임 만들기: 완전 실전 튜토리얼
 
-이 글은 새로운 소프트웨어 개발 실천 방식인 “Vibe Coding(분위기식 코딩)”을 소개합니다. Vibe Coding은 인공지능을 활용해 애플리케이션 구축 과정을 가속합니다.
+이 글에서는 새로운 소프트웨어 개발 방식인 "Vibe Coding(분위기 코딩)"을 소개합니다. 이 방식은 인공지능을 활용해 애플리케이션 구축 과정을 가속화합니다.
 
-이제 Vibe Coding의 핵심 개념을 차례대로 소개하고, AI Agent가 무엇인지 설명한 뒤, 실용적인 프롬프트 작성 방법을 제시합니다. 마지막에는 “스네이크(Snake)” 게임을 처음부터 구축하는 전체 실습을 진행하고, 여러 주요 Vibe Coding 플랫폼을 상세히 비교 평가하여 자신에게 가장 적합한 도구 조합을 선택할 수 있도록 돕습니다.
+앞으로 Vibe Coding의 핵심 개념, AI Agent의 의미, 실용적인 프롬프트 작성 방법을 차례로 소개하겠습니다. 마지막으로, 제로에서 "스네이크(Snake)" 게임을 구축하는 완전한 실전을 통해 여러 주요 Vibe Coding 플랫폼을 상세히 비교 평가하여, 자신에게 가장 적합한 도구 조합을 선택할 수 있도록 돕겠습니다.
 
-## 배우게 될 것
+## 배울 내용:
 
-- **Vibe Coding이란 무엇인가:** 정의, 워크플로, 핵심 장점을 이해합니다.
-- **AI Agent의 역할:** AI Agent의 작동 방식과 전통적인 프로그램과의 차이를 이해합니다.
-- **좋은 프롬프트를 쓰는 법:** 더 좋은 결과를 얻기 위해 명확하고 구체적인 프롬프트 작성법을 익힙니다.
-- **Vibe Coding 도구:** 주요 AI 코딩 및 디자인 플랫폼들을 알아봅니다.
-- **플랫폼 비교:** 초보자의 관점에서 7가지 서로 다른 AI Agent 플랫폼의 장단점을 평가하고 비교합니다.
-- **UI / UX 도구:** Figma, Mastergo 같은 UI/UX 도구를 전체 워크플로에 통합하는 방법을 배웁니다.
+- **Vibe Coding이란:** 정의, 워크플로, 핵심 장점 이해
+- **AI Agent의 역할:** AI Agent의 작동 방식과 전통적인 프로그램과의 차이 이해
+- **프롬프트 잘 쓰는 법:** 명확하고 구체적인 프롬프트 작성법 마스터
+- **Vibe Coding 도구:** 주요 AI 프로그래밍 및 디자인 플랫폼 소개
+- **플랫폼 비교:** 초보자 관점에서 7개 AI Agent 플랫폼의 장단점 평가 및 비교
+- **UI / UX 도구:** Figma, Mastergo 등 UI/UX 도구를 전체 워크플로에 통합하는 방법 학습
 
-## 1. 들어가며
+## 1. 서론
 
-이전 수업에서는 계속 z.ai의 풀스택 개발 모델을 사용해 프로그래밍 과제를 완성해 왔습니다.
+이전 수업에서는 z.ai의 풀스택 개발 모델을 사용하여 프로그래밍 작업을 완료했습니다.
 
-하지만 우리는 생각해 본 적이 있을까요? 그 핵심은 사실 “AI Agent”입니다. 일반적인 채팅형 AI와는 다르고, 훨씬 더 지능적입니다. 단지 당신과 대화만 하는 것이 아니라 생각할 수 있고(당신이 작업을 주면 먼저 계획을 세웁니다), 주도적으로 행동할 수도 있기 때문입니다. 예를 들어 웹 검색 호출, 컴퓨터 명령 실행, 웹페이지 열기 같은 도구를 사용할 수 있습니다. 뒤에서 더 자세히 소개하겠습니다.
+하지만, 그 핵심이 사실 "AI Agent"(일반적인 채팅형 AI와 다르며, 훨씬 더 지능적)라는 것을 생각해 본 적 있나요? 그 이유는 단순히 대화만 하는 것이 아니라, 사고할 수 있고(작업을 주면 먼저 계획을 수립), 능동적으로 행동할 수 있기(예: 웹 검색, 컴퓨터 명령 실행, 웹 페이지 열기 등의 도구 호출) 때문입니다. 자세한 내용은 나중에 다루겠습니다.
 
-## 1. Vibe Coding이란 무엇인가?
+## 1. Vibe Coding이란?
 
-Vibe Coding은 AI를 활용해 애플리케이션 개발 흐름을 가속하는 새로운 소프트웨어 개발 방식입니다. 전통적인 프로그래밍의 대체물이 아니라, 더 “대화식”인 프로그래밍 모델에 가깝습니다. 이 개념은 AI 연구자 Andrej Karpathy가 제시했습니다. 이 워크플로에서 개발자는 더 이상 코드를 한 줄씩 직접 작성하는 데 중심을 두지 않고, 주로 AI Agent를 이끌어 애플리케이션을 생성하고, 최적화하고, 디버깅합니다.
+Vibe Coding은 AI를 활용해 애플리케이션 개발 과정을 가속화하는 새로운 소프트웨어 개발 방식입니다. 이것은 전통적인 프로그래밍을 대체하는 것이 아니라, 더 "대화형" 프로그래밍 모드입니다. 이 개념은 AI 연구자 Andrej Karpathy가 제안했습니다: 이 워크플로에서 개발자는 더 이상 코드를 한 줄씩 수동으로 작성하지 않고, 주로 AI Agent를 안내하여 애플리케이션을 생성, 최적화 및 디버깅합니다.
 
-Vibe Coding의 핵심 생각은 **“코드 중심(code-first)”** 에서 **“의도 중심(intent-first)”** 으로 전환하는 것입니다. 더 이상 첫 번째 코드 줄부터 구상할 필요가 없습니다. 자연어로 원하는 결과를 설명하면 됩니다.
+Vibe Coding의 핵심 사상은 **"코드 중심(code-first)"**에서 **"의도 중심(intent-first)"**으로 전환하는 것입니다. 더 이상 첫 번째 줄의 코드부터 구상할 필요 없이, 자연어로 원하는 결과를 설명하면 됩니다.
 
-전형적인 Vibe Coding 워크플로는 끊임없이 반복되는 순환입니다.
+전형적인 Vibe Coding 워크플로는 끊임없이 반복되는 순환입니다:
 
-- **목표 설명:** 먼저 한 문장이나 한 단락으로 구현하고 싶은 기능을 설명합니다. 예: “Python 백엔드가 있고 시를 생성할 수 있는 간단한 스네이크 게임을 만들어줘.”
-- **AI가 코드 생성:** AI Agent가 요구사항을 해석하고, 기본 구조, 프론트엔드 페이지, 백엔드 로직을 포함한 첫 번째 코드 버전을 생성합니다.
-- **실행하고 관찰:** 생성된 코드를 실행해 예상대로 동작하는지 확인하고, 동시에 버그나 부족한 점을 찾습니다.
-- **피드백하고 반복:** 오류가 있거나 결과가 마음에 들지 않으면 대화에서 계속 지시합니다. 예: “뱀이 너무 느리게 움직여. 속도를 더 빠르게 해줘”, 또는 “지금 `.env` 파일의 API Key가 제대로 읽히지 않아. 백엔드 코드를 고쳐줘.”
-- **위 단계를 반복:** “설명 → 생성 → 실행 → 피드백” 순환을 계속 반복해 애플리케이션이 만족스러운 상태에 도달할 때까지 개선합니다.
+- **목표 설명:** 한 문장이나 한 단락으로 구현하고 싶은 기능을 설명합니다. 예: "Python 백엔드가 있고, 시를 생성할 수 있는 간단한 스네이크 게임을 만들어 줘."
+- **AI 코드 생성:** AI Agent가 요구사항을 분석하여 초안 코드를 생성하고, 기본 구조, 프론트엔드 페이지, 백엔드 로직을 포함합니다.
+- **실행 및 관찰:** 생성된 코드를 실행하고, 예상대로 작동하는지 확인하며, 버그나 부족한 점을 발견합니다.
+- **피드백 및 반복:** 오류가 있거나 효과가 만족스럽지 않으면 대화에서 계속 지시를 내립니다. 예: "뱀의 이동 속도가 너무 느려, 속도를 올려 줘" 또는 "지금 `.env` 파일의 API Key가 제대로 읽히지 않아, 백엔드 코드를 수정해 줘."
+- **위 단계 반복:** "설명 -> 생성 -> 실행 -> 피드백"의 순환을 계속 반복하여 애플리케이션이 만족스러운 상태에 도달할 때까지 진행합니다.
 
-### Vibe Coding의 주요 장점
+### Vibe Coding의 주요 장점:
 
-- **진입 장벽 감소:** 프로그래밍 경험이 부족한 디자이너, 창업자, 학생 등도 자연어를 통해 애플리케이션 개발에 참여할 수 있습니다.
-- **빠른 프로토타입:** 아이디어에서 최소 기능 제품(MVP)까지 걸리는 시간이 크게 줄어듭니다.
-- **효율 향상:** 템플릿 코드처럼 반복적이고 기계적인 코딩 작업을 자동으로 처리하여, 개발자가 아키텍처 설계와 문제 추상화에 더 집중할 수 있게 합니다.
-- **실험에 유리:** 먼저 빠르게 만들어 보고 계속 개선하는 방식을 장려하므로, 새로운 아이디어와 기능을 시도하기가 더 쉽습니다.
+- **진입 장벽 감소:** 프로그래밍 경험이 없는 디자이너, 창업자, 학생 등도 자연어로 애플리케이션 개발에 참여할 수 있습니다.
+- **빠른 프로토타이핑:** 아이디어에서 최소 실행 가능 제품(MVP)까지의 시간이 대폭 단축됩니다.
+- **효율성 향상:** 반복적이고 기계적인 코딩 작업(예: 템플릿 코드)을 자동으로 처리하여, 개발자가 아키텍처 설계와 문제 추상화에 집중할 수 있게 합니다.
+- **실험 유리:** 먼저 빠르게 결과물을 내고, 지속적으로 개선하는 방식을 장려하여, 새로운 아이디어와 기능을 시도하기 편합니다.
 
-## 2. Vibe Coding 온라인 플랫폼(Web-based)이란 무엇인가?
+## 2. Vibe Coding 온라인 플랫폼(Web-based)이란?
 
-이번 실제 테스트에서 평가한 도구는 **Web-based(온라인 플랫폼)** 과 **IDE(로컬 개발 환경)** 두 종류로 나뉩니다.
+이번 실측에서는 평가 도구가 두 가지 범주로 나뉘어 있음을 알 수 있습니다: **Web-based(온라인 플랫폼)**과 **IDE(로컬 개발 환경)**.
 
-둘 다 핵심은 AI가 코드를 작성하도록 돕는 것이지만, 사용 경험과 적합한 상황에는 큰 차이가 있습니다.
+핵심은 모두 AI가 코드를 작성하는 것을 돕는 것이지만, 사용 경험과 적용 시나리오에서 큰 차이가 있습니다:
 
-### Vibe Coding 온라인 플랫폼(Web-based)
+### Vibe Coding 온라인 플랫폼 (Web-based)
 
 **대표 도구:** Lovable, Replit, Z.ai, v0
 
-이는 “짐만 들고 들어가면 되는” 호텔식 아파트와 비슷합니다.
+이것은 "짐만 들고 바로 입주할 수 있는" 호텔식 아파트와 같습니다.
 
-- **환경 설정 불필요:** Python 환경이 무엇인지, Node.js 버전이 무엇인지 신경 쓸 필요가 없고, 의존성 설치도 신경 쓰지 않아도 됩니다. 브라우저를 열고 주소를 입력하면 바로 코딩을 시작할 수 있습니다.
-- **원클릭 미리보기와 배포:** 코드가 생성되면 플랫폼은 보통 오른쪽 창에 실행 결과를 자동으로 보여줍니다. 완성되면 버튼 하나로 링크를 생성해 친구에게 공유할 수 있습니다.
-- **적합한 상황:**
-  - **아이디어 빠른 검증(MVP):** 머릿속에 아이디어가 있고, 30분 정도 써서 만들 수 있는지 보고 싶을 때.
-  - **초보자 입문:** 복잡한 환경 오류에 막혀 포기하고 싶지 않고, AI 코딩의 재미를 경험하고 싶을 때.
-  - **가벼운 애플리케이션:** 간단한 도구 웹페이지, 미니게임, 개인 소개 페이지를 만들 때.
+- **환경 설정 불필요:** Python 환경이 무엇인지, Node.js 버전이 무엇인지 신경 쓸 필요가 없고, 의존성 설치도 필요 없습니다. 브라우저를 열고 URL을 입력하면 바로 코드를 작성할 수 있습니다.
+- **원클릭 미리보기 및 배포:** 코드가 생성되면 플랫폼이 보통 오른쪽 창에 자동으로 실행 효과를 보여 줍니다. 완성되면 버튼 하나로 링크를 생성해 친구에게 공유할 수 있습니다.
+- **적합한 시나리오:**
+  - **빠른 아이디어 검증(MVP):** 머릿속에 아이디어가 있고, 30분 안에 만들 수 있는지 확인하고 싶을 때.
+  - **초보자 입문:** 복잡한 환경 오류에 좌절하고 싶지 않고, AI 프로그래밍의 재미만 경험하고 싶을 때.
+  - **경량급 애플리케이션:** 간단한 도구 웹페이지, 소규모 게임 또는 개인 소개 페이지 만들기.
 
-### AI IDE(로컬 개발 환경)
+### AI IDE (로컬 개발 환경)
 
 **대표 도구:** Cursor, Trae, VS Code + AI 플러그인
 
-이는 “고급 인테리어가 된” 자가 주택과 비슷합니다.
+이것은 "인테리어가 완료된" 자가 주택과 같습니다.
 
-- **강력한 로컬 능력:** 당신의 컴퓨터에서 실행되며, 모든 로컬 파일에 직접 접근하고 컴퓨터의 연산 자원을 활용할 수 있습니다.
-- **전문 워크플로와 매끄러운 연결:** 대형 프로젝트에 적합하며, 다양한 플러그인을 자유롭게 설치하고, 로컬 데이터베이스에 연결하고, 복잡한 디버깅을 수행할 수 있습니다.
-- **적합한 상황:**
-  - **전문 프로젝트 개발:** 장기 유지보수가 필요하고 구조가 복잡한 상업 프로젝트.
-  - **깊은 맞춤화:** 코드 세부 사항을 극도로 제어해야 하거나 Git, Docker 같은 기존 로컬 워크플로와 깊게 결합해야 할 때.
-  - **데이터 프라이버시:** 코드가 완전히 로컬에 있으므로 일부 기업의 보안 규정에 더 잘 맞습니다.
+- **강력한 로컬 기능:** 컴퓨터에서 실행되며, 모든 로컬 파일에 직접 접근할 수 있고, 컴퓨터의 컴퓨팅 파워를 활용할 수 있습니다.
+- **전문 워크플로와 원활한 연동:** 대규모 프로젝트에 적합하며, 다양한 플러그인을 자유롭게 설치하고, 로컬 데이터베이스에 연결하며, 복잡한 디버깅을 수행할 수 있습니다.
+- **적합한 시나리오:**
+  - **전문 프로젝트 개발:** 장기간 유지보수가 필요하고 구조가 복잡한 상업 프로젝트.
+  - **딥 커스터마이징:** 코드 세부 사항에 대한 완벽한 제어가 필요하거나 기존 로컬 워크플로(Git, Docker 등)와 깊은 통합이 필요한 경우.
+  - **데이터 프라이버시:** 코드가 완전히 로컬에 있어 특정 기업의 보안 규정에 더 부합합니다.
 
-**정리하면:** AI 코딩을 막 시작했거나 작은 것을 빠르게 만들어 보고 싶다면 **온라인 플랫폼**이 훌륭한 출발점입니다. 전문 개발자이거나 프로젝트가 점점 복잡해진다면 **로컬 IDE**가 더 높은 상한을 제공합니다.
+**요약하자면:** AI 프로그래밍을 처음 접하거나, 간단한 것을 빠르게 만들어 보고 싶다면 **온라인 플랫폼**이 훌륭한 출발점입니다. 전문 개발자이거나 프로젝트가 점점 복잡해진다면 **로컬 IDE**가 더 높은 상한을 제공할 것입니다.
 
 ---
 
-## 3. AI Agent란 무엇인가?
+## 3. AI Agent란?
 
-### AI Agent란 무엇인가?
+### AI Agent란?
 
-AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성하기 위해 자율적으로 행동할 수 있는 소프트웨어 시스템입니다. 고정된 지시를 따르고 흐름이 단일한 전통적인 소프트웨어와 비교하면, AI Agent는 더 유연하고 적응적입니다.
+AI Agent는 환경을 인식하고, 의사결정을 내리며, 특정 목표를 달성하기 위해 자율적으로 행동하는 소프트웨어 시스템입니다. 고정된 지시를 따르고 단일한 흐름을 가진 전통적인 소프트웨어와 비교하여, AI Agent는 더 유연하고 적응력이 뛰어납니다.
 
-아래는 AI Agent를 전통적인 프로그램과 구분하는 몇 가지 핵심 특징입니다.
+다음은 AI Agent를 전통적인 프로그램과 구분하는 핵심 특징입니다:
 
-- **자율성(Autonomy):** AI Agent는 비교적 높은 독립성을 가집니다. 전통적인 프로그램은 보통 사람이 한 단계씩 트리거해야 하지만, Agent는 목표에 따라 다음에 무엇을 할지 스스로 결정할 수 있습니다.
-- **지각과 기억(Perception & Memory):** Agent는 환경에서 데이터를 수집합니다. 예를 들어 API 응답, 센서 데이터, 사용자 입력 등이 있습니다. 또한 “기억”을 통해 맥락을 보존하여 이후 행동에서 경험을 재사용하고 결과를 지속적으로 개선합니다.
-- **합리성과 목표 지향(Rationality & Goal-Orientation):** Agent는 주어진 목표를 중심으로 분석하고 계획하며, 더 높은 “성과 지표”를 추구하기 위해 가장 적절한 행동 순서를 선택합니다.
-- **도구 사용(Tool Use):** 현대 AI Agent의 큰 특징 중 하나는 외부 도구를 호출할 수 있다는 점입니다. 더 이상 “텍스트 생성”에만 갇혀 있지 않습니다. 예를 들어 웹을 탐색하고, 코드를 실행하고, 데이터베이스를 조회하고, 이메일을 보낼 수 있습니다. 즉 “도구를 조율하는” 두뇌입니다.
+- **자율성(Autonomy):** AI Agent는 높은 독립성을 가집니다. 전통적인 프로그램은 보통 사람이 한 단계씩 트리거해야 하지만, Agent는 목표에 따라 다음에 무엇을 해야 할지 자율적으로 결정할 수 있습니다.
+- **인식과 기억(Perception & Memory):** Agent는 환경에서 데이터를 수집(예: API 응답, 센서 데이터, 사용자 입력 등)하고, "기억"을 통해 컨텍스트를 보존하여, 후속 행동에서 경험을 재사용하고 효과를 지속적으로 개선합니다.
+- **합리성과 목표 지향성(Rationality & Goal-Orientation):** Agent는 주어진 목표를 중심으로 분석하고 계획하며, 더 높은 "성과 지표"를 추구하기 위해 가장 적합한 행동 순서를 선택합니다.
+- **도구 사용(Tool Use):** 현대 AI Agent의 중요한 특징은 외부 도구를 호출할 수 있다는 것으로, 더 이상 "텍스트 생성"에만 국한되지 않습니다. 예를 들어, 웹을 탐색하고, 코드를 실행하고, 데이터베이스를 쿼리하고, 이메일을 보내는 등 "도구를 스케줄링하는" 두뇌입니다.
 
-다음과 같이 비유해 이해할 수 있습니다.
+이렇게 비유해 볼 수 있습니다:
 
-- **전통적인 프로그램**은 계산기와 같습니다. 숫자와 연산자를 입력하면, 버튼을 눌렀을 때만 계산을 수행합니다.
-- **AI 어시스턴트**는 인간 비서와 같습니다. “근처 식당을 찾아줘”라고 하면 검색 결과를 주고 선택지를 나열하지만, 최종 결정은 여전히 당신이 합니다.
-- **AI Agent**는 자동화된 연구팀에 더 가깝습니다. 당신은 “일본 여행 일정을 계획해줘” 같은 상위 목표만 주면 됩니다. 그러면 Agent는 작업을 분해하고, 인터넷에서 자료를 찾고, 항공권과 호텔을 예약하고(API를 통해), 일정을 정리한 뒤 최종 결과를 전달합니다. 전체 과정에서 세부 사항에 대한 당신의 개입은 거의 필요하지 않습니다.
+- **전통적인 프로그램**은 계산기와 같습니다. 숫자와 연산자를 입력하면 버튼을 누를 때만 계산을 실행합니다.
+- **AI 어시스턴트**는 인간 비서와 같습니다. "근처 식당을 찾아줘"라고 하면 검색 결과를 보여주고 옵션을 나열하지만, 최종 결정은 여러분이 내립니다.
+- **AI Agent**는 자동화된 연구 팀과 더 비슷합니다. 고수준 목표(예: "일본 여행 일정을 짜줘")만 주면, 작업을 분해하고, 인터넷에서 자료를 찾고, 항공편과 호텔을 예약(API를 통해)하고, 일정을 정리하여 결과를 전달합니다. 전체 과정에서 세부 사항에 거의 개입할 필요가 없습니다.
 
 ---
 
 # 2. 프롬프트 작성에 대하여
 
-## 1. 프롬프트를 한 번에 다 쓰는 것이 좋을까, 여러 단계로 나누는 것이 좋을까?
+## 1. 프롬프트를 한 번에 작성하는 것이 좋은가, 여러 단계로 나누는 것이 좋은가?
 
-많은 사람은 “완전한 풀스택 애플리케이션을 만들어줘”라는 내용을 하나의 프롬프트 안에 한 번에 다 설명하고 싶어 합니다. 실제로 현재 도구들은 이미 충분히 강력해서, 한 번에 꽤 괜찮아 보이는 결과를 내놓을 가능성도 있습니다. 하지만 전체 경험과 성공률을 보면, 작업을 작은 단계로 나누고 단계별로 반복하는 편이 대체로 더 좋습니다. “더 이상 고쳐지지 않는” 막다른 길에 빠질 가능성도 줄어듭니다.
+많은 사람들이 "완전한 풀스택 애플리케이션 만들기"를 하나의 프롬프트에 한 번에 설명하고 싶어 합니다. 사실 현재 도구는 충분히 강력하여, 한 번에 꽤 괜찮은 결과를 낼 수 있습니다. 하지만 전체적인 경험과 성공률 측면에서, 작업을 작은 단계로 나누고 단계별로 반복하는 것이 더 나은 결과를 내며, "더 이상 고칠 수 없는" 막다른 골목에 빠질 가능성도 적습니다.
 
-> **작은 팁:** “한 번에 완성”을 기대하기보다, 큰 목표를 실행 가능한 작은 할 일(To-do)들로 나누는 편이 좋습니다.  
-> 예를 들어 “build me a Snake game”이라고 바로 말하지 말고, 다음처럼 나누세요.  
-> “1. 먼저 스네이크 게임의 프론트엔드를 만들어줘”,  
-> “2. 그다음 점수를 기록하는 백엔드를 구현해줘”,  
-> “3. 마지막으로 프론트엔드와 백엔드를 연결해줘”.  
-> 이렇게 하면 AI가 요구사항을 더 정확히 이해하고 더 신뢰할 수 있는 출력을 낼 수 있습니다.
+> **작은 팁:** "한 번에 완벽하게" 기대하기보다, 큰 목표를 실행 가능한 작은 할 일(To-do)로 나누는 것이 좋습니다.
+> 예를 들어, "build me a Snake game"이라고 바로 말하지 말고, 다음과 같이 나누세요:
+> "1. 먼저 스네이크 게임의 프론트엔드를 만들어 줘",
+> "2. 그 다음 점수를 기록하는 백엔드를 구현해 줘",
+> "3. 마지막으로 프론트엔드와 백엔드를 연결해 줘".
+> 이렇게 하면 AI가 여러분의 요구사항을 더 정확하게 이해하고 더 안정적인 결과를 낼 수 있습니다.
 
-## 2. 명확할수록 좋다
+## 2. 명확할수록 좋습니다
 
-- Vibe Coding에서 당신이 쓰는 프롬프트는 당신이 쓰는 코드만큼 중요합니다. 프롬프트가 명확하고 구체적일수록 결과는 당신이 마음속으로 생각한 것에 더 가까워집니다.
-- 처음부터 목표와 제약 조건을 명확히 말하면 이후 반복 수정 횟수를 줄일 수 있습니다. 이는 시간을 아낄 뿐 아니라 사용량과 비용도 절약합니다.
+- Vibe Coding에서 작성하는 프롬프트는 작성하는 코드만큼 중요합니다. 프롬프트가 명확하고 구체적일수록 결과가 여러분의 생각에 더 가까워집니다.
+- 처음에 목표와 제약 조건을 명확히 설명하면, 후속 수정 횟수를 줄일 수 있으며, 이는 시간 절약일 뿐만 아니라 사용량과 비용도 절약할 수 있습니다.
 
 ---
 
-# 3. 도구 개요(Vibe Coding / UIUX 도구)
+# 3. 도구 개요 (Vibe Coding / UIUX 도구)
 
 ## 1. AI Agent 플랫폼
 
@@ -148,9 +148,9 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성
 
 ---
 
-# 4. 실습 튜토리얼(Vibe Coding + UI 결합)
+# 4. 실전 튜토리얼 (Vibe Coding + UI 결합)
 
-1. Vibe Coding을 진행하려는 플랫폼의 채팅창에 원하는 프로그램 설명을 입력합니다.
+1. Vibe Coding을 진행할 플랫폼의 채팅 창에 원하는 프로그램 설명을 입력합니다.
    예시:
 
    > 프론트엔드와 백엔드가 있는 간단한 스네이크(Snake) 웹 애플리케이션을 만들어 주세요.
@@ -160,197 +160,200 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성
    > - 페이지 1: 게임 페이지
    >   - 키보드로 뱀의 이동을 제어합니다.
    >   - 뱀이 먹는 것은 음식이 아니라 영어 단어입니다.
-   >   - 페이지 사이드바에 수집한 단어와 개수를 표시합니다.
-   >   - 게임이 끝난 뒤에도 수집한 단어는 그대로 남아 있고, 새 게임에서도 이어집니다.
-   > - 페이지 2: 시 쓰기 페이지(Make Poem)
-   >   - 게임 페이지와 같은 단어 목록을 표시합니다. 데이터는 동일해야 합니다.
-   >   - 현재 수집한 단어를 백엔드로 보내 시를 생성하는 버튼을 제공합니다.
-   >   - 시가 생성된 뒤, 사용된 단어를 목록에서 제거하거나 개수를 줄입니다.
+   >   - 페이지 사이드바에 수집된 단어와 수량을 표시합니다.
+   >   - 게임이 끝난 후에도 수집된 단어는 유지되며, 새로운 게임에서도 계속됩니다.
+   > - 페이지 2: 시 쓰기 페이지 (Make Poem)
+   >   - 게임 페이지와 동일한 단어 목록을 표시합니다(데이터 일관성).
+   >   - 현재 수집된 단어를 백엔드로 보내 시를 생성하는 버튼을 제공합니다.
+   >   - 시가 생성되면, 사용된 단어는 목록에서 제거되거나 카운트가 감소합니다.
    >
-   > * Game과 Make Poem 두 페이지 사이를 전환할 수 있도록 간단한 내비게이션을 추가합니다.
-   > * 수집된 단어가 두 페이지 모두에서 보이도록 보장합니다.
+   > * Game과 Make Poem 두 페이지 사이를 전환하는 간단한 내비게이션을 추가합니다.
+   > * 수집된 단어가 두 페이지 모두에서 보이도록 합니다.
    >
    > 2. 백엔드
    >
-   > - 수집한 단어를 받아 시를 반환하는 백엔드 API를 제공합니다.
-   > - DeepSeek API를 사용해 시를 생성합니다.
-   > - API Key는 `.env` 파일에 저장하고, `.gitignore`에서 해당 파일을 무시합니다.
+   > - 수집된 단어를 받아 시를 반환하는 백엔드 인터페이스를 제공합니다.
+   > - DeepSeek API를 사용하여 시를 생성합니다.
+   > - API Key를 `.env` 파일에 저장하고, `.gitignore`에서 이 파일을 무시합니다.
 
-2. DeepSeek API Key를 입력합니다. ([https://platform.deepseek.com/](https://platform.deepseek.com/) 에서 받을 수 있습니다.)
-   1. LLM의 API Key는 자신의 프로젝트에서 대형 모델을 호출하는 데 사용됩니다. 민감한 정보이기 때문에 공개하면 안 되며, 별도의 설정 파일에 작성해야 합니다.
-      **왜 `.env` 파일을 사용하고 GitHub에 업로드하면 안 될까요?**
-   - `.env` 파일은 **키 또는 비밀번호**를 저장하는 데 전용으로 쓰입니다. 예: DeepSeek API Key.
-   - 이 파일이 GitHub에 업로드되면 전 세계 사람이 당신의 키를 보고 도용할 수 있습니다.
-   - 보안을 위해 `.gitignore` 파일에 `.env`를 무시하도록 선언하여 Git이 추적하지 않게 해야 합니다.
-   - 이렇게 하면 프로젝트는 여전히 로컬에서 이 키들을 정상적으로 사용할 수 있지만, 저장소에는 유출되지 않습니다.
+2. DeepSeek API Key를 입력합니다. ([https://platform.deepseek.com/](https://platform.deepseek.com/)에서 얻을 수 있습니다)
+   1. LLM의 API Key는 자신의 프로젝트에서 대형 모델을 호출하는 데 사용됩니다. 이것은 민감한 정보이므로 공개할 수 없으며, 별도의 설정 파일에 작성해야 합니다.
+      **왜 `.env` 파일을 사용하고, 이것을 GitHub에 업로드하지 않아야 할까요?**
+   - `.env` 파일은 **비밀키나 비밀번호**(예: DeepSeek API Key)를 저장하는 데 특화된 파일입니다.
+   - 이 파일이 GitHub에 업로드되면, 전 세계 사람이 여러분의 비밀키를 보고 도용할 수 있습니다.
+   - 안전을 위해 `.gitignore` 파일에 `.env`를 무시하도록 선언하여, Git이 이를 추적하지 않게 합니다.
+   - 이렇게 하면 프로젝트는 로컬에서 이러한 비밀키를 정상적으로 사용할 수 있지만, 저장소에서 유출되지 않습니다.
 
-3. 생성 결과를 확인한 뒤 오류가 있거나 수정할 부분이 있으면 채팅창에 바로 수정 요청을 입력할 수 있습니다.
-4. 페이지 디자인이 마음에 들지 않으면 Figma나 Mastergo에서 인터페이스를 다시 디자인한 뒤, 디자인 의도를 Agent에게 피드백할 수도 있습니다.
+3. 생성 결과를 확인한 후, 오류나 수정이 필요한 부분이 있으면 채팅 창에서 직접 수정 요청을 입력합니다.
+4. 페이지 디자인이 만족스럽지 않다면, Figma나 Mastergo에서 인터페이스를 다시 디자인한 후, 디자인 아이디어를 Agent에게 피드백할 수도 있습니다.
 
 - **예시**
 
-> _Word-Snake_ 라는 이름의 **두 페이지 Web 애플리케이션**을 설계해 주세요.
+> _Word-Snake_ 라는 이름의 **2페이지 웹 애플리케이션**을 디자인해 주세요.
 >
 > - **Game 페이지:**
 > - 뱀은 키보드로 이동을 제어합니다.
 > - 뱀이 먹는 것은 일반 음식이 아니라 영어 단어입니다.
-> - 오른쪽 패널에 수집한 단어와 수량을 표시합니다.
-> - 게임 종료 후에도 단어 재고는 초기화되지 않고, 다음 라운드에서 계속 사용됩니다.
+> - 오른쪽 패널에 수집된 단어와 수량을 표시합니다.
+> - 게임이 끝나도 단어 재고는 초기화되지 않고, 새로운 라운드에서 계속 사용합니다.
 > - **Make Poem 페이지:**
-> - 같은 공유 단어 재고를 표시합니다.
+> - 동일한 공유 단어 재고를 표시합니다.
 > - 사용자가 일부 단어를 선택하고 **Generate Poem** 버튼을 클릭합니다.
-> - 이 단어들을 백엔드로 보내 DeepSeek API가 시를 생성하게 합니다.
-> - 시가 생성된 뒤, 사용된 단어를 재고에서 삭제하거나 줄입니다.
-> - **내비게이션:** 간단한 Tab 또는 상단 메뉴로 두 페이지 사이를 전환합니다.
-> - **공유 상태:** 수집된 단어가 두 페이지에서 항상 동기화되어 보이도록 보장합니다.
+> - 이 단어들을 백엔드로 보내 DeepSeek API가 시를 생성합니다.
+> - 시가 생성되면, 사용된 단어는 재고에서 삭제되거나 카운트가 감소합니다.
+> - **내비게이션:** 간단한 Tab이나 상단 메뉴로 두 페이지 사이를 전환합니다.
+> - **공유 상태:** 수집된 단어가 두 페이지에서 항상 동기화되어 보이도록 합니다.
 
-- **결과 예시**
+- **효과 예시**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
 
 ---
 
-# 5. AI Agent 플랫폼 비교(간단한 프로젝트에 가장 좋은 조합을 고르는 법)
+# 5. AI Agent 플랫폼 비교 (간단한 프로젝트에 최적의 조합 선택하기)
 
-서로 다른 Vibe Coding 플랫폼은 각기 다른 특징과 워크플로를 가지고 있습니다. 우리는 같은 “DeepSeek API가 포함된 스네이크 게임” 요구사항을 여러 플랫폼에서 실제로 테스트하고, 초보자의 관점에서 장단점을 평가했습니다. 아래는 요약입니다.
+각 Vibe Coding 플랫폼은 특징과 워크플로가 다릅니다. 우리는 "DeepSeek API가 있는 스네이크 게임"이라는 동일한 요구사항을 사용하여 여러 플랫폼에서 실측하고, 초보자 관점에서 장단점을 평가했습니다. 다음은 요약입니다.
 
 ## 1. 비교 기준
 
 1. **목표(Goal)**
-   DeepSeek API를 연결한 스네이크(Snake) 웹 애플리케이션을 구축합니다.
-
+   DeepSeek API가 연동된 스네이크(Snake) 웹 애플리케이션 구축.
 2. **게임 세부 사항(Game Details)**
-   1. 게임은 DeepSeek LLM API를 통해 시를 생성합니다.
-   2. 뱀이 먹는 것은 영어 단어이며, 수집한 단어는 게임 종료 후에도 유지되고 새 게임에서도 계속 사용됩니다. 같은 단어를 여러 번 수집할 수 있으며 각각 개수가 계산됩니다.
-   3. 시를 하나 생성한 뒤, 사용된 단어는 재고에서 제거됩니다.
+   1. 게임은 DeepSeek LLM API를 사용하여 시를 생성합니다.
+   2. 뱀이 먹는 것은 영어 단어이며, 수집된 단어는 게임이 끝난 후에도 유지되고 새로운 게임에서 계속 사용됩니다. 동일한 단어는 여러 번 수집될 수 있으며, 각각 개별적으로 카운트됩니다.
+   3. 시가 생성되면, 사용된 단어는 재고에서 제거됩니다.
 
 3. **필수 기능(Must-Haves)**
-   1. 스네이크 게임을 포함한 실행 가능한 프론트엔드 페이지. 키보드 제어와 Canvas 렌더링을 포함합니다.
-   2. 단어 수집 메커니즘. 단어가 보드에 나타나고, 뱀이 단어를 먹으면 사이드바 목록이 업데이트됩니다.
-   3. 여러 게임 라운드 사이에서도 단어 재고를 지속적으로 유지합니다.
-   4. DeepSeek API를 사용하는 백엔드. API Key가 없으면 먼저 가짜 시를 반환해도 됩니다.
-   5. “시 생성” 버튼. 클릭하면 백엔드를 호출하고, 시를 표시하며, 사용 상황에 따라 단어 재고를 업데이트합니다.
-   6. API Key를 위한 `.env` 지원과 `.gitignore`를 통한 키 유출 방지.
+   1. 실행 가능한 프론트엔드 페이지, 스네이크 게임 포함(키보드 제어, Canvas 렌더링).
+   2. 단어 수집 메커니즘(단어가 보드에 나타나고, 뱀이 단어를 먹으면 사이드바 목록이 업데이트됨).
+   3. 여러 라운드의 게임 사이에서 단어 재고의 지속성 유지.
+   4. DeepSeek API를 사용하는 백엔드(API Key가 없는 경우, 먼저 모의 시를 반환).
+   5. "시 생성" 버튼: 클릭 후 백엔드를 호출하고, 시를 표시하며, 사용량에 따라 단어 재고를 업데이트.
+   6. API Key에 대한 `.env` 지원, 그리고 `.gitignore`를 통한 비밀키 유출 방지.
 
-4. **있으면 좋은 기능(Nice-to-Haves)**
-   1. 사용자가 시 생성에 사용할 단어를 선택할 수 있습니다.
-   2. 사용자 경험이 친절합니다. 예를 들어 사이드바에 단어 목록을 명확히 보여 주고, 시 표시 영역의 레이아웃이 합리적이어야 합니다.
-   3. 초보자를 위해 코드에 주석을 추가하여 핵심 로직을 설명합니다.
+4. **보너스 항목(Nice-to-Haves)**
+   1. 사용자가 시를 생성할 단어를 선택할 수 있음.
+   2. 사용자 친화적인 경험(예: 사이드바에 단어 목록이 명확히 표시, 시 표시 영역의 레이아웃이 합리적).
+   3. 초보자를 위해 코드에 주석을 추가하여 핵심 로직 설명.
 
 ## 2. 코딩 출력 비교
 
-### 1. Lovable(Web-based)
+### 1. Lovable (Web-based)
 
-- **플랫폼 유형:** Web
-- **주요 특징과 워크플로:** Lovable은 통합과 협업 측면에서 잘 만들어져 있습니다. Supabase 데이터베이스 연결 같은 초기화 작업을 자동으로 처리하여 프로젝트 구축 과정이 매우 매끄럽습니다. 프로젝트 요구사항만 설명하면 Agent가 각종 서비스를 연결하고 기본 구조를 만들어 줍니다.
-- **적합한 사용자:** Vibe Coding을 처음 시도하는 초보자에게 Lovable은 매우 친절한 선택입니다. 여러 서비스를 함께 연결하는 복잡도를 단순화해 주므로 환경 설정이 아니라 프롬프트와 반복 개선에 집중할 수 있습니다. 높은 자동화 덕분에 실행 가능한 프로토타입을 빠르게 얻을 수 있습니다.
+- **플랫폼 유형:** 웹
+- **주요 특징 및 워크플로:** Lovable은 통합과 협업 측면에서 매우 우수합니다. Supabase 데이터베이스 연결 등의 초기화 작업을 자동으로 완료하여, 프로젝트 설정 과정을 매우 원활하게 만듭니다. 프로젝트 요구사항만 설명하면 Agent가 다양한 서비스를 연결하고 기본 구조를 구축해 줍니다.
+- **적합한 사용자:** 처음 Vibe Coding을 시도하는 초보자에게 Lovable은 매우 친근한 선택입니다. 다중 서비스 연동의 복잡성을 단순화하여, 환경 설정이 아닌 프롬프트와 반복에 집중할 수 있게 합니다. 높은 자동화 덕분에 실행 가능한 프로토타입을 빠르게 얻을 수 있습니다.
 - **프롬프트 과정:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
-- **스네이크 게임 결과:**
+- **스네이크 게임 효과:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
 
-- **가격:** 비교적 비싼 편이지만, 학교 이메일이 있으면 학생 인증을 통해 반값으로 사용할 수 있습니다.
+- **가격:** 상대적으로 비싼 편이지만, 학교 이메일이 있다면 학생 인증으로 반값에 사용할 수 있습니다.
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
 
-### 2. Cursor(IDE)
+### 2. Cursor (IDE)
 
-- **플랫폼 유형:** 데스크톱 애플리케이션(PC)
-- **주요 특징과 워크플로:** Cursor는 AI 기능이 통합된 전용 IDE이며 Windows, macOS, Linux를 지원합니다. 코드 생성, 지능형 재작성, 코드베이스 질의 같은 기능을 개발 환경 안에 직접 넣었습니다. Web 도구와 비교하면 전통적인 로컬 개발 경험에 더 가깝습니다. 로컬 환경이기 때문에 컴퓨터마다 설정이 다르고, 때때로 환경 관련 문제가 발생할 수 있습니다. 장점은 프로젝트가 내 컴퓨터에 있으므로 추가로 다운로드하거나 실행 환경을 설정할 필요가 적고, Cursor가 많은 번거로운 단계를 처리해 준다는 점입니다.
-- **적합한 사용자:** 어느 정도 프로그래밍 기초가 있는 사용자에게 Cursor는 매우 강력하고 익숙한 환경입니다. 그러나 완전 초보자에게는 프로젝트 구조, 의존성 관리, 파일 구성 같은 개념을 스스로 이해해야 하므로 학습 곡선이 더 가파를 수 있습니다. 전통적인 코딩 흐름에 AI 어시스턴트를 추가하고 싶은 개발자에게 더 적합합니다.
+- **플랫폼 유형:** 데스크톱 앱 (PC)
+- **주요 특징 및 워크플로:** Cursor는 AI 기능이 통합된 전용 IDE로, Windows, macOS, Linux를 지원합니다. 코드 생성, 지능형 재작성, 코드베이스 쿼리 등의 기능을 개발 환경에 직접 내장합니다. 웹 도구와 비교하여 전통적인 로컬 개발 경험에 더 가깝습니다. 로컬 환경이므로 컴퓨터마다 설정이 다를 수 있어, 때때로 환경 관련 문제가 발생할 수 있습니다. 장점은 프로젝트가 로컬에 있어 추가로 다운로드하거나 실행 환경을 설정할 필요가 없으며, Cursor가 많은 번거로운 단계를 처리해 준다는 것입니다.
+- **적합한 사용자:** 이미 어느 정도 프로그래밍 기반이 있는 사용자에게 Cursor는 매우 강력하고 익숙한 환경입니다. 하지만 완전한 제로 베이스 초보자에게는 프로젝트 구조, 의존성 관리, 파일 구성 등의 개념을 이해해야 하므로 학습 곡선이 더 가파릅니다. 전통적인 코딩 워크플로에 AI 어시스턴트를 추가하고 싶은 개발자에게 더 적합합니다.
 - **프롬프트 과정:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
-- **스네이크 게임 결과:**
+- **스네이크 게임 효과:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
 
 - **가격:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
 
-### 3. Z.ai(Web-based)
+### 3. Z.ai (Web-based)
 
-- **플랫폼 유형:** Web
-- **주요 특징과 워크플로:** Z.ai의 사용 방식은 비교적 직접적이지만, 뚜렷한 어려움이 하나 있습니다. **생성된 코드를 수동으로 복사해 붙여 넣어야 한다**는 점입니다. 플랫폼 자체에 실시간 미리보기 창이 부족하여 코드 실행 결과를 즉시 보기 어렵습니다.
-- **적합한 사용자:** 이 플랫폼은 비교적 “직접 손을 대는” 사용 방식을 요구합니다. 자동화가 부족하다는 것은 코드와 직접 마주해야 한다는 뜻이고, AI 출력 내용을 깊이 이해하고 싶은 사람에게는 오히려 훈련이 될 수 있습니다. 하지만 잦은 복사 붙여넣기는 효율 문제와 실수 위험을 가져옵니다. 원클릭 경험을 원하는 사람보다는 “AI가 원시적으로 출력한 코드”를 보고 싶은 학생에게 더 적합합니다.
+- **플랫폼 유형:** 웹
+- **주요 특징 및 워크플로:** Z.ai의 사용 방식은 비교적 직접적이지만, 한 가지 명백한 도전은 **생성된 코드를 수동으로 복사하여 붙여넣기**해야 한다는 것입니다. 플랫폼 자체에 실시간 미리보기 창이 없어, 코드 실행 효과를 바로 확인하기 어렵습니다.
+- **적합한 사용자:** 이 플랫폼은 비교적 "손으로 하는" 사용 방식을 요구합니다. 자동화가 부족하다는 것은 코드와 직접적으로 상호작용해야 한다는 의미이며, 이는 AI 출력 내용을 깊이 이해하고 싶은 사람에게는 오히려 훈련이 됩니다. 하지만 빈번한 복사 붙여넣기는 효율성 문제와 오류 위험을 가져옵니다. "원클릭 경험"을 추구하는 사람보다 "원래 AI 출력 코드"를 보고 싶은 분들에게 더 적합합니다.
 - **프롬프트 과정:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
-- **스네이크 게임 결과:**
+- **스네이크 게임 효과:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
 
 - **가격:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
 
-### 4. Replit(Web-based)
+### 4. Replit (Web-based)
 
-- **플랫폼 유형:** Web
-- **주요 특징과 워크플로:** Replit은 통합 온라인 개발 및 배포 환경입니다. 브라우저 안에서 코드를 작성하고, 프로그램을 실행하고, 온라인 접속 주소를 생성할 수 있습니다. 코딩을 시작하기 전에 명확한 실행 계획을 제시합니다. 또한 시각적 편집기도 제공하므로 미리보기 창에서 UI를 직접 수정할 수 있고, 소스 코드는 자동으로 동기화되어 업데이트됩니다. 이를 통해 AI 출력이 기대와 맞는지 수시로 확인할 수 있어 왕복 수정 횟수를 크게 줄일 수 있습니다.
+- **플랫폼 유형:** 웹
+- **주요 특징 및 워크플로:** Replit은 올인원 온라인 개발 및 배포 환경으로, 브라우저에서 코드를 작성하고, 프로그램을 실행하고, 온라인 접속 주소를 생성할 수 있습니다. 코딩을 시작하기 전에 명확한 실행 계획을 보여주며, 시각적 편집기도 제공하여 미리보기 창에서 UI를 직접 수정하면 소스 코드가 자동으로 동기화됩니다. 이렇게 하면 AI의 출력이 기대에 부합하는지 언제든 확인할 수 있어, 수정을 위한 반복 작업을 크게 줄일 수 있습니다.
 
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
 
-- **적합한 사용자:** Replit은 초보자에게 매우 친절합니다. 코딩부터 배포까지의 전체 폐쇄 루프를 단순화하여 서버나 호스팅 서비스를 직접 따로 설정할 필요가 없습니다. 협업 기능도 강력해 학생들이 함께 프로젝트를 하거나 다른 사람에게 원격으로 코드 확인을 부탁하기에도 적합합니다.
-- **프롬프트 과정:** 구축 과정에서 AI가 처음부터 요구사항을 완전히 이해한 것은 아니었고, 중간에 약 3번의 반복을 거친 뒤에야 최종 출력이 이상적인 결과에 도달했습니다.
+- **적합한 사용자:** Replit은 초보자에게 매우 친근합니다. 코딩에서 배포까지의 완전한 루프를 단순화하여, 별도로 서버나 호스팅 서비스를 설정할 필요가 없습니다. 협업 기능도 강력하여, 학생들끼리 함께 프로젝트를 하거나 다른 사람에게 원격으로 코드를 확인해 달라고 요청하기에 적합합니다.
+- **프롬프트 과정:** 구축 과정에서 AI가 처음부터 요구사항을 완전히 이해한 것은 아니었고, 약 3라운드의 반복을 거쳐 최종 출력이 이상적인 효과에 도달했습니다.
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
-- **스네이크 게임 결과:**
+- **스네이크 게임 효과:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
 
 - **가격:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
 
-### 5. Minimax(Web-based)
+### 5. Minimax (Web-based)
 
-- **플랫폼 유형:** Web
-- **주요 특징과 워크플로:** Minimax는 작업을 수행할 때 보통 시간이 꽤 걸립니다. 그 흐름은 대체로 AI가 자동으로 오류를 발견하고 수정하는 과정을 포함하므로 전체 과정이 느리거나 다소 번거롭게 느껴질 수 있습니다. 이 프로젝트를 예로 들면, Agent는 보통 먼저 상세 계획을 생성한 뒤 백엔드, 데이터베이스, 프론트엔드 로직을 단계적으로 구축합니다.
-- **적합한 사용자:** 자동으로 테스트를 실행하고 오류를 수정하기 때문에 시간과 Token 소비가 모두 큰 편입니다. 하지만 AI가 문제를 찾고 해결하는 과정을 분명히 볼 수 있으므로 학습 관점에서는 가치가 있습니다.
+- **플랫폼 유형:** 웹
+- **주요 특징 및 워크플로:** Minimax는 작업을 실행할 때 보통 시간이 많이 걸립니다. 그 과정에는 AI가 자동으로 오류를 발견하고 수정하는 것이 포함되므로, 전체 과정이 느리고 다소 번거로울 수 있습니다. 이 프로젝트를 예로 들면, Agent가 보통 먼저 상세한 계획을 생성한 다음, 단계별로 백엔드, 데이터베이스, 프론트엔드 로직을 구축합니다.
+- **적합한 사용자:** 자동으로 테스트를 실행하고 오류를 수정하므로, 시간과 Token 소모가 크지만, AI가 어떻게 문제를 파악하고 해결하는지 명확히 볼 수 있어 학습 관점에서 가치가 높습니다.
 - **프롬프트 과정:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
 
-- **스네이크 게임 결과:**
+- **스네이크 게임 효과:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
 
-- **가격:** 무료 버전은 복잡한 프로젝트에서 처음부터 끝까지 순조롭게 실행되지 않을 가능성이 높으므로, 프로젝트를 완전히 구축하려면 유료 업그레이드를 더 추천합니다.
+- **가격:** 무료 버전은 복잡한 프로젝트에서 처음부터 끝까지 순조롭게 실행되기 어려울 가능성이 높으므로, 프로젝트를 완전히 구축하려면 유료 업그레이드를 권장합니다.
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
 
-### 6. Trae(IDE)
+### 6. Trae (IDE)
 
-- **플랫폼 유형:** 데스크톱 애플리케이션(PC)
-- **주요 특징과 워크플로:** 데스크톱 애플리케이션인 Trae는 Web 도구와 비교했을 때 보통 성능과 응답 속도에서 더 유리합니다. 하지만 다운로드와 설치가 필요하므로 일부 사용자에게는 입문 장벽이 조금 높을 수 있습니다. 마찬가지로 로컬 환경이기 때문에 컴퓨터 설정과 의존성 환경의 차이에서 일정한 불확실성이 생깁니다. 장점은 Trae가 로컬에서 프로젝트 생성과 실행 설정을 도와주며, 사용자가 자신의 컴퓨터에서 바로 개발하고 디버깅할 수 있다는 점입니다.
-- **적합한 사용자:** 장기적으로 Vibe Coding 프로젝트를 진행할 계획이 있고, 전용 데스크톱 도구를 사용하고 싶은 사용자에게 더 적합합니다. “가끔 한 번 해보는” 정도를 원하는 학생에게는 가장 가벼운 선택이 아닐 수 있습니다.
+- **플랫폼 유형:** 데스크톱 앱 (PC)
+- **주요 특징 및 워크플로:** 데스크톱 앱으로서 Trae는 웹 도구보다 성능과 응답 속도에서 보통 더 유리합니다. 하지만 다운로드 및 설치가 필요하여 일부 사용자에게는 진입 장벽이 약간 높습니다. 마찬가지로 로컬 환경이므로, 컴퓨터 설정과 의존성 환경의 차이로 인해 어느 정도 불확실성이 발생할 수 있습니다. 장점은 Trae가 로컬에서 프로젝트 생성과 실행 설정을 도와주어, 로컬에서 직접 개발과 디버깅을 할 수 있다는 것입니다.
+- **적합한 사용자:** 장기간 Vibe Coding 프로젝트를 진행할 계획이 있고, 전용 데스크톱 도구를 사용하고자 하는 사용자에게 더 적합합니다. "가끔 놀아보고 싶은" 분들에게는 가장 가벼운 선택이 아닐 수 있습니다.
 - **프롬프트 과정:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
-- **스네이크 게임 결과:**
+- **스네이크 게임 효과:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
 
-- **가격:** 가격은 비교적 친근한 편이며, 무료 버전만으로도 품질이 괜찮은 작은 프로젝트를 완성하기에 충분합니다.
+- **가격:** 가격이 상대적으로 저렴하며, 무료 버전만으로도 품질이 꽤 좋은 소규모 프로젝트를 완성할 수 있습니다.
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
 
-### 7. V0(Web-based)
+### 7. V0 (Web-based)
 
-- **플랫폼 유형:** Web
-- **주요 특징과 워크플로:** V0는 Vercel이 제공하는 React UI 컴포넌트 생성에 집중한 도구입니다. 고품질의 프로덕션 사용 가능한 인터페이스를 생성하는 데 뛰어납니다. 하지만 실제 사용 중에는 “코드 보기 화면을 찾기 어렵다”, “API Key를 어디에 설정해야 하는지 명확히 설명하지 않는다” 같은 문제가 나타납니다.
-- **적합한 사용자:** V0는 프론트엔드와 UI/UX 디자인에 집중하는 학생이나 디자이너에게 매우 적합합니다. 하지만 완전한 풀스택 솔루션은 아니므로 백엔드 로직과 API 통합을 구현하려면 여전히 다른 플랫폼을 사용해야 합니다. 따라서 목표가 “한 번에 완전한 애플리케이션 구축”이라면 최우선 선택은 아닐 수 있습니다.
+- **플랫폼 유형:** 웹
+- **주요 특징 및 워크플로:** V0은 Vercel에서 제공하는 React UI 컴포넌트 생성에 특화된 도구입니다. 고품질, 프로덕션 환경에서 사용 가능한 인터페이스 생성에 탁월합니다. 하지만 실제 사용에서 "코드 뷰를 찾기 어려움", "API Key를 어디에 설정해야 하는지 명확한 안내가 없음" 등의 문제가 발생할 수 있습니다.
+- **적합한 사용자:** V0은 프론트엔드와 UI/UX 디자인에 집중하는 학생이나 디자이너에게 매우 적합합니다. 하지만 완전한 풀스택 솔루션은 아니며, 백엔드 로직과 API 통합을 구현하려면 다른 플랫폼을 사용해야 합니다. 따라서 "원스톱으로 완전한 애플리케이션 구축"이 목표라면 최선의 첫 번째 선택이 아닐 수 있습니다.
 - **프롬프트 과정:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
 
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
 
-- **스네이크 게임 결과:**
+- **스네이크 게임 효과:**
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
-- **가격:** 무료 사용자는 대략 4-5개의 간단한 프로젝트를 만들 수 있습니다.
+- **가격:** 무료 사용자는 약 4~5개의 간단한 프로젝트를 구축할 수 있습니다.
   ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
 
 ## 3. 플랫폼 요약 비교
 
-| **플랫폼**                                 | **Review**                                                                      | **Platform** | **Notes**                                                                      |
-| ------------------------------------------ | ------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------ |
-| **[Lovable](https://lovable.dev/)**        | AI 코딩 초보자에게 매우 친절하고, 시작이 쉽고 경험이 매끄러워 이상적인 입문 선택입니다. | Web-based    | Supabase 같은 서비스 연결을 자동으로 완료하여 설정 비용을 줄입니다.            |
-| **[Cursor](https://cursor.com/cn/agents)** | 개발 경험이 있는 사용자에게 적합하며, 생산성과 코드 품질을 크게 높입니다.       | PC           | 일정한 프로그래밍 기초가 필요하며, 로컬 환경에서 프로젝트 구조와 의존성을 스스로 이해해야 합니다. |
-| **[Z.ai](https://chat.z.ai/)**             | 프로그래밍 기초가 있고 AI 출력 코드의 세부 사항을 직접 연구하고 싶은 사용자에게 더 적합합니다. | Web-based    | 미리보기 창이 없어 결과 확인이 번거롭습니다. 코드를 수동으로 붙여 넣고, 폴더와 파일을 만들고, 서비스를 직접 실행해야 합니다. |
-| **[Replit](https://replit.com/~)**         | 아이디어를 빠르게 접근 가능한 온라인 서비스로 바꾸고 싶은 사용자에게 추천합니다. | Web-based    | 통합 온라인 개발과 배포를 제공하고, 협업과 시각적 편집기를 지원합니다.         |
-| **[Minimax](https://agent.minimaxi.com/)** | AI가 자동으로 오류를 찾고 수정하는 전 과정을 보며 배우고 싶은 사람에게 적합하지만, 전체적으로 느리고 Token을 많이 씁니다. | Web-based    | 전체 과정이 길고, AI가 여러 차례 자동으로 테스트를 실행하고 오류를 수정합니다. |
-| **[Trae](https://www.trae.ai/)**           | 프로그래밍 경험이 있고 데스크톱 IDE + AI Agent 조합을 사용하고 싶은 사용자에게 효율을 높이는 강력한 도구입니다. | PC           | 로컬 설치와 환경 설정이 필요하지만 성능이 더 좋고, 장기적인 Vibe Coding 프로젝트에 적합합니다. |
-| **[V0](https://v0.app/)**                  | React UI 시각 효과를 빠르게 만들고 싶은 비개발자에게 최적화되어 있으며, 프론트엔드 / 디자인 방향의 학생에게 적합합니다. | Web-based    | React UI 생성에 집중하며, 백엔드와 전체 애플리케이션 구축은 다른 플랫폼과 함께 진행해야 합니다. |
+| **플랫폼**                                 | **평가**                                                                         | **플랫폼** | **비고**                                                                      |
+| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
+| **[Lovable](https://lovable.dev/)**        | AI 프로그래밍 초보자에게 매우 친근하고, 시작이 간단하며 경험이 부드러워 이상적인 입문 선택입니다.                 | Web-based    | Supabase 등 서비스 연결을 자동으로 완료하여 설정 비용을 줄입니다.                                   |
+| **[Cursor](https://cursor.com/cn/agents)** | 이미 개발 경험이 있는 사용자에게 적합하며, 생산성과 코드 품질을 크게 향상시킵니다.                             | PC           | 어느 정도의 프로그래밍 기반이 필요하며, 로컬 환경에서 프로젝트 구조와 의존성을 직접 이해해야 합니다.                         |
+| **[Z.ai](https://chat.z.ai/)**             | 프로그래밍 기반이 있고, AI 출력 코드의 세부 사항을 직접 연구하고 싶은 사용자에게 더 적합합니다.                           | Web-based    | 미리보기 창이 없어 결과 확인이 번거로움; 수동으로 코드를 붙여넣고, 폴더와 파일을 만들고 서비스를 수동으로 실행해야 합니다. |
+| **[Replit](https://replit.com/~)**         | 아이디어를 빠르게 접근 가능한 온라인 서비스로 만들고 싶은 사용자에게 추천합니다.                                   | Web-based    | 올인원 온라인 개발 및 배포, 협업 지원 및 시각적 편집기 제공.                             |
+| **[Minimax](https://agent.minimaxi.com/)** | AI가 자동으로 오류를 찾고 수정하는 전체 과정을 보고 학습하고자 하는 분들에게 적합하지만, 전체적으로 느리고 Token 소모가 큽니다. | Web-based    | 전체 과정이 길고, AI가 여러 번 자동으로 테스트를 실행하고 오류를 수정합니다.                                |
+| **[Trae](https://www.trae.ai/)**           | 프로그래밍 경험이 있고, 데스크톱 IDE + AI Agent 조합을 사용하고자 하는 사용자에게 효율성을 높이는 강력한 도구입니다. | PC           | 로컬 설치 및 환경 설정이 필요하지만, 성능이 더 좋고 장기 Vibe Coding 프로젝트에 적합합니다.              |
+| **[V0](https://v0.app/)**                  | React UI 시각 효과를 빠르게 만들고 싶은 비개발자에게 최적화되어, 프론트엔드/디자인 지향 학생에게 적합합니다.  | Web-based    | React UI 생성에 특화되어 있으며, 백엔드와 완전한 애플리케이션 구축은 다른 플랫폼과의 협업이 필요합니다.                  |
+---
+title: 'Comparison Of 7 AI Coding Tools'
+description: 'A hands-on benchmark of popular Web Vibe Coding platforms using one unified task, covering beginner-friendliness, code control, and deployment.'
+---
diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
index ac5b2e4..3265d1c 100644
--- a/docs/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
+++ b/docs/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -2,7 +2,7 @@
 
 ## 이 장의 가이드
 
-이 장에서는 디자인과 개발이 AI를 통해 어떻게 완벽하게 협업할 수 있는지 보여 줍니다. 당신은 제품 관리자의 역할을 맡아 “디자인 Agent”에게 로고 디자인, 색상 구성, 페이지 레이아웃을 지휘하고, 이어서 “코딩 Agent”와 협업해 시각 디자인을 실행 가능한 코드로 바꿉니다. 창의적인 구상부터 웹사이트 공개까지, 전 과정에서 AI가 개발을 지원하는 흐름을 경험하고 한 사람이 하나의 팀이 되는 방식을 체험합니다.
+이 장에서는 디자인과 개발이 AI를 통해 어떻게 완벽하게 협업할 수 있는지 보여 줍니다. 당신은 제품 관리자의 역할을 맡아 "디자인 Agent"에게 로고 디자인, 색상 구성, 페이지 레이아웃을 지휘하고, 이어서 "코딩 Agent"와 협업해 시각 디자인을 실행 가능한 코드로 바꿉니다. 창의적인 구상부터 웹사이트 공개까지, 전 과정에서 AI가 개발을 지원하는 흐름을 경험하고 한 사람이 하나의 팀이 되는 방식을 체험합니다.
 
 ---
 
@@ -10,14 +10,14 @@
 
 ## 1. 튜토리얼 소개
 
-AI 디자인 Agent와 코딩 Agent를 사용해 처음부터 완전한 웹사이트를 만들어 봅시다.
+AI 디자인 Agent와 코딩 Agent를 사용하여 제로에서 완전한 웹사이트를 구축해 봅시다.
 
-- **디자인 Agent**: 로고, 웹페이지 레이아웃, 색상 구성, 기타 시각 요소를 만드는 역할을 합니다.
-- **코딩 Agent**: 프롬프트에서 제시한 요구사항과 레이아웃에 따라 HTML/CSS/JS 같은 실제 코드를 작성하고 실행 가능한 웹사이트를 구축합니다.
+- **디자인 Agent**: 로고 생성, 웹 페이지 레이아웃, 색상 구성 및 기타 시각적 요소의 생성을 담당합니다
+- **코딩 Agent**: 프롬프트에서 제시한 요구사항과 레이아웃에 따라 HTML/CSS/JS 등의 실제 코드를 작성하여 실행 가능한 웹사이트를 구축합니다
 
 ## 2. 디자인 Agent와 코딩 Agent
 
-- **디자인 Agent**: 당신이 제공한 프롬프트에 따라 이미지, 페이지 모델, 디자인 스타일을 생성하는 AI입니다.
+- **디자인 Agent**: 제공한 프롬프트에 따라 이미지, 페이지 모형 또는 디자인 스타일을 생성하는 AI입니다.
 - Mastergo
 - Lovart
 - Figma MCP
@@ -29,159 +29,159 @@ AI 디자인 Agent와 코딩 Agent를 사용해 처음부터 완전한 웹사이
 
 ---
 
-# 2. 디자인 Agent로 로고 만들기
+# 2. 디자인 Agent를 사용하여 로고 만들기
 
-## 1. 로고를 디자인할 때 고려해야 할 핵심 요소
+## 1. 로고 디자인 시 고려해야 할 핵심 요소
 
-로고는 웹사이트의 첫인상을 결정하는 핵심 요소 중 하나입니다. AI 디자인 Agent로부터 만족스러운 결과를 얻으려면, 프롬프트에서 원하는 로고 유형을 명확하게 설명해야 합니다.
+로고는 웹사이트의 첫인상을 결정하는 핵심 요소 중 하나입니다. AI 디자인 Agent에서 만족스러운 결과를 얻으려면 프롬프트에서 원하는 로고 유형을 명확하게 설명해야 합니다.
 
 1. **브랜드 이름 / 텍스트**
 
-- 로고 안에 반드시 나타나야 하는 글자입니다. 예: 웹사이트 제목, 브랜드 이름 등.
+- 로고에 반드시 포함되어야 하는 텍스트(예: 웹사이트 제목, 브랜드 이름 등).
 
-2. **스타일(정서 / 분위기)**
+2. **스타일(분위기 / 느낌)**
 
-- 로고가 전달하기를 원하는 전체적인 느낌이나 분위기입니다.
-- _예시: 미니멀, 귀여움, 간결함, 모던, 레트로, 미래감 등._
+- 로고가 전달하고자 하는 전반적인 느낌이나 분위기.
+- _예시: 미니멀, 귀여움, 간결, 모던, 레트로, 미래지향적 등._
 
 3. **색상 구성**(선택)
 
-- 로고의 색상이 전체 웹사이트의 전반적인 톤과 어울리게 하는 것이 좋습니다.
-- 구체적인 16진수 색상 코드나 대략적인 색조(차가운 색, 따뜻한 색 등)를 지정할 수 있습니다.
+- 로고의 색상을 웹사이트 전체의 기본 톤과 일치시키는 것이 좋습니다.
+- 구체적인 hex 컬러 코드나 대략적인 색조(차가운 색, 따뜻한 색 등)를 지정할 수 있습니다.
 - _예시: **`#171721`**(검정), **`#FF7130`**(오렌지)._
 
 4. **형태(모양 / 구조)**
 
 - 로고에 특정한 모양이나 구도가 필요한지 명확히 합니다.
-- _예시: 원형 안에 텍스트 배치, 아이콘 + 텍스트 조합, 아이콘 중심 로고 등._
+- _예시: 원형 안에 텍스트, 아이콘 + 텍스트 조합, 아이콘 중심의 로고 등._
 
-5. **아이콘 / 상징 요소**(선택)
+5. **아이콘 / 심볼 요소**(선택)
 
-- 로고 안에 나타나기를 원하는 그래픽이나 상징입니다.
-- _예시: 책 아이콘, 번개 기호, AI와 관련된 그래픽, 추상 기하 도형 등._
+- 로고에 나타내고 싶은 그래픽이나 기호.
+- _예시: 책 아이콘, 번개 심볼, AI 관련 그래픽, 추상적인 기하학적 형태 등._
 
-## 2. 로고 디자인 프롬프트 작성하기
+## 2. 로고 디자인 프롬프트 작성
 
-**예시 프롬프트**
+**프롬프트 예시**
 
 ```
-"'My First Website'라는 브랜드 이름으로 미니멀 스타일의 로고를 디자인해 주세요.
+"미니멀 스타일의 로고를 디자인해 주세요. 브랜드 이름은 'My First Website'입니다.
 검정색(#171721)과 오렌지색(#FF7130)을 사용하고, 텍스트를 원형 안에 배치해 주세요."
 ```
 
 ```
 "'AIID'를 브랜드명으로 하는 로고를 디자인해 주세요.
-전체 스타일은 미래적이고 깔끔하며 간결해야 하고, 주색은 파란색과 흰색입니다.
-AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 PNG로 내보내 주세요."
+전체적인 스타일은 미래지향적이고 깔끔하게, 메인 컬러는 파란색과 흰색으로 해 주세요.
+AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경의 PNG로 내보내 주세요."
 ```
 
 ## 3. Agent에게 디자인 요청하기
 
-- 위 프롬프트 입력 → Agent가 생성한 여러 디자인 시안을 비교합니다.
+- 위 프롬프트 입력 -> Agent가 생성한 여러 디자인 시안 비교
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
 
-## 4. 최종 로고 확정하기
+## 4. 최종 로고 확정
 
-- 초안 중 가장 마음에 드는 버전을 선택해 다운로드합니다.
+- 시안 중 가장 마음에 드는 버전을 선택하여 다운로드합니다.
 
 ---
 
-# 3. 웹사이트 구조 계획하기
+# 3. 웹사이트 구조 기획하기
 
 ## 1. 기본 섹션 이해하기
 
-웹사이트를 실제로 만들기 전에 어떤 메뉴(섹션)를 포함할지 미리 계획하는 것은 매우 중요합니다. 메뉴 설계는 방문자에게 무엇을 보여 주고 싶은지, 그리고 방문자가 어떤 행동을 하길 원하는지에 따라 달라집니다.
-일반적으로 웹사이트는 보통 **Home / About / Contact** 같은 기본 섹션으로 구성됩니다.
+웹사이트 제작을 본격적으로 시작하기 전에 어떤 메뉴(섹션)를 포함할지 기획하는 것이 중요합니다. 메뉴 디자인은 방문자에게 무엇을 보여줄지, 그리고 어떤 행동을 유도할지에 따라 결정됩니다.
+일반적으로 웹사이트는 **Home / About / Contact** 등의 기본 섹션으로 구성됩니다.
 
-## 2. 먼저 구조 스케치 직접 그리기(선택)
+## 2. 직접 구조 스케치하기(선택)
 
-웹사이트의 목표에 따라 간단한 메뉴 구조를 대략 작성해 볼 수 있습니다.
+웹사이트의 목표에 따라 간단한 메뉴 구조를 먼저 작성해 볼 수 있습니다.
 
 ### 기본 메뉴
 
 1. **Home**
-   1. 방문자가 웹사이트에 들어온 뒤 처음 보게 되는 메인 페이지입니다.
-   2. 보통 로고, 메인 비주얼 영역, 짧은 표어나 소개 문장을 포함합니다.
+   1. 방문자가 웹사이트에 들어온 후 처음으로 보는 메인 페이지
+   2. 보통 로고, 메인 비주얼 영역과 짧은 슬로건 또는 소개 포함
 2. **About**
-   1. 당신이 누구인지, 또는 프로젝트 / 서비스의 목적을 소개합니다.
-   2. 개인 포트폴리오: 자기소개 + 짧은 이력.
-   3. 서비스형 웹사이트: 비전, 목표, 핵심 기능.
+   1. 당신이 누구인지, 또는 프로젝트/서비스의 목적 소개
+   2. 개인 포트폴리오: 자기소개 + 간단한 이력
+   3. 서비스형 웹사이트: 비전, 목표 및 핵심 기능
 3. **Contact**
-   1. 이메일, 전화번호, 소셜미디어 링크 같은 연락 방법입니다.
-   2. 간단한 문의 양식을 추가할 수도 있습니다.
+   1. 이메일, 전화번호, 소셜 미디어 링크 등 연락처 정보
+   2. 간단한 문의 양식을 추가할 수도 있음
 
 ### 선택 메뉴
 
 4. **Services / Projects**
-   1. 제공하는 서비스 또는 프로젝트 / 포트폴리오를 보여 줍니다.
-   2. 보통 목록이나 카드 형태로 표시합니다.
+   1. 제공하는 서비스나 프로젝트/포트폴리오 전시
+   2. 보통 목록이나 카드 형태로 전시
 
 5. **Gallery**
-   1. 이미지, 사진, 디자인 작업물을 보여 주는 데 사용합니다.
+   1. 이미지, 사진 또는 디자인 작품 전시용
 
 6. **Blog / News**
-   1. 글, 소식, 로그를 게시하는 데 사용합니다.
+   1. 글, 업데이트 또는 로그 게시용
 
 7. **FAQ**
-   1. 방문자가 자주 묻는 질문과 답변을 정리합니다.
+   1. 방문자가 자주 묻는 질문과 답변 정리
 
-## 3. 색상 구성 선택하기(선택)
+## 3. 색상 구성 선택(선택)
 
-이미 로고가 있거나 특정 색상 조합을 사용해 웹사이트를 디자인하고 싶다면, 프롬프트에 사용할 색상 코드를 직접 써도 됩니다.
+이미 로고가 있거나, 특정 색상 조합으로 웹사이트를 디자인하고 싶다면 프롬프트에 사용할 색상 코드를 직접 적을 수 있습니다.
 
 **예시:** `#171721, #872B97, #FF7130, #FF3C68`
 
-아직 색상 구성이 떠오르지 않는다면, 색상 조합 사이트나 검색 키워드를 통해 영감을 얻을 수도 있습니다.
+당장 색상 구성이 떠오르지 않는다면, 색상 웹사이트나 키워드 검색으로 영감을 찾을 수 있습니다.
 
-- **색상 조합 참고 사이트**
+- **색상 참고 웹사이트**
   - https://colorhunt.co/
   - https://coolors.co/
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
 
-- **Google에서 키워드로 색상 조합 검색하기**
+- **Google에서 키워드로 색상 구성 검색**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
 
-## 4. 웹사이트 디자인 프롬프트 작성하기
+## 4. 웹사이트 디자인 프롬프트 작성
 
-**예시 프롬프트**
+**프롬프트 예시**
 
 ```
-"Home, About, Contact 세 개 섹션으로 구성된 단일 페이지 웹사이트를 디자인해 주세요.
-색상 #171721, #FF7130, #FF3C68을 사용해 주세요.
-전체 스타일은 모던하고 간결해야 합니다."
+"Home, About, Contact 세 개의 섹션으로 구성된 싱글 페이지 웹사이트를 디자인해 주세요.
+색상은 #171721, #FF7130, #FF3C68을 사용해 주세요.
+전체적인 스타일은 모던하고 간결하게 해 주세요."
 ```
 
 ---
 
 # 4. 디자인 Agent로 웹사이트 디자인하기
 
-## 1. 프롬프트 입력 → 디자인 시안 생성
+## 1. 프롬프트 입력 -> 디자인 시안 생성
 
-- 프롬프트에 계획한 구조와 선택한 색상 구성을 작성합니다.
+- 프롬프트에 기획한 구조와 선택한 색상을 작성합니다.
 
 **Mastergo 프롬프트 예시**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
 
-## 2. 디자인 시안 검토하고 수정 의견 제시하기
+## 2. 디자인 시안 검토 및 수정 요청
 
-자신의 필요에 따라 Agent에게 피드백을 줄 수 있습니다. 예:
+필요에 따라 Agent에게 피드백을 제출할 수 있습니다. 예를 들어:
 
-- “너무 화려해요. 전체 스타일을 더 간결하게 바꿔 주세요.”
-- “다른 글꼴로 바꿔 주세요.”
-- “색상 조합을 조정해 주세요.”
-- “여기 이 블록을 삭제해 주세요.”
+- "너무 화려해요. 전체적인 스타일을 더 간결하게 바꿔 주세요."
+- "폰트를 바꿔 주세요."
+- "색상 조합을 조정해 주세요."
+- "여기 이 부분을 삭제해 주세요."
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
 
-## 3. 최종 디자인 확정하기
+## 3. 최종 디자인 확정
 
-디자인 시안을 여러 차례 수정해 만족한 뒤에는, 이 디자인을 코드로 변환하여 코딩 Agent가 이해하고 이어서 작업할 수 있게 합니다.
+디자인 시안을 여러 차례 수정하고 만족한 후에는 이 디자인을 코드로 변환하여 코딩 Agent가 이해하고 작업을 이어갈 수 있게 합니다.
 
-디자인을 코드로 바꾸는 방식은 플랫폼마다 다르지만, 보통 디자인 플랫폼 안에서 특정 플러그인을 설치하고 사용하는 방식으로 진행합니다.
+디자인을 코드로 변환하는 방법은 플랫폼마다 다르지만, 보통 디자인 플랫폼에서 특정 플러그인을 설치하여 사용합니다.
 
 **Mastergo 예시**
 
@@ -189,33 +189,33 @@ AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
 
-2. 디자인 페이지로 돌아가 **사각형 아이콘(플러그인)** 을 클릭합니다.
+2. 디자인 페이지로 돌아가서 **블록 아이콘(플러그인)**을 클릭합니다.
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
 
-3. 코드로 변환하고 싶은 디자인 영역을 선택하고 **Generate** 버튼을 클릭해 코드를 생성합니다.
+3. 코드로 변환하고 싶은 디자인 영역을 선택하고 **Generate** 버튼을 클릭하여 코드를 생성합니다.
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
 
 ---
 
-# 5. 코딩 Agent로 웹사이트 만들기
+# 5. 코딩 Agent로 웹사이트 구축하기
 
 ## 1. HTML/CSS/JS의 기본 개념 이해하기
 
-웹사이트는 본질적으로 세 가지 언어로 구성됩니다.
+웹사이트는 본질적으로 세 가지 언어로 구성됩니다:
 
-- **HTML(HyperText Markup Language)** → 구조(뼈대)
-- **CSS(Cascading Style Sheets)** → 스타일(외관)
-- **JavaScript(JS)** → 기능(상호작용)
+- **HTML(HyperText Markup Language)** -> 구조(뼈대)
+- **CSS(Cascading Style Sheets)** -> 스타일(외관)
+- **JavaScript(JS)** -> 기능(상호작용)
 
 이 세 가지가 함께 작동하여 우리가 보는 완전한 웹페이지를 구성합니다.
 
 1. **🏗️ HTML(구조)**
 
-- 페이지에서 “무엇을 보여 줄지” 정의합니다.
-- 텍스트, 이미지, 버튼, 링크 같은 요소를 배치하는 데 사용합니다.
-- 건축물의 **벽체와 프레임**과 비슷합니다.
+- 페이지에 "무엇을 표시할지"를 정의
+- 텍스트, 이미지, 버튼, 링크 등의 요소를 배치
+- 건물의 **벽과 뼈대**와 유사
 
 **예시**
 
@@ -227,30 +227,30 @@ AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경
 
 2. **🎨 CSS(스타일)**
 
-- “내용을 어떻게 보여 줄지” 결정합니다.
-- 글자 크기, 색상, 간격, 배경, 버튼 모양 등을 제어합니다.
-- HTML에 “옷”과 시각 스타일을 입혀 줍니다.
+- "콘텐츠를 어떻게 표시할지"를 결정
+- 글자 크기, 색상, 간격, 배경, 버튼 모양 등을 제어
+- HTML에 "옷"과 시각적 스타일을 부여
 
 **예시**
 
 ```css
 h1 {
-  color: #FF7130;   /* 글자 색상 */
-  font-size: 36px;  /* 글자 크기 */
-  text-align: center; /* 가운데 정렬 */
+  color: #FF7130;   /* Text color */
+  font-size: 36px;  /* Font size */
+  text-align: center; /* Center alignment */
 }
 
 body {
-  background-color: #171721; /* 배경 색상 */
-  color: white; /* 기본 글자 색상 */
+  background-color: #171721; /* Background color */
+  color: white; /* Default text color */
 }
 ```
 
 3. **⚙️ JavaScript(JS)(기능)**
 
-- 웹페이지가 사용자와 상호작용할 수 있게 합니다.
-- 버튼 클릭, 메뉴 펼치기, 이미지 캐러셀, 폼 제출 같은 동적 효과를 구현할 수 있습니다.
-- HTML/CSS가 정적인 뼈대와 외관이라면, JS는 웹페이지를 “살아 움직이게” 하는 **두뇌**입니다.
+- 웹페이지가 사용자와 상호작용할 수 있게 함
+- 버튼 클릭, 메뉴 펼치기, 이미지 슬라이드, 양식 제출 등의 동적 효과를 구현
+- HTML/CSS가 정적인 뼈대와 외관이라면, JS는 웹페이지를 "살아있게" 만드는 **두뇌**
 
 **예시**
 
@@ -264,60 +264,60 @@ function showAlert() {
 <button onclick="showAlert()">Click me</button>
 ```
 
-## 2. 코딩 Agent가 코드를 생성하게 하기
+## 2. 코딩 Agent로 코드 생성하기
 
-**예시 프롬프트**
+**프롬프트 예시**
 
 ```
-"Home, About, Contact 섹션을 포함한 단일 페이지 웹사이트의 HTML과 CSS를 작성해 주세요.
-색상 #171721, #FF7130, #FF3C68을 사용해 주세요.
-배경은 검정색, 글자는 흰색으로 해 주세요."
+"Home, About, Contact 섹션이 포함된 싱글 페이지 웹사이트의 HTML과 CSS를 작성해 주세요.
+색상은 #171721, #FF7130, #FF3C68을 사용해 주세요.
+배경은 검은색, 텍스트는 흰색으로 해 주세요."
 ```
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
 
 ## 3. 웹사이트 실행하기
 
-초안 코드가 생성되면 Agent는 보통 프로젝트를 자동으로 시작하고, 생성된 웹사이트 페이지를 보여 줍니다.
+초안 코드가 생성되면, Agent가 보통 프로젝트를 자동으로 시작하고 완성된 웹사이트 페이지를 보여 줍니다.
 
-Agent를 다시 시작했거나 웹사이트 화면이 나타나지 않는다면, 다음과 비슷한 프롬프트를 입력할 수 있습니다.
+Agent를 다시 시작했거나 웹사이트 화면이 나타나지 않는다면, 다음과 같은 프롬프트를 입력해 보세요:
 
 ```
 "Please activate the project"
 ```
 
-Agent가 프로젝트를 다시 시작하고 미리보기 페이지를 열어 현재 효과를 확인하기 쉽게 합니다.
+Agent가 프로젝트를 다시 시작하고 미리 보기 페이지를 열어, 현재 효과를 확인할 수 있게 해 줍니다.
 
-## 4. 간단히 수정하기
+## 4. 간단한 수정하기
 
-자연어로 초안을 계속 미세 조정할 수 있습니다. 예:
+자연어로 초안을 계속 미세 조정할 수 있습니다. 예를 들어:
 
-- “버튼을 조금 더 크게 만들어 주세요.”
-- “글꼴을 조금 더 굵게 해 주세요.”
+- "버튼을 좀 더 크게 만들어 주세요."
+- "폰트를 좀 더 굵게 해 주세요."
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
 
-## 5. 웹사이트 문구 내용 수정하기
+## 5. 웹사이트 카피 콘텐츠 수정하기
 
-Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 자리표시자 텍스트가 포함됩니다. 실제 상황에 더 가깝게 만들려면, 미리 실제 내용을 준비한 다음 Agent에게 교체를 부탁할 수 있습니다.
+Agent가 생성한 초안 웹사이트에는 보통 자동으로 생성된 임시 텍스트가 포함되어 있습니다. 실제 시나리오에 더 가깝게 만들려면, 실제 콘텐츠를 미리 준비한 다음 Agent가 교체하도록 할 수 있습니다.
 
 **적용 예시**: AIID 웹사이트의 About 페이지 업데이트
 
-1. 먼저 About 페이지에 보여 주고 싶은 내용을 작성합니다. Agent가 이해하기 쉽도록 Markdown 형식으로 저장할 수 있습니다.
+1. About 페이지에 표시하고 싶은 콘텐츠를 먼저 작성합니다. Agent가 이해하기 쉽도록 Markdown 형식으로 저장할 수 있습니다.
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
 
-2. 그런 다음 대화에서 Agent에게 해당 파일의 내용을 지정한 페이지에 적용하라고 말합니다.
+2. 대화에서 Agent에게 해당 파일의 콘텐츠를 지정된 페이지에 적용하라고 알려 줍니다.
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
 
-3. 내용이 적용된 업데이트 버전을 확인합니다.
+3. 콘텐츠 적용 후 업데이트된 버전을 확인합니다.
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
 
 ## 6. 이미지 삽입하기
 
-특정 이미지(예: 로고, 배경 이미지 등)를 추가하고 싶다면, 먼저 이미지를 프로젝트 폴더에 업로드한 뒤 프롬프트에서 이 이미지를 페이지의 어느 위치에 사용할지 설명할 수 있습니다.
+특정 이미지(예: 로고, 배경 이미지 등)를 추가하고 싶다면, 먼저 이미지를 프로젝트 폴더에 업로드한 다음 프롬프트에서 페이지의 어느 위치에 이 이미지를 사용할지 설명합니다.
 
 - **예시:**
 
@@ -331,9 +331,9 @@ Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 
 
 # 6. 디자인과 코드 통합하기
 
-## 1. 디자인 파일과 웹사이트 코드 통합하기(선택)
+## 1. 디자인 파일과 웹사이트 코드 통합(선택)
 
-디자인 Agent에서 코드 파일을 다운로드했다면, 해당 파일들을 현재 프로젝트 디렉터리로 옮긴 다음 코딩 Agent에게 이 디자인 코드와 기존 프로젝트를 합쳐 달라고 요청할 수 있습니다.
+디자인 Agent에서 코드 파일을 다운로드한 후, 이를 현재 프로젝트 디렉터리로 이동한 다음 코딩 Agent에게 이 디자인 코드를 기존 프로젝트와 병합하도록 요청할 수 있습니다.
 
 - **예시:**
 
@@ -342,3 +342,7 @@ Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 
 - **결과:**
 
 ![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
+---
+title: 'Build A Website With Design + Coding Agents'
+description: 'From idea to launch: coordinate a design agent to produce visuals, then use a coding agent to turn it into a working website with a reusable workflow.'
+---
diff --git a/docs/ko-kr/stage-1/appendix-b-common-errors/index.md b/docs/ko-kr/stage-1/appendix-b-common-errors/index.md
index 47127a0..9f30ffd 100644
--- a/docs/ko-kr/stage-1/appendix-b-common-errors/index.md
+++ b/docs/ko-kr/stage-1/appendix-b-common-errors/index.md
@@ -9,326 +9,317 @@ const duration = '약 <strong>30분</strong>'
 
 # 코드를 쓰다가 오류를 만나면 어떻게 해야 할까
 
-## 본 장 안내
+## 이 장의 가이드
 
-<ChapterIntroduction :duration="duration" :tags="['디버깅 기법', 'AI 협업', '문제 조사', '개발자 도구']" coreOutput="표준화된 오류 조사 흐름 한 세트" expectedOutput="흔한 오류의 90%를 독립적으로 해결할 수 있음">
+<ChapterIntroduction :duration="duration" :tags="['디버깅 팁', 'AI 협업', '문제 파악', '개발자 도구']" coreOutput="표준화된 오류 파악 흐름" expectedOutput="일반적인 오류의 90%를 독립적으로 해결 가능">
 
-AI 시대에는 오류를 조사하는 방식이 이미 바뀌었습니다.
+AI 시대에 오류를 파악하는 방식이 바뀌었습니다.
 
-모든 오류 유형을 외울 필요도 없고, 디버깅 전문가가 될 필요도 없으며, 심지어 오류가 무슨 뜻인지 이해하지 못해도 됩니다.
+모든 오류 유형을 외울 필요도 없고, 디버깅 전문가가 될 필요도 없으며, 오류가 무슨 뜻인지 이해할 필요도 없습니다.
 
-<strong>딱 한 가지, AI에게 어떻게 물어볼지만 배우면 됩니다.</strong>
+<strong>배워야 할 것은 단 하나: AI에게 어떻게 물어볼 것인가입니다.</strong>
 
-이 장은 <strong>간단한 단계에서 고급 단계로 이어지는</strong> 조사 흐름을 알려 줍니다.
+이 장에서는 <strong>간단한 것부터 심화까지</strong>의 파악 흐름을 알려드립니다:
 
-1. <strong>1단계: 바로 묻기</strong>: 현상 설명 + 스크린샷, 한 문장 질문
-2. <strong>2단계: 정보 보충</strong>: 해결되지 않으면 F12를 열어 핵심 정보 보충
+1. <strong>첫 번째 단계: 바로 물어보기</strong>: 현상 설명 + 스크린샷, 한마디로 질문
+2. <strong>두 번째 단계: 정보 보충</strong>: 해결되지 않으면 F12를 열어 핵심 정보 보충
 
-이 흐름을 익히면 <strong>오류의 90%를 스스로 해결할 수 있습니다</strong>.
+이 흐름을 마스터하면 <strong>90%의 오류를 스스로 해결</strong>할 수 있습니다.
 
 </ChapterIntroduction>
 
 ::: info 설명
-이 장의 모든 방법은 Cursor/Trae/Claude 같은 AI IDE의 실제 사용 경험에 기반하며, 일상 개발에 바로 적용할 수 있습니다.
+이 장의 모든 방법은 Cursor/Trae/Claude 등 AI IDE의 실제 사용 경험을 기반으로 하며, 일상적인 개발에 바로 적용할 수 있습니다.
 :::
 
 <div style="margin: 50px 0;">
   <ClientOnly>
     <StepBar :active="0" :items="[
       { title: '바로 질문', description: '현상 설명 + 스크린샷' },
-      { title: '정보 보충', description: 'F12를 열어 문제 위치 확인' },
+      { title: '정보 보충', description: 'F12를 열어 문제 위치 파악' },
       { title: '반복 해결', description: '문제가 해결될 때까지' }
     ]" />
   </ClientOnly>
 </div>
 
-## 1. 핵심 마음가짐: 스크린샷으로 AI에게 묻기
+## 1. 핵심 비법: 스크린샷으로 AI에게 물어보기
 
-::: warning 이 장이 왜 중요한가요?
+::: warning 왜 이 장이 중요할까요?
 
-많은 초보자가 오류를 만났을 때 가장 먼저 보이는 반응은 다음과 같습니다.
+많은 초보자가 오류를 만났을 때 첫 번째 반응은:
+- 당황해서 코드를 마구 고치기
+- 30분 동안 "xxx 오류 해결 방법" 검색하기
+- 스스로 오류의 의미를 이해하려고 시도하기
+- 혼자 밤새 디버깅하기
 
-- 당황해서 코드를 아무렇게나 고치기 시작한다.
-- "xxx 오류 해결 방법"을 검색하는 데 30분을 쓴다.
-- 오류가 무슨 뜻인지 스스로 이해하려고 한다.
-- 혼자 밤늦게까지 debug한다.
+<strong>이런 방식은 모두 시간 낭비입니다.</strong>
 
-<strong>이것들은 모두 시간을 낭비하는 방식입니다.</strong>
-
-AI 시대에 디버깅은 매우 단순한 일이 되었습니다.
+AI 시대에는 디버깅이 아주 간단해졌습니다:
 
 ```
-오류를 본다 → 스크린샷을 찍는다 → AI에게 묻는다 → AI가 말한 대로 한다
+오류 발견 -> 스크린샷 -> AI에게 물어보기 -> AI가 알려준 대로 하기
 ```
 
-오류를 이해할 필요도, 디버깅을 할 줄 알 필요도, 심지어 문제가 어디 있는지 알 필요도 없습니다.
+오류를 이해할 필요도 없고, 디버깅을 할 줄 알 필요도 없으며, 문제가 어디 있는지 알 필요도 없습니다.
 
-<strong>어떻게 물어볼지만 배우면 됩니다.</strong>
+<strong>배워야 할 것은 어떻게 물어볼 것인가뿐입니다.</strong>
 
 :::
 
 ### 1.1 가장 간단한 질문 방식
 
-복잡한 템플릿이 필요 없습니다. 두 방식 중 하나를 고르면 됩니다.
+복잡한 템플릿은 필요 없고, 두 가지 방식 중 하나를 선택하세요:
 
 **방식 1: 현상 설명**
 
 형식: 방금 무엇을 했고, 지금 무엇이 나타났는지
 
 ```
-방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 비어 있어요. 어떻게 해야 하나요?
+방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 변했어요. 어떻게 해야 하나요?
 ```
 
 **방식 2: 스크린샷**
 
-현재 페이지나 오류 정보를 바로 캡처합니다.
+현재 페이지나 오류 메시지를 바로 스크린샷
 
 ```
 [스크린샷]
 
-이 오류는 어떻게 해결하나요?
+이 오류 어떻게 해결하나요?
 ```
 
 **가장 좋은 방식: 설명 + 스크린샷**
 
 ```
-방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 비어 있어요.
+방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 변했어요.
 
 [스크린샷]
 
 어떻게 해야 하나요?
 ```
 
-**기억하세요: 맥락을 분명히 설명하고 스크린샷을 더하면, AI가 더 빨리 문제를 해결해 줄 수 있습니다.**
+**기억하세요: 맥락을 명확하게 설명하고 스크린샷을 추가하면, AI가 더 빠르게 문제를 해결할 수 있습니다.**
 
-### 1.2 문제를 어떻게 명확히 말할까
+### 1.2 문제를 명확하게 설명하는 법
 
-많은 초보자가 질문해야 한다는 것은 알지만 어떻게 말해야 할지 모릅니다. 사실 세 가지만 분명히 말하면 됩니다.
+많은 초보자가 질문을 해야 한다는 것은 알지만, 어떻게 말해야 할지 모릅니다. 사실 세 가지만 명확하게 말하면 됩니다:
 
-**1. 방금 무엇을 했는가**
+**1. 방금 무엇을 했는지**
 
 ```
-방금 저장 버튼을 클릭했어요.
-방금 로그인 페이지 코드를 수정했어요.
-방금 페이지를 새로고침했어요.
+방금 저장 버튼을 클릭했어요
+방금 로그인 페이지 코드를 수정했어요
+방금 페이지를 새로고침했어요
 ```
 
-**2. 지금 무엇을 보았는가**
+**2. 지금 무엇이 보이는지**
 
 ```
-지금 페이지가 비어 있어요.
-지금 버튼을 눌러도 반응이 없어요.
-지금 오류 메시지가 표시돼요.
+지금 페이지가 비어 있어요
+지금 버튼을 눌러도 반응이 없어요
+지금 오류 메시지가 표시돼요
 ```
 
-**3. 어떤 효과를 원했는가**
+**3. 어떤 효과를 원하는지**
 
 ```
-데이터가 성공적으로 저장되게 하고 싶어요.
-페이지가 정상적으로 표시되게 하고 싶어요.
-버튼을 누르면 알림이 뜨게 하고 싶어요.
+데이터가 성공적으로 저장되길 원해요
+페이지가 정상적으로 표시되길 원해요
+버튼을 클릭하면 알림이 뜨게 하고 싶어요
 ```
 
 **완전한 예시:**
 
 ```
-방금 저장 버튼을 클릭했는데, 지금 페이지에 "저장 실패" 오류가 표시돼요.
+방금 저장 버튼을 클릭했는데, 페이지에 "저장 실패"라는 오류가 표시돼요.
 
 [스크린샷]
 
-폼 데이터가 데이터베이스에 성공적으로 저장되게 하고 싶은데, 어떻게 해야 하나요?
+양식 데이터를 데이터베이스에 성공적으로 저장하고 싶은데, 어떻게 해야 하나요?
 ```
 
 **핵심 원칙:**
+- 전문 용어 없이 일상적인 말로 설명하기
+- 시간 순서대로 말하기: 먼저 무엇을 했고, 그 다음 무슨 일이 일어났는지
+- 기대하는 바를 말하여 AI가 원하는 것을 알 수 있게 하기
 
-- 전문 용어를 쓰지 말고 일상어로 설명합니다.
-- 시간 순서대로 말합니다. 먼저 무엇을 했고, 그다음 무엇이 일어났는지.
-- 기대한 결과를 말해 AI가 당신이 원하는 바를 알게 합니다.
+## 2. 첫 번째 단계: 현상을 바로 설명하고 질문하기
 
-## 2. 1단계: 현상을 바로 설명하며 질문하기
+문제를 만났을 때, <strong>F12를 서둘러 열지 마세요</strong>. 먼저 현상을 설명하고, 현재 페이지를 스크린샷하여 AI에게 보여주세요.
 
-문제를 만났을 때 <strong>급하게 F12를 열지 마세요</strong>. 먼저 현상을 직접 설명하고, 현재 화면을 캡처해 AI에게 던져 보세요.
+많은 경우 AI가 스크린샷만 보고도 바로 해결책을 줄 수 있습니다.
 
-많은 경우 AI는 스크린샷만 보고도 바로 해결 방안을 줄 수 있습니다.
+### 2.1 일반적인 현상 설명 방법
 
-### 2.1 흔한 현상은 어떻게 설명할까
-
-::: tip 바로 설명하면 됩니다
-
-**페이지가 하얗게 비어 있음**
+::: tip 그냥 설명하면 됩니다
 
+**페이지가 하얗게 변함**
 ```
-페이지를 열면 비어 있어요. 어떻게 해야 하나요?
+페이지를 열었는데 비어 있어요. 어떻게 해야 하나요?
 
 [스크린샷]
 ```
 
-**버튼을 클릭해도 반응이 없음**
-
+**버튼 클릭해도 반응 없음**
 ```
-이 버튼을 클릭해도 반응이 없어요. 한번 봐 주세요.
+이 버튼을 클릭해도 반응이 없어요. 확인해 주세요.
 
 [스크린샷]
 ```
 
 **데이터가 저장되지 않음**
-
 ```
-저장을 눌렀는데 데이터가 저장되지 않아요. 어떻게 해야 하나요?
+저장을 눌렀는데 데이터가 저장되지 않았어요. 어떻게 해야 하나요?
 
 [스크린샷]
 ```
 
-**스타일 표시가 이상함**
-
+**스타일이 올바르지 않음**
 ```
-이 버튼 위치가 어긋났어요. 어떻게 조정하나요?
+이 버튼의 위치가 어긋났어요. 어떻게 조정하나요?
 
 [스크린샷]
 ```
 
-**인터페이스 오류**
-
+**API 오류**
 ```
-인터페이스 호출에서 오류가 났어요. 봐 주세요.
+API를 호출했는데 오류가 발생했어요. 확인해 주세요.
 
 [스크린샷]
 ```
 
 :::
 
-### 2.2 AI가 바로 해결했다면
+### 2.2 AI가 바로 해결한 경우
 
-축하합니다. 문제가 해결되었습니다. AI가 말한 대로 수정하면 됩니다.
+축하합니다, 문제가 해결되었습니다! AI가 알려준 대로 수정하면 됩니다.
 
-### 2.3 AI가 "더 많은 정보가 필요하다"고 말한다면
+### 2.3 AI가 "추가 정보가 필요하다"고 한 경우
 
-그때 F12를 열어 핵심 정보를 보충하면 됩니다. 아래를 계속 보세요.
+이때 비로소 F12를 열어 핵심 정보를 보충해야 합니다. 아래를 참고하세요.
 
-## 3. 2단계: 핵심 정보 보충하기
+## 3. 두 번째 단계: 핵심 정보 보충
 
-AI가 더 많은 정보가 필요하다고 말할 때는 문제 유형에 따라 F12를 열고 해당 내용을 캡처합니다.
+AI가 추가 정보가 필요하다고 하면, 문제 유형에 따라 F12를 열어 해당 내용을 스크린샷합니다.
 
-### 3.1 언제 정보를 보충해야 할까
+### 3.1 언제 추가 정보가 필요한가
 
-AI가 이렇게 답할 수 있습니다.
-
-- "Console을 열어 오류가 있는지 확인해 주세요."
-- "Network 패널을 캡처해 주세요."
-- "구체적인 오류 정보가 필요합니다."
+AI가 이렇게 답변할 수 있습니다:
+- "Console을 열어 오류가 있는지 확인해 주세요"
+- "Network 패널을 스크린샷해서 보여 주세요"
+- "구체적인 오류 메시지를 봐야 합니다"
 
 이때 아래 안내에 따라 스크린샷을 보충합니다.
 
-### 3.2 Console 정보 보충하기(페이지 빈 화면/오류)
+### 3.2 Console 정보 보충 (페이지가 하얗게 변함/오류 발생)
 
-::: tip 작업 단계
+::: tip 조작 단계
 
-**1단계: F12를 눌러 개발자 도구 열기**
+**첫 번째: F12를 눌러 개발자 도구 열기**
 
-Mac에서는 `Cmd+Option+I`를 누르거나, 페이지에서 우클릭 후 "검사"를 선택합니다.
+Mac은 `Cmd+Option+I`, 또는 페이지를 우클릭하고 "검사"를 선택하세요.
 
-**2단계: Console 탭으로 전환**
+**두 번째: Console 탭으로 전환**
 
-**3단계: 빨간색 오류 정보를 캡처**
+**세 번째: 빨간색 오류 메시지 스크린샷**
 
-**4단계: AI에게 보내기**
+**네 번째: AI에게 보내기**
 
 ```
-Console 오류는 다음과 같습니다.
+Console 오류는 다음과 같습니다:
 
 [스크린샷]
 ```
 
 :::
 
-### 3.3 Network 정보 보충하기(데이터 문제/API 오류)
+### 3.3 Network 정보 보충 (데이터 문제/API 오류)
 
-::: tip 작업 단계
+::: tip 조작 단계
 
-**1단계: F12를 눌러 개발자 도구 열기**
+**첫 번째: F12를 눌러 개발자 도구 열기**
 
-**2단계: Network 탭으로 전환**
+**두 번째: Network 탭으로 전환**
 
-**3단계: 작업을 다시 한 번 수행**(저장 클릭/페이지 새로고침)
+**세 번째: 다시 한번 조작하기** (저장 클릭/페이지 새로고침)
 
-**4단계: 해당 요청을 찾아 캡처**
+**네 번째: 해당 요청을 찾아 스크린샷**
 
-- URL과 상태 코드 보기
-- Payload(전송한 파라미터) 보기
-- Response(반환 결과) 보기
+- URL과 상태 코드 확인
+- Payload(전달한 매개변수) 확인
+- Response(반환 결과) 확인
 
-**5단계: AI에게 보내기**
+**다섯 번째: AI에게 보내기**
 
 ```
-Network 정보는 다음과 같습니다.
+Network 정보는 다음과 같습니다:
 
 요청: [스크린샷1]
-파라미터: [스크린샷2]
+매개변수: [스크린샷2]
 반환: [스크린샷3]
 ```
 
 :::
 
-### 3.4 Elements 정보 보충하기(스타일 문제)
+### 3.4 Elements 정보 보충 (스타일 문제)
 
-::: tip 작업 단계
+::: tip 조작 단계
 
-**1단계: 요소 우클릭 → "검사"**
+**첫 번째: 요소를 우클릭 -> "검사"**
 
-개발자 도구가 해당 요소로 자동 이동합니다.
+개발자 도구가 자동으로 해당 요소로 이동합니다.
 
-**2단계: Styles 패널 캡처**
+**두 번째: Styles 패널 스크린샷**
 
-**3단계: AI에게 보내기**
+**세 번째: AI에게 보내기**
 
 ```
-요소 스타일은 다음과 같습니다.
+요소 스타일은 다음과 같습니다:
 
 [스크린샷]
 ```
 
 :::
 
-## 4. 3단계: 해결될 때까지 반복하기
+## 4. 세 번째 단계: 해결될 때까지 반복
 
-### 4.1 비효율적인 방식
+### 4.1 비효율적인 방법
 
-이런 방식은 시간을 낭비합니다.
+이런 방법은 시간을 낭비합니다:
 
-오류를 보자마자 당황해서 코드를 마구 고치기
-오류 해결책을 검색하는 데 30분 쓰기
-모든 오류의 뜻을 스스로 이해하려 하기
-혼자 밤늦게까지 debug하기
+오류를 보고 당황해서 코드를 마구 고치기
+30분 동안 오류 해결 방법 검색하기
+모든 오류의 의미를 스스로 이해하려고 시도하기
+혼자 밤새 디버깅하기
 
-### 4.2 효율적인 방식
+### 4.2 효율적인 방법
 
-이 흐름을 따르세요.
+이 흐름에 따라 진행하세요:
 
-먼저 현상 설명과 스크린샷으로 바로 질문하기
-AI가 더 많은 정보가 필요하다고 말할 때만 F12를 열어 보충하기
+먼저 현상을 설명하고 스크린샷으로 질문하기
+AI가 추가 정보가 필요하다고 하면, F12를 열어 보충하기
 제안에 따라 코드 수정하기
-수정 후 테스트하고, 문제가 남아 있으면 계속 캡처해 질문하기
+수정 후 테스트하고, 문제가 남아 있으면 계속 스크린샷으로 질문하기
 
-## 5. 정리: 전체 흐름
+## 5. 요약: 전체 흐름
 
 ```
 문제 발생
     ↓
 현상 설명 + 스크린샷
     ↓
-AI에게 던지기: "어떻게 해야 하나요?"
+AI에게 보내기: "어떻게 해야 하나요?"
     ↓
 AI가 바로 해결?
     ↓ 예
-AI가 말한 대로 하기
+AI가 알려준 대로 하기
     ↓
-해결됐는지 테스트
+해결되었는지 테스트
     ↓
-    ↓ 아니오 / AI가 더 많은 정보 필요
+    ↓ 아니오 / AI가 추가 정보 필요
 F12를 열어 핵심 정보 보충
     ↓
 다시 AI에게 보내기
     ↓
 해결될 때까지 반복
 ```
-
diff --git a/docs/ko-kr/stage-1/appendix-double-diamond/index.md b/docs/ko-kr/stage-1/appendix-double-diamond/index.md
index 38e76d5..b4b8b5c 100644
--- a/docs/ko-kr/stage-1/appendix-double-diamond/index.md
+++ b/docs/ko-kr/stage-1/appendix-double-diamond/index.md
@@ -11,535 +11,534 @@ const duration = '약 <strong>1.5시간</strong>'
 
 <a id="top-dd"></a>
 
-## 본 장 안내
+## 이 장의 가이드
 
 <ChapterIntroduction
   :duration="duration"
   :tags="['Double Diamond', '디자인 사고', '요구사항 분석', '솔루션 설계']"
   coreOutput="더 명확한 문제 정의 1개와 더 합리적인 검증 진입점 1개"
-  expectedOutput="처음부터 서둘러 프로토타입을 그리지 않고, 먼저 문제를 명확히 생각한 뒤 솔루션을 비교할 수 있게 됨"
+  expectedOutput="처음부터 서둘러 프로토타입을 그리지 않고, 먼저 문제를 명확히 생각한 후 솔루션을 비교하게 됩니다"
 >
 
-많은 사람이 처음 제품을 만들 때 가장 쉽게 빠지는 함정은 "노력이 부족하다"가 아니라 너무 빨리 해결책으로 들어가는 것입니다.
+많은 사람이 처음 제품을 만들 때 가장 많이 빠지는 함정은 "노력이 부족해서"가 아니라 너무 빨리 솔루션에 들어간다는 것입니다.
 
-머릿속에 방향이 하나 떠오르자마자 페이지를 어떻게 그릴지, 버튼을 어디에 둘지, AI를 붙일지, 로그인/회원가입을 만들지, 어떤 도구로 프로토타입을 그릴지 생각하기 시작합니다. 한참 바쁘게 움직인 뒤에야 가장 근본적인 문제가 전혀 정리되지 않았다는 것을 깨닫습니다. 사용자가 정말 이 고통을 가지고 있는가? 지금 이 문제를 해결할 가치가 있는가? 프로젝트를 밀고 있다고 생각하지만, 사실은 잘못된 방향으로 열심히 가속하고 있을 뿐입니다.
+머릿속에 방향이 떠오르자마자, 페이지를 어떻게 그릴지, 버튼을 어디에 둘지, AI를 연동할지 말지, 로그인/회원가입을 만들지 말지, 프로토타입은 어떤 도구로 그릴지 생각하기 시작합니다. 한참을 바쁘게 돌아간 후에야, 가장 근본적인 문제를 전혀 생각하지 않았다는 것을 깨닫습니다: 사용자가 정말로 이 페인포인트를 가지고 있는지? 이 문제가 지금 해결할 가치가 있는지? 프로젝트를 진행하고 있다고 생각했지만, 사실은 잘못된 방향에서 열심히 가속하고 있었을 뿐입니다.
 
-Double Diamond 모델은 바로 이런 상황을 피하기 위해 쓰입니다.
+Double Diamond(더블 다이아몬드) 모델은 바로 이런 상황을 피하기 위한 것입니다.
 
-가장 가치 있는 알림은 이것입니다. **"올바른 일을 하는 것"과 "그 일을 제대로 하는 것"은 완전히 다른 두 단계입니다.** 문제가 명확해지기도 전에 프로토타입으로 달려가면, 보통 잘못된 방향을 더 완전하게 만들 뿐입니다.
+이것이 가장 가치 있는 교훈은: **"올바른 일을 하는 것"과 "일을 올바르게 하는 것"은 완전히 다른 단계라는 것입니다.** 문제를 아직 명확히 파악하지 못한 상태에서 서둘러 프로토타입을 만들면, 보통 잘못된 방향을 더 완성도 있게 만들 뿐입니다.
 
 </ChapterIntroduction>
 
 ::: info 최소 SOP
-**목적**: 읽고 나면 제품을 만들 때 언제 먼저 문제를 생각해야 하고, 언제부터 솔루션과 프로토타입을 생각해야 하는지 더 명확해집니다. 처음부터 잘못된 방향을 매우 성실하게 만드는 일을 피합니다.
+**목적**: 이 글을 읽은 후, 제품을 만들 때 언제 먼저 문제를 생각해야 하고, 언제 솔루션과 프로토타입을 생각하기 시작해야 하는지 더 명확해져서, 처음부터 잘못된 방향에서 열심히 하는 일을 피할 수 있습니다.
 
-**행동 항목**: `Discover → Define → Develop → Deliver` 네 단계를 따라 내려가며, 각 단계에서는 현재 단계에서 해야 할 일만 합니다.
+**실행 항목**: `Discover -> Define -> Develop -> Deliver` 4단계로 진행하며, 각 단계에서 현재 단계에 해야 할 일만 합니다.
 
-**결과**: 더 명확한 문제 정의, 비교 가능한 몇 가지 솔루션, 검증 가능한 최소 버전을 얻게 됩니다.
+**결과**: 더 명확한 문제 정의, 비교 가능한 여러 솔루션, 그리고 검증 가능한 최소 버전을 얻게 됩니다.
 
-**키워드 이동**: [Double Diamond란 무엇인가](#dd-what) · [첫 번째 다이아몬드](#dd-first) · [AI는 어떻게 도와줄 수 있나](#dd-ai)
+**키워드 바로가기**: [Double Diamond란](#dd-what) · [첫 번째 다이아몬드](#dd-first) · [AI가 도와주는 방법](#dd-ai)
 :::
 
-## 다음 내용을 배우게 됩니다
+## 배울 내용
 
-1. Double Diamond가 무엇이고, 제로 베이스로 제품을 만들 때 왜 적합한지
-2. Discover, Define, Develop, Deliver 네 단계가 각각 무엇을 하는지
-3. "지금은 계속 발산해야 하는가"와 "지금은 수렴을 시작해야 하는가"를 구분하는 법
-4. Double Diamond를 AI 제품, 프로토타입 설계, 요구사항 검증에 적용하는 법
+1. Double Diamond 모델이란 무엇이며, 왜 제로 베이스 제품 개발에 적합한지
+2. Discover, Define, Develop, Deliver 네 단계에서 각각 무엇을 하는지
+3. "지금 계속 발산해야 하는지"와 "지금 수렴을 시작해야 하는지"를 어떻게 구분하는지
+4. Double Diamond 모델을 AI 제품, 프로토타입 설계, 요구사항 검증에 어떻게 적용하는지
 
 <a id="dd-what"></a>
-## [1. Double Diamond란 정확히 무엇인가](#top-dd)
+## [1. Double Diamond 모델이란 무엇인가](#top-dd)
 
-Double Diamond는 영국 **Design Council**이 널리 알린 고전적인 디자인 프로세스 프레임워크입니다. 하나의 완전한 디자인과 혁신 과정을 연속된 두 개의 다이아몬드 모양으로 그립니다.
+Double Diamond 모델은 영국 **Design Council**이 보급한 고전적인 디자인 프로세스 프레임워크입니다. 완전한 디자인과 혁신 과정을 두 개의 연속된 다이아몬드 모양으로 표현합니다.
 
-"다이아몬드"인 이유는 각 다이아몬드가 서로 반대지만 모두 중요한 두 가지 동작을 포함하기 때문입니다.
+"다이아몬드"인 이유는, 각 다이아몬드가 서로 반대되지만 모두 중요한 두 가지 동작을 포함하기 때문입니다:
 
-- **발산**: 먼저 시야를 열고 더 많은 가능성을 본다.
-- **수렴**: 다시 범위를 좁혀 판단하고 취사선택한다.
+- **발산**: 먼저 시야를 넓혀 더 많은 가능성을 봅니다
+- **수렴**: 그런 다음 범위를 좁혀 판단하고 선택합니다
 
-전체 과정은 네 단계입니다.
+전체 과정은 총 4단계입니다:
 
-1. **Discover**: 사용자, 문제, 환경, 시장을 넓게 이해한다.
-2. **Define**: 많은 정보 속에서 진짜 해결할 가치가 있는 핵심 문제를 추출한다.
-3. **Develop**: 핵심 문제를 둘러싸고 여러 해결책을 발산한다.
-4. **Deliver**: 더 적합한 해결책을 선별하고, 프로토타입을 만들고, 테스트하고 전달한다.
+1. **Discover**: 사용자, 문제, 환경, 시장을 폭넓게 이해
+2. **Define**: 대량의 정보에서 정말로 해결할 가치가 있는 핵심 문제를 추출
+3. **Develop**: 핵심 문제를 중심으로 다양한 솔루션을 발산
+4. **Deliver**: 선별, 프로토타입, 테스트 및 더 적합한 솔루션 전달
 
-이 네 단계를 가장 기억하기 쉬운 한 문장으로 압축하면 이렇습니다.
+이 네 단계를 가장 기억하기 쉬운 한 문장으로 압축하면:
 
-- **첫 번째 다이아몬드**: 정확히 어떤 문제를 해결해야 하는지 먼저 파악한다.
-- **두 번째 다이아몬드**: 그다음 어떤 방법으로 해결할지 결정한다.
+- **첫 번째 다이아몬드**: 먼저 무엇을 해결해야 하는지 명확히 파악하기
+- **두 번째 다이아몬드**: 그 문제를 어떤 솔루션으로 해결할지 결정하기
 
-이것이 방금 말한 아주 정확한 문장입니다.
+이것은 아까 정확하게 말씀하신 그 문장이기도 합니다:
 
 - **첫 번째 다이아몬드: 올바른 일을 하기**
-- **두 번째 다이아몬드: 그 일을 제대로 하기**
+- **두 번째 다이아몬드: 일을 올바르게 하기**
 
-## 2. 왜 Double Diamond는 초보자에게 특히 적합한가
+## 2. 왜 Double Diamond 모델이 특히 초보자에게 적합한가
 
-초보자가 제품을 만들 때 가장 흔한 리듬은 보통 이렇습니다.
+초보자가 제품을 만들 때 가장 흔한 리듬은 보통 이렇습니다:
 
-- 아이디어가 떠오른다.
-- 이 방향이 멋지다고 느낀다.
-- 바로 프로토타입을 그리기 시작한다.
-- 만들다 보니 기능이 점점 많아진다.
-- 마지막에는 자신이 정확히 어떤 문제를 해결하는지 모르게 된다.
+- 아이디어가 하나 떠오름
+- 이 방향이 멋지다고 느낌
+- 바로 프로토타입을 그리기 시작함
+- 하다 보니 기능이 점점 많아짐
+- 결국 자신이 무슨 문제를 해결하고 있는지 모르게 됨
 
-Double Diamond의 가치는 프로세스를 복잡하게 만드는 데 있지 않습니다. **"문제 이해"와 "솔루션 설계"를 강제로 분리하게 하는 데** 있습니다.
+Double Diamond 모델의 가치는 프로세스를 복잡하게 만드는 것이 아니라, **"문제 이해"와 "솔루션 설계"를 분리하도록 강제**하는 데 있습니다.
 
-이 말은 평범하게 들리지만 실제로는 매우 중요합니다. 실패한 제품의 상당수는 실행이 성실하지 않아서가 아니라 다음 이유 때문입니다.
+이것은 평범하게 들리지만, 실제로는 매우 중요합니다. 왜냐하면 많은 실패한 제품이 실행이 성실하지 않아서가 아니라:
 
-- 문제를 잘못 골랐다.
-- 사용자를 오해했다.
-- 해결책을 너무 일찍 고정했다.
-- 방향 검증 없이 세부 다듬기에 많은 시간을 썼다.
+- 잘못된 문제를 선택했기 때문
+- 사용자를 오해했기 때문
+- 너무 일찍 솔루션에 고정되었기 때문
+- 방향을 검증하지 않고 세부 사항을 다듬는 데 많은 시간을 썼기 때문
 
-Double Diamond는 계속해서 이렇게 상기시킵니다.
+Double Diamond 모델은 계속해서 다음을 상기시킵니다:
 
-- 생각이 잘 이어진다고 해서 문제가 성립했다고 기본 가정하지 마세요.
-- 해결책을 만들 수 있다고 해서 그것이 만들 가치가 있다고 기본 가정하지 마세요.
-- 프로토타입이 완성되어 보인다고 해서 사용자가 정말 필요로 할 것이라고 기본 가정하지 마세요.
+- 아이디어가 편해서 문제가 이미 성립했다고 가정하지 마세요
+- 솔루션을 만들 수 있다고 해서 그것이 가치 있다고 가정하지 마세요
+- 프로토타입이 완성되어 보인다고 해서 사용자가 정말로 필요로 할 것이라고 가정하지 마세요
 
 <a id="dd-first"></a>
 ## [3. 첫 번째 다이아몬드: 올바른 일을 하기](#top-dd)
 
-첫 번째 다이아몬드는 **문제 자체**에 집중하며, 해결책에 집중하지 않습니다.
+첫 번째 다이아몬드가 주목하는 것은 **문제 자체**이며, 솔루션이 아닙니다.
 
-한 문장으로 이해하면 이렇습니다. **서둘러 만들지 말고, 정말 만들 가치가 있는지 먼저 파악하세요.**
+한 문장으로 이해하자면: **서둘러 하지 말고, 먼저 할 가치가 있는지 확인하세요.**
 
 ### 3.1 Discover: 먼저 문제 공간을 열기
 
-Discover 단계의 핵심 과제는 **넓게 조사하는 것**이지, 빠르게 결론을 내리는 것이 아닙니다.
+Discover 단계의 핵심 작업은 **폭넓은 조사이며, 빠른 결론을 내리는 것이 아닙니다.**
 
-이 단계에서 보통 하는 일은 다음과 같습니다.
+이 단계에서 보통 하는 일은:
 
-- 사용자가 실제 장면에서 어떻게 행동하는지 보기
-- 잠재 사용자를 인터뷰해 최근 언제 문제를 만났는지 이해하기
-- 지금은 어떻게 임시로 해결하고 있는지 관찰하기
-- 경쟁 제품과 대체 방안이 어떻게 처리하는지 보기
-- 시장, 프로세스, 제약, 상하류 정보를 수집하기
+- 사용자가 실제 시나리오에서 어떻게 행동하는지 관찰
+- 잠재 사용자를 인터뷰하여, 최근에 문제를 만난 것이 언제였는지 파악
+- 현재 어떻게 대충 해결하는지 관찰
+- 경쟁 제품과 대체 솔루션이 어떻게 처리하는지 확인
+- 시장, 프로세스, 제약 조건, 업스트림/다운스트림 정보 수집
 
-많은 사람이 Discover를 "자료를 좀 더 많이 보는 것"으로 오해합니다. 사실 더 중요한 것은 **사람과 장면을 이해하는 것**이지, 정보만 잔뜩 검색하는 것이 아닙니다.
+많은 사람이 Discover를 "자료를 많이 보는 것"으로 오해합니다. 사실 더 중요한 것은: **정보를 한 무더기 검색하는 것이 아니라, 사람과 시나리오를 이해하는 것입니다.**
 
-예를 들어 "AI가 회의록 정리를 도와주는 도구"를 만들고 싶다면, Discover 단계에서 더 집중해야 할 것은 다음입니다.
+예를 들어 "AI로 회의록 정리 도구"를 만들고 싶다면, Discover 단계에서 더 주목해야 할 것은:
 
-- 사용자가 회의 후 정확히 어느 부분에서 가장 고통스러워하는지
-- 기록이 어려운지, 정리가 어려운지, 동기화가 어려운지
-- 지금은 직접 쓰는지, 인턴에게 시키는지, 녹음을 다시 듣는지, 아예 정리하지 않는지
-- 어떤 회의 장면에서 회의록이 가장 필요하고, 어떤 장면에서는 전혀 필요 없는지
+- 사용자가 회의 후 어디서 가장 고통스러워하는지
+- 기록이 어려운지, 정리가 어려운지, 아니면 공유가 어려운지
+- 현재 직접 작성하는지, 인턴에게 맡기는지, 녹음을 다시 듣는지, 아니면 아예 정리하지 않는지
+- 어떤 회의 시나리오에서 회의록이 가장 필요한지, 어떤 시나리오에서는 전혀 필요 없는지
 
-이 단계에서 가장 중요한 목표는 답을 내는 것이 아니라, **너무 일찍 자신이 이미 답을 알고 있다고 착각하지 않는 것**입니다.
+이 단계의 가장 중요한 목표는 답을 얻는 것이 아니라, **너무 일찍 답을 알고 있다고 생각하지 않는 것입니다.**
 
-### 3.2 Define: 많은 정보 속에서 핵심 문제 추출하기
+### 3.2 Define: 정보 더미에서 핵심 문제 추출
 
-Discover가 시야를 여는 것이라면, Define은 수렴을 시작하는 것입니다.
+Discover가 시야를 넓히는 것이라면, Define은 수렴을 시작하는 것입니다.
 
-Define 단계에서 해야 할 일은 모든 관찰을 그대로 보존하는 것이 아니라, 다음을 묻는 것입니다.
+Define 단계에서 해야 할 것은 모든 관찰을 보존하는 것이 아니라, 다음을 묻는 것입니다:
 
-- 진짜로 가장 우선 해결할 가치가 있는 문제는 무엇인가?
-- 어떤 문제가 가장 자주 나타나고, 가장 아프고, 가장 가치 있는가?
-- 첫 번째 버전은 정확히 어떤 장면 하나만 겨냥할 것인가?
+- 정말로 우선적으로 해결할 가치가 있는 문제는 무엇인가
+- 어떤 문제가 가장 자주 나타나고, 가장 아프고, 가장 가치가 있는가
+- 우리 첫 번째 버전은 어떤 시나리오에만 집중할 것인가
 
 이 단계의 핵심은 넓은 주제를 명확한 문제 정의로 수렴하는 것입니다.
 
-처음에는 이렇게 말할 수 있습니다.
+예를 들어 처음에 이렇게 말했다면:
 
-> 회의 효율을 높이는 AI 도구를 만들고 싶다.
+> 회의 효율을 높이는 AI 도구를 만들고 싶습니다.
 
-Define 단계에 이르면 더 좋은 표현은 이렇게 바뀔 수 있습니다.
+Define 단계에 이르면, 더 나은 표현은 이렇게 될 수 있습니다:
 
-> 우리는 먼저 프로젝트형 팀이 30~60분짜리 협업 회의가 끝난 뒤, 10분 안에 할 일, 담당자, 마감일이 포함된 회의록을 만들지 못하는 문제를 해결한다.
+> 프로젝트형 팀이 30~60분 협업 회의가 끝난 후, 10분 이내에 할 일, 담당자, 마감일이 포함된 회의록을 출력하지 못하는 문제를 먼저 해결하겠습니다.
 
-이제 문제가 명확해지기 시작합니다.
+이때 문제가 명확해지기 시작합니다:
 
-- 사용자는 누구인가
-- 장면은 무엇인가
-- 막히는 지점은 무엇인가
-- 성공 기준은 무엇인가
+- 사용자가 누구인지
+- 시나리오가 무엇인지
+- 막힌 곳이 어디인지
+- 성공 기준이 무엇인지
 
-Define의 본질은 **"문제가 많다"에서 "이번에는 어떤 문제 하나를 먼저 해결할 것인가"로 수렴하는 것**입니다.
+Define의 본질은 **"문제가 많다"에서 "이번에 어떤 문제를 먼저 해결할 것인가"로 수렴하는 것입니다.**
 
-## 4. 두 번째 다이아몬드: 그 일을 제대로 하기
+## 4. 두 번째 다이아몬드: 일을 올바르게 하기
 
-첫 번째 다이아몬드를 완료한 뒤에야 진정으로 두 번째 다이아몬드에 들어가기에 적합합니다. 이때 해결하려는 것은 더 이상 모호한 방향이 아니라 수렴된 구체적인 문제이기 때문입니다.
+첫 번째 다이아몬드를 완료한 후에야 비로소 두 번째 다이아몬드에 진입하는 것이 적절합니다. 왜냐하면 이때 해결하는 것은 모호한 방향이 아니라, 수렴된 구체적인 문제이기 때문입니다.
 
-### 4.1 Develop: 핵심 문제를 중심으로 솔루션 발산하기
+### 4.1 Develop: 핵심 문제를 중심으로 솔루션 발산
 
-Develop 단계의 핵심은 **같은 문제를 중심으로 여러 가능한 솔루션을 탐색하는 것**입니다.
+Develop 단계의 핵심은 **같은 문제를 중심으로 여러 가능한 솔루션을 탐색하는 것입니다.**
 
-주의할 점은 여기서의 발산은 Discover 단계와 다릅니다.
+주의할 점은, 여기서의 발산은 Discover 단계의 발산과 다릅니다.
 
-- Discover의 발산은 문제 공간을 탐색하는 것입니다.
-- Develop의 발산은 해결책 공간을 탐색하는 것입니다.
+- Discover의 발산은 문제 공간을 탐색하는 것
+- Develop의 발산은 솔루션 공간을 탐색하는 것
 
-회의록 예시를 계속 쓰면, Develop 단계에서는 다음을 생각할 수 있습니다.
+회의록 예시를 계속하면, Develop 단계에서는 이런 것들을 생각할 수 있습니다:
 
-- 웹 도구를 만들 것인가, 회의 플러그인을 만들 것인가
-- 녹음 업로드 후 처리할 것인가, 실시간 기록할 것인가
-- 요약만 할 것인가, 할 일 추출에 집중할 것인가
-- 개인 효율을 강조할 것인가, 팀 동기화를 강조할 것인가
-- 사용자가 자유롭게 편집하게 할 것인가, 구조화된 템플릿을 바로 출력할 것인가
+- 웹 도구로 할지, 회의 플러그인으로 할지
+- 녹음을 업로드한 후 처리할지, 실시간 기록으로 할지
+- 요약만 할지, 할 일 추출을 중심으로 할지
+- 개인 효율을 강조할지, 팀 동기화를 강조할지
+- 사용자에게 자유로운 편집을 제공할지, 구조화된 템플릿을 직접 출력할지
 
-이 단계는 브레인스토밍에 매우 적합하고, 팀과 함께 솔루션을 넓히기에도 좋습니다.
+이 단계는 브레인스토밍에 매우 적합하며, 팀과 함께 솔루션을 펼쳐보는 데도 좋습니다.
 
-하지만 전제가 있습니다. **모든 솔루션은 이미 정의된 같은 문제를 섬겨야 합니다.**  
-문제가 명확히 정의되지 않았다면 Develop은 쉽게 다시 기능이 난무하는 상태가 됩니다.
+하지만 여기에는 전제가 있습니다: **모든 솔루션은 동일하게 정의된 문제에 봉사해야 합니다.**
+문제가 명확하게 정의되지 않으면, Develop은 쉽게 다시 기능이 난무하는 상황이 됩니다.
 
-### 4.2 Deliver: 솔루션 선택, 프로토타입, 테스트, 전달
+### 4.2 Deliver: 솔루션 선택, 프로토타입, 테스트 및 전달
 
-Deliver 단계는 두 번째 다이아몬드 안의 수렴 단계입니다.
+Deliver 단계는 두 번째 다이아몬드의 수렴 단계입니다.
 
-이때 해야 할 일은 더 많이 상상하는 것이 아니라 판단을 시작하는 것입니다.
+이때 해야 할 것은 계속 더 많은 것을 생각하는 것이 아니라, 판단을 시작하는 것입니다:
 
-- 어떤 솔루션이 현재 단계에 가장 적합한가
-- 어떤 버전이 가장 작지만 가장 유용한가
-- 어떤 기능은 반드시 먼저 해야 하고, 어떤 기능은 나중으로 미뤄도 되는가
-- 어떻게 프로토타입을 만들고, 테스트하고, 작은 범위에서 검증할 것인가
+- 현재 단계에 가장 적합한 솔루션은 무엇인가
+- 가장 작지만 가장 유용한 버전은 무엇인가
+- 어떤 기능을 먼저 해야 하고, 어떤 것은 나중에 해도 되는가
+- 프로토타입, 테스트, 소규모 검증은 어떻게 할 것인가
 
-많은 사람이 Deliver를 "출시"와 같다고 생각합니다. 사실 더 정확한 뜻은 **하나의 솔루션을 테스트 가능하고, 검증 가능하며, 반복 개선 가능한 것으로 바꾸는 것**입니다.
+많은 사람이 Deliver를 "출시"와 같다고 생각합니다. 사실 더 정확한 의미는: **솔루션을 테스트 가능하고, 검증 가능하고, 반복 가능한 것으로 만드는 것입니다.**
 
-그것은 다음일 수 있습니다.
+그것은 다음과 같을 수 있습니다:
 
-- 저충실도 흐름도 한 장
+- 저해상도 흐름도
 - Figma 프로토타입
 - 실행 가능한 MVP
 - 소규모 사용자 테스트
-- 실제 피드백 이후의 반복 개선 버전
+- 실제 피드백 후 반복 버전
 
-Deliver의 핵심은 "완벽한 전달"이 아니라 **가능한 한 빨리 솔루션을 실제 환경에 넣어 검증하는 것**입니다.
+Deliver의 핵심은 "완벽한 전달"이 아니라, **최대한 빨리 솔루션을 실제 환경에서 검증하는 것입니다.**
 
-## 5. 가장 기억하기 쉬운 대조표
+## 5. 가장 기억하기 쉬운 비교표
 
-네 단계를 자꾸 헷갈린다면 아래 버전을 그대로 기억하세요.
+네 단계를 항상 헷갈린다면, 아래 버전을 바로 기억하세요:
 
-| 단계 | 무엇을 하는가 | 키워드 | 흔한 산출물 |
+| 단계 | 하는 일 | 키워드 | 일반적 산출물 |
 | --- | --- | --- | --- |
-| Discover | 문제 이해 | 조사, 관찰, 인터뷰, 정보 수집 | 사용자 인사이트, 장면 메모, 문제 목록 |
-| Define | 문제 정의 | 추출, 집중, 취사선택, 문제 다시 쓰기 | 문제 정의, 우선순위, MVP 진입점 |
+| Discover | 문제 이해 | 조사, 관찰, 인터뷰, 정보 수집 | 사용자 인사이트, 시나리오 노트, 문제 목록 |
+| Define | 문제 정의 | 추출, 집중, 선택, 문제 재작성 | 문제 정의, 우선순위, MVP 진입점 |
 | Develop | 솔루션 탐색 | 브레인스토밍, 비교, 공동 창작, 프로토타입 구상 | 솔루션 목록, 흐름 스케치, 프로토타입 방향 |
-| Deliver | 솔루션 검증 | 프로토타입, 테스트, 반복 개선, 전달 | 프로토타입, 테스트 피드백, 최적화 버전 |
+| Deliver | 솔루션 검증 | 프로토타입, 테스트, 반복, 전달 | 프로토타입, 테스트 피드백, 최적화 버전 |
 
-더 압축하면 이렇습니다.
+더 압축하면 이렇습니다:
 
-- **Discover / Define**: "올바른 일을 하기"를 해결한다.
-- **Develop / Deliver**: "그 일을 제대로 하기"를 해결한다.
+- **Discover / Define**: "올바른 일을 하기" 해결
+- **Develop / Deliver**: "일을 올바르게 하기" 해결
 
-## 6. Double Diamond의 가장 흔한 오해
+## 6. Double Diamond 모델의 가장 흔한 오해
 
-### 6.1 Discover도 하지 않고 바로 Deliver하기
+### 6.1 Discover도 안 했는데 바로 Deliver
 
-가장 흔한 경우입니다. 많은 사람이 아이디어가 생기자마자 프로토타입을 그리고, PRD를 쓰고, 모델을 붙이고, 페이지를 만듭니다.
+이것이 가장 흔한 경우입니다. 많은 사람이 아이디어가 떠오르자마자 프로토타입을 그리고, PRD를 쓰고, 모델을 연동하고, 페이지를 만듭니다.
 
-문제는 당신이 성실하지 않다는 것이 아니라, 해결할 가치가 있는 문제인지 아직 확인하지 않았을 수 있다는 점입니다.
+문제는 성실하지 않다는 것이 아니라, 문제가 해결할 가치가 있는지 확인조차 하지 않았을 수 있다는 것입니다.
 
-### 6.2 Discover는 오래 하지만 끝내 Define하지 않기
+### 6.2 Discover을 오래 하지만, Define을 계속하지 않음
 
-또 다른 극단은 계속 조사하고, 계속 자료를 보고, 계속 인터뷰하지만 좀처럼 수렴하지 못하는 것입니다.
+또 다른 극단은 계속 조사하고, 계속 자료를 보고, 계속 인터뷰하지만, 수렴하지 못하는 것입니다.
 
-Double Diamond는 무한 발산을 하라는 뜻이 아닙니다. 발산 후에는 반드시 판단과 취사선택으로 들어가야 한다고 알려 주는 것입니다.
+Double Diamond는 무한한 발산을 요구하는 것이 아니라, 발산 후에는 반드시 판단과 선택으로 진입해야 한다는 것을 상기시킵니다.
 
-### 6.3 Define 이후 몰래 문제를 바꾸기
+### 6.3 Define 후, 몰래 문제를 바꿈
 
-많은 팀은 Develop 단계에서 어떤 솔루션이 더 쉽게 만들 수 있다는 이유로, 기존 솔루션에 맞도록 문제 정의를 거꾸로 수정합니다.
+많은 팀이 Develop 단계에서 어떤 솔루션이 더 쉽게 만들 수 있다는 이유로, 문제 정의를 역으로 수정하여 기존 솔루션에 맞춥니다.
 
-이것은 위험합니다. 문제를 해결하는 것이 아니라 자신이 선호하는 솔루션을 정당화하고 있을 수 있기 때문입니다.
+이것은 위험합니다. 왜냐하면 문제를 해결하는 것이 아니라, 자신이 좋아하는 솔루션을 위해 이유를 찾고 있을 수 있기 때문입니다.
 
-### 6.4 Deliver를 "크고 완전한 출시"로 오해하기
+### 6.4 Deliver을 "크고 완전한 출시"로 오해
 
-Deliver는 완전한 제품을 모두 만들어야 끝난다는 뜻이 아닙니다. 많은 경우 테스트 가능한 프로토타입 하나, 실제 사용자 테스트 한 번이면 이미 좋은 deliver입니다.
+Deliver이 반드시 완전한 제품을 모두 완성해야 끝나는 것은 아닙니다. 많은 경우, 테스트 가능한 프로토타입이나 한 차례의 실제 사용자 테스트만으로도 이미 훌륭한 deliver입니다.
 
-## 7. AI 제품에서 Double Diamond는 어떻게 쓰나
+## 7. AI 제품에서 Double Diamond 모델을 어떻게 사용할까
 
-AI 제품은 특히 "능력 우선" 함정에 빠지기 쉽습니다. 모델 능력이 너무 매력적으로 보이기 때문입니다. 당신은 곧장 이런 생각을 하고 싶어질 수 있습니다.
+AI 제품은 특히 "기능 우선" 함정에 빠지기 쉽습니다. 왜냐하면 모델의 능력이 너무 매력적으로 보이기 때문입니다. 바로 이런 것들을 생각하고 싶어집니다:
 
-- 멀티모달을 붙일까
-- Agent를 만들까
-- 워크플로우를 넣을까
-- 음성, 이미지, 웹 검색을 연결할까
+- 멀티모달을 연동할지 말지
+- Agent를 만들지 말지
+- 워크플로를 추가할지 말지
+- 음성, 이미지, 인터넷 검색을 연동할지 말지
 
-하지만 Double Diamond는 먼저 이렇게 묻게 합니다.
+하지만 Double Diamond 모델은 먼저 이것을 묻도록 합니다:
 
-- 사용자는 정확히 어느 단계에서 정말 막혀 있는가
-- 이 막힘은 반드시 AI가 있어야 해결되는가
-- AI를 쓰지 않는다면 기존 방법은 정확히 어디가 가장 나쁜가
-- AI가 들어간 뒤 가장 핵심적인 진전은 무엇인가
+- 사용자가 정확히 어느 단계에서 막혀 있는지
+- 이 막힌 곳이 반드시 AI가 필요한 것인지
+- AI를 사용하지 않는다면, 기존 방법이 정확히 어디서 가장 나쁜지
+- AI를 넣은 후, 가장 핵심적인 진전은 무엇인지
 
-이것은 흔한 상황을 피하게 해 줍니다. **능력은 강한데 가치는 약한 상황**입니다.
+이것은 흔한 상황을 피하는 데 도움이 됩니다: **능력은 강하지만, 가치는 약함.**
 
-실용적인 순서는 다음과 같습니다.
+실용적인 순서는:
 
-1. Discover 단계에서 사용자가 지금 어떻게 과제를 처리하는지 관찰한다.
-2. Define 단계에서 가장 아픈 장면 하나를 명확한 문제 정의 한 문장으로 쓴다.
-3. Develop 단계에서 어떤 AI 기능이 이 문제를 가장 잘 섬기는지 비교한다.
-4. Deliver 단계에서 최소 버전을 만들고 실제 사용자에게 테스트하게 한다.
+1. Discover 단계에서 사용자가 현재 작업을 어떻게 처리하는지 관찰
+2. Define 단계에서 가장 아픈 시나리오를 명확한 문제 정의 한 문장으로 작성
+3. Develop 단계에서 어떤 AI 능력이 이 문제에 가장 적합한지 비교
+4. Deliver 단계에서 최소 버전을 만들어 실제 사용자에게 테스트
 
-## 8. 바로 적용할 수 있는 Double Diamond 템플릿
+## 8. 바로 사용할 수 있는 Double Diamond 템플릿
 
-자기 제품을 만들고 있다면 이 순서대로 먼저 써 보세요.
+자신의 제품을 만들고 있다면, 다음 순서대로 작성해 보세요:
 
 ### Discover
 
 - 내가 관찰한 사용자는 누구인가?
-- 그들이 최근 이 문제를 만난 것은 언제인가?
-- 지금은 어떻게 해결하고 있는가?
-- 가장 짜증 나고, 느리고, 불안한 지점은 무엇인가?
+- 그들이 최근에 이 문제를 만난 것은 언제인가?
+- 지금 어떻게 해결하고 있는가?
+- 가장 번거롭고, 가장 느리고, 가장 불안한 부분은 무엇인가?
 
 ### Define
 
-- 이 문제들 중 가장 우선 해결할 가치가 있는 것은 무엇인가?
-- 어떤 장면이 가장 빈번하거나 가장 핵심적인가?
-- 첫 번째 버전은 누구만, 무엇만 섬길 것인가?
-- 성공적으로 해결되면 사용자의 상태는 어떻게 변하는가?
+- 이 문제들 중, 가장 먼저 해결할 가치가 있는 것은 무엇인가?
+- 어떤 시나리오가 가장 빈도가 높거나, 가장 핵심적인가?
+- 첫 번째 버전에서는 누구만 서비스하고, 무엇만 해결할 것인가?
+- 성공적으로 해결된 후, 사용자의 상태는 어떻게 변할 것인가?
 
 ### Develop
 
-- 이 문제에 대해 어떤 가능한 솔루션이 있는가?
-- 어떤 솔루션이 가장 가볍고, 빠르고, 검증하기 쉬운가?
-- 반드시 해야 할 것은 무엇이고, 나중으로 미룰 것은 무엇인가?
+- 이 문제에 대해, 어떤 가능한 솔루션이 있는가?
+- 어떤 솔루션이 가장 가볍고, 가장 빠르고, 가장 검증하기 쉬운가?
+- 반드시 해야 할 것은 무엇이고, 나중에 해도 되는 것은 무엇인가?
 
 ### Deliver
 
-- 이 방향을 검증하기 위해 가장 작게 무엇을 전달할 수 있는가?
+- 이 방향을 검증하기 위해 최소한 무엇을 전달할 수 있는가?
 - 흐름도인가, 프로토타입인가, MVP인가?
-- 누구에게 테스트해야 하는가?
-- 테스트 후 계속할지, 수정할지, 포기할지는 어떻게 판단할 것인가?
+- 누구에게 테스트를 맡겨야 하는가?
+- 테스트 후 계속할지, 수정할지, 포기할지 어떻게 판단할 것인가?
 
 ## 9. 제로 베이스도 이해할 수 있는 예시
 
-"대학생의 취업 이력서 준비를 돕는 AI 도구"를 만들고 싶다고 가정해 봅시다.
+"대학생의 구직 이력서를 준비해 주는" AI 도구를 만들고 싶다고 가정해 봅시다.
 
-많은 사람은 처음부터 두 번째 다이아몬드로 들어가 이런 생각을 시작합니다.
+많은 사람이 처음부터 두 번째 다이아몬드에 진입하여 이런 것들을 생각합니다:
 
-- 원클릭 미화를 넣을까
-- 지능형 문장 개선을 넣을까
-- JD 자동 매칭을 할까
-- 자기소개서를 생성할까
+- 원클릭 미화를 할지 말지
+- 지능형 재작성을 할지 말지
+- 자동 JD 매칭을 할지 말지
+- 자기소개서를 생성할지 말지
 
-하지만 Double Diamond를 따르면 더 좋은 과정은 이렇습니다.
+하지만 Double Diamond 모델에 따르면, 더 나은 과정은 이렇습니다:
 
 ### 첫 번째 다이아몬드
 
 **Discover**
 
-- 취업 준비생에게 최근 이력서를 고친 것이 언제인지 묻는다.
-- 그들이 이전 이력서를 어떻게 새 버전으로 바꾸는지 본다.
-- 가장 어려운 것이 "쓸 줄 모름"인지, "고칠 줄 모름"인지, "좋은지 판단할 줄 모름"인지 이해한다.
+- 최근 졸업생에게 마지막으로 이력서를 수정한 것이 언제였는지 물어보기
+- 그들이 기존 이력서에서 새 버전으로 어떻게 수정하는지 보기
+- 가장 고민인 것이 "작성 방법을 모름", "수정 방법을 모름", "좋은지 판단 방법을 모름" 중 어느 것인지 파악
 
 **Define**
 
-- 마지막에는 더 구체적인 문제로 수렴한다.
-- "대학생은 이력서를 만들 줄 모른다"가 아니다.
-- "처음 인턴십에 지원하는 학생은 기존 경험을 직무에 맞는 표현으로 바꾸기 어려워 지원을 미룬다"이다.
+- 마지막으로 더 구체적인 문제로 수렴:
+- "대학생이 이력서를 못 만드는 것이 아니라"
+- "처음으로 인턴십에 지원하는 학생이 기존 경험을 공고에 맞는 표현으로 재작성하기 어려워, 지원을 미루는 것"
 
 ### 두 번째 다이아몬드
 
 **Develop**
 
-- 몇 가지 솔루션을 생각한다. 템플릿 라이브러리, AI 문장 개선, 직무 대조, 이력서 점수화, 사례 참고.
+- 여러 솔루션 생각: 템플릿 라이브러리, AI 재작성, 공고 대조, 이력서 평가, 사례 참고
 
 **Deliver**
 
-- 첫 버전은 "직무 설명에 따라 경험 bullet point를 바꿔 쓰기"만 만든다.
-- 학생 5명에게 써 보게 하고, 더 빨리 첫 버전의 이력서를 제출하게 되는지 본다.
+- 첫 번째 버전은 "공고 설명에 따라 경험 bullet points를 재작성"만 하기
+- 5명의 학생에게 사용해 보고, 더 빨리 첫 번째 버전의 이력서를 제출하는지 확인
 
-첫 번째 다이아몬드를 탄탄하게 하면 두 번째 다이아몬드가 훨씬 명확해진다는 것을 알 수 있습니다.
+첫 번째 다이아몬드를 탄탄하게 하면, 두 번째 다이아몬드가 훨씬 명확해지는 것을 발견할 것입니다.
 
-## 10. 정리
+## 10. 요약
 
-Double Diamond의 가장 강한 힘은 혼란스러운 덩어리를 네 개의 더 명확한 동작으로 나눠 준다는 데 있습니다.
+Double Diamond 모델의 가장 강력한 점은, 한 무더기의 혼란을 네 개의 더 명확한 동작으로 나누어 준다는 것입니다:
 
-- 먼저 발산해 문제를 이해한다.
-- 다시 수렴해 문제를 정의한다.
-- 다시 발산해 솔루션을 탐색한다.
-- 마지막으로 수렴해 솔루션을 전달한다.
+- 먼저 발산하여 문제를 이해
+- 다시 수렴하여 문제를 정의
+- 다시 발산하여 솔루션을 탐색
+- 마지막으로 수렴하여 솔루션을 전달
 
-이 모델은 당신을 느리게 만들기 위한 것이 아닙니다. **바빠 보이지만 사실 방향이 틀린 수많은 우회로를 줄이기 위한 것**입니다.
+이것은 여러분을 느리게 만드는 것이 아니라, **바쁘게 보이지만 실제로 방향이 잘못된 많은 우회를 덜 하게 해줍니다.**
 
-특히 AI 시대에는 만드는 속도가 점점 빨라지기 때문에 Double Diamond가 오히려 더 중요해집니다. "만드는 것"이 점점 쉬워질수록 진짜 희소한 능력은 이렇게 바뀌기 때문입니다. **해결할 가치가 있는 문제를 풀고 있는가, 그리고 그것을 적합한 방식으로 풀고 있는가.**
+특히 AI 시대에는 것을 만드는 것이 점점 빨라지고 있어, Double Diamond 모델이 오히려 더 중요해집니다. 왜냐하면 "만들어 내는 것"이 점점 쉬워질수록, 진정으로 희귀한 능력은 다음이 되기 때문입니다: **해결할 가치가 있는 문제를 해결하고 있는지, 그리고 적절한 방식으로 해결하고 있는지.**
 
-이 한 문장만 기억하면 됩니다.
+이 한 문장만 기억하면 됩니다:
 
-**올바른 일을 먼저 하고, 그 일을 제대로 하세요.**
+**먼저 올바른 일을 하고, 그 다음에 일을 올바르게 하세요.**
 
 <a id="dd-ai"></a>
-## [11. AI로 Double Diamond 흐름을 실행하는 방법](#top-dd)
+## [11. AI를 활용해 Double Diamond 프로세스를 실행하는 방법](#top-dd)
 
-Double Diamond 자체는 AI 도구가 아니지만, AI는 네 단계에서 "가속기" 역할을 하기에 매우 적합합니다. 핵심은 AI가 대신 결정하게 하는 것이 아니라, 시야 확장, 정보 정리, 솔루션 비교, 검증 자료 생성을 돕게 하는 것입니다.
+Double Diamond 모델 자체는 AI 도구가 아니지만, AI는 네 단계에서 "가속기" 역할을 하기에 매우 적합합니다. 핵심은 AI가 대신 결정하게 하는 것이 아니라, 시야를 넓히고, 정보를 정리하고, 솔루션을 비교하고, 검증 자료를 생성하는 것을 돕게 하는 것입니다.
 
-### 11.1 Discover 단계에서 AI로 정보 밑작업 한 번 하기
+### 11.1 Discover 단계: AI로 먼저 정보 기반 마련
 
-정식 인터뷰와 조사를 시작하기 전에 AI에게 가벼운 문제 스캔을 맡길 수 있습니다. 예를 들면 다음입니다.
+공식 인터뷰와 조사 전에 AI에게 가벼운 문제 스캔을 먼저 맡길 수 있습니다. 예를 들어:
 
-- 시장에서 흔한 대체 방안은 무엇인가
-- 사용자가 공개 커뮤니티에서 가장 자주 불평하는 것은 무엇인가
-- 이 문제는 어떤 장면과 사람군에서 자주 나타나는가
-- 기존 제품은 보통 무엇을 놓치고 있는가
+- 시장에서 흔한 대체 솔루션은 무엇인지
+- 사용자가 공개 커뮤니티에서 가장 많이 불만을 제기하는 것이 무엇인지
+- 이 문제가 어떤 시나리오와 사용자군에서 흔한지
+- 기존 제품이 보통 무엇을 간과하는지
 
-이 단계는 실제 조사를 대체할 수 없지만, 문제 지도를 빠르게 만드는 데 매우 적합합니다.
+이 단계는 실제 조사를 대체할 수 없지만, 빠르게 문제 지도를 구축하는 데 매우 적합합니다.
 
-아주 간단한 초보자 입력은 이렇게 쓸 수 있습니다.
+아주 간단한 초보자 입력은 다음과 같을 수 있습니다:
 
 ```text
-대학생 이력서 수정을 도와주는 도구를 만들고 싶어.
-기능을 생각해 주지 말고, 이 문제에서 사람들이 가장 자주 겪는 어려움이 무엇인지 먼저 봐 줘.
+대학생의 이력서를 수정하는 도구를 만들고 싶습니다.
+먼저 기능을 생각하지 말고, 이 문제에서 사람들이 가장 많이 겪는 어려움이 무엇인지 먼저 봐 주세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
 초기 문제 지도:
 
 1. 어떤 경험을 써야 할지 모름
-2. 직무에 맞게 어떻게 수정해야 할지 모름
-3. 여러 번 고쳤는데도 충분히 좋은지 확신하지 못함
-4. 다른 사람에게 봐 달라고 해야 하지만 매번 부탁하기 불편함
-5. 확신이 없어서 계속 지원을 미룸
+2. 공고에 맞게 어떻게 수정해야 할지 모름
+3. 여러 번 수정해도 충분히 좋은지 확신이 안 됨
+4. 다른 사람에게 검토를 부탁해야 하지만, 매번 부탁하기가 불편함
+5. 확신이 없어서, 계속 지원을 미룸
 ```
 
-이 출력의 역할은 결론을 대신 내려 주는 것이 아니라, Discover에 더 빨리 들어가게 해 주는 것입니다.
+이런 출력의 역할은 대신 결론을 내리는 것이 아니라, 더 빨리 Discover에 진입하도록 돕는 것입니다.
 
-### 11.2 Define 단계에서 AI에게 문제 정의 수렴을 돕게 하기
+### 11.2 Define 단계: AI가 문제 정의를 수렴하도록 돕기
 
-많은 사람이 자료를 한가득 모은 뒤 가장 어려워하는 것은 문제를 진짜 명확한 한 문장으로 줄이는 일입니다. 조사 메모를 AI에게 주고 몇 가지 후보 문제 정의로 압축하게 할 수 있습니다.
+많은 사람이 자료를 많이 수집한 후, 가장 어려운 것은 문제를 정말로 명확한 한 문장으로 수렴하는 것입니다. 조사 노트를 AI에게 전달하여, 몇 가지 후보 문제 정의로 압축하도록 할 수 있습니다:
 
 ```text
-아래는 Discover 단계에서 모은 사용자 피드백과 조사 메모야.
+다음은 Discover 단계에서 수집한 사용자 피드백과 조사 노트입니다:
 [내용 붙여넣기]
 
-다음 세 가지를 도와줘.
-1. 가장 자주 나타나는 문제 패턴을 요약
-2. 문제 빈도, 고통감, 검증 가능성을 기준으로 우선 해결할 가치가 있는 문제 3개 정리
+세 가지 일을 해 주세요:
+1. 가장 자주 나타나는 문제 패턴을 정리
+2. 문제 빈도, 고통 정도, 검증 가능성에 따라, 우선적으로 해결할 가치가 있는 문제 3개를 정리
 3. 각 문제를 구체적인 문제 정의 한 문장으로 작성
 ```
 
-이렇게 하면 "문제가 너무 많다"에 머무르지 않고 Define으로 들어가기 쉬워집니다.
+이렇게 하면 "문제가 많다"는 상태에 머물지 않고 Define에 더 쉽게 진입할 수 있습니다.
 
-입력을 아주 간단하게 써도 됩니다.
+입력을 아주 간단하게 쓸 수도 있습니다:
 
 ```text
-지금 모은 문제는 이거야.
-1. 다들 이력서에 무엇을 써야 할지 모름
-2. 다들 어떻게 고쳐야 할지 모름
-3. 다들 잘 고친 건지 확신하지 못해 지원을 망설임
+내가 지금 수집한 문제는 다음과 같습니다:
+1. 다들 이력서에 뭘 써야 할지 모름
+2. 다들 어떻게 수정해야 할지 모름
+3. 다들 수정이 안 된 것 같아서, 지원을 못 함
 
-첫 버전에서 어떤 문제를 먼저 해결하는 게 가장 적합한지 봐 줘.
+첫 번째 버전에서 가장 먼저 해결할 문제가 무엇인지 봐 주세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
-우선 해결을 추천하는 문제:
+우선적으로 해결할 것을 권장하는 문제:
 
-"처음 인턴십에 지원하는 학생은 이력서가 이미 지원 가능한 수준인지 확신하지 못해 반복 수정하고 지원을 미룬다."
+"처음으로 인턴십에 지원하는 학생이, 이력서가 이미 지원 가능한 수준에 도달했는지 확신하지 못해, 반복적으로 수정하며 지원을 미룸."
 
 이유:
-1. 문제가 더 구체적이다.
-2. 지연 행동을 설명할 수 있다.
-3. 작은 버전을 설계해 검증하기 쉽다.
+1. 이 문제가 더 구체적임
+2. 지연 행동을 설명할 수 있음
+3. 작은 버전을 설계하여 검증하기 더 쉬움
 ```
 
-이런 출력은 유용합니다. 흐릿한 문제들 속에서 MVP 출발점에 가까운 정의 하나를 수렴하게 해 주기 때문입니다.
+이런 출력은 매우 유용합니다. 왜냐하면 많은 모호한 문제에서 MVP 출발점에 더 가까운 정의를 수렴해 주기 때문입니다.
 
-### 11.3 Develop 단계에서 AI로 여러 솔루션 발산하기
+### 11.3 Develop 단계: AI로 여러 솔루션 발산
 
-많은 사람은 문제를 정의하자마자 머릿속에 처음 떠오른 솔루션만 바라봅니다. 이 단계에서 AI는 강제로 발산시키는 데 매우 적합합니다.
+많은 사람이 문제를 정의한 후, 머릿속에 가장 먼저 떠오른 솔루션만 바라봅니다. AI는 이 단계에서 강제 발산을 도와주기에 매우 적합합니다:
 
 ```text
-핵심 문제를 이렇게 정의했어: [문제 정의]
-최종 답을 하나만 주지 말고, 아래 각도에서 2~3가지 해결 방향을 제안해 줘.
+핵심 문제를 정의했습니다: [문제 정의]
+최종 답을 바로 주지 말고, 다음 관점에서 각각 2~3가지 해결 방향을 제시해 주세요:
 1. 가장 가벼운 MVP
-2. 수요 검증에 가장 적합한 방안
-3. 경험 개선에 가장 적합한 방안
-4. AI에 의존하지 않는 방안
-5. AI에 의존하는 방안
-마지막에는 각 방안의 장점, 위험, 검증 비용을 비교해 줘.
+2. 수요를 검증하기에 가장 적합한 솔루션
+3. 경험을 개선하는 데 가장 적합한 솔루션
+4. AI에 의존하지 않는 솔루션
+5. AI에 의존하는 솔루션
+마지막으로 각 솔루션의 장점, 위험, 검증 비용을 비교해 주세요.
 ```
 
-이렇게 하면 너무 일찍 하나의 솔루션에 묶이지 않게 됩니다.
+이렇게 하면 너무 일찍 단일 솔루션에 갇히지 않습니다.
 
-간단한 입력은 이렇게 쓸 수 있습니다.
+간단한 입력은 다음과 같을 수 있습니다:
 
 ```text
-현재 문제 정의는 이거야.
-"대학생은 이력서가 이미 지원 가능한지 확신하지 못해 계속 미루고 있다."
+내 문제 정의는 다음과 같습니다:
+"대학생이 이력서가 이미 지원할 수 있는지 확신하지 못해, 계속 지원을 미룸."
 
-서로 다른 해결책 4가지를 생각해 줘. 하나만 주지 마.
+4가지 다른 솔루션을 생각해 주세요. 한 가지만 주지 마세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
-방안 1: 이력서 지원 가능 체크리스트
-방안 2: 직무 설명에 맞춘 맞춤형 문장 개선
-방안 3: 사용자가 이력서를 업로드하면 위험 알림 제공
-방안 4: 우수 사례 대조를 제공해 사용자가 차이를 판단하도록 도움
+솔루션 1: 이력서 지원 가능 체크리스트
+솔루션 2: 공고 설명에 따른 맞춤형 재작성
+솔루션 3: 사용자가 이력서를 업로드하면 위험 신호를 제시
+솔루션 4: 우수 사례 대조를 제공하여 사용자가 격차를 판단하도록 도움
 ```
 
-이때부터 "솔루션 비교"로 들어가기 쉬워지고, 처음부터 AI 문장 개선 하나만 바라보지 않게 됩니다.
+이때 "솔루션 비교"에 더 쉽게 진입할 수 있으며, 처음부터 AI 재작성이라는 한 방향만 바라보지 않게 됩니다.
 
-### 11.4 Deliver 단계에서 AI로 프로토타입 문구와 테스트 자료 생성하기
+### 11.4 Deliver 단계: AI로 프로토타입 카피와 테스트 자료 생성
 
-Deliver 단계에 들어가면 AI는 다음 작업을 빠르게 처리하는 데 매우 적합합니다.
+Deliver 단계에 진입하면, AI는 다음 작업을 가속화하는 데 매우 적합합니다:
 
-- 저충실도 프로토타입의 페이지 문구 생성
+- 저해상도 프로토타입의 페이지 카피 생성
 - 사용자 테스트 스크립트 정리
-- 비교 가능한 여러 버전의 제목, 버튼, 설명문 생성
+- 비교 가능한 여러 버전의 제목, 버튼, 설명어 생성
 - 테스트 후 피드백과 문제 목록 정리
 
-예를 들어 AI에게 20분 사용자 테스트 스크립트를 만들게 하거나, 사용자 5명의 피드백을 "계속 진행 / 방향 수정 / 중단" 판단 근거로 정리하게 할 수 있습니다.
+예를 들어 AI에게 20분 사용자 테스트 스크립트를 생성하거나, 5명의 사용자 피드백을 "계속 진행/방향 수정/일시 중지"의 판단 근거로 정리하도록 할 수 있습니다.
 
-가장 작은 입력 예시는 다음입니다.
+최소 입력은 다음과 같을 수 있습니다:
 
 ```text
-아주 간단한 프로토타입을 만들었어.
-사용자가 이력서를 업로드하면, 시스템이 어떤 부분이 아직 지원하기에 적합하지 않은지 알려 줘.
+아주 간단한 프로토타입을 만들었어요:
+사용자가 이력서를 업로드하면, 어느 부분이 아직 지원에 부적합한지 알려줘요.
 
-15분짜리 사용자 테스트 스크립트를 만들어 줘.
+15분 사용자 테스트 스크립트를 생성해 주세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
 15분 테스트 스크립트:
 
-1. 먼저 사용자에게 최근 이력서 지원 경험을 설명하게 한다.
-2. 사용자가 독립적으로 이력서 업로드를 완료하게 한다.
-3. 피드백 결과를 이해하는지 관찰한다.
-4. 질문: 이 안내 중 어떤 것이 가장 도움이 되고, 어떤 것이 헷갈렸나요?
-5. 질문: 다음 지원 전에 다시 쓰고 싶나요?
+1. 먼저 사용자에게 최근 이력서 제출 경험을 설명해 달라고 요청
+2. 사용자가 독립적으로 이력서 업로드를 완료하게 함
+3. 피드백 결과를 이해할 수 있는지 관찰
+4. 질문: 이 안내 중 어떤 것이 가장 도움이 되었고, 어떤 것이 혼란스러웠는지
+5. 질문: 다음에 제출하기 전에 다시 사용하고 싶은지
 ```
 
-이 출력은 실용적입니다. "프로토타입을 만들었다"에서 "다음에는 어떻게 테스트할까"로 넘어가게 해 주기 때문입니다.
+이런 출력은 매우 실용적입니다. 왜냐하면 "프로토타입을 완성했다"에서 "다음에 어떻게 테스트할지"까지 나아갈 수 있게 해주기 때문입니다.
 
-### 11.5 AI에게 "단계 문지기" 역할을 맡기기
+### 11.5 AI를 "단계 수문원"으로 활용
 
-Double Diamond에서 가장 흔한 문제는 사람이 단계를 건너뛰는 것입니다. AI에게 직접 문지기 역할을 맡겨 현재 어느 단계에 있는지 알려 달라고 할 수 있습니다.
+Double Diamond 모델의 가장 흔한 문제는 단계를 건너뛰는 것입니다. AI에게 직접 수문원 역할을 맡겨, 지금 정확히 어느 단계에 있는지 상기시키도록 할 수 있습니다:
 
 ```text
-제품 프로세스 코치 역할을 해 줘.
-아래는 현재 내 프로젝트 상태야: [설명]
-내가 지금 Discover, Define, Develop, Deliver 중 어디에 더 가까운지 판단해 줘.
-그리고 알려 줘.
-1. 내가 너무 일찍 다음 단계로 넘어갔는지
-2. 현재 단계에서 가장 보충해야 할 행동은 무엇인지
-3. 지금은 먼저 하지 말아야 할 일은 무엇인지
+제품 프로세스 코치 역할을 해 주세요.
+다음은 내 현재 프로젝트 상태입니다: [설명]
+지금 내가 Discover, Define, Develop, Deliver 중 어느 단계에 더 가까운지 판단해 주세요.
+그리고 알려 주세요:
+1. 내가 너무 일찍 다음 단계로 건너뛰었는지
+2. 현재 단계에서 가장 보완해야 할 행동은 무엇인지
+3. 지금 하지 말아야 할 일은 무엇인지
 ```
 
-초보자에게 특히 유용합니다. "문제를 아직 명확히 생각하지 않았는데 프로토타입을 그리기 시작하는" 일이 매우 쉽게 일어나기 때문입니다.
+이것은 초보자에게 특히 도움이 됩니다. 왜냐하면 "문제를 아직 명확히 생각하지 않았는데 프로토타입을 그리기 시작하는" 경우가 매우 흔하기 때문입니다.
 
-## 📚 Assignments
+## 📚 과제
 
-위 내용을 바탕으로 다음 과제를 완료하세요.
+위 내용을 바탕으로 다음 과제를 완료해 주세요:
 
-1. 최근 만들고 싶은 제품 아이디어 하나를 고르고, Discover, Define, Develop, Deliver 네 단계 초안을 작성하세요.
-2. Define 단계에서 문제를 구체적인 한 문장으로 강제로 줄이세요.
-3. Develop 단계에서 처음 떠오른 방법 하나만 바라보지 말고, 최소 3가지 다른 방안을 나열하세요.
-4. Deliver 단계에서 일주일 안에 전달 가능한 최소 검증 버전을 작성하세요.
+1. 최근에 만들고 싶은 제품 아이디어를 하나 골라, Discover, Define, Develop, Deliver 4단계의 초안을 작성하세요
+2. Define 단계에서, 문제를 구체적인 한 문장으로 줄이도록 강제하세요
+3. Develop 단계에서, 최소 3가지 다른 솔루션을 나열하고, 가장 먼저 떠오른 방법만 바라보지 마세요
+4. Deliver 단계에서, 1주일 이내에 전달할 수 있는 최소 검증 버전을 하나 작성하세요
 
-## 더 읽어 보기
+## 더 읽어볼 만한 자료
 
-이 글은 주로 Design Council의 Double Diamond 공식 자료를 참고했습니다. 이어서 보기 좋습니다.
+이 글은 주로 Design Council의 Double Diamond 공식 자료를 참고했습니다. 계속 읽어보세요:
 
 - [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
 - [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
 - [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
-
diff --git a/docs/ko-kr/stage-1/appendix-idea-sources/index.md b/docs/ko-kr/stage-1/appendix-idea-sources/index.md
index 52bd5a1..479f161 100644
--- a/docs/ko-kr/stage-1/appendix-idea-sources/index.md
+++ b/docs/ko-kr/stage-1/appendix-idea-sources/index.md
@@ -11,171 +11,171 @@ const duration = '약 <strong>1.5시간</strong>'
 
 <a id="top-idea-sources"></a>
 
-## 본 장 안내
+## 이 장의 가이드
 
 <ChapterIntroduction
   :duration="duration"
-  :tags="['아이디어 찾기', '제품 방향', '수요 발견', '산업 관찰']"
-  coreOutput="더 구체적이고 계속 조사할 만한 제품 방향 1개"
-  expectedOutput="어디를 훑고, 어떻게 보고, 무엇을 먼저 봐야 하는지 알게 되어 더 이상 'AI + 어떤 산업'처럼 빈 생각만 남기지 않기"
+  :tags="['아이디어 찾기', '제품 방향', '니즈 발견', '업계 관찰']"
+  coreOutput="더 구체적이고 계속 조사해 볼 가치가 있는 제품 방향 1개"
+  expectedOutput="어디서 훑어야 할지, 어떻게 봐야 할지, 먼저 무엇을 봐야 할지 알게 되어, 'AI + 특정 산업' 같은 막연한 생각에만 머물지 않게 됩니다"
 >
 
-많은 사람이 첫 단계에서 막힙니다. 완전히 영감이 없어서가 아니라, 많은 내용을 훑고 나서도 머릿속에 남는 것이 여전히 큰 단어뿐이기 때문입니다.
+많은 사람들이 첫 번째 단계에서 막히는 것은 영감이 전혀 없어서가 아니라, 많은 콘텐츠를 훑은 후에도 머릿속에 남는 것은 여전히 큰 단어뿐이기 때문입니다:
 
 - AI for education
 - AI for healthcare
 - AI for finance
 - AI agent for business
 
-이것들은 아직 아이디어가 아닙니다. 단지 "방향이 크다"는 것을 알려 줄 뿐, 다음을 알려 주지 않습니다.
+이것들은 아직 아이디어가 아닙니다. 그것들은 단지 "방향이 크다"는 것만 말해 줄 뿐, 다음을 알려주지 않습니다:
 
-- 누가 쓰는지
-- 어떤 장면에서 쓰는지
-- 지금은 어떻게 임시로 해결하고 있는지
-- 어느 단계를 먼저 잘라 들어갈 가치가 있는지
+- 누가 사용하는지
+- 어떤 시나리오에서 사용하는지
+- 지금 어떻게 대충 하고 있는지
+- 어느 단계를 먼저 공략하는 것이 가장 가치 있는지
 
-이 글은 공허한 방법론을 말하지 않습니다. 바로 쓰기 좋은 출처들을 정리해 드립니다.
+이 글은 공허한 방법론을 다루지 않고, 바로 사용할 수 있는 더 나은 출처들을 정리해 드립니다.
 
 </ChapterIntroduction>
 
 ::: info 최소 SOP
-**목적**: 읽고 나면 아이디어가 없을 때 먼저 어디를 훑어야 하는지, 어떤 링크가 "구체적인 수요"를 보기에 적합한지, 어떤 링크가 "트렌드"를 보기에 적합한지, 어떤 링크가 "실제 비즈니스"를 보기에 적합한지 알게 됩니다.
+**목적**: 이 글을 읽은 후, 아이디어가 없을 때 어디서 훑어야 할지, 어떤 링크가 "구체적인 니즈"에 적합한지, 어떤 것이 "트렌드"에 적합한지, 어떤 것이 "실제 비즈니스"에 적합한지 알게 됩니다.
 
-**행동 항목**: 먼저 idea 목록을 한 바퀴 훑고, 그다음 돈을 버는 작은 제품을 한 바퀴 봅니다. 이어서 트렌드와 더 비즈니스에 가까운 출처를 보고, 마지막에 계속 조사하고 싶은 방향 1개를 남깁니다.
+**실행 항목**: 먼저 idea 목록을 한 바퀴 훑고, 수익 내는 소규모 제품을 한 바퀴 보고, 트렌드와 더 비즈니스에 가까운 출처를 본 다음, 계속 조사해 보고 싶은 방향 1개를 남깁니다.
 
-**결과**: 큰 단어에 머무르지 않고, 더 구체적이고 계속 검증할 만한 방향 1개를 얻습니다.
+**결과**: 큰 단어에 머물지 않고, 더 구체적이고 검증해 볼 가치가 있는 방향 1개를 얻게 됩니다.
 
-**키워드 이동**: [참고 앱 목록](#idea-apps) · [트렌드 출처](#idea-trends) · [더 비즈니스에 가까운 출처](#idea-business) · [VC / 액셀러레이터 출처](#idea-vc) · [최단 경로](#idea-path) · [AI는 어떻게 도와줄 수 있나](#idea-ai)
+**키워드 바로가기**: [참고 앱 목록](#idea-apps) · [트렌드 출처](#idea-trends) · [더 비즈니스에 가까운 출처](#idea-business) · [VC / 가속기 출처](#idea-vc) · [최단 경로](#idea-path) · [AI가 어떻게 도와줄 수 있는지](#idea-ai)
 :::
 
 ## 다음 내용을 배우게 됩니다
 
 1. 어떤 웹사이트가 idea를 바로 훑기에 적합한지
-2. 어떤 웹사이트가 이미 돈을 버는 작은 제품을 보기에 적합한지
-3. 어떤 출처가 트렌드와 산업 변화를 보기에 적합한지
-4. 어떤 출처가 실제 비즈니스와 실제 지불에 더 가까운지
-5. 제로 베이스에 적합한 가장 짧은 사용 경로
+2. 어떤 웹사이트가 이미 수익을 내는 소규모 제품을 보기에 적합한지
+3. 어떤 출처가 트렌드와 업계 변화를 보기에 적합한지
+4. 어떤 출처가 실제 비즈니스와 실제 결제에 더 가까운지
+5. 제로 베이스에게 적합한 최단 사용 경로 1가지
 
 <a id="idea-apps"></a>
-## [1. 참고 앱 목록: 먼저 다른 사람이 이미 무엇을 하고 있는지 보기](#top-idea-sources)
+## [1. 참고 앱 목록: 먼저 남들이 이미 무엇을 하고 있는지 보기](#top-idea-sources)
 
 이것은 초보자에게 가장 적합한 출발점입니다. 가장 구체적이기 때문입니다.
 
-### 1군: 열자마자 idea 목록이 나오고 바로 고를 수 있는 곳
+### 1티어: 열면 바로 idea 목록, 바로 고르기
 
 - [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
-  이 subreddit의 핵심 용도는 실제 사용자가 직접 "누가 XX 하나 만들어 줬으면 좋겠다"를 올리는 것입니다. 각 게시물은 보통 구체적인 제품 수요 하나이고, 약간의 상황 설명도 포함합니다. 들어간 뒤 `Top -> Past Month` 또는 `Top -> Past Year`로 정렬하면 20분 만에 실제 수요를 한 묶음 훑을 수 있습니다.
+  이 subreddit의 핵심 용도는: 실제 사용자가 "누군가 XX를 만들어 주면 좋겠다"고 바로 게시하는 것입니다. 각 게시물은 보통 하나의 구체적인 제품 니즈이며, 약간의 시나리오 설명도 포함합니다. 들어간 후 `Top -> Past Month` 또는 `Top -> Past Year`로 정렬하면 20분 만에 실제 니즈를 한 무더기 훑을 수 있습니다.
 - [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
-  위와 비슷하지만 소프트웨어/App 쪽에 더 가깝습니다. 게시물의 흔한 형식은 "XX를 할 수 있는 앱이 필요하다"이고, 입도가 더 작으며 작지만 아름다운 niche가 많습니다.
+  위와 비슷하지만 소프트웨어/App에 더 치중합니다. 게시물의 일반적인 형식은 "XX를 할 수 있는 앱이 필요해"이며, 세분화 수준이 더 작고 대부분 작고 아름다운 니치입니다.
 - [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
-  앞의 두 곳보다 더 완전합니다. 많은 게시물이 한 문장짜리 수요에 그치지 않고, 약간의 시장 분석, 비즈니스 모델, 왜 지금 할 만한지까지 포함합니다.
+  앞의 두 개보다 더 완전합니다. 많은 게시물이 한 줄짜리 니즈가 아니라 시장 분석, 비즈니스 모델, 왜 지금 할 가치가 있는지에 대한 내용도 포함합니다.
 - [Unvalidated Ideas](https://unvalidatedideas.com/)
-  검증되지 않은 창업 idea를 매주 발행합니다. 흔한 필드는 타깃 사용자, 수익화 방식, 초기 검증 아이디어입니다. 형식이 통일되어 있어 빠르게 훑기 좋습니다.
+  매주 검증되지 않은 창업 idea를 발행합니다. 일반적으로 대상 사용자, 수익화 방식, 초기 검증 아이디어 등의 필드가 포함됩니다. 형식이 통일되어 있어 빠르게 훑기에 적합합니다.
 - [IdeasAI](https://ideasai.com/)
-  AI로 창업 idea를 생성하며 계속 넘겨 볼 수 있습니다. 품질은 불안정하지만, "아무 감이 없을 때" 영감을 자극하고 다시 세부 장면으로 파고들기에 좋습니다.
+  AI로 창업 idea를 생성하며, 계속 훑을 수 있습니다. 품질이 일정하지 않지만, "아무 감도 없을 때" 영감을 자극하는 데 매우 적합하며, 이후 스스로 세부 시나리오를 파고들면 됩니다.
 
-### 2군: 다른 사람이 이미 하고 있는 돈 되는 작은 제품을 보고 idea를 역추적하기
+### 2티어: 남들이 이미 만들어서 수익 내는 소규모 제품 보고, idea 역추론하기
 
-이런 플랫폼의 논리는 이렇습니다. 다른 사람이 이미 수요를 검증했고, 심지어 돈도 벌고 있습니다. 이것들을 보는 이유는 베끼기 위해서가 아니라, "어떤 작은 문제가 이미 유료로 해결되고 있는지" 보기 위해서입니다.
+이런 플랫폼의 논리는: 남이 이미 니즈를 검증했고, 심지어 이미 수익을 내고 있다는 것입니다. 이것들을 보는 것은 베끼기 위해서가 아니라 "어떤 작은 문제에 이미 누군가 돈을 지불하고 있는지" 보기 위해서입니다.
 
 - [Starter Story](https://www.starterstory.com/)
-  실제 작은 비즈니스 사례를 많이 수록합니다. 보통 창업자 인터뷰, 매출 데이터, 시작 과정이 있습니다. 월수입 1만~10만 달러 수준의 작은 제품을 중점적으로 보세요. 보통 더 niche하고, 일반인이 이해할 수 있는 제품 규모에 더 가깝습니다.
+  많은 실제 소규모 비즈니스 사례를 수록하고 있으며, 보통 창업자 인터뷰, 수익 데이터, 시작 과정이 포함됩니다. 월 수익 1만~10만 달러의 소규모 제품에 주목하세요. 보통 더 니치하고, 일반인이 이해할 수 있는 제품 규모에 더 가깝습니다.
 - [Indie Hackers — Products](https://www.indiehackers.com/products)
-  독립 개발자가 제품을 보여 주는 곳입니다. 많은 제품이 수익과 성장을 공개합니다. 수익 순으로 정렬해 월수입 수천~수만 달러 제품들이 어떤 구체적 문제를 해결하는지 봅니다.
+  인디 개발자가 제품을 전시하는 곳으로, 많은 경우 수익과 성장을 공개합니다. 수익순으로 정렬하여 월 수익 수천~수만 달러 제품들이 어떤 구체적인 문제를 해결하고 있는지 보세요.
 - [MicroConf Blog](https://microconf.com/blog)
-  Micro SaaS 쪽에 가깝습니다. "충분히 작지만 누군가 돈을 낼 의향이 있는" 제품 진입점을 보기에 적합합니다.
+  Micro SaaS에 편중되어 있습니다. "충분히 작지만, 누군가 돈을 지불할 의향이 있는" 제품 진입점을 보기에 적합합니다.
 - [1000 Tools](https://1000.tools/)
-  AI 도구 모음 사이트입니다. 어떤 카테고리가 이미 만들어졌지만 완성도가 아쉬운지, 또는 국내/특정 수직 산업에서 아직 잘 커버되지 않은 방향이 무엇인지 보기에 좋습니다.
+  AI 도구 집합 사이트입니다. 어떤 카테고리에 이미 누군가 만들었지만 보통 수준인지, 또는 어떤 방향이 국내/특정 수직 산업에서 아직 잘 커버되지 않았는지 보기에 적합합니다.
 - [Product Hunt](https://www.producthunt.com/)
-  최근 반복해서 등장하는 제품 유형을 봅니다. 1위만 보지 말고, 어떤 카테고리가 계속 만들어지지만 아직 명확한 승자가 없는지에 집중하세요.
+  최근에 반복적으로 등장하는 제품 유형을 보세요. 1위만 주시하지 말고, 어떤 카테고리가 계속해서 누군가 만들고 있지만 뚜렷한 승자가 없는지에 주목하세요.
 - [BetaList](https://betalist.com/)
   초기 제품과 아직 방향을 시험 중인 팀을 보기에 적합합니다.
 
-### 제품을 볼 때는 제품 자체만 보지 말고, 낮은 평점과 "대행 서비스"도 보세요
+### 제품을 볼 때, 제품 자체만 보지 말고 부정적인 리뷰와 "대행 서비스"도 보세요
 
 - [G2](https://www.g2.com/)
-  사용법: 1점, 2점 리뷰를 봅니다. 낮은 평점에는 보통 "기존 제품의 어느 단계가 제대로 되지 않는지"가 숨어 있습니다.
+  활용법: 1성, 2성 평가를 보세요. 부정적인 리뷰에는 보통 "기존 제품이 어느 부분을 잘못했는지"가 숨어 있습니다.
 - [Capterra](https://www.capterra.com/)
-  사용법: G2와 비슷합니다. SaaS 제품의 실제 불평을 보기에 적합합니다.
-- 타오바오 / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhu Bajie
-  사용법: "대행", "대신 정리", "대신 입력", "대신 녹취", "대신 변환" 같은 키워드를 검색합니다. 어떤 수작업 서비스가 잘 팔린다면, 그 뒤에는 대개 반복 가능하고 제품화 가능한 프로세스가 있습니다.
+  활용법: G2와 비슷하게 SaaS 제품의 실제 불만을 보기에 적합합니다.
+- 타오바오 / 셴위 / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / 주바지에
+  활용법: "대행", "대신 정리", "대신 입력", "대신 전사"를 검색하세요. 어떤 수작업 서비스가 잘 팔린다면, 그 배후에는 보통 반복 가능하고 제품화할 수 있는 프로세스가 있습니다.
 
-판단 신호는 단순합니다.
+신호 판단은 간단합니다:
 
-- 사용자가 기존 도구를 이미 불평하고 있다.
-- 사용자가 이미 돈을 내고 누군가에게 대행을 맡기고 있다.
-- 사용자가 이 프로세스에 많은 인력과 시간을 투입하고 있다.
+- 사용자가 이미 기존 도구에 불만을 가지고 있음
+- 사용자가 이미 돈을 지불하고 다른 사람에게 대행을 맡기고 있음
+- 사용자가 이미 이 프로세스에 많은 인력과 시간을 투입하고 있음
 
-### 4군: 영상 보기. 누군가가 직접 idea를 분해해 준다
+### 4티어: 영상 보기, 누군가 직접 idea를 분석해 주는 콘텐츠
 
-포럼이나 순위를 훑는 것을 좋아하지 않고 "누군가 생각의 흐름을 대신 풀어 주면 좋겠다"면 영상과 팟캐스트도 적합합니다.
+포럼이나 랭킹을 훑는 것보다 "누군가 내 생각을 정리해 주는" 영상이나 팟캐스트를 선호한다면, 이것도 매우 적합합니다.
 
 - `Greg Isenberg startup ideas` 검색
-  누군가가 구체적인 idea 2~3개를 직접 분해하고, 시장 규모, 경쟁 분석, 진입점을 함께 설명하는 콘텐츠를 보기에 좋습니다.
+  구체적인 idea 2~3개를 직접 분석해 주며, 시장 규모, 경쟁 분석, 진입점도 함께 설명합니다.
 - `My First Million podcast` 검색
-  두 진행자가 자주 한 회 전체를 비즈니스 idea 브레인스토밍에 씁니다. 밀도가 높고 매우 구체적인 niche가 자주 나옵니다.
+  두 진행자가 종종 한 에피소드 전체를 비즈니스 idea 브레인스토밍에 사용합니다. 밀도가 높고, 매우 구체적인 니치가 자주 등장합니다.
 - `YC startup ideas` 또는 `Michael Seibel startup ideas` 검색
-  초보자에게 적합합니다. 내용이 직설적이고, 방향을 고르는 법을 바로 설명하는 경우가 많습니다.
+  초보자에게 적합하며, 내용이 직관적이고 방향 선택 방법을 직접 설명하는 경우가 많습니다.
 
 <a id="idea-trends"></a>
 ## [2. 트렌드 출처: 어떤 방향이 떠오르고 있는지 보기](#top-idea-sources)
 
-트렌드 사이트의 역할은 직접 아이디어를 주는 것이 아니라, 어떤 방향이 뜨거워지고 있는지, 계속 볼 가치가 있는지 판단하게 도와주는 것입니다.
+트렌드 사이트의 역할은 직접 아이디어를 주는 것이 아니라, 특정 방향이 상승하고 있는지, 계속 살펴볼 가치가 있는지 판단하는 데 도움을 주는 것입니다.
 
 - [Exploding Topics](https://explodingtopics.com/)
-  빠르게 성장하지만 아직 주류 시야에 완전히 들어오지 않은 주제와 제품 카테고리를 데이터로 추적합니다. "떠오르고 있지만 아직 지나치게 붐비지는 않은" 방향을 보기에 적합합니다.
+  데이터로 성장이 빠르지만 아직 주류에 진입하지 않은 주제와 제품 카테고리를 추적합니다. "떠오르고 있지만 아직 특별히 붐비지 않은" 방향을 보기에 적합합니다.
 - [Google Trends](https://trends.google.com/)
-  키워드를 검색해 지난 1년의 추세선을 보고, "관련 검색어"의 "급상승" 단어를 봅니다.
+  키워드를 검색하여 지난 1년간의 트렌드 선을 보고, "관련 검색어"에서 "급증" 단어를 확인합니다.
 - [Glimpse](https://meetglimpse.com/)
   Google Trends와 비슷합니다.
-- 산업 연구 보고서 요약 페이지
-  이미 방향이 있고, 이 방향이 산업 안에서 어떤 위치에 있는지 빠르게 보고 싶을 때 적합합니다.
+- 업계 리서치 보고서 요약 페이지
+  이미 방향이 있고, 그 방향이 업계에서 어떤 위치인지 빠르게 보고 싶을 때 적합합니다.
 - McKinsey / BCG / Gartner의 트렌드 콘텐츠
-  기업과 큰 산업 관점에 더 가깝습니다. B2B, 산업, 전통 업종에 적합합니다.
+  기업과 대규모 산업 관점에 더 치중되어, B2B, 산업, 전통 산업에 적합합니다.
 - [State of AI Report](https://www.stateof.ai/)
-  방향이 AI 기술 자체와 관련 있다면, 이런 연례 보고서가 큰 그림을 잡는 데 좋습니다.
+  방향이 AI 기술 자체와 관련이 있다면, 이런 연례 보고서는 큰 그림을 구축하는 데 매우 적합합니다.
 
-트렌드를 볼 때는 세 가지만 중점적으로 봅니다.
+트렌드를 볼 때 다음 세 가지만 집중하세요:
 
-- 이 단어가 지속적으로 뜨거워지고 있는가
-- 어떤 구체적 장면에 놓이는가
-- 누가 가장 먼저 시간, 전환 비용, 예산을 지불할 것인가
+- 이 단어가 지속적으로 상승하고 있는지
+- 그것이 어떤 구체적인 시나리오에 해당하는지
+- 누가 가장 먼저 시간, 전환 비용 또는 예산을 지불할 것인지
 
 <a id="idea-business"></a>
-## [3. 더 비즈니스에 가까운 출처: 누가 돈을 쓰고, 누가 불평하고, 누가 수작업 서비스를 파는지 보기](#top-idea-sources)
+## [3. 더 비즈니스에 가 가까운 출처: 누가 돈을 쓰는지, 누가 불만을 가지고 있는지, 누가 수작업 서비스를 파는지 보기](#top-idea-sources)
 
-"멋있어 보이는" 방향이 아니라 "실제 비즈니스에 더 가까운" 방향을 찾고 싶다면, 워크플로우에 더 가까운 출처를 봐야 합니다.
+"멋지게 들리는" 방향이 아니라 "실제 비즈니스에 더 가까운" 방향을 찾고 싶다면, 워크플로에 더 가까운 출처를 봐야 합니다.
 
 ### 누가 실제로 무엇에 돈을 쓰는지 보기
 
-- [중국정부조달망](https://www.ccgp.gov.cn/)
-  사용법: "스마트 건설 현장", "실험실 관리 시스템", "데이터 수집", "진료소 관리", "견적 시스템" 같은 단어를 검색해 예산, 기술 요구사항, 사용 장면을 봅니다.
-- 각 성/시 공공자원 거래센터
-  사용법: 지방 정부와 국유기업이 실제로 어떤 시스템을 구매하는지 봅니다.
-- 비표망 / 천리마 입찰망 / 표사통
-  사용법: 기업 측 구매 수요와 자주 등장하는 시스템 유형을 봅니다.
+- [중국 정부 조달망](https://www.ccgp.gov.cn/)
+  활용법: "스마트 건설 현장", "실험실 관리 시스템", "데이터 수집", "진료소 관리", "견적 시스템" 같은 단어를 검색하여 예산, 기술 요구사항, 사용 시나리오를 확인합니다.
+- 각 성/시 공공자원거래센터
+  활용법: 지방 정부와 국유 기업이 실제로 어떤 시스템을 구매하는지 확인합니다.
+- 비바오왕 / 천리마 입찰망 / 비아시통
+  활용법: 기업 측의 조달 니즈와 고빈도 시스템 유형을 확인합니다.
 
-이 출처들의 강한 신호는 미래를 토론하는 것이 아니라, "오늘 이미 누군가 이 일에 돈을 쓰려 한다"는 사실을 드러낸다는 점입니다.
+이런 출처의 강력한 신호는: 미래를 논의하는 것이 아니라 "오늘 이미 누군가 이 일에 돈을 지불하고 있다"는 것을 보여준다는 것입니다.
 
-### 누가 실제로 무엇을 불평하는지 보기
+### 누가 실제로 무엇에 불만을 가지고 있는지 보기
 
-- 제조업: 기계 커뮤니티, 공업 제어 포럼
-- 의료: Dingxiangyuan, Yimaitong
-- 건축 / 공정: 토목온라인, Guanglianda 커뮤니티
-- 재무 / 회계: 중국회계시야 포럼
-- 무역: Fubu 외무 포럼, Miker Circle
-- 외식 / 리테일: 직업외식망, Lianshang 포럼
-- [Reddit](https://www.reddit.com/)의 수직 게시판: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
+- 제조업: 기계 커뮤니티, 공제어 제어 포럼
+- 의료: 딩샹위안, 이마이퉁
+- 건축 / 공학: 토목 온라인, 광리안다 커뮤니티
+- 재무 / 회계: 중국 회계 시야 포럼
+- 무역: 푸부 무역 포럼, 미케취안
+- 식음료 / 소매: 직업 식음료망, 연상망 포럼
+- [Reddit](https://www.reddit.com/)의 수직 섹션: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
 - [V2EX](https://www.v2ex.com/)
-- Jike
-- Xiaohongshu
+- 지커
+- 샤오홍슈
 
-검색할 때 "AI", "혁신"만 검색하지 마세요. 더 효과적인 검색어는 다음입니다.
+검색할 때 "AI", "혁신"만 검색하지 말고, 다음을 검색하는 것이 더 효과적입니다:
 
-- 너무 번거롭다
-- 더 좋은 방법 없나요
-- 도구 추천 부탁
-- Excel로는 관리가 안 된다
+- 너무 번거로워
+- 더 좋은 방법이 없을까
+- 도구 추천해 주세요
+- Excel로 감당이 안 돼
 - I wish there was
 - is there a tool for
 - I hate
@@ -184,104 +184,104 @@ const duration = '약 <strong>1.5시간</strong>'
 
 - [Fiverr](https://www.fiverr.com/)
 - [Upwork](https://www.upwork.com/)
-- Zhu Bajie
+- 주바지에왕
 - 타오바오
-- Xianyu
+- 셴위
 
-다음 서비스가 잘 팔리는 것을 보면 계속 조사할 가치가 있습니다.
+이런 서비스가 꽤 잘 팔린다면 계속 조사해 볼 가치가 있습니다:
 
-- PDF 견적서를 Excel로 정리해 주기
-- 고객 자료를 대량 정리해 주기
-- 이력서/문구 수정, 녹취, 아카이빙 대행
+- PDF 견적서를 Excel로 정리해 드립니다
+- 고객 자료를 일괄 정리해 드립니다
+- 이력서 / 카피 수정 / 전사 / 보관 대행
 
-이런 서비스 뒤에는 보통 일회성 수요가 아니라 반복적으로 발생하는 워크플로우가 있습니다.
+이런 서비스의 배후에는 보통 일회성 니즈가 아니라 반복적으로 발생하는 워크플로가 있습니다.
 
-### idea 목록만 보지 말고 전체 워크플로우를 보세요
+### idea 목록만 보지 말고 전체 워크플로 보기
 
-때로는 가장 직접적인 방법이 하나의 산업을 골라 프로세스를 한 번 훑고, 아직 WeChat, Excel, 종이와 펜, 전화에 의존하는 단계를 찾는 것입니다.
+때로는 가장 직접적인 방법은 하나의 산업을 골라 프로세스를 전부 살펴보고, 위챗, Excel, 종이와 펜, 전화로 아직 처리하는 단계를 찾는 것입니다.
 
-- 무역: 공급업체 찾기, 문의, 가격 비교, 견적서 만들기, 고객에게 보내기, 회신 추적, 검품 준비, 선적 예약, 통관.
-  볼 만한 진입점: 공급업체 견적을 고객용 견적서로 정리하기.
-- 치과: 접수, 촬영, 영상 판독, 치료 방안 소통, 후속 관리, 치료, 재진.
-  볼 만한 진입점: 환자에게 치료 방안을 설명하고 계속 후속 관리하기.
-- 건설 현장: 순찰, 사진 촬영, 단체 채팅방 공유, 보고서 정리, 발주처 제출.
-  볼 만한 진입점: 현장 사진에서 규정 준수 보고서까지.
+- 무역: 공급업체 찾기, 견적 요청, 가격 비교, 견적서 작성, 고객에게 발송, 답변 추적, 검수 주선, 선복 예약, 세관 신고.
+  주목할 만한 진입점: 공급업체 견적을 고객 견적서로 정리.
+- 치과 진료소: 접수, 촬영, 판독, 상담, 치료, 추적 관찰, 재진.
+  주목할 만한 진입점: 환자에게 치료 계획을 설명하고 지속적으로 추적 관리.
+- 건설 현장: 순찰, 사진 촬영, 그룹에 전송, 보고서 정리, 발주처에 전달.
+  주목할 만한 진입점: 현장 사진에서 컴플라이언스 보고서 작성.
 
 <a id="idea-vc"></a>
-## [4. VC / 액셀러레이터 출처: "파도가 어디로 치는지" 보기](#top-idea-sources)
+## [4. VC / 가속기 출처: "파도가 어디로 치는지" 보기](#top-idea-sources)
 
-이런 출처는 큰 방향을 찾는 데 적합하지만, 검증을 직접 대체하기에는 적합하지 않습니다.
+이런 출처는 큰 방향을 잡는 데 도움이 되지만, 직접 검증을 대체하기에는 적합하지 않습니다.
 
 - [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
-  사용법: 진입점을 찾기에 적합합니다. "우리는 누군가 이것을 만들기를 보고 싶다"고 직접 말하는 경우가 많기 때문입니다.
+  활용법: 진입점을 찾기에 적합합니다. "우리는 누군가 이것을 만들어 주길 원한다"고 직접 말하는 경우가 많기 때문입니다.
 - [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
-  사용법: 큰 트렌드와 분야 판단에 더 가깝습니다. 산업 감각을 만들기에 좋습니다.
+  활용법: 대규모 트렌드와 트랙 판단에 더 치중되어, 업계 감각을 구축하는 데 적합합니다.
 - [NFX](https://www.nfx.com/)
-  사용법: 창업 주제 묶음을 빠르게 훑기에 적합합니다.
+  활용법: 창업 주제 세트를 빠르게 훑기에 적합합니다.
 - [Sequoia Capital](https://www.sequoiacap.com/article/)
-  사용법: 반드시 아이디어를 직접 나열하지는 않지만, 어떤 플랫폼 변화와 기회를 설명하는 경우가 많습니다.
+  활용법: 직접 아이디어를 나열하지 않을 수도 있지만, 특정 유형의 플랫폼 변화와 기회를 자주 다룹니다.
 - [First Round Review](https://review.firstround.com/)
-  사용법: 특정 방향을 깊게 파기에 적합합니다. 반드시 아이디어 목록은 아니지만 글의 품질이 보통 높습니다.
+  활용법: 어떤 방향을 깊이 파고들기에 적합합니다. 아이디어 목록이 아닐 수도 있지만, 글의 질이 보통 매우 높습니다.
 
 이런 출처의 장점:
 
-- 앞으로 어떤 방향을 볼 만한지 알려 준다.
-- 어떤 트랙이 계속 추진될 가능성이 있는지 알려 준다.
-- 특정 트랙의 맥락에 빠르게 들어가게 해 준다.
+- 미래에 어떤 방향이 살펴볼 가치가 있는지 알려줄 수 있음
+- 어떤 트랙이 지속적으로 추진될 가능성이 있는지 알려줄 수 있음
+- 특정 트랙의 맥락에 빠르게 진입할 수 있게 해줌
 
 이런 출처의 한계:
 
-- 보통 투자자 관점이다.
-- 구체적으로 어떤 역할이 가장 아픈지 반드시 알려 주지는 않는다.
-- 어떤 프로세스 단계가 가장 막히는지 반드시 알려 주지는 않는다.
-- 오늘 누가 이미 이것에 돈을 쓰고 있는지 반드시 알려 주지는 않는다.
+- 보통 투자자 관점
+- 구체적으로 어떤 역할이 가장 고통스러운지 반드시 알려주지는 않음
+- 어떤 프로세스 단계가 가장 막히는지 반드시 알려주지는 않음
+- 오늘 누가 이미 이것에 돈을 지불하고 있는지 반드시 알려주지는 않음
 
-따라서 더 좋은 사용법은 이 출처들로 방향을 찾고, 다시 참고 제품, 산업 포럼, 조달 정보, 실제 워크플로우로 돌아가 더 구체적인 진입점을 찾는 것입니다.
+따라서 더 나은 활용법은: 먼저 방향을 잡기 위해 사용하고, 다시 참고 제품, 업계 포럼, 조달 정보와 실제 워크플로에서 더 구체적인 진입점을 찾는 것입니다.
 
 <a id="idea-path"></a>
-## [5. "아이디어는 없고 어시스턴트를 만들고 싶다는 것만 아는 사람"에게 가장 적합한 최단 사용 경로](#top-idea-sources)
+## [5. "아이디어가 없고 어시스턴트 만들기만 아는 사람"에게 가장 적합한 최단 사용 경로](#top-idea-sources)
 
-가장 짧은 경로 하나만 간다면 이렇게 하세요.
+최단 경로만 걷는다면 이렇게 하세요:
 
-1. 1단계, 30분.
-   [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)를 열고 `Top -> Past Year`로 정렬합니다. 게시물 50개를 빠르게 훑으며 "이건 내가 만들 수 있을 것 같다"고 느끼는 방향을 모두 저장합니다.
-2. 2단계, 30분.
-   [Starter Story](https://www.starterstory.com/) 또는 [Indie Hackers Products](https://www.indiehackers.com/products)를 열어 수익 순으로 정렬합니다. 중간 정도 수익의 제품을 보세요. 가장 성공한 제품만 보지 마세요. 1단계와 관련 있는 방향을 찾아, 그들이 정확히 누구에게 팔고 어느 단계를 해결하는지 봅니다.
-3. 3단계, 20분.
-   [Google Trends](https://trends.google.com/)에서 관련 키워드를 검색해 추세가 성장 중인지 보고, "관련 검색어"의 급상승 단어를 봅니다.
-4. 4단계, 20분.
-   G2 / Capterra / 산업 포럼 / 입찰 플랫폼 / Fiverr 같은 곳에서 이 방향의 오늘 가장 짜증 나는 지점이 어디인지, 아직 어디가 수작업에 의존하는지 봅니다.
+1. 첫 번째 단계, 30분.
+   [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)를 열고 `Top -> Past Year`로 정렬하여 게시물 50개를 빠르게 훑고, "이건 내가 할 수 있을 것 같은" 방향을 모두 먼저 저장합니다.
+2. 두 번째 단계, 30분.
+   [Starter Story](https://www.starterstory.com/)나 [Indie Hackers Products](https://www.indiehackers.com/products)를 열고 수익순으로 정렬하여 중간 수익 제품을 보세요. 가장 성공한 것만 보지 마세요. 첫 번째 단계와 관련된 방향을 찾아, 그들이 구체적으로 누구에게 무엇을 파는지, 어느 단계를 해결하는지 보세요.
+3. 세 번째 단계, 20분.
+   [Google Trends](https://trends.google.com/)에서 관련 키워드를 검색하고, 트렌드가 성장하고 있는지 확인한 후 "관련 검색어"의 급증 단어를 보세요.
+4. 네 번째 단계, 20분.
+   G2 / Capterra / 업계 포럼 / 입찰 플랫폼 / Fiverr 같은 곳에서 이 방향이 오늘 어디가 가장 번거롭고, 어디가 여전히 수작업에 의존하는지 확인합니다.
 
-다 보고 나서 아래 문장을 명확히 말할 수 있으면 충분합니다.
+다 본 후 다음 문장을 명확하게 말할 수 있으면 충분합니다:
 
-- 어떤 유형의 사람이, 어떤 장면에서, 어느 프로세스 단계에 막혀 있고, 지금은 주로 어떤 서툰 방법으로 버티고 있다.
+- 특정 유형의 사람이, 특정 시나리오에서, 특정 프로세스 단계에 막혀 있고, 현재 주로 어떤 비효율적인 방법으로 버티고 있다.
 
 <a id="idea-ai"></a>
-## [6. AI는 어떻게 도와줄 수 있나](#top-idea-sources)
+## [6. AI가 어떻게 도와줄 수 있는지](#top-idea-sources)
 
-이 글의 중점은 AI가 아니지만, AI는 정리에 매우 적합합니다.
+이 글의 초점은 AI가 아니지만, AI는 정리에 매우 적합합니다.
 
-가장 실용적인 사용법은 두 가지뿐입니다.
+가장 실용적인 활용법은 두 가지뿐입니다:
 
-- 훑어 본 링크, 게시물 제목, 사용자의 원문을 AI에게 붙여 넣고 "사람군 / 장면 / 고통점 / 대체 방안"으로 분류하게 합니다.
-- AI에게 흩어진 정보를 후보 방향 3개로 수렴하게 합니다. 계속 기능 50개로 발산하게 하지 마세요.
+- 훑은 링크, 게시물 제목, 사용자의 원래 말을 AI에게 붙여넣어 "사용자군 / 시나리오 / 페인포인트 / 대체 방안"으로 분류해 달라고 요청하기
+- AI에게 흩어진 정보를 3개의 후보 방향으로 정리해 달라고 요청하고, 50개의 기능으로 계속 발산하지 않기
 
-바로 이렇게 물어볼 수 있습니다.
+이렇게 직접 물어볼 수 있습니다:
 
 ```text
-최근에 이런 출처들을 봤어.
-1. [제목이나 원문 붙여넣기]
-2. [제목이나 원문 붙여넣기]
-3. [제목이나 원문 붙여넣기]
+최근 다음 출처를 훑었습니다:
+1. [제목이나 원래 말 붙여넣기]
+2. [제목이나 원래 말 붙여넣기]
+3. [제목이나 원래 말 붙여넣기]
 
-기능 목록을 주지 마.
-딱 세 가지만 해 줘.
-1. 사람군과 장면별로 분류
-2. 반복해서 나타나는 번거로운 단계 찾기
-3. 더 구체적인 후보 방향 3개로 정리
+기능 목록은 주지 마세요.
+다음 세 가지만 해 주세요:
+1. 사용자군과 시나리오별로 분류
+2. 반복적으로 등장하는 번거로운 단계 찾기
+3. 3개의 더 구체적인 후보 방향으로 정리
 ```
 
-## 더 읽어 보기
+## 더 읽어볼 만한 자료
 
 - [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
 - [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
@@ -299,4 +299,3 @@ const duration = '약 <strong>1.5시간</strong>'
 - [Exploding Topics](https://explodingtopics.com/)
 - [G2](https://www.g2.com/)
 - [Capterra](https://www.capterra.com/)
-
diff --git a/docs/ko-kr/stage-1/appendix-jobs-to-be-done/index.md b/docs/ko-kr/stage-1/appendix-jobs-to-be-done/index.md
index a618d82..44f0dab 100644
--- a/docs/ko-kr/stage-1/appendix-jobs-to-be-done/index.md
+++ b/docs/ko-kr/stage-1/appendix-jobs-to-be-done/index.md
@@ -11,487 +11,486 @@ const duration = '약 <strong>1.5시간</strong>'
 
 <a id="top-jtbd"></a>
 
-## 본 장 안내
+## 이 장의 가이드
 
 <ChapterIntroduction
   :duration="duration"
-  :tags="['JTBD', '사용자 수요', '제품 사고', '수요 인사이트']"
-  coreOutput="실제 수요에 더 가까운 JTBD 문장 1개"
-  expectedOutput="흐릿한 아이디어를 더 구체적인 사용자 장면과 MVP 방향으로 수렴할 수 있음"
+  :tags="['JTBD', '사용자 니즈', '제품 사고', '니즈 인사이트']"
+  coreOutput="실제 니즈에 더 가까운 JTBD 문장 1개"
+  expectedOutput="모호한 아이디어를 더 구체적인 사용자 시나리오와 MVP 방향으로 수렴 가능"
 >
 
-많은 사람이 처음 제품을 만들 때 가장 쉽게 하는 실수는 모든 주의를 "내가 어떤 기능을 만들 것인가"에 두는 것입니다. 다른 제품에 지능형 분류가 있으면 나도 넣고 싶고, 자동 요약이 있으면 나도 붙이고 싶고, 다른 사람이 Agent, 멀티모달, 워크플로우를 만들면 나도 빼면 안 될 것 같습니다.
+많은 사람이 처음 제품을 만들 때, 가장 많이 하는 실수 중 하나는 주의를 전부 "어떤 기능을 만들지"에 집중하는 것입니다. 남이 스마트 분류를 하니까 나도 추가하고 싶고, 남이 자동 요약을 하니까 나도 연동하고 싶고, 남이 Agent, 멀티모달, 워크플로를 만들었으니 나도 빠지면 안 된다고 생각합니다.
 
-하지만 현실에서 사용자는 "이 기능 이름이 멋있어서" 제품을 쓰는 경우가 드뭅니다. 그들은 더 자주 어떤 구체적인 순간에 어떤 일을 앞으로 밀고 싶어 합니다. 그래서 일시적으로 도구, 서비스, 심지어 사람을 "고용"해 그 한 단계를 완성합니다.
+하지만 현실에서, 사용자가 "이 기능 이름이 멋져서" 제품을 사용하기로 결정하는 경우는 거의 없습니다. 그들은 특정 순간에, 한 가지 일을 앞으로 밀고 나가고 싶어서, 임시로 도구 하나, 서비스 하나, 심지어 사람 하나를 "고용"하여 이 단계를 완수하도록 돕습니다.
 
-이것이 바로 **Jobs to Be Done(JTBD)** 방법이 우리에게 상기시키는 것입니다. **사용자는 기능 자체를 구매하는 것이 아니라, 자신이 어떤 진전을 완성하도록 도와주는 해결책을 고용합니다.**
+이것이 바로 **Jobs to Be Done(JTBD)** 방법론이 우리에게 상기시키려는 것입니다: **사용자는 기능 자체를 구매하는 것이 아니라, 어떤 솔루션을 고용하여 자신의 진전을 완수하려고 합니다.**
 
-이 글은 가능한 한 쉬운 언어로 JTBD를 처음부터 이해하게 하고, AI 애플리케이션을 만들 때 바로 쓸 수 있는 분석 도구로 바꾸도록 안내합니다.
+이 글은 가능한 한 알기 쉬운 언어로, 제로에서 JTBD를 이해하고, 이를 AI 애플리케이션을 만들 때 바로 사용할 수 있는 분석 도구로 만들어 드립니다.
 
 </ChapterIntroduction>
 
 ::: info 최소 SOP
-**목적**: 읽고 나면 흐릿한 아이디어를, 기능 이름만 잔뜩 있는 상태가 아니라 실제 사용자 장면이 있는 수요 한 문장으로 수렴하는 법을 더 명확히 알게 됩니다.
+**목적**: 이 글을 읽은 후, 모호한 아이디어를 실제 사용자 시나리오가 있는 진짜 니즈 한 문장으로 수렴하는 방법을 더 명확히 알게 되며, 머릿속에 기능 이름만 있는 상태에서 벗어나게 됩니다.
 
-**행동 항목**: 흐릿한 아이디어 1문장을 쓰고, 잠재 사용자 3명에게 "최근 한 번은 어떻게 처리했는지"를 묻고, JTBD 문장 1개로 정리합니다.
+**실행 항목**: 모호한 아이디어 1문장을 쓰고, 잠재 사용자 3명을 찾아 "최근에 어떻게 처리했는지" 물어본 후, JTBD 문장 1개로 정리합니다.
 
-**결과**: 더 명확한 수요 가설을 얻고, 첫 버전에서 무엇을 먼저 해결해야 하는지 알게 됩니다.
+**결과**: 첫 번째 버전에서 먼저 무엇을 해결해야 할지 아는, 더 명확한 니즈 가설을 얻게 됩니다.
 
-**키워드 이동**: [JTBD란 무엇인가](#jtbd-what) · [한 문장 공식](#jtbd-formula) · [AI는 어떻게 도와줄 수 있나](#jtbd-ai)
+**키워드 바로가기**: [JTBD란](#jtbd-what) · [한 문장 공식](#jtbd-formula) · [AI가 도와주는 방법](#jtbd-ai)
 :::
 
-## 다음 내용을 배우게 됩니다
+## 배울 내용
 
-1. Jobs to Be Done이 무엇이고, 왜 "기능 브레인스토밍"보다 실제 수요에 더 가까운지
-2. "사용자가 원한다고 말한 기능"과 "사용자가 진짜 완료하고 싶은 일"을 구분하는 법
-3. 간단한 템플릿으로 흐릿한 아이디어를 장면, 트리거, 장애물, 성공 기준으로 분해하는 법
-4. JTBD를 AI 제품, 인터뷰 질문, 프롬프트 정리에 활용하는 법
+1. Jobs to Be Done이란 무엇이며, 왜 "기능 브레인스토밍"보다 실제 니즈에 더 가까운지
+2. "사용자가 원한다고 말한 기능"과 "사용자가 진짜로 완수하고 싶은 일"을 어떻게 구분하는지
+3. 간단한 템플릿으로 모호한 아이디어를 시나리오, 트리거, 장애물, 성공 기준으로 분해하는 법
+4. JTBD를 AI 제품, 인터뷰 질문, 프롬프트 정리에 어떻게 활용하는지
 
 <a id="jtbd-what"></a>
-## [1. Jobs to Be Done이란 무엇인가](#top-jtbd)
+## [1. Jobs to Be Done이란](#top-jtbd)
 
-Jobs to Be Done은 보통 **JTBD**라고 줄여 부릅니다. 그 핵심 생각은 Clayton Christensen 팀이 널리 알린 고전적인 표현과 관련 있습니다. **사용자는 어떤 제품을 "고용"해 하나의 일을 완성한다**는 것입니다.
+Jobs to Be Done은 보통 **JTBD**로 줄여 부릅니다. 그 배후의 핵심 아이디어는 Clayton Christensen 팀이 보급한 그 유명한 표현과 관련이 있습니다: **사용자는 어떤 제품을 "고용"하여 한 가지 일을 완수합니다.**
 
-여기서 말하는 "일"은 할 일 목록의 표면적 동작이 아니라, 사용자가 자신의 상태에서 일으키고 싶은 어떤 **진전**입니다. 예를 들면 다음과 같습니다.
+여기서 "일"은 투두 리스트의 표면적인 동작이 아니라, 사용자가 자신의 상태에 일어나길 바라는 **진전**입니다. 예를 들어:
 
-- "AI 회의록 도구가 필요하다"가 아니라, "회의 후 10분 안에 핵심, 할 일, 담당자를 정리해서 기억에 의존해 메모를 보충하지 않고 싶다"
-- "가계부 App이 필요하다"가 아니라, "돈이 정확히 어디로 갔는지 알고 싶어서 월말에 다시 불안해지고 싶지 않다"
-- "이력서 최적화기가 필요하다"가 아니라, "그럴듯한 이력서를 더 확신 있게 제출하고 싶고, 매번 지원할 때마다 내가 너무 못 쓴 건 아닌지 의심하고 싶지 않다"
+- "AI 회의록 도구가 필요해"가 아니라 "회의 후 10분 안에 핵심, 할 일, 담당자를 명확히 정리하고, 더 이상 기억에 의존해 노트를 보충하지 않았으면 좋겠어"
+- "가계부 App이 필요해"가 아니라 "돈이 어디에 쓰였는지 알고 싶어, 월말에 더 이상 불안해하지 않았으면 좋겠어"
+- "이력서 최적화 도구가 필요해"가 아니라 "제대로 된 이력서를 더 자신 있게 제출하고 싶어, 매번 제출할 때마다 너무 못 썼다고 의심하고 싶지 않아"
 
-따라서 **JTBD가 주목하는 것은 제품이 어떻게 생겼는지가 아니라, 사용자가 왜 이 순간 그것을 필요로 하는가입니다.**
+따라서, **JTBD가 주목하는 것은 제품이 어떻게 생겼는지가 아니라, 사용자가 왜 이 순간에 그것이 필요한지입니다.**
 
-그래서 겉으로는 서로 달라 보이는 제품도 실제로는 같은 job을 두고 경쟁할 수 있습니다. 사용자가 "출근길을 덜 지루하게 보내고 싶다"면 고용할 수 있는 대상은 숏폼 영상, 팟캐스트, 게임, 채팅, 심지어 잠깐 조는 것일 수 있습니다. 사용자가 "긴 PDF를 빠르게 이해하고 싶다"면 고용할 수 있는 대상은 AI 요약 도구, 인턴, 동료, 억지로 직접 읽기, 또는 일단 안 읽기일 수 있습니다.
+이것이 왜 겉보기에 다른 제품들이 실제로는 같은 job을 두고 경쟁하는지를 설명합니다. 사용자가 "출근길에 덜 지루하고 싶다"면, 고용할 수 있는 대상은 숏폼 영상, 팟캐스트, 게임, 채팅, 심지어 졸음일 수 있습니다. 사용자가 "긴 PDF를 빨리 이해하고 싶다"면, 고용할 수 있는 대상은 AI 요약 도구, 인턴, 동료, 스스로 억지로 읽기, 또는 그냥 안 읽기일 수 있습니다.
 
-이 관점으로 문제를 보면 진짜 경쟁자는 대개 "당신과 비슷하게 생긴 다른 App"만이 아니라, **사용자가 현재 받아들일 수 있는 모든 대체 방안**이라는 것을 알게 됩니다.
+이런 관점으로 문제를 보면, 진짜 경쟁 상대가 보통 "당신과 비슷하게 생긴 다른 앱"이 아니라 **사용자의 현재 모든 수용 가능한 대체 솔루션**이라는 것을 발견하게 됩니다.
 
-## 2. JTBD는 사용자 페르소나, 기능 목록과 무엇이 다른가
+## 2. JTBD와 사용자 페르소나, 기능 목록의 차이
 
-많은 초보자는 수요 분석을 시작할 때 먼저 사용자 페르소나를 씁니다. 25세, 여성, 1선 도시, 직장인, 효율 도구를 좋아하고 새 제품을 시도할 의향이 있음. 이런 정보가 완전히 쓸모없다고 할 수는 없지만, 보통 **한 사람이 왜 이 순간 행동을 취하는지 설명하기에는 부족합니다.**
+많은 초보자가 요구사항 분석을 시작할 때, 먼저 사용자 페르소나를 작성합니다: 25세, 여성, 1선 도시, 화이트칼라, 효율 도구를 좋아하고, 새로운 제품을 시도하는 것을 좋아합니다. 이런 정보가 완전히 쓸모없는 것은 아니지만, 보통 **한 사람이 왜 이 순간에 행동을 취하는지를 설명하기에는 부족합니다.**
 
-JTBD는 아래 질문에 더 관심이 있습니다.
+JTBD는 다음 질문들에 더 관심이 있습니다:
 
-- 그는 어떤 장면에서 해결책을 찾기로 결정했는가
-- 당시 정확히 무엇에 막혔는가
-- 무엇을 다음 단계로 밀고 싶었는가
-- 지금은 어떤 서툰 방법으로 버티고 있는가
-- 일이 잘 해결된다면 어떤 결과가 "가치 있었다"고 느끼게 하는가
+- 어떤 시나리오에서 솔루션을 찾기로 결정했는지
+- 그때 정확히 무엇에 막혔는지
+- 무엇을 다음 단계로 밀고 나가고 싶은지
+- 지금 어떤 비효율적인 방법으로 버티고 있는지
+- 일이 잘 해결되면, 어떤 결과가 "가치 있었다"고 느끼게 하는지
 
-즉, **사용자 페르소나는 "이 사람이 대략 누구인가"에 가깝고, JTBD는 "이 사람이 지금 정확히 무엇을 완료하고 싶은가"에 가깝습니다.**
+즉, **사용자 페르소나는 "이 사람이 대략 누구인지"에 더 가깝고, JTBD는 "이 사람이 지금 정말로 무엇을 완수하고 싶은지"에 더 가깝습니다.**
 
-마찬가지로 기능 목록도 사람을 쉽게 빗나가게 합니다. 사용자가 "Word로 내보내고 싶어요", "AI 문장 개선이 있으면 좋겠어요", "음성 입력이 필요해요"라고 말할 수 있습니다. 하지만 이것들은 모두 표면 표현입니다. JTBD는 계속 아래로 묻습니다.
+마찬가지로, 기능 목록도 사람을 잘못된 방향으로 이끌기 쉽습니다. 사용자가 "Word로 내보내고 싶어", "AI 재작성을 원해", "음성 입력을 원해"라고 말하지만, 이것들은 표면적인 표현일 뿐입니다. JTBD는 계속해서 아래로 파고듭니다:
 
-- 왜 지금 PDF가 아니라 Word 내보내기가 필요한가?
-- 문장을 고치고 싶은 이유는 문체가 나빠서인가, 아니면 대상에 맞게 바꿔야 해서인가?
-- 음성 입력이 필요한 이유는 타이핑이 귀찮아서인가, 아니면 자주 걸으면서, 운전하면서, 회의 직후에 바로 기록해야 해서인가?
+- 왜 지금 PDF가 아니라 Word로 내보내야 하는지?
+- 재작성을 원하는 것이 글 스타일이 너무 나빠서인지, 아니면 다른 대상에 맞춰야 해서인지?
+- 음성 입력을 원하는 것이 타자 치기 귀찮아서인지, 아니면 자주 걷거나, 운전하거나, 회의 직후에 바로 기록해야 해서인지?
 
-많은 경우 **기능은 job의 임시 번역일 뿐**입니다. 기능만 수집하면 "사용자가 말하는 것을 전부 쌓는" 제품이 되기 쉽습니다. 뒤에 있는 job을 볼 수 있어야 진짜로 쓰기 편하고 경쟁력 있는 솔루션을 만들 가능성이 커집니다.
+많은 경우, **기능은 job의 일시적인 번역일 뿐입니다.** 기능만 수집하면 제품이 "사용자가 말하는 대로 쌓는 것"이 되기 쉽고, 배후의 job을 볼 수 있어야 비로소 정말로 편하고, 정말로 경쟁력 있는 솔루션을 만들 기회가 생깁니다.
 
 ## 3. 제로 베이스도 이해할 수 있는 예시
 
-복잡한 AI 제품을 서둘러 생각하지 말고, 먼저 생활 속 예시에서 시작해 봅시다.
+복잡한 AI 제품을 먼저 생각하지 말고, 일상적인 예시로 시작해 봅시다.
 
-어떤 사람이 아침에 나가기 전 늘 아침을 먹을 시간이 부족해서 지하철역 입구에서 샌드위치와 커피를 자주 산다고 가정해 봅시다. 표면적으로 그는 "아침 식사"를 구매합니다. 하지만 JTBD로 보면 그가 진짜 완료하고 싶은 일은 이럴 수 있습니다.
+누군가가 아침에 외출하기 전에 항상 아침 식사를 할 시간이 없어서, 지하철역 입구에서 샌드위치와 커피를 자주 산다고 가정해 봅시다. 겉보기에는 그가 "구매"하는 것은 아침 식사입니다; 하지만 JTBD로 보면, 그가 정말로 완수하고 싶은 일은:
 
-- 바쁜 아침에 가장 머리를 덜 쓰는 방식으로 한 끼를 해결한다.
-- 회사에 도착하기 전에 배고파 불안해지지 않도록 한다.
-- 아침 식사 때문에 출근 리듬을 망치지 않는다.
+- 서두르는 아침에, 가장 적은 뇌력으로 한 끼를 해결
+- 회사에 도착하기 전에 배가 고파서 허기지지 않게 함
+- 아침 식사 때문에 통근 리듬이 깨지지 않게 함
 
-이때 사용자가 고용한 것은 "어떤 고정 브랜드의 샌드위치"가 아니라, 아침을 순조롭게 앞으로 밀어 주는 해결책입니다. 옆 편의점이 더 빠르고, 더 가깝고, 더 안정적이면 그는 원래 선택을 바로 바꿀 수 있습니다.
+이때 사용자가 고용하는 것은 "어떤 특정 브랜드의 샌드위치"가 아니라, 아침을 순조롭게 진행하는 데 도움이 되는 솔루션입니다. 옆 편의점이 더 빠르고, 더 가깝고, 더 안정적이라면, 그는 즉시 원래 선택을 바꿀 수 있습니다.
 
-이 논리를 AI 제품으로 옮기면 더 분명해집니다.
+이 논리를 AI 제품으로 가져오면 더 명확해집니다.
 
-예를 들어 "AI 회의록 도구"를 만들고 싶다고 합시다. 기능 층위에만 머물면 쉽게 이런 생각을 하게 됩니다.
+예를 들어 "AI 회의록 도구"를 만들고 싶다고 가정해 봅시다. 기능 수준에서만 멈추면, 쉽게 이런 것들을 생각하기 시작합니다:
 
-- 오디오 업로드를 지원할까
-- 화자 분리를 붙일까
-- Markdown 내보내기를 할까
-- 할 일을 자동 생성할까
+- 오디오 업로드를 지원할지 말지
+- 화자 분리를 연동할지 말지
+- Markdown으로 내보낼지 말지
+- 자동으로 할 일을 생성할지 말지
 
-이것들은 모두 틀리지 않지만 충분하지 않습니다. JTBD로 한 층 더 물으면 사용자가 진짜 완료하고 싶은 것은 다음일 수 있습니다.
+이것들은 틀린 것이 아니지만, 아직 부족합니다. JTBD로 한 층 더 물으면, 사용자가 진짜로 완수하고 싶은 것은:
 
-- 회의 후 10분 안에 참석하지 못한 사람에게 논의 결과를 동기화하고 싶다.
-- 할 일, 담당자, 마감일을 깔끔하게 뽑아 팀이 기억에 의존해 협업하지 않게 하고 싶다.
-- 회의 내용을 반복 정리하는 시간을 줄이고, 에너지를 의사결정과 추진에 남기고 싶다.
+- 회의 후 10분 안에, 논의 결과를 회의에 참석하지 않은 사람에게 동기화
+- 할 일, 담당자, 마감일을 깔끔하게 추출하여, 팀이 기억에 의존해 협업하지 않게 함
+- 회의 내용을 반복적으로 정리하는 시간을 줄이고, 의사결정과 진행에 에너지 집중
 
-job이 명확해지면 많은 기능의 우선순위가 자동으로 떠오릅니다. 첫 버전에서 가장 중요한 것은 "12가지 내보내기 형식 지원"이 아니라 다음일 수 있습니다.
+job이 명확해지면, 많은 기능의 우선순위가 자동으로 떠오릅니다. 첫 번째 버전에서 가장 중요한 것은 "12가지 내보내기 형식 지원"이 아닐 수 있습니다:
 
-- 회의록 구조가 충분히 명확해야 한다.
-- 할 일 추출이 안정적이어야 한다.
-- 공유 링크가 편리해야 한다.
-- 출력 결과를 팀에 바로 전달할 수 있을 만큼 믿을 수 있어야 한다.
+- 회의록 구조가 충분히 명확해야 함
+- 할 일 추출이 안정적이어야 함
+- 공유 링크가 편리해야 함
+- 출력 결과를 팀에 바로 전달할 수 있을 만큼 신뢰할 수 있어야 함
 
-이것이 JTBD의 가치입니다. **"어떤 능력을 쌓을까"에서 "사용자가 어떤 진전을 이루도록 도울까"로 되돌려 줍니다.**
+이것이 JTBD의 가치입니다: **"어떤 능력을 쌓을지"에서 "사용자가 어떤 진전을 이루도록 도울지"로 되돌려 줍니다.**
 
-## 4. 쓰기 좋은 JTBD 템플릿
+## 4. 유용한 JTBD 템플릿
 
-제로 베이스라면 JTBD를 너무 학술적으로 생각하지 않아도 됩니다. 가장 실용적인 5개 요소만 잡으면 충분합니다.
+제로 베이스라면, JTBD를 너무 학술적으로 생각하지 마세요. 가장 실용적인 5가지 요소만 먼저 잡으면 됩니다.
 
-### 4.1 장면
+### 4.1 시나리오
 
 사용자는 어떤 순간, 어떤 환경에서 이 제품을 떠올리는가?
 
-- 회의가 끝난 뒤인가
-- 상사가 갑자기 자료를 요구할 때인가
-- 밤에 이력서를 제출하려고 준비할 때인가
-- 월말에 돈이 또 부족하다는 것을 발견했을 때인가
+- 회의가 끝난 후
+- 상사가 갑자기 자료를 요구할 때
+- 밤에 이력서를 제출하려고 준비할 때
+- 월말에 돈이 또 부족하다는 것을 발견할 때
 
-**장면이 없는 수요는 보통 아직 충분히 진짜가 아닙니다.**
+**시나리오가 없는 니즈는 보통 아직 충분히 실제적이지 않습니다.**
 
 ### 4.2 트리거
 
-무엇이 그를 즉시 해결책을 찾게 만들었는가?
+무엇이 그가 즉시 솔루션을 찾기로 결정하게 했는가?
 
-- 긴 문서에 눌려 어디서부터 봐야 할지 모른다.
-- 내일 제출해야 하는 자료가 있는데 오늘서야 형식이 엉망이라는 것을 발견했다.
-- 방금 리더에게 진행 상황을 추궁당했고, 자신이 정리를 제대로 해 두지 않았다는 것을 깨달았다.
-- 기록을 꾸준히 하고 싶지만 손글씨, 복사, 정리가 모두 너무 번거롭다.
+- 긴 문서에 압도되어, 어디서부터 읽어야 할지 모름
+- 내일 자료를 제출해야 하는데, 오늘에야 서식이 엉망이라는 것을 발견
+- 방금 리더에게 진행 상황을 추궁당해, 자신이 명확히 정리하지 않았다는 것을 깨달음
+- 기록을 계속하고 싶지만, 손글씨, 복사, 정리가 너무 번거로움
 
-트리거에는 보통 감정이 함께 있습니다. 이 감정은 매우 중요합니다. 왜냐하면 사용자가 왜 바로 이 순간 행동하게 되는지를 결정하기 때문입니다.
+트리거는 종종 감정을 동반합니다. 이 감정이 중요한데, 사용자가 왜 이 순간에 행동을 일으키는지를 결정하기 때문입니다.
 
-### 4.3 완료하고 싶은 진전
+### 4.3 완수하고 싶은 진전
 
-그는 단지 "동작 하나"를 하고 싶은 것이 아니라, 자신을 어떤 새로운 상태로 밀어 넣고 싶은가?
+단지 "동작을 하고 싶은" 것이 아니라, 자신을 어떤 새로운 상태로 밀고 나가고 싶은 것인가?
 
 - 혼란에서 명확함으로
 - 불안에서 안심으로
-- 미룸에서 시작으로
-- 비효율에서 매끄러움으로
-- 설명하지 못함에서 바로 전달 가능함으로
+- 지연에서 시작으로
+- 비효율에서 순조로움으로
+- 설명 못 함에서 바로 전달 가능함으로
 
-이 단계에서 "진전"이라는 단어가 매우 중요합니다. 많은 사람이 진짜로 사는 것은 도구가 아니라 **상태 변화**이기 때문입니다.
+이 단계에서 "진전"이라는 단어가 매우 핵심적입니다. 왜냐하면 많은 사람이 진짜로 사는 것은 도구가 아니라 **상태 변화**이기 때문입니다.
 
-### 4.4 현재 대체 방안
+### 4.4 현재 대체 솔루션
 
-당신의 제품이 없을 때 그는 지금 어떻게 하는가?
+당신의 제품이 없을 때, 그는 어떻게 하는가?
 
-- 수동 복사/붙여넣기
-- Excel이나 메모장으로 억지로 버티기
-- 동료에게 부탁하기
-- 미뤄 두기
-- 여러 도구 사이를 왔다 갔다 하기
+- 수동으로 복사 붙여넣기
+- Excel이나 메모로 버티기
+- 동료에게 도움 요청
+- 미루고 아무것도 안 하기
+- 여러 도구를 오가며 작업
 
-대체 방안이 누구인지가 곧 당신의 실제 경쟁 환경입니다.
+대체 솔루션이 누구인지, 그것이 바로 당신의 실제 경쟁 환경입니다.
 
 ### 4.5 성공 기준
 
-어떤 상태가 되어야 일이 진짜 해결되었다고 볼 수 있는가?
+일이 어떻게 되어야 정말로 해결된 것인가?
 
-- 10분 안에 공유 가능한 결과를 얻는다.
-- 크게 다시 고치지 않아도 다른 사람에게 보낼 수 있다.
-- 누락, 오류, 잊어버림이 쉽게 생기지 않는다.
-- 처음 써도 다음에 무엇을 해야 하는지 안다.
+- 10분 안에 공유 가능한 결과 얻기
+- 큰 수정 없이 남에게 전달 가능
+- 항목 누락, 오류, 망각이 적어야 함
+- 처음 사용해도 다음 단계를 알 수 있어야 함
 
-"사용자가 어떻게 가치 있다고 판단하는지"조차 말하지 못한다면, 이 방향은 아직 충분히 수렴되지 않았을 가능성이 큽니다.
+"사용자가 가치 있는지 어떻게 판단하는지"조차 말할 수 없다면, 이 방향은 아마 아직 잘 수렴되지 않은 것입니다.
 
 <a id="jtbd-formula"></a>
-## [5. 바로 적용할 수 있는 한 문장 공식](#top-jtbd)
+## [5. 바로 사용할 수 있는 한 문장 공식](#top-jtbd)
 
-제품 방향을 정리하고 싶을 때는 먼저 이 매우 실용적인 문장 형식을 사용할 수 있습니다.
+제품 방향을 정리할 때, 이 매우 실용적인 문장 형식을 먼저 사용해 보세요:
 
-> __________ 할 때, 나는 __________ 하고 싶다. 그래야 __________ 할 수 있다.  
-> 지금은 __________ 방식으로 겨우 이 일을 해내고 있다.
+> __________할 때, 나는 __________하고 싶고, __________하기 위해.
+> 지금 나는 __________을/를 통해서만 겨우 이 일을 완수할 수 있습니다.
 
-예를 들면:
+예를 들어:
 
-> 정보량이 많은 프로젝트 회의가 끝났을 때, 나는 할 일, 담당자, 마감일이 포함된 회의록을 빠르게 얻고 싶다. 그래야 팀에 바로 동기화하고 실행을 추진할 수 있다.  
-> 지금은 기억을 더듬고, 채팅 기록을 뒤지고, 손으로 정리하는 방식으로 겨우 이 일을 해내고 있다.
+> 정보량이 많은 프로젝트 회의가 끝났을 때, 나는 할 일, 담당자, 마감일이 포함된 회의록을 빠르게 얻고 싶고, 팀에 즉시 동기화하고 실행을 진행하기 위해.
+> 지금 나는 기억에 의존하고, 채팅 기록을 뒤지고, 수동으로 정리하여 겨우 이 일을 완수할 수 있습니다.
 
-또 다른 예:
+또 다른 예시:
 
-> 새로운 직무에 지원하려고 할 때, 나는 기존 경험을 해당 직무에 더 맞는 표현으로 빠르게 고치고 싶다. 그래야 더 확신 있게 그럴듯한 이력서를 제출할 수 있다.  
-> 지금은 예전 이력서를 반복해서 복사하고, 문구를 손으로 고치고, 마지막에는 점점 더 확신이 없어지는 방식으로 버티고 있다.
+> 새로운 직무에 지원하려고 준비할 때, 나는 기존 경험을 공고에 더 맞는 버전으로 빠르게 재작성하고 싶고, 제대로 된 이력서를 더 자신 있게 제출하기 위해.
+> 지금 나는 기존 이력서를 반복적으로 복사하고, 표현을 수동으로 수정하며, 수정할수록 점점 더 불확실해집니다.
 
-이 한 문장을 이 정도로 명확하게 쓸 수 있다면, 뒤의 페이지 설계, 프롬프트 설계, 기능 우선순위 판단이 훨씬 쉬워집니다.
+한 문장을 이 정도의 명확도로 쓸 수 있다면, 이후의 페이지 설계, 프롬프트 설계, 기능 우선순위 판단이 훨씬 쉬워집니다.
 
-## 6. AI 제품을 만들 때 특히 봐야 할 job의 세 층
+## 6. AI 제품을 만들 때, 특히 봐야 할 세 가지 job 레이어
 
-많은 AI 제품은 기능 시연 때는 강력해 보이지만 실제 출시 후 사용자를 붙잡지 못합니다. 흔한 이유는 표면 동작만 해결하고 더 깊은 job을 해결하지 못했기 때문입니다.
+많은 AI 제품이 기능 데모에서는 매우 강력해 보이지만, 실제로 출시된 후 사용자를 유지하지 못합니다. 흔한 원인은 표면적인 동작만 해결하고, 더 깊은 job은 해결하지 못했기 때문입니다.
 
-하나의 job을 대략 세 층으로 나누어 볼 수 있습니다.
+job을 대략 세 가지 레이어로 나누어 볼 수 있습니다:
 
-### 6.1 기능 층
+### 6.1 기능 레이어
 
-가장 표면적인 과제는 무엇인가?
+가장 표면적인 작업은 무엇인가?
 
 - 문서 요약
-- 문구 재작성
+- 카피 재작성
 - 할 일 추출
 - 이미지 생성
 
-사용자가 말로 가장 쉽게 말하는 층입니다.
+이것은 사용자가 입으로 가장 쉽게 말하는 레이어입니다.
 
-### 6.2 감정 층
+### 6.2 감정 레이어
 
-사용자는 어떤 불편한 감정을 줄이거나 어떤 느낌을 얻고 싶은가?
+사용자는 어떤 불편함을 줄이고 싶거나, 어떤 느낌을 얻고 싶어 하는가?
 
-- 덜 당황하고 싶다.
-- 덜 비전문적으로 보이고 싶다.
-- 매번 처음부터 시작하고 싶지 않다.
-- 더 통제감을 갖고 싶다.
+- 당황하고 싶지 않음
+- 전문적이지 않아 보이고 싶지 않음
+- 매번 제로에서 시작하고 싶지 않음
+- 더 많은 통제감을 원함
 
-많은 지불 의향은 실제로 감정 층과 큰 관련이 있습니다.
+많은 결제 의향이 사실 감정 레이어와 큰 관련이 있습니다.
 
-### 6.3 사회적 층
+### 6.3 사회 레이어
 
-사용자는 다른 사람 눈에 어떤 사람으로 보이고 싶은가?
+사용자는 다른 사람의 눈에 어떤 사람이 되고 싶어 하는가?
 
-- 더 믿음직해 보이고 싶다.
-- 팀에서 더 조직적인 사람으로 보이고 싶다.
-- 고객 앞에서 더 전문적으로 보이고 싶다.
-- 소셜 플랫폼에서 더 잘 표현하는 사람으로 보이고 싶다.
+- 더 신뢰할 수 있어 보이고 싶음
+- 팀에서 조직 능력이 더 있어 보이고 싶음
+- 고객 앞에서 더 전문적이고 싶음
+- 소셜 미디어에서 더 표현을 잘하는 사람이고 싶음
 
-기능 층만 만들면 제품은 쉽게 대체됩니다. 감정 층과 사회적 층까지 이해하면 진짜 끈적한 가치를 찾기 쉬워집니다.
+기능 레이어만 하면 제품이 대체되기 쉽고; 감정 레이어와 사회 레이어를 동시에 이해하면, 진짜로 끈기 있는 가치를 더 쉽게 찾을 수 있습니다.
 
-## 7. JTBD로 제품 방향을 거꾸로 걸러내기
+## 7. JTBD를 역으로 사용해 제품 방향 선별
 
-이미 제품이 있는 것이 아니라 손에 3~5개의 아이디어가 있고 무엇을 해야 할지 모르겠다면, JTBD는 선별에 매우 적합합니다.
+때로는 이미 제품이 있는 것이 아니라, 3~5개의 아이디어를 가지고 있고 어떤 것을 만들지 모르는 상황입니다. 이때 JTBD는 선별에 매우 적합합니다.
 
-각 아이디어를 두고 다음 5가지 질문을 해 보세요.
+각 아이디어를 가지고, 각각 5가지 질문을 스스로에게 해보세요:
 
-1. 이 아이디어가 대응하는 장면이 충분히 구체적인가?
-2. 사용자는 지금 이미 어떤 서툰 방식으로 해결하고 있는가?
-3. 이 job의 고통감이 충분히 강하거나 충분히 자주 발생하는가?
-4. 내가 잘 만들면 사용자가 "상태가 좋아졌다"고 분명히 느낄까?
-5. 첫 버전은 이 job의 핵심 한 단계만 중심으로 작지만 유용하게 만들 수 있을까?
+1. 이 아이디어에 해당하는 시나리오가 충분히 구체적인지?
+2. 사용자가 이미 어떤 비효율적인 방법으로 해결하고 있는지?
+3. 이 job의 고통이 충분히 강하거나, 충분히 빈번한지?
+4. 내가 잘 만들면, 사용자가 "상태가 좋아졌다"고 명확히 느낄 수 있는지?
+5. 첫 번째 버전을 이 job의 핵심 단계 하나만 중심으로, 아주 작지만 유용한 버전으로 만들 수 있는지?
 
-어떤 방향을 끝까지 말해도 "느낌상 재미있다" 정도밖에 말하지 못하고 트리거, 대체 방안, 성공 기준을 말하지 못한다면, 그것은 아직 성숙한 방향이 아니라 흐릿한 영감일 가능성이 큽니다.
+어떤 방향이 끝까지 말해도 "꽤 흥미로운 것 같다"고만 할 수 있고, 트리거, 대체 솔루션, 성공 기준을 명확히 말할 수 없다면, 그것은 아마 성숙한 방향이 아니라 모호한 영감일 뿐입니다.
 
-## 8. 사용자 인터뷰에 바로 가져갈 수 있는 질문
+## 8. 바로 사용자 인터뷰에 가져갈 수 있는 질문
 
-많은 사람이 조사를 시작하면 "어떤 기능을 원하세요?"라고 묻습니다. 이런 질문은 표면적인 답을 얻기 쉽습니다.
+많은 사람이 조사를 할 때 "어떤 기능을 원하세요?"라고 묻습니다. 이런 질문은 표면적인 답을 얻기 쉽습니다.
 
-JTBD에는 아래 질문들이 더 적합합니다.
+JTBD는 다음 질문들에 더 적합합니다:
 
-- 최근에 이 문제를 만난 것은 언제인가요?
+- 최근에 이 문제를 만난 것은 언제였나요?
 - 그때 무엇을 하고 있었고, 왜 막혔나요?
-- 결국 어떻게 해결했나요?
-- 이 과정에서 가장 짜증 나고, 느리고, 불안한 지점은 무엇이었나요?
-- 도구가 도와준다면 어떤 결과가 정말 유용하다고 느껴질까요?
-- 어떤 대체 방법을 써 봤나요? 왜 충분하지 않았나요?
+- 마지막에 어떻게 해결했나요?
+- 그 과정에서 가장 번거롭고, 가장 느리고, 가장 불안한 곳은 어디였나요?
+- 도구가 하나 있다면, 어떤 결과가 정말로 유용하다고 느끼게 할까요?
+- 어떤 대체 방법을 시도해 보셨나요? 왜 충분히 좋지 않았나요?
 
-이런 질문 방식의 장점은 대화를 상상 속 취향이 아니라 실제 경험으로 되돌린다는 점입니다.
+이런 질문 방식의 장점은: 대화를 상상 속의 선호에 머물게 하지 않고, 실제 경험으로 되돌린다는 것입니다.
 
-## 9. AI로 JTBD 분해하기
+## 9. AI로 JTBD 분해 돕기
 
 JTBD 자체는 AI가 발명한 것이 아니지만, AI는 JTBD를 정리하고 추출하는 데 매우 적합합니다.
 
-예를 들어 사용자 피드백 5~10개를 이미 모았다면, 그것을 모델에게 던져 아래 구조로 요약하게 할 수 있습니다.
+예를 들어 사용자 피드백 5~10개를 이미 수집했다면, 모델에 전달하여 다음 구조로 정리하도록 할 수 있습니다:
 
 ```text
-제품 리서치 조수 역할을 해 줘.
-사용자 원문을 줄 테니 먼저 기능 제안을 하지 말고,
-Jobs to Be Done 프레임워크에 따라 정리해 줘.
+제품 연구 어시스턴트 역할을 해 주세요.
+사용자의 원래 말을 몇 개 드리겠습니다. 먼저 기능 제안을 하지 말고,
+Jobs to Be Done 프레임워크로 정리해 주세요:
 
-1. 사용자는 어떤 장면에 있는가
-2. 사용자가 행동하게 된 트리거는 무엇인가
-3. 사용자가 진짜 완료하고 싶은 진전은 무엇인가
-4. 현재 대체 방안은 무엇인가
-5. 사용자가 가장 중요하게 보는 성공 기준은 무엇인가
-6. 이 피드백들에서 반복해서 등장하는 감정 단어는 무엇인가
+1. 사용자가 어떤 시나리오에 있는지
+2. 행동을 촉발한 이벤트가 무엇인지
+3. 정말로 완수하고 싶은 진전이 무엇인지
+4. 현재 대체 솔루션이 무엇인지
+5. 가장 중요하게 생각하는 성공 기준이 무엇인지
+6. 이 피드백에서 반복적으로 등장하는 감정 단어는 무엇인지
 
-마지막으로 이 내용을 검증 우선순위가 높은 JTBD 가설 3개로 정리해 줘.
+마지막으로, 이 내용을 우선적으로 검증할 가치가 있는 JTBD 가설 3개로 정리해 주세요.
 ```
 
-이미 아이디어가 있다면 AI에게 1차 수렴을 도와달라고 할 수도 있습니다.
+이미 아이디어가 있다면, AI에게 첫 번째 수렴을 도와달라고 할 수도 있습니다:
 
 ```text
-[제품 아이디어]를 만들고 싶어.
-기능 목록을 바로 주지 말고, Jobs to Be Done 방법으로 분석해 줘.
+[제품 아이디어]를 만들고 싶습니다.
+기능 목록을 바로 주지 말고, Jobs to Be Done 방법으로 분석해 주세요:
 
-1. 이 제품이 섬길 수 있는 구체적인 장면은 무엇인가
-2. 각 장면에서 사용자가 완료하고 싶은 핵심 job은 무엇인가
-3. 기존 대체 방안은 무엇인가
-4. 어떤 job이 MVP 출발점으로 가장 적합한가, 왜 그런가
-5. 마지막으로 추천하는 job을 명확한 JTBD 문장 한 개로 작성해 줘
+1. 이 제품이 어떤 구체적인 시나리오를 서비스할 수 있는지
+2. 각 시나리오에서 사용자가 완수하고 싶은 핵심 job이 무엇인지
+3. 기존 대체 솔루션은 무엇인지
+4. 어떤 job이 MVP 출발점으로 가장 적합한지, 왜 그런지
+5. 최종 추천하는 job을 명확한 JTBD 문장 하나로 작성해 주세요
 ```
 
-이렇게 하면 처음부터 AI가 "기능 50개 브레인스토밍"으로 끌고 가지 않고, 먼저 방향을 명확하게 말하게 할 수 있습니다.
+이렇게 하면 처음부터 AI가 "기능 50개를 브레인스토밍"하는 것으로 이끌리지 않고, 먼저 방향을 명확히 할 수 있습니다.
 
-## 10. 초보자가 가장 흔히 하는 4가지 오해
+## 10. 초보자의 가장 흔한 4가지 오해
 
-### 10.1 job을 기능명으로 쓰기
+### 10.1 job을 기능 이름으로 쓰기
 
-"AI 요약", "지능형 분류", "자동 생성"은 모두 job이 아닙니다. 그것들은 가능한 구현 방식일 뿐입니다.
+"AI 요약", "스마트 분류", "자동 생성"은 job이 아니라, 가능한 구현 방식일 뿐입니다.
 
-### 10.2 사람군을 너무 넓게 쓰기
+### 10.2 사용자군을 너무 넓게 쓰기
 
-"모든 직장인", "모든 학생", "모든 창업자"는 보통 너무 넓습니다. 넓을수록 실제 장면을 보기 어려워집니다.
+"모든 직장인", "모든 학생", "모든 창업자"는 보통 너무 광범위합니다. 넓을수록 실제 시나리오를 보기 어렵습니다.
 
-### 10.3 사용자가 말하는 것만 듣고, 실제 행동은 보지 않기
+### 10.3 사용자의 말만 듣고 행동은 보지 않기
 
-사용자는 자신이 원하는 것을 설명할 수 있지만, 진짜 우선순위는 지금 어떻게 문제를 임시로 해결하고 있는지에 숨어 있는 경우가 많습니다.
+사용자는 자신이 원하는 것을 설명할 수 있지만, 그의 진짜 우선순위는 종종 현재 어떻게 문제를 대충 해결하는지에 숨어 있습니다.
 
 ### 10.4 처음부터 완전한 플랫폼을 만들려고 하기
 
-JTBD를 올바르게 여는 방식은 보통 "모든 것을 해결하는 큰 플랫폼을 만들겠다"가 아닙니다. 먼저 한 장면에서 가장 중요한 한 단계를 겨냥하고, 그것을 매우 매끄럽게 만드는 것입니다.
+JTBD의 올바른 사용법은 보통 "모든 것을 해결하는 대플랫폼을 만들겠다"가 아니라, 먼저 한 시나리오에서 가장 핵심적인 단계 하나를 정조준하여, 그것을 아주 편하게 만드는 것입니다.
 
-## 11. 정리
+## 11. 요약
 
-Jobs to Be Done의 가장 가치 있는 점은 새로운 용어를 하나 주는 것이 아니라, 관찰 관점을 바꿔 준다는 것입니다. **제품 기능만 바라보지 말고, 사용자가 어떤 일을 다음 단계로 밀고 싶어 하는지 바라보세요.**
+Jobs to Be Done의 가장 가치 있는 부분은 새로운 용어를 주는 것이 아니라, 관찰 관점을 바꿔주는 것입니다: **제품 기능만 바라보지 말고, 사용자가 무엇을 다음 단계로 밀고 나가고 싶은지 바라보세요.**
 
-다음 질문을 반복해 묻기 시작하면:
+다음 질문들을 스스로에게 반복해서 물어보기 시작하면:
 
-- 사용자는 어떤 장면에서 이 제품을 고용하는가
-- 정확히 어디에서 막혔는가
-- 지금은 어떤 방식으로 버티고 있는가
-- 일이 해결되면 상태가 어떻게 변하는가
+- 사용자가 어떤 시나리오에서 이 제품을 고용하는지
+- 정확히 어디에 막혀 있는지
+- 지금 어떤 방법으로 버티고 있는지
+- 일이 해결되면, 상태가 어떻게 변하는지
 
-원래 흐릿했던 많은 아이디어가 갑자기 선명해지고, 원래 화려해 보였던 많은 기능이 갑자기 그다지 중요하지 않게 됩니다.
+원래 모호했던 아이디어가 갑자기 명확해지고, 원래 화려했던 기능도 갑자기 그다지 중요하지 않게 보이는 것을 발견할 것입니다.
 
-제품을 만들 때, 특히 AI 제품을 만들 때 가장 위험한 것은 처음부터 능력 시연에 빠지는 것입니다. JTBD는 당신의 주의를 진짜 중요한 곳으로 되돌립니다. **사용자가 왜 당신을 필요로 하는가, 그리고 당신은 정확히 어떤 진전을 완성하도록 돕는가.**
+제품을 만드는 것, 특히 AI 제품을 만드는 데 있어 가장 두려운 것은 처음부터 능력 전시에 빠지는 것입니다. JTBD는 여러분의 주의를 정말로 중요한 곳으로 되돌려 줍니다: **사용자가 왜 당신이 필요한지, 그리고 당신이 정확히 어떤 진전을 도와주고 있는지.**
 
 <a id="jtbd-ai"></a>
-## [12. AI로 JTBD를 실천하는 방법](#top-jtbd)
+## [12. AI를 활용해 JTBD를 실천하는 방법](#top-jtbd)
 
-JTBD는 AI가 발명한 것이 아니지만, AI는 이 방법 안에서 리서치 조수, 정리 조수, 대조 조수 역할을 하기에 매우 적합합니다. 핵심은 **AI가 사용자를 상상해 대신 결론 내리게 하지 말고, 정리와 확장을 돕게 하는 것**입니다.
+JTBD는 AI가 발명한 것이 아니지만, AI는 이 방법에서 연구 조수, 정리 조수, 비교 조수로 활용하기에 매우 적합합니다. 핵심은: **AI가 정리와 확장을 돕게 하고, AI가 사용자를 대신해 추측하게 하지 않는 것입니다.**
 
-다음처럼 사용할 수 있습니다.
+다음과 같이 활용할 수 있습니다:
 
-### 12.1 AI에게 흐릿한 아이디어를 JTBD 가설로 바꾸게 하기
+### 12.1 AI로 모호한 아이디어를 JTBD 가설로 재작성
 
-머릿속에 "대학생이 인턴십을 찾도록 돕는 도구를 만들고 싶다"처럼 흐릿한 설명만 있다면, 먼저 AI에게 여러 가능한 job으로 나눠 보게 할 수 있습니다.
+머릿속에 "대학생의 인턴십 찾기를 돕는 도구" 같은 모호한 설명만 있을 때, 먼저 AI에게 이것을 여러 가능한 job으로 분해하도록 요청할 수 있습니다:
 
 ```text
-지금 흐릿한 제품 아이디어가 있어: [아이디어]
-기능 목록을 바로 주지 말고, Jobs to Be Done 방식으로 분석해 줘.
-1. 어떤 구체적인 장면에 대응할 수 있는가
-2. 각 장면에서 사용자가 진짜 완료하고 싶은 진전은 무엇인가
-3. 현재 대체 방안은 무엇일 수 있는가
-4. 어떤 job이 MVP로 먼저 만들기 가장 적합한가
-마지막에는 각 job을 명확한 JTBD 문장으로 써 줘.
+모호한 제품 아이디어가 있습니다: [아이디어]
+기능 목록을 바로 주지 말고, Jobs to Be Done 방식으로 분석해 주세요:
+1. 어떤 구체적인 시나리오에 해당할 수 있는지
+2. 각 시나리오에서 사용자가 정말로 완수하고 싶은 진전이 무엇인지
+3. 현재 대체 솔루션은 무엇일 수 있는지
+4. 어떤 job을 먼저 MVP로 만드는 것이 가장 적합한지
+마지막으로 각 job을 명확한 JTBD 문장으로 작성해 주세요.
 ```
 
-아주 초보적인 입력도 괜찮습니다.
+입력을 아주 초보적으로 쓸 수도 있습니다:
 
 ```text
-대학생이 인턴십을 찾는 것을 돕는 무언가를 만들고 싶어.
-나도 아직 구체적으로 뭘 만들지 잘 모르겠어. 사용자가 정확히 어떤 일을 완료하고 싶은지 같이 생각해 줘.
+대학생이 인턴십을 찾는 것을 돕는 도구를 만들고 싶어요.
+구체적으로 무엇을 하는지 아직 잘 모르겠어요. 사용자가 진짜로 무엇을 완수하고 싶은지 생각해 주세요.
 ```
 
-AI가 주는 유용한 출력은 이렇게 생겼을 수 있습니다.
+AI의 유용한 출력은 다음과 같을 수 있습니다:
 
 ```text
 가능한 JTBD 방향:
 
-1. 처음 인턴십 지원을 준비할 때, 먼저 무엇을 준비해야 하는지 빠르게 알고 싶다.
-그래야 정보가 혼란스러워 계속 지원을 미루지 않을 수 있다.
+1. 처음으로 인턴십에 지원할 때, 먼저 어떤 자료를 준비해야 하는지 빠르게 알고 싶어,
+정보가 혼란스러워서 계속 지원을 미루지 않았으면 좋겠어.
 
-2. 어떤 인턴십 공고를 봤을 때, 내가 지원할 가치가 있는지 빠르게 판단하고 싶다.
-그래야 맞지 않는 공고에 너무 많은 시간을 낭비하지 않을 수 있다.
+2. 인턴십 공고를 볼 때, 내가 지원할 가치가 있는지 빠르게 판단하고 싶어,
+적합하지 않은 공고에 너무 많은 시간을 낭비하지 않았으면 좋겠어.
 
-3. 지원을 시작할 때, 기존 이력서를 직무에 더 맞는 버전으로 바꾸고 싶다.
-그래야 더 빨리 지원을 완료하고 통과율을 높일 수 있다.
+3. 지원을 시작할 때, 기존 이력서를 공고에 더 맞는 버전으로 빠르게 수정하고 싶어,
+더 빨리 지원을 완료하고 합격률을 높이고 싶어.
 ```
 
-이 출력의 가치는 매우 넓었던 생각 하나를 실제 장면에 가까운 여러 방향으로 나눈다는 데 있습니다.
+이런 출력의 가치는, 원래 한 문장으로 매우 광범위했던 아이디어를 몇 가지 더 실제 시나리오에 가까운 방향으로 분해해 준다는 것입니다.
 
-### 12.2 AI에게 인터뷰 원문을 정리하게 하기
+### 12.2 AI로 인터뷰 원래 말 정리
 
-사용자 인터뷰를 몇 번 했다면, 인터뷰 기록을 AI에게 주고 반복해서 등장하는 장면, 트리거, 대체 방안, 성공 기준을 추출하게 할 수 있습니다.
+사용자 인터뷰를 몇 번 이미 했다면, 인터뷰 기록을 AI에게 전달하여 반복적으로 등장하는 시나리오, 트리거, 대체 솔루션, 성공 기준을 추출하도록 할 수 있습니다.
 
 ```text
-아래는 사용자 5명의 인터뷰 원문이야.
-먼저 해결책을 주지 말고, JTBD 프레임워크에 따라 정리해 줘.
-1. 사용자는 어떤 장면에 있는가
-2. 사용자가 행동하게 된 트리거는 무엇인가
-3. 사용자가 진짜 완료하고 싶은 진전은 무엇인가
-4. 현재 대체 방안은 무엇인가
-5. 사용자가 가장 중요하게 여기는 성공 기준은 무엇인가
-6. 여러 사용자에게 반복해서 나타난 정보는 무엇인가
-마지막에는 검증 우선순위가 높은 JTBD 가설 3개로 정리해 줘.
+다음은 5명의 사용자 인터뷰 원래 말입니다.
+먼저 솔루션을 제시하지 말고, JTBD 프레임워크로 정리해 주세요:
+1. 사용자가 어떤 시나리오에 있는지
+2. 행동을 촉발한 이벤트가 무엇인지
+3. 정말로 완수하고 싶은 진전이 무엇인지
+4. 현재 대체 솔루션이 무엇인지
+5. 가장 중요하게 생각하는 성공 기준이 무엇인지
+6. 어떤 정보가 여러 사용자에게서 반복적으로 등장하는지
+마지막으로 우선적으로 검증할 가치가 있는 JTBD 가설 3개로 정리해 주세요.
 ```
 
-아주 간단한 초보자 입력도 이렇게 쓸 수 있습니다.
+아주 간단한 초보자 입력도 가능합니다:
 
 ```text
-3명에게 물어봤는데, 대략 이렇게 말했어.
+3명에게 물어봤어요. 대략 이렇게 말했어요:
 
-1. 인턴십에 지원할 때마다 이력서를 다시 고쳐야 해서 너무 귀찮다.
-2. 사실 가장 두려운 건 내가 잘 썼는지 모르겠다는 것이다.
-3. 지금은 선배에게 먼저 봐 달라고 하는데, 매번 부탁하기가 미안하다.
+1. 인턴십에 지원할 때마다 이력서를 다시 수정해야 해서 정말 번거로워.
+2. 사실 제일 무서운 건 내가 제대로 썼는지 모르는 거야.
+3. 지금은 선배나 조카에게 봐달라고 부탁하는데, 매번 부탁하기가 미안해.
 
-그들이 진짜 완료하고 싶은 일이 무엇인지 정리해 줘.
+정리해 줘. 그들이 진짜로 완수하고 싶은 일이 뭔지.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
 정리 결과:
 
-- 공통 장면: 인턴십 지원 준비 전, 이력서를 처리해야 함
-- 공통 어려움: "충분히 좋은" 상태까지 수정했는지 판단하지 못함
-- 현재 대체 방안: 선배에게 봐 달라고 부탁하거나 직접 반복 수정
+- 공통 시나리오: 인턴십 지원 전, 이력서를 처리해야 함
+- 공통 어려움: "충분히 좋게" 수정하는 방법을 모름
+- 현재 대체 솔루션: 선배나 조카에게 검토 부탁, 스스로 반복 수정
 - 가능한 JTBD:
-  인턴십 지원을 준비할 때, 이력서가 이미 지원 가능한 수준인지 더 빨리 판단하고 싶다.
-  그래야 "조금만 더 고쳐 보자"에 계속 막혀 지원을 미루지 않을 수 있다.
+  인턴십에 지원할 준비를 할 때, 이력서가 이미 지원 가능한 수준에 도달했는지 더 빨리 판단하고 싶어,
+  "좀 더 수정해야지"에 계속 갇혀 지원을 못 하는 상황을 피하고 싶어.
 ```
 
-이 출력은 유용합니다. 흩어진 원문 속에서 더 "수요"에 가까운 것을 뽑아 주기 때문입니다.
+이런 출력은 매우 유용합니다. 왜냐하면 산발적인 원래 말에서 "니즈"에 더 가까운 것을 추출해 주기 때문입니다.
 
-### 12.3 AI에게 가벼운 웹 조사를 한 번 맡기기
+### 12.3 AI로 가벼운 온라인 조사 대행
 
-대규모 인터뷰를 시작하기 전, AI에게 아주 가벼운 외부 정보 스캔을 맡길 수 있습니다. 예를 들면 다음입니다.
+대규모 인터뷰를 시작하기 전에, AI에게 아주 가벼운 외부 정보 스캔을 먼저 맡길 수 있습니다. 예를 들어:
 
-- 공개 포럼이나 커뮤니티에서 사람들이 이 문제를 어떻게 불평하는가
-- 시장에 이미 있는 제품들은 주로 어느 층의 문제를 해결하는가
-- 사용자가 가장 흔히 쓰는 대체 방안은 무엇인가
-- 흔한 평가에서 사람들이 가장 만족하고 불만족하는 지점은 무엇인가
+- 공개 포럼이나 커뮤니티에서, 사람들이 이 문제를 어떻게 불만을 제기하는지
+- 시장에 이미 있는 제품이 주로 어떤 레이어의 문제를 해결하는지
+- 사용자의 가장 흔한 대체 솔루션이 무엇인지
+- 흔한 평가에서, 사람들이 가장 만족하는 점과 가장 불만족스러운 점이 무엇인지
 
-이 조사는 실제 사용자 인터뷰를 대체할 수 없지만, Discover 단계의 워밍업으로 매우 적합하며 먼저 문제 지도를 만드는 데 도움을 줍니다.
+이런 조사는 실제 사용자 인터뷰를 대체할 수 없지만, Discover 단계의 준비 운동으로 매우 적합하여, 먼저 문제 지도를 구축하는 데 도움이 됩니다.
 
-간단한 입력 예시는 다음입니다.
+간단한 입력은 다음과 같을 수 있습니다:
 
 ```text
-조사해 줘.
-"대학생이 이력서를 고치고 인턴십에 지원할 때 가장 흔히 겪는 고통은 무엇인가?"
-공개 포럼, 경험 글, 취업 커뮤니티에서 사람들이 직접 말한 내용을 우선 봐 줘.
-가장 흔한 문제 5개로 정리해 줘.
+조사해 주세요:
+"대학생이 이력서를 수정하고 인턴십에 지원할 때 가장 흔한 페인포인트는 무엇인가요?"
+공개 포럼, 경험 글, 구직 커뮤니티에서 사람들이 직접 한 말을 우선으로 봐 주세요.
+가장 흔한 문제 5가지로 정리해 주세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
-흔한 고통 정리:
+흔한 페인포인트 정리:
 
-1. 이력서에 무엇을 써야 할지 모르고 경험이 너무 적다.
-2. 직무마다 어떻게 다르게 수정해야 할지 모른다.
-3. 여러 번 고쳤지만 충분히 좋은지 계속 확신하지 못한다.
-4. 믿을 만한 사람에게 봐 달라고 하기 어렵다.
-5. 지원 절차가 복잡해 쉽게 미룬다.
+1. 이력서에 뭘 써야 할지 모름, 경험이 너무 적음
+2. 다른 직무에 맞게 어떻게 수정해야 할지 모름
+3. 여러 버전을 수정했지만, 여전히 충분히 좋은지 확신이 안 됨
+4. 신뢰할 수 있는 사람에게 검토를 부탁할 수 없음
+5. 지원 프로세스가 복잡해서, 미루기 쉬움
 ```
 
-이런 출력은 최종 결론으로 삼을 수는 없지만, 어떤 문제를 먼저 인터뷰할지 결정하는 데 적합합니다.
+이런 출력은 최종 결론으로 사용할 수 없지만, 어떤 문제를 우선적으로 인터뷰할지 결정하는 데 먼저 도움이 됩니다.
 
-### 12.4 AI에게 "반대편" 역할을 맡기기
+### 12.4 AI를 "반대편 역할"로 활용
 
-많은 경우 우리는 자기 아이디어에 감정적으로 너무 붙어 있습니다. AI에게 일부러 비판하는 사람 역할을 맡겨 문제를 더 명확하게 말하도록 압박할 수 있습니다.
+많은 경우, 우리는 자신의 아이디어에 너무 감정적으로 빠집니다. AI에게 특히 비판적인 역할을 맡겨, 문제를 더 명확하게 말하도록 강제할 수 있습니다:
 
 ```text
-매우 엄격한 제품 리서치 컨설턴트 역할을 해 줘.
-아래는 내 JTBD 가설이야: [가설]
-다음 관점에서 비판해 줘.
-1. 이 장면이 너무 넓은가
-2. 이 job이 진짜 진전이 아니라 기능으로 쓰였는가
-3. 대체 방안이 너무 약한가
-4. 성공 기준이 충분히 명확하지 않은가
-5. 이 가설에서 가장 먼저 검증해야 할 위험은 무엇인가
+매우 엄격한 제품 연구 컨설턴트 역할을 해 주세요.
+다음은 내 JTBD 가설입니다: [가설]
+다음 관점에서 비판해 주세요:
+1. 이 시나리오가 너무 넓은지
+2. 이 job이 진정한 진전이 아니라 기능으로 작성되었는지
+3. 대체 솔루션이 너무 약한지
+4. 성공 기준이 충분히 명확하지 않은지
+5. 이 가설에서 가장 검증이 필요한 위험이 무엇인지
 ```
 
-이렇게 하면 당신이 수요를 보고 있는지, 아니면 좋아하는 솔루션만 보고 있는지 더 빨리 발견할 수 있습니다.
+이렇게 하면 자신이 니즈를 보고 있는지, 아니면 자신이 좋아하는 솔루션만 보고 있는지 더 빨리 발견할 수 있습니다.
 
-## 📚 Assignments
+## 📚 과제
 
-위 내용을 바탕으로 다음 과제를 완료하세요.
+위 내용을 바탕으로 다음 과제를 완료해 주세요:
 
-1. 최근 만들고 싶은 제품 아이디어 하나를 고르고, JTBD 공식 한 문장으로 명확하게 쓰세요.
-2. 이 아이디어에 5개 요소를 보충하세요: 장면, 트리거, 진전, 대체 방안, 성공 기준.
-3. 잠재 사용자 3명을 찾아 최소 한 번은 "최근에 이 문제를 만난 것은 언제였나요?"라고 물어보세요.
-4. 인터뷰 원문을 AI에게 주고 검증 우선순위가 높은 JTBD 가설 3개로 정리하세요.
+1. 최근에 만들고 싶은 제품 아이디어를 하나 골라, JTBD 공식 한 문장으로 명확하게 작성하세요
+2. 이 아이디어에 대해 5가지 요소를 보완하세요: 시나리오, 트리거, 진전, 대체 솔루션, 성공 기준
+3. 잠재 사용자 3명을 찾아, 적어도 한 번은 "최근에 이 문제를 만난 것이 언제였나요"라고 물어보세요
+4. 인터뷰 원래 말을 AI에게 전달하여, 우선적으로 검증할 가치가 있는 JTBD 가설 3개로 정리하세요
 
-## 더 읽어 보기
+## 더 읽어볼 만한 자료
 
 - [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
 - [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
 - [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
 - [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
-
diff --git a/docs/ko-kr/stage-1/appendix-mom-test/index.md b/docs/ko-kr/stage-1/appendix-mom-test/index.md
index ec748dd..71e7f1e 100644
--- a/docs/ko-kr/stage-1/appendix-mom-test/index.md
+++ b/docs/ko-kr/stage-1/appendix-mom-test/index.md
@@ -11,198 +11,198 @@ const duration = '약 <strong>1.5시간</strong>'
 
 <a id="top-mom"></a>
 
-## 본 장 안내
+## 이 장의 가이드
 
 <ChapterIntroduction
   :duration="duration"
-  :tags="['사용자 인터뷰', '수요 검증', '사용자 리서치', '제품 조사']"
-  coreOutput="진짜 정보를 더 잘 끌어내는 인터뷰 질문 묶음 1개"
-  expectedOutput="사용자의 예의상 격려를 검증으로 착각하지 않고, 실제 행동으로 방향을 판단할 수 있게 됨"
+  :tags="['사용자 인터뷰', '수요 검증', '사용자 조사', '제품 조사']"
+  coreOutput="실제 정보를 더 잘 끌어낼 수 있는 인터뷰 질문 세트 1개"
+  expectedOutput="사용자의 예의상 응원을 검증으로 받아들이지 않고, 실제 행동으로 방향을 판단하게 됩니다"
 >
 
-많은 사람이 처음 제품 조사를 할 때 가장 중요한 것이 "사람을 찾아 이야기해 보는 것"이라고 생각합니다. 그래서 친구, 동료, 심지어 가족에게 묻습니다.
+많은 사람이 처음 제품 조사를 할 때, 가장 중요한 것이 "누군가와 이야기하는 것"이라고 생각합니다. 그래서 친구, 동료, 심지어 가족에게 물어봅니다:
 
-- 내 아이디어 어때?
-- 이런 제품이 있으면 쓸 것 같아?
-- 이 기능 괜찮아 보이지 않아?
+- 내 이 아이디어 어때?
+- 이런 제품이 있다면, 쓸 것 같아?
+- 이 기능 꽤 괜찮지 않아?
 
-상대도 보통 매우 힘이 되는 피드백을 줍니다.
+상대방도 보통 매우 고무적인 피드백을 줍니다:
 
-- 괜찮은데?
-- 유용해 보인다
-- 한번 해 봐도 좋을 것 같아
+- 꽤 좋은데
+- 쓸모 있어 보여
+- 한번 해 보면 좋을 것 같아
 
-문제는 이런 답변이 대개 판단에 도움이 되지 않는다는 점입니다. 그것들은 예의, 응원, 또는 그 자리에서 당신의 흥을 깨고 싶지 않은 자연스러운 반응에 더 가깝습니다. 당신은 "시장 검증"을 얻었다고 생각하지만, 사실은 의사결정에 쓰기 어려운 위로만 잔뜩 모은 것일 수 있습니다.
+문제는, 이런 대답이 보통 판단에 도움이 되지 않는다는 것입니다. 그것들은 예의, 지지, 또는 당장 기분을 상하게 하고 싶지 않은 자연스러운 반응에 더 가깝습니다. 자신이 "시장 검증"을 얻었다고 생각하지만, 사실은 판단에 사용하기 어려운 위안을 모았을 뿐입니다.
 
-The Mom Test 방법은 바로 이 문제를 해결하기 위해 만들어졌습니다. 이 방법은 우리에게 이렇게 상기시킵니다. **사용자가 일부러 당신을 속이는 것이 아니라, 당신의 질문 방식이 상대를 듣기 좋지만 쓸모없는 답으로 자연스럽게 이끈다**는 것입니다.
+The Mom Test 방법론은 바로 이 문제를 해결하기 위해 만들어졌습니다. 이것은 우리에게 상기시킵니다: **사용자가 일부러 거짓말을 하는 것이 아니라, 질문하는 방식 자체가 상대를 듣기 좋지만 쓸모없는 대답으로 자연스럽게 유도하고 있는 것입니다.**
 
 </ChapterIntroduction>
 
 ::: info 최소 SOP
-**목적**: 읽고 나면 사용자와 어떻게 이야기해야 "듣기 좋다"만 듣지 않고, 방향 판단에 도움이 되는 정보를 실제로 물어낼 수 있는지 더 명확해집니다.
+**목적**: 이 글을 읽은 후, 사용자와 어떻게 대화해야 "꽤 좋아 보인다"만 듣지 않고, 정말로 방향을 판단하는 데 도움이 되는 정보를 끌어낼 수 있는지 더 명확히 알게 됩니다.
 
-**행동 항목**: 원래 물어보려던 질문 5개를 바꾸고, 우선 "최근 한 번은 언제였나요", "그때 어떻게 처리했나요"를 묻습니다.
+**실행 항목**: 원래 물어보려고 했던 5개의 질문을 바꾸고, "최근에 언제 일어났는지", "그때 어떻게 처리했는지"를 우선으로 물어보세요.
 
-**결과**: 무엇이 의견이고, 무엇이 판단을 뒷받침하는 증거인지 더 쉽게 구분할 수 있습니다.
+**결과**: 어떤 것이 의견이고, 어떤 것이 판단을 뒷받침할 수 있는 진짜 증거인지 더 쉽게 구분할 수 있게 됩니다.
 
-**키워드 이동**: [The Mom Test란 무엇인가](#mom-what) · [세 가지 핵심 원칙](#mom-principles) · [AI는 어떻게 도와줄 수 있나](#mom-ai)
+**키워드 바로가기**: [The Mom Test란](#mom-what) · [세 가지 핵심 원칙](#mom-principles) · [AI가 도와주는 방법](#mom-ai)
 :::
 
-## 다음 내용을 배우게 됩니다
+## 배울 내용
 
-1. The Mom Test가 정확히 어떤 문제를 해결하는지, 왜 많은 "사용자 조사"가 실제 정보를 조사하지 못하는지
-2. 이 방법의 핵심 원칙: 의견은 적게 묻고 행동을 더 묻기, 가정보다는 사실을 더 묻기
-3. 거짓 양성 피드백을 쉽게 얻는 질문을 더 가치 있는 인터뷰 질문으로 바꾸는 법
-4. The Mom Test를 JTBD, 수요 검증, MVP 판단과 연결해 사용하는 법
+1. The Mom Test가 정확히 무엇을 해결하는지, 왜 많은 "사용자 조사"가 사실 실제 정보를 조사하지 못했는지
+2. 이 방법의 가장 핵심적인 몇 가지 원칙: 의견은 적게 묻고, 행동은 많이 묻기; 가정은 적게 묻고, 사실은 많이 묻기
+3. 가양성 피드백을 얻기 쉬운 질문을 어떻게 더 가치 있는 인터뷰 질문으로 바꾸는지
+4. The Mom Test를 JTBD, 수요 검증, MVP 판단과 어떻게 연결해서 사용하는지
 
 <a id="mom-what"></a>
-## [1. The Mom Test란 정확히 무엇인가](#top-mom)
+## [1. The Mom Test란 무엇인가](#top-mom)
 
-The Mom Test는 Rob Fitzpatrick의 동명 책에서 나온 방법입니다. 이름은 농담처럼 들리지만 핵심을 아주 정확히 찌릅니다.
+The Mom Test는 Rob Fitzpatrick의 동명의 책에서 유래했습니다. 이름은 농담처럼 들리지만, 핵심은 매우 정확합니다:
 
-**당신의 엄마조차도 "이건 별로인 아이디어야"라고 직접 말하기는 어렵습니다.**
+**당신의 엄마조차도 "이건 형편없는 아이디어야"라고 직접 말하기 어렵습니다.**
 
-그 이유는 엄마가 정직하지 않아서가 아닙니다.
+그 이유는 그녀가 정직하지 않아서가 아니라:
 
-- 당신을 상처 입히고 싶지 않습니다.
-- 무의식적으로 당신을 격려합니다.
-- 당신의 표현 방식에 맞춰 쉽게 대답합니다.
+- 당신을 상처 주고 싶지 않아서
+- 무의식적으로 당신을 응원하게 되어서
+- 당신의 표현 방식에 따라 대답하기 쉬워서
 
-사실 엄마뿐 아니라 친구, 동료, 예전 동창, 심지어 많은 낯선 사람도 당신의 제품 아이디어를 마주하면 비슷한 "긍정 피드백"을 주는 경우가 많습니다. 이것은 수요가 진짜 있다는 뜻이 아니라, 질문을 듣기 좋은 답이 나오기 쉬운 형태로 했다는 뜻입니다.
+사실 엄마뿐만 아니라, 친구, 동료, 예전 동학, 심지어 많은 낯선 사람도 당신의 제품 아이디어 앞에서 비슷한 "긍정적 피드백"을 줍니다. 이것이 수요가 정말로 존재한다는 것을 의미하지는 않으며, 단지 당신이 질문을 누구나 당신의 대답에 맞춰주기 쉬운 형태로 만들었다는 것을 의미할 뿐입니다.
 
-그래서 The Mom Test의 핵심은 "엄마에게 묻지 마라"가 아닙니다.
+그래서 The Mom Test의 핵심은 결코 "엄마에게 묻지 마라"가 아니라:
 
-**누구라도 당신에게 맞장구치게 만드는 형태로 질문하지 말라는 것입니다.**
+**누구에게나 당신의 대답에 맞춰주게 만드는 방식으로 질문하지 마라.**
 
-이 방법이 진짜로 가르치려는 것은 대화를 통해 실제 수요에 더 가까운 정보를 얻는 법이지, 스스로 기분 좋아지는 댓글을 잔뜩 모으는 법이 아닙니다.
+이 방법이 정말로 가르치고 싶은 것은, 대화를 통해 실제 수요에 더 가까운 정보를 얻는 방법이며, 자신을 기분 좋게 하는 댓글을 모으는 것이 아닙니다.
 
-## 2. 해결하는 핵심 문제는 무엇인가
+## 2. 해결하려는 핵심 문제
 
-The Mom Test가 주로 해결하는 것은 매우 흔한 인지 착각입니다.
+The Mom Test가 주로 해결하는 것은 매우 흔한 인지적 착각입니다:
 
-**예의상 긍정 피드백을 실제 수요로 착각하는 것**입니다.
+**예의상의 긍정적 피드백을 실제 수요로 착각하는 것.**
 
-예를 들어 이렇게 묻는다고 해 봅시다.
+예를 들어 물어본다면:
 
-- 이 App 아이디어 어때요?
-- AI가 이력서를 써 주는 도구를 만들면 쓸 것 같아요?
-- 이 기능은 가치 있어 보이나요?
+- 이 앱 아이디어 어때요?
+- AI가 이력서 써주는 도구를 만들면, 쓸 건가요?
+- 이 기능 가치 있지 않나요?
 
-이 질문들의 공통점은 다음입니다.
+이런 질문들의 공통점은:
 
-- 모두 "의견"을 묻는다.
-- 모두 약간의 암시를 담고 있다.
-- 모두 아직 일어나지 않은 미래를 이야기한다.
+- 모두 "의견"을 묻고 있음
+- 모두 약간의 암시를 담고 있음
+- 모두 아직 일어나지 않은 미래에 대해 이야기하고 있음
 
-사람이 "의견"과 "미래 가정"에 답할 때는 보통 안정적이지 않습니다. 많은 사람은 자신의 흥미, 실행력, 미래 구매 의사를 과대평가합니다.
+"의견"과 "미래 가정"에 대한 대답은 보통 불안정합니다. 많은 사람이 자신의 흥미, 실행력, 미래의 구매 의향을 과대평가합니다.
 
-그래서 The Mom Test는 이렇게 알려 줍니다.
+그래서 The Mom Test는 상기시킵니다:
 
-- 다른 사람이 내 아이디어를 어떻게 평가하는지 너무 믿지 마세요.
-- 다른 사람이 미래 행동을 어떻게 예측하는지 너무 믿지 마세요.
-- 가능한 한 이미 일어난 사용자의 실제 행동으로 돌아가세요.
+- 다른 사람이 당신의 아이디어에 대한 평가를 너무 믿지 마세요
+- 다른 사람의 미래 행동 예측을 너무 믿지 마세요
+- 사용자가 이미 일으킨 실제 행동으로 최대한 되돌아가세요
 
-"쓸 것 같나요?"보다 "지난번에 이 일을 어떻게 처리했나요?"가 대개 진실에 더 가깝기 때문입니다.
+"쓸 건가요?"보다 "저번에 이 일 어떻게 처리했어요?"가 보통 진실에 더 가깝기 때문입니다.
 
 <a id="mom-principles"></a>
 ## [3. 세 가지 핵심 원칙](#top-mom)
 
-가장 중요한 부분만 먼저 기억하고 싶다면 아래 세 가지 원칙을 기억하세요.
+가장 중요한 부분만 먼저 기억하고 싶다면, 다음 세 가지 원칙을 먼저 기억하세요.
 
-### 3.1 내 아이디어는 적게 말하고, 사용자의 과거 실제 경험을 더 이야기하게 하기
+### 3.1 아이디어를 적게 이야기하고, 사용자의 과거 실제 경험을 많이 이야기하기
 
-많은 무효 인터뷰는 시작하자마자 자기 솔루션을 설명하고, 자신이 얼마나 신났는지 말하고, 어떤 제품을 만들 준비인지 이야기합니다. 문제는 당신이 너무 많이 말하는 순간, 상대가 "맞춰 주기", "격려하기" 모드로 바뀌기 쉽다는 점입니다.
+많은 비효율적 인터뷰가 처음부터 자신의 솔루션을 설명하고, 자신이 얼마나 흥분했는지, 어떤 제품을 만들려고 하는지 이야기합니다. 문제는, 너무 많이 이야기하면 상대가 쉽게 "협조하기", "응원하기" 상태로 전환된다는 것입니다.
 
-반대로 더 좋은 방식은 상대의 경험에 초점을 두는 것입니다.
+반면, 더 나은 방법은 상대방의 경험에 초점을 맞추는 것입니다:
 
-- 최근에 이 문제를 만난 것은 언제였나요?
+- 최근에 이 문제를 만난 것이 언제였나요?
 - 그때 무엇을 하고 있었나요?
-- 결국 어떻게 처리했나요?
+- 마지막에 어떻게 처리했나요?
 - 어느 단계가 가장 번거로웠나요?
 
-이런 질문은 대화를 상상 속 선호가 아니라 현실로 더 자연스럽게 되돌립니다.
+이런 질문이 대화를 자연스럽게 현실로 되돌리고, 상상 속의 선호에 머물지 않게 한다는 것을 발견할 것입니다.
 
-### 3.2 추상적 의견은 적게 묻고, 구체적 사실을 더 묻기
+### 3.2 추상적 의견은 적게 묻고, 구체적 사실은 많이 묻기
 
-"이 기능 괜찮은 것 같아요", "듣기에는 좋아요", "조금 쓸모 있어 보이네요" 같은 표현은 너무 추상적이라 제품 의사결정에 쓰기 어렵습니다.
+"이 기능 꽤 좋은 것 같아", "괜찮아 보여", "좀 쓸모 있을 것 같아" 같은 표현은 모두 너무 추상적이어서, 제품 의사결정을 지도하기 어렵습니다.
 
-더 가치 있는 정보는 보통 이런 모습입니다.
+더 가치 있는 정보는 보통 이렇게 생겼습니다:
 
-- 지난주에 이 일 때문에 2시간을 썼어요.
-- 지금은 Excel과 WeChat으로 버티고 있어요.
-- 지난달 이미 비슷한 도구에 돈을 낸 적이 있어요.
-- 제가 가장 두려운 건 느린 것이 아니라 잘못하는 거예요.
+- 저번 주에 이 일 때문에 2시간을 낭비했어요
+- 지금 Excel과 위챗으로 버티고 있어요
+- 지난달에 비슷한 도구에 이미 돈을 썼어요
+- 제일 무서운 건 틀리는 거지, 느린 게 아니에요
 
-이런 정보가 문제 강도, 빈도, 지불 가능성을 판단하는 데 진짜 도움이 됩니다.
+이것이 바로 문제의 강도, 빈도, 결제 가능성을 판단하는 데 정말로 도움이 되는 정보입니다.
 
-### 3.3 사용자가 원하는 솔루션을 적게 묻고, 지금 어떻게 해결하는지 더 보기
+### 3.3 사용자가 어떤 솔루션을 원하는지 적게 묻고, 지금 어떻게 문제를 해결하는지 많이 보기
 
-사용자는 자신의 어려움을 설명하는 데는 능숙하지만, 해결책을 설계하는 데 항상 능숙하지는 않습니다.
+사용자는 자신의 고충을 설명하는 데 능숙하지만, 솔루션을 설계하는 데는 반드시 능숙하지는 않습니다.
 
-이렇게 묻는다면:
+물어본다면:
 
-- AI가 자동으로 이걸 해 주면 좋겠어요?
-- 지능형 기능을 넣으면 도움이 될까요?
+- AI가 이걸 자동으로 해주면 어떨까요?
+- 스마트 기능을 추가하면 도움이 될까요?
 
-대개 얻는 것은 어떤 솔루션에 대한 흐릿한 태도일 뿐, 수요 자체가 아닙니다.
+얻는 것은 보통 어떤 솔루션에 대한 모호한 태도일 뿐, 수요 자체는 아닙니다.
 
-더 좋은 질문은 다음입니다.
+더 나은 질문은:
 
-- 지금 이 문제를 어떤 방법으로 처리하나요?
-- 왜 그 방법을 선택했나요?
-- 그 방법은 어디가 충분하지 않나요?
+- 지금 이 문제를 어떤 방법으로 처리하시나요?
+- 왜 이 방식을 선택했나요?
+- 어디가 충분히 좋지 않나요?
 
-기존 대체 방안을 명확히 보는 것은 "무엇을 원하세요?"라고 직접 묻는 것보다 훨씬 중요합니다.
+기존 대체 솔루션을 파악하는 것이 "무엇을 원하시나요"를 직접 묻는 것보다 보통 더 중요합니다.
 
-## 4. 왜 사람들은 늘 듣기 좋지만 쓸모없는 답을 줄까
+## 4. 왜 사람들은 항상 듣기 좋지만 쓸모없는 대답을 줄까
 
-이 점을 이해하면 인터뷰에서 오판이 훨씬 줄어듭니다.
+이것을 이해하면, 인터뷰에서 오해가 많이 줄어듭니다.
 
-### 4.1 사람은 무의식적으로 예의를 지킨다
+### 4.1 사람은 무의식적으로 예의를 지킴
 
-특히 대화 상대와 관계가 있을 때, 상대는 직접 이렇게 말하기 어렵습니다.
+특히 대화 상대와 관계가 있을 때, 직접 말하기 어렵습니다:
 
-- 이 방향은 별로인 것 같아요.
-- 저는 절대 안 쓸 것 같아요.
-- 이 문제는 제게 그렇게 중요하지 않아요.
+- 이 방향은 별로인 것 같아요
+- 저 절대 안 써요
+- 이 문제는 저한테 그렇게 중요하지 않아요
 
-대신 "괜찮은데", "기회가 있으면 해 봐도 좋겠다"라고 말할 가능성이 큽니다.
+대신 "꽤 좋은데", "기회가 되면 한번 해 봐요"라고 말할 가능성이 높습니다.
 
-### 4.2 사람은 미래의 자신을 과대평가한다
+### 4.2 사람은 미래의 자신을 과대평가함
 
-많은 사람은 자신이 미래에 진심으로 이렇게 될 것이라 믿습니다.
+많은 사람이 진심으로 미래에 자신이 이렇게 할 것이라고 믿습니다:
 
-- 더 자율적일 것이다.
-- 더 열심히 배울 것이다.
-- 더 기꺼이 돈을 낼 것이다.
-- 새 도구를 더 기꺼이 시도할 것이다.
+- 더 자제할 것
+- 더 열심히 공부할 것
+- 더 기꺼이 결제할 것
+- 더 기꺼이 새로운 도구를 시도할 것
 
-그래서 "있으면 아마 쓸 것 같아요"는 종종 미래에 정말 쓴다는 뜻이 아닙니다.
+그래서 "있으면 쓸 것 같아요"라는 말은, 종종 미래에 정말로 쓴다는 것과 같지 않습니다.
 
-### 4.3 질문 방식 자체가 답을 유도한다
+### 4.3 질문 방식 자체가 대답을 유도함
 
-이렇게 물을 때:
+물어본다면:
 
-- 내 아이디어 괜찮지 않아?
-- 이 기능이 당신에게 도움이 되지 않을까?
+- 내 이 아이디어 꽤 좋지 않아?
+- 이 기능 당신에게 도움이 많이 되지 않아?
 
-사실 질문 안에 이미 "정답"을 몰래 넣은 것입니다.
+사실 이미 "정답"을 몰래 질문에 넣은 것입니다.
 
-그래서 The Mom Test는 특히 강조합니다. **인터뷰를 인정을 구하는 자리로 만들지 마세요.**
+이것이 The Mom Test가 특히 강조하는 이유입니다: **인터뷰를 인정을 찾는 과정으로 만들지 마세요.**
 
-## 5. 직접 비교: 어떤 질문은 망하기 쉽고, 어떤 질문은 더 가치 있는가
+## 5. 직접 비교: 어떤 질문이 망가지기 쉽고, 어떤 질문이 더 가치 있는지
 
-아래 비교는 거의 모든 초보자가 바로 써먹을 수 있습니다.
+아래 비교는 거의 모든 초보자가 사용하는 것입니다.
 
-| 망하기 쉬운 질문 | 더 가치 있는 질문 |
+| 망가지기 쉬운 질문 | 더 가치 있는 질문 |
 | --- | --- |
-| 내 아이디어 어때요? | 최근에 이 문제를 만난 것은 언제였나요? |
-| 이런 제품이 있으면 쓸 건가요? | 지금은 이 일을 어떻게 처리하고 있나요? |
-| 이 기능에 돈을 낼 의향이 있나요? | 지난번 이 문제 때문에 돈을 쓴 적이 있나요? 무엇에 썼나요? |
-| 이 기능이 중요하다고 생각하나요? | 이 흐름에서 가장 짜증 나고, 느리고, 불안한 단계는 무엇인가요? |
-| AI가 자동으로 도와주면 좋겠나요? | 지금 더 편한 해결책을 아직 찾지 못한 이유는 무엇인가요? |
+| 내 이 아이디어 어때요? | 최근에 이 문제를 만난 것이 언제였나요? |
+| 이 제품이 있으면 쓸 건가요? | 지금 이 일을 어떻게 처리하고 계세요? |
+| 이 기능에 결제할 의향이 있나요? | 저번에 이 문제 때문에 돈을 써본 적이 있나요? 무엇에 썼나요? |
+| 이 기능이 중요하다고 생각하시나요? | 이 과정에서 가장 번거롭고, 가장 느리고, 가장 불안한 단계는 어디인가요? |
+| AI가 자동으로 해주면 어떨까요? | 지금 왜 더 편한 해결책을 아직 못 찾았나요? |
 
-이 표에서 가장 중요한 것은 구체적인 문장이 아니라 그 뒤의 방향입니다.
+이 표에서 가장 중요한 것은 구체적인 문장이 아니라, 배후의 방향입니다:
 
 - 의견에서 사실로
 - 미래에서 과거로
@@ -210,381 +210,380 @@ The Mom Test가 주로 해결하는 것은 매우 흔한 인지 착각입니다.
 
 ## 6. 제로 베이스도 바로 사용할 수 있는 인터뷰 리듬
 
-지금 바로 사람을 찾아 이야기하고 싶다면 아래 순서를 그대로 따라도 됩니다.
+지금 당장 누군가와 이야기하러 가고 싶다면, 다음 순서대로 진행하세요.
 
-### 6.1 시작: 내가 배우는 중이지 팔려고 온 것이 아니라고 설명하기
+### 6.1 시작: 판매가 아니라 학습하고 있다고 설명
 
-예를 들면:
+예를 들어:
 
-> 요즘 사람들이 이 문제를 어떻게 처리하는지 조사하고 있어요. 먼저 실제 상황을 이해하려는 것이지, 뭔가를 팔러 온 것은 아닙니다.
+> 요즘 다들 이런 문제를 어떻게 처리하는지 연구하고 있어요. 실제 상황을 먼저 파악하고 싶어서, 뭔가 팔러 온 건 아니에요.
 
-이 표현은 상대가 "긍정 피드백을 줘야 한다"는 심리적 부담을 내려놓기 쉽게 합니다.
+이런 표현은 상대가 "긍정적인 피드백을 줘야 해"라는 심리적 부담을 더 쉽게 내려놓게 합니다.
 
-### 6.2 최근의 실제 경험부터 묻기
+### 6.2 최근 실제 경험에서 시작
 
-아래 질문으로 시작할 수 있습니다.
+이런 질문으로 시작할 수 있습니다:
 
-- 최근에 이 문제를 만난 것은 언제였나요?
-- 그때 정확히 무슨 일이 있었나요?
-- 처음에는 어떻게 처리하려 했나요?
+- 최근에 이 문제를 만난 것이 언제였나요?
+- 그때 무슨 일이 있었나요?
+- 첫 반응은 어떻게 처리했나요?
 
-대화가 구체적인 사건으로 들어가면 정보 품질은 보통 뚜렷하게 올라갑니다.
+대화가 구체적인 사건으로 들어가면, 정보의 질이 보통 눈에 띄게 향상됩니다.
 
-### 6.3 행동, 비용, 대체 방안을 계속 캐묻기
+### 6.3 행동, 비용, 대체 솔루션을 계속 추적
 
-이어서 묻습니다.
+계속 물어보세요:
 
-- 지금은 어떤 방법으로 해결하나요?
-- 그 방법에서 가장 불편한 점은 무엇인가요?
-- 이 일 때문에 시간, 돈, 에너지를 얼마나 썼나요?
-- 다른 방법도 시도해 봤나요? 왜 계속 쓰지 않았나요?
+- 지금 어떤 방법으로 해결하고 계세요?
+- 이 방법에서 가장 불편한 점은 무엇인가요?
+- 이 일에 시간, 돈, 또는 에너지를 얼마나 썼나요?
+- 다른 방법도 시도해 보셨나요? 왜 계속 사용하지 않았나요?
 
-### 6.4 마지막에 고통감과 우선순위 판단하기
+### 6.4 마지막에 고통과 우선순위 판단
 
-"아픈가요?"라고 직접 묻지 않아도 됩니다. 세부 정보에서 판단할 수 있습니다.
+"아픈지 아닌지"를 직접 물어볼 필요 없이, 세부 사항에서 판단할 수 있습니다:
 
-- 자주 만나는 문제인가
-- 이미 적극적으로 보완하고 있는가
-- 이미 비용을 지불할 의향을 보였는가
-- 말할 때 뚜렷한 감정이 실려 있는가
+- 자주 겪는 일인지
+- 이미 스스로 해결책을 찾고 있는지
+- 이미 비용을 지불할 의향이 있는지
+- 이야기할 때 뚜렷한 감정이 담겨 있는지
 
-이것들이 "이게 당신의 고통점인가요?"라는 한 문장보다 훨씬 유용합니다.
+이 모든 것이 "이게 당신의 페인포인트인가요?" 한마디보다 더 유용합니다.
 
 ## 7. 더 완전한 예시
 
-"AI가 대학생 이력서 수정을 돕는" 제품을 만들고 싶다고 가정해 봅시다.
+"AI로 대학생의 이력서를 수정하는" 제품을 만들고 싶다고 가정해 봅시다.
 
-### 잘못된 질문 방식
+### 잘못된 질문
 
-동급생에게 이렇게 묻습니다.
+학우에게 물어봅니다:
 
-> AI 이력서 최적화 도구를 만들고 싶은데, 어때?  
-> 직무에 따라 이력서를 자동으로 고쳐 준다면 쓸 것 같아?
+> AI 이력서 최적화 도구를 만들고 싶은데, 어때요?
+> 공고에 맞게 이력서를 자동으로 수정해 준다면, 쓸 건가요?
 
-이때 상대는 이렇게 말할 가능성이 큽니다.
+이때 상대는 아마 이렇게 말할 것입니다:
 
-- 괜찮아 보여
-- 유용할 것 같아
-- 무료면 한번 써 볼게
+- 꽤 좋은 것 같아
+- 쓸모 있을 것 같아
+> 무료면 써 볼게
 
-이 답변으로는 수요가 얼마나 강한지 거의 판단할 수 없습니다.
+이런 대답은 수요가 얼마나 강한지 판단하는 데 거의 도움이 되지 않습니다.
 
-### 더 좋은 질문 방식
+### 더 나은 질문
 
-이렇게 바꿔 물을 수 있습니다.
+이렇게 바꿀 수 있습니다:
 
-> 최근에 이력서를 고친 것은 언제였나요?  
-> 그때 왜 고쳐야 했나요?  
-> 어떻게 고쳤나요?  
-> 어느 단계가 가장 막혔나요?  
-> 다른 사람에게 봐 달라고 한 적이 있나요?  
-> 이력서 때문에 돈을 쓰거나 많은 시간을 쓴 적이 있나요?
+> 최근에 이력서 수정한 게 언제였어?
+> 그때 왜 수정했어?
+> 어떻게 수정했어?
+> 어느 단계가 가장 막혔어?
+> 다른 사람에게 검토를 부탁해 본 적 있어?
+> 예전에 이력서 때문에 돈을 쓰거나 많은 시간을 쓴 적 있어?
 
-이 질문을 통해 다음 정보를 얻을 수 있습니다.
+이런 질문을 통해 얻을 수 있는 정보는:
 
-- 많은 사람은 못 쓰는 것이 아니라 직무별로 어떻게 고쳐야 할지 모른다.
-- 가장 아픈 것은 레이아웃이 아니라 "어떤 경험을 써야 할지 모르겠다"이다.
-- 그들이 미루는 것은 게으름 때문이 아니라 매번 이력서 수정이 매우 소모적이기 때문이다.
-- 그들은 이미 선배 조언, 템플릿 사이트, AI 도구, 친구에게 부탁하기로 겨우 해결하고 있다.
+- 많은 사람이 작성 방법을 모르는 것이 아니라, 다른 직무에 맞게 재작성하는 방법을 모른다는 것
+- 가장 아픈 것이 레이아웃이 아니라, "어떤 경험이 쓸 만한지 모르는 것"이라는 것
+- 그들이 미루는 것이 게을러서가 아니라, 매번 이력서를 수정하는 것이 너무 소모적이기 때문이라는 것
+- 이미 선배 조언, 템플릿 웹사이트, AI 도구, 친구 검토로 간신히 해결하고 있다는 것
 
-이제 실제 문제에 훨씬 가까워졌습니다.
+이때, 진짜 문제에 훨씬 더 가까워집니다.
 
-## 8. The Mom Test와 JTBD는 어떻게 함께 쓰는가
+## 8. The Mom Test와 JTBD를 어떻게 함께 사용할까
 
-JTBD가 "사용자가 어떤 진전을 이루고 싶어 하는지"를 보게 해 준다면, The Mom Test는 이렇게 가르쳐 주는 것에 가깝습니다.
+JTBD가 "사용자가 어떤 진전을 완수하고 싶은지"를 명확히 보게 해준다면, The Mom Test는 다음을 가르치는 것에 더 가깝습니다:
 
-**인터뷰를 통해 이 job이 정말 존재하는지 확인하는 방법**입니다.
+**인터뷰를 통해 이 job이 정말로 존재하는지 확인하는 방법.**
 
-둘은 완전히 이어서 쓸 수 있습니다.
+두 가지를 연결해서 사용할 수 있습니다:
 
-1. 먼저 JTBD로 하나의 job을 가정한다.
-2. The Mom Test 방식으로 사용자에게 최근의 실제 경험을 묻는다.
-3. 이 job이 정말 자주 발생하고, 실제이며, 우선 만들 가치가 있는지 본다.
+1. 먼저 JTBD로 job 하나를 가설로 세움
+2. The Mom Test 방식으로 사용자에게 최근 실제 경험을 물어봄
+3. 이 job이 정말로 빈도가 높고, 실제이며, 우선적으로 할 가치가 있는지 확인
 
-예를 들어 JTBD 가설이 다음과 같다고 합시다.
+예를 들어 JTBD 가설이 다음과 같다면:
 
-> 인턴십에 지원하려고 할 때, 나는 예전 이력서를 빠르게 직무에 맞는 버전으로 바꾸고 싶다. 그래야 가능한 한 빨리 지원을 완료할 수 있다.
+> 인턴십에 지원할 준비를 할 때, 기존 이력서를 공고에 맞는 버전으로 빠르게 수정하고 싶고, 최대한 빨리 지원을 완료하고 싶어.
 
-그러면 The Mom Test 스타일 질문으로 검증할 수 있습니다.
+The Mom Test 스타일의 질문으로 검증할 수 있습니다:
 
-- 최근에 지원한 것은 언제였나요?
-- 그때 이력서는 어떻게 고쳤나요?
-- 어느 문단이 가장 쓰기 어려웠나요?
-- 다 고친 뒤 충분히 좋은지 어떻게 판단했나요?
+- 최근에 지원한 게 언제였어?
+- 그때 이력서를 어떻게 수정했어?
+- 어느 부분이 가장 쓰기 어려웠어?
+- 수정한 후에 충분히 좋은지 어떻게 판단했어?
 
-이렇게 방법이 연결됩니다.
+이렇게 하면 방법이 연결됩니다:
 
-- JTBD는 수요 가설을 정의하게 도와줍니다.
-- The Mom Test는 인터뷰로 가설을 검증하게 도와줍니다.
+- JTBD가 수요 가설을 정의하는 데 도움을 줌
+- The Mom Test가 인터뷰를 통해 가설을 검증하는 데 도움을 줌
 
-## 9. 초보자가 사용자 인터뷰에서 가장 흔히 하는 오해
+## 9. 초보자가 사용자 인터뷰를 할 때 가장 흔한 오해
 
-### 9.1 인터뷰를 제품 설명회로 만들기
+### 9.1 인터뷰를 제품 소개회로 만듦
 
-자신의 생각을 너무 많이 말하면 상대는 진짜 상황을 말하기보다 당신에게 맞춰 주기 쉽습니다.
+자신의 아이디어를 너무 많이 이야기하면, 상대가 실제 상황을 알려주는 대신 당신에게 협조하기 시작합니다.
 
-### 9.2 인터뷰 대상이 전부 지인
+### 9.2 인터뷰 대상이 모두 아는 사람
 
-지인과 이야기하면 안 되는 것은 아니지만, 지인은 당신을 격려하기 더 쉽습니다. 당신을 지지하는 사람만 찾지 말고, 실제 사용자에 더 가까운 사람을 섞어야 합니다.
+아는 사람과 대화하는 것이 나쁜 것은 아니지만, 아는 사람이 당신을 응원하기 더 쉽습니다. 최소한 지인 외에 실제 사용자에 더 가까운 사람들을 섞어야 하며, 자신을 지지하는 사람만 찾아서는 안 됩니다.
 
-### 9.3 너무 일찍 기능을 추궁하기
+### 9.3 너무 일찍 기능을 추적하며 물어봄
 
-문제를 아직 명확히 하지 못했는데 버튼, 인터페이스, 기능 세부사항을 묻기 시작하면 보통 너무 일찍 해결책으로 들어가는 것입니다.
+문제를 아직 파악하지 못한 상태에서 버튼, 인터페이스, 기능 세부 사항을 추적하면, 보통 너무 일찍 솔루션 단계에 진입한 것입니다.
 
-### 9.4 "쓸 것 같다" 한마디를 검증 결과로 여기기
+### 9.4 "쓸게요" 한마디를 검증 결과로 받아들임
 
-인터뷰는 방향 판단을 도울 뿐, 검증이 완료됐다는 뜻은 아닙니다. 진짜 검증은 결국 사용자가 시간, 전환 비용, 시험 사용 행동, 심지어 지불처럼 실제 비용을 낼 의향이 있는지 봐야 합니다.
+인터뷰는 방향을 판단하는 데 도움을 줄 수 있지만, 검증이 완료된 것과 같지 않습니다. 진짜 검증은 결국 사용자가 실제 비용(시간, 전환 비용, 체험 행동, 심지어 결제)을 지불할 의향이 있는지에 달려 있습니다.
 
-### 9.5 인터뷰 후 정리하지 않기
+### 9.5 인터뷰 후 정리하지 않음
 
-이야기하고 그냥 두면 정보는 금방 흐릿한 인상으로 변합니다. 가능한 한 빨리 정리하는 것이 좋습니다.
+대화가 끝나면 정보가 빠르게 모호한 인상으로 변합니다. 최대한 빨리 정리하는 것이 좋습니다:
 
-- 자주 나타나는 문제
-- 사용자 원문 속 감정 단어
-- 현재 대체 방안
+- 빈도가 높은 문제
+- 사용자가 한 말 속의 감정 단어
+- 현재 대체 솔루션
 - 이미 지불한 비용
 - 자신의 새로운 판단
 
-## 10. 바로 복사해 쓸 수 있는 질문 목록
+## 10. 바로 복사해서 사용할 수 있는 질문 목록
 
-빨리 시작하고 싶다면 충분히 범용적인 질문 묶음이 여기 있습니다.
+빠르게 시작하고 싶다면, 여기에 충분히 범용적인 질문 세트가 있습니다.
 
 ### 시작 질문
 
-- 최근에 이 문제를 만난 것은 언제였나요?
+- 최근에 이 문제를 만난 것이 언제였나요?
 - 그때 구체적으로 무슨 일이 있었나요?
 
 ### 행동 질문
 
 - 그때 어떻게 처리했나요?
-- 왜 그 방법을 선택했나요?
+- 왜 이 방식을 선택했나요?
 
 ### 비용 질문
 
-- 이 일은 보통 시간이나 에너지를 얼마나 쓰게 하나요?
-- 이 문제를 해결하려고 돈을 쓴 적이 있나요?
+- 이 일에 보통 시간이나 에너지를 얼마나 쓰나요?
+- 해결하기 위해 돈을 써본 적이 있나요?
 
-### 대체 방안 질문
+### 대체 솔루션 질문
 
-- 다른 도구나 방법을 시도해 본 적이 있나요?
-- 왜 결국 계속 쓰지 않았나요?
+- 다른 도구나 방법을 시도해 보셨나요?
+- 왜 계속 사용하지 않았나요?
 
 ### 마무리 질문
 
-- 앞으로 같은 문제를 다시 만난다면, 가장 이상적인 해결 방식은 어떤 모습이어야 할까요?
+- 앞으로 같은 문제를 다시 만나면, 가장 이상적인 해결 방식은 어떤 것일까요?
 
-주의하세요. 이 마무리 질문은 물어봐도 되지만, 가장 뒤에 두는 것이 좋습니다. 앞에서는 바람이 아니라 사실을 얻는 것이 더 중요하기 때문입니다.
+주의: 이 마무리 질문은 물어볼 수 있지만, 뒤에 두는 것이 좋습니다. 왜냐하면 앞에서는 사실을 먼저 얻어야 하고, 소원은 나중에 얻어도 되기 때문입니다.
 
-## 11. 정리
+## 11. 요약
 
-The Mom Test의 가장 중요한 기여는 "대화를 더 잘하는" 기술을 주는 것이 아니라, 더 맑은 판단 방식을 세워 주는 것입니다.
+The Mom Test의 가장 중요한 기여는 "더 잘 채팅하는" 기술을 주는 것이 아니라, 더 명확한 판단 방식을 구축하도록 돕는 것입니다:
 
-- 다른 사람이 내 아이디어를 칭찬하는 말을 너무 빨리 믿지 마세요.
-- "있으면 쓸 것 같아요"를 실제 수요로 여기지 마세요.
-- 인터뷰가 인정을 구하는 자리가 되게 하지 마세요.
+- 다른 사람이 당신의 아이디어를 칭찬하는 것을 너무 빨리 믿지 마세요
+- "있으면 쓸게요"를 실제 수요로 받아들이지 마세요
+- 인터뷰를 인정을 찾는 과정으로 만들지 마세요
 
-진짜 가치 있는 인터뷰는 가능한 한 다음으로 돌아가야 합니다.
+진짜 가치 있는 인터뷰는, 최대한 다음 것들로 되돌아가야 합니다:
 
 - 사용자의 최근 실제 경험
-- 지금은 어떻게 처리하고 있는가
-- 이미 어떤 비용을 치렀는가
-- 어디에서 분명히 불편함을 느끼는가
+- 지금 어떻게 처리하는지
+- 이미 어떤 비용을 지불했는지
+- 어느 부분에서 분명히 불편해하는지
 
-이렇게 묻기 시작하면 얻는 정보가 때로는 그렇게 듣기 좋지 않을 수 있지만, 보통 훨씬 더 유용합니다.  
-제품을 만들 때는 **쓸모 있는 진실이 듣기 좋은 격려보다 언제나 더 중요합니다.**
+이런 식으로 물어보기 시작하면, 얻는 정보가 때때로 듣기에 그리 좋지 않을 수 있지만, 보통 더 유용합니다.
+제품을 만들 때, **유용한 진실은 항상 듣기 좋은 응원보다 더 중요합니다.**
 
 <a id="mom-ai"></a>
-## [12. AI로 사용자 인터뷰를 돕는 방법](#top-mom)
+## [12. AI를 활용해 사용자 인터뷰 하는 방법](#top-mom)
 
-The Mom Test는 본질적으로 "진짜 사람과 이야기하는" 방법이므로 AI가 실제 인터뷰를 대체할 수는 없습니다. 하지만 AI는 인터뷰 전, 중, 후에 보조 역할을 하기에 매우 적합하며, 특히 초보자의 진입 장벽을 낮추는 데 좋습니다.
+The Mom Test는 본질적으로 "실제 사람과 대화하는" 방법이므로, AI가 실제 인터뷰를 대체할 수는 없습니다. 하지만 AI는 인터뷰 전, 중, 후에 보조 역할을 하기에 매우 적합하며, 특히 초보자의 진입 장벽을 낮추는 데 도움이 됩니다.
 
-### 12.1 AI에게 "망하기 쉬운 질문"을 고쳐 쓰게 하기
+### 12.1 AI로 "망가지기 쉬운" 질문을 재작성
 
-많은 사람이 "내 아이디어 어때요"라고 물어보면 안 된다는 것을 알지만, 막상 입을 열면 다시 그런 문장으로 돌아갑니다. 준비한 질문을 AI에게 주고 고쳐 쓰게 할 수 있습니다.
+"내 이 아이디어 어때요?"라고 물으면 안 된다는 것을 알면서도, 입을 열면 여전히 이런 문장으로 돌아가는 사람이 많습니다. 준비한 질문을 먼저 AI에게 전달하여 재작성하도록 할 수 있습니다:
 
 ```text
-아래는 사용자 인터뷰에서 묻고 싶은 질문들이야.
+다음은 사용자 인터뷰를 준비하면서 물어보려는 질문입니다:
 [질문 붙여넣기]
 
-The Mom Test 원칙으로 고쳐 써 줘.
-1. 의견형 질문 삭제
-2. 미래 가정 질문 삭제
-3. 가능한 한 과거 실제 행동, 기존 대체 방안, 이미 지불한 비용을 중심으로 바꾸기
-4. 마지막에 바로 인터뷰할 수 있는 질문 8~10개 목록으로 정리
+The Mom Test의 원칙으로 재작성해 주세요:
+1. 의견형 질문은 삭제
+2. 미래 가정 질문은 삭제
+3. 과거 실제 행동, 기존 대체 솔루션, 이미 지불한 비용을 중심으로 한 질문으로 수정
+4. 마지막으로 바로 인터뷰에 사용할 수 있는 8~10개의 질문 목록으로 정리
 ```
 
-아주 초보적인 입력도 괜찮습니다.
+아주 초보적인 입력도 가능합니다:
 
 ```text
-사용자에게 이렇게 묻고 싶어.
+사용자에게 물어보고 싶은데:
 1. AI 이력서 수정 도구를 만들면 어때요?
-2. 쓸 것 같나요?
-3. 돈을 낼 의향이 있나요?
+2. 쓸 건가요?
+3. 결제할 의향이 있나요?
 
-더 좋은 질문으로 바꿔 줘.
+더 나은 질문으로 바꿔 주세요.
 ```
 
-AI가 주는 유용한 출력은 이런 모습일 수 있습니다.
+AI의 유용한 출력은 다음과 같을 수 있습니다:
 
 ```text
-고친 질문:
+재작성된 질문:
 
-1. 최근에 이력서를 고친 것은 언제였나요?
-2. 그때 왜 고쳐야 했나요?
-3. 어떻게 고쳤나요?
+1. 최근에 이력서를 수정한 게 언제였나요?
+2. 그때 왜 수정했나요?
+3. 어떻게 수정했나요?
 4. 어느 단계가 가장 시간이 많이 걸렸나요?
-5. 다른 사람에게 봐 달라고 한 적이 있나요?
-6. 이전에 이력서 수정에 돈을 쓰거나 많은 시간을 쓴 적이 있나요?
+5. 다른 사람에게 검토를 부탁해 본 적이 있나요?
+6. 예전에 이력서 수정 때문에 돈을 쓰거나 많은 시간을 쓴 적이 있나요?
 ```
 
-이 출력은 매우 도움이 됩니다. 원래 "의견을 묻는" 질문을 바로 "실제 행동을 묻는" 질문으로 바꿔 주기 때문입니다.
+이런 출력은 매우 도움이 됩니다. 왜냐하면 "의견을 묻는" 질문을 "실제 행동을 묻는" 질문으로 직접 바꿔주기 때문입니다.
 
-### 12.2 AI에게 대상별 인터뷰 개요를 만들게 하기
+### 12.2 AI로 다른 대상을 위한 인터뷰 가이드라인 생성
 
-같은 방향이라도 사람군이 다르면 인터뷰의 중점은 달라집니다. 예를 들어 학생, HR, 프리랜서는 관심사가 완전히 다릅니다. AI에게 서로 다른 대상별로 개요를 만들게 할 수 있습니다.
+같은 방향이라도, 다른 사용자군에게는 인터뷰 초점이 다릅니다. 예를 들어 학생, HR, 프리랜서의 관심사는 완전히 다릅니다. AI에게 다른 대상별로 각각 한 버전의 가이드라인을 작성하도록 할 수 있습니다:
 
-- 초보 사용자 대상: 최근 한 번의 실제 경험을 중점적으로 이해
-- 헤비 사용자 대상: 대체 방안과 고통감을 중점적으로 이해
-- 유료 사용자 대상: 이미 비용을 지불했는지 중점적으로 이해
+- 초보 사용자에게는 최근 실제 경험에 초점
+- 헤비 사용자에게는 대체 솔루션과 고통에 초점
+- 유료 사용자에게는 이미 비용을 지불했는지에 초점
 
-이렇게 하면 실제 대화할 때 리듬이 생기고, 모든 사람에게 똑같은 질문만 던지지 않게 됩니다.
+이렇게 하면 실제 대화에서 리듬감이 더 좋아지며, 모든 사람에게 같은 질문을 반복하지 않게 됩니다.
 
-예를 들어 이렇게 바로 입력할 수 있습니다.
+예를 들어 이렇게 입력할 수 있습니다:
 
 ```text
-두 유형의 사람과 이야기하려고 해.
-1. 처음 인턴십을 찾는 대학생
-2. 이미 다른 사람의 이력서를 많이 봐 준 선배
+두 가지 유형의 사람과 대화할 거예요:
+1. 처음으로 인턴십을 찾는 대학생
+2. 다른 사람의 이력서를 많이 검토해 본 선배
 
-각각 인터뷰 개요를 만들어 줘. 각 개요는 질문 6개로 해 줘.
+각각 6개의 인터뷰 가이드라인을 작성해 주세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
 대학생 대상:
-1. 최근에 인턴십에 지원한 것은 언제였나요?
-2. 그때 가장 막힌 단계는 무엇이었나요?
-3. 본인의 이력서가 지원 가능한지 어떻게 판단했나요?
+1. 최근에 인턴십에 지원한 게 언제였나요?
+2. 그때 가장 막혔던 단계는 어디였나요?
+3. 이력서가 제출 가능한지 어떻게 알았나요?
 ...
 
 선배 대상:
-1. 최근에 다른 사람의 이력서를 봐 준 것은 언제였나요?
-2. 가장 자주 보이는 명확한 문제는 무엇인가요?
-3. 후배들이 가장 쉽게 막히는 단계는 무엇인가요?
+1. 최근에 다른 사람의 이력서를 검토해 준 게 언제였나요?
+2. 가장 자주 보이는 명백한 문제는 무엇인가요?
+3. 후배들이 가장 많이 막히는 단계는 어디인가요?
 ...
 ```
 
-이렇게 하면 스스로 처음부터 질문을 만들 필요가 없어 인터뷰 준비가 훨씬 쉬워집니다.
+이렇게 하면 제로에서 직접 질문을 구성할 필요 없이, 인터뷰 준비가 훨씬 수월해집니다.
 
-### 12.3 AI에게 인터뷰 기록을 정리하게 하기
+### 12.3 AI로 인터뷰 기록 정리
 
-인터뷰를 마친 뒤 가장 흔한 문제는 "정보가 없다"가 아니라 "정보가 너무 흩어져 있다"입니다. AI는 조각난 대화를 구조화된 메모로 정리하는 데 매우 적합합니다.
+인터뷰가 끝난 후, 가장 흔히 발생하는 문제는 "정보가 없는 것"이 아니라 "정보가 너무 흩어져 있는 것"입니다. AI는 파편화된 대화를 구조화된 노트로 정리하는 데 매우 적합합니다:
 
 ```text
-아래는 사용자 3명과의 인터뷰 기록이야.
-The Mom Test 관점으로 정리해 줘.
-1. 어떤 내용이 사실이고, 어떤 내용이 의견인가
-2. 사용자의 최근 실제 행동은 무엇인가
-3. 현재 대체 방안은 무엇인가
-4. 사용자가 이미 지불한 시간, 돈, 에너지 비용은 무엇인가
-5. 반복해서 언급된 문제는 무엇인가
-6. 듣기에는 긍정적이지만 증거가 부족한 말은 무엇인가
+다음은 3명의 사용자와의 인터뷰 기록입니다.
+The Mom Test 관점으로 정리해 주세요:
+1. 어떤 내용이 사실이고, 어떤 것이 의견인지
+2. 사용자의 최근 실제 행동은 무엇인지
+3. 현재 대체 솔루션은 무엇인지
+4. 사용자가 이미 지불한 시간, 돈, 에너지 비용은 무엇인지
+5. 어떤 문제가 반복적으로 언급되었는지
+6. 어떤 말이 긍정적으로 들리지만 증거가 부족한지
 ```
 
-이 단계는 특히 가치가 있습니다. "듣기에는 좋다"와 "판단을 뒷받침할 수 있다"를 분리해 주기 때문입니다.
+이 단계는 특히 가치가 있습니다. 왜냐하면 "꽤 좋아 보이는" 내용과 "정말로 판단을 뒷받침할 수 있는" 내용을 분리하는 데 도움이 되기 때문입니다.
 
-간단한 입력은 이렇게 쓸 수 있습니다.
+간단한 입력은 다음과 같을 수 있습니다:
 
 ```text
-한 사용자와 이야기한 기록이야.
+한 사용자와 대화한 기록입니다:
 
-- 도구가 있으면 한번 써 볼 것 같다고 했다.
-- 지난주 이력서를 고치느라 저녁 시간을 전부 썼다.
-- 지금은 주로 친구에게 봐 달라고 한다.
-- 가장 어려운 것은 어느 정도까지 고치면 지원해도 되는지 모른다는 점이라고 했다.
+- 도구가 있으면 한번 써 볼 것 같다고 했어요
+- 지난주에 이력서 수정하느라 하루 종일 걸렸다고 했어요
+- 지금은 주로 친구에게 검토를 부탁한다고 했어요
+- 제일 어려운 건 어디까지 수정해야 제출할 수 있는지 모르는 거라고 했어요
 
-어떤 것이 의견이고 어떤 것이 사실인지 나눠 줘.
+의견과 사실을 나눠 주세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
 의견:
-- 도구가 있으면 한번 써 볼 것 같다고 했다.
+- 도구가 있으면 한번 써 볼 것 같다
 
 사실:
-- 지난주 이력서를 고치느라 저녁 시간을 전부 썼다.
-- 현재 대체 방안은 친구에게 봐 달라고 하는 것이다.
-- 가장 어려운 점은 언제 "지원 가능"한 상태인지 모른다는 것이다.
+- 지난주에 이력서 수정에 하루 종일 걸림
+- 현재 대체 솔루션은 친구에게 검토 부탁
+- 가장 어려운 점은 언제 "제출 가능"한지 모르는 것
 
-수요 판단에 쓸 수 있는 핵심:
-- 이 문제는 최근에 실제로 발생했다.
-- 사용자는 명확한 시간 비용을 이미 투입했다.
-- 현재 방안은 다른 사람에게 의존하며 안정적이지 않다.
+수요 판단에 활용할 수 있는 핵심:
+- 이 문제는 최근에 실제로 발생함
+- 사용자가 이미 상당한 시간 비용을 지불함
+- 현재 솔루션은 타인에게 의존하여 불안정함
 ```
 
-이 출력은 초보자에게 어떤 말이 판단에 쓸 수 있고, 어떤 말은 그냥 들어 두는 정도인지 매우 직관적으로 알려 줍니다.
+이런 출력은 초보자에게 직관적으로 알려 줍니다: 어떤 말은 판단에 사용할 수 있고, 어떤 말은 그저 들어두면 되는지.
 
-### 12.4 AI에게 먼저 가벼운 웹 검색을 시키기
+### 12.4 AI로 먼저 가벼운 온라인 검색 대행
 
-아직 인터뷰를 시작하지 않았다면, AI에게 아주 가벼운 외부 조사를 맡길 수 있습니다.
+아직 인터뷰를 시작하지 않았다면, AI에게 먼저 가벼운 외부 조사를 맡길 수 있습니다. 예를 들어:
 
-- 공개 커뮤니티에서 사람들이 최근 이 문제를 어떻게 불평하는지
-- 기존 도구에서 가장 많이 불평받는 부분은 무엇인지
-- 사용자가 유사한 문제에 이미 돈을 쓴 적이 있는지
-- 시장에 어떤 대체 방안이 이미 존재하는지
+- 공개 커뮤니티에서, 사람들이 최근에 이 문제를 어떻게 불만 제기하는지
+- 기존 도구에서 가장 많이 불만이 나오는 것이 무엇인지
+- 사용자가 비슷한 문제에 이미 돈을 지불했는지
+- 시장에 어떤 대체 솔루션이 이미 존재하는지
 
-이 정보는 실제 사람 인터뷰를 대체할 수 없지만, 더 빨리 상태에 들어가고 문제를 어디서부터 파고들지 알게 해 줍니다.
+이런 정보는 실제 인터뷰를 대체할 수 없지만, 더 빨리 상태에 진입하여 어디서 질문을 시작해야 할지 알 수 있게 해줍니다.
 
-간단한 입력 예시는 다음입니다.
+간단한 입력은 다음과 같을 수 있습니다:
 
 ```text
-조사해 줘.
-"대학생이 이력서를 고칠 때 가장 자주 불평하는 것은 무엇인가"
-가장 흔한 불평 5개를 쉬운 말로 정리해 줘.
+조사해 주세요:
+"대학생이 이력서를 수정할 때 가장 많이 불만을 제기하는 것"
+가장 흔한 불만 5가지를 아주 일상적인 말로 정리해 주세요.
 ```
 
-AI는 이렇게 출력할 수 있습니다.
+AI의 출력은 다음과 같을 수 있습니다:
 
 ```text
-흔한 불평:
+흔한 불만:
 
-1. 이력서에 정확히 무엇을 써야 할지 모른다.
-2. 직무 하나에 지원할 때마다 바꿔야 해서 너무 힘들다.
-3. 여러 번 고쳤지만 좋은지 계속 확신이 없다.
-4. 믿을 만한 피드백을 줄 사람이 없다.
-5. 아직 준비가 안 된 것 같아 계속 미루게 된다.
+1. 이력서에 뭘 써야 할지 모름
+2. 공고마다 수정해야 해서 너무 힘듦
+3. 여러 버전을 수정했는데 여전히 충분히 좋은지 모르겠음
+4. 신뢰할 수 있는 피드백을 줄 사람이 없음
+5. 항상 준비가 안 된 것 같아서 계속 미룸
 ```
 
-이 결과의 가치는 인터뷰 진입점을 더 쉽게 찾게 해 준다는 데 있습니다.
+이런 결과의 가치는, 인터뷰 진입점을 더 쉽게 찾을 수 있게 해준다는 것입니다.
 
-### 12.5 AI에게 "인터뷰 회고 코치" 역할을 맡기기
+### 12.5 AI를 "인터뷰 복기 코치"로 활용
 
-방금 끝낸 인터뷰 기록을 AI에게 던져 비판하게 할 수도 있습니다.
+방금 끝난 인터뷰 기록을 AI에게 전달하여, 비판을 맡길 수도 있습니다:
 
 ```text
-아래는 내 사용자 인터뷰 기록이야.
-The Mom Test 관점으로 회고해 줘.
-1. 내 질문 중 어떤 것이 인정을 구하는 것처럼 들렸나
-2. 어떤 질문이 명확하게 유도적이었나
-3. 원래 사실을 더 캐물어야 했던 부분은 어디인가
-4. 다시 한다면 이 대화를 어떻게 더 좋게 물어볼 수 있는가
+다음은 제 사용자 인터뷰 기록입니다.
+The Mom Test 관점에서 복기해 주세요:
+1. 어떤 질문이 인정을 찾는 것에 너무 가까웠는지
+2. 어떤 질문에 명백한 유도가 있었는지
+3. 어디서 사실을 계속 추적할 수 있었는지
+4. 다시 한번 한다면, 이 대화를 어떻게 더 잘 물어볼 수 있는지
 ```
 
-초보자에게 특히 도움이 됩니다. "내가 증거를 모으고 있는지, 격려를 모으고 있는지"에 대한 감각을 더 빨리 만들 수 있기 때문입니다.
+이것은 초보자에게 특히 도움이 됩니다. 왜냐하면 "내가 증거를 수집하고 있는지, 아니면 응원을 수집하고 있는지"에 대한 감각을 더 빨리 구축할 수 있기 때문입니다.
 
-## 📚 Assignments
+## 📚 과제
 
-위 내용을 바탕으로 다음 과제를 완료하세요.
+위 내용을 바탕으로 다음 과제를 완성해 주세요:
 
-1. 최근 만들고 싶은 제품 방향 하나를 고르고, 원래 물어봤을 "망하기 쉬운" 질문 5개를 먼저 쓰세요.
-2. 이 5개 질문을 The Mom Test 스타일에 더 맞는 질문으로 고쳐 쓰세요.
-3. 잠재 사용자 3명을 찾아 최소 한 번은 "최근에 이 문제를 만난 것은 언제였나요?"라고 물어보세요.
-4. 인터뷰 후 네 가지 정보를 정리하세요: 실제 행동, 대체 방안, 이미 지불한 비용, 반복해서 나타나는 어려움.
+1. 최근에 만들고 싶은 제품 방향을 하나 골라, 원래 물어볼 "망가지기 쉬운" 질문 5개를 먼저 작성하세요
+2. 이 5개의 질문을 The Mom Test 스타일에 더 부합하는 질문으로 재작성하세요
+3. 잠재 사용자 3명을 찾아, 적어도 한 번은 "최근에 이 문제를 만난 것이 언제였나요"라고 물어보세요
+4. 인터뷰가 끝난 후 4가지 정보를 정리하세요: 실제 행동, 대체 솔루션, 이미 지불한 비용, 반복적으로 등장한 어려움
 
-## 더 읽어 보기
+## 더 읽어볼 만한 자료
 
 - [The Mom Test 공식 웹사이트](https://momtestbook.com/)
 - [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
-
diff --git a/docs/ko-kr/stage-1/complete-project-practice/index.md b/docs/ko-kr/stage-1/complete-project-practice/index.md
index d2c3b90..8fb2975 100644
--- a/docs/ko-kr/stage-1/complete-project-practice/index.md
+++ b/docs/ko-kr/stage-1/complete-project-practice/index.md
@@ -13,75 +13,74 @@ const relatedArticles =
 
 # 초급 5: 완성 프로젝트 실전
 
-## 본 장 안내
+## 장의 가이드
 
-<ChapterIntroduction :duration="duration" :tags="['제품 사고', 'Mock Data', '상호작용 완성', 'LocalStorage']" coreOutput="기능이 완비된 AI 제품 프로토타입 1개" expectedOutput="완전한 흐름과 실제 같은 데이터를 포함한 Web 애플리케이션">
+<ChapterIntroduction :duration="duration" :tags="['제품 사고', 'Mock Data', '인터랙션 완성', 'LocalStorage']" coreOutput="기능이 완비된 AI 제품 프로토타입 1개" expectedOutput="완전한 흐름과 실제 데이터를 포함한 웹 애플리케이션">
 
-지난 장에서는 AI 기능을 연결했고, Demo가 실행되기 시작했습니다. 하지만 진짜 "제품"과는 아직 <strong>거리가 멉니다</strong>. 페이지를 새로고침하면 <strong>데이터가 사라지고</strong>, 오류가 나면 <strong>흰 화면</strong>이 되며, 목록에는 "테스트 데이터 1, 테스트 데이터 2"만 있고, 사용자가 잘못 클릭해도 <strong>되돌릴 방법이 없습니다</strong>...
+이전 장에서 AI 능력을 연동하고 Demo가 돌아가게 만들었지만, 진정한 "제품"이라고 하기에는 아직 <strong>멀었습니다</strong>. 페이지를 새로고침하면 <strong>데이터가 사라지고</strong>, 오류가 나면 <strong>화면이 하얗게 변하며</strong>, 목록에는 "테스트 데이터 1, 테스트 데이터 2"만 있고, 사용자가 잘못 눌러도 <strong>되돌릴 수 없습니다</strong>...
 
-이번 장에서는 이런 <strong>구멍을 모두 메웁니다</strong>. 우리는 <strong>제품의 완전한 흐름을 보완하고</strong>, AI로 <strong>실감 나는 비즈니스 데이터</strong>를 만들어 가짜 데이터를 대체하며, <strong>오류 처리와 사용자 피드백</strong>을 추가하고, 마지막에는 <strong>남에게 보여 줄 수 있을 만큼 그럴듯한</strong> 완성형 프로토타입으로 다듬습니다.
+이번 장에서는 이런 <strong>문제들을 모두 해결</strong>합니다. <strong>제품의 완전한 흐름을 보완</strong>하고, AI로 <strong>실감 나는 비즈니스 데이터</strong>를 생성해 가짜 데이터를 대체하며, <strong>오류 처리와 사용자 피드백</strong>을 추가합니다. 마지막으로 <strong>자랑할 수 있고, 남에게 보여 줄 수 있는</strong> 완성된 프로토타입을 다듬습니다.
 
-이 장은 초급 단계의 <strong>마지막 장</strong>입니다. 이 단계를 마치면 "프로그래밍을 전혀 못함"에서 "<strong>AI 제품 프로토타입을 독립적으로 만들 수 있음</strong>"으로 바뀌는 전환을 완료하게 됩니다.
+이것은 초급 단계의 <strong>마지막 장</strong>입니다. 이 단계를 마치면 "프로그래밍을 전혀 모르는 상태"에서 "<strong>독립적으로 AI 제품 프로토타입을 만들 수 있는</strong>" 것으로 변신하게 됩니다.
 
 </ChapterIntroduction>
 
 <div style="margin: 50px 0;">
   <ClientOnly>
     <StepBar :active="0" :items="[
-      { title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
+      { title: '흐름 완성', description: '단일 기능에서 완전한 루프까지' },
       { title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
       { title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
-      { title: '최종 과제', description: '당신의 졸업 작품' }
+      { title: '최종 대과제', description: '당신의 졸업 작품' }
     ]" />
   </ClientOnly>
 </div>
 
-## 1. "Happy Path" 거부하기: 핵심 흐름 완성
+## 1. "Happy Path" 거부: 핵심 흐름 완성
 
-많은 초보자는 프로토타입을 만들 때 "Happy Path", 즉 가장 이상적인 경로만 만듭니다. 사용자가 클릭한다 -> API 응답이 성공한다 -> 결과를 보여 준다.
-하지만 현실 세계에서는 일이 그렇게 순조롭지만은 않습니다. 당신의 프로토타입이 진짜 제품처럼 보이게 하려면 다음과 같은 "보이지 않는" 고리를 고려해야 합니다.
+많은 초보자가 프로토타입을 만들 때 "Happy Path"(가장 이상적인 경로)만 만드는 경우가 많습니다. 사용자가 클릭 -> API가 성공적으로 응답 -> 결과 표시. 하지만 현실에서는 항상 그렇게 순조롭지 않습니다. 프로토타입이 진짜 제품처럼 보이려면 다음과 같은 "보이지 않는" 링크들을 고려해야 합니다.
 
-### 1.1 "기다림"과 "피드백" 추가하기
+### 1.1 "대기"와 "피드백" 추가
 
-사용자가 "문구 생성"을 클릭하면 AI는 대개 응답까지 몇 초가 필요합니다. 이때 인터페이스가 아무 반응도 보이지 않으면 사용자는 프로그램이 고장 났다고 생각합니다.
-**AI IDE에게 Loading 상태를 추가해 달라고 해야 합니다.**
+사용자가 "카피 생성"을 클릭하면 AI가 응답하는 데 보통 몇 초가 걸립니다. 화면에 아무런 변화가 없으면 사용자는 프로그램이 고장 났다고 생각합니다.
+**AI IDE에 Loading 상태를 추가하도록 요청하세요:**
 
 > 프롬프트 예시:
-> "생성 버튼을 클릭하면 버튼을 '생성 중...'으로 바꾸고 클릭할 수 없게 해 주세요. 동시에 오른쪽 영역에는 로딩 애니메이션을 표시해 주세요. API 결과가 반환된 뒤에 다시 정상 상태로 되돌려 주세요."
+> "생성 버튼을 클릭하면 버튼을 '생성 중...'으로 바꾸고 클릭할 수 없게 만들어 주세요. 동시에 오른쪽 영역에 로딩 애니메이션을 표시해 주세요. API가 결과를 반환하면 다시 정상 상태로 돌아와야 합니다."
 
-### 1.2 "실패"와 "예외" 처리하기
+### 1.2 "실패"와 "예외" 처리
 
 API Key가 만료될 수도 있고, 네트워크가 끊길 수도 있습니다.
-**AI IDE에게 오류 처리를 도와달라고 해야 합니다.**
+**AI IDE에 오류 처리를 요청하세요:**
 
 > 프롬프트 예시:
-> "API 요청이 실패하면 콘솔에만 오류를 내지 말고, 페이지 상단에 빨간색 알림 상자(Toast)를 띄워 사용자에게 '생성에 실패했습니다. 잠시 후 다시 시도해 주세요'라고 알려 주세요. 그리고 사용자가 생성 버튼을 다시 클릭할 수 있게 해 주세요."
+> "API 요청이 실패하면 콘솔에 오류를 바로 띄우지 말고, 페이지 상단에 빨간색 알림 상자(Toast)를 표시해서 사용자에게 '생성 실패, 잠시 후 다시 시도해 주세요'라고 알려주세요. 그리고 사용자가 생성 버튼을 다시 클릭할 수 있도록 해주세요."
 
-### 1.3 대화 기록 영속화
+### 1.3 대화 기록 지속화
 
-AI와 상호작용하는 과정에서는 대화 내용을 저장해 사용자가 기록을 다시 보고 이전 대화를 이어 갈 수 있어야 합니다. 현재 단계에서는 데이터베이스를 도입하지 않고, 다음과 같은 가벼운 방안을 선택할 수 있습니다.
+AI와 상호작용하는 과정에서 대화 내용을 저장해 사용자가 이전 기록을 되돌아보고 이전 대화를 이어갈 수 있도록 해야 합니다. 현재 단계에서는 데이터베이스를 도입하지 않고 다음과 같은 가벼운 방식을 선택할 수 있습니다:
 
-**저장 방안 선택:**
+**저장 방식 선택:**
 
-| 방안 | 적합한 상황 | 특징 |
+| 방식 | 적용 시나리오 | 특징 |
 | ---------------- | -------------------------------- | ------------------------------------ |
-| **LocalStorage** | 순수 프론트엔드 프로젝트, 사용자 데이터가 브라우저에 저장됨 | 구현이 간단하고 새로고침해도 사라지지 않지만, 기기 간 동기화는 불가 |
-| **JSON 파일** | 로컬 프로토타입, 데이터를 파일 형태로 저장 | 구조가 명확하고 디버깅이 쉬우며 수동 편집 가능 |
-| **TXT 파일** | 가장 단순한 방안, 텍스트 내용을 빠르게 기록 | 형식이 자유롭고 호환성이 좋음 |
+| **LocalStorage** | 순수 프론트엔드 프로젝트, 사용자 데이터를 브라우저에 저장 | 구현이 간단하고, 새로고침해도 사라지지 않지만, 기기 간 동기화 불가 |
+| **JSON 파일** | 로컬 프로토타입, 데이터를 파일 형태로 저장 | 구조가 명확하고 디버깅이 쉬우며, 수동 편집 가능 |
+| **TXT 파일** | 가장 간단한 방식, 빠르게 텍스트 내용 기록 | 형식이 자유롭고 호환성이 좋음 |
 
 **대화 내용 예시:**
-저장되는 대화 기록은 보통 다음 내용을 포함합니다.
+저장된 대화 기록은 일반적으로 다음 내용을 포함합니다:
 
 ```json
 [
   {
     "role": "user",
-    "content": "블루투스 이어폰의 Douyin 판매 문구를 만들어 줘",
+    "content": "블루투스 이어폰의 틱톡 라이브 커머스 카피를 생성해 줘",
     "timestamp": "2026-01-20 10:30:00"
   },
   {
     "role": "assistant",
-    "content": "【블루투스 이어폰 추천 문구】\n\n🎧 지연은 이제 그만, 몰입형 음악 감상 경험\n\n여러분! 이 블루투스 이어폰 진짜 대박이에요👇\n\n✅ 40dB 액티브 노이즈 캔슬링, 순식간에 음악 세계로\n✅ 30시간 초장시간 배터리, 일주일 출퇴근 충전 걱정 없음\n✅ 통화 품질은 마치 대면 대화처럼 선명, 지하철 소음 속에서도 편하게\n✅ 세미 인이어 디자인, 오래 착용해도 아프거나 답답하지 않음\n\n💰 기간 한정 할인, 아래 링크로 바로 구매하세요!",
+    "content": "[블루투스 이어폰 추천 카피]\n\n🎧 지연과 작별, 몰입형 청취 경험\n\n여러분! 이 블루투스 이어폰 진짜 대박이에요👇\n\n✅ 40dB 능동 노이즈 캔슬링, 순식간에 음악의 세계로\n✅ 30시간 초장시간 배터리, 일주일 출퇴근 충전 불필요\n✅ 통화 품질이 대면 수준, 지하철 소음 속에서도 대화 가능\n✅ 반삽입형 디자인, 오래 착용해도 아프지 않고 답답하지 않음\n\n💰 한정 할인, 아래 링크를 클릭해 구매하세요!",
     "timestamp": "2026-01-20 10:30:05"
   }
 ]
@@ -89,57 +88,57 @@ AI와 상호작용하는 과정에서는 대화 내용을 저장해 사용자가
 
 **구현 프롬프트:**
 
-> "대화 기록 저장 기능을 구현해 주세요. 사용자와 AI의 대화 기록을 JSON 파일로 저장하거나 LocalStorage를 사용하도록 지원해 주세요. 페이지에 들어올 때마다 기존 대화 기록을 자동으로 불러오고, 단일 대화 기록을 조회하고 삭제할 수 있게 해 주세요."
+> "대화 기록 저장 기능을 구현해 주세요. 사용자와 AI의 대화 기록을 JSON 파일로 저장(또는 LocalStorage 사용)하는 것을 지원합니다. 페이지에 들어올 때마다 자동으로 이전 대화를 불러오고, 개별 대화 기록을 보고 삭제할 수 있도록 해주세요."
 
 <div style="margin: 50px 0;">
   <ClientOnly>
     <StepBar :active="1" :items="[
-      { title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
+      { title: '흐름 완성', description: '단일 기능에서 완전한 루프까지' },
       { title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
       { title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
-      { title: '최종 과제', description: '당신의 졸업 작품' }
+      { title: '최종 대과제', description: '당신의 졸업 작품' }
     ]" />
   </ClientOnly>
 </div>
 
-## 2. 영혼 주입하기: 실제 같은 데이터(Mock Data) 시뮬레이션
+## 2. 영혼 주입: 실제 데이터 시뮬레이션 (Mock Data)
 
-텅 빈 페이지는 사람을 설득할 수 없습니다. "이커머스 소재 워크벤치"를 보여 주는데 기록이 텅 비어 있거나 "test / test / test" 한 줄만 있다고 상상해 보세요.
-가장 좋은 시연 효과를 만들려면 실제처럼 보이는 데이터를 "위조"해야 합니다. 그래야 프로토타입이 이미 반년 정도 운영된 진짜 제품처럼 보입니다.
+텅 빈 페이지는 사람을 감동시킬 수 없습니다. "이커머스 소재 작업대"를 남에게 보여주려는데 기록이 텅 비어 있거나, "test / test / test" 한 줄만 있다고 상상해 보세요.
+데모 효과를 최적화하려면 사실적인 데이터를 "위조"하여 프로토타입이 반 년간 운영된 진짜 제품처럼 보이게 만들어야 합니다.
 
-### 2.1 AI에게 데이터 구조 설계를 맡기기
+### 2.1 AI에게 데이터 구조 설계 맡기
 
-우리가 각 필드의 이름을 하나하나 생각할 필요는 없습니다. 예를 들어 `name`이라고 할지 `title`이라고 할지 고민하는 일은 AI에게 맡길 수 있습니다.
+각 필드 이름을 `name`으로 할지 `title`로 할지 직접 고민할 필요가 없습니다. 이 일은 완전히 AI에게 맡기면 됩니다.
 
-당신은 AI에게 **비즈니스 장면**만 알려 주면 됩니다.
+AI에게 **비즈니스 시나리오**만 알려주면 됩니다:
 
 > **프롬프트 예시:**
-> "나는 **Douyin 이커머스 소재 워크벤치** 프로토타입을 만들고 있어.
-> '상품 작업'을 설명하기 위한 JSON 데이터 구조를 설계해 줘.
-> 이 작업에는 상품의 기본 정보(이름, 카테고리), 입력 소재(이미지 링크), 그리고 AI가 생성한 결과(제목, 문구, 포스터 이미지)가 포함되어야 해.
-> JSON 예시를 바로 줘."
+> "저는 **틱톡 이커머스 소재 작업대** 프로토타입을 만들고 있습니다.
+> '상품 작업'을 설명하는 JSON 데이터 구조를 설계해 주세요.
+> 이 작업에는 다음이 포함되어야 합니다: 상품 기본 정보(이름, 카테고리), 입력 소재(이미지 링크), 그리고 AI 생성 결과(제목, 카피, 포스터 이미지).
+> JSON 예시를 바로 보여 주세요."
 
-AI는 당신의 설명에 따라 `productName`, `generatedContent` 같은 필드를 자동으로 구상해 줍니다.
+AI는 설명에 따라 `productName`, `generatedContent` 같은 필드를 자동으로 구성해 줍니다.
 
-### 2.2 AI에게 "실감 나는" 데이터를 대량 생산하게 하기
+### 2.2 AI에게 "사실적인" 데이터 대량 생산 맡기
 
-데이터 구조가 생겼다면 다음 단계는 AI에게 "빈칸을 채워" 실제처럼 보이는 데이터를 한 묶음 만들게 하는 것입니다.
+데이터 구조가 준비되면 다음 단계는 AI에게 "빈칸을 채워" 사실적인 데이터를 대량 생성하는 것입니다.
 
 **프롬프트 팁:**
-AI에게 "데이터 만들어 줘"라고만 말하면 안 됩니다. 인턴에게 업무를 맡기듯 **비즈니스 배경**과 **내용 요구사항**을 알려 줘야 합니다.
+AI에게 "데이터를 생성해 줘"라고만 하면 안 됩니다. 인턴에게 업무를 지시하듯 **비즈니스 배경**과 **콘텐츠 요구사항**을 알려주어야 합니다:
 
-- **비즈니스 배경**: 우리는 "Douyin 이커머스"를 하므로 상품 제목은 눈길을 끌어야 합니다. 예: "날씬해 보이는 필수템", "학생 필수 구매". 문구는 구어체여야 합니다.
-- **이미지 요구사항**: 프로토타입을 예쁘게 보이게 하려면 이미지는 흑백 플레이스홀더가 아니라 랜덤 컬러 풍경이나 실제 물건 이미지가 좋습니다.
+- **비즈니스 배경**: AI에게 우리가 "틱톡 이커머스"를 한다고 알려주면, 상품 제목은 눈에 띄어야 하고(예: "날씬해 보이는 아이템", "학생 필수템"), 카피는 구어체여야 합니다.
+- **이미지 요구사항**: 프로토타입을 보기 좋게 만들려면 흑백 플레이스홀더가 아닌 무작위 컬러 풍경이나 실물 사진을 사용하는 것이 좋습니다.
 
 > **프롬프트 예시:**
-> "방금 설계한 구조를 바탕으로 실감 나는 Mock Data 10개를 만들어 줘.
-> (비고: 반드시 JSON 형식일 필요는 없어. 프론트엔드를 작성 중이라면 JavaScript 배열로 바로 생성하게 해도 되고, Python을 쓴다면 List로 생성하게 해도 돼.)
+> "방금 설계한 구조를 기반으로 10개의 사실적인 Mock Data를 생성해 주세요.
+> (참고: 반드시 JSON 형식일 필요는 없습니다. 프론트엔드를 작성 중이라면 JavaScript 배열로, Python을 사용 중이라면 List로 생성할 수 있습니다.)
 >
-> **비즈니스 장면 요구사항**:
+> **비즈니스 시나리오 요구사항**:
 >
-> 1. 종합 잡화점이라고 가정하고, 상품은 '여성복', '디지털', '뷰티' 세 카테고리를 포함해.
-> 2. **생성된 제목과 문구는 매우 'Douyin 스타일'이어야 해**: 예를 들어 제목에는 Emoji(🔥, ✨)를 포함하고, 문구는 '대박', '직접 써 보니 좋음' 같은 말투를 사용해.
-> 3. **이미지 필드**: 모두 `https://picsum.photos/seed/{random_id}/300/400` 형식을 사용해서 각 이미지가 서로 다르게 보이도록 해."
+> 1. 종합 잡화점이라고 가정하고, 상품은 '여성의류', '디지털', '뷰티' 세 가지 카테고리를 포함합니다.
+> 2. **생성된 제목과 카피는 '틱톡 스타일'이어야 합니다**: 예를 들어 제목에 Emoji(🔥, ✨)를 포함하고, 카피에는 '대박', '직접 써봤는데 좋아요' 같은 말투를 사용합니다.
+> 3. **이미지 필드**: `https://picsum.photos/seed/{random_id}/300/400` 형식을 통일해서 사용해 주세요. 각 이미지가 서로 다르게 해주세요."
 
 **생성된 Mock Data 예시:**
 
@@ -147,17 +146,17 @@ AI에게 "데이터 만들어 줘"라고만 말하면 안 됩니다. 인턴에
 export const mockProductTasks = [
   {
     id: 'task_001',
-    name: '여름 프렌치 빈티지 플라워 원피스',
+    name: '여름 프렌치 레트로 꽃무늬 원피스',
     status: 'completed',
     input: {
-      category: '여성복',
-      features: ['허리 라인', '날씬해 보임', '분위기'],
+      category: '여성의류',
+      features: ['허리 조임', '날씬해 보임', '분위기'],
       originalImage: 'https://picsum.photos/seed/dress_input/300/400'
     },
     output: {
-      generatedTitle: '✨누가 입어도 예쁨! 이 프렌치 플라워 원피스 진짜 대박🔥',
+      generatedTitle: '✨누가 입어도 예쁘다! 이 프렌치 꽃무늬 원피스 진짜 대박🔥',
       generatedCopy:
-        '여러분! 이 원피스 진짜 날씬해 보여요! 허리 라인이 정말 좋아서 입자마자 실루엣이 살아나요. 원단도 통기성이 좋아 여름에 입어도 전혀 답답하지 않아요. 데이트와 쇼핑에 강력 추천!👗',
+        '여러분! 이 원피스 진짜 날씬해 보여요! 허리 조임 디자인이 대박이고, 입으면 바로 허리 라인이 보여요. 원단이 통기성이 좋아서 여름에 입어도 전혀 답답하지 않아요. 데이트나 쇼핑할 때 최고!👗',
       generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
     },
     createdAt: '2026-01-20T10:00:00Z'
@@ -172,9 +171,9 @@ export const mockProductTasks = [
       originalImage: 'https://picsum.photos/seed/tech_input/300/400'
     },
     output: {
-      generatedTitle: '🎧 드디어 찾았다! 이 이어폰 노이즈 캔슬링 너무 강력하잖아!🔇',
+      generatedTitle: '🎧 드디어 찾았다! 이 이어폰 노이즈 캔슬링 너무 강력해!🔇',
       generatedCopy:
-        '착용하는 순간 세상이 조용해져요. 음질도 뛰어나서 노래를 들으면 현장에 있는 것 같아요. 배터리도 정말 오래가서 한 번 충전하면 일주일 사용 가능! 학생 필수템!',
+        '이걸 끼면 세상이 순식간에 조용해져요. 음질도 최고, 노래를 듣는 것 같은 현장감. 배터리도 엄청나서 한 번 충전으로 일주일 사용! 학생 필수템!',
       generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
     },
     createdAt: '2026-01-21T14:30:00Z'
@@ -183,85 +182,85 @@ export const mockProductTasks = [
 ]
 ```
 
-### 2.3 (고급) LocalStorage로 "가짜 CRUD" 구현하기
+### 2.3 (심화) LocalStorage로 "가짜 추가/삭제/수정" 구현
 
-방금 만든 "Mock Data"가 단지 보기만 하는 것이 아니라 삭제, 수정도 가능하고, 새로 생성한 작업이 페이지 새로고침 후에도 남아 있기를 원한다면 `LocalStorage`를 결합할 수 있습니다.
+방금 생성한 "시뮬레이션 데이터"를 볼 수만 있게 하지 않고, 삭제하고 수정할 수 있게 만들고 싶다면, 심지어 새로 생성한 작업이 페이지 새로고침 후에도 남아 있게 하려면 `LocalStorage`를 결합하면 됩니다.
 
 > **프롬프트 예시:**
-> "데이터 저장 기능을 구현해 줘.
+> "데이터 저장 기능을 구현해 주세요.
 >
-> 1. 우선 `localStorage`에서 데이터를 읽어 와.
-> 2. `localStorage`가 비어 있으면 방금 생성한 Mock Data로 초기화하고, 그것들을 `localStorage`에 저장해.
-> 3. 동시에 `addProductTask`와 `deleteProductTask` 함수를 작성해 줘. 매번 작업할 때마다 `localStorage`도 동기화해야 해."
+> 1. `localStorage`에서 데이터를 먼저 읽어옵니다.
+> 2. `localStorage`가 비어 있으면 방금 생성한 Mock 데이터로 초기화하고, 이를 `localStorage`에 저장합니다.
+> 3. 동시에 `addProductTask`와 `deleteProductTask` 함수를 작성해 주세요. 매번 작업 시 `localStorage`를 동기화하여 업데이트합니다."
 
-이 단계를 거치면 프로토타입은 "기억"을 가지게 되고, 사용자 경험은 거의 진짜 제품과 다르지 않게 됩니다.
+이 단계를 거치면 프로토타입에 "기억"이 생기고, 사용자 경험이 실제 제품과 거의 다르지 않게 됩니다.
 
 <div style="margin: 50px 0;">
   <ClientOnly>
     <StepBar :active="2" :items="[
-      { title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
+      { title: '흐름 완성', description: '단일 기능에서 완전한 루프까지' },
       { title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
       { title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
-      { title: '최종 과제', description: '당신의 졸업 작품' }
+      { title: '최종 대과제', description: '당신의 졸업 작품' }
     ]" />
   </ClientOnly>
 </div>
 
 ## 3. 피드백 수집과 빠른 반복 개선
 
-문을 닫고 혼자 만들면 좋은 제품은 나오지 않습니다. 이제 당신의 프로토타입은 "핵심 기능" + "완전한 흐름" + "시연 데이터"를 갖췄습니다. 다른 사람에게 보여 줄 때가 되었습니다.
+방구석에서 만든 제품은 좋은 제품이 될 수 없습니다. 이제 프로토타입이 "핵심 기능" + "완전한 흐름" + "데모 데이터"를 갖추었으니, 남에게 보여줄 때입니다.
 
-### 3.1 누구에게 테스트하게 할까? 어떻게 테스트할까?
+### 3.1 누구에게 테스트를 맡길까? 어떻게 테스트할까?
 
-- **친구/동료 찾기**: 기술을 알 필요는 없습니다. 그냥 직접 사용해 보게 하면 됩니다.
-- **유도하지 말고 관찰하기**: "여기를 클릭하세요"라고 말하지 말고, 그들이 어디를 클릭하는지 봅니다. 버튼을 찾지 못한다면 설계에 문제가 있다는 뜻입니다.
-- **"Wizard of Oz"(오즈의 마법사 방법)**: AI가 아직 제대로 연결되지 않았다면, 백그라운드나 데이터베이스에서 사람이 직접 데이터를 수정해 AI 반환을 흉내 내고, 먼저 사용자가 이 기능을 필요로 하는지 검증할 수 있습니다.
+- **친구/동료에게 맡기기**: 기술을 이해할 필요 없이, 한번 사용해 보게만 하세요.
+- **안내하지 말고 관찰하기**: "여기를 클릭해"라고 말하지 말고, 그들이 어디를 클릭하는지 보세요. 버튼을 찾지 못한다면 디자인에 문제가 있는 것입니다.
+- **"Wizard of Oz" 방식**: AI가 아직 연동되지 않았다면, 수동으로 백엔드(또는 데이터베이스)에서 데이터를 수정해 AI의 응답을 시뮬레이션하여, 사용자가 이 기능을 필요로 하는지 먼저 검증할 수 있습니다.
 
-### 3.2 Bug와 불평을 마주하기
+### 3.2 버그와 불평에 대처하기
 
-- **스타일 깨짐**: 화면 크기가 다르면 레이아웃이 깨질 수 있습니다.
-  - **Action**: 스크린샷을 AI IDE에게 보내기 -> "이 화면 너비에서 깨졌어. 고쳐 줘."
-- **조작이 불편함**: "이 흐름이 너무 번거로워요."
-  - **Action**: 제안을 AI IDE에게 말하기 -> "사용자가 먼저 업로드하고 다시 생성하는 흐름이 너무 느리다고 해. 한 번에 생성하도록 바꿀 수 있을까?"
-- **새 요구사항**: "이 기능이 있으면 좋겠어요."
-  - **Action**: 핵심인지 평가합니다. 핵심이라면 AI에게 빠르게 간소화 버전을 구현하게 합니다.
+- **스타일 깨짐**: 다른 화면 크기에서 레이아웃이 깨질 수 있습니다.
+  - **Action**: 스크린샷을 찍어 AI IDE에 보내기 -> "이 화면 너비에서 레이아웃이 깨졌어요. 수정해 주세요."
+- **조작이 불편함**: "이 흐름이 너무 복잡해요".
+  - **Action**: AI IDE에 의견 전달 -> "사용자가 먼저 업로드하고 생성하는 게 너무 느리다고 해요. 원클릭 생성으로 바꿀 수 있나요?"
+- **새로운 요구사항**: "이런 기능이 있었으면 좋겠어요".
+  - **Action**: 핵심 기능인지 평가하고, 핵심이라면 AI에게 간소화 버전을 빠르게 구현하게 합니다.
 
-**기억하세요. 이 단계에서 AI는 최고의 수정 조수입니다. 당신은 문제를 발견하기만 하면 되고, 코드 수정은 AI에게 맡기면 됩니다.**
+**기억하세요: 이 단계에서 AI는 최고의 수정 도우미입니다. 여러분은 문제를 발견하는 것만 담당하고, 코드 수정은 AI에게 맡기세요.**
 
 <div style="margin: 50px 0;">
   <ClientOnly>
     <StepBar :active="3" :items="[
-      { title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
+      { title: '흐름 완성', description: '단일 기능에서 완전한 루프까지' },
       { title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
       { title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
-      { title: '최종 과제', description: '당신의 졸업 작품' }
+      { title: '최종 대과제', description: '당신의 졸업 작품' }
     ]" />
   </ClientOnly>
 </div>
 
-## 4. 🎓 단계 대과제: 당신의 "졸업 작품" 완성하기
+## 4. 🎓 단계 대과제: "졸업 작품" 완성
 
-축하합니다! 당신은 이미 "요구사항"에서 "프로토타입", 그리고 "AI 통합"까지 전 과정을 걸어왔습니다. 이제 최종 결과물을 보여 줄 시간입니다.
+축하합니다! "요구사항"에서 "프로토타입"을 거쳐 "AI 통합"까지의 전 과정을 마쳤습니다. 이제 최종 성과를 보여줄 시간입니다.
 
-**이번 대과제는 더 이상 "이커머스 소재 워크벤치"에만 제한되지 않습니다**. 자신의 관심사나 산업 배경을 결합해 세상에 하나뿐인 AI 제품 프로토타입을 만들어야 합니다.
+**이번 대과제는 "이커머스 소재 작업대"에 국한되지 않습니다.** 자신의 관심사나 산업 배경을 결합해 독창적인 AI 제품 프로토타입을 만들어야 합니다.
 
 ### 주제 선정과 요구사항
 
-**[산업 다분류 시나리오 방향 참고](../appendix-industry-scenarios/index.md)** 중 가장 가까운 장면을 하나 선택하거나, 자신의 생각에 따라 완전히 새로운 장면을 구상해야 합니다.
+**[산업 다분류 시나리오 방향 참고](../appendix-industry-scenarios/index.md)**에서 가장 가까운 시나리오를 선택하거나, 자신의 아이디어로 완전히 새로운 시나리오를 구상할 수 있습니다.
 
-**프로젝트는 앞의 몇 장에서 배운 모든 내용을 종합적으로 활용해야 합니다.**
+**프로젝트는 이전 수업에서 배운 모든 내용을 종합적으로 활용해야 합니다:**
 
-1.  **프로토타입 구축**: 프론트엔드 기술을 사용해 아름답고 사용하기 쉬운 인터페이스를 만듭니다.
-2.  **요구사항 제어**: 크고 완전한 것을 추구하지 말고, 핵심 기능의 논리적 폐쇄 루프를 추구합니다.
-3.  **API 접목**: 실제 AI 모델(LLM/VLM 등)을 연결해 애플리케이션에 진짜 지능을 부여합니다.
-4.  **가지고 놀 수 있는 애플리케이션 구현**: 단순한 정적 페이지가 아니라 데이터 흐름과 상호작용 피드백이 있는 동적 애플리케이션이어야 합니다.
+1.  **프로토타입 구축**: 프론트엔드 기술을 사용해 보기 좋고 사용하기 쉬운 인터페이스를 구축합니다.
+2.  **요구사항 관리**: 크고 완벽한 것을 추구하기보다 핵심 기능 논리가 루프를 이루도록 합니다.
+3.  **API 연동**: 실제 AI 모델(LLM/VLM 등)을 연동하여 애플리케이션에 진정한 지능을 부여합니다.
+4.  **실행 가능한 애플리케이션 구현**: 정적인 페이지가 아닌, 데이터 흐름과 인터랙션 피드백이 있는 동적 애플리케이션을 만듭니다.
 
 ### 과제 산출물
 
-최종적으로 다음 두 가지를 제출해야 합니다.
+최종적으로 다음 두 가지를 제출해야 합니다:
 
-1.  **완성된 프로토타입 애플리케이션**: 온라인 배포 또는 로컬 실행이 가능하고, 완전한 사용 흐름을 갖춰야 합니다.
-2.  **30초 시연 영상**: 애플리케이션의 사용 장면을 간단히 소개하고 핵심 기능의 실제 조작을 보여 주는 영상을 녹화합니다.
+1.  **완성된 프로토타입 애플리케이션**: 배포되어 온라인에서 접속 가능하거나, 로컬에서 실행 가능해야 하며, 완전한 사용 흐름을 갖추어야 합니다.
+2.  **30초 데모 영상**: 애플리케이션 시나리오를 간단히 소개하고, 핵심 기능의 실제 조작을 시연하는 영상을 녹화합니다.
 
 <el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
   <template #header>
@@ -269,34 +268,33 @@ export const mockProductTasks = [
   </template>
 
   <p>
-    이것은 Stage 1의 마지막 전투입니다. 아래 체크리스트에 따라 작품을 확인하세요.
+    이것은 Stage 1의 마지막 전투입니다. 다음 체크리스트에 따라 작품을 점검해 주세요:
   </p>
 
-  <div style="font-weight: bold; margin-bottom: 10px;">핵심 기능 자가 점검</div>
+  <div style="font-weight: bold; margin-bottom: 10px;">핵심 기능 자체 점검</div>
   <ul style="list-style-type: none; padding-left: 0;">
-    <li><label><input type="checkbox" disabled /> <strong>장면 명확성</strong>: 구체적인 산업 또는 애플리케이션 장면을 선택했다</label></li>
-    <li><label><input type="checkbox" disabled /> <strong>논리 폐쇄 루프</strong>: 핵심 흐름이 실행되며, Happy Path만 있는 것이 아니다</label></li>
-    <li><label><input type="checkbox" disabled /> <strong>AI 구동</strong>: 사전 설정 응답이 아니라 실제 대형 모델 API를 호출했다</label></li>
-    <li><label><input type="checkbox" disabled /> <strong>완전한 경험</strong>: Loading, 오류 처리, Mock Data를 포함한다</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>시나리오 명확</strong>: 구체적인 산업 또는 애플리케이션 시나리오를 선택함</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>논리 루프</strong>: 핵심 흐름이 실행 가능하며, Happy Path에만 국한되지 않음</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>AI 구동</strong>: 실제로 대형 모델 API를 호출하며, 미리 설정된 응답이 아님</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>경험 완성</strong>: Loading, 오류 처리 및 Mock Data 포함</label></li>
   </ul>
 
-  <div style="font-weight: bold; margin: 20px 0 10px;">제출물 준비</div>
+  <div style="font-weight: bold; margin: 20px 0 10px;">산출물 준비</div>
   <ul style="list-style-type: none; padding-left: 0;">
-    <li><label><input type="checkbox" disabled /> <strong>프로토타입 애플리케이션</strong>: 코드가 완성되었고 실행 가능하다</label></li>
-    <li><label><input type="checkbox" disabled /> <strong>시연 영상</strong>: 약 30초, 핵심 하이라이트를 명확히 보여 준다</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>프로토타입 애플리케이션</strong>: 코드가 완성되었고 실행 가능함</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>데모 영상</strong>: 약 30초 분량, 핵심 하이라이트를 명확히 보여 줌</label></li>
   </ul>
 </el-card>
 
 ## 다음 단계
 
-대과제를 완료했다면, 당신은 이미 "AI 애플리케이션 프로토타입을 독립적으로 개발하는" 능력을 갖춘 것입니다.
-다음 Stage 2에서는 더 복잡한 풀스택 개발을 깊이 다루며, 이 프로토타입을 실제로 배포 가능하고, 데이터베이스와 사용자 시스템을 갖춘 상업 수준의 애플리케이션으로 바꾸는 법을 배웁니다.
+대과제를 완료하면 "독립적으로 AI 애플리케이션 프로토타입을 개발하는" 능력을 갖추게 됩니다.
+다음 Stage 2에서는 더 복잡한 풀스택 개발을 심화 학습하고, 이 프로토타입을 실제로 온라인에 공개할 수 있고, 데이터베이스와 사용자 시스템을 갖춘 상업급 애플리케이션으로 만드는 법을 배우게 됩니다.
 
 다음 단계에서 만나요!
 
 <RelatedArticlesSection
-  title="계속 고급 단계로"
-  description="Stage 1 완료를 축하합니다. 아래 장들은 엔지니어링 개발로 들어가는 데 도움을 줍니다."
+  title="계속해서 실력 키우기"
+  description="Stage 1을 완료한 것을 축하합니다. 다음 장들이 엔지니어링 개발로 진입하는 데 도움이 됩니다."
   :items="relatedArticles"
 />
-
diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md b/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md
index 74bc846..3e6bc60 100644
--- a/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md
+++ b/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md
@@ -1245,3 +1245,7 @@ API Key는 **아주 긴 “고급 비밀번호 + 신분증 번호”**로 이해
 - 그다음 “무엇에 비유할 수 있는가”를 한 문장으로 쓰기
 - 마지막으로 아주 간단한 예 하나 주기  
   이렇게 하면 당신의 “개인 용어집”이 점점 길어지고 실용적이 되어, 컴퓨터와 더 잘 소통할 수 있게 됩니다.
+---
+title: 'Beginner 2: AI Coding Tools'
+description: 'Move from web AI coding to local development: understand IDE vs AI IDE, build a snake game with Trae, and learn practical AI collaboration tips.'
+---
diff --git a/docs/ko-kr/stage-1/learning-map/index.md b/docs/ko-kr/stage-1/learning-map/index.md
index 1424d23..a8fe762 100644
--- a/docs/ko-kr/stage-1/learning-map/index.md
+++ b/docs/ko-kr/stage-1/learning-map/index.md
@@ -11,40 +11,43 @@ const relatedArticles = relatedArticlesMap['ko-kr/stage-1/learning-map'] ?? []
 
 # 아이디어에서 AI 제품까지
 
-예전에는 소프트웨어를 만들기 위한 문턱이 높았습니다. 프로그래밍을 알아야 했고, 알고리즘도 알아야 했고, 몇 년의 프로젝트 경험도 필요했습니다.
-지금은 다릅니다. 아이디어만 있다면 AI가 코드를 작성하도록 도와줄 수 있습니다.
+::: info 특별 감사
+**칭화대학교 선전 국제대학원** 학생 여러분의 본 과정 테스트, 피드백, 지원에 특별히 감사드립니다! 여러분의 의견과 기여가 이 과정을 더 나은 곳으로 만들었습니다. [👉 전체 기여자 목록 보기](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
+:::
 
-이것은 거대한 변화입니다. **프로그래밍 언어가 자연어로 변하고 있습니다**.
+예전에는 소프트웨어를 만드는 진입 장벽이 매우 높았습니다: 프로그래밍을 알아야 하고, 알고리즘을 이해해야 하며, 몇 년의 프로젝트 경험도 필요했습니다.
+지금은 다릅니다. 아이디어만 있으면 AI가 코드를 작성해 줍니다.
 
-대형 언어 모델(LLM)의 등장은 개발을 더 이상 "기술 고수만의 전유물"이 아니라, 누구나 시작할 수 있는 도구로 바꾸었습니다. 예전에는 가장 어려운 것이 "코드를 어떻게 쓰는가"였다면, 지금 가장 어려운 것은 "**무엇을 만들 것인가**"입니다.
+이것은 거대한 변화입니다: **프로그래밍 언어가 자연어로 변하고 있습니다.**
 
-> **Vibe Coding이란 무엇인가요?**
-> 간단히 말하면 "말로 하는 프로그래밍"입니다. Vibe Coding은 직접 코드를 쓰는 대신 AI와 대화하는 방식에 의존해 프로그래밍 프로젝트를 완성하는 것을 뜻합니다.
+대형 언어 모델(LLM)의 등장으로, 개발은 더 이상 "기술 고수의 전유물"이 아니라 모든 사람이 사용할 수 있는 도구가 되었습니다. 예전에 가장 어려웠던 것은 "코드를 어떻게 쓸까"였고, 지금 가장 어려운 것은 "**무엇을 만들까**"입니다.
 
-물론 AI가 코드를 쓰게 하는 것은 첫걸음일 뿐입니다. 정말 사용할 수 있는 제품을 만들려면 다음과 같은 문제도 만나게 됩니다.
+> **Vibe Coding이란?**
+> 간단히 말해, "말로 프로그래밍하는 것"입니다. Vibe Coding은 코드를 직접 작성하는 대신, AI와 대화하는 것만으로 프로그래밍 프로젝트를 완수하는 방식을 의미합니다.
 
-- AI가 깨끗하고 유지보수 가능한 코드를 쓰게 하려면 어떻게 해야 할까?
-- 흩어진 코드 조각을 실행 가능한 애플리케이션으로 어떻게 조립할까?
-- 애플리케이션을 실제로 배포하고 사람들이 쓰게 하려면 어떻게 해야 할까?
-- 텍스트 생성, 이미지 인식 같은 AI 기능을 내 제품에 어떻게 넣을까?
+물론, AI가 코드를 작성하는 것은 첫 번째 단계일 뿐입니다. 정말로 사용 가능한 제품을 만들려면, 다음과 같은 문제도 만나게 됩니다:
+- AI가 어떻게 깔끔하고 유지보수 가능한 코드를 작성하게 할 것인가?
+- 산발적인 코드를 어떻게 실행 가능한 애플리케이션으로 조립할 것인가?
+- 애플리케이션을 어떻게 실제로 온라인에 공개하고, 사람들이 사용하게 할 것인가?
+- 텍스트 생성, 이미지 인식 같은 AI 능력을 어떻게 제품에 넣을 것인가?
 
-이 질문들은 이 강의 안에서 답을 찾게 됩니다.
+이런 질문에 대한 답을 이 과정에서 찾을 수 있습니다.
 
-학생이든, 교사든, 의사든, 노동자든, 기술을 전혀 모르는 평범한 사람이든 상관없습니다. 몇 년씩 프로그래밍을 먼저 배울 필요 없이, 2주면 실행되고 시연할 수 있는 제품 프로토타입을 만들 수 있습니다.
+학생이든, 교사든, 의사든, 노동자든, 기술을 전혀 모르는 일반인이든 상관없습니다 -- 몇 년 동안 프로그래밍을 먼저 배울 필요 없이, 2주면 실행 가능하고 시연할 수 있는 제품 프로토타입을 만들 수 있습니다.
 
-| 당신의 정체성 | 이 강의가 도와줄 수 있는 것 |
+| 당신의 신분 | 이 과정이 도와줄 수 있는 것 |
 |---------|-------------|
-| 학생 | 과제, 대회, 창업 프로젝트를 직접 만들고 더 이상 남에게 부탁하지 않기 |
-| 직장인 | 반복 업무를 자동화하고, 효율을 높이며, 부업까지 개발하기 |
-| 제품 관리자 / 디자이너 | 아이디어가 종이에 머물지 않고, 상사나 고객에게 보여 줄 Demo를 빠르게 만들기 |
-| 창업자 / 중소기업 운영자 | 저비용으로 아이디어를 검증하고, 수만 위안을 들여 외주를 맡기지 않아도 MVP 만들기 |
-| 교사 / 교육 종사자 | 교육 도구, 수업 자료, 자동 문제 출제를 만들어 교육 효율 높이기 |
-| 의사 / 변호사 / 전문직 | 전문 업무 흐름을 자동화하고 자신만의 효율 도구 만들기 |
-| 누구나 | AI로 생활과 업무의 구체적인 문제를 해결하고, 불가능해 보였던 일을 가능하게 만들기 |
+| 학생 | 과제, 대회, 창업, 직접 프로젝트를 만들어 더 이상 다른 사람에게 부탁하지 않음 |
+| 직장인 | 반복 업무를 자동화하고, 효율을 높이며, 부업까지 개발 |
+| 제품 관리자 / 디자이너 | 아이디어가 더 이상 종이 위에만 머물지 않고, 빠르게 Demo를 만들어 상사/고객에게 보여줌 |
+| 창업자 / 중소기업주 | 저비용으로 아이디어를 검증하고, 수만 원을 들여 외주를 맡기지 않고도 MVP를 만듦 |
+| 교사 / 교육 종사자 | 교육 도구, 강의 자료, 자동 출제를 만들어 교육 효율을 높임 |
+| 의사 / 변호사 / 전문 직업인 | 전문 프로세스를 자동화하고, 자신만의 효율 도구를 구축 |
+| 누구나 | AI로 생활/업무의 구체적인 문제를 해결하고, 불가능을 가능하게 만듦 |
 
-AI 시대에는 실행력과 아이디어가 언제나 기술보다 더 중요합니다.
+AI 시대에는 실행력과 아이디어가 항상 기술보다 더 중요합니다.
 
-## 성장 경로: "AI를 쓸 줄 아는 사람"에서 "AI 제품을 만들 줄 아는 사람"으로
+## 성장 경로: "AI를 사용할 줄 아는 것"에서 "AI 제품을 만들 줄 아는 것"까지
 
 <div class="stage-intro">
   <div class="stage-card">
@@ -52,9 +55,9 @@ AI 시대에는 실행력과 아이디어가 언제나 기술보다 더 중요
     <h3>초보자 입문</h3>
     <p class="stage-role">AI 프로그래밍 체험</p>
     <div class="stage-tags">
-      <span>스네이크 미니게임</span>
+      <span>스네이크 미니 게임</span>
       <span>제로 베이스 시작</span>
-      <span>Vibecoding 첫 경험</span>
+      <span>Vibecoding 첫 체험</span>
       <span>몇 분 만에 생성</span>
     </div>
   </div>
@@ -68,30 +71,30 @@ AI 시대에는 실행력과 아이디어가 언제나 기술보다 더 중요
     <div class="stage-tags">
       <span>AI IDE (Cursor/Claude)</span>
       <span>요구사항 분해 & 프로토타입</span>
-      <span>AI 기능 접목</span>
-      <span>완성 Demo 개발</span>
+      <span>AI 능력 연동</span>
+      <span>완전한 Demo 개발</span>
     </div>
   </div>
   <div class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>2단계</h3>
-    <p class="stage-role">초중급 개발자 / 독립 개발자</p>
+    <p class="stage-role">초중급 개발 / 인디 개발자</p>
     <div class="stage-tags">
       <span>Figma에서 코드로</span>
       <span>Supabase 데이터베이스</span>
-      <span>Stripe 결제 통합</span>
-      <span>Dify 지식베이스</span>
+      <span>Stripe 결제 연동</span>
+      <span>Dify 지식 베이스</span>
     </div>
   </div>
   <div class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>3단계</h3>
-    <p class="stage-role">고급 개발자 / 아키텍트</p>
+    <p class="stage-role">고급 개발 / 아키텍트</p>
     <div class="stage-tags">
-      <span>Web/미니프로그램/멀티 플랫폼</span>
+      <span>Web/미니프로그램/멀티플랫폼</span>
       <span>MCP 고급 도구</span>
       <span>RAG & LangGraph</span>
-      <span>시니어 엔지니어 사고방식</span>
+      <span>고급 엔지니어 사고</span>
     </div>
   </div>
 </div>
@@ -172,103 +175,101 @@ AI 시대에는 실행력과 아이디어가 언제나 기술보다 더 중요
 }
 </style>
 
-이 완성된 학습 경로를 통해 당신은 다음을 얻게 됩니다.
+이 완전한 학습 경로를 통해, 다음을 얻게 됩니다:
 
-- **Vibe Coding 개발 능력:** Vibecoding 사고방식과 AI 코딩 도구를 능숙하게 사용해 개발 효율을 몇 배로 높입니다. 더 이상 문법을 억지로 외우는 것이 아니라, AI가 고품질 코드를 생성하도록 이끄는 방법을 배웁니다.
-- **풀스택 개발 역량:** UI 디자인에서 프론트엔드 구현까지, 데이터베이스 설계에서 API 개발까지, 로컬 개발에서 클라우드 배포까지 현대 Web 애플리케이션의 전체 기술 스택을 익힙니다.
-- **AI 기능 통합:** 다양한 멀티모달 AI API를 호출하는 법을 배우고, 텍스트, 이미지, 음성 등 AI 기능을 애플리케이션에 매끄럽게 통합하며, RAG 같은 기술로 지능형 제품을 구축합니다.
-- **제품 사고와 운영 능력:** 사용자 조사에서 요구사항 분해까지, MVP 설계에서 제품 반복 개선까지, 결제 통합에서 사용자 관리까지, 완전한 제품 개발과 운영의 폐쇄 루프를 형성합니다.
+- **Vibe Coding 개발 능력:** vibecoding 사고와 AI 코딩 도구를 능숙하게 사용하여, 개발 효율을 몇 배로 높입니다. 더 이상 문법을 외울 필요 없이, AI가 고품질 코드를 생성하도록 안내하는 방법을 배웁니다.
+- **풀스택 개발 기술:** UI 설계에서 프론트엔드 구현, 데이터베이스 설계에서 API 개발, 로컬 개발에서 클라우드 배포까지, 현대 웹 애플리케이션의 완전한 기술 스택을 마스터합니다.
+- **AI 능력 통합:** 다양한 멀티모달 AI API를 호출하는 방법을 배우고, 텍스트, 이미지, 음성 등 AI 능력을 애플리케이션에 원활하게 통합하며, RAG 등의 기술을 통해 지능형 제품을 구축합니다.
+- **제품 사고와 운영 능력:** 사용자 조사에서 요구사항 분해, MVP 설계에서 제품 반복, 결제 연동에서 사용자 관리까지, 완전한 제품 개발과 운영 루프를 형성합니다.
 
-# 다 배우고 나면 무엇을 할 수 있나요?
+# 배우고 나면 무엇을 할 수 있을까?
 
-## 1단계: 나의 첫 제품 프로토타입 만들기
+## 1단계: 첫 번째 제품 프로토타입 만들기
 
-이 단계는 프로그래밍 기초가 전혀 없거나, 조금은 알지만 자신감이 부족한 사람에게 적합합니다. 이론 지식을 잔뜩 먼저 배울 필요 없이, 바로 따라 만들면서 AI 도구로 코드를 작성하는 법을 배웁니다.
+이 단계는 프로그래밍 기반이 전혀 없거나, 조금은 알지만 자신감이 부족한 분들에게 적합합니다. 많은 이론 지식을 먼저 배울 필요 없이, 바로 따라 하면서 AI 도구로 코드를 작성하는 법을 배웁니다.
 
-**배우고 나면 할 수 있는 것**:
+**배우고 나면 할 수 있는 것:**
+- AI 프로그래밍 도구로 독립적으로 웹 애플리케이션 하나를 완성
+- 제품 아이디어를 클릭 가능하고 상호작용 가능한 프로토타입으로 만들기
+- 프로토타입에 AI 기능 추가(예: 텍스트에서 이미지 생성, 스마트 대화)
+- 오류를 만났을 때 어떻게 파악하고 해결하는지 알기
 
-- AI 프로그래밍 도구로 웹 애플리케이션 하나를 독립적으로 완성하기
-- 제품 아이디어를 클릭 가능하고 상호작용 가능한 프로토타입으로 바꾸기
-- 프로토타입에 AI 기능 추가하기. 예: 텍스트로 이미지 만들기, 지능형 대화
-- 오류가 났을 때 어떻게 확인하고 해결해야 하는지 알기
+간단히 말해, "실행 가능하고, 남에게 시연할 수 있는" 것을 만들 수 있게 됩니다.
 
-간단히 말하면, "실행되고, 다른 사람에게 시연할 수 있는" 무언가를 만들 수 있게 됩니다.
+먼저 미니 게임을 통해 AI 프로그래밍을 체험하고, AI 프로그래밍 도구로 코드를 작성하고 오류를 수정하는 법을 배울 수 있습니다. 그다음 간단한 페이지부터 시작해 점차 상호작용이 가능한 다중 페이지 애플리케이션을 만들고, 텍스트에서 이미지 생성, 스마트 대화 같은 AI 기능을 추가합니다. 마지막으로 완전한 프로젝트를 독립적으로 완성하여, 여러분의 크리에이티비티가 실제로 실현될 가능성을 갖게 됩니다.
 
-먼저 미니게임으로 AI 프로그래밍을 체감하고, AI 프로그래밍 도구가 코드를 작성하고 오류를 고치도록 도와주는 법을 배웁니다. 이어서 간단한 페이지에서 시작해 점차 상호작용 가능한 다중 페이지 애플리케이션을 만들고, 텍스트-이미지 생성, 지능형 대화 같은 AI 기능을 더합니다. 마지막에는 독립적으로 완성 프로젝트를 끝내며, 당신의 아이디어가 실제로 구현될 가능성을 갖게 됩니다.
-
-# 왜 프로젝트 기반으로 훈련해야 할까요?
+# 왜 프로젝트 기반 훈련을 사용할까?
 
 > **현실 세계의 도전**
 >
-> 이유는 사실 간단합니다. 대부분의 학습자가 현재 상태로 바로 직장에 들어가면, 실제 프로젝트와 상사/고객의 "사회적 혹독함" 앞에서 한 걸음도 나아가기 어려울 가능성이 큽니다. 현실 세계에서 더 흔한 장면은 이렇습니다.
+> 이유는 사실 간단합니다: 대부분의 학생이 현재 상태로 직장에 바로 들어가면, 실제 프로젝트와 상사/고객의 "사회적 수술" 아래서 한 걸음도 나아가기 어려울 가능성이 높습니다. 현실 세계에서 더 흔한 시나리오는:
 
-> 지도교수 / 상사: 우리는 xxx를 만들려고 해. 목표는 yyy 효과를 내는 거야.
+> 당신의 멘토/상사: 우리는 xxx를 만들어야 하고, 목표는 yyy 효과를 달성하는 것입니다.
 >
-> 문서? 준비된 프레임워크? 상세한 요구사항 설명? 많은 경우 존재하지 않습니다.
+> 문서? 기존 프레임워크? 상세한 요구사항 설명? 많은 경우 존재하지 않습니다.
 
-실제 업무 속 많은 과제는 본질적으로 높은 불확실성 속에서 한 번도 본 적 없는 문제를 해결하는 일입니다. 요구사항은 모호하고, 경계는 계속 변하며, 누구도 정답을 알려 주지 않습니다. 스스로 자료를 찾고, 실험하고, 프로토타입을 만들고, 계속 반복 개선한 끝에 "실행되고, 사용할 수 있고, 배포 가능한" 해결책을 내놓아야 합니다.
+실제 업무의 많은 과제는 본질적으로 고도로 불확실한 환경에서 한 번도 본 적 없는 문제를 해결하는 것입니다: 요구사항은 모호하고, 경계는 변하며, 아무도 정답을 알려주지 않습니다. 스스로 자료를 찾고, 실험을 하고, 프로토타입을 만들고, 끊임없이 반복하여, 마지막에 "실행 가능하고, 사용 가능하고, 온라인에 공개할 수 있는" 솔루션을 제시해야 합니다.
 
-이 강의가 하려는 일은 비교적 안전한 환경에서 미리 한 번 "모의 사회적 혹독함"을 겪게 하는 것입니다.
+이 과정이 하고 싶은 것은, 비교적 안전한 환경에서, 미리 한 번 "모의 사회적 수술"을 경험하게 하는 것입니다:
 
-- 어느 정도 난이도가 있어 보이는 프로젝트 과제를 통해 문제를 분해하고, 방안을 설계하고, 스스로 자료를 찾는 연습을 강제합니다.
-- 지나치게 "따라 하기만 하면 되는" 스캐폴딩과 코드가 아니라, 중대형 코드베이스를 읽고 이해하고 고치는 법을 배우게 합니다.
-- 아이디어에서 배포까지 이어지는 완전한 폐쇄 루프를 통해 실제 제품이 0에서 1로 만들어지는 전체 과정을 경험하게 합니다.
+- 겉보기에 약간 난이도가 있는 프로젝트 과제를 통해, 문제 분해, 솔루션 설계, 스스로 자료 찾기를 연습하게 함
+- 그다지 "쉬운" 스캐폴딩과 코드를 통해, 중대형 코드베이스를 읽고, 이해하고, 수정하는 법을 배움
+- 아이디어에서 온라인 공개까지의 완전한 루프를 통해, 실제 제품이 0에서 1이 되는 완전한 과정을 경험
 
-단기적으로는 이런 훈련이 꽤 고통스러울 수 있습니다. 하지만 장기적으로는 구직과 커리어 성장에서 경쟁력을 크게 높여 줍니다. 더 큰 일을 감당할 수 있고, 불확실한 환경에서 돌파구를 찾을 수 있으며, AI를 "Demo를 가지고 노는 단계"에 머물게 하지 않고 실제 제품으로 구현할 능력을 갖추게 됩니다.
+단기적으로, 이런 훈련은 확실히 꽤 고역입니다; 하지만 장기적으로, 취업과 직업 발전에서 경쟁력을 크게 높여줍니다: 더 많은 일을 감당하고, 불확실한 환경에서 돌파구를 더 잘 찾으며, AI를 실제로 구현되는 제품으로 만드는 능력도 더 갖게 되어, "Demo만 가지고 놀기" 단계에 머물지 않게 됩니다.
 
-# 질문의 기술: AI 시대의 필수 역량
+# 질문의 기술: AI 시대의 필수 스킬
 
-AI 시대에는 질문도 일종의 "기본기"입니다. 같은 코드, 같은 오류라도 **어떻게 질문하느냐가 AI가 어떤 답을 줄 수 있는지를 거의 결정합니다**. 두루뭉술한 설명으로 끝날지, 아니면 단계별로 실행 가능한 수정 방법을 줄지가 달라집니다.
+AI 시대에는 질문하는 것도 하나의 "기본기"입니다. 같은 코드, 같은 오류에 대해, **어떻게 질문하느냐가 AI가 어떤 답을 줄 수 있는지를 거의 결정합니다**: 막연한 이야기인지, 아니면 단계별로 실행 가능한 수정 방법인지.
 
-**좋은 습관을 들이세요**: "AI에게 질문하기"를 일상적인 개발 흐름의 일부로 생각하세요. 이해가 안 되거나 막히는 문제가 생기면 바로 질문합니다.
+**좋은 습관 들이기**: "AI에게 질문하기"를 일상 개발 프로세스의 일부로 만드세요: 모르거나 막힌 문제를 만나면 바로 물어보세요.
 
-## 왜 이것이 필수 역량인가요?
+## 왜 이것이 필수 스킬인가?
 
-- **현실에는 완전한 문서가 드뭅니다**: 더 자주 마주하는 것은 불명확한 요구사항, 반쯤 만들어진 코드, 흩어진 오류 정보입니다.
-- **AI는 당신 곁의 멘토이자 동료입니다**: 질문을 잘하는 사람은 AI를 "고품질 페어 프로그래밍 파트너"로 만들 수 있습니다.
-- **능력의 상한은 소통이 결정합니다**: 핵심 정보를 더 잘 제공하고, 출력 형식을 더 잘 제한할수록 답변은 더 쓸모 있어집니다.
+- **현실에는 거의 완전한 문서가 없음**: 더 많은 경우, 직면하는 것은 불명확한 요구사항, 반쯤 완성된 코드, 산발적인 오류 정보
+- **AI는 당신의 휴대용 멘토 + 동료**: 질문을 잘하는 사람은 그것을 "고품질 짝 프로그래밍"으로 만들 수 있음
+- **능력의 상한은 소통에 의해 결정됨**: 핵심 정보를 더 많이 제공하고, 출력 형식을 더 잘 제약할수록, 답이 더 사용 가능해짐
 
-**흔한 오해**: "왜 오류가 나나요?"라고 한마디만 물으면 대부분 추측만 잔뜩 받게 됩니다. 맥락을 채워 넣어야 실행 가능한 방안을 얻습니다.
+**흔한 오해**: "왜 오류가 나?"라고 한마디만 물으면 보통 추측만 잔뜩 얻게 됩니다. 컨텍스트를 보완해야 실행 가능한 솔루션을 얻을 수 있습니다.
 
-## 정보를 AI에게 "먹이는" 방법: 스크린샷 vs 복사/붙여넣기
+## AI에게 정보를 어떻게 "먹이는가": 스크린샷 vs 복사 붙여넣기
 
-두 방식 모두 가능하지만 용도가 다릅니다.
+두 방식 모두 가능하지만, 용도가 다릅니다:
 
-| 방식 | 적합한 상황 | 핵심 요구사항 |
+| 방식 | 적용 시나리오 | 핵심 요구사항 |
 | ------------ | ----------------------------------------- | ----------------------------------------- |
-| **복사/붙여넣기** | 오류 스택, 로그, 코드, 설정, API 응답 | 가능한 한 완전하게. 핵심 키워드 한 줄만 자르지 않기 |
-| **스크린샷** | UI 레이아웃 문제, 상호작용 이상, 도구 화면에서 버튼을 찾기 어려운 경우 | 전체 화면 캡처 + 중요 영역 표시. 가능하면 짧은 설명 한 문장 추가 |
+| **복사 붙여넣기** | 오류 스택, 로그, 코드, 설정, API 반환 | 가능한 한 완전하게, 키워드 한 줄만 자르지 마세요 |
+| **스크린샷** | UI 레이아웃 문제, 인터랙션 이상, 도구 인터페이스에서 버튼을 찾을 수 없음 | 전체 화면 캡처 + 핵심 영역 표시, 글로 된 설명 한 문장을 함께 제공하는 것이 좋음 |
 
 ::: danger ⚠️ 중요한 전제
-**모든 AI가 이미지 입력을 지원하는 것은 아닙니다.** 스크린샷으로 소통하려면 AI가 멀티모달 능력, 즉 이미지를 이해하고 분석할 수 있는 능력을 갖춰야 합니다. 현재 이미지 입력을 지원하는 AI에는 Claude(Anthropic), GPT-4V/GPT-4o(OpenAI), Gemini(Google), 그리고 일부 중국산 대형 모델인 Tongyi Qianwen, Wenxin Yiyan 등이 있습니다.
+**모든 AI가 이미지 입력을 지원하는 것은 아닙니다.** 스크린샷으로 소통하려면 AI가 멀티모달 능력(즉, 이미지를 이해하고 분석할 수 있는 능력)을 갖추어야 합니다. 현재 이미지 입력을 지원하는 AI에는 Claude(Anthropic), GPT-4V/GPT-4o(OpenAI), Gemini(Google), 그리고 일부 국산 대형 모델인 퉁이치엔원, 원신이연 등이 있습니다.
 
-**사용 중인 AI가 이미지 입력을 지원하지 않는다면** 스크린샷은 인식되지 않습니다. 이때는 복사/붙여넣기로 텍스트를 전달하세요.
+**사용 중인 AI가 이미지 입력을 지원하지 않는다면**, 스크린샷이 인식되지 않으므로, 이때는 복사 붙여넣기 텍스트 방식으로 소통하세요.
 :::
 
-## AI가 "잘 설명하게" 만드는 프롬프트 기법
+## AI가 "잘 설명해 주도록" 만드는 프롬프트 기술
 
-정답만 필요한 것이 아니라 답을 "배우고" 싶다면, 아래와 같은 지시를 쓰면 설명 품질이 크게 올라갑니다.
+답만 원하는 것이 아니라, 답을 "배우고" 싶다면. 다음과 비슷한 지시어를 사용하면 설명 품질을 크게 높일 수 있습니다:
 
 > **학습형 질문 예시**
 >
-> - "먼저 이 개념을 5문장으로 명확하게 설명한 뒤, 제가 제대로 이해했는지 확인할 질문을 몇 개 해 주세요."
-> - "이 오류 메시지를 자세히 설명해 주세요. 왜 오류가 나는지 이해가 안 됩니다."
+> - "먼저 5문장으로 이 개념을 명확히 설명한 다음, 몇 가지 질문을 통해 제가 제대로 이해했는지 확인해 주세요."
+> - "이 오류 메시지를 자세히 설명해 주세요. 왜 오류가 나는지 이해가 안 돼요."
 
-# 오래 버텼는데도 해결이 안 됩니다. 포기하고 싶어요
+# 오래 참아도 안 풀려요, 포기하고 싶어요
 
-어쩌면 버티는 방법이 맞지 않았을 수 있습니다. 혼자 어둠 속에서 억지로 버티지 말고, 작성자와 조교들에게 이야기해 보세요. 이미 시도한 방법, 만난 구체적인 막힘, 현재의 심리 상태를 솔직하게 말해 주세요. 많은 경우 방향을 조금만 조정하거나 핵심 지식 하나만 보충해도 계속 앞으로 나아갈 수 있습니다.
+아마도 당신이 고집하는 방법이 맞지 않을 수 있습니다. 혼자 어둠 속에서 버티지 말고, 작가와 조교들과 이야기해 보세요: 이미 시도한 방법, 만난 구체적인 막힌 점, 그리고 현재 심리 상태를 솔직하게 말하세요. 많은 경우, 방향을 조금만 조정하고, 핵심 지식을 하나만 보완하면, 다시 앞으로 나아갈 수 있습니다.
 
-# 튜토리얼 설계가 합리적이지 않은 것 같아요
+# 튜토리얼의 일부 설계가 불합리하다고 생각해요
 
-언제든 작성자에게 연락하거나 issue를 제출하거나, 그룹/수업에서 직접 피드백해 주세요. 우리는 여러분과 함께 이 튜토리얼을 점점 더 좋게 다듬고 싶습니다. 어디가 명확하지 않은지, 어디의 경험이 좋지 않은지, 어디에서 헛수고를 하게 되었는지 솔직하게 지적해 주세요. 더 실제적이고 구체적인 피드백일수록 뒤에 오는 학습자가 덜 헤매도록 도와줍니다.
+언제든지 작가에게 연락하거나, 이슈를 제출하거나, 그룹/수업에서 직접 피드백해 주세요. 우리는 여러분과 함께 이 튜토리얼을 점점 더 좋게 만들어 가고 싶습니다: 어디가 불명확한지, 어디서 경험이 좋지 않았는지, 어디서 헛되이 시간을 보냈는지, 모두 솔직하게 지적해 주세요. 더 진실하고, 더 구체적인 피드백일수록, 나중에 오시는 분들이 불필요하게 겪는 어려움을 줄이는 데 더 도움이 됩니다.
 
 # Reference
 
-- [난징대학교 컴퓨터과학기술학과 컴퓨터 시스템 기초 과정 실험](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+- [난징대학교 컴퓨터과학기술학과 컴퓨터시스템기초 과정 실험](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
 
 <RelatedArticlesSection
-  title="다음에 무엇을 배울 수 있나요"
-  description="'AI를 쓸 줄 아는 단계'에서 '제품을 만들 줄 아는 단계'로 계속 앞으로 나아갑니다."
+  title="다음에 무엇을 배울 수 있을까"
+  description="AI를 사용할 줄 아는 것에서 제품을 만들 줄 아는 것까지의 경로를 따라 계속 나아가세요."
   :items="relatedArticles"
 />
-
diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml
index b7d0815..80a152f 100644
--- a/docs/public/sitemap.xml
+++ b/docs/public/sitemap.xml
@@ -18,95 +18,95 @@
     <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/compilers/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/compilers</loc>
     <lastmod>2026-02-25T01:38:27+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/compilers/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/compilers"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-networks"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-organization/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-organization</loc>
     <lastmod>2026-02-25T01:38:27+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-organization/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/computer-organization"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/data-structures"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/operating-systems"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/power-on-to-web/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/power-on-to-web</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/power-on-to-web/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/power-on-to-web"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/programming-languages/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/programming-languages</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/programming-languages/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/programming-languages"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/type-systems/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/type-systems</loc>
     <lastmod>2026-02-25T01:38:27+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/type-systems/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/type-systems"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack</loc>
     <lastmod>2026-02-25T01:38:27+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/command-line-shell"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/</loc>
@@ -116,636 +116,636 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/debugging-art"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path</loc>
     <lastmod>2026-02-21T10:04:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/environment-path"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control</loc>
     <lastmod>2026-02-22T01:21:39+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/git-version-control"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ide-basics/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ide-basics</loc>
     <lastmod>2026-02-26T12:17:40+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ide-basics/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/appendix/2-development-tools/ide-basics/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ide-basics"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/appendix/2-development-tools/ide-basics"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers</loc>
     <lastmod>2026-02-21T10:04:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/package-managers"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ports-localhost/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ports-localhost</loc>
     <lastmod>2026-02-21T10:04:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ports-localhost/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ports-localhost"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex</loc>
     <lastmod>2026-02-21T10:04:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/regex"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ssh-authentication/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ssh-authentication</loc>
     <lastmod>2026-02-21T10:04:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ssh-authentication/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/2-development-tools/ssh-authentication"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/a11n-i18n/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/a11n-i18n</loc>
     <lastmod>2026-02-24T08:34:53+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/a11n-i18n/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/a11n-i18n"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering</loc>
     <lastmod>2026-02-23T01:40:56+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-engineering"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-framework-nature/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-framework-nature</loc>
     <lastmod>2026-02-21T10:04:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-framework-nature/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-framework-nature"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks</loc>
     <lastmod>2026-02-17T01:39:59+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-project-architecture/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-project-architecture</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-project-architecture/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/frontend-project-architecture"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation</loc>
     <lastmod>2026-02-24T08:34:53+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/graphics-animation"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/html-css-layout/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/html-css-layout</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/html-css-layout/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/html-css-layout"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive</loc>
     <lastmod>2026-02-17T01:39:59+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-runtime/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-runtime</loc>
     <lastmod>2026-02-17T01:39:59+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-runtime/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/javascript-runtime"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/realtime-communication/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/realtime-communication</loc>
     <lastmod>2026-02-24T08:34:53+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/realtime-communication/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/realtime-communication"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/routing-navigation/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/routing-navigation</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/routing-navigation/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/routing-navigation"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/state-management/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/state-management</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/state-management/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/state-management"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/typescript/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/typescript</loc>
     <lastmod>2026-02-17T01:39:59+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/typescript/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/typescript"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/3-browser-and-frontend/web-performance"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design</loc>
     <lastmod>2026-02-23T01:40:56+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-design"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-intro/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-intro</loc>
     <lastmod>2026-02-24T00:18:09+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-intro/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/api-intro"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/async-task-queues/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/async-task-queues</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/async-task-queues/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/async-task-queues"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/auth-authorization"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-languages/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-languages</loc>
     <lastmod>2026-03-01T12:28:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-languages/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-languages"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture</loc>
     <lastmod>2026-03-01T12:28:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-layered-architecture"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-project-architecture/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-project-architecture</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-project-architecture/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/backend-project-architecture"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/caching/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/caching</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/caching/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/caching"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/client-languages/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/client-languages</loc>
     <lastmod>2026-02-24T08:34:53+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/client-languages/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/client-languages"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/concurrency-async"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/cross-platform/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/cross-platform</loc>
     <lastmod>2026-02-24T08:34:53+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/cross-platform/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/cross-platform"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/domain-specific-languages/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/domain-specific-languages</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/domain-specific-languages/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/domain-specific-languages"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/file-storage/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/file-storage</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/file-storage/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/file-storage"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol</loc>
     <lastmod>2026-02-23T12:09:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/http-protocol"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/message-queues"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/rate-limiting-backpressure/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/rate-limiting-backpressure</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/rate-limiting-backpressure/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/rate-limiting-backpressure"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/request-journey/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/request-journey</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/request-journey/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/request-journey"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/search-engines/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/search-engines</loc>
     <lastmod>2026-02-25T12:22:49+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/search-engines/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/search-engines"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/serialization/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/serialization</loc>
     <lastmod>2026-02-23T12:09:47+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/serialization/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/serialization"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/web-frameworks/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/web-frameworks</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/web-frameworks/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/4-server-and-backend/web-frameworks"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing</loc>
     <lastmod>2026-02-24T08:34:53+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/ab-testing"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis</loc>
     <lastmod>2026-02-26T12:17:40+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-analysis"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-governance/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-governance</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-governance/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-governance"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-models/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-models</loc>
     <lastmod>2026-02-24T08:39:55+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-models/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-models"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking</loc>
     <lastmod>2026-02-26T12:17:40+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-tracking"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/data-visualization"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/5-data/database-fundamentals"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/distributed-systems"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/high-availability"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/ci-cd"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-iam/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-iam</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-iam/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-iam"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms</loc>
     <lastmod>2026-02-20T21:59:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-storage-cdn/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-storage-cdn</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-storage-cdn/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/cloud-storage-cdn"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/dns-https"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/docker-containers"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/gateway-proxy/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/gateway-proxy</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/gateway-proxy/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/gateway-proxy"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/incident-response/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/incident-response</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/incident-response/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/incident-response"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/kubernetes"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/linux-basics/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/linux-basics</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/linux-basics/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/linux-basics"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/load-balancing-gateway/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/load-balancing-gateway</loc>
     <lastmod>2026-05-12T01:15:35+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/load-balancing-gateway/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/load-balancing-gateway"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging</loc>
     <lastmod>2026-02-20T21:59:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents</loc>
     <lastmod>2026-03-02T12:52:38+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-agents"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary</loc>
     <lastmod>2026-03-18T07:57:16-05:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-history/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-history</loc>
     <lastmod>2026-02-26T09:33:06+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-history/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/appendix/8-artificial-intelligence/ai-history/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-history"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/appendix/8-artificial-intelligence/ai-history"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-protocols/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-protocols</loc>
     <lastmod>2026-02-22T18:26:19+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-protocols/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-protocols"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/context-engineering/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/context-engineering</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/context-engineering/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/context-engineering"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation</loc>
     <lastmod>2026-02-24T12:54:06+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/image-generation"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles</loc>
     <lastmod>2026-02-15T01:57:52+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/llm-principles"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/multimodal-models/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/multimodal-models</loc>
     <lastmod>2026-02-24T12:54:06+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/multimodal-models/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/multimodal-models"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/neural-networks/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/neural-networks</loc>
     <lastmod>2026-02-26T04:35:28+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/neural-networks/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/neural-networks"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering</loc>
     <lastmod>2026-02-15T02:08:12+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/prompt-engineering"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/rag"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition</loc>
     <lastmod>2026-02-24T12:54:06+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention</loc>
     <lastmod>2026-02-24T08:34:53+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/transformer-attention"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/design-patterns"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/open-source-collaboration"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/security-thinking"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technical-writing"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technology-selection/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technology-selection</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technology-selection/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/technology-selection"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies</loc>
     <lastmod>2026-02-24T18:22:58+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/9-engineering-excellence/testing-strategies"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/</loc>
@@ -764,173 +764,308 @@
     <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/appendix/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/guide/introduction/</loc>
-    <lastmod>2026-04-02T13:48:55+08:00</lastmod>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/guide/introduction</loc>
+    <lastmod>2026-05-19T11:50:24.943Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.6</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/guide/introduction/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/guide/introduction"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/guide/introduction"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/</loc>
-    <lastmod>2026-05-12T09:55:02+09:00</lastmod>
+    <lastmod>2026-05-20T02:22:58.885Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/ai-capabilities-through-games/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/ai-capabilities-through-games/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/ai-capabilities-through-games/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/ai-capabilities-through-games/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/ai-capabilities-through-games/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/ai-capabilities-through-games/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/ai-capabilities-through-games/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/ai-capabilities-through-games/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/</loc>
-    <lastmod>2026-05-12T09:55:02+09:00</lastmod>
+    <lastmod>2026-05-20T01:54:07.449Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-a-product-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-a-product-thinking/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-a-product-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-a-product-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-a-product-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-a-product-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-a-product-thinking/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-a-product-thinking/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/</loc>
-    <lastmod>2026-05-12T09:55:02+09:00</lastmod>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial</loc>
+    <lastmod>2026-05-20T02:23:05.351Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/"/>
-    <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/</loc>
-    <lastmod>2026-05-12T09:55:02+09:00</lastmod>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents</loc>
+    <lastmod>2026-05-20T02:23:12.657Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/"/>
-    <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T11:08:08.284Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-b-common-errors/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-b-common-errors/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-b-common-errors/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-b-common-errors/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-b-common-errors/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-b-common-errors/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-b-common-errors/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-b-common-errors/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T12:04:51.908Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-c-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-c-consumer-scenarios/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-c-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-c-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-c-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-c-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-c-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-c-consumer-scenarios/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-consumer-scenarios/</loc>
-    <lastmod>2026-05-11T15:22:02+09:00</lastmod>
+    <lastmod>2026-05-20T01:51:53.664Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-consumer-scenarios/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-consumer-scenarios/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-consumer-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-consumer-scenarios/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-double-diamond/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T11:50:25.019Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-double-diamond/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-double-diamond/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-double-diamond/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-double-diamond/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-double-diamond/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-double-diamond/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-double-diamond/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-double-diamond/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-double-diamond/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-idea-sources/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T11:50:24.166Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-idea-sources/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-idea-sources/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-idea-sources/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-idea-sources/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-idea-sources/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-idea-sources/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-idea-sources/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-idea-sources/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-idea-sources/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-20T01:15:09.635Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-industry-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-industry-scenarios/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-industry-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-industry-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-industry-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-industry-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-industry-scenarios/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-industry-scenarios/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-jobs-to-be-done/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T11:50:24.540Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-jobs-to-be-done/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-jobs-to-be-done/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-jobs-to-be-done/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-jobs-to-be-done/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-jobs-to-be-done/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-jobs-to-be-done/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-jobs-to-be-done/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-jobs-to-be-done/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-jobs-to-be-done/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-mom-test/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T11:50:24.873Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-mom-test/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/appendix-mom-test/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/appendix-mom-test/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-mom-test/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/appendix-mom-test/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/appendix-mom-test/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/appendix-mom-test/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/appendix-mom-test/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/appendix-mom-test/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/</loc>
-    <lastmod>2026-05-12T09:55:02+09:00</lastmod>
+    <lastmod>2026-05-20T01:24:55.832Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/building-prototype/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/building-prototype/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/building-prototype/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/building-prototype/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/building-prototype/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/building-prototype/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/building-prototype/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/building-prototype/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T11:50:24.714Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/complete-project-practice/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/complete-project-practice/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/complete-project-practice/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/complete-project-practice/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/complete-project-practice/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/complete-project-practice/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/complete-project-practice/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/complete-project-practice/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-20T01:47:45.851Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/finding-great-idea/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/finding-great-idea/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/finding-great-idea/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/finding-great-idea/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/finding-great-idea/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/finding-great-idea/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/finding-great-idea/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/finding-great-idea/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/</loc>
-    <lastmod>2026-05-12T09:55:02+09:00</lastmod>
+    <lastmod>2026-05-19T12:32:15.020Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/integrating-ai-capabilities/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/integrating-ai-capabilities/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/integrating-ai-capabilities/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/integrating-ai-capabilities/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/integrating-ai-capabilities/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/integrating-ai-capabilities/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/integrating-ai-capabilities/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/integrating-ai-capabilities/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/</loc>
-    <lastmod>2026-05-12T09:55:02+09:00</lastmod>
+    <lastmod>2026-05-20T02:23:34.565Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/introduction-to-ai-ide/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/introduction-to-ai-ide/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/introduction-to-ai-ide/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/introduction-to-ai-ide/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/introduction-to-ai-ide/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/introduction-to-ai-ide/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/introduction-to-ai-ide/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/introduction-to-ai-ide/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/</loc>
-    <lastmod>2026-05-11T17:11:47+09:00</lastmod>
+    <lastmod>2026-05-19T11:50:24.794Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/"/>
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/"/>
+    <xhtml:link rel="alternate" hreflang="zh-TW" href="https://datawhalechina.github.io/easy-vibe/zh-tw/stage-1/learning-map/"/>
+    <xhtml:link rel="alternate" hreflang="ja" href="https://datawhalechina.github.io/easy-vibe/ja-jp/stage-1/learning-map/"/>
     <xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/learning-map/"/>
+    <xhtml:link rel="alternate" hreflang="es" href="https://datawhalechina.github.io/easy-vibe/es-es/stage-1/learning-map/"/>
+    <xhtml:link rel="alternate" hreflang="fr" href="https://datawhalechina.github.io/easy-vibe/fr-fr/stage-1/learning-map/"/>
+    <xhtml:link rel="alternate" hreflang="de" href="https://datawhalechina.github.io/easy-vibe/de-de/stage-1/learning-map/"/>
+    <xhtml:link rel="alternate" hreflang="ar" href="https://datawhalechina.github.io/easy-vibe/ar-sa/stage-1/learning-map/"/>
+    <xhtml:link rel="alternate" hreflang="vi" href="https://datawhalechina.github.io/easy-vibe/vi-vn/stage-1/learning-map/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/</loc>
@@ -941,11 +1076,11 @@
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/dify-knowledge-base/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/</loc>
@@ -955,11 +1090,11 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/copywriting-platform-supabase/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/custom-dify-agent-platform/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/custom-dify-agent-platform/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/custom-dify-agent-platform/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/custom-dify-agent-platform/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/custom-dify-agent-platform/</loc>
@@ -969,11 +1104,11 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/custom-dify-agent-platform/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/exam-management-express/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/exam-management-express/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/exam-management-express/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/exam-management-express/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/exam-management-express/</loc>
@@ -983,11 +1118,11 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/exam-management-express/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/modern-landing-page/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/modern-landing-page/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/modern-landing-page/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/modern-landing-page/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/modern-landing-page/</loc>
@@ -997,11 +1132,11 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/modern-landing-page/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/movie-recommendation-springboot/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/movie-recommendation-springboot/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/movie-recommendation-springboot/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/movie-recommendation-springboot/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/movie-recommendation-springboot/</loc>
@@ -1011,11 +1146,11 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/movie-recommendation-springboot/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/simple-grocery-microservices/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/simple-grocery-microservices/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/simple-grocery-microservices/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/simple-grocery-microservices/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/simple-grocery-microservices/</loc>
@@ -1025,11 +1160,11 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/simple-grocery-microservices/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/traffic-data-visualization-go/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/traffic-data-visualization-go/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/traffic-data-visualization-go/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/traffic-data-visualization-go/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/traffic-data-visualization-go/</loc>
@@ -1039,11 +1174,11 @@
     <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/traffic-data-visualization-go/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/travel-planning-agent-platform/PRD/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/travel-planning-agent-platform/PRD</loc>
     <lastmod>2026-03-31T12:29:51+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/travel-planning-agent-platform/PRD/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/travel-planning-agent-platform/PRD"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/assignments/travel-planning-agent-platform/</loc>
@@ -1396,35 +1531,35 @@
     <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-3/personal-brand/personal-website-blog/"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1</loc>
     <lastmod>2026-03-29T15:16:07+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.6</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-1/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-1"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2</loc>
     <lastmod>2026-03-29T15:16:07+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.6</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-2/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-2"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3</loc>
     <lastmod>2026-03-29T15:16:07+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.6</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-3/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-3"/>
   </url>
   <url>
-    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4/</loc>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4</loc>
     <lastmod>2026-03-29T15:16:07+08:00</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.6</priority>
-    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-4/"/>
+    <xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-4"/>
   </url>
 </urlset>
diff --git a/docs/vi-vn/guide/introduction.md b/docs/vi-vn/guide/introduction.md
new file mode 100644
index 0000000..1e7ea16
--- /dev/null
+++ b/docs/vi-vn/guide/introduction.md
@@ -0,0 +1,82 @@
+# Giới thiệu dự án
+
+Năm 2025 được nhiều người coi là năm khởi đầu của lập trình AI. Ngày càng có nhiều người bắt đầu dùng AI để viết code, nhưng những gì tạo ra thường chỉ dừng lại ở mức đồ chơi -- không biết cách dùng Vibe Coding để tổ chức quy trình phát triển, không biết nên chọn công cụ nào, và càng không rõ từ nguyên mẫu đến khi đưa lên mạng còn thiếu những bước quan trọng nào.
+
+Chúng tôi áp dụng lộ trình thực chiến **ba giai đoạn tuần tự**: giai đoạn người mới bắt đầu làm quen với lập trình AI thông qua các trò chơi nhỏ, giai đoạn một làm chủ cách làm việc của Vibe Coding và hoàn thành nguyên mẫu ứng dụng Web, giai đoạn hai học phát triển full-stack và triển khai trực tuyến, giai đoạn ba xây dựng ứng dụng phức tạp đa nền tảng.
+
+Mỗi giai đoạn đều đi kèm với thực chiến dự án hoàn chỉnh, giúp bạn tiến từ đồ chơi đến sản phẩm thực tế trong những thử thách thật, cuối cùng có khả năng **biến bất kỳ ý tưởng nào thành ứng dụng sử dụng được**.
+
+Chúng tôi tin rằng, khi làm chủ Vibe Coding kết hợp với đào tạo hệ thống, bạn một mình có thể trở thành **nhà phát triển toàn năng kết hợp giữa phát triển front-end/back-end, tích hợp năng lực AI và thiết kế sản phẩm**.
+
+Dự án này chủ yếu hướng tới ba loại học viên:
+
+- **Người mới (người bình thường / phía sản phẩm và vận hành)**: Giúp những người không có nền tảng kỹ thuật và người mới học hiểu được các khái niệm quan trọng, hoàn thành công cụ AI nhỏ hoặc nguyên mẫu sản phẩm đầu tiên.
+- **Nhà phát triển trung cấp (sinh viên và nhà phát triển có nền tảng nhất định)**: Làm chủ hệ thống vibe coding và phát triển ứng dụng AI nguyên bản.
+- **Nhà phát triển cấp cao (công ty và startup, mã nguồn mở và nhà phát triển độc lập)**: Hỗ trợ đội ngũ và cá nhân nhanh chóng xây dựng, xác minh và lặp lại ứng dụng AI nguyên bản.
+
+## 📖 Điều hướng nội dung
+
+### Phụ lục tổng hợp
+
+[Từ điển năng lực AI: Các khái niệm và thuật ngữ cốt lõi AI phổ biến, giải thích theo kịch bản](/vi-vn/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### Số 0, Mầm non
+
+| Chương | Nội dung chính | Trạng thái |
+| :------------------------------------------------------------------------------------- | :------------------------------------------- | :--- |
+| [Người mới bắt đầu: Bản đồ học tập](/vi-vn/stage-1/learning-map/) | Tổng quan lộ trình học tập | ✅ |
+| [Người mới bắt đầu: Kỷ nguyên AI, biết nói là biết lập trình](/vi-vn/stage-1/ai-capabilities-through-games/) | Cảm nhận ban đầu về năng lực lập trình AI thông qua các ví dụ như rắn săn mồi | ✅ |
+
+### Số 1, Quản lý sản phẩm AI
+
+| Chương | Nội dung chính | Trạng thái |
+| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
+| [Sơ cấp 2: Làm quen với công cụ AI IDE](/vi-vn/stage-1/introduction-to-ai-ide/) | Học cách sử dụng IDE, làm chủ cấu trúc giao diện và cách gợi ý hiệu quả | ✅ |
+| [Sơ cấp 3: Tự tay tạo nguyên mẫu](/vi-vn/stage-1/building-prototype/) | Vòng lặp hoàn chỉnh từ phân tích sản phẩm, phân tách đến thực hiện nguyên mẫu sản phẩm đa trang | ✅ |
+| [Sơ cấp 4: Thêm năng lực AI cho nguyên mẫu](/vi-vn/stage-1/integrating-ai-capabilities/) | Hiểu và hoàn thành tích hợp API các năng lực AI phổ biến (văn bản, hình ảnh, video) | ✅ |
+| [Sơ cấp 5: Thực chiến dự án hoàn chỉnh](/vi-vn/stage-1/complete-project-practice/) | Mô phỏng kịch bản thực tế, nhận phản hồi người dùng để lặp lại và hoàn thành trình bày dự án (bao gồm bài tập lớn) | ✅ |
+
+#### Phụ lục
+
+| Chương | Nội dung chính | Trạng thái |
+| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
+| [Phụ lục A: Bổ sung tư duy sản phẩm](/vi-vn/stage-1/appendix-a-product-thinking/) | Khung tư duy sản phẩm từ đánh giá ý tưởng đến phân tách nhu cầu và MVP | ✅ |
+| [Phụ lục B: Lỗi phổ biến và giải pháp](/vi-vn/stage-1/appendix-b-common-errors/) | Các lỗi phổ biến trong vibe coding và phương pháp khắc phục | ✅ |
+| [Phụ lục: Tìm ý tưởng ở đâu](/vi-vn/stage-1/appendix-idea-sources/) | Rút ra hướng ngách từ ứng dụng tham khảo, xu hướng và danh sách VC | ✅ |
+| [Phụ lục: Mô hình Double Diamond](/vi-vn/stage-1/appendix-double-diamond/) | Hiểu nhịp độ hoàn chỉnh của việc xác định vấn đề trước rồi mới triển khai thiết kế giải pháp | ✅ |
+| [Phụ lục: Jobs to Be Done](/vi-vn/stage-1/appendix-jobs-to-be-done/) | Dùng phương pháp JTBD để thấy rõ điều người dùng thực sự muốn hoàn thành | ✅ |
+| [Phụ lục: Phương pháp phỏng vấn The Mom Test](/vi-vn/stage-1/appendix-mom-test/) | Phương pháp nghiên cứu xác minh nhu cầu thông qua phỏng vấn người dùng | ✅ |
+
+### Số 2, Kỹ sư phát triển trung cấp
+
+#### Phần front-end
+
+| Chương | Nội dung chính | Trạng thái |
+| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
+| Sử dụng lovart để sản xuất tài liệu | Học cách dùng lovart để tạo hàng loạt tài liệu hình ảnh nhân vật, bối cảnh, v.v., cung cấp nền tảng tài liệu cho thiết kế UI và phát triển front-end | 🚧 |
+| Figma và MasterGo nhập môn | Dùng công cụ thiết kế để sắp xếp kiến trúc thông tin và cấu trúc trang, tạo nền tảng cho thực hiện front-end | 🚧 |
+| Xây dựng ứng dụng hiện đại đầu tiên - Thiết kế UI | Dựa trên bản thiết kế hoàn thành giao diện component hóa, thực hiện chuỗi liên kết đầu tiên từ thiết kế đến code | 🚧 |
+| Tham khảo quy chuẩn thiết kế UI để thiết kế trang và nút | Học cách dùng quy chuẩn thiết kế phổ biến để tổ chức cấu trúc trang, phân cấp nút, và dùng AI để tạo phương án thiết kế | 🚧 |
+| [Cùng làm chân dung Hogwarts](/vi-vn/stage-2/frontend/hogwarts-portraits/) | Từ 0 đến 1 tạo ứng dụng front-end tích hợp năng lực AI, kết nối thiết kế và phát triển | 🚧 |
+
+#### Phần phát triển back-end
+
+| Chương | Nội dung chính | Trạng thái |
+| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
+| API là gì | Hiểu giao diện HTTP và mô hình yêu cầu-phản hồi, chuẩn bị cho tích hợp back-end và debug liên thông | 🚧 |
+| [Từ cơ sở dữ liệu đến Supabase](/vi-vn/stage-2/backend/database-supabase/) | Triển khai cơ sở dữ liệu và API trên Supabase, kết nối mô hình dữ liệu và trang front-end | 🚧 |
+| Mô hình lớn hỗ trợ viết code giao diện và tài liệu giao diện | Dùng mô hình lớn hỗ trợ tạo tài liệu giao diện và cơ sở dữ liệu, code, thực hiện back-end có thể đọc và kiểm tra | 🚧 |
+| Quy trình làm việc Git và triển khai Zeabur | Quản lý code trong quy trình Git và triển khai ứng dụng lên Zeabur trực tuyến | 🚧 |
+| Công cụ phát triển CLI hiện đại | Sử dụng công cụ lập trình AI loại CLI để tăng tốc phát triển và gỡ lỗi, hình thành quy trình làm việc kỹ thuật cá nhân | 🚧 |
+| Cách tích hợp hệ thống thanh toán như stripe | Tích hợp hệ thống thanh toán, hoàn thành chuỗi thanh toán và quy trình thanh toán cơ bản | 🚧 |
+| Xây dựng ứng dụng hiện đại đầu tiên - Ứng dụng full-stack | Tổng hợp front-end, back-end và module thanh toán, hoàn thành ứng dụng Web full-stack có thể trực tuyến | 🚧 |
+| Thư viện component front-end hiện đại + Thực chiến Trae | Sử dụng thư viện component front-end hiện đại và Trae, độc lập hoàn thành sản phẩm hỗ trợ đăng ký và thanh toán | 🚧 |
+
+#### Phụ lục năng lực AI
+
+| Chương | Nội dung chính | Trạng thái |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
+| [Nhập môn Dify và tích hợp kiến thức](/vi-vn/stage-2/ai-capabilities/dify-knowledge-base/) | Dùng Dify Workflow và RAG cơ bản để xây dựng sản phẩm loại công cụ, tạo mẫu cho việc nâng cấp ứng dụng sau này | 🚧 |
+| Học cách tra cứu từ điển AI và tích hợp API đa phương thức | Học cách tìm mô hình và API phù hợp, và tích hợp năng lực đa phương thức như văn bản, hình ảnh vào sản phẩm | 🚧 |
+
+### Số 3, Kỹ sư phát triển cấp cao
diff --git a/docs/vi-vn/stage-1/ai-capabilities-through-games/index.md b/docs/vi-vn/stage-1/ai-capabilities-through-games/index.md
new file mode 100644
index 0000000..5f90729
--- /dev/null
+++ b/docs/vi-vn/stage-1/ai-capabilities-through-games/index.md
@@ -0,0 +1,225 @@
+# So cap 1: Thoi dai AI, biet noi la biet lap trinh
+
+Day la mot bai hoc **hoc theo du an**. Ban hay lam theo tung buoc va co gang tai hien ket qua.
+Dung lo sai hay sua. Hay nho:
+
+<div style="text-align: center;">
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">Hoan thanh quan trong hon hoan hao</span>
+</div>
+</div>
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'khoang <strong>4 gio</strong> (co the chia nhieu lan)'
+const relatedArticles =
+  relatedArticlesMap['vi-vn/stage-1/ai-capabilities-through-games'] ?? []
+</script>
+
+## Dan nhap chuong
+
+<ChapterIntroduction :duration="duration" :tags="['Lap trinh doi thoai', 'Mini game AI-native', 'Thuc hanh Snake']" coreOutput="Snake AI-native + mini game tu tao" expectedOutput="1 Snake AI-native chay duoc + (tuy chon) 1 mini game/demo tu tao">
+
+Neu ban <strong>hoan toan khong biet lap trinh</strong> hoac chi biet mot chut, chuong nay danh cho ban. Ta se bat dau tu co ban: dung <strong>doi thoai</strong> de AI giup ban viet code. Khong can nho cu phap, khong can cau hinh phuc tap, nhieu truong hop co the chay ngay tren web.
+
+Ban se tu tay lam ra <strong>chuong trinh dau tien chay duoc</strong>: mot phien ban Snake co the "an tu", "viet tho", "ve ve". Ban se cam nhan lap trinh voi AI la gi: khong phai AI nghi thay ban, ma ban noi ro y muon, AI giup ban hien thuc.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Khoi dong', description: 'Thoi dai AI: biet noi la biet lap trinh' },
+      { title: 'Kham pha nhanh', description: 'Trai nghiem 60 giay' },
+      { title: 'Thuc hanh AI-native', description: 'Xay Snake AI-native' },
+      { title: 'Mo rong sang tao', description: 'Tu lam mot game khac' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Kho khan cua nguoi binh thuong va co hoi moi
+
+Rat nhieu nguoi co y tuong san pham: cong cu ghi chep chi tieu, mot trang web ghi lai qua trinh lon len cua con, hoac mot mini game. Nhung chi can nghi toi "viet code" va "tim lap trinh vien" la thay met.
+
+AI tao ra mot kha nang moi: ban khong nhat thiet phai biet code ngay lap tuc; ban can hoc cach noi ro rang voi AI ve dieu ban muon. Ke ca voi lap trinh vien chuyen nghiep, AI dang dan tro thanh mot phan cua quy trinh lam viec. Voi nguoi moi, kha nang "giao tiep dung voi agent" la cuc ky co gia tri.
+
+Muc tieu cua bai hoc la giup ban hinh thanh ky nang moi: <strong>dung ngon ngu tu nhien de lam ung dung</strong>. Ban se hoc cach mo ta muc tieu, chia buoc, xac dinh dau vao/dau ra, va sua loi khi ket qua chua dung y.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Kho khan va co hoi', description: 'Mot cach moi de tao san pham' },
+      { title: 'Kham pha nhanh', description: 'Trai nghiem 60 giay' },
+      { title: 'Thuc hanh AI-native', description: 'Xay Snake AI-native' },
+      { title: 'Mo rong sang tao', description: 'Tu lam mot game khac' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. AI co the lam duoc toi muc nao hien nay
+
+Cau hoi cu the: neu ban khong biet viet code, ban co the lam duoc toi muc nao voi AI doi thoai?
+
+Thuc te, hien nay AI rat hop de:
+
+- cong cu noi bo nho,
+- bang dieu khien/truc quan du lieu,
+- mini game nhe,
+- prototype de kiem chung y tuong tu goc nhin san pham.
+
+Voi san pham lon va dua vao san xuat, van can con nguoi dau tu vao thiet ke luong, chi tiet, bao mat, hieu nang va kha nang bao tri. Nhưng doi voi prototype va cong cu tu dung, chat luong da rat thuc dung.
+
+### 2.1 Lam Snake trong 60 giay (voi z.ai)
+
+Mo trang web thuc hanh cua khoa hoc: [z.ai](https://chat.z.ai/). Trong bai nay, ta dung che do "phat trien full-stack" de xem AI tao du an va xem truoc ket qua.
+
+::: details Lap trinh ngay tren web la gi?
+
+Truoc day, lam mot app web thuong can:
+
+- cai moi truong (Node.js, Python),
+- cau hinh editor,
+- hoc HTML/CSS/JavaScript,
+- xu ly dependency va loi.
+
+Gio day, voi nen tang lap trinh AI:
+
+- mo trinh duyet,
+- mo ta tinh nang bang ngon ngu tu nhien,
+- AI tu dong sinh code va xem truoc.
+
+No chuyen trong tam tu "viet cu phap" sang "mo ta yeu cau".
+
+:::
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
+
+Dan yeu cau don gian nhu sau va chay:
+
+```txt
+Lam giup toi game Snake:
+1. Dieu khien bang phim mui ten
+2. An thuc an thi dai ra va tang diem
+3. Cham tuong hoac cham than thi Game Over
+4. Co nut bat dau va choi lai
+5. Giao dien gon va dep
+```
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
+
+Khi xong, ban se thay trang web o ben phai. Thuong ban co the:
+
+- cuon de xem,
+- vao full-screen,
+- tai du an,
+- xem code.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
+
+De xem ma nguon, bam vao bieu tuong code o goc tren ben phai.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png)
+
+::: tip Thu them cong cu khac
+
+Ngoai z.ai, ban co the thu nhieu cong cu khac. Dieu quan trong khong phai ten cong cu, ma la vong lap:
+
+1. mo ta yeu cau,
+2. thu chay,
+3. chi ro hien tuong sai,
+4. yeu cau sua cu the,
+5. lap lai.
+
+:::
+
+### 2.2 Lap trinh doi thoai lam duoc gi va khong lam duoc gi
+
+Tom tat thuc dung:
+
+- AI rat gioi voi bai toan "nho va ro rang" neu ban mo ta UI va tuong tac cu the.
+- Voi du an lon, ban can goc nhin theo quy trinh: chia thanh buoc, dinh nghia input/output va giao cho AI lam tung phan.
+- "Viet duoc" khong dong nghia "dung duoc cho nguoi that". San xuat can test, bao mat va review.
+
+::: warning Huong dan theo tinh huong
+
+- **Prototype / demo / cong cu noi bo**: rat hop de AI lam ban dau, ban iter tiep.
+- **San pham lon cho nguoi dung that**: can dau tu dai han ve ky thuat.
+- **He thong yeu cau bao mat/tuân thu cao (thanh toan, y te, rui ro)**: khong nen "sinh xong la deploy", phai co quy trinh kiem tra nghiem ngat.
+
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Kho khan va co hoi', description: 'Mot cach moi de tao san pham' },
+      { title: 'Kham pha nhanh', description: 'Trai nghiem 60 giay' },
+      { title: 'Thuc hanh AI-native', description: 'Xay Snake AI-native' },
+      { title: 'Mo rong sang tao', description: 'Tu lam mot game khac' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Thuc hanh: lam mot Snake "AI-native"
+
+"AI-native" o day nghia la: game khong chi la Snake co ban, ma co them mot kha nang AI gan vao gameplay. Vi du:
+
+- an mot tu thi dich va tao vi du cau,
+- an mot chu de thi sinh ra mot cau/noi dung ngan,
+- an mot prompt thi sinh ra mot hinh.
+
+Quan trong nhat la tap quy trinh: mo ta ro -> de AI lam -> thu chay -> sua theo ket qua.
+
+> Meo khi yeu cau sua:
+>
+> 1. mo ta hien tuong quan sat duoc,
+> 2. noi ro hanh vi ky vong,
+> 3. neu co loi, copy day du log/stack,
+> 4. yeu cau sua toi thieu can thiet.
+
+De theo doi trinh tu thuc hanh, ban se thay cac anh minh hoa:
+
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png)
+>
+>    ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png)
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png)
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png)
+
+Khi gap loi, dung doan. Hay copy loi va yeu cau AI giai thich bang ngon ngu don gian, sau do dua ra sua doi cu the.
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png)
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png)
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
+
+## 4. Mo rong: tu lam mot mini game cua rieng ban
+
+Khi Snake da chay, muc tieu khong phai nho het code, ma la tao bien the.
+
+Goi y:
+
+- game phan xa (bam dung thoi diem),
+- quiz tu vung,
+- dong ho dem nguoc voi phan thuong,
+- tao the (card) voi diem so.
+
+Buoc quan trong: dinh nghia vong lap cua game (input -> state -> output) roi moi nho AI implement.
+
+![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png)
+
+## Bai tap
+
+1. Lam lai Snake co ban voi mau sac va UI cua ban.
+2. Them it nhat 1 kha nang AI (dich, tom tat, sinh text...).
+3. Tu tao mot mini game/dem o don gian nhung choi duoc.
+
+## Buoc tiep theo
+
+O cac chuong tiep theo, ta se ket noi cac nang luc AI cu the hon (text-to-text, image-to-text, text-to-image) va tien toi cac du an day du hon.
+
+<RelatedArticles :articles="relatedArticles" />
+---
+title: 'So cap 1: Thoi dai AI, noi la lap trinh'
+description: 'Lam game ran AI-native bang doi thoai, sau do ap dung workflow de tao mini game hoac demo cua rieng ban.'
+---
diff --git a/docs/vi-vn/stage-1/appendix-a-product-thinking/index.md b/docs/vi-vn/stage-1/appendix-a-product-thinking/index.md
new file mode 100644
index 0000000..a82c151
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-a-product-thinking/index.md
@@ -0,0 +1,152 @@
+---
+title: 'Tu duy san pham va thiet ke giai phap'
+description: 'Chuyen tu "lam tool" sang "lam san pham": nguon y tuong, cach tach nho thanh MVP, cai thien trai nghiem va dung AI de tang gia tri.'
+---
+
+<script setup>
+const duration = 'Khoang <strong>6 gio</strong>'
+</script>
+
+# Tu duy san pham va thiet ke giai phap
+
+## Gioi thieu chuong
+
+<ChapterIntroduction :duration="duration" :tags="['Tu duy san pham', 'Phan tich nhu cau', 'Thiet ke giai phap', 'Hieu nguoi dung']" coreOutput="1 ban phac thao san pham hoan chinh" expectedOutput="Huong san pham co the trien khai">
+
+O cac chuong truoc, ban da quen voi viec dung AI IDE de lam prototype va cac tool nho. Phan nay tap trung vao cau hoi lon hon: <strong>"Lam gi thi dang?"</strong>
+
+Muc tieu:
+
+1. Tim y tuong dang tin hon (khong chi la cam hung).
+2. Bien y tuong thanh mot flow co the build.
+3. Di tu "chay duoc" sang "nguoi ta thich dung".
+4. Dung AI o dung cho, de tang gia tri that.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Nguon y tuong', description: 'Tim y tuong dang tin' },
+      { title: 'Tach nho giai phap', description: 'Bien y tuong thanh app co the lam' },
+      { title: 'Danh gia va cai thien', description: 'Tu dung duoc den dung suong' },
+      { title: 'AI phong dai gia tri', description: 'Dung AI hop ly' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Ban se hoc duoc gi
+
+Sau phan nay, ban co the tra loi:
+
+1. Y tuong den tu dau thi on?
+2. Tach y tuong ra sao de lam MVP?
+3. Lam sao de biet app co tot khong va cach nang cap?
+4. Dung AI o buoc nao de tang gia tri?
+5. Tim nguoi dung dau tien nhu the nao?
+
+---
+
+# 1. Nguon y tuong dang tin
+
+Ban khong can "y tuong sieu doc". Ban can van de that, lap lai, trong boi canh ro rang.
+
+## 1.1 The nao la mot y tuong (theo goc san pham)?
+
+Mot y tuong co the build can:
+
+1. Nguoi dung muc tieu ro rang (ai?).
+2. Tinh huong cu the (khi nao/o dau?).
+3. Nhiem vu cu the (muon dat ket qua gi?).
+4. Cai tien hop ly so voi cach lam hien tai.
+
+## 1.2 Y tuong vs nhu cau that
+
+Y tuong la gia thuyet. Nhu cau that la thu nguoi dung dang tu tim cach giai (du la workaround).
+
+Quy tac nhanh:
+
+- Nhu cau that: nguoi dung dang tra gia bang thoi gian/tien/cong suc.
+- Nhu cau gia: nghe hay nhung khong doi hanh vi, khong tra tien.
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png)
+
+## 1.3 Vi sao co y tuong tu nhien tang truong
+
+Neu gia tri den nhanh va flow ngan, nguoi dung se tu gioi thieu:
+
+Van de -> gia tri nho ngay lap tuc -> lap lai -> gioi thieu.
+
+Neu can "keo" lien tuc bang quang cao va giai thich, thuong la dau hieu pain chua du manh.
+
+## 1.4 4 nguon y tuong on dinh
+
+1. Cong viec hang ngay: quy trinh lap, bao cao, phoi hop, QA.
+2. Cong dong: cau hoi lap lai, van de nhieu nguoi gap.
+3. Review/binh luan: ma sat, buc xuc "sao kho vay?".
+4. San pham co san: tim lo hong (qua dat, qua phuc tap, thieu chuyen sau).
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png)
+
+---
+
+# 2. Tach nho: tu y tuong thanh app
+
+Y tuong chi build duoc khi chuyen thanh quyet dinh.
+
+## 2.1 Toi thieu: nguoi dung, tinh huong, flow
+
+Xac dinh:
+
+1. Nguoi dung: vai tro, muc tieu, rang buoc, kha nang chi tra.
+2. Tinh huong: trigger -> cac buoc -> ket qua.
+3. Flow chinh: 3-7 buoc de tao gia tri.
+
+## 2.2 Cat scope (MVP)
+
+MVP khong phai "it feature", ma la "loi hua ro rang va lam duoc".
+
+Cau hoi:
+
+- Phut dau tien nao nguoi dung thay "co loi"?
+- Cat gi ma khong lam mat gia tri cot loi?
+- Gia thuyet rui ro nhat la gi? (can validate som)
+
+---
+
+# 3. Cai thien: tu dung duoc den dung suong
+
+Sau khi co ban dau, tap trung vao:
+
+1. Ro rang: nguoi moi biet lam gi tiep theo.
+2. It ma sat: it click, it form, it doi.
+3. Tao tin tuong: ket qua giai thich duoc, default an toan.
+
+Test nhanh: nguoi moi co the nhan gia tri trong 60 giay khong?
+
+---
+
+# 4. Dung AI de phong dai gia tri
+
+AI manh nhat khi:
+
+1. Bien ngon ngu thanh cau truc (text -> task, note -> plan).
+2. Tom tat va uu tien (nhieu thong tin -> hanh dong).
+3. Ca nhan hoa (goi y theo boi canh).
+
+AI yeu khi chi "dan chat" ma khong cai thien flow cot loi.
+
+---
+
+## Output mong doi
+
+Mot ban phac thao san pham gom:
+
+1. Nguoi dung va use-case
+2. Van de cot loi va chi phi hien tai
+3. Flow chinh (3-7 buoc)
+4. Scope MVP
+5. Ke hoach validate (7 ngay) va metric
+
+<RelatedArticlesSection />
+
diff --git a/docs/vi-vn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/vi-vn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..0e2ace2
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,359 @@
+# So sánh 7 công cụ lập trình AI
+
+## Hướng dẫn chương này
+
+Đối mặt với vô số công cụ lập trình AI, công cụ nào mới phù hợp với bạn nhất? Chương này thông qua một nhiệm vụ thực chiến thống nhất -- phát triển trò chơi "Rắn ăn mồi + AI làm thơ", đánh giá chéo 7 nền tảng Web Vibe Coding phổ biến như Lovable, Replit, Z.ai. Chúng ta sẽ so sánh đa chiều từ mức độ thân thiện với người mới, khả năng kiểm soát code, tính tiện lợi triển khai, giúp bạn nhanh chóng chọn ra công cụ hỗ trợ phát triển mạnh nhất.
+
+---
+
+# 1. Dùng Vibe Coding xây trò Snake: Hướng dẫn thực chiến hoàn chỉnh
+
+Bài viết giới thiệu một phương pháp phát triển phần mềm mới nổi -- "Vibe Coding", sử dụng trí tuệ nhân tạo để tăng tốc quá trình xây dựng ứng dụng.
+
+Tiếp theo chúng ta sẽ lần lượt giới thiệu khái niệm cốt lõi của Vibe Coding, giải thích AI Agent là gì, và cung cấp phương pháp viết prompt thực dụng. Cuối cùng, thông qua thực chiến hoàn chỉnh xây dựng trò "Snake (Rắn săn mồi)" từ đầu, và đánh giá so sánh chi tiết nhiều nền tảng Vibe Coding phổ biến, giúp bạn chọn bộ công cụ phù hợp nhất với mình.
+
+## Bạn sẽ học được:
+
+- **Vibe Coding là gì:** Hiểu định nghĩa, workflow và lợi thế chính của nó.
+- **Vai trò của AI Agent:** Hiểu cách làm việc của AI Agent, và sự khác biệt với chương trình truyền thống.
+- **Cách viết prompt tốt:** Nắm vững cách viết prompt rõ ràng, cụ thể, để nhận kết quả tốt hơn.
+- **Công cụ Vibe Coding:** Làm quen với một loạt nền tảng lập trình và thiết kế AI phổ biến.
+- **So sánh nền tảng:** Đánh giá và so sánh ưu nhược điểm của 7 nền tảng AI Agent khác nhau từ góc nhìn người mới bắt đầu.
+- **Công cụ UI / UX:** Học cách tích hợp các công cụ UI/UX như Figma, Mastergo vào workflow tổng thể.
+
+## 1. Giới thiệu
+
+Trong các bài học trước, chúng ta luôn sử dụng mô hình phát triển fullstack của z.ai để hoàn thành nhiệm vụ lập trình.
+
+Tuy nhiên, chúng ta có bao giờ nghĩ: cốt lõi của nó thực ra là "AI Agent" (khác với AI chat thông thường, và thông minh hơn nhiều)? Vì nó không chỉ trò chuyện với bạn, mà còn có thể suy nghĩ (khi bạn giao nhiệm vụ, nó sẽ trước lập kế hoạch), còn có thể chủ động hành động (ví dụ gọi tìm kiếm web, thực thi lệnh máy tính, mở trang web, v.v.). Chúng ta sẽ giới thiệu chi tiết hơn ở phần sau.
+
+## 1. Vibe Coding là gì?
+
+Vibe Coding là một phương pháp phát triển phần mềm kiểu mới sử dụng AI để tăng tốc quá trình phát triển ứng dụng. Nó không phải sản phẩm thay thế lập trình truyền thống, mà là một chế độ lập trình "hội thoại" hơn. Khái niệm này được nhà nghiên cứu AI Andrej Karpathy đề xuất: trong workflow này, nhà phát triển không còn tự viết code từng dòng, mà chủ yếu thông qua hướng dẫn AI Agent để tạo, tối ưu và debug ứng dụng.
+
+Tư tưởng cốt lõi của Vibe Coding, là chuyển từ **"lấy code làm trung tâm (code-first)"** sang **"lấy ý định làm trung tâm (intent-first)"**. Bạn không cần suy nghĩ từ dòng code đầu tiên, mà dùng ngôn ngữ tự nhiên mô tả kết quả bạn muốn.
+
+Workflow điển hình của Vibe Coding là một vòng lặp liên tục:
+
+- **Mô tả mục tiêu:** Trước dùng một câu hoặc một đoạn mô tả chức năng bạn muốn triển khai, ví dụ: "Làm một trò Snake đơn giản có backend Python, có thể sinh thơ."
+- **AI tạo code:** AI Agent phân tích nhu cầu của bạn, tạo code phiên bản đầu, bao gồm cấu trúc cơ bản, trang frontend và logic backend.
+- **Chạy và quan sát:** Chạy code đã tạo, kiểm tra có hoạt động đúng như mong đợi không, đồng thời phát hiện bug hoặc điểm chưa tốt.
+- **Phản hồi và lặp lại:** Nếu có lỗi hoặc hiệu quả không lý tưởng, tiếp tục ra lệnh trong hội thoại, ví dụ: "Rắn di chuyển quá chậm, tăng tốc độ lên", hoặc "Hiện file `.env` không đọc đúng API Key, xin sửa code backend."
+- **Lặp lại các bước trên:** Liên tục lặp trong vòng "mô tả → tạo → chạy → phản hồi" cho đến khi ứng dụng đạt trạng thái hài lòng.
+
+### Lợi thế chính của Vibe Coding:
+
+- **Giảm rào cản:** Để nhà thiết kế, doanh nhân, sinh viên thiếu kinh nghiệm lập trình cũng có thể tham gia phát triển ứng dụng thông qua ngôn ngữ tự nhiên.
+- **Prototype nhanh chóng:** Thời gian từ ý tưởng đến sản phẩm khả thi tối thiểu (MVP) giảm đáng kể.
+- **Nâng cao hiệu quả:** Tự động xử lý lượng lớn công việc lập trình lặp đi lặp lại, cơ học (như code template), để nhà phát triển tập trung sức vào thiết kế kiến trúc và trừu tượng hóa vấn đề.
+- **Thuận lợi thử nghiệm:** Khuyến khích cách sản xuất nhanh rồi hoàn thiện dần, tiện thử ý tưởng và chức năng mới hơn.
+
+## 2. Nền tảng Vibe Coding trực tuyến (Web-based) là gì?
+
+Trong lần thử nghiệm thực tế này, bạn sẽ phát hiện công cụ chúng ta đánh giá được chia thành hai loại: **Web-based (nền tảng trực tuyến)** và **IDE (môi trường phát triển cục bộ)**.
+
+Dù cốt lõi đều là dùng AI giúp bạn viết code, nhưng trải nghiệm sử dụng và kịch bản áp dụng có sự khác biệt rất lớn:
+
+### Nền tảng Vibe Coding trực tuyến (Web-based)
+
+**Công cụ đại diện:** Lovable, Replit, Z.ai, v0
+
+Giống như căn hộ dịch vụ "xách vali vào ở".
+
+- **Không cần cấu hình môi trường:** Bạn không cần quan tâm Python là gì, phiên bản Node.js ra sao, cũng không cần lo cài đặt dependency. Mở trình duyệt, nhập URL, có thể bắt đầu viết code ngay.
+- **Xem trước và triển khai một lần:** Sau khi code được tạo, nền tảng thường tự động hiển thị kết quả chạy ở cửa sổ bên phải. Làm xong, click một nút đã có thể tạo link chia sẻ cho bạn bè.
+- **Kịch bản phù hợp:**
+  - **Xác minh ý tưởng nhanh chóng (MVP):** Trong đầu có ý tưởng, muốn mất nửa tiếng xem có thể làm ra hay không.
+  - **Người mới bắt đầu:** Hoàn toàn không muốn bị lỗi môi trường phức tạp làm nản, chỉ muốn trải nghiệm niềm vui lập trình AI.
+  - **Ứng dụng nhẹ:** Làm một trang công cụ đơn giản, game nhỏ hoặc trang cá nhân.
+
+### AI IDE (Môi trường phát triển cục bộ)
+
+**Công cụ đại diện:** Cursor, Trae, VS Code + AI plugin
+
+Giống như nhà ở "trang trí đầy đủ" tự sở hữu.
+
+- **Khả năng cục bộ mạnh mẽ:** Nó chạy trên máy của bạn, có thể trực tiếp truy cập tất cả file cục bộ, tận dụng sức mạnh tính toán máy của bạn.
+- **Kết nối liền mạch workflow chuyên nghiệp:** Phù hợp dự án lớn, có thể tự do cài đặt plugin, kết nối database cục bộ, debug phức tạp.
+- **Kịch bản phù hợp:**
+  - **Phát triển dự án chuyên nghiệp:** Cần bảo trì dài hạn, dự án thương mại có cấu trúc phức tạp.
+  - **Tùy chỉnh sâu:** Cần kiểm soát chi tiết code đến mức cực đoan, hoặc cần kết hợp sâu với workflow cục bộ hiện có (như Git, Docker).
+  - **Quyền riêng tư dữ liệu:** Code hoàn toàn ở cục bộ, phù hợp hơn với quy định an toàn của một số doanh nghiệp.
+
+**Tóm lại:** Nếu bạn mới tiếp xúc lập trình AI, hoặc chỉ muốn nhanh làm một thứ nhỏ để vui, **nền tảng trực tuyến** là điểm khởi đầu tuyệt vời. Nếu bạn là nhà phát triển chuyên nghiệp, hoặc dự án ngày càng phức tạp, **IDE cục bộ** sẽ cung cấp giới hạn trên cao hơn.
+
+---
+
+## 3. AI Agent là gì?
+
+### AI Agent là gì?
+
+AI Agent là một hệ thống phần mềm, có khả năng nhận thức môi trường, ra quyết định, và tự chủ hành động để đạt mục tiêu cụ thể. So với phần mềm truyền thống tuân theo chỉ thị cố định, quy trình đơn lẻ, AI Agent linh hoạt và tự thích nghi hơn.
+
+Dưới đây là một số đặc điểm chính phân biệt AI Agent với chương trình truyền thống:
+
+- **Tự chủ (Autonomy):** AI Agent có tính độc lập cao. Chương trình truyền thống thường cần người kích hoạt từng bước, còn Agent có thể tự quyết định bước tiếp theo làm gì dựa trên mục tiêu.
+- **Nhận thức và trí nhớ (Perception & Memory):** Agent thu thập dữ liệu từ môi trường (ví dụ phản hồi API, dữ liệu cảm biến, đầu vào người dùng, v.v.), và giữ lại ngữ cảnh thông qua "trí nhớ", từ đó tái sử dụng kinh nghiệm và cải thiện hiệu quả liên tục trong hành động sau.
+- **Lý tính và hướng mục tiêu (Rationality & Goal-Orientation):** Agent sẽ phân tích và lập kế hoạch xoay quanh mục tiêu đã cho, chọn chuỗi hành động phù hợp nhất để theo đuổi "chỉ số hiệu suất" cao hơn.
+- **Sử dụng công cụ (Tool Use):** Đặc điểm lớn của AI Agent hiện đại là có thể gọi công cụ bên ngoài, không còn giới hạn ở "tạo văn bản". Ví dụ, nó có thể duyệt web, chạy code, truy vấn database, gửi email, là một bộ não "điều độ công cụ".
+
+Có thể hiểu theo phép loại suy:
+
+- Một **chương trình truyền thống** giống như máy tính. Bạn cho nó nhập số và toán tử, nó chỉ thực hiện tính toán khi bạn bấm nút.
+- Một **trợ lý AI** giống như trợ lý con người. Bạn bảo "giúp tôi tìm nhà hàng gần đây", nó sẽ cho bạn kết quả tìm kiếm và liệt kê lựa chọn, nhưng cuối cùng vẫn là bạn ra quyết định.
+- Một **AI Agent** giống hơn như một đội nghiên cứu tự động. Bạn chỉ cần đưa ra mục tiêu cấp cao (ví dụ "giúp tôi lên kế hoạch một chuyến đi Nhật"), nó sẽ phân tách nhiệm vụ, tra cứu mạng, đặt vé máy bay khách sạn (qua API), sắp xếp lịch trình, cuối cùng giao kết quả cho bạn, gần như không cần bạn can thiệp chi tiết.
+
+---
+
+# 2. Về viết prompt
+
+## 1. Prompt viết xong ngay tốt, hay chia thành nhiều bước tốt hơn?
+
+Rất nhiều người sẽ không nhịn được muốn trực tiếp trong một prompt, nói rõ "làm một ứng dụng fullstack hoàn chỉnh" cùng lúc. Thực tế, công cụ hiện tại đã đủ mạnh, xác thực có cơ hội cho kết quả trông khá ổn ngay lần đầu. Nhưng xét về trải nghiệm tổng thể và tỷ lệ thành công, chia công việc thành các bước nhỏ, lặp theo giai đoạn, kết quả thường tốt hơn, cũng ít dễ rơi vào ngõ cụt "sửa không được" hơn.
+
+> **Mẹo nhỏ:** Thay vì kỳ vọng "làm đúng ngay một lần", tốt hơn chia mục tiêu lớn thành các todo nhỏ có thể thực hiện.  
+> Ví dụ, đừng trực tiếp nói "build me a Snake game", mà chia thành:  
+> "1. Trước làm frontend của trò Snake",  
+> "2. Rồi triển khai một backend ghi điểm",  
+> "3. Cuối cùng nối frontend và backend lại".  
+> Như vậy có thể khiến AI hiểu chính xác nhu cầu của bạn hơn và cho output đáng tin cậy hơn.
+
+## 2. Càng rõ ràng, càng tốt
+
+- Trong Vibe Coding, prompt bạn viết quan trọng không kém code bạn viết. Prompt càng rõ ràng, càng cụ thể, kết quả càng gần với ý bạn nghĩ.
+- Nói rõ mục tiêu và ràng buộc ngay từ đầu, có thể giảm số lần sửa đổi sau, không chỉ tiết kiệm thời gian, cũng tiết kiệm quota sử dụng và chi phí.
+
+---
+
+# 3. Tổng quan công cụ (Vibe Coding / UIUX)
+
+## 1. Nền tảng AI Agent
+
+| **Name**                                   | **Platform** |
+| ------------------------------------------ | ------------ |
+| **[Lovable](https://lovable.dev/)**        | Web-based    |
+| **[Cursor](https://cursor.com/cn/agents)** | PC           |
+| **[Z.ai](https://chat.z.ai/)**             | Web-based    |
+| **[Replit](https://replit.com/~)**         | Web-based    |
+| **[Minimax](https://agent.minimaxi.com/)** | Web-based    |
+| **[Trae](https://www.trae.ai/)**           | PC           |
+| **[V0](https://v0.app/)**                  | Web-based    |
+
+## 2. Nền tảng AI UIUX
+
+| **Name**                              | **Platform**         |
+| ------------------------------------- | -------------------- |
+| **[Mastergo](https://mastergo.com/)** | Web-based            |
+| **[FIgma](https://www.figma.com/)**   | Web-based, PC Plugin |
+
+---
+
+# 4. Hướng dẫn thực chiến (Vibe Coding + UI kết hợp)
+
+1. Trong cửa sổ chat của nền tảng Vibe Coding bạn chuẩn bị sử dụng, nhập mô tả chương trình bạn muốn.
+   Ví dụ:
+
+   > Xin xây dựng một ứng dụng web Snake đơn giản với frontend và backend.
+   >
+   > 1. Frontend
+   >
+   > - Trang 1: Trang game
+   >   - Dùng phím điều khiển di chuyển của rắn.
+   >   - Rắn ăn không phải thức ăn, mà là từ tiếng Anh.
+   >   - Thanh bên trang hiển thị từ đã thu thập và số lượng.
+   >   - Sau khi game over, từ đã thu thập vẫn được giữ lại, tiếp tục trong ván mới.
+   > - Trang 2: Trang làm thơ (Make Poem)
+   >   - Hiển thị cùng danh sách từ như trang game (dữ liệu đồng nhất).
+   >   - Cung cấp nút, gửi từ hiện thu thập cho backend để tạo một bài thơ.
+   >   - Sau khi sinh thơ, từ đã sử dụng bị xóa khỏi danh sách hoặc giảm số đếm.
+   >
+   > * Thêm điều hướng đơn giản, chuyển đổi giữa hai trang Game và Make Poem.
+   > * Đảm bảo từ thu thập được nhìn thấy ở cả hai trang.
+   >
+   > 2. Backend
+   >
+   > - Cung cấp một API backend, nhận từ đã thu thập và trả về một bài thơ.
+   > - Dùng DeepSeek API để tạo thơ.
+   > - Lưu API Key trong file `.env`, và ignore file này trong `.gitignore`.
+
+2. Nhập DeepSeek API Key của bạn. (Có thể lấy tại [https://platform.deepseek.com/](https://platform.deepseek.com/))
+   1. API Key của LLM dùng để gọi mô hình lớn trong dự án của bạn. Vì đây là thông tin nhạy cảm, không thể công khai, nên cần viết riêng trong file cấu hình.
+      **Tại sao phải dùng file `.env`, và không upload nó lên GitHub?**
+   - File `.env` chuyên dùng để lưu **khóa hoặc mật khẩu** (ví dụ DeepSeek API Key).
+   - Nếu file này bị upload lên GitHub, tất cả mọi người trên thế giới đều thấy được khóa của bạn và sử dụng trái phép.
+   - Vì lý do an toàn, chúng ta cần khai báo ignore `.env` trong file `.gitignore`, để Git không theo dõi nó.
+   - Như vậy, dự án của bạn vẫn có thể sử dụng các khóa này bình thường trên máy cục bộ, mà sẽ không bị rò rỉ trong repository.
+
+3. Sau khi xem kết quả tạo, nếu phát hiện lỗi hoặc cần sửa, có thể trực tiếp nhập yêu cầu sửa trong cửa sổ chat.
+4. Nếu bạn không hài lòng với thiết kế trang, cũng có thể chọn thiết kế lại giao diện trong Figma hoặc Mastergo, rồi phản hồi ý thiết kế cho Agent.
+
+- **Ví dụ**
+
+> Xin thiết kế một **ứng dụng web hai trang** tên _Word-Snake_.
+>
+> - **Trang Game:**
+> - Rắn điều khiển di chuyển bằng phím.
+> - Rắn ăn là từ tiếng Anh, không phải thức ăn thông thường.
+> - Panel bên phải hiển thị từ đã thu thập và số lượng.
+> - Sau khi game over, kho từ không bị xóa, tiếp tục sử dụng ở ván mới.
+> - **Trang Make Poem:**
+> - Hiển thị cùng kho từ chia sẻ.
+> - Người dùng chọn một phần từ và click nút **Generate Poem**.
+> - Gửi các từ này cho backend, dùng DeepSeek API tạo thơ.
+> - Sau khi sinh thơ, xóa hoặc giảm số lượng từ đã sử dụng trong kho.
+> - **Điều hướng:** Chuyển đổi giữa hai trang qua Tab đơn giản hoặc menu trên cùng.
+> - **Trạng thái chia sẻ:** Đảm bảo từ thu thập luôn đồng bộ và hiển thị ở cả hai trang.
+
+- **Ví dụ kết quả**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. So sánh nền tảng AI Agent (Cách chọn tổ hợp tốt nhất cho dự án đơn giản)
+
+Các nền tảng Vibe Coding khác nhau có đặc điểm và workflow khác nhau. Chúng ta sử dụng cùng một bộ yêu cầu "trò Snake với DeepSeek API" để thử nghiệm thực tế trên nhiều nền tảng, đánh giá ưu nhược điểm từ góc nhìn người mới bắt đầu. Dưới đây là tóm tắt.
+
+## 1. Tiêu chuẩn so sánh
+
+1. **Mục tiêu (Goal)**
+   Xây dựng một ứng dụng web Snake kết nối DeepSeek API.
+2. **Chi tiết game (Game Details)**
+   1. Game tạo thơ thông qua DeepSeek LLM API.
+   2. Rắn ăn từ tiếng Anh, từ thu thập được giữ lại sau game over, tiếp tục sử dụng ở ván mới. Cùng một từ có thể thu thập nhiều lần, tính riêng.
+   3. Khi tạo một bài thơ, từ đã sử dụng bị xóa khỏi kho.
+
+3. **Chức năng bắt buộc (Must-Haves)**
+   1. Một trang frontend có thể chạy, bao gồm trò Snake (điều khiển phím, render Canvas).
+   2. Cơ chế thu thập từ (từ xuất hiện trên bàn cờ, rắn ăn từ, danh sách sidebar cập nhật).
+   3. Lưu trữ kho từ liên tục giữa nhiều ván game.
+   4. Backend sử dụng DeepSeek API (nếu không có API Key, có thể trước trả về thơ mô phỏng).
+   5. Nút "sinh thơ": Sau khi click gọi backend, hiển thị thơ, và cập nhật kho từ theo sử dụng.
+   6. Hỗ trợ API Key qua `.env`, và tránh rò rỉ khóa thông qua `.gitignore`.
+
+4. **Điểm cộng (Nice-to-Haves)**
+   1. Người dùng có thể chọn từ nào để sinh thơ.
+   2. Trải nghiệm người dùng thân thiện (ví dụ sidebar hiển thị rõ ràng danh sách từ, layout khu vực hiển thị thơ hợp lý).
+   3. Thêm comment trong code cho người mới bắt đầu, giải thích logic chính.
+
+## 2. So sánh output code
+
+### 1. Lovable (Web-based)
+
+- **Loại nền tảng:** Web
+- **Đặc điểm chính và workflow:** Lovable làm tốt trong tích hợp và phối hợp, nó tự động hoàn thành các khởi tạo như kết nối database Supabase, khiến quá trình xây dựng dự án rất thuận lợi. Bạn chỉ cần mô tả nhu cầu dự án, Agent sẽ giúp bạn kết nối các loại dịch vụ, xây dựng cấu trúc cơ bản.
+- **Người dùng phù hợp:** Đối với người mới lần đầu thử Vibe Coding, Lovable là lựa chọn rất thân thiện. Nó đơn giản hóa độ phức tạp của liên kết đa dịch vụ, để bạn tập trung sự chú ý vào prompt và lặp lại, thay vì cấu hình môi trường. Nhờ tự động hóa cao, bạn có thể nhanh chóng nhận được prototype chạy được.
+- **Quá trình prompt:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **Hiệu quả trò Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **Giá:** Tương đối cao, nhưng nếu bạn có email trường, có thể xác minh sinh viên để dùng với giá nửa.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor (IDE)
+
+- **Loại nền tảng:** Ứng dụng desktop (PC)
+- **Đặc điểm chính và workflow:** Cursor là một IDE chuyên biệt tích hợp khả năng AI, hỗ trợ Windows, macOS và Linux. Nó nhúng trực tiếp tạo code, viết lại thông minh, truy vấn codebase vào môi trường phát triển. So với công cụ Web, nó gần với trải nghiệm phát triển cục bộ truyền thống hơn. Vì là môi trường cục bộ, cấu hình máy khác nhau sẽ thỉnh thoảng gặp vấn đề liên quan đến môi trường. Điểm tốt là dự án nằm ngay trên máy, không cần tải thêm hay cấu hình môi trường chạy, Cursor sẽ giúp bạn xử lý nhiều bước phức tạp.
+- **Người dùng phù hợp:** Đối với người dùng đã có nền tảng lập trình nhất định, Cursor là một môi trường rất mạnh mẽ và quen thuộc. Nhưng đối với người mới hoàn toàn không có nền tảng, cần tự hiểu cấu trúc dự án, quản lý dependency và tổ chức file, đường cong học sẽ dốc hơn. Phù hợp hơn cho nhà phát triển muốn thêm trợ lý AI vào quy trình lập trình truyền thống.
+- **Quá trình prompt:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **Hiệu quả trò Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **Giá:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai (Web-based)
+
+- **Loại nền tảng:** Web
+- **Đặc điểm chính và workflow:** Cách sử dụng Z.ai khá trực tiếp, nhưng một thách thức rõ ràng là: bạn cần **thủ công copy paste code đã tạo**. Bản thân nền tảng thiếu cửa sổ xem trước thời gian thực, nên rất khó thấy ngay hiệu quả chạy code.
+- **Người dùng phù hợp:** Nền tảng này yêu cầu cách sử dụng "động tay" hơn. Thiếu tự động hóa nghĩa là bạn phải trực tiếp đối mặt với code, điều này đối với người muốn hiểu sâu nội dung AI output lại là một dạng rèn luyện. Nhưng copy paste thường xuyên sẽ mang lại vấn đề hiệu quả và nguy cơ sai sót. Phù hợp hơn cho người muốn xem "raw AI output code", chứ không phải người theo đuổi trải nghiệm một lần click.
+- **Quá trình prompt:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **Hiệu quả trò Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **Giá:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit (Web-based)
+
+- **Loại nền tảng:** Web
+- **Đặc điểm chính và workflow:** Replit là môi trường phát triển và triển khai trực tuyến tất cả trong một, trong trình duyệt đã có thể viết code, chạy chương trình, tạo địa chỉ truy cập online. Trước khi bắt đầu code, nó sẽ đưa ra kế hoạch hành động rõ ràng; đồng thời cung cấp editor trực quan, bạn có thể sửa UI trực tiếp trong cửa sổ xem trước, source code tự động đồng bộ cập nhật. Như vậy có thể bạn luôn xác nhận output của AI có đúng kỳ vọng không, giảm đáng kể số lần sửa đổi qua lại.
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **Người dùng phù hợp:** Replit rất thân thiện với người mới. Nó đơn giản hóa vòng khép kín hoàn chỉnh từ code đến triển khai, không cần tự cấu hình server hay hosting thêm. Chức năng phối hợp cũng rất mạnh, phù hợp bạn học cùng làm dự án hoặc nhờ người khác hỗ trợ xem code từ xa.
+- **Quá trình prompt:** Trong quá trình xây dựng, AI không phải ngay từ đầu đã hiểu hoàn toàn nhu cầu, trải qua khoảng 3 vòng lặp, output cuối cùng mới đạt hiệu quả lý tưởng.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **Hiệu quả trò Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **Giá:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Minimax (Web-based)
+
+- **Loại nền tảng:** Web
+- **Đặc điểm chính và workflow:** Minimax thường mất nhiều thời gian hơn khi thực thi nhiệm vụ. Quy trình thường bao gồm: AI tự động phát hiện và sửa lỗi, vì vậy toàn bộ quá trình có thể chậm hơn, thậm chí hơi rắc rối. Lấy dự án này làm ví dụ, Agent thường trước tạo một kế hoạch chi tiết, rồi từng bước xây dựng backend, database và logic frontend.
+- **Người dùng phù hợp:** Vì nó sẽ tự động chạy test và sửa lỗi, thời gian và tiêu thụ Token đều khá lớn, nhưng bạn có thể rõ ràng thấy AI định vị và giải quyết vấn đề thế nào, từ góc độ học tập rất có giá trị.
+- **Quá trình prompt:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+- **Hiệu quả trò Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+
+- **Giá:** Phiên bản miễn phí trong dự án phức tạp rất có thể không chạy từ đầu đến cuối suôn sẻ, nên khuyến nghị nâng cấp trả phí, để đảm bảo dự án có thể xây dựng hoàn chỉnh.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+### 6. Trae (IDE)
+
+- **Loại nền tảng:** Ứng dụng desktop (PC)
+- **Đặc điểm chính và workflow:** Là ứng dụng desktop, Trae so với công cụ Web thường có ưu thế hơn về hiệu năng và tốc độ phản hồi. Nhưng nó cần tải và cài đặt, đối với một số người dùng rào cản ban đầu hơi cao. Tương tự, vì là môi trường cục bộ, sự khác biệt về cấu hình máy và môi trường dependency sẽ mang lại một số không chắc chắn. Ưu điểm là Trae sẽ giúp bạn hoàn thành tạo dự án và cấu hình chạy ở cục bộ, bạn có thể trực tiếp phát triển và debug trên máy.
+- **Người dùng phù hợp:** Phù hợp hơn cho người dùng kế hoạch tiến hành dự án Vibe Coding dài hạn, và muốn sử dụng tổ hợp công cụ desktop chuyên dụng. Đối với người chỉ muốn "thỉnh thoảng chơi thử", có thể không phải lựa chọn nhẹ nhất.
+- **Quá trình prompt:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+- **Hiệu quả trò Snake:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+
+- **Giá:** Giá tương đối hợp lý, kể cả phiên bản miễn phí cũng đủ để hoàn thành dự án nhỏ chất lượng khá.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+### 7. V0 (Web-based)
+
+- **Loại nền tảng:** Web
+- **Đặc điểm chính và workflow:** V0 là một công cụ tập trung vào tạo component UI React, do Vercel cung cấp. Nó thể hiện xuất sắc trong việc tạo giao diện chất lượng cao, có thể dùng cho môi trường production. Nhưng trong sử dụng thực tế, sẽ gặp những vấn đề như "khó tìm code view", "không nói rõ API Key nên cấu hình ở đâu".
+- **Người dùng phù hợp:** V0 rất phù hợp cho sinh viên hoặc nhà thiết kế tập trung vào frontend và UI/UX. Nhưng nó không phải giải pháp fullstack hoàn chỉnh, bạn vẫn cần sử dụng nền tảng khác để triển khai logic backend và tích hợp API, vì vậy nếu mục tiêu của bạn là "xây ứng dụng hoàn chỉnh tại chỗ", nó có thể không phải lựa chọn hàng đầu.
+- **Quá trình prompt:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
+
+- **Hiệu quả trò Snake:**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
+- **Giá:** Người dùng miễn phí khoảng có thể xây dựng 4-5 dự án đơn giản.
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
+
+## 3. Bảng so sánh tổng kết nền tảng
+
+| **Nền tảng**                                   | **Đánh giá**                                                                     | **Platform** | **Ghi chú**                                                                      |
+| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
+| **[Lovable](https://lovable.dev/)**        | Rất thân thiện với người mới lập trình AI, dễ bắt đầu, trải nghiệm mượt mà, là lựa chọn khởi đầu lý tưởng.                 | Web-based    | Tự động hoàn tất kết nối Supabase, giảm chi phí cấu hình.                                   |
+| **[Cursor](https://cursor.com/cn/agents)** | Phù hợp người dùng đã có kinh nghiệm phát triển, nâng cao năng suất và chất lượng code đáng kể.                             | PC           | Cần nền tảng lập trình nhất định, cần tự hiểu cấu trúc dự án và dependency trong môi trường cục bộ.                         |
+| **[Z.ai](https://chat.z.ai/)**             | Phù hợp hơn cho người có nền tảng lập trình, muốn trực tiếp nghiên cứu chi tiết code AI output.                           | Web-based    | Không có cửa sổ xem trước, kiểm tra kết quả khá phiền; cần thủ công paste code, tạo thư mục và file và chạy service thủ công. |
+| **[Replit](https://replit.com/~)**         | Khuyến nghị cho người muốn nhanh biến ý tưởng thành dịch vụ online có thể truy cập.                                   | Web-based    | Phát triển và triển khai trực tuyến tất cả trong một, hỗ trợ phối hợp và cung cấp editor trực quan.                             |
+| **[Minimax](https://agent.minimaxi.com/)** | Phù hợp người muốn xem toàn bộ quá trình AI tự động tìm và sửa lỗi, và học từ đó, nhưng tổng thể khá chậm và tốn Token. | Web-based    | Toàn bộ quá trình khá dài, AI sẽ nhiều lần tự động chạy test và sửa lỗi.                                |
+| **[Trae](https://www.trae.ai/)**           | Dành cho người có kinh nghiệm lập trình, muốn sử dụng tổ hợp desktop IDE + AI Agent, là công cụ nâng cao hiệu quả mạnh mẽ. | PC           | Cần cài đặt cục bộ và cấu hình môi trường, nhưng hiệu năng tốt hơn, phù hợp tiến hành dự án Vibe Coding dài hạn.              |
+| **[V0](https://v0.app/)**                  | Tối ưu cho người phi nhà phát triển muốn nhanh tạo hiệu ứng UI React, phù hợp sinh viên hướng frontend / thiết kế.  | Web-based    | Tập trung tạo UI React, cần phối hợp với nền tảng khác hoàn thành backend và xây dựng ứng dụng hoàn chỉnh.                  |
+---
+title: 'So sanh 7 cong cu lap trinh AI'
+description: 'Danh gia thuc hanh cac nen tang Web Vibe Coding bang mot bai toan thong nhat, so sanh do de lam quen, kiem soat code va trien khai.'
+---
diff --git a/docs/vi-vn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/vi-vn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..354d8e7
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,348 @@
+# Dùng Agent thiết kế và lập trình thiết kế trang web
+
+## Hướng dẫn chương này
+
+Chương này sẽ trình bày thiết kế và phát triển có thể hợp tác hoàn hảo thông qua AI như thế nào. Bạn sẽ đóng vai trò product manager, chỉ huy "Agent thiết kế" hoàn thành thiết kế Logo, phối màu và bố cục trang, rồi phối hợp với "Agent lập trình" chuyển bản thiết kế thành code có thể chạy. Từ hình thành ý tưởng đến trang web lên mạng, trải nghiệm toàn bộ quy trình phát triển được AI nâng cao, khiến một người trở thành một đội ngũ.
+
+---
+
+# 1. Hướng dẫn bắt đầu
+
+## 1. Giới thiệu hướng dẫn
+
+Hãy sử dụng AI Design Agent và Coding Agent để xây dựng một trang web hoàn chỉnh từ đầu.
+
+- **Agent thiết kế**: Chịu trách nhiệm tạo logo, bố cục trang web, phối màu và các yếu tố hình ảnh khác
+- **Agent lập trình**: Viết code thực tế HTML/CSS/JS, v.v. dựa trên yêu cầu và bố cục bạn đưa ra trong prompt, xây dựng trang web có thể chạy
+
+## 2. Agent thiết kế và Agent lập trình
+
+- **Agent thiết kế**: AI tạo hình ảnh, mô hình trang hoặc phong cách thiết kế dựa trên prompt bạn cung cấp.
+- Mastergo
+- Lovart
+- Figma MCP
+- **Agent lập trình**: AI viết code thực tế (HTML/CSS/JS, v.v.) dựa trên chức năng và bố cục bạn yêu cầu trong prompt.
+- Z.AI
+- Trae
+- Cursor
+- Lovable
+
+---
+
+# 2. Sử dụng Agent thiết kế tạo Logo
+
+## 1. Các yếu tố cần cân nhắc khi thiết kế Logo
+
+Logo là một trong những yếu tố quyết định ấn tượng đầu tiên về trang web của bạn. Để nhận kết quả hài lòng từ Agent thiết kế AI, bạn cần mô tả rõ loại Logo bạn muốn trong prompt.
+
+1. **Tên thương hiệu / Văn bản**
+
+- Văn bản phải xuất hiện trong Logo (ví dụ: tiêu đề trang web, tên thương hiệu, v.v.).
+
+2. **Phong cách (tâm trạng / bầu không khí)**
+
+- Cảm giác hoặc bầu không khí tổng thể mà Logo muốn truyền tải.
+- _Ví dụ: Tối giản, dễ thương, gọn gàng, hiện đại, retro, tương lai, v.v._
+
+3. **Phối màu** (tùy chọn)
+
+- Tốt nhất nên để phối màu Logo phù hợp với tông tổng thể của toàn trang web.
+- Có thể chỉ định mã hex cụ thể, hoặc gam màu chung (màu lạnh, màu ấm, v.v.).
+- _Ví dụ: **`#171721`** (đen), **`#FF7130`** (cam)._
+
+4. **Hình thức (hình dáng / cấu trúc)**
+
+- Làm rõ Logo có cần hình dáng hoặc bố cục cụ thể không.
+- _Ví dụ: Chữ trong vòng tròn, tổ hợp icon + chữ, Logo lấy icon làm chủ đạo, v.v._
+
+5. **Yếu tố icon / biểu tượng** (tùy chọn)
+
+- Đồ họa hoặc biểu tượng muốn xuất hiện trong Logo.
+- _Ví dụ: Icon sách, biểu tượng tia sét, đồ họa liên quan AI, hình học trừu tượng, v.v._
+
+## 2. Viết prompt thiết kế Logo
+
+**Prompt ví dụ**
+
+```
+"Xin thiết kế cho tôi một Logo phong cách tối giản, tên thương hiệu là 'My First Website'.
+Sử dụng đen (#171721) và cam (#FF7130), và đặt chữ bên trong một vòng tròn."
+```
+
+```
+"Xin thiết kế một Logo với tên thương hiệu 'AIID'.
+Phong cách tổng thể phải có cảm giác tương lai, sạch sẽ gọn gàng, màu chủ đạo là xanh và trắng.
+Kết hợp đồ họa trừu tượng tượng trưng cho AI với chữ, và xuất ra dưới dạng PNG với nền trong suốt."
+```
+
+## 3. Yêu cầu thiết kế từ Agent
+
+- Nhập prompt trên → So sánh nhiều bản thiết kế do Agent tạo.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. Xác định Logo cuối cùng
+
+- Chọn phiên bản bạn thích nhất từ bản nháp và tải xuống.
+
+---
+
+# 3. Lập kế hoạch cấu trúc trang web
+
+## 1. Hiểu các khu vực cơ bản
+
+Trước khi thực sự bắt đầu làm trang web, lập kế hoạch các menu (khu vực) muốn bao gồm rất quan trọng. Thiết kế menu phụ thuộc vào việc bạn muốn khách truy cập thấy gì, và muốn họ thực hiện hành động gì.
+Nói chung, trang web thường bao gồm các khu vực cơ bản như **Home / About / Contact**.
+
+## 2. Tự vẽ sketch cấu trúc (tùy chọn)
+
+Bạn có thể trước viết ra một cấu trúc menu đơn giản dựa trên mục tiêu trang web.
+
+### Menu cơ bản
+
+1. **Home**
+   1. Trang chính mà khách truy cập thấy đầu tiên sau khi vào trang web
+   2. Thường bao gồm Logo, hero area và một câu slogan hoặc giới thiệu ngắn
+2. **About**
+   1. Giới thiệu bạn là ai, hoặc mục đích dự án / dịch vụ
+   2. Portfolio cá nhân: Tự giới thiệu + CV ngắn
+   3. Trang dịch vụ: Tầm nhìn, mục tiêu và chức năng cốt lõi
+3. **Contact**
+   1. Thông tin liên hệ, như email, số điện thoại, link mạng xã hội, v.v.
+   2. Cũng có thể thêm một form liên hệ đơn giản
+
+### Menu tùy chọn
+
+4. **Services / Projects**
+   1. Hiển thị dịch vụ bạn cung cấp, hoặc dự án / portfolio của bạn
+   2. Thường hiển thị dạng danh sách hoặc card
+
+5. **Gallery**
+   1. Dùng để hiển thị hình ảnh, ảnh hoặc tác phẩm thiết kế
+
+6. **Blog / News**
+   1. Dùng để xuất bản bài viết, cập nhật hoặc nhật ký
+
+7. **FAQ**
+   1. Tổng hợp các câu hỏi và câu trả lời khách truy cập thường hỏi
+
+## 3. Chọn phối màu (tùy chọn)
+
+Nếu bạn đã có Logo, hoặc muốn dùng kết hợp màu cụ thể để thiết kế trang web, cũng có thể trực tiếp viết mã màu bạn muốn sử dụng trong prompt.
+
+**Ví dụ:** `#171721, #872B97, #FF7130, #FF3C68`
+
+Kể cả bạn tạm chưa nghĩ ra phối màu nào, cũng có thể tìm cảm hứng qua trang web phối màu hoặc tìm kiếm từ khóa.
+
+- **Trang web tham khảo phối màu**
+  - https://colorhunt.co/
+  - https://coolors.co/
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+- **Tìm kiếm phối màu qua từ khóa trên Google**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. Viết prompt thiết kế trang web
+
+**Prompt ví dụ**
+
+```
+"Xin thiết kế một trang web một trang bao gồm 3 khu vực Home, About, Contact.
+Sử dụng phối màu #171721, #FF7130 và #FF3C68.
+Phong cách tổng thể hiện đại, gọn gàng."
+```
+
+---
+
+# 4. Sử dụng Agent thiết kế thiết kế trang web
+
+## 1. Nhập prompt → Tạo bản thiết kế
+
+- Viết cấu trúc đã lên kế hoạch và phối màu đã chọn trong prompt.
+
+**Ví dụ prompt Mastergo**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+## 2. Xem xét bản thiết kế và đưa ra ý kiến sửa đổi
+
+Bạn có thể đưa ra phản hồi cho Agent theo nhu cầu của mình, ví dụ:
+
+- "Quá sặc sỡ, đổi phong cách tổng thể gọn gàng hơn."
+- "Đổi font khác."
+- "Điều chỉnh phối màu."
+- "Xóa phần này đi."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
+
+## 3. Xác định thiết kế cuối cùng
+
+Khi bạn đã sửa đổi nhiều vòng và hài lòng với bản thiết kế, có thể chuyển thiết kế này thành code, để Coding Agent hiểu và tiếp tục làm việc.
+
+Cách chuyển thiết kế thành code sẽ khác nhau tùy nền tảng, nhưng thường là cài đặt và sử dụng một số plugin trong nền tảng thiết kế.
+
+**Ví dụ Mastergo**
+
+1. Mở [trang plugin Mastergo](https://mastergo.com/community/plugin), tìm **seal**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
+
+2. Quay lại trang thiết kế, click **icon hình vuông (plugin)**.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
+
+3. Chọn vùng thiết kế bạn muốn chuyển thành code, click nút **Generate** để tạo code.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
+
+---
+
+# 5. Sử dụng Coding Agent xây trang web
+
+## 1. Hiểu khái niệm cơ bản HTML/CSS/JS
+
+Bản chất một trang web gồm ba ngôn ngữ:
+
+- **HTML (HyperText Markup Language)** → Cấu trúc (bộ xương)
+- **CSS (Cascading Style Sheets)** → Phong cách (ngoại hình)
+- **JavaScript (JS)** → Chức năng (tương tác)
+
+Ba thứ phối hợp với nhau, tạo thành trang web hoàn chỉnh mà chúng ta nhìn thấy.
+
+1. **🏗️ HTML (Cấu trúc)**
+
+- Định nghĩa "hiển thị gì" trên trang
+- Dùng để đặt các yếu tố như văn bản, hình ảnh, nút bấm, link
+- Tương tự như **tường và khung** của tòa nhà
+
+**Ví dụ**
+
+```html
+<h1>Hello!</h1>
+<p>This is my first website.</p>
+<a href="contact.html">Contact</a>
+```
+
+2. **🎨 CSS (Phong cách)**
+
+- Quyết định "nội dung hiển thị thế nào"
+- Điều khiển kích thước chữ, màu sắc, khoảng cách, nền, hình dạng nút, v.v.
+- Cho HTML có "quần áo" và phong cách hình ảnh
+
+**Ví dụ**
+
+```css
+h1 {
+  color: #FF7130;   /* Text color */
+  font-size: 36px;  /* Font size */
+  text-align: center; /* Center alignment */
+}
+
+body {
+  background-color: #171721; /* Background color */
+  color: white; /* Default text color */
+}
+```
+
+3. **⚙️ JavaScript (JS) (Chức năng)**
+
+- Khiến trang web có thể tương tác với người dùng
+- Có thể triển khai các hiệu ứng động như click nút, mở menu, slideshow ảnh, submit form
+- Nếu HTML/CSS là bộ xương và ngoại hình tĩnh, thì JS là **bộ não** khiến trang web "sống động"
+
+**Ví dụ**
+
+```javascript
+function showAlert() {
+  alert("The button has been clicked!");
+}
+```
+
+```html
+<button onclick="showAlert()">Click me</button>
+```
+
+## 2. Để Coding Agent tạo code
+
+**Prompt ví dụ**
+
+```
+"Xin viết HTML và CSS cho một trang web một trang bao gồm các khu vực Home, About và Contact.
+Sử dụng phối màu #171721, #FF7130, #FF3C68.
+Nền đen, chữ trắng."
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
+
+## 3. Chạy trang web
+
+Khi code nháp đã được tạo, Agent thường sẽ tự động khởi động dự án và hiển thị trang web đã tạo.
+
+Nếu bạn khởi động lại Agent, hoặc trang web không hiển thị, có thể nhập prompt kiểu như sau:
+
+```
+"Please activate the project"
+```
+
+Để Agent khởi động lại dự án và mở trang xem trước, tiện bạn xem hiệu quả hiện tại.
+
+## 4. Sửa đổi đơn giản
+
+Bạn có thể tiếp tục tinh chỉnh bản nháp thông qua ngôn ngữ tự nhiên, ví dụ:
+
+- "Làm nút to hơn."
+- "Font đậm hơn."
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
+
+## 5. Sửa đổi nội dung văn bản trang web
+
+Trang web phiên bản đầu do Agent tạo, thường bao gồm một số văn bản placeholder tự động tạo. Để nó gần hơn với kịch bản thực tế của bạn, bạn có thể chuẩn bị nội dung thực tế trước, rồi để Agent giúp bạn thay thế.
+
+**Ví dụ ứng dụng:** Cập nhật trang About của trang web AIID
+
+1. Trước viết xong nội dung bạn muốn hiển thị trên trang About. Để Agent dễ hiểu, có thể lưu nội dung dưới định dạng Markdown.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
+
+2. Sau đó nói với Agent trong hội thoại, áp dụng nội dung từ file này lên trang được chỉ định.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
+
+3. Xem phiên bản cập nhật sau khi áp dụng nội dung.
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
+
+## 6. Chèn hình ảnh
+
+Nếu bạn muốn thêm hình ảnh cụ thể (ví dụ Logo, ảnh nền, v.v.), có thể trước upload hình ảnh vào thư mục dự án, sau đó trong prompt nói rõ muốn sử dụng hình ảnh này ở vị trí nào trên trang.
+
+- **Ví dụ:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png)
+
+- **Kết quả:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png)
+
+---
+
+# 6. Tích hợp thiết kế và code
+
+## 1. Tích hợp file thiết kế và code trang web (tùy chọn)
+
+Khi bạn đã tải xuống file code từ Agent thiết kế, có thể di chuyển chúng vào thư mục dự án hiện tại, rồi nhờ Coding Agent giúp bạn hợp nhất code thiết kế này với dự án hiện có.
+
+- **Ví dụ:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png)
+
+- **Kết quả:**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
+---
+title: 'Lam website voi agent thiet ke va lap trinh'
+description: 'Tu y tuong den len song: dung agent thiet ke tao visual, sau do dung agent code tao website chay duoc voi workflow tai su dung.'
+---
diff --git a/docs/vi-vn/stage-1/appendix-b-common-errors/index.md b/docs/vi-vn/stage-1/appendix-b-common-errors/index.md
new file mode 100644
index 0000000..0cc1cea1
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-b-common-errors/index.md
@@ -0,0 +1,325 @@
+---
+title: 'Lỗi code thì phải làm sao - Hướng dẫn thực chiến chụp màn hình hỏi AI'
+description: 'Học cách đặt câu hỏi cho AI hiệu quả để giải quyết các lỗi phát triển, làm chủ quy trình chuẩn chụp màn hình, mô tả, định vị vấn đề, biến AI thành trợ lý debug của bạn.'
+---
+
+<script setup>
+const duration = 'Khoảng <strong>30 phút</strong>'
+</script>
+
+# Lỗi code thì phải làm sao
+
+## Hướng dẫn chương này
+
+<ChapterIntroduction :duration="duration" :tags="['Kỹ năng debug', 'Hợp tác AI', 'Khắc phục vấn đề', 'Công cụ nhà phát triển']" coreOutput="Một quy trình khắc phục lỗi chuẩn hóa" expectedOutput="Có thể tự giải quyết 90% lỗi phổ biến">
+
+Trong kỷ nguyên AI, cách khắc phục lỗi đã thay đổi.
+
+Bạn không cần thuộc tất cả các loại lỗi, không cần trở thành chuyên gia debug, thậm chí không cần hiểu lỗi có nghĩa là gì.
+
+<strong>Bạn chỉ cần học một điều: cách hỏi AI.</strong>
+
+Chương này sẽ dạy bạn một quy trình khắc phục <strong>từ đơn giản đến nâng cao</strong>:
+
+1. <strong>Bước 1: Hỏi trực tiếp</strong>: Mô tả hiện tượng + chụp màn hình, đặt câu hỏi bằng một câu
+2. <strong>Bước 2: Bổ sung thông tin</strong>: Nếu không giải quyết được, mở F12 để bổ sung thông tin quan trọng
+
+Sau khi làm chủ quy trình này, <strong>90% lỗi bạn đều có thể tự giải quyết</strong>.
+
+</ChapterIntroduction>
+
+::: info Giải thích
+Tất cả các phương pháp trong chương này dựa trên kinh nghiệm sử dụng thực tế các AI IDE như Cursor/Trae/Claude, có thể áp dụng trực tiếp cho phát triển hàng ngày.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Đặt câu hỏi trực tiếp', description: 'Mô tả hiện tượng + chụp màn hình' },
+      { title: 'Bổ sung thông tin', description: 'Mở F12 định vị vấn đề' },
+      { title: 'Lặp lại giải quyết', description: 'Cho đến khi vấn đề được giải quyết' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Tâm pháp cốt lõi: Chụp màn hình hỏi AI
+
+::: warning Tại sao chương này quan trọng?
+
+Rất nhiều người mới học khi gặp lỗi, phản ứng đầu tiên là:
+- Hoảng hốt, bắt đầu sửa code lung tung
+- Dùng nửa tiếng để tìm kiếm "cách giải quyết lỗi xxx"
+- Cố tự hiểu lỗi có nghĩa là gì
+- Tự debug đến khuya
+
+<strong>Những điều này đều đang lãng phí thời gian.</strong>
+
+Trong kỷ nguyên AI, debug đã trở thành một việc rất đơn giản:
+
+```
+Thấy lỗi → Chụp màn hình → Hỏi AI → Làm theo AI nói
+```
+
+Bạn không cần hiểu lỗi, không cần biết debug, thậm chí không cần biết vấn đề nằm ở đâu.
+
+<strong>Bạn chỉ cần học cách hỏi.</strong>
+
+:::
+
+### 1.1 Cách đặt câu hỏi đơn giản nhất
+
+Không cần template phức tạp, chọn một trong hai cách:
+
+**Cách 1: Mô tả hiện tượng**
+
+Định dạng: Vừa rồi làm gì, bây giờ xuất hiện gì
+
+```
+Vừa rồi tôi sửa code trang đăng nhập, bây giờ trang trắng, phải làm sao?
+```
+
+**Cách 2: Chụp màn hình**
+
+Trực tiếp chụp màn hình trang hiện tại hoặc thông tin lỗi
+
+```
+[Chụp màn hình]
+
+Lỗi này giải quyết thế nào?
+```
+
+**Cách tốt nhất: Mô tả + Chụp màn hình**
+
+```
+Vừa rồi tôi sửa code trang đăng nhập, bây giờ trang trắng.
+
+[Chụp màn hình]
+
+Phải làm sao?
+```
+
+**Nhớ: Mô tả rõ ngữ cảnh, kèm chụp màn hình, AI có thể giúp bạn giải quyết vấn đề nhanh hơn.**
+
+### 1.2 Cách nói rõ vấn đề
+
+Rất nhiều người mới học biết cần đặt câu hỏi, nhưng không biết nói thế nào. Thực ra chỉ cần nói rõ ba điều:
+
+**1. Vừa rồi làm gì**
+
+```
+Vừa rồi tôi click nút lưu
+Vừa rồi tôi sửa code trang đăng nhập
+Vừa rồi tôi refresh trang
+```
+
+**2. Bây giờ thấy gì**
+
+```
+Bây giờ trang trắng
+Bây giờ bấm nút không có phản ứng
+Bây giờ hiển thị thông tin lỗi
+```
+
+**3. Muốn đạt hiệu quả gì**
+
+```
+Tôi muốn dữ liệu lưu thành công
+Tôi muốn trang hiển thị bình thường
+Tôi muốn sau khi click nút sẽ hiện thông báo
+```
+
+**Ví dụ hoàn chỉnh:**
+
+```
+Vừa rồi tôi click nút lưu, bây giờ trang hiển thị lỗi "Lưu thất bại".
+
+[Chụp màn hình]
+
+Tôi muốn dữ liệu form lưu thành công vào cơ sở dữ liệu, phải làm sao?
+```
+
+**Nguyên tắc chính:**
+- Dùng ngôn ngữ bình thường để mô tả, không dùng thuật ngữ chuyên ngành
+- Nói theo trình tự thời gian: trước làm gì, sau đó xảy ra gì
+- Nói ra kỳ vọng của bạn, để AI biết bạn muốn gì
+
+## 2. Bước 1: Trực tiếp mô tả hiện tượng đặt câu hỏi
+
+Khi gặp vấn đề, <strong>đừng vội mở F12</strong>. Trước hết mô tả trực tiếp hiện tượng, chụp màn hình trang hiện tại, gửi cho AI xem.
+
+Rất nhiều lúc, AI thấy chụp màn hình đã có thể trực tiếp đưa ra giải pháp.
+
+### 2.1 Mô tả các hiện tượng phổ biến thế nào
+
+::: tip Mô tả trực tiếp là được
+
+**Trang trắng**
+```
+Trang mở ra trắng trơn, phải làm sao?
+
+[Chụp màn hình]
+```
+
+**Nút click không phản ứng**
+```
+Click nút này không có phản ứng, giúp tôi xem.
+
+[Chụp màn hình]
+```
+
+**Dữ liệu không lưu được**
+```
+Bấm lưu, dữ liệu không được lưu, phải làm sao?
+
+[Chụp màn hình]
+```
+
+**Style hiển thị sai**
+```
+Vị trí nút này bị lệch, điều chỉnh thế nào?
+
+[Chụp màn hình]
+```
+
+**API báo lỗi**
+```
+Gọi API bị lỗi, giúp tôi xem.
+
+[Chụp màn hình]
+```
+
+:::
+
+### 2.2 Nếu AI giải quyết trực tiếp
+
+Chúc mừng bạn, vấn đề đã được giải quyết! Chỉ cần sửa theo AI nói.
+
+### 2.3 Nếu AI nói "cần thêm thông tin"
+
+Lúc này mới cần mở F12, bổ sung thông tin quan trọng. Xem tiếp bên dưới.
+
+## 3. Bước 2: Bổ sung thông tin quan trọng
+
+Khi AI nói cần thêm thông tin, tùy theo loại vấn đề, mở F12 chụp nội dung tương ứng.
+
+### 3.1 Khi nào cần bổ sung thông tin
+
+AI có thể trả lời như sau:
+- "Xin mở Console xem có lỗi không"
+- "Chụp màn hình tab Network cho tôi xem"
+- "Cần xem thông tin lỗi cụ thể"
+
+Lúc này, hãy bổ sung chụp màn hình theo hướng dẫn dưới đây.
+
+### 3.2 Bổ sung thông tin Console (Trang trắng/Lỗi)
+
+::: tip Các bước thao tác
+
+**Bước 1: Nhấn F12 mở công cụ nhà phát triển**
+
+Trên Mac là `Cmd+Option+I`, hoặc click chuột phải chọn "Kiểm tra".
+
+**Bước 2: Chuyển sang tab Console**
+
+**Bước 3: Chụp màn hình thông tin lỗi màu đỏ**
+
+**Bước 4: Gửi cho AI**
+
+```
+Lỗi Console như sau:
+
+[Chụp màn hình]
+```
+
+:::
+
+### 3.3 Bổ sung thông tin Network (Vấn đề dữ liệu/API lỗi)
+
+::: tip Các bước thao tác
+
+**Bước 1: Nhấn F12 mở công cụ nhà phát triển**
+
+**Bước 2: Chuyển sang tab Network**
+
+**Bước 3: Thao tác lại một lần** (Click lưu/Refresh trang)
+
+**Bước 4: Tìm request tương ứng, chụp màn hình**
+
+- Xem URL và status code
+- Xem Payload (tham số truyền đi)
+- Xem Response (kết quả trả về)
+
+**Bước 5: Gửi cho AI**
+
+```
+Thông tin Network như sau:
+
+Request: [Chụp màn hình 1]
+Tham số: [Chụp màn hình 2]
+Kết quả: [Chụp màn hình 3]
+```
+
+:::
+
+### 3.4 Bổ sung thông tin Elements (Vấn đề style)
+
+::: tip Các bước thao tác
+
+**Bước 1: Click chuột phải vào phần tử → "Kiểm tra"**
+
+Công cụ nhà phát triển sẽ tự động định vị đến phần tử đó.
+
+**Bước 2: Chụp màn hình bảng Styles**
+
+**Bước 3: Gửi cho AI**
+
+```
+Style phần tử như sau:
+
+[Chụp màn hình]
+```
+
+:::
+
+## 4. Bước 3: Lặp lại cho đến khi giải quyết
+
+### 4.1 Cách làm kém hiệu quả
+
+Những cách làm này sẽ lãng phí thời gian của bạn:
+
+Thấy lỗi liền hoảng hốt, bắt đầu sửa code lung tung
+Dùng nửa tiếng tìm kiếm giải pháp lỗi
+Cố tự hiểu ý nghĩa của mỗi lỗi
+Một mình debug đến khuya
+
+### 4.2 Cách làm hiệu quả
+
+Làm theo quy trình này:
+
+Trước hết mô tả trực tiếp hiện tượng chụp màn hình đặt câu hỏi
+Khi AI nói cần thêm thông tin, mới mở F12 bổ sung
+Sửa code theo đề xuất
+Sau khi sửa xong kiểm tra, nếu vấn đề vẫn còn thì tiếp tục chụp màn hình đặt câu hỏi
+
+## 5. Tóm tắt: Quy trình hoàn chỉnh
+
+```
+Gặp vấn đề
+    ↓
+Mô tả trực tiếp hiện tượng + Chụp màn hình
+    ↓
+Gửi cho AI: "Phải làm sao?"
+    ↓
+AI giải quyết trực tiếp?
+    ↓ Có
+Làm theo AI nói
+    ↓
+Kiểm tra đã giải quyết chưa
+    ↓
+    ↓ Không / AI cần thêm thông tin
+Mở F12, bổ sung thông tin quan trọng
+    ↓
+Gửi lại cho AI
+    ↓
+Lặp lại cho đến khi giải quyết
+```
diff --git a/docs/vi-vn/stage-1/appendix-c-consumer-scenarios/index.md b/docs/vi-vn/stage-1/appendix-c-consumer-scenarios/index.md
new file mode 100644
index 0000000..6c30a13
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-c-consumer-scenarios/index.md
@@ -0,0 +1,642 @@
+---
+title: 'Tham khảo cảm hứng cho kịch bản tiêu dùng B2C'
+description: 'Tài liệu này tổng hợp các hướng ứng dụng sáng tạo của mô hình LLM trong kịch bản tiêu dùng B2C, bao gồm lối sống, đồng hành cảm xúc, giải trí, phát triển cá nhân và tương tác xã hội, làm nguồn tham khảo cho nhà phát triển ứng dụng AI hướng tới người tiêu dùng.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'khoảng <strong>4 giờ</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// Nhóm chủ đề theo từng kịch bản: nhấn mạnh cảm giác, bầu không khí và gợi ý tâm lý
+const topicPool = {
+  'lifestyle': [
+    { title: 'Trợ lý đánh thức bằng nghi thức buổi sáng', desc: 'Tạo nghi thức buổi sáng riêng theo thời tiết, lịch trình và tâm trạng để mỗi ngày bắt đầu thật đẹp' },
+    { title: 'Nhà thiết kế bầu không khí cho người sống một mình', desc: 'Thiết kế không gian sống cho người ở một mình với gợi ý phối hợp ánh sáng, âm nhạc và hương thơm' },
+    { title: 'Trình tạo kế hoạch chữa lành cuối tuần ở nhà', desc: 'Đề xuất combo ở nhà hoàn hảo theo tâm trạng: phim + đồ ăn vặt + bố trí không gian' },
+    { title: 'Đài phát thanh an ủi tâm hồn trước khi ngủ', desc: 'Tạo câu chuyện dịu dàng và hướng dẫn thiền như một đài riêng đồng hành vào giấc ngủ' },
+    { title: 'Bộ bắt cảm hứng thẩm mỹ đời sống', desc: 'Tìm cái đẹp trong những việc nhỏ hằng ngày, tạo gợi ý thẩm mỹ và hướng dẫn nghi thức sống' }
+  ],
+  'emotion': [
+    { title: 'Người lắng nghe tâm sự đêm khuya', desc: 'Một nơi tiếp nhận cảm xúc trực tuyến 24 giờ, không phán xét mọi điều trong lòng' },
+    { title: 'Người đồng hành chữa lành sau chia tay', desc: 'Cung cấp sự đồng hành dịu dàng, gợi ý hồi phục và lối thoát cảm xúc trong giai đoạn thấp điểm sau chia tay' },
+    { title: 'Huấn luyện viên thở giảm lo âu', desc: 'Nhận biết cảm xúc lo âu, hướng dẫn bài tập thở và thiền chánh niệm' },
+    { title: 'Cố vấn xây dựng lại tự tin', desc: 'Giúp xây dựng lại nhận thức về bản thân và cảm giác giá trị qua đối thoại tích cực và gợi ý tâm lý' },
+    { title: 'Diễn giải thông minh nhật ký cảm xúc', desc: 'Phân tích nhật ký cảm xúc, phát hiện quy luật tâm trạng và đưa ra góc nhìn, lời khuyên ấm áp' }
+  ],
+  'entertainment': [
+    { title: 'DM nhập vai cho trò chơi suy luận', desc: 'Đóng vai người dẫn trò, tạo bầu không khí hồi hộp và thúc đẩy cốt truyện' },
+    { title: 'NPC có linh hồn trong game thế giới mở', desc: 'NPC có cá tính, nhớ câu chuyện của người chơi và tạo liên kết cảm xúc thật' },
+    { title: 'Tạo nội dung podcast cá nhân hóa', desc: 'Tạo podcast riêng theo sở thích, tự nhiên như trò chuyện với bạn bè' },
+    { title: 'Nhóm tạo không khí cho concert ảo', desc: 'Tạo cảm giác hiện trường cho concert online với tương tác, cổ vũ và hiệu ứng không khí thời gian thực' },
+    { title: 'Bạn đồng sáng tạo tiểu thuyết tương tác', desc: 'Cùng độc giả sáng tác câu chuyện, mỗi lựa chọn đều ảnh hưởng đến hướng đi của thế giới' }
+  ],
+  'growth': [
+    { title: 'Người chứng kiến phát triển cá nhân', desc: 'Ghi lại hành trình trưởng thành, khích lệ và nhìn lại ở các mốc quan trọng' },
+    { title: 'Huấn luyện viên game hóa thói quen', desc: 'Biến quá trình xây dựng thói quen nhàm chán thành một trò phiêu lưu thú vị' },
+    { title: 'Ghép đôi bạn học kỹ năng', desc: 'Tìm bạn học cùng chí hướng để cùng giám sát và chia sẻ tiến bộ' },
+    { title: 'Người phát hiện niềm vui nhỏ mỗi ngày', desc: 'Giúp nhận ra những điều nhỏ đẹp trong đời sống, nuôi dưỡng lòng biết ơn và thái độ tích cực' },
+    { title: 'Trình mô phỏng trải nghiệm cuộc đời', desc: 'Mô phỏng các lựa chọn cuộc đời khác nhau và trải nghiệm khả năng khác trong dòng thời gian song song' }
+  ],
+  'social': [
+    { title: 'Trình tạo chủ đề phá băng', desc: 'Cung cấp chủ đề thú vị trong bối cảnh xã hội để giảm ngượng và kéo gần khoảng cách' },
+    { title: 'Người viết caption mạng xã hội có không khí', desc: 'Tạo caption có phong cách theo ảnh và tâm trạng' },
+    { title: 'Nhà hoạch định không khí hẹn hò', desc: 'Thiết kế trọn vẹn không khí cho buổi hẹn, từ địa điểm đến chủ đề và bất ngờ' },
+    { title: 'Người khuấy động họp mặt từ xa', desc: 'Làm không khí họp mặt online sôi nổi bằng trò chơi và hướng dẫn tương tác' },
+    { title: 'Trợ lý quản lý năng lượng xã hội', desc: 'Giúp người hướng nội quản lý năng lượng xã hội và tìm nhịp giao tiếp thoải mái' }
+  ],
+  'creative': [
+    { title: 'Bộ sơ cứu khi cạn cảm hứng', desc: 'Cung cấp tia lửa bất ngờ khi gặp nút thắt sáng tạo' },
+    { title: 'Hướng dẫn khám phá phong cách cá nhân', desc: 'Giúp phát hiện phong cách riêng, từ ăn mặc đến biểu đạt' },
+    { title: 'Cố vấn thẩm mỹ cho sổ tay và nhật ký', desc: 'Gợi ý bố cục, phối màu và ý tưởng nội dung cho journaling' },
+    { title: 'Hướng dẫn bố cục và không khí nhiếp ảnh', desc: 'Đưa ra gợi ý chụp ảnh và chỉnh ảnh theo cảnh và cảm giác mong muốn' },
+    { title: 'Người ghép nhạc theo tâm trạng', desc: 'Đề xuất tổ hợp âm nhạc hoàn hảo theo tâm trạng và bối cảnh hiện tại' }
+  ],
+  'travel': [
+    { title: 'Hướng dẫn dạo phố khám phá', desc: 'Khám phá thành phố như người địa phương và tìm những địa điểm ẩn thú vị' },
+    { title: 'Tạo nhật ký tâm trạng du lịch', desc: 'Chuyển ảnh và cảm xúc du lịch thành bài ký và ký ức đẹp' },
+    { title: 'Trợ lý đồng hành khi du lịch một mình', desc: 'Cung cấp đồng hành, lời khuyên và cảm giác an toàn cho người đi du lịch một mình' },
+    { title: 'Xem trước bầu không khí điểm đến', desc: 'Trải nghiệm nhập vai không khí điểm đến trước khi khởi hành' },
+    { title: 'Hướng dẫn không khí nhiếp ảnh du lịch', desc: 'Hướng dẫn chụp ảnh du lịch có câu chuyện theo cảnh và ánh sáng' }
+  ],
+  'health': [
+    { title: 'Người đánh thức động lực vận động', desc: 'Đưa ra lời khích lệ và động lực vừa đủ khi không muốn vận động' },
+    { title: 'Căn bếp cảm hứng ăn uống lành mạnh', desc: 'Tạo công thức lành mạnh và chữa lành theo tâm trạng và nguyên liệu' },
+    { title: 'Nhà tối ưu không khí chất lượng giấc ngủ', desc: 'Tạo bầu không khí ngủ tốt toàn diện từ môi trường đến tâm lý' },
+    { title: 'Người hướng dẫn cảm nhận cơ thể', desc: 'Dẫn dắt chú ý tới tín hiệu cơ thể và xây dựng kết nối thân tâm' },
+    { title: 'Trợ lý nhắc tự chăm sóc', desc: 'Nhắc bạn dừng lại và chăm sóc bản thân trong lúc bận rộn' }
+  ],
+  'learning': [
+    { title: 'Hướng dẫn khám phá tri thức dạng game', desc: 'Biến việc học kiến thức khô khan thành cuộc phiêu lưu khám phá thú vị' },
+    { title: 'Bạn đồng hành học ngôn ngữ theo tình huống', desc: 'Đóng vai nhiều nhân vật để tiếp thu ngôn ngữ tự nhiên qua hội thoại tình huống' },
+    { title: 'Trợ lý thỏa mãn tò mò', desc: 'Trả lời những ý nghĩ kỳ lạ và nuôi dưỡng tò mò về thế giới' },
+    { title: 'Kích hoạt cảm hứng ghi chú đọc sách', desc: 'Giúp sắp xếp cảm nhận đọc sách và tìm góc suy nghĩ mới' },
+    { title: 'Tạo không khí chia sẻ kiến thức', desc: 'Chuyển kiến thức đã học thành nội dung chia sẻ thú vị' }
+  ],
+  'relationship': [
+    { title: 'Huấn luyện viên giao tiếp trong quan hệ thân mật', desc: 'Giúp bày tỏ cảm xúc khó nói và cải thiện quan hệ thân mật' },
+    { title: 'Trợ lý nhắc quan tâm gia đình', desc: 'Nhắc bạn quan tâm gia đình và gợi ý tương tác ấm áp' },
+    { title: 'Người tạo không khí duy trì tình bạn', desc: 'Giúp duy trì tình bạn xa cách và tạo chủ đề chung' },
+    { title: 'Nhà hoạch định tỏ tình và bất ngờ', desc: 'Lên kế hoạch cho bất ngờ và khoảnh khắc lãng mạn khó quên dành cho người quan trọng' },
+    { title: 'Hướng dẫn làm dịu xung đột', desc: 'Đưa ra lời khuyên và câu nói làm dịu không khí khi quan hệ căng thẳng' }
+  ],
+  'pet': [
+    { title: 'Nhật ký nhân hóa thú cưng', desc: 'Tạo nhật ký từ góc nhìn thú cưng, ghi lại đời sống ấm áp với chủ' },
+    { title: 'Người giải mã hành vi thú cưng', desc: 'Diễn giải ngôn ngữ hành vi của thú cưng, tăng kết nối với thú cưng' },
+    { title: 'Nhà hoạch định thời gian bên thú cưng', desc: 'Thiết kế hoạt động sáng tạo tương tác với thú cưng để tăng gắn bó' },
+    { title: 'Tạo câu chuyện kỷ niệm thú cưng', desc: 'Chuyển ảnh và ký ức về thú cưng thành câu chuyện ấm áp' },
+    { title: 'Hướng dẫn yên tâm cho người mới nuôi thú cưng', desc: 'Cung cấp đồng hành và hướng dẫn ấm áp cho người mới nuôi thú cưng' }
+  ],
+  'finance': [
+    { title: 'Trợ lý nhận biết cảm xúc tiêu dùng', desc: 'Nhận ra cảm xúc phía sau mua sắm bốc đồng và xây dựng quan điểm tiêu dùng lành mạnh' },
+    { title: 'Động lực trực quan hóa mục tiêu tiết kiệm', desc: 'Chuyển mục tiêu tiết kiệm thành tiến độ giấc mơ có thể nhìn thấy' },
+    { title: 'Học tài chính cá nhân nhẹ nhàng', desc: 'Học kiến thức tài chính bằng cách nhẹ nhàng và thú vị' },
+    { title: 'Người làm dịu lo âu tài chính', desc: 'Cung cấp hỗ trợ cảm xúc và lời khuyên thực tế khi đối mặt áp lực tài chính' },
+    { title: 'Trò chơi trải nghiệm đầu tư nhỏ', desc: 'Trải nghiệm đầu tư theo cách game hóa, giảm rào cản nhập môn' }
+  ],
+  'career': [
+    { title: 'Người đồng hành khi mơ hồ nghề nghiệp', desc: 'Lắng nghe, cùng khám phá và gợi ý hướng đi trong giai đoạn mơ hồ nghề nghiệp' },
+    { title: 'Người đánh thức cảm giác thành tựu trong công việc', desc: 'Giúp phát hiện giá trị và ý nghĩa trong công việc, thắp lại nhiệt huyết' },
+    { title: 'Trợ lý không khí xã giao nơi làm việc', desc: 'Cung cấp chủ đề nhẹ nhàng và gợi ý tương tác cho giao tiếp công sở' },
+    { title: 'Bộ kích hoạt cảm hứng nghề phụ', desc: 'Kích hoạt ý tưởng nghề phụ theo sở thích và kỹ năng cá nhân' },
+    { title: 'Trạm tiếp sức tự tin trước phỏng vấn', desc: 'Cung cấp chuẩn bị tâm lý và khích lệ tự tin trước phỏng vấn' }
+  ],
+  'home': [
+    { title: 'Nhà thiết kế không khí không gian nhà ở', desc: 'Thiết kế bầu không khí nhà ở theo tâm trạng và mùa' },
+    { title: 'Hướng dẫn thay đổi nhà cửa bốn mùa', desc: 'Thay đổi bố trí nhà theo mùa để giữ cảm giác mới mẻ' },
+    { title: 'Phép màu cho căn hộ nhỏ', desc: 'Làm cho không gian nhỏ cũng có bầu không khí thoải mái và ấm áp' },
+    { title: 'Người tạo nghi thức trong nhà', desc: 'Tạo cảm giác nghi thức cho hoạt động hằng ngày tại nhà' },
+    { title: 'Đồng hành tâm lý khi declutter', desc: 'Cung cấp hỗ trợ tâm lý và gợi ý quyết định khi sắp xếp đồ đạc' }
+  ],
+  'food': [
+    { title: 'Món ăn chữa lành cho một người', desc: 'Thiết kế món ăn đơn giản và chữa lành cho người sống một mình' },
+    { title: 'Thiết kế không khí bàn ăn ngày lễ', desc: 'Thiết kế bố trí bàn ăn có nghi thức cho những ngày đặc biệt' },
+    { title: 'Người ghép món ăn theo tâm trạng', desc: 'Đề xuất món ăn và cách nấu phù hợp theo tâm trạng hiện tại' },
+    { title: 'Xây dựng tự tin cho người mới vào bếp', desc: 'Cung cấp khích lệ ấm áp và công thức đơn giản cho người bắt đầu từ con số không' },
+    { title: 'Hướng dẫn không khí chụp ảnh món ăn', desc: 'Giúp món ăn gia đình cũng có thể được chụp thật hấp dẫn' }
+  ],
+  'fashion': [
+    { title: 'Moodboard trang phục hôm nay', desc: 'Tạo cảm hứng phối đồ theo thời tiết, dịp và tâm trạng' },
+    { title: 'Stylist tủ đồ capsule', desc: 'Tạo vô số khả năng phối đồ từ số lượng món đồ hữu hạn' },
+    { title: 'Hành trình khám phá phong cách cá nhân', desc: 'Giúp phát hiện và xây dựng phong cách cá nhân độc đáo' },
+    { title: 'Nhà sáng tạo phối mới đồ cũ', desc: 'Cung cấp cảm hứng phối đồ mới cho quần áo cũ' },
+    { title: 'Cố vấn tạo hình dịp đặc biệt', desc: 'Thiết kế diện mạo giúp tự tin cho dịp quan trọng' }
+  ]
+}
+
+// Bảng ánh xạ đề xuất định sẵn dựa trên bầu không khí và cảm giác
+const recommendationMap = {
+  // Bầu không khí: chữa lành
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Bầu không khí: phát triển
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Bầu không khí: xã hội
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // Bầu không khí: khám phá
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // Bầu không khí: đời thường
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: 'Chữa lành', value: 'healing', desc: 'Ấm áp, xoa dịu, hồi phục' },
+  { label: 'Phát triển', value: 'growth', desc: 'Tiến bộ, đột phá, chuyển hóa' },
+  { label: 'Xã hội', value: 'social', desc: 'Kết nối, chia sẻ, tương tác' },
+  { label: 'Khám phá', value: 'explore', desc: 'Tò mò, phiêu lưu, phát hiện' },
+  { label: 'Đời thường', value: 'daily', desc: 'Bình dị, chân thật, hiện tại' }
+]
+
+const feelingOptions = [
+  { label: 'Muốn thư giãn', value: 'relax', desc: 'Giảm áp lực, thả lỏng bản thân' },
+  { label: 'Tìm cảm hứng', value: 'inspire', desc: 'Kích hoạt sáng tạo, nhận gợi mở' },
+  { label: 'Khao khát kết nối', value: 'connect', desc: 'Kết nối với con người, cộng hưởng cảm xúc' },
+  { label: 'Tạm thời thoát ra', value: 'escape', desc: 'Rời thực tại, trải nghiệm nhập vai' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: 'Lối sống', anchor: '#_1-lối-sống' },
+  { key: 'emotion', name: 'Đồng hành cảm xúc', anchor: '#_2-đồng-hành-cảm-xúc' },
+  { key: 'entertainment', name: 'Giải trí thư giãn', anchor: '#_3-giải-trí-thư-giãn' },
+  { key: 'growth', name: 'Phát triển cá nhân', anchor: '#_4-phát-triển-cá-nhân' },
+  { key: 'social', name: 'Tương tác xã hội', anchor: '#_5-tương-tác-xã-hội' },
+  { key: 'creative', name: 'Biểu đạt sáng tạo', anchor: '#_6-biểu-đạt-sáng-tạo' },
+  { key: 'travel', name: 'Khám phá du lịch', anchor: '#_7-khám-phá-du-lịch' },
+  { key: 'health', name: 'Sức khỏe thân tâm', anchor: '#_8-sức-khỏe-thân-tâm' },
+  { key: 'learning', name: 'Khám phá tri thức', anchor: '#_9-khám-phá-tri-thức' },
+  { key: 'relationship', name: 'Nuôi dưỡng quan hệ', anchor: '#_10-nuôi-dưỡng-quan-hệ' },
+  { key: 'pet', name: 'Đồng hành thú cưng', anchor: '#_11-đồng-hành-thú-cưng' },
+  { key: 'finance', name: 'Sức khỏe tài chính', anchor: '#_12-sức-khỏe-tài-chính' },
+  { key: 'career', name: 'Phát triển nghề nghiệp', anchor: '#_13-phát-triển-nghề-nghiệp' },
+  { key: 'home', name: 'Không gian nhà ở', anchor: '#_14-không-gian-nhà-ở' },
+  { key: 'food', name: 'Ẩm thực nấu nướng', anchor: '#_15-ẩm-thực-nấu-nướng' },
+  { key: 'fashion', name: 'Phong cách ăn mặc', anchor: '#_16-phong-cách-ăn-mặc' }
+]
+
+// Tính kết quả đề xuất: lấy ngẫu nhiên từ nhóm chủ đề
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // Lấy ngẫu nhiên 1-2 chủ đề từ mỗi kịch bản được đề xuất
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // Lấy ngẫu nhiên 1-2 chủ đề
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // Sắp xếp ngẫu nhiên và giới hạn tổng số
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Lấy mô tả của lựa chọn hiện tại
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // Trì hoãn cuộn để đảm bảo DOM đã cập nhật
+  setTimeout(() => {
+    // Thử tìm bằng ID (hỗ trợ nhiều định dạng)
+    let element = document.querySelector(anchor)
+    
+    // Nếu không tìm thấy, thử định dạng ID khác
+    if (!element) {
+      // Thử bỏ tiền tố gạch dưới
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // Nếu vẫn không tìm thấy, tìm theo văn bản tiêu đề
+    if (!element) {
+      // Trích tên kịch bản từ anchor
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // Khớp chính xác hoặc khớp bao gồm
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // Làm nổi bật đoạn mục tiêu
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# Tham khảo cảm hứng cho kịch bản tiêu dùng B2C
+
+## Dẫn nhập chương
+
+<ChapterIntroduction :duration="duration" :tags="['Ứng dụng B2C', 'Lối sống', 'Trải nghiệm cảm xúc', 'Tạo bầu không khí']" coreOutput="Khám phá hơn 15 cảm hứng kịch bản đời sống" expectedOutput="Tìm hướng sản phẩm chạm tới người dùng">
+
+Tài liệu này tổng hợp <strong>các hướng ứng dụng sáng tạo của mô hình LLM trong kịch bản tiêu dùng B2C</strong>. Khác với sản phẩm B2B tập trung vào hiệu suất và điểm đau, sản phẩm B2C chú trọng hơn đến <strong>tạo cảm giác, gợi ý tâm lý và bầu không khí</strong>, để người dùng có cộng hưởng cảm xúc và trải nghiệm tốt đẹp trong quá trình sử dụng.
+
+</ChapterIntroduction>
+
+## Chọn nhanh bầu không khí kịch bản
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Tìm cảm hứng kịch bản chạm tới bạn</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Chọn bầu không khí bạn muốn và cảm giác hiện tại. Hệ thống sẽ đề xuất các hướng kịch bản liên quan; bấm vào thẻ để nhảy tới phần tương ứng.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="Chọn loại bầu không khí" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="Chọn cảm giác hiện tại" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      Kịch bản {{ currentSelection.vibe }} × {{ currentSelection.feeling }} được đề xuất cho bạn:
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      Chọn lại
+    </el-button>
+  </div>
+</el-card>
+
+---
+
+## 1. Lối sống
+
+> 💡 **Ý tưởng cốt lõi**: biến đời thường thành trải nghiệm có nghi thức, tạo cái đẹp trong từng chi tiết
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Trợ lý đánh thức bằng nghi thức buổi sáng | Tích hợp API thời tiết và dữ liệu lịch; LLM tạo kế hoạch buổi sáng cá nhân hóa; kết hợp loa thông minh phát nhạc riêng và đèn thông minh sáng dần |
+| 2 | Nhà tạo không khí cho người sống một mình | Kết nối thiết bị nhà thông minh (đèn, loa, máy khuếch tán hương); LLM tự điều chỉnh theo thời gian/tâm trạng; học sở thích người dùng để tối ưu liên tục |
+| 3 | Trình tạo kế hoạch chữa lành cuối tuần ở nhà | Kết nối API nền tảng streaming để lấy danh sách phim, kết hợp lịch sử sở thích để tạo combo phim + món ăn + bố trí không gian |
+| 4 | Đài phát thanh an ủi trước khi ngủ | Tạo câu chuyện dịu dàng bằng TTS, trộn white noise, giảm âm lượng thông minh; điều chỉnh nội dung theo dữ liệu giấc ngủ |
+| 5 | Bộ bắt cảm hứng thẩm mỹ đời sống | Dùng nhận diện hình ảnh phân tích ảnh môi trường của người dùng, LLM tạo gợi ý thẩm mỹ; đề xuất nội dung theo phong cách Pinterest/Xiaohongshu |
+
+---
+
+## 2. Đồng hành cảm xúc
+
+> 💡 **Ý tưởng cốt lõi**: tiếp nhận và đồng hành vô điều kiện, trở thành chiếc bình dịu dàng chứa cảm xúc
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Người lắng nghe tâm sự đêm khuya | Mã hóa đầu cuối bảo vệ quyền riêng tư; phân tích cảm xúc bằng LLM để hiểu tâm trạng; bộ nhớ dài hạn lưu câu chuyện người dùng và đồng hành qua nhiều lượt đối thoại |
+| 2 | Người đồng hành chữa lành sau chia tay | Thuật toán nhận diện giai đoạn cảm xúc, cung cấp hỗ trợ theo từng giai đoạn (tâm sự -> xả cảm xúc -> tái xây dựng); truy xuất RAG từ kho tri thức tâm lý học |
+| 3 | Huấn luyện viên thở giảm lo âu | Kết nối dữ liệu cảm biến sinh học (nhịp tim/hơi thở), giám sát mức lo âu theo thời gian thực; giọng nói hướng dẫn nhịp thở và thư giãn cơ tiến triển |
+| 4 | Cố vấn xây dựng lại tự tin | Khung đối thoại tâm lý học tích cực, ghi nhận và phản hồi các thành tựu nhỏ; kỹ thuật tái cấu trúc nhận thức giúp thay đổi tự thoại tiêu cực |
+| 5 | Diễn giải thông minh nhật ký cảm xúc | Mô hình NLP nhận diện cảm xúc, phân tích chuỗi thời gian để phát hiện quy luật tâm trạng; trực quan hóa bản đồ cảm xúc và cảnh báo dự đoán |
+
+---
+
+## 3. Giải trí thư giãn
+
+> 💡 **Ý tưởng cốt lõi**: tạo trải nghiệm nhập vai, để giải trí trở thành nơi tâm hồn nghỉ chân
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | DM nhập vai cho trò chơi suy luận | LLM tạo nhánh cốt truyện theo thời gian thực, tổng hợp giọng nói để đóng vai NPC, điều chỉnh độ khó và nhịp theo phản ứng người chơi; dựng cảnh AR/VR |
+| 2 | NPC có linh hồn trong game thế giới mở | Cơ sở dữ liệu bộ nhớ dài hạn lưu lịch sử tương tác của người chơi, LLM tạo hội thoại cá nhân hóa; tính toán cảm xúc giúp NPC có phản ứng cảm xúc thật |
+| 3 | Tạo nội dung podcast cá nhân hóa | Tạo nội dung riêng theo biểu đồ sở thích người dùng, TTS sao chép giọng người dùng thích; tương tác thời gian thực để trả lời câu hỏi người nghe |
+| 4 | Nhóm tạo không khí cho concert ảo | Render nhân vật ảo, tương tác bình luận thời gian thực, lightstick/đạo cụ cổ vũ ảo; âm thanh không gian tạo cảm giác hiện trường |
+| 5 | Bạn đồng sáng tạo tiểu thuyết tương tác | LLM tạo cốt truyện theo thời gian thực, lựa chọn người dùng ảnh hưởng hướng đi câu chuyện; thiết kế nhiều kết thúc và phát triển quan hệ nhân vật động |
+
+---
+
+## 4. Phát triển cá nhân
+
+> 💡 **Ý tưởng cốt lõi**: trưởng thành không phải khổ hạnh, mà là hành trình tự khám phá thú vị
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Người chứng kiến phát triển cá nhân | Trực quan hóa hành trình trưởng thành bằng timeline, tự động đánh dấu cột mốc; ảnh so sánh hiển thị "tôi ngày trước" và "tôi hiện tại" |
+| 2 | Huấn luyện viên game hóa thói quen | Cơ chế game hóa (điểm kinh nghiệm, cấp độ, huy hiệu), bảng xếp hạng xã hội, AI coach nhập vai như "cố vấn phiêu lưu" |
+| 3 | Ghép đôi bạn học kỹ năng | Thuật toán ghép đôi theo sở thích và mục tiêu học tập, cộng đồng nhóm học, cơ chế check-in giám sát lẫn nhau |
+| 4 | Người phát hiện niềm vui nhỏ mỗi ngày | Nhận diện hình ảnh để phát hiện khoảnh khắc đẹp trong đời sống, hướng dẫn gratitude journal, nhìn lại khoảnh khắc đẹp mỗi tuần |
+| 5 | Trình trải nghiệm mô phỏng cuộc đời | Cốt truyện nhiều nhánh mô phỏng kết quả của lựa chọn khác nhau, so sánh cuộc đời song song; trực quan hóa hệ quả quyết định |
+
+---
+
+## 5. Tương tác xã hội
+
+> 💡 **Ý tưởng cốt lõi**: làm giao tiếp trở nên nhẹ nhàng tự nhiên, tìm cách kết nối thoải mái
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Trình tạo chủ đề phá băng | Đề xuất chủ đề thông minh theo dịp và người tham gia, phân tích hội thoại thời gian thực để gợi ý nối tiếp; nhắc cứu nguy lúc ngượng |
+| 2 | Người tạo không khí caption mạng xã hội | Phân tích nội dung ảnh, LLM tạo caption nhiều phong cách (văn nghệ/hài hước/sâu lắng); đề xuất emoji và bố cục thông minh |
+| 3 | Nhà hoạch định không khí hẹn hò | Tạo kế hoạch hẹn hò theo sở thích hai bên, đề xuất nhà hàng/hoạt động, gợi ý chủ đề trò chuyện; nhắc thời tiết và giao thông thời gian thực |
+| 4 | Người khuấy động họp mặt từ xa | Thư viện game online, trình tạo hoạt động phá băng, vòng quay chủ đề; nền ảo và filter tăng không khí |
+| 5 | Trợ lý quản lý năng lượng xã hội | Đánh giá mức tiêu hao năng lượng sau hoạt động xã hội, gợi ý phục hồi (hoạt động một mình); lập kế hoạch lịch xã hội thông minh |
+
+---
+
+## 6. Biểu đạt sáng tạo
+
+> 💡 **Ý tưởng cốt lõi**: ai cũng có năng lực sáng tạo, chỉ cần được đánh thức
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Bộ sơ cứu khi cạn cảm hứng | Thuật toán liên tưởng liên lĩnh vực, tạo từ kích thích ngẫu nhiên, thư viện prompt sáng tạo; công cụ mở rộng ý tưởng dạng mind map |
+| 2 | Hướng dẫn khám phá phong cách cá nhân | Phân tích hình ảnh để nhận diện phong cách hiện có, đề xuất xu hướng phong cách, thử đồ/trang điểm ảo; timeline tiến hóa phong cách |
+| 3 | Cố vấn thẩm mỹ cho sổ tay và nhật ký | Đề xuất mẫu bố cục, tạo phối màu, gợi ý yếu tố trang trí; nhận dạng chữ viết tay và làm đẹp nội dung |
+| 4 | Hướng dẫn bố cục và không khí nhiếp ảnh | Nhận diện cảnh và gợi ý bố cục, đề xuất phong cách filter, tự điều chỉnh tham số chỉnh ảnh; lộ trình học kỹ thuật nhiếp ảnh |
+| 5 | Người ghép nhạc theo tâm trạng | Thuật toán phân tích cảm xúc âm nhạc, nhận diện tâm trạng người dùng, tạo playlist cá nhân hóa; giới thiệu câu chuyện và bối cảnh âm nhạc |
+
+---
+
+## 7. Khám phá du lịch
+
+> 💡 **Ý tưởng cốt lõi**: du lịch không chỉ là ngắm cảnh, mà còn là cảm nhận những lối sống khác nhau
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Hướng dẫn dạo phố khám phá | Tổng hợp nội dung từ người địa phương am hiểu, đề xuất địa điểm ít người biết, chỉ dẫn AR; dịch thời gian thực và thuyết minh giọng nói |
+| 2 | Tạo nhật ký tâm trạng du lịch | Tự phân loại và chọn ảnh, LLM tạo bài du ký đẹp, timeline gắn vị trí địa lý; tạo video du lịch một chạm |
+| 3 | Trợ lý đồng hành du lịch một mình | Chia sẻ vị trí và nhắc an toàn theo thời gian thực, liên hệ khẩn cấp địa phương, AI hướng dẫn viên đồng hành bằng giọng nói; cộng đồng người đi một mình |
+| 4 | Xem trước bầu không khí điểm đến | Xem trước VR/360°, mô phỏng âm thanh và mùi địa phương, giới thiệu bối cảnh văn hóa; trải nghiệm "ở thử" ảo |
+| 5 | Hướng dẫn không khí nhiếp ảnh du lịch | Nhắc golden hour, đường hỗ trợ bố cục, đề xuất điểm chụp đặc trưng địa phương; gợi ý phong cách chỉnh màu hậu kỳ |
+
+---
+
+## 8. Sức khỏe thân tâm
+
+> 💡 **Ý tưởng cốt lõi**: sức khỏe không phải mục tiêu, mà là một cách tự chăm sóc dịu dàng
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Người đánh thức động lực vận động | Đề xuất loại vận động thông minh theo trạng thái người dùng, lựa chọn micro workout 5 phút, thử thách vận động game hóa; check-in vận động xã hội |
+| 2 | Căn bếp cảm hứng ăn uống lành mạnh | Nhận diện nguyên liệu trong tủ lạnh, đề xuất công thức cá nhân hóa, phân tích phối hợp dinh dưỡng; hướng dẫn nấu ăn step-by-step |
+| 3 | Nhà tối ưu không khí chất lượng giấc ngủ | Phân tích dữ liệu theo dõi giấc ngủ, tạo nghi thức trước khi ngủ, gợi ý tối ưu môi trường (nhiệt độ/độ ẩm/ánh sáng); đánh thức thông minh |
+| 4 | Người hướng dẫn cảm nhận cơ thể | Hướng dẫn thiền quét cơ thể, liên kết bộ phận cơ thể với cảm xúc, bài tập kết nối thân tâm; trực quan hóa biofeedback |
+| 5 | Trợ lý nhắc tự chăm sóc | Theo dõi cường độ làm việc, nhắc nghỉ ngơi định kỳ, gợi ý hoạt động tự chăm sóc nhỏ (uống nước/giãn cơ/hít thở sâu); ghi chép tự chăm sóc |
+
+---
+
+## 9. Khám phá tri thức
+
+> 💡 **Ý tưởng cốt lõi**: học tập là cuộc phiêu lưu không có điểm dừng, tò mò là người thầy tốt nhất
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Hướng dẫn khám phá tri thức dạng game | Trực quan hóa bản đồ điểm kiến thức, lộ trình học theo màn chơi, hệ thống huy hiệu thành tựu; AI mentor nhập vai |
+| 2 | Bạn đồng hành học ngôn ngữ theo tình huống | LLM đóng vai nhiều nhân vật để hội thoại, sửa phát âm, giới thiệu bối cảnh văn hóa; mô phỏng tình huống nhập vai |
+| 3 | Trợ lý thỏa mãn tò mò | Kết nối Wikipedia/knowledge graph, giải thích khái niệm phức tạp theo cách dễ hiểu, đề xuất kiến thức liên quan; ghi lại tò mò |
+| 4 | Kích hoạt cảm hứng ghi chú đọc sách | Phân tích nội dung sách, trích xuất và liên kết quan điểm, đề xuất góc suy nghĩ; mẫu ghi chú đọc sách và làm đẹp |
+| 5 | Tạo không khí chia sẻ kiến thức | Tự tạo thẻ kiến thức, tối ưu copy chia sẻ, làm đẹp thị giác; phản hồi dữ liệu chia sẻ xã hội |
+
+---
+
+## 10. Nuôi dưỡng quan hệ
+
+> 💡 **Ý tưởng cốt lõi**: quan hệ tốt cần được chăm chút, nhưng chăm chút không cần quá phức tạp
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Huấn luyện viên giao tiếp trong quan hệ thân mật | Tạo mẫu biểu đạt cảm xúc, hướng dẫn kỹ năng giao tiếp phi bạo lực, câu nói hóa giải xung đột; đánh giá sức khỏe quan hệ |
+| 2 | Trợ lý nhắc quan tâm gia đình | Nhắc ngày quan trọng (sinh nhật/kỷ niệm), gợi ý lời quan tâm, đề xuất hoạt động gia đình; tạo album gia đình |
+| 3 | Người tạo không khí duy trì tình bạn | Ghi lại tương tác với bạn bè, đề xuất chủ đề chung, tổ chức họp mặt từ xa; tạo timeline tình bạn và ký ức |
+| 4 | Nhà hoạch định tỏ tình và bất ngờ | Tạo phương án bất ngờ cá nhân hóa, đề xuất quà tặng, gợi ý lời nói lãng mạn; lịch thực hiện và nhắc nhở |
+| 5 | Hướng dẫn làm dịu xung đột | Câu nói hạ nhiệt cảm xúc, hướng dẫn đổi góc nhìn, gợi ý bước hòa giải; theo dõi quá trình sửa chữa quan hệ |
+
+---
+
+## 11. Đồng hành thú cưng
+
+> 💡 **Ý tưởng cốt lõi**: thú cưng là gia đình, sự đồng hành của chúng đáng được ghi lại và trân trọng
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Nhật ký nhân hóa thú cưng | Phân tích hành vi thú cưng, tạo nhật ký ngôi thứ nhất, tự ghép ảnh; "vòng bạn bè" của thú cưng |
+| 2 | Người giải mã hành vi thú cưng | Phân tích video hành vi thú cưng, cảnh báo sức khỏe, gợi ý huấn luyện; kho tri thức đặc tính giống loài |
+| 3 | Nhà hoạch định thời gian bên thú cưng | Đề xuất hoạt động cho thú cưng, hướng dẫn DIY đồ chơi, gợi ý địa điểm thân thiện với thú cưng; ghép đôi xã hội cho thú cưng |
+| 4 | Tạo câu chuyện kỷ niệm thú cưng | Chọn ảnh và video, tạo câu chuyện theo timeline, phối nhạc; tự tạo album/video kỷ niệm |
+| 5 | Hướng dẫn yên tâm cho người mới nuôi thú cưng | Hướng dẫn chăm sóc theo giai đoạn, trả lời câu hỏi thường gặp, xử lý tình huống khẩn cấp; hỗ trợ cộng đồng người mới |
+
+---
+
+## 12. Sức khỏe tài chính
+
+> 💡 **Ý tưởng cốt lõi**: tự do tài chính không phải mục tiêu duy nhất, sức khỏe tài chính mới là điều cần giữ
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Trợ lý nhận biết cảm xúc tiêu dùng | Phân tích ghi chép tiêu dùng, phân tích liên hệ cảm xúc-tiêu dùng, cảnh báo mua sắm bốc đồng; gợi ý thỏa mãn thay thế |
+| 2 | Động lực trực quan hóa mục tiêu tiết kiệm | Trực quan hóa tiến độ mục tiêu, render bối cảnh giấc mơ, ăn mừng cột mốc; trò chơi xây dựng thói quen tiết kiệm |
+| 3 | Học tài chính cá nhân nhẹ nhàng | Đẩy kiến thức dạng mảnh nhỏ, dạy bằng tình huống và case, hỏi đáp tương tác; kiểm tra kiến thức và chứng nhận |
+| 4 | Người làm dịu lo âu tài chính | Đánh giá sức khỏe tình trạng tài chính, kỹ thuật quản lý áp lực, kế hoạch hành động từng bước nhỏ; tư vấn tâm lý tài chính |
+| 5 | Trò chơi trải nghiệm đầu tư nhỏ | Mô phỏng đầu tư ảo, giáo dục rủi ro, trò chơi danh mục đầu tư; hướng dẫn đầu tư nhỏ thật |
+
+---
+
+## 13. Phát triển nghề nghiệp
+
+> 💡 **Ý tưởng cốt lõi**: nghề nghiệp không phải đường ray cố định, mà là vùng đất rộng có thể khám phá
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Người đồng hành khi mơ hồ nghề nghiệp | Đánh giá hứng thú nghề nghiệp, kiểm kê năng lực, đề xuất thông tin ngành; đối thoại với cố vấn nghề nghiệp |
+| 2 | Người đánh thức cảm giác thành tựu công việc | Ghi lại kết quả công việc, chắt lọc giá trị, trực quan hóa thành tựu; thu thập phản hồi tích cực từ đồng nghiệp/khách hàng |
+| 3 | Trợ lý không khí xã giao nơi làm việc | Đề xuất chủ đề công sở, kỹ năng networking, sự kiện ngành; tối ưu nội dung LinkedIn |
+| 4 | Bộ kích hoạt cảm hứng nghề phụ | Ghép kỹ năng-sở thích-nhu cầu thị trường, thư viện case nghề phụ, hướng dẫn khởi động; cộng đồng nghề phụ |
+| 5 | Trạm tiếp sức tự tin trước phỏng vấn | Phỏng vấn mô phỏng, chuẩn bị câu hỏi thường gặp, kỹ thuật tăng tự tin; gợi ý hình ảnh cá nhân |
+
+---
+
+## 14. Không gian nhà ở
+
+> 💡 **Ý tưởng cốt lõi**: nhà không chỉ là nơi ở, mà còn là nơi tâm hồn nghỉ ngơi
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Nhà thiết kế không khí không gian nhà ở | Phân tích ảnh không gian, đề xuất phong cách, gợi ý nội thất/trang trí; xem trước hiệu quả bằng AR |
+| 2 | Hướng dẫn thay đổi nhà cửa bốn mùa | Đề xuất chủ đề theo mùa, gợi ý lưu trữ và trưng bày, phương án trang trí ngày lễ; tạo danh sách mua sắm |
+| 3 | Phép màu cho căn hộ nhỏ | Thuật toán tối ưu không gian, đề xuất đồ nội thất đa năng, mẹo lưu trữ; kỹ thuật mở rộng thị giác |
+| 4 | Người tạo nghi thức tại nhà | Thiết kế nghi thức hằng ngày (sáng/tối/cuối tuần), nhắc thực hiện nghi thức; phản hồi hiệu quả nghi thức |
+| 5 | Đồng hành tâm lý khi declutter | Đánh giá giá trị cảm xúc của đồ vật, hướng dẫn từng bước declutter, hỗ trợ tâm lý; đề xuất kênh quyên góp/tái chế |
+
+---
+
+## 15. Ẩm thực nấu nướng
+
+> 💡 **Ý tưởng cốt lõi**: thức ăn là ngôn ngữ của tình yêu, nấu nướng là cách biểu đạt tình yêu
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Món ăn chữa lành cho một người | Nhận diện nguyên liệu trong tủ lạnh, đề xuất công thức đơn giản, hướng dẫn step-by-step; thẩm mỹ bày món cho một người |
+| 2 | Thiết kế không khí bàn ăn ngày lễ | Thực đơn chủ đề ngày lễ, phương án bày bàn, kỹ thuật tạo bầu không khí; tối ưu trải nghiệm khách mời |
+| 3 | Người ghép món ăn theo tâm trạng | Thuật toán liên hệ tâm trạng-thức ăn, công thức điều tiết cảm xúc, đề xuất comfort food; hướng dẫn chữa lành bằng nấu ăn |
+| 4 | Xây dựng tự tin cho người mới vào bếp | Công thức siêu đơn giản, mẹo cứu lỗi, lời động viên xây dựng tự tin; tăng độ khó dần dần |
+| 5 | Hướng dẫn không khí chụp ảnh món ăn | Gợi ý bày món, tận dụng ánh sáng tự nhiên, hướng dẫn góc chụp; gợi ý filter và hậu kỳ |
+
+---
+
+## 16. Phong cách ăn mặc
+
+> 💡 **Ý tưởng cốt lõi**: ăn mặc là tự biểu đạt, phong cách là phần bên trong hiện ra bên ngoài
+
+| STT | Tên kịch bản ứng dụng | Chức năng kịch bản ứng dụng |
+| :--: | ------------ | ------------ |
+| 1 | Moodboard trang phục hôm nay | Đề xuất tổng hợp theo thời tiết/dịp/tâm trạng, thử đồ ảo, cảm hứng phối đồ; quản lý tủ đồ |
+| 2 | Stylist tủ đồ capsule | Kiểm kê tủ đồ, tổ hợp phối từng món, nhiều cách mặc một món; gợi ý mua sắm để lấp khoảng trống |
+| 3 | Hành trình khám phá phong cách cá nhân | Trắc nghiệm phong cách, đề xuất icon tham khảo, lộ trình tiến hóa phong cách; xây dựng tự tin |
+| 4 | Nhà sáng tạo phối mới đồ cũ | Cảm hứng cải tạo đồ cũ, cách phối mới, kỹ thuật nhấn bằng phụ kiện; triết lý thời trang bền vững |
+| 5 | Cố vấn tạo hình dịp đặc biệt | Giải thích dress code theo dịp, tạo phương án tạo hình, gợi ý trang điểm và tóc; phối hợp tổng thể |
+
+---
+
+## Tâm pháp cốt lõi khi thiết kế sản phẩm B2C
+
+### 1. Từ "chức năng" đến "cảm giác"
+
+Sản phẩm B2B quan tâm "chức năng này giải quyết vấn đề gì", còn sản phẩm B2C quan tâm "chức năng này mang lại cảm giác gì".
+
+| Tư duy B2B | Tư duy B2C |
+|---------|---------|
+| Nâng cao hiệu suất | Tiết kiệm thời gian để làm việc mình thích |
+| Giảm chi phí | Khiến từng đồng chi ra đều đáng giá |
+| Giải quyết điểm đau | Tạo trải nghiệm tốt đẹp |
+| Chức năng đầy đủ | Cảm giác đúng chỗ |
+
+### 2. Ba tầng tạo bầu không khí
+
+**Tầng giác quan**: thiết kế thị giác, thính giác và xúc giác
+- Màu sắc ấm áp
+- Âm thanh thư giãn
+- Hiệu ứng chuyển động mượt mà
+
+**Tầng cảm xúc**: cộng hưởng và dẫn dắt cảm xúc
+- Hiểu tâm trạng người dùng
+- Cung cấp hỗ trợ cảm xúc
+- Tạo cảm xúc tích cực
+
+**Tầng ý nghĩa**: sự công nhận giá trị và cảm giác thuộc về
+- Khiến người dùng cảm thấy được thấu hiểu
+- Tạo cảm giác thuộc về
+- Trao ý nghĩa cho hành động
+
+### 3. Sức mạnh của gợi ý tâm lý
+
+Copy và thiết kế của sản phẩm B2C đều đang truyền tải gợi ý tâm lý:
+
+- **Gợi ý tích cực**: "Bạn đã làm rất tốt rồi", "Cứ từ từ, không sao cả"
+- **Gợi ý thuộc về**: "Nhiều người cũng giống bạn", "Bạn không cô đơn"
+- **Gợi ý trưởng thành**: "Mỗi lần thử đều là tiến bộ", "Bạn đang trở nên tốt hơn"
+
+### 4. Giúp người dùng trở thành phiên bản tốt hơn của chính họ
+
+Sản phẩm B2C tốt nhất không phải là thay đổi người dùng, mà là giúp họ trở thành con người họ muốn trở thành.
+
+- Không phải "bạn nên...", mà là "bạn có thể..."
+- Không phải "bạn phải...", mà là "nếu bạn muốn..."
+- Không phải "bạn vẫn chưa đủ...", mà là "bạn đã..."
+
+---
+
+> 🌟 **Hãy nhớ**: người dùng B2C mua không phải chức năng, mà là cảm giác; không phải công cụ, mà là sự đồng hành; không phải dịch vụ, mà là sự thấu hiểu.
diff --git a/docs/vi-vn/stage-1/appendix-consumer-scenarios/index.md b/docs/vi-vn/stage-1/appendix-consumer-scenarios/index.md
new file mode 100644
index 0000000..de1181b
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-consumer-scenarios/index.md
@@ -0,0 +1,10 @@
+---
+title: 'Tham khảo kịch bản sản phẩm AI cho người tiêu dùng'
+description: 'Trang tương thích đường dẫn cũ cho tài liệu tham khảo kịch bản sản phẩm AI hướng tới người tiêu dùng.'
+---
+
+# Tham khảo kịch bản sản phẩm AI cho người tiêu dùng
+
+Trang này được giữ để tương thích với đường dẫn cũ. Trong Stage 1 tiếng Việt, vui lòng dùng tài liệu dưới đây làm bản chuẩn.
+
+[Chuyển tới tài liệu tham khảo kịch bản tiêu dùng B2C](/vi-vn/stage-1/appendix-c-consumer-scenarios/)
diff --git a/docs/vi-vn/stage-1/appendix-double-diamond/index.md b/docs/vi-vn/stage-1/appendix-double-diamond/index.md
new file mode 100644
index 0000000..4d76b7e
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-double-diamond/index.md
@@ -0,0 +1,544 @@
+---
+title: 'Mô hình Double Diamond：Làm đúng việc trước, làm đúng cách sau'
+description: 'Bài viết Double Diamond dành cho người mới. Hiểu 4 giai đoạn Discover, Define, Develop, Deliver, tránh bắt tay vào làm nguyên mẫu khi chưa hiểu rõ vấn đề.'
+---
+
+<script setup>
+const duration = 'Khoảng <strong>1.5 giờ</strong>'
+</script>
+
+# Mô hình Double Diamond：Làm đúng việc trước, làm đúng cách sau
+
+<a id="top-dd"></a>
+
+## Hướng dẫn chương này
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Double Diamond', 'Tư duy thiết kế', 'Phân tích nhu cầu', 'Thiết kế giải pháp']"
+  coreOutput="1 định nghĩa vấn đề rõ ràng hơn và 1 điểm vào xác minh hợp lý hơn"
+  expectedOutput="Không còn vội vàng vẽ nguyên mẫu ngay từ đầu, mà biết nghĩ rõ vấn đề trước, rồi mới so sánh giải pháp"
+>
+
+Rất nhiều người lần đầu làm sản phẩm, cạm bẫy dễ rơi nhất không phải "không đủ nỗ lực", mà là bước vào giải pháp quá nhanh.
+
+Trong đầu vừa nảy ra một hướng, đã bắt đầu nghĩ trang vẽ thế nào, nút đặt ở đâu, có nên kết nối AI không, có nên làm đăng nhập đăng ký không, nguyên mẫu dùng công cụ gì vẽ. Bận rộn một hồi, mới phát hiện vấn đề cơ bản nhất chưa nghĩ rõ: Người dùng có thực sự có điểm đau này không? Vấn đề này có đáng giải quyết bây giờ không? Bạn tưởng mình đang thúc đẩy dự án, thực ra chỉ đang tăng tốc rất chăm chỉ trên sai hướng.
+
+Mô hình Double Diamond (Kim cương kép) là để tránh tình huống này.
+
+Lời nhắc có giá trị nhất của nó là: **"Làm đúng việc" và "Làm đúng cách", là hai giai đoạn hoàn toàn khác nhau.** Nếu bạn chưa hiểu rõ vấn đề, đã vội vàng làm nguyên mẫu, thường chỉ sẽ hoàn thiện hơn trên sai hướng.
+
+</ChapterIntroduction>
+
+::: info SOP tối thiểu
+**Mục đích**: Sau khi đọc xong, bạn sẽ rõ hơn khi làm sản phẩm lúc nào nên nghĩ vấn đề trước, lúc nào mới nên bắt đầu nghĩ giải pháp và nguyên mẫu, tránh vừa lên đã làm rất nghiêm túc trên sai hướng.
+
+**Hành động**: Theo 4 bước `Discover → Define → Develop → Deliver` đi xuống, mỗi bước chỉ làm việc nên làm ở giai đoạn hiện tại.
+
+**Kết quả**: Bạn sẽ có một định nghĩa vấn đề rõ ràng hơn, vài giải pháp có thể so sánh, và một phiên bản tối thiểu có thể xác minh.
+
+**Từ khóa chuyển nhanh**: [Double Diamond là gì](#dd-what) · [Kim cương đầu tiên](#dd-first) · [AI giúp bạn thế nào](#dd-ai)
+:::
+
+## Bạn sẽ học được những nội dung sau
+
+1. Mô hình Double Diamond là gì, tại sao nó phù hợp cho người mới làm sản phẩm
+2. Bốn giai đoạn Discover, Define, Develop, Deliver lần lượt đang làm gì
+3. Làm thế nào phân biệt "bây giờ nên tiếp tục phân tán" hay "bây giờ nên bắt đầu tập trung"
+4. Cách dùng mô hình Double Diamond trong sản phẩm AI, thiết kế nguyên mẫu và xác minh nhu cầu
+
+<a id="dd-what"></a>
+## [1. Mô hình Double Diamond thực chất là gì](#top-dd)
+
+Mô hình Double Diamond là một quy trình thiết kế kinh điển do **Design Council** Anh quốc phổ biến. Nó vẽ một quy trình thiết kế và đổi mới hoàn chỉnh thành hai hình kim cương liên tiếp.
+
+Lý do là "kim cương", là vì mỗi kim cương đều bao gồm hai động tác trái ngược nhưng đều quan trọng:
+
+- **Phân tán**: Trước mở rộng tầm nhìn, xem nhiều khả năng hơn
+- **Tập trung**: Rồi thu hẹp phạm vi, đưa ra đánh giá và lựa chọn
+
+Toàn bộ quá trình gồm 4 bước:
+
+1. **Discover**: Hiểu rộng về người dùng, vấn đề, môi trường và thị trường
+2. **Define**: Từ lượng lớn thông tin, tinh lọc ra vấn đề cốt lõi thực sự đáng giải quyết
+3. **Develop**: Phân tán nhiều giải pháp xoay quanh vấn đề cốt lõi
+4. **Deliver**: Sàng lọc, nguyên mẫu, kiểm thử và giao phó giải pháp phù hợp hơn
+
+Nếu nén 4 bước này thành một câu dễ nhớ nhất, thì là:
+
+- **Kim cương đầu tiên**: Trước làm rõ phải giải quyết vấn đề gì
+- **Kim cương thứ hai**: Rồi quyết định dùng giải pháp gì để giải quyết nó
+
+Cũng chính là câu bạn nói rất chính xác:
+
+- **Kim cương đầu tiên: Làm đúng việc**
+- **Kim cương thứ hai: Làm đúng cách**
+
+## 2. Tại sao mô hình Double Diamond đặc biệt phù hợp cho người mới
+
+Nhịp điệu phổ biến nhất khi người mới làm sản phẩm, thường là như thế này:
+
+- Nghĩ ra một ý tưởng
+- Thấy hướng này rất ngầu
+- Ngay lập tức bắt đầu vẽ nguyên mẫu
+- Làm làm thấy chức năng ngày càng nhiều
+- Cuối cùng không biết mình đang giải quyết vấn đề gì
+
+Giá trị của mô hình Double Diamond, không phải làm cho quy trình phức tạp, mà là **ép bạn tách "hiểu vấn đề" và "thiết kế giải pháp" ra**.
+
+Điều này nghe rất bình thường, nhưng thực tế rất quan trọng. Vì rất nhiều sản phẩm thất bại, không phải thực hiện không nghiêm túc, mà là:
+
+- Chọn sai vấn đề
+- Hiểu sai người dùng
+- Khóa giải pháp quá sớm
+- Dành nhiều thời gian mài giũa chi tiết, lại không xác minh hướng đi
+
+Mô hình Double Diamond chính là không ngừng nhắc bạn:
+
+- Đừng vì ý tưởng thuận tay, thì mặc nhiên vấn đề đã thành lập
+- Đừng vì giải pháp có thể làm ra, thì mặc nhiên nó đáng làm
+- Đừng vì nguyên mẫu trông hoàn chỉnh, thì mặc nhiên người dùng thực sự cần
+
+<a id="dd-first"></a>
+## [3. Kim cương đầu tiên: Làm đúng việc](#top-dd)
+
+Kim cương đầu tiên tập trung vào **bản thân vấn đề**, chứ không phải giải pháp.
+
+Bạn có thể hiểu nó thành một câu: **Trước đừng vội làm, trước làm rõ có đáng làm hay không.**
+
+### 3.1 Discover: Trước mở rộng không gian vấn đề
+
+Nhiệm vụ cốt lõi của giai đoạn Discover, là **nghiên cứu rộng, chứ không phải nhanh chóng kết luận**.
+
+Bước này thường làm những việc bao gồm:
+
+- Xem người dùng làm thế nào trong kịch bản thực tế
+- Phỏng vấn người dùng tiềm năng, hiểu lần gần nhất họ gặp vấn đề là khi nào
+- Quan sát họ hiện đang khắc phục tạm thế nào
+- Xem sản phẩm cạnh tranh và giải pháp thay thế đang xử lý thế nào
+- Thu thập thông tin thị trường, quy trình, ràng buộc, upstream và downstream
+
+Rất nhiều người sẽ nhầm tưởng Discover là "xem thêm tài liệu". Thực ra then chốt hơn là: **Bạn cần hiểu con người và kịch bản, chứ không chỉ tìm một đống thông tin.**
+
+Ví dụ bạn muốn làm một công cụ "AI giúp sắp xếp biên bản cuộc họp", ở giai đoạn Discover nên quan tâm hơn là:
+
+- Người dùng sau cuộc họp rốt cuộc đau nhất ở đâu
+- Là ghi chép khó, hay sắp xếp khó, hay đồng bộ khó
+- Hiện họ tự viết, nhờ thực tập sinh viết, nghe lại ghi âm, hay đơn giản không sắp xếp
+- Kịch bản cuộc họp nào cần biên bản nhất, kịch bản nào căn bản không cần
+
+Mục tiêu quan trọng nhất của bước này không phải được câu trả lời, mà là **đừng quá sớm tưởng mình đã biết câu trả lời.**
+
+### 3.2 Define: Từ một đống thông tin tinh lọc ra vấn đề cốt lõi
+
+Nếu Discover là mở rộng tầm nhìn, thì Define là bắt đầu thu hẹp.
+
+Những gì Define cần làm, không phải giữ lại tất cả quan sát, mà là hỏi:
+
+- Vấn đề thực sự đáng ưu tiên giải quyết là cái nào
+- Vấn đề nào thường xuất hiện nhất, đau nhất, có giá trị nhất
+- Phiên bản đầu tiên của chúng ta thực sự chỉ tập trung vào kịch bản nào
+
+Cốt lõi của bước này, là thu một chủ đề rộng thành một định nghĩa vấn đề rõ ràng.
+
+Ví dụ ban đầu bạn nói:
+
+> Tôi muốn làm một công cụ AI nâng cao hiệu quả họp.
+
+Đến giai đoạn Define, cách diễn đạt tốt hơn có thể trở thành:
+
+> Chúng ta giải quyết trước vấn đề: sau cuộc họp điều phối 30 đến 60 phút của nhóm dự án, không thể xuất biên bản kèm việc cần làm, người phụ trách và thời hạn trong 10 phút.
+
+Lúc này vấn đề bắt đầu rõ hơn:
+
+- Người dùng là ai
+- Kịch bản là gì
+- Điểm nghẽn là gì
+- Tiêu chuẩn thành công là gì
+
+Bản chất của Define, là **từ "nhiều vấn đề" tập trung về "lần này giải quyết vấn đề nào trước".**
+
+## 4. Kim cương thứ hai: Làm đúng cách
+
+Khi bạn hoàn thành kim cương đầu tiên, mới thực sự phù hợp để bước vào kim cương thứ hai. Vì lúc này bạn giải quyết không phải một hướng mơ hồ, mà là một vấn đề cụ thể đã được tập trung.
+
+### 4.1 Develop: Phân tán giải pháp xoay quanh vấn đề cốt lõi
+
+Trọng tâm giai đoạn Develop, là **xoay quanh cùng một vấn đề, khám phá nhiều giải pháp khả thi.**
+
+Lưu ý, phân tán ở đây và giai đoạn Discover không giống nhau.
+
+- Phân tán của Discover, đang khám phá không gian vấn đề
+- Phân tán của Develop, đang khám phá không gian giải pháp
+
+Ví dụ vẫn là biên bản cuộc họp, đến giai đoạn Develop, bạn có thể bắt đầu nghĩ:
+
+- Làm công cụ web, hay plugin cuộc họp
+- Là upload ghi âm rồi xử lý, hay ghi nhận thời gian thực
+- Chỉ làm tóm tắt, hay tập trung trích xuất việc cần làm
+- Nhấn mạnh hiệu quả cá nhân, hay nhấn mạnh đồng bộ nhóm
+- Cho người dùng tự do chỉnh sửa, hay trực tiếp xuất template có cấu trúc
+
+Bước này rất phù hợp brainstorm, cũng rất phù hợp cùng nhóm kéo giải pháp ra.
+
+Nhưng ở đây có một tiền đề: **Tất cả giải pháp đều phải phục vụ cùng một vấn đề đã được định nghĩa.**
+Nếu vấn đề chưa được định nghĩa rõ, Develop rất dễ lại trở thành chức năng bay tứ tung.
+
+### 4.2 Deliver: Chọn giải pháp, làm nguyên mẫu, kiểm thử và giao phó
+
+Giai đoạn Deliver là giai đoạn tập trung trong kim cương thứ hai.
+
+Lúc này bạn cần làm không phải tiếp tục nghĩ nhiều hơn, mà bắt đầu đánh giá:
+
+- Giải pháp nào phù hợp nhất với giai đoạn hiện tại
+- Phiên bản nào nhỏ nhất nhưng hữu dụng nhất
+- Chức năng nào phải làm trước, chức năng nào có thể làm sau
+- Làm nguyên mẫu, kiểm thử và xác minh quy mô nhỏ thế nào
+
+Rất nhiều người tưởng Deliver đồng nghĩa với "lên mạng". Thực ra ý nghĩa chính xác hơn của nó là: **Biến một giải pháp thành thứ có thể kiểm thử, có thể xác minh, có thể lặp lại.**
+
+Nó có thể là:
+
+- Một flowchart độ fidelity thấp
+- Một nguyên mẫu Figma
+- Một MVP có thể chạy
+- Một lần kiểm thử người dùng quy mô nhỏ
+- Một phiên bản lặp lại sau phản hồi thực tế
+
+Trọng tâm của Deliver không phải "giao phó hoàn hảo", mà là **càng sớm càng tốt đặt giải pháp vào môi trường thực tế để xác minh.**
+
+## 5. Một bảng đối chiếu dễ nhớ nhất
+
+Nếu bạn luôn không phân biệt được bốn giai đoạn, có thể trực tiếp ghi phiên bản dưới đây:
+
+| Giai đoạn | Bạn đang làm gì | Từ khóa | Sản xuất phổ biến |
+| --- | --- | --- | --- |
+| Discover | Hiểu vấn đề | Nghiên cứu, quan sát, phỏng vấn, thu thập thông tin | Insight người dùng, ghi chú kịch bản, danh sách vấn đề |
+| Define | Định nghĩa vấn đề | Tinh lọc, tập trung, lựa chọn, viết lại vấn đề | Định nghĩa vấn đề, ưu tiên, điểm vào MVP |
+| Develop | Khám phá giải pháp | Brainstorm, so sánh, đồng sáng tạo, hình dung nguyên mẫu | Danh sách giải pháp, sketch flowchart, hướng nguyên mẫu |
+| Deliver | Xác minh giải pháp | Nguyên mẫu, kiểm thử, lặp lại, giao phó | Nguyên mẫu, phản hồi kiểm thử, phiên bản tối ưu |
+
+Nén thêm một chút, thì là:
+
+- **Discover / Define**: Giải quyết "làm đúng việc"
+- **Develop / Deliver**: Giải quyết "làm đúng cách"
+
+## 6. Sai lầm phổ biến nhất với mô hình Double Diamond
+
+### 6.1 Chưa Discover, đã trực tiếp Deliver
+
+Đây là loại phổ biến nhất. Rất nhiều người vừa có ý tưởng đã vẽ nguyên mẫu, viết PRD, kết nối mô hình, làm trang.
+
+Vấn đề không phải bạn làm không nghiêm túc, mà có thể bạn căn bản chưa xác nhận vấn đề có đáng giải quyết hay không.
+
+### 6.2 Discover rất lâu, nhưng luôn không Define
+
+Một cực đoan khác là luôn nghiên cứu, luôn xem tài liệu, luôn phỏng vấn, lại luôn không dám tập trung.
+
+Double Diamond không phải để bạn phân tán vô hạn, mà nhắc bạn: Sau khi phân tán phải bước vào đánh giá và lựa chọn.
+
+### 6.3 Sau khi Define, lại lén sửa vấn đề
+
+Rất nhiều nhóm sẽ ở giai đoạn Develop vì một giải pháp dễ làm hơn, nên ngược lại sửa định nghĩa vấn đề, cho nó phù hợp với giải pháp hiện có.
+
+Điều này rất nguy hiểm. Vì có thể bạn không đang giải quyết vấn đề, mà đang tìm lý do cho giải pháp bạn thích.
+
+### 6.4 Hiểu sai Deliver thành "lên mạng đại toàn"
+
+Deliver không phải nói phải làm xong sản phẩm hoàn chỉnh mới tính kết thúc. Rất nhiều lúc, một nguyên mẫu có thể kiểm thử, một vòng dùng thử người dùng thực tế, đã là một deliver rất tốt.
+
+## 7. Trong sản phẩm AI, dùng mô hình Double Diamond thế nào
+
+Sản phẩm AI đặc biệt dễ rơi vào bẫy "khả năng đi trước", vì khả năng mô hình trông quá hấp dẫn. Bạn sẽ rất muốn trực tiếp đi nghĩ:
+
+- Có nên kết nối đa mô thức không
+- Có nên làm Agent không
+- Có nên thêm workflow không
+- Có nên kết nối giọng nói, hình ảnh, tìm kiếm mạng không
+
+Nhưng mô hình Double Diamond sẽ ép bạn hỏi trước:
+
+- Người dùng rốt cuộc bị kẹt ở khâu nào
+- Điểm nghẽn này có phải bắt buộc dùng AI không
+- Nếu không dùng AI, phương pháp hiện tại rốt cuộc kém nhất ở đâu
+- Sau khi thêm AI vào, tiến triển cốt lõi nhất là gì
+
+Điều này giúp bạn tránh một tình huống phổ biến: **Khả năng rất mạnh, giá trị rất yếu.**
+
+Một trình tự thực dụng là:
+
+1. Ở giai đoạn Discover quan sát người dùng hiện đang xử lý nhiệm vụ thế nào
+2. Ở giai đoạn Define viết một kịch bản đau nhất thành một định nghĩa vấn đề rõ ràng
+3. Ở giai đoạn Develop rồi đi so sánh khả năng AI nào phù hợp nhất phục vụ vấn đề này
+4. Ở giai đoạn Deliver làm một phiên bản tối thiểu, để người dùng thực tế kiểm thử
+
+## 8. Template Double Diamond có thể áp dụng trực tiếp
+
+Nếu bạn đang làm sản phẩm của mình, có thể trước viết theo trình tự dưới đây:
+
+### Discover
+
+- Người dùng tôi quan sát là ai?
+- Lần gần nhất họ gặp vấn đề này là khi nào?
+- Hiện họ giải quyết thế nào?
+- Nơi họ phiền nhất, chậm nhất, không yên tâm nhất là gì?
+
+### Define
+
+- Trong đống vấn đề này, cái nào đáng ưu tiên giải quyết nhất?
+- Kịch bản nào tần suất cao nhất, hoặc quan trọng nhất?
+- Phiên bản đầu tiên của chúng ta phục vụ ai trước, giải quyết cái gì trước?
+- Sau khi giải quyết thành công, trạng thái người dùng sẽ thay đổi thế nào?
+
+### Develop
+
+- Đối với vấn đề này, có những giải pháp khả thi nào?
+- Giải pháp nào nhẹ nhất, nhanh nhất, dễ xác minh nhất?
+- Cái nào phải làm, cái nào làm sau?
+
+### Deliver
+
+- Chúng ta nhỏ nhất có thể giao phó gì để xác minh hướng này?
+- Là flowchart, nguyên mẫu, hay MVP?
+- Cần tìm ai kiểm thử?
+- Sau khi kiểm thử đánh giá thế nào: tiếp tục, sửa đổi hay dừng lại?
+
+## 9. Một ví dụ người mới cũng có thể hiểu
+
+Giả sử bạn muốn làm một công cụ AI "giúp sinh viên chuẩn bị CV xin việc".
+
+Rất nhiều người vừa bắt đầu sẽ trực tiếp bước vào kim cương thứ hai, bắt đầu nghĩ:
+
+- Có nên làm làm đẹp một lần không
+- Có nên sửa viết thông minh không
+- Có nên tự động khớp JD không
+- Có nên tạo tự giới thiệu không
+
+Nhưng theo mô hình Double Diamond, quá trình tốt hơn sẽ là như thế này:
+
+### Kim cương đầu tiên
+
+**Discover**
+
+- Đi hỏi sinh viên năm cuối lần gần nhất sửa CV là khi nào
+- Xem họ sửa từ CV cũ thành phiên bản mới thế nào
+- Hiểu họ phiền nhất là "không biết viết", "không biết sửa", hay "không biết đánh giá tốt chưa"
+
+**Define**
+
+- Cuối cùng tập trung thành một vấn đề cụ thể hơn:
+- Không phải "sinh viên không biết làm CV"
+- Mà là "sinh viên lần đầu nộp thực tập, rất khó sửa kinh nghiệm hiện có thành diễn đạt phù hợp với vị trí, do đó trì hoãn nộp hồ sơ"
+
+### Kim cương thứ hai
+
+**Develop**
+
+- Nghĩ vài giải pháp: Thư viện template, AI sửa viết, đối chiếu vị trí, đánh giá CV, tham khảo case
+
+**Deliver**
+
+- Phiên bản đầu tiên chỉ làm "sửa viết bullet points kinh nghiệm dựa trên mô tả vị trí"
+- Cho 5 sinh viên dùng thử, xem họ có nộp nhanh hơn CV phiên bản đầu tiên không
+
+Bạn sẽ phát hiện, một khi kim cương đầu tiên làm vững, kim cương thứ hai sẽ rõ ràng hơn nhiều.
+
+## 10. Tóm tắt
+
+Điểm mạnh nhất của mô hình Double Diamond, là nó giúp bạn chia một đống hỗn loạn thành bốn động tác rõ ràng hơn:
+
+- Trước phân tán hiểu vấn đề
+- Rồi tập trung định nghĩa vấn đề
+- Rồi phân tán khám phá giải pháp
+- Cuối cùng tập trung giao phó giải pháp
+
+Nó không phải làm bạn chậm lại, mà giúp bạn **đi ít hơn rất nhiều con đường tưởng bận rộn nhưng thực ra sai hướng.**
+
+Đặc biệt trong thời đại AI, làm ra thứ ngày càng nhanh, mô hình Double Diamond lại càng quan trọng hơn. Vì khi "làm ra" ngày càng dễ, năng lực thực sự khan hiếm sẽ trở thành: **Bạn có đang giải quyết một vấn đề đáng giải quyết hay không, và bạn có dùng cách phù hợp để giải quyết nó hay không.**
+
+Ghi nhớ câu này là đủ:
+
+**Trước làm đúng việc, rồi làm đúng cách.**
+
+<a id="dd-ai"></a>
+## [11. Cách dùng AI giúp bạn chạy quy trình Double Diamond](#top-dd)
+
+Bản thân mô hình Double Diamond không phải công cụ AI, nhưng AI rất phù hợp đóng vai "bộ tăng tốc" trong bốn giai đoạn. Điểm mấu chốt không phải để AI thay bạn quyết định, mà là để nó giúp bạn mở rộng tầm nhìn, sắp xếp thông tin, so sánh giải pháp và tạo tài liệu xác minh.
+
+### 11.1 Ở giai đoạn Discover, dùng AI làm trước một vòng lót thông tin
+
+Trước khi phỏng vấn và nghiên cứu chính thức, bạn có thể để AI giúp bạn làm quét vấn đề nhẹ nhàng, ví dụ:
+
+- Trên thị trường có giải pháp thay thế phổ biến nào
+- Người dùng trong cộng đồng công khai thường phàn nàn điều gì nhất
+- Vấn đề này thường gặp ở kịch bản và nhóm người nào
+- Sản phẩm hiện có thường bỏ qua điều gì
+
+Bước này không thể thay thế nghiên cứu thực tế, nhưng rất phù hợp giúp bạn nhanh chóng xây bản đồ vấn đề.
+
+Một input rất đơn giản có thể là:
+
+```text
+Tôi muốn làm một công cụ giúp sinh viên sửa CV.
+Bạn trước đừng giúp tôi nghĩ chức năng, trước giúp tôi xem mọi người thường gặp rắc rối gì nhất trên vấn đề này.
+```
+
+AI có thể xuất:
+
+```text
+Bản đồ vấn đề ban đầu:
+
+1. Không biết nên viết kinh nghiệm gì
+2. Không biết sửa cho phù hợp với vị trí thế nào
+3. Sửa nhiều phiên bản vẫn không chắc đã đủ tốt
+4. Cần người khác giúp xem, nhưng không tiện phiền người ta mãi
+5. Vì không chắc chắn, nên cứ kéo dài không nộp
+```
+
+Tác dụng của loại output này không phải thay bạn kết luận, mà giúp bạn nhanh bước vào Discover.
+
+### 11.2 Ở giai đoạn Define, để AI giúp bạn tập trung định nghĩa vấn đề
+
+Rất nhiều người sau khi thu thập một đống tài liệu, khó nhất là nén vấn đề thành một câu thực sự rõ ràng. Bạn có thể giao ghi chú nghiên cứu cho AI, để nó giúp bạn nén thành vài định nghĩa vấn đề ứng viên:
+
+```text
+Dưới đây là phản hồi người dùng và ghi chú nghiên cứu tôi thu thập được ở giai đoạn Discover:
+[Dán nội dung]
+
+Xin giúp tôi làm ba việc:
+1. Tổng hợp mô hình vấn đề xuất hiện thường xuyên nhất
+2. Theo tần suất vấn đề, mức độ đau và tính khả thi xác minh, sắp xếp ra 3 vấn đề đáng ưu tiên giải quyết
+3. Viết mỗi vấn đề thành một định nghĩa vấn đề cụ thể
+```
+
+Như vậy bạn sẽ dễ bước vào Define hơn, thay vì luôn dừng ở trạng thái "vấn đề nhiều quá".
+
+Bạn thậm chí có thể viết input rất đơn giản:
+
+```text
+Tôi hiện thu thập được các vấn đề:
+1. Mọi người không biết CV viết gì
+2. Mọi người không biết sửa thế nào
+3. Mọi người luôn cảm thấy chưa sửa xong, không dám nộp
+
+Bạn giúp tôi xem, phiên bản đầu tiên phù hợp nhất giải quyết vấn đề nào trước.
+```
+
+AI có thể xuất:
+
+```text
+Đề xuất vấn đề đáng ưu tiên giải quyết:
+
+"Sinh viên lần đầu nộp thực tập, không chắc CV đã đạt mức có thể nộp chưa, do đó sẽ sửa lặp đi lặp lại và trì hoãn nộp hồ sơ."
+
+Lý do:
+1. Vấn đề này cụ thể hơn
+2. Nó có thể giải thích hành vi trì hoãn
+3. Dễ thiết kế một phiên bản nhỏ để xác minh hơn
+```
+
+Loại output này rất hữu ích, vì nó giúp bạn từ đống vấn đề mơ hồ tập trung ra một định nghĩa gần với điểm khởi đầu MVP hơn.
+
+### 11.3 Ở giai đoạn Develop, dùng AI phân tán nhiều giải pháp
+
+Rất nhiều người vừa định nghĩa vấn đề xong, chỉ chăm chăm vào giải pháp đầu tiên nghĩ ra. AI ở bước này rất phù hợp giúp bạn ép phân tán:
+
+```text
+Tôi đã định nghĩa một vấn đề cốt lõi: [Định nghĩa vấn đề của bạn]
+Xin đừng trực tiếp cho tôi một câu trả lời cuối cùng, mà từ các góc độ sau mỗi loại đề xuất 2-3 hướng giải quyết:
+1. MVP nhẹ nhất
+2. Giải pháp phù hợp nhất để xác minh nhu cầu
+3. Giải pháp phù hợp nhất để nâng cao trải nghiệm
+4. Giải pháp không phụ thuộc AI
+5. Giải pháp phụ thuộc AI
+Cuối cùng xin so sánh ưu điểm, rủi ro và chi phí xác minh của mỗi giải pháp.
+```
+
+Như vậy bạn sẽ không quá sớm bị trói vào một giải pháp duy nhất.
+
+Một input đơn giản:
+
+```text
+Định nghĩa vấn đề hiện tại của tôi là:
+"Sinh viên không chắc CV đã có thể nộp chưa, nên cứ kéo dài không nộp."
+
+Xin giúp tôi nghĩ 4 giải pháp khác nhau, đừng chỉ cho tôi một.
+```
+
+AI có thể xuất:
+
+```text
+Giải pháp 1: Danh sách kiểm tra CV có thể nộp
+Giải pháp 2: Sửa viết dựa trên mô tả vị trí
+Giải pháp 3: Người dùng upload CV rồi đưa ra cảnh báo rủi ro
+Giải pháp 4: Cung cấp đối chiếu case xuất sắc, giúp người dùng đánh giá khoảng cách
+```
+
+Lúc này bạn dễ bước vào "so sánh giải pháp" hơn, thay vì vừa lên chỉ chăm chăm để AI sửa viết một hướng.
+
+### 11.4 Ở giai đoạn Deliver, dùng AI giúp bạn tạo văn bản nguyên mẫu và tài liệu kiểm thử
+
+Khi bạn bước vào giai đoạn Deliver, AI rất phù hợp giúp bạn tăng tốc các công việc này:
+
+- Tạo văn bản trang trong nguyên mẫu độ fidelity thấp
+- Sắp xếp script kiểm thử người dùng
+- Tạo nhiều phiên bản tiêu đề, nút bấm, mô tả có thể so sánh
+- Sắp xếp phản hồi và danh sách vấn đề sau kiểm thử
+
+Ví dụ bạn có thể để AI giúp bạn tạo một script kiểm thử người dùng 20 phút, hoặc giúp bạn gom 5 phản hồi người dùng thành căn cứ đánh giá "tiếp tục làm / sửa hướng / tạm dừng".
+
+Ví dụ một input tối thiểu:
+
+```text
+Tôi đã làm một nguyên mẫu rất đơn giản:
+Người dùng upload CV, hệ thống báo chỗ nào chưa phù hợp để nộp.
+
+Xin giúp tôi tạo một script kiểm thử người dùng 15 phút.
+```
+
+AI có thể xuất:
+
+```text
+Script kiểm thử 15 phút:
+
+1. Trước mời người dùng mô tả trải nghiệm nộp CV gần nhất
+2. Để người dùng tự hoàn thành upload CV
+3. Quan sát họ có hiểu được kết quả phản hồi không
+4. Hỏi: Trong những gợi ý này, cái nào hữu ích nhất, cái nào khiến bạn bối rối
+5. Hỏi: Nếu lần sau trước khi nộp, bạn có muốn dùng lại không
+```
+
+Loại output này rất thực dụng, vì nó có thể giúp bạn từ "tôi làm xong nguyên mẫu rồi" bước đến "tôi tiếp theo kiểm thử thế nào".
+
+### 11.5 Để AI đóng vai "người gác cổng giai đoạn"
+
+Vấn đề phổ biến nhất của mô hình Double Diamond, là người ta sẽ nhảy giai đoạn. Bạn có thể trực tiếp để AI đóng vai người gác cổng, nhắc bạn hiện tại rốt cuộc đang ở bước nào:
+
+```text
+Xin đóng vai huấn luyện viên quy trình sản phẩm.
+Dưới đây là trạng thái dự án hiện tại của tôi: [Mô tả của bạn]
+Xin đánh giá tôi hiện tại giống đang ở Discover, Define, Develop hay Deliver hơn.
+Và cho tôi biết:
+1. Tôi có phải đã nhảy quá sớm sang giai đoạn tiếp theo không
+2. Hành động đáng bổ sung nhất ở giai đoạn hiện tại là gì
+3. Những việc nào bây giờ chưa nên làm
+```
+
+Điều này đặc biệt hữu ích cho người mới, vì bạn rất dễ "chưa nghĩ rõ vấn đề đã bắt đầu vẽ nguyên mẫu".
+
+## 📚 Bài tập
+
+Xin bạn dựa vào nội dung bài viết, hoàn thành bài tập sau:
+
+1. Chọn một ý tưởng sản phẩm bạn muốn làm gần đây, viết bản nháp 4 bước Discover, Define, Develop, Deliver của nó
+2. Ở giai đoạn Define, ép mình nén vấn đề thành một câu cụ thể
+3. Ở giai đoạn Develop, ít nhất liệt kê 3 giải pháp khác nhau, thay vì chỉ chăm chăm vào cách đầu tiên nghĩ ra
+4. Ở giai đoạn Deliver, viết ra một phiên bản xác minh tối thiểu có thể giao phó trong một tuần
+
+## Đọc thêm
+
+Bài viết này chủ yếu tham khảo tài liệu chính thức của Design Council về Double Diamond, phù hợp để tiếp tục xem:
+
+- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
+- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
+- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
diff --git a/docs/vi-vn/stage-1/appendix-idea-sources/index.md b/docs/vi-vn/stage-1/appendix-idea-sources/index.md
new file mode 100644
index 0000000..bf91d5d
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-idea-sources/index.md
@@ -0,0 +1,301 @@
+---
+title: 'Tìm ý tưởng ở đâu: 3 nguồn tham khảo phù hợp nhất cho người mới'
+description: 'Bài viết tìm ý tưởng sản phẩm dành cho người mới. Tập trung tổng hợp các trang web phù hợp để lướt idea, nguồn xu hướng, nguồn nghiệp vụ thực tế và danh sách VC, giúp bạn nhanh chóng tìm thấy hướng đi cụ thể hơn từ các liên kết.'
+---
+
+<script setup>
+const duration = 'Khoảng <strong>1.5 giờ</strong>'
+</script>
+
+# Tìm ý tưởng ở đâu: 3 nguồn tham khảo phù hợp nhất cho người mới
+
+<a id="top-idea-sources"></a>
+
+## Hướng dẫn chương này
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Tìm ý tưởng', 'Hướng sản phẩm', 'Phát hiện nhu cầu', 'Quan sát ngành']"
+  coreOutput="1 hướng sản phẩm cụ thể hơn, đáng tiếp tục tìm hiểu"
+  expectedOutput="Biết lướt ở đâu, xem thế nào, xem gì trước, không còn chỉ để lại ý tưởng trống như 'AI + ngành nào đó'"
+>
+
+Rất nhiều người bị mắc kẹt ở bước đầu tiên, không phải vì hoàn toàn không có cảm hứng, mà vì sau khi lướt nhiều nội dung, những gì còn trong đầu vẫn chỉ là từ to:
+
+- AI for education
+- AI for healthcare
+- AI for finance
+- AI agent for business
+
+Những điều này chưa phải là ý tưởng. Chúng chỉ cho bạn biết "hướng rất lớn", không cho bạn biết:
+
+- Ai đang dùng
+- Dùng trong kịch bản nào
+- Hiện đang làm tạm thế nào
+- Bước nào đáng cắt vào trước nhất
+
+Bài viết này không nói về phương pháp luận suông, trực tiếp tổng hợp một loạt nguồn hữu dụng hơn cho bạn.
+
+</ChapterIntroduction>
+
+::: info SOP tối thiểu
+**Mục đích**: Sau khi đọc xong, bạn sẽ biết khi không có ý tưởng thì nên lướt ở đâu, link nào phù hợp để xem "nhu cầu cụ thể", link nào phù hợp để xem "xu hướng", link nào phù hợp để xem "nghiệp vụ thực tế".
+
+**Hành động**: Lướt một vòng danh sách idea trước, sau đó xem một vòng sản phẩm nhỏ đang kiếm tiền, rồi xem nguồn xu hướng và nguồn nghiệp vụ, cuối cùng giữ lại 1 hướng bạn muốn tiếp tục tìm hiểu.
+
+**Kết quả**: Bạn sẽ có 1 hướng cụ thể hơn, đáng tiếp tục xác minh, thay vì dừng lại ở từ to.
+
+**Từ khóa chuyển nhanh**: [Danh sách ứng dụng tham khảo](#idea-apps) · [Nguồn xu hướng](#idea-trends) · [Nguồn nghiệp vụ hơn](#idea-business) · [Nguồn VC / gia tốc](#idea-vc) · [Đường ngắn nhất](#idea-path) · [AI giúp bạn thế nào](#idea-ai)
+:::
+
+## Bạn sẽ học được những nội dung sau
+
+1. Trang web nào phù hợp để lướt idea trực tiếp
+2. Trang web nào phù hợp để xem sản phẩm nhỏ đang kiếm tiền
+3. Nguồn nào phù hợp để xem xu hướng và thay đổi ngành
+4. Nguồn nào gần với nghiệp vụ và thanh toán thực tế hơn
+5. Một đường ngắn nhất phù hợp cho người mới bắt đầu
+
+<a id="idea-apps"></a>
+## [1. Danh sách ứng dụng tham khảo: Xem người khác đang làm gì trước](#top-idea-sources)
+
+Đây là điểm khởi đầu phù hợp nhất cho người mới, vì cụ thể nhất.
+
+### Nhóm 1: Mở ra là danh sách idea, chọn trực tiếp
+
+- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+  Mục đích cốt lõi của subreddit này là: người dùng thực tế trực tiếp đăng "Tôi hy vọng ai đó làm một cái XX". Mỗi bài viết thường là một nhu cầu sản phẩm cụ thể, còn kèm theo mô tả kịch bản. Sau khi vào, sắp xếp theo `Top -> Past Month` hoặc `Top -> Past Year`, 20 phút có thể quét được một loạt nhu cầu thực tế.
+- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+  Tương tự như trên, nhưng thiên về phần mềm / App. Định dạng bài viết phổ biến là "tôi cần một ứng dụng có thể làm XX", granularity nhỏ hơn, rất nhiều là niche nhỏ mà đẹp.
+- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+  Hoàn chỉnh hơn hai cái trước. Rất nhiều bài viết không chỉ là yêu cầu một câu, còn kèm theo phân tích thị trường, mô hình kinh doanh và lý do tại sao bây giờ đáng làm.
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+  Mỗi tuần xuất bản ý tưởng khởi nghiệp chưa được xác minh, các trường phổ biến bao gồm người dùng mục tiêu, phương thức kiếm tiền, ý tưởng xác minh ban đầu. Định dạng thống nhất, phù hợp để quét nhanh.
+- [IdeasAI](https://ideasai.com/)
+  Dùng AI tạo ý tưởng khởi nghiệp, có thể lướt liên tục. Chất lượng không ổn định, nhưng rất phù hợp để kích thích cảm hứng khi "hoàn toàn không có cảm giác gì", rồi tự mình khoan sâu vào kịch bản phân khúc.
+
+### Nhóm 2: Xem sản phẩm nhỏ đang kiếm tiền người khác đã làm, suy ngược lại idea
+
+Logic của các nền tảng này là: người khác đã xác minh nhu cầu, thậm chí đang kiếm tiền. Bạn xem chúng, không phải để copy, mà để xem "vấn đề nhỏ nào đã có người sẵn sàng trả tiền".
+
+- [Starter Story](https://www.starterstory.com/)
+  Tổng hợp nhiều case kinh doanh nhỏ thực tế, thường có phỏng vấn sáng lập, dữ liệu doanh thu, quá trình khởi đầu. Tập trung xem sản phẩm nhỏ có doanh thu hàng tháng 10 đến 100 nghìn USD, thường niche hơn, cũng gần với quy mô sản phẩm mà người bình thường có thể hiểu hơn.
+- [Indie Hackers — Products](https://www.indiehackers.com/products)
+  Nơi nhà phát triển độc lập trưng bày sản phẩm, rất nhiều công khai doanh thu và tăng trưởng. Sắp xếp theo doanh thu, xem những sản phẩm kiếm hàng nghìn đến hàng chục nghìn USD mỗi tháng đang giải quyết vấn đề cụ thể nào.
+- [MicroConf Blog](https://microconf.com/blog)
+  Thiên về Micro SaaS. Phù hợp để xem những điểm vào "đủ nhỏ, nhưng có người sẵn sàng trả tiền".
+- [1000 Tools](https://1000.tools/)
+  Trang tổng hợp công cụ AI. Phù hợp xem loại sản phẩm nào đã có người làm, nhưng làm bình thường, hoặc hướng nào chưa được bao phủ tốt ở thị trường nội địa / một ngành dọc nào đó.
+- [Product Hunt](https://www.producthunt.com/)
+  Xem loại sản phẩm xuất hiện lặp lại gần đây, đừng chỉ nhìn top 1, tập trung xem loại sản phẩm nào liên tục có người làm nhưng chưa có người chiến thắng rõ ràng.
+- [BetaList](https://betalist.com/)
+  Phù hợp xem sản phẩm sớm và nhóm đang thử hướng.
+
+### Khi xem sản phẩm, đừng chỉ xem bản thân sản phẩm, cũng hãy xem đánh giá xấu và "dịch vụ làm thay"
+
+- [G2](https://www.g2.com/)
+  Cách dùng: Xem đánh giá 1 sao, 2 sao. Đánh giá xấu thường ẩn chứa "sản phẩm hiện có làm chưa tốt bước nào".
+- [Capterra](https://www.capterra.com/)
+  Cách dùng: Tương tự G2, phù hợp xem phàn nàn thực tế về sản phẩm dạng SaaS.
+- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhubajie
+  Cách dùng: Tìm "làm thay", "sắp xếp thay", "nhập liệu thay", "chuyển đổi thay". Nếu loại dịch vụ thủ công nào đó bán chạy, phía sau thường có một quy trình có thể lặp lại, có thể sản phẩm hóa.
+
+Tín hiệu đánh giá rất đơn giản:
+
+- Người dùng đã phàn nàn về công cụ hiện có
+- Người dùng đã tiêu tiền thuê người làm thay
+- Người dùng đã đầu tư nhiều nhân công và thời gian cho quy trình này
+
+### Nhóm 4: Xem video, có người trực tiếp giúp bạn phân tích idea
+
+Nếu bạn không thích lướt diễn đàn, lướt bảng xếp hạng, mà thích "có người giúp tôi chia sẻ ý tưởng", thì video và podcast cũng rất phù hợp.
+
+- Tìm kiếm `Greg Isenberg startup ideas`
+  Phù hợp xem có người trực tiếp phân tích 2 đến 3 ý tưởng cụ thể, tiện thể nói về quy mô thị trường, phân tích cạnh tranh và điểm vào.
+- Tìm kiếm `My First Million podcast`
+  Hai MC thường xuyên cả chương brainstorm ý tưởng kinh doanh, mật độ cao, thường nảy ra những niche rất cụ thể.
+- Tìm kiếm `YC startup ideas` hoặc `Michael Seibel startup ideas`
+  Phù hợp người mới bắt đầu, nội dung trực tiếp, rất nhiều sẽ nói thẳng về cách chọn hướng.
+
+<a id="idea-trends"></a>
+## [2. Nguồn xu hướng: Xem hướng nào đang tăng trưởng](#top-idea-sources)
+
+Tác dụng của trang xu hướng không phải trực tiếp cho bạn ý tưởng, mà giúp bạn đánh giá: một hướng nào đó có đang tăng nhiệt không, có đáng tiếp tục xem không.
+
+- [Exploding Topics](https://explodingtopics.com/)
+  Dùng dữ liệu theo dõi các chủ đề và loại sản phẩm tăng trưởng nhanh nhưng chưa bước vào tầm nhìn chính thống. Phù hợp xem những hướng "đang tăng nhưng chưa quá đông đúc".
+- [Google Trends](https://trends.google.com/)
+  Tìm từ khóa, xem đường xu hướng trong năm qua, sau đó xem "truy vấn liên quan" có từ nào "tăng vọt".
+- [Glimpse](https://meetglimpse.com/)
+  Tương tự Google Trends
+- Trang tóm tắt báo cáo nghiên cứu ngành
+  Phù hợp khi bạn đã có hướng, muốn nhanh chóng xem vị trí của hướng này trong ngành.
+- McKinsey / BCG / Gartner nội dung xu hướng
+  Thiên về góc nhìn doanh nghiệp và ngành lớn, phù hợp B2B, công nghiệp, ngành truyền thống.
+- [State of AI Report](https://www.stateof.ai/)
+  Nếu hướng của bạn liên quan đến bản thân công nghệ AI, báo cáo thường niên này rất phù hợp để xây dựng tầm nhìn tổng thể.
+
+Khi xem xu hướng chỉ tập trung vào 3 điều:
+
+- Từ này có đang tăng nhiệt liên tục không
+- Nó rơi vào kịch bản cụ thể nào
+- Ai sẽ sớm nhất chi trả thời gian, chi phí chuyển đổi hoặc ngân sách cho nó
+
+<a id="idea-business"></a>
+## [3. Nguồn gần nghiệp vụ hơn: Xem ai đang tiêu tiền, ai đang phàn nàn, ai đang bán dịch vụ thủ công](#top-idea-sources)
+
+Nếu bạn muốn tìm không phải hướng "nghe rất ngầu", mà là hướng "gần với nghiệp vụ thực tế" hơn, hãy xem các nguồn gần quy trình làm việc hơn.
+
+### Xem ai đang thực sự tiêu tiền mua gì
+
+- [Trang web Mua sắm Chính phủ Trung Quốc](https://www.ccgp.gov.cn/)
+  Cách dùng: Tìm các từ như "công trường thông minh", "hệ thống quản lý phòng thí nghiệm", "thu thập dữ liệu", "quản lý phòng khám", "hệ thống báo giá", xem ngân sách, yêu cầu kỹ thuật, kịch bản sử dụng.
+- Các trung tâm giao dịch tài nguyên công cộng tỉnh/thành phố
+  Cách dùng: Xem chính quyền địa phương và doanh nghiệp nhà nước đang thực sự mua hệ thống gì.
+- Bibiao / Qianlima / Biaoshitong
+  Cách dùng: Xem nhu cầu mua sắm phía doanh nghiệp và loại hệ thống tần suất cao.
+
+Tín hiệu mạnh từ những nguồn này là: Không phải đang thảo luận về tương lai, mà đang phơi bày "hôm nay đã có người sẵn sàng chi tiền cho việc này".
+
+### Xem ai đang thực sự phàn nàn điều gì
+
+- Sản xuất: Cộng đồng cơ khí, diễn đàn điều khiển công nghiệp
+- Y tế: Dingxiangyuan, Yimaitong
+- Xây dựng / Kỹ thuật: Tumuzaixian, Guanglianda Community
+- Tài chính / Kế toán: Diễn đàn China Accounting Vision
+- Ngoại thương: diễn đàn Fubu, Mikecircle
+- F&B / Bán lẻ: Zhiye Canyinwang, Lianshangwang
+- [Reddit](https://www.reddit.com/) các board dọc: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
+- [V2EX](https://www.v2ex.com/)
+- Jike
+- Xiaohongshu
+
+Khi tìm kiếm đừng chỉ tìm "AI", "đổi mới", hiệu quả hơn là tìm:
+
+- Quá phiền phức rồi
+- Có cách nào tốt hơn không
+- Xin đề xuất công cụ
+- Excel quản lý không xuể rồi
+- I wish there was
+- is there a tool for
+- I hate
+
+### Xem ai đang bán dịch vụ thủ công lặp đi lặp lại
+
+- [Fiverr](https://www.fiverr.com/)
+- [Upwork](https://www.upwork.com/)
+- Zhubajie
+- Taobao
+- Xianyu
+
+Nếu bạn thấy những dịch vụ này bán khá tốt, đáng tiếp tục tìm hiểu:
+
+- Giúp bạn chuyển báo giá PDF thành Excel
+- Giúp bạn sắp xếp hàng loạt thông tin khách hàng
+- Giúp bạn sửa CV / sửa văn bản / chuyển đổi / lưu trữ
+
+Loại dịch vụ này phía sau thường không phải nhu cầu một lần, mà là quy trình làm việc lặp lại.
+
+### Xem quy trình làm việc hoàn chỉnh, thay vì chỉ xem danh sách idea
+
+Đôi khi cách trực tiếp nhất là chọn một ngành, xem qua quy trình, tìm các bước vẫn đang hoàn thành bằng WeChat, Excel, giấy bút, điện thoại.
+
+- Ngoại thương: Tìm nhà cung cấp, hỏi giá, so sánh giá, làm báo giá, gửi cho khách hàng, theo dõi phản hồi, sắp xếp kiểm hàng, book tàu, khai báo hải quan.
+ Điểm vào đáng xem: Sắp xếp báo giá nhà cung cấp thành báo giá khách hàng.
+- Phòng khám nha khoa: Tiếp nhận, chụp X-quang, đọc phim, trao đổi phương án, theo dõi, điều trị, tái khám.
+ Điểm vào đáng xem: Giải thích phương án cho bệnh nhân và theo dõi liên tục.
+- Công trường xây dựng: Tuần tra, chụp ảnh, gửi group, sắp xếp báo cáo, giao cho chủ đầu tư.
+ Điểm vào đáng xem: Từ ảnh hiện trường đến báo cáo tuân thủ.
+
+<a id="idea-vc"></a>
+## [4. Nguồn VC / Gia tốc: Xem "sóng đánh về phía nào"](#top-idea-sources)
+
+Loại nguồn này phù hợp giúp bạn tìm hướng lớn, không phù hợp thay thế xác minh.
+
+- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
+  Cách dùng: Phù hợp tìm điểm vào, vì nó thường trực tiếp nói "chúng tôi muốn thấy ai đó làm việc này".
+- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
+  Cách dùng: Thiên về xu hướng lớn và đánh giá đường đua, phù hợp xây dựng cảm nhận ngành.
+- [NFX](https://www.nfx.com/)
+  Cách dùng: Phù hợp quét nhanh một nhóm đề tài khởi nghiệp.
+- [Sequoia Capital](https://www.sequoiacap.com/article/)
+  Cách dùng: Không nhất thiết trực tiếp liệt kê ý tưởng, nhưng thường nói về loại biến đổi nền tảng và cơ hội nào.
+- [First Round Review](https://review.firstround.com/)
+  Cách dùng: Phù hợp đào sâu một hướng nào đó, không nhất thiết là danh sách ý tưởng, nhưng chất lượng bài viết thường rất cao.
+
+Ưu điểm của loại nguồn này:
+
+- Có thể cho bạn biết hướng nào đáng xem trong tương lai
+- Có thể cho bạn biết đường đua nào có thể được thúc đẩy liên tục
+- Có thể giúp bạn nhanh chóng bước vào bối cảnh của một đường đua
+
+Hạn chế của loại nguồn này:
+
+- Thường là góc nhìn nhà đầu tư
+- Không nhất thiết cho bạn biết vai trò nào đau nhất
+- Không nhất thiết cho bạn biết bước nào trong quy trình bị kẹt nhất
+- Không nhất thiết cho bạn biết hôm nay ai đã sẵn sàng trả tiền cho việc này
+
+Cách dùng tốt hơn là: Dùng chúng để tìm hướng trước, rồi quay lại sản phẩm tham khảo, diễn đàn ngành, thông tin mua sắm và quy trình làm việc thực tế để tìm điểm vào cụ thể hơn.
+
+<a id="idea-path"></a>
+## [5. Đường ngắn nhất phù hợp cho "người không có ý tưởng, chỉ biết làm trợ lý"](#top-idea-sources)
+
+Nếu chỉ đi một đường ngắn nhất, có thể làm như sau:
+
+1. Bước 1, 30 phút.
+   Mở [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/), sắp xếp theo `Top -> Past Year`, nhanh chóng quét 50 bài viết, lưu lại tất cả các hướng bạn thấy "có vẻ tôi có thể làm".
+2. Bước 2, 30 phút.
+   Mở [Starter Story](https://www.starterstory.com/) hoặc [Indie Hackers Products](https://www.indiehackers.com/products), sắp xếp theo doanh thu, xem sản phẩm doanh thu trung bình, đừng chỉ xem thành công nhất. Tìm hướng liên quan đến bước 1, xem họ cụ thể bán cho ai, giải quyết bước nào.
+3. Bước 3, 20 phút.
+   Vào [Google Trends](https://trends.google.com/) tìm từ khóa liên quan, xem xu hướng có đang tăng trưởng không, sau đó xem từ "tăng vọt" trong "truy vấn liên quan".
+4. Bước 4, 20 phút.
+   Vào G2 / Capterra / diễn đàn ngành / nền tảng đấu thầu / Fiverr, xem hướng này hôm nay phiền nhất ở đâu, đâu vẫn đang dựa vào thủ công.
+
+Sau khi xem xong, nói rõ được câu sau là đủ:
+
+- Một loại người nào đó, trong kịch bản nào đó, bị kẹt ở bước nào trong quy trình, hiện chủ yếu dựa vào cách vụng về nào đó để cầm cự.
+
+<a id="idea-ai"></a>
+## [6. AI giúp bạn thế nào](#top-idea-sources)
+
+Trọng tâm của bài này không phải AI, nhưng AI rất phù hợp để làm sắp xếp.
+
+Cách dùng thực tế nhất chỉ có hai:
+
+- Dán các link, tiêu đề bài viết, lời gốc của người dùng bạn lướt được cho AI, để nó giúp bạn phân loại theo "nhóm người / kịch bản / điểm đau / giải pháp thay thế".
+- Để AI giúp bạn thu hàng thông tin lộn xộn thành 3 hướng ứng viên, thay vì tiếp tục phân tán ra 50 chức năng.
+
+Có thể trực tiếp hỏi như sau:
+
+```text
+Tôi gần đây lướt được các nguồn sau:
+1. [Dán tiêu đề hoặc lời gốc]
+2. [Dán tiêu đề hoặc lời gốc]
+3. [Dán tiêu đề hoặc lời gốc]
+
+Xin đừng cho tôi danh sách chức năng.
+Chỉ làm 3 việc:
+1. Phân loại theo nhóm người và kịch bản
+2. Tìm ra bước phiền phức xuất hiện lặp lại
+3. Giúp tôi sắp xếp thành 3 hướng ứng viên cụ thể hơn
+```
+
+## Đọc thêm
+
+- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
+- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
+- [NFX](https://www.nfx.com/)
+- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+- [Starter Story](https://www.starterstory.com/)
+- [Indie Hackers - Products](https://www.indiehackers.com/products)
+- [Product Hunt](https://www.producthunt.com/)
+- [BetaList](https://betalist.com/)
+- [IdeasAI](https://ideasai.com/)
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+- [Google Trends](https://trends.google.com/)
+- [Exploding Topics](https://explodingtopics.com/)
+- [G2](https://www.g2.com/)
+- [Capterra](https://www.capterra.com/)
diff --git a/docs/vi-vn/stage-1/appendix-industry-scenarios/index.md b/docs/vi-vn/stage-1/appendix-industry-scenarios/index.md
new file mode 100644
index 0000000..750d728
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-industry-scenarios/index.md
@@ -0,0 +1,765 @@
+---
+title: 'Tham chiếu hướng ứng dụng B2B trong các ngành công nghiệp'
+description: 'Tài liệu này tổng hợp các ứng dụng thực tế của mô hình ngôn ngữ lớn (LLM) trong các kịch bản doanh nghiệp B2B, bao gồm sản xuất công nghiệp, chăm sóc khách hàng thông minh, giáo dục, lập trình thông minh, y tế, an ninh mạng, tài chính, dịch vụ doanh nghiệp và các lĩnh vực khác, cung cấp tài liệu tham khảo cho các nhà phát triển ứng dụng AI hướng tới khách hàng doanh nghiệp.'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = 'Khoảng <strong>6 giờ</strong>'
+
+const interestPoint = ref('')
+const purpose = ref('')
+
+// Mỗi ngành có một pool chủ đề
+const topicPool = {
+  'manufacturing': [
+    { title: 'Nền tảng thiết kế hỗ trợ AI ngoại hình xe buýt năng lượng mới', desc: 'Thiết kế khái niệm ngoại hình dựa trên mô hình tạo ảnh' },
+    { title: 'Trợ lý thiết kế và kiểm tra bản vẽ thông minh', desc: 'Xây dựng kho kiến thức quy tắc thiết kế doanh nghiệp bằng công nghệ RAG' },
+    { title: 'Tự động tạo và quản lý tài liệu kỹ thuật', desc: 'Tự động tạo tài liệu quy cách sản phẩm và hướng dẫn sử dụng dựa trên LLM' },
+    { title: 'Trợ lý tự động tạo báo cáo kiểm tra thiết bị sản xuất', desc: 'Mô tả tình trạng thiết bị bằng giọng nói, tạo báo cáo kiểm tra có cấu trúc' },
+    { title: 'Trợ lý hỏi đáp chẩn đoán lỗi thiết bị công nghiệp', desc: 'Xây dựng kho kiến thức vector dựa trên lịch sử lỗi thiết bị' }
+  ],
+  'customer-service': [
+    { title: 'Hệ thống phản hồi tự động và tạo ticket chăm sóc khách hàng đa kênh', desc: 'Kết nối tin nhắn đa kênh, LLM hiểu ý định và tạo phản hồi' },
+    { title: 'Trợ lý khai thác và theo dõi khách hàng tiềm năng', desc: 'Phân tích lịch sử hội thoại, nhận diện khách hàng có ý định cao' },
+    { title: 'Trợ lý tìm kiếm và hỏi đáp kiến thức nội bộ doanh nghiệp', desc: 'Xây dựng kho kiến thức vector dựa trên tài liệu nội bộ' },
+    { title: 'Công cụ tóm tắt hội thoại CSKH và tạo ticket', desc: 'Tự động tóm tắt hội thoại và trích xuất thông tin quan trọng' },
+    { title: 'Hệ thống kho kiến thức kịch bản CSKH xuất sắc', desc: 'Phân tích ca tốt, đúc kết mẫu kịch bản xuất sắc' }
+  ],
+  'education': [
+    { title: 'Hệ thống lập lộ trình học ngôn ngữ cá nhân hóa và hướng dẫn thông minh', desc: 'Đánh giá trình độ người học, lập kế hoạch học tập hàng ngày' },
+    { title: 'Nền tảng soạn giáo án tự động và đẩy tài liệu giảng dạy', desc: 'Tạo khung giáo án theo chương trình học' },
+    { title: 'Hệ thống chấm bài tự động và chẩn đoán tình hình học tập', desc: 'Tự động chấm câu hỏi tự luận và tạo đề xuất chấm' },
+    { title: 'Xây dựng mô hình năng lực vị trí và bản đồ học tập', desc: 'Phân tích JD vị trí, trích xuất yêu cầu năng lực' },
+    { title: 'Thực hành giao tiếp ngoại ngữ 1-1 theo tình huống', desc: 'LLM đóng vai trò khác nhau để hội thoại giao tiếp' }
+  ],
+  'programming': [
+    { title: 'Trợ lý gợi ý code thông minh và sửa Bug tự động', desc: 'Plugin IDE gợi ý code theo thời gian thực' },
+    { title: 'Nền tảng xây dựng ứng dụng low-code và tự động hóa quy trình', desc: 'Mô tả yêu cầu bằng ngôn ngữ tự nhiên, chuyển đổi thành cấu hình low-code' },
+    { title: 'Hệ thống tạo test case đơn vị', desc: 'AST phân tích mã nguồn, tạo test case cho điều kiện biên' },
+    { title: 'Công cụ phân tích code thông minh và chuyển đổi ngôn ngữ', desc: 'Phân tích chất lượng code và đưa ra đề xuất tối ưu' },
+    { title: 'Công cụ tự động tạo code giao diện (UI) frontend', desc: 'Nhận diện ảnh thiết kế, tạo CSS responsive' }
+  ],
+  'healthcare': [
+    { title: 'Trợ lý giải thích báo cáo xét nghiệm y khoa thông minh', desc: 'OCR nhận diện chỉ số quan trọng, giải thích giá trị bất thường' },
+    { title: 'Chuyên gia tư vấn sức khỏe dựa trên công nghệ truy xuất kiến thức', desc: 'Xây dựng biểu đồ kiến thức y khoa, RAG truy xuất và tạo câu trả lời' },
+    { title: 'Nền tảng phân tích quyết định dữ liệu nghiên cứu lâm sàng', desc: 'Tích hợp dữ liệu EMR, hỗ trợ tạo code thống kê phân tích' },
+    { title: 'Công cụ tự động tạo báo cáo hình ảnh y khoa', desc: 'Mô tả đặc điểm hình ảnh, tự động tạo báo cáo có cấu trúc' },
+    { title: 'Trợ lý nhắc thuốc thông minh quản lý bệnh mãn tính', desc: 'Tạo nhắc thuốc cá nhân hóa, hỗ trợ kiểm tra tương tác thuốc' }
+  ],
+  'security': [
+    { title: 'Engine phát hiện và sửa lỗi bảo mật code', desc: 'SAST quét code, phân tích nguyên lý lỗ hổng' },
+    { title: 'Hệ thống nhận diện và chặn email phishing do AI tạo', desc: 'Phân tích nội dung email, nhận diện email phishing do AI tạo' },
+    { title: 'Trợ lý tự động tạo báo cáo vận hành bảo mật hàng ngày', desc: 'Tổng hợp log, tự động trích xuất sự kiện quan trọng' },
+    { title: 'Trợ lý tạo báo cáo kiểm thử xâm nhập thông minh', desc: 'Tự động tạo báo cáo theo mô tả lỗ hổng' },
+    { title: 'Trợ lý truy vấn và phân tích thông tin đe dọa thông minh', desc: 'Kết nối đa nguồn thông tin đe dọa, giải thích nội dung' }
+  ],
+  'finance': [
+    { title: 'Trợ lý tạo báo cáo thẩm tín tín dụng thông minh', desc: 'Nhập dữ liệu tài chính, tự động tạo báo cáo thẩm tín' },
+    { title: 'Cố vấn quản lý tài sản ngân hàng tư nhân thông minh', desc: 'Phân tích mức độ rủi ro khách hàng, tạo đề xuất phân bổ tài sản' },
+    { title: 'Trợ lý tạo và kiểm tra tuân thủ prospectus IPO thông minh', desc: 'Mẫu template theo module, tự động điền mô tả kinh doanh' },
+    { title: 'Hệ thống tự động tạo báo cáo tài chính và cảnh báo bất thường kinh doanh', desc: 'Tự động tạo phân tích tài chính và thảo luận ban quản lý' },
+    { title: 'Trợ lý luyện tập kịch bản đại lý bảo hiểm thông minh', desc: 'Mô phỏng hội thoại, đánh giá tính tuân thủ và sức thuyết phục' }
+  ],
+  'enterprise': [
+    { title: 'Nền tảng kiểm tra tuân thủ và đề xuất sửa đổi hợp đồng doanh nghiệp toàn vòng đời', desc: 'So sánh điều khoản với cơ sở dữ liệu luật pháp, tạo báo cáo kiểm tra tuân thủ' },
+    { title: 'Chuyển đổi giọng nói hội thoại bán hàng và đề xuất kịch bản', desc: 'Chuyển đổi ASR, phân tích hội thoại và đề xuất kịch bản xuất sắc' },
+    { title: 'Hệ thống tạo và thiết kế nội dung marketing thông minh', desc: 'Tạo nội dung marketing và trích xuất điểm bán hàng' },
+    { title: 'Nền tảng phân tích quảng cáo đối thủ', desc: 'Thu thập quảng cáo đối thủ, phân tích chiến lược' },
+    { title: 'Hệ thống phân tích chủ đề nóng toàn mạng và đề xuất nội dung thông minh', desc: 'Phân tích xu hướng chủ đề nóng và đề xuất góc tiếp cận' }
+  ],
+  'content': [
+    { title: 'Nền tảng hỗ trợ sáng tạo nội dung phim ảnh và tiểu thuyết', desc: 'Cung cấp tóm tắt cốt truyện, thiết lập nhân vật, tạo thoại' },
+    { title: 'Trợ lý viết câu chuyện thương hiệu và bài PR doanh nghiệp thông minh', desc: 'Nhập từ khóa thương hiệu, tạo nội dung đa phong cách' },
+    { title: 'Hệ thống tương tác livestream và quản lý đẩy stream người ảo', desc: 'Hình ảnh người ảo + giọng nói TTS + hội thoại LLM' },
+    { title: 'Tạo kịch bản video ngắn và chỉnh sửa thông minh', desc: 'Tạo kịch bản video ngắn và phân cảnh' },
+    { title: 'Hệ thống tạo và thiết kế nội dung marketing thông minh', desc: 'Tạo nội dung marketing và trích xuất điểm bán hàng' }
+  ],
+  'government': [
+    { title: 'Hệ thống điều hướng giọng nói thông minh và phân công tự động đường dây nóng 12345', desc: 'Nhận diện giọng nói, hiểu yêu cầu và phân công thông minh' },
+    { title: 'Robot hướng dẫn thông minh và hỏi đáp chính sách tại đại dịch vụ hành chính', desc: 'RAG truy xuất kho kiến thức hành chính' },
+    { title: 'Nền tảng đối chiếu và đẩy thông minh chính sách hỗ trợ doanh nghiệp', desc: 'Đối chiếu hồ sơ doanh nghiệp với chính sách phù hợp' },
+    { title: 'Trợ lý kiểm tra trước và xác nhận tuân thủ tài liệu hành chính thông minh', desc: 'Nhận diện OCR và trích xuất thông tin quan trọng' },
+    { title: 'Nền tảng nhận diện sự kiện lưới đô thị thông minh và điều phối quản lý', desc: 'Nhận diện loại sự kiện và phân công' }
+  ],
+  'legal': [
+    { title: 'Agent phát hiện rủi ro hợp đồng một chạm', desc: 'Đối chiếu danh mục rủi ro để nhận diện vấn đề tiềm ẩn' },
+    { title: 'Cố vấn đánh giá tỷ lệ thắng kiện AI cho các vụ án tương tự', desc: 'Trích xuất đặc điểm vụ án, tìm kiếm và đối chiếu vụ án tương tự' },
+    { title: 'Radar theo dõi thay đổi luật pháp và phân tích tác động kinh doanh', desc: 'Phân tích nội dung thay đổi và đánh giá tác động kinh doanh' },
+    { title: 'Công cụ soạn thư luật sư AIGC tự động', desc: 'Nhập trình bày sự kiện, tạo thư luật sư chuẩn mực' },
+    { title: 'Plugin giải thích điều khoản pháp luật phức tạp sang ngôn ngữ dễ hiểu', desc: 'Tạo giải thích dễ hiểu' }
+  ],
+  'travel': [
+    { title: 'Trình tạo lịch trình du lịch lười dựa trên AIGC', desc: 'Tạo lịch trình hàng ngày' },
+    { title: 'Robot dự đoán xu hướng giá vé máy bay khách sạn toàn mạng và tự động khóa giá rẻ', desc: 'Mô hình ML dự đoán xu hướng giá' },
+    { title: 'Hệ thống hỗ trợ kiểm tra trước tài liệu visa và điền form tự động', desc: 'Nhận diện OCR kiểm tra tính đầy đủ thông tin' },
+    { title: 'Trợ lý dịch giọng nói thời gian thực và dịch menu thị giác khi du lịch nước ngoài', desc: 'Dịch giọng nói ngoại tuyến, OCR ảnh menu' },
+    { title: 'Trợ lý tự động tạo bài du ký và nội dung mạng xã hội từ dấu chân du lịch', desc: 'Trích xuất thông tin ảnh, tạo nội dung bài du ký' }
+  ],
+  'emotion': [
+    { title: 'Người bạn đồng hành ảo 24 giờ dựa trên mô hình LLM', desc: 'Hệ thống ghi nhớ lưu trữ lịch sử hội thoại' },
+    { title: 'Cố vấn AI nhận diện cảm xúc đa phương thức và tư vấn tâm lý', desc: 'Phân tích ngữ điệu giọng nói + nhận diện cảm xúc văn bản' },
+    { title: 'Người ảo AI huấn luyện nhận thức và kích thích trí nhớ cho người bệnh Alzheimer', desc: 'Huấn luyện trò chơi nhận thức, ảnh cũ kích thích trí nhớ' },
+    { title: 'Huấn luyện viên mô phỏng giao tiếp xã hội AIGC cho người hướng nội', desc: 'Mô phỏng tình huống giao tiếp xã hội ảo' },
+    { title: 'Trợ lý theo dõi tâm trạng và kích thích cảm xúc tích cực AI toàn thời gian', desc: 'Phân tích xu hướng tâm trạng và tạo nội dung khích lệ' }
+  ],
+  'entertainment': [
+    { title: 'Engine quyết định tự chủ NPC game thế giới mở dựa trên LLM', desc: 'Cây hành vi NPC kết hợp quyết định LLM' },
+    { title: 'Công cụ hỗ trợ DM với diễn biến cốt truyện AIGC cho game kịch bản nhập vai', desc: 'Lựa chọn người chơi kích hoạt nhánh cốt truyện' },
+    { title: 'Trình sửa đổi kết thúc truyện tương tác dạng sinh', desc: 'Lựa chọn độc giả ảnh hướng đi cốt truyện' },
+    { title: 'Phân tích thị giác CV và bình luận viên AI thông minh cho trận đấu e-sports', desc: 'Phân tích thời gian thực màn hình game' },
+    { title: 'Hệ thống tự động tạo sách nói TTS đa vai', desc: 'Phân vai văn bản, tạo giọng nói cá nhân hóa' }
+  ],
+  'ecommerce': [
+    { title: 'Công cụ sản xuất hàng loạt trang chi tiết sản phẩm AIGC tỷ lệ chuyển đổi cao', desc: 'Tạo nội dung điểm bán hàng và mô tả kịch bản' },
+    { title: 'Nhà máy tạo video người mẫu ảo thử đồ AI cho ngành may mặc', desc: 'Tạo hiệu ứng thử đồ người mẫu ảo' },
+    { title: 'Trợ lý dịch thuật và biên tập bản địa hóa đa ngôn ngữ LLM cho thương mại điện tử xuyên biên giới', desc: 'Dịch mô tả sản phẩm đa ngôn ngữ' },
+    { title: 'Hệ thống livestream bán hàng người ảo AIGC toàn thời gian 24 giờ', desc: 'Hình ảnh người ảo + tạo kịch bản thời gian thực' },
+    { title: 'Engine dự đoán xu hướng thị trường AI và dự đoán sản phẩm hot', desc: 'Phát hiện xu hướng hot, đề xuất lựa chọn sản phẩm' }
+  ],
+  'energy': [
+    { title: 'Cố vấn phân tích hành vi tiêu điện gia đình và chiến lược tiết kiệm năng lượng AI', desc: 'Phân tích mô hình tiêu điện, tạo đề xuất tiết kiệm' },
+    { title: 'Hệ thống nhận diện thị giác CV drone phát hiện lỗi linh kiện quang điện', desc: 'Drone kiểm tra chụp ảnh, phân tích ảnh nhiệt hồng ngoại' },
+    { title: 'Agent dự đoán xu hướng giá giao dịch điện thời gian thực AI và chiến lược sinh lời tự động', desc: 'Mô hình dự đoán giá, tạo chiến lược' },
+    { title: 'Trợ lý tự động tính toán phát thải carbon toàn chuỗi doanh nghiệp và tạo báo cáo ESG AI', desc: 'Tính toán hệ số phát thải carbon, tạo báo cáo ESG' },
+    { title: 'Hệ thống dự đoán phụ tải AI thời tiết cực đoan và chỉ huy điều phối khẩn cấp lưới điện', desc: 'Mô hình dự đoán phụ tải, tạo chiến lược điều phối' }
+  ],
+  'av-media': [
+    { title: 'Công cụ nhận diện đoạn hay AI và tự động cắt video ngắn từ video dài', desc: 'Phân tích nội dung video, nhận diện khung hình quan trọng' },
+    { title: 'Trợ lý tách tiếng ồn nền AI và tăng cường giọng nói video', desc: 'Mô hình tách âm thanh, loại bỏ tiếng ồn nền' },
+    { title: 'Bàn làm việc phục hồi siêu phân giải 4K và tự động tô màu AI cho video cũ', desc: 'Mô hình siêu phân giải video, tự động tô màu AI' },
+    { title: 'Hệ thống kiểm soát cảm xúc và lồng tiếng TTS chuyển văn bản thành giọng người thật', desc: 'Mô hình TTS đa giọng, kiểm soát cảm xúc' },
+    { title: 'Trợ lý chuyển đổi giọng nói thông minh và trích xuất việc cần làm từ ghi âm cuộc họp AI', desc: 'Tách và chuyển đổi giọng nói cuộc họp nhiều người' }
+  ],
+  'ai-marketing': [
+    { title: 'Engine AIGC tự động viết nội dung viral trên Xiaohongshu', desc: 'Tạo nội dung review sản phẩm, tối ưu emoji' },
+    { title: 'Công cụ bố trí AI poster marketing và thích ứng đa kích thước', desc: 'Khớp mẫu template poster thông minh' },
+    { title: 'Nền tảng tạo sáng tạo LOGO thương hiệu AIGC và xây dựng hệ thống VI', desc: 'Tạo sáng tạo LOGO, tạo quy phạm VI' },
+    { title: 'Trợ lý theo dõi chủ đề nóng AI toàn mạng và tạo sáng tạo marketing', desc: 'Phân tích góc marketing, tạo đề án sáng tạo' },
+    { title: 'Trợ lý tạo sáng tạo kịch bản video ngắn AIGC và hướng dẫn phân cảnh', desc: 'Tạo kịch bản và phân cảnh, đề xuất quay phim' }
+  ],
+  'data-intelligence': [
+    { title: 'Công cụ tự động chuyển đổi ngôn ngữ tự nhiên thành câu lệnh SQL', desc: 'Chuyển đổi truy vấn ngôn ngữ tự nhiên thành SQL' },
+    { title: 'Hệ thống kiểm kê và phân loại tài sản dữ liệu doanh nghiệp thông minh', desc: 'Thu thập metadata, phân loại tự động' },
+    { title: 'Engine phát hiện bất thường chất lượng dữ liệu và đề xuất sửa chữa tự động', desc: 'Engine quy tắc + mô hình ML phát hiện bất thường' },
+    { title: 'Trợ lý tạo báo cáo thông minh và cấu hình trực quan hóa', desc: 'Tạo cấu hình báo cáo theo kiểu hội thoại' },
+    { title: 'Trợ lý hỏi đáp về chỉ tiêu dữ liệu thông minh', desc: 'Xây dựng kho kiến thức dựa trên tài liệu định nghĩa chỉ tiêu' }
+  ]
+}
+
+// Bảng ánh xạ đường dẫn khuyến nghị được xác định trước
+const recommendationMap = {
+  // Điểm quan tâm: Sáng tạo nội dung
+  'creative-content': {
+    'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
+    'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
+    'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
+    'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
+  },
+  // Điểm quan tâm: Dịch vụ kỹ thuật
+  'tech-service': {
+    'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
+    'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
+    'improve-experience': ['customer-service', 'enterprise', 'programming'],
+    'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
+  },
+  // Điểm quan tâm: Trí tuệ dữ liệu
+  'data-intel': {
+    'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
+    'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
+    'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
+    'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
+  },
+  // Điểm quan tâm: Dịch vụ người dùng
+  'user-service': {
+    'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
+    'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
+    'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
+    'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
+  },
+  // Điểm quan tâm: Giải pháp ngành
+  'industry-solution': {
+    'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
+    'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
+    'improve-experience': ['healthcare', 'education', 'government', 'travel'],
+    'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
+  }
+}
+
+const interestOptions = [
+  { label: 'Sáng tạo nội dung', value: 'creative-content', desc: 'Nội dung sáng tạo như văn bản, hình ảnh, video' },
+  { label: 'Công cụ dịch vụ kỹ thuật', value: 'tech-service', desc: 'Công cụ phát triển, tự động hóa, hỗ trợ code' },
+  { label: 'Phân tích trí tuệ dữ liệu', value: 'data-intel', desc: 'Phân tích dữ liệu, dự đoán, quyết định thông minh' },
+  { label: 'Trải nghiệm dịch vụ người dùng', value: 'user-service', desc: 'Chăm sóc khách hàng, marketing, trải nghiệm người dùng' },
+  { label: 'Giải pháp ngành', value: 'industry-solution', desc: 'Ứng dụng chuyên sâu trong ngành cụ thể' }
+]
+
+const purposeOptions = [
+  { label: 'Tăng hiệu suất', value: 'increase-efficiency', desc: 'Tự động hóa, tăng tốc quy trình' },
+  { label: 'Giảm chi phí', value: 'reduce-cost', desc: 'Giảm nhân lực, tối ưu nguồn lực' },
+  { label: 'Cải thiện trải nghiệm', value: 'improve-experience', desc: 'Mức độ hài lòng người dùng, chất lượng dịch vụ' },
+  { label: 'Đổi mới kinh doanh', value: 'innovate-business', desc: 'Sản phẩm mới, mô hình mới' }
+]
+
+const industries = [
+  { key: 'manufacturing', name: 'Sản xuất công nghiệp', anchor: '#_1-san-xuat-cong-nghiep' },
+  { key: 'customer-service', name: 'Chăm sóc khách hàng thông minh', anchor: '#_2-cham-soc-khach-hang-thong-minh' },
+  { key: 'education', name: 'Ngành giáo dục', anchor: '#_3-nganh-giao-duc' },
+  { key: 'programming', name: 'Lập trình thông minh', anchor: '#_4-lap-trinh-thong-minh' },
+  { key: 'healthcare', name: 'Y tế', anchor: '#_5-y-te' },
+  { key: 'security', name: 'An ninh mạng', anchor: '#_6-an-ninh-mang' },
+  { key: 'finance', name: 'Quản lý tài chính, ngân hàng bảo hiểm', anchor: '#_7-quan-ly-tai-chinh-ngan-hang-bao-hiem' },
+  { key: 'enterprise', name: 'Dịch vụ doanh nghiệp', anchor: '#_8-dich-vu-doanh-nghiep' },
+  { key: 'content', name: 'Sản xuất và vận hành nội dung', anchor: '#_9-san-xuat-va-van-hanh-noi-dung' },
+  { key: 'government', name: 'Quản trị hành chính thông minh', anchor: '#_10-quan-tri-hanh-chinh-thong-minh' },
+  { key: 'legal', name: 'Pháp lý và quản lý hợp đồng', anchor: '#_11-phap-ly-va-quan-ly-hop-dong' },
+  { key: 'travel', name: 'Du lịch và dịch vụ đi lại', anchor: '#_12-du-lich-va-dich-vu-di-lai' },
+  { key: 'emotion', name: 'Đồng hành cảm xúc', anchor: '#_13-dong-hanh-cam-xuc' },
+  { key: 'entertainment', name: 'Giải trí', anchor: '#_14-giai-tri' },
+  { key: 'ecommerce', name: 'Thương mại điện tử', anchor: '#_15-thuong-mai-dien-tu' },
+  { key: 'energy', name: 'Năng lượng', anchor: '#_16-nang-luong' },
+  { key: 'av-media', name: 'Âm thanh và video', anchor: '#_17-am-thanh-va-video' },
+  { key: 'ai-marketing', name: 'Marketing AI', anchor: '#_18-marketing-ai' },
+  { key: 'data-intelligence', name: 'Trí tuệ dữ liệu', anchor: '#_19-tri-tue-du-lieu' }
+]
+
+// Tính kết quả khuyến nghị - lấy ngẫu nhiên từ pool chủ đề
+const recommendationTopics = computed(() => {
+  if (!interestPoint.value || !purpose.value) return []
+
+  const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
+  const topics = []
+
+  // Lấy ngẫu nhiên 1-2 chủ đề từ mỗi ngành được khuyến nghị
+  keys.forEach(key => {
+    const industry = industries.find(item => item.key === key)
+    const industryTopics = topicPool[key] || []
+
+    if (industry && industryTopics.length > 0) {
+      // Lấy ngẫu nhiên 1-2 chủ đề
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          industryKey: key,
+          industryName: industry.name,
+          industryAnchor: industry.anchor
+        })
+      })
+    }
+  })
+
+  // Sắp xếp ngẫu nhiên và giới hạn tổng số
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// Lấy mô tả lựa chọn hiện tại
+const currentSelection = computed(() => {
+  const interest = interestOptions.find(i => i.value === interestPoint.value)
+  const pur = purposeOptions.find(p => p.value === purpose.value)
+  return {
+    interest: interest?.label || '',
+    purpose: pur?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // Trì hoãn cuộn để đảm bảo DOM đã cập nhật
+  setTimeout(() => {
+    // Thử tìm theo ID (hỗ trợ nhiều định dạng)
+    let element = document.querySelector(anchor)
+
+    // Nếu không tìm thấy, thử các định dạng ID khác
+    if (!element) {
+      // Thử bỏ tiền tố gạch dưới
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+
+    // Nếu vẫn không tìm thấy, tìm theo văn bản tiêu đề
+    if (!element) {
+      // Trích xuất tên ngành từ anchor
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // Khớp hoàn toàn hoặc khớp chứa
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // Highlight đoạn mục tiêu
+      element.style.backgroundColor = '#f0f9ff'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  interestPoint.value = ''
+  purpose.value = ''
+}
+</script>
+
+# Tham chiếu hướng ứng dụng B2B trong các ngành công nghiệp
+
+## Đọc chương
+
+<ChapterIntroduction :duration="duration" :tags="['Ứng dụng B2B', 'Ứng dụng ngành', 'Kịch bản AI', 'Tham chiếu triển khai', 'Giải pháp ngành']" coreOutput="Hiểu 15+ kịch bản ứng dụng B2B trong các ngành" expectedOutput="Tìm hướng dự án phù hợp với khách hàng doanh nghiệp">
+
+Tài liệu này tổng hợp <strong>các ứng dụng thực tế của mô hình ngôn ngữ lớn (LLM) trong các kịch bản doanh nghiệp B2B</strong>. Khác với B2C tập trung vào trải nghiệm người dùng và cảm xúc, sản phẩm B2B chú trọng hơn vào <strong>giải quyết nhu cầu kinh doanh thực tế, tăng hiệu suất, giảm chi phí</strong>. Mỗi kịch bản đều có <strong>tính khả thi triển khai thực tế</strong>, bao gồm từ <strong>phân tích yêu cầu đến triển khai kỹ thuật</strong>, phù hợp làm tài liệu tham khảo cho nhà phát triển ứng dụng AI hướng tới khách hàng doanh nghiệp.
+
+</ChapterIntroduction>
+
+## Chọn nhanh hướng ngành
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: 600; margin-bottom: 8px;">Tìm kịch bản ứng dụng phù hợp với bạn</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Chọn hướng quan tâm và mục đích bạn muốn đạt được, hệ thống sẽ khuyến nghị các kịch bản ngành liên quan. Nhấp vào thẻ để chuyển đến chương tương ứng.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="interestPoint" placeholder="Chọn hướng quan tâm" style="width: 100%;">
+        <el-option
+          v-for="item in interestOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="purpose" placeholder="Chọn mục đích" style="width: 100%;">
+        <el-option
+          v-for="item in purposeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+
+  <!-- Hiển thị kết quả khuyến nghị - dạng bảng -->
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
+      Khuyến nghị cho bạn {{ recommendationTopics.length }} kịch bản ứng dụng
+      <span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
+        ({{ currentSelection.interest }} + {{ currentSelection.purpose }})
+      </span>
+    </div>
+    <el-table
+      :data="recommendationTopics"
+      style="width: 100%; cursor: pointer;"
+      @row-click="(row) => scrollToAnchor(row.industryAnchor)"
+      highlight-current-row>
+      <el-table-column prop="title" label="Kịch bản ứng dụng" min-width="300">
+        <template #default="scope">
+          <div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industryName" label="Ngành" width="180" align="center">
+        <template #default="scope">
+          <el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 10px; font-size: 12px; color: #909399;">
+      Nhấp vào bất kỳ dòng nào trong bảng để chuyển đến chương ngành tương ứng
+    </div>
+  </div>
+
+  <!-- Thông báo khi chưa chọn đủ -->
+  <div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
+    <span v-if="!interestPoint && !purpose">Vui lòng chọn hướng quan tâm và mục đích</span>
+    <span v-else-if="!interestPoint">Vui lòng chọn hướng quan tâm</span>
+    <span v-else>Vui lòng chọn mục đích</span>
+  </div>
+
+  <!-- Nút đặt lại -->
+  <div v-if="interestPoint || purpose" style="margin-top: 12px;">
+    <el-button size="small" @click="resetSelection">Chọn lại</el-button>
+  </div>
+</el-card>
+
+## Giới thiệu nhanh về các ngành
+
+### Lựa chọn công nghệ chính
+
+Trong phát triển ứng dụng AI, các hướng công nghệ phổ biến bao gồm:
+
+1. **LLM (Mô hình ngôn ngữ lớn)**: Chuyên xử lý các tác vụ ngôn ngữ tự nhiên như hội thoại, tạo văn bản, tóm tắt, dịch thuật, v.v., phù hợp xây dựng ứng dụng chăm sóc khách hàng thông minh, sáng tạo nội dung, hỏi đáp kiến thức.
+2. **VLM (Mô hình ngôn ngữ thị giác)**: Kết hợp khả năng hiểu thị giác và ngôn ngữ, có thể thực hiện mô tả hình ảnh, hỏi đáp thị giác, tạo nội dung đa phương thức, phù hợp với phân tích hình ảnh y tế, kiểm tra chất lượng công nghiệp, thiết kế sáng tạo.
+3. **GenAI (AI sinh tạo)**: Bao gồm tạo văn bản, tạo hình ảnh (như Stable Diffusion, DALL-E), tạo video, v.v., có thể tạo nội dung sáng tạo nhanh chóng, phù hợp với hỗ trợ thiết kế, sản xuất tài liệu marketing, đào tạo giáo dục.
+
+### Chiến lược lựa chọn
+
+Người học có thể chọn hướng ứng dụng phù hợp theo các tiêu chí sau:
+
+1. **Theo hướng quan tâm**: Ưu tiên chọn ngành hoặc hướng công nghệ mà mình yêu thích để duy trì động lực học tập. Ví dụ:
+   - Quan tâm thiết kế sáng tạo: có thể thử ứng dụng sản xuất nội dung, thiết kế công nghiệp
+   - Quan tâm thử thách kỹ thuật: có thể thử ứng dụng an ninh mạng, y tế
+   - Quan tâm giá trị xã hội: có thể thử ứng dụng quản trị hành chính, giáo dục
+
+2. **Phù hợp ngành nghề**: Kết hợp bối cảnh ngành nghề hoặc lợi thế tài nguyên của mình để chọn kịch bản:
+   - Người làm sản xuất: có thể ưu tiên ứng dụng sản xuất công nghiệp, dịch vụ doanh nghiệp
+   - Người làm giáo dục: có thể ưu tiên ứng dụng giáo dục, sản xuất nội dung
+   - Người làm y tế: có thể khám phá ứng dụng y tế, quản lý sức khỏe
+
+3. **Mức độ kỹ thuật**: Chọn độ phức tạp phù hợp với nền tảng kỹ thuật của mình:
+   - Cấp độ nhập môn: Chăm sóc khách hàng thông minh, sáng tạo nội dung, hệ thống hỏi đáp đơn giản
+   - Cấp độ nâng cao: Kiểm tra chất lượng công nghiệp, phân tích hình ảnh y tế, trợ lý code thông minh
+   - Cấp độ chuyên nghiệp: Kiểm soát rủi ro tài chính, an ninh mạng, ứng dụng đa phương thức phức tạp
+
+## 1. Sản xuất công nghiệp
+
+Kịch bản sản xuất công nghiệp chủ yếu xoay quanh ba hướng: hỗ trợ thiết kế, tối ưu sản xuất, vận hành thông minh. Các ứng dụng phổ biến bao gồm sử dụng AI hỗ trợ thiết kế ngoại hình sản phẩm, kiểm tra bản vẽ tự động, tạo tài liệu kỹ thuật thông minh, chẩn đoán lỗi thiết bị công nghiệp, v.v., có thể nâng cao đáng kể hiệu suất thiết kế và giảm chi phí vận hành.
+
+| STT | Tên kịch bản ứng dụng                              | Tham khảo triển khai                                                                                                     |
+| :--: | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+|  1   | Nền tảng thiết kế hỗ trợ AI ngoại hình xe buýt năng lượng mới | Thiết kế khái niệm ngoại hình dựa trên mô hình tạo ảnh, kết hợp LLM kiểm tra quy tắc thiết kế và lặp sáng tạo; tích hợp Three.js render 3D |
+|  2   | Trợ lý thiết kế và kiểm tra bản vẽ thông minh     | Sử dụng RAG xây dựng kho kiến thức quy tắc thiết kế doanh nghiệp, DALL-E tạo ảnh tham khảo hỗ trợ hiểu; tích hợp CAD API phân tích bản vẽ tự động |
+|  3   | Tự động tạo và quản lý tài liệu kỹ thuật          | Dựa trên LLM tự động tạo tài liệu quy cách sản phẩm và hướng dẫn sử dụng từ cơ sở dữ liệu sản phẩm, ChromaDB vector lưu trữ tài liệu lịch sử hỗ trợ tìm kiếm thông minh |
+|  4   | Trợ lý tự động tạo báo cáo kiểm tra thiết bị sản xuất | Nhân viên kiểm tra mô tả tình trạng thiết bị bằng giọng nói, LLM tạo báo cáo kiểm tra có cấu trúc; tự động liên kết lịch sử lỗi |
+|  5   | Hệ thống điều phối và lập đường dẫn xe nâng thông minh | LLM phân tích nhiệm vụ đơn hàng và vị trí kho, kết hợp bản đồ API tạo phương án điều phối tối ưu |
+|  6   | Kho dữ liệu truy xuất thông tin dựa trên LLM      | Sử dụng Text-to-SQL chuyển đổi ngôn ngữ tự nhiên thành truy vấn cơ sở dữ liệu, Superset hiển thị trực quan kết quả; Doris hoặc ClickHouse làm OLAP engine |
+|  7   | Trợ lý hỏi đáp chẩn đoán lỗi thiết bị công nghiệp | Xây dựng kho kiến thức vector dựa trên lịch sử lỗi thiết bị, LLM cung cấp đề xuất chẩn đoán và giải pháp theo mô tả lỗi |
+|  8   | Tự động tạo báo cáo kiểm tra chất lượng và phân loại lỗi sản xuất | OCR nhận diện lỗi trong ảnh kiểm tra chất lượng, LLM tạo báo cáo kiểm tra chất lượng có cấu trúc; tự động phân loại loại và mức độ nghiêm trọng của lỗi |
+|  9   | Trợ lý kiểm kê thông minh và tạo báo cáo kiểm kê   | Nhập dữ liệu kiểm kê, LLM tự động so sánh tồn kho hệ thống và tạo báo cáo chênh lệch; cảnh báo tồn kho bất thường |
+|  10  | Hệ thống hỏi đáp đề xuất tối ưu quy trình công nghệ | Xây dựng kho kiến thức RAG dựa trên tài liệu quy trình sản xuất, LLM cung cấp đề xuất tối ưu theo vấn đề sản xuất |
+
+## 2. Chăm sóc khách hàng thông minh
+
+Kịch bản chăm sóc khách hàng thông minh tập trung vào nâng cao hiệu suất dịch vụ khách hàng và tối ưu trải nghiệm người dùng. Các ứng dụng điển hình bao gồm tích hợp chăm sóc khách hàng đa kênh, tạo phản hồi thông minh, phân tích cảm xúc khách hàng, xử lý ticket tự động, v.v., giúp doanh nghiệp cung cấp dịch vụ khách hàng 24/7.
+
+| STT | Tên kịch bản ứng dụng                                   | Tham khảo triển khai                                                                                                                       |
+| :--: | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
+|  1   | Hệ thống phản hồi tự động và tạo ticket chăm sóc khách hàng đa kênh | Kết nối tin nhắn đa kênh (WeChat, APP, website), LLM hiểu ý định và tạo phản hồi tự động tạo ticket; sử dụng LangChain xây dựng luồng hội thoại, MySQL lưu trữ dữ liệu ticket |
+|  2   | Trợ lý khai thác và theo dõi khách hàng tiềm năng     | LLM phân tích lịch sử hội thoại chăm sóc khách hàng, nhận diện đặc điểm khách hàng có ý định cao và chấm điểm; hệ thống đề xuất kết hợp thuật toán lọc cộng tác |
+|  3   | Trợ lý tìm kiếm và hỏi đáp kiến thức nội bộ doanh nghiệp | Xây dựng kho kiến thức vector dựa trên Confluence và tài liệu nội bộ, LLM kết hợp RAG tạo câu trả lời |
+|  4   | Hệ thống khảo sát hài lòng khách hàng và cải tiến dịch vụ | LLM tự động phân tích nội dung hội thoại chăm sóc khách hàng để phân loại cảm xúc và chấm điểm hài lòng; báo cáo BI hiển thị kết quả phân tích |
+|  5   | Công cụ tóm tắt hội thoại CSKH và tạo ticket thông minh | Sau khi kết thúc hội thoại, LLM tự động tóm tắt và trích xuất thông tin quan trọng; tự động điền trường ticket |
+|  6   | Trợ lý kiểm tra tuân thủ kịch bản CSKH tự động         | Nhân viên CSKH nhập nội dung phản hồi, LLM kiểm tra tuân thủ kịch bản và từ nhạy cảm theo thời gian thực; đưa ra đề xuất sửa đổi |
+|  7   | Công cụ tự động tóm tắt và phân loại ticket CSKH       | LLM tóm tắt và tự động phân loại đánh tag cho lịch sử hội thoại dài; Elasticsearch hỗ trợ tìm kiếm toàn văn ticket |
+|  8   | Công cụ theo dõi cảm xúc khách hàng và cảnh báo bất thường | Phân tích đặc điểm ngữ điệu giọng nói và cảm xúc văn bản theo thời gian thực, LLM nhận diện cảm xúc bất thường và kích hoạt cảnh báo; WebSocket đẩy tin cảnh báo |
+|  9   | Hệ thống kho kiến thức kịch bản CSKH xuất sắc         | LLM phân tích ca hội thoại chăm sóc khách hàng xuất sắc, đúc kết mẫu kịch bản xuất sắc; hệ thống đề xuất kịch bản theo thời gian thực theo ngữ cảnh hội thoại |
+|  10  | Trợ lý phân tích nội dung hội thoại gọi ra và kiểm tra chất lượng thông minh | Sau khi chuyển đổi ghi âm gọi ra, LLM phân tích nội dung hội thoại trích xuất thông tin quan trọng; tự động tạo báo cáo kiểm tra chất lượng và đề xuất cải tiến |
+
+## 3. Ngành giáo dục
+
+Kịch bản ngành giáo dục hướng tới thực hiện dạy học cá nhân hóa và quản lý giáo dục thông minh. Các ứng dụng cốt lõi bao gồm lập lộ trình học tập thông minh, chấm bài tự động, tạo giáo án, phân tích tình hình học tập, v.v., thúc đẩy tối ưu phân bổ nguồn lực giáo dục và thực hiện dạy học theo năng lực.
+
+| STT | Tên kịch bản ứng dụng                                | Tham khảo triển khai                                                                                                     |
+| :--: | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+|  1   | Hệ thống lập lộ trình học ngôn ngữ cá nhân hóa và hướng dẫn thông minh | LLM đánh giá trình độ hiện tại của người học, lập kế hoạch học tập hàng ngày theo mục tiêu học tập; thuật toán đề xuất kết hợp biểu đồ kiến thức đề xuất tài liệu học tập |
+|  2   | Nền tảng soạn giáo án tự động và đẩy tài liệu giảng dạy | LLM tạo khung giáo án và thiết kế giảng dạy theo chương trình học; kho vector lưu trữ giáo án và bài giảng chất lượng, hỗ trợ tìm kiếm từ khóa và đề xuất tương tự |
+|  3   | Hệ thống chấm bài tự động và chẩn đoán tình hình học tập | LLM tự động chấm câu hỏi tự luận và tạo đề xuất chấm, biểu đồ kiến thức xác định điểm yếu của học sinh |
+|  4   | Xây dựng mô hình năng lực vị trí và bản đồ học tập   | LLM phân tích JD vị trí trích xuất yêu cầu năng lực, xây dựng hồ sơ năng lực vị trí; tạo bản đồ học tập cá nhân hóa theo khoảng cách |
+|  5   | Công cụ xây dựng hệ thống chương trình học theo trường và làm bài giảng | LLM phân tích đặc điểm trường và nhu cầu học sinh, tạo khung chương trình học theo trường; tích hợp giao diện tạo PPT tự động làm bài giảng |
+|  6   | Thực hành giao tiếp ngoại ngữ 1-1 theo tình huống     | LLM đóng vai trò khác nhau để hội thoại giao tiếp, ASR nhận diện phát âm và chấm điểm; TTS tạo mẫu phát âm chuẩn |
+|  7   | Nền tảng hướng dẫn kế hoạch nghề nghiệp và đề xuất trường đại học dựa trên dữ liệu lớn | LLM phân tích thông tin điểm số, thứ hạng, sở thích của thí sinh, kết hợp dữ liệu tuyển sinh đề xuất trường và chuyên ngành |
+|  8   | Trợ lý code lập trình thiếu nhi                      | LLM giải thích logic code và cung cấp hướng dẫn lập trình, hỗ trợ chuyển đổi giữa ngôn ngữ khối và Python |
+|  9   | Công cụ tự động tạo sơ đồ tư duy kiến thức và đề xuất lộ trình học tập | Nhập chủ đề khóa học, LLM tự động tạo sơ đồ tư duy kiến thức; đề xuất nội dung học tiếp theo theo tiến độ học |
+|  10  | Engine chấm và sửa bài văn Trung-Anh tự động          | LLM chấm điểm nhiều chiều (ý tưởng, cấu trúc, ngôn ngữ, đa dạng) và tạo chú thích; so sánh với bài văn mẫu xuất sắc |
+
+## 4. Lập trình thông minh
+
+Kịch bản lập trình thông minh nhằm nâng cao hiệu suất phát triển và chất lượng code. Các ứng dụng điển hình bao gồm gợi ý code thông minh, sửa Bug tự động, tạo test tự động, chuyển đổi code, v.v., giúp nhà phát triển tập trung vào logic nghiệp vụ thay vì công việc code lặp lại.
+
+| STT | Tên kịch bản ứng dụng                          | Tham khảo triển khai                                                                                                                     |
+| :--: | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+|  1   | Trợ lý gợi ý code thông minh và sửa Bug tự động | Fine-tune mô hình code dựa trên CodeLlama, plugin IDE cung cấp gợi ý code theo thời gian thực; LLM phân tích stack lỗi tự động định vị Bug và tạo code sửa |
+|  2   | Nền tảng xây dựng ứng dụng low-code và tự động hóa quy trình | Người dùng mô tả yêu cầu bằng ngôn ngữ tự nhiên, LLM chuyển đổi thành cấu hình low-code hoặc framework code |
+|  3   | Hệ thống tạo test case đơn vị                  | AST phân tích mã nguồn trích xuất logic hàm, LLM tạo test case cho điều kiện biên và kịch bản bất thường; tích hợp Jest/Pytest chạy test |
+|  4   | Công cụ phân tích code thông minh và chuyển đổi ngôn ngữ | Phân tích cấu trúc code dựa trên Tree-sitter, LLM phân tích chất lượng code và đưa ra đề xuất tối ưu; kết hợp engine quy tắc thực hiện chuyển đổi ngôn ngữ |
+|  5   | Công cụ tự động chuyển đổi ngôn ngữ tự nhiên thành câu lệnh SQL | LLM chuyển đổi truy vấn ngôn ngữ tự nhiên thành SQL, hỗ trợ join và aggregate truy vấn đa bảng phức tạp |
+|  6   | Nền tảng test API tự động và tạo tài liệu      | LLM phân tích chú thích code và định nghĩa interface, tự động tạo test case và tài liệu API; tích hợp Postman chạy test |
+|  7   | Công cụ ghi và duy trì script test UI thông minh | Plugin trình duyệt ghi thao tác người dùng, LLM phân tích ý định thao tác tạo script test; AI sửa locator bị lỗi |
+|  8   | Phân tích log hệ thống và định vị lỗi           | ELK Stack thu thập dữ liệu log, LLM phân tích log bất thường trích xuất thông tin quan trọng và định vị nguyên nhân gốc; đề xuất phương án sửa |
+|  9   | Công cụ tự động tạo code giao diện (UI) frontend | Ảnh thiết kế nhận diện cấu trúc bố cục qua OCR, LLM tạo CSS responsive và code component; tích hợp TailwindCSS hỗ trợ nhiều framework style |
+|  10  | Trợ lý thiết kế và xây dựng cấu trúc cơ sở dữ liệu thông minh | Nhập tài liệu yêu cầu nghiệp vụ cho LLM, tự động tạo ER diagram và cấu trúc bảng dữ liệu; hỗ trợ xuất script tạo bảng MySQL/PostgreSQL |
+
+## 5. Y tế
+
+Kịch bản y tế hướng tới nâng cao hiệu suất chẩn đoán điều trị và chất lượng dịch vụ y tế. Các ứng dụng phổ biến bao gồm tạo bệnh án tự động, hỏi đáp kiến thức y khoa, hỗ trợ phân tích hình ảnh, hỗ trợ nghiên cứu thuốc, v.v., thúc đẩy chuyển đổi số ngành y tế.
+
+| STT | Tên kịch bản ứng dụng                           | Tham khảo triển khai                                                                                                           |
+| :--: | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+|  1   | Trợ lý giải thích báo cáo xét nghiệm y khoa thông minh | Tải ảnh báo cáo xét nghiệm, OCR nhận diện chỉ số quan trọng, LLM giải thích giá trị bất thường và tạo giải thích dễ hiểu |
+|  2   | Chuyên gia tư vấn sức khỏe dựa trên công nghệ truy xuất kiến thức | Xây dựng biểu đồ kiến thức y khoa (ICD-10, hướng dẫn sử dụng thuốc, hướng dẫn chẩn đoán điều trị), RAG truy xuất tạo câu trả lời |
+|  3   | Nền tảng phân tích quyết định dữ liệu nghiên cứu lâm sàng | Tích hợp dữ liệu EMR và kết quả xét nghiệm, LLM hỗ trợ tạo code thống kê phân tích và biểu đồ trực quan; hỗ trợ nghiên cứu đoàn hệ và phân tích sống còn |
+|  4   | Hệ thống tạo câu hỏi y khoa thông minh và giải thích câu sai | Nhập chương giáo trình và điểm kiến thức, LLM tạo bài tập và giải thích; tự động thu thập câu sai và tạo phân tích điểm yếu |
+|  5   | Chuyên gia hỏi đáp biểu đồ kiến thức toàn quy trình nghiên cứu thuốc | Xây dựng biểu đồ kiến thức thuốc-mục tiêu-bệnh, LLM trả lời câu hỏi nghiên cứu liên quan; hỗ trợ tìm kiếm tài liệu và đề xuất phương án thử nghiệm |
+|  6   | Trợ lý hỏi đáp thông minh hướng dẫn sử dụng thuốc | Tải ảnh hướng dẫn sử dụng thuốc hoặc nhập tên thuốc, LLM trả lời các câu hỏi về liều dùng, tác dụng phụ, lưu ý |
+|  7   | Trợ lý tạo bài viết phổ biến kiến thức bệnh lý  | Nhập tên bệnh và đối tượng, LLM tạo bài viết phổ biến dễ hiểu; hỗ trợ nhiều phiên bản (phiên bản bệnh nhân/phiên bản người nhà) |
+|  8   | Công cụ tự động tạo báo cáo hình ảnh y khoa     | Bác sĩ khoa chẩn đoán hình ảnh mô tả đặc điểm hình ảnh, LLM tự động tạo báo cáo có cấu trúc; hỗ trợ mẫu các loại kiểm tra phổ biến |
+|  9   | Trợ lý tạo và lưu trữ hồ sơ phẫu thuật thông minh | Nhập giọng nói các bước quan trọng trong quá trình phẫu thuật, LLM tạo hồ sơ phẫu thuật có cấu trúc; tự động liên kết mã phẫu thuật |
+|  10  | Trợ lý nhắc thuốc thông minh quản lý bệnh mãn tính | Bệnh nhân nhập danh sách thuốc, LLM tạo nhắc thuốc cá nhân hóa; hỗ trợ kiểm tra tương tác thuốc và hỏi đáp tương tác |
+
+## 6. An ninh mạng
+
+Kịch bản an ninh mạng tập trung vào bảo vệ an toàn và quản lý rủi ro. Các ứng dụng cốt lõi bao gồm phát hiện lỗ hổng, phân tích thông tin đe dọa, nhận diện email phishing, ứng phó sự kiện an ninh, v.v., xây dựng hệ thống bảo vệ an toàn thông minh toàn diện cho doanh nghiệp.
+
+| STT | Tên kịch bản ứng dụng                                 | Tham khảo triển khai                                                                                                  |
+| :--: | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+|  1   | Engine phát hiện và sửa lỗi bảo mật code              | Công cụ phân tích code tĩnh (SAST) quét code, LLM phân tích nguyên lý lỗ hổng và tạo đề xuất sửa; tích hợp pipeline CI/CD |
+|  2   | Hệ thống nhận diện và chặn email phishing do AI tạo   | LLM phân tích nội dung email, đặc điểm người gửi và tính an toàn liên kết, nhận diện email phishing do AI tạo; kết nối gateway email chặn theo thời gian thực |
+|  3   | Trợ lý tự động tạo báo cáo vận hành an ninh hàng ngày | Tổng hợp log thiết bị an ninh, LLM tự động trích xuất sự kiện quan trọng và tạo báo cáo hàng ngày; đánh dấu highlight sự kiện bất thường |
+|  4   | Trợ lý hỏi đáp kho kiến thức an ninh thông minh       | Xây dựng kho kiến thức vector dựa trên tài liệu an ninh, cơ sở dữ liệu CVE, LLM trả lời câu hỏi về kỹ thuật an ninh và đề xuất xử lý |
+|  5   | Trợ lý tạo báo cáo kiểm thử xâm nhập thông minh      | Sau khi hoàn thành kiểm thử xâm nhập, LLM tự động tạo báo cáo theo mô tả lỗ hổng; tạo đề xuất sửa lỗi hàng loạt |
+|  6   | Bảo vệ mã độc và giám sát tuân thủ quyền riêng tư     | Phân tích hành vi tệp đáng ngờ trong sandbox, LLM nhận diện đặc điểm mã độc và tạo chữ ký; quét nhận diện dữ liệu riêng tư |
+|  7   | Công cụ tạo danh sách kiểm tra cấu hình an ninh tuân thủ | Nhập loại hệ thống mục tiêu, LLM tạo danh sách kiểm tra cấu hình an ninh; hỗ trợ các tiêu chuẩn như DJCP 2.0, CIS |
+|  8   | Trợ lý truy vấn và phân tích thông tin đe dọa thông minh | Kết nối đa nguồn thông tin đe dọa (mã nguồn mở, thương mại), LLM giải thích thông tin và liên kết tài sản doanh nghiệp; đề xuất chiến lược bảo vệ |
+|  9   | Trợ lý tạo báo cáo tổng kết sự kiện an ninh           | Sau khi xảy ra sự kiện an ninh, LLM tự động tạo báo cáo tổng kết theo mốc thời gian; phân tích nguyên nhân gốc và đề xuất cải tiến |
+|  10  | Trung tâm theo dõi và cảnh báo thông tin đe dọa toàn cầu | Crawler thu thập tin tức an ninh toàn cầu và công bố lỗ hổng, LLM trích xuất thông tin quan trọng và đánh giá tác động; thông báo cảnh báo qua email/SMS |
+
+## 7. Quản lý tài chính, ngân hàng bảo hiểm
+
+Kịch bản tài chính xoay quanh kiểm soát rủi ro và trí tuệ hóa nghiệp vụ. Các ứng dụng điển hình bao gồm đánh giá rủi ro tín dụng, cố vấn quản lý tài sản, tạo báo cáo tài chính, giám sát chống rửa tiền, v.v., nâng cao hiệu suất vận hành và khả năng kiểm soát rủi ro của tổ chức tài chính.
+
+| STT | Tên kịch bản ứng dụng                                 | Tham khảo triển khai                                                                                                     |
+| :--: | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+|  1   | Trợ lý tạo báo cáo thẩm tín tín dụng thông minh       | Nhập thông tin cơ bản doanh nghiệp và dữ liệu tài chính, LLM tự động tạo báo cáo thẩm tín tín dụng; tự động đánh dấu điểm rủi ro |
+|  2   | Cố vấn quản lý tài sản ngân hàng tư nhân thông minh   | LLM phân tích sở thích rủi ro và mục tiêu tài chính của khách hàng, tạo đề xuất phân bổ tài sản; kết nối kho sản phẩm tài chính và quỹ |
+|  3   | Trợ lý tạo và kiểm tra tuân thủ prospectus IPO thông minh | Template modular prospectus, LLM tự động điền mô tả kinh doanh và yếu tố rủi ro; engine quy tắc kiểm tra tuân thủ tính nhất quán |
+|  4   | Hệ thống tự động tạo báo cáo tài chính và cảnh báo bất thường kinh doanh | Thu thập dữ liệu hệ thống tài chính tự động, LLM tạo phân tích tài chính và phần thảo luận ban quản lý; quy tắc cảnh báo chỉ tiêu bất thường |
+|  5   | Trợ lý trích xuất thông tin hóa đơn tài chính và hỏi đáp | Tải ảnh hóa đơn, OCR nhận diện thông tin, LLM trả lời câu hỏi liên quan đến hóa đơn; hỗ trợ hóa đơn VAT, vé tàu, v.v. |
+|  6   | Trợ lý tìm kiếm và hỏi đáp ca tuân thủ thông minh     | Xây dựng kho kiến thức dựa trên ca xử phạt giám sát, LLM trả lời câu hỏi tuân thủ và cung cấp tham khảo ca |
+|  7   | Trợ lý luyện tập kịch bản đại lý bảo hiểm thông minh  | LLM đóng vai các loại khách hàng khác nhau để hội thoại mô phỏng, đánh giá tính tuân thủ và sức thuyết phục kịch bản đại lý; phân tích chuyển đổi ghi âm |
+|  8   | Nền tảng phân tích điều khoản sản phẩm bảo hiểm và so sánh đối thủ | Phân tích cấu trúc điều khoản, LLM tạo tóm tắt điểm nổi bật và lưu ý |
+|  9   | Dịch vụ nhận diện cảm xúc kịch bản khách hàng         | Nhận diện cảm xúc giọng nói kết hợp kiểm tra tuân thủ kịch bản, phản hồi theo thời gian thực đề xuất cải tiến cho đại lý |
+|  10  | Trợ lý hỏi đáp và truy vấn tiến độ bồi thường bảo hiểm thông minh | Người dùng nhập số hợp đồng bảo hiểm hoặc số báo cáo, LLM truy vấn tiến độ bồi thường và trả lời câu hỏi liên quan đến bồi thường |
+
+## 8. Dịch vụ doanh nghiệp
+
+Kịch bản dịch vụ doanh nghiệp hướng tới nâng cao hiệu suất vận hành tổ chức và mức độ quản lý. Các ứng dụng phổ biến bao gồm quản lý quan hệ khách hàng, dự báo bán hàng, theo dõi dư luận, quản lý nhân sự thông minh, v.v., giúp doanh nghiệp thực hiện chuyển đổi số.
+
+| STT | Tên kịch bản ứng dụng                           | Tham khảo triển khai                                                                                         |
+| :--: | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+|  1   | Nền tảng phân tích giữ chân khách hàng và cảnh báo rời đi | Thu thập thao tác người dùng qua tracking hành vi, mô hình ML dự đoán xác suất rời đi, LLM tạo đề xuất giữ chân |
+|  2   | Nền tảng tiếp cận và email marketing khách hàng tiềm năng B2B | Lọc khách hàng mục tiêu qua dữ liệu đăng ký doanh nghiệp, LLM tạo nội dung marketing cá nhân hóa; kết nối nền tảng gửi email hàng loạt |
+|  3   | Nền tảng theo dõi pipeline bán hàng và dự báo doanh thu | Thu thập dữ liệu CRM tự động, LLM phân tích phễu bán hàng và dự báo hoàn thành doanh thu; cảnh báo bất thường đẩy cho quản lý |
+|  4   | Radar theo dõi dư luận thương hiệu và cảnh báo khủng hoảng | Thu thập dữ liệu dư luận toàn mạng (mạng xã hội, tin tức, diễn đàn), LLM phân tích cảm xúc và xu hướng lan truyền; đẩy cảnh báo khủng hoảng |
+|  5   | Trợ lý viết email công sở thông minh và quản lý cảm xúc giao tiếp | Hiểu ngữ cảnh email, LLM tạo nháp email chuyên nghiệp; phân tích cảm xúc phản hồi đề xuất cải tiến |
+|  6   | Hệ thống phân tích CV và khớp vị trí thông minh   | Phân tích CV PDF trích xuất thông tin quan trọng, LLM khớp vị trí phù hợp và tạo đề xuất phỏng vấn; kết nối hệ thống ATS |
+|  7   | Trợ lý hướng dẫn và hỏi đáp nhân viên mới           | RAG truy xuất kho kiến thức tài liệu nhập học, LLM trả lời câu hỏi phổ biến của nhân viên mới |
+|  8   | Nền tảng phản hồi hiệu suất nhân viên và quản lý mục tiêu OKR | Thu thập dữ liệu hệ thống OKR, LLM phân tích hoàn thành mục tiêu và tạo đề xuất phản hồi; thu thập phản hồi 360 độ |
+|  9   | Ghi chép cuộc họp thông minh và quản lý việc cần làm | Chuyển đổi ghi âm cuộc họp, LLM trích xuất điểm thảo luận quan trọng và việc cần làm; hệ thống task tự động tạo việc cần làm |
+|  10  | Nhận diện hóa đơn và xử lý hoàn phí tự động         | OCR nhận diện thông tin hóa đơn, tự động kiểm tra tính xác thực và tuân thủ hoàn phí hóa đơn; kết nối hệ thống tài chính |
+
+## 9. Sản xuất và vận hành nội dung
+
+Kịch bản sản xuất và vận hành nội dung tập trung vào sáng tạo và vận hành lưu lượng. Các ứng dụng cốt lõi bao gồm sáng tạo văn bản, sản xuất video ngắn, livestream người ảo, tối ưu SEO, v.v., giúp doanh nghiệp nâng cao hiệu suất sản xuất nội dung và tỷ lệ chuyển đổi marketing.
+
+| STT | Tên kịch bản ứng dụng                              | Tham khảo triển khai                                                                                               |
+| :--: | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+|  1   | Nền tảng hỗ trợ sáng tạo nội dung phim ảnh và tiểu thuyết | LLM cung cấp hỗ trợ sáng tạo như tóm tắt cốt truyện, thiết lập nhân vật, tạo thoại; sơ đồ tư duy trực quan hóa cấu trúc cốt truyện |
+|  2   | Trợ lý viết câu chuyện thương hiệu và bài PR doanh nghiệp thông minh | Nhập từ khóa thương hiệu và thông tin sản phẩm, LLM tạo phiên bản nội dung đa phong cách; kết hợp giao diện A/B test |
+|  3   | Hệ thống tương tác livestream và quản lý đẩy stream người ảo | Xây dựng hình ảnh người ảo + giọng nói TTS + hội thoại LLM, phản hồi bình luận khán giả theo thời gian thực; tích hợp đẩy stream OBS |
+|  4   | Tạo kịch bản video ngắn và chỉnh sửa thông minh    | LLM tạo kịch bản video ngắn và phân cảnh, Sora/Runway tạo đoạn video; công cụ chỉnh sửa tự động ghép nối |
+|  5   | Chuyển đổi giọng nói hội thoại bán hàng và đề xuất kịch bản | Ghi âm điện thoại chuyển đổi ASR, LLM phân tích hội thoại và đề xuất kịch bản xuất sắc; tích hợp hệ thống CRM |
+|  6   | Hệ thống tạo và thiết kế nội dung marketing thông minh | Nhập thông tin sản phẩm, LLM tạo nội dung marketing và trích xuất điểm bán hàng; tích hợp template Canva/Gianding |
+|  7   | Hệ thống giám sát ROI quảng cáo đa nền tảng theo thời gian thực và tối ưu chiến lược | Kết nối API nền tảng quảng cáo thu thập dữ liệu, LLM phân tích hiệu quả chạy quảng cáo và tạo đề xuất tối ưu; đẩy cảnh báo bất thường |
+|  8   | Phân tích từ khóa công cụ tìm kiếm và lưu lượng     | Thu thập dữ liệu Baidu Index, 5118, LLM phân tích xu hướng từ khóa và mức độ cạnh tranh; đề xuất chủ đề nội dung |
+|  9   | Nền tảng phân tích quảng cáo đối thủ               | Thu thập quảng cáo đối thủ qua API nền tảng dữ liệu bên thứ ba, LLM phân tích chiến lược chạy quảng cáo và đặc điểm sáng tạo |
+|  10  | Hệ thống phân tích chủ đề nóng toàn mạng và đề xuất nội dung thông minh | Thu thập dữ liệu top trending Weibo, top trending Douyin, LLM phân tích xu hướng chủ đề nóng và đề xuất góc tiếp cận; lịch nội dung theo dạng lịch |
+
+## 10. Quản trị hành chính thông minh
+
+Kịch bản quản trị hành chính thông minh hướng tới nâng cao hiệu năng dịch vụ chính phủ và năng lực quản trị. Các ứng dụng điển hình bao gồm điều hướng thông minh đường dây nóng chính phủ, hỏi đáp chính sách thông minh, tối ưu phê duyệt hành chính, quản lý sự kiện đô thị, v.v., thúc đẩy xây dựng chính phủ số.
+
+| STT | Tên kịch bản ứng dụng                                 | Tham khảo triển khai                                                                                           |
+| :--: | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+|  1   | Hệ thống điều hướng giọng nói thông minh và phân công tự động đường dây nóng 12345 | Nhận diện giọng nói cuộc gọi của công dân, LLM hiểu yêu cầu và phân công thông minh đến bộ phận tương ứng; hệ thống ticket tự động luân chuyển |
+|  2   | Robot hướng dẫn thông minh và hỏi đáp chính sách tại đại dịch vụ hành chính | RAG truy xuất kho kiến thức hành chính, LLM trả lời câu hỏi về quy trình thủ tục và chính sách; kết nối hệ thống lấy số |
+|  3   | Nền tảng đối chiếu và đẩy thông minh chính sách hỗ trợ doanh nghiệp | Phân tích cấu trúc chính sách, hồ sơ doanh nghiệp tự động đối chiếu chính sách phù hợp; đẩy nhắc nhở qua SMS/email |
+|  4   | Trợ lý kiểm tra trước và xác nhận tuân thủ tài liệu phê duyệt hành chính thông minh | Nhận diện OCR tài liệu và trích xuất thông tin quan trọng, LLM kiểm tra tính đầy đủ và tuân thủ tài liệu |
+|  5   | Hệ thống phát hiện hành vi bất thường trong camera giám sát an toàn công cộng | Phân tích luồng video theo thời gian thực, mô hình CV phát hiện hành vi bất thường (đánh nhau, té ngã, v.v.); đẩy cảnh báo |
+|  6   | Nền tảng nhận diện sự kiện lưới đô thị thông minh và điều phối quản lý | Thu thập dữ liệu cảm biến đô thị (IoT, camera), LLM nhận diện loại sự kiện và phân công |
+|  7   | Hệ thống phân tích dữ liệu lớn dư luận xã hội và cảnh báo rủi ro | Phân tích tích hợp đa nguồn dữ liệu (đường dây nóng chính phủ, dư luận mạng, khảo sát xã hội); LLM nhận diện điểm nóng rủi ro |
+|  8   | Nền tảng số hóa hồ sơ hành chính và quản lý lưu trữ thông minh | Nhận diện văn bản hồ sơ qua OCR, LLM trích xuất thông tin quan trọng và phân loại tự động; hỗ trợ tìm kiếm toàn văn |
+|  9   | Nền tảng chỉ huy ứng phó khẩn cấp và điều phối nguồn lực cứu hộ sự kiện công cộng | Thu thập thông tin sự kiện, LLM tạo phương án ứng phó khẩn cấp; thuật toán tối ưu điều phối nguồn lực |
+|  10  | Hệ thống giám sát phân mảnh ô nhiễm môi trường không khí và truy nguồn chính xác | Thu thập dữ liệu cảm biến chất lượng không khí, mô hình CV nhận diện nguồn ô nhiễm; LLM phân tích xu hướng ô nhiễm và truy nguồn |
+
+## 11. Pháp lý và quản lý hợp đồng
+
+Kịch bản pháp lý tập trung vào nâng cao hiệu suất dịch vụ pháp lý và quản lý tuân thủ. Các ứng dụng phổ biến bao gồm kiểm tra hợp đồng, phân tích vụ án, theo dõi luật pháp, tạo văn bản pháp lý, v.v., cung cấp hỗ trợ công cụ thông minh cho người hành nghề pháp lý.
+
+| STT | Tên kịch bản ứng dụng                                             | Tham khảo triển khai                                                                                     |
+| :--: | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+|  1   | Agent phát hiện rủi ro hợp đồng một chạm                          | Phân tích cấu trúc văn bản hợp đồng, LLM đối chiếu danh mục rủi ro nhận diện vấn đề tiềm ẩn; đánh dấu điều khoản rủi ro cao |
+|  2   | Nền tảng kiểm tra tuân thủ và đề xuất sửa đổi hợp đồng doanh nghiệp toàn vòng đời | So sánh điều khoản hợp đồng với cơ sở dữ liệu luật pháp, LLM tạo báo cáo kiểm tra tuân thủ; theo dõi đề xuất sửa đổi |
+|  3   | Cố vấn đánh giá tỷ lệ thắng kiện AI cho các vụ án tương tự       | Trích xuất đặc điểm vụ án, tìm kiếm và đối chiếu vụ án tương tự; LLM phân tích yếu tố ảnh hưởng đến thắng kiện |
+|  4   | Radar theo dõi thay đổi luật pháp và phân tích tác động kinh doanh | Cơ sở dữ liệu luật pháp cập nhật theo thời gian thực, LLM phân tích nội dung thay đổi và đánh giá tác động kinh doanh; đẩy cảnh báo |
+|  5   | Công cụ soạn thư luật sư AIGC tự động                             | Nhập trình bày sự kiện, LLM tạo template thư luật sư chuẩn mực; kiểm tra yếu tố và xác nhận tuân thủ |
+|  6   | Máy ghi âm chuyển đổi theo thời gian thực tại tòa và trích xuất tự động trọng điểm tranh chấp | Chuyển đổi ASR ghi âm tòa án, LLM trích xuất trọng điểm tranh chấp và luận điểm quan trọng; đánh dấu timestamp |
+|  7   | Hệ thống theo dõi tự động vi phạm sở hữu trí tuệ và thu thập chứng cứ blockchain toàn mạng | Giám sát vi phạm trên nền tảng thương mại điện tử, mạng xã hội; tự động thu thập và lưu chứng cứ vi phạm |
+|  8   | Agent kiểm tra nhất quán dữ liệu quan trọng và cảnh báo rủi ro prospectus IPO dựa trên LLM | So sánh dữ liệu nhiều chương prospectus, LLM nhận diện không nhất quán và dữ liệu bất thường; đánh dấu rủi ro |
+|  9   | Plugin giải thích điều khoản pháp luật phức tạp sang ngôn ngữ dễ hiểu | Chọn điều khoản luật, LLM tạo giải thích dễ hiểu |
+|  10  | Hệ thống sắp xếp chuỗi chứng cứ vụ án thông minh và hiển thị trực quan | Tải tài liệu chứng cứ, LLM phân tích quan hệ chứng cứ và mốc thời gian |
+
+## 12. Du lịch và dịch vụ đi lại
+
+Kịch bản du lịch hướng tới nâng cao trải nghiệm du lịch và sự tiện lợi của dịch vụ. Các ứng dụng cốt lõi bao gồm lập lịch trình thông minh, dự báo giá, tham quan ảo, dịch thuật, v.v., giúp du lịch trở nên dễ dàng và thú vị hơn.
+
+| STT | Tên kịch bản ứng dụng                                 | Tham khảo triển khai                                                                                                       |
+| :--: | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+|  1   | Trình tạo lịch trình du lịch lười dựa trên AIGC      | Nhập sở thích người dùng (số ngày, ngân sách, sở thích), LLM tạo lịch trình hàng ngày; API điểm tham quan lấy giờ mở cửa và vé |
+|  2   | Robot dự đoán xu hướng giá vé máy bay khách sạn toàn mạng và tự động khóa giá rẻ | Thu thập dữ liệu giá OTA, mô hình ML dự đoán xu hướng giá; nhắc nhở giám sát giá |
+|  3   | Cố vấn đề xuất phương án khẩn cấp và tái tổ chức lịch trình liên hãng khi hủy chuyến | Giám sát trạng thái chuyến bay, LLM phân tích phương án lịch trình thay thế; so sánh giá đa hãng |
+|  4   | Hệ thống hỗ trợ kiểm tra trước tài liệu visa và điền form tự động | Chụp ảnh tải tài liệu, nhận diện OCR kiểm tra tính đầy đủ thông tin; tự động điền form |
+|  5   | Trợ lý dịch giọng nói thời gian thực và dịch menu thị giác khi du lịch nước ngoài | Mô hình dịch giọng nói ngoại tuyến, nhận diện OCR ảnh menu và dịch |
+|  6   | Máy phân tích hướng dẫn "tránh rủi ro" khách sạn dựa trên đánh giá thực tế dữ liệu lớn | Thu thập dữ liệu đánh giá khách sạn, LLM trích xuất từ khóa đánh giá tích cực/tiêu cực |
+|  7   | Nền tảng tương tác chọn phòng ảo và xem trước VR immerrsive tại điểm đến | Thu thập ảnh toàn cảnh 360°, công nghệ VR xem trước immerrsive; tham quan ảo phòng |
+|  8   | Trợ lý tự động tạo bài du ký và nội dung mạng xã hội từ dấu chân du lịch | Trích xuất thông tin thời gian địa điểm từ ảnh, LLM tạo nội dung bài du ký; tạo bố cục theo template |
+|  9   | Nền tảng quản lý hoàn phí tuân thủ và thu thập hóa đơn công tác tự động doanh nghiệp | Kết nối API nền tảng công tác, thu thập thông tin hóa đơn tự động; kiểm tra tuân thủ |
+|  10  | Dự đoán tắc nghẽn khách du lịch theo thời gian thực và điều hướng lộ trình du lịch tránh giờ cao điểm | Thu thập dữ liệu khách du lịch điểm tham quan, mô hình ML dự đoán khung giờ tắc nghẽn; đề xuất tránh giờ cao điểm |
+
+## 13. Đồng hành cảm xúc
+
+Kịch bản đồng hành cảm xúc tập trung vào sức khỏe tâm thần và an ủi cảm xúc. Các ứng dụng điển hình bao gồm người bạn đồng hành ảo, tư vấn cảm xúc, huấn luyện nhận thức, tư vấn tâm lý, v.v., cung cấp đồng hành và hỗ trợ toàn thời gian cho người dùng.
+
+| STT | Tên kịch bản ứng dụng                                 | Tham khảo triển khai                                                                                     |
+| :--: | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+|  1   | Người bạn đồng hành ảo 24 giờ dựa trên mô hình LLM   | Hệ thống ghi nhớ lưu trữ lịch sử hội thoại, LLM tạo phản hồi cá nhân hóa; module hỗ trợ cảm xúc |
+|  2   | Cố vấn AI nhận diện cảm xúc đa phương thức và tư vấn tâm lý | Phân tích ngữ điệu giọng nói + nhận diện cảm xúc văn bản, LLM tạo đề xuất tư vấn; cảnh báo can thiệp khủng hoảng |
+|  3   | Người ảo AI huấn luyện nhận thức và kích thích trí nhớ cho người bệnh Alzheimer | Huấn luyện trò chơi nhận thức (trí nhớ, tính toán, ngôn ngữ); ảnh cũ/bài hát cũ kích thích trí nhớ |
+|  4   | Huấn luyện viên mô phỏng giao tiếp xã hội AIGC cho người hướng nội | Mô phỏng tình huống giao tiếp xã hội ảo, LLM đóng vai khác nhau; đề xuất kỹ năng giao tiếp |
+|  5   | Máy tạo câu chuyện trước khi ngủ cá nhân hóa GenAI    | Cha mẹ nhập chủ đề và sở thích, LLM tạo câu chuyện cá nhân hóa; tạo nhạc nền |
+|  6   | Hệ thống phục hồi cuộc sống số người đã khuất và hội thoại xuyên không gian thời gian LLM | Đào tạo mô hình cá nhân hóa từ tài liệu khi còn sống (giọng nói, văn bản); tạo hội thoại ghi nhớ |
+|  7   | Robot chat đồng cảm và phản chiếu tính cách AI dựa trên dữ liệu MBTI | Nhập kết quả test MBTI, LLM tạo phân tích tính cách và phản hồi đồng cảm; đề xuất khớp tính cách |
+|  8   | Trợ lý theo dõi tâm trạng toàn thời gian và kích thích cảm xúc tích cực AI | Ghi nhận trạng thái tâm trạng hàng ngày, LLM phân tích xu hướng và tạo nội dung khích lệ; đẩy nhắc nhở tích cực |
+|  9   | Hòm thư AI tâm sự ẩn danh bảo vệ quyền riêng tư cho thanh thiếu niên | Lối vào tâm sự ẩn danh, LLM cung cấp lắng nghe và đề xuất; cảnh báo từ nhạy cảm |
+|  10  | Hệ thống nuôi thú ảo AI có khả năng tiến hóa tự chủ    | Đào tạo mô hình tính cách thú cưng, tương tác hội thoại lớn lên tiến hóa; hệ thống trang phục ảo |
+
+## 14. Giải trí
+
+Kịch bản giải trí hướng tới cung cấp trải nghiệm giải trí số phong phú. Các ứng dụng phổ biến bao gồm quyết định thông minh NPC game, hỗ trợ kịch bản nhập vai, sáng tạo nội dung, xử lý âm thanh video, v.v., đáp ứng nhu cầu giải trí đa dạng của người dùng.
+
+| STT | Tên kịch bản ứng dụng                                 | Tham khảo triển khai                                                                                     |
+| :--: | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+|  1   | Engine quyết định tự chủ NPC game thế giới mở dựa trên LLM | Cây hành vi NPC kết hợp quyết định LLM, hệ thống hội thoại tạo tương tác cá nhân hóa; engine hành vi |
+|  2   | Công cụ hỗ trợ DM với diễn biến cốt truyện AIGC cho game kịch bản nhập vai | Lựa chọn người chơi kích hoạt nhánh cốt truyện, LLM tạo logic suy luận; tự động tạo thẻ manh mối |
+|  3   | Trình sửa đổi kết thúc truyện tương tác dạng sinh    | Lựa chọn độc giả ảnh hưởng hướng đi cốt truyện, LLM tạo nhiều nhánh kết thúc |
+|  4   | Bàn làm việc tạo mô hình 3D nhân vật anime AIGC tự động | Mô tả văn bản tạo phác thảo nhân vật, công cụ mô hình 3D tự động xây dựng; render vật liệu texture |
+|  5   | Phân tích thị giác CV và bình luận viên AI thông minh cho trận đấu e-sports | Phân tích thời gian thực màn hình game, nhận diện khoảnh khắc quan trọng; LLM tạo bình luận |
+|  6   | Engine thuật toán đề xuất nội dung hài hước cá nhân hóa | Hồ sơ sở thích người dùng, đề xuất khớp nội dung hài hước |
+|  7   | Phần mềm chỉnh giọng hát và làm đẹp giọng KTV AI       | Xử lý giảm nhiễu và tăng cường giọng người; thuật toán chỉnh giọng AI |
+|  8   | Công cụ trích xuất AI cốt truyện riêng nhân vật phim truyền hình và tự động chỉnh sửa | Phân tích nội dung video, trích xuất đoạn liên quan nhân vật; tự động chỉnh sửa tạo |
+|  9   | Hệ thống tự động tạo sách nói TTS đa vai              | Phân vai văn bản, tạo giọng nói cá nhân hóa; thêm nhạc nền và hiệu ứng âm thanh |
+|  10  | Huấn luyện viên đối chiến và phân tích ván cờ board game reinforcement learning | Phân tích ván cờ, mô phỏng đối chiến đối thủ AI; tạo đề xuất phân tích ván |
+
+## 15. Thương mại điện tử
+
+Kịch bản thương mại điện tử tập trung vào nâng cao hiệu suất vận hành và tỷ lệ chuyển đổi. Các ứng dụng cốt lõi bao gồm tạo nội dung sản phẩm, livestream bán hàng, dịch vụ khách hàng, phân tích giá, v.v., giúp người bán thực hiện vận hành thông minh.
+
+| STT | Tên kịch bản ứng dụng                                  | Tham khảo triển khai                                                                                              |
+| :--: | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+|  1   | Công cụ sản xuất hàng loạt trang chi tiết sản phẩm AIGC tỷ lệ chuyển đổi cao | Nhập thông tin sản phẩm, LLM tạo nội dung điểm bán hàng và mô tả kịch bản; tạo ảnh nền |
+|  2   | Nhà máy tạo video người mẫu ảo thử đồ AI cho ngành may mặc | Xử lý ảnh sản phẩm may mặc phẳng, tạo hiệu quả thử đồ người mẫu ảo; video trình diễn đa góc độ |
+|  3   | Trợ lý dịch thuật và biên tập bản địa hóa đa ngôn ngữ LLM cho thương mại điện tử xuyên biên giới | Dịch mô tả sản phẩm đa ngôn ngữ, biên tập thích ứng văn hóa; giao diện phát hành đa nền tảng |
+|  4   | Robot phân tích cảm xúc khách hàng và phản hồi thông minh dựa trên NLP | Phân tích cảm xúc hội thoại tư vấn, tự động tạo phản hồi xoa dịu; phân loại đánh giá tốt/xấu |
+|  5   | Hệ thống livestream bán hàng người ảo AIGC toàn thời gian 24 giờ | Hình ảnh người ảo + tạo kịch bản theo thời gian thực, gọi thông tin sản phẩm theo thời gian thực; phản hồi tương tác bình luận |
+|  6   | Plugin so sánh giá AI sản phẩm tương tự toàn mạng và dự đoán xu hướng | Crawl giá nền tảng thương mại điện tử, hiển thị biểu đồ so sánh giá; dự đoán xu hướng giá |
+|  7   | Nền tảng lọc thông minh ảnh review khách hàng và tổng hợp video ngắn | Chấm điểm chất lượng ảnh review khách hàng, tự động đề xuất nội dung chất lượng; tổng hợp template video ngắn |
+|  8   | Phân tích giọng nói hội thoại bán hàng theo thời gian thực và đề xuất kịch bản xuất sắc dựa trên LLM | Chuyển đổi ASR cuộc gọi, kiểm tra tuân thủ kịch bản theo thời gian thực; đề xuất kịch bản |
+|  9   | Engine dự đoán xu hướng thị trường AI và dự đoán sản phẩm hot | Thu thập và phân tích dữ liệu mạng xã hội và thương mại điện tử, LLM phát hiện xu hướng hot; đề xuất lựa chọn sản phẩm |
+|  10  | Hệ thống vận hành tinh tế và phân cụm hồ sơ người dùng traffic riêng AI | Phân tích cụm dữ liệu hành vi người dùng, tạo tag hồ sơ; kích hoạt marketing tự động |
+
+## 16. Năng lượng
+
+Kịch bản năng lượng hướng tới thực hiện quản lý thông minh và chuyển đổi xanh trong ngành năng lượng. Các ứng dụng điển hình bao gồm phân tích tiêu điện, phát hiện thiết bị, tính toán phát thải carbon, tối ưu điều phối, v.v., thúc đẩy vận hành hiệu quả hệ thống năng lượng.
+
+| STT | Tên kịch bản ứng dụng                                     | Tham khảo triển khai                                                                                     |
+| :--: | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+|  1   | Cố vấn phân tích hành vi tiêu điện gia đình và chiến lược tiết kiệm năng lượng AI | Thu thập dữ liệu đồng hồ điện thông minh, phân tích mô hình tiêu điện; LLM tạo đề xuất tiết kiệm năng lượng |
+|  2   | Hệ thống nhận diện thị giác CV drone phát hiện lỗi linh kiện quang điện | Drone kiểm tra chụp ảnh, phân tích ảnh nhiệt hồng ngoại; đánh dấu phát hiện lỗi |
+|  3   | Agent dự đoán xu hướng giá giao dịch điện thời gian thực AI và chiến lược sinh lời tự động | Thu thập dữ liệu thị trường điện, mô hình dự đoán giá; tạo chiến lược và thực hiện giao dịch |
+|  4   | Hệ thống phát hiện sức khỏe không phá hủy AI và cảnh báo rủi ro mất kiểm soát nhiệt pin lưu trữ | Giám sát dữ liệu vận hành pin, mô hình đánh giá sức khỏe; đẩy cảnh báo rủi ro |
+|  5   | Trợ lý tự động tính toán phát thải carbon toàn chuỗi doanh nghiệp và tạo báo cáo ESG AI | Thu thập dữ liệu tiêu thụ năng lượng, tính toán hệ số phát thải carbon; tự động tạo báo cáo ESG |
+|  6   | Hệ thống dự đoán phụ tải AI thời tiết cực đoan và chỉ huy điều phối khẩn cấp lưới điện | Kết nối dữ liệu thời tiết, mô hình dự đoán phụ tải; tạo chiến lược điều phối |
+|  7   | Bảo vệ video AI phát hiện hành vi vi phạm và cảnh báo tại trạm xăng | Phân tích giám sát video, phát hiện hành vi vi phạm (điện thoại, hút thuốc, v.v.); đẩy cảnh báo |
+|  8   | Hệ thống giám sát sóng âm AI phát hiện rò rỉ và định vị chính xác đường ống dẫn dầu khí dài | Thu thập dữ liệu cảm biến sóng âm, mô hình phát hiện rò rỉ; thuật toán tính định vị |
+|  9   | Hệ thống quyết định giao dịch điện AI và tập hợp nguồn lực nhà máy ảo | Kết nối nguồn lực phân tán, điều phối tối ưu tập hợp; thực hiện chiến lược giao dịch |
+|  10  | Theo dõi vị trí nhân viên AI mỏ và cảnh báo xâm phạm khu vực nguy hiểm | Định vị UWB/Bluetooth, theo dõi quỹ đạo nhân viên; hàng rào điện tử khu vực nguy hiểm |
+
+## 17. Âm thanh và video
+
+Kịch bản âm thanh video tập trung vào sản xuất nội dung và xử lý media. Các ứng dụng phổ biến bao gồm cắt video, tổng hợp giọng nói, tạo phụ đề, phục hồi video, v.v., nâng cao hiệu suất và chất lượng sản xuất nội dung âm thanh video.
+
+| STT | Tên kịch bản ứng dụng                                 | Tham khảo triển khai                                                                                 |
+| :--: | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+|  1   | Công cụ nhận diện đoạn hay AI và tự động cắt video ngắn từ video dài | Phân tích nội dung video, nhận diện khung hình quan trọng; tự động cắt đoạn hay |
+|  2   | Trợ lý tách tiếng ồn nền AI và tăng cường giọng nói video | Mô hình tách âm thanh, loại bỏ tiếng ồn nền; xử lý tăng cường giọng người |
+|  3   | Bàn làm việc phục hồi siêu phân giải 4K và tự động tô màu AI cho video cũ | Mô hình siêu phân giải video, phục hồi chất lượng video cũ; tự động tô màu AI |
+|  4   | Hệ thống kiểm soát cảm xúc và lồng tiếng TTS chuyển văn bản thành giọng người thật | Mô hình TTS đa giọng, tạo kiểm soát cảm xúc; xuất âm thanh |
+|  5   | Công cụ tự động nhận diện giọng nói video ASR và tạo phụ đề song ngữ | Nhận diện giọng nói tạo phụ đề, dịch đa ngôn ngữ; ghép phụ đề song ngữ |
+|  6   | Engine tách đối tượng thừa AI trong khung hình video | Theo dõi đối tượng video, loại bỏ và sửa khung; xử lý tính nhất quán giữa các khung |
+|  7   | Máy soạn nhạc tự động AIGC nhạc nền không bản quyền  | Mô hình tạo nhạc, phong cách cảm xúc có thể kiểm soát; kiểm tra bản quyền |
+|  8   | Phần mềm nhân bản giọng người cụ thể AI và chuyển đổi giọng nói | Đào tạo mô hình giọng từ ít mẫu giọng nói; xử lý chuyển đổi giọng |
+|  9   | Nền tảng chuyển đổi kịch bản sang phân cảnh một chạm và tạo video dự diễn AI | Phân tích kịch bản tạo phân cảnh, AI tạo video dự diễn |
+|  10  | Trợ lý chuyển đổi giọng nói thông minh và trích xuất việc cần làm từ ghi âm cuộc họp AI | Tách và chuyển đổi giọng nói cuộc họp nhiều người, LLM trích xuất việc cần làm; đánh dấu timestamp |
+
+## 18. Marketing AI
+
+Kịch bản marketing AI hướng tới nâng cao hiệu suất marketing và sản xuất sáng tạo. Các ứng dụng cốt lõi bao gồm tạo nội dung, thiết kế poster, theo dõi chủ đề nóng, phân tích đối thủ, v.v., giúp doanh nghiệp thực hiện marketing chính xác và truyền thông thương hiệu.
+
+| STT | Tên kịch bản ứng dụng                               | Tham khảo triển khai                                                                                       |
+| :--: | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+|  1   | Engine AIGC tự động viết nội dung viral trên Xiaohongshu | Nhập chủ đề, LLM tạo nội dung review sản phẩm; tối ưu emoji và thẻ chủ đề |
+|  2   | Công cụ bố trí AI poster marketing và thích ứng đa kích thước | Nhập nội dung, khớp template poster thông minh và xuất đa kích thước |
+|  3   | Nền tảng tạo sáng tạo LOGO thương hiệu AIGC và xây dựng hệ thống VI | Nhập từ khóa thương hiệu, tạo sáng tạo LOGO; tạo quy phạm VI |
+|  4   | Trợ lý theo dõi chủ đề nóng AI toàn mạng và tạo sáng tạo marketing | Thu thập dữ liệu chủ đề nóng, LLM phân tích góc marketing; tạo đề án sáng tạo |
+|  5   | Quản lý đấu giá ngân sách AI và giám sát ROI quảng cáo theo thời gian thực | Kết nối dữ liệu nền tảng quảng cáo, mô hình phân tích hiệu quả; tối ưu chiến lược đấu giá |
+|  6   | Máy tạo báo cáo tuần phân tích sâu chiến lược marketing đối thủ AI | Thu thập và phân tích nội dung đối thủ, trích xuất chiến lược; tự động tạo báo cáo tuần |
+|  7   | Viết hàng loạt bài thu hút traffic và bố trí từ khóa SEO AI | Phân tích từ khóa, tạo bài hàng loạt; đề xuất tối ưu SEO |
+|  8   | Chuyên gia viết email marketing cá nhân hóa AI      | Dữ liệu hồ sơ người dùng, tạo nội dung cá nhân hóa; A/B test |
+|  9   | Radar cảnh báo khủng hoảng dư luận và theo dõi danh tiếng thương hiệu AI toàn mạng | Thu thập dữ liệu dư luận toàn mạng, phân tích cảm xúc; đẩy cảnh báo khủng hoảng |
+|  10  | Trợ lý tạo sáng tạo kịch bản video ngắn AIGC và hướng dẫn phân cảnh | Nhập chủ đề, tạo kịch bản và phân cảnh; hướng dẫn quay phim |
+
+## 19. Trí tuệ dữ liệu
+
+Kịch bản trí tuệ dữ liệu tập trung vào phân tích dữ liệu và khai thác giá trị. Các ứng dụng điển hình bao gồm truy vấn ngôn ngữ tự nhiên, tạo trực quan, quản trị dữ liệu, xây dựng biểu đồ kiến thức, v.v., giúp doanh nghiệp thực hiện hỗ trợ quyết định dựa trên dữ liệu.
+
+| STT | Tên kịch bản ứng dụng                           | Tham khảo triển khai                                                                                             |
+| :--: | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+|  1   | Engine truy vấn dữ liệu ngôn ngữ tự nhiên dựa trên Text-to-SQL | Chuyển đổi ngôn ngữ tự nhiên thành truy vấn SQL, hiển thị trực quan kết quả |
+|  2   | BI hội thoại: tạo biểu đồ trực quan bằng một câu | Mô tả nhu cầu dữ liệu, tự động tạo biểu đồ; hỗ trợ chuyển đổi đa loại biểu đồ |
+|  3   | Công cụ nhận diện bảng Excel từ ảnh chụp màn hình một chạm | Tải ảnh chụp màn hình, VLM nhận diện cấu trúc bảng và dữ liệu; xuất file Excel |
+|  4   | Công cụ nhận diện AI chuyển ảnh và ảnh chụp màn hình thành bảng Excel | Nhận diện cấu trúc bảng qua OCR ảnh, xuất dữ liệu sang Excel |
+|  5   | Xây dựng biểu đồ kiến thức dữ liệu đa nguồn dị cấu tự động | Kết nối đa nguồn dữ liệu, trích xuất thực thể và quan hệ; lưu trữ cơ sở dữ liệu đồ thị |
+|  6   | Trợ lý giải thích thông minh báo cáo dữ liệu và phân tích xu hướng | Tải ảnh báo cáo dữ liệu hoặc nhập dữ liệu, VLM giải thích nội dung biểu đồ và phân tích xu hướng |
+|  7   | Trợ lý giải thích cấu trúc bảng cơ sở dữ liệu và tạo ví dụ truy vấn thông minh | Nhập tên bảng hoặc mô tả trường, LLM tạo giải thích tạo bảng và SQL truy vấn ví dụ |
+|  8   | Căn chỉnh master data doanh nghiệp thông minh và quản trị trùng lặp AI | Khớp master data đa nguồn, nhận diện bản ghi trùng; cấu hình quy tắc gộp |
+|  9   | Công cụ chuyển đổi tài liệu yêu cầu dữ liệu thành test case thông minh | Nhập mô tả yêu cầu dữ liệu, LLM tạo kịch bản test và test case xác minh |
+|  10  | Trợ lý hỏi đáp về chỉ tiêu dữ liệu thông minh   | Xây dựng kho kiến thức dựa trên tài liệu định nghĩa chỉ tiêu, LLM trả lời câu hỏi về định nghĩa chỉ tiêu, logic tính toán, v.v. |
diff --git a/docs/vi-vn/stage-1/appendix-jobs-to-be-done/index.md b/docs/vi-vn/stage-1/appendix-jobs-to-be-done/index.md
new file mode 100644
index 0000000..a4c84c4
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-jobs-to-be-done/index.md
@@ -0,0 +1,496 @@
+---
+title: 'Dùng Jobs to Be Done tìm ra việc người dùng thực sự muốn hoàn thành'
+description: 'Bài viết Jobs to Be Done dành cho người mới. Hiểu người dùng không phải mua chức năng, mà đang "thuê" sản phẩm của bạn để hoàn thành tiến triển trong kịch bản cụ thể, học cách dùng JTBD phân tích hướng sản phẩm, câu hỏi phỏng vấn và AI prompt.'
+---
+
+<script setup>
+const duration = 'Khoảng <strong>1.5 giờ</strong>'
+</script>
+
+# Dùng Jobs to Be Done tìm ra việc người dùng thực sự muốn hoàn thành
+
+<a id="top-jtbd"></a>
+
+## Hướng dẫn chương này
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['JTBD', 'Nhu cầu người dùng', 'Tư duy sản phẩm', 'Insight nhu cầu']"
+  coreOutput="1 câu JTBD giống nhu cầu thực tế hơn"
+  expectedOutput="Có thể thu ý tưởng mơ hồ thành kịch bản người dùng và hướng MVP cụ thể hơn"
+>
+
+Rất nhiều người vừa bắt đầu làm sản phẩm, sai lầm dễ phạm phải nhất là đặt toàn bộ sự chú ý lên "tôi muốn làm chức năng gì". Thấy người khác có phân loại thông minh, bạn cũng muốn thêm; thấy người khác có tóm tắt tự động, bạn cũng muốn kết nối; thấy người khác làm Agent, đa mô thức, workflow, bạn cũng cảm thấy không thể thiếu.
+
+Nhưng trong thực tế, người dùng hiếm khi vì "tên chức năng này rất ngầu" mới quyết định dùng một sản phẩm. Họ nhiều hơn là ở một thời điểm cụ thể, muốn đẩy một việc tiến lên phía trước, thế là tạm thời "thuê" một công cụ, một dịch vụ, thậm chí một người, để giúp mình hoàn thành bước này.
+
+Đây chính là điều phương pháp **Jobs to Be Done (JTBD)** muốn nhắc chúng ta: **Người dùng không phải đang mua bản thân chức năng, mà đang thuê một loại giải pháp nào đó, giúp mình hoàn thành một tiến triển.**
+
+Bài viết này sẽ dùng ngôn ngữ dễ hiểu nhất, đưa bạn từ không hiểu gì đến hiểu JTBD, và biến nó thành công cụ phân tích bạn có thể trực tiếp dùng khi làm ứng dụng AI.
+
+</ChapterIntroduction>
+
+::: info SOP tối thiểu
+**Mục đích**: Sau khi đọc xong, bạn sẽ rõ hơn cách thu một ý tưởng mơ hồ thành một câu nhu cầu thực sự có kịch bản người dùng, thay vì trong đầu chỉ có một đống tên chức năng.
+
+**Hành động**: Viết 1 câu ý tưởng mơ hồ, tìm 3 người dùng tiềm năng trò chuyện "lần gần nhất xử lý thế nào", rồi sắp xếp thành 1 câu JTBD.
+
+**Kết quả**: Bạn sẽ có một giả định nhu cầu rõ ràng hơn, biết phiên bản đầu nên giải quyết gì trước.
+
+**Từ khóa chuyển nhanh**: [JTBD là gì](#jtbd-what) · [Công thức một câu](#jtbd-formula) · [AI giúp bạn thế nào](#jtbd-ai)
+:::
+
+## Bạn sẽ học được những nội dung sau
+
+1. Jobs to Be Done là gì, tại sao nó gần với nhu cầu thực tế hơn "brainstorm chức năng"
+2. Cách phân biệt "chức năng người dùng nói muốn" và "việc người dùng thực sự muốn hoàn thành"
+3. Dùng một template đơn giản thế nào, để thu một ý tưởng mơ hồ thành kịch bản, kích hoạt, rào cản và tiêu chuẩn thành công
+4. Cách dùng JTBD trong sản phẩm AI, câu hỏi phỏng vấn và sắp xếp AI prompt
+
+<a id="jtbd-what"></a>
+## [1. Jobs to Be Done là gì](#top-jtbd)
+
+Jobs to Be Done thường được viết tắt là **JTBD**. Ý tưởng cốt lõi phía sau nó, liên quan đến cách diễn đạt kinh điển mà nhóm Clayton Christensen phổ biến: **Người dùng sẽ "thuê" một sản phẩm nào đó để hoàn thành một việc.**
+
+"Việc" ở đây, không phải loại hành động bề mặt trong to-do list, mà là một **tiến triển** mà người dùng hy vọng trạng thái của mình sẽ xảy ra. Ví dụ:
+
+- Không phải "tôi muốn một công cụ biên bản AI", mà là "tôi muốn trong vòng 10 phút sau cuộc họp sắp xếp rõ trọng tâm, việc cần làm và người phụ trách, đừng nữa dựa vào trí nhớ bù ghi chú"
+- Không phải "tôi muốn một App ghi chép", mà là "tôi muốn biết tiền rốt cuộc tiêu đi đâu, để cuối tháng đừng nữa lo lắng"
+- Không phải "tôi muốn một công cụ tối ưu CV", mà là "tôi muốn nộp một CV khá đàng hoàng với nhiều tự tin hơn, không muốn mỗi lần nộp đều hoài nghi mình viết quá kém"
+
+Vì vậy, **JTBD quan tâm không phải sản phẩm trông thế nào, mà là tại sao người dùng cần nó vào thời điểm này.**
+
+Đây cũng là lý do rất nhiều sản phẩm nhìn có vẻ khác nhau, thực tế đang cạnh tranh cùng một job. Người dùng muốn "trên đường đi làm không nhàm chán", đối tượng có thể thuê bao gồm video ngắn, podcast, game, chat, thậm chí ngủ gật. Người dùng muốn "nhanh chóng hiểu một PDF rất dài", đối tượng có thể thuê bao gồm công cụ tóm tắt AI, thực tập sinh, đồng nghiệp, tự mình cố đọc, hoặc đơn giản là không xem trước.
+
+Một khi bạn dùng góc nhìn này để xem vấn đề, bạn sẽ phát hiện đối thủ cạnh tranh thực sự của bạn, thường không chỉ là "một App khác trông giống bạn", mà là **tất cả giải pháp thay thế mà người dùng hiện tại có thể chấp nhận**.
+
+## 2. JTBD khác gì với chân dung người dùng và danh sách chức năng
+
+Rất nhiều người mới vừa bắt đầu phân tích nhu cầu, sẽ trước viết chân dung người dùng: 25 tuổi, nữ, thành phố tuyến 1, dân văn phòng, thích công cụ hiệu quả, sẵn sàng thử sản phẩm mới. Loại thông tin này không thể nói hoàn toàn vô dụng, nhưng nó thường **không đủ giải thích tại sao một người sẽ hành động vào thời điểm này.**
+
+JTBD quan tâm hơn đến những vấn đề dưới đây:
+
+- Anh/chị trong kịch bản nào quyết định tìm giải pháp
+- Lúc đó rốt cuộc bị kẹt cái gì
+- Anh/chị muốn đẩy việc gì bước tới bước tiếp theo
+- Hiện đang dùng cách vụng về nào gồng gánh
+- Nếu việc giải quyết tốt, kết quả nào sẽ khiến anh/chị thấy "đáng"
+
+Nói cách khác, **chân dung người dùng giống hơn "người này đại khái là ai", JTBD giống hơn "người này hiện tại rốt cuộc muốn hoàn thành cái gì".**
+
+Tương tự, danh sách chức năng cũng dễ dẫn dắt sai hướng. Người dùng nói "tôi muốn xuất Word", "tôi muốn AI sửa viết", "tôi muốn nhập giọng nói", đây đều chỉ là diễn đạt bề mặt. JTBD sẽ tiếp tục hỏi sâu:
+
+- Tại sao bạn hiện tại cần xuất Word, chứ không phải PDF?
+- Bạn muốn sửa viết, là vì văn phong quá kém, hay vì cần phù hợp với đối tượng khác nhau?
+- Bạn muốn nhập giọng nói, là vì lười gõ phím, hay vì bạn thường xuyên đang đi bộ, đang lái xe, vừa họp xong cần ghi chép ngay?
+
+Rất nhiều lúc, **chức năng chỉ là một loại dịch thuật tạm thời của job**. Nếu bạn chỉ thu thập chức năng, rất dễ làm sản phẩm thành "người dùng nói gì thì chất gì"; Nếu bạn nhìn thấy job phía sau, mới có nhiều cơ hội làm ra giải pháp thực sự thuận tay, thực sự có sức cạnh tranh.
+
+## 3. Một ví dụ người mới cũng có thể hiểu
+
+Trước đừng vội nghĩ đến sản phẩm AI phức tạp, chúng ta bắt đầu từ một ví dụ cuộc sống.
+
+Giả sử có người trước khi ra cửa buổi sáng luôn không kịp ăn sáng, nên thường xuyên mua sandwich và cà phê ở cửa tàu điện ngầm. Nhìn bề ngoài, anh ấy "mua" là bữa sáng; nhưng nếu nhìn bằng JTBD, việc anh ấy thực sự muốn hoàn thành có thể là:
+
+- Trong buổi sáng vội vã, dùng cách ít tốn sức não nhất giải quyết một bữa ăn
+- Để mình trước khi đến công ty không bị đói phát hoảng
+- Không vì ăn sáng mà ảnh hưởng nhịp độ đi làm
+
+Lúc này, người dùng thuê không phải "sandwich của một thương hiệu cố định nào đó", mà là một giải pháp giúp anh ấy đẩy buổi sáng thuận lợi tiến lên. Nếu cửa hàng tiện lợi bên cạnh nhanh hơn, gần hơn, ổn định hơn, anh ấy có thể ngay lập tức đổi lựa chọn ban đầu.
+
+Đem logic này sang sản phẩm AI thì rõ ràng hơn.
+
+Ví dụ bạn muốn làm một "công cụ biên bản cuộc họp AI". Nếu chỉ dừng lại ở cấp chức năng, bạn sẽ rất dễ bắt đầu nghĩ:
+
+- Có nên hỗ trợ upload audio không
+- Có nên kết nối tách người nói không
+- Có nên xuất Markdown không
+- Có nên tự động sinh việc cần làm không
+
+Những điều này đều không sai, nhưng chưa đủ. Dùng JTBD hỏi thêm một tầng, việc người dùng thực sự muốn hoàn thành có thể là:
+
+- Tôi muốn trong 10 phút sau cuộc họp, đồng bộ kết quả thảo luận cho người không tham dự
+- Tôi muốn trích xuất sạch việc cần làm, người phụ trách và thời hạn, đừng để nhóm dựa vào trí nhớ phối hợp
+- Tôi muốn giảm thời gian sắp xếp nội dung cuộc họp lặp đi lặp lại, dành sức lực cho quyết sách và thúc đẩy
+
+Một khi job được nói rõ, rất nhiều ưu tiên chức năng sẽ tự động nổi lên. Phiên bản đầu quan trọng nhất có thể không phải "hỗ trợ 12 định dạng xuất", mà là:
+
+- Cấu trúc biên bản đủ rõ ràng
+- Trích xuất việc cần làm ổn định
+- Link chia sẻ thuận tiện
+- Kết quả xuất ra khiến người ta dám trực tiếp chuyển tiếp cho nhóm
+
+Đây là giá trị của JTBD: **Nó có thể giúp bạn từ "tôi muốn chất những khả năng nào" quay về "tôi muốn giúp người dùng thúc đẩy tiến triển gì".**
+
+## 4. Một template JTBD hữu dụng
+
+Nếu bạn là người mới, có thể trước đừng cố nghĩ JTBD quá học thuật. Trước nắm 5 yếu tố thực dụng nhất là đủ.
+
+### 4.1 Kịch bản
+
+Người dùng ở thời điểm nào, trong môi trường nào nhớ đến sản phẩm này?
+
+- Là sau khi họp xong
+- Là lúc sếp đột xuất đòi tài liệu
+- Là buổi tối chuẩn bị nộp CV
+- Là cuối tháng phát hiện tiền lại không đủ
+
+**Nhu cầu không có kịch bản, thường đều chưa đủ thực tế.**
+
+### 4.2 Kích hoạt
+
+Là cái gì khiến anh/chị quyết định ngay lập tức tìm giải pháp?
+
+- Bị đè nén bởi tài liệu dài, không biết bắt đầu đọc từ đâu
+- Ngày mai phải nộp tài liệu, hôm nay mới phát hiện format lộn xộn
+- Vừa bị sếp hỏi tiến độ, nhận ra mình chưa sắp xếp rõ ràng
+- Muốn kiên trì ghi chép, nhưng viết tay, copy, sắp xếp đều quá phiền
+
+Điểm kích hoạt thường mang theo cảm xúc. Cảm xúc này rất quan trọng, vì nó quyết định tại sao người dùng sẽ hành động vào khoảnh khắc này.
+
+### 4.3 Tiến triển muốn hoàn thành
+
+Anh/chị không chỉ muốn "làm một hành động", mà muốn đẩy mình tiến tới trạng thái mới nào?
+
+- Từ hỗn loạn đến rõ ràng
+- Từ lo lắng đến an tâm
+- Từ trì hoãn đến khởi động
+- Từ kém hiệu quả đến thuận tay
+- Từ nói không rõ ràng đến có thể trực tiếp giao nộp
+
+Trong bước này, từ "tiến triển" rất then chốt. Vì rất nhiều người thực sự mua không phải công cụ, mà là **sự thay đổi trạng thái**.
+
+### 4.4 Giải pháp thay thế hiện tại
+
+Hiện không có sản phẩm của bạn, anh/chị làm thế nào?
+
+- Thủ công copy paste
+- Dùng Excel hoặc sổ tay gồng gánh
+- Tìm đồng nghiệp giúp đỡ
+- Kéo dài không làm
+- Chuyển qua lại giữa vài công cụ
+
+Ai là giải pháp thay thế, ai là môi trường cạnh tranh thực sự của bạn.
+
+### 4.5 Tiêu chuẩn thành công
+
+Việc thế nào mới tính thực sự được giải quyết?
+
+- Trong 10 phút nhận được kết quả có thể chia sẻ
+- Không cần sửa lớn lần hai đã có thể gửi cho người khác
+- Không dễ bị sót, bị sai, quên việc
+- Lần đầu dùng đã biết bước tiếp theo làm gì
+
+Nếu bạn thậm chí "người dùng đánh giá đáng hay không" đều nói không rõ, thì hướng này đa số chưa được thu tốt.
+
+<a id="jtbd-formula"></a>
+## [5. Công thức một câu có thể áp dụng trực tiếp](#top-jtbd)
+
+Khi bạn muốn sắp xếp một hướng sản phẩm, có thể trước áp câu rất thực dụng này:
+
+> Khi __________, tôi muốn __________, để __________.
+> Hiện tôi chỉ có thể thông qua __________ để miễn cưỡng hoàn thành việc này.
+
+Ví dụ:
+
+> Khi tôi vừa xong một cuộc họp dự án với lượng thông tin rất lớn, tôi muốn nhanh chóng nhận được một biên bản kèm việc cần làm, người phụ trách và thời hạn, để tôi có thể ngay lập tức đồng bộ nhóm và thúc đẩy thực hiện.
+> Hiện tôi chỉ có thể dựa vào tự mình nhớ, lướt lịch sử chat và thủ công sắp xếp để miễn cưỡng hoàn thành việc này.
+
+Lại ví dụ:
+
+> Khi tôi chuẩn bị nộp một vị trí mới, tôi muốn nhanh chóng sửa kinh nghiệm hiện có thành phiên bản phù hợp với vị trí hơn, để tôi có thể nộp một CV khá đàng hoàng với nhiều tự tin hơn.
+> Hiện tôi chỉ có thể liên tục copy CV cũ, sửa cách diễn đạt bằng tay, sửa đến cuối cùng càng ngày càng không chắc chắn.
+
+Nếu bạn có thể viết một câu rõ ràng đến mức này, thiết kế trang, thiết kế prompt, đánh giá ưu tiên chức năng phía sau, đều sẽ dễ hơn nhiều.
+
+## 6. Khi làm sản phẩm AI, đặc biệt phải xem ba tầng job
+
+Rất nhiều sản phẩm AI khi demo chức năng trông rất mạnh, nhưng sau khi thực sự lên mạng lại không giữ chân được người dùng, lý do phổ biến là chỉ giải quyết hành động bề mặt, chưa giải quyết job sâu hơn.
+
+Bạn có thể thô chia một job thành ba tầng để xem:
+
+### 6.1 Tầng chức năng
+
+Nhiệm vụ bề mặt nhất là gì?
+
+- Tóm tắt tài liệu
+- Sửa viết văn bản
+- Trích xuất việc cần làm
+- Tạo hình ảnh
+
+Đây là tầng dễ nói ra nhất bằng miệng người dùng.
+
+### 6.2 Tầng cảm xúc
+
+Người dùng hy vọng giảm bớt sự không thoải mái nào, hoặc thu được cảm giác gì?
+
+- Không muốn hoảng hốt như vậy
+- Không muốn trông thiếu chuyên nghiệp
+- Không muốn mỗi lần đều bắt đầu từ đầu
+- Muốn có nhiều cảm giác kiểm soát hơn
+
+Rất nhiều ý muốn trả phí, thực tế quan hệ rất lớn với tầng cảm xúc.
+
+### 6.3 Tầng xã hội
+
+Người dùng hy vọng trong mắt người khác trở thành kiểu người nào?
+
+- Trông đáng tin cậy hơn
+- Có khả năng tổ chức hơn trong nhóm
+- Chuyên nghiệp hơn trước mặt khách hàng
+- Biết diễn đạt hơn trên nền tảng xã hội
+
+Nếu bạn chỉ làm tầng chức năng, sản phẩm rất dễ bị thay thế; Nếu bạn đồng thời hiểu tầng cảm xúc và tầng xã hội, bạn sẽ dễ tìm được giá trị có độ dính thực sự hơn.
+
+## 7. Dùng JTBD ngược lại sàng lọc hướng sản phẩm
+
+Đôi khi không phải bạn đã có sản phẩm, mà trong tay có 3 đến 5 ý tưởng, không biết làm cái nào. Lúc này JTBD rất phù hợp để làm sàng lọc.
+
+Bạn có thể cầm mỗi ý tưởng, lần lượt hỏi mình 5 câu:
+
+1. Kịch bản tương ứng với ý tưởng này có đủ cụ thể không?
+2. Người dùng hiện đã dùng cách vụng về nào đó để giải quyết chưa?
+3. Mức độ đau của job này có đủ mạnh, hoặc tần suất có đủ cao không?
+4. Nếu tôi làm tốt, người dùng có cảm nhận rõ ràng "trạng thái tốt lên" không?
+5. Phiên bản đầu có thể chỉ xoay quanh bước quan trọng nhất của job này, làm ra một phiên bản rất nhỏ nhưng hữu dụng không?
+
+Nếu một hướng nói đến cuối cùng vẫn chỉ có thể nói "cảm giác khá thú vị", nhưng nói không rõ kích hoạt, giải pháp thay thế và tiêu chuẩn thành công, thì nó đa số vẫn chỉ là một cảm hứng mơ hồ, không phải một hướng trưởng thành.
+
+## 8. Câu hỏi có thể trực tiếp mang đi phỏng vấn người dùng
+
+Rất nhiều người vừa làm nghiên cứu đã hỏi: "Bạn muốn chức năng gì?" Cách hỏi này rất dễ nhận được câu trả lời bề mặt.
+
+JTBD phù hợp hỏi những câu dưới đây:
+
+- Lần gần nhất bạn gặp vấn đề này là khi nào?
+- Lúc đó bạn đang làm gì, tại sao bị kẹt?
+- Cuối cùng bạn đã giải quyết thế nào?
+- Trong quá trình này, nơi phiền nhất, chậm nhất, không yên tâm nhất là gì?
+- Nếu có một công cụ giúp bạn, kết quả nào khiến bạn thấy thực sự hữu dụng?
+- Bạn đã thử cách thay thế nào? Tại sao chúng không đủ tốt?
+
+Lợi ích của cách hỏi này: Nó sẽ kéo đối thoại về trải nghiệm thực tế, thay vì dừng lại ở sở thích trong tưởng tượng.
+
+## 9. Dùng AI giúp bạn phân tích JTBD
+
+Bản thân JTBD không phải do AI phát minh, nhưng AI rất phù hợp giúp bạn sắp xếp và tinh lọc JTBD.
+
+Ví dụ bạn đã thu thập 5 đến 10 phản hồi người dùng, có thể ném cho mô hình, để nó tổng kết theo cấu trúc dưới đây:
+
+```text
+Xin đóng vai trợ lý nghiên cứu sản phẩm.
+Tôi sẽ cho bạn một số lời gốc của người dùng, xin đừng cho gợi ý chức năng trước,
+mà trước sắp xếp theo framework Jobs to Be Done:
+
+1. Người dùng đang ở kịch bản nào
+2. Sự kiện kích hoạt anh/chị hành động là gì
+3. Tiến triển anh/chị thực sự muốn hoàn thành là gì
+4. Giải pháp thay thế hiện tại là gì
+5. Tiêu chuẩn thành công anh/chị quan tâm nhất là gì
+6. Những từ cảm xúc xuất hiện lặp đi lặp lại trong những phản hồi này là gì
+
+Cuối cùng, xin sắp xếp nội dung này thành 3 giả định JTBD đáng ưu tiên xác minh nhất.
+```
+
+Nếu bạn đã có một ý tưởng, cũng có thể để AI giúp bạn làm vòng thu thứ nhất:
+
+```text
+Tôi muốn làm một [ý tưởng sản phẩm của bạn].
+Xin đừng trực tiếp cho tôi danh sách chức năng, mà dùng phương pháp Jobs to Be Done giúp tôi phân tích:
+
+1. Sản phẩm này có thể phục vụ những kịch bản cụ thể nào
+2. Job cốt lõi người dùng muốn hoàn thành trong mỗi kịch bản là gì
+3. Những giải pháp thay thế hiện có nào
+4. Job nào phù hợp nhất làm điểm khởi đầu MVP, tại sao
+5. Xin viết job cuối cùng được đề xuất thành một câu JTBD rõ ràng
+```
+
+Lợi ích của việc này là, bạn sẽ không vừa lên đã bị AI dẫn đi "brainstorm 50 chức năng", mà trước làm rõ hướng đã.
+
+## 10. 4 sai lầm phổ biến nhất của người mới
+
+### 10.1 Viết job thành tên chức năng
+
+"AI tóm tắt", "phân loại thông minh", "tự động tạo" đều không phải job, chúng chỉ là cách triển khai khả thi.
+
+### 10.2 Viết nhóm người rất rộng
+
+"Tất cả dân văn phòng", "tất cả sinh viên", "tất cả doanh nhân" thường đều quá rộng. Càng rộng, bạn càng khó nhìn thấy kịch bản thực tế.
+
+### 10.3 Chỉ nghe người dùng nói, không xem người dùng làm thế nào
+
+Người dùng sẽ mô tả mình muốn gì, nhưng ưu tiên thực sự của họ, thường giấu trong cách họ hiện khắc phục tạm thời giải quyết vấn đề.
+
+### 10.4 Vừa bắt đầu đã muốn làm nền tảng hoàn chỉnh
+
+Cách mở đúng của JTBD, thường không phải "tôi làm một nền tảng vạn năng bao trùm", mà là trước tiên tập trung vào một bước quan trọng nhất trong một kịch bản, làm nó rất thuận tay.
+
+## 11. Tóm tắt
+
+Giá trị lớn nhất của Jobs to Be Done, không phải cho bạn một danh từ mới, mà giúp bạn đổi một góc quan sát: **Đừng chỉ tập trung vào chức năng sản phẩm, mà hãy tập trung vào việc người dùng muốn đẩy cái gì bước tới bước tiếp theo.**
+
+Khi bạn bắt đầu liên tục hỏi mình:
+
+- Người dùng trong kịch bản nào thuê sản phẩm này
+- Anh/chị rốt cuộc bị kẹt ở đâu
+- Hiện đang dùng cách nào gồng gánh
+- Sau khi việc giải quyết xong, trạng thái sẽ thay đổi thế nào
+
+Bạn sẽ phát hiện, rất nhiều ý tưởng mơ hồ ban đầu bỗng trở nên rõ ràng, rất nhiều chức năng hoa mỹ cũng bỗng không quan trọng như vậy.
+
+Làm sản phẩm, đặc biệt là làm sản phẩm AI, sợ nhất là vừa bắt đầu đã đắm chìm trong trưng bày khả năng. JTBD có thể giúp kéo sự chú ý của bạn về nơi thực sự quan trọng: **Tại sao người dùng cần bạn, và bạn rốt cuộc đang giúp anh/chị hoàn thành tiến triển gì.**
+
+<a id="jtbd-ai"></a>
+## [12. Cách dùng AI giúp bạn thực hành JTBD](#top-jtbd)
+
+JTBD không phải do AI phát minh, nhưng AI rất phù hợp đóng vai trợ lý nghiên cứu, trợ lý sắp xếp và trợ lý đối chiếu trong phương pháp này. Điểm mấu chốt là: **Để AI giúp bạn sắp xếp và mở rộng, thay vì thay bạn phỏng đoán người dùng.**
+
+Bạn có thể dùng như sau:
+
+### 12.1 Để AI giúp bạn viết lại ý tưởng mơ hồ thành giả định JTBD
+
+Khi trong đầu bạn chỉ có một câu mô tả mơ hồ, ví dụ "tôi muốn làm một công cụ giúp sinh viên tìm thực tập", có thể trước để AI giúp bạn tách thành vài job khả dĩ:
+
+```text
+Tôi hiện có một ý tưởng sản phẩm mơ hồ: [Ý tưởng của bạn]
+Xin đừng trực tiếp cho tôi danh sách chức năng, mà dùng cách Jobs to Be Done giúp tôi phân tích:
+1. Có thể tương ứng với những kịch bản cụ thể nào
+2. Trong mỗi kịch bản, tiến triển người dùng thực sự muốn hoàn thành là gì
+3. Giải pháp thay thế hiện tại có thể là gì
+4. Job nào phù hợp nhất làm MVP trước
+Xin cuối cùng viết mỗi job thành một câu JTBD rõ ràng.
+```
+
+Bạn thậm chí có thể viết input rất nhỏ:
+
+```text
+Tôi muốn làm một thứ giúp sinh viên tìm thực tập.
+Tôi hiện cũng nói không rõ cụ thể làm cái gì, bạn giúp tôi nghĩ xem người dùng rốt cuộc muốn hoàn thành việc gì.
+```
+
+AI có thể cho output hữu ích trông như thế này:
+
+```text
+Hướng JTBD khả dĩ:
+
+1. Khi tôi lần đầu chuẩn bị nộp thực tập, tôi muốn nhanh chóng biết nên chuẩn bị những tài liệu nào trước,
+để tôi không vì thông tin lộn xộn mà kéo dài không nộp.
+
+2. Khi tôi thấy một vị trí thực tập, tôi muốn nhanh chóng đánh giá mình có đáng nộp hay không,
+để tôi không lãng phí quá nhiều thời gian ở vị trí không phù hợp.
+
+3. Khi tôi bắt đầu nộp hồ sơ, tôi muốn sửa CV hiện có thành phiên bản phù hợp với vị trí hơn,
+để tôi có thể hoàn thành nộp nhanh hơn và tăng tỷ lệ được thông qua.
+```
+
+Giá trị của loại output này là, nó sẽ tách ý tưởng rất rộng của bạn thành vài hướng gần với kịch bản thực tế hơn.
+
+### 12.2 Để AI giúp bạn sắp xếp lời gốc phỏng vấn
+
+Nếu bạn đã làm vài lần phỏng vấn người dùng, có thể giao bản ghi phỏng vấn cho AI, để nó giúp bạn tinh lọc kịch bản, điểm kích hoạt, giải pháp thay thế và tiêu chuẩn thành công xuất hiện lặp đi lặp lại.
+
+```text
+Dưới đây là lời gốc phỏng vấn của 5 người dùng.
+Xin đừng cho giải pháp trước, mà sắp xếp theo framework JTBD:
+1. Người dùng đang ở kịch bản nào
+2. Sự kiện kích hoạt anh/chị hành động là gì
+3. Tiến triển anh/chị thực sự muốn hoàn thành là gì
+4. Giải pháp thay thế hiện tại là gì
+5. Tiêu chuẩn thành công anh/chị quan tâm nhất là gì
+6. Thông tin nào xuất hiện lặp lại ở nhiều người dùng
+Cuối cùng sắp xếp thành 3 giả định JTBD đáng ưu tiên xác minh nhất.
+```
+
+Một input rất đơn giản cũng có thể viết như sau:
+
+```text
+Tôi hỏi 3 người, họ đại khái nói như thế này:
+
+1. Mỗi lần nộp thực tập tôi đều phải sửa lại CV, rất phiền.
+2. Tôi thực sự sợ nhất là không biết mình viết đúng chưa.
+3. Hiện tôi sẽ tìm anh chị khóa trên giúp xem, nhưng mỗi lần đều ngại phiền người ta mãi.
+
+Bạn giúp tôi sắp xếp, việc họ thực sự muốn hoàn thành là gì.
+```
+
+AI có thể xuất:
+
+```text
+Kết quả sắp xếp:
+
+- Kịch bản chung: Trước khi chuẩn bị nộp thực tập, cần xử lý CV
+- Khó khăn chung: Không biết sửa đến mức nào thì "đủ tốt"
+- Giải pháp thay thế hiện tại: Tìm anh chị khóa trên giúp xem, tự mình sửa lặp đi lặp lại
+- JTBD khả dĩ:
+  Khi tôi chuẩn bị nộp thực tập, tôi muốn nhanh hơn đánh giá CV đã đạt mức có thể nộp chưa,
+  để tôi không luôn kẹt ở "sửa thêm chút nữa" mà mãi không nộp được.
+```
+
+Loại output này rất hữu dụng, vì nó giúp bạn từ lời gốc phân tán tinh lọc ra thứ giống "nhu cầu" hơn.
+
+### 12.3 Để AI giúp bạn làm một vòng nghiên cứu mạng nhẹ nhàng
+
+Trước khi bạn chưa bắt đầu phỏng vấn quy mô lớn, có thể trước để AI giúp bạn làm một số quét thông tin bên ngoài rất nhẹ, ví dụ:
+
+- Trong diễn đàn hoặc cộng đồng công khai, mọi người phàn nàn về vấn đề này thế nào
+- Sản phẩm hiện có trên thị trường chủ yếu đang giải quyết tầng vấn đề nào
+- Giải pháp thay thế phổ biến nhất của người dùng là gì
+- Trong đánh giá phổ biến, điểm mọi người hài lòng và không hài lòng nhất là gì
+
+Loại nghiên cứu này không thể thay thế phỏng vấn người dùng thực tế, nhưng rất phù hợp làm khởi động cho giai đoạn Discover, giúp bạn xây bản đồ vấn đề trước.
+
+Một input đơn giản:
+
+```text
+Xin giúp tôi kiểm tra:
+"Sinh viên sửa CV, nộp thực tập thường gặp điểm đau nhất là gì?"
+Ưu tiên xem trong diễn đàn công khai, bài viết kinh nghiệm, cộng đồng tìm việc những gì mọi người tự nói.
+Giúp tôi sắp xếp thành 5 vấn đề phổ biến nhất.
+```
+
+AI có thể xuất:
+
+```text
+Sắp xếp điểm đau phổ biến:
+
+1. Không biết CV nên viết kinh nghiệm gì, kinh nghiệm quá ít
+2. Không biết sửa cho phù hợp với vị trí khác nhau thế nào
+3. Sửa nhiều phiên bản, nhưng luôn không chắc đã đủ tốt
+4. Không tìm được người đáng tin cậy giúp xem
+5. Quy trình nộp hồ sơ phức tạp, dễ trì hoãn
+```
+
+Loại output này không thể làm kết luận cuối cùng, nhưng rất phù hợp giúp bạn trước quyết định ưu tiên phỏng vấn loại vấn đề nào.
+
+### 12.4 Để AI đóng vai "bên phản đối"
+
+Rất nhiều lúc, chúng ta quá có cảm tình với ý tưởng của mình. Bạn có thể chuyên để AI đóng vai người bắt lỗi, ép bạn nói rõ vấn đề hơn:
+
+```text
+Xin đóng vai một cố vấn nghiên cứu sản phẩm rất nghiêm ngặt.
+Dưới đây là giả định JTBD của tôi: [Giả định của bạn]
+Xin phê bình nó từ các góc độ sau:
+1. Kịch bản này có quá rộng không
+2. Job này có phải viết thành chức năng thay vì tiến triển thực sự không
+3. Giải pháp thay thế có quá yếu không
+4. Tiêu chuẩn thành công có đủ rõ ràng không
+5. Rủi ro cần được xác minh nhất của giả định này là gì
+```
+
+Lợi ích của việc này là, bạn nhanh hơn phát hiện mình đang nhìn nhu cầu hay chỉ đang nhìn giải pháp mình thích.
+
+## 📚 Bài tập
+
+Xin bạn dựa vào nội dung bài viết, hoàn thành bài tập sau:
+
+1. Chọn một ý tưởng sản phẩm bạn muốn làm gần đây, dùng một công thức JTBD viết rõ nó
+2. Bổ sung 5 yếu tố cho ý tưởng này: Kịch bản, kích hoạt, tiến triển, giải pháp thay thế, tiêu chuẩn thành công
+3. Tìm 3 người dùng tiềm năng, ít nhất hỏi được một lần "lần gần nhất bạn gặp vấn đề này là khi nào"
+4. Giao lời gốc phỏng vấn cho AI, sắp xếp thành 3 giả định JTBD đáng ưu tiên xác minh nhất
+
+## Đọc thêm
+
+- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
+- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
+- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
+- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
diff --git a/docs/vi-vn/stage-1/appendix-mom-test/index.md b/docs/vi-vn/stage-1/appendix-mom-test/index.md
new file mode 100644
index 0000000..731d145
--- /dev/null
+++ b/docs/vi-vn/stage-1/appendix-mom-test/index.md
@@ -0,0 +1,589 @@
+---
+title: 'The Mom Test：Xác minh nhu cầu thông qua phỏng vấn người dùng'
+description: 'Bài viết The Mom Test dành cho người mới. Học cách tránh phản hồi lịch sự, tập trung vào hành vi thực tế, sự kiện cụ thể và vấn đề hiện có trong phỏng vấn người dùng, biến "nghe có vẻ ổn" thành đánh giá nhu cầu đáng tin cậy hơn.'
+---
+
+<script setup>
+const duration = 'Khoảng <strong>1.5 giờ</strong>'
+</script>
+
+# The Mom Test：Xác minh nhu cầu thông qua phỏng vấn người dùng
+
+<a id="top-mom"></a>
+
+## Hướng dẫn chương này
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Phỏng vấn người dùng', 'Xác minh nhu cầu', 'Nghiên cứu người dùng', 'Nghiên cứu sản phẩm']"
+  coreOutput="1 bộ câu hỏi phỏng vấn có thể khai thác thông tin thực tế hơn"
+  expectedOutput="Không còn coi phản hồi lịch sự của người dùng là xác minh, mà có thể dùng hành vi thực tế để đánh giá hướng đi"
+>
+
+Rất nhiều người lần đầu làm nghiên cứu sản phẩm, nghĩ rằng điều quan trọng nhất là "tìm người trò chuyện". Thế là họ đi hỏi bạn bè, đồng nghiệp, thậm chí người thân:
+
+- Bạn thấy ý tưởng này của tôi thế nào?
+- Nếu có một sản phẩm như vậy, bạn có dùng không?
+- Chức năng này nghe có vẻ khá chứ?
+
+Đối phương cũng thường cho phản hồi rất đáng khích lệ:
+
+- Khá lắm
+- Nghe có vẻ hữu ích
+- Tôi nghĩ bạn có thể thử
+
+Vấn đề là, những câu trả lời này thường không giúp bạn đưa ra đánh giá. Chúng giống như sự lịch sự, ủng hộ, hoặc phản ứng tự nhiên không muốn làm mất lòng bạn tại chỗ. Bạn tưởng mình đã "xác minh thị trường", thực ra chỉ thu thập được một đống lời an ủi khó dùng để ra quyết định.
+
+Phương pháp The Mom Test là để giải quyết vấn đề này. Nó nhắc nhở chúng ta: **Không phải người dùng cố tình lừa bạn, mà là cách bạn hỏi câu hỏi, tự nhiên sẽ dẫn đối phương đến những câu trả lời nghe hay nhưng vô dụng.**
+
+</ChapterIntroduction>
+
+::: info SOP tối thiểu
+**Mục đích**: Sau khi đọc xong, bạn sẽ rõ hơn cách trò chuyện với người dùng thế nào để không chỉ nghe "nghe có vẻ ổn", mà thực sự hỏi được thông tin giúp bạn đánh giá hướng đi.
+
+**Hành động**: Viết lại 5 câu hỏi bạn định hỏi, ưu tiên hỏi "lần gần nhất xảy ra khi nào", "bạn đã xử lý thế nào lúc đó".
+
+**Kết quả**: Bạn sẽ dễ dàng phân biệt hơn đâu là ý kiến, đâu mới là bằng chứng thực sự có thể hỗ trợ đánh giá.
+
+**Từ khóa chuyển nhanh**: [The Mom Test là gì](#mom-what) · [Ba nguyên tắc cốt lõi](#mom-principles) · [AI giúp bạn thế nào](#mom-ai)
+:::
+
+## Bạn sẽ học được những nội dung sau
+
+1. The Mom Test đang giải quyết vấn đề gì, tại sao nhiều "nghiên cứu người dùng" thực ra không nghiên cứu được thông tin thực tế
+2. Vài nguyên tắc cốt lõi nhất của phương pháp này: Hỏi ít ý kiến, hỏi nhiều hành vi; Hỏi ít giả định, hỏi nhiều sự kiện
+3. Làm thế nào biến một câu hỏi dễ nhận được phản hồi dương tính giả thành câu hỏi phỏng vấn có giá trị hơn
+4. Cách kết hợp The Mom Test với JTBD, xác minh nhu cầu, đánh giá MVP
+
+<a id="mom-what"></a>
+## [1. The Mom Test thực chất là gì](#top-mom)
+
+The Mom Test đến từ cuốn sách cùng tên của Rob Fitzpatrick. Tên nó nghe hơi giống đùa, nhưng chỉ trúng rất chuẩn:
+
+**Ngay cả mẹ bạn, cũng rất khó trực tiếp nói với bạn "đây là một ý tưởng tồi".**
+
+Lý do không phải bà không trung thực, mà là:
+
+- Bà không muốn làm bạn tổn thương
+- Bà sẽ vô thức khích lệ bạn
+- Bà rất dễ trả lời theo cách bạn diễn đạt
+
+Thực ra không chỉ mẹ, bạn bè, đồng nghiệp, bạn học cũ, thậm chí rất nhiều người lạ, khi đối mặt với ý tưởng sản phẩm của bạn, cũng thường cho "phản hồi tích cực" tương tự. Điều này không có nghĩa nhu cầu thực sự tồn tại, chỉ có nghĩa là bạn đã hỏi câu hỏi thành một dạng dễ nhận được câu trả lời nghe hay.
+
+Vì vậy, trọng tâm của The Mom Test chưa bao giờ là "đừng hỏi mẹ", mà là:
+
+**Đừng hỏi câu hỏi thành dạng ai cũng sẽ thuận theo bạn mà trả lời.**
+
+Phương pháp này thực sự muốn dạy bạn, là cách thông qua đối thoại, lấy được thông tin gần với nhu cầu thực tế hơn, thay vì thu thập một đống lời bình luận khiến bạn cảm thấy tốt.
+
+## 2. Vấn đề cốt lõi mà nó giải quyết là gì
+
+The Mom Test chủ yếu giải quyết một loại nhận thức ảo rất phổ biến:
+
+**Coi phản hồi tích cực lịch sự, thành nhu cầu thực tế.**
+
+Ví dụ bạn hỏi:
+
+- Bạn thấy ý tưởng App này thế nào?
+- Nếu tôi làm một công cụ AI giúp bạn viết CV, bạn có dùng không?
+- Chức năng này có giá trị không?
+
+Điểm chung của những câu hỏi này là:
+
+- Chúng đều đang hỏi "ý kiến"
+- Chúng đều mang theo chút gợi ý
+- Chúng đều đang nói về một tương lai chưa xảy ra
+
+Mà câu trả lời của con người về "ý kiến" và "giả định tương lai", thường không ổn định. Rất nhiều người sẽ đánh giá quá cao sự hứng thú của mình, đánh giá quá cao khả năng thực thi của mình, cũng sẽ đánh giá quá cao ý muốn mua hàng trong tương lai.
+
+Vì vậy The Mom Test nhắc bạn:
+
+- Đừng quá tin vào đánh giá của người khác về ý tưởng của bạn
+- Đừng quá tin vào dự đoán của người khác về hành vi tương lai
+- Hãy cố gắng quay về hành vi thực tế đã xảy ra của người dùng
+
+Bởi vì so với "bạn có dùng không", "bạn lần trước xử lý việc này thế nào" thường gần với sự thật hơn.
+
+<a id="mom-principles"></a>
+## [3. Ba nguyên tắc cốt lõi nhất](#top-mom)
+
+Nếu bạn chỉ muốn ghi nhớ phần quan trọng nhất trước, có thể ghi trước ba nguyên tắc dưới đây.
+
+### 3.1 Nói ít về ý tưởng của bạn, hỏi nhiều về trải nghiệm thực tế trong quá khứ của người dùng
+
+Rất nhiều phỏng vấn vô hiệu vừa mở đầu đã kể về giải pháp của mình, kể mình hào hứng thế nào, kể mình chuẩn bị làm sản phẩm gì. Vấn đề là, một khi bạn nói quá nhiều, đối phương rất dễ chuyển sang trạng thái "phối hợp bạn", "khích lệ bạn".
+
+So với đó, cách tốt hơn là tập trung vào trải nghiệm của đối phương:
+
+- Lần gần nhất bạn gặp vấn đề này là khi nào?
+- Lúc đó bạn đang làm gì?
+- Cuối cùng bạn đã xử lý thế nào?
+- Bước nào phiền phức nhất?
+
+Bạn sẽ phát hiện, loại câu hỏi này có thể tự nhiên hơn kéo đối thoại về thực tế, thay vì dừng lại ở sở thích trong tưởng tượng.
+
+### 3.2 Hỏi ít ý kiến trừu tượng, hỏi nhiều sự kiện cụ thể
+
+"Tôi thấy chức năng này khá hay", "nghe có vẻ ổn", "dường như hơi hữu ích", những cách diễn đạt này đều quá trừu tượng, rất khó hướng dẫn quyết định sản phẩm.
+
+Thông tin có giá trị hơn thường trông như thế này:
+
+- Tuần trước tôi vừa mất 2 tiếng vì việc này
+- Hiện tôi đang dùng Excel cộng WeChat gồng gánh
+- Tháng trước tôi đã tiêu tiền cho công cụ tương tự
+- Tôi sợ nhất là làm sai, không phải làm chậm
+
+Đây mới là thông tin thực sự có thể giúp bạn đánh giá cường độ vấn đề, tần suất và khả năng trả phí.
+
+### 3.3 Hỏi ít về giải pháp người dùng muốn, xem nhiều cách họ đang giải quyết vấn đề hiện tại
+
+Người dùng rất giỏi mô tả rắc rối của mình, nhưng không nhất thiết giỏi thiết kế giải pháp.
+
+Nếu bạn hỏi:
+
+- Bạn có muốn một AI giúp bạn tự động làm việc này không?
+- Bạn thấy thêm chức năng thông minh có giúp ích không?
+
+Bạn nhận được, thường chỉ là thái độ mơ hồ đối với một giải pháp nào đó, chứ không phải bản thân nhu cầu.
+
+Câu hỏi tốt hơn là:
+
+- Hiện bạn dùng phương pháp nào để xử lý vấn đề này?
+- Tại sao bạn lại chọn cách này?
+- Nó không tốt ở điểm nào?
+
+Nhìn rõ giải pháp thay thế hiện tại, thường quan trọng hơn trực tiếp hỏi "bạn muốn gì".
+
+## 4. Tại sao người ta luôn cho bạn câu trả lời nghe hay nhưng vô dụng
+
+Nếu bạn hiểu được điều này, khi làm phỏng vấn sẽ ít sai lầm hơn.
+
+### 4.1 Con người vô thức giữ lịch sự
+
+Đặc biệt khi đối tượng đối thoại có quan hệ với bạn, đối phương rất khó trực tiếp nói:
+
+- Hướng này nghe không ổn lắm
+- Tôi căn bản không dùng
+- Vấn đề này không quan trọng với tôi lắm
+
+Họ có khả năng nói hơn là "khá lắm", "có dịp có thể làm thử".
+
+### 4.2 Con người đánh giá quá cao bản thân trong tương lai
+
+Rất nhiều người thực sự tin rằng trong tương lai mình sẽ:
+
+- Tự giác hơn
+- Sẵn sàng học hỏi hơn
+- Sẵn sàng trả phí hơn
+- Sẵn sàng thử công cụ mới hơn
+
+Nên câu "nếu có thì chắc tôi sẽ dùng" thường không đồng nghĩa với thực sự dùng trong tương lai.
+
+### 4.3 Cách bạn hỏi câu hỏi tự thân đã đang dẫn dắt câu trả lời
+
+Khi bạn hỏi:
+
+- Ý tưởng này của tôi có khá không?
+- Chức năng này có rất hữu ích với bạn không?
+
+Thực ra bạn đã lén nhét "câu trả lời đúng" vào câu hỏi rồi.
+
+Đây cũng là lý do The Mom Test đặc biệt nhấn mạnh: **Đừng biến phỏng vấn thành bạn đang tìm kiếm sự công nhận.**
+
+## 5. So sánh trực tiếp: Câu hỏi nào dễ hỏi hỏng, câu hỏi nào có giá trị hơn
+
+Những đối chiếu dưới đây, hầu như người mới nào cũng dùng đến.
+
+| Câu hỏi dễ hỏi hỏng | Câu hỏi có giá trị hơn |
+| --- | --- |
+| Bạn thấy ý tưởng này của tôi thế nào? | Lần gần nhất bạn gặp vấn đề này là khi nào? |
+| Nếu có sản phẩm này bạn có dùng không? | Hiện bạn xử lý việc này thế nào? |
+| Bạn có sẵn sàng trả phí cho chức năng này không? | Lần trước bạn đã tiêu tiền cho vấn đề này chưa? Tiêu vào cái gì? |
+| Bạn thấy chức năng này quan trọng không? | Trong quy trình này, bước nào phiền nhất, chậm nhất, không yên tâm nhất? |
+| Bạn có muốn một AI giúp bạn tự động làm không? | Tại sao hiện tại bạn chưa tìm được giải pháp thuận tiện hơn? |
+
+Điều quan trọng nhất của bảng này không phải câu cụ thể, mà là hướng phía sau:
+
+- Từ ý kiến tiến về sự kiện
+- Từ tương lai tiến về quá khứ
+- Từ giải pháp của bạn tiến về vấn đề của người dùng
+
+## 6. Một nhịp độ phỏng vấn người mới cũng có thể dùng ngay
+
+Nếu bây giờ bạn muốn đi tìm người trò chuyện, có thể trực tiếp làm theo trình tự dưới đây.
+
+### 6.1 Mở đầu: Nói rõ bạn đang học hỏi, không phải đang bán hàng
+
+Ví dụ:
+
+> Tôi gần đây đang nghiên cứu mọi người xử lý loại vấn đề này thế nào, muốn hiểu tình hình thực tế trước, không phải đến bán hàng đâu.
+
+Cách diễn đạt này sẽ giúp đối phương dễ dàng bỏ gánh nặng tâm lý "tôi phải cho bạn phản hồi tích cực".
+
+### 6.2 Bắt đầu từ trải nghiệm thực tế gần nhất
+
+Có thể bắt đầu từ loại câu hỏi này:
+
+- Lần gần nhất bạn gặp vấn đề này là khi nào?
+- Lúc đó đã xảy ra chuyện gì?
+- Phản ứng đầu tiên của bạn là xử lý thế nào?
+
+Một khi đối thoại bước vào sự kiện cụ thể, chất lượng thông tin thường sẽ nâng cao rõ rệt.
+
+### 6.3 Hỏi sâu về hành vi, chi phí và giải pháp thay thế
+
+Tiếp tục hỏi:
+
+- Bạn đang dùng cách nào để giải quyết?
+- Điểm không thoải mái nhất của cách này là gì?
+- Bạn đã dành bao nhiêu thời gian, tiền hoặc sức lực cho việc này?
+- Bạn đã thử cách nào khác chưa? Tại sao không tiếp tục dùng?
+
+### 6.4 Cuối cùng mới đánh giá mức độ đau và ưu tiên
+
+Bạn không cần trực tiếp hỏi "có đau không", có thể đánh giá từ chi tiết:
+
+- Anh/chị có thường xuyên gặp phải không
+- Anh/chị có đang chủ động tìm cách khắc phục không
+- Anh/chị đã sẵn sàng trả chi phí cho việc này chưa
+- Khi kể về việc này, anh/chị có mang theo cảm xúc rõ ràng không
+
+Tất cả những điều này đều hữu dụng hơn một câu "đây có phải là điểm đau của bạn không".
+
+## 7. Một ví dụ hoàn chỉnh hơn
+
+Giả sử bạn muốn làm một sản phẩm "AI giúp sinh viên sửa CV".
+
+### Cách hỏi sai
+
+Bạn đi hỏi bạn học:
+
+> Tôi muốn làm một công cụ tối ưu CV bằng AI, bạn thấy thế nào?
+> Nếu nó có thể tự động sửa CV theo vị trí, bạn có dùng không?
+
+Lúc này, đối phương rất có thể sẽ nói:
+
+- Nghe khá lắm
+- Tôi nghĩ nên hữu ích
+> Nếu miễn phí tôi sẽ thử
+
+Những câu trả lời này hầu như không giúp bạn đánh giá nhu cầu mạnh hay yếu.
+
+### Cách hỏi tốt hơn
+
+Bạn có thể đổi thành:
+
+> Lần gần nhất bạn sửa CV là khi nào?
+> Lúc đó tại sao phải sửa?
+> Bạn đã sửa thế nào?
+> Bước nào kẹt nhất?
+> Bạn có tìm ai giúp bạn xem không?
+> Trước đây bạn đã từng tiêu tiền hoặc nhiều thời gian cho việc CV chưa?
+
+Qua những câu hỏi này, thông tin bạn có thể nhận được là:
+
+- Rất nhiều người không phải không biết viết, mà không biết sửa cho phù hợp với vị trí khác nhau
+- Điểm đau nhất của họ không phải là bố cục, mà là "không biết kinh nghiệm nào đáng viết"
+- Họ trì hoãn, không phải vì lười, mà vì mỗi lần sửa CV rất mất sức
+- Họ đang dùng gợi ý của anh chị khóa trên, trang web template, công cụ AI và bạn bè giúp xem để giải lý tạm
+
+Lúc này, bạn đã gần với vấn đề thực tế hơn nhiều.
+
+## 8. The Mom Test kết hợp với JTBD thế nào
+
+Nếu JTBD giúp bạn nhìn rõ "người dùng muốn hoàn thành tiến triển gì", thì The Mom Test giống như đang dạy bạn:
+
+**Cách thông qua phỏng vấn, xác nhận job này có thực sự tồn tại hay không.**
+
+Bạn hoàn toàn có thể kết nối cả hai:
+
+1. Trước dùng JTBD giả định một job
+2. Rồi dùng cách The Mom Test, đi hỏi người dùng về trải nghiệm thực tế gần nhất
+3. Xem job này có thực sự tần suất cao, thực tế, đáng ưu tiên không
+
+Ví dụ giả định JTBD của bạn là:
+
+> Khi tôi chuẩn bị nộp hồ sơ thực tập, tôi muốn nhanh chóng sửa CV cũ thành phiên bản phù hợp với vị trí, để hoàn thành nộp hồ sơ càng sớm càng tốt.
+
+Thì bạn có thể dùng câu hỏi phong cách The Mom Test để xác minh:
+
+- Lần gần nhất bạn nộp hồ sơ là khi nào?
+- Lúc đó bạn đã sửa CV thế nào?
+- Đoạn nào khó viết nhất?
+- Sau khi sửa xong bạn đánh giá thế nào biết là đủ tốt chưa?
+
+Như vậy, phương pháp đã được kết nối:
+
+- JTBD giúp bạn định nghĩa giả định nhu cầu
+- The Mom Test giúp bạn phỏng vấn xác minh giả định
+
+## 9. Sai lầm phổ biến nhất khi người mới làm phỏng vấn người dùng
+
+### 9.1 Biến phỏng vấn thành hội thảo giới thiệu sản phẩm
+
+Bạn vừa nói quá nhiều về ý tưởng của mình, đối phương dễ bắt đầu phối hợp bạn, thay vì nói cho bạn tình hình thực tế.
+
+### 9.2 Đối tượng phỏng vấn toàn người quen
+
+Người quen không phải không thể trò chuyện, nhưng người quen dễ khích lệ bạn hơn. Bạn ít nhất cần pha trộn một số người gần với người dùng thực tế hơn, thay vì chỉ tìm người ủng hộ bạn.
+
+### 9.3 Theo đuổi hỏi chi tiết chức năng quá sớm
+
+Nếu bạn chưa làm rõ vấn đề, đã bắt đầu hỏi chi tiết nút bấm, giao diện, chức năng, thường là đang bước vào giải pháp quá sớm.
+
+### 9.4 Coi một câu "tôi sẽ dùng" thành kết quả xác minh
+
+Phỏng vấn nhiều nhất giúp bạn đánh giá hướng đi, không đồng nghĩa đã hoàn thành xác minh. Xác minh thực sự, cuối cùng vẫn phải xem người dùng có sẵn sàng trả chi phí thực tế hay không, ví dụ thời gian, chi phí chuyển đổi, hành vi dùng thử, thậm chí trả phí.
+
+### 9.5 Không sắp xếp sau khi phỏng vấn xong
+
+Nếu bạn trò chuyện xong rồi để đó, thông tin nhanh chóng sẽ trở thành ấn tượng mơ hồ. Tốt nhất nên sắp xếp sớm:
+
+- Vấn đề xuất hiện với tần suất cao
+- Từ ngữ cảm xúc trong lời gốc của người dùng
+- Giải pháp thay thế hiện tại
+- Chi phí đã trả
+- Đánh giá mới của bạn
+
+## 10. Danh sách câu hỏi có thể copy để dùng ngay
+
+Nếu bạn muốn bắt đầu nhanh nhất, đây là một bộ câu hỏi đủ thông dụng.
+
+### Câu hỏi mở đầu
+
+- Lần gần nhất bạn gặp vấn đề này là khi nào?
+- Lúc đó cụ thể đã xảy ra chuyện gì?
+
+### Câu hỏi hành vi
+
+- Lúc đó bạn đã xử lý thế nào?
+- Tại sao bạn lại chọn cách này?
+
+### Câu hỏi chi phí
+
+- Việc này thường tiêu bao nhiêu thời gian hoặc sức lực của bạn?
+- Bạn có từng tiêu tiền để giải quyết nó chưa?
+
+### Câu hỏi giải pháp thay thế
+
+- Bạn đã thử công cụ hoặc cách nào khác chưa?
+- Tại sao cuối cùng không tiếp tục dùng?
+
+### Câu hỏi kết thúc
+
+- Nếu sau này còn gặp vấn đề tương tự, bạn thấy cách giải quyết lý tưởng nhất nên trông như thế nào?
+
+Lưu ý, câu hỏi kết thúc này có thể hỏi, nhưng tốt nhất đặt phía sau. Vì phía trước bạn cần lấy sự kiện trước, thay vì ước mơ.
+
+## 11. Tóm tắt
+
+Đóng góp quan trọng nhất của The Mom Test, không phải cho bạn một bộ kỹ năng "giỏi trò chuyện hơn", mà là giúp bạn xây dựng một cách đánh giá tỉnh táo hơn:
+
+- Đừng quá nhanh tin vào lời khen của người khác về ý tưởng của bạn
+- Đừng coi "nếu có tôi sẽ dùng" thành nhu cầu thực tế
+- Đừng để phỏng vấn biến thành bạn đang tìm kiếm sự công nhận
+
+Phỏng vấn thực sự có giá trị, nên cố gắng quay về những thứ này:
+
+- Trải nghiệm thực tế gần nhất của người dùng
+- Họ đang xử lý thế nào hiện tại
+- Họ đã trả chi phí gì
+- Họ không thoải mái rõ ràng ở điểm nào
+
+Khi bạn bắt đầu hỏi như thế, thông tin bạn nhận được tuy đôi khi không nghe hay bằng, nhưng thường hữu dụng hơn.
+Và khi làm sản phẩm, **sự thật hữu dụng, mãi mãi quan trọng hơn lời khích lệ nghe hay.**
+
+<a id="mom-ai"></a>
+## [12. Cách dùng AI giúp bạn làm phỏng vấn người dùng](#top-mom)
+
+The Mom Test bản chất vẫn là phương pháp "trò chuyện với người thật", nên AI không thể thay thế phỏng vấn thực tế. Nhưng AI rất phù hợp hỗ trợ bạn trước, trong và sau phỏng vấn, đặc biệt giúp người mới giảm rào cản.
+
+### 12.1 Để AI giúp bạn viết lại câu hỏi "dễ hỏi hỏng"
+
+Rất nhiều người biết mình không nên hỏi "bạn thấy ý tưởng này của tôi thế nào", nhưng vừa mở miệng vẫn sẽ quay lại câu kiểu này. Bạn có thể đưa câu hỏi chuẩn bị hỏi cho AI trước, để nó giúp bạn viết lại:
+
+```text
+Dưới đây là những câu hỏi tôi chuẩn bị dùng để phỏng vấn người dùng:
+[Dán câu hỏi của bạn]
+
+Xin dùng nguyên tắc The Mom Test giúp tôi viết lại:
+1. Xóa câu hỏi dạng ý kiến
+2. Xóa câu hỏi giả định tương lai
+3. Cố gắng đổi thành câu hỏi xoay quanh hành vi thực tế trong quá khứ, giải pháp thay thế hiện có và chi phí đã trả
+4. Cuối cùng sắp xếp thành một bộ 8-10 câu hỏi phỏng vấn có thể dùng trực tiếp
+```
+
+Một input rất nhỏ cũng hoàn toàn có thể:
+
+```text
+Tôi muốn hỏi người dùng:
+1. Bạn thấy tôi làm một công cụ AI sửa CV thế nào?
+2. Bạn có dùng không?
+3. Bạn có sẵn sàng trả phí không?
+
+Giúp tôi đổi thành cách hỏi tốt hơn.
+```
+
+AI có thể cho output hữu ích trông như thế này:
+
+```text
+Câu hỏi sau khi viết lại:
+
+1. Lần gần nhất bạn sửa CV là khi nào?
+2. Lúc đó tại sao phải sửa?
+3. Bạn đã sửa thế nào?
+4. Bước nào mất thời gian nhất?
+5. Bạn có tìm ai giúp bạn xem không?
+6. Trước đây bạn có từng tiêu tiền hoặc nhiều thời gian cho việc sửa CV không?
+```
+
+Loại output này rất hữu ích, vì nó trực tiếp biến câu hỏi "đang hỏi ý kiến" của bạn thành câu hỏi "đang hỏi hành vi thực tế".
+
+### 12.2 Để AI giúp bạn tạo đề cương phỏng vấn cho các đối tượng khác nhau
+
+Cùng một hướng, đối mặt với các nhóm người khác nhau, trọng tâm phỏng vấn sẽ khác. Ví dụ sinh viên, HR, freelancer, điểm quan tâm hoàn toàn khác. Bạn có thể để AI giúp bạn xuất một bản đề cương cho từng đối tượng:
+
+- Hướng người dùng mới, tập trung hiểu trải nghiệm thực tế gần nhất
+- Hướng người dùng nặng, tập trung hiểu giải pháp thay thế và mức độ đau
+- Hướng người dùng trả phí, tập trung hiểu đã từng trả chi phí cho việc này chưa
+
+Như vậy khi thực sự trò chuyện bạn sẽ có nhịp điệu hơn, thay vì hỏi cùng một bộ câu hỏi với tất cả mọi người.
+
+Ví dụ bạn có thể nhập trực tiếp như sau:
+
+```text
+Tôi sẽ trò chuyện với hai loại người:
+1. Sinh viên lần đầu tìm thực tập
+2. Anh chị khóa trên đã giúp nhiều người xem CV
+
+Xin cho tôi mỗi loại một bản đề cương phỏng vấn, mỗi bản 6 câu hỏi.
+```
+
+AI có thể xuất:
+
+```text
+Cho sinh viên:
+1. Lần gần nhất nộp thực tập là khi nào?
+2. Lúc đó bước nào kẹt nhất?
+3. Bạn làm sao biết CV mình có thể nộp được không?
+...
+
+Cho anh chị khóa trên:
+1. Lần gần nhất bạn giúp người khác xem CV là khi nào?
+2. Bạn thường thấy vấn đề rõ ràng nhất là gì?
+3. Các em khóa dưới dễ kẹt ở bước nào nhất?
+...
+```
+
+Như vậy, bạn không cần tự biên soạn câu hỏi từ đầu, chuẩn bị phỏng vấn sẽ nhẹ nhàng hơn nhiều.
+
+### 12.3 Để AI giúp bạn sắp xếp bản ghi phỏng vấn
+
+Sau khi phỏng vấn xong, vấn đề dễ xuất hiện nhất không phải "không có thông tin", mà là "thông tin quá phân tán". AI rất phù hợp giúp bạn sắp xếp đối thoại phân mảnh thành ghi chú có cấu trúc:
+
+```text
+Dưới đây là bản ghi phỏng vấn của tôi với 3 người dùng.
+Xin sắp xếp theo góc nhìn The Mom Test:
+1. Nội dung nào là sự kiện, nội dung nào chỉ là ý kiến
+2. Hành vi thực tế gần nhất của người dùng là gì
+3. Giải pháp thay thế hiện tại là gì
+4. Chi phí thời gian, tiền bạc hoặc sức lực người dùng đã trả là gì
+5. Vấn đề nào được nhắc đến lặp đi lặp lại
+6. Cách nói nào nghe tích cực nhưng bằng chứng không đủ
+```
+
+Bước này đặc biệt có giá trị, vì nó có thể giúp bạn phân biệt nội dung "nghe có vẻ ổn" với nội dung "thực sự có thể hỗ trợ đánh giá".
+
+Một input đơn giản có thể là:
+
+```text
+Đây là bản ghi sau khi tôi trò chuyện với một người dùng:
+
+- Cô ấy nói nếu có công cụ chắc sẽ thử
+- Tuần trước cô ấy mất một tối để sửa CV
+- Hiện cô ấy chủ yếu nhờ bạn bè giúp xem
+- Cô ấy nói khó nhất là không biết sửa đến mức nào thì có thể nộp
+
+Xin giúp tôi phân biệt, đâu là ý kiến, đâu là sự kiện.
+```
+
+AI có thể xuất:
+
+```text
+Ý kiến:
+- Nếu có công cụ chắc sẽ thử
+
+Sự kiện:
+- Tuần trước mất một tối để sửa CV
+- Giải pháp thay thế hiện tại là nhờ bạn bè giúp xem
+- Điểm khó nhất là không biết khi nào "có thể nộp"
+
+Trọng tâm có thể dùng để đánh giá nhu cầu:
+- Vấn đề này vừa mới xảy ra gần đây
+- Người dùng đã đầu tư chi phí thời gian rõ ràng
+- Giải pháp hiện tại dựa vào người khác, không ổn định
+```
+
+Output này có thể trực giác cho người mới thấy: lời nào có thể dùng để đánh giá, lời nào chỉ có thể nghe.
+
+### 12.4 Để AI làm trước một vòng tìm kiếm mạng nhẹ nhàng
+
+Nếu bạn chưa bắt đầu phỏng vấn, có thể để AI giúp bạn làm một số nghiên cứu bên ngoài rất nhẹ, ví dụ:
+
+- Trong cộng đồng công khai, mọi người gần đây phàn nàn về vấn đề này thế nào
+- Công cụ hiện có bị phàn nàn nhiều nhất là gì
+- Người dùng đã từng trả tiền cho vấn đề tương tự chưa
+- Trên thị trường có những giải pháp thay thế nào đã tồn tại
+
+Loại thông tin này không thể thay thế phỏng vấn người thật, nhưng có thể giúp bạn nhanh chóng vào trạng thái, biết nên bắt đầu hỏi từ đâu.
+
+Ví dụ một input đơn giản:
+
+```text
+Xin giúp tôi tìm:
+"Sinh viên sửa CV thường phàn nàn nhiều nhất điều gì"
+Giúp tôi sắp xếp 5 phàn nàn phổ biến nhất, viết bằng ngôn ngữ rất bình dân.
+```
+
+AI có thể xuất:
+
+```text
+Phàn nàn phổ biến:
+
+1. Không biết CV nên viết kinh nghiệm gì
+2. Mỗi lần nộp một vị trí lại phải sửa, quá mệt
+3. Sửa nhiều phiên bản vẫn không chắc tốt chưa
+4. Không tìm được ai cho phản hồi đáng tin cậy
+5. Luôn cảm thấy chưa chuẩn bị xong, nên cứ kéo dài
+```
+
+Giá trị của loại kết quả này là, nó sẽ giúp bạn dễ dàng tìm được điểm vào phỏng vấn hơn.
+
+### 12.5 Để AI đóng vai "huấn luyện viên tổng kết phỏng vấn"
+
+Bạn cũng có thể ném bản ghi phỏng vấn vừa hoàn thành cho AI, để nó giúp bạn bắt lỗi:
+
+```text
+Dưới đây là một bản ghi phỏng vấn người dùng của tôi.
+Xin giúp tôi tổng kết từ góc nhìn The Mom Test:
+1. Câu hỏi nào của tôi hỏi quá giống đang tìm kiếm sự công nhận
+2. Câu hỏi nào mang dẫn dắt rõ ràng
+3. Đâu có thể tiếp tục hỏi sâu sự kiện
+4. Nếu làm lại một lần, đoạn đối thoại này có thể hỏi tốt hơn thế nào
+```
+
+Điều này đặc biệt hữu ích cho người mới, vì bạn sẽ nhanh chóng xây dựng độ nhạy "tôi đang thu thập bằng chứng hay đang thu thập lời khích lệ".
+
+## 📚 Bài tập
+
+Xin bạn dựa vào nội dung bài viết, hoàn thành bài tập sau:
+
+1. Chọn một hướng sản phẩm bạn muốn làm gần đây, trước viết ra 5 câu hỏi "dễ hỏi hỏng" bạn sẽ hỏi
+2. Viết lại 5 câu hỏi này thành câu hỏi phù hợp hơn với phong cách The Mom Test
+3. Tìm 3 người dùng tiềm năng, ít nhất hỏi được một lần "lần gần nhất bạn gặp vấn đề này là khi nào"
+4. Sau khi phỏng vấn xong sắp xếp 4 loại thông tin: Hành vi thực tế, giải pháp thay thế, chi phí đã trả, khó khăn xuất hiện lặp đi lặp lại
+
+## Đọc thêm
+
+- [The Mom Test trang web chính thức](https://momtestbook.com/)
+- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
diff --git a/docs/vi-vn/stage-1/building-prototype/index.md b/docs/vi-vn/stage-1/building-prototype/index.md
new file mode 100644
index 0000000..cfb2f97
--- /dev/null
+++ b/docs/vi-vn/stage-1/building-prototype/index.md
@@ -0,0 +1,489 @@
+---
+title: 'Tự tay làm nguyên mẫu - từ phân tích nghiệp vụ đến prototype nhiều trang'
+description: 'Trải nghiệm vòng khép kín từ phân tích nghiệp vụ đến xây dựng prototype sản phẩm nhiều trang. Học cách hỏi nghiệp vụ, tách nhu cầu, dùng AI IDE tạo ứng dụng một trang và nhiều trang, rồi làm đẹp và kiểm thử prototype.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'khoảng <strong>8 giờ</strong>'
+const relatedArticles =
+  relatedArticlesMap['vi-vn/stage-1/building-prototype'] ?? []
+</script>
+
+# Sơ cấp 3: Tự tay làm nguyên mẫu
+
+## Dẫn nhập chương
+
+<ChapterIntroduction :duration="duration" :tags="['Phân tích nghiệp vụ', 'Thiết kế prototype', 'Lập trình với AI', 'Ứng dụng nhiều trang']" coreOutput="1 prototype bàn làm việc nội dung thương mại điện tử" expectedOutput="Prototype Web có thể tương tác">
+
+Ở chương trước, chúng ta đã học cách <strong>tìm một ý tưởng tốt</strong>: bắt đầu từ nhu cầu người dùng và tìm hướng có người sẵn sàng trả tiền. Nhưng tìm được hướng mới chỉ là bước đầu. Thử thách thật sự là: <strong>làm thế nào biến một nhu cầu mơ hồ thành một sản phẩm dùng được</strong>.
+
+Trong chương này, ta xử lý một vấn đề rất thực tế: sếp nói "hãy dùng AI để tăng hiệu suất đăng sản phẩm lên nền tảng thương mại điện tử". Bạn sẽ biến câu nói đó thành <strong>một prototype sản phẩm có thể thao tác</strong> như thế nào?
+
+Khác với trò rắn săn mồi hay máy tính bỏ túi, nghiệp vụ thật không thể nghĩ chức năng trong phòng kín. Ta cần:
+
+1. <strong>Làm rõ điểm đau</strong>: nói chuyện với vận hành để tìm vấn đề thật phía sau câu "tăng hiệu suất".
+2. <strong>Chọn phần quan trọng nhất</strong>: trong nhiều vấn đề, làm trước điểm đau nhất.
+3. <strong>Kiểm chứng nhanh</strong>: dùng AI IDE tạo prototype một trang trước, chạy được rồi mới mở rộng.
+4. <strong>Làm ra thứ dùng được</strong>: cuối cùng có một bàn làm việc nội dung thương mại điện tử có thể demo và thao tác.
+
+Mục tiêu của chương là chuyển từ "làm đồ chơi" sang "làm ứng dụng", đồng thời học cách đồng cảm và suy nghĩ về nhu cầu thật của khách hàng.
+
+</ChapterIntroduction>
+
+::: info Ghi chú
+Trong bài có một số thuật ngữ nghiệp vụ. Nếu chưa hiểu, hãy hỏi AI giải thích bằng ngôn ngữ đơn giản.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Phân tích nhu cầu', description: 'Từ mơ hồ đến cụ thể' },
+      { title: 'Kiểm chứng một trang', description: 'Làm ra lõi trải nghiệm' },
+      { title: 'Mở rộng nhiều trang', description: 'Hoàn thiện cấu trúc ứng dụng' },
+      { title: 'Làm đẹp và hoàn thiện', description: 'Nâng trải nghiệm người dùng' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Xác định nhu cầu trước khi viết code
+
+Trong các bài trước, ta dùng AI IDE để tạo trò chơi nhỏ rất nhanh. Nhưng đó chủ yếu là dự án tự dùng. Nếu muốn năng lực AI thật sự phục vụ công việc và đời sống, ta phải đặt vibe coding vào một bối cảnh cụ thể.
+
+Khi làm sản phẩm thật, khoảng cách giữa "biết muốn làm gì" và "biết phải làm thế nào" rất lớn. Khoảng cách đó chính là quá trình cụ thể hóa nhu cầu.
+
+Trong dự án cá nhân, ta thường bắt đầu bằng một chức năng đơn giản:
+
+- "Làm một bảng Kanban để liệt kê nhiệm vụ."
+- "Làm một công cụ vẽ."
+- "Làm một phần mềm thu thập khảo sát."
+
+Những câu này thường chỉ mô tả một công cụ hoặc một module, chưa chắc đã là vấn đề nghiệp vụ rõ ràng. Quan trọng hơn: chúng có thể chỉ là "mình thấy hữu ích", chứ chưa chắc người dùng thật sự cần.
+
+Trong dự án doanh nghiệp hoặc khởi nghiệp, sản phẩm thường bắt đầu từ một đề bài rộng hơn. Ví dụ:
+
+<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
+  <div style="font-weight: bold; color: #303133; margin-bottom: 10px;">Kịch bản nghiệp vụ:</div>
+  <div style="color: #606266; line-height: 1.6;">
+    <p>Bạn là product manager phụ trách vận hành thương mại điện tử của một cửa hàng. Sếp giao một đề bài khá mơ hồ nhưng áp lực:</p>
+    <p style="font-style: italic; margin-top: 10px;">"Bây giờ ai cũng nói dùng AI làm ảnh và viết copy rất dễ. Em nghiên cứu thử, làm sao để khi chúng ta đăng sản phẩm mới lên Douyin Ecommerce thì hiệu suất cao hơn."</p>
+  </div>
+</el-card>
+
+Phản ứng đầu tiên có thể là: đưa câu này cho AI Agent và yêu cầu nó thiết kế một bàn làm việc nội dung. Ví dụ:
+
+```txt
+Hãy dựa trên nhu cầu của tôi,
+thiết kế một bàn làm việc nội dung thương mại điện tử,
+bao gồm tạo và quản lý mô tả sản phẩm, ảnh, video và các tài nguyên khác.
+```
+
+Nếu làm ngay như vậy rồi đem đi trình bày, khả năng cao kết quả sẽ không dùng được. Lý do là:
+
+- **Bạn chưa phải người dùng thật**: sếp nói "hiệu suất cao hơn", nhưng bạn chưa biết vận hành đang làm gì mỗi ngày và đang kẹt ở đâu.
+- **AI cũng không hiểu nghiệp vụ của bạn**: yêu cầu mơ hồ sẽ khiến AI đoán theo kiến thức chung.
+- **Ý tưởng tốt không tự động thành sản phẩm tốt**: thêm một chức năng AI nhìn có vẻ hay, nhưng có thể làm quy trình rối hơn.
+
+Vì vậy, trước khi viết code, cần học cách đi từ ý tưởng đến hiểu người dùng.
+
+### 1.1 Từ tưởng tượng đến thực tế: học cách hỏi nghiệp vụ
+
+::: info Nhu cầu và nghiệp vụ là gì?
+
+**Nhu cầu** là điều người dùng thật sự muốn giải quyết: rắc rối, mục tiêu, hoặc áp lực của họ. Ví dụ "đăng sản phẩm nhanh hơn" là một nhu cầu.
+
+**Nghiệp vụ** là cách người dùng đang làm việc mỗi ngày: đăng sản phẩm, sửa giá, làm ảnh, xem dữ liệu, theo dõi chiến dịch.
+
+Nếu không hiểu nghiệp vụ, công cụ rất dễ rơi vào trạng thái "nhìn hay nhưng không ai dùng".
+
+:::
+
+Bạn có thể bắt đầu bằng vài câu hỏi đơn giản:
+
+- "Hiệu suất cao hơn" cụ thể là nhanh hơn, ít tốn tiền hơn, hay bán được nhiều hơn?
+- Hiện tại quy trình đăng sản phẩm diễn ra như thế nào?
+- Mỗi ngày có bao nhiêu sản phẩm mới? Mỗi sản phẩm cần bao nhiêu ảnh và bao nhiêu chữ?
+- Việc nào tốn thời gian nhất, khó chịu nhất, hoặc bị phàn nàn nhiều nhất?
+
+Sau khi hỏi người làm vận hành, ta có thể thu được vài nhận xét:
+
+::: info Kết quả phỏng vấn nghiệp vụ
+
+**1. Công việc quá nhiều và quá vụn**
+
+- Một người phải quản lý nhiều cửa hàng, mỗi cửa hàng có nhiều sản phẩm.
+- Mỗi ngày phải đăng hàng mới, sửa giá, làm ảnh, xem dữ liệu, việc này chưa xong đã đến việc khác.
+
+**2. Nội dung không phải làm một lần là xong**
+
+- Ban đầu thường dùng ảnh nhà cung cấp, tư liệu cũ hoặc ảnh tham khảo trên mạng để đăng thử nhanh.
+- Chạy quảng bá nhỏ để xem có ai mua không.
+- Chỉ khi sản phẩm bán tốt mới đầu tư làm ảnh, viết chi tiết, quay video.
+
+:::
+
+Đến đây vẫn chưa nên làm tất cả. Nếu cố thỏa mãn mọi yêu cầu trong một lần, sản phẩm sẽ quá lớn và khó hoàn thành trong thời gian học. Cần tiếp tục thu hẹp phạm vi.
+
+### 1.2 Từ mở rộng đến thu hẹp: khóa điểm đau cốt lõi
+
+::: info Vì sao cần thu hẹp?
+
+Người dùng có thể nói rất nhiều vấn đề. Nhưng nếu cố làm hết A, B, C cùng lúc, ta thường không làm tốt được vấn đề nào. Thu hẹp nghĩa là chọn một điểm đau cấp bách, cụ thể và có thể giải quyết trước.
+
+**Điểm đau** là việc khiến người dùng tốn thời gian, khó chịu và muốn giải quyết nhất, không phải điều ta tự tưởng tượng là hữu ích.
+
+:::
+
+Qua phỏng vấn, vấn đề vận hành gặp phải có thể chia thành ba nhóm:
+
+1. **Nhịp vận hành**: khi nào đăng hàng, khi nào điều chỉnh giá.
+2. **Hiệu suất quản lý**: làm sao quản lý nhiều cửa hàng và nhiều sản phẩm.
+3. **Nội dung**: làm sao tạo ảnh sản phẩm và copy nhanh hơn.
+
+Với bài học này, ta chọn nhóm thứ ba. Sau khi hỏi kỹ hơn, có hai điểm đau nổi bật:
+
+::: info Hai điểm đau khi làm nội dung
+
+**Điểm đau 1: Làm ảnh và copy hàng loạt quá mất công**
+
+- Tư liệu nằm rải rác ở ổ đám mây, lịch sử chat, backend nền tảng.
+- Một lần phải đăng nhiều sản phẩm, không đủ thời gian làm từng cái thật đẹp.
+- Giai đoạn thử nghiệm chỉ cần "nhìn ổn, đăng được", chưa cần hoàn hảo.
+
+**Điểm đau 2: Cách làm tốt không lưu lại để dùng lại được**
+
+- Tiêu đề, bố cục hoặc copy từng dùng tốt rất khó tìm lại.
+- Mẫu nằm trong chat cũ hoặc link sản phẩm cũ.
+- Khi cần lại phải lục, copy, sửa rất lâu.
+- Cần một công cụ để lưu, quản lý và áp dụng lại mẫu.
+
+:::
+
+Vì vậy, prototype đầu tiên chỉ cần làm hai việc:
+
+::: info Chức năng 1: tạo ảnh và copy sản phẩm hàng loạt
+
+**Đầu vào**
+
+| Loại | Nội dung |
+| --- | --- |
+| Thông tin sản phẩm | Tên, danh mục, thương hiệu, chất liệu, kích thước, màu sắc |
+| Ảnh sản phẩm | Ảnh nền trắng hoặc ảnh bối cảnh đơn giản |
+| Ảnh tham khảo | Ảnh sản phẩm từng bán tốt hoặc link tham khảo |
+| Cách nhập | Nhập Excel hàng loạt hoặc nhập trực tiếp trên trang |
+
+**Đầu ra**
+
+- Ảnh chính có điểm bán cơ bản.
+- Tiêu đề chứa từ khóa chính.
+- Một đến hai câu copy bán hàng.
+- Kết quả đủ để vận hành chọn, sửa nhẹ rồi đăng.
+
+:::
+
+::: info Chức năng 2: lưu phương án tốt thành mẫu
+
+| Đầu vào | Nội dung |
+| --- | --- |
+| Một bộ kết quả | Ảnh chính + tiêu đề + copy |
+
+| Đầu ra | Mô tả |
+| --- | --- |
+| Áp dụng | Khi làm sản phẩm mới, dùng mẫu để tạo bản nháp |
+| Chỉnh sửa | Sửa trực tiếp tiêu đề hoặc copy |
+| Quản lý | Đặt tên, gắn tag, phân loại theo cửa hàng hoặc chiến dịch |
+
+Quy trình mong muốn: nhập sản phẩm mới, chọn tạo mặc định hoặc dùng mẫu đã lưu, sau đó hệ thống áp dụng phong cách của mẫu để tạo kết quả mới.
+
+:::
+
+Tóm lại, trước khi viết code ta đã làm ba việc: hỏi người dùng, tìm điểm đau, thu hẹp phạm vi. Code chỉ là công cụ; hiểu người dùng và chọn đúng vấn đề mới là bước đầu.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Phân tích nhu cầu', description: 'Từ mơ hồ đến cụ thể' },
+      { title: 'Kiểm chứng một trang', description: 'Làm ra lõi trải nghiệm' },
+      { title: 'Mở rộng nhiều trang', description: 'Hoàn thiện cấu trúc ứng dụng' },
+      { title: 'Làm đẹp và hoàn thiện', description: 'Nâng trải nghiệm người dùng' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Tạo prototype trong 10 phút: để AI IDE làm ra lõi trải nghiệm
+
+::: info Gợi ý về Coding Plan
+Nếu IDE hiện tại không đủ thông minh hoặc hạn mức hết quá nhanh, bạn có thể tìm hiểu các Coding Plan hoặc công cụ CLI ở bài [Moderne CLI Coding Werkzeuge](../../stage-2/backend/modern-cli/).
+:::
+
+Không nên suy nghĩ quá lâu. Khi phạm vi đã rõ, hãy bắt đầu từ một trang đơn giản.
+
+### 2.1 Bước một: nói với AI bằng ngôn ngữ đời thường
+
+Người mới không cần viết prompt hoàn hảo ngay. Hãy mô tả như đang nói chuyện với đồng nghiệp:
+
+```txt
+Tôi muốn làm một công cụ giúp vận hành thương mại điện tử tự động tạo ảnh chính và copy sản phẩm.
+Hiện tại họ phải tự làm từng ảnh và từng đoạn chữ, rất mất thời gian.
+Ý tưởng là: họ nhập thông tin sản phẩm, hệ thống tạo một nhóm bản nháp,
+vận hành chọn bản ổn rồi sửa nhẹ để dùng.
+
+Phiên bản đầu tiên chỉ cần một trang:
+bên trái nhập thông tin sản phẩm,
+bên phải hiển thị kết quả tạo ra.
+Hỗ trợ tải ảnh, nhập chữ,
+sau khi tạo thì hiển thị ảnh xem trước và copy.
+```
+
+Sau đó đưa đoạn này cho AI và yêu cầu nó mở rộng thành tài liệu nghiệp vụ và prompt cho AI IDE:
+
+```txt
+Hãy mở rộng ý tưởng trên thành một tài liệu logic nghiệp vụ rõ ràng,
+sau đó tạo một prompt phù hợp để gửi cho AI IDE như Cursor hoặc Trae,
+dùng để sinh prototype ứng dụng một trang.
+```
+
+AI thường sẽ bổ sung các chi tiết bạn chưa nghĩ tới. Bạn cần đọc lại, bỏ những chức năng chưa cần, rồi mới dùng prompt đó để sinh code.
+
+### 2.2 Có tài liệu rồi thì gửi thẳng cho AI IDE
+
+Nếu bạn đã tự viết tài liệu nghiệp vụ, có thể dùng mẫu sau:
+
+```txt
+Hãy dựa trên logic nghiệp vụ sau để xây dựng một ứng dụng một trang nhằm kiểm chứng chức năng cốt lõi.
+
+Logic nghiệp vụ:
+1. Giúp vận hành tạo bản nháp ảnh và copy sản phẩm hàng loạt.
+- Đầu vào:
+  - Thông tin cơ bản: tên, danh mục, thương hiệu, chất liệu, kích thước, màu sắc, nhóm người dùng.
+  - Ảnh sản phẩm: ảnh nền trắng hoặc ảnh bối cảnh đơn giản.
+  - Ảnh tham khảo hoặc link sản phẩm từng bán tốt.
+  - Có thể nhập bằng Excel hoặc nhập trực tiếp trên trang.
+  - Có tùy chọn lưu tư liệu vào thư viện.
+- Đầu ra:
+  - Mỗi sản phẩm có một ảnh chính nháp với điểm bán cơ bản.
+  - Một tiêu đề có cấu trúc hợp lý và một đến hai câu copy bán hàng.
+- Cách dùng mong muốn:
+  Thay vì bắt đầu từ trang trắng, vận hành đưa một lô sản phẩm vào hệ thống,
+  rồi chọn và chỉnh nhẹ bản nháp do hệ thống tạo.
+
+Trước tiên chỉ làm chức năng thứ nhất. Thư viện mẫu để thêm sau.
+```
+
+### 2.3 Cách nâng cao: để AI viết "prompt cho prompt"
+
+Bạn cũng có thể yêu cầu một AI khác viết prompt dành riêng cho coding Agent:
+
+```txt
+Dựa trên ý tưởng sau, hãy viết một prompt dùng để gửi cho coding Agent.
+
+[Dán mô tả nghiệp vụ của bạn ở đây]
+
+Yêu cầu:
+1. Có mô tả bố cục trang rõ ràng.
+2. Nêu rõ cấu trúc dữ liệu và logic tương tác.
+3. Chỉ định stack kỹ thuật, ví dụ React + Tailwind.
+4. Liệt kê các chức năng cốt lõi cần làm.
+```
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png)
+
+### 2.4 Để AI IDE sinh code
+
+Nếu chưa quen AI IDE như Cursor, Trae hoặc Windsurf, hãy xem trước [IDE cơ bản](/vi-vn/appendix/2-development-tools/ide-basics/): cách tạo dự án, nói chuyện với Agent và đọc quá trình sinh code.
+
+Tạo một thư mục mới rồi mở trong AI IDE:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png)
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png)
+
+Trong thanh bên, chọn mô hình bạn muốn dùng, ví dụ Gemini, GPT, GLM, Kimi hoặc MiniMax, rồi dán prompt đã chuẩn bị:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png)
+
+Sau khi gửi, AI sẽ lập kế hoạch thư mục, tạo file và viết nội dung ban đầu.
+
+::: warning Lưu ý: Agent có thể dừng để chờ xác nhận
+Trong quá trình sinh code, Agent thường dừng lại để chờ bạn xác nhận: nhấn Enter, chọn phương án, hoặc cho phép chạy lệnh. Nếu thấy AI không chạy tiếp, hãy kiểm tra khung chat xem nó đang chờ phản hồi hay không.
+:::
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png)
+
+Nếu xuất hiện một dịch vụ local, bạn cần mở đường dẫn trong trình duyệt hoặc bấm bỏ qua bước chờ trong IDE:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png)
+
+::: info Giải thích nhanh về localhost
+Khi tạo dự án React bằng Vite, máy tính sẽ chạy một server local để bạn xem trang. `localhost` nghĩa là "chính máy tính này". Cổng như `5174` là số để phân biệt các dịch vụ khác nhau. Nếu `5173` bị chiếm, hệ thống tự đổi sang cổng khác là bình thường.
+:::
+
+Sau khi xác nhận xong, chờ Agent chạy một lúc, bạn sẽ có phiên bản đầu tiên:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png)
+
+Nếu giao diện còn xấu, hãy nói thẳng với AI:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png)
+
+Sau khi tối ưu có thể nhận được giao diện đẹp hơn:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png)
+
+Bạn có thể tiếp tục điều chỉnh bằng yêu cầu cụ thể:
+
+- "Tôi chưa cần nhập hàng loạt, hãy bỏ chức năng này."
+- "Bên trái có quá nhiều trường, chỉ giữ lại các trường quan trọng."
+- "Hãy tham khảo bố cục trong ảnh này, không cần giống hoàn toàn."
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png)
+
+Kết quả cuối có thể tiến gần hơn đến một prototype chuyên nghiệp:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png)
+
+### 2.5 Gặp lỗi thì làm gì?
+
+Gặp lỗi là bình thường. Người mới không cần hiểu toàn bộ lỗi, chỉ cần đưa đầy đủ hiện tượng cho AI.
+
+- **Trang hoặc terminal báo lỗi**: chụp ảnh hoặc copy toàn bộ lỗi đỏ gửi cho AI.
+- **Chức năng sai nhưng không báo lỗi**: mô tả "hiện tại xảy ra gì" và "tôi mong muốn gì".
+- **Không chắc có lỗi hay không**: hỏi AI kiểm tra chức năng có vấn đề rõ ràng không.
+
+Một vài câu hỏi thường gặp:
+
+- **Không biết lỗi nằm ở đâu?** Hãy tìm chữ màu đỏ trong terminal, console hoặc trang web rồi copy cho AI.
+- **AI sửa xong vẫn lỗi?** Gửi lỗi mới nhất, yêu cầu sửa trên nền bản vừa sửa.
+- **Có cần hiểu hết cách sửa không?** Không cần ngay. Mỗi lần hiểu một hai điểm là đủ.
+- **Sửa nhiều lần vẫn không được?** Dùng Revert quay lại bản chạy được, đổi mô hình, hoặc gửi "code hiện tại + log lỗi + hành vi mong muốn" để AI xử lý tổng thể.
+
+## 3. Từ một trang mở rộng thành ứng dụng nhiều trang
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Phân tích nhu cầu', description: 'Từ mơ hồ đến cụ thể' },
+      { title: 'Kiểm chứng một trang', description: 'Làm ra lõi trải nghiệm' },
+      { title: 'Mở rộng nhiều trang', description: 'Hoàn thiện cấu trúc ứng dụng' },
+      { title: 'Làm đẹp và hoàn thiện', description: 'Nâng trải nghiệm người dùng' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Khi logic cốt lõi đã chạy, hãy bổ sung các phần còn thiếu. Ví dụ nút cài đặt chưa hoạt động, trang thư viện mẫu chưa có, hoặc luồng lưu mẫu chưa hoàn chỉnh. Bạn có thể yêu cầu AI kiểm tra theo tài liệu nghiệp vụ và triển khai từng trang.
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png)
+
+Sau một lúc, ứng dụng có thể được bổ sung nhiều trang và chức năng tương tác:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png)
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png)
+
+Lúc này bạn cần tự bấm thử những nút quan trọng. Nếu phần nào không tương tác, hãy mô tả hiện tượng và để AI sửa.
+
+## 4. Làm prototype trông "ra dáng"
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Phân tích nhu cầu', description: 'Từ mơ hồ đến cụ thể' },
+      { title: 'Kiểm chứng một trang', description: 'Làm ra lõi trải nghiệm' },
+      { title: 'Mở rộng nhiều trang', description: 'Hoàn thiện cấu trúc ứng dụng' },
+      { title: 'Làm đẹp và hoàn thiện', description: 'Nâng trải nghiệm người dùng' }
+    ]" />
+  </ClientOnly>
+</div>
+
+Sau khi có nhiều trang, bước cuối là để prototype từ "chạy được" thành "dễ dùng và nhìn chuyên nghiệp". Hãy đi lại toàn bộ quy trình như một người dùng mới: nhập dữ liệu, tạo kết quả, lưu mẫu, mở thư viện, áp dụng lại mẫu.
+
+Nếu mỗi lần kiểm thử đều phải nhập dữ liệu mới, rất tốn thời gian. Hãy yêu cầu AI tạo lối vào dữ liệu thử:
+
+```txt
+Tôi cần kiểm thử luồng người dùng này. Hãy thêm một lối vào dữ liệu mẫu để tôi có thể bấm một nút và nhanh chóng kiểm tra toàn bộ quy trình:
+1. Nhập thông tin sản phẩm.
+2. Tạo ảnh và copy nháp.
+3. Chọn một kết quả.
+4. Lưu kết quả thành mẫu.
+5. Mở thư viện mẫu và xem lại tham số tạo.
+```
+
+Nếu một bộ dữ liệu quá ít, hãy yêu cầu AI tạo nhiều case kiểm thử:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png)
+
+Bấm vào có thể nhận kết quả:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png)
+
+Nếu kết quả xuất hiện quá nhanh, không giống quá trình tạo thật, có thể yêu cầu:
+
+> Hãy mô phỏng một quá trình tạo thật: sau khi bấm nút, chờ một khoảng thời gian rồi mới hiển thị kết quả.
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png)
+
+Sau đó kiểm tra thư viện mẫu. Nếu card kết quả chưa có chức năng lưu, hãy yêu cầu:
+
+> Hãy đảm bảo người dùng có thể bấm vào một kết quả để lưu thành mẫu. Khi mở mẫu, cần thấy được tham số tạo và nội dung đã lưu.
+
+Quá trình này thường cần sửa nhiều vòng bằng ảnh chụp và mô tả:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png)
+
+Kết quả kỳ vọng:
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png)
+
+Ngoài tự trải nghiệm, bạn cũng có thể nhờ AI làm kiểm tra yêu cầu:
+
+- "Hãy đối chiếu yêu cầu ban đầu và kiểm tra ứng dụng hiện tại đã bao phủ các chức năng cốt lõi chưa."
+- "Hãy liệt kê checklist chức năng, đánh dấu phần đã xong, phần chưa làm và phần trải nghiệm còn yếu."
+
+Checklist này giúp bạn quyết định nên tiếp tục chỉnh gì.
+
+## 5. Bài tập: làm lại bàn làm việc thương mại điện tử của riêng bạn
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">Nhiệm vụ thử thách: làm lại bàn làm việc nội dung thương mại điện tử</div>
+  </template>
+
+  <p>
+    Hãy tham khảo prompt và quy trình của bài này để hoàn thành một vòng khép kín:
+  </p>
+
+  <ul>
+    <li>
+      <strong>Thực hành vòng khép kín</strong>
+      <ul>
+        <li>Tạo prompt phân tích nghiệp vụ -> tạo prototype một trang -> mở rộng thành prototype nhiều trang</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Chia sẻ kết quả</strong>
+      <ul>
+        <li>Chụp ảnh chương trình của bạn và chia sẻ với mọi người</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Câu hỏi suy nghĩ</strong>
+      <ul>
+        <li>Chuẩn bị cho bài tiếp theo về LLM và tạo ảnh: trong bàn làm việc của bạn, có thể nhúng các năng lực như viết copy, tạo ảnh minh họa hoặc tạo kịch bản ở đâu?</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Bước tiếp theo
+
+Ở bài tiếp theo, ta sẽ dựa trên bàn làm việc nội dung này để kết nối năng lực AI cụ thể: text-to-text, image-to-text và text-to-image. Ví dụ:
+
+- Tự động tạo bản nháp copy và nhiều tiêu đề cho một nhiệm vụ nội dung.
+- Tạo ảnh nháp theo mô tả nhiệm vụ.
+- Phân loại và tóm tắt nhiệm vụ nội dung cũ để hỗ trợ lên kế hoạch cho chiến dịch tiếp theo.
+
+<RelatedArticlesSection
+  title="Tiếp tục học"
+  description="Nên học theo thứ tự: kết nối năng lực AI -> vòng khép kín dự án -> kỹ thuật hóa thiết kế."
+  :items="relatedArticles"
+/>
diff --git a/docs/vi-vn/stage-1/complete-project-practice/index.md b/docs/vi-vn/stage-1/complete-project-practice/index.md
new file mode 100644
index 0000000..326c4b3
--- /dev/null
+++ b/docs/vi-vn/stage-1/complete-project-practice/index.md
@@ -0,0 +1,301 @@
+---
+title: 'Thực chiến dự án hoàn chỉnh - Từ Demo đến nguyên mẫu cấp sản phẩm'
+description: 'Vượt qua giai đoạn Demo, học cách hoàn thiện chuỗi sản phẩm, xây dựng dữ liệu mô phỏng chân thực, lặp lại nhanh chóng thông qua phản hồi, cuối cùng hoàn thành một nguyên mẫu AI hoàn chỉnh có thể trình diễn và tương tác.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Khoảng <strong>3 ngày</strong>'
+const relatedArticles =
+  relatedArticlesMap['vi-vn/stage-1/complete-project-practice'] ?? []
+</script>
+
+# Cơ bản 5: Thực chiến dự án hoàn chỉnh
+
+## Hướng dẫn chương này
+
+<ChapterIntroduction :duration="duration" :tags="['Tư duy sản phẩm', 'Dữ liệu mô phỏng', 'Hoàn thiện tương tác', 'LocalStorage']" coreOutput="1 nguyên mẫu AI sản phẩm đầy đủ chức năng" expectedOutput="Ứng dụng Web với chuỗi hoàn chỉnh và dữ liệu chân thực">
+
+Chương trước đã tích hợp khả năng AI, Demo đã chạy được, nhưng so với "sản phẩm" thực sự còn <strong>xa lắm</strong>: trang vừa refresh là <strong>dữ liệu mất sạch</strong>, báo lỗi là <strong>trang trắng</strong>, danh sách chỉ có "dữ liệu thử 1, dữ liệu thử 2", người dùng bấm nhầm cũng <strong>không thể hoàn tác</strong>...
+
+Chương này sẽ <strong>lấp đầy tất cả những khoảng trống này</strong>: chúng ta sẽ <strong>hoàn thiện chuỗi sản phẩm đầy đủ</strong>, dùng AI tạo <strong>dữ liệu nghiệp vụ chân thực</strong> thay thế dữ liệu giả, thêm <strong>xử lý lỗi và phản hồi người dùng</strong>, cuối cùng hoàn thiện một nguyên mẫu <strong>đẹp mắt, có thể trình diễn cho người khác</strong>.
+
+Đây là <strong>chương cuối cùng</strong> của giai đoạn cơ bản, hoàn thành bước này, bạn đã hoàn thành sự chuyển đổi từ "hoàn toàn không biết lập trình" đến "<strong>có thể tự làm nguyên mẫu AI sản phẩm</strong>".
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Hoàn thiện chuỗi', description: 'Từ tính năng đơn lẻ đến vòng lặp hoàn chỉnh' },
+      { title: 'Tiêm linh hồn', description: 'Mô phỏng dữ liệu nghiệp vụ thực tế' },
+      { title: 'Lặp lại phản hồi', description: 'Sửa chữa trải nghiệm dựa trên phản hồi thực tế' },
+      { title: 'Bài tập lớn cuối kỳ', description: 'Thiết kế tốt nghiệp của bạn' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Từ chối "Happy Path": Hoàn thiện chuỗi cốt lõi
+
+Rất nhiều người mới làm nguyên mẫu, thường chỉ làm "Happy Path" (con đường lý tưởng nhất): người dùng click -> API phản hồi thành công -> hiển thị kết quả.
+Nhưng trong thế giới thực, mọi thứ thường không suôn sẻ như vậy. Để nguyên mẫu của bạn trông giống một sản phẩm thực sự, bạn cần cân nhắc các khâu "vô hình" sau đây.
+
+### 1.1 Thêm "chờ đợi" và "phản hồi"
+
+Khi người dùng click "tạo văn bản", AI thường mất vài giây để phản hồi. Nếu giao diện không có phản ứng gì, người dùng sẽ tưởng chương trình bị lỗi.
+**Bạn cần để AI IDE thêm trạng thái Loading:**
+
+> Ví dụ prompt:
+> "Khi tôi click nút tạo, hãy đổi nút thành 'Đang tạo...' và không cho click, đồng thời hiển thị hoạt ảnh tải ở khu vực bên phải. Cho đến khi API trả về kết quả, mới khôi phục bình thường."
+
+### 1.2 Xử lý "thất bại" và "ngoại lệ"
+
+API Key có thể hết hạn, mạng có thể bị ngắt.
+**Bạn cần để AI IDE xử lý lỗi:**
+
+> Ví dụ prompt:
+> "Nếu API request thất bại, đừng báo lỗi trong console, hãy hiện một hộp thoại màu đỏ (Toast) ở đầu trang, báo người dùng 'Tạo thất bại, vui lòng thử lại sau', và cho phép người dùng click lại nút tạo."
+
+### 1.3 Lưu trữ lịch sử hội thoại
+
+Trong quá trình tương tác với AI, chúng ta cần lưu nội dung hội thoại, để người dùng có thể xem lại lịch sử, tiếp tục trao đổi trước đó. Hiện tại chưa cần cơ sở dữ liệu, có thể chọn các giải pháp nhẹ sau:
+
+**Lựa chọn phương án lưu trữ:**
+
+| Phương án | Kịch bản sử dụng | Đặc điểm |
+| ---------------- | -------------------------------- | ------------------------------------ |
+| **LocalStorage** | Dự án thuần frontend, dữ liệu người dùng lưu trên trình duyệt | Dễ triển khai, refresh không mất, không đồng bộ được giữa các thiết bị |
+| **File JSON** | Nguyên mẫu cục bộ, dữ liệu lưu dạng file | Cấu trúc rõ ràng, dễ debug, có thể chỉnh sửa thủ công |
+| **File TXT** | Phương án đơn giản nhất, ghi nhanh nội dung văn bản | Định dạng tự do, khả năng tương thích tốt |
+
+**Ví dụ nội dung hội thoại:**
+Lịch sử hội thoại đã lưu thường bao gồm:
+
+```json
+[
+  {
+    "role": "user",
+    "content": "Giúp tôi tạo văn bản livestream bán tai nghe bluetooth",
+    "timestamp": "2026-01-20 10:30:00"
+  },
+  {
+    "role": "assistant",
+    "content": "[Văn bản gợi ý tai nghe bluetooth]\n\n🎧 Tạm biệt độ trễ, trải nghiệm nghe nhạc chìm đắm\n\nChị em ơi! Chiếc tai nghe bluetooth này thực sự quá tuyệt 👇\n\n✅ Chống ồn chủ động 40dB, ngay lập tức bước vào thế giới âm nhạc\n✅ Thời lượng pin siêu dài 30 giờ, cả tuần đi làm không cần sạc\n✅ Gọi điện rõ như đối thoại, tàu điện ngầm ồn ào cũng trò chuyện được\n✅ Thiết kế nửa lọt tai, đeo lâu không đau không bí\n\n💰 Ưu đãi có hạn, click vào link bên dưới để mua ngay!",
+    "timestamp": "2026-01-20 10:30:05"
+  }
+]
+```
+
+**Prompt triển khai:**
+
+> "Hãy giúp tôi triển khai tính năng lưu lịch sử hội thoại. Hỗ trợ lưu bản ghi hội thoại giữa người dùng và AI dưới dạng file JSON (hoặc sử dụng LocalStorage). Tự động tải lịch sử hội thoại mỗi khi vào trang, hỗ trợ xem và xóa từng bản ghi hội thoại."
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Hoàn thiện chuỗi', description: 'Từ tính năng đơn lẻ đến vòng lặp hoàn chỉnh' },
+      { title: 'Tiêm linh hồn', description: 'Mô phỏng dữ liệu nghiệp vụ thực tế' },
+      { title: 'Lặp lại phản hồi', description: 'Sửa chữa trải nghiệm dựa trên phản hồi thực tế' },
+      { title: 'Bài tập lớn cuối kỳ', description: 'Thiết kế tốt nghiệp của bạn' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. Tiêm linh hồn: Mô phỏng dữ liệu thực tế (Mock Data)
+
+Một trang trống rỗng không thể thuyết phục ai. Tưởng tượng, bạn giới thiệu "bàn làm việc tư liệu thương mại điện tử" cho người khác, kết quả lịch sử trống không, hoặc chỉ có một dòng "test / test / test".
+Để hiệu quả trình diễn tốt nhất, chúng ta cần "giả" một số dữ liệu chân thực, để nguyên mẫu trông giống một sản phẩm thực tế đã vận hành nửa năm.
+
+### 2.1 Để AI giúp bạn thiết kế cấu trúc dữ liệu
+
+Chúng ta không cần tự nghĩ xem mỗi trường nên đặt tên gì (ví dụ nên gọi `name` hay `title`), việc này hoàn toàn có thể giao cho AI.
+
+Bạn chỉ cần cho AI biết **kịch bản nghiệp vụ** của bạn:
+
+> **Ví dụ prompt:**
+> "Tôi đang làm nguyên mẫu **bàn làm việc tư liệu thương mại điện tử TikTok**.
+> Hãy giúp tôi thiết kế một cấu trúc dữ liệu JSON, để mô tả một 'nhiệm vụ sản phẩm'.
+> Nhiệm vụ này nên bao gồm: thông tin cơ bản sản phẩm (tên, danh mục), tư liệu đầu vào (link hình ảnh), và kết quả AI tạo ra (tiêu đề, văn bản, ảnh poster).
+> Hãy cho tôi trực tiếp một ví dụ JSON."
+
+AI sẽ dựa trên mô tả của bạn, tự động giúp bạn nghĩ ra các trường như `productName`, `generatedContent`.
+
+### 2.2 Để AI sản xuất loạt dữ liệu "chân thực"
+
+Có cấu trúc dữ liệu rồi, bước tiếp theo là để AI giúp bạn "điền vào", tạo ra một loạt dữ liệu trông thật.
+
+**Kỹ thuật prompt:**
+Bạn không thể chỉ nói AI "giúp tôi tạo dữ liệu", bạn cần như giao việc cho thực tập sinh, cho nó biết **bối cảnh nghiệp vụ** và **yêu cầu nội dung**:
+
+- **Bối cảnh nghiệp vụ**: Cho AI biết chúng ta làm "thương mại điện tử TikTok", nên tiêu đề sản phẩm phải thu hút (như "bí quyết thon dáng", "sinh viên phải có"), văn bản phải khẩu ngữ hóa.
+- **Yêu cầu hình ảnh**: Để nguyên mẫu đẹp, hình ảnh không phải placeholder đen trắng, tốt nhất là ảnh phong cảnh hoặc vật thật nhiều màu ngẫu nhiên.
+
+> **Ví dụ prompt:**
+> "Dựa trên cấu trúc vừa thiết kế, giúp tôi tạo 10 bản ghi dữ liệu mô phỏng chân thực.
+> (Ghi chú: không nhất thiết phải là JSON. Nếu bạn đang làm frontend, có thể yêu cầu tạo mảng JavaScript; nếu dùng Python, có thể tạo List.)
+>
+> **Yêu cầu kịch bản nghiệp vụ**:
+>
+> 1. Giả sử đây là một cửa hàng bách hóa tổng hợp, sản phẩm bao gồm 3 danh mục: 'thời trang nữ', 'kỹ thuật số', 'mỹ phẩm'.
+> 2. **Tiêu đề và văn bản tạo ra phải mang phong cách TikTok**: ví dụ tiêu đề phải chứa Emoji (🔥, ✨), văn bản phải dùng giọng điệu 'cực phẩm', 'trải nghiệm thực'.
+> 3. **Trường hình ảnh**: Sử dụng thống nhất định dạng `https://picsum.photos/seed/{random_id}/300/400`, đảm bảo mỗi ảnh đều khác nhau."
+
+**Ví dụ Mock Data đã tạo:**
+
+```javascript
+export const mockProductTasks = [
+  {
+    id: 'task_001',
+    name: 'Đầm vintage hoa Pháp mùa hè',
+    status: 'completed',
+    input: {
+      category: 'Thời trang nữ',
+      features: ['Eo thon', 'Giảm cân', 'Phong cách'],
+      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
+    },
+    output: {
+      generatedTitle: '✨Ai mặc cũng đẹp! Chiếc đầm hoa Pháp này thực sự cực phẩm🔥',
+      generatedCopy:
+        'Chị em ơi! Chiếc váy này thực sự quá thon dáng! Thiết kế vòng eo cực phẩm, mặc vào ngay lập tức có eo. Vải rất thoáng khí, mùa hè mặc hoàn toàn không bí. Lựa chọn hàng đầu cho hẹn hò và dạo phố!👗',
+      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
+    },
+    createdAt: '2026-01-20T10:00:00Z'
+  },
+  {
+    id: 'task_002',
+    name: 'Tai nghe chống ồn siêu mạnh Pro',
+    status: 'completed',
+    input: {
+      category: 'Kỹ thuật số',
+      features: ['Chống ồn', 'Pin siêu dài', 'Độ trễ thấp'],
+      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
+    },
+    output: {
+      generatedTitle: '🎧 Cuối cùng cũng tìm được! Chiếc tai nghe chống ồn này quá mạnh!🔇',
+      generatedCopy:
+        'Đeo vào, thế giới ngay lập tức yên tĩnh. Chất âm tuyệt vời, nghe nhạc như đang ở hiện trường. Pin cũng rất bền, sạc một lần dùng cả tuần! Sinh viên phải có!',
+      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
+    },
+    createdAt: '2026-01-21T14:30:00Z'
+  }
+  // ... thêm dữ liệu
+]
+```
+
+### 2.3 (Nâng cao) Sử dụng LocalStorage để "giả" thêm/xóa/sửa
+
+Nếu bạn muốn "dữ liệu mô phỏng" vừa tạo không chỉ xem được mà còn xóa được, sửa được, thậm chí nhiệm vụ mới tạo sau khi refresh trang vẫn còn, bạn có thể kết hợp `LocalStorage`.
+
+> **Ví dụ prompt:**
+> "Hãy giúp tôi triển khai tính năng lưu trữ dữ liệu.
+>
+> 1. Ưu tiên đọc dữ liệu từ `localStorage`.
+> 2. Nếu `localStorage` trống, sử dụng Mock data vừa tạo để khởi tạo, và lưu chúng vào `localStorage`.
+> 3. Đồng thời giúp tôi viết các hàm `addProductTask` và `deleteProductTask`, mỗi thao tác đều cập nhật `localStorage` đồng bộ."
+
+Qua bước này, nguyên mẫu của bạn đã có "bộ nhớ", trải nghiệm người dùng gần như không khác gì sản phẩm thực.
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Hoàn thiện chuỗi', description: 'Từ tính năng đơn lẻ đến vòng lặp hoàn chỉnh' },
+      { title: 'Tiêm linh hồn', description: 'Mô phỏng dữ liệu nghiệp vụ thực tế' },
+      { title: 'Lặp lại phản hồi', description: 'Sửa chữa trải nghiệm dựa trên phản hồi thực tế' },
+      { title: 'Bài tập lớn cuối kỳ', description: 'Thiết kế tốt nghiệp của bạn' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. Thu thập phản hồi và lặp lại nhanh chóng
+
+Làm sản phẩm trong phòng kín thì không thể tốt. Bây giờ nguyên mẫu đã có "chức năng cốt lõi" + "chuỗi hoàn chỉnh" + "dữ liệu trình diễn", đã đến lúc cho người khác xem.
+
+### 3.1 Tìm ai test? Test như thế nào?
+
+- **Tìm bạn bè/đồng nghiệp**: Không cần họ hiểu kỹ thuật, chỉ cần để họ thử dùng.
+- **Quan sát thay vì hướng dẫn**: Đừng nói "click vào đây", mà xem họ sẽ click vào đâu. Nếu họ không tìm thấy nút, nghĩa là thiết kế có vấn đề.
+- **Phương pháp "Wizard of Oz"**: Nếu AI của bạn chưa kết nối xong, bạn có thể thủ công sửa dữ liệu ở backend (hoặc database) để mô phỏng phản hồi của AI, xác minh trước người dùng có cần tính năng này không.
+
+### 3.2 Đối mặt với Bug và phàn nàn
+
+- **Style bị lỗi**: Có thể bị lỗi ở các kích thước màn hình khác nhau.
+  - **Hành động**: Chụp màn hình gửi cho AI IDE -> "Bị lỗi ở độ rộng màn hình này, giúp tôi sửa."
+- **Thao tác gượng gạo**: "Quy trình này quá phiền phức".
+  - **Hành động**: Cho AI IDE biết đề xuất -> "Người dùng thấy upload rồi mới tạo quá chậm, có thể đổi thành tạo một lần không?"
+- **Yêu cầu mới**: "Nếu có tính năng này thì tốt quá."
+  - **Hành động**: Đánh giá xem có phải cốt lõi không, nếu có, để AI nhanh chóng triển khai phiên bản đơn giản.
+
+**Nhớ: Trong giai đoạn này, AI là trợ lý sửa chữa tốt nhất của bạn. Bạn chỉ cần chịu trách nhiệm phát hiện vấn đề, sửa code giao cho nó.**
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Hoàn thiện chuỗi', description: 'Từ tính năng đơn lẻ đến vòng lặp hoàn chỉnh' },
+      { title: 'Tiêm linh hồn', description: 'Mô phỏng dữ liệu nghiệp vụ thực tế' },
+      { title: 'Lặp lại phản hồi', description: 'Sửa chữa trải nghiệm dựa trên phản hồi thực tế' },
+      { title: 'Bài tập lớn cuối kỳ', description: 'Thiết kế tốt nghiệp của bạn' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. 🎓 Bài tập lớn: Hoàn thành "thiết kế tốt nghiệp" của bạn
+
+Chúc mừng bạn! Bạn đã hoàn thành toàn bộ quá trình từ "nhu cầu" đến "nguyên mẫu" rồi đến "tích hợp AI". Bây giờ, đã đến lúc trình bày kết quả cuối cùng.
+
+**Bài tập lớn này không giới hạn ở "bàn làm việc tư liệu thương mại điện tử"**. Bạn cần kết hợp sở thích hoặc bối cảnh ngành nghề của mình, tạo ra một nguyên mẫu AI sản phẩm độc nhất vô nhị.
+
+### Lựa chọn đề tài và yêu cầu
+
+Bạn cần chọn một kịch bản phù hợp nhất từ **[Tham khảo hướng kịch bản đa ngành](../appendix-industry-scenarios/index.md)**, hoặc tự lên ý tưởng một kịch hoàn toàn mới.
+
+**Dự án phải sử dụng tổng hợp tất cả nội dung đã học ở các bài trước:**
+
+1.  **Xây dựng nguyên mẫu**: Sử dụng công nghệ frontend để xây dựng giao diện đẹp, dễ sử dụng.
+2.  **Kiểm soát nhu cầu**: Không cầu toàn diện, nhưng logic chức năng cốt lõi phải khép kín.
+3.  **Tích hợp API**: Kết nối mô hình AI thực tế (LLM/VLM, v.v.), trao cho ứng dụng trí thông minh thực sự.
+4.  **Triển khai ứng dụng có thể chơi**: Không chỉ là trang tĩnh, mà là ứng dụng động có luồng dữ liệu và phản hồi tương tác.
+
+### Sản phẩm nộp bài
+
+Cuối cùng bạn cần nộp hai nội dung sau:
+
+1.  **Một ứng dụng nguyên mẫu hoàn chỉnh**: Triển khai lên mạng hoặc chạy được cục bộ, có chuỗi sử dụng hoàn chỉnh.
+2.  **Video trình diễn 30 giây**: Quay một video, giới thiệu ngắn gọn kịch bản ứng dụng của bạn, và trình diễn thao tác thực tế của các chức năng cốt lõi.
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 Danh sách kiểm tra thử thách cuối cùng</div>
+  </template>
+
+  <p>
+    Đây là trận chiến cuối cùng của Stage 1. Hãy kiểm tra tác phẩm của bạn theo danh sách dưới đây:
+  </p>
+
+  <div style="font-weight: bold; margin-bottom: 10px;">Tự kiểm tra chức năng cốt lõi</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Kịch bản rõ ràng</strong>: Đã chọn một ngành hoặc kịch bản ứng dụng cụ thể</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Logic khép kín</strong>: Quy trình cốt lõi chạy thông suốt, không chỉ Happy Path</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Lái bởi AI</strong>: Đã gọi API mô hình lớn thực sự, không phải phản hồi định sẵn</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Trải nghiệm hoàn chỉnh</strong>: Bao gồm Loading, xử lý lỗi và dữ liệu mô phỏng</label></li>
+  </ul>
+
+  <div style="font-weight: bold; margin: 20px 0 10px;">Chuẩn bị sản phẩm bàn giao</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>Ứng dụng nguyên mẫu</strong>: Code đã hoàn thành và có thể chạy</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>Video trình diễn</strong>: Khoảng 30 giây, thể hiện rõ điểm nổi bật cốt lõi</label></li>
+  </ul>
+</el-card>
+
+## Bước tiếp theo
+
+Sau khi hoàn thành bài tập lớn, bạn đã có khả năng "độc lập phát triển nguyên mẫu ứng dụng AI".
+Trong Stage 2 tiếp theo, chúng ta sẽ đi sâu vào phát triển fullstack phức tạp hơn, học cách biến nguyên mẫu này thành một ứng dụng thương mại thực sự có thể lên mạng, có database, có hệ thống người dùng.
+
+Hẹn gặp lại ở giai đoạn tiếp theo!
+
+<RelatedArticlesSection
+  title="Tiếp tục nâng cao"
+  description="Chúc mừng hoàn thành Stage 1, các chương dưới đây có thể giúp bạn bước vào phát triển kỹ thuật."
+  :items="relatedArticles"
+/>
diff --git a/docs/vi-vn/stage-1/finding-great-idea/index.md b/docs/vi-vn/stage-1/finding-great-idea/index.md
new file mode 100644
index 0000000..7611b13
--- /dev/null
+++ b/docs/vi-vn/stage-1/finding-great-idea/index.md
@@ -0,0 +1,206 @@
+---
+title: 'Tim y tuong tot - tu nhu cau nguoi dung den san pham co nguoi tra tien'
+description: 'Hoc cach phat hien co hoi tu nhung noi dau hang ngay, phan tich nhu cau co he thong, va mai dua mot y tuong binh thuong thanh khai niem san pham ma nguoi dung san sang tra tien.'
+---
+
+<script setup>
+const duration = 'Khoang <strong>3 gio</strong>'
+</script>
+
+# So cap 2: Tim y tuong tot
+
+## Dan nhap chuong
+
+<ChapterIntroduction :duration="duration" :tags="['Khai pha nhu cau', 'Tu duy san pham', 'Phan tich nguoi dung', 'Mo hinh kinh doanh']" coreOutput="3 khai niem san pham da duoc kiem chung" expectedOutput="Huong san pham/co hoi khoi nghiep co the trien khai">
+
+O chuong truoc, ban da thay AI IDE co the giup ta tao ra san pham rat nhanh. Nhung truoc khi viet dong code dau tien, co mot cau hoi can ban hon:
+
+<strong>Minh se lam cai gi?</strong>
+
+Rat nhieu nguoi bat dau bang "lam mot cong cu AI" hoac "lam mot mang xa hoi", nhung lam xong thi khong ai dung. Van de thuong nam o dau? <strong>Chua tim duoc nhu cau that.</strong>
+
+Thuc te con kho hon: <strong>co san pham giai quyet dung van de nhung nguoi dung van khong muon tra tien</strong>.
+
+Trong chuong nay, thong qua cau chuyen cua Minh, ban se hoc mot phuong phap hoan chinh de tim y tuong: tu tieu chuan danh gia, khai pha noi dau, phan nhom nguoi dung, dao sau boi canh, kiem chung nhu cau, va mai dua khai niem san pham.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Step 1', description: 'Xay tieu chuan danh gia' },
+      { title: 'Step 2', description: 'Khai pha noi dau hang ngay' },
+      { title: 'Step 3', description: 'Phan nhom nguoi dung theo chieu ngang' },
+      { title: 'Step 4', description: 'Dao sau boi canh theo chieu doc' },
+      { title: 'Step 5', description: 'Kiem chung nhu cau that/gia' },
+      { title: 'Step 6', description: 'Mai dua khai niem san pham' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Step 1: Xay tieu chuan danh gia - nhu cau nao khien nguoi dung san sang tra tien
+
+::: warning Vi sao chuong nay quan trong?
+
+Co the ban se nghi: "Day la khoa hoc Vibe Coding, sao lai hoc tim nhu cau truoc? Khong viet code luon duoc a?"
+
+Rat nhieu khoa hoc lap trinh bat dau bang du an: Todo List, may tinh, blog ca nhan... Nhung neu huong di sai, ban cang lam nhieu cang xa muc tieu.
+
+Hay tuong tuong:
+
+- Ban bo 2 tuan lam "he thong quan ly lich", trong khi thi truong da co hang tram san pham tot hon.
+- Ban lam app "chup anh tinh calo", nhung nguoi dung dung 1 lan roi go.
+- Ban lam "so chi tieu ca nhan", nhung chinh ban cung it dung.
+
+Lam xong, ban co cam thay tu tin de coi do la "mot san pham dang gia" khong? Thuong la khong, vi no khong giai quyet van de that, khong tao gia tri that.
+
+Vibe Coding lam cho viec bien y tuong thanh san pham nhanh hon. Chinh vi nhanh, ta can biet <strong>chuyen gi dang lam</strong>.
+
+:::
+
+### Tieu chuan danh gia y tuong (ban nen ghi ra)
+
+Mot y tuong "dang lam" thuong can dat toi thieu 4 tieu chuan:
+
+1. **Co nguoi gap van de thuong xuyen**: khong phai mot tinh huong hiem.
+2. **Van de co gia tri**: tiet kiem thoi gian, tien bac, rui ro, hoac giam dau dau.
+3. **Nguoi dung co dong luc hanh dong**: ho san sang thay doi hanh vi de giai quyet.
+4. **Ban co cach tiep can**: ban biet tim nguoi dung o dau va co the lay phan hoi.
+
+Neu y tuong chi "nghe hay" nhung khong ro ai can, can nhu the nao, va vi sao ho tra tien, thi rat de lam xong roi... khong ai dung.
+
+## Mo dau: cau chuyen cua Minh
+
+Minh la mot lap trinh vien da di lam 3 nam. Mot ngay, Minh nghi: "Hay lam mot app the hinh giup nguoi dung len ke hoach tap va ghi lai du lieu tap luyen." Minh rat hao hung vi cam thay minh tim duoc mot du an lon.
+
+Mot nam tiep theo, Minh danh het thoi gian ranh de lam app: khoa hoc, check-in, cong dong, phan tich du lieu... giao dien cung dep (theo Minh thay).
+
+Ngay ra mat, Minh chi tien quang ba. Thang dau co 50.000 luot tai. Nghe co ve tot.
+
+Nhung van de den nhanh:
+
+- Nguoi dung tai ve dung 1 lan roi go.
+- Ty le quay lai sau 7 ngay rat thap.
+- Tinh nang tra phi gan nhu khong ai mua.
+- Thi truong da co san pham truong thanh voi noi dung va he sinh thai manh.
+
+Minh lo nang va tu hoi: "Minh lam cung on ma, sao khong ai dung?"
+
+Van de khong phai Minh thieu ky thuat. Van de nam o **diem xuat phat**: Minh chua lam ro cau hoi can ban nhat: <strong>nguoi dung co that su can them mot app nay khong, va vi sao ho se tra tien?</strong>
+
+Tu do, ta rut ra bai hoc: <strong>huong di sai thi cang di sau cang sai</strong>.
+
+::: tip Chuong nay ban se lam gi?
+
+Ban se di qua 3 man:
+
+1. Tim nhu cau that: nhu cau nao co gia tri va co the tra tien.
+2. Dao ra y tuong tot: tu noi dau hang ngay tao thanh co hoi san pham.
+3. Mai dua bang AI: dung AI de bien y tuong thanh phuong an co the trien khai va kiem chung.
+
+:::
+
+## Step 2: Khai pha noi dau hang ngay
+
+Nguon y tuong on dinh nhat thuong den tu "noi dau hang ngay". Cach lam don gian:
+
+1. Viet ra 20 viec/boi canh ban (hoac nguoi xung quanh) lap lai hang tuan.
+2. Danh dau nhung cho "mat thoi gian", "de sai", "de quen", "de tre han", "de bi phat".
+3. Moi muc, ghi them: ai dang bi dau dau? khi nao? tai sao? hau qua la gi?
+
+Vi du noi dau:
+
+- Lam bao cao hang tuan mat nhieu thoi gian.
+- Chat voi khach hang qua nhieu kenh, bi sot tin.
+- Sap xep tai lieu/anh/video rui tung, moi lan tim rat lau.
+- Duyet hop dong dai, de bo sot rui ro.
+
+Quan trong: dung dung o "van de" chung chung. Hay dich no thanh hanh vi va boi canh cu the.
+
+## Step 3: Phan nhom nguoi dung theo chieu ngang
+
+Mot y tuong co the dung voi nhieu nhom nguoi, nhung moi nhom co "gia tri" va "kha nang tra tien" khac nhau.
+
+Hay phan nhom theo:
+
+- Nghe nghiep/vi tri: van hanh, ke toan, HR, sales, giao vien, sinh vien...
+- Quy mo: ca nhan, nhom nho, doanh nghiep.
+- Tan suat: dung hang ngay hay thinh thoang?
+- Chi phi cua van de: mat 10 phut hay mat 5 gio?
+
+Muc tieu cua buoc nay: chon ra 1-2 nhom ma ban co the tiep can de phong van va kiem chung.
+
+## Step 4: Dao sau boi canh theo chieu doc
+
+De mo ta ro nhu cau, ban can biet:
+
+1. Nguoi dung bat dau tu dau? (dau vao)
+2. Ho thuong lam gi tiep theo? (cac buoc)
+3. Cho nao hay bi ket? (nut that)
+4. Sai sot thuong xay ra o dau? (rui ro)
+5. Sau khi xong, ho can dau ra gi? (ket qua)
+
+De lam nhanh, hay ve 1 "luong cong viec" gom 5-7 buoc. AI rat hop de giup ban sap xep va lam ro luong nay.
+
+## Step 5: Kiem chung nhu cau that/gia
+
+Nhieu y tuong nghe co ve hop ly nhung thuc ra la "nhu cau gia". Cach kiem chung:
+
+- **Hoi ve hanh vi qua khu** thay vi y kien chung chung.
+- **Hoi chi tiet chi phi**: mat bao lau, mat bao nhieu tien, bi anh huong ra sao.
+- **Hoi giai phap hien tai**: ho dang dung gi de giai quyet? co phai ho da tu lam cach khac?
+- **Hoi nguong tra tien**: trong tinh huong nao ho san sang tra?
+
+Goi y cau hoi phong van:
+
+1. Lan gan nhat ban gap van de nay la khi nao? Ban dang lam gi?
+2. Ban da thu giai phap nao? Vi sao khong on?
+3. Neu giai quyet duoc, ban duoc loi gi? (thoi gian, tien, rui ro, tinh than)
+4. Neu co cong cu giai quyet, ban muon no lam gi truoc? Cai gi la "bat buoc"?
+
+## Step 6: Mai dua khai niem san pham
+
+Den day, ban co 3 thanh phan:
+
+1. Mot nhom nguoi dung ro rang.
+2. Mot boi canh ro rang.
+3. Mot noi dau ro rang va co chi phi.
+
+Gio hay viet 1 cau "dinh nghia san pham" theo mau:
+
+> Doi voi [nhom nguoi dung], trong boi canh [tinh huong cu the], san pham nay giup ho [muc tieu] bang cach [cach lam], de giam [chi phi] va dat duoc [ket qua].
+
+Vi du:
+
+> Doi voi nhan vien van hanh TMĐT, khi can tao nhanh noi dung cho nhieu san pham, cong cu nay giup tao ban nhap anh va copy theo mau, de giam thoi gian lam thu cong va tang toc do len hang.
+
+### Dung AI de mai dua (prompt mau)
+
+Ban co the dua y tuong cho AI de:
+
+- viet lai mo ta cho ro rang hon,
+- de xuat 3 phien ban "dinh vi san pham" khac nhau,
+- de xuat 10 cau hoi phong van,
+- de xuat 3 gia thuyet nguoi dung va cach test.
+
+Prompt goi y:
+
+```txt
+Toi co y tuong san pham sau:
+[dan noi dung o day]
+
+Hay giup toi:
+1. Viet lai thanh 1 cau mo ta ro rang (1-2 cau).
+2. Liet ke 5 tinh huong nguoi dung that su gap van de.
+3. Viet 10 cau hoi phong van de kiem chung.
+4. De xuat 3 phien ban dinh vi san pham khac nhau.
+```
+
+## Bai tap
+
+1. Viet ra 10 noi dau hang ngay ban gap (hoac nguoi than ban be gap).
+2. Chon 2 noi dau co chi phi ro rang va co nguoi co the phong van ngay.
+3. Viet 1 cau "dinh nghia san pham" theo mau o tren.
+4. Viet 10 cau hoi phong van va phong van it nhat 1 nguoi that.
+
+Khi ban co 3 phan: nguoi dung + boi canh + noi dau, viec dung AI IDE de tao prototype se de hon rat nhieu.
diff --git a/docs/vi-vn/stage-1/integrating-ai-capabilities/index.md b/docs/vi-vn/stage-1/integrating-ai-capabilities/index.md
new file mode 100644
index 0000000..96e0770
--- /dev/null
+++ b/docs/vi-vn/stage-1/integrating-ai-capabilities/index.md
@@ -0,0 +1,808 @@
+---
+title: 'Thêm năng lực AI cho nguyên mẫu - Kết nối API văn bản và hình ảnh'
+description: 'Kết nối năng lực AI thật vào nguyên mẫu Web hiện có: hiểu khái niệm cốt lõi của API, học cách tìm API Key và ví dụ chính thức; thực hành tích hợp mô hình văn bản DeepSeek cùng nhiều dịch vụ tạo ảnh như SiliconFlow Qwen-Image, Recraft, Seedream, đồng thời nắm được phương pháp chọn mô hình thường dùng.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'khoảng <strong>1 ngày</strong>'
+const relatedArticles =
+  relatedArticlesMap['vi-vn/stage-1/integrating-ai-capabilities'] ?? []
+</script>
+
+# Sơ cấp 4: Đưa năng lực AI vào nguyên mẫu
+
+## Dẫn nhập chương
+
+<ChapterIntroduction :duration="duration" :tags="['API', 'Mô hình văn bản', 'Tạo ảnh từ văn bản', 'Tích hợp nguyên mẫu']" coreOutput="Nguyên mẫu kết nối 1 mô hình văn bản + 1 mô hình hình ảnh tùy chọn" expectedOutput="Nguyên mẫu AI có thể gọi API thật">
+
+Trong các chương trước, chúng ta đã hoàn thành toàn bộ quy trình từ <strong>tìm ý tưởng tốt</strong> đến <strong>làm ra nguyên mẫu sản phẩm</strong>. Nhưng nguyên mẫu hiện tại vẫn chỉ là một "lớp vỏ": bấm nút không thật sự tạo nội dung, dữ liệu trên trang đều được viết cố định.
+
+Còn nhớ điều chúng ta nhấn mạnh ở chương đầu không? <strong>Chúng ta muốn làm "sản phẩm có người sẵn sàng trả tiền", chứ không phải "nguyên mẫu nhìn có vẻ ổn".</strong> Giá trị thật đến từ việc sản phẩm có thể <strong>giải quyết vấn đề thật</strong>, và để làm được điều đó, nguyên mẫu phải <strong>thật sự chạy được</strong>.
+
+Chương này sẽ khiến nguyên mẫu <strong>"sống" dậy</strong>: chúng ta sẽ kết nối <strong>năng lực AI thật</strong>, bắt đầu từ việc lấy API Key, đọc hiểu tài liệu chính thức, rồi để AI IDE giúp bạn tích hợp giao diện vào code. Bạn sẽ dùng <strong>mô hình văn bản DeepSeek</strong> làm ví dụ để học cách khiến ứng dụng <strong>thật sự gọi mô hình lớn để tạo nội dung</strong>; nếu hứng thú, bạn cũng có thể <strong>làm thêm phần kết nối tạo hình ảnh</strong>.
+
+Học xong chương này, nguyên mẫu của bạn sẽ <strong>không còn là bản demo tĩnh</strong>, mà là <strong>một ứng dụng có thể gọi năng lực AI thật và giải quyết vấn đề thật</strong>.
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Nền tảng API', description: 'Hiểu khái niệm cốt lõi và quy tắc an toàn' },
+      { title: 'Kết nối văn bản', description: 'Thực hành tạo văn bản với DeepSeek' },
+      { title: 'Kết nối hình ảnh', description: 'Hiểu và tạo hình ảnh bằng VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 1. Khái niệm cơ bản về API
+
+Như đã nói ở trên, mục tiêu của chúng ta là "kết nối năng lực AI vào", để nguyên mẫu không còn là bản demo tĩnh mà trở thành công cụ có thể gọi dịch vụ AI thật. Chìa khóa để làm điều đó là hiểu và sử dụng API.
+
+API là một khái niệm trừu tượng quan trọng trong lĩnh vực máy tính. Có thể hiểu đơn giản là: **bạn "gửi một câu hỏi" theo định dạng đối phương yêu cầu, đối phương sẽ "trả một kết quả" theo định dạng tương ứng**.
+
+- **Nội dung bạn gửi đi**: thường gồm "khóa (API Key)" và "bạn muốn tạo gì"
+- **Nội dung đối phương trả về**: thành công thì trả kết quả; thất bại sẽ cho biết nguyên nhân, ví dụ "khóa sai", "không đủ số dư", "tham số viết sai"
+
+Cụ thể, bạn cần nắm các yếu tố cốt lõi sau:
+
+1. **API Key**: "thẻ thông hành" của bạn, cũng là "chìa khóa ví tiền". Nếu người khác có được nó, họ có thể gọi API thay bạn và phát sinh chi phí.
+2. **Endpoint (đường dẫn giao diện)**: đường dẫn cụ thể của yêu cầu API, cho máy chủ biết bạn muốn truy cập chức năng nào. Địa chỉ yêu cầu đầy đủ thường được tạo bởi "URL cơ sở + endpoint". Ví dụ:
+   - Tạo văn bản: URL cơ sở (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = URL đầy đủ `https://api.service.com/v1/chat/completions`
+   - Tạo hình ảnh: URL cơ sở (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = URL đầy đủ `https://api.service.com/v1/images/generations`
+3. **Gọi/yêu cầu**: quá trình gửi nhiệm vụ tới dịch vụ AI và nhận kết quả.
+4. **Nội dung yêu cầu**: nội dung cụ thể bạn gửi cho AI, ví dụ chủ đề bài viết bạn muốn AI viết hoặc mô tả hình ảnh muốn tạo.
+5. **Kết quả phản hồi**: nội dung AI trả về sau khi xử lý, ví dụ bài viết hoặc hình ảnh được tạo.
+6. **Xử lý lỗi**: khi có vấn đề như API Key sai hoặc yêu cầu quá thường xuyên, biết cách kiểm tra và giải quyết.
+
+::: info ℹ️ API là gì
+Để hiểu sâu hơn về API, hãy xem phụ lục: [Nhập môn API](/vi-vn/appendix/4-server-and-backend/api-intro).
+
+::: warning 🔐 **Lưu ý an toàn API**
+API Key là "thẻ thông hành" để bạn yêu cầu dịch vụ AI. Nó là một chuỗi mật khẩu dùng cho xác thực danh tính và tính phí.
+
+Vì API Key liên quan trực tiếp đến tài khoản và chi phí, hãy đặc biệt chú ý:
+
+- Tuyệt đối **không chia sẻ trong nhóm chat, không upload ảnh chụp lên mạng** hoặc đăng trên diễn đàn công khai
+- **Không hardcode vào code** rồi commit lên kho Git, đặc biệt là kho công khai
+- Nếu nghi ngờ Key đã bị lộ, **hãy đổi Key mới ngay lập tức**
+
+Trong phần bên dưới, chúng ta sẽ **trực tiếp dán API KEY vào AI IDE để thao tác**. **Trong dự án chính thức đừng làm như vậy!!** Ở đây chỉ làm vì là bài luyện tập. Khi thành thạo hơn, bạn có thể để AI tạo một file cấu hình và chỉ cần đặt API KEY vào file cấu hình đó.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Nền tảng API', description: 'Hiểu khái niệm cốt lõi và quy tắc an toàn' },
+      { title: 'Kết nối văn bản', description: 'Thực hành tạo văn bản với DeepSeek' },
+      { title: 'Kết nối hình ảnh', description: 'Hiểu và tạo hình ảnh bằng VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 2. Kết nối API tạo văn bản: DeepSeek
+
+Mặc dù API liên quan đến các khái niệm kỹ thuật này, ở giai đoạn phát triển nguyên mẫu, thao tác thực tế có thể rất đơn giản và hiệu quả. Ý tưởng cốt lõi là:
+
+> **Tìm ví dụ chính thức, lấy API Key, rồi để AI IDE giúp bạn kết nối nó vào nút bấm.**
+
+Sau khi nắm được các khái niệm này, bạn sẽ thấy dù kết nối mô hình văn bản hay mô hình hình ảnh, quy trình bản chất đều giống nhau: khi người dùng bấm nút, frontend sắp xếp input và gửi yêu cầu; sau khi API trả kết quả, kết quả được hiển thị lên trang. Tiếp theo, chúng ta sẽ kiểm chứng điều này bằng thao tác thực tế.
+
+Trong `1.2 Tự tay làm ra nguyên mẫu`, bạn đã tạo được một nguyên mẫu có thể tương tác. Tiếp theo, việc cần làm là biến những chức năng "trông giống AI" trong nguyên mẫu thành năng lực thật sự dùng được: **khi người dùng bấm nút, nguyên mẫu sẽ gửi yêu cầu tới dịch vụ AI bên ngoài và hiển thị văn bản trả về.**
+
+::: info ℹ️ Mở rộng nguyên lý
+Nếu muốn hiểu thêm nội dung liên quan đến nguyên lý, hãy xem phụ lục: [Nhập môn mô hình ngôn ngữ lớn (LLM)](/vi-vn/appendix/8-artificial-intelligence/llm-principles).
+::: details Tìm hiểu thêm: DeepSeek là gì?
+
+**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, hoạt động dưới thương hiệu DeepSeek, là một **công ty trí tuệ nhân tạo Trung Quốc phát triển mô hình ngôn ngữ lớn (LLMs)**. DeepSeek đặt trụ sở tại Hàng Châu, Chiết Giang, thuộc sở hữu và được tài trợ bởi quỹ định lượng Trung Quốc High-Flyer. DeepSeek được thành lập vào tháng 7 năm 2023 bởi Liang Wenfeng, đồng sáng lập High-Flyer, người đồng thời là CEO của cả hai công ty. Tháng 1 năm 2025, công ty ra mắt chatbot cùng tên và mô hình DeepSeek-R1.
+
+Hãy xem DeepSeek so sánh với các mô hình hàng đầu khác trong bảng xếp hạng benchmark GPQA. Điều đáng chú ý là DeepSeek là mô hình open source, tức mọi người đều có thể tải mô hình từ internet, trong khi các mô hình phổ biến khác như Grok, Google Gemini và ChatGPT đều là mô hình đóng. Như có thể thấy, DeepSeek đã tiến rất gần tới nhóm mô hình hàng đầu.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
+
+GPQA là viết tắt của "Graduate-Level Google-Proof Q&A Benchmark", một benchmark cấp sau đại học cho nhiệm vụ hỏi đáp khoa học. Dưới đây là giới thiệu chi tiết.
+
+GPQA gồm 448 câu hỏi trắc nghiệm, bao phủ các phân ngành sinh học, vật lý và hóa học như cơ học lượng tử, hóa hữu cơ, sinh học phân tử, v.v. Các câu hỏi này do 61 chuyên gia có bằng tiến sĩ hoặc đang học tiến sĩ biên soạn và đã trải qua quy trình xác minh nghiêm ngặt.
+:::
+
+Làm theo 3 bước sau là có thể nhanh chóng tích hợp API tạo nội dung của mô hình lớn:
+
+1. **Tạo một API Key trên nền tảng DeepSeek**
+2. **Tìm ví dụ tạo văn bản trong tài liệu DeepSeek** (thường có code sẵn có thể copy trực tiếp)
+3. **Mở AI IDE, dán API Key + ví dụ chính thức vào**, rồi nói với AI cần thực hiện chức năng gì:
+   > Giúp tôi kết nối API của mô hình lớn này để hỗ trợ nhiệm vụ tạo copy trong ứng dụng này
+
+Tiếp theo chúng ta sẽ demo. Bạn có thể làm theo toàn bộ quy trình. Trước hết, đăng ký tài khoản [DeepSeek](https://platform.deepseek.com/usage), tạo một API Key và nạp một khoản nhỏ để kiểm thử.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
+
+Bấm "API KEYS" và tìm "create new API key" ở phía dưới màn hình. Cuối cùng bạn sẽ nhận được một API key có dạng như `sk-8573341c39fc44315aadc071c53rh7d2`.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
+
+Khi đã có khóa, bạn đã có quyền gọi mô hình.
+
+Lúc này, bạn có thể đọc trực tiếp tài liệu [API](https://api-docs.deepseek.com/). Tài liệu thường cung cấp ví dụ gọi bằng curl hoặc Python.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
+
+Sau khi tìm được ví dụ, bạn có thể copy toàn bộ nội dung trong tài liệu cùng với khóa vào hộp thoại của AI IDE, yêu cầu nó giúp bạn tích hợp mô hình ngôn ngữ lớn vào nguyên mẫu đã phát triển trước đó.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
+
+Bạn có thể tham khảo prompt sau:
+
+```
+Hãy tham khảo phương thức gọi này và giúp tôi hỗ trợ chức năng tạo copy. Có thể dựa trên thông tin sản phẩm, sau khi bấm sẽ tạo copy thương mại điện tử Douyin/TikTok tương ứng với nhiều phong cách.
+
+Tài liệu tham khảo:
+api key：sk-8573341c39aefa1efe
+Tham khảo yêu cầu API:
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+Sau một thời gian để AI tạo code, chúng ta thường dễ dàng có được nút tạo copy tương ứng để kiểm thử. Nếu không tìm thấy lối vào, bạn có thể yêu cầu AI IDE cho biết có thể bấm tới trang đó từ trang nào; nếu vẫn không tìm thấy, có thể yêu cầu AI IDE trực tiếp refactor và cải tiến theo ý tưởng của bạn để có kết quả tạo copy cuối cùng.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
+
+Tất nhiên, ở đây bạn có thể hỏi: làm sao biết nó thật sự gọi mô hình lớn chứ không chỉ tích hợp sẵn một phản hồi cố định? Bạn có thể nhập copy tùy chỉnh, để mô hình lớn tạo nội dung tương ứng theo phân tích tùy chỉnh bạn vừa chỉ định.
+
+Nếu thấy mỗi lần kết quả khác nhau và hợp logic, bạn có thể yên tâm rằng API đã được gọi bình thường để tạo nội dung. Bạn cũng có thể xem trên [nền tảng quản lý sử dụng API](https://platform.deepseek.com/usage) xem cuộc gọi có thành công không, dù có thể phải chờ vài phút mới thấy.
+
+## Thêm lựa chọn mô hình tạo văn bản
+
+Ngoài DeepSeek, bạn cũng có thể thử các mô hình ngôn ngữ lớn khác. Vì phần lớn mô hình đều cung cấp **giao diện tương thích OpenAI**, việc chuyển đổi rất đơn giản: chỉ cần thay API Key, URL cơ sở và tên mô hình.
+
+### Tích hợp MiniMax
+
+::: details Tìm hiểu thêm: MiniMax là gì?
+
+**MiniMax** là một công ty trí tuệ nhân tạo Trung Quốc, tập trung vào nghiên cứu và phát triển công nghệ trí tuệ nhân tạo tổng quát. MiniMax đã ra mắt dòng mô hình ngôn ngữ lớn tự phát triển MiniMax-M2.7, thể hiện tốt trên nhiều benchmark và có tỷ lệ hiệu năng/chi phí rất cao.
+
+**Đặc điểm chính của dòng MiniMax-M2.7:**
+
+- **Ngữ cảnh siêu dài**: hỗ trợ cửa sổ ngữ cảnh 204,800 tokens, phù hợp xử lý tài liệu dài và hội thoại nhiều lượt
+- **Hiệu năng/chi phí cao**: giá rất cạnh tranh
+- **Giao diện tương thích OpenAI**: có thể gọi trực tiếp bằng OpenAI SDK, không cần học thêm định dạng API mới
+- **Hai mô hình khả dụng**:
+  - `MiniMax-M2.7`: mô hình flagship, phù hợp nhiệm vụ phức tạp
+  - `MiniMax-M2.7-highspeed`: phiên bản tốc độ cao, giữ cùng hiệu năng nhưng nhanh hơn
+:::
+
+Cách kết nối giống DeepSeek, chỉ cần ba bước:
+
+1. Tới [nền tảng mở MiniMax](https://platform.minimax.io/) để đăng ký tài khoản và tạo API Key
+2. Tìm ví dụ gọi trong tài liệu MiniMax
+3. Dán API Key + ví dụ vào AI IDE
+
+Vì MiniMax cung cấp giao diện tương thích OpenAI, bạn có thể copy trực tiếp ví dụ curl dưới đây cùng API Key của mình và gửi cho AI IDE để tích hợp:
+
+```bash
+curl https://api.minimax.io/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${MINIMAX_API_KEY}" \
+  -d '{
+        "model": "MiniMax-M2.7",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+::: tip ✅ Gợi ý
+Định dạng API của MiniMax gần như giống hệt DeepSeek, đều là định dạng tương thích OpenAI. Vì vậy nếu bạn đã kết nối DeepSeek thành công, chuyển sang MiniMax chỉ cần sửa ba chỗ:
+1. **URL cơ sở**: đổi thành `https://api.minimax.io/v1`
+2. **API Key**: dùng API Key của MiniMax
+3. **Tên mô hình**: đổi thành `MiniMax-M2.7` hoặc `MiniMax-M2.7-highspeed`
+
+Thông tin thêm xem [tài liệu giao diện tương thích OpenAI của MiniMax](https://platform.minimax.io/docs/api-reference/text-openai-api).
+:::
+
+# 3. Tich hop API chuyen hinh anh thanh van ban: Qwen3 VL
+
+::: info ℹ️ Mo rong nguyen ly
+Neu ban muon tim hieu them ve nguyen ly lien quan, hay xem phu luc: [Nhap mon mo hinh thi giac-ngon ngu (VLM)](/vi-vn/appendix/8-artificial-intelligence/multimodal-models).
+
+::: details Tim hieu them: Qwen3 VL la gi?
+
+**Qwen3 VL** la phien ban moi nhat trong dong mo hinh da phuong thuc thi giac-ngon ngu do doi Tongyi Qianwen cua Alibaba Cloud ra mat. VL la viet tat cua "Vision-Language", tuc mo hinh thi giac-ngon ngu. No co the hieu noi dung hinh anh, tao mo ta bang van ban tu hinh anh, tra loi cau hoi ve hinh anh va trich xuat thong tin trong hinh anh.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
+
+**Cac nang luc chinh cua Qwen3 VL gom:**
+
+- **Hieu hinh anh**: nhan dien vat the, boi canh, con nguoi, chu viet va cac noi dung khac trong anh.
+- **Hoi dap thi giac**: tra loi chinh xac cac cau hoi cua nguoi dung ve hinh anh.
+- **Mo ta hinh anh**: tao mo ta bang van ban chi tiet hoac ngan gon.
+- **Hieu nhieu hinh anh**: ho tro xu ly dong thoi nhieu hinh anh de so sanh va phan tich.
+- **Trich xuat van ban**: trich xuat chu tu hinh anh, tuc nang luc OCR.
+
+**Vi sao chon Qwen3 VL?**
+
+So voi the he truoc, Qwen3 VL cai thien ro ret do chinh xac khi hieu hinh anh va ho tro cac tac vu phan tich hinh anh dai hon, phuc tap hon. No co hieu nang tot voi tieng Trung, chi phi goi API tuong doi thap va ti le chi phi-hieu qua tot. Ngoai ra, cua so ngu canh lon hon giup no xu ly cac tac vu suy luan thi giac phuc tap hon.
+
+**Tinh huong ung dung dien hinh:**
+
+- Thuong mai dien tu: tu dong tao tieu de, mo ta va diem ban hang tu anh san pham.
+- Sang tao noi dung: tao copy hoac goi y hinh anh tu anh tu lieu.
+- Van phong: trich xuat noi dung trong anh, tu dong nhan dien bao cao.
+- Giao duc: tu dong phan tich bai tap dang anh va trich xuat diem kien thuc.
+
+:::
+
+Trong phan truoc, chung ta da giai thich cach tich hop API tao van ban. Nhung voi cac tinh huong ung dung o tren, ta se thay mot van de: thu chung ta tai len la mot hinh anh. Neu chi dung mo hinh ngon ngu lon, no khong the hieu tot noi dung trong anh, nen ket qua sinh ra co the sai khac kha nhieu.
+
+Chung ta can mot mo hinh co the giup bien hinh anh thanh mo ta bang van ban. Day la luc can den mo hinh thi giac-ngon ngu (VLM). Trong vi du nay, chung ta se dung VLM de tao mo ta diem ban hang cua san pham, tu do cai thien trai nghiem nguoi dung.
+
+De thuan tien, chung ta se dung API do [nen tang dam may SiliconFlow](https://cloud.siliconflow.cn/me) cung cap de tich hop API chuyen hinh anh thanh van ban.
+
+::: details Tim hieu them: SiliconFlow la gi?
+**SiliconFlow** la mot nen tang tong hop mo hinh AI pho bien tai Trung Quoc, cung cap dich vu API cho nhieu mo hinh ngon ngu lon va mo hinh thi giac-ngon ngu chu dao.
+
+**Dac diem nen tang:**
+
+- **Ho tro nhieu mo hinh**: tich hop nhieu mo hinh AI chu dao, gom cac mo hinh ma nguon mo nhu DeepSeek, Qwen va dong Llama.
+- **Toi uu ky thuat**: toi uu suy luan cho mo hinh ma nguon mo, cung cap dich vu API do tre thap va kha nang dong thoi cao.
+- **Tuong thich giao dien**: cung cap API tuong thich dinh dang OpenAI, thuan tien de tich hop vao ung dung hien co.
+- **Tra theo nhu cau**: ho tro tinh phi theo so lan goi.
+
+SiliconFlow kha truong thanh ve dich vu suy luan cho cac mo hinh lon ma nguon mo, va la mot lua chon thuong gap khi su dung cac mo hinh AI ma nguon mo trong he sinh thai Trung Quoc.
+:::
+
+Khi vao trang chu cua SiliconFlow, ban se thay co rat nhieu mo hinh de lua chon. Tim bo loc o goc tren ben trai, bam mo bo loc va chon nhan thi giac. Ban se thay nhieu mo hinh chuyen hinh anh thanh van ban, vi du GLM-4.6V cua Zhipu hoac Qwen3-VL.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
+
+Ban co the chon bat ky mo hinh nao de thu. O day chung ta lay `Qwen/Qwen3-VL-8B-Instruct` lam vi du.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
+
+Vao [nen tang SiliconFlow](https://cloud.siliconflow.cn/me/account/ak), trong phan API key bam "Create API Key" de tao mot API Key moi.
+
+Ban co the dung truc tiep doan ma duoi day lam ma tham khao, roi gui cung API Key vua tao cho AI IDE de tich hop tinh nang.
+
+::: details Ma tham khao chuyen hinh anh thanh van ban
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+```
+
+:::
+
+Trong tinh huong nay, chung ta thu yeu cau AI IDE giup hien thuc tinh nang tu dong tao van ban diem ban hang thuong mai dien tu va tu khoa tu hinh anh duoc tai len, nhu sau:
+
+```
+Du tren API chuyen hinh anh thanh van ban ben duoi, hay giup chung toi hien thuc tinh nang tu dong tao van ban diem ban hang thuong mai dien tu va tu khoa tu hinh anh duoc tai len.
+
+<Ma duoc luoc bo o day; ban can tu dan key va ma tham khao vao>
+```
+
+Cuoi cung, ket qua tao ra nhu sau:
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Nen tang API', description: 'Hieu khai niem cot loi va quy tac bao mat' },
+      { title: 'Tich hop van ban', description: 'Thuc hanh tao van ban voi DeepSeek' },
+      { title: 'Tich hop hinh anh', description: 'Hieu va tao hinh anh bang VLM' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 4. Tich hop API tao hinh anh: Seedream
+
+Trong cac phan truoc, chung ta chu yeu lam viec voi tac vu lien quan den van ban. Tiep theo, chung ta se thu tich hop tinh nang tao hinh anh, ho tro tao hinh tu mo ta bang van ban hoac chinh sua hinh anh co san.
+
+::: info ℹ️ Mo rong nguyen ly
+Neu ban muon tim hieu them ve nguyen ly lien quan, hay xem phu luc: [Nhap mon tao hinh anh](/vi-vn/appendix/8-artificial-intelligence/image-generation).
+
+::: details Tim hieu them: [Seedream](https://seed.bytedance.com/en/seedream4_5) la gi?
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png)
+
+> Co the ban da biet Nano Banana do Google phat trien, nhung Seedream cung rat dang chu y. Seedream 4.5 la the he mo hinh sang tao hinh anh moi do ByteDance xay dung. No tich hop nang luc tao hinh anh va chinh sua hinh anh vao mot kien truc thong nhat, giup xu ly linh hoat cac tac vu da phuong thuc phuc tap nhu tao noi dung dua tren tri thuc, suy luan phuc tap va giu tinh nhat quan voi anh tham chieu. Ngoai ra, toc do suy luan cua no nhanh hon nhieu so voi the he truoc va co the tao anh do phan giai cao an tuong len den 4K.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png)
+
+**Nang luc chinh:**
+
+- **Van ban thanh hinh anh**: tao hinh anh tu mo ta bang van ban, ho tro nhieu phong cach nhu hien thuc, hoat hinh, thuy mac, cyberpunk.
+- **Chuyen phong cach**: chuyen mot hinh anh sang phong cach nghe thuat duoc chi dinh.
+- **Bien the hinh anh**: tao hinh moi co phong cach tuong tu dua tren anh tham chieu.
+- **Nang do phan giai**: tang do ro va chi tiet cua hinh anh.
+- **Chinh sua hinh anh**: chinh sua va thay doi hinh anh co san bang chi dan ngon ngu tu nhien.
+
+**Vi sao chon Seedream?**
+
+- **Mang noi dia on dinh**: truy cap nhanh va do tre thap tai Trung Quoc.
+- **Ket qua tot**: on dinh va dang tin trong cac tinh huong thuong mai dien tu va tu lieu hinh anh.
+- **Toi uu cho tieng Trung**: hieu prompt tieng Trung chinh xac hon, phu hop voi nguoi dung noi dia.
+- **Toc do nhanh**: hieu suat tao cao, thoi gian phan hoi ngan.
+- **Chat luong on dinh**: tao hinh anh HD do phan giai toi da 4K.
+
+**Tinh huong ung dung dien hinh:**
+
+- Thuong mai dien tu: tao anh chinh, anh trang chi tiet va poster khuyen mai.
+- Mang xa hoi: tao avatar, sticker va hinh minh hoa.
+- Thiet ke: nhanh chong tao concept, tu lieu va hinh nen.
+- Marketing: tao anh quang cao, banner su kien va poster ngay le.
+
+**Ket hop voi Qwen3 VL:**
+
+Hai API nay co the dung noi tiep: truoc tien dung Qwen3 VL de phan tich anh tham chieu va hieu noi dung khung hinh; sau do dung Seedream de tao hinh anh moi dua tren prompt duoc rut ra tu phan tich do.
+:::
+
+Nhieu "poster AI / anh chinh AI / hinh nhan vat AI" ma ban thay tren Douyin, Bilibili hoac YouTube ve ban chat deu dung cac ky thuat trong phan nay. Viec ban can lam rat don gian: sap xep dau vao cua nguoi dung thanh mot cau, goi API hinh anh, roi hien thi hinh anh tra ve. Mo hinh duoc dung luc nay goi la mo hinh tao hinh anh / chinh sua hinh anh.
+
+Chung ta se tung buoc minh hoa cach tich hop Seedream API vao du an cua ban, voi su ho tro cua AI IDE.
+
+Sau khi [truy cap trang chu](https://www.volcengine.com/experience/ark?launch=seedream), bam dang nhap.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png)
+
+Sau khi dang nhap, tim tuy chon nap tien o goc tren ben phai.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png)
+
+Nap tien can xac minh danh tinh that.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png)
+
+Sau khi xac minh thanh cong, ban co the [nap 1 yuan de thu nghiem](https://console.volcengine.com/finance/fund/recharge).
+
+Quay lai [man hinh ban dau](https://www.volcengine.com/experience/ark?launch=seedream) va bam truy cap API.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png)
+
+Truoc tien, tao mot API key, sau do bam tuy chon chon.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png)
+
+Thao tac nay se dua ban den buoc 2. Tai day, ban can xac nhan dich vu duoc goi la Seedream 4.5 va sao chep vi du goi duoc cung cap. Anh chup nay kha cu, nen phien ban mo hinh trong anh van hien la 4.0.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png)
+
+Sau khi chuan bi API Key va vi du goi, ban co the dan truc tiep chung vao AI IDE de no tao demo tuong tac frontend hoac tich hop nang luc nay vao prototype hien co. Luu y trong giao dien co the chon giua tao hinh tu van ban va tao mot hinh tu nhieu hinh; ban can chon ma tham khao theo nhu cau hien tai.
+
+::: warning ⚠️ Luu y quan trong
+Vi du mac dinh o day tuong doi phuc tap. Hay nho tat **"them watermark"** va **"phan hoi streaming"** de dam bao khong tao watermark va tranh loi yeu cau.
+:::
+
+Vi sau do chung ta dung che do tao hinh tu anh tham chieu, truoc tien hay vao tinh nang tao mot hinh tu nhieu hinh. Ma tham khao sao chep nhu sau:
+
+```
+curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer xxxxxxx" \
+  -d '{
+    "model": "doubao-seedream-4-5-251128",
+    "prompt": "Thay trang phuc trong hinh 1 bang trang phuc trong hinh 2",
+    "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
+    "sequential_image_generation": "disabled",
+    "response_format": "url",
+    "size": "2K",
+    "stream": false,
+    "watermark": true
+}'
+```
+
+Sau khi co ma tham khao ve hinh anh, chung ta yeu cau AI IDE ho tro cac tac vu hinh anh thuong gap trong thuong mai dien tu:
+
+```
+Hay dua tren API ben duoi de giup toi hien thuc cac tinh nang thuong gap trong nghiep vu thuong mai dien tu cua du an nay, vi du tao poster, tao anh dau tien cho thuong mai dien tu tren Douyin/TikTok, v.v.
+
+<Dan API KEY va ma chinh sua hinh anh tai day>
+```
+
+Hieu qua hien thuc nhu sau:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png)
+
+Can luu y rang tao hinh anh doi khi gap cac loi kho doan. Ban nen yeu cau AI IDE hien thi day du thong bao loi de tien sao chep va sua; neu khong, no co the lien tuc hien "tao hinh that bai" ma khong noi ro ly do. Vi du, ban co the noi:
+
+```
+Dung chi hien thi "tao hinh anh that bai"; moi lan hay hien thi day du ly do that bai, vi du hinh anh khong khop, loi yeu cau, timeout, v.v.
+```
+
+Do khi sau khi sua, thay doi khong duoc ap dung vao trang web. Neu ban thay trang van bao loi lap di lap lai sau nhieu lan sua, cung co the thu noi truc tiep voi AI IDE: hay khoi dong lai du an nay.
+
+Trong nghiep vu thuong mai dien tu, co the chung ta muon tu dong mac quan ao nguoi dung tai len len nguoi mau, hoac tu dong tao anh ban hang va poster hap dan cho san pham. O day chung ta thu mot prompt yeu cau no tao poster thuong mai dien tu:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png)
+
+Ban co the dung API van ban thanh hinh anh hoac hinh anh thanh hinh anh de hien thuc cac tinh nang khac nhau theo kich ban kinh doanh ma ban hinh dung.
+
+## Them cac lua chon dich vu hinh anh khac
+
+Duoi day la mot so lua chon khac. Ban nen chay thong ket qua tao hinh bang Qwen truoc, sau do dua tren ket qua va chi phi de thay bang cac dich vu ben duoi, tuy theo trai nghiem thuc te.
+
+### Tich hop Recraft
+
+Neu prototype cua ban nghieng ve "san xuat thiet ke", vi du tao minh hoa theo phong cach thuong hieu, poster marketing hoac tu lieu vector, Recraft thuong se thuan tay hon. Cach tich hop hoan toan giong phan truoc: **lay Key + tim vi du chinh thuc + yeu cau AI IDE dua vi du vao nut/trang cua ban**.
+
+::: details Tim hieu them: Recraft la gi?
+
+> Recraft la mot cong cu AI danh cho nha thiet ke, hoa si minh hoa va nhan su marketing. Cong ty duoc thanh lap tai My nam 2022 va co tru so tai London. No giup tao va lap lai hieu ung thi giac nhu hinh anh, vector art va do hoa 3D, voi cac uu diem nhu dau ra chat luong cao, dat vi tri thanh phan chinh xac va thiet ke nhat quan voi thuong hieu. Recraft duoc hon 3 trieu nguoi dung tai 200 quoc gia va vung lanh tho tin dung, bao gom Ogilvy va Netflix, va da tao hon 350 trieu hinh anh. Doi ngu cua ho huong toi bien Recraft thanh cong cu thiet yeu cho nha thiet ke, giup nha sang tao kiem soat workflow duoc AI ho tro.
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png)
+
+Truoc tien, chung ta van can tim [cong API](https://www.recraft.ai/profile/api) de lay API Key.
+
+Vi o day khong co han muc mien phi, chung ta can tu nap 1,000 credits. Trang nay ho tro Alipay va WeChat Pay, nen lay 1,000 credits kha de. Luu y: dung nap qua so tien can thiet.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png)
+
+Sau do, chung ta van lam theo cung mot cach: vao tai lieu chinh thuc va tim vi du yeu cau tuong ung:
+
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
+
+:::
+
+### Tich hop Qwen Image / Qwen Image Edit
+
+Neu ban muon tich hop dich vu tao hinh anh theo cach don gian hon, co the can nhac Qwen Image. Tu duy van khong doi: xem no nhu mot "API tao hinh anh" va noi vao nut trong prototype cua ban.
+
+::: details Tim hieu them: Qwen Image / Qwen Image Edit la gi?
+
+**Qwen Image** la dong mo hinh tao hinh anh do doi Tongyi cua Alibaba Cloud ra mat, chu yeu gom hai mo hinh:
+
+**1. Qwen Image: mo hinh van ban thanh hinh anh (Text-to-Image)**
+
+Tao hinh anh hoan toan moi dua tren mo ta bang van ban. Ban nhap mot prompt, mo hinh se hieu y dinh cua ban va tao hinh anh phu hop voi mo ta.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png)
+
+**Nang luc chinh:**
+
+- **Van ban thanh hinh anh**: tao hinh anh tu mo ta bang van ban, ho tro nhieu phong cach nhu hien thuc, hoat hinh, thuy mac, cyberpunk.
+- **Chuyen phong cach**: chuyen mot hinh anh sang phong cach nghe thuat duoc chi dinh.
+- **Bien the hinh anh**: tao hinh moi co phong cach tuong tu dua tren anh tham chieu.
+- **Nang do phan giai**: tang do ro va chi tiet cua hinh anh.
+
+**2. Qwen Image Edit: mo hinh hinh anh thanh hinh anh (Image-to-Image)**
+
+Chinh sua va thay doi hinh anh co san. Thong qua chi dan ngon ngu tu nhien, mo hinh hieu y dinh chinh sua cua ban va tao ket qua.
+
+**Nang luc chinh:**
+
+- **Thay the cuc bo**: thay mot vat the hoac nhan vat trong anh, vi du "doi nen thanh bai bien".
+- **Loai bo phan tu**: xoa cac phan tu khong can thiet trong anh.
+- **Chuyen doi phong cach**: them bo loc hoac hieu ung nghe thuat cho anh.
+- **Mo rong hinh anh**: mo rong bien anh va tao noi dung moi.
+- **Chinh anh thong minh**: tu dong lam dep, dieu chinh anh sang bong do va sua loi.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png)
+
+**Vi sao chon dong Qwen Image?**
+
+- **Toi uu cho tieng Trung**: hieu prompt tieng Trung chinh xac hon, phu hop voi nguoi dung noi dia.
+- **Chi phi thap**: re hon so voi nhieu doi thu quoc te.
+- **Toc do nhanh**: hieu suat tao cao, thoi gian phan hoi ngan.
+- **Chat luong on dinh**: hoat dong dang tin trong thuong mai dien tu va cac tinh huong tu lieu hinh anh.
+- **Da dang phong cach**: ho tro nhieu phong cach nghe thuat va hieu ung sang tao.
+
+**Tinh huong ung dung dien hinh:**
+
+- Thuong mai dien tu: tao anh chinh, anh trang chi tiet va poster khuyen mai.
+- Mang xa hoi: tao avatar, sticker va hinh minh hoa.
+- Thiet ke: nhanh chong tao concept, tu lieu va hinh nen.
+- Marketing: tao anh quang cao, banner su kien va poster ngay le.
+  :::
+
+Hay xem trang chinh thuc cua [SiliconFlow](https://siliconflow.cn/). Ben trai co phan "Playground", noi ban co the thu cac mo hinh khac nhau ma khong can goi API. O dau trang co nut "Filters"; bam vao do de loc danh sach mo hinh ben phai.
+
+Neu ban chon "Image", ban se chi thay cac mo hinh van ban thanh hinh anh hien duoc ho tro. Trong truong hop nay, chung ta se dung Qwen/Qwen-Image.
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png)
+
+Sau khi cau hinh xong, chung ta can tham khao tai lieu API tao hinh anh tuong ung. Tren trang tai lieu chinh thuc, ban co the tim phan duoc danh dau "API Reference". Bam vao do, sau do di den [phan API tao hinh anh](https://docs.siliconflow.cn/cn/api-reference/images/images-generations) va tim vi du yeu cau lien quan.
+
+Ban co the gui vi du yeu cau duoi day cung API KEY cho AI IDE de hien thuc tinh nang tao hinh anh.
+
+```bash
+curl --request POST \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
+  --header 'Content-Type: application/json' \
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
+  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
+}
+'
+```
+
+Mo hinh o day co the dung Qwen/Qwen-Image hoac Qwen/Qwen-Image-Edit-2509.
+
+::: details Ma tham khao chinh sua hinh anh
+
+Sao chep doan ma va key duoi day, roi gui chung cho AI IDE:
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+
+prompt: str = "Bien bau troi thanh canh chieu toi, co mat trang va cac vi sao, phong cach mong ao"
+negative_prompt: str = "mo, chat luong thap, bien dang"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+
+:::
+
+# Phu luc: cach tim mo hinh AI "manh hon hien tai"
+
+Mo hinh van ban, thuong duoc goi la "mo hinh ngon ngu lon", phat trien rat nhanh. Chung ta luon can dam bao minh dang dung mot trong nhung mo hinh co hieu nang tot hon. Thong qua hai trang web duoi day, ban co the de dang xem mo hinh nao hien duoc nhieu nguoi dung va danh gia tot.
+
+Noi chung, ban co the hieu loai trang nay nhu **"dau truong mo hinh"**: no dat dau ra cua hai mo hinh canh nhau, roi ban bo phieu cho cai ban thich hon. Mo hinh co nhieu phieu hon thuong co nghia la nhieu nguoi thay no "de dung hon".
+
+Ngoai ra, doi khi ban co the thay cac mo hinh an danh bi an, nhu "Unknown Model", trong cac dau truong mo hinh lon nay. Dieu do thuong co nghia la ai do da am tham dua "mo hinh thu nghiem noi bo" vao de thu nghiem mu, va ban co the co co hoi trai nghiem nang luc manh hon som hon.
+
+## LMArena
+
+Trang web: <https://lmarena.ai/>
+
+LMArena phu hop hon de danh gia "phan tra loi cua mo hinh nao duoc da so nguoi thich hon". Cang nhieu phieu va diem cang cao, no thuong cang on dinh trong tinh huong su dung thuc te.
+
+Mot cach dung don gian la:
+
+1. Xem truc tiep bang xep hang (Leaderboard)
+2. Chon truoc huong ban can lam, vi du hoi thoai tong quat / lap trinh / thi giac
+3. Chon mot mo hinh trong Top 3 ma ban co the dung, tuc co the truy cap, gia chap nhan duoc va do tre chap nhan duoc
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png)
+
+## Artificial Analysis
+
+Trang web: <https://artificialanalysis.ai/>
+
+Artificial Analysis phu hop hon de so sanh "chat luong / gia / toc do" trong cung mot bang. Ban co the xem no nhu bang tham so de chon mo hinh.
+
+Cach dung thuong gap la:
+
+1. Tim danh muc mo hinh ban quan tam, vi du van ban / tao hinh anh
+2. Xem chi so chat luong (Quality) + gia (Price) + do tre/thong luong (Latency/Throughput)
+3. Chon mo hinh co "ti le chi phi-hieu qua tong the" phu hop nhat voi san pham cua ban
+
+::: tip ✅ Goi y
+Dung tranh luan "mo hinh nao manh hon" chi bang cam tinh. Cach dang tin hon la dung cung mot tap dau vao de thu 2-3 mo hinh, sau do ket hop bang xep hang va gia de quyet dinh.
+:::
+
+## Tong ket
+
+Khi tich hop cac loai dich vu AI, khong can hinh dung API qua phuc tap. Neu nam duoc vai khai niem cot loi duoi day, ban co the xu ly phan lon tinh huong:
+
+**Ban chat cua API la cau noi giao tiep**. No lam mot viec rat don gian: gui yeu cau cua ban ra ngoai, roi mang phan hoi cua mo hinh ve. Ban khong can quan tam dieu gi xay ra phia sau, chi can to chuc dung dinh dang yeu cau.
+
+**SDK la lop dong goi tren API**. Neu API la giao dien raw, thi SDK la mot hop cong cu co san. No xu ly san cac chi tiet phien phuc nhu ky yeu cau, xu ly loi va kiem tra tham so. Trong phat trien hang ngay, uu tien dung SDK thay vi goi API truc tiep se tiet kiem nhieu rac roi.
+
+**Khi doc tai lieu, chi can nhin ky ba thu**: dia chi dich vu (endpoint), thong tin xac thuc (API key) va cach dien tham so goi. Lam ro ba diem nay thi viec chay thong chi con la van de thoi gian.
+
+Phan viec con lai, IDE va cac cong cu phat trien hien dai se ho tro ban hoan thanh. Hay tap trung vao logic nghiep vu cua minh, con viec goi tang thap thi giao cho cac SDK va toolchain truong thanh nay.
+
+# 5. 📚 Bai tap: tich hop nang luc AI dau tien cua ban
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 Thu thach: tich hop nang luc AI vao workspace cua ban</div>
+  </template>
+
+  <p>
+    Tham khao prompt va noi dung cua bai nay, hoan thanh mot vong khep kin:
+  </p>
+
+  <ul>
+    <li>
+      <strong>Thuc hanh vong khep kin day du</strong>
+      <ul>
+        <li>Chon va tich hop mot dich vu AI (LLM / van ban thanh hinh anh / hinh anh thanh hinh anh) → hien thuc tuong tac frontend-backend → tich hop vao prototype cua ban</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Chia se ket qua</strong>
+      <ul>
+        <li>Chup man hinh trang tinh nang cua ban va chia se voi moi nguoi</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Cau hoi suy nghi</strong>
+      <ul>
+        <li>Chuan bi cho phan tiep theo "thuc hanh du an hoan chinh": hay nghi truoc ban se ket hop cac nang luc AI nay nhu the nao va muon tao tinh nang thu vi gi.</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## Buoc tiep theo
+
+Trong phan tiep theo, chung ta se noi cac nang luc AI rieng le nay lai voi nhau va ket hop voi mot tinh huong kinh doanh thuc te de xay dung mot san pham hoan chinh:
+
+- Noi cac buoc nhu lap ke hoach noi dung, dang san pham va phan tich du lieu thanh mot quy trinh kinh doanh hoan chinh
+- Nhung cac nang luc AI hoc trong bai nay, nhu tao copy bang LLM, van ban thanh hinh anh va chinh sua hinh anh, vao cac nut nghiep vu thuc te
+- Hien thuc mot "workspace AI cho thuong mai dien tu" that su dung duoc, thay vi mot demo rieng le
+
+<RelatedArticlesSection
+  title="Bai viet lien quan"
+  description="Lo trinh hoc de xuat tu nang luc AI don diem den quy trinh san pham hoan chinh."
+  :items="relatedArticles"
+/>
diff --git a/docs/vi-vn/stage-1/introduction-to-ai-ide/index.md b/docs/vi-vn/stage-1/introduction-to-ai-ide/index.md
new file mode 100644
index 0000000..47b7cef
--- /dev/null
+++ b/docs/vi-vn/stage-1/introduction-to-ai-ide/index.md
@@ -0,0 +1,1251 @@
+
+# Sơ cấp 2: Học dùng công cụ lập trình AI
+
+## Dẫn nhập chương
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = 'Khoảng <strong>1 ngày</strong>, có thể chia thành nhiều lần học'
+const relatedArticles =
+  relatedArticlesMap['vi-vn/stage-1/introduction-to-ai-ide'] ?? []
+</script>
+
+<ChapterIntroduction :duration="duration" :tags="['Thiết lập môi trường phát triển local', 'IDE và AI IDE', 'Kỹ thuật phát triển hiệu quả']" coreOutput="1 trò chơi nhỏ tự tạo" expectedOutput="Hoàn thành bằng Trae">
+
+Trước đó, chúng ta đã trải nghiệm lập trình AI trên z.ai, nhưng bản web có nhiều giới hạn: <strong>không thể lưu bất cứ lúc nào</strong>, <strong>khó quản lý tệp</strong> và cũng <strong>khó làm dự án phức tạp</strong>. Chương này giúp bạn đưa môi trường phát triển về máy tính của mình để có thể <strong>thực sự tự xây dựng sản phẩm</strong>.
+
+Chúng ta sẽ làm rõ trước <strong>IDE và AI IDE khác nhau ở đâu</strong>, vì sao AI IDE có thể giúp bạn <strong>tăng mạnh hiệu suất</strong>; sau đó sẽ <strong>hướng dẫn từng bước</strong> dùng Trae để làm một trò chơi Rắn săn mồi trên máy local, đi hết <strong>quy trình đầy đủ</strong> từ cài đặt đến chạy thử; cuối cùng sẽ chia sẻ một số <strong>kỹ thuật thực dụng khi trò chuyện với AI</strong> để bạn bớt đi đường vòng.
+
+Học xong chương này, bạn sẽ <strong>nắm được quy trình phát triển gần giống lập trình viên</strong>.
+
+::: tip 💡 Gợi ý nâng cao
+Nếu bạn đã có một chút nền tảng lập trình và muốn dùng công cụ mạnh hơn sớm hơn, có thể tham khảo [Công cụ CLI Coding hiện đại](../../stage-2/backend/modern-cli/) để phát triển bằng dòng lệnh.
+:::
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Hiểu môi trường', description: 'Hiểu IDE và AI IDE' },
+      { title: 'Thực hành local', description: 'Dùng Trae làm Rắn săn mồi' },
+      { title: 'Giải thích công cụ', description: 'Làm quen giao diện IDE' },
+      { title: 'Kỹ năng giao tiếp', description: 'Trao đổi hiệu quả với AI' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. Viết code cần môi trường và công cụ gì
+
+### 1.1 Chuyển đổi tư duy: gặp vấn đề, hỏi AI trước
+
+Trước khi giới thiệu các loại môi trường và công cụ, trước hết cần nhắc bạn **thay đổi thói quen tư duy**.
+
+Trong cách học lập trình truyền thống, nếu cần cài Python, cấu hình Conda hoặc xử lý lỗi cài npm, bạn thường mở công cụ tìm kiếm, tìm một bài hướng dẫn rồi làm từng bước. Nếu giữa chừng có lỗi, bạn lại phải tìm thông báo lỗi và thử đi thử lại.
+
+Sai rồi! ❌
+
+Trong thời đại AI, đặc biệt khi dùng AI IDE, hãy nhớ một nguyên tắc cốt lõi: **bất kỳ thao tác nào cũng có thể hỏi AI trước, thậm chí để AI trực tiếp làm giúp bạn.**
+
+- **Không biết cài môi trường thế nào?** Hỏi AI ngay trong sidebar: "Tôi muốn viết Python, hãy kiểm tra giúp tôi đã cài Python chưa; nếu chưa thì cài giúp tôi."
+- **Mạng bị kẹt?** Nếu cài dependency cứ quay vòng hoặc báo lỗi, đưa lỗi cho AI: "Tải thất bại rồi, có phải do mạng không? Có thể giúp tôi đổi sang mirror trong nước không?"
+- **Không nhớ lệnh?** Không cần học thuộc lệnh Git hay Conda. Chỉ cần nói với AI: "Giúp tôi tạo một virtual environment mới tên là demo."
+
+### 1.2 Vì sao cần môi trường và công cụ
+
+Từ "thử viết vài dòng code" đến "làm một dự án có thể bảo trì lâu dài", yêu cầu về môi trường và công cụ hoàn toàn khác nhau.
+
+Về lý thuyết, bạn cũng có thể viết code bằng Notepad có sẵn trong hệ thống, nhưng vấn đề sẽ xuất hiện rất nhanh:
+
+- **Toàn bộ code chỉ là chữ đen**, keyword, chuỗi và comment lẫn vào nhau, rất khó nhìn ra cấu trúc trong nháy mắt.
+- **Không có gợi ý thông minh**, từ nào cũng phải gõ đầy đủ bằng tay; sai một chữ cái là phải kiểm tra đi kiểm tra lại.
+- **Nhiều tệp sẽ rất rối**, chuyển qua lại giữa hàng chục tệp và thường không tìm được dòng cần sửa.
+- **Có lỗi chỉ biết đoán**, chương trình sập nhưng không biết lỗi ở đâu, chỉ có thể in log từng dòng để thử.
+
+Vì vậy, bạn cần một IDE (Integrated Development Environment, môi trường phát triển tích hợp). Nó sẽ hiển thị code bằng nhiều màu, tự động gợi ý khi nhập, sắp xếp tệp theo dự án và giúp truy vết lỗi từng bước, nhờ đó phát triển hiệu quả hơn và ít lỗi hơn.
+
+## 2. IDE là gì, vì sao cần IDE
+
+::: info Gợi ý đọc trước
+Nếu bạn chưa quen IDE là gì và từng phần giao diện có tác dụng gì, nên đọc trước [Giới thiệu IDE](/vi-vn/appendix/2-development-tools/ide-basics) để hiểu các khái niệm cơ bản và chức năng thường gặp của IDE.
+:::
+
+Trong giai đoạn đầu của lập trình, chúng ta chỉ cần một trình soạn thảo văn bản đơn giản và bộ xử lý ngôn ngữ. Nhưng khi độ phức tạp của dự án tăng lên, lập trình viên rất cần một công cụ có thể quản lý tệp hiệu quả, hỗ trợ tô sáng cú pháp và debug. Vì vậy, môi trường phát triển tích hợp (IDE) ra đời.
+
+Bạn có thể hiểu IDE là một chương trình chuyên dùng để "chỉnh sửa, quản lý, chạy và debug" code. IDE thời kỳ đầu trông rất "thô sơ" và gần như hoàn toàn thao tác bằng bàn phím.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)
+
+Giao diện terminal. Nguồn ảnh: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
+
+Các "IDE tích hợp" nổi tiếng và trưởng thành về chức năng như `Vim` thường được dùng khi thao tác từ xa trên server.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png)
+
+Để hiệu quả hơn, chúng ta cần IDE hiện đại hỗ trợ thao tác chuột, thường bao gồm:
+
+- **Trình soạn thảo mã nguồn**: tô sáng cú pháp, tự động hoàn thành.
+- **Công cụ build và chạy**: tích hợp compiler/interpreter.
+- **Debugger**: debug bằng breakpoint, xem biến.
+
+IDE hiện đại thường còn tích hợp các công cụ như Git. Phổ biến nhất là **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)** của Microsoft: nhẹ và có thể mở rộng. Dù cũng có các IDE chuyên nghiệp như hệ sinh thái JetBrains, VS Code vẫn thân thiện nhất với người mới.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png)
+
+Triết lý cốt lõi của VS Code là "mọi thứ đều là plugin". Thông qua cơ chế plugin, nó hỗ trợ nhiều ngôn ngữ: cài plugin Python thì thành Python IDE, cài plugin C++ thì thành C++ IDE. Khi chưa cài plugin, nó chỉ là một trình soạn thảo văn bản cao cấp.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png)
+
+Thậm chí có thể dùng để chỉnh sửa tài liệu Markdown.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png)
+
+Tóm lại, IDE là một bộ công cụ giúp lập trình viên viết code và chạy chương trình hiệu quả.
+
+Để xem giải thích cụ thể hơn, hãy đọc [phần nguyên lý trực quan hóa IDE trong phụ lục](/vi-vn/appendix/2-development-tools/ide-basics).
+
+## 3. AI IDE khác IDE thông thường ở đâu
+
+IDE thông thường, ví dụ VS Code bản gốc, về bản chất là một "hộp công cụ":  
+Bạn có thể mở dự án, viết code, chạy và debug, cũng có thể cài plugin, nhưng điều kiện tiên quyết là bạn phải tự biết cần làm gì và làm như thế nào:
+
+- Khi có lỗi, tự đọc thông báo và tự tìm dòng có vấn đề.
+- Khi muốn thêm trang mới hoặc API mới, tự tìm tệp tương ứng và tự viết code.
+- Khi muốn cấu hình môi trường hoặc build, tự tra tài liệu và làm theo từng bước.
+
+Nhưng trong AI IDE, bạn có thể trực tiếp dùng mô hình ngôn ngữ lớn để hỗ trợ viết code và sửa tệp:
+
+- Nói thẳng "làm một trang đăng nhập", nó sẽ tạo trước cấu trúc code cơ bản.
+- Đưa thông báo lỗi và code liên quan cho nó, để nó phân tích nguyên nhân và đề xuất cách sửa.
+- Sau khi bạn xác nhận, để nó tự tạo tệp mới, sửa code hàng loạt và xử lý các việc nặng tay qua nhiều tệp.
+
+Ví dụ, bạn có thể chọn một đoạn code và yêu cầu nó "refactor đoạn này" hoặc "thêm comment"; cũng có thể hỏi trong sidebar "dự án này được thiết kế như thế nào?", dùng `@tên-tệp` hoặc `@toàn-bộ-dự-án` để chỉ định phạm vi tham khảo, rồi dùng một câu để tự động hoàn thành các thao tác rườm rà như tạo tệp, viết code và chạy.
+
+Trong phiên bản VS Code mới, đã có sẵn một trợ lý mô hình ngôn ngữ lớn. Bạn có thể trò chuyện với mô hình về toàn bộ codebase, một tệp cụ thể, thậm chí một hàm cụ thể. Bạn cũng có thể giống như khi dùng công cụ tự động viết code trên web: gửi yêu cầu dưới dạng prompt cho coding Agent tích hợp, để nó tự giúp bạn hiện thực tính năng cần thiết, tạo tệp, sửa code, cấu hình môi trường, v.v.
+
+Bạn có thể tải và cài VS Code, rồi bấm lối vào sidebar ở góc trên bên phải để mở khu vực chức năng AI và trải nghiệm các năng lực này.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png)
+
+Tuy nhiên, VS Code không phải IDE có năng lực AI mạnh nhất. Với các tình huống cần nhiều hỗ trợ lập trình bằng AI, chúng ta thường muốn dùng công cụ "thông minh hơn, hiệu quả hơn". Một AI IDE tốt có thể tiết kiệm đáng kể thời gian viết code và sửa bug. Dưới đây, chúng ta sẽ giới thiệu một số AI IDE phổ biến hiện nay; bạn có thể chọn bất kỳ công cụ nào theo sở thích cá nhân.
+
+Vì VS Code là mã nguồn mở, bất kỳ ai cũng có thể tải source code và tự build, nên phần lớn AI IDE trên thị trường hiện nay đều được phát triển tiếp trên nền VS Code. Vì vậy, bạn không cần lo phải "học rất nhiều loại IDE": **chỉ cần quen cách dùng cơ bản của VS Code**, chuyển sang các AI IDE này sẽ không phải học lại từ đầu.
+
+Nói chung, khác biệt giữa các AI IDE chủ yếu tập trung ở bốn điểm: giá; loại mô hình có thể dùng, trong đó một số mô hình cao cấp có thể bị hạn chế ở vài khu vực; năng lực Agent, tức mức độ thông minh và khả năng thực thi khi hỗ trợ viết code; cũng như tốc độ và hiệu năng. Bạn có thể chọn theo kết quả thử nghiệm thực tế; công cụ phù hợp với mình mới là tốt nhất.
+
+> Một AI IDE điển hình thường có các năng lực cốt lõi sau:
+>
+> - Tạo và hoàn thành code thông minh: trong IDE truyền thống, chúng ta thường gõ vài ký tự để auto-complete tên biến hoặc tên hàm; trong AI IDE hiện đại, bạn có thể viết vài dòng pseudo-code hoặc mô tả ngắn yêu cầu, để IDE tự hoàn thành toàn bộ logic, thậm chí tạo trực tiếp một đoạn lớn hoặc cả khối code theo chỉ dẫn.
+> - Hiểu code và hỏi đáp: IDE có thể hiểu và trả lời câu hỏi về một đoạn code, một tệp, thậm chí toàn bộ cấu trúc thư mục dự án.
+> - Refactor và tối ưu code: IDE có thể viết lại hoặc tối ưu logic hiện thực của đoạn code được chỉ định theo ý định của bạn.
+> - Tự động tạo test: IDE có thể tự tạo code test cho các hàm và module khác nhau, giúp bạn kiểm thử có mục tiêu dễ hơn.
+> - Thực thi nhiệm vụ kiểu Agent: Agent thông minh có thể tự tạo, build, cài đặt, chạy và sửa code; trong nhiều nhiệm vụ, nó có thể thay thế một phần công việc của kỹ sư phần mềm junior.
+
+::: details Antigravity
+
+### [Antigravity](https://antigravity.google/)
+
+Antigravity là AI IDE hoàn toàn mới do Google phát hành cùng Gemini 3 vào tháng 11 năm 2025, dùng mô hình phát triển "Agent-First". Khác với hỗ trợ viết code AI truyền thống, Antigravity để AI agent trở thành "người thực thi chủ động", có thể trực tiếp thao tác editor, terminal, browser và các công cụ khác, đảm nhận nhiều việc hơn trong "thực thi", "lập kế hoạch" và "xác minh". Lập trình viên chỉ cần nêu ý định ở tầng cao; agent sẽ tự chia nhỏ nhiệm vụ, lập kế hoạch, viết code, chạy test và tạo kết quả. Nó hỗ trợ chuyển đổi nhiều mô hình, gồm Gemini 3 Pro, Claude Sonnet 4.5, v.v. Hiện công cụ này được cung cấp dưới dạng public preview và hỗ trợ Windows, macOS, Linux.
+:::
+
+::: details Trae
+
+### [Trae](https://www.trae.ai/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png)
+
+Trae là trợ lý lập trình AI do ByteDance ra mắt, hỗ trợ hơn 100 ngôn ngữ lập trình và có thể tích hợp vào các IDE phổ biến. Chức năng của nó bao gồm tạo code bằng ngôn ngữ tự nhiên, debug tự động, chuyển bản thiết kế thành component React/Vue, v.v. Sau bản cập nhật tháng 8 năm 2025, Trae thêm các tính năng như import dependency thông minh, gợi ý đổi tên, quản lý checklist nhiệm vụ; chế độ SOLO cũng bắt đầu hỗ trợ tạo code backend và chỉnh sửa tài liệu kiến trúc kỹ thuật.
+:::
+
+::: details Cursor
+
+### [Cursor](https://cursor.com/)
+
+Cursor là trình soạn thảo code AI do Anysphere phát triển, tùy biến trên nền VS Code, tập trung tối ưu cho codebase quy mô lớn và các tình huống cộng tác nhiều tệp. Nó hỗ trợ các mô hình như GPT-4o, Claude 3.7; chế độ Claude Max ra mắt năm 2025 có thể xử lý dự án ở cấp độ hàng triệu dòng code. Bản Pro đã bỏ giới hạn số lần request, rất phù hợp với dự án doanh nghiệp phức tạp.
+
+Hiện tại, Cursor có thể xem là một trong những AI IDE "có giao diện frontend" có trải nghiệm tổng thể tốt nhất, lượng người dùng lớn và tần suất cập nhật tính năng cao. Nhược điểm lớn nhất của nó là giá tương đối cao: bản Pro khoảng 20 USD mỗi tháng.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png)
+:::
+
+::: details Qoder
+
+### [Qoder](https://qoder.com/)
+
+Qoder là AI IDE do Alibaba ra mắt, nhấn mạnh "cộng tác minh bạch" và "tăng cường năng lực context engineering". Thông qua Action Flow, nó hỗ trợ chia nhiệm vụ thành nhiều bước và theo dõi quá trình thực thi của AI theo thời gian thực; đồng thời hỗ trợ routing động nhiều mô hình và quản lý trạng thái nhiệm vụ, rất phù hợp để quản trị kiến trúc trong dự án vừa/lớn và phân tích "reverse engineering" hệ thống legacy.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png)
+:::
+
+::: details CodeBuddy
+
+### [CodeBuddy](https://www.codebuddy.com/)
+
+CodeBuddy là công cụ lập trình AI do Tencent Cloud ra mắt, nhấn mạnh hỗ trợ chỉ dẫn tiếng Trung và năng lực tuân thủ cấp doanh nghiệp. Nó cung cấp các chức năng như hoàn thành code, review code hàng loạt và chuyển đổi nhiều mô hình; trong đó Craft agent có thể tạo code nhiều tệp và tích hợp API. Bản enterprise hỗ trợ triển khai private và đã đạt chứng nhận bảo mật cấp 3, phù hợp với các ngành có yêu cầu cao về an toàn dữ liệu như tài chính và y tế.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png)
+:::
+
+::: details VS Code + Cline
+
+### VS Code + [Cline](https://cline.bot/)
+
+Cline là một plugin AI programming Agent cho VS Code (Visual Studio Code), có thể linh hoạt chuyển đổi mô hình lớn được dùng bằng cách cấu hình các API endpoint khác nhau. Cline hỗ trợ đầu vào đa phương thức, mở rộng công cụ MCP và giám sát chi phí; mọi thao tác đều cần người dùng xác nhận trước khi thực thi. Nó rất phù hợp để nhanh chóng kiểm chứng ý tưởng hoặc tích hợp vào quy trình phát triển hiện có. Chức năng cơ bản miễn phí, còn bản enterprise hỗ trợ triển khai mô hình trong môi trường private.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png)
+:::
+
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro là AI programming IDE do AWS ra mắt, tích hợp sâu với Amazon Bedrock và hệ sinh thái dịch vụ cloud AWS. Nó hỗ trợ nhiều mô hình lớn như Claude, Nova, đặc biệt phù hợp với các tình huống phát triển cần tích hợp chặt với dịch vụ cloud AWS. Kiro cung cấp tạo code thông minh, kiểm thử tự động, cũng như kết nối liền mạch với tài nguyên AWS như Lambda, S3, DynamoDB; nhờ đó có lợi thế riêng trong phát triển ứng dụng cloud-native.
+
+> **Ghi chú**: Nếu bạn muốn dùng các mô hình liên quan đến Anthropic Claude, cần dùng Cursor, Kiro hoặc Antigravity làm IDE. Các IDE này có hợp tác chính thức hoặc tích hợp sâu với Anthropic, nên có thể cung cấp trải nghiệm Claude ổn định và đầy đủ hơn.
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'Hiểu môi trường', description: 'Hiểu IDE và AI IDE' },
+      { title: 'Thực hành local', description: 'Dùng Trae làm Rắn săn mồi' },
+      { title: 'Giải thích công cụ', description: 'Làm quen giao diện IDE' },
+      { title: 'Kỹ năng giao tiếp', description: 'Trao đổi hiệu quả với AI' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. Thực hành: dùng AI IDE tạo trò Rắn săn mồi trên máy local
+
+Phần trước chủ yếu nói về "khái niệm" và "khác biệt". Trong mục này, chúng ta sẽ dùng một bài thực hành đầy đủ để biến khái niệm trừu tượng thành thao tác cụ thể: **tạo một thư mục rỗng mới → mở bằng AI IDE → trò chuyện trong sidebar để AI dùng React tạo từ đầu một trò Rắn săn mồi.** Ở đây, chúng ta lấy Trae làm ví dụ, nên trước tiên cần cài đặt và hiểu sơ Trae là gì.
+
+::: tip 💡 Mẹo nhỏ: nối mượt từ web về local
+Nếu trước đó bạn đã phát triển dự án trên z.ai hoặc nền tảng lập trình AI web khác, có thể tải code về máy local rồi dùng AI IDE mở để tiếp tục phát triển. Như vậy vừa giữ được thành quả trước đó, vừa tận hưởng năng lực hỗ trợ AI mạnh hơn của IDE local.
+
+Các bước rất đơn giản:
+1. Trên z.ai hoặc nền tảng tương tự, bấm nút tải xuống để lưu dự án về máy local
+2. Giải nén rồi dùng AI IDE như Trae/Cursor mở thư mục đó
+3. Tiếp tục trò chuyện với AI trong sidebar để lặp và tối ưu dự án
+:::
+
+### 4.1 Chuẩn bị: cài đặt và tìm hiểu Trae
+
+#### 4.1.1 Trae là gì
+
+Tên đầy đủ của Trae có thể hiểu là "The Real AI Engineer". Đây là một môi trường phát triển tích hợp AI thích ứng do ByteDance phát triển. Nó được xây dựng trên nền VS Code phổ biến, nghĩa là nếu trước đây bạn đã quen VS Code, khi dùng Trae bạn sẽ thấy cả bố cục giao diện lẫn thao tác cơ bản đều rất quen thuộc và dễ chịu.
+
+Mục tiêu cốt lõi của Trae là trở thành "bạn đồng hành lập trình thông minh" của lập trình viên. Bằng cách tích hợp sâu năng lực AI, nó có thể tự động xử lý nhiều việc lặp lại và mang đến trải nghiệm phát triển trực quan, hiệu quả hơn. Nó không chỉ là một "công cụ hoàn thành code", mà muốn hỗ trợ xuyên suốt toàn bộ workflow phát triển: từ tạo dự án, viết code, debug, test đến deploy.
+
+#### 4.1.2 Cài đặt Trae
+
+Trae có bản quốc tế và bản Trung Quốc. Bản quốc tế cần truy cập mạng quốc tế, nhưng có thể dùng các mô hình mới ở nước ngoài như GPT-5; bản Trung Quốc chủ yếu hỗ trợ các mô hình lớn mới trong nước như GLM, Qwen, Kimi.
+
+Địa chỉ tải bản quốc tế: https://www.trae.ai/  
+Địa chỉ tải bản Trung Quốc: https://www.trae.cn/
+
+##### Giá và cách dùng Trae
+
+::: info 💡 Gợi ý chọn phiên bản (người mới nên dùng bản CN)
+- **Người mới hoàn toàn nên ưu tiên tải bản Trung Quốc (bản CN, trae.cn)**, hiện trải nghiệm tốt hơn, chức năng cơ bản miễn phí và không cần mạng quốc tế.
+- Nếu bạn cần dùng các mô hình nước ngoài như GPT-5 và điều kiện mạng cho phép, có thể chọn bản quốc tế.
+- Nếu đã có API Key của mô hình bên thứ ba, việc kết nối mô hình bên thứ ba giúp kiểm soát chi phí linh hoạt hơn.
+:::
+
+> 💡 **Hiện khuyến nghị dùng mô hình miễn phí của OpenRouter để thử nghiệm**
+> 
+> Tính đến thời điểm viết giáo trình (2026-02-12), hiện vẫn có thể dùng thử miễn phí mô hình của StepFun. Cụ thể có thể tham khảo cách kết nối mô hình ở phần 4.2 bên dưới và kết nối `stepfun/step-3.5-flash:free`.
+
+Về chi phí và cách dùng Trae, có một số lựa chọn sau:
+
+- **Bản nội địa CN (rất khuyến nghị)**: chức năng cơ bản miễn phí, hiện trải nghiệm tổng thể tốt hơn bản quốc tế, rất phù hợp với người mới. Vì nhiều người dùng nên đôi khi có thể phải xếp hàng chờ.
+- **Bản quốc tế**: giá đăng ký khoảng 3 USD/tháng, có thể truy cập GPT-5 và các mô hình nước ngoài khác, nhưng cần mạng quốc tế.
+- **Kết nối mô hình bên thứ ba**: nếu bạn đã có Token API của mô hình lớn trong nước, như DeepSeek, Tongyi Qianwen, Kimi, bạn có thể dùng chức năng cấu hình mô hình bên thứ ba của Trae để kết nối các API này. Các nhà cung cấp cloud lớn như Alibaba Cloud, Tencent Cloud, Baidu Cloud thường cung cấp gói đăng ký Coding Plan; sau khi mua, bạn có thể dùng API mô hình lớn của họ với giá ưu đãi hơn. Như vậy bạn vừa tự do chọn mô hình mình thích, vừa kiểm soát chi phí sử dụng.
+
+Người mới nên bắt đầu từ bản CN miễn phí (địa chỉ tải: https://www.trae.cn/). Hiện bản CN có hiệu quả sử dụng tốt hơn và hoàn toàn miễn phí. Nếu gặp vấn đề xếp hàng hoặc cần dịch vụ ổn định hơn, có thể cân nhắc kết nối mô hình bên thứ ba và mua Coding Plan tương ứng của nhà cung cấp cloud.
+
+#### 4.1.3 Giới thiệu nhanh giao diện Trae
+
+Về hình thái giao diện, Trae rất giống VS Code mà chúng ta thường dùng: vẫn là bố cục ba cột kinh điển với Explorer bên trái, vùng editor ở giữa và panel mở rộng bên phải.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png)
+
+Sidebar bên phải là cửa sổ tương tác Copilot, cũng có thể hiểu là cửa sổ Agent. Nếu tạm thời chưa thấy, bạn có thể bấm biểu tượng sidebar ở góc trên bên phải của Trae để mở.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png)
+
+Sau khi mở sidebar, bạn sẽ thấy tùy chọn `Builder`; đây chính là chế độ Agent. Hiểu đơn giản, nó tương đương "bản local" của z.ai, có thể giúp bạn thao tác môi trường trên máy, cài runtime, mở trang web, v.v.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png)
+
+Bấm "Builder", bạn sẽ thấy chế độ "Chat" và "Builder with MCP":
+
+- **Chế độ Chat**: chủ yếu dùng để trò chuyện với code trong thư mục hiện tại, hoặc dùng như một mô hình chat thông thường. Bạn có thể mở một thư mục qua menu "File" ở góc trên bên trái rồi chỉnh sửa trong thư mục đó. Trong trường hợp này, các tệp Builder tạo hoặc sửa chỉ xảy ra bên trong thư mục đó.
+- **Chế độ Builder with MCP**: cung cấp thêm công cụ cho Agent, ví dụ kết nối mô hình ngôn ngữ với phần mềm khác, tra thời tiết, v.v. Bạn có thể hiểu đơn giản: MCP giúp mô hình ngôn ngữ gọi nhiều công cụ bên ngoài thuận tiện hơn.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)
+
+Ở khu vực phía dưới, bạn còn thấy tùy chọn chọn mô hình; bấm vào là có thể đổi mô hình lớn đang dùng. Trong bản Trung Quốc, bạn có thể chọn các mô hình nội địa như Kimi k2 hoặc GLM; nếu dùng bản quốc tế của Trae, bạn cũng có thể chọn các mô hình nước ngoài như ChatGPT hoặc Claude. Tuy nhiên, do mô hình lớn trong nước phát triển rất nhanh, trải nghiệm thực tế của Kimi, Qwen, GLM trong nhiều nhiệm vụ đã gần với Claude 3.5 hoặc 3.7 và hoàn toàn đủ cho phát triển hằng ngày. Ở đây không bắt buộc dùng bản quốc tế hay bản nội địa.
+
+**Cần lưu ý rằng không khuyến nghị dùng chế độ Auto (tự chọn mô hình). Nếu là bản quốc tế, chúng tôi khuyến nghị dùng Gemini hoặc GPT; nếu là bản nội địa, khuyến nghị thử các mô hình trong nước như Kimi k2, MiniMax, GLM.** Mỗi mô hình có tình huống phù hợp khác nhau; không có quy tắc cứng nhắc rằng mô hình nào nhất định tốt hơn mô hình nào. Khi gặp nhiệm vụ khó chưa giải quyết được, bạn có thể đổi mô hình và qua nhiều lần thử nghiệm để tìm kết quả tốt nhất cho mình.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png)
+
+Trên đây là giới thiệu nhanh về Trae. Tiếp theo, chúng ta có thể nhìn lại thao tác đã làm trong z.ai trước đó và thử làm điều tương tự trong Trae.
+
+### 4.2 Bước 1: tạo thư mục rỗng và mở bằng AI IDE
+
+Trước khi bắt tay làm, chúng ta cần chuẩn bị một thư mục làm việc sạch cho dự án.  
+Trong ví dụ của mục này, bạn có thể tạo một thư mục rỗng tên là snake-game-react trên máy local.
+
+Sau đó, mở AI IDE đã cài, chọn mở thư mục hoặc Open Folder trên màn hình khởi động, rồi import thư mục rỗng đó làm thư mục gốc của dự án; bạn cũng có thể kéo trực tiếp thư mục vào cửa sổ IDE để mở. Lúc này, Explorer bên trái chưa có tệp code nào, nghĩa là chúng ta đang bắt đầu từ một trạng thái dự án hoàn toàn trống.
+
+::: details 📚 Tùy chọn: kết nối API hoặc Coding Plan của nhà cung cấp cloud
+
+Phần này giới thiệu cách kết nối API hoặc Coding Plan của nhà cung cấp cloud để có lượt gọi mô hình ổn định và thường xuyên hơn. Cuối phần sẽ có ảnh chụp cách kết nối trong Trae.
+
+**Coding Plan là gì**
+
+Coding Plan là gói đăng ký do các nhà cung cấp cloud lớn đưa ra. Sau khi mua, trong một khoảng thời gian nhất định bạn có thể **dùng API mô hình lớn của nhà cung cấp đó không giới hạn hoặc với tần suất cao**. So với cách tính phí theo Token, Coding Plan giống "gói thuê bao tháng" hơn: bạn trả một khoản cố định rồi có thể yên tâm dùng liên tục, không cần lo mỗi lần gọi đều bị tính tiền.
+
+**Vì sao cần mua Coding Plan**
+
+Bạn có thể hỏi: nếu đã có thể gọi mô hình lớn trực tiếp bằng API, vì sao còn cần mua Coding Plan? Lý do chính là: **có thể dùng liên tục**. Ưu điểm cốt lõi của Coding Plan là bạn có thể gọi mô hình lớn bất cứ lúc nào, với tần suất cao, không cần lo dùng nhiều khiến chi phí tăng vọt và cũng không phải liên tục kiểm tra bảng tính phí.
+
+**Coding Plan cloud nội địa được khuyến nghị**
+
+Dưới đây là một số lựa chọn Coding Plan do các nhà cung cấp cloud lớn trong nước cung cấp:
+
+- Zhipu AI (BigModel Plan): https://bigmodel.cn/glm-coding  
+- Volcengine (ByteDance Cloud AI Plan): https://www.volcengine.com/activity/codingplan
+
+> 💡 **Cũng có thể kết nối trực tiếp API mô hình lớn**
+> Ngoài Coding Plan, bạn cũng có thể kết nối API của các mô hình lớn thông qua Add Model. Bạn có thể tham khảo cách kết nối API miễn phí OpenRouter StepFun ở bên dưới để đưa API vào Trae sử dụng. Theo thử nghiệm, cách này đáp ứng được nhu cầu lập trình cơ bản.
+> Nếu cần nạp tiền, nên nạp thử 10 yuan trước để cảm nhận dùng được bao lâu, ví dụ các mô hình có hiệu quả chi phí cao như DeepSeek.
+
+**Cách kết nối Coding Plan**
+
+Các bước kết nối Coding Plan rất đơn giản, chỉ cần vài phút:
+
+1. Truy cập website chính thức của nhà cung cấp cloud bạn chọn, ví dụ Zhipu AI: https://bigmodel.cn/glm-coding hoặc Volcengine: https://www.volcengine.com/activity/codingplan
+2. Đăng ký tài khoản và đăng nhập
+3. Tìm trang "Pricing" hoặc "Coding Plan"
+4. Chọn gói phù hợp và hoàn tất thanh toán
+5. Sau khi thanh toán thành công, bạn sẽ nhận được API Key hoặc Plan ID
+
+::: tip 🎯 Gợi ý mô hình tùy chỉnh
+
+Khi kết nối mô hình tùy chỉnh trong Trae, chúng tôi **mặc định khuyến nghị dùng phương án OpenRouter**. OpenRouter cung cấp một API thống nhất, giúp kết nối nhiều mô hình ngôn ngữ lớn rất thuận tiện.
+
+**Tính đến ngày 2026-02-12, bạn vẫn có thể dùng API miễn phí của StepFun:**
+
+- **`stepfun/step-3.5-flash:free`**: mô hình miễn phí do StepFun cung cấp, cũng hỗ trợ kết nối trực tiếp trong Trae.
+
+**Các mô hình miễn phí khác:**
+
+- **`openrouter/free`**: đây là một tùy chọn mô hình mặc định dùng API LLM miễn phí, có thể dùng trực tiếp trong phần Custom Model của Trae. Chỉ cần viết vào model ID là được, không cần trả phí vẫn có thể trải nghiệm lập trình AI.
+
+Các lựa chọn miễn phí này rất phù hợp để người mới trải nghiệm. Trước khi dùng chính thức trong môi trường production, bạn có thể dùng các phương án miễn phí này để làm quen workflow của AI IDE.
+
+**Tùy chọn: kết nối API gọi mô hình lớn (lấy DeepSeek làm ví dụ)**
+
+1. Truy cập nền tảng DeepSeek: https://platform.deepseek.com/usage
+2. Đăng ký tài khoản và đăng nhập
+3. Mua gói Token 10 yuan trên trang nạp tiền
+4. Sau khi nạp thành công, tạo và sao chép API Key trên trang API Keys
+5. Trong Trae, bấm **"Add Model"**, tìm DeepSeek, chọn mô hình tương ứng, nhập API Key là có thể dùng
+
+Thông qua giao diện dưới đây, bạn có thể thêm thành công. Lưu ý: sau khi xem tùy chọn chọn mô hình, **nhất định phải cuộn xuống cuối cùng**. Bên dưới có mục "Custom Model"; bấm vào đó mới có thể nhập model ID. Lúc này có thể nhập trực tiếp model ID được khuyến nghị ở trên, ví dụ `stepfun/step-3.5-flash:free`. Đồng thời bấm nút lấy Key phía dưới để đi tới website chính thức, lấy API Key tương ứng rồi nhập vào là có thể dùng bình thường.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png)
+:::
+
+### 4.3 Bước 2: trò chuyện trong sidebar, để AI dùng React thiết kế trò Rắn săn mồi
+
+Tiếp theo, mở sidebar chat AI: thường là nhấn `Ctrl+L` hoặc bấm biểu tượng chat bên phải. Sau đó nhập một prompt đủ rõ trong khung chat:
+
+> Hãy dùng kiến trúc React để hiện thực trò Rắn săn mồi, gồm điều khiển bằng bàn phím, ăn thức ăn thì dài ra và cộng điểm, đâm tường hoặc đâm vào chính mình thì hiển thị "Game over" và hỗ trợ chơi lại. Sau khi hiện thực xong, hãy giúp tôi khởi động dự án này. Nếu gặp môi trường chương trình chưa cài đặt, hãy tự động cài môi trường còn thiếu.
+
+Trong quá trình này, bạn cần nhận ra AI không chỉ là mô hình chat; nó có thể giúp bạn thao tác môi trường trên máy: tạo tệp, cài dependency, thực thi lệnh khởi động, v.v. Bạn có thể trực tiếp mô tả mục tiêu bằng ngôn ngữ tự nhiên, còn AI sẽ quyết định cụ thể chạy lệnh nào và tổ chức code ra sao.
+
+Nếu trong quá trình thực thi gặp vấn đề, AI sẽ hiển thị lỗi và phương án xử lý trong cuộc trò chuyện. Bạn có thể tiếp tục yêu cầu nó điều chỉnh qua đối thoại, không cần tự nhớ mọi chi tiết lệnh.
+
+::: warning ⚠️ Cần lưu ý
+Như hình bên dưới, **đôi khi AI Agent sẽ tạm dừng trong quá trình thực thi vì nó đang chờ bạn nhập một số thông tin để tương tác**, ví dụ nhập tên cần tạo, nhấn Enter để xác nhận chạy lệnh hoặc bấm vào lệnh để thực thi. Thông thường, chúng ta chỉ cần nhấn Enter. Nếu bạn không chắc bước này cần làm gì, có thể chụp màn hình hiện tại và hỏi mô hình lớn nên thao tác thế nào.
+:::
+
+Như hình minh họa, ở đây chúng ta cần bấm Run để xác nhận:
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png)
+
+Như hình minh họa, ở đây chỉ cần nhập y để xác nhận:
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png)
+
+Như hình minh họa, ở đây chúng ta đang tạo template nhưng không biết thao tác ra sao; có thể chụp màn hình phần này và hỏi mô hình lớn:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png)
+
+Một lý do khác khiến AI Agent tạm dừng trong quá trình thực thi là lúc này đã khởi động một "service". Trò Rắn săn mồi của chúng ta về bản chất cũng là một loại "service". Nếu bạn thấy URL như trong lệnh dưới đây, nghĩa là Agent đã giúp chúng ta chạy một service local trên máy; chúng ta có thể truy cập URL tương ứng để mở trò Rắn săn mồi. Vì service cần tiếp tục chạy, giao diện sẽ rơi vào trạng thái tạm dừng. Lúc này chỉ cần bấm nút `Skip`.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png)
+
+Trong quá trình này, nếu gặp thuật ngữ hoặc nội dung không hiểu, đừng lo. Bạn có thể xem phần "giải thích thuật ngữ máy tính" trong phụ lục, hỏi trực tiếp AI hoặc đặt câu hỏi kịp thời.
+
+Nếu trong quá trình làm gặp hiện tượng không đúng kỳ vọng, ví dụ Rắn săn mồi đâm tường nhưng trò chơi không kết thúc, hoặc bấm bắt đầu mà rắn không di chuyển, lúc này bạn chỉ cần mô tả hiện tượng cho Agent trong sidebar. Nếu gặp lỗi, nhớ chụp màn hình hoặc sao chép lỗi vào sidebar Agent. Nếu nhiều lần vẫn không giải quyết được, hãy thử đổi mô hình.
+
+Chờ một lúc, chúng ta có thể nhận được kết quả tương tự z.ai:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png)
+
+Chúng ta có thể bấm dấu tick ở góc dưới bên phải để xác nhận thay đổi code, hoặc bấm nút `Cancel` để hủy thay đổi. Bạn cũng có thể bấm vào vị trí 2 files need review để mở ra xem code đã thay đổi.
+
+Điểm đáng chú ý nữa là sửa code không phải lúc nào cũng đúng, nên bạn cần biết Agent của các IDE đều hỗ trợ rollback code. Ví dụ, nếu ở đây tôi vô tình thực hiện một thay đổi sai, hoặc kết quả lần này khiến bạn không hài lòng, sau khi sửa xong chúng ta có thể quay lại phần ô nhập, bấm nút Revert để đưa thao tác về trạng thái trước khi sửa. Sau đó bạn có thể chỉnh lại prompt và thao tác lần nữa:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png)
+
+### 4.4 Bước 3 (tùy chọn): hỏi thêm AI về chi tiết hiện thực code
+
+Khi trò Rắn săn mồi đã chạy bình thường, nếu bạn chưa quen frontend hoặc React, có thể tiếp tục ở cùng cửa sổ chat và nhờ AI dẫn bạn xem code bằng cách nói càng đời thường càng tốt. Bạn không cần đổi công cụ, cũng không cần cố lật tài liệu; chỉ cần tiếp tục hỏi xoay quanh dự án hiện tại.
+
+Một cách khá thực dụng là để AI giải thích tổng thể trước "trò chơi vận hành như thế nào", rồi mới tách xuống chi tiết cụ thể. Ví dụ, bạn có thể hỏi trực tiếp:
+
+> "Hãy giải thích từ trên xuống dưới, từng bước trò Rắn săn mồi này vận hành như thế nào. Cố gắng dùng ít thuật ngữ chuyên môn."
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png)
+
+Sau đó tiếp tục hỏi sâu theo câu trả lời của nó, ví dụ:
+
+> "Mỗi đốt thân rắn trên màn hình được ghi bằng cấu trúc dữ liệu nào? Có thể ví dụ đời thường không?"  
+> "Bạn điều khiển việc 'một lúc di chuyển một lần' như thế nào? Đoạn đó nằm ở đâu trong code?"  
+> "Khi rắn ăn được thức ăn, bạn làm những bước nào? Logic nào dùng để xác định đã ăn được?"  
+> "Đâm tường và đâm vào chính mình được xác định trong những đoạn code nào?"
+
+Nếu bạn thấy một tệp nào đó, ví dụ `SnakeGame.tsx`, nhưng hoàn toàn không biết nó làm gì, cũng có thể yêu cầu AI giải thích theo từng khối:
+
+> "Hãy chia `SnakeGame.tsx` thành vài khối theo chức năng và giải thích mỗi khối phụ trách việc gì, dùng cách nói dễ hiểu."
+
+Trong vòng đối thoại này, mọi từ bạn không hiểu đều có thể trở thành điểm để hỏi tiếp, ví dụ:
+
+> "Từ 'state' bạn vừa nói cụ thể nghĩa là gì? Có thể dùng ví dụ trong đời sống để giải thích không?"  
+> "Timer ở đây chủ yếu dùng để làm gì? Nếu bỏ nó đi thì chuyện gì sẽ xảy ra?"
+
+Bằng cách này, mục tiêu của bạn không phải là ghi nhớ mọi khái niệm ngay lập tức, mà là làm rõ trước ba việc: trong trò chơi này có những dữ liệu cốt lõi nào, như rắn, thức ăn, điểm số, trạng thái trò chơi; các dữ liệu đó thay đổi vào thời điểm nào, như di chuyển, ăn được thức ăn, kết thúc trò chơi; và mỗi loại thay đổi tương ứng với đoạn code nhỏ nào. Chỉ cần thông được ba điểm này, về cơ bản bạn sẽ đọc hiểu được logic chính của code.
+
+### 4.5 Bước 4: để AI làm giao diện đẹp hơn một chút
+
+Ở đây cần nhắc trước một điều rất quan trọng với người mới: đừng chỉ nói với AI một câu "tôi muốn giao diện này đẹp hơn". Cách nói này với designer con người còn quá mơ hồ, huống chi với mô hình. "Đẹp" là phong cách gì, cần chỉnh chỗ nào, vấn đề nằm ở layout hay màu sắc, AI đều không thể đọc ra chỉ từ một câu đó. Để AI thực sự làm ra kết quả gần với kỳ vọng trong đầu bạn, bạn cần học cách tách mục tiêu mơ hồ như "tôi muốn đẹp hơn" thành một chuỗi yêu cầu cụ thể, có thể thực thi.
+
+Ví dụ, ban đầu nhiều người sẽ nói như sau:
+
+> "Tôi muốn làm giao diện này đẹp hơn một chút."
+
+Bạn có thể đưa ra trước một nhóm yêu cầu tổng thể:
+
+> "Hãy giúp tôi làm đẹp tổng thể giao diện trò chơi:
+>
+> - Vùng trò chơi hiển thị ở giữa, không dính vào góc trên bên trái;
+> - Đổi sang màu nền sáng hơn để rắn và thức ăn nổi bật hơn;
+> - Phóng to điểm số và đặt ở vị trí dễ thấy;
+> - Dùng xanh lam làm màu chủ đạo, làm đẹp phối màu tổng thể và nút bấm."
+
+Nếu muốn khi "game over" có phản hồi rõ hơn, có thể bổ sung:
+
+> "Khi trò chơi kết thúc, hãy hiển thị 'Game over' ở giữa màn hình, bên dưới có nút 'Chơi lại' để reset trò chơi."
+
+AI sẽ dựa trên mô tả của bạn để trực tiếp sửa component React và style. Sau khi lưu và refresh browser, bạn sẽ thấy giao diện mới. Nếu hiệu quả vẫn khác với tưởng tượng của bạn, có thể tiếp tục điều chỉnh từng bước nhỏ, ví dụ:
+
+> "Cho điểm số lớn hơn một chút, màu nổi hơn một chút."  
+> "Làm vùng trò chơi gọn hơn một chút, chừa một ít khoảng trắng xung quanh."  
+> "Đổi nút Chơi lại sang kiểu bo góc màu xanh lam, đặt ở giữa bên dưới thông báo."
+
+Ở giai đoạn này, nếu một lần sửa nào đó gây lỗi, bạn cũng không cần tự cố tra. Hãy sao chép trực tiếp thông báo lỗi vào cửa sổ chat, hoặc kèm một mô tả ngắn như "đây là lỗi xuất hiện sau khi tôi vừa làm đẹp giao diện", để AI định vị và sửa trong ngữ cảnh dự án hiện tại. Như vậy, bạn có thể trong vòng lặp "liên tục đối thoại, liên tục refresh" dần đánh bóng một demo chạy được thành một sản phẩm nhỏ có giao diện rõ ràng và tương tác mượt.
+
+### 4.6 (Tùy chọn) tham khảo kiến trúc z.ai để chỉnh kết quả Rắn săn mồi
+
+Với người mới làm vibe coding, điều khó nhất thường lại là không biết thế nào mới là "best practice", không biết kiến trúc nào phù hợp nhất. Vì chưa nắm nền tảng máy tính, bạn cũng khó dẫn dắt AI tốt. Cách giải quyết vấn đề này là "tham khảo trực tiếp". Bạn còn nhớ trước đó chúng ta nói trong z.ai có thể xem code không? Thực ra trong README tương ứng, tức phần dùng để giới thiệu chức năng và kiến trúc kỹ thuật của dự án, đã có một tham khảo kiến trúc khá tốt:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png)
+
+Nếu muốn kết quả local gần với kết quả của z.ai nhất có thể, chúng ta có thể sao chép toàn bộ nội dung README này, dán vào sidebar của Trae và yêu cầu nó sửa code local theo kiến trúc trong README.
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png)
+
+Cuối cùng, chúng ta có thể nhận được phong cách thiết kế trang rất giống z.ai:
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'Hiểu môi trường', description: 'Hiểu IDE và AI IDE' },
+      { title: 'Thực hành local', description: 'Dùng Trae làm Rắn săn mồi' },
+      { title: 'Giải thích công cụ', description: 'Làm quen giao diện IDE' },
+      { title: 'Kỹ năng giao tiếp', description: 'Trao đổi hiệu quả với AI' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 5. Mỗi nút trên giao diện dùng để làm gì
+
+Trong các thao tác trên, chúng ta đã nhanh chóng chạy thông vòng khép kín tối thiểu để tạo chương trình, nhưng vẫn chưa thể nói là đã quen IDE. Để thật sự làm quen với công cụ sẽ đồng hành lâu dài này, trong phần này chúng ta sẽ giải thích sâu từng chi tiết của IDE, bắt đầu từ giao diện. Giao diện của các AI IDE khác nhau có thể hơi khác, nhưng phần lớn đều kế thừa [bố cục của VS Code](https://code.visualstudio.com/docs/getstarted/getting-started).
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp)
+
+Tác dụng cụ thể của từng phần là:
+
+- **Title Bar (thanh tiêu đề)**: hiển thị tên tệp và nút điều khiển cửa sổ.
+- **Activity Bar (thanh hoạt động)**: chuyển giữa các view chức năng như file, search.
+- **Side Bar (sidebar)**: hiển thị danh sách tệp và nội dung cụ thể khác.
+- **Editor Groups (vùng editor)**: khu vực cốt lõi để viết code.
+- **Breadcrumbs (điều hướng đường dẫn)**: hiển thị đường dẫn tệp, hỗ trợ nhảy nhanh.
+- **Minimap (bản đồ thu nhỏ code)**: xem trước và định vị code nhanh.
+- **Panel (panel dưới)**: gồm terminal và cửa sổ output.
+- **Status Bar (thanh trạng thái)**: hiển thị trạng thái môi trường hiện tại.
+
+Để xem giải thích chi tiết hơn, hãy đọc [phần nguyên lý trực quan hóa IDE trong phụ lục](/vi-vn/appendix/2-development-tools/ide-basics).
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: 'Hiểu môi trường', description: 'Hiểu IDE và AI IDE' },
+      { title: 'Thực hành local', description: 'Dùng Trae làm Rắn săn mồi' },
+      { title: 'Giải thích công cụ', description: 'Làm quen giao diện IDE' },
+      { title: 'Kỹ năng giao tiếp', description: 'Trao đổi hiệu quả với AI' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 6. Nói chuyện với AI thế nào mới hiệu quả
+
+Khi năng lực AI ngày càng mạnh, nhiều việc trước đây phải "nhờ lập trình viên viết code" nay đã có thể giao cho AI hoàn thành.  
+Nhưng khi dùng thực tế, bạn sẽ thấy: cùng dùng một AI, có người chỉ nói vài câu đã nhận được một dự án nhỏ chạy được, có người trò chuyện rất lâu nhưng kết quả lại hoàn toàn không phải thứ mình muốn. Khác biệt thường không nằm ở "ai thông minh hơn", mà ở cách bạn nói với AI có đủ cụ thể và có đủ từng bước hay không.  
+Phần này xuất phát từ một số tình huống thường gặp, giới thiệu các cách đặt câu hỏi phù hợp với người mới hoàn toàn, giúp bạn ổn định hơn khi yêu cầu AI đưa ra kết quả dùng được.
+
+### 6.1 Nói rõ nhu cầu: từ "ý tưởng mơ hồ" đến "mô tả cụ thể"
+
+Nhiều người lần đầu dùng AI thường chỉ nói một câu rất chung chung, ví dụ:
+
+> "Giúp tôi làm một trang web."  
+> "Giúp tôi viết một ứng dụng nhỏ."
+
+Trong trường hợp này, AI chỉ có thể tự "đoán" bạn muốn gì, nên nó sẽ tùy tiện đưa ra một thứ trông có vẻ hoàn chỉnh, nhưng thường khác rất xa thứ bạn thật sự muốn làm.  
+Để AI hiểu ý bạn hơn, cần tách "ý tưởng trong đầu" ra và dùng vài câu nói rõ từng bước.
+
+Bạn có thể bổ sung từ các khía cạnh sau:
+
+1. **Nói cho nó biết bạn dùng thứ này để làm gì**  
+   Ví dụ, đừng chỉ nói "website cá nhân", mà hãy nói:
+   - "Tôi muốn làm một trang giới thiệu cá nhân chỉ có một trang, dùng để gửi cho nhà tuyển dụng xem."
+
+2. **Nói cho nó biết đại khái cần những phần nội dung nào**  
+   Không cần dùng thuật ngữ chuyên môn, chỉ cần mô tả bạn muốn trên trang xuất hiện gì, ví dụ:
+   - "Trang cần có ba phần: trên cùng là tên và một câu tự giới thiệu, giữa trang liệt kê vài kinh nghiệm làm việc, cuối trang đặt email và WeChat."
+
+3. **Nói cho nó biết trình độ và giới hạn của bạn**  
+   Để AI làm theo cách người mới có thể chấp nhận, ví dụ:
+   - "Tôi hoàn toàn không biết viết code, hãy dùng cách viết đơn giản nhất để tôi có thể copy trực tiếp vào một tệp và mở bằng browser."
+
+4. **Nói cho nó biết bạn muốn nhận kết quả theo cách nào**  
+   Ví dụ:
+   - "Hãy cho tôi code đầy đủ có thể lưu trực tiếp thành `index.html` và mở trong browser."
+
+Gộp lại, bạn có thể nói với AI như sau:
+
+> "Tôi hoàn toàn không biết viết code. Tôi muốn làm một trang giới thiệu cá nhân chỉ có một trang, dùng để gửi cho nhà tuyển dụng xem.  
+> Trang cần ba phần: phía trên là tên và một câu tự giới thiệu, ở giữa là vài kinh nghiệm làm việc, phía dưới là email và WeChat.
+
+Khi bạn nói rõ các thông tin này, AI sẽ tiến gần hơn đến nhu cầu thật của bạn, thay vì tùy tiện đưa một thứ "trông rất xịn nhưng không dùng được".
+
+### 6.2 Dùng đúng nhịp: trước hết "chạy được", rồi mới dần phức tạp
+
+Với người mới hoàn toàn, cái bẫy thường gặp nhất là: vừa bắt đầu đã muốn làm một thứ "rất hoàn chỉnh", "rất nhiều chức năng".  
+Ví dụ:
+
+> "Giúp tôi làm một website giống Taobao."  
+> "Giúp tôi làm một hệ thống có thể đăng ký, đăng nhập, đặt hàng."
+
+Kết quả thường là: AI đưa cho bạn một đống code lớn; sau khi copy, hoặc không mở được, hoặc lỗi khắp nơi. Bạn cũng không hiểu vấn đề nằm ở đâu, cuối cùng chỉ có thể bỏ cuộc.
+
+Cách phù hợp hơn là **chủ động kiểm soát nhịp**, để AI đi theo bạn từng bước, thay vì một lần ném hết mọi thứ cho bạn. Có thể yêu cầu theo thứ tự sau:
+
+1. **Bước 1: trước hết yêu cầu một "ví dụ tối thiểu"**  
+   Chỉ kiểm tra một việc: có nhìn thấy gì trong browser không.  
+   Ví dụ:
+
+   > "Hãy cho tôi một ví dụ đơn giản nhất trước, chỉ cần trong browser thấy một dòng 'Đây là trang chủ của tôi' là được.  
+   > Sau đó nói từng bước cho tôi: tệp nên đặt tên gì, lưu thế nào, mở thế nào."
+
+2. **Bước 2: trên nền đó, từ từ bổ sung nội dung đầy đủ**  
+   Khi bạn xác nhận "thật sự thấy dòng chữ đó", hãy nói tiếp:
+
+   > "Trên nền vừa rồi, hãy giúp tôi thêm một khu vực 'Kinh nghiệm làm việc' và gửi lại toàn bộ code đầy đủ. Đừng chỉ gửi phần thay đổi."
+
+3. **Bước 3: khi cấu trúc gần ổn, hãy nghĩ tiếp đến đẹp hay chưa**  
+   Ví dụ:
+   > "Hiện trang đã hiển thị nội dung bình thường. Tiếp theo hãy giúp tôi làm đẹp nhẹ: căn giữa tổng thể, tiêu đề lớn hơn, dùng font dễ chịu hơn. Hãy đưa code đầy đủ sau khi cập nhật."
+
+Mỗi lần thêm một bước, bạn hãy chạy thử một lần trước, xác nhận thật sự có thay đổi rồi mới để AI thêm tiếp. Như vậy, dù bước nào có vấn đề, bạn cũng có thể nhanh chóng quay về trạng thái "bản trước vẫn bình thường", thay vì phải làm lại từ đầu.
+
+### 6.3 Tận dụng ảnh chụp và copy: không biết nói thì "ném màn hình cho AI"
+
+Khó khăn của nhiều người mới hoàn toàn không nằm ở "không biết sửa code", mà nằm ở **không biết diễn đạt vấn đề thế nào**.  
+Ví dụ:
+
+- Browser đột nhiên hiện một đống lỗi tiếng Anh mà bạn hoàn toàn không hiểu.
+- Layout trang web khác với thứ bạn muốn, nhưng bạn cũng không biết dùng từ gì để mô tả.
+
+Trong các tình huống này, không cần cố nặn thuật ngữ chuyên môn. Cách đơn giản nhất là **đưa nguyên thứ bạn nhìn thấy cho AI**.
+
+Có thể làm như sau:
+
+1. **Copy chữ báo lỗi**  
+   Khi thấy một chuỗi thông báo lỗi màu đỏ, bạn có thể copy trực tiếp rồi nói:
+
+   > "Đây là toàn bộ thông tin lỗi xuất hiện sau khi tôi chạy. Tôi không hiểu tiếng Anh này; trước hết hãy giải thích bằng lời người bình thường có thể hiểu, đại khái nó nghĩa là gì.  
+   > Sau đó nói cho tôi cách sửa đơn giản nhất lúc này."
+
+2. **Cho AI xem ảnh chụp màn hình**
+   Nếu bạn cảm thấy "trang này nhìn không đúng", nhưng không biết mô tả, có thể:
+   - Chụp ảnh trang hiện tại;
+   - Copy toàn bộ đoạn code bạn đang dùng cho AI;
+   - Sau đó nói:
+     > "Đây là giao diện hiện tại, đây là toàn bộ code hiện tại của tôi.
+     > Ban đầu tôi muốn nó là layout ba cột, nhưng giờ lại thành một cột. Hãy giúp tôi xem nguyên nhân và đưa một bản code đầy đủ đã sửa."
+
+   ::: tip 💡 Bổ sung về chức năng ảnh chụp
+
+   Cần lưu ý: **không phải mô hình AI nào cũng hỗ trợ "xem ảnh"**. Điều này liên quan đến hai khái niệm khác nhau:
+
+   - **Mô hình ngôn ngữ lớn thuần văn bản (LLM)**: chỉ xử lý đầu vào văn bản, không thể nhận diện nội dung ảnh. Nếu bạn gửi ảnh chụp cho nó, nó hoặc từ chối xử lý, hoặc không thể hiểu đúng thông tin trong ảnh.
+
+   - **Mô hình đa phương thức**: có thể xử lý đồng thời nhiều loại đầu vào như văn bản, hình ảnh, có thể "hiểu" ảnh chụp bạn gửi và đưa gợi ý dựa trên nội dung ảnh.
+
+   **Tham khảo năng lực của một số mô hình thường gặp** (lấy các mô hình có thể chọn trong Trae làm ví dụ):
+
+   | Mô hình | Có hỗ trợ đầu vào ảnh không |
+   |------|-----------------|
+   | Dòng Doubao-Seed | ✅ Có |
+   | GLM-4.7 / 4.6 | ❌ Không |
+   | MiniMax-M2.7 / M2.5 | ❌ Không |
+   | DeepSeek-V3.1 | ❌ Không |
+   | Kimi-K2.5 | ✅ Có |
+   | Kimi-K2-0905 | ❌ Không |
+   | Qwen-3-Coder | ❌ Không |
+   | Dòng Gemini | ✅ Có |
+   | Dòng GPT | ✅ Có |
+
+   **Gợi ý sử dụng**: nếu bạn muốn dùng ảnh chụp để AI hỗ trợ kiểm tra vấn đề giao diện, hãy xác nhận trước mô hình bạn dùng có hỗ trợ đầu vào ảnh. Nếu không hỗ trợ, bạn có thể chuyển sang mô tả vấn đề bằng văn bản hoặc copy-paste thông tin lỗi cho AI.
+
+   :::
+
+3. **Gặp một trang web bạn thích và muốn làm tương tự**  
+   Không cần nói "layout này gọi là gì", hãy trực tiếp:
+   - Chụp ảnh hoặc copy tiêu đề, đoạn văn chính của trang đó;
+   - Rồi nói:
+     > "Tôi muốn làm một trang có cấu trúc gần giống thế này, không cần y hệt.  
+     > Hãy dùng code đơn giản hơn để dựng một khung tương tự, sau đó tôi sẽ tự thay chữ thành nội dung của mình."
+
+Nói đơn giản: bạn phụ trách "mang thứ mình thấy cho AI", rồi dùng lời mộc mạc nhất nói "tôi muốn nó thành thế nào"; phần còn lại như "dịch thành code, giải thích thuật ngữ, tìm vấn đề" thì giao cho AI.
+
+### 6.4 Khi code AI tạo ra không chạy: một quy trình xử lý chung
+
+Trong luyện tập thực tế, chắc chắn bạn sẽ gặp tình huống này:  
+AI rất nghiêm túc đưa bạn một đoạn code, bạn cũng thật thà copy vào, nhưng kết quả hoặc là browser trắng xóa, hoặc hoàn toàn không phải hiệu quả nó mô tả.  
+Điều này không có nghĩa là bạn "không học được", cũng không có nghĩa AI hoàn toàn sai; chỉ là giữa bạn và AI còn thiếu vài vòng "xác nhận qua lại".
+
+Khi code "không chạy", bạn có thể nói với AI theo quy trình cố định dưới đây:
+
+1. **Trước hết nói rõ "bạn đã làm gì + hiện tại trông thế nào"**  
+   Tránh chỉ nói "không mở được", "không được". Có thể mô tả như sau:
+
+   > Sau khi mở, trang hoàn toàn trắng, không hiển thị câu chào mừng bạn nói.
+   > Tôi đã mở trang xxxx, trong đó không có phần tôi vừa nói, nên chưa dùng được.
+
+2. **Gửi toàn bộ code hiện tại cho AI**  
+   Nhiều khi vấn đề nằm ở việc copy thiếu một dòng, hoặc nội dung lần trước và lần này bị trộn vào nhau.  
+   Bạn có thể nói:
+
+   > "Dưới đây là toàn bộ code trong tệp hiện tại của tôi.  
+   > Hãy so sánh xem có chỗ nào thiếu, viết sai hoặc sai thứ tự không.  
+   > Hãy trực tiếp đưa tôi một bản code đầy đủ đã sửa, đừng chỉ gửi một đoạn nhỏ."
+
+3. **Nếu có thông báo lỗi, hãy đưa kèm**  
+   Ví dụ lỗi bật lên ở góc trên bên phải browser, hoặc một số chữ đỏ ở phía dưới. Bạn có thể:
+   - Copy chữ lỗi ra;
+   - Hoặc chụp một tấm ảnh;
+   - Rồi nói:
+     > "Đây là thông báo lỗi tôi nhìn thấy. Tôi hoàn toàn không hiểu; hãy trước hết giải thích đơn giản đây đại khái là vấn đề gì, rồi nói cho tôi hiện cần sửa mấy dòng nào nhất."
+
+4. **Yêu cầu đối phương dùng "chế độ người mới" để nói từng bước**  
+   Bạn có thể trực tiếp nói rõ tình trạng của mình để nó đừng bỏ qua bước trung gian:
+
+   > "Tôi hoàn toàn không biết viết code, hãy nói từng bước cho tôi:  
+   > Bước 1 cần sửa dòng nào,  
+   > Bước 2 cần lưu thế nào,  
+   > Bước 3 cần mở lại hoặc refresh trang thế nào.  
+   > Mỗi bước hãy viết bằng câu hoàn chỉnh."
+
+5. **Cuối cùng, nhờ nó làm đối chiếu "đáng lẽ phải thấy gì"**  
+   Ví dụ:
+   > Trước hết hãy nói, theo code bạn đã sửa, trong trường hợp bình thường khi mở trang web tôi nên thấy nội dung gì.
+
+Chỉ cần bạn tương tác với AI theo quy trình này, phần lớn tình huống "code không chạy" đều có thể giải quyết sau vài vòng qua lại.  
+Đồng thời, bạn cũng sẽ dần quen các loại vấn đề thường gặp; lần sau gặp tình huống tương tự có thể tự xử lý trực tiếp.
+
+## 7. Tóm tắt và bước tiếp theo
+
+Trong chương này, bạn đã hoàn thành một lần nâng cấp: từ "có thể chơi một trò Rắn săn mồi do AI tạo trên web" đến "có thể tự dùng AI IDE ở local dựng một trò chơi nhỏ". Bạn đã đại khái hiểu ba việc: vì sao viết code không thể thiếu một IDE như VS Code; trên nền đó, khi thêm AI như Trae, Cursor, IDE không còn chỉ là hộp công cụ, mà có thêm một "thực tập sinh kỹ sư" hiểu ngôn ngữ tự nhiên, giúp bạn tạo tệp, cài môi trường và sửa code; cũng như mỗi khu vực trên giao diện IDE, như tệp bên trái, terminal phía dưới, vùng editor ở giữa, panel AI bên phải, phụ trách việc gì, để khi dùng không còn mù mờ.
+
+Quan trọng hơn, bạn đã thực sự chạy thông một quy trình đầy đủ: tạo thư mục rỗng trên local → mở bằng AI IDE → mô tả nhu cầu trong sidebar chat → để AI tạo dự án và khởi động dev server → khi có vấn đề, đưa "hiện tượng + toàn bộ code + ảnh lỗi" cho AI và nhờ nó dùng "chế độ người mới" sửa từng bước. Trong quá trình đó, bạn cũng luyện cách viết prompt hiệu quả hơn: nói rõ mục tiêu, cấu trúc nội dung và trình độ của mình, kiểm soát nhịp tốt, từ "trước hết chạy được" đến "sau đó đẹp hơn, vui hơn".
+
+Chương tiếp theo, chúng ta sẽ chuyển trọng tâm từ "biết dùng công cụ" sang "làm một prototype thật sự có người muốn dùng": xuất phát từ góc nhìn người dùng, thiết kế luật chơi, tương tác và phản hồi, rồi để AI giúp bạn biến các ý tưởng đó thành hình hài sản phẩm ban đầu.
+
+## 8. 📚 Bài tập: dùng AI IDE local làm một trò chơi phức tạp hơn
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 Thử thách: tạo trò chơi riêng của bạn</div>
+  </template>
+
+  <p>
+    Bạn đã dùng AI IDE local làm một trò Rắn săn mồi. Bây giờ hãy thử thách bản thân với một trò chơi nhỏ phức tạp hơn và đi trọn quy trình "mô tả nhu cầu →
+    tạo dự án → chạy local → debug và lặp".
+  </p>
+
+  <ol>
+    <li>
+      <strong>Chọn một trò chơi phức tạp hơn Rắn săn mồi</strong>
+      <ul>
+        <li>Có thể là Tetris, Đập chuột, Minesweeper, 2048, bắn máy bay, v.v.</li>
+        <li>Hoặc một trò chơi gốc đơn giản do bạn tự tưởng tượng</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Phải dùng AI IDE local để hoàn thành toàn bộ quá trình</strong>
+      <ul>
+        <li>Tạo một thư mục rỗng và mở bằng AI IDE</li>
+        <li>Mô tả rõ nhu cầu trò chơi trong sidebar chat</li>
+        <li>Để AI phụ trách tạo tệp, dựng cấu trúc dự án và hiện thực logic chính</li>
+        <li>Khởi động dev server trên local, đảm bảo trò chơi chạy bình thường</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Có "khả năng chơi" và phản hồi cơ bản</strong>
+      <ul>
+        <li>Ít nhất gồm ba trạng thái: bắt đầu, đang chơi, kết thúc</li>
+        <li>Người chơi có cách thao tác rõ ràng, bằng bàn phím hoặc chuột</li>
+        <li>Trên màn hình có phản hồi điểm số hoặc tiến độ rõ ràng</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Ít nhất thực hiện hơn 2 vòng lặp</strong>
+      <ul>
+        <li>Vòng đầu để AI làm ra bản "chơi được"</li>
+        <li>Từ vòng thứ hai trở đi, từng bước đưa ra cải tiến cụ thể, như style, độ khó, tối ưu tương tác</li>
+      </ul>
+    </li>
+  </ol>
+</el-card>
+
+<RelatedArticlesSection
+  title="Tiếp tục học"
+  description="Nên đi vào thực hành prototype trước, rồi từng bước kết nối năng lực AI."
+  :items="relatedArticles"
+/>
+
+# Phụ lục
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
+  <div style="font-weight: bold; margin-bottom: 8px;">Điều hướng phụ lục</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    Đây là tài liệu bổ sung để tra cứu khi cần: khi gặp thuật ngữ không hiểu hoặc không tìm thấy lối vào giao diện, hãy quay lại đây.
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1-map" style="text-decoration: none; color: inherit;"><b>Phụ lục 1: bảng tra nhanh thuật ngữ máy tính thường gặp</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Khi thấy thuật ngữ máy tính không hiểu, hãy đến đây tra nhanh ý nghĩa. Nên đọc lướt một lần.</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="/vi-vn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Phụ lục 2: giải thích thanh menu Visual Studio Code</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Khi không biết giao diện AI IDE dùng để làm gì, hãy dùng nội dung dưới đây để hỏi AI hoặc trực tiếp đọc.</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    Hỗ trợ: nhấn Ctrl/⌘+F để tìm từ khóa; khi gặp từ mới, có thể copy lỗi và nhờ AI giải thích bằng "chế độ người mới".
+  </div>
+</el-card>
+
+# Phụ lục 1: bảng tra nhanh thuật ngữ máy tính thường gặp
+
+<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: bold; margin-bottom: 10px;">🗺️ Bản đồ thuật ngữ: bạn sẽ gặp ở đây...</div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;">🖥️ <b>Giao diện công cụ</b></a><br/>
+      <span style="font-size: 12px; color: #909399">IDE / terminal / panel</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-network" style="text-decoration: none; color: inherit;">🌐 <b>Dịch vụ mạng</b></a><br/>
+      <span style="font-size: 12px; color: #909399">URL / port / local</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;">⚙️ <b>Frontend và backend</b></a><br/>
+      <span style="font-size: 12px; color: #909399">API / JSON / interface</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-code-basic" style="text-decoration: none; color: inherit;">📝 <b>Nền tảng code</b></a><br/>
+      <span style="font-size: 12px; color: #909399">biến / hàm / component</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" style="margin-top: 10px;">
+    <el-col :span="6">
+      <a href="#term-debug" style="text-decoration: none; color: inherit;">🐞 <b>Debug và tìm lỗi</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Bug / breakpoint / log</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-project" style="text-decoration: none; color: inherit;">📂 <b>Quản lý dự án</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Git / repository / commit</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;">🤖 <b>Công cụ AI</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Agent / model / key</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-browser" style="text-decoration: none; color: inherit;">🛠️ <b>Browser</b></a><br/>
+      <span style="font-size: 12px; color: #909399">DevTools / Console</span>
+    </el-col>
+  </el-row>
+</el-card>
+
+Phần này không cần cố học thuộc; điều quan trọng hơn là tạo trước một ấn tượng trong đầu.
+
+## <span id="term-tool-ui">[1. Các từ liên quan đến "giao diện công cụ"](#appendix-1-map)</span>
+
+### 1. IDE, editor, terminal
+
+**IDE (môi trường phát triển tích hợp)**  
+Có thể tưởng tượng IDE như "bàn làm việc của lập trình viên":
+
+- Một bên là mặt bàn để viết chữ (editor),
+- Một bên có ổ cắm điện và nút bấm (chạy, debug),
+- Trong ngăn kéo có nhiều công cụ nhỏ (tìm kiếm, quản lý phiên bản).  
+  VS Code, Trae, Cursor đều thuộc IDE hoặc là công cụ được sửa đổi dựa trên IDE.
+
+**Code editor (Editor)**  
+Giống "Notepad cao cấp" hơn, chỉ phụ trách:
+
+- Cho bạn gõ code;
+- Dùng màu để phân biệt nội dung khác nhau (syntax highlighting);
+- Tự động hoàn thành cho bạn.  
+  Khu vực viết code trong IDE chính là code editor.
+
+**Terminal / dòng lệnh (Terminal / cửa sổ dòng lệnh)**  
+Một cửa sổ nền đen chữ trắng, nơi bạn **nhập lệnh** để máy tính làm việc:
+
+- Ví dụ: `npm run dev` nghĩa là "giúp tôi khởi động dev server";
+- `python main.py` nghĩa là "chạy tệp Python này".  
+  Có thể tưởng tượng nó là: "bạn gửi từng tin nhắn lệnh cho máy tính, máy tính trả lời kết quả bằng chữ".
+
+### 2. Một số khu vực thường gặp trong IDE
+
+**Activity Bar (thanh hoạt động)**  
+Dãy biểu tượng nhỏ nằm dọc ngoài cùng bên trái, giống "tab chức năng":
+
+- Bấm biểu tượng file → bên trái hiển thị danh sách tệp;
+- Bấm biểu tượng kính lúp → bên trái chuyển thành tìm kiếm;
+- Bấm biểu tượng Git → bên trái hiển thị quản lý phiên bản.
+
+**Side Bar (sidebar)**  
+Khu vực lớn bên phải Activity Bar, chuyên hiển thị nội dung trong chế độ hiện tại:
+
+- Chế độ file: hiển thị tệp và thư mục trong dự án;
+- Chế độ tìm kiếm: hiển thị danh sách kết quả tìm kiếm;
+- Chế độ source control: hiển thị những tệp đã bị thay đổi.
+
+**Editor (vùng chỉnh sửa)**  
+Khu vực lớn nhất ở giữa, là nơi bạn thực sự xem và sửa nội dung sau khi mở tệp;  
+Các tab phía trên cho biết "hiện đang mở những tệp nào".
+
+**Panel (panel phía dưới)**  
+Thường nằm ở phía dưới cùng, có vài loại thường gặp:
+
+- Terminal: nhập lệnh để chạy dự án;
+- Problems: liệt kê tệp và số dòng có lỗi;
+- Output: thông tin chạy do một số công cụ in ra;
+- Debug Console: output khi debug.
+
+**Status Bar (thanh trạng thái)**  
+Thanh mảnh ở dưới cùng:
+
+- Hiển thị tệp hiện tại là ngôn ngữ gì (JS, HTML, Python, v.v.);
+- Hiển thị indent là "2 spaces" hay "4 spaces";
+- Hiển thị có lỗi hay không, nhánh Git hiện tại là gì.  
+  Có thể xem nó như "một phiếu khám nhanh của môi trường chỉnh sửa hiện tại".
+
+## <span id="term-network">[2. Các từ liên quan đến "trang web / mạng / service"](#appendix-1-map)</span>
+
+### 1. URL, HTTP, port, service local
+
+**URL (địa chỉ web)**  
+Là chuỗi trong thanh địa chỉ browser, ví dụ:
+
+- `https://www.trae.cn/`
+- `http://localhost:3000/`  
+  Nó giống "địa chỉ đầy đủ của một căn phòng trong thế giới internet".
+
+**HTTP / HTTPS**  
+Là `http://` hoặc `https://` bạn thấy ở đầu URL:
+
+- HTTP: cách truyền tải thông thường;
+- HTTPS: thêm một lớp mã hóa, an toàn hơn.  
+  Bạn có thể tạm nhớ: "khi viết địa chỉ web, thường bắt đầu bằng `http` hoặc `https`".
+
+**Port (cổng)**  
+Có thể tưởng tượng một máy tính là một tòa nhà, còn port là **số phòng của từng phòng**:
+
+- `:3000` nghĩa là phòng số 3000;
+- Trên cùng một máy tính, có thể mở nhiều service cùng lúc, mỗi service chiếm một port.  
+  `http://localhost:3000` nghĩa là "truy cập service đang chạy trong phòng số 3000 trên chính máy tính của tôi".
+
+**Local / localhost (máy cục bộ)**  
+Chỉ chính máy tính của bạn.
+
+- `localhost` có thể hiểu là "chính máy này".  
+  Khi bạn truy cập `http://localhost:3000`, thực ra bạn đang tương tác với chương trình chạy trên máy của mình, không phải lên mạng truy cập server của người khác.
+
+**Service / Server (dịch vụ / máy chủ)**  
+"Service" là một chương trình **luôn chạy ở background và sẵn sàng nghe chỉ dẫn của bạn**:
+
+- Web service: khi browser truy cập một địa chỉ, nó trả về nội dung trang web;
+- Game service: phụ trách quản lý ván chơi, lưu trữ, bảng xếp hạng, v.v.  
+  Chạy `npm run dev` trong terminal để khởi động dự án, về bản chất là "mở một web service trên local".
+
+## <span id="term-frontend-backend">[3. Các từ liên quan đến "frontend / backend / dữ liệu"](#appendix-1-map)</span>
+
+### 1. Frontend, backend
+
+**Frontend (phần giao diện người dùng)**  
+Phần người dùng **nhìn thấy và bấm được**:
+
+- Nút, chữ, hình ảnh, animation trên trang web;
+- Trang được viết bằng React / Vue.  
+  Phụ trách hiển thị giao diện và phản hồi thao tác người dùng như click, nhập, kéo thả.
+
+**Backend (phần phía máy chủ)**  
+Phần người dùng **không nhìn thấy**, chạy trên server:
+
+- Lưu và đọc dữ liệu (thông tin người dùng, đơn hàng, điểm số, v.v.);
+- Thực thi quy tắc nghiệp vụ (xác thực đăng nhập, kiểm tra quyền).  
+  Bạn có thể ví frontend là "mặt tiền cửa hàng và nhân viên", backend là "kho hàng và hệ thống sổ sách".
+
+### 2. Interface, request, response, JSON
+
+**Interface / API**  
+Một bộ quy tắc "hỏi câu hỏi + trả câu trả lời" mà frontend và backend đã thống nhất trước.
+
+- Frontend nói: "Tôi dùng địa chỉ này, định dạng này để hỏi bạn";
+- Backend nói: "Tôi dùng định dạng này để trả kết quả cho bạn".
+
+**Request (yêu cầu)**  
+Một lần "đặt câu hỏi" frontend gửi cho backend:
+
+- Gửi đến đâu (URL);
+- Dùng phương thức gì (GET, POST, v.v.);
+- Mang theo tham số gì (ví dụ user ID).
+
+**Response (phản hồi)**  
+"Câu trả lời" backend gửi cho frontend:
+
+- Status code (200 thành công, 404 không tìm thấy, 500 lỗi server);
+- Dữ liệu thực tế, đa số là JSON.
+
+**JSON**  
+Một định dạng biểu diễn dữ liệu bằng cách viết **rất giống JavaScript code**, ví dụ:
+
+```json
+{
+  "name": "Alice",
+  "score": 120
+}
+```
+
+Có thể hiểu là "sổ ghi key-value phiên bản cho máy", frontend và backend thường dùng nó để trao đổi dữ liệu.
+
+## <span id="term-code-basic">[4. Các từ liên quan đến "bản thân việc viết code"](#appendix-1-map)</span>
+
+### 1. Biến, định danh, state
+
+**Variable (biến)**  
+"Nhãn dán lên một phần dữ liệu".
+
+- Ví dụ ghi việc điểm số thành `score`;
+- Sau này dùng tên `score` là có thể đọc và ghi phần dữ liệu này:
+
+```js
+let score = 0
+score = score + 10
+```
+
+**Identifier (định danh)**  
+"Tên gọi chung cho mọi loại tên bạn tự đặt":
+
+- Tên biến: `score`
+- Tên hàm: `moveSnake`
+- Tên component: `SnakeGame`  
+  Giống như đặt tên thư mục "Ảnh", "Công việc", "Hóa đơn", để tiện phân biệt các "thứ" khác nhau trong code.
+
+**State (trạng thái)**  
+"Bản ghi tình huống quan trọng hiện tại" của chương trình:
+
+- Trò chơi đã kết thúc chưa;
+- Rắn hiện đang ở ô thứ mấy;
+- Điểm hiện tại là bao nhiêu.  
+  Trong React, có thể hiểu đơn giản: **state thay đổi thì giao diện cũng phải cập nhật theo**.
+
+### 2. Hàm, component, module
+
+**Function (hàm)**  
+Đóng gói một việc "có thể làm lặp đi lặp lại" và đặt tên cho nó:
+
+```js
+function sayHello(name) {
+  console.log('Hello, ' + name)
+}
+```
+
+Sau này chỉ cần viết `sayHello('Bob')`, tương đương thực thi lại mấy dòng bên trong.
+
+**Component (thành phần)**  
+"Một mảnh giao diện nhỏ + logic nhỏ có thể tái sử dụng" trong frontend:
+
+- Một nút có thể là component;
+- Một thanh điều hướng trên cùng có thể là component;
+- Toàn bộ khu vực trò chơi cũng có thể là một component.  
+  Các component có thể lắp ghép với nhau, giống xếp Lego.
+
+**Module (mô-đun)**  
+"Một tệp gồm một nhóm code liên quan":
+
+- `snakeLogic.ts` chuyên đặt code liên quan đến "rắn di chuyển thế nào";
+- `score.ts` chuyên đặt code tính điểm.  
+  Các module có thể "import / export" lẫn nhau, giống công cụ trong các ngăn kéo khác nhau.
+
+### 3. Cú pháp, ngôn ngữ lập trình, framework
+
+**Syntax (cú pháp)**  
+"Quy tắc ngữ pháp" và "thói quen dấu câu" của một ngôn ngữ lập trình:
+
+- Chuỗi phải đặt trong dấu ngoặc;
+- Cuối mỗi câu lệnh có cần viết dấu chấm phẩy hay không;
+- Khối code phải bọc bằng `{}`.  
+  Viết sai cú pháp, compiler / interpreter sẽ báo "syntax error" trực tiếp.
+
+**Programming Language (ngôn ngữ lập trình)**  
+Một bộ quy tắc và từ vựng đầy đủ để giao tiếp với máy tính, ví dụ:
+
+- JavaScript、Python、Java、C++、Go……  
+  Các ngôn ngữ khác nhau phù hợp với việc khác nhau, cách viết và hệ sinh thái công cụ cũng khác nhau.
+
+**Framework (khung phát triển)**  
+Một bộ code và quy ước lớn mà người khác đã "dựng sẵn khung" cho bạn:
+
+- Frontend: React, Vue (giúp xử lý cập nhật giao diện, quản lý state, v.v.);
+- Backend: Django, Spring Boot, v.v.  
+  Bạn tương đương đang "điền nội dung vào bộ khung có sẵn", nhẹ hơn nhiều so với tự làm từ đầu.
+
+## <span id="term-debug">[5. Các từ liên quan đến "debug / tìm lỗi"](#appendix-1-map)</span>
+
+### 1. Bug, thông báo lỗi, log / console.log
+
+**Bug**  
+Khi chương trình hoạt động khác với điều bạn nghĩ, đó là bug:
+
+- Lẽ ra phải xuất hiện nút, nhưng kết quả không có;
+- Lẽ ra phải cộng 10 điểm, nhưng lại cộng thêm một đống;
+- Vừa mở trang là màn hình trắng.
+
+**Error Message (thông báo lỗi)**  
+Đoạn tiếng Anh "trông rất đáng sợ" trên màn hình hoặc trong terminal sau khi chương trình sập.  
+Dù khó nhìn, nó thường sẽ cho bạn biết:
+
+- Đại khái lỗi ở đâu;
+- Cần kiểm tra gần tệp nào, dòng nào.  
+  Bạn có thể copy trực tiếp và đưa cho AI dịch, phân tích.
+
+**Log (nhật ký)**  
+Những điều chương trình tự "nói" trong quá trình chạy.  
+Phổ biến nhất trong frontend là:
+
+```js
+console.log('Điểm hiện tại', score)
+```
+
+Có thể hiểu là: **chủ động báo một con số ở bước quan trọng, giúp bạn xác nhận chương trình có đi theo đúng ý mình không**.
+
+> **console.log là gì?**
+>
+> - `console` có thể hiểu là "bảng đen nhỏ dùng để debug";
+> - `.log` là "viết một dòng chữ lên bảng đen nhỏ";
+> - Trong browser, nhấn F12 để mở panel Console trong DevTools là có thể thấy các output này.
+
+### 2. Debug, breakpoint, step, snapshot
+
+**Debug (gỡ lỗi / debug chương trình)**  
+Khi chương trình có vấn đề, đừng vừa vào đã sửa lung tung, mà hãy:
+
+- Cho chương trình dừng ở một dòng nào đó (breakpoint);
+- Xem giá trị hiện tại của từng biến;
+- Đi từng bước xuống dưới, quan sát "bắt đầu sai từ đâu".
+
+**Breakpoint (điểm dừng)**  
+Có thể tưởng tượng breakpoint là "gắn một nút tạm dừng ở dòng này":
+
+- Bình thường chương trình chạy thẳng xuống;
+- Khi chạy đến dòng bạn đặt breakpoint, nó sẽ tạm dừng để bạn kiểm tra.
+
+**Step (thực thi từng bước)**  
+Sau khi dừng ở breakpoint, bạn có thể chọn:
+
+- Thực thi từng dòng xuống dưới (step over);
+- Đi vào bên trong một hàm để xem chi tiết (step into).  
+  Giống như xem động tác nhảy được tách từng bước, thay vì xem video tua nhanh.
+
+**Snapshot: cách hiểu đơn giản**  
+Ở đây, "snapshot" có thể hiểu là:
+
+> **Tại một thời điểm, chụp một bức ảnh của "trạng thái hiện tại" để tiện so sánh sau này.**  
+> Trong công cụ thực tế, "snapshot" có thể chỉ:
+
+- Trạng thái đầy đủ của dự án tại thời điểm một lần commit;
+- Tình trạng tổng thể của memory / biến tại một thời điểm khi debug.  
+  Tạm thời bạn chỉ cần nhớ ẩn dụ này là đủ: **snapshot ≈ ảnh lưu lại trạng thái ở một khoảnh khắc**.
+
+## <span id="term-project">[6. Các từ liên quan đến "quản lý dự án"](#appendix-1-map)</span>
+
+### 1. Project, workspace, thư mục
+
+**Project (dự án)**  
+Những thứ được đặt trong cùng một thư mục để hiện thực một ứng dụng:
+
+- Tệp mã nguồn
+- Tệp cấu hình
+- Tài nguyên như hình ảnh, âm thanh, v.v.
+
+**Workspace (không gian làm việc)**  
+Khái niệm VS Code / Trae dùng để mô tả "lần này đang mở một nhóm thứ gì":
+
+- Mở một thư mục → một workspace đơn giản;
+- Đôi khi cũng có thể gộp nhiều thư mục thành một workspace nhiều dự án.
+
+### 2. Git, repository, commit
+
+**Git (công cụ quản lý phiên bản)**  
+Có thể hiểu là "cỗ máy thời gian" của dự án:
+
+- Mỗi lần sửa xong một nhóm nội dung, có thể "chụp một bức ảnh phiên bản";
+- Sau này khi cần, có thể quay về một trạng thái lịch sử nào đó.
+
+**Repository / Repo (kho mã nguồn)**  
+Sau khi bật Git, thư mục dự án có "bản ghi phiên bản" đó được gọi là repository.
+
+**Commit (lần ghi nhận thay đổi)**  
+Mỗi lần bạn thấy "đợt thay đổi này coi như một kết quả theo giai đoạn", bạn có thể:
+
+- Viết một dòng mô tả, ví dụ `Add score panel`;
+- Đóng gói toàn bộ thay đổi hiện tại thành một phiên bản;
+- Git sẽ lưu trạng thái khoảnh khắc này lại.  
+  Hành động này gọi là "tạo một commit".
+
+## <span id="term-ai-tool">[7. Các từ liên quan đến "công cụ phát triển AI"](#appendix-1-map)</span>
+
+### 1. AI IDE, Agent, chế độ SOLO
+
+**AI IDE**  
+Trên nền IDE thông thường, thêm một lớp AI "hiểu tiếng người và tự ra tay làm":
+
+- Bạn nói "làm trò Rắn săn mồi", nó có thể giúp dựng dự án và viết code;
+- Bạn đưa ảnh lỗi cho nó, nó có thể giải thích trước rồi thử sửa;
+- Nó có thể sửa đồng thời qua nhiều tệp, không chỉ hoàn thành từng dòng.
+
+**Agent (tác nhân thông minh)**  
+Có thể tưởng tượng Agent là một **kỹ sư AI nhỏ luôn chờ lệnh**:
+
+- Biết đọc cấu trúc dự án của bạn;
+- Biết chia nhỏ nhiệm vụ (cài dependency trước, rồi tạo code, rồi chạy dự án);
+- Sau khi chạy lỗi, biết tự điều chỉnh phương án theo thông tin lỗi.
+
+**Chế độ SOLO (lấy Trae làm ví dụ)**  
+Nghĩa là:
+
+> Bạn chỉ cần nói rõ "đích đến",  
+> nó tự lập kế hoạch "đường đi",  
+> từng bước thực thi trên local,  
+> giữa đường chỉ hỏi bạn có muốn tiếp tục ở các nút quan trọng.
+
+### 2. Model, key (API Key)
+
+**Model (ở đây chỉ mô hình ngôn ngữ lớn)**  
+Từ này có thể hiểu đơn giản là "bộ não AI lớn ở phía sau":
+
+- Ví dụ GPT, Claude, Kimi, GLM, v.v.;
+- Các mô hình khác nhau có trình độ khác nhau ở "hiểu tiếng Trung", "viết code", "suy luận";
+- Trong AI IDE, thường có thể đổi mô hình khác nhau trong menu xổ xuống.
+
+**Key / API Key**  
+Bạn có thể hiểu API Key là **một "mật khẩu cao cấp + số định danh" rất dài**,  
+tác dụng của nó chỉ có một:
+
+> Nói với server của người khác: "Tôi là người dùng nào, xin cho phép tôi dùng dịch vụ AI của bạn và ghi nhận chi phí cho tôi."
+
+Vài điểm chính:
+
+- Chuỗi này thường là một dãy chữ cái và số ngẫu nhiên rất dài;
+- Không được gửi lên nơi công khai như repository, ảnh chụp màn hình, group chat; người khác lấy được là có thể giả mạo tài khoản của bạn;
+- Điền API Key vào công cụ tương đương "cắm chìa khóa vào ổ", sau đó công cụ có thể giúp bạn gọi dịch vụ AI tương ứng.
+
+## <span id="term-browser">[8. Các từ liên quan đến "browser / DevTools"](#appendix-1-map)</span>
+
+**Chrome (Google Chrome)**  
+Một trong những browser được dùng phổ biến nhất trong phát triển frontend hiện nay:
+
+- Mở trang web nhanh;
+- Có sẵn "DevTools" khá mạnh, tiện kiểm tra vấn đề.
+
+**Refresh / Reload (làm mới / tải lại)**  
+Tải lại trang web hiện tại:
+
+- Sau khi sửa code frontend, nếu không có công cụ tự refresh, cần tự bấm refresh mới thấy hiệu quả.
+
+**DevTools (công cụ dành cho lập trình viên)**  
+Một nhóm panel công cụ trong browser dành riêng cho lập trình viên:
+
+- Xem cấu trúc trang web (Elements);
+- Xem style (Styles);
+- Kiểm tra lỗi và log (Console);
+- Kiểm tra request mạng (Network).  
+  Trong Chrome, thường nhấn `F12` hoặc `Ctrl+Shift+I` để mở.
+
+**Console (bảng điều khiển)**  
+Một tab trong DevTools, chuyên hiển thị:
+
+- Output của `console.log(...)` bạn viết;
+- Lỗi xảy ra trong quá trình chạy, thường là chữ đỏ.  
+  Bạn có thể xem nó là "khung chat của chương trình":
+- Khi chương trình có điều muốn nói, nó viết ở đây;
+- Khi debug, đây là phần bạn thường xem nhất.
+
+Nếu sau này trong quá trình học bạn lại gặp từ mới, cũng có thể yêu cầu AI hỗ trợ bổ sung toàn bộ nội dung theo phong cách này:
+
+- Trước hết viết một câu "nó dùng để làm gì";
+- Sau đó viết một câu "có thể tưởng tượng nó là gì";
+- Cuối cùng đưa một ví dụ thật đơn giản.  
+  Như vậy, "bảng thuật ngữ cá nhân" của bạn sẽ ngày càng dài và hữu dụng, dần giúp bạn giao tiếp với máy tính tốt hơn.
+---
+title: 'So cap 2: Cong cu lap trinh voi AI'
+description: 'Chuyen tu AI tren web sang lam viec local: hieu IDE vs AI IDE, lam game ran san moi voi Trae va nang ky nang noi chuyen voi AI.'
+---
diff --git a/docs/vi-vn/stage-1/learning-map/index.md b/docs/vi-vn/stage-1/learning-map/index.md
new file mode 100644
index 0000000..1c30cc3
--- /dev/null
+++ b/docs/vi-vn/stage-1/learning-map/index.md
@@ -0,0 +1,275 @@
+---
+title: 'Từ ý tưởng đến sản phẩm AI - Lộ trình học tập Easy-Vibe'
+description: 'Lộ trình học tập lập trình AI hoàn chỉnh: từ người mới bắt đầu đến phát triển full-stack. Làm chủ Vibe Coding, Claude Code, Cursor và các công cụ AI IDE, học tư duy sản phẩm, phát triển full-stack và tích hợp năng lực AI.'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['vi-vn/stage-1/learning-map'] ?? []
+</script>
+
+# Từ ý tưởng đến sản phẩm AI
+
+::: info Lời cảm ơn đặc biệt
+Đặc biệt cảm ơn các bạn sinh viên đến từ **Viện Nghiên cứu Sinh viên Quốc tế Đại học Thanh Hoa, Thâm Quyến** đã thử nghiệm, phản hồi và ủng hộ khóa học này! Những ý kiến và đóng góp của các bạn đã giúp khóa học trở nên tốt hơn. [👉 Xem danh sách người đóng góp đầy đủ](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
+:::
+
+Trước đây, làm phần mềm có rào cản rất cao: bạn phải biết lập trình, biết thuật toán, và phải có kinh nghiệm dự án nhiều năm.
+Bây giờ thì khác. Chỉ cần bạn có ý tưởng, AI có thể giúp bạn viết code.
+
+Đây là một sự thay đổi lớn: **Ngôn ngữ lập trình đang trở thành ngôn ngữ tự nhiên**.
+
+Sự xuất hiện của mô hình ngôn ngữ lớn (LLM) khiến phát triển không còn là "đặc quyền của chuyên gia kỹ thuật", mà trở thành công cụ mà ai cũng có thể sử dụng. Điều khó nhất trước đây là "cách viết code", bây giờ điều khó nhất là "**Bạn muốn làm gì**".
+
+> **Vibe Coding là gì?**
+> Nói đơn giản, đó là "lập trình bằng cách nói chuyện". Vibe coding có nghĩa là bạn có thể dựa vào việc chỉ đối thoại với AI, thay vì viết code trực tiếp, để hoàn thành dự án lập trình.
+
+Tất nhiên, để AI viết ra code chỉ là bước đầu tiên. Để tạo ra một sản phẩm thực sự sử dụng được, bạn sẽ gặp những vấn đề này:
+- Làm sao để AI viết code sạch, có thể bảo trì?
+- Làm sao để ghép các đoạn code rời rạc thành một ứng dụng chạy được?
+- Làm sao để ứng dụng thực sự trực tuyến, được người khác sử dụng?
+- Làm sao để đưa các năng lực AI như tạo văn bản, nhận dạng hình ảnh vào sản phẩm của bạn?
+
+Những câu hỏi này sẽ tìm thấy câu trả lời trong khóa học này.
+
+Dù bạn là học sinh, giáo viên, bác sĩ, công nhân, hay bất kỳ ai không biết gì về kỹ thuật -- không cần học lập trình vài năm, chỉ hai tuần đã có thể tạo ra nguyên mẫu sản phẩm chạy được, demo được.
+
+| Vai trò của bạn | Khóa học này giúp bạn |
+|---------|-------------|
+| Học sinh | Bài tập, thi đấu, khởi nghiệp, tự tay làm dự án, không cần cầu cứu ai |
+| Người đi làm | Tự động hóa công việc lặp đi lặp lại, nâng cao hiệu suất, thậm chí phát triển nghề tay trái |
+| Quản lý sản phẩm / Nhà thiết kế | Ý tưởng không còn dừng lại trên giấy, có thể nhanh chóng tạo Demo cho sếp/khách hàng xem |
+| Doanh nhân / Chủ doanh nghiệp nhỏ | Xác minh ý tưởng với chi phí thấp, không cần chi hàng vạn tệ thuê outsource mà vẫn tạo được MVP |
+| Giáo viên / Nhà giáo dục | Tạo công cụ giảng dạy, bài giảng, tự động hóa việc ra đề, nâng cao hiệu quả giảng dạy |
+| Bác sĩ / Luật sư / Chuyên gia | Tự động hóa quy trình chuyên môn, tạo công cụ hiệu suất của riêng mình |
+| Bất kỳ ai | Dùng AI giải quyết các vấn đề cụ thể trong cuộc sống/công việc, biến điều không thể thành có thể |
+
+Trong kỷ nguyên AI, năng lực thực thi và ý tưởng luôn quan trọng hơn kỹ thuật.
+
+## Lộ trình phát triển: Từ "biết dùng AI" đến "biết làm sản phẩm AI"
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>Người mới bắt đầu</h3>
+    <p class="stage-role">Trải nghiệm lập trình AI</p>
+    <div class="stage-tags">
+      <span>Trò chơi rắn săn mồi nhỏ</span>
+      <span>Bắt đầu từ con số 0</span>
+      <span>Trải nghiệm Vibecoding lần đầu</span>
+      <span>Tạo trong vài phút</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>Giai đoạn một</h3>
+    <p class="stage-role">Quản lý sản phẩm / Vận hành</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>Phân tách nhu cầu & Nguyên mẫu</span>
+      <span>Tích hợp năng lực AI</span>
+      <span>Phát triển Demo hoàn chỉnh</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>Giai đoạn hai</h3>
+    <p class="stage-role">Phát triển trung cấp / Nhà phát triển độc lập</p>
+    <div class="stage-tags">
+      <span>Từ Figma đến code</span>
+      <span>Cơ sở dữ liệu Supabase</span>
+      <span>Tích hợp thanh toán Stripe</span>
+      <span>Cơ sở tri thức Dify</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>Giai đoạn ba</h3>
+    <p class="stage-role">Phát triển cấp cao / Kiến trúc sư</p>
+    <div class="stage-tags">
+      <span>Web/Mini program/Đa nền tảng</span>
+      <span>Công cụ MCP nâng cao</span>
+      <span>RAG & LangGraph</span>
+      <span>Tư duy kỹ sư cao cấp</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+Thông qua lộ trình học tập hoàn chỉnh này, bạn sẽ đạt được:
+
+- **Năng lực phát triển Vibe Coding:** Sử dụng thành thạo tư duy vibecoding và công cụ lập trình AI, nâng cao hiệu suất phát triển gấp nhiều lần. Không cần học thuộc cú pháp, mà học cách dẫn dắt AI tạo code chất lượng cao.
+- **Kỹ năng phát triển full-stack:** Từ thiết kế UI đến thực hiện front-end, từ thiết kế cơ sở dữ liệu đến phát triển API, từ phát triển cục bộ đến triển khai đám mây, làm chủ ngăn xếp công nghệ hoàn chỉnh của ứng dụng Web hiện đại.
+- **Tích hợp năng lực AI:** Học cách gọi các loại API AI đa phương thức, tích hợp mượt mà các năng lực AI như văn bản, hình ảnh, giọng nói vào ứng dụng của bạn, và xây dựng sản phẩm thông minh thông qua các công nghệ như RAG.
+- **Tư duy sản phẩm và năng lực vận hành:** Từ nghiên cứu người dùng đến phân tách nhu cầu, từ thiết kế MVP đến lặp lại sản phẩm, từ tích hợp thanh toán đến quản lý người dùng, hình thành vòng lặp hoàn chỉnh phát triển và vận hành sản phẩm.
+
+# Học xong có thể làm gì?
+
+## Giai đoạn một: Tạo nguyên mẫu sản phẩm đầu tiên của bạn
+
+Giai đoạn này phù hợp với những bạn hoàn toàn không có nền tảng lập trình, hoặc chỉ biết một chút nhưng không tự tin lắm. Bạn không cần học trước một đống lý thuyết, mà trực tiếp làm theo, trong quá trình làm học cách dùng công cụ AI để viết code.
+
+**Sau khi học xong bạn có thể**:
+- Dùng công cụ lập trình AI độc lập hoàn thành một ứng dụng web
+- Biến ý tưởng sản phẩm thành nguyên mẫu có thể click, có thể tương tác
+- Thêm chức năng AI cho nguyên mẫu (như tạo ảnh từ văn bản, trò chuyện thông minh)
+- Khi gặp lỗi biết cách khắc phục và giải quyết
+
+Nói đơn giản, là có thể tạo ra một thứ "chạy được, demo cho người khác xem được".
+
+Chúng ta có thể trước tiên trải nghiệm lập trình AI thông qua trò chơi nhỏ, sau đó học cách dùng công cụ lập trình AI giúp bạn viết code, sửa lỗi. Tiếp theo bắt đầu từ trang đơn giản, từng bước tạo ứng dụng đa trang có thể tương tác, rồi thêm các chức năng AI như tạo ảnh từ văn bản, trò chuyện thông minh. Cuối cùng độc lập hoàn thành một dự án hoàn chỉnh, để ý tưởng sáng tạo của bạn thực sự có khả năng thực hiện.
+
+# Tại sao phải dùng phương pháp dự án để đào tạo?
+
+> **Thử thách trong thế giới thực**
+>
+> Lý do thực ra rất đơn giản: theo tình trạng hiện tại của đa số các bạn, nếu trực tiếp bước vào nơi làm việc, rất có thể sẽ gặp khó khăn dưới sự "đòn roi xã hội" từ dự án thực tế và sếp / khách hàng. Kịch bản phổ biến hơn trong thế giới thực là:
+
+> Cố vấn / Sếp của bạn: Chúng ta cần làm một xxx, mục tiêu là đạt được hiệu quả yyy.
+>
+> Tài liệu? Framework sẵn có? Mô tả nhu cầu chi tiết? Rất nhiều khi không tồn tại.
+
+Nhiều nhiệm vụ trong công việc thực tế, bản chất là giải quyết những vấn đề chưa từng gặp trong môi trường có độ không chắc chắn cao: nhu cầu mơ hồ, ranh giới thay đổi, không ai cho bạn đáp án chuẩn, bạn cần tự tra cứu tài liệu, làm thử nghiệm, xây nguyên mẫu, liên tục lặp lại, cuối cùng đưa ra giải pháp "chạy được, dùng được, có thể trực tuyến".
+
+Khóa học này muốn làm chính là trong một môi trường tương đối an toàn, trước mắt cho bạn một "mô phỏng đòn roi xã hội":
+
+- Thông qua các nhiệm vụ dự án có vẻ hơi khó, buộc bạn luyện tập phân tách vấn đề, thiết kế phương án, tự tìm tài liệu
+- Thông qua scaffold và code không quá "dễ dãi", giúp bạn học cách đọc, hiểu và cải tạo một code base cỡ lớn-trung bình
+- Thông qua vòng lặp hoàn chỉnh từ ý tưởng đến trực tuyến, giúp bạn trải nghiệm toàn bộ quá trình từ 0 đến 1 của sản phẩm thực tế
+
+Ngắn hạn mà nói, loại đào tạo này quả thực khá tra tấn; nhưng về dài hạn, nó sẽ cực kỳ nâng cao năng lực cạnh tranh của bạn trong tìm việc và phát triển nghề nghiệp: bạn sẽ chịu đựng áp lực tốt hơn, dễ tìm ra đột phá trong môi trường không chắc chắn hơn, và có năng lực biến AI thành sản phẩm thực sự triển khai, thay vì dừng lại ở mức "chơi Demo".
+
+# Nghệ thuật đặt câu hỏi: Kỹ năng tất yếu trong kỷ nguyên AI
+
+Trong kỷ nguyên AI, đặt câu hỏi cũng là một "năng lực cơ bản". Cùng một đoạn code, cùng một lỗi, **cách bạn đặt câu hỏi, gần như quyết định loại câu trả lời AI có thể đưa ra**: là nói chung chung, hay từng bước đưa ra cách sửa khả thi.
+
+**Hãy tạo thói quen tốt**: Coi "hỏi AI" là một phần của quy trình phát triển hàng ngày: khi gặp vấn đề không hiểu, bị kẹt thì lập tức hỏi.
+
+## Tại sao đây là kỹ năng tất yếu?
+
+- **Thực tế hiếm khi có tài liệu hoàn chỉnh**: Phần nhiều lúc bạn đối mặt với nhu cầu không rõ ràng, code bán thành phẩm, thông tin lỗi rời rạc
+- **AI là cố vấn + đồng nghiệp bên cạnh bạn**: Người biết đặt câu hỏi, có thể biến nó thành "lập trình cặp chất lượng cao"
+- **Giới hạn năng lực do giao tiếp quyết định**: Bạn càng cung cấp thông tin quan trọng, càng ràng buộc định dạng đầu ra, câu trả lời càng sử dụng được
+
+**Hiểu lầm phổ biến**: Chỉ hỏi một câu "tại sao báo lỗi?" thường chỉ nhận được một loạt phỏng đoán. Bổ sung đầy đủ ngữ cảnh, mới nhận được phương án khả thi.
+
+## Cách đưa thông tin cho AI: Chụp màn hình hay sao chép dán
+
+Cả hai cách đều được, nhưng mục đích khác nhau:
+
+| Cách | Kịch bản phù hợp | Yêu cầu chính |
+| ------------ | ----------------------------------------- | ----------------------------------------- |
+| **Sao chép dán** | Stack lỗi, log, code, cấu hình, API trả về | Càng đầy đủ càng tốt, đừng chỉ cắt một dòng từ khóa |
+| **Chụp màn hình** | Vấn đề bố cục UI, tương tác bất thường, không tìm thấy nút trên giao diện công cụ | Chụp toàn màn hình + đánh dấu vùng trọng điểm, tốt nhất kèm một câu giải thích bằng chữ |
+
+::: danger ⚠️ Điều kiện tiên quyết quan trọng
+**Không phải AI nào cũng hỗ trợ đầu vào hình ảnh.** Giao tiếp bằng chụp màn hình cần AI có năng lực đa phương thức (tức là có thể hiểu và phân tích hình ảnh). Hiện tại các AI hỗ trợ đầu vào hình ảnh bao gồm: Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google), và một số mô hình lớn trong nước như Tongyi Qianwen, Wenxin Yiyan, v.v.
+
+**Nếu AI bạn sử dụng không hỗ trợ đầu vào hình ảnh**, chụp màn hình sẽ không được nhận dạng, lúc này xin hãy dùng cách sao chép dán văn bản để giao tiếp.
+:::
+
+## Mẹo prompt khiến AI "giải thích rất tốt"
+
+Nếu bạn không chỉ muốn câu trả lời, mà muốn "học được" câu trả lời. Sử dụng chỉ dẫn tương tự như dưới đây có thể nâng cao chất lượng giải thích đáng kể:
+
+> **Ví dụ câu hỏi kiểu học tập**
+>
+> - "Xin hãy dùng 5 câu nói rõ khái niệm này, sau đó đưa vài câu hỏi kiểm tra tôi đã hiểu đúng chưa."
+> - "Xin hãy giải thích chi tiết thông tin lỗi này, tôi không hiểu tại sao lại báo lỗi."
+
+# Kiên trì lâu rồi vẫn không xong, tôi muốn bỏ cuộc
+
+Có thể là phương pháp kiên trì của bạn không đúng. Đừng một mình cố gắng trong bóng tối, có thể đến trò chuyện với tác giả và trợ giảng: thành thật nói ra những phương pháp bạn đã thử, điểm kẹt cụ thể bạn gặp phải, và trạng thái tâm lý hiện tại của bạn. Rất nhiều lúc, chỉ cần hơi điều chỉnh hướng đi, bổ sung một kiến thức trọng điểm, bạn lại có thể tiếp tục tiến lên phía trước.
+
+# Tôi thấy thiết kế của giáo trình có chỗ không hợp lý
+
+Hoan nghênh bất cứ lúc nào liên hệ tác giả, nộp issue, hoặc phản hồi trực tiếp trong nhóm / lớp học. Chúng tôi rất mong cùng bạn mài giũa bộ giáo trình này ngày càng tốt hơn: chỗ nào không rõ ràng, chỗ nào trải nghiệm không tốt, chỗ nào khiến bạn lãng phí công sức, đều có thể thẳng thắn chỉ ra. Phản hồi càng chân thực, càng cụ thể, càng giúp những người sau ít vấp ngáp hơn.
+
+# Tài liệu tham khảo
+
+- [Khoa Khoa học Máy tính và Công nghệ, Đại học Nam Kinh - Thí nghiệm cơ sở hệ thống máy tính](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="Tiếp theo có thể học gì"
+  description="Theo lộ trình 'từ biết dùng AI đến biết làm sản phẩm', tiếp tục tiến lên phía trước."
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-cn/stage-1/ai-capabilities-through-games/index.md b/docs/zh-cn/stage-1/ai-capabilities-through-games/index.md
index f66f687..d94fd32 100644
--- a/docs/zh-cn/stage-1/ai-capabilities-through-games/index.md
+++ b/docs/zh-cn/stage-1/ai-capabilities-through-games/index.md
@@ -1,3 +1,8 @@
+---
+title: '初级一：AI 时代，会说话就会编程'
+description: '用对话式方式让 AI 帮你写代码：从 0 到 1 做出 AI 原生贪吃蛇，并学会举一反三做出自己的小游戏或 Demo。'
+---
+
 # 初级一：AI 时代，会说话就会编程
 
 这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。
diff --git a/docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
index 76606e8..a608bed 100644
--- a/docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
+++ b/docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -1,3 +1,8 @@
+---
+title: '七款 AI 编程工具对比'
+description: '用统一任务实战评测 7 款主流 Web Vibe Coding 平台，从新手友好度、代码可控性、部署便捷性等维度帮你快速选型。'
+---
+
 # 七款 AI 编程工具对比
 
 ## 本章导读
diff --git a/docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
index afcfca5..9ee9485 100644
--- a/docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
+++ b/docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -1,3 +1,8 @@
+---
+title: '用设计和编程 Agent 设计网站'
+description: '从创意到上线：用设计 Agent 产出视觉方案，再用编程 Agent 把设计稿变成可运行网站，总结可复用的协作流程。'
+---
+
 # 用设计和编程 Agent 设计网站
 
 ## 本章导读
diff --git a/docs/zh-cn/stage-1/introduction-to-ai-ide/index.md b/docs/zh-cn/stage-1/introduction-to-ai-ide/index.md
index b0153a2..ac96ad0 100644
--- a/docs/zh-cn/stage-1/introduction-to-ai-ide/index.md
+++ b/docs/zh-cn/stage-1/introduction-to-ai-ide/index.md
@@ -1,3 +1,7 @@
+---
+title: '初级二：学会 AI 编程工具'
+description: '从网页 AI 编程走向本地：理解 IDE 与 AI IDE，使用 Trae 在本地完成贪吃蛇实战，并掌握高效与 AI 对话的技巧。'
+---
 
 # 初级二：学会 AI 编程工具
 
diff --git a/docs/zh-tw/guide/introduction.md b/docs/zh-tw/guide/introduction.md
new file mode 100644
index 0000000..7582c2f
--- /dev/null
+++ b/docs/zh-tw/guide/introduction.md
@@ -0,0 +1,82 @@
+# 專案介紹
+
+2025年，被很多人視為AI程式設計的元年。越來越多的人開始用AI寫程式碼，但往往做出來的還停留在玩具層面——不知道如何用Vibe Coding組織開發流程，不知道該選哪些工具，更不清楚從原型到上線中間還差哪些關鍵步驟。
+
+我們採用循序漸進的**三階段實戰路徑**：新手入門階段透過小遊戲快速上手AI程式設計，第一階段掌握Vibe Coding工作方式並完成Web應用原型，第二階段學習全棧開發與部署上線，第三階段構建跨平臺複雜應用。
+
+每個階段都配有完整專案實戰，讓你在真實挑戰中從玩具走向產品，最終具備**將任何想法落地為可用應用**的能力。
+
+我們相信，掌握Vibe Coding並配合系統化訓練，你一個人就能成為**集前後端開發、AI能力整合、產品設計於一身的全能開發者**。
+
+本專案主要面向三類學習者：
+
+- **新手（普通人 / 產品與運營側）**：幫助非技術背景角色和入門學習者聽懂關鍵概念，完成第一個 AI 小工具或產品原型。
+- **初中級開發者（有一定基礎的學生和開發者）**：系統掌握 vibe coding 與原生 AI 應用開發。
+- **高階開發者（公司與初創、開源與獨立開發者）**：支援團隊和個人快速搭建、驗證與迭代原生 AI 應用。
+
+## 📖 內容導航
+
+### 總附錄
+
+[AI 能力詞典：常見 AI 核心概念與名詞、場景解釋](/zh-tw/appendix/8-artificial-intelligence/ai-capability-dictionary)
+
+### 零、幼兒園
+
+| 章節                                                                                   | 關鍵內容                               | 狀態 |
+| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
+| [新手入門：學習地圖](/zh-tw/stage-1/learning-map/)                                 | 整體學習路徑導覽                       | ✅   |
+| [新手入門：AI 時代，會說話就會程式設計](/zh-tw/stage-1/ai-capabilities-through-games/) | 透過貪喫蛇等案例初步感受 AI 程式設計的能力 | ✅   |
+
+### 一、AI 產品經理
+
+| 章節                                                                          | 關鍵內容                                                 | 狀態 |
+| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
+| [初級二：認識 AI IDE 工具](/zh-tw/stage-1/introduction-to-ai-ide/)        | 學會使用 IDE，掌握介面結構和高效提示方式                 | ✅   |
+| [初級三：動手做出原型](/zh-tw/stage-1/building-prototype/)                | 從產品分析拆解，到多頁面產品原型實現的完整閉環           | ✅   |
+| [初級四：給原型加上 AI 能力](/zh-tw/stage-1/integrating-ai-capabilities/) | 理解並完成常見 AI 能力（文字圖片影片）的 API 接入        | ✅   |
+| [初級五：完整專案實戰](/zh-tw/stage-1/complete-project-practice/)         | 模擬真實場景、接受使用者反饋迭代並完成專案展示（含大作業） | ✅   |
+
+#### 附錄
+
+| 章節                                                                  | 關鍵內容                                  | 狀態 |
+| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
+| [附錄A：產品思維補充](/zh-tw/stage-1/appendix-a-product-thinking/)    | 從想法評估到需求拆解與 MVP 的產品思維框架 | ✅   |
+| [附錄B：常見報錯及解決方案](/zh-tw/stage-1/appendix-b-common-errors/) | vibe coding 中的常見錯誤及排查方法        | ✅   |
+| [附錄：從哪裡找點子](/zh-tw/stage-1/appendix-idea-sources/)          | 從參考應用、趨勢和 VC 清單裡收出細分方向  | ✅   |
+| [附錄：雙鑽模型](/zh-tw/stage-1/appendix-double-diamond/)           | 理解先定義問題，再展開方案設計的完整節奏  | ✅   |
+| [附錄：Jobs to Be Done](/zh-tw/stage-1/appendix-jobs-to-be-done/)  | 用 JTBD 方法看清使用者真正想完成的事        | ✅   |
+| [附錄：The Mom Test 使用者訪談法](/zh-tw/stage-1/appendix-mom-test/) | 透過使用者訪談驗證需求的調研方法            | ✅   |
+
+### 二、初中級開發工程師
+
+#### 前端部分
+
+| 章節                                                                                                                | 關鍵內容                                                                     | 狀態 |
+| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
+| 使用 lovart 生產素材                                                                                        | 學會用 lovart 批次生成人物、場景等視覺素材，為 UI 設計和前端開發提供素材基礎 | 🚧   |
+| Figma 與 MasterGo 入門                                                                                      | 用設計工具梳理資訊架構和頁面結構，為前端實現打基礎                           | 🚧   |
+| 構建第一個現代應用程式-UI 設計                                                                              | 基於設計稿完成元件化介面，實現從設計到程式碼的第一條鏈路                       | 🚧   |
+| 參考 UI 設計規範設計頁面和按鈕                                                                              | 學習用主流設計規範組織頁面結構、按鈕層級，並藉助 AI 生成設計方案             | 🚧   |
+| [一起做霍格沃茨畫像](/zh-tw/stage-2/frontend/hogwarts-portraits/) | 從 0 到 1 做出接入 AI 能力的前端應用，串聯設計與開發                         | 🚧   |
+
+#### 後端開發部分
+
+| 章節                                                                                                                    | 關鍵內容                                                      | 狀態 |
+| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
+| 什麼是 API                                                                                                      | 理解 HTTP 介面與請求響應模型，為後端整合與聯調做準備          | 🚧   |
+| [從資料庫到 Supabase](/zh-tw/stage-2/backend/database-supabase/) | 在 Supabase 上落地資料庫和 API，打通資料模型與前端頁面        | 🚧   |
+| 大模型輔助編寫介面程式碼與介面文件                                                                                | 用大模型協助生成介面與資料庫文件及程式碼，實現可讀可測的後端    | 🚧   |
+| Git 工作流與 Zeabur 部署                                                                                        | 在 Git 工作流中管理程式碼，並將應用部署到 Zeabur 上線           | 🚧   |
+| 現代 CLI 開發工具                                                                                               | 使用 CLI 類 AI 程式設計工具加速開發與除錯，形成個人工程化工作流   | 🚧   |
+| 如何整合 stripe 等收費系統                                                                                      | 接入支付系統，完成收費鏈路與基礎結算流程                      | 🚧   |
+| 構建第一個現代應用程式-全棧應用                                                                               | 綜合前端、後端與支付模組，完成可上線的全棧 Web 應用           | 🚧   |
+| 現代前端元件庫 + Trae 實戰                                                                                    | 使用現代前端元件庫與 Trae，獨立完成可登入註冊並支援收費的產品 | 🚧   |
+
+#### AI 能力附錄
+
+| 章節                                                                                                                                                                  | 關鍵內容                                                       | 狀態 |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
+| [Dify 入門與知識庫整合](/zh-tw/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣 | 🚧   |
+| 學會查詢 AI 詞典與整合多模態 API                                                                                                                               | 學會查詢合適的模型與 API，並把文字、影象等多模態能力接入產品   | 🚧   |
+
+### 三、高階開發工程師
diff --git a/docs/zh-tw/stage-1/ai-capabilities-through-games/index.md b/docs/zh-tw/stage-1/ai-capabilities-through-games/index.md
new file mode 100644
index 0000000..e08848b
--- /dev/null
+++ b/docs/zh-tw/stage-1/ai-capabilities-through-games/index.md
@@ -0,0 +1,768 @@
+# 初級一：AI 時代，會說話就會程式設計
+
+這是一個**基於專案制學習**的學習教程。我們鼓勵你跟隨步驟一步步操作，並嘗試復現結果。
+不要擔心犯錯或修改內容，我們永遠相信你可以做到，請你永遠記住：
+
+<div style="text-align: center;">
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">完成比完美更重要 🐣</span>
+</div>
+</div>
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>4 小時</strong>，可分多次完成'
+const relatedArticles =
+  relatedArticlesMap['zh-tw/stage-1/ai-capabilities-through-games'] ?? []
+</script>
+
+## 本章導讀
+
+<ChapterIntroduction :duration="duration" :tags="['對話式 AI 程式設計', 'AI 原生小遊戲', '貪喫蛇實戰']" coreOutput="AI 原生貪喫蛇 + 自創小遊戲" expectedOutput="1 個可執行的 AI 原生貪喫蛇 + （可選）1 個你自創的 AI 原生小遊戲或 Demo">
+
+如果你<strong>完全不會程式設計</strong>，或者只會一點皮毛，這一章就是為你準備的。我們會從最基礎的開始：用<strong>對話的方式</strong>讓 AI 幫你寫程式碼，不需要記語法、不需要配環境，直接在網頁上就能跑起來。
+
+你會親手做出<strong>第一個能執行的程式</strong>——一款會"喫單詞、寫詩、畫畫"的貪喫蛇。透過這個實戰，你會體驗到 AI 程式設計到底是什麼感覺：不是 AI 代替你思考，而是你把想法說出來，AI 幫你實現。
+
+所有的創造都是從 0 到 1 開始的，很高興能將每一份信心與專業度傳遞與你，於你而言，<strong>執行力 is all you need</strong>。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '困境與機會', description: '普通人的程式設計新可能' },
+      { title: '能力初探', description: '60秒極速開發體驗' },
+      { title: '原生實戰', description: '打造AI原生貪喫蛇' },
+      { title: '拓展創造', description: '舉一反三做遊戲' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 普通人的困境與機會
+
+很多人腦子裡有一堆產品點子：一款幫自己記賬的小工具、一個記錄孩子成長的網頁、甚至一款小遊戲。但一想到要寫程式碼、要找程式設計師，就直接勸退。
+
+AI 出現之後，第一次給了普通人一個全新的可能：你不需要會寫程式碼，只需要學會對 AI 說清楚你想要什麼。來自 GitHub Copilot 的[資料顯示](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics)，超過1500萬開發者正在用AI輔助程式設計，平均46%的程式碼都是AI生成的! 在Java專案中這個比例能達到61%。
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 20px;">🚀</span>
+      <span style="font-weight: bold; font-size: 16px;">效率與採用率的飛躍</span>
+    </div>
+  </template>
+  
+  <el-row :gutter="20" style="margin-bottom: 24px;">
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">速度提升</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">天</span></div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">任務耗時 (原9.6天)</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">首日安裝率</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">建議採納率</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <div style="line-height: 1.8; color: #606266;">
+    讓人真正興奮的是效率的飛躍：開發者完成任務的速度提升了 <b>55%</b>。原本需要 9.6 天才能提交的程式碼，現在只要 <b>2.4 天</b>就能搞定。 這種肉眼可見的效率提升，說明 AI 不再只是一個“可選工具”，而是正在成為開發流程中不可或缺的程式設計助手。採用率的資料也印證了這一點：在獲得訪問許可權的當天，就有 <b>81%</b> 的開發者第一時間完成安裝並開始使用；其中 <b>96%</b> 的人更是在當天就開始採納 AI 提供的程式碼建議。換句話說，開發者幾乎是立刻把 AI 融入了日常編碼工作。
+  </div>
+</el-card>
+
+對於普通人來說,這個趨勢更有意義:如果專業程式設計師都在大量依賴AI寫程式碼,那我們這些**不會程式設計的人,為什麼不能直接跟AI對話來實現自己的想法呢**?
+
+這門課的目標是幫你練成新技能：透過自然語言對話就能做應用。我們將教你怎麼跟 AI 用計算機的語言溝通、怎麼讓AI幫你把腦子裡的想法變成真實可用的產品。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '困境與機會', description: '普通人的程式設計新可能' },
+      { title: '能力初探', description: '60秒極速開發體驗' },
+      { title: '原生實戰', description: '打造AI原生貪喫蛇' },
+      { title: '拓展創造', description: '舉一反三做遊戲' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. AI 能幫你做到什麼程度
+
+在本節中，我們只討論一個問題：如果你完全不會寫程式碼，現在的 AI 能幫你做到什麼程度？
+
+大致來說，你可以把當前大模型的能力理解為：可以勝任**簡單的內部小工具**、**資料視覺化看板**，以及一些**輕量級小遊戲**的開發。這些能力用來做**自用工具**、從**產品經理視角驗證需求**，基本已經足夠。但若想一鍵生成可直接**商用的成熟產品**，通常仍需要人工在**流程設計**、**細節打磨**上持續最佳化。
+
+接下來，我們就以貪喫蛇為例，具體看看 AI 程式設計目前到底能做到什麼程度。
+
+### 2.1 60 秒做一個貪喫蛇遊戲
+
+首先，請你開啟課程中使用的實驗網頁 [z.ai](https://chat.z.ai/)，`z.ai` 是由智譜 AI（中國領先的大語言模型公司之一）開發的 AI 平臺，其核心能力由智譜自研的 GLM 系列大模型提供支援。該平臺整合了多項 AI 功能，包括幻燈片生成、海報設計和全棧開發等。在本教程中，我們將重點介紹其全棧開發模組的使用。
+
+::: details 💡 什麼是「網頁就能程式設計」的新模式？
+
+過去，開發一個網頁應用需要：
+- 安裝程式設計環境（如 Python、Node.js）
+- 配置程式碼編輯器
+- 學習 HTML/CSS/JavaScript 等語言
+- 處理各種依賴和報錯
+
+而現在，藉助 AI 程式設計平臺，你只需要：
+- 開啟瀏覽器，訪問網頁
+- 用自然語言描述你想要的功能
+- AI 自動生成程式碼並實時預覽效果
+
+這種「對話即程式設計」的模式，讓程式設計從「寫程式碼」變成了「描述需求」。你不需要關心底層技術細節，只需要清楚地告訴 AI 你想要什麼，它就能幫你把想法變成可執行的程式。這就是 AI 時代程式設計的新正規化——**Vibe Coding（氛圍式編碼）**。
+:::
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png)
+
+輸入我們的簡單需求後點選 **全棧開發** 按鈕，你可以實時觀看網頁的完整建立過程。通常只需泡一杯咖啡的時間，網頁便會自動生成完畢！
+
+```
+幫我做一個貪喫蛇遊戲：
+1. 用方向鍵控制蛇的移動
+2. 喫到食物後蛇會變長，分數增加
+3. 撞到牆壁或自己的身體就遊戲結束
+4. 要有開始和重新開始按鈕
+5. 介面要簡潔好看
+```
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png)
+
+生成結束後，你能看到右側出現可瀏覽的網頁介面。你可以上下滾動瀏覽頁面內容，或點選頁面頂部的 🧭 按鈕切換至全屏模式檢視效果。
+
+> 其中頂部從左到右按鈕的作用依次為：箭頭按鈕展開側邊對話歷史欄，鉛筆按鈕用於新建一個對話，迴圈箭頭按鈕用於重新整理頁面，指南針按鈕負責切換至全屏模式，Download 按鈕用於下載專案，<> 按鈕用於切換程式碼檢視，Publish 按鈕用於釋出專案。
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png)
+
+如果你想檢視該網頁的原始碼，可以點選右上角的程式碼圖示檢視完整程式碼。
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png)
+
+::: tip 🌐 探索更多 AI 程式設計工具
+
+除了 z.ai，還推薦你還可以嘗試以下優秀的 AI 程式設計平臺進行測試：
+
+| 工具 | 地址 | 特點 |
+|------|------|------|
+| **Google AI Studio**（推薦） | [aistudio.google.com/apps](https://aistudio.google.com/apps) | 谷歌官方出品，支援 Gemini 模型，適合快速原型開發 |
+| **Figma Make** | [figma.com/make](https://www.figma.com/make) | 與設計工具深度整合，適合設計師快速實現互動原型 |
+| **Coze** | [coze.com](https://www.coze.cn) | 位元組跳動推出的 AI Bot 開發平臺，提供零程式碼的視覺化搭建能力。與豆包、Kimi 等國產大模型深度整合，支援外掛市場、定時任務和多渠道釋出（飛書、微信等），適合快速構建面向 C 端使用者的對話應用或企業內部智慧助手 |
+| **v0.dev** | [v0.dev](https://v0.dev) | Vercel 出品的 AI 生成 UI 工具，輸入描述即可生成可執行的 React 元件程式碼 |
+| **Bolt.new** | [bolt.new](https://bolt.new) | StackBlitz 推出的 AI 全棧開發平臺，可直接生成並部署完整的 Web 應用 |
+| **Lovable** | [lovable.dev](https://lovable.dev) | 專注於生成高質量 React 應用，支援 GitHub 整合和一鍵部署 |
+| **Replit Agent** | [replit.com](https://replit.com) | 整合 AI 程式設計助手的線上 IDE，支援多種語言和實時協作 |
+
+想了解更多網頁程式設計工具的詳細對比和使用教程，可以參考我們的擴充套件閱讀：[7 款主流 Vibe Coding 線上平臺實測對比](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
+:::
+
+### 2.2 對話程式設計能做什麼不能做什麼
+
+本節聚焦一個具體問題：當你只依賴對話式 AI、不寫任何程式碼時，它究竟能把事情推進到哪一步。
+在經驗層面，一個較為穩定的結論是：它可以幫你完成一個“小而完整”的東西，但“做到什麼程度就算夠”，仍然需要你親自決策每一步的詳細步驟。
+
+#### 更擅長“小而清晰”的應用
+
+從前面的貪喫蛇示例中，你已經看到了一種典型模式：
+只要你能把介面和互動說清楚，AI 通常可以在幾輪對話內，拼出一個可以開啟、可以點選、可以玩的完整網頁。
+
+這類任務往往具備幾個共同特徵：
+
+- 範圍清晰：一頁網頁、一個簡單內部工具、一個小玩法
+- 結果可見：你能立即在瀏覽器中驗證是否按預期工作
+- 糾錯直接：發現問題後，可以在後續對話中點明具體現象並要求修正（透過複製錯誤直接貼上，或者截圖貼上的形式讓 AI 進行修改）
+
+在這個邊界內，你可以把對話式 AI 看作一位執行力不錯的"輔助開發者"。你只需在每一輪用自然語言細化和修正需求，就能快速得到可用的原型。
+
+**AI 獨立完成小型專案的成功率：**
+<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
+
+#### 大型專案需要“流程視角”
+
+一旦超出小而清晰的範圍，只指望靠幾輪對話讓 AI 端到端完成複雜系統，很快就會遇到上限。大型專案往往要接後端、連資料庫、整合第三方服務，還牽涉許可權、安全、併發和大量業務規則，目標是交付一整套與現有業務深度打通的系統，而不是一頁網頁。
+
+在這種情況下，更合理的做法不是把所有需求一股腦丟給 AI，而是先梳理出清晰的整體流程：關鍵步驟是什麼、每一步的輸入輸出和狀態變化是什麼、哪些節點對效能和安全最敏感。再基於這張流程圖，把相對獨立的環節拆分出來，交給對話式 AI 生成介面、模組、指令碼和測試。
+
+以目前的能力來看，AI 更擅長加速一個個小步驟，由你（或你的團隊）來決定怎麼拆步驟、如何串聯，並負責最終的架構設計、系統整合和運維。
+
+#### 能寫和能用的區別
+
+咋一看，AI 好像什麼都能寫，但這些東西到底能不能用，能用到什麼程度，我們該如何劃分？
+
+一個可參考的經驗是：
+
+::: warning ⚠️ 適用場景指南
+
+- **原型 / Demo / 內部自用工具**：非常適合先交給 AI 打第一版，再由你迭代細節。
+- **面向真實使用者的大型產品**：通常需要工程師在架構、抽象、效能和維護上長期投入。
+- **強安全 / 強合規系統（如支付、風控、醫療等）**：在當前階段，不宜“生成完就直接上線”，必須引入嚴格的審查與測試流程。
+  :::
+
+在當下，你可以相對安心地把 AI 視作一個高效的 Demo 與自用工具搭檔：
+只要你願意多測試、多迭代，多問幾輪“這裡不對，幫我修一下並解釋原因”，在原型與內部工具這一級別，整體質量通常是足夠且具備實踐價值的。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '困境與機會', description: '普通人的程式設計新可能' },
+      { title: '能力初探', description: '60秒極速開發體驗' },
+      { title: '原生實戰', description: '打造AI原生貪喫蛇' },
+      { title: '拓展創造', description: '舉一反三做遊戲' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. 動手：你的第一個 AI 原生應用
+
+讓我們回到動手部分，在前一部分，我們已經用 AI 快速做出了一個可以玩的貪喫蛇原型，也大致知道了 AI 能做什麼、不能做什麼。接下來我們將學習如何用最基礎的 **vibe coding** 技巧建立一個**現代版**的 AI 貪喫蛇遊戲。我們將讓蛇喫掉文字字元而不是豆子。最後讓遊戲根據喫掉的文字字元生成一首詩，並畫一幅畫。
+透過這個實際案例你能夠理解全新程式設計方式的核心理念：如何學會用自然語言清晰地表達需求。
+
+### 3.1 AI 原生貪喫蛇
+
+在一開始，我們可以用最簡單的方式與大模型對話，這將幫助我們快速獲得產品原型。我們可以直接在聊天框中輸入：
+
+> **💡 示例提示詞：** 幫我做一個貪喫蛇遊戲
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png)
+
+> **💡 示例提示詞：** 幫我做一個貪喫蛇遊戲，它應該支援
+>
+> 1. 我可以喫不同的單詞，它們會被收集在一個盒子裡
+>    ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png)
+
+> **💡 示例提示詞：** 幫我做一個貪喫蛇遊戲，它應該支援：
+>
+> 1. 我可以喫不同的單詞，它們會被收集在一個盒子裡
+> 2. 當蛇喫了8個單詞時，llm 應該根據這些單詞創作一首詩，我們可以根據需要重新混合這首詩。
+> 3. 當詩完成後，下一步將自動根據這首詩建立一幅影象。
+>
+> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png)
+
+注意，在開發過程中，我們可能會遇到不盡如人意的問題，例如點選按鈕沒有任何反應、使用功能時報錯、功能未按預期工作，或者前端頁面與預期設計不符。
+
+在這種情況下，我們需要進一步向模型提問，以幫助修復這些意外問題。
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png)
+
+### 3.2 給遊戲新增新功能
+
+完成基本功能後，我們可以嘗試給我們的程式新增一些新花樣！如果你覺得蛇喫單詞或字元的過程有點枯燥，你可以讓蛇喫不同顏色的單詞，並相應地改變蛇的顏色。
+
+你還可以為“喫”的過程新增特效，或者引入觸發特效的魔法單詞——比如增加蛇的速度或大小。另一個想法是每當蛇喫一個單詞時就讓模型生成一首詩和一幅圖，而不是等到它喫掉八個單詞。
+
+如果覺得這些有挑戰性，你可以直接向語言模型求助！它可以提供創意建議，讓你的遊戲更有趣。試一試吧！
+
+```
+1. "單詞解鎖世界" 機制
+每當蛇喫掉一個單詞，LLM 會對該單詞進行詩意聯想（例如，“樹”→“森林”、“綠蔭”），影象模型會即時為該單詞生成一個小藝術品。這些影象逐漸拼湊成一個獨特的、玩家創造的全景圖，所以玩家每次遊玩都在“作畫和寫詩”。
+
+2. "詩歌拼圖" 玩法
+蛇喫掉的每個單詞都會觸發 LLM 生成簡短的詩句，影象模型生成插圖。這些詩句和影象像拼圖一樣組合在一起，在回合結束時形成一首 AI 協作的詩和畫。
+
+3. "魔法單詞" & "故事分支"
+特殊的“魔法單詞”（例如，“風”、“夜”、“夢”）不僅觸發 LLM 生成詩歌，還會改變場景的情緒或主題——將生成影象的風格轉變為夜晚、暴風雨或夢幻般的氛圍。
+分支故事：LLM 在開始時給出一個主題或謎語（例如，“秋天的回憶”）。玩家的單詞選擇直接影響故事和詩歌的演變，影象模型實時更新背景和視覺效果。
+
+4. "實時互動生成"
+每個單詞之後，LLM 生成一行對話或描述，遊戲中的 NPC 可以對玩家“說話”，或者環境可以相應地改變。
+蛇的外觀或遊戲中的障礙物可以根據喫掉的單詞在視覺上發生變化，這要歸功於影象模型。
+
+5. "創作 & 分享"
+玩家可以在會話結束時儲存並分享他們 AI 創作的詩歌和影象，炫耀他們獨特的“AI 協作”。
+“最美詩歌+藝術”、“最有創意單片語合”等排行榜，鼓勵重玩和創造力。
+
+6. "按句貪喫蛇" 挑戰
+反向模式：LLM 給出一句詩或一個謎語，玩家必須引導蛇按順序喫掉單詞來重構句子。喫錯單詞會透過影象生成模型觸發有趣或藝術性的後果。
+
+7. "主題關卡" & "風格選擇"
+遊戲開始時，玩家選擇一個主題（例如，“童話”、“科幻”、“唐詩”），LLM 和影象模型都會調整單詞選擇、詩歌風格和視覺效果以匹配，使每次執行都感覺新鮮。
+
+8. "現場共創"
+當喫掉一個特殊單詞時，LLM 可以提示玩家輸入短語或選擇風格，然後 AI 生成相應的詩句和插圖，使其成為真正的人類-AI 共創。
+
+9. "AI 彩蛋 & 成就"
+某些單片語合被 LLM 識別為特殊主題或內部笑話（例如，“月亮”、“桂花”、“河岸”），觸發稀有的詩句和插圖，獎勵探索。
+
+10. "成長的故事"
+隨著蛇的成長，LLM 生成一個連續的故事詩，影象模型建立一個無縫的長卷或全景圖，所以玩家同時在“寫作、繪畫和玩耍”。
+```
+
+此外，我們還可以要求 LLM 幫你直接生成專案級的提示詞。在上一節中，我們只自己寫了貪喫蛇遊戲的提示詞。現在讓我們嘗試讓大模型生成一個帶有整體框架和實現路徑的提示詞（你可以直接用 z.ai 生成）。
+
+如果你想學習如何寫出更好的提示詞，可以檢視[提示詞工程附錄](/zh-tw/appendix/8-artificial-intelligence/prompt-engineering)。
+
+> 我想讓 AI 生成一個網頁貪喫蛇遊戲，需要一個更完整的提示詞，讓生成結果更令人印象深刻和有趣。請生成相應的提示詞。當前目標是：生成一個貪喫蛇遊戲，需要實現喫不同單詞生成詩歌的功能，並且應該包含影象生成模組。
+
+z.ai 的回覆將會是這樣的：
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png)
+
+我們可以使用這個提示詞在全棧開發模式下重新生成專案：
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png)
+
+![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '困境與機會', description: '普通人的程式設計新可能' },
+      { title: '能力初探', description: '60秒極速開發體驗' },
+      { title: '原生實戰', description: '打造AI原生貪喫蛇' },
+      { title: '拓展創造', description: '舉一反三做遊戲' }
+    ]" />
+  </ClientOnly>
+</div>
+
+### 3.3 嘗試製作其他小遊戲
+
+除了貪喫蛇（遊戲），我們可以讓想象力盡情馳騁。
+
+創造任何我們想創造的東西，甚至嘗試搞砸一切！然後重頭再來！
+
+```
+1. AI 藝術畫廊平臺
+   描述：一個展示 AI 生成藝術作品的線上畫廊，使用者可以上傳、分享和評論 AI 藝術作品。
+   功能：使用者賬戶系統、藝術作品上傳和展示、評分系統、分類瀏覽、AI 生成工具整合。
+   技術亮點：React/Vue 前端、Node.js 後端、MongoDB 資料庫、AI API 整合。
+
+2. 復古遊戲檔案館
+   描述：一個致敬經典遊戲的網站，包含遊戲歷史、玩法指南和線上可玩復古遊戲。
+   功能：遊戲資料庫、時間軸展示、線上模擬器、使用者評論、遊戲收藏功能。
+   技術亮點：響應式設計、WebGL/Canvas 遊戲實現、RESTful API、使用者認證系統。
+
+3. 可持續生活追蹤器
+   描述：一個幫助使用者透過環保提示和社羣挑戰來追蹤和減少碳足跡的網站。
+   功能：個人碳足跡計算器、目標設定、進度追蹤、社羣挑戰、環保知識庫。
+   技術亮點：資料視覺化、移動端最佳化、社交功能、推送通知。
+
+4. 虛擬廚房助手
+   描述：一個基於 AI 的烹飪指導平臺，提供個性化食譜推薦和分步烹飪說明。
+   功能：食譜資料庫、食材識別、個性化推薦、烹飪計時器、營養分析。
+   技術亮點：影象識別 API、機器學習推薦系統、語音控制、實時影片指導。
+
+5. 地下音樂發現平臺
+   描述：一個專注於獨立和新興藝術家的音樂流媒體平臺，提供獨特的發現體驗。
+   功能：音樂流媒體、藝術家資料、個性化推薦、播放列表建立、社羣評論。
+   技術亮點：音訊流處理、推薦演算法、社交功能、音樂視覺化。
+
+6. 極簡任務管理系統
+   描述：一個具有禪意美學的任務管理工具，專注於簡單和高效的任務組織。
+   功能：任務建立和分類、優先順序設定、進度追蹤、團隊協作、資料分析。
+   技術亮點：極簡 UI 設計、拖放功能、實時同步、跨平臺相容性。
+
+7. 科幻寫作工坊
+   描述：一個為科幻作家提供創意工具和靈感的平臺，包括世界觀構建輔助和角色開發工具。
+   功能：故事結構工具、角色資料、世界觀構建模板、寫作統計、社羣反饋。
+   技術亮點：富文字編輯器、資料視覺化、協作編輯、AI 輔助創作。
+
+8. 個人知識圖譜
+   描述：一個幫助使用者構建個人知識網路，視覺化並連線各種想法和資訊的工具。
+   功能：節點建立和連線、標籤系統、搜尋功能、匯入/匯出工具、視覺化圖表。
+   技術亮點：圖資料庫、資料視覺化演算法、Markdown 支援、跨裝置同步。
+
+9. 虛擬植物園
+   描述：一個互動植物百科全書，使用者可以探索植物世界並建立虛擬花園。
+   功能：植物資料庫、3D 植物模型、生長模擬、園藝指南、社羣展示。
+   技術亮點：3D 渲染、季節變化模擬、AR 整合、植物識別 API。
+
+10. 程式設計挑戰競技場
+    描述：一個面向程式設計師的線上競賽平臺，具有各種難度級別的程式設計挑戰。
+    功能：挑戰問題、程式碼編輯器、自動評估、排行榜、學習路徑。
+    技術亮點：程式碼沙箱環境、實時評估系統、演算法視覺化、社交學習功能。
+```
+
+還有... 如果你喜歡玩遊戲，讓我們一起嘗試創造遊戲吧！
+
+```
+1. 3D 開放世界 RPG
+   描述：一個具有廣闊開放世界、任務和角色成長的奇幻 RPG。
+   功能：晝夜迴圈、動態天氣、技能樹、多人合作、製作系統。
+   技術亮點：Three.js 或 Babylon.js 用於 3D 渲染、伺服器端遊戲邏輯、角色自定義、存檔系統。
+
+2. 第一人稱射擊 (FPS) 競技場
+   描述：一個快節奏的多人 FPS，具有各種遊戲模式和地圖。
+   功能：團隊死鬥、奪旗、武器自定義、排位賽。
+   技術亮點：WebGL/Three.js 用於 3D 圖形、多人網路程式碼、命中檢測、語音聊天。
+
+3. AI 國際象棋和多人遊戲
+   描述：一個功能齊全的國際象棋平臺，具有 AI 對手和線上對戰功能。
+   功能：AI 難度級別、殘局挑戰、錦標賽模式、回放分析。
+   技術亮點：國際象棋邏輯庫、WebSocket 用於實時對戰、ELO 排名系統、反作弊。
+
+4. 麻將線上多人遊戲
+   描述：一個具有線上多人遊戲和計分功能的傳統麻將遊戲。
+   功能：多種規則集、私人房間、排名系統、回放功能。
+   技術亮點：牌匹配邏輯、實時多人遊戲、大廳系統、分數追蹤。
+
+5. 回合制策略遊戲
+   描述：一個具有網格戰鬥和單位管理的戰術策略遊戲。
+   功能：戰役模式、遭遇戰、單位升級、戰爭迷霧、多人對戰。
+   技術亮點：網格移動系統、AI 決策、回合同步、存檔/讀檔系統。
+
+6. 計時賽賽車遊戲
+   描述：一個專注於計時賽和賽道記錄的 3D 賽車遊戲。
+   功能：多條賽道、汽車自定義、幽靈回放、排行榜。
+   技術亮點：3D 汽車物理、賽道編輯器、回放系統、線上排行榜。
+
+7. 卡牌對戰遊戲 (卡組構建)
+   描述：一個策略卡牌遊戲，玩家構建卡組並與對手戰鬥。
+   功能：卡牌收集、卡組構建、排位賽、賽季活動。
+   技術亮點：卡牌遊戲邏輯、匹配系統、AI 對手、卡牌動畫。
+
+8. 大逃殺 (俯視 2D)
+   描述：一個俯視 2D 大逃殺遊戲，具有縮小的遊戲區域和戰利品機制。
+   功能：單人和小隊模式、武器多樣性、局內事件、排行榜。
+   技術亮點：實時多人遊戲、區域縮小邏輯、戰利品生成系統、匹配。
+
+9. 恐怖生存遊戲 (第一人稱)
+   描述：一個具有資源管理和逃生機制的第一人稱恐怖遊戲。
+   功能：氛圍環境、解謎、敵人 AI、多重結局。
+   技術亮點：動態照明、聲音設計、敵人尋路、存檔系統。
+
+10. 音樂節奏遊戲 (3D)
+    描述：一個 3D 節奏遊戲，玩家隨著音樂節拍擊打音符。
+    功能：多種難度級別、賽道編輯器、自定義歌曲支援、排行榜。
+    技術亮點：音訊分析、節拍同步、3D 音符軌道、輸入時機檢測。
+```
+
+## 📚 Assignment
+
+<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🎯 本章作業：完成你的第一批 AI 原生小遊戲</div>
+  </template>
+
+  <p>
+    這一節，你已經跟著步驟體驗了從“對話生成貪喫蛇”到“理解 AI 原生小遊戲設計思路”的完整流程。下面的作業幫助你把這些理解真正變成自己的能力。
+  </p>
+
+  <ol>
+    <li>
+      <strong>完整復現 AI 原生貪喫蛇遊戲</strong>
+      <ul>
+        <li>至少實現：蛇可以移動、喫到“食物”後長度和分數發生變化、撞牆或撞到自己會結束。</li>
+        <li>在復現過程中，練習把錯誤現象 + 報錯資訊 + 關鍵程式碼片段一次性丟給 AI，請它“小白模式”修復。</li>
+      </ul>
+    </li>
+    <li>
+      <strong>（可選）自創 1 個 AI 原生小遊戲或 Demo</strong>
+      <ul>
+        <li>可以是圍繞文字、圖片、音樂、節奏等的任意輕量玩法，例如“喫單詞寫詩”“節奏點選”“生成式跑酷”等。</li>
+        <li>重點不是畫面多炫，而是你能清楚說出：AI 在這裡具體幫了什麼忙，它解決了什麼“人工難以做到或很麻煩”的部分。</li>
+      </ul>
+    </li>
+  </ol>
+
+  <p>
+    這就是完整的教程！你可能需要 <strong>4 小時</strong> 才能完成所有內容並構建你自己的貪喫蛇遊戲。不要著急——探索、實驗並享受這個過程。如果在過程中遇到概念不太理解，推薦你順手檢視下方附錄中的相關部分。
+  </p>
+</el-card>
+
+## 附錄
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
+  <div style="font-weight: bold; margin-bottom: 8px;">附錄導航</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    這裡整理了一些和本章相關的基礎概念：如果你在學習過程中遇到“前端是什麼”“Vibe Coding 到底指什麼”等問題，可以隨時回到這裡查閱。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>附錄 1：我們需要前端開發知識嗎？</b></a><br/>
+      <span style="font-size: 12px; color: #909399">搞清楚前端在整個應用裡的位置，知道哪些是“看得見”的部分。</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>附錄 2：到底什麼是 Vibe Coding</b></a><br/>
+      <span style="font-size: 12px; color: #909399">理解“對話式開發”的核心思路，知道該如何和 AI 配合。</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="16" style="margin-top: 10px;">
+    <el-col :span="12">
+      <a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>附錄 3：模型上下文</b></a><br/>
+      <span style="font-size: 12px; color: #909399">搞清楚“上下文長度”這類常聽到卻又容易混淆的概念。</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>附錄 4：指令遵循能力</b></a><br/>
+      <span style="font-size: 12px; color: #909399">瞭解模型為什麼有時“聽不懂話”，以及如何寫得更清楚。</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    小技巧：你可以按 Ctrl/⌘+F 搜尋關鍵字，或者把不懂的段落複製給 AI，請它用“完全小白能看懂”的方式再解釋一遍。
+  </div>
+</el-card>
+
+## <span id="appendix-1">[附錄 1：我們需要前端開發知識嗎？](#appendix-nav)</span>
+
+::: tip 💡 一句話總結
+你不需要會寫程式碼，但瞭解基礎概念能讓你更好地向 AI 描述需求。
+:::
+
+<el-row :gutter="16" style="margin: 20px 0;">
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">👁️</span>
+          <span style="font-weight: bold;">前端</span>
+          <el-tag type="success" size="small">可見</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        使用者能<strong>看到、點到</strong>的所有內容
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>網頁標題、文字、圖片</li>
+          <li>按鈕、輸入框、下拉選單</li>
+          <li>遊戲介面、動畫效果</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+  <el-col :span="12" :xs="24" style="margin-bottom: 16px;">
+    <el-card shadow="hover" style="border-radius: 12px; height: 100%;">
+      <template #header>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 20px;">⚙️</span>
+          <span style="font-weight: bold;">後端</span>
+          <el-tag type="info" size="small">不可見</el-tag>
+        </div>
+      </template>
+      <div style="color: #606266; line-height: 1.8;">
+        執行在伺服器上的資料處理
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>使用者分數儲存</li>
+          <li>登入賬號驗證</li>
+          <li>關卡內容分配</li>
+        </ul>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+### 前端三件套
+
+瀏覽器透過三種"程式碼"來構建頁面：
+
+<el-tabs type="border-card" style="margin: 20px 0;">
+  <el-tab-pane label="🏗️ HTML - 骨架">
+    <div style="padding: 10px;">
+      <p><strong>作用：</strong>定義頁面上<strong>有什麼</strong>元素</p>
+      <p><strong>類比：</strong>房子的結構草圖（牆、門、窗在哪裡）</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>&lt;button&gt;點我&lt;/button&gt;
+&lt;h1&gt;標題&lt;/h1&gt;
+&lt;img src="photo.png"&gt;</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="🎨 CSS - 樣式">
+    <div style="padding: 10px;">
+      <p><strong>作用：</strong>控制元素<strong>長什麼樣</strong></p>
+      <p><strong>類比：</strong>房子的裝修（顏色、材質、佈局）</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button {
+  background: blue;
+  color: white;
+  border-radius: 8px;
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+  <el-tab-pane label="⚡ JavaScript - 行為">
+    <div style="padding: 10px;">
+      <p><strong>作用：</strong>讓頁面<strong>動起來</strong></p>
+      <p><strong>類比：</strong>房子的電路開關（點選後的響應）</p>
+      <el-card style="background: #f5f7fa; margin-top: 12px;">
+        <pre style="margin: 0;"><code>button.onclick = () => {
+  alert('你點了我！')
+}</code></pre>
+      </el-card>
+    </div>
+  </el-tab-pane>
+</el-tabs>
+
+### 程式碼如何變成頁面？
+
+當你開啟一個網頁時，瀏覽器會按順序處理三種程式碼：
+
+**1. HTML —— 定義頁面結構**
+瀏覽器首先解析 HTML，瞭解頁面上有哪些元素（標題、段落、圖片、按鈕等），以及它們的層級關係。
+
+**2. CSS —— 應用樣式**
+然後瀏覽器根據 CSS 規則，給這些元素新增樣式：顏色、大小、位置、間距等，讓頁面變得美觀。
+
+**3. JavaScript —— 新增互動**
+最後執行 JavaScript 程式碼，讓頁面"動起來"：響應點選、提交表單、播放動畫等。
+
+**4. 頁面呈現**
+三者的配合結果就是你最終看到的網頁。
+
+### 現代前端框架：從 HTML 到 React/Vue
+
+前面介紹的 HTML、CSS、JavaScript 是前端開發的"三件套"，它們是所有網頁的基礎。但當頁面變得複雜時，直接用這三件套開發會遇到挑戰：程式碼難以維護、重複勞動多、資料同步麻煩。
+
+**現代前端框架**（如 React、Vue、Angular）建立在 HTML/CSS/JS 之上，讓開發更高效：
+
+**1. HTML/CSS/JS（基礎階段）**
+直接操作頁面元素，適合簡單頁面。但當程式碼量增大時，所有邏輯混在一起，難以維護。
+
+**2. jQuery（過渡階段）**
+簡化了 DOM 操作，讓程式碼更簡潔。但仍需手動管理頁面狀態，資料變化時要自己找到對應的元素並更新。
+
+**3. React/Vue（現代階段）**
+採用元件化和狀態驅動的設計：
+- **元件化**：把頁面拆成獨立的可複用模組（如按鈕、卡片、導航欄）
+- **狀態驅動**：資料變化時，框架自動更新對應的介面，無需手動操作
+
+::: tip 💡 簡單理解
+- **HTML/CSS/JS** = 基礎材料（磚塊、水泥、鋼筋）
+- **React/Vue** = 建築框架（提供了搭建房屋的規範和工具）
+
+在 AI 輔助程式設計時代，你不需要深入掌握框架的所有細節，只需要理解它們的基本概念，就能透過自然語言描述讓 AI 幫你生成程式碼。
+:::
+
+### 在 Vibe Coding 中
+
+**核心要點：你不需要寫程式碼，只需要會描述。**
+
+瞭解前端概念後，你可以這樣跟 AI 描述需求：
+
+> "用 React 做一個排行榜頁面，右側顯示分數列表，點選某行在下方展示玩家詳情，風格簡潔現代。"
+
+如果你想深入理解 HTML、CSS、JavaScript 等前端基礎知識，可以檢視[Web 基礎附錄](/zh-tw/appendix/3-browser-and-frontend/javascript-deep-dive)。想了解前端技術的發展歷程，可以檢視[前端進化史附錄](/zh-tw/appendix/3-browser-and-frontend/frontend-frameworks)。
+
+## <span id="appendix-2">[附錄 2：到底什麼是 Vibe Coding](#appendix-nav)</span>
+
+> 💡 什麼是 Vibe Coding？電腦科學家 [Andrej Karpathy](https://karpathy.ai/)（OpenAI 的聯合創始人之一，特斯拉前 AI 負責人）於 2025 年 2 月提出了 **vibe coding** 一詞。這個概念指的是一種依賴於 LLM 的編碼方法，**允許程式設計師透過提供自然語言描述而不是手動編寫程式碼來生成可工作的程式碼。**
+
+![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png)
+
+從字面上看，Vibe Coding 可以理解為一種“用說的方式來做開發”。它的核心變化在於：你不再需要自己一行一行寫程式碼、查語法、調 Bug，而是直接用自然語言描述你想要的東西，例如：
+
+“我需要一個登入頁面，上面有手機號輸入框和驗證碼輸入框。”
+“登入成功後，跳轉到首頁，並在右上角顯示使用者名稱。”
+“給我一個簡單的貪喫蛇小遊戲，可以用鍵盤方向鍵控制。”
+大語言模型（LLM）會把這類描述自動翻譯成真正可以執行的程式碼，並生成對應的頁面、邏輯和資料結構。你看到效果後，再用自然語言提出修改意見，例如“按鈕再大一點”“背景換成深色”“得分記錄下來並顯示排行榜”，AI 會繼續按你的要求調整實現。
+
+在這種模式下，你不需要先學會程式語言，再去寫程式碼；而是把主要精力放在：說清楚要做什麼、看到結果後判斷“哪裡不對”、再提出新的修改。AI 則負責把這些高層的想法落成具體實現，從而顯著減少機械、重複的編碼工作。
+
+你可以點選這裡檢視更多關於 vibe coding 的細節：[https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
+
+你可以點選這裡檢視更多關於 Karpathy 的分享內容：[https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
+
+### 如何假裝自己是 Vibe Coding 大師
+
+實際上，在真正的 vibe coding 過程中，我們通常不會使用很多複雜的提示詞。也許我們在開始時需要為整個程式提供一個具體且適度複雜的提示詞，但在那之後的每一步，你可能只需要以下型別的提示詞：
+
+```
+"程式碼裡有個 bug，請修復它。"
+"我不要部分程式碼，給我完整的修改後的程式碼。"
+"你的程式碼還是有問題。"
+"請再次修改並給我完整的修正後的程式碼。"
+"剛才還能執行，為什麼現在不能執行了？"
+"你沒理解我的意思嗎？不要改我原來的程式碼。"
+"不要新增任何除錯功能。"
+"不要做我沒讓你做的事。"
+"我讓你實現的功能在哪裡？"
+"你聽不懂我說的話嗎？"
+"我只要一個函式。"
+"我告訴過你參考我之前的程式碼。"
+"請不要新增不必要的註釋。"
+"請不要修改我原始程式碼的基本邏輯。"
+"幫我修改程式碼。"
+"基於我的程式碼修改..."
+"不要改我的變數名！！！"
+"不要改原來的函式名！"
+"不要亂動我的變數。"
+"不要新增額外的功能。"
+"不要只生成框架，生成完整的程式碼。"
+```
+
+這聽起來可能有點誇張，但實際上，這些就是我們在日常工作中可能使用的提示詞。由於大語言模型的**上下文長度限制**，或者有時因為它們的**指令遵循能力**不是很強，模型可能會忘記對話早些時候討論的內容。在 vibe coding 中，我們傾向使用長上下文的模型，並且使用指令遵循能力強的模型，我們可以透過這兩者的排行或者指標來判斷其是不是好模型。
+
+或者，由於訓練資料集的風格，大模型傾向於以其訓練資料的風格回答。例如，有些人說話很嚴肅，有些人喜歡新增很多修飾，而有些大模型喜歡在程式碼中新增很多註釋或不必要的模組。
+
+## <span id="appendix-3">[附錄 3：模型上下文](#appendix-nav)</span>
+
+模型上下文可以理解為 AI 的短期記憶。它指的是在當前一次對話或一次任務中，模型能夠“看到”和“記住”的所有文字內容，包括你之前輸入的問題、系統提供的說明、相關資料等。
+
+正是因為有上下文，AI 才能理解你在接著前面的內容繼續提問，才能進行一輪一輪、看起來連貫自然的對話。如果沒有上下文，你的每一句話在模型看來都像是一次全新的提問，它無法知道你之前說過什麼，也就談不上延續對話。
+
+每個模型都有自己的有效上下文長度（context window）。這個長度通常用 token（可以粗略理解為“字詞片段”的單位）來衡量，目前主流模型大多在 32k～128k token 之間。上下文越長，模型一次能“讀”的內容就越多，例如：
+
+- 一次性讀完一篇較長的論文或報告
+- 在同一輪對話中引用多篇資料、多個案例
+- 讓模型記住之前幾輪的複雜討論結論
+
+當你輸入的內容接近或超過模型的上下文限制時，往往會出現一些常見現象：
+
+- 模型開始遺忘前面長文字中的細節或關鍵資訊
+- 對話進行到後面，話題逐漸偏離最初目標
+- 對同一材料的不同問答之間，引用的內容不一致
+
+這些現象並不是模型突然“變笨”，而是上下文容量被用滿或接近用滿後產生的自然結果。
+
+在實際使用中，我們既希望上下文儘可能長，又要意識到：
+
+- 上下文越長，佔用的算力資源越多
+- 對應的呼叫成本（費用）也會隨之增加
+
+因此，在設計 AI 應用時，需要在讓模型看得足夠多和控制成本、提升效率之間做平衡。例如：
+
+- 對真正需要長期保留的資訊進行提煉後再交給模型
+- 對不再需要的細節資訊，避免一遍又一遍原樣塞入上下文
+- 使用外部知識庫等方式，把“長期記憶”交給系統，而不是強行塞進模型上下文中
+
+## <span id="appendix-4">[附錄 4：指令遵循能力](#appendix-nav)</span>
+
+指令遵循能力指的是：模型在理解你的指令之後，能否準確、完整地按照你的要求執行。它不僅包括能回答問題，還包括能按指定格式、風格、步驟完成任務。
+
+例如，下面這些都是對模型有明確要求的指令：
+
+- 將這篇文章總結為三個要點
+- 用正式、禮貌的語氣寫一封回覆郵件
+- 把這個詞翻譯成英文，並各造一個例句
+- 從文章中提取作者、時間和主要事件
+
+一個指令遵循能力強的模型，通常具備以下特徵：
+
+- 按要求的數量輸出內容  
+  例如要求總結三個要點，就不會給出五條。
+- 覆蓋所有指定的要素  
+  例如要求提取作者、時間和事件，就不會遺漏其中任何一項。
+- 遵守指定的格式和語氣  
+  例如要求使用正式語氣，就不會輸出過於口語化的回覆。
+- 不做不必要的額外延伸  
+  例如只要求翻譯和造句，就不會額外輸出一大段無關解釋。
+
+在實際應用中，強指令遵循能力非常重要，原因包括：
+
+- 提高穩定性：同樣的指令在不同時間、多次執行時，輸出結構和行為模式更加一致，不容易隨意發揮
+- 提高可復現性：當你把一段提示詞配置到產品或流程中時，可以預期模型大致會怎樣響應，方便測試和迭代
+- 便於系統整合：當模型輸出符合預期格式時，更容易與後端程式、工作流或其他工具自動對接
+
+因此，在選擇和評估一個大語言模型時，除了關注它是否聰明、知識覆蓋是否廣之外，還需要特別關注它的指令遵循能力。對於工業級應用來說，能否穩定而準確地執行指令，往往比偶爾給出一次驚豔回答更重要。
+
+<RelatedArticlesSection
+  title="繼續學習"
+  description="從“遊戲化體驗”出發，推薦你繼續進入本地開發與產品實踐。"
+  :items="relatedArticles"
+/>
+---
+title: '初級一：AI 時代，會說話就會編程'
+description: '用對話式方式讓 AI 幫你寫代碼：從 0 到 1 做出 AI 原生貪吃蛇，並學會舉一反三做出自己的小遊戲或 Demo。'
+---
diff --git a/docs/zh-tw/stage-1/appendix-a-product-thinking/index.md b/docs/zh-tw/stage-1/appendix-a-product-thinking/index.md
new file mode 100644
index 0000000..0512b67
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-a-product-thinking/index.md
@@ -0,0 +1,1099 @@
+---
+title: '產品思維與方案設計'
+description: '學習如何從會搭 AI 工具過渡到會想、會判斷、會打磨一個有 sense 的 AI 應用，掌握產品思維的核心理念和實踐方法。'
+---
+
+<script setup>
+const duration = '約 <strong>6 小時</strong>'
+</script>
+
+# 產品思維與方案設計
+
+## 本章導讀
+
+<ChapterIntroduction :duration="duration" :tags="['產品思維', '需求分析', '方案設計', '使用者洞察']" coreOutput="1 個完整的產品方案" expectedOutput="可落地的產品設計思路">
+
+在前面章節中，你已經學會瞭如何在 z.ai 和本地 AI IDE 中搭建各種小工具，也嘗試過用 Trae 處理環境配置、依賴安裝等工程問題，具備了把想法從瀏覽器搬到本地專案的能力。
+
+接下來，我們要把關注點從<strong>"能不能做出來"</strong>，推進到<strong>"到底做什麼，才值得被做出來"</strong>。
+
+本節課我們會系統討論：
+- 什麼叫"點子"，怎樣纔算"好點子"
+- 如何判斷一個產品方向值不值得投入
+- 如何用可重複的流程，把模糊靈感變成清晰的應用方案
+
+<strong>核心目標：</strong>從會搭工具升級到能做出真正有人用、能創造實際價值的 AI 應用。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '點子來源', description: '找到靠譜的產品點子' },
+      { title: '方案拆解', description: '把點子變成可做的應用' },
+      { title: '打磨判斷', description: '從能用到好用' },
+      { title: 'AI 放大', description: '合理用 AI 創造價值' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 你將學到以下內容
+
+總的來說，你將學會做一個應用的基本知識：點子從哪兒來 → 點子如何變應用 → 應用怎麼從能用變好用 → 應用怎麼用 AI → 完成後怎麼找到使用者。
+
+1. 我要做一個應用，從哪來的點子是靠譜的？
+2. 有了點子，怎樣拆成可以做出來的應用？
+3. 做出來後，怎樣判斷和打磨成“好應用”？
+4. 在哪一步、怎麼合理地用 AI 放大價值？
+5. 有了應用，怎樣從 0 找到第一批真實使用者？
+
+# 1. 我要做一個應用，從哪來的點子是靠譜的
+
+很多人一提到做應用，腦子裡的第一反應就是：我要先想一個足夠有記憶點的創意。於是每天刷榜單、看報道、研究各種熱門產品，盯著別人的成功故事，希望哪天自己也能碰到一個特別不一樣的點子。
+
+但真實的情況是，很多人其實壓根沒有什麼想法，只是單純因為沒有想法而焦慮；也有一些人一上來就給自己設了個很高的門檻：不夠有趣就不開始，覺得普通就等於失敗。可當你真的往前走一段路就會發現，能走得久、走得穩的應用，大多不是在某個深夜拍腦袋想出來的，而是在一個個具體的生活場景裡，圍繞真實的問題，一點一點長出來的。
+
+所以，本章想解決的是一個起點問題：**怎麼纔能有一個點子？這個點子到底靠不靠譜？它值不值得你接下來投入時間和精力，把它變成一個真實的應用？**
+
+## 1.1 什麼是點子
+
+我們先從一個最基礎、但又經常被忽略的問題開始: 到底什麼纔算一個點子。
+
+日常對話裡，人們常說的點子，往往是一種非常主觀的興奮感。你可能在路上刷到一條影片，瞬間覺得這個方向好酷，於是心裡冒出一句話: 我也可以做一個類似的。或者在聚會聊天時，大家一起吐槽某個產品不好用，你隨口補上一句: 要是能有個東西，自動幫我把這些都搞定就好了。這個時候，你確實有了一種朦朧的念頭，但它離一個可以做出來的東西，其實還差得很遠。
+
+在這裡，我們先給自己設一個稍微嚴謹一點的標準。只有當一個想法至少滿足下面幾件事時，我們才把它叫作點子:
+
+第一， **它必須面向一類明確的使用者** 。不是泛泛地說所有人，而是能說清楚，這主要是給誰用的。是大學生、職場新人、帶娃的家長，還是獨立開發者、電商商家、小微企業老闆。不同的人在同一件事情上的在意點完全不一樣，如果你連人羣都沒定下來，那接下來所有的判斷都會飄在空中。
+
+第二， **它要紮在一個具體的場景裡** 。這個應用是給使用者在什麼時候用的，是在早上通勤的地鐵上，是工作間隙，是睡前，是週末整理資料的時候。哪怕是看起來很抽象的工具，比如筆記、任務管理，只要你認真去觀察，真正被高頻使用的那部分，一定是和某些場景綁得非常緊。
+
+第三， **它需要幫助使用者完成一個清楚的任務** 。任務不一定很大，但要說得出來。比如整理一天的待辦事項，把一篇長文濃縮成幾個要點，為一次會議生成一份結構清晰的紀要，或者為一個城市週末出行生成一條可行的路線。越能把任務說具體，你後面設計功能、評估價值就越容易。
+
+第四， **它給出了一種比現狀更好的做法或者工具** 。使用者原本是怎麼完成這件事的，是靠腦子記、紙筆記、Excel、截圖收藏，還是在不同應用之間來回切換。如果你能提供的是一種明顯更省事、更穩定、更愉快的方式，那麼這個點子才真正開始具備價值。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image1.png)
+
+對於上述的思考，如果你想不清楚也沒關係，現在是人工智慧的時代，你可以把上面的內容整理成一個完整的提示詞，再把你的想法、目標使用者和使用場景一併寫進去，交給大模型來幫你補全和提煉。把模型當成隨時線上的產品合夥人，反覆對話、追問、修改，就能把一個模糊的概念變具體。
+
+## 1.2 點子和使用者需求: 避免自嗨的第一道防線
+
+很多人第一次做應用，最容易陷進去的坑就是自嗨。所謂自嗨，就是你對自己的創意興奮得不得了，覺得這是一個顛覆世界的方向，但當你把它講給普通使用者聽，對方的反應往往很冷靜，甚至有些不知所措，只能禮貌地點點頭，說一句聽起來挺不錯的。然而產品釋出之後，他們既不會下載，更不會長期使用。
+
+要避免這種情況，就必須把點子和使用者需求這兩件事分開來看。
+
+我們先來談什麼是 **使用者需求** 。可以用一句相對簡單的話來概括: 在一個具體的場景下， **使用者為了達成某個目標，希望降低的各種成本，或者增加的各種價值。** 這裡的成本，不只是金錢，還包括時間、精力、心智負擔、犯錯風險，甚至是社交壓力。比如一個剛入職場的新人，可能願意花錢買一套模板，只為了在第一次彙報時不那麼緊張；一個帶孩子的家長，可能願意多付一點費，只要能保證每天有半小時屬於自己。
+
+理解這一點之後，你會發現， **單純的炫酷並不能構成需求。** 很多創意確實足夠新奇，但如果它沒有讓使用者在某個具體目標上更省力、更安心、更有信心，那它就很難撐起一個真正可持續的應用。
+
+點子和需求之間，有一條經常被忽視的鴻溝。 **點子代表的是你的主觀判斷而不是資料支撐** ，你覺得什麼好玩、什麼有趣、什麼看起來很前衛。需求代表的是使用者實際在經歷什麼、在為哪些事情發愁。你可能覺得一個自動生成詩歌的功能非常酷，但對於大多數使用者來說，能讓自己每天少花十分鐘做重複整理工作的工具，可能更有吸引力。除非，你像喬布斯或具有非常好的設計審美水平，讓大家覺得“自動生成詩歌的功能”都非常酷，自發的想要跟隨你，但這具有一定難度。
+
+在判斷一個想法的時候，有個簡單的區分方法，就是看它更像 **真需求還是假需求** 。真需求的一個明顯特徵，是哪怕現在沒有你的應用，使用者也在主動想辦法解決這個問題。哪怕現有的做法很笨拙，他們依然願意花時間、花精力、甚至花錢去填這個坑。比如有人會自己寫方案，寫指令碼，只為給自己減輕一點重複勞動。這類場景裡，如果你能提供一個更友好、更普適的解決方案，往往就有機會站得住腳。
+
+假需求的典型情況恰恰相反。如果不是你主動提起，大部分人並不會意識到那是一個問題，甚至不會覺得非解決不可。你描繪的使用場景更多存在於你的想象裡，而不是使用者的日常生活中。他們聽完你的介紹，只會覺得這東西是好的，挺有意思，但不會付費，甚至轉身就忘了。這樣的點子，用來寫故事還可以，用來做產品就非常危險。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png)
+
+所以， **避免自嗨的第一道防線是瞭解使用者需求。** 在一開始你就需要逼自己回答一個看似簡單，卻非常關鍵的問題: 除了我自己，還有誰在為這件事認真犯愁。你可以去看論壇、社羣、評論區，也可以直接問幾個身邊可能成為使用者的人。如果你很難聽到類似於“我每次都被這個事情拖住”或者“現在的做法實在太麻煩”這類帶著真實情緒的抱怨，那說明這個點子離真實需求還有一段距離。
+
+## 1.3 好點子為什麼是好點子
+
+並不是所有點子都有同樣的命運。有些點子，哪怕你只花幾天時間，做出一個粗糙但能跑通流程的版本，也會很自然地吸引一小撮真實使用者，他們願意留下來，願意耐心給你提意見。還有一些點子，即使你拼命堆功能、花錢打廣告、在各個平臺上做了很多宣傳，最終也只能靠外力短暫堆出一波資料，過不了多久就歸於沉寂。
+
+這背後最本質的差異，是點子本身有沒有踩在某個關鍵的問題點上。
+
+**一個好的點子，自然而然能迎來增長** ：即便以非常簡陋的形態出現，甚至只有簡陋的幾個按鈕，只要能解決使用者手頭一個具體的小麻煩，就能夠獲得一定程度的自然增長。比如一個能幫人快速把語音轉成文字的小工具，一開始可能只是一個網頁加幾個簡單的按鈕，但只要識別質量夠好，功能的轉化特別自然，很多人就願意把連結轉給身邊朋友，因為這簡直就是在為他們節省時間。
+
+**一個壞點子，往往從一開始就註定了要靠外力驅動** 。就算你的外觀特別好，核心顯示的特別高階，你需要不停地推、不停地吆喝、不停地解釋，但一旦你的拉人行動放緩，使用資料就會直線下滑。你不斷往裡面砸資源、拉合作、搞活動，但永遠感覺在逆水行舟。問題不在於你執行得不夠好，而在於那個點本身並沒有打中足夠真實的痛點。
+
+當然，以上情況並不絕對，例如在早期市場使用者可能並未意識到價值具有一定滯後性，例如在有競品的情況下我們還要考慮到外觀、操作難易度、品牌特性等等，但這都是更深入的內容，目前暫不考慮。
+
+所以，當我們討論要不要在一個點子上繼續投入時，真正該關注的不是創意本身有多炫，而是它能不能自然地生長出一條從問題到解決方案的路徑。我們做點子，不只是為了向別人證明自己有多有創意，而是為了找到一個有價值的起點，沿著這條路，我們可以慢慢把一個小工具打磨成一個真正好用的應用。
+
+選擇比努力重要。
+
+## 1.4 好點子從哪裡來: 四大來源與具體例子
+
+很多人一提到想點子，腦海裡浮現的畫面是一個人悶在書桌前，盯著天花板，指望有一天靈感突然掉下來砸到自己。現實中的好點子，卻大多不是這麼來的。它們更多是從生活裡的小觀察、社羣裡的反覆提問、網路上成堆的抱怨，以及那些已經存在的產品裡一點點被篩出來的。
+
+下面這四種來源，如果你願意認真去做，很容易在其中挖到可以起步的方向。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png)
+
+### 熱愛你自己的生活
+
+一個非常樸素但有效的原則是: **你在生活裡越有參與感，越容易發現問題，也越有能力判斷什麼是值得解決的問題** 。所謂參與感，就是你不是隔著螢幕看別人過日子，而是自己親自去體驗、嘗試、踩坑。你越認真對待自己的興趣愛好，它就越有可能成為點子生長的沃土。
+
+比如說，如果你特別喜歡養貓，你自己跟貓一起生活的一天，往往比刷一百條“養貓小技巧”更有資訊量。你會知道貓最容易在哪些地方打翻東西，會記得每天什麼時間它最愛蹦躂、在哪些情況下最容易應激，也會親身經歷清理貓砂、鏟毛、剪指甲、看病這些細節。 **每一次略微不順暢的體驗，其實都是一次潛在的產品線索** 。
+
+像你給貓拍照這件事：很多人都遇到過，自己在那兒舉著手機，貓卻死活不看鏡頭，要麼低頭舔爪子，要麼盯著別的角落。那能不能有一個小工具，讓手機或平板的螢幕上出現一個會自動移動的紅點、羽毛或者小蟲子的動畫，專門吸引貓咪的視線？你按下拍照鍵時，它自動在前置攝像頭附近晃一圈，把貓的目光“騙”到鏡頭方向，順手再連拍幾張，幫你從中挑出清晰又好看的那一張。再往前想一步，這個應用還能記錄每隻貓對哪種顏色、哪種移動軌跡最有興趣，下次自動用它“專屬”的逗貓模式，提高成功率。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image4.png)
+
+如果你很享受化妝或者護膚的過程，家裡櫃子上的每一瓶產品背後，都是大量試錯和決策的結果。你可能已經習慣用手機相簿拍下每次妝容的照片，但每次回顧時，總要一點點回想那天用了哪一支口紅、哪一盤眼影。那是否可以把這些資訊系統地記錄下來，做成一份屬於自己的妝容圖鑑？甚至可以讓應用幫你統計，某種妝容在什麼場合被你用得最多，哪些搭配在照片裡表現最好，這樣每次選妝的時候就不用從零開始想。
+
+再具體一點，比如很多人都有這樣的場景：早上時間很趕，翻開相簿想找“上次那次很成功的通勤妝”，結果翻了半天也想不起來當時到底用了哪幾樣產品。那能不能有一個小功能，讓你在拍完妝容照片時，只要對著手機隨口說一句：“今天是面試妝，用了01號橘棕眼影盤和豆沙色口紅”，應用就自動識別並生成一條“妝容配方”，和照片繫結在一起？下次你只要搜尋“面試”“橘棕眼影”“豆沙”，就能一鍵看到所有相關妝容，甚至還能自動生成一個“今天只看適合通勤的、五分鐘能完成的妝”的推薦列表。你每天早上節省下來的那幾分鐘，其實就是一個非常具體的“被解決的問題”。
+
+如果你喜歡 city walk 或者各類形式的慢旅行，你可能已經用各種工具拼湊自己的體驗：地圖軟體記錄路線，備忘錄列出要去的咖啡館，相簿裡散落著沿途的照片和感悟。那麼有沒有可能有這樣一個應用，能把路線、打卡點、照片、文字，一同結成一個有時間線、有故事性的步行日誌？甚至進一步，把你的路線一鍵分享給朋友，讓他們也能在同一個城市，走出不一樣的版本。
+
+也可以再往下挖一個更日常的小細節：很多人在 city walk 的時候，會有“當下覺得這個轉角好美，但回家之後在地圖上完全找不回那個點”的挫敗感。那能不能做一個超輕量的功能：你走到一個覺得有感覺的路口，只要按住耳機上的按鍵，說一句“打個標記，這裡是很適合約會散步的路”，應用就瞬間在你當前位置落一個帶語音的標記點，自動記錄時間、天氣和噪音水平。以後你或者你的朋友，只要開啟這個城市的地圖，就能看到這些“路人實測的氛圍點”：哪裡適合一個人走神，哪裡適合看夜景，哪裡適合和朋友邊走邊聊天。那些原本會被你“走過就忘”的小路口，就這樣慢慢長成了一個有質感的城市體驗資料庫。
+
+這些例子想說明的其實只有一件事: **你需要熱愛你的生活，生活就是你最好的點子來源** 。每天遇到的困惑、臨時想出的變通辦法、那些你覺得有點麻煩但一直習慣忍著的地方，只要你願意稍微多看一眼，多問一句有沒有可能用一個小工具來改一改，它們就都有可能變成未來的產品雛形。
+
+### 從你擁有的人羣資產中挖掘
+
+所謂人羣資產，簡單說就是你已經可以觸達的一羣人。可能是你的讀者，你運營的社羣，你所在公司的內部同事羣，也可能是你長期參與的某個興趣社羣。只要你有渠道， **能穩定聽到一部分人日常在聊什麼、煩什麼、期待什麼** ，那你就比完全從零開始的人，多了一大截優勢。
+
+舉個很常見的例子。如果你是一個設計師社羣的組織者，你每天在羣裡能看到的內容，其實就是一份極其珍貴的需求池。有人抱怨客戶總是反覆改稿，有人對某類素材網站收費方式不滿，有人覺得在不同尺寸規格之間來回撥整太浪費時間。每一個抱怨背後，都藏著一條潛在的產品線索。比如，你可以做一個簡單的尺寸適配工具，把一套設計一鍵生成為各個常見平臺的尺寸比例；或者做一個可以儲存和複用常用元件的小工具，幫設計師用更少的時間完成重複勞動。
+
+如果你所在的是一個備考類的社羣，羣裡可能長期充斥著類似的話題: 今天狀態不好，計劃又拖延了，該看什麼資料更高效，怎麼才能堅持打卡。你不需要憑空想象，只需要觀察一段時間，整理出大家反覆提到的幾個共同難題，就能大致勾勒出一款學習類應用初步的功能方向: 比如更合理的目標拆解，更人性化的打卡反饋，更真實的進度視覺化。
+
+在這些場景下，你不必試圖一開始就做面向所有人的大而全產品。你只需要承認一點: 你手頭這一小圈人，就是你最好的起點。你對他們的理解越深，越知道他們真實生活裡那些說得出口和說不出口的小煩惱，你就越有機會做出真正被使用的東西。
+
+### 從公開場域中挖掘需求
+
+即便你暫時沒有任何自己的社羣或者讀者羣，也完全不用擔心。網際網路上每天都有無數人在各種平臺大聲講述自己的困難和不滿。公開場域裡的這些聲音，本身就是極大的寶庫，只是大多數人從來沒有認真去聽。
+
+你可以選定幾個與你感興趣行業相關的平臺，定期搜尋一些帶情緒色彩的關鍵字。例如， **好煩、有沒有推薦、怎麼解決、真的很麻煩、有沒有更好的辦法。** 然後耐心翻看那些帖子和評論，重點留意兩類資訊。
+
+一類是某種問題被長期、反覆提到。比如在求職板塊裡，每隔一段時間就有人來問簡歷怎麼寫、自我介紹怎麼準備、如何跟進面試結果；在寶媽羣體中，總是反覆出現輔食搭配、作息調整、親子溝通之類的困惑；在小微商家的交流社羣裡，大家可能永遠在擔心庫存管理、現金流、員工排班。這些長期存在的反覆問題，就是一個行業反覆暴露出來的系統性痛點。
+
+另一類是某些場景下，使用者在用非常笨拙的方式硬撐。比如有人把所有待辦事項寫在紙上，再拍照上傳到雲端；有人在不同應用之間來回複製貼上，只是為了把一段內容從一個格式轉換成另一個格式；有人會自己手動把不同渠道的資料集中整理成一張表。這些地方，只要你用心觀察，就會發現很多可以被流程化、工具化的小切口。
+
+在公開場域裡挖需求，其實是在訓練一種能力: 讓自己從一個旁觀者變成一個捕捉者。當你習慣性地去搜這些關鍵詞，習慣性地把案例記下來，你的大腦就會慢慢積累一套對現實問題的敏感度，這種敏感度會在你後面的產品設計過程中，一次又一次幫到你。
+
+### 站在巨人的肩膀上
+
+還有一類經常被忽略的點子來源，是現有的產品和專案。這個世界上已經有太多厲害的人，替我們走過了許多探索的路徑。你不必每一次都從一張白紙開始，完全可以站在別人已經做到一半的地方，往前再走一小步。
+
+**駭客松活動、產品創新大賽、創業 Demo Day **之類的場合，往往會湧現大量有趣的小作品。它們大多有兩個特點: 時間緊張，資源有限。這恰好和你現在想做的小應用很像。所以，當你去看這些得獎作品時，不妨多問兩個問題: 如果這個東西只服務於某個更窄的細分人羣，會不會更容易落地。如果把它的功能砍掉一半甚至三分之二，只保留最核心的那一環，會不會反而更清晰。
+
+同樣地，**產品榜單、開源專案、工具集合網站**上列出的那些工具，也都可以成為你思考的起點。你可以挑一些自己感興趣的，逐個拆解: 它是幫什麼人解決什麼事，它現在的形態還有哪些明顯的缺口，如果遷移到另一個場景或者另一個國家，會長出什麼區別。你並不是要抄襲，而是透過這種拆解練習，訓練自己對問題和解決方案之間關係的理解。
+
+線下的世界也是如此。每當你在醫院掛號排隊、在餐廳等號、在政務大廳填寫同樣的資訊多次、在紙質表單上反覆寫相同內容時，都可以刻意停下來，問一下自己: 這裡有沒有可以被 **系統化、數字化、自動化的空間** 。那些看起來雜亂、重複、低效的場景，本質上就是未來一些工具生長的土壤。
+
+長期堅持從這四條路徑裡挖素材，你會發現點子不是某種突然出現在腦海裡的奇蹟，而是你和生活、和他人、和資訊世界長期互動之後自然長出來的一種副產品。
+
+## 1.5 如何用一句話概括好點子: 少即是多的藝術
+
+當你大致知道一個點子從哪裡來之後，下一個重要的練習， **是嘗試用一句話把它講清楚。** 這個練習聽起來簡單，但實際上挺殘酷，因為它會逼迫你面對一個事實: **你的點子究竟有沒有抓住一個真正清晰的核心。**
+
+人之所以能記住另一個人，很少是因為對方面面俱到，更多時候，是因為某個明顯的特徵。可能是總戴著某種帽子，可能是說話風格特別穩，也可能是每次討論時總能丟擲關鍵一句話。產品也一樣。**與其讓別人勉強記住你十幾個功能，不如讓他對你形成一個樸素但清楚的印象。**
+
+在寫這一句話的時候，一個常見的誤區是過度寬泛。比如說: 這是一個幫助使用者提高英語水平的應用。乍一看沒有錯，但再往裡追問，你會發現這句話幾乎什麼都沒說: 幫助誰，是零基礎的學生，還是已經在職場的人；透過什麼方式，是背單詞、聽力訓練、口語糾正，還是寫作批改；需要付出多少時間，能夠帶來多大的改變。所有關鍵資訊都被稀釋掉了。
+
+相對好一點的表述會具體很多。比如：“每天利用十分鐘通勤時間，一個月記住一百個核心單詞的背詞應用”。這裡至少說明瞭三件事: 使用成本是可控的，每天只需要十分鐘；預期結果是可見的，一個月有一百個新單詞；場景是明確的，主要發生在通勤而不是其他碎片時間。使用者聽到這樣的描述，能很快在腦中判斷這東西對自己有沒有用。
+
+練習寫這一句話的過程，其實是在反覆逼自己回答三個問題: **你到底在幫誰，你希望他們在什麼樣的場景下想起你，你打算在多長時間內幫他們達成一個怎樣的結果。** 只有當你願意把這些資訊拼到一起，哪怕犧牲掉一些華麗詞藻，你的點子才真正變得可以被理解和傳播。
+
+你也可以反過來把這個訓練用在自己身上。試著給自己的未來三年寫一句話描述。比如，我希望三年後，可以用一兩句話說明自己主要在為哪一類人，解決哪一類問題，並且已經做出了哪些可見的成果。這樣的訓練會讓你在做選擇時更清楚，哪些事情是必須緊緊抓住的，哪些則可以適當放掉，學會捨棄比學會增加要難而正確。
+
+如果不知道從哪裡學習這種表達，很簡單，去看那些每天都在為爭奪使用者注意力而打磨文案的內容。你可以參考**應用市場裡的一句話簡介，遊戲和工具類產品在官網首頁擺出的主標題，各類 \*\***Landing Page\*\* ** 上的核心文案** 。可以把它們抄下來，拆成結構，嘗試基於 AI為自己的點子寫一版新的文案。
+
+## 1.6 用 AI 發散思維並找到差異化
+
+過去想點子，大多時候只能靠人自己慢慢琢磨。現在有了 AI，你等於多了一位隨時可以召喚的頭腦風暴夥伴。只要用得好，它可以大大擴充套件你的思路空間。
+
+當你卡在某個方向上，覺得腦子裡的想法來來回回只有那幾個時，不妨把你現有的點子用盡量清晰的方式描述給 AI，然後請它幫你做幾件事。比如， **基於同一個核心任務，請它列出二十種不同的使用者羣體** ，或者讓它從學生、自由職業者、帶娃家長、小微商家等不同角度，重新描述這個點子可能的使用方式。又或者，請它站在產品經理、運營、市場、技術的角色，分別提出各自關心的點。
+
+你會發現，很多你原本不會主動想到的使用場景，會在這一步驟中被甩給你。你的任務不是簡單接受這些建議，而是在這些被擴充套件出來的空間裡， **挑出你最有理解力和資源優勢的那一小塊** 。比如你發現，雖然 AI 列出了很多行業，但你對教育和內容創作類場景格外有感覺，那你就可以優先沿著這兩個方向繼續往下拆。
+
+在這個過程中，還有一個重要原則是: **常見點子並不一定等於無效點子** 。很多新人第一反應是要避開所有看起來常見的方向，覺得凡是別人做過的就沒機會了。但真實世界遠沒那麼簡單。背單詞、待辦事項、記賬、習慣打卡這些看似常見的方向，之所以不斷有人做，是因為背後的問題確實普遍存在。這種情況下，比拼的往往不是有沒有完全新的大創意，而是 **誰更理解某一小羣人，誰能在細節上做得更貼近他們的生活** 。
+
+你可以先列出一批新手最容易想到的點子，如背單詞工具、每日打卡應用、讀書筆記助手、簡歷生成器、習慣養成工具等。然後對於每一個，專門和 AI 做一輪拆解，集中問三個問題: 如果我只服務於某個非常具體的人羣，比如設計師、律師、新手媽媽、在校研究生，這個點子會長成什麼不一樣的樣子。如果我只針對某個固定場景，比如通勤路上、午休十分鐘、晚睡前的半小時，功能和呈現有沒有可能做得更聚焦。 **如果我把結果呈現這件事做到極致，比如更易分享、更易列印、更易匯入到其他系統，會不會就足以構成差異** 。
+
+AI 在這裡的價值，並不在於替你做決定，而是在於幫你把本來很窄的一條路，變成一張更完整的地圖。你會更快看到哪些區域已經被別人深耕，哪些角落仍然相對空白。而真正要走哪條路，最後始終要回到一個老問題上: 哪些地方是你真正在意、理解夠深、願意長期投入的。
+
+在這一切的最後，再把那條底線拿出來強調一次。任何關於點子和創意的討論，最終都要回到使用者需求上。你可以用 AI 輔助思考，可以利用它加速生成變體，但不管做了多少輪頭腦風暴，最終那個判斷標準始終是: 這個想法是否真正回應了某羣人的真實痛點，是否在他們已經在反覆嘗試解決的問題上，向前邁出了一小步。
+
+## 小結
+
+你要學會用幾個簡單的維度，去檢視一個點子是不是已經足夠清楚；要分清自己覺得酷，和使用者真的需要之間的差別；要知道好點子之所以好，是因為它從一開始就踩在某個痛點上；要學會從自己的生活、人羣資產、公開資訊和現有產品當中持續挖掘線索；要練習用一句話把點子講清；也要學會把 AI 當作擴充套件思路的夥伴，而不是替代判斷的工具。
+
+當你手裡已經有了一到三個這樣的點子，並且**能用一句話說明**它們各自是給誰用、在哪個場景下用、大致會帶來什麼樣的結果時，你就可以停下繼續想新點子的衝動，把注意力轉移到下一步: 怎樣把其中一個，拆解成一個可以真實做出來、可以被真實使用者使用的應用。
+
+這個點子有點爛怎麼辦？沒關係，最開始爛纔是正確的， **完成永遠比完美重要** ，你需要先開始纔有結局。
+
+## 📚 Assignments
+
+請你根據上文內容，完成下列作業：
+
+1. 結合自己的興趣，使用 AI 幫自己生成幾個應用的“點子”
+2. 讓 AI 根據自己的想法，評價這個是真需求還是偽需求，並且給出使用者需求洞察和建議
+3. 從四大來源處選取一或兩個來源得到“點子”，或者讓 AI 生成幾個應用的“點子”
+4. 從上述所有 Idea 中，選取三個最喜歡的點子，嘗試用一句富含資訊量的話概括這個點子。
+
+# 2. 有了點子，怎樣拆成可以做出來的應用
+
+上一章我們解決的是一個起點問題: 到底什麼樣的點子纔是值得認真對待的。
+
+真正的挑戰從這裡才剛開始，很多人就是倒在這一步: 頭腦裡有一套看起來很完整的藍圖，一動手就覺得複雜到無從下手。功能太多，頁面太多，技術看起來也很嚇人，於是不斷拖延，最後變成一句 **自我安慰** ：
+
+“ **沒關係，這東西將來有機會再做吧。。。** ”
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image5.png)
+
+別想了！要就是現在！這一章我們想做的事情，就是幫你學會一套從點子到可做版本的拆解方法。你會看到，從無到有並不依賴天才，而是依賴一系列可以反覆練習的具體動作: ** 發散、** **收斂** **、拆解、細化、借鑑、提問。** 按照這個順序，哪怕沒有團隊、沒有大把時間，也可以把一個點子變成能跑通的應用demo。
+
+## 2.1 從想法到解決方案: 雙鑽模型發散到收斂
+
+當你學會畫頁面提想法之後，很快會面臨另一個常見的問題: 想法開始越來越多。你在白板上寫下了各種可能的場景和功能，紙上畫滿了不同的頁面版本，看上去很有成就感，但真正要做時，反而更難下手了。因為每一個看起來都重要，似乎都值得一試。
+
+這個時候，就需要用到一套非常經典但又很好懂的思考框架: 雙鑽模型。這個模型的意思其實很樸素，就是在人生的很多階段，你都需要先發散，再收斂，而不是一開始就想把所有事情一次性做完。
+
+### 什麼是雙鑽模型
+
+雙鑽模型是英國設計委員會提出的一個創新與設計流程框架，把整個過程比喻成連續的兩個菱形（“雙鑽”）：第一個鑽石是從“發現問題”到“定義清晰問題”，強調先廣泛發散、充分調研和理解使用者，再收斂梳理出真正要解決的核心問題；第二個鑽石是從“發展解決方案”到“交付最終方案”，先對可能的解決思路大膽發散、探索和迭代原型，然後再收斂、篩選和打磨出最優可落地的方案。雙鑽模型強調在問題和方案兩個階段都要經歷“發散—收斂”的過程，避免一開始就跳到解決方案，從而提升創新的質量和成功率。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image6.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image7.png)
+
+### 第一鑽: 理解問題，從單點到全貌的發散和收斂
+
+**在雙鑽模型裡，第一鑽是關於問題本身** 。你先從一個模糊認知開始，逐漸發散出更多相關的情況和可能，再做一次收斂，找到真正值得解決的那個問題點。
+
+對應到你的應用，就是這樣幾件事。
+
+**發散階段，你儘量多地去列舉使用者可能的使用場景，** 可能遇到的阻力，可能希望得到的結果。你不急著判斷，只是把腦子裡所有相關的東西都先攤出來。比如對於文件處理應用，你可以列出使用者可能在通勤時用、在會議前用、在寫報告前用、在做覆盤時用；可以列出他們怕的是總結不準確、怕格式亂、怕錯過重點；可以列出他們希望的是更快弄清楚一篇文章要表達什麼，更快找到與自己相關的部分。
+
+**收斂** **階段，你要逼自己只選出那一兩種最常見、最痛的情況** 。比如你從一堆場景中發現，最多人提到的，是在接收到很長的工作文件時，希望先搞清楚這篇文件到底想說什麼，它的主要結論是什麼。那你就可以把第一版的應用目標定為: 幫助使用者在五分鐘內看懂一篇長文的核心意思，而不是同時解決所有文件處理相關的問題。
+
+第一鑽結束時，你應該已經比剛開始時更清楚: **你真正要解決的問題是什麼，它和其他周邊問題相比，優先順序為什麼更高。**
+
+### 第二鑽: 設計解決方案，從粗糙想法到可執行方案
+
+**雙鑽的第二部分，是關於解決方案的誕生** 。你已經大致知道要解決哪一個問題，接下來要做的是為這個問題儘可能多地想辦法，然後再從中篩選出最適合第一個版本的那一種。
+
+發散階段在這裡意味著不斷追加想法。你可以腦暴各種功能、更細的場景、各種可能的玩法。比如針對長文總結，你可以設想不同的摘要粒度、不同的結果呈現形式、是否支援語音播報、是否允許使用者標註重點、是否提供多種風格的總結版本等等。這一步不需要立刻做決策，只是儘可能把可能性列出來。
+
+收斂階段，就要拿出一個簡單但非常實用的評估工具: 使用者價值 × 可行性 × 時間成本。你可以給每一個想法在這三個維度上打一個粗略的分，比如 1 到 5 分，然後優先選擇綜合得分高、時間成本可控的想法作為 MVP，也就是最小可行版本的組成部分。
+
+比如語音播報功能可能使用者價值不錯，但技術和前端整合起來的時間成本偏高；而簡單的文字摘要和要點提取，使用者價值同樣明顯，可行性也高，時間成本更低，那它就更適合作為第一版裡必做的功能。
+
+在這個過程中，你要不斷提醒自己一件事: **第一版的目標不是做出一個完美的應用，而是做出一個真實存在的、有人可以真正使用的版本** 。它不需要包羅永珍，只需要在一個具體任務上表現得足夠像樣。
+
+你可以給第二鑽畫一個簡單的時間邊界，比如一個月內要交出一個可用版本，那在發散的所有想法裡，所有需要超過一個月甚至幾個月才能落地的功能，都可以先暫時放到一個以後再看清單裡。這樣你不會因為想做的太多，而在一開始就被拖住。
+
+當你習慣了用雙鑽模型來整理自己的思路，很多原本糾纏不清的狀況就會變得清爽許多。你知道什麼階段該儘可能地多想一點，什麼階段該果斷地砍掉一部分可能。你不再奢望一次性解決所有問題，而是學會在發散和收斂之間來回切換。
+
+## 2.2 得到可執行步驟：學會從抽象到具體
+
+發散想法後，得到想法十分簡單，但得到可執行步驟卻非常難。說我要做一個提升效率的工具，我要做一個幫助創作者的應用，聽起來都很宏大。真的要動手的時候，抽象幾乎幫不上忙。你每天面對的是一個個非常具體的問題: **第一個版本到底要做哪一小塊，需要哪些頁面** ，要不要支援註冊登入，要不要接入支付。
+
+這裡需要的一種能力叫 **拆解並細化，能夠把抽象變具體** 。就是把一個大而泛的目標，一點點拆解並細化內容到可以立刻動手的最小可行動項。這個能力不僅在做產品的時候重要，在生活裡也非常關鍵。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image8.png)
+
+### 從生活例子開始: 我想喫漢堡到底意味著什麼
+
+先不談應用，回到生活中一個很簡單的例子: 我想要喫漢堡。乍一看這句話一點也不復雜，但如果你認真拆下去，會發現裡面藏著很多具體的分支。
+
+首先是 **動機和內心的核心需求** 。你是真的想喫漢堡嗎？你只是饞味道，是想快速解決一餐，是想和朋友聚一下，還是隻是因為刷到了一張好看的圖片。這看似無關緊要，但會直接影響後面的選擇。如果是為了和朋友聚，很可能對環境和體驗有要求；如果只是趕時間，可能快比好喫更重要。
+
+其次是 **動作的範圍** 。你想喫什麼品類的漢堡？你想在幾點喫漢堡？你只想喫漢堡本身，還是希望有一整套搭配，比如飲料、薯條、甜點。如果你晚點還有事，不想喫太撐，那選擇可能會不一樣。你甚至可以進一步問自己，要不要順便解決明天的早餐，比如多帶一個簡單的漢堡回去。
+
+再往下就是 **如何實現這件事** ？。漢堡對你來說是必須要去店裡喫，還是外賣送過來也可以，甚至你願不願意自己動手在家做。每一種選擇背後對應的是完全不同的一套行動路線。選擇去店裡，意味著要查位置、看時間、安排路程；選擇外賣，意味著要看平臺、比較價格和時間；選擇自己做，則意味著要準備食材、工具、找食譜。
+
+當你把這一切拆清楚後，原本模糊的我想喫漢堡這句話，就會變成一串具體的行動步驟。比如: 開啟外賣應用，搜尋某家之前喫過覺得不錯的店，選擇一個套餐，去掉飲料改成只要漢堡和薯條，設定備註不要醬，最後下單。這些動作都非常細小，卻都是可立即執行的，並且這能夠被 AI 程式設計一套程式化可執行的 plan，進行操作。
+
+**拆解並細化的意義就在這裡: 它幫你從一個聽起來很大、很抽象的願望，走到一個可以具體執行的列表。**
+
+### 應用例子: 提高文件處理效率到底從哪一步開始
+
+我們來看一個更復雜層層遞進的例子，假設你有一個看起來挺正當的願望:“ 我想做一個提高文件處理效率的應用。”這個方向是對的，但如果就停在這半句話上，你幾乎無從下手。你既不知道第一步要畫什麼頁面，也不知道第一版需要做到什麼程度，更不知道該怎麼和別人解釋你的想法。
+
+這時候你可以借用剛才的拆解細化內容的方式，一步一步具體化它；由於時間關係，此處只演示兩層拆解方法。
+
+#### 第一層拆解細化
+
+**首先，你需要先定義什麼是“文件”** 。文件本身是一個很寬的概念，它既可以是表格、 Word 報告、PDF 檔案，也可以是記錄程式碼註釋的 Markdown 文字、TXT 筆記，甚至是掃描生成的圖片式文件、內嵌圖表與公式的學術論文。不同型別的文件存在實現差異，但後續設計的 “處理” 功能，必須匹配文件的具體型別，故而不得不細化對文件的定義。如果是圖片式文件，可能需要先加入 OCR 文字識別功能；如果是表格類文件，核心需求更可能是資料提取與分析，而非單純的文字精簡。
+
+**其次，你還需要定義什麼叫做“處理”。處理成什麼，纔算處理過？** 處理的方式又是什麼？有的人所謂的處理，是把一份 50 頁的報告精簡成 5 頁可讀的概要；有的人所謂的處理，是把一堆雜亂格式的 Word、PDF、Markdown，統一變成一套規範模板；還有人關心的是翻譯、改寫、潤色，讓一篇勉強能看的草稿，變成可以對外發布的正式版本。這一步你可以直接問自己: 我說的“處理”，到底是要“看得更快”、“改得更好”，還是“傳給別人更方便”。不同的答案，直接決定你後面要畫的入口頁和操作頁會完全不一樣。
+
+**對於“應用”同樣也需要定義。什麼叫做應用** ？是一個只給自己用的小工具，還是希望未來有一羣使用者來使用？是一個網頁程式，還是一個手機 App，還是隻是嵌在現有系統裡的一個小功能？如果你只是想在電腦上自己用，做成一個簡陋的網頁或者命令列指令碼，成本會低很多；如果你打算給團隊同事一起用，可能就要考慮賬號體系、許可權、協作入口。這些聽起來像是技術選型的問題，但在拆解階段，你只需要回答一句很樸素的話: 我打算在什麼裝置、什麼場景下，用到這個東西。
+
+接下來， **回到這句話本身: “提高文件處理效率”。** 你還需要拆清楚幾個關鍵字。比如 **“用什麼提高”** ？一定要用 AI 嗎？還是不一定？有些效率提升完全可以用規則、模板、快捷鍵來解決，比如一鍵生成固定格式的報告封面、一鍵插入標準免責宣告。這類需求可能根本不需要模型參與。相反，如果你面對的是大量非結構化的長文字，需要理解、概括、改寫，那麼 AI 可能就是非常自然的一環。
+
+“效率”這個詞也值得單獨拆開。 **效率到底是什麼意思？是單純指速度，還是既包括速度，也包括質量，還包括出錯率和理解難度？** 比如，把一份 20 頁的文件從 30 分鐘看完，變成 5 分鐘掃完要點，這是速度；讓使用者在摘要裡快速發現錯誤邏輯、資料矛盾，這是質量；讓一個原本不熟悉專業術語的人，也能透過解釋和標註看懂報告，這是認知門檻的降低。你可以很直接地問自己一句: 如果這個應用做得非常成功，對使用者來說，最大的變化是什麼？是“花在文件上的時間少了一半”，還是“做文件相關的事時，心沒那麼累了”？回答清楚這句，你的功能優先順序就有了依據。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image9.png)
+
+#### 第二層拆解細化
+
+以上是第一層拆解，假設在這個階段，我們能得到的初步拆解細化結果是：“我想做一個 AI 提高 PDF 文件轉成文字速度和質量的網頁程式”。這一句相較於最初的“提高文件處理效率”已經具體得多：它明確了文件型別（PDF）、處理方式（轉成文字）、最佳化方向（速度和質量）、技術路徑（AI），以及承載形態（網頁程式）。從需求表達的角度看，它已經從一個抽象的願望，收縮成了一個相對清晰的功能構想。
+
+但需要注意的是，這樣的描述仍然只是一個“中間目標”，還稱不上真正可執行的產品方案。原因在於： **其中很多關鍵資訊依然是籠統的，比如“用什麼 AI”“提升到什麼程度”“適配哪些使用場景”“面向什麼樣的使用者”等。** 因此，我們還可以、也有必要， **繼續向下拆解，把這句話變成一組更細顆粒度的設計決策和技術方案** 。
+
+先來看其中的“AI”。這裡的“AI”，究竟是指一個只負責文字識別的輕量級 OCR 模型，還是需要引入大語言模型，甚至多模態模型，來做後續的糾錯、版面重整、內容重排和結構理解？不同的選擇，會在三個維度帶來完全不同的後果：
+
+- 成本消耗：包括算力成本、呼叫費用、推理時延等，是一次性投入為主，還是持續開銷為主。
+- 開發難度：是簡單整合現有 OCR 介面即可，還是要設計複雜的 Prompt、上下文管理、甚至自訓練與評估體系。
+- 產品形態與上線策略：是做成一個“快速提取文字的小工具”，還是一個能夠還原大綱結構、表格、標題層級，適合深度閱讀與內容再利用的“文件智慧處理平臺”。
+
+然後是 **對“PDF 文件”的進一步拆解。你到底要支援哪一類 PDF？** 如果把範圍限定在“以文字為主、可以複製的純文字 PDF”，那就不必一開始就處理掃描件、複雜圖表、公式排版，也不用為極端多欄、花哨排版的文件負責。反過來，如果你希望做到“任何 PDF 都能扔進來”，就意味著一上來就要同時解決圖片式 PDF 的 OCR 識別、版面重建、圖文混排、表格抽取等一整串高難度問題，專案複雜度會成倍提升。
+
+在這一層，你可以刻意做一次“收窄”，並把取捨明確寫下來。例如：當前版本主要服務“結構較清晰、以文字為主的 PDF 報告和說明文件”，不對掃描件、重度圖文混排文件的效果做保證。這樣一來，後續所有關於“速度”和“質量”的目標，都有了一個相對可控、可解釋的前提條件，也方便在產品說明和使用者預期管理中說清楚邊界。
+
+接下來是“高質量轉成文字”。“質量”在這裡至少可以拆成三個可討論、可權衡的維度：
+
+1. **識別是否大致正確** ：錯別字、標點、特殊符號的識別準確率如何，是否會出現整段亂碼。
+2. **段落與標題結構是否保留** ：原文的章節層級、段落分隔、列表結構、引用塊等，在轉成純文字後能否被儘可能還原。
+3. **是否便於二次編輯與再利用** ：生成的文字是否足夠乾淨、格式是否規整、使用者後續複製到 Word、Notion 或程式碼編輯器中時，是否需要大規模手工清理。
+
+**你可以先選出自己最在意的兩三項，作為“質量”的主攻方向** 。比如：優先保證“段落結構清晰”和“標題層級基本保留”，在錯別字上只要求達到“使用者幾分鐘內可以快速人工修完”的程度。這樣，“高質量”就不再是一個空泛的形容詞，而可以被轉化為寫得出來、量得出來的產品標準：偶爾有識別錯誤是被允許的，但不可以把文件切得支離破碎、段落混亂，更不能讓使用者在結構整理上比手動複製還費勁。
+
+再看“速度”。既然你在目標裡寫了“提高……速度和質量”，那“快”就應該被具體到 **某個可以感知的量級，** 而不是停留在“感覺上比較快”。這裡其實隱藏著一個重要取捨：
+
+- 是希望支援超長文件（幾十頁、上百頁），哪怕使用者需要等待較長時間？
+- 還是隻針對中短篇文件，在頁數受限的前提下，做到“幾秒到十幾秒內拿到結果”的體驗？
+
+如果你典型的使用場景是：會前把一份十幾頁的報告、方案或研究摘要，快速轉成可編輯文字以便標註、修改和摘錄，那麼更自然的選擇是：
+
+- 對單份文件設定一個合理的頁數上限，例如“不超過 20 頁的文字型 PDF”；
+- 同時給出一個大致的處理時間指標，例如“通常在約 10 秒內完成處理”。
+
+這兩項一旦被明確寫出來，後面的技術方案（是否需要並行處理、要不要做非同步佇列）、介面文案（頁面上展示的預計時間、超時提示）以及使用者預期管理，就都可以圍繞“中短文件 + 快速返回”這個核心體驗來最佳化。
+
+**最後是“網頁程式”本身。這一項看似只是載體選擇，實際上同樣需要適度收口，** 避免過早捲入過重的產品形態。你可以先問自己一個關鍵問題：
+
+- 這更像是“我自己和小範圍內部使用的臨時工具”？
+- 還是一開始就規劃成“給一批真實使用者長期使用的線上服務”？
+
+如果更偏向前者，你就可以大膽砍掉很多複雜度：不用搭建完整的賬號體系和許可權管理，不必在第一版就實現任務歷史、專案管理、團隊協作等功能，而是專注在一個極簡流程上：
+**開啟網頁 → 上傳 PDF → 等待處理 → 展示可編輯文字 → 一鍵複製或下載** 。
+反之，如果目標是正式對外提供穩定服務，就需要在後續版本中逐步考慮併發能力、佇列排程、使用者配額、異常恢復、日誌與監控、安全與許可權管理等。但在當前這一拆解階段，你完全可以先把它定義為“基於瀏覽器的小工具，無需登入即可使用”，把所有互動集中在最簡單、最核心的那條路徑上。
+
+你需要把“AI”“PDF 文件”“高質量轉成文字”“速度要求”“網頁程式”這些 **關鍵詞背後的取捨，用更具體文字的明確表達** ，最初那句“我想做一個 AI 提高 PDF 文件轉成文字速度和質量的網頁程式”就可以被進一步收緊為一條更清晰、更可執行的描述。例如：
+
+> 為使用者提供一個基於瀏覽器的小工具，優先支援結構較清晰、以文字為主的 PDF 報告，透過適配的解析流程與輕量級 AI 清洗，在約 10 秒內輸出一份段落結構明晰、標題層級基本保留、識別錯誤率可接受的可編輯文字，無需登入即可使用。
+
+到這個時候，你就已經完成了一次從抽象目標到可落地方案的重要跨越，稍作精簡後可得到一句話描述：
+
+> 為使用者提供一個網頁工具，讓他上傳一份不超過 20 頁的文字型 PDF，在約 10 秒內得到一份段落結構清晰、標題層級保留的可編輯文字，並支援一鍵複製和下載為 `.txt`。
+
+這類描述不再是空泛的口號，而是可以直接變成提示詞，或者直接讓 AI 當做 plan 去執行的一組指令。比如，你完全可以把這段話丟給一個具備開發能力的 AI，讓它按這句話去生成一個開發方案或直接生成最小可用版本的網頁應用；也可以把它交給設計師，讓他據此畫出具體的介面原型；或者發給一個工程師同事，讓他快速評估實現成本和技術方案。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image10.png)
+
+當你做到這裡，你會發現兩件很現實的變化。第一，你不再被“我要做一個提升效率的應用”這句話壓住，而是擁有能夠立即動手的步驟。第二，和別人的溝通成本會急劇降低，因為你拿出了一套已經拆到足夠具體的初版方案。
+
+從抽象到具體，其實就是把“我想做一個提高文件處理效率的應用”這樣的大願望，拆成一組任何人甚至任何 AI 都可以立刻理解並開始執行的任務清單。透過這個方式不會有難解決的問題，所有的問題分解到原子化後無非就只有兩個選項，只要能原子化就能被執行：
+
+1. 我來解決、執行這個子問題。
+2. AI 或別的專家，來執行解決這個子問題。
+
+## 2.3 在白板上構思你的應用: 先畫出第一個應用
+
+很多人一想到要開始做應用，腦子裡第一個跳出來的是程式碼、後端、資料庫、介面、框架。這並不奇怪，因為我們長期被灌輸的觀念是: 做一個應用，首要是技術問題。但如果你一開始就把注意力全部壓到技術上，很容易忽略最關鍵的東西: **使用者到底在你這裡究竟要做什麼** 。
+
+在這一點上，一個最簡單、卻經常被忽略的做法，就是先畫。你不需要什麼專業的軟體，一個白板，一張空白紙，一個記事本都可以。重要的是，你先把使用者從進來到離開的整條路徑，用幾張簡單的頁面草圖畫出來，而不是直接跑去開啟編輯器寫程式碼。
+
+你可以把整個應用，先分成三類頁面: 入口頁、操作頁、結果頁。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image11.png)
+
+### 入口頁: 使用者從哪兒進來，第一眼看到什麼
+
+入口頁就是使用者和你的應用第一次打照面的地方。很多人一開始設計入口時，只想到一個通用的首頁，上面堆滿了功能按鈕、模組入口、廣告位，似乎只有這樣才顯得東西夠多、夠厲害。但如果你把這個頁面畫在紙上，貼在牆上，再假裝自己是一個第一次來的人，你會突然意識到一個很現實的問題:** 我到底該先點哪裡。**
+
+畫入口頁時，可以先把自己當成導遊。問幾個非常具體的問題: 使用者透過什麼方式進來，是點選一個分享連結，是在應用市場裡搜尋，是在一個網頁上掃描二維碼。不同來源意味著使用者對你的預期完全不同。比如一個透過朋友轉發連結進來的使用者，他已經大致知道你能做什麼，這時候入口頁可以更直接一點，讓他馬上試用核心功能；而一個從應用市場搜到你的人，可能對你一無所知，此時 **入口頁就需要用一句話先幫他搞清楚你是幹嘛的，或者一看會用** 。
+
+畫的時候，可以這樣簡單處理: 在紙上畫一個手機螢幕的框，在最上方寫上這一頁的標題，中間畫出主要區域。標註清楚: 這一頁我要告訴使用者什麼，我希望他在這裡做出什麼選擇。比如是讓他點選一個大大的開始按鈕，還是讓他先看一個簡短的示例結果，或者是填寫一個最簡單的基礎資訊。
+
+開始頁越簡單而具體，你就越有機會讓剛來的使用者不迷路，快速上手。
+
+### 操作頁: 使用者需要輸入、點選、選擇什麼
+
+一旦使用者決定繼續往前走，下一步就會落到操作頁，也就是整個應用的工作區域。這裡是使用者真正和你發生互動的地方，也是最多人設計過度複雜的地方。
+
+畫操作頁時，一個很有效的練習是: **只允許使用者做一件事** 。你可以在紙上寫下這件事的最簡單表達，比如 提交一段文字 用語音記錄一條想法 選擇一個模板 配置一個引數。然後圍繞這件事，儘量往少裡做，看看最少只需要哪些輸入，哪些按鈕。
+
+以一個長文自動總結的應用為例，最粗糙但能跑通流程的操作頁，可能只需要幾樣東西: 一個可以貼上文字的輸入框，一個選擇總結長度的選項，一個生成摘要的按鈕。你完全可以先不考慮字型大小、配色、圖示這些視覺上的細膩部分，把重點放在這樣幾個問題上: **使用者是否一進到這一頁就知道要做什麼，他需要準備哪些東西，他會不會在中途搞不清楚下一步。**
+
+在紙上構思操作頁的好處，是你可以非常低成本地嘗試不同版本。你可以先畫一個所有輸入都在同一頁的版本，再畫一個分成兩步的小嚮導版本，然後在腦海裡演練幾遍: 哪個版本更不容易讓人卡住。相比在已寫好的程式碼裡改流程，這種紙上調整幾乎沒有成本。
+
+### 結果頁: 使用者得到了什麼，怎麼展示
+
+很多應用在結果這一步做得很敷衍。開發者往往覺得結果不就是一段文字、一張圖、一串資料嘛，展示出來就好了。可對使用者來說，往往恰恰相反: 他之所以願意在前面的步驟裡輸入、等待、嘗試，根本原因是他期待在結果頁上看到一個夠清楚、夠有用的東西。
+
+畫結果頁時，可以從這樣幾個角度去想: **使用者最關心的核心資訊是什麼，它應該擺在最顯眼的位置** 。有哪些結果是需要匯出、儲存或者分享的，它們的入口在哪裡。有沒有必要為結果加上一些簡單的解釋，讓使用者知道這代表什麼。
+
+還是以長文總結為例，一種比較友好的結果頁設計是: 頂部用幾條簡潔的要點列出核心結論，其下面放一個更詳細的摘要，最底部保留原文連結。旁邊放上兩個醒目的按鈕: 一個是複製要點，一個是匯出為文件。你可以在紙上試著畫出這些區域的佈局，並標註一下每個按鈕預計承載的動作。
+
+當入口頁、操作頁、結果頁都畫完後，你再用箭頭把它們連起來，**從使用者第一次進來，一步步走到結束。這個過程會暴露出很多原本你沒意識到的問題:** 比如使用者在結果頁想要修改一個細節，他該如何返回操作頁；或者在操作頁上，他如果暫時不確定要不要繼續，是否有清晰的退出或者儲存草稿的方式。
+
+整個章節的核心只有一句話: 先把使用者操作過程畫出來，再考慮技術實現。你可以完全不會寫程式碼，卻依然可以 **透過幾張簡單的草圖，把一個點子變成一個看得見的應用雛形** 。這一步做得越清楚，後面無論是自己實現，還是和別人合作實現，都會輕鬆很多。
+
+## 2.4 參考別人的應用: 聰明地抄作業
+
+很多人在做第一個應用時，會有一種心理負擔: 覺得自己好像必須從零開始，頁面結構、互動方式、視覺佈局都要完全原創，彷彿只有這樣纔算真正做產品。現實是，如果你堅持這個原則，反而會在無關緊要的地方耗掉大量精力。
+
+在應用設計這件事上，有一種更高效也更成熟的態度叫 **聰明地抄作業** 。不是簡單模仿，而是有選擇地借用別人已經驗證過的好解法，把你的精力留給最應該用在你獨特價值上的地方。
+
+網際網路上有很多收集應用介面截圖的網站，也有大量應用市場裡的詳情頁，這些地方本身就像一本巨大的參考圖冊。你可以挑出幾個和你的方向相近的應用，比如同類工具、相同人羣的產品，然後像研究樣本一樣一頁一頁地看。
+
+重點觀察的不是配色有多漂亮，而是它們在若干關鍵區域是怎麼處理的:
+
+- 導航欄怎麼設計，底部還是頂部，是固定幾個核心入口還是隻有一個主按鈕
+- 表單怎麼組織，是一次性在同一頁填完，還是拆成多個小步驟
+- 結果展示時，最重要的資訊有沒有被放在最明顯的位置，次要資訊又是怎樣被收納的
+- 新使用者第一次進來時，有沒有簡短的引導流程，告訴他接下來怎麼用
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image12.png)
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image13.png)
+
+具體可以參考如下幾個網頁截圖收集站：
+
+- [https://www.uisources.com/](https://www.uisources.com/)
+- [https://screenlane.com/](https://screenlane.com/)
+- [https://pagecollective.com/](https://pagecollective.com/)
+- [https://patttterns.net/](https://patttterns.net/)
+- [https://mobbin.com/](https://mobbin.com/)
+- [https://refero.design/](https://refero.design/)
+- [https://scrnshts.club/](https://scrnshts.club/)
+- [https://godly.website](https://godly.website/)
+
+除了直接參考別人的應用，我們還能從一些比賽中得到靈感，比如 Hackathon（ 限時、高強度的團隊協作開發活動，需短時間內完成產品原型或解決方案）的得獎作品和一些公開的 demo 網站。其本質上是一批實踐者在極短時間內交出的解決方案，它們雖然粗糙，但恰好呈現瞭如何在有限時間內完成從點子到可執行產品的壓縮流程，你可以參考他們的作品思考什麼叫做最小產品原型；但由於駭客松始終是短時間的比賽，有可能創意大於實用性，其獲獎作品並不一定適合作為一個長期的產品進行參考和開發，你需要根據實際情況進行判斷。
+
+除此之外，你還能參考一些所謂的工具類網站進行操作，工具類網站你可以理解為類似天氣查詢網站、多語言翻譯網站、神奇寶貝圖鑑收集網站、遊戲攻略網站、流行車輛排名網站、AI 工具站。這些工具站雖然功能十分簡單，但也許就是一個滿足某些人需求的非常好的“應用”。想法不在複雜而在有用，透過對不同應用的參考，你能真正知道什麼纔是市場需求。
+
+## 2.5 不要等一切就緒才調查使用者需求
+
+很多人嘴上說要做使用者驅動的產品，真正做的時候卻習慣先關起門來做一個他們心中完整的版本，然後才鼓起勇氣拿給別人看。**這聽起來好像更體面，至少不會在別人面前暴露自己的半成品。但從產品的角度看，這是一個非常危險的習慣。**
+
+原因很簡單: 你在越後面才接觸使用者，你前面對細節的投入越多，一旦方向不對，損失就越大。你可能已經為一個不重要的功能寫了很多程式碼，為一個沒有太多人關心的細節設計了很多圖，最後卻發現使用者真正卡住的地方，根本不是你花最多時間的那一塊。
+
+要避免這種局面，有一個簡潔但有效的原則可以時時提醒自己: 邊畫邊問，**邊做邊問，不要做完再問。**
+
+### 邊畫邊問: 在紙面階段就開始收集反饋
+
+當你剛剛在白板或紙上畫出入口頁、操作頁、結果頁的時候，其實就已經具備了和使用者對話的基礎。你完全可以在這一階段，就找兩三個可能成為目標使用者的人，讓他們看一眼，聽聽他們的第一反應。
+
+你不必做複雜的訪談，只需要觀察幾個細節: 他們看到入口頁時，會不會自發說出你想讓他們說的那句話，比如 這好像是做長文總結的；他們在操作頁上，會不會自然而然按你預期的順序進行，比如先貼上文字，再選擇總結長度；他們在結果頁上，是否一眼就被你希望他們看到的部分吸引，而不是糾結在一些無關緊要的角落。
+
+這些觀察可以幫你在寫第一行程式碼之前，就暴露出那些最明顯的設計問題。你可以根據這些反饋修一次紙上的原型，再繼續往下做，而不是等到整個應用已經搭好再來大改結構。
+
+### 邊做邊問: 在半成品階段就拉人試用
+
+當你有了一個能跑通基本流程的半成品版本時，更沒有理由一個人悶著用。哪怕介面很粗糙，哪怕很多功能還沒加進去，**只要它能夠完成你定義的那個最小任務，就已經具備邀請真實使用者試用的條件。**
+
+你可以先從身邊人開始，還可以從你在上一章提到的人羣資產、公開場域裡接觸到的使用者中，挑一些比較願意嘗試新工具的人。給他們發一個連結，簡單說明現在能做的事情，然後請他們在你不做太多解釋的情況下，從入口走到結果。
+
+**在這個過程中，你要做的不是辯解，而是觀察。** 他們會在什麼地方猶豫，會在哪個環節停頓，哪一個按鈕看了很久都不敢點。你也可以事後問幾個具體問題: 有哪一步是你覺得最費勁的，有哪一個結果你是最滿意的，有什麼是你以為會有但最終沒看到的。
+
+在半成品階段做這些事，有一個巨大好處: 你還沒有對任何一個方案投入過多的情感依賴，你會更容易接受把某些看起來很酷但使用者根本不在意的功能砍掉，也更願意花時間去最佳化那些雖然不起眼卻真正在使用中頻繁出現的小細節。
+
+### 不要害怕暴露粗糙
+
+很多人之所以不願意在早期讓別人看到，是因為害怕暴露自己的粗糙，覺得這樣會被認為不專業。可恰恰相反，真正成熟的產品人，很少對早期版本有這種羞恥感。因為他們知道，早暴露問題，成本最低。
+
+你可以在心裡換一個視角看待這件事: 你不是在展示一個未完成品，而是在邀請對方參與共同打磨。只要你事先說清楚這是一個非常早期的版本，你希望對方給的不是讚美，而是儘可能直接的使用感受，大多數人是願意提供幫助的，尤其是那些本身就被你要解決的問題困擾的人。
+
+至此，你已經學會用白板和紙，把一個抽象點子變成一條具體的使用者鏈路；你知道如何透過拆解，把大而寬的願望拆成可以明天就開始動手的最小可行動項；你也知道不該貪心，一口氣把所有想法都塞進第一個版本，而是用雙鑽模型在發散和收斂之間來回切換，最後選出那個最值得先做的 MVP；你學會了聰明地參考現有應用，在導航、表單和結果展示這些基礎結構上，站在別人的肩膀上往前走；更重要的是，你知道不要等一切就緒纔去找使用者，而是從 demo 開始，就讓他們走進來，用他們的使用感受來幫你一起修正方向。
+
+透過這些工具和步驟，你已經有能力把一個點子，拆成一個初步可用的應用。但你也會發現，一個能用的應用，和一個真正好用的應用，中間還隔著一層面紗。
+
+接下來我們就專門談一談: 什麼樣的應用，纔算是好應用；讓你知道在得到第一個可用版本後，下一步如何讓應用走的更遠。
+
+## 📚 Assignments
+
+請你根據上文內容，完成下列作業：
+
+1. 請你使用任意一款大語言模型，針對之前的點子，讓 AI 參考雙鑽模型給出發散結果，你需要根據發散結果選出一套可行解決方案。
+2. 根據之前想出來的點子，使用拆解細化的方法得到更具體的可執行內容。類似：“為使用者提供一個網頁工具，讓他上傳一份不超過 20 頁的純文字 PDF，在 10 秒內得到一份段落結構清晰、標題層級保留的可編輯文字，並支援一鍵複製和下載為 .txt。”
+3. 根據細化後的點子，嘗試在白板上畫出你的應用，應用需要關注兩個部分，一個是 UI 應該如何設計，一個是該有什麼功能，每個功能是在哪。
+
+# 3. 做出來後，怎樣判斷和打磨成好應用
+
+當你終於把第一個版本做出來，放到真實世界裡給人用時，會進入一個完全不一樣的階段。之前所有的討論，都還停留在想法和設計層面，而現在，產品會第一次被真實的使用場景檢驗。你會看到使用者點錯的地方、猶豫的地方、卡住不動的地方，也會看到他們在哪些步驟出奇地順暢，甚至會在某個角落意外多停留幾秒。這些細節，遠比你腦子裡對產品的各種想象要誠實得多。
+
+這一章要解決的是一個核心問題: 當應用已經做出來，甚至已經有一批早期使用者在使用時，怎樣判斷它離一個好應用還有多遠，以及如何利用這些真實使用過程中的資訊，把它一步步打磨好。
+
+## 3.1 什麼是好應用: 4 個核心特徵
+
+要判斷一個應用好不好，不能只看你自己多喜歡它，也不能只看下載量或一兩天的使用次數，而是要看它具不具備一些更底層、更穩定的特徵。簡單而言可參考以下幾個特徵：
+
+### 好應用能帶來具體價值
+
+好應用最直接的特徵，是它能讓人在某個場景下實打實地得到一點好處。這個好處不一定宏大，也不需要用多高深的語言去包裝，但必須具體到你能說得清楚:** 它到底幫使用者少做了什麼，少花了多少時間，或者讓什麼事情不那麼容易出錯。**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image14.png)
+
+比如一個簡單的會議紀要工具，如果它能做到只要上傳錄音或者在會議過程中直接錄音，結束後就能自動生成一份結構化的會議紀要，並且把待辦事項、責任人、截止時間用列表列清楚，那它幫使用者節省的就不僅僅是打字時間，而是從記錄、整理、篩選到格式化輸出整套過程的心力。你可以很明確地說，這個工具大概每場會為一個人省下二十分鐘。而如果整個團隊每週有十場這種會議，那麼總共節省下來的時間就非常可觀。
+
+再比如一個看似不起眼的圖片壓縮工具，如果它能在保持肉眼幾乎看不出差別的前提下，把一批圖片的體積壓縮到原來的三分之一，同時保證一鍵匯出、資料夾結構不亂、命名規則統一，那它帶來的價值並不只是硬碟空間的節省，還有傳輸更快、上傳更順滑、和其他系統對接時更少出錯。這種看似平凡的具體價值，往往比一句模糊的效率提升要可靠得多。
+
+所以，當你說自己的應用有價值時，最好能把價值拆成一兩條具體的場景，用普通人聽得懂的話解釋: 你的應用讓使用者原本需要花多久、做多少手工、承擔多大風險的事情，變得更省力。
+
+### 使用者好上手，幾乎不用看說明書就能懂
+
+另一個容易被低估但極其重要的特徵，是 **好應用通常不太需要解釋** 。使用者第一次開啟時，靠直覺就能知道大概該從哪裡開始，點選什麼會發生什麼，最大按鈕通常做的是最核心的事情，最重要的入口會擺在真正重要的位置，而不是藏在選單的第三層。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image15.png)
+
+你可以想象一個剛剛下載你應用的新使用者，他可能是在排隊、在車上、在咖啡店裡隨手點開的。當時網路訊號不一定很好，他也沒有耐心看任何一篇長說明。他能容忍的迷茫時間，往往只有幾秒鐘。如果在這幾秒鐘裡他看不到任何明確的引導，不知道下一步該幹什麼，就很容易直接關掉，然後再也不回來。
+
+所以，當你自己覺得產品邏輯很順暢時，最好找一個完全沒見過你應用的人，讓他在你不說話的情況下，從零開始摸索。你只觀察他會在哪些地方停頓，在什麼位置猶豫，什麼時候會露出那種這是什麼的表情。使用者如果一進來就被各種開屏彈窗、複雜選項、賬號繫結擋住，很難認真體驗到你真正想提供的價值。
+
+**好上手這件事，本質上是產品對使用者成本的一種尊重。** 你是在承認一件事: 沒有人有義務花時間研究你的應用。
+
+### 在高頻或關鍵場景中，會自然想到你
+
+好應用往往有一個穩定的使用節奏，要麼高頻，要麼關鍵。 **高頻是指它融入了使用者的日常，例如每天都會開啟好幾次的訊息應用** ，每天上下班都用的通勤工具，每天習慣記錄的打卡應用。關鍵是指即便不是每天都用，但是一旦遇到某類場景，使用者就會第一時間想到你，比如報稅工具、裝修預算計算器、面試題管理工具、簽證資料清單助手。
+
+你可以問自己幾個問題: 使用者真正會在什麼時間、什麼情境下用到你; 如果他錯過你，會不會真的感覺到不便; 同類場景下，他現在是靠什麼方式過活的。如果有一個備選方案，哪怕很麻煩，但是已經習慣了，那你要做的就不僅僅是功能對齊，還要讓他感覺換到你這裡來確實更值得。
+
+一個常見的誤解，是把使用頻次和應用的好壞直接繫結在一起。其實不必。比如做年終報表、辦理某種證件、做一次大額轉賬，這些事情本身頻率不高，但一旦發生，對使用者來說就是當下最重要的事情之一。**如果你的應用剛好能把這類關鍵場景處理得穩、快、讓人心裡有底，那它一樣可以稱得上好應用。**
+
+**真正需要警惕的，是那種使用者既不高頻用你，也不會在任何關鍵時刻主動想到你** ，甚至如果你的應用從他手機裡消失，他只會在幾個月後清理記憶體時才模糊想起曾經裝過這麼一個東西。這種情況往往說明你的應用並沒有和任何真實的場景深度繫結，只是在功能層面堆了一些存在感不強的東西。
+
+### 利他心
+
+很多人一開始做產品時，心裡同時盤算的是幾件事: 做出來後怎麼收費，怎麼漲價，怎麼讓使用者多用一點就得付費，怎麼鎖死資料防止使用者遷移走。商業上的計算本身沒問題，但如果一開始思路就完全繞著這些轉，很容易做出那種一眼就充滿戒心的應用: 一上來就要各種許可權，到處是花樣收費點，功能設計明顯不是為了讓使用者順暢完成任務，而是想辦法把使用者引導到某個付費的按鈕上。
+
+相比之下，真正好的應用都帶有一種比較樸素的利他心。它確實會想清楚要怎麼活下去，也會設定合理的收費方式，但在設計路徑和體驗的時候，優先順序始終擺在: **怎麼讓使用者更容易順利完成這件事，而不是怎麼多加一步流程來製造額外障礙。** 你會看到它在很多地方都用了對使用者更友好的方式，比如在關鍵步驟給出清晰的提示，在匯出和遷移上不過度設定壁壘，在收費前讓你至少體驗到一部分實在的價值。
+
+這種利他心，經常體現在一些微小的設計細節上。比如表單那一欄不會為了多收資訊而亂要一堆和任務無關的資料，教程的順序是圍繞使用者要完成的目標設計的，而不是圍繞功能模組自己來講。你能感受到這個應用是在認真幫你做成一件事，而不是把你當成一個被壓榨的物件。
+
+還有一點很重要: **好應用不一定是大應用。它可以很小，只服務於一類人、一個場景、一個任務** ，但在那一小塊裡做得很到位。比如專門幫設計師把稿件匯出成列印店要求的格式，或者專門幫自由職業者整理個人專案案例，這些範圍都不大，但裡面的價值一點不小。
+
+## 3.2 洞察需求：**馬斯洛的需求層次理論**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image16.png)
+
+在做應用之前，很多人會直接跳到功能層面思考：這塊能不能再做點什麼，那塊要不要加個按鈕。而真正決定一個應用能不能活下去的，是你究竟踩中了人哪一層次的需求，以及踩得有多準。
+
+馬斯洛的需求層次理論之所以在這麼多領域被反覆提起，不是因為它多嚴謹，而是因為它提供了一個足夠好用的觀察框架。你不用把它當成嚴格的心理學結論來看，只要把它當成一個簡單的框架：幫你把使用者的各種動機，掛在幾個相對清晰的層級上，方便你判斷你的應用到底在滿足哪一類需求，你能滿足越多需求，就是越好的應用。
+
+馬斯洛的需求層次理論通常會分成五層，自下而上分別是：生理需求、安全需求、歸屬與愛、尊重需求、自我實現。
+
+### 生理和生存相關的需求
+
+這一層最基礎，直接關係到喫飯、睡覺、生存狀態本身。聽上去好像和網際網路產品有點遠，但其實不少應用都在這個層上發揮作用。
+
+比如外賣、買菜、跑腿、訂房、打車，這些典型的到家和出行服務，本質上都是在幫使用者用更低的時間成本去解決喫飯、出門、休息這類最基本的問題。再比如健身記錄、睡眠監測、飲食打卡，雖然看起來更偏健康管理，但對很多人來說，是在試圖維持一個不至於失控的身體狀態，這也可以看作是生理與生存層面的延伸。
+
+如果你的應用是在這一層發力，有一個特點是： **使用者對穩定、可靠、可預期會特別敏感** 。點外賣送不到、打車一直叫不到、訂房資訊出錯，帶來的情緒反應會非常強烈，因為這些問題直接打斷了生活的基本節奏。
+
+### 安全感和確定性的需求
+
+安全需求包括物理層面的安全，也包括經濟、資訊、心理上的安全感。
+
+很多工具型應用，其實主要都在安全這一層工作。比如記賬、資產管理、保險助手、合同模板工具、密碼管理器、備份工具、隱私保護工具、網盤同步、資料恢復。這些應用的核心承諾往往是：幫你降低出錯機率，幫你在事情出了問題時有備選方案，或者至少讓你心裡有底。
+
+比較典型的一類，是各種防丟、防忘、防錯的小工具：日程提醒、藥品服用提醒、重要檔案到期提醒、關鍵節點的備忘。這類應用哪怕每天只提醒你幾次，但只要有一兩次在關鍵時刻救了你，它就會迅速被你歸類為必須留著的一類工具。
+
+當你在設計這類產品時，可以多問一句： **你到底幫使用者降低了哪一類風險，是金錢上的、時間上的、關係上的，** 還是合規和法律上的。如果連你自己都說不清，那使用者很難真正信任你。
+
+### 歸屬感、連線和被看見
+
+再往上一層，是歸屬與愛的需求。簡單說，就是我不想一個人，我想和某些人連在一起。這一層，是社交類、社羣類、興趣小組類應用的大本營。
+
+朋友圈、羣聊、興趣論壇、同好社羣、線上讀書會、遊戲裡的公會，甚至一些圍繞特定身份的工具，比如新手父母羣、留學生互助、行業內部匿名吐槽平臺，本質上都是在提供某種歸屬感：有一羣和我類似的人，我們在看類似的話題、吐槽類似的困難、分享類似的經驗。
+
+有些工具表面上是功能型應用，但真正留住使用者的，往往是這層需求。比如記賬應用裡大家分享自己的存錢進度，跑步應用裡的排名和打卡圈子，學習應用裡的互相監督小組。這些看似增值的社交模組，實際上是在讓使用者把你的應用和自己的某個羣體身份綁在一起。
+
+如果你的應用試圖站在這一層，光有內容是不夠的，你要思考的是： **使用者憑什麼覺得這裡是自己人，他願不願意在這裡留下痕跡、和別人產生一點輕微但真實的互動** 。否則，你做的就只是一個單向的廣播工具。
+
+### 尊重、自我價值和成就感
+
+再往上一層，是尊重和自尊需求。人不只想被接納，還會在某個階段開始在意：我在這裡算不算一個不錯的人，我有沒有被看見、被認可，我做成的事情有沒有人知道。
+
+大量的打卡、勳章、排行榜、頭銜、成就體系，其實都在這個層面發揮作用。學習應用裡完成多少課時會給你一個稱號，運動應用裡達成目標會給你一張證書，創作平臺給作者開通不同等級的身份標識，社羣裡對優質內容作者有明顯的高亮標記。
+
+這裡容易出現一個誤區：以為加一堆勳章、積分、稱號就能刺激使用者。使用者要的不是浮誇的裝飾，而是我的真實努力被記錄並被認真對待。如果你設計的成就體系，和使用者的真實投入完全脫節，比如隨便點幾下就能拿到資深稱號，那這個激勵很快就會失效，甚至讓人覺得廉價。
+
+所以在這層上，關鍵不在於你有沒有做激勵系統，而在於： **你的應用有沒有給使用者提供一個可以積累的舞臺，讓他可以清楚看見自己從初學者到熟練者的變化** ，並且在關鍵節點上，給予他一種這一步值得被記一下的儀式感。
+
+### 自我實現與自我超越
+
+金字塔的最上層，指向的是我想成為怎樣的人，以及我想把自己的一部分貢獻出去。這聽起來很抽象，但落到具體場景裡，往往有很實際的表現。
+
+比如創作類工具：寫作、繪畫、音樂製作、影片剪輯、程式設計專案管理，它們表面上是在提供技術能力，背後承接的是使用者對創造一些屬於自己的東西的渴望。再比如一些長期學習平臺、職業規劃工具、習慣養成工具，它們服務的並不僅僅是單一技能，而是某種更長線的自我成長目標。
+
+還有一種是讓別人變好的需求。很多人使用知識分享平臺、問答社羣、公益類應用、協同創作工具，不只是為了賺點積分或流量，而是因為在幫助別人、推動一個專案向前時，會有一種我正在做一件有意義的事的感覺，這也屬於自我實現的一部分。
+
+當你的應用真正觸碰到這一層時，往往會擁有一種很強的粘性：即便介面不是最漂亮，功能也不一定最全，使用者還是會留在這裡，因為 **它和我是怎樣的人、我在做什麼樣的事情建立了更深的連線** 。
+
+把馬斯洛金字塔當成產品視角的一個好處，是它能幫你避免兩個常見的偏差。
+
+**第一個偏差，是隻盯著某一個錯誤的層次不放。** 比如你做的是幫助使用者安全儲存檔案的工具，本質上站在安全這一層，但你卻一味模仿社交產品，在介面上堆各種點贊、評論、排行榜，結果既搶不到社交類產品的使用者心智，又讓本來只想要一個穩妥儲存工具的人覺得你不務正業。
+
+**第二個偏差，是忽略了層級之間的先後關係。** 一個人連最基礎的穩定使用體驗都得不到保障時，很難認真在你這裡追求自我實現。比如應用經常崩潰、資料時不時丟，哪怕你給了再多勳章、再多成長曲線，使用者也不會真心投入。反過來，如果你在基礎層面做得紮實，再逐步疊加更高層次的價值，使用者會更容易跟著你一起走上去。
+
+在實際設計中，你可以這樣自查：
+
+- 先問自己：我的應用最主要、最核心的是在滿足哪一層需求，只允許選一層
+- 再問：在這個核心層之上，我有沒有機會自然地延伸到上一層，而不是硬貼一個概念上去
+- 最後，看一眼：在比我目標層更低的那些層裡，我有沒有明顯短板，甚至在拖使用者後腿
+
+當你能回答清楚這幾個問題時，你對使用者真正要什麼這件事，就不再只是停留在感覺他們可能會喜歡的模糊層面，這有助於你做出更好的應用。
+
+## 3.3 按使用者型別分類: C 端應用和 B 端應用的差異
+
+應用做出來之後，你很快會發現另一件重要的事: 面對普通個人使用者和麵對企業或機構使用者，是兩種完全不同的遊戲規則。它們看起來都叫使用者，但關心的重點完全不同。
+
+- C 端（Consumer End）：指 “消費者端”，核心是普通個人使用者。
+  比如我們日常用的微信、抖音、美團外賣，這些 App 的使用者是一個個獨立的個人，這類面向個人提供服務的場景，就是 C 端業務。
+- B 端（Business End）：指 “企業端”，核心是企業、機構或組織使用者。
+  比如公司裡用的釘釘（企業協作工具）、財務軟體（如用友、金蝶）、零售門店的收銀系統，這些產品的使用者是企業員工、團隊或整個機構，服務於企業的經營、管理、生產等需求，這類面向組織提供服務的場景，就是 B 端業務。
+
+### C 端應用: 面向普通人的生活、情緒和習慣
+
+C 端應用面向的是個人使用者，它們嵌在每個人的日常生活裡。常見的型別包括內容類、工具類、娛樂類、社交類、學習類等等。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image17.png)
+
+內容類應用，比如資訊類閱讀、短影片平臺、播客工具。它們的核心任務通常是讓使用者在有限的時間內，從海量資訊中篩出自己感興趣的內容。同時要保證不斷有新東西吸引使用者回來。
+
+工具類應用，比如記賬、待辦事項、檔案管理、日曆排程。它們往往在某個具體任務上提供一個比原始方式更順手的解決方案，屬於使用者日常使用的基礎設施之一。
+
+娛樂類應用，包括遊戲、輕互動、趣味小工具。它們給使用者提供的是情緒上的放鬆和愉悅，衡量好不好用的標準，更多是使用者願不願意持續花時間在上面。
+
+社交類應用圍繞的是人與人之間的連線和互動，學習類應用則圍繞某種能力的提升，比如背詞、刷題、讀書打卡、課程管理。
+
+這些應用雖然種類不同，但有幾個共同的關注點。
+
+**第一，使用者增長。** 也就是如何讓更多人第一次嘗試你的應用。這裡涉及到渠道、傳播文案、使用者激勵，但前提始終是: 你要先有一個足夠清晰的使用場景。否則，再厲害的增長手段也只能帶來一波短期的好奇心。
+
+**第二，留存和復訪。** 不是有人來過，而是他願不願意留下來、回來。一個內容類應用，如果不能保證持續產出使用者感興趣的內容，很快就會被替代；工具類應用如果在關鍵幾次使用裡沒有幫助使用者真正完成任務，也很難建立長期使用習慣。你可以透過觀察第 1 天、第 7 天、第 30 天的留存情況，判斷到底有多少人真正把你納入了生活節奏。
+
+**第三，轉化和付費。** 使用者為什麼願意付費，通常不是因為你把免費版做得很糟糕，而是因為在他已經從你這裡獲得一部分價值之後，看到付費功能能帶來更高層次的便利。比如更高的使用額度、更強的協作能力、更專業的模板、更穩定的效能。
+
+**第四，分享傳播性。** 很多 C 端產品之所以能快速擴散，是因為在使用過程中天然帶有分享屬性。比如生成一張圖、一個影片、一段文字，使用者為了完成自己的目標，本身就需要把結果發給別人。在這個過程中，只要你把品牌露出做得自然、不討厭，就能獲得一部分口碑式的傳播。
+
+判斷 C 端真需求的一個簡單方式，是看使用者願不願意圍繞它形成自己的小習慣。比如願意每天開啟看一眼、願意把它和自己的生活節奏繫結在一起、願意讓它參與到某些重要時刻的記錄中。反之，如果使用者只是因為一次活動或廣告進來，用完就走，而且幾乎不會再回來，那基本可以判斷，你解決的可能只是他們一時的好奇心，而不是長期需求。
+
+### B 端應用: 面向組織的效率、成本和風險控制
+
+B 端應用面向的是企業、團隊、機構或某個部門。常見型別包括 ERP（資源管理系統）、CRM（客戶關係管理）、協同辦公工具、各類 SaaS 工具、行業內部管理系統等。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image18.png)
+
+這些應用和 C 端的最大不同，是它們要同時滿足多個角色的需求。使用者可能是一線員工，決策者卻是主管或老闆，資料的擁有者可能是組織本身，審批流程可能涉及多個部門。你既要讓使用者覺得好用，**又要讓決策者看到** **投入產出比** **，還要讓整個組織在風險和合規層面有安全感。**
+
+B 端應用有幾項特別核心的關注點。
+
+**第一，提高效率。** 這不僅指某一個人的時間縮短了，而是整體流程耗時減少，協作成本降低，溝通環節減少。比如一個訂單從建立到發貨原來要經過五個系統，現在透過一個統一入口就能整體流轉，這類提升對企業來說就是非常具體的。
+
+**第二，** **降低成本** **。** 包括人力成本、培訓成本、系統維護成本等等。如果一個系統看起來功能很強大，但需要投入大量培訓和維護資源才能勉強跑起來，那它對很多中小企業來說就會顯得價效比不高。反而是那些做得看似更輕，但能快速上手、快速看到回報的 SaaS 工具，更容易在現實世界活下來。
+
+**第三，控制風險和保證合規。** 很多 B 端場景裡，對合規性和可追溯性有很高要求，比如金融、醫療、製造、政務等行業。一個好的 B 端應用，往往會犧牲一點使用上的自由度，換來更明確的許可權管理、更嚴謹的日誌記錄、更清晰的審批鏈路。對使用者個人來說，可能少了一些隨意發揮的空間，但對組織整體來說，反而是價值所在。
+
+**第四，許可權管理和責任邊界。** 誰能看見什麼、誰能改什麼、誰對什麼結果負責，這些問題往往是 B 端系統設計中的重點。一旦這裡做不好，就會給後續的審計、糾紛、追責帶來巨大麻煩。所以，判斷一個 B 端應用是不是好應用，不能只看介面看起來順不順眼，還要看它的許可權模型是否嚴謹、是否容易理解和維護。
+
+從行業到應用，你可以這樣思考: **選一個你有一定了解的行業，比如教培、電商、製造、金融、醫療** ，然後拆開看這個行業的日常運轉中，有哪些流程特別倚賴人工，有哪些資訊經常散落在多個系統或多個私聊裡，有哪些環節出錯率特別高但又不容易被立刻發現。圍繞這些地方，你往往可以設計出一些很聚焦的小工具。
+
+比如在教培行業，一個很具體的應用切口是做課程排班和教室利用率最佳化工具。它不需要取代整個教務系統，只要專注於讓教務老師更容易安排老師、教室和課程時間，自動避免衝突，給出最佳組合，匯出一份所有人都能看懂的課表，這一項就足以節省大量反覆溝通和修改的時間。
+
+在電商行業，一個常見需求是多渠道訂單管理。商家可能同時在不同平臺有店鋪，訂單資訊散落各處。如果你能提供一個把各平臺訂單抓取到一起、統一處理售後和物流資訊的小工具，就已經解決了他們每天重複操作中的一個巨大痛點。
+
+在製造業，很多企業仍然依賴紙質記錄或 Excel 來做生產進度追蹤。你可以從一個簡單的工單跟蹤工具入手，幫助現場管理者更直觀地看到每個工序的狀態，而不是一整天都靠問人和打電話。
+
+在金融或醫療行業，你的切入點未必是前臺業務，可以是合規檢查輔助工具，可以是文件模板生成，可以是審批材料清單管理。只要你能說清楚在某個流程裡，你讓哪一類崗位的哪一項任務變得更可控，就已經是一個值得嘗試的方向。
+
+以上行業的應用往往都有一些成熟公司的產品正在推廣，這其實為你提供了很好的參考路徑：你可以在網路上主動搜尋 “對應行業 + 核心需求 + 產品” 的關鍵詞（比如 “教培行業 教務排班系統”“電商 多渠道訂單管理工具”），不僅能找到具體的產品官網、功能介紹，還能看到使用者評價、行業案例甚至產品演示影片。這些資訊能幫你直觀瞭解成熟產品如何解決同類問題，避免從零摸索的試錯成本。
+
+## 3.4 根據使用者資料打磨: 從我覺得好到使用者覺得好
+
+應用做出來之後，最容易出現的一種錯覺是: 你自己越用越順手，覺得哪裡都挺合理，就以為使用者也會這樣。實際上，越是自己寫的產品，越容易對別人的問題視而不見。要讓應用逐漸從一個自我感覺良好的作品，成長為真正的好應用，你必須學會把真實的使用者反饋引進解決。
+
+### 設計簡單的反饋機制，讓使用者有出口說話
+
+不需要一上來就搞複雜的客服系統和資料平臺，你可以從一些非常簡單的方式開始。
+
+**羣聊是最直接的一種。** 如果你手裡已經有一個小範圍的使用者羣，可以邀請大家把平時使用過程中的問題和想法發在羣裡。你要做的是認真回覆、記錄並且定期總結，而不是在羣裡辯解或防禦。你越能在這個小羣體裡建立一種可以坦誠說話的氛圍，後面收集到的反饋就越有價值。
+
+問卷適合在你需要 **一次性收集較多結構化資訊的時候使用** ，比如在一個版本迭代之後，想知道大家對某幾個具體功能的感受。如果你希望填寫率高，問卷最好不要太長，問題要儘量具體，比如這一段時間你最常用的是哪個功能，在哪一步卡殼最多，而不是泛泛問你對這個應用總體感覺如何。
+
+使用後彈窗是另一個常用方式，比如在使用者完成一次任務後，用一個非常簡短的評分和建議框，問他這次體驗是否順利。有時一個簡單的數字評分，就足以幫你判斷某個流程是否存在明顯問題。
+
+一對一訪談用起來成本較高，但回報經常也更大。你可以 **挑選幾位不同型別的使用者，約他們花二十到四十分鐘** ，詳細聊聊他們平時的使用習慣，讓他們邊操作邊講你看到了什麼、感覺到了什麼。曾經看到一個創始人為了約使用者建議，每天安排了十多次會議和使用者進行對談，花時間理解使用者需求永遠都不會是壞事。
+
+### 學會從雜亂反饋裡提煉出三類資訊
+
+使用者反饋通常是混雜在一起的，很難一眼看清楚。你可以嘗試把它們分成三類:** bug、體驗問題、新需求。**
+
+**bug 指的是原本你說會發生某種行為，但在某些情況下完全沒有發生，或者發生了錯誤的行為** 。比如上傳失敗、閃退、按鈕沒有響應、結果明顯不對。對於這類問題，你要做的是儘快復現、修復，並且在修復後主動告知受影響的那批使用者，讓他們知道你是認真對待這些問題的。
+
+**體驗問題是在流程長度、操作位置、文案表達上沒有選到最順滑的路徑。** 比如使用者總是在某個按鈕上猶豫，不知道點了會不會造成不可逆的結果；某個功能很重要，卻被放在一個不顯眼的角落；某些預設設定和大多數人的習慣相反，導致他們每次都要多做一步調整。這類反饋需要你結合資料和觀察去判斷，決定是否做改變，以及改到什麼程度比較合適。
+
+**新需求是指使用者開始提出一些原本你沒想到的功能和場景。** 有些新需求確實值得認真考慮，比如多種匯出格式、團隊協作能力、和其他常用工具的對接。但也要注意，不是使用者提什麼你都要照做。真正要做的是辨別，這些新需求背後有沒有共性問題，是不是和你原本想服務的那羣人、那個核心任務一致。否則，你很容易被一堆分散的需求拉扯到各個方向，最後變成一個什麼都想做、卻什麼都做不精的產品。
+
+你可以養成一個習慣: 為每一條反饋打上標籤，標明它屬於 bug、體驗問題還是新需求。定期把這些標籤彙總，看看哪一類問題集中在哪幾個功能或流程上。這樣一來，你就不再只是被動地修補，而是能有意識地圍繞高頻問題展開迭代。
+
+### 用三個簡單指標，判斷要不要繼續投入
+
+在資源有限的情況下，你還需要一些簡單但有效的指標，來判斷這個應用值不值得你繼續長期投入。
+
+**第一個是留存。** 留存不是看某一天有多少人開啟，而是看在 **一段時間裡，有多少使用者還在持續使用** 。你可以很粗糙地統計，比如下載後一個星期內還有多少人至少用過一次，一個月內又有多少人回來過。如果大部分使用者只用了一兩次就再也不回來，說明你的應用在前期並沒有讓他們看到足夠的價值，或者使用門檻太高。
+
+**第二個是復訪頻率。** 那些沒有解除安裝你的應用的人，到底多久會回來一次。一款每天都可以用得上的工具和一款每季度才會被想起一次的應用，它們的產品定位不同，你要用不同的標尺來衡量。但無論哪種，你都應該能給出一個合理的使用節奏預期，然後對照實際資料，看有沒有大的偏差。頻率比你期望高，說明價值可能超出預期; 頻率遠低於預期，則要反思是不是場景抓得不準，或者使用體驗某處讓使用者感覺累。
+
+**第三個是推薦意願。** 有沒有人願意主動推薦你的應用給別人。這件事可以透過幾種方式觀察: 比如在使用者完成一次特別順利的任務後，提供一個自然的分享入口，看有多少人真正使用; 在羣裡看看有沒有人自發安利你的產品；或者進行小規模使用者訪談時問一句，如果你身邊有人遇到類似問題，你會不會推薦我這個工具給他。推薦意願通常比簡單的滿意度分數更能說明問題，因為推薦是一種帶有個人信用背書的行為，使用者只有覺得你真的幫了大忙，才願意把你的應用介紹給朋友。
+
+當你把這三個指標與前面講過的使用者反饋結合起來看，大致就能判斷出你的應用目前處於什麼狀態。也許功能還不完備，但有一批人已經留下來，並且會在特定場景反覆使用你，這樣的應用就很值得繼續投資和打磨。相反，如果修了很多 bug，堆了不少新功能，留存和復訪卻一直上不去，幾乎沒人主動推薦，這時候就要冷靜思考，是不是該收縮範圍，重新回到那個最初的核心場景，甚至考慮換一個方向。
+
+# 4. 在哪一步、怎麼合理地用 AI 放大價值？
+
+一旦你開始認真做一個應用，很快就會遇到一個普遍存在的誘惑: 能不能再加一點 AI 進去。這個誘惑之所以強，是因為你每天都在看到各種宣傳: AI 賦能某某行業，AI 徹底重構某某流程，AI 幫你一鍵搞定一切。久而久之，你很容易把一個原本樸素的問題變成一個充滿噱頭的口號，然後在技術棧裡堆上一些模型呼叫，看賬戶的錢逐漸虧光。
+
+雖然本教程教的是如何開發 AI 原生應用，談論該話題頗有些砸自己的飯碗嫌疑；但對於一個小應用或者剛起步的產品來說， **最危險的不是不用 AI，而是為了 AI 而 AI** 。你明明可以先做一個簡單但靠譜的工具，卻被各種新能力吸引，不斷往裡新增看起來很聰明的功能，最後把一個原本可以落地的方向做得又貴又複雜，還沒有明顯的價值提升。本章要解決的核心問題是解釋清楚: 在什麼階段、用在哪些環節、用什麼方式 AI 真正能幫你把應用的價值放大。
+
+## 4.1 不要為了 AI 而 AI
+
+要判斷自己是不是已經在不知不覺中為了 AI 而 AI，一個很實用的辦法，是在每次考慮加入某個 AI 功能之前，先強迫自己認真回答兩個問題。
+
+**第一個問題是: 不用 AI，這個應用是否也成立** 。也就是，把所有 AI 能力都暫時抹去，你做的這件事，本身是不是一件有價值的事，使用者有沒有現實需求，願不願意每天、每週、每月在這件事上投入真實時間。
+
+這句話聽起來有點逆勢，因為現在幾乎所有產品介紹都會把 AI 放在非常顯眼的位置，好像沒有 AI 就不算現代工具。但如果你的應用在沒有 AI 的情況下就完全站不住腳，很多時候說明的並不是你技術不夠先進，而是一個更深層的問題: 你抓的那個需求，可能本身就不痛不癢，甚至並不真實存在。
+
+想象一下，你要做一個幫助人整理待辦事項的工具。如果你主要的差異點是: 在待辦列表上加了一些模型生成的提示，比如自動起標題、自動分類、自動補全描述。但使用者原本在寫待辦時，根本不覺得起個標題有什麼痛苦，只是想快點把事情寫完，那這些聰明能力再花哨，也很難形成持續價值。相反，如果你先退一步，問清楚不用 AI 的時候，這個應用最樸素的價值是什麼，也許你會發現更紮實的方向: 幫使用者把散落在不同渠道的任務統一收集，幫他看清每天只能做完多少件事，幫他在日程結束之前看到風險，從而做減法和取捨。把這些基礎能力做紮實，往往比一上來就給待辦加上各種智慧標籤更重要。
+
+**第二個問題是: 用 AI 之後，具體提升了什麼。** 這裡不接受那種很寬泛的總結，比如提升效率、重構體驗、智慧升級，而是要落到一兩個連使用者本人都能清楚感知到的維度。
+
+你可以這樣盤問自己:
+
+- 有沒有顯著提升完成任務的速度，比如把原本要自己從零寫的一頁文案，變成只需要花五分鐘審閱和改寫
+- 有沒有明顯提升結果的質量，比如讓使用者在相同時間內產出更有條理、更專業、更符合目標受眾的內容
+- 有沒有讓使用過程變得更順暢或更輕鬆，比如把一段非常枯燥的表單流程，變成更像聊天的問答
+- 有沒有在真實成本上帶來下降，比如減少外包次數、減少人工客服時長、縮短培訓週期、縮短決策時間
+
+如果你在腦中給出的答案還停留在**感覺會**更方便一些、看起來更酷一點，那十有八九說明這個 AI 功能還沒有找到最關鍵的著力點。
+
+這兩個問題其實有一個很明確的排序。先保證不用 AI 的時候，這個應用也說得通，然後再在這個基礎上問，用加了 AI 之後具體好在哪。
+
+## 4.2 思考 AI 扮演了什麼角色
+
+當你確定這個應用就算不用 AI 也成立，而且已經找到一個清楚的提升點，下一步需要做的，是更具體地思考: **在你的應用中，AI 到底是做什麼的。** 很多產品在這一步出錯，是因為它們把 AI 當作一種很抽象的能量，而不是一個有具體分工的角色。結果就是，功能堆得很多，但每一塊的作用都模糊不清，使用者用起來也只覺得哪裡都沾一點智慧，卻說不出哪個地方真正離不開它。
+
+一個更加清晰的思路，是把 AI 當作幾種不同的部件: ** 它可以是大腦，是眼睛，是手** 。你需要根據你的產品目標，決定它在其中負責哪一塊，如果可以，最好一開始就只選一兩個角色把它做好，而不是一股腦全部塞進去。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image19.png)
+
+**當它扮演大腦時，主要負責理解和生成文字內容，或者在複雜資訊之間做推理。** 比如，你做一個會議紀要助手，它要能從一段長長的錄音裡，抓出真正核心的討論點，而不是簡單按時間順序羅列。你做一個學習應用，它要能根據使用者的回答，判斷他到底是沒理解概念，還是隻是粗心寫錯步驟，並給出不同的反饋。這類場景裡，AI 的價值在於它能讀懂使用者說的話，理解使用者給出的材料，然後生成一個帶結構、帶邏輯的輸出。你要做的，是幫使用者把問題問清楚，把上下文喂得足夠準確，讓這個大腦有足夠資訊做判斷。
+
+**當它扮演眼睛時，重點在於處理影象、影片等非文字內容，** 把這些東西變成機器可以理解的描述，然後再基於這些描述進一步行動。比如，你做一個整理紙質文件的工具，它可以透過拍照識別，把一堆發票、合同、包裝說明書變成可搜尋的文字。你做一個學習繪畫的應用，它可以看懂使用者畫的草圖，然後指出構圖和線條上的一些問題。你做一個家居整理建議工具，它可以透過使用者上傳的照片，識別出目前房間的佈局和物品分佈，再給出一些簡單可執行的改造方案。這裡 AI 的重點是: 它像是一雙會分析的眼睛，讓你的應用不再只能處理鍵盤輸入的文字，而是開始真正接觸使用者生活裡的實物世界。
+
+**當它扮演手時，意味著它開始去執行一連串具體的動作** ，而不僅僅是給出一個建議或者文字結果。比如一些自動化平臺，會讓你把多個步驟串成一條工作流: 從郵件裡讀取附件，把內容總結成要點，發到一個羣裡，再把原文存入雲盤，最後在任務管理工具中自動建立一條跟進任務。這裡 AI 的作用，是幫你在複雜的流程裡，根據上下文動態決定下一步該怎麼幹，比如識別一封郵件是不是投訴，判斷某個表單是不是填寫完整，再據此觸發不同的後續操作。
+
+除了上述簡單的描述，實際應用中，AI 承擔的角色往往會更加具體和多樣，例如：
+
+在文字處理方面，它可能是在做翻譯、摘要、問答、續寫或情感分析：比如客服系統裡自動分類使用者諮詢、法律文件助手裡提取合同條款、教育應用裡批改作文。
+
+- 技術基礎主要是深度學習中的 **大語言模型（** **LLM** **）** ：在海量語料上學習語言規律和世界知識，既能“看懂”長篇、多輪對話中的上下文，又能“寫出”連貫、風格一致的內容。
+- 在“理解”側，LLM 可以識別使用者意圖、提取關鍵資訊、判斷情感傾向；在“生成”側，則用於自動寫摘要、回答問題、進行續寫改寫以及多語言翻譯，把大量需要人工閱讀、歸納和撰寫的工作自動化或半自動化。
+- 以**線上客服機器人**為例：系統先根據使用者的一句話大致判斷屬於諮詢、投訴還是售後，並從話語中識別出訂單號、時間、商品名等關鍵資訊，然後交給 LLM 結合上下文和企業知識庫生成自然、完整的答覆，既減少人工壓力，又能在高峯期保持穩定服務質量。
+
+在影象處理方面，它可能是在做識別、分類、生成、修復或增強：比如醫療影像裡標註病竈位置、電商平臺裡自動摳圖換背景、設計工具里根據文字描述生成配圖。
+
+- 影象理解通常依託 **卷積神經網路** **（** **CNN** **）** 等視覺深度模型，從海量影象中學習邊緣、紋理、結構等特徵，用於目標檢測、影象分割和細粒度分類（如區分不同病竈、不同商品品類）。
+- 影象生成與修復依託 **擴散模型、** **GAN** ** 等生成式模型** ，可以根據文字描述或參考圖片生成全新影象，對模糊、缺失或低解析度影象進行修復和超解析度增強。
+- 很多系統還會結合 LLM：先用自然語言理解使用者的文字描述，再自動生成適合視覺模型的“提示詞”、風格標籤和構圖約束，實現從“聽懂你想要什麼”到“畫出你想要什麼”。
+- 以電商平臺的**“智慧主圖生成”** 為例：系統先用檢測和分割模型把商品從原圖中精細摳出來，再透過 LLM 解析商家輸入的文案（如“簡約北歐風客廳場景，柔和自然光”），轉成具體的場景、色調和風格引數，最後交給擴散模型生成匹配的背景和光影效果，並自動篩掉構圖不佳或風格不符的結果，輸出可直接用於上架的商品主圖。
+
+在音影片處理方面，它可能是在做音訊和影片的生成、轉寫、降噪、剪輯或字幕製作：比如播客工具裡自動生成開場和結尾的旁白、影片平臺里根據指令碼自動合成講解影片、會議軟體裡實時轉寫和翻譯對話並生成多語言字幕與錄播回放。
+
+- 在“理解”側，系統會用**語音識別模型**把語音轉換成文字，同時分析說話人、語種、語速和大致情緒；用視覺模型理解影片畫面中的場景、人物和關鍵物體。
+- 在“生成”側，以 LLM 為核心，對指令碼、會議內容或使用者指令進行理解、拆分和改寫，然後驅動 **語音合成** **（** **TTS** **）生成自然語音解說，驅動影片生成與編輯模型**自動合成或剪輯畫面、替換背景、插入鏡頭和字幕；音訊側的生成模型還能自動生成背景音樂和環境音，並配合深度降噪與音質增強提升整體聽感。
+- 以“ **文字生成短影片** ”類產品為例：使用者只需輸入一段文案，系統先用 LLM 把文章拆成幾個自然的段落和畫面，生成適合口播的解說詞和簡單的分鏡描述；然後由 TTS 模型合成配音，再由影片模板和生成模型根據分鏡選擇或生成畫面，在時間軸上自動對齊字幕與語音，最後一鍵匯出一條可以直接釋出的短影片。
+
+在語音互動方面，它可能是在做識別、合成、情緒檢測或對話管理：比如智慧音箱裡理解使用者指令、語音導航裡播報路線、語言學習應用裡糾正發音。
+
+- 前端由深度學習的**語音識別模型**將使用者語音轉成文字，並提取語調、音量、語速等特徵，為判斷情緒和狀態提供線索。
+- 後端透過 **語音合成（TTS）** 把這些文字回覆變成自然流暢的語音輸出，情緒識別模型會根據使用者當下的說話方式調整回覆的語氣和速度，讓互動更貼近真實對話。
+- 以**智慧音箱**為例：當使用者說“今天有點累，放點輕鬆的音樂吧”，系統先用語音識別轉成文字，再由 LLM 結合歷史播放記錄理解使用者偏好的“輕鬆”風格，自動選擇更舒緩的歌單；情緒識別判斷使用者處於疲憊狀態後，TTS 在合成回覆時會降低語速、柔化語調，讓整個交流過程既“聽得懂”，又“聽起來舒服”。
+
+以上內容只是對 AI 在幾個主要方向上的應用和技術做了簡單介紹。到了真實業務場景中，你往往需要把多種最新的 AI API 引入進來，在不同任務上做更全面的測試。你還需要逐漸搞清楚當前 AI 的能力到底有多強、能解決哪些問題、在哪些情況下容易出錯，它的邊界在哪裡。只有認識到這些，才能合理設計功能和流程，而不會因為誤判能力而埋下風險。
+
+接下來，我們就圍繞這一點，在下一節更系統地討論：如何理解 AI 的能力和邊界，在實際做產品時應該考慮什麼。
+
+## 4.3 熟悉 AI 能力與邊界
+
+當你開始實際把 AI 塞進應用時，很快會發現一個現實: 宣傳裡說的那套萬能，和具體到一個功能上的約束，有時候差距相當大。為了避免過度承諾、結果落空，**你需要對當前 AI 能力的幾個主要方向有個基本認知，同時明確它們各自的邊界在哪。你需要透過大量測試得到 Bad Case 進行反思，在使用中避開 AI 極有可能犯錯的情況。或需要對錯誤加上警示說明。**
+
+當前的模型在很多場景下依然存在胡編亂造的問題，尤其是在你讓它自由發揮、或者不給它足夠可靠的參考資料時。它有時候會給出看起來很自信但完全錯誤的答案，甚至會憑空捏造不存在的檔案、資料或經歷。因此，凡是結果涉及到嚴肅後果的場景，比如財務報表、法律文書、醫療建議，你都需要在設計裡明確加上一層人工校對或者多重檢查，不要把模型的輸出直接當作可以自動執行的指令。
+
+同時，隱私和資料安全也是你必須正視的一環。你要非常清楚哪些資料可以直接發給模型，哪些需要做匿名化處理，哪些乾脆不能出現在第三方系統裡。對於使用者上傳的合同、病歷、個人身份資訊等敏感內容，更要在介面和協議中明確說明你的處理方式，甚至在可能的情況下，為這些場景單獨選擇更加安全、可控的模型部署方式。
+
+更具體的，我們就借一個和智慧體 Agent 有關的例子，來說明什麼叫真正理解 AI 能力的邊界。注意，這裡並不是要教你怎麼從零實現一個 Agent，也不是要你現在就去追某一種架構，而是想透過這個例子，讓你看到一種思考方式：同樣是討論 Agent，有人只是把它當成一個新名詞，有人卻能借這個話題，把任務拆得很清楚、把邊界畫得很清楚。
+
+有一位長期在一線做 AI 應用的作者 Barret 李靖，給過一段我非常認同的總結，用來說明如何做好 Agent 和是否要利用 AI。它很好地體現了一種成熟的理解方式：先把問題拆開，再談 AI 的用武之地。
+
+> Agent 有兩個變數，一個是控制任務走向的 workflow 工作流，一個是控制內容生成的 context 上下文。
+>
+> 1）如果 workflow 和 context 的確定性都很高，這類任務就容易被自動化，類似傳統 RPA，比如在處理發票處理、表單填報任務時，AI 更多是粘合劑，發揮空間比較有限。
+>
+> 2）如果 workflow 確定但 context 不確定，也就是流程固定但輸入多變，就需要 Agent 在語義和理解上補全，比如客服問答、合同解析，需要透過外部檢索、知識圖譜等工具來彌補資訊的缺口，讓推理結果更符合預期。
+>
+> 3）如果 workflow 不確定但 context 確定，也就是輸入清晰但走法多樣，Agent 就要去自主規劃路徑，例如市場分析報告生成、個性化推薦等，大多數 End-to-End RL Agent 都擅長做這類任務，因為它們在訓練階段就習得了大量的路徑規劃和解題思路。
+>
+> 4）而當 workflow 和 context 都不確定時，就是最複雜的場景了，既要推理也要探索，像創新方案設計、跨部門資訊收集等，這類更偏向於通用型 Agent，它的執行效果，取決於給它配備的工具豐富度，尤其是程式設計能力要最大化開放，例如讓它學會去 Github 找倉庫克隆並修改程式碼來解決問題，讓它像人一樣幹活兒。
+>
+> 所以，要把 Agent 做好，首先要明確場景。本質上，自動化解決的是“確定性”問題，而智慧化解決的是“不確定性”問題。
+
+這個拆解方式的價值，就是把"做一個 Agent"這種模糊概念，轉化成了可以具體判斷的問題：你面對的任務，確定性和不確定性分別在哪裡？當流程和資訊都確定時，傳統程式就夠了；只有當不確定性出現時，AI 的語義理解、模式識別、推理規劃能力纔有用武之地。但同時，不確定性越高，AI 引入的新風險也越大。在兩頭都不確定的場景裡，AI 的每一步都可能偏離，你很難提前知道它會做出什麼選擇。這也是為什麼很多團隊會從第二象限（workflow 確定，context 不確定）開始做起，既能發揮 AI 的理解能力，又能透過固定的流程把風險框在可控範圍內。
+
+讓我們回到這一小節最開始想要解決的問題：什麼叫真正理解 AI 的能力邊界？
+
+首先是理解不同場景對 AI 的需求不同。就像前面 workflow 和 context 那個例子展示的：當流程和資訊都確定時，AI 其實沒什麼發揮空間，傳統自動化就夠了；當流程確定但資訊不確定時，AI 的價值在於理解和補全；當流程不確定時，AI 才需要做規劃和探索。這個拆解方式的本質，就是在識別不確定性的來源和程度。AI 的核心能力，就是在不確定性中找到模式和關聯。這套思路不只適用於 Agent，在影象識別、內容生成、推薦系統等各個領域都同樣重要。比如做一個 AI 摳圖工具，輸入是確定的（一張圖片），但邊緣識別的準確性、複雜背景的處理能力，就是不確定性所在。
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image20.png)
+
+但是，AI 在解決不確定性的同時，也會引入新的不確定，它的輸出是機率性的，可能理解錯、推理偏、產生幻覺。而不同場景、不同使用者對這種不確定性的容忍度完全不同。所以你還要問：
+
+**AI 引入的新不確定性，使用者和系統能不能承受？** 比如客服場景，如果 AI 理解錯了使用者意圖，使用者可以立刻糾正，這種不確定性是可控的。但如果是自動執行財務審批，AI 的一次誤判可能造成嚴重後果，這種不確定性就不可接受。再比如影象生成，如果是給使用者做頭像美化，生成效果不滿意使用者可以重新生成，試錯成本低；但如果是給建築設計師生成施工圖，哪怕一個細節錯誤都可能導致工程事故。
+
+**AI 的準確率能不能達到這個場景的及格線？而這個及格線，取決於使用者用它做什麼。** 同樣是影象識別，如果是幫使用者整理相簿、按人臉分類照片，識別準確率 80% 使用者也能接受，大不了手動調整幾張。但如果是用在安防監控場景，漏掉 20% 的可疑人員就是嚴重的安全隱患。同樣是文字生成，如果是幫使用者寫社交媒體文案，60 分的創意就夠了，使用者會自己潤色；但如果是生成法律合同條款，95 分都不夠，因為一個用詞不當可能引發法律糾紛。不同使用者、不同用途對錯誤率的敏感度完全不同，你要清楚你服務的場景，容錯空間到底有多大。
+
+**當 AI 出錯時，有沒有辦法補救？** 在 workflow 確定的場景裡，你可以在關鍵節點設定人工稽覈，把 AI 的不確定性控制在區域性。但在 workflow 也不確定的場景裡，AI 的每一步都可能偏離，你很難判斷它什麼時候需要介入，這時成本和風險都會急劇上升。比如在影象修復場景，如果 AI 把老照片修復得不夠真實，使用者一眼就能看出來，可以選擇不採用；但在醫學影像輔助診斷場景，如果 AI 把異常標記錯了位置，醫生可能很難發現，後果就嚴重得多。
+
+**你有沒有辦法衡量和最佳化 AI 的表現？** 如果這個任務本身就沒有明確的對錯標準，你怎麼知道 AI 做得好不好？如果使用者的反饋很滯後，你怎麼快速迭代？當你連衡量都做不到時，AI 的不確定性就會變成一個黑盒。比如推薦系統，你可以透過點選率、停留時長這些指標快速評估效果；但如果是生成創意廣告文案，什麼叫"好"本身就很主觀，可能要等到投放後才知道轉化率，迭代週期就會很長。
+
+真正成熟的判斷不是"這裡有不確定性，所以可以用 AI"，而是"這裡的不確定性 AI 能處理，AI 帶來的新不確定性我也能管理"。“在這個功能點上，AI 能幫到什麼程度，值不值得投入，怎麼投入價效比最高。”，我們需要形成這樣的判斷力，能夠幫助我們在之後每一次設計功能、評估方案時，少走很多彎路。
+
+# 5. 有了應用，怎樣從 0 找到第一批真實使用者
+
+當你好不容易把一個應用做出來，下一個難題就會變成：如何讓第一批真實使用者出現。
+
+很多團隊在這個階段會有一種錯覺，覺得既然東西已經做出來了，接下來只要想辦法把它推廣出去就行——做宣傳、買投放、找曝光，似乎只要讓更多人看到,就能自然跑起來。但如果你一上來就急著追求大規模曝光,很容易陷入一個典型的陷阱：燒掉了寶貴的時間和預算,資料上看起來有人來過,卻無法驗證這個應用到底有沒有人願意持續使用。
+
+這個階段最重要的事情,其實只有一件： **用儘可能小的代價證明,確實有人願意用這個應用,而且用完之後願意回來** 。在增長和產品的語境裡,這一步通常被稱為"冷啟動"。
+
+冷啟動指的是：在幾乎一切都是零的情況下,把一個全新的產品推到真正運轉起來的那一步。此時你沒有使用者基礎,沒有口碑傳播,沒有搜尋量和品牌認知,各項指標幾乎都停留在 0。你要在這樣一片冷寂的環境裡,讓第一批真正願意使用的人出現,並圍繞他們搭起一個最初的使用閉環。
+
+這和後來在一個已經有使用者、有資料的產品上做最佳化,是完全不同的一類工作，簡單來看，我們能按以下四個步驟進行推進：
+
+1. 首先知道增長可分成 0–1 和 1–N, 知道自己當前只需要搞懂什麼
+2. 弄清楚你真正要去找的物件有哪些,不要只盯著終端使用者
+3. 在清楚物件的前提下,選擇一兩條適合自己的冷啟動路徑
+4. 在資源有限的現實裡,學會取捨,把力氣收緊到最關鍵的一小塊
+
+## 5.1 先分清兩個階段：0–1 和 1–N
+
+在正式討論怎麼找使用者之前,你需要先明確一件事： **增長是分階段的** 。把所有增長相關的工作混在一起看,只會讓你不知道當下該把精力放在哪裡。最簡單也最實用的劃分方式,就是把增長拆成兩個階段：0–1 和 1–N。
+
+### 0–1：在沒有人用的情況下,怎樣冷啟動
+
+所謂 0–1,指的是從完全沒有使用者,到出現一小撮願意真正使用的使用者這段過程。冷啟動的"冷",就在於一開始幾乎所有指標都是零：無下載量,無搜尋量,無口碑,你的應用在這個世界上可以說是不存在的。
+
+這個時候,你不能指望自然流量和運氣,而是要主動出手,為它搭起最初的基礎。具體來說,有幾件必須完成的事情：
+
+**找到一小批願意真正使用的種子使用者** ,而不是隨便從熟人圈裡湊數。這些人必須對你要解決的問題有真實的需求,而不是出於人情或好奇點開看一眼就走。
+
+**準備最初的使用體驗和供給** ,確保使用者進來不會只看到一片空白。即便功能還不完善,至少要讓他們能完成一次完整的核心操作,感受到這個應用的價值。
+
+**把產品是做什麼的、解決什麼問題,用簡單的話講清楚** 。在沒有品牌背書的情況下,使用者給你的耐心只有幾秒鐘,你必須讓他們在最短時間內明白"這個東西對我有什麼用"。
+
+**想辦法拿到第一個觸達渠道** ,把這些資訊遞到潛在使用者手裡。可能是一個小社羣、一個論壇、一個朋友圈,關鍵不在於規模有多大,而在於能不能精準觸達那些真正需要的人。
+
+在 0–1 階段,你真正要考慮的是：把第一批有真實需求的人引進來,並且讓他們完成一次從進入到使用再到反饋的閉環。只要這個閉環能跑通,你就證明瞭這個應用不是空中樓閣,而是真的有人需要、願意用的東西。
+
+### 1–N：在已經有人願意用的基礎上,怎樣規模化
+
+當你慢慢積累了一批願意反覆使用的使用者之後,問題才會變成：怎樣從幾十人、幾百人,慢慢擴大到幾千人、幾萬人,甚至更多。這一段是傳統意義上大家常說的增長、擴張、規模化。
+
+在 1–N 階段,你要開始關心的是機制、組織、商業化、品牌、團隊等一整套更復雜的問題。比如：
+
+**是否已經找到相對穩定的獲客渠道** ,知道每投入多少預算或時間,大致能帶來怎樣的新增使用者。這時候你需要的不再是碰運氣,而是可重複、可預測的增長路徑。
+
+**有沒有開始搭建服務機制** ,比如客服、運營活動、使用者教育。使用者多了之後,你不可能再像早期那樣一對一地手把手教每個人怎麼用,必須建立標準化的服務體系。
+
+**打算怎樣讓這個產品賺到錢** ,是訂閱、單次付費、增值服務還是其他。商業模式不是一開始就要想清楚的,但當你進入 1–N 階段,就必須認真考慮如何讓這個產品可持續運轉下去。
+
+**想給使用者留下怎樣的品牌印象** 。早期你可能只是在小圈子裡傳播,但當使用者規模擴大,你需要思考如何讓更多人記住你、信任你,並願意主動推薦給別人。
+
+**團隊還缺哪些能力,哪些環節必須有人長期盯著** ,不能完全外包。一個人或小團隊能撐起 0–1,但 1–N 往往需要更多角色的配合。
+
+這些問題都很重要,但如果你在 0–1 階段就急著琢磨它們,往往只會讓你陷入空轉。因為在你還不知道這個產品是不是真的有人願意用、願意留下來的時候,談商業模型和品牌策略,只會把注意力從真正緊要的事情上引開。
+
+### 為什麼要先專注 0–1?
+
+對個人開發者、小團隊來說,比起 1–N, **真正最該關注的是 0–1** 。原因很簡單：如果你連第一批真實使用者都找不到,後面所有關於規模化、商業化、品牌建設的討論都是空談。
+
+0–1 階段是整個產品生命週期裡最脆弱、也最關鍵的時刻。它決定了你能不能證明這個產品的價值,能不能建立起最初的信任,能不能為後續的增長打下地基。只有當你真正跑通了 0–1,纔有資格去考慮 1–N 的問題。
+
+接下來,我們要進一步聚焦在 0–1 階段,把"究竟要去找誰"這個問題說清楚,然後再談具體的冷啟動路徑。
+
+## 5.2 冷啟動物件: 種子使用者、供給方、流量方和渠道方
+
+不同型別的應用，往往都繞不過幾種關鍵物件: 種子使用者、供給方、流量方和渠道方。
+
+### 第一類: 種子使用者
+
+**種子使用者是你最早觸達的那批使用者。** 他們的典型特徵是人數不多，但與你的目標畫像高度吻合。你要從他們身上獲得的不只是註冊和使用資料，更是一手的方向和體驗反饋。
+
+- 面向個人工具類產品，種子使用者可能是那一羣在某個問題上長期有痛點的人，比如經常寫長文需要整理的內容創作者，頻繁準備彙報材料的職場人士，或者每天要和大量資料打交道的學生
+- 對於教育類應用，種子使用者可能是一小撮正在準備同一場考試的考生，或者某個年級段的家長
+
+冷啟動時，你可以先給自己設一個明確的種子使用者目標，比如先找到二十到五十個願意配合的使用者，用一兩週時間邊使用邊對話。重點不是數量，而是透過高密度的交流把產品邏輯磨清楚。
+
+### 第二類: 供給方
+
+**在一些雙邊或多邊平臺型產品裡** ，單有使用者端是不夠的。如果沒有足夠的供給方存在，使用者即便被拉進來，也會因為找不到東西可用而迅速離開。
+
+**供給方可能是內容創作者、課程老師、服務提供者、商家、司機、房東**等，他們決定了平臺的豐富度和吸引力。
+
+- 做一個面向設計師的素材平臺，你需要先說服一批設計師願意上傳作品，哪怕只是小規模地開放一部分免費素材。否則使用者進來看到只是幾張示例圖，很難形成粘性
+- 做一個線上預約工具，如果沒有提前對接好一些有意願使用的商家或機構，普通使用者進來後一樣找不到可以實際預約的物件
+
+冷啟動時，你要非常清楚地知道，自己是在先解決使用者端，還是先解決供給端，還是兩端同步推進。很多平臺在早期都經歷過這樣的取捨和權衡。只要你意識到這是一個必須正面面對的結構性問題，就已經比那些只想著多拉點終端使用者的人走前了一步。
+
+### 第三類: 流量方
+
+流量方是那些可以在**較短時間內，把一定規模使用者注意力導向你的人或機構。它們可能是達人博主、垂直賬號、媒體、社羣運營者，也可能是某個擁有大量使用者的工具平臺。**
+
+- 一個職場工具類產品，如果能說服幾個職業發展博主，在內容中自然地介紹你的應用，就有機會在短時間內獲得一批對職場效率工具敏感的人
+- 一個針對小紅書創作者的選題助手，如果能和幾位中腰部博主合作，讓他們在實戰案例中展示使用過程，那麼這批創作者天然就是你的潛在種子使用者
+
+在冷啟動階段，你不必急著找最大牌的流量方，甚至不必馬上去跟頭部談合作。很多時候，那些規模適中但與目標人羣高度重疊的小流量方，反而更願意和你一起做一些定製化的嘗試。你要做的是找到這類人或機構，然後拿出一個清晰的合作提案，讓對方看得懂你要做什麼，能給他們帶來什麼好處。
+
+### 第四類: 渠道方
+
+渠道方是那些可以幫助你在 **特定場景下穩定觸達目標使用者的組織或入口** 。它們和流量方的區別在於: 流量方更偏向一次性的注意力匯入，而渠道方更像是長期的、結構化的連線方式。
+
+- 學校、培訓機構、企業、行業協會、軟體服務商，都是典型的渠道方
+  如果你的應用能切實幫助某類機構提高效率、節省成本或提升服務質量，他們有動力把你的產品介紹給自己體系內的大量使用者
+
+冷啟動階段，你不必妄想一口氣拿下大型渠道，可以從一個小範圍試點開始。比如和一兩個班級、一家小公司、一個本地社羣合作，讓他們在內部先使用一段時間，然後根據反饋再決定要不要放大規模。
+
+把冷啟動物件拆開來看，有一個直接好處，就是能避免你所有精力都砸在終端使用者拉新上，而忽視了產品結構裡其他關鍵一環。你可以根據自己的產品形態，畫一張簡單的角色圖，寫清楚每一類物件是誰、現在有多少、短期內你的目標分別是什麼。在這張物件圖清楚之後，我們再來談具體冷啟動路徑。
+
+## 5.3 冷啟動方法: 針對不同物件的三條主路徑
+
+當你知道了自己要去找的人是誰，下一步纔是: 透過什麼路徑去找到他們、服務他們。
+
+在實際操作時，你不必拘泥於某一種路徑，而是根據自己的資源狀況和產品特性做選擇。大多數時候，你會以其中一條為主線，另外一兩條做補充。
+
+### 路徑一: 用種子使用者破局，優先用好私域
+
+這一條主要是針對種子使用者和部分供給方。
+
+對於大部分剛起步的個人開發者、小團隊甚至初創公司來說，最現實、成本最低也最容易掌握節奏的辦法，通常都是從自己已有的私域出發。
+
+所謂私域，不是某種複雜的運營概念，而是你已經可以主動觸達的一批人羣，比如你的朋友圈、你參與的行業社羣、你有話語權的興趣羣、你維護了一段時間的公眾號讀者等等。
+
+在這條路徑裡，大致有三個關鍵動作:
+
+1. **主動邀請少量精準使用者體驗**
+   關鍵不在於數量，而在於和目標畫像的匹配度。你做的是面向職場新人寫簡歷的工具，就優先找剛畢業一兩年的同學、在校準備實習的學弟學妹，而不是已經工作十年的熟人。
+   邀請時儘量說清三件事:
+   1. 這是一個為哪類人解決什麼問題的應用
+   2. 希望對方大概花多久時間試用一下
+   3. 你會怎樣對待他們提供的反饋
+2. **有意識地收集反饋並快速最佳化**
+   種子使用者的價值不在於幫你湊數，而在於幫你看清楚產品的盲區。可以透過一對一聊天、小問卷等方式，問清楚: 在什麼場景會想起用它、用的時候卡在哪裡、哪一部分最有用或完全用不上。
+3. **讓種子使用者產出首批內容或案例**
+   真實使用痕跡就是內容。評價、對比截圖、使用故事，都可以是你後續對外介紹時的素材。
+
+在這個過程中，要特別剋制住一上來就追求大規模擴散的衝動。如果你連這幾十個人都沒有服務好，僅僅依靠更大的曝光把更多人推到同樣的坑裡，本質上只是在放大問題，而不是在解決問題。
+
+### 路徑二: 用內容或福利驅動，給出足夠明確的第一理由
+
+這一條更多是針對種子使用者加流量方，在競爭激烈的賽道里尤其常見。
+
+當使用者有很多替代選擇時，光靠一句新人快來試試很難打動他們，你需要給出一個更明確、更有吸引力的理由，讓對方願意花時間邁出第一步。
+
+常見的兩種切入方式:
+
+1. 直接用**實打實的福利做引子**
+   1. 新上線的課程平臺，可以在早期開出幾門高質量的免費課程，或者提供限時優惠名額
+   2. 電商類應用常用補貼紅包、低價拼團、滿減券等方式，讓新使用者覺得先來一趟不會喫虧
+2. **用垂直內容持續吸引**
+   在抖音、小紅書、公眾號、播客等平臺上，圍繞目標使用者關心的某個垂直主題，穩定輸出有價值的內容，比如職場乾貨、程式設計技巧、情緒管理、美食教程、學習方法等等。
+   透過內容吸引來的第一波人，不一定馬上轉化成你的應用使用者，但至少已經對你有基礎信任，當你適時丟擲工具或應用時，他們更有可能認真看一眼。
+
+如果你走的是內容驅動，就要接受這是條比較慢熱卻回報長線的方式。你需要持續投入精力，把內容做得紮實，避免一開始就被播放量、閱讀數牽著走。 **真正能幫你冷啟動的是那一小批在內容裡找到共鳴的人，而不是短時間湧來又很快消散的流量。** 無論是福利還是內容匯入，最後都要落到同一句話上: 一定要把人順暢地引導到你的應用裡，讓他們完成一次完整的體驗。
+
+### 路徑三: 借力大平臺，在已有生態裡找突破口
+
+這一條主要是針對供給方、流量方和渠道方。
+
+在很多領域，一個新應用如果想完全靠自己建生態，代價非常高。但如果你願意先把自己當作一個在大平臺上的新店、新賬號、新外掛，冷啟動的難度會降低很多。
+
+- 電商領域，新店入駐淘寶、拼多多、京東等平臺，至少不用從零搭建支付、物流、評價系統。冷啟動時常用的方式包括達人帶貨、站內推廣與活動位、直播等
+- 工具類、內容類應用，可以透過為成熟平臺開發外掛、小工具，把服務上線到開放平臺的能力市場，讓已經有明確需求的使用者更容易找到你
+
+這條路背後的邏輯，是 **承認大平臺已經把使用者聚集在一些特定場景裡，而你要做的是在這些場景中找到與你產品匹配的那個小角落** 。借力並不意味著放棄獨立性，而是在冷啟動階段，用一個更現實的方式開啟局面。
+
+## 5.4 資源有限時的取捨：在 0–1 階段只做最關鍵的一小塊
+
+當你已經確認自己還在 0–1 階段，搞清楚了要服務的物件，也大致選好了冷啟動的路徑，卻發現資源根本不夠用。
+
+這裡的資源不只是錢，還包括時間、精力、人手、注意力、人脈和渠道。冷啟動時，如果你一上來就想“多條路一起試”，結果往往是：每天都很忙，事情做了不少，但沒有任何一條路徑被走深，最後既沒有拿到有說服力的結果，也沒真正看懂使用者。
+
+在這個階段，你需要刻意收縮。目標不是“做得多”，而是“把最關鍵的一小塊做紮實”。可以從三個角度來重構自己的行動方式。
+
+### 從目標到具體的任務
+
+很多人在冷啟動時給自己設的目標是“先看看市場反應”“先把使用者做起來”“先拉一波人試用”。這些說法太泛，你很難判斷每天做的事情到底有沒有真正靠近這個目標。
+
+更務實的辦法，是把目標收緊成一件具體的小事，比如：在接下來的四周，讓二十個符合目標畫像的真實使用者，在自己的真實場景裡，多次完整使用你的應用，並且從他們那裡拿到足夠具體的反饋。
+
+**所謂“細分人羣”，不是“任何可能會用到這類工具的人”，而是你可以指著某個標籤具體描述出來的一羣人。** 比如你做的是一個幫人生成工作彙報的工具，那麼目標可以是“網際網路運營崗的一到三年從業者”，而不是籠統的“職場人士”。這羣人有幾個共同點：每個月確實要做彙報，時間有限，又想讓內容看起來專業一點，他們的問題是具體而持續的。
+
+**“完整使用任務”同樣不能含糊** 。以這個彙報工具為例，一次完整任務可能是：使用者把最近一週的運營資料和素材整理好，匯入工具，生成一版初稿，然後根據推薦的結構和要點修改兩到三輪，最後匯出 PPT 或文件，真正拿去在部門會上講。如果使用者只是隨便點兩下，看看大概長什麼樣，就關掉不再開啟，這不能算完整使用。
+
+具體反饋要問到足夠細。比如：
+
+- 在匯入資料的時候，有沒有哪一步看不懂、找不到入口，或者總是點錯地方；
+- 生成的結構是不是貼近他所在公司的彙報習慣，比如是不是有他需要的“背景–目標–過程–結果”這套格式；
+- 哪些頁面是他真正拿去用的，哪些頁面每次都會刪掉；
+- 使用之後，他是不是能明顯感覺到自己準備一次彙報的時間從三小時縮短到了一個小時，還是隻是覺得“好像方便了一點，但也說不上來”。
+
+### 不要什麼都想試一遍
+
+確定了“小目標”之後，下一個問題是：用什麼方式去找到這二十個使用者，並陪他們把真實場景跑一遍。
+
+冷啟動的方法很多：寫內容、建社羣、做投放、找達人、找機構、上平臺。但在資源有限的前提下，你需要的不是知道方法有多少種，而是**以現在的你，哪一種方式最自然，最容易持續做下去。**
+
+如果你平時就習慣寫長文，有一批會認真讀完你文章的人，那你可以優先從內容出發。比如，寫一篇非常具體的實戰記錄，講自己是怎麼用這個工具準備一次真正的月度彙報的：從拿到原始資料開始，到構思結構，到生成草稿，到修改細節，再到實際在會議室裡播放。中間可以插入幾張對比截圖，展示用工具前後在時間、效果、條理上的差別。文章最後不要只是放一個冷冰冰的下載連結，而是明確說：如果你也是做運營彙報的，願意和我一起把這個工具打磨好，可以加我或填一個簡單表單，我會選二十個人一對一跟進。
+
+如果你掌握著幾個穩定的社羣，比如一個運營交流羣，一個校友職場羣，那麼你更適合從這些“私域”開始。你可以在羣裡開誠佈公地說：我在做一個幫人生成彙報的工具，剛剛能用，但還很粗糙，現在想找一批確實有彙報需求的人，陪我一起把它用順。自薦的人當中，你再根據崗位、工作內容去挑出最匹配的那一批，單獨拉一個小羣，在裡面請他們試用、發截圖、吐槽、提意見，自己每天花時間去跟進。
+
+如果你在某個垂直行業裡有人脈，比如和幾位培訓機構老師關係不錯，或者認識一家中小公司的業務負責人，可以把試點做到一個班級或者一個小團隊裡。具體做法可以是：提出一個清晰的試用方案，比如接下來一個月，這個團隊所有的週報都嘗試用你的工具來生成，你提供實時的支援和調整，作為交換，他們每週和你開一次十分鐘的小會，告訴你用得最順的地方和最難受的地方。
+
+### 只打磨最關鍵的部分
+
+當你有了小目標，也選定了主路徑，接下來要做的事是給自己加一個只做這一小塊的限制。
+
+很多團隊在冷啟動階段的共同特徵是：焦慮。一旦焦慮起來，就很容易往外找新動作：是不是也該弄個短影片賬號，拍幾個使用教程；是不是也該花一點預算做個小投放試試；是不是應該去聯絡幾個媒體，看看能不能寫一篇報道。**每一件看上去都無可厚非，但合在一起的結果，是你每天都在換方向，始終沒有哪一條路沉下去。**
+
+**可以給自己定一個很具體的階段約束，比如接下來四周，只集中做兩件事** ：一是圍繞那二十個使用者，反覆最佳化他們在真實場景下的使用體驗，讓他們從“勉強能用”變成“基本順手”；二是沿著你選定的主路徑，持續找到少量新使用者，並把他們的行為和反饋記錄下來，看看和前一批人有什麼共性和差異。
+
+在這四周裡，遇到任何新的想法、新的機會，都先問自己一句：這件事，是否能在這段時間內顯著推動那二十個使用者用得更好，或者清楚地幫我找到下一批類似的使用者？
+
+這種做法的背後，是一個對冷啟動本質的承認：你手裡掌握的資訊很有限，無法同時在很多方向上做出好判斷。與其在十個地方各做一點，不如在一個具體的場景、一個具體的羣體裡，做出可以反覆驗證的改進。比如，你可以很明確地看到：在這一批運營新人身上，工具確實把準備彙報的時間縮短了，確實讓他們更容易說清楚重點。
+
+你需要走通一條“ **找到使用者 → 引導使用 → 收集反饋 → 改進體驗 → 使用者願意繼續用”的閉環。** 之後才知道應該去找什麼樣的使用者，用什麼話和他們溝通，在哪個環節最容易出問題，做什麼調整可以把他們拉回來。等這條路被你走順了，再考慮加一個新渠道、試一類新合作，纔有意義。
+
+# 總結
+
+回到最開始的問題：我要做一個應用，這件事到底從哪兒開始，纔是靠譜的開始。
+
+本篇文章的全部內容，其實就是圍繞一個主線在展開：**先搞清楚什麼是點子，再看它和使用者需求之間的關係，然後一步步把它拆成能做出來、能被用起來、能被打磨好、能被 AI 放大、能找到使用者的一整條使用路徑。**
+
+先是第一章，我們從點子本身出發，一個點子不再只是你腦子裡的那句感覺挺酷，而是必須面向一類清晰的使用者， **紮在某個具體場景裡，幫他們完成一件具體任務，並且給出比現狀更好的做法** 。你學會從**玩法、使用者鏈路、做什麼事情、解決什麼問題**這四個維度去審視自己的想法，也開始意識到，點子和使用者需求之間有一道很容易忽略的鴻溝。你壓抑住自嗨的衝動，開始分辨真需求和假需求，承認好點子和壞點子在一開始就有命運上的差別。然後，你不再被動等靈感，而是學會從自己熱愛的生活、人羣資產、公開場域和現有產品裡主動挖掘線索；再往下，你訓練自己用一句話概括一個點子的本質，用 AI 做頭腦風暴，在常見方向裡找到屬於自己的人羣和場景差異化。
+
+接著在第二章，你不再停留在想，而是 **開始學會動手** 。你學會在**發散和\*\***收斂**之間來回切換，用雙鑽的方式先把點子鋪開，再按使用者價值、可行性和時間成本 **收緊到一個真正的可行路線** 。你練習 **從抽象到具體** ，把我想做一個提高效率的應用這類模糊願望，一層層拆成最小可行動項，直到每一個步驟都變成今天可以動手的任務。你拿起白板或紙筆，先畫再做，把一個應用分成入口頁、操作頁、結果頁，畫出使用者從走進來再到拿到結果的完整鏈路。你也不會再把參考別人當成抄作業，而是有意識地 **分析別人的導航、表單、結果展示和引導流程，借力現成經驗\*\* 。同時，你不再等到產品完全做完纔去問使用者，而是在原型和半成品階段，就有意識地邊畫邊問，邊做邊問，讓真實使用者儘早介入你的設計。
+
+第三章裡，你慢慢建立起一套自己的判斷標準，來區分什麼只是能用，什麼可以算好用。你 **不再模糊地說這個應用還不錯，而是具體看它有沒有幫使用者節省時間、降低錯誤率、減少溝通成本、減輕心智負擔** 。你知道一個 **好應用應該讓人幾乎不用說明書就能上手** ，在關鍵場景會自然想到你，也懂得好應用背後真正的利他心。你開始把實際問題和使用者痛點拆到邊際成本的層面，分辨這背後到底是在消耗時間、金錢、心力還是風險。同時，你對 **C 端和 B 端的差異**有了初步認識，明白了前者更在意情緒價值和傳播，後者更關心效率、成本、風險和合規。你不再只相信自己覺得好，而是搭起簡單的反饋機制，用留存、復訪和推薦這三類指標，判斷這東西值不值得繼續投入，用一次次使用者反饋把應用從我覺得好打磨成使用者覺得好。
+
+到了第四章，你把視角從純產品，擴充套件到了 AI 能力。你先 **壓住那種為了 AI 而 AI 的衝動** ，認真地問自己兩件事：不用 AI，這個應用是否也成立；用了 AI，具體提升了什麼。你熟悉 AI 在文字、圖片、影片和自動化上的基本能力與邊界，知道哪些地方可以放手交給模型，哪些地方必須有人類複核。你不會只停留在實現功能層面，而是盯住一些更本質的指標：任務完成時間有沒有縮短，結果質量是否更好，使用頻率有沒有提升，使用者願不願為 AI 功能單獨付費。
+
+最後的第五章，把這一切拉回到一個現實問題上：就算你已經有了一個還不錯、甚至用上 AI 的應用，如果沒有使用者，它的價值依然是零。你先 **學會把 0–1 和 1–N 區分開來，暫時放下所有關於規模化、品牌和組織的宏大問題，把注意力集中在一件事上：先想辦法讓二十個真實使用者用起來** ，並且用完願意回來。你不再盲目撒網，而是沿著三條主線冷啟動：用身邊的社羣、同行和朋友，慢慢積累種子使用者；用內容和有限的福利去吸引第一批願意嚐鮮的人；借力現有平臺和渠道，在別人已經有流量的地方為自己搭入口。你也開始按物件去拆冷啟動的策略，區分種子使用者、供給方、流量方和渠道方，各自用不同方式打通。資源有限時，你不再什麼都想做一遍，而是看清自己最擅長和手頭最容易啟動的一條路，先把這一條路走深走透，而不是一口氣鋪十個半成品的渠道。
+
+如果把這些內容合在一起，你會發現整套方法並不神祕：**從一個靠譜的點子出發，確保它紮根在真實需求上；用畫、寫、拆的方式，把它\*\***收斂\*\* **成一個最小可行應用；用真實使用者和明確指標，一點點把它打磨成好應用；在關鍵點上合理引入 AI 放大價值；最後，在有限資源下，用合適的冷啟動方式找到第一批願意為它買單的人** 。
+
+下一步你只需要放棄過多的幻想，踏踏實實選定其中一個做出來並推出去，讓它真正進入真實世界裡接受檢驗。**所有關於點子、方法論、AI 和增長的討論，最後都要落在一個具體的人、一個具體的場景、一個具體的任務上。**
+
+正因為如此，一開始做得很粗糙沒關係，功能殘缺、流程生硬、介面簡陋都沒關係；推了半天沒人理你、更沒人願意註冊和付費，也依然沒關係。這些都只是過程狀態，不是終局結論；它們只是在告訴你下一步可以如何修改，真正重要的是你得有進步，在過程中你需要不斷覆盤、總結、提高極限、認識更多願意給你建議的人。
+
+在這個階段中，筆者認為，只需要享受過程就好。就像一個有名的電子故事遊戲《去月球》說的那樣：
+
+**_"The ending isn't any more important than any of the moments leading to it."_**
+
+**_結局永遠也不會比過程更重要。_**
+
+![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image21.png)
diff --git a/docs/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
new file mode 100644
index 0000000..4bc4f27
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md
@@ -0,0 +1,359 @@
+# 七款 AI 程式設計工具對比
+
+## 本章導讀
+
+面對琳琅滿目的 AI 程式設計工具，哪一款才最適合你？本章透過一個統一的實戰任務——開發“貪喫蛇 + AI 寫詩”遊戲，對 Lovable、Replit、Z.ai 等 7 款主流 Web Vibe Coding 平臺進行了深度橫向評測。我們將從新手友好度、程式碼可控性、部署便捷性等多維度對比，助你快速選出最強開發輔助工具。
+
+---
+
+# 1. 用 Vibe Coding 搭建貪喫蛇遊戲：完整實戰教程
+
+本文介紹了一種新興的軟體開發實踐——“Vibe Coding（氛圍式編碼）”，它利用人工智慧來加速應用構建過程。
+
+接下來我們將依次介紹 Vibe Coding 的核心概念、解釋什麼是 AI Agent，並給出實用的提示詞編寫方法。最後，會透過從零開始構建“貪喫蛇（Snake）”遊戲的完整實戰，並對多個主流 Vibe Coding 平臺進行詳細對比評測，幫助你選擇最適合自己的工具組合。
+
+## 你將學到：
+
+- **什麼是 Vibe Coding：** 瞭解它的定義、工作流和關鍵優勢。
+- **AI Agent 的角色：** 理解 AI Agent 的工作方式，以及它與傳統程式的差異。
+- **如何寫好提示詞：** 掌握清晰、具體的提示詞寫法，以獲得更好的結果。
+- **Vibe Coding 工具：** 認識一批主流的 AI 程式設計與設計平臺。
+- **平臺對比：** 從初學者視角出發，對 7 個不同 AI Agent 平臺的優劣勢進行評測與對比。
+- **UI / UX 工具：** 學會如何將 Figma、Mastergo 等 UI/UX 工具融入到整體工作流中。
+
+## 1. 引言
+
+在此前的課程中，我們一直使用 z.ai 的全棧開發模型來完成程式設計任務。
+
+不過，我們是否想過：它的核心其實是 “AI Agent”（與普通聊天式 AI 不同，而且要智慧得多）？這是因為它不只是和你對話，而是能夠進行思考（當你給它任務時，它會先制定計劃），還能主動採取行動（比如呼叫網頁搜尋、執行電腦命令、開啟網頁等工具）。我們稍後會詳細介紹。
+
+## 1. 什麼是 Vibe Coding？
+
+Vibe Coding 是一種利用 AI 加速應用開發流程的新型軟體開發方式。它並不是傳統程式設計的替代品，而是一種更加“對話式”的程式設計模式。這個概念由 AI 研究者 Andrej Karpathy 提出：在這種工作流下，開發者不再逐行手寫程式碼，而是主要透過引導 AI Agent 來生成、最佳化和除錯應用。
+
+Vibe Coding 的核心思想，是從 **“以程式碼為中心（code-first）”** 轉變為 **“以意圖為中心（intent-first）”**。你不再需要從第一行程式碼開始構思，而是用自然語言描述你想要的結果。
+
+典型的 Vibe Coding 工作流程是一個不斷迭代的迴圈：
+
+- **描述目標：** 先用一句話或一段話描述你想要實現的功能，例如：“做一個帶有 Python 後端、可以生成詩歌的簡單貪喫蛇遊戲。”
+- **AI 生成程式碼：** AI Agent 解析你的需求，生成初版程式碼，包括基本結構、前端頁面和後端邏輯。
+- **執行並觀察：** 執行生成的程式碼，檢查其是否按預期工作，同時發現 bug 或不足之處。
+- **反饋並迭代：** 如果有錯誤或效果不理想，就在對話中繼續下指令，例如：“蛇移動太慢了，把速度調快些”，或者“現在 `.env` 檔案裡的 API Key 沒被正確讀取，請修復後端程式碼。”
+- **重複上述步驟：** 不斷在“描述 → 生成 → 執行 → 反饋”的迴圈中迭代，直到應用達到滿意的狀態。
+
+### Vibe Coding 的主要優勢：
+
+- **降低門檻：** 讓缺乏程式設計經驗的設計師、創業者、學生等，也可以透過自然語言參與應用開發。
+- **快速原型：** 從想法到最小可行產品（MVP）的時間大幅縮短。
+- **提高效率：** 自動處理大量重複、機械的編碼工作（如模板程式碼），讓開發者可以把精力放在架構設計和問題抽象上。
+- **利於試驗：** 鼓勵先快速產出，再不斷完善的方式，更便於嘗試新點子和新功能。
+
+## 2. 什麼是 Vibe Coding 線上平臺（Web-based）？
+
+在本次實測中，你會發現我們評測的工具被分為了兩類：**Web-based（線上平臺）** 和 **IDE（本地開發環境）**。
+
+雖然它們的核心都是用 AI 幫你寫程式碼，但在使用體驗和適用場景上有著巨大的區別：
+
+### Vibe Coding 線上平臺 (Web-based)
+
+**代表工具：** Lovable, Replit, Z.ai, v0
+
+這就像是“拎包入住”的酒店式公寓。
+
+- **無需環境配置：** 你不需要關心什麼是 Python 環境、Node.js 版本，也不用管依賴安裝。開啟瀏覽器，輸入網址，直接就能開始寫程式碼。
+- **一鍵預覽與部署：** 程式碼生成後，平臺通常會自動在右側視窗展示執行效果。做好了，點一個按鈕就能生成一個連結分享給朋友。
+- **適合場景：**
+  - **快速驗證想法（MVP）：** 腦子裡有個點子，想花半小時看看能不能做出來。
+  - **新手入門：** 完全不想被複雜的環境報錯勸退，只想體驗 AI 程式設計的樂趣。
+  - **輕量級應用：** 做個簡單的工具網頁、小遊戲或者個人展示頁。
+
+### AI IDE (本地開發環境)
+
+**代表工具：** Cursor, Trae, VS Code + AI 外掛
+
+這就像是“精裝修”的自有住房。
+
+- **強大的本地能力：** 它執行在你的電腦上，可以直接訪問你所有的本地檔案，利用你電腦的算力。
+- **無縫對接專業工作流：** 適合大型專案，可以自由安裝各種外掛，連線本地資料庫，進行復雜的除錯。
+- **適合場景：**
+  - **專業專案開發：** 需要長期維護、結構複雜的商業專案。
+  - **深度定製：** 需要對程式碼細節有極致掌控，或者需要與現有的本地工作流（如 Git、Docker）深度結合。
+  - **資料隱私：** 程式碼完全在本地，更符合某些企業的安全規範。
+
+**總結來說：** 如果你是剛開始接觸 AI 程式設計，或者只想快速做一個小東西玩玩，**線上平臺**是絕佳的起點。如果你是專業開發者，或者專案越來越複雜，**本地 IDE** 則會提供更高的上限。
+
+---
+
+## 3. 什麼是 AI Agent？
+
+### 什麼是 AI Agent？
+
+AI Agent 是一種軟體系統，它能夠感知環境、做出決策，並自主採取行動來實現特定目標。與遵循固定指令、流程單一的傳統軟體相比，AI Agent 更加靈活和自適應。
+
+下面是一些將 AI Agent 與傳統程式區分開的關鍵特徵：
+
+- **自主性（Autonomy）：** AI Agent 具有較高的獨立性。傳統程式通常需要人一步一步觸發，而 Agent 可以根據目標自主決定下一步要做什麼。
+- **感知與記憶（Perception & Memory）：** Agent 會從環境中收集資料（例如 API 響應、感測器資料、使用者輸入等），並透過“記憶”保留上下文，從而在後續行動中複用經驗、持續改進效果。
+- **理性與目標導向（Rationality & Goal-Orientation）：** Agent 會圍繞給定的目標進行分析與規劃，選擇最合適的行動序列來追求更高的“績效指標”。
+- **工具使用（Tool Use）：** 現代 AI Agent 的一大特徵，是可以呼叫外部工具，不再侷限於“生成文字”。例如，它可以瀏覽網頁、執行程式碼、查詢資料庫、傳送郵件等，是一個會“排程工具”的大腦。
+
+可以這樣類比理解：
+
+- 一個 **傳統程式** 像是計算器。你給它輸入數字和運算子，它只在你按下按鈕時執行計算。
+- 一個 **AI 助手** 像是人類助理。你讓它“幫我找附近的餐館”，它會給你搜尋結果並列出選項，但最後還是由你做決策。
+- 一個 **AI Agent** 則更像是一支自動化研究團隊。你只需要給出高層目標（比如“幫我規劃一次日本旅行”），它就會分解任務、上網查資料、預定機票酒店（透過 API）、整理日程，最終把結果交付給你，全程幾乎不需要你幹預細節。
+
+---
+
+# 2. 關於提示詞編寫
+
+## 1. 提示詞一次寫完好，還是拆成多步更好？
+
+很多人會忍不住想直接在一個提示詞裡，把“做一個完整的全棧應用”一次性說清楚。事實上，當前工具已經足夠強大，確實有機會一次性給出一個看上去還不錯的結果。但從整體體驗和成功率來看，把工作拆成小步驟、按階段迭代，效果往往會更好，也更不容易陷入“改不動”的死衚衕。
+
+> **小提示：** 與其期望“一次到位”，不如把大目標拆成一條條可執行的小待辦（To-do）。  
+> 例如，不要直接說 “build me a Snake game”，而是拆成：  
+> “1. 先做一個貪喫蛇遊戲的前端”，  
+> “2. 再實現一個記錄分數的後端”，  
+> “3. 最後把前後端連起來”。  
+> 這樣能讓 AI 更準確地理解你的需求並給出更可靠的輸出。
+
+## 2. 越清晰，越好
+
+- 在 Vibe Coding 中，你寫的提示詞和你寫的程式碼一樣重要。提示越清晰、越具體，結果就越接近你心中所想。
+- 一開始就把目標與約束條件說清楚，可以減少後續反覆修改的次數，這不僅省時間，也能節省使用額度和成本。
+
+---
+
+# 3. 工具總覽（Vibe Coding / UIUX 工具）
+
+## 1. AI Agent 平臺
+
+| **Name**                                   | **Platform** |
+| ------------------------------------------ | ------------ |
+| **[Lovable](https://lovable.dev/)**        | Web-based    |
+| **[Cursor](https://cursor.com/cn/agents)** | PC           |
+| **[Z.ai](https://chat.z.ai/)**             | Web-based    |
+| **[Replit](https://replit.com/~)**         | Web-based    |
+| **[Minimax](https://agent.minimaxi.com/)** | Web-based    |
+| **[Trae](https://www.trae.ai/)**           | PC           |
+| **[V0](https://v0.app/)**                  | Web-based    |
+
+## 2. AI UIUX 平臺
+
+| **Name**                              | **Platform**         |
+| ------------------------------------- | -------------------- |
+| **[Mastergo](https://mastergo.com/)** | Web-based            |
+| **[FIgma](https://www.figma.com/)**   | Web-based, PC Plugin |
+
+---
+
+# 4. 實戰教程（Vibe Coding + UI 結合）
+
+1. 在你準備進行 Vibe Coding 的平臺聊天視窗中，輸入你想要的程式描述。
+   示例：
+
+   > 請構建一個帶前端和後端的簡單貪喫蛇（Snake）網頁應用。
+   >
+   > 1. 前端
+   >
+   > - 頁面 1：遊戲頁面
+   >   - 使用鍵盤控制蛇的移動。
+   >   - 蛇喫掉的不是食物，而是英文單詞。
+   >   - 頁面側邊欄展示已收集單詞及其數量。
+   >   - 遊戲結束後，已收集的單詞仍然保留，並在新一局中延續。
+   > - 頁面 2：寫詩頁面（Make Poem）
+   >   - 展示與遊戲頁面相同的單詞列表（資料一致）。
+   >   - 提供一個按鈕，將當前收集的單詞傳送給後端生成一首詩。
+   >   - 生成詩歌后，將被使用到的單詞從列表中移除或遞減計數。
+   >
+   > * 新增簡單的導航，在 Game 和 Make Poem 兩個頁面之間切換。
+   > * 確保收集到的單詞在兩個頁面中都能看到。
+   >
+   > 2. 後端
+   >
+   > - 提供一個後端介面，接收收集到的單詞並返回一首詩。
+   > - 使用 DeepSeek API 生成詩歌。
+   > - 將 API Key 存放在 `.env` 檔案中，並在 `.gitignore` 中忽略該檔案。
+
+2. 輸入你的 DeepSeek API Key。（可以在 [https://platform.deepseek.com/](https://platform.deepseek.com/) 獲取）
+   1. LLM 的 API Key 用於在你自己的專案中呼叫大模型。由於這是敏感資訊，不能公開，因此需要單獨寫在配置檔案裡。
+      **為什麼要用 `.env` 檔案，並且不要把它上傳到 GitHub？**
+   - `.env` 檔案專門用來存放 **金鑰或密碼**（例如 DeepSeek API Key）。
+   - 如果這個檔案被上傳到 GitHub，全世界的人都能看到你的金鑰並盜用它。
+   - 為了安全起見，我們需要在 `.gitignore` 檔案中宣告忽略 `.env`，讓 Git 不跟蹤它。
+   - 這樣一來，你的專案仍然可以在本機正常使用這些金鑰，但不會在倉庫中洩露。
+
+3. 檢視生成結果後，如果發現錯誤或有需要修改的地方，可以直接在聊天視窗中輸入你的修改請求。
+4. 如果你對頁面設計不滿意，也可以選擇在 Figma 或 Mastergo 中重新設計介面，再把設計思路反饋給 Agent。
+
+- **示例**
+
+> 請設計一個名為 _Word-Snake_ 的 **雙頁面 Web 應用**。
+>
+> - **Game 頁面：**
+> - 蛇透過鍵盤控制移動。
+> - 蛇喫掉的是英文單詞，而不是普通食物。
+> - 右側面板展示已收集單詞及數量。
+> - 遊戲結束後，單詞庫存不會清空，在新一輪中繼續使用。
+> - **Make Poem 頁面：**
+> - 展示同一份共享單詞庫存。
+> - 使用者選擇部分單詞並點選 **Generate Poem** 按鈕。
+> - 將這些單詞傳送給後端，由 DeepSeek API 生成一首詩。
+> - 生成詩歌后，從庫存中刪除或減少被使用的單詞。
+> - **導航：** 透過簡單的 Tab 或頂部選單在兩個頁面之間切換。
+> - **共享狀態：** 確保收集到的單詞在兩個頁面始終保持同步可見。
+
+- **效果示例**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png)
+
+---
+
+# 5. AI Agent 平臺對比（如何為簡單專案選最佳組合）
+
+不同的 Vibe Coding 平臺各有特色和工作流。我們使用同一套“帶 DeepSeek API 的貪喫蛇遊戲”需求，在多個平臺上進行實測，從初學者的角度評估它們的優劣。以下是總結。
+
+## 1. 對比標準
+
+1. **目標（Goal）**
+   構建一個接入 DeepSeek API 的貪喫蛇（Snake）網頁應用。
+2. **遊戲細節（Game Details）**
+   1. 遊戲透過 DeepSeek LLM API 生成詩歌。
+   2. 蛇喫掉的是英文單詞，收集到的單詞會在遊戲結束後保留，並在新一局中繼續使用。相同單詞可以被多次收集，並分別計數。
+   3. 當生成一首詩後，被使用到的單詞會從庫存中移除。
+
+3. **必備功能（Must-Haves）**
+   1. 一個可執行的前端頁面，包含貪喫蛇遊戲（鍵盤控制、Canvas 渲染）。
+   2. 單詞收集機制（單詞出現在棋盤上，蛇喫掉單詞後，側欄列表更新）。
+   3. 在多輪遊戲之間保持單詞庫存的持久化。
+   4. 使用 DeepSeek API 的後端（如果沒有 API Key，可以先返回模擬詩歌）。
+   5. “生成詩歌”按鈕：點選後呼叫後端，顯示詩歌，並根據使用情況更新單詞庫存。
+   6. 對 API Key 的 `.env` 支援，以及透過 `.gitignore` 避免金鑰洩漏。
+
+4. **加分項（Nice-to-Haves）**
+   1. 使用者可以選擇要用哪些詞來生成詩歌。
+   2. 使用者體驗友好（例如側邊欄清晰展示單詞列表、詩歌展示區佈局合理）。
+   3. 為初學者在程式碼中加入註釋，解釋關鍵邏輯。
+
+## 2. 編碼輸出對比
+
+### 1. Lovable（Web-based）
+
+- **平臺型別：** Web 端
+- **主要特性與工作流：** Lovable 在整合與協作方面做得很好，它自動完成諸如連線 Supabase 資料庫等初始化工作，使專案搭建過程非常順暢。你只需描述專案需求，Agent 就會幫你把各類服務串聯起來，構建好基本結構。
+- **適合的使用者：** 對於第一次嘗試 Vibe Coding 的新手來說，Lovable 是非常友好的選擇。它簡化了多服務聯動的複雜度，讓你可以把注意力集中在提示詞與迭代上，而不是環境配置。得益於高度自動化，你能很快得到一個可執行的原型。
+- **提示詞過程：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png)
+- **貪喫蛇遊戲效果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png)
+
+- **價格：** 相對偏貴，但如果你有學校郵箱，可以透過學生驗證以半價使用。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png)
+
+### 2. Cursor（IDE）
+
+- **平臺型別：** 桌面應用（PC）
+- **主要特性與工作流：** Cursor 是一款整合了 AI 能力的專有 IDE，支援 Windows、macOS 和 Linux。它把程式碼生成、智慧重寫、程式碼庫查詢等功能直接嵌入在開發環境中。與 Web 工具相比，它更接近傳統本地開發體驗。由於是本地環境，不同電腦的配置各異，偶爾會遇到環境相關問題。好處是專案就在本機，無需再額外下載或配置執行環境，Cursor 會幫你處理很多繁瑣步驟。
+- **適合的使用者：** 對已有一定程式設計基礎的使用者，Cursor 是一個非常強大又熟悉的環境。但對完全零基礎的新手來說，需要自己理解專案結構、依賴管理和檔案組織等概念，學習曲線會更陡一些。更適合想在傳統編碼流程中加入 AI 助手的開發者。
+- **提示詞過程：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png)
+- **貪喫蛇遊戲效果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png)
+
+- **價格：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png)
+
+### 3. Z.ai（Web-based）
+
+- **平臺型別：** Web 端
+- **主要特性與工作流：** Z.ai 的使用方式比較直接，但一個明顯的挑戰在於：你需要 **手動複製貼上生成的程式碼**。平臺本身缺少實時預覽視窗，因此很難第一時間看到程式碼執行效果。
+- **適合的使用者：** 這個平臺要求比較“動手”的使用方式。缺少自動化意味著你必須與程式碼直接打交道，這對想深入理解 AI 輸出內容的人來說反而是種訓練。但頻繁的複製貼上會帶來效率問題和出錯風險。更適合想看“原生 AI 輸出程式碼”的同學，而不是追求一鍵式體驗的人。
+- **提示詞過程：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png)
+- **貪喫蛇遊戲效果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png)
+
+- **價格：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png)
+
+### 4. Replit（Web-based）
+
+- **平臺型別：** Web 端
+- **主要特性與工作流：** Replit 是一體化的線上開發與部署環境，瀏覽器裡就可以寫程式碼、執行程式、生成線上訪問地址。開始編碼前，它會給出清晰的行動計劃；同時還提供視覺化編輯器，你可以在預覽視窗裡直接改 UI，原始碼會自動同步更新。這樣可以讓你隨時校驗 AI 的輸出是否符合預期，大幅減少來回修改的次數。
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png)
+
+- **適合的使用者：** Replit 對新手十分友好。它簡化了從編碼到部署的完整閉環，無需自己額外配置伺服器或託管服務。協作功能也很強，適合同學之間一起做專案或請他人遠端幫忙檢視程式碼。
+- **提示詞過程：** 在構建過程中，AI 並不是一開始就完全理解需求，中間經歷了大約 3 輪迭代，最終輸出才達到了理想效果。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png)
+- **貪喫蛇遊戲效果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png)
+
+- **價格：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png)
+
+### 5. Minimax（Web-based）
+
+- **平臺型別：** Web 端
+- **主要特性與工作流：** Minimax 在執行任務時通常比較耗時。其流程往往包括：AI 自動發現並修復錯誤，因此整個過程可能較慢、甚至略顯折騰。以本專案為例，Agent 一般會先生成一個詳細計劃，然後一步步搭建後端、資料庫和前端邏輯。
+- **適合的使用者：** 由於它會自動執行測試和修復錯誤，時間與 Token 消耗都比較大，但你可以清楚看到 AI 如何定位並解決問題，從學習角度看很有價值。
+- **提示詞過程：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png)
+
+- **貪喫蛇遊戲效果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png)
+
+- **價格：** 免費版在複雜專案中很可能無法順利從頭跑到尾，因此更推薦付費升級，以確保專案可以完整構建。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png)
+
+### 6. Trae（IDE）
+
+- **平臺型別：** 桌面應用（PC）
+- **主要特性與工作流：** 作為桌面應用，Trae 相比 Web 工具在效能和響應速度上通常更有優勢。但它需要下載安裝，對一些使用者來說入門門檻稍高。同樣地，由於是本地環境，不同電腦配置和依賴環境的差異，會帶來一定的不確定性。優勢在於，Trae 會幫助你在本地完成專案建立與執行配置，你可以直接在本機開發與除錯。
+- **適合的使用者：** 更適合計劃長期進行 Vibe Coding 專案、並希望使用專門桌面工具的使用者。對於只想“偶爾玩一下”的同學，可能不是最輕量的選擇。
+- **提示詞過程：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png)
+- **貪喫蛇遊戲效果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png)
+
+- **價格：** 價格相對親民，即便是免費版本，也足以完成質量不錯的小專案。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png)
+
+### 7. V0（Web-based）
+
+- **平臺型別：** Web 端
+- **主要特性與工作流：** V0 是一個專注於生成 React UI 元件的工具，由 Vercel 提供。它在生成高質量、可用於生產環境的介面方面表現出色。但在實際使用中，會遇到諸如“難以找到程式碼檢視”、“沒有清晰說明 API Key 應該配置在何處”等問題。
+- **適合的使用者：** V0 非常適合專注前端和 UI/UX 設計的學生或設計師。但它並不是完整的全棧解決方案，你仍然需要使用其他平臺來實現後端邏輯與 API 整合，因此如果你的目標是“一站式搭建完整應用”，它可能不是最佳首選。
+- **提示詞過程：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png)
+
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png)
+
+- **貪喫蛇遊戲效果：**
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png)
+- **價格：** 免費使用者大約可以構建 4–5 個簡單專案。
+  ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png)
+
+## 3. 平臺總結對比
+
+| **平臺**                                   | **Review**                                                                     | **Platform** | **Notes**                                                                      |
+| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
+| **[Lovable](https://lovable.dev/)**        | 對 AI 程式設計新手非常友好，上手簡單、體驗順滑，是理想的入門選擇。                 | Web-based    | 自動完成 Supabase 等服務連線，減少配置成本。                                   |
+| **[Cursor](https://cursor.com/cn/agents)** | 適合已有開發經驗的使用者，大幅提升生產力與程式碼質量。                             | PC           | 需要一定程式設計基礎，本地環境中需自己理解專案結構和依賴。                         |
+| **[Z.ai](https://chat.z.ai/)**             | 更適合有程式設計基礎、想直接研究 AI 輸出程式碼細節的使用者。                           | Web-based    | 無預覽視窗，檢查結果較麻煩；需要手動貼上程式碼、建立資料夾和檔案並手動執行服務。 |
+| **[Replit](https://replit.com/~)**         | 推薦給想快速把點子變成可訪問線上服務的使用者。                                   | Web-based    | 一體化線上開發與部署，支援協作並提供視覺化編輯器。                             |
+| **[Minimax](https://agent.minimaxi.com/)** | 適合希望看到 AI 自動查錯與修復全過程、並從中學習的人，但整體較慢且耗費 Token。 | Web-based    | 整個過程較長，AI 會多次自動執行測試並修復錯誤。                                |
+| **[Trae](https://www.trae.ai/)**           | 針對有程式設計經驗、希望使用桌面 IDE + AI Agent 組合的使用者，是提升效率的有力工具。 | PC           | 需本地安裝與環境配置，但效能更好，適合長期進行 Vibe Coding 專案。              |
+| **[V0](https://v0.app/)**                  | 為想快速做出 React UI 視覺效果的非開發者進行了最佳化，適合前端 / 設計向的學生。  | Web-based    | 專注生成 React UI，需要與其他平臺配合完成後端和完整應用搭建。                  |
+---
+title: '七款 AI 編程工具對比'
+description: '用統一任務實戰評測 7 款主流 Web Vibe Coding 平台，從新手友好度、代碼可控性、部署便捷性等維度幫你快速選型。'
+---
diff --git a/docs/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
new file mode 100644
index 0000000..25bbab4
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
@@ -0,0 +1,348 @@
+# 用設計和程式設計 Agent 設計網站
+
+## 本章導讀
+
+本章將展示設計與開發如何透過 AI 完美協作。你將扮演產品經理的角色，指揮“設計 Agent”完成 Logo 設計、配色方案與頁面佈局，再協同“程式設計 Agent”將視覺稿轉化為可執行的程式碼。從創意構思到網站上線，體驗全鏈路的 AI 賦能開發流程，讓一個人成為一支隊伍。
+
+---
+
+# 1. 入門指南
+
+## 1. 教程簡介
+
+讓我們使用 AI 設計 Agent 和編碼 Agent，從零開始搭建一個完整的網站。
+
+- **設計 Agent**：負責建立 logo、網頁佈局、配色方案和其他視覺元素
+- **編碼 Agent**：根據你在提示中提出的需求與佈局，編寫 HTML/CSS/JS 等實際程式碼，構建可執行的網站
+
+## 2. 設計 Agent 與編碼 Agent
+
+- **設計 Agent**：根據你提供的提示，生成圖片、頁面模型或設計風格的 AI。
+- Mastergo
+- Lovart
+- Figma MCP
+- **編碼 Agent**：根據你在提示中請求的功能與佈局，編寫實際的程式碼（HTML/CSS/JS 等）的 AI。
+- Z.AI
+- Trae
+- Cursor
+- Lovable
+
+---
+
+# 2. 使用設計 Agent 建立 Logo
+
+## 1. 設計 Logo 時需要考慮的關鍵要素
+
+Logo 是決定你網站第一印象的關鍵元素之一。想要從 AI 設計 Agent 那裡獲得滿意的結果，你需要在提示中清楚地描述你想要的 Logo 型別。
+
+1. **品牌名稱 / 文字**
+
+- 必須出現在 Logo 中的文字（例如：網站標題、品牌名稱等）。
+
+2. **風格（情緒 / 氣氛）**
+
+- Logo 想要傳達的整體感覺或氛圍。
+- _示例：極簡、可愛、簡潔、現代、復古、未來感等。_
+
+3. **配色方案**（可選）
+
+- 最好讓 Logo 的配色與整個網站的整體基調相匹配。
+- 可以指定具體的十六進位制色號，或大致的色調（冷色、暖色等）。
+- _示例：**`#171721`**（黑色）、**`#FF7130`**（橙色）。_
+
+4. **形式（形狀 / 結構）**
+
+- 明確 Logo 是否需要特定的形狀或構圖。
+- _示例：文字在圓形內部、圖示 + 文字組合、以圖示為主的 Logo 等。_
+
+5. **圖示 / 符號元素**（可選）
+
+- 希望出現在 Logo 中的圖形或符號。
+- _示例：書本圖示、閃電符號、與 AI 相關的圖形、抽象幾何圖形等。_
+
+## 2. 編寫 Logo 設計提示詞
+
+**示例提示詞**
+
+```
+"請為我設計一個極簡風格的 Logo，品牌名稱是 ‘My First Website’。
+使用黑色 (#171721) 和橙色 (#FF7130)，並將文字放在一個圓形內部。"
+```
+
+```
+"請設計一個以 ‘AIID’ 為品牌名的 Logo。
+整體風格要未來感、乾淨簡潔，主色為藍色與白色。
+將象徵 AI 的抽象圖形與文字相結合，並匯出為帶透明背景的 PNG。"
+```
+
+## 3. 向 Agent 請求設計
+
+- 輸入上述提示詞 → 比對 Agent 生成的多個設計稿。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png)
+
+## 4. 確定最終 Logo
+
+- 從草稿中選擇你最喜歡的版本並下載。
+
+---
+
+# 3. 規劃你的網站結構
+
+## 1. 瞭解基礎版塊
+
+在真正開始製作網站前，先規劃好要包含哪些選單（版塊）非常重要。選單的設計取決於你希望訪客看到什麼、以及你希望他們採取什麼行動。
+一般來說，網站通常由 **Home / About / Contact** 等基礎版塊構成。
+
+## 2. 自己先畫一個結構草圖（可選）
+
+你可以先根據網站的目標，大致寫出一個簡單的選單結構。
+
+### 基礎選單
+
+1. **Home**
+   1. 訪客進入網站後首先看到的主頁面
+   2. 通常包含 Logo、主視覺區域和一句簡短的標語或簡介
+2. **About**
+   1. 介紹你是誰，或者專案 / 服務的目的
+   2. 個人作品集：自我介紹 + 簡短履歷
+   3. 服務類網站：願景、目標以及核心功能
+3. **Contact**
+   1. 聯絡方式，如郵箱、電話號碼、社交媒體連結等
+   2. 也可以加入一個簡單的聯絡表單
+
+### 可選選單
+
+4. **Services / Projects**
+   1. 展示你提供的服務，或你的專案 / 作品集
+   2. 通常以列表或卡片形式展示
+
+5. **Gallery**
+   1. 用於展示圖片、照片或設計作品
+
+6. **Blog / News**
+   1. 用於釋出文章、動態或日誌
+
+7. **FAQ**
+   1. 整理訪客經常會問的問題及解答
+
+## 3. 選擇配色方案（可選）
+
+如果你已經有了 Logo，或者想用特定的顏色搭配來設計網站，也可以直接在提示詞中寫上你想使用的顏色程式碼。
+
+**示例：** `#171721, #872B97, #FF7130, #FF3C68`
+
+即使你暫時想不到配色方案，也可以透過配色網站或搜尋關鍵詞來找到靈感。
+
+- **配色參考網站**
+  - https://colorhunt.co/
+  - https://coolors.co/
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png)
+
+- **在 Google 上透過關鍵詞搜尋配色**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png)
+
+## 4. 編寫網站設計提示詞
+
+**示例提示詞**
+
+```
+"請設計一個由 Home、About、Contact 三個版塊構成的單頁網站。
+使用配色 #171721、#FF7130 和 #FF3C68。
+整體風格要現代、簡潔。"
+```
+
+---
+
+# 4. 使用設計 Agent 設計網站
+
+## 1. 輸入提示詞 → 生成設計稿
+
+- 在提示詞中寫出你規劃好的結構以及選定的配色。
+
+**Mastergo 提示詞示例**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png)
+
+## 2. 審閱設計稿並提出修改意見
+
+你可以根據自己的需求，向 Agent 提出反饋，例如：
+
+- “太花哨了，整體風格改得更簡潔一些。”
+- “換一種字型。”
+- “調整一下顏色搭配。”
+- “把這裡這一塊刪掉。”
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png)
+
+## 3. 確定最終設計
+
+當你對設計稿進行多輪修改並滿意之後，就可以把這個設計轉化為程式碼，讓編碼 Agent 能理解並繼續工作。
+
+將設計轉為程式碼的方式會因平臺而異，但通常是在設計平臺中安裝並使用某些外掛來完成。
+
+**Mastergo 示例**
+
+1. 開啟 [Mastergo 外掛網站](https://mastergo.com/community/plugin)，搜尋 **seal**。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png)
+
+2. 回到設計頁面，點選 **方塊圖示（外掛）**。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png)
+
+3. 選中你想轉換為程式碼的設計區域，點選 **Generate** 按鈕生成程式碼。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png)
+
+---
+
+# 5. 使用編碼 Agent 搭建網站
+
+## 1. 理解 HTML/CSS/JS 的基礎概念
+
+一個網站本質上由三種語言構成：
+
+- **HTML（HyperText Markup Language）** → 結構（骨架）
+- **CSS（Cascading Style Sheets）** → 樣式（外觀）
+- **JavaScript（JS）** → 功能（互動）
+
+這三者配合在一起，構成我們看到的完整網頁。
+
+1. **🏗️ HTML（結構）**
+
+- 定義頁面中“展示什麼”
+- 用來放置文字、圖片、按鈕、連結等元素
+- 類似於建築物的 **牆體和框架**
+
+**示例**
+
+```html
+<h1>Hello!</h1>
+<p>This is my first website.</p>
+<a href="contact.html">Contact</a>
+```
+
+2. **🎨 CSS（樣式）**
+
+- 決定“內容怎樣展示”
+- 控制文字大小、顏色、間距、背景、按鈕形狀等
+- 讓 HTML 有了“衣服”和視覺風格
+
+**示例**
+
+```css
+h1 {
+  color: #FF7130;   /* Text color */
+  font-size: 36px;  /* Font size */
+  text-align: center; /* Center alignment */
+}
+
+body {
+  background-color: #171721; /* Background color */
+  color: white; /* Default text color */
+}
+```
+
+3. **⚙️ JavaScript（JS）（功能）**
+
+- 讓網頁能夠和使用者互動
+- 可以實現按鈕點選、選單展開、圖片輪播、表單提交等動態效果
+- 如果說 HTML/CSS 是靜態的骨架和外觀，那麼 JS 就是讓網頁“活起來”的 **大腦**
+
+**示例**
+
+```javascript
+function showAlert() {
+  alert("The button has been clicked!");
+}
+```
+
+```html
+<button onclick="showAlert()">Click me</button>
+```
+
+## 2. 讓編碼 Agent 生成程式碼
+
+**示例提示詞**
+
+```
+"請為一個包含 Home、About 和 Contact 版塊的單頁網站編寫 HTML 和 CSS。
+使用配色 #171721、#FF7130、#FF3C68。
+背景為黑色，文字為白色。"
+```
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png)
+
+## 3. 執行網站
+
+當草稿程式碼生成後，Agent 通常會自動啟動專案，並展示生成好的網站頁面。
+
+如果你重新啟動了 Agent，或者網站畫面沒有出現，可以輸入類似這樣的提示：
+
+```
+"Please activate the project"
+```
+
+讓 Agent 重新啟動專案並開啟預覽頁面，方便你檢視當前的效果。
+
+## 4. 進行簡單修改
+
+你可以繼續透過自然語言對草稿進行微調，例如：
+
+- “把按鈕做大一點。”
+- “字型粗一點。”
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png)
+
+## 5. 修改網站文案內容
+
+Agent 生成的初版網站，通常會包含一些自動生成的佔位文字。為了讓它更貼近你的真實場景，你可以提前準備好實際內容，再讓 Agent 幫你替換。
+
+**應用示例**：更新 AIID 網站的 About 頁面
+
+1. 先寫好你想在 About 頁面展示的內容。為了方便 Agent 理解，可以將內容儲存為 Markdown 格式。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png)
+
+2. 然後在對話中告訴 Agent，將該檔案中的內容應用到指定頁面上。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png)
+
+3. 檢視應用內容後的更新版本。
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png)
+
+## 6. 插入圖片
+
+如果你想加入特定圖片（例如 Logo、背景圖等），可以先把圖片上傳到專案資料夾中，然後在提示詞裡說明要在頁面的什麼位置使用這些圖片。
+
+- **示例：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png)
+
+- **結果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png)
+
+---
+
+# 6. 將設計與程式碼整合
+
+## 1. 將設計檔案與網站程式碼整合（可選）
+
+當你從設計 Agent 那裡下載到了程式碼檔案後，可以把它們移動到當前專案目錄中，然後請編碼 Agent 幫你將這些設計程式碼與現有專案進行合併。
+
+- **示例：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png)
+
+- **結果：**
+
+![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png)
+---
+title: '用設計與編程 Agent 設計網站'
+description: '從創意到上線：用設計 Agent 產出視覺方案，再用編程 Agent 把設計稿變成可運行網站，總結可復用的協作流程。'
+---
diff --git a/docs/zh-tw/stage-1/appendix-b-common-errors/index.md b/docs/zh-tw/stage-1/appendix-b-common-errors/index.md
new file mode 100644
index 0000000..eae1930
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-b-common-errors/index.md
@@ -0,0 +1,325 @@
+---
+title: '寫程式碼時遇到錯誤怎麼辦 - 截圖問 AI 的實戰指南'
+description: '學習如何高效地向 AI 提問來解決開發中的各種報錯問題，掌握截圖、描述、定位問題的標準流程，讓 AI 成為你的除錯助手。'
+---
+
+<script setup>
+const duration = '約 <strong>30 分鐘</strong>'
+</script>
+
+# 寫程式碼時遇到錯誤怎麼辦
+
+## 本章導讀
+
+<ChapterIntroduction :duration="duration" :tags="['除錯技巧', 'AI 協作', '問題排查', '開發者工具']" coreOutput="一套標準化的報錯排查流程" expectedOutput="能獨立解決 90% 的常見報錯">
+
+在 AI 時代，排查錯誤的方式已經變了。
+
+你不需要背下所有錯誤型別，不需要成為除錯專家，甚至不需要理解錯誤是什麼意思。
+
+<strong>你只需要學會一件事：怎麼問 AI。</strong>
+
+本章會教你一套<strong>從簡單到進階</strong>的排查流程：
+
+1. <strong>第一步：直接問</strong>：描述現象 + 截圖，一句話提問
+2. <strong>第二步：補充資訊</strong>：如果解決不了，再開啟 F12 補充關鍵資訊
+
+掌握這套流程後，<strong>90% 的報錯你都能自己解決</strong>。
+
+</ChapterIntroduction>
+
+::: info 說明
+本章所有方法基於 Cursor/Trae/Claude 等 AI IDE 的實際使用經驗，可直接應用於日常開發。
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '直接提問', description: '描述現象 + 截圖' },
+      { title: '補充資訊', description: '開啟 F12 定位問題' },
+      { title: '迭代解決', description: '直到問題解決' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 核心心法：截圖問 AI
+
+::: warning 為什麼這一章很重要？
+
+很多初學者遇到報錯時的第一反應是：
+- 慌張，開始瞎改程式碼
+- 花半小時搜尋"xxx 錯誤怎麼解決"
+- 試圖自己理解錯誤是什麼意思
+- 自己 debug 到深夜
+
+<strong>這些都是在浪費時間。</strong>
+
+在 AI 時代，除錯已經變成了一件很簡單的事：
+
+```
+看到報錯 → 截圖 → 問 AI → 按 AI 說的做
+```
+
+你不需要理解錯誤，不需要會除錯，甚至不需要知道問題出在哪裡。
+
+<strong>你只需要學會怎麼問。</strong>
+
+:::
+
+### 1.1 最簡單的提問方式
+
+不需要複雜的模板，兩種方式任選：
+
+**方式一：描述現象**
+
+格式：剛才做了什麼，現在出現了什麼
+
+```
+剛才我修改了登入頁面的程式碼，現在頁面白屏了，怎麼辦？
+```
+
+**方式二：截圖**
+
+直接截圖當前頁面或報錯資訊
+
+```
+[截圖]
+
+這個報錯怎麼解決？
+```
+
+**最好的方式：描述 + 截圖**
+
+```
+剛才我修改了登入頁面的程式碼，現在頁面白屏了。
+
+[截圖]
+
+怎麼辦？
+```
+
+**記住：描述清楚上下文，加上截圖，AI 能更快幫你解決問題。**
+
+### 1.2 如何把問題講清楚
+
+很多初學者知道要提問，但不知道怎麼說。其實只需要講清楚三件事：
+
+**1. 剛才做了什麼**
+
+```
+剛才我點選了儲存按鈕
+剛才我修改了登入頁面的程式碼
+剛才我重新整理了頁面
+```
+
+**2. 現在看到了什麼**
+
+```
+現在頁面是空白的
+現在按鈕點了沒反應
+現在顯示報錯資訊
+```
+
+**3. 想要達到什麼效果**
+
+```
+我想讓資料儲存成功
+我想讓頁面正常顯示
+我想讓按鈕點選後彈出提示
+```
+
+**完整示例：**
+
+```
+剛才我點選了儲存按鈕，現在頁面顯示"儲存失敗"的報錯。
+
+[截圖]
+
+我想讓表單資料成功儲存到資料庫，該怎麼辦？
+```
+
+**關鍵原則：**
+- 用大白話描述，不用專業術語
+- 按時間順序說：先做了什麼，然後發生了什麼
+- 把你的預期說出來，讓 AI 知道你想要什麼
+
+## 2. 第一步：直接描述現象提問
+
+遇到問題時，<strong>不要急著開啟 F12</strong>。先直接描述現象，截圖當前頁面，丟給 AI 看看。
+
+很多時候，AI 看到截圖就能直接給出解決方案。
+
+### 2.1 常見現象怎麼描述
+
+::: tip 直接描述即可
+
+**頁面白屏**
+```
+頁面開啟是空白的，怎麼辦？
+
+[截圖]
+```
+
+**按鈕點選沒反應**
+```
+點選這個按鈕沒反應，幫我看看。
+
+[截圖]
+```
+
+**資料儲存不了**
+```
+點了儲存，資料沒存上，怎麼辦？
+
+[截圖]
+```
+
+**樣式顯示不對**
+```
+這個按鈕位置偏了，怎麼調整？
+
+[截圖]
+```
+
+**介面報錯**
+```
+呼叫介面報錯了，幫我看看。
+
+[截圖]
+```
+
+:::
+
+### 2.2 如果 AI 直接解決了
+
+恭喜你，問題解決了！按照 AI 說的修改即可。
+
+### 2.3 如果 AI 說"需要更多資訊"
+
+這時候才需要開啟 F12，補充關鍵資訊。往下看。
+
+## 3. 第二步：補充關鍵資訊
+
+當 AI 說需要更多資訊時，根據問題型別，開啟 F12 擷取對應的內容。
+
+### 3.1 什麼時候需要補充資訊
+
+AI 可能會這樣回覆：
+- "請開啟 Console 看看有沒有報錯"
+- "截圖 Network 面板給我看看"
+- "需要看具體的錯誤資訊"
+
+這時候，根據下面的指引補充截圖。
+
+### 3.2 補充 Console 資訊（頁面白屏/報錯）
+
+::: tip 操作步驟
+
+**第一步：按 F12 開啟開發者工具**
+
+Mac 是 `Cmd+Option+I`，或者右鍵頁面選"檢查"。
+
+**第二步：切換到 Console 標籤頁**
+
+**第三步：截圖紅色報錯資訊**
+
+**第四步：發給 AI**
+
+```
+Console 報錯如下：
+
+[截圖]
+```
+
+:::
+
+### 3.3 補充 Network 資訊（資料問題/API 報錯）
+
+::: tip 操作步驟
+
+**第一步：按 F12 開啟開發者工具**
+
+**第二步：切換到 Network 標籤頁**
+
+**第三步：重新操作一遍**（點儲存/重新整理頁面）
+
+**第四步：找到對應請求，截圖**
+
+- 看 URL 和狀態碼
+- 看 Payload（傳的引數）
+- 看 Response（返回結果）
+
+**第五步：發給 AI**
+
+```
+Network 資訊如下：
+
+請求：[截圖1]
+引數：[截圖2]
+返回：[截圖3]
+```
+
+:::
+
+### 3.4 補充 Elements 資訊（樣式問題）
+
+::: tip 操作步驟
+
+**第一步：右鍵元素 → "檢查"**
+
+開發者工具會自動定位到該元素。
+
+**第二步：截圖 Styles 面板**
+
+**第三步：發給 AI**
+
+```
+元素樣式如下：
+
+[截圖]
+```
+
+:::
+
+## 4. 第三步：迭代直到解決
+
+### 4.1 低效的做法
+
+這些做法會浪費你的時間：
+
+看到報錯就慌張，開始瞎改程式碼
+花半小時搜尋錯誤解決方案
+試圖自己理解每個錯誤的意思
+一個人 debug 到深夜
+
+### 4.2 高效的做法
+
+按照這套流程來：
+
+先直接描述現象截圖提問
+AI 說需要更多資訊時，再開啟 F12 補充
+按照建議修改程式碼
+改完後測試，如果問題還在就繼續截圖提問
+
+## 5. 總結：完整流程
+
+```
+遇到問題
+    ↓
+直接描述現象 + 截圖
+    ↓
+丟給 AI："怎麼辦？"
+    ↓
+AI 直接解決？
+    ↓ 是
+按 AI 說的做
+    ↓
+測試是否解決
+    ↓
+    ↓ 否 / AI 需要更多資訊
+開啟 F12，補充關鍵資訊
+    ↓
+再發給 AI
+    ↓
+重複直到解決
+```
diff --git a/docs/zh-tw/stage-1/appendix-c-consumer-scenarios/index.md b/docs/zh-tw/stage-1/appendix-c-consumer-scenarios/index.md
new file mode 100644
index 0000000..8b02930
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-c-consumer-scenarios/index.md
@@ -0,0 +1,642 @@
+---
+title: 'C 端消費場景靈感參考'
+description: '本文件彙總了 LLM 大模型在 C 端消費場景中的創意應用方向，涵蓋生活方式、情感陪伴、娛樂休閒、個人成長、社互動動等領域的靈感場景，為面向普通消費者的 AI 應用開發者提供參考。'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = '約 <strong>4 小時</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// 每個場景的主題池 - 強調感覺、氛圍、心理暗示
+const topicPool = {
+  'lifestyle': [
+    { title: '晨間儀式感喚醒助手', desc: '根據天氣、日程、心情生成專屬晨間儀式，讓每一天從美好開始' },
+    { title: '獨居生活氛圍營造師', desc: '為獨居者設計居家氛圍方案，燈光、音樂、香薰的智慧搭配建議' },
+    { title: '週末宅家治癒計劃生成器', desc: '根據當下心情推薦完美的宅家組合：電影+零食+氛圍佈置' },
+    { title: '睡前心靈安撫電臺', desc: '生成溫柔的故事、冥想引導，陪伴入睡的私人電臺' },
+    { title: '生活美學靈感捕手', desc: '從日常小事中發現美，生成生活美學建議和儀式感指南' }
+  ],
+  'emotion': [
+    { title: '深夜樹洞傾聽者', desc: '24 小時線上的情緒垃圾桶，無評判地接納所有心事' },
+    { title: '失戀療愈陪伴師', desc: '在失戀低谷期提供溫柔的陪伴、療愈建議和情緒出口' },
+    { title: '焦慮緩解呼吸教練', desc: '感知焦慮情緒，引導呼吸練習和正念冥想' },
+    { title: '自信心重建導師', desc: '透過積極對話和心理暗示，幫助重建自我認同和價值感' },
+    { title: '情緒日記智慧解讀', desc: '分析情緒日記，發現情緒規律，給出溫暖的洞察和建議' }
+  ],
+  'entertainment': [
+    { title: '沉浸式劇本殺 DM', desc: '扮演劇本殺主持人，營造懸疑氛圍，推動劇情發展' },
+    { title: '開放世界遊戲靈魂 NPC', desc: '有血有肉的 NPC，記住玩家故事，產生真實的情感羈絆' },
+    { title: '個性化播客內容生成', desc: '根據興趣生成專屬播客，像朋友聊天一樣自然' },
+    { title: '虛擬演唱會氛圍組', desc: '為線上演唱會營造現場感，實時互動、應援、氛圍渲染' },
+    { title: '互動小說共創夥伴', desc: '與讀者共同創作故事，每個選擇都影響世界走向' }
+  ],
+  'growth': [
+    { title: '個人成長見證者', desc: '記錄成長軌跡，在重要節點給予鼓勵和回顧' },
+    { title: '習慣養成遊戲化教練', desc: '將枯燥的習慣養成變成有趣的冒險遊戲' },
+    { title: '技能學習搭子匹配', desc: '找到志同道合的學習夥伴，互相督促、分享進步' },
+    { title: '每日小確幸發現者', desc: '幫助發現生活中的小美好，培養感恩和積極心態' },
+    { title: '人生模擬體驗器', desc: '模擬不同人生選擇，體驗平行時空的另一種可能' }
+  ],
+  'social': [
+    { title: '破冰話題生成器', desc: '在社交場合提供有趣的話題，化解尷尬、拉近距離' },
+    { title: '朋友圈文案氛圍師', desc: '根據照片和心情，生成有格調的朋友圈文案' },
+    { title: '約會氛圍策劃師', desc: '為約會設計完整的氛圍方案，從地點到話題到驚喜' },
+    { title: '遠端聚會氣氛擔當', desc: '線上上聚會中活躍氣氛，組織遊戲、引導互動' },
+    { title: '社交能量管理助手', desc: '幫助內曏者管理社交能量，找到舒適的社交節奏' }
+  ],
+  'creative': [
+    { title: '靈感枯竭急救包', desc: '在創意瓶頸時提供意想不到的靈感火花' },
+    { title: '個人風格探索嚮導', desc: '幫助發現獨特的個人風格，從穿搭到表達' },
+    { title: '手賬與日記美學顧問', desc: '提供手賬排版、配色、內容創意的美學建議' },
+    { title: '攝影構圖氛圍指南', desc: '根據場景和想要的感覺，提供攝影和修圖建議' },
+    { title: '音樂心情匹配師', desc: '根據當下心情和場景，推薦完美的音樂組合' }
+  ],
+  'travel': [
+    { title: '城市漫步探索嚮導', desc: '像本地人一樣探索城市，發現隱藏的寶藏地點' },
+    { title: '旅行心情日記生成', desc: '將旅行照片和心情轉化為優美的遊記和回憶' },
+    { title: '獨自旅行陪伴助手', desc: '為獨自旅行者提供陪伴、建議和安全感' },
+    { title: '目的地氛圍預覽', desc: '在出發前沉浸式體驗目的地氛圍，提前進入狀態' },
+    { title: '旅行攝影氛圍指導', desc: '根據場景和光線，指導拍出有故事感的旅行照片' }
+  ],
+  'health': [
+    { title: '運動動力喚醒師', desc: '在不想動的時候給予恰到好處的鼓勵和動力' },
+    { title: '健康飲食靈感廚房', desc: '根據心情和食材，生成治癒系的健康食譜' },
+    { title: '睡眠質量最佳化氛圍師', desc: '從環境到心理，全方位營造優質睡眠氛圍' },
+    { title: '身體感知引導師', desc: '引導關注身體訊號，建立身心連線' },
+    { title: '自我關愛提醒助手', desc: '在忙碌中提醒你停下來，關愛自己' }
+  ],
+  'learning': [
+    { title: '知識探索遊戲化嚮導', desc: '將枯燥的知識學習變成有趣的探索冒險' },
+    { title: '語言學習情景夥伴', desc: '扮演不同角色，在情景對話中自然習得語言' },
+    { title: '好奇心滿足助手', desc: '回答各種奇思妙想，滿足對世界的好奇心' },
+    { title: '讀書筆記靈感激發', desc: '幫助整理讀書心得，發現新的思考角度' },
+    { title: '知識分享氛圍營造', desc: '將學到的知識轉化為有趣的分享內容' }
+  ],
+  'relationship': [
+    { title: '親密關係溝通教練', desc: '幫助表達難以啟齒的情感，改善親密關係' },
+    { title: '家人關懷提醒助手', desc: '提醒你關心家人，提供溫馨的互動建議' },
+    { title: '友誼維護氛圍師', desc: '幫助維護遠距離友誼，創造共同話題' },
+    { title: '表白與驚喜策劃師', desc: '為重要的人策劃難忘的驚喜和浪漫時刻' },
+    { title: '衝突緩和氛圍引導', desc: '在關係緊張時提供緩和氛圍的建議和話術' }
+  ],
+  'pet': [
+    { title: '寵物擬人化日記', desc: '以寵物的視角生成日記，記錄與主人的溫馨日常' },
+    { title: '寵物行為解讀師', desc: '解讀寵物的行為語言，加深與寵物的連線' },
+    { title: '寵物陪伴時光策劃', desc: '設計與寵物互動的創意活動，增進感情' },
+    { title: '寵物紀念故事生成', desc: '將寵物的照片和回憶轉化為溫馨的故事' },
+    { title: '新手鏟屎官安心指南', desc: '為新手寵物主人提供溫暖的陪伴和指導' }
+  ],
+  'finance': [
+    { title: '消費情緒覺察助手', desc: '覺察衝動消費背後的情緒，建立健康的消費觀' },
+    { title: '儲蓄目標視覺化激勵', desc: '將儲蓄目標轉化為視覺化的夢想進度' },
+    { title: '理財知識輕鬆學', desc: '用輕鬆有趣的方式學習理財知識' },
+    { title: '財務焦慮舒緩師', desc: '在面對財務壓力時提供情緒支援和實用建議' },
+    { title: '小額投資體驗遊戲', desc: '透過遊戲化方式體驗投資，降低入門門檻' }
+  ],
+  'career': [
+    { title: '職業迷茫陪伴者', desc: '在職業迷茫期提供傾聽、探索和方向建議' },
+    { title: '工作成就感喚醒師', desc: '幫助發現工作中的價值和意義，重燃熱情' },
+    { title: '職場社交氛圍助手', desc: '提供職場社交的輕鬆話題和互動建議' },
+    { title: '副業靈感激發器', desc: '根據個人興趣和技能，激發副業創意' },
+    { title: '面試前信心加油站', desc: '在面試前提供心理建設和信心鼓勵' }
+  ],
+  'home': [
+    { title: '居家空間氛圍設計師', desc: '根據心情和季節，設計居家氛圍方案' },
+    { title: '四季家居變換指南', desc: '隨季節變換家居佈置，保持新鮮感' },
+    { title: '小戶型空間魔法', desc: '讓小空間也能有舒適溫馨的氛圍' },
+    { title: '居家儀式感創造者', desc: '為日常居家活動創造儀式感' },
+    { title: '斷舍離心理陪伴', desc: '在整理物品時提供心理支援和決策建議' }
+  ],
+  'food': [
+    { title: '一人食治癒料理', desc: '為獨居者設計簡單治癒的料理方案' },
+    { title: '節日餐桌氛圍設計', desc: '為特殊日子設計有儀式感的餐桌布置' },
+    { title: '料理心情匹配師', desc: '根據當下心情推薦適合的食物和做法' },
+    { title: '廚房小白信心建立', desc: '為零基礎烹飪者提供溫暖鼓勵和簡單食譜' },
+    { title: '美食攝影氛圍指南', desc: '讓家常料理也能拍出誘人的氛圍感' }
+  ],
+  'fashion': [
+    { title: '今日穿搭心情板', desc: '根據天氣、場合、心情生成穿搭靈感' },
+    { title: '膠囊衣櫥搭配師', desc: '用有限的單品創造無限的搭配可能' },
+    { title: '個人風格探索之旅', desc: '幫助發現和建立獨特的個人風格' },
+    { title: '舊衣新穿創意師', desc: '為舊衣服提供新的搭配靈感' },
+    { title: '特殊場合造型顧問', desc: '為重要場合設計令人自信的造型' }
+  ]
+}
+
+// 預定義的推薦鏈路對映表 - 基於氛圍和感覺
+const recommendationMap = {
+  // 氛圍點: 治癒系
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 氛圍點: 成長系
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 氛圍點: 社交系
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // 氛圍點: 探索系
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 氛圍點: 日常系
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: '治癒系', value: 'healing', desc: '溫暖、安撫、療愈' },
+  { label: '成長系', value: 'growth', desc: '進步、突破、蛻變' },
+  { label: '社交系', value: 'social', desc: '連線、分享、互動' },
+  { label: '探索系', value: 'explore', desc: '好奇、冒險、發現' },
+  { label: '日常系', value: 'daily', desc: '平凡、真實、當下' }
+]
+
+const feelingOptions = [
+  { label: '想要放鬆', value: 'relax', desc: '舒緩壓力、放空自己' },
+  { label: '尋找靈感', value: 'inspire', desc: '激發創意、獲得啟發' },
+  { label: '渴望連線', value: 'connect', desc: '與人連線、情感共鳴' },
+  { label: '暫時逃離', value: 'escape', desc: '逃離現實、沉浸體驗' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: '生活方式', anchor: '#_1-生活方式' },
+  { key: 'emotion', name: '情感陪伴', anchor: '#_2-情感陪伴' },
+  { key: 'entertainment', name: '娛樂休閒', anchor: '#_3-娛樂休閒' },
+  { key: 'growth', name: '個人成長', anchor: '#_4-個人成長' },
+  { key: 'social', name: '社互動動', anchor: '#_5-社互動動' },
+  { key: 'creative', name: '創意表達', anchor: '#_6-創意表達' },
+  { key: 'travel', name: '旅行探索', anchor: '#_7-旅行探索' },
+  { key: 'health', name: '身心健康', anchor: '#_8-身心健康' },
+  { key: 'learning', name: '知識探索', anchor: '#_9-知識探索' },
+  { key: 'relationship', name: '關係經營', anchor: '#_10-關係經營' },
+  { key: 'pet', name: '寵物陪伴', anchor: '#_11-寵物陪伴' },
+  { key: 'finance', name: '財務健康', anchor: '#_12-財務健康' },
+  { key: 'career', name: '職業發展', anchor: '#_13-職業發展' },
+  { key: 'home', name: '居家空間', anchor: '#_14-居家空間' },
+  { key: 'food', name: '美食料理', anchor: '#_15-美食料理' },
+  { key: 'fashion', name: '穿搭風格', anchor: '#_16-穿搭風格' }
+]
+
+// 計算推薦結果 - 從主題池中隨機抽取
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // 從每個推薦場景中隨機抽取 1-2 個主題
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // 隨機抽取 1-2 個主題
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // 隨機排序並限制總數
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// 獲取當前選擇的描述
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // 延遲滾動確保DOM更新完成
+  setTimeout(() => {
+    // 嘗試透過ID查詢（支援多種格式）
+    let element = document.querySelector(anchor)
+    
+    // 如果找不到，嘗試其他可能的ID格式
+    if (!element) {
+      // 嘗試去掉下劃線字首
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // 如果還是找不到，透過標題文字查詢
+    if (!element) {
+      // 從錨點提取場景名稱
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // 完全匹配或包含匹配
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // 高亮顯示目標段落
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# C 端消費場景靈感參考
+
+## 章節導讀
+
+<ChapterIntroduction :duration="duration" :tags="['C 端應用', '生活方式', '情感體驗', '氛圍營造']" coreOutput="發現 15+ 生活場景靈感" expectedOutput="找到打動使用者的產品方向">
+
+本文件彙總了 <strong>LLM 大模型在 C 端消費場景中的創意應用方向</strong>。與 B 端關注效率和痛點不同，C 端產品更注重<strong>營造感覺、心理暗示和氛圍</strong>，讓使用者在使用過程中獲得情感共鳴和美好體驗。
+
+</ChapterIntroduction>
+
+## 場景氛圍快速選擇
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">找到觸動你的場景靈感</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    選擇你想要的氛圍和當下的感覺，系統會推薦相關的場景方向，點選標籤即可跳轉到對應章節。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="選擇氛圍型別" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="選擇當下感覺" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      為你推薦的 {{ currentSelection.vibe }} × {{ currentSelection.feeling }} 場景：
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      重新選擇
+    </el-button>
+  </div>
+</el-card>
+
+---
+
+## 1. 生活方式
+
+> 💡 **核心理念**：讓平凡的日常變得有儀式感，在細節中創造美好
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 晨間儀式感喚醒助手 | 整合天氣 API、日曆資料，LLM 生成個性化晨間方案；配合智慧音響播放定製音樂，智慧燈光漸亮 |
+| 2 | 獨居生活氛圍營造師 | 接入智慧家居裝置（燈光、音響、香薰機），LLM 根據時間/心情自動調節引數；學習使用者偏好持續最佳化 |
+| 3 | 週末宅家治癒計劃生成器 | 對接流媒體平臺 API 獲取片單，結合使用者歷史偏好生成電影+美食+佈置的組合方案 |
+| 4 | 睡前心靈安撫電臺 | TTS 語音合成生成溫柔故事，白噪音混合演算法，智慧音量漸弱；根據睡眠資料調整內容 |
+| 5 | 生活美學靈感捕手 | 影象識別分析使用者環境照片，LLM 生成美學建議；Pinterest/小紅書風格內容推薦 |
+
+---
+
+## 2. 情感陪伴
+
+> 💡 **核心理念**：無條件的接納和陪伴，成為情緒的溫柔容器
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 深夜樹洞傾聽者 | 端到端加密確保隱私，LLM 情感分析理解情緒，長期記憶儲存使用者故事，多輪對話持續陪伴 |
+| 2 | 失戀療愈陪伴師 | 情感階段識別演算法，分階段提供不同支援（傾訴期→宣洩期→重建期）；心理學知識庫 RAG 檢索 |
+| 3 | 焦慮緩解呼吸教練 | 生物感測器資料接入（心率/呼吸），實時監測焦慮水平；語音引導呼吸節奏，漸進式肌肉放鬆指導 |
+| 4 | 自信心重建導師 | 積極心理學對話方塊架，記錄並反饋使用者的小成就；認知重構技術幫助改變負面自我對話 |
+| 5 | 情緒日記智慧解讀 | 情緒識別 NLP 模型，時間序列分析發現情緒規律；視覺化情緒圖譜，預測性情緒預警 |
+
+---
+
+## 3. 娛樂休閒
+
+> 💡 **核心理念**：創造沉浸式的體驗，讓娛樂成為心靈的棲息地
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 沉浸式劇本殺 DM | LLM 實時生成劇情分支，語音合成扮演 NPC，根據玩家反應動態調整難度和節奏；AR/VR 場景渲染 |
+| 2 | 開放世界遊戲靈魂 NPC | 長期記憶資料庫儲存玩家互動歷史，LLM 生成個性化對話；情感計算讓 NPC 有真實情緒反應 |
+| 3 | 個性化播客內容生成 | 根據使用者興趣圖譜生成專屬內容，TTS 克隆使用者喜歡的聲音；實時互動回答聽眾問題 |
+| 4 | 虛擬演唱會氛圍組 | 虛擬形象渲染，實時彈幕互動，虛擬熒光棒/應援道具；空間音訊技術營造現場感 |
+| 5 | 互動小說共創夥伴 | LLM 實時生成劇情，使用者選擇影響故事走向；多結局設計，角色關係動態發展 |
+
+---
+
+## 4. 個人成長
+
+> 💡 **核心理念**：成長不是苦行，而是一場有趣的自我發現之旅
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 個人成長見證者 | 時間軸視覺化展示成長軌跡，里程碑自動標記；對比圖展示"過去的我"vs"現在的我" |
+| 2 | 習慣養成遊戲化教練 | 遊戲化機制（經驗值、等級、徽章），社交排行榜，AI 教練角色扮演（如"冒險導師"） |
+| 3 | 技能學習搭子匹配 | 基於興趣和學習目標的匹配演算法，學習小組社羣，互相監督打卡機制 |
+| 4 | 每日小確幸發現者 | 影象識別發現生活中的美好瞬間， gratitude journal 引導，每週美好瞬間回顧 |
+| 5 | 人生模擬體驗器 | 多分支劇情模擬不同選擇的結果，平行人生對比；決策後果的視覺化呈現 |
+
+---
+
+## 5. 社互動動
+
+> 💡 **核心理念**：讓社交變得輕鬆自然，找到舒適的連線方式
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 破冰話題生成器 | 基於場合和參與者的智慧話題推薦，實時對話分析提供延續話題建議；尷尬時刻救場提示 |
+| 2 | 朋友圈文案氛圍師 | 影象內容分析，LLM 生成多風格文案（文藝/幽默/深沉）；emoji 和排版智慧推薦 |
+| 3 | 約會氛圍策劃師 | 基於雙方興趣的約會方案生成，餐廳/活動推薦，對話話題建議；實時天氣和交通提醒 |
+| 4 | 遠端聚會氣氛擔當 | 線上遊戲庫，破冰活動生成器，話題輪盤；虛擬背景和濾鏡增強氛圍 |
+| 5 | 社交能量管理助手 | 社交活動後的能量消耗評估，恢復建議（獨處活動推薦）；社交日曆智慧規劃 |
+
+---
+
+## 6. 創意表達
+
+> 💡 **核心理念**：每個人都有創造力，只是需要被喚醒
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 靈感枯竭急救包 | 跨領域聯想演算法，隨機刺激詞生成，創意 prompt 庫；腦圖式靈感發散工具 |
+| 2 | 個人風格探索嚮導 | 影象分析識別使用者現有風格，風格趨勢推薦，虛擬試衣/試妝；風格進化時間軸 |
+| 3 | 手賬與日記美學顧問 | 排版模板推薦，配色方案生成，裝飾元素建議；手寫體識別和內容美化 |
+| 4 | 攝影構圖氛圍指南 | 場景識別和構圖建議，濾鏡風格推薦，修圖引數智慧調整；攝影技巧學習路徑 |
+| 5 | 音樂心情匹配師 | 音樂情感分析演算法，使用者心情識別，個性化歌單生成；音樂故事和背景介紹 |
+
+---
+
+## 7. 旅行探索
+
+> 💡 **核心理念**：旅行不僅是看風景，更是感受不同的生活方式
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 城市漫步探索嚮導 | 本地達人內容聚合，小眾地點推薦，AR 導航指引；實時翻譯和語音講解 |
+| 2 | 旅行心情日記生成 | 照片自動分類和精選，LLM 生成優美遊記，地理位置標記時間軸；一鍵生成旅行影片 |
+| 3 | 獨自旅行陪伴助手 | 實時位置共享和安全提醒，當地緊急聯絡人，AI 導遊語音陪伴；獨行社羣交流 |
+| 4 | 目的地氛圍預覽 | VR/360° 全景預覽，當地聲音和氣味模擬，文化背景介紹；虛擬"試住"體驗 |
+| 5 | 旅行攝影氛圍指導 | 黃金時刻提醒，構圖輔助線，當地特色拍攝點推薦；後期調色風格建議 |
+
+---
+
+## 8. 身心健康
+
+> 💡 **核心理念**：健康不是目標，而是一種溫柔的自我關愛
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 運動動力喚醒師 | 根據使用者狀態智慧推薦運動型別，微運動（5分鐘）選項，遊戲化運動挑戰；社交運動打卡 |
+| 2 | 健康飲食靈感廚房 | 冰箱食材識別，個性化食譜推薦，營養搭配分析； step-by-step 烹飪指導 |
+| 3 | 睡眠質量最佳化氛圍師 | 睡眠監測資料分析，睡前儀式生成，環境最佳化建議（溫度/溼度/光線）；智慧喚醒 |
+| 4 | 身體感知引導師 | 身體掃描冥想引導，身體部位情緒關聯，身心連線練習；生物反饋視覺化 |
+| 5 | 自我關愛提醒助手 | 工作強度監測，定期提醒休息，微關愛活動建議（喝水/伸展/深呼吸）；自我關愛記錄 |
+
+---
+
+## 9. 知識探索
+
+> 💡 **核心理念**：學習是一場永無止境的冒險，好奇是最好的老師
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 知識探索遊戲化嚮導 | 知識點地圖視覺化，闖關式學習路徑，成就徽章系統；AI 導師角色扮演 |
+| 2 | 語言學習情景夥伴 | LLM 扮演不同角色進行對話，發音糾正，文化背景介紹；沉浸式情景模擬 |
+| 3 | 好奇心滿足助手 | 維基百科/知識圖譜接入，複雜概念通俗化解釋，相關知識推薦；好奇心記錄 |
+| 4 | 讀書筆記靈感激發 | 書籍內容分析，觀點提取和關聯，思考角度推薦；讀書筆記模板和美化 |
+| 5 | 知識分享氛圍營造 | 知識卡片自動生成，分享文案最佳化，視覺美化；社交分享資料反饋 |
+
+---
+
+## 10. 關係經營
+
+> 💡 **核心理念**：好的關係需要用心經營，而用心不需要很複雜
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 親密關係溝通教練 | 情感表達模板生成，非暴力溝通技巧指導，衝突化解話術；關係健康度評估 |
+| 2 | 家人關懷提醒助手 | 重要日期提醒（生日/紀念日），關懷話術建議，家庭活動推薦；家庭相簿生成 |
+| 3 | 友誼維護氛圍師 | 朋友互動記錄，共同話題推薦，遠端聚會組織；友誼時間軸和回憶生成 |
+| 4 | 表白與驚喜策劃師 | 個性化驚喜方案生成，禮物推薦，浪漫話術建議；執行時間表和提醒 |
+| 5 | 衝突緩和氛圍引導 | 情緒降溫話術，換位思考引導，和解步驟建議；關係修復跟蹤 |
+
+---
+
+## 11. 寵物陪伴
+
+> 💡 **核心理念**：寵物是家人，它們的陪伴值得被記錄和珍惜
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 寵物擬人化日記 | 寵物行為分析，第一人稱日記生成，照片自動配圖；寵物"朋友圈" |
+| 2 | 寵物行為解讀師 | 寵物行為影片分析，健康預警，訓練建議；品種特性知識庫 |
+| 3 | 寵物陪伴時光策劃 | 寵物活動推薦，DIY 玩具教程，寵物友好地點推薦；寵物社交匹配 |
+| 4 | 寵物紀念故事生成 | 照片和影片精選，時間軸故事生成，音樂配搭；紀念冊/影片自動生成 |
+| 5 | 新手鏟屎官安心指南 | 分階段養護指南，常見問題解答，緊急情況處理；新手社羣支援 |
+
+---
+
+## 12. 財務健康
+
+> 💡 **核心理念**：財務自由不是目標，財務健康纔是
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 消費情緒覺察助手 | 消費記錄分析，情緒-消費關聯分析，衝動消費預警；替代性滿足建議 |
+| 2 | 儲蓄目標視覺化激勵 | 目標進度視覺化，夢想場景渲染，里程碑慶祝；儲蓄習慣養成遊戲 |
+| 3 | 理財知識輕鬆學 | 碎片化知識推送，場景化案例教學，互動問答；知識檢測和證書 |
+| 4 | 財務焦慮舒緩師 | 財務狀況健康評估，壓力管理技巧，小步行動計劃；財務心理諮詢 |
+| 5 | 小額投資體驗遊戲 | 虛擬投資模擬，風險教育，投資組合遊戲；真實小額投資引導 |
+
+---
+
+## 13. 職業發展
+
+> 💡 **核心理念**：職業不是軌道，而是可以探索的曠野
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 職業迷茫陪伴者 | 職業興趣測評，能力盤點，行業資訊推薦；職業導師對話 |
+| 2 | 工作成就感喚醒師 | 工作成果記錄，價值提煉，成就視覺化；同事/客戶正向反饋收集 |
+| 3 | 職場社交氛圍助手 | 職場話題推薦， networking 技巧，行業活動推薦；LinkedIn 內容最佳化 |
+| 4 | 副業靈感激發器 | 技能-興趣-市場需求匹配，副業案例庫，啟動指南；副業社羣交流 |
+| 5 | 面試前信心加油站 | 模擬面試，常見問題準備，自信提升技巧；形象建議 |
+
+---
+
+## 14. 居家空間
+
+> 💡 **核心理念**：家不只是居住的地方，更是心靈的棲息地
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 居家空間氛圍設計師 | 空間照片分析，風格推薦，傢俱/裝飾推薦；AR 預覽效果 |
+| 2 | 四季家居變換指南 | 季節主題推薦，收納和展示建議，節日裝飾方案；購物清單生成 |
+| 3 | 小戶型空間魔法 | 空間最佳化演算法，多功能傢俱推薦，收納技巧；視覺擴容技巧 |
+| 4 | 居家儀式感創造者 | 日常儀式設計（晨間/晚間/週末），儀式執行提醒；儀式效果反饋 |
+| 5 | 斷舍離心理陪伴 | 物品情感價值評估，斷舍離步驟指導，心理支援；捐贈/回收渠道推薦 |
+
+---
+
+## 15. 美食料理
+
+> 💡 **核心理念**：食物是愛的語言，烹飪是表達愛的方式
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 一人食治癒料理 | 冰箱食材識別，簡單食譜推薦， step-by-step 指導；一人食擺盤美學 |
+| 2 | 節日餐桌氛圍設計 | 節日主題選單，餐桌布置方案，氛圍營造技巧；賓客體驗最佳化 |
+| 3 | 料理心情匹配師 | 心情-食物關聯演算法，情緒調節食譜， comfort food 推薦；烹飪療愈引導 |
+| 4 | 廚房小白信心建立 | 超簡單食譜，失敗挽救技巧，信心建設話術；漸進式難度提升 |
+| 5 | 美食攝影氛圍指南 | 食物擺盤建議，自然光利用，拍攝角度指導；濾鏡和後期建議 |
+
+---
+
+## 16. 穿搭風格
+
+> 💡 **核心理念**：穿搭是自我表達，風格是內在的外顯
+
+| 序號 | 應用場景名稱 | 應用場景功能 |
+| :--: | ------------ | ------------ |
+| 1 | 今日穿搭心情板 | 天氣/場合/心情綜合推薦，虛擬試衣，搭配靈感；衣櫥管理 |
+| 2 | 膠囊衣櫥搭配師 | 衣櫥盤點，單品搭配組合，一衣多穿方案；購物建議（填補空缺） |
+| 3 | 個人風格探索之旅 | 風格測試，參考 icon 推薦，風格進化路徑；自信建設 |
+| 4 | 舊衣新穿創意師 | 舊衣改造靈感，新搭配方式，配飾點綴技巧；可持續時尚理念 |
+| 5 | 特殊場合造型顧問 | 場合 dress code 解讀，造型方案生成，妝容髮型建議；整體造型協調 |
+
+---
+
+## 設計 C 端產品的核心心法
+
+### 1. 從"功能"到"感受"
+
+B 端產品關注"這個功能能解決什麼問題"，C 端產品關注"這個功能能帶來什麼感覺"。
+
+| B 端思維 | C 端思維 |
+|---------|---------|
+| 提高效率 | 節省時間去做喜歡的事 |
+| 降低成本 | 讓每一分錢花得值得 |
+| 解決痛點 | 創造美好體驗 |
+| 功能完備 | 感覺到位 |
+
+### 2. 營造氛圍的三個層次
+
+**感官層**：視覺、聽覺、觸覺的設計
+- 溫暖的顏色
+- 舒緩的聲音
+- 流暢的動效
+
+**情感層**：情緒的共鳴和引導
+- 理解使用者的心情
+- 提供情感支援
+- 創造正向情緒
+
+**意義層**：價值的認同和歸屬
+- 讓使用者感到被理解
+- 創造歸屬感
+- 賦予行動意義
+
+### 3. 心理暗示的力量
+
+C 端產品的文案和設計都在傳遞心理暗示：
+
+- **正向暗示**："你已經做得很好了"、"慢慢來，沒關係"
+- **歸屬暗示**："很多人和你一樣"、"你並不孤單"
+- **成長暗示**："每一次嘗試都是進步"、"你在變得更好"
+
+### 4. 讓使用者成為更好的自己
+
+最好的 C 端產品不是改變使用者，而是幫助使用者成為他們想成為的自己。
+
+- 不是"你應該..."，而是"你可以..."
+- 不是"你必須..."，而是"如果你想要..."
+- 不是"你還不夠..."，而是"你已經..."
+
+---
+
+> 🌟 **記住**：C 端使用者買的不是功能，是感覺；不是工具，是陪伴；不是服務，是理解。
diff --git a/docs/zh-tw/stage-1/appendix-consumer-scenarios/index.md b/docs/zh-tw/stage-1/appendix-consumer-scenarios/index.md
new file mode 100644
index 0000000..75ba19b
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-consumer-scenarios/index.md
@@ -0,0 +1,1350 @@
+---
+title: 'C 端場景靈感方向參考'
+description: '本文件彙總了 LLM 大模型在 C 端消費場景中的創意應用方向，涵蓋生活方式、情感陪伴、娛樂休閒、個人成長、社互動動等領域的靈感場景，為 AI 應用開發者提供面向普通使用者的創意參考。'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = '約 <strong>4 小時</strong>'
+
+const vibePoint = ref('')
+const feeling = ref('')
+
+// 每個場景的主題池 - 強調感覺、氛圍、心理暗示
+const topicPool = {
+  'lifestyle': [
+    { title: '晨間儀式感喚醒助手', desc: '根據天氣、日程、心情生成專屬晨間儀式，讓每一天從美好開始' },
+    { title: '獨居生活氛圍營造師', desc: '為獨居者設計居家氛圍方案，燈光、音樂、香薰的智慧搭配建議' },
+    { title: '週末宅家治癒計劃生成器', desc: '根據當下心情推薦完美的宅家組合：電影+零食+氛圍佈置' },
+    { title: '睡前心靈安撫電臺', desc: '生成溫柔的故事、冥想引導，陪伴入睡的私人電臺' },
+    { title: '生活美學靈感捕手', desc: '從日常小事中發現美，生成生活美學建議和儀式感指南' }
+  ],
+  'emotion': [
+    { title: '深夜樹洞傾聽者', desc: '24 小時線上的情緒垃圾桶，無評判地接納所有心事' },
+    { title: '失戀療愈陪伴師', desc: '在失戀低谷期提供溫柔的陪伴、療愈建議和情緒出口' },
+    { title: '焦慮緩解呼吸教練', desc: '感知焦慮情緒，引導呼吸練習和正念冥想' },
+    { title: '自信心重建導師', desc: '透過積極對話和心理暗示，幫助重建自我認同和價值感' },
+    { title: '情緒日記智慧解讀', desc: '分析情緒日記，發現情緒規律，給出溫暖的洞察和建議' }
+  ],
+  'entertainment': [
+    { title: '沉浸式劇本殺 DM', desc: '扮演劇本殺主持人，營造懸疑氛圍，推動劇情發展' },
+    { title: '開放世界遊戲靈魂 NPC', desc: '有血有肉的 NPC，記住玩家故事，產生真實的情感羈絆' },
+    { title: '個性化播客內容生成', desc: '根據興趣生成專屬播客，像朋友聊天一樣自然' },
+    { title: '虛擬演唱會氛圍組', desc: '為線上演唱會營造現場感，實時互動、應援、氛圍渲染' },
+    { title: '互動小說共創夥伴', desc: '與讀者共同創作故事，每個選擇都影響世界走向' }
+  ],
+  'growth': [
+    { title: '個人成長見證者', desc: '記錄成長軌跡，在重要節點給予鼓勵和回顧' },
+    { title: '習慣養成遊戲化教練', desc: '將枯燥的習慣養成變成有趣的冒險遊戲' },
+    { title: '技能學習搭子匹配', desc: '找到志同道合的學習夥伴，互相督促、分享進步' },
+    { title: '每日小確幸發現者', desc: '幫助發現生活中的小美好，培養感恩和積極心態' },
+    { title: '人生模擬體驗器', desc: '模擬不同人生選擇，體驗平行時空的另一種可能' }
+  ],
+  'social': [
+    { title: '破冰話題生成器', desc: '在社交場合提供有趣的話題，化解尷尬、拉近距離' },
+    { title: '朋友圈文案氛圍師', desc: '根據照片和心情，生成有格調的朋友圈文案' },
+    { title: '約會氛圍策劃師', desc: '為約會設計完整的氛圍方案，從地點到話題到驚喜' },
+    { title: '遠端聚會氣氛擔當', desc: '線上上聚會中活躍氣氛，組織遊戲、引導互動' },
+    { title: '社交能量管理助手', desc: '幫助內曏者管理社交能量，找到舒適的社交節奏' }
+  ],
+  'creative': [
+    { title: '靈感枯竭急救包', desc: '在創意瓶頸時提供意想不到的靈感火花' },
+    { title: '個人風格探索嚮導', desc: '幫助發現獨特的個人風格，從穿搭到表達' },
+    { title: '手賬與日記美學顧問', desc: '提供手賬排版、配色、內容創意的美學建議' },
+    { title: '攝影構圖氛圍指南', desc: '根據場景和想要的感覺，提供攝影和修圖建議' },
+    { title: '音樂心情匹配師', desc: '根據當下心情和場景，推薦完美的音樂組合' }
+  ],
+  'travel': [
+    { title: '城市漫步探索嚮導', desc: '像本地人一樣探索城市，發現隱藏的寶藏地點' },
+    { title: '旅行心情日記生成', desc: '將旅行照片和心情轉化為優美的遊記和回憶' },
+    { title: '獨自旅行陪伴助手', desc: '為獨自旅行者提供陪伴、建議和安全感' },
+    { title: '目的地氛圍預覽', desc: '在出發前沉浸式體驗目的地氛圍，提前進入狀態' },
+    { title: '旅行攝影氛圍指導', desc: '根據場景和光線，指導拍出有故事感的旅行照片' }
+  ],
+  'health': [
+    { title: '運動動力喚醒師', desc: '在不想動的時候給予恰到好處的鼓勵和動力' },
+    { title: '健康飲食靈感廚房', desc: '根據心情和食材，生成治癒系的健康食譜' },
+    { title: '睡眠質量最佳化氛圍師', desc: '從環境到心理，全方位營造優質睡眠氛圍' },
+    { title: '身體感知引導師', desc: '引導關注身體訊號，建立身心連線' },
+    { title: '自我關愛提醒助手', desc: '在忙碌中提醒你停下來，關愛自己' }
+  ],
+  'learning': [
+    { title: '知識探索遊戲化嚮導', desc: '將枯燥的知識學習變成有趣的探索冒險' },
+    { title: '語言學習情景夥伴', desc: '扮演不同角色，在情景對話中自然習得語言' },
+    { title: '好奇心滿足助手', desc: '回答各種奇思妙想，滿足對世界的好奇心' },
+    { title: '讀書筆記靈感激發', desc: '幫助整理讀書心得，發現新的思考角度' },
+    { title: '知識分享氛圍營造', desc: '將學到的知識轉化為有趣的分享內容' }
+  ],
+  'relationship': [
+    { title: '親密關係溝通教練', desc: '幫助表達難以啟齒的情感，改善親密關係' },
+    { title: '家人關懷提醒助手', desc: '提醒你關心家人，提供溫馨的互動建議' },
+    { title: '友誼維護氛圍師', desc: '幫助維護遠距離友誼，創造共同話題' },
+    { title: '表白與驚喜策劃師', desc: '為重要的人策劃難忘的驚喜和浪漫時刻' },
+    { title: '衝突緩和氛圍引導', desc: '在關係緊張時提供緩和氛圍的建議和話術' }
+  ],
+  'pet': [
+    { title: '寵物擬人化日記', desc: '以寵物的視角生成日記，記錄與主人的溫馨日常' },
+    { title: '寵物行為解讀師', desc: '解讀寵物的行為語言，加深與寵物的連線' },
+    { title: '寵物陪伴時光策劃', desc: '設計與寵物互動的創意活動，增進感情' },
+    { title: '寵物紀念故事生成', desc: '將寵物的照片和回憶轉化為溫馨的故事' },
+    { title: '新手鏟屎官安心指南', desc: '為新手寵物主人提供溫暖的陪伴和指導' }
+  ],
+  'finance': [
+    { title: '消費情緒覺察助手', desc: '覺察衝動消費背後的情緒，建立健康的消費觀' },
+    { title: '儲蓄目標視覺化激勵', desc: '將儲蓄目標轉化為視覺化的夢想進度' },
+    { title: '理財知識輕鬆學', desc: '用輕鬆有趣的方式學習理財知識' },
+    { title: '財務焦慮舒緩師', desc: '在面對財務壓力時提供情緒支援和實用建議' },
+    { title: '小額投資體驗遊戲', desc: '透過遊戲化方式體驗投資，降低入門門檻' }
+  ],
+  'career': [
+    { title: '職業迷茫陪伴者', desc: '在職業迷茫期提供傾聽、探索和方向建議' },
+    { title: '工作成就感喚醒師', desc: '幫助發現工作中的價值和意義，重燃熱情' },
+    { title: '職場社交氛圍助手', desc: '提供職場社交的輕鬆話題和互動建議' },
+    { title: '副業靈感激發器', desc: '根據個人興趣和技能，激發副業創意' },
+    { title: '面試前信心加油站', desc: '在面試前提供心理建設和信心鼓勵' }
+  ],
+  'home': [
+    { title: '居家空間氛圍設計師', desc: '根據心情和季節，設計居家氛圍方案' },
+    { title: '四季家居變換指南', desc: '隨季節變換家居佈置，保持新鮮感' },
+    { title: '小戶型空間魔法', desc: '讓小空間也能有舒適溫馨的氛圍' },
+    { title: '居家儀式感創造者', desc: '為日常居家活動創造儀式感' },
+    { title: '斷舍離心理陪伴', desc: '在整理物品時提供心理支援和決策建議' }
+  ],
+  'food': [
+    { title: '一人食治癒料理', desc: '為獨居者設計簡單治癒的料理方案' },
+    { title: '節日餐桌氛圍設計', desc: '為特殊日子設計有儀式感的餐桌布置' },
+    { title: '料理心情匹配師', desc: '根據當下心情推薦適合的食物和做法' },
+    { title: '廚房小白信心建立', desc: '為零基礎烹飪者提供溫暖鼓勵和簡單食譜' },
+    { title: '美食攝影氛圍指南', desc: '讓家常料理也能拍出誘人的氛圍感' }
+  ],
+  'fashion': [
+    { title: '今日穿搭心情板', desc: '根據天氣、場合、心情生成穿搭靈感' },
+    { title: '膠囊衣櫥搭配師', desc: '用有限的單品創造無限的搭配可能' },
+    { title: '個人風格探索之旅', desc: '幫助發現和建立獨特的個人風格' },
+    { title: '舊衣新穿創意師', desc: '為舊衣服提供新的搭配靈感' },
+    { title: '特殊場合造型顧問', desc: '為重要場合設計令人自信的造型' }
+  ]
+}
+
+// 預定義的推薦鏈路對映表 - 基於氛圍和感覺
+const recommendationMap = {
+  // 氛圍點: 治癒系
+  'healing': {
+    'relax': ['emotion', 'lifestyle', 'health', 'home'],
+    'inspire': ['creative', 'growth', 'learning', 'entertainment'],
+    'connect': ['relationship', 'social', 'pet', 'emotion'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 氛圍點: 成長系
+  'growth': {
+    'relax': ['growth', 'learning', 'creative', 'health'],
+    'inspire': ['career', 'learning', 'creative', 'growth'],
+    'connect': ['social', 'relationship', 'career', 'learning'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 氛圍點: 社交系
+  'social': {
+    'relax': ['social', 'pet', 'food', 'home'],
+    'inspire': ['social', 'creative', 'entertainment', 'travel'],
+    'connect': ['relationship', 'social', 'pet', 'travel'],
+    'escape': ['social', 'travel', 'entertainment', 'creative']
+  },
+  // 氛圍點: 探索系
+  'explore': {
+    'relax': ['travel', 'creative', 'lifestyle', 'food'],
+    'inspire': ['travel', 'creative', 'learning', 'entertainment'],
+    'connect': ['travel', 'social', 'relationship', 'pet'],
+    'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
+  },
+  // 氛圍點: 日常系
+  'daily': {
+    'relax': ['lifestyle', 'home', 'health', 'emotion'],
+    'inspire': ['creative', 'food', 'fashion', 'home'],
+    'connect': ['relationship', 'social', 'pet', 'lifestyle'],
+    'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
+  }
+}
+
+const vibeOptions = [
+  { label: '治癒系', value: 'healing', desc: '溫暖、安撫、療愈' },
+  { label: '成長系', value: 'growth', desc: '進步、突破、蛻變' },
+  { label: '社交系', value: 'social', desc: '連線、分享、互動' },
+  { label: '探索系', value: 'explore', desc: '好奇、冒險、發現' },
+  { label: '日常系', value: 'daily', desc: '平凡、真實、當下' }
+]
+
+const feelingOptions = [
+  { label: '想要放鬆', value: 'relax', desc: '舒緩壓力、放空自己' },
+  { label: '尋找靈感', value: 'inspire', desc: '激發創意、獲得啟發' },
+  { label: '渴望連線', value: 'connect', desc: '與人連線、情感共鳴' },
+  { label: '暫時逃離', value: 'escape', desc: '逃離現實、沉浸體驗' }
+]
+
+const scenarios = [
+  { key: 'lifestyle', name: '生活方式', anchor: '#_1-生活方式' },
+  { key: 'emotion', name: '情感陪伴', anchor: '#_2-情感陪伴' },
+  { key: 'entertainment', name: '娛樂休閒', anchor: '#_3-娛樂休閒' },
+  { key: 'growth', name: '個人成長', anchor: '#_4-個人成長' },
+  { key: 'social', name: '社互動動', anchor: '#_5-社互動動' },
+  { key: 'creative', name: '創意表達', anchor: '#_6-創意表達' },
+  { key: 'travel', name: '旅行探索', anchor: '#_7-旅行探索' },
+  { key: 'health', name: '身心健康', anchor: '#_8-身心健康' },
+  { key: 'learning', name: '知識探索', anchor: '#_9-知識探索' },
+  { key: 'relationship', name: '關係經營', anchor: '#_10-關係經營' },
+  { key: 'pet', name: '寵物陪伴', anchor: '#_11-寵物陪伴' },
+  { key: 'finance', name: '財務健康', anchor: '#_12-財務健康' },
+  { key: 'career', name: '職業發展', anchor: '#_13-職業發展' },
+  { key: 'home', name: '居家空間', anchor: '#_14-居家空間' },
+  { key: 'food', name: '美食料理', anchor: '#_15-美食料理' },
+  { key: 'fashion', name: '穿搭風格', anchor: '#_16-穿搭風格' }
+]
+
+// 計算推薦結果 - 從主題池中隨機抽取
+const recommendationTopics = computed(() => {
+  if (!vibePoint.value || !feeling.value) return []
+  
+  const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
+  const topics = []
+  
+  // 從每個推薦場景中隨機抽取 1-2 個主題
+  keys.forEach(key => {
+    const scenario = scenarios.find(item => item.key === key)
+    const scenarioTopics = topicPool[key] || []
+    
+    if (scenario && scenarioTopics.length > 0) {
+      // 隨機抽取 1-2 個主題
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          scenarioKey: key,
+          scenarioName: scenario.name,
+          scenarioAnchor: scenario.anchor
+        })
+      })
+    }
+  })
+  
+  // 隨機排序並限制總數
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// 獲取當前選擇的描述
+const currentSelection = computed(() => {
+  const vibe = vibeOptions.find(i => i.value === vibePoint.value)
+  const feel = feelingOptions.find(p => p.value === feeling.value)
+  return {
+    vibe: vibe?.label || '',
+    feeling: feel?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // 延遲滾動確保DOM更新完成
+  setTimeout(() => {
+    // 嘗試透過ID查詢（支援多種格式）
+    let element = document.querySelector(anchor)
+    
+    // 如果找不到，嘗試其他可能的ID格式
+    if (!element) {
+      // 嘗試去掉下劃線字首
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // 如果還是找不到，透過標題文字查詢
+    if (!element) {
+      // 從錨點提取場景名稱
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // 完全匹配或包含匹配
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // 高亮顯示目標段落
+      element.style.backgroundColor = '#fdf2f8'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  vibePoint.value = ''
+  feeling.value = ''
+}
+</script>
+
+# C 端場景靈感方向參考
+
+## 章節導讀
+
+<ChapterIntroduction :duration="duration" :tags="['C 端應用', '生活方式', '情感體驗', '氛圍營造']" coreOutput="發現 15+ 生活場景靈感" expectedOutput="找到打動使用者的產品方向">
+
+本文件彙總了 <strong>LLM 大模型在 C 端消費場景中的創意應用方向</strong>。與 B 端關注效率和痛點不同，C 端產品更注重<strong>營造感覺、心理暗示和氛圍</strong>，讓使用者在使用過程中獲得情感共鳴和美好體驗。
+
+</ChapterIntroduction>
+
+## 場景氛圍快速選擇
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
+  <div style="font-weight: 600; margin-bottom: 8px;">找到觸動你的場景靈感</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    選擇你想要的氛圍和當下的感覺，系統會推薦相關的場景方向，點選標籤即可跳轉到對應章節。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="vibePoint" placeholder="選擇氛圍型別" style="width: 100%;">
+        <el-option
+          v-for="item in vibeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="feeling" placeholder="選擇當下感覺" style="width: 100%;">
+        <el-option
+          v-for="item in feelingOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <div style="font-weight: 500;">{{ item.label }}</div>
+          <div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
+      為你推薦的 {{ currentSelection.vibe }} × {{ currentSelection.feeling }} 場景：
+    </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <el-tag
+        v-for="topic in recommendationTopics"
+        :key="topic.title"
+        type="danger"
+        effect="light"
+        style="cursor: pointer; margin-bottom: 4px;"
+        @click="scrollToAnchor(topic.scenarioAnchor)"
+      >
+        {{ topic.title }}
+      </el-tag>
+    </div>
+    <el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
+      重新選擇
+    </el-button>
+  </div>
+</el-card>
+
+## 場景方向速覽
+
+<el-row :gutter="16" style="margin-top: 24px;">
+  <el-col :span="8" v-for="scenario in scenarios.slice(0, 6)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} 個靈感方向</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(6, 12)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} 個靈感方向</div>
+    </el-card>
+  </el-col>
+</el-row>
+<el-row :gutter="16">
+  <el-col :span="8" v-for="scenario in scenarios.slice(12, 16)" :key="scenario.key">
+    <el-card shadow="hover" style="margin-bottom: 16px; cursor: pointer;" @click="scrollToAnchor(scenario.anchor)">
+      <div style="font-weight: 600; color: #303133; margin-bottom: 4px;">{{ scenario.name }}</div>
+      <div style="font-size: 12px; color: #909399;">{{ topicPool[scenario.key]?.length || 0 }} 個靈感方向</div>
+    </el-card>
+  </el-col>
+</el-row>
+
+---
+
+## 1. 生活方式
+
+> 💡 **核心理念**：讓平凡的日常變得有儀式感，在細節中創造美好
+
+### 1.1 晨間儀式感喚醒助手
+
+**場景描述**：
+每天醒來，根據當天的天氣、日程安排和心情狀態，生成專屬的晨間儀式方案。可能是一段溫柔的音樂、一杯適合今天心情的茶、一個 5 分鐘的伸展動作，或是一句恰到好處的鼓勵。
+
+**氛圍營造要點**：
+- 漸進式的喚醒，而非突然的催促
+- 視覺和聽覺的多感官體驗
+- 讓每一天的開始都充滿期待
+
+**心理暗示**：
+> "今天會是美好的一天，因為你值得被溫柔對待"
+
+### 1.2 獨居生活氛圍營造師
+
+**場景描述**：
+為獨居者設計居家氛圍方案，智慧搭配燈光、音樂、香薰等元素，讓一個人的家也能充滿溫度和歸屬感。
+
+**氛圍營造要點**：
+- 根據時間和心情自動調整氛圍
+- 季節性的主題變化
+- 營造"被陪伴"的感覺
+
+### 1.3 週末宅家治癒計劃生成器
+
+**場景描述**：
+週五晚上，根據你當下的心情和天氣，生成完美的週末宅家方案。包括電影推薦、零食搭配、居家佈置建議，甚至是適合發呆的角落。
+
+**氛圍營造要點**：
+- 治癒系的視覺呈現
+- 無壓力的選擇體驗
+- 讓宅家成為一種享受
+
+### 1.4 睡前心靈安撫電臺
+
+**場景描述**：
+每晚睡前，生成專屬的安撫內容。可能是溫柔的故事、冥想引導、白噪音，或是簡單的晚安問候，陪伴你進入夢鄉。
+
+**氛圍營造要點**：
+- 舒緩的聲音和節奏
+- 漸弱的音量設計
+- 營造安全感和放鬆感
+
+### 1.5 生活美學靈感捕手
+
+**場景描述**：
+從日常小事中發現美，為使用者提供生活美學建議和儀式感指南。如何讓一杯咖啡更有格調，如何讓書桌成為心流空間。
+
+**氛圍營造要點**：
+- 發現平凡中的不凡
+- 培養對美的感知力
+- 讓生活成為藝術
+
+---
+
+## 2. 情感陪伴
+
+> 💡 **核心理念**：無條件的接納和陪伴，成為情緒的溫柔容器
+
+### 2.1 深夜樹洞傾聽者
+
+**場景描述**：
+24 小時線上的情緒垃圾桶，無評判地接納所有心事。無論是開心、難過、憤怒還是迷茫，都有一個地方可以安放。
+
+**氛圍營造要點**：
+- 絕對的安全感和隱私保護
+- 不打斷、不說教、只傾聽
+- 溫柔的回應和共情
+
+**心理暗示**：
+> "你的所有情緒都是合理的，我在這裡陪著你"
+
+### 2.2 失戀療愈陪伴師
+
+**場景描述**：
+在失戀的低谷期，提供溫柔的陪伴、療愈建議和情緒出口。不是急於讓你走出來，而是允許你慢慢來。
+
+**氛圍營造要點**：
+- 允許悲傷的存在
+- 漸進式的情緒疏導
+- 重建自我價值感
+
+### 2.3 焦慮緩解呼吸教練
+
+**場景描述**：
+感知使用者的焦慮情緒，引導進行呼吸練習和正念冥想。在緊張的時刻，提供一個可以依靠的錨點。
+
+**氛圍營造要點**：
+- 即時的情緒覺察
+- 簡單有效的緩解方法
+- 營造平靜和掌控感
+
+### 2.4 自信心重建導師
+
+**場景描述**：
+透過積極的對話和心理暗示，幫助使用者重建自我認同和價值感。記錄每一個小進步，見證蛻變的過程。
+
+**氛圍營造要點**：
+- 發現被忽視的優點
+- 慶祝每一個小勝利
+- 建立積極的自我對話
+
+### 2.5 情緒日記智慧解讀
+
+**場景描述**：
+分析使用者的情緒日記，發現情緒規律，給出溫暖的洞察和建議。讓使用者更瞭解自己，與情緒和平相處。
+
+**氛圍營造要點**：
+- 視覺化的情緒軌跡
+- 溫暖的洞察而非冰冷的分析
+- 提供 actionable 的建議
+
+---
+
+## 3. 娛樂休閒
+
+> 💡 **核心理念**：創造沉浸式的體驗，讓娛樂成為心靈的棲息地
+
+### 3.1 沉浸式劇本殺 DM
+
+**場景描述**：
+扮演劇本殺主持人，營造懸疑氛圍，推動劇情發展。根據玩家的反應實時調整節奏，創造難忘的遊戲體驗。
+
+**氛圍營造要點**：
+- 引人入勝的開場
+- 恰到好處的懸念設定
+- 沉浸式的角色扮演
+
+### 3.2 開放世界遊戲靈魂 NPC
+
+**場景描述**：
+有血有肉的 NPC，記住玩家的故事，產生真實的情感羈絆。不只是任務釋出者，而是遊戲世界中的朋友。
+
+**氛圍營造要點**：
+- 持久的記憶和連續性
+- 個性化的互動
+- 真實的情感連線
+
+### 3.3 個性化播客內容生成
+
+**場景描述**：
+根據使用者的興趣生成專屬播客，像朋友聊天一樣自然。內容可以是知識分享、故事講述，或是簡單的陪伴。
+
+**氛圍營造要點**：
+- 輕鬆自然的對話感
+- 符合個人口味的內容
+- 隨時可以開始的陪伴
+
+### 3.4 虛擬演唱會氛圍組
+
+**場景描述**：
+為線上演唱會營造現場感，實時互動、應援、氛圍渲染。即使一個人在家，也能感受到演唱會的熱烈氣氛。
+
+**氛圍營造要點**：
+- 視覺和聽覺的沉浸
+- 實時的互動和共鳴
+- 創造集體參與感
+
+### 3.5 互動小說共創夥伴
+
+**場景描述**：
+與讀者共同創作故事，每個選擇都影響世界走向。讀者不再是被動的消費者，而是故事的共同創造者。
+
+**氛圍營造要點**：
+- 無限的可能性
+- 真正的選擇權
+- 創造屬於自己的故事
+
+---
+
+## 4. 個人成長
+
+> 💡 **核心理念**：成長不是苦行，而是一場有趣的自我發現之旅
+
+### 4.1 個人成長見證者
+
+**場景描述**：
+記錄使用者的成長軌跡，在重要節點給予鼓勵和回顧。讓成長看得見，讓努力被記住。
+
+**氛圍營造要點**：
+- 視覺化的成長軌跡
+- 重要時刻的紀念
+- 溫暖的回顧和展望
+
+**心理暗示**：
+> "你已經在不知不覺中走了這麼遠"
+
+### 4.2 習慣養成遊戲化教練
+
+**場景描述**：
+將枯燥的習慣養成變成有趣的冒險遊戲。每一個小習慣的堅持，都是遊戲中的一個成就。
+
+**氛圍營造要點**：
+- 遊戲化的激勵機制
+- 即時的正向反饋
+- 讓堅持變得有趣
+
+### 4.3 技能學習搭子匹配
+
+**場景描述**：
+找到志同道合的學習夥伴，互相督促、分享進步。學習不再是一個人的孤獨旅程。
+
+**氛圍營造要點**：
+- 找到同頻的夥伴
+- 互相激勵的氛圍
+- 共同進步的喜悅
+
+### 4.4 每日小確幸發現者
+
+**場景描述**：
+幫助使用者發現生活中的小美好，培養感恩和積極心態。每天記錄一件值得感恩的小事。
+
+**氛圍營造要點**：
+- 發現被忽視的美好
+- 培養感恩的習慣
+- 積累正能量
+
+### 4.5 人生模擬體驗器
+
+**場景描述**：
+模擬不同人生選擇，體驗平行時空的另一種可能。幫助使用者探索不同的可能性，做出更真實的選擇。
+
+**氛圍營造要點**：
+- 安全的選擇體驗
+- 探索未知的自己
+- 沒有對錯，只有體驗
+
+---
+
+## 5. 社互動動
+
+> 💡 **核心理念**：讓社交變得輕鬆自然，找到舒適的連線方式
+
+### 5.1 破冰話題生成器
+
+**場景描述**：
+在社交場合提供有趣的話題，化解尷尬、拉近距離。無論是陌生人聚會還是老友重逢，總有合適的話題。
+
+**氛圍營造要點**：
+- 輕鬆有趣的話題
+- 適合不同場合
+- 自然的對話開場
+
+### 5.2 朋友圈文案氛圍師
+
+**場景描述**：
+根據照片和心情，生成有格調的朋友圈文案。讓分享成為一種表達，讓記錄更有溫度。
+
+**氛圍營造要點**：
+- 符合個人風格
+- 有格調但不刻意
+- 真實的情感表達
+
+### 5.3 約會氛圍策劃師
+
+**場景描述**：
+為約會設計完整的氛圍方案，從地點到話題到驚喜。讓每一次約會都成為美好的回憶。
+
+**氛圍營造要點**：
+- 完整的體驗設計
+- 恰到好處的驚喜
+- 營造浪漫氛圍
+
+### 5.4 遠端聚會氣氛擔當
+
+**場景描述**：
+線上上聚會中活躍氣氛，組織遊戲、引導互動。讓遠端聚會也能有面對面的熱鬧感。
+
+**氛圍營造要點**：
+- 有趣的遊戲和活動
+- 引導自然互動
+- 創造集體參與感
+
+### 5.5 社交能量管理助手
+
+**場景描述**：
+幫助內曏者管理社交能量，找到舒適的社交節奏。不需要強迫自己，也能享受社交的樂趣。
+
+**氛圍營造要點**：
+- 尊重個人邊界
+- 找到適合自己的方式
+- 不需要改變性格
+
+---
+
+## 6. 創意表達
+
+> 💡 **核心理念**：每個人都有創造力，只是需要被喚醒
+
+### 6.1 靈感枯竭急救包
+
+**場景描述**：
+在創意瓶頸時提供意想不到的靈感火花。不是標準答案，而是開啟思路的鑰匙。
+
+**氛圍營造要點**：
+- 打破思維定式
+- 意想不到的連線
+- 激發內在創造力
+
+### 6.2 個人風格探索嚮導
+
+**場景描述**：
+幫助使用者發現獨特的個人風格，從穿搭到表達。讓每個人都能找到屬於自己的聲音。
+
+**氛圍營造要點**：
+- 發現獨特的自己
+- 鼓勵實驗和嘗試
+- 建立個人品牌
+
+### 6.3 手賬與日記美學顧問
+
+**場景描述**：
+提供手賬排版、配色、內容創意的美學建議。讓記錄成為一種藝術，讓回憶更有質感。
+
+**氛圍營造要點**：
+- 視覺的美學指導
+- 內容的創意啟發
+- 個性化的風格
+
+### 6.4 攝影構圖氛圍指南
+
+**場景描述**：
+根據場景和想要的感覺，提供攝影和修圖建議。讓每一張照片都能傳達想要的情緒。
+
+**氛圍營造要點**：
+- 氛圍感優先於技術
+- 情緒的視覺表達
+- 發現美的眼睛
+
+### 6.5 音樂心情匹配師
+
+**場景描述**：
+根據當下心情和場景，推薦完美的音樂組合。音樂是情緒的共鳴，是氛圍的營造者。
+
+**氛圍營造要點**：
+- 精準的情緒匹配
+- 場景化的推薦
+- 音樂的治癒力量
+
+---
+
+## 7. 旅行探索
+
+> 💡 **核心理念**：旅行不僅是看風景，更是感受不同的生活方式
+
+### 7.1 城市漫步探索嚮導
+
+**場景描述**：
+像本地人一樣探索城市，發現隱藏的寶藏地點。不只是打卡景點，而是體驗城市的真實脈動。
+
+**氛圍營造要點**：
+- 本地人的視角
+- 意外的發現和驚喜
+- 深入城市的靈魂
+
+### 7.2 旅行心情日記生成
+
+**場景描述**：
+將旅行照片和心情轉化為優美的遊記和回憶。讓每一次旅行都留下獨特的印記。
+
+**氛圍營造要點**：
+- 情感的記錄
+- 優美的文字
+- 永恆的回憶
+
+### 7.3 獨自旅行陪伴助手
+
+**場景描述**：
+為獨自旅行者提供陪伴、建議和安全感。一個人旅行也能感到被照顧和陪伴。
+
+**氛圍營造要點**：
+- 安全感的營造
+- 有趣的陪伴
+- 獨自但不孤獨
+
+### 7.4 目的地氛圍預覽
+
+**場景描述**：
+在出發前沉浸式體驗目的地氛圍，提前進入狀態。讓期待成為旅行的一部分。
+
+**氛圍營造要點**：
+- 沉浸式的預覽
+- 激發期待和想象
+- 提前進入旅行狀態
+
+### 7.5 旅行攝影氛圍指導
+
+**場景描述**：
+根據場景和光線，指導拍出有故事感的旅行照片。不只是記錄，而是講述旅行的故事。
+
+**氛圍營造要點**：
+- 故事感的構圖
+- 情緒的捕捉
+- 獨特的視角
+
+---
+
+## 8. 身心健康
+
+> 💡 **核心理念**：健康不是目標，而是一種溫柔的自我關愛
+
+### 8.1 運動動力喚醒師
+
+**場景描述**：
+在不想動的時候給予恰到好處的鼓勵和動力。不是強迫，而是喚醒內在的動力。
+
+**氛圍營造要點**：
+- 理解不想動的心情
+- 循序漸進的引導
+- 慶祝每一個小行動
+
+### 8.2 健康飲食靈感廚房
+
+**場景描述**：
+根據心情和食材，生成治癒系的健康食譜。健康飲食也可以是美味的享受。
+
+**氛圍營造要點**：
+- 美食的誘惑
+- 簡單的做法
+- 健康的平衡
+
+### 8.3 睡眠質量最佳化氛圍師
+
+**場景描述**：
+從環境到心理，全方位營造優質睡眠氛圍。讓睡眠成為一天中最期待的時刻。
+
+**氛圍營造要點**：
+- 環境的最佳化
+- 心理的放鬆
+- 儀式感的設計
+
+### 8.4 身體感知引導師
+
+**場景描述**：
+引導使用者關注身體訊號，建立身心連線。在忙碌中停下來，傾聽身體的聲音。
+
+**氛圍營造要點**：
+- 溫柔的引導
+- 覺察身體
+- 身心合一
+
+### 8.5 自我關愛提醒助手
+
+**場景描述**：
+在忙碌中提醒使用者停下來，關愛自己。一個小小的提醒，可能改變一整天的狀態。
+
+**氛圍營造要點**：
+- 及時的提醒
+- 簡單的行動
+- 溫柔的關懷
+
+---
+
+## 9. 知識探索
+
+> 💡 **核心理念**：學習是一場永無止境的冒險，好奇是最好的老師
+
+### 9.1 知識探索遊戲化嚮導
+
+**場景描述**：
+將枯燥的知識學習變成有趣的探索冒險。每一個知識點都是等待發現的寶藏。
+
+**氛圍營造要點**：
+- 遊戲化的體驗
+- 探索的樂趣
+- 成就的滿足感
+
+### 9.2 語言學習情景夥伴
+
+**場景描述**：
+扮演不同角色，在情景對話中自然習得語言。不是死記硬背，而是在使用中學習。
+
+**氛圍營造要點**：
+- 真實的情景
+- 有趣的角色
+- 自然的習得
+
+### 9.3 好奇心滿足助手
+
+**場景描述**：
+回答各種奇思妙想，滿足對世界的好奇心。沒有愚蠢的問題，只有等待發現的答案。
+
+**氛圍營造要點**：
+- 鼓勵提問
+- 有趣的解答
+- 激發更多好奇
+
+### 9.4 讀書筆記靈感激發
+
+**場景描述**：
+幫助整理讀書心得，發現新的思考角度。讓閱讀成為與作者和自我的對話。
+
+**氛圍營造要點**：
+- 深度的思考
+- 個人的見解
+- 知識的連線
+
+### 9.5 知識分享氛圍營造
+
+**場景描述**：
+將學到的知識轉化為有趣的分享內容。分享不僅是輸出，更是加深理解的過程。
+
+**氛圍營造要點**：
+- 有趣的表達
+- 分享的快樂
+- 知識的傳播
+
+---
+
+## 10. 關係經營
+
+> 💡 **核心理念**：好的關係需要用心經營，而用心不需要很複雜
+
+### 10.1 親密關係溝通教練
+
+**場景描述**：
+幫助使用者表達難以啟齒的情感，改善親密關係。有時候，只是需要找到對的方式說出心裡話。
+
+**氛圍營造要點**：
+- 安全的表達空間
+- 溫和的建議
+- 增進理解
+
+### 10.2 家人關懷提醒助手
+
+**場景描述**：
+提醒使用者關心家人，提供溫馨的互動建議。在忙碌中不忘最重要的牽掛。
+
+**氛圍營造要點**：
+- 及時的提醒
+- 簡單的關懷
+- 溫暖的連線
+
+### 10.3 友誼維護氛圍師
+
+**場景描述**：
+幫助維護遠距離友誼，創造共同話題。距離不是問題，用心纔是關鍵。
+
+**氛圍營造要點**：
+- 創造連線的機會
+- 共同的話題
+- 友誼的延續
+
+### 10.4 表白與驚喜策劃師
+
+**場景描述**：
+為重要的人策劃難忘的驚喜和浪漫時刻。讓特別的日子更加特別。
+
+**氛圍營造要點**：
+- 個性化的設計
+- 浪漫的驚喜
+- 難忘的回憶
+
+### 10.5 衝突緩和氛圍引導
+
+**場景描述**：
+在關係緊張時提供緩和氛圍的建議和話術。幫助找到和解的橋樑。
+
+**氛圍營造要點**：
+- 理解雙方立場
+- 溫和的建議
+- 修復關係
+
+---
+
+## 11. 寵物陪伴
+
+> 💡 **核心理念**：寵物是家人，它們的陪伴值得被記錄和珍惜
+
+### 11.1 寵物擬人化日記
+
+**場景描述**：
+以寵物的視角生成日記，記錄與主人的溫馨日常。想象它們會怎麼描述和你在一起的時光。
+
+**氛圍營造要點**：
+- 可愛的視角
+- 溫馨的日常
+- 情感的連線
+
+### 11.2 寵物行為解讀師
+
+**場景描述**：
+解讀寵物的行為語言，加深與寵物的連線。更好地理解它們的需求和情緒。
+
+**氛圍營造要點**：
+- 專業的解讀
+- 增進理解
+- 更好的照顧
+
+### 11.3 寵物陪伴時光策劃
+
+**場景描述**：
+設計與寵物互動的創意活動，增進感情。讓陪伴的時光更加有趣和有意義。
+
+**氛圍營造要點**：
+- 創意的活動
+- 趣味的互動
+- 美好的回憶
+
+### 11.4 寵物紀念故事生成
+
+**場景描述**：
+將寵物的照片和回憶轉化為溫馨的故事。記錄與毛孩子的珍貴時光。
+
+**氛圍營造要點**：
+- 溫馨的敘事
+- 珍貴的回憶
+- 永恆的愛
+
+### 11.5 新手鏟屎官安心指南
+
+**場景描述**：
+為新手寵物主人提供溫暖的陪伴和指導。讓養寵的旅程充滿信心和樂趣。
+
+**氛圍營造要點**：
+- 全面的指導
+- 溫暖的鼓勵
+- 安心的陪伴
+
+---
+
+## 12. 財務健康
+
+> 💡 **核心理念**：財務自由不是目標，財務健康纔是
+
+### 12.1 消費情緒覺察助手
+
+**場景描述**：
+覺察衝動消費背後的情緒，建立健康的消費觀。理解自己為什麼想買，比買不買更重要。
+
+**氛圍營造要點**：
+- 溫柔的覺察
+- 理解而非評判
+- 健康的習慣
+
+### 12.2 儲蓄目標視覺化激勵
+
+**場景描述**：
+將儲蓄目標轉化為視覺化的夢想進度。讓儲蓄成為實現夢想的旅程。
+
+**氛圍營造要點**：
+- 視覺化的進度
+- 夢想的連線
+- 成就的滿足
+
+### 12.3 理財知識輕鬆學
+
+**場景描述**：
+用輕鬆有趣的方式學習理財知識。理財不應該是枯燥的，而可以是有趣的探索。
+
+**氛圍營造要點**：
+- 輕鬆的表達
+- 有趣的案例
+- 實用的知識
+
+### 12.4 財務焦慮舒緩師
+
+**場景描述**：
+在面對財務壓力時提供情緒支援和實用建議。焦慮不會解決問題，但平靜可以。
+
+**氛圍營造要點**：
+- 情緒的安撫
+- 實用的建議
+- 希望的力量
+
+### 12.5 小額投資體驗遊戲
+
+**場景描述**：
+透過遊戲化方式體驗投資，降低入門門檻。在安全的環墿中學習投資。
+
+**氛圍營造要點**：
+- 遊戲化的體驗
+- 安全的嘗試
+- 學習的樂趣
+
+---
+
+## 13. 職業發展
+
+> 💡 **核心理念**：職業不是軌道，而是可以探索的曠野
+
+### 13.1 職業迷茫陪伴者
+
+**場景描述**：
+在職業迷茫期提供傾聽、探索和方向建議。迷茫是正常的，重要的是不孤單地面對。
+
+**氛圍營造要點**：
+- 無評判的傾聽
+- 探索的可能
+- 溫暖的陪伴
+
+### 13.2 工作成就感喚醒師
+
+**場景描述**：
+幫助使用者發現工作中的價值和意義，重燃熱情。有時候只是需要換一個角度看。
+
+**氛圍營造要點**：
+- 發現價值
+- 重燃熱情
+- 成就感
+
+### 13.3 職場社交氛圍助手
+
+**場景描述**：
+提供職場社交的輕鬆話題和互動建議。讓職場社交不那麼尷尬，更加自然。
+
+**氛圍營造要點**：
+- 輕鬆的話題
+- 自然的互動
+- 舒適的關係
+
+### 13.4 副業靈感激發器
+
+**場景描述**：
+根據個人興趣和技能，激發副業創意。探索工作之外的無限可能。
+
+**氛圍營造要點**：
+- 興趣的挖掘
+- 可能性的探索
+- 行動的鼓勵
+
+### 13.5 面試前信心加油站
+
+**場景描述**：
+在面試前提供心理建設和信心鼓勵。讓使用者帶著最好的狀態去迎接機會。
+
+**氛圍營造要點**：
+- 信心的建立
+- 充分的準備
+- 最好的狀態
+
+---
+
+## 14. 居家空間
+
+> 💡 **核心理念**：家不只是居住的地方，更是心靈的棲息地
+
+### 14.1 居家空間氛圍設計師
+
+**場景描述**：
+根據心情和季節，設計居家氛圍方案。讓家隨著心情和季節而變化。
+
+**氛圍營造要點**：
+- 氛圍的設計
+- 季節的變化
+- 心情的匹配
+
+### 14.2 四季家居變換指南
+
+**場景描述**：
+隨季節變換家居佈置，保持新鮮感。讓家始終充滿生機和驚喜。
+
+**氛圍營造要點**：
+- 季節的主題
+- 新鮮的感覺
+- 生活的儀式感
+
+### 14.3 小戶型空間魔法
+
+**場景描述**：
+讓小空間也能有舒適溫馨的氛圍。空間大小不重要，重要的是感覺。
+
+**氛圍營造要點**：
+- 空間的最佳化
+- 溫馨的氛圍
+- 舒適的生活
+
+### 14.4 居家儀式感創造者
+
+**場景描述**：
+為日常居家活動創造儀式感。讓平凡的家務也變得有意義。
+
+**氛圍營造要點**：
+- 儀式的設計
+- 意義的賦予
+- 生活的品質
+
+### 14.5 斷舍離心理陪伴
+
+**場景描述**：
+在整理物品時提供心理支援和決策建議。斷舍離不只是扔東西，更是整理內心。
+
+**氛圍營造要點**：
+- 心理的支援
+- 決策的幫助
+- 內心的整理
+
+---
+
+## 15. 美食料理
+
+> 💡 **核心理念**：食物是愛的語言，烹飪是表達愛的方式
+
+### 15.1 一人食治癒料理
+
+**場景描述**：
+為獨居者設計簡單治癒的料理方案。一個人也要好好喫飯，好好愛自己。
+
+**氛圍營造要點**：
+- 簡單的做法
+- 治癒的味道
+- 自愛的表達
+
+### 15.2 節日餐桌氛圍設計
+
+**場景描述**：
+為特殊日子設計有儀式感的餐桌布置。讓每一頓飯都成為值得紀唸的時刻。
+
+**氛圍營造要點**：
+- 儀式的設計
+- 視覺的享受
+- 美好的回憶
+
+### 15.3 料理心情匹配師
+
+**場景描述**：
+根據當下心情推薦適合的食物和做法。有時候，我們需要的就是那一口對的味道。
+
+**氛圍營造要點**：
+- 心情的匹配
+- 食物的治癒
+- 情感的連線
+
+### 15.4 廚房小白信心建立
+
+**場景描述**：
+為零基礎烹飪者提供溫暖鼓勵和簡單食譜。每個人都可以成為自己的大廚。
+
+**氛圍營造要點**：
+- 簡單的開始
+- 溫暖的鼓勵
+- 信心的建立
+
+### 15.5 美食攝影氛圍指南
+
+**場景描述**：
+讓家常料理也能拍出誘人的氛圍感。記錄美食，也是記錄生活的美好。
+
+**氛圍營造要點**：
+- 氛圍的營造
+- 視覺的享受
+- 生活的記錄
+
+---
+
+## 16. 穿搭風格
+
+> 💡 **核心理念**：穿搭是自我表達，風格是內在的外顯
+
+### 16.1 今日穿搭心情板
+
+**場景描述**：
+根據天氣、場合、心情生成穿搭靈感。讓每一天的穿搭都表達當下的心情。
+
+**氛圍營造要點**：
+- 心情的表達
+- 場合的匹配
+- 自信的建立
+
+### 16.2 膠囊衣櫥搭配師
+
+**場景描述**：
+用有限的單品創造無限的搭配可能。少即是多，簡單也可以很有風格。
+
+**氛圍營造要點**：
+- 極簡的理念
+- 創意的搭配
+- 可持續的時尚
+
+### 16.3 個人風格探索之旅
+
+**場景描述**：
+幫助使用者發現和建立獨特的個人風格。穿搭不只是穿衣服，而是穿出自己的態度。
+
+**氛圍營造要點**：
+- 自我的探索
+- 風格的建立
+- 自信的表達
+
+### 16.4 舊衣新穿創意師
+
+**場景描述**：
+為舊衣服提供新的搭配靈感。讓舊衣煥發新生，創造可持續的時尚。
+
+**氛圍營造要點**：
+- 創意的搭配
+- 環保的理念
+- 新鮮的感覺
+
+### 16.5 特殊場合造型顧問
+
+**場景描述**：
+為重要場合設計令人自信的造型。讓每一個重要時刻都有完美的呈現。
+
+**氛圍營造要點**：
+- 場合的匹配
+- 自信的提升
+- 完美的呈現
+
+---
+
+## 設計 C 端產品的核心心法
+
+### 1. 從"功能"到"感受"
+
+B 端產品關注"這個功能能解決什麼問題"，C 端產品關注"這個功能能帶來什麼感覺"。
+
+| B 端思維 | C 端思維 |
+|---------|---------|
+| 提高效率 | 節省時間去做喜歡的事 |
+| 降低成本 | 讓每一分錢花得值得 |
+| 解決痛點 | 創造美好體驗 |
+| 功能完備 | 感覺到位 |
+
+### 2. 營造氛圍的三個層次
+
+**感官層**：視覺、聽覺、觸覺的設計
+- 溫暖的顏色
+- 舒緩的聲音
+- 流暢的動效
+
+**情感層**：情緒的共鳴和引導
+- 理解使用者的心情
+- 提供情感支援
+- 創造正向情緒
+
+**意義層**：價值的認同和歸屬
+- 讓使用者感到被理解
+- 創造歸屬感
+- 賦予行動意義
+
+### 3. 心理暗示的力量
+
+C 端產品的文案和設計都在傳遞心理暗示：
+
+- **正向暗示**："你已經做得很好了"、"慢慢來，沒關係"
+- **歸屬暗示**："很多人和你一樣"、"你並不孤單"
+- **成長暗示**："每一次嘗試都是進步"、"你在變得更好"
+
+### 4. 讓使用者成為更好的自己
+
+最好的 C 端產品不是改變使用者，而是幫助使用者成為他們想成為的自己。
+
+- 不是"你應該..."，而是"你可以..."
+- 不是"你必須..."，而是"如果你想要..."
+- 不是"你還不夠..."，而是"你已經..."
+
+---
+
+> 🌟 **記住**：C 端使用者買的不是功能，是感覺；不是工具，是陪伴；不是服務，是理解。
diff --git a/docs/zh-tw/stage-1/appendix-double-diamond/index.md b/docs/zh-tw/stage-1/appendix-double-diamond/index.md
new file mode 100644
index 0000000..f7c52d5
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-double-diamond/index.md
@@ -0,0 +1,544 @@
+---
+title: '雙鑽模型：先做對的事，再把事做對'
+description: '面向零基礎讀者的 Double Diamond 入門文章。理解 Discover、Define、Develop、Deliver 四個階段，避免在問題還沒搞清楚時就急著做原型。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 小時</strong>'
+</script>
+
+# 雙鑽模型：先做對的事，再把事做對
+
+<a id="top-dd"></a>
+
+## 本章導讀
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['Double Diamond', '設計思維', '需求分析', '方案設計']"
+  coreOutput="1 個更清楚的問題定義和 1 個更合理的驗證切口"
+  expectedOutput="不再一上來就急著畫原型，而是知道先想清楚問題，再比較方案"
+>
+
+很多人第一次做產品時，最容易踩的坑不是“不夠努力”，而是太快進入解決方案。
+
+腦子裡剛冒出一個方向，就開始想頁面怎麼畫、按鈕放哪、要不要接 AI、要不要做登入註冊、原型用什麼工具畫。忙了一圈之後，才發現最根本的問題根本沒想清楚：使用者到底是不是真的有這個痛點？這個問題值不值得現在解決？你以為自己在推進專案，其實只是很努力地在錯誤方向上加速。
+
+雙鑽模型（Double Diamond）就是用來避免這種情況的。
+
+它最有價值的提醒是：**“做對的事情”和“把事情做對”，是兩個完全不同的階段。** 如果你還沒搞清楚問題，就急著衝去做原型，通常只會把錯誤方向做得更完整。
+
+</ChapterIntroduction>
+
+::: info 最小 SOP
+**目的**：看完後，你會更清楚做產品時什麼時候該先想問題，什麼時候才該開始想方案和原型，避免一上來就在錯誤方向上做得很認真。
+
+**行動項**：按 `Discover → Define → Develop → Deliver` 四步往下走，每一步只做當前階段該做的事。
+
+**結果**：你會得到一個更清楚的問題定義、幾種可比較的方案，以及一個可驗證的最小版本。
+
+**關鍵詞跳轉**：[雙鑽模型是什麼](#dd-what) · [第一個鑽石](#dd-first) · [AI 怎麼幫你](#dd-ai)
+:::
+
+## 你將學到以下內容
+
+1. 雙鑽模型是什麼，為什麼它適合零基礎做產品時使用
+2. Discover、Define、Develop、Deliver 四個階段分別在做什麼
+3. 怎樣區分“現在應該繼續發散”還是“現在應該開始收斂”
+4. 如何把雙鑽模型用在 AI 產品、原型設計和需求驗證裡
+
+<a id="dd-what"></a>
+## [1. 雙鑽模型到底是什麼](#top-dd)
+
+雙鑽模型是英國 **Design Council** 推廣的一套經典設計流程框架。它把一個完整的設計與創新過程，畫成兩個連續的鑽石形狀。
+
+之所以是“鑽石”，是因為每個鑽石都包含兩種相反但都很重要的動作：
+
+- **發散**：先把視野開啟，看更多可能性
+- **收斂**：再把範圍縮小，做出判斷和取捨
+
+整個過程一共四步：
+
+1. **Discover**：廣泛瞭解使用者、問題、環境和市場
+2. **Define**：從大量資訊裡提煉出真正值得解決的核心問題
+3. **Develop**：圍繞核心問題發散多種解決方案
+4. **Deliver**：篩選、原型、測試並交付更合適的方案
+
+如果把這四步壓縮成一句最容易記住的話，就是：
+
+- **第一個鑽石**：先搞清楚到底要解決什麼問題
+- **第二個鑽石**：再決定用什麼方案去解決它
+
+這也是你剛才說得很準確的那句話：
+
+- **第一個鑽石：做對的事情**
+- **第二個鑽石：把事情做對**
+
+## 2. 為什麼雙鑽模型特別適合新手
+
+新手做產品最常見的節奏，往往是這樣的：
+
+- 想到一個點子
+- 覺得這個方向很酷
+- 馬上開始畫原型
+- 做著做著發現功能越來越多
+- 最後不知道自己到底在解決什麼問題
+
+雙鑽模型的價值，不在於讓流程變複雜，而在於 **強迫你把“理解問題”和“設計方案”拆開** 。
+
+這件事聽起來很普通，但實際非常重要。因為很多失敗的產品，不是執行不認真，而是：
+
+- 選錯了問題
+- 誤解了使用者
+- 過早鎖定了解決方案
+- 把大量時間花在細節打磨上，卻沒有驗證方向
+
+雙鑽模型就是在不斷提醒你：
+
+- 不要因為想法順手，就預設問題已經成立
+- 不要因為方案能做出來，就預設它值得做
+- 不要因為原型看起來完整，就預設使用者會真的需要
+
+<a id="dd-first"></a>
+## [3. 第一個鑽石：做對的事情](#top-dd)
+
+第一個鑽石關注的是 **問題本身** ，而不是解決方案。
+
+你可以把它理解成一句話：**先別急著做，先搞清楚到底值不值得做。**
+
+### 3.1 Discover：先把問題空間開啟
+
+Discover 階段的核心任務，是 **廣泛調研，而不是快速下結論。**
+
+這一步通常會做的事情包括：
+
+- 看使用者在真實場景裡怎麼做
+- 訪談潛在使用者，瞭解他們最近一次遇到問題是什麼時候
+- 觀察他們現在怎麼湊合解決
+- 看競品和替代方案都在怎麼處理
+- 收集市場、流程、約束、上下游資訊
+
+很多人會誤以為 Discover 就是“多看點資料”。其實更關鍵的是：**你要理解人和場景，而不只是搜一堆資訊。**
+
+比如你想做一個“AI 幫忙整理會議紀要”的工具，在 Discover 階段更應該關注的是：
+
+- 使用者開完會後到底哪裡最痛苦
+- 是記錄難，還是整理難，還是同步難
+- 他們現在是自己寫、讓實習生寫、錄音回聽，還是乾脆不整理
+- 哪些會議場景最需要紀要，哪些根本不需要
+
+這一步最重要的目標不是得出答案，而是 **別太早以為自己已經知道答案。**
+
+### 3.2 Define：從一堆資訊裡提煉出核心問題
+
+如果 Discover 是開啟視野，Define 就是開始收束。
+
+Define 階段要做的，不是把所有觀察都保留下來，而是問：
+
+- 真正最值得優先解決的問題是哪一個
+- 哪個問題最常出現、最痛、最有價值
+- 我們第一版到底只盯住哪一個場景
+
+這一步的核心，是把一個寬泛話題，收斂成一個清晰問題定義。
+
+比如你一開始說：
+
+> 我想做一個提高開會效率的 AI 工具。
+
+到了 Define 階段，更好的表達可能會變成：
+
+> 我們先解決專案型團隊在 30 到 60 分鐘協作會議結束後，無法在 10 分鐘內輸出帶待辦、責任人和截止時間的紀要這個問題。
+
+這時候問題就開始變清楚了：
+
+- 使用者是誰
+- 場景是什麼
+- 卡點是什麼
+- 成功標準是什麼
+
+Define 的本質，就是 **從“問題很多”收斂到“這次先解決哪一個問題”。**
+
+## 4. 第二個鑽石：把事情做對
+
+當你完成第一個鑽石後，才真正適合進入第二個鑽石。因為這時你解決的不是一個模糊方向，而是一個被收斂過的具體問題。
+
+### 4.1 Develop：圍繞核心問題發散方案
+
+Develop 階段的重點，是 **圍繞同一個問題，探索多種可能方案。**
+
+注意，這裡的發散和 Discover 階段不一樣。
+
+- Discover 的發散，是在探索問題空間
+- Develop 的發散，是在探索解決方案空間
+
+比如還是會議紀要這個例子，到了 Develop 階段，你可以開始想：
+
+- 是做網頁工具，還是會議外掛
+- 是上傳錄音後處理，還是實時記錄
+- 是隻做摘要，還是重點做待辦提取
+- 是強調個人效率，還是強調團隊同步
+- 是給使用者自由編輯，還是直接輸出結構化模板
+
+這一步很適合腦暴，也很適合和團隊一起把方案拉開。
+
+但這裡有一個前提：**所有方案都必須服務同一個已定義的問題。**  
+如果問題沒定義清楚，Develop 很容易又重新變成功能亂飛。
+
+### 4.2 Deliver：選擇方案、做原型、測試和交付
+
+Deliver 階段是第二個鑽石裡的收斂階段。
+
+這時你要做的不是繼續想更多，而是開始判斷：
+
+- 哪個方案最適合當前階段
+- 哪個版本最小但最有用
+- 哪些功能必須先做，哪些可以以後再說
+- 怎麼做原型、測試和小範圍驗證
+
+很多人以為 Deliver 就等於“上線”。其實它更準確的意思是：**把一個方案變成可測試、可驗證、可迭代的東西。**
+
+它可能是：
+
+- 一張低保真流程圖
+- 一個 Figma 原型
+- 一個可執行的 MVP
+- 一次小規模使用者測試
+- 一輪真實反饋後的迭代版本
+
+Deliver 的重點不是“完美交付”，而是 **儘快把方案放進真實環境裡驗證。**
+
+## 5. 一個最容易記住的對照表
+
+如果你總是分不清四個階段，可以直接記下面這個版本：
+
+| 階段 | 你在做什麼 | 關鍵詞 | 常見產出 |
+| --- | --- | --- | --- |
+| Discover | 理解問題 | 調研、觀察、訪談、收集資訊 | 使用者洞察、場景筆記、問題清單 |
+| Define | 定義問題 | 提煉、聚焦、取捨、重寫問題 | 問題定義、優先順序、MVP 切口 |
+| Develop | 探索方案 | 腦暴、比較、共創、原型設想 | 方案列表、流程草圖、原型方向 |
+| Deliver | 驗證方案 | 原型、測試、迭代、交付 | 原型、測試反饋、最佳化版本 |
+
+再壓縮一點，就是這樣：
+
+- **Discover / Define**：解決“做對的事情”
+- **Develop / Deliver**：解決“把事情做對”
+
+## 6. 雙鑽模型最常見的誤區
+
+### 6.1 還沒 Discover，就直接 Deliver
+
+這是最常見的一種。很多人剛有想法就開畫原型、寫 PRD、接模型、做頁面。
+
+問題不是你做得不認真，而是你可能根本還沒確認問題值不值得解決。
+
+### 6.2 Discover 很久，但始終不 Define
+
+另一種極端是一直調研、一直看資料、一直訪談，卻遲遲不敢收斂。
+
+雙鑽不是讓你無限發散，而是提醒你：發散之後必須進入判斷和取捨。
+
+### 6.3 Define 之後，又偷偷改問題
+
+很多團隊會在 Develop 時因為某個方案更容易做，就反過來修改問題定義，讓它適配現有方案。
+
+這很危險。因為你可能不是在解決問題，而是在為自己偏愛的方案找理由。
+
+### 6.4 把 Deliver 誤解成“大而全上線”
+
+Deliver 不是說必須把完整產品都做完纔算結束。很多時候，一個可以測試的原型、一輪真實使用者試用，已經是很好的 deliver。
+
+## 7. 在 AI 產品裡，雙鑽模型怎麼用
+
+AI 產品特別容易掉進“能力先行”的坑裡，因為模型能力看起來太誘人了。你會很想直接去想：
+
+- 要不要接多模態
+- 要不要做 Agent
+- 要不要加工作流
+- 要不要接語音、影象、聯網搜尋
+
+但雙鑽模型會逼你先問：
+
+- 使用者到底在哪個環節真的卡住了
+- 這個卡點是不是非 AI 不可
+- 如果不用 AI，現有辦法到底哪裡最差
+- AI 加進去之後，最核心的進展是什麼
+
+這能幫你避免一種常見情況：**能力很強，價值很弱。**
+
+一個實用的順序是：
+
+1. 在 Discover 階段觀察使用者現在怎麼處理任務
+2. 在 Define 階段把最痛的一個場景寫成一句清晰的問題定義
+3. 在 Develop 階段再去比較哪些 AI 能力最適合服務這個問題
+4. 在 Deliver 階段做一個最小版本，讓真實使用者測試
+
+## 8. 可以直接套用的雙鑽模板
+
+如果你正在做自己的產品，可以先按這個順序往下寫：
+
+### Discover
+
+- 我觀察到的使用者是誰？
+- 他們最近一次遇到這個問題是什麼時候？
+- 他們現在怎麼解決？
+- 他們最煩、最慢、最不放心的地方是什麼？
+
+### Define
+
+- 這堆問題裡，最值得優先解決的是哪一個？
+- 哪個場景最高頻，或者最關鍵？
+- 我們第一版先只服務誰、只解決什麼？
+- 成功解決後，使用者狀態會發生什麼變化？
+
+### Develop
+
+- 針對這個問題，有哪些可能方案？
+- 哪些方案最輕、最快、最容易驗證？
+- 哪些是必須做，哪些是以後再說？
+
+### Deliver
+
+- 我們最小可以交付什麼來驗證這個方向？
+- 是流程圖、原型，還是 MVP？
+- 需要找誰測試？
+- 測試後怎樣判斷要繼續、修改還是放棄？
+
+## 9. 一個從零基礎也能看懂的例子
+
+假設你想做一個“幫大學生準備求職簡歷”的 AI 工具。
+
+很多人一開始就會直接進入第二個鑽石，開始想：
+
+- 要不要一鍵美化
+- 要不要智慧改寫
+- 要不要自動匹配 JD
+- 要不要生成自我介紹
+
+但按雙鑽模型，更好的過程會是這樣：
+
+### 第一個鑽石
+
+**Discover**
+
+- 去聊應屆生最近一次改簡歷是什麼時候
+- 看他們怎麼從舊簡歷改成新版本
+- 瞭解他們最困擾的是“不會寫”“不會改”，還是“不會判斷好不好”
+
+**Define**
+
+- 最後收斂出一個更具體的問題：
+- 不是“大學生不會做簡歷”
+- 而是“第一次投遞實習的學生，很難把已有經歷改寫成貼合崗位的表達，因此拖延投遞”
+
+### 第二個鑽石
+
+**Develop**
+
+- 想幾種方案：模板庫、AI 改寫、崗位對照、簡歷評分、案例參考
+
+**Deliver**
+
+- 第一版只做“根據崗位描述改寫經歷 bullet points”
+- 給 5 個學生試用，看他們會不會更快投出第一版簡歷
+
+你會發現，一旦第一個鑽石做紮實，第二個鑽石會清楚很多。
+
+## 10. 小結
+
+雙鑽模型最有力量的地方，是它幫你把一整團混亂拆成了四個更清楚的動作：
+
+- 先發散理解問題
+- 再收斂定義問題
+- 再發散探索方案
+- 最後收斂交付方案
+
+它不是讓你變慢，而是讓你 **少走很多看起來很忙、其實方向不對的彎路。**
+
+尤其在 AI 時代，做東西變得越來越快，雙鑽模型反而更重要。因為當“做出來”越來越容易時，真正稀缺的能力會變成：**你有沒有在解決一個值得解決的問題，以及你有沒有用合適的方式去解決它。**
+
+記住這一句就夠了：
+
+**先做對的事情，再把事情做對。**
+
+<a id="dd-ai"></a>
+## [11. 如何利用 AI 幫你跑雙鑽流程](#top-dd)
+
+雙鑽模型本身不是 AI 工具，但 AI 很適合在四個階段裡充當“加速器”。關鍵不是讓 AI 替你決策，而是讓它幫你擴充套件視野、整理資訊、比較方案和生成驗證材料。
+
+### 11.1 在 Discover 階段，用 AI 先做一輪資訊鋪墊
+
+在正式訪談和調研前，你可以先讓 AI 幫你做一些輕量級問題掃描，比如：
+
+- 市面上常見替代方案有哪些
+- 使用者在公開社羣裡最常抱怨什麼
+- 這個問題常見於哪些場景和人羣
+- 現有產品通常忽略了什麼
+
+這一步不能代替真實調研，但很適合幫你快速搭一個問題地圖。
+
+一個很簡單的小白輸入可以是：
+
+```text
+我想做一個幫大學生改簡歷的工具。
+你先別幫我想功能，先幫我看看大家在這個問題上最常遇到什麼麻煩。
+```
+
+AI 可能輸出：
+
+```text
+初步問題地圖：
+
+1. 不知道該寫什麼經歷
+2. 不知道怎麼針對崗位修改
+3. 改了很多版還是不確定是否夠好
+4. 需要別人幫看，但不方便總麻煩別人
+5. 因為不確定，所以一直拖著不投
+```
+
+這種輸出的作用不是替你下結論，而是讓你更快進入 Discover。
+
+### 11.2 在 Define 階段，讓 AI 幫你收斂問題定義
+
+很多人收集了一堆資料之後，最難的是把問題收成一句真正清楚的話。你可以把調研筆記交給 AI，讓它幫你壓縮成幾個候選問題定義：
+
+```text
+下面是我在 Discover 階段收集到的使用者反饋和調研筆記：
+[貼上內容]
+
+請你幫我做三件事：
+1. 歸納最常出現的問題模式
+2. 按問題頻率、痛感和可驗證性，整理出 3 個值得優先解決的問題
+3. 把每個問題寫成一句具體的問題定義
+```
+
+這樣你會更容易進入 Define，而不是一直停留在“問題好多”的狀態裡。
+
+你甚至可以把輸入寫得非常簡單：
+
+```text
+我現在收集到的問題有：
+1. 大家不知道簡歷寫什麼
+2. 大家不知道怎麼改
+3. 大家總覺得沒改好，不敢投
+
+你幫我看看，第一版最適合先解決哪個問題。
+```
+
+AI 可能輸出：
+
+```text
+建議優先解決的問題：
+
+“第一次投遞實習的學生，不確定簡歷是否已經達到可投遞水平，因此會反覆修改並拖延投遞。”
+
+原因：
+1. 這個問題更具體
+2. 它能解釋拖延行為
+3. 更容易設計一個小版本去驗證
+```
+
+這類輸出很有用，因為它幫你從一堆模糊問題裡收出一個更像 MVP 起點的定義。
+
+### 11.3 在 Develop 階段，用 AI 發散多個方案
+
+很多人一定義完問題，就只盯著腦子裡第一個想到的方案。AI 在這一步很適合幫你強制發散：
+
+```text
+我已經定義了一個核心問題：[你的問題定義]
+請你不要直接給我一個最終答案，而是從以下角度各提出 2-3 種解決方向：
+1. 最輕量的 MVP
+2. 最適合驗證需求的方案
+3. 最適合提高體驗的方案
+4. 不依賴 AI 的方案
+5. 依賴 AI 的方案
+最後請對比每種方案的優點、風險和驗證成本。
+```
+
+這樣你就不會太早被單一方案綁住。
+
+一個簡單輸入可以是：
+
+```text
+我現在的問題定義是：
+“大學生不確定簡歷是否已經可以投，所以一直拖著不投。”
+
+請你幫我想 4 種不同解決方案，不要只給我一種。
+```
+
+AI 可能輸出：
+
+```text
+方案 1：簡歷可投遞檢查清單
+方案 2：根據崗位描述做針對性改寫
+方案 3：讓使用者上傳簡歷後給出風險提示
+方案 4：提供優秀案例對照，幫助使用者判斷差距
+```
+
+這時你就更容易進入“比較方案”，而不是一上來只盯著 AI 改寫一個方向。
+
+### 11.4 在 Deliver 階段，用 AI 幫你生成原型文案和測試材料
+
+當你進入 Deliver 階段，AI 非常適合幫你加快這些工作：
+
+- 生成低保真原型裡的頁面文案
+- 整理使用者測試指令碼
+- 生成可對比的多個版本標題、按鈕、說明語
+- 整理測試後的反饋和問題列表
+
+比如你可以讓 AI 幫你生成一個 20 分鐘使用者測試指令碼，或者幫你把 5 個使用者反饋歸納成“繼續做 / 修改方向 / 暫停”的判斷依據。
+
+比如一個最小輸入可以是：
+
+```text
+我做了一個很簡單的原型：
+使用者上傳簡歷，系統告訴他哪些地方還不適合投遞。
+
+請幫我生成一份 15 分鐘的使用者測試指令碼。
+```
+
+AI 可能輸出：
+
+```text
+15 分鐘測試指令碼：
+
+1. 先請使用者描述最近一次投簡歷經歷
+2. 讓使用者獨立完成上傳簡歷
+3. 觀察他是否看得懂反饋結果
+4. 詢問：這些提示裡哪些最有幫助，哪些讓你困惑
+5. 詢問：如果下次投遞前，你會不會想再用一次
+```
+
+這種輸出很實用，因為它能幫你從“我做完原型了”走到“我接下來怎麼測”。
+
+### 11.5 讓 AI 扮演“階段守門員”
+
+雙鑽模型最常見的問題，是人會跳階段。你可以直接讓 AI 充當一個守門員，提醒你現在到底在哪一步：
+
+```text
+請你扮演產品流程教練。
+下面是我當前的專案狀態：[你的描述]
+請你判斷我現在更像處於 Discover、Define、Develop 還是 Deliver。
+並告訴我：
+1. 我是不是過早跳到了下一階段
+2. 當前階段最該補的動作是什麼
+3. 哪些事情現在先別做
+```
+
+這對新手特別有幫助，因為你很容易在“還沒想清楚問題時就開始畫原型”。
+
+## 📚 Assignments
+
+請你根據上文內容，完成下列作業：
+
+1. 選一個你最近想做的產品點子，寫出它的 Discover、Define、Develop、Deliver 四步草稿
+2. 在 Define 階段，強迫自己把問題縮成一句具體的話
+3. 在 Develop 階段，至少列出 3 種不同方案，而不是隻盯著第一個想到的做法
+4. 在 Deliver 階段，寫出一個一週內能交付的最小驗證版本
+
+## 延伸閱讀
+
+這篇文章主要參考了 Design Council 關於 Double Diamond 的官方資料，適合繼續往下看：
+
+- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
+- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
+- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
diff --git a/docs/zh-tw/stage-1/appendix-idea-sources/index.md b/docs/zh-tw/stage-1/appendix-idea-sources/index.md
new file mode 100644
index 0000000..10bb09e
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-idea-sources/index.md
@@ -0,0 +1,301 @@
+---
+title: '從哪裡找點子：3 種最適合新手的參考來源'
+description: '面向零基礎讀者的產品點子入門文章。重點整理適合直接刷 idea 的網站、趨勢來源、真實業務來源和 VC 清單，幫助你從連結裡快速找到更具體的方向。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 小時</strong>'
+</script>
+
+# 從哪裡找點子：3 種最適合新手的參考來源
+
+<a id="top-idea-sources"></a>
+
+## 本章導讀
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['找點子', '產品方向', '需求發現', '行業觀察']"
+  coreOutput="1 個更具體、值得繼續查的產品方向"
+  expectedOutput="知道去哪裡刷、怎麼看、先看什麼，不再只留下“AI + 某行業”這種很空的想法"
+>
+
+很多人卡在第一步，不是因為完全沒有靈感，而是因為刷了很多內容以後，腦子裡留下的還是大詞：
+
+- AI for education
+- AI for healthcare
+- AI for finance
+- AI agent for business
+
+這些都還不是點子。它們只是在告訴你“方向很大”，沒有告訴你：
+
+- 誰在用
+- 在什麼場景下用
+- 現在怎麼湊合做
+- 哪一步最值得先切
+
+這篇文章不講空的方法論，直接整理一批更好用的來源給你。
+
+</ChapterIntroduction>
+
+::: info 最小 SOP
+**目的**：看完後，你會知道沒想法的時候，先去哪裡刷，哪些連結適合看“具體需求”，哪些適合看“趨勢”，哪些適合看“真實業務”。
+
+**行動項**：先刷一輪 idea 列表，再看一輪賺錢小產品，再看趨勢和更業務的來源，最後留下 1 個你願意繼續查的方向。
+
+**結果**：你會得到 1 個更具體、值得繼續驗證的方向，而不是停在大詞。
+
+**關鍵詞跳轉**：[參考應用清單](#idea-apps) · [趨勢來源](#idea-trends) · [更業務的來源](#idea-business) · [VC / 加速器來源](#idea-vc) · [最短路徑](#idea-path) · [AI 怎麼幫你](#idea-ai)
+:::
+
+## 你將學到以下內容
+
+1. 哪些網站適合直接刷 idea
+2. 哪些網站適合看已經賺錢的小產品
+3. 哪些來源適合看趨勢和行業變化
+4. 哪些來源更接近真實業務和真實付費
+5. 一條適合零基礎的最短使用路徑
+
+<a id="idea-apps"></a>
+## [1. 參考應用清單：先看別人已經在做什麼](#top-idea-sources)
+
+這是最適合新手的起點，因為最具體。
+
+### 第一梯隊：開啟就是 idea 列表，直接挑
+
+- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+  這個 subreddit 的核心用途就是：真實使用者直接發“我希望有人做一個 XX”。每條帖子通常就是一個具體產品需求，還會帶一點場景描述。進去後按 `Top -> Past Month` 或 `Top -> Past Year` 排序，20 分鐘就能掃到一批真實需求。
+- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+  和上面類似，但更偏軟體 / App。帖子常見格式就是“我需要一個能做 XX 的應用”，顆粒度更小，很多都是小而美的 niche。
+- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+  比前兩個更完整。很多帖子不只是一句話需求，還會帶一點市場分析、商業模式和為什麼現在值得做。
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+  每週釋出未經驗證的創業 idea，常見欄位包括目標使用者、變現方式、初步驗證思路。格式統一，適合快速掃。
+- [IdeasAI](https://ideasai.com/)
+  用 AI 生成創業 idea，可以一直刷。質量不穩定，但很適合在“完全沒感覺”的時候拿來刺激靈感，再自己往細分場景下鑽。
+
+### 第二梯隊：看別人已經在做的賺錢小產品，反推 idea
+
+這類平臺的邏輯是：別人已經驗證了需求，甚至已經在賺錢。你看它們，不是為了照搬，而是為了看“什麼小問題已經有人付費”。
+
+- [Starter Story](https://www.starterstory.com/)
+  收錄了很多真實小生意案例，通常有創始人訪談、收入資料、起步過程。重點看月收入 1 萬到 10 萬美元的小產品，通常更 niche，也更接近普通人能理解的產品規模。
+- [Indie Hackers — Products](https://www.indiehackers.com/products)
+  獨立開發者展示產品的地方，很多會公開收入和增長。按收入排序，看那些月入幾千到幾萬美元的產品都在解決什麼具體問題。
+- [MicroConf Blog](https://microconf.com/blog)
+  偏 Micro SaaS。適合看“足夠小、但有人願意付錢”的產品切口。
+- [1000 Tools](https://1000.tools/)
+  AI 工具聚合站。適合看哪些品類已經有人做、但做得一般，或者哪些方向在國內 / 某垂直行業裡還沒被很好覆蓋。
+- [Product Hunt](https://www.producthunt.com/)
+  看最近反覆出現的產品型別，不要只盯榜一，重點看哪些品類持續有人做但還沒有明顯贏家。
+- [BetaList](https://betalist.com/)
+  適合看早期產品和還在試方向的團隊。
+
+### 看產品時，不要只看產品本身，也看差評和“代做服務”
+
+- [G2](https://www.g2.com/)
+  用法：看 1 星、2 星評價。差評裡通常藏著“現有產品哪一步沒做好”。
+- [Capterra](https://www.capterra.com/)
+  用法：和 G2 類似，適合看 SaaS 類產品的真實抱怨。
+- 淘寶 / 閒魚 / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / 豬八戒
+  用法：搜“代做”“代整理”“代填”“代錄入”“代轉寫”。如果某種人工服務賣得好，背後通常就有一個可重複、可產品化的流程。
+
+判斷訊號很簡單：
+
+- 使用者已經在抱怨現有工具
+- 使用者已經在花錢找人代做
+- 使用者已經為這個流程投入很多人工和時間
+
+### 第四梯隊：看影片，有人直接幫你拆解 idea
+
+如果你不喜歡刷論壇、刷榜單，更喜歡“有人幫我拆思路”，那影片和播客也很適合。
+
+- 搜尋 `Greg Isenberg startup ideas`
+  適合看有人直接拆 2 到 3 個具體 idea，順帶講市場規模、競爭分析和切入點。
+- 搜尋 `My First Million podcast`
+  兩個主持人經常整期頭腦風暴商業 idea，密度高，經常會冒出很具體的 niche。
+- 搜尋 `YC startup ideas` 或 `Michael Seibel startup ideas`
+  適合初學者，內容直白，很多會直接講如何選方向。
+
+<a id="idea-trends"></a>
+## [2. 趨勢來源：看哪些方向正在起來](#top-idea-sources)
+
+趨勢站點的作用不是直接給你點子，而是幫你判斷：某個方向是不是在升溫，值不值得繼續看。
+
+- [Exploding Topics](https://explodingtopics.com/)
+  用資料追蹤增長很快、但還沒進入主流視野的話題和產品品類。適合看“正在起來但還沒特別擁擠”的方向。
+- [Google Trends](https://trends.google.com/)
+  搜關鍵詞，看過去一年的趨勢線，再看“相關查詢”裡的“飆升”詞。
+- [Glimpse](https://meetglimpse.com/)
+  和 Google Trends 類似，
+- 行業研究報告摘要頁
+  適合你已經有方向，想快速看這個方向在行業裡的位置。
+- McKinsey / BCG / Gartner 的趨勢內容
+  更偏企業和大行業視角，適合 B 端、工業、傳統行業。
+- [State of AI Report](https://www.stateof.ai/)
+  如果你的方向和 AI 技術本身相關，這類年度報告很適合建立大局觀。
+
+看趨勢時重點只看三件事：
+
+- 這個詞是不是持續升溫
+- 它落在哪個具體場景裡
+- 誰會最早為它付出時間、切換成本或預算
+
+<a id="idea-business"></a>
+## [3. 更業務的來源：看誰在花錢、誰在抱怨、誰在賣人工服務](#top-idea-sources)
+
+如果你想找的不是“聽起來很酷”的方向，而是“更接近真實業務”的方向，就要看離工作流更近的來源。
+
+### 看誰在真實花錢買什麼
+
+- [中國政府採購網](https://www.ccgp.gov.cn/)
+  用法：搜“智慧工地”“實驗室管理系統”“資料採集”“診所管理”“報價系統”這類詞，看預算、技術要求、使用場景。
+- 各省市公共資源交易中心
+  用法：看地方政府和國企到底在採買什麼系統。
+- 比標網 / 千里馬招標網 / 標事通
+  用法：看企業側的採購需求和高頻系統型別。
+
+這些來源的強訊號是：不是在討論未來，而是在暴露“今天已經有人願意為這件事花錢”。
+
+### 看誰在真實抱怨什麼
+
+- 製造業：機械社羣、工控論壇
+- 醫療：丁香園、醫脈通
+- 建築 / 工程：土木線上、廣聯達社羣
+- 財務 / 會計：中國會計視野論壇
+- 外貿：福步外貿論壇、米課圈
+- 餐飲 / 零售：職業餐飲網、聯商網論壇
+- [Reddit](https://www.reddit.com/) 的垂直板塊：`r/smallbusiness`、`r/Entrepreneur`、`r/SaaS`、`r/healthcare`、`r/manufacturing`
+- [V2EX](https://www.v2ex.com/)
+- 即刻
+- 小紅書
+
+搜尋時不要只搜“AI”“創新”，更有效的是搜：
+
+- 太麻煩了
+- 有沒有更好的辦法
+- 求推薦工具
+- Excel 管不過來了
+- I wish there was
+- is there a tool for
+- I hate
+
+### 看誰在賣重複性人工服務
+
+- [Fiverr](https://www.fiverr.com/)
+- [Upwork](https://www.upwork.com/)
+- 豬八戒網
+- 淘寶
+- 閒魚
+
+如果你看到這些服務賣得不錯，就值得繼續查：
+
+- 幫你把 PDF 報價單整理成 Excel
+- 幫你批次整理客戶資料
+- 幫你改簡歷 / 改文案 / 做轉寫 / 做歸檔
+
+這類服務背後通常不是一次性需求，而是重複發生的工作流。
+
+### 看完整工作流，而不是隻看 idea 清單
+
+有時最直接的方法就是挑一個行業，把流程看一遍，找還在靠微信、Excel、紙筆、電話完成的步驟。
+
+- 外貿：找供應商、詢價、比價、做報價單、發給客戶、跟進回覆、安排驗貨、訂艙、報關。
+  值得看的切口：供應商報價整理成客戶報價單。
+- 口腔診所：接診、拍片、看片、溝通方案、跟進、治療、複診。
+  值得看的切口：給患者解釋方案並持續跟進。
+- 建築工地：巡檢、拍照、發羣、整理報告、交給甲方。
+  值得看的切口：從現場照片到合規報告。
+
+<a id="idea-vc"></a>
+## [4. VC / 加速器來源：看“浪往哪邊打”](#top-idea-sources)
+
+這一類來源適合幫你找大方向，不適合直接替代驗證。
+
+- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
+  用法：適合找切口，因為它經常會直接說“我們想看到有人做這個”。
+- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
+  用法：更偏大趨勢和賽道判斷，適合建立行業感覺。
+- [NFX](https://www.nfx.com/)
+  用法：適合快速掃一組創業題目。
+- [Sequoia Capital](https://www.sequoiacap.com/article/)
+  用法：不一定直接列點子，但常會講某類平臺變遷和機會。
+- [First Round Review](https://review.firstround.com/)
+  用法：適合深挖某個方向，不一定是點子清單，但文章質量通常很高。
+
+這類來源的優點：
+
+- 能告訴你未來什麼方向值得看
+- 能告訴你哪些賽道可能會持續被推動
+- 能讓你快速進入某個賽道的語境
+
+這類來源的限制：
+
+- 通常是投資人視角
+- 不一定告訴你具體哪個角色最痛
+- 不一定告訴你哪一步流程最卡
+- 不一定告訴你今天誰已經在為此付錢
+
+所以更好的用法是：先用它們找方向，再回到參考產品、行業論壇、採購資訊和真實工作流裡找更具體的切口。
+
+<a id="idea-path"></a>
+## [5. 最適合“沒想法只知道做助手的人”的最短使用路徑](#top-idea-sources)
+
+如果只走一條最短路徑，可以這樣：
+
+1. 第一步，30 分鐘。
+   開啟 [r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)，按 `Top -> Past Year` 排序，快速掃 50 條帖子，把所有你覺得“這個我好像能做”的方向先存下來。
+2. 第二步，30 分鐘。
+   開啟 [Starter Story](https://www.starterstory.com/) 或 [Indie Hackers Products](https://www.indiehackers.com/products)，按收入排序，看中等收入的產品，不要只看最成功的。找到和第一步相關的方向，看它們具體賣給誰、解決哪一步。
+3. 第三步，20 分鐘。
+   去 [Google Trends](https://trends.google.com/) 搜相關關鍵詞，看趨勢是不是在增長，再看“相關查詢”的飆升詞。
+4. 第四步，20 分鐘。
+   去 G2 / Capterra / 行業論壇 / 招標平臺 / Fiverr 這類地方，看這個方向今天到底哪裡最煩、哪裡還在靠人工。
+
+看完之後，能說清楚下面這句話就夠了：
+
+- 某類人，在某個場景裡，被某一步流程卡住，現在主要靠某種笨辦法硬撐。
+
+<a id="idea-ai"></a>
+## [6. AI 怎麼幫你](#top-idea-sources)
+
+這篇的重點不是 AI，但 AI 很適合做整理。
+
+最實用的用法只有兩個：
+
+- 把你刷到的連結、帖子標題、使用者原話貼給 AI，讓它幫你歸類成“人羣 / 場景 / 痛點 / 替代方案”。
+- 讓 AI 幫你把一堆散亂資訊收成 3 個候選方向，而不是繼續發散 50 個功能。
+
+可以直接這樣問：
+
+```text
+我最近刷到這些來源：
+1. [貼標題或原話]
+2. [貼標題或原話]
+3. [貼標題或原話]
+
+請不要給我功能列表。
+請只做三件事：
+1. 按人羣和場景分類
+2. 找出反覆出現的麻煩步驟
+3. 幫我整理成 3 個更具體的候選方向
+```
+
+## 延伸閱讀
+
+- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
+- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
+- [NFX](https://www.nfx.com/)
+- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
+- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
+- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
+- [Starter Story](https://www.starterstory.com/)
+- [Indie Hackers - Products](https://www.indiehackers.com/products)
+- [Product Hunt](https://www.producthunt.com/)
+- [BetaList](https://betalist.com/)
+- [IdeasAI](https://ideasai.com/)
+- [Unvalidated Ideas](https://unvalidatedideas.com/)
+- [Google Trends](https://trends.google.com/)
+- [Exploding Topics](https://explodingtopics.com/)
+- [G2](https://www.g2.com/)
+- [Capterra](https://www.capterra.com/)
diff --git a/docs/zh-tw/stage-1/appendix-industry-scenarios/index.md b/docs/zh-tw/stage-1/appendix-industry-scenarios/index.md
new file mode 100644
index 0000000..0ac35ea
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-industry-scenarios/index.md
@@ -0,0 +1,765 @@
+---
+title: 'B 端產業應用場景方向參考'
+description: '本文件彙總了 LLM 大模型在 B 端企業場景中的落地應用，包括工業製造業、智慧客服、教育行業、智慧程式設計、醫療方向、網路安全、金融管理、企業服務等領域的具體應用方向，為面向企業客戶的 AI 應用開發者提供參考。'
+---
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const duration = '約 <strong>6 小時</strong>'
+
+const interestPoint = ref('')
+const purpose = ref('')
+
+// 每個行業的主題池
+const topicPool = {
+  'manufacturing': [
+    { title: '新能源客車外觀 AI 輔助設計平臺', desc: '基於圖片生成模型進行外觀概念設計' },
+    { title: '智慧圖紙設計與審查助手', desc: '利用 RAG 技術構建企業設計規範知識庫' },
+    { title: '技術文件自動生成與管理', desc: '基於 LLM 自動生成產品規格書和操作手冊' },
+    { title: '生產裝置巡檢報告自動生成助手', desc: '語音描述裝置狀態，結構化生成巡檢報告' },
+    { title: '工業裝置故障診斷知識問答助手', desc: '基於歷史故障案例構建向量知識庫' }
+  ],
+  'customer-service': [
+    { title: '多渠道智慧客服自動回覆與工單生成系統', desc: '接入多渠道訊息，LLM 理解意圖後生成回覆' },
+    { title: '潛在客戶挖掘與跟進建議助手', desc: '分析歷史對話記錄，識別高意向客戶' },
+    { title: '企業內部知識智慧檢索與問答管家', desc: '基於內部文件構建向量知識庫' },
+    { title: '客服對話智慧小結與工單生成工具', desc: '自動生成會話小結並提取關鍵資訊' },
+    { title: '客服金牌話術推薦知識庫系統', desc: '分析優秀案例，提煉金牌話術模板' }
+  ],
+  'education': [
+    { title: '個性化語言學習路徑規劃與智慧導學系統', desc: '評估學習者水平，規劃每日學習任務' },
+    { title: '教案自動化編寫與教學資源推送平臺', desc: '根據課程大綱生成教案框架' },
+    { title: '作業自動化批閱與學情診斷分析系統', desc: '自動批改主觀題並生成批改建議' },
+    { title: '人才崗位勝任力模型構建與學習地圖', desc: '分析崗位 JD 提取能力要求' },
+    { title: '外語口語一對一情景化實戰演練', desc: 'LLM 扮演不同角色進行口語對話' }
+  ],
+  'programming': [
+    { title: '智慧程式碼補全與 Bug 自動修復助手', desc: 'IDE 外掛實時提供程式碼補全建議' },
+    { title: '低程式碼應用構建與流程自動化平臺', desc: '自然語言描述需求，轉換為低程式碼配置' },
+    { title: '單元測試用例生成系統', desc: 'AST 解析原始碼，生成邊界條件測試用例' },
+    { title: '程式碼智慧分析與語言遷移工具', desc: '分析程式碼質量並提供最佳化建議' },
+    { title: '前端介面（UI）程式碼自動生成工具', desc: '設計稿圖片識別，生成響應式 CSS' }
+  ],
+  'healthcare': [
+    { title: '醫學檢驗報告智慧解讀助手', desc: 'OCR 識別關鍵指標，解讀異常值' },
+    { title: '基於知識檢索技術的健康諮詢專家', desc: '構建醫學知識圖譜，RAG 檢索生成回答' },
+    { title: '臨床科研資料決策分析平臺', desc: '整合 EMR 資料，輔助生成統計分析程式碼' },
+    { title: '醫學影像報告自動生成工具', desc: '描述影像特徵，自動生成結構化報告' },
+    { title: '慢病管理用藥提醒智慧助手', desc: '生成個性化用藥提醒，支援用藥禁忌檢查' }
+  ],
+  'security': [
+    { title: '程式碼安全漏洞檢測與修復引擎', desc: 'SAST 掃描程式碼，分析漏洞原理' },
+    { title: 'AI 生成式釣魚郵件智慧識別與攔截系統', desc: '分析郵件內容，識別 AI 生成的釣魚郵件' },
+    { title: '安全運營日報自動生成助手', desc: '日誌彙總，自動提取關鍵事件' },
+    { title: '滲透測試報告智慧生成助手', desc: '根據漏洞描述自動生成報告' },
+    { title: '威脅情報智慧查詢與分析助手', desc: '對接多源威脅情報，解讀情報內容' }
+  ],
+  'finance': [
+    { title: '信貸盡調報告智慧生成助手', desc: '輸入財務資料，自動生成信貸盡調報告' },
+    { title: '私人銀行財富管理智慧顧問', desc: '分析客戶風險偏好，生成資產配置建議' },
+    { title: 'IPO 招股書智慧生成與合規校驗助手', desc: '模組化模板，自動填充業務描述' },
+    { title: '企業財務報告自動生成與經營異常預警系統', desc: '自動生成財務分析和管理層討論' },
+    { title: '保險代理人智慧話術陪練', desc: '模擬對話，評估話術合規性和說服力' }
+  ],
+  'enterprise': [
+    { title: '企業合同全生命週期合規性審查與修改建議平臺', desc: '條款比對法規庫，生成合規性審查報告' },
+    { title: '銷售會話語音轉寫與話術推薦', desc: 'ASR 轉寫，分析會話並推薦金牌話術' },
+    { title: '營銷內容智慧生成與設計系統', desc: '生成營銷文案和賣點提煉' },
+    { title: '競品廣告投放分析平臺', desc: '採集競品廣告，分析投放策略' },
+    { title: '全網熱點選題智慧分析與內容推薦系統', desc: '分析熱點趨勢並推薦選題角度' }
+  ],
+  'content': [
+    { title: '影視與小說內容創作輔助平臺', desc: '提供故事大綱、角色設定、對白生成' },
+    { title: '企業品牌故事與公關軟文智慧撰寫助手', desc: '輸入品牌關鍵詞，生成多風格文案' },
+    { title: '虛擬數字人直播互動與推流管理系統', desc: '數字人形象 + TTS 語音 + LLM 對話' },
+    { title: '短影片指令碼生成與智慧剪輯', desc: '生成短影片指令碼和分鏡' },
+    { title: '營銷內容智慧生成與設計系統', desc: '生成營銷文案和賣點提煉' }
+  ],
+  'government': [
+    { title: '12345 政務熱線智慧語音導航與自動分派系統', desc: '語音識別，理解訴求並智慧分派' },
+    { title: '政務服務大廳智慧導辦與政策問答機器人', desc: '政務知識庫 RAG 檢索' },
+    { title: '惠企政策智慧匹配與精準推送平臺', desc: '企業畫像自動匹配適用政策' },
+    { title: '行政審批材料智慧預審與合規校驗助手', desc: 'OCR 識別和關鍵資訊提取' },
+    { title: '城市網格化事件智慧識別與排程管理平臺', desc: '識別事件型別並分派' }
+  ],
+  'legal': [
+    { title: '合同風險漏洞一鍵"找茬"Agent', desc: '對照風險清單識別潛在問題' },
+    { title: '類似案件勝訴率 AI 智慧評估顧問', desc: '案件特徵提取，類案檢索匹配' },
+    { title: '法律法規變更實時監測與業務影響分析雷達', desc: '解析變更內容並評估業務影響' },
+    { title: '律師函 AIGC 自動起草工具', desc: '事實陳述輸入，生成規範律師函' },
+    { title: '複雜法律條款"翻譯"為大白話的解釋外掛', desc: '生成通俗易懂的解釋' }
+  ],
+  'travel': [
+    { title: '基於 AIGC 的懶人路書生成器', desc: '生成每日行程安排' },
+    { title: '全網機票酒店價格趨勢預測與低價自動鎖定機器人', desc: 'ML 模型預測價格趨勢' },
+    { title: '簽證材料智慧預審與自動化填表輔助系統', desc: 'OCR 識別資訊完整性檢查' },
+    { title: '出境遊實時語音翻譯與選單視覺漢化管家', desc: '離線語音翻譯，選單圖片 OCR' },
+    { title: '旅行足跡自動生成精美遊記與社交文案助手', desc: '照片資訊提取，生成遊記文案' }
+  ],
+  'emotion': [
+    { title: '基於 LLM 大模型的 24 小時深度陪伴虛擬伴侶', desc: '記憶系統儲存對話歷史' },
+    { title: '多模態情感識別與心理疏導 AI 顧問', desc: '語音語調分析 + 文字情感識別' },
+    { title: '阿爾茨海默症老人 AI 認知訓練與記憶喚醒數字人', desc: '認知遊戲訓練，老照片觸發記憶' },
+    { title: '社恐人士的 AIGC 模擬社交演練教練', desc: '虛擬社交場景模擬' },
+    { title: '全天候心情監測與 AI 正向情緒激勵助手', desc: '分析心情趨勢並生成激勵內容' }
+  ],
+  'entertainment': [
+    { title: '基於 LLM 驅動的開放世界遊戲 NPC 自主決策引擎', desc: 'NPC 行為樹融合 LLM 決策' },
+    { title: '沉浸式劇本殺 AIGC 劇情推演與 DM 控場輔助工具', desc: '玩家選擇觸發劇情分支' },
+    { title: '互動小說結局生成式修改器', desc: '讀者選擇影響劇情走向' },
+    { title: '電競戰局 CV 視覺分析與 AI 智慧解說員', desc: '遊戲畫面實時分析' },
+    { title: '多角色 TTS 語音合成有聲書自動生成系統', desc: '文字角色分配，個性化音色生成' }
+  ],
+  'ecommerce': [
+    { title: '高轉化率 AIGC 商品詳情頁批次生產工具', desc: '生成賣點文案和場景描述' },
+    { title: '服裝虛擬模特 AI 智慧試穿與展示影片生成工廠', desc: '虛擬模特試穿效果生成' },
+    { title: '跨境電商多語言 LLM 本地化翻譯與潤色助手', desc: '商品描述多語言翻譯' },
+    { title: '24 小時全天候 AIGC 數字人直播帶貨系統', desc: '數字人形象 + 實時話術生成' },
+    { title: '市場流行趨勢 AI 洞察與爆款預測引擎', desc: '洞察趨勢熱點，選品建議' }
+  ],
+  'energy': [
+    { title: '家庭用電行為 AI 分析與節能策略顧問', desc: '用電模式分析，生成節能建議' },
+    { title: '光伏元件缺陷無人機 CV 視覺識別系統', desc: '無人機巡檢拍攝，熱紅外影象分析' },
+    { title: '電力現貨交易價格 AI 趨勢預測與自動獲利策略 Agent', desc: '價格預測模型，策略生成' },
+    { title: '企業全鏈路碳排放 AI 自動核算與 ESG 報告生成助手', desc: '碳排放因子計算，ESG 報告生成' },
+    { title: '電網極端天氣負荷 AI 預測與應急排程指揮系統', desc: '負荷預測模型，排程策略生成' }
+  ],
+  'av-media': [
+    { title: '長影片精彩片段 AI 識別與短影片自動剪輯工具', desc: '影片內容分析，關鍵幀識別' },
+    { title: '影片背景噪音 AI 智慧分離與人聲增強助手', desc: '音訊分離模型，去除背景噪音' },
+    { title: '老舊影像 4K 超分修復與 AI 智慧上色工作臺', desc: '影片超解析度模型，AI 自動上色' },
+    { title: '文字轉真人級 TTS 配音與情感控制系統', desc: '多音色 TTS 模型，情感控制' },
+    { title: '會議錄音 AI 智慧轉寫與核心待辦提取助手', desc: '多人會議語音分離轉寫' }
+  ],
+  'ai-marketing': [
+    { title: '小紅書爆款文案 AIGC 自動撰寫引擎', desc: '生成種草文案，emoji 最佳化' },
+    { title: '營銷海報 AI 智慧排版與多尺寸適配工具', desc: '海報模板智慧匹配' },
+    { title: '品牌 LOGO 創意 AIGC 生成與 VI 體系構建平臺', desc: 'LOGO 創意生成，VI 規範生成' },
+    { title: '全網熱點 AI 追蹤與借勢營銷創意生成助手', desc: '分析營銷角度，創意方案生成' },
+    { title: '短影片指令碼創意 AIGC 生成與分鏡指導助手', desc: '指令碼和分鏡生成，拍攝建議' }
+  ],
+  'data-intelligence': [
+    { title: '自然語言轉 SQL 語句自動生成工具', desc: '自然語言查詢轉換為 SQL' },
+    { title: '企業資料資產目錄智慧盤點與分類系統', desc: '後設資料採集，自動分類' },
+    { title: '資料質量異常自動檢測與修復建議引擎', desc: '規則引擎 + ML 模型檢測異常' },
+    { title: '智慧報表生成與視覺化配置助手', desc: '對話式生成報表配置' },
+    { title: '資料指標口徑智慧問答助手', desc: '基於指標定義文件構建知識庫' }
+  ]
+}
+
+// 預定義的推薦鏈路對映表
+const recommendationMap = {
+  // 興趣點: 創意內容
+  'creative-content': {
+    'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
+    'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
+    'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
+    'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
+  },
+  // 興趣點: 技術服務
+  'tech-service': {
+    'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
+    'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
+    'improve-experience': ['customer-service', 'enterprise', 'programming'],
+    'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
+  },
+  // 興趣點: 資料智慧
+  'data-intel': {
+    'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
+    'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
+    'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
+    'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
+  },
+  // 興趣點: 使用者服務
+  'user-service': {
+    'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
+    'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
+    'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
+    'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
+  },
+  // 興趣點: 行業解決方案
+  'industry-solution': {
+    'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
+    'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
+    'improve-experience': ['healthcare', 'education', 'government', 'travel'],
+    'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
+  }
+}
+
+const interestOptions = [
+  { label: '創意內容生成', value: 'creative-content', desc: '文案、圖片、影片等創意內容' },
+  { label: '技術服務工具', value: 'tech-service', desc: '開發工具、自動化、程式碼輔助' },
+  { label: '資料智慧分析', value: 'data-intel', desc: '資料分析、預測、智慧決策' },
+  { label: '使用者服務體驗', value: 'user-service', desc: '客服、營銷、使用者體驗' },
+  { label: '行業解決方案', value: 'industry-solution', desc: '特定行業的深度應用' }
+]
+
+const purposeOptions = [
+  { label: '提升效率', value: 'increase-efficiency', desc: '自動化、加速流程' },
+  { label: '降低成本', value: 'reduce-cost', desc: '減少人力、最佳化資源' },
+  { label: '改善體驗', value: 'improve-experience', desc: '使用者滿意度、服務質量' },
+  { label: '業務創新', value: 'innovate-business', desc: '新產品、新模式' }
+]
+
+const industries = [
+  { key: 'manufacturing', name: '工業製造業', anchor: '#_1-工業製造業' },
+  { key: 'customer-service', name: '智慧客服', anchor: '#_2-智慧客服' },
+  { key: 'education', name: '教育行業', anchor: '#_3-教育行業' },
+  { key: 'programming', name: '智慧程式設計', anchor: '#_4-智慧程式設計' },
+  { key: 'healthcare', name: '醫療方向', anchor: '#_5-醫療方向' },
+  { key: 'security', name: '網路安全', anchor: '#_6-網路安全' },
+  { key: 'finance', name: '金融管理、保險銀行業', anchor: '#_7-金融管理、保險銀行業' },
+  { key: 'enterprise', name: '企業服務', anchor: '#_8-企業服務' },
+  { key: 'content', name: '內容生產與運營', anchor: '#_9-內容生產與運營' },
+  { key: 'government', name: '智慧政務管理', anchor: '#_10-智慧政務管理' },
+  { key: 'legal', name: '法律事務與合同管理', anchor: '#_11-法律事務與合同管理' },
+  { key: 'travel', name: '旅遊與出行服務', anchor: '#_12-旅遊與出行服務' },
+  { key: 'emotion', name: '情感陪伴', anchor: '#_13-情感陪伴' },
+  { key: 'entertainment', name: '休閒娛樂', anchor: '#_14-休閒娛樂' },
+  { key: 'ecommerce', name: '電商服務', anchor: '#_15-電商服務' },
+  { key: 'energy', name: '能源', anchor: '#_16-能源' },
+  { key: 'av-media', name: '音影片', anchor: '#_17-音影片' },
+  { key: 'ai-marketing', name: 'AI 營銷', anchor: '#_18-ai-營銷' },
+  { key: 'data-intelligence', name: '資料智慧', anchor: '#_19-資料智慧' }
+]
+
+// 計算推薦結果 - 從主題池中隨機抽取
+const recommendationTopics = computed(() => {
+  if (!interestPoint.value || !purpose.value) return []
+  
+  const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
+  const topics = []
+  
+  // 從每個推薦行業中隨機抽取 1-2 個主題
+  keys.forEach(key => {
+    const industry = industries.find(item => item.key === key)
+    const industryTopics = topicPool[key] || []
+    
+    if (industry && industryTopics.length > 0) {
+      // 隨機抽取 1-2 個主題
+      const count = Math.floor(Math.random() * 2) + 1
+      const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
+      const selected = shuffled.slice(0, Math.min(count, shuffled.length))
+      
+      selected.forEach(topic => {
+        topics.push({
+          ...topic,
+          industryKey: key,
+          industryName: industry.name,
+          industryAnchor: industry.anchor
+        })
+      })
+    }
+  })
+  
+  // 隨機排序並限制總數
+  return topics.sort(() => Math.random() - 0.5).slice(0, 8)
+})
+
+// 獲取當前選擇的描述
+const currentSelection = computed(() => {
+  const interest = interestOptions.find(i => i.value === interestPoint.value)
+  const pur = purposeOptions.find(p => p.value === purpose.value)
+  return {
+    interest: interest?.label || '',
+    purpose: pur?.label || ''
+  }
+})
+
+const scrollToAnchor = (anchor) => {
+  // 延遲滾動確保DOM更新完成
+  setTimeout(() => {
+    // 嘗試透過ID查詢（支援多種格式）
+    let element = document.querySelector(anchor)
+    
+    // 如果找不到，嘗試其他可能的ID格式
+    if (!element) {
+      // 嘗試去掉下劃線字首
+      const altAnchor = anchor.replace('#_', '#')
+      element = document.querySelector(altAnchor)
+    }
+    
+    // 如果還是找不到，透過標題文字查詢
+    if (!element) {
+      // 從錨點提取行業名稱
+      const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
+      const headings = document.querySelectorAll('h2, h3')
+      
+      for (let heading of headings) {
+        const headingText = heading.textContent.trim()
+        // 完全匹配或包含匹配
+        const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
+        if (cleanHeading === anchorText || headingText.includes(anchorText)) {
+          element = heading
+          break
+        }
+      }
+    }
+    
+    if (element) {
+      element.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'start'
+      })
+      // 高亮顯示目標段落
+      element.style.backgroundColor = '#f0f9ff'
+      element.style.transition = 'background-color 0.3s'
+      element.style.padding = '8px'
+      element.style.borderRadius = '4px'
+      setTimeout(() => {
+        element.style.backgroundColor = ''
+        element.style.padding = ''
+      }, 2000)
+    }
+  }, 100)
+}
+
+const resetSelection = () => {
+  interestPoint.value = ''
+  purpose.value = ''
+}
+</script>
+
+# B 端產業應用場景方向參考
+
+## 章節導讀
+
+<ChapterIntroduction :duration="duration" :tags="['B 端應用', '產業應用', 'AI 場景', '落地參考', '行業方案']" coreOutput="瞭解 15+ B 端行業應用場景" expectedOutput="找到適合企業客戶的專案方向">
+
+本文件彙總了 <strong>LLM 大模型在 B 端企業場景中的落地應用</strong>。與 C 端關注使用者體驗和情感不同，B 端產品更注重<strong>解決實際業務需求、提升效率、降低成本</strong>。每個場景都具備<strong>實際落地的可行性</strong>，涵蓋從<strong>需求分析到技術實現</strong>的完整思路，適合面向企業客戶的 AI 應用開發者參考。
+
+</ChapterIntroduction>
+
+## 行業方向快速選擇
+
+<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: 600; margin-bottom: 8px;">找到適合你的應用場景</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    選擇你的興趣方向和想要實現的目的，系統會推薦相關的行業場景，點選標籤即可跳轉到對應章節。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <el-select v-model="interestPoint" placeholder="選擇興趣方向" style="width: 100%;">
+        <el-option 
+          v-for="item in interestOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col :span="12">
+      <el-select v-model="purpose" placeholder="選擇實現目的" style="width: 100%;">
+        <el-option 
+          v-for="item in purposeOptions" 
+          :key="item.value" 
+          :label="item.label" 
+          :value="item.value">
+          <div style="display: flex; flex-direction: column;">
+            <span>{{ item.label }}</span>
+            <span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
+          </div>
+        </el-option>
+      </el-select>
+    </el-col>
+  </el-row>
+  
+  <!-- 推薦結果展示 - 表格形式 -->
+  <div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
+    <div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
+      為你推薦 {{ recommendationTopics.length }} 個應用場景
+      <span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
+        ({{ currentSelection.interest }} + {{ currentSelection.purpose }})
+      </span>
+    </div>
+    <el-table 
+      :data="recommendationTopics" 
+      style="width: 100%; cursor: pointer;"
+      @row-click="(row) => scrollToAnchor(row.industryAnchor)"
+      highlight-current-row>
+      <el-table-column prop="title" label="應用場景" min-width="300">
+        <template #default="scope">
+          <div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
+          <div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="industryName" label="所屬行業" width="180" align="center">
+        <template #default="scope">
+          <el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 10px; font-size: 12px; color: #909399;">
+      💡 點選表格任意行即可跳轉到對應行業章節
+    </div>
+  </div>
+  
+  <!-- 未完全選擇時的提示 -->
+  <div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
+    <span v-if="!interestPoint && !purpose">💡 請選擇興趣方向和實現目的</span>
+    <span v-else-if="!interestPoint">💡 請選擇興趣方向</span>
+    <span v-else>💡 請選擇實現目的</span>
+  </div>
+  
+  <!-- 重置按鈕 -->
+  <div v-if="interestPoint || purpose" style="margin-top: 12px;">
+    <el-button size="small" @click="resetSelection">重新選擇</el-button>
+  </div>
+</el-card>
+
+## 行業快速介紹
+
+### 主流技術選型
+
+在 AI 應用開發中，常見的技術方向包括：
+
+1. **LLM（大語言模型）**：擅長處理自然語言任務，如對話、文字生成、摘要、翻譯等，適合構建智慧客服、內容創作、知識問答類應用。
+2. **VLM（視覺語言模型）**：結合視覺理解與語言能力，可實現影象描述、視覺問答、多模態內容生成等功能，適用於醫療影像分析、工業質檢、創意設計等場景。
+3. **GenAI（生成式 AI）**：包括文字生成、影象生成（如 Stable Diffusion、DALL·E）、影片生成等技術，能夠快速生成創意內容，適用於設計輔助、營銷素材製作、教育培訓等領域。
+
+### 選擇策略
+
+學習者可以根據以下維度選擇適合自己的應用方向：
+
+1. **興趣導向**：優先選擇自己感興趣的行業或技術方向，保持學習動力。例如：
+   - 對創意設計感興趣：可嘗試內容生產、工業設計類應用
+   - 對技術挑戰感興趣：可嘗試網路安全、醫療方向的應用
+   - 對社會價值感興趣：可嘗試智慧政務、教育行業的應用
+
+2. **行業適配**：結合自身行業背景或資源優勢選擇場景：
+   - 製造業從業者：可優先考慮工業製造、企業服務類應用
+   - 教育工作者：可優先關注教育行業、內容生產類應用
+   - 醫療從業者：可探索醫療方向、健康管理類應用
+
+3. **技術難度**：根據自身技術基礎選擇合適的複雜度：
+   - 入門級：智慧客服、內容創作、簡單問答系統
+   - 進階級：工業質檢、醫療影像分析、程式碼智慧助手
+   - 專業級：金融風控、網路安全、多模態複雜應用
+
+## 1. 工業製造業 
+
+工業製造業場景主要圍繞設計輔助、生產最佳化、智慧運維三大方向展開。常見應用包括利用 AI 輔助產品外觀設計、自動化圖紙審查、技術文件智慧生成、工業裝置故障診斷等，能夠顯著提升設計效率和降低運維成本。
+
+| 序號 | 應用場景名稱                   | 實現參考                                                                                                        |
+| :--: | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+|  1   | 新能源客車外觀 AI 輔助設計平臺 | 基於圖片生成模型進行外觀概念設計，結合 LLM 進行設計規範檢查和創意迭代；整合 Three.js 3D 渲染服務                 |
+|  2   | 智慧圖紙設計與審查助手         | 利用 RAG 技術構建企業設計規範知識庫，DALL·E 生成參考圖輔助理解；整合 CAD API 實現圖紙自動化解析                  |
+|  3   | 技術文件自動生成與管理         | 基於 LLM 從產品資料庫自動生成產品規格書和操作手冊，ChromaDB 向量庫儲存歷史文件支援智慧檢索                       |
+|  4   | 生產裝置巡檢報告自動生成助手   | 巡檢人員語音描述裝置狀態，LLM 結構化生成巡檢報告；自動關聯歷史故障記錄                                           |
+|  5   | 工廠叉車智慧排程與路徑規劃系統 | LLM 解析訂單任務和倉庫位置，結合地圖 API 生成最優排程方案                                                        |
+|  6   | 基於 LLM 資訊檢索的資料倉儲    | 採用 Text-to-SQL 技術將自然語言轉換為資料庫查詢，Superset 視覺化展示查詢結果；Doris 或 ClickHouse 作為 OLAP 引擎 |
+|  7   | 工業裝置故障診斷知識問答助手   | 基於歷史故障案例構建向量知識庫，LLM 根據故障描述提供診斷建議和解決方案                                           |
+|  8   | 生產質檢報告智慧生成與缺陷分類 | OCR 識別質檢照片中的缺陷，LLM 生成結構化質檢報告；自動分類缺陷型別和嚴重程度                                     |
+|  9   | 庫存檔點智慧助手與盤點報告生成 | 盤點資料錄入，LLM 自動比對系統庫存並生成差異報告；異常庫存預警                                                   |
+|  10  | 工藝流程最佳化建議智慧問答系統   | 基於生產工藝文件構建 RAG 知識庫，LLM 根據生產問題提供最佳化建議                                                    |
+
+## 2. 智慧客服
+
+智慧客服場景聚焦於客戶服務效率提升和使用者體驗最佳化。典型應用涵蓋多渠道客服整合、智慧回覆生成、客戶情緒分析、工單自動化處理等，幫助企業實現 7×24 小時客戶服務。
+
+| 序號 | 應用場景名稱                         | 實現參考                                                                                                               |
+| :--: | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+|  1   | 多渠道智慧客服自動回覆與工單生成系統 | 接入微信、APP、官網等多渠道訊息，LLM 理解意圖後生成回覆並自動建立工單；使用 LangChain 構建對話流程，MySQL 儲存工單資料 |
+|  2   | 潛在客戶挖掘與跟進建議助手           | LLM 分析歷史客服對話記錄，識別高意向客戶特徵並打分；推薦系統結合協同過濾演算法                                           |
+|  3   | 企業內部知識智慧檢索與問答管家       | 基於 Confluence 和內部文件構建向量知識庫，LLM 結合 RAG 技術生成答案                                                    |
+|  4   | 客戶滿意度調查與服務改進管理系統     | LLM 自動分析客服對話內容進行情感分類和滿意度評分；BI 報表展示分析結果                                                  |
+|  5   | 客服對話智慧小結與工單生成工具       | 客服結束對話後，LLM 自動生成會話小結並提取關鍵資訊；自動填充工單欄位                                                   |
+|  6   | 客服話術合規性自動檢測助手           | 客服輸入回覆內容，LLM 實時檢測話術合規性和敏感詞；給出修改建議                                                         |
+|  7   | 客服工單自動摘要與分類生成工具       | LLM 對長對話記錄進行摘要生成和自動分類打標；Elasticsearch 支援工單全文檢索                                             |
+|  8   | 客戶情緒監測與異常預警工具           | 實時分析語音語調特徵和文字情感，LLM 識別異常情緒並觸發預警；WebSocket 推送預警訊息                                     |
+|  9   | 客服金牌話術推薦知識庫系統           | LLM 分析優秀客服對話案例，提煉金牌話術模板；推薦系統根據對話上下文實時推薦話術                                         |
+|  10  | 智慧外呼對話內容分析與質檢助手       | 外呼錄音轉寫後，LLM 分析對話內容提取關鍵資訊；自動生成質檢報告和改進建議                                               |
+
+## 3. 教育行業
+
+教育行業場景致力於實現個性化教學和智慧教育管理。核心應用包括智慧學習路徑規劃、作業自動批改、教案生成、學情分析等，推動教育資源的最佳化配置和因材施教的實現。
+
+| 序號 | 應用場景名稱                             | 實現參考                                                                                   |
+| :--: | ---------------------------------------- | ------------------------------------------------------------------------------------------ |
+|  1   | 個性化語言學習路徑規劃與智慧導學系統     | LLM 評估學習者當前水平，根據學習目標規劃每日學習任務；推薦演算法結合知識圖譜推薦學習資源     |
+|  2   | 教案自動化編寫與教學資源推送平臺         | LLM 根據課程大綱生成教案框架和教學設計；向量庫儲存優質教案和課件，支援關鍵詞檢索和相似推薦 |
+|  3   | 作業自動化批閱與學情診斷分析系統         | LLM 自動批改主觀題並生成批改建議，知識圖譜定位學生薄弱知識點                               |
+|  4   | 人才崗位勝任力模型構建與學習地圖         | LLM 分析崗位 JD 提取能力要求，構建崗位能力畫像；根據差距生成個性化學習地圖                 |
+|  5   | 校本課程體系構建與課件製作工具           | LLM 分析學校特色和學生需求，生成校本課程框架；整合 PPT 生成介面自動製作課件                |
+|  6   | 外語口語一對一情景化實戰演練             | LLM 扮演不同角色進行口語對話，ASR 識別發音並評分；TTS 生成標準發音示範                     |
+|  7   | 高考志願大資料推薦與生涯規劃指導平臺     | LLM 分析考生分數、位次、興趣等資訊，結合招錄資料推薦院校和專業                             |
+|  8   | 少兒程式設計程式碼助手                         | LLM 解釋程式碼邏輯和提供程式設計指導，支援塊語言和 Python 切換                                   |
+|  9   | 知識點思維導圖自動生成與學習路徑推薦工具 | 輸入課程主題，LLM 自動生成知識點思維導圖；根據學習進度推薦下一步學習內容                   |
+|  10  | 中英文作文自動化評分與批改引擎           | LLM 從立意、結構、語言、多樣性等多維度評分並生成批註；比對優秀範文                         |
+
+## 4. 智慧程式設計
+
+智慧程式設計場景旨在提升開發效率和程式碼質量。典型應用有智慧程式碼補全、Bug 自動修復、自動化測試生成、程式碼轉換等，讓開發者能夠專注於業務邏輯而非重複性編碼工作。
+
+| 序號 | 應用場景名稱                     | 實現參考                                                                                             |
+| :--: | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
+|  1   | 智慧程式碼補全與 Bug 自動修復助手  | 基於 CodeLlama 微調程式碼模型，IDE 外掛實時提供程式碼補全建議；LLM 分析錯誤棧自動定位 Bug 並生成修復程式碼 |
+|  2   | 低程式碼應用構建與流程自動化平臺   | 使用者透過自然語言描述需求，LLM 轉換為低程式碼配置或程式碼框架                                             |
+|  3   | 單元測試用例生成系統             | AST 解析原始碼提取函式邏輯，LLM 生成邊界條件和異常場景的測試用例；整合 Jest/Pytest 執行測試          |
+|  4   | 程式碼智慧分析與語言遷移工具       | 基於 Tree-sitter 解析程式碼結構，LLM 分析程式碼質量並提供最佳化建議；結合規則引擎實現語言轉換              |
+|  5   | 自然語言轉 SQL 語句自動生成工具  | LLM 將自然語言查詢轉換為 SQL，支援複雜多表關聯和聚合查詢                                             |
+|  6   | API 介面自動化測試與文件生成平臺 | LLM 分析程式碼註釋和介面定義，自動生成測試用例和 API 文件；Postman 整合測試執行                        |
+|  7   | UI 測試指令碼智慧錄製與維護工具    | 瀏覽器外掛錄製使用者操作軌跡，LLM 分析操作意圖生成測試指令碼；AI 修復失效的定位器                        |
+|  8   | 系統日誌分析與故障定位           | ELK Stack 採集日誌資料，LLM 分析異常日誌提取關鍵資訊並定位根因；推薦修復方案                         |
+|  9   | 前端介面（UI）程式碼自動生成工具   | 設計稿圖片經 OCR 識別佈局結構，LLM 生成響應式 CSS 和元件程式碼；整合 TailwindCSS 支援多種樣式框架      |
+|  10  | 資料庫結構智慧設計與建模助手     | 業務需求文件輸入給 LLM，自動生成 ER 圖和資料表結構；支援匯出 MySQL/PostgreSQL 建表指令碼               |
+
+## 5. 醫療方向
+
+醫療方向場景致力於提升診療效率和醫療服務質量。常見應用包括病歷自動生成、醫學知識問答、影像分析輔助、藥物研發支援等，推動醫療行業的智慧化轉型。
+
+| 序號 | 應用場景名稱                       | 實現參考                                                                              |
+| :--: | ---------------------------------- | ------------------------------------------------------------------------------------- |
+|  1   | 醫學檢驗報告智慧解讀助手           | 上傳檢驗報告圖片，OCR 識別關鍵指標，LLM 解讀異常值並生成通俗解釋                      |
+|  2   | 基於知識檢索技術的健康諮詢專家     | 構建醫學知識圖譜（ICD-10、藥品說明書、診療指南），RAG 檢索生成回答                    |
+|  3   | 臨床科研資料決策分析平臺           | 整合 EMR 資料和檢驗結果，LLM 輔助生成統計分析程式碼和視覺化圖表；支援佇列研究和生存分析 |
+|  4   | 醫學考題智慧生成與錯題解析系統     | 輸入教材章節和知識點，LLM 生成練習題和解析；自動收錄錯題並生成薄弱點分析              |
+|  5   | 藥物研發全流程知識圖譜智慧問答專家 | 構建藥物-靶點-疾病知識圖譜，LLM 解答研發相關問題；支援文獻檢索和實驗方案推薦          |
+|  6   | 藥品說明書智慧問答助手             | 上傳藥品說明書圖片或輸入藥名，LLM 解答用法用量、不良反應、注意事項等問題              |
+|  7   | 疾病知識科普文章生成助手           | 輸入疾病名稱和受眾，LLM 生成通俗易懂的科普文章；支援多版本（患者版/家屬版）           |
+|  8   | 醫學影像報告自動生成工具           | 影像科醫生描述影像特徵，LLM 自動生成結構化報告；支援常見檢查型別模板                  |
+|  9   | 手術記錄智慧生成與歸檔助手         | 手術過程中語音錄入關鍵步驟，LLM 結構化生成手術記錄；自動關聯手術編碼                  |
+|  10  | 慢病管理用藥提醒智慧助手           | 患者輸入用藥清單，LLM 生成個性化用藥提醒；支援用藥禁忌檢查和互動問答                  |
+
+## 6. 網路安全
+
+網路安全場景聚焦於安全防護和風險管控。核心應用涵蓋漏洞檢測、威脅情報分析、釣魚郵件識別、安全事件響應等，為企業構建全方位的智慧安全防護體系。
+
+| 序號 | 應用場景名稱                        | 實現參考                                                                               |
+| :--: | ----------------------------------- | -------------------------------------------------------------------------------------- |
+|  1   | 程式碼安全漏洞檢測與修復引擎          | 靜態程式碼分析工具（SAST）掃描程式碼，LLM 分析漏洞原理並生成修復建議；整合 CI/CD 流水線    |
+|  2   | AI 生成式釣魚郵件智慧識別與攔截系統 | LLM 分析郵件內容、傳送者特徵和連結安全性，識別 AI 生成的釣魚郵件；對接郵件閘道器實時攔截 |
+|  3   | 安全運營日報自動生成助手            | 安全裝置日誌彙總，LLM 自動提取關鍵事件並生成日報；異常事件highlight標記                |
+|  4   | 安全知識庫智慧問答助手              | 基於安全文件、CVE 庫構建向量知識庫，LLM 解答安全技術和處置建議問題                     |
+|  5   | 滲透測試報告智慧生成助手            | 滲透測試完成後，LLM 根據漏洞描述自動生成報告；漏洞修復建議批次生成                     |
+|  6   | 惡意程式碼防護與隱私合規監控          | 沙箱分析可疑檔案行為，LLM 識別惡意特徵並生成簽名；隱私資料識別掃描                     |
+|  7   | 安全配置合規性檢查清單生成工具      | 輸入目標系統型別，LLM 生成安全配置檢查清單；支援等保 2.0、CIS 等標準                   |
+|  8   | 威脅情報智慧查詢與分析助手          | 對接多源威脅情報（開源、商業），LLM 解讀情報並關聯企業資產；推薦防護策略               |
+|  9   | 安全事件覆盤報告生成助手            | 安全事件發生後，LLM 根據時間線自動生成覆盤報告；根因分析和改進建議                     |
+|  10  | 全球威脅情報監測與預警中心          | 爬蟲採集全球安全資訊和漏洞披露，LLM 提取關鍵資訊並評估影響；郵件/簡訊預警通知          |
+
+## 7. 金融管理、保險銀行業
+
+金融領域場景圍繞風險控制和業務智慧化展開。典型應用包括信貸風控評估、財富管理顧問、財務報告生成、反洗錢監測等，提升金融機構的運營效率和風險管控能力。
+
+| 序號 | 應用場景名稱                           | 實現參考                                                                             |
+| :--: | -------------------------------------- | ------------------------------------------------------------------------------------ |
+|  1   | 信貸盡調報告智慧生成助手               | 輸入企業基本資訊和財務資料，LLM 自動生成信貸盡調報告；風險點自動標註                 |
+|  2   | 私人銀行財富管理智慧顧問               | LLM 分析客戶風險偏好和財務目標，生成資產配置建議；對接理財產品和基金庫               |
+|  3   | IPO 招股書智慧生成與合規校驗助手       | 招股說明書模組化模板，LLM 自動填充業務描述和風險因素；合規校驗規則引擎檢查前後一致性 |
+|  4   | 企業財務報告自動生成與經營異常預警系統 | 財務系統資料自動採集，LLM 生成財務分析和管理層討論部分；異常指標預警規則             |
+|  5   | 財務票據資訊提取與問答助手             | 上傳發票圖片，OCR 識別資訊，LLM 解答票據相關問題；支援增值稅發票、火車票等           |
+|  6   | 合規案例智慧檢索與問答助手             | 基於監管處罰案例構建知識庫，LLM 解答合規問題並提供案例參考                           |
+|  7   | 保險代理人智慧話術陪練                 | LLM 扮演不同型別客戶進行模擬對話，評估代理人話術合規性和說服力；錄音轉寫分析         |
+|  8   | 保險產品條款分析與競品對比平臺         | 條款結構化解析，LLM 生成亮點摘要和注意事項                                           |
+|  9   | 客戶話術情緒識別服務                   | 語音情緒識別結合話術合規檢測，實時反饋代理人改進建議                                 |
+|  10  | 保險理賠進度智慧查詢與對話助手         | 使用者輸入保單號或報案號，LLM 查詢理賠進度並解答理賠相關問題                           |
+
+## 8. 企業服務
+
+企業服務場景致力於提升組織運營效率和管理水平。常見應用包括客戶關係管理、銷售預測、輿情監測、HR 智慧管理等，幫助企業實現數字化轉型升級。
+
+| 序號 | 應用場景名稱                       | 實現參考                                                                       |
+| :--: | ---------------------------------- | ------------------------------------------------------------------------------ |
+|  1   | 客戶留存分析與流失預警平臺         | 行為資料埋點採集使用者操作，ML 模型預測流失機率，LLM 生成挽留建議                |
+|  2   | B2B 潛在客戶觸達與營銷郵件平臺     | 企業工商資料篩選目標客戶，LLM 生成個性化營銷內容；郵件群發平臺對接             |
+|  3   | 銷售管線監測與業績預測平臺         | CRM 資料自動採集，LLM 分析銷售漏斗並預測業績達成；異常預警推送管理者           |
+|  4   | 品牌輿情監測與危機預警雷達         | 全網輿情資料採集（社交媒體、新聞、論壇），LLM 分析情感和傳播趨勢；危機預警推送 |
+|  5   | 職場郵件智慧撰寫與溝通情緒管理助手 | 郵件上下文理解，LLM 生成專業郵件草稿；情緒分析反饋改進建議                     |
+|  6   | 簡歷智慧解析與崗位匹配系統         | 簡歷 PDF 解析提取關鍵資訊，LLM 匹配合適崗位並生成面試建議；ATS 系統對接        |
+|  7   | 企業員工入職指引與問答助手         | 入職文件知識庫 RAG 檢索，LLM 解答新員工常見問題                                |
+|  8   | 員工績效反饋與 OKR 目標管理平臺    | OKR 系統資料採集，LLM 分析目標完成情況並生成反饋建議；360 反饋收集             |
+|  9   | 智慧會議記錄與待辦管理             | 會議錄音轉寫，LLM 提取關鍵討論點和待辦事項；任務系統自動建立待辦               |
+|  10  | 發票識別與費用報銷自動處理         | OCR 識別發票資訊，自動校驗發票真偽和報銷合規性；對接財務系統                   |
+
+## 9. 內容生產與運營
+
+內容生產與運營場景聚焦於創意生成和流量運營。核心應用包括文案創作、短影片製作、數字人直播、SEO 最佳化等，幫助企業提升內容產出效率和營銷轉化率。
+
+| 序號 | 應用場景名稱                              | 實現參考                                                                   |
+| :--: | ----------------------------------------- | -------------------------------------------------------------------------- |
+|  1   | 影視與小說內容創作輔助平臺                | LLM 提供故事大綱、角色設定、對白生成等創作輔助；思維導圖視覺化故事結構     |
+|  2   | 企業品牌故事與公關軟文智慧撰寫助手        | 輸入品牌關鍵詞和產品資訊，LLM 生成多風格文案版本；A/B 測試介面對接         |
+|  3   | 虛擬數字人直播互動與推流管理系統          | 數字人形象建模 + TTS 語音 + LLM 對話，實時響應觀眾彈幕；OBS 推流整合       |
+|  4   | 短影片指令碼生成與智慧剪輯                  | LLM 生成短影片指令碼和分鏡，Sora/Runway 生成影片片段；剪輯工具自動拼接       |
+|  5   | 銷售會話語音轉寫與話術推薦                | 電話錄音 ASR 轉寫，LLM 分析會話並推薦金牌話術；CRM 系統整合                |
+|  6   | 營銷內容智慧生成與設計系統                | 產品資訊輸入，LLM 生成營銷文案和賣點提煉；整合 Canava/稿定設計模板         |
+|  7   | 多平臺廣告投放 ROI 實時監控與策略調優系統 | 廣告平臺 API 對接採集資料，LLM 分析投放效果並生成最佳化建議；異常預警推送    |
+|  8   | 搜尋引擎關鍵詞與流量分析                  | 百度指數、5118 資料採集，LLM 分析關鍵詞趨勢和競爭度；內容選題推薦          |
+|  9   | 競品廣告投放分析平臺                      | 第三方資料平臺 API 採集競品廣告，LLM 分析投放策略和創意特點                |
+|  10  | 全網熱點選題智慧分析與內容推薦系統        | 微博熱搜、抖音熱榜資料採集，LLM 分析熱點趨勢並推薦選題角度；日曆化內容排期 |
+
+## 10. 智慧政務管理
+
+智慧政務場景致力於提升政府服務效能和治理能力。典型應用包括政務熱線智慧導航、政策智慧問答、行政審批最佳化、城市事件管理等，推動數字政府建設。
+
+| 序號 | 應用場景名稱                               | 實現參考                                                             |
+| :--: | ------------------------------------------ | -------------------------------------------------------------------- |
+|  1   | 12345 政務熱線智慧語音導航與自動分派系統   | 市民來電語音識別，LLM 理解訴求並智慧分派到對應部門；工單系統自動流轉 |
+|  2   | 政務服務大廳智慧導辦與政策問答機器人       | 政務知識庫 RAG 檢索，LLM 解答辦事流程和政策問題；取號系統對接        |
+|  3   | 惠企政策智慧匹配與精準推送平臺             | 政策結構化解析，企業畫像自動匹配適用政策；簡訊/郵件推送提醒          |
+|  4   | 行政審批材料智慧預審與合規校驗助手         | 材料 OCR 識別和關鍵資訊提取，LLM 校驗材料完整性和合規性              |
+|  5   | 公共安全影片監控異常行為檢測系統           | 影片流實時分析，CV 模型檢測異常行為（打架、跌倒等）；告警推送        |
+|  6   | 城市網格化事件智慧識別與排程管理平臺       | 城市感知資料（IoT、攝像頭）採集，LLM 識別事件型別並分派              |
+|  7   | 社情民意大資料分析與風險預警系統           | 政務熱線、網路輿情、社情走訪等多源資料融合分析；LLM 識別風險熱點     |
+|  8   | 政務檔案數字化識別與智慧歸檔管理平臺       | OCR 識別檔案文字內容，LLM 提取關鍵資訊並自動分類；全文檢索支援       |
+|  9   | 突發公共事件應急指揮與救援資源智慧排程平臺 | 事件資訊採集，LLM 生成應急響應方案；資源排程最佳化演算法                 |
+|  10  | 大氣環境汙染網格化監測與精準溯源系統       | 空氣質量感測器資料採集，CV 模型識別汙染源；LLM 分析汙染趨勢並溯源    |
+
+## 11. 法律事務與合同管理
+
+法律事務場景聚焦於法律服務效率提升和合規管理。常見應用包括合同審查、案件分析、法規監測、法律文書生成等，為法律從業者提供智慧化工具支援。
+
+| 序號 | 應用場景名稱                                             | 實現參考                                                         |
+| :--: | -------------------------------------------------------- | ---------------------------------------------------------------- |
+|  1   | 合同風險漏洞一鍵"找茬"Agent                              | 合同文字結構化解析，LLM 對照風險清單識別潛在問題；標註高風險條款 |
+|  2   | 企業合同全生命週期合規性審查與修改建議平臺               | 合同條款比對法規庫，LLM 生成合規性審查報告；修改建議跟蹤         |
+|  3   | 類似案件勝訴率 AI 智慧評估顧問                           | 案件特徵提取，類案檢索匹配；LLM 分析影響勝訴因素                 |
+|  4   | 法律法規變更實時監測與業務影響分析雷達                   | 法律法規資料庫實時更新，LLM 解析變更內容並評估業務影響；預警推送 |
+|  5   | 律師函 AIGC 自動起草工具                                 | 事實陳述輸入，LLM 生成規範律師函模板；要素檢查和合規校驗         |
+|  6   | 庭審錄音實時轉寫與爭議焦點自動化提取記錄儀               | 法庭錄音 ASR 轉寫，LLM 提取爭議焦點和關鍵論點；時間戳標註        |
+|  7   | 全網智慧財產權侵權線索自動監測與區塊鏈取證系統             | 電商平臺、社交媒體侵權監測；侵權證據自動採集存證                 |
+|  8   | 基於 LLM 的 IPO 招股書關鍵資料一致性核查與風險預警 Agent | 招股書多章節資料比對，LLM 識別不一致和資料異常；風險標註         |
+|  9   | 複雜法律條款"翻譯"為大白話的解釋外掛                     | 選中法律條文，LLM 生成通俗易懂的解釋                             |
+|  10  | 案件證據鏈智慧梳理與視覺化展示系統                       | 證據材料上傳，LLM 分析證據關係和時間線                           |
+
+## 12. 旅遊與出行服務
+
+旅遊出行場景致力於提升旅行體驗和服務便捷性。核心應用包括智慧行程規劃、價格預測、虛擬導覽、翻譯服務等，讓旅行更加輕鬆愉快。
+
+| 序號 | 應用場景名稱                                 | 實現參考                                                                            |
+| :--: | -------------------------------------------- | ----------------------------------------------------------------------------------- |
+|  1   | 基於 AIGC 的懶人路書生成器                   | 使用者偏好輸入（天數、預算、興趣），LLM 生成每日行程安排；景點 API 獲取開放時間和門票 |
+|  2   | 全網機票酒店價格趨勢預測與低價自動鎖定機器人 | 採集 OTA 價格資料，ML 模型預測價格趨勢；價格監控提醒                                |
+|  3   | 航班取消後的跨航司行程重組與應急方案推薦顧問 | 航班狀態監控，LLM 分析替代行程方案；多航司比價                                      |
+|  4   | 簽證材料智慧預審與自動化填表輔助系統         | 材料拍照上傳，OCR 識別資訊完整性檢查；表格自動填充                                  |
+|  5   | 出境遊實時語音翻譯與選單視覺漢化管家         | 離線語音翻譯模型，選單圖片 OCR 識別並翻譯                                           |
+|  6   | 基於大資料真實評價的酒店"避雷"指南分析儀     | 酒店評論資料採集，LLM 提取正負面評價關鍵詞                                          |
+|  7   | 目的地沉浸式 VR 預覽與虛擬選房互動平臺       | 360°全景圖採集，VR 技術實現沉浸式預覽；房間虛擬遊覽                                 |
+|  8   | 旅行足跡自動生成精美遊記與社交文案助手       | 照片時間地點資訊提取，LLM 生成遊記文案；模板排版生成                                |
+|  9   | 企業差旅發票自動歸集與合規報銷管理平臺       | 差旅平臺 API 對接，發票資訊自動採集；合規校驗                                       |
+|  10  | 景區客流擁堵實時預測與錯峰遊覽路線規劃導航   | 景區客流資料採集，ML 模型預測擁堵時段；錯峰推薦                                     |
+
+## 13. 情感陪伴
+
+情感陪伴場景聚焦於心理健康和情感慰藉。典型應用包括虛擬伴侶、情感諮詢、認知訓練、心理疏導等，為使用者提供全天候的陪伴和支援。
+
+| 序號 | 應用場景名稱                                 | 實現參考                                                    |
+| :--: | -------------------------------------------- | ----------------------------------------------------------- |
+|  1   | 基於 LLM 大模型的 24 小時深度陪伴虛擬伴侶    | 記憶系統儲存對話歷史，LLM 生成個性化回覆；情感支援模組      |
+|  2   | 多模態情感識別與心理疏導 AI 顧問             | 語音語調分析 + 文字情感識別，LLM 生成疏導建議；危機干預預警 |
+|  3   | 阿爾茨海默症老人 AI 認知訓練與記憶喚醒數字人 | 認知遊戲（記憶、計算、語言）訓練；老照片/老歌觸發記憶回憶   |
+|  4   | 社恐人士的 AIGC 模擬社交演練教練             | 虛擬社交場景模擬，LLM 扮演不同角色；社交技巧建議            |
+|  5   | 生成式 AI 兒童睡前故事定製機                 | 家長輸入主題和偏好，LLM 生成定製故事；背景音樂生成          |
+|  6   | 逝者數字生命復原與 LLM 跨時空對話系統        | 生前資料（語音、文字）訓練個性化模型；記憶對話生成          |
+|  7   | 基於 MBTI 資料的 AI 性格映象與共情聊天機器人 | MBTI 測試結果輸入，LLM 生成性格分析和共情回覆；性格匹配推薦 |
+|  8   | 全天候心情監測與 AI 正向情緒激勵助手         | 日常記錄心情狀態，LLM 分析趨勢並生成激勵內容；正向提醒推送  |
+|  9   | 隱私保護級青少年 AI 傾訴樹洞                 | 匿名傾訴入口，LLM 提供傾聽和建議；敏感詞預警                |
+|  10  | 具備自主進化能力的 AI 虛擬寵物養成系統       | 寵物性格模型訓練，對話互動成長進化；虛擬裝扮系統            |
+
+## 14. 休閒娛樂
+
+休閒娛樂場景致力於提供豐富的數字化娛樂體驗。常見應用包括遊戲 NPC 智慧決策、劇本殺輔助、內容創作、音影片處理等，滿足使用者的多元化娛樂需求。
+
+| 序號 | 應用場景名稱                                 | 實現參考                                                  |
+| :--: | -------------------------------------------- | --------------------------------------------------------- |
+|  1   | 基於 LLM 驅動的開放世界遊戲 NPC 自主決策引擎 | NPC 行為樹融合 LLM 決策，對話系統生成個性化互動；行為引擎 |
+|  2   | 沉浸式劇本殺 AIGC 劇情推演與 DM 控場輔助工具 | 玩家選擇觸發劇情分支，LLM 生成推理邏輯；線索卡自動生成    |
+|  3   | 互動小說結局生成式修改器                     | 讀者選擇影響劇情走向，LLM 生成多種結局分支                |
+|  4   | 二次元角色 3D 建模 AIGC 自動生成工作臺       | 描述文字生成角色草圖，3D 建模工具自動建模；材質貼圖渲染   |
+|  5   | 電競戰局 CV 視覺分析與 AI 智慧解說員         | 遊戲畫面實時分析，關鍵時刻識別；LLM 生成解說文案          |
+|  6   | 個性化幽默內容推薦演算法引擎                   | 使用者興趣畫像，幽默內容匹配推薦                            |
+|  7   | AI 智慧修音與 KTV 人聲美化軟體               | 音訊降噪和人聲增強處理；AI 修音演算法                       |
+|  8   | 影視劇角色專屬劇情 AI 提取與剪輯工具         | 影片內容分析，角色相關片段提取；自動剪輯生成              |
+|  9   | 多角色 TTS 語音合成有聲書自動生成系統        | 文字角色分配，個性化音色生成；背景音樂和音效新增          |
+|  10  | 棋牌類遊戲強化學習對弈覆盤教練               | 棋局分析，AI 對手模擬對弈；覆盤建議生成                   |
+
+## 15. 電商服務
+
+電商服務場景聚焦於運營效率和轉化提升。核心應用包括商品內容生成、直播帶貨、客戶服務、價格分析等，幫助商家實現智慧化運營。
+
+| 序號 | 應用場景名稱                                  | 實現參考                                                   |
+| :--: | --------------------------------------------- | ---------------------------------------------------------- |
+|  1   | 高轉化率 AIGC 商品詳情頁批次生產工具          | 商品資訊輸入，LLM 生成賣點文案和場景描述；背景圖生成       |
+|  2   | 服裝虛擬模特 AI 智慧試穿與展示影片生成工廠    | 服裝平鋪圖處理，虛擬模特試穿效果生成；多角度展示影片       |
+|  3   | 跨境電商多語言 LLM 本地化翻譯與潤色助手       | 商品描述多語言翻譯，文化適配潤色；多平臺釋出介面           |
+|  4   | 基於 NLP 的客戶情感分析與智慧回覆機器人       | 諮詢對話情感分析，自動生成安撫回覆；好評差評分類           |
+|  5   | 24 小時全天候 AIGC 數字人直播帶貨系統         | 數字人形象 + 實時話術生成，商品資訊實時呼叫；彈幕互動回覆  |
+|  6   | 全網同款商品 AI 比價與趨勢預測外掛            | 電商平臺價格爬取，比價圖表展示；價格趨勢預測               |
+|  7   | 買家秀圖片 AI 智慧篩選與短影片合成平臺        | 買家秀圖片質量評分，優質內容自動推薦；短影片模板合成       |
+|  8   | 基於 LLM 的實時銷售對話語音分析與金牌話術推薦 | 通話 ASR 轉寫，實時話術合規檢測；話術推薦                  |
+|  9   | 市場流行趨勢 AI 洞察與爆款預測引擎            | 社交媒體和電商資料採集分析，LLM 洞察趨勢熱點；選品建議推薦 |
+|  10  | 私域流量使用者畫像 AI 聚類與精細化運營系統      | 使用者行為資料聚類分析，畫像標籤生成；自動化營銷觸發         |
+
+## 16. 能源
+
+能源場景致力於實現能源行業的智慧化管理和綠色轉型。典型應用包括用電分析、裝置檢測、碳排放核算、排程最佳化等，推動能源系統的高效執行。
+
+| 序號 | 應用場景名稱                                     | 實現參考                                               |
+| :--: | ------------------------------------------------ | ------------------------------------------------------ |
+|  1   | 家庭用電行為 AI 分析與節能策略顧問               | 智慧電錶資料採集，用電模式分析；LLM 生成節能建議       |
+|  2   | 光伏元件缺陷無人機 CV 視覺識別系統               | 無人機巡檢拍攝，熱紅外影象分析；缺陷檢測標註           |
+|  3   | 電力現貨交易價格 AI 趨勢預測與自動獲利策略 Agent | 電力市場資料採集，價格預測模型；策略生成和交易執行     |
+|  4   | 儲能電池健康度 AI 無損檢測與熱失控風險預警系統   | 電池執行資料監測，健康度評估模型；風險預警推送         |
+|  5   | 企業全鏈路碳排放 AI 自動核算與 ESG 報告生成助手  | 能源消耗資料採集，碳排放因子計算；ESG 報告自動生成     |
+|  6   | 電網極端天氣負荷 AI 預測與應急排程指揮系統       | 氣象資料對接，負荷預測模型；排程策略生成               |
+|  7   | 加油站違規行為 AI 影片識別與報警衛士             | 影片監控分析，違規行為檢測（打電話、抽菸等）；告警推送 |
+|  8   | 長輸油氣管道洩漏聲波 AI 監測與精準定位系統       | 聲波感測器資料採集，洩漏檢測模型；定位演算法計算         |
+|  9   | 虛擬電廠資源聚合與 AI 電力交易決策系統           | 分散式資源接入，聚合最佳化排程；交易策略執行             |
+|  10  | 礦井人員位置 AI 追蹤與危險區域入侵報警           | UWB/藍芽定位，人員軌跡追蹤；危險區域電子圍欄           |
+
+## 17. 音影片
+
+音影片場景聚焦於內容生產和媒體處理。常見應用包括影片剪輯、語音合成、字幕生成、影片修復等，提升音影片內容的生產效率和質量。
+
+| 序號 | 應用場景名稱                                 | 實現參考                                           |
+| :--: | -------------------------------------------- | -------------------------------------------------- |
+|  1   | 長影片精彩片段 AI 識別與短影片自動剪輯工具   | 影片內容分析，關鍵幀識別；精彩片段自動剪輯         |
+|  2   | 影片背景噪音 AI 智慧分離與人聲增強助手       | 音訊分離模型，去除背景噪音；人聲增強處理           |
+|  3   | 老舊影像 4K 超分修復與 AI 智慧上色工作臺     | 影片超解析度模型，修復老舊畫質；AI 自動上色        |
+|  4   | 文字轉真人級 TTS 配音與情感控制系統          | 多音色 TTS 模型，情感控制生成；音訊匯出            |
+|  5   | 影片語音 ASR 自動識別與雙語字幕生成工具      | 語音識別生成字幕，多語言翻譯；雙語字幕疊加         |
+|  6   | 影片畫面多餘物體 AI 智慧擦除引擎             | 影片目標追蹤，物體移除修復；幀間一致性處理         |
+|  7   | 無版權背景音樂 AIGC 自動作曲機               | 音樂生成模型，情緒風格可控；版權檢測               |
+|  8   | 特定人物音色 AI 克隆與變聲轉換軟體           | 少量語音樣本訓練音色模型；變聲處理                 |
+|  9   | 劇本一鍵轉分鏡指令碼與 AI 動態預演影片生成平臺 | 劇本解析生成分鏡，AI 生成預演影片                  |
+|  10  | 會議錄音 AI 智慧轉寫與核心待辦提取助手       | 多人會議語音分離轉寫，LLM 提取待辦事項；時間戳標註 |
+
+## 18. AI 營銷
+
+AI 營銷場景致力於提升營銷效率和創意產出。核心應用包括文案生成、海報設計、熱點追蹤、競品分析等，幫助企業實現精準營銷和品牌傳播。
+
+| 序號 | 應用場景名稱                               | 實現參考                                         |
+| :--: | ------------------------------------------ | ------------------------------------------------ |
+|  1   | 小紅書爆款文案 AIGC 自動撰寫引擎           | 話題輸入，LLM 生成種草文案；emoji 和話題標籤最佳化 |
+|  2   | 營銷海報 AI 智慧排版與多尺寸適配工具       | 文案輸入，海報模板智慧匹配與多尺寸匯出           |
+|  3   | 品牌 LOGO 創意 AIGC 生成與 VI 體系構建平臺 | 品牌關鍵詞輸入，LOGO 創意生成；VI 規範生成       |
+|  4   | 全網熱點 AI 追蹤與借勢營銷創意生成助手     | 熱點資料採集，LLM 分析營銷角度；創意方案生成     |
+|  5   | 廣告投放 ROI 實時監控與 AI 預算競價管家    | 廣告平臺資料對接，效果分析模型；競價策略最佳化     |
+|  6   | 競品營銷策略深度解析與 AI 週報生成器       | 競品內容採集分析，策略提取；週報自動生成         |
+|  7   | 搜尋引擎關鍵詞 AI 佈局與引流文章批次寫作   | 關鍵詞分析，文章批次生成；SEO 最佳化建議           |
+|  8   | 千人千面個性化營銷郵件 AI 撰寫專家         | 使用者畫像資料，個性化內容生成；A/B 測試           |
+|  9   | 品牌聲譽全網監測與輿情危機 AI 預警雷達     | 全網輿情資料採集，情感分析；危機預警推送         |
+|  10  | 短影片指令碼創意 AIGC 生成與分鏡指導助手     | 主題輸入，指令碼和分鏡生成；拍攝建議指導           |
+
+## 19. 資料智慧
+
+資料智慧場景聚焦於資料分析和價值挖掘。典型應用包括自然語言查詢、視覺化生成、資料治理、知識圖譜構建等，幫助企業實現資料驅動的決策支援。
+
+| 序號 | 應用場景名稱                           | 實現參考                                                     |
+| :--: | -------------------------------------- | ------------------------------------------------------------ |
+|  1   | 基於 Text-to-SQL 的自然語言查數引擎    | 自然語言轉換為 SQL 查詢，結果視覺化展示                      |
+|  2   | 對話式 BI：一句話生成視覺化圖表        | 資料需求描述，圖表自動生成；支援多圖表型別切換               |
+|  3   | 截圖一鍵轉 Excel 表格識別工具          | 截圖上傳後，VLM 識別表格結構和資料；匯出為 Excel 檔案        |
+|  4   | 圖片及截圖轉 Excel 表格 AI 識別神器    | 圖片 OCR 識別表格結構，資料匯出為 Excel                      |
+|  5   | 多源異構資料知識圖譜自動化構建         | 多資料來源接入，實體和關係抽取；圖資料庫儲存                   |
+|  6   | 資料包表智慧解讀與趨勢分析助手         | 上傳資料包表圖片或輸入資料，VLM 解讀圖表內容並分析趨勢       |
+|  7   | 資料庫表結構智慧解讀與查詢示例生成助手 | 輸入表名或欄位描述，LLM 生成建表說明和示例查詢 SQL           |
+|  8   | 企業主資料智慧對齊與 AI 去重治理       | 多源主資料匹配，重複記錄識別；合併規則配置                   |
+|  9   | 資料需求文件智慧轉測試用例工具         | 輸入資料需求描述，LLM 生成測試場景和驗證用例                 |
+|  10  | 資料指標口徑智慧問答助手               | 基於指標定義文件構建知識庫，LLM 解答指標口徑、計算邏輯等問題 |
diff --git a/docs/zh-tw/stage-1/appendix-jobs-to-be-done/index.md b/docs/zh-tw/stage-1/appendix-jobs-to-be-done/index.md
new file mode 100644
index 0000000..d93f310
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-jobs-to-be-done/index.md
@@ -0,0 +1,496 @@
+---
+title: '用 Jobs to Be Done 找到使用者真正想完成的事'
+description: '面向零基礎讀者的 Jobs to Be Done 入門文章。理解使用者不是在買功能，而是在特定場景裡“僱用”你的產品完成進展，並學會用 JTBD 拆解產品方向、訪談問題與 AI 提示詞。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 小時</strong>'
+</script>
+
+# 用 Jobs to Be Done 找到使用者真正想完成的事
+
+<a id="top-jtbd"></a>
+
+## 本章導讀
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['JTBD', '使用者需求', '產品思維', '需求洞察']"
+  coreOutput="1 條更像真實需求的 JTBD 句子"
+  expectedOutput="能把模糊點子收成一個更具體的使用者場景和 MVP 方向"
+>
+
+很多人剛開始做產品時，最容易犯的一個錯誤是把注意力全部放在“我要做什麼功能”上。看別人有智慧分類，你也想加；看別人有自動總結，你也想接；看別人做了 Agent、多模態、工作流，你也覺得自己不能少。
+
+但現實裡，使用者很少是因為“這個功能名字很酷”才決定用一個產品。他們更多是在某個具體時刻，想把一件事情推進下去，於是臨時“僱用”了一個工具、一個服務，甚至一個人，來幫自己完成這一步。
+
+這正是 **Jobs to Be Done（JTBD）** 這套方法想提醒我們的事情：**使用者不是在購買功能本身，而是在僱用某種解決方案，幫助自己完成一個進展。**
+
+本篇文章會用盡量直白的語言，帶你從零理解 JTBD，並把它變成你做 AI 應用時能直接拿來用的分析工具。
+
+</ChapterIntroduction>
+
+::: info 最小 SOP
+**目的**：看完後，你會更清楚怎樣把一個模糊點子，收成一句真正有使用者場景的需求，而不是腦子裡只有一堆功能名。
+
+**行動項**：寫 1 句模糊點子，找 3 個潛在使用者聊“最近一次怎麼處理”，再整理成 1 條 JTBD 句子。
+
+**結果**：你會得到一個更清楚的需求假設，知道第一版該先解決什麼。
+
+**關鍵詞跳轉**：[JTBD 是什麼](#jtbd-what) · [一句話公式](#jtbd-formula) · [AI 怎麼幫你](#jtbd-ai)
+:::
+
+## 你將學到以下內容
+
+1. 什麼是 Jobs to Be Done，為什麼它比“功能腦暴”更接近真實需求
+2. 如何區分“使用者說想要的功能”和“使用者真正想完成的事”
+3. 怎樣用一套簡單模板，把一個模糊點子拆成場景、觸發、障礙和成功標準
+4. 如何把 JTBD 用在 AI 產品、訪談提問和提示詞整理裡
+
+<a id="jtbd-what"></a>
+## [1. 什麼是 Jobs to Be Done](#top-jtbd)
+
+Jobs to Be Done 常被簡稱為 **JTBD**。它背後的核心想法，和 Clayton Christensen 團隊推廣的那句經典表達有關：**使用者會“僱用”某個產品來完成一件事。**
+
+這裡的“事”，不是待辦清單裡那種表面動作，而是使用者希望自己狀態發生的一種 **進展** 。比如：
+
+- 不是“我要一個 AI 紀要工具”，而是“我想在會後 10 分鐘內把重點、待辦和責任人整理清楚，別再靠回憶補筆記”
+- 不是“我要一個記賬 App”，而是“我想知道錢到底花去哪了，好讓我月底別再焦慮”
+- 不是“我要一個簡歷最佳化器”，而是“我想更有把握地投出一份像樣的簡歷，不想每次投遞都懷疑自己寫得太差”
+
+所以，**JTBD 關注的不是產品長什麼樣，而是使用者為什麼在這個時刻需要它。**
+
+這也是為什麼很多看似不同的產品，實際上在競爭同一個 job。使用者想“在上班路上不那麼無聊”，可僱用的物件可能是短影片、播客、遊戲、聊天，甚至打瞌睡。使用者想“快速搞懂一份很長的 PDF”，可僱用的物件可能是 AI 摘要工具、實習生、同事、自己硬著頭皮看，或者乾脆先不看。
+
+一旦你用這種視角看問題，你會發現自己真正的競爭對手，往往並不只是“另一個長得像你的 App”，而是 **使用者當前所有可接受的替代方案** 。
+
+## 2. JTBD 和使用者畫像、功能列表有什麼不同
+
+很多新手剛開始做需求分析時，會先寫使用者畫像：25 歲，女生，一線城市，白領，喜歡效率工具，願意嘗試新產品。這樣的資訊不能說完全沒用，但它通常 **不夠解釋一個人為什麼會在此刻採取行動。**
+
+JTBD 更關心的是下面這些問題：
+
+- 他是在什麼場景下決定找解決方案的
+- 當時到底卡住了什麼
+- 他想把什麼事情推進到下一步
+- 現在正在用什麼笨辦法撐著
+- 如果事情解決得好，什麼結果會讓他覺得“值了”
+
+也就是說，**使用者畫像更像“這個人大概是誰”，JTBD 更像“這個人現在到底想完成什麼”。**
+
+同樣地，功能列表也容易把人帶偏。使用者說“我想要匯出 Word”“我想要 AI 改寫”“我想要語音輸入”，這些都只是表層表達。JTBD 會繼續往下追問：
+
+- 為什麼你現在需要匯出 Word，而不是 PDF？
+- 你想改寫，是因為文風太差，還是因為需要適配不同物件？
+- 你想語音輸入，是因為懶得打字，還是因為你經常在走路、開車、開會後馬上記錄？
+
+很多時候，**功能只是 job 的一種臨時翻譯** 。如果你只收集功能，很容易把產品做成“使用者說什麼就堆什麼”；如果你能看見背後的 job，才更有機會做出真正順手、真正有競爭力的方案。
+
+## 3. 一個零基礎也能理解的例子
+
+先不要急著想複雜的 AI 產品，我們從一個生活例子開始。
+
+假設有人早上出門前總來不及喫早餐，於是經常在地鐵口買一個三明治和咖啡。表面上看，他“購買”的是早餐；但如果用 JTBD 看，他真正想完成的事可能是：
+
+- 在趕時間的早晨，用最省腦力的方式解決一頓飯
+- 讓自己在到公司前不至於餓得發慌
+- 不因為喫早餐耽誤通勤節奏
+
+這時候，使用者僱用的不是“某個固定品牌的三明治”，而是一個能幫他把早晨順利推進下去的解決方案。如果隔壁便利店更快、更近、更穩定，他可能立刻換掉原來的選擇。
+
+把這個邏輯搬到 AI 產品裡就更明顯了。
+
+比如你想做一個“AI 會議紀要工具”。如果只停在功能層面，你會很容易開始想：
+
+- 要不要支援上傳音訊
+- 要不要接入說話人分離
+- 要不要匯出 Markdown
+- 要不要自動生成待辦
+
+這些都沒錯，但還不夠。用 JTBD 再問一層，使用者真正想完成的可能是：
+
+- 我想在會後 10 分鐘內，把討論結果同步給沒參會的人
+- 我想把待辦、責任人和截止時間提幹淨，別讓團隊靠記憶協作
+- 我想減少重複整理會議內容的時間，把精力留給決策和推進
+
+一旦 job 被說清楚，很多功能優先順序就會自動浮出來。第一版最重要的也許不是“支援 12 種匯出格式”，而是：
+
+- 紀要結構要足夠清楚
+- 待辦提取要穩定
+- 分享連結要方便
+- 輸出結果要讓人敢直接轉發給團隊
+
+這就是 JTBD 的價值：**它能幫助你從“我要堆哪些能力”回到“我要幫使用者推進什麼進展”。**
+
+## 4. 一個好用的 JTBD 模板
+
+如果你是零基礎，可以先不要試圖把 JTBD 想得很學術。先抓住最實用的 5 個要素就夠了。
+
+### 4.1 場景
+
+使用者是在什麼時刻、什麼環境裡想起這個產品的？
+
+- 是開完會以後
+- 是老闆臨時要材料的時候
+- 是晚上準備投簡歷的時候
+- 是月底發現錢又不夠花的時候
+
+**沒有場景的需求，通常都還不夠真實。**
+
+### 4.2 觸發
+
+是什麼讓他決定立刻找解決方案？
+
+- 被長文件壓住，不知道從哪開始看
+- 明天要交材料，今天才發現格式亂七八糟
+- 剛被領導追問進度，意識到自己沒有整理清楚
+- 想堅持記錄，但手寫、複製、整理都太麻煩
+
+觸發點往往帶著情緒。這個情緒很重要，因為它決定了使用者為什麼會在這一刻產生行動。
+
+### 4.3 想完成的進展
+
+他不只是想“做個動作”，而是想把自己推進到什麼新狀態？
+
+- 從混亂到清楚
+- 從焦慮到安心
+- 從拖延到啟動
+- 從低效到順手
+- 從說不明白到能直接交付
+
+這一步裡，“進展”這個詞非常關鍵。因為很多人真正買的不是工具，而是 **狀態變化** 。
+
+### 4.4 當前替代方案
+
+現在沒有你的產品時，他怎麼做？
+
+- 手工複製貼上
+- 用 Excel 或備忘錄硬撐
+- 找同事幫忙
+- 拖著不做
+- 在幾個工具之間來回切
+
+誰是替代方案，誰就是你的真實競爭環境。
+
+### 4.5 成功標準
+
+事情怎樣纔算真的被解決？
+
+- 10 分鐘內得到可分享的結果
+- 不需要二次大改就能發給別人
+- 不容易漏項、出錯、忘事
+- 第一次用就知道下一步怎麼走
+
+如果你連“使用者怎麼判斷值不值”都說不清，那這個方向大機率還沒有收斂好。
+
+<a id="jtbd-formula"></a>
+## [5. 直接套用的一句話公式](#top-jtbd)
+
+當你想梳理一個產品方向時，可以先套這個非常實用的句式：
+
+> 當 __________ 的時候，我想要 __________，以便於 __________。  
+> 現在我只能透過 __________ 來勉強完成這件事。
+
+比如：
+
+> 當我開完一場資訊量很大的專案會時，我想要快速得到一份帶待辦、責任人和截止時間的紀要，以便於我能馬上同步團隊並推進執行。  
+> 現在我只能靠自己回憶、翻聊天記錄和手工整理來勉強完成這件事。
+
+再比如：
+
+> 當我準備投遞一個新崗位時，我想要快速把已有經歷改寫成更貼合崗位的版本，以便於我能更有把握地投出一份像樣的簡歷。  
+> 現在我只能反覆複製舊簡歷、手改措辭，改到最後越來越不確定。
+
+如果你能把一句話寫到這種清晰程度，後面的頁面設計、提示詞設計、功能優先順序判斷，都會容易很多。
+
+## 6. 做 AI 產品時，特別要看的三層 job
+
+很多 AI 產品在功能演示時看上去很強，但真正上線之後卻留不住人，常見原因是隻解決了表層動作，沒有解決更深的 job。
+
+你可以把一個 job 粗略分成三層來看：
+
+### 6.1 功能層
+
+最表面的任務是什麼？
+
+- 總結文件
+- 改寫文案
+- 提取待辦
+- 生成圖片
+
+這是使用者嘴上最容易說出來的一層。
+
+### 6.2 情緒層
+
+使用者希望減少什麼不舒服，或者獲得什麼感受？
+
+- 不想那麼慌
+- 不想顯得不專業
+- 不想每次都從零開始
+- 想更有掌控感
+
+很多付費意願，實際上和情緒層關係很大。
+
+### 6.3 社會層
+
+使用者希望在別人眼裡變成什麼樣？
+
+- 看起來更靠譜
+- 在團隊裡更有組織能力
+- 在客戶面前更專業
+- 在社交平臺上更會表達
+
+如果你只做功能層，產品很容易被替代；如果你同時理解了情緒層和社會層，你就更容易找到真正有黏性的價值。
+
+## 7. 用 JTBD 反過來篩產品方向
+
+有時候不是你已經有產品，而是你手裡有 3 到 5 個點子，不知道做哪個。這時 JTBD 很適合拿來做篩選。
+
+你可以拿著每個點子，分別問自己 5 個問題：
+
+1. 這個點子對應的場景是不是足夠具體？
+2. 使用者現在是否已經在用某種笨辦法解決？
+3. 這個 job 的痛感是否足夠強，或者足夠高頻？
+4. 如果我做好了，使用者會不會明顯感受到“狀態變好了”？
+5. 第一版能不能只圍繞這個 job 的關鍵一步，做出一個很小但有用的版本？
+
+如果一個方向講到最後還是隻能說“感覺挺有意思”，卻說不清觸發、替代方案和成功標準，那它大機率還只是一個模糊靈感，不是一個成熟方向。
+
+## 8. 可以直接拿去訪談使用者的問題
+
+很多人一做調研就問：“你想要什麼功能？”這種問法很容易得到表面答案。
+
+JTBD 更適合問下面這些問題：
+
+- 最近一次你遇到這個問題是什麼時候？
+- 當時你在做什麼，為什麼會卡住？
+- 你最後是怎麼解決的？
+- 這個過程裡最煩、最慢、最不放心的地方是什麼？
+- 如果有一個工具能幫你，什麼結果會讓你覺得真的有用？
+- 你試過哪些替代方法？為什麼它們不夠好？
+
+這種問法有個好處：它會把對話拉回真實經歷，而不是停留在想象中的偏好。
+
+## 9. 用 AI 幫你做 JTBD 拆解
+
+JTBD 本身不是 AI 發明的，但 AI 很適合幫你整理和提煉 JTBD。
+
+比如你已經收集了 5 到 10 條使用者反饋，就可以把它們丟給模型，讓它按以下結構總結：
+
+```text
+請你扮演產品研究助手。
+我會給你一些使用者原話，請你不要先給功能建議，
+而是先按 Jobs to Be Done 的框架整理：
+
+1. 使用者處在什麼場景
+2. 觸發他採取行動的事件是什麼
+3. 他真正想完成的進展是什麼
+4. 當前替代方案是什麼
+5. 他最在意的成功標準是什麼
+6. 這些反饋裡反覆出現的情緒詞有哪些
+
+最後，請把這些內容整理成 3 個最值得優先驗證的 JTBD 假設。
+```
+
+如果你已經有一個點子，也可以讓 AI 幫你做第一輪收斂：
+
+```text
+我想做一個 [你的產品想法]。
+請不要直接給我功能列表，而是用 Jobs to Be Done 方法幫我分析：
+
+1. 這個產品可能服務哪些具體場景
+2. 每個場景中使用者想完成的核心 job 是什麼
+3. 現有替代方案有哪些
+4. 哪個 job 最適合作為 MVP 的起點，為什麼
+5. 請把最終推薦的 job 寫成一句清晰的 JTBD 句子
+```
+
+這樣做的好處是，你不會一上來就被 AI 帶去“腦暴 50 個功能”，而是先把方向講清楚。
+
+## 10. 新手最常見的 4 個誤區
+
+### 10.1 把 job 寫成功能名
+
+“AI 總結”“智慧分類”“自動生成”都不是 job，它們只是可能的實現方式。
+
+### 10.2 把人羣寫得很寬
+
+“所有職場人”“所有學生”“所有創業者”通常都太泛。越泛，你越難看見真實場景。
+
+### 10.3 只聽使用者說，不看使用者怎麼做
+
+使用者會描述自己想要什麼，但他真正的優先順序，常常藏在他現在如何湊合解決問題裡。
+
+### 10.4 一開始就想做完整平臺
+
+JTBD 的正確開啟方式，通常不是“我來做一個包打天下的大平臺”，而是先盯住一個場景裡最關鍵的一步，把它做到非常順手。
+
+## 11. 小結
+
+Jobs to Be Done 最有價值的地方，不是給你一個新名詞，而是幫你換一個觀察角度：**不要只盯著產品功能，而要盯著使用者想把什麼事情推進到下一步。**
+
+當你開始反覆問自己：
+
+- 使用者是在什麼場景下僱用這個產品的
+- 他到底卡在了哪裡
+- 現在正用什麼辦法硬撐
+- 事情解決後，狀態會發生什麼變化
+
+你會發現，很多原本模糊的點子一下子變清楚了，很多原本很花哨的功能也一下子沒那麼重要了。
+
+做產品，尤其是做 AI 產品，最怕的是一開始就沉迷能力展示。JTBD 能幫你把注意力拉回到真正重要的地方：**使用者為什麼需要你，以及你到底在幫他完成什麼進展。**
+
+<a id="jtbd-ai"></a>
+## [12. 如何利用 AI 幫你實踐 JTBD](#top-jtbd)
+
+JTBD 不是 AI 發明的，但 AI 很適合在這套方法裡當你的研究助手、整理助手和對照助手。關鍵是：**讓 AI 幫你整理和擴充套件，而不是替你臆測使用者。**
+
+你可以這樣用：
+
+### 12.1 讓 AI 幫你把模糊點子改寫成 JTBD 假設
+
+當你腦子裡只有一句模糊描述，比如“我想做一個幫大學生找實習的工具”，可以先讓 AI 幫你把它拆成幾種可能的 job：
+
+```text
+我現在有一個模糊產品點子：[你的點子]
+請不要直接給我功能列表，而是用 Jobs to Be Done 的方式幫我分析：
+1. 可能對應哪些具體場景
+2. 每個場景裡使用者真正想完成的進展是什麼
+3. 當前替代方案可能是什麼
+4. 哪個 job 最適合先做 MVP
+請最後把每個 job 寫成一句清晰的 JTBD 句子。
+```
+
+你甚至可以把輸入寫得很小白：
+
+```text
+我想做一個幫大學生找實習的東西。
+我現在也說不清具體是做什麼，你幫我想想使用者到底想完成什麼事。
+```
+
+AI 可能給出的有用輸出會像這樣：
+
+```text
+可能的 JTBD 方向：
+
+1. 當我第一次準備投實習時，我想快速知道應該先準備哪些材料，
+以便我不要因為資訊混亂一直拖著不投。
+
+2. 當我看到一個實習崗位時，我想快速判斷自己是否值得投，
+以便我不要在不合適的崗位上浪費太多時間。
+
+3. 當我開始投遞時，我想把現有簡歷改成更貼合崗位的版本，
+以便我能更快完成投遞並提高透過率。
+```
+
+這種輸出的價值在於，它會把你原本一句很泛的想法，拆成幾個更接近真實場景的方向。
+
+### 12.2 讓 AI 幫你整理訪談原話
+
+如果你已經做了幾次使用者訪談，可以把訪談記錄交給 AI，讓它幫你提煉反覆出現的場景、觸發點、替代方案和成功標準。
+
+```text
+下面是 5 位使用者的訪談原話。
+請不要先給解決方案，而是按 JTBD 框架整理：
+1. 使用者處在什麼場景
+2. 觸發他採取行動的事件是什麼
+3. 他真正想完成的進展是什麼
+4. 當前替代方案是什麼
+5. 他最在意的成功標準是什麼
+6. 哪些資訊在多位使用者中重複出現
+最後整理成 3 條最值得優先驗證的 JTBD 假設。
+```
+
+一個很簡單的小白輸入也可以這樣寫：
+
+```text
+我問了 3 個人，他們大概是這樣說的：
+
+1. 每次要投實習我都得重新改簡歷，特別煩。
+2. 我其實最怕的是不知道自己寫得對不對。
+3. 我現在會先找學長學姐幫我看，但每次都不好意思總麻煩別人。
+
+你幫我整理一下，他們真正想完成的事情是什麼。
+```
+
+AI 可能輸出：
+
+```text
+整理結果：
+
+- 共同場景：準備投遞實習前，需要處理簡歷
+- 共同困難：不知道如何修改到“夠好”
+- 當前替代方案：找學長學姐幫看，自己反覆修改
+- 可能的 JTBD：
+  當我準備投遞實習時，我想更快判斷簡歷是否已經達到可投遞水平，
+  以便我不要一直卡在“再改一改”而遲遲投不出去。
+```
+
+這種輸出很有用，因為它幫你從零散原話裡提煉出更像“需求”的東西。
+
+### 12.3 讓 AI 幫你做一輪輕量級網路調研
+
+在你還沒開始大規模訪談前，可以先讓 AI 幫你做一些很輕的外部資訊掃描，比如：
+
+- 公開論壇或社羣裡，大家是怎麼抱怨這個問題的
+- 市面上已有產品主要在解決哪一層問題
+- 使用者最常見的替代方案是什麼
+- 常見評價裡，大家最滿意和最不滿意的點是什麼
+
+這種調研不能代替真實使用者訪談，但很適合作為 Discover 階段的熱身，幫你先建立問題地圖。
+
+一個簡單輸入可以是：
+
+```text
+請你幫我查一查：
+“大學生改簡歷、投實習時最常見的痛點是什麼？”
+優先看公開論壇、經驗帖、求職社羣裡大家自己說的話。
+幫我整理成 5 條最常見問題。
+```
+
+AI 可能輸出：
+
+```text
+常見痛點整理：
+
+1. 不知道簡歷該寫什麼，經歷太少
+2. 不知道怎麼針對不同崗位修改
+3. 改了很多版，但始終不確定是否夠好
+4. 找不到可靠的人幫忙看
+5. 投遞流程複雜，容易拖延
+```
+
+這類輸出不能當最終結論，但很適合幫你先決定要優先訪談哪類問題。
+
+### 12.4 讓 AI 充當“反方”
+
+很多時候，我們會對自己的想法太有感情。你可以專門讓 AI 扮演一個挑刺的人，逼你把問題說得更清楚：
+
+```text
+請你扮演一個非常嚴格的產品研究顧問。
+下面是我的 JTBD 假設：[你的假設]
+請從以下角度批判它：
+1. 這個場景是否過寬
+2. 這個 job 是否寫成了功能而不是真正進展
+3. 替代方案是否太弱
+4. 成功標準是否不夠清楚
+5. 這個假設最需要被驗證的風險是什麼
+```
+
+這樣做的好處是，你能更快發現自己是在看需求，還是只是在看自己喜歡的方案。
+
+## 📚 Assignments
+
+請你根據上文內容，完成下列作業：
+
+1. 選一個你最近想做的產品點子，用一句 JTBD 公式把它寫清楚
+2. 為這個點子補齊 5 個要素：場景、觸發、進展、替代方案、成功標準
+3. 找 3 個潛在使用者，至少問出一次“最近一次你遇到這個問題是什麼時候”
+4. 把訪談原話交給 AI，整理成 3 條最值得優先驗證的 JTBD 假設
+
+## 延伸閱讀
+
+- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
+- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
+- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
+- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
diff --git a/docs/zh-tw/stage-1/appendix-mom-test/index.md b/docs/zh-tw/stage-1/appendix-mom-test/index.md
new file mode 100644
index 0000000..23109e2
--- /dev/null
+++ b/docs/zh-tw/stage-1/appendix-mom-test/index.md
@@ -0,0 +1,589 @@
+---
+title: 'The Mom Test：如何透過使用者訪談驗證需求'
+description: '面向零基礎讀者的 The Mom Test 入門文章。學會避免禮貌性反饋，圍繞真實行為、具體事實和已有問題做使用者訪談，把“聽起來不錯”變成更可靠的需求判斷。'
+---
+
+<script setup>
+const duration = '約 <strong>1.5 小時</strong>'
+</script>
+
+# The Mom Test：如何透過使用者訪談驗證需求
+
+<a id="top-mom"></a>
+
+## 本章導讀
+
+<ChapterIntroduction
+  :duration="duration"
+  :tags="['使用者訪談', '需求驗證', '使用者研究', '產品調研']"
+  coreOutput="1 組更能問出真實資訊的訪談問題"
+  expectedOutput="不再把使用者的禮貌性鼓勵當成驗證，而能用真實行為判斷方向"
+>
+
+很多人第一次做產品調研時，以為最重要的是“找人聊聊”。於是他們去問朋友、同事，甚至家人：
+
+- 你覺得我這個想法怎麼樣？
+- 如果有這樣一個產品，你會不會用？
+- 這個功能聽起來是不是還不錯？
+
+對方往往也會給出非常鼓舞人的反饋：
+
+- 挺好的啊
+- 聽起來很有用
+- 我覺得你可以試試
+
+問題在於，這些回答通常並不能幫你做判斷。它們更像是禮貌、支援，或者一種不想當場掃你興的自然反應。你以為自己得到了“市場驗證”，其實只是收集了一堆很難用來決策的安慰。
+
+The Mom Test 這套方法，就是專門用來解決這個問題的。它提醒我們：**不是使用者在故意騙你，而是你問問題的方式，天然會把對方引向好聽但沒用的回答。**
+
+</ChapterIntroduction>
+
+::: info 最小 SOP
+**目的**：看完後，你會更清楚怎麼和使用者聊天，纔不會只聽到“聽起來不錯”，而是真的問出能幫你判斷方向的資訊。
+
+**行動項**：把你原本想問的 5 個問題改掉，優先問“最近一次發生在什麼時候”“你當時怎麼處理”。
+
+**結果**：你會更容易分清哪些是意見，哪些纔是真正能支撐判斷的證據。
+
+**關鍵詞跳轉**：[The Mom Test 是什麼](#mom-what) · [三個核心原則](#mom-principles) · [AI 怎麼幫你](#mom-ai)
+:::
+
+## 你將學到以下內容
+
+1. The Mom Test 到底在解決什麼問題，為什麼很多“使用者調研”其實沒有調研到真實資訊
+2. 這套方法最核心的幾個原則：少問意見，多問行為；少問假設，多問事實
+3. 怎樣把一個容易得到假陽性反饋的問題，改成更有價值的訪談問題
+4. 如何把 The Mom Test 和 JTBD、需求驗證、MVP 判斷連起來使用
+
+<a id="mom-what"></a>
+## [1. The Mom Test 到底是什麼](#top-mom)
+
+The Mom Test 來自 Rob Fitzpatrick 的同名書籍。它的名字聽起來有點像玩笑，但點得非常準：
+
+**就算是你媽媽，也很難直接告訴你“這是個爛想法”。**
+
+原因不是她不誠實，而是：
+
+- 她不想傷害你
+- 她會下意識鼓勵你
+- 她很容易順著你的表達方式回答
+
+其實不只是媽媽，朋友、同事、前同學，甚至很多陌生人，在面對你的產品想法時，也常常會給出類似的“正向反饋”。這不代表需求真的存在，只代表你把問題問成了一個很容易得到好聽答案的形式。
+
+所以，The Mom Test 的重點從來不是“別問媽媽”，而是：
+
+**別把問題問成任何人都會順著你回答的樣子。**
+
+這套方法真正想教你的，是如何透過對話，拿到更接近真實需求的資訊，而不是收集一堆讓自己感覺良好的評論。
+
+## 2. 它解決的核心問題是什麼
+
+The Mom Test 主要解決的是一種非常常見的認知錯覺：
+
+**把禮貌性的積極反饋，當成真實需求。**
+
+比如你問：
+
+- 你覺得這個 App 想法怎麼樣？
+- 如果我做一個 AI 幫你寫簡歷的工具，你會用嗎？
+- 這個功能是不是很有價值？
+
+這些問題的共同特點是：
+
+- 它們都在問“意見”
+- 它們都帶著一點暗示
+- 它們都在談一個還沒發生的未來
+
+而人對“意見”和“未來假設”的回答，通常都不穩定。很多人會高估自己的興趣、高估自己的執行力，也會高估自己未來的購買意願。
+
+所以 The Mom Test 提醒你：
+
+- 不要太相信別人對你點子的評價
+- 不要太相信別人對未來行為的預測
+- 要儘量回到使用者已經發生過的真實行為裡
+
+因為和“你會不會用”相比，“你上次怎麼處理這件事的”往往更接近真相。
+
+<a id="mom-principles"></a>
+## [3. 三個最核心的原則](#top-mom)
+
+如果你只想先記住最重要的部分，可以先記下面這三個原則。
+
+### 3.1 少談你的點子，多談使用者過去的真實經歷
+
+很多無效訪談一開場就講自己的方案，講自己多麼興奮，講自己準備做什麼產品。問題是，一旦你講得太多，對方就很容易切換到“配合你”“鼓勵你”的狀態。
+
+相比之下，更好的方式是把重點放在對方的經歷上：
+
+- 最近一次遇到這個問題是什麼時候？
+- 當時你在做什麼？
+- 你最後是怎麼處理的？
+- 哪一步最麻煩？
+
+你會發現，這類問題能更自然地把對話帶回現實，而不是停留在想象中的偏好。
+
+### 3.2 少問抽象意見，多問具體事實
+
+“我覺得這個功能挺好”“聽起來不錯”“好像有點用”，這些表達都太抽象了，很難指導產品決策。
+
+更有價值的資訊通常長這樣：
+
+- 我上週剛為了這件事折騰了 2 小時
+- 我現在是用 Excel 加微信硬撐
+- 我上個月已經為類似工具花過錢
+- 我最怕的是做錯，不是做慢
+
+這些纔是真正能幫你判斷問題強度、頻率和付費可能性的資訊。
+
+### 3.3 少問使用者想要什麼方案，多看他現在怎麼解決問題
+
+使用者很擅長描述自己的困擾，但不一定擅長設計解決方案。
+
+如果你問：
+
+- 你想不想要一個 AI 幫你自動做這個？
+- 你覺得加個智慧功能有沒有幫助？
+
+你得到的，通常只是對某個方案的模糊態度，而不是需求本身。
+
+更好的問題是：
+
+- 你現在用什麼方法處理這個問題？
+- 為什麼你會選擇這種方式？
+- 它哪裡不夠好？
+
+看清現有替代方案，往往比直接問“你想要什麼”更重要。
+
+## 4. 為什麼人們總會給你好聽但沒用的回答
+
+如果你能理解這件事，做訪談時就會少很多誤判。
+
+### 4.1 人會下意識地保持禮貌
+
+尤其當對話物件和你有關係時，對方很難直接說：
+
+- 這個方向聽起來不太行
+- 我根本不會用
+- 這個問題對我沒那麼重要
+
+他更可能說“挺好的”“有機會可以做做看”。
+
+### 4.2 人會高估未來的自己
+
+很多人真心相信自己未來會：
+
+- 更自律
+- 更願意學習
+- 更願意付費
+- 更願意嘗試新工具
+
+所以“如果有的話我應該會用”這句話，常常並不等於未來真的會用。
+
+### 4.3 你的提問方式本身就在引導答案
+
+當你問：
+
+- 我這個想法是不是挺好？
+- 這個功能對你來說是不是很有幫助？
+
+你其實已經偷偷把“正確答案”塞進問題裡了。
+
+這也是為什麼 The Mom Test 特別強調：**不要把訪談做成你在尋找認可。**
+
+## 5. 直接對比：什麼問題容易問廢，什麼問題更有價值
+
+下面這些對照，幾乎是每個新手都會用到的。
+
+| 容易問廢的問題 | 更有價值的問題 |
+| --- | --- |
+| 你覺得我這個想法怎麼樣？ | 你最近一次遇到這個問題是什麼時候？ |
+| 如果有這個產品你會用嗎？ | 你現在是怎麼處理這件事的？ |
+| 你願意為這個功能付費嗎？ | 你上次為了這個問題花過錢嗎？花在什麼上？ |
+| 你覺得這個功能重要嗎？ | 這個流程裡最煩、最慢、最不放心的是哪一步？ |
+| 你想不想要一個 AI 幫你自動做？ | 你現在為什麼還沒有找到更順手的解決辦法？ |
+
+這張表最重要的不是具體句子，而是背後的方向：
+
+- 從意見走向事實
+- 從未來走向過去
+- 從你的方案走向使用者的問題
+
+## 6. 一個零基礎也能立刻用的訪談節奏
+
+如果你現在就想去找人聊，可以直接按下面這個順序來。
+
+### 6.1 開場：說明你在學習，不是在推銷
+
+比如：
+
+> 我最近在研究大家怎麼處理這類問題，想先了解真實情況，不是來賣東西的。
+
+這種表達會讓對方更容易放下“我要給你積極反饋”的心理負擔。
+
+### 6.2 從最近一次真實經歷開始問
+
+可以先從這類問題開始：
+
+- 最近一次遇到這個問題是什麼時候？
+- 當時發生了什麼？
+- 你第一反應是怎麼處理的？
+
+一旦對話進入具體事件，資訊質量通常會明顯提升。
+
+### 6.3 往下追問行為、成本和替代方案
+
+繼續問：
+
+- 你現在用什麼辦法解決？
+- 這個辦法最不舒服的地方是什麼？
+- 你為此花過多少時間、錢或者精力？
+- 你試過別的方法嗎？為什麼沒繼續用？
+
+### 6.4 最後再判斷痛感和優先順序
+
+你不需要直接問“痛不痛”，可以從細節裡判斷：
+
+- 他是不是經常遇到
+- 他是不是已經在主動補救
+- 他是不是已經願意為此付出成本
+- 他在講這件事時是不是帶著明顯情緒
+
+這些都比一句“這是不是你的痛點”更有用。
+
+## 7. 一個更完整的例子
+
+假設你想做一個“AI 幫大學生改簡歷”的產品。
+
+### 錯誤問法
+
+你去問同學：
+
+> 我想做一個 AI 簡歷最佳化工具，你覺得怎麼樣？  
+> 如果它能根據崗位自動改簡歷，你會不會用？
+
+這時候，對方很可能會說：
+
+- 聽起來挺好
+- 我覺得應該有用
+- 如果免費我會試試
+
+這些回答幾乎沒有辦法幫你判斷需求到底強不強。
+
+### 更好的問法
+
+你可以改成：
+
+> 你最近一次改簡歷是什麼時候？  
+> 當時為什麼要改？  
+> 你是怎麼改的？  
+> 哪一步最卡？  
+> 你有沒有找過別人幫你看？  
+> 你以前為簡歷這件事花過錢或者花過很多時間嗎？
+
+透過這些問題，你可能得到的資訊會是：
+
+- 很多人不是不會寫，而是不知道怎麼針對不同崗位改寫
+- 他們最痛的不是排版，而是“不知道哪些經歷值得寫”
+- 他們會拖延，不是因為懶，而是因為每次改簡歷都很消耗
+- 他們已經在用學長建議、模板網站、AI 工具和朋友幫看來勉強解決
+
+這時候，你離真實問題就近得多了。
+
+## 8. The Mom Test 和 JTBD 怎麼配合用
+
+如果說 JTBD 幫你看清“使用者想完成什麼進展”，那麼 The Mom Test 更像是在教你：
+
+**怎麼透過訪談，確認這個 job 是不是真的存在。**
+
+你完全可以把兩者接起來使用：
+
+1. 先用 JTBD 假設一個 job
+2. 再用 The Mom Test 的方式，去問使用者最近一次真實經歷
+3. 看看這個 job 是否真的高頻、真實、值得優先做
+
+比如你的 JTBD 假設是：
+
+> 當我準備投遞實習時，我想快速把舊簡歷改成貼合崗位的版本，以便儘快完成投遞。
+
+那你就可以用 The Mom Test 風格的問題去驗證：
+
+- 你最近一次投遞是什麼時候？
+- 當時你是怎麼改簡歷的？
+- 哪一段最難寫？
+- 你改完之後怎麼判斷它夠不夠好？
+
+這樣，方法就連起來了：
+
+- JTBD 幫你定義需求假設
+- The Mom Test 幫你訪談驗證假設
+
+## 9. 新手做使用者訪談時最常見的誤區
+
+### 9.1 把訪談做成產品介紹會
+
+你一講太多自己的想法，對方就容易開始配合你，而不是告訴你真實情況。
+
+### 9.2 訪談物件全是熟人
+
+熟人不是不能聊，但熟人更容易鼓勵你。你至少需要混合一些更接近真實使用者的人，而不是隻找支援你的人。
+
+### 9.3 過早追著問功能
+
+如果你還沒搞清楚問題，就開始追問按鈕、介面、功能細節，通常是在太早進入解決方案。
+
+### 9.4 把一句“我會用”當成驗證結果
+
+訪談最多幫你判斷方向，不等於已經完成驗證。真正的驗證，最終還是要看使用者是否願意付出真實成本，比如時間、切換成本、試用行為，甚至付費。
+
+### 9.5 訪談結束後不整理
+
+如果你聊完就放著，資訊很快會變成模糊印象。最好儘快整理：
+
+- 出現頻率高的問題
+- 使用者原話裡的情緒詞
+- 當前替代方案
+- 已經付出的成本
+- 你自己的新判斷
+
+## 10. 可以直接複製去用的問題清單
+
+如果你想盡快開始，這裡有一組足夠通用的問題。
+
+### 開場問題
+
+- 最近一次你遇到這個問題是什麼時候？
+- 當時具體發生了什麼？
+
+### 行為問題
+
+- 你當時是怎麼處理的？
+- 你為什麼會選擇這種方式？
+
+### 成本問題
+
+- 這件事一般會花掉你多少時間或精力？
+- 你有沒有為瞭解決它花過錢？
+
+### 替代方案問題
+
+- 你試過別的工具或辦法嗎？
+- 為什麼最後沒有繼續用？
+
+### 收尾問題
+
+- 如果以後還遇到同樣的問題，你覺得最理想的解決方式應該是什麼樣？
+
+注意，這個收尾問題可以問，但最好放在後面。因為前面你更需要拿到事實，而不是願望。
+
+## 11. 小結
+
+The Mom Test 最重要的貢獻，不是給你一套“更會聊天”的技巧，而是幫你建立一種更清醒的判斷方式：
+
+- 不要太快相信別人對你點子的誇獎
+- 不要把“如果有我會用”當成真實需求
+- 不要讓訪談變成你在尋找認可
+
+真正有價值的訪談，應該儘量回到這些東西上：
+
+- 使用者最近一次真實經歷
+- 他現在怎麼處理
+- 他已經付出了什麼成本
+- 他在哪些地方明顯不舒服
+
+當你開始這樣問，你得到的資訊雖然有時沒那麼好聽，但通常更有用。  
+而做產品時，**有用的真相，永遠比好聽的鼓勵更重要。**
+
+<a id="mom-ai"></a>
+## [12. 如何利用 AI 幫你做使用者訪談](#top-mom)
+
+The Mom Test 本質上還是一套“和真人聊”的方法，所以 AI 不能替代真實訪談。但 AI 非常適合在訪談前、中、後給你打輔助，尤其適合幫新手降低門檻。
+
+### 12.1 讓 AI 幫你把“容易問廢”的問題改寫掉
+
+很多人知道自己不該問“你覺得我這個想法怎麼樣”，但一開口還是會回到這種句子。你可以先把自己準備問的問題交給 AI，讓它幫你改寫：
+
+```text
+下面是我準備做使用者訪談時想問的問題：
+[貼上你的問題]
+
+請你用 The Mom Test 的原則幫我改寫：
+1. 刪掉意見型問題
+2. 刪掉假設未來的問題
+3. 儘量改成圍繞過去真實行為、已有替代方案和已付成本的提問
+4. 最後整理成一套 8-10 個可以直接訪談的問題清單
+```
+
+一個很小白的輸入也完全可以：
+
+```text
+我想問使用者：
+1. 你覺得我做一個 AI 改簡歷工具怎麼樣？
+2. 你會不會用？
+3. 你願不願意付費？
+
+請幫我改成更好的問法。
+```
+
+AI 可能給出的有用輸出會像這樣：
+
+```text
+改寫後的問題：
+
+1. 你最近一次改簡歷是什麼時候？
+2. 當時為什麼要改？
+3. 你是怎麼改的？
+4. 哪一步最花時間？
+5. 你有沒有找別人幫你看？
+6. 你以前有沒有為簡歷修改花過錢或花過很多時間？
+```
+
+這種輸出很有幫助，因為它直接把你原本“在問意見”的問題，改成了“在問真實行為”的問題。
+
+### 12.2 讓 AI 幫你生成不同物件的訪談提綱
+
+同一個方向，面對不同人羣，訪談重點會不一樣。比如學生、HR、自由職業者，關心點完全不同。你可以讓 AI 幫你針對不同物件各出一版提綱：
+
+- 面向新手使用者，重點瞭解最近一次真實經歷
+- 面向重度使用者，重點瞭解替代方案和痛感
+- 面向付費使用者，重點瞭解是否已經為此付過成本
+
+這樣你在真正聊天時會更有節奏，而不會每個人都問同一套問題。
+
+比如你可以直接這樣輸入：
+
+```text
+我要聊兩類人：
+1. 第一次找實習的大學生
+2. 已經幫別人看過很多簡歷的學長學姐
+
+請分別給我一套訪談提綱，每套 6 個問題。
+```
+
+AI 可能輸出：
+
+```text
+對大學生：
+1. 最近一次投實習是什麼時候？
+2. 當時最卡的是哪一步？
+3. 你怎麼知道自己的簡歷能不能投？
+...
+
+對學長學姐：
+1. 你最近一次幫別人看簡歷是什麼時候？
+2. 你最常看到哪些明顯問題？
+3. 學弟學妹最容易卡在哪一步？
+...
+```
+
+這樣一來，你不用自己從零編問題，訪談準備會輕鬆很多。
+
+### 12.3 讓 AI 幫你整理訪談記錄
+
+訪談做完之後，最容易出現的問題不是“沒資訊”，而是“資訊太散”。AI 很適合幫你把碎片化對話整理成結構化筆記：
+
+```text
+下面是我和 3 位使用者的訪談記錄。
+請按 The Mom Test 的角度整理：
+1. 哪些內容是事實，哪些只是意見
+2. 使用者最近一次真實行為是什麼
+3. 當前替代方案是什麼
+4. 使用者已經付出的時間、金錢或精力成本是什麼
+5. 哪些問題被反覆提到
+6. 哪些說法聽起來積極，但證據不足
+```
+
+這一步尤其有價值，因為它能幫你把“聽起來不錯”的內容和“真的能支撐判斷”的內容分開。
+
+一個簡單輸入可以是：
+
+```text
+這是我和一個使用者聊完後的記錄：
+
+- 她說如果有個工具應該會試試
+- 她上週為了改簡歷花了一個晚上
+- 她現在主要靠朋友幫看
+- 她說最難的是不知道改到什麼程度算可以投
+
+請你幫我分一下，哪些是意見，哪些是事實。
+```
+
+AI 可能輸出：
+
+```text
+意見：
+- 如果有個工具應該會試試
+
+事實：
+- 上週為了改簡歷花了一個晚上
+- 當前替代方案是找朋友幫看
+- 最難點是不知道什麼時候算“可以投”
+
+可用於判斷需求的重點：
+- 這個問題最近剛發生過
+- 使用者已經投入了明顯時間成本
+- 當前方案依賴他人，不穩定
+```
+
+這個輸出就能很直觀地告訴新手：哪些話能拿來做判斷，哪些話只能聽聽。
+
+### 12.4 讓 AI 先做一輪輕量級網路搜尋
+
+如果你還沒開始訪談，可以先讓 AI 幫你做一些很輕的外部調研，比如：
+
+- 公開社羣裡，大家最近是怎麼抱怨這個問題的
+- 現有工具被吐槽最多的是什麼
+- 使用者是不是已經為相似問題花過錢
+- 市場上有哪些替代方案已經存在
+
+這類資訊不能替代真人訪談，但能幫你更快進入狀態，知道該從哪裡切入問題。
+
+比如一個簡單輸入可以是：
+
+```text
+請你幫我搜一下：
+“大學生改簡歷時最常吐槽什麼”
+幫我整理出 5 條最常見抱怨，用很白話的話寫出來。
+```
+
+AI 可能輸出：
+
+```text
+常見抱怨：
+
+1. 不知道簡歷上到底該寫什麼
+2. 每投一個崗位都要改，太累
+3. 改了很多版還是不確定好不好
+4. 沒人能給靠譜反饋
+5. 總覺得還沒準備好，所以一直拖
+```
+
+這種結果的價值在於，它會讓你更容易找到訪談切入口。
+
+### 12.5 讓 AI 扮演“訪談覆盤教練”
+
+你還可以把自己剛做完的一場訪談記錄丟給 AI，讓它幫你挑刺：
+
+```text
+下面是我的一段使用者訪談記錄。
+請從 The Mom Test 的角度幫我覆盤：
+1. 我哪些問題問得太像在找認可
+2. 哪些問題帶有明顯引導
+3. 哪些地方本來可以繼續追問事實
+4. 如果再來一次，這段對話可以怎麼問得更好
+```
+
+這對新手特別有幫助，因為你會更快建立一種“我到底是在收集證據，還是在收集鼓勵”的敏感度。
+
+## 📚 Assignments
+
+請你根據上文內容，完成下列作業：
+
+1. 選一個你最近想做的產品方向，先寫出 5 個你原本會問的“容易問廢”的問題
+2. 把這 5 個問題改寫成更符合 The Mom Test 風格的提問
+3. 找 3 個潛在使用者，至少問出一次“最近一次你遇到這個問題是什麼時候”
+4. 訪談結束後整理 4 類資訊：真實行為、替代方案、已付成本、反覆出現的困難
+
+## 延伸閱讀
+
+- [The Mom Test 官方網站](https://momtestbook.com/)
+- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
diff --git a/docs/zh-tw/stage-1/building-prototype/index.md b/docs/zh-tw/stage-1/building-prototype/index.md
new file mode 100644
index 0000000..7e55afe
--- /dev/null
+++ b/docs/zh-tw/stage-1/building-prototype/index.md
@@ -0,0 +1,605 @@
+---
+title: '動手做出原型 - 從業務分析到多頁面產品原型實現'
+description: '體驗從業務分析到多頁面產品原型實現的完整閉環。學習如何向業務提問、拆解需求、使用 AI IDE 生成單頁面及多頁面應用，並進行原型美化和測試。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>8 小時</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-tw/stage-1/building-prototype'] ?? []
+</script>
+
+# 初級三：動手做出原型
+
+## 本章導讀
+
+<ChapterIntroduction :duration="duration" :tags="['業務分析', '原型設計', 'AI 輔助程式設計', '多頁面應用']" coreOutput="1 個電商素材工作臺原型" expectedOutput="可互動的 Web 原型">
+
+在上一章，我們學習瞭如何<strong>找到好點子</strong>——從使用者需求出發，找到有人願意買單的方向。但找到方向只是第一步，<strong>真正考驗產品經理的是：如何把模糊的需求變成能用的產品。</strong>
+
+這一章，我們要解決一個<strong>現實問題</strong>：老闆丟給你一句"用 AI 提高商品釋出到電商平臺的效率" —— 你怎麼把它變成<strong>能用的產品原型</strong>？
+
+和前面做貪喫蛇、計算器不同，<strong>真實業務不能憑空想功能</strong>：
+
+1. <strong>明確痛點</strong>：找運營聊聊，從模糊的"提高效率"裡挖出<strong>真正的痛點</strong>
+2. <strong>挑重點做</strong>：一堆問題裡先解決<strong>最痛的那個</strong>，別想著一次性做全
+3. <strong>快速驗證</strong>：用 AI IDE 先做<strong>單頁面原型</strong>，跑通了再擴充套件成多頁面
+4. <strong>做出能用的東西</strong>：最後交付一個<strong>能演示、能操作的電商素材工作臺</strong>
+
+我們將學會從<strong>做玩具到做應用的轉變</strong>，學會<strong>共情和思考客戶的真實需求</strong>。
+
+</ChapterIntroduction>
+
+::: info ℹ️ 說明
+本篇中可能會有一些業務的名詞，如果你不懂可以詢問 AI 獲得解釋。
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '需求分析', description: '從模糊到具體' },
+      { title: '單頁驗證', description: '核心玩法落地' },
+      { title: '多頁擴充套件', description: '完善應用結構' },
+      { title: '美化完善', description: '提升使用者體驗' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 寫程式碼前確定需求
+
+在前面的教程中，我們使用 AI IDE 輕鬆生成了貪喫蛇和各類小遊戲，但這些只能算是玩具專案，並不能運用在工作和生活當中；如果我們想要 AI 能力真正為大家所用，就應該結合生活、工作場景進行 vibe coding 程式設計。
+
+上一章我們學習瞭如何找到<strong>有人願意買單的好點子</strong>，但找到方向只是開始。真正做產品時，你會發現：<strong>知道"做什麼"和知道"怎麼做"之間，還有巨大的鴻溝。</strong>
+
+這個鴻溝就是<strong>需求的具體化</strong>。
+
+舉個例子，在課堂或個人專案中，我們經常是從最簡單的可執行功能出發做產品和應用：
+
+- "做個看板，把任務列出來。"
+- "幫我做個畫畫的工具。"
+- "幫我做個可以收集問卷的軟體。"
+
+這些往往只是一個工具、一個功能模組，甚至都稱不上是一個清晰的業務問題。更關鍵的是，<strong>這些想法往往只是"你覺得有用"，而不是"使用者真的需要"。</strong>
+
+在企業級專案或創業專案中，產品經理和工程師往往是從更大的業務命題出發。例如，我們可以假定這樣的一個場景：
+
+<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
+  <div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ 業務場景：</div>
+  <div style="color: #606266; line-height: 1.6;">
+    <p>你是一家店鋪的電商運營產品經理。老闆給了你一個模糊但壓力很大的命題：</p>
+    <p style="font-style: italic; margin-top: 10px;">“現在公眾號裡都在用 AI 做圖做文案，我看都挺簡單的。你幫我搞一下，讓我們在抖音電商上新商品時效率高一點。”</p>
+  </div>
+</el-card>
+
+這時候你可能想：“老闆你又在做夢了！”，然而，實際工作中這樣模糊的一句話拍板的現象是非常常見的，甚至比你一週點奶茶的次數還要多。因此，為了能夠做好一個合格的職場牛馬（我更希望你是新興的創業公司 CEO），我們必須學會如何從做自用的工具轉向做真正的產品原型。
+
+由於我們學過 AI IDE，你仔細一想這個需求其實很簡單，不就是讓 AI 基於這個給個提示詞，丟給 Agent 就萬事大吉了嗎？
+
+```
+請你參考我的需求 xxxx，
+幫我設計一個電商素材工作臺，
+包含商品描述、圖片、影片等素材的生成和管理功能。
+```
+
+如果你興高采烈的直接把這個需求轉換成了原型，然後發給了老闆 —— 恭喜你，這個季度的獎金要取消了！
+
+**為什麼會這樣？這就是我們要解決的核心痛點：**
+
+以前我們學 AI IDE，做的都是貪喫蛇、計算器這種**自己用的玩具專案**——功能簡單、自己清楚要什麼、做出來自己用就行。但**真實業務場景完全不同**：
+
+- **你不是使用者**：老闆要的是"提高效率"，但你不知道運營每天具體怎麼工作、卡在哪裡；
+- **AI 也不懂業務**：你丟給 AI 一個模糊需求，它只能基於通用知識瞎猜，做出來的東西看著像那麼回事，實際根本用不了；
+- **好點子不等於好產品**：你以為"加個 AI 生成功能"很酷，但使用者可能根本不需要，或者用起來比原來更麻煩。
+
+**這就是為什麼我們必須學會"從想到點子到理解使用者"** 只有你的創意真正解決別人的問題，開口問、深入瞭解業務，才能做出真正意義上有價值的事情。（好的點子甚至大於好的技術）
+
+### 1.1 從想象到真實：學會向業務提問
+
+::: info 💡 先搞清楚：什麼是需求？什麼是業務？
+
+**需求**就是使用者真正想要的東西，是他們遇到的麻煩、想解決的問題。比如"老闆想讓我上架商品更快一點"，這就是一個需求。
+
+**業務**就是使用者每天實際在做的事情、他們的工作方式。比如電商運營每天要做的事：上架商品、改價格、做圖片、看資料……這些都是業務。
+
+**為什麼要關注業務？**
+因為如果你不懂業務，做出來的工具可能就是"看起來很好，但沒人用"。只有真正瞭解使用者每天怎麼工作、卡在哪裡，才能做出真正幫得到他們的東西。
+
+:::
+
+從最簡單的視角出發，你可以先問自己幾個問題：
+
+- 老闆說"**效率高一點**"，具體是什麼意思？是想**做得更快**？還是想**少花錢**？還是想**賣更多貨**？
+- 現在是怎麼把商品上架的？**哪裡做得不順**？
+- 每天要做多少個**新商品**？每個商品要做多少**圖**、寫多少**字**？
+- 現在的工作中，**哪件事最麻煩**、**最不想做**？
+
+但這些都是猜測的問題，我們要向一線的抖音電商業務方直接提問，“你們的困難和關注的點在哪裡？”，透過溝通獲得更準確的答案：
+
+::: info 📋 真實業務採訪結果
+
+我們問了做電商運營的人，他們說了這些煩惱：
+
+**1. 事情太多太雜**
+- 一個人要管好幾個店，每個店都有很多商品要弄；
+- 每天忙來忙去：**上架新商品**、**改價格**、**做圖片**、**看資料**，一件事沒做完又要做另一件。
+
+**2. 做內容不是一次做好，而是邊做邊試**
+- 先用**廠家給的圖**、**以前用過的素材**或**網上找的參考圖**，快速把商品**上架**試試；
+- 花點小錢做推廣，**看看有沒有人買**；
+- 只有**賣得好的商品**，才會認真做圖、寫詳情、拍影片。
+
+:::
+做完業務方提問後，我們心懷激情，因為此時我們真正能做出完美的符合業務的產品原型了！—— 又錯了，如果我們試圖“一口氣滿足所有訴求”，產品會非常龐大，也很難在課程時間內落地。因此，還需要進一步梳理和收斂，找出真正的核心痛點。
+
+### 1.2 從發散到收斂：鎖定業務的核心痛點和功能
+
+::: info 💡 為什麼要"收斂"？什麼叫"痛點"？
+
+**問題很多，但先做哪一個？**
+
+使用者可能告訴你一堆問題：A也麻煩、B也麻煩、C也麻煩……但如果你試圖一次性解決所有問題，最後可能什麼都做不好。所以要**收斂**——就是從一堆問題裡，挑出**最痛、最急、最能解決**的那個先動手。
+
+**什麼是痛點？**
+就是使用者**最煩、最花時間、最想解決**的那個具體問題。不是"我覺得有用"，而是使用者**每天都在抱怨、每次做都很痛苦**的事。
+
+:::
+
+透過上面的採訪，我們發現運營遇到的問題有很多：被活動打斷節奏、要管多個店、在上架/改價/做圖/看資料之間忙來忙去……
+
+如果我們試圖"這些問題我全都要解決"，最後會做出一個**大而全但不好用**的工具。
+
+讓我們把這些問題分分類（可以讓 AI 幫忙），大致有三類：
+
+1. **節奏問題**：什麼時候上架、什麼時候調價；
+2. **效率問題**：怎麼同時管好多個店、多個商品；
+3. **內容問題**：怎麼快速做出商品圖片和文案。
+
+對於我們的課程來說，最適合先解決的是**第3類：做內容的問題**。但"快速做內容"還是有點抽象，我們再問問業務方具體卡在哪裡：
+
+::: info 📋 業務方說：做內容有兩個最痛苦的地方
+
+**痛苦1：批次做圖做文案太費勁**
+- 素材到處放：網盤、微信記錄、平臺後臺……**找起來很費勁**；
+- 一次要上很多商品，**沒時間逐個精心做**，只能隨便拼一下；
+- 要求不高，**能看、能上架就行**，不需要多精美。
+
+**痛苦2：好用的方案沒法存下來複用**
+- 之前做得好的標題、排版，**下次想用卻找不到了**；
+- 方案散落在聊天記錄、以前的商品連結裡；
+- 想用的時候得**翻半天、複製貼上改半天**；
+- 缺一個能**收藏、管理、直接套用**的工具。
+
+:::
+
+基於上面兩個痛點，我們要做一個簡單的小工具：**幫運營批次做圖做文案，還能把好用的方案存下來下次直接用**。
+
+它只做兩件事（可以讓 AI 幫忙細化，記得根據業務反饋不斷刪減功能）：
+
+::: info 功能1：批次生成電商商品圖和文案
+
+**這是做什麼的？**
+給系統一些商品資訊，它自動幫你生成能在電商平臺（如抖音、淘寶）上架用的商品圖和文字。
+
+**輸入**
+| 型別 | 內容 |
+|------|------|
+| 商品資訊 | 名字、類別、品牌、材質、尺寸、顏色等 |
+| 商品圖片 | 白底圖或簡單場景圖 |
+| 參考圖 | 以前賣得好的商品截圖或參考連結 |
+| 匯入方式 | Excel 批次匯入，或直接在頁面上填寫 |
+
+**輸出（生成的電商素材）**
+- **商品主圖**：帶文字賣點的產品展示圖（使用者刷到時第一眼看到的圖）
+- **商品標題**：搜尋時能搜到的關鍵片語合
+- **賣點文案**：1-2句吸引買家的話
+- 都是**改改就能上架**的成品
+
+**效果**
+- 以前：每個商品都要從零開始做圖寫文案
+- 現在：把一批商品丟給系統，生成草稿後挑挑改改就行
+
+:::
+
+::: info 功能2：把好用的方案存成模板
+
+**輸入**
+| 型別 | 內容 |
+|------|------|
+| 一整套 | 主圖 + 標題 + 文案 |
+
+**輸出**
+| 功能 | 說明 |
+|------|------|
+| 套用 | 下次做新商品時，用模板自動生成 |
+| 修改 | 直接改標題、改文案 |
+| 管理 | 起名字、打標籤（如"男包模板""大促標題"），方便找 |
+
+**效果**
+1. 匯入新商品
+2. 選擇：讓系統預設生成，或**用我存好的模板**
+3. 系統自動套用模板風格，輸出新的圖和文案
+
+:::
+
+---
+
+**回顧我們剛才做了什麼：**
+
+1. **先問問題**：不是直接動手做，而是先問運營"你們最煩什麼"；
+2. **找到痛點**：發現他們最痛苦的是"做圖寫文案太費勁"和"好用的方案沒法存"；
+3. **收斂範圍**：不做大而全的平臺，只做"批次生成圖和文案 + 存模板"這兩個功能。
+
+**為什麼這樣做很重要？**
+
+很多新手做產品的誤區是：功能越多越好。但使用者真正需要的是**解決最痛的那個問題**。做一堆功能但都不好用，不如做一兩個功能但真的幫到使用者。
+
+**產品和業務思維的核心：**
+- 不要自己想"我覺得使用者需要什麼"
+- 要去問使用者"你每天在做什麼？哪裡最痛苦？"
+- 從一堆問題裡**收斂**到最痛、最能解決的那個
+- 先做出**最小可用**的版本，再慢慢迭代
+
+這就是我們在寫程式碼之前要想清楚的事。程式碼只是工具，**理解使用者、找準問題**纔是第一步。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '需求分析', description: '從模糊到具體' },
+      { title: '單頁驗證', description: '核心玩法落地' },
+      { title: '多頁擴充套件', description: '完善應用結構' },
+      { title: '美化完善', description: '提升使用者體驗' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. 10分鐘產出原型：讓 AI IDE 落地"核心玩法"
+
+::: info 💡 程式設計 Plan 建議
+如果你覺得當前 IDE 不夠聰明，或者覺得很快就花完了額度，你可以去買一個**程式設計 Plan 計劃**。提前預習參考[這個文章](../../stage-2/backend/modern-cli/)使用 Claude 進行程式設計。
+:::
+
+Thinking 是好事，但不可 over thinking，我們就此控制過度反思，嘗試從單個頁面開始製作原型。
+
+### 2.1 第一步：用大白話告訴 AI 你要什麼
+
+剛開始不用追求完美的提示詞，先從你最自然的表達開始。就像跟同事描述需求一樣，用大白話告訴 AI 你想做什麼，然後讓 AI 幫你最佳化成更專業的表達。
+
+#### 2.1.1 從口述開始（推薦新手）
+
+先用自己的話描述想法，哪怕很粗糙也沒關係：
+
+```
+我想做一個工具，幫電商運營自動生成商品的主圖和文案。
+運營平時要一個個手動做圖寫文案，很麻煩。
+我的想法是：他們上傳商品資訊，系統自動生成一批草稿，
+運營挑選好用的稍微改改就能用。
+
+先做最簡單的版本：一個頁面，左邊填商品資訊，
+右邊顯示生成的結果。能上傳圖片，能填文字，
+生成後顯示主圖預覽和文案。
+```
+
+接下來，把這段話發給 AI（比如 ChatGPT、Claude 等），讓它幫你擴寫一下。AI 通常會幫你補充一些你沒考慮到的細節，把你的想法整理得更清晰，最後生成一個適合發給 AI IDE 的提示詞。
+
+你可以這樣跟 AI 說：
+```
+幫我把上面的想法擴寫一下，整理成一份清晰的業務邏輯文件，
+然後生成一個適合發給 AI IDE（比如 Cursor、Trae）的提示詞，
+用來生成單頁面應用的原型程式碼。
+```
+
+AI 會返回一份結構化的需求和對應的提示詞。你自己檢查一遍，刪減不需要的功能，確認無誤後再拿去生成程式碼。
+
+這樣做的好處是：口述的東西是最真實的想法，可能會漏掉一些重要的細節。而 AI 幫你擴寫的時候，可能會問"要不要支援批次上傳？"這種沒想到的問題，幫助你進一步驗證。你可以根據反饋需要選擇保留或刪除不實際的功能，在反覆修改中確定給 AI 的初版提示詞。
+
+#### 2.1.2 跳過擴寫環節：直接把你整理好的業務文件丟給 AI
+
+如果你已經在前面的章節整理好了業務邏輯文件（比如用大白話寫的需求說明），可以直接套用下面的格式發給 AI IDE，省去了讓 AI 擴寫的中間步驟。適合需求已經很清晰、想直接動手寫程式碼的情況：
+
+```
+幫我參考業務邏輯實現一個單頁面應用，用來驗證核心玩法功能。
+
+業務邏輯參考如下：
+1. 幫運營批次生成第一版圖文草稿：
+- **輸入（支援直接上傳和批次匯入素材）：**
+  - 商品基礎資訊：名稱、類目、品牌、材質、尺寸、顏色、適用人羣等；
+  - 商品圖片：白底圖 / 簡單場景圖；
+  - 每次生成支援上傳額外上傳歷史爆款截圖或參考連結，允許有參考物；
+  - 支援透過 Excel 批次匯入，或在頁面上線上錄入 / 上傳。
+  - 支援頁面上指定是否儲存商品素材到素材庫，方便下次使用
+- **輸出（能直接拿去上架或輕改就能上架的內容）：**
+  - 每個商品一張"看得過去、包含基礎賣點"的主圖草稿；
+  - 一條"結構合理、含核心關鍵詞"的標題 + 1–2 句賣點文案。
+- **期望的使用方式變化：**
+  從每批商品白手起稿變為把一批商品丟進系統，拿系統生成的草稿做篩選和微調。
+
+先做第一個功能，第二個功能（模板庫）後面再加。
+```
+
+#### 2.1.3 程式設計師的做法（進階）：讓 AI 幫你寫 "提示詞的提示詞"
+
+如果你想更精細地控制程式碼生成過程，可以先讓 AI（如 ChatGPT）基於你的需求，生成一份專門給 AI IDE 的提示詞：
+
+```
+基於下面的想法，幫我寫一個發給 coding Agent 的寫程式碼用的提示詞，
+我需要用這個提示詞來生成程式碼。
+
+[把你的業務邏輯描述貼在這裡]
+
+要求：
+1. 提示詞要包含清晰的頁面佈局描述
+2. 明確資料結構和互動邏輯
+3. 指定技術棧（如 React + Tailwind）
+4. 列出需要實現的核心功能點
+```
+
+通常 AI 會生成類似下面的結構化提示詞：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png)
+
+你可以把這份提示詞稍作修改後，發給 AI IDE 生成程式碼。
+
+### 2.2 第二步：讓 AI IDE 直接生成程式碼
+
+#### 2.2.1 準備工作：瞭解 AI IDE 的基本操作
+
+如果你還不熟悉 AI IDE（如 Cursor、Trae、Windsurf 等）的基本使用方式，建議先看附錄中的[IDE 基礎教程](/zh-tw/appendix/2-development-tools/ide-basics/)，瞭解如何：
+- 建立新專案
+- 與 AI Agent 對話
+- 理解 AI 的程式碼生成過程
+
+#### 2.2.2 開始生成程式碼
+
+此時你已經獲得了初始提示詞，我們以第一種提示詞風格為例，讓 AI 協助我們生成程式碼。首先建立一個視窗和對應的資料夾，開啟資料夾（在你喜歡的資料夾地址下初始化一個新專案）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png)
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png)
+
+在側邊欄中選擇一個你喜歡的模型（推薦 gemini、gpt、glm、kimi、minimax 等），輸入第一步中得到的提示詞：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png)
+
+點選生成後，我們會看到熟悉的環節，AI 會根據提示詞，規劃出專案的目錄結構、必要的檔案，並給出每個檔案的初始內容。
+
+::: warning ⚠️ 特別注意：AI 可能會停下來等你確認
+在生成過程中，AI Agent 經常會**停下來等待你的輸入或確認**，比如：
+- 詢問你是否繼續下一步
+- 讓你按回車確認某個操作
+- 詢問你某個技術細節的選擇
+
+**如果看到 AI 不動了，先檢查一下對話介面，看看是不是在等你回覆。** 很多新手以為 AI 在思考，其實它早就停在那等你了。主動回覆或按回車，AI 就會繼續工作。
+:::
+
+此時同樣別忘記按回車確認資訊（否則會陷入等待，有些 AI IDE 不會陷入這個問題）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png)
+
+如果遇到如下場景，這個意思是已經在本地啟動了一個服務，你需要點選跳過，否則會停留在這個介面（如果程式碼生成完沒有東西出下，你就需要主動說“幫我啟動這個專案”）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png)
+
+::: info 💡 場景說明
+**場景說明**：你用 `npm create vite@latest` 建立了一個 React + TypeScript 專案（easy-vibe-web），建立完成後，電腦會自動把這個網頁“跑起來”，方便你立刻看到效果。
+
+**本地服務**：可以理解為你的電腦臨時開了一個網頁展示視窗，只在你自己這臺電腦上執行，別人訪問不到。
+
+**localhost（本地地址）**：`localhost` 就是“這臺電腦自己”的意思，瀏覽器訪問它，其實是在訪問你電腦上正在執行的網頁。
+
+**埠**：埠可以理解為編號，用來區分同一臺電腦上執行的不同網頁服務，本專案使用的是 5174。
+
+**訪問連結 `http://localhost:5174/`**：這個地址表示“訪問我這臺電腦上編號為 5174 的網頁”，在瀏覽器開啟就能看到效果。
+
+**本次場景說明**：系統原本想使用 5173，但該編號已被佔用，所以自動換成了 5174，這屬於正常情況。
+
+**操作指引**：開啟瀏覽器，在位址列輸入 `http://localhost:5174/` 並回車，即可看到當前專案頁面。
+:::
+
+都確認完畢後，等待智慧體執行片刻，我們可以得到如下結果：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png)
+
+可以看到已經有了初步功能圖，但前端頁面顯示太醜了，此時我們可以嘗試這樣和 AI 進行直接對話，最佳化介面顯示：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png)
+
+最佳化後我們能夠得到如下更美觀的介面：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png)
+
+你可以根據自己的需求修改網頁功能，可以附上截圖自由進行提問，比如：“我現在還不需要批次匯入功能，幫我取消”，“左邊要輸入的東西太多了，幫我只留下 xxxxx”。甚至，你還可以參考其他成熟的網站，比如這裡我們可以直接參考谷歌的某設計產品進行“參考”（你可以貼上自己喜歡的某個成熟網站的截圖）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png)
+
+最後可以得到：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png)
+
+### 2.3 遇到報錯怎麼辦
+
+在實際操作中，遇到報錯是必然的，這是正常現象，不代表你哪裡做錯了。你不需要看懂報錯，只需要把“看到的情況”完整交給 AI。
+
+常見的處理方式只有三種：
+
+- **方式一：頁面或終端報錯**  
+  頁面變紅、白屏，或終端出現一堆紅字時，直接截圖或複製全部錯誤資訊發給 AI，讓它幫你修。
+
+- **方式二：功能不對但沒報錯**  
+  比如按鈕沒反應、資料沒顯示、樣式亂了，用大白話描述“現在發生了什麼 + 你本來想要什麼”，必要時加一張截圖。
+
+- **方式三：不確定有沒有問題**  
+  可以直接問 AI：“幫我檢查一下這個功能有沒有明顯問題，需不需要調整。”
+
+#### 2.3.1 新手常見疑問
+
+- **Q：我不知道錯誤資訊在哪裡？**
+- A：一般來說，看所有“紅色的字”。在終端、控制檯或頁面上，找到紅色提示，全選複製給 AI 即可。
+
+- **Q：AI 改完還是報同樣的錯怎麼辦？**
+- A：這是常見情況。繼續截圖或複製最新的錯誤資訊發給它，讓它在上一次修改基礎上進一步修復。
+
+- **Q：我需要完全理解 AI 的修復方案嗎？**
+- A：不需要一次性全部搞懂。可以每次只關注一兩個點，久而久之，你會逐漸看懂越來越多程式碼，就像積累英語詞彙一樣。
+
+- **Q：改了很多次，問題還是沒解決怎麼辦？**
+- A：可以嘗試：
+  - 使用 IDE 的“版本回退”功能，在智慧體對話處找到撤回按鈕，回到一個可執行的版本重新開始；
+  - 更換模型或調整提示詞，將現象、錯誤資訊講得更具體；
+  - 將“當前程式碼 + 錯誤日誌 + 預期行為”打包，一次性發給 AI，讓它整體重構問題部分。
+
+## 3. 從單頁面擴充套件到多頁面應用
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '需求分析', description: '從模糊到具體' },
+      { title: '單頁驗證', description: '核心玩法落地' },
+      { title: '多頁擴充套件', description: '完善應用結構' },
+      { title: '美化完善', description: '提升使用者體驗' }
+    ]" />
+  </ClientOnly>
+</div>
+
+當核心玩法的邏輯基本生成完畢後，我們可以生成剩下部分的內容。比如此時我們點選設定或者是一些按鈕是根本無效的。
+
+你可以讓 AI 根據業務提示詞的需求進行檢查，生成未生成的部分，又或者是讓 AI 直接補充未實現完成的頁面，你也可以指定一個頁面讓 AI 補充實現，直到頁面可以被點選，功能可以正常互動：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png)
+
+等待片刻後，我們能夠看到程式已經在之前的基礎上補充了多個頁面和可互動功能：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png)
+
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png)
+
+此時你只需要人工點選每個你所關注的功能和按鍵，確保互動正常即可，如果有不能互動的功能，你可以和 AI 溝通，讓它幫你修復。
+
+## 4. 把原型做得“像那麼回事”
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '需求分析', description: '從模糊到具體' },
+      { title: '單頁驗證', description: '核心玩法落地' },
+      { title: '多頁擴充套件', description: '完善應用結構' },
+      { title: '美化完善', description: '提升使用者體驗' }
+    ]" />
+  </ClientOnly>
+</div>
+
+有了多頁面結構之後，最後一步是讓原型從“能跑”變成“用起來順手、看上去專業”。這需要我們動手體驗一遍全流程（使用者流程），並且把無法執行的部分讓 AI 進行修復，使得我們可以每次重新整理後都能從零開始模仿一個新使用者走全部流程，得到預期結果。
+
+讓我們回顧最初的需求：
+
+```
+1. 幫運營批次生成第一版圖文草稿：
+- **輸入（支援直接上傳和批次匯入素材）：**
+  - 商品基礎資訊：名稱、類目、品牌、材質、尺寸、顏色、適用人羣等；
+  - 商品圖片：白底圖 / 簡單場景圖；
+  - 每次生成支援上傳額外上傳歷史爆款截圖或參考連結，允許有參考物；
+  - 支援透過 Excel 批次匯入，或在頁面上線上錄入 / 上傳。
+  - 支援頁面上指定是否儲存商品素材到素材庫，方便下次使用
+- **輸出（能直接拿去上架或輕改就能上架的內容）：**
+  - 每個商品一張“看得過去、包含基礎賣點”的主圖草稿；
+  - 一條“結構合理、含核心關鍵詞”的標題 + 1–2 句賣點文案。
+- **期望的使用方式變化：**
+  從每批商品白手起稿變為把一批商品丟進系統，拿系統生成的草稿做篩選和微調。
+
+2. 把好用的輸出沉澱成可複用的模板庫：
+- **什麼可以被收藏？**
+  - 任意一條運營覺得“好用”的輸出都可以一鍵收藏：
+    - 可以是“主圖 + 標題 + 賣點”的完整組合；
+    - 也可以只收藏其中一部分，例如某個標題結構、某條賣點文案。
+- **收藏之後能做什麼？**
+  - **複用：**
+    - 用這條收藏，套一批新商品引數，重新生成圖文草稿；
+    - 或在同一商品上，基於該模板生成多版變體做 A/B 測試。
+  - **編輯：**
+    - 直接修改標題文案 / 賣點文案；
+    - 如果支援圖片編輯，可以微調主圖中的文字、貼紙等元素。
+  - **管理：**
+    - 給收藏起名字、打標籤（如“男包主圖模板”“大促標題結構”）、支援按照店鋪分類，方便後續檢索。
+- **下次上新時如何使用？**
+  - 匯入新商品後，運營可以選擇：
+    - 使用系統預設邏輯生成，或
+    - 指定“使用我收藏的某個模板來生成”；
+  - 系統基於新商品資料，自動套用模板的結構與風格，輸出新的主圖 + 標題 + 賣點草稿。
+```
+
+如果每次測試時候都需自己新建資料進行測試，這需要花費大量時間，在這個時候我們通常會使用叫做”測試資料“的方式進行處理，我們可以按照下列方式和 AI 溝通，讓 AI 在介面上生成可以測試的快速資料入口，方便我們測試功能都能正常跑通：
+
+```
+我現在需要測試這個使用者使用過程，確保他能完全走通，請你結合下列需求生成測試資料入口，讓我能夠點選後很快測試全流程是否正常：
+1. 幫運營批次生成第一版圖文草稿：
+- **輸入（支援直接上傳和批次匯入素材）：**
+  - 商品基礎資訊：名稱、類目、品牌、材質、尺寸、顏色、適用人羣等；
+  - 商品圖片：白底圖 / 簡單場景圖；
+  - 每次生成支援上傳額外上傳歷史爆款截圖或參考連結，允許有參考物；
+  - 支援透過 Excel 批次匯入，或在頁面上線上錄入 / 上傳。
+  - 支援頁面上指定是否儲存商品素材到素材庫，方便下次使用
+- **輸出（能直接拿去上架或輕改就能上架的內容）：**
+  - 每個商品一張“看得過去、包含基礎賣點”的主圖草稿；
+  - 一條“結構合理、含核心關鍵詞”的標題 + 1–2 句賣點文案。
+- **期望的使用方式變化：**
+  從每批商品白手起稿變為把一批商品丟進系統，拿系統生成的草稿做篩選和微調。
+```
+
+很容易得到結果（如果你覺得一個資料太少，你可以讓 AI 生成多個可測試用例）：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png)
+
+點選後得到結果：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png)
+
+此時我們直接得到的是結果，並不是有一個“假設的生成過程”，我們想要模擬真實的生成過程，可以直接和 AI 進行對話：“請你模擬一個真實的生成過程，在點選後過一段時間才給我結果。”
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png)
+
+走通生成功能後，我們還要確保模板庫的功能正常，從頁面的生成卡片上我們能夠知道模版庫收藏功能並沒有實現，此時需要和 AI 進一步深入對話，“請你幫我確保需求 [此處貼上上面的 2. 的內容] 正常，可以點選一個結果收藏對應的模板，點開後能看到生成引數”
+
+生成往往不是一蹴而就，時常需要截圖修正：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png)
+
+最後得到預期結果：
+![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png)
+
+除了手動體驗需求流程，你還可以讓 AI 幫你直接做需求檢查，例如：
+
+- “請對照我最開始的需求，檢查當前應用是否已經覆蓋所有核心功能。”
+- “幫我列一個功能清單，標出哪些已經完成、哪些尚未實現或體驗不足。”
+
+AI 一般會輸出一個 checklist，你可以根據結果思考是否需要繼續改進，經過反覆修改後能夠得到比較完善的原型結果。
+
+## 5. 📚 作業：復刻屬於你自己的抖音電商工作臺
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 挑戰任務：復刻電商素材工作臺</div>
+  </template>
+
+  <p>
+    參考本節課的提示詞和內容，完成一次完整閉環：
+  </p>
+
+  <ul>
+    <li>
+      <strong>完整閉環實踐</strong>
+      <ul>
+        <li>業務梳理提示詞生成 → 單頁原型生成 → 多頁原型生成</li>
+      </ul>
+    </li>
+    <li>
+      <strong>成果分享</strong>
+      <ul>
+        <li>截圖你的程式分享給大家看</li>
+      </ul>
+    </li>
+    <li>
+      <strong>思考題</strong>
+      <ul>
+        <li>為下一節“接入大語言模型（LLM）和文生圖能力”預留空間，提前思考：你的工作臺裡，可以怎樣嵌入“AI 寫文案 / 生成配圖 / 生成指令碼”等能力？</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## 下一步
+
+在下一節中，我們將在這個內容生產工作臺的基礎上，接入具體的 AI 能力（文字生文字、圖片生文字、文字生圖片），例如：
+
+- 為某條內容任務自動生成文案初稿和多個標題備選
+- 根據任務描述自動生成配圖草稿（文生圖）
+- 對歷史內容任務做自動歸類和摘要，幫助你規劃下一個活動的選題
+
+<RelatedArticlesSection
+  title="繼續學習"
+  description="建議按“接入 AI 能力 → 完整專案閉環 → 設計工程化”順序繼續。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-tw/stage-1/complete-project-practice/index.md b/docs/zh-tw/stage-1/complete-project-practice/index.md
new file mode 100644
index 0000000..3c176ac
--- /dev/null
+++ b/docs/zh-tw/stage-1/complete-project-practice/index.md
@@ -0,0 +1,301 @@
+---
+title: '完整專案實戰 - 從 Demo 到產品級原型'
+description: '走出 Demo 階段，學習如何完善產品鏈路、構建逼真的模擬資料、透過反饋快速迭代，最終完成一個可展示、可互動的完整 AI 產品原型。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>3 天</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-tw/stage-1/complete-project-practice'] ?? []
+</script>
+
+# 初級五：完整專案實戰
+
+## 章節導讀
+
+<ChapterIntroduction :duration="duration" :tags="['產品思維', '模擬資料', '互動完善', 'LocalStorage']" coreOutput="1 個功能完備的 AI 產品原型" expectedOutput="包含完整鏈路與真實資料的 Web 應用">
+
+上一章接入了 AI 能力，Demo 能跑起來了，但離真正的"產品"還<strong>差得遠</strong>：頁面一重新整理<strong>資料就沒了</strong>，報錯就<strong>白屏</strong>，列表裡只有"測試資料 1、測試資料 2"，使用者點錯了也<strong>沒法撤銷</strong>...
+
+這一章要把這些<strong>坑都填上</strong>：我們會<strong>補全產品的完整鏈路</strong>，用 AI 生成<strong>逼真的業務資料</strong>替代假資料，加上<strong>錯誤處理和使用者反饋</strong>，最後打磨出一個<strong>拿得出手、能給別人演示</strong>的完整原型。
+
+這是初級階段的<strong>最後一章</strong>，走完這一步，你就完成了從"完全不會程式設計"到"<strong>能獨立做出 AI 產品原型</strong>"的蛻變。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '完善鏈路', description: '從單點功能到完整閉環' },
+      { title: '注入靈魂', description: '模擬真實業務資料' },
+      { title: '反饋迭代', description: '基於真實反饋修補體驗' },
+      { title: '最終大作業', description: '你的畢業設計' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 拒絕 "Happy Path"：完善核心鏈路
+
+很多初學者做原型，往往只做“Happy Path”（最理想的路徑）：使用者點選 -> API 響應成功 -> 顯示結果。
+但在真實世界裡，事情往往沒那麼順利。為了讓你的原型看起來像個真正的產品，你需要考慮以下幾個“隱形”的環節。
+
+### 1.1 增加“等待”與“反饋”
+
+當使用者點選“生成文案”時，AI 往往需要幾秒鐘才能響應。如果介面毫無反應，使用者會以為程式壞了。
+**你需要讓 AI IDE 幫你加上 Loading 狀態：**
+
+> 提示詞示例：
+> “當我點選生成按鈕時，請把按鈕變成‘生成中...’並不可點選，同時在右側區域顯示一個載入動畫。直到 API 返回結果後，再恢復正常。”
+
+### 1.2 處理“失敗”與“異常”
+
+API Key 可能會過期，網路可能會斷開。
+**你需要讓 AI IDE 幫你處理報錯：**
+
+> 提示詞示例：
+> “如果 API 請求失敗了，不要直接在控制檯報錯，請在頁面頂部彈出一個紅色的提示框（Toast），告訴使用者‘生成失敗，請稍後重試’，並允許使用者重新點選生成。”
+
+### 1.3 對話歷史持久化
+
+在與 AI 互動的過程中，我們需要儲存對話內容，讓使用者能夠回顧歷史、繼續之前的交流。目前階段我們暫不引入資料庫，可以選擇以下輕量級方案：
+
+**儲存方案選擇：**
+
+| 方案             | 適用場景                         | 特點                                 |
+| ---------------- | -------------------------------- | ------------------------------------ |
+| **LocalStorage** | 純前端專案，使用者資料儲存在瀏覽器 | 實現簡單，重新整理不丟失，無法跨裝置同步 |
+| **JSON 檔案**    | 本地原型，資料以檔案形式儲存     | 結構清晰，便於除錯，可手動編輯       |
+| **TXT 檔案**     | 最簡方案，快速記錄文字內容       | 格式自由，相容性好                   |
+
+**對話內容示例：**
+儲存的對話歷史通常包含以下內容：
+
+```json
+[
+  {
+    "role": "user",
+    "content": "幫我生成一款藍芽耳機的抖音帶貨文案",
+    "timestamp": "2026-01-20 10:30:00"
+  },
+  {
+    "role": "assistant",
+    "content": "【藍芽耳機種草文案】\n\n🎧 告別延遲，沉浸式聽歌體驗\n\n姐妹們！這款藍芽耳機真的太絕了👇\n\n✅ 40dB主動降噪，瞬間進入音樂世界\n✅ 30小時超長續航，一週通勤不用充電\n✅ 通話清晰如面對面，地鐵嘈雜也能聊\n✅ 半入耳設計，久戴不痛不悶耳\n\n💰 限時優惠，點選下方連結入手！",
+    "timestamp": "2026-01-20 10:30:05"
+  }
+]
+```
+
+**實現提示詞：**
+
+> “請幫我實現對話歷史的儲存功能。支援將使用者和 AI 的對話記錄儲存為 JSON 檔案（或使用 LocalStorage）。每次進入頁面時自動載入歷史對話，支援檢視和刪除單條對話記錄。”
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '完善鏈路', description: '從單點功能到完整閉環' },
+      { title: '注入靈魂', description: '模擬真實業務資料' },
+      { title: '反饋迭代', description: '基於真實反饋修補體驗' },
+      { title: '最終大作業', description: '你的畢業設計' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 2. 注入靈魂：模擬真實資料 (Mock Data)
+
+一個空蕩蕩的頁面是無法打動人的。想象一下，你向別人展示“電商素材工作臺”，結果歷史記錄裡空空如也，或者只有一行 "test / test / test"。
+為了讓演示效果最佳，我們需要“偽造”一些逼真的資料，讓你的原型看起來像一個已經運營了半年的真實產品。
+
+### 2.1 讓 AI 幫你設計資料結構
+
+我們不需要自己去想每一個欄位叫什麼（比如是叫 `name` 還是 `title`），這件事完全可以交給 AI。
+
+你只需要告訴 AI 你的**業務場景**：
+
+> **提示詞示例：**
+> “我正在做一個**抖音電商素材工作臺**的原型。
+> 請幫我設計一個 JSON 資料結構，用來描述一個‘商品任務’。
+> 這個任務應該包含：商品的基本資訊（名字、類目）、輸入的素材（圖片連結）、以及 AI 生成的結果（標題、文案、海報圖）。
+> 請直接給我一個 JSON 示例。”
+
+AI 會根據你的描述，自動幫你構思出類似 `productName`, `generatedContent` 這樣的欄位。
+
+### 2.2 讓 AI 批次生產“逼真”資料
+
+有了資料結構後，下一步就是讓 AI 幫你“填空”，生成一批看起來真實的資料。
+
+**提示詞技巧：**
+你不能只告訴 AI “幫我生成資料”，你需要像給實習生布置任務一樣，告訴它**業務背景**和**內容要求**：
+
+- **業務背景**：告訴 AI 我們是做“抖音電商”的，所以商品標題要吸睛（比如“顯瘦神器”、“學生黨必入”），文案要口語化。
+- **圖片要求**：為了讓原型好看，圖片不能是黑白的佔位符，最好是隨機的彩色風景或實物圖。
+
+> **提示詞示例：**
+> “請基於剛才設計的結構，幫我生成 10 條逼真的模擬資料。
+> （備註：不一定要 JSON 格式。如果你正在寫前端，可以讓它直接生成 JavaScript 陣列；如果你用 Python，可以讓它生成 List。）
+>
+> **業務場景要求**：
+>
+> 1. 假設這是一家綜合百貨店，商品涵蓋‘女裝’、‘數碼’、‘美妝’三個類目。
+> 2. **生成的標題和文案要非常‘抖音風’**：比如標題要包含 Emoji (🔥, ✨)，文案要用‘絕絕子’、‘親測好用’這種語氣。
+> 3. **圖片欄位**：請統一使用 `https://picsum.photos/seed/{random_id}/300/400` 這個格式，確保每張圖都不一樣。”
+
+**生成的 Mock Data 示例：**
+
+```javascript
+export const mockProductTasks = [
+  {
+    id: 'task_001',
+    name: '夏季法式復古碎花裙',
+    status: 'completed',
+    input: {
+      category: '女裝',
+      features: ['收腰', '顯瘦', '氣質'],
+      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
+    },
+    output: {
+      generatedTitle: '✨誰穿誰好看！這條法式碎花裙真的絕絕子🔥',
+      generatedCopy:
+        '姐妹們！這條裙子真的太顯瘦了！收腰設計絕了，穿上立馬有腰身。面料很透氣，夏天穿完全不悶。約會逛街首選！👗',
+      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
+    },
+    createdAt: '2026-01-20T10:00:00Z'
+  },
+  {
+    id: 'task_002',
+    name: '超強降噪藍芽耳機 Pro',
+    status: 'completed',
+    input: {
+      category: '數碼',
+      features: ['降噪', '超長續航', '低延遲'],
+      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
+    },
+    output: {
+      generatedTitle: '🎧 終於被我找到了！這款耳機降噪太強了吧！🔇',
+      generatedCopy:
+        '戴上它，世界瞬間安靜了。音質絕佳，聽歌就像在現場。續航也很給力，充一次電用一週！學生黨必入！',
+      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
+    },
+    createdAt: '2026-01-21T14:30:00Z'
+  }
+  // ... 更多資料
+]
+```
+
+### 2.3 (進階) 使用 LocalStorage 實現“假增刪改”
+
+如果你希望剛才生成的“模擬資料”不僅能看，還能刪、能改，甚至新生成的任務重新整理頁面後還在，你可以結合 `LocalStorage`。
+
+> **提示詞示例：**
+> “請幫我實現一個資料儲存功能。
+>
+> 1. 優先從 `localStorage` 讀取資料。
+> 2. 如果 `localStorage` 為空，則使用剛才生成的 Mock 資料初始化，並將它們存入 `localStorage`。
+> 3. 同時幫我寫 `addProductTask` 和 `deleteProductTask` 函式，每次操作都要同步更新 `localStorage`。”
+
+透過這一步，你的原型就擁有了“記憶”，使用者體驗幾乎和真產品無異。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '完善鏈路', description: '從單點功能到完整閉環' },
+      { title: '注入靈魂', description: '模擬真實業務資料' },
+      { title: '反饋迭代', description: '基於真實反饋修補體驗' },
+      { title: '最終大作業', description: '你的畢業設計' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 3. 收集反饋與快速迭代
+
+閉門造車是做不出好產品的。現在你的原型已經具備了“核心功能”+“完整鏈路”+“演示資料”，是時候拿給別人看了。
+
+### 3.1 找誰測？怎麼測？
+
+- **找朋友/同事**：不需要他們懂技術，只需要讓他們試著用一下。
+- **觀察而非引導**：不要說“點這裡”，而是看他們會點哪裡。如果他們找不到按鈕，說明設計有問題。
+- **“Wizard of Oz” (綠野仙蹤法)**：如果你的 AI 還沒接好，你可以人工在後臺（或資料庫）手動修改資料來模擬 AI 的返回，先驗證使用者是否需要這個功能。
+
+### 3.2 面對 Bug 和 吐槽
+
+- **樣式錯亂**：不同螢幕尺寸下可能會亂。
+  - **Action**: 截圖發給 AI IDE -> “在這個螢幕寬度下亂了，幫我修一下。”
+- **操作別扭**：“這個流程太繁瑣了”。
+  - **Action**: 把建議告訴 AI IDE -> “使用者覺得先上傳再生成太慢，能不能改成一鍵生成？”
+- **需求新增**：“如果有這個功能就好了”。
+  - **Action**: 評估是否核心，如果是，讓 AI 快速實現一個簡化版。
+
+**記住：在這個階段，AI 是你最好的修改助手。你只需要負責發現問題，程式碼修改交給它。**
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '完善鏈路', description: '從單點功能到完整閉環' },
+      { title: '注入靈魂', description: '模擬真實業務資料' },
+      { title: '反饋迭代', description: '基於真實反饋修補體驗' },
+      { title: '最終大作業', description: '你的畢業設計' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. 🎓 階段大作業：完成你的“畢業設計”
+
+恭喜你！你已經走完了從“需求”到“原型”再到“AI 整合”的全過程。現在，是時候展示你的最終成果了。
+
+**本次大作業不再侷限於“電商素材工作臺”**。你需要結合自己的興趣或行業背景，打造一個獨一無二的 AI 產品原型。
+
+### 選題與要求
+
+你需要從 **[產業多分類場景方向參考](../appendix-industry-scenarios/index.md)** 中選擇一個最接近的場景，或者根據自己的想法構思一個全新的場景。
+
+**專案必須綜合運用前幾節課學到的所有內容：**
+
+1.  **原型的構建**：使用前端技術搭建美觀、易用的介面。
+2.  **需求的控制**：不求大而全，但求核心功能邏輯閉環。
+3.  **API 的接入**：接入真實的 AI 模型（LLM/VLM 等），賦予應用真正的智慧。
+4.  **實現一個可玩的應用**：不僅僅是靜態頁面，而是有資料流轉、有互動反饋的動態應用。
+
+### 作業產出
+
+最終你需要提交以下兩樣內容：
+
+1.  **一個完整的原型應用**：部署上線或本地可執行，具備完整的使用鏈路。
+2.  **30 秒的演示影片**：錄製一段影片，簡要介紹你的應用場景，並演示核心功能的實際操作。
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 最終挑戰清單</div>
+  </template>
+
+  <p>
+    這是 Stage 1 的最後一戰。請按照以下清單檢查你的作品：
+  </p>
+
+  <div style="font-weight: bold; margin-bottom: 10px;">核心功能自檢</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>場景明確</strong>：選定了一個具體的行業或應用場景</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>邏輯閉環</strong>：核心流程能跑通，不僅僅是 Happy Path</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>AI 驅動</strong>：真實呼叫了大模型 API，而非預設回覆</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>體驗完整</strong>：包含 Loading、錯誤處理及模擬資料</label></li>
+  </ul>
+
+  <div style="font-weight: bold; margin: 20px 0 10px;">交付物準備</div>
+  <ul style="list-style-type: none; padding-left: 0;">
+    <li><label><input type="checkbox" disabled /> <strong>原型應用</strong>：程式碼已完成並可執行</label></li>
+    <li><label><input type="checkbox" disabled /> <strong>演示影片</strong>：30 秒左右，清晰展示核心亮點</label></li>
+  </ul>
+</el-card>
+
+## 下一步
+
+完成大作業後，你已經具備了“獨立開發 AI 應用原型”的能力。
+在接下來的 Stage 2 中，我們將深入更復雜的全棧開發，學習如何把這個原型變成一個真正能上線、有資料庫、有使用者系統的商業級應用。
+
+讓我們在下一階段見！
+
+<RelatedArticlesSection
+  title="繼續進階"
+  description="恭喜完成 Stage 1，下面這些章節可以幫助你進入工程化開發。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-tw/stage-1/finding-great-idea/index.md b/docs/zh-tw/stage-1/finding-great-idea/index.md
new file mode 100644
index 0000000..5a6d529
--- /dev/null
+++ b/docs/zh-tw/stage-1/finding-great-idea/index.md
@@ -0,0 +1,1087 @@
+---
+title: '找到好點子 - 從使用者需求到有人買單'
+description: '學習如何從日常痛點中發現商業機會，掌握需求分析的系統方法論，把普通想法打磨成使用者願意付費的產品概念。'
+---
+
+<script setup>
+const duration = '約 <strong>3 小時</strong>'
+</script>
+
+# 初級二：找到好點子
+
+## 本章導讀
+
+<ChapterIntroduction :duration="duration" :tags="['需求挖掘', '產品思維', '使用者分析', '商業模式']" coreOutput="3 個經過驗證的產品概念" expectedOutput="可落地的創業/產品方向">
+
+前面我們學會了用 AI IDE 做東西，但有一個更根本的問題：<strong>做什麼？</strong>
+
+很多人一上來就想"做個 AI 工具"、"搞個社交平臺"，結果做出來的東西沒人用。問題出在哪？<strong>沒有找到真需求</strong>。
+
+更殘酷的現實是：<strong>很多產品雖然解決了問題，但使用者就是不願意買單。</strong>
+
+這一章，我們將透過小明的故事，學習如何找到值得做的產品方向。
+
+學完這一章，你將擁有一套<strong>完整的找點子方法論</strong>，以及 3 個經過驗證的產品概念。
+
+</ChapterIntroduction>
+
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'Step 1', description: '建立判斷標準' },
+      { title: 'Step 2', description: '挖掘日常痛點' },
+      { title: 'Step 3', description: '橫向切分人羣' },
+      { title: 'Step 4', description: '縱向深挖場景' },
+      { title: 'Step 5', description: '驗證需求真偽' },
+      { title: 'Step 6', description: '打磨產品概念' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## Step 1：建立判斷標準 —— 什麼樣的需求使用者願意買單
+
+::: warning 為什麼這一章很重要？
+
+有人可能會覺得奇怪："這不是一門教 Vibe Coding 的課嗎？為什麼要先學'找需求'？直接開始寫程式碼不行嗎？"
+
+確實，市面上很多程式設計課都是直接教你做專案：做個 Todo List、做個計算器、做個個人部落格……這些專案確實能幫你熟悉語法和工具，但問題是：
+
+<strong>方向錯了，越深入錯得越多。</strong>
+
+想象一下：
+- 你花兩週時間做了一個"日曆管理系統"，但市面上已經有 100 個更好的
+- 你做了一個"卡路里拍照計算"，但使用者用一次就解除安裝了
+- 你做了一個"個人記賬本"，但連你自己都懶得用
+
+這些專案做完，你能寫在簡歷上嗎？大機率不能，因為<strong>它們沒有解決真實的問題，也沒有產生真實的價值</strong>。
+
+更殘酷的是：既然我們要投入時間學習，為什麼不追求更好的結果？
+
+既然 Vibe Coding 讓我們能快速把想法變成產品，那我們更應該學會<strong>找到值得做的想法</strong>。用最接近實戰的方式來訓練自己——不是做"練習專案"，而是做"有人願意用的產品"。
+
+這就是為什麼我們要先學"找到好點子"。
+
+---
+
+**筆者私以為**，時間是很寶貴的，**既然做，我們就做到最好**，不然為什麼不去玩呢？作為責任，筆者也會竭盡全力，支援你做到最好。
+
+就算所有人都不相信你能做好，筆者也會堅定不移盼望著你能做到最好。選擇了 vibecoding 做產品，那就試試看自己能到哪一個盡頭吧！
+
+:::
+
+
+---
+
+## 開篇：獨立開發程式設計師小明的故事
+
+小明是一名程式設計師，工作三年了。有一天他突然想到：要不做一個健身 APP 吧，幫使用者制定健身計劃、記錄訓練資料。這個想法讓他很興奮，覺得自己終於找到了一個可以做的專案。
+
+接下來的一年，小明幾乎把所有業餘時間都搭進去了。他做了一個功能很全的 APP——課程模組、打卡系統、社羣功能、資料分析，該有的都有。介面也做得挺好看，至少他自己覺得挺滿意的。
+
+上線那天，小明滿懷期待。他花了不少錢做推廣，第一個月就有 5 萬人下載。看起來開局不錯，對吧？
+
+但很快問題就來了。使用者下載之後，用一次就解除安裝了，7日留存只有 5%。他做了幾個付費功能，但幾乎沒有使用者願意掏錢。更讓他沮喪的是，Keep、薄荷健康、FitTime 這些成熟產品，功能比他全，內容比他好，使用者為什麼要換到他的 APP？
+
+一年下來，小明虧了 20 萬。
+
+他坐在電腦前，看著後臺慘淡的資料，心裡只有一個問題：我的 APP 做得挺好的啊，為什麼沒人用？更沒人願意買單？
+
+
+
+小明的失敗，不是因為技術不行，也不是因為產品做得不好。說實話，他的 APP 功能挺全的，介面也挺好看的。
+
+**問題出在起點。**
+
+他從來沒問過一個最基本的問題：使用者真的需要嗎？
+
+他看到健身 APP 市場很大，Keep 估值多少億，就覺得這是個好機會。但他沒搞清楚幾件事：使用者為什麼需要另一個健身 APP？和 Keep 相比，我的差異化是什麼？使用者願意為此付費嗎？
+
+**方向錯了，越深入錯得越多。** 他花了一年時間，把一個錯誤的方向做得越來越完善，結果只是離成功越來越遠。
+
+
+::: tip 這一章我們做什麼
+
+這一章，我們來幫小明覆盤一下。看看他的問題到底出在哪，然後一起找到真正有人願意買單的產品方向。
+
+我們將分三步走：
+
+**第一幕：找到真需求** —— 先搞清楚什麼樣的需求使用者才願意買單
+
+**第二幕：挖出好點子** —— 學會從普通想法中挖掘出有價值的商業機會
+
+**第三幕：AI對話打磨** —— 用 AI 把想法變成可落地的產品方案
+
+:::
+
+---
+
+## 第一幕：找到真需求
+
+小明很沮喪，但沒放棄。他開始反思一個問題：到底什麼樣的需求，使用者才願意買單？
+
+### 小明的困惑：為什麼使用者不買單？
+
+他去找了幾個用過他 APP 的朋友，想聽聽他們的真實想法。
+
+朋友 A 說："你這個 APP 做得挺好，但我已經在用 Keep 了，為什麼要切換？"
+
+朋友 B 說："你讓我記錄每次訓練，太麻煩了，我懶得記。"
+
+朋友 C 說得更直接："免費功能夠用了，我為什麼要付費？"
+
+這些回答讓小明突然明白了問題在哪。
+
+**第一個問題：使用者不切換，是因為現有方案已經夠好了。** Keep 等成熟產品功能已經很全，使用者習慣也養成了，遷移成本很高。你做一個差不多的產品，使用者憑什麼要換？
+
+**第二個問題：使用者不願意改變習慣。** 記錄訓練這件事，對使用者來說太麻煩了。如果一個產品需要使用者改變 3 個以上的習慣，大機率會失敗。
+
+**第三個問題：免費替代品太多。** 你的功能太通用，沒有獨特價值，使用者找不到付費的理由。
+
+### 什麼是真需求？
+
+小明開始研究那些讓使用者願意買單的成功產品。他發現了一個共同點：這些產品解決的都不是"我覺得有用"的需求，而是使用者願意為之付費、願意為之改變行為、願意為之忍受不便的那種需求。
+
+換句話說，**真需求是使用者用腳投票投出來的，不是產品經理拍腦袋想出來的。**
+
+### 案例：讓使用者買單的產品
+
+小明研究了幾個成功案例，想搞清楚它們到底抓住了什麼痛點。
+
+#### 美菜網：讓小餐館老闆睡個好覺
+
+表面上看，美菜網做的事情很簡單：幫餐館買菜。但如果你仔細想，餐館老闆為什麼要用它？
+
+因為小餐館老闆每天凌晨 4 點就要起牀去批發市場，很辛苦，而且經常被坑。美菜網做的事情，不是簡單的"電商賣菜"，而是重構了整個供應鏈，讓小餐館老闆能睡個好覺。
+
+痛點越痛，付費意願越強。省下的時間和體力，比省下的菜錢更有價值。
+
+#### 小紅書：解決選擇困難
+
+表面上看，小紅書是"分享海外購物心得"。但使用者為什麼願意花時間在上面看筆記？
+
+因為面對海量商品，使用者不知道什麼值得買、什麼不值得買。他們需要一個信任的人幫自己篩選，節省時間，避免踩坑。
+
+小紅書解決的其實是兩個深層痛點：選擇困難和信任缺失。使用者願意為"省時間"和"避坑"付費，這就是為什麼小紅書能做起來。
+
+---
+
+看完這些案例，小明有了一個重要發現。
+
+使用者買單的從來不是"功能"，而是"解決恐懼"和"消除焦慮"。美菜網解決的是小餐館老闆對凌晨採購艱辛的恐懼，小紅書解決的是使用者對買錯東西的恐懼。
+
+**恐懼驅動付費，焦慮驅動行動。**
+
+### 需求的三層：痛點、爽點、癢點
+
+小明進一步研究，發現使用者的需求可以分為三種型別：
+
+::: tip 痛點（Pain Point）—— 恐懼驅動
+
+**本質：** 使用者正在經歷的、讓他們感到痛苦、焦慮、不便的問題。不解決會很難受，甚至威脅到生存或安全。
+
+**例子：**
+- 糖尿病患者不知道喫多少碳水會血糖飆升（恐懼：健康威脅）
+- 小餐館老闆凌晨 4 點起牀去批發市場（恐懼：生存艱辛）
+
+**關鍵：** 使用者願意為此付費，因為不解決會"很痛"。
+
+:::
+
+::: tip 爽點（Delight Point）—— 即時滿足
+
+**本質：** 使用者有一個需求，能夠立即被滿足，產生即時的愉悅感。
+
+**例子：**
+- 外賣 30 分鐘送達（即時滿足飢餓）
+- 一鍵生成精美 PPT（省時省力的爽感）
+
+**關鍵：** 讓使用者"爽"是留存的關鍵，但單獨作為付費點較弱。
+:::
+
+::: tip 癢點（Itch Point）—— 虛擬自我
+
+**本質：** 使用者想要變得更好、更酷、更精緻，但不是必須的。滿足了會開心，不滿足也沒事。
+
+**例子：**
+- 記錄每天喝了多少水（想象中的自律生活）
+- 用 AI 給照片加藝術濾鏡（想象中的藝術品味）
+
+**關鍵：** 使用者為"癢點"買單的意願較弱，因為不解決也沒事。
+
+:::
+
+怎麼看待正確的優先順序排序？一個好的建議是：痛點 > 爽點 > 癢點
+
+為什麼？
+
+1. **痛點是生存需求：** 不解決會死（或很難受），使用者不得不買單。是"止痛藥"。
+2. **爽點是即時獎賞：** 讓使用者爽，使用者就會來。是"海洛因"（褒義的上癮機制）。
+3. **癢點是慾望滿足：** 可有可無，最容易被砍掉。是"維生素"或"奢侈品"。
+
+**關鍵洞察：** 很多產品經理犯的錯誤是：用痛點的方式去推銷癢點的產品。
+
+比如："記錄喝水能讓你更健康"——喝水確實健康，但不記錄也不會不健康。這是把癢點包裝成痛點，使用者不會買賬。
+
+### 驗證真需求的5步法
+
+小明想：**那我有一個想法時，怎麼快速判斷它是否值得投入？**
+
+他學習了產品經理常用的 5 步判斷法（詳細內容見附錄A）：
+
+1. **第一步：直接和真實使用者聊天，瞭解他們現在的做法**
+
+   找到 10 個目標使用者。問他們："你現在怎麼解決這個問題？" 如果使用者已經在用某種方法，說明問題確實存在。如果使用者說不需要解決，那可能不是真需求。
+
+2. **第二步：分析使用者現有的替代方案，找出你的優勢**
+
+   使用者現在可能用其他產品、Excel、靠記憶，或者忍受著不解決。你需要弄清楚這些方案有什麼缺點。你的產品要比它們好很多，使用者才願意換。
+
+3. **第三步：測試使用者是否願意為你的產品付錢**
+
+   做預售或收定金。統計願意付定金的使用者比例（越早賺上錢說明需求越正確）：
+   - 超過 10%：需求真實，值得投入
+   - 5% 到 10%：需求存在，但需要打磨
+   - 低於 5%：需求可能不成立
+
+4. **第四步：估算這個市場有多大，能不能賺錢**
+
+   計算三個數字：目標使用者總數 × 付費意願 × 客單價。相乘後得到市場規模。如果市場太小，可能不值得做。
+
+5. **第五步：思考你的產品有什麼護城河，防止別人抄襲**
+
+   考慮這些壁壘：技術難度、網路效應、品牌、成本優勢。這些能幫你長期保持競爭力。
+
+**本幕小結：小明的收穫**
+
+1. **真需求的標準**
+   - 最重要的標準是使用者願意付費。
+   - 使用者願意為此改變行為。
+   - 沒有解決方案時，使用者會有很大損失。
+
+2. **避開假需求**
+   - 癢點不是痛點，不能當成真需求。
+   - 市場太小，很難支撐商業模式。
+   - 方案比問題還複雜，使用者會放棄。
+
+3. **優先順序排序**
+   - 真正的優先順序是：痛點 > 爽點 > 癢點。
+
+**本幕輸出**
+- 我理解了什麼是真需求。
+- 我掌握了需求的三層分類：痛點、爽點、癢點。
+- 我學會了用 5 步判斷法驗證需求真偽。
+
+---
+
+## 第二幕：挖出好點子
+
+小明現在知道了什麼是真需求，但他還是不知道從哪裡開始。總不能憑空想一個需求出來吧？
+
+他決定從自己最熟悉的事情開始——身邊的人和事。
+
+### 從自己出發：小明的姐姐
+
+小明想起了他的姐姐。姐姐剛生完孩子，總是抱怨沒時間健身，肚子上的贅肉減不下去，整個人很焦慮。
+
+有一天小明問她："你現在怎麼解決健身的問題？"
+
+姐姐嘆了口氣說："跟著 Keep 練吧，但那些動作不適合產後身體，做完腰更疼了。去健身房？沒人幫忙看孩子。請私教？一節課 300 到 500 塊，太貴了。自己瞎練吧，又怕受傷。"
+
+小明聽完，覺得這可能就是他要找的真需求。
+
+姐姐的困擾其實很具體：時間碎片化，需要照顧寶寶，沒有整塊時間健身；身體有限制，腹直肌分離、盆底肌鬆弛，不能劇烈運動；心理很焦慮，身材走樣，擔心老公嫌棄，社交自卑；資訊太混亂，網上資訊太多，不知道什麼運動適合產後；還有孤獨感，沒人理解她們的處境，缺乏同伴支援。
+
+這些都是真實的痛點，不是"有也挺好"的癢點。
+
+---
+
+### 橫向切分：不同人羣的需求
+
+小明意識到，"健身 APP"這個想法太泛了。他想做的是幫助所有人健身，但問題是，所有人的需求都不一樣。
+
+他做了一個橫向切分，把"想健身的人"分成幾類（詳細方法見附錄B）：
+
+健身增肌人羣需要精確計算蛋白質攝入，手動記錄太麻煩，他們的付費意願很高，追求效率。糖尿病患者必須嚴格控制碳水，但外出就餐很難估算，這是剛需，願意付費，復購率也高。產後媽媽想恢復身材但沒時間計算，需要簡單方案，時間敏感，需要一站式服務。外賣黨天天喫外賣不知道喫了多少熱量，這是高頻場景，但付費意願中等。考研學生需要高效學習工具，但不知道用什麼，這是剛需，但客單價低。
+
+小明選擇了"產後媽媽"這個人羣。為什麼？
+
+首先，他自己就是使用者——姐姐就是產後媽媽，他天然理解這個羣體的痛點。其次，痛點很痛——產後恢復的焦慮是真實的，不是"有也挺好"的癢點。第三，付費意願強——媽媽們為了恢復身材，願意花錢。第四，競爭相對不激烈——市面上沒有專門針對產後媽媽的產品。
+
+::: tip 產品經理的切分邏輯
+
+為什麼切分人羣這麼重要？
+
+因為通用工具很難贏。大平臺已經佔據了"通用"市場，你很難在功能上超越它們。細分人羣的需求更痛——產後媽媽對健身的需求是剛需，普通健身者只是"有也行"。服務好一個小羣體，比討好所有人更容易建立口碑。細分人羣的痛點更具體，更願意為解決方案付費。
+
+:::
+
+---
+
+### 縱向深挖：完整的使用者場景
+
+找到人羣后，小明沒有停留在"產後健身"這個單一功能上。他想更深入地理解使用者的完整場景（詳細方法見附錄C）。
+
+他觀察了姐姐一天的生活。
+
+早上 6 點，寶寶剛睡著，姐姐有 30 分鐘空閒。她想運動，但怕吵醒寶寶，也不知道做什麼動作安全。
+
+上午 10 點，姐姐抱著寶寶哄睡，腰很酸。她想做一些修復運動，但手沒空。
+
+下午 3 點，寶寶睡覺，姐姐想運動。但身體很累，不知道還能不能做。
+
+晚上 8 點，姐姐終於有空了，但很焦慮。她看著鏡子裡的自己，覺得人生完蛋了，翻著以前的照片偷偷哭。
+
+小明發現，姐姐的痛點不是"沒有健身課程"，而是"產後恢復的恐懼和焦慮"。
+
+---
+
+::: info 產品經理的場景思維
+
+很多人以為痛點就是功能需求，其實不是。痛點是場景中的情緒加上付費意願。
+
+產後媽媽面對鏡子裡走樣的身材時，真正的痛點不是"不知道怎麼健身"，而是恐懼——擔心身體恢復不好，留下後遺症；焦慮——看著鏡子裡的自己，覺得人生完蛋了；無助——不知道從何開始，也沒人指導；孤獨——別人隨便生，我卻要恢復這麼久。
+
+好的產品設計，要解決的是情緒，而不只是功能。情緒背後，是使用者付費的動力。
+
+:::
+
+---
+
+### 價值重構：從"健身APP"到"產後媽媽恢復助手"
+
+基於以上分析，小明重新設計了這個產品。
+
+::: tip 重構後的產品概念："產後媽媽恢復助手"
+
+**核心定位：** 不只是健身工具，而是產後媽媽的"專屬康復教練+心理支持者"
+
+**核心功能：**
+1. **碎片化訓練：**
+   - 每次只需 10-15 分鐘
+   - 寶寶睡覺時也能練
+   - 提供"抱著寶寶也能做"的動作
+
+2. **產後專屬課程：**
+   - 按產後階段分級（0-3個月、3-6個月、6個月以上）
+   - 針對腹直肌分離、盆底肌修復的專項訓練
+   - 每個動作都有"產後注意事項"提示
+
+3. **AI 動作糾正：**
+   - 手機攝像頭識別動作
+   - 實時提示"膝蓋太彎了"、"背部要挺直"
+   - 避免錯誤動作傷害身體
+
+4. **心理支援社羣：**
+   - 只有產後媽媽的私密社羣
+   - 分享恢復進度，互相鼓勵
+   - 專業心理諮詢師入駐
+
+5. **個性化方案：**
+   - 根據生產方式（順產/剖腹產）、身體情況定製
+   - 考慮哺乳期的特殊需求
+
+**商業模式：**
+- 基礎課程免費
+- 高階課程：99元/月（含 AI 動作糾正、專屬方案）
+- 一對一私教：299元/月（線上指導）
+- 社羣會員：199元/年（含心理支援、專家答疑）
+
+**競爭壁壘：**
+- 專業性：與產後康復機構合作，有醫學背書
+- 社羣粘性：產後媽媽的情感連線很強
+- 資料積累：使用者身體資料越多，方案越精準
+
+**市場規模：**
+- 中國每年新生兒約 1000萬
+- 產後康復市場約 500億
+- 目標：服務 1% 的產後媽媽 = 10萬使用者
+- ARPU（每使用者平均收入）：500元/年
+- 潛在收入：5000萬/年
+
+:::
+
+對比原始 idea 和重構後的概念：
+
+| 維度 | 原始想法 | 重構後 |
+|------|---------|--------|
+| 目標使用者 | 所有健身人羣（大而泛） | 產後媽媽（精準） |
+| 解決痛點 | 記錄訓練（癢點） | 產後恢復焦慮（痛點） |
+| 競爭壁壘 | 技術（容易被複制） | 專業性+社羣+資料 |
+| 付費意願 | 低（免費替代多） | 高（剛需+情緒價值） |
+| 擴充套件空間 | 有限 | 可擴充套件到孕期、備孕期 |
+
+**這就是從"一個功能"到"有人買單的產品"的進化。**
+
+---
+
+### 更多例子：從普通idea到好點子
+
+小明覺得這個方法很好用。他又用同樣的方法分析了幾個其他例子，想看看這個方法是不是通用的（詳細案例見附錄D）。
+
+#### 例子一：從"卡路里測量"到"糖友安心喫"
+
+普通想法是拍照識別食物熱量，幫助減肥的人控制飲食。但問題是市面上已經有薄荷健康、MyFitnessPal 等成熟產品了。
+
+小明橫向切分了一下，發現糖尿病患者這個人羣很有意思：他們必須嚴格控制碳水，但外出就餐很難估算。縱向深挖他們的場景：餐前不知道這個菜能不能喫，擔心血糖飆升；餐中需要實時提醒"你已經喫了多少碳水"；餐後需要記錄血糖變化，看和飲食的關係。
+
+重構後的產品叫"糖友安心喫"，定位是糖尿病患者的"飲食安全助手"。
+
+---
+
+#### 例子二：從"新聞助手"到"投研情報官"
+
+普通想法是聚合各大平臺新聞，省得一個個開啟。但今日頭條、騰訊新聞等已經做得很好了。
+
+小明橫向切分後發現，金融分析師這個人羣有特殊需求：他們需要追蹤特定行業動態，但資訊太分散。縱向深挖他們的場景：早上看 overnight 美股動態、匯率變化；上午追蹤持倉公司的公告、行業新聞；下午研究潛在投資標的，需要大量行業資訊。
+
+重構後的產品叫"投研情報官"，定位是金融從業者的"資訊雷達和決策助手"。
+
+---
+
+#### 例子三：從"校園二手平臺"到"畢業清倉助手"
+
+普通想法是校園二手交易平臺。但閒魚、轉轉已經做得很好了。
+
+小明橫向切分後發現，畢業生這個人羣有特殊需求：東西太多，一個個賣太麻煩。縱向深挖他們的場景：畢業前一週就要離校，沒時間慢慢賣；不知道誰需要我的東西；議價、交貨、收款，太繁瑣。
+
+重構後的產品叫"畢業清倉助手"，定位是畢業生的"離校資產管家"。
+
+---
+
+### 本幕小結：小明的收穫
+
+透過第二幕，小明明白了：
+
+**1. 從自己出發**
+- 你自己就是使用者，天然理解這個羣體的痛點
+- 愛好是最好的起點，熱情是最好的驅動力
+
+**2. 橫向切分人羣**
+- 不要服務"所有人"，找到"最痛的那個人羣"
+- 越細分，越有機會，使用者付費意願越強
+
+**3. 縱向深挖場景**
+- 描述完整的使用者旅程：使用前、使用中、使用後
+- 找到情緒觸點：恐懼、焦慮、無助、孤獨……
+
+**4. 價值重構**
+- 從"功能"升級為"解決方案"
+- 從"工具"升級為"助手/管家/夥伴"
+
+---
+
+📦 **本幕輸出：**
+- 找到了一個精準的目標使用者（產後媽媽）
+- 理解了使用者的完整場景和真實情緒
+- 重構了產品概念，有了明確的差異化定位
+
+---
+
+## 第三幕：AI對話打磨
+
+小明現在有了一個明確的產品方向：產後媽媽恢復助手。但他還是不知道具體怎麼做，從哪裡開始，技術實現難度大不大。
+
+他決定用 AI 來幫助自己打磨產品概念，把想法變成可執行的計劃。
+
+### 第一輪：丟擲原始想法
+
+小明把他的想法告訴 AI："我想做一個產後媽媽恢復助手 APP，幫助產後媽媽恢復身材。但我擔心技術實現難度，特別是 AI 動作糾正這個功能，我一個人能做嗎？"
+
+---
+
+### 第二輪：AI 幫助規劃 MVP
+
+AI 回覆說："很好的問題！讓我們做一個 MVP（最小可行產品）規劃。"
+
+AI 建議分三個階段來做。第一階段是 1-2 個月，目標是驗證需求。不做 APP，先做一個微信小程式，只提供產後專屬課程（影片）和打卡社羣。用人工方式提供動作指導，使用者上傳影片，教練回覆。目標是驗證產後媽媽是否願意付費。
+
+第二階段是 3-6 個月，如果第一階段驗證成功，就增加核心功能。開發 AI 動作糾正，可以用現成的 SDK，比如百度人體識別。增加個性化方案，最佳化社羣功能。
+
+第三階段是 6-12 個月，規模化。開發獨立 APP，與產後康復機構合作，拓展到孕期、備孕期。
+
+關於技術實現，AI 建議 AI 動作糾正使用現成的 AI 能力，比如百度、騰訊的 API，不需要從零開發，降低成本。前期用人工加 AI 混合模式，逐步過渡。
+
+啟動成本方面，小程式開發 1-2 萬（外包）或自己用 AI IDE 做，內容製作找產後康復教練合作，推廣從媽媽羣、小紅書開始。
+
+驗證指標是第一個月 100 個使用者，10% 付費轉化率。如果達到，說明需求真實，繼續投入；如果達不到，及時調整方向。
+
+---
+
+### 第三輪：小明提出擔憂
+
+小明想了想，又問："我擔心內容製作的問題。產後康復課程需要專業指導，我沒有醫學背景，怎麼保證課程質量？"
+
+---
+
+### 第四輪：AI 提供解決方案
+
+AI 回覆說："這是很多技術型創業者的擔憂，但有解決方案。"
+
+方案一是與專業人士合作。找產後康復教練、醫院營養科醫生合作，你提供技術和產品，他們提供專業內容，可以採用分成模式。
+
+方案二是整合現有優質內容。初期可以用公開的產後康復影片，比如 YouTube、B站上的。自己做內容稽覈和整理，後期再製作原創內容。
+
+方案三是使用者生成內容。鼓勵有經驗的媽媽分享自己的恢復方法，用社羣投票的方式篩選優質內容，逐步建立內容生態。
+
+AI 建議先用方案一。具體操作是：找到 2-3 位產後康復教練，與他們談合作，你開發產品，他們提供課程。收入分成，你拿 70%，他們拿 30%。這樣既能保證內容質量，又能降低成本。前期課程製作 0 元，用分成模式，你只需要投入開發時間和推廣成本。
+
+**我的建議：先用方案一**
+
+具體操作：
+1. 找到 2-3 位產後康復教練
+2. 與他們談合作：你開發產品，他們提供課程
+3. 收入分成：你拿 70%，他們拿 30%
+4. 這樣既能保證內容質量，又能降低成本
+
+**前期成本：**
+- 課程製作：0 元（用分成模式）
+- 你只需要投入開發時間和推廣成本
+
+:::
+
+---
+
+### 第五輪：小明問推廣問題
+
+小明還有最後一個擔憂："推廣成本會不會很高？怎麼找到產後媽媽這個羣體？"
+
+---
+
+### 第六輪：AI 提供推廣策略
+
+AI 回覆說："產後媽媽這個羣體其實很好找，推廣成本可以很低。"
+
+最推薦的是小紅書。搜尋"產後恢復"、"腹直肌分離"等關鍵詞，找到相關博主，私信合作。用"免費體驗 1 個月"的方式換取推廣，成本幾乎為 0。
+
+其次是媽媽羣。搜尋微信羣、QQ 羣，以"產後恢復經驗分享"的名義進羣，分享乾貨內容，不要直接廣告，逐步建立信任。
+
+還可以和醫院婦產科合作，提供免費的產後恢復指導，在醫院發放宣傳單，成本就是印刷費幾百元。或者和母嬰店合作，放置宣傳物料，購買母嬰產品贈送體驗卡，成本就是體驗卡製作費。
+
+驗證指標是：第一個月 100 個使用者，10 個付費使用者（10% 轉化率），總推廣成本小於 1000 元，獲客成本小於 10 元每人。如果能達到這個指標，說明需求真實，可以繼續投入。
+
+---
+
+### 最終：小明有了清晰的計劃
+
+經過 6 輪對話，小明終於有了清晰的計劃。
+
+第一階段是 1-2 個月：做一個微信小程式，找 2-3 位產後康復教練合作（分成模式），只提供產後專屬課程（影片）和打卡社羣，用人工方式提供動作指導。目標是 100 個使用者，10% 付費轉化率。
+
+第二階段是 3-6 個月：如果第一階段驗證成功，繼續投入。增加 AI 動作糾正功能，增加個性化方案，最佳化社羣功能。
+
+第三階段是 6-12 個月：開發獨立 APP，與產後康復機構合作，拓展到孕期、備孕期。
+
+啟動成本很低：開發自己用 AI IDE 做（0 元），內容與教練分成（前期 0 元），推廣用小紅書加媽媽羣（小於 1000 元）。總成本小於 1000 元。
+
+---
+
+### AI 對話打磨的5步法
+
+透過這個案例，小明總結出了一個與 AI 對話的標準流程（詳細內容見附錄E）。
+
+**第一步：丟擲原始想法。** 描述你的初步想法，哪怕很粗糙也沒關係。告訴 AI 你的擔憂，比如競爭激烈、不知道怎麼差異化等。
+
+**第二步：讓 AI 幫你規劃 MVP。** 最小可行產品應該包含什麼功能？分幾個階段？每個階段的目標是什麼？技術實現難度大嗎？
+
+**第三步：提出你的擔憂。** 技術實現難度？內容製作成本？推廣成本？使用者獲取難度？把你的顧慮都告訴 AI。
+
+**第四步：讓 AI 提供解決方案。** 針對你的擔憂，AI 會給出具體建議。多個方案對比，選擇最優。成本估算。
+
+**第五步：最終確認計劃。** 整理一個清晰的行動計劃，設定驗證指標。如果達不到，及時調整方向。
+
+**提示詞模板：**
+```
+我想做一個 [產品概念]，
+但我擔心 [你的擔憂]。
+請幫我：
+1. 規劃一個 MVP
+2. 給出具體的技術實現建議
+3. 估算成本
+4. 設定驗證指標
+```
+
+---
+
+### 本幕小結：小明的收穫
+
+透過第三幕，小明明白了三件事。
+
+**第一，用 AI 對話打磨產品概念。** 不要期待一次對話就得到完美答案，多輪迭代。告訴 AI 你的觀察、經歷、身邊人的反饋。如果 AI 的建議不合理，及時指出。最後一定要落到具體的行動計劃。
+
+**第二，MVP 的核心原則。** 最小化，只做最核心的功能。可驗證，能夠快速驗證需求是否真實。低成本，用最低的成本驗證。
+
+**第三，驗證指標。** 付費轉化率大於 10%，說明需求真實，值得投入。付費轉化率 5-10%，說明需求存在，但需要打磨。付費轉化率小於 5%，說明需求不成立，及時調整。
+
+---
+
+📦 **本章輸出：**
+- 有了清晰的 MVP 計劃
+- 知道了技術實現路徑
+- 設定了驗證指標
+
+---
+
+## 終章：你的行動
+
+### 記憶口訣
+
+**一人一事一切入，橫切縱挖找痛點，AI對話磨概念，五步驗證再動手**
+
+**解釋：**
+- **一人：** 從你自己出發，你天然理解這個羣體
+- **一事：** 聚焦一件具體的事情，不要貪多
+- **一切入：** 找到切入點，越細分越好
+- **橫切：** 橫向切分人羣，找到最有付費意願的使用者
+- **縱挖：** 縱向深挖場景，理解使用者的完整旅程
+- **AI對話：** 用 AI 對話打磨產品概念
+- **五步驗證：** 用 5 步判斷法驗證需求真偽
+
+---
+
+### 課後練習
+
+選擇一個你日常生活中的小麻煩，用本章的方法進行擴充套件：
+
+::: tip 練習任務
+
+**1. 描述這個麻煩**（1 句話）
+- 例子："我想做一個記賬 APP，幫助使用者記錄消費"
+
+**2. 橫向切分：找出 3 個可能有不同需求的人羣**
+- 例子：小微企業主、留學生家長、自由職業者
+
+**3. 選擇一個人羣，縱向深挖：描述他們的完整場景和真實情緒**
+- 例子：留學生家長的場景——想知道孩子在外國花了多少錢，但孩子不說
+
+**4. 重構產品概念：從"一個功能"進化為"一個解決方案"**
+- 例子："留學資金管家"——不只是記賬，而是讓家長對孩子的海外消費"心中有數"
+
+**5. 用驗證清單評估你的想法**（見附錄F）
+
+**把你的分析分享到社羣，和其他學員討論！**
+
+:::
+
+---
+
+## 附錄：SOP 方法論
+
+### 附錄A：需求分析的5步判斷法
+
+當你有一個想法時，如何快速判斷它是否值得投入？
+
+**第一步：使用者驗證——找到10個目標使用者**
+
+**不要問：**"你會用我的產品嗎？"（假陽性率90%）
+
+**要問：**
+1. "你現在怎麼解決這個問題？"（瞭解真實行為）
+2. "最近一週，這個問題讓你困擾了幾次？"（瞭解頻率）
+3. "為瞭解決它，你花了多少錢/時間？"（瞭解付費意願）
+4. "如果有個解決方案，但需要改變習慣，你願意嗎？"（瞭解改變成本）
+
+**判斷標準：**
+- 如果有3個以上使用者說"我每天都在為這事頭疼"——可能是痛點
+- 如果使用者說"挺有意思，但我不著急"——大機率是癢點
+- 如果使用者說"我現在用XX解決，但不太滿意"——有機會
+
+**關鍵問題：**使用者現在用什麼方法解決這個問題？
+
+| 替代方案型別 | 說明 | 機會判斷 |
+|------------|------|---------|
+| **沒有替代方案** | 使用者默默忍受 | 大機會，但需要教育市場 |
+| **用很笨的方法** | Excel、手工、多人協作 | 好機會，使用者渴望更好的方案 |
+| **用多個工具拼湊** | A工具+B工具+C工具 | 好機會，整合有價值 |
+| **用成熟產品** | 但使用者不滿意 | 有機會，但需要差異化 |
+| **用成熟產品** | 使用者很滿意 | 機會很小，除非有顛覆式創新 |
+
+::: tip 什麼是"顛覆式創新"？
+
+**簡單定義：** 不是把產品做得更好，而是用更簡單/便宜的方式，服務之前被忽視的使用者羣體。
+
+**例子：**
+- 傳統手機 → 智慧手機（不是功能更多，而是互動方式完全不同）
+- 傳統計程車 → 滴滴（不是車更好，而是讓叫車變得隨時隨地）
+- 傳統書店 → 電子書（不是書更多，而是讓攜帶和購買更方便）
+
+**關鍵：** 顛覆式創新往往從"低端市場"或"新使用者羣體"開始，逐步向上侵蝕。
+
+:::
+
+**案例：**
+- 糖尿病患者現在用"經驗+猜測"控制飲食（很笨的方法）——機會大
+- 普通減肥者用薄荷健康（成熟產品，滿意度中等）——有機會做細分
+- 學生用微信羣做二手交易（多個工具拼湊）——有機會做整合
+
+**最有效的方法：預售或定金**
+
+**操作步驟：**
+1. 做一個簡單的落地頁，描述你的產品概念
+2. 放上"預售"或"預約"按鈕
+3. 看有多少人願意付錢（哪怕只是1元）
+
+**判斷標準：**
+- 願意付定金的使用者 > 10%：需求真實，值得做
+- 願意付定金的使用者 5-10%：需求存在，但需要打磨
+- 願意付定金的使用者 < 5%：需求不成立，或產品概念有問題
+
+**注意：**說"我會買"的人很多，真正掏錢的人才是你的目標使用者。
+
+**簡單公式：**
+```
+潛在市場規模 = 目標使用者數量 × 付費意願 × 客單價
+```
+
+**案例：校園二手交易平臺**
+- 目標使用者：全國大學生 4000萬
+- 有二手交易需求的：50% = 2000萬
+- 願意用平臺的：10% = 200萬
+- 年交易頻次：2次
+- 平臺抽成：5%
+- 平均客單價：100元
+- 潛在市場規模 = 200萬 × 2 × 100 × 5% = 2000萬/年
+
+**判斷標準：**
+- 市場規模 > 10億：大賽道，值得做
+- 市場規模 1-10億：中小賽道，可以做但天花板明顯
+- 市場規模 < 1億：小眾市場，適合副業或小而美
+
+**關鍵問題：**如果產品做起來了，別人抄襲怎麼辦？
+
+**常見的護城河型別：**
+
+| 護城河型別 | 說明 | 例子 |
+|-----------|------|------|
+| **網路效應** | 使用者越多，產品價值越大 | 微信、滴滴 |
+| **資料積累** | 資料越多，演算法越準 | 今日頭條、抖音 |
+| **品牌認知** | 使用者心智佔領 | 可口可樂、耐克 |
+| **規模效應** | 規模越大，成本越低 | 京東物流、亞馬遜 |
+| **技術專利** | 核心技術壁壘 | 華為、大疆 |
+| **轉換成本** | 使用者遷移成本高 | 企業軟體、作業系統 |
+
+**早期專案的現實：**
+- 大部分早期專案沒有明顯的護城河
+- 但不要緊，關鍵是<strong>跑得快</strong>
+- 先佔領市場，再建立壁壘
+
+---
+
+### 附錄B：橫向切分人羣方法
+
+不要試圖服務"所有XX使用者"，而是找到<strong>一個特定的人羣</strong>，他們的需求更痛、更具體。
+
+**第一步：列出所有可能的細分人羣**
+
+針對你的產品概念，列出所有可能的人羣。
+
+**第二步：評估每個人羣的商業價值**
+
+| 評估維度 | 說明 |
+|---------|------|
+| 痛點強度 | 這個人羣的需求是痛點還是癢點？ |
+| 付費意願 | 願意為解決方案付多少錢？ |
+| 市場規模 | 這個人羣有多少人？ |
+| 競爭程度 | 現有解決方案是否令人滿意？ |
+| 你對人羣的理解 | 你是否理解這個人羣？是否有接觸渠道？ |
+
+**第三步：選擇一個人羣深入分析**
+
+選擇一個：
+- 痛點最痛
+- 付費意願最強
+- 你最理解
+- 競爭相對不激烈
+
+的人羣。
+
+::: tip 切分示例
+
+**產品概念：** 記賬 APP
+
+| 細分人羣 | 痛點 | 付費意願 | 市場規模 | 競爭程度 |
+|---------|------|---------|---------|---------|
+| 普通上班族 | 記錄麻煩 | 低 | 大 | 高 |
+| 小微企業主 | 個人/公司支出混淆 | 高 | 中 | 中 |
+| 自由職業者 | 收入不穩定，需要預測現金流 | 高 | 中 | 中 |
+| 留學生家長 | 想知道孩子花多少錢，但孩子不說 | 高 | 小 | 低 |
+
+**選擇：** 留學生家長（痛點最痛，付費意願高，競爭相對不激烈）
+
+:::
+
+---
+
+### 附錄C：縱向深挖場景方法
+
+找到人羣后，不要停留在單一功能，而是要理解使用者的<strong>完整場景</strong>。
+
+**第一步：描述使用者的一天**
+
+從早到晚，描述使用者在使用你的產品時的完整場景。
+
+**第二步：分析每個場景的痛點**
+
+在每個場景中，使用者遇到了什麼問題？有什麼情緒？
+
+**第三步：找到情緒觸點**
+
+恐懼、焦慮、無助、孤獨、憤怒、後悔……
+
+**第四步：重構價值**
+
+基於場景和情緒，重構產品價值。
+
+::: tip 深挖示例
+
+**人羣：** 產後媽媽
+
+| 時間 | 場景 | 痛點 | 情緒 |
+|------|------|------|------|
+| 早上6點 | 寶寶剛睡著，有30分鐘空閒 | 不知道做什麼動作安全 | 恐懼 |
+| 上午10點 | 抱著寶寶哄睡，腰很酸 | 手沒空，想做修復運動 | 焦慮 |
+| 下午3點 | 寶寶睡覺，想運動 | 身體很累，不知道還能不能做 | 無助 |
+| 晚上8點 | 終於有空了 | 看著鏡子裡的自己，覺得人生完蛋了 | 抑鬱 |
+| 長期 | 沒人理解 | 覺得只有自己這麼痛苦 | 孤獨 |
+
+**重構價值：** 從"健身工具"升級為"康復教練+心理支持者"
+
+:::
+
+---
+
+### 附錄D：更多從普通idea到好點子的例子
+
+#### 例子一：從"記賬APP"到"留學資金管家"
+
+**普通想法：** 自動記賬 APP，連線銀行卡自動分類消費
+
+**問題：** 市面上已經有隨手記、挖財、支付寶賬單……
+
+**橫向切分：**
+- 留學生家長：想知道孩子在外國花了多少錢，是否超支
+
+**縱向深挖：**
+- 痛點不是"記賬"，而是<strong>"失控感"</strong>——孩子花多少錢不知道、花在哪裡不知道
+- 場景：每個月看到信用卡賬單，但孩子從來不主動說花了什麼
+
+**重構後：** "留學資金管家"——不只是記賬，而是讓家長對孩子的海外消費"心中有數"
+
+**核心功能：**
+- 子女消費實時同步
+- 超支預警
+- 每月消費分析報告
+- 同類學生消費對比（"你家孩子比平均水平多花 20%"）
+
+---
+
+#### 例子二：從"番茄鍾工具"到"遠端工作證明"
+
+**普通想法：** 番茄鍾 APP，幫助使用者專注工作
+
+**問題：** 手機自帶螢幕使用時間、Forest、番茄 ToDo……
+
+**橫向切分：**
+- 遠端工作者：需要向老闆證明"我真的在工作"
+
+**縱向深挖：**
+- 痛點不是"不專注"，而是<strong>"信任危機"</strong>——老闆看不到我，怎麼證明我在工作？
+- 場景：每天下班，老闆問"今天工作怎麼樣？"，沒法證明
+
+**重構後：** "遠端工作證明"——幫遠端工作者建立與僱主的信任
+
+**核心功能：**
+- 自動工作時間追蹤
+- 生產力報告
+- 螢幕活動摘要（隱私保護版）
+- 每天自動生成"工作報告"，傳送給上級
+
+---
+
+#### 例子三：從"二手書交易"到"繪本圖書館"
+
+**普通想法：** 二手書交易平臺
+
+**問題：** 多抓魚、閒書、孔夫子舊書網……
+
+**橫向切分：**
+- 寶媽羣體：孩子繪本看完就閒置，但買新的很貴
+
+**縱向深挖：**
+- 痛點不是"買書貴"，而是<strong>"繪本生命週期短"</strong>——孩子3歲看的書，4歲就不看了
+- 場景：家裡堆滿了繪本，孩子都不看了，但扔掉可惜
+
+**重構後：** "繪本圖書館送到家"——不是賣二手書，而是提供繪本的"使用權租賃"
+
+**核心功能：**
+- 繪本訂閱制（每月寄5本適齡繪本，看完寄回換新的）
+- 閱讀進度追蹤
+- 適齡推薦
+- 消毒保障
+
+---
+
+### 附錄E：AI對話打磨產品概念的5步法
+
+透過多輪 AI 對話，把普通的 idea 逐步打磨成可落地的精準產品概念。
+
+**操作：**
+- 描述你的初步想法（哪怕很粗糙）
+- 告訴 AI 你的擔憂（競爭激烈、不知道怎麼差異化等）
+
+**提示詞：**
+```
+我想做一個 [產品概念]，
+但我發現 [問題/擔憂]。
+```
+
+**操作：**
+- 讓 AI 幫你制定最小可行產品計劃
+- 討論技術實現難度和成本
+- 設定驗證指標
+
+**提示詞：**
+```
+請幫我：
+1. 規劃一個 MVP
+2. 給出具體的技術實現建議
+3. 估算成本
+4. 設定驗證指標
+```
+
+**操作：**
+- 技術實現難度？
+- 內容製作成本？
+- 推廣成本？
+- 使用者獲取難度？
+
+**提示詞：**
+```
+我擔心：
+1. [擔憂1]
+2. [擔憂2]
+3. [擔憂3]
+```
+
+**操作：**
+- 針對你的擔憂，給出具體建議
+- 多個方案對比，選擇最優
+- 成本估算
+
+**提示詞：**
+```
+針對我的擔憂，請給出具體的解決方案。
+```
+
+**操作：**
+- 整理一個清晰的行動計劃
+- 設定驗證指標
+- 如果達不到，及時調整方向
+
+**提示詞：**
+```
+請幫我整理一個清晰的行動計劃。
+```
+
+::: tip 關鍵技巧
+
+- **多輪對話：** 不要期待一次對話就得到完美答案，多輪迭代
+- **提供資訊：** 告訴 AI 你的觀察、經歷、身邊人的反饋
+- **質疑 AI：** 如果 AI 的建議不合理，及時指出
+- **聚焦執行：** 最後一定要落到具體的行動計劃
+
+:::
+
+---
+
+### 附錄F：需求驗證清單
+
+在決定投入時間開發之前，用以下清單驗證你的想法——<strong>核心問題是：使用者會為此買單嗎？</strong>
+
+::: tip 需求驗證清單
+
+**1. 使用者畫像清晰度**
+- ☐ 能否用一句話描述目標使用者？
+- ☐ 能否說出他們目前的替代方案是什麼？
+- ☐ 能否描述他們使用場景的具體細節？
+- ☐ 這個人羣有付費能力嗎？
+
+**2. 痛點強度評估**
+- ☐ 使用者現在解決這個問題要付出什麼代價？（時間/金錢/精力）
+- ☐ 如果不解決這個問題，會有什麼後果？
+- ☐ 使用者是否已經在尋找解決方案？
+- ☐ 使用者願意為解決這個問題付多少錢？
+
+**3. 解決方案差異化**
+- ☐ 和現有方案相比，你的優勢是什麼？
+- ☐ 這個優勢是否足夠讓使用者願意切換？
+- ☐ 大平臺要複製你的功能，難度大嗎？
+- ☐ 你的差異化是否足以支撐使用者付費？
+
+**4. 商業模式可行性**
+- ☐ 使用者願意為此付費嗎？付多少？（一定要實際測試）
+- ☐ 獲客成本大概是多少？
+- ☐ 使用者生命週期價值（LTV）能否覆蓋獲客成本（CAC）？
+- ☐ 有沒有其他變現方式？（廣告、增值服務、B端等）
+
+**5. 快速驗證方案**
+- ☐ 能否用最小成本（1-2 周）做出可測試的原型？
+- ☐ 能否找到 10 個目標使用者進行訪談？
+- ☐ 能否設計一個實驗驗證核心假設？
+- ☐ 能否讓使用者預付定金驗證付費意願？
+
+:::
+
+<strong>不要問"你會用這個產品嗎？"</strong> 這種問題得到的都是假陽性回答。
+
+<strong>要問：</strong>
+- "你現在怎麼解決這個問題？"（瞭解真實行為）
+- "最近一週，這個問題讓你困擾了幾次？"（瞭解頻率）
+- "如果有一個解決方案，但需要你改變現在的習慣，你願意嗎？"（瞭解改變成本）
+- "如果收費 XX 元，你會買嗎？"（瞭解付費意願）
+
+**最好的驗證：** 讓使用者預付定金。說願意付費的人很多，真正掏錢的人才是你的目標使用者。
+
+**關鍵指標：**
+- 願意付定金的使用者比例 > 10%：需求真實，值得投入
+- 願意付定金的使用者比例 5-10%：需求存在，但需要打磨
+- 願意付定金的使用者比例 < 5%：需求不成立，或產品概念有問題
+
+---
+
+## 本章小結
+
+在這一章，我們透過小明的故事，學習瞭如何用產品經理的視角審視產品想法——<strong>核心始終圍繞：使用者會為此買單嗎？</strong>
+
+::: info 核心要點
+
+**1. 真需求的三個標準：**
+- 使用者願意為之付費（最重要的標準）
+- 使用者願意為之改變行為
+- 沒有解決方案時使用者會損失很大
+
+**2. 從普通 idea 到有人買單的產品的路徑：**
+- <strong>橫向切分：</strong>找到特定人羣，越細分付費意願越強
+- <strong>縱向深挖：</strong>理解完整場景，解決情緒而不只是功能
+- <strong>價值重構：</strong>從工具進化為解決方案，建立付費理由
+
+**3. 避開假需求的陷阱：**
+- 解決偽痛點（癢點而非痛點）
+- 市場規模太小，無法支撐商業模式
+- 解決方案比問題還複雜
+
+**4. 驗證付費意願的方法：**
+- 找到 10 個目標使用者深度訪談
+- 讓使用者預付定金驗證真實意願
+- 願意付定金的使用者比例 > 10% 才值得投入
+
+**5. 用 AI 對話打磨產品概念：**
+- 多輪迭代，不斷最佳化
+- 聚焦執行，落到行動計劃
+- 設定驗證指標，及時調整
+
+:::
+
+**記住：** 好的產品經理不是憑空創造需求，而是發現那些<strong>被忽視、被低估、被錯誤滿足</strong>的真實需求，並找到讓使用者願意為之買單的方式。
+
+在下一章，我們將帶著經過驗證的想法，開始學習如何用 AI IDE 把它變成可互動的產品原型。
diff --git a/docs/zh-tw/stage-1/integrating-ai-capabilities/index.md b/docs/zh-tw/stage-1/integrating-ai-capabilities/index.md
new file mode 100644
index 0000000..812a575
--- /dev/null
+++ b/docs/zh-tw/stage-1/integrating-ai-capabilities/index.md
@@ -0,0 +1,808 @@
+---
+title: '給原型加上 AI 能力 - 接入文字與影象 API'
+description: '在已有 Web 原型中接入真實的 AI 能力：理解 API 的核心概念，學會找到 API Key 和官方示例；實戰整合 DeepSeek 文字模型與多種影象生成服務（SiliconFlow Qwen-Image、Recraft、Seedream），並掌握常用的模型選型方法。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>1 天</strong>'
+const relatedArticles =
+  relatedArticlesMap['zh-tw/stage-1/integrating-ai-capabilities'] ?? []
+</script>
+
+# 初級四：為原型注入 AI 能力
+
+## 章節導讀
+
+<ChapterIntroduction :duration="duration" :tags="['API', '文字模型', '文生圖', '原型整合']" coreOutput="原型接入 1 個文字模型 + 1 個影象模型（可選）" expectedOutput="可呼叫真實 API 的 AI 原型">
+
+在前面的章節中，我們完成了從<strong>找到好點子</strong>到<strong>做出產品原型</strong>的完整流程。但現在的原型還只是一個"殼子"——點選按鈕不會真的生成內容，頁面上的資料都是寫死的。
+
+還記得我們在第一章強調的嗎？<strong>我們要做"有人願意買單的產品"，而不是"看起來像樣的原型"。</strong> 真正的價值來自於產品能<strong>解決真實問題</strong>，而要做到這一點，原型必須能<strong>真正執行</strong>。
+
+這一章要讓原型<strong>"活"起來</strong>：我們會接入<strong>真實的 AI 能力</strong>，從拿到 API Key 開始，到讀懂官方文件、讓 AI IDE 幫你把介面整合進程式碼裡。你會以 <strong>DeepSeek 文字模型</strong>為例，學會怎麼讓應用<strong>真正呼叫大模型生成內容</strong>；如果感興趣，還可以<strong>選做影象生成的接入</strong>。
+
+學完這章，你的原型就<strong>不再是靜態演示</strong>，而是<strong>能呼叫真實 AI 能力、能解決真實問題的應用</strong>。
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: 'API 基礎', description: '理解核心概念與安全規範' },
+      { title: '接入文字', description: 'DeepSeek 文字生成實戰' },
+      { title: '接入圖片', description: 'VLM 影象理解與生成' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 1. API 基礎概念
+
+前面提到，我們的目標是「把 AI 能力接進來」，讓原型不再是靜態演示，而是能呼叫真實 AI 服務的工具。要實現這一點，關鍵就在於理解並使用 API（應用程式程式設計介面）。
+
+API 是計算機領域的一個重要抽象概念，我們可以簡單理解為：**你按對方要求的格式"發一個問題"，對方就按同樣的格式"回一個結果"**。
+
+- **你發出去的內容**：通常包括"金鑰（API Key）"和"你要生成什麼"
+- **對方回給你的內容**：成功就給結果；失敗會告訴你原因（比如"金鑰不對""餘額不足""引數寫錯"）
+
+具體來說，你需要掌握以下核心要素：
+
+1. **API Key**：你的"通行證"，也是"錢包鑰匙"。別人拿到它，就可以替你呼叫介面併產生費用。
+2. **Endpoint（介面路徑）**：API 請求的具體路徑，告訴伺服器你要訪問哪個功能。完整的請求地址通常由"基礎 URL + Endpoint路徑"構成。例如：
+   - 文字生成：基礎URL (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = 完整URL `https://api.service.com/v1/chat/completions`
+   - 影象生成：基礎URL (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = 完整URL `https://api.service.com/v1/images/generations`
+3. **呼叫/請求**：向 AI 服務傳送任務並獲取結果的過程
+4. **請求內容**：你發給AI的具體內容，比如你想讓AI寫的文章主題、生成的圖片描述等。
+5. **響應結果**：AI處理完後返回給你的內容，比如生成的文章、圖片等。
+6. **錯誤處理**：當出現問題時（如API Key錯誤、請求太頻繁等），知道如何排查解決。
+
+::: info ℹ️ 什麼是 API
+對於 API 的更深入的解釋，請看附錄：[API 入門](/zh-tw/appendix/4-server-and-backend/api-intro)。
+
+::: warning 🔐 **API 安全注意事項**
+API Key 是你請求 AI 服務的「通行證」，它是一串密碼字串，用於身份驗證和計費。
+
+由於 API Key 直接關聯賬戶和費用，務必注意：
+
+- 絕對**不要分享到羣聊、截圖上傳網路**或釋出在公開論壇
+- **不要硬編碼到程式碼中**並提交到 Git 倉庫（尤其是公開倉庫）
+- 如懷疑 Key 已洩露，**立即更換新 Key**
+
+我們會在下面的內容中**直接把 API KEY 貼上到 AI IDE 中進行操作**，**在正規的專案裡不要這麼做！！**，由於我們是練習可以這麼做。（等你更加熟練後，你能夠讓 AI 生成一個配置檔案，你只需要把 API KEY 放入配置檔案即可）
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: 'API 基礎', description: '理解核心概念與安全規範' },
+      { title: '接入文字', description: 'DeepSeek 文字生成實戰' },
+      { title: '接入圖片', description: 'VLM 影象理解與生成' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 2. 接入文字生成 API：DeepSeek
+
+雖然 API 涉及這些技術概念，但在原型開發階段，實際操作可以非常簡單高效。核心思路就是：
+
+> **找到官方示例、拿到 API Key、讓 AI IDE 幫你接到按鈕上。**
+
+掌握了這些概念後，你會發現無論是接入文字模型還是影象模型，其本質流程都是一樣的：當使用者點選按鈕時，前端整理輸入併發起請求；介面返回結果後，再把結果展示到頁面上。接下來，我們就透過實際操作來驗證這一點。
+
+在 `1.2 動手做出原型` 裡，你已經做出了一個可互動的原型。接下來我們要做的，是把原型裡“看起來像 AI 的功能”變成真正可用的能力：**當使用者點選按鈕時，原型會向外部的 AI 服務發出請求，並把返回的文字展示出來。**
+
+::: info ℹ️ 原理延伸
+如果你想了解更多原理相關的內容，請檢視附錄：[大語言模型（LLM）入門](/zh-tw/appendix/8-artificial-intelligence/llm-principles)。
+::: details 瞭解更多：DeepSeek 是什麼？
+
+**杭州深度求索人工智慧基礎技術研究有限公司**（Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.），以 DeepSeek 為商號，是一家**開發大語言模型（LLMs）的中國人工智慧（AI）公司**。DeepSeek 總部位於浙江杭州，由中國對沖基金幻方量化（High-Flyer）擁有並資助。DeepSeek 由幻方量化的聯合創始人梁文鋒於 2023 年 7 月創立，他也同時擔任這兩家公司的 CEO。該公司於 2025 年 1 月推出了同名聊天機器人及其 DeepSeek-R1 模型。
+
+讓我們看看 DeepSeek 在 GPQA 基準排名中與其他頂級模型的表現對比。值得注意的是，DeepSeek 是一個開源（每個人都可以從網際網路下載模型）模型，而其他常見模型如 Grok、Google Gemini 和 ChatGPT 都是閉源的。正如我們所見，DeepSeek 已經很大程度上接近了第一梯隊的模型。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png)
+
+GPQA 是“研究生級 Google-Proof 問答基準”的縮寫，這是一個用於科學問答任務的研究生級基準。以下是詳細介紹。
+
+GPQA 包含 448 個多項選擇題，涵蓋生物學、物理學和化學的子領域，如量子力學、有機化學、分子生物學等。這些問題由 61 位持有博士學位或正在攻讀博士學位的專家編寫，並經過了嚴格的驗證過程。
+:::
+
+跟著這 3 步走，就能實現大模型生成 API 的快速整合：
+
+1. **在 DeepSeek 平臺建立一個 API Key**
+2. **在 DeepSeek 文件中找到文字生成示例**（通常有現成程式碼可直接複製）
+3. **開啟 AI IDE，把 API Key + 官方示例貼上進去**，告訴 AI 要實現什麼功能：
+   > 幫我接入這個大模型的 API ，支援這個應用的文案生成任務
+
+接下來我們進行演示，你可以跟隨操作走一遍全流程。首先註冊 [DeepSeek](https://platform.deepseek.com/usage) 賬號並建立一個 API Key，並且充值少量費用進行驗證。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png)
+
+點選“API KEYS”並在螢幕下方找到“create new API key”。你最終會得到一個像 sk-8573341c39fc44315aadc071c53rh7d2 這樣的 API key。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png)
+
+一旦你獲得了金鑰，你就擁有了呼叫模型的許可權。
+
+此時，你可以直接閱讀 [API](https://api-docs.deepseek.com/) 文件，它通常提供 curl 或 Python 的呼叫示例。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png)
+
+找到示例後，你可以將文件中的所有內容以及金鑰複製到 AI IDE 的對話方塊中，要求它幫你整合大語言模型到之前已經開發的原型中。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png)
+
+使用提示詞參考如下：
+
+```
+參考這個呼叫方法，幫我支援文案生成功能，可以基於商品資訊點選後生成對應抖音電商文案，多種風格。
+
+以下參考資料：
+api key：sk-8573341c39aefa1efe
+api 請求參考：
+curl  \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
+  -d '{
+        "model": "deepseek-chat",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+經過一段時間的 AI 程式碼生成，我們很容易得到對應的文案生成按鈕進行測試，如果你找不到入口，可以讓 AI IDE 告訴你從什麼頁面可以點到該頁面，如果實在找不到，可以讓 AI IDE 直接基於你的想法重構改進，得到最後的文案生成結果。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png)
+
+當然，此處你可能想問，我怎麼知道真正呼叫了大模型而不只是內建了固定的回覆？你可以輸入自定義的文案，讓大模型根據你及時指定的自定義分析，生成對應的文案。
+
+如果發現每次不一樣並且合乎邏輯，你可以放心認為此時已經正常呼叫 API 生成。你也可以在 [API 使用管理平臺](https://platform.deepseek.com/usage)檢視是否成功呼叫（雖然可能需要等幾分鐘才能看到）。
+
+## 更多文字生成模型選型
+
+除了 DeepSeek 之外，你也可以嘗試其他大語言模型。由於大多數模型都提供了 **OpenAI 相容介面**，切換起來非常簡單——只需要更換 API Key、基礎 URL 和模型名稱即可。
+
+### MiniMax 整合
+
+::: details 瞭解更多：MiniMax 是什麼？
+
+**MiniMax** 是一家中國人工智慧公司，致力於通用人工智慧技術的研發。MiniMax 推出了自研的 MiniMax-M2.7 大語言模型系列，在多項基準測試中表現優異，具有極高的價效比。
+
+**MiniMax-M2.7 系列的主要特點：**
+
+- **超長上下文**：支援 204,800 tokens 的上下文視窗，適合處理長文件、多輪對話
+- **高價效比**：價格極具競爭力
+- **OpenAI 相容介面**：可以直接使用 OpenAI SDK 呼叫，無需額外學習新的 API 格式
+- **兩個可用模型**：
+  - `MiniMax-M2.7`：旗艦模型，適合複雜任務
+  - `MiniMax-M2.7-highspeed`：高速版本，保持同樣的效能但更快
+:::
+
+接入方式與 DeepSeek 一致，只需要三步：
+
+1. 前往 [MiniMax 開放平臺](https://platform.minimax.io/) 註冊賬號並建立 API Key
+2. 在 MiniMax 文件中找到呼叫示例
+3. 把 API Key + 示例貼上到 AI IDE 中
+
+由於 MiniMax 提供了 OpenAI 相容介面，你可以直接複製下面的 curl 示例和你的 API Key，發給 AI IDE 進行整合：
+
+```bash
+curl https://api.minimax.io/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer ${MINIMAX_API_KEY}" \
+  -d '{
+        "model": "MiniMax-M2.7",
+        "messages": [
+          {"role": "system", "content": "You are a helpful assistant."},
+          {"role": "user", "content": "Hello!"}
+        ],
+        "stream": false
+      }'
+```
+
+::: tip ✅ 提示
+MiniMax 的 API 格式與 DeepSeek 幾乎完全一致（都是 OpenAI 相容格式），所以如果你已經成功接入了 DeepSeek，切換到 MiniMax 只需要修改三個地方：
+1. **基礎 URL**：改為 `https://api.minimax.io/v1`
+2. **API Key**：使用 MiniMax 的 API Key
+3. **模型名稱**：改為 `MiniMax-M2.7` 或 `MiniMax-M2.7-highspeed`
+
+更多資訊請參考 [MiniMax OpenAI 相容介面文件](https://platform.minimax.io/docs/api-reference/text-openai-api)。
+:::
+
+# 3. 接入影象轉文字 API：Qwen3 VL
+
+::: info ℹ️ 原理延伸
+如果你想了解更多原理相關的內容，請檢視附錄：[視覺語言模型（VLM）入門](/zh-tw/appendix/8-artificial-intelligence/multimodal-models)。
+
+::: details 瞭解更多：Qwen3 VL 是什麼？
+
+**Qwen3 VL** 是阿里雲通義千問團隊推出的多模態視覺語言模型系列中的最新版本。VL 代表「Vision-Language」，即視覺語言模型。它能夠理解影象內容，並根據影象生成文字描述、回答關於影象的問題、提取影象資訊等。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png)
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png)
+
+**Qwen3 VL 的主要能力包括：**
+
+- **影象理解**：能夠識別圖片中的物體、場景、人物、文字等內容
+- **視覺問答**：根據使用者提問，準確回答關於影象的問題
+- **影象描述**：生成詳細或簡潔的影象文字描述
+- **多圖理解**：支援同時處理多張影象，進行對比分析
+- **文字提取**：從影象中提取文字內容（OCR 能力）
+
+**為什麼選擇 Qwen3 VL？**
+
+相比上一代模型，Qwen3 VL 在影象理解準確性上有顯著提升，支援更長、更復雜的影象分析任務。它在中文理解方面表現優異，API 呼叫成本相對較低，價效比較高。此外，它的上下文視窗更大，能處理更復雜的視覺推理任務。
+
+**典型應用場景：**
+
+- 電商：商品圖片自動生成標題、描述、賣點
+- 內容創作：根據素材圖自動生成文案或配圖建議
+- 辦公：圖片內容提取、報表自動識別
+- 教育：圖片題目自動解析、知識點提取
+
+:::
+
+在前面的部分我們說明瞭如何接入文字生成 API， 但對於前面的應用場景我們會發現一個問題，我們上傳的是一張圖片，如果只用大語言模型，它沒辦法很好的理解圖片中的內容，生成的結果很可能會有差別。
+
+我們希望有一個模型能夠幫助我們把一個圖片變成文字描述，這就需要用到視覺語言模型（VLM）。在案例中，我們將會使用視覺語言模型生成商品的賣點描述，提升使用者體驗。
+
+為了方便，我們使用[雲平臺 SiliconFlow](https://cloud.siliconflow.cn/me) 提供的 API 介面進行圖生文 API 的接入。
+
+::: details 瞭解更多：什麼是 Siliconflow
+**矽基流動（SiliconFlow）** 是國內知名的 AI 模型聚合平臺，提供多種主流大語言模型和視覺語言模型的 API 介面服務。
+
+**平臺特點：**
+
+- **多模型支援**：整合多種主流 AI 模型，包括 DeepSeek、Qwen、Llama 系列等開源模型
+- **技術最佳化**：針對開源模型進行推理最佳化，提供低延遲、高併發的 API 服務
+- **介面相容**：提供相容 OpenAI 格式的 API 介面，便於現有應用整合
+- **按需付費**：支援按呼叫量計費的方式使用
+
+SiliconFlow 在開源大模型的推理服務方面較為成熟，是使用國產開源 AI 模型的常見選擇之一。
+:::
+
+進入到 SiliconFlow 平臺的首頁，我們可以看到有很多模型可以選擇，左上角找到篩選器，點選展開篩選器，選擇視覺標籤，我們能看到很多圖片轉文字模型，比如智譜 GLM-4.6V，或者是 Qwen3-VL。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png)
+
+我們可以選擇任意一個進行測試，這裡以 `Qwen/Qwen3-VL-8B-Instruct` 為例。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png)
+
+進入 [ SiliconFlow 平臺](https://cloud.siliconflow.cn/me/account/ak)，在 API 金鑰中點選「新建 API 金鑰」，建立一個新的 API Key。
+
+你可以直接使用下面的程式碼作為參考程式碼，和生成的 API Key 一起，傳送給 AI IDE ，進行功能整合。
+
+::: details 圖片轉文字參考程式碼
+
+```python
+from openai import OpenAI
+from typing import Dict, Any, List
+import base64
+import os
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
+MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
+
+def encode_image(image_path: str) -> str:
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode('utf-8')
+
+def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
+    response = client.chat.completions.create(
+        model=MODEL_NAME,
+        messages=messages,
+        max_tokens=512,
+        temperature=0.7,
+        top_p=0.7,
+        frequency_penalty=0.5,
+        stream=False,
+        n=1
+    )
+    return response.choices[0].message.content
+
+def caption_image(image_path: str) -> str:
+    base64_image = encode_image(image_path)
+    messages = [
+        {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Please describe this image in detail."
+                },
+                {
+                    "type": "image_url",
+                    "image_url": {
+                        "url": f"data:image/jpeg;base64,{base64_image}"
+                    }
+                }
+            ]
+        }
+    ]
+
+    client = OpenAI(
+        api_key=SILICONFLOW_API_KEY,
+        base_url=SILICONFLOW_BASE_URL
+    )
+
+    return get_vlm_completion(client, messages)
+
+image_path = "images.jpg"
+caption = caption_image(image_path)
+```
+
+:::
+
+在這個場景中，我們直接嘗試讓 AI IDE 幫我們實現將上傳的圖片，自動生成電商賣點文字、關鍵詞的功能，如下所示：
+
+```
+基於下面的圖生文介面 API ，幫我們實現將上傳的圖片，自動生成電商賣點文字、關鍵詞的功能
+
+<此處省略程式碼，你需要自行貼上金鑰和參考程式碼>
+```
+
+最後得到生成結果：
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: 'API 基礎', description: '理解核心概念與安全規範' },
+      { title: '接入文字', description: 'DeepSeek 文字生成實戰' },
+      { title: '接入圖片', description: 'VLM 影象理解與生成' }
+    ]" />
+  </ClientOnly>
+</div>
+
+# 4. 接入影象生成 API：Seedream 即夢
+
+在前面的部分我們主要和文字相關的任務打交道，接下來我們將嘗試接入圖片生成的功能，支援從文字描述生成圖片，或者對圖片進行修改。
+
+::: info ℹ️ 原理延伸
+如果你想了解更多原理相關的內容，請檢視附錄：[影象生成入門](/zh-tw/appendix/8-artificial-intelligence/image-generation)。
+
+::: details 瞭解更多：什麼是 [Seedream 即夢](https://seed.bytedance.com/en/seedream4_5)？
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png)
+
+> 也許你已經知道 Nano Banana（Google 開發），但你最好不要錯過 Seedream。Seedream 4.5 是位元組跳動打造的新一代影象創作模型。它將影象生成和影象編輯能力整合到一個統一的架構中。這使得它能夠靈活處理複雜的多模態任務，如基於知識的生成、複雜推理和參考一致性。此外，它的推理速度比前代產品快得多，並且可以生成解析度高達 4K 的令人驚歎的高畫質影象。
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png)
+
+**主要能力：**
+
+- **文生圖**：用文字描述生成圖片，支援多種風格（寫實、卡通、水墨、賽博朋克等）
+- **風格遷移**：將一張圖片轉換成指定的藝術風格
+- **影象變體**：基於參考圖生成相似風格的新圖
+- **解析度提升**：增強圖片清晰度和細節
+- **影象編輯**：在現有圖片上進行編輯和修改，透過自然語言指令
+
+**為什麼選擇 Seedream？**
+
+- **國內網路穩定**：國內訪問速度快，延遲低
+- **效果優秀**：在電商、素材場景下表現穩定可靠
+- **中文最佳化**：對中文提示詞理解更準確，適合國內使用者
+- **速度快**：生成效率高，響應時間短
+- **質量穩定**：生成解析度高達 4K 的高畫質影象
+
+**典型應用場景：**
+
+- 電商：生成主圖、詳情頁配圖、促銷海報
+- 社交媒體：生成頭像、表情包、配圖
+- 設計：快速出概念圖、素材圖、背景圖
+- 營銷：製作廣告圖、活動 banner、節日海報
+
+**與 Qwen3 VL 的配合：**
+
+這兩個 API 可以串聯使用：先用 Qwen3 VL 分析參考圖，理解畫面內容；再用 Seedream 基於分析參考圖的提示詞內容生成新圖片。
+:::
+
+你可能在抖音、B 站或 YouTube 上看到的很多 "AI 海報 / AI 主圖 / AI 角色圖"，本質上都是用到這部分介紹的技術。你需要做的事情很簡單：把使用者輸入整理成一句話，請求圖片 API，然後把返回的圖片展示出來。此時用到的模型叫做圖片生成 / 圖片編輯模型。
+
+我們將逐步演示如何將 Seedream API 整合到你的專案中（透過 AI IDE 輔助完成）。
+
+[訪問首頁頁面](https://www.volcengine.com/experience/ark?launch=seedream)後，點選登入。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png)
+
+登入後，找到頁面右上角的充值選項。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png)
+
+進行充值需要實名認證。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png)
+
+認證成功後，你可以[充值 1 元用於測試](https://console.volcengine.com/finance/fund/recharge)。
+
+返回[初始介面](https://www.volcengine.com/experience/ark?launch=seedream)並點選 API 訪問。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png)
+
+首先，建立一個 API key，然後點選選擇選項。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png)
+
+這將帶你進入第 2 步。在這裡，你需要確認呼叫的服務是 Seedream 4.5，並複製提供的呼叫示例。（此處截圖時間比較早起，故而模型版本仍然是 4.0）
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png)
+
+準備好 API Key 和呼叫示例後，你可以直接將它們貼上到 AI IDE 中，讓它生成前端互動演示或把能力接入現有原型。注意到在圖片中可以選擇是文生圖還是多張圖片生成單張圖，你需要根據當前的需求進行選擇參考程式碼。
+
+::: warning ⚠️ 重要提示
+這裡的預設示例相對複雜。記得禁用 **"新增水印"** 和 **"流式響應"**，以確保不生成水印且不會發生請求失敗。
+:::
+
+由於我們之後使用的是參考圖生成模式，我們先去的是多張圖生成單張圖的功能。參考程式碼複製如下：
+
+```
+curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer xxxxxxx" \
+  -d '{
+    "model": "doubao-seedream-4-5-251128",
+    "prompt": "將圖1的服裝換為圖2的服裝",
+    "image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
+    "sequential_image_generation": "disabled",
+    "response_format": "url",
+    "size": "2K",
+    "stream": false,
+    "watermark": true
+}'
+```
+
+有了影象參考程式碼後，我們讓 AI IDE 支援電商中常用的影象任務功能：
+
+```
+請你基於下面 API，幫我實現這個工程中，電商業務的常見功能（例如海報生成、抖音電商首圖生成等等）
+
+<此處貼上 API KEY以及影象編輯程式碼>
+```
+
+實現效果如下:
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png)
+
+值得注意的是，由於生成圖片可能會經常遇到一些奇怪的問題，建議你需要讓 AI IDE 能夠顯示完整的報錯資訊，方便複製貼上進行修改（否則可能會反覆顯示生成失敗但是不知道為什麼），例如你可以說：
+
+```
+不要只顯示圖片生成失敗，每次都顯示完整的失敗原因，比如圖片不匹配、請求錯誤、超時等等！
+```
+
+有時候修改後更新並不會應用到網頁中，如果你發現修改後網頁一直還在報錯（反覆多次），也可以試試直接對 AI IDE 說：請你重啟這個專案。
+
+在電商的業務中，我們可能會想讓使用者上傳的衣服能夠自動穿在人物身上，又或者是自動生成商品吸引人的售賣圖、海報。這裡我們嘗試的提示詞是讓它生成一個電商海報：
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png)
+
+你可以根據自己想象的業務場景，使用文生圖或者圖生圖 API 實現不同的功能。
+
+## 更多不同影象服務選型
+
+下面給出其他選擇。建議你先跑通 Qwen 生圖的結果，再根據效果與成本使用下列服務做替換（根據實際使用感受選擇）。
+
+### Recraft 整合
+
+如果你的原型更偏“設計生產”（例如生成品牌風格插畫、營銷海報、向量風格素材），Recraft 往往會更順手。接入方式與上一節完全一致：**拿到 Key + 找到官方示例 + 讓 AI IDE 把示例落到你的按鈕/頁面裡**。
+
+::: details 瞭解更多：什麼是 Recraft？
+
+> Recraft 是一款面向設計師、插畫師和營銷人員的 AI 工具——於 2022 年在美國成立，總部位於倫敦。它幫助生成/迭代視覺效果（影象、向量藝術、3D 圖形），具有高質量輸出（任何文字大小/長度）、精確元素定位和品牌一致性設計等優勢。受到 200 個國家/地區 300 多萬使用者（包括奧美、Netflix）的信任，並已建立了 3.5 億多張影象，其團隊旨在使其成為必備的設計師工具，確保創作者能夠控制他們的 AI 輔助工作流程。
+>
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png)
+> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png)
+
+首先，我們仍然需要找到[ API 入口](https://www.recraft.ai/profile/api)以獲取 API Key。
+
+由於這裡沒有提供免費額度，我們需要自己充值 1,000 積分。這個網站支援支付寶和微信支付，所以很容易獲得 1,000 積分（注意：不要充值超過必要的金額）。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png)
+
+之後，我們仍然遵循同樣的方法：去官方文件找到相應的請求示例：
+
+- <https://www.recraft.ai/docs/api-reference/getting-started>
+- <https://www.recraft.ai/docs/api-reference/usage>
+- <https://www.recraft.ai/docs/api-reference/guides>
+
+:::
+
+### Qwen Image / Qwen Image Edit 整合
+
+如果你希望使用更簡單的方式接入影象生成服務，可以考慮 Qwen Image（通義萬相）。思路同樣不變：把它當成一個"圖片生成 API"，接到你的原型按鈕上即可。
+
+::: details 瞭解更多：Qwen Image / Qwen Image Edit 是什麼？
+
+**Qwen Image**（也稱通義萬相）是阿里雲通義團隊推出的影象生成模型系列，主要包括兩大模型：
+
+**1. Qwen Image——文生圖（Text-to-Image）模型**
+
+根據文字描述生成全新的圖片。你輸入一段提示詞，模型會理解你的意圖並生成符合描述的影象。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png)
+
+**主要能力：**
+
+- **文生圖**：用文字描述生成圖片，支援多種風格（寫實、卡通、水墨、賽博朋克等）
+- **風格遷移**：將一張圖片轉換成指定的藝術風格
+- **影象變體**：基於參考圖生成相似風格的新圖
+- **解析度提升**：增強圖片清晰度和細節
+
+**2. Qwen Image Edit——圖生圖（Image-to-Image）模型**
+
+在現有圖片上進行編輯和修改。透過自然語言指令，讓模型理解你的修改意圖並生成結果。
+
+**主要能力：**
+
+- **區域性替換**：替換圖片中的某個物體或人物（如「把背景換成海邊」）
+- **元素移除**：去除圖片中不需要的元素
+- **風格轉換**：給圖片新增濾鏡或藝術效果
+- **影象擴充套件**：擴充套件圖片邊界，生成新內容
+- **智慧修圖**：自動美化、調整光影、修復瑕疵
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png)
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png)
+
+**為什麼選擇 Qwen Image 系列？**
+
+- **中文最佳化**：對中文提示詞理解更準確，適合國內使用者
+- **成本低**：相比國際競品，價格更實惠
+- **速度快**：生成效率高，響應時間短
+- **質量穩定**：在電商、素材場景下表現穩定可靠
+- **風格多樣**：支援多種藝術風格和創意效果
+
+**典型應用場景：**
+
+- 電商：生成主圖、詳情頁配圖、促銷海報
+- 社交媒體：生成頭像、表情包、配圖
+- 設計：快速出概念圖、素材圖、背景圖
+- 營銷：製作廣告圖、活動 banner、節日海報
+  :::
+
+檢視 [SiliconFlow](https://siliconflow.cn/) 的官網。左側有一個"Playground"部分，你可以在不進行 API 呼叫的情況下試用不同的模型。在網頁頂部有一個"Filters"按鈕；點選它可以篩選右側的模型列表。
+
+如果你選擇"Image"，你將只看到當前支援的所有文生圖模型。在這種情況下，我們將使用 Qwen/Qwen-Image。
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png)
+
+一切設定好後，我們需要參考相應的影象生成 API 文件。你可以在官方文件頁面找到任何標記為"API Reference"的部分。點選它，然後導航到[影象生成的 API 部分](https://docs.siliconflow.cn/cn/api-reference/images/images-generations)並找到相關的請求示例。
+
+你可以把下列請求示例和 API KEY 一起發給 AI IDE， 即可實現影象生成的功能。
+
+```bash
+curl --request POST \
+  --url https://api.siliconflow.cn/v1/images/generations \
+  --header 'Authorization: Bearer <token>' \
+  --header 'Content-Type: application/json' \
+  --data '
+{
+  "model": "Qwen/Qwen-Image-Edit-2509",
+  "prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
+}
+'
+```
+
+這裡的模型可以使用 Qwen/Qwen-Image 或者 Qwen/Qwen-Image-Edit-2509。
+
+::: details 影象編輯參考程式碼
+
+複製下列程式碼和 key，一起傳送給 AI IDE：
+
+```python
+import requests
+import os
+from typing import Dict, Any, Optional
+
+SILICONFLOW_API_KEY: str = ""
+SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
+QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
+
+def generate_image_edit(
+    prompt: str,
+    image: Optional[str] = None,
+    image2: Optional[str] = None,
+    image3: Optional[str] = None,
+    negative_prompt: Optional[str] = None,
+    cfg: Optional[float] = 4.0,
+    seed: Optional[int] = None
+) -> Optional[Dict[str, Any]]:
+    payload: Dict[str, Any] = {
+        "model": QWEN_IMAGE_EDIT_MODEL,
+        "prompt": prompt,
+    }
+    if image:
+        payload["image"] = image
+    if image2:
+        payload["image2"] = image2
+    if image3:
+        payload["image3"] = image3
+    if negative_prompt:
+        payload["negative_prompt"] = negative_prompt
+    if cfg is not None:
+        payload["cfg"] = cfg
+    if seed is not None:
+        payload["seed"] = seed
+
+    headers: Dict[str, str] = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.RequestException as e:
+        print(f"Error generating image: {e}")
+        return None
+
+def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
+    try:
+        response = requests.get(image_url)
+        response.raise_for_status()
+        os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
+        with open(output_path, "wb") as f:
+            f.write(response.content)
+        print(f"Image saved successfully to: {output_path}")
+        return True
+    except requests.exceptions.RequestException as e:
+        print(f"Error downloading image: {e}")
+        return False
+    except Exception as e:
+        print(f"Error saving image: {e}")
+        return False
+
+prompt: str = "讓天空變成傍晚，有月亮和星星，夢幻風格"
+negative_prompt: str = "模糊, 低質量, 扭曲"
+image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
+image2_url: Optional[str] = None
+image3_url: Optional[str] = None
+
+cfg: float = 4.0
+seed: int = 12345
+output_path: str = "edited_image.png"
+
+print(f"Generating edited image with prompt: {prompt}")
+print(f"Input image: {image_url}")
+print(f"CFG: {cfg}, Seed: {seed}")
+print("-" * 50)
+
+result = generate_image_edit(
+    prompt=prompt,
+    image=image_url,
+    image2=image2_url,
+    image3=image3_url,
+    negative_prompt=negative_prompt,
+    cfg=cfg,
+    seed=seed
+)
+
+if result and "images" in result:
+    images = result["images"]
+    if images and len(images) > 0:
+        image_url_result = images[0]["url"]
+        print(f"Image edit generated successfully. URL: {image_url_result}")
+        success = save_image_from_url(image_url_result, output_path)
+        if success:
+            print(f"Image saved to: {output_path}")
+        else:
+            print("Failed to save image to local file")
+    else:
+        print("No images found in response")
+else:
+    print("Image generation failed")
+    if result:
+        print(f"Response: {result}")
+```
+
+:::
+
+# 附錄：如何找到“當前更強”的 AI 模型
+
+文字模型（也常被叫作“大語言模型”）的發展速度非常快，我們總是需要確保我們用的是表現更好的模型之一。透過以下兩個網站，你可以很方便地看到“現在大家常用、評價也更好的模型”。
+
+一般來說，這類網站可以理解為 **“模型競技場”**：它會把兩個模型的輸出放在一起，你投票選你更喜歡的那個。票數高的模型，通常意味著更多人覺得它“更好用”。
+
+此外，你偶爾可能會在這些大模型競技場中看到神祕的匿名模型（“Unknown Model”）。這通常意味著：有人把“內部測試模型”悄悄放進來做盲測，你可能有機會提前體驗到更強的能力。
+
+## LMArena
+
+網站：<https://lmarena.ai/>
+
+LMArena 更適合用來判斷“多數人更偏好哪個模型的回答”。投票越多、分數越高，通常意味著它在真實使用場景裡更穩。
+
+一個簡單的用法是：
+
+1. 直接看排行榜（Leaderboard）
+2. 先選一個你要做的方向（例如通用對話 / 程式設計 / 視覺）
+3. 選 Top 3 裡你能用的那個（能訪問、價格能接受、延遲能接受）
+
+![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png)
+
+## Artificial Analysis
+
+網站：<https://artificialanalysis.ai/>
+
+Artificial Analysis 更適合把“效果 / 價格 / 速度”放在同一張表裡對比，你可以把它當作模型選型的參數列。
+
+常用的用法是：
+
+1. 找到你關心的模型類別（文字 / 生圖等）
+2. 看質量指標（Quality）+ 價格（Price）+ 延遲/吞吐（Latency/Throughput）
+3. 選一個“綜合價效比”最符合你產品的
+
+::: tip ✅ 建議
+不要憑感覺爭論“哪個更強”。更可靠的做法是：用同一組輸入同時測試 2~3 個模型，再結合榜單與價格做決定。
+:::
+
+## 總結
+
+在接入各類 AI 服務時，不必把 API 想象得太複雜。把握住以下幾個核心概念，基本就能應對大多數場景：
+
+**API 的本質是通訊橋樑**。它做的事情很簡單：把你的請求傳送出去，再把模型的響應帶回來。你不需要關心背後發生了什麼，只需要正確地組織請求格式。
+
+**SDK 是對 API 的封裝**。如果說 API 是 raw 介面，SDK 就是一套現成的工具箱——它把請求籤名、錯誤處理、引數校驗這些繁瑣的細節都替你做好了。日常開發中，優先選擇 SDK 而不是直接調 API，能省去不少麻煩。
+
+**閱讀文件時，盯住三樣東西就夠了**：服務地址（endpoint）、身份憑證（API key）以及呼叫引數怎麼填。把這三點弄清楚，調通只是時間問題。
+
+剩下的工作，IDE 和現代化的開發工具會幫你完成。專注於你的業務邏輯，底層呼叫的事交給這些成熟的 SDK 和工具鏈。
+
+# 5. 📚 作業：整合你的第一個 AI 能力
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 挑戰任務：整合 AI 能力到你的工作臺</div>
+  </template>
+
+  <p>
+    參考本節課的提示詞和內容，完成一次完整閉環：
+  </p>
+
+  <ul>
+    <li>
+      <strong>完整閉環實踐</strong>
+      <ul>
+        <li>選擇並接入一個 AI 服務（LLM / 文生圖 / 圖生圖）→ 實現前後端互動 → 整合到你的原型中</li>
+      </ul>
+    </li>
+    <li>
+      <strong>成果分享</strong>
+      <ul>
+        <li>截圖你的功能頁面分享給大家看</li>
+      </ul>
+    </li>
+    <li>
+      <strong>思考題</strong>
+      <ul>
+        <li>為下一節"完整專案實踐"預留空間，提前思考：你打算如何把這些 AI 能力組合起來，做出什麼有意思的功能？</li>
+      </ul>
+    </li>
+  </ul>
+</el-card>
+
+## 下一步
+
+在下一節中，我們將把這些分散的 AI 能力串聯起來，結合實際業務場景做一個完整的產品：
+
+- 把內容策劃、商品上架、資料分析等環節串聯成一條完整的業務流程
+- 將本節課學到的 AI 能力（LLM 文案生成、文生圖、影象編輯等）嵌入到實際業務節點中
+- 實現一個真正可用的"電商 AI 工作臺"，而不是孤立的 demo
+
+<RelatedArticlesSection
+  title="相關文章"
+  description="從“單點 AI 能力”到“完整產品流程”的推薦學習路徑。"
+  :items="relatedArticles"
+/>
diff --git a/docs/zh-tw/stage-1/introduction-to-ai-ide/index.md b/docs/zh-tw/stage-1/introduction-to-ai-ide/index.md
new file mode 100644
index 0000000..4ca2e82
--- /dev/null
+++ b/docs/zh-tw/stage-1/introduction-to-ai-ide/index.md
@@ -0,0 +1,1251 @@
+
+# 初級二：學會 AI 程式設計工具
+
+## 本章導讀
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const duration = '約 <strong>1 天</strong>，可分多次完成'
+const relatedArticles =
+  relatedArticlesMap['zh-tw/stage-1/introduction-to-ai-ide'] ?? []
+</script>
+
+<ChapterIntroduction :duration="duration" :tags="['本地開發環境搭建', 'IDE 與 AI IDE', '高效開發技巧']" coreOutput="1 個自創小遊戲" expectedOutput="使用 Trae 產出">
+
+前面我們在 z.ai 上體驗了 AI 程式設計，但網頁版有很多限制——<strong>不能隨時儲存</strong>、<strong>不好管理檔案</strong>、也<strong>沒法做複雜專案</strong>。這一章就是幫你把開發環境搬到自己的電腦上，讓你能<strong>真正獨立做東西</strong>。
+
+我們會先搞清楚 <strong>IDE 和 AI IDE 到底有什麼區別</strong>，為什麼後者能讓你<strong>效率翻倍</strong>；然後<strong>手把手教你</strong>用 Trae 在本地做一個貪喫蛇遊戲，走完從安裝到執行的<strong>完整流程</strong>；最後還會分享一些和 AI 對話的<strong>實用技巧</strong>，讓你少走彎路。
+
+學完這一章，你將會<strong>掌握和程式設計師相似的開發流程</strong>。
+
+::: tip 💡 進階提示
+如果你有一定的程式設計基礎，想要提前使用更強大的工具，可以結合參考 [現代 CLI Coding 工具](../../stage-2/backend/modern-cli/) 使用命令列方式進行開發。
+:::
+
+</ChapterIntroduction>
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
+      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
+      { title: '工具詳解', description: '熟悉 IDE 介面' },
+      { title: '溝通技巧', description: '高效與 AI 對話' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 1. 寫程式碼需要什麼環境和工具
+
+### 1.1 思維轉變：遇到問題，先問 AI
+
+在開始介紹各種環境和工具之前，首先提示你需要**轉變你的思維習慣**。
+
+在傳統的程式設計學習中，如果你要安裝 Python、配置 Conda、或者解決 npm 安裝失敗的問題，你通常會開啟搜尋引擎，找到一篇教程，然後按照步驟一步步操作。如果中間報錯了，你可能需要再搜報錯資訊，反覆嘗試。
+
+錯！❌
+
+在 AI 時代，特別是在使用 AI IDE 時，請記住一個核心原則：**任何操作，都可以先問一遍 AI，甚至讓它直接幫你做。**
+
+- **不知道怎麼安裝環境？** 直接在側邊欄問 AI：“我想寫 Python，幫我檢查一下有沒有安裝 Python，如果沒有請幫我安裝。”
+- **網路卡住了？** 如果安裝依賴包時一直轉圈或報錯，直接把錯誤丟給 AI：“下載失敗了，是不是網路問題？能不能幫我換個國內的映象源？”
+- **命令記不住？** 不需要死記硬背 Git 命令或 Conda 命令，直接告訴 AI：“幫我建立一個新的虛擬環境，名字叫 demo。”
+
+### 1.2 為什麼需要環境和工具
+
+從"試著寫幾行程式碼"到"做可長期維護的專案"，對環境和工具的要求完全不同。
+
+理論上用系統自帶的記事本也能寫程式碼，但問題很快會出現：
+
+- **程式碼全是黑色文字**，關鍵字、字串、註釋混在一起，很難一眼看出結構
+- **沒有智慧提示**，每個單詞都要完整手敲，拼錯一個字母就要反覆檢查
+- **檔案多了就亂套**，十幾個檔案來回切換，經常找不到要改的那一行在哪
+- **出錯只能猜**，程式崩了不知道哪裡出問題，只能一行行列印日誌試錯
+
+因此，你需要一款 IDE（整合開發環境）。它會把程式碼用不同顏色顯示、輸入時自動提示、檔案按專案整理、還能一步步追蹤錯誤，讓開發更高效、更少出錯。
+
+## 2. 什麼是 IDE，為什麼需要 IDE
+
+::: info 預習提示
+如果你還不熟悉 IDE 是什麼、各個介面元素有什麼作用，建議先閱讀 [IDE 簡介](/zh-tw/appendix/2-development-tools/ide-basics) 進行預習，瞭解 IDE 的基本概念和常見功能。
+:::
+
+在早期程式設計時代，我們只需要簡單文字編輯器和語言處理器即可。但隨著專案複雜度增加，開發者迫切需要一種能高效管理檔案、支援語法高亮和除錯的工具，於是整合開發環境（IDE）應運而生。
+
+你可以把 IDE 理解成專門用來“編輯、管理、執行和除錯”程式碼的程式。早期的 IDE 外觀非常“原始”，幾乎完全透過鍵盤操作。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png)
+
+終端介面（Terminal） 圖片來源：https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
+
+知名且功能成熟的“內建 IDE”如 `Vim`，常用於伺服器遠端操作。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png)
+
+為了更高效，我們需要支援滑鼠操作的現代 IDE，通常包含：
+
+- **原始碼編輯器**：語法高亮、自動補全。
+- **構建與執行工具**：內建編譯器/直譯器。
+- **偵錯程式**：斷點除錯、變數檢視。
+
+現代 IDE 往往還內建 Git 等工具。最流行的是微軟的 **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)**，它輕量且可擴充套件。雖然也有 JetBrains 全家桶等專業 IDE，但 VS Code 對初學者最友好。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png)
+
+VS Code 的核心理念是“一切皆外掛”。它透過外掛機制支援各種語言，安裝 Python 外掛就是 Python IDE，安裝 C++ 外掛就是 C++ IDE。不裝外掛時，它只是個高階文字編輯器。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png)
+
+甚至可以用來編輯 Markdown 文件。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png)
+
+總之，IDE 是一套幫助開發者高效寫程式碼和執行程式的工具集。
+
+更具體的詳細內容解釋，請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-tw/appendix/2-development-tools/ide-basics)。
+
+## 3. AI IDE 和普通 IDE 有什麼不同
+
+普通 IDE（比如原版 VS Code）本質上是一套“工具箱”：  
+可以開啟專案、寫程式碼、執行和除錯，也能裝外掛，但前提是你需要自己知道要做什麼、怎麼做：
+
+- 報錯時，自己讀提示、自己查哪一行有問題；
+- 想加新頁面或新介面，自己找對應檔案、自己寫程式碼；
+- 想配置環境或打包，自己查文件、按步驟操作。
+
+但在 AI IDE 裡，你可以直接使用大語言模型幫助你進行編碼和修改檔案：
+
+- 直接說“做一個登入頁”，它先生成基礎程式碼結構；
+- 把報錯資訊和相關程式碼丟給它，讓它先分析原因並給出修改建議；
+- 在你確認後，讓它自動新建檔案、批次改程式碼，處理跨檔案的體力活。
+
+例如，你可以選中一段程式碼，讓它“重構一下”或“加註釋”；也可以在側欄裡問“這個專案是怎麼設計的？”，透過 `@檔名` 或 `@整個專案` 指定參考範圍，用一句話自動完成新建檔案、寫程式碼和執行的繁瑣操作。
+
+在最新版 VS Code 中，已經內建了一個大語言模型助手。你可以直接針對整個程式碼倉庫、某個檔案，甚至某個函式與模型對話。你也可以像之前在 Web 端使用自動寫程式碼工具一樣，將需求以提示詞的形式發給內建的編碼 Agent，讓它自動幫你實現所需功能、建立檔案、修改程式碼、配置環境等。
+
+你可以下載安裝 VS Code，在點選右上角的側邊欄入口，開啟 AI 功能區域，體驗這些能力。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png)
+
+不過，VS Code 並不是 AI 能力最強的 IDE。對於需要大量 AI 輔助編碼的場景，我們往往希望使用“更聰明、效率更高”的工具——好的 AI IDE 能顯著節省寫程式碼和改 Bug 的時間。下面我們會介紹幾款目前比較流行的 AI IDE，你可以根據個人喜好選擇任意一款 AI IDE 使用。
+
+由於 VS Code 是開源的（任何人都可以下載原始碼並自行編譯），目前市面上絕大多數 AI IDE 都是在 VS Code 基礎上二次開發而來。所以你不必擔心要“學習很多種 IDE”——**只要你熟悉了 VS Code 的基本用法**，遷移到這些 AI IDE 並不需要重新學習。
+
+一般而言，對於不同 AI IDE 之間的差異，主要集中在四個方面：價格；可使用的模型種類（部分高階模型在某些地區可能受限）；Agent 的能力（在協助寫程式碼時的智慧程度和執行能力）；以及執行速度與效能。你可以根據實際測試效果進行選用，適合自己的纔是最好的。
+
+> 典型的 AI IDE 一般具備以下核心能力：
+>
+> - 智慧程式碼生成與補全：在傳統 IDE 中，我們通常是輸入幾個字元來補全變數名或函式名；在現代 AI IDE 中，你可以寫幾行虛擬碼或者簡單說明需求，讓 IDE 自動補全完整的邏輯，甚至根據指令直接生成一大段甚至整塊程式碼。
+> - 程式碼理解與問答：IDE 能夠理解並回答關於某段程式碼、某個檔案，甚至整個工程目錄結構的問題。
+> - 程式碼重構與最佳化：IDE 可以根據你的意圖，重寫或最佳化指定程式碼片段的實現邏輯。
+> - 自動生成測試：IDE 可以自動生成針對不同函式和模組的測試程式碼，方便你進行有針對性的測試。
+> - Agent 式任務執行：智慧 Agent 可以自動生成、打包、安裝、執行和修改程式碼，在很多工上可以部分替代初級軟體工程師的工作。
+
+::: details Antigravity
+
+### [Antigravity](https://antigravity.google/)
+
+Antigravity 是 Google 在 2025 年 11 月與 Gemini 3 一同釋出的全新 AI IDE，採用"Agent-First"（智慧體優先）開發模式。與傳統 AI 輔助編碼不同，Antigravity 讓 AI 代理成為"主動執行者"，可直接操作編輯器、終端、瀏覽器等工具，承擔更多"執行""策劃""驗證"的工作。開發者只需提出高層意圖，代理便會自動拆分任務、制定計劃、執行程式碼、執行測試、生成成果。它支援多模型切換，包括 Gemini 3 Pro、Claude Sonnet 4.5 等，目前以公開預覽形式提供，支援 Windows、macOS、Linux 全平臺。
+:::
+
+::: details Trae
+
+### [Trae](https://www.trae.ai/)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png)
+
+Trae 是位元組跳動推出的一款 AI 程式設計助手，支援 100 多種程式語言，並能整合到主流 IDE 中。它的功能包括：用自然語言生成程式碼、自動除錯、把設計稿轉換為 React/Vue 元件等。在 2025 年 8 月的更新之後，Trae 新增了智慧依賴匯入、重新命名建議、任務清單管理等功能；SOLO 模式也開始支援後端程式碼生成和技術架構文件編輯。
+:::
+
+::: details Cursor
+
+### [Cursor](https://cursor.com/)
+
+Cursor 是 Anysphere 開發的一款 AI 程式碼編輯器，基於 VS Code 定製，重點最佳化了大規模程式碼倉庫和多檔案協同的場景。它支援 GPT-4o、Claude 3.7 等模型；2025 年推出的 Claude Max 模式可以處理數百萬行程式碼級別的專案。專業版取消了請求次數限制，非常適合複雜的企業級專案。
+
+目前，Cursor 可以說是“帶前端介面的 AI IDE”中綜合體驗最好的一款之一，使用者數量龐大，功能迭代頻率也很高。它最大的缺點是價格較高——專業版大約需要每月 20 美元。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png)
+:::
+
+::: details Qoder
+
+### [Qoder](https://qoder.com/)
+
+Qoder 是阿里巴巴推出的一款強調“透明協作”和“增強上下文工程能力”的 AI IDE。它透過 Action Flow 支援把任務拆解成多個步驟，並實時跟蹤 AI 的執行過程；還支援多模型動態路由和任務狀態機管理，非常適合在中大型專案中做架構治理和對遺留系統進行“反向工程”分析。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png)
+:::
+
+::: details CodeBuddy
+
+### [CodeBuddy](https://www.codebuddy.com/)
+
+CodeBuddy 是騰訊雲推出的一款 AI 程式設計工具，強調對中文指令的支援以及企業級合規能力。它提供程式碼補全、批次程式碼審查和多模型切換等功能；其中的 Craft 智慧體可以實現多檔案程式碼生成和 API 整合。企業版支援私有化部署，並透過了三級等保認證，適合金融、醫療等對資料安全要求較高的行業。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png)
+:::
+
+::: details VS Code + Cline
+
+### VS Code + [Cline](https://cline.bot/)
+
+Cline 是 VS Code（Visual Studio Code）的一款 AI 程式設計 Agent 外掛，可以透過配置不同的 API 端點來靈活切換所使用的大模型。Cline 支援多模態輸入、MCP 工具擴充套件以及成本監控，所有操作都需要使用者確認後才會執行。它非常適合用於快速驗證想法，或與現有開發流程整合。基礎功能是免費的，企業版則支援在私有環境中部署模型。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png)
+:::
+
+::: details Kiro
+
+### [Kiro](https://kiro.dev/)
+
+Kiro 是 AWS（亞馬遜雲科技）推出的 AI 程式設計 IDE，深度整合 Amazon Bedrock 和 AWS 雲服務生態。它支援 Claude、Nova 等多種大模型，特別適合需要與 AWS 雲服務緊密整合的開發場景。Kiro 提供了智慧程式碼生成、自動化測試、以及與 AWS 資源（如 Lambda、S3、DynamoDB）的無縫對接能力，對於雲原生應用開發具有獨特優勢。
+
+> **備註**：如果你想使用 Anthropic Claude 相關的模型，需要使用 Cursor、Kiro 或 Antigravity 作為 IDE 纔行。這些 IDE 與 Anthropic 有官方合作或深度整合，能夠提供更穩定、更完整的 Claude 模型體驗。
+:::
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
+      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
+      { title: '工具詳解', description: '熟悉 IDE 介面' },
+      { title: '溝通技巧', description: '高效與 AI 對話' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 4. 實戰：用 AI IDE 在本地生成貪喫蛇遊戲
+
+前面講的主要是"概念"和"差異"。這一小節，我們透過一次完整的實戰，把抽象概念落到具體操作上：**新建一個空資料夾 → 用 AI IDE 開啟 → 在側邊欄聊天，讓它用 React 幫你從零生成一個貪喫蛇遊戲。** 這裡以上面介紹的 Trae 為例，首先需要安裝和簡單理解什麼是 Trae。
+
+::: tip 💡 小提示：從網頁到本地的無縫銜接
+如果你之前已經在 z.ai 或其他網頁端 AI 程式設計平臺上開發過專案，可以直接將程式碼下載到本地，然後用 AI IDE 開啟繼續開發。這樣既能保留之前的成果，又能享受本地 IDE 更強大的 AI 輔助能力。
+
+操作步驟很簡單：
+1. 在 z.ai 等平臺點選下載按鈕，將專案儲存到本地
+2. 解壓後用 Trae/Cursor 等 AI IDE 開啟該資料夾
+3. 在側邊欄繼續與 AI 對話，迭代最佳化你的專案
+:::
+
+### 4.1 準備工作：安裝並瞭解 Trae
+
+#### 4.1.1 什麼是 Trae
+
+Trae 的全稱可以理解為 “The Real AI Engineer”，是一款由位元組跳動開發的自適應 AI 整合開發環境（IDE）。它是在流行的 VS Code 基礎之上構建的，這意味著，如果你之前已經習慣了 VS Code，那麼在使用 Trae 時，無論是介面佈局還是基礎操作都會感到非常熟悉、舒適。
+
+Trae 的核心目標是成為開發者的“智慧程式設計夥伴”。透過深度整合 AI 能力，它可以自動處理大量重複性工作，為你提供更直觀、更高效的開發體驗。它並不僅僅是一個“程式碼補全工具”，而是希望貫穿整個開發工作流，從建立專案、編寫程式碼、除錯、測試到部署都提供幫助。
+
+#### 4.1.2 安裝 Trae
+
+Trae 分為國際版和中國版。國際版需要能夠訪問海外網路，但可以使用 GPT-5 等最新的海外模型；中國版則主要支援國內最新的大模型，例如 GLM、Qwen、Kimi 等。
+
+國際版下載地址：https://www.trae.ai/
+中國版下載地址：https://www.trae.cn/
+
+##### Trae 定價與使用方式
+
+::: info 💡 版本選擇提示（零基礎推薦 CN 版）
+- **零基礎入門強烈推薦下載中國版（CN 版，trae.cn）**，目前使用體驗更好，且基礎功能免費，無需海外網路
+- 如果你需要使用 GPT-5 等海外模型，且網路條件允許，可以選擇國際版
+- 如果已有第三方模型的 API Key，接入第三方模型可以靈活控制成本
+:::
+
+> 💡 **目前推薦使用 OpenRouter 免費模型進行測試**
+> 
+> 截至教程編寫時間（2026-02-12），目前仍可免費試用 StepFun 的模型。具體可以參考下面 4.2 章節部分的模型接入方式，接入 `stepfun/step-3.5-flash:free`。
+
+關於 Trae 的費用和使用方式，有以下幾個選項可供選擇：
+
+- **國內版 CN 版（強烈推薦）**：基礎使用免費，目前整體使用效果優於國際版，非常適合零基礎入門。由於使用者較多可能偶爾需要排隊等待。
+- **國際版**：訂閱價格大約為每月 3 美元左右，可以訪問 GPT-5 等海外模型，但需要能夠訪問海外網路。
+- **第三方模型接入**：如果你已經有國內大模型的 Token API（如 DeepSeek、通義千問、Kimi 等），可以透過 Trae 的第三方模型配置功能將這些 API 接入使用。各大雲服務廠商（如阿里雲、騰訊雲、百度雲等）通常提供 Coding Plan 訂閱計劃，購買後可以以更優惠的價格使用其大模型 API。這樣你可以自由選擇自己喜歡的模型，同時控制使用成本。
+
+建議初學者從國內 CN 版免費版開始體驗（下載地址：https://www.trae.cn/ ），目前 CN 版的使用效果更好且完全免費。如果遇到排隊問題或需要更穩定的服務，可以考慮接入第三方模型併購買對應雲廠商的 Coding Plan 計劃。
+
+#### 4.1.3 Trae 介面簡介
+
+從介面形態上看，Trae 與我們日常使用的 VS Code 高度相似：同樣是左側資源管理器、中間編輯區、右側擴充套件面板的經典三欄佈局。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png)
+
+右側的側邊欄就是 Copilot 互動視窗，也可以理解為 Agent 視窗。如果你暫時看不到它，可以點選 Trae 右上角的側邊欄圖示將其開啟。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png)
+
+開啟側邊欄之後，你會看到一個 `Builder` 選項，這就是 Agent 模式。簡單理解，它相當於 z.ai 的“本地版”，可以幫你操作本機環境，安裝執行環境、開啟網頁等。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png)
+
+點選 “Builder” 後，你會看到 “Chat” 模式和 “Builder with MCP” 模式：
+
+- **Chat 模式**：主要用於和當前資料夾裡的程式碼對話，或者當作普通聊天模型來使用。（你可以透過左上角的 “File” 選單開啟一個資料夾，在這個資料夾中進行編輯操作。在這種情況下，Builder 建立或修改的檔案都只會發生在這個資料夾內部。）
+- **Builder with MCP 模式**：為 Agent 提供了更多可用工具（例如把語言模型和其他軟體聯通起來、查詢天氣等）。你可以簡單理解為：MCP 能讓語言模型更方便地呼叫各種外部工具。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png)
+
+在下面的區域，你還會看到模型選擇選項，點選即可修改當前使用的大模型。在中國版中，你可以選擇使用 Kimi k2 或 GLM 等國內模型；如果你使用的是國際版 Trae，還可以選擇 ChatGPT 或 Claude 等海外模型。不過，由於國內大模型發展非常快，Kimi、Qwen、GLM 等在很多工上的實際體驗已經接近 Claude 3.5 或 3.7，對日常開發來說已經完全夠用，這裡不強制要求使用國際版或者國內版進行操作。
+
+**需要注意的是，這裡不推薦使用 Auto 模式（自動選擇模型），如果是國際版，我們推薦使用 Gemini 或者 GPT 模型， 如果是國內版，我們推薦你嘗試 Kimi k2 或 Minimax、GLM 等國內模型，** 不同模型有不同的使用場景，沒有教條式的一定誰比誰好在哪，你可以在不同任務遇到困難無法解決時換一個模型，透過多次測試得到屬於自己的最佳實驗結果。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png)
+
+以上就是對 Trae 的一個簡單介紹。接下來，我們可以回顧一下之前在 z.ai 中做過的操作，並嘗試在 Trae 中做同樣的事情。
+
+### 4.2 第一步：新建空資料夾並用 AI IDE 開啟
+
+在正式動手之前，我們首先需要準備一個乾淨的專案工作目錄。
+以本小節示例為例，可以在本地新建一個名為 snake-game-react 的空資料夾。
+
+隨後，開啟已安裝好的 AI IDE，在啟動介面選擇開啟資料夾或Open Folder，將該空資料夾作為專案根目錄匯入；也可以直接將資料夾拖入 IDE 視窗完成開啟。此時，左側資源管理器中不會出現任何程式碼檔案，表示我們正從一個完全空白的專案狀態開始。
+
+::: details 📚 可選：接入雲服務廠商的 API 或 Coding Plan
+
+本節將介紹如何接入雲服務廠商的 API 或 Coding Plan，以獲得更穩定、更頻繁的模型呼叫。結尾部分會給出 Trae 中接入的截圖。
+
+**什麼是 Coding Plan**
+
+Coding Plan 是各大雲服務廠商推出的訂閱計劃，購買後你可以在一定時期內**無限制或高頻次地使用**該廠商的大模型 API。相比於按 Token 計費的方式，Coding Plan 更像是"包月套餐"——你付一筆固定的費用，就能放心大膽地一直用，不用擔心每次呼叫都要計費。
+
+**為什麼需要購買 Coding Plan**
+
+你可能會問：既然可以直接使用 API 呼叫大模型，為什麼還要購買 Coding Plan 呢？主要有以下原因：**可以一直用**：Coding Plan 最核心的優勢就是你可以隨時、頻繁地呼叫大模型，不用擔心用多了費用爆炸，也不需要頻繁看計費表
+
+**推薦的國內雲服務 Coding Plan**
+
+以下是國內主流雲服務廠商提供的 Coding Plan 推薦選項：
+
+- 智譜 AI（BigModel Plan）：https://bigmodel.cn/glm-coding  
+- 火山引擎（位元組雲 AI Plan）：https://www.volcengine.com/activity/codingplan
+
+> 💡 **也可以直接接入大模型 API**
+> 除了 Coding Plan，你也可以直接透過 Add Model 接入各大模型的 API。你可以參考下文接入 OpenRouter StepFun 免費 API 的方式，將 API 接入 Trae 進行使用。經測試可滿足基本的程式設計需求。
+> 如果需要充值，建議先充值 10 元感受一下能用多久，比如 DeepSeek 等價效比較高的模型
+
+**如何接入 Coding Plan**
+
+接入 Coding Plan 的步驟非常簡單，只需幾分鐘即可完成：
+
+1. 訪問你選擇的雲服務廠商官網（如智譜 AI：https://bigmodel.cn/glm-coding ，火山引擎：https://www.volcengine.com/activity/codingplan）
+2. 註冊賬號並登入
+3. 找到 "定價" 或 "Coding Plan" 頁面
+4. 選擇適合你的套餐並完成支付
+5. 支付成功後，你會獲得一個 API Key 或 Plan ID
+
+::: tip 🎯 自定義模型推薦
+
+在 Trae 中接入自定義模型時，我們**預設推薦使用 OpenRouter 方案**。OpenRouter 提供了統一的 API 介面，可以方便地接入多種大語言模型。
+
+**截至 2026 年 2 月 12 日，你還可以使用 StepFun 的免費 API：**
+
+- **`stepfun/step-3.5-flash:free`**：StepFun（階躍星辰）提供的免費模型，同樣支援在 Trae 中直接接入使用。
+
+**其它免費模型：**
+
+- **`openrouter/free`**：這是一個預設使用免費 LLM API 的模型選項，可以直接在 Trae 的 Custom Model 接入中使用（直接寫進模型 ID 即可），無需付費即可體驗 AI 程式設計功能。
+
+這些免費選項非常適合初學者體驗，在正式投入生產環境前，可以先透過這些免費方案熟悉 AI IDE 的工作流程。
+
+**可選：接入大模型呼叫 API（以 DeepSeek 為例）**
+
+1. 訪問 DeepSeek 平臺：https://platform.deepseek.com/usage
+2. 註冊賬號並登入
+3. 在充值頁面購買 10 元的 Token 包
+4. 充值成功後，在 API Keys 頁面建立並複製 API Key
+5. 在 Trae 中點選 **"Add Model"**，找到 DeepSeek，選擇對應模型，輸入 API Key 即可使用
+
+透過下列介面，你可以成功新增（注意看選擇模型的選項後【一定要滑動到最底部】，下面有一個“自定義模型“，點選後纔可以輸入模型 ID，此時可以輸入上述推薦的模型 ID 如 `stepfun/step-3.5-flash:free` 直接寫入即可，同時點選下方的獲取 Key 前往官網獲得對應的 API Key 寫入即可正常使用。）
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png)
+:::
+
+### 4.3 第二步：在側邊欄聊天，讓 AI 用 React 設計貪喫蛇遊戲
+
+接下來，開啟 AI 聊天側邊欄：一般是按 `Ctrl+L` 或點選右側聊天圖示。然後在聊天裡輸入一個足夠清晰的提示：
+
+> 請你用 React 架構實現貪喫蛇遊戲，包含鍵盤控制、喫到食物變長加分、撞牆或撞到自己時顯示“遊戲結束”並支援重新開始。實現後幫我啟動這個專案。如果遇到沒安裝的程式環境就自動安裝沒安裝的環境。
+
+在這個過程中，你需要意識到 AI 不只是聊天模型，它能夠幫助你操作本機環境：建立檔案、安裝依賴、執行啟動命令等。你可以直接用自然語言描述想要達成的目標，由 AI 來決定具體執行哪些命令、如何組織程式碼。
+
+如果執行過程中遇到問題，AI 會在對話裡展示報錯和處理方案，你可以繼續透過對話讓它調整，而不必自己記住所有命令細節。
+
+::: warning ⚠️ 需要注意
+例如下圖所示，**有時候 AI Agent 會在執行的過程中暫停，這是因為它需要等待你輸入一些資訊進行互動**，比如輸入建立的名字，或者回車確認指令執行。或者點選指令進行執行。一般情況我們直接回車即可，如果你不確定這步需要做什麼，你可以截圖當前介面詢問大模型應該如何操作。
+:::
+
+如圖所示，這裡我們需要點選 Run 進行確認：
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png)
+
+如圖所示，這裡我們只需要輸入 y 即可確認：
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png)
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png)
+
+如圖所示，這裡我們正在建立模板，但不知道如何操作，我們可以截圖該部分對大模型進行詢問：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png)
+
+AI Agent 在執行過程中暫停的還有一部分原因是因為此時啟動了一個“服務”，我們的貪喫蛇本身屬於一種“服務”，如果你看到如下命令的網址，則表示 Agent 幫我們執行了一個本地的電腦服務，我們可以訪問對應的網址訪問我們的貪喫蛇，由於服務需要持續啟動，這裡會陷入暫停。我們只需要點選 `Skip` 按鈕即可。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png)
+
+在這個過程中，如果你遇到一些術語和看不懂的內容，不用擔心，你可以查閱附錄中的“計算機術語解釋”部分，或者直接向 AI 諮詢，或者及時提問！
+
+如果你在過程中遇到不符預期的現象，例如貪喫蛇撞牆後不會結束遊戲，貪喫蛇點選開始後不會移動，這時你只需要把現象描述給側邊欄 Agent 即可。如果遇到報錯問題，記得截圖或者複製錯誤到側邊欄 Agent，如果多次仍然不能解決問題，請你嘗試更換模型操作。
+
+稍作片刻，我們即可得到類似 z.ai 一樣的結果：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png)
+
+我們可以點選右下角的打勾進行確定程式碼的變更，也可以點選 `Cancel` 按鈕取消變更。或者點選 2 files need review 的地方展開檢視變動後的程式碼。
+
+這裡還值得注意的是，由於修改程式碼並不一定正確，我們還需要知道所有的 IDE 的 Agent 都支援程式碼回退，例如，假設我這裡不小心做了個錯誤的修改操作，或者這次操作的結果讓你感到不滿意，在修改結束後我們可以返回輸入框的部分，點選 Revert 按鈕將操作回退到修改前的狀態，你可以修改輸入的文字進行再一次操作：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png)
+
+### 4.4 第三步（可選）：向 AI 追問程式碼實現細節
+
+當貪喫蛇遊戲已經可以正常執行時，如果你對前端或 React 還不熟，可以繼續在同一個聊天視窗裡，請 AI 用盡量口語化的方式幫你導覽程式碼。你不需要切換工具，也不必刻意去翻文件，只要圍繞當前專案持續發問即可。
+
+一個比較實用的做法是，讓 AI 先整體講一遍“遊戲是怎麼動起來的”，再拆到具體細節。比如你可以直接提問：
+
+> “請從上到下講一遍，這個貪喫蛇遊戲每一步是怎麼動起來的？儘量少用專業術語。”
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png)
+
+然後再順著它的回答繼續追問關鍵點，例如：
+
+> “蛇在螢幕上的每一節身體，是用什麼資料結構來記的？能打個比方嗎？”  
+> “你是怎麼控制‘隔一段時間動一下’的？這在程式碼裡是哪一段？”  
+> “蛇喫到食物時，你做了哪幾步操作？在哪一段邏輯裡判斷喫到了？”  
+> “撞牆和撞到自己，分別是在哪些程式碼裡判斷出來的？”
+
+如果你看到某個檔案（比如 `SnakeGame.tsx`）但完全不知道它在幹什麼，也可以直接請 AI 分塊說明：
+
+> “請把 `SnakeGame.tsx` 按功能分幾塊講一下：每一塊大概負責什麼，用通俗一點的說法。”
+
+在這一輪對話中，你可以把不懂的詞一律當成追問入口，比如：
+
+> “你剛才說的‘狀態’具體指什麼？能用一個生活中的例子解釋嗎？”  
+> “你說的‘定時器’在這裡主要是幹嘛的？如果把它去掉，會發生什麼？”
+
+透過這種方式，你的目標不是一下子記住所有概念，而是先搞清三件事：這款遊戲裡有哪些核心資料（蛇、食物、分數、遊戲狀態等），這些資料在什麼時機會發生變化（移動、喫到食物、遊戲結束等），以及每一種變化對應的是哪一小段程式碼。只要這三點理順了，你就基本可以看懂這份程式碼的主幹邏輯。
+
+### 4.5 第四步：讓 AI 把畫面變好看一點
+
+這裡先提醒一件對小白很重要的事情：不要只對 AI 說一句“我要把這個畫面變好看”。這種說法對人類設計師都太模糊，更別說對模型了——“好看”是什麼風格、哪些地方需要調整、是排版問題還是配色問題，AI 都無法從你這一句裡讀出來。為了讓 AI 真正做出接近你心裡預期的效果，你需要學會把“我想要好看”這種模糊目標拆成一串具體、可執行的小要求。
+
+比如，很多人一開始會這樣說：
+
+> “我要把這個畫面變好看一點。”
+
+例如，你可以先給出一組整體需求：
+
+> “請幫我把遊戲介面整體美化一下：
+>
+> - 遊戲區域居中顯示，不要貼在左上角；
+> - 換成較淺的背景色，讓蛇和食物更醒目；
+> - 把分數放大，放在明顯的位置；
+> - 以藍色為主色調，美化一下整體配色和按鈕。”
+
+如果你希望在“遊戲結束”時有更清晰的反饋，可以進一步補充：
+
+> “當遊戲結束時，請在畫面中央顯示‘遊戲結束’，下面有一個‘重新開始’按鈕，可以重置遊戲。”
+
+AI 會根據你的描述，直接修改 React 元件和樣式。儲存後重新整理瀏覽器，你就能看到新的介面。如果效果和你想象的還有差距，可以繼續做小步調整，例如：
+
+> “分數再大一點，顏色更醒目一些。”  
+> “遊戲區域再緊湊一點，四周預留一點留白。”  
+> “重新開始按鈕改成藍色圓角風格，放在提示下方居中。”
+
+在這個階段，如果某次修改導致報錯，也不需要自己硬查。直接把錯誤資訊複製到聊天視窗，或者配合一段簡要描述，比如“這是我剛才美化介面後出現的錯誤”，讓 AI 在當前專案上下文裡幫你定位和修復。這樣你就可以在“不斷對話、不斷重新整理”的迴圈中，把一個能跑的 Demo 逐步打磨成介面清晰、互動順暢的小型成品。
+
+### 4.6 （可選）參考 z.ai 架構修改貪喫蛇結果
+
+對於 vibe coding 小白來說，最難的事情反而是不知道什麼纔算是“最佳實踐“，不知道怎麼樣的架構纔是最適合的；因為不知道計算機基礎，所以沒辦法很好的引導 AI，解決這個難題的方法是”直接參考“；還記得我們之前說過的 z.ai 中可以檢視程式碼嗎？其實對應 README（專案中用於介紹功能和技術架構的部分）中已經給出了一個最佳架構參考：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png)
+
+我們想要讓本地的結果儘量符合 z.ai 的結果，我們可以複製這個 README 的全部內容，貼上到 Trae 的側邊欄中，讓他根據 README 的架構，修改本地的程式碼。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png)
+
+最後我們能得到與 z.ai 高度相似的頁面設計風格：
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png)
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
+      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
+      { title: '工具詳解', description: '熟悉 IDE 介面' },
+      { title: '溝通技巧', description: '高效與 AI 對話' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 5. 介面上每個按鈕是幹什麼的
+
+在上述操作中，我們已經快速跑通了最小程式生成閉環，但我們仍然對 IDE 不能說得上熟悉。為了徹底熟悉這個之後與我們長期相處的工具。我們會在這一節中對 IDE 的每個細節環節進行深入解釋，首先從介面開始，不同 AI IDE 的介面略有差異，但大部分都延續了 [VS Code 的佈局](https://code.visualstudio.com/docs/getstarted/getting-started)。
+
+![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp)
+
+其中每個部分的具體作用為：
+
+- **Title Bar（標題欄）**：顯示檔名和視窗控制按鈕。
+- **Activity Bar（活動欄）**：切換檔案、搜尋等功能檢視。
+- **Side Bar（側邊欄）**：展示檔案列表等具體內容。
+- **Editor Groups（編輯區）**：編寫程式碼的核心區域。
+- **Breadcrumbs（路徑導航）**：顯示檔案路徑，支援跳轉。
+- **Minimap（程式碼縮圖）**：快速預覽和定位程式碼。
+- **Panel（底部面板）**：包含終端和輸出視窗。
+- **Status Bar（狀態列）**：顯示當前環境狀態。
+
+更具體的詳細內容解釋，請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-tw/appendix/2-development-tools/ide-basics)。
+
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '環境認知', description: '理解 IDE 與 AI IDE' },
+      { title: '本地實戰', description: 'Trae 打造貪喫蛇' },
+      { title: '工具詳解', description: '熟悉 IDE 介面' },
+      { title: '溝通技巧', description: '高效與 AI 對話' }
+    ]" />
+  </ClientOnly>
+</div>
+
+## 6. 怎麼跟 AI 說話纔有效
+
+隨著 AI 能力越來越強，我們已經可以把很多“讓程式設計師寫程式碼”的工作交給 AI 來完成。  
+但是，在實際使用中你會發現：同樣是用同一個 AI，有的人幾句話就能要到能跑起來的小專案，有的人聊了半天，結果卻完全不是自己想要的，其差別往往不在於“誰更聰明”，而在於——你跟 AI 說話的方式，是不是足夠具體、足夠有步驟。  
+本節我們從幾個常見場景出發，介紹一些適合完全小白的提問方式，幫助你更穩定地讓 AI 給出可用的結果。
+
+### 6.1 說清楚你的需求：從“模糊想法”到“具體說明”
+
+很多人第一次用 AI 時，習慣只說一句非常籠統的話，比如：
+
+> “幫我做個網頁。”  
+> “幫我寫個小程式。”
+
+在這種情況下，AI 只能自己“腦補”你想要什麼，於是它會隨便給你一個看上去挺完整的東西，但往往和你真正想做的差很多。  
+要讓 AI 更聽得懂你的意思，需要把“腦子裡的想法”拆開，用幾句話一步步說清楚。
+
+可以從這幾個方面來補充：
+
+1. **告訴它，你拿這個東西來幹嘛**  
+   比如，不要只說“個人網站”，而是說：
+   - “我想做一個只包含一頁內容的個人簡介網頁，用來發給招聘的人看。”
+
+2. **告訴它，大概需要哪幾塊內容**  
+   不用說專業詞，只要描述你希望頁面上出現什麼，比如：
+   - “頁面要有三個部分：最上面是名字和一句自我介紹，中間列出幾條工作經歷，最下面放郵箱和微訊號。”
+
+3. **告訴它，你的水平和限制**  
+   讓 AI 按照小白能接受的方式來做，比如：
+   - “我完全不會寫程式碼，請只用最簡單的寫法，讓我可以直接複製到一個檔案裡，在瀏覽器裡開啟。”
+
+4. **告訴它，你希望怎麼拿到結果**  
+   例如：
+   - “請給我一份可以直接儲存為 `index.html` 並在瀏覽器裡開啟的完整程式碼。”
+
+綜合起來，可以讓你對 AI 這樣說：
+
+> “我完全不會寫程式碼，想做一個只包含一頁內容的個人簡介網頁，用來發給招聘的人看。  
+> 頁面需要三個部分：上面一行是名字和一句自我介紹，中間是幾條工作經歷，下面是郵箱和微訊號。
+
+當你把這些資訊說清楚之後，AI 就能更接近你真正的需求，而不是隨便給你一個“看起來很厲害但用不上的東西”。
+
+### 6.2 用對節奏：先“能跑起來”，再一點點變複雜
+
+對完全小白來說，最常見的坑是：一上來就想做一個“非常完整”“功能很多”的東西。  
+比如：
+
+> “幫我做一個像淘寶那樣的網站。”  
+> “幫我做一個可以註冊、登入、下單的系統。”
+
+結果往往是：AI 給你一大團程式碼，你複製之後不是打不開，就是到處報錯；你也看不懂哪裡出了問題，最後只能放棄。
+
+更適合的做法，是**主動控制節奏**，讓 AI 跟著你一步一步來，而不是一次性把所有東西都砸給你。可以按下面這個順序提要求：
+
+1. **第一步：先要一個“最小的例子”**  
+   只檢查一件事：能不能在瀏覽器裡看到東西。  
+   例如：
+
+   > “請先給我一個最簡單的示例，只要在瀏覽器裡能看到一行‘這是我的主頁’就行。  
+   > 再一步步告訴我：檔名該叫什麼，應該怎麼儲存，怎麼開啟。”
+
+2. **第二步：在這個基礎上，慢慢把內容加完整**  
+   當你確認“確實能看到那一行字”之後，再說：
+
+   > “在剛才的基礎上，幫我增加一個‘工作經歷’區域，把完整程式碼重新發給我。不要只發改動的部分。”
+
+3. **第三步：結構差不多之後，再考慮好不好看**  
+   例如：
+   > “現在頁面已經能正常顯示內容了。接下來請幫我稍微美化一下：整體居中，標題大一點，用一個比較舒服的字型。請給出更新後的完整程式碼。”
+
+每加一步，你都先執行一次，確認真的有變化，再讓 AI 往下加。這樣就算哪一步出問題，你也可以很快回到“上一版還正常”的狀態，而不用完全推倒重來。
+
+### 6.3 善用截圖和複製：不會說就“把畫面扔給 AI”
+
+很多完全小白遇到的難點，不在於“不會改程式碼”，而是在於**不知道怎麼把問題說出來**。  
+比如：
+
+- 瀏覽器裡突然彈出一大堆英文報錯，你完全看不懂。
+- 網頁的排版和你想的不一樣，但你也不知道該用什麼詞來形容。
+
+在這些情況下，不需要硬擠專業術語，最簡單的方式就是——**把你看到的東西原樣丟給 AI**。
+
+可以這樣做：
+
+1. **複製報錯文字**  
+   當你看到一串紅色錯誤訊息時，可以直接複製出來，然後說：
+
+   > “這是我執行後出現的完整錯誤資訊。我看不懂這些英文，請先用普通人能聽懂的話解釋一下，這大概是什麼意思。  
+   > 然後告訴我，我現在最簡單應該怎麼改。”
+
+2. **給 AI 看截圖**
+   如果你覺得"這個頁面看著就是不對"，但又不會描述，可以：
+   - 截一張當前頁面的圖；
+   - 把你正在用的那份程式碼，一整段複製給 AI；
+   - 然後說明：
+     > "這是現在頁面的樣子，這是我現在的完整程式碼。
+     > 我原本希望它是三列排版，現在變成一列了。請你幫我看一下原因，並給我一份改好後的完整程式碼。"
+
+   ::: tip 💡 關於截圖功能的補充說明
+
+   需要注意的是，**並非所有 AI 模型都支援"看圖片"**。這涉及到兩個不同的概念：
+
+   - **純文字大模型（LLM）**：只能處理文字輸入，無法識別圖片內容。如果你給它發截圖，它要麼拒絕處理，要麼無法正確理解圖片中的資訊。
+
+   - **多模態模型**：能夠同時處理文字、圖片等多種型別的輸入，可以"看懂"你發的截圖，並根據圖片內容給出建議。
+
+   **常見模型的能力參考**（以 Trae 中可選的模型為例）：
+
+   | 模型 | 是否支援圖片輸入 |
+   |------|-----------------|
+   | Doubao-Seed 系列 | ✅ 支援 |
+   | GLM-4.7 / 4.6 | ❌ 不支援 |
+   | MiniMax-M2.7 / M2.5 | ❌ 不支援 |
+   | DeepSeek-V3.1 | ❌ 不支援 |
+   | Kimi-K2.5 | ✅ 支援 |
+   | Kimi-K2-0905 | ❌ 不支援 |
+   | Qwen-3-Coder | ❌ 不支援 |
+   | Gemini 系列 | ✅ 支援 |
+   | GPT 系列 | ✅ 支援 |
+
+   **使用建議**：如果你想透過截圖讓 AI 幫你排查介面問題，請先確認你使用的模型支援影象輸入。如果不支援，你可以改用文字描述問題，或者將錯誤資訊複製貼上給 AI。
+
+   :::
+
+3. **遇到喜歡的網頁，想做個類似的**  
+   不需要說“這個佈局叫什麼”，直接：
+   - 截圖或複製那頁的主要標題、段落；
+   - 再說：
+     > “我想做一個結構和這個差不多的頁面，不需要一模一樣。  
+     > 請幫我用簡單一點的程式碼，搭一個類似的框架出來，然後我再自己把文字換成我的。”
+
+簡單來說：你負責“把看到的東西搬給 AI”，再用最樸素的話說“我希望它變成什麼樣”；剩下的“翻譯成程式碼、解釋名詞、找問題”，交給 AI 來做。
+
+### 6.4 當 AI 生成的程式碼不工作時：一套通用應對方法
+
+在實際練習中，你一定會遇到這種情況：  
+AI 很認真地給了你一段程式碼，你也老老實實地複製進去了，但結果要麼是瀏覽器一片空白，要麼完全不是它說的那個效果。  
+這並不代表你“學不會”，也不代表 AI 完全錯了，而是你們之間還缺少幾輪“來回確認”。
+
+當程式碼“不工作”時，可以按下面這套固定流程來跟 AI 說：
+
+1. **先把“你做了什麼 + 現在什麼樣”說清楚**  
+   避免只說“打不開”“不行”。可以這樣描述：
+
+   > 開啟之後，頁面是完全空白的，沒有顯示你說的那句歡迎文字。
+   > 我開啟了 xxxx 頁面，其中沒有剛才我說的部分啊，這不能用
+
+2. **把你現在的完整程式碼發給 AI**  
+   很多時候問題出在：複製少了一行、或者上一次和這一次的內容混在一起了。  
+   你可以說：
+
+   > “下面是我現在這個檔案裡的全部程式碼。  
+   > 請你對比一下有沒有哪裡少了、寫錯了，或者順序不對。  
+   > 請直接給我一份修正後的完整程式碼，不要只發一小段。”
+
+3. **如果有錯誤提示，一併給出**  
+   比如瀏覽器右上角彈出的錯誤，或者底部的一些紅字。你可以：
+   - 把錯誤文字複製出來；
+   - 或者截一張圖；
+   - 然後說：
+     > “這是我看到的錯誤提示。我完全看不懂，請先用簡單的方式說明這大概是什麼問題，再告訴我現在最需要改哪幾行。”
+
+4. **要求對方用“小白模式”一步一步講**  
+   你可以直接把自己的情況說清楚，讓它別省略中間步驟：
+
+   > “我完全不會寫程式碼，請你一步一步告訴我：  
+   > 第 1 步要改哪一行，  
+   > 第 2 步要怎麼儲存，  
+   > 第 3 步要怎麼重新開啟或者重新整理頁面。  
+   > 每一步都請用完整的句子寫出來。”
+
+5. **最後，請它幫你做“應該看到什麼”的對照**  
+   例如：
+   > 請先說一下，按照你改好的程式碼，正常情況下我開啟網頁應該看到什麼內容。
+
+只要你按照這套流程來和 AI 互動，大部分“程式碼不工作”的情況，都可以在幾輪來回中解決掉。  
+同時，你也會逐漸熟悉常見的問題型別，下次再遇到類似情況就能直接解決。
+
+## 7. 小結與下一步
+
+這一章裡，你完成了一次從“能在網頁裡玩一個 AI 生成的貪喫蛇”，到“能在本地用 AI IDE 自己搭出一個小遊戲”的升級。你大致搞清了三件事：寫程式碼為什麼離不開一個像 VS Code 這樣的 IDE；在這個基礎上，再加上 AI（Trae、Cursor 等）之後，IDE 不再只是工具箱，而是多了一個能聽懂自然語言、幫你新建檔案、裝環境、改程式碼的“實習工程師”；以及 IDE 介面上每一塊區域（左側檔案、底部終端、中間編輯區、右側 AI 面板）分別管什麼，用起來就不再一頭霧水。
+
+更重要的是，你已經實際跑通了一次完整流程：在本地新建空資料夾 → 用 AI IDE 開啟 → 在側邊欄對話裡描述需求 → 讓 AI 生成專案並啟動開發伺服器 → 出現問題時，把“現象 + 全部程式碼 + 報錯截圖”一起丟給 AI，請它用“小白模式”一步步修。這個過程中，你也練習瞭如何寫更有效的提示詞：說清目標、內容結構和自己的水平，控制好節奏，從“先能跑起來”到“再變好看、變好玩”。
+
+下一章，我們會把重點從“會用工具”轉向“做一個真正有人願意用的原型”：從使用者視角出發，設計規則、互動和反饋，然後再讓 AI 幫你把這些想法落成產品雛形。
+
+## 8. 📚 作業：用本地 AI IDE 做一個更復雜的遊戲
+
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 挑戰任務：打造你的專屬遊戲</div>
+  </template>
+
+  <p>
+    你已經用本地 AI IDE 做過一個貪喫蛇。現在請你再挑戰一個更復雜一點的小遊戲，完整走一遍“描述需求 →
+    生成專案 → 本地執行 → 除錯迭代”的流程。
+  </p>
+
+  <ol>
+    <li>
+      <strong>選擇一個比貪喫蛇更復雜的遊戲</strong>
+      <ul>
+        <li>可以是“俄羅斯方塊”“打地鼠”“掃雷”“2048”“飛機大戰”之類</li>
+        <li>或者你自己想象的一個簡單原創遊戲</li>
+      </ul>
+    </li>
+    <li>
+      <strong>必須用本地 AI IDE 來完成整個過程</strong>
+      <ul>
+        <li>新建一個空資料夾，用 AI IDE 開啟</li>
+        <li>在側邊欄聊天裡描述清楚你的遊戲需求</li>
+        <li>讓 AI 負責建立檔案、搭建專案結構和實現主要邏輯</li>
+        <li>在本地啟動開發伺服器，確保遊戲可以正常執行</li>
+      </ul>
+    </li>
+    <li>
+      <strong>有基本的“可玩性”和反饋</strong>
+      <ul>
+        <li>至少包含開始、進行中、結束三種狀態</li>
+        <li>玩家有明確的操作方式（鍵盤或滑鼠）</li>
+        <li>螢幕上有清晰的得分或進度反饋</li>
+      </ul>
+    </li>
+    <li>
+      <strong>至少進行 2 輪以上的迭代</strong>
+      <ul>
+        <li>第一輪讓 AI 做出“能玩”的版本</li>
+        <li>第二輪以後，逐步提出具體改進（樣式、難度、互動最佳化等）</li>
+      </ul>
+    </li>
+  </ol>
+</el-card>
+
+<RelatedArticlesSection
+  title="繼續學習"
+  description="建議先進入原型實戰，再逐步接入 AI 能力。"
+  :items="relatedArticles"
+/>
+
+# 附錄
+
+<el-card id="appendix-nav" shadow="hover" style="margin-top: 40px; margin-bottom: 24px; border-left: 5px solid #E6A23C;">
+  <div style="font-weight: bold; margin-bottom: 8px;">附錄導航</div>
+  <div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
+    這裡是“隨查隨用”的補充資料：遇到術語看不懂、介面找不到入口時再回來。
+  </div>
+  <el-row :gutter="16">
+    <el-col :span="12">
+      <a href="#appendix-1-map" style="text-decoration: none; color: inherit;"><b>附錄一：常見計算機術語速查表</b></a><br/>
+      <span style="font-size: 12px; color: #909399">看到不懂的計算機名詞時，來這裡快速查含義，推薦通讀一遍。</span>
+    </el-col>
+    <el-col :span="12">
+      <a href="/zh-tw/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>附錄二：Visual Studio Code 選單欄解析</b></a><br/>
+      <span style="font-size: 12px; color: #909399">不知道 AI IDE 的介面有什麼用的時候，拿以下內容和 AI 對話進行查閱，或者直接檢視。</span>
+    </el-col>
+  </el-row>
+  <div style="margin-top: 12px; font-size: 12px; color: #909399;">
+    支援：按 Ctrl/⌘+F 搜尋關鍵詞；遇到新詞可複製報錯讓 AI 用“小白模式”解釋。
+  </div>
+</el-card>
+
+# 附錄一：常見計算機術語速查表
+
+<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: bold; margin-bottom: 10px;">🗺️ 術語地圖：你將在這裡遇到...</div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;">🖥️ <b>工具介面</b></a><br/>
+      <span style="font-size: 12px; color: #909399">IDE / 終端 / 面板</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-network" style="text-decoration: none; color: inherit;">🌐 <b>網路服務</b></a><br/>
+      <span style="font-size: 12px; color: #909399">URL / 埠 / 本地</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;">⚙️ <b>前後端</b></a><br/>
+      <span style="font-size: 12px; color: #909399">API / JSON / 介面</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-code-basic" style="text-decoration: none; color: inherit;">📝 <b>程式碼基礎</b></a><br/>
+      <span style="font-size: 12px; color: #909399">變數 / 函式 / 元件</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" style="margin-top: 10px;">
+    <el-col :span="6">
+      <a href="#term-debug" style="text-decoration: none; color: inherit;">🐞 <b>除錯查錯</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Bug / 斷點 / 日誌</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-project" style="text-decoration: none; color: inherit;">📂 <b>專案管理</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Git / 倉庫 / 提交</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;">🤖 <b>AI 工具</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Agent / 模型 / Key</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-browser" style="text-decoration: none; color: inherit;">🛠️ <b>瀏覽器</b></a><br/>
+      <span style="font-size: 12px; color: #909399">DevTools / 控制檯</span>
+    </el-col>
+  </el-row>
+</el-card>
+
+這一部分不需要刻意背誦，更重要的是先在腦子裡建立一個印象。
+
+## <span id="term-tool-ui">[一、和“工具介面”有關的詞](#appendix-1-map)</span>
+
+### 1. IDE、編輯器、終端
+
+**IDE（整合開發環境）**  
+可以把 IDE 想象成“程式設計師的工作臺”：
+
+- 一邊是寫字的桌面（編輯器），
+- 一邊有電源插座和按鈕（執行、除錯），
+- 抽屜裡有各種小工具（搜尋、版本管理）。  
+  VS Code、Trae、Cursor 都屬於 IDE 或基於 IDE 改的工具。
+
+**程式碼編輯器（Editor）**  
+更像是“高階記事本”，只負責：
+
+- 讓你打字寫程式碼；
+- 用顏色區分不同內容（語法高亮）；
+- 給你自動補全。  
+  IDE 裡那塊寫程式碼的區域，就是程式碼編輯器。
+
+**終端 / 命令列（Terminal / 命令列視窗）**  
+一個黑底白字的視窗，你在裡面**輸入命令**讓電腦幹活：
+
+- 比如：`npm run dev` 表示“幫我啟動開發伺服器”；
+- `python main.py` 表示“執行這個 Python 檔案”。  
+  可以把它想象成：“你給電腦發一條條簡訊命令，它用文字回覆執行結果”。
+
+### 2. IDE 中幾個常見區域
+
+**活動欄（Activity Bar）**  
+最左邊一排豎著的小圖示，像“功能選項卡”：
+
+- 點檔案圖示 → 左邊顯示檔案列表；
+- 點放大鏡圖示 → 左邊變成搜尋；
+- 點 Git 圖示 → 左邊顯示版本管理。
+
+**側邊欄（Side Bar）**  
+活動欄右邊那一大塊區域，專門顯示當前模式下的內容：
+
+- 檔案模式：展示專案裡的檔案和資料夾；
+- 搜尋模式：展示搜尋結果列表；
+- 原始碼管理模式：展示有哪些檔案被改動。
+
+**編輯區（Editor）**  
+中間最大的區域，就是你開啟檔案後實際看到和修改內容的地方；  
+上方的標籤頁（Tab）是“當前開啟了哪些檔案”。
+
+**底部面板（Panel）**  
+一般在最下方，常見幾種：
+
+- Terminal（終端）：輸入命令跑專案；
+- Problems（問題）：列出出錯的檔案和行號；
+- Output（輸出）：一些工具列印出來的執行資訊；
+- Debug Console（除錯控制檯）：除錯時的輸出。
+
+**狀態列（Status Bar）**  
+最下面那條細細的欄：
+
+- 顯示當前檔案是什麼語言（JS、HTML、Python 等）；
+- 顯示縮排是“2 個空格”還是“4 個空格”；
+- 顯示有沒有錯誤、當前 Git 分支是什麼。  
+  可以把它當作“當前編輯環境的一張小體檢單”。
+
+## <span id="term-network">[二、和“網頁 / 網路 / 服務”有關的詞](#appendix-1-map)</span>
+
+### 1. URL、http、埠、本地服務
+
+**URL（網址）**  
+就是瀏覽器位址列那一串東西，比如：
+
+- `https://www.trae.cn/`
+- `http://localhost:3000/`  
+  它就像“網際網路世界裡某個房間的完整地址”。
+
+**HTTP / HTTPS**  
+在 URL 開頭看到的 `http://` 或 `https://`：
+
+- HTTP：普通傳輸方式；
+- HTTPS：多了一層加密，更安全。  
+  你可以先記成：“寫網頁地址時，通常以 `http` 或 `https` 開頭”。
+
+**埠（Port）**  
+可以把一臺電腦想象成一棟大樓，埠就是**每個房間的門牌號**：
+
+- `:3000` 表示 3000 號房間；
+- 同一臺電腦上，可以同時開多個服務，各佔一個埠。  
+  `http://localhost:3000` 就是“訪問我自己電腦上 3000 號房間裡跑著的那個服務”。
+
+**本地（Local / localhost）**  
+指的就是你自己的電腦。
+
+- `localhost` 可以理解為“這臺機器自己”。  
+  當你訪問 `http://localhost:3000`，其實是在跟自己電腦上執行的程式打交道，而不是上網訪問別人家的伺服器。
+
+**服務（Service / Server）**  
+“服務”就是一個**一直在後臺執行、隨時聽你指令**的程式：
+
+- 網頁服務：瀏覽器訪問一個地址時，它返回網頁內容；
+- 遊戲服務：負責管理對局、存檔、排行榜等。  
+  在終端裡執行 `npm run dev` 啟動專案，本質上就是“在本地開了一個網頁服務”。
+
+## <span id="term-frontend-backend">[三、和“前端 / 後端 / 資料”有關的詞](#appendix-1-map)</span>
+
+### 1. 前端、後端
+
+**前端（Frontend）**  
+使用者**看得見、點得到**的部分：
+
+- 網頁上的按鈕、文字、圖片、動畫；
+- React / Vue 寫出來的頁面。  
+  負責展示介面和響應使用者操作（點選、輸入、拖拽等）。
+
+**後端（Backend）**  
+使用者**看不見**、在伺服器上跑的那部分：
+
+- 存和讀資料（使用者資訊、訂單、分數等）；
+- 執行業務規則（登入驗證、許可權判斷）。  
+  你可以把前端比作“店面和店員”，後端比作“倉庫和賬本系統”。
+
+### 2. 介面、請求、響應、JSON
+
+**介面 / API**  
+前端和後端事先約定好的一套“問問題 + 回答案”的規則。
+
+- 前端說：“我用這個地址、這個格式來問你”；
+- 後端說：“我用這個格式把結果回給你”。
+
+**請求（Request）**  
+前端發給後端的一次“提問”：
+
+- 請求去哪（URL）；
+- 用什麼方式（GET、POST 等）；
+- 帶了什麼引數（比如使用者 ID）。
+
+**響應（Response）**  
+後端給前端的“答覆”：
+
+- 狀態碼（200 成功，404 找不到，500 伺服器出錯）；
+- 實際資料（多半是 JSON）。
+
+**JSON**  
+一種用**很像 JavaScript 程式碼的寫法**來表示資料的格式，比如：
+
+```json
+{
+  "name": "Alice",
+  "score": 120
+}
+```
+
+可以理解成“機器版的鍵值對記事本”，前後端經常用它來交換資料。
+
+## <span id="term-code-basic">[四、和“寫程式碼本身”有關的詞](#appendix-1-map)</span>
+
+### 1. 變數、識別符號、狀態
+
+**變數（Variable）**  
+“給一塊資料貼上的標籤”。
+
+- 例如把分數這件事記作 `score`；
+- 以後用 `score` 這個名字，就能讀寫這塊資料：
+
+```js
+let score = 0
+score = score + 10
+```
+
+**識別符號（Identifier）**  
+“你自己起的各種名字”的統稱：
+
+- 變數名：`score`
+- 函式名：`moveSnake`
+- 元件名：`SnakeGame`  
+  就像給資料夾起名“照片”“工作”“賬單”，方便在程式碼裡區分不同“東西”。
+
+**狀態（State）**  
+程式當前的“關鍵情況記錄”：
+
+- 遊戲是不是已經結束；
+- 蛇現在在第幾格；
+- 當前分數是多少。  
+  在 React 裡，一般會這麼理解：**狀態一改，介面就要跟著更新**。
+
+### 2. 函式、元件、模組
+
+**函式（Function）**  
+把一件“可以反覆做的事”打包起來，起個名字：
+
+```js
+function sayHello(name) {
+  console.log('Hello, ' + name)
+}
+```
+
+以後只要寫 `sayHello('Bob')`，就等於把裡面那幾行再次執行一遍。
+
+**元件（Component）**  
+前端裡的“可以重複用的一塊小介面 + 小邏輯”：
+
+- 一個按鈕可以是元件；
+- 一個頂部導航可以是元件；
+- 整個遊戲區域也可以是一個元件。  
+  元件之間可以拼裝，就像搭樂高。
+
+**模組（Module）**  
+“一組相關程式碼組成的檔案”：
+
+- `snakeLogic.ts` 專門放和“蛇怎麼動”相關的程式碼；
+- `score.ts` 專門放算分數的程式碼。  
+  模組之間可以互相“匯入 / 匯出”，像不同抽屜裡的工具。
+
+### 3. 語法、程式語言、框架
+
+**語法（Syntax）**  
+某門程式語言的“語法規則”和“標點習慣”：
+
+- 字串要加引號；
+- 每條語句末尾要不要寫分號；
+- 程式碼塊要用 `{}` 包起來。  
+  寫錯語法，編譯器 / 直譯器會直接報“語法錯誤”。
+
+**程式語言（Programming Language）**  
+和計算機溝通的一整套規則和詞彙，比如：
+
+- JavaScript、Python、Java、C++、Go……  
+  不同語言適合做的事情、寫法和工具生態不同。
+
+**框架（Framework）**  
+別人幫你“先搭好骨架”的一大套程式碼和套路：
+
+- 前端：React、Vue（幫你處理介面更新、狀態管理等）；
+- 後端：Django、Spring Boot 等。  
+  你等於是在“現成的骨架上填內容”，比從頭造輪子輕鬆很多。
+
+## <span id="term-debug">[五、和“除錯 / 查錯”有關的詞](#appendix-1-map)</span>
+
+### 1. Bug、報錯、日誌 / console.log
+
+**Bug**  
+程式表現和你想的不一樣，就是 bug：
+
+- 本來應該出現按鈕，結果沒有；
+- 本來應該加 10 分，結果多加了一堆；
+- 頁面一開啟就白屏。
+
+**報錯資訊（Error Message）**  
+程式崩了之後，螢幕上 / 終端裡那段“看起來很嚇人”的英文。  
+雖然難看，但通常會告訴你：
+
+- 大致是哪裡錯了；
+- 哪個檔案、第幾行附近需要檢查。  
+  你可以直接複製它，丟給 AI 讓它翻譯和分析。
+
+**日誌（Log）**  
+程式在執行過程中自己“說的話”。  
+最常見的就是前端裡的：
+
+```js
+console.log('當前分數', score)
+```
+
+你可以把它理解成：**在關鍵步驟主動報個數，方便你確認程式是不是按你想的在走**。
+
+> **console.log 是什麼？**
+>
+> - `console` 可以理解為“除錯用的小黑板”；
+> - `.log` 是“在小黑板上寫一行字”；
+> - 瀏覽器按 F12 開啟開發者工具裡的 Console 面板，就能看到這些輸出。
+
+### 2. 除錯、斷點、單步執行、快照
+
+**除錯（Debug / 除錯程式）**  
+當程式出問題時，不是上來就亂改，而是：
+
+- 讓程式在某一行停一下（斷點）；
+- 看一看當前每個變數的值；
+- 一步一步往下走，觀察“從哪裡開始不對勁”。
+
+**斷點（Breakpoint）**  
+可以把斷點想成“在這行插了一個暫停按鈕”：
+
+- 程式平時是一路往下跑；
+- 跑到你插斷點的那一行，會暫時停住，等你檢查。
+
+**單步執行（Step）**  
+從斷點停下來之後，你可以選擇：
+
+- 一行一行往下執行（step over）；
+- 進入某個函式內部詳細看（step into）。  
+  就像看一段舞蹈分解動作一樣，而不是直接看快放影片。
+
+**快照（Snapshot）——簡化理解**  
+這裡的“快照”可以理解為：
+
+> **在某個時間點，把“當前狀態”拍一張照片，方便以後對比。**  
+> 在實際工具裡，“快照”可能指：
+
+- 一次提交時刻專案的完整狀態；
+- 除錯時某個時間點記憶體 / 變數的整體情況。  
+  你先記住這個比喻就夠用：**快照 ≈ 某一刻狀態的留影**。
+
+## <span id="term-project">[六、和“專案管理”有關的詞](#appendix-1-map)</span>
+
+### 1. 專案、工作區、資料夾
+
+**專案（Project）**  
+為實現一個應用而放在同一個資料夾裡的：
+
+- 原始碼檔案
+- 配置檔案
+- 素材（圖片、音訊等）
+
+**工作區（Workspace）**  
+VS Code / Trae 用來描述“當前這一次開啟了一組什麼東西”的概念：
+
+- 開啟一個資料夾 → 一個簡單工作區；
+- 有時也會把多個資料夾合併成一個多專案工作區。
+
+### 2. Git、倉庫、提交（Commit）
+
+**Git（版本控制工具）**  
+可以理解成專案的“時光機”：
+
+- 每次改完一批內容，可以“拍一張版本合照”；
+- 以後需要時，可以回到某個歷史狀態。
+
+**倉庫（Repository / Repo）**  
+開啟 Git 之後，那個帶“版本記錄”的專案資料夾，就叫“倉庫”。
+
+**提交（Commit）**  
+每次你覺得“這波改動算一個階段性成果”，就可以：
+
+- 寫一條說明（比如：`Add score panel`）；
+- 把當前全部修改打包成一個版本；
+- Git 會把這一刻的狀態存下來。  
+  這一次動作就叫“做了一次 commit”。
+
+## <span id="term-ai-tool">[七、和“AI 開發工具”有關的詞](#appendix-1-map)</span>
+
+### 1. AI IDE、Agent、SOLO 模式
+
+**AI IDE**  
+在普通 IDE 的基礎上，多了一層“能聽懂人話、能自己動手”的 AI：
+
+- 你說“做個貪喫蛇”，它能幫你搭專案、寫程式碼；
+- 你把報錯截圖給它，它能先解釋再嘗試修復；
+- 它能跨多個檔案一起改，而不僅僅是一行一行補全。
+
+**Agent（智慧體）**  
+可以把 Agent 想象成一個**長期待命的 AI 小工程師**：
+
+- 會讀你的專案結構；
+- 會拆解任務（先裝依賴、再生成程式碼、再跑專案）；
+- 跑出錯之後，會根據錯誤資訊自己調整方案。
+
+**SOLO 模式（以 Trae 為例）**  
+表示：
+
+> 你只需要把“終點”說清楚，  
+> 它自己規劃“路線”，  
+> 在本地一步步執行，  
+> 中途纔在關鍵節點問你要不要繼續。
+
+### 2. 模型、金鑰（API Key）
+
+**模型（Model，這裡特指大語言模型）**  
+這個詞可以簡單理解為“背後那一大坨 AI 大腦”：
+
+- 比如 GPT、Claude、Kimi、GLM 等；
+- 不同模型在“理解中文”“寫程式碼”“推理”上水平不一樣；
+- AI IDE 裡通常可以在下拉選單裡換不同模型使用。
+
+**金鑰 / API Key**  
+你可以把 API Key 理解為**一個很長的“高階密碼 + 身份證號”**，  
+它的作用只有一個：
+
+> 告訴別人的伺服器：“我是哪個使用者，請允許我使用你們的 AI 服務，並幫我記賬。”
+
+幾個要點：
+
+- 這串東西通常是一長串隨機字母數字；
+- 不能發到公開的地方（倉庫、截圖、羣聊），別人拿到就可以冒用你的賬號；
+- 在工具裡填 API Key，就等於“把鑰匙插進鎖裡”，之後工具就能幫你呼叫對應的 AI 服務。
+
+## <span id="term-browser">[八、和“瀏覽器 / 開發者工具”有關的詞](#appendix-1-map)</span>
+
+**Chrome（谷歌瀏覽器）**  
+現在前端開發最常用的瀏覽器之一：
+
+- 開啟網頁快；
+- 自帶比較強的“開發者工具”，方便查問題。
+
+**重新整理（Refresh / Reload）**  
+重新載入當前網頁：
+
+- 修改前端程式碼後，如果沒有自動重新整理工具，手動按重新整理才能看到效果。
+
+**開發者工具（DevTools）**  
+瀏覽器裡專門給開發者用的一組工具面板：
+
+- 檢視網頁結構（Elements）；
+- 檢視樣式（Styles）；
+- 查錯誤和日誌（Console）；
+- 查網路請求（Network）。  
+  在 Chrome 裡通常按 `F12` 或 `Ctrl+Shift+I` 開啟。
+
+**Console（控制檯）**  
+開發者工具裡的一個標籤頁，專門展示：
+
+- 你寫的 `console.log(...)` 輸出；
+- 執行過程中發生的錯誤（紅字）。  
+  你可以當它是“程式的聊天框”：
+- 程式有話要說，就寫在這裡；
+- 你除錯時最常看的就是這一塊。
+
+如果後面你在學習過程中又遇到新的詞，也可以按這個風格讓 AI 協助你補充全部內容：
+
+- 先寫一句“它是幹嘛的”；
+- 再寫一句“可以把它想象成什麼”；
+- 最後給一個特別簡單的小例子。  
+  這樣你的“個人術語表”會越長越實用，逐漸能夠更好的與計算機進行溝通。
+---
+title: '初級二：學會 AI 編程工具'
+description: '從網頁 AI 編程走向本地：理解 IDE 與 AI IDE，使用 Trae 在本地完成貪吃蛇實戰，並掌握高效與 AI 對話的技巧。'
+---
diff --git a/docs/zh-tw/stage-1/learning-map/index.md b/docs/zh-tw/stage-1/learning-map/index.md
new file mode 100644
index 0000000..20aa358
--- /dev/null
+++ b/docs/zh-tw/stage-1/learning-map/index.md
@@ -0,0 +1,275 @@
+---
+title: '從創意到 AI 產品 - Easy-Vibe 學習路線圖'
+description: '學習 AI 程式設計完整路線圖：從零基礎到全棧開發。掌握 Vibe Coding、Claude Code、Cursor 等 AI IDE 工具，學會產品思維、全棧開發和 AI 能力整合。'
+---
+
+<script setup>
+import { relatedArticlesMap } from '@theme/data/relatedArticles'
+
+const relatedArticles = relatedArticlesMap['zh-tw/stage-1/learning-map'] ?? []
+</script>
+
+# 從創意到 AI 產品
+
+::: info 特別感謝
+特別感謝來自 **清華大學深圳國際研究生院** 的同學們對本課程的測試、反饋和支援！你們的意見和貢獻讓這門課程變得更好。[👉 檢視完整貢獻者名單](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
+:::
+
+以前做軟體，門檻很高：你要懂程式設計、懂演算法，還得有幾年的專案經驗。
+現在不一樣了。只要你有想法，AI 就能幫你寫程式碼。
+
+這是一個巨大的變化：**程式語言正在變成自然語言**。
+
+大語言模型（LLM）的出現，讓開發不再是“技術大神的專屬”，而是變成了每個人都能上手的工具。曾經最難的是“怎麼寫程式碼”，現在最難的是“**你要做什麼**”。
+
+> **什麼是 Vibe Coding？**
+> 簡單說，就是“用說話來程式設計”。 氛圍程式設計的意思是你可以依賴只和 AI 對話，而不是直接寫程式碼的方式，來完成程式設計專案。
+
+當然，讓 AI 寫出程式碼只是第一步。要做出一個真正能用的產品，你還會遇到這些問題：
+- 怎麼讓 AI 寫出乾淨、能維護的程式碼？
+- 怎麼把零散的程式碼拼成一個能跑的應用？
+- 怎麼讓應用真正上線、被人用到？
+- 怎麼把文字生成、影象識別這些 AI 能力裝進你的產品？
+
+這些問題將在這門課中找到答案。
+
+不管你是學生、老師、醫生、工人，還是任何一位對技術一竅不通的普通人——不用先學幾年程式設計，兩週時間就能做出能跑、能演示的產品原型。
+
+| 你的身份 | 這門課能幫你 |
+|---------|-------------|
+| 學生 | 作業、比賽、創業，自己動手做專案，不再求人 |
+| 職場人 | 把重複工作自動化，提升效率，甚至開發副業 |
+| 產品經理 / 設計師 | 想法不再停留在紙面，能快速做出 Demo 給老闆/客戶看 |
+| 創業者 / 中小企業主 | 低成本驗證想法，不用花幾萬塊找外包也能做出 MVP |
+| 老師 / 教育工作者 | 製作教學工具、課件、自動化出題，提升教學效率 |
+| 醫生 / 律師 / 專業工作者 | 把專業流程自動化，打造自己的效率工具 |
+| 任何人 | 用 AI 解決生活/工作中的具體問題，讓不可能變成可能 |
+
+AI 時代，執行力和想法永遠比技術更重要。
+
+## 成長路徑：從“會用 AI”到“會做 AI 產品”
+
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>新手入門</h3>
+    <p class="stage-role">體驗 AI 程式設計</p>
+    <div class="stage-tags">
+      <span>貪喫蛇小遊戲</span>
+      <span>零基礎上手</span>
+      <span>Vibecoding 初體驗</span>
+      <span>幾分鐘生成</span>
+    </div>
+  </div>
+</div>
+
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>第一階段</h3>
+    <p class="stage-role">產品經理 / 運營</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>需求拆解 & 原型</span>
+      <span>接入 AI 能力</span>
+      <span>完整 Demo 開發</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>第二階段</h3>
+    <p class="stage-role">初中級開發 / 獨立開發者</p>
+    <div class="stage-tags">
+      <span>Figma 到程式碼</span>
+      <span>Supabase 資料庫</span>
+      <span>Stripe 支付整合</span>
+      <span>Dify 知識庫</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>第三階段</h3>
+    <p class="stage-role">高階開發 / 架構師</p>
+    <div class="stage-tags">
+      <span>Web/小程式/多端</span>
+      <span>MCP 高階工具</span>
+      <span>RAG & LangGraph</span>
+      <span>高階工程師思維</span>
+    </div>
+  </div>
+</div>
+
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
+
+透過這個完整的學習路徑，你將獲得：
+
+- **Vibe Coding開發能力：** 熟練使用 vibecoding 思維和 AI 編碼工具，將開發效率提升數倍。不再需要死記硬背語法，而是學會如何引導 AI 生成高質量程式碼。
+- **全棧開發技能：** 從 UI 設計到前端實現，從資料庫設計到 API 開發，從本地開發到雲端部署，掌握現代 Web 應用的完整技術棧。
+- **AI 能力整合：** 學會呼叫各類多模態 AI API，將文字、影象、語音等 AI 能力無縫整合到你的應用中，並透過 RAG 等技術構建智慧化產品。
+- **產品思維與運營能力：** 從使用者研究到需求拆解，從 MVP 設計到產品迭代，從支付整合到使用者管理，形成完整的產品開發與運營閉環。
+
+# 學完能做什麼？
+
+## 第一階段：做出你的第一個產品原型
+
+這個階段適合完全沒程式設計基礎，或者只會一點點但不太自信的同學。你不用先學一堆理論知識，而是直接跟著做，在做的過程中學會用 AI 工具寫程式碼。
+
+**學完你能**：
+- 用 AI 程式設計工具獨立完成一個網頁應用
+- 把產品想法變成能點選、能互動的原型
+- 給原型加上 AI 功能（比如文生圖、智慧對話）
+- 遇到報錯知道怎麼排查和解決
+
+簡單說，就是能做出一個"能跑、能給別人演示"的東西。
+
+我們可以先透過小遊戲感受 AI 程式設計，然後學會用 AI 程式設計工具幫你寫程式碼、改報錯。接著從簡單頁面開始，逐步做出能互動的多頁面應用，再加上文生圖、智慧對話這些 AI 功能。最後獨立完成一個完整專案，讓你的創意能夠真正擁有落地的可能。
+
+# 為什麼要用專案制來訓練？
+
+> **現實世界的挑戰**
+>
+> 原因其實很簡單：按照大多數同學現在的狀態，直接走入職場，很可能會在真實專案和老闆 / 客戶的“社會毒打”下寸步難行。現實世界更常見的場景是：
+
+> 你的導師 / 老闆：我們要做一個 xxx，目標是達到 yyy 的效果。
+>
+> 文件？現成框架？詳細的需求說明？很多時候都不存在。
+
+真實工作中的許多工，本質上就是在高度不確定的環境下解決從未見過的問題：需求是模糊的，邊界是變化的，沒人告訴你標準答案，你需要自己查資料、做實驗、搭原型、不斷迭代，最後給出一個“能跑、能用、能上線”的解決方案。
+
+這門課想做的，就是在一個相對安全的環境裡，提前給你一次“模擬社會毒打”：
+
+- 透過看似有一定難度的專案任務，迫使你練習拆解問題、設計方案、自己尋找資料
+- 透過不那麼“傻瓜化”的腳手架和程式碼，讓你學會閱讀、理解和改造一份中大型程式碼庫
+- 透過從創意到上線的完整閉環，讓你體驗真實產品從 0 到 1 的完整過程
+
+短期來看，這種訓練確實比較折磨人；但從長期來看，它會極大提高你在求職和職業發展中的競爭力：你會更能扛事兒，更能在不確定環境中找到突破口，也更有能力把 AI 變成真正落地的產品，而不是停留在“玩玩 Demo”階段。
+
+# 提問的藝術：AI 時代的必備技能
+
+在 AI 時代，提問也屬於一種 “基本功”。同一份程式碼、同一個報錯，**你怎麼提問，幾乎決定了 AI 能給出怎樣的答案**：是泛泛而談，還是一步一步給出可落地的改法。
+
+**養成好習慣**：把“向 AI 提問”當成日常開發流程的一部分：遇到不懂、卡住的問題就立刻問。
+
+## 為什麼這是必備技能？
+
+- **現實很少有完整文件**：更多時候你面對的是不清晰的需求、半成品程式碼、零散的錯誤資訊
+- **AI 是你隨身的導師 + 同事**：會提問的人，能把它變成“高質量的結對程式設計”
+- **能力上限由溝通決定**：你越能提供關鍵資訊、越能約束輸出格式，答案越可用
+
+**常見誤區**：只問一句“為啥報錯？”通常只能得到一堆猜測。把上下文補齊，才會得到可執行的方案。
+
+## 如何把資訊"餵給"AI：截圖 vs 複製貼上
+
+兩種方式都可以，但用途不同：
+
+| 方式         | 適用場景                                  | 關鍵要求                                  |
+| ------------ | ----------------------------------------- | ----------------------------------------- |
+| **複製貼上** | 報錯堆疊、日誌、程式碼、配置、API 返回      | 儘量完整，不要只截一行關鍵字              |
+| **截圖**     | UI 佈局問題、互動異常、工具介面找不到按鈕 | 截全屏 + 標註重點區域，最好配一句文字說明 |
+
+::: danger ⚠️ 重要前提
+**並非所有 AI 都支援圖片輸入。** 截圖溝通需要 AI 具備多模態能力（即能夠理解和分析圖片）。目前支援圖片輸入的 AI 包括：Claude (Anthropic)、GPT-4V/GPT-4o (OpenAI)、Gemini (Google)、以及部分國產大模型如通義千問、文心一言等。
+
+**如果你使用的 AI 不支援圖片輸入**，截圖將無法被識別，此時請改用複製貼上文字的方式溝通。
+:::
+
+## 讓 AI “解釋得很好”的提示詞技巧
+
+如果你不是隻要答案，而是要“學會”答案。使用類似下面指令能顯著提升解釋質量：
+
+> **學習型提問示例**
+>
+> - “請先用 5 句話講清楚這個概念，再給幾個問題提問我驗證我理解對了沒。”
+> - ”請你詳細解釋一下這個報錯資訊，我不理解為什麼會報錯。”
+
+# 堅持了好久還是搞不定，我想放棄了
+
+也許是你堅持的方法不對。不要一個人在黑暗中硬撐，可以來跟作者和助教們聊聊：把你已經嘗試過的方法、遇到的具體卡點、和你目前的心理狀態，坦誠地說出來。很多時候，只要稍微調整一下方向、補上一個關鍵知識點，你就能繼續往前走。
+
+# 我覺得教程有的設計不合理
+
+歡迎隨時聯絡作者、提交 issue，或者在羣裡 / 課堂上直接反饋。我們非常希望和你一起把這套教程打磨得越來越好：哪裡不清晰、哪裡體驗不好、哪裡讓你白費力氣，都可以坦誠指出來。越真實、越具體的反饋，越能幫助後來者少踩坑。
+
+# Reference
+
+- [南京大學 電腦科學與技術系 計算機系統基礎 課程實驗](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
+
+<RelatedArticlesSection
+  title="接下來可以學什麼"
+  description="按“從會用 AI 到會做產品”的路線，繼續向前推進。"
+  :items="relatedArticles"
+/>
diff --git a/scripts/generate-sitemap.mjs b/scripts/generate-sitemap.mjs
index 4271f31..10003bc 100644
--- a/scripts/generate-sitemap.mjs
+++ b/scripts/generate-sitemap.mjs
@@ -80,14 +80,22 @@ function mdPathToUrl(mdPath, locale) {
   let urlPath = mdPath.replace(/\.md$/, '')
 
   // 如果是 index.md，只保留目录
+  let isIndex = false
   if (urlPath.endsWith('/index')) {
     urlPath = urlPath.slice(0, -6)
+    isIndex = true
   } else if (urlPath === 'index') {
     urlPath = ''
+    isIndex = true
   }
 
   // 构建完整 URL
-  return `${siteUrl}/${locale}/${urlPath}${urlPath ? '/' : ''}`
+  // VitePress "clean URLs" typically map:
+  // - index pages to trailing-slash paths: /foo/
+  // - non-index pages to non-trailing-slash paths: /foo/bar
+  // Having a trailing slash for non-index pages can lead to 404 on static hosts.
+  const suffix = isIndex ? '/' : ''
+  return `${siteUrl}/${locale}/${urlPath}${suffix}`
 }
 
 function getGitLastModified(filePath) {