设计素材周刊 221 期
📰 设计资讯
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 开源。
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
工具AI图像生成AI视频生成开源Web 应用桌面应用macOSWindows
ArtCraft 是一款面向艺术家的开源 AI 图像与视频创作工具，强调对生成过程的控制，而不是只追求一键生成。它支持在浏览器中使用，也提供 macOS 和 Windows 桌面应用，适合需要反复调整角色、场景和镜头关系的创作流程。
ArtCraft 提供角色姿态、场景和摄像机调度等更细致的控制方式，可以先确定画面构图和动作，再生成图像或视频；项目代码公开在 GitHub，也不要求订阅。对于想把 AI 生成融入概念设计、分镜、视觉开发或短视频制作，同时又希望保留更多创作自主权的人来说，值得关注。
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
代码组件交互动效AI界面生成建站ReactTailwind CSSWebGLThree.js
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
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 生成网页、但希望有更具体视觉方向和版式参考的人：先从案例中找到合适的结构，再把提示词作为生成起点，最后回到自己的品牌、内容和组件规则里继续修改。
MCP：https://motionsites.ai/mcp
Bento Grid 页面布局灵感：Bento Grids
Bento Grids 是一个专门收集 Bento Grid 网格布局案例的灵感库。网站把来自产品官网、设计系统、品牌展示和营销页面的案例集中整理，点击卡片可以查看对应来源；同时支持按 Discover、Graphic Design、Web Design 和 Animation 等类别浏览，也可以筛选深色或浅色案例。
它适合用来研究如何把多块信息组织成有节奏的视觉结构：大卡片承担主要叙事，小卡片补充数据、功能或品牌细节，再通过尺寸、留白和对齐关系形成层次。网站还提供免费的 Bento 模板，适合在做产品首页、功能介绍或品牌展示时先搭出布局方向，再替换成自己的内容。
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 图标生成、手机预览和多尺寸导出等功能。设计师可以先从真实产品中寻找方向，再生成或验证自己的图标方案；做移动端产品、品牌探索、竞品分析或应用商店视觉设计时，都可以把它当作一个快速的图标参考库。
真实产品的 React 组件系统：UIAble
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，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.design 是一个专门整理网站 Footer 设计的灵感画廊。它把不同网站的页脚案例集中在一起，并提供 Typographic、Small Type、Illustrative、Grid、Flat、Animated、Cards、Bright 和 Dark 等风格分类，方便根据视觉方向快速筛选参考。
相比泛化的网页灵感站，这个网站把范围缩小到了页面最容易被忽略、但很影响收尾体验的区域。做官网、作品集或产品落地页时，可以从这里观察导航分组、品牌信息、社交链接、联系方式、CTA 和版权信息如何组合，再结合自己的内容密度与响应式布局重新组织。
浏览全部案例：https://www.footer.design/browse
按钮灵感库：CTA.gallery
CTA.gallery 是一个专门整理 Call-to-Action 设计的网页灵感库，收录按钮、购买、下载、表单、弹窗、导航、Newsletter 以及 Pricing / Subscription 等不同类型的 CTA 案例。网站还支持按行业和模式筛选，适合在设计转化路径或落地页关键节点时快速寻找参考。
它的价值不只是提供漂亮的按钮截图，而是把 CTA 放回具体页面和业务目标里观察：同样是“开始使用”或“了解更多”，可以对比不同网站如何处理文案、层级、颜色、留白、动效和周边信息。做营销页、产品官网或 SaaS 注册流程时，可以把这里的案例当作结构和表达方式的参考，再结合自己的用户路径重新设计。
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/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）
点赞
收藏
点踩
分享