OpenDesign·你的设计资产库

网页参考

Granola

为奔波于连续会议中的人们打造的AI记事本。

AIProductivity

封面待补录,可通过原站查看设计。

01

设计气质 DNA

会议笔记AI记事本效率轻松

一位沉静而智能的助手,默默整理你的一天。

02

色彩

#B2C248Accent
#0E0F0CInk
#536471Ink soft
#FBFBF6BG
#EAEDE5BG soft
#F7F7F2BG quiet
#D5D5D2Muted
rgba(227, 227, 227, 1)Line

质朴、有机的中性色系,搭配独特的哑光橄榄绿作为点缀。

03

字体

transitional-serif · geometric-sans

  • display56px · 400
  • h236px · 400
  • body16px · 400

展示字体使用过渡衬线体,营造平静、编辑感的氛围。 · 正文字体使用清晰的几何无衬线体,确保易读性。 · 标题采用紧凑的字距,呈现现代、自信的视觉效果。 · 字体粗细克制,主要使用400。

04

间距

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

充裕的留白,基于4px构建清晰的垂直节奏。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid rgba(227, 227, 227, 1)

rgba(0, 0, 0, 0.03) 0px 0px 2px 0px inset · rgba(0, 0, 0, 0.03) 0px 0px 36px 0px · rgba(0, 0, 0, 0.15) 0px 8px 48px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单列内容流,配有充裕的内边距。

07

动效与交互

150msmicro
300mssmall
0msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上的平滑颜色过渡。 · hover 状态下背景色与文字色的过渡。 · focus 状态下的 box-shadow 过渡。

按钮与链接上的细微颜色变化。 · 平滑过渡到按压状态。

08

组件

  • button 高对比度的胶囊形主按钮。
  • card 带有微弱阴影和浅色边框的柔和圆角卡片。
  • chip 用于特性或标签的胶囊形标签。
  • input 简洁、极简的输入框。
  • hero 居中放大的衬线体主标题,配有清晰的行动号召按钮。

09

文案语气与禁用清单

  • 语气 乐于助人、直接且略带俏皮。
  • 标题风格 直接且以利益为导向,使用大号衬线字体。
  • 按钮文案 行动导向、清晰且高对比。
  • 不要使用高饱和度的霓虹色 — 截图显示的是哑光的橄榄绿和温暖的灰色。
  • 不要使用粗重、夸张的展示字体 — 截图显示的是优雅、轻至常规字重的衬线体标题。
  • 不要创建拥挤、密集的布局 — 截图显示的是充裕的留白和简洁、居中的排版流。
  • 不要使用尖锐、方正的边角 — 截图显示的是柔和、圆润的边角(8px、12px、胶囊形)。
  • 不要使用深色模式或厚重的深色背景 — 截图显示的是浅色、温暖的米白色(#FBFBF6)主题。
  • 不要使用复杂、嘈杂的渐变 — 截图显示的是干净、实色的色块和微弱的阴影。
  • 避免: 使用过于技术化的行话。
  • 避免: 显得强迫或咄咄逼人。
  • 避免: 使用复杂、多行的标题。

10

包内真实截图

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

11

System Prompt

这是一个用于会议笔记的AI效率工具着陆页,设计简洁专业。其设计DNA建立在一个沉静、质朴的调色板上,以温暖的米白色(#FBFBF6)和独特的哑光橄榄绿(#B2C248)为核心。字体搭配使用优雅的过渡衬线体作为展示标题,搭配清晰的几何无衬线体作为正文。布局居中且留白充裕,优先考虑可读性。关键颜色为:#FBFBF6(背景色)、#0E0F0C(文字色)、#B2C248(点缀色)和 #EAEDE5(浅背景色)。关键禁忌:1)不要使用高饱和度的霓虹色;调色板有意设定为哑光色调。2)不要使用粗重的展示字体;标题是精致且轻盈的。3)不要创建拥挤、密集的布局;设计依赖于充裕的间距和单列排版流来聚焦内容。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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