精选 · 开放 · 免费
Beau To
Beau 通过为每一次文档交互引入智能自动化,重新定义了面向客户的工作流程。
SaaSProductivityAICleanTooling
01
设计气质 DNA
自动化文档数据验证效率
一个智能的文档处理引擎,自动化数据提取与验证。
02
色彩
#FF8308Accent
#000000Ink
#FFFFFFBG
#F6F4F1BG quiet
rgba(0,0,0,0.1)Line
高对比度黑白确保清晰度,充满活力的渐变点缀增添动态能量。
03
字体
humanist-sans · monospace
- display
56px · 500 - display-sm
40px · 500 - heading
28px · 500 - body
17px · 400 - caption
14px · 400
04
间距
4px
8px
12px
16px
18px
24px
48px
72px
96px
基于4px网格,配以充足留白以强调清晰度。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 12px
lg · 24px
pill · 200px
用于分隔的1px实线细边框。
0px 2px 6px 0px rgba(0, 0, 0, 0.06)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的核心区域,随后是交替的分割布局和三栏特性网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
在悬停和状态变化时平滑的透明度过渡。
光标变为指针,伴有微妙的颜色或透明度变化。 · 即时的视觉反馈。
08
组件
- button 胶囊形主按钮,高对比度黑底白字。
- card 带有微妙边框和柔和阴影的卡片,常包含数据验证示例。
- chip 状态指示器,使用彩色文本(绿色代表有效,橙色代表警告,红色代表无效)。
- input 用于数据输入的简洁文本输入框。
- hero 居中的大型标题,配有辅助副标题和展示数据验证的复杂UI示意图。
09
文案语气与禁用清单
- 语气 专业、高效、自信。
- 标题风格 直接且突出价值,常使用大号、加粗的字体。
- 按钮文案 清晰且导向行动,例如'请求演示'。
- 不要使用多种主色调——截图显示仅使用单一渐变强调流程各步骤
- 不要使用复杂的装饰性背景——截图显示背景主要为干净的白色,带有极少噪点
- 不要使用居中对齐的正文——截图显示描述文本为左对齐以提升可读性
- 不要对所有元素使用圆角——截图显示部分UI示意图使用直角,按钮使用圆角
- 不要使用厚重的投影——截图显示非常微妙、近乎扁平的阴影
- 不要对代码使用无衬线字体——截图显示文档数据提取部分使用等宽字体
- 避免: 浮夸言辞
- 避免: 行话术语
- 避免: 被动语态
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Beau 是一个文档自动化SaaS平台,以简洁、高对比度的美学为特征。关键十六进制颜色为#FFFFFF、#000000,以及充满活力的橙红色渐变(#FF8308)。字体为现代人文主义无衬线字体(Geist),大标题字母间距紧凑。关键设计约束:保持极致的清晰度和留白,避免视觉杂乱,优先使用专注于数据的UI示意图,并使用一致的、充满活力的渐变作为唯一的主强调色。布局应保持宽敞且居中,以强调专业效率和可信度。
en · zh-CN · zh-TW · ja · ko