01
设计气质 DNA
趣味异想天开动画插画风格有趣
一本从页面上跳下来开始跳舞的速写本。
02
色彩
#000000Ink#FFC900BG#7A7A7AMutedrgba(0,0,0,1.0)Line高饱和度、温暖的黄色背景，搭配锐利的黑色字体，以实现最大冲击力和趣味能量。
03
字体
- display
123px · 500 - h1
34px · 400 - body
26px · 400 - small
9px · 400
所有文本使用几何无衬线字体 · 标题文本保持紧凑的行高
04
间距
4px8px16px24px32px48px64px96px灵活的间距，关键交互元素采用宽松的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 17px
md · 17px
lg · 429px
pill · 429px
1px solid black
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽主画布，带有散布的绝对定位图形元素。
07
动效与交互
450msmicro
450mssmall
600msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
浮动元素的平滑弹性过渡 · 变换和透明度渐变
交互元素上平滑的变换和过渡。 · 标准交互反馈。
08
组件
- button 圆角药丸状按钮，带黑色边框和 24px 内边距。
- card 圆角容器，尽管主要视觉是散布的浮动元素。
- hero 巨大的 123px 标题，与纯黄色背景上的抽象动画形状重叠。
09
文案语气与禁用清单
- 语气 趣味、非正式且自信。
- 标题风格 粗体、小写或大小写混合，并且极具表现力。
- 按钮文案 简单、有吸引力且圆润。
- 不要使用白色背景——截图显示的是占主导地位的黄色
- 不要使用衬线字体——截图显示的是几何无衬线文本
- 不要做得极简——截图显示的是一个布满零散、彩色形状的画布
- 不要使用柔和的淡色——截图显示的是饱和的黄色、橙色和粉色点缀
- 不要使用尖锐的角落——截图显示的是圆角和药丸状元素
- 不要使用僵化的对齐——截图显示的是零散、重叠的图形元素
- 避免: 企业化语言
- 避免: 僵化的网格
- 避免: 单调的颜色
10
包内真实截图
11
System Prompt
这是一个为插画师和动画师准备的趣味性、富有表现力的作品集。它被定位为一个有趣、创意且平易近人的工作室。主色调是温暖的黄色 (#FFC900) 搭配实心黑色 (#000000) 文字。字体采用几何无衬线字体类别，大号展示文本最大 123px，小号 UI 文本为 9px。关键禁忌：切勿使用白色或深色背景，切勿使用僵化的网格结构，切勿使用衬线字体，切勿以生硬或过于企业化的方式呈现元素。布局是全视口画布，带有零散、重叠的彩色图形元素。