デートWebスキル
日曜版の恋愛コラムをソフトウェアで表現したような、シングルスクリーンのコンシューマーダッシュボードを生成します。エディトリアルなタイポグラフィ、控えめな単一アクセント、広い余白を使用し、スワイプデッキや出会い系の決まり文句は排除します。
ワークフロー
- アクティブなDESIGN.mdを読み込む（上述）。メトリック数値にはセリフ体の表示フォントを積極的に使用します。これらの画面は数値で成否が決まります。
- ブランドボイスを選ぶ — 皮肉で、観察者的で、やや文学的な雰囲気。具体的でリアルなコピーを生成します。例：「1日以内に返信してくれる人」、「管理可能。そのうち2人は今や友達。」、「あなたの最大の相性アセット」。
- レイアウト（順序通り）：
- 上部ティッカー — 上部を横切る1行の水平ストリップ。サンセリフのアイブロウスタイル。左にタグライン、右に「NEXT TIER AT 2,080 MUTUALS」を、モノスペース大文字＋文字間隔で配置。下に細い罫線。
- 左サイドバー — 220～260px。上部にセリフ斜体のブランドワードマーク。ユーザーカード（アバター/ハンドル/レシオ/ティア）。3つのナビグループ：「TODAY」（見本、受信箱、キュー、通知）、「YOU」（あなたの統計、相互フォロー＆コミュニティ、ブロック、設定）、「ARCHIVE」（過去のイシュー、期限切れのマッチ）。アクティブなアイテムにはアクセントカラーのテキストとアクセントドット。
- メインコンテンツ:
- KPIグリッド — 3列×3行（9セル）。各セル：小文字モノラベル、特大のセリフ数字（ポジティブはアクセントまたはくすんだグリーン、注意はくすんだレッド）、1行のイタリックフットノート。具体的な数字例：「1,842 ↑ 41 this wk · healthy growth.」、「14% above median for your cohort.」、「4 / exes in your circle · manageable. two are now friends.」
- 棒グラフパネル — 「mutuals — last 30 days」。背の高い細い黒バー。最後の2日間をアクセントカラーで強調。上にモノスペースで「↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE」のキャプション。
- トレンドパネル — 「match rate — last 12 weeks」。下に1行のボディコピー（「STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN…」）。下部にフッター罫線。
- 1つのHTMLドキュメントを作成:
<!doctype html>から</html>まで。CSSはインライン。- 背景はクリーミーなオフホワイト、ボディはセリフ体、ラベルはモノスペース。
- メトリック数値には
font-feature-settings: 'tnum'を使用。 - 約30本の様々な高さの棒を持つSVG棒グラフ。
- ティッカー、サイドバー、KPIグリッド、チャート、トレンドに
data-od-idを付与。
- セルフチェック:
- 抑制が効いていて、エディトリアルで、少しユーモラスに — 下品ではない。
- 単一アクセントトークンを最大3～4箇所で使用（KPI1つ、ハイライトバー2つ、ナビのアクティブ状態1つ）。
- スワイプデッキ、ハート、火の絵文字は使わない。
出力契約
<artifact> タグで囲んで出力します:
<artifact identifier="dating-slug" type="text/html" title="デートダッシュボード — タイトル">
<!doctype html>
<html>...</html>
</artifact>
アーティファクトの前に1文だけ入れ、後には何も入れません。