Strukturfør pixlar.

Design

Landningssida v2

Webb · Desktop 1440×900 · 12 fyllda celler

3 screens

Sektionerog celler

Blank layouts

Hero (split)

https://landing-page-v2

HEADING

IMAGE

+ Add section

Maskinläsbart.ikke bare en skiss

Sektionslänkar

Component: HeroBlockLayoutInteraction

↳ Primer CTA bör sticka ut vid scroll.

wireframe.recipe

"screen": "Landing page v2",

"device": "desktop",

"sections": ["hero-split"],

"links": "component": "HeroBlock"

En struktur,alle rammer.

Mobile 390×844

landing-v2

Desktop 1440×900

Tablet 1024×768

Sengenerera.

generera·code·

Sections

Hero (split)

Navbar + CTA

Inspector

Design system: Aurora

1. Screen 12. Screen 2+ Add screen

▤Code generatedScreen 3/3

export function LandingPage() { ... }

→ Wireframes

Sketch product structure as wireframes din team can discuss.

01 Sections & cells

Stapla sektioner, välj en kolumnlayout, släpp block i hver cell.

02 Strukturerad data

Direktiv og länkar til komponenter — läsbare for människor og maskiner.

03 Varje ram

Mobil, desktop, tablet — ett wireframe-system på riktiga enhetsrammer.

04 Generate code

Din IA reads the structure, then generates code screen by screen.

Desktop

Udforsk Wireframes

Rul

Din AI, via MCP

Beskriv en skærm, så bygger din AI wireframen over MCP — den læser sstm://wireframe/recipe for den præcise datamodel og skriver derefter hele skærmstrukturen med sstm_wireframe_build, koblet til dit designsystem og linket til rigtige komponenter.

Sådan virker human-gate