2026-09-18 00:00:00
参与过设计交付的人，大概都有过这样的时刻。
打开一个项目，发现文件在 Figma 里；另一个项目用的是 Sketch；客户发来的文件，却来自 MasterGo、Pixso，甚至是 Photoshop 或 Illustrator。
工具本身没有对错。每个设计师都有自己的习惯，也有每个团队更适合的协作方式。有人喜欢 Figma 的协作体验，有人离不开 Sketch 的工作流，也有人已经在 MasterGo、Pixso 里积累了大量项目
但到了交付的时候，事情就变得有些麻烦了。
你需要确认对方使用什么工具，文件能不能打开，插件是否支持，预览是否正常。有时候，设计本身已经完成了，真正花时间的却是“怎么把它交出去”。
所以最近，我们给月维增加了一些新的设计软件支持。
现在，月维已经支持：
我们希望做的，不是让大家都使用同一种设计工具。
恰恰相反，我们更希望设计师可以继续使用自己熟悉的工具，而不必因为交付环节，被迫改变原来的工作方式。
从这个角度看，月维更像是站在不同设计工具之间的一层连接。
不管文件来自哪里，也不管接收方使用什么方式查看，设计资源都可以更顺利地被整理、分享和交付。
到现在，月维是支持交付软件较为全面的设计交付工具。
这件事听起来可能没有那么“热闹”。它不像一个全新的编辑器，也不是一个一眼就能看见的复杂功能。
但我们知道，很多真正影响工作体验的事情，往往发生在这些不太显眼的地方。 少一次格式转换，少一次重复上传，少一次“你那边能打开吗”的确认，项目推进就会顺利一点。
月维支持的，也不只是设计软件。
在一个完整的项目里，除了 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 时，通常需要让对方登录月维，或者把资源设置成完全公开。
现在，你可以直接为分享内容设置访问密码。
生成分享链接后，只需要把链接和密码一起发给对方，对方无需登录月维，输入密码就可以访问。
这比较适合以下场景：
功能入口也很简单：
有时候，我们只是想把一个文件夹发给别人看一眼，并不希望对方为了这一次查看，专门注册一个账号。
现在，这个过程可以简单一点。
设计工具可以很多，分享方式也可以有很多种。月维想做的事情，一直不是替大家决定应该怎么工作，而是尽量把交付过程里的那些小障碍，一个个减少。
让设计师继续用自己习惯的工具，让团队把设计稿、源文件和各种素材放在一起， 也让设计资源在需要到达的人手里时，少绕一点路。
月维，继续帮你管理和交付设计资源。https://moonvy.com/
2026-09-07 00:00:00
Figma 在 2026 年 9 月 3 日的更新中，增加了在变量面板里批量控制不透明度的能力。不需要解除颜色变量的链接，就可以在颜色之上叠加不透明度；也可以使用数字变量设置不透明度，并将它限定为颜色变量使用。
这让禁用状态、遮罩层和 scrim 等场景的透明度可以统一管理和批量更新，颜色变量仍然保持与设计系统的关联，不必再逐个手动调整。
官方记录：https://www.figma.com/release-notes/
Figma 在 Config 发布自定义生成式插件和着色器之后，又补充了动画与交互、社区发布、组织内发布、代码查看器等能力。现在可以让 Agent 创建带动画、能够响应鼠标移动的着色器效果，也可以把生成式插件和着色器发布到 Figma Community，供其他人使用和 remix。
此外，用户可以直接查看和下载着色器以及自己创建的生成式插件代码；通过 Figma MCP，第三方 Agent 也能查看和修改这些生成式插件与着色器。组织版和企业版还支持将私有资源发布到组织内部统一使用。
官方记录：https://www.figma.com/release-notes/
Figma Draw 最近把两个很熟悉的绘图工具带回了矢量编辑流程：橡皮擦可以直接擦掉路径或形状的一部分，油漆桶则可以为封闭区域填充纯色或渐变，也可以拖动一次修改多个区域的颜色。
橡皮擦不会把对象简单地变成一张位图，而是会在擦除位置生成新的可编辑矢量点；油漆桶也保留在同一个矢量网络里。对于做图标、插画、贴纸和图形 Logo 的设计师来说，这种操作比反复切割路径更接近手绘时的直觉。快捷键是 Shift + E 切换橡皮擦，Shift + B 使用油漆桶。
功能说明：https://help.figma.com/hc/en-us/articles/360039957634-Edit-vector-layers
更新记录：https://www.figma.com/release-notes/
Figma MCP 的企业托管授权现在已经正式开放。组织管理员可以通过身份提供商集中管理 MCP Server 与 AI Agent 的连接，成员不需要每个人都重复走 OAuth 登录和授权流程。
当前文档以 Okta Cross App Access 为例：成员通过企业身份系统登录一次，Claude 就可以在组织批准的范围内使用 Figma MCP。它解决的不是“如何让 Agent 读到设计稿”，而是团队规模变大以后，如何把权限、登录和审计纳入原有的 IT 管理流程。这个功能目前适用于 Organization 和 Enterprise 计划，并且文档注明支持 Anthropic models。
Figma 的 Auto Layout 新增了 Around 和 Evenly 两种自动间距方式，并把原本的默认方式重新命名为 Between。三个选项分别对应 CSS 中常见的 space-between、space-around 和 space-evenly 逻辑。
Between 只在元素之间分配间距，边缘不留额外空间；Around 会在每个元素两侧分配空间，边缘间距是中间间距的一半；Evenly 则让元素之间以及两端的间距完全一致。对于需要从设计稿直接还原到 Flexbox 的界面，这种命名和行为的统一能减少“看起来差不多、代码却要重新猜”的情况。
官方说明：https://www.figma.com/release-notes/
Anthropic 把 Claude Design 的画板工作流带进了 Claude Code。输入 /design 后，Claude 会先生成多个可编辑的界面方案，设计师可以挑选一个、直接在画布上调整，再让 Agent 按这个版本继续实现，而不是从一句模糊 Prompt 直接跳到代码。
它适合用在还没有确定布局的功能：先比较几个方向，再把选中的画板交给现有代码库。Claude Design 的更新说明还提到，/design-sync 可以把设计系统带入工作流，尽量沿用已有组件和规则。需要注意的是，/design 目前仍属于研究预览，使用时最好把它当作快速探索和沟通工具，关键的组件、交互和无障碍细节仍然要自己验收。
官方介绍：https://claude.com/blog/claude-design-stays-on-brand-for-daily-work
MetalForge 是一个面向 SwiftUI 和 React Native 的 Shader 可视化编辑器，不需要先写 Metal 或 GLSL，就可以通过滑块调整效果，再预览并分享参数 URL。它支持导出真正的 .metal 文件、SwiftUI View，以及 React Native（Skia）Shader，适合用来制作更有质感的加载、进度和 Agent 工作状态动画。
预览：https://metalforge.xyz/editor#tool=progress
Better Design 是一套面向 coding agent 的设计系统与 MCP 工具。它提供设计系统、界面原则、UX 指导、图标、素材和审查规则，目标是让 Agent 在生成页面时先读取设计上下文，并在修改代码后继续做设计层面的检查。
它和普通组件库的区别在于：组件只是“能用什么”，而设计指导还要回答“什么时候用、如何组合、怎样判断结果是否合理”。如果你已经在使用 v0、Claude Code 或其他 MCP 客户端，可以把它当成一层独立的设计顾问；项目主页还提供了可以直接安装到编辑器的 MCP。
对比说明：https://better-design.com/vs/v0
Sync UI 最近发布了 Charts，包含 Bar、Donut、Heatmap、Line、Progress 和 Stat 等常见图表，组件带有动画、主题变量和深色模式，并且 CLI 与 MCP 已经同步支持。
它适合用在需要快速搭建后台、数据产品或 AI 工作台的项目里：图表和其他组件采用同一套 syncui add 工作流，不需要额外引入一套完全不同的图表 API。图表可以继续使用项目自己的 Token 做主题化，比较适合先快速搭出信息结构，再回到代码里调整数据密度、动画和交互。
更新记录：https://www.syncui.design/docs/changelog
Logo Lattice 是一个浏览器里的 Logo 编辑器，围绕方格和等距网格来绘制几何 Logo，支持 SVG 和 PNG 导出。最近的更新包括 SVG 描边圆角、等距绘制、可自定义 PNG 尺寸，以及更清晰的网格绘制引导。
它不是用来替代 Illustrator 的完整矢量软件，而是把“从几何约束出发做一个小 Logo”这件事做得更直接。想练习图形构成、快速做一个 App 图标，或给一个新项目先建立几个方向时，都可以打开它试试。免费浏览和编辑，部分 Studio 功能需要订阅。
更新记录：https://logolattice.com/change-log
Superflow 是一个面向网站和数字资产的 AI Review 工具。它可以把团队已有的 QA 清单变成多个审核 Agent，检查断链、拼写、基础无障碍、SEO，以及品牌颜色和字体是否符合规范；发现问题后会把评论固定在页面元素上，而不是只给一份难以定位的报告。
它保留了 human-in-the-loop：AI 负责第一轮检查，团队和客户仍然需要确认、修改和签字。对于设计师和小型工作室来说，比较实用的地方是把“交付前再看一遍”的经验变成可重复执行的流程，尤其适合同时维护多个网站或营销页面的场景。
FeralUI Gradients 是一个免费的在线渐变生成器，使用传统日式色彩来组合柔和、带有绘画感的渐变。选择渐变类型、混合颜色和边缘衰减后，可以实时预览结果，不需要注册，也不会添加水印。
它提供了 20 多种类型，包括动态 Mesh、颗粒感复古 Blob、Aurora 光带、Wave，以及线性、径向、锥形和像素网格等渐变。静态效果可以导出为 SVG 或 PNG，动态效果可以导出为 MP4；复制 SVG 后，还能直接粘贴到 Figma，并作为带名称的可编辑图层继续调整。
在线使用：https://feralui.dev/gradients
Mesurer 是一款基于浏览器的 UI Inspector，适合在开发过程中直接检查页面界面。安装 Chrome 扩展后，可以选取页面元素查看尺寸、间距和对齐关系，也支持像素标尺、横竖辅助线、按住 Alt 快速检查间距、颜色取样、文字样式检查和 X-ray 结构查看。
它还可以截取当前可见区域，并复制到剪贴板或下载到本地。对于设计还原、像素级验收，或者需要给 coding agent 提供更精确视觉反馈的场景，Mesurer 能把“这里差一点”变成更具体的测量结果和截图标注。
UI Camera 是一个在浏览器里制作软件产品视觉素材的工具。上传 PNG、JPG、WEBP、AVIF、GIF，或 MP4、MOV、WEBM 后，可以像操作一台 3D 相机一样调整 X、Y、Z 视角，选择 16:9 等画幅，并在图片和视频模式之间切换。
它适合把普通的 UI 截图变成更有空间感的产品展示图或演示视频，用于产品介绍、案例展示和社交媒体配图。调整好角度后还能直接截取 PNG，整个过程比较适合快速做出一组风格统一的界面视觉。
Circle Loaders 收集了 24 个黑白风格的圆形加载动画，全部使用原生 SVG 制作，不依赖任何 JavaScript 或第三方库。每个动画都可以直接复制 SVG 代码，适合放进网页、应用加载状态、AI Agent 处理中状态和各种空状态界面。
它的细节很适合拿来做微交互参考：同样是圆形，既可以用旋转、分段、扫描和呼吸感表达“正在等待”，也可以用更有节奏的变化表现 Agent 正在工作。网站还提供了面向开发者的复制入口，使用时可以先确认动画的尺寸、颜色和 prefers-reduced-motion 处理是否符合自己的项目。
在线浏览：https://circleloaders.dominikakissi.com
更多内容：https://shoogle.dev/fresh
Ambient CSS 是一个基于物理光照的 CSS 系统。只需要定义光源，阴影、高光和表面渐变就会根据同一套光照关系自动变化；它参考 Blender 的光线追踪结果进行校准，最终使用 CSS box-shadow 渲染。
它适合用来理解界面中的光照方向、阴影层次和表面质感，也可以作为制作卡片、按钮和悬浮面板视觉效果的参考。相比单独调整多层阴影，这种方式更容易让同一组组件保持一致的光照逻辑。
在线体验：https://ambientcss.vercel.app/
Aura Gradients 是一个免费的氛围渐变素材库，使用分层渐变和 CSS 混合模式制作柔和、带有空间感的背景。网站目前收录 200 多个渐变，提供 Aura、Mesh、Nebula、Prism、Lattice、Grain、Glass 和 Flux 等分类。
每个渐变都可以先预览，再进入自定义编辑，也支持复制 Prompt，适合快速为网站、产品界面或作品集寻找背景方向。项目开源，动画渐变和更多自定义能力也在持续开发中。
在线浏览：https://auragradients.vercel.app/
很有意思的手绘动画图标库，每个图标都有活泼的小动画，手绘感很强，很适合用在一些偏个性、轻松有趣的产品或网页中。
图标支持导出为 Animated SVG，也可以放到 Figma 中继续编辑。目前已经制作了约 150 个图标，作者 计划后续扩充到 1500 个，值得持续关注。
网站：https://oreoui.com/doodle-icons
Github：https://github.com/oreo-design/doodle-icons
很适合日常逛的设计灵感库，收集了来自互联网的优秀视觉设计作品，涵盖 Web、品牌、产品、动效、插画、3D、印刷等多个分类。
网站整体很干净，可以直接按分类筛选，适合找项目灵感、做 Moodboard，或者没事的时候随手刷刷最近的好设计。内容还会持续更新。
网站：https://www.inspora.design/
Moonvy 月维是一款专业的「设计资源管理工具」，让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验，并支持多种开发代码格式，让设计交付更省心、更顺畅。（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 插件 |
插件的具体安装方式和版本要求，建议前往月维插件下载页查看。
| 步骤 | 参与者 | 操作 |
|---|---|---|
| 1 | 设计师 | 在 Figma、Sketch、即时设计或 Photoshop 中完成设计 |
| 2 | 设计师 | 使用月维插件上传设计稿和资源 |
| 3 | 产品经理 | 在月维中预览设计方案并添加评论或备注 |
| 4 | 开发者 | 查看尺寸、颜色、字体、切图和代码信息 |
| 5 | 团队成员 | 通过版本记录追踪修改，并在同一个项目中持续协作 |
| 使用情况 | 推荐选择 | 原因 |
|---|---|---|
| 个人使用，偶尔交付设计稿 | 免费版或个人大会员 | 先使用基础功能，空间不足时再增加容量 |
| 10 人以内的小团队 | 免费版 | 免费使用主要协作能力，适合设计师、产品和开发组成的团队 |
| 11–20 人、需要稳定协作的团队 | 专业版 | 专业版从 11 人起，增加协作成员和团队容量，适合持续交付项目 |
| 21 人及以上、资源量较大的团队 | 企业版 | 支持更多成员和更大的团队资源空间 |
如果你正在寻找一款可以同时完成设计资源管理和设计交付的工具，可以先从免费注册月维开始，再根据团队规模和存储需求选择合适的套餐。
2026-08-25 00:00:00
10 人以内团队，目前可以免费使用月维。
对于还处在早期阶段的团队，可以先使用基础的项目管理、设计交付和资源协作能力。
团队本身就会不断变化：今天可能只有 3 个人，下个月加入一名前端，过一段时间又增加一名产品经理。
团队可以根据成员规模、存储空间和项目需求，逐步选择适合自己的服务方案。
这也是月维目前坚持的方式：
先让小团队把项目跑起来，再根据实际需求逐步升级。
如果你还没有使用过月维，可以把它理解为一个：
设计资源管理 + 设计交付 + 团队协作工具。
除了查看设计稿、标注、切图和查看代码，月维还希望解决一个长期存在的问题：
很多团队的设计资源分散在电脑、网盘、聊天记录、设计工具和各种临时文件夹中。
时间一长，就容易出现这些问题：
所以，月维从一开始就不只是关注「把设计稿交付出去」，也希望帮助团队长期整理和沉淀设计资产。
目前，月维可以统一管理：
图片、PSD、AI、Sketch、Figma、Word、Excel、PPT、视频、动画等多种设计资源。
很多设计源文件还可以直接查看缩略图和文件信息，不必每次下载到本地再打开确认。
设计稿上传到月维后，可以直接完成：
标注、切图、代码查看、颜色与变量查看、历史版本管理等操作。
设计和开发之间，不必再为了一个尺寸、一张切图或一段样式代码反复沟通。
设计稿更新后，历史版本也会继续保留。
谁改了什么、哪个版本是之前的方案，都可以继续追溯。
简单来说：
从设计资源管理到设计交付，团队可以在同一个地方完成协作。
除了团队内部协作，月维也支持多种分享方式。
比如「密码分享」可以把设计灵感、设计方案和 Demo 直接分享给客户或其他协作者。
对方无需注册月维账号，打开链接并输入访问密码即可查看。
对于客户预览、方案评审和临时分享等场景，会更加方便。
很多真正需要设计协作的团队，其实并没有那么大。
比如，一个典型的小型产品团队可能包括：
一共 8 个人。
在月维里，这样的团队目前依然可以免费使用。
团队可以创建项目、整理设计资源、上传设计稿、进行标注和切图，也可以邀请成员一起协作。
免费版可以满足小团队日常的资源管理、设计交付和团队协作需要。
当然，随着团队规模扩大，对存储空间、权限管理、协作人数和服务能力的需求也会增加。
到了那个阶段，再根据实际规模选择合适的付费方案，是很自然的事情。
但在团队还只有几个人时，我们更希望大家先把工具用起来：把项目跑起来，把设计资源管理起来，等团队真的长大了，再考虑更大的方案。
这也是月维目前对团队定价的基本思路：团队可以慢慢长大，成本也应该逐步增加。
如果你正在寻找一款可以同时完成设计资源管理、设计交付和团队协作的工具，可以试试月维。
10 人以内团队，目前免费使用。
不只是完成一次设计交付，也可以把散落在各个地方的资源，慢慢整理成真正属于团队的设计资产。
如果你想进一步了解月维的完整功能、套餐价格和适用人群，可以继续阅读：《月维是什么？功能、价格与适用人群一篇讲清楚》。
2026-08-24 00:00:00
Figma Make 最近加入了更接近传统设计工具的可视化编辑方式。选中预览中的元素后，可以直接在属性面板里调整间距、字号、行高、圆角、透明度、层级和边框等属性，修改结果会先暂存在聊天框中，确认后再应用到代码里。
如果是交互、动效或需要结合上下文的修改，则可以使用「Annotate for agent」在画面上圈出目标，再直接描述希望发生的变化，例如 hover 放大、延迟出现或点击后的过渡。属性面板适合精确调整视觉参数，标注则更适合把意图交给 Agent 执行，两种方式可以组合使用。
目前这项能力正在逐步开放，属性面板只适用于新建的 Make 文件，应用修改会消耗 AI credits。
官方介绍：https://www.figma.com/blog/properties-panel-and-annotations-now-in-figma-make/
使用文档：https://help.figma.com/hc/en-us/articles/42009840449175-Edit-a-Figma-Make-file
OpenPencil 是一款开源的 AI 原生设计编辑器，它把设计文件当作可读、可查询、可修改的节点树，而不只是一个只能在特定软件里打开的画布。项目支持导入 Figma .fig 文件，并提供桌面端、网页端、CLI、MCP Server 和 Vue SDK。
它的有趣之处在于：设计师可以在画布上编辑，脚本可以批量修改 Token，AI Agent 也可以通过同一套操作创建和调整界面。CLI 还能检查、查询、分析、导出和转换设计文件，适合想把设计文件纳入代码工作流的团队。项目采用 MIT 协议，桌面端体积也比较轻。
GitHub：https://github.com/open-pencil/open-pencil
Motion UI 是 Motion 团队新推出的 React 动效组件库，提供可以直接组合到页面里的 Hero、通知、页面过渡和数字动画等组件。它可以通过 Motion+ MCP、AI 适配提示或 shadcn CLI 安装，比较适合已经在使用 React、Tailwind 和 shadcn/ui 的项目。
它没有把动效当成散落在各个组件里的参数，而是提供了一个统一的 motion.theme.ts，用 snap、ui、gentle、lively 和 ambient 等语义化名称管理整套产品的动效感觉。每个组件还带有 MotionScore 性能评级，并提供 reduced-motion 处理，方便在追求表现力的同时控制渲染成本和无障碍体验。
目前 Motion UI 包含在 Motion+ 会员中。
发布介绍：https://motion.dev/magazine/introducing-motion-ui
UIAble 是一套基于 shadcn 和 Base UI 的 React 组件系统，最近发布了新版本。它不只提供单个 Button、Input、Switch 这类基础组件，还把表单、消息、文件上传、交易、数据卡片等常见应用界面整理成可以直接参考和组合的结构。
项目强调开源、可访问性、完整代码所有权和 AI 友好，组件可以复制到自己的项目中继续修改，不需要被锁定在一个不可编辑的运行时里。对于使用 Next.js、Tailwind 或 shadcn 体系快速搭建后台、SaaS 和产品官网的开发者来说，它可以作为一套更有视觉完成度的起点。
组件浏览：https://uiable.com/components
MapCN 是一套免费、开源、可以直接复制到自己项目里的 React 地图组件。它基于 MapLibre GL，使用 Tailwind 样式，并沿用了 shadcn/ui 的组件习惯，支持零配置和一条命令安装，不需要被锁定在某个封闭的地图运行时里。
除了基础地图，还整理了主题切换、标记、弹窗、Tooltip、标签、路线，以及缩放、指南针、定位和全屏等控制组件。对于正在用 React、Next.js、Tailwind 和 shadcn/ui 搭建后台或数据产品的人来说，它可以直接补上地图这一类通常比较费时间的界面模块，也很适合交给 Agent 作为可读、可改的代码上下文。
需要注意的是，仓库默认使用 CARTO 的底图服务，商业使用需要遵循 CARTO 的授权条款；如果项目有不同的授权要求，也可以替换成 OpenStreetMap、MapTiler 或其他兼容 MapLibre 的瓦片服务。组件本身采用 MIT License。
MapCN 官网：https://www.mapcn.dev/
GitHub：https://github.com/AnmolSaini16/mapcn
Mono Charts 是 Amicro 里的一组 React 动画图表组件，主打简洁的视觉风格和轻量的交互反馈。它提供折线图、柱状图、面积图、环形图、雷达图、热力图、漏斗图、散点图、KPI 卡片等多种常见图表，适合后台、数据产品和营销页面中的信息展示。
现在可以通过 Amicro 的 CLI 把图表直接添加到自己的项目里，例如：
npx @subhanhq/amicro@latest add mono-rounded-line
组件会以代码的形式进入项目，可以继续修改颜色、数据、动画和布局，不需要把产品绑定在一个只能在线调用的图表服务上。项目开源，适合先从一个漂亮的折线图或趋势卡片开始，再按自己的设计系统逐步调整。
官网与在线示例：https://amicro.vercel.app/
GitHub 源码：https://github.com/Subhan-code/Amicro--Micro-transitions-
UISFX 是一个专门为产品界面准备的开源声音效果库。它把常见的 UI 状态拆成 78 个语义化提示音，再为每个状态提供 12 种不同的声音感觉：Minimal、Soft、Glass、Arcade、Mechanical、Organic、Dreamy、Sci-fi、Rubber、Cinematic、Studio 和 Zen。
目前库里共有 936 种声音，包括 72 个短促的一次性提示音和 6 个可循环声音。可以直接在网页里试听，也可以通过 npm install uisfx 接入项目；网站还准备了给 coding agent 的实现提示词，让 Agent 根据产品气质选择合适的 sound feel。代码采用 MIT，音频采用 CC0，适合给 SaaS、AI Agent、游戏、媒体和教育产品补上一套有一致性的声音语言。
声音不应该取代视觉反馈，而应该强化用户已经看到的状态。尤其是 Agent 产品，等待、处理中、完成、成功、错误、通知等状态很适合用克制的提示音建立节奏，但最好同时保留静音、音量和无障碍设置。
GitHub：https://github.com/romainsimon/uisfx
npm：https://www.npmjs.com/package/uisfx
Codex Pets 是一个为 Codex 准备的动画像素宠物社区和分享画廊。你可以浏览各种会动的小角色，按最新、喜欢、浏览、讨论或随机排序，也可以搜索和筛选；每个宠物都支持悬停预览、3D Playground、下载、分享、点赞和快速评论。
它有意思的地方，是把 Agent 时代的终端工具变成了一个有角色、有收藏感的社区。你可以给 Codex 挑一只陪伴开发的像素宠物，也可以上传自己的 spritesheet，创建个人作品，再把宠物带入多人 Playground。背后的开源项目还支持自托管，适合 fork 成自己的素材分享站或角色资产库。
站点底层的设计也很完整：宠物用 pet.json 和 spritesheet 组成标准包，作品可以被下载、复用，并通过 CLI 拉进终端。需要注意的是，社区里有些作品会受已有角色或品牌启发，实际使用时仍然要确认版权和授权范围。
在线画廊：https://codex-pets.net/#/
GitHub 开源项目：https://github.com/portons/codex-pet-share
作者 @mosesbabychrist：https://x.com/mosesbabychrist
BoardUI 是一套为 Agentic Interface 准备的 React + Tailwind CSS 设计系统。它不只是把 Button、Input 这样的基础组件放在一起，而是把后台和 AI 产品里真正会用到的界面整理成可直接参考和安装的模块：数据表格、图表、日历、会议安排、Agent 进度、Prompt Composer、图片生成加载器、侧边栏、仪表盘模板等。
目前官网提供 50+ 个独立组件、180+ 个 building blocks 和 400+ 个设计 Token，设计稿来自 Figma，并且内置深色模式变量。组件可以通过 CLI 加入项目，例如：
npm boardui@latest add button-group
它比较适合用来搭建 SaaS、数据后台和 AI 工作台：先从完整的界面结构开始，再根据自己的产品调整颜色、Token、数据和交互，而不是让 Agent 每次从一块空白画布重新猜一个后台应该长什么样。基础组件和部分模板可以免费使用，Pro 则提供更多组件、区块、模板和图表。
官网与组件浏览：https://www.boardui.com/
原帖：https://x.com/sitenley/status/2090206983328526418
IP as Logo 是一个把产品吉祥物设计规则写成 Agent Skill 的开源项目。它的目标不是生成一张复杂的角色插画，而是把一个产品主题压缩成在小尺寸下依然清楚、可爱、容易记住的品牌符号；如果放在产品仓库里，它还可以先读取 README、页面文案和设计 Token，再根据产品语境提出方向。
这套 Skill 对视觉约束写得很具体：主体通常由 4–7 个大形状组成，默认使用两个 IP 颜色加一个背景色，采用粗圆角轮廓、单色背景和从左下或右下探出的构图。工作流会先给出 3 个设计方向，确认后再生成 6 个独立的方形候选，适合用来做 GitHub、Favicon、应用图标或新产品的第一版品牌资产。
如果想让 Agent 直接使用，可以安装：
npx skills@latest add s1dashu/ip-as-logo-skill
不想安装 Skill，也可以直接去官网浏览和免费下载现成的 IP Logo；仓库采用 MIT 协议，官网提供的 Logo 支持商业使用。它很适合个人开发者和小团队在项目刚开始时快速建立一个有性格、但不会过度复杂的视觉入口。
官网与免费 Logo 库：https://ipaslogo.com/
GitHub 开源 Skill：https://github.com/s1dashu/ip-as-logo-skill
原帖：https://x.com/tranmautritam/status/2090726424651202877
morphicons 是一个专门处理图标形变的轻量级库，可以让一个描边图标通过流畅的弹簧动画转换成另一个图标。它会自动计算形状之间的对齐和旋转关系，不需要为每一对图标手动编写 from/to 路径或额外的旋转规则。
在 React 中，只要改变 MorphIcon 的 icon 属性，就可以让 Menu 变成 X、Play 变成 Pause、Chevron 变成 Arrow；如果需要更精细的控制，也可以使用 progress 做拖拽 scrubbing，或者调用 morphTo 播放指定的变形。库本身零运行时依赖，压缩后约 7 KB，并同时提供 Vue、Svelte、React Native、Web Component 和原生 DOM 的用法。
它很适合用在菜单开关、播放状态、收藏按钮、步骤状态和工具栏操作里，把“图标换了”变成一段能解释状态变化的微交互。开源项目还提供了在线 playground，可以直接试玩不同图标之间的变形效果。
在线 Playground：https://www.morphicons.com/
GitHub 源码：https://github.com/guillermolg00/morphicons
Bloub 是一个把 x.ai 的聊天机器人头像复刻成 SVG 动画的视觉实验：一个黑色形状在 14 个状态之间平滑变形，整个过程不依赖动画库。它和 morphicons 一样关注“形状如何自然地变成另一个形状”，但更偏向一个完成度很高的单一主题作品，而不是通用组件；很适合观察如何用少量 SVG 状态做出有记忆点的形变。
Bloub：https://bloub.vercel.app/
Bible Strong Avatar Lab 是一个可以直接在浏览器中使用的程序化 2D 头像工具。你可以从基础形象开始调整头像的外观、表情和动画，把原本需要逐个绘制的角色变化变成一组可以重复组合和修改的参数。
完成后可以导出 SVG、PNG，以及可以直接放进项目里的 React 或 JavaScript 资源。它适合制作用户头像、AI Agent 状态、聊天角色、产品空状态和带有轻量动画的品牌形象；如果希望一套头像在不同页面、尺寸和状态之间保持一致，程序化生成也比单独准备很多静态图片更容易维护。
官网：https://avatars.bible-strong.app/
UISqueezy Studio 是一个专门管理设计 Token 的在线工作台，可以集中维护颜色、字体、间距、圆角、阴影、尺寸、断点和 z-index 等规范，再导出为 CSS Variables、SCSS 或 LESS。它还提供 Figma 插件，可以把 Token 同步到 Figma Variables，减少设计稿、代码和文档之间反复复制粘贴的工作。
工具提供工作区、项目、成员权限、活动记录和版本历史等团队协作能力，也保留了适合个人设计师的免费方案。需要注意的是，Tailwind CSS 和 Style Dictionary 目前仍标记为计划中的导出目标，使用前可以先确认当前项目需要的格式。
很多字体下载下来之后，只是暂时想看看效果，并不想立刻安装到系统里。TypeTray 可以直接读取文件夹中的字体，在不改变系统字体库的情况下预览和整理，支持 TTF、OTF、TTC、dfont 和 WOFF2 等格式。
它不只是把字体名称列出来，还会把可变字体的 weight、width 等轴放进列表里实时调整，支持切换 stylistic alternates、查看字体自带的 glyph set、按实际语言覆盖筛选，并自动识别字体的子样式。分散在多个文件名里的同一家族可以合并展示，重复的静态字体和变量字体也更容易被发现；还可以叠加另一款字体，直接比较基线和字面高度。
如果你的下载文件夹里积累了大量字体，但又不想为了挑选一个标题字体而反复安装、卸载，TypeTray 很适合当作一个轻量的字体检视台。它是 macOS 原生应用，需要 macOS 14 或更高版本。
官网：https://plkv.works/typetray
一组适合用来提升网页视觉表现的渐变与颜色工具：从实时 WebGL 网格渐变，到符合 WCAG 标准的颜色 Token，再到动画 3D Shader、曲线渐变和 4K 动态背景。可以按项目需要选择一个深入使用，也可以把它们当作做视觉探索时的灵感库。
如果想在网页中加入 Mesh Gradient、噪点、半色调、波纹或类似液态玻璃的动态背景，Paper Shaders 是一个很方便的起点。它提供零额外依赖的 Canvas Shader，可以通过 React 组件或原生 JavaScript 使用，也可以在 Paper 中可视化调节参数后导出代码。
目前项目包含 MeshGradient、DotOrbit、Dithering、Warp、Noise、Metaballs 等多种效果，支持静态或动画状态。代码体积小、参数直观，适合用在 Hero 背景、卡片遮罩、按钮状态和品牌视觉实验中。项目采用 Apache 2.0 协议，可用于商业项目。
官网：https://shaders.paper.design
GitHub：https://github.com/paper-design/shaders
Shader Lab 是 Basement Studio 做的一款在线 Shader 实验工具，界面本身就像一个轻量级的动效合成器。它把 Gradient、Pattern、Text、Dithering 和 CRT 等效果拆成可以单独调整的图层，支持修改色相、饱和度、扫描线、色差、噪点、故障、Bloom 和暗角等参数。
除了手动调参，还可以给参数添加关键帧，或把参数连接到音频，让视觉效果随着时间和声音变化。它很适合快速试做复古屏幕、扫描线、故障艺术和带节奏感的网页背景；即使暂时不需要导出代码，也可以把它当成一个实时视觉灵感板使用。
官网：https://eng.basement.studio/tools/shader-lab
这是一个专门为 Figma 制作透视效果的插件，可以将向量、文字、群组和 Frame 放入自定义的透视空间中。除了常规的透视变形，它还支持创建透视网格、球体、Logo 和各种 Mockup，适合用来制作具有空间感的界面展示、品牌图形和产品视觉。
作者表示这是因为没有找到合适的工具才自己开发的，目前可以在 Figma Community 免费使用。
原帖与演示：https://x.com/todelsz/status/2090837476743008491?s=20
插件：https://figma.com/community/plugin/1671949687141196785
这是一个可以把网页上复制的 CSS 样式直接粘贴到 Figma 的小插件，帮助你快速还原网页中的颜色、字体、间距和其他视觉样式。对于需要参考现有网页、整理设计规范或把前端样式带回设计稿的场景，可以减少手动设置属性的时间。
Figma 社区插件：https://www.figma.com/community/plugin/1671481846182486959/c-cssfigma
页查查是一款面向前端开发者和设计师的 Chrome 插件。点击网页中的任意元素，就能快速查看它的 CSS 样式；同时支持预览和下载页面中的图片、视频与 SVG，并以可视化的图层结构展示网页元素和标注信息。
如果遇到网页中特殊的 CSS 效果，可以先用页查查检查和获取样式，再配合前面的「C马-css样式粘贴到figma」插件，将样式带回 Figma 中进行还原和参考。
Chrome 扩展：https://chromewebstore.google.com/detail/fkkgnnieicfhijjebnebjbgibfhmmkjh
页改改是一款可以为任意网页注入自定义 CSS 样式和 JavaScript 脚本的 Chrome 插件。CSS 与 JS 可以分别管理、互不干扰，并支持按网址或正则表达式设置匹配规则，让修改只应用到指定的网站或页面。
插件提供内置代码编辑器和实时预览，编辑后的改动会立即呈现在目标网页上；还带有 CSS 语法检查，适合用来调整网页样式、测试前端效果，或打造更符合个人习惯的浏览体验。
Chrome 扩展：https://chromewebstore.google.com/detail/bfmkkbnbfimgkaloeibphmoilmlgpgpn
AI 可以很快写出一个页面，但很难凭空写出这种细腻的交互。Aceternity UI 的 Labs 收集了一批完成度很高的交互实验，每个案例都可以现场试玩，并查看和修改对应代码。
这里的案例不只是换个颜色或加一个 hover，而是把交互拆成了可以研究的具体问题：SVG Path Morphing 让播放按钮在暂停和播放之间平滑变形，Fey Cards 会在 hover 或点击时展开卡片并切换标题渐变，Interface Craft Cards 研究卡片的缩放和布局动画，另外还有 Gooey Dropdown、Wispr Flow Text Animation、3D Globe、Pixelated Canvas 等实验。
很适合把组件链接和截图一起丢给 Codex，让 AI 先理解参考案例的运动规律，再按照自己的产品风格重新实现一版。这样得到的通常不只是“一个看起来差不多的页面”，而是一套更接近真实产品的交互细节。
官网：https://ui.aceternity.com/labs
Viscose Carousel 是一个很值得拆开研究的作品集轮播实验。它没有把项目卡片放在普通的网格或横向滑块里，而是让卡片沿着一个大部分位于屏幕外的环运动：卡片靠近时会融合成一团，分开时又会拉出细细的“丝线”，整个效果由一个全屏 fragment shader 统一绘制。
交互也做得很完整：可以滚动、拖拽或滑动来转动环形轨道，松手后会带着惯性停在最近的卡片；hover 时鼠标附近的表面会变软，并把相邻卡片推开；移动端则用长按手势代替 hover。项目还把约 136 个可调参数整理成开发面板，方便继续调节卡片尺寸、环半径、响应式断点、指针反馈、丝线和玻璃边缘等效果。
它更适合作为视觉和技术参考，而不是直接拿来当生产组件：仓库明确标注为 WIP，目前还缺少键盘控制和 reduced-motion 支持，演示用的作品图片与部分字体也不能直接用于商业项目。源码基于 Next.js、React、Three.js、GSAP 和 Tailwind，适合用来研究“如何把一组卡片做成有物理感的空间交互”。
在线预览：https://viscose-carousel.vercel.app/
GitHub 源码：https://github.com/Yousuf-developer/Viscose-carousel
原帖：https://x.com/YousufSoomroDev/status/2088657289410687111
这是一篇很适合收藏的图标设计过程记录：作者用了大约一年时间，为 Cursor 手绘完成 600 多个图标，覆盖 16px 和 24px 两种尺寸，以及 Outline 线框和 Filled 填充两种风格，而且没有使用 AI 生成。
文章真正有价值的地方，不只是展示最终的图标，而是把从探索到落地的过程拆开了。它会讨论如何让几百个图标保持统一，为什么同一个图标需要针对不同尺寸做光学调整，线条交汇处如何避免堵塞，小尺寸下如何适当减薄笔画，以及圆角、端点、留白和视觉重心怎样共同形成一套稳定的图标语言。
如果平时只把图标当成“找一个差不多的 SVG”，这篇文章很适合拿来重新理解图标系统：真正难的是建立规则之后，仍然愿意为那些看起来几乎没有差别的细节反复修改。做产品图标、设计系统或组件库时，也可以把里面的检查方法整理成自己的验收清单。
原文：https://www.minoradventures.co/blog/the-making-of-cursors-icons
推荐这篇文章的原帖：https://x.com/vikingmute/status/2088623349890990336
上传一张 Logo 后，可以用下面这段提示词把它转成更有实体感的 3D 霓虹灯招牌。重点不是简单给 Logo 加一层发光滤镜，而是要求模型把平面图形重新理解成真实的灯管装置：保留原始识别度，同时补足灯管厚度、弯折、接缝、安装结构和光线反射。
将上传的 Logo 转换成一块高质感、风格化的 3D 霓虹灯招牌。保留 Logo 的核心轮廓和标志性结构，让它一眼仍然可识别，但不要再把它表现成平面图形，而要将其重建为真实的实体霓虹装置。
Logo 由沿着原始几何形状弯曲的粗霓虹灯管组成，具有明显的立体厚度、真实的灯管尺寸、圆润接头和专业招牌制作细节。加入灯管内部发出的强烈彩色光、明亮核心、柔和的环境光晕、微妙反射，以及落在周围结构上的发光溢出。保留 Logo 原本的颜色，并让颜色通过霓虹照明自然呈现。
加入少量真实的安装件和电气结构，但保持画面干净、精致、商业化。整体风格要具有电影感、标志性和高级感；使用戏剧化的棚拍光线、受控高光和细腻的环境遮蔽。画面只展示一个居中的完整 Logo，孤立在纯黑色背景上，呈现高端商业招牌摄影和超高分辨率效果。
原帖：https://x.com/doganuraldesign/status/2088750386605916429
很多人都看过迪士尼的 12 条动画原则，但 Raphael Salaja 把它们做成了一篇可以边读边操作的互动文章。页面从 Squash and Stretch、Anticipation、Staging 开始，一直到 Follow Through、Slow In & Slow Out、Arcs、Timing、Exaggeration、Solid Drawing 和 Appeal，每条原则都配了对应的界面案例。
它的价值在于让抽象的动画术语变得可以直接感受：长按删除任务时，会先用 anticipation 给出即将发生的提示；复杂面板会通过 staging 分层进入；列表卡片用错开时间体现 overlapping action；不同的 easing 曲线也可以直接对比。文章还会提醒动画不只是装饰，好的 motion 应该帮助用户理解状态、建立反馈，并让交互更自然。
适合在设计交互动效、整理产品 motion guideline，或者让 AI 学习“为什么这个过渡舒服”时作为参考。页面为了保证示例体验，建议在桌面端打开。
原文：https://www.raphaelsalaja.com/library/12-principles-of-animation
推荐这篇文章的原帖：https://x.com/tranmautritam/status/2088550597759000975
Checklist Design 是一个面向 UI、UX 和 Web 产品的实践清单库，按照网站页面、组件、用户流程、通用体验和品牌素材来整理。你可以针对正在做的页面或流程，选择对应的清单逐项检查，也可以直接复制给代理人，让它结合自己的界面截图和代码逐条审查。
它覆盖的范围很适合用来补齐 AI 生成页面容易遗漏的部分：按钮、表单、弹窗、导航、加载、空状态、错误反馈、响应式、深色模式、添加购物车、支付、重置密码和提交表单等。推荐的用法是把清单当作审查框架，而不是让 AI 自己发明一套标准：先选对页面或流程，再让代理人输出“已通过 / 有问题 / 缺少上下文”三类结果，最后人工确认真正需要修改的内容。
网站目前也提供 Figma 插件，方便直接在设计流程里使用。
Checklist Design：https://www.checklist.design/
浏览全部清单：https://www.checklist.design/browse
Site of Sites 是一个持续更新的网站灵感收藏站，除了常见的 Design、Portfolio、Agency 等分类，还会标注 Creative Coding、Interactive、Experimental、3D elements 等更具体的视觉特征。
它的筛选方式比较适合找方向：可以先按行业或页面类型缩小范围，再根据是否使用自定义代码、网格、3D 或交互效果来筛选。网站列表中会标出收录月份，适合定期回看近期出现的新案例。
官网：https://www.siteofsites.co/
Collected 是一个打开就能浏览的网站灵感收集站，页面信息很少，重点放在案例本身。它会持续加入新的网页作品，并提供提交网站的入口，适合在做 Landing Page、个人主页或创意工作室官网时快速扫一遍最近的视觉趋势。
Recent Design 是一个每天更新的设计灵感与资源精选站，收录优秀的设计作品、网站、OG 图片、App 截图和应用图标，也整理了实用工具、设计技能与相关职位。网站提供 Design、Websites、App Screenshots、App Icons 等分类，适合在寻找视觉参考、做竞品分析或探索新工具时快速浏览。
Moonvy 月维是一款专业的「设计资源管理工具」，让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验，并支持多种开发代码格式，让设计交付更省心、更顺畅。（Moonvy 月维官网：https://moonvy.com）
2026-08-02 00:00:00
Figma 推出了新版 Auto Layout，进一步缩小设计画布与前端 CSS 布局之间的差异。过去，一些布局在 Figma 和浏览器中的表现并不完全一致，开发者需要在交付后额外编写代码进行修正；新版布局逻辑能够让最终实现更贴近设计稿，减少还原时的变通处理。新建 Frame 会自动使用新版 Auto Layout，已有 Frame 则会继续保持旧版，用户可以自行选择升级，并可在 2027 年 1 月前切回旧版。
https://help.figma.com/hc/en-us/articles/42031586813719-Use-auto-layout-with-CSS-Flexbox-in-mind
现在，将代码生成的界面带回 Figma 画布时，其中的颜色、字体和间距会尽可能自动绑定到文件中已有的 Variables，而不再全部变成难以维护的固定值。这项能力适用于将 Figma Make 预览复制为设计图层、通过 Figma MCP Server 从代码生成设计，以及使用 Chrome 扩展将线上网页捕获为可编辑图层等场景。同时，更多导入的 Frame 会自动采用 Auto Layout，使后续编辑时能够正常缩放和重排，大幅减少从代码或旧页面还原设计后的手动整理工作。
https://www.figma.com/release-notes/
Brilliant 是一款面向 AI 时代的专业矢量设计工具，可以让设计师与 AI Agent 直接在同一块画布上协作。它既支持内置 AI 对话，也能通过 MCP 连接 Claude Code、Cursor、Codex 和 GitHub Copilot 等工具，让 Agent 创建或修改设计，而生成的结果仍是可以手动编辑的原生矢量图层。Brilliant 还提供设计系统、Figma 双向导入导出、并行 Agent、React 与 HTML/CSS 代码复制，以及图片、视频等多种格式的导出能力。
tone 是一款能将照片快速转换为复古孔版印刷效果的 iOS 应用。导入照片后，它会利用半色调网点、颗粒、油墨叠印与纸张纹理，生成类似双色海报或 ZINE 的印刷质感。应用支持 1～3 色叠印，可分别调整网点大小、角度与油墨浓度，还能自定义纸张、留白、画幅比例和圆角；喜欢的效果可以保存为预设，最终以 PNG 格式导出。应用可免费下载，部分油墨颜色、预设保存与高分辨率导出功能需要付费解锁。
Numeric Arch Warp 是一款可以在 Figma 中通过具体数值制作拱形弯曲效果的插件，支持图片、Frame、组件实例以及带有图片填充的设计元素。与手动拖动锚点不同，它可以保存并复用同一组弯曲参数，即使替换成另一张图片，也能保持完全一致的弯曲程度。插件不仅改变外框，还会让内部的图片内容一起向上或向下拱起，非常适合制作产品图、封面、海报、Mockup 和各种视觉实验。处理过程完全在本地完成，生成结果会以带透明背景的 PNG 放回 Figma；建议保留原始可编辑图层，以便替换内容后重新生成。
https://www.figma.com/community/plugin/1648931677024157590/numeric-arch-warp
Shadow 是一款专为 Tailwind CSS 打造的平滑阴影插件，通过多层 CSS 阴影让卡片、弹窗、下拉菜单等悬浮元素的边缘和层次更自然。它提供从 XS 到 2XL 的多种阴影尺寸，还有将细边框融入阴影的 smooth-shadow-ring 工具类，避免边框与阴影叠加时出现生硬的“双重边缘”。阴影和边缘颜色可以独立调整，并支持明暗主题；整套效果由纯 CSS 实现，方便直接用于各类前端项目。官方还免费提供 Claude Agent Skill 和 Cursor Bugbot 规则，帮助 AI 在生成界面时自动选用正确的阴影样式。
https://shadow.floriankiem.com/
GitHub：https://github.com/flornkm/shadow-plugin
Vessa 是一款将传统品牌规范 PDF 变成在线互动页面的工具。设计师可以用品牌真实的色彩和字体搭建规范页，并通过一个链接分享给团队或客户，也可以部署到自己的域名。与静态文档不同，页面中的颜色可以点击复制，情绪板能够展开查看，动效也可以直接播放；修改一次后，所有已分享的链接都会同步更新，避免多份 PDF 造成的版本混乱。Vessa 由 Annnimate 团队打造，目前处于私密测试阶段，可在官网加入等候名单。
Himekuri 是一款将传统撕页日历搬到 Mac 桌面的免费应用。它不会同步数字日历、发送提醒或在零点自动翻页，而是等待用户每天亲手撕掉昨日，让看日期变成一个有触感的小仪式。纸张的抓取、起皱、撕裂和飘落都由物理模拟驱动，页面可以撕到一半停下，放手后则会像真纸一样打着旋飘出屏幕。应用提供昭和印刷、极简瑞士、粗野主义、复古办公室、日本历书和中国黄历六种样式，仅约 5 MB，无广告、无账号且不需要网络，支持 macOS 15 及以上系统。
Pica 是一款由 Josh Puckett 打造的原生 macOS 字体管理应用，可以将字体整理进自定义收藏夹，监看指定文件夹的变化，并通过一次点击完成字体的启用与停用。它提供完整的 OpenType 支持，还能将不同字体直接应用到自定义 Logo 和配色主题中预览，帮助设计师更直观地比较字形在真实品牌场景中的效果。最新版本已加入完整的中文、日文和韩文字体支持，浏览超过 30,000 个字符时仍能保持流畅滚动；同时优化了大型字体库的性能，监看或启用数 GB 的字体文件夹也更顺畅。应用可免费下载使用。
发布介绍：https://x.com/joshpuckett/status/2083703054076133491
Thinking Orbs 是一套专为 AI 聊天和 Agent 界面设计的开源加载动画组件，用灵动的点阵球体呈现 working、searching、solving、listening、composing 和 shaping 六种工作状态，比普通的转圈 Loading 更能传达 AI 当前正在做什么。组件提供适合头像区域的 64px 与行内状态的 20px 两种尺寸，支持明暗主题自动适配、动画速度调节和减少动态效果等无障碍设置。它基于 React 与 2D Canvas 实现，零额外依赖，通过 npm 安装后即可快速引入项目。
https://orbs.jakubantalik.com/
GitHub：https://github.com/Jakubantalik/thinking-orbs
Koboyo Icons 是一个收录了 71,262 个高质量手绘图标的免费素材库，覆盖界面、人物、生活、商业、科技等丰富主题。所有图标都以 SVG 格式提供，支持按分类、关键词和同义词搜索，并使用 currentColor 方便在项目中调整颜色。图标可免费用于个人及商业项目，无需注册或署名，也可自由改色、缩放、裁剪和制作动画。
Pure 是一个专注于优质落地页的设计灵感网站，持续收集并筛选各行业值得参考的网页案例。网站按 Agency、Mobile App、Physical Product、Service、Single Page、Software 和 Web App 等类型分类，方便根据项目定位快速寻找参考；还可以单独浏览页面中的局部设计截图，很适合在制作官网、产品介绍页或营销页时寻找版式、配色和视觉表达灵感。
Humation 是一款已经有约 40 万用户使用的在线头像生成器，通过组合不同的头部、身体、配饰和眼镜等元素，就能快速创造一个充满手绘感的个性角色。最近，Humation 又加入了一批夏日主题素材，包括风铃、花火球、汽水、章鱼烧、向日葵、鲨鱼、西瓜和潜水镜等，让生成的头像更有轻松可爱的季节氛围。网站无需复杂操作，挑选喜欢的造型与物件自由组合即可，很适合制作社交头像、个人形象或趣味角色。
发布介绍：https://x.com/ysk_en/status/2067938941882536428
Moonvy 月维是一款专业的「设计资源管理工具」，让设计图的管理与交付在浏览器中就能轻松完成。提供更高效的切图、标注体验，并支持多种开发代码格式，让设计交付更省心、更顺畅。（moonvy.com）
