01
设计气质 DNA
3D视觉叙事交互式网络体验创意工作室
一个用于打造沉浸式3D叙事的数字熔炉。
02
色彩
#1A2FFBAccent#000000Ink#2B2E3AInk soft#F0F1FABG#E4E6EFBG softrgba(0, 0, 0, 0.1)Line高对比度画布，单色形态中突出一抹电蓝色点缀。
03
字体
- display
144px · 500 - heading1
43px · 400 - body
16px · 400 - caption
14px · 400
大型展示文本使用紧凑的负字间距 · 所有字体保持简洁、几何美感 · 长篇内容优先使用左对齐文本以提高可读性
04
间距
4px8px16px24px32px48px64px96px垂直和水平节奏采用统一的8px基础增量。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 15px
pill · 100px
除非卡片需要微妙的盒子阴影，否则不使用可见边框。
0px 2px 4px rgba(0, 0, 0, 0.04) · 0px 6px 10px rgba(0, 0, 0, 0.04)
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
以大型3D视觉主区域为主导的流畅响应式布局。
07
动效与交互
300msmicro
400mssmall
600msmedium
cubic-bezier(0.35, 0, 0, 1)easing
悬停时平滑的变换动画 · 界面元素微妙的透明度过渡 · 主区域中3D物体的持续运动
交互元素上的缩放和颜色过渡。 · 通过微妙的变换偏移提供即时视觉反馈。
08
组件
- button 深色背景、浅色文字的药丸形按钮，采用圆角设计。
- card 用于展示3D项目缩略图的大型圆角容器。
- chip 用于导航或类别的简洁大写文本标签。
- input 采用圆角和微妙边框的极简输入框。
- hero 以3D视觉和大尺寸字体为主导的全宽区域。
09
文案语气与禁用清单
- 语气 自信、专业且富有创新精神。
- 标题风格 强调视觉冲击力和叙事性的粗体简洁陈述。
- 按钮文案 直接且行动导向，常使用大写文本。
- 不要使用多种强调色——设计稿显示由单一电蓝色（#1A2FFB）主导。
- 不要使用装饰性或衬线字体——设计稿显示为简洁的几何无衬线字体（Aeonik）。
- 不要使用繁复的背景或复杂图案——设计稿显示为纯色、浅灰白色背景（#F0F1FA）。
- 不要使用直角——设计稿显示所有容器和按钮均为圆角（15px-100px）。
- 不要使用纤细、精致的字体——设计稿显示标题使用厚重、几何感强的字重。
- 不要使用明亮、饱和的背景——设计稿显示为柔和、低饱和度的配色方案，仅有一个跳跃色彩。
- 避免: 堆砌术语的描述
- 避免: 被动语态
- 避免: 杂乱的布局
10
包内真实截图
11
System Prompt
定位：专注于为高端品牌打造3D视觉叙事和交互式网络体验的高端创意工作室。关键颜色：浅灰白色背景（#F0F1FA）、深黑墨色（#000000）以及单一的鲜艳电蓝色点缀（#1A2FFB）。字体类别：用于展示和正文的几何无衬线字体（Aeonik），以及用于技术细节的等宽字体选项。关键禁忌：1. 不要使用多种强调色——设计依赖单一、强烈的蓝色。2. 不要使用衬线或装饰性字体——保持简洁、现代的几何美感。3. 不要使用直角——设计统一使用大圆角（15px+）。4. 不要用不必要的元素使界面杂乱——优先展示3D视觉和大尺寸字体。5. 不要使用低对比度颜色——确保浅色背景上的黑色文字具有高可读性。