OpenDesign·你的设计资产库

网页参考

Jones Road

一个高端、极简的美容品牌,专注于毫不费力、肤感优先的彩妆必需品,具有干净、编辑式的美学风格。

Beauty
Jones Road 网站截图

01

设计气质 DNA

毫不费力百搭肤感优先现代奢华

一个高端、极简美容必需品的精选画廊。

02

色彩

#FF2E92Accent
#000000Ink
#333333Ink soft
#FFFFFFBG
#F5F2ECBG soft
#E0DED8BG quiet
#898989Muted
rgba(0,0,0,0.1)Line

以高对比度单色为基底,搭配单一、醒目的洋红色点缀,用于交互高亮与徽章。

03

字体

transitional-serif · grotesque-sans · monospaced-sans

  • display48px · 400
  • body16px · 400
  • label14px · 700

使用过渡衬线体用于优雅、高对比度的标题。 · 使用干净的 grotesque-sans 用于正文文本和主要界面元素。 · 使用加粗、宽体的 grotesque-sans 用于品牌标识和强行动号召。 · 对标签和按钮应用大写与宽字间距。

04

间距

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

充裕的 padding 和留白营造出高端、通透的布局。

05

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

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

极简风格,使用细 1px 实线黑色或洋红色线条进行分隔与高亮。

rgba(0,0,0,0.25) 0px 5.78px 5.78px 0px

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉区,内容居中,过渡到结构化的多栏产品网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.39, 0.575, 0.565, 1)easing

内容加载时平滑的淡入过渡。 · 基于透明度的交互元素 hover 状态。

按钮和链接上微妙的透明度降低或颜色变化。 · 通过颜色变化或微妙的缩放提供即时视觉反馈。

08

组件

  • button 黑色背景配白色大写文本,直角边框,宽字间距。洋红色变体用于次要操作。
  • card 干净的白色背景配最小化边框,聚焦于高质量的产品摄影。
  • chip 大写文本标签配细底边框,激活状态切换为洋红色。
  • input 简单的线条式输入框配黑色边框,保持极简美学。
  • hero 大尺寸摄影主视觉区,配衬线标题、无衬线描述和一个醒目的黑色 CTA 按钮。

09

文案语气与禁用清单

  • 语气 自信、精致、直接。
  • 标题风格 优雅的衬线标题,强调简约与品质。
  • 按钮文案 加粗、大写、行动导向,宽字间距。
  • 不要在主要按钮上使用圆角——截图显示为直角矩形按钮形状。
  • 不要给产品卡片添加阴影——截图显示为平面、无边框的卡片。
  • 不要使用多种强调色——截图仅显示单一的洋红色点缀。
  • 不要使用手写或花体字体——截图仅显示衬线体和无衬线体类别。
  • 不要使用沉重的背景图案——截图显示为干净的白色或米白色背景。
  • 不要使用狭小、拥挤的间距——截图显示为充裕的 padding 和留白。
  • 避免: 杂乱的布局
  • 避免: 过度装饰的元素
  • 避免: 霓虹或高饱和度的配色方案

10

包内真实截图

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

11

System Prompt

此设计用于一个定位为“毫不费力、百搭、肤感优先”的高端、极简美容品牌。配色严格为单色(黑色 #000000 搭配白色 #FFFFFF),点缀以单一、醒目的洋红色 (#FF2E92)。排版将优雅的过渡衬线体用于标题,搭配干净的 grotesque-sans 用于正文。避免为按钮添加圆角,使用多种强调色,或给产品卡片添加阴影。布局优先考虑充裕的留白和高质量的摄影,而非复杂的装饰元素。对导航和交互元素使用大写、宽间距的标签,以维持精致、编辑式的感受。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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