Plan étape par étape pour créer un site moderne, propre et entièrement piloté par IA.

Objectif Pollenia

Livrer une V1 rentable puis vendre un abonnement de suivi : maintenance, produits, drops, reporting, automatisations.

Deux portes

“Choisis ton drip” avec Mydrip Running et Mydrip Premium.

Performance stylée

Produits sport, choix guidé, confiance, tailles, achat rapide.

Drops & sélection

Sneakers, streetwear, pièces choisies, rareté, valeur perçue.

Simple à gérer

Produits, stocks, commandes, notifications, reporting.

Page d’arrivée

Logo, phrase “Choisis ton drip”, deux portes larges, animation légère, mobile-first, CTA très visibles.

Catalogue

Filtres simples, prix visibles, tailles, stock, badges Running/Premium, tri par nouveautés et drops.

Fiche produit

Photos grandes, guide taille, bénéfices courts, livraison/retour, CTA achat, produits liés.

Panier/checkout

Friction minimale : panier clair, frais affichés, paiement sécurisé, confirmation propre.

Admin

Interface simple pour produits, stocks, commandes, statuts, alerts et reporting.

Nouvelle commande

Alerte Telegram avec univers Running/Premium, produit, taille, montant, statut paiement.

Stock bas

Notification automatique quand une taille ou un produit passe sous un seuil défini.

Relance panier

Email ou message selon univers choisi : performance/confiance côté Running, rareté/drop côté Premium.

Drop alert

Liste d’attente Premium pour prévenir au lancement d’une nouvelle sélection.

Reporting hebdo

Rapport simple : clics Running/Premium, ventes, paniers, produits vus, sources de trafic.

Contenu IA

Descriptions produits, titres, posts réseaux, emails de lancement, visuels promo à partir des produits.

Optimized English Prompt — Claude Design

<role>
You are Claude Design acting as a senior product designer and e-commerce art director. Your job is to create a premium, conversion-focused design prototype that can later be handed to an engineering AI without ambiguity.
</role>

<business_context>
Brand: Mydrip.
Real business problem: the client needs a modern, beautiful, clean e-commerce V1 that can generate first sales quickly without becoming an overbuilt marketplace.
Core decision: the arrival page must split users into two clear directions: Mydrip Running and Mydrip Premium.
Mydrip Running = sport, movement, performance, running products, fast purchase, functional trust.
Mydrip Premium = selected pieces, sneakers/streetwear, drops, rarity, higher perceived value, style/lifestyle.
This is one brand, one checkout, one admin foundation, and two merchandising paths — not two separate websites.
</business_context>

<brand_source_of_truth>
Use the official Mydrip logo as the visual source of truth: bold black/white lettering, pink-orange-yellow gradient, shopping bag symbol, grain/sticker texture, streetwear/social-shopping energy.
Recommended art direction: Street Flagship Shopping.
The site should feel like entering a premium digital store born from streetwear, drops, and social commerce — not a generic Shopify template and not a cold technical running store.
</brand_source_of_truth>

<task>
Create a complete, browser-readable HTML prototype for the Mydrip V1 experience.
Design the core flow: arrival gateway → Running universe → Premium universe → product listing → product detail → cart preview.
The prototype must be modern, clean, visually strong, mobile-first, and commercially useful for a fast client decision.
</task>

<screens_and_states>
Include:
1. Arrival gateway with the headline “Choose your drip” and two large visual doors: Mydrip Running and Mydrip Premium.
2. Running universe page/section: performance, speed, sizes, trust, quick purchase.
3. Premium universe page/section: selected pieces, drops, scarcity, style, higher perceived value.
4. Product card system with badges for Running/Premium, price, size availability, stock state.
5. Product detail state with images/placeholders, key benefits, size selector, delivery/return reassurance, CTA.
6. Cart preview state.
7. Mobile responsive behavior and clear focus/hover states.
</screens_and_states>

<design_constraints>
- Do not create generic SaaS cards or a generic Shopify-looking storefront.
- Do not use fake metrics, fake reviews, or filler dashboards.
- Do not overbuild marketplace features in V1.
- Do not make “Premium” a miscellaneous bucket; express it through selection, rarity, drops, style, and higher perceived value.
- Use the logo colors with discipline: black/white structure, orange for action, pink-orange-yellow gradient as brand signature.
- Prioritize clarity, conversion, trust, speed, and mobile usability.
</design_constraints>

<output_format>
Return one self-contained HTML file with embedded CSS and minimal JavaScript if needed.
Include a short design rationale at the top or bottom of the artifact explaining the core design decisions.
Use semantic HTML, responsive CSS, accessible hit targets, and no unnecessary external dependencies.
</output_format>

<success_criteria>
The prototype should make the client immediately understand the two-door Mydrip strategy.
It should look premium enough to present, simple enough to launch, and structured enough for Claude Code/Codex to implement.
</success_criteria>

Optimized English Prompt — Claude Code / Codex

<role>
You are a senior full-stack e-commerce engineer. Build a production-ready V1 from the validated Mydrip design prototype. Prioritize simple, reliable commerce over unnecessary complexity.
</role>

<goal>
Implement the Mydrip V1 website with one brand, two storefront paths, one cart, one checkout, one admin foundation, and event tracking for future automation.
The two storefront paths are:
- Mydrip Running: performance/running products.
- Mydrip Premium: selected sneakers/streetwear/drops.
</goal>

<recommended_stack>
Use Next.js + TypeScript for the frontend/application layer.
Use PostgreSQL + Prisma for products, variants, stock, orders, and event logs.
Use Stripe Checkout for V1 payments.
Use Telegram or email notifications for new orders and low-stock alerts if credentials are available.
</recommended_stack>

<routes>
Implement:
- / — arrival gateway with two large choices: Running and Premium.
- /running — Running storefront view.
- /premium — Premium storefront view.
- /product/[slug] — product detail page.
- /cart — cart page or cart drawer route.
- /checkout — checkout start route using Stripe Checkout.
- /admin — simple protected admin for products, stock, and orders.
</routes>

<data_model>
Include at minimum:
- Product: id, slug, name, description, universe, category, price, images, status.
- Variant: id, productId, size, color, stock.
- Order: id, status, total, customer contact, line items, stripe session/payment id.
- EventLog: id, type, payload, createdAt. Track gateway choice, product view, add to cart, checkout started, order paid.
</data_model>

<implementation_requirements>
- Keep V1 simple. Do not build marketplace sellers, payouts, vendor dashboards, loyalty programs, or advanced AI recommendations yet.
- Gateway choice must be trackable as Running or Premium.
- Product cards must support Running/Premium badges, stock state, price, and size availability.
- Checkout must be testable in Stripe sandbox.
- Admin must allow product/stock/order visibility at minimum.
- Use clean components and design tokens based on the validated prototype.
- Respect responsive behavior and accessibility basics.
</implementation_requirements>

<quality_gates>
Before considering the implementation complete, verify:
1. Homepage loads with no console errors.
2. Running and Premium routes work.
3. Product listing and product detail work.
4. A product can be added to cart.
5. Stripe sandbox checkout can be started.
6. Stripe webhook/order confirmation flow is tested or clearly stubbed if credentials are missing.
7. Admin pages are protected and usable.
8. Mobile layout is checked.
9. EventLog records key actions.
</quality_gates>

<success_criteria>
The delivered site is modern, clean, fast, mobile-first, and ready for client review. It must support a realistic V1 launch and leave room for later automations, drops, reporting, and marketplace expansion without building those features prematurely.
</success_criteria>