feat: Figma CodeConnect and MCP documentation and enablement

[LinKCoding]

Overview

• Adds a code-connect folder in /packages
• Moves CLI generated Code Connect files inside the code-connect
• Adds a MCP section to storybook and includes stories for Figma MCP and code connect usage

PR Checklist

• Related to designs:
• Related to JIRA ticket: GM-1194
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

1. Go to Meta/About /?path=/docs/meta-about--docs
2. Click on the MCP card (and see that it links to the right page)
3. Check the info
4. Click on the new Figma MCP and Code Connect pages
5. Check that the info is correct
6. (Optionally) Go to Gamut Figma page
7. Click around in Atoms and see that code connect looks (mostly?) accurate
8. ...
9. Finish and do a celebratory dance

—-
Would love feedback on:

1. Organization of CodeConnect Atoms in particular
2. Rules used for Cursor + Copilot
3. Thoughts on the info provided in docs (anything else come to mind that we should add?)
4. If certain files aren't necessary, e.g. the landing page example benchmarks

PR Links and Envs

N/A any changes are reflected in Storybook.
The code-connect directory isn't part of the gamut-kit package.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6be882c

---

☁️ Nx Cloud last updated this comment at 2026-01-22 16:00:51 UTC

[codecademydev]

📬 Published Alpha Packages:

@codecademy/styleguide@78.5.6-alpha.9a28d1.0

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://69724a4dc5414500db3f7c38--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69724a4dc5414500db3f7c38