Skip to content

Add Figma MCP skill#80

Draft
neubig wants to merge 8 commits intomainfrom
add-figma-skill
Draft

Add Figma MCP skill#80
neubig wants to merge 8 commits intomainfrom
add-figma-skill

Conversation

@neubig
Copy link
Contributor

@neubig neubig commented Feb 27, 2026

Summary

Adds a Figma MCP skill plus companion README documentation for installing the remote Figma MCP server and using it from OpenHands.

Fixes #81

Details

  • Keeps SKILL.md short and decision-oriented for progressive disclosure
  • Expands README.md with concrete installation, usage, and troubleshooting guidance
  • Registers the skill in marketplaces/default.json
  • Clarifies that the MCP server reads Figma data, while OpenHands uses that data to generate code or answer design questions

Testing

Documentation/skill change - no automated tests were added.

Validation completed:

  • Claude Code Compatibility GitHub Action: ✅ passed
  • Tests GitHub Action: ✅ passed
  • Local targeted validation: uv sync --group test && uv run pytest -q tests/test_skills_have_readme.py tests/test_workflow_sync.py tests/test_sdk_loading.py

Evidence

Documentation and validation evidence:

  • Verification link for this agent work session: View conversation
  • The branch now uses one consistent install command, clarifies when OAuth happens, and includes concrete example prompts for multiple Figma workflows.

Live Figma/OAuth evidence is still pending manual verification.
Full end-to-end proof still requires a Figma account plus a browser session that can complete the Figma OAuth flow, which is not available in this environment. The PR should stay in draft until that verification is collected.

Manual verification steps:

  1. Run openhands mcp add figma --transport http https://mcp.figma.com/mcp
  2. Start a fresh OpenHands session so the new MCP server is loaded
  3. Prompt OpenHands with a Figma URL such as Generate a React component from this Figma frame: https://www.figma.com/file/ABC123/MyDesign?node-id=1-2
  4. Complete the OAuth flow when the first Figma MCP tool call opens your browser
  5. Verify the agent can read the referenced frame data and respond using the retrieved design context

Checklist

  • CI passing
  • README and SKILL.md are compact and aligned
  • Review threads addressed
  • Live Figma/OAuth evidence gathered
  • Ready for human review (awaiting manual OAuth-backed verification)

neubig and others added 2 commits February 27, 2026 13:31
Add a new skill for installing and managing the Figma MCP server,
which provides tools to interact with Figma designs directly from
OpenHands using OAuth authentication.

Co-authored-by: openhands <openhands@all-hands.dev>
The URL was incorrectly pointing to https://figma.com/mcp/sse but the
official Figma documentation specifies https://mcp.figma.com/mcp

Reference: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/

Co-authored-by: openhands <openhands@all-hands.dev>
@neubig neubig marked this pull request as ready for review March 1, 2026 13:19
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 Needs improvement: Critical inconsistency between installation commands and architectural issues with skill structure. See inline comments for details.

@neubig neubig marked this pull request as draft March 1, 2026 13:28
Co-authored-by: openhands <openhands@all-hands.dev>
@neubig neubig marked this pull request as ready for review March 2, 2026 04:47
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 Needs improvement: Installation commands contradict each other and will break for users. The previous "fix" did not resolve this.

@neubig neubig marked this pull request as draft March 2, 2026 12:21
- Fix URL inconsistency: use official https://mcp.figma.com/mcp URL in both files
- Update description to clarify read-only access
- Apply progressive disclosure: slim SKILL.md to ~15 lines, move details to README.md
- Remove content duplication between files
- Add Usage and Troubleshooting sections to README.md

Co-authored-by: openhands <openhands@all-hands.dev>
@neubig neubig marked this pull request as ready for review March 2, 2026 12:30
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 Needs improvement: Same data consistency issue persists - installation commands don't match across the PR.

@neubig neubig marked this pull request as draft March 2, 2026 12:33
- Updated PR description to use correct installation command
- Clarified in README.md that OAuth is handled automatically by the
  server at runtime, not via an installation flag
- All installation commands now consistent across PR description,
  SKILL.md, and README.md

Co-authored-by: openhands <openhands@all-hands.dev>
@neubig neubig marked this pull request as ready for review March 2, 2026 12:58
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Acceptable - Structure is clean and follows conventions. Core functionality looks solid, but documentation could be more precise about what actually happens when using this skill.

@neubig neubig marked this pull request as draft March 2, 2026 13:01
@neubig neubig marked this pull request as ready for review March 2, 2026 13:01
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Acceptable - Structure is clean and follows conventions. Core functionality looks solid, but documentation could be more precise about what actually happens when using this skill.

@neubig
Copy link
Contributor Author

neubig commented Mar 2, 2026

This should not be marked ready yet because it requires testing with oauth, which a human needs to do.

@neubig neubig marked this pull request as draft March 2, 2026 16:02
@neubig neubig marked this pull request as ready for review March 2, 2026 18:17
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Acceptable - Clean structure, follows conventions. Two minor clarifications would improve user experience.

@neubig neubig marked this pull request as draft March 2, 2026 18:22
- Clarify why restart is required (MCP servers initialized at session startup)
- Fix OAuth troubleshooting guidance (browser session, not re-running mcp add)

Co-authored-by: openhands <openhands@all-hands.dev>
@neubig neubig marked this pull request as ready for review March 3, 2026 12:40
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Acceptable - Functional skill that follows repository conventions, but documentation has clarity gaps that will cause user confusion. The installation works, but users will struggle to understand the actual workflow.

@neubig neubig marked this pull request as draft March 7, 2026 19:24
@neubig neubig marked this pull request as ready for review March 7, 2026 20:41
Copy link
Contributor

@all-hands-bot all-hands-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Acceptable - Clean structure that solves a real problem. Documentation over-emphasizes code generation when the tool has broader capabilities. See inline comments for specific improvements.

@neubig neubig marked this pull request as draft March 7, 2026 21:33
Co-authored-by: openhands <openhands@all-hands.dev>
Copy link
Contributor Author

neubig commented Mar 19, 2026

Follow-up context-layer investigation for this PR:

The first small slice I tackled is tightening the context-layer's Figma OAuth path by adding provider-specific refreshUrl support plus regression coverage for the Figma managed-connector registration defaults. That should make later end-to-end evidence stronger because the context-layer side now matches Figma's documented refresh endpoint (/v1/oauth/refresh) instead of assuming refreshes always go back to the token-exchange URL.

I didn't open a context-layer PR here because the request was to investigate and start follow-up work, not to open one automatically.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create Figma MCP skill

4 participants