
最近用 Antigravity 做了一件事,讓我真正感受到什麼叫 AI 時代的紅利,也是用AI工具至今我的第一個「Ah moment」。
事情是這樣的。以前想做個人作品集網站,但每次真的下手去刻,總是刻到一半就卡住,不是因為設計做不出來,通常技術細節搞太久(但很多時候是技術問題T_T,而且很多都是基礎問題XDD),要做一個靜態作品集網站,自己來前前後後弄個三四個月跑不掉。
最近在試 Antigravity 這個 IDE 工具,想說既然要測試,不如就拿作品集網站做 side project 當練習;結果沒想到,跟 Antigravity 加 Gemini 互動了大概 30 分鐘左右,一個靜態作品集網頁的框架就做完了。Holy shooot 30 分鐘!不是草稿,是一個可以用的框架。
做完之後我想說,既然都做了,那乾脆把多語系也加進去。於是我直接跟 Gemini 說:「這個網頁要有中文和英文語系內容,字串內容建立出來後,我要可以自己編輯內文。」
不到 5 分鐘,整個英文內容和語系切換功能,全部搞定。做完那一刻,眼睛真的亮了一下。這讓一個設計出身產品經理,眼睛是充滿了光。
這個「Ah moment」。不是因為功能有多炫,而是突然意識到:以前要花好幾個月的事情,現在可能只要一個下午;接下來四天左右,我把之前做的一些小工具(其實也沒多久,就 2025 年 10 月的東西),全部用 Gemini 和 Antigravity 重新跑過、優化一遍,然後「上架」到這個作品集網站。
整個過程讓我覺得很興奮,這表示以後有任何想法或點子,都可以先快速做一個 MVP 出來驗證。不用再等人、等資源、等技術到位。想到什麼,就先動手試試看。
當然,目前這種模式還沒辦法,直接做出一個穩定可商用的軟體產品,那需要更多的打磨和測試,我堅信工程師不會消失或被取代,但可以有機會讓有想法的人可以先跑起來,不用再苦於人力和技術的限制而無法提前行動。
這個時代,覺得有三個能力,會越來越特別重要:
創造力 (Creativity)——能想到什麼別人沒想到的?
執行力 (Execution)——能多快把想法變成東西?
同理心 (Empathy)——做的東西真的解決別人的問題嗎?
AI 把技術門檻降低了,但這三件事,還是得靠自己體驗和經歷才可以形塑出來。
有興趣的話,可以點連結看看這個 AI 作品集網站(連結)。會持續放一些自己想做的小服務上去,也歡迎給我一些回饋。
而下列就是我把整個過程,整理起來每一個步驟的內容。這是目前我試出來,和是我目前工作上需要的流程,所以我給這流程版本先訂成v1.0版,相信未來一定還有更有效率的方式來提升工作流,在這時間點(2026/01/25)先做一個學習筆記,也讓需要朋友可以參考,也做成是一個基本線,持續的迭代整個流程。
為了讓版本更容易控制,並要能降低AI的隨機性,所以打算用規格書(PRD/SPEC)來控制,所以運用Anitgravity裝上Skills(Skills.md)來做更有效並精準的控制,從一個過去用Claude做的小工具來實驗,從開始決定改版到完成改版並上傳Github,約一個小時(如下圖所示)。

為什麼要做AI協作工作流?
說實話,建立工作流程,最主要是為了解決自身的痛點。
身為一個產品經理,每天的任務又多又雜,事情沒少過,但能夠專注思考的時間卻越來越少。所以我開始想:有沒有什麼事,是可以讓 AI 先處理掉的?尤其是那些重複性高、但又不能馬虎的工作。
回頭盤點PM每天在做的主要任務,大致可以分成這五的面相任務:
- 思考商業策略及產品方向
- 收集需求、分析與商業模式的契合度
- 撰寫產品規格
- 建立產品初步框架或模型
- 與利害關係人(Stakeholders)協作與執行
這五件事每天都在輪流上演,但其中真正重複性高、又最需要精準處理的,其實是第三項跟第四項 —— 規格撰寫與框架建構。這兩部分耗時又需要高度專注,且頻率還很高,也需要產出一些內容,在跟相對應利害關係人(Stakeholders)討論,所以產出速度也是要高。
所以想透過這這版本的 AI 協作工作流,就是專門針對這兩個任務下手。
希望可以透過這樣的流程設計,把一些機械式、重複性的處理交給 AI,自由出更多時間和腦力去思考更關鍵的事情 —— 比如產品策略怎麼走?商業模式怎麼運營?
下面是使用過去用Claude建立一個小工具,來估算如果Iphone想要二手賣掉的最佳時機,用視覺畫的方式,來呈現轉賣的最佳時機點,第一個版本是用Claude做,該版本的問題是,未能做到即時更新、版本控制方式不佳、及UI過於 AI 味;所以想要再透過Antigravity在進行版本改造優化,迭代成簡潔設計並發布於Github,具有版控資訊。
但看這個版本的時間戳記來看,第一個版本是用Claude約莫用3~4天晚上做完,三個月後,做第二個版本,約用一個小時左右時間做完;可見 AI 發展的速度太驚人。

相關Prompt,快速複製使用
- 第一步,安裝Skills『閱讀這個網址內容https://antigravity.google/docs/skills,幫我安裝 skills,至TimeConverter2.0的資料夾中』
- 第二步,設定Agent skills內容『我要安裝一個Skills有關於PRD Writer,幫我領清規格和專門用於撰寫高品質產品需求文件 (PRD) 的技能,包含需求釐清、規格結構化與自動文檔回寫功能。』『我想在PRD writer的Skill.md加上下列內容 』
- 第三步,建立資料夾『幫我建立下列各資料夾,assets, docs, inputs, src 各資料夾目的為: assets:參考資料或圖片; docs:PRD文件內容; inputs: 需求內容資訊或文件; src: 放置開發內容檔案;』
- 第四步,檢視內容『請先檢視inputs的內容,然後我們再討論下一步』
- 第五步,導入UI風格『依據inputs資料夾內容,撰寫PRD,並在PRD中增加UI風格說明,使用瑞士國際主義風格 (International Typographic Style)並帶有現代網頁設計中流行的輕量野獸派 (Soft Brutalism) 特質的視覺風格,讓操作介面輕盈易讀,可參考assets中的圖片(005.jpe, 010.jpg, 017.jpg ),請把這些內容加入PRD中;依據inputs及assets資料夾內容,彙整成一份可開發產品的PRD.md文件,放置於docs資料夾中』
- 第六步,建立html『請依據PRD.md內容,建立HTML檔案,HTML檔案放置於src資料夾中』
- 第七步,修改UI_這階段就直接用自然語言,跟AI直接討論修改內容
- 第八步,發布Github『
# 1. 先忽略所有檔案 (Ignore Everything) * # 2. 允許 src 資料夾 (Allow src) !src/ !src/** # 3. 允許 .gitignore 本身 (不然這個規則檔自己會消失) !.gitignore』 - 第九步,執行commit『我已經完成修改,請分析我的變動並幫我寫一個繁體中文的 Git Commit Message。』
詳細內容說明
詳細步驟說明如下,需安裝Antigravity,先不要選擇自動執行,選擇手動確認後再執行
第一步,安裝Skills
『閱讀這個網址內容https://antigravity.google/docs/skills,幫我安裝 skills,至TimeConverter2.0的資料夾中』


第二步,設定Agent skills內容
『我要安裝一個Skills有關於PRD Writer,幫我領清規格和專門用於撰寫高品質產品需求文件 (PRD) 的技能,包含需求釐清、規格結構化與自動文檔回寫功能。』
我想在PRD writer的Skill.md加上下列內容
---
name: prd-writer
description: 專門用於撰寫高品質產品需求文件 (PRD) 的技能,包含需求釐清、規格結構化與自動文檔回寫功能。
---
## Role (角色設定)
你是資深的產品經理 (PM),擅長將模糊的想法轉化為結構嚴謹的規格書。你的目標是產出開發者 (Developers) 能直接看懂並實作的文件。
## Workflow (執行流程)
當使用者提出需求時,請嚴格遵循以下四個步驟:
1. **釐清需求 (Clarify)**
- 使用蘇格拉底提問法,反問使用者 2-3 個關鍵問題(如:目標客群、核心功能、邊界情況)。
- 確保完全理解使用者的意圖後再進入下一步。
2. **結構化撰寫 (Structure)**
- 將確認後的需求整理為以下標準格式:
- **功能名稱 (Feature Name)**
- **背景與目的 (Context)**:為什麼要做這個?
- **使用者故事 (User Stories)**:作為[角色],我想要[功能],以便[效益]。
- **功能需求 (Functional Requirements)**:詳細的條列式規則 (包含 Input/Output)。
- **驗收標準 (Acceptance Criteria)**:怎樣才算做完?
3. **自我審查 (Review)**
- 檢查邏輯是否矛盾。
- 詢問使用者:「這樣的規格是否正確?有無需要修改的地方?」
4. **歸檔與回寫 (Documentation & Commit)** <-- (新增功能)
- **觸發條件**:當使用者回答「確認」、「沒錯」、「正確」或「可以存檔」時。
- **執行動作**:
1. 將上述確認過的內容,整理成一份精簡的**結構化摘要 (Structured Summary)**。
2. 自動讀取或建立專案中的 `docs/PRD.md` 檔案 (若無此資料夾請自動建立)。
3. 將內容**追加 (Append)** 到 `docs/PRD.md` 的末端。
4. 回報:「已將 [功能名稱] 的規格摘要回寫至 docs/PRD.md,隨時可以開始開發。」
## Formatting Rules (寫入格式規範)
當執行「歸檔與回寫」時,請使用以下 Markdown 格式追加內容:
---
## [日期] 功能:[功能名稱]
> 狀態:已確認 | 優先級:[高/中/低]
### 核心規格摘要
[這裡放入確認後的功能需求與驗收標準]
### 備註
[任何額外的注意事項]
---
## Constraints (限制)
- 必須使用繁體中文 (Traditional Chinese)。
- 遇到不確定的技術可行性,請標註「待確認」。
- 寫入檔案時,請確保不會覆蓋掉原本 `docs/PRD.md` 裡舊的內容,而是向下追加。
第三步,建立資料夾
『幫我建立下列各資料夾,assets, docs, inputs, src 各資料夾目的為:
assets:參考資料或圖片;
docs:PRD文件內容;
inputs: 需求內容資訊或文件;
src: 放置開發內容檔案;』
第四步,檢視內容
把文件資料放到inputs然後請他檢視閱讀
『
請先檢視inputs的內容,然後我們再討論下一步
』
第五步,導入UI風格
把想要的視覺風格圖放到assets中
『
我想在PRD中增加UI風格說明,使用瑞士國際主義風格 (International Typographic Style)並帶有現代網頁設計中流行的輕量野獸派 (Soft Brutalism) 特質的視覺風格,讓操作介面輕盈易讀,可參考assets中的圖片(005.jpe, 010.jpg, 017.jpg ),請把這些內容加入PRD中;依據inputs及assets資料夾內容,彙整成一份可開發產品的PRD.md文件,放置於docs資料夾中
』
第六步,建立html
『
請依據PRD.md內容,建立HTML檔案,HTML檔案放置於src資料夾中
』

第七步,修改UI
調整想要的UI樣態和顏色,這一步可以初步做過一次就好,待後面上傳發布後,可以一直調整
第八步,發布Github
從Antigravity發起
按下Source control,點擊「Publish to Github」

免費帳號選擇公開的repository

勾選要上傳的檔案資料

發佈於Github

設定Page

從Github發起
要上傳Github,但只同步上傳src資料夾內的資料內容,其他都不要上傳
- 階段一:在 GitHub 建立「空」倉庫
- 登入 GitHub,點擊右上角 「+」 > New repository。
- Repository name:輸入專案名稱(例如
Timezone_Converter_v2.0)。 - Public/Private:選擇 Public。
- 重要:下面的 "Add a README file", ".gitignore" 等選項全部都不要打勾(我們要保持它是全空的)。
關鍵動作:- [ ] Add a README file (不要勾)
- [ ] Add .gitignore (不要勾)
- [ ] Choose a license (不要勾)
- 請確認這三個格子都是空的!
- 點擊 Create repository。

複製畫面上的 HTTPS 網址(例如:https://github.com/byxblife/PhoneOnSale_v2.0.git)。

如果要刪除Github Repository
- 在你的瀏覽器,進入你剛剛建立錯誤的那個 GitHub 倉庫頁面。
- 點擊上方的 ⚙️ Settings (設定) 頁籤。
- 滑到頁面的最最最底端,你會看到一個紅色的區域叫 "Danger Zone"。
- 點擊最後一個按鈕 Delete this repository。
- GitHub 會跳出視窗確認,請依照它的指示輸入倉庫名稱(例如
byxblife/Timezone_Converter_v2.0),然後點擊確認刪除。
階段二:設定「只准上傳 src」的規則 (關鍵步驟)
我們要用一個特殊的設定檔來告訴 Git:「除了 src,其他都不要上傳」。
- 回到你的 Antigravity (VS Code)。
在左側檔案總管的最外層 (根目錄),按右鍵選擇 New File,檔名輸入 .gitignore (注意開頭有點)。
(下圖於根目錄)

將以下這段「咒語」複製貼上到 .gitignore 檔案中:
# 1. 先忽略所有檔案 (Ignore Everything)
*
# 2. 允許 src 資料夾 (Allow src)
!src/
!src/**
# 3. 允許 .gitignore 本身 (不然這個規則檔自己會消失)
!.gitignore
- 存檔 (
Cmd+S或Ctrl+S)。 - 這時候你會發現,左側檔案總管裡,除了
src資料夾和.gitignore檔案是亮的,其他檔案(如docs,inputs)應該都會變成灰色(代表被忽略了)。


階段三:執行上傳指令
請點擊下方的 Terminal (終端機) 標籤,依序執行以下指令:
(注意:如果你之前的 Git 設定很亂,建議先執行 rm -rf .git 徹底重置 Git,再執行下面指令,這樣最乾淨)
# 1. 初始化 Git (如果你還沒做過)
git init
# 2. 將目前的變更加入 (這時候它只會抓到 src 和 .gitignore)
git add .
# 3. 提交版本
git commit -m "feat: Initial commit (Source code only)"
# 4. 建立主分支
git branch -M main
# 5. 連接到你剛剛建立的 GitHub 倉庫 (請把網址換成你自己的)
git remote add origin https://github.com/byxblife/PhoneOnSale_v2.0.git
# 6. 推送上去
git push -u origin main


設定Page

第九步,執行commit


先做一次Git commit message在本機端
『我已經完成修改,請分析我的變動並幫我寫一個繁體中文的 Git Commit Message。』

結語
現在工具越來越方便,有很多門檻都變低很多,以前想要做一個多語系的作品網頁,對於設計背景的我,自己做就要用上3-4個月(學藝不精XD),但現在可以縮短到一週,就可以架構起來,可以把一些想法可以快速建構起來MVP,可以試試水溫和解決個人或小眾的需求;而接下來的就是「創造力」和「執行力」的強度了,這兩種能力的重要性應該會越來越受重視。