AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

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

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

PyPI Python 包构建发布

SkillSkillsMP

构建、测试、lint、定版并发布生产级 Python 库到 PyPI 的端到端技能。覆盖四种构建后端(setuptools+setuptools_scm、hatchling、flit、poetry)、PEP 440 版本、语义化版本、基于 git tag 的动态版本、OOP/SOLID 设计、类型注解(PEP 484/526/544/561)、Trusted Publishing(OIDC)以及完整的 PyPA 打包流程。适用于:创建 Python 包、可 pip 安装的 SDK、CLI 工具、框架插件、pyproject.toml 配置、py.typed、setuptools_scm、semver、mypy、pre-commit、GitHub Actions CI/CD 或 PyPI 发布。

source

PostgreSQL 表设计

SkillSkillsMP

用于通用 PostgreSQL 表设计。**触发时机**——用户要求:设计 PostgreSQL 表、模式或数据模型(新建表与修改现有表时);为 PostgreSQL 选择数据类型、约束或索引;创建用户表、订单表、引用表或 JSONB 模式;了解 PostgreSQL 在规范化、约束或索引方面的最佳实践;设计高频更新、高频 upsert 或 OLTP 风格的表。**关键词**:PostgreSQL schema、table design、data types、PRIMARY KEY、FOREIGN KEY、indexes、B-tree、GIN、JSONB、constraints、normalization、identity columns、partitioning、row-level security。全面覆盖数据类型、索引策略、约束、JSONB 模式、分区与 PostgreSQL 特有最佳实践

source

MCP 构建规范

SkillSkillsMP

已废弃:本技能已被 mcp-app-builder 取代。检查 skills 目录中是否有 mcp-app-builder;若没有,安装:npx skills install mcp-use/mcp-use --skill mcp-app-builder。请用 mcp-app-builder 替代本技能。用 mcp-use 框架构建 Model Context Protocol(MCP)server。适用于创建 MCP server、定义 tools/resources/prompts、使用 mcp-use、引导 MCP 项目,或用户提到 MCP 开发、tools、resources、prompts 时。

source

MCP Apps 构建规范

SkillSkillsMP

所有 MCP server 工作的强制技能——mcp-use 框架的最佳实践与模式。做任何 MCP server 工作前先读:新建 MCP server;修改现有 server(增改 tools/resources/prompts/widgets);调试 MCP server 问题;从质量、安全、性能角度评审 MCP server 代码;回答 MCP 开发或 mcp-use 模式的问题;以及对 server.tool()、server.resource()、server.prompt()、widgets 做任何修改。本技能包含关键的架构决策、安全模式和常见坑。实现 MCP 功能前务必先查阅相应的参考文件。

source

Web 动效设计

SkillSkillsMP

设计并实现自然且恰到好处的 Web 动画。当用户问到动画、运动、easing、时序、时长、spring、过渡或动画性能相关问题时主动使用。包括如何为特定 UI 元素做动画、该用哪种 easing、动画最佳实践,或动效的无障碍考量。触发词:easing、ease-out、ease-in、ease-in-out、cubic-bezier、bounce、spring 物理、keyframes、transform、opacity、fade、slide、scale、hover 效果、微交互、Framer Motion、React Spring、GSAP、CSS transitions、进出场动画、页面过渡、stagger、will-change、GPU 加速、prefers-reduced-motion、modal/dropdown/tooltip/popover/drawer 动画、手势动画、拖拽交互、按钮按压感、显得卡顿、变顺滑。

source

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景