OpenDesign·你的设计资产库

网页参考

Nextjs

一个简洁的、面向开发者的会议着陆页,以白色背景上的粗体排版和鲜明的蓝色点缀为特色。

Developer ToolsBold TypographyCleanProductPremium

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

技术专业面向开发者会议现代

一份高端科技会议邀请函,具备干净、现代的美学。

02

色彩

#0070f3Accent
#000000Ink
#ffffffBG
#666666Muted
rgba(0, 0, 0, 0.1)Line

在干净的白色画布上,运用高对比度和单一的亮蓝色点缀。

03

字体

grotesque-sans · monospaced

  • display56px · 700
  • heading48px · 700
  • body16px · 400
  • caption14px · 400

04

间距

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

基于 4px 的统一垂直节奏。

05

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

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

1px solid rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

单栏居中布局,垂直层次分明。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互文本链接在 hover 时出现微妙的下划线或颜色变化。 · 标准的按钮点击反馈。

08

组件

  • button 极简的、基于文本的按钮,使用大写标签或简单的描边容器。
  • card 作为独立组件不明显。
  • chip 带有文本的微型描边药丸形元素(例如 'New')。
  • input 未出现。
  • hero 全宽 Hero 区域,包含大标题、等宽体正文以及图片拼贴。

09

文案语气与禁用清单

  • 语气 专业、清晰、以开发者为中心。
  • 标题风格 粗体、大写或大尺寸的无衬线字体。
  • 按钮文案 大写的等宽体文本,通常置于简洁的边框内。
  • 避免使用渐变——截图显示为纯色和锐利的几何形状。
  • 避免使用装饰性字体——截图仅使用了干净的 grotesque-sans 和等宽字体。
  • 避免到处使用圆角——截图使用的是直角或非常小的圆角半径。
  • 避免使用投影来营造层次感——截图依赖于扁平设计和留白。
  • 避免使用多种点缀色——截图仅使用单一的亮蓝色点缀。
  • 避免使用两端对齐的文本——截图使用的是左对齐或居中文本。
  • 避免: 俏皮的语言
  • 避免: 过度的装饰
  • 避免: 复杂的渐变

11

System Prompt

这是一个 Next.js 开发者会议的着陆页。设计干净、专业、面向开发者,采用纯白背景、黑色文字和单一的亮蓝色(#0070f3)点缀。排版使用粗体 grotesque-sans 作为展示字体,等宽字体用于正文/说明文字。关键禁止事项:绝不使用渐变,避免装饰性字体,保持直角。布局居中且宽敞,通过粗体排版和留白策略来强调内容层次。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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