精選 · 開放 · 免費
Cap
一個乾淨、現代的 SaaS 登陸頁，用於螢幕錄製工具。
productmacoss
01
設計氣質 DNA
開發工具螢幕錄製開源螢幕截圖
一個乾淨、現代的 SaaS 儀表板，用於螢幕錄製工具
02
色彩
#0D74CEAccent
#000000Ink
#202020Ink soft
#fcfcfcBG
#838383Muted
rgba(229, 231, 235, 1)Line
在近乎白色的背景上使用高對比的黑色字體，並以一個鮮豔的藍色作為主要操作的強調色。
03
字型
sans-serif · ui-monospace
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
一致的 4px 基本單位，區段間留有充足的垂直間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgb(229, 231, 235)
rgba(0, 0, 0, 0.05) 0px 4px 10px 0px · rgba(0, 0, 0, 0.05) 0px 20px 25px -5px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的居中容器，搭配 12 欄網格
07
動效與互動
150msmicro
150mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素上的平滑 hover 轉場 · 影片時間軸上的播放頭動畫
按鈕和連結上的平滑色彩轉場 · 細微的縮放或色彩變化
08
組件
- button 圓角膠囊形狀，實色填充（黑色或藍色）搭配白色文字
- card 白色卡片，帶有細微陰影和圓角
- chip 膠囊形狀的分類選擇器，帶有圖示
- input 圓角膠囊形輸入欄位，帶有淺色邊框
- hero 分割式佈局，左側為大型文字，右側為產品截圖
09
文案語氣與禁用清單
- 語氣 專業、實用且直接
- 標題風格 大型、粗體、黑色的無襯線字體
- 按鈕文案 膠囊形按鈕上的行動導向文字
- 不要使用裝飾性字體——截圖顯示的是乾淨、中性的無襯線體。
- 不要使用深色模式——截圖顯示的是以淺色、近乎白色的背景為主。
- 不要使用生硬的陰影——截圖顯示的是非常細膩、柔和的陰影。
- 不要使用銳利的角落——截圖顯示的是膠囊形按鈕和圓角卡片。
- 不要使用霓虹色彩——截圖顯示的是節制的配色方案，僅有一個主要的藍色強調。
- 不要使用緊密的佈局——截圖顯示的是充足的留白與清晰的層級。
- 避免: 花俏的動畫
- 避免: 雜亂的佈局
- 避免: 強勢的銷售語言
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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個乾淨、現代的 SaaS 登陸頁，用於 Cap，一個開源的螢幕錄製工具。其設計 DNA 特徵在於淺色、近乎白色的背景 (#fcfcfc)、高對比的黑色字體，以及一個鮮豔的藍色 (#0D74CE) 用於如「註冊」和「升級」等主要操作。字體為中性的、人文主義風格的無襯線體，並以大尺寸（標題 60px）和緊湊的字距使用。關鍵的禁止事項：1) 不要使用深色模式或深色背景，因為截圖顯示的是淺色主題。2) 不要按鈕或卡片上使用銳利的角落；應使用膠囊形狀和圓角。3) 不要使用生硬的陰影；應使用細膩、柔和的陰影來營造深度。佈局寬敞，留白充足，強調清晰與專業感。互動元素具有平滑、細膩的轉場效果。語調專業且直接，聚焦於產品的實用性與開源特質。
en · zh-CN · zh-TW · ja · ko