设计素材周刊 223 期

Figma AI 图像编辑支持点击选择对象

11 月 6 日，Figma 为 AI 图像编辑工具 Select area 加入对象自动选择：点击图像中的对象，Figma 会选中对应区域，方便隔离或擦除内容，不必再手动描边选区。这项功能目前仅在 macOS 桌面应用中提供。

官方更新：https://www.figma.com/release-notes/

Figma Agent 生成的矢量插画与图标更易编辑

11 月 5 日，Figma 改进了 Agent 生成矢量插画和图标的结构：图层会按用途分组，便于独立编辑；用户可以附上插画作为风格参考，继续生成匹配的组件或图标；线稿使用可编辑描边，方便调整粗细和端点，整理好的图层也更适合交给 Figma Motion 制作动画。

官方更新：https://www.figma.com/release-notes/

Rive 编辑器新增简体中文界面

11 月 4 日，Rive 联合创始人 Guido Rosso 宣布，Rive 编辑器现已支持简体中文和西班牙语界面。用户可以在 File > Language 菜单切换语言；配套社区公告将简体中文界面标为 Beta，官方也邀请用户反馈翻译问题。

公告：https://x.com/guidorosso/status/2117686436405371094

社区公告：https://x.com/guidorosso/status/2117686448761778245

Framer 推出 MCP：让 AI 工具参与画布与 CMS 工作

Framer 在 10 月 22 日推出 MCP，可以把支持这一协议的 AI 工具连接到 Framer。连接后，Agent 能参与画布编辑、管理 CMS 内容，并执行网站发布等操作，让页面制作与内容维护接入已有的 AI 工作流。

对经常在设计稿、文案和站点内容之间来回切换的团队，这提供了一个统一处理任务的入口。官方另有连接页面与 Academy 演示，实际使用时可先从单个页面或少量 CMS 内容开始，检查结果后再扩大范围。

官方更新：https://www.framer.com/updates/framer-mcp

连接与介绍：https://www.framer.com/mcp/

Photoshop 测试版开始更新工具栏与面板界面

Adobe 在 10 月 15 日发布的官方社区公告中介绍了 Photoshop 测试版的新界面，首批调整覆盖工具栏、工具选项和部分面板。新版通过间距、图标、标签与对比度调整，让工具和选中状态更容易辨认；鼠标悬停在分组工具上时，也能展开查看组内的其他工具。

此次还更新了 24 个面板和选择器：颜色选择器可以显示与色板面板共享的最近使用颜色，曲线、色阶、色相与饱和度等调整界面也有优化。底层采用 Adobe 的 Spectrum 设计系统，逐步统一不同应用的界面体验。目前属于 Beta 更新，尚不能等同于正式版全面上线。

官方公告：https://community.adobe.com/announcements-698/a-more-modern-photoshop-ui-is-now-in-beta-1651498

Framer Gallery 更新：按视觉风格寻找网站灵感

Framer 在 10 月 15 日更新了 Gallery 网站画廊，扩充案例分类，并增加按视觉氛围筛选的方式。已有网站也被重新归类，找参考时可以更快缩小到想要的风格。

这次还调整了排序算法，让新作品更容易出现在靠前的位置。对于做网站方案、落地页或作品集的设计师，可以把它作为日常查找视觉参考的入口。

官方更新：https://www.framer.com/updates/community/

GPT Image 2.6 开始支持生成 GIF 动图

11 月 4 日，OpenAI 发布 Images 2.6。ChatGPT 正逐步开放 GIF 创作：可以描述循环动画，也可以上传静态图让 ChatGPT 将画面制作成动图；生成后还能继续编辑、调整播放速度、保存或分享。

GPT Image 2.6 的 Sunburst 和 Flare API 也支持直接输出 GIF。请求中设置 output_format: "gif"，可指定 2–16 帧和每帧 20–2000 毫秒的时长；具体使用需选择支持 GIF 输出的模型。

可以预见的是即将开始表情包繁荣了，雾雪的「大肥鱼」橱窗收录 286 张角色表情，不知道是否使用 GPT 生成的，实测下来 GPT 一张图生成表情包确实可以生成类似效果，但是多图时的一致性和稳定性还需要优化，仍然需要规范文档。

OpenAI Images 2.6 公告：https://openai.com/index/introducing-images-2-6/

ChatGPT GIF 使用说明：https://help.openai.com/en/articles/11084440-images-in-chatgpt

GPT Image API 格式与 GIF 参数：https://developers.openai.com/api/docs/guides/image-generation

大肥鱼表情橱窗：https://kiriyuki.com/showcase?p=%E5%A4%A7%E8%82%A5%E9%B1%BC

把网页版 AI 放进独立桌面窗口：NanoDoll

NanoDoll 是一款为 ChatGPT、Claude、Gemini 等网页版 AI 服务打造的桌面容器。每个 AI 网页都能单独生成卫星应用，拥有自己的窗口和 Dock 图标；也可以把多个服务平铺在水平工作区中并排使用。它保留对应服务的网页版界面，并支持从主浏览器导入登录信息。

官网当前提供 macOS Apple 芯片和 Intel 版本（v0.5.2），Windows 版仍在准备中。除了独立窗口和多窗格，应用还内置本地文件管理、Markdown 提示词库和自定义 CSS，适合想用原版 AI 网页、同时希望把常用服务收纳在独立桌面环境中的用户。

官网与下载：https://moonvy.com/apps/nano-doll/

一键截图、标注并交给 AI：1Capture

1Capture 是一款面向 Mac 的截图与录屏工具，可以截取屏幕、窗口或选区，再添加箭头、文字、形状和模糊标注；还支持滚动截屏、OCR／二维码识别、图片置顶、GIF 与屏幕录制。它把工作流特别设计成“截图—标注—拖入 AI 工具”，方便把视觉反馈直接交给 AI 协助修改。

官网更新日志显示，v1.12.0 于 10 月 22 日加入悬浮截图与视频，以及默认标注工具设置。官网称多数核心功能免费，Pro 为一次性付费、包含后续更新；目前标价为 US$24.99，实际价格会因地区而异。Mac App Store 标注需要 macOS 13 或更新版本。

官网与更新记录：https://1capture.com/

Mac App Store：https://apps.apple.com/us/app/screenshot-recorder-1capture/id6742318274?mt=12

从截图标注到录屏美化：Clap

Clap 把截图、标注、背景美化和录屏编辑放进同一个应用。截图后可以添加箭头、步骤编号、聚光效果和模糊遮挡，再调整背景、边距、圆角与阴影；录屏编辑器则能按点击位置自动缩放画面，适合展示操作流程或制作产品演示。

近日更新，加入 Chrome 页面高密度截图、自动更新，以及录屏光标隐藏开关等能力。官网目前将基础截图和截图编辑器列为免费功能；录屏、滚动长截图等属于 Studio 范围。支持 Apple silicon Mac（macOS 15 及以上）和 Windows 10／11，具体系统要求可在官网查看。

官网与更新日志：https://clap.io/

把设计参考与项目资料放进同一资料库：Resurf

如果你想把设计参考和围绕项目收集的资料放在一起，Resurf 可以收纳图片、截图、网页、笔记、PDF、录音等内容，并在本地资料库中按文字搜索；Mac 上还提供语义搜索与相似内容查找 Beta。资料可通过私有 iCloud 在 Mac、iPhone 和 iPad 间同步，也能经 MCP 或命令行交给 Claude、Codex、Cursor 等 Agent 搜索读取。AI 功能为可选项，可使用自己的模型密钥。

它可以作为 Eagle 用户管理项目资料的补充或替代选择，两者侧重点不同：Resurf 更适合混合整理网页、笔记、文档和灵感参考；Eagle 则更适合浏览大量设计素材、预览 PSD/AI 等源文件，以及按颜色或形状筛选。Resurf 没有 Windows 版。Mac 版提供 7 天试用，官网列出的 Standard 为 US$39（含两年更新），Lifetime 为 US$79；iPhone 与 iPad 版免费。

官网与下载：https://resurf.so/

官方对比：https://resurf.so/compare/resurf-vs-eagle

用分形嵌套方式整理 Mac 窗口：TrellisWM

TrellisWM 是一款 Mac 窗口管理器，可以把窗口停靠并层层嵌套，再通过缩放视图在局部与整体布局之间切换；也能拖动窗口之间的接缝调整大小，并为不同显示器分别保存排列。免费版永久提供核心布局功能，每个 macOS 桌面最多停靠 5 个窗口；Pro 增加不限窗口数量、跨 App 标签页组、已存视图和 URL 命令，可连接 Raycast、Alfred、快捷指令或 Stream Deck。

目前需要搭载 M1 或更新 Apple 芯片、运行 macOS 14 Sonoma 或更高版本；Intel Mac 不支持。每次下载可试用 14 天 Pro，之后可继续使用免费版。Windows 版仍在开发中。

官网与下载：https://trelliswm.app/zh/

为桌面文件夹换上喜欢的颜色与造型：文件夹换装

文件夹换装，可以为桌面文件夹更换颜色与封面造型，让不同项目和用途的文件夹更容易辨认。官网展示了月球、微笑冰箱、毛绒小狗、AI 伙伴、小梨、炸鸡和万圣节蜘蛛等封面，也提供 Mac 与 Windows 版本：Mac 版 v1.0.16 支持 macOS 14.5 及以上的 Apple Silicon 设备；Windows 版 v0.1.0 支持 Windows 10／11 x64。

官网与下载：https://moonvy.com/apps/dir-hz/

在 Terminus 目录中整理个人笔记：Terminus Notes

Terminus Notes 是 Terminus 平台上的笔记应用，产品页介绍它使用存储在 Terminus 目录中的数据，版本记录显示 v0.0.1 于 11 月 3 日发布，当前价格为免费。开发者 Winston Gao 在 X 上将它描述为开源的 Notion 风格笔记，并称用户可以导出数据或连接到 Claude。

应用资料页提供 Code 入口，但打开源码页面需要登录；目前没有核实到具体许可证或更完整的功能清单。想尝鲜的话，可以先用少量非关键笔记体验，再决定是否迁移现有资料。

应用资料与版本记录：https://www.terminus.build/apps/notes

开发者发布说明：https://x.com/winstongu_/status/2117336804705927410

为产品界面补充彩色动效图标：Kubai Icons

Kubai Icons 提供 66 个分层绘制的彩色图标，涵盖文件、分享、通信、媒体和设备等常见界面场景。在线画廊可切换七套配色、预览悬停动效；配套 Claude Code Skill 能按产品功能继续绘制同一风格的图标，也能通过命令行导出静态 SVG，放进 Figma 等设计工具，或保留网页所需的 SVG 与 JavaScript 动效版本。

仓库采用自定义的 Kubai Icons License：示例图标可用于产品与商业项目，但不能单独打包成图标库再发布；技能规则文件仅可免费分享未修改的副本。它是可见源码项目，并非开源许可证项目，使用或再分发前建议读完许可条款。

在线画廊：https://www.kubai.design/kubai-icons/

源码与许可：https://github.com/kubai087/kubai-icons

在现有字体上绘制花体装饰：Bezier Type

Bezier Type 是一款在 Google Fonts 字形上绘制和调整装饰的在线工具。可以用宽头笔或单线笔自由加笔画，也能雕刻、推拉字形轮廓，或选中局部自动校正曲线；完成后可下载 SVG 或高分辨率 PNG。适合给标题字或 Logo 草拟带花体细节的字形，再导出到设计稿中继续排版。

工具由作者自述使用 Argon、Antigravity 和 AI Studio 制作。页面提供 Google Fonts 字体选择器；当前没有在页面中核实到价格或授权说明，使用导出的字体轮廓时应另行遵守对应字体许可。

在线体验：https://type-renderer.ai.studio/

一次浏览并下载 36 款原创字体：Fontzz

Fontzz 收录了 36 款原创字体，按 Sans、Serif、Display 和 Mono 分类。网页支持输入自定义文字预览、调整字重、查看字形，并可单独下载字体；也提供约 7 MB 的整套下载包。项目 README 说明每款有可变字重及多档静态字重，提供 TTF 和 WOFF2 文件。

字体和生成器采用 SIL Open Font License 1.1，可用于个人与商业项目，但不能把字体文件单独出售。字形目前以拉丁字符为主，不包含中文，也未覆盖西里尔文和希腊文，适合拉丁文字标题、品牌草案和界面排版参考。

在线预览与下载：https://fontzz.vercel.app/

项目与许可：https://github.com/Nutlope/fontzz

由 AI 代理持续绘制的图标库：IconMCP

IconMCP 是一套可供设计师浏览、也能通过 MCP 接入编码 Agent 的图标库。官网当前显示 58 组、6,335 个图标，支持按分类查看、搜索名称，并切换 Outline 与 Solid 样式。页面还会实时展示 AI Agent 绘制或精修图标时的光标与任务；项目介绍称 Agent 全天候工作，每项改动会经过自动检查和独立审核，长期目标是 100,000 个图标（包括动画图标）。10 万是目标规模，当前目录为 6,335 个。

Agent 可通过 MCP 搜索和使用图标，无需 API Key 或注册。IconMCP 页面采用 MIT License，允许使用、修改、销售和再分发；少量沿用 Phosphor、Tabler、Lucide 图形的图标还需遵守相应上游许可。

在线浏览：https://iconmcp.com/

MCP 接入：https://iconmcp.com/agents

授权说明：https://iconmcp.com/licence

为方向与展开操作补充线性图标：Lucide

Lucide 是一套风格统一的 SVG 图标资源。10 月 21 日发布的 1.61.0 版本新增了圆形双箭头方向图标，其中包括 circle-chevrons-down、circle-chevrons-left 和 circle-chevrons-right，可作为方向导航或展开收起控件的视觉素材。

除了面向不同前端框架的图标包，Lucide 也提供独立 SVG 文件、SVG Sprite 和图标字体。只需要视觉素材时可以选择 SVG；接入界面时，再结合按钮语义和实际操作方向确定用法，避免只凭箭头形状表达复杂动作。

官网：https://lucide.dev/

本次更新：https://github.com/lucide-icons/lucide/releases/tag/1.61.0

静态资源说明：https://lucide.dev/guide/static

横向参考 58 款 App 的年度回顾设计：2025 App 年度报告收集

这个网站收集了 58 款应用的 833 张年度报告截图，覆盖效率、购物、生活、娱乐、社交、游戏、财务、旅游、音乐、健康健美和图书等类别。可以按类别筛选，也能搜索应用名称，并点开单个应用查看对应报告。

做年度总结、数据回顾或活动专题时，可以用它比较不同产品如何组织个人数据、叙事节奏和视觉表达，寻找移动端长页面的设计灵感。页面所列记录日期集中在 2026 年 1 月中旬。

在线浏览：https://2025app.designstroll.space/

集中浏览网站、页面区块与发布视频灵感：Vibrant

Vibrant 把网页设计灵感整理成多个入口：可以浏览完整网站、Hero／Features／Bento／Pricing／FAQ 等页面区块、产品发布视频、UI 视觉片段、OG 社交分享卡片，以及设计工具目录。页面提供分类浏览、搜索和随机发现，适合查找页面结构、视觉方向与产品发布展示参考。

站内收录的作品来自外部创作者，版权仍归原作者，网站仅供灵感展示。若要复用案例中的图片、视频或设计作品，需要回到原始来源确认授权。

灵感目录与许可：https://vibrant.design/ · https://vibrant.design/licence

为交互反馈补充声音素材：SND UI Sound Kit

SND 提供面向网页、应用和数字标牌的 UI 声音素材，覆盖点击、按钮确认、开关切换、选择、页面切换、弹窗开合、输入、通知、警告和任务完成等交互情境。素材有正弦波、钢琴和工业声音等不同音色方向，可在页面中试听和切换。

这些音效可用于原型，也可以直接集成到正式产品。网站还提供 JavaScript 库，支持通过 HTML 类名或事件为界面元素配置声音。素材允许免费商用；再分发和商标性使用需遵守站内条款。

素材与许可：https://snd.dev/

JavaScript 库：https://github.com/snd-lib/snd-lib

从 700 多种 UI 音效中挑选并安装：SoundCN

SoundCN 是一个面向网页应用的 UI 音效目录，仓库介绍目前收录 700 多种点击、通知、转场和游戏音效。选中的音效可以通过 shadcn CLI 安装为独立 TypeScript 模块，并配合 useSound Hook 和 Web Audio API 播放；音频以内嵌数据形式随代码安装，不需要运行时再从外部地址加载。

注意，仓库代码采用 MIT 许可，但音频有各自的授权来源：大部分来自 CC0 素材，110 个《魔兽世界》音效则仅限非商业、教育和参考用途。商用前请检查所选素材的具体授权。

音效目录：https://www.soundcn.xyz/

项目说明与许可：https://github.com/kapishdima/soundcn

用现成图表组件搭建数据界面：Mebius Free Charts

Mebius 的 Free Charts 页面展示了 62 个用于仪表盘、分析产品和 Web 应用的图表组件，例子包括资产概览、现金流、预算、销售和投资趋势等。可以逐个打开交互预览，并下载 Figma 文件，用现成的图表结构快速搭建数据界面。

每个组件还提供 Code 选项，不过当前页面要求注册 Mebius 账户才能继续查看。站点标出了免费资源，但通用许可页仅说明购买资源的授权范围，没有写明这套 freebie 的商用条件；用于商业项目之前建议先向作者确认。

图表组件：https://www.mebius.design/freebies/charts

为界面按钮加入戏剧感交互：Evil Buttons

Evil Buttons 收集了一组带有趣交互效果的 React 按钮组件，包含按住触发、滑动确认、悬停变形、故障效果和爆散动画等类型。每个按钮都可以在网页上直接预览，并通过 shadcn 命令安装到项目中；页面也提供属性调节和变体示例，方便开发者按界面需要继续修改。

如果你想让删除、复制、确认等操作更有反馈，可以从这里找交互灵感或直接取用组件。项目仓库采用 Apache License 2.0。

组件目录：https://www.evilbuttons.com/

MinimalButton 示例：https://www.evilbuttons.com/docs/minimal-button

源码与许可：https://github.com/radiumcoders/evil-buttons

可以直接修改源码的 React 动效组件：Tween UI

Tween UI 收集了使用 GSAP、CSS 和 Tailwind CSS 制作的 React 动效组件与页面区块。可以先在网站预览交互，再通过 shadcn CLI 把完整组件文件复制到项目中，继续调整时长、样式和动画行为。

它采用把源码交给使用者的方式，适合希望保留实现细节控制权的项目。组件也考虑了系统的减少动态效果偏好。设计师可以用它寻找可落地的交互参考，再和开发一起调整到适合产品的节奏。

官网：https://tween-ui.vercel.app/

源码：https://github.com/StaticMania/tween-ui

探索带实时预览的 React 动效组件：ReactDrops

ReactDrops 把创意视觉效果做成可预览、调节和安装的 React 组件。当前目录列有 8 个组件，包含 Liquid Glass Orb、Fractal Glass、Topographic Terrain、Fan Gallery、Shape Physics 和 Chromatic Button 等；可以在目录中查看实时演示和控制项，再通过 shadcn registry 获取源码。

我核对了目前公开的组件目录，没有找到名为 Apple Music 动画的条目；Apple 标记和音乐图标出现在 Liquid Glass Logo 的自定义示例中。仓库也特别说明，项目虽公开源码，但采用 ReactDrops Component License 1.0 自定义许可，并非 OSI 开源许可证；可用于成品和客户项目，不能未经许可把组件作为可复用组件库或模板再次分发。

组件目录：https://reactdrops.dev/components

源码与许可：https://github.com/crisjavr/reactdrops

为 React 界面添加细腻动效：ObsidianUI

ObsidianUI 是一个面向 React 的交互组件库，结合 Tailwind CSS 和 Motion，提供可以预览、复制和继续修改的界面组件。内容包括可拖动的跑马灯、文字翻转、图片悬停效果和画廊，也有后台布局、数据面板与会话管理等界面示例。

适合在制作产品页面或作品集时挑选一些有表现力的交互细节：先在网站上体验效果，再把组件带入项目，按自己的视觉风格调整样式与行为。设计师也可以把它作为动效参考，与开发沟通具体的实现方向。

官网：https://www.obsidianui.dev/

组件预览：https://www.obsidianui.dev/components

用实时光丝字母打造网页首屏：PRO Threads

PRO Threads 用 WebGL 实时绘制由光丝组成的字母效果，灵感来自 MacBook Pro 的 PROLED XDR 壁纸。可以输入 A–Z 字母组成短词，调整配色、光线、形状和动效参数；项目还提供字母表预览，以及环形、黑洞、隧道等适合作为网页首屏背景的场景。

页面的 Embed 面板会生成嵌入代码：加入一个脚本，再放置 <pro-threads> 组件即可显示实时场景，也可用 iframe 或自托管版本。默认嵌入内容从作者站点加载；浏览器需支持 WebGL 2，项目说明在不支持时会显示静态壁纸或暗色背景。仓库源码采用 MIT License。

在线体验与嵌入说明：https://www.kubai.design/pro-threads/

源码与许可：https://github.com/kubai087/pro-threads

用手绘纸感组件快速搭建 React 界面：Looseleaf

Looseleaf 是一套手绘纸张风格的 React 组件库，兼容 shadcn/ui 的组件结构与属性，基于 Tailwind CSS v4 和 Radix。仓库目前列出 123 个组件、61 个页面区块，并附有图标、涂鸦、贴纸、印章和 Kevin Sans 字体；可以通过 shadcn registry 选择所需组件，把源码装进自己的项目后再改样式和内容。

项目仓库于 11 月 1 日建立，适合想给产品界面加上纸张、铅笔线条和贴纸感的 React 项目。仓库说明代码、插画和 Kevin Sans 使用 MIT License，IBM Plex Mono 字体则使用 SIL OFL 1.1。

在线预览：https://kevintngo.github.io/looseleaf/

源码与许可：https://github.com/kevintngo/looseleaf