这个网站太棒了！我把它做成了一个模板（附上仓库链接），这样每个人都能拥有精美的网站了。https://github.com/ali-abassi/aster-landing-page-template

ali-abassi/aster-landing-page-template

源码：https://github.com/ali-abassi/aster-landing-page-template

Aster

一个电影感的着陆页模板——分层的 alpha 艺术作品、克制的滚动动画，以及三个文件构建的完整营销页面。

在线演示 → (https://aster-landing-page-template.pages.dev)

无需构建 · 无框架依赖 · 无第三方库 · 无网络字体请求 · MIT 协议

为什么做这个？

大多数免费的着陆页模板只给你一个首屏区域、三个特性卡片和一个页脚。这个模板给你的是一个完整的营销页面——那种真正可以上线的页面，而且把那些繁琐的部分都预先构建好了：一个分层的视差滚动首屏、一个用纯 HTML 构建的产品原型、六个插图风格的特性展示阶段、一个对比表格、一个评价墙，以及一个手风琴式的常见问题解答。

它刻意使用纯 HTML、CSS 和一段简短的脚本。在浏览器里打开 index.html，它就能工作。无需安装，无需编译，无需持续更新。

致谢

这是一个致敬作品——旨在学习并重建 unive.ai (https://unive.ai) 的结构化设计技艺，他们的主页设计得非常出色。他们的页面教会了这个模板如何安排版块节奏：一个宽广、富有情感的首屏区域迅速过渡到具体的产品证据，将证明保持在首屏之内，使用紧凑的功能网格代替无尽的全屏段落，以及一面密集的社交评价墙。

这里没有复刻 Unive 的任何内容。 没有文案、美术、UI、Logo、品牌、字体或代码。Aster 是一个虚构的产品，拥有自己的世界、配色、字体体系、层级和原创图形。如果你喜欢这个页面的布局，这个布局的功劳属于 Unive 团队——去看看他们的网站吧 (https://unive.ai)。

完整页面结构

首屏区域 — 三层视差全景图，评分徽章，媒体报道栏 三层透明的全景图以不同的速度在温暖的渐变背景上漂移。评分徽章位于标题之上，确保社会认同始终在首屏内。媒体报道栏位于首屏底部的艺术作品上方。首屏高度跟随视口，因此无论在小笔记本电脑还是高分辨率显示器上，风景线都能与首屏折叠线对齐。构建它的三个图层： 构建首屏的三个 alpha 图层

工作空间 — 用真实 HTML 构建的产品原型 一个完整的仪表盘——侧边栏、进度条、焦点卡片、迷你折线图、路线跟踪器、备注面板——完全由 HTML 和 CSS 构成。这里没有任何图片，因此当你的产品语言改变时，你只需编辑文本，而不是 Figma 导出物。它在任何缩放比例下都保持清晰，且不增加额外的字节开销。

功能 — 3×2 网格中的六个插图阶段 六个原创的 CSS/SVG 产品阶段——决策图、等高线图、星座图、路线图列、聊天线程、轨道图——每个都按比例缩放，置于其名称和描述上方的一个有色面板中。每个阶段都在固定的 620×560 尺寸下创建，并由一个变量控制缩放，因此你无需重新调整六个布局。

对比 — 三栏定位表格 你的产品与两个替代方案进行对比。在移动端水平滚动，而不是折叠成难以阅读的形式。

评价 — 社交帖子卡片墙 十二个评价，样式如同社交帖子——头像、带认证标记的姓名、星级、纯文本正文、日期和国家——以瀑布流墙的形式展示，并在浮动的计数徽章下逐渐淡出。重点在于密度：一面简短评价墙比四条长评价更具可信度。

常见问题解答与结尾 — 手风琴和星空 CTA 常见问题解答 — 使用原生的 <details> 手风琴，支持键盘操作，即使禁用 JavaScript 也能工作。 结尾 — 深色星空背景收尾，重现地平线艺术作品，以及一个四栏页脚。

移动端 — 390px 下的首屏、菜单和评价 菜单通过汉堡按钮打开，按 Escape 键、选择链接或点击外部任意位置关闭。所有内容都重新排列成单列；没有任何元素被隐藏而没有替代方案。

快速开始

git clone https://github.com/ali-abassi/aster-landing-page-template.git
cd aster-landing-page-template
python3 -m http.server 4173

然后打开 http://localhost:4173。这就是完整的工具链。

部署 — Cloudflare Pages, Netlify, Vercel, GitHub Pages 任何静态托管都可以——将文件夹上传即可。

对于 Cloudflare Pages：

npx wrangler pages project create my-site --production-branch main
npx wrangler pages deploy . --project-name my-site

模板包含 _headers 文件，为 assets/ 目录设置了长达一年的不可变缓存，并配置了 X-Content-Type-Options、Referrer-Policy 和 X-Frame-Options。Netlify 会读取相同的文件。在其他主机上，你可以删除它。

对于 GitHub Pages，推送代码并在仓库根目录启用 Pages 即可——无需工作流，因为没有构建步骤。

自定义

1. 品牌区块 — 2 分钟

所有你必须更改的内容都框在 index.html 的顶部：

...

然后替换 favicon.svg，替换 assets/og-image.jpg（1200×630——这是链接预览中显示的图片），并在 robots.txt 和 sitemap.xml 中填入你的域名。

2. 设计令牌 — 控制整体外观

所有颜色、字体、圆角和尺寸都定义在 styles.css 顶部的一个区块中。更改这些，整个页面就会随之变化：

:root {
  /* 调色板 */
  --canvas: #f4efe5;
  --canvas-soft: #f8f4ec;
  --white: #fffdf8;
  --ink: #17201b;
  --ink-soft: #506057;
  --forest: #17271f;
  --coral: #d8755a;
  --moss: #485b3e;
  --brass: #b28a42;
  --sage: #cbd2b3;
  --blue: #9bc4cc;
  --gold: #e4be69;
  --lilac: #c9badd;

  /* 字体 — 仅使用系统栈：无网络请求，无布局偏移 */
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;

  /* 尺寸与形状 */
  --wrap: 1180px;
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 36px;

  /* 首屏节奏与功能阶段缩放 */
  --hero-h: clamp(980px, calc(880px + 24svh), 1130px);
  --hero-copy-top: clamp(92px, 13svh, 120px);
  --stage-scale: 0.53;
}

3. 首屏艺术图

替换 assets/ 目录中的三个文件，保持文件名不变：

所有三个文件都是 2172×724 像素、带有 alpha 透明度，底部对齐，并由首屏的下边缘裁剪。请将你的主体保留在下三分之二区域——上方区域是留给动态文本的。

如何制作附带的艺术图 这三张全景图是使用 OpenAI 的图像生成工具生成的，提示词要求生成透明背景（alpha）的分层图，而不是一张平面图——为远处的地平线、中景地形和近景前景各生成一个独立的图层。将它们作为三个堆叠的 <div> 图层进行合成，这就创造了深度：因为每个图层都具有真实的透明度，图层可以在滚动时独立平移，并且你可以透过近处的植被看到后面的山脉。这就是全部技巧——视差效果之所以令人信服，是因为源艺术是以可分离的透明图层生成的，而不是单一图像。

如果你自己生成，请注意：

• 明确要求透明背景，并将每个深度平面生成为单独的图像。
• 生成比你需要的更宽——这些是 2172px 宽，这样它们可以在超宽屏幕上超出 1180px 的容器。
• 导出为 WebP 格式。这三个图层总共约 950KB，而 PNG 原稿有几 MB。将原稿保存在本地；.gitignore 已经排除了 assets/*.png。
• 构图必须在任何运动之前就成立。给每个平面一个独特的静态位置，这样图层才不会被看成一张会晃动的扁平图片。

4. 文案、链接和虚假证明

占位目标都用 data-placeholder-link 标记——搜索它并指向真实地址。

此模板中所有看似证明的内容都是虚构的。 媒体名称 (THE LONG VIEW, NORTHWARD, SIGNAL & NOISE, THE MERIDIAN)、4.9/5 的评分、“2,408 人”的计数，以及所有十二个评价及其姓名、日期和国家，都是为了演示布局而选择的虚构占位符。请将它们替换为你实际能支持的声明，或者删除这些区块。原样发布它们等同于伪造背书和评价。

5. 动画

在任何元素上添加或移除 data-reveal，script.js 中的 IntersectionObserver 就会在加载时捕获它——无需注册。所有动画仅使用 transform 和 opacity，并且始终尊重 prefers-reduced-motion，提供了预定义的零动画静态状态。

已验证

在以下分辨率下进行了检查：1440×900, 1440×780, 1280×720, 1280×633, 834×1112, 390×844, 320×568：

• 在任何视口或滚动深度下都没有水平溢出
• 主要操作按钮始终保持在首屏内
• 首屏艺术图达到折叠线，且其不透明部分位于操作按钮行之上——通过对全景图进行 alpha 采样测量，因为它们的边界框包括了宽大的透明边距
• 所有三个图层在任何滚动位置都终止于同一条裁剪线
• 导航在任何宽度下都可访问
• 常见问题解答支持键盘操作；没有装饰性控件位于 Tab 键序中
• 减弱动画模式下没有任何元素停留在零透明度状态
• 整页滚动无控制台错误和请求失败

无障碍功能：跳转链接、可见的焦点环、星级评分的可访问名称、媒体报道栏的 role="group"，以及用于常见问题解答的语义化 <details>。

DESIGN.md 记录了视觉理论、参考文献清单、字体和颜色决策*（包括被否决的方案）*以及测量通过条件。在进行结构性修改前请阅读它。

项目结构

index.html
  单个页面。品牌区块框定在顶部。
styles.css
  设计令牌在顶部，然后按页面顺序排列的各个部分。
script.js
  滚动进度、元素显现动画、视差效果、导航、常见问题解答。
assets/
  三张 alpha 全景图 + 社交媒体分享图。
evidence/
  已验证构建的屏幕截图。
_headers
  用于 Pages / Netlify 的缓存和安全头。
DESIGN.md
  设计系统及其原理。

许可证

MIT —— 可用于商业用途、修改、发布。注明出处是受欢迎的，但不是必须的。assets/ 中生成的艺术作品也按相同条款包含在内。

Jonathan Wilke (@jonathan_wilke)： 刚刚发现 https://t.co/fUhTNIyVCD 跻身 https://t.co/ZElVA2hguv 的今日前三，我想给他们点个赞，因为他们的网站是网页设计的杰作 ✨

请制作更多如此精美的网站！