这次我们来看一个很典型的 Vibe Coding 实践项目作者整理了 624 台掌机的数据借助 AI 辅助编码最终做成了一个可以搜索、筛选、详情查看的掌机数据工具。这正好也是 B 站 AI 创造公开赛的一个参赛作品。这个项目本身并不复杂但它把 Vibe Coding 的一条完整链路跑通了数据收集 → 结构化整理 → 用自然语言让 AI 生成代码 → 反复测试和迭代 → 得到一个能用的工具。对于想尝试 Vibe Coding、但又不知道拿什么练手的人来说这种“数据查询类工具”几乎是性价比最高的起点。下面我会从数据字段设计、提示词怎么写、页面怎么迭代、测试怎么验证、后边还能怎么扩展这几个角度把这个项目拆开讲一遍。如果你也想复刻一个类似的掌机数据库、游戏库或者任何“搜索型工具”这套流程可以直接套用。1. 核心能力速览先把这个工具的大致面貌说清楚。能力项说明项目类型掌机数据检索 / 筛选 / 对比工具数据规模围绕 624 台掌机整理的结构化数据主要功能关键词搜索、品牌/年代/硬件参数筛选、详情面板、列表与卡片视图开发方式Vibe Coding通过自然语言提示让 AI 生成和迭代代码技术形态纯前端单页应用或轻量 Web 服务硬件门槛很低常规浏览器即可运行不依赖 GPU启动方式直接打开 HTML或通过本地静态服务访问是否支持 API取决于后端选型数据成 JSON 后天然方便提供给接口是否支持批量任务数据导入与更新可批量处理适合场景掌机爱好者查参数、做对比想练习 Vibe Coding 的开发者从材料看这个项目更偏前端工具向重点是把数据结构化并展示出来。对于读者来说最值得关注的是两点一是 624 条数据是怎么整理成一个可用产品的二是 Vibe Coding 的提示词迭代过程到底是怎么发生的。2. Vibe Coding 为什么会适合这类项目Vibe Coding 并不是一个严格的编程框架而是一种工作方式你负责描述需求和设计数据结构AI 负责生成、修改、调试代码。它的核心是人与模型的持续对话而不是一次性让 AI 写出所有东西。掌机数据工具恰好非常适合这种开发方式原因有三点。第一需求边界清晰。这个工具要解决的问题就是“从 624 台掌机里快速找到我想要的机器并且能看参数、做对比”。搜索、筛选、详情展示这些功能逻辑简单AI 生成的代码通常不会因为业务规则复杂而失控。第二数据是结构化资产。掌机参数品牌、年份、CPU、内存、屏幕分辨率、重量、售价、电池等天然适合用 CSV 或 JSON 表达。数据本身不依赖模型推理AI 只需要处理展示逻辑不需要处理复杂的业务状态。第三迭代成本极低。如果工具的每个功能都从零手写至少需要半天。但用 Vibe Coding大多数情况下的流程是写一句“帮我在页面右侧加一个详情面板点击列表项时展示对应掌机的完整参数”等几秒刷新页面发现问题再补一句“详情面板里的图片链接如果为空就显示一个占位图”。这个过程可以持续循环直到满意。当然Vibe Coding 也有适用边界。如果项目涉及复杂状态管理、高并发后端、大量权限控制AI 生成的代码很可能需要人工大面积重写。但掌机数据工具这种查询展示类项目AI 的完成度可以做到很高。3. 数据准备624 台掌机的结构化过程动手让 AI 写代码之前必须先把数据整理好。数据是 Vibe Coding 项目的燃料数据结构越干净AI 生成的页面逻辑就越省心。3.1 数据来源与清洗掌机数据的收集通常来自公开资料、产品规格页、游戏机评测文章、玩家社区整理帖等。624 台这个规模意味着不只有主流掌机还包含了大量的改款、限定版、第三方兼容机型以及不同地区的型号变体。收集到的原始数据往往很乱同一款机器在 A 网站叫“Game Boy”在 B 网站叫“GB”重量有的写克有的写千克屏幕尺寸有的是英寸有的只有分辨率。面对这种情况第一件事是统一字段规范而不是直接扔给 AI。常见的字段至少应该包括字段含义示例id唯一标识gb-1989-001brand品牌Nintendomodel型号名称Game Boyrelease_year发布年份1989cpuCPU 型号DMG-CPUmemory内存 / 存储8KB RAMscreen_size屏幕尺寸2.6 英寸resolution分辨率160×144weight重量220gmedia_type媒体类型卡带price首发价格89.99 美元battery电池续航约 15 小时image图片链接可选tags标签经典、黑白屏清洗时要处理的主要问题包括统一单位。重量统一为克屏幕统一为英寸价格统一为首发当地货币。处理缺失值。早期掌机的很多硬件参数至今没有官方确认缺失就留空不要在页面里硬填 0。不同地区版本去重或保留。如果日版和美版硬件不同建议保留为多条记录方便对比如果只是包装不同可以在 tags 里标注。图片链接的版权。如果图片来自公开网络要注意引用来源或使用占位图避免版权风险。3.2 JSON 数据示例工具层面对 624 条数据最友好的格式是 JSON。下面是一段简化的数据结构示例实际使用时字段可以按需补充[ { id: nintendo-ds-2004, brand: Nintendo, model: Nintendo DS, release_year: 2004, cpu: ARM946E-S ARM7TDMI, memory: 4MB RAM, screen_type: 双屏 TFT, resolution: 256×192单屏, weight: 275g, media_type: NDS 卡带 / GBA 卡带, price: 149.99 美元, battery: 约 6-10 小时, image: , tags: [双屏, 触控笔, 经典] }, { id: sony-psp-1000-2004, brand: Sony, model: PSP-1000, release_year: 2004, cpu: MIPS R4000, memory: 32MB RAM, screen_type: 4.3 英寸 TFT, resolution: 480×272, weight: 280g, media_type: UMD, price: 249.99 美元, battery: 约 4-6 小时, image: , tags: [UMD, 多媒体] } ]这份 JSON 建议直接放在项目目录下的data.json前端通过 fetch 加载。如果担心本地直接把 HTML 文件拖到浏览器会跨域加载失败就配合一个静态服务使用后面会讲。3.3 数据量评估624 条记录如果每条 JSON 平均 400 到 800 字节整个文件大概在 0.5MB 到 1.5MB完全可以直接放进浏览器加载。不需要引入数据库也不需要后端。这是这个项目“门槛低”的另一个体现。4. 用 Vibe Coding 搭建工具环境与提示词数据准备好之后就进入 Vibe Coding 的核心环节用自然语言让 AI 生成代码。4.1 环境准备工具本身的运行环境可以非常轻量。如果你选择纯 HTML JavaScript 单页方案只需要以下条件一个现代浏览器Chrome/Edge/Firefox 均可一个文本编辑器一个本地静态服务器推荐避免 fetch 本地 JSON 的跨域问题如果使用 Node.js可以用npx serve或简单的 Python HTTP 服务# 方法一Python 静态服务 cd your-project-directory python -m http.server 8080# 方法二Node 静态服务 npx serve -l 8080 .如果你想让 AI 生成一个 React 版本那还需要 Node.js 环境和包管理器。但对于 624 条数据的展示纯原生 JavaScript 完全够用也更适合让 AI 去生成。4.2 初始提示词生成基础页面用 Vibe Coding 时第一轮提示词不要一次提太多需求。先把骨架搭出来之后逐步补功能。一个合理的初始提示词是请帮我写一个掌机数据检索工具的单页 HTML 文件。 数据从 data.json 文件加载。 页面左侧是掌机列表显示型号名称和发布年份 页面顶部有一个搜索框可以按关键词过滤列表 点击列表中的某一项后右侧显示该掌机的完整参数详情。 请使用简洁的现代 CSS 样式支持中文界面。这个过程不需要你亲自写代码但你要能看懂 AI 生成的代码结构。第一版生成后直接在浏览器打开确认以下基本功能页面能正常加载数据列表能显示出来搜索框输入文字时可以过滤点击列表项时详情面板有内容如果某一项没生效直接把现象扔给 AI让它修复。例如点击列表项时详情面板没有更新控制台没有报错。请检查事件绑定和数据传递逻辑。4.3 迭代提示词增加字段筛选基础页面跑通后再逐步增加筛选能力。常见做法是在顶部加一排下拉框让用户按品牌、发布年代、有无某项硬件规格来筛选。在搜索框下方增加筛选条件区域 1. 品牌下拉框选项从数据中自动提取不要写死。 2. 发布年代范围输入可以填起始年和结束年。 3. 筛选条件要和搜索关键词叠加生效。 4. 当筛选结果为空时页面显示“没有符合条件的掌机”。这一轮的关键是“选项从数据中自动提取”。这样可以避免以后数据更新时下拉框里出现过期品牌。4.4 迭代提示词对比模式单台掌机的详情看多了用户自然想对比两台机器。这个功能和 624 条数据结合后价值会明显提升。增加对比功能 1. 列表项上有复选框用户可以勾选 2 到 3 台掌机。 2. 页面底部显示一个对比区用表格横向对比参数。 3. 参数缺失时显示“—”。 4. 如果勾选超过 3 台提示用户最多只能对比 3 台。对比模式是比较容易暴露 AI 逻辑缺陷的地方例如多选时重复点击同一台机器、数据结构字段不一致导致表格错位、数量上限判断放错位置等。每一轮出现问题就补一条修复提示。4.5 AI 生成代码的使用方式这里要特别提醒一点Vibe Coding 不是“AI 写完就能跑”。实际迭代过程中很多问题出在数据格式和页面逻辑的匹配上。例如 AI 生成的代码可能默认data.json里没有tags字段而你实际数据里有或者它假设所有机型都有price但某些古董掌机的首发价格已经无处考证。这些情况下最好的做法是让 AI 也读一遍数据文件和当前代码请先查看 data.json 中的字段结构再对照当前 index.html 的实现 找出哪些地方依赖了可能缺失的字段统一改成安全判断。这个提示词能大幅提升 AI 生成代码的健壮性。5. 功能测试与效果验证工具做完后不能只点几下就认为没问题。测试的核心目的是验证搜索、筛选、详情、对比四条链路在 624 条数据上都能稳定工作。5.1 功能测试用例测试项操作预期结果数据加载打开页面列表显示掌机数据无控制台报错关键词搜索输入“PSP”只显示名称、标签或描述中包含 PSP 的机型品牌筛选选择 Nintendo列表只剩任天堂系掌机搜索与筛选叠加搜索“DS” 品牌 Nintendo结果同时满足两者详情查看点击列表项右侧显示完整参数缺失字段显示“—”空状态搜索不存在的关键词页面显示无结果提示而不是白屏对比功能勾选 3 台掌机底部对比表格正常渲染数据完整性遍历 624 条记录没有因缺失字段导致页面崩溃响应式缩窄浏览器窗口列表和详情不重叠可正常阅读这些测试用例可以手动执行也可以让 AI 帮你生成一个测试清单。但不要依赖 AI 自动测试全部功能因为这一类工具的运行结果需要真实数据验证。5.2 AI 生成代码的常见失败模式测试时你会遇到一些重复出现的问题这里列几个高频项事件绑定丢失。列表重新渲染后点击事件没有重新挂载导致点击无效。修复方式优先建议 AI 使用事件委托。筛选逻辑取反。多项筛选叠加时条件判断写成了“或”关系导致筛选结果过多。数据字段大小写不一致。数据里是release_year代码里写成releaseYear搜索和展示会一起错乱。中文输入法兼容问题。搜索框在输入拼音时频繁触发过滤导致中文搜索体验差。修复方式设置输入防抖或者等待compositionend事件后再过滤。如果说 Vibe Coding 解决了“从无到有”的问题那测试环节解决的就是“从有到稳”的问题。这一步不能省。6. 接口 API 与批量扩展虽然纯前端版本已经可以用但如果你希望把 624 台掌机的数据开放给其他应用或者以后接入语音助手、聊天机器人那就需要把数据层抽出来做成一个小接口服务。6.1 轻量 API 服务设计推荐使用 Node.js Express 或 Python FastAPI数据文件仍然沿用一个 JSON。服务启动后暴露几个基础接口GET /api/consoles返回全部掌机列表支持search、brand参数。GET /api/consoles/:id返回单台掌机详情。GET /api/brands返回品牌列表。6.2 Python 接口示例用 FastAPI 写一个最小接口非常快。下面是一个通用模板实际使用时需要把data.json的路径替换成你本机的位置import json from fastapi import FastAPI, Query from fastapi.middleware.cors import CORSMiddleware app FastAPI() app.add_middleware( CORSMiddleware, allow_origins[*], allow_methods[*], allow_headers[*], ) with open(./data.json, encodingutf-8) as f: consoles json.load(f) app.get(/api/consoles) def get_consoles( search: str , brand: str , ): result consoles if search: result [ item for item in result if search.lower() in json.dumps(item, ensure_asciiFalse).lower() ] if brand: result [item for item in result if item.get(brand) brand] return {total: len(result), items: result} app.get(/api/consoles/{console_id}) def get_console(console_id: str): for item in consoles: if item.get(id) console_id: return item return {error: not found}启动命令pip install fastapi uvicorn uvicorn main:app --host 127.0.0.1 --port 8000启动后访问http://127.0.0.1:8000/api/consoles?searchPSP就可以验证接口效果。6.3 批量导入与数据更新624 条数据不会只维护一次。后续你会不断补充新机型、修正参数所以最好保留一份 CSV 作为“源数据”每次通过脚本转成 JSON再让页面或接口读取。现代 CSV 转 JSON 的脚本同样可以让 AI 生成帮我写一个 Python 脚本读取 consoles.csv字段包含 id,brand,model,release_year,cpu,memory,screen_size,resolution,weight,media_type,price,battery,tags, 输出为 data.json。要求 - 空值保留为 null 或空字符串不要删除整行。 - release_year 转成数字无法转换的保持为空。 - tags 列如果有多个值用竖线 | 分隔输出时转成数组。这样可以保证“更新数据”这个重复动作成本非常低。以后新增一台掌机只需要在 CSV 里加一行再运行一次脚本。7. 资源占用与性能观察这个项目不涉及 GPU、显存等重度资源但作为前端工具仍然要关注加载性能、内存占用和交互流畅度。7.1 加载时间观察在浏览器 DevTools 的 Network 面板中重点看两个时间数据文件的下载时间和页面的解析渲染时间。624 条 JSON 数据通常只有几百 KB理论上在本地网络环境是瞬时加载。如果你发现加载变慢优先检查是不是页面里存在没有压缩的高清掌机图片。图片建议统一走外链并且加上尺寸压缩避免一次性加载几十张大图。7.2 列表渲染性能如果一次性把 624 条数据全部渲染成 DOM浏览器虽然不会卡死但在低性能设备上滚动时可能出现明显掉帧。解决方案有两种一是分页。每页显示 20 条或 50 条底部用“加载更多”。二是虚拟滚动。只渲染窗口里可见的十几条数据滚动时动态替换。这个方案更适合掌机列表这种高度一致的长列表。当你在提示词里要求 AI 优化性能时可以这样写当前列表一次性渲染 600 多条数据滚动卡顿。 请改成只渲染可见区域的数据其他项在滚动时动态创建。 不要引入大型框架保持原生 JavaScript 或者轻量实现。这类优化提示词对 AI 来说并不难但因为涉及滚动高度计算容易出现边界问题需要重点回归测试列表底部和详情点击。7.3 显存与内存不需要担心和 AI 图像生成、本地大模型部署不同这个掌机工具没有模型推理环节也没有显存占用需求。你只需要关心浏览器内存。打开任务管理器观察浏览器进程的占用正常情况下一个纯数据页面不会超过几百 MB。如果你发现内存异常上涨大概率是某个循环在重复构造大对象而不是数据本身的问题。8. 常见问题与排查方法这类 Vibe Coding 项目会碰到很多琐碎问题。这里按实际开发中常见的现象整理了一份排查表。问题现象可能原因排查方式解决方案页面打不开端口被占用或静态服务没启动检查终端日志和端口监听换端口例如8081JSON 加载失败直接双击 HTML 文件fetch 触发了跨域限制打开浏览器控制台看具体报错改用本地静态服务访问搜索没有结果字段名不一致或搜索逻辑过度严格手动检查数据中是否包含关键词让 AI 统一使用全字段检索中文搜索卡顿输入拼音时频繁触发过滤观察输入过程是否实时过滤增加防抖或等 compositionend选中项后详情不更新事件监听没有使用事件委托点击列表项观察 Console改成事件委托绑定图片加载失败图片链接失效或跨域限制查看 Network 中图片状态加载失败时显示占位图筛选结果为空多个筛选条件叠加后过严逐步移除筛选条件定位增加结果为空时的提示对比表格错位不同掌机字段缺失位置不同检查表格渲染逻辑统一按完整字段表渲染缺失显示“—”AI 改代码后原有功能消失迭代代码时引入了回归问题对照之前的版本 diff用 Git 做版本管理方便回滚数据更新后页面不刷新浏览器缓存拿到了旧 JSON强制刷新或查看 Network 缓存清理缓存或在请求中加时间戳参数这些排查步骤大多数不需要特别深厚的编程经验关键是“让 AI 先看数据文件再看控制台报错再改代码”这个循环要做熟练。9. 最佳实践与使用建议从这次掌机数据工具中可以提炼出几个适合后续项目复用的经验。9.1 提示词拆解比一次完成更重要不要在第一轮就把所有功能都塞给 AI。更好的方式是先让 AI 生成一个能运行的骨架再逐步增加搜索、筛选、详情、对比、优化。每一轮只解决一个主要问题你会更容易定位哪一次改动引入了 bug。9.2 数据、样式、逻辑分层管理即使是一个纯前端工具也建议把数据文件data.json、样式文件style.css、逻辑文件app.js分开。这样 AI 在修改样式时不会不小心破坏数据逻辑修改逻辑时也不会影响布局。文件分离是低成本、高收益的做法。9.3 一定要用 Git 维护版本Vibe Coding 的迭代速度快但 AI 可能在某次修改后把原本正常的代码改坏。如果每一步都提交到 Git你在测试时发现回归可以直接回滚然后精确告诉 AI“从 2 小时前那个版本开始新增对比功能但不要改动搜索逻辑”。这个工作流能省下大量时间。9.4 数据版权与合规掌机的型号名称、logo、官方图片、参数数据都可能涉及商标权、著作权或第三方网站的使用条款。个人学习研究用途问题不大但如果你的工具要公开发布、参与比赛或商业化最好照片统一使用自己拍摄的实机图或者使用无版权占位图。参数数据标注来源。不使用掌机品牌 logo 作为页面装饰性主体元素。如果涉及用户上传图片必须增加审核和举报机制。在 B 站 AI 创造公开赛这类场景下除了工具的可玩性评委通常也会关注素材来源的合规性这一点不能回避。9.5 第一次先小范围测试624 台掌机的数据量虽然不大但你在让 AI 开发对比功能前可以先只保留 20 台数据跑通代码逻辑后再恢复完整数据。这样调试速度快页面报错也更直观。10. 总结与下一步这个项目的价值不在代码量而在于它用 Vibe Coding 完成了一个真实可用的数据工具并且整个开发链路清晰、可复制。如果你想尝试 Vibe Coding拿这种“搜索 筛选 详情”的工具练手是很好的起点。最先要验证的功能是搜索和详情面板因为这两步决定了数据能不能被正常消费。最容易踩的坑是 JSON 加载跨域、字段大小写不一致、事件绑定失效这三类问题会占用你大量调试时间。但只要你有足够耐心让 AI 反复看数据、看报错、改逻辑最终都能跑通。后续可以扩展的方向也有不少可以继续补充更详细的掌机图片可以加入用户收藏和评分可以做一个型号对比的分享链接也可以把接口接进聊天机器人让用户用自然语言问“帮我找一台 2005 年左右的索尼掌机”。无论往哪个方向走底层那 624 台掌机的结构化数据都是这个工具最有价值的部分。