OpenDesign·你的设计资产库

网页参考

Isla Beauty

一个提供浓缩、高效美容产品的高端护肤品牌,具有极简、现代的美学风格。

ConsumerRefinementProductPhotographicBold Typography

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

01

设计气质 DNA

高端护肤极简美学高效护肤流程

一个结合了纯净美学与科学功效的奢华护肤品牌。

02

色彩

#E4263DAccent
#1A1A1AInk
#6F6F6FInk soft
#FDF9F4BG
#F2DBC8BG soft
#8A8580Muted
rgba(0,0,0,0.1)Line

一套温暖而精致的调色板,以奶油色的灰白和炭灰色为主导,点缀着一个充满活力的、引人注目的红色强调色。

03

字体

transitional-serif · humanist-sans

  • display64px · 400

使用 transitional-serif 字体用于醒目、富有表现力的展示标题。 · 使用 humanist-sans 字体用于清晰、易读的正文和导航。 · 保持展示文本紧凑的字间距,以营造精致感。

04

间距

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

一个一致的 4px 网格提供了结构,而在推广区域则采用宽松的间距,以维持高端、整洁的感觉。

05

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

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

rgba(0, 0, 0, 0.06) 0px 2px 8px 0px · rgba(0, 0, 0, 0.1) 0px 5px 10px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一个干净、居中的布局,配有持久的顶部导航栏和大型、沉浸式的摄影区域。

07

动效与交互

250msmicro
400mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

模态覆盖层的平滑淡入过渡。 · 交互元素上微妙的 hover 过渡。 · 用于移动推广横幅的变换效果。

交互元素上微妙的颜色或透明度变化,以提供清晰反馈。 · 即时的视觉响应,通常伴随着向新状态或模态框的过渡。

08

组件

  • button 极简按钮,带有微妙的边框或实心填充,通常使用大写文本和胶囊形或略带圆角的形状。
  • card 干净的产品展示,依赖于高品质摄影和充足的留白。
  • chip 用于过滤或问卷选项的简单文本选择标签。
  • input 干净、不引人注目的输入框,边框极少。
  • hero 一个全宽、沉浸式的摄影主视觉区域,上方叠加了大型、富有表现力的排版。

09

文案语气与禁用清单

  • 语气 自信、极简且注重功效。
  • 标题风格 富有表现力且常带对话感,使用衬线与无衬线字体的混合来强调。
  • 按钮文案 直接且以行动为导向,按钮中通常使用大写文本。
  • 不要使用复杂的渐变——截图显示的是纯色、干净的背景色。
  • 不要使用深色模式——该网站整体使用浅色、奶油色的配色方案。
  • 不要在展示文字中使用 playful 或圆润的无衬线字体——截图使用 transitional-serif 字体来呈现富有表现力的标题。
  • 不要在组件上使用厚重的投影——截图显示了用于提升层次感的非常微妙、柔和的阴影。
  • 不要使用明亮的霓虹色或原色——截图在柔和、温暖的调色板上使用了一个特定的、鲜艳的红色强调色。
  • 不要使用多栏文本块——截图使用了充足的留白和居中的单栏布局以提升可读性。
  • 避免: 杂乱或繁忙的布局
  • 避免: 刺眼或霓虹色
  • 避免: 过于复杂的排版

10

包内真实截图

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

11

System Prompt

这是一个高端、极简的护肤品电商网站。它的设计 DNA 由温暖的奶油灰白色背景(#FDF9F4)与鲜明的红色强调色(#E4263D)和炭墨色(#1A1A1A)对比定义。排版将富有表现力的 transitional-serif 标题与干净的 humanist-sans 正文混合使用。布局干净宽敞,运用高品质摄影营造沉浸、高端的感觉。关键禁忌:不要使用深色模式,不要使用霓虹色,也不要用复杂的渐变或厚重的阴影使界面变得杂乱。保持精致、自信且注重功效的语调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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