“把现有课程文案做成一张桌面和手机都能用的报名页。品牌蓝是固定的，卡片以后还要复用。”
Penpot 源文件协作系统 / 设计协作
penpot-workflow
让 Agent 直接理解并修改真实设计源文件，不再根据截图猜图层关系。
适合谁
使用 Penpot、自托管设计工具或开放设计系统的产品与前端团队
这个 Skill 怎样工作
设计必须留在 Penpot 里，不能停在一张截图里。
关键区别
先读真实文件，再声明修改范围；伴随代码不能冒充设计交付。
- 01 / 输入
真实文件上下文
确认当前文件、页面、选区与连接状态，先完成只读检查。
文件 / 页面 / 组件 / Design Tokens - 02 / 处理
在源文件里修改
按对象边界更新图层、组件与令牌，保留语义、别名和现有设计关系。
结构变更 / 令牌映射 / 伴随代码 - 03 / 交付
重新读取并核对
再次读取受影响对象，确认设计仍可编辑，页面与令牌状态和请求一致。
可编辑 Penpot / 前后变更记录
- 4 类
- 页面、图层、组件与令牌共同检查
- 2 次
- 修改前后都重新读取真实结构
- 1 份
- 源文件继续作为设计事实来源
先说明问题
截图无法说明页面、图层和组件的关系
只根据截图模仿界面，Agent 无法可靠知道组件、图层、布局和 Design Tokens 的真实关系。修改结果也很难回到设计源文件，最终形成另一份无法同步的实现。
适合
- 通过 Penpot MCP 检查或修改真实设计结构
- 从组件、图层和 Design Tokens 生成代码
- 维护开源、自托管或隐私敏感的设计系统
不用于
- 没有可验证 Penpot 文件却声称完成 Penpot 设计
- 必须交付 Figma 文件或依赖 Figma 插件的团队
- 用本地 HTML 或截图冒充设计源文件
前面的原理先放到这里
让我们上手试试。
下面只用一个任务，看用户怎样提出要求、Agent 怎样判断，以及最后到底交付了什么。
演示案例 / Morrow / 城市夜校报名页
在现有 Penpot 源文件里，完成一张可复用的课程报名页。
任务背景
Morrow 是一张城市夜校报名页。页面必须同时满足响应式、组件复用和源文件可编辑。
收到什么
课程文案、固定品牌蓝、需要复用的三张课程卡
具体做什么
读取现有页面、组件和 Design Tokens，完成桌面与手机布局，再回读验证
交付什么
可编辑报名页、Course card 组件、修改前后记录
我会先读取当前页面、组件和令牌，再建立报名页。完成后重新读取受影响对象，确认页面仍能编辑，品牌色和卡片也没有被写死。
- 目标页面
- 课程报名页
- 必须保留
- 品牌蓝与可复用卡片
- 验收视口
- 桌面 + 手机
Agent 怎样判断
先留下三个决定，再开始制作。
- 01
先读源文件
确认 Homepage、Course card 和现有 color.brand 令牌，再决定修改范围。
- 02
组件不拆平
三张课程卡继续使用同一个组件，差异只留在内容和状态上。
- 03
修改后回读
重新检查页面、组件实例和令牌引用，避免只看预览图判断完成。
Before / After
差别不靠形容词，直接看交付怎么变。
- 设计事实
- Before根据截图猜布局
- AfterPenpot 源文件与当前选区
- 颜色
- Before在图层里重复写色值
- After统一引用 color.brand
- 交付
- Before一张不可继续修改的图
- After页面、组件、令牌与回读记录
实际产成品 / 可操作预览
Morrow 报名页已经留在 Penpot 源文件里。
预览内容
中间是最终页面，左右分别展示图层与令牌。切换视图可以检查页面、组件和 Design Tokens 是否仍属于同一份设计源。
CASE OUTPUTpenpot-workflow
AFTER WORK / LEARN TOGETHER
把下班后的两小时，
留给一直想学的事。
每周二、四晚小班线下课程本月开放报名
从土坯开始完成第一只杯子。
周二 19:30用一条街的观察写成完整故事。
周四 19:00练习弱光、距离和现场判断。
周四 19:30SELECTED COMPONENT
02 / WRITING城市短篇写作
用一条街的观察写成完整故事。
周四 19:00- 布局
- Auto layout / vertical
- 实例
- 3 on Homepage
- 状态
- default / featured
:root {\n --color-brand: #315cff;\n --color-ink: #171a1d;\n --surface-paper: #f1f2ed;\n --border-quiet: #cdd1cb;\n}
为什么能相信它
修改后的页面、图层和令牌可以再次读取
READ → MODIFY → READ AGAIN
执行门槛
没有真实 Penpot 文件和可读 MCP 上下文时，流程明确停止，不用本地页面伪装交付。
- 先读取文件名与当前页面
- 检查组件、图层和令牌
- 修改后重新读取
- 伴随代码不替代 Penpot 源文件
令牌映射
设计令牌保留名称、别名和语义，再有意映射为 CSS 变量、Tailwind 主题或 TypeScript 对象。
- 先检查已有令牌
- 保留语义和别名
- 优先兼容 W3C DTCG
- 令牌缺口与实现缺口分开报告
完整方法
修改前先读取 Penpot 文件的真实结构
- 01
验证连接
确认当前文件、页面和 MCP 上下文真实可读，先做只读检查。
- 02
读取结构
列出页面、选中图层、组件、库和 Design Tokens，再判断修改范围。
- 03
声明变更
对广泛或可能破坏结构的改动，先说明准备修改的对象和边界。
- 04
在源文件中执行
通过真实组件、图层和令牌修改设计，代码只作为伴随产物。
- 05
重新读取验证
修改后再次列出受影响对象，确认页面、组件和令牌与请求一致。
交付边界
需要目标文件和修改意图，结果仍留在源文件
输入
- 已连接的 Penpot 文件与当前页面
- 组件、图层、令牌和库
- 检查、生成、重构或同步意图
输出
- 可继续编辑的 Penpot 设计结构
- Design Tokens 与代码变量的映射
- 页面、组件、图层和令牌变更记录
核心能力真实文件上下文检查组件与图层维护Design Tokens 检查与映射设计到代码代码到设计
如何调用
打开目标文件后调用
示例任务
读取当前 Penpot 页面，先列出组件、图层和 Design Tokens，不要修改。
调用方式
查看公开源码 $penpot-workflow