菊花宝典AI开发全流程1. 项目实战开发1.1 项目介绍AI 提肛助手 —— 科学盆底肌训练平台专为久坐人群打造的 AI 驱动盆底肌训练助手。针对程序员、办公族「没时间运动、不懂科学训练」的痛点，提供分级课程体系、实时动画引导与语音播报，并创新性地集成摄像头姿态检测与 AI 动作纠正，让零基础用户也能随时随地完成标准训练。核心功能科学分级课程：从入门到进阶的渐进式训练计划动画 + 语音引导：多感官沉浸式训练体验AI 姿态检测：摄像头实时识别动作规范性智能纠正建议：AI 实时反馈，确保训练效果技术栈：Claude Code + DeepSeek V4 全 AI 驱动开发1.2 需求分析这个项目叫「提肛AI助手」葵花宝典，核心功能其实不复杂。1）提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。2）训练过程中要有动画引导节奏，包括呼吸圈动画和人体姿势示范动画，让用户一看就知道该怎么做。3）同时通过浏览器语音合成实时播报指令，让用户闭着眼睛也能跟练。4）还有一个亮点功能，就是支持开启摄像头进行体位校正。实时检测你的站姿、坐姿是否正确，比如有没有驼背、耸肩、身体歪斜，当检测到姿势问题时，让 AI 提供个性化的纠正建议。5）查看训练打卡日历和统计图表。1.3 方案设计如果你完全没有任何技术基础，可以让 AI 帮你完成方案设计。但这里为了节省时间和 tokens，我直接告诉 AI 怎么做。虽然要做姿态检测功能，但是这个项目几乎是纯前端就能搞定！不需要复杂的后端。技术栈上，我选择Next.js + TypeScript，姿态检测用MediaPipe Pose（纯前端运行），AI 对话通过 Next.js 的API Route代理调用DeepSeek V4模型，动画用CSS 动画 + Framer Motion。为什么不用 Python 后端？因为这个项目唯一需要服务端的地方就是代理一下 AI 接口调用，使用 Next.js 的 API Route 完全能搞定，没必要拆成前后端分离，越简单越好。2. Claude Code + CC-Switch + Claude Code 插件安装与使用2.1 Claude Code 安装与使用2.1.1 Node 的安装官网下载：https://nodejs.org/zh-cn/download2.1.2 版本检测（检测 Node.js 是否安装成功）2.1.3 配置国内镜像源 — 淘宝镜像npmconfigsetregistry https://registry.npmmirror.com2.1.4 安装 Claude Codenpminstall-g@anthropic-ai/claude-code2.1.5 Claude Code 成功检测claude--version2.2 CC-Switch 的安装与配置2.2.1 下载官网下载：https://ccswitch.ioGitHub Releases：https://github.com/farion1231/cc-switch/releases2.2.2 大模型配置添加模块选择模型厂商配置 Key配置模型名称并点击添加启用模型测试模型接口3. Trae IDE 中安装 Claude Code 插件3.1 插件安装（在 Trae IDE 中搜索并安装 Claude Code 插件）3.2 激活 Claude Code（安装完成后激活插件）3.3 模型选择（在插件中选择已配置的模型）4. 基于 CC-Switch 安装相关插件及 MCPClaude Code 默认就有读写文件、跑终端命令、搜索代码这些基础能力，但要做好一个完整项目，光靠这些还不够。我们需要下面 3 个扩展：Frontend Design：前端美化技能，让生成的页面更有设计感Firecrawl：联网搜索和网页抓取，让 AI 能获取最新的技术信息Context7：查询最新的技术文档和 API 用法，减少 AI 瞎编的情况下面来依次安装。4.1 安装 Frontend DesignFrontend Design 是 Anthropic 官方的前端美化技能，可以让 AI 生成的页面更有设计感。在 CC-Switch 工具中，选择右上角的 Skills 小图标选择"发现技能"输入 Skills 名称 “frontend-design” 搜索，并点击"安装"按钮（注意：开魔法梯子）4.2 安装 Firecrawl CLIFirecrawl CLI 是联网搜索和网页抓取工具，让 AI 开发前先搜索最新技术信息。方式2：安装方式很简单，打开 cmd 终端，输入一行命令：npx-yfirecrawl-cli@latest init--all--browser执行后，会自动打开浏览器，要在弹出的页面中点击授权。4.3 安装 Context7Context7 是一个技术文档查询工具，让 AI 能获取到各种框架和库的最新官方文档，避免用过时的 API 写代码。点击 MCP 小图标点击"添加 MCP"选择 “context7”，并点击"添加"按钮方式2：（另一种安装方式）5. 项目开发 AI 提示词然后输入提示词。这里分享一下实际用的完整提示词，给大家参考：完整提示词角色你是一个前端全栈工程师，擅长 Next.js + TypeScript 开发。任务开发一个叫 “菊花宝典” 提肛助手的 Web 应用，帮助用户科学地练习盆底肌训练（提肛 / 凯格尔运动），傻子也能练对。提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。训练过程中通过动画引导节奏，包括呼吸圈动画（收缩时缩小、放松时扩大）和人体姿势示范动画（用 SVG 或 Lottie 展示每个动作的正确体位和发力部位），让用户一看就知道该怎么做。同时使用浏览器语音合成（Web Speech API）实时播报指令，让用户闭着眼睛也能跟练。支持开启摄像头进行体位校正，使用 MediaPipe Pose 在浏览器端实时检测用户的站姿 / 坐姿是否正确（如驼背、耸肩、身体歪斜），所有检测纯本地运行，摄像头画面不上传服务器。当检测到持续的姿势问题时，将姿势数据（非图像）发送给 DeepSeek V4 模型，获取个性化的纠正建议并语音播报。训练记录保存在本地 localStorage，展示打卡日历和简单的统计图表。技术栈框架：Next.js + TypeScript姿态检测：MediaPipe Pose（纯前端）AI 对话：通过 Next.js API Route 代理调用 DeepSeek V4 模型（兼容 OpenAI SDK 格式）动画：CSS 动画 + Framer Motion要求页面美观专业，使用 frontend-design 技能美化页面，配色健康积极开发前，先通过 Firecrawl 联网搜索 MediaPipe Pose 浏览器端用法，通过 Context7 查询最新技术文档和用法必须生成完整可运行的代码，每步完成后必须自主测试验证提示词要点解读角色定义：放在最前面，让 AI 进入前端全栈工程师的状态任务描述：用自然语言把需求讲清楚技术栈：只列关键选型，让 AI 自己决定实现细节最后两条要求是关键：让 AI 先查文档再写代码，避免瞎编写法；让 AI 开发完后自主测试，减少翻车