精選 · 開放 · 免費

Prismic

用於轉換網站的 headless CMS 與落地頁建構工具。

01

設計氣質 DNA

一個為開發者和行銷團隊打造高效網站的乾淨、專業工作空間。

02

色彩

以高對比的黑白確保清晰度，並使用單一綠色強調色來突顯關鍵操作與重點。

03

字型

geometric-sans · humanist-sans

• display56px · 700
• heading40px · 500
• body18px · 500
• small14px · 500

使用幾何無襯線字體（geometric-sans）作為標題，以傳達現代、技術感。 · 使用人文無襯線字體（humanist-sans）作為內文，以確保可讀性。 · 避免使用裝飾性或過於複雜的字體。

04

間距

採用一致的 4px 格線，並以標準的 16px 和 32px 作為 padding/margin 增量。

05

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

1px solid rgba(238,238,238,1)

0px 1px 6px 0px rgba(0,0,0,0.06) · 0px 2px 32px 0px rgba(0,0,0,0.16)

06

版面

內容居中，設有最大寬度容器，各段落間有充足的垂直間距。

07

動效與互動

針對 hover 和 focus 狀態，對 color、background-color 和 opacity 採用標準過渡效果。

互動元素（如按鈕和連結）在 hover 時有細微的顏色或背景色變化。 · 透過狀態變化提供即時的視覺回饋。

08

組件

• button 主要操作使用黑色填充按鈕，次要操作使用白色外框按鈕。兩者皆帶有圓角和充裕的內邊距。
• card 白色背景的卡片，帶有細微邊框或柔和陰影，用於放置案例研究與見證。
• chip 用於顯示統計數據（例如：「頁面載入速度提升 50%」），背景淺色並帶有圓角。
• input 標準文字輸入框，帶有 1px 邊框和 8px 圓角。
• hero 大型居中標題，使用顯著的強調色，後接副標題與兩個主要號召行動按鈕。

09

文案語氣與禁用清單

• 語氣 專業、自信且樂於助人。
• 標題風格 直接、以效益為導向，並使用粗體強調字來突出重點。
• 按鈕文案 清晰且以行動為導向（例如：「立即開始」、「申請展示」）。

• 不要使用多色配色方案 — 畫面顯示的是單色基底搭配單一綠色強調色。
• 不要使用襯線字體 — 標題與內文均嚴格使用無襯線字體。
• 不要使用厚重的陰影 — 介面依賴細微的陰影或簡單邊框來營造層次。
• 不要使用擁擠、雜亂的佈局 — 設計強調留白與清晰的視覺層級。
• 不要使用複雜的漸層 — 背景為純色。
• 不要使用低對比度的文字 — 黑底白字配色方案確保了高可讀性。
• 避免: 模糊的語言
• 避免: 過於技術性的術語
• 避免: 侵略性的銷售語氣

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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