Document propre des étapes et des prompts à utiliser pour Mydrip.

Problème réel

Mydrip doit lancer une V1 e-commerce claire, moderne, premium et vendable rapidement sans tomber dans une marketplace trop complexe.

Décision centrale

À l’arrivée, l’utilisateur choisit entre Mydrip Running et Mydrip Premium. Une marque, deux entrées, un checkout.

Source de vérité

Le logo officiel Mydrip guide la DA : lettrage noir/blanc, gradient rose-orange-jaune, sac shopping, texture, énergie street-shopping.

Inputs à avoir

• Logo officiel Mydrip
• Définition Running
• Définition Premium
• Pages obligatoires V1
• Produits de départ

Validation design

• Direction choisie
• Page gateway validée
• Composants validés
• Mobile pris en compte

Validation code

• Routes confirmées
• Stack confirmée
• Paiement défini
• Tracking défini

Prompt à coller dans 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 Claude Code without ambiguity.
</role>

<business_context>
Brand: Mydrip.
Real business problem: the client needs a modern, visually strong, 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 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 to implement.
</success_criteria>

Prompt à coller dans Claude Code

<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>