桌面：先看定位，再看工作流程
大标题直接说明产品用途，右侧流程卡片演示“选择 Skill → 准备材料 → 产出文件”。
真实案例HTML / CSS
为 Skillry 重新设计的第一屏
01 / 案例拆解
同一套产品信息，两种屏幕都讲清楚
从产品介绍中，提炼首屏要回答的三个问题
Skillry 的产品介绍：一个提供可复用 Skill 的市场。重点展示从选择 Skill 到产出文件的过程。
- 面向谁：希望用 AI 完成具体工作的开发者与创作者。
- 提供什么：有步骤、示例和使用边界的可复用 Skill。
- 下一步：找到合适的 Skill，安装到自己的 AI 助手中。
手机端：保留主要按钮，调整布局
窄屏下内容纵向排列。查看手机预览，检查标题、按钮与流程是否仍有清晰的阅读顺序。
源码可继续修改，交互可以直接体验
下载独立 HTML 案例，替换标题、按钮与品牌素材。也可以在页面上方打开交互演示，查看流程卡片如何响应操作。
03 / 制作方法
如何用 AI 设计产品落地页首屏
- 1
确定产品定位与按钮目标
让 AI 助手先整理“用户是谁、能得到什么、接下来做什么”，再据此编写标题与按钮文案。
- 2
生成可交互的响应式首屏
安装 Dark Stat Hero 后附上产品材料，要求按实际使用步骤设计交互，并交付可编辑源码。分别检查桌面与手机布局。
- 3
接入页面并验证
在本地项目替换文案与素材，检查链接、键盘操作和小屏显示。
生成后，用这三点验收
- 标题能否让目标用户理解产品用途？
- 主要按钮是否有明确去向，手机上是否易点？
- 键盘能否操作交互，布局是否没有横向溢出？
04
常见问题
这是完整的落地页生成器吗？
本任务包含首屏标题、主要按钮与一个交互展示。定价、客户案例、表单及后台需要另外制作。
可以用于 SaaS 或独立开发者的产品官网吗？
可以从这类产品的真实介绍开始。当前案例采用深色、数据感的视觉风格；如果产品需要不同的品牌气质，应在任务说明中明确，并审核调整后的效果。
可以直接放进 React 项目吗？
本页下载的是独立 HTML 案例。你可以让编程助手将结构与样式迁入 React 组件，并适配项目的路由、样式约定与依赖。
