Strukturavant pixels.

Design

Landingpage v2

Web · Desktop 1440×900 · 12 gefüllte cellules

3 screens

Sektionenet cellules

Layouts vierges

Hero (split)

https://landing-page-v2

HEADING

IMAGE

+ Add section

machinenlisible.pas seulement une Skizze

Sektions-Verknüpfungen

Component: HeroBlockLayoutInteraction

↳ Primärer CTA devrait bedans le Défiler herausstechen.

wireframe.recipe

"screen": "Landing page v2",

"device": "desktop",

"sections": ["hero-split"],

"links": "component": "HeroBlock"

Eine Struktur,chaque cadres.

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 votre team can discuss.

01 Sections & cells

Stapel Sektionen, wähl un Spalten-Layout, lass Blöcke dans chaque cellule ftous lesn.

02 Strukturierte Daten

Direktiven et Verknüpfungen à composants — lisible pour humainen et machinen.

03 Jele cadres

Mobil, Desktop, ongletlet — un Wireframe-System sur réel Geräterahmen.

04 Générer le code

Votre IA reads the structure, then generates code screen by screen.

Desktop

Découvrir Wireframes

Défiler

Votre IA, via MCP

Décrivez un écran et votre IA construit le wireframe via MCP — elle lit sstm://wireframe/recipe pour le modèle de données exact, puis écrit toute la structure d'écran avec sstm_wireframe_build, rattachée à votre design system et liée à de vrais composants.

Comment fonctionne la validation humaine