← → 翻頁 · ESC 索引
Vibe Coding · 寵物屋 App
Vol.01 · 2026
給初中生的 AI 入門課 · 零基礎也能做到

用 AI 做 App

用「說話」的方式,造出你的第一個寵物屋小程式

你不需要懂程式語言,不需要背複雜的語法——只要能說清楚你想要什麼,AI 就能幫你把 App 做出來。

Vibe Coding·Claude · Codex·零基礎教程
一堂課做出你的第一個 App
— 2026 —
基礎概念 · What Is This
01 · 02 / 18
一個改變一切的新方法

什麼是 Vibe Coding?

Vibe Coding 是一種用「說話」的方式讓 AI 幫你寫程式的方法。
你不需要學習複雜的程式語言——只要用中文告訴 AI 你想要什麼,它就會把可以執行的程式碼寫出來。

就像對廚師說「我要一碗牛肉麵,加辣,麵條要粗一點」——你不需要自己會煮麵,廚師幫你做!
Vibe Coding 就是你描述想要的 App,AI 負責把程式碼「煮」出來。
Vibe = 感覺 / 氛圍 你用感覺去「說」App 長什麼樣
Coding = 寫程式 AI 負責把這個感覺變成真正的程式碼
Page 02 · 認識 Vibe Coding
— · —
角色分工 · Roles
01 · 03 / 18
你的工作

你是老闆

你的任務是想清楚:
App 要做什麼?
長什麼樣子?
哪些功能最重要?

你只需要說清楚你的「需求」,就像跟設計師說你想要什麼樣的房子一樣。
你的角色 · Your Role
AI 的工作

AI 是員工

AI 的任務是:
把你說的話翻譯成程式碼
讓 App 真的能跑起來
幫你修改和改進

AI 不會問你「你懂 JavaScript 嗎」——它只需要你告訴它你要什麼。
AI 的角色 · AI Role
Page 03 · 角色分工
— · —
第一幕 · 準備工作
Act I · 04 / 18
Act I

準備工作

動手之前,我們先認識工具,搞清楚流程——準備好了,做起來就很快。

第一幕 · 工具與概念
— · —
工具準備 · Setup
Act I · 05 / 18
你只需要準備這些

工具清單

超級簡單——不需要安裝任何軟體,用你現在的電腦或手機就行!

必備工具 · 4 樣東西
01
一台電腦或手機
任何能上網的設備都可以,不需要買新的
02
瀏覽器
Chrome、Safari 都行,你已經有了
03
AI 助手帳號
Claude.ai 或 ChatGPT 免費版就夠用,用 Email 註冊
04
一個想法
你想要做什麼 App?把它想清楚,這才是最重要的!
Page 05 · 工具清單
4 件事搞定準備
核心工具 · AI Tools
Act I · 06 / 18
你最重要的夥伴

認識 AI 助手

我們主要會用到兩個 AI 工具。它們就像超聰明的程式設計師,24 小時都在線,而且不收費!

Claude · 首選推薦
Claude.ai

由 Anthropic 公司開發,目前最擅長寫程式和理解需求的 AI 之一。

免費版本已經非常好用,直接在瀏覽器打開 claude.ai 就可以開始。

特別擅長把「人話」翻譯成漂亮的程式碼。

→ claude.ai
Codex · 進階選項
OpenAI Codex

由 OpenAI 開發,是 ChatGPT 背後公司的程式碼專用模型。

可以在 ChatGPT 裡直接使用,告訴它「幫我寫一個…程式碼」即可。

也非常擅長理解你的需求並生成可以運行的程式碼。

→ chat.openai.com
Page 06 · 認識 AI 助手
Claude · Codex
舊 vs 新 · The Shift
Act I · 07 / 18
世界變了

以前 vs 現在

Before · 以前的方式

要花 1-2 年

  • 先學 HTML(3 個月)
  • 再學 CSS(2 個月)
  • 然後學 JavaScript(6 個月)
  • 還要學後端、資料庫...
  • 背幾千個語法規則
  • 一個錯誤就讓程式崩潰
After · 現在的方式

30 分鐘就能完成

  • 打開 Claude 或 ChatGPT
  • 用中文說出你的想法
  • AI 生成完整程式碼
  • 複製到瀏覽器就能看到效果
  • 不對的地方再告訴 AI 修改
  • 完成!
Page 07 · 以前 vs 現在
Before / After
黃金法則 · Golden Rule
08 / 18
記住這句話
"你是導演, AI 是演員。"

你說要拍什麼場景、什麼風格、什麼台詞,AI 負責把它演出來。
導演不需要自己上台演,但需要說清楚想要什麼。

Vibe Coding 核心哲學·說清楚 = 做得好
Page 08 · 黃金法則
— · —
第二幕 · 開始動手
Act II · 09 / 18
Act II

造寵物屋 App

現在我們真正動手——一步一步造出你的第一個 App!

第二幕 · 設計、建造、改進
— · —
功能設計 · Feature Design
Act II · 10 / 18
先想清楚,再動手

寵物屋 App 要有什麼?

我們先規劃好 6 個核心功能,這樣告訴 AI 的時候才說得清楚。

Feature 01
寵物資料
記錄名字、種類、年齡、顏色
Feature 02
健康紀錄
記錄餵食、打針、看醫生的時間
Feature 03
照片
展示寵物的可愛照片
Feature 04
日記功能
記錄寵物每天發生的故事
Feature 05
提醒功能
設定餵食、吃藥的時間提醒
Feature 06
分享功能
把寵物主頁分享給朋友看
Page 10 · 功能設計
先規劃,再動手
建 App 流程 · Build Flow
Act II · 11 / 18
整個過程只有 5 步

建 App 的流程

每次做修改,都是重複這 5 步——這就是 Vibe Coding 的循環。

Vibe Coding 循環 · 重複這 5 步
01
描述你的想法
用中文告訴 AI 你要做什麼、長什麼樣、有哪些功能
02
AI 生成程式碼
AI 把你的文字翻譯成 HTML、CSS、JavaScript 程式碼
03
複製並預覽
把程式碼存成 .html 檔,用瀏覽器打開,馬上看到效果
04
找出不對的地方
看看哪裡顏色不好看、哪個按鈕沒反應、哪個功能缺了
05
告訴 AI 要修改
用文字告訴 AI「第 3 步的按鈕顏色改成藍色」,AI 更新程式碼
Page 11 · 建 App 流程
描述 → 生成 → 預覽 → 改進
最關鍵的技能 · Prompt
Act II · 12 / 18
你最需要練習的事

寫好「提示詞」

提示詞(Prompt)就是你告訴 AI 的那段話。說得越清楚,AI 做得越好。

01
說明目的
告訴 AI 這個 App 是給誰用、用來做什麼的。

好:「做一個給中學生用的寵物紀錄 App」
差:「做個 App」
02
列出功能
把你想要的功能一條一條列出來,越具體越好。

好:「要能新增寵物、記錄餵食時間、上傳照片」
差:「要有很多功能」
03
描述外觀
說明你想要的顏色、風格、哪種感覺。

好:「粉紅色系,可愛風格,圓形按鈕」
差:「好看一點」
Page 12 · 寫好提示詞
具體 · 清楚 · 有細節
提示詞對比 · Prompt Quality
Act II · 13 / 18
看真實的例子

好提示詞 vs 差提示詞

差的提示詞
「幫我做一個寵物 App。」
AI 不知道要做什麼

AI 會做出最基本、最無聊的版本,因為它完全不知道你想要什麼樣子、什麼功能。

好的提示詞
「做一個寵物屋 App,我的貓咪叫咪咪、3 歲、橘色。功能:新增寵物資料、記錄每天餵食時間、上傳寵物照片、寫每日日記。介面用粉紅色系、可愛圓潤風格,適合手機畫面,按鈕要大一點方便點。」
AI 知道要做什麼了!
Page 13 · 提示詞好壞對比
越具體 AI 做得越好
持續改進 · Iterate
Act II · 14 / 18
最重要的習慣

讓 App 越來越好

第一次 AI 做出來的不一定完美——但這沒關係!重要的是知道怎麼告訴 AI 修改。

改進循環 · 重複直到滿意為止
Look
看一看
打開瀏覽器,仔細看 App 每個地方,試試每個按鈕功能
Find
找問題
記下來:哪裡顏色不好看?哪個按鈕沒反應?哪個字太小?
Ask
告訴 AI
精確描述問題:「第 2 個按鈕的字改成白色」「新增寵物那頁加一個照片欄」
Done
更新預覽
把新的程式碼替換掉,再看看——滿意了就完成,不滿意繼續循環
小提示:每次只改一個問題,這樣你才知道哪個修改有效果。不要一次告訴 AI 改 10 件事!
Page 14 · 持續改進
看 → 找 → 問 → 更新
常見問題 · FAQ
Act II · 15 / 18
別擔心,這些都很正常

常見問題解答

Q 01
AI 做出來的程式碼我看不懂怎麼辦?
完全沒關係!你不需要看懂程式碼,就像你不需要看懂廚師的食譜也能吃到好吃的菜。你只需要看最終的 App 好不好用就行了。
Q 02
App 沒有顯示出來怎麼辦?
把整段程式碼複製到一個新的文字檔,把檔名改成 index.html,然後用瀏覽器打開那個檔案。如果還不行,把錯誤訊息直接告訴 AI,它會幫你修。
Q 03
AI 做的和我想要的不一樣怎麼辦?
繼續告訴它!用更具體的語言描述你想要的。比如:「左邊的圖片太大了,改成佔畫面寬度的 40%」。AI 不會生氣,可以一直改。
Q 04
做好的 App 怎麼讓別人看到?
可以用免費的平台部署,像 Netlify Drop(直接拖曳 .html 檔就好)或 GitHub Pages。告訴 AI「幫我把這個 App 上傳到 Netlify」,它會教你一步步做。
Page 15 · 常見問題
遇到問題很正常
第三幕 · 你做到了
Act III · 16 / 18
Act III

你能做到!

你已經學會了 Vibe Coding 的全部流程。現在讓我們回顧一下今天學了什麼。

第三幕 · 總結與回顧
— · —
總結 · Summary
Act III · 17 / 18
今天你學到了

3 個核心技能

帶走這 3 樣東西,你就掌握了 Vibe Coding 的精髓。

Skill 01 · 最重要
提示詞
知道如何把想法說清楚、說具體——這是 Vibe Coding 裡最關鍵的技能,也是最需要練習的地方。說得越清楚,AI 做得越好。
Skill 02 · 核心習慣
代改進
第一次不完美很正常。看、找問題、問 AI 改、再看——一圈一圈下來,App 會越來越好。這個習慣比會不會寫程式更重要。
Skill 03 · 心態
怕錯
AI 是你最有耐心的老師,不管你問多少次、改多少次,它都不會不高興。所以大膽試、大膽問,錯了繼續改就行。
Page 17 · 今天學到了什麼
提示詞 · 迭代 · 心態
給你的話 · For You
18 / 18
最後一句話
"每個偉大的 App, 都從一個人說 『我想要…』開始。"

現在輪到你了。打開 Claude 或 ChatGPT,開始造你的第一個 App。
你的寵物屋在等著你!

claude.ai·chat.openai.com·開始吧!
Vibe Coding · 寵物屋 App 教程
— 加油!—