打开 Sanity.io 的功能页，你会看到一件奇怪的事：整个页面几乎没有一张图片。

右侧那个巨大的、缓缓旋转的螺旋星云，凑近看才发现——它由成千上万个重复的单词组成：SCHEMA、DOCUMENT、FIELD、IMAGE、LINK……全是 Sanity 产品的核心概念。这不是插画，是用文字本身画出来的"ASCII 艺术字"。

抽象概念的可视化难题

Sanity 卖的东西很难用画面表现。它是一个"内容架构"平台（headless CMS）——通俗说，就是网站内容的底层管理系统。这类产品的官网通常两种做法：

1. 截图流：堆产品后台截图，枯燥且劝退非技术访客
2. 抽象插画流：画一些几何图形+渐变，好看但等于什么都没说

Sanity 选了第三条路：用产品的语言本身作为视觉素材。功能列表里的关键词——schema、document、field——被排布成巨大的鲸鱼（Sanity 的品牌图腾）和螺旋星云。懂的人会心一笑，不懂的人也会被视觉冲击力留住。

为 AI Agent 时代重写的产品叙事

页面左侧的文案同样值得细读。当前版本的主标题是 “The Sanity setup agents don’t reinvent”——直译是"智能体不需要重新发明的 Sanity 配置"。

这句话瞄准的是 2026 年开发者社区最大的焦虑：AI Agent 写代码越来越普遍，但每次生成都像"每次运行都发明一个新的，没有沉淀"。Sanity 的回答是把六年的工程决策固化成工具包，让 Agent 在既定架构内工作。

技术产品的官网文案能做到"一句话讲清定位"，比一百行营销文案值钱。注意页面底部那个仿终端状态栏：NEXT 16.X / AGENTS.MD: LOADED / SANITY V3 / TS: STRICT——四个标签精准圈定目标用户（用 Next.js + TypeScript 的工程师），不相关的人自动划走。

黑白极简的商业逻辑

Sanity 的 Showcase 页展示了用他们构建的真实网站，并明确写着这些作品"获得 Awwwards、FWA、CSSDA 认可"。案例缩略图统一处理成点阵/扫描线风格——用后期处理抹掉每个案例的原始色彩差异，让整个页面保持在黑白灰的统一气质里。

这种克制背后有清晰的商业逻辑：卖"架构"的公司，自己的官网必须看起来像精密仪器。花哨的渐变和 3D 会稀释"工程严谨性"的心智印象。黑白+等宽字体+文字艺术，三者叠加出的气质是"我们连视觉都是结构化的"。

三个可复用的设计决策

1. 把产品词汇变成视觉资产。 你的产品关键词重复一万遍排成图案，比请插画师便宜一百倍，且独一无二无法抄袭。

2. 用状态栏式的细节筛选用户。 页面角落的技术标签（框架版本、模式开关）是不花钱的用户筛选器——目标用户看到会兴奋，非目标用户自动离开，省掉销售团队的过滤成本。

3. 案例展示要统一处理风格。 客户案例的原始截图五颜六色，直接排列会毁掉官网气质。用统一的滤镜/点阵化处理，既保留案例真实性又维持品牌一致性。

Sanity.io 证明：技术公司的官网不一定要"看起来有科技感"，让技术思维本身成为设计语言，才是最高级的差异化。

复刻提示词：让 AI 帮你做一个同款官网

想给你的 SaaS / 工具类产品做这种"文字艺术"风格官网？这段提示词直接可用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

做一个黑白极简风格的技术产品官网，视觉主角是"文字云艺术"，要求：

1. 主视觉：右侧用 Canvas 绘制一个由产品关键词组成的螺旋/星云图案——
   从 SCHEMA、DOCUMENT、FIELD、API、CONTENT 等词中随机取样 2000+ 个，
   沿对数螺旋线排布，字号向中心递减，颜色 #ffffff 透明度 0.15-0.9 随机，
   整体以 0.02rad/s 缓慢旋转，中心区域微微发亮
2. 配色：纯黑 #0a0a0a 背景，白字，禁用渐变和彩色——唯一例外是
   CTA 按钮可用一个深橙色 #ff6b35 点缀
3. 排版：左侧文案区用等宽字体 (JetBrains Mono) 排主标题，
   正文用无衬线 (Inter)，两者字号差至少 4 倍，制造"仪器面板"感
4. 状态栏：页面底部一条仿终端状态栏，显示技术栈标签
   (框架版本/类型系统/构建模式)，用小号等宽字+分隔点
5. 案例区：客户截图统一做点阵化处理 (CSS filter: grayscale + contrast
   或 canvas 抖动算法)，保持整页黑白统一气质
6. 动效：只允许两种——文字云旋转和 hover 时关键词局部加亮，其余全静态

技术栈：Next.js 15 + Tailwind，文字云用单个 Canvas 组件实现，不用 Three.js。

复刻要点：文字云的本质是"把产品词汇表变成纹理"——零美术成本、无法抄袭、还自带语义。做之前先把产品的 30-50 个核心词汇列出来，词汇密度决定了图案的质感。

本文基于对 Sanity.io 官网录屏的逐帧分析，收录于凌序科技「网站赏析」系列。我们专注网站开发，擅长把创意和技术落地为高性能的现代官网。