Figma vs. Claude Design: From UI Screenshot to Functional Prototype

Both Figma and Claude Design allow you to go from a design idea to a fully functional prototype. And the cool thing is that you can feed the tools a screenshot of your UI and ask the tools to turn it into a coded prototype.

In this article, I will share the process you need to follow to turn a screenshot into a prototype as well as some interesting nuances of both Figma and Claude Design.

The experiment

For my experiment, I’ll use a high-fidelity mockup of a language learning app. It will be a mockup of the app’s home screen, featuring a few content blocks such as current language level, learning progress, active lesson, and a few key activities.

Mockup of a language learning app that will be used as an example.

As you can see, the app design is very basic (it was created using simple colors and fonts, as well as cards and badges as content containers). Yet it features one nice…