Portfolio Rebuild
AI‑Accelerated “Vibe Coding” delivered architectural stability and minimized design‑to‑dev latency.
AI UPSKILLING
Max Velocity: Operationalizing AI‑Amplified UX Workflow
Highlights
Over six months, I rebuilt my product design practice around AI, not as a gimmick, but as a system. I used Google AI Studio to vibe-code my portfolio from aesthetic intent, and VS Code + Copilot to harden code for production. I used Figma Make to create a complete application prototype, plus generated specs and markdown requirements. By treating prompts as requirements and contracts instead of clever one-liners, I created a repeatable workflow that turned design ideas into working, shippable interfaces.
The result is a portfolio and process that can move up to 3× faster without sacrificing quality. A prompt-created design system of tokens and components keeps visual consistency near 97%, while lightweight admin tools make publishing and content ops autonomous. This case study shows how AI, when paired with senior UX designer oversight, markdown guardrails, and design systems, can deliver enterprise-grade results at startup speed.
From Experiment to Impact
Engineering high‑fidelity, hallucination‑resistant workflows to unlock 3× design velocity.
BrowserFence Prototype
Concept‑to‑prototype in 13 days (70%+ faster than the 4–6 week baseline).
Workflow Engineering
Repeatable Human‑in‑the‑Loop (HITL) QA steps ensure code and content precision at speed.
Impact on Prototyping Velocity
This chart visualizes the reduction in time required to deliver a demo‑ready prototype using the new workflow.
AI‑Accelerated Vibe Coding
My portfolio build was a great way to really learn the tech and the tools. I can't remember a time when I was more excited about my job. We are not at the "designer as full‑stack visionary" stage yet, but we are getting there.
This website is not a template; it was vibe‑coded from scratch using a high‑token conversational history + markdown requirements in Google AI Studio. The LLM acted as a dedicated engineering partner, translating abstract aesthetic requests and requirements into production‑ready code.
Architectural Maturity: Post‑generation refinement in VS Code + Copilot corrected structural fragility. Cursor AI also helped with code refactoring, bug fixes, etc.
Custom-Built Tools: I designed additional features for seamless post‑launch publishing by one-shotting a standalone blog writing / simple publishing tool.
The Vibe Coding Process
💡
Abstract Idea
🤖
AI Generation
🛠️
Human Refinement
Hover over a step to see details.
Rapid Prototyping: BrowserFence
From concept to demo‑ready prototype in 13 days, showcasing exceptional project velocity.
Integrated AI Tool Stack
Figma Make
Generated complex, conditional flows and state transitions at unprecedented speed.
Figma Design System Integration
Starting with a Figma artboard + Preline Figma, the prototype stuck to the design system.
Demo‑Ready Quality
Polish suitable for executive review + immediate user testing.
A Fusion of Speed and Quality
Creating BrowserFence in Figma Make bypassed traditional bottlenecks, proving high velocity and high fidelity aren’t mutually exclusive.
This rapid turnaround enabled earlier stakeholder feedback, more iteration cycles, and a validated, demo‑ready result in record time.
Check Out BrowserFence ↗
WAIT A MINUTE...
AI is far from perfect, and I would be lying if I painted it as a silver bullet. It's not. It's a tool, and like any tool, it's only as good as the person using it. I'm good, but I'm not a pro developer. I love the tech and I'm definitely a geek, but I always say that I'm technical enough to get into trouble. And over the past six months, I definitely did.
Danger! ☠️
Dark Night of the Soul
What should have been simple tweaks: things like line spacing, button colors, and tags/badges, often spiraled into hours of trial and error back-and-forth. Every “quick fix” exposed hidden conflicts between global styles, overrides, and the quirks of features like switchable light/dark modes. I’d fix one thing, and something else would break. At times, AI-generated code felt more like a blunt instrument than a scalpel: dropping hacks, duplicating rules, or stripping away the very styles that I added manually to make the site cohesive. Instead of accelerating me, it often slowed me down, forcing me to dig deeper into the mess just to restore what I already had in the previous version. There must be a better way...
Workflow Engineering: The Human Filter
The key to using AI effectively is developing systematic workflows that balance AI speed with human precision. Daily use of modern LLMs revealed limits: misattributed quotes, code hallucinations, and faulty advice. The most crucial output was creating precision protocols to deploy AI at scale while maintaining quality. Click a gate to learn more.
Process
1. ✨ Prompt & AI Generation
2. 🔧 Raw AI Output
3. The Human Filter (HITL QA Gates)
MDCF Check
Prevents hallucination
Token Consistency
Ensures brand alignment
Manual Review
Validates code integrity
Click a QA gate to see its description.
4. ✔️ Validated Deliverable
Why This Matters
Precision Protocols enable scale without sacrificing trust. They make AI contributions measurable, reviewable, and improvable, which turns speed into sustainable velocity.
In practice, these gates cut rework while raising the floor on quality, especially for complex UX work that touches multiple surfaces.
Side Quest: The Phonettes!
Not everything in this six-month AI journey was about workflows, velocity charts, and design systems. I also went down a rabbit hole trying to make AI music sound like it rolled straight out of 1964. Using Udio, I crafted prompts to channel the girl-group magic of The Shangri-Las and The Ronettes. Complete with layered harmonies, wall-of-sound production, tambourines, echo-heavy snares, even a spoken-word bridge. The result was The Phonettes, an imaginary 60s pop group that never existed, but could have. It was equal parts nostalgia experiment and technical challenge: proving that with the right direction, AI can evoke something surprisingly human, imperfect, and alive. Isn't that what design is really all about?
Conclusion: Redefining the Designer’s Role
This six-month AI upskilling journey proved that velocity and quality don’t have to compete. The designer’s role is no longer defined by execution, but by curation, taste, and strategic guidance. Knowing which prompts to craft, which outputs to keep, and what feels right, relevant, and human.
AI can generate endlessly, but it’s our ability to curate, refine, and translate vision into value that makes the work resonate with people and drive business forward.
NEXT CASE STUDY 🕵
ALLUDO / PARALLELS
Designing the Future of Remote Work
Simplifying secure remote access with intuitive user experiences across two enterprise products: Parallels Browser Isolation and Parallels DaaS. I led 0 → 1 UX design, developing scalable systems, modular interfaces, and high-trust user flows, delivering clarity and control for IT admins and end users alike.
<10 min
SYSTEM SETUP
90%
TASK SUCCESS
