01
设计气质 DNA
AI想象力社区研究精美模型
一个融合代码与创意、用以生成视觉艺术的数字工作室。
02
色彩
#FFFFFFInk#63B3EDInk soft#06051DBG#061434BG soft#2E3038Mutedrgba(235, 248, 255, 0.1)Line以暗色模式为主,运用深海军蓝与炭灰色背景,以突显生成的图像内容。
03
字体
- display
30px · 500 - body
16px · 400
正文主要使用等宽字体。 · 标题采用简洁的无衬线字体。 · 基础字号为 16px。 · 字重以 400 为主,500 用于强调。
04
间距
4px8px12px16px20px24px32px48px64px遵循一致的 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)。按钮为胶囊形或微微圆角的矩形,带有暗色玻璃拟态背景。关键禁忌:避免使用衬线字体、避免使用明亮的霓虹强调色、避免使用亮色模式、避免使用复杂渐变、避免按钮使用尖锐直角、避免使用局促的间距。整体感觉是精致的、实验性的,既富有技术深度又平易近人。





