Quick Start

1. Sign up and log in

Visit lokuma.ai, click Login in the top right, and follow the steps to create your account. We recommend Google Sign-in for the fastest experience, but any email works.

Want to move even faster? Just enter your first prompt and click generate from /create. We'll prompt you to create an account before showing the result. Once you sign up, your journey continues seamlessly — and you'll see your beautiful website come to life.

2. Describe your site or pick a template

After sign-in, you land on the /create page — your starting point for any new project. It has two surfaces, switchable via tabs:

• Templates tab — start from a designer-curated template matching your industry.
• My Projects tab — pick up an in-progress project you've already started.

Option A — Use a prompt directly

Type what you want in natural language. For example:

"Create a single-page website for a coffee shop with menu and contact information."

The more specific you are, the better the result.

Below the input box, the START WITH: row gives you four ways to enrich the prompt before generating:

• + Add files — attach brand guidelines, screenshots, or PDFs. Lokuma's AI uses them to shape style and structure.
• Visuals — open the Visuals dialog to choose a design direction or theme before generating.
• Rebuild Your Website — paste a website URL you'd like Lokuma to reference. The AI considers its information, structure, and visual style when generating yours.
• Your Site About — share more context about your industry, audience, goals, and required functionality. The more context, the smarter the generation.

Option B — Choose a template

Click the Templates tab below the prompt input to browse Lokuma's template library. Templates are organized by category (AI Application, Design Agency, E-commerce, Education, Fintech, Fitness, Portfolio, Restaurant & Café, Retail, SAAS, Software, Travel, Wellness…).

Pick a template that fits your industry and click Get Started — you'll enter the editor with the template loaded as a starting point, ready to customize.

3. Generate the site

Once you submit a prompt or select a template, Lokuma's AI starts generating. You'll see a live progress card showing the four phases:

The four phases:

1. Design — picking the design language, palette, typography, and layout direction.
2. Code — scaffolding the project and writing pages.
3. Build — running the build pipeline, fetching images, generating final assets.
4. Done — the site is ready to preview and edit.

Most builds finish in 2–5 minutes.

4. Edit and customize

After generation completes, the editor opens with three views accessible from the top bar — Dashboard, Preview, Code:

Visual edit

Turn on Visual edit mode from the chat input; the preview becomes click-aware. Click any element — text, image, button, section — and a Selection Card appears with the available direct actions:

You have two paths once an element is selected:

Direct actions (fast, mostly free, no LLM) — click a button on the Selection Card:

Describe a change in chat — for anything not in the table (multi-element changes, style sweeps, generating a new image from a prompt, restructuring a section). Type into the chat input while the element is still selected; the AI uses your selection as context and rewrites the relevant code.

Example chat prompts that work well:

• "Make this section lighter and add more padding."
• "Replace this stock photo with something more minimal — Scandinavian café vibe."
• "Change the headline to feel more confident."

For the full per-action reference (size limits, fast vs agent path for image replacement, what to do when Edit text rejects nested JSX, etc.), see Key Features → Visual Edit.

Discuss mode

Toggle the chat panel from Visual edit to Discuss when you want to talk through design direction without committing changes. Useful for getting alternatives, sanity-checking ideas, or just thinking out loud — no credits consumed.

Version control via chips

Every successful generation or edit creates a new version chip in the chat panel:

Each chip shows the version number, file count, time since creation, and a one-click Restore button. Restoring rolls back code and layout to that snapshot while preserving your brand identity (logo, colors, fonts) and chat history.

Below each version chip, TRY NEXT suggestion chips guide the next edit — quick ideas to push your site forward.

Style drawer

Click the Style button in the preview toolbar (top of the preview pane) to open the Style drawer for brand-level decisions — palette, font pairing, spacing scale. Changes preview live in the iframe; click Apply to persist into the code. No credits consumed.

The Style button is only enabled after the first build completes (no theme to swap before that) and is disabled while a build is running.

Add or remove sections

Ask the AI in the chat — section-level and page-level changes both go through chat:

• "Add a pricing table between Features and Footer."
• "Remove the testimonials section."
• "Add a new page for our team."
• "Move the FAQ section above Pricing."

The AI updates the page structure, regenerates the affected sections, and the nav bar auto-updates whenever pages are added, renamed, or removed.

5. Publish and share

When your site is ready, click Publish in the editor's top right corner. A modal opens:

Three publish paths depending on your plan:

• Free — Free plan publishes under a Lokuma subdomain (e.g. gumqqo.lokuma.app). Pick any available 6–12-character handle.
• Custom domain — Starter and above can connect a custom domain. See Custom Domain Setup for full DNS instructions.
• Code export — Starter and above can export the full source (HTML / CSS / JS) and host it themselves.

Lokuma branding: Free plans show a small "Built with Lokuma" footer banner. Starter and above can hide it from Dashboard → Domains → Lokuma branding.

Once published, share the link with customers, partners, or on social media. Continue editing the project in Lokuma anytime; click Publish again to push updates.

What's next

You now have a published Lokuma site. Common follow-ups:

• Manage submissions, SEO, and analytics — open the in-editor Dashboard.
• Connect a custom domain — follow the Custom Domain Setup Guide.
• Upgrade for more capacity — Pricing Plans walks through plan limits, billing, and AI credits.
• Explore advanced features — see Key Features for the full feature tour.

Frequently Asked Questions

How long does generation take?

Most builds finish in 2–5 minutes. Complex sites with many pages or heavy reference materials can take up to 10 minutes. You'll see real-time progress via the Design → Code → Build → Done phase indicator.

What if I don't like the first generation?

You have two options: Restore to a previous version (if you've already generated multiple times), or simply describe what to change in the chat — Lokuma rewrites the code to match. You can iterate freely; every edit creates a new restore-able version.

Do I lose credits if I'm not happy with an edit?

Each AI generation and edit consumes 1 credit. Corrective rebuilds — where Lokuma's AI fails to complete a task correctly and re-tries — are not charged. If you're just unhappy with the design direction, restoring a previous version doesn't refund the credits already used.

Can I edit the underlying code directly?

Yes, on Starter and above. Click the Code tab in the editor's top bar to inspect or edit the generated source directly. Free plans can preview the code but can't edit or export it.

My site looks great but the AI keeps changing things I don't want.

Use Discuss mode to plan changes without committing them, or be more specific with your edit prompts — "only update the hero section, leave testimonials unchanged". If a change goes wrong, click Restore on the previous version chip.

Where are my projects saved?

All projects are auto-saved as you work — your projects list lives on /projects (or via the avatar dropdown → Manage). Free plans allow up to 3 projects; Starter allows 10; Pro and Enterprise are unlimited.