设计素材周刊 219 期

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

Figma Make 加入属性面板和标注功能

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

开源 AI 原生设计编辑器：OpenPencil

OpenPencil 是一款开源的 AI 原生设计编辑器，它把设计文件当作可读、可查询、可修改的节点树，而不只是一个只能在特定软件里打开的画布。项目支持导入 Figma .fig 文件，并提供桌面端、网页端、CLI、MCP Server 和 Vue SDK。

它的有趣之处在于：设计师可以在画布上编辑，脚本可以批量修改 Token，AI Agent 也可以通过同一套操作创建和调整界面。CLI 还能检查、查询、分析、导出和转换设计文件，适合想把设计文件纳入代码工作流的团队。项目采用 MIT 协议，桌面端体积也比较轻。

官网：https://openpencil.dev

GitHub：https://github.com/open-pencil/open-pencil

会用 MCP 的动效组件库：Motion UI

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/ui/

发布介绍：https://motion.dev/magazine/introducing-motion-ui

面向真实产品的组件库：UIAble

UIAble 是一套基于 shadcn 和 Base UI 的 React 组件系统，最近发布了新版本。它不只提供单个 Button、Input、Switch 这类基础组件，还把表单、消息、文件上传、交易、数据卡片等常见应用界面整理成可以直接参考和组合的结构。

项目强调开源、可访问性、完整代码所有权和 AI 友好，组件可以复制到自己的项目中继续修改，不需要被锁定在一个不可编辑的运行时里。对于使用 Next.js、Tailwind 或 shadcn 体系快速搭建后台、SaaS 和产品官网的开发者来说，它可以作为一套更有视觉完成度的起点。

官网：https://uiable.com/

组件浏览：https://uiable.com/components

可复制粘贴的 React 地图组件：MapCN

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

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

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 产品，等待、处理中、完成、成功、错误、通知等状态很适合用克制的提示音建立节奏，但最好同时保留静音、音量和无障碍设置。

官网：https://uisfx.com/

GitHub：https://github.com/romainsimon/uisfx

npm：https://www.npmjs.com/package/uisfx

给 Codex 养一只宠物：Codex Pets

Codex Pets 是一个为 Codex 准备的动画像素宠物社区和分享画廊。你可以浏览各种会动的小角色，按最新、喜欢、浏览、讨论或随机排序，也可以搜索和筛选；每个宠物都支持悬停预览、3D Playground、下载、分享、点赞和快速评论。

它有意思的地方，是把 Agent 时代的终端工具变成了一个有角色、有收藏感的社区。你可以给 Codex 挑一只陪伴开发的像素宠物，也可以上传自己的 spritesheet，创建个人作品，再把宠物带入多人 Playground。背后的开源项目还支持自托管，适合 fork 成自己的素材分享站或角色资产库。

站点底层的设计也很完整：宠物用 pet.json 和 spritesheet 组成标准包，作品可以被下载、复用，并通过 CLI 拉进终端。需要注意的是，社区里有些作品会受已有角色或品牌启发，实际使用时仍然要确认版权和授权范围。

在线画廊：https://codex-pets.net/#/

GitHub 开源项目：

作者 @mosesbabychrist：https://x.com/mosesbabychrist

面向 Agentic Interface 的 React 设计系统：BoardUI

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 变成 Logo：IP as Logo

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

图标与 SVG 形变动效：morphicons / Bloub

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

x.ai 聊天机器人头像的 SVG 形变动画：Bloub

Bloub 是一个把 x.ai 的聊天机器人头像复刻成 SVG 动画的视觉实验：一个黑色形状在 14 个状态之间平滑变形，整个过程不依赖动画库。它和 morphicons 一样关注“形状如何自然地变成另一个形状”，但更偏向一个完成度很高的单一主题作品，而不是通用组件；很适合观察如何用少量 SVG 状态做出有记忆点的形变。

Bloub：https://bloub.vercel.app/

浏览器里的程序化 2D 头像工作室：Bible Strong Avatar Lab

Bible Strong Avatar Lab 是一个可以直接在浏览器中使用的程序化 2D 头像工具。你可以从基础形象开始调整头像的外观、表情和动画，把原本需要逐个绘制的角色变化变成一组可以重复组合和修改的参数。

完成后可以导出 SVG、PNG，以及可以直接放进项目里的 React 或 JavaScript 资源。它适合制作用户头像、AI Agent 状态、聊天角色、产品空状态和带有轻量动画的品牌形象；如果希望一套头像在不同页面、尺寸和状态之间保持一致，程序化生成也比单独准备很多静态图片更容易维护。

官网：https://avatars.bible-strong.app/

设计 Token 的统一工作台：UISqueezy Studio

UISqueezy Studio 是一个专门管理设计 Token 的在线工作台，可以集中维护颜色、字体、间距、圆角、阴影、尺寸、断点和 z-index 等规范，再导出为 CSS Variables、SCSS 或 LESS。它还提供 Figma 插件，可以把 Token 同步到 Figma Variables，减少设计稿、代码和文档之间反复复制粘贴的工作。

工具提供工作区、项目、成员权限、活动记录和版本历史等团队协作能力，也保留了适合个人设计师的免费方案。需要注意的是，Tailwind CSS 和 Style Dictionary 目前仍标记为计划中的导出目标，使用前可以先确认当前项目需要的格式。

官网：https://www.uisqueezy.com/

不安装字体也能直接查看：TypeTray

很多字体下载下来之后，只是暂时想看看效果，并不想立刻安装到系统里。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 动态背景。可以按项目需要选择一个深入使用，也可以把它们当作做视觉探索时的灵感库。

ColorFlow 官网：https://colorflow.ls.graphics/：带 WebGL 效果的网格渐变生成器。
Ramps 官网：https://ramps.studio/：生成颜色渐变条和颜色 Token，适合建立符合 WCAG 标准的配色。
Shader Gradient 官网：https://shadergradient.co/：制作动画 3D 着色器渐变。
Zoxilsi Gradient Studio 官网：https://studio.zoxilsi.cc/：网格渐变工作室，提供 100 多个预设。
Gradient SaaS 官网：https://gradientsaas.blogspot.com/：编辑级 CSS 渐变，支持一键应用。
Colir 官网：https://colir.space/app：基于曲线创建渐变，也可以调整颜色停靠点并导出结果。
Gradient Lab 官网：https://backgrounds.supply/gradient-lab：制作动画渐变，并支持导出到 4K。

给设计师使用的代码级 Shader 库：Paper Shaders

如果想在网页中加入 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

Shader Lab 是 Basement Studio 做的一款在线 Shader 实验工具，界面本身就像一个轻量级的动效合成器。它把 Gradient、Pattern、Text、Dithering 和 CRT 等效果拆成可以单独调整的图层，支持修改色相、饱和度、扫描线、色差、噪点、故障、Bloom 和暗角等参数。

除了手动调参，还可以给参数添加关键帧，或把参数连接到音频，让视觉效果随着时间和声音变化。它很适合快速试做复古屏幕、扫描线、故障艺术和带节奏感的网页背景；即使暂时不需要导出代码，也可以把它当成一个实时视觉灵感板使用。

官网：https://eng.basement.studio/tools/shader-lab

将 Figma 图层转换为透视效果的插件

这是一个专门为 Figma 制作透视效果的插件，可以将向量、文字、群组和 Frame 放入自定义的透视空间中。除了常规的透视变形，它还支持创建透视网格、球体、Logo 和各种 Mockup，适合用来制作具有空间感的界面展示、品牌图形和产品视觉。

作者表示这是因为没有找到合适的工具才自己开发的，目前可以在 Figma Community 免费使用。

原帖与演示：https://x.com/todelsz/status/2090837476743008491?s=20

插件：https://figma.com/community/plugin/1671949687141196785

将 CSS 样式直接粘贴到 Figma：C马-css样式粘贴到figma

这是一个可以把网页上复制的 CSS 样式直接粘贴到 Figma 的小插件，帮助你快速还原网页中的颜色、字体、间距和其他视觉样式。对于需要参考现有网页、整理设计规范或把前端样式带回设计稿的场景，可以减少手动设置属性的时间。

Figma 社区插件：https://www.figma.com/community/plugin/1671481846182486959/c-cssfigma

网页 CSS 检查器：页查查

页查查是一款面向前端开发者和设计师的 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

🎊 设计素材

高完成度交互实验库：Aceternity UI Labs

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

液态 WebGL 作品集轮播：Viscose Carousel

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 图标系统的制作过程

这是一篇很适合收藏的图标设计过程记录：作者用了大约一年时间，为 Cursor 手绘完成 600 多个图标，覆盖 16px 和 24px 两种尺寸，以及 Outline 线框和 Filled 填充两种风格，而且没有使用 AI 生成。

文章真正有价值的地方，不只是展示最终的图标，而是把从探索到落地的过程拆开了。它会讨论如何让几百个图标保持统一，为什么同一个图标需要针对不同尺寸做光学调整，线条交汇处如何避免堵塞，小尺寸下如何适当减薄笔画，以及圆角、端点、留白和视觉重心怎样共同形成一套稳定的图标语言。

如果平时只把图标当成“找一个差不多的 SVG”，这篇文章很适合拿来重新理解图标系统：真正难的是建立规则之后，仍然愿意为那些看起来几乎没有差别的细节反复修改。做产品图标、设计系统或组件库时，也可以把里面的检查方法整理成自己的验收清单。

原文：https://www.minoradventures.co/blog/the-making-of-cursors-icons

推荐这篇文章的原帖：https://x.com/vikingmute/status/2088623349890990336

用 Imagine 2.0 制作 3D 霓虹 Logo：具体提示词

上传一张 Logo 后，可以用下面这段提示词把它转成更有实体感的 3D 霓虹灯招牌。重点不是简单给 Logo 加一层发光滤镜，而是要求模型把平面图形重新理解成真实的灯管装置：保留原始识别度，同时补足灯管厚度、弯折、接缝、安装结构和光线反射。

将上传的 Logo 转换成一块高质感、风格化的 3D 霓虹灯招牌。保留 Logo 的核心轮廓和标志性结构，让它一眼仍然可识别，但不要再把它表现成平面图形，而要将其重建为真实的实体霓虹装置。

Logo 由沿着原始几何形状弯曲的粗霓虹灯管组成，具有明显的立体厚度、真实的灯管尺寸、圆润接头和专业招牌制作细节。加入灯管内部发出的强烈彩色光、明亮核心、柔和的环境光晕、微妙反射，以及落在周围结构上的发光溢出。保留 Logo 原本的颜色，并让颜色通过霓虹照明自然呈现。

加入少量真实的安装件和电气结构，但保持画面干净、精致、商业化。整体风格要具有电影感、标志性和高级感；使用戏剧化的棚拍光线、受控高光和细腻的环境遮蔽。画面只展示一个居中的完整 Logo，孤立在纯黑色背景上，呈现高端商业招牌摄影和超高分辨率效果。

原帖：https://x.com/doganuraldesign/status/2088750386605916429

可以直接试玩的动画十二原则：12 Principles of Animation

很多人都看过迪士尼的 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

把设计检查交给 Agent：Checklist Design

Checklist Design 是一个面向 UI、UX 和 Web 产品的实践清单库，按照网站页面、组件、用户流程、通用体验和品牌素材来整理。你可以针对正在做的页面或流程，选择对应的清单逐项检查，也可以直接复制给代理人，让它结合自己的界面截图和代码逐条审查。

它覆盖的范围很适合用来补齐 AI 生成页面容易遗漏的部分：按钮、表单、弹窗、导航、加载、空状态、错误反馈、响应式、深色模式、添加购物车、支付、重置密码和提交表单等。推荐的用法是把清单当作审查框架，而不是让 AI 自己发明一套标准：先选对页面或流程，再让代理人输出“已通过 / 有问题 / 缺少上下文”三类结果，最后人工确认真正需要修改的内容。

网站目前也提供 Figma 插件，方便直接在设计流程里使用。

Checklist Design：https://www.checklist.design/

浏览全部清单：https://www.checklist.design/browse