精选 · 开放 · 免费

Viture

通过大胆字体排印与高对比度、科技感十足的深色美学，展示高端XR眼镜。

HardwarePremiumBold TypographyDark ModeProduct

Viture 网站截图

↓ 下载设计系统包 (32 MB)在 OpenDesign 中打开

原站: https://www.viture.com

📦 浏览包内文件 →

01

设计气质 DNA

创新高端高性能未来感大胆

一个面向空间计算的高端、简洁的硬件商店。

02

色彩

#FFFFFFInk

rgba(255,255,255,0.5)Ink soft

#0C0C0CBG

#757575Muted

rgba(255,255,255,0.1)Line

以深色模式为主导的高对比度调色板，主要交互元素采用蓝色强调色。

03

字体

geometric-sans

display90px · 750
h248px · 650
body16px · 400
caption14px · 400

为大型展示文字使用紧凑的字间距，以增强大胆、未来感的视觉效果。 · 保持文字与背景之间的高对比度，主要采用深色背景上的白色文字。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

统一使用4px基础单位，首屏区域和卡片采用充裕的内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px

md · 12px

lg · 24px

pill · 999px

1px solid rgba(255,255,255,0.1)

0 0 100px rgba(255,255,255,0.1) · 0 8px 32px rgba(0,0,0,0.4)

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

全屏首屏区域过渡到居中的内容块，垂直间距充裕。

07

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.77, 0, 0.175, 1)easing

按钮和链接在hover状态下平滑过渡。 · 背景大小的渐进式过渡，用于视觉效果。 · 交互元素的微妙透明度变化。

按钮和链接采用微妙的色彩或透明度变化。 · 提供即时视觉反馈，通常通过颜色变化或轻微的缩放变换实现。

08

组件

button 主按钮：实色蓝色，圆角胶囊形。次按钮：深灰色，带边框的圆角胶囊形。
card 圆角（24px），柔和的背景色，内容居中，产品图片与文字之间层次清晰。
chip 小型胶囊形标签，用于产品标记（例如：“2026年全新旗舰产品”）。
input 全宽、圆角胶囊形，浅色背景，带占位符文字，内部有电子邮件图标。
hero 沉浸式深色背景，搭配大型居中文字、醒目的产品图像和清晰的行动号召按钮。

09

文案语气与禁用清单

语气自信、大胆且具有前瞻性。
标题风格 简短有力、充满最高级词汇的陈述（例如：“最大。最亮。最智能。”）。
按钮文案 直接且注重行动（例如：“立即订购”、“立即享受10%优惠”）。

不要以浅色主题为主——截图显示以深色模式（#0C0C0C背景）为主导。
不要使用柔和、圆润的无衬线字体作为标题——截图显示的是大胆、几何感的无衬线字体。
不要使用柔和的调色板——截图采用深色背景上的高对比度白色文字和充满活力的蓝色强调色。
不要使用小型、居中的按钮——截图显示的是大型、醒目的胶囊形按钮。
不要在产品展示中使用复杂的多栏布局——截图显示的是清晰、基于卡片的水平布局。
不要使用无目的的装饰性元素——截图专注于简洁的字体排印和高质量的产品图像。
避免: 避免使用过于随意或俏皮的语言。
避免: 避免使用缺乏上下文的复杂技术术语。
避免: 避免使用软弱或被动的行动号召。

10

包内真实截图

Viture — 桌面首屏（hero） — 桌面首屏（hero）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Viture — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

该网站是一个用于XR眼镜的高端硬件产品页面，采用大胆、高对比度的深色模式美学。主要颜色为深黑（#0C0C0C）和白色（#FFFFFF），主交互色为蓝色。字体排印属于大胆、几何感的无衬线字体类别，并以超大尺寸用于标题。关键设计约束：保持严格的深色模式主导，使用充裕的内边距和圆角（特别是按钮采用胶囊形），并确保所有文字具有高对比度。避免使用浅色背景、复杂布局或软弱的字体排印。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko