Lovable は「AI と会話するだけでフルスタックアプリを構築できる」AI 開発プラットフォームです。スタイル全体は温かみがあり、羊皮紙のようなベージュ（#f7f4ed）が純白に代わり、すべてのグレーは #1c1c1c の異なる透明度から導出されます。Camera Plain Variable 書体は人間味のある温度とエディトリアルな字間を持ち、ボタンは内側のシャドウ（白 0.5px の内側ハイライトと黒 0.5px のボーダー）で実体感を形づくります。ボーダーも暖かなニュートラル（#eceae4）です。AI サイト構築とローコードプロダクトに適しています。
Lovable開発者ツール
プロンプトテンプレート
基本テンプレート
Design a Lovable-inspired interface. - Warm parchment background (#f7f4ed) — not white, not beige, a deliberate cream that feels hand-selected; - Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes; - Opacity-driven color system: all grays derived from #1c1c1c at varying transparency levels; - Inset shadow technique on buttons: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset; - Warm neutral border palette: #eceae4 for subtle, rgba(28,28,28,0.4) for interactive elements. Colors: #f7f4ed, #1c1c1c, #fcfbf8, #5f5f5d with #3b82f6 accent. Typography: Camera Plain Variable.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Lovable aesthetics. Use Lovable color identity with #3b82f6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Lovable style. Use Lovable color identity with #3b82f6 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Lovable design language. Use Lovable color identity with #3b82f6 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Lovable visual identity. Use Lovable color identity with #3b82f6 accents. Compelling, conversion-focused.
使用例
Lovable アプリ
WebBuild a web app with Lovable design language and #3b82f6 color system.
Lovable ダッシュボード
ダッシュボードCreate a dashboard using Lovable style with data visualization and Camera Plain Variable typography.
✅ 適した用途
- 開発者ツール
- AI 生成系プロダクトの公式サイト
- 個人開発者の作品公開ページ
❌ 適さない用途
- 厳粛な企業コンプライアンスページ
- モノクロミニマルのドキュメントサイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。