OpenDesign·你的设计资产库

网页参考

Mistral

一个高端的 B2B AI 平台，采用克制、编辑式的设计，并搭配独特的品牌图案，以展现技术权威性。

AIProductCleanPremiumEditorial
Mistral 网站截图

01

设计气质 DNA

AI 基础设施企业级开发者平台前沿

一个干净、高端的工坊，用于构建 AI 的未来。

02

色彩

#000000Ink
#FAFAF8BG
#92928AMuted
rgba(0,0,0,0.1)Line

高对比度的中性背景，通过主图案提供所有视觉能量。

03

字体

humanist-sans · monospace

  • display56px · 500
  • headline44px · 500
  • subhead32px · 400
  • body16px · 400
  • caption11px · 500

主要的英雄语句使用展示字体。 · 技术标签和说明文字使用大写字母和等宽字体。 · 大型标题保持紧凑的负字间距。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

基于 4px 的严格网格，配合充足的留白，营造编辑感。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

仅用于卡片和按钮边缘的 1px 细实线边框。

0px 1px 2px rgba(21, 21, 31, 0.02) · 0px 2px 4px rgba(21, 21, 31, 0.02) · 0px 4px 8px rgba(21, 21, 31, 0.02)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称分割的英雄区（左对齐文字，右对齐图像），过渡到全宽的内容块。

07

动效与交互

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

悬停时平滑的颜色和背景过渡。 · 交互元素上的细微缩放或变换效果。

细微的背景颜色变化或细微的轮廓添加。 · 通过标准的 CSS transition 时间提供即时反馈。

08

组件

  • button 两种不同样式：用于次级操作的描边‘幽灵’按钮，和用于主要行动号召的纯黑色‘胶囊’按钮。
  • card 带有 1px 边框和微小圆角（8px-12px）的干净白色容器。
  • chip 使用 11px 等宽字体的小型大写标签，用于分类。
  • input 采用细边框的极简样式，注重高可读性。
  • hero 大号字体搭配粗犷、块状的几何图案或界面原型。

09

文案语气与禁用清单

  • 语气 权威、直接且高度自信。
  • 标题风格 简短、有力、以行动为导向的短语（例如：'前沿 AI，尽在掌握。'）。
  • 按钮文案 清晰且目标驱动（例如：'开始构建'，'探索 Forge'）。
  • 不要使用活泼或圆润的字体——截图显示的是结构化的几何人文无衬线字体。
  • 不要使用厚重的阴影——截图显示的是非常细微、功能性的高度效果。
  • 不要使用多色板——截图显示的是依赖特定橙红色图案的中性界面。
  • 不要将主要标题居中对齐——截图显示文本块采用强烈的左对齐。
  • 不要使用过度装饰性的边框——截图显示的是严格 1px 的功能性边框。
  • 不要为主界面使用深色模式——截图显示的是浅色、米白色的编辑式背景。
  • 避免: 堆砌术语的营销话术
  • 避免: 过多的感叹号
  • 避免: 模糊的承诺

10

包内真实截图

Mistral — 桌面首屏（hero）
桌面首屏（hero）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Mistral — 移动首屏
移动首屏

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

11

System Prompt

这是一个高端的、面向开发者的 B2B AI 平台网站。它采用干净的编辑式布局，搭配高对比度的中性色板（#FAFAF8，#000000，#92928A）。字体是结构化的人文无衬线体（类似 Inter），并搭配富有表现力的块状图案来体现品牌活力。关键禁忌：不要使用厚重的渐变或阴影；界面严格是扁平且功能性的。不要使用活泼或手写字体；保持技术权威性。不要混用文本对齐方式；坚持使用清晰的左对齐网格以保证可读性。关键颜色是用于背景的米白色和用于主文本的深黑色，橙红色点缀完全保留给几何英雄图形。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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