精选 · 开放 · 免费
Minymon
一个提供可爱、互动式吉祥物角色以提升网站参与度的趣味服务。
PlayfulConsumerFriendlyConsumerApp UI
01
设计气质 DNA
趣味性友好数字宠物品牌吉祥物对话式
您网站的数字宠物商店
02
色彩
#F16849Accent
#154C7EInk
#F9F2EABG
#474747Muted
rgba(21, 76, 126, 1)Line
温暖、平易近人,采用高对比度、友好的色彩组合。
03
字体
humanist-sans
- display
56px · 700 - h1
36px · 700 - body
18px · 400 - nav
13px · 500
导航链接使用大写字母和宽字距。 · 主标题文本使用紧凑的负字距。 · 行内使用表情符号以增强趣味语调。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
主要的内容块之间采用宽松的垂直内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 24px
pill · 999px
使用纯色主蓝色边框并搭配硬边投影。
4px 4px 0px 0px rgba(21, 76, 126, 1)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中单列布局,包含最大宽度容器和一个显眼的浮动吉祥物。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素使用平滑过渡效果。
光标悬停在交互元素上时变为指针。 · 标准的按钮按压行为。
08
组件
- button 带有硬边投影的实心边框;采用趣味的圆角设计。
- card 未明确定义;角色以简单的浮动行形式呈现。
- chip 未明确定义。
- input 未明确定义。
- hero 文本居中的主视觉区域,配有大型装饰性波浪分隔线。
09
文案语气与禁用清单
- 语气 友好、引人入胜且略带奇思妙想。
- 标题风格 直接且具对话感,使用表情符号。
- 按钮文案 以行动为导向且具有鼓励性。
- 不要使用单调的白色背景——截图显示的是温暖的米白色 (#F9F2EA)。
- 不要使用尖锐、机械的投影——截图显示的是趣味性的硬边投影。
- 不要使用高科技、深色UI——截图使用的是浅色、友好且平易近人的配色方案。
- 不要使用复杂的多栏网格——截图显示的是简洁的居中单列布局。
- 不要使用激进的霓虹色作为强调色——截图使用的是柔和、温暖的珊瑚/鲑鱼色 (#F16849)。
- 不要使用刻板、以衬线体为主的排版——截图使用的是圆角、人文主义无衬线字体。
- 避免: 企业术语
- 避免: 复杂的技术术语
- 避免: 激进的销售语言
- 避免: 正式或刻板的语气
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Minymon 是一个面向消费者的趣味服务,为网站提供可爱、互动式的数字吉祥物('minymons')。设计温暖且平易近人,采用米白色 (#F9F2EA) 背景、深海军蓝 (#154C7E) 文本和柔和珊瑚色 (#F16849) 点缀。字体为圆角人文主义无衬线字体,感觉友好且不正式。关键视觉元素包括趣味表情符号、硬边投影和装饰性波浪分隔线。关键禁忌:绝不使用单调的白色背景;绝不使用机械、柔和的投影;绝不使用深色或高科技配色方案。始终保持奇思妙想、引人入胜的语调。
en · zh-CN · zh-TW · ja · ko