约会网站技能
生成一个单屏消费者仪表盘，其风格如同一张周日报纸约会专栏被渲染成软件。编辑字体、单一克制色彩、大量留白，不包含滑动卡片或速配套路。
工作流程
- 阅读当前的 DESIGN.md（已在上面注入）。采用衬线显示字体用于指标数字——这些页面的成败在于数字的呈现。
- 选择一个品牌语调——机智、观察性、略带文学性。生成真实、具体的文案。示例：“那些会在一天内回复短信的人”、“可控的。其中两个已成为朋友。”、“你最重要的单身兼容资产。”
- 布局，按顺序：
- 顶部滚动条——顶部横向单行条，使用无衬线细眉样式：左侧标语，右侧“NEXT TIER AT 2,080 MUTUALS”，均采用等宽大写并带有字母间距。下方一条细线。
- 左侧导航栏——220–260px 宽的侧边栏。顶部为斜体衬线品牌标识。用户卡片（头像/用户名/比率/等级）。三组导航：“今日”（样本、收件箱、队列、通知）、“你”（你的统计、相互关注与社区、已屏蔽、设置）、“归档”（往期、已过期匹配）。当前激活项使用强调色文字加上强调色圆点。
- 主内容区：
- 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、两个高亮条形、一个导航激活状态）。
- 没有滑动卡片，没有爱心，没有火焰表情符号。
输出约定
在 <artifact> 标签之间输出：
<artifact identifier="dating-slug" type="text/html" title="约会仪表盘 — 标题">
<!doctype html>
<html>...</html>
</artifact>
在 artifact 之前写一句话，之后不写任何内容。