Strukturföre pixlar.

Design

Landningssida v2

Webb · Desktop 1440×900 · 12 fyllda celler

3 screens

Sektioneroch celler

Tomma layouter

Hero (split)

https://landing-page-v2

HEADING

IMAGE

+ Add section

Maskinläsbart.inte bara en skiss

Sektionslänkar

Component: HeroBlockLayoutInteraction

↳ Primär CTA bör sticka ut vid scroll.

wireframe.recipe

"screen": "Landing page v2",

"device": "desktop",

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

"links": "component": "HeroBlock"

En struktur,alla ramar.

Mobile 390×844

landing-v2

Desktop 1440×900

Tablet 1024×768

Sengenerera.

generera·code·

Sections

Hero (split)

Navbar + CTA

Inspektör

Design system: Aurora

1. Screen 12. Screen 2+ Add screen

▤Code generatedScreen 3/3

export function LandingPage() { ... }

→ Wireframes

Skissa produktstruktur som wireframes ditt team kan diskutera.

01 Sektioner & celler

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

02 Strukturerad data

Direktiv och länkar till komponenter — läsbara för människor och maskiner.

03 Varje ram

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

04 Generera kod

Din AI läser strukturen och genererar sedan kod skärm för skärm.

Desktop

Utforska Wireframes

Skrolla

Jouw AI, via MCP

Beschrijf een scherm en je AI bouwt de wireframe via MCP — die leest sstm://wireframe/recipe voor het exacte datamodel en schrijft vervolgens de volledige schermstructuur met sstm_wireframe_build, gekoppeld aan je designsysteem en gelinkt aan echte componenten.

Hoe de human gate werkt