SaaS 产品

Aurora Glass

极光光晕 × 磨砂玻璃的暗色 SaaS 落地页

近乎纯黑的画布上，紫、青、粉三色极光缓慢漂移，磨砂玻璃卡片带鼠标跟随光斑，标题里一个斜体衬线词打破工程感。适合 AI、云计算、开发者平台等需要“昂贵而冷静”气质的产品官网。

Pro 会员可用 · 更新于 · Live demo

签名细节

  • 每个标题一个斜体衬线强调词
  • 鼠标跟随的卡片光斑
  • 渐变发丝边框的产品控制台

页面区块

  1. 悬浮玻璃导航
  2. Hero + 产品控制台
  3. Logo 跑马灯
  4. Bento 功能区
  5. 数据带
  6. 定价
  7. 引言
  8. FAQ
  9. 收尾 CTA

色板

  • Void #07070B — background
  • Paper #F4F4F7 — text
  • Mist #9A9AAE — text-muted
  • Violet #7C5CFF — glow
  • Lavender #A78BFA — accent
  • Cyan #22D3EE — glow
  • Rose #F472B6 — glow

字体

  • Inter Tight — display / body
  • Instrument Serif — italic accent
  • JetBrains Mono — code

提示词目录

  1. Design Intent
  2. Design Tokens
  3. Typography
  4. Color & Material
  5. Layout & Grid
  6. Page Blueprint
  7. Components
  8. Motion & Interaction
  9. Responsive Behavior
  10. Accessibility
  11. Do / Don't
  12. Output Requirements

如何使用这套风格

复制提示词全文粘贴给任意 AI；或下载 Agent 技能 / Cursor 规则 / AGENTS.md；或在接入 MCP 的工具里说：“用 ui-atlas 的 aurora-glass-saas 风格做这个页面”。

免费预览

# Aurora Glass — Dark SaaS Landing Page

You are a senior product designer and front-end engineer with an obsessive eye for typography, light and motion.
Build a marketing landing page for a fictional AI inference platform called **"Halcyon"** in the **Aurora Glass** style
described below. Treat every value in this brief as a specification, not a suggestion.

## 1. Design Intent

Nocturnal, luminous, precise — like watching the northern lights through the window of a server room.
The page sits on an almost-black canvas where slow, blurred aurora blooms (violet, cyan, a touch of pink) drift behind
frosted-glass surfaces. Typography is tight and confident; a single italic serif word in each headline adds a human,
editorial accent against the engineered sans. The first viewport must feel expensive and calm, never noisy:
light does the decoration, not illustrations.