Astro + React Islands — Content + SaaS
Hybrid Astro site: marketing pages in MDX, app in React islands, blazing Lighthouse scores.
AstroMDXReact
Mega Prompt — Copy & Paste into AI
You are a world-class senior engineer with 20+ years of production experience. You have shipped systems used by millions of users worldwide. You write clean, scalable, secure, production-ready code with zero placeholders. You build sites that score 100/100 on Lighthouse without breaking DX. Build a COMPLETE Astro 5 site with React islands. Interview me first: 1. Site name and primary goal (conversion, SEO, content hub) 2. Marketing sections needed (hero, features, pricing, testimonials, FAQ, footer) 3. Blog or docs in MDX? 4. Interactive app surface? (dashboard, calculator, comments, etc.) 5. CMS? (file-based, Sanity, Storyblok, Contentlayer) 6. Auth needed for the app surface? 7. i18n? (which locales, default, fallback) 8. Image strategy? (Astro Image, Cloudinary) 9. Analytics? (Plausible, Vercel Analytics, GA4) 10. Deploy target? (Vercel, Netlify, Cloudflare Pages) STACK: Astro 5, React 19 islands for interactive bits, Tailwind v4, MDX with shiki for code, View Transitions API, Astro Image, sitemap + RSS, partytown for analytics. AFTER MY ANSWERS: A. Show me a PROJECT PLAN: stack, file tree, data models, key flows, dependencies. B. Ask: "Does this look correct? Anything to add or change?" C. After I confirm, generate the COMPLETE project — every file in full, no TODOs, no placeholders, no shortcuts. Include configs, env examples, README, and run instructions. D. Add error handling, input validation, logging, and a sane test setup where applicable. E. Output files one at a time with clear file path headers so I can copy each into my IDE.
How to use this prompt
Copy the prompt above → open ChatGPT, Claude, Gemini, Copilot or DeepSeek → paste → the AI will interview you about your project, then build complete production-ready code.
Works with:
ChatGPT-5
Claude 4.5
Gemini 2.5 Pro
Copilot
DeepSeek V3
Mistral
About this Web Development Prompt
The Astro + React Islands — Content + SaaS is a battle-tested mega prompt designed for the React stack. Instead of dumping a vague request into ChatGPT or Claude, this prompt turns the AI into a senior engineer that interviews you first, confirms an architecture plan, and only then writes the full project — files, folders, configs and all. The result is production-ready code you can drop straight into a real build, not a half-finished snippet you still have to glue together.
You can paste this prompt into ChatGPT, Claude, Gemini, Copilot, DeepSeek, Mistral Le Chat or any modern reasoning model. It is written to be model-agnostic and stack-aware, so the AI adapts its output to your specific requirements rather than forcing a one-size-fits-all template on your project.
What you'll get
- Astro
- MDX
- React
How to Use the Astro + React Islands — Content + SaaS
- Copy the full prompt from the box above using the "Copy Prompt" button. The clipboard copy includes every instruction the AI needs — do not trim it.
- Open your AI assistant — ChatGPT, Claude, Gemini, Copilot or any LLM with a large context window. Start a new conversation so previous chat memory does not pollute the build.
- Paste the prompt and hit send. The AI will ask you a structured set of discovery questions about your React project — features, screens, auth, payments, design style and target users.
- Answer in plain English. You do not need to know technical jargon. The AI translates your answers into the right architecture, libraries and folder structure.
- Confirm the plan. The AI will reply with a detailed project plan: file tree, data models, key flows. Approve it or ask for changes before code generation starts.
- Receive complete code. Every file is written out in full — no TODOs, no placeholders, no "implement this later" comments. Drop it into your IDE and run.
Why this Prompt Outperforms a Plain Request
Most developers write prompts like "build me a web development app" and get back generic, half-broken boilerplate. The Astro + React Islands — Content + SaaS works better for three concrete reasons:
- Role priming — the AI is told to act as a senior engineer with 20+ years of production experience in React, raising its quality baseline.
- Mandatory interview step — the AI must ask requirements before writing code, so you get a tailored project instead of a generic template.
- Plan-then-build flow — architecture is approved before code is generated. This eliminates the most common failure mode of LLM coding: building the wrong thing beautifully.
- Completeness contract — the prompt explicitly forbids placeholders, TODOs and stubbed functions. Every file you receive is meant to compile and run.
Frequently Asked Questions
Is the Astro + React Islands — Content + SaaS free to use?
Yes. Every prompt on AI Prompts Lib is 100% free, no signup or paywall. Copy it, paste into your AI of choice, and start building. We do not log your inputs or your generated code.
Which AI models work best with this prompt?
This prompt is tuned for any modern large-context model: Claude 4 / 4.5 Sonnet, ChatGPT-5 / GPT-4 Turbo, Gemini 2.5 Pro, DeepSeek V3 and Copilot Chat. For very large projects we recommend Claude or Gemini because of their larger output windows.
Can I modify the prompt for my own use case?
Absolutely. Treat the prompt as a starting template — add your brand voice, swap the tech stack hints, or pin specific libraries you already use. The interview + plan + build structure is the magic, not the exact wording.
What if the AI's output has bugs?
Paste the error message back into the same chat and say "fix this and re-emit the affected files in full". Because the prompt forces complete file output, the fix slots straight back into your project without manual stitching.