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

Twoje AI, przez MCP

Opisz ekran, a Twoja AI zbuduje wireframe przez MCP — czyta sstm://wireframe/recipe dla dokładnego modelu danych, potem pisze pełną strukturę ekranu przez sstm_wireframe_build, powiązaną z systemem projektowym i połączoną z prawdziwymi komponentami.

Jak działa brama człowieka