Back to Details

dating-web

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Dating Web Skill

约会网站Skill

Produce a single-screen consumer dashboard that feels like a Sunday-paper dating column rendered as software. Editorial type, single restrained accent, lots of negative space, no swipe deck or hookup tropes.
制作一个单屏消费级仪表盘，给人一种将周日报纸约会专栏转化为软件的感觉。采用编辑风格字体、单一克制的强调色、大量留白，禁止使用滑动卡片或 hookup 类俗套设计。

Workflow

工作流程

  1. Read the active DESIGN.md (injected above). Lean into a serif display token for the metric numerals — these screens live or die on numerals.
  2. Pick a brand voice — wry, observational, slightly literary. Generate real, specific copy. Examples: "the people who'd text back within a day", "manageable. two are now friends.", "your single greatest compatibility asset."
  3. Layout, in order:
    • Top ticker — single-row horizontal strip across the top in a sans-serif eyebrow style: tagline left, "NEXT TIER AT 2,080 MUTUALS" right, both in mono caps with letter-spacing. Thin rule below.
    • Left rail — 220–260px sidebar. Brand wordmark in serif italic at top. User card (avatar / handle / ratio / tier). Three groups of nav: "TODAY" (specimen, inbox, queue, notifications), "YOU" (your stats, mutuals & communities, blocked, settings), "ARCHIVE" (past issues, expired matches). Active item gets accent text + accent dot.
    • Main content:
      • KPI grid — 3 columns × 3 rows (or 9 cells). Each cell: small caps mono label, an oversized serif numeral (use accent or muted green for positive, muted red for caution), one-line italic footnote. Plausible specifics — "1,842 ↑ 41 this wk · healthy growth.", "14% above median for your cohort.", "4 / exes in your circle · manageable. two are now friends."
      • Bar chart panel — "mutuals — last 30 days". Tall thin black bars, last two days highlighted in accent. Caption above with "↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE" in mono.
      • Trend panel — "match rate — last 12 weeks". One line of body copy below ("STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN…"). Footer rule.
  4. Write a single HTML document: 
    • <!doctype html>
      through 
      </html>
      , CSS inline.
    • Background creamy off-white, body serif, mono labels everywhere.
    • Use 
      font-feature-settings: 'tnum'
      on the metric numerals.
    • SVG bar chart with ~30 bars, varied heights.
    • data-od-id
      on ticker, sidebar, kpi grid, chart, trend.
  5. Self-check:
    • Reads as restrained, editorial, slightly funny — not horny.
    • Single accent token used in 3–4 places max (one KPI, two highlight bars, one nav active state).
    • No swipe deck, no hearts, no fire emoji.
  1. 阅读当前的DESIGN.md（已注入上方）。重点使用衬线显示字体作为指标数字——这类界面的成败取决于数字呈现效果。
  2. 选择品牌语气——诙谐、带有观察性、略带文学感。生成真实具体的文案示例：“会在一天内回复消息的人”，“可控。其中两人现已成为朋友。”，“你最大的兼容性优势。”
  3. 布局顺序：
    • 顶部滚动条：顶部横向单行条，采用无衬线小字风格：左侧为标语，右侧为“累计2080次互相匹配即可解锁下一等级”，均为等宽大写字母并设置字符间距。下方添加细分隔线。
    • 左侧导航栏：宽度为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'
      。
    • 使用SVG绘制包含约30个高度各异柱状条的图表。
    • 为滚动条、侧边栏、KPI网格、图表、趋势模块添加
      data-od-id
      属性。
  5. 自我检查：
    • 整体风格克制、具有编辑感、略带趣味——而非低俗。
    • 单一强调色仅用于3–4处（一个KPI、两个高亮柱状条、一个激活导航项）。
    • 无滑动卡片、无爱心图标、无火焰表情。

Output contract

输出约定

Emit between 
<artifact>
tags:
<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
将结果放在
<artifact>
标签内：
<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
<!doctype html>
<html>...</html>
</artifact>
在artifact前添加一句话，之后无其他内容。