Smootify Studio
Smootify Studio, the desktop app for Mac and Windows - the tabs of each site (Setup, Build, Sync, Iterate, Check), the Claude of each site and what it knows, and how review notes reach Claude.
Smootify Studio is the desktop app for Mac and Windows. Every Smootify site you work on sits in its sidebar, with its state: synced, never synced, collections to choose, last sync failed. Each site has five tabs, and a Claude of its own.
Claude in Studio is your own Claude Code, on your Claude account. Studio checks that it is installed and signed in, and never reads your sign-in. Syncing works without it.
The tabs of a site
- Setup. Chooses the CMS collections for products, collections and vendors, and finishes the field settings Webflow’s API cannot change: prices as decimals, Shopify ID and image URL as single lines, the SEO description as multi-line. Fix them automatically, with Claude in Chrome, or by hand from a checklist. See CMS collections and sync.
- Build. The site’s custom scripts, one folder each. Claude writes them with the custom-script skill, the dev server runs your latest code on the real site, and Build makes the file the site loads. See Custom scripts.
- Sync. Brings products, collections and vendors from Shopify into the Webflow CMS, by hand or every five minutes from the tray, with a log of each item it writes.
- Iterate. Review notes on the published site, answered by Claude (below).
- Check. Checks the collections and their settings, and runs a site audit with Claude, saved as a dated report in the site’s folder.
The Claude of each site
The Claude button at the top of every site, in every tab, opens Claude Code in the site’s folder, with no task set. The terminal opens in the drawer on the right, next to the audit and the Figma steps, and the same button shows and hides it. Ask it about the markup, fix a page that does not work, change the site through Webflow’s MCP, or work through what the audit found.
Before it opens, Studio writes the site’s brief, CLAUDE.md, in the site’s folder: the Webflow site and its Designer link, the addresses, the Shopify store and plan, the CMS collections, and what each Smootify skill does. Claude starts from it, so you do not explain the site from scratch. It tells you what it will change in Webflow before changing it, and leaves publishing to you.
The site’s folder is in Smootify Studio/<site> in your home folder.
Review notes with Iterate
Iterate is a feedback loop on how Smootify is built into the site.
- Open the site. The published site opens in Chrome, Edge or Brave, in a profile of its own for each site, so your Webflow login is not touched. A bar at the bottom holds the notes. Desktop, Tablet (768) and Mobile (390) open the window at that width.
- Add a note (⌥ Option⇧ ShiftF on a Mac, Alt⇧ ShiftF on Windows). Click an element, drag over an area, or choose the whole page; write what is wrong, and choose a type and a severity. Save it with ⌘ Cmd↵ Enter (Ctrl↵ Enter on Windows). Studio saves the note in the site’s folder, under
notes/, with a screenshot of the element and of the window, the Smootify elements around it, the Smootify script the page loads, the page’s errors and the requests to Smootify or Shopify that failed just before. - Send to Claude. The site’s Claude reads the notes, fixes the site in Webflow with the Iterate skill, and answers inside each note. It never publishes.
- Publish, and look again. A fixed note reads “Fixed · publish to see it” until you publish. You can publish from Studio, on the address you are reviewing: it asks first, because everything changed in Webflow goes online. After a publish, Studio takes a new screenshot of every fix. Mark each one Verified, or Reopen it with the reason.
Every answer names the cause and how sure Claude is. When the cause is Smootify itself, the note shows it as Smootify’s side, and Send to Smootify opens the support chat with the report ready to paste. When Claude is not sure the site’s configuration is ruled out, Studio suggests reopening the note first.
On the page, numbered pins mark the elements with notes: orange while a note is open, black once Claude has answered. Tap one to read the answer, and reply, close, reopen or verify it there; ‹ 2 of 7 › in the bar moves from note to note. Studio tells you when Claude answers, in the app, on the site and with a system notification. Export makes a printable HTML report of the notes, in the site’s reports/ folder.
The notes bar runs apart from the site’s own scripts, so the site cannot see it, and Claude starts only when you click.
Check these first
- The Claude button does nothing. Claude Code is not installed or not signed in: open the Claude Code panel of Studio and follow its checks.
- Claude does not know the site. Open it from the site’s Claude button, not from a terminal elsewhere: the button writes the site’s brief first.
- A fixed note still looks wrong. The fix is in the Designer and the site is not published yet. Publish, then use Look at it again.