AI Customization Examples

Here’s a concise reference you can adapt directly into prompts for your own brand.

Quick Prompt Templates by Category

1. Colors & Theme

• "Use a [brand color] primary accent (hex: #XXXXXX) and a light gray background."
• "Give the widget a dark mode look with off-black background and soft white text."
• "Match our brand: deep navy background, white text, and gold accents for buttons and badges."
• "Use a clean black and white theme with subtle gray borders on cards."
• "Apply a pastel palette with soft backgrounds and gentle accent colors for buttons."

What it affects: backgroundColor, primaryColor, textColor, borderColor, cardBackground, badgeColor, etc.

2. Typography

• "Use a modern sans-serif font for all text and make headings bold."
• "Increase the main title size and keep body text at 14px for readability."
• "Use a clean sans-serif for body text and a slightly heavier weight for headings."
• "Use a monospace font for prices and keep everything else in our main brand font."

What it affects: fontFamily, headingFontSize, bodyFontSize, fontWeight, fontSource.

3. Layout & Spacing

• "Make the layout more compact with tighter spacing between elements."
• "Add more padding around the entire widget and extra gap between product cards."
• "Use a two-column layout for product cards on desktop, but keep it single column on mobile."
• "Center all content and add more whitespace around the header."

What it affects: gap, borderRadius, padding, grid/layout settings.

4. Buttons & CTAs

• "Make the add to cart button larger with pill-shaped corners."
• "Use our brand green for the primary button background and white text."
• "Use an outline style for secondary buttons and a solid style for the main CTA."
• "Make the main CTA more prominent with bolder color and slightly larger text."

What it affects: Button colors, borderRadius, padding, size, and display styles.

5. Borders & Shadows

• "Remove all borders and use very subtle shadows on product cards."
• "Add a soft shadow to the widget container and round all corners slightly."
• "Use thin, light gray borders on cards with no shadows for a flat look."
• "Make borders thicker and use dashed borders around the bundle area."

What it affects: borderRadius, borderColor, border width/style, shadows.

6. Badges & Labels

• "Make the discount badge bright red with white text and a pill shape."
• "Increase the size of badges and make them more prominent."
• "Hide tier badges but keep discount labels visible."
• "Use our accent color for all badges and slightly round their corners."

What it affects: Badge background, text color, border radius, size, visibility.

7. Banner & Header

• "Remove the banner and keep only the title and subtitle."
• "Center the title and subtitle and make the subtitle italic."
• "Use a subtle gradient background for the header area."
• "Make the main title larger and the subtitle smaller but more spaced out."

What it affects: Banner visibility, alignment, font styles, custom CSS for gradients.

8. Product Cards

• "Show larger product images and reduce text below each image."
• "Make product cards flat with no shadows and very light borders."
• "Add a hover effect that slightly lifts the product card and increases shadow."
• "Highlight selected products with a stronger border and different background color."

What it affects: Image size, shadows, borders, hover states, selected state styling.

9. Compound Brand-Focused Prompts

Use these and swap in your brand adjectives and colors:

• "Dark, premium theme with rounded corners, gold accents, and slightly larger text."
• "Minimalist, clean design with thin light-gray borders, lots of whitespace, and a simple blue accent color."
• "Playful and vibrant look with bright accent colors, rounded buttons, and larger badges."
• "Professional corporate style with a white background, navy accents, clean sans-serif typography, and moderate spacing."

Tips for Using These Prompts

• Be explicit with hex codes when you know them (e.g. "Use #123456 as the primary color").
• Start broad (theme, colors, typography), then refine (spacing, buttons, badges).
• Make one conceptual change at a time when you want predictable results.
• Always preview and iterate; use undo to safely experiment.

You can copy any of the lines above and adjust colors, sizes, and adjectives to match your brand voice and visual identity.