精選 · 開放 · 免費

Replit

Replit 是一個基於瀏覽器的協作式 IDE，讓您無需本地設定即可建構、部署和分享軟體。

01

設計氣質 DNA

一個開闊、通透的工作室，讓建構者在這裡勾勒想法，並將其編譯為現實。

02

色彩

溫暖的米白色中性色調，搭配單一高能量的橙色作為操作強調色。

03

字型

geometric-sans · monospace

• display56px · 500
• headline40px · 500
• body16px · 400
• caption14px · 400

標題使用緊湊的負向字距調整，營造緊湊有力的感覺。 · 即使內文也採用相對緊湊的行高，以維持版面密度。 · 字重 500 用於展示/標題強調，而非粗體的 700。

04

間距

以 4px 基線網格為基礎，提供元件間一致且緊湊的間距，並為卡片預留寬裕的內距。

05

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

1px solid rgba(137,140,148,0.3)

rgba(0,0,0,0.08) 0px 2px 8px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

版面

居中的單欄主視覺區，配有醒目的輸入欄位，後接多欄卡片佈局，用於定價或功能展示。

07

動效與互動

互動元件上的平滑淡入淡出與背景顏色過渡效果。 · 按鈕與卡片在懸停時有細微的縮放或透明度變化。

外框按鈕的背景顏色填充；卡片產生輕微的高度變化。 · 按鈕產生細微的縮小效果；過渡至下一個狀態或頁面。

08

組件

• button 主要操作採用藥丸形外框按鈕，次要或特定觸發操作採用實心圓角按鈕。
• card 柔和的米白色或淺灰色卡片，具有大圓角與細微陰影效果。
• chip 淺灰色圓角標籤或建議標籤，用於分類或快速操作。
• input 寬大的多行文字輸入框或文字輸入欄位，採用圓角設計，右側嵌入實心操作按鈕。
• hero 全寬、垂直居中的區塊，包含大型標題、簡潔副標題以及一個主要互動輸入區域。

09

文案語氣與禁用清單

• 語氣 直接、賦能且帶點趣味，邀請使用者進行創造。
• 標題風格 簡短有力的提問或宣言，例如「您將建構什麼？」或「從小開始，快速擴展。」
• 按鈕文案 清晰、導向行動的文字，例如「建立帳戶」或「立即註冊」。

• 避免使用純黑色背景——設計採用如 #F7F6F4 的溫暖米白色。
• 避免使用過度裝飾或襯線字體——字體始終採用簡潔的幾何無線體。
• 避免到處使用銳利的矩形圓角——元件採用大圓角（如 8px）或藥丸形設計。
• 避免讓橙色強調色充斥使用者介面——它嚴格保留給高優先級的行動呼籲。
• 避免使用厚重的陰影或高對比邊框——層級感透過非常柔和、細微的陰影來傳達。
• 避免標題使用寬鬆的行高——文字保持緊湊。
• 避免: 充滿術語的技術性說明
• 避免: 強勢的銷售用語
• 避免: 被動或不確定的表達方式

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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