01
02
03
04
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
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
Skrolla
AI
La tua AI, via MCP
Descrivi uno schermo e la tua IA costruisce il wireframe via MCP — legge sstm://wireframe/recipe per il modello dati esatto, poi scrive l'intera struttura dello schermo con sstm_wireframe_build, collegata al design system e ai componenti reali.
Come funziona il gate umano
Wireframe · Premium — à la carte
Metti Wireframe
al lavoro.
Struttura gli schermi prima di costruirli.
Accesso con Cloudflare · workspace di base gratuito