用Vibe Coding打造624台掌机数据库：从零构建纯前端检索工具

前段时间整理旧资料时发现自己这些年陆陆续续记了不少掌上游戏机的参数从 Game Boy、NDS、PSP到 Switch、Steam Deck、ROG Ally前前后后汇总了 624 台机器的数据。数据躺在表格里其实没什么价值真正有价值的是让它能被检索、筛选和对比。于是我用最近很火的 Vibe Coding 方式把这个数据集做成了一个纯前端的掌机数据库小工具也顺手把它提交到了 B 站 AI 创造公开赛。这篇文章会把整个项目的来龙去脉拆开讲Vibe Coding 到底是什么、624 台掌机数据是怎么设计的、我如何通过“自然语言描述需求 → AI 生成代码 → 人工验证调整”的流程把工具做出来以及开发过程中遇到的坑和适合普通开发者的工程建议。1. 背景与核心概念1.1 为什么想做“掌机数据库”工具掌上游戏机的历史跨度很大参数差异也非常明显。30 年前的 Game Boy 只有一块 160×144 分辨率的黑白屏而现在的 Steam Deck 已经是一台可以跑 3A 大作的迷你 PC。如果单独看某台机器很难感受到这种演进但把 624 台机器放到一起用同一个字段去对比就能看出屏幕分辨率、内存容量、电池方式、系统生态这些维度几十年的变化轨迹。工具的价值不只是“展示数据”而是要解决三个问题搜索用户想查“任天堂出过哪些掌机”输入关键词就能看到结果。筛选用户想看“2010 年以后发布、支持模拟器、重量较轻”的设备目前缺一个多维筛选入口。对比用户在两台机器之间犹豫需要把参数并排放在一起才能做决定。如果按传统前端开发的流程从初始化项目到写组件、调样式、处理筛选逻辑至少需要半天到一天。而用 Vibe Coding我可以在几小时内把可运行的版本搭出来再把精力花在数据校验和体验优化上。1.2 什么是 Vibe CodingVibe Coding 不是某个框架也不是某个工具而是一种“以自然语言为主导”的开发方式。它最早在 2025 年前后的 AI 编程社区中被频繁讨论核心思想很简单开发者用描述性语言向 AI 表达产品意图AI 负责生成代码开发者负责验证、运行、纠错和迭代。传统编程流程是“人写代码 → 机器执行 → 人修改”Vibe Coding 的流程则是“人描述需求 → AI 生成代码 → 人验证修改 → 继续描述新需求”。这里的“人”不再需要逐行敲出所有代码但依然需要对系统设计、数据结构、运行结果负责。有人把 Vibe Coding 简单理解成“偷懒式开发”这是不对的。它更像是把编程工作从“实现细节”提升到了“意图管理”层面。写得好的 Vibe Coding 项目需求描述的清晰度、数据模型的合理性、AI 生成代码后的审查能力反而比传统开发更考验工程素养。1.3 本文适合哪些读者这篇文章适合下面几类读者正在准备 AI 创作赛、Hackathon 项目想用 AI 辅助快速做出原型的人。已经用过类似代码补全工具但还不确定如何用 AI 完成整个小工具开发的开发者。游戏数据爱好者想把自己整理的资料变成可交互页面的人。刚接触前端想通过一个完整小项目理解 HTML、CSS、JavaScript 和数据渲染的新手。读完这篇文章你可以掌握一套可以复用的 Vibe Coding 开发流程也能直接把文中的掌机查询工具代码改造成自己的数据展示项目。2. 项目需求与数据结构设计2.1 数据来源与字段设计掌机数据整理阶段并不依赖 AI而是手动从公开资料中汇总。624 台机器覆盖了从 1980 年代到 2025 年左右的常见掌上游戏设备包括主流商业掌机、怀旧开源掌机、PC 掌机以及一些具有代表性的国产机型。为了让每台机器都能放进同一个表格我设计了 14 个通用字段。字段设计时主要考虑两个原则可比较性所有机器都有“屏幕”“CPU”“内存”“电池”这些维度哪怕厂商没有公开具体参数也要用“未知”或“待补充”占位。可筛选性品牌、发布年份、系统、模拟器支持这些字段要能作为筛选条件所以最好用枚举值而不是大段文字。字段清单如下字段名类型说明idnumber数据唯一编号brandstring品牌如 Nintendo、Sonynamestring机型名称releaseYearnumber发布年份screenstring屏幕参数如“6英寸 1280×720 LCD”cpustring处理器型号或规格ramstring内存容量storagestring存储方式如卡带、SD 卡、SSDbatterystring电池描述如“4 节 AA 电池”weightnumber重量单位克systemstring操作系统或运行平台emulatorSupportstring模拟器兼容性如“强”“中”“弱”priceLevelstring价位区间如“低”“中”“高”portableLevelnumber便携度评分1 到 5 分2.2 数据清洗时需要处理的问题整理 624 台机器时最常见的三个问题是第一同一属性在不同年代的表达方式完全不同。例如“内存”字段Game Boy 时代只有 8KB而 Steam Deck 是 16GB直接比较没有意义但工具需要展示这个真实数值所以保留原始描述不做归一化。第二部分机器的公开参数缺失。开源掌机往往没有官方规格表这时我使用“未知”而不是删除这条数据保证在筛选和计数时统计口径一致。第三品牌命名不统一。例如“Nintendo”“任天堂”“任天堂株式会社”必须统一成“Nintendo”“Sony”和“索尼”统一成“Sony”。这个操作在 Excel 里用批量替换即可完成转换 JSON 时也要再次检查。2.3 数据模型示例下列代码是从 data.json 中抽取的几条示例数据真实文件里共有 624 条。为了保持可读性这里只展示 4 条[ { id: 1, brand: Nintendo, name: Game Boy, releaseYear: 1989, screen: 2.6英寸 160×144 LCD, cpu: 定制 8 位 CPU, ram: 8KB, storage: 卡带, battery: 4 节 AA 电池, weight: 220, system: 自研封闭系统, emulatorSupport: 弱, priceLevel: 低, portableLevel: 4 }, { id: 2, brand: Sony, name: PSP-1000, releaseYear: 2004, screen: 4.3英寸 480×272 TFT, cpu: MIPS R4000, ram: 32MB, storage: UMD / 记忆棒, battery: 内置锂电池, weight: 280, system: PSP 系统, emulatorSupport: 中, priceLevel: 中, portableLevel: 4 }, { id: 3, brand: Valve, name: Steam Deck, releaseYear: 2022, screen: 7英寸 1280×800 LCD, cpu: AMD Zen 2 APU, ram: 16GB LPDDR5, storage: 64GB eMMC 起, battery: 40Wh 锂电池, weight: 669, system: SteamOS, emulatorSupport: 强, priceLevel: 高, portableLevel: 2 }, { id: 4, brand: ANBERNIC, name: RG35XX, releaseYear: 2023, screen: 3.5英寸 640×480 IPS, cpu: 全志 H700, ram: 1GB DDR4, storage: TF 卡, battery: 2600mAh 锂电池, weight: 190, system: Linux / 开源系统, emulatorSupport: 强, priceLevel: 低, portableLevel: 5 } ]这里需要注意JSON 文件中如果出现中文保存时必须使用 UTF-8 编码否则页面会出现乱码。3. 开发环境与工具选型3.1 为什么选择纯前端方案工具的核心需求是数据查询和展示没有用户登录、没有写操作、没有服务端计算因此纯前端方案是最合适的数据文件 data.json 直接放在项目里由浏览器加载。页面用 HTML、CSS、JavaScript 实现不需要额外后端服务。部署时可以放到任意静态托管平台也可以直接在本地打开 Vercel、GitHub Pages 等平台预览。纯前端方案对比赛演示也有优势不会因为后端服务过期、接口变动导致整个工具不可用。3.2 本地环境准备你不需要重型环境只需要准备下面几项操作系统Windows、macOS、Linux 均可。浏览器Chrome 或 Edge用于预览和调试。代码编辑器Visual Studio Code配合 AI 插件使用。Node.js建议安装 LTS 版本用于启动本地静态服务避免浏览器的跨域限制。如果你只是测试页面不安装 Node.js 也可以但直接双击 index.html 打开时浏览器会因 file:// 协议禁止 fetch 方法读取本地 JSON 文件。这个坑在后面的常见问题里会详细说明。3.3 AI 编程工具选择Vibe Coding 并不绑定某个具体工具。我项目中使用的是支持“对话式代码生成”的 AI 编辑器你可以根据自己的环境选择支持 AI 插件的 VS Code通过内置对话窗口生成代码或修改当前文件。Cursor、Windsurf 等 AI 优先编辑器把自然语言指令和代码文件放在同一个界面中适合项目级修改。通义灵码、GitHub Copilot 等代码补全工具适合在写代码过程中获得即时建议。本地大模型工具如果对数据隐私有要求可以通过 Ollama 等方式部署本地模型原理相同。选择工具的重点不在于“哪个最强”而在于是否能形成“生成 → 运行 → 反馈 → 修改”的闭环。本文的示例不依赖特定工具所有提示词都可以在任意对话式 AI 编程助手中使用。3.4 项目目录规划在开始向 AI 描述需求之前先规划好目录这样后续代码才不会乱。handheld-db/ ├── data.json # 624 台掌机数据 ├── index.html # 页面骨架 ├── style.css # 页面样式 ├── app.js # 核心逻辑 └── README.md # 项目说明这个结构很简单但功能边界清晰数据、结构、样式、逻辑分离后续改动任何一个文件都不影响其他部分。4. Vibe Coding 核心开发流程4.1 先写需求描述再让 AI 写代码Vibe Coding 的第一个关键步骤是把自己的需求转换成 AI 能理解的任务描述。很多人得到不满意结果不是因为 AI 能力不足而是因为需求描述太模糊。我使用的第一轮提示词如下我有一个 data.json 文件里面是 624 台掌机数据字段包括 id, brand, name, releaseYear, screen, cpu, ram, storage, battery, weight, system, emulatorSupport, priceLevel, portableLevel。 请帮我写一个纯前端的掌机数据库浏览工具 1. 页面顶部是搜索框可以在 name 字段中做模糊搜索。 2. 搜索框下方提供品牌筛选下拉框选项由数据里的 brand 字段动态生成。 3. 主体区域用卡片网格展示掌机每张卡片显示品牌、名称、发布年份、屏幕、电池、重量。 4. 点击卡片后弹出详情面板显示所有字段。 5. 界面风格清爽适合游戏爱好者。 6. 不要把数据硬编码在 HTML 里必须通过 fetch 加载 data.json。这个提示词包含四个关键元素数据结构明确告诉 AI data.json 有哪些字段。功能列表用序号列出具体功能避免遗漏。技术约束指定必须用 fetch 加载防止 AI 把数据写死。视觉方向描述风格但不指定具体像素值把设计权交给 AI 初步实现。4.2 第一轮生成页面骨架AI 会返回一组文件代码包括 index.html、style.css、app.js。我需要把代码保存到对应文件中然后用本地服务器运行。第一轮生成的页面通常已经可以展示数据但大概率还有几个问题卡片信息过多导致布局拥挤。筛选下拉框没有“全部品牌”选项。详情面板缺少关闭按钮点击遮罩也不能关闭。这些问题并不需要通过手写代码全部重做而是继续用自然语言描述给 AI。例如当前版本文案已经能展示数据。请做以下调整 1. 品牌筛选框增加“全部品牌”选项。 2. 卡片信息只保留品牌、名称、发布年份、屏幕、重量其他字段放到详情面板。 3. 详情面板的背景遮罩点击后可以关闭面板。 4. 数据加载过程中显示 loading 文案。这一轮修改完成后页面基本具备可用性。4.3 第二轮补全筛选与对比逻辑第一版完成的是“浏览”功能还缺少核心的“筛选”和“对比”。第二轮提示词继续迭代在现有基础上增加两个功能 1. 品牌筛选和搜索框可以同时生效搜索后再筛选或筛选后再搜索结果都应该是交集。 2. 增加发布年代范围筛选两个输入框分别输入起始年份和结束年份。 3. 每张卡片右上角增加一个“收藏”按钮点击后把该掌机加入右侧收藏栏。 4. 收藏栏最多显示 4 台机器超出时提示“最多对比 4 台设备”。 5. 点击收藏栏里的“开始对比”按钮弹出模态框用表格显示已收藏掌机的参数对比。这里特别强调了“交集”逻辑因为很多开发者第一次做筛选功能时容易犯“只有最后一个条件生效”的错误。把这个需求写清楚AI 生成的代码就会使用统一的过滤条件而不是多个 if 分支互相覆盖。4.4 第三轮修复问题与打磨样式功能基本齐全后进入调试和样式打磨阶段。这一阶段我主要是“人机协作”打开控制台找到报错把报错信息粘贴给 AI让 AI 解释并修复。例如我遇到一个实际报错app.js:45 Uncaught TypeError: Cannot read properties of undefined (reading name)把报错信息和相关代码片段贴给 AI 后得到的修复方案是在筛选函数内部先判断currentData是否为空数组再执行.filter()。原因通常是 fetch 没有返回数据时代码就开始渲染。样式打磨阶段的提示词页面现在的配色太单调。请使用深色主题 1. 背景色使用 #1e1e2e卡片使用 #2a2a3c。 2. 品牌文字用蓝色 #89b4fa名称文字用白色。 3. 收藏栏固定右侧宽度 280px支持收起。 4. 卡片 hover 时轻微上浮并增加阴影。我保留了一部分 AI 生成样式也手动调整了几个不协调的颜色最后视觉上达到“不算惊艳但干净可读”的程度。5. 完整实战掌机数据库工具落地这一章把整个项目的最终文件整理出来你可以直接复制到本地运行。为了篇幅清晰我保留核心代码并做逐段解释。5.1 项目结构最终目录如下handheld-db/ ├── data.json ├── index.html ├── style.css └── app.js5.2 index.html 页面骨架!-- index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title掌机数据库 - 624 台掌上游戏机检索工具/title link relstylesheet hrefstyle.css / /head body header classtoolbar h1掌机数据库/h1 p classsubtitle共 span idtotalCount0/span 台掌机/p /header section classfilters input typetext idsearchInput placeholder输入机型名称搜索例如 Game Boy / select idbrandFilter option value全部品牌/option /select input typenumber idyearStart placeholder起始年份 min1980 max2030 / input typenumber idyearEnd placeholder结束年份 min1980 max2030 / button idresetBtn重置筛选/button /section main classcontent div classcard-grid idcardGrid/div aside classcompare-bar idcompareBar h3收藏对比/h3 div idcompareList/div button idcompareBtn开始对比/button /aside /main !-- 详情弹窗 -- div classmodal-overlay iddetailModal div classmodal-content iddetailContent/div /div !-- 对比弹窗 -- div classmodal-overlay idcompareModal div classmodal-content idcompareContent/div /div script srcapp.js/script /body /html这段 HTML 页面结构比较简单各模块职责如下toolbar 显示标题和总数。filters 区放搜索框、品牌筛选、年份范围和重置按钮。cardGrid 是卡片容器。compareBar 是收藏对比栏。detailModal 和 compareModal 是两个弹窗分别用于详情展示和参数对比。5.3 style.css 核心样式由于 AI 生成的完整样式表较长我这里只保留关键样式片段/* style.css 核心片段 */ :root { --bg-color: #1e1e2e; --card-bg: #2a2a3c; --text-color: #e6e6e6; --brand-color: #89b4fa; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg-color); color: var(--text-color); font-family: PingFang SC, Microsoft YaHei, sans-serif; } .toolbar { padding: 24px 32px; background: #181825; } .toolbar h1 { margin: 0; } .filters { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 32px; background: #181825; border-bottom: 1px solid #313244; } .filters input, .filters select, .filters button { padding: 8px 12px; font-size: 14px; border-radius: 6px; border: 1px solid #6c7086; background: #11111b; color: var(--text-color); } .content { display: flex; gap: 20px; padding: 24px 32px; } .card-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .card { background: var(--card-bg); border-radius: 12px; padding: 16px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .card .brand { color: var(--brand-color); font-size: 13px; } .card h3 { margin: 8px 0; font-size: 18px; } .card .meta { color: #a6adc8; font-size: 13px; line-height: 1.6; } .fav-btn { background: transparent; border: 1px solid #6c7086; color: var(--text-color); border-radius: 6px; padding: 4px 10px; cursor: pointer; margin-top: 10px; } .fav-btn.active { border-color: #f38ba8; color: #f38ba8; } .compare-bar { width: 280px; background: #181825; border-radius: 12px; padding: 16px; height: fit-content; position: sticky; top: 20px; } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; z-index: 100; } .modal-overlay.active { display: flex; } .modal-content { background: #2a2a3c; border-radius: 12px; padding: 24px; max-width: 640px; width: 90%; max-height: 80vh; overflow-y: auto; } .compare-table { width: 100%; border-collapse: collapse; } .compare-table th, .compare-table td { border: 1px solid #45475a; padding: 8px 10px; font-size: 14px; text-align: left; }样式中的颜色变量放在 :root 中方便统一调整主题色。卡片用 grid 布局实现自动换行弹窗通过 .active 类控制显示和隐藏。5.4 app.js 核心逻辑app.js 是从 AI 生成代码基础上修改而来关键逻辑包括加载数据、渲染卡片、筛选、收藏和对比。这里给出核心代码// app.js const state { allData: [], filteredData: [], favorites: [] }; const page { totalCount: document.getElementById(totalCount), searchInput: document.getElementById(searchInput), brandFilter: document.getElementById(brandFilter), yearStart: document.getElementById(yearStart), yearEnd: document.getElementById(yearEnd), resetBtn: document.getElementById(resetBtn), cardGrid: document.getElementById(cardGrid), compareList: document.getElementById(compareList), compareBtn: document.getElementById(compareBtn), detailModal: document.getElementById(detailModal), detailContent: document.getElementById(detailContent), compareModal: document.getElementById(compareModal), compareContent: document.getElementById(compareContent) }; // 加载 JSON 数据 async function loadData() { const res await fetch(data.json); if (!res.ok) { throw new Error(加载数据失败${res.status}); } state.allData await res.json(); state.filteredData [...state.allData]; initBrandFilter(); renderCards(); page.totalCount.textContent state.allData.length; } // 初始化品牌下拉框 function initBrandFilter() { const brands [...new Set(state.allData.map(item item.brand))].sort(); brands.forEach(brand { const opt document.createElement(option); opt.value brand; opt.textContent brand; page.brandFilter.appendChild(opt); }); } // 渲染卡片 function renderCards() { const data state.filteredData; if (data.length 0) { page.cardGrid.innerHTML p classempty-tip没有符合条件的掌机/p; return; } page.cardGrid.innerHTML data.map(item div classcard># 方式一使用 Node.js 的 npx 工具 npx serve . # 方式二使用 Python python3 -m http.server 8080然后浏览器访问http://localhost:3000或http://localhost:8080可以观察页面顶部显示总数 624。搜索框中输入“PSP”卡片区域只出现名称中包含 PSP 的机器。品牌选择“Nintendo”后下拉框对应的机器全部展示。年份范围输入 2004 到 2010结果与品牌筛选叠加生效。点击卡片可查看完整详情。收藏两台以上设备后点击“开始对比”可以弹出参数对比表格。6. 常见问题与排查思路使用 Vibe Coding 开发这类小工具时出现频率最高的问题其实都不复杂。下面是实际开发中遇到的问题和解决思路。问题现象常见原因解决思路页面白屏控制台报错 “Failed to fetch”直接双击 index.htmlfile:// 协议下 fetch 不能读取本地 JSON使用npx serve .或python3 -m http.server启动本地服务页面显示乱码data.json 或 HTML 文件不是 UTF-8 编码用编辑器重新保存文件编码选择 UTF-8控制台报错 “Cannot read properties of undefined”fetch 尚未返回数据时代码就调用了 filter 或 map在 loadData() 加载完成后调用渲染函数或在渲染函数中判空筛选后中间态为空但下拉框选项消失下拉框选项依赖 filteredData 导致错误下拉框应该从 allData 生成而不是 filteredData收藏数量超过 4 台没有提示收藏栏没有在 toggleFavorite 中做上限判断在添加收藏之前检查 favorites.length 4事件绑定失效点击卡片没有反应卡片渲染后重新生成了 DOM旧绑定被覆盖使用事件委托在容器上绑定 click通过 closest 找到目标AI 生成的代码包含未定义变量或函数AI 上下文遗漏了部分文件内容把相关文件完整贴给 AI或让 AI 先解释代码再修改修改文件后浏览器不刷新浏览器缓存了旧文件按 CtrlShiftR 强制刷新或开启自动刷新工具这里特别提醒一个 Vibe Coding 项目中容易忽略的问题AI 可能会基于“常见项目结构”假设一些并不存在的文件。比如它生成了import { data } from ./data.js但项目中根本没有这个文件。遇到这种情况不要强行让 AI 继续补代码而是先统一文件结构把数据文件固定为 data.json再让 AI 重新生成加载逻辑。如果遇到“AI 修改某处后把别处弄坏了”最好的方式是保留每次修改前的文件备份或者使用 Git 提交检查点。这样可以让 AI 在失败时快速回退而不是在坏代码上继续叠加修改。7. 最佳实践与工程建议7.1 提示词也要“分层”不要期待一次提示就能生成完美项目。合理的做法是把大型需求拆成多个层次第一层整体功能描述让 AI 生成完整页面骨架。第二层细分功能例如“筛选逻辑”“收藏逻辑”“弹窗交互”逐个迭代。第三层样式和细节调整。第四层针对报错信息进行定向修复。这种分层方式让每次对话都聚焦在一个小问题上AI 的输出更容易控制出问题时也能更快定位。7.2 让 AI 解释代码而不是只让它改代码当 AI 生成一段无法理解的代码时不要直接要求“帮我改”而是先输入请解释这段代码的每一行作用然后再提出修复建议。这个习惯非常重要。Vibe Coding 项目里最容易出现的问题不是“AI 写错了”而是“人类不知道 AI 为什么这么写”。一旦你无法理解生成代码的意图后续维护就会非常被动。在比赛项目中评审提问时你也需要能清楚解释自己项目的实现原理。7.3 数据文件要单独管理数据文件 data.json 和代码逻辑分离是这个小工具保持可维护性的关键。当数据需要更新时不需要修改任何 JavaScript 代码只需要保证 JSON 中字段一致。如果数据量继续扩大超过几千条可以考虑进一步优化把 data.json 拆分成按品牌分组的多个文件。增加数据版本字段避免浏览器缓存旧数据。对常用字段建立索引例如按 brand 建 Map而不是每次遍历数组。624 台机器用数组遍历完全没有性能问题但提前考虑数据扩展方向是一个开发者应有的工程意识。7.4 数据来源要标注清楚在 README 中我明确标注了数据来源为公开资料汇总并说明了部分参数可能存在误差。这样既尊重原始资料也避免工具上线后因为数据不准确产生误导。如果你也打算整理类似数据建议在项目中增加一个来源说明文件标注主要参考资料和整理日期。这个习惯在数据类项目中尤其重要。7.5 用 Git 管理 AI 的每一次改动Vibe Coding 并不意味着要抛弃版本管理。恰恰相反因为 AI 修改可能带有随机性所以每次 AI 修改后都应该形成一次 Git 提交。推荐工作流git add . git commit -m feat: AI 生成卡片渲染功能如果 AI 下一步修改破坏了功能可以直接回滚git log --oneline git checkout 之前的提交hash -- app.js这种方式比手动撤销编辑器里的改动更可靠也方便在比赛答辩时展示项目的迭代过程。7.6 明确 AI 生成代码的安全边界AI 生成代码时尤其是涉及用户输入、网络请求、本地存储时要格外注意安全。例如用户输入内容不能直接插入 innerHTML要进行文本转义。不要把 API Key 硬编码到前端代码中。如果需要保存收藏记录要处理 localStorage 中可能存在的过期数据格式。本项目的收藏功能只使用前端内存没有使用 localStorage所以不涉及持久化安全问题。但如果后续增加“保存收藏”功能建议增加数据格式校验和 try-catch。8. 总结与下一步从整理 624 台掌机数据到用 Vibe Coding 做出一个可浏览、可筛选、可对比的纯前端工具整个流程的核心并不是“让 AI 帮我写代码”而是“我清楚地知道数据结构也清楚地知道功能边界AI 只是把实现细节加速完成”。如果你也想做类似工具建议先按这个顺序走一遍先把数据整理成结构化的 JSON规划好字段和筛选维度再用自然语言向 AI 描述功能分批次生成代码最后把所有报错信息当作调试素材让 AI 参与修复。整个过程不需要三天但你会对“人机协作开发”有更直观的理解。下一步可以继续尝试的方向还包括把工具部署到 GitHub Pages 或 Vercel给掌机数据增加图片字段加入本地收藏持久化以及用图表方式展示各年代掌机参数的变化趋势。数据已经是现成的功能扩展只是时间问题。如果你也在做 AI 创作赛、工具类小产品或者个人数据项目希望这篇文章能给你一个可以直接套用的开发模板。收藏备用动手搭一个自己的版本。