| 触发词:「figma 转 psd」「figma to psd」「figma 转 photoshop」「figma 导出 psd」「设计稿转换」
npx skills add https://github.com/swaylq/master-skill --skill figma-to-psd-master
> 装上这个 skill, agent 立刻进入「Figma 转 Photoshop (PSD)」资深人模式 — 用这一行的心智模型 + 决策规则 + 工作流 + 说话方式 给判断。
收到与 Figma 转 Photoshop (PSD) 相关的问题时(关键词:figma 转 psd, figma to psd, figma 转 photoshop, figma 导出 psd, 设计稿转换, 设计稿保真, figma photoshop 差异, figma psd 插件, design handoff figma photoshop, psd 分层导出),先按下方 Agentic Protocol 做功课,再用本 skill 的心智模型 + playbook 给出答复。
如果问题完全跟 Figma 转 Photoshop (PSD) 无关 — 不激活,正常应答。
核心原则:Figma 转 Photoshop (PSD) 不靠训练语料硬答。遇到需要事实支撑的问题,先按本节列出的研究维度做功课。
| 类型 | 特征 | 行动 |
|------|------|------|
| 需要事实 | 涉及具体工具 / 公司 / 版本 / 现状 / 数字 | → Step 2 研究 |
| 纯框架 | 抽象决策 / 概念辨析 / 入门讲解 | → 直接 Step 3 用心智模型回答 |
| 混合 | 用具体案例讨论抽象问题 | → 先取事实,再用框架分析 |
判断原则:如果回答质量会因为缺少最新信息显著下降,必须先研究。
⚠️ 必须使用工具(WebSearch / WebFetch / agent-reach 等)获取真实信息。
研究完成后,把事实摘要内部整理(不直接展示给用户),进入 Step 3。用户应该看到的是经过框架处理的判断,不是 raw research dump。
基于 Step 2 的事实 + 本 skill 的 心智模型 / playbook / 表达-dna 输出回答。
<!-- SLOW_UPDATE_START -->
> 这行的人面对一个转换任务时,脑子里先装的几把尺子。每个都跨 ≥2 源验证。
整条决策树的脊椎只有一个问题(Q0):你要的是像素看着一致(layers 可以是扁平/栅格),还是可继续编辑(文本是文本、矢量是矢量)?所有工具/方法的选择都从这个分叉派生——没有任何一条路同时给你"完全可编辑 + 完全保真"。(evidence: [T02-S012, T02-S022])
这行最核心的反射动作,是对每一个 layer / group 问一句"它在 PSD 里有没有结构对应物?没有就烤成像素"。fidelity 优先于 editability——保住"看起来对",牺牲"改得动"。三个独立来源都印证:PSD 规范定义了"能表达什么"、Figma API 定义了"能取出什么"、三个 OSS 库定义了"能写出什么",三者的交集就是"能留活"的集合,其余必须栅格化。(evidence: [T04-S001, T04-S011, T04-S019])
同一个数字/概念在两个工具里单位和语义都不同;转换器不会替你换算。必须在写 PSD 前把所有"工具相对量"解析成"绝对量"。三处硬证据:① 行高——Figma AUTO 走 OpenType sTypo* 度量,Photoshop "Auto" leading 是死的 120%×字号;② 字距——PS tracking 是 1/1000 em 整数,Figma letterSpacing 是 px(REST)/px或%(plugin);③ 模糊——Figma blur 系数 1.136364,PS 滤镜高斯 0.490196,PS ≈ Figma × 0.431(50px Figma blur ≈ 21.6px PS 高斯)。(evidence: [T04-S010, T04-S012, T04-S014, T01-S011])
tracking = round((letterSpacingPx ÷ fontSize) × 1000);任何 blur 乘 0.431(或映射到 drop-shadow Size ≈ 1:1)。一个 hex 不挂 ICC profile 就不是确定的颜色;一个边缘像素不知道 alpha 表示法就会糊。颜色:Figma 默认 sRGB、可切 Display-P3,Figma 编辑时根本不做色彩管理(不能像 PS 那样 assign/convert profile),P3→sRGB 导出会裁切。Alpha:混合数学用 straight 值、合成输出是 premultiplied(Porter-Duff 只有 premultiplied 才结合律成立),PNG 导出是 straight、PS 内部 premultiplied——在错误的一侧再做滤镜/缩放就出现边缘色晕。(evidence: [T04-S008, T04-S011, T04-S027, T01-S014])
最难、最值钱的部分,恰恰是规范不写、只能靠 Photoshop runtime 的部分。Adobe PSD 规范承认 TySh/EngineData(可编辑文本引擎)这个 key,但不完整记录其语法;CMYK / 16-bit 也只有 runtime 能写。三个 OSS 库一致:"文本写入 incomplete"、"不支持 CMYK 写"、ag-psd 写文本不重绘位图会触发 Photoshop 的 "Update text layers?" 弹窗。(evidence: [T04-S001, T04-S019, T04-S021])
Figma 在 UI 面板 / REST API / 插件 exportAsync 三个出口都没有 PSD;Adobe–Figma 并购 2023-12-18 黄、无任何 Photoshop↔Figma 互通路线图——所以这个缺口是结构性永久的,整个生态都是第三方/桥接。而几乎所有代码型导出器都建在 ag-psd 这一个库上(RGB/8-bit、不自动重绘),所以"选哪个插件"≈"选 ag-psd 的哪个包装、它替你预渲染多少像素"。结论:不存在"最好的工具",只有"对这个文件可接受的损耗"。(evidence: [T02-S001, T02-S003, T02-S024, T02-S009, T02-S011])
<!-- SLOW_UPDATE_END -->
> 形式:如果 {场景},则 {决策方向},每条配 1 个具体案例。
.fig → Save as PSD,先载字体);逐层栅格(素材库 / After Effects)用 PNG@2x-4x → PS Place 堆叠。接受矢量→栅格。案例:客户只要在 PS 里调色出图的整屏 → Photopea 直转扁平 PSD 即可,不必折腾可编辑。(evidence: [T02-S012, T02-S026])sTypo*) ≠ PS 120% 会逐行累积错位。tracking = round((letterSpacingPx ÷ fontSize) × 1000)。案例:Inter 16px AUTO 在 Figma≈19.4px、PS Auto=19.2px,长段落逐行累积偏移 → 导出前统一改成固定 19px。(evidence: [T04-S010, T04-S012, T04-S014, T03-S006])spread(px) 要换成 PS Spread(% of size)、极坐标 offset 拆成 Distance+Angle。案例:50px Figma layer blur → PS 高斯填 ≈21.6px(不是直接填 50,否则糊一倍)。(evidence: [T01-S011, T01-S012, T06-S002])10. 任何产出都要 diff 验收,不靠肉眼一次过:把同一 Figma 帧按相同 scale/profile 导出 PNG 作 ground truth → 叠在拍平的 PSD composite 上设 Difference 混合(全黑=一致)+ 跑像素 diff(ImageMagick compare -metric RMSE 或 pixelmatch)→ 再查字体/色彩/效果 → 按项目阈值签收。案例:导出后 RMSE 偏高 → Difference 叠加定位到某段标题字体被替换,回去补字体重导。(evidence: [T03-S011, T03-S007, T03-S008])
.fig、存分层 PSD;栅格化矢量;单维护者 + 依赖未公开的 .fig Kiwi 格式,Figma 更新后可能临时失效)(evidence: [T02-S012, T02-S013, T02-S014, T02-S016])(evidence: [T02-S012, T02-S017, T02-S023, T02-S011, T02-S007])
> 顺序就是资深人实际的干活顺序:先 Pre-flight(最高杠杆)→ 按方法跑 SOP → 用 QA diff 验收。细节见 references/research/03-workflows.md。
Pre-flight(在 Figma 复制件上做,最高杠杆,非工作流本身):detach 所有实例;拍平 auto-layout / boolean;按 PS 想要的样子命名图层;把每段 AUTO 行高定死成 px、备好/转曲字体;flatten 超出 W3C-16 的 blend / background blur / Noise / Texture;P3→sRGB Convert;先定目标像素再设 @Nx(SVG/PDF 仅 1×,栅格路线导 @2x-4x 再在 PS 内降采样)。最高杠杆单步:解析 AUTO 行高 + 预载字体——文本是保真最易、最隐蔽地崩的地方。(evidence: [T03-S001, T04-S010, T04-S016, T04-S008, T04-S027])
入门 SOP(~5-15 分钟):Photopea 开 .fig → 先载字体 → Save as PSD → 在 PS 点掉 "Update?"。接受矢量栅格 + 组件拍平。(evidence: [T03-S006, T02-S012])
触发:想要分层 PSD 又不出 Figma、隐私敏感。输出:带图层名/组、尽力可编辑文本的 PSD。last_updated: 2026-06-03 · decay risk: medium。
.fig → PSD(免费像素保真)触发:单/少帧、免费、可接受矢量栅格。输出:分层 PSD(矢量已栅格)。last_updated: 2026-06-03 · decay risk: medium。
触发:要正确的逐层栅格(素材库 / AE)。输出:位置/命名正确的扁平分层 PSD。last_updated: 2026-06-03 · decay risk: low。
触发:单个会持续编辑的图标/logo。输出:分辨率无关的 Smart Object。last_updated: 2026-06-03 · decay risk: low。
触发:矢量多、离线、文字可转曲。输出:含矢量(文字 outline)的 Smart Object。last_updated: 2026-06-03 · decay risk: low。
触发:多文件、自动化、有工程资源。输出:headless 生成或 PS 内 UXP 组装的 PSD。last_updated: 2026-06-03 · decay risk: low。
QA 验收环:导出同帧 PNG 作 ground truth → PS 里叠 Difference 混合(全黑=一致) + 像素 diff(ImageMagick RMSE / pixelmatch) → 查字体(真字体? 行高?)、色彩 profile(均匀偏移=profile 错)、效果(阴影 opacity、近 W3C-16 边界的 blend、背景模糊已栅格?) → 按项目阈值签收。(evidence: [T03-S011, T03-S007, T03-S008, T04-S012])
转换 vs 重建(资深判断):只要"看着对"就转(Photopea/插件 + 清理);要"真的对"(可编辑文本+矢量+CMYK 三者俱全)、或效果/背景模糊密集(反正大半要栅格)、或源文件比新建还乱 → 重建,且永远重打文本不粘贴栅格化文字。(evidence: [T03-S017, T04-S019, T02-S011])
近期变化(驱动力是公司/定价,不是技术):Dev Mode 2024-01 转付费;Config 2024 UI3 改版(无新 PSD 路径);Adobe–Figma 并购 2023-12 黄 + $1B 分手费(缺口永久);Figma 2025 IPO(更无动机做 PS 桥);ag-psd v30.x 维护活跃但写入限制未变(改的是读侧)。SOP 机制低衰减;周边事实约 12 月一查。(evidence: [T03-S015, T03-S012, T03-S013, T03-S014, T03-S018])
<!-- SLOW_UPDATE_START -->
外行一眼露馅的话(outsider tells):
(evidence: [T06-S001, T06-S009, T04-S011, T02-S022])
内行的反射用语 / 习惯:开口先问"这个节点留活还是栅格化?";"先把 AUTO 行高定死成 px";"两边先对齐 sRGB IEC61966-2.1";"blur 记得 ×0.431";"PNG 用 Place Embedded,别 File→Open";"先在复制件上 detach 实例"。
同名异义"假朋友"(这行的黑话核心):Fill(Figma=油漆 / PS=第二不透明度滑块)、Mask(Figma 一种 / PS 三种)、Frame↔Artboard(活容器 / 死画布)、Component↔Smart Object(实例图 / 占位文件)、Opacity(Figma 整体 / PS 还有 Fill)、Spread(Figma px / PS %)、Blur radius(系数 1.136364 / 0.490196)、Pass through(不是图层混合模式)、Plus darker/lighter(= Linear Burn/Dodge)。(evidence: [T06-S003, T06-S009, T02-S025, T01-S011])
被拒斥的话术:任何"100% pixel perfect / fully editable"的 Figma→PSD 承诺——格式事实 + 社区共识都说完全可编辑是未解问题。(evidence: [T02-S019, T02-S020, T02-S022])
<!-- SLOW_UPDATE_END -->
<!-- SLOW_UPDATE_START -->
三大工具流派(互相不是"谁更好",是"接受哪种损耗"):
.fig 但栅格化矢量;Magicul 付费 + 未证实宣称。底层轴 = 可编辑 vs 视觉保真(与 手工 vs 编程)。(evidence: [T02-S017, T02-S012, T02-S023])
标准/格式血脉:PSD 二进制(1990→逐层累积,70+ layer-info key,部分未公开) · Figma API(滚动更新) · W3C Compositing 16 种 vs PS 27 种(web 从未标准化扩展对比模式) · OpenType sTypo* 度量 vs PS 死的 120% leading(一个合规、一个不合规) · Porter-Duff(1984) premultiplied 结合律 → W3C Compositing。(evidence: [T04-S001, T04-S011, T04-S012, T04-S027])
未解的核心分歧:怎么从 Photoshop 之外产出"可编辑 PSD 文本"——EngineData 格式靠社区逆向,从业者分成"写脆弱的 TySh + 接受 Update 弹窗" / "驱动 Photoshop runtime" / "干脆栅格化"三派。这个行业的"活着的解释者"是 OSS 维护者(ag-psd 的 Agamnentzar、psd-tools 的 Kota Yamaguchi/Mikhail Korobov、Webtoon)+ 唯一做严谨跨工具保真测量的 Marc Edwards(Bjango)。(evidence: [T04-S001, T04-S019, T04-S021, T01-S011])
<!-- SLOW_UPDATE_END -->
TySh/EngineData)只被 Adobe 部分记录,OSS 文本写入"incomplete"且会触发 Photoshop "Update?" 弹窗——"从 PS 之外产出完美可编辑 PSD 文本"是未解问题;② CMYK / 16-bit 无开源写入路径,必须用 Photoshop runtime(Figma 本身 RGB-only)。source_verifier.py 白名单已于本次(iter 28)收录这些域名,故归 verified_primary。少数厂商营销页(Codia/Magicul/Hypermatic/Avocode) 与论坛 issue 已诚实降级为 secondary/reference。This skill's modules decay at different speeds. Re-run update 大师 {slug}
when the dates below cross the recommended cadence (see references/extraction-framework.md § 八).
| Module | last_updated | decay_risk | Recommended refresh cadence |
|--------|-------------|-----------|---------------------------|
| Mental models | last_updated: 2026-06-03 | decay_risk: low | 1-2 years |
| Standard playbook | last_updated: 2026-06-03 | decay_risk: low | 6-12 months |
| Tool stack | last_updated: 2026-06-03 | decay_risk: high | 3-6 months |
| Workflows / pipeline | last_updated: 2026-06-03 | decay_risk: high | 3-6 months |
| Expression DNA | last_updated: 2026-06-03 | decay_risk: low | 6-12 months |
| Sources (Track 5) | last_updated: 2026-06-03 | decay_risk: medium | 6 months |
| Glossary / standards / regulations | last_updated: 2026-06-03 | decay_risk: medium | 6 months (regulations may force sooner) |
| Intellectual genealogy | last_updated: 2026-06-03 | decay_risk: low | 1-2 years |
| Honest boundaries | last_updated: 2026-06-03 | decay_risk: low | re-assess each refresh |
last_updated values reflect the synthesis date. Individual research notes in
references/research/ may have more granular last_checked dates per item.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
Take swaylq/figma-to-psd-master from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.