OpenDesign·你的设计资产库

网页参考

Wope

一款拥有暗色高端美学的 AI 驱动 SEO 研究平台

Developer ToolsDark ModeBold TypographyAITooling

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

SEOAI驱动研究关键词发现分析

一个面向 SEO 情报的未来指挥中心

02

色彩

#9d4eddAccent
#ffffffInk
#b0b0c0Ink soft
#0a0a12BG
#12121eBG soft
#1a1a2eBG quiet
#6b6b80Muted
rgba(255,255,255,0.1)Line

采用高对比度的深暗背景与活力紫色点缀,以实现强调效果

03

字体

geometric-sans · monospace

  • display56px · 600
  • h232px · 500
  • body16px · 400
  • caption12px · 400

标题使用紧凑的行高 · 保持高对比度 · 所有文本使用无衬线字体

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

基于一致的 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 设计,兼具开发者工具美学,同时对营销者保持可访问性。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。