From Figma to a store with the skills and the MCP

A Smootify store is a Webflow site whose elements carry Smootify’s markup: a few Custom elements and custom attributes that wire them to Shopify. Going from a Figma file to that site has two halves: deciding what each layer becomes, and building it. Your agent does both, with two skills, and stops in between so a person can review the decisions in Figma. The Smootify MCP checks the work at each step against the same rules Smootify itself follows.

1. Set up your agent

Your agent needs three MCP servers and the skills:

• The Figma MCP, to read the file and write the annotations.
• The Webflow MCP, to build in the Designer.
• The Smootify MCP, to check the annotations and the markup. You sign in with your Smootify account.
• The skills, from the Skills page: the Figma annotation skill, the Figma to Webflow skill and the site audit skill.

It worked when your agent lists the tools of the three servers and knows the three skills.

2. Pick the design

Start from the Smootify wireframe kit, which has every page a store needs, or from the Figma file of a finished template, both on the Figma files page. Your own design works too: the annotation skill reads any Figma file, and asks about what it cannot settle.

It worked when you have one Figma file with the pages of the store, ready for the agent to read.

3. Let the agent annotate the file

Ask your agent to annotate the file with the Figma annotation skill. It works out:

• which Webflow components the design needs, each built once, with their variants and props;
• what each prop is bound to, such as a CMS field;
• which Smootify elements and attributes go inside them, from the 2.0 glossary.

It writes every decision into the Figma file as a Dev Mode annotation on the layer, and asks you whenever the design does not settle a choice, instead of guessing. It never touches Webflow.

It worked when the layers carry their annotations, and the agent has listed the questions it left open.

4. Review the annotations in Figma

This is the step that stays human. Open the file in Dev Mode and read the annotations: they say what each layer becomes. Answer the open questions, and change any decision you disagree with.

Then ask your agent to check the annotations with the Smootify MCP: check_annotations finds directives it does not know, elements in the wrong place and questions still open, and checks the result as it would check markup. The review-figma-annotations prompt asks for the same.

It worked when the check finds no error and no open question.

5. Let the agent build it in Webflow

Ask your agent to build the file with the Figma to Webflow skill. It reads the annotations, builds each component in Webflow with its props, classes and custom attributes, binds the props, and checks every binding before it reports. It stops and asks when an annotation is not finished.

Before it writes Smootify markup into Webflow, it runs check_markup on it, with where the part goes. When it is done, it lists what you still set by hand: the bindings and settings Webflow’s API does not reach.

It worked when the pages are built, and you have done the list of what it left to you.

6. Connect Shopify and bring in the products

From here the store is built like any other: install Smootify in Shopify, connect the site in the Smootify dashboard, sync the products into the CMS and add the script. From a template to a live store goes through it, from step 2.

It worked when a product page on your .webflow.io address shows a live product from Shopify.

7. Audit, review and publish

Ask your agent to audit the site with the site audit skill. It checks every element against the 2.0 contract in the Designer and on the published pages, tests the pages in the browser, and reports what is broken, what is fragile, what the store’s data calls for and what it could not check. With the Smootify MCP, audit_site reads up to 10 published pages in one go.

Then the designer reviews the build in Webflow, and you decide when it goes live: a plan, your domain, a test order. The list is in Before you publish.

It worked when the audit has no error, the designer has signed off, and a test order arrives in Shopify.

Where people get stuck