AI-AUGMENTED DESIGN · WEB APP
A 100-day fitness accountability app built in React/JSX and deployed live to GitHub Pages, designed, prototyped, and shipped using AI-augmented workflows including onboarding UX, workout timers, progress strips, and cross-tab navigation.
Overview
Daily Reps is a 100-day fitness accountability app I designed and shipped solo, directing an AI-augmented workflow across UX, component architecture, and deployment. Built around a single constraint, 100 days, with UX patterns designed to make the streak feel real, I directed Claude through implementation and deployment to ship a live, working product, not a prototype.
THE CHALLENGE
Most fitness apps fail users in one of two ways: they're either too complex to stay consistent with, or too simple to feel meaningful. Daily Reps was designed around a single powerful constraint — 100 days — with UX patterns built to make the streak feel real and worth protecting. The challenge was designing something that worked as both a product and a personal commitment device.
HOW AI CHANGED THE BUILD
Daily Reps was built using an AI-augmented development process where I directed every design and engineering decision through Claude. The app exists as a single-file React/JSX application, deployed to GitHub Pages, and wrapped for iOS using Capacitor. This project proves that a designer who understands product thinking and can direct AI effectively can ship production-quality software.
Onboarding flow, 100-day progress strip UI, workout timer interface, day navigation tabs, and dark-mode design tokens. All designed to spec and implemented.
Directed Claude to write, debug, and iterate all React/JSX code. Defined component hierarchy, state management approach, and cross-tab navigation architecture.
Managed GitHub repo, GitHub Actions CI/CD, npm build workflow, Capacitor iOS sync, and GitHub Pages deployment configuration end-to-end.
PROCESS
01 Concept & UX Mapping
Defined the core loop: log reps → see streak → feel motivated to return. Mapped the onboarding UX flow, identified key delight moments (streak visualization, day completion animation), and wireframed the structure before writing code.
02 AI-Directed Development
Used Claude to write the full React/JSX application component by component. Directed decisions on state management, local storage strategy, the 100-day visual strip, and workout timer countdown logic. Reviewed and iterated every output.
03 Design System Implementation
Applied Daily Reps design tokens (dark bg #0b0d10, gold #c9a23a, green #34c27b, blue #2e8dff) consistently across all components. Tested responsive layouts, dark mode integrity, and interaction states before deployment.
04 Deploy & iOS Packaging
Deployed to GitHub Pages via npm build pipeline. Wrapped in Capacitor for iOS. Managed the full deploy workflow including Figma design file maintenance for the companion design system.
05 Testing & Iteration
Every AI output got pressure-tested on a real iPhone. Caught and fixed the modal scroll bug (modal moved to app root to break out of parent overflow), corrected rest-day logic, resolved a variable initialization order causing a white screen, and stripped a hardcoded seed auto-completing days for new users.
Outcome
Daily Reps is deployed and live at keykovelazquez.github.io/daily-reps-app. The app features a full onboarding experience, 100-day progress tracker, workout timer, and cross-tab day navigation. It exists as a working product, not a prototype, not a mockup, demonstrating what's possible when design thinking and AI direction combine into a complete build cycle.
TAKEAWAYS
Daily Reps changed how I think about what a designer can build. By directing AI through every phase — from UX decisions to JSX component logic to deployment troubleshooting — I proved that the gap between design and engineering isn't a skills gap anymore. It's a thinking gap. The designer who can think in systems, communicate intent clearly, and evaluate output critically can ship software. That's the skill Daily Reps helped me own.