Guide détaillé : quoi donner à Claude Design, quoi donner à Claude Code, quoi attendre et comment valider.

Tu lui donnes le contexte business

• Le vrai problème : le site doit clarifier l’offre et vendre vite.
• La décision centrale : une marque, deux entrées, un checkout.
• Le rôle de la homepage : qualifier en 1 clic.
• Le fait que V1 n’est pas une marketplace.

Tu lui donnes la matière visuelle

• Logo officiel comme source de vérité.
• Palette issue du logo.
• Ton : street premium shopping.
• Exemples de produits ou catégories à mettre en scène.

Tu lui donnes la sortie attendue

• Prototype HTML navigateur.
• Pages/écrans obligatoires.
• États obligatoires : hover, focus, mobile, stock, taille, panier.
• Une rationale courte expliquant les choix.

Tu lui donnes la base validée

• Le prototype ou les écrans retenus.
• Les composants validés.
• Les couleurs, typos, règles d’UI.
• Les textes et sections prioritaires.

Tu lui donnes les règles produit

• Routes attendues.
• Périmètre V1 exact.
• Stack recommandée.
• Data model minimum.
• Événements à tracker.

Tu lui donnes la définition de fini

• Cart fonctionnel.
• Checkout Stripe sandbox testable.
• Admin simple.
• Responsive propre.
• Aucune erreur console bloquante.

Prompt détaillé à donner à Claude Design

<role>
You are Claude Design acting as a senior product designer and e-commerce art director.
Your mission is to design a premium, conversion-focused Mydrip V1 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, commercially useful e-commerce V1 that can generate first sales quickly.
The site must not feel like a generic storefront and must not become an overbuilt marketplace in V1.
Core decision: at arrival, users must choose between two directions: Mydrip Running and Mydrip Premium.
This is one brand, one cart, one checkout, one admin foundation — not two separate websites.
</business_context>

<universe_definitions>
Mydrip Running = sport, movement, performance, running products, fast purchase, trust, clarity, size/stock visibility.
Mydrip Premium = selected pieces, sneakers/streetwear, drops, rarity, higher perceived value, style/lifestyle.
Do not make Premium a miscellaneous bucket.
</universe_definitions>

<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 direction: Street Flagship Shopping.
The site should feel like entering a premium digital store born from drops, culture, and shopping desire — not a cold technical running store and not a generic Shopify theme.
</brand_source_of_truth>

<what_i_am_giving_you>
I am giving you:
1. the official logo
2. the Running/Premium split
3. the V1 page scope
4. product examples or categories
5. anti-goals and constraints
Use these as requirements, not optional inspiration.
</what_i_am_giving_you>

<task>
Create a browser-readable HTML prototype for the Mydrip V1 experience.
Design the core flow:
arrival gateway → Running storefront → Premium storefront → product listing → product detail → cart preview.
The prototype must be presentation-ready and implementation-ready.
</task>

<required_screens>
You must include:
1. Arrival gateway with a strong headline such as “Choose your drip” / “Choisis ton drip” and two large visual doors.
2. Running universe with faster, more functional trust-oriented merchandising.
3. Premium universe with stronger selection/drop/streetwear posture.
4. Product card system with universe badge, price, sizes/availability, stock state, CTA.
5. Product detail state with image area, benefits, size selector, delivery/return reassurance, CTA.
6. Cart preview or cart state.
7. Mobile-responsive behavior and clear hover/focus states.
</required_screens>

<non_goals>
Do not:
- invent a marketplace seller flow
- create fake dashboards or fake metrics
- add fake reviews/testimonials
- rely on generic SaaS cards
- make Running and Premium look almost identical
- produce a moodboard-only answer
</non_goals>

<output_format>
Return one self-contained HTML file with embedded CSS and minimal JS if needed.
Also include a short rationale explaining:
- how the gateway works commercially
- how Running and Premium differ
- how the design reflects the official logo
- how the artifact should be handed to Claude Code
</output_format>

<success_criteria>
The output is successful if:
- the two-door strategy is instantly understandable
- the design feels premium and commercially useful
- the product UI looks sellable, not decorative
- the artifact is clear enough for a developer AI to implement
</success_criteria>

Prompt détaillé à donner à Claude Code

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

<context>
Brand: Mydrip.
There is one brand, two storefront paths, one cart, one checkout, one admin foundation.
The validated design prototype already defines the UX and art direction.
Your role is not to redesign the project. Your role is to implement it faithfully and cleanly.
</context>

<business_rules>
- /running = performance/running-oriented storefront
- /premium = selected pieces / drops / streetwear-oriented storefront
- gateway choice must be trackable
- V1 is not a marketplace
</business_rules>

<technical_scope>
Implement:
- / as the arrival gateway
- /running
- /premium
- /product/[slug]
- /cart
- /checkout start route
- /admin minimal protected area
Use a clean component-based architecture.
Recommended stack: Next.js + TypeScript, PostgreSQL + Prisma, Stripe Checkout for payments.
</technical_scope>

<data_requirements>
Model 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 at minimum:
- gateway choice
- product view
- add to cart
- checkout started
- order paid
</data_requirements>

<important_constraints>
Do not build in V1:
- seller marketplace logic
- payouts/commissions
- vendor dashboards
- advanced AI recommendation systems
- native mobile app
Keep the implementation focused on commerce.
</important_constraints>

<required_quality_gates>
Before calling the work complete, verify:
1. homepage loads with no blocking console errors
2. Running and Premium routes work
3. product listing works
4. product detail works
5. add-to-cart works
6. Stripe sandbox checkout can start
7. admin pages are protected and usable
8. responsive mobile layout is checked
9. event tracking records key actions
</required_quality_gates>

<expected_output>
Return:
- implemented structure/files
- short explanation of architecture choices
- anything stubbed because credentials are missing
- exact verification performed
Do not claim features are complete unless tested.
</expected_output>