What this prompt does
This prompt enforces the hardest discipline in UI design: knowing what to leave out. It codifies the specific anti-patterns that cheapen luxury brands — no pop-ups, no urgency timers, no star ratings, no sale-red banners — and builds the positive rules around them. The Industry Design Rules block acts as a constraint layer, so the AI generates within a defined aesthetic rather than defaulting to a generic Shopify template.
The template structures the output across seven distinct sections (hero, collection grid, product page, concierge, shopping bag, brand story, and framework code), which means you get a coherent design system rather than isolated component ideas. The [framework] variable is what makes the final output actionable: you specify React, Vue, Alpine.js, or plain HTML and receive working code for the editorial homepage — not a wireframe description, actual markup.
The typography and animation constraints are precise: Playfair Display or Cormorant for headings, 600ms+ fade-ins on scroll, cinematic hover zoom. These specifics stop the AI from picking generic choices and keep the result consistent with how real luxury brands approach their digital presence.
When to use it
- Building a bespoke e-commerce site for a watchmaker, jeweller, or haute couture brand that needs to look nothing like a default Shopify theme.
- Redesigning a mid-market brand that is repositioning upmarket and needs the visual vocabulary to match the new price point.
- Prototyping a client pitch where the client needs to feel the luxury positioning before a single line of production code is written.
- Generating the editorial homepage and collection grid as a starting scaffold that a frontend developer then refines, rather than starting from a blank Tailwind file.
- Creating a luxury gift or concierge service landing page where personal-shopping and handwritten-note features are the primary differentiator.
Example output
For brand_type: Swiss independent watchmaker, products: mechanical watches ($8,000–$40,000), brand_personality: precise, heritage, understated:
Hero:
- Full-bleed macro shot of a movement, no headline
- Brand wordmark at 40% opacity, bottom-left
- Scroll indicator: a single thin vertical line, 2s fade-in
Collection grid (asymmetric):
- 3-column CSS grid, col-span varies per row; 80vh image height
- Hover: product name fades in (600ms), price in Cormorant Garamond Light
- No "Add to Cart" on hover — click navigates to product page
Concierge panel:
- "Reserve a Private Viewing" (not "Book Now")
- Fields: preferred date, timezone, maison location
- An email address and response-time promise — no chatbot widget
Alpine.js snippet:
<section x-data="{ visible: false }" x-intersect.once="visible = true"
class="opacity-0 transition-opacity duration-700 delay-300"
:class="{ 'opacity-100': visible }">
Pro tips
[brand_personality]is the highest-leverage variable. "Understated British tailoring" and "avant-garde Parisian couture" produce radically different color moods and copy tone even with the same anti-patterns enforced. Three specific adjectives beat a full sentence.- For the
[framework]variable, ask for Alpine.js when you need zero build tooling — it drops into a Blade or Twig view without a separate JS pipeline, making it a natural fit for server-rendered stacks. - Run the prompt twice with different
[brand_personality]values and compare the brand story sections. The contrast reveals which personality reads as authentic for your client before you commit. - The concierge features section is the easiest to dilute. If you get generic output like "contact us for more info," add a follow-up: "Replace all concierge features with white-glove mechanics specific to
[products]." - Pair with a design token prompt after this one. Ask specifically: "Convert the palette, typography, and spacing from that luxury UI output into a Tailwind CSS theme extension object with named semantic tokens (brand-ink, brand-surface, brand-accent)." That bridges the design intent into a config file you wire directly into
tailwind.config.js.
