Vibe Coding 构建图床应用之旅

Vibe Coding 构建图床应用之旅

Tans 51 2025-07-27

Vibe Coding 构建图床应用之旅

以下内容 纯手工 制作，辅助 AI 润色，保证无幻觉。
Vibe Coding： 可以理解为一种基于情感和氛围驱动的编程方式，没有传统编程的严谨缜密，而是和 AI 聊天的轻松活泼~

项目背景

事情还得从 2023 年说起，正在上大学的我写博客的时候经常遇到 Markdown 格式博客复制的时候，还有一大堆图片与 .md 捆绑打包在一起，传输和分享非常不便。当时想自己构建一个在线图床，可以快速上传博客图片，并获取全球都可以访问的链接。说干就干，先建立了一个叫做 TanYongF/iimage 的仓库，然后到设计方案的时候，后端具体逻辑设计了一版，但是怎么也绕不开前端（因为我不会啊！），随后时间一长就忘记这茬了。

但是最近看到越来越多的 AI 工具涌现出来，恰逢看到这个只有一个 README.md 仓库时候，突发奇想，是时候圆梦了，前端不会 AI 来凑！于是开启了这样一段 Vibe Coding 旅途，圆结了大学时期的梦想。

项目目标

  • 快速上传：支持拖拽上传，一键获取链接
  • 多格式支持：JPG、PNG、GIF、WebP 等主流格式
  • MCP 协议：支持 Model Context Protocol，与 AI 工具无缝集成
  • 自动化部署：GitHub Actions + Docker 实现持续集成

项目成果

  • 开发周期：每天下班 2h，历时 5d，共计 10h+ 左右
  • 技术栈：React + Node.js + Docker + GitHub Actions
  • 核心功能：图床应用 & 对应的 MCP 客户端
  • 在线演示：iimage

项目成果展示

1. 工具调研

AI Coding 工具

AI Coding 工具在这个项目中承接着核心地位，简单来讲就是自然语言到高级编程语言的转换，作为中枢负责将其他各个模块生成的AI结果继承其他，主力工具。目前常见的 AI Coding 工具包括 Cursor、Trae 以及 Copilot 等，笔者也对这几种工具都体验过，国内版的基座模型包括 豆包、DeepSeek R2 以及 Gemini ，相较于支持 Claude Sonnet 的 Copilot 和 Cursor 也逊色不少。

工具类型 支持模型 价格策略 使用体验 推荐指数
Cursor Claude、Gemini、GPT、Grok 存在免费请求 ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Trae (国内) Doubao、Gemini、Deepseek 目前免费 ⭐⭐⭐ ⭐⭐⭐
Copilot Claude、Gemini、GPT 申请学生订阅免费 ⭐⭐⭐⭐ ⭐⭐⭐⭐

选择理由：Cursor 支持多种模型，免费额度充足，代码生成质量高，项目级索引功能强大，是本次项目的核心工具。

AI 生图工具

为了丰富网站视觉效果，我调研了多种 AI 生图工具：

商业级工具

工具 特点 价格/门槛 适用场景
DALL·E 3 语义理解最准，ChatGPT 无缝对话 ChatGPT Plus 会员（$20/月） 通用场景
MidJourney 艺术感最强，社区灵感丰富 基础版 $10/月 艺术创作
Adobe Firefly 与 PS/AI 联动，商业授权清晰 Adobe Creative Cloud 订阅 商业设计

国内工具

工具 特点 价格/门槛 适用场景
即梦 AI 国内最稳定，中文提示词优化好 每日免费额度 + 订阅 中文内容创作
通义万相 阿里系，电商配图神器 免费+灵感值 电商设计
文心一格 国风水墨、国潮模板丰富 免费+能量值 传统文化内容

开源工具

工具 特点 价格/门槛 适用场景
Stable Diffusion 开源可本地，插件生态丰富 完全免费，需显卡 本地部署
InvokeAI 界面现代，基于 SD 免费 本地部署

AI 建站工具

选择 Lovable 的理由：

  • 纯自然语言输入：无需编程基础，直接描述需求
  • 实时预览：所见即所得，快速验证想法
  • 可 Fork 代码：支持二次开发，灵活性高
  • 市场验证：15人团队3个月ARR达1700万美元

2. 开发流程

需求与技术文档生成

首先简单罗列出想要的技术栈，其中包括：

工程方面：
- 前端：React + TypeScript + Ant Design
- 后端：Node.js + Express
- 部署：Docker + GitHub Actions + 火山云服务器

业务方面：
- 图片上传与存储
- 链接生成与管理
- 用户权限控制
- MCP 协议支持

使用 Cursor 完善技术文档，并设计好具体的开发步骤以及后期规划，以 README 进行输出，后续开发工作都将以这个为范本来进行 Code：

技术文档生成

快速生成网站前端

这里我使用到了 Lovable 来快速构建网站原型，特点：纯自然语言 → 实时预览 → 可 fork 代码。毕竟 15 人团队用 Lovable 3 个月把 ARR 做到 1700 万美元，经受住了市场考研。具体步骤：

  1. 登录 Lovable 网站，创建一个新的项目
  2. 输入需求描述：将上一步骤 Cursor 生成的关于前端的具体需求输入
  3. 自动生成目录：系统会自动生成项目目录结构
  4. 导出代码：生成完成后将前端项目导入到我们的仓库代码中

Lovable 项目创建

生成的目录结构

AI Coding 开始集成

根据需求文档开始：

  1. 项目初始化：让 Cursor 构建起代码目录，包括前后端目录、React初始化、开发环境配置等。
  2. 渐进式开发：在相应的功能点依照 README.md 来进行 Coding，在生成的时候，不要一股脑的 Accept，而是生成一次跑一次，没问题再进行下次 Agent 调用。并且可以不定时让 Cursor 检查当前代码结构是否清晰，是否需要重构。
  3. 自动化部署：编写 CICD 流水线，由于我是想接入 Github Actions 来进行代码从编译、打包并发布 Docker 镜像、登录云服务器自动拉包并部署 这一整套流程，可以让 Cursor 很流畅的完成。并且体验非常不错，减少了很多部署的时间，将心思全部放在开发上。
  4. 持续迭代：后面就是上线后的一些功能迭代和优化了，本质上都是从步骤 1-3 的循环。

Cursor 使用技巧

在使用 Cursor 的时候，自己有一些个人见解：

  1. 构建项目级索引：记得使用 Cursor 的索引工具构建项目级索引，会自动扫描所有文件，然后按语义切成 Chunk，然后 Embedding 成向量存入本地向量库，可以支持秒级生成。
  2. 提供详细上下文：尽量让 Cursor 理解更多的 Context，而不是全局代码
  3. 分步骤生成：避免一次性接受大量代码，确保质量

3. 项目展示

体验地址： https://paste.tans.fun/

MCP 协议支持

网站首页展示了详细的 MCP 配置方法：

MCP 配置界面

配置步骤展示

协议集成效果

图床上传功能

核心的图片上传和管理功能：

图床上传界面

4. 技术架构与部署

系统架构

前端 (React) → 后端 (Node.js) → 数据库 (Mysql + OSS)
    ↓              ↓                ↓
   CDN 加速    Docker 容器     云存储服务（图片管理/图片存储）

性能优化

  • CDN 加速：利用阿里云OSS提供的边缘加速能力，大大提升图片访问速度
  • 图片去重：通过 Base64 去重，防止冗余图片
  • 数据库优化：建立索引，提升查询性能，并有效存储图片信息

5. 总结与思考

技术趋势洞察

AI 这波风潮真的让我感受到了**“Not Control， Only Context”** 的口号，无论是前端开发人员，或者是后端开发人员，仿佛现在摇身一变成了产品经理，不再受技术栈的限制，技术彻底无价，而产品理解和产品思考变得越来越有价。

编程语言时代演进：

  • 1940s：机器语言时代
  • 1950s：高级语言时代
  • 1980s：面向对象时代
  • 2000s：Web 与移动时代
  • 2015s：云原生时代
  • 2020s：自然语言编程时代

个人思考

同时，这次 Vibe 编程初体验带给我的不仅仅是 AI 的技术革新力，更是对自己定位的思考，如果我们只是通过自然语言构建了这样一套系统，是否还会有那种当初的成就感呢？

我的答案：会的！因为：

  • 技术门槛降低，但产品思维要求更高
  • 从"写代码"转向"设计产品"
  • 从"解决技术问题"转向"解决业务问题"
  • 从"代码工匠"转向"产品艺术家"

6. 参考资料

工具文档

项目资源

学习资源

欢迎交流：如果您对 AI 辅助编程或 Vibe Coding 感兴趣，欢迎在评论区分享您的想法和经验！

持续更新：本文会随着 AI 工具的发展持续更新，敬请关注。

Java Devops