Copy this prompt and paste it into ChatGPT or Claude
Create a blog archive/listing page:
1. PAGE HEADER
- Page title: "Blog" or "All Articles"
- Post count: "128 articles"
- Search bar
2. FILTER OPTIONS
Categories:
- All (default)
- Technology
- Design
- Tutorials
- Opinion
- News
Tags (if separate from categories):
- Popular tags as clickable pills
Sort by:
- Latest (default)
- Oldest
- Most Popular
- Most Commented
3. POST LIST LAYOUT
Option A - List view:
- Featured image left
- Content right
- Title, excerpt, meta
Option B - Grid view:
- Cards in 2-3 columns
- Image top, content bottom
Option C - Mixed:
- Featured post large
- Rest in grid
4. POST CARD ELEMENTS
- Featured image
- Category badge
- Title (linked)
- Excerpt (2-3 lines)
- Author avatar and name
- Date
- Read time
- Tags (optional)
5. PAGINATION
Option A - Numbered:
- Previous, 1, 2, 3, ..., 10, Next
- Current page highlighted
Option B - Load more:
- "Load More Posts" button
- Shows loading state
Option C - Infinite scroll:
- Auto-loads on scroll
- "Back to top" button
6. SIDEBAR (optional)
- Search
- Categories list
- Popular posts
- Tags cloud
- Newsletter signup
- About widget
- Social follow
7. EMPTY STATE
When no posts match filter:
- "No articles found"
- "Try a different category"
- Suggested posts
8. CATEGORY/TAG ARCHIVE
When viewing specific category:
- Category name as title
- Category description
- Post count
- Filtered posts
Design: Scannable, easy to browse. Good use of whitespace. Quick access to posts.How to use this prompt
- 1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
- 2 Open ChatGPT, Claude, or your preferred AI assistant
- 3 Paste the prompt and customize any placeholder text (like product names or brand colors)
- 4 Let the AI generate your website code or design specifications
More Blog Prompts
About this Blog Prompt
This Blog Archive Page prompt is designed to help you quickly create professional blog websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.
Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building blog archive page. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.
Compatible AI Tools
- ChatGPT (GPT-4) - Great for detailed code generation and explanations
- Claude 3 - Excellent for complex, nuanced website designs
- v0 by Vercel - Perfect for React and Next.js components
- Cursor - Ideal for AI-powered coding in your IDE
- Bolt.new - Quick prototyping and full-stack apps
- Lovable - User-friendly AI website builder
Tags
Archive Listing Browse Blog AI Prompt Free Template Website Builder Web Design Copy Paste Prompt