精选 · 开放 · 免费

Kit

一个旨在自动化增长并简化创作者工作流的电子邮件营销平台。

publishingnewsletter

Kit 网站截图

↓ 下载设计系统包 (22 MB)在 OpenDesign 中打开

原站: https://kit.com

📦 浏览包内文件 →

01

设计气质 DNA

创作者工具邮件自动化增长营销简化工作流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实线 #E3E3E3。
hero 一个分栏式首屏区域：左侧是大号、加粗的标题、一段辅助文字和一个醒目的行动号召按钮，右侧则用一张大幅的生活场景图片来平衡。

09

文案语气与禁用清单

语气赋能、直接、以创作者为中心。
标题风格 加粗、行动导向的陈述，强调收益而非功能。
按钮文案 直接且低门槛，强调“免费试用”和“无需信用卡”。

不要在主要使用区域使用纯白色背景——截图显示使用的是温暖的米白色（#F9F7F4）。
不要使用多种强调色——设计依赖于单一、一致的亮蓝色（#44B1FF）用于所有主要操作。
不要在标题中使用衬线字体或装饰性字体——截图显示所有排版都是简洁的人文无衬线（humanist-sans）类别。
不要对所有元素应用厚重的投影——投影使用克制，主要用于卡片和抬高的表面。
不要对按钮或卡片使用直角——设计一致使用圆角（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平台，定位为电子邮件营销自动化的流线型工具。配色方案建立在温暖的米白色（#F9F7F4）背景上，搭配深炭灰色（#1E1E1E）文字，以及一个单一的、鲜艳的蓝色（#44B1FF）作为行动号召的强调色。排版依赖于简洁的人文无衬线（humanist-sans）类别用于标题和正文，并采用紧凑的字间距以营造现代感。关键禁忌包括：绝不要为主要区域使用纯白背景，绝不要引入冲突的强调色，绝不要使用衬线字体。布局宽敞且基于网格，强调清晰性和易用性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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