| name | landing-page-builder |
| description | Landing page 内容策划与开发。通过参考网址或文本素材，分析提炼内容，规划页面模块结构， 用户确认后再进行设计开发。支持新建页面和修改现有页面两种模式。 强调降低 AI 味、克制用色、视频类产品自带视频展示模块。 触发词：「改 landing page」「优化首页」「重做落地页」「landing page redesign」 「redesign homepage」「rebuild landing」「修改首页」「首页改版」「落地页开发」 「模型落地页」「model landing page」「新建落地页」「add landing page」。
|
Landing Page Builder
根据参考素材策划 landing page 内容结构，用户确认后再设计开发。
支持新建页面和修改现有页面两种模式。
编辑范围（硬性限制）
允许操作
- 创建/修改
src/components/landing/ 下的组件
- 创建/修改
src/app/[locale]/(marketing)/ 下的页面文件
- 更新
src/messages/en.json 和 src/messages/zh.json 的 i18n 内容
- 更新
src/styles/globals.css 的样式（仅新增动画或微调）
- 在
public/ 下添加占位图片
禁止操作
- 不改
src/lib/auth/、src/services/、src/payment/ 等业务逻辑
- 不改
src/db/、src/api/ 等后端代码
- 不改
src/components/video-generator/ 的内部实现（只引用）
- 不改
src/middleware.ts、src/config/ 下的非 i18n 配置
- 不改环境变量或
.env 文件
工作流程 (5 步)
Step 0: 判断模式
根据用户意图判断：
新建页面 — 用户要创建一个不存在的落地页（如模型专属页 /sora）
修改页面 — 用户要优化/重做已有的落地页（如首页 /）
判断依据：
- 用户提到「新建」「新增」「创建」「add」「create」→ 新建模式
- 用户提到「改」「优化」「重做」「redesign」→ 修改模式
- 不确定时主动询问用户
Step 1: 收集参考素材 — 需要用户输入
用户提供以下至少一种输入：
| 输入方式 | 说明 |
|---|
| 参考网址 (1-5 个) | 用 WebFetch 或 baoyu-url-to-markdown 抓取内容 |
| Markdown/文本 | 直接提供产品描述、功能、FAQ 等 |
同时自动执行：
- 读取
src/styles/globals.css 获取当前主题色
- 用通俗语言告知用户当前配色（如「深绿色」「靛蓝色」「珊瑚红」），不要只给色号
- 除非用户指定新配色，否则沿用现有配色
修改模式额外操作：
- 读取现有页面的所有组件代码（
src/components/landing/*.tsx）
- 读取现有 i18n 消息，理解当前页面结构和内容
- 对比参考素材，识别需要调整的部分
从参考素材中提取：
- 页面模块排列顺序
- 文案风格和调性
- 核心卖点和价值主张
- 功能列表及描述
- 社会证明（客户评价、数据、Logo 墙）
- CTA 策略（位置、文案、频率）
Step 2: 输出内容编排方案 — 阻塞等待用户确认
基于模式不同，输出方案的侧重点不同：
新建模式方案
## Landing Page 内容方案（新建）
### 当前配色
- 主色：[用通俗颜色名描述，如「深绿色」]
- 如需更换请告知，否则沿用现有配色
### 页面信息
- 路由：[如 /sora、/features/text-to-video]
- 页面类型：首页 / 模型专属页 / 其他落地页
### 页面结构
1. Header — [导航项, CTA 按钮]
2. Hero — [主标题, 副标题, 主 CTA, 是否含 VideoGeneratorInput]
3. Features — [3-4 个功能卡片]
4. Showcase — [视频展示区域]
...
### 各模块详细内容
[中英双语文案]
### 设计方向
- 风格 / 主色 / 核心视觉 / 动画级别
修改模式方案
## Landing Page 修改方案
### 当前配色
- 主色：[通俗颜色名]
### 现有页面结构
[列出当前所有 section 及其组件文件]
### 修改计划
| 模块 | 操作 | 变更说明 |
|------|------|----------|
| Hero | 保留 | 仅更新文案 |
| Features | 重写 | 从 4 栏改为 3 栏，新增参考生成 |
| Showcase | 新增 | 添加视频展示区域 |
| FAQ | 微调 | 更新 2 个问题 |
### 新增/修改的文案内容
[中英双语，仅列出变更部分]
### 设计调整
- [列出具体的设计变更]
必须等用户确认后才进入 Step 3。
Step 3: 设计系统生成 — 自动执行
- 如有 ui-ux-pro-max skill，运行设计系统生成器：
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<产品关键词>" --design-system -p "项目名"
-
读取 src/styles/globals.css 确保配色一致
-
读取 docs/spec/COMPONENT_SPECIFICATION.md 了解可用组件
-
加载设计原则：
→ references/design-principles.md
Step 4: 开发实现 — 自动执行
加载详细工作流：
→ references/workflow-steps.md
新建模式：先创建页面骨架（路由文件 + 空组件 + i18n key），再填充内容
修改模式：基于现有代码逐个组件修改，保留未变更的部分
Step 5: 验证与交付 — 自动执行
加载验收清单：
→ references/checklist.md
输出交付报告。
Hero 区域 VideoGeneratorInput 组件规则
首页 Hero
默认包含 VideoGeneratorInput 组件，除非用户明确要求替换。
import { VideoGeneratorInput } from "@/components/video-generator";
<VideoGeneratorInput credits={credits} onSubmit={handleGenerate} />
模型专属落地页
Hero 包含 VideoGeneratorInput，通过 defaults 设置默认模型：
<VideoGeneratorInput
defaults={{ generationType: "video", videoModel: "sora-2" }}
credits={credits}
onSubmit={handleGenerate}
/>
可通过 config 限制模型列表：
<VideoGeneratorInput
config={{ videoModels: [currentModel] }}
defaults={{ videoModel: currentModel.id }}
credits={credits}
onSubmit={handleGenerate}
/>
其他落地页
不强制包含 VideoGeneratorInput，使用普通 Hero 设计。
配色策略
- 默认沿用现有配色，Step 1 时用通俗语言主动告知用户
- 所有组件使用语义 token（
bg-primary、text-primary-foreground 等），不硬编码色值
- 换色参考 videofly-init skill 的 Step 3 主题配色流程
核心设计约束
降低 AI 味道（强制）
- 同一模块只用 1 种主色，禁止跨色系渐变（如 blue-to-purple）
- 同一页面最多 1 种强调色
- 标题用纯色，不用渐变文字
- 副标题/描述统一用
text-muted-foreground
- 每个区块最多 3 种视觉效果
占位资源标准
- 视频：缩略图 + Play 按钮，
videoUrl: "" 留空，交付时提示替换
- 图片：使用
https://picsum.photos/seed/<slug>/宽/高 确定性占位图
- seed 命名规则：
<页面slug>-<section名>，如 sora-hero、sora-feature-1
- 不要用随机图片，确保每次构建结果一致
技术规范
- 所有文案通过 next-intl 国际化
- 使用语义色彩 token
- 支持 light/dark 双模式
- 编辑前必须先读取文件
