Penpot 界面与原型设计

解决什么问题

在 Penpot 里做界面与原型设计时，手动拖拽组件、逐层调整样式不仅重复，而且难以用代码批量生成一致的页面结构。另一方面，直接写脚本操作 Penpot 插件 API 又有一堆坑：width/height 只读、z 轴层级要用 insertChild、flex 子组件数组顺序反转……这个技能把这些问题封装成一套可复用的工作流，让你通过 MCP 工具驱动 Penpot，走完从结构分析到视觉校验的完整链路。

核心能力与工作流

技能基于 penpot/penpot-mcp 服务暴露的四个工具：

• mcp__penpot__execute_code：在插件上下文运行 JavaScript，创建/修改设计元素
• mcp__penpot__export_shape：把图形导出为 PNG/SVG，用于目视检查
• mcp__penpot__import_image：导入图标、照片、logo
• mcp__penpot__penpot_api_info：获取 Penpot API 文档

典型工作流分六步：

1. 确认设计系统：先询问用户是否有现成的 tokens/规范，或从当前 Penpot 文件中探测既有组件
2. 理解页面：调用 penpotUtils.shapeStructure() 查看层级结构
3. 定位元素：用 penpotUtils.findShapes() 按类型或名称查找
4. 创建/修改：penpot.createBoard()、penpot.createRectangle()、penpot.createText() 等
5. 应用布局：用 addFlexLayout() 搭建响应式容器
6. 视觉校验：导出图形目检，确认无误

技能还内置了默认设计 tokens（8px 间距基准、字号阶梯、语义色板）和组件检查清单（按钮 44×44 最小触控区、表单标签在输入框上方、导航项 7±2 个等），在用户没有既有规范时作为起点。

注意事项

• 本技能依赖本地运行的 penpot-mcp 服务器和 Penpot 中的插件（http://localhost:4400/manifest.json）。插件 UI 必须打开并显示 Connected，否则工具调用会超时。
• 优先复用用户已有的设计系统；默认 tokens 仅在没有规范时兜底。
• API 有几个必须绕开的陷阱：尺寸和位置属性只读，需要用 resize() 和 setParentXY() 修改；flex 容器的子组件数组在 column/row 方向下顺序是反的。
• 新建画板前先检查已有画板位置，避免重叠；同类屏幕之间留 100px 间距，不同流程留 200px 以上。
• 可访问性不是可选项：文本对比度 4.5:1、大文本 3:1，且不能只靠颜色传达信息。