这套方案适合什么项目
- 项目管理、团队协作和运营看板官网
- 需要在首屏直接展示产品界面的 SaaS
- 已有视频背景并希望加入真实任务卡片的页面
SECTIONS · 首屏与导航
项目管理仪表盘 Hero 区块提示词
这个区块把产品界面本身作为首屏证据。白色胶囊导航压在视频背景之上，三栏网格展示任务、状态和团队信息。它适合项目管理、协作工具或运营平台，但接入时必须继承原网站的字体和颜色。
实现工具与技术边界
- React 与 TypeScript
- Tailwind CSS
- Vite
- Lucide React
DESIGN DECISIONS
真正决定结果的设计取舍
- 01
产品界面承担证明，不只是背景装饰
- 02
白色导航与深色媒体形成稳定对比
- 03
三栏在平板和手机按任务优先级重排
- 04
卡片动画错峰出现但支持减少动效
PUBLIC PROMPT EXCERPT
公开提示词片段
这段内容只公开核心方向，足够判断提示词是否具体。组件清单、细节参数、响应式规则与完整验收要求继续由会员权限保护。
Build a project management dashboard hero with React, TypeScript, Tailwind, Vite and Lucide icons. Use a looping background video, a white pill header, a responsive three-column grid and restrained staggered card reveals.完成后应该得到什么
最终区块应让访客在首屏看到产品如何组织任务。视频负责氛围，任务卡片负责证明产品，而导航和行动入口保持可操作。
生成后不要跳过这些检查
- 卡片数据可被真实内容替换
- 平板断点不出现三栏过窄
- 减少动效时所有卡片立即可见
RELATED ASSETS
相关构建方案
围绕同一任务继续比较，不必退回搜索起点。
