呢個係 Flow Studio HK 嘅互動教學示範 — 下面個「Lumo」只係用嚟拆解嘅虛構例子，唔係真產品。 了解 Flow Studio HK →

Lumo 2 分鐘 quick tour

呢個係一個假 video 預覽，示範緊 native <dialog> element 嘅 modal pattern — 自動 focus trap、Esc 關閉、backdrop click 關閉。

🎬 Modal demo · 純 HTML <dialog>
⚡️ 新功能 · Lumo 3.0 已上線 — AI 助你排日程 睇下有咩新嘢 →
新一代專注 App

專注一啲，做多啲，活好啲

Lumo 用 AI 幫你規劃每一日，將大目標拆成可以即刻動手嘅 25 分鐘專注時段。

★★★★★ 4.9 · 超過 24,000 人喺度專注緊
今日 · 5 月 26
寫今季 OKR 大綱
已完成
準備星期三 design review
急
寫部落格新 post — 第 1 稿
深度
同 Sarah catch-up
25 min
🎯
連續 12 日每日達標
⏱
2 小時 40 分今日專注時間

深受 800+ 公司同團隊愛用

NORDIC
Pixel & Co.
Mango
FORMA
Linewise
Solar•
功能

三樣嘢，搞掂你成日嘅生產力問題

唔需要學一堆方法論。Lumo 將最 work 嘅三件事，做到簡單到唔可以再簡單。

🧠

AI 自動排日程

講低你今日想做嘅嘢，Lumo 識自動排入時間表，將「做唔晒」變「邊樣最緊要」。

⏱

25 分鐘專注 Timer

用番經典 Pomodoro，再加 ambient sound、自動 block 手機 notification。

📊

每週反思報告

逢星期日自動 generate：邊段時間最 productive、邊類工作偷你最多時間。

專注 Timer

一個按鈕，世界靜哂落嚟

撳一下開始 25 分鐘 deep work。Lumo 會幫你 mute notification、開白噪音、最後送你一個小儀式 — 唞 5 分鐘。

  • 14 款 ambient sound（咖啡店、海浪、雨聲⋯）
  • 自動同 Mac/iOS 嘅 Focus mode 連線
  • 結束後自動記低做咗咩
17:32
Deep Focus
反思報告

數據話你知，你嘅一週去咗邊

唔係單純記時間 — Lumo 會分析你嘅 pattern，講你聽邊類工作做得最有效率、邊類偷時間最多。

  • 逢星期日朝早送到你 inbox
  • 可以 export 做 PDF / Notion
  • 連續記錄會解鎖 badge
本週專注時間 5 月 19 – 25
一二三四五六日
用 Lumo 之後

啲嘢開始唔同

12.4hrs
每週節省嘅時間
由用家自己 report，係用 Lumo 4 週嘅平均數
本週連續達標
一 二 三 四 五
5 日
🎯
84%
日程完成率
⚡️
3.2x
深度專注時間
最 productive 時段
9am – 11am · 你嘅 deep work zone
點用

3 步開始，由今日做起

1

講低想做嘅嘢

用一句說話，講低今日要搞掂咩。例如：「寫好 design proposal」。

2

Lumo 幫你拆

AI 自動拆成 3-5 個 25 分鐘嘅小任務，排入你日程。

3

撳開始

一段段做，到夜晚自動 review。明日繼續。

「以前每日開咗 20 個 tab，乜都做緊但乜都做唔晒。用咗 Lumo 兩個月，第一次覺得做完一日，係真係做完。」
陳家俊 Ken Product Designer · Mango
收費

由免費開始，隨時升級

所有 plan 都有 14 日全功能試用。隨時 cancel，唔問點解。

Starter
$0/月

啱啱試水、淨係要個 timer。

  • 基本 Pomodoro timer
  • 3 個 ambient sound
  • 每日最多 5 個任務
最多人揀
Pro
$58/月

每日認真做嘢嘅你。

  • AI 自動排日程 講低「我要寫 docs、開 standup、回 email」，Lumo AI 自動拆成 25 分鐘小任務排晒入時間表。
  • 無限任務 + 全部 14 款聲音
  • 每週反思報告
  • Mac / iOS Focus mode 整合
Team
$148/月 / 5 人

細 team 一齊專注。

  • Pro 全部功能
  • Team focus session
  • Admin dashboard
  • 專屬 onboarding
常見問題

不如先問清楚先

識。Lumo 完全支援繁體中文、英文。AI 接受你打中文輸入任務，內部直接理解，唔需要 translate。
最大分別係 AI 自動排日程 — 免費版要你自己手動排，Pro 版講一句就搞掂。另外無限任務、反思報告呢啲都係 Pro only。
取消之後 data 會保留 90 日，期間你可以隨時 export 做 CSV / Notion / Markdown。90 日後正式刪除，唔留底。
Mac、Windows、iOS、Android 都有 native app。亦有 web app，瀏覽器都用得。所有平台 data 即時同步。

每一日，認真做番一啲嘢

由今日嘅 25 分鐘開始。

🙌 唔係 Lumo 整 — 係我整

鍾意呢個拆解？等我幫你個網生意

我用 AI 幫你由零砌、或者執靚你 AI 出嘅版本 — 做到一個睇得明、收得到 lead 嘅 landing page。識指、識睇、識改，先做得出令客戶撳得落手嘅嘢。

搵我傾 →

由 Flow Studio HK 設計同製作

全部 24 個 web design pattern · 文字速查

上面互動教學嘅文字版 — 每個 pattern 嘅白話解釋、4 點檢查清單、同抄畀 AI 嘅 prompt。方便 Ctrl / ⌘ + F 搜尋，亦等搜尋引擎同 AI 助手讀得到呢啲內容。

Announcement Bar · 公告條 · 又叫 Promo Bar / Top Bar

網頁最頂嗰條細條，用嚟推新嘢嘅 banner。

對住 screenshot 點 check

  • 訊息夠唔夠短？一行內講完？
  • 有冇 emoji 同 strong 突出 keyword？
  • 結尾有冇 inline link 引人撳？
  • 背景深色 / 中性色，唔搶 hero？

想叫 AI 改？抄呢句

Banner 太搶眼，蓋過 hero
將 announce bar 改用深色 gradient 背景 + 13px 細字 + 白色文字，唔好用品牌色實底。
想加 emoji 同 highlight keyword
Emoji 放最前，用 <strong> 標出最重要嗰個 keyword，再加 inline 連結 →。
想用戶可以關閉
右邊加 ✕ 細掣，撳咗用 localStorage 記低 dismissed 之後唔再 show。

差版 vs 好版

差版
  • 用品牌色實底蓋過 hero
  • 一段長文 / 冇 highlight
  • 冇 inline link 引人撳
好版
  • 深色 gradient + 13px 細白字
  • 1 emoji + 1 strong keyword
  • 結尾 inline →

Navigation Bar · 導覽列 · Nav / Header

永遠黐喺最頂嗰條導覽列，幫人跳去任何地方。

對住 screenshot 點 check

  • 左 logo / 中 nav links / 右 CTA — 3 段式 layout？
  • Scroll 落去 nav 仲跟住喺度（sticky）？
  • 有冇玻璃模糊感（透明 + backdrop-filter）？
  • CTA 同 nav links 視覺對比夠大？

想叫 AI 改？抄呢句

Nav scroll 唔到時消失
Nav 加 position: sticky; top: 0; z-index: 50。
Nav 同 page 顏色撞
Nav 加 backdrop-filter: blur(14px) saturate(180%) + rgba 半透明背景，scroll 之後再加細邊框。
Nav 入面太擠
中間 links gap 28px，logo 同 CTA 兩邊各 32px gap，padding 16px 24px。

差版 vs 好版

差版
  • Scroll 之後消失
  • Logo 同 links 攝晒一齊
  • CTA 太細混入 links
好版
  • Sticky + backdrop blur + 半透明
  • 左 logo / 中 nav / 右 CTA
  • CTA 用實底突圍

Dropdown / Mega Menu · 下拉選單 · 又叫 Flyout / Mega Menu

Hover / Click trigger 出嚟嘅 panel。Nav 想 expand 多嘢就用呢個。

對住 screenshot 點 check

  • Hover + Click 兩個都 trigger 到？
  • Esc 鍵可以關 + focus 還原到 trigger？
  • Caret ▾ 隨開合自動旋轉提示狀態？
  • Panel 入面每個 item 有 icon + 標題 + 副文？

想叫 AI 改？抄呢句

Dropdown 太硬 pop 出 / 消失
Panel 用 opacity + transform translateY 漸入，唔好用 display: none / block — 加 transition: 0.2s cubic-bezier。
Hover 容易誤觸
Trigger 同 panel 之間留 12px gap + 大個 hover region。Mouse enter dropdown container 而唔係 trigger 本身。
冇 a11y
Trigger 加 aria-expanded + aria-controls 指住 panel；Esc 關、撳完還原 focus。啲連結唔使加 role=menu / role=menuitem（除非你真係寫齊上下鍵導航）。

差版 vs 好版

差版
  • 得文字 link 冇 icon
  • Hover 立即消失冇 buffer
  • 冇 aria 屬性
好版
  • Icon + title + sub 三層資訊
  • opacity + translate 漸入
  • aria-expanded + Esc + focus 還原

Hero Section · Hero 區 · 又叫 Above the Fold

網頁最頂、最大、最搶眼嗰幅。一打開第一眼睇到嘅嘢。

對住 screenshot 點 check

  • Headline 短唔短？一句、講 benefit（唔係 feature）？
  • 有冇主 CTA + 次 CTA 兩粒掣？
  • CTA 下面有冇 social proof（評分 / 用戶數 / 頭像）？
  • 右邊有冇 visual / mockup 撐住個畫面？

想叫 AI 改？抄呢句

Headline 太長太硬
Headline 改成一句講 benefit，例如「做多啲、做好啲」，次要訊息放副標題。
CTA 唔夠突出
主 CTA 用品牌色實底 + 大陰影，次 CTA 改 outline / ghost — 一定要視覺有主次。
個 hero 平平無起伏
右邊加 product mockup，加 perspective + rotateY(-8deg) + 大陰影，再喺旁邊加 2 個浮動 stats card。
冇 social proof
CTA 下面加：4 個重疊頭像 + ★★★★★ 4.9 + 用戶數（24,000 唔好寫 24k）。

差版 vs 好版

差版
  • Headline 一大段講 feature
  • 3 粒 CTA 並排令人 paralyze
  • 冇 social proof / 冇 visual
好版
  • Headline 一句講 benefit
  • 1 主 (實底) + 1 次 (outline)
  • CTA 下加 4.9 + 24,000 + 右邊 mockup

Eyebrow · 眉標 · 又叫 Kicker / Pre-headline

Headline 上面嗰粒細嘅 label。畀 context 用嘅。

對住 screenshot 點 check

  • 字夠細（13px 左右）？
  • 字距夠開（letter-spacing 大）？
  • 有冇用 uppercase？
  • 配品牌色 pill bg？有冇 dot indicator？

想叫 AI 改？抄呢句

Eyebrow 太搶眼蓋過 headline
Eyebrow font-size 13px，letter-spacing 0.12em，淺色 rgba 背景 + 品牌色文字 — 一定要細過 H1。
想加生氣
Eyebrow 前面加一粒 6px 圓點，加 @keyframes pulse 2s ease-in-out infinite。
想做 pill 樣
border-radius: 999px; padding: 6px 14px; background: rgba(brand, 0.08)。

差版 vs 好版

差版
  • 字大過 H1 搶風頭
  • 冇 letter-spacing 似普通字
  • 冇 pill / 冇 dot
好版
  • 13px UPPERCASE + 0.12em
  • Pill 圓邊 + 品牌色淡背景
  • 前面 6px pulse dot

Primary CTA · Call to Action · 主要轉換按鈕

叫人撳嘅主掣。網頁最重要嗰粒按鈕。

對住 screenshot 點 check

  • Copy 寫 benefit 唔寫動作？（「免費試 14 日」唔好寫「Sign Up」）
  • Hover 有冇浮起 + 加陰影？
  • 主 CTA + 次 CTA 兩粒（最忌 3 粒並排）？
  • CTA 同周圍對比夠強（背景中性 / CTA 品牌色）？

想叫 AI 改？抄呢句

CTA 唔夠搶眼
主 CTA 用品牌色實底 + box-shadow: 0 8px 20px rgba(brand, 0.35)，hover translateY(-2px) 加深 shadow。
CTA 文字太硬太 generic
Copy 改 benefit-focused：「免費開始 — 永遠免費」、「14 日免費試 — 唔使俾卡」。
一定要兩粒 CTA
主 CTA 品牌色實底，次 CTA outline / ghost（例如「▶ 睇 2 分鐘 demo」）— 兩粒對比要強。
CTA 太硬太 sharp
border-radius: 999px 做完全圓 pill — 現代 SaaS 標配，感覺更 friendly。

差版 vs 好版

差版
  • 寫「Sign Up」純動作
  • 3 粒 CTA 視覺平均
  • Outline / solid 唔分
好版
  • 「免費試 14 日 — 唔使俾卡」
  • 1 主 (實底+陰影) + 1 次 (outline)
  • Hover translateY(-2px) 強化點擊感

Social Proof · 社會證明 · Trust Signal

頭像 + 評分 + 用戶數。轉化率最高 ROI 嘅元素之一。

對住 screenshot 點 check

  • 放係 CTA 下面？（撳之前最後一刻打底）
  • 評分同數字用真實值（唔好作大、唔好砌假）？
  • 頭像重疊但有間隙感？
  • Stat 數字夠具體（24,000 唔好寫 24k）？

想叫 AI 改？抄呢句

頭像太靠太實
頭像 28px，margin-left: -8px 重疊，加 2px solid border 同 background 同色（製造視覺間隙）。
冇真實感
用真實評分同具體用戶數（例如寫 24,000 唔好寫 25k）。⚠️ 唔好作大，亦唔好為咗「睇落真啲」而改細真實評分 — 嗰個係作假。
冇真人相片用
用 linear-gradient 漸變色做圓形頭像 — 唔需要真人，但有人物 placeholder 感。⚠️ 淨係 demo / 未有真客戶嘅 wireframe 先用 placeholder；真網站一定要用真客戶、真評價、真數字 — 作假 social proof 喺好多地方屬違法廣告。

差版 vs 好版

差版
  • 「最好嘅 productivity app」純口號
  • 作大或砌假評分／數字
  • 「many users」唔具體
好版
  • 4.9 星 + 24,000 真實用戶
  • 4 個重疊 gradient avatar
  • 放係 CTA 下面打底

Hero Visual / Product Mockup · 主視覺 · 產品截圖

右邊嗰個 product mockup。一眼睇明個 app 做咩。

對住 screenshot 點 check

  • Mockup 有冇 3D 角度（rotateY 細少少）？
  • 有冇深陰影將 mockup 由背景抽出嚟？
  • 旁邊有冇浮動 stat card？
  • Hover 有冇 micro-interaction？

想叫 AI 改？抄呢句

Mockup 太平太靜
父 element 加 perspective: 1200px，mockup transform: rotateY(-8deg) rotateX(4deg)。
Mockup 同背景太融
加 box-shadow: 0 24px 60px rgba(0,0,0,0.14) — 大而 soft 嘅陰影。
想加生氣感
兩邊絕對位置加 2 個浮動 stat card（連續達標、今日專注時間），@keyframes float 4s ease-in-out infinite。
冇真 app 用
用 div + card layout 砌個假 app UI — header dots、task list、stat — 已經夠表達。

差版 vs 好版

差版
  • 用 stock photo 唔關事
  • 正面 mockup 平平無 depth
  • 右邊空白冇嘢撐
好版
  • 用 div 砌真 app UI
  • perspective + rotateY 3D 角度
  • 加 2 個浮動 stat card

Info Tooltip · 懸停提示 · 又叫 Popover

Hover ⓘ icon 出嘅小提示。畀額外 detail 而唔擠 layout。

對住 screenshot 點 check

  • Trigger 用 ⓘ icon（universal「more info」signal）？
  • Hover + keyboard focus 都 trigger 到？
  • 有箭嘴 indicator 指返 trigger？
  • 4-5 句句子內，唔好寫成段？

想叫 AI 改？抄呢句

只係 mouse hover work
用 :focus-within 而唔係 :focus — etrigger 同 bubble 都 visible 喺 focus-within 範圍內。加 aria-describedby 等 screen reader 讀到。
Tooltip 跑出 viewport
CSS Anchor Positioning（新）或者 JS Floating UI library。簡單版用 transform translateX(-50%) 居中 + 加箭嘴 ::after。
Bubble 太細睇唔清
min-width 220px，font-size 12.5px，line-height 1.5，padding 10px 12px。深色背景 + 白字對比清楚。

差版 vs 好版

差版
  • Hover 即時硬 pop 出
  • 冇 keyboard / focus 支援
  • 冇箭嘴指返 trigger
好版
  • opacity + translateY 漸入
  • :focus-within 鍵盤支援
  • ::after 三角箭嘴 indicator

Modal / Dialog · 彈出視窗 · 又叫 Lightbox

蓋住成個畫面嘅 popup。video preview、sign-up、確認 dialog 都係呢個 pattern。

對住 screenshot 點 check

  • 有冇 backdrop（黑色半透蓋住底）？
  • 可唔可以 Esc 關 / backdrop click 關？
  • Focus 自動入去 modal 入面（focus trap）？
  • 關咗之後 focus 還原到觸發嘅 button？

想叫 AI 改？抄呢句

自己用 div 砌 modal 唔啱 a11y
用 native <dialog> element + dialog.showModal()。Browser 自動 focus trap、Esc 關閉、backdrop、role=dialog aria-modal — 唔使自己寫。
Backdrop 唔識點整
用 ::backdrop pseudo-element：dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); }
想加入動畫 entrance
加 @keyframes pop animation 喺 dialog[open]，scale(0.92) translateY(20px) → scale(1) translateY(0) cubic-bezier 彈出。

差版 vs 好版

差版
  • 用 div + position:fixed 自己砌
  • 冇 backdrop（背景仲撳到）
  • 冇 focus trap / Esc 關
好版
  • Native <dialog> + showModal()
  • ::backdrop pseudo + blur
  • 自動 focus trap + Esc + aria-modal

Trust Bar / Logo Wall · 信任列 · 客戶 Logo 牆

一行客戶 logo。「呢啲大公司都用緊」借勢借得最直接。

對住 screenshot 點 check

  • Logo 全部灰階 / 半透明（避免色彩衝突）？
  • 至少 5–6 個 logo？
  • Label 用「深受 X 公司愛用」呢類 small caps 標題？
  • 位置喺 hero 之後第一個（剛 hook 完即刻打底）？

想叫 AI 改？抄呢句

Logo 太花搶眼
所有 logo 改用同一灰色 var(--ink-soft)，opacity: 0.65，hover 變 1。唔好用真實品牌色。
Logo 太少冇說服力
至少 5 個，最理想 6–8 個。如果真係少，配文字證據：「800+ 公司用緊」。
冇真實 logo 用
用 fictional 公司名（NORDIC、Pixel & Co.、Mango），display font 寫法，當佢哋係 wordmark。⚠️ 淨係 demo / wireframe 先咁做；真網站要用真客戶 logo（攞咗授權），作假客戶 logo 喺好多地方屬違法廣告。

差版 vs 好版

差版
  • Logo 用真實品牌色花花
  • 只有 2-3 個 logo
  • 冇 label 解釋
好版
  • 全部統一灰色 opacity 0.65
  • 6+ logos 或加「800+ 公司」
  • 上面 small caps「深受 X 公司愛用」

Feature Grid (3-col) · 功能 3 欄格仔

3 欄 grid 講 3 個 key feature。「3」係 magic number。

對住 screenshot 點 check

  • 剛剛好 3 個 card（多過 4 太散）？
  • Card 之間 gap 24px 左右？
  • 每張 card 結構一致（icon → title → desc）？
  • Hover 有冇 micro-interaction？

想叫 AI 改？抄呢句

Feature 太多想擠晒
揀最重要 3 個，其他擺後面 zigzag deep-dive section。Hero 嘅 feature grid 一定唔好超過 3。
Card 太悶
Hover translateY(-6px) + 上方出現一條 3px coral 細線（::before scaleX 0 → 1，transform-origin: left）。
手機 layout 散晒
@media 880px 改 grid-template-columns: 1fr，gap 改細少少。

差版 vs 好版

差版
  • 5-6 個 feature 擠一行
  • Card 之間冇 gap
  • Static 冇 hover 反饋
好版
  • 正好 3 個（magic number）
  • Gap 24px + 統一 padding
  • Hover translateY + shadow + 出現頂部 coral 線

Feature Card · 功能卡

單一張功能卡。Card 係而家 web design 嘅基本單位。

對住 screenshot 點 check

  • Border-radius 大啲（20–24px）？
  • Padding 夠（30–36px）？
  • Icon 有冇 soft gradient background？
  • Hover 浮起 + shadow + 邊框消失？

想叫 AI 改？抄呢句

Card 太硬太 sharp
border-radius: 24px; padding: 32px; 用 cubic-bezier(0.22, 1, 0.36, 1) 嘅 transition，比 ease 更「彈」。
Icon 太細太單調
Icon 用 52×52px 圓角方塊，soft linear-gradient 漸變背景，emoji 24px 居中。
Card 太靜
Hover: transform translateY(-6px) + shadow 變 lg + border-color: transparent — 視覺反饋強。

差版 vs 好版

差版
  • border-radius 8px 工程感
  • Padding 細擠
  • Icon 純文字 emoji
好版
  • border-radius 24px + padding 32px
  • Soft gradient icon 52px
  • Cubic-bezier transition 有彈性

Zigzag / Alternating Layout · 交錯排版

深入講 feature 用嘅交錯 layout — 一行圖+文，下一行文+圖。

對住 screenshot 點 check

  • 每行只講一個 feature（避免擠）？
  • 左右交替（視線會 zigzag 落底）？
  • 50/50 分配（視覺平衡）？
  • 背景同上面 section 唔同色（分區）？

想叫 AI 改？抄呢句

Layout 太靜止
zigzag-row 用 grid-template-columns: 1fr 1fr，每行 .reverse 用 order: 2 將文字反到對面。
太多 row 太悶
2–3 個 zigzag 已經足夠。多過建議拆做 tabbed feature comparison 或 bento grid。
同上面 feature grid 太似
Zigzag section 整個轉淺色背景（var(--soft)），同上面 section 視覺分開。

差版 vs 好版

差版
  • 每行塞 2-3 個 feature
  • 全部圖同一邊
  • 同上面同色冇分區
好版
  • 每行只一個 feature
  • 左右交替（順視線）
  • 背景轉 var(--soft) 分隔

SVG Progress Ring · SVG 環狀進度條

SVG 整圓形進度。比 PNG 細、retina 清，可以即時改色。

對住 screenshot 點 check

  • 兩層 circle（背景灰 + 前景品牌色）？
  • Stroke 夠厚（10–12px）？
  • stroke-linecap: round（端點圓滑）？
  • SVG 旋轉 -90deg（由 12 點開始）？

想叫 AI 改？抄呢句

進度條太細嘢
同 AI 講：「個進度環太幼，整粗啲、由 12 點開始順時針填」。技術版：stroke-width 12px，r=90，stroke-dasharray = 2πr ≈ 565。
想 animate 進度
加 transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1)，updating dashoffset 即係改進度。
想加中間數字
svg 外層 position: relative，中間放 .timer-num position: absolute inset: 0 + flex column 居中。

差版 vs 好版

差版
  • 用 PNG image（rasterize 唔清）
  • Stroke 4px 太幼
  • 冇 animation 死寂
好版
  • SVG 兩層 circle stroke 12px
  • -90deg rotate 由 12 點開始
  • stroke-dashoffset 1s transition

Bento Grid · 便當格 · 大小拼接 layout

Apple keynote 嘅大小 cell 拼接 layout。一塊大配兩塊細，視覺有節奏。

對住 screenshot 點 check

  • 至少一個 cell 大過其他（focal point）？
  • 大小有 rhythm（唔好全部一樣 size）？
  • 每個 cell 一個 idea，唔好擠？
  • 至少一個 cell 反色（深底 / 漸變）做對比？

想叫 AI 改？抄呢句

Layout 太平太悶
用 grid-template-columns: repeat(4, 1fr) + grid-template-rows: auto auto，再俾一個 cell 用 grid-column: span 2 + grid-row: span 2 變大。
冇視覺 rhythm
其中一個 cell 反色（var(--ink) bg + 白字），另一個用 linear-gradient soft 漸變底 — 等視線喺幾個 cell 之間跳。
想加 chart / streak 內容
用純 div + flex 砌 mini chart（bento-bars / streak-day），CSS-only 唔 import library。

差版 vs 好版

差版
  • 4 個 cell 等size 似 grid-card
  • 全部白底冇對比
  • 每 cell 塞 3-4 個 stat
好版
  • 大細 mix（1×big + 2×wide + 2×small）
  • 一個反深色 + 一個漸變
  • 每 cell 一個 hero stat

How It Works (Steps) · 操作流程 · 3 步教學

1 → 2 → 3 流程教學。降低「我用唔嚟啩」嘅心理 barrier。

對住 screenshot 點 check

  • 剛剛好 3 步（多過就唔係「簡單」）？
  • 中間有冇虛線連起（順序感）？
  • 每步描述夠短（一兩句）？
  • 正中對齊？

想叫 AI 改？抄呢句

步驟太多
一定要壓縮到 3 步。超過嘅 detail 放 deep-dive section 或 documentation page。
步驟之間冇連接感
用 ::before pseudo 喺 grid container 上畫虛線（repeating-linear-gradient 90deg），由 step 1 連到 step 3。
手機虛線變死位
@media 880px 將 ::before display: none — 垂直排冇必要虛線。

差版 vs 好版

差版
  • 5+ 步太多（不如睇 docs）
  • 冇連接視覺（3 個獨立 card）
  • 每步講太長太多 detail
好版
  • 正好 3 步
  • 中間虛線連 1 → 2 → 3
  • 一步一兩句 + 大粒數字圓

Testimonial Section · 客戶評價

深色 section + 一句客戶引言。真人證言勝過萬字 marketing。

對住 screenshot 點 check

  • 深色背景同前後 section 反色？
  • 有冇巨大 quote mark 做背景裝飾？
  • 引言用 serif italic 字體？
  • 署名齊全（名 + 職位 + 公司）？

想叫 AI 改？抄呢句

Testimonial 太靜
::before 加巨大 watermark：content: '\"'; font-size: 360px; color: rgba(brand, 0.15); position: absolute。
冇個人感
加 avatar（linear-gradient 漸變色圓形）、名（粗）、職位 + 公司（細灰）— 越具體越可信。⚠️ 真網站要用真實客戶嘅引言同身份（攞咗同意）；作假 testimonial 喺好多地方屬違法廣告。
引言太長悶
剪到一句最有力嗰句，原引言可以放 case study page。長 quote 等於冇 quote。

差版 vs 好版

差版
  • 引言 3 段長文
  • 冇 author（純 quote）
  • 冇大 quote mark 視覺 anchor
好版
  • 一句最有力嗰句
  • 名 + 職位 + 公司齊
  • ::before 360px 透明 quote mark

Pricing Table · 收費表

收費表。設計目標：引導人揀你最想佢揀嗰個 plan（通常中間）。

對住 screenshot 點 check

  • 中間 plan highlight 咗（深色 + scale 大少少）？
  • 中間有冇「最多人揀」badge？
  • Feature list 用 ✓ 唔用 ·？
  • 價錢字大、單位（/月）細？

想叫 AI 改？抄呢句

3 個 plan 一樣大冇焦點
中間 featured plan：transform: scale(1.04) + 反深色（var(--ink) bg + 白字）— 視覺即刻跳出嚟。
冇推薦提示
Featured plan position: relative + ::before absolute badge「最多人揀」coral 背景 + uppercase。
Button 高度唔齊
price-card 用 flex column + .price-features flex: 1，等 button 永遠 stick 喺 card 底。
價錢字太細
price-amount font-size: 48px + display font + bold。span 入面嘅「/月」改 16px regular。

差版 vs 好版

差版
  • 3 個 plan 一樣大冇焦點
  • 冇「最多人揀」badge
  • Button 高低不齊
好版
  • 中間 plan scale(1.04) + 反深色
  • Featured 加 coral badge
  • .price-features flex:1 等 button 對齊

FAQ Accordion · 常見問題 · 摺合式

摺合式常見問題。SEO 加分 + 解最後疑慮。

對住 screenshot 點 check

  • 一條 Q 一條細線分隔？
  • + icon 開咗變 ×（旋轉 45 度）？
  • 答案 2–3 句就夠，唔好長篇？
  • 問題用 user 嘅原話，唔係 marketing 語？

想叫 AI 改？抄呢句

Accordion animation 唔順 / 長答案 cut 親
同 AI 講：「FAQ 展開要順滑、長答案唔好 cut 親」。技術版：CSS max-height 由 0 開始，JS 開時設成 element.scrollHeight + 'px'，transition: max-height 0.4s ease。
答案太長太悶
剪到 2–3 句最精華。Detail 寫去 documentation page，FAQ 只係解最常問。
+ icon 唔識變
.faq-q::after content: '+'; .open .faq-q::after transform: rotate(45deg) — 自動變 ×。

差版 vs 好版

差版
  • 每條 Q 答 5 段似 docs
  • Static 永遠開晒（冇 accordion）
  • Marketing 語言寫問題
好版
  • 每條答 2-3 句
  • + → × rotate + max-height scrollHeight
  • 用戶原話（「咁幾錢？」）

Final CTA Section · 結尾 CTA · 又叫 Closing Pitch

Footer 之前嗰大幅。最後一次叫人撳。

對住 screenshot 點 check

  • 極簡（一 headline + 一 CTA）？
  • CTA 消除最後 objection（「唔使俾卡」、「永遠免費」）？
  • 背景同 hero 呼應（形成 page 嘅 visual bracket）？
  • 正中對齊，焦點單一？

想叫 AI 改？抄呢句

太多嘢分散注意
Final CTA 一定要極簡 — 一個 H2，一句副文，一粒掣。其他嘢全部移走，包括 nav links。
Copy 同 hero 重複
寫總結式 + 召喚行動：「每一日，認真做番一啲嘢」配 CTA 加 micro-copy 消 objection。
同上面 section 太靜止
加 radial-gradient 從頂部落（rgba 品牌色 0.18 → transparent）— 視線自然落去 CTA。

差版 vs 好版

差版
  • 加埋 form / nav / 其他 link
  • Copy 重複 hero
  • 冇消除最後 objection
好版
  • 極簡：一 H2 + 一句 + 一掣
  • 寫總結 + 召喚行動
  • CTA 加「唔使俾卡」消 objection

Toast Notification · Toast 通知 · 又叫 Snackbar

上面 slide 入嚟、3-6 秒自動消失嘅 mini 通知。Save 成功、welcome back 都用。

對住 screenshot 點 check

  • 夠細，唔擋 main content？
  • Auto-dismiss（4-6 秒）+ 可以手動 ✕ 關？
  • aria-live="polite"，screen reader 讀得到？
  • 一次只 show 一個（多個會排隊）？

想叫 AI 改？抄呢句

同 modal 搞錯
Toast = 通知性、唔阻斷、auto dismiss。Modal = 強制 focus、要 user 行動。完全唔同 pattern，唔好混用。
Toast 卡死冇消失
加 setTimeout 6000ms 自動 hide + clear timer on close。用 transform + opacity transition 入出，唔好 display: none。
Screen reader 唔讀
加 role="status" + aria-live="polite"。重要錯誤用 role="alert" + aria-live="assertive"。

差版 vs 好版

差版
  • 冇 auto-dismiss 卡死
  • 塞長段文字
  • 冇 ✕ 關 button
好版
  • 6 秒自動消失
  • 一句 + sub-text 兩行
  • icon + body + close 三段 grid
© 2026 Flow Studio HK · 呢個互動拆解由 Flow Studio HK 設計同製作 · 搵我整網頁 →