Airbnb は世界中のホストと旅行者をつなぐ宿泊体験プラットフォームです。UI では Rausch コーラル（#ff385c）を唯一のブランドアクセントカラーとし、メイン CTA と検索ボタンにのみ使用します。4:3 と 16:9 のフルブリード写真に 14〜20px の角丸を組み合わせるのが主要な視覚言語で、3D レンダリングのカテゴリアイコンはシステム全体で唯一イラストが許される箇所です。円形 50% のアイコンボタン（戻る、シェア、保存、カルーセル矢印）が各所に配置され、Airbnb Cereal VF の 1 書体で 8px の脚注から 28px の見出しまでをカバーします。旅行、不動産、写真駆動のマーケットプレイスに適しています。
AirbnbEC と小売
プロンプトテンプレート
基本テンプレート
Design a Airbnb-inspired interface. - Rausch coral-pink (#ff385c) as a single-accent brand color, used only for primary CTAs and the search button; - Full-bleed photography at 4:3 / 16:9 with gentle corner rounding (14–20px) as the primary visual vocabulary; - 3D rendered category icons paired with typographic tabs — the one place the system allows illustration; - Circular 50% icon buttons (back arrow, share, favorite, carousel arrows) scattered throughout; - Airbnb Cereal VF carries every label, from 8px legal footnote to 28px section heading — a single-family system. Colors: #ff385c, #e00b41, #92174d, #460479 with #ff385c accent. Typography: ("Reserve".バリエーションプロンプト
📱 モバイル
Design a mobile app with Airbnb aesthetics. Use Airbnb color identity with #ff385c accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Airbnb style. Use Airbnb color identity with #ff385c accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Airbnb design language. Use Airbnb color identity with #ff385c accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Airbnb visual identity. Use Airbnb color identity with #ff385c accents. Compelling, conversion-focused.
使用例
Airbnb アプリ
WebBuild a web app with Airbnb design language and #ff385c color system.
Airbnb ダッシュボード
ダッシュボードCreate a dashboard using Airbnb style with data visualization and ("Reserve" typography.✅ 適した用途
- EC のシーン
- 旅行・民泊予約プラットフォーム
- 写真で語るブランドページ
❌ 適さない用途
- 重量級のエンタープライズ管理画面
- データ密度の高いコンソール
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。