VibeCoding之先用起来，再探索能做到哪一步

_不是333
1 阅读7分钟

记录一下最近vibecoding的过程

vibecoding能做什么

  • 公司的大项目上还没探索出来怎么用的更好，目前就感觉做各种小工具挺顺手的
  • 没写过前端项目但是Ai写前端已经足够好了，今天就分享下写两个常用工具的过程
    • json解析工具
    • jsondiff工具

网上也有在线的，但是我常用的两个网站 json解析工具json.cn 页面广告很多， jsondiff工具jsondiff.com 时不时的网络抽风还访问很慢，所以就想着自己写一份用。

记录一下都用到了什么

  • windows wsl - 为了cli工具使用起来方便
  • cc-switch - 用来方便维护各个cli工具的配置(主要方便配置中转站)
  • gemini cli - 体验一下gemini3
  • codex - 体验一下gpt-5.4
  • github - 部署页面
  • 渐进式 Web 应用 (PWA)(ai给建议的，之前我都没什么概念😂) - 可以离线使用

实现过程

1.本地json解析工具

看网上评价说gemini前端页面写的好，所以尝试了下gemini cli 我是windows 开发，cli工具在powershell里有时候会支持的不太好，所以我是用了wsl(windows里的一个linux系统,用着还挺方便)，wsl安装这里就不提了，反正也是找的别人的教程，贴命令就行了，安装好之后选个linux系统就行，我选了 Ubuntu-24.04 (默认值)

> wsl --list
适用于 Linux 的 Windows 子系统分发:
Ubuntu-24.04 (默认值)
1.1 过程

1.安装gemini cli

> npm install -g @google/gemini-cli

2.启动 项目目录里直接执行gemini就行

这里需要提前说一下由于网络环境问题，还有就是账号的问题，所以我用了中转站，这里就不贴具体哪家了，网上有很多推荐的自己选就行，然后按对应的文档配置就行，我推荐用cc-switch来统一管理

> gemini

3.就是对着ai说需求和问题了

  • 直接说需求
  ▝▜▄     Gemini CLI v0.35.3
    ▝▜▄
   ▗▟▀    Authenticated with gemini-api-key /auth
  ▝▀

 > 当前目录为全新目录，在当前目录下实现一个json解析的工具
   vite构建
   样式风格“Apple Apple HIG Style”
   额外功能 示例 复制 压缩 折叠 导出
   功能没问题之后，通过github打包构建发布
✦ I will enter plan mode to design the JSON parser tool, outlining the architecture, Apple HIG styling strategy, and
  deployment steps.
  • 然后就是沟通优化页面了(感觉gemini挺会说好听的)
 > Compress 和 Format 都是修改的左边输入框的内容，为什么放在右边，还有Example 也放左边小按钮吧
✦ 您的建议非常专业！Compress（压缩）和 Format（格式化）确实是作用于输入源数据的，放在左侧输入框顶部更符合操作直觉。
  • 写好之后发布到github(直接问怎么做就行)
 > push 成功了已经推到远端了，但是没看到执行编译和部署，接下来如何操作
  • 然后按回答来
    • 先配置好github代码push
    • 然后启用github actions
    • 接着修bug（把github页面上的错误直接复制下来发过去）
 > ...这里是从github页面上复制的报错粘贴过来了
✦ The error occurs because...
  • 又提了点要求（pwa的概念也是ai提到的，然后就让它来实现）
 > 修改整体项目 支持pwa 方便离线使用
  • 接着修bug
 > 这是console的报错......
✦ 我发现了错误原因......
 > /quit
1.2 总结

可能因为json解析这个工具比较简单，页面的问题只有1个，github部署报错沟通了3次，支持pwa修改bug1次，整体来说还算比较顺利

  • 都遇到了哪些问题
    • ai第一遍写的代码没写样式
    • 部署github 脚本问题来回修改几次

2.本地jsondiff工具

开网上说gpt-5.4写代码也不错，所以也尝试下codex

环境跟上面差不多也是在wsl里面使用,安装和启动跟gemini一个套路就不写了，也是用的中转站的key

  • 安排任务
╭─────────────────────────────────────────────╮
│ >_ OpenAI Codex (v0.117.0)                  │
│                                             │
│ model:     gpt-5.4 xhigh   /model to change │
│ directory: /mnt/d/codes/vibecoding/jsondiff │
╰─────────────────────────────────────────────╯
  Tip: New Build faster with Codex.
› 当前目录为全新目录，在当前目录下实现一个jsondiff的工具
  vite构建
  样式风格“现代风（Modern UI）”
  左右两边输入对比diff，点击对比后下方生成diff详细内容要对比出左右不一致的明显（展示可以跟github上看diff那种样式），要
  支持折叠，展示统计信息

然后就开始写代码，自己验证，修bug，这个过程真的超长，速度真的太慢了，它还会在npm install的时候干点其他活,会验证好几次

• 构建在跑，我顺手把 README 里的本地绝对路径链接去掉，改成仓库内可用的相对说明，避免以后发到 GitHub 上变成无效链接。
......
• 最后再看一眼改动面，确认只有项目文件和工作流，没有多余的临时脏东西残留在仓库里。
  • 这次先本地排bug了，没让它直接commit和push(不过codex默认配置也不支持)
› 你不能执行git commit -m 吗

• 不能，当前这个会话里 git 的索引写入被环境拦住了。
  我已经实际尝试过：
  git add . && git commit -m "feat: build json diff tree viewer"
  报错是：
  fatal: Unable to create '/mnt/d/codes/vibecoding/jsondiff/.git/index.lock': Read-only file system
  也就是说不是我没执行，而是这个会话对 .git 写入受限，所以没法创建 commit。
  • 本地调试好之后手动push到github，然后就又是调部署的报错
    • 部署的报错修了好多轮，太慢了真的是
  • 完活 jsondiff工具
2.2 总结

整体项目倒不算复杂，所以几轮沟通下来也顺利的实现了

  • 都遇到了哪些问题
    • codex是真的慢，gpt-5.4 感觉太能联想了，一直在等它
    • codex里不能自动commit和push，比较麻烦

3.其他

  • 使用体验

现在的Ai真的太强了，作为一个后端开发，以前写前端都是简简单单的样式和交互，现在ai写的又快又好，以前都没折腾过github pages，pwa这些，一直以来对这些概念不清不楚的，也折腾不明白，现在就问ai就行，他还能帮忙联想，比自己去网页搜索研究真的是降维打击了

以小见大来看，ai真的是让技术平权了，现在写代码真的是谁都可以了，现在缺的不是技术，而优秀的想法，还有就是能去用ai的执行力

github真是伟大，这种小工具页面单独去弄个服务器部署也挺麻烦的，直接github部署真是太方便了

虽然都是ai在干活，但是整体跑一遍下来感觉还是挺累的，一是要跟ai以ai能理解的方式说清楚自己的需求，也并不简单；二是用上ai之后会干很多自己之前从没尝试过的，又得来回问了解一下，挺费时间；三是等着ai输出的时候，干等着也难受，去干点其他的事，几个事之间来回切感觉挺累

  • gemini和codex使用的一些个人心得
    • gemini 在windows的终端里有时会闪屏，对话让他写个新项目的时候他会自己切换为plan模式跟你沟通计划，这个挺好的，还有就是github他可以自己commit和push 这点比较方便，虽然json解析这个工具比较简单，基本是一把过了
    • codex是真的慢呀，一个问题要来回搞好久，但是也并没有一把搞定，还是得来回修，而且自己不去commit和push，比较累人
3.1 wsl使用过程中一些说明
  • 文件访问路径
    • Windows访问Linux文件：\wsl$\Ubuntu\home<user>
    • Linux访问Windows文件：/mnt/c/Users/<user>
  • 关于网络代理设置(windows环境开着代理要给wsl系统用的话，push代码到github 网络不太行的话push不上去)
    • 代理软件要开启 允许来自局域网的连接
    • wsl系统里配置proxy
      • 先找到windows的ip地址, 在windows里执行ipconfig 看 vEthernet (WSL (Hyper-V firewall)) 这一项下面的ip地址
      • 设置代理export ALL_PROXY="socks5h://172.17.16.1:10808"(ip和端口设置成你自己环境的就行)
  • 为什么是socks5h，因为写了socks5有时候会报错，为了ai推荐的
    • socks5 和 socks5h 的区别在于：socks5 在本地（WSL 侧）解析 DNS，而 socks5h 将域名交给代理服务器（Windows 侧）解析。WSL 的 DNS 解析经常出问题，导致握手失败。
  • 怎么方便的在wsl里开/关代理
    • 可以在wsl写个alias里方便开启关闭 
      host_ip=$(ip route show|grep default|awk '{print $3}')
proxy_port="10808"
alias setproxy="export http_proxy=socks5h://$host_ip:$proxy_port; \
                export https_proxy=socks5h://$host_ip:$proxy_port; \
                export ALL_PROXY=socks5h://$host_ip:$proxy_port; \
                echo 'Proxy ON'"
alias unsetproxy="unset http_proxy; \
                  unset https_proxy; \
                  unset ALL_PROXY; \
                  echo 'Proxy OFF'"
3.2 使用github部署需要注意的点
  • gitbub项目需要启用 GitHub Pages image.png
3.3 cc-switch配置相关

因为是在wsl里使用cli，windows里开cc-switch， 所以对应的配置文件目录需要调整一下 image.png

avatar
文章
阅读
粉丝