Using AI for Web Design Before It Was Cool

When I tell people I built an AI website generator in 2019, they imagine something like today's AI tools: natural language prompts producing complete designs. The reality was much more humble.

The AI in ClickAi v1 was a collection of rules, heuristics, and design theory translated into code. Color theory algorithms that chose harmonious palettes. Layout rules that matched content types to grid structures. Typography pairing logic based on font classification research. Image placement rules derived from eye-tracking studies.

It wasn't machine learning. It wasn't neural networks. It was knowledge engineering: encoding human design expertise into software decisions.

And it worked better than you'd expect.

Encoding Design Knowledge

The core challenge of AI web design in 2019 was translating the implicit knowledge of designers into explicit rules that software could execute.

Good designers make thousands of micro-decisions when creating a website. White space ratios. Font size hierarchies. Color contrast levels. Image cropping. Content grouping. Alignment patterns. Most of these decisions are intuitive. Designers don't articulate rules, they feel what's right.

My job was to make the implicit explicit. I studied design theory books, analyzed hundreds of professional websites, and interviewed designers about their decision-making process. From this research, I extracted rules:

Color: Start with an industry-appropriate base color. Generate a complementary palette using color wheel relationships. Ensure WCAG contrast ratios for text readability. Use the dominant color sparingly: accent, not backdrop.

Layout: Content-heavy pages use narrow columns (65 characters per line for readability). Image-focused pages use wide grids. Above-the-fold content includes the business name, value proposition, and primary action. Sections alternate between content-heavy and visual-heavy to create rhythm.

Typography: Pair a display font (for headings) with a body font (for text). Heading fonts can be expressive. Body fonts must be readable. Size hierarchy follows a mathematical scale, where each heading level is a consistent ratio smaller than the previous.

Spacing: Consistent spacing creates professional feel. Use a base unit (8px) and scale it: padding multiples of 8, margins multiples of 8, gaps multiples of 8. This creates invisible alignment that users feel without seeing.

Each rule was simple. Together, they produced designs that looked intentional. Not inspired. Not creative. But professional and consistent.

The Limitations of Rules

Rule-based design has a hard ceiling:

No creativity. Rules produce predictable output. A restaurant website from ClickAi looked like every other restaurant website from ClickAi. The system couldn't surprise, delight, or create something genuinely new. It could only remix existing patterns within defined parameters.

No context sensitivity. A luxury restaurant and a food truck are both "restaurants," but they need radically different designs. The rule-based system didn't distinguish between them well. Adding sub-categories helped, but the granularity was always too coarse.

No trend awareness. Design trends change: flat design, gradients, glassmorphism, brutalism. A rule-based system captures the design knowledge from when it was built. It doesn't evolve with the industry unless someone manually updates the rules.

No edge case handling. When a business description didn't fit any template ("We're a combination ice cream shop and yoga studio"), the system defaulted to generic layouts. The long tail of unusual businesses was poorly served.

These limitations are fundamental to rule-based systems. As machine learning and AI capabilities improve, future systems may handle context, creativity, and edge cases that rules cannot. But for now, rules are what we have, and working within their constraints teaches discipline.

What Still Applies

Despite the limitations, the principles I've learned building rule-based AI design tools apply broadly:

Guardrails produce better output than freedom. Constraining the design space improves results. An AI system asked to "design a website" with unlimited options produces variable quality. An AI system constrained to "design a website using this grid system, this typography scale, and this color palette" produces consistently good quality.

Design systems are force multipliers. The reusable components, spacing scales, and color tokens from ClickAi's rule-based system form a design system that ensures consistency. As the AI decision layer improves over time, these design systems will evolve from driving decisions to constraining them — a different role but equally valuable.

Users judge output, not process. Users don't care whether ClickAi uses neural networks or if-else statements. They care about the quality of the website they receive. The internal mechanism is irrelevant to the end product.

The value is in the curation. ClickAi's design choices aren't mathematically optimal. They're curated, selected from a range of valid options based on aesthetic judgment. That curation layer (the taste filter between what's possible and what's good) is essential regardless of how sophisticated the underlying AI becomes. AI generates options. Taste selects the right one.

Building AI design tools with today's constraints has taught me to focus on outcomes over technology. The technology will improve. The user's need ("give me a website I'm proud to show customers") stays constant. Build for the need, and the technology upgrade is an implementation detail.