Dispel - Style Sites with AI 作者： thePrnvBot

Dispel is an AI-native web stylist that lets you redesign any webpage by describing what you want in plain English. Instead of writing CSS by hand, just type a prompt like “make all headings bold with a blue underline” or “give this page a dark theme with rounded cards” and Dispel generates precise, production-ready CSS that is applied instantly.

FEATURES

• Natural language CSS generation — Describe the visual change you want and get working, production-ready CSS instantly. No CSS knowledge required.

• Live streaming updates — Styles are applied to the page as they stream from the AI, so you see changes in real time without copy-paste or refresh cycles.

• Iterative refinement — Continue editing through conversation. Follow up with prompts like “now make the headings bigger” and Dispel builds on previous changes automatically.

• Element picker targeting — Click any element on the page to target it precisely. The selected element is highlighted and its HTML is used to generate accurate selectors.

• Per-site style memory — All styles are saved per domain and automatically reapply on future visits, even before the page fully loads.

• File-based design context — Drag and drop or paste up to 3 files (.css, .md, .txt) or screenshots to provide design systems, style guides, or visual references that guide generation.

• Multi-provider AI support — Works with OpenAI, Anthropic, Google, OpenRouter, and local models (Ollama or any OpenAI-compatible endpoint). Use your own API keys or local models.

• Safety-aware CSS execution — Detects external resource usage in generated CSS and warns before applying, with option to proceed or dismiss.

• Draft workflow system — Save, edit, or discard generated styles. Promote drafts into persistent rules or revert safely.

• Debug and inspection panel — View live generated CSS, errors, and warnings with structured debug output.

• Prompt store management — Full history of prompts per domain with search, filtering, bulk actions, and on/off toggles for individual styles.

• Keyboard shortcut — Toggle the side panel with Ctrl+Shift+Y.

• Dark mode UI — Automatically adapts to system theme preferences.

• Works on any website — No configuration required. Runs on all pages at document start.

• Privacy-first architecture — All data (prompts, CSS, files, API keys, and settings) is stored locally in chrome.storage.local. No tracking, no telemetry, no servers. Only sanitized page content and user-provided inputs are sent to your selected AI provider over HTTPS.

• Custom endpoint support — Connect to any OpenAI-compatible API endpoint for enterprise or self-hosted models.

HOW IT WORKS

1. Open Dispel from the toolbar.
2. Configure your AI provider or local model in Settings.
3. Visit any webpage and describe the changes you want.
4. Watch CSS stream in and apply live.
5. Refine through follow-up prompts and save styles for reuse.

BUILT FOR PRIVACY

Dispel stores everything locally on your device, including prompts, generated CSS, uploaded files, API keys, and preferences. When you submit a request, only sanitized page structure, page metadata (URL, title, viewport state), selected element HTML (if any), prior CSS, and explicitly attached files are sent to your chosen AI provider over HTTPS. Nothing is logged, tracked, or sold.