Intent Engine

Overview

The Intent Engine is responsible for understanding what the developer wants to generate.

When a user runs:

intentcss generate --prompt "large red button"

intentcss generate --prompt "large red button"

IntentCSS does not simply return a hardcoded response.

It moves the prompt through a small processing pipeline:

Prompt
  ↓
Typo Correction
  ↓
Prompt Parsing
  ↓
NLP Extraction
  ↓
Intent Matching
  ↓
Confidence Scoring
  ↓
Generator
  ↓
Output

Prompt
  ↓
Typo Correction
  ↓
Prompt Parsing
  ↓
NLP Extraction
  ↓
Intent Matching
  ↓
Confidence Scoring
  ↓
Generator
  ↓
Output

What the Engine Does

The Intent Engine answers three main questions:

1. What component is the user asking for?
2. What modifiers did the user include?
3. Is IntentCSS confident enough to generate output?

For example:

large red button

large red button

is interpreted as:

Intent: button
Color: red
Size: large
Confidence: high

Intent: button
Color: red
Size: large
Confidence: high

Then the Button intent generates:

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

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

Intent Matching

IntentCSS compares the prompt against registered intents.

Current supported intents include:

• Button
• Card
• Navbar
• Form
• Modal
• Sidebar
• Hero
• Footer

Each intent defines:

• A name
• Aliases
• Keywords
• A generator function

Example structure:

export const ButtonIntent = {
  name: "button",

  aliases: [
    "button",
    "btn",
    "cta"
  ],

  keywords: [
    "button",
    "click",
    "submit",
    "login",
    "signup"
  ],

  generate(options) {
    return "...";
  }
};

export const ButtonIntent = {
  name: "button",

  aliases: [
    "button",
    "btn",
    "cta"
  ],

  keywords: [
    "button",
    "click",
    "submit",
    "login",
    "signup"
  ],

  generate(options) {
    return "...";
  }
};

Typo-Aware Input

Before matching intents, IntentCSS corrects common typos.

purpl buton

purpl buton

becomes:

purple button

purple button

This allows the engine to still identify:

Intent: button
Color: purple

Intent: button
Color: purple

and generate:

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

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

Confidence Levels

The engine assigns a confidence level to every prompt.

Example low-confidence prompt:

intentcss generate --prompt "glorp wazzoo"

intentcss generate --prompt "glorp wazzoo"

Output:

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

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

Registered Intents

All intents are stored in the intent registry.

The registry allows the engine to search all supported components without hardcoding each one into the CLI.

Example:

export const intents = [
  ButtonIntent,
  CardIntent,
  NavbarIntent,
  FormIntent,
  ModalIntent,
  SidebarIntent,
  HeroIntent,
  FooterIntent
];

export const intents = [
  ButtonIntent,
  CardIntent,
  NavbarIntent,
  FormIntent,
  ModalIntent,
  SidebarIntent,
  HeroIntent,
  FooterIntent
];

When a prompt is parsed, the engine ranks these intents and chooses the best match.

Engine Flow

A prompt such as:

intentcss generate --prompt "glass login form"

intentcss generate --prompt "glass login form"

moves through the engine like this:

Original Prompt:
glass login form

Corrected Prompt:
glass login form

Tokens:
glass, login, form

Best Intent:
form

Modifiers:
glass, login

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

Original Prompt:
glass login form

Corrected Prompt:
glass login form

Tokens:
glass, login, form

Best Intent:
form

Modifiers:
glass, login

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

Why This Matters

The Intent Engine makes IntentCSS predictable.

It avoids random generation and keeps output stable across runs.

That means:

• Same prompt
• Same output
• Same confidence behavior

This makes IntentCSS useful for developer workflows, documentation, examples, and repeatable UI generation.

Next Steps

Continue with:

• Prompt Parsing
• Typo Correction
• Confidence Scoring
• Supported Intents