How I leverage cutting-edge AI tools to prototype faster, generate assets, and ship at 10x speed.
Note: Every element you see in this portfolio — from the code and layout to the case studies and documentation — is a direct representation of this AI-driven workflow in action, primarily utilizing Replit, Google AI Studio, and Claude Code for this specific site.
Role
Self-Directed
Status
● Ongoing
Stack
Replit, Google AI Studio, Claude Code, Cursor
Team
Me + AI tools
The AI Stack
Replit — The Prototyping Engine
Replit serves as my primary environment for turning ideas into live, interactive prototypes. Its cloud-based infrastructure allows me to share functional designs with stakeholders instantly.
Cursor — The Professional Accelerator
While I primarily used Replit and Google AI Studio for this portfolio, Cursor is my go-to IDE in my professional role. I've successfully used it to build complex Money Movement prototypes for stakeholder demos, allowing for rapid iteration on high-fidelity financial features.
Google AI Studio — The Brain
I use Google AI Studio to experiment with the latest Gemini models. It's where I refine prompts, test edge cases for data generation, and brainstorm complex information architectures.
Claude Code — The Architect
Claude Code was instrumental in building this portfolio. It assisted in high-level structural decisions, complex logic implementation, and ensuring the codebase remained clean and scalable throughout the development process.
The Process
1 — Ideation
Using Google AI Studio to brainstorm user flows and edge cases.
2 — Scaffolding
Rapidly generating the project structure in Replit.
3 — Refinement
Using Cursor and Claude Code to polish the UI and implement complex interactions.
4 — Validation
Deploying instant previews to gather stakeholder and user feedback.
The Result
By integrating AI into every stage of the design process, I've reduced the time from concept to functional prototype by over 90%. More iterations, better testing, and a superior user experience.
90%+
Reduction in concept-to-prototype time
10x
More design iterations explored
Zero
Handoff ambiguity for dev teams
Developer Blueprint
This portfolio isn't just a showcase — it's a living technical reference. Every prototype I build serves as a clear guide for engineering teams.
Interaction Specs
I use AI to document complex micro-interactions, ensuring that the "feel" of the product is preserved when moving from prototype to production. Developers can use these live examples to reference timing, easing, and state transitions.
Clean, Modular Code
The code generated through my AI workflow (using Cursor and Claude Code) follows modern best practices. It's modular, typed, and structured to be easily integrated into large-scale production codebases.
Bridging the Gap
By delivering functional, code-based prototypes rather than static mocks, I eliminate the ambiguity of traditional handoffs. Developers can inspect the actual implementation, reducing friction and accelerating the build phase.
Tool Pairings
Replit + Google AI Studio
The combination of Replit's cloud environment and Google's Gemini models allows for instantaneous full-stack prototyping. I can prompt a feature in AI Studio and have it running in Replit in minutes.
Cursor + Claude Code
I used Claude Code to architect this portfolio's structure and logic. In my professional role, I pair it with Cursor to build complex Money Movement prototypes, delivering high-fidelity financial tools at 10x speed.
The Developer Blueprint
I design with a code-first mindset. Every prototype serves as a technical reference for engineering teams, providing clear interaction specs and modular code that can be directly integrated into large-scale projects.
This portfolio is itself the proof of concept.