1. The Tower Analogy
Programming becomes much less mysterious when we stop imagining it as a collection of strange commands and start imagining it as building a tower.
A tower has a foundation, rooms, walls, doors, wiring, plumbing, control systems and furniture. A website or software application has a remarkably similar structure. Different technologies perform different jobs, and understanding those relationships is often more useful than memorising thousands of individual commands.
This is the basic idea behind vibe coding. The AI can increasingly handle much of the detailed construction. But the human still needs to understand what is being built, how the parts fit together, and what should change when something goes wrong.
The first step, therefore, is not writing code. It is understanding the building.
2. The Software Tower
Consider the following correspondence:
| Software | Tower analogy |
|---|---|
| WordPress | Building management system |
| Theme | Architectural blueprint/framework |
| PHP | Wiring, plumbing, structural connections |
| JavaScript | Electrical/mechanical systems that make things operate and move |
| HTML | Rooms, walls, doors — the visible structure |
| CSS | Architecture, dimensions, decoration, finishes |
| Database | Storage/archive |
| Plugins | Specialist systems/contractors |
| Content | Furniture and things placed in the rooms |
There is one detail worth keeping straight. The theme is the overall architectural package or framework. PHP, CSS, JavaScript, templates and other assets can be components within that package. The theme therefore sits above individual pieces such as CSS rather than being another name for CSS.
Imagine the theme as the main control board at the entrance of the building. From there, different systems connect to different parts of the tower. If you want to change a room, you first need to know which part of the control system governs it.
This sounds obvious in a building. Software becomes easier to understand when we apply the same discipline.
3. HTML: The Rooms and Walls
HTML provides much of the visible structural skeleton of a webpage.
A header, article, sidebar, image, paragraph and footer are not abstract ideas. They become identifiable elements in the document structure. In our tower analogy, these are the rooms, walls, doors and other physical elements that make the building recognisable.
A simple piece of HTML can even be read almost like English:
<header>
<h1>Future Trends | AI | Human Thinking</h1>
</header>It is essentially saying: here is the header; inside it is a main heading. The computer requires exact syntax, but the underlying concepts are often surprisingly familiar.
4. CSS: Architecture and Finishes
CSS determines how those structural elements are presented.
It controls width, height, spacing, alignment, typography, backgrounds and many other visual properties. In the tower analogy, CSS is the architecture, dimensions, decoration and finishes applied to the structure.
A simple rule such as .sidebar { width: 300px; } can almost be read aloud: “Make the sidebar 300 pixels wide.”
Or consider the rule we recently used for the HPB featured image: .single-post .entry-thumbnail { width: 850px !important; max-width: 850px !important; }. Again, the underlying instruction is almost ordinary language: on a single post, make the featured image track 850 pixels wide and give this rule sufficient priority to override a competing rule.
The symbols impose precision on the language.
5. Code Is Often English Plus Symbols
This is one reason programming can look more intimidating than it really is.
Programming languages are not ordinary English, and their syntax has to be followed exactly. But many programming instructions are built from words and concepts that a human can understand.
width, height, margin, display, if, else, function and return are meaningful words. Brackets, braces, parentheses, operators and punctuation give those words a precise grammatical structure.
So a useful mental model is: Code is often human-readable ideas expressed through a machine-readable grammar of words and symbols.
The machine is unforgiving about grammar. Humans, however, can often understand the intention behind a line without knowing every rule of the language. That distinction matters enormously when AI enters the picture.
6. PHP: Wiring, Plumbing and Connections
PHP is easier to understand if we stop thinking of it primarily as another visual language.
In a WordPress site, PHP helps connect the different parts of the system and assemble the page that the visitor ultimately receives.
A template can effectively say: Get this post’s title from WordPress and place it here. Or: Get the featured image associated with this post and display it in this part of the page.
In the tower analogy, PHP is wiring, plumbing and structural connections. It helps connect the rooms to the systems that supply them.
This is also why changing PHP can have consequences beyond appearance. Move a connection in the wrong place and an entire part of the building can stop receiving what it needs.
7. JavaScript: Systems That Make Things Move
JavaScript deals heavily with behaviour and interaction.
A menu can open when clicked. A panel can appear and disappear. A page can update something without being completely reloaded. A button can trigger an action.
In our tower, JavaScript is the electrical and mechanical machinery that makes things operate and move.
The distinction is useful: HTML gives us the thing. CSS determines how it looks. JavaScript determines how it behaves. The three can work together without being the same thing.
8. WordPress: The Building Management System
WordPress sits above these individual technologies as the management system for the website.
It manages posts, pages, media, menus, users, settings and other content. It also provides the environment in which themes and plugins operate.
When you publish an article, the article is not simply written permanently into a webpage by hand. WordPress stores information about it, and the theme helps determine how that information is assembled and presented to the visitor.
The building therefore has both structure and management. The theme determines much of the structure and presentation; WordPress manages the underlying operation and content.
9. The Theme: The Architectural Framework
The theme deserves special attention because it is easy for beginners to confuse it with CSS.
A WordPress theme is a complete architectural framework/package, not merely a stylesheet.
It can contain PHP templates such as header.php, single.php and footer.php; a style.css file; JavaScript; images; fonts; template parts; and theme-specific functions.
In our tower, the theme is therefore closer to the architectural blueprint and construction framework, with a central control board connecting its various systems.
This distinction becomes important when something goes wrong. If the colour of a wall is wrong, CSS may be the appropriate place to work. If the wrong room is being assembled, the relevant PHP template may be responsible. If a button does not respond, JavaScript may be involved.
The first skill is knowing which part of the building controls the problem.
10. The Database: The Storage Archive
Behind the visible tower is a storage system.
The database stores information such as posts, pages, settings, users and metadata. WordPress retrieves that information when it needs to construct a page.
The visitor sees a finished room. Behind the walls, however, there is an archive containing the material from which that room is furnished.
This is why a website can have thousands of articles without having thousands of completely hand-built HTML pages.
11. Plugins: Specialist Contractors
Plugins add specialised capabilities to the building.
One contractor might install a security system. Another might provide forms. Another might handle SEO, backups, analytics or some other specialised function.
The advantage is modularity. You do not normally rebuild the tower simply because you want one additional capability. You bring in a specialist system.
But there is a catch: specialist systems can interact with the existing building. A plugin can introduce its own CSS, JavaScript, settings or behaviour and occasionally interfere with something the theme is already doing.
Anyone working with AI-generated code needs to understand this possibility.
12. Content: The Furniture
Finally, there is the material people actually came to see.
Articles, photographs, books, podcasts, menus and other information are the furniture and contents of the rooms.
The great advantage of a well-designed building is that the furniture can change without rebuilding the walls. The same principle should apply to software.
If changing an article requires rebuilding the sidebar, or changing a featured image unexpectedly changes the article layout, the problem may not be the furniture at all. Something deeper in the architecture may be improperly connected.
13. What Vibe Coding Actually Changes
This brings us to the central idea.
Vibe coding does not simply mean “I don’t know programming, so AI will do everything.” It represents a shift in where the human effort is concentrated.
Instead of personally constructing every brick, the human can describe the building, specify the requirements, inspect the construction and direct the builder.
That means knowing the difference between “Make my website look better” and “Keep the main article width unchanged. Extend the sidebar background to the edge of the viewport. Preserve the 48-pixel gap. Do not alter the article images.”
The second instruction is useful because it describes architecture and constraints, not merely an aesthetic wish.
14. The AI as Builder
An AI system can generate HTML, CSS, PHP and JavaScript extremely quickly. It can also explain unfamiliar code, propose alternatives, trace relationships between files and revise its work when given useful feedback.
This changes the economics of programming.
The human does not necessarily need to type every instruction manually. The human increasingly needs to specify the desired construction clearly enough for the AI to implement it.
That is why understanding concepts such as header, sidebar, template, CSS rule, PHP function, database and plugin can be more valuable to a beginner than memorising hundreds of lines of syntax. You are learning to read the building plan.
15. The Verification Loop
Software has another unusual property: much of what we build can be tested.
We can construct something, run it, observe the result, compare it with what we wanted, and modify it.
Build → test → observe → correct → test again.
That loop is one of the reasons AI works particularly well in programming.
If we tell an AI to make a sidebar wider, we can actually look at the resulting page. If the sidebar moved but the article also became narrower, we have concrete evidence that something else was affected.
The machine does not need us merely to say, “I don’t like it.” We can say: “The sidebar is correct, but the article width changed. Restore the article width while keeping the sidebar change.” Now the AI has a new constraint and a new iteration.
16. Architecture Matters More Than Syntax
When AI can produce syntax on demand, memorising every command becomes less central.
What becomes more valuable is understanding relationships. Which component controls this room? Which layer controls this behaviour? What depends on it? What must remain unchanged? If we modify this component, what else could be affected?
That is architectural thinking.
Our recent WordPress work illustrates the difference. We did not ultimately need to redesign the article system to fix the featured image. We discovered that a very small CSS rule could solve the specific problem without disturbing the rest of the article layout.
The successful solution was not a large amount of code. It was knowing where to intervene.
17. The New Skill: Being the Architect
This may be the most important shift brought by AI-assisted programming.
The valuable skill is not simply knowing less code. It is knowing enough about the system to describe what you want, recognise when the construction is wrong, identify which layer is responsible, and give the AI precise instructions for the next change.
You don’t need to personally manufacture every brick. But you need to know whether the wall belongs there.
18. The Heavy Lifting Moves to AI
As AI becomes better at programming, more of the heavy mathematical, logical and syntactic work can be delegated to machines.
An AI can calculate, derive, search through alternatives, generate code, execute tests, trace dependencies and repeatedly correct errors. In many situations, it can perform this work faster and more extensively than a person working manually.
That does not make human understanding irrelevant. It changes where the human contribution sits.
The human increasingly specifies the objective, constraints and architecture, while AI performs more of the detailed construction and verification.
The AI may increasingly do the engineering calculations. The human still has to decide what building is worth constructing.
19. From Asking for Code to Directing Construction
The difference between weak and strong AI-assisted programming may ultimately be the difference between asking for isolated pieces of code and directing construction at the architectural level.
Instead of: “Make the sidebar look better,” we can say: “Use the existing sidebar width. Extend only its background to the viewport edge. Keep the main content width unchanged, preserve the existing gap, and make the behaviour responsive.”
That is a much better instruction because it gives the AI a target, constraints and boundaries.
The AI supplies the implementation. The human supplies the architectural intention.
20. The Lesson of the Tower
You don’t need to manufacture every brick to build a sophisticated tower.
But you do need to understand the tower well enough to know where the rooms are, where the wiring runs, which systems are connected, what can be changed safely, and what must not be disturbed.
That is the real promise of vibe coding.
AI can increasingly build the components. Human understanding determines the architecture.
Related Reading
For a broader discussion of AI and expertise, see When AI Beats Human Expertise. For the human–AI design process, see AI–Human Assisted Design: A New Protocol for Infographics.
When AI Beats Human Expertise