2026-10-07 00:00:00
Figma Agent 结束测试并正式上线，AI 现在可以通过跨文件搜索理解团队已有的设计资产和工作内容，也可以读取以 Markdown 编写的设计库规范，让生成结果更贴近团队的组件、变量和使用约定。
与此同时，Figma 将生成式插件正式开放，设计师和开发者可以把 AI 能力扩展到更具体的工作流程中。不过，随着这些功能转为正式服务，Figma Agent 也开始消耗 AI 积分。对于正在尝试用 AI 参与设计生产的团队来说，这次更新意味着“让 AI 先读懂现有设计系统”正在成为更实际的工作方式。
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 移动端新增一组协作和浏览体验改进：可以通过页面下拉菜单快速访问和切换页面，用 Frame 预览滑块在不同画板之间移动，并把当前正在查看的页面或画板直接生成分享链接。现在也可以将单个画板或图片导出到手机，导出时选择格式和尺寸。
此外，应用会记住上次离开的位置，重新打开后可以直接回到之前查看的页面或画板，不需要再次导航。对于需要在手机上快速检查设计、分享局部画面或和团队同步进度的场景，这些改动能减少来回寻找内容的步骤。
发布说明：https://www.figma.com/release-notes/?title=smoother-design-collaboration
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 渐变。与传统 RGB 插值相比，这两种颜色空间更接近人眼对明度和色彩差异的感受，尤其适合处理蓝色到黄色这类容易在中间出现发灰、发脏过渡的渐变。
Oklab 适合从明度、绿红轴和蓝黄轴的角度理解颜色；Oklch 则进一步把颜色表达成明度、色度和色相，更适合直接调整“更亮一点”“更鲜艳一点”或“沿着色相旋转”的视觉参数。实际输出仍然会受到显示器色域和颜色管理影响，但在设计阶段使用更合理的插值方式，可以让渐变的过渡更稳定，也更容易建立一套可复用的颜色规则。
Sketch 官方动态：https://x.com/sketch/status/2098688586736386553
在月维设计交付中已经支持 OKlch 渐变类型
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 开源。
GitHub：https://github.com/okooo5km/HiPixel
框（Kuang）是一款在浏览器中使用的截图美化工具，提供背景、布局和标注调整，让普通截图更适合分享、展示和写进作品集。它内置绿色、黄色、日落、极光等背景效果，也支持柔光渐变、颗粒质感、留白、圆角和投影等处理，让画面更自然地融入背景。
工具支持高亮、放大镜和箭头标注，方便强调界面细节；图片在浏览器中处理，无需注册，并支持 1×、2×、3× PNG 导出和无水印下载。适合快速制作产品截图、设计案例、教程配图或社交媒体分享图。
官网：https://moonvy.com/apps/kuang/
浮影-Floating Shadows 是一个面向 Figma 的多层柔和投影生成器，用手工调校预设或三次贝塞尔曲线堆叠，为卡片、弹窗和悬浮表面生成自然、有空气感的阴影。
Figma 插件：https://www.figma.com/community/plugin/1682262103424224680/floating-shadows
ArtCraft 是一款面向艺术家的开源 AI 图像与视频创作工具，强调对生成过程的控制，而不是只追求一键生成。它支持在浏览器中使用，也提供 macOS 和 Windows 桌面应用，适合需要反复调整角色、场景和镜头关系的创作流程。
ArtCraft 提供角色姿态、场景和摄像机调度等更细致的控制方式，可以先确定画面构图和动作，再生成图像或视频；项目代码公开在 GitHub，也不要求订阅。对于想把 AI 生成融入概念设计、分镜、视觉开发或短视频制作，同时又希望保留更多创作自主权的人来说，值得关注。
GitHub：https://github.com/storytold/artcraft
这是一个面向花瓣网的 Tampermonkey 用户脚本，主要解决图片保存和页面右键受限的问题：可以一键下载当前图片的最高清原图，给可能用于商业用途的图片添加红框提示，并恢复浏览器原生右键菜单，方便使用“图片另存为”或其他浏览器扩展。
它适合经常在花瓣网收集参考图、整理素材的设计师使用。不过，脚本提供的是技术上的下载和提示能力，图片的版权、授权范围与实际商用许可仍需要单独确认。
脚本地址：Greasy Fork
QuickPick 是一个面向创作者的工作空间，用来集中保存设计工具、灵感链接、图片素材、文件和项目笔记。它把内容分成 Tools、Boards 和 Notes：工具可以快速收藏和发现，Boards 支持批量上传、拖放和批量下载，Notes 则可以记录设计决策、清单与参考链接，并支持文字高亮和基础排版。
它适合用来整理那些散落在浏览器书签、聊天记录、网盘和临时文档里的设计资料。比如可以为一个项目建立素材 Board，把灵感截图、参考网站、交付文件和色彩说明放在一起；也可以把常用的 Figma、Framer、Webflow、LottieFiles 等工具集中管理。免费工作区需要登录，具体容量和功能以官网当前方案为准。
官网：https://www.quickpick.space/
Moonvy 周刊资源库把历期《设计素材周刊》中的独立条目整理成可搜索的资源卡片，可以按类型、主题、产品、交付方式和技术栈筛选。每张卡片都保留原条目的简介、标签和配图，并能回到对应期数的周刊原文。
如果你不想从头翻阅整期周刊，而是只想快速找到 Figma 更新、UI 组件、网页灵感、图标库或 AI 工具，这个页面可以作为更直接的入口；筛选结果也会随着后续周刊更新持续补充。
资源库：https://moonvy.com/blog/resources/
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/components
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
MotionSites AI 收集了一批可以直接用于 AI 建站工具的网页提示词，内容按 Apps、Sections 等类型整理，覆盖 Hero、Footer、Pricing、CTA、SaaS 和 Landing Page 等常见页面结构。网站的使用方式很直接：浏览案例，复制提示词，再粘贴到对应的 AI 工具里生成或调整页面。
除了提示词库，MotionSites 还提供 Animated Backgrounds、面向设计能力提升的 Academy，以及新的 MCP 入口。它更适合已经在使用 AI 生成网页、但希望有更具体视觉方向和版式参考的人：先从案例中找到合适的结构，再把提示词作为生成起点，最后回到自己的品牌、内容和组件规则里继续修改。
MCP：https://motionsites.ai/mcp
Bento Grids 是一个专门收集 Bento Grid 网格布局案例的灵感库。网站把来自产品官网、设计系统、品牌展示和营销页面的案例集中整理，点击卡片可以查看对应来源；同时支持按 Discover、Graphic Design、Web Design 和 Animation 等类别浏览，也可以筛选深色或浅色案例。
它适合用来研究如何把多块信息组织成有节奏的视觉结构：大卡片承担主要叙事，小卡片补充数据、功能或品牌细节，再通过尺寸、留白和对齐关系形成层次。网站还提供免费的 Bento 模板，适合在做产品首页、功能介绍或品牌展示时先搭出布局方向，再替换成自己的内容。
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
APPLORE 是一个持续收集真实 App 图标的灵感与检索平台，目前展示 17,600+ 个来自 App Store 和 Google Play 的应用图标，并按颜色、风格和类别整理。它还会记录应用图标的历次改版，适合观察不同产品的品牌演进和视觉趋势。
除了浏览和搜索图标，APPLORE 还提供 AI 图标生成、手机预览和多尺寸导出等功能。设计师可以先从真实产品中寻找方向，再生成或验证自己的图标方案；做移动端产品、品牌探索、竞品分析或应用商店视觉设计时，都可以把它当作一个快速的图标参考库。
UIAble 是一套基于 shadcn、Base UI、Tailwind CSS 和 React 的组件系统，目标是帮助开发者更快搭建可扩展、可投入生产的应用界面。除了 Button、Input OTP、Switch、Toggle Group 等基础组件，它还提供表单、消息、文件上传、数据卡片、交易和个人资料等更接近真实产品的界面模式。
UIAble 的重点不只是组件数量，而是把组件、应用区块和完整使用场景放在同一套系统里，强调可访问性、代码所有权、主题定制和 AI 友好。它适合 Next.js、Tailwind 或 shadcn 项目作为起点：先用现成模式搭出信息结构，再把代码复制到自己的项目中继续调整，而不是被锁定在不可编辑的运行时里。
组件库：https://uiable.com/components
如果你正在构建 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” 的演示入口；注册后还可以保存自己喜欢的模块。适合用来寻找微交互灵感，或在和开发沟通交互状态时作为更直观的参考。
Footer.design 是一个专门整理网站 Footer 设计的灵感画廊。它把不同网站的页脚案例集中在一起，并提供 Typographic、Small Type、Illustrative、Grid、Flat、Animated、Cards、Bright 和 Dark 等风格分类，方便根据视觉方向快速筛选参考。
相比泛化的网页灵感站，这个网站把范围缩小到了页面最容易被忽略、但很影响收尾体验的区域。做官网、作品集或产品落地页时，可以从这里观察导航分组、品牌信息、社交链接、联系方式、CTA 和版权信息如何组合，再结合自己的内容密度与响应式布局重新组织。
浏览全部案例：https://www.footer.design/browse
CTA.gallery 是一个专门整理 Call-to-Action 设计的网页灵感库，收录按钮、购买、下载、表单、弹窗、导航、Newsletter 以及 Pricing / Subscription 等不同类型的 CTA 案例。网站还支持按行业和模式筛选，适合在设计转化路径或落地页关键节点时快速寻找参考。
它的价值不只是提供漂亮的按钮截图，而是把 CTA 放回具体页面和业务目标里观察：同样是“开始使用”或“了解更多”，可以对比不同网站如何处理文案、层级、颜色、留白、动效和周边信息。做营销页、产品官网或 SaaS 注册流程时，可以把这里的案例当作结构和表达方式的参考，再结合自己的用户路径重新设计。
CTA 写作提示：https://www.cta.gallery/cta-tips
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/submit
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
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 或 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 插件 |
| Illustrator | 已支持 | 使用 Illustrator 上传设计稿到月维 | 下载 Illustrator 插件 |
插件的具体安装方式和版本要求，建议前往月维插件下载页查看。
| 步骤 | 参与者 | 操作 |
|---|---|---|
| 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）
