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 應用程式
Web 端Build a web app with Vercel design language and #ff5b4f color system.
Vercel 儀表板
儀表板Create a dashboard using Vercel style with data visualization and Geist typography.
✅ 適用情境
- 開發者工具
- 開發者平台與部署工具
- 極簡黑白的科技官網
❌ 不適用情境
- 高飽和多彩的消費電商
- 手繪插畫的趣味產品
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。