AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

Figma、图像生成、品牌素材。适合产品、运营、设计协作。

共匹配 4,262 个资源 · 第 79 / 89 页

什么是设计与创意?

设计类 MCP 把设计工具与图像生成能力接入 AI 工作流:Figma MCP 让 AI 读取设计稿的图层、变量与组件结构,直接生成对齐设计稿的前端代码;图像生成类 MCP 负责配图、图标与营销素材的批量产出。

典型用法:设计师在 Figma 中标注组件 → 开发者在 Cursor 中通过 Figma MCP 拉取节点信息 → AI 生成与设计系统一致的 React / Vue 代码。评审环节可以让 AI 对照设计稿截图做还原度检查。

注意版权与授权:仅处理团队有权访问的 Figma 文件;生成图片素材时确认模型的商用条款;字体与第三方素材仍需单独授权。

适合做什么

  • 设计稿评审
  • 素材批量导出
  • 品牌规范检查
  • 配图生成

不太适合

  • 未授权商用字体/素材的自动下载

相关资源

查看全部 →
辨别力追问 icon

辨别力追问

SkillGitHub

当给出的实质性回答或草稿可能被用户据此行动(建议或推荐、目标/计划/提案/邮件等草稿、估算或预测、数据分析解读、可能被采信的事实陈述、多步论证)时,在定稿前调用本 skill,视情况附上 2-3 个简短的追问,每个问题都紧扣刚产出的内容,帮助用户核对关键事实、审视推理与假设、发现缺失的上下文。每次对话至多使用一次。简单操作问答、纯知识讲解、仅排版转换拼装文件、编写要运行的代码、创意写作或闲聊、或用户已要求复核/引用/审查时应跳过。

sourceregistry 收录

SRS/Oryx 开发

SkillSkillsMP

SRS 与 Oryx 代码库以及 SRS Docker 镜像工具链的开发、修改、调试、评审、维护与讲解。用于对下一代 SRS Go 代理、SRS 浏览器播放器、ossrs/dev-docker 镜像,以及 Oryx 的 Go 后端、React 控制台、一体化运行时、打包、安装器、发布与测试做计划性改动;也包括缺陷维护、issue 与 PR 分诊、PR 评审以及 Learn Code 提问。C++ 版 SRS 服务器已进入维护模式,基于 Go 的新版源站与边缘节点的规划性开发尚不支持。不适用于终端用户支持、使用提问或配置咨询——这些请使用 srs-support。

source

SRS 内部代码地图

SkillSkillsMP

把 SRS 与 Oryx 的代码任务路由到最小相关的可信代码库地图与验证指引。只要支持、开发、调试、评审或维护工作需要定位、选择、阅读、修改、测试或验证 SRS/Oryx 代码时使用。覆盖第一代 C++ 源站与边缘媒体服务器及其 State Threads 依赖、下一代 Go 服务器、浏览器推流与播放、SRS Docker 镜像工具链、SRS 测试,以及 Oryx 的 Go 后端、React 控制台、一体化运行时、打包、安装器、发布与测试。作为父级支持与发展技能的代码导航依赖;面向用户的工作流程与结果仍由父技能负责。

source

hyperframes-animation(HyperFrames 动画)

SkillSkillsMP

HyperFrames 全部动画知识——原子运动规则、多阶段场景蓝图、场景转场、更宽泛的 motion design 技巧,以及七种运行时适配器(默认 GSAP,另有 Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU)。适用于任何运动或动画任务:挑选 2-4 条规则进行组合,或加载蓝图,或查询运行时专属 API(如 GSAP eases、Lottie 播放器、Three.js mixer)。还可审计现有合成的动作编排(animation map)与 24 种命名文字动画效果。HyperFrames 原生特性:单一暂停时间轴、seek-safe、确定性。

source

Cache Components 秒开优化(Next.js)

SkillSkillsMP

在 Cache Components / PPR 下,为把 Next.js 路由做到即时导航设定 agent 循环,覆盖首次加载(hard navigation)与客户端导航(soft navigation)。把目标编码为一个失败的 @next/playwright instant() e2e 并逐路由跑绿;固化的测试随后可防回归。当需要让某路由导航即时(static shell 立即 commit)、修复 static shell 未被预渲染/服务/预取的路由、扩大 static shell 或修复首屏缓慢、诊断是哪个 Suspense boundary 让路由无法进入 static shell,或为某个路由编写 instant() e2e 守卫时使用。需要 Next.js 16.3+ 且启用 cacheComponents;版本过旧则先升级。

source

impeccable

SkillSkillsMP

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Impeccable 前端打磨 impeccable

SkillSkillsMP

当用户想要设计、重设计、塑形、评审、审计、打磨、澄清、提炼、加固、优化、适配、动画化、上色、提取或改进前端界面时使用。覆盖网站、落地页、仪表盘、产品 UI、应用外壳、组件、表单、设置、引导流程与空状态。处理 UX 评审、视觉层次、信息架构、认知负荷、可访问性、性能、响应式行为、主题化、反模式、字体排印、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边界情况、i18n,以及可复用的设计系统或令牌。也用于把平淡设计变得更大胆更有趣、把喧闹设计调得更克制、在浏览器中对 UI 元素做即时迭代,或实现应显技术实力的雄心视觉效果。不适用于纯后端或非 UI 任务。

source

Netdata 静态安装包打包

SkillSkillsMP

从当前检出为 x86_64、aarch64、armv6l 或 armv7l 构建静态自解压 Netdata 安装器(`netdata-<arch>-latest.gz.run`)。当用户要求构建/产出/打包/测试静态二进制、makeself 安装器、`.gz.run` 制品或 Netdata「静态安装」;在 Linux 机器上无本地构建工具链验证 PR;或在本地复现 CI static-builder 问题时使用。涵盖 `packaging/makeself/` 下基于 Docker 的构建流程、强制前置检查(子模块初始化、全新 `netdata/static-builder:v1` 镜像)、构建按序执行的 18 个 job、制品输出布局、`artifacts/cache/` 复用模型、跨架构 QEMU 注意事项、调试构建、常见故障及其修复,以及如何在目标主机上复制/校验制品。

source

创建 PR(pr)

SkillSkillsMP

为当前分支创建 PR(默认目标 `canary`),包括把一个跨层分支拆成有序堆叠 PR,让下层(db / 共享包 / 服务端 TRPC)先于其调用方(桌面端 / CLI / UI)合并。当用户要求创建/提交 PR,或要因客户端调用尚未进主干的服务端契约而拆分分支时使用。触发词:'pr'、'create pr'、'submit pr'、'open a PR'、'pull request'、'split this PR'、'stacked PR'、'backend should merge first'、'提 PR'、'提个 PR'、'新建 PR'、'拆 PR'、'后端先合'、'分层合并'。

source

React Hook Form 规范(Supabase)

SkillSkillsMP

在 monorepo 内正确使用 React Hook Form——数据流、订阅、reset、脏状态、数字输入以及受控输入规则。在编写或修改任何表单代码、给已有表单加字段、使用 watch/useWatch/formState/getValues/setValue/reset、把表单接入 dialog 或 sheet、或实现提交/取消底栏之前先加载本 skill,即使改动看起来很简单。仓库中普遍存在 RHF 反模式,不加载本 skill 会照抄它们。表单布局与选用组件请再加载 studio-ui-patterns。

source

搭建审查沙箱

SkillSkillsMP

一次性安装 reproduce-issue 技能与 reproduce-verifier 智能体所需的沙箱前置条件——Docker、隔离运行时(Linux 上用 gVisor,macOS 上用 Colima)、健康的容器网络,以及 nx-review-sandbox 工具链镜像(依据仓库的 mise.toml 构建)。操作幂等,可随时重跑以校验或修复。当用户说搭建审查沙箱、安装沙箱前置条件、构建沙箱镜像,或 reproduce-issue 的预检报告某项缺失时使用。

source

record-browser-gif(浏览器演示 GIF 录制)

SkillSkillsMP

使用可用的浏览器控制工作流,可选 Playwright Videos 提升采集帧率,并以确定性编码把浏览器或 Web UI 交互演示录制为优化后的 GIF,再用 gh --attach 将 GIF 附到 PR 上;无法附加时回退到专用 assets 分支。在被要求制作、录制或生成演示浏览器工作流的 GIF 时使用;凡改动面向产品用户的 GUI 行为的 PR,都必须附带从该 PR 真实服务端与模型流程录制的 GIF。

source

常见问题

Figma MCP 需要什么权限?

需要 Figma 个人访问令牌(Personal Access Token)或企业 OAuth 授权,令牌只需授予文件读取范围。AgentHub 详情页标注了对应环境变量。

AI 能直接把设计稿转成代码吗?

可以读到结构并生成初版代码,但复杂交互与响应式仍需人工调整。业界普遍把它用作「设计到代码」的第一稿加速器而非最终交付。

生成图片的 MCP 会侵权吗?

取决于模型训练与输出条款。商用发布前请确认服务提供方公开的版权政策,重要素材保留人工审核环节。

配套安装与配置教程

相关场景