AI Skill Report Card

Structuring Business Website Sections

C+58·Sep 22, 2026·Source: Web

Structuring Business Website Sections — Full Prompt Generator

Jab user Roman Urdu/Hindi mein bole ke "web banwana hai" ya "AI builder ke liye prompt likh do", to seedha upar wale skill ka poora analysis internally chalao (Decision Framework → Section Template → Examples logic), lekin user ko wapas sirf ek hi final cheez do: ek single, copy-paste-ready master prompt jo kisi bhi AI website builder (Framer AI, Wix ADI, 10Web, v0, Lovable, etc.) mein paste karne se poori site ek hi baar mein ban jaye — page by page, visual detail ke sath.

Neeche wo exact process hai jo follow karni hai.

12 / 15

User se sirf itna maloom karo (agar already na diya ho):

  1. Business kis type ka hai (clinic, restaurant, e-commerce, SaaS, freelancer, etc.)
  2. Kitni services/products/offerings hain
  3. Brand ka naam, tone (professional / friendly / luxury / minimal), aur color preference (agar hai)
  4. Business location/city (agar local business hai)

Agar user ne yeh sab pehle hi message mein de diya hai — koi sawal nahi, seedha final prompt generate karo. Agar bilkul kuch nahi diya, to reasonable defaults use karo aur note kar do "yeh maine assume kiya hai."

Recommendation
Missing YAML frontmatter entirely (no 'name'/'description' fields) — this is a critical structural omission that tanks format compliance; add proper frontmatter with kebab-case gerund name and third-person description stating what it does and when to trigger it.
12 / 15

Progress:

  • Step 1: Business type identify karo, Decision Framework se single-page vs multi-page decide karo
  • Step 2: Sections/pages ki final list finalize karo (Home, Services/Shop/Menu/Features, Testimonials, About Us, Contact) — business type ke hisaab se naam adjust karo
  • Step 3: Har section ke liye Section Template use karke: purpose, content, desktop layout, mobile layout, SEO decide karo
  • Step 4: Yeh sab analysis ko ek hi continuous prompt mein convert karo — internal analysis ko user ko mat dikhao, sirf final prompt do
  • Step 5: Final prompt ko is format mein present karo:
    • Ek intro line jo bataye ke "yeh site is-tarah banayen"
    • Overall style/brand guide (colors, fonts, mood)
    • Page-by-page / section-by-section poora breakdown, visuals ke sath
    • Mobile responsiveness ka instruction
    • SEO instruction
    • End mein ek line: "Sab sections ko is exact order mein aur is detail ke sath banao"
Recommendation
The skill references an 'upar wale skill' (Decision Framework, Section Template) that isn't included in this document — it depends on external context not present here, making it incomplete/non-self-contained as a standalone skill file.
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 mein bataye kya show karna hai]
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"].
14 / 20

Example 1: Input: "Mujhe apni dental clinic ki website banwani hai, naam 'Smile Care Dental', Lahore mein" Output: Decision Framework apply hota hai → clinic = 5+ services → multi-page structure. Final prompt generate hota hai jisme Home ka CTA "Book Appointment" hai, Services section mein Cleanings/Whitening/Root Canals/Emergency Care cards hain (har ek sub-page keyword ke sath), Testimonials mein patient reviews + schema markup, About Us mein dentist ka intro, Contact Us mein click-to-call + map embed with LocalBusiness schema (Lahore location ke sath). Poora prompt upar wale template mein fill hoke user ko diya jata hai.

Example 2: Input: "Freelance graphic designer hu, simple portfolio site chahiye" Output: Single offering, low content → single-page structure. Final prompt mein Home hero mein tagline + featured work, Services compact cards (Branding/Web Design/Illustration), Testimonials 3-quote strip (carousel nahi), About Us text+image split, Contact Us simple form + social links (map nahi). Mobile mein anchor nav hamburger menu mein collapse hota hai. Yeh sab final prompt format mein likh ke diya jata hai.

Example 3: Input: "Skincare brand ka online store banana hai" Output: E-commerce → Services section replace hota hai Shop/Product Grid se, har product Product Detail page pe link karta hai. Testimonials product reviews + UGC photos section ban jate hain. Final prompt mein Product schema, "Add to Cart" sticky mobile bar, filterable shop grid — sab detail ke sath likha jata hai.

Recommendation
Content is written entirely in Roman Urdu/Hindi, which limits accessibility and evaluability against English-based best practices; consider bilingual or English core with localized triggers only.
  • Hamesha internally Decision Framework aur Section Template apply karo, lekin user ko final output mein sirf ek complete, ready-to-paste prompt do — beech ka analysis mat dikhao jab tak user khud na maange
  • Prompt itna detailed ho ke AI builder ko koi guess na karna pade — colors, layout, mobile behavior, CTA text sab specify karo
  • Business type ke hisaab se section names adjust karo (Shop, Menu, Features, Portfolio) — generic "Services" har jagah mat thoko
  • Agar user ne kam offerings bataye hain (1-2), single-page recommend karo aur prompt mein bhi single-page hi likho
  • Prompt ke end mein clear instruction do: "sab sections is exact order aur detail ke sath banao" — taake AI builder skip na kare
  • User ko beech ka raw analysis (table, framework) mat do — sirf final prompt chahiye, wo bhi ek hi baar mein
  • Prompt mein mobile responsiveness ka instruction bhool kar mat chhodo — har section ke liye alag se likhna zaroori hai
  • Generic "make me a website" type prompt mat do — har section ka layout, color, CTA text, SEO explicitly likhna hai
  • Agar business ka type unclear ho aur user ne bata diya ho, to sawal wapas mat pucho — reasonable default lagake seedha final prompt bana do
  • Single-page aur multi-page ka decision skip mat karo — yeh galat structure recommend karne ki sabse badi wajah hai
0
Grade C+AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
12/15
Workflow
12/15
Examples
14/20
Completeness
14/20
Format
6/15
Conciseness
10/15