OpenDesign·你的设计资产库

网页参考

Getuntil

一款趣味十足的倒计时应用,帮助你追踪生活中有意义的事件。

GradientConsumerProductPlayfulFriendly
Getuntil 网站截图

01

设计气质 DNA

倒计时期待重要事件个人追踪器

一个温暖、充满活力的个人日历,用于记录生活亮点

02

色彩

#FF3B30Accent
#000000Ink
#000000A6Ink soft
#FFFFFFBG
#F2F2F2BG quiet
#00000066Muted
rgba(0, 0, 0, 0.1)Line

充满活力的多彩渐变与干净、明亮的背景形成对比。

03

字体

humanist-sans

  • display40px · 700
  • headline30px · 700
  • body16px · 400

04

间距

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

慷慨的垂直节奏,主区域间距为80px

05

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

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

none

06

布局

1200container
12columns
24pxgutter
768breakpoints

带有充裕内边距的居中单栏布局

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

平滑过渡

在交互元素上显示指针光标 · 标准的点击行为

08

组件

  • button 带白色文字的圆角黑色胶囊按钮
  • card 大尺寸渐变圆角矩形
  • input 带有微妙背景的标准文本输入框
  • hero 应用图标、主标题、副标题以及悬浮在渐变背景上的UI卡片

09

文案语气与禁用清单

  • 语气 友好、积极、个人化
  • 标题风格 直接且以行动为导向
  • 按钮文案 清晰且具有鼓励性
  • 不要使用尖锐的角——截图显示的是柔和、大尺寸的圆角矩形
  • 不要使用深色背景——截图显示的是白色/浅色背景
  • 不要使用柔和、低饱和度的颜色——截图显示的是充满活力的高饱和度渐变
  • 不要使用衬线字体——截图显示的是无衬线字体
  • 不要使用复杂的布局——截图显示的是干净、居中的单栏布局
  • 不要使用厚重的投影——截图显示的是扁平或柔和抬升的表面
  • 避免: 正式语言
  • 避免: 技术术语
  • 避免: 阴暗、沉闷的色调

10

包内真实截图

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

11

System Prompt

该系统是一个友好、趣味十足的倒计时应用落地页。它将自己定位为追踪生活中有意义事件的一种方式。关键十六进制颜色包括白色背景(#FFFFFF)、黑色文字(#000000)以及充满活力的渐变色,如红色(#FF3B30)、绿色(#34C759)、蓝色(#007AFF)和橙色。字体采用简洁的人文主义无衬线体。关键禁忌:不要使用深色模式或深色背景。不要在卡片或按钮上使用尖锐的角。不要使用柔和或低饱和度的颜色;拥抱高饱和度渐变。不要使用衬线字体。不要创建杂乱的布局;保持其宽敞和居中。不要使用厚重的投影。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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