Experiment · shipped

Seashell UX An AI-forward control panel shell, rebuilt from a lost prototype

Seashell UX home: a clean control panel with the heading 'Good morning, John' and four prioritized weekly tasks, each tagged for cost, risk, performance, or unblock. The right side has a Create button, a global search, and an AI Assistant entry point.

Open the prototype

Live at seashell-ux.vercel.app. Click around. Every page in this case study is interactive in the prototype, including the variants and the accessibility modes below.

This started as a redesign of a major cloud platform's control panel. I was prototyping the new shell (the navigation, the home, the inline AI assist) coding it up in a working build that I'd quietly shared with a few collaborators. I was getting ready to present.

I never got to. The team got cut, the prototype went with us, and the thing I'd been building for months evaporated overnight. The link in my history was the only thing left of it. So I rebuilt the shell from the link, scrubbed the company-specific bits down to a generic "Acme Corp," and put it back online as a self-contained UX experiment.

The thesis is simple. Cloud control panels still ask the user to decide everything. Seashell starts the morning with the four things actually on your plate, marks the three the agent can finish on its own, and asks you to handle the one that needs you. The AI is in the navigation, not in a chat window. Every list view has a panel that explains what's worth your attention.

Designed in Figma. Built with Claude Code (a different agent at the original company; same idea). Desktop-first showcase right now; mobile is in progress.

The home

Four things, three agents.

The home greets you with the week's prioritized work. Each row is a real task with a confidence chip on the left (savings, risk, performance, blocker) and a single primary action on the right. Three are routine and the agent can run them. One needs a human. A "Let AI handle the routine ones" button on top kicks off the easy ones in a single click.

Home view: full screenshot with the prioritized task list, confidence chips, and AI Assistant entry point in the header

The shell

Variants you can poke at.

The live link is a UX/UI showcase, not a finished product. Click around. The same shell handles a list of resources, a single resource detail, a creation flow, an onboarding, modals at two sizes, and a notifications drawer, all on the same nav and the same component vocabulary.

Resource list view: wide table with status indicators and a sidebar panel suggesting which resources need attention

Resource detail: single resource page with metrics, recent activity, and inline AI suggestions

Database create: a creation flow with stepped sections, plan selection, and clear cost preview

Project view: a project landing page that aggregates the resources and activity scoped to one workload

Small modal pattern: single-action confirmation dialog with the rest of the page dimmed behind it

Large modal pattern: full-form modal for a multi-field workflow with the underlying page still readable behind it

Notifications panel: a right-side drawer that lists recent alerts grouped by category, with quick actions inline

Playground view: a testing surface for the AI assist patterns, where the team can try the same conversation against different layouts

Variants

Same shell, different surfaces.

The shell is a vocabulary that the prototype lets you reskin into different surfaces: a default light theme tuned for everyday use, a dark theme tuned for focus and the AI inference workflows, and a relaxed variant with extra breathing room. Same nav, same components, same logic. Different rooms.

Light theme: the default surface, white ground with the AI Inference Hub featured panel laid out in light blues and teals

Dark theme: same Inference Hub variant, deep navy ground, content cards with subtle elevation, primary type kept white-on-dark for focused work

Dense variant: the same shell tightened up: less padding between rows, more list density, suited for power users who live inside the panel

Relaxed variant: the same shell loosened up: bigger gaps, larger touch targets, suited for first-time users and walk-throughs

Accessibility

High-contrast, large text.

Two accessibility modes are part of the shell, not an afterthought. High-contrast pushes color contrast past WCAG AAA. Large-text scales the type system up by ~125% without breaking layout. Both modes work on every page in the prototype: the home, the resource lists, the create flows, the modals, the onboarding.

High-contrast mode: heightened color contrast across all UI elements, retaining the same shell hierarchy

Large-text mode: type scale bumped up across the shell so primary content stays readable for users with low vision

The first run

Onboarding as welcome.

Onboarding is its own page in the showcase. Same nav, same shell, simpler content. The first thing a new user does sets the tone for everything that comes after, so the same pattern that handles the prioritized home for an existing user handles the welcome for a new one. One component vocabulary, two emotional contexts.

Onboarding view: first-run welcome screen using the same shell, simplified to a single primary action and a small set of getting-started steps

Mobile

Still cooking.

Right now the showcase is desktop-first. Mobile is in the queue. The shell collapses to a single column with the AI assistant available at the top of the page rather than the corner of it; the prioritized list reads as a stack rather than a table.

Mobile home: the same prioritized task list adapted for a single-column phone viewport

Status

Live at seashell-ux.vercel.app. A few control-panel-specific bits still need to be lifted out before this is fully generic. Mobile cuts after that.

Most lost work stays lost. This one came back because the link survived. There's a lesson in there about backing things up. There's a more interesting one about how much of a design lives in your head, ready to be rebuilt the moment you have a quiet weekend and the right toolchain.

Why