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.

Attachments let you supply additional text-based context alongside a prompt — a tokens.css file with brand variables, an existing stylesheet to avoid conflicts, or a Markdown design spec describing a multi-step change. Rather than transcribing your design system into the prompt text, you hand the model the source of truth directly. The file’s content is decoded and appended to your message before it is sent to the provider, and the system prompt instructs the model to follow the guidance in attached files unless your prompt text explicitly overrides it.

​
Supported file types

Only text-based files are supported. Each file is decoded via decodeDataUrlText before being included in the message — binary files (such as images) will be silently omitted.

CSS files (.css)

Text content is read and injected verbatim. Ideal for design token sheets, utility classes, or existing site stylesheets the model should be aware of.

Text files (.txt)

Plain-text notes, constraints, or implementation guidelines. Useful for a list of class names the model should reuse or avoid.

Markdown files (.md)

Design specs, component descriptions, or multi-step change requests written in Markdown. The model reads the structured content as-is.

SCSS / Sass variables (.scss)

Variable definition files from a Sass-based design system. The model can reference your $color-brand and $spacing-md names directly in the generated CSS.

​
How to attach

1

Click the attachment button

In the Dispel side panel, click the attachment (paperclip) icon in the prompt input area. A native file-picker dialog opens.
2

Select your file

Choose any supported text-based file from your filesystem. The file is read into memory as a data URL and decoded to text.
3

Confirm the chip appears

After selection, a chip displaying the filename appears above the text input field. You can attach only one file at a time — the chip must be removed before adding a different file.
4

Write your prompt and submit

Type your prompt as normal. The attachment is included automatically when you submit. You can attach a file and write a prompt in either order.

​
How attachments affect generation

When you submit a prompt, buildMessageWithAttachments is called to construct the final message string sent to the provider: 
// From src/utils/build-message-with-attachments.ts

function formatFile(file: { filename?: string; url: string }): string | null {
  const content = decodeDataUrlText(file.url);
  if (!content) {
    return null;
  }
  return `--- ${file.filename ?? "attachment.txt"} ---\n${content}`;
}

export function buildMessageWithAttachments(
  message: PromptInputMessage
): string {
  const textSection = message.text.trim() || null;

  const fileSections = (message.files ?? [])
    .map(formatFile)
    .filter((s): s is string => s !== null);

  const fileBlock =
    fileSections.length > 0
      ? `Attached reference files:\n\n${fileSections.join("\n\n")}`
      : null;

  return (
    [textSection, fileBlock]
      .filter((s): s is string => s !== null)
      .join("\n\n") || ""
  );
}
The resulting message structure is: 
Your prompt text here

Attached reference files:

--- tokens.css ---
:root {
  --color-brand: #1d4ed8;
  --spacing-md: 16px;
  …
}
The system prompt contains an explicit instruction that governs how the model uses this content:
Attached files may contain reference styles, design tokens, implementation constraints, or existing CSS provided by the user. Follow the guidance in attached files unless it directly conflicts with explicit instructions in the user’s prompt. When conflicts exist, the user’s prompt text takes precedence.
This means you can attach a broad stylesheet and then narrow it with your prompt: for example, attach a full design token file and write only update the card component colours to use --color-brand.
Attach a CSS variables file (e.g. tokens.css) to let the model reuse your design system’s exact color and spacing values. Without it, the model generates arbitrary hex codes and px values that may drift from your brand. With it, the output references var(--color-brand) and var(--spacing-md) directly.

​
Use cases

Export your design system’s tokens.css (or equivalent Sass/SCSS variables file) and attach it whenever you are styling pages that belong to a branded product. The model will reference your token variables rather than hardcoding values, making the generated CSS portable and theme-aware.
If the page already has a complex stylesheet and you want Dispel to add styles without overriding core layout rules, attach the existing stylesheet. The model can check what is already defined and write rules that extend or override only what you explicitly request.
For a large restyling project — updating typography, colors, card layout, and spacing all at once — write a structured Markdown document describing each requirement and attach it. This avoids an extremely long single prompt and lets you iterate on the spec separately from the prompt text.

​
Removing an attachment

Click the × on the filename chip before submitting to remove the attachment. The chip disappears and the file’s content is not included in the message. You can then attach a different file if needed.
File contents are sent to your configured AI provider as part of the prompt message. Large files — particularly full production stylesheets with thousands of rules — may push the combined prompt size toward the model’s context limit and trigger a CONTEXT_LIMIT_REACHED error. If this happens, trim the file to only the sections relevant to your change before attaching.

Build docs developers (and LLMs) love

Get started for freeTalk to us