交友網站技巧
製作一個單螢幕的消費級儀表板，整體調性像週日報紙的約會專欄，卻以軟體的形式呈現。使用編輯式排版、單一節制強調色、大量留白，沒有滑卡或約會陳腔濫調。
工作流程
- 讀取上層注入的 DESIGN.md。以襯線顯示字體來呈現指標數字——這類畫面成敗繫於數字。
- 挑選品牌語調——帶點機智、觀察力，略具文學感。撰寫真實、具體的文案。例如：「那些一天內就會回覆的人」、「可應付。其中兩位現在是朋友。」、「你最大的單一兼容性資產。」
- 版面配置，依序為：
- 頂部跑馬燈——單行水平橫幅，置於頂端，使用無襯線細眉字型：左側標語，右側「NEXT TIER AT 2,080 MUTUALS」，兩者皆採用等寬大寫字母，並帶字母間距。下方細分隔線。
- 左側導航——220–260px 側邊欄。頂部放置品牌字標（襯線斜體）。使用者卡片（頭像 / 名稱 / 比值 / 等級）。三組導航：「TODAY」（樣本、收件匣、佇列、通知）、「YOU」（你的統計、互相配對與社群、封鎖、設定）、「ARCHIVE」（過往期數、已過期配對）。啟用中的項目以強調色文字與圓點標示。
- 主要內容：
- KPI 網格——3 欄 × 3 列（共 9 格）。每格：小型大寫等寬標籤、超大的襯線數字（正值使用強調色或柔和綠色，注意事項使用柔和紅色）、一行斜體附註。寫出具體的資料——「1,842 ↑ 41 本週 · 健康成長。」、「比同類群體中位數高 14%。」、「4 位前伴侶在你的圈中 · 可應付。其中兩位現在是朋友。」
- 長條圖面板——「互相配對 — 最近 30 天」。高而細的黑長條，最後兩天以強調色標示。上方等寬標題：「↑ 趨勢上升 · +3 本月密切互相配對 · 兩筆來自同一場外活動」。
- 趨勢面板——「配對率 — 最近 12 週」。下方一行內文：「從 8% 穩定爬升至 14%。歸因於加入一個社群…」。底部分隔線。
- 撰寫一個 HTML 文件：
<!doctype html>至</html>，CSS 內嵌。- 背景米白、內文襯線、標籤皆使用等寬字型。
- 在指標數字上使用
font-feature-settings: 'tnum'。 - SVG 長條圖約 30 條長條，高度各異。
- 在跑馬燈、側邊欄、KPI 網格、圖表、趨勢區塊加上
data-od-id。
- 自我檢查：
- 整體感覺節制、編輯式、略帶幽默——不是性騷擾。
- 單一強調色最多使用 3–4 處（一個 KPI、兩個高亮長條、一個導航啟用狀態）。
- 沒有滑卡、沒有愛心、沒有火焰 emoji。
輸出約定
在 <artifact> 標籤內輸出：
<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
<!doctype html>
<html>...</html>
</artifact>
在 artifact 之前輸出一個句子，其後不要有任何內容。