AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

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

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

pdf-ocr-layout 文档版面解析

v1.0.2

SkillClawHub5.4k

基于智谱 GLM-OCR、GLM-4.7 及 GLM-4.6V 的多模态文档深度解析工具。 Use when: - 需要高精度提取文档(PDF/图片)中的表格并转换为 Markdown 格式 - 需要从文档页面中自动裁剪并提取插图、图表为独立文件 - 需要对提取的图表进行深度语义理解(基于 GLM-4.6V 视觉分析) - 需要对提取的表格数据进行逻辑分析(基于 GLM-4.7 文本分析) 核心架构: 1. 视觉提取:GLM-OCR 2. 语义理解:GLM-4.7 (纯文本/表格) + GLM-4.6V (多模态/图像)

source

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

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景