用AI 3小时搭建免费在线早教工具站：我的aizhiba.com实操全记录

# 用AI 3小时搭建免费在线早教工具站：我的aizhiba.com实操全记录

> 一个不会前端的普通人，如何用AI在3小时内做出4个能用的在线早教工具，并让百度开始收录。

一、我为什么要做这件事

我有个3岁的侄子，嫂子天天在群里转发各种早教APP的付费链接。我打开一看——一个教宝宝认水果的App居然要198元/年。

我心想：这东西不就是几张卡片+语音吗？能不能用AI免费做一套？

说干就干。3小时后，aizhiba.com 上线了4个工具：英语启蒙、数学启蒙、汉字学习、绘画涂鸦。这篇文章就是我的完整实操记录——包含所有AI prompt、踩坑过程和最终代码。

—

二、工具准备（10分钟）

安装 Claude Code：
“`bash
npm install -g @anthropic-ai/claude-code
claude
“`

—

三、第一个工具：宝宝学英语（40分钟）

3.1 我的Prompt

“`
帮我创建一个宝宝学英语的HTML页面，要求：
1. 单文件HTML，包含CSS和JS
2. 包含120个常用英语单词，分为12个分类（动物、水果、颜色、数字、形状、食物、身体、家庭、天气、交通工具、衣物、自然）
3. 三种学习模式：翻卡（正面图片+英文，点击翻转显示中文）、点读（网格展示，点击播放英语发音）、游戏（显示图片，4选1英文单词）
4. 使用Web Speech API发音
5. 适合3岁幼儿的UI：大按钮（≥48px）、鲜艳配色、触屏友好
6. 底部显示学习进度条和星星数
7. localStorage保存学习记录
8. 响应式布局
“`

3.2 Claude Code生成过程

Claude Code一次生成了约800行的完整代码。但第一次运行发现了3个问题：

1. **问题1**：翻卡动画在手机上卡顿 → 提示Claude “改用CSS transform替代left属性做动画”
2. **问题2**：Web Speech API在某些浏览器不发音 → 添加了降级方案
3. **问题3**：120个单词的SVG图标生成不准确 → 改用emoji+CSS替代

3.3 最终效果

翻卡模式：点击卡片翻转，正面图片+英文 → 背面中文。
你可以直接体验：**[宝宝学英语 – aizhiba.com](https://www.aizhiba.com/tools/baby-english.html)**

—

四、第二个工具：宝宝学数学（30分钟）

4.1 Prompt

“`
创建一个宝宝学数学的HTML页面：
1. 数字认知1-20：大号数字+对应数量的小圆点
2. 比大小模式：两组物品对比，选多/少的一方
3. 10以内加法：图形化展示（如3个苹果+2个苹果）
4. 形状认知：圆形、方形、三角形、星形等
5. 所有图形用SVG生成，确保100%准确
…
“`

4.2 踩坑记录

Claude首次生成的SVG圆点排列用了`scientific notation`导致渲染异常。追加prompt：”所有坐标值用整数，不要用科学计数法。”

—

五、第三个工具：宝宝学汉字（35分钟）

这个最难做。Web Speech API的中文TTS在某些设备上发音不准。

**解决方案**：使用`SpeechSynthesisUtterance`并指定`lang=’zh-CN’`，同时降速到0.7倍更适合幼儿。

—

六、第四个工具：宝宝学绘画（25分钟）

Canvas绘图+6种描红模板。关键技巧：用半透明底图引导宝宝描摹。

—

七、SEO优化：让百度找到你（20分钟）

页面做好只是第一步，还要让搜索引擎收录。

### 我的做法：
1. 每个页面的``和`<meta description>`包含长尾关键词<br /> 2. 例如宝宝学英语的标题：`宝宝学英语 – AI知吧 | 零基础幼儿英语启蒙卡片`<br /> 3. 提交URL到百度站长平台</p> <p>—</p> <h2>八、从免费到收费：我的变现逻辑</h2> <p>这套免费工具是我的”流量入口”。当用户使用后觉得好用，自然会对我的收费应用产生兴趣：</p> <p>– **免费版**：4个基础工具，Web访问，有限词汇量<br /> – **收费应用**：更多词汇、AI智能推荐学习路径、家长控制面板、学习报告</p> <p>**一个数据**：上线两周后，通过百度搜索”宝宝学英语免费工具”来的自然流量日均有40+UV。虽然不多，但这是一个完全零成本、零推广的起点。</p> <p>—</p> <h2>九、你也可以这样用AI</h2> <p>这篇文章的价值不仅在工具本身，而是展示了一个方法论：**把AI当作你的技术合伙人**。</p> <p>你需要的能力不是写代码，而是：<br /> 1. **说清楚你想要什么**（写精准的Prompt）<br /> 2. **能发现并描述问题**（告诉AI哪里不对）<br /> 3. **把生成的东西串起来**（组合多个工具）</p> <p>如果你也有类似的想法——想做一个自己的在线工具站、或者任何需要编程的项目，可以关注我的收费应用，里面封装了更完整的AI辅助开发工作流。</p> <p>—</p> <h2>附录：完整Prompt模板</h2> <p>如果你也想用这套方法做事，这是我总结的Prompt模板：</p> <p>“`<br /> 请帮我创建一个[具体功能]的[网页/脚本/工具]：<br /> 1. 核心功能：[描述]<br /> 2. 目标用户：[具体人群]<br /> 3. 技术要求：[框架/语言/兼容性]<br /> 4. 交互方式：[用户如何使用]<br /> 5. 数据存储：[localStorage/后端/无]<br /> 6. UI要求：[尺寸/配色/响应式]</p> <p>请在生成代码后附带：<br /> – 使用说明<br /> – 常见问题排查<br /> – 如何进一步定制的建议<br /> “`</p> <p>—</p> <p>**下一篇预告**：我将拆解我的AI自动化赚钱系统——如何让AI每天自动生成内容、自动发布、自动赚取被动收入。关注 aizhiba.com 获取更新。</p> </div> </div> </div> </article> <nav class="navigation post-navigation" aria-label="Posts"> <div class="nav-links"><div class="nav-previous"><a title="PM2进程管理实战：从保活到自动扩缩，一个命令解决Node部署所有坑" href="https://www.aizhiba.com/2026/06/27/pm2%e8%bf%9b%e7%a8%8b%e7%ae%a1%e7%90%86%e5%ae%9e%e6%88%98%ef%bc%9a%e4%bb%8e%e4%bf%9d%e6%b4%bb%e5%88%b0%e8%87%aa%e5%8a%a8%e6%89%a9%e7%bc%a9%ef%bc%8c%e4%b8%80%e4%b8%aa%e5%91%bd%e4%bb%a4%e8%a7%a3/" rel="prev"><span class="ast-post-nav" aria-hidden="true"><span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z'></path></svg></span> Previous</span> <p> PM2进程管理实战：从保活到自动扩缩，一个命令解决Node部署所有坑 </p></a></div><div class="nav-next"><a title="AI写小说实战：我一个人+AI，两周产出3万字连载的完整工作流" href="https://www.aizhiba.com/2026/06/27/ai%e5%86%99%e5%b0%8f%e8%af%b4%e5%ae%9e%e6%88%98%ef%bc%9a%e6%88%91%e4%b8%80%e4%b8%aa%e4%ba%baai%ef%bc%8c%e4%b8%a4%e5%91%a8%e4%ba%a7%e5%87%ba3%e4%b8%87%e5%ad%97%e8%bf%9e%e8%bd%bd%e7%9a%84%e5%ae%8c/" rel="next"><span class="ast-post-nav" aria-hidden="true">Next <span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'></path></svg></span></span> <p> AI写小说实战：我一个人+AI，两周产出3万字连载的完整工作流 </p></a></div></div> </nav> </main> </div> </div>  </div> <footer class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon"> <div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder"> <div class="ast-builder-grid-row-container-inner"> <div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row"> <div class="site-footer-below-section-1 site-footer-section site-footer-section-1"> <div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder"> <div class="ast-footer-copyright"><p>Copyright © 2026 AI知吧 | <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">沪ICP备2026025000号</a> | Powered by <a href="https://wpastra.com" rel="nofollow noopener" target="_blank">Astra WordPress 主题</a></p> </div> </div> </div> </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){var p=document.getElementById("tts-play");if(!p)return;var clone=p.cloneNode(true);p.parentNode.replaceChild(clone,p);var playBtn=document.getElementById("tts-play");if(!playBtn)return;var stopBtn=document.getElementById("tts-stop");var voiceSel=document.getElementById("tts-voice");var rateSlider=document.getElementById("tts-rate");var audio=null,loading=false;function getText(){var b=document.querySelector(".chapter-body")||document.querySelector("article");if(!b)return"";var ps=b.querySelectorAll("p"),a=[];for(var i=0;i<ps.length;i++){var t=ps[i].textContent.trim();if(t)a.push(t)}return a.join("n")}function playBlob(blob){if(audio){audio.pause();audio=null}var url=URL.createObjectURL(blob);audio=new Audio(url);audio.play()}playBtn.addEventListener("click",function(){if(loading)return;if(audio&&!audio.paused){audio.pause();playBtn.textContent="▶ 播放";return}if(audio&&audio.paused){audio.play();playBtn.textContent="⏸ 暂停";return}var text=getText();if(!text)return;loading=true;playBtn.textContent="⏳ 生成...";playBtn.disabled=true;var voice=voiceSel?voiceSel.value:"zh-CN-YunxiNeural";var rate=rateSlider?(parseInt(rateSlider.value)>=0?"+":"")+rateSlider.value+"%":"+0%";fetch("/easyvoice/api/v1/tts/generateJson",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({data:[{text:text,voice:voice,rate:rate}]})}).then(function(r){if(!r.ok)throw new Error("HTTP "+r.status);return r.blob()}).then(function(b){loading=false;playBtn.disabled=false;playBtn.textContent="⏸ 暂停";playBlob(b)}).catch(function(e){loading=false;playBtn.disabled=false;playBtn.textContent="▶ 播放";alert("EasyVoice: "+e.message)})});if(stopBtn)stopBtn.addEventListener("click",function(){if(audio){audio.pause();audio.currentTime=0}playBtn.textContent="▶ 播放";playBtn.disabled=false;loading=false})},500)});</script> <div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both"> <span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewbox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve"> <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" /> </svg></span> <span class="screen-reader-text">滚动至顶部</span> </div> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script id="astra-theme-js-js-extra"> var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""}; //# sourceURL=astra-theme-js-js-extra </script> <script id="astra-theme-js-js" src="https://www.aizhiba.com/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.13.4"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://www.aizhiba.com/wp-includes/js/wp-emoji-release.min.js?ver=7.0.2"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://www.aizhiba.com/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>