# Awesome Web Prompts

> 收集互联网上优质的网页开发资源，包括 AI 提示词和现成可用的网页代码。

[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

[English](README_EN.md) | 中文

## 简介

这是一个精心整理的网页开发资源合集，收录两类内容：

- **Prompt** — 用于 AI 工具（ChatGPT、Claude、Cursor 等）的提示词，粘贴即可生成完整网页代码
- **Source Code** — 现成可运行的网页代码，直接使用或作为二次开发的起点

每个条目都附有效果截图和使用说明。

## 目录

### Hero Section

首屏主视觉区域，通常包含标题、副标题、CTA 按钮和背景视觉效果。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Bio-Age Dashboard](prompts/sections/hero/bio-age-dashboard/) | Prompt | 慢旋转光效背景 + 无限滚动刻度尺动效 + 悬浮展开卡片，健康数据 Dashboard 首屏 | ![](prompts/sections/hero/bio-age-dashboard/preview.png) |
| [Bold Studio](prompts/sections/hero/bold-studio/) | Prompt | 全屏视频背景 + 冲击性三行标题 + 统计数字，创意机构品牌落地页 | ![](prompts/sections/hero/bold-studio/preview.png) |
| [Contact Cybernetic](prompts/sections/hero/contact-cybernetic/) | Prompt | 鼠标 Scrub 视频交互 + 动态弹簧多选服务项标签，极客感联系页首屏 | - |
| [CozyPaws](prompts/sections/hero/cozy-paws/) | Prompt | 弹性过冲单词弹出特效 + 响应式三拼底图视差，温馨宠物商店全屏首屏 | - |
| [Creative Portfolio](prompts/sections/hero/creative-portfolio/) | Prompt | 三视频无缝淡入淡出切换 + 极致多端自适应排版，个人创意主页首屏 | ![](prompts/sections/hero/creative-portfolio/preview.png) |
| [Immersive Ocean](prompts/sections/hero/immersive-ocean/) | Prompt | 电影级深海视频背景 + 响应式折叠导航 + 缓动上滑交错文字动效，Foldcraft 创意工作室首屏 | ![](prompts/sections/hero/immersive-ocean/preview.png) |
| [IntelligentX](prompts/sections/hero/intelligent-x/) | Prompt | 巨型标题与异形视觉符号混排 + 深层渐变遮罩视频，极简毛玻璃医疗首屏 | - |
| [Interactive Discovery](prompts/sections/hero/interactive-discovery/) | Prompt | 光标跟随聚光灯揭示双层图片，地质品牌全屏暗色 Hero | ![](prompts/sections/hero/interactive-discovery/preview.png) |
| [Luxury Hero](prompts/sections/hero/luxury-hero/) | Prompt | 纯滚动驱动视频播放（Scroll-scrubbed）+ GSAP 视差毛玻璃面板，奢华体验展示页 | ![](prompts/sections/hero/luxury-hero/preview.png) |
| [Organic Odyssey](prompts/sections/hero/organic-odyssey/) | Prompt | 电影感微观生态背景 + 极致 Liquid Glass 液态玻璃按钮，自然美学展示页 | ![](prompts/sections/hero/organic-odyssey/preview.png) |
| [Portal](prompts/sections/hero/portal/) | Prompt | CSS Mask 底部模糊渐隐 + Liquid Glass + 10 级错落入场动效，影视平台全屏首屏 | - |
| [Retro-Futurist](prompts/sections/hero/retro-futurist/) | Prompt | 鼠标横向滑动控制视频交互 + 纯手写打字机特效，极客风复古科幻展示页 | ![](prompts/sections/hero/retro-futurist/preview.png) |
| [Securify Data Security](prompts/sections/hero/securify-data-security/) | Prompt | 巨大错落排版 + 数据统计悬浮块 + 背景视频环绕，数据安全 SaaS 首屏 | ![](prompts/sections/hero/securify-data-security/preview.png) |
| [Stillmind](prompts/sections/hero/stillmind/) | Prompt | 4 视频切换 + Liquid Glass UI + 漂浮 PNG 叠层，正念 App 全屏 Hero | ![](prompts/sections/hero/stillmind/preview.png) |
| [TechForward](prompts/sections/hero/techforward/) | Prompt | 极简黑白全屏视频 + Framer Motion 动画 + 纯 CSS，神经科技品牌风格 | ![](prompts/sections/hero/techforward/preview.png) |
| [VaultShield Hero](prompts/sections/hero/vault-shield-hero/) | Prompt | 密码管理应用的响应式全屏英雄区域，包含背景视频、Framer Motion动画和自定义SVG Logo | - |
| [VEX Venture](prompts/sections/hero/vex-venture/) | Prompt | 极简创投全屏展示页，无滤镜原生视频背景 + 纯原生精细错落排版动效 | ![](prompts/sections/hero/vex-venture/preview.png) |
| [Vision Reveal](prompts/sections/hero/vision-reveal/) | Source Code | 瓦片阵列入场 + 光标聚光灯揭示双层图片，纯 HTML/CSS/JS 个人创意工作室展示页 | ![](prompts/sections/hero/vision-reveal/preview.png) |
| [Wellbeing OS](prompts/sections/hero/wellbeing-os/) | Prompt | 奢华质感液体玻璃描边 + 悬浮级 Hover 下拉菜单 + 动态滑出移动端导航，flowpath 健康 SaaS 平台首屏 | - |
| [Wellness Balance](prompts/sections/hero/wellness-balance/) | Prompt | 逐词揭示排版动效 + 非对称网格底栏与自动轮播卡片，极简自然风健康补充剂首屏 | - |
| [Wellness Devicex](prompts/sections/hero/wellness-devicex/) | Prompt | 5层 Z-index 视觉架构 + Canvas 动态聚光灯遮罩透视视频，影视级暗黑系智能穿戴首屏 | - |

### Landing Page

完整的落地页，包含多个区块的整页设计。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [3D Story](prompts/pages/landing-page/3d-story/) | Source Code | 滚动驱动视频帧逐帧播放 + 粒子系统 + 卡片渐进揭示，沉浸式 3D 框架营销页 | ![](prompts/pages/landing-page/3d-story/preview.png) |
| [AI Designer Portfolio](prompts/pages/landing-page/ai-designer-portfolio/) | Prompt | 鼠标跟随 GIF 粒子特效 + 视差图片 + 自动滚动推荐轮播，独立设计师作品集落地页 | - |
| [Health Portal](prompts/pages/landing-page/health-portal/) | Prompt | 极致大图遮罩拼接（Masked Cards）与滚动视差，单页牙科医疗落地页 | ![](prompts/pages/landing-page/health-portal/preview.png) |
| [Innovation](prompts/pages/landing-page/innovation/) | Prompt | 高阶 Liquid Glass 材质 + 原生 JS 控制的视频无缝黑场过渡，五段式创新企业落地页 | - |
| [Orbis NFT](prompts/pages/landing-page/orbis-nft/) | Prompt | 顶级 Liquid Glass 特效 + 全局噪点层 + 深空多视频拼接，暗黑系 NFT 落地页 | - |
| [Prisma Creative Studio](prompts/pages/landing-page/prisma-creative-studio/) | Prompt | 电影质感暗黑调色 + SVG 噪点背景 + 文字逐词上浮进场，三段式创意工作室落地页 | ![](prompts/pages/landing-page/prisma-creative-studio/preview.png) |
| [SkyElite Private Jets](prompts/pages/landing-page/skyelite-private-jets/) | Prompt | 极简高冷灰调，重叠排版与全屏视频交织的高端服务落地页 | - |
| [USD Halo](prompts/pages/landing-page/usd-halo/) | Prompt | 稳定币产品金融科技落地页，圆角内嵌视频 Hero + 品牌字体差异化走马灯 | - |

### SaaS & Cloud Platforms

SaaS云平台、高性能计算与企业级智能服务营销落地页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Intelligent Performance](prompts/pages/saas/intelligent-performance/) | Prompt | 单文件无依赖SaaS高性能全视口营销舞台，双端自适应视频背景、LED点阵字型生成器与3张429×554毛玻璃指标卡 | - |

### Official Website & Cultural

机构官方网站、文化艺术展览与多章节沉浸式叙事网站。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Neo Museum (NHM)](prompts/pages/website/neo-museum/) | Prompt | 自然历史博物馆 (NHM) 沉浸式前沿多章节落地页，SVG 多边形字形入场、SVG 滤镜沙化过渡动效与黑白无缝分段切换。 | - |

### Editorial & Storytelling

电影级滚动视频叙事、画册级排版与长卷沉浸式单页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Vectrus Energy](prompts/pages/editorial/vectrus-energy/) | Prompt | 电影级滚动驱动视频单页网站，基于 WebCodecs + MP4Box 离线解码平滑帧缓冲（Scrubbing），搭配 Helvetica Neue ME 极简排版与 500vh 叙事长卷。 | - |

### App & Product Landing

应用产品展示与温润/创意风格移动及桌面应用落地页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [ADHD Planner (Drift)](prompts/pages/app/adhd-planner/) | Prompt | 极简温润风 ADHD 友好日程规划应用 Drift 落地页，全屏视频 Hero、奶油色 About 区块与滚动联动卡片。 | - |

### Agency & Studio

创意工作室、人才集合与设计机构展示页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Playful Idea](prompts/pages/agency/playful-idea/) | Prompt | 创意工作室单页页脚，薰衣草毛绒玩偶视频背景、指针凝视视线视频帧洗刷交互与三栏极简排版 | - |
| [Talent Collective](prompts/pages/agency/talent-collective/) | Prompt | 极简的全屏创意工作室人才展示页面，包含无缝切换的背景人像、渐变遮罩和纯粹的CSS交互。 | - |

### Creative Pages

极富创意与视觉冲击力的前沿交互页面与动效设计。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Sparkform](prompts/pages/creative/sparkform/) | Prompt | 极具创意的落地页，包含层叠的 3D 文字效果、滚动驱动动画以及无限滚动的跑马灯。 | - |

### Technology & Identity

前沿科技、声音身份识别与终端暗黑美学产品页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Cyber Ronin](prompts/pages/technology/cyber-ronin/) | Prompt | 单文件无依赖赛博朋克全视口Hero落地页，双层画面鼠标聚光灯探照揭示、逐词上浮动画与6级响应式断点体系。 | - |
| [Signal ID](prompts/pages/technology/signal-id/) | Prompt | 技术品牌的全屏深色英雄落地页，包含右侧注册表单和电影级背景视频。 | - |

### AI & Intelligent Systems

人工智能平台、自主运行系统与极客点阵美学落地页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Agent Wave (Vesper.ai)](prompts/pages/ai/agent-wave/) | Prompt | 单文件无依赖极简纯黑单屏 AI 落地页，液态金属胶囊导航、Instrument Serif 混排标题与自适应统计底栏。 | - |
| [AI Runtime](prompts/pages/ai/ai-runtime/) | Prompt | 单屏沉浸式全景视频背景 AI 落地页，采用复古点阵字体与精细的统计计数器动画。 | - |
| [Fastshot](prompts/pages/ai/fastshot/) | Prompt | 单文件无依赖极简高质感 AI 应用生成平台 Fastshot 落地页，全屏晨曦视频背景、像素级精准 Composer 提示词卡片与三端自适应架构。 | - |

### Data Intelligence

数据智能、预测模型与高质感图表分析 Hero 展示页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Quantum Core (Apogee)](prompts/pages/data-intelligence/quantum-core/) | Prompt | 深空星云视频背景 + 毛玻璃营收增长图表卡片 + 纯 CSS 逐条生长柱状图，Apogee 数据智能 Hero 落地页 | - |

### Cybersecurity

网络安全、系统防御与硬核暗黑科技单屏落地页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Cyber Layer](prompts/pages/cybersecurity/cyber-layer/) | Prompt | 单文件无依赖网络安全暗黑单屏落地页，双层调色 LUT 滤镜视频背景、Space Grotesk 字体排版与 WAAPI 逐帧进场动效。 | - |

### Auth & Onboarding

身份验证、登录注册与新用户引导页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Aurora Onboard](prompts/pages/auth/aurora-onboard/) | Prompt | 双栏布局 + 纯净全屏视频区无遮罩 + 错落进场动效，极简黑白注册页 | - |
| [Real-Time Alerts (Signal)](prompts/pages/auth/real-time-alerts/) | Prompt | 单文件无依赖纯原生 HTML/CSS/JS 登录页，游隼俯冲视频背景，精确到像素的三模态响应式缩放与 WAAPI 进场编排动画。 | - |

### 404 Pages

定制化错误引导页与 404 未找到页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [404 Planet](prompts/pages/404/404-planet/) | Prompt | 云托管公司 NEXOVA 全屏 404，太空视频背景 + 液态玻璃按钮 + 发光 404 大字 | - |
| [Fun 404 Page](prompts/pages/404/fun-404-page/) | Prompt | 动态拉伸背景巨型文字 + 全手工错落缓动侧滑菜单，母婴儿童品牌明快 404 | - |
| [Nexto 404](prompts/pages/404/nexto-404/) | Prompt | 100vh 强制视口 + 飞船背景叠加 + 漂浮动画，俏皮感科幻错误引导页 | - |
| [Skybridge 404](prompts/pages/404/skybridge-404/) | Prompt | 极致简约高能 404 错误页，全屏 100% 透明度视频背景 + 纯白像素化 Mark Logo + 超大渐变 404 大字 | - |

### Footer Section

暗黑系与现代感页脚导航与行动号召（CTA）区域。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Heritage Grove](prompts/sections/footer/heritage-grove/) | Prompt | 单文件无依赖典雅东方水墨风全视口页脚，茶青水墨山水视频背景、Cormorant Garamond衬线字标与5级响应式流式布局 | - |
| [Tenlas Footer](prompts/sections/footer/tenlas-footer/) | Prompt | 暗黑风 CTA + 极具设计感页脚，带平滑滚动 Fade-up 动效与 SVG 对齐超大文本 | - |
| [Wayfinder](prompts/sections/footer/wayfinder/) | Prompt | Meridian 单屏复古版画全视口页脚——石拱高架桥与马车绿墨手绘视频背景、mix-blend-mode: multiply 无缝融合、Fraunces 衬线字标、罗盘矢量 Logo 与响应式导航网格 | - |

### UI Components

独立 UI 组件、3D 视觉交互与卡片轮播动效。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Animated Cards](prompts/components/animated-cards/) | Prompt | 3D 悬浮银行卡片圆柱轮播，支持鼠标视差倾斜、实体厚度切片与双面翻转卡面 | - |
| [Scroll Expansion Hero](prompts/components/scroll-expansion-hero/) | Source Code | 滚轮与触控驱动的沉浸式媒体展开组件，支持视频与图片平滑放大、文字视差混合与双模态切换 | - |

### Portfolio

个人作品集页面，以案例展示和技能介绍为核心。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [3D Portfolio](prompts/pages/portfolio/3d-portfolio/) | Prompt | 3D 创作者作品集，包含磁性悬停、无限走马灯与粘性卡片堆叠等多种高阶交互 | ![](prompts/pages/portfolio/3d-portfolio/preview.png) |
| [Digital Director](prompts/pages/portfolio/digital-director/) | Prompt | 创意总监/工程师 Adam Roberts 全屏作品集，像素位图字体混排 + 背景视频 + 四列信息网格 + 获奖芯片 | - |
| [Gold Standard](prompts/pages/portfolio/gold-standard/) | Prompt | SOSCALE 黄金标准全视口英雄落地页——SVG 文字遮罩镂空视频背景、1280 刚性 --u 度量系统、JS 焦点锚定封面自适应算法、Web Animations API 阶梯起落入场动效 | - |
| [Portfolio Cosmic](prompts/pages/portfolio/portfolio-cosmic/) | Prompt | 高阶暗黑个人作品集，内置 HLS 视频流背景与 GSAP 深度视差滚动探索区 | - |

### Fintech

金融科技类页面，包括移动端 App 界面模拟、支付流程展示和数字资产 product 页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Remit Race](prompts/pages/fintech/remit-race/) | Prompt | 深色竞赛风移动端 Mockup，3D 地球视频 + 分层叠加倒计时条 | - |

### Contact Pages

联系我们与表单落地页，以表单交互、输入验证和信息提交为核心。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Build With Us](prompts/sections/contact/build-with-us/) | Prompt | 全屏视频背景 + 物理材质表单卡片 + 服务选项标签多选 + 提交成功状态切换 | - |

### Travel & AI Planner

旅游与 AI 行程规划类页面，结合全屏视频背景、液态毛玻璃卡片与高质感排版。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [AI Trip Planner (Wandor)](prompts/pages/travel/ai-trip-planner/) | Prompt | Wandor AI 旅游行程规划全屏 Hero 页，带视频背景、顶部白色渐变遮罩与液态毛玻璃提示卡片 | - |

### Environmental & Sustainability

环境保护、海洋生态与可持续发展非营利组织全视口官网页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [TrueEarth](prompts/pages/environmental/true-earth/) | Prompt | 单文件无依赖海洋保护非营利组织全视口页面，珊瑚礁航拍视频卡片、图文镂空高亮与滑入式毛玻璃抽屉导航 | - |

### 3D & Space Planet

沉浸式3D视觉、宇宙天体探索与多维交互全视口页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Space Planet](prompts/pages/3d/space-planet/) | Prompt | 单文件无依赖沉浸式宇宙天体全视口页面，三大行星高清微动视频无缝切换、--u绝对设计度量与双侧透明切片微交互 | - |

### E-Commerce & Retail

电子商务、品牌商城与新零售数字化营销全视口页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Vertex](prompts/pages/ecommerce/vertex/) | Prompt | 单文件无依赖电商SaaS全视口页面，1172×657缩放画布、37张卡片3D透视圆环圆柱与底部发光按钮 | - |

### Automotive & Mobility

汽车工业、新能源出行与概念车型交互探索全视口页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Veyra Electric](prompts/pages/automotive/veyra-electric/) | Prompt | 概念纯电超跑交互落地页，1672:941共用图像平面、多路离屏Canvas视频解构悬停与车体涂装轮毂切换 | - |

### Manufacturing & Industrial

精密制造、重工业防护与工程装备数字化展示全视口页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Cordex](prompts/pages/manufacturing/cordex/) | Prompt | 单文件无依赖工业线缆防护品牌落地页，全关键帧All-Intra视频滚动逐帧洗刷与多场景规格联动 | - |

### Motion & Interactive Visuals

高精度动态交互、设计度量系统与微动效全视口页面。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [ConSentinel](prompts/pages/motion/consentinel/) | Prompt | 单文件无依赖数字安全全视口页面，--u基准设计度量、WAAPI编排入场与视口宽高比三级响应式几何 | - |

### Photography & Nature

野生动物与自然纪录摄影档案馆，3D 球体排布、沉浸式灯箱与电影级视频开场。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Nature Portfolio](prompts/pages/photography/nature-portfolio/) | Prompt | 野生动物摄影档案馆，Fibonacci 球体排布21张照片、16vh 滚动推进镜头、FLIP 灯箱、全屏菜单与自定义光标 | - |

### Space & Nebula

太空探索、星云天体与宇宙科幻全视口落地页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Nebula Hero](prompts/pages/space/nebula-hero/) | Prompt | Orbit 太空探索全屏英雄落地页——1563×1006 刚性 --u 度量系统、环行星 SVG 矢量图形、9s 循环星空视频、双行文本遮罩揭示与 1.7s 入场动画 | - |

### Supply Chain & Logistics

现代供应链、货运物流与多式联运全视口落地页。

| 名称 | 类型 | 说明 | 预览 |
|------|------|-------------|---------|
| [Logistics Freight](prompts/pages/supply/logistics-freight/) | Prompt | Logistics Freight 现代货运物流全视口英雄落地页——鸟瞰货运列车全屏视频背景、@font-face 紧凑无衬线字体度量修正、沿列车中轴对称镜像排版与 1.8 秒无回环平滑入场动效 | - |

## 项目结构

```
awesome-web-prompts/
├── README.md                 # 中文主页（自动构建）
├── README_EN.md              # English version (Auto-built)
├── CONTRIBUTING.md           # 贡献指南
├── package.json              # 构建与校验脚本
├── scripts/                  # 自动化工程脚本
└── prompts/                  # 提示词库
    ├── _template/            # 新增条目模板
    ├── pages/                # 完整页面（Landing Page, Agency, Automotive…）
    ├── sections/             # 页面区块（Hero, Footer, Contact）
    └── components/           # 独立 UI 组件与动效
```

## 如何使用

**Prompt 类型：**
1. 打开 `prompt.md` 复制提示词
2. 粘贴到 ChatGPT、Claude、Cursor 等 AI 工具中生成代码

**Source Code 类型：**
1. 打开 `prompt.md` 复制完整代码
2. 保存为对应文件格式，直接在浏览器运行，或作为二次开发的起点

## 贡献

欢迎提交你发现的优质资源！请查看 [贡献指南](CONTRIBUTING.md) 了解如何参与。

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=DexZane/awesome-web-prompts&type=Date)](https://star-history.com/#DexZane/awesome-web-prompts&Date)

## License

[MIT](LICENSE)