サイトを開く
Cursorは、圧倒的な生産性を実現するために設計された、最高のコーディングエージェントです。
このデザインを再現するAIプロンプト
Cursor / Claude Code / v0 にこのまま貼り付けると、近いトーンのLPが生成できます。
AIコードエディタのLPを作って。Next.js + Tailwind。フォントはInter sans + JetBrains Mono、黒背景 #0a0a0a に白文字、アクセントは控えめなブルー。ヒーローは製品UI demo動画 (autoplay loop muted)。下に「AI Pair Programming」「Tab Autocomplete」等の機能をスクショと短文で紹介。
デザインの特徴
AI搭載コードエディタCursorのLP。Inter sansに黒背景、製品デモ動画を中心に据えた "見せる" 構成。コードエディタUIスクリーンショットが大きく、機能を1つずつシンプルに紹介。
Design Tokens（DOM解析データ）
このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。
カラーロール
Background
#f7f7f4Text
#26251eColor #1
#26251eColor #2
oklab(0.263084 -0.00230259 0.0124794 / 0.6)Color #3
oklab(0.263084 -0.00230259 0.0124794 / 0.4)Color #4
#f7f7f4Color #5
oklab(0.263084 -0.00230259 0.0124794 / 0.9)タイポグラフィ
| 要素 | Font | Size | Weight | Line | Tracking |
|---|---|---|---|---|---|
| h1 | CursorGothic |
26px | 400 | 32.5px | -0.325px |
| h2 | system-ui |
20px | 700 | 31px | normal |
| h3 | CursorGothic |
22px | 400 | 28.6px | -0.11px |
| 本文 | system-ui |
13px | 400 | 20.15px | normal |
| リンク | CursorGothic |
14px | 400 | 14px | normal |
| ボタン | CursorGothic |
14px | 400 | 14px | normal |
使用フォント頻度
CursorGothic422箇所
system-ui150箇所
EB Garamond104箇所
berkeleyMono64箇所
Lato50箇所
スケール・形状
- 角丸スケール
- 3.35544e+07px / 4px / 10px / 8px / 3px / 2px / 1.5px / 12px
- シャドウ
- 5パターン使用
- セクション余白(pt/pb)
- 112-67.2px / 0-33.6px / 67.2-67.2px / 67.2-67.2px / 67.2-67.2px
- コンテナ幅
- width: 1300px / max-width: 1300px
- ナビゲーション
- 高さ 52px / position: fixed
