精选 · 开放 · 免费
Mrmarcelschool
为消费类网站设计的俏皮插图风格403禁止访问错误页面。
ConsumerCleanMobile UI
01
设计气质 DNA
访问被拒绝错误安全俏皮极简
站在数字锁门前友好但坚定的保安
02
色彩
#000000Ink
#B0E0E9BG
#226D7AMuted
rgba(34, 109, 122, 1)Line
采用以柔和天蓝为主导的单色浅色调色板，搭配深色高对比文字以获得最佳可读性。
03
字体
humanist-sans
- display
36px · 700 - body
16px · 400
所有标题与正文均使用简洁的无衬线字体
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用4px基础单位，搭配充裕内边距，确保元素间有清晰的空间分隔。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用1px深蓝绿色实线勾勒插图轮廓。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单一居中垂直列布局，顶部为大型插图图形，下方为文本区块。
07
动效与交互
0msmicro
0mssmall
0msmedium
lineareasing
08
组件
- hero 一幅大型居中的矢量插图，描绘带锁的电脑显示器，周围环绕漂浮的几何图形与云朵状底座。
09
文案语气与禁用清单
- 语气 直接且信息明确，通过俏皮视觉风格柔化语气。
- 标题风格 清晰、醒目且加粗的错误代码与状态陈述。
- 避免使用复杂或多栏布局——截图显示的是简单的居中垂直堆叠
- 避免使用深色背景——截图显示的是浅色天蓝背景
- 避免用攻击性红色表示错误——截图使用平静、无威胁感的配色
- 避免使用厚重、写实的图像——截图采用简洁的扁平矢量插图
- 避免使用复杂字体组合与多种字重——截图使用有限、简洁的无衬线字体系统
- 避免添加复杂导航或页脚——截图仅展示核心错误内容与装饰元素
- 避免: 使用过于技术化的术语
- 避免: 制造恐慌感
- 避免: 使用具有攻击性的红色表示错误状态
11
System Prompt
此设计系统适用于极简插图风格错误页面。采用浅色天蓝色(#B0E0E9)背景、黑色(#000000)文字与深蓝绿色(#226D7A)插图点缀。字体使用简洁的人文主义无衬线体（如Open Sans或Roboto），标题36px，正文16px。布局为简单居中列式，配以大型俏皮矢量图形。关键禁忌：勿用深色背景；勿用红色表示错误；勿用复杂多栏布局；勿用写实摄影；字体尺寸不超过两种；勿包含不必要的导航元素。
把这份品味接进你的 Agent
把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。
OpenDesign 技能 ↗en · zh-CN · zh-TW · ja · ko