千千变刻画会员价格
SITES · 教育与内容

自适应学习平台 Hero 提示词

教育产品首屏需要让不同目标的用户快速进入课程、搜索或账户。这个方案以学习结果为主标题，把搜索、登录和探索入口放在明确层级中，并使用视频传达学习氛围。复杂动画被限制在 CSS 范围内，便于控制性能和可访问性。

去素材库复制完整提示词浏览同类方案
自适应学习平台 Hero 提示词的完整页面视觉预览
素材预览：用于判断视觉方向与页面结构，不代表虚构客户项目。
适用场景

这套方案适合什么项目

  • 在线课程、自适应学习和教育科技平台
  • 需要搜索课程与登录入口同屏的教育首页
  • 使用视频建立学习氛围但不牺牲导航的页面
推荐工具

实现工具与技术边界

  • React 与 TypeScript
  • Vite 与 Tailwind CSS
  • Lucide React
  • CSS transitions
DESIGN DECISIONS

真正决定结果的设计取舍

  1. 01

    学习价值先于产品功能

  2. 02

    搜索框和账户入口使用清楚的视觉层级

  3. 03

    不依赖动画库，减少首屏 JavaScript

  4. 04

    导航在小屏折叠但保留关键入口

PUBLIC PROMPT EXCERPT

公开提示词片段

这段内容只公开核心方向，足够判断提示词是否具体。组件清单、细节参数、响应式规则与完整验收要求继续由会员权限保护。

Recreate an EdTech hero as a React, TypeScript, Vite and Tailwind component. Use Lucide icons only. Keep course search, account access and the learning promise clear, with motion handled through CSS rather than animation libraries.
登录会员后复制完整提示词
预期结果

完成后应该得到什么

生成结果应当是一张可连接真实课程数据的教育产品首屏。用户能理解学习价值，也能立刻搜索课程或进入账户，不会被背景视频阻断。

验收清单

生成后不要跳过这些检查

  • 搜索框有可见标签或可访问名称
  • 菜单展开后可由键盘关闭
  • 减少动效偏好下不播放位移动画
RELATED ASSETS

相关构建方案

围绕同一任务继续比较，不必退回搜索起点。