收藏夹datawhalechina.github.io

Easy-Vibe：Datawhale 出品、从零到全栈的 AI 编程（Vibe Coding）教程站

Datawhale 开源教程站，用『会说话就能编程』的 Vibe Coding 理念，把从零基础到全栈开发的完整学习路径做成了 10 种语言的单页导航，信息架构清晰得像一份产品手册。

#设计灵感#教程站#信息架构#AI 编程#开源教育

本报告是「设计灵感收藏夹」系列第 3 期。站点：https://datawhalechina.github.io/easy-vibe/zh-cn/

一句话定位

Easy-Vibe 是 Datawhale 出品的 Vibe Coding（氛围编程 / AI 编程）开源教程站：核心主张是”编程语言正在变成自然语言，会说话你就能做产品”，把从零基础到全栈开发的完整学习路径压缩成 Stage 1 零基础入门 → Stage 2 初中级开发 → Stage 3 高级开发 → Appendix 附录 四段式成长地图，并支持 10 种语言（简/繁中文、EN、JA、KO、ES、FR、DE、AR、VI）切换——一个把”教学产品”做到国际化水准的文档型网站。

结构与信息架构

整站是清晰到近乎教科书级的信息架构：首页即目录，一屏讲完”这是什么 + 学完能做什么 + 路径怎么走”：

区块内容设计意图
Hero大标题 Easy-Vibe 从零开始的 AI 编程指南 + 副标题”适合所有人的编程新范式” + 双 CTA（开始一起 vibe！ / GitHub）一句话定义课程立场，主次行动一目了然
用户故事看见每一个闪亮的你 + 真实案例卡片（如”放弃月入过万，他在农村小学带孩子们用 AI 赶苍蝇”）用真人真事做社会证明，降低”我不行”的心理门槛
Stage 1 · 零基础入门学习地图 / 游戏化入门（贪吃蛇）/ 产品原型实战 三张卡片“没有技术背景？正好。“——直接面向最怕代码的群体
Stage 2 · 初中级开发素材生成 Agent / Figma 与 MasterGo / 设计稿转代码 / Supabase 数据库 / 部署上线 / Dify 知识库覆盖”一个人就是一支团队”的全栈闭环
Stage 3 · 高级开发Electron 跨平台 / Claude Agent Teams / 长期任务管理 / 个人品牌输出进阶到工程化与 AI 智能体协作
Appendix · 附录AI 进化史 / 提示词工程 / 前端后端数据库 / Git / 计算机网络 等知识库把零散知识点变成可随时查阅的”字典”
多语言切换顶部语言下拉 + 页脚站点地图面向全球学习者，一个文档站撑起多语种

亮点：每个阶段卡片都带身份标签（🎨/🎮/💡/🚀/Architecture/Brand），且首页下方有”你的身份 → 这门课能帮你”对照表（学生/职场人/产品经理/创业者/老师/医生…），先按”你是谁”分流，再按”学到哪”导航——这是把用户旅程做进信息架构的典范。

创意与设计拆解

0. 封面打字机（Typewriter）动效：把”标语”变成”正在发生”

Easy-Vibe 首页 Hero 区最大的动效亮点，是一个多语句循环的打字机效果（vp-typed-tagline，由自定义 TextType 组件实现，参数 typingSpeed: 45 / deletingSpeed: 18 / pauseDuration: 2500 / postDeletingDelay: 500）：

  • 逐字打出 → 停顿 → 删除 → 切换下一条，循环播放一组标语（如”适合所有人的编程新范式”），配合光标闪烁（cursorBlinkDuration 可控），营造”这句话正在被现场敲出来”的即时感
  • 把静态 slogan 变成过程：打字机动效把一句宣传语包装成”直播打字”，天然吸引视线停留，比静止文字更有”被创造出来”的感染力
  • 中英双端复用：同一个 TextType 组件接受 text 数组，不同语言环境传入不同标语数组，动效逻辑零改动；支持 startOnVisible（进入视口才开打）、loop、variableSpeed（模拟真人击键速度抖动）等高级参数
  • 性能与优雅降级：纯 JS + 少量 DOM 操作，无重型动画库；关闭动效时直接显示完整标语，不阻塞内容可读性

可借鉴点：在 Hero 区用打字机循环播放 3~5 条”金句/卖点”，每条一个观点；注意给光标加闪烁、给整段加进场时机（滚动到视口再开始），并保证关闭动效时文字完整可见。

1. “会说话就能编程”的主张贯穿始终

  • Hero 直接抛出金句：“大语言模型（LLM）的出现，让开发不再是技术大神的专属”、“曾经最难的是怎么写代码，现在最难的是你要做什么”
  • 全文用对话式语气（“没有技术背景？正好。” / “一个人，就是一支团队。”），像导师在耳边鼓励而非教材在说教
  • “Vibe Coding” 本身是一个新造词 + 情感化命名——把技术学习包装成一种”氛围/状态”，记忆点远超”AI 编程入门教程”

2. 四段式成长路径 = 游戏化关卡设计

  • Stage 1→2→3 用 🎮 新手入门 → 🛠️ 独立开发 → 🚀 高级工程 的”升级打怪”逻辑组织
  • 每张卡片是一个”关卡入口”（学习地图 / 贪吃蛇 / 产品原型），用做出来的东西定义学到的能力，而不是用知识点定义
  • 首页底部”接下来可以学什么”给出连续的路标（初级一→初级六），学完有”下一关”的期待感

3. 多语言 = 教科书级的国际化排版

  • 顶部一行 10 种语言链接，语言名用母语书写（简体中文/English/日本語/繁體中文/한국어…），一眼可认
  • 路由结构 /zh-cn/、/en/、/ja-jp/ 规范统一，GitHub Pages 即可承载
  • 对国内开源项目来说，这展示了”内容出海”的完整样板——不止翻译，而是整套导航、文案、页脚都做了国际化

4. 技术文档的”活教材”式表达

  • 用真实用户故事（小学老师带孩子们”用 AI 赶苍蝇”）代替抽象介绍
  • 附录知识库做成”让代码活灵活现”的动态演示 + 实时交互入口，而非纯文字堆砌
  • FAQ 式章节（“坚持了好久还是搞不定，我想放弃了”）直接把学习者的情绪卡点写成标题，共情力极强

5. 低门槛、零装饰的实用主义设计

  • 整站是典型的 Docs 风（左侧栏/顶部导航 + 卡片网格），没有花哨动效，胜在信息密度与可扫读性
  • 卡片统一”emoji + 标题 + 一句话说明 + 箭头”结构，同一组件反复使用，形成强节奏感
  • 深色 Hero + 浅色内容区的明暗对比，让”品牌区”与”内容区”自然分层

亮点特色总结

  1. 主张即品牌：“会说话就能编程”一句话立住整个课程的世界观，比罗列大纲高级得多
  2. 身份分流式信息架构：“你的身份 → 这门课能帮你”对照表 + 四段式关卡，让任何人 10 秒内找到自己的入口
  3. 游戏化学习路径：用”做出来的作品”定义能力阶段，像闯关一样有持续的下一关期待
  4. 开源教育的内容出海样板：10 语言导航 + 规范路由，一套内容服务全球学习者
  5. 共情式文案：把”我想放弃了”这类情绪卡点写成章节标题，先安抚再教学
  6. Docs 风的克制设计：统一卡片组件 + 高可扫读性，让复杂课程变得轻量
  7. “一点”动效点亮全站：整站克制，只在 Hero 用打字机循环标语这一处做动态，反而让唯一动效成为记忆锚点

可借鉴的设计亮点

  • 一句话立主张：像”会说话就能编程”一样，给网站/栏目想一句”世界观”级别的口号
  • 用打字机把标语变成”正在发生”：Hero 区循环打出 3~5 条金句 + 闪烁光标，比静态文字更抓眼（注意：关闭动效时文字要完整可见）
  • 身份分流导航：首页加一个”你是谁 → 看什么”的引导区，降低访客决策成本
  • 游戏化内容组织：把文章/教程按”关卡/阶段”编排，每篇结尾给”下一关”入口
  • 多语言国际化：即使暂时只做中英双语，也值得参考其语言切换与路由规范
  • 共情式标题：用读者真实卡点（“搞不定、想放弃”）做文章标题，比”常见问题”更打动人

报告由 CodeBuddy 自动采集生成，收录于设计灵感收藏夹。