精選 · 開放 · 免費

CodeSandbox

一個專為開發者設計的平台，可透過程式碼快速建立隔離的沙箱環境。

01

設計氣質 DNA

雲端的深色模式終端機

02

色彩

在深沉的中性暗色背景上，使用高對比的霓虹強調色

03

字型

grotesque-sans · monospace

• display56px · 500
• title32px · 500
• subtitle22px · 400
• body16px · 400

大型展示標題使用緊湊的負字距 · 維持文字與背景之間的高對比度

04

間距

4px 基礎網格

05

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

使用 #252525 的 1px 實線邊框

06

版面

單欄置中佈局，交替使用深色與霓虹背景區塊

07

動效與互動

hover 狀態使用平滑的透明度過渡 · 互動元素使用細微的色彩過渡

細微的色彩變化或透明度調整 · 立即的視覺回饋

08

組件

• button 主要按鈕使用強調色背景 (#d6fb41) 搭配深色文字 (#0e0e0e)，並採用膠囊形狀；次要按鈕則為外框樣式
• card 功能卡片使用霓虹背景搭配黑色文字，無可見邊框或陰影
• chip 用於標籤（如「New」）的小型強調色徽章
• input 標準的文字輸入框，具有深色背景與細微邊框
• hero 在深色背景上展示巨大字體的標題，並搭配輔助說明文字與主要行動呼籲按鈕

09

文案語氣與禁用清單

• 語氣 技術性、專業且直接
• 標題風格 大膽、簡潔的陳述，專注於擴展性與安全性
• 按鈕文案 以行動為導向的短語，例如「免費開始使用」和「試用 CodeSandbox SDK」

• 勿使用柔和、低對比的強調色——截圖顯示的是高飽和度的霓虹黃綠色 (#d6fb41) 作為主要強調色
• 勿使用襯線字體作為標題——截圖顯示的是簡潔、現代的 grotesque-sans 字體系列
• 勿使用過多陰影或漸層——截圖顯示的是扁平化設計，具有最少的層次感
• 勿在主要介面上使用明亮的白色背景——截圖顯示的是以深色背景 (#0e0e0e) 為主
• 勿在標題中使用寬字距——截圖顯示的是緊湊的負字距 (-2.8px) 用於展示文字
• 勿使用多種強調色——截圖顯示的是嚴格的雙色調色板，由深色中性色與單一霓虹強調色組成
• 勿在所有元素上使用圓角——截圖顯示的是銳利邊緣與細微圓角（最大 10px）的混合使用
• 避免: 行銷術語
• 避免: 含糊的承諾
• 避免: 過於複雜的句子
• 避免: 不必要的驚嘆號
• 避免: 薄弱或被動的語言

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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