AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

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

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

Penpot UI/UX 设计

SkillSkillsMP

使用 MCP 工具在 Penpot 中创建专业 UI/UX 设计的完整指南。适用场景:(1) 为 Web、移动或桌面应用创建新的 UI/UX 设计;(2) 构建含组件与设计令牌的设计系统;(3) 设计仪表盘、表单、导航或落地页;(4) 应用无障碍标准与最佳实践;(5) 遵循平台规范(iOS、Android、Material Design);(6) 评审或改进现有 Penpot 设计的可用性。触发语包括"design a UI"、"create interface"、"build layout"、"design dashboard"、"create form"、"design landing page"、"make it accessible"、"design system"、"component library"。

source

UI/UX 设计智能

SkillSkillsMP

UI/UX 设计智能库:50 种风格、21 套色板、50 组字体搭配、20 种图表、9 种技术栈(React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui)。动作:规划、构建、创建、设计、实现、审查、修复、优化、增强、重构、检查 UI/UX 代码。项目类型:网站、落地页、仪表盘、后台管理、电商、SaaS、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。元素:按钮、弹窗、导航栏、侧边栏、卡片、表格、表单、图表。风格:玻璃拟态、黏土拟态、极简、粗野主义、新拟态、便当格、暗色模式、响应式、拟物、扁平。主题:色板、无障碍、动效、布局、排版、字体搭配、间距、hover、阴影、渐变。集成:通过 shadcn/ui MCP 检索组件与示例。

source

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景