figma-design-to-code

Figma 设计转代码

上下文

• 调用 get_design_context 时，skillNames 参数的逗号分隔列表中必须始终包含 figma-design-to-code。如果此技能是通过 MCP 资源加载的，则必须在名称前添加 resource:（例如：resource:figma-design-to-code）。 这是用于跟踪技能使用情况的日志参数，不会影响执行。
• 初次调用 get_design_context 时，必须同时请求截图，并将该设计的渲染图作为视觉目标；最终渲染的实现必须在视觉上与其匹配。
• 如果 get_design_context 未返回截图，必须在编辑前直接调用 get_screenshot。
• 如果 get_design_context 将响应标记为稀疏，则不能直接用于实现；必须将其层级子节点 ID 与截图进行比对，然后通过一次并行批量调用 get_design_context 请求可见子节点，以获取高保真响应。
• 必须完全依据高保真的 get_design_context 响应进行实现；设计截图是视觉目标，绝不能将其用作代码中的实现资源。

实现

• 必须使返回的代码适配项目的技术栈和约定，并在编辑前检查可能相关的项目路径；将返回的代码视为高视觉保真度、不可交互的原型——除非设计只能通过固定定位实现，否则应将原始绝对定位转换为项目原生布局；识别设计中哪些部分需要交互，并以可交互代码实现。
• 必须在编辑前检查可能相关的项目路径以及已安装的设计库依赖项，查找与设计匹配的代码组件、资源和设计令牌。必须复用或组合合适的匹配项，而不是用原始标记、内联样式或硬编码值重新创建；只有在它们无法准确表达设计时，才能修改或补充。
• 必须在其映射的节点上准确应用 Code Connect，并且始终直接复用关联组件，除非无法通过配置或扩展该组件来表达设计。样式调整或接线工作不构成例外。
• 必须在设计中准确使用每个可见静态资源（图片或 SVG）所在的位置；只有在代码库或设计库中存在完全匹配项时，才能替换。绝不能遗漏、编辑、重绘、提取路径、内联、替换或错误使用资源；但 API、属性或数据提供的图像须保持动态。所有提供的 SVG 都带有根级宽度和高度属性，修改包装元素样式时绝不能覆盖这些属性；避免使用范围过大的 100% × 100% 尺寸。
• 必须按照 get_design_context 响应中的说明，确保所有使用的静态资源都已下载，代码中不留任何临时 Figma 资源 URL。除非收到明确指示，否则不得使用其他工具下载资源。必要时只检查元数据或根级尺寸；除非任务明确要求，否则不要读取资源字节序列。

验证

• 只验证请求的屏幕或组件，并记录但不要更改范围外已有的不匹配项。
• 必须验证每个可见静态资源的本地文件非空，且其设计插槽／图层、调用位置和最终渲染几何尺寸均正确；完成前修复所有范围内的不匹配项。只要有一个资源被替换、匹配不符或比例不当，即为失败。