Skip to content

Styling Guide

Learn how to customize your blog's appearance using VibeLog's AI-powered styling system.

AI-Powered Styling

VibeLog uses AI to transform your blog's appearance based on natural language prompts. Simply describe the look you want, and the AI will generate appropriate CSS.

How It Works

  1. Start the development server: vibelog dev
  2. Open the VibeLog panel in your browser
  3. Enter styling prompts in natural language
  4. See changes applied in real-time
  5. Build your site to preserve the styling

Effective Prompts

Color Themes

text
"dark theme with purple accents"
"minimal white background with blue links"
"warm orange and brown autumn colors"
"corporate blue and gray professional look"
"vibrant pink and green neon theme"

Style Approaches

text
"minimalist design with lots of whitespace"
"retro 80s aesthetic with bold colors"
"modern flat design with subtle shadows"
"classic newspaper layout with serif fonts"
"tech blog style with monospace highlights"

Specific Elements

text
"rounded corners and soft shadows"
"bold typography with large headers"
"subtle gradients and smooth transitions"
"high contrast for better accessibility"
"mobile-first responsive design"