极点宏观｜Financial Cloud Cloud · 构建文章
利用 Vibe Coding 开发技巧打造 AWS 认证模拟练习室
这篇文章介绍如何通过 Vibe Coding（氛围编程），将一段粗糙的提示词历程转化为可运作的 AWS 认证模拟练习室。文中将说明如何将开发意图转化为数据规格、打造快速的静态原型、保持用户界面（UI）简洁，并将每一次的提示词视为一项产品决策。我们的焦点在于实践应用：从小处着手构建、验证行为、保留上下文脉络，并在不失去开发动能的情况下，通过下一个提示词持续微调系统。
免责声明
目的： 本平台为一项独立项目，专为推动教育探索与人工智能研究而构建。旨在促进对现代科技的深入理解，不受任何外部影响。用户可在此安全环境中研究复杂系统、测试创新想法并安全地学习。
非商业性： 本独立项目绝无任何潜在的商业模式。严禁且不旨在产生任何财务收益、货币利润或任何实质商业价值。我们的核心焦点纯粹在于学术发展，确保用户在访问时完全免于隐藏成本、企业赞助或广告策划。
无担保保证： 由于本平台是利用实验性人工智能的教育工具，产生的输出内容有时可能不准确、具误导性或完全不完整。所有提供的内容均严格依「现状」（as is）提供，不提供任何明示或暗示的保证、事实正确性担保或对整体可靠性的任何承诺。
目录
● 第一部分：从产品合约开始
第一章节解释此 Demo 如何从原始的考试内容和零散的想法，演变成稳定的产品合约（Product Contract）：JSON 数据、静态 HTML、查询字符串路由（query-string routing）以及直观的学习者反馈。
● 第二部分：将提示词视为产品增量
本章节说明为何最有效的提示词是微小的产品增量（Product Deltas）而非宽泛的指令，以及每条指令如何改变开发者可立即检查的界面。
● 第三部分：在美化装饰前创建信任感
本章节解释深色 AWS 风格的着陆页、免费赠送消息、认证题库卡片、文章链接和 Metadata，如何作为创建信任的信号，而非仅仅是装饰性的设计。
● 第四部分：坚持静态 Demo，直到非变不可
本章节主张采用静态文件、简单的 JavaScript、可重复使用的 JSON，并且在产品明确证实系统何处真正需要引入复杂度之前，绝不轻易使用框架。
● 第五部分：将提示词日志转化为构建蓝图
本章节展示如何将提示词历程记录转化为开发意图、设计决策、修正过程的记录，并作为未来教学 Vibe Coding 实践的博客题材。
第一部分：从产品合约开始
目标： 构建一个学习产品，使其能从单一的 AWS Certified Data 模拟题集扩展为可重复使用的认证练习室，而无需为每个新主题重新构建 UI。
提示词：
提示词历程始于内容转换：保留原始内容，将输出格式变更为模板格式，接着遵循题目指引，将 JSON 升级至更专业的水平。
结果： 系统最终采用了一套 JSON 规格合约，其中包含考试 Metadata、章节、题目、选项、答案、答案摘要和选项解析。这套合约让 HTML 播放器的设计变得非常简单。
技巧：
● 在美化 UI 之前，先定义好数据结构。
● 将第一个 JSON 文件作为未来所有题库的模板。
● 保留答案解析，因为「反馈」才是学习产品的核心。
● 使用章节和题号作为稳定的导航锚点。
● 将每个内容文件视为 API，即使它只是静态 JSON。
文件夹结构信号（Folder signals）：
● 首页（Landing page）： index.html，一个深色 AWS 风格的教育首页，包含 Open Graph Metadata、汉堡菜单导航、独立的语言选择器、焦点区块（hero section）、免费活动消息、认证题库网格、AWS Builder 文章卡片以及响应式行为。
● 练习播放器（Practice player）： practice-room.html，一个简单的深色模式单选与复选应用程序，可从 URL 查询字符串中读取考试、章节和题号，并加载对应的 JSON 文件。
● 语言层（Language layer）： 包含 20 个已翻译的首页，加上英文版的 index.html。每个选择器选项都指向已部署的绝对路径，格式如 index_{lang_code}.html。
● 题库合约（Exam-bank contract）： 每个 JSON 文件均使用 exam、title、source、chapters、questions、number、question、options、answer、answer_summary 和 explanations。这项合约能让单一前端加载多个不同的练习题组。
● 题目指引素材（Question-guide material）： 该指引强调效度、信度、公平性、具诱惑力的干扰项、主动语态、角色对齐、认知复杂度以及证明正确答案为何正确的解析。
● 提示词历程（Prompt trail）： 迭代构建笔记记录了模板转换、移动设备版面配置、提交与下一步行为、认证卡片、屏幕截图、语言本地化以及绝对路径语言 URL 的指令。
题库规模：
● AWS AI Development 认证考试：1 章，共 20 题。
● AWS Generative AI Dev Organization 认证考试：4 章，共 80 题。
● AWS Networking Core 认证考试：2 章，共 98 题。
● AWS FSI Trading Desk Design 认证考试：34 章，共 680 题。
● AWS Certified Cloud Operations 认证考试：5 章，共 520 题。
● AWS FSI Macro Trading 认证考试：23 章，共 380 题。
● AWS Certified Machine Learning 认证考试：4 章，共 460 题。
● AWS Certified Data 认证考试：5 章，共 82 题。
● AWS Certified Data 认证考试 (Version 1)：5 章，共 82 题。
第二部分：将提示词视为产品增量
目标： 通过一次只要求一个肉眼可见的变更，在每次迭代后依然保有可运作的 Demo，借此维持开发动能。
提示词：
最有效的提示词都非常具体：添加移动设备响应式练习室、放大题目按钮、添加认证卡片、将语言选择器移到卡片外、使用绝对 URL。
结果： 最终的 Demo 反映了许多细微但保持一致的变更，因为每个提示词都指明了文件、界面、目标行为或可重复使用的实现风格。
技巧：
● 指明哪个文件负责该变更。
● 使用现有的 UI 作为样式来源。
● 在链接至关重要时，提供精确的查询字符串。
● 将版面配置（layout）请求与数据请求分开。
● 在加入下一项功能之前，先审查目前的结果。
形塑此系统的提示词摘录：
● 创建多选题认证练习的移动设备响应式 HTML 网页。
● 台式机版面配置：左侧为题目列表，右侧为题目与答案选择区域。
● 移动设备版面配置：上方为题目与答案选择区域，下方为题目按钮列表。
● 点击「提交（Submit）」应显示正确与错误答案的解析；点击「下一步（Next）」应跳至下一题。
● 使用 URL 查询字符串中的考试名称、章节和题号来导向相关题目。
● 创建一个名为 index.html 的全新网页，作为教育科技新创公司的官方网站。
● 醒目显示免费活动，并在 HTML 网页上展示可用的考试主题。
● 使用导航栏汉堡菜单，并让整张卡片皆可作为链接点击。
● 在 AWS Exam Library 区块加入主视觉图片，移动设备版使用 screenshot2.png。
● 参照 AWS Certified Data Exam Questions 的样式来添加认证卡片。
● 添加选择语言导航栏，将其移至卡片外，翻译所有网页，并使用绝对语言 URL。
第三部分：在美化装饰前创建信任感
目标： 在加入繁复的视觉效果或复杂的应用程序架构之前，先让着陆页显得专业且可信。
提示词：
提示词要求创建一个具备现代 AWS 风格、社交 Metadata、醒目免费活动、认证题库入口以及 AWS Builder 文章卡片的教育科技新创官方网站。
结果： 着陆页成了一个创建信任感的基石：包含焦点定位、语言选择器、免费活动消息、认证卡片、全卡片点击链接、屏幕截图、文章链接和简洁的页脚。
技巧：
● 提早使用 Metadata，因为分享也是产品的一部分。
● 将卡片转换为链接，以提升移动设备上的可探索性。
● 使用单一且明确的焦点消息，避免多个诉求互相竞争。
● 保持深色模式简洁且易读。
● 让屏幕截图发挥作用，这比用文本解释题库更快速有效。
关键洞察：
信任感是可以被规划出来的。网页不需要绚丽的动画来营造真实感，它需要的是一致的字体排版、符合预期的链接、清晰的状态标签，以及能向用户证明练习题组目前已可使用的实证。
第四部分：坚持静态 Demo，直到非变不可
目标： 在验证学习流程、目录、本地化和内容模型的阶段，避免不必要的后端开发工作。
提示词：
提示词从未要求创建帐户、注册、付款或服务器工作阶段（sessions）。它们只要求提供链接、静态 HTML、加载 JSON，以及让 AWS 开发者能直接访问。
结果： 产品保持可作为静态资产部署的状态。浏览器会根据名称加载 JSON、更新查询字符串、渲染题目、检查答案并显示解析。
技巧：
● 当状态模型（state model）很清晰时，「静态优先」绝非简陋。
● 查询字符串（Query Strings）非常适合用来分享目前的学习状态。
● 在有真正必要的需求之前，避免加入登录功能。
● 不要仅为了渲染卡片就引入项目构建流水线（build pipeline）。
● 让内容文件来承载系统的扩展规模。
这是一个经典的 Vibe Coding 胜利：
原型之所以能顺利上线，是因为我们拒绝让系统架构变得比用户的体验旅程还要复杂有趣。
第五部分：将提示词日志转化为构建蓝图
目标： 将提示词历史记录当作文档，记录产品的演变历程以及各项决策背后的原因。
提示词：
提示词历程记录了关于模板、移动设备版面配置、卡片链接、汉堡菜单、语言名称、翻译、绝对路径、添加考试以及练习室行为的各项决策。
结果： 这段提示词历程现在可重复使用，作为新手引导教材、QA 测试笔记、博客素材以及未来的提示词种子。它不仅说明了完成后的 Demo，也记录了达成此结果的实现路径。
技巧：
● 在想法还在发展阶段时，将提示词日志保留在 Demo 文件附近。
● 将每个提示词总结为一个「意图」，而不仅仅是指令。
● 利用日志找出可重复套用的模式。
● 当 Demo 规模扩大时，将草稿笔记移至开发（dev）文件夹中。
● 将最佳的提示词模式转化为检验清单。
对于 Vibe Coding 而言，日志本身就是产品的一部分。 它不是开发过程中的意外产物，而是记录人类引导、AI 运行、修正调整以及最终上线行为的珍贵记录。
1：提示词压缩
背景： 早期的开发笔记充斥着繁复的愿望：一个练习室、一个着陆页、免费活动、各种认证题库以及移动设备的行为。其中最关键的实用技巧，就是将每个愿望压缩成一条指令，并明确指名文件名称与可见的变更。
目标： 将宽泛的意图转化为 AI 程序代理（coding agent）可以直接运行的提示词，无需让 AI 去猜测归属或范围。
提示词：
使用简短的增量指令，例如「index.html 添加 AWS Certified Machine Learning 卡片」或「practice-room.html 放大移动设备版按钮」。
结果： 产品持续演进，且完全没有破坏现有已正常运作的功能，因为每个提示词都拥有微小的目标以及显而易见的审查点。
技巧：
● 优先指名文件名称。
● 点名预期的 UI 元素。
● 在关键之处提供精确的链接或查询字符串。
● 避免将不相关的版面配置与内容变更混在一起。
● 在提交下一个提示词之前，先进行审查。
来自 Demo 的佐证： 产品持续演进，且完全没有破坏现有已正常运作的功能，因为每个提示词都拥有微小的目标以及显而易见的审查点。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「提示词压缩」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
2：规格优先思维
背景： 考试内容最初是模板文本和从 PDF 提取的素材，但在应用程序扩展至其他主题之前，需要一个稳定的数据架构。
目标： 将 JSON 规格合约作为产品的核心，以便同一个渲染器（renderer）能加载所有的认证题库。
提示词：
遵循 AWS Certified Data 的题目 JSON，作为新认证题组的模板。
结果： Schema（数据规格）变得符合预期：包含考试 Metadata、章节、题号、题目文本、选项、答案数组、答案摘要和选项解析。
技巧：
● 将 JSON 视为 API。
● 将答案保持为数组格式。
● 使用以选项为键（option-keyed）的解析。
● 将标题保存在数据中。
● 拒绝一次性的特殊内容格式。
来自 Demo 的佐证： Schema（数据规格）变得符合预期：包含考试 Metadata、章节、题号、题目文本、选项、答案数组、答案摘要和选项解析。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「规格优先思维」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
3：移动设备优先审查
背景： 第一个台式机设计很简单：左侧为题目按钮，右侧为作答区域。然而，移动设备需要完全不同的阅读顺序。
目标： 在加入视觉修饰之前，先确保练习流程在小屏幕上顺畅好用。
提示词：
移动设备版本：上方为题目与答案选择区域，下方为题目按钮区域，放大提交与下一步按钮。
结果： 练习室采用了响应式排序和更大的触摸目标，这让测验体验显得经过精心设计，而非只是硬塞进手机画面中。
技巧：
● 测试大拇指的点击动线（thumb path）。
● 在移动设备上，将核心内容置于导航栏之上。
● 增加点击目标的大小。
● 保持目前题目清晰可见。
● 不要把提交按钮藏得太深。
来自 Demo 的佐证： 练习室采用了响应式排序和更大的触摸目标，这让测验体验显得经过精心设计，而非只是硬塞进手机画面中。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「移动设备优先审查」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
4：克制的深色模式
背景： 用户要求深色模式以及无多余装饰的简单设计。这项限制保护了 Demo，使其免于产生过度包装与杂乱的设计输出。
目标： 采用克制的视觉系统，以利于用户集中注意力、进行长时间阅读并快速查看答案。
提示词：
网页设计：深色模式，简单且不加任何装饰。
结果： 最终的网页使用了柔和的边框、易读的对比度、紧凑的卡片排版，并搭配类似 AWS 的经典橘色作为点缀，完全没有多余的动画。
技巧：
● 谨慎着色，避免色彩过于杂乱。
● 将文本对比度视为首要考量。
● 宁可使用边框，也不要使用厚重的阴影。
● 保持表单的沉稳与简洁。
● 让内容本身成为网页的主角。
来自 Demo 的佐证： 最终的网页使用了柔和的边框、易读的对比度、紧凑的卡片排版，并搭配类似 AWS 的经典橘色作为点缀，完全没有多余的动画。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「克制的深色模式」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
5：营销诱因
背景： 官方网页需要在访客点击练习链接之前，清楚说明为什么他们应该关注这个平台。
目标： 将免费活动和认证题库转化为清晰的诱因（hook），而不将产品隐藏在注册机制之后。
提示词：
醒目显示免费活动：免费访问 AWS Certified Data、Generative AI、Machine Learning、Cloud Operations、Networking、Financial Service Trading Desk on AWS。
结果： 首页焦点区块让产品价值一目了然，而认证题库网格则能立刻呈现目前可用的练习题组。
技巧：
● 说清楚什么是免费的。
● 列出高辨识度的主题。
● 将行动号召（Call to Action）置于诱因附近。
● 避免使用含糊不清的平台术语。
● 用直接的链接来证明所言非虚。
来自 Demo 的佐证： 首页焦点区块让产品价值一目了然，而认证题库网格则能立刻呈现目前可用的练习题组。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「营销诱因」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
6：卡片一致性
背景： 每张新加入的认证卡片，在样式、用字和行为上都可能产生偏差。重复使用 Data 卡片的规格能有效避免这个问题。
目标： 让目录的扩展变得标准化且简单：在不重新设计题库版面的情况下，直接添加主题。
提示词：
添加 AWS AI Development 模拟题，遵循 AWS Certified Data 模拟题的样式，并提供链接 aws_ai_development_exam_questions&chapter=1&question=1。
结果： 新的考试主题以卡片形式加入网格中，具备一致的状态标签、描述文本和点击提示。
技巧：
● 拷贝经过验证的卡片样式。
● 仅修改标题、描述和链接。
● 保持完全相同的状态用语。
● 使用全卡片点击链接。
● 确认目标 JSON 文件确实存在。
来自 Demo 的佐证： 新的考试主题以卡片形式加入网格中，具备一致的状态标签、描述文本和点击提示。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「卡片一致性」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
7：迭代日志
背景： 提示词历程记录了许多微小的修正：修改文本、移动元素、添加卡片、翻译网页以及转换 URL。
目标： 将构建历史当作产品规划图，而非用完即丢的对话废弃物。
提示词：
通过指明最新需要调整的行为，持续进行微调。
结果： 这些笔记成为撰写技术说明与重构产品决策的可靠信息来源。
技巧：
● 记录开发意图，而非仅仅是输出结果。
● 在脑海中将相关的提示词进行分组。
● 寻找重复出现的指令模式。
● 将修正措施转化为规则。
● 将历程记录用于 QA 质量测试。
来自 Demo 的佐证： 这些笔记成为撰写技术说明与重构产品决策的可靠信息来源。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「迭代日志」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
8：免构建的静态部署
背景： 本项目从不需要后端服务器来验证学习闭环。静态文件已足够应付着陆页、本地化网页、JSON 题库与测验播放器。
目标： 以最小的部署范围（deployment surface）交付实用的 Demo。
提示词：
在 exam-practice-room 文件夹中创建 HTML 网页和 JSON 文件。
结果： Demo 可直接作为静态资产运作：由浏览器处理数据获取、画面渲染、答案检查与网页导航。
技巧：
● 除非应用程序状态确实需要服务器，否则应优先考虑静态部署。
● 保持文件名称具有清晰语意。
● 使用查询字符串（Query Strings）来实现深层链接（Deep Links）。
● 避免为简单网页引入复杂的构建工具。
● 让静态部署来简化调试流程。
来自 Demo 的佐证： Demo 可直接作为静态资产运作：由浏览器处理数据获取、画面渲染、答案检查与网页导航。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「免构建的静态部署」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
9：遵循出题指引
背景： 出题指引中引入了效度、信度、公平性、具诱惑力的干扰项、主动语态以及认知复杂度。
目标： 采用专业的试题撰写标准，避免 AI 产生的模拟题流于肤浅的冷知识。
提示词：
遵循出题指引，并将练习题组升级至专业水平。
结果： 内容模型保留了选项级别的逻辑解析，使每一次的解释都成为学习价值的一部分。
技巧：
● 撰写具说服力的干扰项。
● 避免使用陷阱式字眼。
● 采用主动语态。
● 契合角色定位与认知层级。
● 详细说明答案正确的原因。
来自 Demo 的佐证： 内容模型保留了选项级别的逻辑解析，使每一次的解释都成为学习价值的一部分。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「遵循出题指引」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
10：直接访问
背景： 营销策划书中明确指出：无需信用卡、无需注册，直接为开发者提供网站链接。
目标： 消除读者与模拟练习体验之间的阻碍与摩擦。
提示词：
直接为每位 AWS 开发者提供网站链接；无需信用卡，也无需注册。
结果： 每张可用的卡片都直接链接至练习室的查找状态网址。
技巧：
● 不要对免费的价值设置过多门槛。
● 确保用户的第一次点击是实用的。
● 点开即直接进入实际题目。
● 避免弹出窗口（modal）的干扰。
● 使用可供分享的网址链接。
来自 Demo 的佐证： 每张可用的卡片都直接链接至练习室的查找状态网址。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「直接访问」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
11：克制的焦点图片
背景： 认证题库需要视觉上的佐证，但原先的社交横幅（social banner）区块反而成了多余的噪音。
目标： 利用屏幕截图说明产品界面，同时移除无法引导用户采取行动的装饰性区块。
提示词：
在 AWS Exam Library 区块中加入焦点图片：screenshot.png；移动设备版则使用 screenshot2.png。
结果： 题库区块成功加入了响应式图片，同时移成了不相关的横幅文案。
技巧：
● 将产品屏幕截图作为最佳佐证。
● 针对台式机与移动设备的长宽比进行优化。
● 移除重复的视觉诉求。
● 保持替代文本（alt text）有其实际意义。
● 绝不要让图片取代了清晰的链接。
来自 Demo 的佐证： 题库区块成功加入了响应式图片，同时移成了不相关的横幅文案。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「克制的焦点图片」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
12：汉堡菜单导航
背景： 网页需要在台式机和移动设备上采用相同的紧凑型导航模式，而非使用两种各自独立的架构逻辑。
目标： 让导航菜单在不同屏幕尺寸上皆显得紧凑且符合预期。
提示词：
使用导航栏汉堡菜单；不论是桌面版或手机版，均统一改为移动设备版的导航栏。
结果： 页眉使用了一个菜单按钮，可切换各区块链接，并在用户选取链接后自动关闭。
技巧：
● 使用 aria 属性以提升无障碍性。
● 保持导航标签简短。
● 在用户选取后立即关闭菜单。
● 避免使用单独的桌面专用导航逻辑。
● 确保品牌标志（brand logo）持续清晰可见。
来自 Demo 的佐证： 页眉使用了一个菜单按钮，可切换各区块链接，并在用户选取链接后自动关闭。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「汉堡菜单导航」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
13：语言选择器的置放位置
背景： 选择器起初位于焦点卡片（hero card）内部，但这使其看起来像卡片本身的内容，而非全域导航控制项。
目标： 在焦点消息之前，将语言选择功能移至独立的控制项中。
提示词：
将选择语言功能移出卡片，作为一个独立的元素。
结果： 选择器目前位于卡片上方，明确发挥了网页级别控制项的功能。
技巧：
● 全域控制项不应看起来像文章的本文内容。
● 尽早置放语言选择控制项。
● 保持标签简洁。
● 保留已选择的语言状态。
● 移动后，请测试其中一个本地化网页。
来自 Demo 的佐证： 选择器目前位于卡片上方，明确发挥了网页级别控制项的功能。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「语言选择器的置放位置」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
14：绝对路径指令
背景： 相对语言链接在本地端运作正常，但公开发布的网页需要能从任何路由导向可预期的目的地。
目标： 确保部署后的语言重导向机制安全可靠。
提示词：
针对所有的语言选项，使用已部署的绝对路径 index_{lang_code}.html 格式之网址。
结果： 每个语言选项都指向部署的目标路径，而博客则避免直接提及公开的网域名称。
技巧：
● 使用统一的基础 URL 格式。
● 更新每一个网页，而非仅更新英文版。
● 验证用户选择的数值是否保留。
● 搜索是否有残留的相对路径。
● 确保选择器中同样保留英文选项。
来自 Demo 的佐证： 每个语言选项都指向部署的目标路径，而博客则避免直接提及公开的网域名称。这是评估者可以直接检查的部分. 实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「绝对路径指令」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
15：翻译审查
背景： 第一批翻译好的网页在本文区块中仍含有残留的英文。用户要求重新检查整个网页。
目标： 将本地化（localization）视为内容的质量保证（QA），而不仅仅是自动产生。
提示词：
重新检查所有本地化网页；确保整个内容网页均已完成翻译。
结果： 所有语言网页上的可见区块、卡片描述、研究笔记以及页脚文本，皆已同步更新完成。
技巧：
● 搜索是否有残存的英文。
● 单独检查从右至左书写（RTL）的网页。
● 翻译正文内容，而不仅仅是菜单。
● 保持产品名称具辨识度。
● 审查具代表性的文本语系。
来自 Demo 的佐证： 所有语言网页上的可见区块、卡片描述、研究笔记以及页脚文本，皆已同步更新完成。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「翻译审查」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
16：认证题库规模
背景： 文件夹中包含了大规模题库，如 FSI trading desk、cloud operations、machine learning、networking、AI development 以及 generative AI。
目标： 在不干扰焦点区块的前提下，让着陆页能清晰展示题库目录的丰富度。
提示词：
在 HTML 网页上列出考试主题，并遵循现有样式添加卡片。
结果： 目录转化为易于浏览的网格，其中每个可用主题均有着一致的入口点。
技巧：
● 将主题分组在网格中展示。
● 桌面版面每行使用三张卡片。
● 保持描述文本结构对称一致。
● 清楚标示未来即将推出的主题。
● 避免对用户提及原始 JSON 数据。
来自 Demo 的佐证： 目录转化为易于浏览的网格，其中每个可用主题均有着一致的入口点。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「认证题库规模」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
17：从联合创始人到课程讲师
背景： 网页最初使用「联合创始人」的用字，随后调整为「课程讲师」的定位。
目标： 将个人品牌与学习体验紧密链接，而非强调新创企业的自传背景。
提示词：
将「联合创始人」改为「课程讲师」。
结果： 信任卡片目前可更妥善地支持该教育产品，且不会分散用户点击练习的注意力。
技巧：
● 确保身份定位与用户的核心意图相符。
● 保持个人简介卡片可点击。
● 避免冗长繁复的生平自传。
● 一致地使用角色职称。
● 让文章本身提供深度内容。
来自 Demo 的佐证： 信任卡片目前可更妥善地支持该教育产品，且不会分散用户点击练习的注意力。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「从联合创始人到课程讲师」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
18：提示词具体性
背景： 最有效的提示词都包含了要替换的确切文本、要使用的精确链接，或是要实现的明确版面行为。
目标： 通过提供可衡量的细节，大幅降低 AI 理解时的模糊性。
提示词：
将「Explore Exam JSON Library」改为「Explore AWS Exam Library」；将「AWS Learning Forge」改为「Exam Practice Room」。
结果： 由于期望的输出极为明确，文本修改变得迅速且风险极低。
技巧：
● 精确引用原字符串。
● 提供要替换的新文本。
● 当某个词汇至关重要时，避免使用「改善文案」这种模糊指令。
● 修改后仔细检查 UI 文本。
● 保持名称前后一致。
来自 Demo 的佐证： 由于期望的输出极为明确，文本修改变得迅速且风险极低。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「提示词具体性」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
19：微调修正回路
背景： 许多要求只是针对先前的置放位置、用字或链接行为进行局部修正，而非要求重写整个文件。
目标： 利用修正型提示词引导运作中的系统，同时不丢失任何现有进度。
提示词：
移动语言选择器、加入英文、移除所有提及网域的地方、移除直接提及开发笔记文件名的地方。
结果： 文件在原处持续演进并完整保留了可运作的 Demo，同时契合了全新的发布限制。
技巧：
● 宁可进行局部修补（patching），也尽量避免重写。
● 明确列出禁止使用的词汇。
● 移除特定术语后，务必进行全域搜索确认。
● 保留实用的程序结构。
● 确保最终发布的文件安全无虞。
来自 Demo 的佐证： 文件在原处持续演进并完整保留了可运作的 Demo，同时契合了全新的发布限制。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「微调修正回路」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。
20：读者优先的成效
背景： 最终产出的不只是代码；它还为开发者提供了直接的学习链接、清晰的反馈、多国语言访问以及显著的信任信号。
目标： 以读者的实际成效来评估 Vibe Coding 的成果，而非仅仅炫耀工具的新奇度。
提示词：
根据此 Demo 创建技术博客文章，分享 Vibe Coding 的开发技巧。
结果： 本系列文章能详细说明提示词如何转化为产品决策，以及每一个交付上线的细节如何具体协助学习者。
技巧：
● 将每一项技巧与用户行为紧密链接。
● 使用 Demo 作为实证。
● 避免提及不公开的内部实现细节。
● 分享可重复套用的提示词模式。
● 在结尾提供开发者可重复使用的审查步骤。
来自 Demo 的佐证： 本系列文章能详细说明提示词如何转化为产品决策，以及每一个交付上线的细节如何具体协助学习者。这是评估者可以直接检查的部分。实战笔记应与此实证保持关联，而非流于对 Vibe Coding 的泛泛谈论。
审查步骤： 针对「读者优先的成效」，请确认三件事：背景是否描述了真实的项目压力、目标是否指明了预期行为，以及结果是否指向文件或浏览器中肉眼可见的部分。若缺少其中任何一项，请在发布前重新撰写笔记。