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
IA
A sua IA, via MCP
Descreva um ecrã e a sua IA constrói o wireframe via MCP — lê sstm://wireframe/recipe para o modelo de dados exato, depois escreve toda a estrutura do ecrã com sstm_wireframe_build, ligada ao seu design system e a componentes reais.
Como funciona a validação humana
Wireframes · Premium — à la carte
Ponha Wireframes
a trabalhar.
Estruture ecrãs antes de os construir.
Início de sessão com Cloudflare · workspace principal gratuito