01
Web App · Claude + ChatGPT
Resume Builder
View Live ↗
A fully in-browser resume editor with real-time preview, eight color themes, AI-generated summary writing, and one-click PDF export. No frameworks, no backend — built with plain HTML, CSS, and vanilla JavaScript across a few focused sessions.
Approach
Foundation
Led with the interaction model before any visual details — two-panel layout, live preview updating as you type. Set hard constraints upfront: no frameworks, no external dependencies, everything runs in a single file.
Constraints set early shape the entire architecture. Specifying "no frameworks" before anything else meant the output was lean and portable from the first draft, not something I'd have to refactor later.
Theming + Persistence
Requested color themes and auto-save together in a single pass, since both need to read and write the same state. Themes via CSS custom properties; persistence via localStorage.
Asking for related features together avoids integration conflicts. Two separate prompts here would likely produce two implementations that don't share data cleanly.
AI Summary Feature
Specified that the AI Write button should pull context from the live form fields dynamically — name, title, experience — not from hardcoded values. Used a second model (ChatGPT) to cross-check the API integration layer.
Naming the data source explicitly got a real dynamic implementation, not a placeholder. Using a second model on a distinct technical piece is a useful way to pressure-test output.
PDF Export
Specified the native browser print API only, no third-party library. Explicitly called out that the accent color CSS variable needed to survive into the print stylesheet — a detail the model would have missed without the nudge.
Zero-dependency solutions are more durable. Small specifics like "carry the color variable through to print" are exactly where AI output quality diverges — the model does what you say, not what you meant.
02
Browser App · Claude
Frame — Film Border Studio
View Live ↗
A canvas-based photo editing tool for adding authentic film borders and light burns. Supports film stock presets (35mm, 120 medium format, specialty), adjustable rebate text, sprocket holes, DX barcodes, and interactive light leak placement — all processed locally in the browser and exported at full resolution.
Approach
Canvas Pipeline
Opened by describing the full render pipeline as a sequence — load → crop → draw border → composite burn → export — before any feature details. Established that all processing had to be client-side with no file uploads to a server.
Canvas compositing order is hard to refactor. Describing the pipeline as a sequence meant the layering logic was correct from the first output rather than something discovered mid-build.
Film Stock Presets
Described the visual character of each stock — frame dimensions, rebate typography, sprocket geometry, grain behavior — using real film references (35mm vs 120 medium format) as anchors rather than abstract "film effect" language.
Domain-specific description produces domain-specific output. "Add a film effect" gets you a generic filter. Describing what the actual film looks like gets you something that looks like the actual film.
Interactive Light Burns
Framed light burns as a distinct interaction mode — click-to-place on the canvas, separate from the default pan behavior — with independent controls for intensity, spread, feather, color, and blend mode defined upfront.
Naming the mode switch (pan vs. place burn) solved the interaction conflict before it existed as a bug. UX states defined in the prompt produce cleaner code than behavior described after something breaks.
Before / After Toggle
Asked for a hold-to-compare interaction tied directly to the raw canvas layer — not a visual re-render or state reset. Pressing shows the original; releasing returns to edited. One interaction, zero latency.
Specifying the implementation mechanism ("layer toggle, not re-render") prevented a laggy solution. Performance constraints belong in the prompt — they determine whether the output actually feels good to use.
A photography portfolio site built from scratch — dark aesthetic, section-based single-page layout, lightbox gallery, and multiple standalone pages. Designed collaboratively with AI, with every page as a single self-contained HTML file for zero-friction hosting and editing.
Approach
Design Direction
Led with tone and audience before layout or components. Described the feeling (dark, editorial, unhurried) and who would be looking at it (photography clients, potential collaborators). Let the model propose a visual direction, then refined from there.
Starting with tone produces design decisions that serve a purpose. Starting with a feature list produces something functional but characterless — a site that could belong to anyone.
Single-File Constraint
Intentionally specified one HTML file per page, all CSS and JS inline, no build tools, no dependencies. The site needed to be hostable on any static host and editable by hand without a dev environment.
The constraint was an asset. When the model can't use a framework, it writes leaner, more direct code. Artificial limitations often produce better outputs than open-ended freedom.
Gallery Behavior
Described the gallery in terms of user flow, not DOM structure — click a photo, full-screen overlay, navigate by arrow or swipe, click outside to close. The implementation followed from the behavior, not the other way around.
Describing what a user does produces better interaction code than describing what elements should render. Define the experience; let the model handle the markup.
Copy Direction
Used AI to draft initial headline and section copy with a voice direction and a job for each section to accomplish — then rewrote anything that didn't sound right. The prompt shaped the output; the edit made it mine.
"Write copy for a photography website" produces generic copy. "Understated, confident, not salesy — this section needs to explain what I shoot and why someone should book" produces a starting point worth editing.
04
Client Comms System
Prompt templates for booking follow-ups, shoot briefs, and delivery emails that hold a consistent voice without starting from scratch each time.
05
Shoot Planner Tool
An interactive planner that takes location, time of day, and shoot type and surfaces lighting conditions, gear suggestions, and angle ideas.
06
AI Listing Copy
A structured prompt system for generating consistent, on-brand descriptions across portfolio categories and the pricing page.