Morpheus — Semantic UI Generator

Most generators map types to widgets. Morpheus maps meaning to interfaces. It reads field names, formats, and constraints, infers semantics (e.g., status, cancel_at_period_end, currency, timestamps), then renders the right UI for the current context (list / detail / form / timeline).

Semantic protocol concept — components that describe intent and relationships

TL;DR

Problem: Type-only generators produce generic controls and ignore business meaning.
Intervention: A lightweight semantic protocol + classifier + CSS-semantic layer that encodes intent (status, cancellation, money, time) and context (list/detail/form/timeline).
Outcome: Production-ready UI from real schemas with explainable behavior; 38% faster render and 71% smaller CSS payload via design tokens and semantic classes.

Why semantics (not just types)

status → colored badge + valid transition menu (form) + timeline events (history).
cancel_at_period_end → destructive semantics (warning badge, confirmation UX), not a “positive” toggle.
amount + currency → formatted inputs with units and thousand separators.
*_at / *_end + format: date → absolute in detail, relative in lists.

The four contexts

List: scanable badges, relative time, condensed money.
Detail: full labels, explanations, contribution breakdowns.
Form: constrained transitions, validation, destructive affordances.
Timeline: semantic events (e.g., “Status → past_due”, “Cancellation scheduled”).

CSS-semantic architecture

Tokens: color/space/type radiating through components.
Semantic classes: .badge--status-active, .flag--cancel-at-period-end, .field--money.
Context modifiers: .is-list, .is-detail, .is-form, .is-timeline switch presentation without rewrites.
Result: 38% faster rendering and 71% smaller CSS payload in testing.

How it works (at a glance)

Parse: JSON/OpenAPI schema → fields, enums, formats, constraints.
Classify: name/format heuristics map to semantic categories (status, cancellation, money, time, identity, etc.).
Context render: templates choose controls and patterns per context.
Explain: optional manifest panel shows the classifier’s reasoning for each field.

{
  "title": "Subscription",
  "fields": [
    {"name":"status","type":"string","enum":["incomplete","trialing","active","past_due","canceled"]},
    {"name":"cancel_at_period_end","type":"boolean"},
    {"name":"amount","type":"number","format":"currency","currency":"USD"},
    {"name":"current_period_end","type":"string","format":"date"}
  ]
}

My role & scope

Invented the semantic mapping and context model; designed UX for list/detail/form/timeline.
Authored the CSS-semantic methodology (tokens → semantic classes → context modifiers).
Built the working generator prototype and classifier heuristics; wrote docs and patterns.

See it live

Try the real prototype and the temporal companion demo:

Open UI Generator Open Temporal Demo

Temporal demo shows how time changes outcomes (Queue Position Fairness, decay, drift).

← Back to Work About