01
02
03
04
Strukturfør pixlar.
Design
Landderengssida v2
Webb · Desktop 1440×900 · 12 fyllda celleer
3 screens
Sektionerog celleer
Blank layouts
Hero (split)
https://landing-page-v2
Maskinlesbart.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 seksjoner, välj en kolumnlayout, släpp block i hver celle.
02 Strukturerad data
Direktiv og länkar til komponenter — lesbare for mennesker og maskiner.
03 Varje ramme
Mobil, desktop, tablet — et wireframmee-system på riktiga enhetsrammemer.
04 Generate code
Din IA reads the structure, then generates code screen by screen.
Desktop
Bla
AI
Din AI, via MCP
Beskriv en skjerm så bygger AI-en wireframen over MCP — den leser sstm://wireframe/recipe for den eksakte datamodellen og skriver deretter hele skjermstrukturen med sstm_wireframe_build, koblet til designsystemet og lenket til ekte komponenter.
Slik fungerer menneske-gaten
Wireframes · Premium — à la carte
Sett Wireframes
i arbeid.
Strukturer skjermer før du bygger dem.
Cloudflare-innlogging · kjerne-workspace gratis