Jasper Hung
Coworking with AI
About Series
Posts
現在正是線下社群奇異點:模型公司、Organizer 與各行各業正在聚集與擴散 Luma 活動頁背景動畫:貪食蛇不只有趣還可以接手玩 Luma 的極簡活動頁,為什麼反而更完整? 頁面重新導向問題:原來是 HTTP 沒有自動導向 HTTPS macOS 26 異常 CPU 飆高:一條指令觸發 Spotlight 啟動掃描 Digital Garden:從一個節點長成一片森林 從手機召喚一個可接手的 Agent:把 Remote Control 放進 summon script summon script:把輪詢式 Skill 拆成可直接使用的啟動指令 Skill:用 cmux CLI 召喚一個有明確職責的 AI Skill 不該複製進每個 Agent:用 reference 保留共同來源 User System Prompt 的 Token Diet:哪些 instruction 應該常駐? Skills 裝太多之後:內建健檢 doctor 怎麼幫我決定預載、按需讀取,還是移除? Agent 設計:Claude 與 Codex,同一個角色,兩種載入方式 三個 AI 帳號,一套工作環境:Single Source of Truth 升級 macOS 26 後 Mac 異常發燙:BetterDisplay 的 CPU bug 修正 BetterDisplay:桌面降解析度又不失文字銳利度的 HiDPI 縮放術 Tailscale 開了,手機還是連不上本機 dev server:問題不在 DNS Codex 升級成 ChatGPT 後:Classic、Chat、Work 到底怎麼分? Oysterun:用 Tailscale 從手機控制本機 Claude Code/Codex 的第三條路 Claude Dispatch:從手機派工到 Cowork 或 Claude Code Codex Remote 為什麼比 Claude Code Remote Control 更順? 手機 SSH App 怎麼選:Termius、Attach、Reattach、Moshi Claude Code Remote Control:設定好了,但 Mac 差點睡著 手機 SSH 回 Mac:先用 Tailscale 建一條自己的私有網路 Agent 換專案時,為什麼不一定會讀 CLAUDE.md Spokenly Dashboard:一個 WPM 的定義,讓我一路問回打字機時代 Spokenly 的歷史紀錄,被我拿來做成 Dashboard Spokenly 的歷史紀錄,竟然成了我調校 Prompt 的養分 Spokenly 設定:STT 換成本地模型後,成本再降 90% 從 Typeless 訂閱制,到 Spokenly 按量計費 Vibe Coding:保留你的完整意圖與脈絡 Astro Blog 圖片燈箱:從查 lightbox 套件到包成 figure/figcaption OpenMemory 記憶策略:裝好之後,真正難的是決定什麼值得被記住 OpenMemory 本地自架教學:Docker、MCP 與 API key 怎麼設? OpenMemory:我怎麼選跨 session、跨 LLM 的長期記憶方案 Session is Skill:把一次 AI 任務變成下次可呼叫的 SOP Session is Knowledge:把 AI 對話保存成自己的知識庫 生圖 Prompt 不是願望清單:我從數位分身踩坑裡反推出的格式 打造數位分身:為什麼圖片生成 AI 很難駕馭? Blog 設計語言:從 AI Desktop 借來的 Layout OG Image:設計思路與 Build-time 生成 Blog 個人識別層:從 favicon 到 AuthorCard 到 About 頁 搞定 Blog 圖片的三件事:管理、引用、壓縮 讀起來更舒服:Dark Mode 切完,才發現 Code Block 沒跟上 Blog 被找到的三種方式:RSS、GSC、AEO 為什麼選 Astro 來架 Blog 買了 domain,才算是認真在做一件事 Markdown 樣式全測試
Tags
#AI #Workflow #Claude #Codex #Site-Building #Astro #Dictation #MacOS #Remote-Control #Agent #Blog #Design #Skill #Spokenly #Tailscale #Claude-Code #Knowledge-Management #Luma #OpenMemory #Prompt-Engineering #Remote-Access #SEO #Troubleshooting #Typeless #BYOK #Cloudflare #Dashboard #GPT #Image-Generation #LLM #Markdown #MCP #Semantic-Search #SSH #Whisper #AEO #Canvas #ChatGPT #Component #Cross-Memory #Dark-Mode #Event-Management #Expressive-Code #Growth-Strategy #Image-Compression #Lightbox #Memory #OG-Image #OpenAI #PhotoSwipe #Product-Design #Rehype #Reverse-Engineering #RSS #Self-Hosted #SOP #Spotlight #Style #Test #Vibe-Coding
Jasper Hung
現在正是線下社群奇異點:模型公司、Organizer 與各行各業正在聚集與擴散

臺灣 AI Workshop、meetup 與黑客松為何突然密集?從模型公司、在地 Organizer 到跨職能參與者,看見 AI 如何透過社群走進每個人的工作流程。

2026-08-01
#AI#LLM#Claude#Codex#Luma
Luma 活動頁背景動畫:貪食蛇不只有趣還可以接手玩

Luma 活動頁上自動吃光點的貪食蛇,不只是 Canvas 裝飾。從公開 JavaScript bundle 逆向出主題、演算法與可由訪客接管的完整互動系統。

2026-08-01
#Luma#Reverse-Engineering#Canvas#Design
Luma 的極簡活動頁,為什麼反而更完整?

Luma 看起來只是一張簡潔的活動頁,卻把報名、通知、收款與推廣串成完整流程。從它的設計選擇,看見真正的簡單不是功能少。

2026-08-01
#Luma#Design#Product-Design#Event-Management#Growth-Strategy
頁面重新導向問題:原來是 HTTP 沒有自動導向 HTTPS

釐清 Google Search Console 的 redirect 報表、HTTP→HTTPS 導向,以及 Cloudflare 與 GitHub Pages 之間的兩段 TLS 驗證。

2026-08-01
#Cloudflare#SEO#Site-Building#Troubleshooting
macOS 26 異常 CPU 飆高:一條指令觸發 Spotlight 啟動掃描

照文件執行遞迴 chmod 後,Mac 的 CPU 飆高、風扇持續運轉。這次從 Spotlight 索引排查,到一次排除所有 Git 開發專案。

2026-08-01
#MacOS#Spotlight#Troubleshooting#Workflow
Digital Garden:從一個節點長成一片森林

從 Threads 認識 Digital Garden 後,我發現自己未必需要反覆修改同一篇文章。用系列文把一個個小問題串起來,也能讓知識持續生長成一片森林。

2026-08-01
#Blog#Knowledge-Management#AI#Workflow
從手機召喚一個可接手的 Agent:把 Remote Control 放進 summon script

手機遠端控制不只能接手既有工作。把 Remote Control 放進 summon script 後,我能直接從手機召喚新 Agent,並立即接手工作。

2026-07-27
#AI#Agent#Claude#Remote-Control#Workflow
summon script:把輪詢式 Skill 拆成可直接使用的啟動指令

當我已經知道要叫誰、用哪個帳號時,不必再讓 Skill 一題一題問。把 cmux 啟動流程抽成 summon script 後,能直接使用,也能讓 Skill 少帶一大段操作細節。

2026-07-26
#AI#Agent#Claude#Codex#Workflow
Skill:用 cmux CLI 召喚一個有明確職責的 AI

我把「開一個新 AI、套上指定 Agent、選帳號與工作位置」做成 summon-agent Skill,讓 Claude 透過 cmux CLI 建立一個真正可長駐協作的工作現場。

2026-07-26
#AI#Agent#Claude#Codex#Workflow
Skill 不該複製進每個 Agent:用 reference 保留共同來源

Agent 需要的是角色與 routing,不是每一份 Skill 的完整手冊。把 Skill 留在共同來源、讓 Agent 按需 reference,才能避免多帳號與多 Agent 的規則慢慢分岔。

2026-07-26
#AI#Claude#Codex#Skill#Workflow
User System Prompt 的 Token Diet:哪些 instruction 應該常駐?

把 CLAUDE.md 與 AGENTS.md 當成自己能控制的最高常駐 instruction layer 後,我用 Token Diet 重新判斷哪些規則該留下、哪些該延後讀取。

2026-07-26
#AI#Claude#Codex#Prompt-Engineering#Workflow
Skills 裝太多之後:內建健檢 doctor 怎麼幫我決定預載、按需讀取,還是移除?

Skill 不是裝得越多越好。我用 Claude Code 內建的 /doctor 健檢盤點裝了什麼,再從 subagent 啟動時的 context 成本出發,重新分辨預載、按需讀取、共同 reference 與移除四種去處。

2026-07-26
#AI#Claude#Codex#Skill#Workflow
Agent 設計:Claude 與 Codex,同一個角色,兩種載入方式

Claude 與 Codex 的 Agent 格式不同,是否就得維護兩套?我用 shared contract、registry 與 runtime adapter,把角色設定拆成各自只有一份權威來源。

2026-07-26
#AI#Claude#Codex#MCP#Workflow
三個 AI 帳號,一套工作環境:Single Source of Truth

同時使用個人 Claude、company 帳號與 Codex,不必維護三套工作環境。把登入與額度分開後,Skills、MCP、規則與 Agent 都能維持各自的單一來源。

2026-07-25
#AI#Claude#Codex#Skill#Workflow
升級 macOS 26 後 Mac 異常發燙:BetterDisplay 的 CPU bug 修正

升級 macOS 26 後 Mac 常常發燙?這次實測發現 BetterDisplay 4.3.4 的 App menu caching 持續吃掉 43% CPU;關閉後立即回到 0%。

2026-07-25
#MacOS#Workflow#Troubleshooting
BetterDisplay:桌面降解析度又不失文字銳利度的 HiDPI 縮放術

Mac 外接 2K 螢幕字太小,直接降解析度又變模糊?用 BetterDisplay 開啟 HiDPI 縮放,讓桌面變大、文字仍維持原生 2K 的銳利度。

2026-07-25
#MacOS#Design#Workflow
Tailscale 開了,手機還是連不上本機 dev server:問題不在 DNS

手機已連上 Tailscale,卻打不開 Mac 上的本機網站?這次實測發現,關鍵通常不是 DNS,而是 dev server 是否監聽所有網卡。

2026-07-25
#Tailscale#Astro#Remote-Access#Blog
Codex 升級成 ChatGPT 後:Classic、Chat、Work 到底怎麼分?

我為了 GPT-5.6 更新一路追到舊 ChatGPT App,才看懂 Codex App 如何變成新的 ChatGPT、舊 ChatGPT 為何成為 Classic,以及左欄 Chat/Work 到底怎麼分類。

2026-07-24
#AI#ChatGPT#Codex#Claude#Workflow
Oysterun:用 Tailscale 從手機控制本機 Claude Code/Codex 的第三條路

Oysterun 不是另一條 SSH 管線,而是一套自帶手機對話、檔案瀏覽與通知的本機 AI Host。它以 Tailscale 打通手機與電腦,也換來一套新的工作介面。

2026-07-24
#AI#Claude#Codex#Remote-Control#Tailscale
Claude Dispatch:從手機派工到 Cowork 或 Claude Code

Claude Dispatch 不再只是綁定一個 Cowork session 的獨立介面。它現在像一個持久的派工中樞,依任務類型分流到 Cowork 或 Claude Code。

2026-07-24
#AI#Claude#Remote-Control#Workflow
Codex Remote 為什麼比 Claude Code Remote Control 更順?

實際用手機接手 AI 工作後,我發現 Codex Remote 對我的 workflow 更順:隨時回到任一專案或對話,而不是只能接住一條預先開放的 session。

2026-07-24
#Codex#Claude-Code#Remote-Control#AI#Workflow
手機 SSH App 怎麼選:Termius、Attach、Reattach、Moshi

手機已經能透過 Tailscale SSH 回 Mac 之後,Termius、Attach、Reattach、Moshi 的差別不在能不能連線,而在 terminal、tmux 與弱網操作的摩擦。

2026-07-24
#SSH#Tailscale#MacOS#Remote-Access
Claude Code Remote Control:設定好了,但 Mac 差點睡著

第一次用 Claude Code Remote Control 從手機接手 Mac 上的工作,才發現遠端控制最重要的前提:真正執行工作的電腦不能睡著。

2026-07-24
#Claude#Claude-Code#Remote-Control#MacOS
手機 SSH 回 Mac:先用 Tailscale 建一條自己的私有網路

想從手機 SSH 回自己的 Mac,不一定要處理公網 IP、路由器或 port forwarding。先用 Tailscale 把手機和 Mac 放進同一個私有網路,再開啟 SSH。

2026-07-24
#Tailscale#SSH#MacOS#Remote-Access
Agent 換專案時,為什麼不一定會讀 CLAUDE.md

Agent 能去另一個 repo 工作,卻不一定會讀專案規則。這篇整理原因,以及用全域規則補上的做法。

2026-07-21
#Agent#Codex#Claude-Code#Workflow
Spokenly Dashboard:一個 WPM 的定義,讓我一路問回打字機時代

一張 Spokenly Dashboard 的 WPM 卡片,讓我從中英混雜字數、打字機時代留下的 Standard Word 慣例,一路追問到「節省時間」究竟該怎麼算。

2026-07-18
#AI#Dashboard#Dictation#Spokenly#Workflow
Spokenly 的歷史紀錄,被我拿來做成 Dashboard

Typeless 讓我開始用口述時間、字數和節省時間觀察自己的 workflow。換到 Spokenly 後,我從本機 History log 做了一個靜態 Dashboard,讓後續調校有資料可看。

2026-07-15
#AI#Dashboard#Dictation#Spokenly#Workflow
Spokenly 的歷史紀錄,竟然成了我調校 Prompt 的養分

Spokenly 的 History 同時留下原始轉寫與 AI 潤飾結果。我把這些紀錄交給 LLM 分析,找出固定誤辨,再把 Typeless 的閱讀感拆成三個可持續調校的旋鈕。

2026-07-15
#AI#Dictation#Prompt-Engineering#Typeless#Whisper
Spokenly 設定:STT 換成本地模型後,成本再降 90%

把 Spokenly 的 STT 從雲端搬到本地 Whisper:不需要額外 GPU,加入本地 Prompt 與 Word Replacements 後,雲端 API 成本再降超過 90%,只剩約 $0.3/月。

2026-07-15
#AI#BYOK#Dictation#Whisper#Spokenly
從 Typeless 訂閱制,到 Spokenly 按量計費

從 Typeless 的固定訂閱改成 Spokenly BYOK:建立兩把 OpenAI API key、拆開 STT 與 LLM 成本,並用實際 Usage 判斷哪種計價適合自己。

2026-07-15
#Dictation#BYOK#OpenAI#Spokenly#Typeless
Vibe Coding:保留你的完整意圖與脈絡

Vibe Coding 不只是寫好 prompt。當長時間和 AI 討論,口說能保留容易被鍵盤壓縮的意圖與脈絡;這是我從 macOS Dictation 到 Typeless 的起點。

2026-07-15
#AI#Vibe-Coding#Dictation#Typeless
Astro Blog 圖片燈箱:從查 lightbox 套件到包成 figure/figcaption

昨天插圖才發現 Astro blog 沒有內建圖片燈箱。我從候選套件、GitHub stars 與官網 demo 開始比較,最後選了支援手指縮放的方案,並把圖片說明文字整理成可維護的 figure/figcaption 結構。

2026-07-14
#Astro#Lightbox#PhotoSwipe#Rehype#Site-Building
OpenMemory 記憶策略:裝好之後,真正難的是決定什麼值得被記住

OpenMemory 裝好後,真正的問題不是會不會存,而是怎麼把記憶策略寫進 System Prompt。這篇整理我怎麼收斂查詢時機、寫入準則,和三層記憶分工。

2026-07-13
#AI#OpenMemory#Memory#Workflow
OpenMemory 本地自架教學:Docker、MCP 與 API key 怎麼設?

OpenMemory 本地自架怎麼設定?這篇接續說明 Docker 啟動、MCP 串接與 OpenAI API key 的選擇,拆解 API、Qdrant、Dashboard 三個服務、記憶寫入與語意搜尋流程,並用跨對話、跨帳號、跨 AI 的水果清單 DEMO 驗證記憶如何被找回。

2026-07-13
#AI#OpenMemory#MCP#Semantic-Search#Self-Hosted
OpenMemory:我怎麼選跨 session、跨 LLM 的長期記憶方案

AI 工具能記住使用者輪廓,卻常遺漏跨 session 的專案決策與協作細節。這篇從 GitHub 社群方案出發,依本地/雲端、AI 接入、寫入與搜尋方式比較 OpenMemory、claude-mem 等工具,再與 Notion、Obsidian 對照,說明我為何選擇可自架、跨 LLM 共用的 OpenMemory。

2026-07-13
#AI#Cross-Memory#Knowledge-Management#OpenMemory#Semantic-Search
Session is Skill:把一次 AI 任務變成下次可呼叫的 SOP

跟 AI 一起完成任務後,最有價值的不是最後產物,而是那段被調整出來的流程。這篇整理為什麼要趁 session 還在,把任務沉澱成下次可直接呼叫的 Skill / SOP。

2026-07-02
#AI#Workflow#Skill#SOP
Session is Knowledge:把 AI 對話保存成自己的知識庫

AI 對話框裡常常藏著解法、試錯和判斷理由。這篇整理我為什麼會在 session 結束前請 AI 匯出 Markdown,把一次對話保存成未來可以搜尋、引用和再加工的知識材料。

2026-07-02
#AI#Knowledge-Management#Markdown#Workflow
生圖 Prompt 不是願望清單:我從數位分身踩坑裡反推出的格式

從數位分身圖片生成的踩坑經驗出發,整理生圖 Prompt 的寫法:先定義意圖,再處理風格、主體、場景和限制,並對照 OpenAI、Google、Midjourney 的官方建議。

2026-07-01
#AI#Image-Generation#Prompt-Engineering#GPT
打造數位分身:為什麼圖片生成 AI 很難駕馭?

從工程角度打造數位分身,記錄圖片生成 AI 如何在 Prompt、參考照片、風格一致性和模型美學之間失控,最後理解用文字駕馭圖片為什麼這麼難。

2026-06-27
#AI#Image-Generation#LLM#GPT#Claude
Blog 設計語言:從 AI Desktop 借來的 Layout

Blog 的 layout 從開始就決定了:跟 Claude、ChatGPT、Cursor 長一樣。不是巧合,是刻意的——既然內容是 AI cowork 記錄,形式本身就應該呼應這件事。

2026-06-22
#Design#Astro#Site-Building
OG Image:設計思路與 Build-time 生成

LINE 分享截圖有圖才驚覺 OG image 必做。從規格研究、設計工具、safe zone 思路,到 Canvas API 踩的三個坑——build-time 自動生成的完整過程。

2026-06-22
#OG-Image#Astro#SEO#Site-Building
Blog 個人識別層:從 favicon 到 AuthorCard 到 About 頁

搭建個人識別系統,從 favicon 延伸 AuthorCard 再到 About 頁。AI 生成圖選圖、About 文案怎麼寫,還有 iOS Safari 的 100dvh bug 一次說完。

2026-06-22
#Astro#Component#Site-Building
搞定 Blog 圖片的三件事:管理、引用、壓縮

Markdown 插圖的兩個痛點:1. 路徑太長:用資料夾結構 + 相對路徑解決管理;2. 體積太重:用 macOS 內建 sips 解決壓縮,一行指令壓掉 90%,不用裝任何東西。

2026-06-22
#Workflow#Image-Compression#Site-Building
讀起來更舒服:Dark Mode 切完,才發現 Code Block 沒跟上

Dark Mode 切好了,但 code block 還是黑的。從 CSS class-based 架構、防閃爍 FOUC,到換掉手刻 code block——讓整個 blog 讀起來真正舒服。

2026-06-22
#Dark-Mode#Expressive-Code#Astro#Site-Building
Blog 被找到的三種方式:RSS、GSC、AEO

寫了文章沒人看等於白做。RSS 讓讀者訂閱、GSC 送給 Google 索引、AEO 讓 AI crawler 讀懂你——三種設定,一次說清楚。

2026-06-22
#RSS#SEO#AEO#Site-Building
為什麼選 Astro 來架 Blog

從框架選擇表到孤島架構、Vue 式語法、CSS scoping,一篇說清楚我為什麼不選 Next.js 的文章。

2026-06-20
#Astro#Blog#Site-Building
買了 domain,才算是認真在做一件事

從 GitHub Pages 出發到個人品牌 domain 架設過程,還有那些走過才會遇到的坑。

2026-06-20
#Blog#Cloudflare#Site-Building
Markdown 樣式全測試

測試所有 Markdown 元素的渲染效果

2026-06-19
#Test#Markdown#Style