UI View: Model-Projected Wireframing
Create conceptual wireframes that are fully connected to the architecture model. Every field on a UI View traces back through the intent graph, showing exactly where data comes from. Changes to the model propagate through to the wireframe via impact analysis.
UI Views solve this by treating the user interface as a projection of the model, the same way a Data View projects the model onto a database schema or an API projects it onto endpoints. Each field on a UI View is bound to a property path through the central model, and the full lineage is visible at a click.
This is not a high-fidelity UI design tool. It is an architecture communication tool that shows how data flows from the model to the screen, keeping wireframes aligned with the architecture rather than drifting as a separate, manually maintained artefact.
Core Capabilities
How It Works
The architect creates a .ui-view.json file and composes it using a grid-based editor. The workflow is:
Control Type System
Controls are abstract archetypes, not real UI components. They communicate the intent of each field without prescribing a specific implementation.
Published Wireframes
When published, UI Views appear as interactive wireframes in the documentation site. The viewer provides:
Example: Order Detail (multi-page with payment flow)
This Order Detail screen demonstrates a multi-page flow with customer lookup, line items, and a payment processing page. Click the page tabs to navigate between Order Detail and Payment. Click any lineage icon to trace a field back through the model.
Example: Customer List (master-detail with orders)
A customer search and list screen with a side-by-side detail panel. The second page shows a customer's orders. Notice how the same Customer entity is used in both read-only list fields and editable detail fields, demonstrating different control types for the same data.
Full-Stack Lineage
UI Views complete the model-first lineage chain. A property change in the central model can now be traced through every layer of the architecture:
Lookup Fields
Lookup fields represent reference data sourced from a different entity. For example, a Customer dropdown on an Order form pulls its options from the Customer entity.
Each lookup specifies three things: the source entity, the value property (usually the primary key), and one or more label properties (the text the user sees). The lineage popover shows all three, and clicking the entity name opens the model explorer.
Intent Graph Integration
UI Views are first-class citizens in the intent graph. Each UI View creates: