使用 LangGPT PromptShow 将 LLM 提示词一键生成精美分享图片导入、定制与导出全指南【免费下载链接】LangGPTLangGPT: Empowering everyone to become a prompt expert! 结构化提示词Structured Prompt提出者 元提示词Meta-Prompt发起者 最流行的提示词落地范式 | Language of GPT The pioneering framework for structured meta-prompt design 10,000 ⭐ | Battle-tested by thousands of users worldwide Created by 云中江树项目地址: https://gitcode.com/gh_mirrors/la/LangGPTPromptShow 是 LangGPT 生态中面向提示词工程师与创作者的开源工具它把 LLM Prompt提示词渲染成风格化的精美图片用于博客配图、社媒分享与技术演示。本文基于 PromptShow 官方 README 及其波兰语文档 PromptShow/docs/README.pl.md 的核心脉络结合仓库源码深入讲解导入、定制化、导出分享、离线安装等完整工作流读完即可上手把结构化提示词变成高颜值图片。一、PromptShow 是什么PromptShow 定位为LLM 提示词图片生成器它让用户轻松创建并分享漂亮的 LLM Prompt 图片见 PromptShow/README.md。与 Carbon代码图片生成器类似PromptShow 聚焦提示词内容使结构化 Prompt如 LangGPT 模板生成的Role/Profile/Rules/Workflow文本在视觉上更具传播力。从 PromptShow/package.json 可以看到这是一个基于 Next.jsnext: ^12.1.6 React 17 的 Web 应用要求 Node12支持 PWA 离线安装依赖next-pwa并内置了 CodeMirror 5 作为编辑器、Firebase 用于账号与 snippet 存储、Cypress 用于端到端测试。二、核心特性官方文档PromptShow/docs/README.pl.md归纳了三大特性定制化Dostosowywanie可调整图片的语法主题、字体样式、背景、内边距、阴影等覆盖从配色到排版的完整视觉链路。快速分享Udostępniaj szybko一键保存图片或生成分享链接支持 PNG/SVG 下载。保存 snippetsZapisz snippety注册账号后即可把提示词片段保存为 snippet 供后续使用分享出去的 snippet 在 Twitter、Slack 等平台会自动展开预览。仓库源码进一步印证了这些能力DEFAULT_SETTINGSPromptShow/lib/constants.js中内置了 24 个可调参数包括主题、字体、字号、行高、窗口控件、水印、导出倍率等PromptShow/lib/api.js 实现了 snippet 的创建、更新、删除、列表与防抖自动保存。三、导入提示词三种方式文档README.pl.md给出三种把提示词导入编辑器的途径拖放文件把提示词文本文件直接拖入编辑器区域由EditorContainer组件接收并载入内容。粘贴直接复制粘贴提示词文本。直接输入打开页面即开始编辑——应用默认内置了一段 LangGPT 风格的示例提示词DEFAULT_CODE见 PromptShow/lib/constants.js是一份完整的诗人角色模板包含Profile、Rules、Workflow、Initialization等结构化章节开箱即可体验。此外代码层面还支持通过 URL 直接打开已保存的 snippet路由 PromptShow/pages/[id].js 通过getServerSideProps按id从 API 拉取片段并渲染到编辑器URL 形如/snippet_id。四、定制化主题、字体与布局参数详解文档指出内容进入编辑器后可定制语法主题、背景颜色、窗口主题、内边距、阴影与字体README.pl.md。结合源码 PromptShow/lib/constants.js各参数的可选范围如下。4.1 语法主题THEMESTHEMES数组内置 30 种语法高亮主题包括 Dracula、Monokai、Night Owl、One Dark、Solarized、VSCode、SynthWave 84、Verminal 等经典配色每种主题通过background、text、keyword、string、comment等键定义高亮色板constants.js。默认主题为transparency透明背景见 constants.js。部分主题带light: true标记如 Base 16 Light、One Light、Solarized Light用于浅色场景适配。4.2 字体FONTSFONTS提供 13 款等宽编程字体constants.jsAnonymous Pro、Cascadia Code、Fira Code、Hack、JetBrains Mono、Source Code Pro、Ubuntu Mono 等默认fontFamily为 HackfontSize默认14px、lineHeight默认133%。4.3 布局与窗口样式DEFAULT_SETTINGSconstants.js定义了完整的默认配置表参数默认值说明paddingVertical/paddingHorizontal56px/56px图片内边距backgroundModecolor背景模式颜色或图片backgroundColor三色线性渐变默认粉-蓝-绿渐变背景backgroundImagenull自定义背景图dropShadow/dropShadowOffsetY/dropShadowBlurRadiusfalse/20px/68px阴影开关与参数windowThemenone窗口主题windowControlstrue是否显示窗口控制点红黄绿三色lineNumbers/firstLineNumberfalse/1行号开关与起始行号widthAdjustmenttrue宽度自适应watermarkfalse水印开关组件见 PromptShow/components/svg/Watermark.jssquaredImagefalse方形图片模式hiddenCharactersfalse显示隐藏字符exportSize2x导出倍率见下width680画布宽度范围 320–1280见 constants.js4.4 语言高亮LANGUAGESLANGUAGES支持 70 种语言/格式的语法高亮constants.js涵盖 Markdown默认语言、JSON、YAML、Python、JavaScript、TypeScript、SQL、Bash 等并内置了 Apache、Elixir、GraphQL、Nim、RISC-V、Solidity 等自定义模式对应 PromptShow/lib/custom/modes 目录。对提示词场景默认的markdown模式即可很好呈现#标题、-列表等结构。4.5 一键预设Presets除手动调参外DEFAULT_PRESETSconstants.js内置了 24 款一键风格预设preset:10 至 preset:30 等每款预设组合了渐变背景、透明主题与 Fira Code 字体预览图位于 PromptShow/public/static/presets可直接套用或在其基础上微调。五、导出与分享五种方式定制完成后即可分享文档README.pl.md给出了完整路径5.1 创建并分享已保存的 snippet点击登录/注册按钮完成账号认证登录组件见 PromptShow/components/LoginButton.js正常编辑片段会自动保存api.js 中createSnippet做了 5 秒防抖updateSnippet1 秒防抖复制浏览器地址栏中的 URL 分享出去。访问该 URL 时PromptShow/pages/[id].js 会从 API 加载片段并还原到编辑器接收者可以直接继续编辑——分享的不只是图片还有可编辑的源码。5.2 嵌入 snippetEmbed这是把 PromptShow 图片嵌入个人网站或博客的推荐方式读者甚至能一键复制代码。实现机制如下在任意 snippet 的 URL 前加embed路径即可嵌入即域名/embed/snippet_id对应路由 PromptShow/pages/embed/[id].js通过 Copy Menu 可快速复制正确的 iframe 片段或适用于 Medium 等平台的 URL 编码也可以直接嵌入已保存的 snippet 或 GitHub gist域名/embed/:id。5.3 Tweet 按钮Tweet 按钮不仅把图片分享到 Twitter还会正确编码alt文本以保证无障碍可访问性。底层实现在 PromptShow/lib/api.js将图片数据 POST 到/api/twitter获取图床 URL再构造twitter.com/intent/tweet链接弹出分享窗口若 Twitter API 限流HTTP 420应用会提示稍后重试或手动保存上传。5.4 直接下载图片支持以PNG和SVG两种格式下载。操作路径Export → Open在浏览器中直接打开图片Copy → Image把图片直接复制到剪贴板。导出倍率支持1x / 2x / 4xEXPORT_SIZES见 constants.js默认2x高倍率适合高清大图与印刷场景。5.5 无障碍提示文档README.pl.md特别提醒若在文章中引用生成的图片图片中的提示词文本对无障碍技术如屏幕阅读器不可见也无法放大或复制。建议在图片下方补充details元素展示文本形式的源码保证内容可访问。六、离线使用安装 PWA 桌面应用如果你使用 Google Chrome 或其他支持 PWA渐进式 Web 应用的浏览器可以离线使用 PromptShow访问站点首页点击浏览器设置菜单选择安装 PromptShow...Install。安装后即成为桌面应用断网也可继续编辑与导出。项目依赖next-pwa见 PromptShow/package.json正是为这一能力服务的。七、本地开发与运行仓库提供了完整的开发脚本PromptShow/package.jsonnpm install # 安装依赖 npm run dev # 启动开发服务器next dev npm run build # 生产构建next build npm start # 启动生产服务next start npm run cy:open # 打开 Cypress 端到端测试 npm run cy:run # 命令行运行端到端测试端到端测试覆盖了核心交互流程例如 PromptShow/cypress/integration/basic.spec.js 验证编辑器基础操作、PromptShow/cypress/integration/embed.spec.js 验证嵌入功能、PromptShow/cypress/integration/localStorage.spec.js 验证本地持久化可作为理解功能行为的参考。注意部分能力账号保存、Twitter 分享、Unsplash 背景图依赖后端 API 与第三方服务配置相关逻辑见 PromptShow/lib/api.js本地纯前端运行时这些功能不可用属正常现象。八、总结PromptShow 把提示词图片化这件小事做到了开箱即用导入拖放/粘贴/直接输入、定制30 主题、13 款字体、24 个布局参数、24 款预设、分享snippet URL、embed 嵌入、Tweet、PNG/SVG 下载、剪贴板复制与离线 PWA 形成完整闭环。结合本文对 PromptShow/lib/constants.js、PromptShow/lib/api.js、PromptShow/pages/[id].js 的源码解读你可以据此搭建自己的提示词分享工作流把 LangGPT 结构化提示词以更专业、更美观的方式传播出去。【免费下载链接】LangGPTLangGPT: Empowering everyone to become a prompt expert! 结构化提示词Structured Prompt提出者 元提示词Meta-Prompt发起者 最流行的提示词落地范式 | Language of GPT The pioneering framework for structured meta-prompt design 10,000 ⭐ | Battle-tested by thousands of users worldwide Created by 云中江树项目地址: https://gitcode.com/gh_mirrors/la/LangGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考