你只要搞懂三件事:讓 AI 幫你寫程式、用 GitHub 把作品存好、再把它發佈到全世界看得到的地方。完全沒學過程式也能跟得上。
You only need three things: let an AI agent write the code, use GitHub to keep your work safe, and publish it where the world can see it. No coding experience required.
每個關卡三頁講完。看完你就知道:東西怎麼做出來、做出來放哪裡、以及怎麼讓別人真的用到。
Three pages per stage. By the end you'll know how things get built, where they live, and how other people actually get to use them.
你負責說清楚要什麼,AI agent 負責讀檔案、寫程式、修 bug。你是導演,不是工人。
You say what you want; the AI agent reads the files, writes the code and fixes the bugs. You're the director, not the labourer.
從一個資料夾,變成一個有完整歷史的專案。電腦壞了不怕、改壞了可以回到昨天、還能跟同學一起做。
Your folder becomes a project with full history. Laptop dies? Fine. Broke something? Roll back. Want a teammate? Easy.
網站 5 分鐘就能有網址、而且免費。iOS App 比較慢,要排隊等審核。
A website can have a real URL in 5 minutes, for free. An iOS app takes longer and has to pass review.
會「自己動手」的 AI。跟聊天機器人的差別是:聊天機器人只會回你一段文字,agent 會真的去建立檔案、執行指令、看到結果再決定下一步。
An AI that actually does things. A chatbot replies with text; an agent creates files, runs commands, looks at the result and decides what to do next.
你決定「要做什麼、做成什麼樣、好不好用」。這三件事 AI 幫不了你,因為只有你知道你想要什麼。
You decide what to build, how it should feel, and whether it's good enough. AI can't do those three for you — only you know what you want.
這是專案的家。例如桌面上的my-first-site。
This is the project's home — e.g. my-first-site on your desktop.
入門推薦 Cursor 或 Claude Code,把剛剛那個資料夾打開。
Cursor or Claude Code are good starters. Point it at that folder.
越具體越好。範例看下面。
The more concrete, the better. See the example below.
它會給你一個網址或檔案。一定要親眼確認。
It'll give you a file or a link. Always check with your own eyes.
「標題太小」、「顏色換深藍」。產品就是這樣一輪一輪磨出來的。
"Title's too small", "make it navy". Products get built one round at a time.
「幫我做一個單頁網站,介紹我的高中社團。深色背景,最上面是社團名稱和一句標語,中間三張卡片介紹我們的活動,最下面放 Instagram 連結。先做出第一版,我看過再調。」
"Make a one-page website for my high school club. Dark background, club name and a tagline at the top, three cards in the middle for our activities, an Instagram link at the bottom. Build a first version and I'll adjust after I see it."
✗一次丟十個需求,十個都做得普普。小步走,每一步都能檢查。
Ten requests at once means ten mediocre results. Small steps you can check.
你不用懂技術名詞。說「手機上看,卡片要一排一張」就夠了。
Skip the jargon. "On phones, cards should stack one per row" is enough.
截圖、喜歡的網站網址、配色。給一張圖,勝過講十句。
Screenshots, a link to a site you like, colours. One image beats ten sentences.
它說「完成了」,不代表真的好了。打開、點一點、用手機看一次。
"Done" doesn't mean done. Open it, click around, view it on a phone.
紅字錯誤訊息,整段複製貼上,別自己翻譯。它需要原文才能修。
Copy the red error text in full — don't paraphrase. It needs the original to fix it.
一句話:Google Drive 是用來存文件的,GitHub 是用來存程式的。差別是它多了一台時光機,記得你每一次的改動。
In one line: Google Drive stores your documents, GitHub stores your code — plus a time machine that remembers every change you ever made.
你電腦上的那個資料夾,上傳到 GitHub 之後就叫一個 repo。一個專案一個 repo。
That folder on your laptop, once it lives on GitHub, is a repo. One project, one repo.
每次存檔都是一個「回得去的點」。昨天還能動、今天壞了 —— 一鍵回去。
Every save is a point you can return to. Worked yesterday, broken today? One click back.
第三章要用的 Cloudflare,就是直接讀你的 repo 幫你上線。沒有 repo,路會走得很辛苦。
Cloudflare Pages (chapter 3) deploys straight from your repo. Without one, publishing gets painful.
一個「存檔點」,附上一句話說明你改了什麼。像遊戲的存檔,但你可以存無限多個,而且每個都回得去。
A save point with a one-line note about what you changed. Like a game save — except unlimited, and every one is restorable.
用 GitHub Desktop 點按鈕就好,或直接跟 agent 說「幫我 commit 並 push 上去」。
Click buttons in GitHub Desktop, or just tell your agent: "commit this and push it".
把雲端上的 repo 整包抓下來,開始在自己電腦上做事。
Pull the whole repo down from the cloud so you can work on it locally.
做完一小段就 commit 一次,寫一句「加了報名表單」。
Commit after each small chunk, with a note like "added signup form".
把存檔點推上 GitHub。沒 push,別人看不到、電腦壞了也救不回。
Push your commits to GitHub. No push = nobody sees it, and a dead laptop takes it with them.
開工前先 pull,確保你手上是最新版。
Pull before you start, so you're working on the latest version.
像把稿子影印一份自己改,怎麼改都不會弄壞正本。
Like photocopying the draft to edit — the original stays safe no matter what.
PR 會列出你改了哪幾行,大家可以在上面留言討論。
A PR shows exactly which lines changed, and everyone can comment on it.
不是挑毛病,是多一雙眼睛擋掉低級錯誤。
Not nitpicking — a second pair of eyes catching silly mistakes.
按下 Merge,你的改動就正式進到主線了。
Hit Merge and your work is officially part of the project.
兩個人改到同一行時,電腦不敢自己決定要留誰的,就會停下來問你。不是壞事,選一個留下來就好。
When two people edit the same line, the computer won't guess which version wins — it stops and asks. Not a disaster: just pick one.
main(主線)上的版本,要永遠是「打開就能跑」的。實驗性的東西都留在自己的 branch 上。
Whatever's on main should always run. Keep experiments on your own branch.
第二章做的事,這裡就派上用場了。
This is where chapter 2 pays off.
免費、不用信用卡。進 Workers & Pages。
Free, no credit card. Open Workers & Pages.
選 Connect to Git,挑你剛剛那個 repo。設定通常不用改。
Choose Connect to Git and pick your repo. The defaults usually just work.
等一分鐘,你就有一個網址:你的專案.pages.dev
Wait a minute and you get a real URL: yourproject.pages.dev.
以後只要 push,網站就自己重新上線。不用再進 Cloudflare。
From now on, every push redeploys the site by itself.
把你電腦裡的檔案,放到一台 24 小時開著的伺服器上,讓全世界打得開。「上線」講的就是這件事。
Taking the files on your laptop and putting them on a server that's always on, so anyone can open them. That's all "going live" means.
買一個像 myclub.com 的網域,在 Cloudflare 貼上去就能綁定。不買也沒關係,免費網址一樣能用。
Buy something like myclub.com and connect it in Cloudflare. Totally optional — the free URL works fine.
| 網站Website | iOS AppiOS App | |
|---|---|---|
| 上線要多久Time to live | 5 分鐘5 minutes | 幾天到幾週(含審核)Days to weeks (incl. review) |
| 要花多少錢Cost | $0,網域另計約 NT$400/年$0 (a custom domain is ~US$12/yr) | $0,用 ARTZY 的開發者帳號(但要有 Mac)$0 — use ARTZY's developer account (but you need a Mac) |
| 改一版要多久Shipping an update | push 完,一分鐘後就上線Push, live one minute later | 每一版都要重新送審Every version goes through review again |
| 別人怎麼用到How people get it | 傳一個連結就好Just send a link | 要下載安裝,但能上通知、相機等手機功能They must install it, but you get notifications, camera, etc. |
不用等到會寫程式,也不用等到想法完美。開一個資料夾、跟 agent 講一句話,今天就能有一個真的網址。
You don't have to learn to code first, and your idea doesn't have to be perfect. Open a folder, say one sentence to an agent, and you can have a real URL today.