What this prompt does
This prompt has the AI act as a senior frontend engineer and UX designer building an order tracking page, returning working component code rather than a wireframe description. It defines an order timeline (placed, packed, shipped, out for delivery, delivered) with the current step highlighted and timestamps, a shipment map with a live ETA that degrades to a status banner, an items list with per-item return-by dates, a contact-support CTA, a post-delivery review CTA, and a responsive layout. The [carriers] placeholder sets supported shippers, and [map_provider] names the mapping service.
The structure works because order tracking is the page customers refresh the most, and a vague "in transit" message just generates support tickets. The prompt forces the fallback states to be designed, since tracking data is missing or stale far more often than demos suggest, so the map degrades gracefully and a "tracking not yet available" state is explicit. The [stack] variable produces the page plus timeline and map subcomponents as separate code blocks with mock order data, and [store_type] tunes the items and return logic. Anchoring the page on a clear timeline with timestamps answers the one question customers actually have, where is my order and when will it arrive, which is what turns an anxious refresh into a reassuring glance and keeps it from becoming a support ticket.
When to use it
- Building a customer-facing order tracking page
- Supporting multiple
[carriers]like UPS, FedEx, or DHL - Showing a live shipment route via a
[map_provider]such as Mapbox - You need graceful fallbacks when tracking data is missing or stale
- Adding per-item return-by dates for a given
[store_type] - Showing a review CTA only after delivery
Example output
You get the page component plus the timeline and map subcomponents as separate code blocks, with mock order data. The timeline shows placed through delivered with the current step highlighted and timestamps; the map shows the route and live ETA, degrading to a status banner when no tracking exists; the items list carries thumbnails, quantities, and return-by dates; and CTAs cover support and a post-delivery review. Loading, error, and tracking-not-yet-available states are included.
Pro tips
- List the
[carriers]you actually use so the tracking integration assumptions match your shippers - Set
[map_provider]to your real mapping service so the map subcomponent uses the right SDK - Get the fallback states right: ask the model to design the tracking-not-yet-available and degraded states first, since tracking is often stale
- Keep
[stack]accurate so the separate code blocks fit your framework - Tune
[store_type]so the return-by date logic matches your return policy - Request that the review CTA only render after delivery, so it never appears prematurely
