| 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 双模式
- 编辑前必须先读取文件