OpenDesign·你的设计资产库

网页参考

Getcoco

一个活泼、注重实用性的SaaS着陆页,运用大胆的排版和鲜艳的点缀色来营销一款社交销售应用。

SaaSApp UIBold TypographyCleanMobile UI

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

01

设计气质 DNA

社交销售Instagram增长商业

一个为现代社交创业者打造的、充满活力且易于上手的工具包。

02

色彩

#23C4F7Accent
#000000Ink
rgba(0,0,0,0.6)Ink soft
#FFFFFFBG
#F7F7F7BG soft
#808080Muted
rgba(0,0,0,0.1)Line

以高对比度的中性色为基底,搭配单一、充满活力的电光蓝作为主要操作的强调色。

03

字体

geometric-sans · monospace

  • display64px · 700
  • h232px · 700
  • body14px · 500

所有文本使用几何无衬线体 (GT America)。 · 标题使用粗体 (700),正文使用中等字重 (500)。

04

间距

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

使用一致的24px、40px和48px内边距来分隔内容块。

05

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

sm · 3px
md · 16px
lg · 24px
pill · 100px

为输入框等交互元素使用1px实线边框,颜色为 rgba(0,0,0,0.1)。

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 0px 0px 1px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准的居中容器布局,拥有充足的垂直间距。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing

悬停时按钮拥有平滑的背景色过渡。

按钮和交互元素平滑地改变背景颜色。 · 交互元素立即提供视觉反馈,鼠标光标变为指针。

08

组件

  • button 主要CTA是一个药丸形按钮,采用鲜艳的蓝色背景和白色文字。次要CTA是纯文本链接。
  • card 卡片使用非常大的圆角 (24px-32px) 和极简的边框。
  • chip 应用UI中的状态指示器使用药丸形背景和鲜艳的颜色。
  • input 输入框具有微妙的内阴影和圆角。
  • hero 一个居中、醒目的标题,后跟一个大型视频/媒体容器和描述性文字。

09

文案语气与禁用清单

  • 语气 自信、赋能,略带俏皮。
  • 标题风格 简短、有力、以益处为导向,使用大而醒目的几何字体。
  • 按钮文案 直接、以行动为导向,使用亮色吸引注意力。
  • 不要使用小而紧凑的字体——截图显示的是大而醒目的几何字体。
  • 不要使用柔和、朴素的配色——截图显示的是明亮、高对比度的配色,带有鲜艳的点缀色。
  • 不要使用尖锐的拐角——截图显示的是高度圆润、药丸状的形状。
  • 不要使用纤细、轻盈的字重——截图显示的是中等至粗的字重,以保证清晰度。
  • 不要使用深色模式——截图显示的是以白色为背景、深色文字为主的设计。
  • 不要使用复杂、拥挤的布局——截图显示的是一个干净、宽敞的单栏布局。
  • 避免: 过于正式或企业化的行话。
  • 避免: 被动语态。
  • 避免: 复杂的句子结构。

10

包内真实截图

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

11

System Prompt

这是一个名为Coco的社交销售应用的SaaS着陆页。它拥有干净的白色背景和醒目、几何感强的无衬线字体 (GT America)。关键十六进制色值包括背景色#FFFFFF、主文字色#000000,以及用于主要CTA和点缀的鲜艳电光蓝 (#23C4F7)。布局宽敞,内边距充足 (24px-48px)。关键禁忌:不要使用小字体,不要使用尖锐的拐角,不要使用深色配色方案。设计风格活泼、注重实用性,且高对比度。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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