# WordPress.org Plugin Assets Design Prompt

Copy and paste this entire prompt into Claude or your preferred AI design tool:

---

## Design Brief: Post Formats for Block Themes WordPress Plugin

I need professional graphics for my WordPress.org plugin listing. Please create modern, clean designs that communicate the plugin's purpose clearly.

### Plugin Overview

**Name:** Post Formats for Block Themes

**Tagline:** Bring WordPress Post Formats to Block Themes

**Purpose:** This plugin brings the classic WordPress post formats feature (Standard, Aside, Status, Link, Gallery, Image, Quote, Video, Audio, Chat) to modern block themes. It includes:
- Visual format selection modal with cards for all 10 formats
- Automatic format detection based on content
- Format-specific block patterns
- Integrated Chat Log block for conversations
- Format repair tool
- Full Site Editor support

**Target Audience:** WordPress developers and site builders using block themes who want post format functionality

**Brand Personality:** Modern, professional, developer-friendly, accessible, clean

---

## Asset Requirements

### 1. Plugin Icon (icon-256x256.png)

**Dimensions:** 256×256px (must work well when scaled to 32×32px)

**Format:** PNG with transparent background

**Design Requirements:**
- Simple, bold, recognizable symbol
- Must be clear and readable at small sizes (32×32px)
- Represents "post formats" or "content types"
- Professional and modern aesthetic
- High contrast for visibility on light and dark backgrounds

**Design Concept Ideas:**
- Option A: Grid of 9 small format icons (quote bubble, image, video play, gallery grid, link chain, chat bubbles, microphone, etc.) arranged in 3×3 grid
- Option B: Stylized document icon with format symbols overlaying it
- Option C: Abstract representation of content blocks with different format indicators
- Option D: Single prominent icon that represents "formats" - like a document with tabs or sections

**Color Palette Suggestions:**
- Primary: WordPress blue (#0073AA or #2271B1)
- Accent: Complementary color (purple #7B68EE, teal #14B8A6, or orange #F97316)
- Use 2-3 colors maximum for clarity at small sizes

**Style Guidelines:**
- Clean, vector-style artwork
- Avoid fine details that won't scale down
- Ensure 10-15% padding from edges
- Should work on both white and colored backgrounds

---

### 2. Standard Banner (banner-772x250.png)

**Dimensions:** Exactly 772×250px

**Format:** PNG or JPG (under 1MB)

**Design Requirements:**
- Feature plugin name prominently: "Post Formats for Block Themes"
- Include tagline: "Bring WordPress Post Formats to Block Themes"
- Professional, modern WordPress aesthetic
- Clean layout with good visual hierarchy
- Readable text at actual size

**Design Concept:**
Create a banner that showcases the plugin's core feature: bringing 10 post formats to block themes.

**Layout Suggestions:**
- Left side: Plugin name and tagline
- Right side: Visual element showing the 10 post formats (icons grid or cards)
- Alternative: Centered text with format icons as background pattern or border

**Visual Elements to Include:**
- Post format icons: quote marks ("), image icon (🖼️), video play (▶️), gallery grid (⊞), link chain (🔗), chat bubbles (💬), microphone (🎙️), star (*), document (📄), aside arrow (→)
- Subtle WordPress block editor aesthetic (blocks, patterns)
- Modern gradient or solid color background

**Typography:**
- Plugin name: Bold, large, modern sans-serif (think Inter, Poppins, or similar)
- Tagline: Lighter weight, smaller, readable
- Ensure text contrast ratio meets accessibility standards

**Color Palette:**
- Background: Gradient or solid (WordPress blue to lighter blue, or modern purple/blue gradient)
- Text: White or very dark for contrast
- Accent colors for icons: Multi-color or monochrome with accent

**Style:**
- Clean, modern, professional
- Block theme aesthetic (geometric, structured)
- Avoid clutter - prioritize clarity
- WordPress admin color scheme friendly

---

### 3. Retina Banner (banner-1544x500.png)

**Dimensions:** Exactly 1544×500px (2× resolution)

**Format:** PNG or JPG (under 1MB)

**Design Requirements:**
- IDENTICAL design to banner-772x250.png
- Just scaled up to 2× resolution for retina/HiDPI displays
- Same layout, colors, typography, visual elements
- Ensure crisp rendering at higher resolution

---

## Design Specifications Summary

| Asset | Dimensions | Format | Background | Max Size |
|-------|-----------|--------|------------|----------|
| Icon | 256×256px | PNG | Transparent | 1MB |
| Banner | 772×250px | PNG/JPG | Opaque | 1MB |
| Banner 2x | 1544×500px | PNG/JPG | Opaque | 1MB |

---

## The 10 Post Formats (for reference)

When designing icons/visual elements, these are the formats to represent:

1. **Standard** - Default blog post (document icon)
2. **Aside** - Brief note or side comment (speech bubble or arrow)
3. **Status** - Twitter-style update (bird or status icon, 280 chars)
4. **Link** - Shared link (chain link icon)
5. **Gallery** - Image gallery (grid of photos)
6. **Image** - Single image post (picture frame)
7. **Quote** - Quotation (quotation marks "")
8. **Video** - Video content (play button ▶️)
9. **Audio** - Podcast or audio (microphone 🎙️ or sound waves)
10. **Chat** - Conversation transcript (chat bubbles 💬)

---

## Brand Colors (Optional Guidance)

**Primary Palette (WordPress-aligned):**
- WordPress Blue: #0073AA
- WordPress Admin Blue: #2271B1
- Dark Blue: #1E3A8A

**Accent Options:**
- Purple: #7B68EE or #8B5CF6 (creative, modern)
- Teal: #14B8A6 (fresh, accessible)
- Orange: #F97316 (energetic, attention-grabbing)
- Green: #10B981 (growth, positive)

**Neutrals:**
- White: #FFFFFF
- Light Gray: #F3F4F6
- Dark Gray: #1F2937
- Black: #000000

---

## Design Output Format

Please create:

1. **icon-256x256.png**
   - 256×256px PNG
   - Transparent background
   - Optimized for web
   - Test view at 32×32px to ensure clarity

2. **banner-772x250.png**
   - 772×250px PNG or JPG
   - Professional header banner
   - File size under 1MB

3. **banner-1544x500.png**
   - 1544×500px PNG or JPG
   - Identical to banner-772x250.png, just 2× scale
   - File size under 1MB

---

## Additional Context

**WordPress.org Environment:**
These assets will appear on the WordPress.org plugin directory:
- Icon shows in search results, plugin cards, admin screens
- Banner appears at top of plugin page
- Viewed by thousands of WordPress developers and site builders
- Professional appearance is critical for trust and downloads

**Reference:**
This plugin is for WordPress 6.8+, supports block themes (FSE), and includes modern features like the Site Editor, block patterns, and a custom Chat Log block.

**Competition:**
Look at successful WordPress plugins for inspiration, but ensure unique branding that represents "post formats" and "block themes" clearly.

---

## Design Guidelines

**DO:**
✅ Keep it simple and clear
✅ Use modern, professional aesthetics
✅ Ensure high contrast and readability
✅ Test icon at small sizes (32×32px)
✅ Use WordPress-friendly colors
✅ Make text readable and hierarchical
✅ Create visual interest without clutter
✅ Represent the plugin's purpose visually

**DON'T:**
❌ Use fine details that won't scale down
❌ Make text too small to read
❌ Use more than 3-4 colors
❌ Create busy, cluttered compositions
❌ Use generic stock imagery
❌ Ignore WordPress design conventions
❌ Exceed 1MB file size
❌ Use copyrighted fonts or icons

---

## Inspiration & References

**WordPress Design Language:**
- Clean, modern interface
- Block-based visual structure
- Blues and purples as primary colors
- Sans-serif typography (Inter, Poppins)
- Geometric, structured layouts

**Post Format Icons - Use Official WordPress Dashicons:**

**IMPORTANT:** Use these exact Dashicons from https://developer.wordpress.org/resource/dashicons/

Each format has an official Dashicon - use these ONLY:

1. **Quote** → `dashicons-format-quote` (quotation marks icon)
2. **Gallery** → `dashicons-format-gallery` (grid of squares icon)
3. **Video** → `dashicons-format-video` (play button with frame icon)
4. **Audio** → `dashicons-format-audio` (headphones/music note icon)
5. **Chat** → `dashicons-format-chat` (speech bubbles icon)
6. **Link** → `dashicons-admin-links` (chain link icon)
7. **Image** → `dashicons-format-image` (picture frame with mountain icon)
8. **Status** → `dashicons-format-status` (star icon)
9. **Aside** → `dashicons-format-aside` (quotation mark in box icon)
10. **Standard** → `dashicons-format-standard` (document/post icon)

**How to use Dashicons:**
- If using Figma: Install the "WordPress Icons" or "Dashicons" plugin
- If using design software: Download SVG from https://github.com/WordPress/dashicons
- If using AI tools: Reference the Dashicons page and describe the exact icon
- DO NOT create custom icons - use the official Dashicons as-is
- DO NOT use generic icons from other icon sets

---

Please generate all three assets following these specifications. Focus on clarity, professionalism, and communicating the plugin's purpose: bringing post formats to modern WordPress block themes.