12 Astro Prompts for Claude and ChatGPT (Copy and Paste)
Ready-to-use prompts for building an Astro site with AI: setup, pages, a blog, styling, fixing errors and deploying. Each one tells the AI what it needs to know.
In this guide
A good prompt gives the AI three things: your situation, one clear job, and permission to say when it’s unsure. These prompts do that. Replace the parts in square brackets, and use one at a time.
Want them generated for you? Our Astro prompt builder fills in your details.
Starting out
1. Set the scene (use this first, every session)
I'm a beginner building a website with Astro 7.4. I created the project with
"npm create astro@latest" and the basics template. Give me one step at a time
with full file contents. Use only current Astro APIs. If you're not sure
something is current, say so instead of guessing.2. Understand what I have
Explain the folder structure of my Astro project in plain English: what
src/pages, src/layouts, src/components and public are for, and what
astro.config.mjs does. Keep it short.Pages and layout
3. Add a page
Add a page at /[about] with a heading and two paragraphs of placeholder text,
using my existing layout. Show me the full file, and tell me which file to
edit to add it to the navigation.4. Make a shared layout
Create a layout component with a header, navigation, main area and footer,
and update my home page to use it. The layout should take a title prop and
set the page title and a meta description.Content
5. Add a blog
Add a blog using Astro content collections. Put the config at
src/content.config.ts, use the glob loader, and store posts as Markdown in
src/content/posts. Create a listing page at /blog and a page for each post.
Include one sample post.6. Write a post in my voice
Here are two paragraphs I wrote: [paste]. Write a 500-word blog post about
[topic] in the same tone, as a Markdown file with frontmatter for title,
description and date.Design
7. Add Tailwind
Add Tailwind CSS using the official "npx astro add tailwind" command, tell me
what the command changes, and then style my header with a dark background
and white links.8. Make it look professional without a framework
Using plain CSS in a global stylesheet, give my site a readable text column,
comfortable spacing, one accent colour, and a system font stack. Explain each
rule in one line.Fixing problems
9. Fix an error
I'm on Astro 7.4. When I run [npm run build] I get this error:
[paste the whole error]
Here's the file it mentions:
[paste the file]
Tell me what's wrong, show me the corrected file, and explain the fix.10. Review AI-written code
Review this Astro file for anything outdated or wrong for Astro 7:
[paste]. Check for old content-collection APIs, the old Tailwind integration,
ViewTransitions instead of ClientRouter, and unclosed HTML tags.Going live
11. Add the SEO basics
Add a canonical link, Open Graph tags and a sitemap to my Astro site. Use the
official sitemap integration. Show me the config change and the layout change.12. Deploy
Walk me through deploying my static Astro site to Cloudflare Workers with
Wrangler. List each command before I run it, and tell me what I should see
after each one.Tips that make every prompt better
- Paste errors exactly. Never retype them.
- Ask for one file at a time, and check your site between steps.
- When the AI gives you something you don’t understand, ask what it does before you use it.
- Connect your tool to the Astro docs so it checks instead of remembering.
Frequently asked questions
Why do the prompts mention the Astro version?
Because AI tools learned from older tutorials. Naming the version, and asking the AI to check the docs, is the single best way to avoid outdated code.
Do these work with Claude Code and Codex too?
Yes. They work in a chat, where you paste the code yourself, and in a coding agent, which makes the changes for you.
Stuck on a step?
Check the common errors guide, look up a word in the glossary, or ask in the official Astro Discord, where the support channels are friendly to beginners.