OpenDesign·你的设计资产库

网页参考

Eye on Design

一个编辑设计博客，以独特的粉绿配色方案呈现精选文章。

EditorialDesign
Eye on Design 网站截图

01

设计气质 DNA

设计出版策展视觉文化

一本高端数字设计杂志，拥有简洁的编辑式布局。

02

色彩

#FF8C8CAccent
#000000Ink
#524B48Ink soft
#FFFFFFBG
#ECE2E2BG quiet
rgba(0,0,0,1.0)Line

以洁净的白色画布为基础，突出粉色强调色，搭配高对比度的黑色字体。

03

字体

grotesque-sans · humanist-sans

  • display44px · 700
  • body16px · 400

标题使用粗体 grotesque-sans · 正文使用简洁的 humanist-sans · 标签采用大写字母并增加字间距

04

间距

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

保持一致的垂直韵律，各区块间留有充足间距。

05

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

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

特色元素使用 2px 实线黑色边框，其余元素尽量简化。

06

布局

1280container
3columns
24pxgutter
768 / 1024breakpoints

文章卡片采用三列网格，主要内容区域为单列布局。

07

动效与交互

150msmicro
300mssmall
300msmedium
ease-in-outeasing

交互元素采用平滑过渡效果

链接与按钮的颜色过渡。 · 即时响应。

08

组件

  • button 简洁的文本链接或小号大写标签。
  • card 包含图片、分类标签、标题和简短摘要。
  • chip 粉色的大写分类标签。
  • input 搜索功能集成于导航栏中。
  • hero 采用粗体标题和图片的大型特色文章展示区。

09

文案语气与禁用清单

  • 语气 专业、权威，同时平易近人且引人入胜。
  • 标题风格 直接、信息明确且有力。
  • 按钮文案 低调且功能性强。
  • 避免使用拥挤的布局——截图显示元素间留有充足、洁净的间距
  • 避免使用装饰性字体——截图显示使用了简洁、功能性的 grotesque 与 humanist 无衬线字体
  • 避免使用深色背景——截图显示以白色背景为主
  • 避免使用微妙的渐变——截图显示采用纯色色块（如粉色强调色）
  • 避免使用低对比度文本——截图显示在白色背景上使用高对比度的黑色文本
  • 避免隐藏导航——截图显示导航元素持久且清晰
  • 避免: 过于随意的语言
  • 避免: 分散内容注意力的装饰性元素
  • 避免: 拥挤的布局

10

包内真实截图

Eye on Design — 桌面首屏（hero）
桌面首屏（hero）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Eye on Design — 移动首屏
移动首屏

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

11

System Prompt

这是一个编辑设计出版网站。采用简洁的三列网格布局，留有充足间距，并使用高对比度排版。主色调为鲜亮的粉色（#FF8C8C），用于强调和分类标签，搭配黑色（#000000）标题和白色（#FFFFFF）背景。字体依赖于 grotesque-sans 和 humanist-sans 类别。关键设计约束：避免拥挤的布局、装饰性字体和低对比度文本。保持专业、权威的语调，同时确保视觉呈现简洁并聚焦于内容。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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