Building Visual Branding Website in 2 Weeks using Agentic AI Coding

My first web project took 6 weeks. My second took 2. The difference wasn't experience—it was how I worked with AI.

In November, I finished building an Anki-style card learning system. It was a solid project, but six weeks felt long for what I'd built. When I needed cohesive branding images to showcase my work, I realized I had another problem worth solving—and an opportunity to try something different.

I'd been following Leon van Zyl's Agentic Labs approach to coding with AI. The core idea: treat AI agents as specialized team members, not just autocomplete on steroids. Define roles. Create structure. Orchestrate the work.

So I challenged myself: could I build a full SaaS platform—not a prototype, but production-grade infrastructure—in weeks instead of months?

The answer was yes. But the lessons went deeper than speed.

---

What I Built

Visual Branding solves a specific problem: creating consistent brand imagery is tedious. You know your brand colors, your style, your vibe—but translating that into cohesive images across different contexts takes time and design skill.

The platform understands your brand style and generates images that match.

Core Features

5-Step Brand Style Wizard

The onboarding walks you through defining your visual identity:

1. Brand Identity — Name, tagline, industry context
2. Color Palette — Primary, secondary, accent, and background colors
3. Visual Style — Flat, 3D, watercolor, realistic, minimalist, and more
4. Typography Feel — Modern, classic, playful, elegant
5. Mood & Elements — Additional parameters that shape the output

Once defined, your style persists. Every generation pulls from these parameters automatically.

Multi-Provider Image Generation

I integrated four AI models: FLUX Pro, FLUX Schnell, SDXL, and Gemini 2.0 Flash. Users pick their model, select an aspect ratio, and the system handles the rest—prompt enhancement, dimension mapping, and provider routing.

This multi-provider architecture wasn't the original plan. It emerged from solving a problem I'll discuss later.

User Experience

• Personal gallery with favorites
• Prompt copying for easy iteration
• Usage tracking with a free tier (3 generations per month)
• Download functionality with proper attribution

Production Infrastructure

This isn't a weekend hack. The platform includes:

• Admin dashboard with platform metrics and user analytics
• Telegram notifications for new signups (I get a ping on my iPhone)
• Rate limiting to prevent abuse
• Security hardening with prompt sanitization

Tech Stack

For those who care about the details:

• Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS 4
• Backend: Better Auth for authentication, Drizzle ORM for database access
• Database: Neon PostgreSQL (serverless)
• AI Providers: Replicate API, OpenRouter
• Infrastructure: Vercel hosting, Vercel Blob for image storage, Upstash Redis for rate limiting

16 implementation phases. 8,000+ lines of production code. One coherent product.

---

The Approach: Agentic Coding

Traditional AI-assisted coding looks like this: ask a question, get an answer, copy-paste, repeat. It works for small tasks, but it falls apart on more complex projects.

Agentic coding is different. You treat AI agents as specialized team members with defined roles and responsibilities. My task was always to review each major step. Each agent has a scope. Handoffs are explicit. Documentation flows between contexts.

I learned this approach from Leon van Zyl's Agentic Labs methodology, and Visual Branding became my testing ground.

The 200k Context Window Trap

Modern AI models advertise massive context windows—200,000 tokens sounds infinite. It's not.

Without structure, context becomes noise. Every piece of information competes for attention. The model loses track of earlier decisions. Outputs get confused. You find yourself repeating the same instructions.

I've watched projects drown in their own context. The solution isn't more tokens—it's better organization.

My Agent Architecture

I structured my workflow around specialized agents:

| Agent | Responsibility |

| Orchestrator | Strategic decisions, phase planning, coordination |

| UI Agent | Component design, styling, user experience |

| Coder Agent | Implementation logic, API routes, database |

| Code Review Agent | Quality checks, best practices |

| Security Agent | Vulnerability assessment, input sanitization |

| Performance Agent | Load times, optimization |

| Architecture Agent | System design, scalability |

Each agent stays in its lane. The UI agent doesn't worry about database schemas. The security agent doesn't care about button colors. Focus enables depth.

The Key Insight

The orchestrating context window is the most important one. It holds the big picture—the vision, the phase structure, the dependencies between components. Sub-agents handle details within their domains.

This mirrors how real teams work. A tech lead doesn't write every line of code. They coordinate, review, and make judgment calls. The specialists execute.

With agentic coding, you become the thinker and leader. The agents are your team.

Documentation as Communication

Here's what made it work: documentation between contexts.

• Every phase had a spec file before implementation started and it had to pass its review documentation
• Every coding session got a summary document
• Decisions were captured, not just code

By the end, I had 34 session summaries. That documentation became the glue—when I started a new agent context, I could load the relevant summaries and get it up to speed.

---

The 2-Week Build

Week 1: Foundation to Features

Days 1-3 focused on infrastructure. Database schema design (14 tables with proper relations), Better Auth integration for authentication, project structure, and TypeScript configuration. The unglamorous work that makes everything else possible.

Days 4-5 built the brand system. The 5-step wizard, multi-brand support so users could save different styles, persistence and editing flows.

Days 6-7 tackled image generation. Replicate API integration, prompt enhancement that weaves brand parameters into user requests, first working generations.

By the end of week one, I had a functional product. Rough, but functional.

Week 2: Polish to Production

Days 8-9 improved the user experience. Gallery with favorites, image metadata storage, download and copy-prompt features.

Days 10-11 added visibility. Admin dashboard with platform analytics, user tier distribution, popular art styles, recent activity feeds. I wanted to see what was happening without diving into database queries.

Days 12-13 solved a real problem. Google's Gemini image generation only worked when I was connected to an EU VPN. Regional restrictions. Instead of fighting it, I built a multi-provider architecture—an abstraction layer that routes to Replicate or OpenRouter based on the selected model. What started as a workaround became a feature: users now have four models to choose from, and I'm not locked to any single provider.

Day 14 hardened for production. Telegram bot integration for signup notifications, security review, rate limiting verification, final deployment checks.

The Iteration Pattern

Each phase followed the same structure:

1. Spec — Define what we're building before touching code
2. Implement — Sub-agents handle their domains
3. Review — Code review agent checks quality
4. Document — Session summary captures decisions
5. Integrate — Orchestrator verifies it fits the whole

This pattern is repeatable. It's how I'll build the next project too. More complex, more challanging and faster :-)

---

Challenges That Used to Kill Projects

Regional API Restrictions

Google Gemini's image generation only worked with an EU VPN. In the old world, this would stall the project for days, maybe even would have killed it for me. Do I find a workaround? Switch providers entirely? Questions, questions, questions???

With agentic assistance, I researched alternatives, designed an abstraction layer, and implemented multi-provider support—all in one session. The result is actually better than single-provider would have been.

Authentication Complexity

Better Auth's hook pattern for signup notifications wasn't clearly documented. I needed to send a Telegram message when users signed up, but the obvious approaches didn't work.

The agent explored the codebase, tested patterns, and found the solution: hooks.after with createAuthMiddleware. Proper async handling in a serverless context. What would have been hours of Stack Overflow became a focused debugging session.

Serverless Race Conditions

Concurrent signup requests caused duplicate key errors in usage tracking. Two requests hit the server simultaneously, both tried to create a usage record, one failed.

The agent identified the pattern and implemented PostgreSQL error code handling (23505). Graceful handling of concurrent operations. Production-ready.

Timeout Management

Image generation takes time. Serverless functions have limits. Without proper handling, you get hanging requests, confused users, and wasted compute.

Sixty-second timeout with proper cleanup. Clear feedback to users. Reliable generation.

The pattern across all these challenges: Problems that used to block projects for weeks now get solved in hours. Not because the problems are easier—because the approach to solving them is better.

---

Lessons Learned

Lesson 1: Ops is No Longer the Roadblock

Remember when these killed side projects?

• Setting up CI/CD
• Database migrations
• Authentication flows
• Deployment configuration
• SSL certificates

I do. I've abandoned projects because the ops overhead felt insurmountable for my side projects.

With agentic workflows, these become solvable problems, not project-killers. The agent handles the complexity. You make the decisions.

The shift is profound: from "Can I build this?" to "How should I build this?" to "What should I buil next?"

Lesson 2: Structure Beats Raw Context

The 200k context window is a trap if you misuse it.

What fails: Dumping too mux complexity into one conversation. Expecting the AI to "remember" from 50,000 tokens ago. Context pollution with irrelevant details.

What works: Specific agents for specific tasks. Clear scope for each conversation. Documentation as the handoff mechanism. Fresh contexts for fresh problems.

Structure beats raw capacity every time.

Lesson 3: Orchestration is the New Skill

The most important context window is the orchestrating one.

Your job as the human:

• Define the vision and scope
• Break work into phases
• Review outputs critically
• Make judgment calls
• Know when something is "done"

The agents handle execution. You handle strategy.

This is a learnable skill. And once you have it, it's repeatable. I know I can build the next project this way. And the next one.

Lesson 4: Know When to Pause

Visual Branding is live. It's stable. It works.

But I've paused development.

Why? The framework is solid, but the core functionality needs real-world polish especially around the core feature. I need to use it myself—create my own brand images, feel the friction, understand what's missing and how I can improve it.

Only after I've lived with it will I add premium tiers and final touches.

Ship early, but know what "done" means for each phase. A working product you'll improve beats a perfect product you never ship.

Visual Branding is live and stable, intentionally paused while I use it myself. The next phase will be polish through personal use, then premium features. Timeline: weeks, not months.

---

Where Things Stand

But this post isn't really about Visual Branding. It's about what's now possible. The question isn't whether can I build it. It's whether how far can I orchestrate truly complex systems.

Challenge me.

---

Built with Agentic workflows. Total development time: 14 days.