精選 · 開放 · 免費

Fly.io

一個俏皮、開發者優先的雲端平台，讓基礎架構感覺平易近人且快速。

01

設計氣質 DNA

一個友善的街坊工作坊，用於建構與部署程式碼。

02

色彩

柔和、低飽和度的背景，搭配深色、高對比度的文字，以及用於主要操作的單一鮮明紫色強調色。

03

字型

grotesque-sans · humanist-sans · monospace

• display56px · 500

標題文字使用粗體、略帶不規則感的 grotesque 字體以展現個性。 · 內文使用清晰、易讀的 humanist 無襯線字體。 · 斜體強調（如「無所畏懼」）使用襯線字體以突出顯示。 · 大型標題的字距緊湊，較小文字的字距則稍微寬鬆。

04

間距

區塊之間有寬裕的垂直間距，群組元素內部則採用緊湊間距。

05

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

1px solid rgba(231,230,244,1)

rgba(32,34,55,0.075) 0px 0px 0px 1px · rgba(32,34,55,0.05) 0px 10px 15px -3px · rgba(91,33,182,0.1) 0px 5px 5px -2px

06

版面

以置中的單欄主視覺佈局開始，過渡至多欄功能區塊格線。

07

動效與互動

顏色與背景過渡使用標準的 ease-in-out。 · 微互動使用快速的透明度與變形變換。

互動元素有細微的背景或顏色變化。 · 標準的按壓回饋。

08

組件

• button 藥丸形狀的主要按鈕，採用實心紫色背景與白色文字；次要按鈕為透明背景搭配細微邊框。
• card 細微、無邊框的卡片，帶有柔和陰影或透過 proximity 進行群組。
• chip 並非醒目呈現；框架標誌以圖標徽章形式出現。
• input 在截圖中不可見；推斷為簡潔、圓角的輸入框。
• hero 大型、置中的標題，上方有醒目、 whimsical 的插圖。

09

文案語氣與禁用清單

• 語氣 自信、友善且略帶不羈。
• 標題風格 簡短、有力且直接，常混合粗體與斜體以強調。
• 按鈕文案 以行動為導向且清晰，例如「部署你的應用程式」。

• 不要使用深色主題 — 截圖顯示以淺色、帶有淡紫色調的背景為主。
• 不要使用生硬、幾何的插圖 — 截圖顯示手繪、 whimsical 且有機的線條藝術。
• 不要使用單一、刺眼的強調色 — 截圖顯示以紫色為主，但插圖中採用一系列柔和的粉彩色調。
• 不要使用緊密、密集的佈局 — 截圖顯示寬裕的留白與清晰的視覺分隔。
• 不要使用純粹的無襯線字體排版 — 截圖顯示標題中使用襯線字體進行斜體強調。
• 不要使用銳利、直角的 UI 元素 — 截圖顯示一致採用圓角，通常是藥丸形狀。
• 避免: 過度企業化的術語
• 避免: 冰冷、非個人化的語言
• 避免: 密集、技術性的文字牆

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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