Bullet AI

Bullet AI Overview

What Bullet AI Does?

Bullet AI helps you style your Notion-powered site. It doesn’t change your layout. Layout is always managed in Notion. Instead, it changes how things look: colors, fonts, spacing, borders, and more.
Think of Notion as the structure of your site, and Bullet AI as the paintbrush that makes it look good.

Important Notes:

  • Bullet AI is a paid feature. AI styling consumes credits due to high computational costs, so AI-powered site creation is only available on paid plans.
  • Existing sites cannot use AI styling yet. We’ve rebuilt Bullet.so to be compatible with AI Editor, we are working on a way to migrate all the existing sites to the new AI powered site soon.
  • The Pro AI Site plan includes all AI features, while the Legacy plan supports normal site creation without AI.

Key Features

  1. Block-Specific AI Styling – Style individual blocks with AI-generated designs for one-off customization.
  1. Site-Wide AI Styling – Apply consistent styles across the entire page for a unified look.
  1. Attach Image & Design – Upload a screenshot or design image to guide AI and quickly match a preferred style.
  1. Code Access & Rollback – View or edit the generated CSS directly, and revert to earlier versions if needed.

Where to Make Changes

  • In Notion – Change the content and layout. Add or remove sections, rearrange blocks, or insert images here.
  • In Bullet AI – Change styles. Adjust fonts, colors, spacing, or the overall look.
  • In Design Mode – Make small, direct changes like font size, alignment, spacing, or background color.
  • With CSS – For advanced users who want total control.

Quick Decision Guide: Where to Edit

What do you want to do?
Use this tool
Add, remove, or rearrange content/layout
Notion
Change how things look (colors, fonts, spacing)
Bullet AI
Make exact pixel-perfect tweaks (e.g., spacing, alignment, etc)
Design Mode
Try fresh design inspiration or complex style combos
AI with Image upload
Apply device-specific or advanced rules
Custom CSS

Selecting and Styling Elements

Before you start styling, select which element to style exactly. It helps Bullet AI more context about elements that you want to style. Every part of your site: text, callouts, images, headings is treated as a block. You can style all blocks of a type (for example, all callouts) or just a single block. This page walks you through how to pick the right element and apply styles with AI or with a screenshot.

Selecting an Element

  • Hover over your site and click an element.
  • By default, changes apply to all elements of that type (e.g., all callouts).
1.00
  • To style just one block, click the blue target icon. Now the change affects only that block. Underneath it uses block id to update the style, so it doesn’t affect other elements.
      • 1.00

Styling with AI

  1. Select a block.
  1. Open the AI Chat panel.
  1. Type what you want (e.g., “make the background light blue with rounded corners”).
  1. AI applies the style and shows the CSS.
If you don’t like it, you can:
  • Reject Style – Discard it (this removes only the most recent change).
      • 1.00
  • Rollback – Return to an earlier saved style, removing all changes made after that point.
1.00
Rejecting or rolling back does not refund credits.
Rule of Thumb: AI vs Design Mode
  • Use AI when you want inspiration, new themes, or complex style combos (colors + borders + spacing in one go).
  • Use Design Mode when you want precise, guaranteed results (font size = 18px, align right, padding = 10px).

Using Images

  • Upload a screenshot to guide AI.
1.00
  • AI matches the style up to about 90%.
  • To get closer:
    • Arrange blocks in Notion to match the screenshot.
    • Group related blocks into a single callout.
    • Match image size if you want exact height/width.
Icons and graphics won’t be copied exactly, but the style will be close.

Design Mode

Not all changes need AI. Sometimes you know exactly what you want: adjust spacing, align text, change a color, or add a shadow. For these predictable edits, Design Mode is faster and more precise. This section explains how to use Design Mode for full manual control.

Design Mode Panel

If you prefer direct control:
  • Open Design Mode.
  • Adjust typography, colors, spacing, borders, and shadows.
  • For simple, deterministic changes (like spacing, alignment, color, or shadow), use Design Mode — it’s more accurate than AI prompts.
1.00

Managing Code, Devices, and Best Practices

All the code that you applied using AI or the editor will go to the CSS tab. You can open Code </> to see the code applied. If you are an advanced user, you can also edit the CSS when needed. At the moment Bullet AI works only for CSS. It doesn’t add Javascript or change the HTML layout of the Notion page.

Code and Changes

  • Click Code to see what styles AI applied.
notion image
  • Use the Code Editor (before Publish) to edit or remove styles.
notion image
  • Save as Global Code to apply changes across the whole site.

Responsive Styling

  • Styles default to desktop, and desktop changes apply globally across all devices.
  • Switch to tablet or mobile in the toolbar to preview and tweak device-specific changes.
  • If you want changes only for Desktop, you’ll need to add CSS manually.
notion image

Best Practices

  • Keep styles consistent for a clean look.
  • Use global styles for common blocks, local styles for one-offs.
  • Always preview before publishing.
  • Combine AI + Design Mode edits for best results.

Credits

  • Each site comes with 100 credits w hich can see under the Billing section.
notion image
  • Credits are used whenever you apply AI styles.
  • Block-level styling uses fewer credits, while page-level styling consumes more.
  • Rejecting or rolling back a style will not refund credits.

Quick Recap

  • Notion = structure
  • Bullet AI = style
  • Design Mode = quick fixes
  • CSS = full control
  • AI = inspiration and combos