精选 · 开放 · 免费

Character.AI

专注于角色对话的极简友好型 AI 平台，提供低门槛注册流程。

aichat

↓ 下载设计系统包 (3 MB)在 OpenDesign 中打开

原站: https://character.ai

📦 浏览包内文件 →

设计气质 DNA

对话式 AI角色趣味性易用性

简洁现代的聊天应用界面，优先保证简洁性和引导易用性。

色彩

#26272bInk

#585962Ink soft

#f4f4f5BG

#ffffffBG soft

#6b7280Muted

rgba(212, 212, 218, 1)Line

采用中性柔和的配色方案，核心操作使用高对比深色元素。

字体

geometric-sans · humanist-sans

display36px · 700
body16px · 400

标题采用紧凑负字间距以增强视觉冲击力。 · 正文保持标准行高以确保可读性。 · 严格限定字体粗细为 400、500、600 和 700。

间距

4px

8px

16px

24px

32px

48px

64px

96px

采用标准 4px 网格系统，内边距与间距保持统一。

表面 (圆角 / 阴影 / 边线)

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

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

采用居中卡片布局，大型主视觉图像作为注册表单的背景。

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

所有交互元素采用微妙的 250ms 过渡动画。 · 背景图像实现平滑缩放或淡入淡出。 · 按钮与链接提供简洁的悬停状态效果。

主按钮悬停时呈现微妙的背景色变化或透明度调整。 · 通过轻微缩放或色彩变化提供即时反馈。

组件

button 大尺寸圆角按钮，采用高对比色彩（黑或白），文字居中。
card 带微阴影的浮动白色卡片，用于承载主要注册表单。
chip 简洁文本链接，悬停时显示下划线，用于页脚导航。
input 简洁输入框，采用圆角设计与微妙边框。
hero 分屏布局，包含大型动态插画背景与浮动白色转化卡片。

文案语气与禁用清单

语气具有引导性、简洁且鼓励性。
标题风格 直接且强调效益，突出规模与速度。
按钮文案 清晰的动作导向型按钮（例如“注册聊天”、“通过 Google 继续”）。

避免使用复杂的多列网格——应采用简洁专注的单列或分屏布局。
避免使用过多颜色——应采用黑白为主的中性配色方案。
避免使用华丽装饰性字体——应采用简洁现代的无衬线字体。
避免使用深色厚重背景——应保持界面轻盈通透的视觉感受。
避免使用小而拥挤的按钮——应提供充足间距的大型触控友好按钮。
避免使用高饱和度的强调色——应保持界面色彩沉稳、单色系化。
避免: 技术术语
避免: 正式或过度商务化语言
避免: 冗长说明

包内真实截图

Character.AI — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

抓自真实页面 · 真 computed styles

System Prompt

Character.ai 是一个对话式 AI 平台，拥有简洁、现代且友好的用户界面。设计采用米白色(#f4f4f5)与深灰色(#26272b)构成中性高对比配色。字体系统使用简洁无衬线字体（人文主义与几何风格），标题采用紧凑字间距。关键限制：禁用复杂布局或网格，禁用高饱和度强调色，禁用装饰性或华丽字体。界面保持极简化，聚焦于用户引导的便捷性与交互的简洁直接性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko