awesome-gpt-image-2项目结构初探一个完整内容地图帮你快速上手【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库530 个案例逆向工程20 套工业级模板并提炼出Skills持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2awesome-gpt-image-2 是一个 Prompt as Code提示词即代码风格的GPT-Image2 AI 图像提示词引擎与模板库收录 530 个逆向工程提示词案例和 20 套工业级提示词模板并把这些经验提炼成可直接安装的 Agent Skill。如果你是第一次打开这个仓库面对几十个目录容易懵——这篇文章用一张内容地图带你 10 分钟看懂整个项目结构从案例库、模板库到前端网站和 API 服务每个目录负责什么、该从哪里入手一目了然。️ 目录结构全景7 大区域一图看懂打开仓库根目录你会看到以下核心区域awesome-gpt-image-2/ ├── docs/ # 核心内容案例画廊 工业级提示词模板 ├── data/ # 数据层530 案例的图片、JSON 数据 ├── agents/ # Agent Skill把提示词库装进 AI 编程工具 ├── src/ # 前端网站源码React Vite ├── api/ # 服务端 API登录、生图、计费、管理后台 ├── scripts/ # 数据生成与 Skill 构建脚本 ├── supabase/ # 数据库迁移脚本用户积分、会员、订单 ├── index.html # 站点入口 └── package.json # 依赖与脚本命令对应每个区域的职责可以先建立这张地图区域目录一句话说明新手要不要看 案例画廊docs/532 个案例的完整提示词与效果对照⭐ 必看从这里开始 模板库docs/templates.md20 套可填空的工业级提示词模板⭐ 直接套用️ 图片素材data/images/每个案例的生成效果图case1.jpg ~ case532配图浏览 结构化数据data/*.json案例与风格标签的 JSON 数据源想开发再看 Agent Skillagents/skills/一键安装到 Claude Code 等的提示词技能进阶玩法 网站与 APIsrc/、api/在线画廊、登录生成、计费系统开发者向️ 数据库脚本supabase/积分、会员、订单等表结构迁移开发者向️ 内容核心530 提示词案例都藏在哪里这个项目的灵魂在docs/目录它把画廊拆成了两册方便在线渲染画廊总入口docs/gallery.md—— 含全部案例的推荐入口清单是找案例的第一站第一册例 1-165docs/gallery-part-1.md第二册例 166-532docs/gallery-part-2.md每个案例的写法非常统一案例图片 来源 完整提示词先看效果、再抄提示词学习成本极低。例如中国社会演进史等距立体信息图案例就是一张提示词直接生成的完整信息图案例按13 个视觉类别组织UI 界面73 例、图表与信息图52 例、海报排版86 例、电商产品41 例、品牌 Logo27 例、摄影写实77 例、插画艺术58 例等。不同类别能稳定复刻的风格差异很大举几个典型例子人物关系图谱类结构化分栏 头像卡片 关系连线信息层级极其清晰界面截图类可精确控制弹幕、按钮、点赞数等 UI 元素还原直播/社媒界面电商广告类产品主体 大标题文案 材质布景一张提示词出成品级海报 模板库20 套工业级模板 防坑指南比起逐个临摹案例更高效的路径是直接打开模板库docs/templates.md。作者把 390 个案例逆向后提炼出21 套工业级提示词模板每套都包含常规模板中文填空式复制后把方括号换成你的业务内容即可JSON 进阶模板结构化字段适合 Agent / 脚本批量调用防坑指南针对该类别最容易翻车的点乱码文字、比例失调、元素缺失给出约束写法以 UI 界面模板为例核心结构就是产品类型 → 核心功能 → 视觉风格 → 布局 → 输出约束五个填空位5 分钟就能产出第一张高保真界面图。 数据层图片是怎么变成网站和技能的data/目录是整条内容管线的数据源文件作用data/cases.json全部案例的结构化数据标题、分类、风格标签、图片路径data/style-library.json风格/场景标签库网站筛选与 Agent Skill 共用data/images/case*.jpg532 个案例的生成效果图data/images/category-covers/13 个分类的封面图这些 JSON 不是手写的而是由scripts/generate-site-data.mjs从docs/gallery-part-1.md和docs/gallery-part-2.md中自动解析生成scripts/generate-style-skill.mjs则会把style-library.json转成 Agent Skill 的参考文档。也就是说Markdown 是唯一内容源网站和技能都从它派生——这是理解本项目结构最重要的一条线索。 可视化网站与 API 服务层项目还带一套完整的在线画廊网站React Vite Supabase Vercel支持大图预览、提示词一键复制、按风格筛选登录后可在线消耗积分生成图片网站相关代码的分工src/React 前端main.jsx主应用、community.jsx社群页、样式文件api/Vercel Serverless 函数按职能分目录——api/generate-image.js调用生图 APIapi/billing/处理 Stripe 与支付宝计费api/auth/处理登录回调api/admin/是管理后台接口supabase/migrations/12 个 SQL 迁移文件定义用户积分、会员订阅、订单、收藏等表结构vercel.json部署配置把/community路由重写回首页 SPA如果你只是普通用户这一层完全可以跳过如果你是开发者想自建同类网站这套Supabase Auth 积分制 双通道支付的结构非常有参考价值。 Agent Skill把提示词库装进你的 AI 工具本项目最有差异化的一点是把整个风格库封装成了可安装的Agent Skill位于agents/skills/gpt-image-2-style-library/SKILL.md技能定义与工作流识别意图 → 匹配模板 → 组装提示词references/style-library.md由数据层自动生成的风格参考assets/city-life-system-map.png技能输出示例——一张城市生命系统图谱信息图由技能驱动的提示词一次生成安装只需一条命令支持 Claude Code、Codex、Cursor 等npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --global --yes --copy安装后直接对 Agent 说用 gpt-image-2-style-library 生成一张关于 XX 的信息图提示词它就会自动从 530 案例和 20 模板中挑选最合适的结构来写提示词。 快速上手三步用对项目结构第 1 步克隆仓库git clone https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2第 2 步按地图找内容想看案例 → 打开docs/gallery.md点推荐入口想抄模板 → 打开docs/templates.md选对应类别填空想装技能 → 按上面命令安装 Agent Skill第 3 步先抄结构再抄风格词官方推荐的使用顺序是先定输出类型海报/UI/信息图…→ 在画廊里找同类案例 → 回模板页填入你的业务变量。别一上来堆形容词结构对了出图稳定度会有质的变化。 总结一张内容地图收束全文你的目标直接去这里找灵感、看案例效果docs/gallery.mddata/images/快速产出第一张图docs/templates.md填空让 AI 帮你写提示词agents/skills/gpt-image-2-style-library/研究网站怎么搭src/api/supabase/migrations/参与内容更新改docs/gallery-*.md跑npm run generate:site-data同步数据一句话记住整个结构docs 是内容、data 是数据、agents 是能力、src/api 是载体。按这张地图走无论是当提示词素材库用还是把整个网站二次开发你都不会迷路。【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库530 个案例逆向工程20 套工业级模板并提炼出Skills持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
