🚀 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

Hero Section Features Section Tech Showcase Footer

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

在线演示： https://chat.z.ai/space/t0vyq8qmv1z1-art

GLM Demo 1 - Hero GLM Demo 1 - Features GLM Demo 1 - Showcase GLM Demo 1 - Footer

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

在线演示： https://chat.z.ai/space/s0ryv87xqj91-art

GLM Demo 2 - Hero GLM Demo 2 - Features GLM Demo 2 - Footer

🚀 快速开始

方式 1：使用 Claude Skill

下载 my-Skill.zip
前往 Claude.ai 设置
上传技能包并启用
在对话中输入："创建一个 AI 科技公司网站"

详细教程请参考：Using Skills in Claude_zh.md

方式 2：使用通用提示词

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

方式 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 - 自由使用与修改

scifi-web-prompt