← All posts

August 12, 2026

By Farhan Ahmad

How I Built My React Website With a 4-Agent AI Workflow

How I Built My React Website With a 4-Agent AI Workflow
Behind the Build · AI + Development

I Didn't Build My Website With One AI.

I built four different AI perspectives around the way I already think, design, develop and review my own work. AI helps accelerate the process. I still make the final decisions.

React Development UI / UX Design AI Workflow Creative Development Zoave
The system / 00

One project.
Four versions of me.
One final decision.

VERSION / 01

The Strategist

Thinks before anything gets built. It questions the idea, structure, purpose and user journey.

Structure · Research · Direction
VERSION / 02

The Designer

Questions how the experience should feel, how information should be presented and how the interface behaves.

UI · UX · Visual Direction
VERSION / 03

The Builder

Turns the direction into a working product using components, logic, interactions and reusable systems.

React · Logic · Development
VERSION / 04

The Critic

Does not try to create more. It looks for what is inconsistent, unnecessary or simply wrong.

Review · QA · Improvement
Think Design Build Challenge

I stopped asking AI to “build my website” and started giving it different responsibilities.

I didn't want to build another normal portfolio website.

When I started building my website, my goal was bigger than putting a few projects on a page and adding a contact button.

I wanted the website itself to demonstrate how I think and work: design, development, e-commerce, experimentation and AI working together as one system.

The problem was that a project like this has a lot of moving parts. Navigation, responsive layouts, animation, reusable components, project pages, products, services, authentication interfaces, SEO, performance and hundreds of small decisions all need to work together.

So instead of treating AI like a button that magically creates websites, I started treating it like something much more useful: a digital extension of my own workflow.

PRINCIPLE / 01

Think before building.

Define what the product needs, why it exists and what the person using it should actually experience.

PRINCIPLE / 02

Separate the thinking.

Different parts of a complex problem deserve different perspectives instead of one conversation trying to solve everything.

Why I use four AI perspectives instead of one AI doing everything.

One of the biggest mistakes I see with AI-assisted development is putting an entire project into one conversation and expecting one perfect answer.

That is not how I naturally work either.

When I design something, I switch perspectives. I question the idea. I look at the visual system. I build. Then I step back and criticize what I created.

So I designed the AI workflow around that behavior.

01

The Strategist

Organizes the idea, page hierarchy, functionality, user journey and what actually needs to exist before development begins.

02

The Designer

Questions hierarchy, layout, interaction, responsive behavior, typography and how each section contributes to one coherent experience.

03

The Builder

Turns that direction into React components, application logic, interactions, reusable systems and working interfaces.

04

The Critic

Searches for inconsistent spacing, broken responsive behavior, unnecessary complexity, weak interactions and decisions that no longer make sense.

“The best AI workflow isn't the one that generates the most. It's the one that helps you make better decisions.”

I still control the architecture, visual direction and final decisions. The different perspectives help me explore, execute and challenge ideas faster.

I keep parts of the internal system private because the exact prompts are not the important lesson. What matters is the separation of responsibilities.

React gave me the freedom to build the website as a system.

I didn't want every page to become an isolated design. I wanted reusable pieces that could evolve as the website grows.

Zoave / Development Flow
01 Design the experience
02 Break it into reusable components
03 Build the React structure
04 Add interaction and purposeful motion
05 Test responsive behavior
06 Review, simplify and improve

A project card should not need to be redesigned every time a new case study is published. Navigation should behave consistently. Buttons, typography, spacing and interactions should feel like parts of the same product.

That is where thinking in components becomes valuable. The website can continue growing without every new feature becoming another disconnected piece of code.

Good development cannot rescue bad design decisions.

I care about more than whether something technically works. Spacing matters. Typography matters. Motion matters. Hierarchy matters. Mobile behavior matters.

01 / CLARITY

Clarity before decoration

A visual effect stays only when it improves the experience or gives the product meaningful character.

02 / MOTION

Motion with purpose

Animation should guide attention and create continuity, not make everything move merely because it can.

03 / MOBILE

Mobile is not an afterthought

Complex desktop ideas need intentional mobile behavior, not simply smaller dimensions.

04 / SYSTEM

Consistency creates quality

Repeated typography, spacing and component behavior make the interface feel professionally constructed.

The interesting part isn't that AI helped build it.

AI can generate a lot of code very quickly. That alone does not create a good product.

Someone still needs to understand what the website is trying to achieve, recognize when an interface looks wrong, reject unnecessary complexity, test what has been produced and decide what deserves to remain.

Sometimes the best improvement isn't generating more code. It is deleting something.

The actual workflow Human-directed system
FARHAN
STRATEGY Question the problem
DESIGN Shape the experience
BUILD Turn decisions into a product
CRITIQUE Break, review and improve

This is also why learning the underlying skills still matters. The more I understand design and development myself, the better I can direct AI and recognize when its output needs correction.

Use AI as leverage, not as your identity.

My website is still evolving. That is intentional.

I treat it as a working digital laboratory where I can experiment with development, design systems, e-commerce ideas, motion and new ways of working with AI.

Don't simply ask AI to build your entire project. Build a process around it.

01

Start with the problem before choosing the technology.

02

Separate planning, design, development and review.

03

Create reusable components instead of repeatedly rebuilding UI.

04

Review AI-generated code instead of accepting every output automatically.

05

Design mobile behavior intentionally.

06

Keep learning the underlying skill even when AI makes execution faster.

07

Keep human judgement as the final quality-control layer.

07 / What's Next

AI should make your process stronger.
Not replace it.

In future articles, I'll break down individual pieces of this workflow: React development, UI/UX decisions, e-commerce systems, AI integrations, motion experiments and practical lessons from real projects.

I won't publish every part of my internal system, but I want to share enough practical information to show how these technologies can work together.

The goal isn't simply to build more things with AI.

The goal is to build better things with the tools now available to us.

F

About Farhan

I work across digital design, web development, e-commerce and AI-assisted workflows. I use this blog to document what I learn while designing, building and experimenting with modern digital products.

0 comments

Sign in to leave a comment.