AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

共匹配 4,056 个资源 · 第 62 / 85 页

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

Node.js

v1.0.4

SkillClawHub4.9k

构建、调试与加固 Node.js 服务器、CLI 和 npm 包:异步、模块、流、内存与进程生命周期。在编写或评审运行于 Node 的代码时使用;当进程挂起不退出、内存泄漏、被 OOM 杀死、单核 100% 打满或因未处理拒绝崩溃;当报错为 EADDRINUSE、EMFILE、ECONNRESET、ERR_MODULE_NOT_FOUND、ERR_REQUIRE_ESM 或“__dirname is not defined”;当 import 与 require 互操作出错、流把全部内容堆在内存、负载均衡后的服务器间歇返回 502、或 SIGTERM 丢弃在途请求;当 npm install、锁文件、peer 依赖、workspaces、原生模块构建或发布行为异常;当本地测试通过而 CI 失败;或在容器化、性能剖析与优雅停机时。不适用于纯浏览器 JavaScript、TypeScript 类型系统设计或 Bun、Deno 运行时。

source

Elicitation 提问引导

v1.0.4

SkillClawHub4.7k

通过自然对话进行心理侧写,基于叙事身份研究(McAdams)、自定义记忆提取(Singer)与动机式访谈(OARS 框架)。适用于:(1) 理解他人的核心价值观与动机;(2) 发掘塑造性记忆与人生关键经历;(3) 识别情绪图式与信念模式;(4) 通过渐进式自我表露构建心理画像;(5) 开展能揭示深层洞察的用户访谈;(6) 设计用于自我探索的对话流程;(7) 识别救赎型与污染型叙事等身份主题;(8) 在不审问的前提下引导真实的自我表露。

source

media-use

v1.0.83

SkillClawHub4.9k

Agent Media OS——HyperFrames 项目中覆盖所有媒体需求的单一技能。将 BGM、SFX、图片、图标、品牌 logo、配音、调色或 LUT 解析为冻结的本地文件或可粘贴区块,并留存台账记录(统一动词 resolve);目录未命中时可经 TTS/音乐/图像模型即时生成;通过同一共享音频引擎完成配音、转写、字幕与背景音移除;对媒体执行操作(剪切/重构图/变换);并支持跨项目复用素材。当模糊反馈涉及实拍画面偏暗、平淡、无聊、想要复古/摄影机/印刷/ASCII 质感、需要隐私处理或需要媒体揭示时刻时,同样使用本技能。

source

JavaScript

v1.0.6

SkillClawHub4.7k

编写、调试并审查 JavaScript:异步与事件循环、类型隐式转换、闭包、日期、Unicode、正则,以及 ES2023+ 现代 API。当 JS 抛出 TypeError 或“undefined is not a function”、Promise 永不落定或拒绝未被处理、出现 NaN 或 [object Object]、日期偏移一天、排序或相等比较结果异常、内存持续增长、正则卡死、JSON 丢失精度、Node 进程无法退出或忽略信号、fetch 遇到 404 却不 reject 时使用;在选择数据结构、处理错误、剖析慢代码,或判断某特性对目标 Node 或浏览器版本是否安全时同样适用。覆盖 Node 与浏览器运行时的边界情况。不适用于 TypeScript 类型系统设计或框架内部实现。

source

Vue

v1.0.3

SkillClawHub4.6k

构建、调试并审查 Vue 3 应用:响应式、组件、组合式函数、Pinia 状态管理、Vue Router、表单与性能。当状态变更后界面不更新、响应式对象在解构或重新赋值后丢失响应性、漏写 .value、watcher 不触发或陷入循环(“Maximum recursive updates exceeded”)、props 或 v-model 停止同步、模板 ref 为 null、SSR 报 hydration mismatch、路由参数变化后组件未重新加载、Pinia 提示“getActivePinia() was called but there was no active Pinia”、控制台出现“Failed to resolve component”或“Extraneous non-props attributes”、抛出的错误导致页面白屏、长列表或大对象让输入卡顿、图表或地图库被放进 ref() 后失效、scoped 样式作用不到子组件,或需要把 Vue 2 的 Options API 迁移到 Composition API 与 script setup 时使用。不适用于 Nuxt 特有的 SSR、路由与数据获取(nuxt)、Vite 构建配置(vite),也不适用于 React 与 Svelte(react、svelte)。

source

GemBox 编程助手

v0.9.0

SkillClawHub4.6k

面向 GemBox 组件(https://www.gemboxsoftware.com/)的编码辅助。当用户询问任何 GemBox 组件或可用 GemBox 组件完成的编码任务时使用,包括 GemBox.Spreadsheet(.NET 读写 Excel)、GemBox.Document(.NET 读写 Word)、GemBox.Pdf(.NET 读写 PDF)、GemBox.Presentation(.NET 读写 PowerPoint)、GemBox.Email(.NET 读写邮件文件、收发邮件)、GemBox.Imaging(.NET 读写图片),以及 GemBox.PdfViewer(JavaScript 显示/打印/保存 PDF)。

source

AWS | 亚马逊云服务

v1.0.7

SkillClawHub4.5k

架构设计、排障、加固与成本优化 AWS 基础设施——EC2、Lambda、RDS、VPC、IAM、ECS、CloudFront。用于在 AWS 上部署或评审任何内容;账单暴涨或需要降本;AccessDenied、限流、超时、502/503/504 或数据库不可达且原因不明;在 Lambda、Fargate、EC2、RDS、DynamoDB、SQS、EventBridge 之间做选型;加固 IAM 策略、S3 暴露、安全组或密钥;面向 AWS 编写 Terraform/CloudFormation/CDK;审计接手来的账号;或服务配额、冷启动、连接上限、故障切换引发故障时。涵盖 VPC 与子网设计、NAT 与 VPC 端点取舍、Organizations 与跨账号角色、备份与容灾、CLI/SSO 配置。不适用于对象存储深度实践(s3)、DynamoDB 键建模(dynamodb)、K8s 清单编写(k8s)或 Terraform 语言机制(terraform)。

source
配色方案生成(5 种和谐模式) icon

配色方案生成(5 种和谐模式)

MCP Serversmithery4.6k

面向 AI 智能体的配色生成 API。从任意十六进制颜色生成和谐调色板:互补、邻近、三角、分裂互补与四角配色。返回 HEX、RGB、HSL 与 CSS 自定义属性。 工具:design_generate_color_palette。 适合 UI 设计、品牌色探索,或生成成套主题色体系。返回多种可直接写入代码的格式。 返回:{palette[], scheme, hex, rgb, hsl, css}。无需 API key——在 Base L2 上以 x402 微支付,每次 0.001 美元。

streamable-http

Flutter

v1.0.3

SkillClawHub4.4k

构建、调试并发布 Flutter 应用:widget、布局约束、状态管理、导航、性能与应用商店发布。适用于编写 Dart widget 或界面;RenderFlex 溢出、viewport 高度无界或 RenderBox 未完成布局;在 build 期间或 dispose 之后调用 setState、跨 async 间隙使用 BuildContext;UI 卡顿、滚动不流畅或图片耗尽内存;热重载失效;Provider、Riverpod 或 Bloc 过度或不足重建;使用 Navigator 或 go_router 路由、深度链接或返回键处理;键盘遮挡表单字段或校验异常;平台通道抛出 MissingPluginException;本地化字符串或 RTL 布局镜像;widget、golden 或集成测试在 CI 中挂起或失败;debug 构建正常但 release APK、IPA 或 web 包出错。不适用于 React Native 或纯 Swift/Kotlin 原生开发。

source
Screenshot & PDF Capture — Full-Page Chromium Rendering icon

Screenshot & PDF Capture — Full-Page Chromium Rendering

MCP Serversmithery4.3k

Web capture API for AI agents. Take full-page screenshots (PNG/JPEG/WebP) and generate PDFs from any URL using headless Chromium. Custom viewport size, device emulation, and scroll capture. Tools: capture_screenshot (image), webpage_to_pdf (PDF). Use this for visual regression testing, documentation, archiving web pages, or generating reports. IMPORTANT: For text extraction from pages, use web_scrape_to_markdown. For custom PDF generation from data, use document_generate_pdf. Returns: base64-encoded image or PDF. No API key required — x402 micropayment $0.008/call on Base L2.

streamable-http

Google Cloud

v1.0.2

SkillClawHub4.1k

为 Google Cloud 做架构设计、调试、安全加固与成本优化——覆盖 Cloud Run、GKE、Compute Engine、BigQuery、Cloud SQL、IAM、VPC。适用于在 GCP 上部署或评审资源、账单激增或需降低 BigQuery 扫描成本、排查无显而易见的 403 PERMISSION_DENIED、SERVICE_DISABLED、RESOURCE_EXHAUSTED 配额错误、502/503/504 或 Cloud SQL 无法访问的原因,在计算(Cloud Run、GKE、Cloud Functions)或数据库(Cloud SQL、AlloyDB、Spanner、Firestore、Bigtable)之间选型,加固服务账号、组织策略、防火墙规则、公开存储桶或密钥,为 google provider 编写 Terraform,或审计继承的项目。涵盖 VPC/子网设计、Private Google Access、Vertex AI/GPU 配额、Pub/Sub/Dataflow、备份/容灾和 gcloud。不适用于编写 Kubernetes 清单(见 k8s)、Terraform 语言机制(见 terraform)或 Cloud SQL 内的 PostgreSQL 调优(见 pg)。

source

Next.js 前端开发与集成

v0.1.1

SkillClawHub4k

生成可用于生产环境的 Next.js 项目,包含 TypeScript、Tailwind CSS、shadcn/ui 与 API 集成。当用户要求构建、创建、开发或搭建 Next.js 应用、Web 应用、全栈项目,或带后端集成的前端时使用。优先采用现代技术栈(Next.js 14+、TypeScript、shadcn/ui、axios、react-query)与最佳实践。也会在新增功能、集成 API 或扩展现有 Next.js 项目时触发。

source

x402 Compute

v1.32.0

SkillClawHub3.9k

当用户提出「开通 GPU 实例」「通过 API 集成智能体 pod」「为客户创建 pod」「pod webhooks」「pod 事件」「启动云服务器」「列出算力套餐」「浏览 GPU 价格」「部署 AI 机器」「一键部署运行 LLM 的 GPU」「部署私有 LLM 端点」「OpenRouter 就绪端点」「智能体部署 GPU」「拉起自己的 OpenAI 兼容端点」「扩容算力实例」「变配算力实例」「销毁服务器实例」「查看实例状态」「列出我的实例」「充值算力额度」「查看额度余额」「在网格上跑推理」「去中心化推理」「OpenAI 兼容 API」「机密/TEE 推理」「列出网格模型」「查看网格容量」「运行节点」「提供算力」「成为网格节点」「节点运营者」「加入网格」「质押运行节点」「在网格上服务模型」「靠算力赚钱」「部署常驻 AI 智能体」「部署托管 OpenClaw 智能体」「拉起 ClawPod」「智能体 pod」「托管……」等请求时使用本技能。

source

VSCode 配置调试

v1.0.2

SkillClawHub3.8k

配置、调试并加速 Visual Studio Code:设置作用域、launch.json、tasks.json、扩展、快捷键、格式化器与远程开发。当某项设置被其他配置覆盖而不生效、保存时格式化了错误的格式化器或两个格式化器互相打架、断点一直是空心、F5 毫无反应或调试配置无法附加、watch 任务永远卡在 preLaunchTask、扩展宿主崩溃或两个扩展冲突、IntelliSense 失效且 TypeScript 服务器或 Python 解释器停止解析、快捷键被终端吞掉、Remote-SSH/WSL/dev containers/隧道行为异常、启动/搜索/文件监视缓慢,或需要决定 .vscode/ 里放什么、VSCodium 或 Cursor 这类衍生版能装哪些扩展时使用。不适用于语言语义(typescript、py)、Docker 镜像编写(docker)或通用缺陷定位(debugging)。

source

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景