用自然语言做一个研究小工具：vibe coding 入门
假如你想在组会上演示“同一个人前后变化”与“不同人之间差异”，表格不够直观，现成软件又没有刚好合适的按钮。这时可以把需求告诉 AI，让它生成一个网页，再通过实际点击逐步修改。人们常把这种用自然语言推动程序制作的方式叫作 vibe coding。
本页做一个六行数据查看器：选择 A 或 B，查看原始记录和均值。它只在浏览器本地处理这组教学数据。完成后，你会得到一个双击就能打开的 HTML 文件。
先看看想做出的东西
打开示范工具，或下载练习包。ZIP 包含可独立打开的工具、六行数据、需求与检查说明。示范由本指南编写并检查，读者可以从空白开始，也可以修改这个版本。
先点“只看 A”“只看 B”，再点“全部”。A 的压力与睡眠困难均值应为 2、3，B 应为 5、6。这个小工具展示原始记录和均值；怎样解释这两种关系，见方法学习练习。
选一种制作方式
产品入口核查：2026-10-17。
| 你更习惯什么 | 可用路线 | 怎样开始 |
|---|---|---|
| 有文件夹、想用对话完成 | Codex | 按代码助手页安装登录，选一个空文件夹 |
| 希望界面同时显示文件和修改 | Cursor | 从官网快速开始下载登录，打开文件夹，按 Windows/Linux Ctrl+I 或 macOS Cmd+I 打开 Agent |
| 已有国内模型 API 或套餐 | Qwen Code | 按代码助手页配置，在教学文件夹中启动 |
| 只想先试一次普通聊天 | 千问、DeepSeek、Kimi 等 | 请它输出完整 HTML，复制为本地文件再打开 |
前三条可以直接创建和修改文件；最后一条需要自己保存代码。产品试用/订阅与 API 用量分别看预算页，本工具运行时无需调用 AI 服务。
第一轮：把想法写成可检查的要求
先建空文件夹 research-viewer，放入六行 CSV。发送：
为这组六行教学数据做一个中文网页，保存为 viewer.html。把数据直接放在文件里，双击可运行，不依赖网络、外部库或服务器。显示原始六行记录，提供“全部、只看 A、只看 B”三个按钮，按人显示压力和睡眠困难均值。页面写清数据是合成教学数据。请创建文件，并说明怎样打开和检查。
这里最关键的要求是“单文件、双击可运行”和三项具体功能。否则助手可能顺手搭出需要安装依赖的完整网站，让第一次练习多出不必要的步骤。
只有普通聊天时，要求“返回从 <!doctype html> 到 </html> 的完整内容”。复制到记事本，另存为 viewer.html，保存类型选“所有文件”，编码选 UTF-8。确认文件没有变成 viewer.html.txt，再双击打开。
第二轮：亲自点，再提出一项修改
先按下面的顺序检查：
- 全部视图有六行；选 A 或 B 后各有三行。
- A 的均值为 2、3，B 为 5、6，列没有对调。
- 窄窗口里还能看到按钮、数值与列名。
- 断开网络后重新打开文件，仍能切换视图。
然后加一个小功能：
增加“复制当前摘要”按钮。复制内容应包含当前筛选条件、记录数和各人的两项均值。复制失败时，在页面显示可手动选择的摘要。保留原有功能，先备份为 viewer-v1.html，再修改。
这条要求包含用途、输出和失败时的办法。修改后重复前四项检查，再把摘要粘到文本编辑器中核对。示范工具包含这一轮功能，可以比较不同生成版本的做法。
打不开或结果不对，怎样反馈
“不好用”很难定位。可以改成：“在 Windows 的浏览器中双击打开，点击只看 B 后仍显示六行；请检查筛选事件并修复，均值算法保持不变。”没有看到任何界面时，先检查文件后缀；显示代码文字时，检查是否把 Markdown 的三反引号也复制进去了。
能运行后，让助手解释数据放在哪里、按钮怎样筛选、均值怎样算。你至少应该能指出这三部分，并用已知数字判断结果。版本修改出错时，重新打开 viewer-v1.html 对照，再修新文件。
把它带回自己的工作
类似方式适合做变量字典浏览器、研究材料预览器、图表展示页、内部进度小看板。先从不收集个人信息的小工具开始，每一轮只增加一个能当场检查的功能。
若进一步用于正式实验，网页能打开只是起点：计时精度、随机化、退出、数据保存和重复参与都要另行验证。先在研究设计页明确要测什么，再决定需要怎样的程序。