精选 · 开放 · 免费
Writer
一个企业级 AI 平台,通过自主代理实现品牌一致性执行的规模化。
aisaas
01
设计气质 DNA
企业级 AI可扩展性信赖感专业性
一个用于 AI 驱动内容与工作流执行的企业级指挥中心。
02
色彩
#5551FFAccent
#000000Ink
#2D2D2DInk soft
#FFFFFFBG
#E4E9FFBG soft
#F3F3F3BG quiet
#BDBDBDMuted
rgba(0,0,0,0.1)Line
以高对比度单色为核心,搭配单一高饱和度亮紫色作为主要行动号召(CTA)和强调色。
03
字体
transitional-serif · geometric-sans · monospaced
- display
64px · 400 - body
16px · 400
标题使用过渡衬线字体,体现权威与优雅。 · 正文和 UI 使用简洁的几何无衬线字体,确保高可读性。 · 标签和导航广泛使用大写加字距调整,以增加结构感。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 8px 的基准网格,搭配充足的垂直留白,以维持高端、整洁的视觉感受。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 12px
lg · 12px
pill · 999px
使用细微的 1px 边框来定义输入框和卡片边缘,而不增加视觉噪点。
rgb(243, 243, 243) 0px 2px 4px 0px · rgba(191, 203, 255, 0.25) 0px 1px 8px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
内容部分采用居中单栏布局,功能展示部分采用双栏布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素上平滑的颜色和背景过渡。 · hover 状态下细微的缩放和透明度变化。
文本链接的颜色过渡,按钮的背景变化。 · 主要操作按钮上细微的缩放效果。
08
组件
- button 胶囊形主按钮,采用高对比度填充;文本型次级按钮。
- card 简洁的圆角卡片,带有细微阴影,常用于展示 UI 功能。
- chip 小型大写徽章,用于分类和状态指示。
- input 圆角胶囊形输入框,带有细微边框和清晰的占位符文本。
- hero 大型衬线标题搭配一个高饱和度的强调词和一个显眼的演示申请表单。
09
文案语气与禁用清单
- 语气 权威、专业且直接。
- 标题风格 大型、有冲击力的衬线文本,通过单个高亮单词引导焦点。
- 按钮文案 以行动为导向且清晰,强调直接价值或试用。
- 不要使用暗色模式 — 设计严格遵循高对比度亮色背景范式。
- 不要为标题使用高度圆润的无衬线字体 — 截图中明确使用的是过渡衬线字体。
- 不要移除标签的大写和字距调整 — 导航和标签严重依赖 `text-transform: uppercase`。
- 不要使用柔和的粉彩背景 — 色板严格保持单色,仅有一个鲜艳的强调色。
- 不要使用厚重的投影 — 设计依赖细微的 box-shadow 来营造极简的深度感。
- 不要混入次级强调色 — 亮紫色(#5551FF)是唯一使用的高饱和度颜色。
- 避免: 随意俚语
- 避免: 过于复杂的术语
- 避免: 杂乱或嘈杂的布局
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端的 B2B SaaS 企业级 AI 平台。其设计基因以鲜明的高对比度单色核心(#FFFFFF 和 #000000)和单一高饱和度亮紫色(#5551FF)为特征。字体结合了用于展示的权威过渡衬线字体和用于正文及 UI 的简洁几何无衬线字体。关键约束包括:绝不引入次级高饱和度颜色,保持充足的留白,并确保所有标签使用大写字距调整。避免使用暗色模式以及过度装饰或俏皮的元素。始终优先考虑清晰度和专业克制。
en · zh-CN · zh-TW · ja · ko