OpenDesign·你的设计资产库

网页参考

Starface

一个高能量、充满玩趣的护肤电商体验,将产品视为有趣的收藏品。

Beauty
Starface 网站截图

01

设计气质 DNA

趣味年轻大胆欢乐护肤

一本喧闹、充满活力的青少年杂志,遇上一家波普艺术风格的糖果店。

02

色彩

#FF00D3Accent
#000000Ink
#FDFF00BG
rgba(0,0,0,0.2)Line

使用标志性的电光黄、鲜亮的洋红色和明绿色,在纯黑边框的衬托下进行高饱和度色块拼接。

03

字体

geometric-sans · monospace

  • display40px · 700
  • body16px · 400

文本始终使用小写字母。 · 几乎所有功能性和描述性文本都使用等宽字体。 · 有力、粗壮、圆角的无衬线字体用于引人注目的标题。

04

间距

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

卡片内部保持一致的内边距 (25px),即使卡片尺寸各异,也维持着统一的节奏感。

05

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

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

每处元素都由粗壮的 2px 黑色边框或纯黑色结构性间隙定义,并分隔色彩块。

无

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

一个刚性、满版出血的纯色块网格,由粗黑线分隔。

07

动效与交互

150msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

产品图像在 hover 时进行微妙缩放。 · 通过 opacity 淡入实现平滑过渡。

交互元素在 hover 时进行微妙的 transform 缩放或 opacity 变化。 · 即时、干脆的反馈,无明显延迟。

08

组件

  • button 黑色边框,透明背景配文字,或纯黑色背景。
  • card 鲜亮、纯色的圆角矩形 (24px),带有粗边框,图像和文字区域分明。
  • chip 药丸形或小矩形的彩色编码标签,用于分类。
  • input 符合粗轮廓美学的标准带边框输入框。
  • hero 大型、多彩、以图像为主的区块,主导视窗。

09

文案语气与禁用清单

  • 语气 极其随意、友好,略带一点混乱感,使用网络俚语和表情符号。
  • 标题风格 简短、有力、小写、充满热情。
  • 按钮文案 直接、小写、以行动为导向。
  • 不要使用衬线字体——截图显示仅使用等宽和几何圆角无衬线字体。
  • 不要使用大写文本——截图显示文本全部为小写。
  • 不要使用细微的灰色边框——截图显示粗壮、纯黑的结构性线条。
  • 不要使用复杂的阴影——截图显示无深度效果的纯色块。
  • 不要使用柔和或粉彩色调——截图显示高饱和度、霓虹感的主色调。
  • 不要使用密集的文本块——截图显示简短、有力、易于扫读的文案。
  • 避免: 正式语言
  • 避免: 大写文本
  • 避免: 衬线字体
  • 避免: 柔和色彩
  • 避免: 复杂句式

10

包内真实截图

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

11

System Prompt

这是一个为Z世代护肤品牌设计的、充满玩趣和高能量的DTC电商网站。它使用了以标志性的电光黄 (#FDFF00)、大胆的洋红色 (#FF00D3) 和纯黑 (#000000) 为核心的鲜艳、高对比度配色方案。字体结合了用于有力标题的粗体、几何圆角无衬线字体,以及用于所有描述性正文文本的简洁等宽字体,且始终以小写呈现。布局是一个刚性的纯色块网格,由粗黑线或间隙分隔,营造出大胆、图形化的美学。关键禁忌:绝不使用衬线字体,绝不使用大写文本,绝不使用细微的灰色边框或柔和的投影;品牌依赖粗黑轮廓和纯色来定义所有结构。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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