OpenDesign·你的设计资产库

网页参考

Ilovecreatives

一个时尚的编辑平台,作为创意专业人士的数字职业学校和社区。

EditorialPortfolioTypographyProductClean
Ilovecreatives 网站截图

01

设计气质 DNA

创意教育社区斜杠青年职业学校

一个现代、时尚的社区中心和数字职业学校,服务于拥有多元热情的创意人士。

02

色彩

#489442Accent
#222222Ink
#FFFFFFBG
#757575Muted
rgba(34,34,34,0.2)Line

高对比度单色基底,搭配单一的柔和绿色用于促销横幅。

03

字体

transitional-serif · humanist-sans · geometric-sans

  • display56px · 400
  • heading30px · 400
  • body18px · 100
  • caption13px · 100

展示字体采用高对比度的过渡衬线体,字距紧密。 · 正文采用轻量级人文无衬线体。 · 按钮使用胶囊形状,大写或首字母大写样式。

04

间距

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

一致的4px基础网格,大型容器区块内使用充足内边距。

05

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

sm · 4px
md · 8px
lg · 20px
pill · 450px

1px solid #222222

rgba(121,121,121,0.17) 2px 2px 20px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血主图区块过渡到结构化的多栏网格,用于产品和社区列表。

07

动效与交互

100msmicro
170mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

按钮和链接悬停时的微妙透明度和颜色过渡。 · 标准交互元素上快速的0.1秒线性过渡。

按钮背景填充为实心色或文字颜色反转。 · 通过状态变化或链接导航提供即时反馈。

08

组件

  • button 胶囊形状,1px solid边框,透明背景,悬停时变为实心。
  • card 纯白卡片,圆角(20px),带浅色阴影,用于产品和职位列表。
  • chip 小型圆角胶囊标签,用于分类(如实体商品、服装)。
  • input 极简文本输入框,带微妙底部边框或胶囊形状。
  • hero 全出血摄影背景,搭配巨大、重叠的衬线字体和浮动文字元素。

09

文案语气与禁用清单

  • 语气 有趣、友好且以社区为中心。
  • 标题风格 对话式、略带不羁且直接。
  • 按钮文案 清晰、行动导向,且常采用胶囊形状。
  • 不要使用厚重的投影——截图显示为最小、柔和的阴影,如rgba(121,121,121,0.17) 2px 2px 20px 0px。
  • 不要使用明亮、饱和的强调色——截图显示仅在特定横幅使用柔和、大地色系的绿色(#489442)。
  • 不要为正文使用粗体字重——截图显示标准文本一致使用font-weight: 100。
  • 不要为卡片或按钮使用尖锐、方形的角——截图显示一致使用胶囊形状(radius: 450px)和大圆角(radius: 20px)。
  • 不要为背景使用复杂渐变——截图显示为纯白背景和摄影主图叠加。
  • 不要使用宽松、分散的行高——截图显示为紧凑、控制的行高(1.2至1.4),以营造密集的编辑感。
  • 避免: 正式的企业行话
  • 避免: 没有视觉分隔的大段连续文本
  • 避免: 冰冷或纯交易性的语言

10

包内真实截图

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

11

System Prompt

该网站是一个创意社区平台和数字职业学校,服务于‘斜杠青年’(拥有多元热情的创意人士)。视觉形象建立在以#222222墨色搭配#FFFFFF背景的干净单色基底上,并以柔和的#489442绿色专用于促销横幅进行点缀。排版依赖粗体、高对比度的过渡衬线体用于巨大的展示标题,以及轻量级人文无衬线体(Suisse Regular,字重100)用于正文,营造出精致的编辑感。关键禁忌:避免使用饱和或霓虹色,切勿为正文使用粗体字重,主要按钮和标签始终使用圆角胶囊形状。布局将全出血摄影主图区块与结构化的、基于卡片的网格相结合,用于产品和社区列表,所有元素均采用紧密的字母间距和充足的内边距。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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