
#

AI编程热度居高不下，我也一直在用CodeBuddy辅助开发。最近发现了一个有意思的功能——Skill（技能包），灵机一动：不如写个技能，每天自动生成英文单词并部署成网页，这样打开浏览器就能学。

说干就干，全程AI辅助，一个多小时就搞定了。过程分享给大家。

以下是项目地址及在线地址


在线访问：[https://xiuji008.github.io/everyday-english/](https://xiuji008.github.io/everyday-english/)

项目完全开源：[https://github.com/xiuji008/everyday-english](https://github.com/xiuji008/everyday-english)


![](https://developer.qcloudimg.com/http-save/yehe-9735680/1e6ea8e16a8b6260407515a1f8dba43d.png)


## 灵感来源

CodeBuddy的Skill功能可以定义一套自动化流程。比如我说“生成今日单词”，它会自动：

1. 读取配置（单词数量、Emoji池、格言库等）
2. 扫描已有单词，计算序号、去重
3. 随机选封面图和格言
4. 用AI生成5个单词（含音标、例句、记忆提示）
5. 保存为Markdown，按年月分目录
6. 推送到GitHub触发Pages部署

我每天都在学英语，但总要打开文件夹去看md文件，有点麻烦。作为一名程序员，第一反应是：**做成网页！**

## 技术方案

- **数据来源**：CodeBuddy Skill每天生成Markdown单词文件
- **项目结构**：`docs/YYYY/MM/` 按年月分组 + Vite前端
- **展示方式**：Vite + 纯JS单页应用，侧边栏日期导航
- **本地开发**：`npm run dev`，Vite动态读取md文件
- **部署方案**：GitHub Actions + GitHub Pages

## AI辅助开发过程

### 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.js
```

### 2. 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写了正则解析器：

```markdown
---
title: "2026-05-26-04 每日英语推荐"
tags: 英语学习,词汇积累,职场英语
emoji: ✍️
idiom: '不积跬步，无以至千里'
createDate: 2026-05-26
---
```

Windows上遇到行尾符`\r\n`的问题，修正后改用`\r?\n`解决。

### 5. CodeBuddy Skill 定义

用`SKILL.md`定义完整自动化流程（9个步骤），从读配置到推送到GitHub全自动。说一句“生成今日单词”或配置一个定时任务即可。

![](https://developer.qcloudimg.com/http-save/yehe-9735680/270589b57796d52325e742196e1a22fd.png)


生成的单词文件格式：

```markdown
---
title: "2026-05-25-01 每日英语推荐"
tags: 英语学习,词汇积累,职场英语,生活用语
category: /English/Daily
emoji: "🌟"
idiom: '千里之行，始于足下'
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个新单词自动推送，打开书签就能学。碎片时间瞄几眼，日积月累词汇量自然增长。



![](https://developer.qcloudimg.com/http-save/yehe-9735680/023933cd7680277c80e018bd42c5e9ad.png)


## 一些思考

**关于AI编程**  
AI不是在抢饭碗，而是让我们能做更多事。以前懒得动手的小工具，现在想法到实现的距离被大大缩短。

**关于“吃自己的狗粮”**  
给自己做工具，每天用着还挺有成就感。

**关于持续学习**  
5个单词看似不多，一年就是1825个。每天进步一点点，时间会给你惊喜。

## 写在最后

在线访问：[https://xiuji008.github.io/everyday-english/](https://xiuji008.github.io/everyday-english/)

项目完全开源：[https://github.com/xiuji008/everyday-english](https://github.com/xiuji008/everyday-english)

不妨打开CodeBuddy，告诉AI你的想法。一小时之后，你可能会收获一个让自己惊喜的作品。

AI编程热度居高不下，我也一直在用CodeBuddy辅助开发。最近发现了一个有意思的功能——Skill（技能包），灵机一动：不如写个技能，每天自动生成英文单词并部署成网页，这样打开浏览器就能学。

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

AI不是在抢饭碗，而是让我们能做更多事。以前懒得动手的小工具，现在想法到实现的距离被大大缩短。

人工智能

前端

开发工具

使用AI编程工具CodeBuddy的Skill功能，开发了一个每天自动生成5个英文单词的网页应用。该项目通过Vite构建前端页面，自动读取并解析Markdown格式的单词文件，支持侧边栏日期导航和随机封面图显示。借助GitHub Actions实现自动化部署，用户可在线访问学习，轻松利用碎片时间积累词汇。项目已开源，欢迎体验和贡献代码。

服务器

Windows

GitHub

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

使用AI编程工具CodeBuddy的Skill功能，开发了一个每天自动生成5个英文单词的网页应用。该项目通过Vite构建前端页面，自动读取并解析Markdown格式的单词文件，支持侧边栏日期导航和随机封面图显示。借助GitHub Actions实现自动化部署，用户可在线访问学习，轻松利用碎片时间积累词汇。项目已开源，欢...

我用AI一小时撸了个单词学习站，每天自动生成5个单词-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐