Claude Code Skills 太好用了！
Claude Code Skills 真的太好用了！
我用 Claude-meta-skill 里的 create-skill-file ，创建了 2 个 skill 文件，花了 2 天时间，就把网站的大部分前端样式从 Radix UI 换成了 Coss UI，部分页面还顺便做了一些小重构。
要是在以前，根本不敢想象这种工程量。Skills 就像是 Prompt 命令和自动化工具 n8n 的结合，能帮你自动执行长任务，效率直接翻了好几倍。
阅读视图
疯狂动物城2
疯狂动物城2 太火了，附近的 4D 影院这一周全是满座，只能等等了，去看个 4D 版本。
:::movie{video=https://img.kirbyrun.com/note/zootopia2.mp4} 3c1kyDKUvemvvxWRAKVAt6 :::
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 中，有完整更新和增量更新两种模式，保证数据的及时性。
短代码使用指南
本页面展示了博客中可用的所有短代码（Shortcodes）语法。
短代码是一种简化的语法，使用 ::: 标记来快速创建复杂组件，无需编写完整的 JSX 代码。
1. 信息提示框
效果展示
:::info 这是一条普通信息提示。 :::
:::info{title="提示"} 这是一条带标题的信息提示。 :::
:::success 这是一条成功提示。 :::
:::warning{title="注意"} 这是一条带标题的警告提示。 :::
:::danger 这是一条危险提示。 :::
:::note 这是一条笔记提示。 :::
使用语法
:::info
你的信息内容
:::
:::info{title="标题"}
带标题的信息提示
:::
:::success
你的成功信息
:::
:::warning{title="警告"}
你的警告内容
:::
:::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_IDhttps://youtu.be/VIDEO_IDhttps://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
要隐藏的内容
:::
文本高亮
:::mark 这是一段被高亮的文本。 :::
你也可以在段落中间使用 行内高亮 来标记重点内容，效果是一样的。
语法：
:::mark
要高亮的内容
:::
或者：
在段落中使用 <mark>高亮内容</mark>
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 |
剧透隐藏 |
:::mark |
文本高亮 |
:::compare |
内容对比 |
为网站中的一些图标添加了动画
今天全网都在围观讨论 Airbnb 的新设计和全新自研的动画文件格式，网站中使用了很多拟物图标，看起来很有设计感。
一打开 Airbnb 网站，就被顶部菜单栏里的动画硬控了几分钟。等我回过神来，便想起来给自己小破站中的图标也加上动画。于是便开始用 Motion 实现了一些，都是相对比较简单的图形动画，虽然增加了一点趣味性，但还是缺少创意。
太忙了
最近太忙了，昨天甚至工作了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 后，就不知道怎么干活了。
这就是Switch 2吗？
任天堂10月9日晚上公布硬件新品 “Alarmo”，售价 99.99 美元（约 707 元人民币）/ 12980日元（约 616 元人民币），系统支持简繁中文。
这不是新机？开玩笑吧！
首发就有五款重量级游戏陪你起床，堪比 Switch 发售时的阵容！
而且后续还会免费更新《动森》和《马车8DX》主题，让你每天都能在不同的任天堂世界中醒来。
这不是新机是什么？
是个闹钟……
Claude Code Skills 太好用了！
Claude Code Skills 真的太好用了！
我用 Claude-meta-skill 里的 create-skill-file ，创建了 2 个 skill 文件，花了 2 天时间，就把网站的大部分前端样式从 Radix UI 换成了 Coss UI，部分页面还是顺便做了一些小重构。
要是在以前，根本不敢想象这种工程量。Skills 就像是 Prompt 命令和自动化工具 n8n 的结合，能帮你自动执行长任务，效率直接翻了好几倍。
怎么用 AI 开发一款提示词助手
在使用 AI 生成图片的过程中，我经常遇到两个场景：
- 看到一张精美的图片后，想提取为提示词并稍作修改，生成相似风格的新图片。
- 输入简单的元素描述（如"兔子、圣诞节、雪、街角、灯光"），让 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 密钥的用户可使用我提供的免费端点。
AI 还原设计图
开发工具采用 Claude Code 终端 + RooCode，主要使用 Sonnet 4.5 模型。[^1]
以"图片分析"功能为例：在 Figma Dev 模式下，选择画板并点击「Copy example prompt」复制提示词，粘贴到 Claude Code 生成代码。先确保功能正常运行，再调整样式和优化交互。[^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
疯狂动物城2 太火了，附近的 4D 影院这一周全是满座，只能等等了，去看个 4D 版本。
:::movie{video=https://img.kirbyrun.com/note/zootopia2.mp4} 3c1kyDKUvemvvxWRAKVAt6 :::