什么是 Vibe Coding？

Vibe Coding（氛围编程）是指完全信任 AI，不自己写代码，只通过自然语言描述需求，让 AI 完成所有编程工作。这种方式最近在开发者社区引发了广泛讨论。

我想做一个实验：完全不使用手工代码，能否完成一个可用的 Web 应用？

Remote File Editor 是什么？

一个轻量级的 Web IDE，VS Code 风格，功能包括代码编辑、文件管理、图片查看和终端面板。

为什么做这个项目？

我最初的需求很简单：方便查看和修改 OpenClaw 的配置文件和工作目录。

作为一个经常在不同 VPS 之间切换的开发者，我需要一种方式来：

  • 快速浏览和编辑服务器上的文件
  • 不需要每次都用 vim/nano 登录 SSH
  • 有一个可视化的界面

但我不想花太多时间从头构建一个完整项目——这正好是测试 Vibe Coding 的完美场景。

100% AI 生成的体验

技术栈

  • 前端：React + TypeScript + Vite + Monaco Editor
  • 后端：Node.js + Express + JWT 认证
  • 部署：支持 systemd 和 PM2

AI 生成的内容

整个项目从设计到实现，几乎每一行代码都是 AI 生成的：

  1. 架构设计 - 描述需求，AI 给出技术方案
  2. 前端代码 - React 组件、状态管理、样式
  3. 后端 API - Express 路由、文件操作、JWT
  4. 部署配置 - Nginx 反向代理、systemd 服务

遇到的问题

当然不是一帆风顺的：

  • 初始设计不够完善，需要多次迭代
  • 某些边界情况没有考虑周全
  • 安全认证流程需要手动调整

但这些都可以通过继续和 AI 对话来解决。

关键特性

文件管理

  • 树形视图，支持刷新
  • 在 WORKSPACE_DIR 下读写文件（路径安全检查）
  • 支持 cd 切换目录

编辑器

  • Monaco Editor，Auto layout
  • 按扩展名自动识别语言
  • Cmd/Ctrl+S 保存
  • 每个标签页支持撤销

图片编辑器

  • 自动识别图片文件
  • 显示尺寸
  • 调整大小（可选锁定宽高比）
  • 灰度转换

终端面板

  • API 驱动，输入命令回车执行
  • 输出结果显示在下一行
  • 支持 cd、clear 命令
  • 可折叠/展开

认证

  • JWT 认证
  • 密码保护的管理员访问

部署

# 配置环境变量
export ADMIN_PASSWORD=your-password
export JWT_SECRET=your-secret
export WORKSPACE_DIR=/path/to/workspace
export PORT=5174

# 启动
npm install
npm run build
pm2 start server/index.js --name remote-file-editor

总结

这次实验证明：用 AI 100% 生成一个可用的 Web 应用是可行的。

Remote File Editor 现在运行在我的 VPS 上，每天都在使用。它可能不是最完美的代码，但它解决了实际问题，而且是通过一种全新的编程方式构建的。

Vibe Coding 不是要取代程序员，而是提供了一种新的可能性：想法 → 产品 的路径变得更短了。

如果你感兴趣，可以看看 GitHub 仓库：xu4wang/remote-file-editor

这篇博客是如何生成和发布的？

本文本身就是 Vibe Coding 的一个绝佳案例！

写作流程

  1. AI 辅助写作 - 通过自然语言描述需求，AI 生成中英文博客文章
  2. Telegram 机器人 - 我写了一个 Telegram 机器人，可以直接通过聊天发送图片
  3. 自动上传 - 发送图片 → 机器人自动下载 → 保存到 Hugo 的 static/images 目录 → 复制到 Nginx → URL
  4. 一键部署 - Git push 后 返回，服务器自动构建并发布

博客发布流程

如上图所示，整个流程自动化完成，我只用：

  • 在 Telegram 发图片给机器人
  • 告诉 AI 要写什么主题
  • Git push

博客就自动部署到 thefreemeal.com 了！

技术栈

  • 博客引擎：Hugo + PaperMod 主题
  • 托管：GitHub 仓库版本管理
  • 图片收集：Telegram Bot (Gram.js)
  • 部署：PM2 + Nginx

AI 工作流总结

这篇文章展示了四类 AI 协同工作：

  1. 本地 Vibe Coding AI (GPT-5, Claude) - 编写代码
  2. VPS 上的 OpenClaw (MiniMax 2.5) - 多个 Agent 分工协作：
    • 图片收集 Agent - 从 Telegram 接收图片
    • 部署 Agent - 处理博客部署
    • 博客撰写 Agent - 写作和发布文章

整个工作流自动化运行：只需通过 Telegram 发图片，描述要写的内容，AI 就会完成剩下的工作！

本文由 AI 协助编写 🤖