Xiaohongshu（小紅書）は「あなたの生活と興味のコミュニティ」で、若者が写真とテキストのノートでライフスタイルを共有し、購買判断までを行います。UI はブランドレッド（#FF2442）を唯一の彩度の高い色とし、中間色は離散的なグレーではなく rgba(48,48,52,.05/.10/.20) の透明な黒の階調です。角丸はとことん貫かれ、カードは 12〜16px、ボタンは全ピル型、オーバーレイの上部は 16px。奥行きはシャドウをほぼ使わずフラットに徹し、書体は苹方（PingFang）の 400／500／600 の 3 段階のみです。UGC コミュニティとコンテンツ EC のプロダクトに適しています。
Xiaohongshuメディアと消費
プロンプトテンプレート
基本テンプレート
Design a Xiaohongshu-inspired interface. - Singular brand red (#FF2442 token, #FF2E4D at the component layer) — never two saturated colors at once; - Translucent neutrals (rgba(48,48,52, .05/.10/.20)) instead of discrete grey steps; - Generous rounding everywhere: cards 12–16px, buttons fully pill, sheets 16px top-only; - Near-zero shadow — flat by default; - PingFang SC at 400/500/600 only; no thin display weights. Colors: #FF2442, #FF2E4D, #FDBC5F, #FFFFFF with #FF2442 accent. Typography: - Background:.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Xiaohongshu aesthetics. Use Xiaohongshu color identity with #FF2442 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Xiaohongshu style. Use Xiaohongshu color identity with #FF2442 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Xiaohongshu design language. Use Xiaohongshu color identity with #FF2442 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Xiaohongshu visual identity. Use Xiaohongshu color identity with #FF2442 accents. Compelling, conversion-focused.
使用例
Xiaohongshu アプリ
WebBuild a web app with Xiaohongshu design language and #FF2442 color system.
Xiaohongshu ダッシュボード
ダッシュボードCreate a dashboard using Xiaohongshu style with data visualization and - Background: typography.
✅ 適した用途
- コンシューマー製品
- ライフスタイルコミュニティ
- UGC コンテンツプラットフォーム
❌ 適さない用途
- 厳粛な企業公式サイト
- 高密度なデータツール
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。