Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/thePrnvBot/dispel-web-stylist/llms.txt

Use this file to discover all available pages before exploring further.

The prompt is the primary way you communicate style intent to Dispel. When you submit a prompt, Dispel extracts the visible HTML of the current viewport, strips scripts and most attributes, and sends your text alongside the page context — URL, title, and viewport dimensions — to your configured AI provider. The provider streams production-ready CSS back into the page as it is generated. The more precisely you describe what you want, the closer the first result will be to your vision.

​
Basic prompts

Plain English descriptions are enough to get started. Dispel’s system prompt instructs the model to output only CSS — no explanations, no markdown — so you can write naturally without thinking about syntax.

Typography

make all headings bold with a blue underline

Theme

give this page a dark theme with rounded cards

Spacing

increase the font size of the article body to 18px

Clean-up

remove all drop shadows from buttons

Layout

make the sidebar 280px wide and add a subtle border on its right edge

Color

change the primary action buttons to a coral background with white text

​
Scoping your changes

By default, Dispel sends the full visible viewport HTML to the model, which gives it enough context to construct CSS selectors. You can improve targeting further by being specific in your prompt text:
  • Name the element type: the navigation bar, the hero section heading, every table cell in the pricing table
  • Reference visible text or structure: the card that contains the "Get started" button
  • Use CSS selector language: all elements with class .badge
For the most precise targeting, use the element picker to click directly on a DOM element before submitting your prompt. Dispel attaches the element’s sanitized outerHTML as a targeting hint so the model prioritises those exact selectors. See Element Picker for full details.
Attaching a reference CSS file or design token sheet gives the model an authoritative set of selectors and variable names to target. This is especially useful on apps that use CSS Modules or a design system. See Attachments for how to attach files.

​
Iterative refinement

Dispel is designed for multi-turn workflows. Each follow-up prompt builds on the CSS generated so far rather than starting from scratch. Under the hood, every completed prompt appends a new cssPatch to the active draft’s turns array. Before calling the model, Dispel compiles all turns into a single stylesheet by joining the patches and passes it back as the CURRENT STYLES section of the system prompt. The model’s instruction for this section is explicit:
Output a COMPLETE replacement CSS stylesheet that includes ALL existing styles above PLUS the new changes. Do NOT output only the new changes — the output must be a full, self-contained CSS block that replaces the previous stylesheet entirely.
This means:
  • You never lose previous changes when refining — the model always carries them forward.
  • You can make small corrections without re-describing the entire style: actually, use #1d4ed8 for the heading underline instead of the default blue.
  • The CSS displayed and saved is always the final compiled sheet, not a partial diff.

​
Aborting a generation

If a generation is taking too long or heading in the wrong direction, click the Stop button in the side panel. This fires an AbortSignal that cancels the in-flight stream immediately. Any CSS that had already been applied to the page is reverted to the state before that prompt was submitted, so the page is never left in a half-applied state.

​
Error states

When the model cannot fulfil a request, it calls the internal reportError tool instead of generating CSS. Dispel surfaces these as inline error messages in the side panel. The possible error codes, all drawn from LLM_ERROR_CODES, are:
Your API key has hit the provider’s rate limit. Wait a moment and try again, or switch to a different provider in Settings.
The combined size of the page HTML, compiled CSS history, and your prompt exceeds the model’s context window. Try a more targeted prompt, clear the draft history, or switch to a model with a larger context window.
The response stream was cut off before a complete CSS block could be produced. The page is automatically reverted. Retry the same prompt — transient network issues are the most common cause.
A general error was returned by your AI provider. Check that your API key is valid and that the model ID you configured still exists. The raw error detail is shown beneath the error message.
The model could not identify the element you described in the current viewport HTML. Try picking the element directly with the element picker, or rephrase your prompt to be more specific.
The prompt could refer to more than one element or conflicting style changes. Clarify which element you mean — for example, add an id, class name, or use the element picker to attach the exact outerHTML.
Dispel cannot apply styles to elements that live inside a Shadow DOM. Components built with Web Components or certain framework libraries (e.g. some video players, date-pickers) encapsulate their DOM in shadow roots that are unreachable from the main document stylesheet. If the model returns ELEMENT_NOT_FOUND for an element you can clearly see, it may be shadow-encapsulated.

​
Prompt tips

Generic prompts like “make it look better” force the model to guess your intent. Prefer: increase the line-height of the .article-body p paragraphs to 1.75 or make the sticky header translucent with a backdrop blur. The more context you give, the less guessing is needed.
Name the CSS property or visual attribute you have in mind: color, font-family, font-size, padding, border-radius, box-shadow, opacity, gap. If you say “make the cards nicer” the model picks an interpretation; if you say “add 16px padding and a 1px border in #e2e8f0 to each card” it has no room for ambiguity.
Rather than writing one mega-prompt covering typography, colours, spacing, and layout, submit each concern as a separate turn. Iterative drafts accumulate the changes so nothing is lost, and individual turns are much easier to debug or discard if one change goes wrong.
If you are styling a page to match an existing design system, paste your tokens.css or variables.scss as an attachment. The model reads the file and can reuse your variable names and values rather than inventing arbitrary hex codes or spacing values. See Attachments.

Build docs developers (and LLMs) love

Get started for freeTalk to us