OpenDesign·你的设计资产库

网页参考

Vimcal

专为会议繁忙者打造的世界最快日历。

ProductivitySaaS
Vimcal 网站截图

01

设计气质 DNA

速度效率掌控高端

如同高性能的调度驾驶舱

02

色彩

#E35294Accent
#FFFFFFInk
#98A2B3Ink soft
#040126BG
#0a0a0aBG soft
#B0B1B4Muted
rgba(255,255,255,0.1)Line

深色模式，采用高对比度白色文字与醒目的霓虹强调色

03

字体

geometric-sans · humanist-sans · monospaced

  • display56px · 500
  • heading24px · 500
  • body16px · 400
  • caption14px · 400

标题使用几何无衬线体 · 正文使用人文主义无衬线体 · 技术细节使用等宽字体

04

间距

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

基于8像素的网格系统

05

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

sm · 4px
md · 6px
lg · 16px
pill · 999px

1px solid rgba(255,255,255,0.1)

rgba(255, 255, 255, 0.1) 0px 2px 5px 0px inset · rgba(227, 82, 148, 0.8) -8px 0px 20px 0px inset · rgba(23, 144, 255, 0.8) 8px 0px 20px 0px inset

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

分屏式主视觉，左侧文字，右侧应用预览

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

淡入过渡 · 细微滑入效果

亮度轻微提升 · 即时响应（<100毫秒）

08

组件

  • button 白色胶囊形主按钮，黑色文字
  • card 深色玻璃拟态面板，带细微边框
  • chip 用于日历事件的小型圆角标签
  • input 深色背景输入框，带细微边框
  • hero 左侧大文字，右侧浮动应用界面

09

文案语气与禁用清单

  • 语气 自信且专业
  • 标题风格 直接并聚焦于益处
  • 按钮文案 清晰且低门槛
  • 勿使用浅色背景——截图所示为深色模式
  • 勿使用衬线字体——截图所示为无衬线体
  • 勿使用柔和色彩——截图所示为高对比度
  • 勿使用复杂布局——截图所示为简洁的分屏设计
  • 勿使用小号字体——截图所示为大号展示字体
  • 勿到处使用圆角——截图所示卡片采用直角边缘
  • 避免: 杂乱的布局
  • 避免: 复杂的术语
  • 避免: 缓慢的交互

10

包内真实截图

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

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

11

System Prompt

Vimcal是一款面向行政助理和繁忙专业人士的高端生产力工具。设计采用深色模式（#040126背景），搭配高对比度白色文字与鲜明的强调色，如粉色（#E35294）和蓝色（#1790FF）。字体方面，标题使用几何无衬线体，正文使用人文主义无衬线体。核心功能包括：1）分屏式主视觉布局，左侧文字右侧应用预览，2）深色玻璃拟态卡片配以细微边框，3）全面支持键盘快捷键，4）即时响应时间（<100毫秒）。关键禁忌：勿使用浅色模式，勿使用衬线字体，勿使用小号文字，勿使界面杂乱，勿使用缓慢过渡，勿使用复杂配色方案。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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