全球免费AI工具导航
当前位置:首页>资源>学习之路>Claude Code>学习笔记四:Claude Code 实现转盘小游戏

学习笔记四:Claude Code 实现转盘小游戏

1 和AI聊清楚需求

小红书上最近火了一堆AI编程做的小工具,主要有以下热门产品清单。这里选择实现“随机转盘 / 决策轮(多主题模版)”,下面就要开始和AI讨论需求内容了。

产品名称功能说明Claude code 实现思路售卖思路实现难度系统推荐功能
课堂点名器 / 签到系统(升级版)导入名单(CSV/Excel)、设置抽取权重(迟到多权重更高)、防重复抽取、自动记录出勤/签到并导出表格前端:名单上传、随机抽取动画;逻辑:权重算法(基于历史记录);后端:签到记录、统计导出售卖“教师版点名器”“培训班互动工具”,支持换 Logo、主题色⭐⭐⭐出勤报表、积分系统、随机提问、历史统计
随机转盘 / 决策轮(多主题模版)可用于穿搭、饮食、学习任务、情侣约会等不同主题;支持自定义选项与概率通用转盘组件(SVG/Canvas);多配置文件生成不同主题皮肤售卖“多主题转盘模板”,按垂类卖不同外观⭐⭐多轮抽奖、动画皮肤、分享图生成
背单词 / 打卡背诵卡片导入词库,随机抽查、听写测试、简单艾宾浩斯复习曲线JSON 词库 + 抽查算法;本地存储记忆记录;听写/选择题模式售卖四六级/考研/托福/日语不同版本,附赠词库⭐⭐⭐错题本、复习计划、学习统计
碎片化刷题器 / 错题循环机导入题库,自动循环刷题;错题自动加权多练题库导入 + 卡片组件;权重逻辑;结果本地保存给老师/博主做“专属刷题工具”⭐⭐⭐错题统计、积分制、多章节管理
对象模拟器 / 恋爱 AI 聊天器模拟恋人/朋友/上司/甲方对话;用户选角色 + 场景固定回复规则(本地)或 Claude API 模式;聊天 UI 模块售卖“恋爱陪练机”“角色模拟器”,可做专属人设版⭐⭐⭐⭐人设库切换、情绪控制、聊天记录导出
恋爱相处打分 / 亲密度测试答题 + 加权得分,生成恋爱/关系报告,可截图分享问卷系统 + 分支逻辑;结果生成图卡页售卖多主题测试:依恋类型、冲突模式、人设匹配⭐⭐结果图卡、题库导入、情感分析文案
聊天回复生成器(轻量版)输入场景,一键生成温柔/幽默/反杀回复三套文案模板规则生成;可选 Claude API售卖话术包 + 专属回复风格⭐⭐⭐回复收藏夹、自定义语气库
酒馆游戏合集真心话/大冒险/谁最有可能/黑暗问题等题库抽取前端卡片 UI + JSON 题库卖局内游戏合集,提供多个题库包⭐⭐轮流模式、音效动画、截图分享
罚酒 / 惩罚生成器根据人数与酒量等级自动生成惩罚任务参数输入 + 规则表;随机任务生成酒桌神器、小红书场景适配强惩罚分类、记录本、搞怪动画
聚会破冰题生成器针对不同场景生成破冰问题(相亲局、团建、新同事)静态题库 + 标签过滤强社交传播属性,截图即内容生成分享卡、题库管理
小红书选题生成器输入垂类,一键生成 30–100 个选题 + 标题Prompt 模板 + Claude API;导出文案售卖多垂类版本:美妆/情感/健身/留学等⭐⭐⭐批量生成、封面文案、导出 CSV
脚本 / 旁白生成器输入主题,生成 30–60 秒脚本表单输入 + API 模板生成卖“脚本包 + 工具套装”⭐⭐⭐情绪风格切换、时间戳标注
晨间计划 / 番茄专注钟番茄计时、目标设置、复盘文案生成前端计时器 + 本地存储售自律工具包,搭配壁纸卖⭐⭐任务看板、提醒功能、复盘报告
负能量倾倒 / 树洞工具输入烦恼后输出安慰/解压文案;支持匿名模板回复或 Claude API;本地存储小红书爆款情绪工具,可做“主题皮肤”⭐⭐本地加密、心情标签、导出卡片
情绪日记 / 心情可视化图表每天记录一句话 + 心情图标,生成图表UI 输入 + 本地存储;Chart.js 图表渲染卖“情绪日记 + Notion 模板”组合⭐⭐⭐月报图、导出图片、色彩主题
自律挑战生成器(21/30 天)选择目标自动生成打卡计划(健身/阅读/早睡)规则模板生成计划卡片适合社群运营,用来做“打卡活动”⭐⭐进度条、提醒、挑战证书生成

1.1 转盘需要的具体功能

学习笔记四:Claude Code 实现转盘小游戏

开始和AI聊天助手(比如DeepSeek)详细讨论,描述你要求产品应该具备什么功能,讨论的提示词:

我现在打算制作一个简单的 web app,是一个转盘游戏,用户输入自己想做的事情,然后选择这些事情的的占比,然后点击开始转盘,这个转盘就转起来,然后停下来之后告诉用户转到了哪里。它需要有多种主题,然后转盘的标题也需要用户能够自定义,当整个转盘游戏被定义完之后,用户点击生成转盘,会进入一个转盘游戏的游玩界面,然后用户可以把这个转盘保存到本地的单 html 文件,下次打开就能直接玩。这是我的一个初步构想。请你帮我看一下这个应用需要怎么制作,有什么难点,在这个流程里面,有什么你还不清楚的也可以问我。我不需要你生成代码,我需要你完整地理解这个需求
学习笔记四:Claude Code 实现转盘小游戏

最终,让AI给出一个具体的需求方案。

2 把需求给到 Claude Code

2.1 📁 建立项目

随便找个地方新建文件夹,用VSCode打开。把刚才的需求讨论结果保存到 requirement.md 文件里。

学习笔记四:Claude Code 实现转盘小游戏

2.2 🛠️ 技术选型

项目该用什么技术栈?可以这样问AI:

请查看 @requirement.md,告诉我用什么技术实现最简单?我想用Next.js会不会太复杂了?
学习笔记四:Claude Code 实现转盘小游戏

AI会给你最合适的建议。

学习笔记四:Claude Code 实现转盘小游戏

2.3 ⚡ 初始化Claude Code

在项目文件夹下打开终端,输入:

/init

/init 是每一个仓库在使用 claudecode 开始干活之前必须先做的初始化动作,这个命令是让 caudecode 把整个项目遍历一遍,了解清楚这个代码库是做什么的,我们的目标是什么,整理好之后生成一个统领性的文字用于解释整个仓库的目的。每次开对话的时候,claudecode 都会默认把 CLAUDE.md 中的所有信息先发给大模型。即“AI每次工作前都会先看这个CLAUDE.md

学习笔记四:Claude Code 实现转盘小游戏

执行之后,项目中就会多一个 CLAUDE.md 文件。记得看一下 CLAUDE.md 的内容是否和你想象中的一致。重点关注功能、实现框架以及工作流。

学习笔记四:Claude Code 实现转盘小游戏

2.5 进入计划模式(Plan mode)

项目比较复杂时,一定要用 Plan mode!Plan mode,是针对比较复杂的初始化场景,让 claudecode 先规划好要怎么做,然后再执行编码的一个模式,针对比较复杂的需求,可以通过 plan mode 先规划后执行。

Shift+Tab(Windows用户按 Alt+M)切换到计划模式,然后告诉AI:

根据 @requirement.md 的需求和 @CLAUDE.md 的流程,帮我规划一下这个转盘工具的开发方案。
学习笔记四:Claude Code 实现转盘小游戏

开始之后,claudecode 会让你选择一些选项,主要是技术选型和一些需求确认。

学习笔记四:Claude Code 实现转盘小游戏

全部确认之后,就可以开始执行了

学习笔记四:Claude Code 实现转盘小游戏

AI会给你一个详细的执行计划,选中“Yes, and auto-accept edits”,回车,开始干活

2.6 调试优化

AI写完代码不等于万事大吉!

转盘的逻辑其实挺复杂的,动画效果、数据计算、交互体验,各种坑等着你。

调试技巧:

  • F12大法:打开浏览器控制台,看报错信息
学习笔记四:Claude Code 实现转盘小游戏
  • 双窗口作战:在 VS Code 中开两个 Claude Code 窗口,一个窗口改代码,一个窗口测试效果
学习笔记四:Claude Code 实现转盘小游戏
  • 使用命令/clear:及时清空上下文,特别是当 AI 改一个问题反反复复不成功的时候。
学习笔记四:Claude Code 实现转盘小游戏
  • 主动出击:主动给 AI提出解决方案,不要只说问题,更不要只说有问题而不说问题在哪
学习笔记四:Claude Code 实现转盘小游戏

2.7 成果展示

搞定之后,对Claude Code喊一声:“启动服务器!”

它会自动运行 npm run dev,在浏览器中打开它提示的地址比如: localhost:3000 就能看到你的转盘工具了!

学习笔记四:Claude Code 实现转盘小游戏
学习笔记四:Claude Code 实现转盘小游戏

3 总结

学习笔记四:Claude Code 实现转盘小游戏

对于标准的 claude code 工作流来说,我们就是先有需求文档,然后初始化 caude,然后进行需求实现,再进行功能测试,测试完成之后进行 debug 检查,debug 检查通过后我们就可以拿去发布或者玩了。

整个开发流程其实很简单:

  1. 需求分析 → 想清楚要做什么
  2. 技术选型 → 选择最合适的工具
  3. 框架搭建 → 建立项目结构
  4. 功能实现 → 写代码
  5. 测试调试 → 修复问题
  6. 上线发布 → 让大家使用
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
本站资源均通过网络等公开合法渠道获取,仅用于学习交流,无任何商业目的,其版权归作者和出版社所有,本站不对涉及的版权问题负法律责任,如版权方认为本站行为侵权,请联系管理员删除,请看 《免责声明》
我爱免费