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