OpenDesign·你的设计资产库

网页参考

Fly By Jing

采用大胆、表现力强且毫不掩饰的辛辣品牌设计的优质四川主食调料。

FoodDtc
Fly By Jing 网站截图

01

设计气质 DNA

辛辣大胆四川风味现代传承

一个充满活力、大胆的街头美食摊位,通过优质包装和现代DTC品牌设计得到提升。

02

色彩

#FFCD35Accent
#FFFFFFInk
#E52228BG
#F2F2F2Muted
rgba(0,0,0,1)Line

高饱和度、以香辣为灵感的色彩方案,使用鲜艳的红色、黄色和大胆的黑色来传达风味与活力。

03

字体

grotesque-sans · transitional-serif

  • display88px · 700
  • heading44px · 700
  • body22px · 400

所有主要导航和操作标签使用大写 · 在红色背景上使用高对比度的白色文字 · 保持紧凑、粗犷的字体层级

04

间距

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

版块间使用充裕的垂直内边距(44px),让大字体和摄影图片得以呼吸。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

rgb(204, 204, 204) 0px 0px 2px 2px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉版块,采用居中字体或图文并列布局,在移动端转换为堆叠列。

07

动效与交互

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上平滑的颜色和背景色过渡 · 悬停/点击时细微的缩放和变换效果

按钮和链接上的颜色变化或细微背景偏移。 · 通过细微变换或状态变化提供即时视觉反馈。

08

组件

  • button 粗犷、大写的文字标签,通常采用药丸形(大圆角)或矩形背景,配以高对比度色彩。
  • card 简洁的容器,带有充裕的内部内边距,常用于展示食物摄影。
  • chip 不适用
  • input 带有细微边框的简洁文本输入框。
  • hero 沉浸式、全出血的背景色或大型产品摄影,配以巨大、粗犷、居中或左对齐的大标题。

09

文案语气与禁用清单

  • 语气 自信、大胆、富有表现力且略带俏皮。
  • 标题风格 简短、有力、祈使句式、视觉化。
  • 按钮文案 直接、以行动为导向,始终大写。
  • 不要为标题使用细体或浅色字重——截图显示所有主标题都使用了粗体、700字重的 grotesque-sans。
  • 不要使用小巧、低调的字体——截图显示了巨大、紧凑的展示型字体(88px+)。
  • 不要依赖中性、单色的调色板——截图以高饱和度的红色(#E52228)和黄色(#FFCD35)为主导。
  • 不要为展示使用优雅、高对比度的衬线字体——截图中的标题使用了粗体 grotesque-sans。
  • 不要对导航使用标准大小写——截图显示菜单项和分类链接均为全大写文本。
  • 不要使用细的 1px 边框作为主要分隔手段——截图依靠大块鲜明的色彩。
  • 避免: 微妙或柔和的语言
  • 避免: 小巧、精致的字体
  • 避免: 低调的调色板
  • 避免: 复杂、多词的大标题
  • 避免: 用于展示的草书或优雅的衬线字体
  • 避免: 没有大胆色彩的大片留白

10

包内真实截图

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

11

System Prompt

Fly By Jing 是一个高端的、直接面向消费者的四川辣椒脆和主食调料品牌。其设计DNA以毫不掩饰的大胆、高饱和度色彩为核心,围绕鲜艳的辣红色(#E52228)和醒目、高可见度的黄色(#FFCD35)构建。字体方面,粗壮的 grotesque-sans 用于巨大的展示标题,搭配稳重的过渡衬线体用于正文。布局沉浸式,包含全出血色块和大型产品摄影。关键限制:绝不要为标题使用细体或浅色字重;避免小巧、低调的字体;不要使用柔和或单色的调色板。品牌语调自信、直接、富有表现力,主要操作和导航始终使用大写。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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