← All posts
AIDesign

Building a CSS framework for the AI era

July 3, 2026 · 6 min read

A funny thing happened to front-end work in the last two years: a lot of the time, the person typing the class names isn't a person. It's an assistant. You describe a pricing page, and something writes the markup. That changes what a good CSS framework has to be.

Most frameworks were designed for a human who reads docs, runs a build, and remembers conventions. An AI holds the keyboard differently. It half-remembers class names from training data and confidently invents ones that never existed. It can't run your Sass pipeline. And it has no way to know your framework got a new component last month. If you want AI-written UI to actually work, you have to design for those three failure modes directly.

That's the whole idea behind Farvist. Here's the reasoning, honestly — including where it doesn't solve everything.

1. Be findable

An assistant can only use what it can retrieve. So Farvist ships the machine-readable surface that's becoming a convention for AI-first sites:

robots.txt explicitly welcomes the AI crawlers (GPTBot, ClaudeBot, PerplexityBot and friends), and every page links its llms.txt. None of this is exotic — it's just making sure the answer to "what classes does Farvist have?" is one fetch away, and always current.

2. Speak a dialect models already know

There's a real design fork here. Utility-only frameworks are powerful, but they push all the composition into the markup, and an AI reconstructing a component from memory has more chances to get a detail wrong. Farvist uses the component-plus-utility model — closer to Bootstrap's — because "a card is .card" is a smaller, more stable thing for a model to remember than a specific stack of a dozen utilities.

On top of that, the catalog ships recipes: whole sections — a navbar, a login card, a pricing grid, a chat UI — as copy-paste blocks. An assistant assembling a page from named recipes makes fewer mistakes than one free-handing every element. The names are the interface.

3. Don't require a build step

This is the one people underestimate. An AI can write CSS, but it can't run your Dart Sass compile. So anything that requires a build to customize is off-limits to a model working in a chat window or a live sandbox.

Farvist's answer is that everything themeable is a CSS custom property, and every derived shade — gradients, glows, the frosted backdrops, hover states, focus rings — resolves from those variables at runtime. To re-brand the entire framework, an assistant writes five lines:

:root {
  --fv-primary: #10b981;
  --fv-accent:  #a3e635;
  --fv-info:    #2dd4bf;
  --fv-primary-text: #6ee7b7;
}

No compile, no config file, no tooling the model can't reach. Prebuilt skins (data-theme="synthwave" and four others) are just the same idea packaged. A framework that can only be customized through a build step has quietly excluded the fastest-growing category of its users.

What this doesn't fix

Being honest: none of this makes an AI infallible. A model can still choose an ugly layout, misuse a component, or write inaccessible markup. What these three things do is shrink the error surface — they remove the failures that come from stale knowledge, invented class names, and un-runnable tooling. The taste is still on you (or on how well you prompt).

It also isn't a moat in the "nobody can copy this" sense. Any framework could ship an llms.txt tomorrow. The point isn't secrecy; it's that these are the right defaults for the moment we're in, and most frameworks were built for a different one.

The bet

Bootstrap won an era by being the thing every developer already knew, so reaching for it was the path of least resistance. The interesting question now is what becomes the path of least resistance when an assistant is reaching. Our bet is that it's the framework that's easiest to find, written in a dialect the model already speaks, and customizable without a toolchain. That's what we're building toward — in the open, at a steady clip.

Farvist is free and MIT-licensed. Read the docs, or just point your assistant at farvist.com/llms-full.txt and ask it to build something.


← All posts Read the docs →