Architecting AI Buildable Websites

Markdown
---
name: architecting-ai-buildable-websites
description: Generates complete website blueprints and copy-paste AI build master prompts from a topic or reference URL. Produces page structure, section-by-section content/animation/visual specs scaled to budget tier, an optional live-sync AI chatbot spec, and a final production-ready master prompt for AI code builders (v0, Bolt.new, Cursor). Use when a user wants a website planned and built via AI tools, wants a reference site reverse-engineered, or needs free tools/resources to build a site at zero cost.
---

Purpose: A chatbot that always reflects the current state of the business (services, pricing, offers, availability) without manual retraining — it reads from a single source of truth and answers customers in real time.

Architecture:

• Single Source of Truth: A structured business-data.json (or headless CMS / Notion / Google Sheet via API) containing: services list, pricing, hours, active offers, FAQs, contact policies.
• Sync Mechanism: Chatbot's system prompt/context is dynamically injected from this data source on every request (RAG-lite pattern) — no redeploy needed when data changes; edit the JSON/Sheet and the bot instantly "knows."
• Stack: Next.js API route → fetch latest data source → inject into system prompt → call LLM (OpenAI/Claude API) → stream response to a floating chat widget (Framer Motion entrance animation, bottom-right, matches site's dark/neon theme).
• Fallback Behavior: If a query falls outside known data, bot offers to connect to a human via the Contact form instead of hallucinating.
• Real-Time Guidance Role: Proactively suggests relevant service pages/CTAs mid-conversation (e.g., "Since you asked about X, here's our current price — want me to open the booking page?").

Update Rule: Whenever the user says "update the chatbot" with new info, regenerate/append to business-data.json only — never touch chatbot logic code.

### Stage 5 — Ultimate AI Build Master Prompt
Always the final output, formatted exactly as:

```markdown

[Copy everything below this line into your AI code builder like v0, Bolt.new, or Cursor]

"Act as an expert Full-Stack Developer and UI/UX Designer. Build a fully responsive, high-converting professional website based on the following specifications:

• Tech Stack: Next.js (App Router), Tailwind CSS, Lucide Icons, and Framer Motion for smooth animations.
• Design System: Modern minimalist aesthetic, high contrast, clean typography (Inter + Outfit), professional color palette (Dark mode default with neon/gradient accents) — [insert specific hex codes derived from Stage 1].
• Architecture & Pages:
  1. Home Page: [exact section list from Stage 3]
  2. Services Page: [exact section list]
  3. About Us Page: [exact section list]
  4. Contact Us Page: [exact section list, functional form with name/email/message + validation]
  5. [Niche Page]: [exact section list]
• Animation Rules: [Restate the budget-tier animation set from Stage 1, mapped to specific sections]
• [If chatbot triggered] Chatbot Integration: Add a floating chat widget synced to a business-data.json data source, using an API route that injects live data into the system prompt before every LLM call.
• Global Rules: Fully mobile responsive, SEO-optimized semantic HTML, accessibility-compliant (WCAG 2.1 AA), clean component-driven file architecture (/components, /app, /lib), smooth scroll behavior, and budget-appropriate scroll animations throughout."

### Stage 6 — Conditional: Free Resource Recommendations
**Trigger:** User asks about free platforms, free AI website builders, or free video/image assets.

**Rule:** Never return a static generic list. Tailor to the exact niche/topic discussed:
- Match **Free AI Web Builders** (that allow code export/download) to the site's complexity — e.g., simpler content sites vs. app-like dashboards need different tools.
- Match **Free stock video/image sources** to the *visual mood* already defined in the Visual Asset Prompts (e.g., minimalist dental clinic ≠ moody restaurant ≠ tech SaaS).
- Always give 3–5 tool names with a one-line reason each ("best for X because Y"), never an unexplained dump.
- If the niche has unusual asset needs (e.g., medical, legal, food), flag licensing/compliance caution.

• Never stall on missing info — state the assumed budget/tone and move forward.
• Every visual prompt must be production-grade specific (subject, lighting, angle, lens feel, mood, color grading) — never "add a nice photo here."
• Every animation must be justified by a UX purpose (draw attention to CTA, signal scroll progress, reinforce trust) — never decorative-only.
• Keep identical formatting across all sections/pages for clean AI-agent handoff.
• Only include the Chatbot Spec when the user has explicitly asked for it (respect the "agar mein kaho tab add krna" instruction).
• For free-resource questions, always personalize to the niche — zero generic lists.

• ❌ Asking "what's your budget?" before producing anything — always default and proceed.
• ❌ Vague visual prompts like "professional image of a business."
• ❌ Adding the chatbot spec unprompted — it's opt-in only.
• ❌ Giving a copy-pasted static tool list for free resources regardless of niche.
• ❌ Skipping the final Master Prompt block — it must always be the last output.
• ❌ Inconsistent section template formatting between pages.