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.

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.

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.

    • Related Articles

    • Style Templates

      Overview Style templates are predefined design presets that instantly change the look and feel of your calculator. Each template provides a complete set of CSS variable values that control colors, fonts, spacing, borders, and other visual properties. ...

    • AI Credits

      Overview AI credits power all of Calculator AI's AI-driven features. Every time you use an AI feature — building a calculator, generating pricing formulas, translating text, or styling your calculator — a small number of credits are consumed. Credits ...

    • Building with the AI Assistant

      Overview The AI assistant lets you describe what you need in plain English and generates a complete calculator configuration for you. Instead of manually adding each option and formula, you can start with an AI-generated draft and refine from there. ...

    • Dashboard Overview

      Overview The dashboard is the first page you see when you open Calculator AI. It gives you a quick snapshot of your setup progress, current plan status, and calculator performance. Go to Calculator AI → Dashboard to view it. How It Works ...

    • AI Bulk Generate Options

      This is different from the Build with AI wizard that appears when creating a new calculator — AI Bulk Generate adds options to an existing calculator. Overview AI Bulk Generate lets you describe the options you need in plain English, and Calculator ...