精选 · 开放 · 免费
Pietrastudio
为快速增长品牌打造的私有AI大脑
SaaSAIProductPremiumClean
01
设计气质 DNA
AICommerceOperationsUnifiedBrand
为现代电商品牌打造的先进操作系统
02
色彩
#FF5C3CAccent
#000000Ink
#6B6B6BInk soft
#FFFFFFBG
#F9F2F1BG soft
#C4C4C4Muted
rgba(0,0,0,0.88)Line
高对比度的极简主义,搭配单一的活力强调色
03
字体
geometric-sans
- display
56px · 700 - body
16px · 400
所有文字层级使用几何无衬线字体 · 大型展示字体使用紧凑的字间距 · 在标题和正文之间保持较高的字重对比
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
基于一致的4px基准,并采用标准增量
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 12px
lg · 16px
pill · 999px
使用近黑色rgba值的微妙1px边框
rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容布局,搭配充足的留白和清晰的垂直韵律
07
动效与交互
220msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover时的平滑颜色过渡 · 交互元素的微妙背景变化
按钮和链接的颜色或背景发生微妙变化 · 通过颜色变化或缩放提供即时反馈
08
组件
- button 实心橙色主按钮配白色文字;次级按钮为描边或纯文本样式
- card 干净的卡片,带有微妙的阴影和12px圆角
- chip 橙色的药丸形标签,配白色文字
- input 简洁的极简输入框,带有微妙的边框
- hero 居中的大型字体排印,关键词带有多彩渐变效果
09
文案语气与禁用清单
- 语气 自信、专业、赋能
- 标题风格 大胆、简洁的陈述,突出核心价值主张
- 按钮文案 以行动为导向,强调收益(例如:免费开始使用)
- 不要使用复杂的渐变——截图中仅显示纯色橙色按钮和微妙的多彩文字效果
- 不要使用衬线字体——截图中全部使用几何无衬线字体
- 不要使用厚重的投影——截图中显示的是柔和、极简的box-shadow
- 不要使用拥挤的布局——截图中显示的是充足的留白和清晰的层次结构
- 不要使用多种相互竞争的强调色——截图使用橙色作为主强调色,多彩渐变仅作为特定效果
- 不要以深色背景为主——截图显示以白色背景为主,仅有一个柔和的粉色区域
- 避免: 充满术语或过于技术性的语言
- 避免: 被动或犹豫的措辞
- 避免: 杂乱或喧闹的布局
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Pietra Studio是一个高端的AI驱动SaaS平台,专注于电商运营。其设计DNA以干净、以白色为主的调色板和充满活力的珊瑚橙色(#FF5C3C)为特征。字体排印采用几何无衬线字体类别,营造现代、专业的感受。布局宽敞,采用居中1280px容器和充足的留白。关键的避免事项包括:避免复杂的渐变、衬线字体、厚重的投影和拥挤的布局。系统强调高对比度、自信的沟通,采用大胆的标题和清晰的价值主张。色彩使用克制,强调色仅保留用于主要操作,多彩渐变则谨慎地用于主标题部分关键词的强调。
en · zh-CN · zh-TW · ja · ko