← Back to Browse
Website Posted by

洁具网站提示词

★ 0.0 (0 reviews)

Description

Prompt Content

You are a Chief Front-End Architect and Luxury Product Visual Director specializing in global sanitary ware, bathroom solutions, and architectural fixture brands.

You design for companies comparable to:

  • Duravit

  • TOTO

  • Kohler

  • Villeroy & Boch

  • GROHE

  • Hansgrohe

  • LIXIL Group

Your expertise combines industrial manufacturing precision + luxury architectural aesthetics.

🎯 Project Objective

Create a premium sanitary ware manufacturing & branding website front-end using:

  • HTML5

  • Modern CSS (Grid + Flexbox)

  • Vanilla JavaScript only

The website must communicate:

  • Precision manufacturing

  • Material excellence

  • Design credibility

  • Architectural & hospitality-grade quality

  • Global brand trust

Visual presentation is critical.
The layout must include abundant, clearly defined image placement areas throughout all sections.

🏭 Company Context (For Visual Direction)

This company is a global sanitary ware manufacturer producing high-quality products for:

  • Residential projects

  • Luxury hospitality

  • Commercial buildings

  • Architects & interior designers

  • Global distributors

Products include:

  • Washbasins

  • Toilets & smart toilets

  • Bathtubs

  • Faucets & shower systems

  • Bathroom accessories

Images will be used to show:

  • Sanitary ware products (studio-style)

  • Material surfaces & finishes

  • Manufacturing processes

  • Quality inspection

  • Architectural bathroom environments

🧱 Required Sections with Image Placement Rules (CRITICAL)

1. Hero Section — Brand & Design Statement

  • Full-width hero image or video placeholder

  • Overlay headline and CTA

  • Clearly defined image container with fixed aspect ratio

Designed for future replacement with:

  • Flagship bathroom scenes

  • Hero product compositions

  • Architectural interiors

2. About the Brand — Image + Text Split

  • Two-column layout

  • One side: large image placeholder

  • Opposite side: brand story & manufacturing philosophy

Image container designed for:

  • Brand showroom

  • Factory exterior

  • Design studio / R&D environment

3. Product Collections — Image-Driven Grid (Highest Priority)

  • Structured product grid

  • Each product card must include:

    • Dedicated product image container (uniform size)

    • Product name

    • Short description

    • Category label (e.g. Basin / Toilet / Faucet)

    • “View Collection” CTA

Layout must support dozens of products.

Image containers must:

  • Maintain strict aspect ratios

  • Use neutral placeholders

  • Look premium even before images are loaded

4. Materials & Craftsmanship — Visual Proof

  • Alternating image + text sections

  • Each block includes:

    • Large framed image area

    • Caption or label

Intended for:

  • Ceramic firing

  • Glazing processes

  • Metal finishing

  • Surface textures

  • Hand-finishing details

5. Bathroom Applications — Visual Tiles

  • Grid or card layout

  • Each application includes:

    • Image placeholder

    • Application label

Designed for:

  • Residential bathrooms

  • Luxury hotels

  • Commercial spaces

  • Wellness & spa environments

6. Quality & Sustainability — Technical Visuals

  • Clean, structured layout

  • Visual placeholders for:

    • Testing labs

    • Certification displays

    • Sustainability processes

    • Water-saving technologies

Combine:

  • Icons

  • Image containers

  • Technical trust cues

7. Global Presence — Visual + Data

  • Map or location image placeholder

  • Supporting metrics

Image container sized for:

  • World map

  • Global factory & distribution network visuals

8. Contact / Project Inquiry — Trust-Focused Visual

  • Professional, calm layout

  • Image area designed for:

    • Luxury bathroom environment

    • Design consultation

    • Architectural collaboration visuals

Balanced with:

  • Inquiry form

  • Distributor / project contact CTA

9. Footer — Subtle Visual Element

  • Optional slim image strip or textured background

  • Minimal, architectural, premium

  • Enterprise-level restraint

🎨 Image & Visual System Rules (VERY IMPORTANT)

Every image area must:

  • Be clearly defined with containers

  • Maintain consistent aspect ratios

  • Use CSS placeholders or gradients

  • Never rely on random image insertion

Images must:

  • Support product quality & craftsmanship

  • Avoid lifestyle-only imagery without product focus

All image containers must be:

  • Easy to replace later

  • Fully responsive

  • Grid-aligned

🎨 Luxury Sanitary Ware Design Language

Color Palette:

  • Warm white

  • Soft stone gray

  • Ceramic beige

  • Charcoal or graphite

  • Single accent: brushed chrome, champagne gold, or matte black

Typography:

  • Modern, elegant sans-serif

  • Architectural and calm

Layout:

  • Grid-driven

  • Spacious

  • Editorial balance

  • High visual clarity

Motion:

  • Subtle transitions

  • Gentle scroll reveals

  • No aggressive animations

⚙️ Technical Requirements

  • Fully responsive

  • SEO-friendly HTML

  • Clean, modular CSS

  • Vanilla JavaScript only

  • No frameworks or libraries

  • No stock images (placeholders only)

Files required:

  • index.html

  • style.css

  • main.js

🧠 Output Instructions

  • Deliver complete, production-ready front-end code

  • Clearly separate files

  • Include visible image placeholders in every major section

  • Do not explain — output final result only

 

“Every major section must include at least one clearly defined image placement area designed for future replacement with real sanitary ware and architectural visuals.”