莫斯科 UTC+3
桌面端 school.viton13.com 的首屏:VITON13 顶栏下方是学校自己的菜单和黑色 Enrol 胶囊按钮,大标题“Build the skills for what comes next.”,一行从 Semantics 到 A working system 的技能,再往下的灰色色块里是 Artificial Intelligence 课程、蓝色 Explore the course 按钮和四个标签页。

VITON13 SCHOOL 是我们开设的应用 AI、AI 设计与 SEO 在线学校。2026 年 9 月 25 日,我们把它的落地页重做成一个安静克制的五语种产品页:一节课以真实 HTML 的形式,直接在一张 AI 生成照片里的笔记本电脑屏幕上播放。

标签
自有 VITON13 的自有产品
年份
2026
领域
网站、设计
工作室
by VITON13
语言
英语、俄语、西班牙语、法语、印地语

概述

VITON13 SCHOOL 是 VITON13 生态中的在线学校,网址为 school.viton13.com。学校开设三门应用课程——“人工智能”“人工智能设计”和“网站 SEO”,以卢布定价,分别为 1,300、2,600 和 3,900 卢布。学校需要这样一个首页:不靠叫卖就能讲清三门课和同一套方法,让人在付款前就看到一节课是什么样子,并用英语、俄语、西班牙语、法语和印地语讲述同样的事实。

  • 3

    门课程——AI、AI 设计与 SEO,价格分别为 1,300、2,600 和 3,900 卢布

    来源:课程数据与线上网站,2026年9月27日

  • 5

    个语言版本:EN、RU、ES、FR、HI

    来源:线上网站与 hreflang,2026年9月27日

  • 93

    手机端 Lighthouse 性能得分,三次运行中位数(桌面端 100)

    来源:Lighthouse 13.4,2026年9月27日

  • 100

    手机与桌面端 Lighthouse SEO 和最佳实践得分(无障碍 97)

    来源:Lighthouse 13.4,2026年9月27日

思路

2026 年 9 月 25 日,我们参照 sanalabs.com 这类安静的 AI 产品网站的风格重做了落地页:全站只用一款无衬线字体 Inter Tight,大多用 400 字重;黑色胶囊按钮;大面积灰色色块;每门课配一张大幅静物照片。页面按顺序展开:首屏滚动展示学校的十三项技能,接着是三个课程展示区(中间夹着一张宣言卡片)、数字计数、带价格和结账按钮的课程卡片、四步学习法、三个问题的选课助手、入学流程、新闻、指南、常见问题,最后是候补名单表单。

页面上的照片均由 AI 生成:六张图片用 Higgsfield 平台上的 GPT Image 2.5 制作,都是摆拍的静物和人物,画面中的人并非 VITON13 的学员或老师。在“人工智能”课程展示区,笔记本屏幕并不是照片的一部分:我们在绿幕原图上量出屏幕的位置,再在上面叠加一节真实的 HTML 课程——模块列表、当前步骤、向导师提问的输入行和进度条。四个标签页决定屏幕上显示什么:区块在视野内时每 6.5 秒自动切换,访客一旦自己点选就停止,开启“减少动态效果”时则完全不动。设计和 SEO 课程的展示区则把同样的步骤放在一块悬浮面板上。

落地页属于 VITON13 的 Next.js 应用,拥有独立子域名和五个语言版本:英语不带前缀,其余为 /ru、/es、/fr 和 /hi,并通过 hreflang 互相关联。课程名称、价格和模块都来自同一个数据文件,因此计数、卡片、菜单和页脚显示的数字始终一致;价格按各语言的习惯格式化,页脚的附注说明:学校与学员确认开课之前不会收取任何费用。

成果

落地页已在 school.viton13.com 上线。2026 年 9 月 27 日,五个语言版本均返回 200 状态码,学校的站点地图共列出 30 个 URL:每种语言各有落地页、新闻页、指南目录和三篇指南。

同一天,我们在手机和桌面两种模式下各对首页运行了三次 Lighthouse 13.4。在模拟手机上,性能得分为 87、93 和 93(中位数 93),最大内容绘制为 3.1 秒,总阻塞时间 20 毫秒,没有布局偏移;在桌面端,三次性能均为 100,最大内容在 0.8 秒时出现。两种模式下无障碍均为 97,最佳实践 100,SEO 100。

整页连同照片在手机上约 0.8 MB,在桌面端约 1.0 MB。

本案例不能证明的

这是 VITON13 自己的学校,不是客户项目。本案例展示的是页面的构建方式和加载速度,而不是它对学员的实际效果:我们不报告任何报名、候补登记、销售或流量数据。

照片由 AI 生成且为摆拍:画面中的人都不是 VITON13 的学员、老师或客户,笔记本屏幕上的课程是示例内容,不是学员作品。落地页上的图片目前只有描述性的替代文本,还没有可见的 AI 标注,所以我们在这里说明。页面下方的三张指南卡片使用的是 Unsplash 授权照片,不在这些截图中。

Lighthouse 是实验室测试:在一台 MacBook 上用无界面 Chrome、于同一天运行,手机模式为模拟限速,并非真实访客的现场数据。无障碍得分为 97 而不是 100,是因为部分浅灰色小字(白底上的 #8a8a88,对比度 3.45:1)未达到 WCAG AA 对比度要求,这项修复我们尚未上线。版式沿用了另一家公司产品网站所代表的风格;文案、照片和代码均为我们自己的。

在筹划类似的项目?每条消息都由我们的创始人 Tarasov Vitalii 亲自阅读。

全部作品

下一个项目

HYPERSOLID沉浸式 WebGL 概念网站 概念2026 全部作品 (23)