Wireframes

Structure screens before you build them.

#What Wireframes does

Sketch product structure as wireframes your team can discuss — and your AI can build from.

  • Fast structural sketching. Blocks, columns and placeholders — enough structure to decide, little enough to stay fast.
  • Tied to projects. Wireframes live with the project and client, versioned alongside the rest of the work.
  • From wireframe to components. Map wireframe regions to real components from your library when it is time to build.
  • AI-readable structure. Wireframes are structured data, so your AI reads the intended layout before it builds anything.

#Sketch a screen

  1. Click New wireframe, name it and pick a platform (App / Web / Any) and a device size (e.g. Desktop 1440×900 or Mobile 390×844).
  2. Build each screen as stacked sections; give a section a column layout and fill each cell with placeholders (headings, text, buttons, media) or a real component from your library.
  3. Attach a design system to the wireframe so the sketch previews in the right brand.
  4. Add more screens to cover a whole flow — the cards on the list page show live thumbnails.

#On the MCP surface

Describe a screen and your AI builds the wireframe over MCP — it reads sstm://wireframe/recipe for the exact data model, then writes the full screen structure with sstm_wireframe_build, attached to your design system and linked to real components.

Tools (write):

  • sstm_wireframe_create
  • sstm_wireframe_build
  • sstm_wireframe_attach_design_system

Resources (read):

  • sstm://wireframes
  • sstm://wireframe/{id}
  • sstm://wireframe/recipe

Full definitions live in the MCP reference.

#On the Cloudflare side

  • Wireframe generation runs on Cloudflare Workers AI, with a Cloudflare Workflow handling long build jobs — and your own AI reads and writes the same structures over MCP.