Cursor は AI ネイティブのコードエディタです。スタイル全体は温かみ寄りで、背景は純白ではなく暖かなオフホワイト（#f2f1ed）、本文は黄色味を帯びた暖かなニアブラック（#26251e）です。CursorGothic が積極的な負のトラッキングで見出しを圧縮し、jjannon のセリフ体と cswh のスクリプト体が本文を、berkeleyMono がコードを担当します。オレンジ（#f54e00）がアクセントです。開発者ツールと AI コーディングプロダクトに適しています。
Cursor開発者ツール
プロンプトテンプレート
基本テンプレート
Design a Cursor-inspired interface. - CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings; - jjannon serif for body text with OpenType "cswh" (contextual swash alternates); - berkeleyMono for code and technical labels; - Warm off-white background (#f2f1ed) instead of pure white -- the entire system is warm-shifted; - Primary text color #26251e (warm near-black with yellow undertone). Colors: #26251e, #f2f1ed, #e6e5e0, #ffffff with #f54e00 accent. Typography: - Background:.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Cursor aesthetics. Use Cursor color identity with #f54e00 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Cursor style. Use Cursor color identity with #f54e00 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Cursor design language. Use Cursor color identity with #f54e00 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Cursor visual identity. Use Cursor color identity with #f54e00 accents. Compelling, conversion-focused.
使用例
Cursor アプリ
WebBuild a web app with Cursor design language and #f54e00 color system.
Cursor ダッシュボード
ダッシュボードCreate a dashboard using Cursor style with data visualization and - Background: typography.
✅ 適した用途
- 開発者ツール
- コードエディタと IDE の UI
- 開発者向け効率化ツールの公式サイト
❌ 適さない用途
- 一般向けのコンシューマー EC
- 暖色系のライフスタイルプロダクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。