القائمة
当用户想设计、生成或修改手机端 H5 长图、课程详情页、平台赠课页、活动报名页、直播预约页、比赛征集页、产品介绍页时使用。适用于 750px 手机 H5 分段出图、页面结构设计、课程卖点提炼、移动端可读排版、内容风格匹配、KV 延展和 AI 出图提示词。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | mobile-h5-landing-page |
| description | 当用户想设计、生成或修改手机端 H5 长图、课程详情页、平台赠课页、活动报名页、直播预约页、比赛征集页、产品介绍页时使用。适用于 750px 手机 H5 分段出图、页面结构设计、课程卖点提炼、移动端可读排版、内容风格匹配、KV 延展和 AI 出图提示词。 |
版本：2.0
内部触发名：mobile-h5-landing-page。对外展示名可以使用 ai-design-skills-H5 落地页/详情页，但安装目录、frontmatter name 和调用名保持英文短横线写法，以保证 Codex 能稳定识别。
当用户要求设计、生成或修改手机端 H5、移动端长图、课程详情页、比赛征集页、活动报名页、直播预约页、产品介绍页、社群传播长图时，使用本 Skill。
核心目标：用尽量少的信息，让用户快速理解价值。是否引导下一步动作，取决于页面用途；平台内赠课详情页默认只做课程介绍，不强行加入领取、购买或开始学习指引。输出可以服务于 AI 出图、设计师执行、落地页策划或前端开发。
本版本重点解决批量课程详情页生成中的几个问题：
开始前先判断：
如果用户明确要“出图”，不要只给提示词；整理完完整提示词后调用图像生成工具。
手机端 H5 不是 PC 网页缩小版，而是手机端纵向转化长图。
必须做到：
避免：
生成手机端 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 分段图。
必须在每段提示词中明确：
分段内容分配：
第 1 段：首屏 Banner、核心价值、用户痛点或关键利益点。
第 2 段：主要课程内容、能力模块、规则流程、产品功能。
第 3 段：适合人群、信任补充、课程总结；只有转化页才加入行动提示和底部 CTA。
分段判断：
所有分段必须保持同一套视觉语言：背景、主色、标题风格、图标风格、按钮风格一致。
平台内课程详情页 / 赠课详情页的额外规则：
首屏 Banner 禁止做成网页式左右分栏。
优先使用：
视觉氛围 / 主视觉
主标题
副标题
一句价值说明
主按钮
允许居中布局或上下布局。标题、说明、按钮必须形成竖向阅读路径。
避免：
左边文字 + 右边大图
左边按钮 + 右边箭头
多列信息并排
图标和文字必须有明确阅读关系，不能做成网页式功能网格。
允许两种方式：
方式 A：上下关系，适合小能力点。
图标
能力标题
一句短说明
方式 B：左右交替，适合手机 H5 中段内容模块。
第 1 组：左图标 / 右文字
第 2 组：左文字 / 右图标
第 3 组：左图标 / 右文字
左右交替必须服务纵向节奏，每一组都仍然是单独的纵向模块。不要把多组能力点压成同一行，不要做三列以上图标网格。
手机 H5 的正文要比网页正文更大、更短、更醒目。
要求：
CTA 只在需要转化动作的页面中出现，例如报名页、活动页、购买页、留资页、投稿页。平台内赠课详情页默认不加 CTA。
推荐：
行动提示
按钮
辅助图标 / 上升箭头
不要把“开始学习”和上升箭头做成左右并排的网页按钮。箭头、图标、按钮可以上下排列或居中叠放，保持移动端 H5 的纵向节奏。
如果页面用途是平台内课程详情页，并且用户没有明确要求按钮，禁止生成“开始学习”“立即学习”“下一步”等指引文案。
不要把所有课程都做成蓝色或科技感。没有用户指定风格时，应根据课程主题选择配色、图形语言和氛围。
可选方向：
AI / 数字人 / 自动化：未来感、银白、深蓝、青紫光效、全息界面。
自媒体写作 / IP 打造：温暖创作感、米白、墨绿、橙色点缀、纸张和编辑器元素。
商业策划 / 运营增长：专业商务感、深绿、黑金、灰白、数据图表和增长线。
短视频 / 直播 / 内容创作：活力视觉感、紫红、橙黄、深色舞台光、视频帧和弹幕元素。
教育培训 / 职业技能：清爽可信感、白底、蓝绿、浅灰、模块化学习路径。
女性成长 / 副业入门：柔和明亮、珊瑚粉、奶白、浅紫、轻插画和生活化场景。
财商 / 商业变现：稳重价值感、墨绿、金色、米白、账本和收益曲线。
风格选择要求：
当用户说“换个风格”“再试一种风格”“不要这种配色”“风格不对”时，视为同一课程的风格试稿。
执行要求：
可用于同一课程的风格试稿方向：
温暖创作感：奶油白、墨绿、珊瑚橙、纸张、便签、编辑器。
复古杂志感：黑白高对比、复古红、粗体排版、贴纸、纹理。
专业商务感：墨绿、黑金、灰白、数据图表、理性分区。
清爽教育感：白底、蓝绿、浅灰、学习路径、轻量图标。
潮流内容感：紫红、橙黄、视频帧、弹幕、拼贴、强标题。
未来科技感：深蓝、银白、青紫光效、全息屏、数据网格。
生活方式感：浅色背景、柔和插画、日常场景、轻盈标签。
默认路径：
首屏吸引 -> 价值说明 -> 内容展开 -> 信任建立 -> 自然收尾
内容多时可以拆成三段；内容少时优先拆成两段：
两段：首屏 + 核心价值 / 内容模块 + 总结收尾
三段：首屏 + 核心价值 / 内容 + 规则 / 大纲 / 流程 / 信任 + 总结收尾
每段最多承载 3-4 个核心模块。
用于比赛征集页、投稿页、作品评选页。
1. 首屏 Banner
2. 赛事亮点
3. 赛道介绍
4. 投稿要求
5. 奖项设置
6. 赛程安排
7. 评审标准
8. 评委 / 背书模块
9. 报名 / 投稿入口
执行要点：
先判断课程页类型：平台内赠课详情页、普通课程介绍页、招生转化页。不同类型的底部处理不同。
平台内赠课详情页路径：
课程定位 -> 适合人群 -> 内容模块 -> 学完收获 -> 自然收尾
要求：
招生转化页路径：
痛点唤醒 -> 课程方案 -> 内容模块 -> 学完结果 -> 老师背书 -> 学员作品 -> 报名转化
课程页通常要回答：
我为什么要学？
我能不能学会？
学完能做什么？
谁来教？
有没有案例？
是否需要行动入口？如果是平台内赠课详情页，默认不需要。
标准结构：
1. 首屏 Banner
2. 课程核心卖点
3. 适合人群
4. 课程大纲
5. 学完收获
6. 老师介绍
7. 学员案例 / 作品展示
8. 上课安排
9. 总结收尾 / 报名入口
平台内赠课详情页将第 9 项改为“课程价值总结”，不要放报名入口。
1. 首屏 Banner
2. 活动亮点
3. 嘉宾介绍
4. 活动流程
5. 你将收获
6. 适合人群
7. 参与方式
8. 预约入口
执行要点：
1. 首屏 Banner
2. 用户痛点
3. 产品价值
4. 核心功能
5. 使用场景
6. 案例展示
7. 服务保障
8. 体验 / 咨询入口
执行要点：
如果用户提供 KV、主视觉或参考图，不要重新设计一套风格，而是做页面化延展。
必须继承：
节奏：
首屏强 KV
中段弱氛围
底部自然收尾 / 转化页底部强 CTA
避免每一段都重复完整 KV，避免背景光效和装饰影响阅读。
平台内赠课详情页默认禁止：
开始学习
立即学习
下一步
下一节
扫码领取
免费领取
立即报名
购买
推荐 CTA：
立即报名
扫码投稿
立即预约
领取资料
咨询课程顾问
申请试用
避免：
了解更多
查看更多
点击这里
输出：
结构表格式：
| 屏数 | 模块名称 | 核心作用 | 内容建议 | 视觉重点 | CTA |
|---|---|---|---|---|---|
| 01 | 首屏 Banner | 抓人 | 主标题 / 副标题 / CTA | KV 主视觉 | 立即报名 |
如果是平台内赠课详情页，CTA 列填写“-”或“无”，不要自动补“开始学习”。
每屏详细说明格式：
模块名称：
核心作用：
页面内容：
视觉建议：
注意事项：
先整理完整出图提示词，再调用图像生成工具。
出图提示词必须包含：
图片类型：
分段信息：
画面比例：
画布宽度：
页面类型：
风格选择依据：
风格版本说明：
整体风格：
模块顺序：
画面文字：
拼接要求：
视觉重点：
排版要求：
避免事项：
提示词要求：
生成或交付前检查：
手机端 H5 不是把信息全部放上去，而是用清晰节奏，把用户一步步带到行动入口。