VentureStudio Workshop — aidev.venturestudioindia.com

Build a real website
by prompting AI.

A prompt-first class: turn a folder of company assets into a fast, mobile-ready Astro website — built by an AI coding agent, reviewed by you, and deployed live on Vercel.

Start the 7 prompts Watch the intro View the slide deck

7
Copy-paste prompts: 6
Visual blueprints: 0
Manual scaffolding: 1
Live site on Vercel

You will not learn to hand-scaffold a website. You will learn to brief, supervise, test, and iterate with an AI agent until a real site is live.

1 Compile Gather your company assets into one clean folder.
2 Prompt Brief the AI agent step by step — understand, design, plan, build.
3 Review Run the site locally, screenshot issues, iterate with the agent.
4 Deploy Push to GitHub, deploy on Vercel, connect a domain, go live.

No manual scaffolding lesson — the AI agent runs the setup and build steps.
You learn prompting and review, not framework syntax.
Every prompt produces a reviewable output you approve before moving on.
The final site goes live on Vercel with a custom domain.

Watch first

One afternoon, one live build.

The class was taught as a single end-to-end build: a real yoga brand turned into a live Astro site — assets to deployment, mistakes and recoveries included. Watch the intro, then follow the seven prompts below at your own pace.

The session is being edited into short, per-module clips. Each module below will play its own clip as they are published.

Clip coming soon

Before you start

The human work comes first.

The AI handles the technical steps. Your job before class is lightweight: install a few tools, create accounts, and compile your company assets into one clean folder.

Required

Node.js Runs the local dev server and the Astro toolchain.
Git Version control for your project.
Homebrew Package installer — macOS only.
GitHub account Hosts your repository and connects to Vercel.
Vercel account Free hosting + custom domain. Your deploy target.
Razorpay or PayPal Only if you need to take payments.

Nice to have

Gemini Pro / Claude / ChatGPT A paid AI subscription avoids hitting free token limits mid-build.
Claude Code or Antigravity An agentic IDE that runs commands for you.
VS Code A reliable backup editor.
Domain provider GoDaddy or similar, if you want a custom domain.
Resend Free email API for contact / inquiry forms.
Prepared assets folder Do the human work before class starts.

The AI is interchangeable — use whatever you already pay for:

Claude Claude Code Anthropic

Gemini Antigravity Google

ChatGPT Codex OpenAI

Prepare your asset folder

Collect everything the AI will turn into your site:

Pictures: logo, team, product, service, hero shots
Videos and YouTube links
PPTX, pitch decks, PDFs
Google Business Profile details
Airbnb, TripAdvisor, booking listings
Instagram, YouTube, LinkedIn, WhatsApp
Booking, Razorpay, PayPal links

Suggested structure

company-assets/
  content/
    about.md
    services.md
    team.md
    locations.md
    faq.md
  images/
  videos/
  docs/
  listings/
  design/
  inspiration/
  links.md

Already have a website?

If you already have a multi-page site, you do not build the knowledge base by hand. You point the AI at your existing site and have it scrape everything into a structured folder for you.

Scrape an existing site

Here's my website: [URL]

I want to create a structured knowledge base so I can easily rebuild the site. Set up scrapers and pull everything: all text content, images, videos, links, icons, social handles, and visual assets. Organize it into a clean folder of Markdown files plus an images/ and assets/ folder.

Do not build anything yet — just structure the knowledge base.

The blueprint

Six diagrams that make the whole workflow click.

Before the prompts, understand how the pieces fit. These are the hand-made legends from the class — your map of how assets, the AI, Astro, GitHub and Vercel connect. Click any diagram to read it full-size.

The 7 prompts

Build the site, one prompt at a time.

Do not jump straight to "build a website." Make the AI understand, design, and plan first — then build, review, and deploy. Each prompt produces a reviewable output you approve before moving to the next.

01
Prompt 1
Analyze the business
Point the AI at your asset folder and have it read everything, then write a knowledge base. Do not let it build yet — first make sure it understands who you are, what you offer, and what is missing.

Clip coming soon
Copy-paste prompt
```
We are creating a website for [COMPANY].

Use the provided company-assets folder. The site will be built with Astro and deployed on Vercel through GitHub.

GitHub username: [ ]
GitHub email: [ ]
Repo URL: [ ]

Do not build yet. Analyze all assets and create knowledge-base.md with: identity, offerings, audience, tone, locations, CTAs, booking/payment links, social links, and missing content questions.
```
Review & approve
- knowledge-base.md is created and accurate
- You answered its missing-content questions (or told it to use placeholders)
- Assumptions are explicit and approved
- Audience and calls-to-action are clear
From the session

If you only have a handful of assets, you do not need a full knowledge base — a short questionnaire is enough. The KB matters when you have a lot of existing content. Expect the AI to ask you clarifying questions; answer them or tell it to use placeholders.
02
Prompt 2
Create the design system
Turn your brand assets and inspiration screenshots into written design rules. This file becomes the single source of truth the AI references for everything it builds next.

Clip coming soon
Copy-paste prompt
```
Using knowledge-base.md and the design/inspiration assets, create design.md.

Include colors, typography, spacing, buttons, cards, icons, shapes, image treatment, hero layout, section style, mega menu direction, footer style, animations, accessibility, and mobile rules.

Make the design premium, fast, and practical for an Astro static website.
```
Review & approve
- design.md is created
- Mobile padding rules are defined
- Section style and navigation direction are set
- Accessibility basics are covered
From the session

design.md is a piece of knowledge the AI re-reads for every new task, which keeps the build consistent and cuts token usage later. As you learn what each term means, go back and edit the file to match your taste.
03
Prompt 3
Create the build plan
Make the AI write the plan before it writes any code. A plan keeps the agent on track and gives you a checklist to approve — pages, components, integrations, and the exact files it will touch.

Clip coming soon
Copy-paste prompt
```
Create implementation-plan.md for the Astro website.

Use knowledge-base.md and design.md. Plan pages, routes, content structure, components, mega menu, footer, SEO metadata, Open Graph, sitemap, robots.txt, analytics, booking/payment links, and optional Resend forms.

Do not code yet. List the files you will create or edit.
```
Review & approve
- implementation-plan.md is created
- Page and component list looks right
- SEO / social plan is included
- Integration plan is included
- The list of files to be created is clear
From the session

Some agents keep their plan in a temporary, invisible 'brain'. Copy it into a permanent implementation-plan.md so you keep it. Add your own notes in the file, then tell the agent to re-read it and update the plan before building.
04
Prompt 4
Build the website
Now the agent can scaffold the project, install dependencies, and write the site from your content. You supervise — review the changes it proposes and watch it run commands in its own terminal.

Clip coming soon
Copy-paste prompt
```
Proceed with the implementation plan.

Create the Astro project, add required dependencies, set up folders, and build the site from the assets and Markdown content.

Include responsive pages, mega menu, footer, social links, CTAs, booking links, and optional payment links. Prioritize small-screen mobile layout, including Samsung S23 FE.

After coding, explain how to run locally.
```
Review & approve
- The AI runs the setup commands itself
- Local preview opens (npm install, then npm run dev)
- Core pages exist
- Mobile layout works
- You reviewed changes rather than blindly accepting
From the session

Scaffolding just means the agent runs terminal commands to create Astro's foundational files. Keep a human in the loop. Back up your asset folder first — in the live session the agent overwrote the images while setting up its temporary folder, and they had to be restored.
05
Prompt 5
Review and fix locally
Open the local site, click every link, and check desktop and mobile. Feed specific issues and screenshots back to the agent so its fixes are targeted, not sweeping.

Clip coming soon
Copy-paste prompt
```
I reviewed the local site. Please fix these issues only:

[PASTE SCREENSHOTS OR NOTES]

Also audit mobile spacing, header/mega menu, images, broken links, CTAs, accessibility, and visual consistency with design.md.

Make targeted fixes and summarize what changed.
```
Review & approve
- Checked on both desktop and mobile
- Clicked every link
- Used screenshots as evidence
- Repeated the fix loop until it was ready
From the session

When you are starting out, make one change at a time so you can see what each prompt does. Use Chrome DevTools (right-click → Inspect → device toolbar) to check mobile. Do not cram many tasks into one prompt — it makes mistakes harder to catch.
06
Prompt 6
SEO, Open Graph & integrations
Add the launch essentials without overbuilding: titles, meta, Open Graph, sitemap, robots. Wire booking, WhatsApp, or payments only if you actually need them.

Clip coming soon
Copy-paste prompt
```
Add launch essentials.

Set up SEO titles, meta descriptions, canonical placeholder, Open Graph tags, Twitter cards, favicon, sitemap.xml, robots.txt, and structured metadata where relevant.

Add booking, WhatsApp, Razorpay, PayPal, or Resend only if relevant. Keep the site static-first and document any environment variables.
```
Review & approve
- SEO basics are added
- OG image is ready (about 1200 × 630)
- Booking / payment links are tested
- .env.example is created if you used any keys
- No unnecessary complexity was added
From the session

Open Graph is the preview image, title, and description that appear when your link is shared on WhatsApp, LinkedIn, or anywhere else. Keep the site static-first — only reach for Resend or payment gateways when the business actually needs them.
07
Prompt 7
Deploy and finalize
Push to GitHub, connect Vercel, point your domain, and verify analytics and Search Console. The agent guides each step and helps fix any build errors.

Clip coming soon
Copy-paste prompt
```
Prepare for launch.

Commit and push to main. Help me connect the GitHub repo to Vercel and fix build errors.

Then guide custom domain setup for [DOMAIN PROVIDER], update canonical and Open Graph URLs, add GA4 Measurement ID [G-XXXX], verify Search Console, submit sitemap, and run final production checks.
```
Review & approve
- Vercel live URL works
- Custom domain + SSL are active
- GA4 real-time is verified
- Search Console is verified
- Sitemap is submitted
From the session

Vercel hosts the static site for free; connect a domain with a DNS A record + CNAME and it auto-issues SSL. Register the site in Google Search Console and submit your sitemap so Google indexes you, then confirm a live visit shows up in GA4 real-time.

What you walk away with

Everything you should have by the end.

Company asset folder
Markdown content files
knowledge-base.md
design.md
implementation-plan.md
Working Astro site
Mobile-responsive design
Mega menu and CTAs
SEO + Open Graph
Optional booking / payment links
GitHub repo
Vercel deployment
Custom domain connected
GA4 set up
Search Console set up

After launch: share the site naturally, ask real users for feedback, publish useful updates, and keep an eye on GA4 and Search Console.

Resources

Every tool, one click away.

The accounts and tools used in the class. Everything here has a free tier that is enough to build and launch your first site.

Astro The web framework Vercel Hosting + deploys GitHub Code repository Node.js Local toolchain Homebrew macOS packages Claude Code Agentic IDE Resend Email for forms Search Console Google indexing Google Analytics Traffic + GA4

Next session

Now go build yours.

Work through the seven prompts with your own asset folder. If you get stuck, screenshot the problem and ask your AI to walk you through the fix — that is the whole skill. Questions, or want to join the next live session? Reach out.

Email the team Download the slide deck Connect on LinkedIn

Build a real website by prompting AI.

One afternoon, one live build.

The human work comes first.

Required

Nice to have

Prepare your asset folder

Six diagrams that make the whole workflow click.

Build the site, one prompt at a time.

Analyze the business

Create the design system

Create the build plan

Build the website

Review and fix locally

SEO, Open Graph & integrations

Deploy and finalize

Everything you should have by the end.

Every tool, one click away.

Now go build yours.

Build a real website
by prompting AI.