whicencer/product-landing

产品着陆页

为单个产品构建一页式营销站点，保持一致的视觉风格。 references/ 中的章节文件包含详细规则；本文件包含工作流及所有章节共享的规则。

工作流

步骤 1 — 询问（仅一条消息，不写任何代码之前）

以一条消息收集以下阻塞信息。使用用户的语言提问。

• 跳过用户请求中已提供的每一项。
• 如果什么都没有缺失，则完全跳过此步骤。
• 为每一项提供一个默认值，以便用户简要回答或跳过。

项目	跳过的默认值
产品名称 + 一句话描述其功能	—（必填，不可跳过）
4–8 个关键功能	从产品描述中推导
主要行动：按钮标签 + 链接	“开始使用” → #
定价：方案、价格、货币 — 或“无定价章节”	无定价章节
品牌色	#229ED9

不要询问法律名称、地址、联系方式或法律页面链接——请使用占位符（见步骤 5）。 不要进行后续轮次的询问。用户回答后，直接构建。

步骤 2 — 规划

在内部决定，不询问：

• 功能展示模式（agent / command / search / task）——参见 references/features.md
• 每个功能 1–3 个示例，3–4 步“如何工作”步骤，所有标题和文案。

步骤 3 — 阅读章节规则

在构建每个章节之前，按页面顺序阅读对应文件：

1. references/hero.md — 导航栏 + 英雄区
2. references/features.md — 功能展示 + 表格（使用 assets/feature-showcase.js）
3. references/how-it-works.md
4. references/pricing.md — 如果无定价章节则跳过
5. references/final-cta.md
6. references/footer.md

步骤 4 — 构建

输出以下文件结构（除非用户要求使用框架）：

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html — 仅包含标记。没有 <style> 块，没有 style="" 属性（除非脚本设置它们），没有内联 JS。唯一允许的内联 <script> 是功能章节的 JSON 示例块。

• css/styles.css — 所有样式。以 :root 上的设计令牌开始，然后按页面顺序排列各章节，每个章节以注释头分隔（/* ===== 英雄区 ===== */）。

• js/main.js — 由你编写的页面行为（导航栏状态、移动菜单、页脚年份等）。

• js/feature-showcase.js — 逐字节复制 assets/feature-showcase.js。切勿将其合并到 main.js 中或进行编辑。

• 按以下方式包含文件：

  • 在 <head> 中添加 <link rel="stylesheet" href="css/styles.css">；
  • 在 <head> 末尾添加 <script src="js/feature-showcase.js" defer></script> 和 <script src="js/main.js" defer></script>。

• 仅使用普通脚本 — 没有 type="module"，没有 import。页面必须能直接从磁盘打开（file://）正常工作。

• 仅使用相对路径，以便文件夹可以直接上传到任何主机。

步骤 5 — 检查并报告

1. 逐项检查每个章节文件中的清单以及下面的全局清单。修正任何问题。
2. 回复用户一个简短列表，列出所有需要他们填写的占位符（法律名称、地址、联系方式、法律页面链接、# 链接、$XX 价格）。

全局规则

事实

切勿捏造关于业务的事实：价格、方案、数字、客户名称、推荐语、法律名称、地址、邮箱、社交媒体账号、URL。使用明显的占位符，并在步骤 5 中列出。

设计令牌

在 :root 上定义为 CSS 变量，并仅使用它们：

:root {
  --brand: #229ED9;              /* 由用户品牌色替换 */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* 卡片、面板 */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• 仅浅色主题。一个强调色（--brand）；其他所有颜色为黑色、灰色和白色。
• 字体：来自 Google Fonts 的 Inter（字重 400, 500, 600, 700, 800）。
• 图标：通过 https://unpkg.com/@phosphor-icons/[email protected]（固定版本）使用 Phosphor Icons。

章节标题（由功能、如何工作、定价共享）

• H2：clamp(32px, 5vw, 48px)，字重 800，letter-spacing: -0.03em，line-height: 1.05，--text，左对齐。
• 可选的副标题：18px，常规，--text-muted，最大宽度约 540px，下方 12px。

间距与节奏

• 内容容器：max-width: var(--container)，两侧内边距 24px（移动端 16px）。
• 章节间垂直间距：clamp(80px, 12vw, 140px)。
• 交替使用厚重和轻盈的章节。永远不要连续放置两个交互式章节。

文案

• 朴实、具体、人性化。短句。真实的专有名词和数字。
• 禁用词汇：无缝、强大、革命性、解锁、超强赋能、轻松、尖端。
• 所有页面文案使用用户要求的语言（默认：产品描述的语言）。

动效

• 仅轻微动效：悬停上浮，150–250ms 过渡，可选择一次性的滚动渐入。
• 所有动效均遵循 prefers-reduced-motion。
• 页面上唯一的循环动画是英雄区品牌标记脉冲（见 references/hero.md）。没有其他无限动画。

全局清单

• 仅包含步骤 3 中列出的章节，并按该顺序排列。
• 仅使用令牌中的颜色；一种强调色。
• 没有虚构的商业事实；所有占位符已向用户报告。
• 英雄区 CTA、导航栏 CTA 和最终 CTA 是同一个操作。
• 在 375px 宽度下无水平滚动；所有内容在移动设备上可读。
• 键盘与屏幕阅读器基础：真实的按钮、alt 文本、可见的焦点状态。
• 每个内联 <script> 仅在其真实关闭标签处结束：JS 代码、注释或字符串中不允许出现 </script。
• 文件：index.html、css/styles.css、js/main.js、js/feature-showcase.js——没有其他文件，没有内联 CSS/JS。
• js/feature-showcase.js 与 assets/feature-showcase.js 完全相同。
• JSON 示例块不包含 </script 文本。
• 页面在直接从磁盘打开 index.html 时正常工作。