01
设计气质 DNA
交互引擎动画设计代码
一个打造跨平台交互动画的、流畅且专业的工作间。
02
色彩
#f1f1f1Ink#999999Ink soft#000000BG#121212BG soft#1d1d1dBG quiet#666666Mutedrgba(255,255,255,0.1)Line深色画布搭配高对比度白色文本和微妙的灰色点缀。
03
字体
- display
56px · 500 - h2
32px · 500 - body
16px · 400 - caption
12px · 400
展示标题使用大写字母和紧凑的字间距。 · 正文文本使用略微扩展的行高以提高可读性。 · 按钮文本使用大写字母和宽松的字间距。
04
间距
4px8px16px24px32px48px64px96px以标准 4px 为基础，一致地应用 8px 和 16px 的增量。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用低不透明白色的微妙 1px 实线边框。
rgba(0, 0, 0, 0) 0px 0px 0px 1px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽深色背景，居中的内容块和 12 列网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素的 hover transition。 · 章节之间平滑滚动。
按钮和链接上微妙的颜色或透明度变化。 · 按下时立即提供视觉反馈。
08
组件
- button 高对比度主按钮带金色描边，次要按钮带细微边框。
- card 深色卡片，带细微边框和圆角，用于展示视觉示例。
- chip 未显著呈现。
- input 未显著呈现。
- hero 大型居中排版，配有两个显眼的行动号召按钮。
09
文案语气与禁用清单
- 语气 专业、自信且富有创新精神。
- 标题风格 粗体、大写且具有权威性。
- 按钮文案 清晰、以行动为导向且突出。
- 不要使用浅色背景——截图显示的是深黑色画布。
- 不要使用圆润、俏皮的字体——截图显示的是锐利、几何感的 grotesque-sans。
- 不要使用彩色渐变作为主要元素——截图使用黑底上的高对比度白色。
- 不要使用小而微妙的按钮——截图显示的是大型、显眼的行动号召按钮。
- 不要为 hero 区域使用复杂的多列布局——截图采用居中、单列聚焦。
- 不要使用 drop shadow 来营造深度——截图依赖于边框和对比度。
- 避免: 过于随意或俏皮的语言。
- 避免: 杂乱的布局。
- 避免: 低对比度文本。
10
包内真实截图
11
System Prompt
该网站是一个用于创建交互动画的高端开发者工具，定位为面向主要品牌的'交互体验引擎'。其特色是流畅的深色模式美学，拥有纯黑色背景（#000000）、柔和的深色表面（#121212）和高对比度白色文本（#f1f1f1）。排版使用简洁、几何感的 grotesque-sans 作为展示字体，humanist-sans 作为正文字体，营造出专业且权威的感觉。布局居中且宽敞，强调大型标题和带有金色描边的显眼行动号召按钮。关键设计原则包括克制、清晰以及通过对比度实现的视觉冲击力。需要避免的关键点包括：避免浅色背景、俏皮的字体、杂乱的布局、微妙的按钮、复杂的多列 hero 区域以及依赖 drop shadow 来营造深度。