top of page

How I'm designing and engineering a multi-agent advertising production system, from paper sketches and swim lane diagrams through a shipped frontend and live automation pipeline, as a solo founding designer and builder.

reedpen-icon-512.png
Role
Founding Product Designer & Builder
Product
ReedPen.io — AI-powered marketing production platform
Timeline
Nov 2025 -- Present
Status
Frontend shipped. Backend pipeline built and in pre-launch testing.

Let's face it: marketing is expensive. For small businesses, production-quality advertising has historically required agencies, freelancers, video editors, voiceover artists, and weeks of back-and-forth. For larger companies, it requires all of that plus internal review cycles, brand compliance checks, and budget approvals. Either way, a single ad can cost thousands of dollars and take weeks to produce. At the same time, AI tools capable of generating video, voiceover, and copy have matured rapidly. The raw capability exists. 

Untitled design (35).png
ReedPen logo.png

What doesn’t exist yet is a product that assembles those capabilities into a coherent, brand-faithful production workflow that a marketing team can actually use without needing to understand AI, prompt engineering, or video production. ReedPen is my answer to that gap.

The reason AI-generated marketing often looks generic isn’t that the models are bad. It’s that they’re working without enough brand context. With the proper inputs, the output quality changes dramatically. ReedPen’s job is to collect that context systematically and route it to the right agents in the right order.

From Paper to Pipeline

Phase 1: Paper First.

I drew site maps showing every page and its connections, swim lane diagrams mapping user flows through the product, and rough interface sketches exploring how the production brief form might work. This phase was about making decisions cheaply and figuring out the information architecture, user journey, and interaction model before committing to a layout.

IMG_1758.jpeg

Phase 2: Tech Specs.

I leveraged an LLM to help me understand the technical requirements of what I wanted to build. Then, I outlined those requirements and defined each piece of my AI-orchestrated workflow needed to make the product actually work.

reedpen acpture.PNG

Phase 3: Building in n8n.

Rather than building a single AI workflow, I designed an intelligent ecosystem. By orchestrating Airtable, ChatGPT, HTTP services, and iterative feedback loops, I created ReedPen's proprietary automation engine capable of executing complex creative workflows with minimal human intervention.

Capture.PNG

Phase 4: Building with Claude Code.

I built the entire frontend in HTML using Claude Code. My process was direct: I shared my sitemap, described in plain language what I wanted each page to do, and provided my own landing page design as a visual reference. 

 

I also used Claude Code to build page animations, navigation logic, and responsive behavior across the site. The result is a frontend that matches my Figma and Bubble designs with a level of fidelity I couldn’t have achieved as quickly working alone in code.

Claude code reedpen.PNG

Product Design: Key Decisions

Frontend Evolution.

Every product begins with a system. I started by defining the product's information architecture and core interactions in Figma, using low-fidelity wireframes to validate the experience before investing in implementation. Once the foundation was solid, I transitioned into Bubble to rapidly prototype the product. From there, I shifted my workflow and began leveraging Claude Code, using AI to accelerate implementation, reduce technical overhead, and iterate on the product at a pace that would have been difficult to achieve alone.

Figms Reedpen.PNG
ReedPen Landing Page.PNG
reedpen landing capture.PNG

A production team, not a prompt.

The backend of ReedPen is an n8n workflow that orchestrates a multi-agent production team. Each agent has a distinct role modeled on how a real advertising production works. 

Agent specialization improves output quality.  Separating concerns means each agent can be optimized for its specific job.
 

The pipeline is triggered by a form submission. Airtable captures the form data and passes it to n8n, which orchestrates the agent sequence. The user never sees this complexity. They simply submit a form and wait for their ad.
 

n8n capture.PNG

What I'm Learning...

ReedPen is still in development, which means this case study captures a process in motion. The most important things I’m learning are happening now, before launch:

Designing without research is a hypothesis, not a decision.

User testing will tell me which design decisions were right and which ones need to change. Building a product solo means accepting that some things you ship will be wrong, and designing for the ability to change them quickly.

Solo building changes what “design” means.

The handoff between design and engineering disappears. It's important to embrace challenges on both sides of the product development cycle.

Design craft matters, but agent craft matters just as much.

An aesthetic form that routes to a mediocre pipeline produces mediocre ads. Thoughtful agentic design is the key to launching a quality product.

bottom of page