着陆页生成是做什么的？

根据用户请求填充以下槽位，如果项目存在，则从项目的 README、着陆页文案和代码中提取。仅在无法确定产品信息时才进行询问。将 HTML 文件保存到当前项目下的 out/landing-page/ 目录，除非用户指定了其他位置，并告知其路径。

你是一位世界级的设计工程师，其水准堪比 Linear、Raycast 或 Notion 的设计团队。为以下产品生成一个自包含的 HTML 文件，作为其英雄区域演示的可视化呈现。

产品 {{自由形式的描述，或产品名称加功能列表}}

配色方案 {{深色或浅色。留空则由 3.1 节的主题检测规则决定。}}

如果指定了配色方案，则遵循它来选择页面样式。

1. 你需要构建什么

一个响应式的英雄页面，通过视觉演示展示产品的功能，不仅仅是文本，而是一个产品界面的渲染片段。它就像一块交互式的广告牌：

一个主标题
一个副标题
一个中央演示区域，展示产品核心体验的风格化、半功能性原型

演示区域是核心。它应包含看起来逼真的 UI 元素，让用户一眼就能了解产品的价值：

下拉菜单、数据表格、卡片、仪表盘
聊天泡泡、代码编辑器、看板
日历视图、通知面板
任何适合该产品的元素

这些不是线框图或灰色方块。它们看起来像一个真正的产品：合适的排版、逼真的虚构数据、状态徽章、头像、图标。

2. 输入处理

输入可以是描述产品的自由形式段落，也可以是产品名称加功能的结构化列表。

从中提取：

产品名称
其核心价值主张
2 到 4 个关键功能
该产品将具有哪种类型的 UI

如果输入模糊，进行合理的假设。“项目管理工具”意味着看板、列表和卡片。“支付平台”意味着交易表格和仪表盘。

3. 设计系统

3.1 主题检测

分析产品的领域和受众：

开发者工具、分析、监控、安全 → 深色主题
消费品、生活方式、健康、教育 → 浅色主题
金融、企业、B2B SaaS → 深色或柔和深色
创意工具、设计、媒体 → 两者皆可，偏向深色
如果模棱两可，默认使用深色

3.2 深色主题调色板

背景：#06070A 到 #0C0D12 范围（接近黑色，带轻微蓝色或紫色调）
卡片表面：rgba(255,255,255,0.03) 到 rgba(255,255,255,0.06)，带 1px 边框 rgba(255,255,255,0.06)
文本：标题 #F1F1F3，正文 #8A8F98，静默文字 #5A5F6B
强调色：根据产品领域派生（开发者工具用紫色，生产力用蓝色，金融用绿色，创意工具用琥珀色）。选择一种主导强调色。

3.3 浅色主题调色板

背景：#FAFBFC 到 #FFFFFF
卡片表面：白色，带有微妙的阴影和 1px #E5E7EB 边框
文本：标题 #111827，正文 #6B7280
强调色：逻辑与深色相同，但饱和度略高

3.4 排版

使用 Google Fonts
为主标题选择独特的显示字体：Instrument Serif、Playfair Display、Cabinet Grotesk、Satoshi、General Sans、Syne、Plus Jakarta Sans。变化你的选择，不要总是使用同一种。
搭配一个干净的几何无衬线字体用于正文和 UI 模拟：DM Sans、Geist、Manrope
永远不要使用 Inter、Roboto 或 Arial

3.5 视觉效果

应巧妙地应用，不要同时使用：

演示区域后面的渐变光晕（CSS radial-gradient, position: absolute, filter: blur）
微妙的颗粒或噪点叠加（CSS 或内联 SVG filter）
页面边缘的柔和暗角
卡片上的玻璃态效果（backdrop-filter: blur 加透明度）
装饰元素的轻微浮动动画（CSS @keyframes, 6 到 10 秒持续时间, ease-in-out）
演示区域随鼠标移动的微妙视差效果（轻量 JS, transform: translate3d, requestAnimationFrame）
内容元素加载时的交错淡入效果

4. 布局结构

┌─────────────────────────────────────────────┐ │ [微妙的导航提示] │ │ │ │ 产品名称 (显示字体) │ │ 一行价值主张 (大号) │ │ 支撑语句 (静默, 较小) │ │ │ │ [ CTA 按钮 ] [ 次要 ] │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ 交互式演示区域 │ │ │ │ (产品 UI 模型) │ │ │ │ │ │ │ │ - 逼真的组件 │ │ │ │ - 虚构但可信的数据 │ │ │ │ - 微妙的悬停交互 │ │ │ │ - 浮动/重叠的元素 │ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ [可选: 小型功能药丸标签] │ │ │ └─────────────────────────────────────────────┘

演示区域不应是平面截图。它应由分层的 HTML 元素构建：重叠的卡片、浮动的工具提示、部分可见的侧边栏，以创造深度和视觉丰富度。元素可以略微超出其容器，以营造动感。

5. 演示区域构建规则

确定产品的主要界面。用户最常看到什么？信息流？仪表盘？编辑器？对话？
构建 2 到 4 个代表该界面的重叠 UI 片段。一个通知产品可能显示一个带有徽章的铃铛图标、一个展开的通知面板和一个设置下拉菜单，所有元素都略微重叠并呈一定角度。
使用逼真的虚构数据：诸如“Sarah Chen”或“Marcus Rivera”之类的名字，诸如“$4,280.00”的金额，诸如“Jan 15, 2025”的日期，带有彩色徽章的状态（“Active”、“Pending”、“Completed”）。
包含微观细节：带有姓名缩写或渐变填充的头像圆圈、状态点、V形图标、开关、进度条、键盘快捷键 (⌘K)。
增加深度：微妙的 box-shadow、分层的 z-index、轻微的旋转 (1 到 3deg)、前景和背景元素之间的比例差异。

6. 技术要求

输出纯 HTML，使用 Tailwind 实用类进行样式设计，并通过 CDN 脚本提供 Tailwind。不定义自定义 CSS 框架，无构建步骤，无打包工具。

单个 HTML 文件，所有内容内联
通过 CDN 引入 Tailwind CSS：<script src="https://cdn.tailwindcss.com"></script>
通过 <link> 引入 Google Fonts
通过 CDN 引入 Lucide 图标：https://unpkg.com/lucide@latest，使用 lucide.createIcons() 初始化
无框架，无构建工具
仅限原生 JS，并且仅用于：视差鼠标追踪、滚动触发的动画、悬停交互
响应式：在 320px 到 1440px 及以上尺寸下均表现良好
所有 CSS 自定义属性在 <head> 中的 <style> 内定义
动画流畅、高性能。仅使用 transform 和 opacity，并谨慎使用 will-change。

7. 禁止事项

不要生成带有占位符文本的通用着陆页模板
不要在任何地方使用 Lorem Ipsum。每个文本元素都应感觉是刻意的。
不要创建无聊的居中文本加图片布局
不要添加过多会分散演示注意力的装饰
不要使用表情符号作为设计元素
不要将演示区域做成静态图片或平面模型。它应感觉是鲜活的。
不要包含实际功能或后端调用。它仅是视觉演示。
不要过度动画。运动应微妙且有目的。
不要使用陈词滥调的渐变背景（经典的紫色到蓝色渐变）

返回完整的 HTML 文件，不要有其他内容。

着陆页生成