用 Claude AI 打造萬元網站：程式碼生成到上線全攻略
Metics Media 獨家教學，掌握 AI 協作開發，助您高效建置高價值網站，提升接案收入！
這支影片提供了一份使用 Claude Code 建立價值 10,000 美元網站的終極指南。它詳細介紹了如何安裝 Claude Code、透過設計技能提升其功能、撰寫有效的提示、優化網站結果，並最終將網站部署到真實網域。內容涵蓋了網站設計的八個關鍵要素，並展示了如何利用 AI 工具實現專業級的網站設計，非常適合希望利用 AI 提升網站開發效率和設計品質的開發者和內容創作者。
重點摘要
- 影片展示了如何使用 Claude Code 建立一個價值 10,000 美元的專業網站。
- 詳細解釋了構成高價值網站的八個關鍵要素，包括觀點、排版、色彩和動態設計。
- 示範了如何安裝和使用 Claude Code 桌面應用程式，並切換到程式碼模式。
- 介紹了如何安裝「前端設計」和「UI-UX-Pro-Max」這兩個設計技能來提升 AI 的設計能力。
- 強調了撰寫具體提示的重要性，並展示了如何利用參考圖來引導 AI 設計方向。
- 示範了如何使用 ElevenLabs 等 AI 工具生成客製化圖像和影片，並將其整合到網站中。
- 展示了如何透過迭代和精修，將網站從專業級提升到昂貴級的視覺和互動體驗。
- 提供了將網站部署到 Hostinger 上的步驟，並解釋了選擇合適主機方案的重要性。
章節
引言：用 Claude Code 打造 $10K 網站
影片介紹了如何使用 Claude Code 建立一個價值 10,000 美元的網站，並展示了多個由 Claude Code 建立的網站範例。
什麼是 Claude Code？$10K 網站的八個要素
解釋了 Claude Code 是一個 AI 程式碼助手，並列出了區分 10,000 美元網站和 200 美元網站的八個關鍵要素。
Claude Code 安裝與設定
說明了 Claude Code 與傳統網站建構工具的差異，並逐步指導觀眾如何安裝 Claude Code 桌面應用程式並設定工作區。
新增設計技能
介紹了如何安裝「前端設計」和「UI-UX-Pro-Max」這兩個設計技能，以提升 Claude Code 的設計輸出品質。
參考資料與建構提示
強調了提供具體設計參考資料的重要性，並展示了如何撰寫一個詳細的提示來引導 Claude Code 建立網站。
首次揭露與初步評估
展示了 Claude Code 根據提示建立的網站初稿，並根據 10,000 美元網站清單的標準進行初步評估。
圖像與預製元件
解釋了如何使用 AI 圖像和影片生成工具（如 ElevenLabs）來創建客製化視覺資產，並將其整合到網站中以提升視覺效果。
精修與重新評估
示範了如何透過迭代和精修，解決網站設計中的問題，並提升網站的互動性和排版，使其達到 10,000 美元的標準。
部署到自訂網域
指導觀眾如何將完成的網站部署到 Hostinger 上，包括選擇主機方案、註冊網域和上傳網站檔案。
適合對象：希望利用 AI 提升網站開發效率和設計品質的開發者和內容創作者。