Mouth Coding

Lately, I’ve been talking websites into existence. Not metaphorically, but actually sitting in important meetings with people — clients, collaborators, my wife, friends, neighbors — watching real websites materialize in front of us as we converse.

I’ve been half-jokingly call it mouth coding, and the more I use that term the more I like it. Mouth coding is one of the things that has me most excited about this new era of digital creation: human beings getting together and actually collaborating. Actually making something together. Not just talking about the work (lord knows we’ve all had our fill of that), but literally talking the work into existence together.

What mouth coding looks like

My wife Melissa works as a counselor and arts therapist at a small private practice called Lucent Counseling in Pittsburgh. The owner, Andrea, is fantastic and is committed to helping people heal, move past trauma, explore multiple therapeutic modalities, and live healthier lives. Her passion for this mission is abundantly clear.

Like many small business owners, Andrea is spread thin juggling many-and-varied tasks. She created a Wix-powered website and did her best with the tools and time she had. The website exists, but she admits it needs some love to better align it with the practice’s mission.

Enter Melissa! In addition to her counseling role, Melissa is now helping with marketing, communications, and design work. (Melissa’s background designing digital experiences for Nike and other huge brands certainly doesn’t hurt here 😂). I offered to help with the website (trying to be a good partner haha), and had a great conversation with Andrea about her values, mission, and eventually goals for the website.

From there, Melissa and I found a time to sit down outside on a sunny afternoon to create the website. In the course of a single hour, Melissa and I mouth coded a website that was a vast improvement over the current website. Here’s the video of our session:

We cover a lot of ground in a short amount of time, pulling in context from our conversation (Melissa wanted to be off-screen and was at a distance so forgive the distant audio), the live website, Melissa’s design exploration work, best practices (including some I didn’t even know about!), and more to create the basis for a brand-new website for the practice. It starts as a specification that we refine together, and then eventually give the green light to generate the actual website.

What exactly is mouth coding?

Mouth coding requires a few ingredients:

• An actual conversation between a person — or better yet multiple people — and an LLM to interpret the intention and facilitate the creation of the website.
• Live transcription — Speech-to-text transcription during a conversation becomes essential for acting in real time. I’m now used to staring at a grid of funny-sounding faceless AI notetakers on Zoom calls. My personal favorite is Notion’s AI meeting notetaker/ Notion is already my home base for all of my operations, so meeting notes ooze into my workspace, enriching my knowledge base with each additional conversation.
• Sturdy web infrastructure — While mouth coding with free-reign vibe coding is possible, if we’re trying to make something real we need to be able to answer “Is it good?” with a resounding “yes!” That’s the theme of our entire AI & Design Systems course: couple the generative powers of AI with hard-earned, high-quality UI infrastructure to create quality websites at speed and scale.
• A live preview — actual pixels rendering as the conversation moves. This could be in Storybook like what Dom showed me, could be a contained artifact the agent produced in the context of a chat, could be in an experimental real-time UI environment, or could be in the actual product environment. But the point is to actually SEE what you’re collectively creating.
• Additional context — Existing artifacts, agreed-on values, goals, context, constraints, are all helpful to have on hand before and during the conversation. This is where starting with a specification first can be really helpful. The spec is able to pull all of the different threads together into a coherent plan of attack that all takes place before the actual construction happens.
• Human taste, judgement, critical thinking, and skills — And here is the sauce: humanity! Hooray humans! Everyone involved in the conversation uses their collective talents and discernment to make calls about what any result should be.

These ingredients set the conditions for a successful mouth-coding session, and underscores an important core value:

AI should facilitate human creativity, not replace it.

AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.
AI should facilitate human creativity, not replace it.

Honest-to-goodness collaboration

For my entire career, I’ve been clamoring, begging, cajoling, prodding, and pleading to get people to collaborate with one another. But alas, the industry has moved into insular silos, building rigid walls built from Jira tickets. Cross-disciplinary collaboration between designers and developers has been relegated to a fucking toggle switch. Even in this new era, it feels like the real desire to wire all of these MCPs up is so we can avoid having to talk to one another.

Not only is this extremely depressing, it’s also terribly fragile, one-dimensional, and results in lackluster work. Genuine human collaboration has always been the answer, and these new AI tools can help facilitate that human collaboration in ways that are both old and new. I’ve noticed a few key things since the arrival of this new generation of tooling: fewer things slip between the cracks. context is able to be retrieved on demand, blind spots and areas for improvements are surfaced, and next steps become clearer. As someone who goes here, there, and everywhere over the course of a conversation, this added structure is extremely welcome.

But above all, here’s what excites me most about mouth coding: it is accessible. it is inclusive. It is participatory. It democratizes the design process. Mouth coding allows for a diversity of voices — all with unique, valid perspectives and crucial context — to actually participate in the creative process. To work together to collectively sculpt the work. I’m well aware of the irony: this AI-assisted process feels like the most human digital collaborative work I’ve experienced in years.

And because the website artifact is conjured out of the ether before our very eyes, most everyone recognizes it as a prototype. But the big a-ha moment for people is when we make the first iteration after the initial website generation. As soon as people see a little tweak happen (“Make the heading say ‘Better together'”), everyone lights up. They truly understand this is a wet ball of clay to be iterated over together. Ideation. Sculpting. Refining. Dialing things in. Honing. You just keep talking, and the thing keeps improving until either things feel really good or we run out of time.

Of course, mouth coding alone likely isn’t going to get you to the finish line. For Lucent Counseling’s website, we still need to write final copy (we have a rule not to let AI author copy. Scaffold and first draft? Sure. Final copy? Nope.), set up Netlify, transfer domains, and do the plumbing work to bring the website to life. But it is worth stating that even all of that work is a lot less intimidating, laborious, and time consuming than it once was.

Mouth coding for good

Mouth coding facilitates human collaboration and unlocks a more inclusive, accessible, and participatory design process that represents a diversity of perspectives.

For these reasons, I’m especially excited at the prospect of mouth coding to help non-profit organizations and community-oriented small business. These mission-driven organizations are tragically underfunded and their well-meaning teams are spread thin. They often don’t have funding for professional, full-time web staff. Their languishing websites tend to reflect that unfortunate reality.

While the people at these organizations may not be professional web designers & developers, they are able to clearly articulate their noble mission and know what the website should be in order to help them advance their mission. With mouth coding, they can articulate their vision and watch it come to life before their very eyes.

Here’s the thing: this still requires some degree of technical know-how. And guess what! Many of the professional designers and developers in my sphere are eager to help their communities, work with non-profits, and put their energy towards helping noble causes. Time and effort have always been the biggest legitimate blockers. This new era of tooling is making the means of production much faster, allowing for professional practitioners to help organizations without it needing to feel like an additional full-time job. This is great news for organizations and practitioners alike.

I’ll eventually be conducting workshops on mouth coding (amongst other things!), and if that sounds interesting you can sign up for my newsletter to stay in the loop.

In the meantime, I’d love to facilitate more mouth coding sessions with non-profits and post them publicly to help teach people how to do this. So if you know of amazing non-profit organizations who would be open to publicly mouth coding their website with me, feel free to send them my way!