Framer 的前世今生,以及關於 AI 時代的未來

Framer 築者基地作者青魚 Cyan 頭像

青魚 Cyan

Framer 的創辦人蠻少上節目的,但最近難得上了三個訪談,從創業故事一路聊到 AI 時代下 Framer 的走向。我節錄了一些內容,帶大家一起來了解他們是如何打造今天的 Framer。

本篇內容截自以下三部影片:

三部關於 Framer 創辦人的 YouTube 訪談影片封面截圖。

Jesse Showalter - Keeping the internet weird w/Jorn Van Dijk of Framer

YC Root Access - CEO of Framer: Why Designers Should Become

Founders First of Kind - Koen & Jorn: Framer Reloaded › First of Kind

其中一部訪談裡用「三幕劇」的結構來描述 Framer 的發展歷程,就像一齣還沒演完的戲。第一幕是賭注,第二幕是危機與重生,第三幕是他們現在正站著的地方。

故事從一間荷蘭小工作室開始。

Framer 的兩位共同創辦人 Koen 與 Jorn 在對談節目中分享創業心得的特寫照片。

Act 1:從 Prototype 原型工具開始

Koen 與 Jorn 在荷蘭的阿姆斯特丹創立了設計公司 Sofa,從小工作室一路成長,做出了幾款口碑極佳的工具,最終被 Facebook 相中收購,整個團隊打包搬到了矽谷。

在 Facebook 的日子裡,他們看見了一個始終存在的問題:設計師和工程師的比例嚴重失衡,設計師花了無數時間把想法磨成形,卻沒有一個好方法讓對方真正「看見」它。帶著這個洞察,他們離開 Facebook,創立了第一版 Framer:一款讓設計師做高擬真互動原型的工具。

Framer 早期的產品界面截圖,展示其最初作為原型設計工具(Prototyping Tool)的軟體界面與元件欄。

早期的反應讓他們振奮。Dropbox、Twitter、Amazon 的設計師都在用。但好景維持了一段時間之後,成長曲線開始走平,公司經常性營收 (ARR) 卡在 4、500萬美元。他們發現原型設計的市場沒有想像中的大,對許多設計師來說其實是非必要的步驟。

Act 2:轉型成現在的 Framer

那是一段灰色的時期。Jorn 正在陪產假,家裡同時在裝修,借住在親戚家。就在這個時候,Koen 打來說「我們得聊聊」。兩個人坐下來吃午餐,把所有選項攤在桌上:賣掉公司、收攤、或者轉型。而他們決定選擇轉型。

他們開始大量訪談設計師,想找出下一個方向。最常聽到的抱怨是同一件事:在 Figma 把設計做好了,然後工程師要從頭重建一次。這個「重建」的摩擦,讓設計師對自己的作品失去掌控感。

新 Framer 的答案,就是把這道無形的牆打破。

現在的 Framer 編輯器界面,展示其轉型為 No-Code 架站平台,支援響應式設計、圖層管理與樣式調整功能。

在畫布上設計,按發布,網站就上線了。設計稿本身就是網站,不需要重建,不需要等待,不需要把自己的想法翻譯給另一個人。

第一批測試者的反應讓他們知道方向對了。這次轉型極度成功,僅花了 7、8 個月就讓新產品的營收突破 100 萬美元,現在 YC 新創有 55% 選擇用 Framer 建官網,公司在 2025 年的 D 輪估值達到 20 億美元。

Act 3:AI 時代,他們怎麼想

Framer 在 2025 已經推出一些 AI 輔助工具,例如 Wireframer(生成網頁 Wireframe 結構)、Workshop(生成 Components)。但到了 2026 年,其他 AI 已經讓生成網頁這件事變得更簡單、更快速、且更完整,那 Framer 打算怎麼走?

Framer 兩大 AI 工具介紹圖:左側為 Wireframer(生成網頁結構),右側為 Workshop(生成 Components)。

他們的答案不是跟著浪頭衝,而是往反方向站。Framer 不想成為「直接幫你生成一個網站」的工具,而是讓 AI 接手那些繁瑣但不需要動腦的事情,把空間還給真正需要設計判斷的地方。

具體來說,他們在推進四個方向:

1. 讓 AI 輸出直接落在畫布上

現在大多數 AI 工具的輸出是一段程式碼,設計師沒辦法像操作設計稿一樣直接修改。Framer 想做的是讓 AI 的結果直接變成畫布上可以拖曳、可以調整的元素。設計師動了什麼,AI 看得見,然後無縫接手後續的工作。Jorn 說這技術比直接吐出一段 React 程式碼難上很多,但他們已經很接近了。

2. Framer AI Agent

Framer 正在開發專屬的 AI Agent,目標是接管那些重複性高但不需要創意的操作,例如設定響應式斷點、搭建頁面骨架、處理導覽列與頁尾。這些事讓 Agent 去做,設計師省下來的時間,可以拿去探索那些真正讓一個網站有靈魂的細節。

3. 讓行銷團隊也能動網站

過去行銷人員往往被困在 CMS 的小格子裡,改改文字、換換圖片。Framer 希望透過有邊界的 AI 工具,讓行銷人員能在設計師設定好的品牌規範內,具備更強的編排能力,不破壞設計,也不用每次都拜託設計師或工程師。

4. 2027 年之後:不只是網站

Jorn 說,他希望 Framer 在 2027 年之後,不再只是「做網站的工具」,而是讓你能在網路上建造任何東西的工具。行銷官網、小型 web app、各種需要在網路上存在的東西,都可以在這塊畫布上完成、一鍵發布。他對 Framer 的定位,是「網路上最好的建造體驗」,而不只是一個網站建構器。

他們最擔心的一件事

在所有關於未來的討論裡,Jorn 說了一件讓我印象最深的話。他說,不管工具變得多強大,有一件事他希望永遠保留設計師「親自建造」的過程。

如果有一天,設計師的工作縮減成「向 Agent 下指令」然後「從它吐出的五個方案裡挑一個」,那麼某種重要的東西會悄悄消失。真正的品味與直覺,不是天生的,是在一次次親手排版、嘗試、調整、推翻重來的過程裡,慢慢長出來的。把這個過程全部外包出去,你同時也外包了自己判斷好壞的能力。

比起讓 AI 丟出五個版本,Framer 更希望 Agent 是幫設計師嘗試數十種可能性的夥伴,而不是替設計師做決定的機器。讓設計師依然能享受「建造」這件事本身。

結語

從一間荷蘭小工作室差點收攤,到現在站在 AI 浪潮的入口,Framer 走過的每一步,都在回答同一個問題:設計師應該對自己的作品擁有更多掌控權。

Framer 的創業歷程非常值得參考。這篇文章在 Threads 發出去之後,收到了一些資深設計師的回應,有設計師從 2017 年就開始用 Framer,甚至在 2019 年親身去荷蘭參加了 Framer 舉辦的年會 Loupe。也有人說,還記得最早認識 Framer 的時候只是一個做 Prototype 的工具,對設計師來說不用懂太多程式就能使用,簡單好玩。

每個工具的背後,都藏著一段沒人說過的故事。Framer 走了很長一段路。而這段路還沒走完。 如果你也想跟一起在學 Framer 的夥伴交流,歡迎加入我們的 Discord 社群聊聊!

文章大綱
本文作者介紹
Framer 築者基地作者青魚 Cyan 頭像
青魚 Cyan

現職於醫藥行銷公司的資訊設計師,同時從事網頁與視覺設計接案。工作之餘,持續投入 Framer 與網頁設計工具的學習與實踐,並打造一個面向中文圈創作者的交流與共學空間。

本文作者介紹
Framer 築者基地作者青魚 Cyan 頭像
青魚 Cyan

現職於醫藥行銷公司的資訊設計師,同時從事網頁與視覺設計接案。工作之餘,持續投入 Framer 與網頁設計工具的學習與實踐,並打造一個面向中文圈創作者的交流與共學空間。

看看其他文章

Connect, configure and preview
Connect, configure and preview