副爸爸

蹲馬桶也能做網站:手機遙控 AI,再把網站變成手機 App

先看結果:

網站很醜、人在馬桶上,對手機講一句話,打開 App 就變漂亮了。這篇教的就是這個
網站很醜、人在馬桶上,對手機講一句話,打開 App 就變漂亮了。這篇教的就是這個

上一篇,你的網站做出來了。還沒做的,先從這篇開始:

→ 傳送門:我沒寫一行程式,用講的叫 AI 做出你正在看的這個網站

做出來之後,問題來了:想再改一個字,你得坐回電腦前面。

有小孩的都知道,這件事有多難。

你屁股才剛碰到椅子,背後就冒出一顆小頭:

「爸爸,這個是什麼?」

你還沒回答,第二波攻擊已經到了:

「爸爸,你在幹什麼?」

你說在工作。他眼睛一亮,小手直接伸向鍵盤:

「爸爸,我也要按!」

你一把護住鍵盤,像在護住傳家寶。他看搶不到,祭出終極大招,整個人掛在你手臂上:

「爸爸~陪我玩~」

三連擊加一個必殺技。你連一個字都還沒打。

電腦前面,根本坐不住。

可是手機,一直都在你手上。

這篇教你兩招:

  • 第一招:用手機遙控電腦上的 AI,叫它改網站。
  • 第二招:用手機打開你自己的網站,再讓它變成你手機裡的一個 App,跟 LINE、FB 排在一起。

兩招合體,電腦就可以丟在家裡,開著就好。你人在哪,網站就跟到哪。

先準備:手機裝兩個 App

  • Claude:上一篇在電腦上用的那個 AI,手機也有 App。用跟電腦同一個帳號登入。
  • Tailscale:讓手機連得回你電腦的工具,個人使用免費。登入時選 Google 登入,待會電腦也要用同一個 Google 帳號,兩邊才會進到同一個群組。

App Store 或 Google Play 搜名字,下載,登入。

iPhone 第一次打開 Tailscale,會跳出「加入 VPN 設定」的視窗。按允許,這是正常的,不是詐騙。

出門前:在電腦前一次做完三件事

下面三件事,手機遙控不了,一定要坐在電腦前面做。一次做完,之後全程只拿手機。

1. 打開 Remote Control(遠端遙控)

在電腦的 Claude,點右上角那個小圖示打開面板,把 Remote Control 的開關打開:

先點右上角的小橘框,面板打開後,把 Remote Control 打開。打碼的是我的對話內容
先點右上角的小橘框,面板打開後,把 Remote Control 打開。打碼的是我的對話內容

找不到的話,也可以直接在輸入框打這一行,按 Enter:

複製這行,貼到電腦上 Claude 的輸入框
/remote-control

2. 叫 AI 幫電腦裝 Tailscale,拿到網站的網址

電腦也要裝 Tailscale、登入帳號,安裝時會跳出視窗要你按確認。在電腦上那個對話,貼這句:

複製這段,貼給 AI
我的電腦還沒裝 Tailscale,先一步一步教我裝好、登入。然後幫我設定,讓我的手機也能打開這個網站,只有我自己的裝置能看,不要公開給別人。做完給我網址。

登入時,選跟手機同一個 Google 帳號。設定完,它會給你一串網址。這串網址只要設定一次,之後都不會變。

拿到網址,先丟給自己。我的做法很土,但很好用:複製起來,傳到自己的 LINE。

我習慣傳到只有自己的 LINE 群組,網址就打碼了
我習慣傳到只有自己的 LINE 群組,網址就打碼了

3. 讓電腦不要睡著

電腦一睡著,手機就什麼都連不到了。一樣叫 AI 教你:

複製這段,貼給 AI
教我把這台電腦設定成不會自己睡著,我要讓它一直開著。

三件事做完,電腦就可以丟著不管了。從這裡開始,只拿手機。

第一招:用手機遙控電腦上的 AI

先搞懂一件事:AI 還是在你的電腦上做事。手機只是一支遙控器。所以電腦要開著,電腦上的 Claude 和那個對話也不能關。

手機這邊:點 Code

打開手機的 Claude,點左上角的選單,選 Code:

跟電腦一樣,手機上也有一個 </>
跟電腦一樣,手機上也有一個 </>

你在電腦上開的對話,會出現在這裡:

打碼的是我其他的對話。旁邊有電腦圖示的,就是連得上的
打碼的是我其他的對話。旁邊有電腦圖示的,就是連得上的

點進去,跟它講話。結束。

打字太慢?用講的

一手抱小孩、一手拿手機的時候,打字根本是酷刑。

輸入框旁邊有一個麥克風,按下去直接講話:

長按就能說話,講完它會自動轉成文字
長按就能說話,講完它會自動轉成文字

不用講得很漂亮。「欸那個標題太大了,小一點,然後顏色不要那麼亮」,這樣就可以,「欸」「那個」「然後」它都聽得懂。

唯一的副作用:半夜躲在廁所,對著手機小小聲講「欸,這邊再弄得可愛一點……對,就這樣,好棒」。

門外的另一半,可能會以為你在跟誰講電話。

到時候要怎麼解釋,你自己想辦法。我只負責教你做網站。

學會這招之後,你的工作時間會變得很奇妙。

蹲馬桶的時候。以前蹲馬桶滑手機,現在蹲馬桶蓋網站。腿麻的程度一樣,成果差很多。

電視被小孩搶走的時候。他看他的卡通,你改你的網站,誰也不吵誰。

吃飯等上菜的時候。點完餐,到菜上桌,夠你叫 AI 改好一個按鈕了。

第二招:用手機打開你自己的網站

第一招有一個問題:AI 改好了,你想看改完長怎樣,手機卻打不開你的網站。

因為網站住在你的電腦裡。你人在公園,它在家裡,中間隔著整個網路,誰也找不到誰。

這時候就輪到 Tailscale 出場了。

你可以把它想成一個只有自己人的 LINE 群組。

你的電腦和手機,本來是兩個陌生人,住在不同的地方,誰也不認識誰。

裝了 Tailscale,等於把它們拉進同一個群組。從此它們互相認識,手機想找電腦,直接敲門就好。

外面的人不在群組裡,連你家門牌都看不到。網站沒有公開給全世界,只是你的手機從此認得它。

打開手機的 Tailscale,開關打開,看到 Connected(已連線),就是連上了。其他的都不用動:

打碼的是我的帳號。下面那幾台,就是同一個群組裡的成員
打碼的是我的帳號。下面那幾台,就是同一個群組裡的成員

接著打開 LINE,點剛剛傳給自己的那串網址,網站就出來了:

在 LINE 裡點開,就能看到電腦上的網站
在 LINE 裡點開,就能看到電腦上的網站

把網站變成手機上的 App

在 LINE 裡打開,只是先看看。

接下來,是整篇最爽的一步:讓你的網站,變成手機桌面上的一個 App。

先叫 AI 幫你做一個 App 圖示

加之前,先跟 AI 說一聲,不然加出來的可能只是一個灰灰的字,醜到你自己都不想點:

複製這段,貼給 AI
幫我的網站設計一個 App 圖示和名字。我要把它加到手機桌面上,圖示要好看、一眼認得出來是我的網站。

它會幫你畫好圖示、取好名字。改好之後,再來加。

用 Safari 加到手機桌面

  1. 在 LINE 裡把網址複製起來。
  2. 打開 Safari,點網址列,選貼上並前往。
長按網址列,選「貼上並前往」
長按網址列,選「貼上並前往」
  1. 點下面的分享按鈕(方框加一個往上的箭頭),往下滑,選加入主畫面。
打碼的是 LINE 好友和網址。往下滑,找到「加入主畫面」
打碼的是 LINE 好友和網址。往下滑,找到「加入主畫面」
  1. 名字可以改成你看得懂的,按右上角的加入。
名字改成你喜歡的,按加入
名字改成你喜歡的,按加入

回到手機桌面,你的網站就變成一個 App 了。成就解鎖:

左邊是給讀者看的網誌,右邊是只有我能進去的後台
左邊是給讀者看的網誌,右邊是只有我能進去的後台

我自己加了兩個:一個是給讀者看的網誌,一個是我的後台,用不同顏色分開,才不會點錯、在後台亂按。

用 Android 的,打開 Chrome,點右上角的選單,一樣找「加入主畫面」。

加完才發現很醜?刪掉重來

如果你太心急,沒先做圖示就加了,桌面上出現一個醜醜的灰字也沒關係。

長按那個圖示,選移除(或按圖示角落的 −),把它刪掉。回去叫 AI 把圖示做好,再照上面的步驟加一次。

等你的網站帶著自己的圖示、自己的名字,跟 LINE、FB 平起平坐排在同一個桌面上,恭喜:你從築基一層,直接衝上築基五層了。

打不開的時候,先檢查這三樣

  • 電腦是不是睡著或關機了。 回家把它叫醒。
  • 手機的 Tailscale 開關有沒有打開。
  • AI 是不是停下來在問你。 沒開 Auto 的話,它改檔案之前要你按允許,手機上會看到,按下去它才會繼續。上一篇教的 Auto 開著,就不會一直被問。

手機也救不了的時候

老實說,有幾種狀況,手機遙控不到,得回到電腦前面處理:

  • 電腦自己重開機了。 現在的電腦會半夜偷偷自動更新,更新完就重開機,然後停在輸入密碼的畫面發呆。Claude 沒開,Docker 也沒開,網站自然打不開。
  • Docker 沒有跟著醒來。 它要等你登入電腦之後才會啟動。電腦卡在登入畫面,它就一直睡。
  • 跳出要你按「是」的視窗。 有些安裝或更新,電腦會問「是否允許變更」。這顆按鈕 AI 按不到,只有坐在電腦前的人按得到。
  • Tailscale 要你重新登入。 我自己用了好幾個月都沒遇過。不過它預設大約半年會要你重新登入一次,哪天手機突然連不上,可以想到這個。

遇到了,回家把電腦打開、登入,通常就好了。

真的不想跑回家,還有一招:用 AnyDesk 這類遠端桌面工具,用手機直接操作整台電腦的畫面。它其實不難。只是這篇我想讓你裝越少東西越好,一次塞太多,光看就覺得煩。有需要可以先問你的 AI,有機會我再寫。

恭喜,電腦解放了

到這一步,你手上有:一個自己的網站、一個自己的後台、一個能遙控 AI 的手機。

電腦丟在家裡,開著就好。

蹲馬桶在改網站,等上菜在改網站,小孩在溜滑梯,你在旁邊用講的叫 AI 加功能。

以前的你,被釘在電腦前面。現在的你,電腦被你釘在家裡。

網站有了,手機也準備好了。

還沒申請分潤的,先去拿帳號:

→ 傳送門:副業教學看了一堆還沒動?蝦皮分潤 1 分鐘申請,跟著我按

已經申請好的,來看我為什麼半夜不睡覺在搞這些:

→ 傳送門:車壞了,老婆說要回去上班。我說:再撐半年看看

‹ 看更多AI 教學文章回日誌首頁