设计素材周刊 222 期

月球背面，月维的创造者们对「设计」和「开发」的思考与讨论关注

📰 设计资讯

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

资讯原型设计设计系统 MCP Figma Figma Make Figma Specs

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 模型

资讯 AI 界面生成原型设计 Figma Make

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

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

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

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

资讯原型设计设计交付 Figma Make Figma Design

最近 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 动画

工具演示文稿插件 PowerPoint WPS Lottie macOS Windows

「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

工具设计工具 AI 界面生成 MCP 在线工具桌面应用命令行工具

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

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

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

官网：https://openpencil.dev/

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

工具设计工具矢量绘图动画制作桌面应用 macOS Windows Linux

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

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

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

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

工具截图美化录屏素材管理桌面应用 macOS

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

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

官网：https://shotbase.com/

文件格式转换工具：Tangerine

工具格式转换效率工具桌面应用 macOS

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

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

工具数据可视化插件 Figma

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 个）

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

一年期（2 个）

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

🎊 设计素材

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

模板 UI 组件移动应用设计 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。

Apple Design Resources：https://developer.apple.com/design/resources/
iOS/iPadOS 27 UI Kit：Figma Community
App Icon Template：Figma Community
更新说明：Design kits for iOS, iPadOS, and macOS 27 are here
使用指南：Figma UI kits
设计规范：Apple Human Interface Guidelines

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

素材图标库 UI 组件 Agent 在线工具插件 SVG React Vue

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

素材图案几何图形 SVG

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

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

官网：https://bookofshapes.com/

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

灵感案例用户体验交互动效网页设计

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

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

官网：https://detail.design/

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

工具设计系统 UI 组件效率工具在线工具

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

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

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

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

灵感案例网页设计落地页

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

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

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

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

代码组件 UI 组件交互动效 React

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

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

官网：https://uiarc.dev/

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

代码组件 UI 组件设计系统 React SwiftUI 拟物玻璃质感

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

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

官网：https://metalui.dev/

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

代码组件 UI 组件交互动效创意编程 WebGPU React Vue Svelte Solid JavaScript

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

工具插画交互动效 Agent CSS SVG 几何

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 材质与交互

代码组件 UI 组件交互动效 React CSS 玻璃质感

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

代码组件插画创意编程 TypeScript React Next.js Astro

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

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

官网：https://ascii.rest/

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

代码组件 UI 组件交互动效创意编程命令行工具 React Svelte

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

灵感案例 3D 创作交互动效网页设计

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

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

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

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

工具素材管理效率工具桌面应用 macOS

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

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

官网：https://atlasformac.com/

我们是谁？

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

添加评论

点踩

分享查看原文

参与讨论