营销页面

初学者演练

先决条件：阅读下面的两个初学者指南，完成 Web 本地设置，并在编辑器的根目录中打开此 monorepo。网页设置属于apps/web-tanstack/.env.local； TanStack Start不读取根.env。默认fake模式下的/dashboard是无数据库演示； /auth 需要迁移数据库。

简而言之：工作区是一个团队的单独用户、数据和设置。服务器是可信后端；让提供商密钥远离浏览器和电话代码。迁移是创建或更新表的版本化数据库更改。人工智能模型是回答的引擎；型号目录是服务器上可用型号 ID 和价格的列表。提供商是一种外部服务，例如人工智能、电子邮件或计费服务。权利是允许工作区使用某项功能的授权。 Webhook 是一个服务发送到另一个服务的 URL 的消息。

1. 打开 packages/web-core/src/marketing/site-config.ts 并将产品名称、标语、导航标签/URL 和支持地址更改为您拥有的值。

2. 替换 apps/web-tanstack/public/og.png 并更新 packages/web-core/src/marketing/seo.tsx 中的替代文本和尺寸作为一项更改。

3.刷新首页、FAQ、页脚、社交预览。如果仍然存在旧文本，请在发布之前在此存储库中搜索旧名称。

对于自定义代码，请从提供的 prompts/README.md 开始，然后复制最接近的提示：对于应用程序屏幕为 prompts/new-app-screen.md，对于公共页面为 prompts/new-landing-page.md。对于服务器、数据库或提供商工作，请为您的编码代理提供本指南的任务，并要求其读取 AGENTS.md、.ai/PROJECT_CONTEXT.md 和匹配的 .ai/ 镜像；检查此处指定的确切源文件；列出文件并在编辑前进行检查；保留工作区所有权和仅限服务器的机密；并向您展示差异。告诉它您想要的行为、输入和输出字段、允许的角色、预期的成功和错误以及测试帐户、提供程序或设备。使用样本值；永远不要粘贴真正的秘密。

• 开始之前
• 终端基础知识
• 网络本地设置
• 座席提示和项目内存

更新站点配置

packages/web-core/src/marketing/site-config.ts 拥有品牌文案、导航/页脚链接、FAQ 和可选的存储库/文档目的地。在将产品名称分散到各个组件之前更新此内容。该套件自己的 chrome 使用此配置；可复制的镀铬块接受产品道具。

一起替换资产族

共享的四块标记具有白色的左上/右下和灰色的右上/左下块，具有细轮廓。保持标题标记透明；应用程序图标/图标使用圆形黑色背景。衍生产品可以一起替换该标记及其关联的应用程序/桌面资产。

共享公共社交卡为/og.png；使用尺寸和替代文本更新 marketing/seo.tsx 中的描述符。博客文章卡使用单独的栅格化 OG 路由（src/framework/og.ts）。

检查每个公共表面

验证页眉/页脚、联系人、FAQ、法律页面、本地化的家庭副本、标题和社交卡。选择您产品的营销主题模式，并仅发送有效的支持/联系链接。

• 产品款式
• 法律页面脚手架
• 元数据和社交卡

安装与配置

营销界面由类型化数据驱动而非硬编码 JSX —— hero、功能分区、定价、FAQ、更新日志、案例展示、联系与法律页面都从站点配置与内容文件读取文案和结构。

MARKETING_THEME_MODE（src/theme/marketing-theme.ts）决定营销站是保持套件锁定的深色品牌、继承访客的主题包，还是钉住某个特定包。衍生产品应选择自己的模式。

src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"

实现流程

优先用 block 库组合页面；缺模式时以同样的纯令牌风格写新 block 并注册到 src/kit/blocks.ts。营销组件不要进入产品界面 —— 两套外壳系统保持分离。

本地化文案走词典与 site-content 叠加层；在那里加键，而不是按语言分叉组件。

验证与排障

在 320px 与桌面宽度下检查营销页，键盘焦点可见，至少各用一个浅色与一个深色包，并开启 reduced motion。若营销文案声称某个能力，确保链接的文档页存在。