AI Prompt for a Personal Blog

Create a website for a personal blog from this AI prompt template.

You can enter the following prompt into a Large Language Model (LLM) such as ChatGPT, Claude, or Gemini to create a personal blog type website. The prompt is quite specific, which helps nudge the AI to a result that's likely what you're looking for. Feel free to tweak it as you please.

The Prompt:

Generate a complete HTML template for a personal blog with a minimalist and content-focused design. The typography should be excellent and highly readable.

Page Structure (for a single article page):

  1. Header: A minimal header containing only the blog's title (e.g., "The Thinker's Journal") and a simple navigation menu with links like "Home," "About," and "Archive."
  2. Article Header: Inside the main content area, a header for the article itself, containing the article title (<h1>), author's name, publication date, and estimated reading time.
  3. Article Body: A single, centered column with a comfortable line width for reading. Use placeholder text for paragraphs, blockquotes, code snippets, and an image with a caption. Ensure typography is well-handled (e.g., font-size, line-height).
  4. Article Footer: A section at the end of the article for social sharing buttons (placeholder icons) and tags.
  5. Author Bio: A small section below the article with the author's photo, name, and a short bio.
  6. Footer: A simple, unobtrusive footer with a copyright notice.

Core Requirements:

  • Technology: Single HTML file with CSS in a <style> tag.
  • Accessibility: WCAG 2.1 AA compliant. Pay close attention to typographic contrast and scale. Semantic tags like <article>, <aside>, and <time> should be used.
  • Responsiveness: The layout must be perfectly responsive. The main content column's width should be fluid but have a max-width for readability on large screens.
  • Best Practices: The CSS should define a clear and readable typography system using a serif font for body text and a sans-serif font for headings. Use CSS variables for fonts, sizes, and colors. The code should be exceptionally clean and well-commented.

The Result

When I ran the above prompt against Google Gemini Pro 2.5, I got the following result:

Screenshot of personal blog AI prompt result

How to Use The Prompt

  1. Copy the entire prompt text.
  2. Paste it into your preferred LLM (e.g., ChatGPT, Claude, Gemini, etc).
  3. Review the generated code. You can ask the LLM for modifications, like changing colors or fonts, by replying with follow-up instructions.

The prompt includes a Core Requirements section that instructs the LLM to focus on quality, accessibility, and responsive design, ensuring you get a professional-grade starting point.

Be sure to check the prompt carefully for anything you want to change first. You can also use it as a template starter for future projects.