AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

共匹配 4,020 个资源 · 第 50 / 84 页

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

mermaid-diagrams

SkillSkillsMP

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

source

HyperFrames 视频合成 hyperframes

SkillSkillsMP

在 HyperFrames HTML 中创建视频合成、动画、标题卡、叠加层、字幕、配音、音频反应视觉与场景转场。当需要构建任何基于 HTML 的视频内容、添加与音频同步的字幕、生成语音旁白、创建音频反应动画(节拍同步、随音乐律动的辉光/脉冲)、添加文字高亮动画(马克笔扫过、手绘圆圈、爆裂线条、涂鸦、草图描出)或场景间转场(交叉淡入淡出、擦除、揭示、着色器转场)时使用。涵盖合成编排、时序、媒体与完整视频制作工作流。CLI 命令(init、lint、preview、render、transcribe、tts)参见 hyperframes-cli 技能。

source

HyperFrames 视频合成 hyperframes

SkillSkillsMP

在 HyperFrames HTML 中创建视频合成、动画、标题卡、叠加层、字幕、配音、音频反应视觉与场景转场。当需要构建任何基于 HTML 的视频内容、添加与音频同步的字幕、生成语音旁白、创建音频反应动画(节拍同步、随音乐律动的辉光/脉冲)、添加文字高亮动画(马克笔扫过、手绘圆圈、爆裂线条、涂鸦、草图描出)或场景间转场(交叉淡入淡出、擦除、揭示、着色器转场)时使用。涵盖合成编排、时序、媒体与完整视频制作工作流。CLI 命令(init、lint、preview、render、transcribe、tts)参见 hyperframes-cli 技能。

source

网站复刻 / 克隆方法论

SkillSkillsMP

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。

source

带标注线框图 wireframe-annotated

SkillSkillsMP

带标注/红线的低保真线框图——桌面落地页/营销页以扁平灰盒画在浏览器边框内,叠加单一主色的编号标注针(①②③④⑤),并配右侧规格面板逐条列出每个编号针的简短工程/UX 说明。这是「线框 + 红线规格」风格——干净、扁平、低保真、非手绘。当需求提到「annotated wireframe」「redline wireframe」「wireframe with spec」「lo-fi landing wireframe」「low fidelity」「线框图」「标注线框」或「redline」时使用。

source

Orbit 通用每日简报 orbit-general

SkillSkillsMP

Open Orbit 简报技能——当用户连接了两个及以上连接器时由 Orbit 流水线选用。从每个已授权连接器(GitHub、Linear、Notion、Slack、飞书、Calendar、Gmail、Drive、Sentry、Vercel 等)拉取过去 24 小时的活动,并在「我的设计」顶部渲染单一自适应 bento 网格仪表盘。每个连接器模块按返回数据的形态自选 UI 形式(列表、头像堆叠、状态环、热力图、文件网格、告警卡等),使布局随 Orbit 连接器生态的增长而扩展。不应手动触发此技能——它由 Orbit 的每日摘要调度器针对用户实时连接器数据调用。

source

Orbit GitHub 每日简报 orbit-github

SkillSkillsMP

Open Orbit 简报技能——当 GitHub 是用户唯一连接的连接器,或用户显式将每日摘要限定在 GitHub 时,由 Orbit 流水线选用。从用户已授权的 GitHub 连接拉取过去 24 小时的 PR、评审请求、issue、CI 运行与合并,并按 GitHub 原生通知 + PR diff 的视觉语言渲染布局。不应手动触发此技能——它由 Orbit 的每日摘要调度器针对实时 GitHub 数据调用。

source

精灵图动画幻灯片 sprite-animation

SkillSkillsMP

像素/精灵图风格的动画讲解幻灯片——全出血奶油色舞台、醒目的大字年份、动画像素吉祥物(如花札卡牌、蘑菇或 8-bit 主机)、动感日文展示字体、滴答走动的timeline 缎带。观感如同教育动效视频中的一帧——循环 CSS 关键帧、无 JS、可直接录屏成竖版视频。当需求提到「sprite animation」「pixel-art video」「8-bit explainer」「history of X explainer」「kinetic typography history」「Nintendo-style」「精灵图动画」「像素动画」或「复古动画」时使用。

source

游戏化应用原型 gamified-app

SkillSkillsMP

多帧游戏化移动应用原型——暗色展示舞台上的三个手机边框。第一帧:封面/海报;第二帧:今日任务,带 XP 缎带与等级条;第三帧:任务详情。鲜活的任務磁贴、等级缎带与底部标签栏。当需求提到「gamified app」「habit tracker」「RPG-style life app」「level-up app」「daily quests」「XP / streak app」或「ELI5-style explainer app」时使用。

source

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景