Learn

Master AI Prompting & Web Development

Learn how to write effective AI prompts, understand basic web development, and build amazing projects with AI assistance on Bool.

Start Learning Try Bool Now

Getting Started with Bool

Your first steps to building amazing websites with AI assistance. No coding experience required!

1. Start a New Project

Click "Create New Project" and describe what you want to build. Think of websites you use daily - like a blog, portfolio, or business site.

"Create a portfolio website like the ones on Instagram, with photo galleries and an about page"

2. Use Screenshots

Take screenshots of websites you like and upload them. Bool's AI will recreate the design with your content.

[Upload screenshot] "Make it look like this but for my coffee shop"

3. Chat to Refine

Use natural language to make changes. Just say what you want different, like changing colors or adding sections.

"Change the blue to green and add a contact form at the bottom"
Create Your First Project

AI Prompting Fundamentals

Learn the art of writing prompts that get you exactly what you want from AI

Be Specific & Clear

Vague prompts lead to generic results. The secret to getting exactly what you want is being extremely specific about every aspect of your project. Think of yourself as an architect providing blueprints rather than just saying "build me a house."

Example Progression:

Vague: "Make me a website"
Better: "Create a landing page for an online service"
Best: "Create a modern website for a project management tool. Include: main header section with video demo, 3-column feature grid highlighting collaboration/automation/analytics, customer logos section, and sticky call-to-action header. Use a blue/white color scheme with subtle gradients."

Do's and Don'ts

DO: Specify exact sections you need
"Include main header, features, testimonials, FAQ, and footer sections"
DO: Mention specific interface components
"Add a sticky navigation bar with smooth scroll to sections"
DO: Define your color preferences clearly
"Use a dark theme with purple accents (#8B5CF6 primary)"
DON'T: Use ambiguous terms
"Make it look nice" or "Make it modern"
DON'T: Assume AI knows your preferences
"You know what I like" or "Make it like my last project"

Provide Context

Context is the difference between generic output and perfectly tailored solutions. Always explain WHO will use it, WHAT problem it solves, and WHY specific choices matter. This helps AI make intelligent decisions about design patterns, copy, and functionality.

Context Framework:

1. Business Context: "I'm building an online platform for small law firms to manage client documents. We're competing with traditional paper-based systems."
2. User Context: "Our users are lawyers aged 35-60 who aren't very tech-savvy. They need simple, professional interfaces with large buttons and clear labels."
3. Technical Context: "This needs to work on older browsers (IE11+) and be mobile-responsive. We're using React with TypeScript."

Do's and Don'ts

DO: Explain your business model
"This is an app with basic features available to everyone and advanced analytics features for power users"
DO: Describe your ideal user
"Target audience: startup founders who need quick MVPs, aged 25-40"
DO: Mention competitors or inspiration
"Similar to Notion's clean aesthetic but simpler like Google Docs"
DON'T: Assume universal context
"Make it suitable for everyone" (too vague)
DON'T: Skip industry-specific needs
Forgetting to mention compliance needs for fintech or healthcare

Iterate & Refine

AI development is a conversation, not a one-shot command. The most successful projects are built through iterative refinement. Start with a foundation and layer on improvements, just like a sculptor refining their work.

Iteration Strategy:

Round 1 - Structure: "Create a dashboard layout with sidebar navigation and main content area"
Round 2 - Functionality: "Add collapsible sidebar, user profile dropdown, and notification bell with badge"
Round 3 - Polish: "Add smooth transitions, hover states, and loading skeletons. Make sidebar remember collapsed state"
Round 4 - Edge Cases: "Handle mobile responsiveness, add keyboard shortcuts (Cmd+K for search), and empty states"

Do's and Don'ts

DO: Build incrementally
"First get the layout right, then add interactivity, then polish"
DO: Reference what you see
"The button colors look good, but make them slightly larger and add a shadow"
DO: Test edge cases
"What happens when there are no items? Add an empty state with illustration"
DON'T: Try to do everything at once
Avoid 500-word prompts trying to describe every detail
DON'T: Start over from scratch
Build on what's working instead of regenerating everything

Use Examples & References

The fastest way to get what you want is to show examples. Reference well-known websites, describe specific components you've seen, or even explain the feeling you want to achieve. AI understands these references and can blend them creatively.

Effective Reference Techniques:

Direct Website Reference: "Create a main header section like Instagram's - with the gradient text, floating interface elements, and subtle animations"
Component Mashup: "Combine Facebook's clean table layout with Spotify's dark theme and Discord's playful hover effects"
Style Description: "Use a brutalist design style - bold black borders, stark contrasts, mono font, and asymmetric layouts like Gumroad"
Detailed Component Spec: "Create testimonial cards like Twitter's - with 5-star ratings, customer avatar, company logo, and quote. Add a subtle shadow and hover effect"

Do's and Don'ts

DO: Mix and match references
"Navigation like Vercel, cards like GitHub, animations like Framer"
DO: Describe specific interface patterns
"Bento grid layout like Apple's iPhone page with different sized cards"
DO: Reference design systems
"Follow Material Design 3 principles with rounded corners and pastel colors"
DON'T: Reference without context
"Make it like Amazon" (which part? The navigation? Product cards?)
DON'T: Use dated references
"Make it look like MySpace" or "90s web design"

Specify Technologies & Architecture

Being explicit about your tech stack prevents compatibility issues and ensures you get code that fits your existing project. Don't just mention the framework - specify versions, styling approach, state management, and any important patterns.

Tech Stack Specification Examples:

Frontend Framework: "Use React 18 with TypeScript, functional components with hooks, and avoid class components"
Styling Approach: "Style with Tailwind CSS v3, use arbitrary values sparingly, prefer component classes like 'card' over utility soup"
State & Data: "Use Zustand for global state, React Query for API calls, and local state for interface-only concerns"
Animation Libraries: "Add smooth animations with Framer Motion - use whileHover, whileInView, and stagger children effects"

Do's and Don'ts

DO: Specify versions when critical
"Use Next.js 14 with App Router, not Pages Router"
DO: Mention preferred patterns
"Use CSS Modules for styling, avoid inline styles"
DO: Include performance requirements
"Lazy load images, use dynamic imports for routes"
DON'T: Mix incompatible technologies
"Use jQuery with React" (they don't play well together)
DON'T: Assume latest versions
If you need Vue 2, specify it - AI might default to Vue 3

Break Down Complex Tasks

Large projects can overwhelm both you and the AI. The secret is to think like a project manager - break the work into phases, build foundational pieces first, then layer on complexity. This approach leads to cleaner code and fewer bugs.

E-commerce Site Breakdown Example:

Phase 1 - Foundation (Layout): "Create the basic layout: header with logo/nav/cart, main content area, and footer. Use CSS Grid for the main layout."
Phase 2 - Core Pages: "Add product grid page with filters sidebar. Create individual product page with image gallery, details, and add to cart button."
Phase 3 - Interactivity: "Implement cart functionality: add/remove items, quantity updates, persistent storage in localStorage."
Phase 4 - Enhanced User Experience: "Add search with autocomplete, filter animations, loading states, and 'quick view' modal for products."
Phase 5 - Polish: "Add micro-interactions, success notifications, empty states, and mobile optimizations."

Do's and Don'ts

DO: Build the data model first
"Start with the structure: What's a product? User? Order?"
DO: Test each phase before moving on
"Make sure the cart works before adding checkout"
DO: Keep a mental roadmap
"Layout → Components → State → API → Polish"
DON'T: Jump to complex features too early
Don't add real-time chat before basic messaging works
DON'T: Forget about data flow
Plan how data moves through your app from the start

Visual Prompting with Images & Screenshots

One of Bool's superpowers: AI that truly understands visual input. Upload screenshots, mockups, or inspiration images to communicate your vision perfectly.

Screenshots for Exact Layouts

Want to recreate a specific layout? Take a screenshot and Bool's AI will analyze every detail - positioning, spacing, typography, and component structure. This is 10x faster than trying to describe complex layouts in words.

Screenshot Prompting Examples:

Exact Recreation: [Upload screenshot] "Recreate this exact layout but change the purple to blue and update the text to be about our coffee shop"
Component Extraction: [Upload screenshot] "I like the card design in this image. Create similar cards but for displaying team members with photo, name, role, and bio"
Layout Analysis: [Upload screenshot] "Use this navigation style but make it responsive with a hamburger menu on mobile"

Do's and Don'ts

DO: Capture full components in context
Include surrounding elements so AI understands relationships
DO: Combine screenshots with text instructions
"Like this screenshot but with our brand colors and fonts"
DO: Use multiple screenshots for complex flows
"Here's the desktop version [img1] and mobile version [img2]"
DON'T: Upload blurry or partial screenshots
AI needs clear visuals to understand details
DON'T: Forget to mention what to change
Always specify modifications needed from the reference

Design Inspiration & Style Guides

Beyond exact layouts, use images to communicate design aesthetics, color palettes, typography styles, or overall "feel". Upload mood boards, brand guidelines, or any visual inspiration to guide the AI's creative decisions.

Style & Inspiration Examples:

Color Palette Extraction: [Upload brand image] "Extract the color palette from this image and use it throughout the site"
Style Matching: [Upload mood board] "Create a landing page that matches this aesthetic - note the minimalist style and use of white space"
Component Styling: [Upload UI kit image] "Use this button and form field style throughout the application"
Typography Reference: [Upload typography guide] "Match this typography hierarchy - notice the font sizes and spacing"

Do's and Don'ts

DO: Upload brand guidelines or style tiles
AI can extract and apply consistent design systems
DO: Mix different inspiration sources
"Colors from image 1, layout from image 2, buttons from image 3"
DO: Point out specific elements you like
"I love the gradient overlay in this main header section"
DON'T: Upload copyrighted designs without modification intent
Always plan to make it your own, not copy exactly
DON'T: Use low-quality inspiration images
Poor quality images lead to poor quality interpretations

Sketches & Wireframes

Don't have design skills? No problem! Even rough sketches on paper or basic wireframes communicate your ideas effectively. Bool's AI excels at transforming rough concepts into polished implementations.

Sketch to Code Examples:

Hand-drawn Wireframe: [Upload sketch] "Turn this wireframe into a modern web page. The squares are image placeholders, lines are text"
Whiteboard Diagram: [Upload whiteboard photo] "Implement this user flow diagram as an interactive onboarding process"
Figma/Design Tool Export: [Upload design file] "Convert this Figma design to responsive HTML/CSS with Tailwind"

Do's and Don'ts

DO: Label unclear elements in your sketch
Add notes like "video player here" or "user avatar"
DO: Specify the design style you want
"Make this sketch into a modern, minimalist design"
DON'T: Worry about artistic quality
Clear communication matters more than pretty drawings

Combining Visual & Text Prompts

The most powerful approach combines visual references with detailed text instructions. Use images to show "what" and text to explain "how" and "why". This hybrid approach yields the most accurate results.

Power Combinations:

Layout + Functionality: [Upload layout image] "Use this layout but make the cards filterable by category and add a search bar that filters in real-time"
Style + Content: [Upload design reference] "Match this visual style but for a restaurant website. Replace tech content with menu items and food photos"
Multiple References: [Upload 3 images] "Navigation from image 1, header section style from image 2, but using the color scheme from image 3"

Pro Tip: The 80/20 Rule

Use images to communicate 80% of the design (layout, style, colors) and text for the 20% that makes it unique (specific content, functionality, interactions). This saves time and reduces misunderstandings.

Advanced Topics

For those who want to understand the technical details and modify AI-generated code

HTML Structure & Common Modifications

HTML is the content layer of your website. Every element has a purpose, and understanding basic HTML helps you make quick edits without breaking the layout. Think of HTML tags as containers that hold and organize your content. 

<header class="navbar">
  <h1>My Company</h1>  <!-- Main heading -->
  <nav>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main>
  <section class="header">
    <h2>Welcome to our site</h2>
    <p>This is descriptive text</p>
    <button onclick="signUp()">Get Started</button>
  </section>
</main>

Do's and Don'ts for HTML Editing

DO: Change text between opening and closing tags
<h1>Old Text</h1> → <h1>New Text</h1>
DO: Update image sources and alt text
<img src="old.jpg" alt="description"> → <img src="new.jpg" alt="better description">
DO: Add or modify links
<a href="https://example.com">Click here</a>
DO: Use semantic HTML tags
Use <nav> for navigation, <header> for headers, <main> for main content
DON'T: Delete closing tags
Every <div> needs a </div>, every <p> needs a </p>
DON'T: Change class names without checking CSS
Classes like "header" or "navbar" are likely styled in the style sheet
DON'T: Nest block elements inside inline elements
Don't put <div> inside <span> or <p>

CSS Styling & Quick Customizations

CSS is where the magic happens visually. Understanding basic CSS properties lets you customize colors, spacing, fonts, and layouts. Most AI-generated code uses modern CSS or utility frameworks like Tailwind. 

/* Traditional CSS */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 20px;  /* top/bottom: 60px, left/right: 20px */
  text-align: center;
}

.hero-title {
  color: white;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Tailwind CSS (utility classes) */
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-16 text-center">
  <h1 class="text-white text-5xl font-bold mb-5">Title</h1>
</div>

Do's and Don'ts for CSS Editing

DO: Change colors using hex, rgb, or color names
background: #3b82f6; /* or rgb(59, 130, 246) or "blue" */
DO: Adjust spacing with padding and margin
padding: 20px; /* all sides */ padding-top: 40px; /* specific side */
DO: Use browser DevTools to test changes live
Right-click → Inspect → Modify CSS in real-time
DO: Learn common Tailwind classes if using Tailwind
p-4 (padding), m-4 (margin), text-lg (font size), bg-blue-500 (background)
DON'T: Use !important unless absolutely necessary
It overrides everything and causes maintenance issues
DON'T: Mix units carelessly
Stick to px, rem, or % - don't mix randomly
DON'T: Forget semicolons in traditional CSS
Every CSS property needs a semicolon at the end

JavaScript Interactivity & Common Patterns

JavaScript brings your site to life with interactivity. While AI handles complex logic, understanding basics helps you tweak behaviors, update text dynamically, or fix simple bugs. Modern JavaScript is more readable than ever. 

// Show/Hide Elements
const toggleButton = document.querySelector('#menu-toggle');
const menu = document.querySelector('#mobile-menu');

toggleButton.addEventListener('click', () => {
  menu.classList.toggle('hidden');
});

// Update Text Dynamically
const counter = document.querySelector('#counter');
let count = 0;

function increment() {
  count++;
  counter.textContent = count;
}

// Form Handling
const form = document.querySelector('#contact-form');
form.addEventListener('submit', (e) => {
  e.preventDefault(); // Stop page refresh
  alert('Form submitted!');
});

Do's and Don'ts for JavaScript Editing

DO: Change text content with textContent
element.textContent = "New text";
DO: Use console.log() to debug
console.log('Value is:', myVariable);
DO: Update simple event handlers
onclick="alert('Hello')" → onclick="alert('Goodbye')"
DO: Use modern syntax (arrow functions, const/let)
const myFunc = () => { /* code */ }
DON'T: Use innerHTML with user input
Security risk - use textContent for text
DON'T: Forget to check if elements exist
if (element) { /* safe to use element */ }
DON'T: Mix jQuery with modern JavaScript carelessly
Pick one approach and stick with it

Quick Reference: Most Common Edits

Here's your cheat sheet for the most frequent modifications you'll make to AI-generated code. Master these, and you'll handle 90% of customization needs.

Text Changes

Find: <h1>Old Title</h1> → Change to: <h1>New Title</h1> Find: <p>Lorem ipsum...</p> → Change to: <p>Your content</p> Find: placeholder="Email" → Change to: placeholder="Enter your email"

Color Changes

CSS: background: #3b82f6; → background: #10b981; Tailwind: class="bg-blue-500" → class="bg-green-500" Gradient: from-purple-500 to-pink-500 → from-blue-500 to-teal-500

Spacing Adjustments

CSS: padding: 20px; → padding: 40px; Tailwind: class="p-4" → class="p-8" (doubles the padding) Margins: class="mb-4" → class="mb-8" (more bottom margin)

Image Updates

<img src="placeholder.jpg" → <img src="your-image.jpg" alt="Description" → alt="Specific description for search engines" class="w-full" → class="w-full rounded-lg" (adds rounded corners)

Link Updates

<a href="#" → <a href="https://your-site.com" <a href="/about" → <a href="/about-us" Add: target="_blank" rel="noopener" (opens in new tab)

Pro Tip: Use Find & Replace

Most code editors have Ctrl/Cmd + F for find and Ctrl/Cmd + H for find & replace. Use these to quickly update multiple instances of text, colors, or class names throughout your project.

Supercharge with JavaScript Packages

Access millions of pre-built solutions from the JavaScript package library. Just mention a package by name and Bool will integrate it seamlessly!

Discovering Packages on npm

The JavaScript package library hosts over 2 million pre-built code packages. Instead of building everything from scratch, leverage the community's work. Visit npmjs.com to search, or just describe what you need to Bool!

Package Discovery Examples:

Search npm directly: Go to npmjs.com → Search "date picker" → Find popular options like "react-datepicker" or "flatpickr"
Let Bool suggest: "I need a calendar component for React" → Bool will suggest and implement popular options
Browse collections: Search "awesome-react" on GitHub for curated lists of the best React packages

Do's and Don'ts

DO: Check package popularity and maintenance
Look for high download counts and recent updates
DO: Read package documentation
Most packages have examples on npm or GitHub
DO: Consider bundle size for web apps
Check "Unpacked Size" on npm page
DON'T: Use abandoned packages
Avoid packages not updated in 2+ years
DON'T: Install packages for trivial tasks
You don't need a package to add two numbers!

Using Packages in Bool

Bool makes using npm packages incredibly simple. Just mention the package name in your prompt, and Bool handles installation and setup automatically. No manual npm install needed!

Package Integration Examples:

Simple mention: "Add a date picker using flatpickr" → Bool installs and implements it
Specific features: "Use Chart.js to create a bar chart showing monthly sales data"
Complex integrations: "Implement drag-and-drop file uploads using react-dropzone with image preview"
Animation libraries: "Add smooth animations using Framer Motion when elements enter the viewport"

Do's and Don'ts

DO: Be specific about what you want
"Use Swiper.js for a touch-enabled image carousel"
DO: Mention configuration needs
"Set up axios with a base URL and auth headers"
DO: Ask for best practices
"Use React Query for API calls with proper error handling"
DON'T: Mix incompatible packages
Check if packages work with your framework version

Real Package Integration Examples

See how simple it is to request complex functionality using popular packages. Copy these prompts and customize them!

Image Gallery:

"Create an image gallery using Swiper.js with thumbnails, full-screen mode, and lazy loading. Make it responsive."

Data Dashboard:

"Build a dashboard with Chart.js showing a line chart for revenue, bar chart for products sold, and a doughnut chart for traffic sources. Use the corporate color palette."

Interactive Form:

"Create a multi-step form using react-hook-form with validation. Include a date picker using flatpickr and file upload with react-dropzone. Show progress indicator."

Animated Landing:

"Add scroll animations using AOS (Animate On Scroll) library. Fade in sections, slide in cards from sides, and add a parallax header image."

Pro Tip: Combine Multiple Packages

Don't hesitate to use multiple packages together. For example: "Create a data table using react-table with CSV export using papaparse and date filtering with date-fns."

Ready to Get Started?

Everything you need to know to start building your first website with AI

🌟 Visual-First Development

Bool's superpower: Upload screenshots, mockups, or sketches and watch AI transform them into working code. This is 10x faster than describing layouts in words!

💡 Try it: Screenshot any website section you like and ask Bool to recreate it with your content.

Start with Templates

Choose from pre-built templates optimized for AI modifications. Each template is a perfect starting point for customization.

Conversational Development

Talk naturally: "Make the header sticky", "Add a contact form here", "Change this to dark mode". Bool understands context!

Live Preview

See changes instantly as AI writes code. No waiting for builds or refreshing - it's truly real-time development.

Auto-Save & Version History

Every change is saved automatically. Made a mistake? Just revert to any previous version with one click.

Instant Deployment

Your Bool gets a live URL immediately. Share your work, test on devices, or show clients - no complex hosting setup needed.

Quick Start Checklist

Power User Tip

Combine images + text prompts for best results. Show the design, explain the functionality!

Create Your First Bool

Additional Resources

Continue your learning journey with these curated resources

Community Gallery

Explore projects created by the Bool community for inspiration and learning.

Project Categories

Browse project ideas organized by category to find your next creation.

FAQ & Support

Get answers to common questions and find support resources.

Ready to Build Something Amazing?

Join thousands of creators using Bool to bring their ideas to life with AI assistance.

Start Building Free