Framer 使用教學：從 AI 生成初稿到長期維護一個網站

Framer 適合做官網、到達頁和作品集。思路：AI 出初稿，元件和樣式管統一，CMS 管內容，發布前按清單檢查。

Framer 是視覺化建站工具，做出來的網站可以直接發布。思路：AI 出初稿，元件和樣式管統一，CMS 管內容，發布前按清單檢查。

適合做什麼

產品官網、活動到達頁、個人作品集、履歷網站。

需要好看動效、經常改文案的頁面。

複雜的會員系統、購物結帳這類功能，更適合專門的電商或開發方案。

起步：別從空白頁開始

先用一句話描述網站，讓 AI 生成初稿，再在上面改。

描述寫清三件事：給誰看、要他做什麼、要有哪幾塊內容。

文案可以先在 ChatGPT 或 Claude 裡寫好，再貼進來，比在畫布上邊想邊寫快。

讓網站保持統一

顏色和文字都設成樣式，以後改一處，全站跟著變。

導覽列、頁尾、按鈕、卡片做成元件，不要複製貼上。

每次改完都切到平板和手機寬度看一遍，手機版最容易出問題。

內容交給 CMS

部落格、案例、更新日誌、團隊成員這類重複結構的內容，放進 CMS，用一個範本頁顯示。新增一篇只填表格，不用複製頁面，也不會改亂版面。

長期維護

大改之前先複製一份頁面，或確認能在版本紀錄裡找回。

改完先預覽，確認沒問題再發布。

每月檢查一次：失效連結、過期活動、舊價格。

發布前檢查清單

每個頁面都有自己的標題和描述。

頁面網址用簡短的英文單字。

圖片壓縮過，並寫好替代文字。

綁定自己的網域，表單能正常送出。

關於方案

Framer 的方案按專案計算，升級的是你選中的那一個網站。本站的 Framer 兌換碼可以把一個免費專案升級為 Basic 年付，步驟見商品頁。

想讓 ChatGPT、Claude 記住網站的定位和文風，見 在不同 AI 之間保留記憶。