Waymaker
Waymaker Host

Host Direct Examples

Learn about Host Direct Examples in WaymakerOS.

Host DirectExamplesWalkthroughs

Real conversation examples showing how to build different types of websites with Host Direct. Copy these prompts, adapt them to your business, and you'll have a live site in minutes.

Example 1: Business Landing Page

The most common starting point. A professional single-page site for your business.

The prompt

"Build a landing page for my landscaping business called Green Valley Landscaping. We're based in Brisbane, Australia. Include: a hero section with a tagline about transforming outdoor spaces, a services grid (lawn care, garden design, tree removal, irrigation), a pricing section with three tiers (Basic $99, Standard $249, Premium $499), customer testimonials, and a contact form. Use earthy green tones and professional fonts."

What the agent builds

The agent generates a complete HTML page with:

  • Responsive layout that works on mobile and desktop
  • CSS with the earthy green colour palette you described
  • A services grid with icons or descriptions
  • Pricing cards for your three tiers
  • A testimonial carousel or grid
  • A contact form (posts to a third-party service or Ambassador)

Iterating

"Add a photo gallery section between services and pricing. Use a grid layout."

"Change the hero background to a dark green gradient instead of solid colour."

"Add a Google Maps embed showing our location at 123 Queen Street, Brisbane."

"Make the mobile menu a hamburger that slides in from the right."

Each change redeploys in seconds.

Example 2: Event Page

A time-limited page for a conference, workshop, meetup, or product launch.

The prompt

"Build an event page for our annual tech meetup called BrisTech 2026. It's on April 15th at the Brisbane Convention Centre. Include: a countdown timer to the event, speaker lineup with photos and bios (use placeholder images), schedule with morning and afternoon sessions, venue information with an embedded map, and a prominent 'Register Now' button that links to eventbrite.com/our-event. Modern dark theme with blue accents."

What the agent builds

  • Live JavaScript countdown timer
  • Speaker cards with placeholder images (replace with real photos later)
  • Schedule table broken into time blocks
  • Google Maps or static map embed
  • CTA button linking to your registration page

Iterating

"Add a sponsors section at the bottom with logos in a row."

"Replace the placeholder speaker photo for Sarah Chen with this image" (paste base64 or describe)

"Add an FAQ accordion section with these questions: What's the dress code? Is parking available? Will talks be recorded?"

Example 3: Portfolio Site

Showcase creative or professional work.

The prompt

"Build a portfolio site for a freelance graphic designer. Include: a minimal home page with name and tagline, a work page showing 8 project thumbnails in a masonry grid (use placeholder images), an about page with bio and skills list, and a contact page with email and social links. Black and white theme with one accent colour — coral (#FF6B6B). Include smooth page transitions."

What the agent builds

A multi-page static site with:

  • index.html — Home page
  • work.html — Portfolio grid with lightbox
  • about.html — Bio and skills
  • contact.html — Contact details
  • style.css — Shared styles
  • app.js — Navigation and lightbox logic

Iterating

"Add a case study page for the Acme Corp rebrand project. Include before/after images, the brief, my approach, and the results."

"Make the portfolio thumbnails animate on scroll — fade in from below."

Example 4: Documentation Site

Structured reference content with navigation and code examples.

The prompt

"Build a documentation site for our REST API. Include: a sidebar navigation, getting started page with authentication instructions, an endpoints page listing GET /users, POST /users, GET /users/:id, PUT /users/:id, DELETE /users/:id with request/response examples in JSON, an error codes reference page, and a rate limits page. Use a clean developer-focused design with syntax-highlighted code blocks."

What the agent builds

A multi-page documentation site with:

  • Sidebar navigation across all pages
  • Syntax-highlighted code blocks (using Prism or Highlight.js)
  • Copy-to-clipboard buttons on code examples
  • Request/response tables for each endpoint
  • Mobile-responsive sidebar that collapses

Example 5: Internal Dashboard

A team-facing page that displays information at a glance.

The prompt

"Build a team dashboard page. Include: a header with our team name 'Platform Engineering', 4 metric cards showing Total Deploys (247), Uptime (99.97%), Open Incidents (2), and Team Members (8). Below that, a table of recent deployments with columns for Service, Version, Status (colour-coded green/yellow/red), and Time. Include 10 sample rows. Use a dark theme suitable for a wall-mounted monitor."

What the agent builds

A single-page dashboard with:

  • Metric cards with large numbers
  • Colour-coded status indicators
  • A styled data table
  • Dark theme optimised for readability on screens

Making it live

To connect real data, add JavaScript that fetches from your API:

"Update the dashboard to fetch deployment data from https://api.example.com/deploys every 30 seconds instead of using static data."

Example 6: Pricing Calculator

An interactive tool that serves a specific business purpose.

The prompt

"Build a mortgage repayment calculator. Input fields: loan amount (slider from $100K to $2M), interest rate (slider from 2% to 10%), and loan term (15 or 30 years radio buttons). Show: monthly payment, total interest paid, and total amount paid. Include an amortisation chart using Chart.js showing principal vs interest over the life of the loan. Clean, trustworthy design suitable for a financial services company."

What the agent builds

An interactive single-page app with:

  • Range sliders with live value display
  • Real-time calculation as inputs change
  • Chart.js amortisation visualisation
  • Responsive layout

Tips for better results

Be specific about design

Instead of: "Make it look good"

Say: "Use a dark navy background (#1a1a2e), white text, and coral (#ff6b6b) for buttons and highlights. System font stack. Lots of whitespace."

Describe the structure

Instead of: "Build me a website"

Say: "Build a single-page site with these sections in order: hero with tagline, features grid (3 columns), testimonials, pricing table, and footer with social links."

Reference real examples

"Build a landing page similar in layout to stripe.com — clean, gradient hero, feature sections with illustrations, and a strong CTA."

Include real content

The more real text you provide, the better the result:

"The hero tagline should be 'Fresh flowers delivered to your door every week'. The subtext should be 'Handpicked seasonal blooms from local growers. Plans start at $35/week.'"

Iterate in small steps

Don't try to get everything perfect in one prompt. Build the foundation, then refine:

  1. "Build the basic layout and structure"
  2. "Now add the colour scheme and typography"
  3. "Add the content for each section"
  4. "Add animations and interactions"
  5. "Optimise for mobile"

What happens next

Once your site is live:

  • Add a custom domain — Custom Domains guide
  • Add server-side logic — Ambassadors for form handling, API endpoints, scheduled tasks
  • Track changes — Every deployment is versioned with a permanent URL
  • Scale automatically — Waymaker's global edge network (330+ cities) handles any traffic volume