厳選・オープン・無料
Lovable
AIとチャットしてアプリやウェブサイトを作成。
AIGradientProductivityCleanTooling
01
デザイン DNA
BuilderAICreationNo-CodeEmpowering
自然言語を機能的なソフトウェアに変換する、フレンドリーでカラフルなポータル。
02
カラー
#FE7B02Accent
#1C1C1CInk
#5F5F5DInk soft
#F7F4EDBG
#FCFBF8BG soft
#FDFCFCBG quiet
#ECEAE4Muted
rgba(236, 234, 228, 1)Line
暖かみのあるニュートラルを基盤とし、鮮やかで表現力豊かなマルチカラーグラデーションを用いる。
03
タイポグラフィ
geometric-sans · monospace
- display
60px · 480 - heading
48px · 480 - body
16px · 400 - small
14px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
80px
96px
144px
セクション間に大きな縦の余白を設けた、ゆとりのあるスペース。
05
サーフェス (角丸 / 影 / 罫線)
sm · 8px
md · 12px
lg · 16px
pill · 99999999px
1px solid rgb(236, 234, 228)
oklch(0.2 0 0 / 0.12) 0px 2px 2px -1px · oklch(0.2 0 0 / 0.12) 0px 4px 4px -2px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中心に配置された単一カラムレイアウトと、目立つヒーローセクション。
07
モーションとインタラクション
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
UI要素のスムーズなopacityとtransformトランジション。 · hover時のグラデーションシフト。
微妙な色の変化とopacityの変動。 · scaleまたはopacityの調整による即時フィードバック。
08
コンポーネント
- button 高コントラストで小丸みの、ピル型プライマリボタン。
- card 柔らかい角丸、控えめなボーダー、暖色系の背景を持つカード。
- input プライマリなインタラクションポイントとなる、大きく丸みのある入力コンテナ。
- hero フルワイドのグラデーション背景に、センタリングされたテキストと浮遊する入力フィールド。
09
文体と禁止事項
- トーン 鼓舞するように、明確に、そして力強く。
- 見出し 短く、的確に、アクション指向で。
- CTA ツール使用のメリットに焦点を当てた、直接的で簡潔な表現。
- 純粋な白の背景を使用しない — スクリーンショットは温かみのある、ややオフホワイトの背景を示している。
- 鋭角で四角い角を使用しない — スクリーンショットはカードや入力フィールドに角丸を用いている。
- 冷たくモノクロマチックなカラースキームを使用しない — スクリーンショットは鮮やかなマルチカラーグラデーションを用いている。
- 密集し雑然としたレイアウトを使用しない — スクリーンショットはゆとりのあるスペースと明確な階層を示している。
- 複雑で装飾的なタイポグラフィを使用しない — スクリーンショットはクリーンで幾何学的なsans-serifスタイルを用いている。
- 不快なほど暗いボーダーを使用しない — スクリーンショットは控えめで明るいボーダーを用いている。
- 避ける: 専門用語の多い技術的な記述
- 避ける: 密集した段落テキスト
- 避ける: 受動的または過度にフォーマルな言語
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Lovableは、対話式インターフェースを通じてアプリやウェブサイトを構築するためのAIを活用したツールです。その視覚的アイデンティティは、暖かみのあるオフホワイト背景、ダークニュートラルインク(#1C1C1C)、そして鮮やかで表現力豊かなマルチカラーグラデーション(ブルー、ピンク、オレンジ)によって定義されています。タイポグラフィにはクリーンな幾何学的なsans-serifカテゴリを採用しています。デザインはシンプルさ、ゆとりのあるスペース、フレンドリーで親しみやすい雰囲気を重視しており、ソフトウェアの作成をすべての人に開放することを目指す製品に適しています。重要な制約には、一貫して角丸を使用すること、純粋な白の背景を避けること、不要な雑踏なしに高コントラストで明確な視覚的階層を維持することが含まれます。
en · zh-CN · zh-TW · ja · ko