Skip to main content

Home Services Marketplace Interface Designer

Design a home services marketplace UI with provider discovery, booking flows, job tracking, and a trust-first review system.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt

                                

What this prompt does

This prompt generates a complete home services marketplace interface spec, covering every screen from service selection through post-job review. What makes it work is the embedded trust logic: the template explicitly bans hiding provider faces, skipping verification indicators, and burying background check status — the exact anti-patterns that kill conversion in this vertical because homeowners are literally deciding who enters their home.

The flow enforces the industry's natural decision sequence (service → location → matching → book → track → review) rather than letting the AI invent a generic e-commerce pattern. The provider listing component alone specifies six trust signals: photo, rating, review count, experience, verified badge, and availability — which forces the output to be field-complete rather than wireframe-vague.

The [framework] variable means you get working code (React components, Blade templates, Vue composables — whatever you specify) for the two highest-effort pieces: provider listing cards and the booking form. That's the split that saves the most time when scaffolding a real project.

When to use it

  • Building an MVP for a local handyman, cleaning, or plumbing marketplace and need a complete UI scaffold fast.
  • Pitching a white-label home services product to a client — use the output as a high-fidelity prototype brief.
  • Designing the provider onboarding flow and need the full context of how their profile surfaces to customers.
  • Adding home services as a new vertical to an existing gig-economy platform.
  • Running a design sprint where you need all seven screens roughed out before day two.
  • Auditing an existing marketplace against best practices — the anti-patterns list serves as a checklist.

Example output

For [service_types] = plumbing, electrical, HVAC, [business_model] = lead-gen with instant booking, [target_market] = urban homeowners 30-55, [framework] = React + Tailwind:

Provider Card Component:
- Avatar (required, cannot be placeholder)
- "Background Checked" badge — green shield icon, visible above the fold
- StarRating: 4.8 (312 reviews) — bold 18px
- "Licensed & Insured" pill — gray-100 background
- Next available: "Today 2pm – 5pm"
- CTA: "Get a Quote" (primary) | "View Profile" (ghost)

Booking Form fields:
- Job description (textarea, 20 char min)
- Photo upload (up to 5 images, inline preview)
- Budget range slider ($50–$500+)
- Preferred date/time (date picker + morning/afternoon/evening chips)
- Address with auto-detect toggle

Pro tips

  • Set [business_model] precisely — "lead-gen" vs "instant booking" vs "subscription" changes which screens the AI prioritizes. Instant booking gets scheduling front-and-center; lead-gen surfaces quote comparison instead.
  • The "before/after project photos" instruction in the template only fires well if you name real services in [service_types] — vague entries like "home improvement" produce generic portfolio layouts.
  • Pair the tracking screen output with a follow-up prompt asking for the WebSocket event schema — the template generates the UI but not the real-time data contract underneath it.
  • For regulated trades (electrical, HVAC, plumbing), describe license verification requirements directly in your [business_model] text — for example, "lead-gen with license number display, expiry date, and state-board verification link." The more specific your prose, the more the credential section expands in the output.
  • The review system output defaults to a simple star + text pattern. If you need photo-required reviews or dispute resolution, add that to [target_market] context — the AI reads it as a constraint, not a suggestion.

Frequently Asked Questions

Will this prompt generate actual working code or just a design spec?
Both, split by purpose. The prompt generates a full UI spec for all seven screens (service selection through review), then produces working code specifically for the provider listing cards and booking form — in whatever framework you put in [framework]. The spec sections are detailed enough to hand to a designer; the code sections are meant to drop into a real project.
How do I adapt this for a single-service business (e.g., only cleaning) versus a multi-service marketplace?
Set [service_types] to a single value like 'residential cleaning' and the service selection screen collapses — the AI skips the services grid and goes straight to job details. The provider matching and booking screens stay intact. For a single-service business, also set [business_model] to reflect that (e.g., 'direct booking, no lead-gen') so the quote comparison step doesn't appear when it's unnecessary.
The template mentions 'verified badge' and 'background check indicators' — does the prompt generate the verification flow itself?
No. The template generates the display layer — where and how verification status appears in the UI — not the backend verification workflow. You get the badge placement, the copy states (verified / pending / unverified), and the UI logic for surfacing it to customers. The actual identity check or license validation integration is a separate technical prompt or implementation task.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Services & Booking UI Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

Claude Code Expert · Online

👋

Hey there!

Quick Actions

WhatsApp Instant reply

Chat on WhatsApp

+880 1723 741224 · Instant reply

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

[email protected]

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support