精選 · 開放 · 免費

Val Town

一個友善的無伺服器平台，讓您即時編寫與部署 JavaScript。

01

設計氣質 DNA

一個歡迎開發者快速部署腳本的在地咖啡館

02

色彩

以高對比的深色文字與淺色背景為基礎，搭配單一鮮亮的青色作為主要操作的強調色。

03

字型

geometric-sans · humanist-sans · slab-mono

• display48px · 700
• headline36px · 700
• body16px · 400
• caption14px · 400
• code16px · 400

04

間距

以 4 為基底的系統，區塊之間留有充裕的垂直內距，通常為 96px，確保視覺上的清晰分隔。

05

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

1px solid rgba(0,0,0,0.1)

0 20px 25px -5px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 8px 10px -6px rgba(0,0,0,0.1)

06

版面

一個置中的首頁區域，左側為文字，右側為複雜的重疊複合影像，後方接著堆疊的內容區塊。

07

動效與互動

互動元素的標準顏色與背景顏色過渡效果 · 按鈕與連結的平滑懸停與聚焦狀態變化

按鈕與連結上細微的背景顏色偏移或透明度變化。 · 背景顏色過渡提供即時的視覺回饋。

08

組件

• button 主要按鈕為膠囊形狀，擁有鮮亮的青色背景與深色文字；次要按鈕為膠囊形狀，帶有細微邊框與深色文字。
• card 深色主題卡片，帶有細微陰影與圓角，用於見證與功能亮點。
• chip 使用極少，主要在 UI 模型中作為徽章或小型標籤出現。
• input 乾淨的帶框輸入欄位，具有標準內距與圓角。
• hero 分割式佈局，包含粗體排版標題、副標題、兩個主要操作按鈕，以及一個大型的產品介面重疊複合影像。

09

文案語氣與禁用清單

• 語氣 友善、親切且略帶俏皮，但技術能力穩健。
• 標題風格 直接、以效益為導向，並以隨性、歡迎的語氣撰寫。
• 按鈕文案 以行動為導向，使用「開始」或「複製」等簡單動詞，鼓勵立即互動。

• 不要使用襯線字體作為標題——截圖顯示整體使用粗體的幾何無襯線字體。
• 不要將深色主題作為預設——主要背景是乾淨明亮的白色。
• 不要使用刺眼、飽和的強調色——主要強調色是明亮但親切的青色 (#2EC4FF)。
• 不要使用銳利、方形的圓角——UI 採用圓角，按鈕通常使用膠囊形狀 (999px)。
• 不要在各處使用厚重的陰影——陰影細微，主要用於浮動卡片與複合影像。
• 不要讓佈局過於緊密——設計使用充裕的留白與內距，特別是主要區塊之間。
• 避免: 過於複雜或充滿行話的技術語言
• 避免: 具攻擊性或急迫的銷售導向文案
• 避免: 正式、生硬或企業風格的措辭

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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