技能概述
Dating Web 產生一個單屏消費級儀表盤，感覺好似周日報紙嘅交友專欄被渲染成軟件。編輯字體、單一克制嘅強調色、大量負空間，無滑動配對或 hookup 陳詞濫調。
數據就係故事 —— 用 serif 展示字體渲染 metric 數字，這些屏幕生死取決於數字呈現。
觸發關鍵字
- dating app、dating site、matchmaking、social dashboard
- community dashboard、consumer dashboard
- 約會應用、婚戀
什麼時候用
- 需要一個交友 / 配對應用嘅儀表盤
- 消費級產品，數據就係故事
- 用戶要求「約會應用 dashboard」、「社交網絡儀表盤」
使用方法
自然語言觸發
做一個 dating app 嘅 dashboard
matchmaking 儀表盤
consumer social dashboard
設計規則
品牌聲音： 詼諧、觀察性、略帶文學感。生成真實、具體嘅文案。例如：「會喺一天內回信息的人」、「manageable. two are now friends.」。
布局順序：
- 頂部 ticker — 單行水平帶，左側 tagline，右側「NEXT TIER AT 2,080 MUTUALS」，mono 大寫 + letter-spacing。下方細線。
- 左側導航欄 — 220–260px sidebar。品牌 serif italic 字標。用戶卡片（avatar / handle / ratio / tier）。三組導航：「TODAY」、「YOU」、「ARCHIVE」。激活項用強調色文字 + 強調點。
- 主內容區：
- KPI 網格 — 3×3（9 格）。每格：小寫 mono 標籤、超大 serif 數字（強調色或 muted green 表正向，muted red 表謹慎）、一行 italic 腳註。
- 柱狀圖面板 — 「mutuals — last 30 days」。細高黑色柱，最後兩天用強調色高亮。
- 趨勢面板 — 「match rate — last 12 weeks」。
自檢
- 讀起來克制、編輯感、稍微有趣 —— 唔係輕浮
- 單一強調 token 最多用喺 3-4 個地方
- 無滑動配對、無愛心、無火 emoji
輸出格式
單一 HTML 文檔，<!doctype html> 到 </html>，CSS inline。
奶油色米白背景，正文 serif，到處 mono 標籤。
SVG 柱狀圖約 30 根柱子，高度各異。
font-feature-settings: 'tnum' 用於 metric 數字。
實際例子
用戶：「Design 'mutuals' — a dating site for X posters. Daily digest dashboard with stats, mutual-matches bar chart, and a community ticker.」
生成結果：
- Ticker：「the people who'd text back within a day」→「NEXT TIER AT 2,080 MUTUALS」
- KPI 網格：9 格，具體數字如「1,842 ↑ 41 this wk · healthy growth.」
- 柱狀圖：30 天相互匹配，最後兩天紅色高亮
- 趨勢：「STEADY CLIMB FROM 8% → 14%」