PANO Panel · Build Your First Product

用 AI 一起寫程式,
把想法變成真的產品

Turn your idea into
a real product, with AI.

你只要搞懂三件事:讓 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.

01 跟 AI 一起寫程式Agentic Coding 02 用 GitHub 存作品GitHub 03 發佈上線Publish
這份指南的地圖The map

從 0 到上線,只有三個關卡

From zero to live: only three stages.

每個關卡三頁講完。看完你就知道:東西怎麼做出來、做出來放哪裡、以及怎麼讓別人真的用到。

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.

🤖 01 · Agentic Coding

用講的,把東西做出來

Build it by describing it

你負責說清楚要什麼,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.

🐙 02 · GitHub

作品的雲端保險箱

A safe box in the cloud

從一個資料夾,變成一個有完整歷史的專案。電腦壞了不怕、改壞了可以回到昨天、還能跟同學一起做。

Your folder becomes a project with full history. Laptop dies? Fine. Broke something? Roll back. Want a teammate? Easy.

🚀 03 · Publish

讓別人真的用得到

Get it into people's hands

網站 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.

01 Agentic Coding · 1 / 3

什麼是「跟 AI 一起寫程式」?

What is agentic coding?

名詞小教室JargonAgent

會「自己動手」的 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.

你的新角色Your new role導演 / 產品負責人Director / Product owner

你決定「要做什麼、做成什麼樣、好不好用」。這三件事 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.

01 Agentic Coding · 2 / 3

第一次,從這 5 步開始

Your first time: 5 steps

STEP 1

開一個空資料夾

Make an empty folder

這是專案的家。例如桌面上的my-first-site

This is the project's home — e.g. my-first-site on your desktop.

STEP 2

打開 AI coding agent

Open an AI coding agent

入門推薦 Cursor 或 Claude Code,把剛剛那個資料夾打開。

Cursor or Claude Code are good starters. Point it at that folder.

STEP 3

用人話描述你要什麼

Describe what you want

越具體越好。範例看下面。

The more concrete, the better. See the example below.

STEP 4

自己打開來看

Open it and look

它會給你一個網址或檔案。一定要親眼確認。

It'll give you a file or a link. Always check with your own eyes.

STEP 5

說哪裡不對,再來一次

Say what's wrong, repeat

「標題太小」、「顏色換深藍」。產品就是這樣一輪一輪磨出來的。

"Title's too small", "make it navy". Products get built one round at a time.

第一句話可以這樣說A good first prompt

「幫我做一個單頁網站,介紹我的高中社團。深色背景,最上面是社團名稱和一句標語,中間三張卡片介紹我們的活動,最下面放 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."

✗  「幫我做個網站」  太模糊,你會拿到一個你不想要的東西。 ✗  "Make me a website"  — too vague; you'll get something you didn't want.
01 Agentic Coding · 3 / 3

指揮 AI 的 5 個原則

5 rules for directing an AI

RULE 1

一次只講一件事

One thing at a time

一次丟十個需求,十個都做得普普。小步走,每一步都能檢查。

Ten requests at once means ten mediocre results. Small steps you can check.

RULE 2

講「要什麼」,不是「怎麼寫」

Say what, not how

你不用懂技術名詞。說「手機上看,卡片要一排一張」就夠了。

Skip the jargon. "On phones, cards should stack one per row" is enough.

RULE 3

給它參考

Give references

截圖、喜歡的網站網址、配色。給一張圖,勝過講十句。

Screenshots, a link to a site you like, colours. One image beats ten sentences.

RULE 4

每一步都自己驗收

Check every step yourself

它說「完成了」,不代表真的好了。打開、點一點、用手機看一次。

"Done" doesn't mean done. Open it, click around, view it on a phone.

RULE 5

壞掉就整段貼給它

Paste the whole error

紅字錯誤訊息,整段複製貼上,別自己翻譯。它需要原文才能修。

Copy the red error text in full — don't paraphrase. It needs the original to fix it.

要記得的一件事:AI 會非常有自信地寫錯 One thing to remember: AI is confidently wrong sometimes 它不會讀心,也不會說「我不確定」。所以:小步做常存檔自己親眼確認「常存檔」這件事,就是下一章 GitHub 要解決的問題。 It can't read your mind and it rarely says "I'm not sure". So: small steps, save often, verify with your own eyes. That "save often" part is exactly what GitHub — the next chapter — is for.
02 GitHub · 1 / 4

GitHub 是什麼?從資料夾到 Repo

What is GitHub? From folder to repo

一句話: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.

🗂️ Repository

Repo = 專案資料夾 + 完整歷史

Repo = project folder + full history

你電腦上的那個資料夾,上傳到 GitHub 之後就叫一個 repo。一個專案一個 repo。

That folder on your laptop, once it lives on GitHub, is a repo. One project, one repo.

⏱️ 為什麼要用Why bother

改壞了,可以回到昨天

Broke it? Go back to yesterday

每次存檔都是一個「回得去的點」。昨天還能動、今天壞了 —— 一鍵回去。

Every save is a point you can return to. Worked yesterday, broken today? One click back.

🔌 最現實的理由The practical reason

上線工具都直接吃 GitHub

Publishing tools plug into it

第三章要用的 Cloudflare,就是直接讀你的 repo 幫你上線。沒有 repo,路會走得很辛苦。

Cloudflare Pages (chapter 3) deploys straight from your repo. Without one, publishing gets painful.

名詞小教室JargonCommit

一個「存檔點」,附上一句話說明你改了什麼。像遊戲的存檔,但你可以存無限多個,而且每個都回得去。

A save point with a one-line note about what you changed. Like a game save — except unlimited, and every one is restorable.

先講重點Heads up你不用背指令You don't need to memorise commands

用 GitHub Desktop 點按鈕就好,或直接跟 agent 說「幫我 commit 並 push 上去」。

Click buttons in GitHub Desktop, or just tell your agent: "commit this and push it".

02 GitHub · 2 / 4

你只需要記住四個動作

Only four moves to remember

CLONE

複製一份到電腦

Copy it to your laptop

把雲端上的 repo 整包抓下來,開始在自己電腦上做事。

Pull the whole repo down from the cloud so you can work on it locally.

COMMIT

存一個檔案點

Make a save point

做完一小段就 commit 一次,寫一句「加了報名表單」。

Commit after each small chunk, with a note like "added signup form".

PUSH

上傳到雲端

Upload to the cloud

把存檔點推上 GitHub。沒 push,別人看不到、電腦壞了也救不回。

Push your commits to GitHub. No push = nobody sees it, and a dead laptop takes it with them.

PULL

把別人的更新抓下來

Get everyone else's updates

開工前先 pull,確保你手上是最新版。

Pull before you start, so you're working on the latest version.

一天的節奏長這樣 A normal day looks like this 開工先 pull → 做一小段 → commit 存檔 → 再做一小段 → commit → 收工 push就這樣循環。 pull when you start → build a small chunk → commit → build another chunk → commitpush before you stop. That's the whole loop.
⚠️ 絕對不要上傳的東西 ⚠️ Never push these 密碼、API key、個人資料。public repo 是全世界都看得到的,而且刪掉也還留在歷史紀錄裡。不確定就先設成 private Passwords, API keys, personal data. A public repo is visible to everyone, and deleting a file doesn't remove it from the history. When in doubt, make the repo private.
02 GitHub · 3 / 4

怎麼跟同學一起做同一個專案

How to work on one project together

STEP 1 · BRANCH

開一條自己的分支

Open your own branch

像把稿子影印一份自己改,怎麼改都不會弄壞正本。

Like photocopying the draft to edit — the original stays safe no matter what.

STEP 2 · PULL REQUEST

說「我改好了,來看一下」

Say "I'm done, take a look"

PR 會列出你改了哪幾行,大家可以在上面留言討論。

A PR shows exactly which lines changed, and everyone can comment on it.

STEP 3 · REVIEW

隊友看過、給意見

A teammate reviews it

不是挑毛病,是多一雙眼睛擋掉低級錯誤。

Not nitpicking — a second pair of eyes catching silly mistakes.

STEP 4 · MERGE

合併回正本

Merge it into main

按下 Merge,你的改動就正式進到主線了。

Hit Merge and your work is officially part of the project.

名詞小教室JargonMerge Conflict

兩個人改到同一行時,電腦不敢自己決定要留誰的,就會停下來問你。不是壞事,選一個留下來就好。

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.

實務建議In practicemain 永遠保持能動Keep main working

main(主線)上的版本,要永遠是「打開就能跑」的。實驗性的東西都留在自己的 branch 上。

Whatever's on main should always run. Keep experiments on your own branch.

02 GitHub · 4 / 4

一張圖看懂:東西存在哪、別人看到的是哪一份

One picture: where your work lives, and which copy people see

你的電腦 · LOCALYour laptop · LOCAL GitHub · 雲端GitHub · CLOUD 對外 · PUBLICPUBLIC
💻 你 + 你的 agent💻 You + your agent 在這裡寫程式、改東西、先在自己電腦上看效果。 Where you write code, change things, and preview it locally.
💻 Rick 的電腦💻 Rick's laptop 他也會 pull 下來看、幫你改、再 push 回去。 He pulls it down too — reads it, fixes things, pushes back.
🐙 你的 repo(main)🐙 Your repo (main) 唯一的真相來源。誰的電腦壞了都沒差,東西在這裡。 The single source of truth. Laptops can die; this doesn't.
☁️ Cloudflare Pages☁️ Cloudflare Pages 把 repo 裡的東西,變成一個真的網址。 Turns what's in the repo into a real URL.
🌍 打開網址的人🌍 Anyone with the link
最常見的「我明明改了啊」 The classic "but I did change it" 別人看到的永遠是 GitHub 上的那一份不是你電腦裡的那一份。改完沒 push,網站就不會變,Rick 也看不到你改了什麼。 People always see the copy on GitHub, not the one on your laptop. No push means no change on the site — and Rick can't see what you did either.
03 Publish · 1 / 3

把網站發佈上線:5 分鐘、免費

Publish a website: 5 minutes, free

STEP 1

程式碼推上 GitHub

Push your code to GitHub

第二章做的事,這裡就派上用場了。

This is where chapter 2 pays off.

STEP 2

註冊 Cloudflare

Sign up for Cloudflare

免費、不用信用卡。進 Workers & Pages。

Free, no credit card. Open Workers & Pages.

STEP 3

連到你的 GitHub

Connect your GitHub

選 Connect to Git,挑你剛剛那個 repo。設定通常不用改。

Choose Connect to Git and pick your repo. The defaults usually just work.

STEP 4

按 Save and Deploy

Hit Save and Deploy

等一分鐘,你就有一個網址:你的專案.pages.dev

Wait a minute and you get a real URL: yourproject.pages.dev.

STEP 5

之後都自動更新

Updates are automatic

以後只要 push,網站就自己重新上線。不用再進 Cloudflare。

From now on, every push redeploys the site by itself.

名詞小教室JargonDeploy(部署)Deploy

把你電腦裡的檔案,放到一台 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.

想要自己的網址Want your own domain約 NT$300–500 / 年~US$10–15 / year

買一個像 myclub.com 的網域,在 Cloudflare 貼上去就能綁定。不買也沒關係,免費網址一樣能用。

Buy something like myclub.com and connect it in Cloudflare. Totally optional — the free URL works fine.

🤖 這五步,直接叫 agent 陪你做 🤖 Do all five steps with your agent 你不用記每個按鈕在哪。開著 agent,跟它說「幫我把這個專案推上 GitHub,再部署到 Cloudflare Pages」它會帶你一步一步做完。卡住就把畫面或錯誤訊息貼給它。 You don't have to memorise where every button is. Keep your agent open and say "push this project to GitHub, then deploy it to Cloudflare Pages" — it walks you through the whole thing. Stuck? Paste the screen or the error back to it.
03 Publish · 2 / 3

把 iOS App 上架:比網站慢,而且要排隊

Ship an iOS app: slower, and there's a queue

你需要什麼What you need 一台 Mac 和免費的 Xcode開發者帳號不用自己買:PANO 開放 ARTZY 的 Apple Developer Program 給你用,跟 Rick 要一個 App Store Connect 邀請,用你自己的 Apple ID 接受,就能直接上傳。(自己買要 US$99 / 年) A Mac and the free Xcode. You don't need to buy a developer account — PANO gives you access to ARTZY's Apple Developer Program. Ask Rick for an App Store Connect invite, accept it with your own Apple ID, and you can upload directly. (Buying your own costs US$99 a year.)
🤖 怎麼做🤖 How 每一步都叫 agent 陪你做。Xcode 的設定、憑證、上傳指令,你不用先看懂。把畫面和錯誤訊息貼給它,它會告訴你下一步點哪裡。 Do every step with your agent. Xcode settings, certificates, upload commands — you don't have to understand them first. Paste the screen and the errors back to it and it tells you what to click next.
STEP 1 · Build 在 Xcode 把 App 打包成一個 build,上傳到 App Store Connect(蘋果的後台)。 In Xcode, archive your app into a build and upload it to App Store Connect (Apple's dashboard).
STEP 2 · TestFlight 先給朋友試用。寄邀請連結,他們就能在手機上裝來玩。這步不用完整審核,是找 bug 最快的方式。 Let friends try it first. Send an invite link and they can install it on their phones. No full review needed — the fastest way to find bugs.
STEP 3 · 上架素材Store assets App 名稱、1024px 圖示、幾張手機截圖、一段介紹、還有一個隱私政策網址(這是必填的,用第一章做的網站放就好)。 App name, a 1024px icon, a few screenshots, a description, and a privacy policy URL (mandatory — host it on the website you built in chapter 1).
STEP 4 · Review 送審後由真人審查,通常 1–3 天被退件很正常,改完再送就好。 A real person reviews it, usually within 1–3 days. Getting rejected is normal — fix and resubmit.
最常被退件的四個原因 Four most common rejection reasons ① 功能沒做完、一打開就閃退 ② 只是把網站包起來,沒有 App 該有的價值 ③ 沒放隱私政策 ④ 要登入卻沒附測試帳號給審核員。 ① Unfinished features or crashes on launch ② Just a website in a wrapper with no app-like value ③ Missing privacy policy ④ Login required but no test account given to the reviewer.
03 Publish · 3 / 3

先做網站,還是先做 App?

Website first, or app first?

網站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.
給第一次做產品的你:先做網站版 If it's your first product: start with the website 先用網站驗證「真的有人要用」,確定有人用了再做 App。不是因為錢,是因為 App 改一版要重新送審,網站改完一分鐘就上線。上線那天不是終點,是起點。接下來一週做三件事:發給 20 個真人用看有多少人回來問三個人哪裡卡住 Validate demand with a website first, then build the app. Not because of money — because an app update goes back through review, while a website is live one minute after you push. Launch day is the start, not the finish — in week one, do three things: get it to 20 real people, see how many come back, ask three of them where they got stuck.
帶走這一頁就夠了The only page you need to keep

一頁小抄

One-page cheat sheet

01 · 跟 AI 一起寫程式Agentic Coding

  • 一次只講一件事
  • One request at a time
  • 講「要什麼」,不講「怎麼寫」
  • Say what, not how
  • 給截圖和參考網址
  • Give screenshots and reference links
  • 每一步自己打開來看
  • Check every step yourself
  • 錯誤訊息整段貼回去
  • Paste errors back in full

02 · GitHub

  • Repo = 資料夾 + 歷史
  • Repo = folder + history
  • 開工 pull、收工 push
  • Pull when you start, push when you stop
  • 做完一小段就 commit
  • Commit after every small chunk
  • 協作走 branch → PR → merge
  • Collaborate via branch → PR → merge
  • 密碼和 key 絕對不上傳
  • Never push passwords or keys

03 · 發佈上線Publish

  • 網站:GitHub → Cloudflare → 有網址
  • Web: GitHub → Cloudflare → live URL
  • 之後 push 就自動更新
  • Every push redeploys automatically
  • App:Mac + Xcode +ARTZY 開發者帳號
  • App: Mac + Xcode + ARTZY's dev account
  • 先用 TestFlight 給朋友試
  • Test with friends via TestFlight first
  • 審核 1–3 天,被退很正常
  • Review takes 1–3 days; rejection is normal
  • 每一步都叫 agent 陪你做
  • Do every step with your agent

今天就先做出一頁

Ship one page today.

不用等到會寫程式,也不用等到想法完美。開一個資料夾、跟 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.

做出來Build 存起來Save 發出去Publish 再改一輪Repeat
← → 切換 · 點畫面前進