T H E W A L K

Design Technologist,
AI Infrastructure,
Prototyping.

← Back to Projects
Platform
Platform

Cloud AI UX: The Agentic Designer Toolkit

Role
Senior Design Technologist: architected and built the toolkit end-to-end, authored deployment standards
User Problem
Designers and developers were blocked from rapid prototyping by complex local configurations and disjointed deployment processes.
Business Problem
No unified, high-velocity infrastructure to scaffold, deploy, and collaborate on interactive AI prototypes at scale.
Impact
Adopted by 50+ UX/PMs/Engineers and multiple teams across Google. Infrastructure used to ship keynote demos for Google Cloud Next '26

Why I built this

Traditional interactive prototyping often suffers from the “Implementation Gap” (visual prototypes that remain hollow simulations disconnected from actual APIs, data sources, and cloud-native services). Designers and design technologists are frequently bottlenecked by local machine setup, environment configurations, and deployment complexity.

I engineered the Cloud AI UX Toolkit to turn any local development workspace into a high-fidelity prototyping hub. It establishes a unified platform where design technologists, product engineers, and AI agents collaborate within a shared technical context. The toolkit completely automates local onboarding, workspace validation, and branch-based cloud sandbox deployments.

What I built

I designed and implemented the platform’s core architecture, including a globally linked command-line utility and a set of local IDE skills.

1. The vibe CLI

Built with TypeScript and Commander.js (189 commits), the globally linked vibe command-line interface handles system hygiene and workspace orchestration:

  • vibe onboard: An interactive wizard that manages GitHub authentication, registers local SSH keys, configures Git identity, and boots a pre-configured template workspace.
  • vibe doctor: A diagnostic health-check engine that validates the local machine’s toolchain (dependencies, CLIs, configurations, library versions) and outputs actionable remediation steps for missing packages.
  • vibe scaffold [name]: Generates a self-contained, React + Vite prototype configured with Google Material Design 3 components.
  • vibe physicalize [path]: Replaces local workspace symlinks with actual physical file copies. This architecture ensures that every scaffolded prototype carries its own functional workflows and components, making it fully portable and immune to file-watcher failures in remote IDEs.

vibe CLI: automated onboarding wizard

2. IDE-Native Command Registry

Every scaffolded workspace includes an integrated registry that local IDEs auto-discover, exposing high-level slash commands directly inside the chat panel. This allows design technologists to invoke complex automation scripts using natural language commands:

  • /scaffold [name]: Provisions a new prototyping workspace.
  • /vibe-apply (Visual Sync): Intercepts browser-based CSS and layout adjustments made in the inspector and programmatically maps them back to the local source files.
  • /deploy: Deploys the active branch as an isolated, unique Cloud Run sandbox instance.
  • /review-pr: Automatically records a demonstration walk-through of the interface and generates an interactive report for code review.
  • /deploy-zipline: Uploads the compiled assets to a lightweight sharing bucket for instant URL generation.
  • /draw: Renders a vector-drawing overlay directly over the live browser viewport for annotating feedback.
  • /comments: Mounts a collaborative, database-backed commenting sidebar on top of the prototype to aggregate team reviews.

Advanced Prototyping Workflows

The platform supports enterprise-grade delivery workflows configured with minimal setup:

Branch-as-a-Service

By running /setup-ci inside the IDE chat, a workspace is instantly connected to a secure Google Cloud build pipeline. Once enabled, every git push automatically compiles the code, spins up an isolated sandbox environment (e.g., vibe-feature.run.app), and logs the URL directly in the team’s central dashboard.

Automated deployment via Zipline and local IDE integration

Lifecycle Governance

To prevent resource and deployment clutter across large teams, running /setup-reaper configures an automated branch lifecycle manager. This lets the team easily clean up and /reap their own inactive sandboxes through a secure proxy interface.

Shipped Outcomes

  • Keynote Enablement: This identical infrastructure was used to develop and ship Google Cloud’s flagship conversational commerce demos for the main stages at Cloud Next ‘25 and Cloud Next ‘26.
  • Cross-Org Adoption: The toolkit was adopted by CoreUX, Corporate Engineering, and Material Design teams to standardize rapid prototyping across their respective workflows.
  • Velocity Boost: Reduced initial developer-onboarding setup from several days of manual manual scripting to a 10-minute guided wizard, enabling teams to deploy and iterate 5–10 times daily.

Artifact Evidence

📎 fog-onboarding-preview.mp4 📎 zipline-jetski.mp4 📎 Cloud AI UX (go_cloud-ai-ux-workflow).pdf 📎 Cloud AI UX (go_cloud-ai-ux).pdf

Project: cloud-ux-ai-blueprint

Access Restricted

Access Required

Enter the access key to view projects

Hint: See intro email for access key.