第一种风格选哪个

同一个虚构产品 Tessera(每周自动写数据报告的 AI 工具),用三种风格各做一个网页首屏。滚到哪个,哪个就自动播放一次,点「重播」可以再看。选中的风格会配套做两个 Skill:网页动效首屏和产品发布视频。三个都刻意避开了 AI 网站常见的发光渐变、毛玻璃和千篇一律的卡片。

方向 01

墨线排版

Ink Type

像一本印得很讲究的杂志:只用黑、白、灰,靠字体和细线撑起质感。

动效
黑幕拉开,细线一条条画出,标题从乱码解码成字,图表像一笔墨线画出来
适合
个人品牌、工作室、内容产品、讲究格调的 SaaS
字体和颜色
Instrument Serif 衬线标题,Inter 正文;纸白、墨黑、灰
配套的发布视频
同一套黑白版面,像翻杂志一样一页页推进,关键数字用墨线圈出来
ProductPricingChangelog Sign in

No. 01 — The weekly report

Every metric,explained inplain words.

Tessera reads your product data and writes the weekly report for you: what moved, why, and what to do next.

Start freeWatch the 40-second film
Week 41Activation

“Up 12% after Tuesday’s onboarding change.”

Read every Monday by 4,000 teamsIssue 41 · 07:00
方向 02

瑞士动态网格

Swiss Kinetic

严格的网格加一种信号红,窄体粗字,干脆利落。

动效
网格线先竖起来,单词从遮罩里升起,红色色块横扫,数字滚动计数,柱子依次弹起
适合
开发者工具、数据和 AI 产品、想显得专业又有力量的创业公司
字体和颜色
Archivo 窄体粗字,Inter 正文;浅灰、黑、信号红
配套的发布视频
卡着节拍的网格转场,数字和图表按拍子跳出来
01 Product02 Pricing03 ChangelogStart free →

Every metric, explained.

+12%
Activation, week 41

Tessera reads your product data and writes the weekly report: what moved, why, and what to do next.

Start free Watch the film ↗
方向 03

工程线稿

Blueprint

像一张产品设计图纸:先画辅助线,再画轮廓,最后标尺寸和注释。

动效
辅助线延伸,产品轮廓一笔画完,尺寸线伸出并计数,标题从空心描边被墨填满,标号注释逐个弹出
适合
硬件、基础设施、AI 工具,以及想讲清楚「怎么做出来」的产品
字体和颜色
IBM Plex Sans 和 Plex Mono;米白图纸、钴蓝线条、石墨灰
配套的发布视频
镜头沿着图纸推进,一张张图纸拼成完整的产品
ProductPricingChangelog

Sheet 01 — Weekly report engine

Every metric,explained.

Tessera reads your product data and writes the weekly report: what moved, why, and what to do next.

Start freeView the drawing ↗
ProjectTessera
Sheet01 / 03
Scale1 : 1
RevA