Synthèse automatique
Fournit un système de conception complet et une vision produit pour construire une place de marché premium pour la photographie de mariage bilatérale.
Points forts
- Palette de couleurs claire avec des associations émotionnelles et luxueuses.
- Règles détaillées d'espacement, typographie et composants UI pour une sensation premium.
- Accent sur la confiance et la connexion émotionnelle via des vitrines de travaux réels et des témoignages.
Limites
- Manque de détails d'implémentation technique ou d'exemples de code.
- Références spécifiques au marché indien du mariage peuvent ne pas se généraliser.
- Ne couvre pas la réactivité mobile ou les directives d'accessibilité.
À utiliser lors de la conception d'une place de marché de services haut de gamme nécessitant une identité de marque luxueuse.
Éviter pour les places de marché économiques ou généralistes sans objectif premium.
Analyse de sécurité
SûrThe file is a purely descriptive design specification with no executable instructions, commands, or code. It poses no risk of destructive or exfiltrating actions.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Create a hero section for a premium wedding photography marketplace using the design system from the skill: full-screen cinematic image, headline 'Capture Forever. Book India’s Finest Wedding Photographers.', subheading about verified professionals, and two CTA buttons 'Find Photographer' and 'Join as Vendor' with a search box for city, wedding type, budget, date.Design a vendor card for the featured vendors section: include cover image, vendor profile, verified badge, location, ratings, style tags, and price range. Use the color palette with Champagne Gold for the verified badge and Dusty Rose for accents. Apply 20px border radius and soft shadows.Apply the premium color palette from the skill to the marketplace interface: Midnight Black #0F0F0F for navbar and hero background, Ivory White #F8F5F0 for page background, Champagne Gold #C8A96A for CTA buttons, Dusty Rose #D8B4A0 for subtle accents, Slate Gray #5F6368 for secondary text, and Forest Green #2F5D50 for success states.skill.md
Premium Wedding Photography Marketplace — Design System + Product Skills
Product Vision
Build a premium wedding photography marketplace that feels like:
- Apple-level premium UI
- Airbnb-level trust-driven booking
- Wedding-focused emotional luxury platform
This is NOT a normal marketplace. This is a memory-selling platform.
Users should feel: "This platform handles life’s most important memories."
Core Product Type
Two-Sided Marketplace
Side A — Customers
People looking for wedding photographers and videographers.
Side B — Vendors
Photographers, cinematographers, studios, freelancers.
Side C — Admin
Platform operations, approvals, fraud prevention.
Premium Color Palette (Scientific + Luxury)
Avoid startup colors. Avoid bright random UI colors. Avoid too much blue.
Use luxury emotional trust palette.
Primary Colors
Midnight Black
Hex: #0F0F0F
Use for:
- navbar
- hero background
- premium sections
- footer
Meaning: Luxury + cinematic + premium
Ivory White
Hex: #F8F5F0
Use for:
- page background
- content areas
- premium whitespace
Meaning: Softness + elegance + luxury
Champagne Gold
Hex: #C8A96A
Use for:
- CTA buttons
- premium highlights
- verified badge
- premium vendor tags
Meaning: Luxury + premium trust
Dusty Rose
Hex: #D8B4A0
Use for:
- subtle accents
- emotional warmth
- wedding softness
Meaning: Romantic + elegant
Slate Gray
Hex: #5F6368
Use for:
- secondary text
- labels
- helper content
Meaning: Balance + readability
Forest Green
Hex: #2F5D50
Use for:
- trust signals
- success states
- confirmation UI
Meaning: Trust + stability
Typography System
Primary Font
Preferred:
- SF Pro Display
Fallback:
- Inter
Never use:
- Poppins
- random decorative fonts
- hard bold fonts
Reason: Premium iOS-like clean feel
Spacing Rules
Luxury UI = whitespace
Use:
- large padding
- clean spacing
- breathing room
Avoid:
- crowded UI
- tight cards
- too much information above the fold
Rule: Less clutter = more premium
Radius Rules
Use: 18px to 24px border radius
For:
- cards
- buttons
- modals
- inputs
- portfolio previews
This creates iOS premium feel.
Shadow Rules
Use: Soft subtle shadows only
Avoid:
- hard borders
- heavy black shadows
- old-style box shadows
Goal: Luxury softness
Button Design
Primary CTA
Background: Champagne Gold
Examples:
- Book Now
- Find Photographer
- Become a Vendor
Secondary CTA
Use: Glass effect / transparent / outlined
Examples:
- Learn More
- View Portfolio
Home Screen (Landing Page)
This page sells trust.
Section 1 — Hero Section
Keep
Full-screen cinematic wedding image/video
Headline
Capture Forever. Book India’s Finest Wedding Photographers.
Subheading
Verified professionals. Luxury storytelling. Stress-free booking.
CTA Buttons
- Find Photographer
- Join as Vendor
Search Box
- city
- wedding type
- budget
- date
This must feel emotional + premium.
Section 2 — Featured Vendors
Show
Top photographers only
Each card includes:
- cover image
- vendor profile
- verified badge
- location
- ratings
- style tags
- price range
Card style: Netflix + Apple premium cards
Section 3 — Real Work Showcase
Must Include
Real delivered work
NOT stock photos
Use:
- masonry grid
- reels
- cinematic videos
- albums
Trust increases massively here.
Section 4 — Why Choose Us
Show:
- verified vendors
- transparent pricing
- secure payments
- real reviews
4 premium icon cards
Section 5 — Testimonials
Use:
- bride/groom reviews
- video testimonials
- premium carousel
Luxury trust section
Vendor vs Customer Separation
Never mix both journeys.
Very important.
Customer Side
Goal
Book best photographer
Features
- search vendors
- compare portfolios
- booking
- payment
- reviews
- saved vendors
- support
Dashboard:
- My Bookings
- Payments
- Reviews
- Saved Vendors
Vendor Side
Goal
Get leads + manage business
Features
- portfolio management
- services management
- availability calendar
- leads handling
- earnings dashboard
- reviews management
- analytics
Dashboard:
- Leads
- Confirmed Bookings
- Revenue
- Calendar
- Analytics
Premium Features Competitors Miss
These help win market share.
Availability Calendar
Do not force: “Call vendor”
Show: Available dates directly
Huge conversion booster.
Transparent Pricing
Show:
- Silver package
- Gold package
- Platinum package
Each with:
- deliverables
- edited photos
- teaser video
- cinematic film
- number of photographers
Users trust pricing transparency.
AI Vendor Matching
Recommend best vendors based on:
- city
- budget
- wedding type
- preferences
Very strong premium feature.
Instant Quote System
Input:
- date
- city
- budget
Output: Recommended vendors instantly
Mobile UX Rules
Most traffic will come from mobile.
Must be:
- thumb-friendly
- image-first
- fast
- sticky CTA buttons
- WhatsApp quick connect
Sticky actions:
- Book Now
- Call Vendor
Trust Signals
Must include:
- Verified Vendor Badge
- Premium Vendor Tag
- Secure Payment Badge
- Booking Count
- Cancellation Policy
- Real Reviews Only
- Featured Vendor Label
These improve conversions heavily.
Backend Stack Recommendation
- NestJS
- TypeScript
- PostgreSQL
- Redis
- AWS S3
- Razorpay
- Docker
- Swagger
- Prisma or TypeORM
Build stable. Not fast.
Final Rule
Do NOT build: A normal service marketplace
Build: A luxury wedding memory platform
This difference decides whether users trust you or ignore you.
Premium UX is not decoration. It is conversion strategy.
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/premium-wedding-photography-marketplace-design-system-mrx3xzlb/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/premium-wedding-photography-marketplace-design-system-mrx3xzlb' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/premium-wedding-photography-marketplace-design-system-mrx3xzlb/download' --output '.skill-downloads/premium-wedding-photography-marketplace-design-system-mrx3xzlb/SKILL.md.part' && mv '.skill-downloads/premium-wedding-photography-marketplace-design-system-mrx3xzlb/SKILL.md.part' '.skill-downloads/premium-wedding-photography-marketplace-design-system-mrx3xzlb/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Le fichier ne fournit pas un en-tête name/description exploitable pour cette procédure native. Le téléchargement reste disponible pour lecture ; utilisez le mode manuel ci-dessous.
Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/premium-wedding-photography-marketplace-design-system-mrx3xzlb/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.