OpenDesign·你的设计资产库

网页参考

Akiflow

一款统一的任务与日历应用,运用AI助您节省时间。

ProductCalendar
Akiflow 网站截图

01

设计气质 DNA

效率AI日历任务效能

一款智能、简洁的数字规划工具,将您的日程安排和待办事项整合到一个AI驱动的视图中。

02

色彩

#8B00FFAccent
#212833Ink
#323B4AInk soft
#FFFFFFBG
#F8FAFCBG soft
#EEF3F8BG quiet
#5E687BMuted
rgba(0, 0, 0, 0.08)Line

以干净的白色画布为基础,点缀以高对比度、高饱和度的紫色,用于主要操作和高亮显示,且使用克制。

03

字体

geometric-sans · humanist-sans

  • display64px · 500
  • display-sm48px · 500
  • body18px · 400

使用几何无衬线体作为醒目的展示标题。 · 使用人文无衬线体作为清晰、易读的正文文本。 · 大标题保持紧凑的字间距。

04

间距

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

主要元素周围留有充足的空白,营造专注、整洁的感觉。

05

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

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

使用极低透明度黑色的1px实线边框,营造微妙的边界感。

0px 1px 20px rgba(0, 0, 0, 0.08) · 0px 1px 6px rgba(0, 0, 0, 0.16) · 0px 1px 16px rgba(144, 0, 255, 0.2)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

首页采用居中单栏布局,功能网格区域则过渡为多栏布局。

07

动效与交互

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

内容块在滚动时轻微淡入。 · 按钮和链接在悬停时平滑过渡。

按钮亮度略微增加或显示细微的紫色光晕阴影。 · 主按钮有轻微的缩放效果。

08

组件

  • button 药丸形主按钮,采用纯紫色背景和白色文字,悬停时带有细微光晕效果。
  • card 简洁的白色卡片,带有非常细微的阴影和较大的圆角,常用于展示产品界面。
  • chip 用于标签或标记的小型圆角矩形徽章。
  • input 简洁、无边框或带细微边框的输入框,采用浅灰色背景。
  • hero 一个居中的巨大标题,下方是副标题、主CTA按钮和一张大型产品截图。

09

文案语气与禁用清单

  • 语气 自信、直接,以效率为导向。
  • 标题风格 简短、有力、以利益点驱动的陈述。
  • 按钮文案 行动导向且清晰,例如“免费试用”。
  • 不要使用深色模式——截图显示背景以白色为主。
  • 不要使用衬线字体——截图显示的是简洁的几何与人文无衬线字体。
  • 不要使用过于复杂的渐变——截图显示的是纯色以及在特定区域使用非常细微、几乎难以察觉的渐变。
  • 不要使用狭小、拥挤的布局——截图显示的是充足的间距和大而醒目的字体。
  • 不要使用冲突的颜色——截图显示的是由白色、深灰色和单一紫色点缀构成的严谨配色方案。
  • 不要使用生硬的直角——截图显示按钮、卡片和UI元素都一致使用了圆角。
  • 避免: 过于技术化的术语
  • 避免: 模糊的营销辞令
  • 避免: 被动语态

10

包内真实截图

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

11

System Prompt

Akiflow是一款用于任务和日历的效率SaaS应用,由AI驱动。设计简洁专业,使用白色背景(#FFFFFF)搭配深墨色(#212833)文字。主要点缀色是高饱和度的紫色(#8B00FF)。字体是几何与人文无衬线的混合体。关键禁忌:避免深色模式,不使用衬线字体,避免布局拥挤且带有生硬的直角。整体感觉是高效、现代且专注的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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