Playground
Things I built
to figure things out.
AI prototypes, browser-native tools, and design experiments. Not all of it shipped. All of it taught me something. This is where the design-to-engineering gap gets smaller.
Dock walk — AI-generated prototype
A dock walk is how marina staff do rounds — walking the docks, checking slips, logging meter readings, noting issues. It was being done on paper and in scattered notes. I used Claude to prototype a mobile-first digital dock walk flow to explore what a purpose-built tool might look like.
The prototype was built in a single session. The feedback session felt different from typical design reviews — stakeholders were reacting to something real in the browser, not imagining behavior from wireframes. That distinction matters more than it sounds.
How it was built
Brief and context fed into Claude as a thought partner → rough spec → full interactive prototype built in the browser. No Figma involved. The whole flow — slip grid, meter reading entry, issue logging — was working in one session.
Dock walk reports — meter readings & space status
The dock walk flow generates data — meter readings per slip, space occupancy status, issues logged. These two prototypes explore what the reporting layer might look like: a meter readings view for tracking utility consumption per slip, and a spaces view for understanding occupancy patterns across the marina.
Both were built with Claude as companion tools to the dock walk prototype, exploring what happens after the data is collected.
Task management — three prototypes that shipped
These three prototypes were the actual design artifacts for the task management feature — built with Claude Code using Molo's design system, pixel-precise and fully interactive. Engineers used them almost directly in lieu of Figma handoff files.
The full story is in the task management case study. The prototypes are here because they're worth seeing on their own — this is what AI-assisted design engineering looks like in practice.
How it was built
Claude Code + a custom design system repository — a structured markdown file of Molo's component specs, tokens, and patterns I built so I could feed the full design system into Claude at the start of any new prototype. A problem I hit on day three became a reusable asset for every subsequent project.