Start by crafting a detailed prompt that describes your website vision to V0. The key is being specific about functionality, branding, and structure while letting V0 handle the technical implementation.

Example Prompt Used for Nuzzl:

"I need a new website for nuzzl.co.uk, the logo is attached. We should build a site using the logo colours. The website should make reference to the system we offer at www.tagpoint.co.uk, the odoo erp development and implementations, implementation and hosting services for leadcms.ai and we also provide outsourcing in the same way as www.duklas.com.

Nuzzl is based in the south west of england in a city called Plymouth. Many years of experience developing and implementing systems. We have a strong product portfolio backed by teams in Denmark and Sri Lanka."

V0 Generated Assets:

• Complete Next.js 15 project structure with proper routing
• Responsive layout components (header, footer, navigation)
• Hero section with compelling call-to-action elements
• Service showcase cards with integrated icons
• Contact form components with validation
• Professional Tailwind CSS styling system
• Production-ready shadcn/ui component library integration

Project Export Process:

1. Review the generated design in V0's preview interface
2. Click "Export" button in the V0 interface
3. Select "Download as ZIP" for full project export
4. Extract the ZIP file to your development directory

Reference: View the complete Nuzzl V0 project

Set up your local development environment and verify that all V0-generated components work correctly before adding LeadCMS integration.

# Extract and navigate to project directory
unzip nuzzl-website.zip
cd nuzzl-website

# Install all project dependencies
pnpm install

# Start development server
pnpm run dev

At this stage, you should have a fully functional website running locally at http://localhost:3000. Verify that all components render correctly and the responsive design works across different screen sizes.

Transform your static V0-generated site into a dynamic, content-managed website by integrating the LeadCMS SDK. This step separates content from code, enabling non-technical team members to manage website content.

Install the LeadCMS SDK:

pnpm add -D @leadcms/sdk

Configure Environment Variables:

Create a .env file in your project root with your LeadCMS instance credentials:

# LeadCMS Configuration
NEXT_PUBLIC_LEADCMS_URL=https://admin.nuzzl.co.uk
LEADCMS_API_KEY=your-secret-api-key-here
LEADCMS_DEFAULT_LANGUAGE=en

Add LeadCMS Automation Scripts:

Update your package.json to include automated content fetching:

Update your package.json scripts section:

{
  "scripts": {
    "fetch": "leadcms fetch",
    "prebuild": "leadcms fetch && leadcms generate-env",
    "predev": "pnpm run prebuild",
    "build": "next build",
    "dev": "next dev"
  }
}

Download and use our comprehensive Copilot instructions file to enable context-aware AI assistance throughout your development process.

The Copilot Instructions Strategy:

Instead of explaining best practices in every prompt, use a Copilot instructions file that GitHub Copilot automatically reads and uses as context. This approach transforms your AI development workflow.

Download the Production-Ready Instructions File:

Rather than creating your own from scratch, download our battle-tested Copilot instructions that have been refined through real-world LeadCMS projects:

# Create the .github directory and download the instructions file
mkdir -p .github
curl -o .github/copilot-instructions.md https://raw.githubusercontent.com/LeadCMS/leadcms.ai.next/refs/heads/develop/.github/copilot-instructions.md

Benefits of Using Our Copilot Instructions:

What's Included in Our Instructions File:

• ✅ Static Site Generation: Complete output: "export" compatibility patterns
• ✅ LeadCMS Integration: Content type design and SDK usage best practices
• ✅ MDX Architecture: Content-inside-tags approach with proper component design
• ✅ Media Management: Asset handling and version control workflows
• ✅ Template System: Registration patterns and content type mapping
• ✅ Validation Patterns: Build-time content validation and error handling

As part of the content separation process, Copilot automatically generated reusable MDX components that maintain consistent styling and functionality across different pages.

Generated Component Implementation:

interface HeroSectionProps {
  title: string
  subtitle: string
  children?: React.ReactNode
}

export function HeroSection({ title, subtitle, children }: HeroSectionProps) {
  return (
    <section className="hero">
      <h1>{title}</h1>
      <p>{subtitle}</p>
      {children}
    </section>
  )
}

interface CTAsSectionProps {
  primaryText: string
  primaryHref: string
  secondaryText: string
  secondaryHref: string
}

export function CTAs({ primaryText, primaryHref, secondaryText, secondaryHref }: CTAsSectionProps) {
  return (
    <div className="cta-buttons">
      <Button href={primaryHref}>{primaryText}</Button>
      <Button variant="outline" href={secondaryHref}>{secondaryText}</Button>
    </div>
  )
}

interface CTASectionProps {
  title: string
  buttonText: string
  buttonHref: string
}

export function CTASection({ title, buttonText, buttonHref }: CTASectionProps) {
  return (
    <section className="cta-section">
      <h2>{title}</h2>
      <Button href={buttonHref}>{buttonText}</Button>
    </section>
  )
}

Before syncing to LeadCMS, review all locally generated content to ensure everything meets your requirements.

Key Areas to Review:

Review Your Generated Files:

# Explore your generated content structure
ls -la .leadcms/content/
tree .leadcms/content/  # If you have tree installed

Make any necessary adjustments to titles, slugs, categories, or content before proceeding to sync.

Use the LeadCMS SDK to synchronize all your local content files to your LeadCMS instance.

Execute the Sync Command:

# Sync all local content to LeadCMS
pnpm exec leadcms push

What This Command Does:

1. Content Type Management: Reads content types from both CMS and local system, creating any missing content types automatically

2. Content Matching Logic:

   • By ID: If local content has an id that matches remote content, it's marked for update
   • By Slug/Title: If no ID match, tries to find content with the same slug or title for updating
   • New Content: If no matches found, creates new content records

3. Smart Updates:

   • Compares updatedAt timestamps between local and remote content
   • Safe Update: If timestamps match, proceeds with update
   • Conflict Detection: If timestamps differ, suggests running leadcms pull first to resolve conflicts

4. Metadata Processing:

   • Parses frontmatter from MDX files for metadata
   • Extracts content body from MDX and JSON files
   • Creates proper LeadCMS records with all attributes

# Pull latest changes from LeadCMS first
pnpm exec leadcms pull

# Resolve any conflicts in your local files
# Then push again
pnpm exec leadcms push

# Or override remote changes if you're certain (use carefully)
pnpm exec leadcms push --force

After successful sync, LeadCMS will update your local files with additional metadata from the CMS.

Expected Changes:

Your local MDX files will now include additional frontmatter fields:

---
id: 42
createdAt: '2025-10-29T10:30:00.000Z'
updatedAt: '2025-10-29T10:30:00.000Z'
title: 'Your Page Title'
slug: 'your-page-slug'
type: 'home'
# ... other existing fields
---

Commit These Changes:

# Stage all updated files
git add .leadcms/content/

# Commit the metadata updates
git commit -m "Add LeadCMS metadata to content files after sync"

With content synced to LeadCMS, you now have two powerful editing workflows available.

For Developers - Local Editing:

Continue editing content locally in VS Code with full AI assistance:

# Make changes to .leadcms/content/ files in VS Code
# Use Copilot for content suggestions and improvements
# Test changes locally with: pnpm run dev
# Sync changes back: pnpm exec leadcms push

For Content Editors - LeadCMS Admin UI:

Content editors can now manage content through the user-friendly LeadCMS admin interface:

• No technical knowledge required - Edit content through web forms
• Real-time preview - See changes as you type
• Media management - Upload and organize images and files
• Content workflows - Draft, review, and publish content

Build-Time Content Integration:

Your build process automatically pulls the latest content from LeadCMS:

# Content is automatically fetched during builds
pnpm run build  # Pulls latest content from LeadCMS before building

# Or manually fetch latest content
pnpm exec leadcms pull

Run your website locally to preview the complete AI-generated site with LeadCMS content integration.

Start the Development Server:

# Ensure content is fetched and environment is ready
pnpm run fetch

# Start the development server
pnpm run dev

What You'll See:

Your website will be available at http://localhost:3000 with:

• ✅ Dynamic Content: All content loaded from LeadCMS
• ✅ AI-Generated Components: V0-created components with LeadCMS integration
• ✅ Interactive Features: Forms, navigation, and responsive design
• ✅ Hot Reload: Real-time updates as you make changes
• ✅ Professional Styling: Tailwind CSS and shadcn/ui components

Explore your locally running website to verify all features work correctly.

Making Content Changes:

1. Edit content in your LeadCMS admin interface
2. Fetch updates with pnpm run fetch
3. See changes reflected immediately in your local site