精选 · 开放 · 免费
Texts
一个 AI 增强的消息中枢,在干净、私密的界面中组织您所有的对话。
productmessagingdark
01
设计气质 DNA
统一收件箱AI 助手生产力消息传递隐私
一个精简的、由 AI 驱动的指挥中心,用于管理您所有的对话
02
色彩
#2563EBAccent
#101116Ink
#1C2022Ink soft
#FFFFFFBG
#F9FAFBBG soft
#F5F7FABG quiet
#697882Muted
rgba(226, 232, 240, 1)Line
高对比度、以可访问性为重点的调色板,以专业蓝色调为主导。
03
字体
humanist-sans · monospace
- display
56px · 700 - h1
48px · 700 - body
16px · 400
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
56px
64px
标准 4px 网格,为大量留白的区块提供宽裕的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 12px
lg · 16px
pill · 9999px
1px solid rgb(226, 232, 240)
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.2) 0px 4px 16px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
为内容部分采用居中的单栏布局,并提供宽裕的垂直内边距。
07
动效与交互
200msmicro
220mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
用于内边距和高度变化的平滑布局过渡 · 用于状态变化的细微透明度渐变
交互元素使用标准指针光标。 · 在交互区域保持指针光标。
08
组件
- button 高对比度的 CTA,采用药丸形状圆角(9999px)、粗体字重和方向箭头。
- card 干净的白色容器,带有细微的圆角(12px)和柔和的阴影。
- chip 最小化的标签/组件,带有浅色边框。
- input 干净、带边框的输入字段,具有标准内边距。
- hero 粗体、居中对齐的排版,置于干净背景之上,并包含一个强有力的单一行动号召。
09
文案语气与禁用清单
- 语气 自信、透明、前瞻性
- 标题风格 粗体、陈述性语句,强调创新与组织
- 按钮文案 直接、以行动为导向,并带有方向性提示(箭头)
- 不要使用衬线字体 —— 截图显示所有排版均使用干净的无衬线字体族。
- 不要使用霓虹色或高度饱和的次级颜色 —— 截图显示了克制的蓝色、白色和深灰色调色板。
- 不要使布局杂乱 —— 截图显示了宽裕的留白和专注的内容部分。
- 不要在主要元素上使用尖锐的方形圆角 —— 截图显示卡片为 12px 圆角,按钮为 9999px 圆角。
- 不要使用厚重、侵略性的阴影 —— 截图显示了非常细微、低不透明度的投影阴影。
- 不要使用复杂的装饰性插图 —— 截图依赖于干净的文本、简单的图标和界面截图。
- 避免: 技术术语
- 避免: 过于正式的语言
- 避免: 被动语态
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(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 界面,用于一款 AI 驱动的生产力工具。它使用高对比度调色板,背景为白色(#FFFFFF),深色墨迹(#101116),并以蓝色调(#2563EB)为主导。排版完全使用无衬线字体(Inter),具有粗体、负字间距的标题。关键禁忌:避免衬线字体,不要使用霓虹色或饱和的次级颜色,切勿用不必要的装饰元素使布局杂乱。保持宽裕的留白,并为表面使用 12px 圆角。整体感觉是现代、高效且值得信赖的。
en · zh-CN · zh-TW · ja · ko