用 Vibe Coding 打造你的攝影師作品集

01這和範本挑選工具有什麼不同

範本圖庫只會給你看一個完成的設計，問你喜不喜歡。這個工具往下深入了一層：下面六種設計方向，各自都根據一個真實、運作中的攝影師作品集，並且是實際檢視過的（截圖、實際版面、計算後的顏色、計算後的字型），而不是有人為了在色票上好看而編出來的配色。以 Editorial 方向為例，它用 EB Garamond，因為那正是一位真實時尚攝影師網站所用的字型，是直接檢視頁面比對出來的。

在這個工具所參考的真實網站中，有兩種模式幾乎處處可見，而且已經內建在這裡的每一種設計方向裡：導覽列藏在單一個漢堡圖示後面，沒有看得見的連結清單，連桌機版也一樣；以及一次只放一張大圖，而不是網格。整個介面的顏色幾乎為零：顏色由照片提供，而不是由介面提供。

02最後你會拿到什麼

一份結構完整的提示詞，涵蓋整體方向、精確的十六進位色碼、字型名稱與搭配、頁面清單、導覽行為、圖庫版面與照片外框、要納入哪些功能、附有實際成本取捨的主機建議，以及一組固定的建站品質要求（可讀取的替代文字、響應式斷點、不寫死機密資訊、延遲載入圖片）。把它貼到你慣用的 AI 程式碼應用程式，它就掌握了開工所需的一切。

03從提示詞到上線網站：完整流程

提示詞是設計說明，不是終點線。從複製它，到擁有一個能印在名片上的真正網址，中間的每一步都在這裡，免費或幾乎免費。

複製提示詞，並開啟一個 AI 程式碼應用程式

Claude、Cursor、Claude Code、Windsurf 或 Replit 的 AI 代理都可以，只要能替你寫檔案、存檔案的都行，不是只能聊天。如果你從沒用過，claude.ai 或 Replit 這類瀏覽器版的選項不用安裝：把提示詞貼成第一則訊息就好。

讓它去建，然後真的看看它做出了什麼

請它把網站建成靜態 HTML/CSS/JS（或提示詞中主機區段指定的任何形式），並給你預覽。往下走之前，先檢查提示詞要求的六件事（顏色、字型、圖庫行為、導覽、外框、頁面）。現在改掉不對的強調色，比等照片都接上之後再改便宜得多。

換成你真正的照片、自我介紹與聯絡資訊

把每一張預留圖片和每一行填充文字都換掉。請你的 AI 應用程式邊做邊替每張照片寫出真正、具體的 alt 屬性，不是「image1.jpg」，而是一段真正的描述，因為這既是無障礙的要求，也能小小提升 SEO。這時也要再確認一次，聯絡表單真的指向你會查看的電子郵件地址。

部署到免費主機

如果你選了「Static & free」方案，請你的 AI 應用程式帶你把專案資料夾或 GitHub 儲存庫，連到上方選單「主機」頁面中的其中一個主機。四個都會在你每次推送變更時自動建置與部署；一旦連上，就不需要手動上傳。

連接自訂網域（可選，但很值得）

免費的子網域（像是 yourname.netlify.app）一開始用就很好。等你準備好用 yourname.com 時，只要買個網域再做一次 DNS 變更，後面會詳細說明。

04該用哪一個免費主機？

這些主機都能讓靜態網站免費上線，附免費 HTTPS，而且免費方案的額度，輕鬆就能涵蓋個人作品集的流量。免費方案的限制常常更動，所以請把「主機」頁面上的數字當成大致的輪廓，而不是目前確切的數字，並在你決定之前，先查看各家供應商自己的價格頁面。

請你的 AI 程式碼應用程式陪你完成實際的部署步驟：問它「把這個專案連到 Netlify」是完全正常的要求，它通常能在幾分鐘內帶你完成帳號建立與第一次部署。

05連接自訂網域

網域是一筆小額的年費（依副檔名，通常是每年 $10 到 20），與主機分開計算，主機仍然免費。分成三個部分：

1. 購買網域。Namecheap、Cloudflare Registrar，或 Google Domains 的接班者（Squarespace Domains）。
2. 新增 DNS 記錄。一筆 CNAME（或 A 記錄），把你的網域指向你的主機，在網域註冊商的後台新增。它在註冊商的表格裡就是兩行：一筆 www 的 CNAME，指向主機給你的位址，例如 your-portfolio.netlify.app；以及一筆裸網域的 A 記錄，指向主機的 IP。
3. 在你的主機中新增。把同一個網域貼到主機的「自訂網域」設定中；HTTPS 會自動配置好。

「主機」頁面上的每個主機，都有一個「自訂網域」或「網域」分頁，會告訴你要新增的確切記錄：複製進去，到你的註冊商那邊新增，然後等待。DNS 變更通常要幾分鐘到幾小時才會生效，偶爾可長達 24 到 48 小時。如果卡住了，你的 AI 程式碼應用程式可以帶你看你那家註冊商的後台；把設定頁面截圖，問它該點哪裡。看到鎖頭圖示、沒有「不安全」警告：那就是終點線。

06上線前檢查清單

花五分鐘看這份清單，就能抓出大部分讓作品集看起來沒做完的地方。這些檢查項目就是上方選單的「上線前」頁面；邊做邊打勾。

07常見問題