Skip to content
Get packs

Dating Dashboard Design

Generates an editorial-style dating/matchmaking dashboard as a single HTML page

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent produces a single-screen, desktop-style HTML mockup of a dating or community app dashboard. It follows a set layout: a top news-style ticker, a left navigation rail, a grid of headline metrics, a 30-day bar chart of mutual matches, and a match-rate trend panel. The agent writes the copy and sample numbers itself, aiming for a restrained, witty, magazine-like look rather than swipe-style dating tropes.

Great for

  • Designers prototyping a consumer social or dating product dashboard
  • Developers who need a styled HTML starting point for a community dashboard
  • Creators wanting an editorial-style data visual for a social-platform concept

Skip it if

  • Real dating or matchmaking products that need live data, accounts or privacy controls, since the output is a static mockup with invented figures
  • Situations where the sample statistics might be mistaken for real user data in a publication or pitch

Try asking

  • “Design a dating site dashboard for a community of newsletter writers with a mutuals bar chart”
  • “Make a matchmaking dashboard mockup with a KPI grid and a community ticker”
  • “Create a social network dashboard prototype in an editorial style”
Step-by-step guide: how to use Dating Dashboard DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    dating-web.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dating-web.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dating-web.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide a DESIGN.md or brand guidelines, since the skill expects one to be injected for colour and type choices
  • Replace the generated sample numbers and copy before showing the mockup to anyone as real data
  • Ask for a specific product name and audience in your request to get more tailored copy

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.