精選 · 開放 · 免費
Retool
一個為打造內部工具而生的開發者優先平台。
saasdev
01
設計氣質 DNA
營運導向開發者優先值得信賴高效能
相當於企業級 IDE 的內部工具。
02
色彩
#518DD2Accent
#E9EBDFInk
#CBCC C4Ink soft
#151515BG
#242424BG soft
#8B867FBG quiet
rgba(233, 235, 223, 0.12)Line
以溫暖、柔和的中性色與冷靜的藍色強調色，構成高對比度的實用性配色。
03
字型
grotesque-sans · humanist-sans · monospace
- display
72px · 380 - display-2
48px · 380 - body
24px · 400 - body-2
16px · 400 - mono
14px · 400
04
間距
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
以 4px 為基準，搭配 24px 的欄間距與充足的垂直內距，創造呼吸空間。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 20px
pill · 9999px
1px solid rgba(233, 235, 223, 0.12) 用於細微的分隔線；1px solid rgb(233, 235, 223) 用於啟用狀態。
0px 1px 2px rgba(0, 0, 0, 0.12) · 0px 68px 116px rgba(0, 0, 0, 0.35)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬深色背景，搭配居中且受限的內容區域。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.72, 0, 0.12, 1)easing
hover 狀態下的流暢 opacity 與 transform 過渡效果。 · 文字元素的錯落入場動畫。 · UI 元件的細微視差或浮動效果。
按鈕與互動元素有細微的背景色偏移或輕微向上平移。 · 透過色彩或 opacity 變化提供即時視覺回饋，通常緊接著導覽過渡。
08
組件
- button 藥丸狀按鈕，主要操作（免費開始）使用實心白色/淺色背景，次要操作（預約演示）使用透明邊框背景。
- card 簡潔、略帶圓角的容器，透過細微邊框或背景差異化來展示產品介面。
- chip 小型、圓角的標籤或標示，內距極小，常包含等寬字體以顯示技術概念。
- input 圓角輸入欄位，具有簡潔邊框與淺色背景，用於搜尋或指令輸入。
- hero 一個巨大的、居中的標題對，下方是浮動的產品 UI 示範，背景為細微的漸層。
09
文案語氣與禁用清單
- 語氣 直接、技術性且自信。
- 標題風格 簡短、有力、以行動為導向（例如：「隨心所欲地打造，在你信賴的平台上發布。」）。
- 按鈕文案 清晰且以效益為導向，強調入門的輕鬆或專家諮詢。
- 不要使用高飽和度的霓虹色——截圖顯示的是一組溫暖的灰色、深色背景與單一冷靜藍色強調色的調色板。
- 不要使用裝飾性的襯線字體作為標題——截圖顯示的是乾淨、功能性的 grotesque-sans 作為大型展示文字。
- 不要在主要容器上使用尖銳的 90 度角——截圖顯示偏好柔和、大圓角的處理（藥丸形狀或 20px+ 的曲率）。
- 不要使用雜亂、有紋理的背景——截圖顯示的是平滑的漸層與乾淨的純色深色表面。
- 不要使用狹窄、擁擠的佈局——截圖顯示的是寬敞的間距與大型字體，以建立清晰的層級。
- 不要使用多種互相競爭的強調色——截圖顯示僅在特定圖形情境中克制地使用藍色與溫暖的橙紅色。
- 避免: 空洞言辭
- 避免: 企業流行語
- 避免: 模糊的承諾
- 避免: 過多的驚嘆號
- 避免: 被動語態
- 避免: 過於複雜的句子
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個面向開發者的 SaaS 平台，用於建構內部工具。設計採用深色模式調色板，使用溫暖、柔和的灰色（#151515、#E9EBDF）與冷靜的藍色強調色（#518DD2）。字體方面，展示文字使用乾淨的 grotesque-sans，內文使用 humanist-sans，並極度強調大型、輕字重的標題。佈局居中且寬敞，內距充足。關鍵禁忌：絕不高飽和度霓虹色、避免使用裝飾性襯線字體作為標題、不要在主要 UI 容器上使用尖銳的 90 度角。語氣直接、技術性且自信。
en · zh-CN · zh-TW · ja · ko