skillhub-083-dating-web
wehub-skill-sync
4.0 KiB
4.0 KiB
name, description, triggers, od
| name | description | triggers | od | ||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| dating-web | 一款面向消费者的约会/婚恋仪表盘——左侧导航栏、社区信号滚动条、核心 KPI、30 天互选匹配柱状图、以及匹配率趋势模块。采用编辑式字体排印、克制的强调色。适用于需求方提出"约会网站"、"婚恋匹配"、"社区仪表盘"、"社交网络仪表盘"或任何以数据为叙事核心的消费类产品场景。 |
|
|
Dating Web Skill
制作一个单屏消费级仪表盘，呈现出如同周日副刊约会专栏被转化为软件产品般的质感。编辑式字体、单一克制的强调色、大量留白，不包含滑动卡片或速配套路。
工作流程
- 阅读当前 DESIGN.md（已在上方注入）。在指标数字上大胆使用衬线展示字体——这类页面的成败取决于数字的呈现。
- 选择品牌语调——诙谐、观察式、略带文学气息。生成真实、具体的内容文案。示例："那些一天内就会回复消息的人"、"可控。其中两人已成了朋友。"、"你最大的单身竞争力资产。"
- 布局，按顺序：
- 顶部滚动条——贯穿顶部的单行横向条，采用无衬线眉毛样式：左侧标语，右侧"NEXT TIER AT 2,080 MUTUALS"，均为等宽大写字母加字间距。下方一条细线分隔。
- 左侧导航栏——220–260px 宽的侧边栏。顶部品牌字标为衬线斜体。用户卡片（头像/用户名/比率/等级）。三组导航："TODAY"（样本、收件箱、队列、通知）、"YOU"（你的统计、互选与社区、已屏蔽、设置）、"ARCHIVE"（往期内容、已过期匹配）。当前激活项使用强调色文本加强调色圆点。
- 主内容区：
- KPI 网格——3 列 × 3 行（共 9 格）。每格包含：小号大写等宽标签、超大衬线数字（正值使用强调色或柔和绿色，警示使用柔和红色）、一行斜体脚注。需为具体可信的数据——"1,842 ↑ 本周 +41 · 健康增长"、"高于同群组中位数 14%"、"圈内有 4 位前任 · 可控。其中两人已成了朋友。"
- 柱状图面板——"mutuals — last 30 days"。高而细的黑色柱条，最后两天用强调色高亮。上方说明文字为"↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE"，等宽字体。
- 趋势面板——"match rate — last 12 weeks"。下方一行正文说明（"STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN…"）。底部分割线。
- 编写一个独立的 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 之前写一句话，之后不再附加任何内容。