影片指揮中心· 5 分鐘試看

第一句咒語

第一句咒語 的一句話描述。

這節是真正的「第一次」——你要打開 Antigravity 的對話框,貼一段話,看 AI 把它變成一個網頁。

等不到一分鐘,你會在瀏覽器看到自己的名字出現在自己寫的網頁上。

主咒語

把下面這段貼進 Antigravity 右側 Agent 對話框,名字換成你自己的,按 Enter:

幫我寫一個精美的歡迎頁,中間要有我的名字「Noct」
背景要用質感的深色漸層,字體用 sans-serif
整體風格像 Apple 官網那樣極簡
請直接幫我建立 index.html 檔案

AI 跑完後,左側資料夾會出現 index.html——雙擊用瀏覽器打開,你的第一個網頁就誕生了

三個風格變體(直接複製改名字)

試完主咒語後,至少再選一個變體跑一次——你會發現只改幾個詞,AI 給的東西完全不一樣。這就是「描述能力」的力量。

變體 A · 簡約風(MUJI 質感)

幫我寫一個歡迎頁,中間放我的名字「{你的名字}」
淺灰底加黑字,字體極大,像 MUJI 那樣極簡
請直接幫我建立 index.html 檔案

變體 B · 賽博龐克

幫我寫一個歡迎頁,中間放我的名字「{你的名字}」
黑色背景加霓虹紫綠漸層,字體未來感,像 Cyberpunk 2077
請直接幫我建立 index.html 檔案

變體 C · 夢幻風(iOS 早期)

幫我寫一個歡迎頁,中間放我的名字「{你的名字}」
柔和粉橘漸層,字體手寫感,像 iOS 早期風格
請直接幫我建立 index.html 檔案

拆解:為什麼這幾句話都會動

四個版本的咒語都做對了同樣三件事:

1. 風格錨點(像誰)

「像 Apple」「像 MUJI」「像 Cyberpunk 2077」——這一句話幫 AI 在它腦中千萬個樣本裡定位。
你不需要知道工程術語,只要找一個它認得的品牌或風格名稱當參照。

2. 顏色限定

「深色漸層」「淺灰底加黑字」「粉橘漸層」——直接給主色方向,AI 不會抽到預期外的配色。
訣竅:給「色系 + 質感詞」(霓虹、質感、柔和),不一定要給 hex code。

3. 字體方向

「sans-serif」「字體極大」「手寫感」——決定整體氣質。
訣竅:不必懂字體名稱,給「無襯線 vs 襯線」「極大 vs 緊湊」「手寫 vs 工業」這種對比詞就夠。

檢查

動手挑戰:至少做出一個變體

勾完代表你親手看到 AI 把你的話變成網頁了。

0 / 3
登入後可勾選保存進度。

讀取上次狀態…

反思

實際做出來的網頁,跟你貼咒語前腦中預期的,差在哪裡?

可以是「比我預期還快、但字體醜了點」「漸層比想像中飽和」「整體 OK,但我想要的留白更多」。具體描述一兩個差異,會幫你看出下次該怎麼微調 Prompt。

登入後即可寫下你的反思(自動儲存)。在這個 lesson 寫下的任何文字 僅你自己看得到。

下一節我們把剛才的咒語拿來「找碴」——你會學到怎麼一眼看出爛 Prompt 缺了什麼。

學員 Q&A

0 則提問
載入中…
載入提問…
第一句咒語 — Vibecoder 啟航:設計師的 AI 全棧開發第一課 | Indie Hackers Taiwan | Indie Hackers Taiwan