dating-web

约会网站技能

制作一个单屏消费者仪表盘，让人感觉像是把周日报纸上的约会专栏做成了软件。采用编辑风格字体、克制的单一强调色，以及大量留白，不要做成滑动卡片，也不要有约炮套路。

工作流

1. 阅读当前的 DESIGN.md（已在上方注入）。指标数字采用衬线展示字体令牌——这些屏幕成败的关键就在数字上。
2. 选择品牌语气——诙谐、善于观察，带点文学气息。生成真实、具体的文案。示例：“那些会在一天内回复的人”、“还算过得去。有两位现在成了朋友。”、“你最出色的兼容性优势。”
3. 布局，按以下顺序：
   • 顶部滚动条——顶部一行横向信息条，使用无衬线眉题样式：左侧标语，右侧显示“下一等级需达到 2,080 位互相关注者”，两者均使用等宽大写字母并增加字间距。下方加细分隔线。
   • 左侧栏——宽度 220–260px。顶部为衬线斜体品牌字标。用户卡片（头像 / 用户名 / 比率 / 等级）。三组导航：“今日”（样本、收件箱、队列、通知）、“你”（你的数据、互相关注者与社群、屏蔽列表、设置）、“档案”（过往期刊、已过期的匹配）。当前选中项使用强调色文字和强调色圆点。
   • 主要内容：
     • KPI 网格——3 列 × 3 行（或 9 个单元格）。每个单元格包含：小号等宽大写标签、超大衬线数字（正向数据使用强调色或柔和绿色，需留意的数据使用柔和红色），以及一行斜体脚注。具体数据要合理——“1,842 ↑ 本周增加 41 · 增长健康。”、“高于同群体中位数 14%。”、“4 位 / 你社交圈里的前任 · 还算过得去。有两位现在成了朋友。”
     • 柱状图面板——“互相关注者 — 过去 30 天”。高而细的黑色柱条，最近两天用强调色突出显示。上方标题说明使用等宽字体：“↑ 趋势上升 · 本月新增 3 位亲密互相关注者 · 两位都来自同一个线下活动”。
     • 趋势面板——“匹配率 — 过去 12 周”。下方一行正文文案（“从 8% 稳步升至 14%。这要归功于加入一个社群……”）。底部加分隔线。
4. 编写单个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联。
   • 背景使用奶油色米白，正文使用衬线字体，标签处处使用等宽字体。
   • 在指标数字上使用 font-feature-settings: 'tnum'。
   • 使用包含约 30 根高度各异柱条的 SVG 柱状图。
   • 在滚动条、侧边栏、KPI 网格、图表和趋势面板上添加 data-od-id。
5. 自检：
   • 整体克制、有编辑感，略带幽默——不要色情。
   • 单一强调色最多用于 3–4 处（一个 KPI、两根高亮柱条、一个当前选中的导航项）。
   • 不要滑动卡片、爱心或火焰表情符号。

输出约定

在 <artifact> 标签之间输出：

<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
<!doctype html>
<html>...</html>
</artifact>

在产物前写一个句子，之后不写任何内容。