阅读视图

我用 AI 开发了一款提示词助手

在很长一段使用AI生成图片的过程中,我发现自己有两个重复的需求:

  1. 发一张很好看的图片,感觉创意很好,想把这张图片转换为生成该图片的提示词,稍微修改提示词中的一些内容后,重新生成相似的图片。
  2. 描述我想要的图片元素,比如"兔子,圣诞节,雪,街角,灯光",让AI帮我生成相关的创意提示词,稍微修改一下提示词,再去生成图片。

每次对话都要重复这些步骤,“你是一名专业的XXXX,请帮我……”,非常繁琐。

需求1

于是我决定开发一款提示词助手,简化这些重复的工作。

现在,你可以在AI 助手使用这款提示词助手。

前期规划

在开发之前,我根据自己的大概需求,在 Figma 里绘制了简单的 UI 设计图。

考虑到快速开发调试,UI 并没有画的很细致,只实现基本功能。因为后期 UI 肯定还会优化调整。但是建议给图层加上自动布局,并使用类似“container”、“list”、“card”、“item” 之类的命名,对 AI 更友好。

UI 设计图1

需求一定要梳理,如果你不想梳理也有办法,把设计图发给 AI ,让 AI 帮你梳理需求。自己再检查一遍,看看有没有遗漏什么。

技术架构

因为我的这个提示词助手是基于当前 Blog 项目集成的,所以技术架构也是基于当前 Blog 项目的技术架构。

使用 Next.js 15,数据存储使用 IndexedDB 本地存储,我不会看到用户上传的任何图片或提示词,所有的数据都存储在用户本地。用户的内容只会发送给 API 端,但由于目前 API 都是使用的第三方公益站点,所以第三方想看的话还是可以的。

当前项目也提供了自定义 API 端点的功能,你可以从 openrouter 之类的平台上购买 API 并在本项目中使用。

开发过程

工具我主要使用了 Cursor + Roocode。Cursor opus 4.5 处理复杂需求,Roocode 处理简单需求。

以“图片分析”功能为例,在 Figma 中切换到 Dev 模式,选择相关设计图画板后,在右侧有「Copy example prompt」 按钮,点击后会复制相关设计图的提示词,然后粘贴到 Cursor 中,让 Cursor 帮我实现样式和功能。样式有一些偏差不要紧,先确保所有的功能都正常使用,最后再调整样式,优化交互,加上动画效果。[^1]

技术实现

用了 Next.js 15 + React 19 + Tailwind CSS,数据存储在 IndexedDB。

API 支持自定义配置,可以接入不同的 AI 服务。默认支持几个主流模型。

开发过程分享与总结

图片分析:

  • 也就是图片转换为提示词功能,这个功能相对简单,上传组件直接在 提示词 的发布图片提示词组件上改造的。
图片分析

创意生成

  • 最难是参数配置模块,在“更多”参数配置弹窗中,我使用了小红书用户 黄白 整理的《提示词攻略手册》中的内容(特别感谢)。自动抓取图片失败,期间还研究了飞书 mcp,无奈最后只抓取了参数名称。让 AI 糊了一个简易的参数管理后台,也方便后续增删改内容。最后手动上传了300多张图片(真的累死)。

  • 生成的创意提示词支持手动编辑,可以点击参数标签直接修改。如果你手动输入的内容刚好也在参数标签之一,会自动转为可编辑的参数标签。

创意生成

[^1]: 需要先给编辑器安装 Figma MCP 并登录到 Figma,确保 MCP 是连接状态。Guide to the Figma MCP server

  •  

备用机

最近搞了台折叠屏备用机,没想到安卓系统现在这么好用了。 装个 WordBit 就可以在锁屏上背单词。系统也很流畅,没有花里胡哨的奇怪动画。信号也比 iPhone 好多了,以前坐高铁看剧,看会儿就要缓冲,现在用备用机看剧还没遇到过缓冲。下一部手机真的可以考虑一下安卓系统了。

  •  

AI Workflow · 微信群聊日报总结助手

前言

微信群聊已经成为很多人工作和交流的主要场所,但随着群成员越来越多,一天下来动辄几百条消息,翻阅起来简直就是灾难。

尤其对于群主或管理员来说,每天都要面对这些挑战:

  • 回顾重要讨论内容和关键信息
  • 整理群内的决策和结论
  • 关注成员反馈和建议
  • 维护群内的信息秩序

传统的方法要么是手动翻阅记录(费时费力),要么是靠记忆(经常遗漏),要么是让助理帮忙总结(成本较高)。有没有更好的解决方案?

试试这个微信群聊日报总结助手吧!它能自动整理聊天记录,生成一份清爽的日报网页,把群里的讨论脉络梳理得明明白白。

先来看看最终效果:

基本思路

核心想法其实很简单:把聊天记录当作数据,用 AI 当作智能秘书

具体的技术路径是这样的:

  1. 数据获取 - 通过 Chatlog 把微信的加密聊天记录导出成可读格式
  2. 智能处理 - 设计专门的提示词,让 AI 理解群聊的上下文和语境
  3. 结构化输出 - 生成包含时间线、话题分类、重要结论的日报网页
  4. 服务集成 - 用 MCP 协议把各个工具串联起来,打造顺滑的工作流

关键在于提示词的设计,这里花了不少心思。不仅要让 AI 理解聊天记录的脉络,还要能识别出重要的讨论内容、争议点、决策结果等。最终生成的日报就像一份会议纪要,既保留了原始信息的丰富度,又用清晰的结构呈现了出来。

用到的工具

实现这个日报总结,主要靠这两样工具:

  • Chatlog - 微信聊天记录导出工具,帮你解密和导出群聊数据
  • ChatWise - AI 对话工具,也可以用 Cherry Studio,记得准备好 API 密钥

操作流程

第一步:导出聊天记录

用 Chatlog 来解密微信聊天记录。GitHub 上有详细的教程,这里简单说说关键点:

按图中的步骤操作就行,解密完成后就能获取到聊天数据。

第二步:配置 AI 工具

选择 AI 服务

试了几家服务之后,感觉 Gemini 2.5 Flash 最稳定,出错率最低。

配置 MCP 服务

在 ChatWise 里添加 MCP 服务连接:

设置智能助手

关键是这个系统提示词,我放到 GitHub Gist 上了,直接复制粘贴用就行:

群聊日报 V1 提示词

对了,我网站上还有其他一些实用的提示词模板,感兴趣可以去文本提示词页面看看。

生成日报

配置好了之后,输入这句话就可以开始总结:

「XXXX年X月X日,某某群 今天都聊了什么?」

等一会儿,AI 就会自动生成日报报告:

一点小 tips

  1. 网页右下角暂时空着,还在想放什么好玩的东西
  2. 提示词有点长(500 多行),会多消耗一些 token
  3. 用了 Tailwind CSS 样式,想改样式的话可以引用外部 CSS 文件,省点 token
  4. Chatlog 生成的数据库文件挺占地方的,用完记得定期清理
  •  

Graphic Design in Japan

周末去看了一个平面设计的展览,Graphic Design in Japan,展览的地点在上海复星艺术中心,展览的规模不大,但是展出的作品还是很有意思的。可以看到日本平面设计的一些特点,比如简约主义、负空间的运用、自然元素、色彩的运用、精工细作等,感受到设计师对细节的极致追求。

二楼主要是平面设计作品和物品展示,三楼是阅读区和视频观看区,有一些 360°Design 的书籍可以阅读,或者观看创作者的访谈视频。

  •  

淮安西游乐园

上周末和姐姐家一起带娃去淮安玩了3天,打卡了西游乐园和一些其他景点,真的热到爆炸,晒了一天,晒得乌黑。

西游乐园的体验还是不错的,项目非常多,适合带小朋友去玩。

大雷音寺穿越之旅:模仿迪士尼的「疯狂动物城」?效果一般,甚至可以看到墙后面的显示器在播放动画…

三打白骨精:坐在360°旋转的座椅上转啊转,太小的小朋友真不适合玩这个,感觉有掉下去的危险…

无人机灯光秀还是挺好看的。烟花秀不行,感觉抠抠搜搜的,放几下就蔫了。

高老庄剧场的演出效果不错,大概20分钟左右的观剧体验很好。

里面除了自动售卖机里的饮料比较贵,大概是正常价格的4倍,其他吃的东西价格都还好。

:::hualang{title="西游乐园" where="江苏·淮安"} /note/xiyouleyuan1.avif /note/xiyouleyuan2.avif /note/xiyouleyuan3.avif /note/xiyouleyuan4.avif /note/xiyouleyuan5.avif :::

  •  

用剪映看国外课程,字幕识别加翻译

下载了国外的视频课程,打开一看字幕都没有,只有声音,瞬间两眼一黑。

没关系,导入到剪映专业版(无需登录),把视频拖到下方编辑区域,点击上方工具栏里的“字幕”,翻译语言选择“中文”,其他选项可选,然后点击“开始识别”,等待识别完成,双语字幕,完美。如果你想隐藏英文字幕,在下方视频编辑区左侧,点击眼睛图标隐藏即可。我的剪映版本 V7.7.0,测试通过。
  •  

把 Notion 用起来了

开通 Notion 会员后一直没怎么用过,昨天来了灵感,把 Friends 页面的数据迁移到 Notion 中,使用 Notion 的数据库功能作为后端的数据库,这样还可以直接在 Notion 中方便管理 Friends 信息。

之前每次访问都要从 Supabase 中先获取 Friends 数据,然后还要获取每个网站的 Favicon 和 RSS 文章,请求次数太多,响应速度也慢。

这次改造后,Frinends 的基础信息、 Favicon 和 RSS 文章都自动同步到 Notion 中,这样就只需要从 Notion 中获取数据,请求次数大大减少,响应速度也大大提升。

再使用 GitHub Actions 每 4 个小时自动同步一次 RSS 文章到 Notion 中,有完整更新和增量更新两种模式,保证数据的及时性。

  •  

周杰伦的平替出现了

杰伦已经很久没有出新歌了,最近的几首歌也是表现平平,远不如他早期的作品。

偶然的一次,在 Spotify 上听到一首歌,以为杰伦又出新歌了,结果一看发现是陈默之的。点进他的主页听了听,发现还挺不错的,算是杰伦的完美平替 🤣

  •  

短代码使用指南

本页面展示了博客中可用的所有短代码(Shortcodes)语法。

短代码是一种简化的语法,使用 ::: 标记来快速创建复杂组件,无需编写完整的 JSX 代码。


1. 信息提示框

效果展示

:::info 这是一条普通信息提示。 :::

:::success 这是一条成功提示。 :::

:::warning 这是一条警告提示。 :::

:::danger 这是一条危险提示。 :::

:::note 这是一条笔记提示。 :::

使用语法

:::info
你的信息内容
:::

:::success
你的成功信息
:::

:::warning
你的警告内容
:::

:::danger
你的危险警告内容
:::

:::note
你的笔记内容
:::

2. 图片展示

网格图片

:::gallery https://loremflickr.com/640/480/city?1 https://loremflickr.com/640/480/city?2 https://loremflickr.com/640/480/city?3 https://loremflickr.com/640/480/city?4 https://loremflickr.com/640/480/city?5 https://loremflickr.com/640/480/city?6 https://loremflickr.com/640/480/city?7 https://loremflickr.com/640/480/city?8 https://loremflickr.com/640/480/city?9 https://loremflickr.com/640/480/city?10 https://loremflickr.com/640/480/city?11 :::

语法:

:::gallery
/images/photo1.jpg
/images/photo2.jpg
/images/photo3.jpg
:::

高级选项:

:::gallery{max=6 cols=3 gap=4}
图片URL列表...
:::
  • max - 最多显示的图片数量
  • cols - 列数(默认自适应)
  • gap - 图片间距

瀑布流

:::colsgallery /gallery/yanhua.avif /gallery/beibijia.avif /gallery/lantianlvdi.avif /gallery/rmgc.avif :::

语法:

:::colsgallery
/gallery/image1.avif
/gallery/image2.avif
/gallery/image3.avif
:::

画廊相册

:::hualang{title="西游乐园" where="江苏·淮安"} /note/xiyouleyuan1.avif /note/xiyouleyuan2.avif /note/xiyouleyuan3.avif /note/xiyouleyuan4.avif /note/xiyouleyuan5.avif :::

语法:

:::hualang{title="相册标题" where="拍摄地点"}
/note/photo1.avif
/note/photo2.avif
/note/photo3.avif
:::

3. 视频嵌入

Bilibili

:::bilibili https://www.bilibili.com/video/BV1GJ411x7h7 :::

语法:

:::bilibili
https://www.bilibili.com/video/BV1GJ411x7h7
:::

YouTube

:::youtube https://www.youtube.com/watch?v=dQw4w9WgXcQ :::

语法:

:::youtube
https://www.youtube.com/watch?v=VIDEO_ID
:::

支持的 URL 格式:

  • https://www.youtube.com/watch?v=VIDEO_ID
  • https://youtu.be/VIDEO_ID
  • https://www.youtube.com/embed/VIDEO_ID

4. 媒体卡片

电影卡片

:::movie 6BC9VYt0bEyqrIyfp6OwXj :::

带视频背景:

:::movie{video=/video/the-substance1.webm} 3n9buL3yaSCQgfBDFYTL2m :::

语法:

:::movie
NEODB_MOVIE_ID
:::

:::movie{video=/path/to/video.mp4}
NEODB_MOVIE_ID
:::

书籍卡片

:::book 3Lellbdoz8yNGMnWIUHGjS :::

语法:

:::book
NEODB_BOOK_ID
:::

链接预览

:::link https://react.dev :::

语法:

:::link
https://example.com
:::

5. 社交媒体

推特嵌入

:::tweet 1983226019189301677 :::

语法:

:::tweet
TWEET_ID
:::

6. 特殊功能

剧透隐藏

:::hide 这是被隐藏的剧透内容,点击才能看到! :::

语法:

:::hide
要隐藏的内容
:::

7. 内容对比

代码对比:

:::compare ::panel{title="React 18"}

// React 18 - 使用 useEffect
useEffect(() => {
  fetchData()
}, [])

::panel{title="React 19"}

// React 19 - 使用 use()
const data = use(fetchData())

::panel{title="Next.js 15"}

// Next.js 15 - Server Component
const data = await fetchData()

:::

列表对比:

:::compare ::panel{title="免费版"}

  • 基础功能
  • 5GB 存储
  • 邮件支持

::panel{title="专业版"}

  • 所有基础功能
  • 50GB 存储
  • 优先邮件支持
  • API 访问

::panel{title="企业版"}

  • 所有专业功能
  • 无限存储
  • 24/7 电话支持
  • 专属客户经理

:::

语法:

:::compare
::panel{title="面板 1"}
内容 1

::panel{title="面板 2"}
内容 2

::panel{title="面板 3"}
内容 3
:::

8. 使用技巧

嵌套使用

:::warning React Compiler 有哪些用途

  • 自动优化组件重渲染
  • 简化性能优化工作流
  • 提升应用运行效率
  • 兼容现有 React 代码
  • 未来扩展潜力 :::

快速参考

短代码 用途
:::info 信息提示
:::success 成功提示
:::warning 警告提示
:::danger 危险警告
:::note 笔记说明
:::gallery 网格图片
:::colsgallery 瀑布流图片
:::hualang 画廊相册
:::bilibili B 站视频
:::youtube YouTube 视频
:::movie 电影卡片
:::book 书籍卡片
:::link 链接预览
:::tweet 推特嵌入
:::hide 剧透隐藏
:::compare 内容对比

  •  

为网站中的一些图标添加了动画

今天全网都在围观讨论 Airbnb 的新设计和全新自研的动画文件格式,网站中使用了很多拟物图标,看起来很有设计感。

一打开 Airbnb 网站,就被顶部菜单栏里的动画硬控了几分钟。等我回过神来,便想起来给自己小破站中的图标也加上动画。于是便开始用 Motion 实现了一些,都是相对比较简单的图形动画,虽然增加了一点趣味性,但还是缺少创意。

https://motion.dev

  •  

Eagle 图片自动打标签:AI Autotagger 插件使用指南

前两天在 DEX 群里看到喬雅同学分享的这个小技巧,试用之后发现确实挺好用的。Eagle 作为图片管理工具,一直有个痛点就是标签整理比较麻烦,这个 AI Autotagger 插件算是解决了大半问题。

准备工作

1. 切换 Eagle 语言

先把 Eagle 的界面语言设置为英文,重启软件后才能正常使用插件。

Eagle 语言设置界面

2. 安装插件

在 Eagle 的社区插件页面找到 AI Autotagger 并安装。

🔗 AI Autotagger 插件下载

配置步骤

第一步:申请 Google AI API

推荐用 Google 的 Gemini API,免费额度够日常用了。

  1. 打开 Google AI Studio
  2. 右上角点击「Create API key」
  3. 选择或创建一个项目,生成 API Key

当然你也可以用 OpenAI 的 API,但那个是要花钱的,Google 这边免费就够我用了。

第二步:插件基础设置

打开插件配置页面,按下面这样设置:

  • Provider: Google
  • API Key: 刚刚生成的密钥
  • Custom Model Name: gemini-2.5-flash-preview
  • Max Tokens: Long(64k)
AI Autotagger 插件配置

第三步:创建标签规则

这步是最关键的,配置 AI 的生成逻辑。

  1. 在插件菜单栏点击左下角的「+」号新建配置

    新建配置按钮
  2. 在新建的配置项上右键 → Edit 进入编辑页面

    配置编辑入口
  3. 按图中示例添加三种规则:Name Rule、Description Rule、Tags Rule

    添加规则类型
  4. 配置完成后保存

    配置完成界面

详细的提示词配置

我整理了一套相对实用的提示词规则,复制粘贴就能用:

描述规则 (Description Instruction)

请用中文和英文各写一段准确描述本图像的内容,包括画面主体、构图方式、设计风格、颜色特征、功能意图等。请先输出中文,再输出英文,每段都尽量详细。

标签规则 (Tags Instruction)

请为该图像生成中英文标签,每个标签包含中文词与对应的英文翻译,中英文之间用竖线"|"分隔,"|"的前后用空格来分隔,例如:"按钮 | Button"。标签可涵盖图像类型、风格、构图、颜色、内容元素等,最多 10 个,尽量详细。

命名规则 (Name Instruction)

请根据图像的内容和用途生成一个简洁、准确、有意义的图片名称。命名格式要求如下:首先添加当天日期 (格式为 YYYY-MM-DD),然后添加中文名称,下划线连接英文名称。整体要求突出图像核心特征或用途,不要太长中文部分和英文部分各控制在 30 个字以内。例如:"2025-04-29 弹窗广告_Popup Banner"。

实际使用

配置好了就可以开始用了。

在 Eagle 主界面选中要处理的图片(支持多选,但别一次选太多,容易出错),右键 → Plugin → AI Autotagger,在弹出的窗口左侧选择刚才创建的配置,点击右下角的运行按钮。

批量处理效果

处理完后,你会发现每张图片都自动生成了:

  • 有意义的中文英文双语文件名
  • 详细的图片描述
  • 一系列相关标签

小贴士

生成的描述文案其实是个不错的图片生成提示词,可以直接复制到 Midjourney 或其他 AI 绘画平台试试看,效果通常不错。

试用了几天,感觉这插件确实解放了不少生产力,尤其是处理设计素材的时候,再也不用一张张手动写标签了。

  •  

太忙了

最近太忙了,昨天甚至工作了14个小时,感觉有点累。

从年后到现在,大部分工作日,都会保持工作时间在10-12个小时左右。想做两三个东西出来,需要思考场景,分析竞品,梳理需求,画设计图,思考技术,思考实现。

为了赚点外块,也在和朋友一起做一些东西。各种事情叠加,感觉自己有点像一个陀螺,被各种事情拉着转。

大部分工作,甚至还是借助 AI 完成的,如果没有 AI ,自己会更忙。

最近感觉 AI 工具也越来越好用了,每个好用的工具还都有它自己好用的场景。比如:

  • 用豆包来整理改写文档文案
  • 用即梦来生成好看的场景图
  • 用 GPT4o 来以图生图
  • 用 Chatwise 搭配 Grok3 的 API,快速推理,找想要的东西。
  • 用 Cursor 来写代码,Claude 3.7 和 Gemini 2.5 Pro 真的强!
  • 用 Dai 浏览器来快速总结网页要点

还买了 Lenny’s Bundle,里面全是 AI 工具,感觉也很划算。

今年是提效的一年,被各种 AI 工具拉着往前走,自己也在慢慢适应。但至少有一半的工作,应该由自己亲自完成,以保证自己仍然掌握古法制作的方法。😅 不至于没有 AI 后,就不知道怎么干活了。

  •  

Figma AI 功能初体验,效率再次提升

刚刚收到了 Figma AI 功能的使用通知,初步体验了一会儿,整体还不错。

重命名图层:暂时还不支持中文命名。重命名后是英文,甚至还会把你原来中文命名翻译为英文。整体清爽多了,对于英语用户来说没问题。

交互原型:感觉不太好用,我将一个制作好的交互原型用它来重新生成,只提供了很简单的效果,无法实现复杂的交互效果。

生成设计图:也还行,默认生成的是英文的,可以翻译一下为中文。

翻译:没问题,很好用。

重写:没问题,可以在最后加上一句“重写为中文”,否则会重写为英文。

抠图:效果一般,图片放大看,部分边缘有锯齿,小图勉强能用。

生成图片:我的提示词是 “一件男士大衣,透明背景”,结果生成了下面这个,显然是错误的。应该是对中文的支持不够好,换成英文提示词来生成图像没问题,但图片质量感觉一般。

  •  

这就是Switch 2吗?

任天堂10月9日晚上公布硬件新品 “Alarmo”,售价 99.99 美元(约 707 元人民币)/ 12980日元(约 616 元人民币),系统支持简繁中文。

这不是新机?开玩笑吧!

首发就有五款重量级游戏陪你起床,堪比 Switch 发售时的阵容!

而且后续还会免费更新《动森》和《马车8DX》主题,让你每天都能在不同的任天堂世界中醒来。

这不是新机是什么?

是个闹钟……

  •  

利用 Cloudfare Worker 来代理请求的地址

刚刚给「随笔」的页面增加了展示豆瓣影音的卡片,从 NeoDB API 获取数据,但是手机上没开代理浏览时发现无法获取到数据,想起来之前在某位大佬的博客中看到过利用 Cloudfare Worker 来代理请求的地址,所以就尝试了一下,发现确实好用。

创建 Worker

首先进入 Cloudfare 的官网,然后点击左侧的 Workers,然后点击 创建 按钮。

创建完 worker 后,编辑并粘贴下方的代码,然后点击「部署」。

export default {
  async fetch(request, env) {
    const url = new URL(request.url)
    url.host = 'neodb.social'

    // 检查请求的来源
    const origin = request.headers.get('Origin') || request.headers.get('Referer')
    if (!origin || !origin.includes('kirbyrun.com')) {
      return new Response('Unauthorized', { status: 403 })
    }

    return fetch(new Request(url, request))
  },
}

部署后,回到“设置”,在「域和路由」这里点击「添加」,选择「路由」。区域选择你的域名,路由设置为 neodb.kirbyrun.com/*

增加 DNS 记录

在你的域名 DNS 里添加 2 条 A 记录。

类型 名称 备注
A neodb 104.18.2.161 仅 DNS
A neodb 104.18.3.161 仅 DNS

使用 Cloudflare 代理地址来请求

原始请求地址是 https://neodb.social/api/${type}/${id},现在可以使用 https://neodb.kirbyrun.com/api/${type}/${id} 来请求数据了。

举一反三,你还将可以用来代理其他被墙的地址。

  •