Web Design

All entries · newest first

Glance

/

Glance

A shared space to keep up to date with everything using agents & codex

I built Glance with Codex and Sites to bring my calendar, inbox, AI headlines, open PRs, spending and parcels into one place. Each section gives me a short summary, with more detail and links to the original sources when I need them.

Simplifying the interface

The early version had draggable, resizable white containers. I stripped those back to stacked paragraphs, using serif headings and spacing to give the page structure. Detail popovers kept the overview short without losing the context behind each update.

Bringing it into chat

I added a read-only plugin connection so I could ask about the same briefing from ChatGPT. It reads saved updates rather than fetching every source again, so each section carries its own checked time and context.

Iterating through use

Most of the design work has been small changes against a working version: adjusting type, removing controls and checking how it feels on my phone. Mobile navigation and differences between the hosted site and app sidebar are still being worked through.

Exploring Cascade - an agent native html artifact editor.

/

Cascade

Cascade is an experiment in editing and reviewing interactive prototypes with agents. I wanted a place to return to generated interfaces, change specific parts and keep alternative directions.

Keeping it lightweight

I started with portable HTML artifacts, so each idea could be previewed and passed on without setting up a full application. The gallery makes those prototypes visible before opening them.

Cascade light-mode prototype gallery

FIG 01 / Prototype gallery


Editing and reviewing

The canvas combines direct controls with contextual feedback. Selecting an element exposes its appearance and layout; Review mode attaches comments to their target and version. This was the core exploration: making it easier to point at what should change.

Cascade light-mode selected heading with design inspector

FIG 02 / Selection and inspector

Cascade light-mode seeded review comment anchored to the Payment card

FIG 03 / Anchored demo feedback

Testing the interaction

I used a checkout example to explore validation, retry and success. Preview follows declared states, giving the interface behaviour to inspect as well as a layout.

These are seeded prototypes and simulated payments. The next thing to test is the complete loop from a comment to an agent’s change and a saved result.

Cascade light-mode simulated checkout validation error

FIG 04 / Validation state

Cascade light-mode simulated checkout success

FIG 05 / Successful retry

Generative UI Canvas

/

Gen

Working through the interface

I’ve been exploring a model-agnostic canvas, with the workspace itself as the thing that stays consistent. That leaves room to try different models without making each one a separate place to work.

The current frontend lets me zoom around the canvas, focus on an item and interact with example widgets, including a timer. For a portable demo, I used local examples so I could inspect the canvas interactions independently of live generation. That demo leaves out AI calls, Notion and backend storage.

I also tried bringing it into Figma as an interactive Code Layer. The import was blocked by the tool, so the working version is still the browser demo.

The open question is what makes these generated interfaces worth keeping and returning to. That’s what I want to explore beyond the initial moment of generating something.