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
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