哈喽 我是大鹏，这里是第二灵感库，每天学习一点点，加班熬夜少一点，成长进步多一点！

今天这期，我们先从 SaaS 官网里找灵感。

很多设计师做官网、落地页、产品介绍页的时候，最容易遇到一个问题：页面看起来不丑，但就是不高级；信息很多，但用户看不懂；功能很强，但首屏没有记忆点。

所以我从 Saaspo 里先挑出 4 个适合拆解的海外 SaaS 官网。我们不只看它们好不好看，更重点看它们的主色、字体、首屏表达、信息层级，以及背后的设计思维。

---

本期速览

#	网站	类型	值得学习的点
1	Cartesia	AI 语音产品	技术产品如何建立专业感
2	Framer	AI 建站工具	工具类官网如何讲使用流程
3	Mistral AI	企业级 AI 平台	复杂产品如何降低认知负担
4	Fillout	在线表单工具	轻量工具如何做得友好易用

---

01 Cartesia：AI 语音产品，怎么做出“高科技信任感”

网址：https://www.cartesia.ai/

Cartesia 是一个 AI 语音相关产品，官网重点围绕实时语音、语音生成、语音智能体展开。它的视觉不是常见的“黑底霓虹 AI 风”，而是更接近研究机构、实验室、企业级技术品牌。

基础视觉拆解

主色参考：

类型	色值
背景色	#F9F9F8
正文深色	#1E1C1A
CTA 深绿色	约 #004E23

字体参考：

层级	字体
标题	页面检测到 PP Kyoto
正文	页面检测到 ABC Diatype

Cartesia 的字体组合很值得学。标题字体带一点人文和实验感，正文则非常理性、干净。这样做的好处是：既有技术品牌的严肃感，又不会显得冰冷。

设计思维

Cartesia 用到了“渐进披露”思路。

它没有一上来把所有技术参数、模型能力、接口文档都塞给用户，而是先建立一个清晰认知：这是一个关于 AI 语音和交互智能的产品。用户继续往下看，页面才逐步展开产品能力、应用场景、部署方式和客户价值。

这对复杂技术产品非常重要。用户第一眼不是要看懂所有功能，而是要先判断：

这个产品是什么？

它解决什么问题？

它是否值得信任？

设计师可以怎么学

如果你在做 AI、开发者工具、B 端平台类官网，首屏不要急着堆功能。先用一句清楚的定位建立认知，再用模块化卡片展示能力，最后用客户、场景和技术细节补信任。

AI 提示词参考

AI voice SaaS landing page, warm off-white background, dark green CTA, editorial serif headline, clean enterprise tech layout, modular product cards, trustworthy research lab style

---

02 Framer：工具类官网，怎么把“功能”变成“想立刻试试”

网址：https://www.framer.com/

Framer 是设计师很熟悉的网站制作工具。它现在的官网重点强调 AI 建站、画布编辑、团队协作和快速发布。

它最值得学习的地方是：它没有把自己讲成一个“功能集合”，而是讲成一个“创作流程”。

基础视觉拆解

主色参考：

类型	色值
背景色	#000000
主文字	#FFFFFF
辅助文字	半透明白 / 灰色
按钮	白底黑字

字体参考：

层级	字体
标题	页面检测到 GT Walsheim Medium
正文	页面检测到 Inter Variable

Framer 的页面是典型高对比表达：黑底、白字、大标题、强视觉中心。它的高级感来自克制，而不是复杂装饰。

设计思维

Framer 用的是“产品演示型叙事”。

很多工具类官网喜欢写：支持 AI、支持 CMS、支持协作、支持发布。但 Framer 的表达更像一个流程：

先生成想法

再在画布上编辑

和团队一起协作

最后发布上线

用户看到的不是功能清单，而是自己的工作路径。

这也是工具类产品很重要的设计原则：不要只告诉用户“我有什么”，而要展示“你用我能完成什么”。

设计师可以怎么学

如果你做 Figma 插件、效率工具、模板产品官网，可以少写“功能很强”，多展示“使用前后变化”。

比如：

普通写法	更好的写法
支持一键生成页面	从空白画布到可发布页面，只需要几分钟
支持团队协作	设计、文案、开发可以在同一个页面推进
支持模板库	不用从 0 开始，直接选择适合项目的结构

AI 提示词参考

black and white SaaS tool landing page, bold modern typography, canvas-based workflow, product UI screenshots, high contrast, minimal futuristic interface, designer productivity platform

---

03 Mistral AI：企业级 AI 官网，为什么越克制越高级

网址：https://mistral.ai/

Mistral AI 是一家 AI 模型和企业 AI 服务公司。它的官网没有用大量炫光、3D、渐变和赛博视觉，而是走专业、克制、可信的路线。

基础视觉拆解

主色参考：

类型	色值
背景色	#FBFBF8
主文字	#000000
分割线 / 边框	约 #E4E3DE

字体参考：

层级	字体
全站主要字体	页面检测到 Inter

Mistral 的视觉非常“企业级”。它不靠装饰抢注意力，而是用清晰导航、稳定留白和产品入口建立信任。

设计思维

Mistral 用到了“认知负荷控制”。

AI 产品本身已经很复杂，如果官网还堆满动效、技术词、视觉特效，用户会更累。Mistral 的处理方式是：让视觉退后，让结构站出来。

它的页面重点不是让用户觉得“哇，好酷”，而是让用户觉得：

这家公司专业

产品路径清楚

企业客户可以继续了解

技术团队能找到开发者入口

这就是企业级官网和普通展示页的区别。它不只是展示品牌，而是在帮助不同角色快速找到自己关心的信息。

设计师可以怎么学

做高客单价、企业服务、AI 平台、数据平台类官网时，不要只追求酷。越复杂的产品，越需要稳定的信息架构。

高级感不是“黑色背景 + 渐变光效”，而是信息越复杂，页面越有秩序。

AI 提示词参考

enterprise AI platform website, warm white background, black typography, clean grid layout, minimal navigation, serious technology brand, trustworthy B2B design, low visual noise

---

04 Fillout：轻量工具，怎么做得友好又好用

网址：https://www.fillout.com/

Fillout 是一个在线表单工具，可以做表单、问卷、预约、支付、工作流、签名等。它的官网气质很明确：简单、友好、容易上手。

基础视觉拆解

主色参考：

类型	色值
主文字	#000000
深灰按钮	#333333
页面背景	白色为主

字体参考：

层级	字体
首屏标题	页面检测到 Inter
部分二级标题	页面检测到 blMelody

Fillout 的设计没有刻意装高级，而是把“易用”放在第一位。它让用户一眼知道：我可以用它创建表单、收集信息、连接工具、做品牌定制。

设计思维

Fillout 用的是“可供性设计”。

所谓可供性，就是用户看到一个界面时，能不能立刻理解它可以怎么用。Fillout 的页面没有要求用户先学习概念，而是直接把使用场景摆出来。

这对轻量工具非常关键。用户愿不愿意试用，往往取决于第一屏有没有让人产生一个感觉：这个东西我应该很快能上手。

设计师可以怎么学

如果你做大众型工具、表单工具、模板产品、插件官网，页面结构可以参考这个顺序：

我能做什么

做出来长什么样

适合哪些场景

可以连接哪些工具

现在怎么开始

这比单纯罗列功能更有效。

AI 提示词参考

friendly form builder SaaS website, clean white layout, dark gray buttons, soft rounded UI cards, approachable productivity tool, clear templates and integrations, simple onboarding flow

---

本期回顾

学习维度	对应案例	设计关键词
技术信任感	Cartesia	渐进披露、深绿色 CTA、实验室气质
工具流程感	Framer	产品演示型叙事、高对比、画布思维
企业可信度	Mistral AI	认知负荷控制、清晰导航、低视觉噪音
易用亲和力	Fillout	可供性设计、场景化表达、低理解成本

---

最后总结

这 4 个网站虽然都属于 SaaS 官网，但它们的设计方向完全不同。

Cartesia 告诉我们：复杂 AI 产品要先建立专业感。

Framer 告诉我们：工具类产品要把功能讲成流程。

Mistral AI 告诉我们：企业级产品越复杂，页面越要有秩序。

Fillout 告诉我们：轻量工具最重要的是让用户觉得“我马上能用”。

如果你是 UIUX 设计师，不建议只收藏截图。更好的学习方法是每次拆 5 个问题：

第一屏到底在讲什么？

主色和字体传递了什么气质？

页面先讲价值，还是先讲功能？

用户为什么愿意继续往下看？

这个结构能不能迁移到我的项目里？

真正能提升设计能力的，不是你看了多少好看的页面，而是你能不能看懂它为什么这样设计。

以上就是本期的 4 个设计灵感内容。

如果你正在积累 UIUX 知识、Figma 插件、Web/App 素材模板，或者想建立自己的设计灵感库，可以先把这篇收藏起来，等做项目、找参考、搭作品集的时候再回来翻一翻。

第二灵感库会持续整理更适合设计师学习和实战的内容：包括设计网站、Figma 资源、UIUX 方法论、灵感案例和效率工具。

希望这里能成为你的设计备忘录，也帮你在每一次项目开始前，少一点迷茫，多一点方向。

我是大鹏，我们下期继续一起补充灵感库。