大家好，我是小智，专注 AI 工具，AI 智能体和编程提效

开源地址：https://github.com/zhenglarry007/opennana-gallery
站点地址：https://zhenglarry007.github.io/opennana-gallery/

不废话，直接上干货。

核心功能到底有啥用

双图库系统

项目里我放了两个独立但风格一致的图库。

一个是 "Nano Banana 提示词图库"。这里面装了 300 多张高质量案例图片，主要是为了让大家快速浏览、筛选和复制提示词。如果你平时需要大量、多样的提示词做参考，看这个就够了。

另一个是 "GPT Image 2 Prompts"。这里面的 47 个案例更加精选和聚焦，分成了人物肖像、海报插画、角色设计、UI 设计和社区案例几大块。

这两个图库在页面顶部有标签页，点一下就能快速切换，当前在哪页也会高亮显示。

分类搜索功能

在 GPT Image 2 图库里，你可以直接通过“人物肖像”或“UI 设计”这种分类来找图片和对应的提示词。想学哪种风格的提示词写法，直接点分类就行。

人物肖像风格示例：

UI 设计风格示例：

人物肖像示例：

社区案例示例：

怎么跑起来？

这玩意儿最大的好处就是部署极其简单。我给你整理了四种方法，挑个顺手的就行。

方式一：用 Python 内置服务器

这是最省事的方法，什么额外依赖都不用装。

# 进入项目的 public 目录
cd /path/to/opennana-gallery/public

# 启动 Python 内置 HTTP 服务器
python3 -m http.server 8080

跑起来后，打开浏览器访问：

• • Nano Gallery：http://localhost:8080/nano/opennana-framework.html
• • GPT Gallery：http://localhost:8080/gpt/gpt-framework.html

方式二：用 Node.js 的 http-server

如果你平时写前端，对 Node.js 熟，那就用这个。

# 安装 http-server（如果尚未安装）
npm install -g http-server

# 进入 public 目录并启动
cd /path/to/opennana-gallery/public
http-server -p 8080

方式三：用 VS Code Live Server 插件

平时用 VS Code 写代码的兄弟，强烈推荐这个方法。

去插件市场装个 "Live Server"。用 VS Code 打开 opennana-gallery 文件夹，找到 public/nano/opennana-framework.html 或者 public/gpt/gpt-framework.html，右键点 "Open with Live Server" 就行了。

方式四：白嫖 GitHub Pages

你可以直接把 public 目录扔到 GitHub Pages 或者其他静态托管服务上。

在 GitHub 建个新仓库，把 public 下面的东西全推到 main 分支。去设置里开启 GitHub Pages，选 main 分支做源。等个几分钟，你的图库就上线了，地址大概是 https://<your-username>.github.io/<repo-name>/。

这里多说一句，这个项目的部署方式真的很灵活，任何能提供静态文件服务的地方都能跑（亲测有效）。

项目结构长啥样

文件结构非常扁平，一目了然：

大家好，我是小智，专注 AI 工具，AI 智能体和编程提效

**文章摘要：本文介绍 GPT Image 2 提示词图库，一个纯 HTML/CSS/JavaScript 构建的展示平台，可直观浏览生成的图片和对应的提示词，支持搜索、分类筛选、一键复制，需要的朋友可以 fork 定制使用。

GPT Image 2 提示词图库：一个可直观浏览生成图片与提示词的开源项目

项目简介

我把 GPT Image 2 的提示词案例单独做成了一个站点，这样大家可以更直观地浏览生成的图片和对应的提示词。这个站点基于纯 HTML/CSS/JavaScript 构建，不需要任何后端服务。

这个项目的核心价值在于为 AI 图像生成爱好者和创作者提供一个集中式的、可搜索的、可筛选的提示词参考库。通过浏览这些高质量案例，用户可以学习如何构建有效的提示词，获取创作灵感，快速复制适合自己需求的提示词。

需要的朋友可以去 fork 一个，自己定制使用。

不废话，直接上干货。

核心功能详解

双图库系统

项目设计了两个独立但风格一致的图库。

Nano Gallery 的标题是 "Nano Banana 提示词图库"，描述为浏览、筛选模型提示词案例库，快速复制提示词，探索灵感。数据量有 300+ 高质量案例，适合需要多样化提示词参考的用户。

GPT Gallery 的标题是 "GPT Image 2 Prompts"，描述为 "Awesome Collection of High-Quality Prompts & Examples"。数据量有 47 个精选案例，分类更聚焦，包括人物肖像、海报插画、角色设计、UI设计、社区案例。

两个图库之间可以通过页面顶部的标签页快速切换，当前页面标签会高亮显示。

分类搜索功能

GPT Image 2 可以通过人物肖像和 UI 设计等分类来搜索到对应的图片和提示词。这样你可以快速找到特定风格的案例，学习如何构建有效的提示词。

人物肖像风格示例：

UI 设计风格示例：

人物肖像示例：

社区案例示例：

快速开始

方式一：使用 Python 内置服务器

这是最简单的方式，不需要安装任何额外依赖。

# 进入项目的 public 目录
cd /path/to/opennana-gallery/public

# 启动 Python 内置 HTTP 服务器
python3 -m http.server 8080

然后在浏览器中访问：

• • Nano Gallery：https://zhenglarry007.github.io/opennana-gallery/
• • GPT Gallery：https://zhenglarry007.github.io/opennana-gallery/gpt/gpt-framework.html

方式二：使用 Node.js http-server

如果你熟悉 Node.js，可以使用 http-server。

# 安装 http-server（如果尚未安装）
npm install -g http-server

# 进入 public 目录并启动
cd /path/to/opennana-gallery/public
http-server -p 8080

方式三：使用 VS Code Live Server 扩展

对于开发人员，推荐使用 VS Code 的 Live Server 扩展：

在 VS Code 中安装 "Live Server" 扩展。

打开 opennana-gallery 项目文件夹。

右键点击 public/nano/opennana-framework.html 或 public/gpt/gpt-framework.html。

选择 "Open with Live Server"。

方式四：部署到 GitHub Pages

将 public 目录部署到 GitHub Pages 或其他静态网站托管服务：

在 GitHub 上创建一个新仓库。

将 public 目录下的所有内容推送到仓库的 main 分支。

在仓库设置中启用 GitHub Pages，选择 main 分支作为源。

等待几分钟后，你的图库将在 https://<your-username>.github.io/<repo-name>/ 上可用。

这里多说一句，这个项目的部署方式真的很灵活，任何能提供静态文件服务的地方都能跑。

项目结构

opennana-gallery/
└── public/
    ├── nano/
    │   ├── assets/
    │   │   └── images/          # Nano 图片资源，300+ 张
    │   ├── data/
    │   │   ├── nano_prompts_20251118_183432.json  # 主要数据
    │   │   └── nano_prompts_20260228.json           # 备用数据
    │   └── opennana-framework.html  # Nano Gallery 主页面
    └── gpt/
        ├── assets/
        │   └── images/          # GPT 图片资源，47 张
        ├── data/
        │   └── gpt_images_prompt.json
        └── gpt-framework.html   # GPT Gallery 主页面

总结

这个 GPT Image 2 提示词图库站点设计精巧、功能实用。它的纯前端技术栈使得部署非常简单，不需要任何后端服务支持。丰富的搜索和筛选功能、直观的用户界面、一键复制提示词的便捷性，使其成为 AI 图像生成爱好者的宝贵资源。

需要的朋友可以去 fork 一个，自己定制使用。无论是作为学习参考还是实际使用，这都是一个优秀的项目示例。它展示了如何用最简单的技术栈构建一个功能完整、用户体验良好的 Web 应用。

对您有帮助，也请帮忙点个 赞👍 + 在看 哈！❤️关注小智AI指南公众号，AI 路上不迷路