Design and App Development

I designed and built a fully working Progressive Web App as a Product designer. Using Claude AI for strategy and research, and Claude Code for execution, I went from designing in Pencil to a live, animated prototype that people can install on their phone directly from a link. The project involved building a design system, implementing gesture-based animations, optimizing a 40MB build down to 751KB, and creating reusable tooling for future projects.

🔗 prayer-companion-neon.vercel.app

Prayer Companion is a Bible-focused mobile web app that lets users explore spiritual topics through curated articles and videos. The aesthetic is inspired by ancient manuscripts — parchment tones, warm brown ink, hand-drawn illustrations, and serif typography.

I used this project as an opportunity to try Pencil, a design tool that runs inside VS Code as .pen files. Working with a design tool embedded in my code editor meant Claude Code could read my designs directly and translate them into React components without any manual export steps.

All visual assets — paper-textured backgrounds, sketch-style thumbnail illustrations, and stroke-like images — were created by me in Figma and imported into VS Code.

I started by setting up a roadmap with Claude AI and gathering references from Mobbin. Claude directed the codebase setup while I handled all visual direction and decision-making. The first design Claude Code generated was poor — I had only provided one reference image and one markdown file, which wasn't enough context. I've since come to understand that describing what you appreciate about each reference in detail gives the tool a much clearer picture of what to create.

Once the designs were complete, I ensured consistency across my files and had Claude Code audit for discrepancies in color, typography, and spacing. A separate extraction prompt produced 40 structured design tokens: 9 colors, 11 typography styles, 10 spacing values, 5 icon sizes, and 5 corner radii. I then researched how to get this into Figma for potential collaboration and set up a bidirectional token pipeline using Tokens Studio, Style Dictionary, and GitHub Actions — a change in Figma reaches the live site in under 3 minutes, and vice versa.

I had no prior experience with code-based animation. I relied on research from Claude AI and community resources published by other designers and developers to understand animation patterns for mobile apps. Claude Code implemented card stack swipes, page transitions, staggered entrances, and haptic feedback using Framer Motion. When things broke — and they did, frequently — I'd capture the broken state, provide the relevant code as context, and have Claude AI research the specific fix. This approach of making the tool diagnose and solve its own output issues worked consistently.

The app was configured as a Progressive Web App so users could open a link, add it to their home screen, and use it like a native app. The first deployment revealed that fonts were breaking on smaller screens and the build was shipping 40MB of images. I had designed at a comfortable viewport width and scaled down, which caused font hierarchy issues at smaller sizes — a mistake I could have avoided entirely by starting at the smallest screen and scaling up. Image compression with Sharp and WebP conversion brought the build from 40MB to 751KB.

After shipping, I documented every mistake and its fix across all sessions. More importantly, I created five reusable skills for Claude Code that I can carry into future projects:

• Design Audit — checks design files for visual inconsistencies • Design System Builder — extracts tokens and generates structured JSON • Component Generation — turns design frames into React components • Animation Patterns — a reference library of spring presets and gesture recipes • Accessibility Checker — WCAG 2.2 compliance across contrast, touch targets, and typography

Thanks for reading this far. Let's talk if you've got a project in mind