Claude Code Skills 真的太好用了！
我用 Claude-meta-skill 里的 create-skill-file ，创建了 2 个 skill 文件，花了 2 天时间，就把网站的大部分前端样式从 Radix UI 换成了 Coss UI，部分页面还顺便做了一些小重构。
要是在以前，根本不敢想象这种工程量。Skills 就像是 Prompt 命令和自动化工具 n8n 的结合，能帮你自动执行长任务，效率直接翻了好几倍。
疯狂动物城2 太火了，附近的 4D 影院这一周全是满座，只能等等了，去看个 4D 版本。
:::movie{video=https://img.kirbyrun.com/note/zootopia2.mp4} 3c1kyDKUvemvvxWRAKVAt6 :::
近期好剧
:::movie 0otzzGCwrnkoWgiEJMcS4m :::
:::movie 7NphpScpIBmmilLVespRVs :::
最近搞了台折叠屏备用机，没想到安卓系统现在这么好用了。 装个 WordBit 就可以在锁屏上背单词。系统也很流畅，没有花里胡哨的奇怪动画。信号也比 iPhone 好多了，以前坐高铁看剧，看会儿就要缓冲，现在用备用机看剧还没遇到过缓冲。下一部手机真的可以考虑一下安卓系统了。
周末去看了一个平面设计的展览，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 会员后一直没怎么用过，昨天来了灵感，把 Friends 页面的数据迁移到 Notion 中，使用 Notion 的数据库功能作为后端的数据库，这样还可以直接在 Notion 中方便管理 Friends 信息。
之前每次访问都要从 Supabase 中先获取 Friends 数据，然后还要获取每个网站的 Favicon 和 RSS 文章，请求次数太多，响应速度也慢。
这次改造后，Frinends 的基础信息、 Favicon 和 RSS 文章都自动同步到 Notion 中，这样就只需要从 Notion 中获取数据，请求次数大大减少，响应速度也大大提升。
再使用 GitHub Actions 每 4 个小时自动同步一次 RSS 文章到 Notion 中，有完整更新和增量更新两种模式，保证数据的及时性。
杰伦已经很久没有出新歌了，最近的几首歌也是表现平平，远不如他早期的作品。
偶然的一次，在 Spotify 上听到一首歌，以为杰伦又出新歌了，结果一看发现是陈默之的。点进他的主页听了听，发现还挺不错的，算是杰伦的完美平替 🤣
本页面展示了博客中可用的所有短代码（Shortcodes）语法。
短代码是一种简化的语法，使用 ::: 标记来快速创建复杂组件，无需编写完整的 JSX 代码。
:::info 这是一条普通信息提示。 :::
:::info{title="提示"} 这是一条带标题的信息提示。 :::
:::success 这是一条成功提示。 :::
:::warning{title="注意"} 这是一条带标题的警告提示。 :::
:::danger 这是一条危险提示。 :::
:::note 这是一条笔记提示。 :::
:::info
你的信息内容
:::
:::info{title="标题"}
带标题的信息提示
:::
:::success
你的成功信息
:::
:::warning{title="警告"}
你的警告内容
:::
:::danger
你的危险警告内容
:::
:::note
你的笔记内容
:::
:::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
:::
:::bilibili https://www.bilibili.com/video/BV1GJ411x7h7 :::
语法：
:::bilibili
https://www.bilibili.com/video/BV1GJ411x7h7
:::
:::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_IDhttps://youtu.be/VIDEO_IDhttps://www.youtube.com/embed/VIDEO_ID:::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
:::
:::tweet 1983226019189301677 :::
语法：
:::tweet
TWEET_ID
:::
:::hide 这是被隐藏的剧透内容，点击才能看到！ :::
语法：
:::hide
要隐藏的内容
:::
:::mark 这是一段被高亮的文本。 :::
你也可以在段落中间使用 行内高亮 来标记重点内容，效果是一样的。
语法：
:::mark
要高亮的内容
:::
或者：
在段落中使用 <mark>高亮内容</mark>
代码对比：
:::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="免费版"}
::panel{title="专业版"}
::panel{title="企业版"}
:::
语法：
:::compare
::panel{title="面板 1"}
内容 1
::panel{title="面板 2"}
内容 2
::panel{title="面板 3"}
内容 3
:::
:::warning React Compiler 有哪些用途
| 短代码 | 用途 |
|---|---|
:::info |
信息提示 |
:::success |
成功提示 |
:::warning |
警告提示 |
:::danger |
危险警告 |
:::note |
笔记说明 |
:::gallery |
网格图片 |
:::colsgallery |
瀑布流图片 |
:::hualang |
画廊相册 |
:::bilibili |
B 站视频 |
:::youtube |
YouTube 视频 |
:::movie |
电影卡片 |
:::book |
书籍卡片 |
:::link |
链接预览 |
:::tweet |
推特嵌入 |
:::hide |
剧透隐藏 |
:::mark |
文本高亮 |
:::compare |
内容对比 |
今天全网都在围观讨论 Airbnb 的新设计和全新自研的动画文件格式，网站中使用了很多拟物图标，看起来很有设计感。
一打开 Airbnb 网站，就被顶部菜单栏里的动画硬控了几分钟。等我回过神来，便想起来给自己小破站中的图标也加上动画。于是便开始用 Motion 实现了一些，都是相对比较简单的图形动画，虽然增加了一点趣味性，但还是缺少创意。
爱，抵过世间的千辛万苦。
最近太忙了，昨天甚至工作了14个小时，感觉有点累。
从年后到现在，大部分工作日，都会保持工作时间在10-12个小时左右。想做两三个东西出来，需要思考场景，分析竞品，梳理需求，画设计图，思考技术，思考实现。
为了赚点外块，也在和朋友一起做一些东西。各种事情叠加，感觉自己有点像一个陀螺，被各种事情拉着转。
大部分工作，甚至还是借助 AI 完成的，如果没有 AI ，自己会更忙。
最近感觉 AI 工具也越来越好用了，每个好用的工具还都有它自己好用的场景。比如：
还买了 Lenny’s Bundle，里面全是 AI 工具，感觉也很划算。
今年是提效的一年，被各种 AI 工具拉着往前走，自己也在慢慢适应。但至少有一半的工作，应该由自己亲自完成，以保证自己仍然掌握古法制作的方法。😅 不至于没有 AI 后，就不知道怎么干活了。
任天堂10月9日晚上公布硬件新品 “Alarmo”，售价 99.99 美元（约 707 元人民币）/ 12980日元（约 616 元人民币），系统支持简繁中文。
这不是新机？开玩笑吧！
首发就有五款重量级游戏陪你起床，堪比 Switch 发售时的阵容！
而且后续还会免费更新《动森》和《马车8DX》主题，让你每天都能在不同的任天堂世界中醒来。
这不是新机是什么？
是个闹钟……
视觉冲击力炸裂，就是结局让人感觉不适。
:::movie{video=/video/the-substance1.webm} 3n9buL3yaSCQgfBDFYTL2m :::
:::movie 6BC9VYt0bEyqrIyfp6OwXj :::
Claude Code Skills 真的太好用了！
我用 Claude-meta-skill 里的 create-skill-file ，创建了 2 个 skill 文件，花了 2 天时间，就把网站的大部分前端样式从 Radix UI 换成了 Coss UI，部分页面还是顺便做了一些小重构。
要是在以前，根本不敢想象这种工程量。Skills 就像是 Prompt 命令和自动化工具 n8n 的结合，能帮你自动执行长任务，效率直接翻了好几倍。
在使用 AI 生成图片的过程中，我经常遇到两个场景：
每次和 AI 对话都要重复输入"你是一名专业的XXX，请帮我构思……"类似的提示，生成后还要修改提示词，效率低下。
因此，我决定开发一款提示词助手，用 AI 来解决这个需求，自动化这些重复性的工作。
现在，这款工具已上线：提示词助手。解决了我自己的需求，也免费分享给有需要的朋友使用。
核心功能：
功能相对简单，我快速梳理需求后直接在 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 密钥的用户可使用我提供的免费端点。
开发工具采用 Claude Code 终端 + RooCode，主要使用 Sonnet 4.5 模型。[^1]
以"图片分析"功能为例：在 Figma Dev 模式下，选择画板并点击「Copy example prompt」复制提示词，粘贴到 Claude Code 生成代码。先确保功能正常运行，再调整样式和优化交互。[^2]
工具采用单页面应用架构，通过 Tab 组件切换图片分析和创意生成两种功能。每个功能拥有独立的状态管理和数据存储，确保功能隔离的同时共享 API 配置和使用统计。
核心架构设计
图片分析
图片分析模块实现了完整的图片转提示词流程：
创意生成
创意生成模块提供了丰富的参数配置体系：
参数配置基于小红书用户黄白整理的《提示词攻略手册》。原计划自动抓取飞书文档中的图片，但因技术限制最终手动上传了300张左右的配图。
历史记录与交互优化
两个模块都配备了完善的历史记录功能：
采用 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 :::
