Build a 3D Website with AI

Learn how to build a modern website with AI and enhance it with 3D elements from Spline.

Roadmap & Resources

Choose a Starting Template

Select a Starting Template

Interactive 3D Website

Best for a flexible 3D starting point

Template

https://profitstudio.app/template/interactive-3d-website

3D AI Platform

Best for AI and SaaS websites

Template

https://profitstudio.app/template/3d-ai-platform

Aether Horizon

Best for cinematic landing pages

Template

https://profitstudio.app/template/aether-horizon

Explore All Templates

https://profitstudio.app/templates

Replace the 3D Element

Replace the 3D Element

Browse 3D Scenes

Open the Spline library and choose a scene

SPLINE

https://app.spline.design/community

Replace the 3D Element

Replace the template’s current 3D scene using your Spline Viewer URL.

Update the current Spline 3D scene in this project to use this new Viewer URL: {{SPLINE_VIEWER_URL}} Keep everything else exactly the same. Do not redesign the website. Do not change the layout, text, spacing, or any other sections. Only replace the current Spline 3D scene with the new one.

Spline Viewer URL

Paste your Spline Viewer URL

Customize the Website

Customize and Polish the Website

Customize and Polish the Website

Adapt the template to your niche, brand, goals, and required sections.

Customize the current website to match this project. Project details: - Website type: {{WEBSITE_TYPE}} - Brand name: {{BRAND_NAME}} - Main goal: {{MAIN_GOAL}} - Style direction: {{STYLE_DIRECTION}} - Sections to add or adjust: {{SECTIONS_TO_ADD}} Use only the details that are provided above. If any field is empty, ignore it and do not reference it. Do not invent unnecessary details. Update the existing website so it fits the project clearly. Requirements: - Keep the current structure and overall design quality - Update the hero section, headings, paragraphs, buttons, and section content based only on the provided details - Adapt the messaging so it feels clear, relevant, and professional - Add the requested sections if they are provided and missing - Adjust, simplify, or remove sections only when needed for clarity and fit - Keep the website clean, modern, and visually consistent - Improve spacing, alignment, content hierarchy, and section flow where needed - Make sure the final result feels polished and cohesive - Do not overcomplicate the layout - Do not redesign the website from scratch - Keep the website responsive Important: - Focus on improving the existing website, not replacing it with a completely different design - Ignore any empty customize fields - If some details are missing, keep the current content or make only minimal sensible adjustments Apply the changes directly to the current website.

Website type

e.g. Portfolio, Landing Page, SaaS

Brand name

e.g. Profit Studio

Main goal

e.g. Showcase 3D work, Get leads

Style direction

e.g. Minimal, Dark, Vibrant

Sections to add or adjust

e.g. Add a pricing section, Update the services

Check the mobile preview and request a focused mobile-only adjustment if needed.

Deploy Your Website

Continue to the Deployment Tutorial

Watch Deployment Tutorial

Watch Deployment Tutorial

Continue with deployment

https://youtu.be/HGs-4QjyjHQ?si=EBUOpPx38n9vVROR