面向设计师的中文手写 AI 提示词素材库。把平时散落在 Markdown 里的手写字体提示词，变成能按风格筛选、能看效果图、能一键复制、能导出备份的可视化素材库。
纯静态网页，零后端、零数据库、零服务器成本，丢到 GitHub Pages 就能用。所有素材只存在你自己的浏览器里，不上传任何地方。
墨色暗主题 / 图片反推 / 相似风格检索（点开展开）
在线演示：https://feiteng68.github.io/Handwritten-Prompt-Gallery/
当前版本
- 素材录入：名称、风格分类、标签、正向提示词、负面提示词、备注、预览图
- 卡片网格浏览，缩略图预览，未配图的素材用文案前三个字做占位
- 左侧风格分类筛选 + 标签多选筛选 + 全文搜索（名称 / 提示词 / 标签 / 备注）
- 排序：最近更新 / 录入时间 / 名称
- 收藏：卡片右上角星标一键收藏，左侧「★ 收藏」单独筛选
- 一键复制：单独复制正向词、单独复制负面词；整套支持四种输出模板（通用 / Midjourney / Stable Diffusion / 即梦）
- 相似风格检索：详情里点「找相似」，按风格分类 + 标签重合 + 提示词文本相似度本地排序，点结果直接跳过去
- 详情弹窗内直接编辑、删除；详情页支持
←→键快速翻看上一条/下一条 - 双主题切换：宣纸墨色（默认）/ 墨色暗
- 本地持久化：IndexedDB 存素材与图片，关掉浏览器再打开数据还在
- 内置 8 条示例素材，一键载入
- 导出：JSON 含预览图（单文件自包含）/ JSON 不含图片 / Markdown（按风格分组）/ ZIP（分出图片文件，可直接拖进 PS）
- 导入：一次可选多个文件，JSON 和 ZIP 都能读，内容自动汇总后一起导入；支持合并或覆盖，按 id 去重，预览图从文件里还原回本地库
- 图片反推：上传效果图 → 视觉模型识别笔触风格 → 自动生成名称、风格分类、正向/负面提示词、标签、适用场景 → 人工校验修改后入库，并标记来源为「图片反推」
- 标签管理：批量重命名 / 删除标签，重命名成已存在的名字即自动合并
规划中
| 阶段 | 内容 |
|---|---|
| 后续 | 多张图片排队批量反推、可选本地后端（FastAPI + SQLite）、离线本地多模态模型 |
页面用到了 fetch 读取示例数据、以及 Clipboard API 复制，直接双击 index.html 用 file:// 打开会被浏览器限制。请起一个本地静态服务：
# 方式一：Python（系统自带即可）
python -m http.server 5399
# 方式二：Node
npx serve -l 5399
# 方式三：VS Code 装 Live Server 插件，右键 index.html → Open with Live Server然后浏览器打开 http://localhost:5399。
端口可以换成任意空闲端口。如果起服后打开页面发现是别的项目，说明端口被占了，换一个即可。
直接访问 https://feiteng68.github.io/Handwritten-Prompt-Gallery/。因为是 HTTPS 环境，复制和 IndexedDB 都能正常工作。
- Fork 或把仓库 clone 到本地
- 推到你的 GitHub 仓库（不需要任何构建步骤，推上去就是成品）
- 仓库 Settings → Pages → Source 选
Deploy from a branch，分支选main、目录选/ (root)，保存 - 等 1 分钟左右，访问
https://<你的用户名>.github.io/<仓库名>/
整个项目没有任何构建流程，改了文件推上去就是新的。
.
├── index.html 主页面（列表页 + 详情/编辑弹窗 + 导入弹窗）
├── css/
│ └── style.css 双主题样式（CSS 变量驱动）
├── js/
│ ├── store.js 数据层：IndexedDB 读写 + 图片压缩
│ ├── templates.js 输出模板：通用 / Midjourney / SD / 即梦
│ ├── zip.js ZIP 打包（自写，零依赖，优先原生 deflate-raw）
│ ├── tags.js 标签管理：统计 / 重命名 / 合并 / 删除
│ ├── similar.js 相似风格检索：风格 + 标签 + 文本相似度打分
│ ├── api.js AI 层：视觉模型适配、强制 JSON 提示词、容错解析
│ ├── export.js 导出 / 导入：JSON 打包解析、Markdown、ZIP、按 id 去重
│ └── main.js 交互层：列表/筛选/搜索/增删改/复制/主题/菜单
├── worker/
│ └── cloudflare-worker.js 可选：反推接口的跨域中转脚本
├── assets/
│ └── preview/ 随仓库提交的示例图（用户上传的图不在这里）
├── prompts/
│ └── sample.json 内置示例素材
├── docs/ README 用的截图
├── LICENSE MIT
└── README.md
- 点右上角「＋ 新增素材」
- 填写名称、选择风格分类、填标签（用逗号分隔，如
标题字, 描边, 竖排） - 正向提示词建议按这个顺序写：书写工具 → 笔触特点 → 线条与字距 → 背景材质 → 用途
- 负面提示词写你不想要的东西，例如
印刷体，宋体，笔画等宽，模糊，水印 - 拖拽或点击上传预览图（保存时会自动压缩到长边 800px）
- 保存后自动跳到详情页，可以直接复制验证
- 卡片上的「复制全集」按默认模板复制整套
- 详情弹窗里点「复制 ▾」可以选任意模板复制，也可以分别复制正向、负面
- 选过的模板会成为新的默认模板，下次点卡片就直接用这个格式
同一份提示词，按目标工具拼成不同语法。点左侧栏「输出模板设置」配置，右侧有实时预览。
| 模板 | 拼装结果 |
|---|---|
| 通用纯文本 | 带「正向提示词：／负面提示词：」标签行，贴哪都能用 |
| Midjourney | 正向 + --no 负面关键词 + --ar 3:4 --style raw --v 6.1 --stylize 100（比例、版本、风格化可调；负面词里的中文逗号会自动转成英文逗号） |
| Stable Diffusion | A1111 格式，正向 + Negative prompt: + Steps / Sampler / CFG scale / Size 参数行 |
| 即梦 Dreamina | 正向 + 不希望出现：负面 的中文句式（前缀可改） |
模板只影响复制出来的文本，不改动素材内容。
- 收藏：鼠标移到卡片上，右上角会出现一个星标，点一下就收藏。左侧栏最上方的「★ 收藏」可以只看收藏过的素材。
- 找相似：打开一条素材的详情，点「找相似」。它会在本地把你库里最接近的素材排出来，标出相似度和「同风格 / 跨风格」，点一下直接跳过去看。计算方式是「风格分类 40% + 标签重合 30% + 提示词文本相似度 30%」，全程在浏览器里算，不上传任何数据。
觉得结果太少？说明素材的标签打得不够。标签越具体，相似检索越准。
点左侧栏「标签」旁的「管理」：
- 重命名：直接改输入框里的名字
- 合并：重命名时填一个已存在的标签名，两个标签会自动合并，同一条素材内的重复标签会去掉
- 删除：从所有素材上移除这个标签，素材本身不受影响
标签改动不会更新素材的更新时间——改个标签名不该把素材顶到「最近更新」最前面。
点右上角「导出 ▾」，四选一：
| 选项 | 适用场景 | 说明 |
|---|---|---|
| JSON · 含预览图 | 换电脑、重装浏览器、长期存档 | 图片以 base64 内嵌进同一个文件，单文件自包含，导入后预览图一并还原 |
| JSON · 不含图片 | 分享提示词、存进 git | 体积小得多，导入后素材在但没有预览图 |
| Markdown · 纯文字 | 放进 Obsidian、Notion | 按风格分组，带风格索引，提示词放在代码块里 |
| ZIP 压缩包 | 想拿到图片原文件 | 分出 images/ 目录，JPEG 可直接拖进 PS / 剪映；同时附 JSON 与 Markdown |
ZIP 包内结构：
hpg-20260914-1330/
├── items.json 素材数据（含 id 与图片对应关系）
├── images/ 预览图，文件名即素材 id
├── 提示词.md 按风格分组的 Markdown
└── 怎么用.txt 说明
点「导入」，一次可以选多个文件，JSON 和 ZIP 都能读，内容会汇总后一起导入。选完先弹出预览：
- 一共几个文件、多少条素材、多少张预览图、有没有无效条目
- 与现有库有多少条 id 相同——相同就表示合并时会覆盖
确认后选一种方式：
- 合并：保留现有素材，id 相同的用文件内容覆盖，其余作为新素材加入，不会产生重复条目。日常迁移用这个。
- 覆盖：先清空当前全部素材与预览图，再导入文件内容。不可撤销，只在你确定要用这份备份完整替换时使用。
ZIP 和 JSON 都能完整回导——ZIP 里的 images/ 会被读出来还原进本地库，收藏状态也一并保留。
建议：导入前先导出一份当前素材作为保险，弹窗底部也有这句提示。
- 先在左侧栏底部「AI 反推设置」里配好服务商和 API Key（只需配一次）
- 点右上角「图片反推」
- 拖一张手写字体效果图进去，点「开始反推」，等 5–20 秒
- AI 会填好名称、风格分类、正向提示词、负面提示词、标签、适用场景，并给出它的观察和把握度
- 自己核对修改一遍——反推只是近似描述，不可能 100% 复刻原图。标签可以直接点
×删掉不合适的 - 点「确认入库」，这条素材会带「图片反推」标记存进素材库，和手动录入的区分开
不满意可以点「重跑一次」。展开「AI 的观察与原始返回」能看到模型的原始输出，方便判断它是不是看错了。
素材和图片都存进浏览器的 IndexedDB（数据库名 hpg），只存本地。清理浏览器站点数据会一并清掉，所以请养成定期导出的习惯——尤其换电脑或重装浏览器之前。
为什么不用 localStorage？它的容量只有约 5MB，图片转 base64 还要再膨胀 33%，几十张就写满，而且超限是静默失败——素材会「看着存了，其实没存」。
图片反推要调用一个多模态视觉模型。点左侧栏底部的「AI 反推设置」配置，四家可切换：
| 服务商 | 默认模型 | 开通地址 |
|---|---|---|
| 通义千问（默认） | qwen-vl-max |
https://bailian.console.aliyun.com/ |
| 豆包 | 需自己填推理接入点 ID（ep-xxx） |
https://console.volcengine.com/ark |
| DeepSeek | deepseek-v4-flash-vision-exp（实验版） |
https://platform.deepseek.com/ |
| OpenAI | gpt-4o-mini |
https://platform.openai.com/api-keys |
| 自定义 | 任意 OpenAI 兼容接口 | — |
DeepSeek 目前只有
deepseek-v4-flash-vision-exp这一个模型能读图，其余模型（deepseek-chat 等）会直接报「This model does not support image」。该模型是实验版，图按最多 384 token 计费；日后若模型改名，在设置的「模型」栏里手填即可。
配好后点「测试连接」，能拿到模型回复就说明通了。
浏览器直接请求这些接口，可能被跨域策略（CORS）拦掉，表现为「请求没能发出去」。两种解法：
- 配代理（推荐）：把
worker/cloudflare-worker.js部署到 Cloudflare Workers，把地址填进设置里的「代理地址」。免费额度每天 10 万次，个人绰绰有余。 - 把页面部署到能正常访问该接口的环境再试。
代理脚本还支持在 Worker 的环境变量里配一个加密变量 API_KEY——配了之后请求由服务端带 Key，前端就不必保存 Key 了。
- API Key 只存在你自己浏览器的 localStorage（键名
hpg.ai），不会上传到任何地方 - 不要把 Key 写进代码或提交到仓库，
.gitignore已屏蔽.env/local.json/keys.json - 上传的图片会先在前端压缩到长边 1024px、JPEG 质量 0.85 再发送，单张约 100–200KB，控制请求体积和调用成本
- 模型只输出 JSON，前端对返回值做了四层容错（直接解析 → 剥 markdown 围栏 → 抠花括号区间 → 去尾逗号重试），并对字段做归一化，模型返回中文键名、字符串标签、离谱的风格分类都能兜住
prompts/sample.json 内置 8 条示例，覆盖 5 种风格：秀丽笔标题字、中性笔手账体、细钢笔复古信笺、马克笔街头字、黑底白字霓虹字。首次打开点「载入示例素材」即可查看。示例 id 固定，重复载入只会覆盖不会产生重复条目。
- 不引入框架与构建工具：原生 HTML/CSS/JS，改一行存盘刷新即生效，开源贡献者不需要懂构建链路
- 不引入 Tailwind CDN：双主题 + 国风配色用 CSS 变量表达更直接，且页面零外部依赖、断网可用。样式全部集中在
css/style.css，改:root里的变量即可换肤 - ZIP 是手写的：为了不引入 JSZip 这类外部依赖，
js/zip.js自己实现了 ZIP 结构（本地文件头 + 中央目录 + EOCD + CRC32），压缩优先用浏览器原生CompressionStream('deflate-raw')，不支持时退回不压缩存储。写出来的包用 Pythonzipfile校验过 CRC - IndexedDB 而非 localStorage：见上文「数据存在哪」
file://直开的限制：受浏览器安全策略，file://下 Clipboard API 与fetch会受限，请务必用本地服务器或 GitHub Pages 访问
本项目只提供提示词管理与检索工具，不附带任何字体文件，也不包含他人作品。示例提示词仅供设计灵感参考，请勿盗用他人作品用于商业用途。使用视觉模型反推得到的结果仅为近似风格描述，无法 100% 复刻原图；上传他人原创效果图请仅作个人灵感留存，商用需自行取得授权。