TC

如何使用 Claude Code 2.0 讓網站提升 10 倍

#AI 工具
2026-11-03 11:357 分鐘 閱讀

內容介紹
提問

這段影片示範如何將 Claude Code 2 與 Higgsfield 結合，用來打造視覺豐富、互動性強的網站。 影片展示了兩個範例專案——一個以 Formula 1 為主題的網站，以及一個以足球為主題的發佈頁面——這些都是透過詳細提示詞、圖片／影片生成，以及模組化的側邊對話建立而成。 這個教學強調使用截圖、檢查點與反覆修改來優化版面、動畫和效能，同時也說明了如何透過清楚的故事、具體的區塊、精確的風格設定，以及對應避免事項的指示，來構建有效的提示詞。 最後，影片將這些網站部署到 Vercel，並鼓勵觀眾使用這些工具與提示詞來創作自己的專案。

關鍵信息

  • Claude Code 2 擁有重新設計的介面，並且被宣稱在建立網站和互動式專案方面更加容易。
  • Claude 可以編寫程式碼並處理動畫，但對於寫實風格圖片和電影感影片，它是透過 MCP 連接器與 Higgsfield 搭配使用。
  • 設定流程涉及在 Claude Code 2 中將 Higgsfield 新增為自訂連接器，讓此工具可以存取像是影片、圖片和語音生成器等模型。
  • Claude Code 2 使用嵌套工作階段，讓一個工作階段可以產生視覺效果，而另一個工作階段同時建置網站，並以待辦清單追蹤任務。
  • 會話可以彼此溝通，而並排分割視圖有助於同時監控多項任務，且不會讓主要聊天畫面變得雜亂。
  • 第一個示範專案是一個虛構的 F1 主題網站，主角是 Theo Varga，特色包括頭盔揭示效果、賽事時間軸，以及獎盃／奪冠收尾效果。
  • 創作者使用截圖和提示來優化位置、動畫和視覺效果，顯示出反覆回饋能提升最終成果。
  • 檢查點讓使用者可以透過連按兩次 Escape 鍵返回較早的狀態，使得實驗更安全且更容易。
  • 第二個示範專案是一個名為 Strike One 的虛構足球首發頁面，特色包括一顆會變形的 3D 球、隨捲動觸發的射門，以及一個點球迷你遊戲。
  • Higgsfield 提供視覺素材和特效，而 Claude 負責程式碼；創作者強調，將兩者結合能產生令人印象深刻的結果。
  • 側邊聊天可透過壓縮媒體和延遲載入元素來優化效能，這樣能提升頁面速度而不改變外觀。
  • 講者分享了一個提示詞公式：先定義品牌故事，描述使用者旅程，指明每個部分由哪個工具處理，列出確切的顏色與字體，並詳述每個區塊的動畫效果。
  • 影片建議避免使用看起來很「AI 風格」的通用設計模式，例如漸層文字、被過度使用的字體、滿牆的小字，以及老套的行銷套語。
  • 主要結論是：當想法已經很明確時，一次性提示效果最佳；但當概念仍在演變時，逐段提示則能提供更多控制。
  • 影片最後呼籲大家使用 Higgsfield，複製免費 School 社群中的提示詞，並訂閱以獲得更多內容。

時間軸分析

內容關鍵字

Claude Code 2

Claude Code 2 被呈現為一款經過全面重新設計的工具，具備全新的介面、改進的聊天工作流程、巢狀工作階段、待辦事項追蹤、檢查點以及側邊聊天。 影片展示了它如何能更有效率地用來建立並完善互動式網站。

希格斯場

Higgsfield 被介紹為與 Claude Code 2 連接的視覺媒體引擎。 它提供對圖像、影片、3D 和語音 AI 模型的存取，並用來生成僅靠 Claude 無法創造的效果。

互動式網站建立

這段影片示範了如何透過以提示詞為基礎的開發，建立兩個互動式網站：一個是為 Theo Varga 設計的 F1 主題網站，另一個是名為 Strike One 的足球發佈頁面。 這個工作流程結合了設計提示詞、動畫、視覺效果以及部署。

嵌套會話與側邊聊天

一個主要的功能亮點是 Claude Code 2 能夠同時執行多個專注的工作階段。 一個工作階段負責視覺生成，另一個負責建立網站，而側邊聊天則讓使用者在不打斷主要任務的情況下獲得回饋或建議。

檢查點編輯

Claude Code 2 支援檢查點，讓使用者在出現問題時可透過退出指令回滾變更。 這使得在優化網站和動畫時，實驗過程更加安全，也更加容易。

F1 動畫體驗

第一個專案是一個以 F1 為主題的互動頁面，包含頭盔、游標觸發的視覺效果、滾動賽車動畫、3D 頭盔、獎盃展示序列，以及遙測風格的細節。 講者調整了位置與時間點，以改善最終成果。

足球啟動頁面

第二個專案是一個足球網站，包含 3D 球體、多種變形狀態、滾動射門動畫，以及點球大戰小遊戲。 講者也透過壓縮媒體與延遲載入元素來最佳化效能。

Web 設計的提示詞工程

影片強調了一個有效的一次性提示詞公式：定義品牌故事、使用者旅程、工具角色、精確的顏色與字型、區塊順序，以及詳細的動畫。 它也建議避免像漸層文字和過長文案這類看起來很像 AI 生成的通用模式。

Vercel 部署

在建立足球網站之後，講者將其部署到 Vercel，並使其可公開存取。這個過程被描述為很簡單：展開專案、連接部署，然後點擊傳送。

相關問題與答案

Claude Code 2 是什麼？

Claude Code 2 被呈現為一款重新設計的工具，具備新的聊天介面、改進的工作流程功能，以及更容易建立網站的支援。

Claude Code 2 做得很好的是什麼？

它可以撰寫程式碼、使用程式碼建立動畫，並協助打造互動式網站和網頁體驗。

Claude Code 2 的限制是什麼？

它無法自行生成寫實照片般的影像或電影般的影片。

Higgsfield 在工作流程中是用來做什麼的？

Higgsfield 透過一個連接器，為 Claude 提供存取影像、影片、3D 和語音生成工具的能力。

你如何將 Higgsfield 連接到 Claude Code 2？

你先取得 MCP 連結，然後前往「Customize」，接著點選「Connectors」，新增一個自訂連接器，貼上該連結，登入，允許存取，之後它就會出現在 Claude Code 2 中。

Claude Code 2 展示了哪些新的介面功能？

該介面包含一張用於 Higgsfield 的連接器卡，以及用於上下文、環境和輸出的新卡片。

影片中建立的第一個範例專案是什麼？

第一個專案是為 Theo Varga 製作一個網站，Theo Varga 是一位虛構的一級方程式冠軍。

Theo Varga 網站被要求包含哪些元素？

這項需求包括一頂會在游標下燃燒的頭盔、一條會自行建構的賽道，以及一個結局，使用者可以抓起獎盃並為之競爭。

在第一個專案中，動畫是如何被控制的？

頭盔效果出現在游標下方，而捲動則讓賽車影片前進和後退。

Claude Code 2 的巢狀工作階段有什麼好處？

巢狀工作階段可讓專案的不同部分分別運作，例如一個工作階段負責建立視覺效果，另一個則負責建置網站。

Claude Code 2 中的各個 session 是如何彼此通訊的？

當視覺會話完成一張圖片時，它會向網站會話發送一則訊息，然後網站會話將其加入自身的狀態中。

在 Claude Code 2 中，**checkpoint（檢查點）**是指系統在編輯或操作過程中自動建立的**保存狀態**。 它的作用是讓你在需要時可以**回到某個先前的穩定版本**，以便撤銷錯誤、比較變更，或在出現問題時恢復工作。簡單來說，checkpoint 就像是：- **自動存檔點**- **可回退的版本**- **工作進度的安全備份**如果你想，我也可以進一步說明 Claude Code 2 裡 checkpoint 的**使用方式**或**和 Git 的差別**。

檢查點可讓你在程式碼或對話中返回到先前的某個點，如果出了問題。

影片中建立的第二個網站是什麼？

第二個專案是一個虛構的足球發佈頁面，名為 Strike One。

以下是逐句翻譯成繁體中文：**要求為 Strike One 網站新增哪些功能？**

請求內容包括一個可變形成四種類型的 3D 球體、一個在滾動時飛入球門的射門，以及一個點球大戰迷你遊戲。

足球網站在收到反饋後是如何改進的？

透過壓縮影片和圖片，並且只在使用者捲動到相關位置時才載入元素，該網站已完成最佳化。

Claude Code 2 中的 **side chat**，通常是指一个**与主对话/主任务并行进行的辅助聊天**。它的用途一般是：- **临时讨论某个子问题**，不打断主工作流 - **先探索想法**，再决定是否应用到主任务 - **把调试、解释、头脑风暴**和主线任务分开 - **减少上下文干扰**，让主聊天保持更聚焦如果你是在 Claude Code 2 的具体界面里看到这个词，它很可能表示： **你可以开启一个独立的小对话分支，用来处理某个局部问题，而不影响当前主聊天/主编辑流程。**如果你愿意，我也可以进一步说明：1. **side chat 和主 chat 的区别** 2. **它在 Claude Code 2 里通常怎么用** 3. **和“threads / branches / subchats”有什么关系**

側邊聊天讓你可以在不打斷主要聊天或工作流程的情況下，提出回饋或建議。

側聊天可以提供什麼樣的建議？

它可以指出不必要或過慢的動畫，並提出改進建議。

撰寫一個出色的一次性提示的建議公式是什麼？

請從一個故事開始，說明品牌與使用者旅程，指明每個工具的用途，提供精確的顏色與字體，按順序列出每個區塊，並定義動畫效果。

為什麼你應該在提示中描述不要做什麼？

告訴 Claude 要避免什麼，有助於防止出現千篇一律或帶有 AI 感的設計選擇，例如漸層文字、難以閱讀的大段文字，或被過度使用的措辭。

什麼時候分段建置網站比用一個提示詞一次完成更好？

當想法仍在形成中，或者你希望有更多控制權，並且能在繼續之前先檢視每個部分時，分段建構會更好。

更多視頻推薦

分享至: