Prompt Parsing

Prompt parsing is the step where IntentCSS cleans, normalizes, and breaks a natural language prompt into usable tokens.

Overview

Prompt parsing takes raw user input and turns it into structured text that the Intent Engine can understand.

For example:

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

is reduced into useful terms like:

TEXT
beautiful
blue
button

The parser helps IntentCSS ignore filler words and focus on the parts that affect generation.

Parsing Flow

IntentCSS uses a simple prompt processing flow:

TEXT
Raw Prompt
  ↓
Typo Correction
  ↓
Normalization
  ↓
Tokenization
  ↓
NLP Extraction
  ↓
Parsed Intent Data

Normalization

Normalization makes the prompt easier to process.

It:

  • Trims extra spaces
  • Converts text to lowercase
  • Removes unnecessary punctuation
  • Collapses repeated whitespace

Example:

TEXT
"  Make!!! a BLUE   button "

becomes:

TEXT
make a blue button

Tokenization

After normalization, the prompt is split into tokens.

Example:

TEXT
make a blue button

becomes:

TEXT
make
a
blue
button

Tokens are then used by the confidence system and intent matcher.

NLP Extraction

IntentCSS also uses NLP to extract more meaningful words from a prompt.

For example:

TEXT
make me a beautiful blue button

contains filler words like:

TEXT
make
me
a

The important words are:

TEXT
beautiful
blue
button

This improves matching accuracy and avoids letting filler words reduce confidence too much.

Parsed Intent Shape

A parsed prompt contains useful metadata:

TS
{
  originalPrompt: "make me a beautiful blue button",
  normalizedPrompt: "make me a beautiful blue button",
  tokens: ["make", "me", "a", "beautiful", "blue", "button"],
  target: "tailwind",
  detectedComponent: "button",
  detectedColor: "blue"
}

This parsed result is passed into the Intent Engine.

Detected Fields

The parser can detect common prompt categories.

FieldExample
Componentbutton, card, navbar, form
Colorblue, red, green, purple
Behaviorresponsive, adaptive, centered
Styleglass, shadow, rounded
Sizesmall, large, compact

Example

Input:

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

Parsed meaning:

TEXT
Component: form
Behavior: responsive
Layout: centered
Context: login

Generated 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

Why Parsing Matters

Prompt parsing keeps IntentCSS predictable and safe.

Without parsing, a prompt would just be raw text.

With parsing, IntentCSS can:

  • Identify the component
  • Detect modifiers
  • Correct typos
  • Improve confidence scoring
  • Avoid random generation

Next Steps

Continue with:

  • Typo Correction
  • Confidence Scoring
  • Intent Engine