Supported Intents

Intents are the core building blocks of IntentCSS. Every prompt is matched against one of the supported intents before generation occurs.

Overview

An intent represents a UI component or interface pattern.

When a prompt is processed, IntentCSS attempts to identify the most relevant intent and then applies any detected modifiers.

Example:

BASH
intentcss generate --prompt "large red button"

IntentCSS detects:

TEXT
Intent: button
Modifiers:
  - large
  - red

and generates output accordingly.

Available Intents

Current releases of IntentCSS include the following intents.

IntentDescription
ButtonButtons and call-to-action elements
CardContent cards and panels
NavbarNavigation bars and menus
FormLogin, signup, and input forms
ModalDialogs and overlays
SidebarApplication sidebars
HeroMarketing and landing page hero sections
FooterWebsite footers

Button

Generate buttons and call-to-action components.

Example:

BASH
intentcss generate --prompt "red button"

Output:

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

Supported modifiers:

  • red
  • blue
  • green
  • purple
  • black
  • large
  • shadow
  • pill

Card

Generate content cards and containers.

Example:

BASH
intentcss generate --prompt "shadow card"

Output:

TEXT
rounded-xl bg-white p-6 shadow-lg

Supported modifiers:

  • shadow
  • glass
  • rounded
  • dark
  • large

Navbar

Generate navigation bars.

Example:

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

Supported modifiers:

  • dark
  • glass
  • shadow
  • centered

Form

Generate forms including login and signup layouts.

Example:

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

Supported modifiers:

  • login
  • signup
  • register
  • centered
  • responsive
  • glass
  • shadow
  • large
  • minimal

Modal

Generate dialogs and overlays.

Example:

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

Supported modifiers:

  • glass
  • centered
  • fullscreen
  • large
  • shadow

Sidebar

Generate application sidebars.

Example:

BASH
intentcss generate --prompt "dark compact sidebar"

Output:

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

Supported modifiers:

  • dark
  • compact
  • glass
  • rounded
  • shadow

Hero

Generate hero sections for marketing pages.

Example:

BASH
intentcss generate --prompt "dark large hero"

Output:

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

Supported modifiers:

  • dark
  • large
  • glass
  • rounded
  • shadow
  • centered

Footer

Generate footer sections.

Example:

BASH
intentcss generate --prompt "large blue footer"

Output:

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

Supported modifiers:

  • dark
  • centered
  • large
  • shadow
  • blue

Intent Detection

IntentCSS uses:

  • Prompt parsing
  • NLP extraction
  • Typo correction
  • Confidence scoring

to determine the most likely intent.

Example:

BASH
intentcss generate --prompt "purpl buton"

Internally becomes:

TEXT
purple button

and resolves to:

TEXT
Intent: button

before generation begins.

Unsupported Prompts

If no supported intent can be detected, IntentCSS will not generate output.

Example:

BASH
intentcss generate --prompt "glorp wazzoo"

Output:

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

Future Intents

Planned future intents include:

  • Pricing Card
  • Table
  • Dashboard
  • Grid
  • Alert
  • Badge
  • Avatar
  • Accordion
  • Tabs
  • Timeline

Additional intents will be added in future releases.

Next Steps

Continue with:

  • Modifiers
  • CLI Reference
  • Generate Command
  • Architecture