docs(vibe-stories): update story content and add new story

- Replace placeholder stories with real user stories featuring a rural teacher, a college student, a high school teacher, and a truck driver
- Add new story 4 about a truck driver building an overseas tool site
- Update sidebar navigation, homepage feature text, and cover images
- Fix visual styling and clipping in the VibeStories component
- Update sitemap with new story and modified timestamps

docs/.vitepress/config.mjs

@@ -1428,16 +1428,20 @@ Sitemap: ${siteUrl}/sitemap.xml
               collapsed: false,
               items: [
                 {
-                  text: '我的第一个全栈项目',
+                  text: '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”',
                   link: '/zh-cn/vibe-stories/story-1'
                 },
                 {
-                  text: '从产品经理到独立开发者',
+                  text: '期末考试周，我偷偷用AI造了个“校园闲鱼”',
                   link: '/zh-cn/vibe-stories/story-2'
                 },
                 {
-                  text: '用 AI 提效 10 倍',
+                  text: '我给每个学生，做了一个不会累的“学霸同桌”',
                   link: '/zh-cn/vibe-stories/story-3'
+                },
+                {
+                  text: '48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站',
+                  link: '/zh-cn/vibe-stories/story-4'
                 }
               ]
             }

docs/.vitepress/theme/components/HomeFeatures.vue

@@ -101,11 +101,12 @@ const i18n = {
     },
     stories: {
       cat: 'Vibe Stories',
-      title: '看见每一个<br><span class="highlight">闪光的你。</span>',
+      title: '手比脑子快的人，<br><span class="highlight">都在这了。</span>',
-      sub: '在这里，发现大家如何使用 AI 创造属于自己的作品。',
+      sub: '未完待续的故事，等你带作品来续写。加入他们。',
-      s1: { title: '我的第一个全栈项目', author: 'Sanbu' },
+      s1: { title: '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”', author: '小学老师小浩' },
-      s2: { title: '从产品经理到独立开发者', author: 'Alice' },
+      s2: { title: '期末考试周，我偷偷用AI造了个“校园闲鱼”', author: '一位大二学生' },
-      s3: { title: '用 AI 提效 10 倍', author: 'Bob' }
+      s3: { title: '我给每个学生，做了一个不会累的“学霸同桌”', author: '高中信息技术老师' },
+      s4: { title: '48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站', author: '货车司机老黄' }
     },
     stage1: {
       cat: 'Stage 1 · 零基础入门',
@@ -2560,6 +2561,14 @@ const appendixCards = [
   background: transparent;
 }
 
+#vibe-stories,
+#vibe-stories:focus,
+#vibe-stories:focus-visible,
+#vibe-stories:target {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 a {
   text-decoration: none;
   color: inherit;

docs/.vitepress/theme/components/VibeStories.vue

@@ -2,6 +2,10 @@
 import { inject, onMounted, onUnmounted, ref } from 'vue'
 import { withBase } from 'vitepress'
 import macbookImage from '../../../../assets/macbook.png'
+import story1Cover from '../../../zh-cn/vibe-stories/images/story-1/image5.png'
+import story2Cover from '../../../zh-cn/vibe-stories/images/story-2/image4.png'
+import story3Cover from '../../../zh-cn/vibe-stories/images/story-3/image3.png'
+import story4Cover from '../../../zh-cn/vibe-stories/images/story-4/image7.png'
 
 // Try to inject translation context from parent or provide a default fallback
 const t = inject('t', {
@@ -17,27 +21,35 @@ const t = inject('t', {
 const tStories = [
   {
     id: 1,
-    title: t.value?.stories?.s1?.title || '我的第一个全栈项目',
+    title: t.value?.stories?.s1?.title || '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”',
-    author: t.value?.stories?.s1?.author || 'Sanbu',
+    author: t.value?.stories?.s1?.author || '小学老师小浩',
-    avatar: '👨‍💻',
+    avatar: '👨‍🏫',
-    image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop',
+    image: story1Cover,
     link: '/zh-cn/vibe-stories/story-1'
   },
   {
     id: 2,
-    title: t.value?.stories?.s2?.title || '从产品经理到独立开发者',
+    title: t.value?.stories?.s2?.title || '期末考试周，我偷偷用AI造了个“校园闲鱼”',
-    author: t.value?.stories?.s2?.author || 'Alice',
+    author: t.value?.stories?.s2?.author || '一位大二学生',
-    avatar: '👩‍🎨',
+    avatar: '🎓',
-    image: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2564&auto=format&fit=crop',
+    image: story2Cover,
     link: '/zh-cn/vibe-stories/story-2'
   },
   {
     id: 3,
-    title: t.value?.stories?.s3?.title || '用 AI 提效 10 倍',
+    title: t.value?.stories?.s3?.title || '我给每个学生，做了一个不会累的“学霸同桌”',
-    author: t.value?.stories?.s3?.author || 'Bob',
+    author: t.value?.stories?.s3?.author || '高中信息技术老师',
-    avatar: '🚀',
+    avatar: '🧑‍🏫',
-    image: 'https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=2564&auto=format&fit=crop',
+    image: story3Cover,
     link: '/zh-cn/vibe-stories/story-3'
+  },
+  {
+    id: 4,
+    title: t.value?.stories?.s4?.title || '48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站',
+    author: t.value?.stories?.s4?.author || '货车司机老黄',
+    avatar: '🚚',
+    image: story4Cover,
+    link: '/zh-cn/vibe-stories/story-4'
   }
 ]
 
@@ -135,7 +147,6 @@ onUnmounted(() => {
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
         </button>
 
-        <!-- Screen Content -->
         <div class="screen-content">
           <a :href="withBase(tStories[currentIndex].link)" class="screen-link">
             <transition :name="transitionName">
@@ -149,7 +160,6 @@ onUnmounted(() => {
             </transition>
           </a>
         </div>
-
         <!-- Laptop Frame -->
         <img :src="macbookImage" class="laptop-frame" alt="MacBook Frame" />
       </div>
@@ -246,13 +256,17 @@ onUnmounted(() => {
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
+  /* Keep the MacBook frame height stable before the PNG finishes loading. */
+  aspect-ratio: 4608 / 2675;
 }
 
 .laptop-frame {
-  position: relative;
+  position: absolute;
+  inset: 0;
   z-index: 10;
   width: 100%;
-  height: auto;
+  height: 100%;
+  object-fit: contain;
   pointer-events: none;
   filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
 }
@@ -264,16 +278,17 @@ onUnmounted(() => {
 .screen-content {
   position: absolute;
   z-index: 1;
-  background: transparent;
   top: 0;
   left: 10%;
   width: 80%;
   height: 92%;
+  background: #0b0b0f;
+  overflow: hidden;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  overflow: hidden;
+  clip-path: inset(0 round 12px 12px 0 0);
+  contain: paint;
   perspective: 1000px;
-  /* Force hardware acceleration and fix Safari overflow clipping bug */
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(white, black);
@@ -282,26 +297,31 @@ onUnmounted(() => {
 }
 
 .screen-link {
+  position: absolute;
+  inset: 0;
   display: block;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  position: relative;
   overflow: hidden;
-  border-radius: inherit;
+  border-top-left-radius: 12px;
-  /* Fix boundary bleeding in Safari */
+  border-top-right-radius: 12px;
+  clip-path: inset(0 round 12px 12px 0 0);
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
   mask-image: radial-gradient(white, black);
   -webkit-mask-image: -webkit-radial-gradient(white, black);
 }
 
+.screen-link:focus,
+.screen-link:focus-visible {
+  outline: none;
+}
+
 .screen-image-wrapper {
   position: absolute;
-  top: 0;
+  inset: 0;
-  left: 0;
+  overflow: hidden;
-  width: 100%;
+  border-top-left-radius: 12px;
-  height: 100%;
+  border-top-right-radius: 12px;
+  clip-path: inset(0 round 12px 12px 0 0);
 }
 
 .screen-image {
@@ -310,6 +330,9 @@ onUnmounted(() => {
   height: 100%;
   object-fit: cover;
   object-position: center;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  backface-visibility: hidden;
 }
 
 /* Transitions */

docs/public/sitemap.xml

@@ -1339,23 +1339,30 @@
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1/</loc>
-    <lastmod>2026-03-28T13:05:08.945Z</lastmod>
+    <lastmod>2026-03-28T23:26:53+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/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2/</loc>
-    <lastmod>2026-03-28T12:27:36.079Z</lastmod>
+    <lastmod>2026-03-28T23:26:53+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/"/>
   </url>
   <url>
     <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3/</loc>
-    <lastmod>2026-03-28T13:05:08.945Z</lastmod>
+    <lastmod>2026-03-28T23:26:53+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/"/>
   </url>
+  <url>
+    <loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4/</loc>
+    <lastmod>2026-03-29T02:09:47.233Z</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/"/>
+  </url>
 </urlset>

docs/zh-cn/vibe-stories/story-1.md

@@ -1,27 +1,89 @@
 ---
-title: 我的第一个全栈项目
+title: 放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”
-description: 记录如何使用 AI 从零开始完成一个全栈项目。
+description: 一个乡村代课老师带着孩子们，用 AI 做出真实课堂工具的故事。
 ---
 
-# 我的第一个全栈项目
+# 放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”
 
-> **作者：Sanbu**
+<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">👨‍🏫</p>
-> **头像：👨‍💻**
 
-在这里，我将分享我是如何使用 AI（Cursor 和 Claude）在短短几天内完成我的第一个全栈项目的。
+**讲述者：小学老师小浩**
 
-## 想法诞生
+小浩，是一位小学三年级的乡村代课老师。曾经的他做过运营，搞过商业数据分析，也敲过代码，月入过万。在旁人眼里，这个从农村走出来的年轻人算是“混得不错”。但他放弃了令人羡慕的工作，辞职回到老家，只为带农村孩子们去看更大的世界。
 
-我一直想做一个属于自己的工具，但是因为缺乏技术背景，很多想法都停留在脑海里。直到我遇到了 Vibe Coding 的概念。
+![小浩老师和孩子们](./images/story-1/image1.jpeg)
 
-## 开发过程
+## 01 当“人工智能”第一次出现在课堂
 
-1. **前端搭建**：通过对话，AI 帮我生成了 React 组件。
+刚来村里教书的时候，小浩老师的心里是堵着的。“村里条件有限，孩子们很难有机会看到外面的世界，他们的世界很小，小到只有翻旧的课本和脚下的泥土。”他想让孩子们看看更大的世界，也想告诉他们，这个世界上有一个东西叫“人工智能”。它能画画，会写诗，还能回答脑袋里所有天马行空的问题。
-2. **后端对接**：使用 Supabase 作为后端，AI 帮我写了所有的增删改查逻辑。
-3. **部署上线**：使用 Vercel 一键部署。
 
-![项目截图](https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop)
+![乡村课堂里的日常](./images/story-1/image2.jpeg)
 
-## 总结
+刚开始推进的时候并不顺利。让孩子们自己带手机来学校，通过手机接触 AI，这个想法一度遭到了校领导的坚决反对：“你这是让孩子抄答案！这叫不务正业！”但他没有放弃，三天两头想办法去说服校领导。最后双方各退一步，可以学 AI，但是不能违反学校规定，学生不能自己带手机到课堂上。
 
-AI 编程真的改变了普通人创造产品的方式。只要你有想法，就能把它变成现实！
+于是，小浩老师就自掏腰包，收了几部二手手机，把自己的“豆包”账号登录到这些手机上给孩子们用。就这样，孩子们第一次摸上了“高科技”。他们很快学会了用 AI 搜资料、学舞蹈，甚至玩文生图。AI 第一次帮这些孩子打开了新世界的大门。
+
+![孩子们在机房里接触 AI 的样子](./images/story-1/image3.png)
+
+## 02 农村课堂的“特产”：苍蝇与误触
+
+现在农村教室也装上了多媒体电子屏，这在很大程度上提高了教学效率，促进了教育公平。但在实际教学环境中，还是有很多难以解决的尴尬。比如，苍蝇。
+
+电子屏发热发光，苍蝇尤其喜欢往上扑。屏幕无法识别是正常操作还是误触，经常造成课件乱跳、视频暂停，甚至中途关机的问题。一节课 40 分钟，得花 20 分钟在讲台上赶苍蝇，好好的课上得稀碎，小浩老师和孩子们都苦不堪言。
+
+![被误触困扰的教室电子屏](./images/story-1/image4.png)
+
+突然有一天，一个学生举手对小浩老师说：“老师，我们能不能一起做一个程序，把苍蝇‘关’在外面？”
+
+## 03 和苍蝇的战斗，我们是和 AI “聊天”打赢的
+
+和小学三年级的娃娃一起写代码，还是做这种对技术和知识要求较高的防误触程序，在以前是想都不敢想的。但现在不一样了。有了 AI 的帮助，一切都变得可能。
+
+正好看到一套 Vibe Coding 公益教程，小浩老师就带着孩子们一起“玩”了起来。孩子们出点子，小浩老师负责当“翻译官”，把他们的话喂给 AI。不用去死磕那些复杂语法，指针、句柄、底层消息队列这些拦路虎，统统被 AI 挡在了身后。
+
+- “哎，电脑能不能分清楚，现在是鼠标在点，还是屏幕自己在动？”
+- “能不能给屏幕加个‘透明的罩子’，苍蝇撞上去没反应，但我用鼠标还能操作？”
+
+这一问，还真问出了门道。AI 告诉他们要区分 `RawInput`，要识别 `ExtraInfo`。孩子们虽然听不懂这些专业术语，但他们可以通过数据观察和小组讨论，发现不同输入的 `ExtraInfo` 值确实有差别。
+
+![“小浩触屏锁”的输入识别界面](./images/story-1/image5.png)
+
+就这样，小浩老师和孩子们你一句我一句，和 AI 硬生生“聊”出了现在的【小浩触屏锁】。它的原理很简单：通过识别输入信号的特征，精准拦截掉屏幕的触控信号，只保留鼠标操作。这样一来，不管苍蝇在屏幕上怎么开派对，课件都能稳如泰山。
+
+虽然这个软件不是什么高大上的商业产品，但它真的解决了农村课堂里的真实痛点。它不只是一个程序，更是孩子们第一次参与创造、第一次用技术回应生活问题的答案。
+
+## 04 从写一行代码到敲一扇门
+
+令小浩老师印象最深的，是元旦那天。他问豆包：“怎么带孩子们过一个有意义的节？”AI 没建议开 party，也没建议搞表演，而是说：“与其在教室狂欢，不如去看看村里的孤寡老人。”
+
+于是，他真带着孩子们去看望村里的一位独居五保户大爷。去的时候，大爷正坐在破旧的木凳上吃午饭，桌上只有一碗白水煮面和一盘咸菜。小浩老师心里一揪，后悔没多带些吃的。几个平时调皮捣蛋的孩子都表现得比平时更乖，还和大爷聊起了天。
+
+离开之后，有几个孩子扯着小浩老师的衣角，眼圈红红地说：“老师，我们以后多来帮帮大爷吧。”那天回去的路上，冷风在脸上刮得生疼，他心里却是热乎乎的。
+
+他说：“教育不光是教书本知识，还得教人心。AI 给出的答案，从来不仅仅是技术，更是那颗被它点燃的、想去温暖别人的心。”
+
+## 05 小浩老师的一点心里话
+
+其实做这个软件，最大的收获不是软件本身，而是看到了孩子们眼里的光。以前孩子们觉得，电脑是城里孩子的玩具，编程是天才的事，跟自己没关系。但现在，他们知道，只要有想法，只要敢想，甚至只要会“说话”，他们就能通过 AI 改变自己的生活。
+
+那个提议做软件的孩子，以前最调皮，现在上课听得最认真。因为他知道，他参与创造的东西，正在帮大家解决问题。这种“我也能行”的自信，比考一百分更珍贵。
+
+![孩子们的笑脸和课堂合影](./images/story-1/image6.jpeg)
+
+他也坦白说，自己带孩子们用手机、搞 AI，没少挨批评，也没少听流言蜚语。很多人说他不务正业，带坏风气。但看着孩子们因为 AI 变得更好奇、更善良，他觉得一切都是值得的。
+
+## 06 写在最后
+
+小浩老师真挚地呼吁大家，多多关注公立教育里真实可落地的 AI 电子数字化课堂。农村娃的小小世界，其实更需要 AI 的帮助。AI 不只是工具，更是帮孩子们链接大千世界的一扇窗。
+
+![孩子们写给老师的祝福](./images/story-1/image7.png)
+
+![“老师您辛苦了”](./images/story-1/image8.png)
+
+![孩子们手写的小纸条](./images/story-1/image9.png)
+
+![生活里的孩子们](./images/story-1/image10.png)
+
+![教室里的孩子们](./images/story-1/image11.png)
+
+![小浩的自拍](./images/story-1/image12.png)

docs/zh-cn/vibe-stories/story-2.md

@@ -1,25 +1,78 @@
 ---
-title: 从产品经理到独立开发者
+title: 期末考试周，我偷偷用AI造了个“校园闲鱼”
-description: 一个产品经理如何使用 AI 实现身份的转变。
+description: 一位大二学生在期末周做出校园二手交易产品 demo 的故事。
 ---
 
-# 从产品经理到独立开发者
+# 期末考试周，我偷偷用AI造了个“校园闲鱼”
 
-> **作者：Alice**
+<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">🎓</p>
-> **头像：👩‍🎨**
 
-作为一名产品经理，我习惯了写 PRD 和画原型，但总是需要依赖开发团队才能把产品做出来。现在，一切都不一样了。
+**讲述者：一位大二学生**
 
-## 我的转型之路
+## 01 毛小驴的“3 小时奇迹”，和我被干烧的 CPU
 
-我开始学习 Vibe Coding 工作流，把画原型的精力直接用来和 AI 结对编程。
+“帮我测试一下，跟它聊聊。”
 
-- 第一周：学会了如何写出结构化的提示词。
+“好厉害，快期末了还熬夜敲代码，快复习吧。”
-- 第二周：完成了一个基础的记账工具。
-- 第一个月：上线了我的第一个商业化产品。
 
-![我的作品](https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2564&auto=format&fit=crop)
+“只用了 3 个小时。”
 
-## 给其他 PM 的建议
+2026 年 1 月的期末周，我正忙着复习功课，突然收到技术大佬毛小驴甩过来的一个链接。那是一个 AI 对话网站，网站里日程、追番功能一应俱全，界面也已经有模有样。
 
-不要害怕代码，把 AI 当作你的首席开发工程师，你只需要做好产品定义。
+3 小时？我盯着屏幕，感觉 CPU 都快被干烧了。这大佬的速度再次刷新了我的认知。他随后又发来一堆资料，我打开一看，每个字都认识，连起来却像天书。想问他，又怕暴露自己的“菜”，于是只能：他抛术语，我默默复制给豆包，等豆包解释完，我再小心翼翼地回他。我的学习，从“人传人”变成了“人传 AI 传人”。
+
+![毛小驴做出的初版网站](./images/story-2/image1.png)
+
+## 02 进群第一天，我选择闭嘴
+
+1 月份组队学习开始了，毛小驴把我拉进学习大群里。开场是自我介绍环节，“多年开发经验”“某大厂在职”……看着其他人的自我介绍，我的手指在键盘上停了几秒，最后还是删掉了刚刚打好的两行字。心里默默叹气：“唉，高手过招，笨蛋还是不多说话了。”
+
+后来我和毛小驴，还有一位新认识的朋友组队，建了一个三人小群，我的状态终于松弛下来了。群里开放平等的氛围让我特别开心：没人管你多大、什么职业、厉不厉害，遇到问题就平等交流，一起琢磨。虽然平时都是各忙各的，话不多，但能感受到大家有在默默努力，有种莫名的踏实感。不被标签定义、只凭兴趣一起往前冲，这种感觉我在学校里很少遇到。
+
+![独自探索的晚自习](./images/story-2/image2.png)
+
+## 03 在期末周“摸鱼”，反而学得更起劲
+
+在这段学习里，紧张和焦虑感比以前少了很多。准备期末考试的时候，即使打卡进度有点慢，也没人催我、怪我，一切自己对自己负责就好。不同于高中和大学那种标准答案式的学习氛围，这种自由感反而让我更有干劲。
+
+每天的任务打卡就像打怪升级一样，学习变得更主动，也让我学到了更多东西。
+
+![期末复习时的学习现场](./images/story-2/image3.png)
+
+## 04 脑子一热，给自己挖了个“大坑”
+
+转眼寒假将近，这一轮学习也接近尾声。结业直播展示前，老师问我想不想演示一个 demo。
+
+“想！”
+
+我几乎是条件反射地答应了，虽然答应的时候连做什么都还没想好。
+
+刷着宿舍楼群里出二手物品的信息，我突然有了些头绪。校园里的二手交易，其实一直都藏在各种临时群聊里。买东西直接约在宿舍楼或食堂见面，很少有人特意用闲鱼。那如果，有一个只属于校园的二手平台呢？它不仅能精准展示本校或附近学校的二手物品，还能天然多一层信任，减少使用者被骗的顾虑。
+
+说干就干，我开始了人生第一次 AI 产品设计。页面设计其实很顺畅：进去就是商品浏览页，顶部放搜索栏，下面放“我的”和“我要出售”，简单直接。真正让我头疼的是 AI 功能该加在哪。起初我想做购物平台的 AI 推荐，但因为性价比这件事根本没法统一衡量，就放弃了。后来又冒出几个点子，也都经不起推敲。思路一度彻底卡住。
+
+直到我和一位数码爱好者朋友聊起这件事，他一句话点醒了我：“大家卖二手物品只会写使用了多久、哪里有瑕疵、功能有哪些，但不会像商家那样标参数。要是来个 AI，帮小白买家把商品介绍明白，不就省得他们到处查资料了？”
+
+一下子，我的方向就清晰了。AI 功能就加在商品描述上。后来，智能定价的功能也跟着落了地。
+
+![校园闲鱼网站展示](./images/story-2/image4.png)
+
+## 05 直播当“差生”，却收获了最宝贵的肯定
+
+我花了很多心思的作品终于在直播前完成了。可越到展示那一刻，我越紧张。我前面演示的几个作品都很精致，交互一个比一个流畅。本来赛前还信心满满的我，到真正要上台的时候，心里只剩一句：“总要允许差生存在的。”
+
+于是我深吸一口气，勇敢又不安地讲完了自己的 demo。展示结束后，我脑海里炸开一连串自我否定：我提的问题很傻，我的作品不完美，我的想法无聊，甚至很多地方还没实现……
+
+可没想到，现场的老师不但没有否定我，还给了很多具体可落地的建议。那一刻我才意识到，原来不完美也可以被认真对待。这种安心展示一个还不成熟作品的机会，之前几乎从未有过。
+
+![项目开发与 Builder 协作现场](./images/story-2/image5.png)
+
+## 06 我得到的，远不止一个 Demo
+
+通过这次学习，我觉得自己解决真实问题的能力被真正拉起来了。首先，学习效率提高了。我学会了自己搭建小工具，比如 AI 日程表、个人博客等。其次，我的学习方式也变了。不再对着厚厚的教程一页页硬啃，而是直接动手设计自己的小项目，在干中学。
+
+不会代码没关系，AI 可以帮忙写。遇到问题就直接问 AI：“这串什么意思？”“用了什么知识？”“报错怎么解决？”
+
+有了 Trae 以后，从“想”到“做”之间那堵高墙，好像一下子矮了下去。即使没有扎实的编程基础，我也能把脑海里的想法一点点做成现实，看着产品不断更新迭代，心里的成就感是实打实的。
+
+这次经历让我相信，创造的门槛，或许真的没有想象中那么高。

docs/zh-cn/vibe-stories/story-3.md

@@ -1,23 +1,96 @@
 ---
-title: 用 AI 提效 10 倍
+title: 我给每个学生，做了一个不会累的“学霸同桌”
-description: 探索日常开发中的 AI 提效实践。
+description: 一位高中信息技术老师用 AI 做出“编程学伴”的故事。
 ---
 
-# 用 AI 提效 10 倍
+# 我给每个学生，做了一个不会累的“学霸同桌”
 
-> **作者：Bob**
+<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">🧑‍🏫</p>
-> **头像：🚀**
 
-我已经有几年的开发经验了，一开始我对 AI 写代码持怀疑态度，但尝试之后，真的被震撼到了。
+**讲述者：一位高中信息技术老师**
 
-## 提效点
+我是一名高中信息技术教师，也是学校的信息中心主任，还是石家庄市 AIGC 种子教师的一员。这些身份听起来花里胡哨，但说白了，就是在做三件事：为祖国培养人才、为教师减轻负担、为教学提升效率。
 
-1. **写测试用例**：以前最讨厌写单测，现在 AI 几秒钟就能生成覆盖率很高的测试。
+所以我学习人工智能、思考如何应用，一开始既是工作要求，也是个人爱好。但真正让我下决心做点什么的，是我负责教学的那门 Python 实践课。
-2. **重构老代码**：把长达几百行的意大利面条代码扔给 AI，它能完美地拆分成设计模式良好的模块。
-3. **学习新技术**：遇到没用过的库，直接问 AI 要最佳实践。
 
-![提效场景](https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=2564&auto=format&fit=crop)
+## 01 那节差点把我“淹没”的 Python 课
 
-## 结论
+我教的 Python 编程课，内容本身并不复杂。只需要学生们写个程序算出 BMI 指数，输入身高体重，判断胖瘦，再输出结果。但是对于没有任何编程基础的学生来说，接触一个全新的领域并理解其中的运行规则，是一件非常困难的事。
 
-拥抱 AI，不要被时代淘汰。
+很多时候，老师讲的和学生理解的相差甚远。所以一些已经讲过的内容，会被学生反复提问。任务刚布置下去，过不了一会，四面八方都是举起的手，此起彼伏的“老师老师老师”……那种感觉，就像站在菜市场中央，每个摊主都在招呼你。
+
+50 个学生，1 个老师。每个学生卡住的点都不一样：有人不明白 `input()` 是干什么的，有人不知道 `if` 语句怎么写，有人根本搞不懂数据类型转换。一节课 45 分钟，我像个不停拧螺丝的工人，这边刚拧紧一颗，扭头一看，旁边又松了三颗。
+
+![那节 Python 实践课上的 BMI 题目](./images/story-3/image1.png)
+
+虽然一刻都没有停下来，但举手提问的同学好像一点都没少。有的学生等了几分钟还等不到我，就开始自己折腾电脑；还有的学生索性直接趴下睡觉了。下课铃响起的那一刻，我站在机房里，看着眼前一片混乱，突然觉得特别无力。
+
+不是学生的问题，他们已经很努力了。也不是我教得不好，而是这个模式本身就有问题。编程不是数学课，没法把所有人的问题统一讲给全班听，只能一个个去指导。
+
+## 02 给每个学生，配一个不会累的“学霸同学”
+
+那天晚上我失眠了。不是焦虑，而是在想一个问题：如果每个学生都能有一个“助教”，随时解答他的问题，会怎么样？
+
+这个助教不直接给答案，只需要告诉他：“你这里错了”“这个函数是这样用的”“换个思路试试”……
+
+就像以前读书时，坐在旁边的那个学霸同学。你卡住了，问他一句，他点拨你一下，然后你自己就解决了。想到这里，我突然意识到，AI 或许可以变成这样一位“学霸同桌”。
+
+现有的 AI 编程工具虽然可以直接给答案，但还不能做到真正的学习引导。所以我决定自己做一个新的应用，一个会教学、会引导、会陪着学生把问题想清楚的 AI 助教。
+
+![信息科技课程中心的首页原型](./images/story-3/image2.png)
+
+## 03 从梦想到现实：编程学伴
+
+我之前只写过一些简单的小软件，但没碰过这么复杂的应用开发。对“接入 AI 的应用开发”更是完全没有经验，所以一开始心里非常没底。也是从那时候开始，我这个“会教书但不会做复杂产品”的老师，第一次真正把脑子里的想法跑了起来，变成了一个可用应用。
+
+那段时间，我连续 5 天每天晚上跟着课程打卡学习。开发过程中最难的地方不是写代码，而是找 AI 的 API：哪个平台免费、哪个速度快、哪个适合教育场景……这些都得一个个试。
+
+我还记得第一次在应用里集成 AI，输入“input 函数怎么用”，看到它真的返回了示例代码和讲解时，那种兴奋和欣慰到现在都记得。我给这个应用起名叫“信息科技课程中心”，核心模块是“编程学伴”。
+
+![编程学伴的代码审查界面](./images/story-3/image3.png)
+
+它能做三件事：
+
+- **基础知识答疑**：学生问“for 循环怎么写”“列表怎么用”，学伴直接给出用法说明和示例代码。因为这是基础知识，不是作业题。
+- **作业题引导**：学生拿着老师布置的题目来问，学伴不给完整代码，而是用苏格拉底式提问一步步引导他自己想出来。
+- **代码审查**：学生把自己写的代码贴上来，学伴指出问题在哪，但不直接替他改完。
+
+为什么要设计成这样？因为学习的目的不是“完成作业”，而是“学会解决问题”。如果 AI 直接给答案，学生只会复制粘贴，表面上交差了，实际上什么都没学会。
+
+## 04 作业和记录成了新的麻烦
+
+软件做出来之后，我自己测试了一圈，觉得挺好。同事看完也说：“这个太棒了，解决了我们的痛点。”但开学后第一周，新的问题就来了：学生在课上用编程学伴解决了问题，然后作业提交到哪里？
+
+以前我们用的是极域电子教室，学生在机房里提交，我在教师机上收。但这个系统有个致命问题，只能在机房里用，下课就断。学生在机房之外，既无法继续做课程作业，也无法回看之前的学习记录。
+
+于是我又花了几个晚上，给“编程学伴”加了一整套班级和课程管理系统：
+
+- 老师可以创建班级和课程；
+- 学生加入班级后，可以看到所有课程内容和作业；
+- 课上没完成的，课下还能继续做、继续交；
+- 老师可以课下批阅作业，不合格的打回重做；
+- 当学生通过某门课的所有作业，系统会自动发一份课程完成证书。
+
+![课程与班级管理界面](./images/story-3/image4.png)
+
+这个“证书”是我特意加的。因为我知道，对于高中生来说，一个小小的认可和仪式感，足以让他觉得“我真的学会了什么”。
+
+![课程完成证书示意](./images/story-3/image5.png)
+
+编程学伴加上课程管理，形成了一个完整的学习闭环，也让学生的学习更有始有终、更有成就感。
+
+## 05 如果每个老师，都能多一个帮手就好了
+
+现在学生放假了。虽然课程管理系统还没真正在课堂上大规模使用，但同事们测试后的反馈让我很有信心：“这就是我们需要的东西。”更让我没想到的是，这个系统甚至有可能推广到石家庄全市的其他学校。
+
+我一开始做这个系统，只是想解决自己班上那 50 个学生的问题，没想着做多大的事。但转念一想，如果全市的信息技术老师都在面对同样的困境，所有学生都在喊“老师”，而老师只有一个，那这个工具就确实应该被更多人用到。
+
+AI 可能就是那个答案。不是用 AI 替代老师，而是用 AI 帮助老师，让每个学生都能得到个性化的指导。
+
+## 06 结语
+
+最后说说技术实现。我用的是百度秒哒平台，0 成本部署。我们学校没有服务器预算，所以这个“0 成本”特别重要。5 天时间，产品就从想法走到了上线。甚至从学 Vibe Coding 到做出应用，利用的都是晚上的零碎时间。
+
+我不是专业开发者，也不是技术大牛。只是一个普通的高中信息技术老师，在某个失眠的夜晚，想解决一个真实问题。后来我发现，技术真的可以改变教育。不是那种宏大叙事的“教育革命”，而是具体的、微小的、但真实有效的改变。
+
+如果你也是信息技术老师，也在面对类似困境，或者你只是对 AI + 教育感兴趣，欢迎继续交流。我们一起，让技术真正服务教育。

docs/zh-cn/vibe-stories/story-4.md

@@ -0,0 +1,83 @@
+---
+title: 48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站
+description: 一位 48 岁货车司机用 AI 做出海外工具站和支付闭环的故事。
+---
+
+# 48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站
+
+<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">🚚</p>
+
+**讲述者：货车司机老黄**
+
+## 01 “南斯拉夫总统”决定换个赛道
+
+“今年我 48 岁，本命年。在这个‘十年不摸电脑’的年纪，2025 年春节 DeepSeek 的火爆，像一记闷雷把我炸醒了。”
+
+老黄是在焦作这个四线小城长大的“厂二代”，因为小时候有个外号，大家偶尔会拿“南斯拉夫总统”来打趣他。现在，身边的人都直接叫他老黄。
+
+老黄是一位自动售货机货物运输员。DeepSeek 的爆火让他意识到：“时代的列车要开了，不管是在写字楼里喝咖啡的人，还是在货车里啃馒头的人，都会受到 AI 浪潮的冲击。不迎头赶上，就只能被甩在原地吃灰。”
+
+![老黄故事里的家乡旧影](./images/story-4/image1.png)
+
+于是，这个彻头彻尾的门外汉决定认真学一学。他想看看，“一个原来只会开车的手，能不能敲响 AI 编程的门。”
+
+## 02 从“手工业”到“指挥艺术”
+
+刚开始学的那两周，老黄心里直打鼓：“我这连代码长啥样都不知道，能行吗？”
+
+但老师和助教们的话给了他信心：AI 编程时代，咱不是代码搬运工，咱是导演。写程序不再需要一砖一瓦地垒，只要和 AI 说清楚，就能一步步做出来。
+
+于是，老黄开始接触 vibe coding。
+
+- “帮我做个贪吃蛇，要好看点，有开始按钮！”
+- “生成个动态地图，展示货物从中国发往全球的酷炫效果！”
+
+![老黄最开始做出的贪吃蛇 demo](./images/story-4/image2.png)
+
+嗖的一声，应用就出来了。这种奇妙的感觉让他深受震撼。编程从一种枯燥的“手工业”，变成了指挥若定的“艺术”。这双握了半辈子方向盘的手，竟然也能握住数字世界的方向盘。
+
+![货运动态地图 demo](./images/story-4/image3.png)
+
+## 03 在崩溃和坚持里，硬跑通“商业闭环”
+
+“光说不练假把式，得实战！”
+
+课程第五个任务，是要自己完成一个大作业。老黄决定做一个海外 AI 工具站，得能用、能部署、还能收钱，最好形成一个完整的“商业闭环”。
+
+刚开始复刻网站原型还算顺利。但到了第二步，实现“核心功能图生图”时，系统就开始疯狂报错。作为一个小白，老黄只能一边和 AI 对话调试，一边补基础知识。连续四五天，他白天开车补货，晚上回来就和 AI 展开“车轮战”，反复对话、调试、学习。最崩溃的时候，他守在屏幕前，对着 F12 开发者文档一坐就是一个通宵。
+
+![AI 编辑器的初版页面](./images/story-4/image4.png)
+
+他也想过放弃。是学习群里的积极解答、知识分享会的专业分享，把他又拉了回来。这些都成了他坚持下来的力量。后来他用上了国产编程工具 Trae 的免费大模型，报错减少了，沟通也更顺畅了。老黄一口气把文生图、文生视频、老照片修复都接了进去。
+
+![老照片修复功能展示](./images/story-4/image7.png)
+
+![Nano Banana 的编辑工作流页面](./images/story-4/image6.png)
+
+最难啃的骨头，其实是设置域名邮箱、配置谷歌登录，以及接入支付系统（Paypal 和 Creem）。老黄对着官方文档，一边问 AI，一边自己做设计和配置。就这样，他一个人完成了从 0 到 1 的支付接口对接。
+
+他说，Nano Banana 顺利跑通的那一刻，自己真想大喊一声：“设计实现一个能真正跑通商业闭环的网站，不再是只有大公司程序员才能干的活！”
+
+## 04 老黄的“零基础开发法则”
+
+老黄一路摸索、一路踩坑，也总结出了几条“带血”的经验：
+
+- **积木法则**：别想一口吃成胖子，一次只改一个小功能，改好了再走下一步。
+- **学会举例**：跟 AI 沟通时别说大道理，直接给它看例子、报错信息和理想效果。
+- **学会偷师**：别光复制粘贴，尽量理解 AI 为什么这么写。
+- **调整心态**：报错了别怕，那是在教你避坑。
+
+![图生图工作流页面](./images/story-4/image5.png)
+
+## 05 时代列车，人人可上
+
+现在，老黄还是那个在郑州跑货车的司机。但和以前不同的是，现在的他多了一个身份：AI 应用开发者。最近他又给公司开发了一个“速便利校园零食购”小程序，极大提升了老师和同学们的购物体验。
+
+![老黄后来做的“速便利校园零食购”](./images/story-4/image8.png)
+
+正如老黄所说：“只要有解决问题的冲动，代码就不再是门槛。”
+
+他的寄语也很直接：
+
+> 朋友们别害怕，只要你想出发，什么时候都不晚。  
+> 方向盘，就在你自己手里！