01
02
03
04
Strukturcomo Vokabular.
Grid
Sidebar + main
Zwei celel — schmale Sidebar, breite contenidosspalte.
2 cells1fr · 2.4fr
▣ Use in project
Sechs patronesübertodos los compartido
Blank layouts
All 6Grid 11Editorial 6Asymmetry 6
GridCopied!
Bento grid
celel unterschiedlicher Größe en einem dichten Grid — men y informationsreich.
ExpliziteZell-Specs
▤sidebar-main2 cells
layout: "sidebar-main"
cells: 2
columns: [1, 2.4]
height: "m"
Auf cadaSektion.
Een Grid,cadun Screen.
inyectar·bauen·
1. Landing2. Pricing3. About
Same sidebar-main on all three screens
{ }wireframe.recipe
"layout": "sidebar-main",
"cells": 2,
"screens": ["landing", "pricing"]
→ Layouts

Benannte Layout-patrones — einspaltig, zweispaltig, Sidebar-Maen y mehr — un gemeinsames Vokabular.

01 Die patrones

Sechs strukturelle layouts plus un vollständiger Katalog — einmal wählen, en cadam Wiremarco wiederverwenden.

02 Cell specs

Jedes patrones deklariert sunun celel y Spaltengewichte — gültig durch Konstruktion, ningún durch Hoffnung.

03 Wireframe links

Verknüpfe un benanntes Layout cen cadun Wiremarco-Sektien — lun Struktur es cen dem Plun ausgeliefert.

04 Jeel Screen

Zwanzig Seiten, un Zweispalter — dasselbe patrones hält el Produkt einheitlich.

Patterns
Desplazar
IA

Tu IA, vía MCP

Los patrones de layout dan a tu IA el vocabulario estructural de tu producto — construye pantallas desde tus patrones nombrados en lugar de inventar rejillas nuevas.

Cómo funciona la puerta humana

Wireframes

Estructura pantallas antes de construirlas.

Saber más

Interacciones

Un catálogo de comportamiento, vinculado a la estructura.

Saber más

Design System

Tu marca como design tokens estructurados.

Saber más
Architectural space with translucent orange frame
Layouts · Premium — à la carte

Pon Layouts
a trabajar.

Patrones de layout nombrados para estructura coherente.

Inicio de sesión con Cloudflare · workspace principal gratis