diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 6c5f975..434e1a0 100644 --- a/docs/.vitepress/config.mjs +++ b/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' } ] } diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue index ec2bc4a..e28f228 100644 --- a/docs/.vitepress/theme/components/HomeFeatures.vue +++ b/docs/.vitepress/theme/components/HomeFeatures.vue @@ -101,11 +101,12 @@ const i18n = { }, stories: { cat: 'Vibe Stories', - title: '看见每一个
闪光的你。', - sub: '在这里，发现大家如何使用 AI 创造属于自己的作品。', - s1: { title: '我的第一个全栈项目', author: 'Sanbu' }, - s2: { title: '从产品经理到独立开发者', author: 'Alice' }, - s3: { title: '用 AI 提效 10 倍', author: 'Bob' } + title: '手比脑子快的人，
都在这了。', + sub: '未完待续的故事，等你带作品来续写。加入他们。', + s1: { title: '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”', author: '小学老师小浩' }, + s2: { title: '期末考试周，我偷偷用AI造了个“校园闲鱼”', author: '一位大二学生' }, + 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; diff --git a/docs/.vitepress/theme/components/VibeStories.vue b/docs/.vitepress/theme/components/VibeStories.vue index b52222c..aeede87 100644 --- a/docs/.vitepress/theme/components/VibeStories.vue +++ b/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 || '我的第一个全栈项目', - author: t.value?.stories?.s1?.author || 'Sanbu', - avatar: '👨‍💻', - image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop', + title: t.value?.stories?.s1?.title || '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”', + author: t.value?.stories?.s1?.author || '小学老师小浩', + avatar: '👨‍🏫', + image: story1Cover, link: '/zh-cn/vibe-stories/story-1' }, { id: 2, - title: t.value?.stories?.s2?.title || '从产品经理到独立开发者', - author: t.value?.stories?.s2?.author || 'Alice', - avatar: '👩‍🎨', - image: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2564&auto=format&fit=crop', + title: t.value?.stories?.s2?.title || '期末考试周，我偷偷用AI造了个“校园闲鱼”', + author: t.value?.stories?.s2?.author || '一位大二学生', + avatar: '🎓', + image: story2Cover, link: '/zh-cn/vibe-stories/story-2' }, { id: 3, - title: t.value?.stories?.s3?.title || '用 AI 提效 10 倍', - author: t.value?.stories?.s3?.author || 'Bob', - avatar: '🚀', - image: 'https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=2564&auto=format&fit=crop', + title: t.value?.stories?.s3?.title || '我给每个学生，做了一个不会累的“学霸同桌”', + author: t.value?.stories?.s3?.author || '高中信息技术老师', + avatar: '🧑‍🏫', + 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(() => { -
@@ -149,7 +160,6 @@ onUnmounted(() => {
- MacBook Frame @@ -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; - /* Fix boundary bleeding in Safari */ + border-top-left-radius: 12px; + 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; - left: 0; - width: 100%; - height: 100%; + inset: 0; + overflow: hidden; + border-top-left-radius: 12px; + 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 */ diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml index 8acc9e6..48ecb78 100644 --- a/docs/public/sitemap.xml +++ b/docs/public/sitemap.xml @@ -1339,23 +1339,30 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1/ - 2026-03-28T13:05:08.945Z + 2026-03-28T23:26:53+08:00 weekly 0.6 https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2/ - 2026-03-28T12:27:36.079Z + 2026-03-28T23:26:53+08:00 weekly 0.6 https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3/ - 2026-03-28T13:05:08.945Z + 2026-03-28T23:26:53+08:00 weekly 0.6 + + https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4/ + 2026-03-29T02:09:47.233Z + weekly + 0.6 + + diff --git a/docs/zh-cn/vibe-stories/images/story-1/image1.jpeg b/docs/zh-cn/vibe-stories/images/story-1/image1.jpeg new file mode 100644 index 0000000..c4c065a Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image1.jpeg differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image10.png b/docs/zh-cn/vibe-stories/images/story-1/image10.png new file mode 100644 index 0000000..25493df Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image10.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image11.png b/docs/zh-cn/vibe-stories/images/story-1/image11.png new file mode 100644 index 0000000..ee0322a Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image11.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image12.png b/docs/zh-cn/vibe-stories/images/story-1/image12.png new file mode 100644 index 0000000..47ba23b Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image12.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image2.jpeg b/docs/zh-cn/vibe-stories/images/story-1/image2.jpeg new file mode 100644 index 0000000..a2bca04 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image2.jpeg differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image3.png b/docs/zh-cn/vibe-stories/images/story-1/image3.png new file mode 100644 index 0000000..773814a Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image3.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image4.png b/docs/zh-cn/vibe-stories/images/story-1/image4.png new file mode 100644 index 0000000..9072ba9 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image4.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image5.png b/docs/zh-cn/vibe-stories/images/story-1/image5.png new file mode 100644 index 0000000..c73fccb Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image5.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image6.jpeg b/docs/zh-cn/vibe-stories/images/story-1/image6.jpeg new file mode 100644 index 0000000..e5b003e Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image6.jpeg differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image7.png b/docs/zh-cn/vibe-stories/images/story-1/image7.png new file mode 100644 index 0000000..3b0b233 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image7.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image8.png b/docs/zh-cn/vibe-stories/images/story-1/image8.png new file mode 100644 index 0000000..36d4443 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image8.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-1/image9.png b/docs/zh-cn/vibe-stories/images/story-1/image9.png new file mode 100644 index 0000000..9d31eeb Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-1/image9.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-2/image1.png b/docs/zh-cn/vibe-stories/images/story-2/image1.png new file mode 100644 index 0000000..eb094a2 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-2/image1.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-2/image2.png b/docs/zh-cn/vibe-stories/images/story-2/image2.png new file mode 100644 index 0000000..11461cb Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-2/image2.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-2/image3.png b/docs/zh-cn/vibe-stories/images/story-2/image3.png new file mode 100644 index 0000000..a513556 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-2/image3.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-2/image4.png b/docs/zh-cn/vibe-stories/images/story-2/image4.png new file mode 100644 index 0000000..55d6166 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-2/image4.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-2/image5.png b/docs/zh-cn/vibe-stories/images/story-2/image5.png new file mode 100644 index 0000000..6d033ad Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-2/image5.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-3/image1.png b/docs/zh-cn/vibe-stories/images/story-3/image1.png new file mode 100644 index 0000000..81d72bd Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-3/image1.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-3/image2.png b/docs/zh-cn/vibe-stories/images/story-3/image2.png new file mode 100644 index 0000000..0139744 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-3/image2.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-3/image3.png b/docs/zh-cn/vibe-stories/images/story-3/image3.png new file mode 100644 index 0000000..c356f21 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-3/image3.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-3/image4.png b/docs/zh-cn/vibe-stories/images/story-3/image4.png new file mode 100644 index 0000000..c19a31c Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-3/image4.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-3/image5.png b/docs/zh-cn/vibe-stories/images/story-3/image5.png new file mode 100644 index 0000000..0181b49 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-3/image5.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image1.png b/docs/zh-cn/vibe-stories/images/story-4/image1.png new file mode 100644 index 0000000..1e4a222 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image1.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image2.png b/docs/zh-cn/vibe-stories/images/story-4/image2.png new file mode 100644 index 0000000..996b7fc Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image2.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image3.png b/docs/zh-cn/vibe-stories/images/story-4/image3.png new file mode 100644 index 0000000..54268f9 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image3.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image4.png b/docs/zh-cn/vibe-stories/images/story-4/image4.png new file mode 100644 index 0000000..d277a0e Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image4.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image5.png b/docs/zh-cn/vibe-stories/images/story-4/image5.png new file mode 100644 index 0000000..0973b33 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image5.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image6.png b/docs/zh-cn/vibe-stories/images/story-4/image6.png new file mode 100644 index 0000000..e66b4de Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image6.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image7.png b/docs/zh-cn/vibe-stories/images/story-4/image7.png new file mode 100644 index 0000000..6195168 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image7.png differ diff --git a/docs/zh-cn/vibe-stories/images/story-4/image8.png b/docs/zh-cn/vibe-stories/images/story-4/image8.png new file mode 100644 index 0000000..9bc2424 Binary files /dev/null and b/docs/zh-cn/vibe-stories/images/story-4/image8.png differ diff --git a/docs/zh-cn/vibe-stories/story-1.md b/docs/zh-cn/vibe-stories/story-1.md index dcd025f..4038dd2 100644 --- a/docs/zh-cn/vibe-stories/story-1.md +++ b/docs/zh-cn/vibe-stories/story-1.md @@ -1,27 +1,89 @@ --- -title: 我的第一个全栈项目 -description: 记录如何使用 AI 从零开始完成一个全栈项目。 +title: 放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇” +description: 一个乡村代课老师带着孩子们，用 AI 做出真实课堂工具的故事。 --- -# 我的第一个全栈项目 +# 放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇” -> **作者：Sanbu** -> **头像：👨‍💻** +

👨‍🏫

-在这里，我将分享我是如何使用 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) diff --git a/docs/zh-cn/vibe-stories/story-2.md b/docs/zh-cn/vibe-stories/story-2.md index 54446f8..e7a8b68 100644 --- a/docs/zh-cn/vibe-stories/story-2.md +++ b/docs/zh-cn/vibe-stories/story-2.md @@ -1,25 +1,78 @@ --- -title: 从产品经理到独立开发者 -description: 一个产品经理如何使用 AI 实现身份的转变。 +title: 期末考试周，我偷偷用AI造了个“校园闲鱼” +description: 一位大二学生在期末周做出校园二手交易产品 demo 的故事。 --- -# 从产品经理到独立开发者 +# 期末考试周，我偷偷用AI造了个“校园闲鱼” -> **作者：Alice** -> **头像：👩‍🎨** +

🎓

-作为一名产品经理，我习惯了写 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 以后，从“想”到“做”之间那堵高墙，好像一下子矮了下去。即使没有扎实的编程基础，我也能把脑海里的想法一点点做成现实，看着产品不断更新迭代，心里的成就感是实打实的。 + +这次经历让我相信，创造的门槛，或许真的没有想象中那么高。 diff --git a/docs/zh-cn/vibe-stories/story-3.md b/docs/zh-cn/vibe-stories/story-3.md index 0fb51b8..720e2f9 100644 --- a/docs/zh-cn/vibe-stories/story-3.md +++ b/docs/zh-cn/vibe-stories/story-3.md @@ -1,23 +1,96 @@ --- -title: 用 AI 提效 10 倍 -description: 探索日常开发中的 AI 提效实践。 +title: 我给每个学生，做了一个不会累的“学霸同桌” +description: 一位高中信息技术老师用 AI 做出“编程学伴”的故事。 --- -# 用 AI 提效 10 倍 +# 我给每个学生，做了一个不会累的“学霸同桌” -> **作者：Bob** -> **头像：🚀** +

🧑‍🏫

-我已经有几年的开发经验了，一开始我对 AI 写代码持怀疑态度，但尝试之后，真的被震撼到了。 +**讲述者：一位高中信息技术老师** -## 提效点 +我是一名高中信息技术教师，也是学校的信息中心主任，还是石家庄市 AIGC 种子教师的一员。这些身份听起来花里胡哨，但说白了，就是在做三件事：为祖国培养人才、为教师减轻负担、为教学提升效率。 -1. **写测试用例**：以前最讨厌写单测，现在 AI 几秒钟就能生成覆盖率很高的测试。 -2. **重构老代码**：把长达几百行的意大利面条代码扔给 AI，它能完美地拆分成设计模式良好的模块。 -3. **学习新技术**：遇到没用过的库，直接问 AI 要最佳实践。 +所以我学习人工智能、思考如何应用，一开始既是工作要求，也是个人爱好。但真正让我下决心做点什么的，是我负责教学的那门 Python 实践课。 -![提效场景](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 + 教育感兴趣，欢迎继续交流。我们一起，让技术真正服务教育。 diff --git a/docs/zh-cn/vibe-stories/story-4.md b/docs/zh-cn/vibe-stories/story-4.md new file mode 100644 index 0000000..dbe960a --- /dev/null +++ b/docs/zh-cn/vibe-stories/story-4.md @@ -0,0 +1,83 @@ +--- +title: 48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站 +description: 一位 48 岁货车司机用 AI 做出海外工具站和支付闭环的故事。 +--- + +# 48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站 + +

🚚

+ +**讲述者：货车司机老黄** + +## 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) + +正如老黄所说：“只要有解决问题的冲动，代码就不再是门槛。” + +他的寄语也很直接： + +> 朋友们别害怕，只要你想出发，什么时候都不晚。 +> 方向盘，就在你自己手里！