OpenDesign·你的设计资产库

网页参考

Ujjo

采用大胆霓虹绿与深灰分裂背景及锐利字体排印点缀的高对比度编辑界面。

EditorialBold TypographyCleanConsumerRestraint

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

01

设计气质 DNA

大胆编辑风格极简高对比度

一本采用醒目分裂色调布局的精致数字杂志或编辑平台。

02

色彩

#3FD300Accent
#000000Ink
#212121BG
#303030BG soft
#1A1A1AMuted
rgba(0,0,0,1.0)Line

鲜明的霓虹绿与深灰之间形成极致对比，主文本使用黑色。

03

字体

transitional-serif · monospace

  • display32px · 900
  • heading24px · 700
  • body16px · 400

展示文本和正文均以衬线字体为主。 · 频繁使用粗重字重（700-900）进行强调和标题排版。

04

间距

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

基于4px的网格系统，标题元素周围留有充裕的内边距。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 0px

无可见圆角；所有表面元素均为锐利的矩形边缘。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

分裂背景布局（左侧霓虹绿，右侧深灰），叠加内容块。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

交互元素采用标准CSS过渡效果。

通过CSS过渡实现标准文本链接悬停效果。 · 交互元素使用默认指针光标。

08

组件

  • button 无显式按钮容器的标准文本链接，依赖默认样式。
  • card 作为纯色或文本平面区域呈现的内容块，无独立卡片边界。
  • hero 大型分裂色调背景区域，叠加用于主标题的文本块。

09

文案语气与禁用清单

  • 语气 权威、大胆且直接，适用于体育新闻。
  • 标题风格 大写或粗重衬线字体。
  • 按钮文案 标准内联文本链接。
  • 避免使用圆角——截图显示所有元素均为锐利矩形边缘。
  • 避免使用无衬线字体——截图显示所有文本使用衬线字体（如Times New Roman）。
  • 避免使用柔和粉彩色——截图显示高对比度的霓虹绿与深灰色。
  • 避免应用投影效果——截图显示完全扁平的二维表面样式。
  • 避免所有文本居中——截图显示左对齐的内容块。
  • 避免使用彩色按钮形状——截图显示简单的下划线文本链接。
  • 避免: 俏皮或圆润元素
  • 避免: 柔和或粉彩色调
  • 避免: 厚重的投影效果

10

包内真实截图

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

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

11

System Prompt

该网站采用大胆、高对比度的编辑布局，以霓虹绿（#3FD300）与深灰（#212121）的醒目分裂背景为特色。字体排印严格基于衬线字体（Times New Roman），并频繁使用粗重字重（700-900）进行强调。设计完全扁平，无圆角、投影或柔和渐变。关键十六进制颜色包括#3FD300、#000000和#212121。核心禁忌包括：永不使用圆角、永不使用无衬线字体、永不应用投影或柔和粉彩色调。布局依赖锐利的几何块和左对齐文本。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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