Generate Command

The generate command is the primary command in IntentCSS. It converts natural language prompts into Tailwind CSS classes or plain CSS.

Overview

The generate command accepts a prompt, processes it through the Intent Engine, and produces styling output.

Basic syntax:

BASH
intentcss generate --prompt "<prompt>"

Example:

BASH
intentcss generate --prompt "blue button"

Output:

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

Command Syntax

BASH
intentcss generate --prompt "<prompt>" [options]

Required Options

OptionDescription
--promptThe prompt to generate from

Example:

BASH
intentcss generate --prompt "red button"

Output Targets

IntentCSS supports multiple output targets.

Tailwind (Default)

BASH
intentcss generate --prompt "glass login form"

Output:

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

CSS

BASH
intentcss generate --prompt "glass login form" --target css

Output:

CSS
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Examples

Button

BASH
intentcss generate --prompt "large red button"

Output:

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

Card

BASH
intentcss generate --prompt "glass shadow card"

Output:

TEXT
backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-lg p-6

Form

BASH
intentcss generate --prompt "responsive centered login form"

Output:

TEXT
mx-auto flex flex-col gap-4 rounded-xl bg-white p-6 shadow-md w-full max-w-md space-y-2

Navbar

BASH
intentcss generate --prompt "dark navbar"

Output:

TEXT
flex items-center justify-between p-4 bg-gray-900 text-white border-b border-gray-800

Modal

BASH
intentcss generate --prompt "glass centered modal"

Output:

TEXT
fixed inset-0 flex items-center justify-center w-full max-w-lg p-6 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-lg

Sidebar

BASH
intentcss generate --prompt "dark compact sidebar"

Output:

TEXT
w-48 min-h-screen bg-gray-900 text-white

Hero

BASH
intentcss generate --prompt "glass rounded shadow hero"

Output:

TEXT
text-center py-20 px-8 backdrop-blur-md bg-white/30 border border-white/20 shadow-xl rounded-3xl

Footer

BASH
intentcss generate --prompt "large blue footer"

Output:

TEXT
p-10 bg-blue-600 text-white shadow-lg

Typo Correction

The generate command automatically corrects common spelling mistakes.

Input:

BASH
intentcss generate --prompt "purpl buton"

IntentCSS detects:

TEXT
Corrected: purple button

Output:

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

Confidence Checking

Before generation occurs, IntentCSS evaluates confidence.

High Confidence

BASH
intentcss generate --prompt "green button"

Output:

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

Medium Confidence

BASH
intentcss generate --prompt "login thing"

Output:

TEXT
Detected intent: form
Confidence: Medium

Low Confidence

BASH
intentcss generate --prompt "glorp wazzoo"

Output:

TEXT
Could not confidently understand that prompt.
Try words like: button, card, navbar, blue, responsive.

Prompt Tips

The best prompts usually contain:

Component

TEXT
button
card
form
navbar
modal
sidebar
hero
footer

Modifiers

TEXT
large
glass
shadow
rounded
responsive
centered
dark

Colors

TEXT
blue
red
green
purple
black

Example:

BASH
intentcss generate --prompt "large red shadow button"

Generation Pipeline

Internally, the generate command follows this process:

TEXT
Prompt
  ↓
Typo Correction
  ↓
Prompt Parsing
  ↓
Intent Matching
  ↓
Confidence Scoring
  ↓
Output Generation

The final output is then printed to the terminal.

Related Commands

Explain

Explain generated classes:

BASH
intentcss explain "flex items-center justify-between"

Help

View command help:

BASH
intentcss generate --help

Next Steps

Continue with:

  • Explain Command
  • Architecture
  • Testing
  • Contributing