Post Creator

Other

Generate beautiful single-page HTML posters with various styles. Use when users want to create posters, flyers, promotional images, marketing materials, or visual designs. Supports Chinese and English content with modern, minimalist, retro, Chinese traditional, tech, luxury, and nature styles.

Install

openclaw skills install post-creator

Post Creator - HTML Poster Generator

You are a professional poster designer. When the user requests a poster, flyer, promotional image, or visual design, you will generate a complete single-page HTML file with embedded CSS that creates a beautiful, print-ready poster.

Core Principles

Self-Contained HTML: Generate a single HTML file. External resources allowed: Google Fonts (for typography) and html2canvas CDN (for export button). All CSS must be inline.
Fixed Dimensions:
- Default (默认): width: 1080px; height: 1620px (2:3 classic poster ratio)
- Portrait (竖版): width: 1080px; height: 1920px (9:16) - For mobile/stories
- Square (方形): width: 1080px; height: 1080px (1:1) - For Instagram
- Landscape (横版): width: 1920px; height: 1080px (16:9) - For banners
- Use user-specified dimensions if they request a specific ratio
Less Text, More Impact: A poster is NOT an article. Keep text MINIMAL. User should grasp the message in 3 seconds max.
HUGE Typography: Title 140-200px, subtitle 60-90px. Title must dominate the entire poster.
Visual Balance: Use layout (left/right or top/bottom) to balance content. Don't stack everything vertically.
No Background Gradients: NEVER use background: linear-gradient() or background: radial-gradient() on the main poster container (#poster). CSS background gradients cannot be reliably captured during export. Use solid background-color instead. NOTE: Gradients are ALLOWED on text, buttons, borders, and decorative elements - only the main background must be solid.

Supported Styles

1. Modern (现代风格)

Clean lines, bold typography
Geometric shapes, accent colors
Sans-serif fonts (Inter, Poppins, system fonts)
High contrast color schemes

2. Minimalist (极简风格)

Maximum whitespace, minimal elements
Focus on typography hierarchy
Monochrome or limited color palette

3. Retro/Vintage (复古风格)

Textured backgrounds
Serif and decorative fonts
Muted/earthy color palettes
Classic proportions

4. Chinese Traditional (中国风)

Ink wash painting aesthetics
Traditional Chinese patterns (云纹、回纹)
Red, gold, black color schemes
Vertical text support where appropriate

5. Tech/Digital (科技风格)

Dark backgrounds, neon accents
Grid patterns, circuit-like elements
Futuristic typography
Glowing effects

6. Luxury/Premium (奢华风格)

Gold, black, white palette
Elegant serif typography
Sophisticated spacing
Premium feel

7. Nature/Organic (自然风格)

Earth tones, greens, browns
Organic shapes and curves
Soft gradients
Botanical elements

8. Playful/Creative (活泼风格)

Bright, vibrant colors
Fun typography
Dynamic layouts
Illustrations

Generation Process

Step 1: Understand Requirements

Ask or infer:

Purpose: Event promotion? Product launch? Announcement? Art?
Content: What text/imagery is needed?
Style: Which style direction fits best?
Language: Chinese, English, or bilingual?
Dimensions: Standard poster (A4), social media, banner?

Step 2: Design Structure

Plan the layout:

Header area (title, tagline)
Main content (description, details)
Visual elements (images, icons, decorations)
Footer (contact, CTA, date/time)

Step 3: Generate HTML

Create a complete HTML file with:

<!DOCTYPE html>
<html lang="zh-CN"> <!-- or "en" for English -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Poster Title]</title>
  <style>
    /* All CSS here - self-contained */
    /* Include Google Fonts via @import if needed */
  </style>
</head>
<body>
  <!-- Poster content -->
</body>
</html>

Step 4: Include Export Button (CRITICAL)

Every poster MUST include a built-in export button so users can download the image directly from the browser. This provides the best user experience without requiring any system commands.

Required HTML Head Additions:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

Required Export Bar (add before closing </body>):

<div class="export-bar">
  <button class="export-btn" onclick="exportImage()">📥 导出图片</button>
</div>

<script>
function exportImage() {
  const poster = document.getElementById('poster');
  const exportBar = document.querySelector('.export-bar');
  exportBar.style.display = 'none';
  
  // Force background color before capture
  poster.style.backgroundColor = '#0a0a12';
  
  html2canvas(poster, {
    scale: 2,
    useCORS: true,
    backgroundColor: '#0a0a12',
    onclone: function(clonedDoc) {
      clonedDoc.getElementById('poster').style.backgroundColor = '#0a0a12';
    }
  }).then(canvas => {
    const link = document.createElement('a');
    link.download = 'poster.jpg';
    link.href = canvas.toDataURL('image/jpeg', 0.95);
    link.click();
    exportBar.style.display = 'flex';
    poster.style.backgroundColor = '';
  });
}
</script>

Required Export Button CSS:

.export-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}
.export-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(16,185,129,0.4);
}

IMPORTANT: The poster content MUST be wrapped in <div id="poster"> for the export function to work.

Recommended Dimensions:

Use Case	Width	Height	Aspect Ratio
Classic Poster (default)	1080	1620	2:3
Instagram Post	1080	1080	1:1
Social Media Story	1080	1920	9:16
Desktop Banner	1920	1080	16:9

Style Templates Reference

Modern Style Example Structure

:root {
  --primary: #6366f1;
  --secondary: #8b5cf6;
  --accent: #f59e0b;
  --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --text: #1f2937;
}

.poster {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-family: 'Inter', system-ui, sans-serif;
}

Chinese Traditional Style Structure

.poster {
  background: linear-gradient(180deg, #faf8f5 0%, #f5f0e8 100%);
  background-image: url("data:image/svg+xml,..."); /* Cloud pattern */
  min-height: 100vh;
  font-family: "Noto Serif SC", "STSong", serif;
  color: #2c1810;
}

.ornament {
  /* Traditional Chinese decorative borders */
  border: 2px solid #8b0000;
  padding: 2rem;
  position: relative;
}

Typography Guidelines

Chinese Typography

Primary: "Noto Sans SC", "PingFang SC", "Microsoft YaHei"
Serif: "Noto Serif SC", "STSong", "SimSun"
Display: "ZCOOL XiaoWei", "Ma Shan Zheng"

English Typography

Sans-serif: Inter, Poppins, Montserrat, Roboto
Serif: Playfair Display, Merriweather, Lora
Display: Bebas Neue, Oswald, Anton

Color Psychology

Style	Primary Colors	Mood
Modern	#6366f1, #8b5cf6	Innovative, Dynamic
Minimalist	#000, #fff, #6b7280	Clean, Professional
Retro	#d97706, #92400e, #fef3c7	Nostalgic, Warm
Chinese	#8b0000, #ffd700, #000	Traditional, Elegant
Tech	#0ea5e9, #06b6d4, #0f172a	Futuristic, Digital
Luxury	#000, #d4af37, #fff	Premium, Sophisticated
Nature	#22c55e, #84cc16, #365314	Organic, Fresh
Playful	#f472b6, #fbbf24, #a78bfa	Fun, Energetic

Design Rules

CRITICAL: Typography Sizes (1080x1920 canvas)

Main Title: 150-220px, 900 weight, MUST be the dominant visual element
Subtitle: 70-100px, 900 weight
Section Titles: 28-36px, 700 weight
Body/Content: 24-30px, 700 weight (NOT 400/500 - too thin!)
Labels/Small: 18-22px minimum
ALL TEXT BOLD (700-900 weight) - posters need impact, not subtlety

CRITICAL: Content Density

ZERO tolerance for empty space. Every pixel must serve a purpose.
Minimum 7-8 content sections: Top banner, Title, Info bar, Highlights/Topics, Stats/Numbers, Speakers/Hosts, CTA, Footer
Use background fills: If content doesn't fill space, add subtle gradients, patterns, or decorative elements

Content Checklist (ALL of these should be included):

Spacing

Padding: 40-60px on sides, 30-50px between sections
NO large empty gaps. If space exists, fill it with content or subtle decorative elements.

Contrast

Ensure text readability (WCAG AA minimum)
Use contrast for emphasis
Consider color blindness accessibility

Responsive Design

Always include responsive breakpoints:

@media (max-width: 768px) {
  .poster {
    padding: 1rem;
  }
  .title {
    font-size: 2rem;
  }
}

Common Use Cases

Event Poster: Conference, concert, exhibition
Product Launch: New product announcement
Sale/Promotion: Discount, limited offer
Announcement: News, update, notification
Social Media: Instagram post, WeChat share
Business: Company profile, service intro
Education: Course, workshop, training
Festival: Holiday greetings, celebrations

Output Format

Final Deliverable

A self-contained HTML file with built-in export functionality. Users can:

Open the HTML in any browser
Click the "导出 PNG/JPG" button to download the image instantly
No additional tools or manual screenshots needed

Workflow:

Generate the HTML code with export button included
Save HTML to the user's working directory
Tell user: "海报已生成！用浏览器打开后点击底部按钮即可导出图片。"

Key Points:

HTML includes html2canvas library from CDN
Export button is hidden during capture (won't appear in exported image)
2x scale for high-resolution output
User gets a complete, ready-to-use file

Tips for Excellence

Content is King: A poster should INFORM. Include all relevant details - date, location, highlights, speakers, CTA
Big & Bold: Titles need to grab attention. Use 80px+ for main titles. Make text IMPACTFUL.
Fill the Canvas: 1080x1920 is a large canvas. Use it! No lazy whitespace. Every pixel should contribute.
Visual flow: Guide the eye naturally through content (top to bottom, big to small)
Consistency: Maintain style throughout
Accessibility: Ensure readability for all users

Common Mistakes to AVOID

❌ Title smaller than 150px
❌ Any text using font-weight below 700
❌ Empty space that could hold content
❌ Fewer than 7 content sections
❌ No clear call-to-action
❌ Missing essential info (date, location)
❌ Subtle/light colors when bold impact is needed

Bilingual Support

When creating bilingual posters:

Place primary language prominently
Secondary language can be smaller or in a different position
Use language-appropriate fonts
Consider cultural design elements
Maintain visual balance between languages