- Compose pages from the kit
- Write the Webflow structure
- Bind elements to Shopify data where it can
- Run the audit and fix what it flags
Figma to store, built by your agent.
Three steps. The first two are your agent's, the last one is yours. Every file it needs is public, so you can read exactly what it reads.
Works with Claude, Cursor and Codex through the Smootify MCP.
What Smootify is, in one minute.
Smootify is the bridge between Webflow and Shopify. You design the site in Webflow, Shopify runs the store, and Smootify connects the two.
Your site
Webflow
Every page, layout and animation, designed and published in Webflow.
The bridge
Smootify
A Shopify app, a Webflow app and one script on the site, connecting the two.
Your store
Shopify
Products, stock, checkout, payments and orders, managed in Shopify.
What happens when someone shops
- 01
A visitor opens your site
It is your Webflow site, on your domain, with your design.
- 02
The products come from Shopify
Smootify fills your Webflow elements with products, prices, variants and stock, live from Shopify.
- 03
They add to cart
The cart is Shopify’s cart, shown inside your design.
- 04
They pay in Shopify’s checkout
Payments, taxes and shipping are Shopify’s, and the order lands in your Shopify admin.
The workflow, step by step.
- 1your agent, in Figma
It designs the store from our kit.
The wireframe kit has every page a store needs, built from the components Smootify ships. Your agent composes the pages, you steer the direction and review the frames before anything is built.
The kit it starts fromWhat you get- Home, collection, product, cart and account pages
- Every Smootify component as a Figma component
- Naming that maps one to one to the markup contract
- 2your agent, into Webflow
It writes the Webflow build itself.
Following the build skill, the agent reads the frames, writes the Webflow structure and wires each element to Shopify through the markup contract. The site audit skill checks the result against the same contract.
The skill it followsWhat you get- Webflow pages and components, not an export
- A list of bindings to set by hand where Webflow props cannot carry them
- An audit report of anything that does not match
- 3you, once
You connect Shopify and go live.
The last step is yours. The designer reviews the build, you connect the Shopify store, choose a plan and publish. From there, every element stays yours to change by hand or by agent.
Connect your storeWhat you get- Install the Shopify app
- Connect the store in the Webflow app
- Publish when the review is done
We publish files for agents.
The same four things are open to you, your agent and anyone reviewing the build. Nothing in the setup is private.
Smootify MCP
Tools your agent calls to look up elements, check markup and audit a published site.
OpenMarkup contract
The public spec every Smootify element follows. Stable, versioned, readable by people too.
OpenDocs for agents
Site and docs indexed in llms.txt, the full docs as one text file, and a markdown version of every docs page.
OpenFive skills
Annotate the Figma file, build it in Webflow, audit the site, answer review notes, write custom scripts: files your agent loads.
OpenThe last step stays human.
The agent does the build. The designer reviews it, and you decide when it goes live.
Your agent does
You do
- Set the direction and review the frames
- Review the build in Webflow
- Connect Shopify and choose a plan
- Publish
Works with the agent you already use.
Prefer to build by hand?
Hand your agent the kit.
Free to build, pay only when you go live. One Shopify app instead of ten, billed on the store’s Shopify invoice.
- One app on the Shopify bill, not ten
- Free to build, pay only when you go live
- Works on Basic, Grow and Advanced
- Your 1.x store keeps working
- Every element stays yours to change
- Docs indexed in llms.txt