AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

共匹配 4,232 个资源 · 第 65 / 89 页

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

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

stellar-trails

v9.18.0

SkillClawHub3.8k

每个任务都会激活:编码(功能、缺陷、重构、脚本)、文档(报告、方案、DOCX、PDF)、图表与可视化、数据处理、复杂多步规划,乃至简单提问。提供六阶段工作流,含追溯 ID、进出口关卡、范围承诺与三层强制执行机制(阶段机、强制打印、偏好对话框)。复杂度按任务层级自适应。当用户要求构建、修复、分析、创建、规划或处理任何内容时使用——琐碎任务在框架内走精简流程,复杂任务完整执行。Web 开发(Next.js、UI)交由 fullstack-dev 处理;本框架在其外层包裹工作流。

source

CSS

v1.0.4

SkillClawHub3.5k

编写和调试 CSS:flexbox 与 grid 布局、z-index 与层叠上下文、响应式断点、主题化与渲染性能。适用场景:布局错乱或溢出、z-index 无效、页面横向滚动、`position: sticky` 吸不住、文字无法截断、样式层叠失效或被迫加 `!important`、加载时内容跳动(CLS)、过渡卡顿、字体闪烁、模态框或下拉菜单被其他内容盖住、表单控件需要重样式、表格需要吸顶表头、打印效果出错、或样式在 Chrome 正常而 Safari 失效。也可用于从零建样式表(reset 与基础层)、居中、容器查询、clamp() 流式字号、设计令牌与暗色模式、RTL 与逻辑属性,以及用 `:has()`、`@layer` 和嵌套现代化旧样式表。不适用于视觉设计品味——配色、间距尺度、字体选择。

source

riffkit

v1.10.0

SkillClawHub3.6k

Riff winning short videos — give one source (a TikTok link, an uploaded video, or an analyzed template) and the backend riffs its emotion formula into your own AI video (post-ready short-form or UGC-style ad creative), with optional digital character, product placement, and language. You riff the formula, not the video. Triggers: the user says 'riff this video', 'turn this TikTok into mine', 'make a video with this product', 'make an ad' / 'make an ad creative' / 'a UGC ad for my product', 'make a promo / marketing video for my app or product', 'remake a viral video', 'generate a short video', 'riff', 'riffkit', or sends a product image / viral link wanting a short video.

source

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景