# scifi-web-prompt

**Repository Path**: LeastBit/scifi-web-prompt

## Basic Information

- **Project Name**: scifi-web-prompt
- **Description**: 一键生成未来主义科技网站的 AI 提示词工具包。支持 Claude Skill、GPT Codex 和通用提示词，基于 React + Three.js +   Tailwind CSS，打造赛博朋克美学的沉浸式网页体验
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-27
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 Sci-Fi Tech Website Builder

一个专为生成**未来主义科技公司主页**的 AI 提示词仓库，支持多平台 AI 工具快速生成具有赛博朋克美学的现代网站。

## ✨ 项目简介

本仓库提供了三种不同格式的提示词，适配不同 AI 平台：
- **Claude Skill** (`my-Skill.zip`) - 适用于 Claude.ai 的技能包
- **GPT-5 Codex Agent** (`AGENTS.md`) - 适用于 OpenAI Codex 的 Agent 配置
- **通用提示词** (`SciFi_Website_Prompt.txt`) - 适用于任何 AI 对话工具

所有提示词均基于 **React + Tailwind CSS + Three.js + shadcn/ui** 技术栈，生成具有沉浸式视觉体验的科技感网站。

---

## 🎯 核心特性

- 🌌 **深色主题** - 赛博朋克配色（电光蓝/霓虹紫/矩阵绿）
- ✨ **3D 粒子背景** - 基于 Three.js 的动态粒子系统
- 🎨 **玻璃态设计** - 毛玻璃效果与全息视觉层
- 🔥 **高交互性** - 按钮发光、文字故障效果、悬浮动画
- 📱 **响应式布局** - 完美适配移动端/平板/桌面
- ⚡ **一次生成** - 无需修改即可直接使用

---

## 📦 文件说明

| 文件名 | 说明 | 适用平台 |
|--------|------|----------|
| `my-Skill.zip` | Claude Skill 技能包 | Claude.ai |
| `AGENTS.md` | GPT-5 Codex Agent 配置 | OpenAI Codex |
| `SciFi_Website_Prompt.txt` | 通用提示词 | 任何 AI 工具 |
| `Using Skills in Claude_zh.md` | Claude Skill 使用教程（中文） | 文档 |
| `Claude_scifi_tech_demo.tsx` | Claude 生成示例代码 | 示例 |
| `GLM_scifi_tech_demo1.html` | GLM 生成示例代码 1 | 示例 |
| `GLM_scifi_tech_demo2.html` | GLM 生成示例代码 2 | 示例 |

---

## 🎬 效果展示

所有示例均为**一次提示完成，无任何修改**。

### 1️⃣ Claude + Skill.md 生成效果

**在线演示：** [https://claude.ai/public/artifacts/97b43b35-1477-4df8-8c10-95f665a3bd30](https://claude.ai/public/artifacts/97b43b35-1477-4df8-8c10-95f665a3bd30?fullscreen=true)

![Hero Section](img/image-20251022181441808.png)
![Features Section](img/image-20251022181509259.png)
![Tech Showcase](img/image-20251022181532588.png)
![Footer](img/image-20251022181545961.png)

---

### 2️⃣ GLM + 通用提示词生成效果（示例 1）

**在线演示：** [https://chat.z.ai/space/t0vyq8qmv1z1-art](https://chat.z.ai/space/t0vyq8qmv1z1-art)

![GLM Demo 1 - Hero](img/image-20251022181650872.png)
![GLM Demo 1 - Features](img/image-20251022181714617.png)
![GLM Demo 1 - Showcase](img/image-20251022181741624.png)
![GLM Demo 1 - Footer](img/image-20251022181813100.png)

---

### 3️⃣ GLM + 通用提示词生成效果（示例 2）

**在线演示：** [https://chat.z.ai/space/s0ryv87xqj91-art](https://chat.z.ai/space/s0ryv87xqj91-art)

![GLM Demo 2 - Hero](img/image-20251022182002114.png)
![GLM Demo 2 - Features](img/image-20251022182030102.png)
![GLM Demo 2 - Footer](img/image-20251022182048499.png)

---

## 🚀 快速开始

### 方式 1：使用 Claude Skill

1. 下载 `my-Skill.zip`
2. 前往 [Claude.ai 设置](https://claude.ai/settings/capabilities)
3. 上传技能包并启用
4. 在对话中输入："创建一个 AI 科技公司网站"

详细教程请参考：[Using Skills in Claude_zh.md](Using%20Skills%20in%20Claude_zh.md)

### 方式 2：使用通用提示词

1. 复制 `SciFi_Website_Prompt.txt` 内容
2. 粘贴到任何 AI 对话工具（ChatGPT/Claude/GLM/Kimi 等）
3. 等待生成完整代码

### 方式 3：使用 GPT-5 Codex Agent



## 🛠️ 技术栈

- **前端框架：** React 18+
- **样式方案：** Tailwind CSS
- **UI 组件：** shadcn/ui + Lucide React
- **3D 引擎：** Three.js
- **动画库：** Framer Motion
- **构建工具：** Vite

## 📖 使用场景

- AI/机器学习公司官网
- Web3/区块链项目落地页
- 游戏科技品牌展示页
- 未来主义产品发布页
- 赛博朋克风格作品集

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

如果这个项目对你有帮助，请点个 ⭐ Star 支持一下！

## 📄 许可证

MIT License - 自由使用与修改