從一句話到一個跑起來的 App：你的第一個 AI CLI 專案

想像一下。你坐在咖啡廳裡。筆記本上寫滿了 app 點子 -- 習慣追蹤器、記帳工具、閱讀清單。你已經跟朋友描述過這些點子無數次了。你很清楚 app 要做什麼。但是在腦中的想法和螢幕上的 app 之間，有一道牆。那道牆叫做程式碼。你不會寫。而且每次你想學，一打開教學就看到「變數」、「函式」這些詞，然後你就關掉了。

也許你試過 ChatGPT。你打了「幫我做一個習慣追蹤器」，然後它吐了一整面的程式碼。大概是寫得不錯的程式碼。然後呢？放哪裡？怎麼讓它跑起來？這就像有人把一顆引擎遞給你然後說「來，開車吧。」你需要的是一整台車。

這篇文章就是要給你一整台車。

你會在 terminal 裡打一句話。AI 會讀那句話、建立所有檔案、安裝所有需要的東西、啟動 app、然後讓你在瀏覽器裡看到它。你會看到一個能用的習慣追蹤器 -- 真的能用，跑在你的電腦上 -- 不到五分鐘。不需要寫任何程式。

Terminal 是什麼？為什麼你要在意？

在開始之前，先講一下 terminal。你其實已經知道怎麼跟電腦溝通了。你點圖示、拖檔案、按按鈕。那是圖形化的方式。Terminal 是文字的方式。不是點「新增資料夾」，而是打 mkdir new-folder。不是雙擊 app 來啟動，而是打它的名字。

想成傳訊息跟打電話的差別。兩個都能達到同樣的目的。但傳訊息在某些情況下更快，而且你可以一邊做別的事一邊傳。Terminal 一樣。它就是你跟電腦之間的文字對話。

關鍵在這裡：AI 非常擅長處理文字。在 terminal 裡跑的 AI 工具，能做到瀏覽器聊天機器人做不到的事。它們能在你的電腦上建檔案、裝軟體、跑程式、把結果秀給你看。聊天機器人給你文字。Terminal AI 給你能跑的軟體。

Claude Code 是什麼？

Claude Code 是 Anthropic（Claude 背後的公司）做的工具。它住在你的 terminal 裡。你用英文打一個需求，它就在你的電腦上動手 -- 建檔案、寫程式碼、跑程式、修錯誤。它不是那種給你程式碼叫你自己複製貼上的聊天機器人。它是一個幫你做事的 agent。

差別很重要。聊天機器人的模式，你是司機。Claude Code 的模式，你是乘客給方向。「載我去機場」vs「這裡有地圖，右轉、左轉、上交流道。」

第一步：安裝工具

你需要兩個東西：Node.js（可以想成 web app 的引擎）和 Claude Code 本身。

安裝 Node.js

Node.js 是地基。把它想成幫你 app 供電的電力系統。沒有它，什麼都點不亮。

到 nodejs.org 下載 LTS 版本。LTS 代表 Long Term Support -- 意思是「穩定版，不會隨便壞掉的那個。」像裝一般軟體一樣安裝。一路按下一步就好。

驗證裝好了沒，打開你的 terminal：

• Mac：打開「終端機」這個 app（用 Spotlight 搜尋）
• Windows：從開始選單打開「PowerShell」
• Linux：你已經知道 terminal 在哪了

打這行然後按 Enter：

node --version

如果你看到版本號像 v22.x.x，就成功了。如果看到錯誤，代表安裝沒裝好 -- 試著重啟 terminal。

安裝 Claude Code

現在裝 Claude Code 本體。在 terminal 打：

npm install -g @anthropic-ai/claude-code

npm 是用來安裝 JavaScript 軟體的工具。它隨 Node.js 一起裝好了。-g flag 代表「裝在整台電腦上，不是只裝在某個專案裡。」後面那串長名字是 Claude Code 在軟體目錄上的位址。

裝完之後，驗證：

claude --version

你應該會看到版本號。準備好了。

還有一件事：API Key

Claude Code 需要一組 Anthropic 的 API key。這就像一組密碼，讓 Claude Code 可以跟 Anthropic 的伺服器溝通。

1. 到 console.anthropic.com
2. 建立帳號（或登入）
3. 到 API Keys 頁面，建立一組新的
4. 複製 key

你第一次跑 claude 的時候，它會問你要這組 key。貼上去就好。只需要做一次。

第二步：打一句話

重頭戲來了。打開你的 terminal。移到你想放專案的資料夾：

mkdir my-first-app && cd my-first-app

mkdir 代表「make directory」（建立資料夾）。cd 代表「change directory」（進入那個資料夾）。&& 的意思是「先做第一件事，再做第二件事。」

現在，啟動 Claude Code：

claude

你會看到一個 prompt。這就是你跟它對話的地方。打：

Build me a habit tracker web app. I want to add daily habits, check them
off each day, and see a weekly streak counter. Use React and make it look
clean and modern. Then run it so I can see it in my browser.

按 Enter。

然後看著它動。

第三步：看它發生

好玩的部分來了。Claude Code 不會給你程式碼然後祝你好運。它開始動手。你會看到它思考，然後行動。它會：

1. 建立專案。 它跑 npm create vite@latest 或類似的指令來搭建一個 React app。就像蓋房子打地基。

2. 寫程式碼。 它建立檔案 -- App.jsx、HabitTracker.jsx、App.css。你會看到檔案名稱隨著它寫入而出現。每個檔案是 app 的一塊拼圖：一個處理習慣清單，一個處理勾選框，一個負責美觀。

3. 安裝 dependencies。 它跑 npm install。Dependencies 是其他人已經寫好的現成程式碼。你的 app 不需要自己發明日期處理或按鈕樣式。它用別人已經做好的東西。就像用樂高積木蓋東西，而不是自己從木頭削出每一塊。

4. 啟動 app。 它跑 npm run dev。這會啟動一個 local web server -- 一個小程式，把你的 app 提供給瀏覽器。它會給你一個網址，通常是 http://localhost:5173。

5. 告訴你準備好了。 Claude Code 會說類似「App is running at localhost:5173. Open it in your browser.」

打開瀏覽器。在網址列輸入 http://localhost:5173。

它就在那裡。你的習慣追蹤器。在跑。在你的電腦上。來自一句話。

你可以打一個習慣名稱。按「新增」。勾掉它。看連續天數往上跳。這不是一張截圖或一個 mockup。這是真的 app，跑真的程式碼，在你的機器上。

現在那個感覺？那就是重點。

第四步：改成你要的樣子

App 可以用了，但也許你想改一些東西。顏色不對。你想加分類。你想要關掉瀏覽器後習慣資料還在。

回到你的 Claude Code session（它還在 terminal 裡跑著），打：

Change the primary color to a deep teal. Add a "category" field when
creating habits so I can group them. And make habits persist in
localStorage so they survive page refreshes.

Claude Code 會編輯既有的檔案。它不會砍掉重練。它讀它已經寫好的東西、理解結構、然後做精準的修改。就像跟建築師說「在客廳加一扇窗」-- 他們不會把房子拆了。

重新整理瀏覽器。改動就在那裡了。深青色。分類。資料持久化。

你可以繼續。每一個要求都建立在前一個之上。「加一個 dark mode 切換。」「顯示過去一個月的日曆視圖。」「在最上面加一句每天都不同的激勵語。」每一句話都變成一個功能。

剛剛技術上發生了什麼？

你不需要理解這段。但如果你好奇 -- 如果你跟程式碼之間的那道牆開始變矮了 -- 以下是幕後發生的事。

你的 app 是用 React 做的，一個 Facebook 開發的使用者介面工具。React 的運作方式是用資料來描述畫面長什麼樣。「如果有三個習慣，就顯示三行。如果這個被勾掉了，就顯示打勾。」你用英文告訴 Claude Code 規則。它翻譯成 React。

檔案存在你電腦上的 src/ 資料夾裡。你可以用任何文字編輯器打開它們。它們就是文字。App.jsx 是主檔案 -- 它是入口，像房子的大門。其他檔案是裡面的房間。

npm 管理 dependencies。當 Claude Code 跑 npm install 的時候，它從網路下載套件 -- React 本身、開發伺服器、樣式工具。這些存在 node_modules/ 資料夾裡。你不需要看進去。它是水管工程。

開發伺服器（npm run dev）會監看你的檔案。任何東西改了，它自動重新 build app 然後刷新瀏覽器。所以當 Claude Code 改了一個檔案，瀏覽器裡馬上就看得到。

localStorage 是瀏覽器裡面一個小小的儲存空間。關掉分頁資料也會留著。當 Claude Code 加了資料持久化，它寫的程式碼會在你每次勾掉一個習慣的時候把資料存到 localStorage，然後在你打開 app 時把它們讀回來。像一本記得你昨天寫了什麼的記事本。

常見問題排解

打 claude 顯示「command not found」。 安裝沒有完成，或者你的 terminal 需要重啟。關掉 terminal，開一個新的，再試一次。如果還是不行，重跑 npm install -g @anthropic-ai/claude-code。

App 跑不起來。 Claude Code 通常會告訴你錯誤是什麼，然後主動提出修復。直接說「yes」或「fix it」就好。大部分首次執行的錯誤是少裝了 dependencies，Claude Code 知道怎麼裝。

瀏覽器 console 出現錯誤。 打開 Claude Code 把錯誤貼給它。「I'm seeing this error in the browser: [貼錯誤訊息]。」它會讀錯誤、找到 bug、修掉。這其實就是專業工程師每天做幾十次的事。差別在於 AI 幫你讀和修。

API 額度用完了。 Claude Code 用的是 Anthropic 的 API，每次 request 要錢。像這樣的簡單專案，總花費通常是幾美元。到 console.anthropic.com 查你的用量。

接下來可以做什麼

你做了一個習慣追蹤器。一句話變成一個跑起來的 app。但那句話其實可以是任何東西。

「幫我做一個個人書架 app，可以追蹤讀過的書、打分數、看統計。」

「幫我做一個番茄鐘計時器，記錄完成的回合然後顯示每日摘要。」

「幫我做一個食譜整理器，貼網址進去它就能把食譜擷取成乾淨的卡片。」

每一個都是 Claude Code 幾分鐘內能做出來的真專案。有些需要追加幾個 request 才能做到位。「讓卡片可以按評分排序。」「計時器加一個暫停按鈕。」你正在跟一個會做軟體的 AI 對話。對話本身就是程式設計。

這就是大家說的「vibe coding」。你描述 vibe -- 感覺、功能、流程 -- AI 負責實作。你不是一個程式設計師。你是一個產品設計師，剛好有一個超有耐心的工程師坐在你的 terminal 裡。

想更深入了解 Claude Code 在建立專案之外還能做什麼，第一個小時指南介紹了完整功能範圍。如果你好奇 Claude Code 跟其他 AI terminal 工具比起來怎麼樣，AI CLI 工具總覽有全面的比較。

雙窗格的工作方式

等你用習慣了，你會想同時看到 terminal 和瀏覽器。Claude Code 跑在一個窗格。你的 app 在另一個。你打一個 request、看 AI 動手、然後在瀏覽器裡看到結果出現 -- 完全不用切換視窗。

這是使用 AI CLI 工具最自然的方式。左邊是 prompt，右邊是結果。就像在對話，而且你能即時看到對方正在蓋你要求的東西。

如果你發現自己一直在 terminal 和瀏覽器之間切來切去，一個能把兩邊同時顯示的 terminal workspace 可以完全消除那個摩擦。

總結

你裝了 Node.js 和 Claude Code。你打了一句話描述一個習慣追蹤器。Claude Code 建了專案、寫了程式碼、裝了 dependencies、跑起了 app。你打開瀏覽器就看到它在跑。然後你用更多句子做修改。每一句都變成一個功能。

想法跟可以跑的 app 之間那道牆，變得非常矮了。它沒有消失 -- 你仍然需要清楚地描述你要什麼，複雜的 app 仍然需要複雜的對話。但這是第一次，你唯一需要的語言就是你已經會說的。

你有一個 app 點子。現在你有一個 app。