OpenDesign·你的设计资产库

网页参考

Reflect

一款受人脑连接想法方式启发的AI驱动笔记应用。

NotesSaaSCalm
Reflect 网站截图

01

设计气质 DNA

AI笔记知识思考连接

一个平静、具有宇宙感的思维，连接着各种想法。

02

色彩

#6D48FFAccent
#F4F0FFInk
#EFEDEDInk soft
#060317BG
#0A0520BG soft
#030014BG quiet
#9B93BFMuted
rgba(239, 237, 253, 0.15)Line

深邃的宇宙紫色营造出平静、专注的思考环境。

03

字体

geometric-sans · humanist-sans · monospace

  • display72px · 500
  • heading48px · 500
  • body16px · 400
  • caption14px · 400

主标题使用Inter V或类似人文无衬线字体，字重500。 · UI文本使用Inter V，字重400。 · 行高设置充裕（1.4-1.5）以保证可读性。 · 标题使用紧凑字距，正文使用中性字距。

04

间距

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

垂直间距基于4px网格使用一致的比例尺。

05

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

sm · 5px
md · 8px
lg · 16px
pill · 999px

卡片和容器使用细微、低透明度的白色或浅紫色边框（rgba(239, 237, 253, 0.6)）。

inset 0 0 24px rgba(255, 255, 255, 0.06) · 0 -7px 11px 0 rgba(164, 143, 255, 0.12) inset

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中、窄列布局，留有充裕空白，背景为宇宙感径向渐变。

07

动效与交互

220msmicro
400mssmall
1000msmedium
cubic-bezier(0.6, 0.6, 0, 1)easing

滚动时淡入 · 流畅的悬停过渡效果 · 滚动/视差时发生变换

交互元素上产生细微的颜色变化或透明度变化。 · 提供即时视觉反馈，通常伴随细微的缩放或透明度变化。

08

组件

  • button 药丸形或略带圆角的按钮，采用纯色背景（如‘开始免费试用’）或细微边框。
  • card 深色、半透明卡片，带有细微内发光（内阴影）和细边框。
  • chip 小型药丸形标签，带有细微边框或背景（如‘使用AI记笔记’）。
  • input 深色、圆角输入框，带有细微边框和占位符文本。
  • hero 居中展示的大型标题，背景为宇宙感径向渐变视觉（如黑洞或星云），下方是副标题和产品截图。

09

文案语气与禁用清单

  • 语气 平静、智能且赋能。
  • 标题风格 直接、聚焦价值且略带理想主义（如‘用Reflect更好地思考’）。
  • 按钮文案 清晰且以行动为导向（如‘开始免费试用’、‘注册’）。
  • 不要使用浅色主题——截图显示的是深邃的宇宙暗色模式。
  • 不要使用尖锐、矩形的按钮——截图显示的是圆润的药丸形按钮。
  • 不要使用饱和、多彩的调色板——截图显示的是单色紫色调色板，带有细微渐变。
  • 不要使用大块、厚重的文本——截图显示的是精致、中等字重的几何无衬线字体用于标题。
  • 不要使用厚重的投影——截图显示的是细微的内发光和细边框来营造层次感。
  • 不要创建杂乱的布局——截图显示的是充裕的留白和干净、居中的列式结构。
  • 避免: 大量使用行话
  • 避免: 激进的销售话术
  • 避免: 杂乱或繁忙的信息传达

10

包内真实截图

Reflect — 桌面首屏（hero）
桌面首屏（hero）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Reflect — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一款名为Reflect的高端AI驱动笔记SaaS产品。其设计DNA是‘宇宙宁静’——一个非常深、近乎黑色的紫色背景（#060317），搭配单一的电光紫（#6D48FF）作为强调色，用于渐变和激活状态。字体干净现代，正文和展示文本使用人文无衬线字体（Inter V），标题使用中等字重。关键禁忌：永远不要使用浅色背景，永远不要使用尖角UI元素，永远不要使用杂乱、多彩的调色板。布局居中且宽敞，卡片和组件使用细微的内发光和细边框来定义轮廓。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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