在使用 AI 生成图片的过程中，我经常遇到两个场景：

1. 看到一张精美的图片后，想提取为提示词并稍作修改，生成相似风格的新图片。
2. 输入简单的元素描述（如"兔子、圣诞节、雪、街角、灯光"），让 AI 扩展成完整的创意提示词。

每次和 AI 对话都要重复输入"你是一名专业的XXX，请帮我构思……"类似的提示，生成后还要修改提示词，效率低下。

因此，我决定开发一款提示词助手，用 AI 来解决这个问题，自动化这些重复性工作。

现在，这款工具已上线：提示词助手。解决了我自己的问题，也免费分享给有需要的朋友使用。

核心功能：

1. 分析图片特征，转换为提示词
2. 输入关键词，设置参数，生成提示词

需求梳理和界面设计

功能相对简单，我快速梳理需求后直接在 Figma 中设计 UI。

由于提示词助手将集成到现有 Blog 项目中，可直接复用已有的组件样式与设计风格，因此我在 Figma 中并未绘制过于精细的 UI，而是让 AI 后续直接调用或参考这些现有组件。先实现核心功能，细节留待后续迭代。

若从零开始构建产品，建议采用成熟的组件库，效率更高。

Figma 设计时，为图层添加自动布局，并使用"container"、"list"、"card"、"item"等语义化命名，便于 AI 识别。

设计完成后，将设计图发给 AI，让它梳理需求并在项目根目录生成需求文档，再手动检查是否有遗漏。

技术架构

在需求文档中明确技术架构，便于 AI 按照指定方案实现。本项目采用 Next.js 15 + React 19 + Tailwind CSS，数据存储使用 IndexedDB，支持自定义 API 配置，可接入不同的 AI 服务。

所有数据存储在用户本地，我无法访问用户上传的图片或提示词。用户内容仅发送给 API 端点，目前使用第三方公益站点提供的服务。

项目支持自定义 API 端点，你可以使用 OpenRouter 等平台的 API。没有 API 密钥的用户可使用我提供的免费端点。

AI 还原设计图

开发工具采用 Cursor + Roocode 组合。Cursor 配合 Opus 4.5 模型处理复杂需求，Roocode 配合 Sonnet 4.5 模型处理简单需求。[^1]

以"图片分析"功能为例：在 Figma Dev 模式下，选择画板并点击「Copy example prompt」复制提示词，粘贴到 Cursor 生成代码。先确保功能正常运行，再调整样式和优化交互。[^2]

功能实现

工具采用单页面应用架构，通过 Tab 组件切换图片分析和创意生成两种功能。每个功能拥有独立的状态管理和数据存储，确保功能隔离的同时共享 API 配置和使用统计。

核心架构设计

• 组件分层：将共享组件（Tab切换器、API配置弹窗）与业务组件（上传器、参数选择器、历史记录）分离，提高代码复用性。
• 状态管理：使用 Zustand 实现轻量级状态管理，分别维护两个功能各自独立的 store。
• API 配置：支持默认端点和自定义配置两种模式。内置多个免费 API 端点，实现负载均衡和故障转移。用户也可配置自己的 API 密钥。

图片分析

图片分析模块实现了完整的图片转提示词流程：

• 多样化上传：支持点击选择、拖拽上传、剪贴板粘贴三种方式。拖拽时显示上传区域高亮，提升交互体验。
• 智能识别：上传后自动压缩图片并转换为 Base64 格式，调用 AI 视觉模型分析图片内容、风格、构图等要素。
• 风格选择：提供多种分析风格（通用、即梦、Liblib、Midjourney），满足不同创作需求。

创意生成

创意生成模块提供了丰富的参数配置体系：

• 基础参数：快速访问常用设置，包括宽高比、艺术风格、色彩、光线和构图，通过标签形式直观展示。
• 扩展参数：点击"更多"打开参数弹窗，包含20多个分类（设计用途、色调、摄影角度、艺术流派、材质纹理等），每个分类下有10-20个具体选项，总计300多个参数。
• 智能标签：生成的提示词以可编辑标签形式展示。支持点击修改、拖拽排序、智能联想。输入文本时自动匹配参数库，实现快速转换。
• 参数管理：开发了独立的参数管理后台，支持分类和参数的增删改、排序。每个参数配有预览图，帮助用户直观理解效果。

参数配置基于小红书用户黄白整理的《提示词攻略手册》。原计划自动抓取飞书文档中的图片，但因技术限制最终手动上传了300张左右的配图。

历史记录与交互优化

两个模块都配备了完善的历史记录功能：

• 侧边栏展示：将历史记录渲染到页面右侧，不影响主界面布局。支持展开/收起，自动保存状态。
• 详情查看：点击历史项打开详情弹窗，显示完整的输入参数和生成结果。支持编辑草稿、删除记录、参数复用。
• 智能排序：历史记录按时间倒序排列，最新的显示在最前。支持搜索过滤，快速定位目标记录。
• 性能优化：使用虚拟滚动技术处理大量历史记录，保证界面流畅。IndexedDB 异步操作避免阻塞主线程。

数据存储与隐私

采用 IndexedDB 本地存储方案，所有历史记录、配置信息均保存在用户浏览器中。每个功能模块维护独立的数据表，支持历史记录查看和参数复用。

用户数据完全本地化，开发者无法访问。API 调用直接从浏览器发起，确保数据安全。支持自定义 API 端点配置，用户可使用自己的 API 密钥或选择免费公益服务。

[^1]: 我现在使用的 AGENTS.MD 提示词：暴躁 linus 提示词 [^2]: 需先安装 Figma MCP 并登录，确保连接状态正常。参见 Figma MCP 使用指南

疯狂动物城2 太火了，附近的 4D 影院这一周全是满座，只能等等了，去看个 4D 版本。

:::movie{video=https://img.kirbyrun.com/note/zootopia2.mp4} 3c1kyDKUvemvvxWRAKVAt6 :::

近期好剧

:::movie 0otzzGCwrnkoWgiEJMcS4m :::

:::movie 7NphpScpIBmmilLVespRVs :::

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

前言

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

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

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

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

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

先来看看最终效果：

基本思路

核心想法其实很简单：把聊天记录当作数据，用 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，展览的地点在上海复星艺术中心，展览的规模不大，但是展出的作品还是很有意思的。可以看到日本平面设计的一些特点，比如简约主义、负空间的运用、自然元素、色彩的运用、精工细作等，感受到设计师对细节的极致追求。

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

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

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

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

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

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

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

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

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

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

开通 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 代码
• 未来扩展潜力 :::

快速参考

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

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

https://motion.dev

爱，抵过世间的千辛万苦。

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

准备工作

1. 切换 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 的生成逻辑。

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 功能的使用通知，初步体验了一会儿，整体还不错。

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

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

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

翻译：没问题，很好用。

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

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

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

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

这不是新机？开玩笑吧！

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

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

这不是新机是什么？

是个闹钟……

视觉冲击力炸裂，就是结局让人感觉不适。

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

:::movie 6BC9VYt0bEyqrIyfp6OwXj :::

刚刚给「随笔」的页面增加了展示豆瓣影音的卡片，从 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 记录。

使用 Cloudflare 代理地址来请求

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

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