Day 1: UI First and the Visual Blueprint

Before the agent writes a single line of backend code, it needs to know what the result should look like. So we started with UI — and it was the right call.

Why UI first?

The classic approach starts from the database or API. You define a schema, write the service layer, and the UI comes at the end. AI agents inherit this approach — and they're making a mistake by doing so.

The problem is that without visual context, the agent optimizes for the wrong thing. It writes a technically correct solution that doesn't match what the user actually needs to see. Iterations then become expensive — and in the agentic world, expensive literally means expensive.

That's why day 1 belonged to the UI. Wireframe, page layout, key components. The agent received a natural-language description of the functionality and its task was to design a visual blueprint — what goes where, how navigation works, what the data schema looks like from a display perspective.

Agentic AI vs. generative AI: where's the difference

Generative AI answers queries. You give it a prompt, you get an answer. Each conversation is isolated — AI doesn't know what you discussed last week, has no access to your code, can't run a terminal command.

Agentic AI works differently. It receives a goal and tools. It can read files, write code, execute commands, call APIs. It plans a sequence of steps, carries them out and responds to results. It's not a conversation — it's a process.

Generative AI

  • Responds to individual queries
  • No access to tools
  • Every conversation starts from zero
  • Output: text or code to copy

Agentic AI

  • Plans and executes sequences of steps
  • Calls tools (git, terminal, API)
  • Maintains context across steps
  • Output: working code in the repository

MCP: how the agent talks to tools

Model Context Protocol (MCP) is an open standard that defines how an AI model communicates with external tools and data sources. Instead of every tool implementing its own API for each model separately, MCP provides a unified interface.

In practice: the agent can call an MCP server for git and commit changes, then call an MCP server for the database and check the schema, then call an MCP server for testing. All via the same protocol, all within one work cycle.

For day 1, the filesystem MCP server was key — the agent read existing code and wrote new components directly into the project.

What was built on day one

By evening the agent had a visual blueprint ready: a list of pages with described layouts, the data types needed for display, and a rough component plan. Not working code — intentionally not. Day 1 was about understanding, not implementation.

This was the moment I realized the agentic approach is different even in its process. The agent doesn't rush to code. Given the right context, it plans first.

Want to see how business processes can be automated? Book a consultation — we start where vibe-coding ends.


In the next episode

Day 2 brings the orchestrator, the first real code, and a key finding about the division of labour between AI and human.