精選 · 開放 · 免費

Verse Sh

一個極簡主義作品集，屬於專注於 React 和 Three.js 實驗的創意開發者。

01

設計氣質 DNA

開發者的深色模式工作區，展示 3D 實驗。

02

色彩

極致簡約，使用純黑背景搭配淺灰等寬文字與細微的深色邊框。

03

字型

monospace

• display16px · 400
• h116px · 400
• body11px · 400

文字主要為大寫。 · 所有文字使用「Commit Mono」等寬字體。 · 沒有超過 400 的字體粗細可見。

04

間距

一致的 16px padding 與間距，以實現結構化的格線佈局。

05

表面 (圓角 / 陰影 / 邊線)

使用細的 1px 實線邊框（#171717）來建立嚴格的格線單元。

06

版面

雙欄格線佈局，單元格大小均一，邊框單元之間無間距。

07

動效與互動

互動元素上的透明度轉換（0.5 秒）。 · 3D 頭骨物件可能具有持續旋轉或 hover 互動。

連結與互動元素上的細微透明度變化。 · 標準的連結導覽。

08

組件

• button 單元格內簡單的文字連結，例如 [LINK] 或 [CODE]。
• card 帶邊框的格線單元格，包含預覽圖片與帶有技術棧和連結的底欄。
• chip 無可見元素。
• input 無可見元素。
• hero 頂部的一個極簡單元格，包含品牌名稱、標語與聯絡連結。

09

文案語氣與禁用清單

• 語氣 直接、極簡且以開發者為導向。
• 標題風格 簡短、全大寫的等寬文字（例如「VERSE」、「I MAKE COOL WEBSITES」）。
• 按鈕文案 技術性且低調，使用括號如 [LINK] 或 [CODE]。

• 不要使用襯線或無襯線字體——整個網站使用等寬字體。
• 不要使用明亮的強調色——配色方案嚴格限於黑、灰、白。
• 不要使用圓角——所有元素與邊框均為銳角。
• 不要使用複雜的多欄佈局——網站採用嚴格的雙欄格線。
• 不要使用陰影——設計依賴平坦的邊框與背景對比。
• 不要使用粗體或重字重的文字——文字統一為輕體（粗細 400）。
• 避免: 行銷用語或說服性語言。
• 避免: 裝飾性或襯線字體排版。
• 避免: 明亮或多彩的 UI 強調色。
• 避免: 複雜的佈局結構。
• 避免: 高字體粗細。
• 避免: 圓角或柔和陰影。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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