No coding required! How to import Figma designs into Claude and apply them to your Shopify theme.

I actually tested Claude, which has been getting a lot of attention lately, from design creation to theme building on Shopify!
By leveraging the AI assistant Claude and MCP (Model Context Protocol), you can directly apply Figma designs to your Shopify theme without any coding.
This article will explain the specific steps involved.

What you can do
- Create designs in Figma simply by providing text instructions.
- Directly reflect the Figma design in the Shopify theme (Liquid / CSS)
- Add and customize sections (Heroes, Cards, Sidebar, etc.)
- Addition of items that can be set from the Customizer (color, text, image, etc.)
- Real-time corrections while showing screenshots

Not subject to verification
- Creating a completely new theme from scratch (a base theme is required)
- Shopify app feature development
- Customization of complex payment and membership functions

What we did this time was purely a design-related implementation.
This does not include the addition of new features through app installation.

Required tools
• Claude Cowork (Pro plan or higher subscription required)
Figma
Shopify

Preparation
- Install the Claude desktop app.
• Create a Figma account (a free account is available).
- Create a copy of the test theme in your Shopify store (do not directly edit the production theme).
- Install Figma MCP and Shopify MCP plugins in Cowork.

First, install the Claude desktop app and open the app screen.
If you are using a Pro plan or higher, a tab to switch to Cowork will appear when you open the app.

Next, search for "Figma" in the Cowork connector search and install the Figma MCP plugin.

Similarly, search for "Shopify" in the Cowork connector search and install the Shopify MCP plugin.

We will use the Figma MCP that we connected earlier.
First, copy the link to the team's design file that you have already created in Figma.
By copying the page link of the page you want to use and submitting the prompt, we can create a design on your desired page.

Point 💡 How to write prompts
You can also create the prompts you use with Claude.
If you provide the desired tone and style, sections, and reference sites, we can create a design system tailored to your project.
If you simply pass that information to Cowork, it will generate a design that is very close to your vision on the first try.

Use Shopify MCP to select the store where you want to display the design you created in Figma.
After that, you specify the images extracted from Figma and the theme you want to apply, and it will actually perform the customization for you.

We will make minor adjustments while viewing a preview of the completed theme.
In the first attempt, it seems that the image provided is rarely reproduced perfectly.
Therefore, it is necessary to communicate your specific requests for each block and have them made necessary revisions.

In this test, we were able to complete everything from design to implementation using only text instructions with the combination of Claude Cowork + Figma MCP + Shopify MCP!
However, there were still many things that needed to be checked by a human, such as whether it was okay to use the created design as is, and how the implemented customizations worked.

At this point, it seems best suited for use by engineers and designers (who can judge the quality of the created work) to reduce time and costs.

The setup process is relatively easy, so if you're interested, try installing the desktop app and giving it a go!