skillhub-083-dating-web
wehub-skill-sync
66 行
4.0 KiB
Markdown
66 行
4.0 KiB
Markdown
---
|
||
name: dating-web
|
||
description: |
|
||
一款面向消费者的约会/婚恋仪表盘——左侧导航栏、社区信号滚动条、核心 KPI、30 天互选匹配柱状图、以及匹配率趋势模块。采用编辑式字体排印、克制的强调色。适用于需求方提出"约会网站"、"婚恋匹配"、"社区仪表盘"、"社交网络仪表盘"或任何以数据为叙事核心的消费类产品场景。
|
||
triggers:
|
||
- "dating app"
|
||
- "dating site"
|
||
- "matchmaking"
|
||
- "social dashboard"
|
||
- "community dashboard"
|
||
- "consumer dashboard"
|
||
- "约会应用"
|
||
- "婚恋"
|
||
od:
|
||
mode: prototype
|
||
platform: desktop
|
||
scenario: personal
|
||
featured: 5
|
||
preview:
|
||
type: html
|
||
entry: index.html
|
||
design_system:
|
||
requires: true
|
||
sections: [color, typography, layout, components]
|
||
example_prompt: "设计'互选'——一个面向 X 平台发帖用户的约会网站。包含统计数据的每日摘要仪表盘、互选匹配柱状图以及社区滚动条。"
|
||
---
|
||
|
||
# Dating Web Skill
|
||
|
||
制作一个单屏消费级仪表盘，呈现出如同周日副刊约会专栏被转化为软件产品般的质感。编辑式字体、单一克制的强调色、大量留白，**不**包含滑动卡片或速配套路。
|
||
|
||
## 工作流程
|
||
|
||
1. **阅读当前 DESIGN.md**（已在上方注入）。在指标数字上大胆使用衬线展示字体——这类页面的成败取决于数字的呈现。
|
||
2. **选择品牌语调**——诙谐、观察式、略带文学气息。生成真实、具体的内容文案。示例："那些一天内就会回复消息的人"、"可控。其中两人已成了朋友。"、"你最大的单身竞争力资产。"
|
||
3. **布局**，按顺序：
|
||
- **顶部滚动条**——贯穿顶部的单行横向条，采用无衬线眉毛样式：左侧标语，右侧"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…"）。底部分割线。
|
||
4. **编写**一个独立的 HTML 文档：
|
||
- 从 `<!doctype html>` 到 `</html>`，CSS 内联。
|
||
- 背景为奶油色米白，正文衬线字体，各处标签使用等宽字体。
|
||
- 指标数字使用 `font-feature-settings: 'tnum'`。
|
||
- SVG 柱状图包含约 30 根柱条，高度各异。
|
||
- 在滚动条、侧边栏、KPI 网格、图表、趋势模块上设置 `data-od-id` 属性。
|
||
5. **自我检查**：
|
||
- 整体呈现克制、编辑风、略带幽默——而非情色意味。
|
||
- 单个强调色最多在 3–4 处使用（一个 KPI、两根高亮柱条、一个导航激活状态）。
|
||
- 没有滑动卡片、没有心形图标、没有火焰 emoji。
|
||
|
||
## 输出约定
|
||
|
||
在 `<artifact>` 标签之间输出：
|
||
|
||
```
|
||
<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
|
||
<!doctype html>
|
||
<html>...</html>
|
||
</artifact>
|
||
```
|
||
|
||
artifact 之前写一句话，之后不再附加任何内容。
|