精選 · 開放 · 免費
Virtual Plus Ex
一個強烈、高對比的互動體驗,優先採用大膽排版與簡單、可控的導覽。
Dark ModeExperimentalApp UIBold TypographyClean
01
設計氣質 DNA
互動式極簡大膽實驗性沉浸式
一個極簡主義的互動式藝廊或展示廳,聚焦於使用者控制與大膽的排版。
02
色彩
#FF5C00Accent
#FFFFFFInk
rgba(255,255,255,0.4)Ink soft
#000000BG
rgba(255,255,255,1)Line
嚴格的高對比單色調,搭配單一鮮明強調色用於突顯。
03
字型
grotesque-sans · monospaced
- display
60px · 500 - subheading
16px · 500 - body
12px · 500 - label
10px · 500
所有文字均為大寫。 · 標題使用緊湊的負字間距。 · 內文一致使用等寬字體,營造科技感。
04
間距
4px
8px
10px
16px
24px
30px
32px
35px
36px
48px
60px
互動元素周圍使用寬裕的內距,通常為 25-36px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 10px
lg · 0px
pill · 0px
按鈕使用 2px 實線白色邊框,裝飾性元素使用細微 1px 線條。
06
版面
初始模式選擇採用置中垂直堆疊,過渡為全螢幕滾動式佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
所有屬性在互動狀態上進行過渡。 · 根據說明暗示流暢的滾動或滑動。
暗示互動元素上游標變為指標並帶有過渡效果。 · 啟動與選擇模式的主要互動方式。
08
組件
- button 大型矩形外框按鈕,帶有圓角、大寫文字與寬裕的內部內距。
- card 提供的截圖中未顯示,但暗示為主要內容容器。
- chip 未顯示。
- input 未顯示。
- hero 全螢幕黑色畫布,搭配大型置中文字與極簡裝飾線條元素。
09
文案語氣與禁用清單
- 語氣 直接、極簡且具指導性。
- 標題風格 大膽、全大寫、緊湊字間距。
- 按鈕文案 清晰、大型、大寫文字置於顯著按鈕內。
- 勿使用襯線或手寫字體——截圖僅顯示 grotesque-sans 與等寬字體。
- 勿加入背景圖片或漸層——截圖顯示純黑背景。
- 勿使用低對比文字——截圖顯示黑底白字的高對比。
- 勿使用複雜陰影或深度效果——截圖顯示扁平、僅有邊框的元件。
- 勿使用多個強調色——截圖僅顯示單一強調色(橙色)。
- 勿對 UI 元素使用小寫文字——截圖顯示所有文字均為大寫。
- 避免: 柔軟或俏皮的語言。
- 避免: 繁雜的佈局或多個競爭元素。
- 避免: 襯線或裝飾性字體。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個極簡主義、實驗性的互動式展示廳網站。它使用強烈的黑白色調,搭配單一鮮明橙色用於關鍵說明。排版大膽、全大寫,標題使用 grotesque-sans,內文使用等寬字體,營造出科技、直接的語調。關鍵互動透過大型外框按鈕與滾動控制。重要設計規則:僅使用指定的字體類別、維持高對比、避免裝飾元素、保持佈局置中且寬敞,並一致使用大寫文字。切勿加入陰影、漸層或多個強調色。互動模型簡單,聚焦於滾動與點擊。
en · zh-CN · zh-TW · ja · ko