Building a professional website used to be a 6 to 12-week process involving designers, developers, and significant budget. Today, that entire cycle is being compressed into the time it takes to drink a cup of coffee. This is the power of generative AI. This Draftly Onboarding Walkthrough is your blueprint to launching a fully-functional, scroll-driven 3D website from a single prompt in less than 10 minutes.
We’ll cover the entire process, from ideation to going live. By the end, you won't just have a website; you'll have a powerful new tool for your business, portfolio, or project, built 95% faster than with traditional methods.
The 2-Minute Preparation
While Draftly's AI does the heavy lifting, a moment of preparation ensures your first generated site is remarkably close to your final vision. A detailed prompt can improve the AI's first-draft accuracy by over 75%.
!draftly onboarding walkthrough your first site in 10 minutes, product
Define Your Website's Purpose
Before writing a single word, get crystal clear on two questions:
* What is this website for? Is it a landing page for a SaaS startup, a portfolio for a freelance photographer, or a digital storefront for an artisan coffee brand?
* Who is it for? Are you speaking to potential investors, art directors, or caffeine enthusiasts? Your audience dictates the tone, style, and content.
Gather Your Core Assets
Having these on hand will make the process seamless. If you don't have them, Draftly can generate placeholders, but using your own assets creates a more polished result from the start.
* Logo: A high-resolution PNG or SVG file.
* Brand Information: Your business name, a one-sentence tagline, and contact details.
* Key Visuals: One or two high-quality images or a short video clip that represents your brand. You can also rely on using AI image generation in Draftly if you're starting from scratch.
The Draftly Onboarding Walkthrough: From Prompt to Live Site
This is where the magic happens. Follow these steps to transform your idea into a tangible, cinematic website.
1. Write Your Master Prompt (Minutes 0-2)
The prompt is your creative brief for the AI. The more detail you provide, the better the output. Think of it as instructing a hyper-efficient design agency.
A weak prompt:
`Make a website for my coaching business.`
A powerful prompt:
`Create a cinematic, scroll-driven website for 'Momentum,' a leadership coaching service for tech executives. The brand aesthetic is dark mode, professional, and minimalist with gold accents. I need a hero section with a video of a city skyline, an 'About Me' section, a 'Services' section detailing my coaching packages, client testimonials, and a lead capture form.`
Your prompt should include:
* Business Name & Industry: Who you are and what you do.
* Target Audience: Who you're trying to reach.
* Aesthetic & Vibe: The look and feel (e.g., minimalist, brutalist, earthy, futuristic).
* Key Sections: The essential building blocks of your site (Hero, About, Services, etc.).
2. Generate and Review Your First Draft (Minutes 2-4)
Once you submit your prompt, Draftly's AI gets to work. In about 90 seconds, it will:
* Write industry-specific copy for every section.
* Generate or source a complete set of on-brand images and videos.
* Design a unique layout with 3D effects and scroll-driven animations.
* Structure the entire site, complete with navigation and a footer.
Your first version will appear on the canvas. Scroll through it and get a feel for the flow and narrative. This isn't the final product; it's a production-quality starting point.
3. Refine with Conversational Chat Editing (Minutes 4-8)
This is where you take creative control without touching a single line of code. Use the AI Chat Editor to make changes just by typing commands. This is far more intuitive than searching through complex menus. For a deeper dive, explore these commands that save hours with AI Chat Editing.
Here are some examples of what you can do:
* Text Changes: `Change the headline in the hero section to 'Lead with Confidence.'`
* Style Adjustments: `Make all the buttons the same gold color from the logo.`
* Image Swaps: `Replace the image in the about section with the headshot I uploaded.`
* Section Management: `Add a new section for frequently asked questions.` or `Delete the testimonials section for now.`
4. Check Mobile Responsiveness (Minutes 8-9)
With over 60% of website traffic in India coming from mobile devices, this step is critical. Draftly automatically optimizes your site for all screen sizes, but a quick check is always best practice.
Use the device toggles at the top of the editor to switch between desktop, tablet, and mobile views. Ensure the text is readable, images are aligned, and the scroll experience feels smooth. Our guide on testing your Draftly site on mobile before launch provides a complete checklist.
5. Publish Your Website (Minute 10)
Once you're satisfied with your site, it's time to share it with the world. Click the "Publish" button in the top-right corner. You have two immediate options:
- Use a free Draftly subdomain: Your site will be live instantly at an address like `yourbrand.draftly.site`.
- Connect a custom domain: If you already own a domain (e.g., `yourbrand.com`), you can easily link it to your Draftly site for a fully professional presence. The process is straightforward and our guide on how to connect a custom domain to your Draftly site walks you through it.
Beyond the Launch: Your Next Steps
Your website is now live, but it's just the beginning. Your Draftly site is a business tool designed for growth.
* Track Your Visitors: Integrate with Google Analytics or use the built-in Draftly Analytics to understand who is visiting your site and what they're engaging with.
* Capture Leads: Every form submission is captured in your Leads Dashboard. Set up email notifications so you never miss an inquiry.
* Optimize for Google: Use the Draftly SEO Panel Guide to edit meta titles, descriptions, and alt tags to improve your search engine ranking.
Ready to see how fast you can bring your vision to life? Turn your idea into a website right now.
