mobile-h5-landing-page

name	mobile-h5-landing-page
description	当用户想设计、生成或修改手机端 H5 长图、课程详情页、平台赠课页、活动报名页、直播预约页、比赛征集页、产品介绍页时使用。适用于 750px 手机 H5 分段出图、页面结构设计、课程卖点提炼、移动端可读排版、内容风格匹配、KV 延展和 AI 出图提示词。

ai-design-skills-H5 落地页/详情页

版本：2.0

内部触发名：mobile-h5-landing-page。对外展示名可以使用 ai-design-skills-H5 落地页/详情页，但安装目录、frontmatter name 和调用名保持英文短横线写法，以保证 Codex 能稳定识别。

当用户要求设计、生成或修改手机端 H5、移动端长图、课程详情页、比赛征集页、活动报名页、直播预约页、产品介绍页、社群传播长图时，使用本 Skill。

核心目标：用尽量少的信息，让用户快速理解价值。是否引导下一步动作，取决于页面用途；平台内赠课详情页默认只做课程介绍，不强行加入领取、购买或开始学习指引。输出可以服务于 AI 出图、设计师执行、落地页策划或前端开发。

2.0 核心升级

本版本重点解决批量课程详情页生成中的几个问题：

• 不再固定蓝色科技风，根据课程内容选择配色和视觉气质。
• 信息少的课程优先拆成 2 段，信息多的课程才拆成 3 段。
• 平台内赠课详情页默认无 CTA、无“开始学习”、无“下一步”。
• 支持同一课程多风格试稿，保持结构不乱、内容不丢。
• 每个分段都是独立图片，方便后续按 750px 宽上下拼合。

先判断

开始前先判断：

1. 页面类型：比赛、课程、活动、直播、产品，还是其他。
2. 转化目标：报名、投稿、预约、留资、购买、咨询、试用。
3. 是否有现成 KV、参考图、品牌风格或视觉关键词。
4. 课程内容气质适合什么视觉风格和配色，不要默认全部使用蓝色科技感。
5. 内容信息量适合拆成 2 段还是 3 段，少内容优先 2 段。
6. 用户要的是方案、提示词、真实出图，还是可开发页面。
7. 用户是否在测试或更换风格；如果是，保持原内容结构，只更换视觉方向。

如果用户明确要“出图”，不要只给提示词；整理完完整提示词后调用图像生成工具。

核心原则

手机端 H5 不是 PC 网页缩小版，而是手机端纵向转化长图。

必须做到：

• 单列纵向排版。
• 模块上下排列。
• 按常见手机 H5 项目宽度 750px 进行设计思考。
• 模块内部可以有节奏地使用“图标 + 文字”左右关系，但整页必须保持纵向滚动。
• 一屏只讲一个重点。
• 大标题、清晰正文、强留白；正文必须适合手机阅读，不能是小字说明。
• CTA 根据页面用途决定；平台内赠课详情页默认不出现“开始学习”“立即领取”“扫码”等行动按钮。
• 信息从“看懂”走向“相信”，只有活动页、报名页、购买页、留资页才继续走向“行动”。
• 如果用户提供 KV，页面必须继承 KV 的视觉语言；如果没有 KV，必须根据课程内容选择合适风格，不要固定成蓝色科技风。

避免：

• 多栏复杂布局。
• 小字密集。
• 表格堆叠。
• 一堆 UI 卡片连续堆放。
• 网页式横向功能区、三列以上图标网格、复杂多栏图文分栏。
• 把太多图标、文字、箭头、按钮挤在同一横行里。
• 装饰元素压过内容。
• 做成普通网页截图。

移动端排版硬规则

生成手机端 H5 图时，页面整体必须是纵向长图，但模块内部要有节奏，不是机械地全部居中堆叠。

画布宽度

默认按真实 H5 设计项目思考：

宽度：750px
高度：根据内容分段

如果图像工具无法精确指定像素，也要在提示词中明确“750px 宽手机 H5 长图比例”和“适合后续拼合”。

内容较多时，不要强行生成一张超长图。应主动拆成 2-3 段。分段数由信息量决定，不要所有课程都固定 3 段。

2 段结构：第 1 段首屏 + 核心价值；第 2 段课程内容 + 适合人群 + 总结收尾
3 段结构：第 1 段首屏 + 核心价值；第 2 段课程内容 / 能力模块；第 3 段适合人群 / 信任补充 / 总结收尾

每段都按 750px 宽设计，段与段之间可以自然拼合。

分段出图执行规则

当用户要“直接出图”，且内容超过一屏或完整 H5 承载较多信息时，必须分段生成，而不是只生成一张完整长图。

执行方式：

如果拆 2 段：
第 1 次出图：第 1 段，共 2 段
第 2 次出图：第 2 段，共 2 段

如果拆 3 段：
第 1 次出图：第 1 段，共 3 段
第 2 次出图：第 2 段，共 3 段
第 3 次出图：第 3 段，共 3 段

每次调用图像生成工具都只生成一张单独的竖版 H5 分段图。

必须在每段提示词中明确：

• 这是第几段，共几段。
• 这是单独一张竖版 H5 图。
• 不要做三联图。
• 不要把多个段落放在同一张图里。
• 当前段适合与前后段上下拼合。
• 当前段的顶部 / 底部要预留自然衔接空间。
• 除非用户明确要求，不要在每个分段底部加入“下一步：...”这类导览文字。

分段内容分配：

第 1 段：首屏 Banner、核心价值、用户痛点或关键利益点。
第 2 段：主要课程内容、能力模块、规则流程、产品功能。
第 3 段：适合人群、信任补充、课程总结；只有转化页才加入行动提示和底部 CTA。

分段判断：

• 只有课程介绍 + 3-5 个核心点：优先拆成 2 段。
• 有 6 个以上模块、案例、流程、适合人群、总结等较多内容：优先拆成 3 段。
• 用户明确要求 2 段或 3 段时，优先遵循用户要求。
• 不要为了凑 3 段而制造多余页面。

所有分段必须保持同一套视觉语言：背景、主色、标题风格、图标风格、按钮风格一致。

平台内课程详情页 / 赠课详情页的额外规则：

• 默认不加“开始学习”“立即学习”“免费领取”“扫码领取”“购买”等按钮或行动文案。
• 每个分段底部只做视觉收束或自然留白，不写“下一步：...”导览文字。
• 最后一段可以用课程价值总结收尾，但不要强行放 CTA。
• 只有用户明确要求配置按钮、入口或转化动作时，才加入行动按钮。

Banner

首屏 Banner 禁止做成网页式左右分栏。

优先使用：

视觉氛围 / 主视觉
主标题
副标题
一句价值说明
主按钮

允许居中布局或上下布局。标题、说明、按钮必须形成竖向阅读路径。

避免：

左边文字 + 右边大图
左边按钮 + 右边箭头
多列信息并排

图标和能力点

图标和文字必须有明确阅读关系，不能做成网页式功能网格。

允许两种方式：

方式 A：上下关系，适合小能力点。

图标
能力标题
一句短说明

方式 B：左右交替，适合手机 H5 中段内容模块。

第 1 组：左图标 / 右文字
第 2 组：左文字 / 右图标
第 3 组：左图标 / 右文字

左右交替必须服务纵向节奏，每一组都仍然是单独的纵向模块。不要把多组能力点压成同一行，不要做三列以上图标网格。

正文可读性

手机 H5 的正文要比网页正文更大、更短、更醒目。

要求：

• 主标题必须是全页最大文字。
• 分区标题明显大于正文。
• 正文使用短句，宁可换行，不要缩小成密集小字。
• 每个正文块控制在 1-3 行。
• 重要关键词可以加粗、放大或独立成行。
• 如果正文放不下，优先分段出图，不要牺牲字号。

CTA

CTA 只在需要转化动作的页面中出现，例如报名页、活动页、购买页、留资页、投稿页。平台内赠课详情页默认不加 CTA。

推荐：

行动提示
按钮
辅助图标 / 上升箭头

不要把“开始学习”和上升箭头做成左右并排的网页按钮。箭头、图标、按钮可以上下排列或居中叠放，保持移动端 H5 的纵向节奏。

如果页面用途是平台内课程详情页，并且用户没有明确要求按钮，禁止生成“开始学习”“立即学习”“下一步”等指引文案。

视觉风格选择规则

不要把所有课程都做成蓝色或科技感。没有用户指定风格时，应根据课程主题选择配色、图形语言和氛围。

可选方向：

AI / 数字人 / 自动化：未来感、银白、深蓝、青紫光效、全息界面。
自媒体写作 / IP 打造：温暖创作感、米白、墨绿、橙色点缀、纸张和编辑器元素。
商业策划 / 运营增长：专业商务感、深绿、黑金、灰白、数据图表和增长线。
短视频 / 直播 / 内容创作：活力视觉感、紫红、橙黄、深色舞台光、视频帧和弹幕元素。
教育培训 / 职业技能：清爽可信感、白底、蓝绿、浅灰、模块化学习路径。
女性成长 / 副业入门：柔和明亮、珊瑚粉、奶白、浅紫、轻插画和生活化场景。
财商 / 商业变现：稳重价值感、墨绿、金色、米白、账本和收益曲线。

风格选择要求：

• 每门课必须先判断内容气质，再选择视觉风格。
• 同一批课程不要全部使用同一套蓝色科技模板。
• 配色要服务内容理解，而不是为了炫技。
• 平台内课程详情页可以更克制，不必每张都强海报化。
• 如果用户提供品牌色或 KV，优先继承；没有时才自主选择。

多风格试稿规则

当用户说“换个风格”“再试一种风格”“不要这种配色”“风格不对”时，视为同一课程的风格试稿。

执行要求：

• 保持课程名称、核心文案、分段数量和内容结构基本不变。
• 只更换视觉风格、配色、图形语言、材质和氛围。
• 如果上一版是深色科技感，下一版应明显换方向，例如温暖创作感、杂志感、白底教育感、黑金商务感等。
• 如果上一版是奶油手绘风，下一版应明显换方向，例如复古杂志、专业商务、极简白底、潮流拼贴等。
• 每次换风格时，在提示词中写清“换新风格：...”和“避免上一版风格：...”。
• 换风格时仍然遵守平台内赠课详情页规则：无按钮、无“下一步”、无扫码购买，除非用户明确要求。
• 换风格时仍然按原本判断的 2 段或 3 段输出，不要因为换风格改变分段数。

可用于同一课程的风格试稿方向：

温暖创作感：奶油白、墨绿、珊瑚橙、纸张、便签、编辑器。
复古杂志感：黑白高对比、复古红、粗体排版、贴纸、纹理。
专业商务感：墨绿、黑金、灰白、数据图表、理性分区。
清爽教育感：白底、蓝绿、浅灰、学习路径、轻量图标。
潮流内容感：紫红、橙黄、视频帧、弹幕、拼贴、强标题。
未来科技感：深蓝、银白、青紫光效、全息屏、数据网格。
生活方式感：浅色背景、柔和插画、日常场景、轻盈标签。

页面路径

默认路径：

首屏吸引 -> 价值说明 -> 内容展开 -> 信任建立 -> 自然收尾

内容多时可以拆成三段；内容少时优先拆成两段：

两段：首屏 + 核心价值 / 内容模块 + 总结收尾
三段：首屏 + 核心价值 / 内容 + 规则 / 大纲 / 流程 / 信任 + 总结收尾

每段最多承载 3-4 个核心模块。

尺寸建议

• 首屏海报：9:16。
• 简短 H5 预览：1:2。
• 标准 H5 项目宽度：750px。
• 单段 H5 长图：750 x 1600 至 750 x 2200。
• 完整 H5 长图：优先拆成多段 750px 宽图片，后续拼合。
• 内容复杂时：拆成 2-3 张，不要硬塞进一张图，也不要为了塞内容缩小正文。

页面结构

比赛类

用于比赛征集页、投稿页、作品评选页。

1. 首屏 Banner
2. 赛事亮点
3. 赛道介绍
4. 投稿要求
5. 奖项设置
6. 赛程安排
7. 评审标准
8. 评委 / 背书模块
9. 报名 / 投稿入口

执行要点：

• 赛事亮点控制在 3 个以内。
• 赛道介绍上下排列，不做复杂左右并列。
• 投稿要求图标化、关键词化。
• 底部必须有二维码或明确投稿按钮。

课程类

先判断课程页类型：平台内赠课详情页、普通课程介绍页、招生转化页。不同类型的底部处理不同。

平台内赠课详情页路径：

课程定位 -> 适合人群 -> 内容模块 -> 学完收获 -> 自然收尾

要求：

• 不出现购买、报名、扫码、领取、开始学习等行动指引。
• 每个分段底部不写“下一步：...”。
• 最后一段用课程价值或能力总结收尾。

招生转化页路径：

痛点唤醒 -> 课程方案 -> 内容模块 -> 学完结果 -> 老师背书 -> 学员作品 -> 报名转化

课程页通常要回答：

我为什么要学？
我能不能学会？
学完能做什么？
谁来教？
有没有案例？
是否需要行动入口？如果是平台内赠课详情页，默认不需要。

标准结构：

1. 首屏 Banner
2. 课程核心卖点
3. 适合人群
4. 课程大纲
5. 学完收获
6. 老师介绍
7. 学员案例 / 作品展示
8. 上课安排
9. 总结收尾 / 报名入口

平台内赠课详情页将第 9 项改为“课程价值总结”，不要放报名入口。

活动 / 直播类

1. 首屏 Banner
2. 活动亮点
3. 嘉宾介绍
4. 活动流程
5. 你将收获
6. 适合人群
7. 参与方式
8. 预约入口

执行要点：

• 首屏突出主题、时间和 CTA。
• 嘉宾信息短而有信任感。
• 活动流程清楚即可，不要写成会议手册。

产品类

1. 首屏 Banner
2. 用户痛点
3. 产品价值
4. 核心功能
5. 使用场景
6. 案例展示
7. 服务保障
8. 体验 / 咨询入口

执行要点：

• 痛点直接。
• 功能图标化。
• 使用场景具体。
• CTA 指向试用、咨询、购买或留资。

KV 延展规则

如果用户提供 KV、主视觉或参考图，不要重新设计一套风格，而是做页面化延展。

必须继承：

• 主色系。
• 主标题气质。
• 背景氛围。
• 吉祥物 / IP / 主视觉元素。
• 核心视觉符号。
• 按钮和 CTA 风格。仅当页面需要 CTA 时继承。

节奏：

首屏强 KV
中段弱氛围
底部自然收尾 / 转化页底部强 CTA

避免每一段都重复完整 KV，避免背景光效和装饰影响阅读。

文案规则

• 少文字，留结论。
• 用关键词和短句替代长段说明。
• 每个模块尽量不超过 3 行核心信息。
• 价值点要讲结果，不讲空概念。
• CTA 只在页面需要行动入口时出现，并且要明确动作。

平台内赠课详情页默认禁止：

开始学习
立即学习
下一步
下一节
扫码领取
免费领取
立即报名
购买

推荐 CTA：

立即报名
扫码投稿
立即预约
领取资料
咨询课程顾问
申请试用

避免：

了解更多
查看更多
点击这里

用户要方案时的输出

输出：

1. 页面结构表。
2. 每屏详细说明。
3. 视觉设计方向。
4. CTA / 收尾建议。
5. 是否需要分段生成。
6. 可直接用于 AI 出图的提示词。

结构表格式：

| 屏数 | 模块名称 | 核心作用 | 内容建议 | 视觉重点 | CTA |
|---|---|---|---|---|---|
| 01 | 首屏 Banner | 抓人 | 主标题 / 副标题 / CTA | KV 主视觉 | 立即报名 |

如果是平台内赠课详情页，CTA 列填写“-”或“无”，不要自动补“开始学习”。

每屏详细说明格式：

模块名称：
核心作用：
页面内容：
视觉建议：
注意事项：

用户要出图时的执行

先整理完整出图提示词，再调用图像生成工具。

出图提示词必须包含：

图片类型：
分段信息：
画面比例：
画布宽度：
页面类型：
风格选择依据：
风格版本说明：
整体风格：
模块顺序：
画面文字：
拼接要求：
视觉重点：
排版要求：
避免事项：

提示词要求：

• 明确生成“手机端 H5 长图落地页预览图”。
• 明确 750px 宽手机 H5 项目设计；如果内容多，分段生成，方便后续拼合。
• 根据课程内容选择视觉风格和配色，不要默认蓝色科技感。
• 明确信息量为什么拆成 2 段或 3 段；内容少时优先 2 段。
• 如果是换风格测试，保持原分段数量和内容结构，明确新风格与需要避免的旧风格。
• 分段生成时，每次提示词都必须写清“第 X 段，共 X 段”，且强调“只生成当前这一段”。
• 分段生成时，禁止生成三联图，禁止把 2-3 段放在同一张图里。
• 分段之间必须保持视觉连续，方便用户后期上下拼合。
• 页面整体单列纵向结构。
• 首屏要强视觉、强标题；是否有 CTA 取决于页面用途。
• 中段信息清楚可读。
• 正文字号要适合手机阅读，不能使用密集小字。
• 图标和文字可以使用左右交替节奏：左图右文、左文右图交替出现。
• 平台内赠课详情页不要生成“开始学习”“下一步：...”等指引字样；每个分段底部只做自然留白或视觉收束。
• 只有报名、投稿、预约、留资、购买类页面，底部才需要二维码位或明确 CTA。
• 文案要短，避免密集小字。
• 内容多时主动拆成 2-3 段图。

质量检查

生成或交付前检查：

• 首屏是否 3 秒内能看懂？
• 每个模块是否只讲一个重点？
• 是否是手机端纵向结构？
• 是否按 750px 手机 H5 宽度思考？
• 如果内容多，是否拆成多段而不是压缩到一张？
• 每一段是否都是独立图片，而不是三联图或拼在同一张？
• 分段之间是否能自然上下拼合？
• 正文是否足够大，手机上能读清？
• 图标和文字是否有节奏，而不是机械堆叠或网页式横排？
• 页面是否真的需要 CTA？如果是平台内赠课详情页，是否去掉了“开始学习”“下一步”等指引？
• 是否过度卡片化？
• 左右是否有明显留白？
• 是否继承了 KV？
• 是否像正式 H5，而不是 PC 网页截图？
• 如果是在换风格，是否真的与上一版拉开了视觉差异？

一句话原则

手机端 H5 不是把信息全部放上去，而是用清晰节奏，把用户一步步带到行动入口。