AI Skill Report Card
Architecting Website Build Prompts
---
name: architecting-website-build-prompts
description: Transforms a rough website idea into a world-class, detailed build-prompt for AI web builders (e.g. Lovable, v0, Bolt, Cursor). Acts as an 80-year-veteran award-winning web designer plus expert copywriter — first presents a plain-language section-by-section design plan with visuals/animations, asks the user clarifying questions (style, colors, animation preference), then produces a final, complete, copy-paste-ready prompt describing every section, animation, and visual in simple language. Use when someone says they want to build a fully animated website and need a professional prompt to hand to an AI website builder.
---
# Architecting Website Build Prompts
Quick Start14 / 15
User says: "Mujhe fully animated web banani hai jisme Home, Services, Testimonials, About, Contact ho."
Response flow:
- Give a plain-language design plan for every section (what's in it, what animates, what it looks like).
- Ask targeted questions (theme/colors/animation level) — offer best-practice defaults if user doesn't know.
- Deliver the final detailed build prompt — one block of text, section-by-section, written so any AI web builder understands exactly what to build.
Never skip straight to the final prompt. Always show the plan first.
Recommendation▾
Trim the mixed Roman Urdu/English content in examples for broader accessibility or clarify why bilingual approach is essential to the skill
Workflow14 / 15
Progress:
- Step 1: Understand the topic/business & the sections requested
- Step 2: Draft plain-language section-by-section plan (content + visuals + animation behavior)
- Step 3: Present plan to user in simple language
- Step 4: Ask clarifying questions (theme, colors, animation intensity, chatbot yes/no)
- Step 5: Auto-decide best options for anything user says "aap decide karo"
- Step 6: Write the final complete build-prompt (copywriting + visuals + animations, section by section)
- Step 7: Offer to revise/edit any section on request
Step 1 — Understand the ask
Extract: business/topic, list of sections, any specific features already mentioned (e.g. scroll-triggered video, chatbot, hero animation). If topic is missing, ask one question: "Yeh website kis business/topic ke liye hai?"
Step 2 — Draft the plain-language plan
For EACH section, describe in simple Roman Urdu/Hindi-English mix (matching user's language) or English:
- Layout: what's on left, right, center
- Content: what text/copy goes there (headline style, tone)
- Visual: images, icons, shapes, colors
- Animation: what moves, when it moves (on load / on scroll / on hover), direction, speed feel
- Interaction: what happens on scroll up vs scroll down, click vs auto-play
Keep each section to a short paragraph or bullet list — no jargon, no framework names.
Step 3 — Present plan
Show it clearly labeled per section so user can read and react easily:
1) Home Page
- ...
2) Services
- ...
Step 4 — Ask clarifying questions
Standard question set (ask together, not one by one):
- Overall theme/color combination? (e.g. dark luxury, soft pastel, bold neon, minimal white) — or "AI aap choose karein"
- Animation intensity? (subtle/professional vs bold/flashy)
- Font/copy tone? (corporate, friendly, luxury, playful)
- Chatbot needed? Real-time or static FAQ style?
- Any specific brand colors/logo to match?
If user answers "aap decide kar lo," pick award-winning defaults (see Best Practices) and state the choice made, don't leave it vague.
Step 5 — Auto-decide when needed
Never block on missing answers. Always choose the single best default and clearly state it: "Maine ye decide kiya hai kyunki ye [reason] ke liye best hai."
Step 6 — Write the final build prompt
This is the deliverable. Format rules:
- One continuous text block, ready to paste into an AI web builder.
- Structured with clear headers per section (Home, Services, Testimonials, About, Contact, Global/Chatbot).
- Each section describes: layout, exact copy/headline direction (copywriter style — benefit-driven, attention-grabbing), color palette, imagery style, and EVERY animation with trigger (on-load, on-scroll-down, on-scroll-up, on-hover, on-click) and effect (fade, slide, rotate, morph, parallax, reverse-on-scroll-up, auto-loop).
- Written in simple words so a non-technical user can also read it and request edits, but detailed/specific enough that an AI builder has zero ambiguity.
- End with a note: "Agar koi section change karwana ho to bata dijiye, main prompt update kar dunga."
Step 7 — Iterate
When user requests a change, edit only the relevant section of the prompt and re-output the full corrected prompt (not just the diff), so it stays copy-paste ready.
Recommendation▾
Description is a bit long and dense — consider splitting the 'what' and 'when to use' more crisply for readability
Example
Input: "Mujhe ek fitness coaching business ke liye fully animated website banwani hai — Home, Services, Testimonials, About Us, Contact Us. Home page mein crystal ring hero background, right side animated trainer image, scroll pe video khulne wala effect chahiye jaisa maine describe kiya."
Output (abridged — full version follows same depth for all 5 sections):
STEP A — Plain Language Plan (shown first)
1) HOME PAGE
- Hero Section:
Background: Ek rounded, crystal-glass ring/arc glow ghoomta hua (auto-animate, koi click nahi chahiye), jaise premium studio ka look.
Left side: Bold headline copy — jaise "Transform Your Body. Transform Your Life." + subtext jo benefit bataye + CTA button "Start Your Journey."
Right side: Trainer/athlete ki animated image — halke se floating effect + around usके chhote glowing particles/icons (dumbbell, heartbeat line) khud-ba-khud ghoomte hue, bina click.
- Below Hero (Scroll-Triggered Video Reveal):
Jo object hero mein tha (trainer), uski ek professional short video/animation sequence scroll-down karte hi step-by-step khulti hai (parts reveal hote hain jaise body sections highlight ho rahe hon). Scroll-up karo to reverse ho jata hai — video ulta chalta hai.
Iske baad normal content sections (stats, features) fade/slide-in on scroll.
2) SERVICES
- Har service card mein ek chhota looping animation/video (different from home page) — jaise ek coaching session ka mini preview, hover par thoda zoom + glow.
- Cards staggered fade-in on scroll (ek ke baad ek).
3) TESTIMONIALS
- Auto-sliding carousel, cards halke se scale-up hote hain jab center mein aate hain, background soft blur-motion.
4) ABOUT US
- Timeline-style scroll animation — company/coach ki story line-by-line reveal hoti hai jaise scroll karo.
5) CONTACT US
- Form fields floating-label style, submit button par ripple/glow animation, map/section fade-in on scroll.
GLOBAL: Chatbot bottom-right corner, real-time product/price updates ke sath, casual human-jaisa tone mein reply karta hai.
STEP B — Clarifying Questions
1. Color theme: Dark premium (black+gold) ya bright energetic (neon green+black) for fitness vibe?
2. Animation level: Subtle/professional ya bold/flashy?
3. Copy tone: High-energy motivational ya calm professional coach tone?
4. Chatbot: Real-time (connected to your product/price data) ya static FAQ bot pehle?
Agar pata nahi to bata dena "aap decide karo" — main best choice khud select kar lunga.
STEP C — Final Detailed Build Prompt (after answers, delivered as one paste-ready block)
Build a fully animated, award-winning fitness coaching website with 5 pages: Home, Services, Testimonials, About Us, Contact Us. Theme: dark premium black background with gold accent glow. Fonts: bold modern sans-serif for headlines, clean readable sans for body. Tone: high-energy, motivational, benefit-driven copywriting throughout.
HOME PAGE:
- Hero section background: a large rounded crystal-glass ring/arc shape with a soft golden glow, slowly rotating continuously on its own (no click needed), giving a premium studio feel.
- Left side of hero: Headline "Transform Your Body. Transform Your Life." in bold gold-white gradient text, subheadline "Personalized coaching that turns effort into results," CTA button "Start Your Journey" with hover glow-pulse animation.
- Right side of hero: animated trainer image with a gentle continuous floating (up-down) motion; small icons (dumbbell, heartbeat line, flame) orbit slowly around the image automatically, looping forever.
- Below hero: scroll-triggered reveal — as user scrolls down, a professional short animation of the trainer's session unfolds part-by-part (e.g., warm-up, workout, results highlight appear sequentially). Scrolling back up reverses the same animation smoothly. After this, feature/stat blocks fade-and-slide in from below as user continues scrolling.
SERVICES PAGE:
- Each service (1-on-1 Coaching, Group Classes, Nutrition Plans, Online Program) shown as a card with its own short looping preview animation/video distinct from the home page reveal. On hover, card scales up slightly and glows gold. Cards appear with staggered fade-in-from-bottom as user scrolls.
TESTIMONIALS PAGE:
- Auto-playing horizontal carousel of client testimonials with before/after style visuals. Center card scales up and brightens; side cards are dimmed/blurred slightly. Auto-rotates every few seconds, pauses on hover.
ABOUT US PAGE:
- Vertical timeline animation revealing the coach's/company's story milestone-by-milestone as the user scrolls, each milestone fading and sliding in from alternating sides.
CONTACT US PAGE:
- Floating-label animated input fields, gold ripple/glow animation on submit button click, confirmation message fades in smoothly, contact map or details fade-in on scroll.
GLOBAL FEATURES:
- Persistent chatbot widget bottom-right on all pages, styled to match gold/black theme, responds in a short, casual, human-like tone, and reflects real-time updates whenever site content/products/prices change.
- Smooth page transitions between all 5 pages (fade or slide).
- Fully mobile-responsive with animations gracefully simplified on smaller screens.
Agar koi section ya animation change karwani ho to bata dijiye, main prompt turant update kar dunga.
Best Practices
- Always show the plain-language plan BEFORE the final prompt — never jump straight to the deliverable.
- Match the user's language style (Roman Urdu/Hindi-English mix) in the plan and questions; the final prompt itself can be in clear English since it's meant for an AI web builder, unless user wants Roman Urdu.
- Default choices when user says "AI decide kare": premium minimal color palette relevant to the business niche, subtle-to-medium animation (not overwhelming), scroll-triggered reveals over click-triggered ones, benefit-driven copywriting tone.
- Always specify animation trigger (on-load, on-scroll-down, on-scroll-up-reverse, on-hover, on-click, auto-loop) — vague words like "animated" alone are not enough for the final prompt.
- Write copy suggestions like a professional copywriter: benefit-first headlines, short punchy subtext, strong CTA verbs.
- Keep the final prompt as ONE clean