Claude Code plugin

The plugin in the Fanta-JS repository provides a ready-to-use MCP connection, a /design command, and three skills for building and checking designs. It talks to the running Fanta desktop app through /Applications/Fanta.app/Contents/MacOS/fanta --mcp-stdio. See the plugin README for what it configures.

Install

1. Install Fanta in /Applications, launch it, and open a design.
2. In Claude Code, run:

claude plugin marketplace add jeanc18rlos/Fanta-JS
claude plugin install fanta@fanta

3. Confirm the fanta MCP server is connected, then try:

/design Add a 320×180 card with a heading and primary button to the current page.

If Fanta is installed elsewhere, update the executable path or connect directly.

The local server exposes 13 tools, including design-system inspection, FNX and managed JSON validation, asset import, comment review, agent activity, and canvas edit and screenshot tools. batch_design now carries 43 operations, including grid layout, fill and effect stacks, vector shapes, componentizing copies, and variant-set maintenance. A call previews its operations one by one while remaining one undoable transaction. The plugin teaches Claude to inspect the live design, build one visible section at a time, verify it, and rely on autosave.

The bundled MCP configuration uses the default /Applications/Fanta.app path. For a different app location or user-data directory, use the exact connection command copied from the running Fanta instance and update the plugin's MCP configuration.

Older plugin versions pointed to an HTTP service on :3846 and named tools that the current app does not expose. The plugin has since moved from the fanta-docs marketplace to Fanta-JS, and copies installed from fanta-docs no longer update. If you added that marketplace, remove it, then follow the install steps above:

claude plugin uninstall fanta@fanta-docs
claude plugin marketplace remove fanta-docs