用途：在 Penpot 中借助 penpot/penpot-mcp MCP 服务器创建专业、以用户为中心的 UI/UX 设计，适用于 Web、移动端等界面。
主要能力：提供四个 MCP 工具——mcp__penpot__execute_code（在插件上下文运行 JavaScript 创建/修改设计）、mcp__penpot__export_shape（导出 PNG/SVG 供视觉检查）、mcp__penpot__import_image（导入图标、照片、Logo）、mcp__penpot__penpot_api_info（获取 Penpot API 文档）。附带组件模式、无障碍、平台规范等参考文件。
使用方式：先尝试调用 mcp__penpot__penpot_api_info 判断服务器是否已运行；未安装时执行 git clone https://github.com/penpot/penpot-mcp.git、cd penpot-mcp、npm install、npm run bootstrap，然后在 Penpot 中通过 Plugins → Load plugin from URL 加载 http://localhost:4400/manifest.json 并点击 Connect to MCP server。VS Code 可在 settings.json 配置 mcp.servers.penpot.url 为 http://localhost:4401/sse。设计流程为：确认设计系统、用 penpotUtils.shapeStructure() 查看层级、findShapes() 定位元素、createBoard/createRectangle/createText 创建、addFlexLayout() 布局、export_shape 验证。
适用场景：新建 Web/移动端界面、复用或建立设计系统、检查对比度与触控目标、导出 CSS。
限制：需本地运行 MCP 服务器；常见问题包括插件无法连接、浏览器拦截 localhost、工具未出现、执行超时、WebSocket 失败（需放行 4400/4401/4402 端口）。API 注意：width/height 与 parentX/parentY 只读，需用 resize 与 setParentXY；z 序用 insertChild；column/row 方向下 flex 子元素顺序相反；text.resize 后需重置 growType。默认设计令牌与规范仅在用户无设计系统时使用。