精選 · 開放 · 免費

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 基礎單位，核心區域與卡片採用寬裕的 padding。

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 狀態下平滑過渡。 · 背景尺寸漸進過渡以實現視覺效果。 · 互動元素細膩的透明度變化。

按鈕與連結在 hover 狀態下有細微的顏色或透明度變化。 · 立即的視覺反饋，通常透過顏色變化或輕微的縮放變形實現。

08

組件

button 主按鈕：實心藍色、圓角膠囊形。次按鈕：深灰色、帶邊框的圓角膠囊形。
card 圓角（24px）、柔和背景色、內容居中，產品圖片與文字之間有清晰的層次結構。
chip 小型、膠囊形的徽章，用於產品標籤（例如：「2026 年全新旗艦」）。
input 全寬、膠囊形狀、淺色背景、佔位符文字，內含電子郵件圖示。
hero 沉浸式、深色背景，搭配大型、居中的字型、醒目的產品圖片，以及清晰的行動呼籲按鈕。

09

文案語氣與禁用清單

語氣自信、大膽且科技感強烈。
標題風格 簡短、有力、極致化的陳述（例如：「最龐大。最明亮。最智慧。」）。
按鈕文案 直接且以行動為導向（例如：「立即訂購」、「立即享 9 折優惠」）。

不要使用淺色主題作為主要主題——截圖顯示以深色模式為主（背景 #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），並以主要互動藍色為強調。字型屬於粗體、幾何感的無襯線類別，以超大比例用於標題。關鍵設計限制：嚴格維持深色模式主導地位，使用寬裕的 padding 與圓角（特別是按鈕的膠囊形狀），並確保所有文字具有高對比度。避免使用淺色背景、複雜佈局或軟弱的字型。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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