Heroes Dev Log #18: Faster Prototypes with Mobile Vibe Coding

All of us at Latitude are heavy users of AI. I’m not just talking about the story models implemented into AI Dungeon, but even for the day-to-day tasks of running a company and developing products. We are quite liberal with providing every member of our team access to AI tools that they need, whether it's pro accounts to ChatGPT, Claude Code, Cursor, Midjourney, and a host of other tools.

Over the last few months, I've been taking advantage of these AI toys (er…tools) that we get to use by teaching myself vibe coding and developing little side projects. I’ve spent the most time using Cursor and, most recently, have shifted to Claude Code as my preferred coding agent. It's addicting and fun, but one of the frustrations I've had is the long iteration times between my prompts and the resulting AI-generated code. It can take anywhere from 1 to 10 minutes for the AI to complete its tasks. Naturally, I find myself working on other things while I wait. When I’m not at my desk, I've taken my laptop all over the place—coding while I'm making food, doing chores, or even relaxing. However, laptops are not really all that convenient to haul around.

That limitation became more painful over the last couple of weeks. Recently, I started working with the Heroes team to design UX prototypes. Although my primary focus has been on our Platform and Community teams, my UX background lends itself well to the current stage of the Heroes UX design, and I’m honored to work with the Heroes team for a bit. Like many in our company, my time is spread thin across several important priorities.

I started thinking to myself, "If only I could vibe code from my phone, then I could work on the Heroes prototype even more!"

Well…I figured out a way to do just that, and it might be my new favorite way of using AI 😈. I tried mobile vibe coding on Heroes earlier this week and, in two days, created a working prototype of a new UX. I was able to push forward the vibe code sessions while making food, going on walks, or even while lying in bed.

Rest assured, this vibe coding is for prototyping only. Once we’re happy with the overall user experience approach, a qualified front-end developer will rework the prototype into production-ready code for you to use and enjoy.

We thought it might be fun to share with you how to set up your own mobile vibe coding environment. If you are using a Mac for your own development, this process might work for you as well.

I’m very fortunate to be part of a company like Latitude that is not only creating new experiences like Heroes and AI Dungeon that feature AI, but that is also open to and actively finding ways to make working better by incorporating AI into our processes and workflows. And while the nerd in me enjoys getting the chance to use these new AI tools, I’m even more excited thinking about the new ways this means we can create even more value for our players and community.

—

Devin / matu / seaside_rancher

VP of Experience, Latitude

1. Overview

This walkthrough will cover a few key areas to get this set up and working for you.

• Secure tunnel between your Mac and iPhone/iPad (Tailscale)
• Always-on terminal session that survives drops (tmux)
• Polished mobile client to reach it (Termius)
• Preview local builds of your project on your phone

2. Install & Sign In to Tailscale on Your Mac

Typically, your computer's local host server is only available on your local network. Tailscale is a service that creates an address that you can use to connect remotely to your computer from anywhere and run a shell (which is basically a terminal session). It is completely free for what we need.

Install

brew install --cask tailscale     # Homebrew
sudo tailscale up                 # launches login in browser

If you don’t use Homebrew, grab the .pkg installer from tailscale.com/download and double-click it.

Sign In

Choose Google, Microsoft, GitHub, or email—whatever is easiest.

Tailscale will assign this Mac a private address like 100.104.7.15.

3. Peek at the Tailscale Admin Console

1. Visit https://login.tailscale.com in any browser.
2. Under Machines, you’ll see your Mac, plus any other devices already linked.
3. Click the pencil ✏️ icon to give them friendlier names (e.g., mac-studio).
4. You can disable/expire devices here later if they’re lost—good security hygiene.

4. Ensure SSH (“Remote Login”) Is On

To make sure Tailscale works properly, you need to enable settings on your Mac that ensure the SSH protocol is working. The simplest way is to enable it in your system settings.

1. System Settings ▸ General ▸ Sharing
2. Toggle Remote Login → ON
3. Note the username macOS shows (usually your login short name).

That’s genuinely all you need—no extra firewall tweaking because Tailscale traffic is already encrypted and scoped to your private tailnet.

(CLI lovers can still run sudo systemsetup -getremotelogin to confirm it reports Remote Login: On.)

5. Install tmux and Start a Session

tmux is a very interesting utility that enhances the capabilities of your shell terminal. The reason that we are using it is so that whatever shell terminal you are accessing on your Mac can also be viewed on your phone. This is what allows both the phone and the Mac to be editing the same terminal window at the same time. Without this, if you were accessing your Mac with Termius, it would be executing shell commands from your phone through your Mac but you wouldn't be able to see or pick up where you left off from your Mac since those commands would be running in the background. So tmux is a critical part of this workflow.

Install

brew install tmux           # takes a few seconds

Run tmux

Simply open up a new terminal window and type in tmux. Once it has been started, it will be running indefinitely unless you explicitly kill the session. Meaning, if you close your terminal window, it will still be running in the background.

tmux

Re-attach later

Because sessions can be happening in the background, If you ever lose the session, you can always get it back by using the attach command.

tmux attach

Learn tmux

tmux has a number of shortcuts and commands that you'll want to get familiar with. The ones I use the most are the commands for starting a new window, moving between windows, closing windows, etc. Reference a cheat sheet to learn how to run these commands. Tmux Cheat Sheet & Quick Reference | Session, window, pane and more

6. Prepare Your iPhone/iPad

Now we need to install the apps on your mobile device. Tailscale has a dedicated iOS app that lets you connect to your Mac using the setup that we've already configured.

Termius is a SSH client that is going to allow you to edit in a shell terminal from your phone. It is also free for what we need.

Install Two Apps

Sign In to Tailscale on iOS

Open Tailscale → Log In with the same account → Accept the VPN profile.

You should now see your Mac in the device list with a green dot.

7. Create a Host Entry in Termius

Now you're going to create what is called a host in the Termius app. You are going to fill in the information from your Mac. Once this is saved, you can easily log in to your Mac terminal with one tap.

1. Open Termius
2. Hosts → +
3. Label: My-Mac (Choose whatever name you want)
4. Address: your Mac’s Tailscale IP
5. Port: 22
6. Username: your macOS short name. Run whoami in a terminal window if you don’t know what your username is
7. Password: This is your Mac OS password for your user.
8. Tap Save. On first connect, Termius asks for the password and can store it in the iOS Keychain (Face ID protected).

Save.

9. Connect & Start Vibe Coding

1. In Termius, tap the new host → Connect. First time only: tap Yes to trust the fingerprint.
2. Attach to tmux:

tmux attach

Your prompt, files, and any running scripts are exactly where you left them on your mac. If the mobile signal drops, reconnect and attach again—tmux never quits.

Once it's connected to your Mac, you can run Claude Code. You can create tmux windows that are running your local dev server, perhaps using yarn dev or npm dev. It all works.

Remember all of this is running on your Mac, so if you get back to your Mac, you can pick up right where you left off.

10. Preview Local Build on your Mobile Device

Obviously, an important part of vibe coding is being able to check your work. To do so, you will use the Tailscale IP address and type it into your web browser. Be sure to add the localhost server port number at the end. It might look something like this:

http://120.123.121.42:3000

As you make changes and save files, you’ll be able to preview them from your phone!

11. Enhancements!

Keybindings

I've played with a few quality of life changes that make the overall process better.

For instance, Termius doesn't allow you to scroll easily through past history of cloud code, so I implemented some key bindings that allow that to happen.

Another key binding I added was the ability to do shift tab on iOS. The Shift key doesn't actually send a shift signal; it simply sends a capital letter. So I have set a key binding of Ctrl+T to operate essentially like the shift tab, so that you can toggle between auto-complete and planning mode in cloud code.

To do this, you need to create/edit a config file for tmux using this command:

nano ~/.tmux.conf

Then you can copy and paste my configuration file, or make it your own.

### Mouse & scrolling ##########################################

# 1. Enable mouse for pane switching, resizing, selection, wheel events
set -g mouse on

# 2. When you scroll *up* with the wheel / two-finger swipe,
#    hop into copy-mode automatically so history starts moving.
#    When already in copy-mode, keep scrolling.
bind -Troot WheelUpPane if -F "#{pane_in_mode}" \
    "send-keys -M"         \
    "copy-mode -e; send-keys -M"

# 3. Optional: Keep normal scrolling (WheelDownPane) as-is so
#    scrolling *down* exits copy-mode automatically once you hit bottom.
bind -Troot WheelDownPane if -F "#{pane_in_mode}" \
    "send-keys -M"         \
    "send-keys -M"

# Ctrl-T  ⇒  send “back-tab” (ESC [ Z)
bind   -n C-t send-keys Escape '[' 'Z'


### --- Plugins ---------------------------------------------------
set -g @plugin 'tmux-plugins/tpm'                 # the manager itself
set -g @plugin 'tmux-plugins/tmux-resurrect'      # saves/loads sessions
set -g @plugin 'tmux-plugins/tmux-continuum'      # autosave + autorestore

# --- Optional quality-of-life flags ------------------------------
set -g @resurrect-capture-pane-contents 'on'      # keep scrollback text
set -g @continuum-restore 'on'                    # auto-restore on tmux launch
set -g @continuum-save-interval '15'              # minutes between autosaves
set -g @continuum-boot 'on'                       # launch a tmux server at login

Once you are done, you need to reload the tmux config so that it will work. This command reloads it without needing to close tmux.

tmux source-file ~/.tmux.conf

tmuxp

Another shortcut I'm playing with right now is an addition to tmux called tmuxp. Essentially, it lets you create a YAML-based configuration for tmux sessions so that you can easily start and reload sessions to your liking. Here’s a tutorial you can use to get started: tmuxp Quickstart

Here’s a sample of my yaml config file for my sessions. As you can see, I use one window to run the AI Dungeon API, another for my local server, a third dedicated to self-hosted GitHub Runners for a side project, and a fourth window specifically for running Claude Code.

session_name: office-mini
start_directory: ~/repos

windows:
  - window_name: aid-api
    start_directory: ./latitude        # → ~/repos/latitude
    panes:
      - yarn api

  - window_name: aid-server
    start_directory: ./latitude
    panes:
      - yarn aid

  - window_name: github-runner
    start_directory: ./nofo/actions-runner
    panes:
      - ./run.sh                      # or "./run.sh --once" etc.

  - window_name: aid-claude
    start_directory: ./latitude
    panes:
      - claude

All set!

You now have a friction-free, encrypted tunnel straight into a persistent Mac terminal—perfect for “remote vibe coding,” quick fixes on the go, or chatting with Claude’s CLI tools from a hammock. Happy hacking!