厳選・オープン・無料

Lovable

AIとチャットしてアプリやウェブサイトを作成。

01

デザイン DNA

自然言語を機能的なソフトウェアに変換する、フレンドリーでカラフルなポータル。

02

カラー

暖かみのあるニュートラルを基盤とし、鮮やかで表現力豊かなマルチカラーグラデーションを用いる。

03

タイポグラフィ

geometric-sans · monospace

• display60px · 480
• heading48px · 480
• body16px · 400
• small14px · 400

04

余白

セクション間に大きな縦の余白を設けた、ゆとりのあるスペース。

05

サーフェス (角丸 / 影 / 罫線)

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

レイアウト

中心に配置された単一カラムレイアウトと、目立つヒーローセクション。

07

モーションとインタラクション

UI要素のスムーズなopacityとtransformトランジション。 · hover時のグラデーションシフト。

微妙な色の変化とopacityの変動。 · scaleまたはopacityの調整による即時フィードバック。

08

コンポーネント

• button 高コントラストで小丸みの、ピル型プライマリボタン。
• card 柔らかい角丸、控えめなボーダー、暖色系の背景を持つカード。
• input プライマリなインタラクションポイントとなる、大きく丸みのある入力コンテナ。
• hero フルワイドのグラデーション背景に、センタリングされたテキストと浮遊する入力フィールド。

09

文体と禁止事項

• トーン 鼓舞するように、明確に、そして力強く。
• 見出し 短く、的確に、アクション指向で。
• CTA ツール使用のメリットに焦点を当てた、直接的で簡潔な表現。

• 純粋な白の背景を使用しない — スクリーンショットは温かみのある、ややオフホワイトの背景を示している。
• 鋭角で四角い角を使用しない — スクリーンショットはカードや入力フィールドに角丸を用いている。
• 冷たくモノクロマチックなカラースキームを使用しない — スクリーンショットは鮮やかなマルチカラーグラデーションを用いている。
• 密集し雑然としたレイアウトを使用しない — スクリーンショットはゆとりのあるスペースと明確な階層を示している。
• 複雑で装飾的なタイポグラフィを使用しない — スクリーンショットはクリーンで幾何学的なsans-serifスタイルを用いている。
• 不快なほど暗いボーダーを使用しない — スクリーンショットは控えめで明るいボーダーを用いている。
• 避ける: 専門用語の多い技術的な記述
• 避ける: 密集した段落テキスト
• 避ける: 受動的または過度にフォーマルな言語

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko