AI 提示词展示网站

一个使用 Next.js 14 构建的现代化 AI 提示词展示平台。

功能特点

• 🎯 提示词卡片展示
• 📋 一键复制提示词
• 🎨 现代化、响应式设计
• 🌓 支持深色模式
• 🔗 友情链接展示
• ⚡ 使用 Next.js 14 App Router
• 💅 Tailwind CSS 样式

快速开始

安装依赖

npm install
# 或
yarn install
# 或
pnpm install

运行开发服务器

npm run dev
# 或
yarn dev
# 或
pnpm dev

打开浏览器访问 http://localhost:3000 查看效果。

构建生产版本

npm run build
npm run start

项目结构

tishiwang/
├── app/
│   ├── layout.tsx       # 根布局
│   ├── page.tsx         # 首页
│   └── globals.css      # 全局样式
├── components/
│   ├── PromptCard.tsx   # 提示词卡片组件
│   └── Footer.tsx       # 页脚组件
├── public/              # 静态资源
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js

技术栈

• 框架: Next.js 14
• 语言: TypeScript
• 样式: Tailwind CSS
• 部署: Vercel (推荐)

自定义

添加新的提示词

编辑 app/page.tsx 文件中的 prompts 数组，添加新的提示词对象：

{
  id: 7,
  title: '你的提示词标题',
  description: '简短描述',
  prompt: '完整的提示词内容',
  category: '分类',
  tags: ['标签1', '标签2'],
}

修改友情链接

编辑 components/Footer.tsx 文件中的 friendLinks 数组。

License

MIT