01
设计气质 DNA
SEOAI驱动研究关键词发现分析
一个面向 SEO 情报的未来指挥中心
02
色彩
#9d4eddAccent#ffffffInk#b0b0c0Ink soft#0a0a12BG#12121eBG soft#1a1a2eBG quiet#6b6b80Mutedrgba(255,255,255,0.1)Line采用高对比度的深暗背景与活力紫色点缀,以实现强调效果
03
字体
- display
56px · 600 - h2
32px · 500 - body
16px · 400 - caption
12px · 400
标题使用紧凑的行高 · 保持高对比度 · 所有文本使用无衬线字体
04
间距
4px8px12px16px24px32px48px64px96px128px基于一致的 4px 基准网格,搭配充足的留白以营造高端感
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
采用低不透明度的白色,添加细微的 1px 边框
0 0 40px rgba(157,78,221,0.15) · 0 4px 20px rgba(0,0,0,0.5)
06
布局
1200container
12columns
24pxgutter
768 / 1024 / 1440breakpoints
居中单列布局,搭配悬浮的 UI 模型
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
内容平滑淡入 · 点缀元素上的发光脉冲效果 · 平滑的滚动揭示动画
细微的亮度提升与缩放变换 · 即时反馈,带有轻微的按压效果
08
组件
- button 药丸形状,透明背景并带有细微边框
- card 深色玻璃拟态风格,带有细微的发光效果
- chip 小型圆角标签,采用柔和的背景色
- input 深色输入框,带有细微边框和占位符文本
- hero 居中的大标题文字,带有发光点缀元素,下方展示产品模型
09
文案语气与禁用清单
- 语气 自信且权威,同时不失亲和力
- 标题风格 使用主动动词和面向未来的语言,进行大胆陈述
- 按钮文案 清晰的价值主张,带有紧迫感(例如“14天无限期试用”)
- 不要使用浅色背景 —— 截图显示的是深暗(#0a0a12)主题
- 不要使用带有纯色填充的圆角按钮 —— 截图显示的是药丸形透明按钮
- 不要使用多种点缀颜色 —— 截图显示的是单一的紫色(#9d4edd)作为主点缀色
- 不要使用衬线字体 —— 截图全程使用了几何无衬线字体
- 不要使用小号的主视觉文字 —— 截图显示的是大号、粗体的展示排版
- 不要使用杂乱的布局 —— 截图显示的是充足的留白和居中构图
- 不要使用明亮的背景色 —— 截图保持了始终如一的暗色调色板
- 避免: 过于技术化的行话
- 避免: 被动语态
- 避免: 模糊的承诺
11
System Prompt
Wope 是一款面向数字营销者的 AI 驱动 SEO 研究平台,定位为高端、未来的工具。设计采用暗色调色板,以深海军蓝/黑色背景(#0a0a12)为主,搭配活力的紫色(#9d4edd)点缀关键元素。排版采用几何无衬线字体,标题使用粗体展示字重。关键禁忌:避免浅色背景,不要使用纯色填充按钮(它们是透明药丸形),切勿使用多种点缀颜色,避免衬线字体,不要让主视觉文字过小,也绝不要创建杂乱的布局。界面展示了一个带有发光效果的悬浮产品模型,强调了工具的复杂性。底部的客户标识建立了可信度。整体感觉是高端 SaaS 设计,兼具开发者工具美学,同时对营销者保持可访问性。