🌟 Lazys Sop
Claude Code 完整教學:不會寫程式也能用 AI 建站、做 App?我實測給你看

Claude Code 完整教學:不會寫程式也能用 AI 建站、做 App?我實測給你看

By Miru
AI工具無程式碼開發AI建站Claude CodeAI助手

「不會寫程式也能建站、做 App?」Miru 老師帶來 Claude Code 完整教學!不只幫你整理檔案、自動化任務,更能用自然語言快速生成網站與應用程式。

老實說,第一次聽到「Claude Code」這個名字,我以為只是 Claude 的某個進階功能,沒太放在心上。

直到我真的打開來玩——才發現,這東西跟我以前用過的所有 AI 工具都不一樣。它不是跟你聊天的 AI,它是幫你「做事」的 AI

這篇文章,我會把我實際操作的流程、踩過的坑、還有一個很多教學都搞錯的關鍵概念,全部告訴你。


Claude Code 到底是什麼?為什麼我推薦非工程師也要認識它?

用一句話說:Claude Code 是一個可以直接操控你電腦的 AI 助手。

一般的 AI(像 ChatGPT、Claude 網頁版)只能「說」,不能「做」。你問它怎麼整理檔案,它給你步驟,但你還是得自己動手。

Claude Code 不一樣,它可以:

我自己用它做過什麼?宣傳活動頁面、隨機抽籤小工具、頻道內容選題報告——這些東西以前不是要花錢外包,就是要學很久的技術。現在,我用自然語言說清楚需求,Claude Code 幫我搞定。


開始之前:你需要準備什麼?

費用: 要使用 Claude Code,至少需要 Claude Pro 方案(每月 20 美元,年繳折扣後約 17 美元)。免費帳號沒有辦法使用。

如果你每天都會重度使用,官方有 Max 方案(100 美元/月),使用額度更大。我個人建議先從 Pro 試一個月,確認真的會用到之後再評估要不要升。

安裝方式:

Claude Code 有兩種進入方式:

  1. 桌面版(入門推薦):前往 claude.ai 下載桌面應用程式,裡面的「Code」標籤就可以開始使用,不需要碰終端機。
  2. 終端機 CLI(進階):用命令列安裝,有更完整的控制能力。

如果你是完全的非工程師,從桌面版的 Code 標籤開始就好,門檻最低、操作最直觀。


實戰教學一:做一個活動宣傳頁面

這是我最常示範給學員看的案例,因為效果最直接、最有衝擊感。

步驟一:設定執行模式

打開 Claude 桌面版,點「Code」標籤,在下拉選單設定 AI 的工作方式:

步驟二:選模型

根據任務複雜度選:

大多數任務用 Sonnet 就夠了。

步驟三:下指令

這是最關鍵的部分。你的指令越具體,結果越接近你想要的。

以宣傳頁面為例,我輸入的是:

「幫我做一個 AI 線下活動的宣傳頁面,主題是『如何把 AI 用在生活的方方面面』。頁面要包含:活動介紹、全天日程安排、時間地點資訊、費用說明,底部有報名表。風格要簡潔專業,主色用深藍配白色。」

然後點「Select folder」,新建一個專案資料夾(比如「AI活動宣傳頁」),開始執行。

過程中如果出現「Trust this workspace」提示,點確認就好——Claude Code 只會操作你指定的那個資料夾,不會跑到其他地方。

步驟四:上傳風格參考圖

如果你有喜歡的網站截圖,可以點「Add files or photos」上傳,告訴 AI「風格參考這個」,生成結果會更符合你的視覺期待。

步驟五:修改迭代

第一次生成的結果通常不會完美,這很正常。

你可以直接輸入修改指令,像是:

「把英雄區塊的背景換成有科技感的深色圖,加一點模糊效果」

或者點介面上的「Select Element」圖示,直接點選頁面上的元素,再針對那個部分下指令,精準度更高。

修改幾輪,直到你滿意為止。


實戰教學二:做一個隨機午餐選擇 App

這個例子是我拿來說明「不只能做網頁,連 App 也能做」的示範。

關鍵技巧:先在 Chat 模式生成詳細需求,再切回 Code 模式執行

直接在 Code 模式丟一個模糊需求,通常品質不穩定。我的做法是:

第一步:在 Chat 模式整理需求

輸入:

「請幫我生成一個詳細的 prompt,讓我可以用 Claude Code 做一個工廠食堂隨機午餐選擇 App。菜單我會提供,每次至少隨機選出 5 道菜,介面要簡潔好看。」

Claude 會問你幾個問題、幫你補齊細節,最後輸出一個完整的需求說明。

第二步:把生成的需求貼進 Code 模式

新建一個資料夾,把需求貼上,這次我選用 Plan mode——讓 AI 先展示執行計畫,確認方向沒問題後,點「Approve」讓它開始寫程式。

不到幾分鐘,一個可以跑的隨機午餐選擇器就出來了。


進階技巧:用 CLAUDE.md 讓 AI 記住你的風格

這是一個很多人忽略的功能,但我用了之後差很多。

CLAUDE.md 是一個你放在專案資料夾裡的設定檔,Claude Code 每次啟動都會讀取它,等於是給 AI 一份「你的工作說明書」。

你可以在裡面寫:

有了這個,不管你讓 AI 做什麼任務,它輸出的內容都會有一致的「你的風格」,而不是通用的 AI 腔。

建立方式很簡單,在 Chat 模式輸入:

「幫我建立一個 CLAUDE.md,描述我的頻道《懶人行銷》的定位、受眾、語氣風格和內容禁忌。」

把生成的檔案存到你的專案根目錄,之後每個相關專案都可以沿用。


連接更多工具:MCP、Skills、Plugins

Claude Code 真正厲害的地方,是它可以和你日常用的工具深度整合。

在 Claude 應用程式的左側「Customize」區域,你可以做三件事:

Connect your apps:把 Claude 連接到 Gmail、Google Calendar、Notion、Slack、Figma、Stripe 等工具。連接後,Claude 就可以直接讀寫這些平台的資料,而不只是給你「怎麼做」的建議。

Create new skills:Skills 是 Markdown 格式的工作說明書,告訴 Claude 怎麼執行特定任務。你可以創建自己的 Skills,讓 AI 學習你獨特的工作流程。

Browse plugins:官方和社群提供的現成解決方案,行銷、人資、工程、法務等各領域都有,按照需求安裝就能用。


下好一個指令的 5 個關鍵

不管做什麼,指令品質決定輸出品質。我總結出這 5 個問題,每次下指令前先回答它們,效果差很多:

  1. 你要做什麼? — 明確說出產出物(一個活動頁面、一個計算工具、一份報告)
  2. 給誰用的? — 說明目標對象,AI 會自動調整語氣和深度
  3. 要達成什麼功能? — 越具體越好,「要有報名表」比「要有互動功能」清楚
  4. 視覺長什麼樣? — 說顏色、風格、佈局,或直接上傳參考圖
  5. 之後可能怎麼改? — 預告一下修改方向,讓 AI 在初版就保留擴展空間

最後說幾句真心話

我推薦你認識 Claude Code,不是因為它很潮,而是因為它真的改變了我的工作方式。

以前需要外包、或者得先學技術才能做的事,現在有很大一部分可以自己搞定。省下來的時間和錢,我可以拿去做更多值得做的事。

但工具本身只是一半,另一半是你能不能說清楚你要什麼。這是我觀察學員操作下來最關鍵的差異——不是技術問題,是表達問題。

常見問題

Q:什麼是 Claude Code?它與一般的 AI 工具有何不同?

A:Claude Code 是一個可以直接操控你電腦的 AI 助手。與 ChatGPT、Claude 網頁版等一般只能「說」不能「做」的 AI 不同,Claude Code 可以直接讀寫電腦上的檔案、生成網站和 App、執行自動化任務,並串接第三方工具,例如 Google 雲端硬碟、Notion 等。

Q:「Claude 桌面版」和「Claude Code」有什麼區別?

A:Claude 桌面版是一個視窗應用程式,有 Chat / Cowork / Code 三個標籤,操作方式是點擊、對話,適合所有人。而 Claude Code 則是一個跑在你電腦終端機(命令列)裡的工具,透過輸入指令操作,適合想讓 AI 直接操控電腦、寫程式的人。Claude 桌面版內的「Code」標籤,其實是讓你在桌面環境下體驗 Claude Code 功能的入口。

Q:使用 Claude Code 需要什麼費用和準備?

A:要使用 Claude Code,至少需要 Claude Pro 方案(每月 20 美元,年繳折扣後約 17 美元)。免費帳號無法使用。安裝方式對非工程師推薦從 claude.ai 下載桌面應用程式,透過裡面的「Code」標籤開始使用,門檻最低、操作最直觀。

Q:非工程師為什麼也推薦認識 Claude Code?

A:因為 Claude Code 能讓 AI 直接操控電腦完成原本需要外包或學習技術才能做到的事。例如,你可以用自然語言說出需求,讓 AI 幫你搞定宣傳活動頁面、隨機抽籤小工具、頻道內容選題報告等,大大降低技術門檻。

Q:作爲非工程師,如何開始使用 Claude Code?

A:首先,你需要有 Claude Pro 方案。然後前往 claude.ai 下載 Claude 桌面應用程式,打開後點擊「Code」標籤。在下拉選單設定 AI 的工作方式(例如「自動接受 edits」),選擇模型(大多數任務用 Sonnet 就夠了),然後輸入你的具體指令,並指定一個專案資料夾即可開始執行。

想製作你的專屬 SOP 嗎?

Lazys Sop 幫你用 AI 自動生成完整標準作業流程

免費開始使用 →