Landingfolio 是一個著陸頁（Landing Page）設計參考站，由兩塊互補的內容組成：一邊是收錄真實產品頁面的截圖畫廊，可依產業、頁面類型（著陸頁、定價頁、關於頁、登入頁、註冊頁、404 頁）與配色篩選；另一邊是可複製貼上的網頁元件庫，涵蓋 Tailwind CSS、Webflow 與 Figma，官方在首頁稱其為「世界上最大的 Webflow 元件庫」（來源，行銷表述）。它解決的問題很具體——做著陸頁不必從空白畫布開始：先在畫廊研究同類產品的真實頁面怎麼設計，再到元件庫把對應區塊拷進自己的專案。2026 年站點還上線了 MCP 服務，讓 Claude Code、Cursor 等 AI 程式助手直接把畫廊截圖當作設計參考來呼叫。

Landingfolio 首頁：左側為元件庫與產業分類導覽，中間為最新收錄的著陸頁卡片

上圖是 Landingfolio 首頁（2026-09-21 截取）。頁面主體就是畫廊資訊流：每張卡片是一個被收錄的網站，標註名稱、收錄日期與所屬產業，頂部可依產業（SaaS 341、Product 209、Business 140 等，計數截至 2026-09-21）與頁面類型篩選；左側欄同時掛著元件庫（Tailwind / Webflow / Figma）的入口。

站點速覽

  • 網址：https://www.landingfolio.com/
  • 類型：著陸頁靈感畫廊 + 元件庫（另有模板商店、部落格與免費小工具）
  • 費用：瀏覽畫廊與區塊範例免費（資訊流中夾有贊助卡片）；All Access Pass 通行證每週 1.99或一次性買斷1.99 或一次性買斷59（截至 2026-09-21，定價頁）
  • 註冊要求：瀏覽無需註冊；購買、投稿作品、取得 MCP token 需註冊帳號
  • 介面語言：僅英語（2026-09-21 核查）
  • 營運方：Postcrafts（新加坡）

站點背景

Landingfolio 由荷蘭獨立開發者 Danny Postma 創辦。他在 2024 年的一次訪談中自述：2015 年、21 歲時開始做這個專案，當時他是自由接案的轉換率優化專員，為客戶設計著陸頁時找不到好參考，於是用 WordPress 搭了一個展示優秀著陸頁設計的畫廊當副業（來源：Unite.AI 訪談，2024-02-20）。Danny Postma 後來還創辦了 Headlime（AI 文案工具，2021 年出售）與 HeadshotPro（AI 職業形象照）等產品。根據服務條款，Landingfolio 目前由其公司 Postcrafts 營運，Postcrafts 註冊於新加坡，適用新加坡法律。

從公開記錄看，站點的形態幾經擴充：2022 年 4 月在 Product Hunt 上架時，它是一個「445+ 著陸頁、54 個分類」的純畫廊；此後陸續加上可複製貼上的元件庫、模板商店、優化建議部落格與免費小工具（Mockup 產生器、免費 Logo），2026 年又新增面向 AI 程式助手的 MCP 服務。畫廊至今仍在更新：截至 2026-09-21，首頁最新收錄條目的日期為 2026-09-14。

靈感畫廊：依產業與頁面類型檢索真實案例

著陸頁畫廊：產業分類計數、裝置與配色篩選，卡片標註收錄日期

畫廊是 Landingfolio 最早的部分，由團隊策展收錄（頁面自稱「curated by us to ensure the highest quality」）。上圖是著陸頁畫廊（2026-09-21 截取），可以看到幾個實用設計：

  • 產業分類與計數：SaaS（341）、Product（209）、Business（140）、Marketing（116）、Design Tools（113）、Software（85）、Technology（79）、Mobile App（71）等（計數截至 2026-09-21），明顯偏向軟體與科技產品；
  • 頁面類型維度：同一個被收錄網站會拆成著陸頁、定價、關於、登入、註冊、404 等多個頁面類型條目，方便依「我現在要設計哪一頁」檢索；
  • 卡片資訊：每條標註網站名稱、收錄日期與累計瀏覽數，點擊「Visit site」直達原站；
  • 篩選器：支援依主色調（黑、白、紅、藍等色值）與裝置（桌面 / 行動端）過濾。

除整頁案例外，站點還有一個「Section & Component Examples」板塊，把真實網站的區塊（Hero、頁首、頁尾、定價表、使用者評價等）單獨截圖歸類，官方在 MCP 頁面稱規模為 4,600 餘個。需要留意：畫廊資訊流中夾有贊助卡片（Sponsored），免費使用者會看到；去除廣告是付費通行證的權益之一。

元件庫與模板

Tailwind CSS 元件庫：FREE 與 LOCKED 標記混排，卡片標註可用框架

元件庫是把「靈感」變成「實作」的一側。上圖是 Tailwind CSS 元件庫頁面（2026-09-21 截取）：每個元件卡片是一張真實效果的預覽圖，右上角標 FREE 或 LOCKED——免費元件可直接複製，鎖定元件需要付費通行證；卡片下方標註該元件可用的框架（Tailwind、React、Vue、Pug、Webflow、Figma）與瀏覽數。元件依用途分類：Hero、Header、Footer、Feature、Pricing、FAQ、Steps、登入註冊、設定頁、購物車等，官方自述「從真實著陸頁建構而來」（元件庫頁面）。

規模方面，官方不同頁面口徑略有出入：導覽選單與元件庫頁面標註「805+」，首頁宣傳框寫「超過 791 個」（均為 2026-09-21 截取），總量在 800 上下並持續增長。模板板塊（Templates）則分為兩類：包含在付費通行證裡的 Pro 模板（Webflow 與 Tailwind 整頁模板），以及由第三方設計師提供的外部模板。官方 FAQ 明確說明：使用元件的前提是你已經會用 Webflow 或 Tailwind CSS，它不是替你把網站做出來的建站工具（定價頁 FAQ）。

MCP：把畫廊接入 AI 程式助手

MCP 頁面：免費 token、設定指令與支援的工具

MCP 是 Landingfolio 較新的能力（官方頁面）。它基於 Model Context Protocol（模型上下文協定）提供了一個伺服器（mcp.landingfolio.com/mcp），讓 Claude Code、Cursor、Codex、Windsurf、VS Code 等 AI 程式工具在寫頁面時，能從畫廊拉取真實著陸頁區塊的截圖作為設計參考——Hero 區、定價表、使用者評價等。接入方式是註冊免費帳號、複製 token、在工具設定裡加一行指令。

額度上，免費帳號每天 100 次請求（突發上限 10 次/分鐘），付費通行證提高到每天 1,000 次。官方對資料邊界的說明是：AI 工具只會收到區塊截圖、所屬分類與來源頁面連結，「不會收到你專案裡的程式碼、prompt 或檔案」，伺服端依帳號記錄呼叫次數。對用 AI 助手搭頁面但覺得產出「設計感不足」的使用者，這是把策展內容接到工作流程裡的一種輕量做法。

免費與付費邊界

截至 2026-09-21，定價頁給出的 All Access Pass 分兩檔：

  • Weekly：每週 $1.99，按週計費、可隨時取消；
  • Forever：59一次性付款（劃線原價59 一次性付款（劃線原價249，頁面標註為限時優惠），永久存取。

兩檔內容相同：不限量下載全部元件、kit 與模板（含未來新增）、可用於商業與客戶專案、每天 1,000 次 MCP 請求、向畫廊投稿自己的作品、無廣告瀏覽，以及 30 天無理由退款（支付走 Stripe，官方稱不保存卡號資訊）。免費層則包括：瀏覽畫廊與區塊範例（含贊助卡片）、標記 FREE 的部分元件、部落格與優化建議、Mockup 產生器等小工具，以及每天 100 次的 MCP 免費額度。

版權與內容政策

元件與模板的商用規則寫在 Licensing Agreement：購買者獲得持續、非專屬、全球範圍的授權，可為自己或客戶建立不限數量的最終作品，最終作品可以出售、轉授權或免費散佈；允許修改與二次創作（multi-use）。明確禁止的行為包括：把元件作為素材或原始檔再散佈、把元件改造成主題/模板拿到任何市場（包括 Landingfolio 自己）出售、轉售下載的資源；元件作者保留作品所有權。為團隊購買時，結帳頁要求依團隊人數選擇對應授權。

畫廊內容的來源分兩類：團隊策展收錄的真實網站截圖，以及使用者投稿。投稿是付費會員的權益（投稿頁）：官方稱每件投稿都由策展人審核，「大多數不會通過」，入選標準包括必須是真實產品的線上頁面、排版/配色/版面配置過硬、載入快且行動端可用，模板演示與佔位文案會被拒絕。此外，服務條款要求使用者年滿 21 歲，並約定爭議適用新加坡法律；隱私政策聲稱符合 GDPR，註銷或提出刪除請求後 14 天內刪除個人資料。

適用場景

  • 獨立開發者與設計師：做產品官網、定價頁、登入頁時，先依產業與頁面類型翻真實案例，確定方向再動手；
  • Tailwind CSS / Webflow / Figma 使用者：不想從空白畫布起步，直接拷貝生產級元件拼裝頁面，通行證的一次性買斷對長期使用者成本較低；
  • AI 程式助手使用者：透過 MCP 把策展畫廊變成助手的設計參考庫，免費額度夠日常輕度使用；
  • 作品推廣：把自己的著陸頁投稿進策展畫廊換取曝光（需付費會員，且通過率由策展人控制）。

局限

  • 僅英語介面，元件命名、部落格與文件也都是英文；
  • 不是建站工具：元件以 Tailwind CSS / Webflow / Figma 形式提供，不會這些工具就無法直接使用，也沒有線上編輯器；
  • 免費層有限：元件庫中相當部分標 LOCKED，MCP 免費檔每天 100 次請求，免費瀏覽時資訊流夾有贊助卡片；
  • 內容偏科：分類明顯偏向 SaaS 與軟體產品（SaaS 一類 341 條，而 Crypto 僅 21 條，截至 2026-09-21），電商、在地服務等行業的參考相對少；
  • 規模口徑不一：元件數量在不同頁面分別標註 805+ 與 791+（截至 2026-09-21），「世界上最大的 Webflow 元件庫」是官方行銷表述，無第三方核驗；
  • 政策文本粗糙：隱私政策正文留有姊妹產品 Headlime 的網址與信箱（模板複用痕跡），服務條款「年滿 21 歲」的要求也比常見站點嚴格。

同類參考

只做著陸頁靈感畫廊的還有 Land-book 與 Lapa Ninja；要官方出品的 Tailwind 付費元件庫可看 Tailwind UI，開源免費的替代品有 Flowbite、HyperUI；Relume 則是同樣涵蓋 Webflow 與 Figma 的大型元件庫。Landingfolio 的差異在於把「策展畫廊 + 元件庫 + AI 工具接入」綁在了一起。

參考資料