AI Style Assistant

AI Style Assistant

Overview

The AI Style Assistant lets you describe the visual style you want in plain English, and it generates the CSS variable values for you. Instead of manually tweaking dozens of variables, you can describe a look — like "dark theme with rounded corners" — and get a complete set of matching styles. You access it in Calculator Editor → Placement & Styling → Styling → Styles sub-tab, in the AI Style panel.

You can also ask Chat with AI for look changes from any editor tab — or attach a screenshot of the look you want — without opening this panel. Use this page when you want the dedicated AI Style generate-and-refine flow on Placement & Styling.

Steps

  1. In the AI Style panel, type a description of the look you want. Be as specific or general as you like — for example, "modern and minimal with blue accents" or "match my store's earthy green color scheme with soft shadows."
  2. Click Generate. The AI produces a set of CSS variable values based on your description.
  3. The CSS editor and live preview update immediately so you can see the result.
  4. If the result isn't quite right, type a follow-up instruction (e.g., "make the buttons rounder" or "use a lighter background") and generate again. The AI builds on the previous output.
  5. Once you're happy, publish your calculator to push the new style live.

AI updates base CSS variable values. If you added responsive @media overrides in the Styles CSS editor, those blocks are kept when you generate or refine with AI. (Reset or switching style templates still clears @media — see CSS Variable Customization.)

Each generation consumes AI credits from your subscription. Check your remaining credits on the Subscription page.

Details

Control Description
Text input Plain-English description of the desired style.
Generate button Sends your description to the AI and applies the generated CSS variables.
Follow-up input Refine the previous result with additional instructions.
AI credits Each generation uses AI credits from your plan allowance.

Examples

  • Dark mode calculator — You type "dark theme with white text, subtle borders, and rounded inputs." The AI generates matching variable values and your calculator switches to a dark design.
  • Iterative refinement — You start with "clean and professional" and the AI produces a light layout. You follow up with "add a blue gradient header and slightly larger fonts." Each iteration refines the style without starting over.
  • Multi-step navigation — For calculators with a multi-step layout, ask to style "step buttons" or "step tabs" and the AI targets components.MultiStep variables (tab borders, active step highlight, prev/next buttons)—not option ButtonGroup styling.