精选 · 开放 · 免费

Mixpanel

为现代工程和增长团队提供的主动式AI驱动产品分析。

01

设计气质 DNA

为产品团队打造的、复杂的数据驱动指挥中心。

02

色彩

白色背景上简洁、高对比度的排版，搭配鲜艳的紫色渐变点缀。

03

字体

geometric-sans · humanist-sans · monospace

• display60px · 500
• heading36px · 500
• subheading18px · 400
• body16px · 400

标题使用紧凑字间距和500字重。 · 正文依赖于高度易读的人文主义无衬线字体。 · 等宽字体严格保留用于代码片段。

04

间距

8px基线网格，分区之间留有充足空白。

05

表面 (圆角 / 阴影 / 边线)

用于卡片和输入框的1px实线rgba(0,0,0,0.1)边框。

rgba(0,0,0,0.05) 0px 0px 0px 1px · rgba(0,0,0,0.08) 0px 4px 16px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

布局

最大化居中容器，采用堆叠式分区和基于网格的功能布局。

07

动效与交互

交互元素上的平滑悬停过渡。 · 模态框和抽屉出现时的微妙淡入动画。

通过细微的颜色变化或背景改变来指示交互性。 · 通过状态变化或微小缩放动画提供即时反馈。

08

组件

• button 纯色主按钮，采用胶囊形圆角（999px）和白色背景上的高对比度墨色；次级操作使用幽灵按钮。
• card 浅色背景，搭配微妙的1px边框、12px圆角和16px-24px内边距。
• chip 小型圆角标签，半径16px，用于分类和筛选。
• input 带清晰边框的输入框，8px圆角，焦点状态明确。
• hero 居中标题，搭配大型几何字体、辅助说明文字和一排水平功能切换开关。

09

文案语气与禁用清单

• 语气 自信、专业且略带前瞻性。
• 标题风格 直接、主动的陈述，强调速度、数据和智能。
• 按钮文案 行动导向且清晰（例如“免费开始”、“预约演示”）。

• 不要使用俏皮或圆润的显示字体——截图显示标题使用几何形、中等字重的无衬线字体。
• 不要使用霓虹或过度饱和的颜色——截图显示精致的紫色点缀搭配中性深色系。
• 不要在卡片上使用粗边框——截图显示细微的1px边框搭配柔和阴影。
• 不要使用密集、局促的布局——截图显示充足的空白和清晰的垂直韵律。
• 不要使用斜体字进行强调——截图显示通过字重变化（500 vs 400）来实现。
• 不要为按钮使用圆角方形——截图显示主行动按钮严格采用胶囊形（999px半径）。
• 避免: 充满行话的句子
• 避免: 被动语态
• 避免: 过于俏皮的语言

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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