OpenDesign·你的设计资产库

网页参考

It's Nice That

通过视觉资讯与策展项目推动全球创意的领先在线出版物及社区平台。

EditorialDesign

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

01

设计气质 DNA

创意灵感设计资讯社区策展

如同将充满活力的创意总监情绪板化为每日数字出版物。

02

色彩

#6219FFAccent
#2B2B2BInk
#676767Ink soft
#FFFFFFBG
#F4F4F4BG soft
#FFEDD1BG quiet
rgba(43,43,43,1.0)Line

高对比度黑白基底，搭配鲜明紫色强调色及用于内容策展的暖调柔和色块。

03

字体

transitional-serif · humanist-sans

  • display48px · 500
  • h232px · 400
  • body17px · 400
  • caption11px · 400

大标题与展示性文字使用过渡衬线字体以体现权威感。 · 所有正文及功能界面元素使用人文无衬线字体以确保高可读性。 · 大号展示字体采用紧凑字距（-1px）以呈现现代编辑风格。 · 正文采用充裕行高（约1.5倍）以确保舒适阅读体验。

04

间距

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

采用8px基线网格实现统一的垂直节奏与组件间距。

05

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

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

使用深墨色（#2B2B2B）的1px细实线边框进行结构分隔，保持极简。

0px 24px 38px 0px rgba(0, 0, 0, 0.08) · 0px 9px 46px 0px rgba(0, 0, 0, 0.08) · 0px 11px 15px 0px rgba(0, 0, 0, 0.08)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

经典编辑杂志布局，包含简洁顶部导航、横向信息流及基于网格的多样化内容区块。

07

动效与交互

100msmicro
300mssmall
2000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

背景元素与UI状态采用细腻透明度过渡。 · 交互元素的背景色与文字色快速切换。

链接与按钮在0.1秒内进行细腻的背景色与文字色过渡。 · 通过快速背景色更新提供即时视觉反馈。

08

组件

  • button 采用实色强调（紫色）或轮廓样式的药丸形按钮，常配右向箭头图标。
  • card 简洁矩形卡片，采用全出血图像或图形搭配衬线标题与无衬线元数据。
  • chip 实色紫底白字的药丸形标签，用于内容分类。
  • input 集成于浮动底部导航栏的圆角搜索输入框。
  • hero 醒目的头部区域，包含加粗居中衬线标志及副标题，位于横向滚动信息流上方。

09

文案语气与禁用清单

  • 语气 鼓舞人心、富有支持性，且深谙创意过程。
  • 标题风格 引人入胜，常以对话式或启发性的提问/陈述呈现，采用加粗过渡衬线字体。
  • 按钮文案 直接且以行动为导向，常使用简单箭头图标表示前进动势。
  • 勿使用深色模式界面——截图显示以白色与浅暖色为主背景。
  • 勿使用纯几何无衬线字体作标题——截图显示展示性文字采用过渡衬线字体。
  • 勿使用复杂多层投影——截图显示投影效果极为细腻柔和。
  • 勿使用完全相同的方形卡片网格——截图显示采用混合长宽比的多样化布局与横向信息流。
  • 勿使用单一整体背景色——截图显示采用白色、浅灰与暖桃色的多色调处理。
  • 勿随处使用霓虹或过饱和强调色——截图将高饱和色彩限定于特定紫色强调色。
  • 避免: 企业套话
  • 避免: 过于学术化的正式语言
  • 避免: 激进的销售导向文案

10

包内真实截图

It's Nice That — 桌面首屏（hero）
桌面首屏（hero）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 移动首屏
移动首屏

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

11

System Prompt

设计一个灵感源自'It's Nice That'的简洁编辑风格网站，定位为面向创意社区的高端数字出版物。基底采用白色（#FFFFFF），搭配浅灰（#F4F4F4）与暖桃色（#FFEDD1）背景。主色为深灰（#2B2B2B），鲜明紫色（#6219FF）作为唯一高饱和度强调色。标题使用过渡衬线字体，正文使用人文无衬线字体。布局采用杂志风格，允许多样化图像长宽比与横向滚动信息流。关键禁忌：切勿使用深色模式基底，切勿用几何无衬线字体作展示性文字，切勿使用刺眼饱和的背景色。保持交互快速（0.1秒过渡），注重充足留白与清晰的字体层次。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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