penpot-uiux-design作者 GitHub

Penpot UI/UX Design Skill.

一个用于 UI 设计的 Claude Code 和 Codex skill：通过 MCP 工具在 Penpot 中进行专业的 UI/UX 设计、组件和设计系统工作。

Web & UI
设计文件

github/awesome-copilot · skills/penpot-uiux-design/SKILL.mdSKILL.md

--- name: penpot-uiux-design description: Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material … --- ## Available MCP Tools ## MCP Server Setup ## Core Design Principles ## Design Workflow ## Design System Handling ## Key Penpot API Gotchas

从上游文件读取的前置内容和章节标题，2026-09-14 · 完整内容共 12,103 字符

01 功能说明

penpot-uiux-design Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这是一份通过 penpot/penpot-mcp 服务器在 Penpot 中设计真实界面的指南，面向那些由 Agent 驱动 Penpot 插件 API 的设计师和开发者。它没有给出泛泛的建议，而是规定了一套具体的操作顺序：先检查 MCP 服务器是否已在运行，再发现文件中已有的颜色、文字样式和组件，用 penpotUtils.shapeStructure 检查层级结构，然后创建画板、矩形和文本，并应用 addFlexLayout 容器。

它提供了 8px 间距和字号的兜底比例、375x812 的移动端布局与 1440x900 的仪表盘布局、按钮/表单/导航的检查清单、WCAG 对比度和触控目标的限制、画板放置间距、Penpot API 的常见陷阱（如只读的 width 和 height），以及通过 analyzeDescendants、fontSize 过滤和 export_shape 进行的校验。

它产出什么

通过在插件上下文中执行 JavaScript 创建的、新建或修改过的 Penpot 设计。
选定图形的 PNG 或 SVG 渲染图，用于实际查看设计，而不是凭空猜测。
从某个选区（包括子元素）中提取出的 CSS，用于交接。

查看示例提示词 ↗

工作方式

01
确认服务器正在运行
第一步是先试着调用一次 penpot_api_info，这样在连接已经可用的情况下，就不会让人再走一遍安装流程。
02
查找现有的设计系统
在开始绘制之前，它会先询问品牌规范，并读取当前文件中已经在使用的组件、颜色和模式。
03
检查页面结构
shapeStructure 会返回现有的层级结构，以便新元素能够相对于画布上已有的内容进行放置。
04
创建元素
画板、矩形和文本是通过 Penpot 插件上下文中的插件调用创建的，而不是靠文字描述生成的。
05
通过导出进行校验
每次改动最后都会导出一张图像来查看结果，而不是仅凭代码就信以为真。

02 找到适合场景

何时使用 penpot-uiux-design Skill

在 Claude Code 或 Codex 中使用 penpot-uiux-design skill 处理此类 UI 设计工作。适用范围和限制取自该 skill 的文件。

适合场景

正在从零开始一个 Web、移动端或桌面界面，并希望它被构建成一个真正的 Penpot 文件的人。
正在搭建一个组件库和设计 token，供整个产品复用。
正在制作常见的产品页面，例如仪表盘、表单、导航和落地页。
正在审查或改进一个已经存在的 Penpot 文件，而不是从空白开始。
必须遵循 iOS、Android 或 Material Design 规范的工作。

了解边界

它无法独立运行：本地 MCP 服务器必须处于运行状态，且 Penpot 插件界面必须显示为已连接，否则调用会失败或超时。
它仅适用于通过 penpot-mcp 服务器构建的 Penpot 设计，不适用于其他设计工具。
通过它的检查清单并不等于证明设计可行；该文件仍要求你用真实用户来验证假设。

需要提供的信息

现有的设计系统或品牌规范（如果有）在 Agent 开始绘制之前，告诉它你的 token 和规格，或者让它从当前文件中自行发现。
图标、照片或标志视觉素材通过导入图片工具引入设计。

03 Skill 内部

penpot-uiux-design Skill 为 Claude Code 和 Codex 制定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

安装前先检查服务器
先尝试进行一次工具调用，只有在用户确认服务器尚未安装后才走完整的安装流程。
永远不要在另一个画板上叠加画板
创建画板前先列出现有画板，并将新画板放在其最右边缘再加一段间距之外；同一流程中的界面之间用 100px 间距，不同板块之间用 200px 以上间距。
通过方法而非属性来调整大小
width 和 height 是只读的，因此几何变化需要通过 shape.resize(w, h) 实现，而不是直接赋值。
用 insertChild 堆叠图层
层级排序使用 insertChild(index, shape)；appendChild 明确不是排列图层的方式。
默认 token 只是备用方案
当用户有自己的设计系统时，其颜色、间距和字体优先；内置比例只在不存在设计系统时才适用。
守住可访问性底线
正文文本对比度保持在 4.5:1，大号文本保持在 3:1，触控目标始终不小于 44x44px。
限制配色和字体
使用 1 个主色加 1 个辅色加中性色，整个设计中字体不超过 1-2 种。
调整大小后重置文本增长类型
Penpot 会在调整大小时重置文本尺寸行为，因此 growType 必须重新设为 auto-width 或 auto-height。

04 投入使用

在 Claude Code 或 Codex 中安装 penpot-uiux-design

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 penpot-uiux-design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

针对 skills/penpot-uiux-design/SKILL.md 的通用 skills CLI 形式；仓库可能记录了自己的路径。

给 Skill 一个首次 UI 设计任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Design a settings screen for [app name] in Penpot on a 375x812 board. Follow the Material Design guidelines and use our existing tokens if the file already has them, otherwise use the 8px spacing scale. It needs a header, a form with labels above the inputs plus error states, and a bottom CTA. Export the screen when you are done so I can check the contrast.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

每个元素都位于其容器内，通过 analyzeDescendants 结合 isContainedIn 验证。
没有文本小于 12px，通过按 fontSize 过滤图形来检测。
在设计定稿前，色彩对比度需达到 WCAG AA 标准。
使用 shapeStructure 检查嵌套关系和层级结构。
正文字号保持在 16px 或以上。
不仅要考虑正常流程，还要顾及加载、空白和错误状态。

在 OpenDesign 中通过 SKILL.md 链接导入 penpot-uiux-design：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: GitHub
Repository: github.com/github/awesome-copilot 分支 main
Skill 文件: skills/penpot-uiux-design/SKILL.md 验证时记录的内容校验和；commit 1899b18
License: MIT 来自 LICENSE。
仓库星标数: 38,981 GitHub 快照摄于 2026-09-14，针对整个 github/awesome-copilot 仓库，该仓库包含本目录中的 6 个 skills。这不是 penpot-uiux-design 的评级或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

可用的 MCP 工具四个工具，各有用途：运行代码、导出形状、导入图片、获取 Penpot API 文档。
MCP 服务器设置先检查是否已在运行，然后克隆、构建、加载插件 URL、配置 VS Code、进行故障排查。
核心设计原则清晰性与一致性的黄金准则，以及五步视觉层级优先顺序。
设计工作流从设计系统检查到审查、创建、flex 布局及视觉验证的有序步骤。
设计系统处理询问或发现 token、颜色、文本样式和组件，再根据答案分支处理。
Penpot API 关键注意事项只读几何属性、用于 z 轴顺序的 insertChild、反转的 flex 顺序、文本调整大小后 growType 会被重置。
新画板的定位查找现有画板，从最右侧边缘计算下一个 x 坐标，让流程在视觉上保持分组。
默认设计 token面向无系统设计的默认 8px 间距刻度、字体刻度和语义化颜色角色。
组件清单按钮、表单和导航的检查项要求，涵盖状态、尺寸和标签。
可访问性快速检查六项检查：对比度、触控目标、焦点、替代文本、标题层级、色彩独立性。
设计审查清单定稿前对层级、间距、字体、WCAG AA、状态及系统一致性的检查。
验证设计验证方法对照表，以及使用 generateStyle 从选区导出 CSS。

Skill 自身的描述

「在 Penpot 中使用 MCP 工具创建专业 UI/UX 设计的综合指南。在以下情况使用此 skill：(1) 为 web、移动或桌面应用创建新 UI/UX 设计，(2) 构建包含组件和 token 的设计系统，(3) 设计仪表板、表单、导航或落地页，(4) 应用无障碍标准和最佳实践，(5) 遵循平台指南（iOS、Android、Material Design），(6) 审查或改进现有 Penpot 设计的可用性。触发词：「设计 UI」、「创建界面」、「构建布局」、「设计仪表板」、「创建表单」、「设计落地页」、「使其无障碍」、「设计系统」、「组件库」。」

来自 SKILL.md 的 front-matter 描述。完整文件约 12,103 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 penpot-uiux-design Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

使用前是否必须先安装 Penpot MCP 服务器？

不需要，该 skill 会先主动调用 penpot_api_info 进行检查。只有在确认服务器未安装的情况下，它才会提供安装步骤：克隆 penpot-mcp、运行 npm install 和 npm run bootstrap，然后在 Penpot 中从 http://localhost:4400/manifest.json 加载该插件。

它配置的是哪个客户端？

设置部分展示了一段 VS Code settings.json 代码片段，用于在 http://localhost:4401/sse 注册一个 penpot 服务器。它还提醒，修改配置后可能需要完全重启 VS Code 或 Claude，工具才会出现。

Penpot UI/UX Design

在实际 UI 设计任务中运行 penpot-uiux-design。

下载 OpenDesign，从其 SKILL.md 链接导入 penpot-uiux-design，粘贴上述提示词，在看到结果前先阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

penpot-uiux-design Skill 在 Claude Code 和 Codex 中的作用

以 skill 自身的术语

工作方式

何时使用 penpot-uiux-design Skill

适合场景

了解边界

需要提供的信息

penpot-uiux-design Skill 为 Claude Code 和 Codex 制定的规则

安装前先检查服务器

永远不要在另一个画板上叠加画板

通过方法而非属性来调整大小

用 insertChild 堆叠图层

默认 token 只是备用方案

守住可访问性底线

限制配色和字体

调整大小后重置文本增长类型