Build with Claude

Smootify gives Claude the rules of the markup, so it can build your store pages in your Astro project from a Figma file. The same annotated design, and the same checks, work for any Smootify site. This page covers the build, the checks and Iterate.

1. Build from Figma

The build skill reads a Figma file whose layers carry Smootify annotations: the element of each part, its attributes, its components and their props, and what to bind to the store’s content. For an Astro project it writes code:

• Components. One .astro file for each component in the design, with its props, slots and scoped styles. See Write components.
• Pages. One file for each page of the design. Product, collection and vendor pages use getStaticPaths over the content collections, or the live collections on an On demand site.
• Content. What the design binds to a product or collection field reads the entry’s fields, such as p.name and p.priceFormatted: see Content from Shopify.
• SEO. Every page has one <Seo>.
• Styles. The design’s variables become CSS custom properties in tokens.css, and its text styles become classes. The Tablet and Mobile modes become media queries.

The skill does not touch what lives outside the code: it lists store settings, the Customer Account API origins, hosting and the domain for you to do. It builds in the mode the project has, and it does not turn on automatic updates.

Before it writes a file, the skill asks only what you decide, such as whether the site is built in more than one language or market. The default is one language and one market.

2. Check the result

The skill checks its own work. You can run the checks too:

1. astro check and astro build pass.
2. The Smootify MCP tool check_markup reads the built HTML of each page, in dist. Fix every error it reports. List what the check cannot judge: some rules of the checker are written for other markup, and the skill reports those as gaps without changing correct markup to please the checker.
3. Open the site with pnpm preview, at desktop, tablet and mobile width, and try a product, the cart and a collection with filters.
4. Check the built HTML: no internal link without the trailing slash, one canonical and one title for each page, and the seed on every page with products (data-smootify-products).

3. Fix notes with Iterate

Iterate in Smootify Studio is a review loop. You open the site, leave a note on what is wrong, with a screenshot and the Smootify elements around it, and send the notes to Claude. For an Astro site Claude:

1. reads each note and its screenshots;
2. finds the cause in the Astro project’s code or its settings: pages, components, styles, attributes and Smootify’s options;
3. fixes it in the project’s code and answers in the note, with the cause and how sure it is.

Claude never deploys. You can review the site on the dev server, where a fix shows when it is written, or on the deployed address, where a fix shows after you deploy again. A note whose cause is the store’s data, or Smootify itself, is answered as such, and is not fixed in your code.

Before you publish