Coordinated by recipe
A short address selects palette, display and body type, shape, surface, motion, density and shadow.
Generation 2 live showcaseA larger visual vocabulary in fewer tokens
Build the interface. Skip the boilerplate.
One compact source file selects coordinated typography, color, geometry, material, density, elevation and motion—then combines them with tested website and application contracts.
Thousands of choices without thousands of copied files.
Recipes and virtual component IDs are resolved deterministically. Models retrieve one exact choice instead of spending context and output tokens rebuilding CSS, responsive states and interaction plumbing.
Site recipes10,000r0000 through r9999
Component IDs10,000Ten families, 1,000 each
Font pairings320Local and system-first stacks
Palettes64Generated coordinated color systems
Cheap for models to emit
Compact aliases and exact IDs preserve product-specific content while removing repetitive frontend code.
Strictly validated
Every expanded block still passes source-located contract, accessibility and URL-safety checks.
A real visual system
Frames, materials, charts and controls share one language.
Virtual blocks can look materially different while retaining predictable semantics, keyboard behavior and responsive output.
- Distinctive display and body typography
- Glass, gradient, paper, grid, glow and ink surfaces
- Square, rounded, pill, notched, blob and architectural shapes
- Fade, rise, tilt, spring, stagger and parallax motion
Recipe r7314
Generated operating view
Reusable UI94%Less repeated implementation
Expansion11×Compact source to browser output
Dependencies0Plain HTML, CSS and JavaScript
Responsive, keyboard-operable and reduced-motion aware.
b203
Primary conversion
A high-emphasis action with generated geometry, surface, motion, density and elevation.
Create workspaceb444
Expressive secondary
A visually distinct recipe that still supplies complete hover, active, focus and disabled states.
Review systemb731
Operational action
Exact IDs let smaller models choose a credible treatment without authoring custom style declarations.
b907
Final call to action
The browser runtime remains dependency-free and announces local action feedback accessibly.
Open workspaceFunctional, not decorative
The generated browser behavior is already wired.
The model selects semantic capabilities. AppBlocks supplies the implementation and accessibility contract.
Reveal, stagger and parallax
Viewport-aware motion is generated from recipe classes and automatically disabled for reduced-motion preferences.
Motion systemCarousels and responsive layouts
Native scrolling, generated controls, snap behavior and mobile geometry ship without a frontend dependency.
Command palette
The workspace route includes a Control/Command-K dialog with native focus handling.
Forms, tables and application state
Validated forms, sortable and filterable records, tabs, dialogs, boards and feedback states share one deterministic runtime.
Test the applicationWhat Generation 2 changes
Compact authoring without a black box.
Does a recipe replace product design decisions?
No. It supplies coordinated defaults. The author still chooses content, hierarchy, routes, data and meaningful exceptions.
Do canonical AppBlocks projects still work?
Yes. Canonical Generation 1 source follows the original compiler path unchanged.
Does this create a production backend?
No. Authentication, persistence, authorization, payments and external operations require real backend adapters.
The useful trade
Spend model tokens on what makes the product different.
Let the compiler own repeatable interface implementation while the model focuses on product structure, content and behavior.