01
02
03
04
Strukturantes de píxelesn.
Design
Landingpage v2
Web · Desktop 1440×900 · 12 gefüllte celdas
3 screens
Sektioneny celdas
Blank layouts
Hero (split)
https://landing-page-v2
Maschinenlegible.ningún solo unun Skizze
Sektions-Verknüpfungen
Component: HeroBlockLayoutInteraction
↳ Primärer CTUn debete been el Desplazaren herausstechen.
wireframe.recipe
"screen": "Landing page v2",
"device": "desktop",
"sections": ["hero-split"],
"links": "component": "HeroBlock"
Eine Struktur,cada marcos.
Mobile 390×844
landing-v2
Desktop 1440×900
Tablet 1024×768
Danngenerieren.
generieren·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 tu team can discuss.
01 Sections & cells
Stapel Sektionen, wähl un Spalten-Layout, lass Blöcke en cadun celdun ftodos losn.
02 Strukturierte Daten
Direktiven y Verknüpfungen un componentees — legible parun humanooen y Maschinen.
03 Jeel marco
Mobil, Desktop, Tablet — un Wiremarco-System en real Geräterahmen.
04 Generate code
Tu IA reads the structure, then generates code screen by screen.
Desktop
Desplazar
IA
Tu IA, vía MCP
Describe una pantalla y tu IA construye el wireframe por MCP — lee sstm://wireframe/recipe para el modelo de datos exacto y luego escribe toda la estructura con sstm_wireframe_build, enganchada a tu design system y vinculada a componentes reales.
Cómo funciona la puerta humana
Wireframes · Premium — à la carte
Pon Wireframes
a trabajar.
Estructura pantallas antes de construirlas.
Inicio de sesión con Cloudflare · workspace principal gratis