MoreRSS

site iconmoonvy | 设计素材周刊修改

由月维公司维护的设计素材周刊,也包含其他设计类内容。
请复制 RSS 到你的阅读器,或快速订阅到 :

Inoreader Feedly Follow Feedbin Local Reader

moonvy | 设计素材周刊的 RSS 预览

设计素材周刊 223 期

2026-10-22 00:00:00

📰 设计资讯

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/

Figma 更多更新

Figma 新建 GitHub 仓库连接默认启用克隆

11 月 3 日起,新建 GitHub 仓库连接时默认启用克隆,让团队无需额外等待管理员批准即可把代码导入 Figma。管理员仍可针对单个仓库关闭克隆;现有仓库连接的设置不变。这项更新正向所有计划逐步推出。

Figma:代码图层现在会读取原型连接

11 月 3 日,Figma 更新了从设计画框创建代码图层的流程:Agent 现在会读取画框之间已有的原型连接和交互,作为生成代码图层时的上下文,减少对复杂流程的重复描述。代码图层目前仍处于公开 Beta。

Figma Shader 支持高分辨率导出并进入代码图层

11 月 2 日,Figma 将 Shader 向所有用户开放,并支持最高 4096 px 渲染与导出。Shader 也能放进由设计转换而来的代码图层;官方说明这项代码图层能力目前在 Chrome 157 浏览器中逐步开放,图层需切换到 Play 才会正确渲染。

Figma Agent 可连接 Google Drive 并使用文件上下文

10 月 30 日,Figma 为 Agent 和 Figma Make 加入 Google Drive 连接器,可在 Figma 文件中引用 Drive 内容、总结研究资料、读取真实数据或调用素材,也能创建新的 Drive 文件。连接器现面向包括 Starter 在内的所有 Figma 计划开放,可从 Agent 提示框的加号菜单添加。

Figma 新增 iPhone Duo 与 iPhone 18 画框预设

Figma 在 10 月 23 日加入了 iPhone Duo 和 iPhone 18 的移动设备画框预设。除了新建 Frame 时的属性面板,也能在代码图层的创建面板、原型设置、Make 预览设备选择器,以及代码图层全屏视图中选用。

正在做移动端界面或演示原型的小伙伴,可以直接从这些入口选择对应尺寸,减少手动设置画框的步骤。本次更新的是画框预设,具体支持范围以官方发布说明列出的入口为准。

官方更新: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


我们是谁?

Moonvy 月维是一款专业的「设计资源管理工具」,让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验,并支持多种开发代码格式,让设计交付更省心、更顺畅。(https://moonvy.com)

设计素材周刊 222 期

2026-10-16 00:00:00

📰 设计资讯

Figma Config India:代码图层、Specs 与 Payload 集中亮相

10 月 15 日的 Config India 上,Figma 集中发布了一批连接设计、代码与内容的功能。Code layers 开始进入公开测试:可以把设计稿转换成可交互的代码原型,也能从 GitHub、本地文件夹或现有网页导入,在 Figma 画布上和团队一起比较、修改方案。

同场亮相的 Figma Specs 为 Markdown 文档、设计画面和技术细节提供共享空间,方便团队与 Agent 一起整理需求;Figma Make 则接入 Payload,可为应用生成带 CMS、数据库、认证和管理后台的后端。设计系统方面,规范文件进入公开测试,GitHub 或 npm 代码源进入封闭测试;Figma MCP 也增加了对代码图层、Specs 等工作流的支持。Code layers 和 Specs 正逐步开放测试,集中式设计系统目前仅提供预览。

发布总览:https://www.figma.com/blog/build-by-design/

Figma Make 开始提供 Gemini 4 Argon 模型

10 月 13 日起,Figma Make 开始逐步加入 Gemini 4 Argon。创建或修改原型时,可以在聊天框的模型选择器中切换到它;Figma 表示这一模型面向所有计划开放。

这次更新增加了 Make 的模型选择,但仍处于逐步推出阶段;如果账户里暂时看不到,可以稍后再检查模型菜单。对经常用 Make 生成界面与交互原型的人来说,多一个模型选项也方便比较不同模型的生成结果和修改方式。

官方发布说明:https://www.figma.com/release-notes/

Figma Make 的「复制设计」入口移至 Edit,并可录制多页面流程

最近 Figma Make 调整了「Copy design(复制设计)」的入口。它不再直接显示在预览顶部:先点击预览右上角的 Edit,再到画面底部的浮动工具栏找到复制设计按钮。最近找不到这个功能的小伙伴,可以按这个路径试试。 还有就是右上角的「播放」按钮,新页面打开后右上角也有复制设计按钮

复制时除了当前页面或所选元素,还能选择 Record flow(录制流程):在可交互原型中依次走过需要的页面和状态,结束录制后将这些画面一起复制到 Figma Design,继续作为可编辑图层调整。复制得到的是画面快照,不会保留 Make 原型中的交互,设计稿里的修改也不会自动回写到 Make。官方帮助中心说明,复制设计图层面向付费计划开放。

Figma Make 官网:https://www.figma.com/make/

新入口说明:https://forum.figma.com/report-a-problem-6/copy-design-is-missing-in-one-figma-make-file-58690

复制后的图层与限制:https://help.figma.com/hc/en-us/articles/35060759685015-Copy-a-Figma-Make-preview-as-design-layers

🏆 产品推荐

让 PowerPoint 和 WPS 播放 Lottie 动画

「PPT 播放 Lottie 动画」给 PowerPoint 和 WPS 分别提供插件,让幻灯片在放映时直接播放 Lottie JSON 动画。可以把 .json 文件拖进幻灯片,也能填写动画网址或粘贴 JSON;播放速度、循环和背景色可以继续调整。相比把动效做成 GIF,Lottie 能保持清晰的矢量边缘,适合在演示中展示界面动效或说明流程。WPS 版支持透明背景,PowerPoint 的部分版本则可能显示白底。

动画数据会保存在演示文件里,但放映时仍需联网加载播放器页面。PowerPoint 版在编辑视图不播放,接收文件的人也需要安装插件;WPS 版可在编辑视图预览,接收者无需另装插件。导出 PDF 或视频时动画不会保留。插件支持 Windows 与 macOS,适用于 PowerPoint 2016 及以上或 WPS 2019 及以上;免费使用,下载安装包需要登录网站账号。

官网与下载:https://www.sjfls6.com/products/ppt-lottie/

可编辑 Figma 文件的开源 AI 设计工具:OpenPencil

OpenPencil 是一款采用 MIT 许可的开源界面设计编辑器,可以直接打开和保存 .fig 文件,将页面、组件、实例、变量和自动布局作为可编辑图层处理。它提供布局、文字、填充和效果等设计能力,也能把 SVG、HTML 和 CSS 导入画布,适合希望在本地继续编辑已有设计的团队或个人。

除了手动设计,也可以接入自己的模型 API Key,用自然语言让 AI 创建和修改图层;通过 MCP,还能让外部 Agent 操作同一份文档。工具提供浏览器入口、桌面应用和 CLI,适合探索从界面设计到 AI 自动化的工作流程。

亲测了一下基础设计功能还行,但是细节偶有bug,添加 AI 操作界面测试失败了,有兴趣的可以直接试试

官网:https://openpencil.dev/

ArtCraft:集成 13 款创作应用的桌面套件

ArtCraft 将 13 款创作应用放在同一套产品中,涵盖图像处理、矢量绘图、视频剪辑、动效制作、排版、界面设计、文档和音频等方向。团队列出的应用包括 PhotoCraft、VectorCraft、FilmCraft、EffectCraft、DesignCraft 与 FigCraft,可以按自己的工作内容选择安装。

官网介绍这些应用为原生桌面软件,并提供 ArtCraft Launcher 和各应用的独立安装方式;部分工具也可在浏览器中体验。对需要组合使用多种创作工具的人来说,可以从一个目录了解这套软件各自负责的环节。

应用目录:https://getartcraft.com/apps

macOS 截图与录屏整理工具:Shotbase

Shotbase 把截图、录屏和网页截图放进同一个 Mac 工作流里:可以捕捉画面、添加背景和标注、编辑录屏,再把成品整理和分享出去。录屏支持自动放大关键区域,也能加入文字、阴影和其他效果,适合制作产品演示、设计反馈和操作说明。

它还提供本地 AI 帮截图生成名称、标签和摘要,方便之后搜索;官网说明图像分析在本机完成,不会把截图发给远程模型。此功能需要 Apple 芯片的 Mac。

官网:https://shotbase.com/

文件格式转换工具:Tangerine

Tangerine 是一款面向 Mac 的本地文件转换工具。把文件拖到应用中后,按住 Shift 即可转换格式;需要压缩、裁切、修剪、拆分或合并时,再按住 Option 调出高级操作。官网列出的格式覆盖图像、视频、音频、文档和压缩包。

文件处理在本机完成,不需要先上传到在线转换网站。官网目前列出 190 种转换选项和 25 种高级文件操作,支持 Apple 芯片并要求 macOS 13 或更新版本。

官网:https://tangerineformac.com/

网站设计欣赏:Paper Mono

Paper Mono 是 Paper 设计团队制作的免费开源等宽字体。官网没有停留在字体下载页,而是把字形和排版做成了可交互的展示:可以在页面里边看边试,直观感受字体的形态与气质。页面本身的视觉节奏也很有趣,值得作为字体展示网站的设计案例逛一逛。

字体包含 8 个字重、800 个字形,并覆盖 100 多种语言;还提供编码连字、双宽字符、窄空格、小箭头、单层 a 和带斜线的 0 等样式功能,适合代码、标题、界面文字和数字信息展示。授权为 SIL Open Font License 1.1;使用、修改或随软件再分发时,需要遵守对应条款。

字体预览与下载:https://paper.design/mono

项目与授权:GitHub

像 InDesign 一样调整中西文混排:CSS Composite Font

CSS Composite Font 是一个免费开源的网页工具,把 InDesign、Illustrator 中的「复合字体」思路带到网页排版。汉字、假名、标点、西文和数字可以分别指定字体、大小与基线;调整时可用中文、日文等示例或自己的文字实时校样,也能检查字体缺字情况。

工具支持 Google Fonts、本机字体和字体文件,并提供多字重、竖排与预设等选项。完成后可导出直接用于网页的 CSS,核心做法是用 @font-face 的 unicode-range 分配字符、用 size-adjust 调整大小。需要留意的是,CSS 没有直接调整 @font-face 基线的描述符:如果设置了基线偏移,导出结果还会附一小段 JavaScript;基线保持为零时则只需要 CSS。

在线体验:https://charlie5188.github.io/css-composite-font/

源码与许可:GitHub

集合 500 多款浏览器设计工具:Uwarp

Uwarp 把 500 多款可在浏览器中使用的免费工具整理成一个入口,覆盖图像与音频转换、SVG 生成、配色、图标、字体和样机等方向。首页按用途分类,也可以直接浏览全部工具,适合设计时临时查找一个轻量的小功能。

站点同时收录创作、灵感和学习资源,不只限于文件处理。需要快速转换素材格式、试一组颜色或寻找图形工具时,可以先从对应类别进入,再比较同类工具的功能与使用方式。

官网:https://www.uwarp.design/

🎁 Figma 快速制作图表插件:UCharts

UCharts 是一款 Figma 图表插件,可以把数据做成折线图、柱状图、面积图、饼图、散点图和雷达图等可视化内容。选择图表类型后,可以导入 Excel 或 CSV 数据,调整配色、字体与布局,再把图表放进设计稿,适合制作仪表盘、报告或演示页面。

它也提供在线图表编辑器,支持从模板开始制作,并导出图片、SVG、PDF 或 HTML 等格式。需要反复修改真实数据的设计师,可以先用插件把图表放到 Figma 中,再根据页面风格调整视觉细节。

Figma 插件:https://www.figma.com/community/plugin/1404821057322599271/ucharts-line-chart-bar-chart-area-chart-pie-chart-scatter-chart-radar-chart

在线图表工具:https://o.uwarp.design/uchart

插件开发者为周刊读者提供了 7 个 UCharts 密钥,先到先得:

一个月期(5 个)

  1. AEE20D99-8AA7-4BF0-8A49-546A23254209
  2. 731A6785-AC0D-449F-B45E-B751ECB78E5E
  3. 832D67BB-0501-4E66-B01F-5981321DD69A
  4. 28D32691-D4DA-493B-83C4-4E1C96A89FB4
  5. BA7CE1CA-C47C-4E74-BC0F-C57B2D77526D

一年期(2 个)

  1. 8824EA84-8FE0-4F81-AAB5-4BE9B1E376CB
  2. A6FF756D-21A1-4E42-8B3E-B81EDA16D6AB

🎊 设计素材

Apple 官方 iOS/iPadOS 27 Figma 组件库与图标模板

Apple 已发布 iOS 和 iPadOS 27 官方 UI Kit,提供 Figma 与 Sketch 版本;新版更新了 Liquid Glass,并扩充组件和状态、调整与代码更一致的命名,也改进了尺寸调整。官方资源页还附有 iOS、iPadOS 和 watchOS 27 的 App Icon Template Figma 文件。

可以从下面的 Figma Community 文件打开资源或复制到自己的草稿中;使用 Apple UI Kit 前需要接受相应的许可条款。界面行为和组件规范可同时参考 Apple Human Interface Guidelines。

QingIcon 2.0:兼顾设计、代码与 AI 工作流的图标库

QingIcon 2.0 收录了 3,900 多个图标,并提供 13 万多个中英文关键词用于检索。除了常用图形,也整理了 AI、云计算等成体系的图标家族;遇到关键词匹配不到时,还有抽象图标可以兜底。图标可以一键切换为草图风格,也提供 Optical 光学修正和 Padlock 跨工具占位等功能。

除了官网搜索,QingIcon 也提供 Figma 插件、React 和 Vue 的 NPM 包,以及 MCP Server。设计时可以直接把图标放进 Figma,写代码时通过组件包接入,使用 Agent 时也能用自然语言检索合适的图标。

官网:https://qingicon.com/

自定义图案与网站模板:Tabbied

Tabbied 将生成式图案和网站模板放在同一个浏览器工具里。选择图案后,可以实时调整颜色、频率和密度,预览结果会随设置即时变化;确定后可以导出 PNG 或 SVG,作为网页背景、海报或其他视觉设计的起点。

除了图案生成器,网站还收录以同一图案引擎制作的网页模板。它适合先从一组图形和配色出发,再把风格延伸到完整页面的场景。

官网:https://tabbied.com/

可生成的 SVG 几何图案合集:Book of Shapes

Book of Shapes 收集了一组可定制的生成式 SVG 图案,包含网格、流线、放射、噪点、等距和有机形态等方向。每个图案都以规则和变化构成,可以用来寻找背景、包装、海报或界面装饰的视觉起点。

浏览时可以按图案类型筛选,也可以查看近期和热门作品。因为素材以 SVG 形式呈现,放大使用时仍能保持矢量边缘,适合继续在设计软件或代码中调整。

官网:https://bookofshapes.com/

观察界面细节的灵感库:Detail

Detail 收集那些能让产品体验更周到的小设计决定,并按设计、交互、动效、文案、无障碍和 Easter egg 等主题整理。案例包括适应翻译的文字换行、输入框占位提示、按住快捷键显示提示,以及圆角形态变化等具体做法。

与只看完整页面的灵感库相比,这里更适合研究一个局部决策如何回应用户行为。设计表单、快捷操作、动效反馈或空状态时,可以从案例中找到可借鉴的细节,再结合自己的产品语境重新处理。

官网:https://detail.design/

面向设计工程师的资源索引:DesignEng

DesignEng 把设计工程相关的组件库、UI 资源、AI 工具、灵感站、学习资料、字体、技能和创作者放在一个可浏览的目录中。条目附有简短介绍和分类,方便从一个资源继续发现同类工具或替代方案。

它适合需要同时考虑界面设计和前端实现的人:可以按组件、设计系统或灵感等方向缩小范围,再比较不同资源的适用场景。网站也提供免费、部分免费、付费、开源和试用等筛选项。

官网:https://www.designeng.tools/

每日更新的网站设计画廊:A1 Gallery

A1 Gallery 精选仍在线的网站案例,并提供页面、区块、OG 图片、字体和个人主页等浏览入口。首页可以按网站类型与行业分类查找;进入案例后,也能从页面结构、视觉风格和使用技术等角度继续探索。

如果正在为官网、作品集或营销页面寻找参考,可以把它当作一个持续更新的网页案例索引。收藏功能还支持把喜欢的页面和区块整理成自己的 board,方便后续对照和复盘。

官网:https://www.a1.gallery/

带有真实交互预览的 React 组件:Arc

Arc 提供带动效的 React 组件和页面区块,官网列出 150 个组件与 88 个 blocks。示例可以直接操作预览,例如拖动图表、打开选择菜单或切换日期;查看组件时也可以在预览和代码之间切换。

组件可以通过 shadcn CLI 安装,也能复制源码到自己的项目继续改造。对于想快速搭建带有细节动效的仪表盘、表单和产品流程的开发者,可以先用在线示例判断交互是否符合需要,再决定是否引入。

官网:https://uiarc.dev/

硬件风格的 React 与 SwiftUI 组件:MetalUI

MetalUI 将软塑料、烟熏玻璃和金属质感带进 React 与 SwiftUI 组件中,并通过按压、悬停和状态变化表现出更接近实体控件的反馈。它既提供按钮、菜单、表单和滑块等组件,也整理了色彩、字体、间距、材质、动效等设计基础。

这个项目适合探索带有实体感的界面语言,或为应用补充一组统一的材质和交互参考。组件文档、设计基础和示例都可以直接浏览,便于先评估风格与项目是否匹配。

官网:https://metalui.dev/

用可组合的 WebGPU 效果搭建界面:Shaders

Shaders 开源提供 200 多个 WebGPU 效果组件,可以组合渐变、噪点、玻璃、金属、光效和扭曲等效果,并用于 React、Vue、Svelte、Solid 与原生 JavaScript 项目。每个组件都有实时预览和参数说明,方便先试效果,再放进网站、模板或产品里。

除了直接写代码,也可以在 Shaders 在线编辑器 的画布上组合组件、调整参数,并免费导出对应框架的代码。仓库和 npm 包采用 MIT 许可;网站上的编辑器、预设等平台内容另有各自条款,使用时可以分别查看。

官网:https://shaders.com/

仓库:https://github.com/shader-effects-inc/shaders

用 Claude Skill 生成可交互的等轴测图:ISO-GLOW

ISO-GLOW 是一个 Claude Skill,可以根据物体、设备或建筑的描述,生成一个包含等轴测 SVG 图形的独立 HTML 文件。图中的部件还能响应点击并产生反馈,适合制作可探索的小型物件示意或空间场景。

它把等轴测投影、图层绘制和点击交互封装进 Skill,生成结果可以直接作为单文件页面查看。技能源码以 MIT 许可发布;官网和仓库示例都可以先体验,再决定是否安装使用。

官网:https://isoglow.dev/

技能源码:iso-figure

将作品截图快速编成动态作品集:Reelfolio

Reelfolio 可以把设计截图、样机和屏幕录制整理成作品展示视频。选择动态模板后,将素材上传并调整画面比例、背景、动效和音频,再导出适合放进作品集、提案或社交媒体的 showreel。

模板卡片悬停时会直接播放对应的成片效果,方便比较不同的转场和视觉节奏;整个流程围绕选模板、上传素材、微调和导出展开,不必从空白时间轴开始剪辑。

官网:https://reelfolio.io/

集合日常设计小工具的浏览器工作台:One Design

One Design 把图片压缩、改尺寸、抠图、格式转换、批量裁切、水印、PDF 处理、二维码和元数据清理等小工具集中在一个可搜索的浏览器工作台里,适合处理日常设计交付中的零散任务。

它的一点特色是文件直接在浏览器和本机设备上处理,不会上传到服务端;Cutout 首次使用时会下载识别模型,但本地图片不会随模型请求发送。使用工具需要免费账户,另有部分 Pro 功能。

官网:https://one.design/

为 React 界面添加 Liquid Glass 材质与交互

Liquid Glass 为 React、Web 和 Electron 提供玻璃表面与控件组件,可以选择透明的 Clear 或磨砂的 Regular 材质,并适配浅色和深色外观。玻璃层后的内容仍保持动态可见,按钮支持按压和拖动反馈,菜单也能从触发控件展开。

示例页包含 Surface、Buttons、Toolbar、Tab Bar、Menu、Slider、Switch 和 Progressive Blur 等组件,每个示例都能在预览与接入代码之间切换。项目提供 NPM 包,源码采用 MIT 许可,适合想在界面中尝试玻璃材质与细腻交互的 React 开发者。

组件示例:https://liquid-glass.glassapp.dev/#examples

源码:GitHub

用动态 ASCII 画面点亮网页:ascii.rest

ascii.rest 收录了 196 组动态 ASCII 画面,从全彩场景、加载动画、图表和文字,到语言与系统标志、3D 形状、物理模拟和生物主题都能找到。每组都是轻量的 TypeScript 模块,无额外依赖,可用于 React、Next.js、Astro 或普通 HTML 页面。

在 HTML 页面里引入它提供的脚本并使用 <ascii-art> 标签即可嵌入,不需要安装依赖或构建步骤;动画进入可视区域后播放,也会尊重减少动态效果的系统偏好。项目免费并采用 MIT 许可。

官网:https://ascii.rest/

给 shadcn/ui 项目添入 shader 与动效组件:23rd

23rd 是面向 shadcn/ui 项目的组件注册库,提供 Shader Gradient、ASCII Fluid、Live Orb、Typewriter、Stretchy Footer 和 Dithered 404 等背景、动效与界面组件。组件可以通过 shadcn CLI 单独添加到项目里,安装后源码归入自己的代码库,方便继续调整。

文档同时提供 React 和 Svelte 5 的安装命令与使用示例;可以按需挑选渐变、火焰、字符动画、页脚或错误页等效果,不必把整套库都引入。

文档:https://23rd.dev/docs/

源码:GitHub

把静态设计变成动态展示:Animos

Animos 提供一组循环动效模板,可以把图片或视频放入浏览器编辑器,调整设置后导出展示视频。模板涵盖多种构图与运动方式,适合快速为界面、海报或作品集截图增加动态呈现。

整个流程在网页中完成,不需要安装剪辑软件或从空白时间轴开始制作;完成后可导出 MP4 或 WebM,并选择常见画幅比例与分辨率。

官网:https://animos.app/

可旋转 3D 餐厅场景的交互展示:Last Seen

Last Seen 把不同餐饮品牌做成一组可浏览的 3D 小景。页面先展示品牌卡片,点击后进入对应场景;用户可以拖动模型旋转,同时浏览品牌名称、创立年份和简短介绍。

它把品牌信息与可操作的空间模型放在同一页面里,适合观察 3D 场景如何成为网页内容的一部分,以及卡片选择、场景切换和拖动浏览如何组成轻量的交互体验。

体验页面:https://last-seen-diorama.vercel.app/

Atlas:管理本地灵感与视觉参考的 Mac 应用

Atlas 面向设计灵感与视觉参考整理,可收集图片、视频和网页链接,再按项目或主题归入不同集合。浏览时可以切换网格、画布和无限画布等视图,既能快速扫看素材,也能把参考内容铺开比较。

应用以本地资料库为中心,也提供浏览器扩展、菜单栏收集入口和文件夹连接等方式;已有 Eagle 资料库也可以导入。适合希望把散落在网页、文件夹和截图中的参考集中管理的 Mac 用户。

官网:https://atlasformac.com/


我们是谁?

Moonvy 月维是一款专业的「设计资源管理工具」,让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验,并支持多种开发代码格式,让设计交付更省心、更顺畅。(moonvy.com)

设计素材周刊 221 期

2026-10-07 00:00:00

📰 设计资讯

Figma Agent 正式上线,让 AI 读取团队设计规范

Figma Agent 结束测试并正式上线,AI 现在可以通过跨文件搜索理解团队已有的设计资产和工作内容,也可以读取以 Markdown 编写的设计库规范,让生成结果更贴近团队的组件、变量和使用约定。

与此同时,Figma 将生成式插件正式开放,设计师和开发者可以把 AI 能力扩展到更具体的工作流程中。不过,随着这些功能转为正式服务,Figma Agent 也开始消耗 AI 积分。对于正在尝试用 AI 参与设计生产的团队来说,这次更新意味着“让 AI 先读懂现有设计系统”正在成为更实际的工作方式。

https://www.figma.com/release-notes/?utm_source=chatgpt.com

Figma Motion 增加自定义样式、音频、文字动画和 Lottie 导出

Figma Motion 在开放测试期间继续扩展动效工作流:现在可以把常用的缓动、时长和其他变量属性保存为自定义动画样式,在不同设计和文件之间重复使用,也可以将多个样式组合成更复杂的动画模式并发布到团队库中。Figma Agent 和 Coding Agent 也可以通过 MCP 或 Skills 自动应用这些动画样式。

Motion 还把音频带进时间轴,支持将音频拖到动效片段中,进行裁切、分割和重新定位,并随动画一起导出 MP4 或 WebM。文字动画可以细化到单个字符、单词或行,同时保留文字图层的可编辑性;完成后还可以导出 Lottie 或 dotLottie 文件,把动效带到 Figma 之外。目前 Figma Motion 仍处于开放测试阶段。

功能说明:https://help.figma.com/hc/en-us/articles/41274629073303-Explore-Figma-Motion

Figma 移动端优化协作与页面导航

Figma 移动端新增一组协作和浏览体验改进:可以通过页面下拉菜单快速访问和切换页面,用 Frame 预览滑块在不同画板之间移动,并把当前正在查看的页面或画板直接生成分享链接。现在也可以将单个画板或图片导出到手机,导出时选择格式和尺寸。

此外,应用会记住上次离开的位置,重新打开后可以直接回到之前查看的页面或画板,不需要再次导航。对于需要在手机上快速检查设计、分享局部画面或和团队同步进度的场景,这些改动能减少来回寻找内容的步骤。

发布说明:https://www.figma.com/release-notes/?title=smoother-design-collaboration

Sketch Florence:更灵活的 Stacks 和更多视觉效果

Sketch 在 Florence(2026.3)更新中继续强化了 Stacks。现在可以为 Stack 设置最小和最大尺寸、相对尺寸、负间距以及 z-index 排序,让自动布局在更复杂的界面结构里也能保持可控。对于需要做响应式卡片、叠放元素或特殊间距的设计,这些选项能减少为了“摆到正确位置”而增加的额外容器。

这次更新还加入了更多效果支持:群组可以直接使用模糊,画板可以设置多个阴影,玻璃效果和渐变效果也可以同时使用。Sketch 表示,这些能力还伴随了一批性能改进和错误修复。版本名 Florence 来自佛罗伦萨,Sketch 也为这次主要版本更新准备了对应的视觉主题。

更新说明:https://www.sketch.com/updates/

Sketch 官方动态:https://x.com/sketch/status/2092595467750174912

Sketch 支持 Oklab 和 Oklch 渐变

Sketch 最近展示了 Oklab 和 Oklch 渐变。与传统 RGB 插值相比,这两种颜色空间更接近人眼对明度和色彩差异的感受,尤其适合处理蓝色到黄色这类容易在中间出现发灰、发脏过渡的渐变。

Oklab 适合从明度、绿红轴和蓝黄轴的角度理解颜色;Oklch 则进一步把颜色表达成明度、色度和色相,更适合直接调整“更亮一点”“更鲜艳一点”或“沿着色相旋转”的视觉参数。实际输出仍然会受到显示器色域和颜色管理影响,但在设计阶段使用更合理的插值方式,可以让渐变的过渡更稳定,也更容易建立一套可复用的颜色规则。

Sketch 官方动态:https://x.com/sketch/status/2098688586736386553

在月维设计交付中已经支持 OKlch 渐变类型

🏆 产品推荐

免费开源的 macOS AI 图片放大器:HiPixel

HiPixel 是一款免费、开源的 macOS 原生 AI 图片放大工具,可以把模糊或低分辨率图片提升到更清晰的高清质量。它提供 Standard、Lite、High Fidelity 和 Digital Art 四种 AI 模型,也支持加载本地 ncnn 格式的自定义模型,适合处理照片、插画和数字艺术等不同类型的图片。

除了拖放批量处理,HiPixel 还支持文件夹监控、GPU 加速、1–5 倍对比查看、PNG/JPG/WebP 等多种输出格式,以及通过 URL Scheme 和 Apple Shortcuts 接入自动化流程。应用使用 SwiftUI 构建,支持 macOS 13 及以上版本,并以 AGPL-3.0 开源。

官网:https://hipixel.5km.tech/

GitHub:https://github.com/okooo5km/HiPixel

让截图更好看的在线美化工具:框 Kuang

框(Kuang)是一款在浏览器中使用的截图美化工具,提供背景、布局和标注调整,让普通截图更适合分享、展示和写进作品集。它内置绿色、黄色、日落、极光等背景效果,也支持柔光渐变、颗粒质感、留白、圆角和投影等处理,让画面更自然地融入背景。

工具支持高亮、放大镜和箭头标注,方便强调界面细节;图片在浏览器中处理,无需注册,并支持 1×、2×、3× PNG 导出和无水印下载。适合快速制作产品截图、设计案例、教程配图或社交媒体分享图。

官网:https://moonvy.com/apps/kuang/

Figma 投影插件:浮影-Floating Shadows

浮影-Floating Shadows 是一个面向 Figma 的多层柔和投影生成器,用手工调校预设或三次贝塞尔曲线堆叠,为卡片、弹窗和悬浮表面生成自然、有空气感的阴影。

Figma 插件:https://www.figma.com/community/plugin/1682262103424224680/floating-shadows

可控 AI 图像与视频工作室:ArtCraft

ArtCraft 是一款面向艺术家的开源 AI 图像与视频创作工具,强调对生成过程的控制,而不是只追求一键生成。它支持在浏览器中使用,也提供 macOS 和 Windows 桌面应用,适合需要反复调整角色、场景和镜头关系的创作流程。

ArtCraft 提供角色姿态、场景和摄像机调度等更细致的控制方式,可以先确定画面构图和动作,再生成图像或视频;项目代码公开在 GitHub,也不要求订阅。对于想把 AI 生成融入概念设计、分镜、视觉开发或短视频制作,同时又希望保留更多创作自主权的人来说,值得关注。

官网:https://getartcraft.com/

GitHub:https://github.com/storytold/artcraft

花瓣网原图下载与商用提示油猴脚本

这是一个面向花瓣网的 Tampermonkey 用户脚本,主要解决图片保存和页面右键受限的问题:可以一键下载当前图片的最高清原图,给可能用于商业用途的图片添加红框提示,并恢复浏览器原生右键菜单,方便使用“图片另存为”或其他浏览器扩展。

它适合经常在花瓣网收集参考图、整理素材的设计师使用。不过,脚本提供的是技术上的下载和提示能力,图片的版权、授权范围与实际商用许可仍需要单独确认。

脚本地址:Greasy Fork

把工具、素材和设计笔记放在一个空间:QuickPick

QuickPick 是一个面向创作者的工作空间,用来集中保存设计工具、灵感链接、图片素材、文件和项目笔记。它把内容分成 Tools、Boards 和 Notes:工具可以快速收藏和发现,Boards 支持批量上传、拖放和批量下载,Notes 则可以记录设计决策、清单与参考链接,并支持文字高亮和基础排版。

它适合用来整理那些散落在浏览器书签、聊天记录、网盘和临时文档里的设计资料。比如可以为一个项目建立素材 Board,把灵感截图、参考网站、交付文件和色彩说明放在一起;也可以把常用的 Figma、Framer、Webflow、LottieFiles 等工具集中管理。免费工作区需要登录,具体容量和功能以官网当前方案为准。

官网:https://www.quickpick.space/

素材、工具与灵感:Moonvy 周刊资源库

Moonvy 周刊资源库把历期《设计素材周刊》中的独立条目整理成可搜索的资源卡片,可以按类型、主题、产品、交付方式和技术栈筛选。每张卡片都保留原条目的简介、标签和配图,并能回到对应期数的周刊原文。

如果你不想从头翻阅整期周刊,而是只想快速找到 Figma 更新、UI 组件、网页灵感、图标库或 AI 工具,这个页面可以作为更直接的入口;筛选结果也会随着后续周刊更新持续补充。

资源库:https://moonvy.com/blog/resources/

🎊 设计素材

用 AI 提示词和源码搭建高动效网站:ScrollTide

ScrollTide 是一个面向 AI 网页开发的高端 UI 组件与网站模板库,提供 16 个独立组件、18 个页面区块和 79 个模板。内容覆盖 3D 轮播图、流畅画布网格、交互式卡片、粒子地球、动态按钮、Hero、CTA、Pricing、Footer 和 Contact 等场景,适合为网页加入更强的动效和沉浸感。

它的工作方式是复制提示词,粘贴到 Claude、Cursor 或 v0,再生成可以继续修改的页面。官网还标注了 React、Next.js、Tailwind、Framer Motion、GSAP、Three.js、WebGL、Shaders 和 Lenis 等技术方向,并提供对应的源代码与 AI 提示词。适合前端开发者快速探索高级交互,也适合作为设计师和开发者讨论 3D、滚动驱动动画与组件拆分方式的参考库。部分内容需要购买权限,使用前可以先查看免费条目和当前方案。

官网:https://www.scrolltide.co/

组件库:https://www.scrolltide.co/components

适合展位图和封面的等距线框插画:hairline

hairline 提供 27 个适合网页使用的等距线框插画,风格轻巧、留白充足,很适合用作展位图、封面、空状态或产品介绍中的视觉点缀。网站可以直接浏览不同 figures,并提供 SVG 文件、React 组件和原生 DOM 等使用方式。

它不依赖额外运行时,支持通过 npm、pnpm、yarn、bun 或 shadcn 安装,也可以结合配套 Skill 让 AI 生成和组合类似的等距线框插画。素材采用 MIT License,适合快速搭建一套统一的产品视觉插画语言。

官网:https://hairline.lucasmarkes.com/

GitHub:https://github.com/lucasmarkes/hairline

面向 AI 建站的网页提示词库:MotionSites AI

MotionSites AI 收集了一批可以直接用于 AI 建站工具的网页提示词,内容按 Apps、Sections 等类型整理,覆盖 Hero、Footer、Pricing、CTA、SaaS 和 Landing Page 等常见页面结构。网站的使用方式很直接:浏览案例,复制提示词,再粘贴到对应的 AI 工具里生成或调整页面。

除了提示词库,MotionSites 还提供 Animated Backgrounds、面向设计能力提升的 Academy,以及新的 MCP 入口。它更适合已经在使用 AI 生成网页、但希望有更具体视觉方向和版式参考的人:先从案例中找到合适的结构,再把提示词作为生成起点,最后回到自己的品牌、内容和组件规则里继续修改。

官网:https://motionsites.ai/

MCP:https://motionsites.ai/mcp

Bento Grid 页面布局灵感:Bento Grids

Bento Grids 是一个专门收集 Bento Grid 网格布局案例的灵感库。网站把来自产品官网、设计系统、品牌展示和营销页面的案例集中整理,点击卡片可以查看对应来源;同时支持按 Discover、Graphic Design、Web Design 和 Animation 等类别浏览,也可以筛选深色或浅色案例。

它适合用来研究如何把多块信息组织成有节奏的视觉结构:大卡片承担主要叙事,小卡片补充数据、功能或品牌细节,再通过尺寸、留白和对齐关系形成层次。网站还提供免费的 Bento 模板,适合在做产品首页、功能介绍或品牌展示时先搭出布局方向,再替换成自己的内容。

官网:https://bentogrids.com/

Agent 开源图标系统:Regen Icons

Regen Icons 是一个专为 Agent 构建界面准备的开源 SVG 图标系统,目前包含 225 个基于 24px 网格绘制的线性图标。仓库提供独立 SVG、React 组件、图标 Sprite 和可搜索目录,也包含部分封闭形状的 Filled 版本,图标可以直接复制到项目或拖进设计工具使用。

它的特别之处在于,图标不是只交付最终 SVG:每个图标都有对应的源文件和生成流程,仓库还提供代理用的 AGENTS.md、绘制规范与校验脚本,方便人和 Agent 继续扩展。当前可直接使用仓库里的 SVG,npm 包 regen-icons 还处于准备阶段;如果你增加或改进了图标,也欢迎把贡献回馈到仓库。

GitHub:https://github.com/kazdenc/regen-icons

MIT License:https://github.com/kazdenc/regen-icons/blob/main/LICENSE

App 图标与设计趋势:APPLORE

APPLORE 是一个持续收集真实 App 图标的灵感与检索平台,目前展示 17,600+ 个来自 App Store 和 Google Play 的应用图标,并按颜色、风格和类别整理。它还会记录应用图标的历次改版,适合观察不同产品的品牌演进和视觉趋势。

除了浏览和搜索图标,APPLORE 还提供 AI 图标生成、手机预览和多尺寸导出等功能。设计师可以先从真实产品中寻找方向,再生成或验证自己的图标方案;做移动端产品、品牌探索、竞品分析或应用商店视觉设计时,都可以把它当作一个快速的图标参考库。

官网:https://applore.app/

真实产品的 React 组件系统:UIAble

UIAble 是一套基于 shadcn、Base UI、Tailwind CSS 和 React 的组件系统,目标是帮助开发者更快搭建可扩展、可投入生产的应用界面。除了 Button、Input OTP、Switch、Toggle Group 等基础组件,它还提供表单、消息、文件上传、数据卡片、交易和个人资料等更接近真实产品的界面模式。

UIAble 的重点不只是组件数量,而是把组件、应用区块和完整使用场景放在同一套系统里,强调可访问性、代码所有权、主题定制和 AI 友好。它适合 Next.js、Tailwind 或 shadcn 项目作为起点:先用现成模式搭出信息结构,再把代码复制到自己的项目中继续调整,而不是被锁定在不可编辑的运行时里。

官网:https://uiable.com/

组件库:https://uiable.com/components

UI 构建者的交互组件金矿:Bencho

如果你正在构建 UI,Bencho 值得先保存下来。它收集了大量交互式 UI 组件,包括 Magnetic Select、Search、Escape Button、Create Menu、Radial Menu、Now Playing、Liquid Toggle、Checklist、Carousel、Pull to Refresh 和 Slide to Confirm 等模块;每个组件都可以直接在页面中试玩,也可以作为项目中的交互参考。

它和普通静态组件库的区别在于,重点不是展示最终截图,而是让设计师先体验交互,再决定哪些细节值得带进项目。网站支持搜索组件、打开声音效果,并提供 “Show me how” 的演示入口;注册后还可以保存自己喜欢的模块。适合用来寻找微交互灵感,或在和开发沟通交互状态时作为更直观的参考。

官网:https://bencho.dev/

专门收集网站页脚的灵感库:Footer.design

Footer.design 是一个专门整理网站 Footer 设计的灵感画廊。它把不同网站的页脚案例集中在一起,并提供 Typographic、Small Type、Illustrative、Grid、Flat、Animated、Cards、Bright 和 Dark 等风格分类,方便根据视觉方向快速筛选参考。

相比泛化的网页灵感站,这个网站把范围缩小到了页面最容易被忽略、但很影响收尾体验的区域。做官网、作品集或产品落地页时,可以从这里观察导航分组、品牌信息、社交链接、联系方式、CTA 和版权信息如何组合,再结合自己的内容密度与响应式布局重新组织。

官网:https://www.footer.design/

浏览全部案例:https://www.footer.design/browse

按钮灵感库:CTA.gallery

CTA.gallery 是一个专门整理 Call-to-Action 设计的网页灵感库,收录按钮、购买、下载、表单、弹窗、导航、Newsletter 以及 Pricing / Subscription 等不同类型的 CTA 案例。网站还支持按行业和模式筛选,适合在设计转化路径或落地页关键节点时快速寻找参考。

它的价值不只是提供漂亮的按钮截图,而是把 CTA 放回具体页面和业务目标里观察:同样是“开始使用”或“了解更多”,可以对比不同网站如何处理文案、层级、颜色、留白、动效和周边信息。做营销页、产品官网或 SaaS 注册流程时,可以把这里的案例当作结构和表达方式的参考,再结合自己的用户路径重新设计。

官网:https://www.cta.gallery/

CTA 写作提示:https://www.cta.gallery/cta-tips

404 页面库:404s.design

404s.design 是一个专门收集创意 404 页面的网站灵感库。它把“页面不存在”这一特殊场景拆成可浏览的案例网格,并提供 3D、Bold、Brutalist、Colorful、Dark、Glitchy、Illustrative、Minimal、Playful、Typographic 等视觉风格筛选,还可以按 Animated、Custom Cursor、Game、Hover Effects 和 Interactive 等交互方式查找。

404 页面不只是错误提示,也可以成为品牌表达、引导回首页或发现其他内容的机会。这个画廊适合在设计网站异常状态时参考:观察插画、文案、动效、返回路径和内容推荐如何组合,让用户在迷路时仍然知道下一步该去哪里。

官网:https://www.404s.design/

提交案例:https://www.404s.design/submit

让 Coding Agent 记住上下文:agentmemory

agentmemory 是一个运行在本机上的持久化记忆系统,用来让 Coding Agent 跨会话保存、检索和整理上下文。它通过 Hooks 自动捕获会话、Prompt、工具调用和停止事件,再用 BM25、向量检索与知识图谱组合出 Recall 结果;安装后不需要外部数据库,状态保存在本地 JSON 中。

它提供 MCP 工具和 REST 接口,也带有可以查看实时观察流、历史会话、记忆内容和知识图谱的本地 Viewer。当前支持 Claude Code、Copilot CLI、Codex CLI、Cursor、OpenCode 等多种 Agent,安装方式可以直接使用 npx @agentmemory/agentmemory。如果你经常需要向 Agent 重复解释项目约定、技术决策和之前的排查结论,这类工具值得关注;不过实际接入前仍建议先确认本地数据存储、LLM Provider Key 和团队隐私要求。

官网:https://www.agent-memory.dev/

GitHub:https://github.com/rohitg00/agentmemory

给 AI Agent 的设计系统参考:Refero Styles

Refero Styles 是一个面向 AI Agent 的设计系统示例库,收集了 2,000 多个产品网站的可读设计资料。打开任意风格后,可以查看颜色、字体、间距、组件和页面视觉特征,并获取一份可用于 Cursor、Claude Code、Codex、v0 或 Lovable 的 DESIGN.md。

网站支持按 Minimal Design、Clean SaaS、Editorial Type、Soft Gradients、Monochrome UI、Playful Design、High Contrast 和 Premium Design 等风格筛选,也可以按品牌、风格、颜色、字体或类别搜索。它适合在让 Agent 生成页面前先提供真实产品的设计上下文,把“做得好看”转化成更具体的颜色、排版、间距和组件约束。

官网:https://styles.refero.design/

设计资源:https://styles.refero.design/ai-agents/design-resources


我们是谁?

Moonvy 月维是一款专业的「设计资源管理工具」,让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验,并支持多种开发代码格式,让设计交付更省心、更顺畅。(moonvy.com)

设计工具不该成为交付的门槛

2026-09-18 00:00:00

参与过设计交付的人,大概都有过这样的时刻。

打开一个项目,发现文件在 Figma 里;另一个项目用的是 Sketch;客户发来的文件,却来自 MasterGo、Pixso,甚至是 Photoshop 或 Illustrator。

工具本身没有对错。每个设计师都有自己的习惯,也有每个团队更适合的协作方式。有人喜欢 Figma 的协作体验,有人离不开 Sketch 的工作流,也有人已经在 MasterGo、Pixso 里积累了大量项目

但到了交付的时候,事情就变得有些麻烦了。

你需要确认对方使用什么工具,文件能不能打开,插件是否支持,预览是否正常。有时候,设计本身已经完成了,真正花时间的却是“怎么把它交出去”。

让设计工具、设计图和代码连接起来

所以最近,我们给月维增加了一些新的设计软件支持。

现在,月维已经支持:

  • Figma
  • Sketch
  • 即时设计
  • Axure
  • MasterGo
  • Pixso
  • Adobe Photoshop
  • Adobe Illustrator
  • 蓝湖插件

前往下载 Moonvy 月维插件

我们希望做的,不是让大家都使用同一种设计工具。

恰恰相反,我们更希望设计师可以继续使用自己熟悉的工具,而不必因为交付环节,被迫改变原来的工作方式。

从这个角度看,月维更像是站在不同设计工具之间的一层连接。

不管文件来自哪里,也不管接收方使用什么方式查看,设计资源都可以更顺利地被整理、分享和交付。

到现在,月维是支持交付软件较为全面的设计交付工具。

这件事听起来可能没有那么“热闹”。它不像一个全新的编辑器,也不是一个一眼就能看见的复杂功能。

但我们知道,很多真正影响工作体验的事情,往往发生在这些不太显眼的地方。 少一次格式转换,少一次重复上传,少一次“你那边能打开吗”的确认,项目推进就会顺利一点。


月维不只是设计交付工具

月维支持的,也不只是设计软件。

在一个完整的项目里,除了 Figma、Sketch 或 Photoshop 的源文件,还会有大量图片、PDF、Word 文档、GIF、动效和各种临时素材。

这些内容往往来自不同的工具,也分散在不同的文件夹里。为了确认一个文件的内容,大家经常需要反复下载,再切换到对应的软件中打开。

月维希望把这些常用的设计资源集中到一个地方,并尽可能支持在线预览。

不用下载,也不用为了看一眼文件,专门安装一个软件。

图片格式

月维支持多种常见图片格式,包括 PNG、JPEG、GIF、BMP、SVG、TIFF、ICO 等。

一些相对新或不那么常见的格式,也可以直接预览,比如 AVIF、JXL 和 WEBP。

如果你使用苹果设备,照片里的 HEIC 格式也能正常查看;游戏项目里常见的 TGA 贴图,同样支持在线预览。

这些格式平时可能并不显眼,但真正遇到的时候,能够直接打开,就少了一次转换和来回确认。

设计源文件

设计团队里,除了最终交付的文件,也会积累大量原始文件。

不同阶段的 PSD、AI、FIG、XD、SKETCH 文件,可能记录着项目的过程、不同版本的尝试,以及一些暂时没有被采用、但未来仍有参考价值的方案。

如果这些源文件分散在个人电脑、聊天记录或不同的网盘里,时间久了,团队很难知道它们分别属于哪个项目,也很难重新利用过去积累的资源。

月维支持对 PSD、AI、FIG、XD、SKETCH 等主流设计源文件生成预览图,方便团队把各种原始文件集中整理在一起。

它目前主要用于缩略图和快速确认内容,不一定替代原本的设计软件,但可以帮助你快速判断:

这是哪个项目的文件?

它属于哪个阶段?

需要下载继续编辑,还是直接分享给别人?

当源文件被统一收纳、预览和整理之后,它们就不只是“做完项目后留下的文件”,也会逐渐成为团队可以持续使用的设计资源。

动效与骨骼动画

在 UI 设计中,动态素材也越来越常见。

页面转场、加载动画、交互动效、角色动作,往往都会和静态设计稿一起参与评审和交付。如果这些内容需要单独放在其他工具或文件夹里管理,查找和沟通都会变得不太方便。

所以,GIF、动效文件,以及 Spine 2D 骨骼动画,也可以直接放进月维,和设计文件、图片素材一起管理。

月维支持在线预览 Spine 2D 骨骼动画,还可以浏览和指定不同的动作与 Skin。

这样一来,设计稿、动态素材、源文件和参考图片可以放在同一个项目空间里。需要查看时直接打开,需要分享时也不必再重新整理一套文件。

我们希望月维承载的不只是某一种文件。

它可以是设计稿的交付空间,也可以是图片、文档、动效和源文件共同存在的项目资料库。

设计工具可以很多,文件格式也可以很多。

但查看、整理和分享这些内容,不应该因为格式不同,就变得复杂。

月维不要求你使用同一种工具。

只希望无论你用什么工具创作,最后都能更顺利地把成果交到需要它的人手里。

新增「密码分享」

除了设计软件支持,这次我们还增加了一个新的分享方式:密码分享。

以前,分享设计灵感、设计方案或者设计 Demo 时,通常需要让对方登录月维,或者把资源设置成完全公开。

现在,你可以直接为分享内容设置访问密码。

生成分享链接后,只需要把链接和密码一起发给对方,对方无需登录月维,输入密码就可以访问。

这比较适合以下场景:

  • 分享设计灵感
  • 分享设计方案
  • 分享设计 Demo
  • 与客户或合作方临时查看资源
  • 发送还不适合公开的项目内容

功能入口也很简单:

  • 任意文件夹右键菜单 →「密码分享」
  • 分享面板右上角 →「密码分享」

有时候,我们只是想把一个文件夹发给别人看一眼,并不希望对方为了这一次查看,专门注册一个账号。

现在,这个过程可以简单一点。

设计工具可以很多,分享方式也可以有很多种。月维想做的事情,一直不是替大家决定应该怎么工作,而是尽量把交付过程里的那些小障碍,一个个减少。

让设计师继续用自己习惯的工具,让团队把设计稿、源文件和各种素材放在一起, 也让设计资源在需要到达的人手里时,少绕一点路。

月维,继续帮你管理和交付设计资源。https://moonvy.com/

月维是什么?功能、价格与适用人群一篇讲清楚

2026-08-25 00:00:00

Moonvy 月维是一款面向设计团队的设计资源管理与交付工具。

它可以把设计文件、设计交付、团队协作和版本管理放在同一个地方完成。设计师可以从 Figma、Sketch、即时设计或 Photoshop 上传设计资源,产品和开发成员则可以直接查看设计图、标注、切图和代码。

本文按照月维目前的产品页面整理主要功能、套餐信息和插件支持情况。价格和套餐权益可能会调整,具体以官网价格页当前显示为准。

月维主要功能

功能模块 主要能力 适合场景
设计交付 设计图标注、图层查看、尺寸与样式查看、代码查看 设计师向产品和开发交付设计稿
切图导出 多格式切图、重复切图识别、PNG 压缩、复制 SVG 代码 下载图片资源和前端开发
文件管理 多种格式在线预览、多级文件夹、文件属性、标签和颜色检索 归档和查找团队设计资产
视图管理 图标视图、画布视图等多种方式查看文件 整理设计稿、素材和项目文件
团队协作 评论、备注、在线成员、文件分享、附加链接 方案评审和日常沟通
团队管理 成员邀请、项目管理、权限设置、项目动态 管理不同项目和协作成员
个性化设置 黑夜模式、缩放习惯、剪贴板上传、复制图片到剪贴板 按个人习惯使用月维

设计交付功能

月维的设计交付功能主要服务于设计师、产品经理和开发者之间的协作。

交付功能 说明
设计图标注 查看图层尺寸、位置、间距、颜色、字体、填充、描边和投影等信息
图层查看 显示图层结构和图层轮廓,快速理解页面布局
代码查看 根据设计图查看多种代码格式,方便工程师实现页面
自动布局与变量 识别 Figma 自动布局和设计变量等信息
切图导出 支持多种切图格式,并可切换设计倍数和开发平台单位
图片优化 对 PNG 切图进行压缩,减少资源体积
SVG 代码 无需下载文件,直接复制 SVG 代码

支持的代码类型

在查看设计标注时,可以根据开发平台切换代码类型:

开发平台 支持的代码类型
Web CSS、CSS in JS、CSS in HTML、Tailwind、UnoCSS
Android Android XML、Android Compose
Apple iOS SwiftUI、iOS UIKit Swift、iOS Objective-C
跨平台 Qt Style Sheets、Qt QML

文件管理与团队协作

月维不只是一次性的设计交付工具,也可以用来长期管理团队设计资源。

场景 月维提供的能力
资源归档 图片、视频、动画、PSD、AI、Sketch、Figma 等资源可以集中管理
文件查找 使用文件夹、标签、颜色和多种视图快速定位资源
版本管理 保留设计图历史版本,方便查看更新记录和恢复旧方案
文件预览 直接在浏览器中预览图片、视频、动画、Word、Excel、PPT 和部分设计源文件
方案评审 给文件添加评论、备注和外部链接,保留讨论过程
客户分享 通过分享链接和访问密码,让未注册用户查看设计方案
团队协作 邀请成员加入项目,按不同权限参与上传、编辑、下载和交付

支持在线查看的文件格式

文件类型 支持格式 查看说明
图片 PNG、JPEG、BMP、SVG、TIFF、ICO、AVIF、JXL、WebP、HEIC、TGA 在线预览图片
动画 GIF、Lottie JSON、RIV、PAG 在线预览动画效果
办公文档 DOC、DOCX、XLS、XLSX、PPT、PPTX 在线预览 Word 文档、Excel 表格和 PowerPoint 演示文稿
设计源文件 PSD、AI、FIG、XD、SKETCH 支持预览缩略图
视频 MP4、WebM 能否播放取决于浏览器支持情况
骨骼动画 Spine 2D 在线预览骨骼动画,并查看动作与 Skin
Axure 原型 Axure 导出的 HTML 文件 支持托管并查看原型交互

月维套餐与价格

以下价格按官网目前的年度套餐信息整理。价格可能因活动、支付方式或产品调整发生变化,购买前请以月维价格页为准。

套餐 协作成员 访客数量 团队容量 价格参考
免费版 10 人以内 50 人 1 GB 起 免费
专业版 20 人 100 人 40 GB 起 ¥69 / 人 / 年
企业版 21 人及以上 500 人 100 GB 起 ¥188 / 人 / 年
个人大会员 仅限(免费团队) + 1 人 — + 10 GB ¥159 / 年

协作成员和访客有什么区别?

类型 可以做什么 是否占用协作成员额度
协作成员 上传、编辑、下载资源,查看标注并生成代码 是
访客 浏览团队资源和设计内容 否

如果一个成员只需要查看设计稿,不需要编辑、下载资源或生成标注代码,可以将其设置为访客,从而减少团队的协作成员占用。

容量不够怎么办?

月维支持单独购买容量包。容量包适合团队成员数量不变,但设计文件、视频或源文件不断增加的情况。

容量包支持叠加使用,可以根据团队实际需要分次购买。作为参考,1 GB ≈ 1600 张 APP 设计图,实际数量会因设计图尺寸和文件大小有所不同。对于大多数团队来说,20 GB 容量包是更推荐的选择,通常可以满足日常设计资源、视频和源文件的存储需求。

容量包 适合场景 价格
2 GB 容量包 补充少量设计资源空间 ¥39 / 年
20 GB 容量包 推荐大多数团队使用,存储较多设计源文件、视频和项目资料 ¥299 / 年

支持哪些设计工具插件?

月维通过插件连接设计工具和在线交付空间。设计师可以在熟悉的设计工具中上传设计图,再在月维中完成标注、切图和代码查看。

设计工具 插件状态 支持情况 入口
Figma 已支持 上传设计图并进行设计交付 安装 Figma 插件
Sketch 已支持 支持 Sketch 72 及以上版本 下载 Sketch 插件
即时设计 已支持 在即时设计中上传设计稿到月维 安装即时设计插件
Photoshop 已支持 支持 Photoshop 2024(v25)及以上版本 下载 Photoshop 插件
Illustrator 已支持 使用 Illustrator 上传设计稿到月维 下载 Illustrator 插件

插件的具体安装方式和版本要求,建议前往月维插件下载页查看。

月维协作流程

步骤 参与者 操作
1 设计师 在 Figma、Sketch、即时设计或 Photoshop 中完成设计
2 设计师 使用月维插件上传设计稿和资源
3 产品经理 在月维中预览设计方案并添加评论或备注
4 开发者 查看尺寸、颜色、字体、切图和代码信息
5 团队成员 通过版本记录追踪修改,并在同一个项目中持续协作

哪个套餐适合你?

使用情况 推荐选择 原因
个人使用,偶尔交付设计稿 免费版或个人大会员 先使用基础功能,空间不足时再增加容量
10 人以内的小团队 免费版 免费使用主要协作能力,适合设计师、产品和开发组成的团队
11–20 人、需要稳定协作的团队 专业版 专业版从 11 人起,增加协作成员和团队容量,适合持续交付项目
21 人及以上、资源量较大的团队 企业版 支持更多成员和更大的团队资源空间

如果你正在寻找一款可以同时完成设计资源管理和设计交付的工具,可以先从免费注册月维开始,再根据团队规模和存储需求选择合适的套餐。

查看月维全部功能 · 查看价格 · 下载插件

支持小团队,月维设计交付 10 人以内团队免费

2026-08-25 00:00:00

月维为 10 人以内团队提供免费协作能力

10 人以内团队,目前可以免费使用月维。

对于还处在早期阶段的团队,可以先使用基础的项目管理、设计交付和资源协作能力。

团队本身就会不断变化:今天可能只有 3 个人,下个月加入一名前端,过一段时间又增加一名产品经理。

团队可以根据成员规模、存储空间和项目需求,逐步选择适合自己的服务方案。

这也是月维目前坚持的方式:

先让小团队把项目跑起来,再根据实际需求逐步升级。

设计资源,不该散落在各个地方

如果你还没有使用过月维,可以把它理解为一个:

设计资源管理 + 设计交付 + 团队协作工具。

除了查看设计稿、标注、切图和查看代码,月维还希望解决一个长期存在的问题:

设计完成之后,这些资源应该放在哪里?

很多团队的设计资源分散在电脑、网盘、聊天记录、设计工具和各种临时文件夹中。

时间一长,就容易出现这些问题:

  • 找不到最新版设计稿;
  • 不清楚源文件放在哪里;
  • 旧版本被覆盖;
  • 项目结束后,设计资产随之散落;
  • 新成员加入时,需要重新整理和交接。

所以,月维从一开始就不只是关注「把设计稿交付出去」,也希望帮助团队长期整理和沉淀设计资产。

目前,月维可以统一管理:

图片、PSD、AI、Sketch、Figma、Word、Excel、PPT、视频、动画等多种设计资源。

很多设计源文件还可以直接查看缩略图和文件信息,不必每次下载到本地再打开确认。


标注、切图、代码,在一个地方完成

设计稿上传到月维后,可以直接完成:

标注、切图、代码查看、颜色与变量查看、历史版本管理等操作。

设计和开发之间,不必再为了一个尺寸、一张切图或一段样式代码反复沟通。

设计稿更新后,历史版本也会继续保留。

谁改了什么、哪个版本是之前的方案,都可以继续追溯。

简单来说:

从设计资源管理到设计交付,团队可以在同一个地方完成协作。


分享设计方案,也可以更简单

除了团队内部协作,月维也支持多种分享方式。

比如「密码分享」可以把设计灵感、设计方案和 Demo 直接分享给客户或其他协作者。

对方无需注册月维账号,打开链接并输入访问密码即可查看。

对于客户预览、方案评审和临时分享等场景,会更加方便。


10 人以内团队,适合哪些协作场景?

很多真正需要设计协作的团队,其实并没有那么大。

比如,一个典型的小型产品团队可能包括:

  • 2 名设计师
  • 2 名产品经理
  • 3 名前端 / 开发
  • 1 名项目负责人

一共 8 个人。

在月维里,这样的团队目前依然可以免费使用。

团队可以创建项目、整理设计资源、上传设计稿、进行标注和切图,也可以邀请成员一起协作。

免费版可以满足小团队日常的资源管理、设计交付和团队协作需要。


团队可以慢慢长大,成本也应该逐步增加

当然,随着团队规模扩大,对存储空间、权限管理、协作人数和服务能力的需求也会增加。

到了那个阶段,再根据实际规模选择合适的付费方案,是很自然的事情。

但在团队还只有几个人时,我们更希望大家先把工具用起来:把项目跑起来,把设计资源管理起来,等团队真的长大了,再考虑更大的方案。

这也是月维目前对团队定价的基本思路:团队可以慢慢长大,成本也应该逐步增加。


月维适合哪些团队

如果你正在寻找一款可以同时完成设计资源管理、设计交付和团队协作的工具,可以试试月维。

10 人以内团队,目前免费使用。

不只是完成一次设计交付,也可以把散落在各个地方的资源,慢慢整理成真正属于团队的设计资产。

开始使用月维

如果你想进一步了解月维的完整功能、套餐价格和适用人群,可以继续阅读:《月维是什么?功能、价格与适用人群一篇讲清楚》。