Claude Code 進階開發：從 .md 架構設定到模組化系統實務|張文騫 Andy|104人資市集

課程對象:想運用 AI 開發更完整的工具或系統，卻不知道如何規劃架構、拆分功能與完成部署的工作者。

商品分類:線上課程

商品標籤:

研發,生產,訂閱制AI職能

你可以學到:

運用 Claude Code，從開發規則設定、程式產生、功能測試到雲端上線，完成 PDF 轉 Word 小工具與雲端會員點餐系統兩個實務專案；掌握從需求規劃、模組化開發、功能測試到 Netlify 雲端部署的完整流程，開發出真正能使用及分享的數位產品。

課程資訊:

從小工具到完整雲端系統，運用 Claude Code 打造真正能使用的數位產品！

想運用 AI 開發更完整的工具或系統，卻不知道該如何規劃架構、拆分功能與完成部署嗎？

這堂課將由 Andy 講師帶領學員深入使用 Claude Code，從開發規則設定、程式產生、功能測試到雲端上線，完成真正可以使用及分享的數位產品。

參與課程前，學員需準備 Claude Pro 以上的付費帳號，並事先下載及安裝 Claude 電腦版應用程式，以便進行後續的環境設定與開發實作。

課程將透過兩項實務案例，帶領學員了解如何運用 Claude Code 解決不同類型的工作需求。

1️⃣第一項實作是 PDF 轉 Word 小工具。

學員將建立一套可以讀取文字型及圖片型 PDF 的轉檔工具，透過 OCR 文字辨識技術，將文件內容自動轉換成可編輯的 Word 檔案。

這套工具可直接在電腦本機執行，檔案不必上傳至外部平台，適合處理合約、報表或其他較敏感的企業文件，降低機密資料外洩的疑慮。

2️⃣第二項實作是雲端會員點餐系統。

學員將從前端網頁開始，逐步建立會員、購物車、下單結帳及管理後台等功能，並串接 API 與 Supabase 雲端資料庫。

完成後，系統與資料都能在雲端持續運作，即使關閉個人電腦，其他使用者仍可正常開啟網頁及使用各項功能。

在開始撰寫程式前，學員會先透過 Plan 模式規劃系統架構，並建立 md 規則文件，清楚定義專案目標、開發方式與 AI 必須遵守的原則。完成規劃後，再切換至 Auto 模式，由 Claude Code 協助安裝套件、建立檔案及產生程式碼。

針對功能較多的大型系統，課程也會介紹模組化開發的概念。學員將學習把完整系統拆分成多個小功能，依序完成會員管理、購物車、訂單結帳與管理後台，並在每個階段進行人工檢查與測試。課程也會說明如何限制 AI 只能操作指定的專案資料夾，避免誤讀或修改其他檔案，提升開發過程中的資料安全。

最後，學員將使用 Chrome 開發者工具，檢查網頁在手機、平板與電腦上的顯示效果，完成響應式網頁設計測試。確認功能正常後，再透過 Netlify 將系統部署至雲端，取得可以公開分享及實際使用的正式網址。

完成課程後，學員將不只是讓 AI 產生一段程式碼，而是能掌握從需求規劃、模組開發、功能測試到雲端部署的完整流程，進一步運用 Claude Code 開發符合工作需求的數位工具與系統。

【課程內容介紹】

一、Claude Code 開發環境準備

・準備 Claude Pro 以上的付費帳號

・下載及安裝 Claude 電腦版應用程式

・建立專案資料夾與開發環境

・限制 AI 僅能操作指定資料夾

二、Plan 模式與開發規則設定

・使用 Plan 模式規劃系統架構

・建立 md 規則文件

・設定專案目標、功能需求與開發原則

・讓 AI 依照統一規則進行後續開發三、AI 文件辨識與資料擷取

三、Auto 模式與 AI 程式開發

・切換至 Auto 模式執行開發任務

・讓 AI 自動安裝所需套件

・自動建立專案檔案與產生程式碼

・透過白話指令調整功能與修正錯誤

四、實作一：PDF 轉 Word 小工具

・讀取文字型及圖片型 PDF

・使用 OCR 技術辨識圖片中的文字

・將 PDF 內容轉換成可編輯的 Word 檔案

・建立可在本機執行的文件轉檔工具

・降低敏感文件上傳外部平台的資安風險

五、實作二：雲端會員點餐系統

・建立點餐系統的前端網頁

・開發會員註冊及登入功能

・建立購物車與下單結帳流程

・製作訂單管理與後台管理功能

・串接 API 與 Supabase 雲端資料庫

六、模組化開發與人機協作

・將大型系統拆分成多個功能模組

・依照開發順序逐步完成各項功能

・在每個階段進行人工檢查與測試

・找出錯誤並透過 Claude Code 協助修正

七、響應式網頁測試

・使用 Chrome 開發者工具進行測試

・確認手機、平板與電腦版顯示效果

・調整不同裝置的版面與操作方式

・完成響應式網頁設計（RWD）

八、Netlify 雲端部署

・將完成的網站部署至 Netlify

・產生可公開瀏覽的正式網址

・確認雲端系統與資料庫正常連線

・讓其他使用者直接開啟及使用系統

課程大綱: