Warp は「自動化開発のオープンプラットフォーム」で、エージェントをソフトウェア開発ライフサイクル全体に持ち込みます。ターミナル UI は意図的に温かく、背景は暖かなグレーの下地を持つアース系のほぼ黒、文字は純白ではなく羊皮紙のような白（#faf9f6）を使います。Matter 書体は幾何学的でありながら親しみやすく、典型的な開発者ツールの冷たさを避け、自然の写真とプロダクトのスクリーンショットが交互に現れます。全体はほぼモノクロの暖灰システムで、明るいアクセントは一切排除されています。開発者ツールとターミナルプロダクトに適しています。
Warp開発者ツール
プロンプトテンプレート
基本テンプレート
Design a Warp-inspired interface. - Warm dark background — not cold black, but earthy near-black with warm gray undertones; - Warm Parchment (#faf9f6) text instead of pure white — subtle cream warmth; - Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface; - Nature photography interleaved with product screenshots — lifestyle meets developer tool; - Almost monochromatic warm gray palette — no bold accent colors. Colors: #faf9f6, #353534, #868584, #afaeac.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Warp aesthetics. Use Warp color identity with #faf9f6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Warp style. Use Warp color identity with #faf9f6 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Warp design language. Use Warp color identity with #faf9f6 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Warp visual identity. Use Warp color identity with #faf9f6 accents. Compelling, conversion-focused.
使用例
Warp アプリ
WebBuild a web app with Warp design language and brand color system.
Warp ダッシュボード
ダッシュボードCreate a dashboard using Warp style with data visualization and modern typography.
✅ 適した用途
- 開発者ツール
- ターミナルとコマンドラインツール
- 開発者向け効率化ツールの公式サイト
❌ 適さない用途
- 一般向けの EC 小売
- 明るく活発な教育プロダクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。