01
设计气质 DNA
俏皮易用创意DIY网站构建器
数字剪贴簿与无代码网站构建器的结合
02
色彩
#6B4CFFAccent#1A1A1AInk#FFFFFFBG#999999Mutedrgba(0,0,0,0.1)Line在纯净白色画布上运用高对比度的俏皮强调色
03
字体
- display
64px · 900 - heading
32px · 700 - body
18px · 400 - button
16px · 700
使用过渡衬线字体表现大型、富有表现力的展示文字 · 使用人文主义无衬线字体作为所有正文和 UI 元素 · 按钮使用大写、无衬线字体
04
间距
4px8px16px24px32px48px64px96px主内容流采用一致的 8px 垂直节奏
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
按钮或卡片无可见边框
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
左侧边栏导航，搭配居中的单栏主内容区域
07
动效与交互
200msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
按钮背景颜色微妙变化 · 按钮按下时立即改变状态
08
组件
- button 全宽圆角按钮，采用纯色背景和大写文字
- card 拼贴风格、剪贴簿式卡片，融合多种排版和图像
- hero 居中文本主区域，包含大型衬线标题和两个堆叠的全宽 CTA 按钮
09
文案语气与禁用清单
- 语气 友好、随性且富有鼓励性
- 标题风格 直接、简洁且富有表现力
- 按钮文案 面向行动且清晰明确
- 避免使用企业化、冷感的调色板——截图显示的是俏皮的高饱和度强调色
- 避免用于内容的高度结构化网格——截图显示的是松弛的拼贴式布局
- 避免使用单一的单色配色方案——截图显示多种明亮、独特的强调色
- 避免主按钮使用尖锐的方形圆角——截图显示的是圆润的药丸形按钮
- 避免使用过于正式、僵硬的文案——截图使用像 'dead simple' 这样随意、对话式的语言
- 避免主内容区域使用深色背景——截图显示的是明亮的白色画布
- 避免: 企业术语
- 避免: 复杂术语
- 避免: rigid 布局
11
System Prompt
这是一个面向消费者的俏皮网站构建器平台，用于个人表达。它使用纯净的白色背景搭配大胆的高饱和度强调色，如紫色 (#6B4CFF) 和绿色 (#5EEEA2)。排版融合了富有表现力的过渡衬线字体（用于标题）和人文主义无衬线字体（用于正文）。布局居中且为单栏，强调松弛的拼贴感而非 rigid 网格。避免企业化美学、过度结构化的布局或僵硬、正式的文案。语气友好且鼓励，邀请用户创建 'dead simple' 网站。关键禁忌包括：避免单色方案、避免主按钮使用尖锐圆角、避免复杂术语，以及避免主界面使用深色模式。