我用AI一小时撸了个单词学习站,每天自动生成5个单词

我用AI一小时撸了个单词学习站,每天自动生成5个单词 AI编程热度居高不下我也一直在用CodeBuddy辅助开发。最近发现了一个有意思的功能——Skill技能包灵机一动不如写个技能每天自动生成英文单词并部署成网页这样打开浏览器就能学。说干就干全程AI辅助一个多小时就搞定了。过程分享给大家。以下是项目地址及在线地址在线访问https://xiuji008.github.io/everyday-english/项目完全开源https://github.com/xiuji008/everyday-english灵感来源CodeBuddy的Skill功能可以定义一套自动化流程。比如我说“生成今日单词”它会自动读取配置单词数量、Emoji池、格言库等扫描已有单词计算序号、去重随机选封面图和格言用AI生成5个单词含音标、例句、记忆提示保存为Markdown按年月分目录推送到GitHub触发Pages部署我每天都在学英语但总要打开文件夹去看md文件有点麻烦。作为一名程序员第一反应是做成网页技术方案数据来源CodeBuddy Skill每天生成Markdown单词文件项目结构docs/YYYY/MM/按年月分组 Vite前端展示方式Vite 纯JS单页应用侧边栏日期导航本地开发npm run devVite动态读取md文件部署方案GitHub Actions GitHub PagesAI辅助开发过程1. 项目初始化AI生成了基础结构/everyday-english /docs # GitHub Pages目录 /images # 封面图 /2026/05/ # 年月分组md文件 words-index.json # 生产环境索引 /scripts # 辅助脚本 /skills # CodeBuddy技能定义 index.html / main.js / style.css vite.config.js2. Vite开发服务器AI写的Vite配置提供了三个API端点/api/words→ 列出所有单词文件/api/word-content→ 返回md内容及前文解析/api/random-image→ 随机选取封面图本地开发时JS直接fetch这些API部署后回退读取静态JSON和md文件。3. 可折叠侧边栏 Hero头部侧边栏经历了几轮迭代全英文深色 → 中文亮色 → 按月折叠手风琴→ 圆角徽章、渐变色激活态、Logo头像。Hero头部从docs/images/随机选背景图叠加前文信息Emoji、分类、格言、标签各有不同配色┌─────────────────────────────────┐ │ (随机封面图) │ │ ✍️ 第1篇 │ │ 2026-05-26-04 每日英语推荐 │ │ /English/Daily · 5月26日 │ │ 「不积跬步无以至千里」 │ │ 英语学习 词汇积累 职场英语 │ └─────────────────────────────────┘4. Markdown前文解析单词文件头部含YAML前文AI写了正则解析器--- title: 2026-05-26-04 每日英语推荐 tags: 英语学习,词汇积累,职场英语 emoji: ✍️ idiom: 不积跬步无以至千里 createDate: 2026-05-26 ---Windows上遇到行尾符\r\n的问题修正后改用\r?\n解决。5. CodeBuddy Skill 定义用SKILL.md定义完整自动化流程9个步骤从读配置到推送到GitHub全自动。说一句“生成今日单词”或配置一个定时任务即可。生成的单词文件格式--- title: 2026-05-25-01 每日英语推荐 tags: 英语学习,词汇积累,职场英语,生活用语 category: /English/Daily emoji: idiom: 千里之行始于足下 cover: ![](./images/002.webp) createDate: 2026-05-25 --- # 2026-05-25-01 每日英语推荐 千里之行始于足下 --- ## 1. negotiate /nɪˈɡoʊʃieɪt/ **词性**v. 谈判协商达成协议 **例句** We need to negotiate a new contract with the supplier before the end of this quarter. 我们需要在本季度结束前与供应商协商一份新合同。 **记忆提示** neg否定 oti来自拉丁语 otium意为闲暇 ate动词后缀→ 放下休闲去谈判。想想职场中为了争取更好的条件不得不放下休闲时间去和人谈判。 ---最终成果一个多小时后我得到了✅ CodeBuddy Skill一键生成每日5个单词✅ Vite本地开发服务器npm run dev✅ 可折叠侧边栏按年月分组导航✅ Hero头部随机背景图 前文信息✅ 单词卡片展示音标、词性、例句、记忆提示✅ 不同配色区分分类、格言、日期、标签✅ GitHub Actions自动构建部署✅ GitHub Pages在线访问每天早上说一句“生成今日单词”或者自动化任务执行5个新单词自动推送打开书签就能学。碎片时间瞄几眼日积月累词汇量自然增长。一些思考关于AI编程AI不是在抢饭碗而是让我们能做更多事。以前懒得动手的小工具现在想法到实现的距离被大大缩短。关于“吃自己的狗粮”给自己做工具每天用着还挺有成就感。关于持续学习5个单词看似不多一年就是1825个。每天进步一点点时间会给你惊喜。写在最后在线访问https://xiuji008.github.io/everyday-english/项目完全开源https://github.com/xiuji008/everyday-english不妨打开CodeBuddy告诉AI你的想法。一小时之后你可能会收获一个让自己惊喜的作品。