OpenDesign·你的设计资产库

网页参考

Pietrastudio

为快速增长品牌打造的私有AI大脑

SaaSAIProductPremiumClean
Pietrastudio 网站截图

01

设计气质 DNA

AICommerceOperationsUnifiedBrand

为现代电商品牌打造的先进操作系统

02

色彩

#FF5C3CAccent
#000000Ink
#6B6B6BInk soft
#FFFFFFBG
#F9F2F1BG soft
#C4C4C4Muted
rgba(0,0,0,0.88)Line

高对比度的极简主义,搭配单一的活力强调色

03

字体

geometric-sans

  • display56px · 700
  • body16px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Pietra Studio是一个高端的AI驱动SaaS平台,专注于电商运营。其设计DNA以干净、以白色为主的调色板和充满活力的珊瑚橙色(#FF5C3C)为特征。字体排印采用几何无衬线字体类别,营造现代、专业的感受。布局宽敞,采用居中1280px容器和充足的留白。关键的避免事项包括:避免复杂的渐变、衬线字体、厚重的投影和拥挤的布局。系统强调高对比度、自信的沟通,采用大胆的标题和清晰的价值主张。色彩使用克制,强调色仅保留用于主要操作,多彩渐变则谨慎地用于主标题部分关键词的强调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。