| 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 宽上下拼合。
先判断
开始前先判断：
- 页面类型：比赛、课程、活动、直播、产品，还是其他。
- 转化目标：报名、投稿、预约、留资、购买、咨询、试用。
- 是否有现成 KV、参考图、品牌风格或视觉关键词。
- 课程内容气质适合什么视觉风格和配色，不要默认全部使用蓝色科技感。
- 内容信息量适合拆成 2 段还是 3 段，少内容优先 2 段。
- 用户要的是方案、提示词、真实出图，还是可开发页面。
- 用户是否在测试或更换风格；如果是，保持原内容结构，只更换视觉方向。
如果用户明确要“出图”，不要只给提示词；整理完完整提示词后调用图像生成工具。
核心原则
手机端 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：
立即报名
扫码投稿
立即预约
领取资料
咨询课程顾问
申请试用
避免：
了解更多
查看更多
点击这里
用户要方案时的输出
输出：
- 页面结构表。
- 每屏详细说明。
- 视觉设计方向。
- CTA / 收尾建议。
- 是否需要分段生成。
- 可直接用于 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 不是把信息全部放上去，而是用清晰节奏，把用户一步步带到行动入口。
