DEV Community

Stas Kulesh
Stas Kulesh

Posted on

DAUB: The CSS Component Library That Lets AI Generate Your UI

#opensource #webdev #css #ai

Most UI frameworks solve the wrong problem — they help developers build interfaces faster. But the real bottleneck is shifting. AI can already figure out what UI you need. The slow part is the loop after: generate code → copy → paste → fix imports → compile → see result.

I built DAUB to cut that loop entirely.

What is DAUB?

DAUB is a drop-in CSS + JS component library with a simple premise: two CDN files, zero build step, full substance.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>
Enter fullscreen mode Exit fullscreen mode

That's it. Your semantic HTML is now styled with 73 components across 20 theme families, each with light and dark modes.

Classless Mode

Don't want to think about classes at all? Use classless mode:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub-classless.css">
Enter fullscreen mode Exit fullscreen mode

Every <table>, <form>, <button>, <nav>, and <article> gets styled automatically. Write semantic HTML, get a polished interface.

The AI Angle

Here's where DAUB gets interesting. It's designed from the ground up for AI consumption:

  • llms.txt — Full component documentation in a format LLMs can parse directly (daub.dev/llms.txt)
  • llms-compact.txt — Condensed version for smaller context windows
  • ai-plugin.json — OpenAI plugin manifest
  • MCP Server — Remote MCP server on Cloudflare edge at https://daub.dev/api/mcp. Claude, Cursor, or any MCP-compatible agent can call generate_ui and get a rendered interface back immediately
  • JSON-Render Spec — AI outputs structured JSON describing layout, components, and data. DAUB renders it as a live interface. No compilation. No JSX. The spec is the UI.

How It Compares

Feature DAUB Pico CSS DaisyUI Tailwind
Components 73 ~20 ~50 0
Theme variants 40 2 32 N/A
Classless mode ✅ ✅ ❌ ❌
JS included ✅ (2 KB) ❌ ❌ ❌
Build step None None Required Required
AI docs (llms.txt) ✅ ❌ ❌ ❌
MCP server ✅ ❌ ❌ ❌

The Roadmap

DAUB's ambition goes beyond a component library:

  1. Rendering layer (shipped) — CSS + JS components, themes, classless mode
  2. AI integration (shipped) — llms.txt, MCP server, JSON-Render spec
  3. Action bindings (next) — Wire spec elements to real functions, APIs, and tools
  4. Intent Engine (planned) — Turn prompts like "track my spending for March" into a contextual dashboard — charts, filters, actions — entirely via spec

Try It

DAUB is MIT licensed and open source. I'd love feedback — what would you want an AI-renderable UI spec to handle that current component libraries don't?

Top comments (0)