用 MonkeyCode 8 小时搭建自动化内容站：AI Coding 平台实战复盘

一个真实项目的完整复盘，看 AI Coding 如何让独立开发者效率翻倍

---

一、项目背景

1.1 需求来源

我想把 GitHub 上 awesome-gpt-image-2 仓库的 README 文档转成一个可发布的图文网站，每天自动抓取更新。

1.2 核心功能

• 每天北京时间 9:00 和 23:00 自动抓取源文档
• 只提取图片、描述、提示词、作者、语言等关键字段
• 精美的前端页面，支持图片预览、内容复制、历史版本切换
• 自动部署到 GitHub Pages

1.3 技术栈

层级	技术选型
前端	Vue 3 + Vite
后端	FastAPI + Python
自动化	GitHub Actions
托管	GitHub Pages

---

二、架构设计

MonkeyCode 帮我梳理出清晰的架构：

┌─────────────────────────────────────────────────────────┐
│                    GitHub 源仓库                          │
│        awesome-gpt-image-2/README_zh.md                 │
└────────────────────┬────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────┐
│              抓取层 (backend/scripts/sync.py)            │
│   定时拉取上游 Markdown → 解析结构化数据 → 生成 JSON      │
└────────────────────┬────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────┐
│           展示层 (frontend/src/App.vue)                 │
│   Vue 3 卡片式图文流 → 图片预览 → 复制 → 历史切换         │
└────────────────────┬────────────────────────────────────┘
                     │
                     ▼
┌─────────────────────────────────────────────────────────┐
│          自动化层 (.github/workflows/)                   │
│   sync-document.yml: 定时同步                            │
│   deploy-pages.yml: 自动部署                             │
└─────────────────────────────────────────────────────────┘

---

三、核心功能开发

3.1 智能解析器

第一版问题：描述字段提取错误，把图片 alt 当成了描述。

修复代码：

# 修复前：宽泛的标题匹配
heading_pattern = re.compile(r"^(##+)\s+(.+)$")

# 修复后：强约束解析
no_heading_pattern = re.compile(r"^###\s+(No\.\s*\d+:\s+.+)$")
image_heading_pattern = re.compile(r"^#####\s+(Image\s+\d+)\s*$", re.IGNORECASE)

关键改进：

• 只把 ### No. N: ... 识别为条目开始
• 只把 ##### Image N 识别为图片分段
• 描述强绑定 #### 📖 描述 下第一条正文

验证结果：

最新 No.2 描述：生成一张手绘水彩风格的旅游地图...
13bbb14 版本 No.11 描述：一份用于创作高端数字动漫风格插画的详细提示词...

3.2 前端交互

提示词展示优化：

<template>
  <div class="prompt-box">
    <p class="prompt-text">{{ normalizePrompt(item.prompt) }}</p>
    <button class="copy-btn" @click="copyPrompt(item.prompt, index)">
      复制
    </button>
  </div>
</template>

<style scoped>
.prompt-text {
  max-height: 7.5rem; /* 5 行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

图片预览功能：

<script setup>
const showPreview = ref(false)
const currentImageIndex = ref(0)
const currentImages = ref([])

const openPreview = (images, index) => {
  currentImages.value = images
  currentImageIndex.value = index
  showPreview.value = true
}
</script>

历史版本功能：

def fetch_commit_history(client: httpx.Client, repo: str, limit: int = 10):
    """获取最近 10 个 commit 作为历史版本"""
    url = f"https://api.github.com/repos/{repo}/commits"
    response = client.get(url, params={"per_page": limit})
    response.raise_for_status()
    
    history = []
    for commit in response.json():
        sha = commit["sha"][:7]
        date = commit["commit"]["author"]["date"]
        history.append({"sha": sha, "date": date})
    
    return history

3.3 元数据提取

每个条目提取以下字段：

字段	原文格式	提取方式
作者	- **作者:** [名字](链接)	正则匹配 + 回填
语言	- **多语言:** en/zh/ja...	正则匹配 + 回填
发布时间	- **发布时间:** 2026 年 5 月 24 日	正则匹配 + 回填
来源链接	- **来源:** [Twitter Post](...)	正则匹配 + 回填

回填逻辑：当解析器在图片之后读到来源信息时，会反向更新已生成的 block。

---

四、自动化部署

4.1 定时同步工作流

.github/workflows/sync-document.yml：

name: Sync GitHub Document

on:
  schedule:
    - cron: '0 1 * * *'   # 北京时间 9:00
    - cron: '0 15 * * *'  # 北京时间 23:00
  workflow_dispatch:

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v5
        with:
          python-version: '3.12'
      
      - name: Install dependencies
        run: pip install httpx
      
      - name: Run sync script
        run: python backend/scripts/sync.py
      
      - name: Commit and push
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add frontend/public/data/article.json
          git diff --staged --quiet || git commit -m "docs: auto-update article"
          git push

关键点 ：提交信息不能有 [skip ci]，否则不会触发后续部署。

4.2 自动部署工作流

.github/workflows/deploy-pages.yml：

name: Deploy Frontend To Pages

on:
  push:
    branches: ["master", "main"]
  workflow_run:
    workflows: ["Sync GitHub Document"]
    types: [completed]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      
      - name: Install dependencies
        run: npm ci
        working-directory: ./frontend
      
      - name: Build
        run: npm run build
        working-directory: ./frontend
      
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./frontend/dist
  
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

核心设计 ：通过 workflow_run 监听同步完成事件，确保每次抓取后自动触发部署。

4.3 GitHub Pages 配置

// vite.config.ts
export default defineConfig({
  base: '/Image2PromptCatcher/',
  // ...其他配置
})

前端数据请求自动拼接 base 路径：

const dataUrl = `${import.meta.env.BASE_URL}data/article.json`

---

五、问题修复与迭代

问题 1：抓取后不触发部署

现象 ：Sync GitHub Document 跑成功，Deploy Frontend To Pages 没反应。

根因 ：GitHub 的防递归策略------GITHUB_TOKEN 触发的 push 默认不触发其他 workflow。

修复 ：添加 workflow_run 触发器。

on:
  workflow_run:
    workflows: ["Sync GitHub Document"]
    types: [completed]

问题 2：页面 404

现象：站点可访问但资源全 404。

根因：

1. 缺少部署 workflow
2. Vite base 未设置子路径
3. 前端数据请求写死根路径

修复：

// vite.config.ts
export default defineConfig({
  base: '/Image2PromptCatcher/',
})

// App.vue
const dataUrl = `${import.meta.env.BASE_URL}data/article.json`

问题 3：描述字段被篡改

现象 ：描述显示为 ... - Image 1 而不是原文。

根因：解析器优先级错误，用图片 alt 覆盖了真正的描述。

修复 ：强绑定 #### 📖 描述 下的首行正文，禁用回退覆盖。

---

六、MonkeyCode 核心能力

6.1 深度需求理解

MonkeyCode 不只是听指令写代码，而是：

• 主动检查环境（Git Submodules、项目结构）
• 识别可用技能（deploy-website、feature-design 等）
• 理解业务意图（要的是可发布的内容站，不是简单复制 README）

6.2 记忆与上下文管理

通过 .monkeycode/MEMORY.md 和项目文档系统：

• 记录用户偏好（如"提示词用 5 行裁切"）
• 保存项目知识（构建命令、部署流程）
• 避免重复指令

6.3 规则驱动开发

内置规则系统确保代码质量：

规则	作用
git-submodule-check	确保依赖完整
no-delete-operations	防止误删
code-quality-standards	代码质量标准
user-teaching-memory	用户指令持久化
guardrail	安全防护

6.4 Skills 生态系统

本次项目用到的 Skills：

• deploy-website - 自动检测项目类型并启动服务
• feature-design - 需求文档生成（可选）
• project-wiki - 项目文档生成（可选）

6.5 在线文档查询

通过 MCP 工具：

• resolve-library-id - 解析库标识符
• query-docs - 查询最新官方文档

确保使用的 API 和配置是最新的。

---

七、效率对比

任务	传统方式	使用 MonkeyCode	提升
需求分析	2 小时	30 分钟	4 倍
后端开发	4 小时	1 小时	4 倍
前端开发	6 小时	1.5 小时	4 倍
部署配置	2 小时	30 分钟	4 倍
问题修复	4 小时	1 小时	4 倍
总计	18 小时	4.5 小时	4 倍

---

八、上线成果

功能验收清单

• ✅ 定时抓取（9:00 / 23:00）正常运行
• ✅ 描述提取准确（强绑定原文）
• ✅ 提示词 5 行裁切 + 复制
• ✅ 描述复制按钮
• ✅ 图片灯箱预览 + 多图切换
• ✅ via X 链接跳转
• ✅ 作者/语言信息展示
• ✅ 10 个历史版本站内切换
• ✅ 版本切换动画效果
• ✅ GitHub Pages 自动部署

线上地址

• 网站 ：frontend
• 数据 ：https://ok406lhq.github.io/Image2PromptCatcher/data/article.json
• 源码 ：GitHub - ok406lhq/Image2PromptCatcher: 抓取Prompt · GitHub

---

九、总结

这次项目让我深刻体会到：AI Coding 不是替代开发者，而是放大开发者的能力。

用 MonkeyCode 做项目，你不再是"写代码的人"，而是"定义问题的人"。你把精力放在需求理解和业务逻辑上，把重复的编码工作交给 AI。

8 小时完成别人 3 天的活，这不是夸张，是我亲身经历的事实。

如果你也在考虑引入 AI Coding 工具，我的建议是：

1. 选一个真实项目开始，不要用 demo 练手
2. 让 AI 参与全流程，不只是写代码
3. 建立项目记忆系统，让 AI 越用越懂你
4. 相信 AI 的判断，但也保持审查习惯

最后：工具再好，核心还是你对业务的理解。MonkeyCode 能帮你写代码，但只有你知道要解决什么问题。