How to Customise Your AI-Generated 3D Website — Full Guide

Draftly's AI generates a complete 3D website from your brief in minutes. What it produces is a strong starting point. The finished product emerges from customisation: shaping the AI's output to fit your exact brand, audience, and conversion goals.

This guide walks through every layer of customisation available in Draftly.

New to Draftly? Read Draftly for Beginners: Build Your First 3D Website Today first.

Understanding What the AI Generates

A Draftly-generated 3D site has five layers:

• The 3D scene — geometry, materials, lighting, and animations
• The content layer — HTML text, headings, body copy, and calls to action
• The layout structure — section order and transitions
• The styling — colours, typography, spacing
• The metadata — page titles, descriptions, and structured data

Step 1: Refine Through the Chat Interface

The fastest way to make broad changes is to continue the conversation with Draftly's AI:

• "Change the colour palette to deep navy, white, and gold"
• "Make the hero section more minimal — remove two of the floating elements"
• "Add a testimonials section after the features section"
• "Change the font to something more modern and geometric"

Step 2: Use the Visual Editor for Fine-Grained Control

The Draftly visual editor gives you direct control over individual elements without writing code:

Edit text content by clicking any text element and typing directly.

Adjust colours using the colour picker. Changes propagate to all instances of that colour throughout the site.

Modify layout by dragging sections to reorder them, adjusting padding and spacing.

Upload and replace images by clicking any image placeholder and selecting from your file system.

Step 3: Customise the 3D Scene

Adjusting materials. Click any 3D object to open the material editor. Change base colour, roughness (matte vs. glossy), metalness, and normal map (surface texture). For brand-specific materials, upload your own texture maps here.

Changing lighting. Lighting dramatically affects mood. Draftly's lighting editor offers preset rigs (studio, outdoor, dramatic, ambient) and allows manual adjustment of each light source.

Modifying animations. Each animation has adjustable parameters: speed, amplitude, timing curve, and trigger (load, scroll, or hover). Slow animations feel premium and calm; fast animations feel energetic.

Step 4: Update the Content Layer

Work through each section systematically:

Headlines. Be specific: "Build a 3D Property Website in Hours, Not Months" not "Your Business Deserves the Best."

Calls to action. Make the CTA button text describe the outcome: "Try for free", "Book a demo", "See how it works."

Social proof. Add real testimonials, logo bars of recognisable clients, and quantified results as close to the CTA as possible.

Step 5: Optimise the Metadata

Before publishing:

• Page title: include your primary keyword and brand name, under 60 characters


• Meta description: 120–160 characters, describes the page's value clearly


• Open Graph tags: upload a custom OG image (1200×630px)

Step 6: Test Before Publishing

Test on:

• Desktop Chrome and Safari


• Mobile Chrome on Android (test on a real device if possible)


• A slow network (throttle to "Fast 3G" in Chrome DevTools)


• With JavaScript disabled to verify that core content is accessible

Publishing and Iterating

Draftly publishes to its own hosting infrastructure with one click. You can also export the generated code and deploy it on Vercel, Netlify, or any Node.js-compatible hosting platform.

After publishing, treat the website as a living product. For the agency perspective on iterating at scale, read How Agencies Are Scaling to 50+ Client Websites with Draftly.