安裝 Claude Code

在你自己的電腦上跑通

學會 Vibe Coding 心法

用對話的方式開發

做出一個真的作品

網頁、Lead Magnet 或心理測驗

讓它上線

拿到公開網址、手機可打開

獨立走下去

結業後能自己做第二個

一個上線的作品

可以傳連結給家人朋友

Vibe Coding 真正的感覺

不是看教學影片，是親手做

遇到問題的肌肉記憶

知道卡住時怎麼自救

一份自學地圖

結業後繼續走的路線

變成專業工程師

那要 6 個月起跳，不是 12 小時

學會所有技術名詞

會用就好，不用背

做出商用級產品

我們做的是可用、不是賺錢機器

不動手就有收穫

實體課的效果在於你親自打字

理解 Vibe Coding 原理

為什麼現在是時候

裝好 Claude Code

在你的電腦真的能跑

完成第一次對話

Hello World 時刻

選定作品方向

三選一鎖死

產出一頁規劃書

帶回家當地圖

0:00–0:40

原理 × 趨勢

0:40–1:20

環境 × Hello World

1:35–2:00

Vibe Coding 心法

2:00–2:30

作品 Brainstorm

2:30–3:00

規劃書 × 作業

寫下來

你曾經想做的一個東西

可能是

一個網頁、工具、測驗、小遊戲

之前為什麼沒做

不會寫程式？太難？沒時間？

這堂課結束

我們把它變成真的

來源

Andrej Karpathy（前 OpenAI、Tesla AI 總監）2025 年提出

意思

跟著感覺走、用自然語言開發

關鍵

不是不寫程式，是不記語法

對新手的意義

過去要半年，現在要半天

目標使用者

這個作品給誰用？

要解決什麼問題

他用了之後能幹嘛？

必備功能

沒有這個就不行的是什麼？

風格感覺

像哪個網站、哪個氣氛？

入門門檻

從 6 個月 → 3 小時

創作主力

從「會寫程式的人」→「會想清楚的人」

作品類型

從「商用產品」→「個人的小東西也值得做」

誤解 1

「AI 會取代工程師」→ 不會，但會放大「能想清楚的人」

誤解 2

「不用懂任何技術」→ 要懂「怎麼看結果對不對」

誤解 3

「一鍵生成完美作品」→ 要迭代，像跟設計師合作

完整的開發環境

不只是 ChatGPT 的對話框

直接改檔案

你看得到它每一步做什麼

接受/拒絕機制

你有最終決定權

新手友善

介面簡單、錯誤訊息清楚

背後是 Claude

目前最會寫程式的 AI 之一

建立檔案

一個 prompt 建完整專案結構

修改程式碼

看 diff、接受/拒絕

執行指令

跑測試、開伺服器、部署

除錯

看錯誤訊息、提出修正

解釋

告訴你每段程式碼在幹嘛

替你想清楚要什麼

需求不清就寫不出正確結果

無中生有

沒告訴它就不知道

修改你沒同意的東西

每個改動都會徵求同意

保證 100% 正確

會有錯，要你驗證

Claude Pro

每月 NT$660，個人用最划算

Claude Max

每月 NT$3,200，重度使用

API 計費

按用量付費，適合偶爾用

這堂課建議

Pro 訂閱，夠用、不怕超支

Terminal（終端機）

打指令的地方

Node.js

執行環境

VS Code

編輯器，看程式碼

Git

存檔系統

GitHub

把存檔放雲端

本質

就是「文字版的 Finder / 檔案總管」

好處

快、精準、可以自動化

為什麼用它

因為 Claude Code 跑在裡面

新手友善嗎

一開始怕，3 天後愛用

定位

程式碼編輯器

類比

像 Word 之於文字，但給程式碼

為什麼用它

看 Claude Code 改了什麼

免費

微軟出的，跨平臺

一句話

存檔點系統

類比

像電玩遊戲的存檔，可以回到任何一個存檔點

為什麼重要

改壞了可以還原

GitHub

把存檔放到雲端，還能跟人協作

現在看

五個名詞，聽起來複雜

實際上

每個工具只要會 2-3 個指令

流程會熟

做第二個作品就很順了

今天只需要

照 SOP 走，不懂的先打開

Step 1

確認你的作業系統

Step 2

裝 Node.js

Step 3

裝 Claude Code

Step 4

裝 VS Code（如果還沒有）

Step 5

驗證全部都好了

Mac 使用者

macOS 12（Monterey）以上建議

Windows 使用者

Windows 10/11 都可以

電腦記憶體

8GB 以上最順

儲存空間

至少 5GB 可用

網路

穩定的寬頻

方法 1

按 ⌘ + 空白鍵 → 打「terminal」

方法 2

Launchpad → 其他 → 終端機

你會看到

一個黑色（或白色）視窗，游標在閃

不要緊張

這是正常的

一句話

Mac 上的軟體商店（用指令的版本）

為什麼需要

接下來的 Node.js 要用它裝

安裝過程

會要你輸入 Mac 密碼

打字看不到

正常的，繼續打就好

安裝完成

照螢幕指示設定 PATH

一句話

讓 JavaScript 可以在你電腦跑的執行環境

為什麼需要

Claude Code 是用 Node.js 寫的

多大

大約 50MB，很快

驗證

裝完打 node -v 會看到版本號

npm

Node 的套件管理器（剛剛隨 Node 裝好了）

install -g

全域安裝（所有專案都能用）

@anthropic-ai/claude-code

就是 Claude Code 本體

要等一下

約 30 秒到 2 分鐘

成功

顯示一串版本號（例如 2.0.x）

失敗訊息 1

command not found → PATH 沒設

失敗訊息 2

permission denied → 前面加 sudo

解法

出錯時直接把訊息給我看

第一次啟動

會自動開瀏覽器

登入方式

用你的 Anthropic 帳號

需要什麼

Pro 訂閱或 API Key

成功後

瀏覽器會跳「可以關閉這個分頁」

回到 Terminal

就能看到 Claude Code 的歡迎畫面

網址

https://nodejs.org

選擇

LTS 版本（長期支援）

下載

.msi 檔案

安裝

執行下載的檔案，一路「下一步」

勾選

Automatically install the necessary tools

按 Windows 鍵

搜尋 powershell

右鍵點它

選「以系統管理員身分執行」

為什麼

接下來要安裝全域套件，需要權限

看到什麼

藍色或黑色的視窗

不要怕

就是 Windows 版的 Terminal

PATH 問題

裝完找不到指令 → 重啟 PowerShell

權限問題

一定要用系統管理員身分

防毒軟體

可能擋 npm → 暫時關閉或加白名單

中文路徑

工作資料夾用英文命名（例如 C:\Projects）

網址

https://code.visualstudio.com

下載

對應你的系統版本

安裝

一路下一步

Mac 使用者

會拖到 Applications 資料夾

打開後

會看到歡迎頁

Mac

通常已內建；若沒有，打 xcode-select --install

Windows

到 git-scm.com 下載

驗證

git --version

第一次用

會要你設定名字和 email

node -v

應該看到 v20 以上

npm -v

應該看到 10 以上

claude --version

應該看到版本號

git --version

應該看到 2.x

code -v

可選：VS Code 指令版

選地方

桌面或 Documents 都可以

建資料夾

命名用英文（例如 my-first-app）

用 Terminal 進去

cd 指令

cd 是什麼

change directory，切換資料夾

mkdir

make directory，建立資料夾

cd

change directory，進入資料夾

pwd

print working directory，我在哪？

ls

list，列出這個資料夾裡有什麼

記這四個就夠了

其他都不用背

上方

歡迎訊息和版本

中間

對話區域

下方

輸入框（游標在這）

按鍵盤

開始打字就對了

送出

Enter 鍵

它會說

我要建立 index.html

會列出要做的事

像一份行動計畫

會顯示 diff

綠色是新增的內容

會等你確認

要你按 y 接受或 n 拒絕

這叫做

confirmation flow（確認流程）

它會實際建立檔案

在你的資料夾裡

會告訴你下一步

怎麼打開看效果

通常是

open index.html（Mac）或 start index.html（Win）

或是

直接雙擊檔案用瀏覽器開

1. 說人話

不要假裝自己是工程師

2. 一次一件事

不要一個 prompt 丟 10 個需求

3. 看結果再調整

每次改完都打開來看

4. 看不懂就問

AI 不會嫌你煩

不好

實作一個 responsive navigation with flex layout

好

做一個手機上也好看的導覽列，項目要左右排開

為什麼

你不是工程師，不用裝工程師

關鍵

用你平常跟朋友講話的方式

不好

做一個網頁，要有首頁、關於、作品、聯絡、要用藍色、要有動畫...

好

先做首頁大標題

做完後

再說「現在加上一個按鈕」

為什麼

一次太多、AI 會漏、你也看不懂

每次改完

立刻打開瀏覽器看

刷新

Cmd+R（Mac）或 Ctrl+R（Win）

不對的地方

馬上跟 AI 說

對的地方

commit 存檔

最怕

改了 5 個地方才發現第 1 個就錯了

AI 寫的程式碼

你不懂沒關係

直接問

「這段在做什麼？請用白話解釋」

專有名詞

「flex 是什麼？為什麼要用？」

沒有笨問題

只有沒問的問題

打開檔案

刷新瀏覽器

看效果

像不像你要的

不滿意

跟 AI 說哪裡不對

滿意

繼續下一個

這就是

Vibe Coding 的節奏

Hello World 已經會了

現在要做真的東西

真的 = 可以給朋友看的

不是練習檔

要在 12 小時內完成

範圍要實際

要你自己想要的

不然做不下去

三選一

我幫你篩選

適合

自雇者、創作者、老師、顧問

結構

Hero + 關於我 + 服務 + 聯絡

難度

★★（最簡單）

產出

一頁式、響應式、能給朋友看的作品集

延伸

之後可以改成作品集、部落格

適合

想做個人品牌、要收 Email 名單

結構

Hero + 價值主張 + Email 表單 + 作者介紹

難度

★★★

產出

可以真的收到 Email 的落地頁

延伸

串接電子報工具（ConvertKit / MailerLite）

適合

想做病毒式內容、社群分享

結構

開場 + 題目流程 + 結果頁

難度

★★★（邏輯最多）

產出

5-7 題的互動測驗

延伸

搭配結果分享、帶流量到你的品牌

最快見效

選 A（個人網頁）

商業價值最高

選 B（Lead Magnet）

最好玩

選 C（心理測驗）

選不下來

我幫你決定，決策疲勞會毀掉 Lesson 1

作品名稱

叫什麼

一句話描述

是什麼、給誰、解決什麼

目標使用者

具體到某個人

必備功能 × 3

只能三個

不做的事 × 3

避免擴張

原因

12 小時只夠做 3 個

第 4 個呢

放到「結業後自己做」

第 5 個呢

可能是第 2 個作品

堅持 3 個

是老師的工作

為什麼

避免中途擴張範圍

範例 1

不做登入系統

範例 2

不做資料庫

範例 3

不做多語言

寫下來

貼在桌上

什麼是

用方塊畫出頁面長相

工具

紙+筆（最快）

不求美

只要知道「哪裡放什麼」

每個方塊標註

例如：大標題、按鈕、圖片

目的

AI 有藍圖可以照著做

README

專案的說明書

為什麼寫

之後 AI 可以讀這份當指示

格式

Markdown（.md 副檔名）

Claude Code 可以幫你

把規劃書轉成 README.md

Vibe Coding 的原理

為什麼現在學

Claude Code 跑通

環境完整

第一次對話

Hello World + 4 個練習

四個核心原則

怎麼跟 AI 合作

作品方向鎖定

規劃書完成

主題

骨架 × 核心功能

你會學到

建立真的專案、Git 入門

你會做出

作品的第一版雛形

會卡住的地方

Git 第一次 push

不要怕

這是必經之路

時間

3 小時

重點

環境 + 心法 + 規劃

你帶走的

一個會跑的 Hello World + 一份規劃書

下次見面

開始做真的作品

建立完整的專案結構

HTML + CSS + JS

學會 Git 基礎

commit、push

用 AI 生出第一版雛形

可運作的版本

實作 2 個核心功能

手動打 prompt、親自測試

第一次除錯練習

bug 來的時候不慌

0:00–0:10

上週作業 review

0:10–0:40

檔案結構 × Git 基礎

0:40–1:20

AI 生骨架

1:35–2:30

學員主導：核心功能

2:30–2:50

第一次除錯

README.md

有寫嗎？夠清楚嗎？

參考連結

找到哪些？

卡住的問題

現在問

小練習

做了什麼？

我們先調整

確保方向對

功能太多

超過 3 個 → 砍掉

描述太模糊

「很棒的網站」→「給誰看的什麼網站」

目標使用者

「所有人」→ 具體到一個人

沒寫不做的事

容易擴張

風格沒定

像哪個網站

本質

一個資料夾

裡面有什麼

你的所有檔案

為什麼分開放

不同作品不要互相干擾

檔名規則

英文小寫、用連字號（-）不用空格

不要

中文檔名、特殊符號

index.html

骨架（長什麼樣）

style.css

衣服（什麼顏色、字型）

script.js

動作（按鈕點了幹嘛）

類比

人的骨頭、皮膚、行為

缺一不可

但一開始 JS 可以空著

AI 會寫

你負責說明要什麼

你只要

看得懂大概

範例

看到

就知道是大標題

看到 color: blue

就知道是藍色

這樣就夠了

不用背

html 標籤

整個網頁的開頭

head 區

設定資訊（看不到的）

title 標籤

分頁上顯示的標題

body 區

看得到的內容

h1 和 p

標題（h1）和段落（p）

本質

存檔系統

類比

電玩的存檔點

為什麼重要

改壞了可以還原

跟雲端硬碟差在哪

可以看到「每次改了什麼」

GitHub 是什麼

把 Git 存到雲端

add

把檔案放進「要存檔的籃子」

commit

正式存檔（要寫訊息）

push

把存檔上傳到 GitHub

順序

add → commit → push

記這三個就夠了

其他用到再學

建立

.git 隱藏資料夾

告訴 Git

這個資料夾要開始管理

只做一次

建專案時做

看不見

.git 是隱藏的

不用管它

Git 自己會處理

要簡短

一句話

要清楚

做了什麼

好例子

「加入首頁 Hero 區」

壞例子

「改一下」「update」

未來的你

會感謝現在寫清楚的你

網址

https://github.com

免費

個人使用

註冊

用 email + 使用者名稱

建議

使用者名稱用你的本名或筆名

重要

記住密碼、開二階段驗證

到 GitHub 首頁

右上角 + 號 → New repository

命名

跟本地資料夾同名

Public 或 Private

新手用 Public（之後要部署方便）

不要勾

Initialize with README

按 Create

登入要求

輸入 GitHub 帳號

密碼

不能用網頁密碼，要用 Personal Access Token

解法

用 GitHub CLI（gh auth login）最簡單

或

去 GitHub 設定生成 token

卡住時

直接跟 Claude Code 說

把規劃書準備好

打開 README.md

打開 Claude Code

在專案資料夾裡啟動

大 prompt 來了

這次要一次說完

不違反「一次一件事」嗎

骨架是一次完成的大事

列出要建的檔案

像工頭列清單

問你要不要繼續

確認流程

開始建立

你看到 diff 一個個出現

每個都看

不要急著全部接受

最後

告訴你怎麼打開

綠色

新增的內容

紅色

刪除的內容

白色

沒變的

你的工作

大概看懂，不求細

有問題

問 AI「這段在幹嘛」

1. 打開 index.html

看結果

2. 對不對

有沒有跑出你要的樣子

3. 不對的話

告訴 AI 哪裡不對

4. 對的話

立刻 commit

commit 訊息

「建立初版骨架」

老師會退到一邊

這 55 分鐘是你在做

我在旁邊看

卡住才介入

選一個功能開始

從最重要的那個

不急

一個一個來

最重要的

作品的主角

例如 A 網頁

Hero 區的大標題

例如 B Lead Magnet

Email 表單

例如 C 心理測驗

第一道題目流程

先做主角

其他都是配角

1. 打 prompt

親自打字

2. 看 diff

接受

3. 打開來看

對不對

4. 不對的話

告訴 AI

5. 對的話

commit

不要怕

這很常見

直接說

「這樣不對，我要的是...

給例子

「像這個網站那樣」

或是

「先還原，再這樣做」

AI 會重做

不會生氣

git checkout .

把所有檔案還原到上一次 commit

前提

要先有過 commit

所以

每個功能做完就 commit

這就是 Git 的價值

亂改也不怕

做完第一個

立刻做第二個

一樣流程

prompt → 看 → commit

不要停下來思考太久

感覺對就繼續

有問題再停

順的時候要保持動能

好習慣

每個功能都存檔

訊息

寫清楚做了什麼

例子 1

「加入 Hero 區」

例子 2

「完成關於我區塊」

頻率

寧可多不要少

定義

程式沒有照你預期的跑

來源

你、AI、瀏覽器、網路，都可能

重點

不要慌

流程

看錯誤 → 描述 → 問 AI → 修

會越來越順

除錯是肌肉

瀏覽器

F12 打開開發者工具

Console 分頁

看紅字

紅字就是錯誤

抄下來

有時候 Terminal 也有

Claude Code 的輸出

完整抄

不要自己簡化

1. 錯誤訊息

完整貼上

2. 情境

什麼時候出現

3. 預期 vs 實際

你以為 / 真實情況

有這三個

AI 大概能猜出問題

少一個

就要多問一輪

我會在你程式碼裡

動一個地方

你來看結果

找出哪裡怪

用 Console 看錯誤

描述出來

貼給 Claude Code

看它怎麼修

學到的是

除錯的流程

樣式跑版

CSS 寫錯

按鈕沒反應

JS 事件沒綁

Console 紅字

JS 語法錯誤

圖片破圖

路徑錯

看不到更新

沒刷新（Cmd+Shift+R）

專案結構建立

HTML + CSS + JS

Git 會用了

add / commit / push

第一版骨架

生出來了

2 個核心功能

親自做的

第一次除錯

練習過了

主題

設計打磨 × 除錯

你會學到

讓作品看起來專業

4 大設計原則

結構、層次、留白、一致

RWD

手機也好看

進階除錯

自己能解問題

時間

3 小時

重點

骨架 + 核心功能

帶走

一個可運作的雛形

下次

要讓它有品味

4 大設計原則

建立基本品味

配色與字型

選 2 色 + 1 字型

RWD 完成

手機 / 平板 / 桌面

進階除錯

能自己解問題

細節打磨

看起來像「貴的」

0:00–0:10

作業 review

0:10–0:40

設計 4 原則

0:40–1:20

套用到你的作品

1:35–2:20

RWD 實戰

2:20–3:00

進階除錯

什麼顏色搭什麼顏色

不知道

字型怎麼選

不知道

間距要多少

不知道

看起來還是廉價

不知道為什麼

今天解決

4 個原則就夠

1. 結構

對齊與網格

2. 層次

大小與粗細

3. 留白

不要塞滿

4. 一致

限制選擇

核心

東西不能隨便擺

工具

flex / grid

結果

對齊、整齊、有秩序感

反例

一個東西左邊、一個右邊、高度不一

你看得出差別

但說不出為什麼

用 flex

水平/垂直對齊

用 grid

多欄等寬

相同類型元素

邊距要一致

你不用記 CSS

告訴 AI「要對齊整齊」

AI 會幫你

用正確的工具

核心

重要的要大、次要的要小

反例

所有文字一樣大

結果

使用者不知道看哪

好例子

stripe.com 的首頁大標題

差別

10 倍大小

主標題

48-72px

副標題

24-32px

段落

16-18px

小字

14px

差距要拉大

不要 16, 18, 20，要 16, 24, 48

主標題

粗（bold 700）

副標題

中等（500）

段落

一般（400）

強調

粗（600）

原則

一頁不要超過 3 種粗細

核心

不要塞滿

新手錯誤

空間能塞就塞

後果

看起來擁擠、廉價

好的網站

留白很慷慨

留白不是浪費

是呼吸

區塊之間

至少 80px

文字段落之間

至少 24px

按鈕 padding

至少 12px × 24px

左右留白

手機 16-24px、桌面更多

原則

比你想的還要多

核心

限制選擇

顏色

最多 3 個（主色、輔色、中性）

字型

最多 2 個（標題、內文）

圓角

統一大小

原則

限制反而讓畫面更專業

5 種顏色

看起來像花布

3 種字型

看起來不專業

有圓有方

沒有一致感

大小不一的圖示

感覺業餘

解法

砍一半再砍一半

最安全

黑白灰 + 1 個強調色

範例

#1a1a1a 黑 + #f5f5f5 灰 + #2563eb 藍

第二安全

從品牌色延伸

最不安全

自己隨便配

工具

coolors.co

coolors.co

自動生成配色組合

tailwindcss.com/docs/customizing-colors

工程師風

colorhunt.co

熱門配色

radix-ui.com/colors

精緻的配色系統

建議

選一個存起來

60%

中性色（白、淺灰、米）

30%

主色（品牌色）

10%

強調色（按鈕、連結）

比例原則

60-30-10

記這個就好

不會失敗

中文

Noto Sans TC（最安全）

中文變化

Noto Serif TC（有氣質）

英文

Inter（科技感）

英文變化

DM Sans、Space Grotesk

都在

Google Fonts 免費

安全組

Noto Sans TC + Inter

文藝組

Noto Serif TC + DM Sans

科技組

Source Han Sans + Space Grotesk

一頁只用

最多 2 個字型

不要混中日韓字型

會互相打架

全稱

Responsive Web Design

意思

同一個網頁，在手機、平板、桌面都好看

原理

用 CSS media query 判斷螢幕大小

為什麼重要

50% 以上流量來自手機

AI 會幫你處理

但你要知道怎麼測

手機

375-640px

平板

640-1024px

桌面

1024px 以上

最常用

手機優先（mobile first）

意思

先做手機版，再擴大到桌面

打開瀏覽器

Chrome 或 Safari

按 F12

或 Cmd+Option+I

點手機圖示

切換裝置模式

選擇尺寸

iPhone、iPad、Desktop

看結果

一個一個檢查

文字太大撐開

手機上炸版

按鈕跑出螢幕

沒設最大寬度

圖片沒縮放

加 max-width: 100%

間距太擠

手機要更多 padding

解法

讓 AI 幫你修

電腦模擬

只是第一關

拿出手機

連上同個 Wi-Fi

部署後測

Lesson 4 會上線

或用 ngrok

臨時公開本機

實測才準

模擬會漏東西

Lesson 2 學的

貼錯誤訊息給 AI

Lesson 3 學的

自己分析原因

為什麼重要

不能每個小問題都問 AI

培養直覺

熟手的關鍵

Mac Chrome

Cmd + Option + I

Mac Safari

先在設定開啟「開發選單」

Windows

F12

你會看到

分頁：Elements, Console, Network...

最常用

Console 和 Elements

作用

顯示 JS 錯誤和訊息

紅字

嚴重錯誤

黃字

警告

白字

訊息

你的工作

看紅字、複製貼給 AI

作用

看 HTML 結構

點元素

看它的 CSS

可以當場改

試看看效果

不會存檔

只是預覽

超好用

找樣式問題

1. 看 Console

第一步永遠做這個

2. 分治法

一半一半註解掉找問題

3. 問對問題

預期 vs 實際 vs 情境

熟了

大部分小問題自己能解

hover 效果

滑鼠移上去有變化

過渡動畫

不要硬切換

按鈕按下去

有回饋

載入狀態

不要白屏

404 頁

迷路時有著落

是什麼

分頁上的小圖示

很小但很重要

沒有感覺像未完成

做法

生成一個 32×32 的 png

工具

favicon.io 免費

加到 HTML

Claude Code 可以幫你

4 大設計原則

有感覺了

配色字型

會選了

RWD

三個尺寸都好看

進階除錯

能自己分析

細節打磨

質感提升

主題

部署上線 × 交付

你會拿到

公開網址

可以傳給朋友

手機打開

你會學會

改東西後怎麼更新

然後

自學地圖帶你走下去

部署觀念

為什麼要部署、選哪個平臺

第一次上線

拿到 xxx.pages.dev 網址

更新流程

改東西後自動同步

自訂域名

your-name.com（選修）

自學地圖

結業後怎麼走

0:00–0:10

作業 review

0:10–0:50

部署平臺介紹

0:50–1:20

第一次部署

1:35–2:10

更新流程 × 域名

2:10–3:00

自學地圖 × 結業

一個網址

例如 your-name.pages.dev

手機能打開

任何地方的任何人

改東西自動更新

push 一下就好

免費

個人作品不用錢

SSL

https 自動幫你加

Cloudflare Pages

最快、CDN 最好

Vercel

最簡單、介面最友善

Netlify

表單功能內建

GitHub Pages

跟 GitHub 最整合

原因 1

速度最快

原因 2

免費額度最高

原因 3

跟 Cloudflare 其他服務整合好

原因 4

域名管理也可以用 Cloudflare

一站式

省事

網址

https://dash.cloudflare.com/sign-up

用 email 註冊

免費帳號

驗證 email

點信件連結

進 Dashboard

看到一堆產品

找 Workers & Pages

左邊選單

Step 1

登入 Cloudflare

Step 2

Workers & Pages → Create

Step 3

Pages → Connect to Git

Step 4

授權 GitHub

Step 5

選 repo → Deploy

第一次

要授權 Cloudflare 存取你的 repo

選擇

Only select repositories

重要

勾你要部署的 repo

萬一忘了勾

可以之後在 GitHub 設定改

完成後

回 Cloudflare 看到你的 repo

Framework preset

None（純靜態）

Build command

留空

Build output directory

/（根目錄）

Root directory

/

為什麼這樣

因為我們沒用任何框架

會開始建置

進度條跑

大約 1-2 分鐘

看網路狀況

成功

跳出 Success

失敗

點 details 看錯誤

拿到網址

xxx.pages.dev

1. 打開網址

看看作品

2. 用手機開

用手機

3. 傳給朋友

立刻分享

4. 截圖留念

這是里程碑

5. 深呼吸

你做到了

很常見

不要慌

看 Build log

找紅字

第一次錯誤

通常是 settings 沒設對

改 settings

Retry deployment

還是不行

把錯誤訊息給 Claude Code

Build failed

通常是路徑問題

File not found

index.html 不在根目錄

Not found 404

檔案名寫錯

Hard reload

Cmd+Shift+R 強制刷新

還是看舊版

清瀏覽器快取

本機改

用 Claude Code 改

commit

存新版

push

上傳到 GitHub

Cloudflare 自動觸發

新的 deployment

1 分鐘後

網址自動更新

Deployments 頁面

看到新的 build

狀態

Building → Success

時間

通常 1-2 分鐘

完成

網址自動更新

刷新瀏覽器

看到新版

原本

xxx.pages.dev

自訂

your-name.com

為什麼要

專業、好記、品牌

費用

年繳，約 NT$400-1,500

時間

10-20 分鐘設定

Cloudflare Registrar

最便宜、無隱藏費用

Namecheap

介面友善

GoDaddy

知名但貴

Google Domains

已關閉

建議

Cloudflare 一站式

1. 到 Cloudflare Registrar

搜尋想要的域名

2. 看有沒有

有就加入購物車

3. 付款

信用卡

4. 確認

收 email 驗證

5. 完成

在 Dashboard 看到

回 Pages 專案

Custom domains 分頁

Set up a custom domain

輸入域名

自動設定 DNS

因為都在 Cloudflare

等 1-5 分鐘

SSL 會自動生成

完成

your-name.com 能用了

優先順序

作品上線 > 自訂域名

xxx.pages.dev 也是真的網址

別人打得開

域名之後再買

不急

結業後

再照自學地圖做

目標

鞏固第一個作品

行動 1

自己再加 2-3 個小功能

行動 2

找 3 個朋友試用

行動 3

收集真實反饋

行動 4

改掉 1-2 個問題

目標

挑戰第二個作品

選擇

不同類型（例如你做網頁 → 這次做測驗）

時間限制

3 天內完成

不要貪心

範圍更小

重點

驗證你能獨立做

進階 1

學資料庫（Supabase 或 Airtable）

進階 2

串 API（OpenAI、Stripe）

進階 3

買自訂域名

進階 4

SEO 基礎

順序

按你作品需要選

每週一個小作品

Build in Public

建作品集網站

把所有作品放一起

分享過程

社群媒體、部落格

從消費者轉創作者

最大的改變

時間

持續做 6 個月你會驚訝

Claude Code 官方文件

docs.claude.com/claude-code

Anthropic 學習中心

anthropic.com/learn

MDN Web Docs

MDN（HTML/CSS/JS 字典）

Frontend Masters

進階教學

Vista 的部落格

solo.tw

陷阱 1

一直學新工具不做東西 → 做

陷阱 2

做太大 → 小而完整

陷阱 3

完美主義 → 先上線再迭代

陷阱 4

孤軍奮戰 → 找社群

陷阱 5

只看不做 → 動手

你的作品網址

能在手機打開

GitHub repo

公開、有 README

Notion 課程頁

所有筆記都在

能自己更新

push 就自動部署

有下一步

自學地圖在手

練習

用一句話說完

結構

[作品] 讓 [誰] 能夠 [做什麼]

例子

這個測驗讓人 5 分鐘找到適合的創作風格

為什麼重要

之後推廣要用

現在練

講三次

2 週內

訊息 Q&A

卡住時

直接問我

展示作品

歡迎分享到社群 tag 我

推薦朋友

有介紹制度

再訂課

升級版有 Office Hour

謝謝你的信任

一對一課程的成功靠學員

謝謝你的耐心

卡住的時候沒放棄

謝謝你的投入

親手做的才算

現在

拿出手機合照

然後

我們一起慶祝

對象

新手課後複習用

內容

實體課沒講完的細節

結構

5 大主題

建議

當字典用，遇到問題查

也可

照順序再看一次

A. Terminal 新手包

25 招基礎指令

B. Prompt 技巧庫

40 個範例

C. 常見錯誤排解

20 個 Bug 與解法

D. 設計靈感與品味

參考站與資源

E. 結業後進階主題

下一步學什麼

中文

終端機

別名

Command Line、CLI、Shell

本質

打文字指令的介面

怕它沒關係

每個工程師都經歷過

3 天就順

真的

內建的

Terminal.app

推薦替代

iTerm2（更好看）

打開方式

⌘+空白 打 terminal

看到 $ 符號

代表準備好接指令

cursor 閃

等你打字

PowerShell

Windows 10/11 內建

Command Prompt

舊版，不推薦

Windows Terminal

微軟新版，更好用

Git Bash

裝 Git 會送

推薦

Windows Terminal

全名

print working directory

作用

我現在在哪個資料夾

用途

迷路時用

回傳

完整路徑

Mac/Linux

ls

Windows PowerShell

ls 也可 / dir

作用

列出這個資料夾有什麼

ls -la

顯示隱藏檔

最常用

剛進資料夾先 ls

全名

change directory

作用

切換到另一個資料夾

cd 資料夾名

進入

cd ..

回到上一層

cd ~

回到家目錄

全名

make directory

作用

建立新資料夾

mkdir 名字

就建了

命名規則

英文小寫、連字號

不要用空格

會出問題

作用

建立空檔案

用法

touch index.html

Windows 沒這個

可以用 new-item

其實

Claude Code 會幫你建

記住即可

不用常用

作用

清空畫面

快速鍵

Ctrl+L 也可以

用途

畫面太亂時

不會刪東西

只是清螢幕

常用

超好用

作用

看剛剛打過什麼指令

用途

忘記剛才的指令

上下箭頭

也可以翻歷史

Ctrl+R

搜尋歷史

省時

不用重打

Mac

⌘+V 貼上

Windows

右鍵 或 Ctrl+Shift+V

Linux

Ctrl+Shift+V

貼長指令

有時會被截斷

解法

分段貼

Ctrl+C

終止當前指令

Ctrl+D

結束輸入

Esc

Claude Code 專用，中斷 AI

最常用

Ctrl+C

卡死時

按它救自己

open .

Mac：在 Finder 打開當前資料夾

explorer .

Windows：檔案總管打開

pwd

看路徑

用滑鼠

也可以

不丟臉

順手的就是好工具

1. 打錯不會爆炸

頂多顯示錯誤訊息

2. 看不懂可以問

Claude Code 就在旁邊

3. 用多了就熟

跟學騎腳踏車一樣

「會不會把電腦弄壞」

幾乎不會，除非用 sudo + rm

「會不會被駭」

複製陌生指令前先問 AI

「為什麼密碼打不出來」

有打只是沒顯示（安全考量）

「出錯了怎麼辦」

複製錯誤訊息問 Claude

「不會打字快」

Tab 自動補全是好朋友

打一半按 Tab

自動補完

例如

cd my-p 按 Tab → cd my-project/

省時神器

不用打完整名

有多個選項

按兩下列出

熟了超快

真的

cat 檔名

看檔案內容（短檔案）

less 檔名

分頁看長檔案（q 退出）

rm 檔名

刪檔案（小心）

mv 舊 新

改名或搬家

cp 原 目標

複製

是什麼

Terminal 去哪找指令

為什麼重要

裝了 Node 要讓 Terminal 認得

出問題的症狀

command not found

解法

重啟 Terminal 或 source

新手不用懂細節

出問題貼給 AI

3 天

會不害怕

1 週

基本指令熟

1 個月

覺得比滑鼠快

終局

成為你的工具而不是障礙

定義

你給 AI 的指令

核心

把想要的結果說清楚

黃金比例

10% 語法 + 90% 描述

好 prompt

= 具體 + 清楚 + 有脈絡

爛 prompt

= 模糊 + 省略 + 沒重點

1. 情境

我正在做什麼

2. 目標

我想達成什麼

3. 約束

不要做什麼

4. 風格

像哪個網站

5. 驗收

怎麼算完成

具體尺寸

16px、24px、8 的倍數

具體顏色

#2563eb、#f59e0b

具體位置

靠左、置中、右上角

具體效果

fade-in、hover、sticky

具體結構

grid、flex、vertical

錯 1

一次說 10 件事 → 拆開

錯 2

用工程術語 → 說人話

錯 3

沒給脈絡 → AI 猜錯

錯 4

沒驗收標準 → 你不知道對不對

錯 5

不看結果 → 累積錯誤

語法錯

程式寫錯了

邏輯錯

寫法對、結果錯

環境錯

套件沒裝、路徑錯

版本錯

新舊不相容

使用者錯

你自己的誤用

意思

Terminal 找不到這個指令

原因

沒裝 / 沒加 PATH

解法 1

確認裝了 (node -v)

解法 2

重啟 Terminal

解法 3

問 AI 怎麼加 PATH

意思

權限不夠

解法 Mac

前面加 sudo

解法 Windows

以系統管理員開啟

小心

sudo 會要輸密碼

打字看不到

正常的

通常出現

npm install -g 時

原因

npm 全域資料夾權限

解法

用 nvm 管理 Node

或

sudo（不建議）

最好

從頭裝 nvm

意思

埠被其他程式佔用

常見

3000、8080

解法 1

關掉另一個視窗

解法 2

用不同 port

解法 3

kill 佔用的 process

意思

找不到套件

原因

沒裝 / 裝錯地方

解法

npm install 套件名

或

檢查 package.json

還是不行

刪 node_modules 重裝

意思

呼叫了不存在的 function

常因

拼字錯、順序錯、物件是 null

解法

console.log 看物件

或

加 optional chaining (?.)

問 AI

給完整 stack trace

意思

想讀取不存在物件的屬性

常見

陣列沒東西就用 .length

解法

先檢查存在

用 ?.

可選鏈結

例如

obj?.prop?.subprop

意思

跨域請求被擋

情境

前端打別人 API

解法 1

API 要支援 CORS

解法 2

用 proxy

新手常遇

不要一開始學這個

檢查 1

CSS 路徑對嗎

檢查 2

class name 拼對嗎

檢查 3

更精確的選擇器蓋掉了

檢查 4

!important 的問題

Dev Tools

Elements → Styles 看

檢查 1

路徑對嗎

檢查 2

檔名大小寫

檢查 3

檔案真的存在嗎

檢查 4

副檔名對嗎

解法

用相對路徑 ./images/xxx.jpg

檢查 1

事件有綁嗎（addEventListener）

檢查 2

選到對的元素嗎

檢查 3

JS 有在對的時機執行嗎

檢查 4

Console 有錯嗎

最快解

加 console.log 看

原因 1

文字太長沒換行

原因 2

寬度寫死 px

原因 3

忘記 viewport meta

解法

用 %、rem、max-width

測試

Chrome Dev Tools 手機模式

檢查 1

build settings 對嗎

檢查 2

index.html 在根目錄

檢查 3

檔名沒中文空格

檢查 4

路徑用相對的

看 log

找紅字

情境

自訂域名時

等 5-10 分鐘

通常自動解決

還不行

清 DNS 快取

Mac

sudo dscacheutil -flushcache

Windows

ipconfig /flushdns

意思

遠端有你沒有的 commit

解法

git pull 再 push

衝突

手動解決

新手

讓 AI 幫你

最常見

忘記先拉

意思

兩個分支改同個地方

看到

<<<<<<< 和 >>>>>>>

解法

選一邊保留、刪掉標記

commit

存下解決結果

新手

先避免

原因 1

沒存檔

原因 2

沒刷新瀏覽器

原因 3

瀏覽器快取

解法

Cmd+Shift+R 強制刷新

還是沒用

無痕視窗

原因 1

Google Fonts 連結錯

原因 2

font-family 拼錯

原因 3

fallback 字型佔用

檢查

Dev Tools Network 看載入

解法

參考 Google Fonts 官方片段

症狀

找不到 DOM 元素

原因

JS 比 HTML 先執行

解法 1

script 放 body 末

解法 2

DOMContentLoaded

解法 3

defer 屬性

.env 檔

存密鑰、API key

不要 commit

加到 .gitignore

常犯錯

前端不能藏密鑰

public 的東西

大家都看得到

新手

先不要管

培養眼光

看多了就有感覺

建立資料庫

以後有靈感

知道什麼叫好

才知道自己做的夠不夠

每天 5 分鐘

一個月脫胎換骨

比讀設計書快

直接看成果

linear.app

科技 SaaS 的極致

stripe.com

支付的教科書

apple.com

大品牌的細緻

vercel.com

開發者品味

notion.so

產品說故事

brittanychiang.com

工程師作品集的標竿

paco.me

設計 + 創業混血

rauno.me

動畫與互動

leerob.io

開發者部落格

pmarca.substack.com

純文字也很有品味

paulgraham.com

極簡到不能再極簡

daringfireball.net

經典

overreacted.io

設計師等級的工程師部落格

joshwcomeau.com

教學內容的典範

lea.verou.me

技術人的優雅

framer.com

頁面動態的極致

rive.app

動畫工具的自我展示

superhuman.com

貴貴的信箱

raycast.com

工具 app 的行銷頁

tella.tv

影片錄製工具

Sidebar.io

每天 5 個設計連結

Muzli

Chrome extension 每次開新分頁換靈感

Refind

策展型

Designer News

社群討論

訂一個就好

避免資訊過載

coolors.co

自動生成

paletton.com

進階調和

colorhunt.co

熱門配色

loading.io/color

漸層色

uicolors.app

Tailwind 風格

Google Fonts

完全免費

Fontshare

商用免費

usemodify.com

給設計師

fonts.adobe.com

Adobe 訂戶

typography.com

付費專業

fontpair.co

好配對範例

typewolf.com

每日一對

fonts-in-use

真實網站用什麼字型

Google Fonts Knowledge

字型教學

記住原則

標題一種、內文一種

lucide.dev

最乾淨

heroicons.com

Tailwind 團隊出品

phosphoricons.com

最多變體

tabler.io/icons

2000+

選一套

不要混用

unsplash.com

高品質免費

pexels.com

也很好

pixabay.com

多樣

picsum.photos

隨機 placeholder

avoid

iStock 貴

undraw.co

可改色免費

storyset.com

可改色動畫

humaaans.com

人物拼貼

opendoodles.com

手繪風

blush.design

多樣

mobbin.com

App 設計收藏

godly.website

精選網站

siteinspire.com

網站策展

Dribbble

設計師社群

Behance

Adobe 系統

uipatterns.io

常見模式

checklist.design

各種設計檢查表

refactoringui.com

Tailwind 作者的課

Laws of UX

心理學原則

nngroup.com

研究型

codrops.com

CSS 動畫教學

motion.dev

動畫框架

ui.aceternity.com

華麗 UI

magicui.design

Tailwind 動畫

原則

低調 > 華麗

每天一個

存一個好網站

分析一下

為什麼好

記下來

Notion 或 Pinterest

3 個月後

有自己的資料庫

1 年後

品味明顯不同

資料儲存

真的存使用者資料

API 串接

連第三方服務

使用者系統

登入、權限

支付

收錢

部署進階

CI/CD、監控

為什麼要

存使用者的東西

推薦 Supabase

Postgres + Auth + 免費

替代 Firebase

Google 系

替代 Airtable

表單型

學 1 個就夠

不要貪心

OpenAI API

加 AI 功能到你的作品

Stripe

收錢

SendGrid

寄 email

Twilio

發簡訊

Google Maps

地圖服務

為什麼難

要處理安全

推薦 Clerk

最簡單

替代 Auth0

老牌

替代 Supabase Auth

免費

不要自己做

太多坑

React

Meta 出品、最大生態

Next.js

React + 更多功能

Vue

容易入門

Svelte

新潮、輕量

建議

從 Next.js 開始

Tailwind CSS

目前最主流

好處

不用寫 CSS 檔

壞處

HTML 看起來很長

替代

shadcn/ui（基於 Tailwind）

新手

等你熟 CSS 再學

是什麼

JavaScript 加型別

為什麼

錯誤早發現

缺點

學習曲線

時機

你開始做大專案時

現在不用

先用 JS 就好

為什麼要後端

資料處理、安全邏輯

最簡單

Cloudflare Workers

最流行

Node.js + Express

新潮

Hono、Bun

何時學

前端作品做完 2-3 個後

基礎

title、meta description

結構化資料

Schema.org

網站地圖

sitemap.xml

速度

PageSpeed Insights

工具

Google Search Console

Google Analytics 4

最主流

Plausible

隱私友善

Umami

自己架

Vercel Analytics

整合好

看什麼

訪客、停留時間、轉換

圖片壓縮

用 WebP

lazy loading

圖片懶加載

code splitting

分批載入

快取

Service Worker

工具

Lighthouse

為什麼重要

讓所有人用

alt 標籤

所有圖片

對比度

至少 WCAG AA

鍵盤導覽

Tab 能走完

工具

axe、WAVE

為什麼

多語言支援

工具

i18next

策略

/en、/zh-TW 路由

翻譯

找人或用 AI

時機

作品要跨國時

全名

Progressive Web App

能做

離線、推播、安裝到桌面

工具

Workbox

好處

像 App 但免上架

案例

Twitter Lite、Starbucks

為什麼

自動化測試使用者流程

工具

Playwright、Cypress

時機

作品有登入/結帳

成本

寫測試很耗時

報酬

上線後不怕壞

什麼是

兩個版本哪個好

工具

Vercel、PostHog

測什麼

CTA 文案、配色、結構

目標

提升轉換率

時機

有流量之後

Stripe

最主流

Paddle

代收稅

Lemon Squeezy

新興

難度

需要後端

可以學

當你要收錢時

ConvertKit

創作者首選

MailerLite

便宜好用

Beehiiv

現代

Buttondown

極簡

Substack

內建金流

Notion as CMS

最直覺

Sanity

開發者友善

Contentful

企業用

Payload

開源

策略

內容多時才學

Sentry

錯誤追蹤

LogRocket

使用者錄影

Hotjar

行為熱圖

Vercel Logs

Log 檢視

時機

有真實使用者後

找到付費意願

最難的一步

定價

比想像中高

行銷

比作品還重要

社群

長期資產

別忘了

技術只是 20%

第 1-3 個月

把 HTML/CSS/JS 熟

第 4-6 個月

學 React + Next.js

第 7-9 個月

學後端 + 資料庫

第 10-12 個月

開始做 side project

之後

看市場需求

這 106 頁

不會一次讀完

當字典用

遇到問題查

每個月翻一次

鞏固心法

半年後

你會發現自己變了

保持

每週都做一個小東西

Vista 的網站

vista.tw

Vista 的部落格

solo.tw

Email

課前會給你

LINE / Telegram

加好友

未來課程通知

訂閱電子報

你主動找我

帶新作品來看

升級版課程

Office Hour 可用

介紹新學員

互利

社群聚會

不定期舉辦

我永遠在

vista.tw