← OpenDesign
精选 · 开放 · 免费
Character.AI
专注于角色对话的极简友好型 AI 平台,提供低门槛注册流程。
ai chat
01
设计气质 DNA
对话式 AI 角色 趣味性 易用性
简洁现代的聊天应用界面,优先保证简洁性和引导易用性。
02
色彩
#26272bInk
#585962Ink soft
#f4f4f5BG
#ffffffBG soft
#6b7280Muted
rgba(212, 212, 218, 1)Line
采用中性柔和的配色方案,核心操作使用高对比深色元素。
03
字体
geometric-sans · humanist-sans
display 36px · 700body 16px · 400标题采用紧凑负字间距以增强视觉冲击力。 · 正文保持标准行高以确保可读性。 · 严格限定字体粗细为 400、500、600 和 700。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用标准 4px 网格系统,内边距与间距保持统一。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 12px
lg · 30px
pill · 9999px
1px solid #d4d4da
rgba(0, 0, 0, 0.1) 0px 4px 6px -1px · rgba(0, 0, 0, 0.1) 0px 2px 4px -2px
06
布局
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
采用居中卡片布局,大型主视觉图像作为注册表单的背景。
07
动效与交互
220ms micro
400ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
所有交互元素采用微妙的 250ms 过渡动画。 · 背景图像实现平滑缩放或淡入淡出。 · 按钮与链接提供简洁的悬停状态效果。
主按钮悬停时呈现微妙的背景色变化或透明度调整。 · 通过轻微缩放或色彩变化提供即时反馈。
08
组件
button 大尺寸圆角按钮,采用高对比色彩(黑或白),文字居中。 card 带微阴影的浮动白色卡片,用于承载主要注册表单。 chip 简洁文本链接,悬停时显示下划线,用于页脚导航。 input 简洁输入框,采用圆角设计与微妙边框。 hero 分屏布局,包含大型动态插画背景与浮动白色转化卡片。
09
文案语气与禁用清单
语气 具有引导性、简洁且鼓励性。 标题风格 直接且强调效益,突出规模与速度。 按钮文案 清晰的动作导向型按钮(例如“注册聊天”、“通过 Google 继续”)。 避免使用复杂的多列网格——应采用简洁专注的单列或分屏布局。 避免使用过多颜色——应采用黑白为主的中性配色方案。 避免使用华丽装饰性字体——应采用简洁现代的无衬线字体。 避免使用深色厚重背景——应保持界面轻盈通透的视觉感受。 避免使用小而拥挤的按钮——应提供充足间距的大型触控友好按钮。 避免使用高饱和度的强调色——应保持界面色彩沉稳、单色系化。 避免: 技术术语 避免: 正式或过度商务化语言 避免: 冗长说明
10
包内真实截图
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 抓自真实页面 · 真 computed styles
11
System Prompt
Character.ai 是一个对话式 AI 平台,拥有简洁、现代且友好的用户界面。设计采用米白色(#f4f4f5)与深灰色(#26272b)构成中性高对比配色。字体系统使用简洁无衬线字体(人文主义与几何风格),标题采用紧凑字间距。关键限制:禁用复杂布局或网格,禁用高饱和度强调色,禁用装饰性或华丽字体。界面保持极简化,聚焦于用户引导的便捷性与交互的简洁直接性。
更多精选
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
为什么收录: 此网站是现代极简主义 AI 产品界面的典范,通过简洁友好的设计优化用户引导流程,值得作为优秀案例收录。