Levels は「コンバージョンを核とする」ランディングページのスタイルです。各ブロックは次のアクションのために奉仕します——単一の CTA、明確なバリュープロポジション、すべての摩擦を取り除いた要素。紫（#8B5CF6）は最も重要なクリックにのみ焦点を当てます。構造は直接的、コピーは短く、社会的証明がすぐ後を追います。SaaS の登録ページ、プロダクトローンチ、グロース実験に適しています。
Levelsレイアウトと構造
プロンプトテンプレート
基本テンプレート
Design a Levels-inspired interface. Colors: #8B5CF6, #16A34A, #D97706, #DC2626 with #8B5CF6 accent. Typography: #27272A.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Levels aesthetics. Use Levels color identity with #8B5CF6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Levels style. Use Levels color identity with #8B5CF6 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Levels design language. Use Levels color identity with #8B5CF6 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Levels visual identity. Use Levels color identity with #8B5CF6 accents. Compelling, conversion-focused.
使用例
Levels アプリ
WebBuild a web app with Levels design language and #8B5CF6 color system.
Levels ダッシュボード
ダッシュボードCreate a dashboard using Levels style with data visualization and #27272A typography.
✅ 適した用途
- レイアウトのデモ
- マーケティングのランディングページとコンバージョンページ
- グロース実験のページ
❌ 適さない用途
- ブランドストーリーとイメージページ
- 複雑な管理画面システム
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。