精選 · 開放 · 免費

Framer

一款優雅、深色模式的 SaaS 平台，結合整合式設計工具，用於建構精美網站。

Design ToolsExpressiveMotionPlayful

Framer 網站截圖

↓ 下載設計系統包 (22 MB)在 OpenDesign 中開啟

原站: https://framer.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

創意視覺建構器高效能專注新創

一款高端設計工具，宛如一個精心打磨的創意工作室。

02

色彩

#0099FFAccent

#FFFFFFInk

rgba(255,255,255,0.6)Ink soft

#000000BG

#242424BG quiet

#999999Muted

rgba(255,255,255,0.1)Line

高對比深色模式，搭配單一鮮明的藍色強調色。

03

字型

geometric-sans · humanist-sans · geometric-mono

display96px · 500
display-sm32px · 500
body18px · 400
caption12px · 400

大型展示文字使用緊湊的字間距 · 內文文字在深色背景下保持高對比度 · 標題和使用者介面優先使用幾何無襯線字體

04

間距

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

一致的 4px 格線，搭配寬裕的留白，營造高端質感。

05

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

sm · 6px

md · 8px

lg · 15px

pill · 100px

極簡，通常使用細微的白色邊框或陰影來界定深度。

0px 1px 2px rgba(0,0,0,0.25) · 0px 10px 30px rgba(0,0,0,0.25) · 0px 0px 0px 2px #090909

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

內容置中，具有寬大邊距和清晰的垂直韻律。

07

動效與互動

200msmicro

300mssmall

800msmedium

cubic-bezier(0.44, 0, 0.56, 1)easing

流暢的淡入效果與細微的 hover 過渡動畫

按鈕和連結上的細微色彩或透明度變化。 · 透過輕微的縮放或色彩變化提供即時視覺回饋。

08

組件

button 藥丸形按鈕，具有強烈對比，可以是黑底白字或白底黑字。
card 深色卡片，帶有細微邊框和圓角，通常包含圖片或資料。
chip 小型、圓角的標籤或徽章。
input 簡潔的深色輸入框，帶有細微邊框。
hero 在深色背景上置中的巨大、粗體字型，並配有明確的行動呼籲。

09

文案語氣與禁用清單

語氣自信、現代且專業。
標題風格 粗體、直接且以效益為導向。
按鈕文案 清晰且具行動導向。

勿使用淺色背景 — 截圖顯示主要背景為 #000000。
勿使用襯線字體 — 截圖顯示展示與內文字體皆為無襯線字體。
勿使用圓角方形 — 截圖顯示為 100px 的藥丸形按鈕。
勿使用多種鮮豔色彩 — 截圖顯示以藍色強調色為主。
勿使用纖細、淺色的字型 — 截圖顯示標題為粗體、高對比度。
勿使用雜亂的佈局 — 截圖顯示寬裕的留白與清晰的層次結構。
避免: 過度技術性的術語
避免: 被動語氣
避免: 雜亂的佈局

10

包內真實截圖

Framer — 桌面首屏（hero） — 桌面首屏（hero）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Framer — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個設計工具的高效能 SaaS 網站。設計 DNA 是深色、高端且簡潔的美學。關鍵色彩為 #000000（背景）、#FFFFFF（墨色）和 #0099FF（強調色）。字體主要為幾何與人文主義無襯線字體。關鍵禁忌：勿使用淺色背景、勿使用襯線字體、勿使用多種互相競爭的強調色、勿使用纖細字型作為標題、勿使用雜亂的佈局、勿使用非藥丸形按鈕。語氣自信而現代，聚焦於速度與創意力量。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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