AgentHubAgentHub

使用场景/设计与创意

设计类 MCP / Skill 推荐

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

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

什么是设计与创意?

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

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

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

适合做什么

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

不太适合

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

相关资源

查看全部 →

React Hook Form 规范(Claude Skills)

SkillSkillsMP

在 monorepo 内正确使用 React Hook Form——数据流、订阅、reset、脏状态、数字输入以及受控输入规则。在编写或修改任何表单代码、给已有表单加字段、使用 watch/useWatch/formState/getValues/setValue/reset、把表单接入 dialog 或 sheet、或实现提交/取消底栏之前先加载本 skill,即使改动看起来很简单。仓库中普遍存在 RHF 反模式,不加载本 skill 会照抄它们。表单布局与选用组件请再加载 studio-ui-patterns。

source

SQL 安全执行(Claude Skills)

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

运行视觉回归测试

SkillSkillsMP

在 Actual Budget 仓库中新增、更新、重新生成、运行或调试视觉回归测试(VRT)与截图测试时一律使用。包括诸如新增一个 VRT、添加截图测试、更新快照、重新生成 VRT 截图、VRT 失败了、yarn vrt、vrt:docker 或 /update-vrt 之类的请求,以及任何需要为 UI 改动补截图覆盖的情况。VRT 快照必须在 Linux docker 镜像内生成(绝不能在宿主机上),且快照更新必须只限定于改动的测试——这两点任一搞错,都会产出让 CI 忽略的快照或重写仓库里的全部截图。

source

i18n-translate(前端 i18n 翻译补全)

SkillSkillsMP

为本项目补全并维护前端 i18n 翻译。覆盖查找缺失的翻译键、检测未翻译条目,并为所有支持的 locale(en、zh、zh-TW、fr、ja、ru、vi)添加翻译。凡涉及前端 locale 文件、缺失翻译键、未翻译 UI 文本、`t(...)` 键、`useTranslation()`、静态 i18n 键、按钮/标签/toast/dialog/placeholder/校验文案,或哪怕只是补一个 i18n 键的任务都适用。当审查结论提到缺失 i18n、新 UI 文本需要翻译,或用户要求添加翻译、修复 i18n、补全翻译时使用。翻译、添加 locale 键或编辑前端 i18n 文件前必须先加载并遵循本技能。

source

本地任务代理运行调试

SkillSkillsMP

调试本地 PostHog 任务运行的输出——向导云运行路径:在本地 Temporal `process-task` 工作流下于 Docker 沙箱中执行(先由向导集成 PostHog,再由编码代理提交并开 PR)。当本地运行卡住、失败或无输出,或需要读取向导/代理日志时使用。涵盖本地跑云运行所需的 `.env.local` 键与 `ai_features` intent、查找任务 UUID(docker ps、temporal CLI、localhost:8081 的 Temporal UI)、在沙箱容器内实时跟踪日志(`/tmp/posthog-wizard.log`、`/tmp/agent-server.log`),以及沙箱销毁后从对象存储读取按运行持久化的控制台日志。触发词:task-sandbox、run_wizard、agent-server、process-task、SANDBOX_PROVIDER、LLM_GATEWAY、cloud_run、posthog-wizard.log。

source

重构

SkillSkillsMP

针对具备通过基线与充分保留证据的代码的重构评估与行为保持模式。当用户要求清理、简化或重构选定区域,以及在变异测试或经评审的对等替代证据确立 REFACTOR 步骤信心之后使用。涵盖重构前先提交的纪律、重构何时增值何时应跳过、以及优先级分类。对于选定全路径简化工程中的任何切片——过渡态或终态——以 reduce-system-complexity 为主导技能;适用时重构可作为次要技能。仓库级架构探索用 improve-codebase-architecture;模块契约用 codebase-design。证据不足或新增行为的代码请勿使用。

source

前端 frontend

SkillSkillsMP

前端/Web UI/UX/视觉类工作必须使用:构建、样式设计、页面或组件重设计、React 环境搭建、性能审计、视觉 QA、品味与打磨。内含四套规则:design taste 路由器与品牌参考;perfection(Playwright/Chromium、Lighthouse、Core Web Vitals);ui-ux-db 配色/字体/规范;designpowers 用户画像/无障碍/评审/交付;以及仅用 curl 的 lazyweb 真实应用截屏研究,用于确定设计方向。触发词:frontend、UI、UX、design、redesign、styling、layout、animation、motion、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

端到端测试编写

SkillSkillsMP

当开发者要为 Opik 的某个功能、页面或分支添加、编写或创建端到端测试时使用——例如「为实验对比页添加 e2e 测试」「为刚做的功能写测试」「这个分支的 e2e 测试」「给数据集条目流程加测试」。在 tests_end_to_end/e2e/ 中跑完整个循环——分析功能与前端代码、用 Playwright MCP 探索真实 UI、编写 Page Object Model + spec,并在本地运行直到通过。

source

PowerToys 端到端验证

SkillSkillsMP

使用 winapp CLI 在两种场景下端到端验证 PowerToys 行为:(A) 用模块的发布检查清单对照已安装版本;(B) PR 验证——依据 PR 描述与 diff 推导其检查清单再对照已安装版本执行(已合并/已发布的 PR,或整个 release/hotfix 集合),若 PR 尚未进入构建版本则构建并侧加载该模块。逐项通过 UIA invoke / Named Events / settings.json 编辑 / 剪贴板 / GPO / SendInput 驱动,并为每项输出带证据的结构化 PASS / FAIL / BLOCKED 结论(FAIL 需区分产品缺陷与过期/含糊的清单项)。当被要求验证模块检查清单、确认 PR、签署发布/hotfix 的 PR 或对安装/侧加载的 PowerToys 做 QA 时使用。结合通用 winapp ui 机制(references/winapp-ui-testing.md)与 PT 专属配方、分场景 playbook(references/scenarios/)以及本 skill 附带的辅助 .ps1 脚本。

source

常见问题

Figma MCP 需要什么权限?

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

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

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

生成图片的 MCP 会侵权吗?

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

配套安装与配置教程

相关场景