feat: add get_node_screenshot tool for Figma integration

[yinvoke]

I have incorporated a tool named "get_node_screenshot" to enhance the visual effects of design mockups. This tool aids the model in more precisely rendering pages and improves the fidelity of mockup restoration, particularly in cases where r third-party components are utilized or automatic layout is unavailable.

example:

[GLips]

Thanks for the contribution — this is a clean implementation and the approach (base64 ImageContent) is correct per the MCP spec.

I'm going to close this for now, but I want to explain why and see if we can collaborate on a better solution.

Why not a separate tool

The server is intentionally designed around a minimal tool surface: one tool to get structured design data, one to download images. Adding a screenshot tool changes the decision model for LLMs — they now have to decide when to pull a screenshot, and in practice many models will default to doing it on every request, burning context and Figma API calls for unclear benefit. I want to keep the tool surface simple.

Where screenshots would be valuable

There's one case where I think visual data fills a real gap. The server collapses frames whose entire subtree is vector nodes (rectangles, lines, paths, etc.) into a single node — this keeps the output small, but it means full illustrations, icons, and vector-based background art get reduced to just a name, size, and position. If that top-level frame is named something like "Frame 47," the model has no idea what it's looking at.

A screenshot of those specific nodes would genuinely help. But rather than a separate tool that the model calls ad hoc, the better design is probably to embed that information into the get_figma_data response itself — e.g., an inline image or a flag on collapsed SVG containers that says "this node's visual content was simplified." That keeps the one-tool workflow intact and puts the information where the model is already looking.

What were you solving for?

Looking at your screenshot, it looks like there may be a vector illustration in the center of the design. Was the collapsed-SVG problem what you were running into? Or was there a different case where the structured data wasn't giving the model enough to work with?

I'd love to understand the specific pain point — if we can nail down the problem, I think we can find a solution that's baked into the data itself rather than adding a new tool.

[yinvoke]

To enhance the AI's visual output, I will provide additional screenshots in the following two scenarios:


1. Reusing UI Components: When reusing UI components, the AI may struggle to effectively combine the styles of Figma nodes with the components themselves, leading to significant discrepancies in the final visual presentation. In such cases, adding a screenshot can help the AI better interpret the visual context and improve the accuracy of the page implementation.
   
2. Legacy Design Drafts: While I can instruct designers to adhere to automatic layout rules for future designs, many previous design drafts were not created with these rules in mind. In the absence of image-based guidance, the AI may rely too heavily on the Figma file nodes, causing a noticeable gap between the final implementation and the intended visual design. Therefore, I will attach screenshots to assist the AI in making the necessary adjustments.
   
   Through extensive testing, I’ve found that providing an image for the AI to understand and using nodes to facilitate page implementation consistently yields better results. This method is in line with Figma's official MCP, though I prefer using Figma-Context-MCP due to its flexibility, as the official MCP requires frequent logins.
   
   Additionally, the sequence and necessity of invoking tools can be managed through skills or rules. I believe screenshot tools offer a more efficient solution for developers aiming to achieve complex page designs.