OpenDesign·你的设计资产库

网页参考

Topicals

一个大胆、具有编辑风格的护肤品牌,运用超大字体排版和高对比度摄影来传达科学依据、包容性的配方理念。

BeautySkincare

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

01

设计气质 DNA

护肤科学依据包容性大胆编辑风格

一个大胆、现代的护肤品牌,融合了临床功效与俏皮、包容的高级时装编辑美学。

02

色彩

#FF454EAccent
#FFFFFFInk
#131212BG
#F6F6F6BG soft
#818181Muted
rgba(19, 18, 18, 1)Line

以深炭灰和纯净白为基础的高对比度色彩体系,搭配鲜明的珊瑚红色点缀,提供充满活力的视觉焦点。

03

字体

geometric-sans · humanist-sans

  • display120px · 700
  • heading42px · 500
  • body14px · 400
  • label12px · 500

超大展示文本和主标题使用几何无衬线字体。 · 正文和界面元素使用人文主义无衬线字体,以保持可读性。 · 大型展示文本采用紧凑的字间距,打造紧凑、有力的视觉效果。 · 正文尺寸保持在 14px 或以上,确保易读性。

04

间距

4px
8px
10px
12px
16px
20px
24px
30px
48px
64px

结合了基于 4px 的紧凑界面元素间距与编辑版块的宽松留白。

05

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

sm · 2px
md · 4px
lg · 8px
pill · 999px

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全出血主视觉区域以超大排版品牌标识和大型产品照片为主导,随后是双栏编辑版块。

07

动效与交互

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

内容元素的淡入动画。 · 交互元素的平滑颜色过渡。 · 文本和背景颜色变化的线性过渡。

按钮和链接等交互元素通过平滑的 0.2s 线性过渡改变背景或文本颜色。 · 背景或边框颜色的细微变化表示激活状态。

08

组件

  • button 按钮设计简洁,采用 2px 圆角、14px 无衬线文字,背景透明,悬停时填充为纯色。
  • card 内容卡片依赖高品质摄影和宽松留白,而非传统的卡片边框或阴影。
  • chip 小型、大写标签,采用 1px 边框和圆角,用于标签和次要信息。
  • input 输入框使用简洁的 1px 边框和 2px 圆角,保持干净、实用的外观。
  • hero 全视口主视觉区域,采用超大排版品牌标识,中央放置产品照片,背景为深色。

09

文案语气与禁用清单

  • 语气 自信、包容、基于科学,带有一丝俏皮。
  • 标题风格 大胆、超大、直接,通常使用单个词语或简短有力的短语。
  • 按钮文案 简洁、以行动为导向,使用干净的无衬线字体和透明按钮样式。
  • 不要使用装饰性或花体字体——截图显示一致使用干净的几何和人文主义无衬线字体。
  • 不要为 Hero 区域使用浅色或多彩背景——截图显示为深炭灰背景搭配白色文字。
  • 不要在卡片上使用过多阴影或边框——截图显示为干净的、以摄影为主导的布局,没有厚重的容器。
  • 不要使用多彩色板——截图显示为聚焦于黑色、白色和单一鲜艳珊瑚色的色彩体系。
  • 不要在按钮或输入框上使用大圆角——截图显示为 2px 圆角,呈现更利落、更精致的视觉效果。
  • 不要使用小型、拥挤的布局——截图显示为超大字体排版和宽松留白,以营造编辑感。
  • 避免: 避免使用过于技术化的术语、过度装饰的元素或冰冷、无菌的美学。

10

包内真实截图

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

11

System Prompt

这是一个高端护肤品牌网站,运用大胆、超大的字体排版和高对比度摄影来营造现代、编辑的感觉。主要颜色是深炭灰 (#131212) 和纯净白 (#FFFFFF),搭配鲜明的珊瑚红 (#FF454E) 用于关键 CTA 和交互元素。字体排版结合了用于展示的几何无衬线字体和用于正文的人文主义无衬线字体,大标题采用非常紧凑的字间距。关键设计规则包括:绝不使用装饰性或花体字体;避免在主视觉区域使用浅色背景;所有组件使用 2px 圆角;保持高对比度、以摄影为主导的布局,并带有宽松留白。语调自信、包容且基于科学。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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