【Day 14】便攜式 vibe coding！放假了，我想要不用電腦也能 vibe coding！

▲ 圖 1：隨時隨地也能 vibe coding 的 vibe！Midjourney 概念示意圖

話說因為最近放假嘛，
經常外出的時候都會發現說，可以的話不想帶電腦外出或者出國（雖然我自己已經習慣了），
但是這會讓人聯想到一個問題：
我在沒有電腦的情況底下，能否 vibe coding 出東西現場分享給人看？

痛點與日常觀察：放假不想帶筆電，手機真能現場 Vibe Coding 嗎？

現在最為人熟悉的，可能就是使用 Claude、Gemini、POE 這些平台的手機版，就能夠隨時隨地 vibe coding 出互動式頁面，然後可以分享給自己身邊的人——可能是節日賀卡，聖誕節的、中秋節的、新年的。

當然這種情況比較多是產出單一的 HTML，但是如果是用手機的瀏覽器打開 Google AI Studio，其實同樣也能夠達到用便攜式裝置進行多個資料夾及多個程式檔案的 vibe coding 效果。

延伸思考：如何打造個人化「便攜式 Vibe Coding」工具？

當然我們自己還可以延伸多一點，我們要如何打造自己的個人化便攜式 vibe coding 工具？

雖然網絡上已經有各種工具，但是自己常用的風格、自己經常部署的形式，可能都有自己喜好的，而自己的獨特審美及對於市場使用者的使用習慣觀察，都可以化為產品擴散的要點（竟然要談到創新擴散了嗎？）。

定義「我的風格與格式」：美學設定與部署前設

我們來做一些習慣跟前設的設定（下稱：「我的風格與格式」）吧：

• 介面風格：必須要高度符合科技風、未來風、cyberpunk、Hyperpop、glitchcore（自己喜歡的風格）。
• 輸出格式內容：可以變成二十四小時上線及自動部署可以分享給別人的頁面，可以直接嵌入 Google Sites 的 HTML（一方面可以直接分享頁面給別人看，也方便自己之後快速導入在頁面，如我自己主張的在 Google Sites 嵌入 AI 給予的程式代碼）。
• 備註：適合手機顯示的頁面（希望自己的 vibe coding 工具產出的程式代碼及頁面是能夠讓任何人用手機都可以看見的內容跟效果）。

💡 提示：以上設定直接整理並餵給 AI，即為專屬個人風格的標準 Prompt 規範！

便攜式 Vibe Coding 的三種落地方式

在這種情況下，我們可以採取以下的三種方法：

方法一：建立獨立的 AI 聊天機器人（Chatbot）

▲ 圖 2：為便攜式 vibe coding 作準備的第一種方式：普通建立 AI 聊天機器人（例如設定 Gemini Gem）

1. 建立獨立的 AI 聊天機器人，專門根據「我的風格跟格式」產出程式代碼並顯示成為頁面，例如設定 Gemini Gem。

方法二：為 AI Agent 應用程式建立 Vibe Coding Skill

▲ 圖 3：為便攜式 vibe coding 作準備的第二種方式：為自己的 AI Agent 應用程式建立專屬 vibe coding skill

2. 為自己的 AI Agent 設置 skill，把「我的風格跟格式」下達變成手機上面 AI Agent（如：Gemini Spark 及 Claude），每次在 vibe coding 時都會遵守的規則。

方法三：用 Google AI Studio 打造專屬的 AI 應用程式

▲ 圖 4：為便攜式 vibe coding 作準備的第三種形式：建立自己的專屬 AI 應用程式

3. 用 AI Studio 製作一個 AI 應用程式吧！下 prompt 建構一個連接 Firebase，可以用戶登入，無論用戶怎樣簡單的要求都會根據「我的風格跟格式」給予用戶我風格的成果。當然這邊會要求用戶使用自己的 API，確保我的 API 帳單不會爆掉（當然我自己也沒有連接信用卡）。

實戰成果與商業化思考：將美學與模板化為獨立商品

這次 vibe coding 出來的東西就是用第三種方法（因為之前還沒有真正試過），這樣我就能夠把自己的審美以及風格在未來變成一種商品。

其實已經超級像線上一些 AI 教學的 IG 帳號都會用 Notion 分享自己的 prompt，但是我做多一步的是：自己擁有一個模板，客戶還能夠根據個人化需要，加上喜歡某一個模板製作出獨一無二的內容，並且擁有部署的效果，讓用戶產出的內容可以分享出去！

▲ 圖 5：自己的 AI 應用程式根據自己的風格及模板所建立的客製化內容，中秋節快樂！

特別是寫入 NFC 或 QR Code 分享出去也好，這些相對複雜的功能，可能就必須要建立個人的 AI 應用程式了，並且未來會比較能夠自由地因此宣傳自己想建立的模板跟個人品牌，並且設計出各類型的服務！

延伸閱讀：相關專題與背景延伸

• 📱 LinkedIn 專欄文章：
  從《戰爭程序員白瀨》到「維達爾系統」：我如何透過 Google AI Studio 實現手機即時編程的夢想？
  🔗 閱讀連結：點此前往 LinkedIn 專文閱讀

📌 本篇重點整理