精選 · 開放 · 免費

Kit

專為自動化成長與簡化創作者工作流程設計的 email 行銷平台。

publishingnewsletter

Kit 網站截圖

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

原站: https://kit.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

創作者工具Email 自動化成長行銷簡化工作流程SaaS 平台

數位創作者管理受眾成長的精簡指揮中心。

02

色彩

#44B1FFAccent

#1E1E1EInk

#F9F7F4BG

#F2EFE9BG soft

#FFFFFFBG quiet

rgba(227, 227, 227, 1)Line

採用中性溫暖灰白色調與深灰色，打造乾淨無障礙介面，並以單一明亮藍色作為主要操作按鈕的強調色。

03

字型

humanist-sans · monospace

display64px · 700
h240px · 700
body16px · 400
caption14px · 400

使用粗體字重（700）作為主要標題，建立強烈視覺層級。 · 維持展示型排版的緊湊字距，增強現代感。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

以 4px 為基礎的統一網格，搭配寬裕留白以維持乾淨舒適的佈局。

05

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

sm · 8px

md · 12px

lg · 16px

pill · 999px

1px solid #E3E3E3

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

12 欄網格搭配最大寬度容器，採用響應式斷點適配手機與桌面視圖。

07

動效與互動

100msmicro

150mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

在 hover 與 focus 狀態下進行平滑的顏色與背景色過渡。

互動元素如按鈕與連結在互動時產生細微色彩過渡。 · 標準游標指標並提供即時視覺回饋。

08

組件

button 主要按鈕採用膠囊造型，背景為明亮藍色（#44B1FF）搭配黑色文字。次要按鈕為文字型或外框型。
card 卡片具備柔和的 12px 或 16px 圓角、細微陰影，以及白色或灰白色背景。
chip 小型圓角標籤元素，8px 圓角，用於分類標記。
input 標準表單輸入框，具 8px 圓角與 1px solid #E3E3E3 邊框。
hero 分割式首頁橫幅區域，左側配置大型粗體標題、輔助段落與醒目 CTA 按鈕，右側搭配大型生活情境圖片取得平衡。

09

文案語氣與禁用清單

語氣賦權、直接且以創作者為核心。
標題風格 以粗體、行動導向的陳述強調效益而非功能。
按鈕文案 直接且低門檻，強調「免費試用」與「無需信用卡」。

不要在主要內容區域使用純白背景——截圖顯示使用溫暖的灰白色（#F9F7F4）。
不要使用多種強調色——設計僅依賴單一、統一的明亮藍色（#44B1FF）作為所有主要操作的強調色。
不要使用襯線或裝飾性字體作為標題——截圖顯示所有排版皆採用簡潔的人文主義無襯線字體類別。
不要為所有元素套用厚重陰影——陰影僅謹慎使用於卡片與浮動表面。
不要為按鈕或卡片使用方形角落——設計一致採用圓角（8px 至 16px 或膠囊造型）。
不要使用密集擁擠的佈局——設計優先考量寬裕留白與清晰的垂直節奏。
避免: 過度專業術語的行銷話語
避免: 侵略性或過度複雜的銷售說辭

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kit — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

此設計適用於現代創作者 SaaS 平台，定位為精簡的 email 行銷自動化工具。色彩基底為溫暖灰白色（#F9F7F4）背景，搭配深炭灰色（#1E1E1E）文字，以及單一鮮亮藍色（#44B1FF）作為操作按鈕強調色。排版採用簡潔的人文主義無襯線字體類別，涵蓋展示型與內文字體，並透過緊湊字距營造現代感。重要禁忌包括：絕不使用純白作為主要區塊背景、絕不引入競合強調色、絕不使用襯線字體。佈局寬敞且基於網格，強調清晰度與易用性。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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