From ad0c8935786d800940383fb96aa3f645ded03957 Mon Sep 17 00:00:00 2001 From: yuler Date: Fri, 23 Oct 2026 13:09:26 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20Make=20the=20mobile=20slide=20d?= =?UTF-8?q?eck=20easier=20to=20follow=20on=20a=20phone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Redraw the system topology as a vertical flow and open screenshots in a lightbox. Co-authored-by: Cursor --- .../slides/mobile-vibe-coding/slides.md | 267 +++++++------ src/pages/slides/[...slug].astro | 376 +++++++++++++++++- 2 files changed, 521 insertions(+), 122 deletions(-) diff --git a/src/content/slides/mobile-vibe-coding/slides.md b/src/content/slides/mobile-vibe-coding/slides.md index 248e98e..e2ea65e 100644 --- a/src/content/slides/mobile-vibe-coding/slides.md +++ b/src/content/slides/mobile-vibe-coding/slides.md @@ -3,7 +3,7 @@ theme: default title: 纯手机 Vibe Coding 实战 info: | ## 纯手机 Vibe Coding 实战 - 基于 Mac mini 私有算力与多 Agent 协作的移动端极客开发范式 + 告别编辑器，手机端原生 AI 与 AI APP 端到端生产闭环 class: text-center highlighter: shiki lineNumbers: true @@ -15,80 +15,112 @@ css: unocss # 纯手机 Vibe Coding 实战 -### 用一部 iPhone 掌控 Mac mini 与多 Agent 生产闭环 +### 告别手写与编辑器 · 手机端原生 AI 端到端生产闭环 -
- 📱 iOS / Termius 控制面 - 🖥️ Mac mini 私有算力端 - 🤖 多 Agent 协同生态 - 🚀 双轨验证与秒级上线 +
+
+ 💡 核心思想 +
+

+ 通过手机去操作，利用原生 AI 以及 AI APP（例如这个，还有那个等等）。因为现在编程都不是手写的，所以我们都不需要编辑器（Editor）了，直接由 AI 生成代码就行。 +

+
+ +
+
📋 具体闭环思路：
+
+
+ 1 + 通过 GitHub APP review 大概的内容 +
+
+ 2 + 由 AI 去写代码 +
+
+ 3 + AI 再进行 review +
+
+ 4 + 补充一些测试 +
+
+ 5 + 进行线上验证 +
+
-
- 分享人：Yuler · 开发者极客社区技术分享 +
+ 分享人：Yuler
--- layout: default --- -# 核心思想：AI 时代为什么可以用手机编程？ +# 核心思想：为什么我们不再需要编辑器？ -告别语法打字，手机是意图控制台，算力与环境后置到主机 +告别手写语法打字，手机是意图控制台，AI 端到端闭环交付

- ❌ 传统移动端编程痛点 + ❌ 传统编程依赖编辑器

    -
  • 输入低效： 手机软键盘缺少代码符号（括号、分号、缩进），手工输入效率暴跌 80%
    • -
  • 环境缺失： 移动端 OS 无法本地运行 Node、Docker、编译器等重型开发套件
    • -
  • 调试艰难： 屏幕局限，无法同时容纳代码编辑器、终端和浏览器多窗口
    • -
  • 工具繁冗： 依赖各种沉重的 IDE 插件与复杂的语法提示/补全配置
    • +
  • 人工输入语法： 必须依赖键盘逐字敲括号、分号与缩进，手机小屏幕输入效率极低
    • +
  • 沉重工具链： 依赖 VS Code 等庞大 IDE、各种插件生态以及本地环境配置
    • +
  • 心智负担繁重： 大量精力被困在排查语法拼写与繁琐工具配置上

- ✨ AI Native 时代的 Vibe Coding + ✨ AI 原生移动端范式

    -
  • 编码全包： 代码编写由 AI 全权接管，不再需要任何软键盘符号与语法提示
    • -
  • SSH 极简通道： 核心本质就是通过极简的 SSH 终端，直连自己常开的电脑或服务器
    • -
  • 算力私有： 家里一台静音低功耗 Mac mini 常年开机，免额外云服务器费用且复用本地凭据
    • -
  • 职责升维： 手机只负责发号施令、把关架构与验收成果，成为掌上总指挥台
    • +
  • 完全告别编辑器： 编程不再手写，不需要任何 Editor，由 AI 端到端直接生成代码
    • +
  • 手机即控制台： 利用原生 AI 以及各种 AI APP，发号施令并驱动开发任务
    • +
  • 端到端质量闭环： GitHub APP 审查 + AI 写码 + AI 复审 + 测试补充 + 线上秒级验证
- 💡 核心哲学：计算留在家里，AI 顶在前面，控制握在掌心。 + 💡 核心哲学：告别编辑器，手机握在掌心，AI 顶在前面，意图即交付。
--- @@ -97,56 +129,55 @@ layout: default # 整体系统拓扑：端到端解耦架构 -内网直连 + 外网主力穿透 + 双轨验证闭环 - -```mermaid -flowchart TB - subgraph Mobile ["📱 移动控制面 (iPhone)"] - Termius["Termius (汤米老师)"] - UU_App["UU 远程 (主通道)"] - Cursor_iOS["Cursor iOS 原生 App"] - Grok_IM["Grok Bot 群聊"] - GH_App["GitHub App (PR 审查)"] - Safari["Safari 浏览器 (验证)"] - end - - subgraph Network ["🌐 连接与穿透矩阵"] - Home_LAN["在家: Wi-Fi 局域网直连 SSH\n(无需开显示器)"] - UU_Tunnel["外出主力: UU 远程内置 SSH\n(随时一键滑入图形桌面)"] - TS_Mesh["安全兜底: Tailscale Mesh\n(加密私网穿透)"] - end - - subgraph Host ["🖥️ 宿主机算力端 (Mac mini)"] - CLI_Agent["Agent CLI (YOLO 自治执行)"] - Bot_Agent["Grok Coder & Reviewer"] - Dev_Stack["Node.js / Docker / Git / Vite"] - end - - subgraph Verification ["🔍 双轨验证与交付体系"] - Local_Preview["【开发联调态】本地暴露内网端口\n--host 0.0.0.0 手机秒级热更新"] - Prod_Deploy["【最终交付态】GitHub Actions 自动构建\n云服务器 + 生产域名 (k41.yuler.cc)"] - end - - Mobile --> Network - Network --> Host - Host --> Local_Preview - Host -->|Commit & PR| GH_App - GH_App -->|Merge 自动打通| Prod_Deploy - Safari -.->|即时验收| Local_Preview - Safari -.->|生产验收| Prod_Deploy -``` +从上往下看：两条入口汇合到本地，再提交、Review、用手机浏览器看结果 + +
+
+
+
路径一
+
AI 客户端
+
Cursor
+
Grok Bot
+
Muse · Codex
+
不经过终端
+
+
+
路径二
+
终端 Termius
+
先连到本地
+
SSH
+
UU 远程的 SSH
+
Tailscale 隧道
+
+
+
+
本地 Mac mini · 写代码
+
+
提交到 GitHub
+
+
机器人 PR Review
+
+
+
+
看结果
+
远程服务器
+
手机浏览器打开线上页面
+
+
+
或
+
留在本地
+
手机走局域网浏览器打开
+
+
+
--- @@ -194,7 +225,7 @@ layout: default
  • - ⚡ Termius（汤米老师）：
    + ⚡ Termius：
    iOS 生态综合体验最好的 SSH 客户端。支持多主机分组、会话保持与弱网自动重连。
  • @@ -285,27 +316,27 @@ layout: default
    -
    -

    🔑 关键痛点解决：SSH 解锁 Keychain

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

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

    -
    -

    ⚡ Agent CLI YOLO 自治模式

      -
    • 终端输入命令（如 ca）调起 CLI Agent
      • +
    • 终端输入 ca（cursor-agent 的 alias）调起 Agent
    • 开启 YOLO 模式：赋予防灾沙盒内的终端自主执行权，自动改文件与跑单测，杜绝手机端频繁弹窗按确认
    -

    📱 Termius（汤米老师）实操利好

    +

    📱 Termius 实操利好

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

    + +
    +

    💡 Tip：SSH 解锁 Keychain

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

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

    +
    @@ -316,12 +347,10 @@ layout: default --- @@ -343,7 +372,7 @@ layout: default

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

    💻 Termius: SSH 直连宿主机
    -
    ⬇️ ca [yolo]: 自主规划执行、改文件、跑测试
    +
    ⬇️ ca [yolo]: cursor-agent 的 alias，自主规划、改文件、跑测试
    ⬇️ 实时打断: 随时按 Ctrl+C 调整提示词
    @@ -588,30 +617,30 @@ layout: default layout: default --- -# 生产验收实战：秒级反馈的完美正向闭环 +# 生产验收实战：手机浏览器看结果，直接对着结果 Review -合并即上线，手机 Safari 刷新即见最新生产产物 +打开线上页面，Review 只看浏览器里呈现出来的结果
    -

    🌐 生产环境即时可观测

    -

    PR 合并后，GitHub Actions 自动构建 Docker 镜像并推送至 GHCR，Webhook 触发轻量级生产服务器无缝更新。

    +

    🌐 用手机浏览器打开结果

    +

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

    -

    🎯 线上验收实证 (k41.yuler.cc)

    +

    🎯 对着页面本身做 Review

      -
    • 切到手机 Safari，直接访问生产域名
      • -
    • 页面 Footer 底部精准显示：构建 2026-10-xx 23:39:xx + 7 位 commit hash
      • -
    • 验证实际线上环境完全符合预期，零延迟闭环！
      • +
    • 看布局、文案、交互是不是要的那个结果
      • +
    • 不以 diff 或终端日志为准，以浏览器里看到的为准
      • +
    • Footer 上的构建时间和 commit，用来确认这就是刚合并的那一版
    -

    ⚡ 极致的正反馈周期

    -

    从提出需求、Agent 编码、自动评审、手机审查合并到生产环境见效，整个过程不到 5 分钟，全程无需触碰任何实体电脑！

    +

    🔁 结果不过就再改一轮

    +

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

    @@ -622,13 +651,11 @@ layout: default
    --- @@ -798,7 +825,7 @@ layout: default

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

    - Termius（汤米老师） - 核心 SSH 终端管理，支持 Snippets 与手势优化 + Termius - 核心 SSH 终端管理，支持 Snippets 与手势优化 App Store
    diff --git a/src/pages/slides/[...slug].astro b/src/pages/slides/[...slug].astro index 92a13cf..c60bdc0 100644 --- a/src/pages/slides/[...slug].astro +++ b/src/pages/slides/[...slug].astro @@ -98,6 +98,7 @@ const { deck } = Astro.props min-height: 2.25rem; padding: 0 0.7rem; white-space: nowrap; + text-decoration: none; } .deck-nav-btn { min-width: 5.5rem; @@ -237,6 +238,88 @@ const { deck } = Astro.props box-shadow: none !important; background: #fff; transform: none !important; + cursor: zoom-in; + } + .image-lightbox { + display: none; + position: fixed; + inset: 0; + z-index: 80; + flex-direction: column; + background: var(--ink); + color: var(--paper); + } + .image-lightbox.is-open { + display: flex; + } + .image-lightbox-bar, + .image-lightbox-nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + padding: 0.55rem 0.75rem; + border-color: rgba(241, 239, 234, 0.24); + } + .image-lightbox-bar { + border-bottom: 1px solid rgba(241, 239, 234, 0.24); + padding-top: max(0.55rem, env(safe-area-inset-top)); + } + .image-lightbox-nav { + border-top: 1px solid rgba(241, 239, 234, 0.24); + padding-bottom: max(0.55rem, env(safe-area-inset-bottom)); + } + .image-lightbox-actions { + display: flex; + gap: 0.4rem; + } + .image-lightbox button { + border: 1px solid var(--paper); + background: transparent; + color: var(--paper); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 0.72rem; + line-height: 1; + min-height: 2.25rem; + padding: 0 0.7rem; + cursor: pointer; + } + .image-lightbox button:disabled { + opacity: 0.28; + pointer-events: none; + } + .image-lightbox-count { + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 0.75rem; + } + .image-lightbox-stage { + flex: 1; + min-height: 0; + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + padding: 0.75rem; + } + .image-lightbox-stage img { + display: block; + width: auto; + max-width: 100%; + max-height: 100%; + margin: auto; + object-fit: contain; + background: #fff; + cursor: zoom-in; + } + .image-lightbox-stage.is-zoomed { + align-items: flex-start; + justify-content: flex-start; + } + .image-lightbox-stage.is-zoomed img { + max-width: none; + max-height: none; + margin: 0; + cursor: zoom-out; } .slide-content pre, .slide-content :not(pre) > code { @@ -269,6 +352,76 @@ const { deck } = Astro.props .slide-content li { margin-bottom: 0.35rem; } + .topo { + display: flex; + flex-direction: column; + align-items: stretch; + margin-top: 0.35rem; + } + .topo-fork { + display: flex; + align-items: stretch; + gap: 0.45rem; + } + .topo-card, + .topo-step { + border: 1px solid var(--ink); + background: transparent; + padding: 0.55rem 0.6rem 0.6rem; + } + .topo-card { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + } + .topo-step { + text-align: center; + font-size: 0.84rem; + font-weight: 600; + line-height: 1.35; + } + .topo-kicker { + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 0.62rem; + letter-spacing: 0.04em; + opacity: 0.62; + margin-bottom: 0.15rem; + } + .topo-title { + font-size: 0.86rem; + font-weight: 650; + line-height: 1.3; + margin-bottom: 0.28rem; + } + .topo-line { + font-size: 0.75rem; + line-height: 1.45; + } + .topo-note { + margin-top: auto; + padding-top: 0.35rem; + font-size: 0.68rem; + line-height: 1.35; + opacity: 0.62; + } + .topo-arrow { + width: 1px; + height: 0.85rem; + margin: 0 auto; + background: var(--ink); + position: relative; + } + .topo-arrow::after { + content: ""; + position: absolute; + left: 50%; + bottom: -1px; + transform: translateX(-50%); + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 5px solid var(--ink); + } .mermaid-container { overflow-x: auto; margin: 0.5rem 0 1rem; @@ -371,8 +524,11 @@ const { deck } = Astro.props
    -

    {deck.title}

    -
    +
    + 首页 +

    {deck.title}

    +
    +
    @@ -431,6 +587,24 @@ const { deck } = Astro.props + + + + From b231b0b81dfb93784a1a2f45b33a8ea00e4aee4c Mon Sep 17 00:00:00 2001 From: yuler Date: Fri, 23 Oct 2026 13:17:20 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=84=20Polish=20slides=20index=20ca?= =?UTF-8?q?rd=20layout=20and=20navigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move slide tags below title separated by pipe - Align play button styling with monochrome design theme - Remove Slidev CLI command button and export card - Point detail page home link back to slides index - Update header description to represent personal slide collection --- src/pages/slides/[...slug].astro | 2 +- src/pages/slides/index.astro | 68 ++++++-------------------------- 2 files changed, 13 insertions(+), 57 deletions(-) diff --git a/src/pages/slides/[...slug].astro b/src/pages/slides/[...slug].astro index c60bdc0..19b4745 100644 --- a/src/pages/slides/[...slug].astro +++ b/src/pages/slides/[...slug].astro @@ -525,7 +525,7 @@ const { deck } = Astro.props
    - 首页 + 首页

    {deck.title}

    diff --git a/src/pages/slides/index.astro b/src/pages/slides/index.astro index 75ebee9..9c4a163 100644 --- a/src/pages/slides/index.astro +++ b/src/pages/slides/index.astro @@ -1,6 +1,6 @@ --- import CornerMarkers from '../../components/CornerMarkers.astro' -import ArrowRight from '../../components/icons/ArrowRight.astro' +import Play from '../../components/icons/Play.astro' import Layout from '../../layouts/Layout.astro' import { getAllSlideDecks } from '../../lib/slides' @@ -30,7 +30,7 @@ const decks = await getAllSlideDecks()

    - Developer slide decks authored in Slidev-compatible Markdown under src/content/slides/. + 这里收录了我所有的 Slides 幻灯片与技术分享演示文稿。

    @@ -41,20 +41,17 @@ const decks = await getAllSlideDecks()
    -
    - - {deck.slideCount} Slides - - - Slidev Format - -

    {deck.title}

    -

    +

    + {deck.slideCount} Slides + | + Slidev Format +
    +

    {deck.description || '基于 Mac mini 私有算力与 Grok Bot 多 Agent 协作的移动端极客开发范式。'}

    @@ -62,61 +59,20 @@ const decks = await getAllSlideDecks()
    - +
    - ▶ 播放幻灯片 - + + 播放幻灯片 -
    ))}
    - - -
    - -

    - 💡 本地 Slidev 原生体验与导出 -

    -

    - 所有幻灯片均遵循标准 Slidev 规范编写，既可在此页面直接交互播放，也可使用官方 Slidev CLI 获取演讲者模式、画板涂鸦及 PDF/PPTX 导出能力： -

    -
    -
    # 启动原生 Slidev 演示（支持双屏演讲者备注按 P）
    -
    pnpm dlx @slidev/cli src/content/slides/mobile-vibe-coding/slides.md --open
    -
    # 导出为 PowerPoint (.pptx) 或 PDF
    -
    pnpm dlx @slidev/cli export src/content/slides/mobile-vibe-coding/slides.md --format pptx
    -
    -
- - From 9a3f6a23a8d89caee98c801f7619300bf336f1df Mon Sep 17 00:00:00 2001 From: yuler Date: Fri, 23 Oct 2026 14:57:51 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=9B=20Fix=20the=20closed-loop=20st?= =?UTF-8?q?eps=20so=20each=20item=20stays=20on=20one=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Cursor --- .../slides/mobile-vibe-coding/slides.md | 31 +++++-------------- src/pages/slides/[...slug].astro | 24 ++++++++++++++ 2 files changed, 32 insertions(+), 23 deletions(-) diff --git a/src/content/slides/mobile-vibe-coding/slides.md b/src/content/slides/mobile-vibe-coding/slides.md index e2ea65e..4164df6 100644 --- a/src/content/slides/mobile-vibe-coding/slides.md +++ b/src/content/slides/mobile-vibe-coding/slides.md @@ -27,29 +27,14 @@ css: unocss
-
📋 具体闭环思路：
-
-
- 1 - 通过 GitHub APP review 大概的内容 -
-
- 2 - 由 AI 去写代码 -
-
- 3 - AI 再进行 review -
-
- 4 - 补充一些测试 -
-
- 5 - 进行线上验证 -
-
+
具体闭环思路
+
    +
  1. 通过 GitHub APP review 大概的内容
    2. +
  2. 由 AI 去写代码
    3. +
  3. AI 再进行 review
    4. +
  4. 补充一些测试
    5. +
  5. 进行线上验证
    6. +
diff --git a/src/pages/slides/[...slug].astro b/src/pages/slides/[...slug].astro index 19b4745..0f0fbf8 100644 --- a/src/pages/slides/[...slug].astro +++ b/src/pages/slides/[...slug].astro @@ -221,6 +221,30 @@ const { deck } = Astro.props width: 100%; line-height: 1.4; } + .slide-content ol.loop-steps { + list-style: none; + counter-reset: loop; + margin: 0; + padding: 0; + } + .slide-content ol.loop-steps li { + display: flex; + align-items: baseline; + gap: 0.65rem; + margin: 0; + padding: 0.55rem 0; + border-top: 1px solid var(--rule); + line-height: 1.4; + } + .slide-content ol.loop-steps li::before { + counter-increment: loop; + content: counter(loop); + flex: none; + width: 1.15rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 0.75rem; + font-weight: 600; + } .slide-content .text-xs { font-size: 0.84rem !important; }