Justin Figma 设计 (/jfd)

jfd) 是做什么的？

此工作空间是一个以 Figma 为先的协作工作空间，而非应用程序代码库。此技能是编排层：工作空间记忆、Figma Console 工作流、设计系统纪律和基于证据的可视化 QA。除非用户明确要求设计转代码，否则不要生成 React、HTML 或 CSS。

必需的 MCP 伴侣

所有 Figma 工作均依赖 Figma Console MCP (user-figma-console)：使用 figma_execute 进行检查和修改， figma_take_screenshot 用于获取证据，figma_get_status 和 figma_reconnect 用于桌面桥接连接。写入工作需要本地/NPX 服务器连接桌面桥接；托管远程模式为只读。在编写任何脚本前，请阅读 references/figma-execute.md，以及工作空间文件 docs/tools/figma-console.md（位于工作空间根目录）以了解连接详情。在没有 MCP 连接的情况下，不要将 /jfd 视为独立的 Figma 编辑器。

从设计中解析事实，而非此技能

此技能提供程序，而非事实。设备尺寸、字体、间距和 样式偏好会随时间变化；目标文件始终是最新的。按此顺序解析任何所需值（尺寸、字体、间距、颜色、名称或约定）：

1. 目标文件。 测量实际的框架、文本、令牌或组件。
2. 所属家族。 同一部分中的同级框架、状态和屏幕。
3. 工作空间记忆。 文件的 docs/files/<alias>/design.md 和 docs/preferences.md，尊重其“最后验证”日期。
4. 用户或当前查询。 询问用户，或查找当前的平台指南。永远不要相信记忆中的设备尺寸或旧的默认值。
5. 写回。 将解析的值连同今天的日期记录在目标 design.md 中，以便下一个会话可以信任它。

永远不要从本技能的文本中解析项目值。

两种工作流

• 编辑现有文件（默认）：存在可测量的对象。 遵循下面的完整循环，永远不要假设根框架尺寸——测量实际正在编辑的家族根框架。
• 从头开始：没有可测量的对象，因此解析顺序运行在步骤 3-5。阅读 references/starting-from-scratch.md。 在构建前与用户确认根框架尺寸、排版和主题支持，然后立即创建文件的 design.md，以便后续每个会话都能测量而非猜测。

初始化空工作空间

当工作空间缺少 docs/preferences.md 和 docs/FILES.md 时，使用 初始化模式。初始化是本地的、幂等的脚手架；它从不打开 Figma、调用 MCP 或修改画布。

1. 当宿主缺少斜杠别名时，将 jfd init 与 /jfd init 同等对待。
2. 在写入前列出缺失的脚手架路径。在非空工作空间中，先请求确认。永远不要覆盖现有文件、目录、符号链接或技能安装。
3. 仅从本技能的 assets/templates/ 复制缺失的文件。
4. 在适当时，将缺失的技能副本安装到 .agents/skills/justin-figma-design/（规范路径）和 .cursor/skills/justin-figma-design/。
5. 可选地运行 scripts/init_project.py（Python 3，仅限标准库）进行批量处理；代理文件工具仍是主要路径。
6. 验证脚手架，然后请求 Figma 链接或文件密钥。永远不要发明凭据或文件数据。

详细信息：references/getting-started.md。

选择操作模式

非 YOLO 是默认模式。

• 非 YOLO 用于生产工作：共享模式、屏幕、组件、变量、主题、响应式更改以及任何未明确声明为可丢弃的范围。
• YOLO 仅当用户明确说出“YOLO”、“快速演示”、“快速原型”或类似词汇，且范围是单个命名的看板或状态时使用。
• “制作组件”、“更新库”、“支持亮色和暗色模式”或共享界面元素的更改，即使很小也绝不属于 YOLO 范围。
• 在用户明确要求实施或执行之前，保持在计划模式。

YOLO 减少了库开销；它并未移除安全性或可视化 QA。当发现共享界面元素、可复用模式、多个相关状态、亮色/暗色或响应式传播、主组件更改、自动布局重构、业务规则更改或第二个看板时，升级到非 YOLO。完整路由器与检查清单：references/modes-and-workflow.md。

在任何 Figma 修改之前

1. 读取工作空间根目录下的 docs/preferences.md 和 docs/FILES.md。
2. 解析目标文件别名并读取其 docs/files/<alias>/design.md；对于屏幕、流程或组合表面工作，请阅读 screens.md。
3. 读取最新的相关会话笔记。当前有效的 design.md 和当前权威优先于过时的历史笔记。
4. 确认活动的 Figma 文件、页面、节/框架和权威。在已连接的文件中重新搜索节点 ID、组件、变量和样式；来自先前会话的 ID 是过时的证据，而非授权。
5. 在进行共享更改之前，盘点整个相同框架/状态家族：亮色/暗色、展开/折叠、嵌套的活动路由、覆盖层、响应式变体以及有意移除的状态。
6. 测量正在编辑的家族的根框架。永远不要假设设备尺寸。
7. 在修改文本之前，检查样式化字体段并加载当前字体。通过解析顺序选择任何替换字体——测量的文本，然后 design.md，然后用户——永远不要来自本技能。

如果目标文件没有 design.md，请先完成一个只读调查基线。如果无法验证活动文件或权威，请停止并询问。

通用图形

在放置图标或导入的图像之前，请读取工作空间根目录下的 docs/assets/README.md 和 docs/assets/icons.md。优先使用现有的文件组件和项目批准的图标来源；在接受新图形之前检查矢量边界、大小和主题对比。头像仅由用户提供；切勿生成它们。

非 YOLO 约定

• 首先搜索权威的本地实例/组件，然后是已启用的库，再是更广泛的库搜索。仅在记录缺失后创建。
• 为批准的范围构建最简的一致设计系统：首先是变量和模式，然后是样式和组件，最后是屏幕实例。
• 对于结构/视觉状态使用变体，对于内容灵活性使用组件属性。优先使用实例、实例交换和受控包装器，而非分离的重绘。
• 使布局意图清晰：语义化名称、有意义的层级、子元素相关时使用自动布局、令牌绑定、组件描述以及已记录的可访问性/状态行为。
• 将亮色/暗色视为变量模式矩阵，而不是两个硬编码的屏幕。请参阅 references/variables-and-theming.md。
• 在单次操作中对整个相关屏幕家族应用共享更改，然后检查每个成员。当同级屏幕未更新时，单框架修复是不完整的。

在复杂工作前阅读 references/components-and-design-system.md 和 references/layout-and-autolayout.md。

布局规则

为每个轴独立选择 Hug、Fill、Fixed 和 min/max：Hug 用于内容驱动的堆叠和控件；仅当子元素在自动布局父容器中具有可用的有意义空间时才使用 Fill；Fixed 用于有意的结构边界（测量的屏幕根、图标框、CTA、校准的壳）；min/max 用于批准的响应式限制。使用嵌套自动布局、内边距和间距来编码关系——绝不要使用保留旧坐标的不可见间隔框架。仅将绝对定位/忽略自动布局的层次用于有正当理由的覆盖层、界面元素、装饰或在目标 design.md 中记录的异常。调整容器大小后，审计拥有宽度的后代；更宽的父级并非完整的重新布局。详细信息：references/layout-and-autolayout.md。

执行与验证

检查，运行一个小的针对性 figma_execute，返回每个修改的 ID 和有用的几何数据，然后立即使用 figma_take_screenshot 捕获屏幕截图。当路由依赖于活动文件时，保持写入和截图的顺序。QA 结合了测量的结构与视觉证据——酌情捕获：(1) 聚焦的组件裁剪图，(2) 完整看板，(3) 相关家族或部分概览。检查共享边缘、间距、裁剪、溢出、长文本行为、图标/矢量边界、对比度、排版、隐藏控件、语义状态、相关状态一致性、硬编码值、未解析的绑定以及亮色/暗色解析。尽可能使用 Figma Check 设计；否则运行等效的结构和手动检查。

将失败的 figma_execute 视为可能部分执行，直到检查目标为止；切勿盲目地重新运行失败的创建或重新父级脚本。恢复契约：references/figma-execute.md。完整检查清单：references/qa-and-recovery.md。

结项

• 为每个修改的看板和必需的家族成员捕获最终屏幕截图。
• 记录有意为之的例外、占位符、未解决的问题和范围边界。
• 当权威、组件、变量、屏幕、根尺寸或漂移发生变化时（包括会话期间解析的任何值），更新目标 design.md 和 screens.md。
• 将包含日期的笔记写入 docs/sessions/ 目录，用于有意义的工作。

尊重目标文件在其 design.md 中记录的保护措施：锁定或受保护的原始文件、必须保持移除的样式或状态、必须保留的副本和语言。切勿在项目记忆中存储凭据或私有令牌。

有关本技能背后的外部指导，请阅读 references/research-sources.md。