别等踩坑才装！UI设计必备的5个Claude MCP Figma MCP

Figma MCP：
Figma 官方 MCP 服务，将设计稿的结构数据（布局关系、设计 Token、组件变量）直接注入编码   Agent，让 Claude Code 生成与设计高度吻合的代码；同时支持反向操作——将运行中的前端页面写回Figma 成为可编辑图层，实现设计与代码的双向同步，结合 Code Connect   可复用已有组件库，显著提升实现精度。
 
AIDesigner MCP
解决 AI   编码助手「代码强但设计弱」的痛点，能自动读取项目的框架、组件库（Radix/shadcn）、Tailwind Token，结合设计系统生成与现有风格一致的生产级 UI，输出带有完整 Tailwind CSS 的 HTML并渲染 PNG 预览，支持用自然语言迭代调整布局和配色，设计文件本地存储在.aidesigner/ 目录。
 
AccessLint MCP
面向 AI 编码Agent的无障碍合规工具，内置92条规则，覆盖WCAG 2.1 Level A/AA的23   项成功标准，能直接输出精确的规则 ID、CSS选择器和修复建议，跳过Agent凭记忆推理的低效环节，实测减少 23% 输出 Token，修复率高达99.5%，支持对动态渲染页面进行实时审计。
 
Playwright MCP
由微软开源，通过无障碍树快照（而非截图）驱动浏览器，让 Claude 无需视觉模型即可导航页面、填表、点击、抓取数据，支持持久 Session 保留登录态，内置 40+工具，覆盖网络拦截、录制追踪、多标签等场景，是端到端测试自动化的利器。
 
Notion MCP
Notion 官方托管的 MCP 服务，赋予 Claude、Cursor、ChatGPT 等 AI 工具对 Notion 工作区的读写权限，可搜索页面、查询数据库、创建文档、更新任务，是将 AI Agent与企业知识库深度打通的标准方案，企业版支持管理员审批可接入的 MCP 客户端，兼顾安全与效率。
 
by：微信公众号@AI充电官