Vercel 是面向前端团队的前端云（Frontend Cloud）平台，也是 Next.js 的创造者。该风格把 Geist Sans 的负字距压到极致，Geist Mono 负责代码与技术标签，阴影取代传统边框（0 0 0 1px），近白画布上以 #171717 而非纯黑作文本。适合开发者工具与基础设施类产品。
开发者工具现代极简
提示词模板
基础模板
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 编程工具使用。