Every line of CSS in Signal Dark was written through conversation. No manual coding, no copy-paste from Stack Overflow, no design tool exports. Just a developer describing what they wanted and an AI building it in real time. This is the story of how that works — and why it changes everything about building Joomla sites.
The Setup
Signal Dark started as a blank Joomla 5 installation with the default Cassiopeia template. The goal: build a production-quality dark template without writing a single line of CSS by hand.
The tools:
- VS Code — the editor, with the Claude Code extension installed
- Claude Code — Anthropic's AI coding assistant that reads your project files, understands context, and writes code directly into your codebase
- Docker — local Joomla environment running in a container
- A browser — to see the results and describe what needs fixing
That's it. No Figma, no Photoshop, no design system. Just conversation.
The Workflow
The process is deceptively simple. You open VS Code, start a conversation with Claude Code, and describe what you want. Claude reads your template files, understands the Joomla structure, and writes CSS that targets the right selectors.
A typical exchange:
"The category blog view has too much spacing between the article cards. Tighten it up and add a subtle border-bottom between each one."
Claude reads the template override, finds the right class names, writes the CSS, and saves the file. You refresh the browser. Done.
When something doesn't look right, you tell Claude what's wrong. The fastest technique: right-click the element in your browser, copy the computed styles, and paste them into the conversation. Claude sees exactly what the browser sees — padding, margins, font sizes, colours — and fixes it on the first try.
What Makes This Different
The traditional Joomla template workflow involves:
- Designing mockups in a design tool
- Translating those mockups into HTML/CSS
- Fighting with Joomla's component output to match the design
- Discovering that half the views you didn't design look broken
- Going back and styling those too
The AI workflow skips steps 1 through 3. You describe the aesthetic you want — "dark background, violet and cyan accents, clean typography, editorial feel" — and Claude starts building. You refine by looking at the actual result and saying what to change.
This means every Joomla component view gets styled as you encounter it. Category blog, category list, article view, contact form, smart search, tags, archive — each one gets attention because it takes 30 seconds to say "now style the search results page to match" instead of hours to design and code it.
The Hard Parts
AI doesn't eliminate complexity. It shifts it.
The hard part is no longer "how do I write this CSS" — it's "how do I describe what I want precisely enough that the result is correct." Vague instructions produce vague results. "Make it look better" gives you something different, not necessarily better. "Reduce the line-height on h2 elements inside article bodies to 1.15 and add 0.8rem bottom margin" gives you exactly what you asked for.
The other hard part: knowing when to stop. AI will happily keep refining forever. Every conversation can spawn three more. The discipline is in shipping — deciding that the current state is good enough and moving on.
The Result
Signal Dark ships with every core Joomla component view styled for dark mode. 36 module positions. Responsive breakpoints. Bootstrap overrides. Custom field rendering. Reading progress bar. Sticky navigation. Akeeba Engage comment styling.
Total development time: a few days of conversations. No designer, no frontend developer, no build tools. One person describing what they wanted and an AI writing the code.
The template is free: Signal Dark — browse the demo and download.
What This Means for Joomla
Joomla has always been powerful but perceived as complex. The barrier was never the CMS itself — it was the development workflow. Building a Joomla template from scratch required deep knowledge of PHP template overrides, Joomla's component output structure, and CSS architecture.
AI removes that barrier. Not by making Joomla simpler, but by giving you a collaborator who already knows all of it. You focus on what you want. The AI handles the how.
This is the workflow behind The AI Director Starter Kit — the same tools, the same process, packaged so you can start building your own Joomla site with AI today.