Design
Design
Intent-first layout planning, registry matching, and brand-bound block installation.
The Design pillar turns a locked creative direction into concrete registry selections bound to your brand tokens. Agents match semantic roles (hero, nav, pricing, footer) to blocks, components, and templates without guessing filenames.
What you will learn
- Semantic roles instead of pixel coordinates
- Deterministic registry matching from brief + brand
- WebGL budget gates before install
- Framework parity across React, Vue, Svelte, Solid, Preact, and vanilla
Concept first
Design in Pax is not a Figma export. It is a plan that names what each region of the interface must do, which registry asset fulfills that role, and how brand tokens override defaults. The plan validates against schema, direction, and brand before anything copies into your repository.
Typical flow:
Locked direction → design plan → registry match → validate → installCommands
What you get
| Artifact | Purpose |
|---|---|
.pax/design.json | Semantic layout plan with registry bindings |
| Install script | Copy commands for matched assets |
| Token sheet | Resolved CSS variables for your stack |
Blocks vs components
Blocks are full page sections: heroes, pricing, auth layouts, templates. Components (effects) are atmospheric treatments over existing HTML. Use blocks when composing pages; use components when adding creative chrome.
See Blocks and Components.
Status
| Feature | Status |
|---|---|
| Design plan schema and CLI | production |
| Registry matching | production |
| Composed block templates | production |
| Auto layout from screenshots | experimental |
Accessibility and performance
Every installed block must expose reduced-motion pathways. Design validation checks WebGL tier budgets before install. See Accessibility and Performance.
Related
Was this page helpful?
Answers are not recorded or transmitted. Pax has no telemetry.