ui4 是 Payload CMS 仓库中的手动调用技能，用于按 Figma 设计为 Payload UI 组件换肤。使用方式为 /ui4，且必须提供 Figma URL，未提供时需先询问。
主要流程：先做图标扫描，用 grep 检查组件图标导入并对照 packages/ui/src/icons/ 与 Figma 图标库，缺失图标需向用户确认；随后进行 SCSS 到 CSS 迁移，将 $var 转为 var(--token)、移除 @use/@import、内联 mixin、改用 index.css 并包裹在 @layer payload-default 中，同时把旧 --base 间距迁移到 --spacer-* 令牌，注意 &__ 与 &-- 在 CSS 中需改为扁平 BEM 选择器。
接着用 Figma 元数据与设计上下文分析全部变体（State、Validation、Selected、Disabled、Read Only、Size 等），建立变体矩阵后按令牌重写样式，颜色与间距不得猜测，需读取 spacing.css、colors.css、typography.css、radius.css、utilities.css，焦点态使用 --accessibility-focus-color 与 :focus-visible。
之后确保测试集合覆盖所有变体，用 pnpm run dev v4 启动开发服务器，通过 Playwright 截图循环比对 Figma，处理 beforeunload 弹窗，最后请用户确认并编写变体 E2E 测试。限制：需 Figma 访问权限，缺失图标或访问失败时应停止并询问用户；具体收费、平台与效果资料未提供。