IntentCSS

Describe the UI. Get the CSS.

IntentCSS is a developer-first CLI that converts natural language into Tailwind CSS classes or plain CSS.

Instead of searching documentation, copying snippets, or manually composing utility classes, describe what you want:

intentcss generate --prompt "large red button"

and get:

rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700

Features

Natural Language CSS

intentcss generate --prompt "glass login form"

Output:

flex flex-col gap-4 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-md p-6 space-y-2

Typo Correction

IntentCSS automatically fixes common mistakes.

intentcss generate --prompt "gren buton"

Output:

rounded-lg bg-green-600 px-4 py-2 text-white hover:bg-green-700

NLP Powered

IntentCSS extracts meaningful words from prompts and ignores unnecessary filler.

intentcss generate --prompt "make me a beautiful blue button"

Output:

rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700

Confidence Scoring

Unknown prompts are rejected safely.

intentcss generate --prompt "glorp wazzoo"

Output:

Could not confidently understand that prompt.

Installation

Global Installation

npm install -g intentcss

Local Installation

npm install intentcss

Usage

Generate Tailwind CSS

intentcss generate --prompt "red button"

Generate Plain CSS

intentcss generate \
  --prompt "red button" \
  --target css

Help

intentcss --help

Supported Components

Button

intentcss generate --prompt "large shadow red button"

Card

intentcss generate --prompt "glass card"

Navbar

intentcss generate --prompt "sticky dark navbar"

Form

intentcss generate --prompt "responsive login form"

Modal

intentcss generate --prompt "glass modal"

Sidebar

intentcss generate --prompt "dark compact sidebar"

Hero

intentcss generate --prompt "dark large hero"

Footer

intentcss generate --prompt "large blue footer"

Supported Modifiers

Colors

blue
red
green
purple
black
white

Sizes

small
large
compact

Styles

glass
shadow
rounded
pill
outline
sticky
centered
responsive
minimal

Examples

Button

Input:

large rounded shadow purple button

Output:

rounded-xl shadow-md bg-purple-600 px-6 py-3 text-lg text-white hover:bg-purple-700

Form

Input:

glass centered login form

Output:

mx-auto flex flex-col gap-4 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-md p-6 space-y-2

Hero

Input:

dark large hero

Output:

text-center py-32 px-12 bg-gray-900 text-white

Testing

Run all tests:

npm run test

Current test coverage includes:

• Button generation
• Typo correction
• Engine integration

Development

Install dependencies:

npm install

Run in development mode:

npm run dev -- generate --prompt "red button"

Run tests:

npm run test

Build:

npm run build

Roadmap

Version 1.0

• Natural language generation
• Tailwind output
• CSS output
• Typo correction
• NLP support
• Confidence scoring
• Component intent system

Future Versions

• React component generation
• Vue component generation
• Layout generation
• Theme generation
• Design system support
• AI-assisted intent suggestions

Contributing

By contributing to IntentCSS, you agree to follow the project's Code of Conduct.

See CODE_OF_CONDUCT.md.

License

IntentCSS is licensed under the Apache License 2.0.

See LICENSE for details.

Made for developers who think in intent, not utility classes.