2026年5月21日 下午 12:53
AI 設計DESIGN TOOLS · 2026
QUICK ANSWER
Framer 是設計師專用的網站建構工具，介面像 Figma，輸出是真實上線的網站。2026 年版內建 AI（Wireframer 生草稿、Workshop 生互動元件）、重做後的 CMS 3.0、Logo Shaders、On-Page Editing，讓「設計到發布」在同一個空間完成，不需要 dev handoff。對接案、做品牌站、做作品集、做 Landing Page 的設計師，Framer 能把整個流程縮短到原本的三分之一。
CHAPTER 01 · WHAT IS IT
Framer 一開始不是網站建構工具。它是 React 圈裡有名的 prototyping library，設計師拿它做高擬真的動態原型。後來團隊發現一件事：原型跟正式網站之間，隔的不是技術，是介面。
於是他們把原型工具改寫成正式的網站平台。同一個 canvas、同一套互動邏輯、同一個元件系統，但是按下發布之後，它就是一個真實的、有 SSR、有 CDN、有自動 AVIF 壓縮的網站。
這個轉變讓 Framer 變成一個很特別的存在——它不是把 CMS 包了一層好看的皮給設計師用（像 Wix），也不是給工程師用的視覺化 HTML 寫法（像 Webflow）。它的 DNA 從第一天就是 Figma 那種 design-first 的思考方式，這在 2026 年的工具市場裡是少數。
簡單講：如果你會用 Figma，那 Framer 對你來說不是學一個新工具，是學會把 Figma 直接送上線。
CHAPTER 02 · WHY IT MATTERS
2025 年五月之前，我會把 Framer 歸類成「設計師接案用的快速建站工具」，跟客戶說「我們可以選 Framer 或 Webflow」，然後 70% 客戶會選 Webflow。理由是「比較主流」「找接手的人比較多」「CMS 比較成熟」。
這個結構在 2025 年五月被打破。Framer 連續推出 Wireframer、Workshop、Design Pages、On-Page Editing，接著在 2026 年四月端出 CMS 3.0 大改版跟 Logo Shaders。半年內它做完了一件事——把網站建構流程裡所有「設計師會卡住的地方」，全部用 AI 補起來。
這次更新的意義不是「Framer 加了 AI」，矽谷的工具現在沒一個沒加 AI。意義在於它選擇加 AI 的位置——每一個 AI 功能都在解決「設計師為什麼自己沒法做網站」的具體理由。
TIMELINE · FRAMER 2025-2026
2025/05
Wireframer + Workshop
AI 從 prompt 直接生整頁草稿；Workshop 用對話生互動元件
2025/08
On-Page Editing
直接在已發布頁面瀏覽器裡編輯，不用回編輯器
2025/09
Design Pages
完整 UI 設計直接一鍵發布，設計與正式網站之間沒有交付步驟
2026/03
Auto Translate + Bento
一鍵多語化，Bento 卡片式版型成內建模板
2026/04
CMS 3.0
內容管理整個重做，inline editing、bulk actions、folders、多選
2026/04
Logo Shaders
上傳 SVG/PNG，Gradient 與 Glass 兩種 shader 讓 2D logo 自動變 3D 質感
CHAPTER 03 · HOW IT WORKS
Framer 把網站建構這件事拆成五層，每一層都跟設計師原本的工作方式對齊。
STACK · FIVE LAYERS
01
Design Canvas
跟 Figma 幾乎一樣的視覺編輯介面，auto-layout、components、variants、styles 全有。差別在於每個元件背後都是真實 HTML/CSS，不是檢視層。
02
Interactions & Motion
scroll-triggered animation、hover state、page transition，不寫 code，直接在屬性面板裡設定。Framer 起家就是 motion，這層是同類工具裡最強的。
03
CMS 3.0
2026/04 重做後的內容管理層。可以接 Notion、Google Sheets、Hubspot 同步，支援關聯 collection、inline editing、folder 結構。對部落格、案例庫、產品列表這類動態頁是必備。
04
AI Layer
Wireframer 用 prompt 生整頁草稿、Workshop 用對話生互動元件、AI 寫 CMS 草稿、AI 自動生 alt text 跟 SEO meta，這層在 2025-2026 鋪滿了整個產品。
05
Publishing & Performance
內建 hosting、CDN、SSL、自訂網域、自動 AVIF 圖片壓縮、SSG + Traffic-aware Pre-Rendering。發布是「按一個按鈕」，不是「找工程師處理」。
這五層的設計關鍵在於——每一層的 abstraction 都做在設計師熟悉的位置。canvas 跟 Figma 對齊、CMS 跟 Notion 對齊、AI 入口跟 Cursor、Claude Code 對齊。學一個新工具的痛，有 60% 在「找不到熟悉的隱喻」，Framer 把這個痛拿掉。
CHAPTER 04 · GETTING STARTED
Framer 的上手曲線在 2026 年已經被 AI 壓得很低。會用 Figma 的人，從註冊到第一個 landing page 上線，一個下午就夠。實際路徑是這樣：
第一步，開新專案直接用 Wireframer。不要對著空白 canvas 發呆。寫一句話描述你要的東西，例如「一個攝影師作品集，首頁是英雄圖加四個案例，深色背景、現代字體」，Wireframer 會生出整頁的骨架。然後你開始改。
第二步，改成自己的設計，加上互動。這一步像在 Figma 工作。改字、換圖、調 layout、設 hover、加 scroll animation。卡住的時候按 cmd+K 開 Workshop，描述你要的元件，例如「比較滑桿，左邊是 before、右邊是 after」，Workshop 會直接生出可用的元件丟到你的專案。
第三步，按 Publish。就這樣。Framer 自動接 hosting、CDN、SSL、SEO meta、AVIF 壓縮圖片。要綁自己的網域，在設定裡填 DNS 記錄。整個發布流程的心智成本，比把檔案傳給工程師低。
▼ Framer 官方 CMS 3.0 介紹影片；這次重做的方向是「設計師的 CMS 應該長什麼樣」
CHAPTER 05 · IN PRACTICE
Framer 不是萬用工具。它在某些場景強到很離譜、在某些場景就是不對。把場景講清楚比把功能講清楚重要。
最甜蜜的點。設計師最常被問「你的網站在哪」，然後拖了兩年沒做。原因不是不會設計，是不知道怎麼上線。Framer 把這個阻力歸零。一個週末做完、自訂網域、SSL、SEO 全包，甚至可以做 case study 動態頁串 CMS。
新創公司、SaaS、活動官網。這類案子的特徵是：客戶要「酷一點的」「有動畫的」「Apple/Linear 那種感覺的」，預算抓不到完整的 dev team。Framer 的 motion system 在這個級距裡幾乎無敵，一個設計師可以從 brief 到上線全程跑完。
CMS 3.0 重做之後這塊變得很強。可以把 Notion 當寫稿後台、Framer 當前台呈現，Notion 改一次、Framer 自動同步。設計感比 Ghost、Substack 高一個層級，同時保有 CMS 的彈性。
PM、設計師、研究員的個人 work showcase。CMS collection 把每個 case 存起來，一個動態模板套用全部，新增 case 只要填欄位不用重做頁面。
「設計師最大的時間黑洞不是改稿，是 dev handoff。Framer 在這個位置上把答案改寫了。」
千頁規模的內容站、大型電商、需要複雜後台權限的 SaaS 應用、需要 server-side 客製邏輯的服務，這些不要用 Framer。Framer 強在「設計密度高、頁面數中等、需要快速迭代」的場景，對應到接案 80% 都是這類。
CHAPTER 06 · LIMITS
Framer 不是免費的。免費方案可以做學習跟原型，但要綁自己的網域、要拿掉 framer.website 子網域、要更大的 CMS 容量，都要付費。
中文字型是另一個要事先想的。Framer 內建的 Google Fonts 中文字型有但不多，最終常常會走「自己上傳 woff2」的路。台灣設計師如果要用思源黑體、源樣明朝、銀光體這類，要自己處理字型授權跟檔案大小。
學習曲線方面，會 Figma 的人轉得快，一週可以上手做完整 landing page。沒設計背景的工程師、PM 反而會卡——Framer 的邏輯是「視覺先行」，不是「結構先行」，這個思維轉換比學語法難。
以 2026/05 的定價，每個 site 算錢、不是整個 workspace。Mini 約 5 美金/月、Basic 約 15、Pro 約 30、Business 約 75。接案的設計師大多用 Pro，CMS 容量跟頻寬夠用、可以綁自己的網域、開分析。要看最新數字直接到 framer.com/pricing。
CHAPTER 07 · COMPARED TO
2026 年同時想著要選工具的設計師，面前通常擺著四個選項。Framer 跟它們的位置差距如下。
VS WEBFLOW
Webflow 對結構敏感，適合工程思維設計師。Framer 對視覺敏感，適合 design-first 設計師。同一個 landing page，Webflow 的 class 結構更乾淨，Framer 的 motion 更滑順。看你的工作流偏哪一邊。
VS FIGMA MAKE
Figma Make 走 prompt-to-code 路線，適合做 prototype 跟探索。Framer 走 design-to-live-site 路線，適合做正式上線的網站。Figma Make 的輸出是 React code，Framer 的輸出是現成的網站。
VS LOVABLE & V0
Lovable / v0 是「對話一直問，AI 一直生」，適合工程師或 PM 想快速驗證點子。Framer 把 AI 當 assistant，主導權還在設計師手上，每個 AI 輸出都是可編輯的元件，不是黑盒子。
VS WIX & SQUARESPACE
Wix、Squarespace 是模板平台，設計自由度低。Framer 是真正的 design tool，你想做出 Apple 等級的網站它做得到。當然代價是學習曲線高一些。
CHAPTER 08 · TAKEAWAYS
寫到這裡，會發現整篇文章在講一件事——Framer 把「設計到發布」變成一個無縫的工作流。這在 2020 年是奢望、2023 年是承諾、2026 年是現實。
設計師面前有兩條路。一條是繼續把 Figma 當終點，然後交給工程師、CMS、客戶。另一條是把 Framer 學起來，從設計到上線都是自己的事。前者讓你維持原本的舒適區、後者讓你變成更完整的設計師。
AI 不會取代設計師。但 AI + Framer 會慢慢取代「會用 Figma 但不會做網站」的設計師——這個分水嶺正在發生，比想像的快。
A：兩個都是設計工具，但用途不同。Figma 是給設計師畫稿、做原型、跟團隊協作的工具，輸出是設計檔。Framer 是給設計師做正式網站的工具，輸出是上線的網站。很多人會在 Figma 畫稿、然後在 Framer 重做成可上線的網站。
A：適合。RWD、SEO、CMS 都對中文沒問題。比較需要注意的是中文字型——內建的 Google Fonts 中文選擇不多，建議自己上傳 woff2 字型，或用付費字型服務如思源黑體、justfont 的雲端字型。
A：可以。整個產品就是給不寫程式的人設計的。會 HTML/CSS 概念會更上手，但即使完全沒有也能做出能上線的網站。Workshop AI 還會在你卡住的時候幫你生互動元件。
A：可以做小規模商品展示與付款，Framer 有 Framer Commerce 模組可以串。但如果是品項數上千、有複雜的庫存管理、會員系統的大型電商，建議用 Shopify 之類專業電商平台搭 Framer 做品牌站。
A：兩個都好，路線不太一樣。Webflow 給你更細的 SEO 控制權（結構標記、自訂 schema）。Framer 給你更自動的 SEO 處理（自動 AVIF、CMS 變數帶入 meta、自動 sitemap）。內容站、技術文件導向選 Webflow；品牌站、landing page 導向選 Framer。
A：會 Figma 的人一個週末就能做出第一個 landing page，一個月可以做到接案水準。重點是把 auto-layout、components、CMS、interaction 這四件事先弄通，其他都是延伸。
A：不會差。Framer 用 Traffic-aware Pre-Rendering 加 SSG 來服務頁面，圖片自動轉 AVIF。一般 landing page 的 Lighthouse 分數常常九十分以上，比很多自己寫的網站還快。
RESOURCES · 延伸資源
· RAR 課程：Framer 網站設計課：從零開始，台灣第一堂繁體中文 Framer 完整教學，5 個實戰專案
· Framer 官方，免費註冊試用，原型階段不用付費
· Framer Academy，官方免費課程，從零開始
· Templates Marketplace，直接買現成模板，一鍵套用
· RAR 過往文章：Lovable、Figma Make、Framer 三方比較，搭配看會更理解 design-to-code 全圖
· RAR 過往文章：Figma Make 與設計師護城河，延伸思考 AI 時代設計師的位置
