ATLAS
Context-aware Interfaces + Governance
Atlas is an exploration of context-aware interfaces through a design systems lens.
I wanted to see how an interface could adapt as a traveler’s situation changed while using familiar governance ideas—approved components, clear rules, and defined boundaries—to control what Claude was allowed to build.
Travel gave me a useful test case because context can shift quickly: preparation progress changes, the trip gets closer, or a flight is cancelled.
Launch Live Prototype ↗
Built with
React · TypeScript · Vite · Zod · Vercel
Context Drives The Interface
Atlas uses structured signals like trip timing, preparation progress, and flight status.
Those signals live in application state. Changing the flight status does not simply send the traveler to another screen. It updates the context, runs the rules again, and changes what the interface prioritizes.
TravelContext → rules → InterfaceSpec → validation → component registry → interface
Designing With Boundaries
From the beginning, I wanted to build without giving Claude unlimited freedom.
Atlas is schema-driven: the interface is described through structured specs, validated with Zod, and rendered from an approved component registry.
That boundary became useful when flight and hotel details did not fit any existing component. Claude surfaced the mismatch, and I chose to deliberately add DetailCard with its own schema and registry entry.
Testing Governance
I connected the System panel to Claude through the Anthropic API so natural-language requests could be interpreted against Atlas’s existing context and capabilities.
Allowed context changes could update the experience. Requests outside the established context or approved registry were blocked.
For the public demo, I replaced the open-ended input with a predefined AirportMap request to keep API usage predictable. Because that component is not approved, Atlas preserves the last valid interface.
Guiding The Experience
I added a short walkthrough so the concept could be experienced rather than explained.
Preparing for your trip → Ready to go → Travel plans changed → System transparency → Governance
The System Inspector lets someone see the current context and decision path, then test the governance boundary themselves.
What I Learned
Atlas made me think about how design system governance might evolve when AI becomes another participant in the build process.
In this prototype, I could decide when the system should expand. At scale, that would need a more formal contribution model: an agent might identify or draft a new component, but a governed review process would still determine whether it becomes part of the system.
Prototype
Built with
React · TypeScript · Vite · Zod · Vercel
Built through AI-assisted prototyping with Claude and refined in Codex.
My role
Product design, interaction model, system behavior, governance approach, testing, and prototyping direction.
Want to go deeper?
View the full rules engine, schemas, registry, renderer, and System Inspector on GitHub.