chore: import zh skill dating-web

2026-07-13 21:36:14 +08:00
commit feff72f933
4 changed files with 467 additions and 0 deletions
@@ -0,0 +1,9 @@
+# WeHub 来源说明
+
+- Skill 名称：`dating-web`
+- 中文类目：消费社交/约会产品数据叙事页
+- 上游仓库：`nexu-io__open-design`
+- 上游路径：`plugins/_official/examples/dating-web/SKILL.md`
+- 上游链接：https://github.com/nexu-io/open-design/blob/HEAD/plugins/_official/examples/dating-web/SKILL.md
+- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理
+- 原作者、版权和许可证信息以上游仓库为准
@@ -0,0 +1,65 @@
+---
+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 之前写一句话，之后不再附加任何内容。
@@ -0,0 +1,265 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>mutuals · 你的约会生活，以你结交的人来衡量</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Serif+Text:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --paper: #f4ede0;
+      --panel: #f9f3e7;
+      --ink: #1f1c14;
+      --muted: #7a7264;
+      --rule: #d6cdb6;
+      --accent: #c14a2b;
+      --good: #406b3a;
+      --bad: #b6422f;
+      --serif-display: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
+      --serif-body: 'DM Serif Text', 'Iowan Old Style', Georgia, serif;
+      --mono: 'IBM Plex Mono', ui-monospace, monospace;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.55 var(--serif-body); }
+
+    .ticker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 28px;
+      border-bottom: 1px solid var(--ink);
+      font: 11px/1 var(--mono);
+      color: var(--muted);
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+    }
+    .ticker .left { display: flex; align-items: center; gap: 18px; }
+    .ticker b { color: var(--ink); font-weight: 500; }
+
+    .layout { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 44px); }
+    aside.rail {
+      border-right: 1px solid var(--ink);
+      padding: 22px 22px 22px 28px;
+      display: flex; flex-direction: column; gap: 22px;
+    }
+    aside .brand { font: italic 800 30px/1 var(--serif-display); letter-spacing: -0.005em; }
+    aside .brand .dot { color: var(--accent); }
+    aside .user { display: flex; align-items: center; gap: 10px; }
+    aside .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 12px/1 var(--mono); letter-spacing: 0.06em; }
+    aside .user .meta { font: 13px/1.2 var(--mono); }
+    aside .user .meta b { display: block; color: var(--ink); font-weight: 500; }
+    aside .user .meta span { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
+
+    aside h4 { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 10px; }
+    aside ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
+    aside li { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 4px; font: 15.5px/1.2 var(--serif-body); color: var(--ink); cursor: default; }
+    aside li.active { background: rgba(193,74,43,0.10); color: var(--accent); font-weight: 600; }
+    aside li.active::before { content: '●'; color: var(--accent); margin-right: 6px; font-size: 9px; }
+    aside li .badge { background: var(--accent); color: var(--paper); font: 10px/1 var(--mono); padding: 3px 6px; border-radius: 999px; letter-spacing: 0.06em; }
+    aside li .badge.gray { background: var(--ink); }
+
+    aside .status {
+      margin-top: auto;
+      padding-top: 18px;
+      border-top: 1px solid var(--rule);
+      font: 11px/1.4 var(--mono);
+      color: var(--muted);
+      letter-spacing: 0.06em;
+    }
+    aside .status .live::before { content: '●'; color: #2f7d4a; margin-right: 6px; }
+
+    main { padding: 30px 36px 44px; }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-auto-rows: minmax(120px, auto);
+      gap: 22px 36px;
+      margin-bottom: 36px;
+    }
+    .stat { padding: 4px 0 14px; border-bottom: 1px solid var(--rule); }
+    .stat .label { font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
+    .stat .value {
+      font: 800 56px/1.05 var(--serif-display);
+      letter-spacing: -0.01em;
+      font-feature-settings: 'tnum';
+      margin-bottom: 6px;
+    }
+    .stat .value.good { color: var(--good); }
+    .stat .value.bad { color: var(--bad); }
+    .stat .value em { font-style: italic; font-weight: 400; }
+    .stat .note { font: italic 13.5px/1.4 var(--serif-body); color: var(--muted); max-width: 32ch; }
+    .stat .arrow { font-style: normal; color: var(--good); font-size: 14px; }
+
+    .panel { padding: 18px 0 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
+    .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
+    .panel-head h3 { margin: 0; font: italic 24px/1 var(--serif-display); letter-spacing: -0.005em; }
+    .panel-head .meta { font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; max-width: 56ch; text-align: right; }
+    .panel svg { width: 100%; height: 220px; display: block; }
+    .panel .axis { display: flex; justify-content: space-between; font: 10px/1 var(--mono); color: var(--muted); letter-spacing: 0.1em; padding: 8px 4px 0; text-transform: uppercase; }
+
+    .lower-panel .lede { font: italic 15px/1.55 var(--serif-body); color: var(--muted); margin: 0; max-width: 70ch; }
+    .lower-panel .lede b { color: var(--ink); font-style: normal; font-weight: 600; }
+
+    @media (max-width: 1100px) {
+      .layout { grid-template-columns: 1fr; }
+      aside.rail { border-right: none; border-bottom: 1px solid var(--ink); }
+      .grid { grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="ticker" data-od-id="ticker">
+    <div class="left">
+      <span>你的约会生活，以你结交的人来衡量</span>
+      <span style="opacity:0.6;">·</span>
+      <span>每周回顾</span>
+    </div>
+    <div>下一等级需 <b>2,080 个共同好友</b></div>
+  </div>
+
+  <div class="layout">
+    <aside class="rail" data-od-id="rail">
+      <div class="brand">mutuals<span class="dot">.</span></div>
+      <div class="user">
+        <div class="avatar">si</div>
+        <div class="meta"><b>@signals</b><span>比率 22.9 · 第三级</span></div>
+      </div>
+
+      <div>
+        <h4>今日</h4>
+        <ul>
+          <li>样本 <span class="badge">3</span></li>
+          <li>收件箱 <span class="badge">3</span></li>
+          <li>队列 <span style="font:11px/1 var(--mono);color:var(--muted);">6</span></li>
+          <li>通知 <span class="badge gray">12</span></li>
+        </ul>
+      </div>
+      <div>
+        <h4>你</h4>
+        <ul>
+          <li class="active">你的数据</li>
+          <li>共同好友与社区</li>
+          <li>已屏蔽 <span style="font:11px/1 var(--mono);color:var(--muted);">14</span></li>
+          <li>设置</li>
+        </ul>
+      </div>
+      <div>
+        <h4>归档</h4>
+        <ul>
+          <li>往期回顾</li>
+          <li>已过期匹配 <span style="font:11px/1 var(--mono);color:var(--muted);">7</span></li>
+        </ul>
+      </div>
+
+      <div class="status">
+        <div class="live">在线 · 上次匹配 11 分钟前</div>
+        <div style="opacity:0.7;margin-top:2px;">mutuals.v0.6.1</div>
+      </div>
+    </aside>
+
+    <main data-od-id="main">
+      <section class="grid" data-od-id="kpis">
+        <div class="stat">
+          <div class="label">已存档共同好友</div>
+          <div class="value"><em>1,842</em></div>
+          <p class="note"><span class="arrow">↑</span> 本周 +41 · 健康增长。</p>
+        </div>
+        <div class="stat">
+          <div class="label">24 小时内回复</div>
+          <div class="value good">47</div>
+          <p class="note">那些会在一天内回消息的人。</p>
+        </div>
+        <div class="stat">
+          <div class="label">社区</div>
+          <div class="value"><em>14</em></div>
+          <p class="note">4 个活跃 · 7 个潜水 · 3 个推测。</p>
+        </div>
+
+        <div class="stat">
+          <div class="label">匹配率</div>
+          <div class="value good">14%</div>
+          <p class="note">高于你所在群体的中位数。</p>
+        </div>
+        <div class="stat">
+          <div class="label">第二次约会</div>
+          <div class="value"><em>3</em></div>
+          <p class="note">今年 7 次初次约会的成果。你很投入。</p>
+        </div>
+        <div class="stat">
+          <div class="label">朋友圈中的前任</div>
+          <div class="value bad">4</div>
+          <p class="note">尚可管理。其中两人已成为朋友。</p>
+        </div>
+
+        <div class="stat">
+          <div class="label">共同屏蔽</div>
+          <div class="value"><em>214</em></div>
+          <p class="note">你最大的兼容性资产。</p>
+        </div>
+        <div class="stat">
+          <div class="label">平均回复时间</div>
+          <div class="value"><em>2.1<span style="font-size:32px;">小时</span></em></div>
+          <p class="note">太快了。等 4–6 小时。他们能察觉到。</p>
+        </div>
+        <div class="stat">
+          <div class="label">下线时长</div>
+          <div class="value bad">4</div>
+          <p class="note">/ 168 小时（本周）。求你了。</p>
+        </div>
+      </section>
+
+      <section class="panel" data-od-id="bars">
+        <div class="panel-head">
+          <h3>共同好友 — <em>最近 30 天</em></h3>
+          <div class="meta">↑ 上升趋势 · 本月新增 +3 位亲密共同好友 · 其中两位来自同一场线下活动</div>
+        </div>
+        <svg viewBox="0 0 720 220" preserveAspectRatio="none" aria-hidden="true">
+          <g fill="#1f1c14">
+            <rect x="6"   y="170" width="14" height="50"></rect>
+            <rect x="30"  y="158" width="14" height="62"></rect>
+            <rect x="54"  y="146" width="14" height="74"></rect>
+            <rect x="78"  y="172" width="14" height="48"></rect>
+            <rect x="102" y="162" width="14" height="58"></rect>
+            <rect x="126" y="138" width="14" height="82"></rect>
+            <rect x="150" y="120" width="14" height="100"></rect>
+            <rect x="174" y="148" width="14" height="72"></rect>
+            <rect x="198" y="132" width="14" height="88"></rect>
+            <rect x="222" y="108" width="14" height="112"></rect>
+            <rect x="246" y="118" width="14" height="102"></rect>
+            <rect x="270" y="154" width="14" height="66"></rect>
+            <rect x="294" y="130" width="14" height="90"></rect>
+            <rect x="318" y="100" width="14" height="120"></rect>
+            <rect x="342" y="86"  width="14" height="134"></rect>
+            <rect x="366" y="116" width="14" height="104"></rect>
+            <rect x="390" y="138" width="14" height="82"></rect>
+            <rect x="414" y="92"  width="14" height="128"></rect>
+            <rect x="438" y="74"  width="14" height="146"></rect>
+            <rect x="462" y="106" width="14" height="114"></rect>
+            <rect x="486" y="84"  width="14" height="136"></rect>
+            <rect x="510" y="124" width="14" height="96"></rect>
+            <rect x="534" y="98"  width="14" height="122"></rect>
+            <rect x="558" y="68"  width="14" height="152"></rect>
+            <rect x="582" y="80"  width="14" height="140"></rect>
+            <rect x="606" y="46"  width="14" height="174" fill="#c14a2b"></rect>
+            <rect x="630" y="60"  width="14" height="160" fill="#c14a2b"></rect>
+            <rect x="654" y="92"  width="14" height="128"></rect>
+            <rect x="678" y="76"  width="14" height="144"></rect>
+            <rect x="702" y="90"  width="14" height="130"></rect>
+          </g>
+        </svg>
+        <div class="axis"><span>3 月 18 日</span><span>3 月 25 日</span><span>4 月 1 日</span><span>4 月 8 日</span><span>4 月 15 日</span><span>今天</span></div>
+      </section>
+
+      <section class="panel lower-panel" data-od-id="trend">
+        <div class="panel-head">
+          <h3>匹配率 — <em>最近 12 周</em></h3>
+          <div class="meta">稳步攀升，从 8% → 14%。归因于加入了一个社区（Founders Who Post，第 4 周）。</div>
+        </div>
+        <p class="lede">真正的增长，不是感觉而已。<b>加入一个社区</b>对匹配率的提升超过了四个月的个人资料修改——坚持在那个圈子里发帖，多做，少发推。</p>
+      </section>
+    </main>
+  </div>
+</body>
+</html>
@@ -0,0 +1,128 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-dating-web",
+  "title": "Dating Web",
+  "title_i18n": {
+    "zh-CN": "约会网站",
+    "zh-TW": "約會網站",
+    "ja": "デート ウェブ",
+    "ko": "데이팅 웹",
+    "de": "Dating Web",
+    "fr": "Dating Web",
+    "ru": "Dating Web",
+    "es": "Dating Web",
+    "pt-BR": "Dating Web",
+    "it": "Dating Web",
+    "vi": "Dating Web",
+    "pl": "Dating Web",
+    "id": "Dating Web",
+    "nl": "Dating Web",
+    "ar": "Dating Web",
+    "tr": "Dating Web",
+    "uk": "Dating Web",
+    "en": "Dating Web"
+  },
+  "version": "0.1.0",
+  "description": "A consumer-feeling dating / matchmaking dashboard — left rail navigation,\nticker bar of community signals, headline KPIs, a 30-day mutual-matches\nbar chart, and a match-rate trend block. Editorial typography, restrained\naccent. Use when the brief asks for a \"dating site\", \"matchmaking\",\n\"community dashboard\", \"social network dashboard\", or any consumer\nproduct where the data is the story.",
+  "description_i18n": {
+    "zh-CN": "消费级约会/配对仪表板，包含左侧导航栏、社区动态滚动条、核心KPI指标、30天互相匹配柱状图和匹配率趋势模块。编辑风格排版，克制的强调色。适用于约会网站、配对服务、社区仪表板或社交网络等消费类产品界面。",
+    "zh-TW": "消費級約會/配對儀表板，包含左側導航欄、社群動態跑馬燈、核心KPI指標、30天互相配對長條圖和配對率趨勢模組。編輯風格排版，克制的強調色。適用於約會網站、配對服務、社群儀表板或社交網路等消費類產品介面。",
+    "ja": "コンシューマー向けのマッチングダッシュボード。左サイドナビゲーション、コミュニティシグナルのティッカーバー、主要KPI、30日間の相互マッチング棒グラフ、マッチ率トレンドブロックを含む。エディトリアルタイポグラフィと控えめなアクセント。デートサイト、マッチング、コミュニティダッシュボード、SNSダッシュボードなど、データが主役の消費者向け製品に最適。",
+    "ko": "소비자 친화적인 데이트/매칭 대시보드. 왼쪽 레일 네비게이션, 커뮤니티 신호 티커바, 주요 KPI, 30일 상호 매칭 막대 차트, 매칭률 트렌드 블록 포함. 편집 타이포그래피와 절제된 강조색. 데이트 사이트, 매칭 서비스, 커뮤니티 대시보드, 소셜 네트워크 등 데이터가 핵심인 소비자 제품에 적합.",
+    "de": "Ein konsumentenorientiertes Dating-/Matchmaking-Dashboard mit linker Navigationsleiste, Ticker mit Community-Signalen, wichtigen KPIs, 30-Tage-Balkendiagramm für gegenseitige Matches und Matchrate-Trendblock. Redaktionelle Typografie mit zurückhaltenden Akzenten. Geeignet für Dating-Websites, Matchmaking, Community- und Social-Network-Dashboards.",
+    "fr": "Tableau de bord de rencontres/matchmaking grand public avec navigation latérale gauche, barre de signaux communautaires, KPI principaux, graphique en barres des matchs mutuels sur 30 jours et bloc de tendance du taux de match. Typographie éditoriale et accent sobre. Idéal pour sites de rencontres, matchmaking, tableaux de bord communautaires ou réseaux sociaux.",
+    "ru": "Потребительская панель знакомств/сватовства с левой боковой навигацией, бегущей строкой сигналов сообщества, ключевыми KPI, столбчатой диаграммой взаимных совпадений за 30 дней и блоком тренда коэффициента совпадений. Редакционная типографика, сдержанные акценты. Подходит для сайтов знакомств, сватовства, панелей сообществ и социальных сетей.",
+    "es": "Panel de citas/emparejamiento orientado al consumidor con navegación lateral izquierda, barra de señales de comunidad, KPIs destacados, gráfico de barras de coincidencias mutuas de 30 días y bloque de tendencia de tasa de coincidencia. Tipografía editorial con acento contenido. Ideal para sitios de citas, emparejamiento, paneles de comunidad o redes sociales.",
+    "pt-BR": "Painel de namoro/matchmaking com visual de consumidor, incluindo navegação lateral esquerda, barra de sinais da comunidade, KPIs principais, gráfico de barras de matches mútuos de 30 dias e bloco de tendência de taxa de match. Tipografia editorial com destaque contido. Ideal para sites de namoro, matchmaking, painéis de comunidade ou redes sociais.",
+    "it": "Dashboard per incontri/matchmaking orientato al consumatore con navigazione laterale sinistra, ticker dei segnali della community, KPI principali, grafico a barre dei match reciproci a 30 giorni e blocco trend del tasso di match. Tipografia editoriale con accenti sobri. Ideale per siti di incontri, matchmaking, dashboard di community o social network.",
+    "vi": "Bảng điều khiển hẹn hò/ghép đôi dành cho người tiêu dùng với thanh điều hướng bên trái, thanh ticker tín hiệu cộng đồng, KPI chính, biểu đồ cột ghép đôi tương hỗ 30 ngày và khối xu hướng tỷ lệ ghép đôi. Kiểu chữ biên tập, điểm nhấn tiết chế. Phù hợp cho trang web hẹn hò, ghép đôi, bảng điều khiển cộng đồng hoặc mạng xã hội.",
+    "pl": "Konsumencki panel randkowy/matchmakingowy z lewą nawigacją boczną, paskiem sygnałów społeczności, kluczowymi KPI, wykresem słupkowym wzajemnych dopasowań z 30 dni i blokiem trendu współczynnika dopasowań. Typografia redakcyjna, stonowane akcenty. Idealny dla serwisów randkowych, matchmakingu, paneli społecznościowych lub dashboardów sieci społecznościowych.",
+    "id": "Dashboard kencan/perjodohan berorientasi konsumen dengan navigasi rel kiri, ticker bar sinyal komunitas, KPI utama, grafik batang kecocokan mutual 30 hari, dan blok tren tingkat kecocokan. Tipografi editorial dengan aksen terkendali. Cocok untuk situs kencan, perjodohan, dashboard komunitas, atau dashboard jejaring sosial.",
+    "nl": "Consumentgericht dating/matchmaking dashboard met linker railnavigatie, tickerbar met gemeenschapssignalen, hoofd-KPI's, 30-daagse staafdiagram voor wederzijdse matches en matchrate-trendblok. Redactionele typografie met ingetogen accent. Geschikt voor datingsites, matchmaking, gemeenschapsdashboards of sociale netwerken.",
+    "ar": "لوحة تحكم للمواعدة/التوفيق الاستهلاكية تتضمن شريط تنقل أيسر، شريط إشارات المجتمع، مؤشرات KPI رئيسية، رسم بياني شريطي للتطابقات المتبادلة لـ30 يومًا، وكتلة اتجاه معدل التطابق. طباعة تحريرية بلمسات مقيدة. مثالية لمواقع المواعدة ولوحات المجتمع والشبكات الاجتماعية.",
+    "tr": "Tüketici odaklı flört/eşleştirme kontrol paneli; sol yan navigasyon, topluluk sinyalleri ticker barı, ana KPI'lar, 30 günlük karşılıklı eşleşme çubuk grafiği ve eşleşme oranı trend bloğu içerir. Editoryal tipografi, sade vurgu. Flört siteleri, eşleştirme, topluluk panoları veya sosyal ağ dashboardları için idealdir.",
+    "uk": "Споживча панель знайомств/сватання з лівою навігацією, бігучим рядком сигналів спільноти, ключовими KPI, стовпчиковою діаграмою взаємних збігів за 30 днів та блоком тренду коефіцієнта збігів. Редакційна типографіка, стримані акценти. Підходить для сайтів знайомств, сватання, панелей спільнот або соціальних мереж.",
+    "en": "A consumer-feeling dating / matchmaking dashboard — left rail navigation,\nticker bar of community signals, headline KPIs, a 30-day mutual-matches\nbar chart, and a match-rate trend block. Editorial typography, restrained\naccent. Use when the brief asks for a \"dating site\", \"matchmaking\",\n\"community dashboard\", \"social network dashboard\", or any consumer\nproduct where the data is the story."
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Open Design",
+    "url": "https://github.com/nexu-io"
+  },
+  "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/dating-web",
+  "tags": [
+    "example",
+    "first-party",
+    "prototype",
+    "personal",
+    "web",
+    "desktop",
+    "dating-app",
+    "dating-site",
+    "matchmaking",
+    "social-dashboard",
+    "community-dashboard",
+    "consumer-dashboard",
+    "untitled"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "prototype",
+    "platform": "desktop",
+    "scenario": "personal",
+    "surface": "web",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "Design ‘mutuals’ — a dating site for X posters. Daily digest dashboard with stats, mutual-matches bar chart, and a community ticker.",
+        "zh-CN": "使用这个插件完成以下任务：Design ‘mutuals’ — a dating site for X posters. Daily digest dashboard with stats, mutual-matches bar chart, and a community ticker."
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "Dating Web"
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "designSystem": {
+        "primary": true
+      },
+      "assets": [
+        "./example.html"
+      ]
+    },
+    "pipeline": {
+      "stages": [
+        {
+          "id": "generate",
+          "atoms": [
+            "file-write",
+            "live-artifact"
+          ]
+        }
+      ]
+    },
+    "capabilities": [
+      "prompt:inject",
+      "fs:write"
+    ]
+  }
+}