Penpot：一个值得尝试的自主设计工具

我最近开始探索设计工具的选择，除了大家熟知的Figma，还有一个叫Penpot的工具让我眼前一亮。说实话，我对设计协作平台的期待不仅仅是“能画图”，而是能否在自己的环境中进行设计、开发者能否轻松理解页面的结构，以及AI能否真正参与到设计中，而不仅仅是提供建议。Penpot正好满足了这些需求，它是一个开源的、Web化的UI/UX设计平台，可以自托管，并且支持SVG、CSS和HTML这些开放标准。 最近我实际体验了一下Penpot、MCP和Codex的组合。我让Codex在Penpot中创建了一个移动端的学生信息管理系统，包含5个页面，结果大约花了20分钟完成。接着，我通过PowerShell脚本在本地部署了Penpot，使用Docker Compose，设置本地入口为9001。为了让外网也能访问，我还安装了cpolar，将9001映射到公网。值得一提的是，整个过程我更关注的是设计平台、MCP、AI Agent与公网地址之间的关系，而不是简单地把Penpot视为Figma的替代品。 Penpot的核心吸引力不仅仅是“开源版Figma” Penpot不仅是设计师和开发者的协作平台，它在浏览器中能完成UI设计、交互原型、团队协作、设计交付等功能，甚至可以自托管部署。而它和其他在线设计工具最大的不同在于：Penpot强调设计协作、开放标准与自托管。 这样一来，开发者在查看设计稿时，可以更好地理解样式和结构，而不仅仅是“看图”。我觉得这对于团队间的沟通非常有帮助。它的设计过程与SVG、CSS和HTML紧密相连，让设计师和开发者之间的合作变得更加顺畅。 MCP将Penpot打造成AI友好的工作台 另外，Penpot的MCP Server相当值得一提。通过MCP，支持的AI工具可以直接连接到Penpot。我实际使用时，Codex、Cursor和Claude Code都能读取和操作页面、图层、组件、样式和Design Tokens。这样的功能使得AI能够直接在设计文件中进行操作，而不只是提供一些建议，真的很酷。 我在Penpot中开启MCP功能后，给Codex下达了一些具体的任务，比如设计5个页面的学生信息管理系统。这个过程让我觉得，AI在这里不再是一个“工具”，而是一个真正的助手，参与到设计的每一个环节中。 实际操作中的小技巧 在进行设计时，我习惯先测试一下MCP的连接状态，确保一切正常后再开始大规模的设计任务。第一次连接Codex时，我在Penpot页面上看到了一些测试内容，这让我松了一口气。实际上，这样的验证步骤可以减少后期的麻烦，确保设计可以顺利进行。 而创建5个页面的任务，大约等了20分钟，我看到Codex在Penpot内完成了所有的设计。虽然大家可能会关注“AI画得好不好”，但我更在意的是这个AI在Penpot中确实进行了实际操作。 Penpot与Figma的对比 我在使用记录中也比较了一下Figma的MCP流程。虽然Figma也有类似的功能，但它的套餐和调用额度限制让我觉得Penpot的自建MCP工作流更灵活。我认为选择合适的工具，最重要的还是看它能否满足你的实际需求。 总结一下，Penpot给我的感觉是一个非常友好的设计工具，尤其对于那些希望控制自己设计环境的团队。它不仅仅是另一款在线设计工具，更是一个可以结合AI、开放标准和自托管的全面解决方案。如果你正在寻找这样一个平台，不妨试试Penpot！