VibeCoding 全流程开发儿童启蒙小程序干货分享

前言

作为一名常年深耕全栈开发的技术从业者，同时也是一名宝爸，我一直想给家里小朋友做一款无广告、纯启蒙、轻量化的幼儿训练小工具。

市面上绝大多数早教类小程序、APP 营销属性过重，弹窗广告密集、内容杂乱无章，很难精准贴合低龄孩子的成长训练需求。恰逢 Vibe Coding AI 自主开发模式愈发成熟，我索性搭建了一套高效的 AI 编程工作流：本地部署 Claude Code CLI，替换官方模型为通义千问 Qwen3.6，搭配 MCP 扩展服务与规范开发套件，全程依靠 AI 完成大部分代码编写工作，我仅负责把控产品需求与交互逻辑。

靠着这套高效工作流，我从零落地了一款幼儿视觉专注力训练小程序，自用体验极佳。今天就完整分享整套环境搭建、模型替换、开发范式与实战落地经验，所有配置均可直接复用，助力各位技术同行快速上手 AI 开发，也给有育儿需求的宝爸宝妈提供一个自制启蒙工具的思路。

一、基础前置环境准备

搭建整套 AI 编程环境，首先需统一运行依赖，推荐安装高版本 Node.js 以保证兼容性，具体操作如下：

# 查看本地node版本，建议 22.0 及以上
node -v
# 全局安装 Claude Code 命令行工具
npm install -g @anthropic-ai/claude-code

二、Claude Code 核心改造

2.1 核心改造思路

放弃调用 Anthropic 官方公网接口，兼容 OpenAI/Anthropic 双接口协议，自定义请求地址、授权密钥，替换为指定大模型；同时替换默认 coding-plan 规划模型（用于规划代码开发流程、提升编码逻辑性），全程完成代码生成，实现低成本、无外网限流。

2.2 全局通用配置

找到本地全局配置文件～/.claude/settings.json，统一全局模型请求规则（我个人购买了火山方舟的 coding plan，主要使用 GLM 5.1 模型），配置示例如下：

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "大模型密钥",
    "ANTHROPIC_BASE_URL": "大模型代理接口地址",
    "ANTHROPIC_MODEL": "模型名称"
  }
}

2.3 项目独立专属配置

不同项目可单独配置模型与接口，配置优先级高于全局配置，可灵活适配不同业务开发需求，配置格式与全局配置完全一致，直接复制全局配置修改对应参数即可。

2.4 高阶：AI 自动驾驶配置（本地开发专用・高风险）

本地调试新项目时，可开放终端执行权限，让 AI 自主执行命令、拉取代码、运行脚本，大幅提升调试效率，但严禁在线上正式环境使用，避免安全风险。配置文件路径及示例如下：

# 项目目录/.claude/settings.json
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "大模型密钥",
    "ANTHROPIC_BASE_URL": "大模型代理接口地址",
    "ANTHROPIC_MODEL": "模型名称"
  },
  "permissions": {
    "allow": [
      "Bash(command:cd *)",
      "Bash(command:git *)",
      "Bash(command:python *)",
      "Bash",
      "PowerShell",
      "Cmd"
    ],
    "deny": [],
    "ask": []
  }
}

三、MCP 服务接入：解决 AI 代码幻觉核心方案

单纯依靠大模型开发，极易出现文档滞后、代码过时、逻辑错误等“代码幻觉”问题，接入 MCP 扩展服务可实时获取最新技术文档与联网信息，从根源上提升代码准确率。

3.1 查看本地已接入 MCP 服务

claude mcp list

3.2 Context7 精准文档服务

核心作用：同步全网框架最新官方文档、精准可运行代码片段，适配 Claude/Cursor 等主流 AI 开发工具，大幅减少无效代码、老旧语法生成，是提升代码准确率的核心工具。

# 全局安装 Context7 服务（执行命令即可完成接入）
claude mcp add --scope user --header "CONTEXT7_API_KEY: 你的密钥" --transport http context7 shturl.cc/9zNy8amFRqxxWpeLyj

实战用法：在 AI 对话框输入 查询Vue3最新组合式API用法 use context7，即可快速调取权威最新文档，辅助高效开发。

3.3 智谱联网搜索 MCP

核心作用：满足开发过程中实时检索业务方案、技术难点、行业案例的需求，弥补模型信息滞后的问题，配置命令如下：

claude mcp add -s user -t http web-search-prime shturl.cc/7GiVnhCBdd91rLPRinhvnjMpsjJ1LXEserSl2iSFPOC --header "Authorization: Bearer 你的接口密钥"

四、两大开发辅助套件：规范开发提效神器

4.1 OpenSpec

定位：规范驱动开发（SDD），主打需求梳理、功能迭代、项目标准化管理，适合存量项目迭代、中小型功能新增、团队统一开发规范，核心流程如下：

/opsx:explore探索需求 → /opsx:propose拟定方案 → /opsx:apply落地开发 → /opsx:archive归档复盘

# 检查Node.js版本（需 >= 20.19.0，示例版本v22.20.0）
node --version
# v22.20.0 ✓

# 全局安装OpenSpec
npm install -g @fission-ai/openspec@latest

# 查看活跃的变更
openspec list

# 验证提案格式
openspec validate add-custom-focus-duration

# 查看提案详情
openspec show add-custom-focus-duration

# 归档（--yes参数跳过确认步骤）
openspec archive add-custom-focus-duration --yes
# 通用归档命令格式
/openspec:archive 任务名称

4.2 SuperPowers

定位：一站式全自动开发套件，适合全新项目从零搭建、整体技术架构初始化、独立完整模块快速开发，可一键完成技术选型、目录结构、基础模板生成，大幅缩短项目启动周期，操作命令如下：

# 注册市场
/plugin marketplace add obra/superpowers-marketplace

# 安装插件
/plugin install superpowers@superpowers-marketplace

五、两大 AI 编程实战场景（全覆盖开发需求）

场景1：基于现有开发体系迭代开发

已有成熟 UniApp、前后端项目架构，仅需做功能优化、页面新增、逻辑调整，无需重构框架，直接对话 AI 按需开发即可，贴合原有技术栈，实现轻量化高效迭代。

场景2：从零全自动自动驾驶开发

无任何基础项目，确定产品需求后，依靠 Claude Code 全权限模式，让 AI 自主完成项目初始化、环境配置、页面编写、交互逻辑开发，人工仅需做好需求审核与效果验收，大幅降低从零开发的门槛。

六、实战落地：AI 编程打造幼儿专注力训练工具

开发初衷

不想再给孩子堆砌各类杂乱早教软件，于是利用这套高效的 AI 工作流，亲手开发一款纯粹以视觉辨识、专注力培养为核心的轻量工具，适配 3-7 岁低龄幼儿使用，无广告、无冗余功能，贴合孩子的成长需求。

简易开发流程（可直接复用）

1. 思路初始化（省Token技巧）：先通过豆包、DeepSeek 进行项目思路梳理与初始化，明确产品需求、核心功能与交互方向，以 HTML 作为 MVP 阶段的产品雏形（无需复杂框架），快速搭建基础页面框架，完成核心功能的简易演示，避免直接用 AI 开发导致的需求偏差。

2. 项目框架搭建与规范定义：HTML 雏形确认无误后，使用 UniApp 构建正式项目框架，核心步骤是执行 claude init，明确项目开发规范、代码风格、技术栈标准——这一步至关重要，可避免后续 AI 开发不规范导致的大量 debug 工作，提升开发效率。

3. 大规模开发落地：采用 SuperPowers 套件，基于第一步生成的 HTML 初版、豆包生成的项目需求提示词，完成项目全流程设计与开发，期间跑通两个 coding plan，落地基于 UniApp 框架的核心基础功能。

4. 问题排查与简易版成型：开发过程中遇到多项问题，例如路由切换沿用 HTML 方式、未使用 UniApp 原生 navibar，页面按钮风格、图片展示不统一，未适配预设 UI 框架，未采用 Unocss 布局等；经过多轮 AI debug（直接将问题抛给 AI，快速获取解决方案），最终完成小程序简易版。

5. 迭代优化：针对上述问题，后续采用 OpenSpec 规范驱动开发，逐步完成功能迭代与细节优化，统一 UI 风格、适配原生组件与布局规范，提升小程序的体验感。

6. 代码管理：全程使用 git 进行代码管理，核心原则是新一轮 AI 编码前，确保 git 无未提交代码，便于观察 AI 生成代码的变化、确认开发效果，同时可快速回退异常代码，降低开发风险。

7. 素材处理：所有图片素材均通过 AI 生成，自行完成无背景处理与压缩优化，既确保素材适配小程序展示需求，又控制文件体积、提升加载速度，避免小程序卡顿。

成品简要介绍

最终落地小程序：萌趣找同款 - Cute Twin Finder，目前已完成微信备案、正式上架，支持全网搜索，全程无弹窗广告，界面简洁童趣，操作简单，3 岁孩子可独立上手。

核心功能：

• 练习模式：单人自主专注力训练 + 亲子双人陪伴互动练习，兼顾孩子独立成长与亲子陪伴需求；

• 训练逻辑：顶部展示参考元素，孩子快速匹配同款图案，锻炼视觉分辨力与专注力；

• 习惯引导：匹配错误自动短暂静置 3 秒，培养孩子细心、沉稳的性格。

适用人群：低龄幼儿日常视觉分辨力、观察力、耐心启蒙训练。自用一段时间体验很好，身边很多宝妈朋友试用后，都觉得是居家带娃很不错的轻量启蒙小工具。

七、个人 AI 编程实战总结&最佳实践

• 新项目务必执行 claude init，统一开发规范，为长期 AI 协作开发打下基础，避免后期返工；

• 极小需求、单文件开发，直接对话 AI 快速实现即可，无需繁琐流程，提升开发效率；

• 中等规模功能迭代优先用 OpenSpec 规范开发，确保代码结构清晰、易维护，适合团队协作或长期迭代；

• 全新独立项目直接使用 SuperPowers 一站式搭建，极大缩短开发周期，减少重复工作量；

• 大模型私有化优势：数据安全不外泄、无公网调用限制、长期使用成本更低，适合有隐私需求的开发场景；

• 严格管控 AI 自动驾驶权限，仅本地调试使用，正式开发做好权限收敛，避免安全风险。

结尾感悟

如今 AI 自主开发早已不是噱头，而是开发者真正降本提效的核心生产力。作为技术人，这套高效的 Claude Code 工作流，让我摆脱了重复机械式编码的内耗，把更多精力聚焦在产品设计与用户体验上；作为家长，能用自己擅长的技术，亲手为孩子打造一款干净、纯粹、贴合需求的启蒙工具，远比盲目下载各类商用软件更有意义，也更安心。

后续我也会持续优化 AI 开发流程，打磨更多实用育儿轻量工具，也欢迎各位技术同行一起交流大模型对接 AI 编程工具的搭建思路，互相交流学习、共同进步。