Dating Web
- 241 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
dating-web is an open-design agent skill that designs dating-site user flows—profiles, discovery cards, matches, and chat—with trust cues and conversion-oriented onboarding for social SaaS products.
About
dating-web is a design agent skill from nexu-io/open-design that guides UX flow design for dating and social-discovery web products. It covers profile creation screens, photo and bio patterns, discovery card layouts with swipe or tap affordances, mutual match states, and chat entry points with trust and safety cues such as verification badges and report/block affordances. Developers reach for dating-web when prototyping or refactoring onboarding funnels, match lists, or messaging shells for social SaaS apps where conversion and perceived safety drive retention. The skill fits agent sessions producing screen flows, component hierarchy notes, and onboarding step sequences rather than production React code alone. It emphasizes conversion-oriented first-session paths—minimal friction signup, progressive profile completion, and clear match-to-chat transitions—while baking in trust signals that reduce scam anxiety on dating interfaces. dating-web complements frontend implementation skills by defining the UX skeleton before Tailwind or component libraries are wired.
- Profile cards
- Discovery flows
- Match UI
- Chat layout
- Trust-focused onboarding
Dating Web by the numbers
- 241 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #887 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill dating-webAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 241 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
How do you design dating app profile and match flows?
Design dating-site flows—profiles, discovery cards, matches, and chat—with trust cues and conversion-oriented onboarding for social SaaS products.
Who is it for?
Developers and designers prototyping social SaaS or dating web apps who need structured flows for profiles, discovery, matches, and chat with trust-oriented UX.
Skip if: Non-social B2B dashboards, backend matching-algorithm implementation without UI flows, or products with no user-to-user discovery requirement.
When should I use this skill?
A social SaaS prototype needs dating-style profile, discovery card, match list, chat, or trust-cue onboarding flow designs.
What you get
UX flow specs for profiles, discovery cards, match screens, chat entry points, trust cues, and onboarding step sequences.
- Screen flow specifications
- Onboarding step sequence
- Trust and match UX pattern notes
Files
Dating Web 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.
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-idon 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.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>mutuals · your dating life, measured by the company you keep</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>YOUR DATING LIFE, MEASURED BY THE COMPANY YOU KEEP</span>
<span style="opacity:0.6;">·</span>
<span>REVIEWED WEEKLY</span>
</div>
<div>NEXT TIER AT <b>2,080 MUTUALS</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>RATIO 22.9 · TIER III</span></div>
</div>
<div>
<h4>Today</h4>
<ul>
<li>specimen <span class="badge">3</span></li>
<li>inbox <span class="badge">3</span></li>
<li>queue <span style="font:11px/1 var(--mono);color:var(--muted);">6</span></li>
<li>notifications <span class="badge gray">12</span></li>
</ul>
</div>
<div>
<h4>You</h4>
<ul>
<li class="active">your stats</li>
<li>mutuals & communities</li>
<li>blocked <span style="font:11px/1 var(--mono);color:var(--muted);">14</span></li>
<li>settings</li>
</ul>
</div>
<div>
<h4>Archive</h4>
<ul>
<li>past issues</li>
<li>expired matches <span style="font:11px/1 var(--mono);color:var(--muted);">7</span></li>
</ul>
</div>
<div class="status">
<div class="live">online · last match 11m ago</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">Mutuals on file</div>
<div class="value"><em>1,842</em></div>
<p class="note"><span class="arrow">↑</span> 41 this wk · healthy growth.</p>
</div>
<div class="stat">
<div class="label">Replies in 24h</div>
<div class="value good">47</div>
<p class="note">the people who'd text back within a day.</p>
</div>
<div class="stat">
<div class="label">Communities</div>
<div class="value"><em>14</em></div>
<p class="note">4 active · 7 lurking · 3 inferred.</p>
</div>
<div class="stat">
<div class="label">Match rate</div>
<div class="value good">14%</div>
<p class="note">above median for your cohort.</p>
</div>
<div class="stat">
<div class="label">2nd dates</div>
<div class="value"><em>3</em></div>
<p class="note">of 7 first dates this year. you commit.</p>
</div>
<div class="stat">
<div class="label">Exes in your circle</div>
<div class="value bad">4</div>
<p class="note">manageable. two are now friends.</p>
</div>
<div class="stat">
<div class="label">Shared blocks</div>
<div class="value"><em>214</em></div>
<p class="note">your single greatest compatibility asset.</p>
</div>
<div class="stat">
<div class="label">Avg response</div>
<div class="value"><em>2.1<span style="font-size:32px;">h</span></em></div>
<p class="note">too fast. wait 4–6h. they notice.</p>
</div>
<div class="stat">
<div class="label">Logged-off hrs</div>
<div class="value bad">4</div>
<p class="note">/ 168 this wk. we beg.</p>
</div>
</section>
<section class="panel" data-od-id="bars">
<div class="panel-head">
<h3>mutuals — <em>last 30 days</em></h3>
<div class="meta">↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE</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>MAR 18</span><span>MAR 25</span><span>APR 1</span><span>APR 8</span><span>APR 15</span><span>TODAY</span></div>
</section>
<section class="panel lower-panel" data-od-id="trend">
<div class="panel-head">
<h3>match rate — <em>last 12 weeks</em></h3>
<div class="meta">STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN (FOUNDERS WHO POST, WK 4).</div>
</div>
<p class="lede">A real climb, not a vibe. <b>One community join</b> moved your match rate more than four months of profile edits — keep posting from that circle, ship more, tweet less.</p>
</section>
</main>
</div>
</body>
</html>
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kHow it compares
Pick dating-web over generic UI skills when the product is social discovery with profile, match, and chat flows requiring trust and conversion-specific patterns.
FAQ
What flows does dating-web design?
dating-web designs profile creation, discovery cards, mutual match states, chat entry points, and trust cues such as verification badges and report or block affordances for social SaaS dating products.
When should developers use dating-web?
Use dating-web when prototyping or refactoring dating or social-discovery web apps that need conversion-oriented onboarding and trust-focused profile, match, and chat flows before frontend build.