内网 Penpot 如何被外部 AI 使用？一条隧道 + MCP Server 全流程原创

快让我看看你的设计，我来帮你把代码写了啊。你的喷point设计稿是不是也这样好好的放在内网里，外面的AI就是够不着，用不上。今天这条视频3分钟教你用zero news一条隧道，把喷的MCP server直接递到外面的AI手里，让它读你的设计，改你的设计，甚至照着设计稿直接开写代码，全程你的稿子一步都不用出内网。上一期我们已经把penald web通过zero news内网穿透映射到公网域名如下，喷al的MCP可以复用这一条HTTPS隧道，不用再新增隧道。下面我们以cursor为例演示cursor通过隧道域名连接喷泡的MCP进行设计开发。第一步，先确认喷泡的web隧道正常访问浏览器，打开域名地址，确认喷泡的能登录，能打开设计文件。如果域名打不开，可以参考上一期视频具体配置方法，登录后点击左下角的账号，找到integrations，点击status按钮，开启MCP server.

在弹出的MCPP有效性时间弹窗中默认即可，然后进入到m CPK generatery的弹窗，在这里面我们复制m cp server的配置。第二步，在cursor里配置喷泡VCP，打开本机cursor编辑器，点击右上角设置，找到customizex customizes页面下的MCP菜单中，点击new，将前面复制的MCP配置粘贴进来保存，等喷泡的显示绿灯，说明喷泡的MCP连接正常。第三步，演示closeer agents如何连接喷泡的MCP？我们先在喷pointd中加载一个模板项目，用来测试如加载UI mark本example项目，进入项目面板后看到MCP显示绿色，说明MCP插件运行正常。再回到curs编辑器中，打开一个agent对话框，我们先问一下是否成功连接喷泡的MCP server, 这里回复成功连接，然后让A帮我们分。

分析设计稿可以这么说，你分析喷MP泡MCP上的项目，输出你的分析理解，这里就会给出很详细的回复，然后再让agent帮我们修改设计，如换一个背景色，比如帮我调整背景色，让背景看起来更加简洁，这里就会输出具体更改的内容。当设计稿符合我们要求后，可以让agent根据设计稿进行落地开发，比如输入你根据pen po的设计稿帮我开发落地zero news内网穿透，让pen po MCP server实现公网可见性，让外部curor cloud code这类的AI agent在任何位置都能连接内网中的penal，读取真实的结构化设计数据，同时也让设计文件继续留在内网的同时，这样既保住了内网部署的可控性，也把AI参与设计协作这件事真正落到了日常工作流里。本期视频就到这里，感谢观看。