VibeCoder Primer
§ 9·CS 地基2 prompts

Web 开发

Web 开发的最小可读懂面：HTML 负责结构、CSS 负责样式、JS 负责交互，再加一个前端框架（React 或 Vue）。

← CS 划重点·← Prev · 数据库系统·Next · 数学相关 →
先读这部分
§ 9

Web 开发

Web 开发的最小可读懂面：HTML 负责结构、CSS 负责样式、JS 负责交互，再加一个前端框架（React 或 Vue）。

学到什么程度
  • 三件套。CSS / HTML / JS 各自负责什么（结构、样式、交互）。
  • 一个前端框架。React（生态大、复杂）或 Vue（简单一点）。

AI 时代不需要自己从零手写，但要能看懂框架生成的代码，知道组件、状态、路由这些基本概念。

动手做 · 提示词卡

把这段知识变成一段可执行的练习

以下 2 张卡，每张都是一段可复制的提示词。打开 Claude Code（或任何 LLM 终端），把卡里的提示词粘进去，AI 会陪你完成这一步。遇到不会的概念，把 AI 的回答贴回 卡里继续问下一步。可以一次做完，也可以分几次。

2 混合
Prompt 01混合★★★

AI 写 todo + 解释

为什么要学VibeCoder 第一个完整应用就是 todo。不懂组件 / 状态等于看天书。
打个比方搭乐高：每积木块（组件）有自己形状（state），拼起来成玩具。
VibeCoder 场景Claude Code 给你 React 代码，你不知道 useState 那行在干嘛。

你完全没写过前端，想做一个本地能跑的最小 todo。

前置本地装好 Node.js 18+
  1. 01npm create vite@latest todo -- --template react。
  2. 02把 App.jsx 替换成 AI 给的代码。
  3. 03npm install && npm run dev。
  4. 04浏览器打开看效果，验证添加/勾选/删除。
  5. 05自己照着 AI 的解释把'组件、状态、渲染'三个词复述给自己听。
粘贴到 Claude Code（或任何 LLM 终端）
帮我用 React + Vite 做一个最小可用的 todo 应用。要求：1. 一次到位，包含 添加、勾选完成、删除 三个功能。2. 代码不超过 100 行（含 App.jsx）。3. 不要用 redux、router 等任何额外库，只用 useState。4. 给完代码后，单独列一段'概念解释'：什么是组件、什么是状态（state）、为什么 setState 后页面会重新渲染。每个概念用我能听懂的中文 2-3 句话讲清楚。
✓ 完成判据浏览器里能添加、勾选、删除 todo；你能用一段话解释什么是 state。
坑不要让 AI 一开始就加路由和后端，越简单越容易看懂概念。
Prompt 02混合★★★

读懂别人的 React 组件

为什么要学同事或 AI 甩你 100 行组件，你看不懂等于不能改、不能 debug。
打个比方看别人菜谱：先看输入、再看步骤、最后看产出，30 秒摸清。
VibeCoder 场景Claude Code 写的 Modal 组件，你想加按钮但不知 props 怎么传。

同事甩给你一份 AI 写的 React 组件，你要快速理解。

  1. 01从开源项目找一个 100 行内的组件贴进方括号占位符。
  2. 02AI 输出 4 部分分析。
  3. 03自己在编辑器里对照看，找 AI 漏掉的 state。
  4. 04把 bug 项试着改一改看效果。
粘贴到 Claude Code（或任何 LLM 终端）
我贴一段 React 组件代码给你。请：1. 用一句话概括这个组件做什么。2. 列出它的所有 props（输入）和 state（内部状态）。3. 用一段流程文字描述用户点击后会触发哪些函数、状态怎么变、最终 UI 怎么变。4. 指出 1-2 个可能的 bug 或不规范写法（如果有）。不要重写代码，只要分析。组件代码：[这里贴整段组件]。
✓ 完成判据你能 30 秒向同事讲清这个组件的输入、输出、副作用。
坑AI 经常漏掉 useEffect 里的隐式副作用，自己要二次扫描。
← 返回 CS 划重点回到首页 →