Build a website from scratch with Crewdle Build

Crewdle Build turns a plain-language brief into a real, working website, not a mockup, walking you through six guided steps along the way. This guide follows one build start to finish: a landing page for Fern & Co, a fictional boutique houseplant shop.

Step 1: Describe what you want to build

Open Build and describe the site in plain language: what it's for, who it's for, and what sections it needs. Pick a starter like Landing page for a head start, or write your own brief. We used: "A warm, earthy landing page for Fern & Co, a boutique houseplant shop. Needs a hero, a featured plants section, a plant care tips section, store hours and location, and a newsletter signup."

Step 2: Answer a few quick questions

Before it writes anything, Build asks a handful of quick questions to nail the vibe: the mood you want, who the audience is, whether you have real content or want tasteful placeholders, and whether to match an existing brand.

Build asks a few quick questions before it writes anything, so the result matches your intent from the start.

How to answer the setup questions

1. Click one of the suggested answers, or type your own in the box below.
2. Click Next after each question; the last one has a Submit button.
3. Read the vision Build summarizes back, then click Yes, build it! to lock it in.

Step 3: Watch the plan and style guide come together

Once you confirm, Build locks in a written Project Plan — goals, target users, scope, tone, and a starting color and font palette — then builds the Style Guide: your color tokens, typography, spacing, and every reusable component (buttons, cards, sections) the design calls for.

The Project Plan captures the goals, users, and scope before a single component is built.

The Style Guide holds the color palette and typography Build picked for the brief.

Open any component in the Components tab to see its live preview, variants, and props table.

Every component, like this HeroSection, gets its own preview with variants and a props table.

Step 4: Review the user journey, structure, and blueprint

Before assembling the page, Build maps out three more things you can inspect and redirect:

• User Journey: how each type of visitor moves from curiosity to action, stage by stage, with their emotions, thoughts, and pain points along the way.
• Structure: an information-architecture map of how your content connects, plus the navigation it produces.
• Blueprint: every visitor goal broken into tasks and subtasks, each tied to the exact screen and component that fulfills it.

The User Journey maps each persona's emotional arc across the page, stage by stage.

Structure shows how your content connects and the navigation it produces.

The Blueprint ties every visitor goal to the exact screen and component that delivers it.

You can reply in the chat at any point to redirect any of these; Build carries your answer into the next step.

Step 5: See the finished page assembled and live

Once the blueprint is set, Build assembles every component into the real page, generating any imagery it needs (like a hero photo) along the way, and deploys it to a live preview automatically.

Click Present to see your finished, live prototype end to end.

How to preview and keep iterating

1. Click Present in the top bar to view the finished page full-screen, or check the docked preview panel on the right of any tab.
2. Describe any change in the chat, for example "swap in the real store address," and Build updates the affected components.
3. When you're happy with it, click Publish to put it on a live URL, or Duplicate to branch a variant.

Where to go from here

Everything is real code you can keep shaping: swap in your own photos and copy, connect a custom domain, or hand it to a developer through the built-in code editor or the Build CLI. See Crewdle Build for the full picture.