首页

纯手机 Vibe Coding 实战

纯手机 Vibe Coding 实战

告别手写与编辑器 · 手机端原生 AI 端到端生产闭环

💡 核心思想

通过手机去操作,利用原生 AI 以及 AI APP(例如 Muse、Grok Bot、dot 等等)。现在绝大部分代码都可以用 AI 来直接生成了,所以我们都不需要编辑器(Editor)了,直接由 AI 生成代码就行。

分享人:Yuler
1 / 16 · #1-intro 左右滑动翻页

核心思想:为什么我们不再需要编辑器?

告别手写语法打字,手机是意图控制台,AI 端到端闭环交付

❌ 传统编程依赖编辑器

  • 人工输入语法: 必须依赖键盘逐字敲括号、分号与缩进,手机小屏幕输入效率极低
  • 沉重工具链: 依赖 VS Code 等庞大 IDE、各种插件生态以及本地环境配置
  • 心智负担繁重: 大量精力被困在排查语法拼写与繁琐工具配置上

✨ AI 原生移动端范式

  • 完全告别编辑器: 编程不再手写,不需要任何 Editor,由 AI 端到端直接生成代码
  • 手机即控制台: 利用原生 AI 以及各种 AI APP,发号施令并驱动开发任务
  • 端到端质量闭环: GitHub APP 审查 + AI 写码 + AI 复审 + 测试补充 + 线上秒级验证
💡 核心哲学:告别编辑器,手机握在掌心,AI 顶在前面,意图即交付。
2 / 16 · #2-no-editor 左右滑动翻页

整体系统拓扑:端到端解耦架构

从上往下看:AI 客户端直接在云端闭环;终端经 Mac mini 桥接到本地会话;两条路统一汇入 GitHub Review

路径一在云端直接写代码
PR Review · 人机同时进行
自动 · 机器人
OR
人工 · 同时
OR
本地
3 / 16 · #3-topology 左右滑动翻页

隧道连接工具矩阵:内外网打通方案

宿主机预先授权 Agent,手机随时随地秒进开发会话

🖥️ 电脑/节点端:穿透与远程矩阵

宿主机已授权 Agent
  • 🏠 在家直连场景:
    无需开电脑屏幕,直接基于家庭局域网 IP 直连 SSH,延迟趋近于 0,极速进入工作状态。
  • 🌟 外出主力 · UU 远程 (UU Remote):
    • 常规主力:使用 UU 远程内置的 SSH 终端,穿透稳定迅速。
    • 备用逃生舱:自带低延迟图形桌面,需要启动特定 GUI 应用或看 DevTools 时一键切入。
  • 🛡️ 安全兜底 · Tailscale:
    基于 WireGuard 的加密 Mesh 虚拟私网,在复杂网络环境下提供零端口暴露的安全直连兜底。
💡 提示:Mac mini 无头运行,通过快捷脚本自动解锁 Keychain。

📱 手机端:终端连接利器

iOS 首选推荐
  • ⚡ Termius:
    iOS 生态综合体验最好的 SSH 客户端。支持多主机分组、会话保持与弱网自动重连。
  • 🚀 Snippets 快捷宏指令:
    把常用长指令(如调起 Agent CLI、进入工程目录、启动 dev 服务)预置为快捷块,单指一触即发。
  • ⌨️ 触控优化手势键盘:
    配备专为 Terminal 设计的辅助功能键(Esc、Tab、Ctrl、方向键),操作 Shell 行云流水。
💡 场景:在家用局域网直连 Termius;在外直接走 UU 远程内置终端或 Tailscale。
🔑 核心认知:连接工具的目标是“消除物理距离”,让常开的主机如同放在口袋里一样触手可得。
4 / 16 · #4-tunnel-matrix 左右滑动翻页

工具一 · UU 远程:外出主力穿透与图形化“逃生舱”

常规使用内置 SSH 终端,随时一键滑入 macOS 桌面

🎯 主力穿透与最终兜底双重定位

出门在外的连接主力。常规使用其内置 SSH 极速打通;当终端遇到瓶颈需要查看复杂 UI、本地 DevTools 或处理特定弹窗时,随时滑入桌面接管。

🔍 截图中的实战场景

  • 展示手机屏幕直接操控 Mac mini 上的 Cursor IDE 窗口
  • 查看 k41 工作区中 SignInDialog 组件代码与未提交变更
  • 右侧内嵌浏览器:直观观测本地服务端口与页面截图渲染
5 / 16 · #5-uu-remote 左右滑动翻页

工具二 · Termius + Agent CLI:掌上纯文本极速交互

在家庭局域网与移动网络中,秒级唤醒 YOLO 自治 Agent

⚡ Agent CLI YOLO 自治模式

  • 终端输入 ca(cursor-agent 的 alias)调起 Agent
  • 开启 YOLO 模式:赋予防灾沙盒内的终端自主执行权,自动改文件与跑单测,杜绝手机端频繁弹窗按确认

📱 Termius 实操利好

在家里直接敲局域网 IP 秒连;外出配合穿透无缝重连,后台挂起不掉线。

💡 Tip:SSH 解锁 Keychain

yule@macmini k41 % mac-unlock-keychain
login keychain unlocked

根除 macOS 无头 SSH 会话中无法读取 Git/SSH 密钥与私有环境变量的痛点。

6 / 16 · #6-termius-cli 左右滑动翻页

第三部分 · 多元 Agent 工具生态

终端交互流 vs 免终端轻量流,按需选择交互深度

轨 A · 终端交互流 (Direct CLI)

深度聚焦 / 掌控思维链

直面 Agent 思维脉络与终端日志,适合架构重构与疑难 Debug。

💻 Termius: SSH 直连宿主机
⬇️ ca [yolo]: cursor-agent 的 alias,自主规划、改文件、跑测试
⬇️ 实时打断: 随时按 Ctrl+C 调整提示词
核心优势:无中间层包装,真实输出尽在眼底

轨 B · 免终端轻量流 (Lightweight)

碎片时间 / 单手操作

不用进黑漆漆的命令行,靠原生 App 与群聊即可派活。

📱 Cursor iOS App: 语音输入意图、思维链可视化
💬 Grok / Grok Bot: 群聊直接派单、多 Agent 自动提 PR
🔄 云端漫游: 手机讨论进度随时漫游至电脑
核心优势:自然语言沟通,像和真人同事协作一样轻松
🔄 最终汇流: 无论哪种交互流,最终产物统一汇聚至 Git 分支与 PR,接受统一架构 Review
7 / 16 · #7-agent-ecosystem 左右滑动翻页

工具三 · Cursor iOS 原生客户端:移动端沉浸对齐

触手可及的上下文探索与思维链结构化呈现

📱 原生交互与语音输入优势

比起纯 Web 终端,原生 App 对 iOS 键盘与听写输入支持极佳,大拇指按住语音说话,一句话表达复杂设计意图。

🧠 思维链与文件探索可视化

  • 清晰展示 Agent 思考耗时(如:Thought 1s)
  • 展开折叠 Agent 探索的文件列表(如:Explored 1 file)
  • 清晰查看分步规划与执行结论

🔄 多端会话状态无缝漫游

在手机端发起的讨论和代码生成,回到家打开电脑桌面版 Cursor 时,全部历史原封不动同步,无痛接力。

8 / 16 · #8-cursor-ios 左右滑动翻页

工具四 · Grok Bot 协同群:多 Agent 的“微信办公室”

人类只做需求提出者,AI 员工自行组队、开 PR、互相审查

🤖 Coder Agent 交付 PR

自主完成功能开发后,直接在群内同步:

底部 build 时间 + commit 的 PR 开好了:
https://github.com/yuler/k41/pull/3
页面底部灰色小字显示 构建时间 + 7 位 commit
@PR Reviewer 麻烦看一下。

🛡️ PR Reviewer Agent 自动化评审

收到,开始看 #3。
我会本地分别跑一次带构建参数的打包和一次不带的,截图页面底部,用 Cozilla41 在 PR 上留 comment,再回群同步。

✨ 极客价值:群聊驱动的敏捷协作

无需打开专业 IDE,把工程任务拆解给专职 Agent 消化,人类退居幕后。

9 / 16 · #9-grok-bot 左右滑动翻页

第四部分 · 架构 Review 与 GitHub 提交

人机双重把关:AI 自述改动,人类掌上审核并按下合并闸门

📋 真实 PR 审查 (#3)

yuler/k41 #3: [web] Show build time and commit in footer
main ← feat/web-build-footer

由协同机器人账号 Cozilla41 自动发起,附带清晰的改动 Summary 与影响范围。

⚙️ 人机双重架构审查标准

  • 步骤一 (AI 自述): Agent 提交时简述架构改动(如本次通过 Vite define 注入编译期常量,通过 Docker ARG 传参)
  • 步骤二 (人类把关): 在手机 GitHub App 上花 30 秒扫读 Files Changed,确认无越权改动或多余依赖

👆 单手决策门禁

确认 CI 绿灯后,大拇指轻按 Squash and merge。AI 拥有全权编码自由,但终极合并权永远在人类手中。

10 / 16 · #10-github-pr-review 左右滑动翻页

第五部分 · 最重要的一点:查看结果的两种方式

开发联调态 vs 最终交付态,让移动端验证清晰解耦

方式 1 · 开发联调态 (本地内网即时看)

高频调试 / 秒级热更

改样式、试效果、调交互,不需要频繁推代码到 GitHub。

1. 宿主机服务启动:
pnpm dev --host 0.0.0.0
2. 手机 Safari 访问:
http://<局域网 IP 或 Tailscale IP>:3000
3. 体验:
HMR 毫秒级热更新,代码一改手机即变
核心价值:零发布成本,极速试错,不污染 Git 历史

方式 2 · 最终交付态 (线上域名自动部署)

正式验收 / 生产闭环

功能通过验收准备发布,直通线上真实生产域名。

1. 前置资产:
自备云服务器 (VPS) + 独立域名
2. 流水线打通:
GitHub PR 合并 ➔ GitHub Actions 自动触发
3. 生产部署:
构建 Docker 镜像并推送,自动无缝上线
核心价值:100% 工业级自动化交付,亲眼见证生产产物上线
💡 极客准则:调试改动看内网,正式上线看域名。 两套验证链路互不干扰。
11 / 16 · #11-verification-modes 左右滑动翻页

生产验收实战:手机浏览器看结果,直接对着结果 Review

打开线上页面,Review 只看浏览器里呈现出来的结果

🌐 用手机浏览器打开结果

PR 合并后自动部署到生产域名。验收时切到手机 Safari,直接打开 k41.yuler.cc,看的就是线上这一版。

🎯 对着页面本身做 Review

  • 看布局、文案、交互是不是要的那个结果
  • 不以 diff 或终端日志为准,以浏览器里看到的为准
  • Footer 上的构建时间和 commit,用来确认这就是刚合并的那一版

🔁 结果不过就再改一轮

页面对了就收;不对就回到手机上改下一轮。全程对着结果验收,不用打开电脑。

12 / 16 · #12-production-review 左右滑动翻页

安全防护网:手机端敲代码如何防止“翻车”?

三道不可跨越的防线,确保生产环境坚如磐石

1

网络与身份隔离防线 (Zero-Trust Access)

家里的 Mac mini 从不向路由器开放公网端口映射(Port Forwarding)。全部通信收敛在 UU 远程安全加密通道或 Tailscale 虚拟私网内,外部黑客根本探测不到端口。

2

Git 分支保护与 CI 门禁防线 (Strict Branch Protection)

仓库主分支 (main) 开启保护规则:禁止任何直接 push,只接受 PR 合并。所有 PR 必须强制跑通 TypeScript 静态检查、Linter 格式化规范以及单元测试,绿灯前无法合并。

3

人类双眼裁决机制 (Human-in-the-Loop Gatekeeper)

AI Agent 拥有全自动编码、自我测试、开 PR 和留评论的全部自由,但唯一没有 Merge 权限。人类只需在手机 GitHub App 上扫一眼 Diff 和 Reviewer 机器人的报告,保留终极控制权。

13 / 16 · #13-safety 左右滑动翻页

踩坑与避坑指南:移动端实操经验谈

血泪经验总结出来的 4 条关键军规

⚠️ 坑 1:手机输入法自动替换代码符号

现象: 手机输入法经常会自动把英文半角双引号替换成中文弯引号 “ ”,或者把两个减号替换成长破折号 —,导致脚本执行报错。
解法: 尽可能用自然语言描述意图,不要在手机键盘上手敲复杂的 Shell 指令;或者在 iOS 设置中关闭“智能标点”。

⚠️ 坑 2:开发服务器未绑定 host 导致手机连不上

现象: 在电脑上启动了 pnpm dev,但在手机 Safari 里输入内网 IP 却打不开页面。
解法: 很多前端框架默认只监听 localhost (127.0.0.1),必须显式加上 --host 0.0.0.0 才会允许局域网外部设备访问。

⚠️ 坑 3:SSH 后台挂起被 iOS 系统冻结

现象: 切到微信看消息,再切回 Termius,SSH 管道断开重连,正在跑的任务丢失交互。
解法: 算力端强依赖 tmux 持久化会话,配合 Termius 开启后台保持与自动重连功能。

⚠️ 坑 4:任务颗粒度过大导致 Agent 迷航

现象: Agent 连续修改 10 几个文件,改东坏西,偏离最初目标。
解法: 移动端坚持“小步快跑”微敏捷模式,每个需求拆解为 1~2 个明确改动,Agent 完成率几乎 100%。

14 / 16 · #14-pitfalls 左右滑动翻页

移动端 Vibe Coding 装备清单

极客极简出行流:一部手机搞定全栈开发

📱 手机端必装软件 (iOS Stack)

Termius - 核心 SSH 终端管理,支持 Snippets 与手势优化 App Store
UU 远程 (UU Remote) - 外出主力穿透,内置 SSH + 备用图形桌面 App Store
Cursor iOS / Grok - 原生沉浸对话与群聊异步派单 App Store
GitHub App / Safari - 掌上 PR 审查合并与内网/线上双轨验证 原生 / App Store

🖥️ 宿主机基建 (Mac mini + 云端)

硬件选型 - Mac mini M2/M4(低功耗、免显示器、无额外云成本) 静音待机
Agent CLI - 终端调用 Grok 4.7 Medium YOLO 自治模式 CLI 工具
Keychain & Tailscale - 自动化解密脚本与虚拟 Mesh 安全私网 安全底座
云端资产 - 轻量 VPS 云服务器 + 独立域名 + GitHub Actions CI/CD 自动上线
15 / 16 · #15-equipment 左右滑动翻页

总结与思考:未来的开发者长什么样?

“计算留在家里,AI 顶在前面,控制握在掌心。”

纯手机 Vibe Coding 并不是一种博人眼球的妥协,
而是软件工程从“体力劳动(打字编码)”向“脑力决策(架构与意图引导)”演进的必然形态。
无论你身在何处,只要有想法,世界的代码库与生产环境就在你的指尖运转。

线上部署效果预览
k41.yuler.cc
Q & A / 欢迎交流与拍砖
16 / 16 · #16-summary 左右滑动翻页