mydealz の画面は高密度のお得情報エンジンです。クールグレーのキャンバス（#f3f5f7）に白いディールカードが積み重なり、各カードはサムネイル、価格、割引、コミュニティの反応を 16px の余白に圧縮します。ブランドグリーン（#30a83c）が価格と「Zum Deal」ピルの両方を担い、赤（#ce1736）と青（#034eb1）の温度計が節約を投票に変えます。Averta CY は 500 と 700 の 2 ウェイトのみ、ボタンも検索もチップも 540px の完全な丸型ピルです。
mydealzEC と小売
プロンプトテンプレート
基本テンプレート
Design a mydealz-inspired interface. - A cool-gray canvas (#f3f5f7) carrying a dense stack of white deal cards separated by 1px hairlines; - Brand green (#30a83c) on every price and every primary 'Zum Deal' pill; - The signature temperature control: cold-blue (#034eb1) down-vote, hot-red (#ce1736) reading and up-vote, always paired; - Fully-round 540px pills for buttons, search, filters and temperature, while content cards stay at 8px; - Averta CY at only two weights -- 500 for reading, 700 for prices, labels and temperatures; - Mint discount badges (#defde4) and a cool-gray timestamp pill keep the card scannable. Colors: #30a83c, #f3f5f7, #ce1736, #034eb1, #defde4 with #30a83c accent. Typography: Averta CY, 500/700.
バリエーションプロンプト
📱 モバイル
Design a mobile deals app with mydealz aesthetics. Single-column white cards on #f3f5f7, green price pills, red/blue temperature voting and 540px round controls. Dense but tappable.
💻 Web
Design a web app with mydealz style. Feed plus right sidebar, #30a83c action pills, hairline cards and a scannable discount vocabulary. High-density, responsive.
📊 ダッシュボード
Design a dashboard with mydealz design language. Cool-gray shell, #30a83c metrics, red/blue sentiment indicators and compact 8px cards. Fast to scan.
📄 ランディングページ
Design a landing page with mydealz visual identity. #30a83c conversion pills, deal-card proof points and a playful frog mascot moment. Energetic, conversion-focused.
使用例
mydealz ディールフィード
WebBuild a deals community web app with mydealz design language and the #30a83c price system.
mydealz コミュニティダッシュボード
ダッシュボードCreate a community moderation dashboard using mydealz style with red/blue temperature signals and dense 8px cards.
✅ 適した用途
- クーポン・価格比較コミュニティ
- EC セールの情報フィード
- UGC 型ディールプラットフォーム
❌ 適さない用途
- 高級ブランドの公式サイト
- ミニマルな読み物ブログ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。