Vercel はフロントエンドチームのためのフロントエンドクラウド（Frontend Cloud）プラットフォームであり、Next.js の生みの親でもあります。このスタイルは Geist Sans の負のトラッキングを極限まで詰め、Geist Mono がコードと技術ラベルを担当し、従来のボーダーをシャドウ（0 0 0 1px）で置き換え、ほぼ白のキャンバスには純黒ではなく #171717 をテキストとして使います。開発者ツールとインフラ系プロダクトに適しています。
Vercel開発者ツール
プロンプトテンプレート
基本テンプレート
Design a Vercel-inspired interface. - Geist Sans with extreme negative letter-spacing (-2.4px to -2.88px at display) — text as compressed infrastructure; - Geist Mono for code and technical labels with OpenType "liga" globally; - Shadow-as-border technique: box-shadow 0px 0px 0px 1px replaces traditional borders throughout; - Multi-layer shadow stacks for nuanced depth (border + elevation + ambient in single declarations); - Near-pure white canvas with #171717 text — not quite black, creating micro-contrast softness. Colors: #171717, #ffffff, #000000, #ff5b4f with #ff5b4f accent. Typography: Geist.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Vercel aesthetics. Use Vercel color identity with #ff5b4f accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Vercel style. Use Vercel color identity with #ff5b4f accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Vercel design language. Use Vercel color identity with #ff5b4f accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Vercel visual identity. Use Vercel color identity with #ff5b4f accents. Compelling, conversion-focused.
使用例
Vercel アプリ
WebBuild a web app with Vercel design language and #ff5b4f color system.
Vercel ダッシュボード
ダッシュボードCreate a dashboard using Vercel style with data visualization and Geist typography.
✅ 適した用途
- 開発者ツール
- 開発者プラットフォームとデプロイツール
- ミニマルな白黒のテック公式サイト
❌ 適さない用途
- 高彩度で多彩なコンシューマー EC
- 手描きイラストの楽しいプロダクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。