Skip to main content

Source: Codex planning agent (2026-06-27), originally realtor-system-design/screen-blueprints.md. Prototype blueprints for target-state screens. Some already exist in production — read do-not-reinvent.md before building any screen from scratch.

WiseAI Realtor System - Screen Blueprints

Design Principle​

The product should feel like a premium real estate command center. The REALTOR should immediately see leads, listings, conversations, QR campaigns, content, and AI tools as one connected operating system.

The public website should feel local and human. The backend should feel fast, calm, and operational.

Visual Direction​

Public Website​

Tone:

  • Premium.
  • Local.
  • Trustworthy.
  • Calm but modern.
  • Clear conversion paths.

Avoid:

  • Cookie-cutter hero layouts.
  • Generic SaaS cards everywhere.
  • Aggressive popups.
  • AI gimmick language.
  • Overly dark tech branding.

Use:

  • Real property photography.
  • Agent/team portraits.
  • Listing imagery.
  • Neighbourhood imagery.
  • Clear CTAs.
  • Helpful lead capture moments.

Backend​

Tone:

  • Professional.
  • Dense but readable.
  • Operational.
  • CRM-like without feeling old.
  • AI-native without feeling flashy.

Avoid:

  • Marketing-site styling.
  • Oversized dashboard cards.
  • Decorative gradients.
  • Empty AI buzzword panels.

Use:

  • Tables with quick filters.
  • Timelines.
  • Side drawers.
  • Status chips.
  • Source/language labels.
  • Clear next actions.

Design System Seed​

Layout​

  • Public website max content width: 1180-1280px.
  • Backend app shell: left sidebar, top context bar, main content area, optional right details drawer.
  • Cards: 6-8px radius.
  • Buttons: icon + concise label where helpful.
  • Forms: compact, clear, mobile-friendly.

Colour System​

Default WiseAI Realtor theme:

  • Ink: deep navy.
  • Accent: trust teal.
  • Success: grounded green.
  • Warm highlight: muted gold.
  • Background: soft off-white.
  • Borders: cool light gray.

Template themes should override these without breaking accessibility.

Typography​

  • Public website: elegant, editorial heading font plus highly readable body font.
  • Backend: clean sans-serif, compact sizing, excellent table readability.

Common Components​

  • Listing card.
  • Lead card.
  • Status chip.
  • Language chip.
  • Source chip.
  • AI summary panel.
  • Conversation transcript.
  • QR campaign card.
  • CTA block.
  • Content editor toolbar.
  • Website section picker.
  • Voice line card.
  • Chat knowledge source card.

Prototype 1: Public Website Home​

Objective​

Show that the REALTOR has a premium modern site with AI built into the experience, not slapped on.

Layout​

Header:

  • Logo/name.
  • Navigation: Buy, Sell, Listings, Neighbourhoods, Guides, About, Contact.
  • Language selector if enabled.
  • CTA: Ask AI or Book a Consult.

Hero:

  • Agent/team/brokerage name.
  • Value proposition.
  • Primary CTA: Search Homes.
  • Secondary CTA: What Is My Home Worth?
  • Tertiary AI CTA: Ask Our AI Real Estate Assistant.
  • Visual: agent/property/neighbourhood image.

Below Hero:

  • Quick search bar.
  • Featured listings.
  • Buyer and seller pathways.
  • AI front office block: chat, voice, QR sign capture.
  • Neighbourhood cards.
  • Recent guides/articles.
  • Testimonials.
  • Contact block.

Key Interactions​

  • Search opens listing search.
  • Ask AI opens chat with site context.
  • Voice CTA opens call/callback options.
  • Language selector changes content where available.

Prototype 2: Listing Detail Page​

Objective​

Convert listing interest into a lead while giving enough property context to build trust.

Layout​

Top:

  • Photo gallery.
  • Address/title.
  • Key facts.
  • Price.
  • CTA column.

CTA Column:

  • Book a showing.
  • Ask about this listing.
  • Get similar homes.
  • Call AI assistant.

Main Content:

  • Description.
  • Property details.
  • Map/community context.
  • Similar listings.
  • Listing agent/brokerage information.

AI Context:

  • Chat opens already aware of the listing.
  • QR sign visitors see "You scanned the sign for this property."

Prototype 3: QR Sign Landing Page​

Objective​

Make sign traffic feel immediate and high-intent.

Layout​

Hero:

  • "You scanned the sign for 125 Example Street."
  • Property image.
  • Fast facts.

Action Grid:

  • Send me details.
  • Book a showing.
  • Ask a question.
  • Show similar homes.
  • Talk to AI assistant.

Lead Capture:

  • Name.
  • Phone/email.
  • Preferred language.
  • Timeline.
  • Buyer/seller intent.

Tracking:

  • Campaign ID.
  • Listing ID.
  • QR sign source.
  • Language preference.

Prototype 4: Backend Dashboard​

Objective​

Give the REALTOR a morning command center.

Layout​

Top Stats:

  • New leads.
  • Warm leads.
  • Voice calls.
  • Chat conversations.
  • QR scans.
  • Follow-up due.

Main Panels:

  • Priority leads.
  • Recent conversations.
  • Top performing listings.
  • QR campaigns.
  • Language breakdown.
  • Content tasks.

Right Rail:

  • AI-recommended next actions.
  • Missed handoffs.
  • Quick create: blog, QR, campaign, voice script.

Prototype 5: Lead Profile Drawer​

Objective​

Let the agent understand a lead in 20 seconds.

Layout​

Header:

  • Name.
  • Status.
  • Lead score.
  • Source.
  • Language.
  • Assigned agent.

Summary:

  • AI lead summary.
  • Buyer/seller intent.
  • Urgency.
  • Budget/property interest.
  • Next best action.

Timeline:

  • QR scan.
  • Chat transcript.
  • Voice call transcript.
  • Form submission.
  • Email/SMS notes.
  • Agent notes.

Actions:

  • Call.
  • Text.
  • Email.
  • Assign.
  • Create follow-up.
  • Draft response with AI.

Prototype 6: Voice Agent Settings​

Objective​

Make a complex voice system easy to configure.

Layout​

Tabs:

  • Lines.
  • Voices.
  • Scripts.
  • Routing.
  • Transcripts.
  • Analytics.

Voice Line Cards:

  • Premium Main Line: English, Spanish, French.
  • Punjabi Line.
  • Urdu Line.
  • Mandarin Line.

Each line:

  • Phone number.
  • Voice provider.
  • Voice actor.
  • Languages.
  • Quality mode.
  • Routing.
  • Business hours.
  • Test call button.

Important UX:

  • Make the premium vs dedicated language line distinction clear.
  • Do not make lower-quality language lines feel broken; frame them as "coverage-first language lines."

Prototype 7: Chat Agent Knowledge​

Objective​

Make training the chat agent feel manageable.

Layout​

Knowledge Sources:

  • Agent profile.
  • Listings.
  • Neighbourhoods.
  • Buyer guide.
  • Seller guide.
  • FAQs.
  • Brokerage policies.
  • Multilingual content.

Rules:

  • What the agent can answer.
  • What it must hand off.
  • Compliance guardrails.
  • Tone and brand voice.

Testing:

  • Test buyer question.
  • Test seller question.
  • Test listing question.
  • Test language question.

Prototype 8: Content Studio​

Objective​

Make AI content creation a real workflow, not a chat box.

Layout​

Left:

  • Content type.
  • Templates.
  • Drafts.
  • Channels.

Center:

  • WYSIWYG editor.
  • Blocks.
  • Preview.

Right:

  • AI assistant.
  • Brand voice.
  • SEO/GEO/AEO checklist.
  • Compliance check.
  • Language versions.

Top Actions:

  • Generate.
  • Rewrite.
  • Translate/adapt.
  • Publish.
  • Schedule.
  • Export.

Prototype 9: QR Campaign Builder​

Objective​

Let a REALTOR create a tracked QR code in under two minutes.

Steps​

  1. Select campaign type.
  2. Connect listing/content/page.
  3. Choose landing page template.
  4. Choose lead capture fields.
  5. Choose language options.
  6. Generate QR code.
  7. Download print-ready assets.

Prototype 10: Website Template And Brand Kit​

Objective​

Make each REALTOR site feel distinct without requiring full custom design.

Layout​

Template Families:

  • Signature Agent.
  • Modern Team.
  • Local Authority.
  • Multilingual Community.
  • Brokerage Pro.
  • Luxury Editorial.

Brand Kit:

  • Logo.
  • Colour palette.
  • Font pairing.
  • Button style.
  • Header style.
  • Listing card style.
  • Chat/voice widget style.

Preview:

  • Desktop.
  • Tablet.
  • Mobile.
  • Home/listing/QR page previews.

First Static Prototype Recommendation​

Build the static frontend in this order:

  1. Public home page and listing detail page.
  2. QR sign landing page.
  3. Backend dashboard and lead drawer.
  4. Voice agent settings and chat knowledge screen.
  5. Content Studio.
  6. Template/brand kit screen.

The first prototype does not need live data. Use realistic sample content for:

  • A Canadian REALTOR team.
  • A listing.
  • English/French/Spanish/Punjabi/Urdu language preference examples.
  • Voice line options.
  • QR campaign examples.