OpenDesign·你的设计资产库

网页参考

Amie

一款友好、由 AI 驱动的效率应用，轻松管理你的日程与笔记。

CalendarConsumerFriendly
Amie 网站截图

01

设计气质 DNA

高效一体化简洁智能友好

一个干净、现代的工作空间，感觉像一位得力助手，而非复杂工具。

02

色彩

#11A8FFAccent
#000000Ink
#5C5C5CInk soft
#FFFFFFBG
#A0A0A0Muted
rgba(205, 205, 205, 1)Line

采用干净、高对比度的调色板，搭配单一鲜艳的蓝色作为强调色，确保可读性与专业且亲和的感受。

03

字体

humanist-sans

  • display40px · 700
  • heading20px · 600
  • body16px · 400
  • small14px · 400

04

间距

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

基于 4px 的系统，使用充裕的 padding（12px、20px、28px）营造通透、无杂乱感的氛围。

05

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

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

使用 rgba(205, 205, 205, 1) 的 1px 实线边框进行柔和分隔。

rgba(0, 0, 0, 0.06) 0px 0px 0px 1px · rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px · rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的宽容器，包含窄而易读的文本栏，以及侧重侧边栏的产品 UI 布局。

07

动效与交互

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

交互元素在 color、background-color 和 border-color 上使用平滑过渡效果。

背景色或文字颜色的细微变化，通常伴随指针光标。 · 标准的按钮按下行为。

08

组件

  • button 药丸形主按钮，采用鲜艳的蓝色背景和白色文字；次级按钮为白色，带细微边框。
  • card 干净的白色表面，带有细微阴影和圆角，常用于展示产品界面。
  • chip 在此视图中不显著。
  • input 在此视图中不显著。
  • hero 大胆、超大的标题，搭配一个高亮强调短语、两个主要操作按钮，以及一张大幅产品截图。

09

文案语气与禁用清单

  • 语气 友好、自信、直接，避免使用过于技术化的术语。
  • 标题风格 大胆直接，常使用高亮强调短语以吸引注意力。
  • 按钮文案 以行动为导向且具有邀请性，使用如“立即开始”这类清晰短语。
  • 不要使用深沉、阴郁的背景——截图显示以白色和通透背景为主。
  • 不要在标题中使用厚重、装饰性的衬线字体——截图显示的是干净的 humanist-sans 字体。
  • 不要使用多个相互竞争的鲜艳强调色——截图主要使用一种亮蓝色作为强调。
  • 不要为按钮使用尖锐、方形的角——截图显示的是大量圆角的药丸形按钮。
  • 不要使用粗重的边框来分隔版块——截图使用的是细微的浅灰色线条。
  • 不要用密集的文本块使界面拥挤——截图保持了充裕的留白和间距。
  • 不要使用沉闷、单色且无色彩变化的调色板——截图依赖于清晰的蓝色强调色。
  • 避免: 企业式的刻板感
  • 避免: 复杂的技术语言
  • 避免: 激进的销售话术

10

包内真实截图

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

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

11

System Prompt

这个网站是一款现代 SaaS 效率应用，设计干净、友好且亲和。主要品牌色是白色背景上鲜艳的蓝色（#11A8FF），搭配黑色和灰色文本。采用干净的 humanist-sans 字体（Inter）以实现高可读性。布局开阔，使用充裕的 padding 和宽容器营造通透感。关键交互使用平滑、细微的过渡效果。关键禁忌：不要使用深色背景，不要使用装饰性衬线字体，不要用复杂元素或多种亮色使界面拥挤。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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