Design MCPs

Tested design MCPs so we can use AI to get two-way translation between design and code.

Paper

Paper The best option for code to design. Produced very accurate results. Fell short on complex CSS like 3D transforms. No local files or export.

Pencil

Pencil did a nice job, but not as good as Paper. Can’t pull in remote image assets. Couldn’t handle 3D CSS transforms at all. Has local file support; recommends storing design files in Git alongside code files. Has Figma import but didn’t work that great.

Figma

Tested several Figma MCPs. None are 100% there because Figma uses a custom renderer that doesn’t use actual HTML or CSS. This causes design details to get lost in translation.

• Figma CLI MCP - best, no complicated setup or API key required

• Figma Console MCP - seems to be the same as above but requires complicated setup. Comes with design helpers that I don’t use but might be worth exploring more.

• Figma MCP via Browser MCP - requires a browser MCP to work. Haven’t tried it.

• Figma Official MCP - don’t use. It’s super limited. Confusing. Has multiple connection types with different features.