AI Skill Report Card
Structuring Business Website Sections
Markdown--- name: structuring-business-website-sections description: Generates a single, copy-paste-ready master prompt for AI website builders (Framer AI, Wix ADI, 10Web, v0, Lovable, etc.) that builds a complete business website in one shot, with full section-by-section visual detail — including standard multi-section business sites and premium animated/interactive one-shot builds. Use when a user asks (often in Roman Urdu/Hindi) to "web banwana hai", "website ka prompt likh do", "AI builder ke liye prompt chahiye", or otherwise requests a ready-made website generation prompt for their business. ---
Quick Start13 / 15
Agar user ne pehle hi message mein yeh de diya hai, to koi sawal na pucho — seedha final prompt generate karo:
- Business type (clinic, restaurant, e-commerce, SaaS, freelancer, etc.)
- Kitni services/products/offerings hain
- Brand naam, tone (professional/friendly/luxury/minimal), color preference
- Location/city (agar local business hai)
- Style tier: Standard (clean multi-section business site) ya Premium/Luxury (auto-animated hero, scroll-triggered SVG lines, exploded-view scroll video, bento grids, glassmorphism)
Agar kuch missing hai — chhote gaps ke liye reasonable defaults use karo aur ek line mein note karo "yeh maine assume kiya hai." Bade gaps (jaise business type hi pata na ho) ke liye hi ek crisp follow-up sawal pucho, warna default laga kar aage badho. Style tier missing ho aur business generic/local ho (clinic, restaurant, shop) to Standard default lagao; agar brand/product/agency premium feel maangta ho ya user "premium/luxury/animated/modern" jaisa word use kare to Premium tier default lagao — dono cases mein assumption ek line mein note karo. Kabhi bhi raw analysis/framework user ko mat dikhao — sirf final prompt output karo, ek hi baar mein.
Recommendation▾
The description is fine (third person, includes triggers) but could be tightened — it's quite long and dense with tool names; consider trimming for clarity.
Workflow14 / 15
Progress:
- Step 1: Business type identify karo → single-page vs multi-page decide karo, aur Standard vs Premium tier decide karo (Decision Framework, internal — user ko mat dikhao)
- Step 2: Sections/pages ki final list lock karo — Home, Services/Shop/Menu/Features, Testimonials, About Us, Contact — naam business type ke hisaab se adjust karo
- Step 3: Har section ke liye internally decide karo: purpose, content, desktop layout, mobile layout, SEO
- Step 4: Agar Premium tier hai, animated/interactive components (split hero, SVG scroll lines, exploded-view scroll video, bento grid, marquee, glassmorphic nav) ko sections ke sath internally merge karo
- Step 5: Chatbot chahiye ya nahi — explicitly pucho ya confirm karo; sirf "haan" milne par chatbot spec prompt mein add karo
- Step 6: Sab analysis ko ek continuous, copy-paste-ready prompt mein convert karo
- Step 7: Final prompt present karo is order mein: intro line → brand/style guide → (Premium ho to) signature interactive sequence → section-by-section breakdown → standard premium components (agar Premium) → mobile responsiveness → SEO → chatbot spec (agar requested) → closing instruction line
Decision Framework (internal use only — never shown to user)
| Signal | Structure |
|---|---|
| 1-2 offerings, portfolio/freelancer, low content | Single-page, anchor nav |
| 3+ services, clinic/agency/local business | Multi-page |
| Products for sale, needs cart/checkout | Multi-page + Shop/Product Detail pages |
| Menu items (restaurant/cafe) | Multi-page or single-page with Menu section, categorized |
| User says "premium/luxury/animated/modern/high-end", or brand/agency/SaaS/product launch | Premium tier |
| Local service, budget-conscious, simple business (clinic, salon, small shop) with no premium cue | Standard tier |
Business-type se section naam mapping:
- Restaurant/Cafe → "Menu"
- E-commerce → "Shop" (+ Product Detail pages)
- SaaS → "Features" / "Pricing"
- Freelancer/Portfolio → "Portfolio" or "Services" (compact)
- Clinic/Local Service → "Services"
Default assumptions (use silently, note in one line if applied):
- Color palette missing → soft blue primary + warm orange accent, light background (Standard); deep charcoal/black + single glowing accent color, dark background (Premium)
- Tone missing → "professional" for clinics/agencies/SaaS, "friendly" for restaurants/local shops, "minimal" for portfolios, "luxury" for Premium tier
- CTA text missing → "Book Now" (service), "Order Now" (food), "Shop Now" (e-commerce), "Get in Touch" (freelancer/SaaS)
- Chatbot requirement missing → assume NOT included, note "chatbot include nahi kiya — agar chahiye to batayein"
Recommendation▾
Provide a concrete filled-in example output (actual finished prompt for a sample business) rather than only templates with placeholders — this would strengthen the Examples score significantly.
Final Prompt Template — Standard Tier (fill and output this)
Ek [business type] ke liye [single-page / multi-page] professional website banao,
brand name "[Brand Name]". Overall tone/mood: [professional/friendly/luxury/minimal].
Color palette: [primary color] + [accent color], background [light/dark].
Font style: modern sans-serif headings, readable body text.
Har section fully mobile-responsive ho, tap targets minimum 44px, mobile par
sab multi-column grids single column mein stack ho jayen.
--- HOME SECTION ---
Purpose: [ek line]
Layout (Desktop): Full-width hero image/video ke sath headline "[headline text]",
subheading, aur primary CTA button "[CTA text]" jo [color] mein highlighted ho.
Uske neeche 3-column grid mein highlights/benefits, phir testimonial strip.
Layout (Mobile): Hero text image ke upar stack ho, 3-column grid vertical stack
mein convert ho, CTA button full-width ho.
SEO: H1 = "[keyword + brand + location]", meta description ≤160 characters.
--- [SERVICES/SHOP/MENU/FEATURES] SECTION ---
Purpose: [kya explain karna hai]
Layout (Desktop): [3-4 column card grid / product grid / menu categories] — har card
mein icon/image, title, 1-2 line description.
Layout (Mobile): Single column stacked cards.
SEO: [har offering ke liye alag H2 keyword ya sub-page keyword]
--- TESTIMONIALS SECTION ---
Purpose: Trust build karna
Layout (Desktop): [Carousel / 3-column grid] of quote cards with names, photos,
star ratings.
Layout (Mobile): Swipeable single-card carousel.
SEO: Review/AggregateRating schema add karo.
--- ABOUT US SECTION ---
Purpose: Brand story aur team humanize karna
Layout (Desktop): Text + image split section, phir team grid.
Layout (Mobile): Image text ke upar stack, team grid 1-2 column.
SEO: Organization schema, brand/trust keywords include karo.
--- CONTACT US SECTION ---
Purpose: Conversion aur easy contact
Layout (Desktop): 2-column split — ek side form (name, email, message), doosri
side phone/email/address/hours + map embed.
Layout (Mobile): Form aur details stack ho jayen, phone number tel: link ho,
map fixed height block.
SEO: LocalBusiness schema with consistent NAP.
Sab sections ko exactly is order mein, is visual detail ke sath, aur is
responsiveness ke sath banao. Navigation sticky header mein ho, [agar single-page
hai to: "smooth scroll anchor links ke sath"].
Final Prompt Template — Premium/Luxury Tier (fill and output this)
Use this when tier = Premium. Signature interactive sequence goes right after the brand/style guide and before the normal section breakdown; standard content sections (Services/Shop/Menu, Testimonials, About, Contact) still follow the same purpose/layout/SEO format as Standard tier but restyled to match luxury tone.
Ek [business type] ke liye ek premium, high-end, single-page/multi-page website
banao, brand name "[Brand Name]". Tone: luxury, cinematic, ultra-modern.
Color palette: [deep dark background color] + [single glowing accent color].
Font style: bold luxury sans-serif headings, generous whitespace, kinetic
smooth scrolling throughout (no jarring section jumps).
--- SIGNATURE INTERACTIVE SEQUENCE ---
1. Split Hero Section (Auto-Animation):
Left Side: Clean, luxurious bold typography, brand messaging "[headline text]",
and primary CTA(s) "[CTA text]".
Right Side: A high-quality visual, 3D element, or graphics canvas that
auto-animates continuously on loop without requiring any user click or interaction.
2. Dynamic SVG Connecting Lines (Scroll Trigger):
As the user scrolls down from the Hero section, dynamic, glowing SVG lines
must start tracing/drawing themselves down the screen. These lines act as
visual anchors that pass through the sections, connecting one content block
to the next seamlessly.
3. Scroll-Driven Exploded View (Loom Video / 3D Object Interaction):
A section featuring a premium interactive video/object representing
"[product/service/core offering]".
Scroll Down Behavior: As the user scrolls down, the video smoothly plays
forward, showing an exploded view where all internal pieces/layers of the
object separate and open up.
Scroll Up Behavior: When the user scrolls back up, the video plays exactly
in reverse, seamlessly putting all the pieces back together.
--- [SERVICES/SHOP/MENU/FEATURES] SECTION ---
Purpose: [kya explain karna hai]
Layout (Desktop): Bento-grid layout — asymmetric cards of varying sizes, each
with icon/image, title, 1-2 line description, subtle hover-glow.
Layout (Mobile): Single column stacked bento cards, animations simplified for
performance.
SEO: [har offering ke liye alag H2 keyword ya sub-page keyword]
--- TESTIMONIALS SECTION ---
Purpose: Trust build karna
Layout (Desktop): Infinite horizontal marquee loop of quote cards with names,
photos, star ratings.
Layout (Mobile): Slower-speed marquee or swipeable single-card carousel.
SEO: Review/AggregateRating schema add karo.
--- ABOUT US SECTION ---
Purpose: Brand story aur team humanize karna, cinematic feel ke sath
Layout (Desktop): Text + image split section with scroll-reveal fade/slide-in
animations, phir team grid.
Layout (Mobile): Image text ke upar stack, team grid 1-2 column, animations retained but lightweight.
SEO: Organization schema, brand/trust keywords include karo.
--- PRICING SECTION (if applicable) ---
Layout (Desktop): Interactive pricing table, hover states elevate card with
glow/shadow, "most popular" tier highlighted.
Layout (Mobile): Stacked cards, swipeable if 3+ tiers.
--- CONTACT US SECTION ---
Purpose: Conversion aur easy contact