網站圖鑑

每天一個值得學的網站

16分析網站
0採用元素

往下滑開始看

本週回顧Pancake 的網站畫面
2026 / 10 / 25

Pancake

週榜第一的 AI 產品站，首頁就是會動的示範

更多細節

為什麼紅

回顧本週清單，Pancake 最值得再看一次：2026 年 10 月 12 日該週 Product Hunt 週榜第 1 名（分數 567，遠高於第 2 名的 353），官網也掛著「#1 Product of the Day」徽章。產品主打「GTM 界的 Vercel」，讓 Claude、Codex 這類 AI 助理透過 MCP 幫公司找客戶，正好踩中 AI agent 的熱門話題。首頁列出 Kong、Y Combinator 新創等信任背書。這次回顧的重點是它怎麼把「得獎證明、客戶 Logo、動態示範」排成一條讓人逐步相信的順序。

版面

最上面是固定導覽列（產品、產業、價格、資源、登入），手機版收成漢堡選單。主視覺是一行大標題加「給人類 / 給 agent」切換，下面接可複製的安裝指令。中段是一整塊假的產品畫面，會自己打字、跑進度。再往下是客戶 Logo 牆，然後用 01、02、03 編號的三個步驟區塊，每塊左邊文字、右邊動態示範，手機版變成上下堆疊。

主題與配色

深紫莓果底色搭配粉、橘、紫的柔和漸層，像煎餅糖漿的甜點感。主色 #2C002A（深紫）；點綴色 #BA8BFF（紫）、#FF7AA0（粉紅）、#FFBD7A（橘）；淡色版 #DEC3F5、#FFBBC7、#FFDBB5；文字白 #FFFFFF，另有 #4660E7 藍色作小面積提示。

互動設計

  • 標題旁有「給人類 / 給 agent」切換，內容會跟著換
  • 假產品畫面自動打字，數字從 0 跳到結果，像真的在執行
  • 步驟區塊有假游標滑過介面，示範怎麼操作
  • 提供一行可複製的安裝指令，讓 AI 助理自己讀取設定

其他可以學的

  • 用 #4660E7 藍色小面積當提示色深色系網站
  • 手機版把左文右圖改成上下堆疊所有產品介紹頁
打開這個網站
話題產品Permit Pending 的網站畫面
2026 / 10 / 24

Permit Pending

用公文與印章語氣包裝城市遊戲，文案就是設計

更多細節

為什麼紅

2026 年 10 月在 Hacker News 以「Show HN: SimCity, but with Permits」發表，截至 10 月 24 日有 936 分、422 則留言，是當時 Show HN 版面分數最高的一篇。產品本身是瀏覽器就能玩的免費城市模擬遊戲，不用註冊、不用下載，主題（蓋房子被鄰居和法院擋下）人人有共鳴，所以討論度很高。

版面

單欄長頁，由上而下：滿版大圖首屏（河岸城市黃昏），上面疊一張標題卡，內有標題、「Subject to approval」印章、一段說明和大按鈕；接著是一段置中的產品簡介；「How a good idea dies」用編號時間軸（Month 1 到 Month 48）講一個案例；功能區是左圖右字、右圖左字交錯的三篇；後面是四格小功能圖示、四張城市情境卡片（2x2 或橫排）、三則居民語錄、可展開的 FAQ，最後以「Your application is complete.」收尾加第二顆按鈕。圖片用 loading=lazy 延遲載入。手機版推測會變成單欄直排（原始碼未直接驗證），官方 FAQ 明說遊戲本身建議用電腦。

主題與配色

走「公文、公聽會」的官方風格，搭配寫實的城市插畫照片。唯一從網頁 meta 確認的色碼是主題色 #1b2a3a（深藍灰），其餘顏色沒有直接取得；整體文案語氣是冷面幽默的官腔，例如「Free, because you are loved」。

互動設計

  • 標題旁蓋一個「Subject to approval」印章，呼應公文主題
  • 時間軸區塊使用 will-reveal 類別，滑到時才依序顯現
  • 功能區圖文左右交錯，每一篇圖片延遲載入
  • FAQ 用原生 details 點開展開，不需要額外程式
  • 四張情境卡片整張可點，直接帶參數進入對應城市遊戲

其他可以學的

  • 結尾標題呼應主題：Your application is complete.任何有主題的網站
  • 情境卡片整張可點，網址帶參數直接進入該情境遊戲、工具網站
打開這個網站
得獎設計
Ascension — Pegassi這個網站擋截圖
2026 / 10 / 22

Ascension — Pegassi

黑白極簡加 3D 與音樂，把 EP 發行做成體驗

更多細節

為什麼紅

2026-10-21 獲 Awwwards 每日最佳網站（Site of the Day），總分 7.51／10（設計 7.49、易用 7.26、創意 7.88、內容 7.59），另獲開發者獎（Developer Award）7.67，其中動畫與轉場 8.20、響應式設計 8.00。Awwwards 會員評分 8.63，評審最高給到 9.40。網站是比利時電子音樂人 Pegassi 首張 EP《Ascension》的發行頁，由 Jesper Landberg 與 Gil Huybrecht 製作，把一張 EP 做成可以玩的互動體驗。

版面

首頁最上面是大大的 Ascension — Pegassi 字樣，配一張樓梯意象的主視覺。往下依序是 EP 資訊（A 面 Ascension、Circles，B 面 Forest Walk、Twinflame，發行日 2026-09-04）、四首歌的曲目表（每首有時長與短說明）、兩段可取消靜音的影片、藝術家介紹，最後是頁尾（隱私、條款、社群連結）。導覽列有 Listen、Sequencer、About、Buy 四個項目，外加一個 Menu 按鈕。手機版的實際排法這次沒能從頁面文字確認，只知道開發者獎的響應式項目得到 8.00 分。

主題與配色

只用黑 #000000 與白 #ffffff 兩色，靠影像、3D 與動態帶出層次，風格是冷靜、克制、帶點神秘的電子音樂感。技術標籤為 Nuxt.js、GSAP、Three.js，另標示音樂與音效、微互動。字體與其他色碼這次沒能取得。

互動設計

  • 導覽列有 Sequencer 項目，讓訪客自己玩音序器做音樂
  • 影片預設靜音，附 Unmute 按鈕讓訪客自己開聲音
  • 使用 Three.js 做 3D 視覺，搭配 GSAP 做動畫與轉場
  • 標示有微互動與音效，操作時會有細小的回饋

其他可以學的

  • 曲目表每首列時長加一句短說明專輯、作品發行頁
  • 用 Three.js 做一個 3D 主視覺發行、活動宣傳頁
打開這個網站
話題產品Pancake 的網站畫面
2026 / 10 / 21

Pancake

首頁直接演示「一句話變成開發客戶流程」的產品

更多細節

為什麼紅

2026 年 10 月 12 日該週 Product Hunt 週榜第 1 名（分數 567，遠高於第 2 名的 353），官網也掛著「#1 Product of the Day」徽章。產品主打「GTM 界的 Vercel」，讓 Claude、Codex 這類 AI 助理透過 MCP 幫公司找客戶，正好踩中 AI agent 的熱門話題。首頁列出 Kong、Y Combinator 新創等信任背書。

版面

最上面是固定導覽列（產品、產業、價格、資源、登入），手機版收成漢堡選單。主視覺是一行大標題加「給人類 / 給 agent」切換，下面接可複製的安裝指令。中段是一整塊假的產品畫面，會自己打字、跑進度。再往下是客戶 Logo 牆，然後用 01、02、03 編號的三個步驟區塊，每塊左邊文字、右邊動態示範，手機版變成上下堆疊。

主題與配色

深紫莓果底色搭配粉、橘、紫的柔和漸層，像煎餅糖漿的甜點感。主色 #2C002A（深紫）；點綴色 #BA8BFF（紫）、#FF7AA0（粉紅）、#FFBD7A（橘）；淡色版 #DEC3F5、#FFBBC7、#FFDBB5；文字白 #FFFFFF，另有 #4660E7 藍色作小面積提示。

互動設計

  • 標題旁有「給人類 / 給 agent」切換，內容會跟著換
  • 假產品畫面自動打字，數字從 0 跳到結果，像真的在執行
  • 步驟區塊有假游標滑過介面，示範怎麼操作
  • 提供一行可複製的安裝指令，讓 AI 助理自己讀取設定

其他可以學的

  • 深紫底色搭粉、橘、紫三個柔和點綴色新創、AI 產品站
  • 主視覺下方放一行可複製的指令框，一鍵上手開發者工具官網
打開這個網站
同類參考Zaventem Ateliers 的網站畫面
2026 / 10 / 20

Zaventem Ateliers

26 間工匠工作室共用一站，等寬字加珊瑚紅，極簡又有個性

更多細節

為什麼紅

它是布魯塞爾近郊舊造紙廠改成的收藏級設計與工藝空間，進駐 26 個獨立工作室，創辦人 Lionel Jadot 是知名設計師。網站被列在 Framer 官方 Gallery 的精選清單裡，算是被平台推薦的作品。本次沒有查到獎項或社群討論數字，所以紅的證據主要是平台精選與品牌背景。

版面

首頁最上方是一整排方形照片牆，接著一句品牌宣言（空間、創作、合作）。中段是『The building』區塊：一張大直幅照片加創辦人引言和 read more 連結。再往下是『ARTISTS』名單，每位藝術家一張照片加粗體大寫名字，直幅與橫幅照片混排，點進去是各自的個人頁。最後是『TALK TO US』聯絡區，一個 LINK UP 按鈕。導覽列只有 Building、Artists、Shop、Projects、Contact。大量留白、全部直線沒有圓角。手機版的實際排法這次沒有實測。

主題與配色

極簡、低調、像畫廊的風格。背景純白 #FFFFFF，文字純黑 #000000，只用一個珊瑚紅 #D36E70 當連結與強調色。全站幾乎只用一種字體：Spline Sans Mono 等寬字，標題只有 12px、內文 14px，圓角 0px，基本間距單位 10px。

互動設計

  • 首頁開場是方形照片牆，用大量作品照取代文字開場
  • 藝術家名單每人一張照片加名字，整張可點進個人頁
  • 文字連結用珊瑚紅 #D36E70，在黑白畫面中很醒目
  • 導覽列只有 5 個項目，並以 LINK UP 按鈕收尾引導聯絡

其他可以學的

  • 成員名單用照片加粗體大寫名字，整張可點社團、工作室介紹
  • 不開放參觀就直說，用單一 LINK UP 按鈕預約工作室官網
打開這個網站
得獎設計Signal-A Studio 的網站畫面
2026 / 10 / 19

Signal-A Studio

黑白極簡的設計工作室官網，靠排版取勝

更多細節

為什麼紅

2026-10-18 拿下 Awwwards 每日最佳網站（Site of the Day，總分 7.22／10，設計 7.44、可用性 7.00、創意 7.06、內容 7.31），同時拿到開發獎（Dev Award 7.31，動畫與響應式都是 7.40）。工作室自己列出的紀錄也很多：Awwwards 每日最佳 3 到 4 次、佳作 6 到 7 次，另有 Red Dot 紅點設計獎（App 設計）、A' Design Award 銅獎、IF 設計獎，並被 Site Inspire、It's Nice That、Communication Arts 收錄。

版面

單欄長頁，由上而下依序是：頂部導覽列（左邊 S—A 標誌加選單開關，並顯示華沙／柏林的 CET 即時時鐘）、大標語首屏（標語拆成一個字一個元素，疊著四層頭圖，手機版另用一張專屬頭圖）、六張編號 A—1 到 A—6 的案例卡（每張有預覽圖、標題、類別、箭頭和服務範圍標籤）、工作室簡介、獎項標誌格狀牆、兩顆行動按鈕（關於我們、預約諮詢），最後是頁尾與橫向跑馬燈。內容很少，大量留白，用字級與排版建立階層。

主題與配色

極簡黑白風格，主色只有黑 #000000 與白 #FFFFFF（取自 Awwwards 標示的色碼），沒有多餘的彩色。靠大字標語、括號標籤（例如 ( S—A Studio )）和編號帶出編輯排版的味道。使用 Webflow 與 Figma 製作。

互動設計

  • 首屏標語每個字獨立成元素，推測是逐字淡入出現（由原始碼結構推測）
  • 案例卡的預覽圖檔名含 cursor，推測滑過時圖片跟著游標移動（由檔名推測）
  • 頁尾有持續橫向捲動的跑馬燈圖案
  • 導覽列即時顯示 CET 時間，讓人感覺工作室真的在線上
  • 首屏多層頭圖疊加，手機版換成專屬單張圖

其他可以學的

  • 導覽列放所在地的即時時鐘個人或小品牌
  • 把獎項標誌排成一面格狀牆接案網站
打開這個網站
本週回顧Creem 2.0 的網站畫面
2026 / 10 / 18

Creem 2.0

暖米色底配蜜桃橘，用終端機情境劇賣收款服務

更多細節

為什麼紅

Aitoolly 的 Product Hunt 每日榜單（2026 年 9 月 17 日）把 Creem 2.0 排在最前面，約 538 票；該頁同時標示「非精選」，且我沒找到 Product Hunt 官方頁面，最終票數與名次請自行再確認。官網本身沒有列出任何獎項，只放客戶 Logo（CryptoSwift、Uneed、TailAdmin、dealday、daisyUI）和六則來自 X 的使用者推文，頁面宣稱覆蓋 190 多個國家。定價只有一種：3.9% 加 40 美分。

版面

單欄長頁，由上往下：頂端導覽列（左 Logo、中間 Product 與 Developers 下拉加 Pricing、Customers、Blog，右邊 Get started）、主視覺（大標題 Build with AI. Sell with Creem. 加兩顆按鈕與終端機示範）、價值主張區、五張功能卡片（分潤、計費、短連結、MCP/API/CLI、代收代繳）、計費與全球銷售等獨立區塊、Agent 自動化區（再演一次終端機）、手機 App 區、定價、推薦語與 FAQ、結尾 CTA、多欄頁尾。手機版排法抓取內容沒有描述，無法確認；只知道官方有推 iPhone 與 Android App。

主題與配色

暖色極簡加一點復古。背景暖米色 #F8F4F1，文字近黑 #181614，主色與強調色是蜜桃橘 #FFC19B，輔助灰褐 #D1C6BF。主按鈕橘底黑字、橘褐邊框 #BA7A53，次按鈕白底配紫色邊框 #927DD0，兩種按鈕下方都有 2px 實心陰影，像可以按下去的實體按鈕。字體：內文 Geist Sans，程式碼與終端機用 Geist Mono 和 Roboto Mono，標題用 Gasoek One 粗體展示字。標題約 72px、區塊標題約 44px、內文約 24px。使用 Tailwind 加 shadcn，整體偏現代、不花俏。

互動設計

  • 主視覺放終端機模擬：輸入指令、顯示 Installed & authenticated、產生結帳連結
  • 同一個終端機情境在 Agent 自動化區再演一次，前後呼應
  • 模擬結帳頁、分帳預覽、Slack 風格的 Agent 通知卡，用假畫面代替文字說明
  • 主按鈕 Start selling 在整頁重複出現，旁邊另有 Set up with your agent 給開發者
  • 按鈕底部 2px 實心陰影，做出立體按壓感

其他可以學的

  • 背景用 #F8F4F1 暖米色，只留一個橘色新創產品官網
  • 標題用粗展示字，內文用無襯線字體品牌感強的網站
打開這個網站
話題產品Unfenced 的網站畫面
2026 / 10 / 17

Unfenced

用官方邊界圖驗證房產，把資料變成信任感

更多細節

為什麼紅

2026 年 10 月在 Hacker News 的 Show HN 發文，一天內拿到 310 分、196 則留言，是當天 Show 板塊討論最熱的網站之一。產品點子很清楚：從 695,439 筆待售房產中，用美國地質調查局 PAD-US 4.1 邊界資料，篩出 13,626 筆「後院直接連到公有林地或荒野」的土地。它由費城的設計工作室 Other Waters Studio 製作，資料做得扎實、版面也乾淨，所以在設計圈與工程師圈都被討論。

版面

首頁由上往下單欄排列：先是大標題「Walk out the back door. Keep going.」加一行大數字說明與兩個按鈕（找 100 英里內的土地、依州瀏覽）；接著是 4 張精選待售房產卡片，每張有衛星圖、面積、價格、邊界長度；再來是可互動的美國州地圖，下方有 50 個州的文字清單作為備援；最後是三組統計數字、「最多筆資料」的州排行，以及頁尾的資料來源聲明。手機版地圖改成點選州、可左右滑動看其他地區，並保留 + 和 − 縮放按鈕。

主題與配色

極簡、像戶外地圖的自然風。主色是森林綠 #1A7F37（按鈕與連結）、深綠 #152920（次要色）、黃色 #FFDD00（強調），背景白色 #FFFFFF，文字 #1F2328，邊框淺灰 #D0D7DE。字體用系統預設無襯線字（Arial / -apple-system），標題 38px、內文 19px，圓角統一 9px，沒有陰影。Logo 用米色 #f2ede5 加綠色 #50ae73 的山形圖案。

互動設計

  • 美國州地圖：滑鼠移到州上顯示該州已量測的數量，點擊進入該州房產列表
  • 地圖可用 + 和 − 縮放、拖曳移動；手機版改成點選與左右滑動
  • 房產卡片的衛星圖用橘、綠、藍三種線分別標出該地塊、公有地與共用邊界
  • 主按鈕提供「100 英里內找地」，次要連結直接用定位開啟地圖

其他可以學的

  • 用可縮放地圖選州，滑過顯示數量地區分類網站
  • 卡片只放面積、價格、邊界長度商品列表頁
打開這個網站
同類參考Shed 的網站畫面
2026 / 10 / 16

Shed

超大標題加三種字體輪替，像策展畫廊的設計工作室

更多細節

為什麼紅

Shed 是有 25 年歷史的國際品牌與室內建築工作室，網站在 2026 年 3 月獲得 Awwwards 每日最佳網站（Site of the Day），Abduzeedo 在 2026-03-24 發文專題報導。報導指出它用 Lenis 平滑捲動、clip-path 轉場、視差與自訂游標，把案例像畫廊一樣依序呈現。注意：分數與確切得獎日期來源沒有寫，我沒有查到。

版面

由上到下單欄長頁：頂部固定導覽列，左邊是 Shed 標誌，右邊是編號選單（About、Services、Work、News & Views、Contact），Work 底下有 Featured 與 Index 兩個快速入口。首屏是超大標題 This is Shed（實測 h1 約 308px）加重複的標語，再來是介紹、理念、四大服務分類（Retail、Hospitality、Workplace、Exhibition，各配直式大圖）、客戶名單、最新消息，最底是聯絡表單。手機版選單收成 Menu / Close 按鈕（由頁面文字推測，未實測斷點）。

主題與配色

極簡、低調、像畫廊的留白風格。背景白色 #FFFFFF，文字近黑 #1C1C1C，只有連結與強調用電光藍紫 #3B15EB（深一點的 #0F00B0 為輔助色）。按鈕是 0 圓角的方正造型。字體用 OwnersWeb 當標題、SequelWeb 當內文，報導說還有 Reckless 輪替使用。

互動設計

  • Lenis 平滑捲動，滾動有慣性、很滑順
  • clip-path 轉場，圖片像被遮罩慢慢揭開
  • 視差捲動，圖片與文字移動速度不同
  • 自訂游標，滑鼠移到作品上會變樣子
  • Work 選單有 Featured 與 Index 兩種瀏覽入口

其他可以學的

  • 圖片用 clip-path 遮罩，捲到時由下往上揭開作品展示頁
  • 作品選單分 Featured 精選與 Index 全部清單兩個入口作品很多的網站
打開這個網站
得獎設計Neutomni 的網站畫面
2026 / 10 / 15

Neutomni

復古電腦桌面風，把報價做成撕票券

更多細節

為什麼紅

2026-10-13 獲 Awwwards 每日最佳網站（Site of the Day），總分 7.38／10，其中創意 7.69、設計 7.41；開發獎 7.12，動畫項 7.80；Awwwards 使用者給 8.75。另獲提名 Portfolio Honors。作者用 Webflow、Figma、GSAP 做出，證明不用手寫程式也能做出得獎級的互動。

版面

由上到下單欄長頁：頂部導覽（Logo、Services、Process、Portfolio、Pricing、預約通話按鈕）→ 大標題首屏（附本地時間與「Open for work」狀態）→ 四步驟流程 → 作品輪播 → 復古桌面區（CRT 螢幕、XP 風手機桌布、Pricing.html 檔案圖示）→ 三張撕票券報價 → 團隊 → 像 Markdown 檔的 FAQ.md（附行號）→ 客戶評語 → 結尾行動呼籲 → 頁尾。內容以區塊分段，作品與評語用卡片排列。手機版的實際變化頁面上看不出來，未確認。

主題與配色

復古電腦＋編輯風海報。主色是紅 #CF1830 配白 #FFFFFF，只用兩色，偶爾搭配黑底與淺灰圖形。文字用大標題、全大寫標籤與方括號按鈕（如 [ Let's talk ]），像程式介面。

互動設計

  • 報價做成撕票券，旁邊提示「TEAR along line」，讓人想動手撕
  • 網頁開頭有載入動畫，並搭配滾動觸發的區塊動畫
  • 復古桌面區用檔案圖示與 CRT 螢幕，把頁面變成一台舊電腦
  • 結尾有「< DRAG ME >」可拖曳元素，加上按鈕動畫
  • FAQ 寫成帶行號的 FAQ.md 檔案，用程式碼風格排版

其他可以學的

  • 首屏放本地時間與「Open for work」狀態標籤個人作品集
  • 按鈕文字加方括號，如 [ Let's talk ]設計工作室
打開這個網站
話題產品OpenSEO 的網站畫面
2026 / 10 / 14

OpenSEO

米色底加橘色點綴，把工具介面做成終端機展示

更多細節

為什麼紅

2026 年 10 月 8 日在 Product Hunt 每日榜單前段（榜單分數 403、45 則留言），網站頂端掛著「Number 1 Product of the Day」徽章。它主打開源版的 Ahrefs / Semrush 替代品，用量計費而不是每月 100 美元以上的訂閱，可免費自架，也能透過 MCP 接上 Claude、Codex、Gemini 等 AI 代理。頁面宣稱有 3,000 位以上創業者使用。注意：該日榜單有多個「Promoted」付費位置，名次不完全代表自然票數。

版面

單欄長頁，由上往下：頂端 Product Hunt 徽章、大標題「Grow your business with SEO」加一個主要按鈕、MCP 區（四個斜線指令加終端機畫面）、三張使用者推薦卡、三個功能小區塊、開源區、八張功能卡片的格狀區、最後是頁尾 Discord 連結。桌面版推薦卡與功能卡推測為多欄並排，手機版細節無法從抓取內容確認，也沒有確認是否有固定不動的元素。

主題與配色

暖色極簡風。背景是米色 #F5F1EC，文字近黑 #111111，強調橘色 #FF5600，輔助色是沙色 #E3DCCD 與 #EEE8DE，邊框 #D3CEC6。字體全站用 Inter，標題約 58px、區塊標題約 52px。按鈕圓角 8 到 10px，主按鈕黑底白字。使用 Tailwind 加 shadcn 元件庫，風格偏現代、不花俏。

互動設計

  • 「Copy setup prompt」按鈕一鍵複製設定指令，讓使用者貼給 AI 代理
  • 終端機樣式的畫面展示關鍵字研究指令與結果表格
  • 四個斜線指令（/seo-audit 等）各配一行說明，像可點選的清單
  • 八張功能卡片都是連結，點進去看各功能的說明頁

其他可以學的

  • 標題下方只放一個主要按鈕加免信用卡備註新創產品首頁
  • 頂端掛榜單徽章，並放三張真人推薦卡剛上線的產品
打開這個網站
同類參考TWODESIGNERS 的網站畫面
2026 / 10 / 13

TWODESIGNERS

比利時室內設計工作室，用單一藍色加灰底做出極簡質感

更多細節

為什麼紅

它是位在比利時列日的室內設計工作室，網站被收錄在 Awwwards，頁面顯示 1 件作品、獲得 1 個 Honorable Mention（榮譽提名），沒有拿到 Site of the Day 或 Site of the Month。它紅的原因不是大獎，而是小工作室用很克制的做法就讓人覺得有質感：只有一個主色、少量文字、一個精選專案。證據僅來自 Awwwards 個人頁與官網原始內容。

版面

頂部有白色 Logo 與四個導覽項目：Projects、About、Services、Contact。首頁只放一句自我介紹「A creative studio dedicated to interior design & new experiences」和一張精選專案卡（MUR Coffee & Cycling），卡片附上類型、地點、年份標籤。聯絡資訊獨立成一塊，列出地址、信箱、電話，另有「Start a project?」直接指向創辦人。專案列表放在獨立的 /grid 頁面。手機版的變化沒有抓到資料，無法確定。

主題與配色

極簡、偏工程感的風格。主色是飽和的電光藍 #1F28FF，深一點的藍 #0D16EA，輔助紫藍 #4F51AB（連結色），背景淺灰 #F4F4F4，文字黑色 #000000。標題用 PP Neue Montreal，內文用 PP Neue Montreal Book，說明文字用 ABC Monument Grotesk Semi-Mono 等寬字體。圓角只有 2px，幾乎是直角。內文字級約 10px，標題約 27px，大小差距明顯。

互動設計

  • 首頁只主打一個精選專案，點圖片進入專案頁
  • 專案卡用標籤列出類型、地點、年份，一眼看懂
  • 聯絡區直接放創辦人信箱與「Start a project?」入口
  • 動畫與滑動效果沒有從原始內容中抓到，無法確認

其他可以學的

  • 說明文字改用等寬字體，和標題做區隔設計類網站
  • 圓角只設 2px，保持近乎直角的利落感極簡風網站
打開這個網站
得獎設計Nick Ho Motorsports 的網站畫面
2026 / 10 / 12

Nick Ho Motorsports

賽車手個人站，灰階深度圖配螢光黃，速度感十足

更多細節

為什麼紅

2026-10-11 獲 Awwwards 每日最佳網站（Site of the Day），總分 7.24 / 10，其中動畫與轉場開發分高達 8.20，Awwwards 使用者給 9.70。同時入圍 No-code Honors。用 Webflow 搭配 GSAP 與 Three.js 做出 3D 與動畫，證明免寫程式的工具也能做出得獎等級的作品。

版面

單頁長捲動，上方固定選單用錨點連結跳到 About、History、Gallery、Calendar、Contact。開頭是大張主視覺，放車手、賽車、安全帽的灰階深度圖，旁邊排出 98 號、17 次登上頒獎台、14 個賽道、10 年以上資歷等大數字。接著依序是簡介加下一場比賽倒數、約 20 個贊助商標誌橫條、六張圖片輪播、五個章節的歷程、五張媒體報導卡片、賽事日曆、贊助手冊下載、約 15 張照片牆、聯絡表單與頁尾。手機版區塊改成單欄直排。

主題與配色

賽車感的暗黑風格。背景以黑色與深灰為主，主視覺是灰階深度圖，只用一個亮黃色 #FED60A 當強調色（取自賽車尾翼與場館燈光），搭配白色文字，安全帽的藍色只當照片裡的點綴。整體黑白灰加單一亮色，視線自然被引到重點。

互動設計

  • 主視覺灰階深度圖有 3D 景深效果，用 Three.js 製作
  • 「下一場比賽」倒數計時，天、時、分、秒即時跳動
  • 圖片輪播顯示 1/6 頁數，附跳過按鈕可直接略過
  • 影片縮圖有 Sound on 音效開關，圖片區可拖曳 drag
  • 聯絡表單送出後顯示成功或錯誤訊息

其他可以學的

  • 照片用灰階深度圖，滑鼠移動產生景深作品集首頁
  • 輪播加上「1/6」頁數和跳過按鈕圖片多的網站
打開這個網站
本週回顧L.I.S.A. — Locomotive 的網站畫面
2026 / 10 / 11

L.I.S.A. — Locomotive

整頁變成聊天問答，用對話取代傳統選單首頁

更多細節

為什麼紅

Awwwards 在 2026 年 9 月 16 日把它選為 Site of the Day。設計圈討論的重點是它不做傳統的服務介紹版面，而是讓虛擬角色 L.I.S.A. 每次只丟一句話、給幾個按鈕讓你選，像在跟人聊天。這是蒙特婁設計工作室 Locomotive 的自家形象作品，用來展現他們在互動與動態網頁上的實力。本週回顧重新打開網站，首屏先用標題逐詞累加的動畫（Digital、Digital-First、Digital-First Design、Digital-First Agency、Based in Montreal, Canada）打出自我介紹，並先跳出 Cookie 同意提示。網頁描述寫著「An independent agency with a deep skill set, big ideas, lots of heart and a global reputation」，品牌定位清楚。

版面

整頁沒有多欄排版，是單一置中的對話流：畫面中央大字顯示 L.I.S.A. 目前的提問，下方用像聊天選項的按鈕讓使用者點選回答。回答完，上一句對話會縮小、變淡並往上堆疊，再露出下一句提問。畫面最上方是固定不動的 Header：左邊 Locomotive® Logo、中間 Work / Agency / Careers / Store 導覽、右邊「Let's talk」按鈕。底部常駐一條音波視覺化 canvas。手機版導覽收進右上角漢堡選單，點開是全螢幕選單。

主題與配色

黑白極簡風，預設主題文字 #000000、背景 #FFFFFF，瀏覽器 theme-color 也設為 #ffffff。另有深色模式（背景 #000000、文字 #FFFFFF），以及磚紅 #DA382E、寶藍 #312DFB 兩組強調色背景搭配白字，推測會依對話分支切換。字體用系統無襯線字，不加裝飾，靠文字節奏與大量留白營造氣氛。

互動設計

  • 首屏標題逐詞累加顯示：Digital、Digital-First、Digital-First Design、Digital-First Agency，最後補上 Based in Montreal, Canada，像一句話慢慢被打出來
  • 核心是聊天式問答：每次只顯示一句提問與 2 到 4 個按鈕，不用打字，點選後上一句縮小變灰往上堆疊
  • 導覽列連結 hover 時文字先隨機打亂重組幾次再定格回原字
  • 進站約 1.2 秒黑底 Preloader，結束後 Logo 用 0.9 秒縮放加淡入登場
  • 底部有 Three.js 畫的動態音波，搭配可開關的環境音效按鈕
  • Cookie 提示提供「Accept All」與「Accept Necessary」兩個按鈕，另附「Let me choose」小連結

其他可以學的

  • 導覽文字 hover 時隨機打亂 0.2 秒再定格作品集導覽列
  • 用 data-theme 切換 3 組背景色，版面不變多產品線品牌站
打開這個網站
話題產品Creem 2.0 的網站畫面
2026 / 09 / 19

Creem 2.0

AI 收款平台大改版,首頁用終端機情境劇秀「一鍵開店」拿下 PH 冠軍

更多細節

為什麼紅

Creem 是主打「AI 建站者專用」的收單平台(Merchant of Record),2026 年 9 月 17 日的 2.0 改版登上 Product Hunt 當日排行榜第一名。它的口碑很大一部分來自獨立開發者社群:官網直接引用 Marc Lou、Tibo、Florin Pop 等知名 indie hacker 在 X 上的真實推文當作見證,而不是自己寫的行銷詞,這種「同溫層背書」在 Product Hunt/Hacker News 的開發者受眾裡特別有說服力。產品本身也踩中話題:讓 AI agent 直接透過 CLI/MCP 建立商品、開結帳連結、處理退款,呼應了「AI 自動開店做生意」這波討論。

版面

整頁是單欄式的全寬區塊由上往下堆疊(無側邊欄),但 Hero 區不是傳統文字+大圖,而是三個懸浮卡片組成一齣小情境劇:左邊是終端機視窗(顯示打指令建立商品的過程)、中間是結帳視窗 UI(顯示產品與價格)、四個角落飄著 Slack 風格的通知氣泡,三者疊在一起說明「一個指令自動生完成開店到收到通知」的流程。往下依序是三欄功能卡片區、顧客 Logo 橫向陳列、Billing 功能用三個並排的迷你控制面板截圖(信用額度包、用量計費、自訂計量單位)呈現、全球收款用四欄圖示+文字說明、聯盟行銷區塊有真實數據儀表板截圖(分潤比例、短連結點擊數)、文末重複一次「終端機+結帳+通知」情境劇呼應開頭、雙欄手機截圖展示 iOS/Android App、單張定價卡、橫向排列的 X 推文見證卡、FAQ 問答列表,最後是大字 CTA 收尾。頂部導覽列固定不動,內容含 Pricing、Customers、Blog 與「Get started」按鈕。

主題與配色

走黑白極簡的金融科技風,背景為白色 #FFFFFF,主要文字、Logo 與線條圖示為黑色 #000000,全站沒有大面積的彩色裝飾色。所有示意畫面(終端機、結帳、儀表板)都做成深色卡片(接近 #0A0A0A 的深黑)浮在白底上,靠明暗對比而不是彩色來製造層次,圖示則統一用細單線條(line icon)風格,搭配大量留白與置中排版,整體給人「工程師系」的乾淨可信感,只有嵌入畫面中的假資料(如金額、圖表)偶爾帶一點色彩。

互動設計

  • 首頁與文末各出現一次同一組「終端機下指令、結帳視窗、Slack 通知氣泡」的組合畫面,用重複敘事而非文字條列來說明產品怎麼運作
  • Billing 區塊把「信用額度包」「用量計費」「自訂計量單位」三種收費模式各自做成一張迷你控制面板截圖並排陳列,方便一眼比較
  • 定價區有「One-time payments / Subscriptions」的分頁切換,同一張定價卡依所選分頁顯示不同費率情境
  • 顧客見證直接嵌入真實 X 貼文卡片(含頭像、帳號、原文連結),不是重新排版過的引言文字
  • 聯盟行銷區塊用真實感的儀表板截圖(分潤比例圓餅、短連結點擊/結帳轉換數字)取代抽象說明圖

其他可以學的

  • 推薦見證直接嵌入真實社群貼文卡片,附頭像與帳號連結任何產品口碑區
  • FAQ 用一句話搶答「跟同類有何不同」等疑慮句產品官網 FAQ 區
打開這個網站
得獎設計L.I.S.A. — Locomotive 的網站畫面
2026 / 09 / 17

L.I.S.A. — Locomotive

加拿大設計工作室 Locomotive 用一個叫 L.I.S.A. 的虛擬對話角色取代傳統選單首頁,把整個官網變成一場一問一答的聊天。

更多細節

為什麼紅

Awwwards 在 2026 年 9 月 16 日把它選為 Site of the Day,設計圈討論的重點是它整頁不做傳統的服務介紹版面,而是用類似聊天機器人的問答流程引導訪客(每次只丟一句話、給幾個按鈕選項讓你選),是 Locomotive 自家官網的形象作品,展現這間工作室在互動與動態網頁上的技術實力。

版面

整頁沒有多欄式排版,是單一置中的對話流:畫面中央大字顯示 L.I.S.A. 目前的提問,下方用像聊天選項的按鈕(不是打字輸入框)讓使用者點選回答;回答完,上一句對話會縮小、變淡,往上堆疊成可回頭點擊的紀錄軌跡,再露出下一句提問,模仿真人對話的節奏。畫面最上方是固定不動的 Header,左邊是 Locomotive® 的 Logo,中間是 Work / Agency / Careers / Store 導覽,右邊是「Let's talk」按鈕;畫面最底部常駐一條用 Three.js 畫的音波視覺化 canvas。手機版導覽會收進右上角的漢堡選單,點開後是全螢幕選單,底部附語言切換與地點資訊。

主題與配色

整體走黑白極簡風,主要文字色是 #000000、背景是 #FFFFFF(對話進行中的預設「lisa」主題)。網站另外準備了深色模式(背景 #000000、文字 #FFFFFF)以及兩組強調色主題:磚紅色背景 #DA382E、寶藍色背景 #312DFB 搭配白字 #FFFFFF,推測會依對話走到的分支切換背景色來區分情境或情緒。字體用系統無襯線字,不特別裝飾,靠文字本身的節奏與排版留白營造氣氛。

互動設計

  • 進站有約 1.2 秒的黑底 Preloader,結束後 Logo 用 0.9 秒的縮放加淡入動畫(scale 0.9 到 1、透明度 0 到 1)登場,避免字體或版面跳動閃爍
  • 導覽列連結與 Logo 滑過(hover)時文字會先隨機打亂重組幾次、再定格回原字的「shuffle」效果
  • 核心是聊天機器人式的問答流程:每次只顯示一句提問與 2 到 4 個按鈕選項,不用打字,點選後上一句對話縮小變灰堆疊到上方,露出下一句提問
  • 背景有可開關的環境音效(loop 播放),畫面上有 toggle sound 按鈕控制靜音與否
  • 頁面底部有一條用 Three.js(WebGL canvas)畫的動態音波視覺化效果,常駐在畫面下緣
  • 部分選項是「複製到剪貼簿」按鈕,點擊後會直接複製內容並顯示確認提示文字

其他可以學的

  • 頁面進場先蓋一層純色 Preloader,約 0.9 秒後 Logo 用縮放(0.9 到 1)加淡入(透明度 0 到 1)的動畫移除遮罩,避免字體與版面載入時的閃爍跳動圖片或字體較重、講究第一印象的形象官網
  • 用 CSS 變數(例如 --color、--color-bg)集中定義主題色,搭配 data-theme 屬性一鍵切換 3 種以上配色(黑白、紅底、藍底),讓同一套版面依情境或使用者選擇即時換色有多條產品線或需要依活動主題切換視覺的品牌官網
打開這個網站