Copia este prompt y pégalo en ChatGPT o 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. Cómo usar este prompt
- 1 Copia el prompt de arriba
- 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
- 3 La IA generará el código del sitio web por ti
- 4 Personaliza e itera según tus necesidades
Más Prompts de Blog
Personal Finance Blog Homepage
A clean personal finance blog homepage with featured articles, budget calculator widget, category pillars, and email signup for money tips
Finance Blog Homepage
Author Page
Author profile with bio and post list
Author Profile
Blog Post Page
Article page with content, author info, and related posts
Article Post
Acerca de este Prompt de Blog
Este prompt Blog Archive Page está diseñado para ayudarte a crear rápidamente sitios web profesionales de blog usando herramientas de IA como ChatGPT, Claude, v0 de Vercel, Cursor y Bolt.new.
Ya seas desarrollador, diseñador o emprendedor, este prompt de IA gratuito te da una ventaja al crear blog archive page. Simplemente copia el prompt, pégalo en tu asistente de código IA favorito y personalízalo para tu marca.
Herramientas de IA Compatibles
- ChatGPT (GPT-4) - Excelente para generación detallada de código y explicaciones
- Claude 3 - Excelente para diseños web complejos y matizados
- v0 de Vercel - Perfecto para componentes React y Next.js
- Cursor - Ideal para codificación potenciada por IA en tu IDE
- Bolt.new - Prototipado rápido y apps full-stack
- Lovable - Constructor de sitios web IA fácil de usar
Etiquetas
Archive Listing Browse Blog Prompt de IA Plantilla Gratis Constructor Web Diseño Web Prompt Copiar Pegar