Landing Page Builder
概述
一个完整的设计系统 + 组件库，用于用纯 HTML/CSS/JS 构建美观且交互丰富的落地页——无需框架，无需构建步骤。以可复用的 CSS 设计令牌、JS 交互模式和 HTML 组件模板的形式提供。
核心原则： 复制设计系统文件，从组件模板组合各部分，自定义令牌。一切无需依赖（可选：Google Fonts CDN）。
何时使用
- 构建产品落地页、营销站点或作品展示
- 创建带交互元素的文档站点
- 部署到 GitHub Pages、Netlify 或任何静态托管平台
- 需要深色/浅色主题切换、滚动动画、工具提示
- 希望拥有精致设计，但无需 React/Vue/构建工具
何时不使用：
- 复杂 Web 应用（涉及状态管理）——请使用框架
- 服务端渲染的页面（此工具仅用于静态内容）
- 内部管理仪表盘（过于复杂）
快速参考
| 组件 | 文件 | 关键类 |
|---|---|---|
| 设计令牌 | design-system/design-system.css | :root 变量、--accent-*、--gradient-* |
| 导航栏 | components-reference.html | .navbar、.nav-links、.lang-toggle |
| 主视觉区 | components-reference.html | .hero、.hero-title、.gradient-text、.hero-stats |
| 功能卡片 | components-reference.html | .feature-grid、.feature-card、.reveal |
| 代码块 | components-reference.html | .code-block、.code-header、.code-copy |
| 工具提示 | components-reference.html | .tooltip-trigger、[data-tooltip] |
| 标签页 | components-reference.html | .tab-list、.tab-btn、.tab-panel |
| 主题切换 | design-system.css + app-template.js | [data-theme]、.icon-btn[data-toggle="theme"] |
| 语言按钮 | design-system.css | .lang-toggle、.lang-btn[data-lang] |
| 滚动揭示 | app-template.js | .reveal → .visible（通过 IntersectionObserver） |
| 国际化 | app-template.js | [data-i18n] + 翻译字典 |
设计系统
design-system.css 提供了两套主题的完整令牌集。根据你的品牌调整这些值；更多细节请阅读文件。
阅读 design-system/design-system.css 以获取维护的深色/浅色令牌；根据要求的品牌进行调整，而不是在此维护第二份令牌列表。
文件
| 文件 | 用途 |
|---|---|
design-system/design-system.css | 完整 CSS：令牌、导航栏、主视觉区、卡片、代码块、工具提示、标签页、页脚、响应式 |
design-system/app-template.js | JS：滚动揭示、导航栏滚动、代码复制、标签页、主题切换、移动端菜单、国际化 |
design-system/components-reference.html | 每个组件的可复制 HTML 片段 |
templates/landing-template.html | 完整起始模板——包含所有部分的线框图 |
工具提示模式
工具提示在桌面端（悬停）和移动端/触屏（点击切换）上均可工作。需要 app-template.js 提供触屏支持。
<!-- 向上打开（默认） -->
<span class="tooltip-trigger" data-tooltip="这里有帮助性解释">
悬停我
</span>
<!-- 向下打开（用于靠近页面顶部的触发元素） -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="解释">
悬停我
</span>
<!-- 宽变体（用于较长文本，移动端自动换行） -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="较长的多行解释...">
悬停我
</span>
桌面端： CSS :hover 显示工具提示。移动端/平板： JS 添加点击切换，点击外部关闭。键盘： Tab 聚焦，Enter/Space 切换，Escape 关闭。
触屏和键盘路径通过切换触发元素上的 .tooltip-active 类实现。手写的工具提示 CSS 必须同时为
.tooltip-trigger:hover::after 和 .tooltip-trigger.tooltip-active::after 设置样式，否则点击无效——请阅读
design-system/design-system.css 第 10 部分（工具提示）后再自行编写。
层叠： 工具提示通过 z-index:10（应用在 .feature-card:hover、.code-block:hover 和
.callout:hover 上）脱离其容器。保留这些规则，并在子元素上使用 border-radius 来裁剪圆角（如
.feature-card::before 所做）——容器上的 overflow:hidden 会裁剪工具提示，且任何 z-index 都无法挽救。
构建工作流
- 复制
design-system.css、app-template.js和templates/landing-template.html（重命名为index.html）到你的 项目中——三个文件放在一起，因为模板通过裸文件名引用它们 - 添加部分 从
components-reference.html（功能、代码块、标签页、标注、页脚）到线框架中 - 自定义令牌 在
:root中（颜色、字体、渐变） - 添加内容 到 HTML，如果需要多语言，则配置
data-i18n键 - 在本地测试 ——在浏览器中打开
index.html，检查下方“常见错误”表格的每一行；每项都正确后才算完成 - 交付 已验证的文件。仅在被要求时进行部署，使用约定的托管平台和仓库工作流。
部署到 GitHub Pages
当要求发布时，检查现有仓库和 Pages 配置，准备好经过审查的文件，并遵循其部署工作流。仅在获得授权时创建公共仓库或更改可见性。暂存命名的输出文件，保留不相关的工作。在报告公共 URL 之前，验证部署的修订版和实时内容；仅 HTTP 200 不能作为视觉证据。
常见错误
| 错误 | 修复 |
|---|---|
| 缺少 meta viewport | 添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<html> 上缺少 [data-theme] | 设置 <html data-theme="dark"> 作为默认主题 |
| 揭示元素不可见 | 确保已加载 app-template.js，并且 .reveal 有匹配的 .visible 逻辑 |
| 隐藏标签面板中的揭示元素 | 标签切换会自动重新揭示；或者从标签内容中移除 .reveal |
| 工具提示在顶部被截断 | 对靠近视口顶部的触发元素使用 .tooltip-bottom 变体 |
| 加载时主题闪烁 | 在 <head> 中内联 <script>，在渲染前读取 localStorage.getItem('lp-theme') 并设置到 data-theme——templates/landing-template.html 中已有此脚本 |
| 无 JS 时内容不可见 | 在 <html> 上添加 class="no-js" + .no-js .reveal { opacity:1 } 回退 |
| 代码复制不工作 | 检查 .code-copy 按钮是否存在，并且 JS 已加载 |
| 未样式化内容闪烁 | 在样式表之前的 <head> 中放置字体 <link> |
| 缺少焦点样式 | 所有交互元素都内置了 :focus-visible 轮廓 |
无障碍
该设计系统包含：
- 所有交互元素上的
:focus-visible轮廓（键盘导航） prefers-reduced-motion媒体查询（禁用动画）.no-js回退（无 JavaScript 时内容可见）- 仅图标按钮的 ARIA 标签
- 语义化 HTML 结构（正确的标题层级）
- 主题对比度令牌；在自定义后验证对比度，然后再声明符合 WCAG 标准