OpenDesign·你的设计资产库

网页参考

Midjourney

一个由社区资助的研究实验室,专注于构建精美的 AI 模型。

AIDarkGallery
Midjourney 网站截图

01

设计气质 DNA

AI想象力社区研究精美模型

一个融合代码与创意、用以生成视觉艺术的数字工作室。

02

色彩

#FFFFFFInk
#63B3EDInk soft
#06051DBG
#061434BG soft
#2E3038Muted
rgba(235, 248, 255, 0.1)Line

以暗色模式为主,运用深海军蓝与炭灰色背景,以突显生成的图像内容。

03

字体

grotesque-sans · monospace

  • display30px · 500
  • body16px · 400

正文主要使用等宽字体。 · 标题采用简洁的无衬线字体。 · 基础字号为 16px。 · 字重以 400 为主,500 用于强调。

04

间距

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

遵循一致的 8px 基础间距节奏,章节内边距较为充裕(64px)。

05

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

sm · 8px
md · 8px
lg · 8px
pill · 9999px

1px solid rgba(235, 248, 255, 0.1)

0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 2px 4px -2px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

内容居中并限制宽度,是典型的等宽文本编辑式布局。

07

动效与交互

150msmicro
220mssmall
400msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

交互元素上的颜色与背景色平滑过渡。 · hover 时透明度的微妙变化。

按钮在 hover 时出现细微的透明度与背景色变化。 · 通过标准浏览器过渡提供即时的视觉反馈。

08

组件

  • button 呈胶囊形或矩形,带有微妙的暗色玻璃拟态背景和等宽字体标签。
  • card 基于网格的图片卡片,具有统一的宽高比和细微的深色边框。
  • chip 圆角的胶囊形元素,常用于次要操作。
  • input 虽未明确展示,但很可能遵循暗色玻璃拟态美学。
  • hero 全幅氛围感主视觉区域,以巨大的 ASCII 艺术 Logo 为特色。

09

文案语气与禁用清单

  • 语气 沉思的、富有远见的、以社区为导向的。
  • 标题风格 加粗、简洁的无衬线字体,常辅以图标。
  • 按钮文案 胶囊形按钮上的清晰等宽文本。
  • 不要使用高色度的强调色——截图显示主要是单色暗色调色板。
  • 不要在正文使用衬线字体——截图显示的是等宽文本。
  • 不要使用亮色模式背景——截图显示的是深海军蓝(#06051D)。
  • 不要使用复杂的多色渐变——截图显示的是微妙的深蓝色渐变。
  • 不要使用小而局促的间距——截图显示的是充裕的内边距(64px)。
  • 不要在按钮上使用尖锐的方形直角——截图显示的是胶囊形(9999px)或 8px 圆角。
  • 避免: 避免使用明亮、高饱和度的霓虹色。
  • 避免: 避免在 UI 中使用复杂的渐变。
  • 避免: 避免在正文使用衬线字体。
  • 避免: 避免使用过重的投影。
  • 避免: 避免使用小而局促的布局。
  • 避免: 避免使用过于活泼或圆角化的 UI 元素。

10

包内真实截图

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

11

System Prompt

这是一个专注于社区与想象力的 AI 研究实验室网站,采用暗色模式。布局为编辑式,正文使用等宽字体,标题使用简洁的无衬线字体。关键色彩包括深海军蓝背景(#06051D)、白色墨迹(#FFFFFF)和柔和的蓝色点缀(#63B3ED)。按钮为胶囊形或微微圆角的矩形,带有暗色玻璃拟态背景。关键禁忌:避免使用衬线字体、避免使用明亮的霓虹强调色、避免使用亮色模式、避免使用复杂渐变、避免按钮使用尖锐直角、避免使用局促的间距。整体感觉是精致的、实验性的,既富有技术深度又平易近人。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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