AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

共匹配 1,864 个资源 · 第 31 / 39 页

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

开发 Capacitor 移动端

SkillSkillsMP

开发 Trilium 移动应用(apps/mobile,基于 Capacitor 的 Android/iOS)或仅在应用内运行的专用代码路径时使用:capacitor:// 与 https://localhost 的请求路由、iOS 的 fetch/XHR/图片/样式表拦截器、Android 原生流式 HTTP 代理(TriliumWebViewClient)、NativeHttpHandler 同步传输、MainActivity/ViewController 的 WebView 调整(edge-to-edge、键盘),以及客户端中的 isMobileApp() 门控和移动端 CI/夜间构建。当评审涉及这些文件的 diff 时也应加载,以免把仅在 iOS 生效的代码误判为死代码。

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

oversized-cursor(超大光标技巧)

SkillSkillsMP

HyperFrames 发布视频专用的自家风格超大 macOS 光标技巧。当场景涉及光标或指针驱动的动作、需要开启一个 UI 场景、需要用点击为 morph/过渡/打字机效果点火,或某个场景显得静止、生硬、呆板、需要一个低成本高收益的运动源来牵引观众视线并打破停滞状态时加载。涵盖光标的尺寸/外观(含品牌母题光标)、画外入场法则、尖端定位与点击动作、点击点燃下一节拍,以及退出/跨场景交接。

source

Codacy 分诊 triage-codacy

SkillSkillsMP

本仓库的 Codacy Cloud 工作流——在 `git push` 前本地运行 Codacy 分析器(对齐 Codacy CI 行为),并经 v3 API 拉取/聚类任意 PR 的 Codacy 问题。当用户提到 Codacy、「codacy analysis」、`codacy-analysis-cli`、「codacy issues on PR」「fix codacy CI」「codacy markdownlint findings」,或 netdata-org PR 上任何 Codacy 门禁失败时使用。附带脚本 analyze-local.sh(codacy-analysis-cli 的 docker/二进制运行器)与 pr-issues.sh(分页 v3 问题拉取 + 按工具/模式/严重级/文件分组)。令牌安全——CODACY_TOKEN 绝不进入助手可见的 stdout。按设计只读;写操作(标记误报、标记已修复)需要 GitHub issue 或分支本地 SOW。

source

BentoML 容器化

SkillSkillsMP

将本地 BentoML 项目构建为 Bento,容器化为 OCI/Docker 镜像,本地冒烟测试,并推送到容器镜像仓库(Docker Hub、GHCR、ECR、私有仓库、kind/minikube 本地加载或 ttl.sh)。当用户要求“containerize a Bento”“build a Docker image for my BentoML service”“package my BentoML service for deployment”“push my Bento image to a registry”,或作为把 BentoML 部署到 Kubernetes/EC2 的第一步时使用。本技能不执行任何部署——需移交 bentoml-k8s-deploy 或 bentoml-ec2-deploy 完成部署。

source

Leanback 迁移 Compose TV

SkillSkillsMP

为 Android TV 应用提供从旧版 Leanback UI Toolkit、Android Views 或 Support Fragments 迁移到 Jetpack Compose for TV(androidx.tv)的指令与架构模式。用于 Leanback 到 Compose 的迁移,包括浏览页、设置页、认证页、登录页或视频播放页的迁移;或将 BrowseSupportFragment、LeanbackSettingsFragment、PreferenceFragment、BaseLeanbackPreferenceFragmentCompat、VideoSupportFragment、GuidedStepSupportFragment、SearchSupportFragment、VerticalGridSupportFragment、Presenter、ArrayObjectAdapter、CursorMapper 替换为现代 Compose 等价物;或实现带焦点记忆的沉浸式轮播、基于 PlayerSurface 的 Media3 视频播放、自定义 10 英尺客厅布局。

source

CopilotKit React 核心

SkillSkillsMP

@copilotkit/react-core——在 Next.js App Router / React Router v7 / TanStack Start / SPA 应用中挂载 CopilotKit provider(来自 @copilotkit/react-core/v2),接入 CopilotChat/CopilotPopup/CopilotSidebar(v2 聊天组件由 react-core/v2 提供,而非仅有 CSS 的 react-ui),通过 useAgent/useAgentContext/useCapabilities 访问和订阅 agent,在多个 agent 间切换,用 useThreads 管理持久的 Intelligence 会话线程,通过 useFrontendTool 注册浏览器端工具,用 useRenderTool/useComponent/useDefaultRenderTool 渲染工具调用,用 useHumanInTheLoop 做执行门控,用 useAttachments 接入文件附件,配置建议词,以及注册活动与自定义消息渲染器。publicLicenseKey 为正式字段(publicApiKey 是已废弃别名)。按任务加载 references/ 下对应的参考文件。

source

orchestration(Orca 编排)

SkillSkillsMP

协调受监督的 Orca worker:线程消息、阻塞式问答、任务派发、worker_done/escalation 等待、任务 DAG、决策关卡以及 agent 间的工作分解。完全所有权移交("hand off"、"handoff"、"give this to another agent"、"another worktree")用 orca-cli,除非需要监督、监控或协调 DAG;终端控制、轻量终端提示、shell 命令、Orca 工作树管理、读取/等待终端也用 orca-cli。仅当需要 OS/窗口级控制(焦点、菜单、对话框、坐标、截图)时,才用 Computer Use 操作外部浏览器窗口、webview、Orca 应用 UI 或 Orca 内置浏览器之外的桌面 UI。Orca 内置页面用 orca-cli,外部页面用 Playwright/CDP 等页面自动化工具。

source

SQL 安全执行

SkillSkillsMP

只要代码会构建、返回、拉取或执行针对用户真实 Postgres 数据库的 SQL,就使用本 skill——即使需求读起来像普通功能或 bug 修复,完全没提“security”“injection”或“SafeSqlFragment”。覆盖:编写或修改任何构造/返回数据库对象(表、视图、函数、DB 触发器、索引、RLS 策略)SQL 的 pg-meta 函数、查询构造器或接口;把 schema/表/列/搜索词/路由参数插入 SQL 文本;存储、读取或重跑从数据库往返的 SQL(策略定义、函数/视图定义、片段保存内容);以及任何把 SQL 发到项目库的 Run/Apply/Execute 动作(SQL 编辑器执行选中、策略编辑器应用、片段执行器)。在动手写这类代码前就要加载,不要只在评审成品 diff 时才用。仅在改动完全不涉及 SQL 文本或执行时跳过——样式、无关的数据 hook、非 SQL 表单校验或 UI 布局工作。

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

PostHog 桌面应用开发

SkillSkillsMP

将工作限定在 products/desktop 下的桌面应用——一个嵌套的独立 pnpm/turbo/Biome 工作区,由现已归档的 PostHog/code 仓库引入;PR、CI 与发布以 posthog/posthog 为唯一事实来源,且不属于根前端或 Django 构建。当用户说 /posthog-desktop,或开发 Electron 桌面应用、apps/code、apps/web、apps/mobile、packages/core、packages/ui、packages/workspace-server、@posthog/api-client、@posthog/agent 或代理框架时使用。把工作目录钉在 products/desktop,以该目录树的工具链与约定取代 monorepo 的,并界定树外允许触碰的少数路径(应用调用的 Django API、根目录的 desktop-* CI)。

source

拆分超大模块

SkillSkillsMP

以可证明、不改变行为的方式,把超大的 Python 模块(上千行的 logic.py、models.py、api.py 或其测试文件)机械拆分为按关注点分离的包。当被要求拆分/分解上帝模块或从中搬出函数、在改动前人工已同意拆分,或在动手重组约上千行的模块内代码之前使用——拆解长函数或就地抽取 helper 只会把一切留在同一文件里,因此先查看值不值得拆的门槛并提议拆分。涵盖该门槛、以无环依赖图把符号分配给关注点、AST 加 tokenize 的搬迁脚本,以及证明结果是纯移动。仅限 Python——前端文件请用 writing-ui-components。不适用于把共享 helper 抽取到 common/,也不适用于在 products 之间搬代码(那是 isolating-product-facade-contracts)。

source

React View Transition 动画

SkillSkillsMP

使用 React 的 View Transition API(`<ViewTransition>` 组件、`addTransitionType` 以及 CSS 视图过渡伪元素)实现顺滑、接近原生体验动画的指南。只要用户想添加页面过渡、动画化路由切换、做共享元素动画、组件进出场动画、列表重排动画、前进/后退方向性导航动画,或在 Next.js 中集成视图过渡,就使用此技能。用户提到 view transitions、`startViewTransition`、`ViewTransition`、transition types,或询问如何不借助第三方动画库在 React 中做 UI 状态间动画时也应使用。

source

BentoML EC2 部署

SkillSkillsMP

用 Docker 将容器化的 BentoML 服务直接部署到一台或多台裸 AWS EC2 实例——不用 Kubernetes。接收已推送的容器镜像(由 bentoml-containerize 技能构建),或通过 SSH 使用用户既有实例,或经 AWS CLI 开通新实例(SSM AMI 查询、安全组、密钥对),以重启自恢复方式运行容器,并用真实推理请求验证。当用户说“deploy my BentoML service to EC2”“run my bento on an AWS VM”“deploy this bento image to an EC2 instance”“run my BentoML container on AWS without Kubernetes”“put my bento on a cloud VM”等时使用。Kubernetes 目标请改用 bentoml-k8s-deploy。

source

前端 frontend

SkillSkillsMP

用于前端/Web UI/UX/视觉相关工作时务必使用:构建、样式、重设计页面或组件、React 配置、性能审计、视觉 QA、品味与打磨。会路由到四套规则集:设计品味 router 与品牌参考、面向 Playwright/Chromium 的 Lighthouse/Core Web Vitals 完美规则、ui-ux-db 调色板/字体/规范、designpowers 人设/可访问性/评审/交付;外加仅用 curl 的 lazyweb 真实应用界面研究与 beui.dev 交互目录。触发词:frontend、UI、UX、design、redesign、styling、layout、animation、motion、interaction、micro-interaction、make it feel alive、premium、luxury、minimal、brutalist、Awwwards、DESIGN.md、mockup、React、Lighthouse、accessibility、WCAG、Core Web Vitals、looks generic、make it pretty、like X brand、lazyweb、design research。

source

in-toto 供应链安全

SkillSkillsMP

用 in-toto 框架为容器构建实现供应链完整性验证:生成签名密钥、定义供应链 layout、把流水线步骤记录为签名的 link 元数据、部署前验证、在 Kubernetes 准入端强制,并与 SLSA 集成。适用于对 CI/CD 流水线步骤做 attestation、证明镜像确实走了批准的构建流程,或在准入端强制溯源。关键词:in-toto、layout、link 元数据、step、inspection、SLSA、provenance、admission。不要用于用 Cosign 签名和验证镜像——那用 implementing-image-provenance-verification-with-cosign。

source

用 Trivy 做容器安全扫描

SkillSkillsMP

用 Trivy 覆盖其支持的所有目标类型——容器镜像、文件系统、Git 仓库与 Kubernetes 集群——扫描 OS 与依赖漏洞、IaC 错误配置、暴露的密钥与许可证,并生成 CycloneDX 或 SPDX SBOM。适用于把 Trivy 集成进 CI/CD、部署 Trivy Kubernetes operator、扫描非镜像目标,或大规模分诊结果。关键词:Trivy、trivy k8s、operator、SBOM、CycloneDX、SPDX、misconfig、密钥扫描。不要用于单个 Docker 镜像扫描——那用 scanning-docker-images-with-trivy。

source

添加 LLM/MCP 工具

SkillSkillsMP

在 Trilium 中新增、修改或评审 LLM/MCP 工具时使用(packages/trilium-core/src/services/llm/tools/ 下 defineTools 定义的笔记/属性/附件/层级/图标/skill 等工具)——即同时暴露给应用内 LLM 聊天与外部 MCP server 的内容。涵盖 execute 为何必须是同步的(NotAPromise<T> 编译防护 + better-sqlite3 同步事务)、mutates:true→getSql().transactional 的接线、同时供给两方的唯一 allToolRegistries 注册点、返回 {error} 而非抛错的约定、受保护/系统笔记的守卫,以及 getTool()/cls.init() 测试框架。不适用于客户端笔记 UI、ETAPI 端点或一般性 Vitest 问题(见 writing-unit-tests)。

source

辨别力追问

SkillSkillsMP

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

source

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景