Skill: tobewin/post-creator (version 1.6.3)

--- name: post-creator version: 1.6.3 author: openclaw-community description: "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." license: MIT permissions: - browser tags: - design - poster - html - visual - marketing - creative - bilingual capabilities: - id: generate-poster description: "Generate a single-page HTML poster based on user requirements" - id: style-variation description: "Create different style variations of a poster" - id: bilingual-support description: "Support both Chinese and English poster content" - id: export-image description: "Export poster as high-resolution PNG/JPEG image" entryPoint: type: natural prompt: | You are a professional poster designer specializing in creating stunning single-page HTML posters. Always generate complete, self-contained HTML files with inline CSS. Support both Chinese and English content seamlessly. --- # 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 1. **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. 2. **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 3. **Less Text, More Impact**: A poster is NOT an article. Keep text MINIMAL. User should grasp the message in 3 seconds max. 4. **HUGE Typography**: Title 140-200px, subtitle 60-90px. Title must dominate the entire poster. 5. **Visual Balance**: Use layout (left/right or top/bottom) to balance content. Don't stack everything vertically. 6. **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: ```html <!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:** ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> ``` **Required Export Bar (add before closing </body>):** ```html <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:** ```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 ```css :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 ```css .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): - [ ] Top banner or badge (event type) - [ ] Giant title (150px+) - [ ] Subtitle (70px+) - [ ] Date badge or highlight - [ ] Location + time info bar - [ ] Key highlights or topics (4-6 items) - [ ] Stats/numbers (3-4 metrics) - [ ] Speakers or hosts - [ ] Large CTA button - [ ] Footer with website/org info ### 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: ```css @media (max-width: 768px) { .poster { padding: 1rem; } .title { font-size: 2rem; } } ``` ## Common Use Cases 1. **Event Poster**: Conference, concert, exhibition 2. **Product Launch**: New product announcement 3. **Sale/Promotion**: Discount, limited offer 4. **Announcement**: News, update, notification 5. **Social Media**: Instagram post, WeChat share 6. **Business**: Company profile, service intro 7. **Education**: Course, workshop, training 8. **Festival**: Holiday greetings, celebrations ## Output Format ### Final Deliverable A self-contained HTML file with built-in export functionality. Users can: 1. Open the HTML in any browser 2. Click the "导出 PNG/JPG" button to download the image instantly 3. No additional tools or manual screenshots needed ### Workflow: 1. Generate the HTML code with export button included 2. Save HTML to the user's working directory 3. 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 1. **Content is King**: A poster should INFORM. Include all relevant details - date, location, highlights, speakers, CTA 2. **Big & Bold**: Titles need to grab attention. Use 80px+ for main titles. Make text IMPACTFUL. 3. **Fill the Canvas**: 1080x1920 is a large canvas. Use it! No lazy whitespace. Every pixel should contribute. 4. **Visual flow**: Guide the eye naturally through content (top to bottom, big to small) 5. **Consistency**: Maintain style throughout 6. **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

path: README.md
content: # Post Creator - OpenClaw 海报生成器 Skill

> 为 OpenClaw AI Agent 提供精美海报生成能力，支持中英文，多种风格

## 功能特点

- 🎨 **8种设计风格**：现代、极简、复古、中国风、科技、奢华、自然、活泼
- 🌍 **中英文支持**：无缝支持中文、英文及双语海报
- 📱 **响应式设计**：适配各种屏幕尺寸
- 🖨️ **打印就绪**：支持打印优化
- ⚡ **即开即用**：生成独立 HTML 文件，浏览器直接打开

## 安装

```bash
clawhub install post-creator
```

## 使用示例

### 基础使用

```
用户: 帮我生成一个科技风格的产品发布会海报
AI: [生成完整的HTML海报代码]
```

### 风格选择

```
用户: 我需要一张中国风的新年贺卡
用户: Create a minimalist poster for design exhibition
用户: 做一张奢华风格的品牌发布海报
```

### 自定义内容

```
用户: 生成海报：
- 标题：AI创新峰会
- 日期：2026年6月15日
- 地点：北京国家会议中心
- 风格：科技感
```

## 支持的风格

| 风格 | 适用场景 | 关键词 |
|------|----------|--------|
| 现代 | 活动、发布会 | modern, 现代, 简洁 |
| 极简 | 设计展、艺术展 | minimalist, 极简, 留白 |
| 复古 | 文化活动、怀旧 | retro, vintage, 复古, 怀旧 |
| 中国风 | 传统文化、节日 | chinese, 中国风, 传统, 中式 |
| 科技 | 科技会议、AI活动 | tech, 科技, 未来, 数字 |
| 奢华 | 品牌发布、高端活动 | luxury, 奢华, 高端, 精致 |
| 自然 | 环保、健康、户外 | nature, 自然, 绿色, 环保 |
| 活泼 | 创意活动、派对 | playful, 活泼, 创意, 趣味 |

## 输出格式

生成的海报是一个完整的 HTML 文件：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>海报标题</title>
  <style>
    /* 所有样式内联 */
  </style>
</head>
<body>
  <!-- 海报内容 -->
</body>
</html>
```

## 使用方式

1. **生成**：让 AI 生成海报代码
2. **保存**：将代码保存为 `.html` 文件
3. **打开**：在浏览器中打开文件
4. **截图**：使用截图工具保存为图片

## 文件结构

```
post-creator/
├── SKILL.md                    # 主技能定义
├── README.md                   # 本文件
├── references/
│   └── styles.md              # 风格模板参考
├── assets/
│   └── templates/             # 预设模板
└── scripts/                   # 辅助脚本
```

## 设计原则

- **自包含**：所有代码在一个文件中
- **美观**：遵循专业设计原则
- **可读**：清晰的视觉层次
- **无障碍**：确保文字可读性

## 常见用途

- 🎫 活动海报（会议、演唱会、展览）
- 🚀 产品发布（新品上市、功能更新）
- 🏷️ 促销海报（折扣、限时优惠）
- 📢 公告通知（新闻、更新、通知）
- 📱 社交媒体（Instagram、微信分享）
- 🏢 企业宣传（公司介绍、服务推广）
- 📚 教育培训（课程、工作坊）
- 🎊 节日祝福（新年、中秋、圣诞）

## 许可证

MIT License

## 贡献

欢迎贡献！请提交 PR 或 Issue 到 ClawHub 仓库。

## 相关链接

- [ClawHub](https://clawhub.ai)
- [OpenClaw 文档](https://docs.openclaw.ai)


path: examples/tech-summit-poster.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI峰会</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@700;900&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      background: #222;
      font-family: 'Noto Sans SC', sans-serif;
      display: flex;
      justify-content: center;
      padding: 40px 20px 100px;
    }
    
    #poster {
      width: 1080px;
      height: 1620px;
      background-color: #0a0a12;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 80px 60px;
      position: relative;
    }
    
    .date-badge {
      background: rgba(0,200,255,0.12);
      border: 2px solid #00ccff;
      color: #00ccff;
      font-size: 26px;
      font-weight: 700;
      padding: 14px 44px;
      border-radius: 50px;
      letter-spacing: 4px;
      margin-bottom: 60px;
    }
    
    .main-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 180px;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      text-align: center;
      text-shadow: 0 0 100px rgba(0,150,255,0.4);
      margin-bottom: 20px;
    }
    
    .sub-title {
      font-size: 72px;
      font-weight: 900;
      background: linear-gradient(90deg, #00ccff, #0066ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 16px;
      margin-bottom: 50px;
    }
    
    .divider {
      width: 200px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #00ccff, transparent);
      margin-bottom: 50px;
    }
    
    .info-section {
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-bottom: 60px;
    }
    
    .info-row {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    
    .info-icon { font-size: 44px; }
    .info-text { font-size: 34px; color: #fff; font-weight: 700; }
    
    .stats {
      display: flex;
      gap: 60px;
      margin-bottom: 60px;
    }
    
    .stat-item { text-align: center; }
    
    .stat-num {
      font-family: 'Orbitron', sans-serif;
      font-size: 56px;
      font-weight: 900;
      color: #00ccff;
    }
    
    .stat-label {
      font-size: 22px;
      color: rgba(255,255,255,0.5);
      font-weight: 700;
      margin-top: 8px;
    }
    
    .cta-btn {
      background: linear-gradient(90deg, #0066ff, #00ccff);
      color: #000;
      font-size: 40px;
      font-weight: 900;
      padding: 32px 100px;
      border-radius: 60px;
      text-decoration: none;
      letter-spacing: 8px;
      box-shadow: 0 0 80px rgba(0,150,255,0.4);
      margin-bottom: 40px;
    }
    
    .footer {
      margin-top: auto;
      font-family: 'Orbitron', sans-serif;
      font-size: 22px;
      color: rgba(0,200,255,0.6);
      letter-spacing: 2px;
    }
    
    .corner {
      position: absolute;
      width: 60px;
      height: 60px;
    }
    .corner-tl { top: 40px; left: 40px; border-top: 3px solid rgba(0,200,255,0.3); border-left: 3px solid rgba(0,200,255,0.3); }
    .corner-tr { top: 40px; right: 40px; border-top: 3px solid rgba(0,200,255,0.3); border-right: 3px solid rgba(0,200,255,0.3); }
    .corner-bl { bottom: 40px; left: 40px; border-bottom: 3px solid rgba(0,200,255,0.3); border-left: 3px solid rgba(0,200,255,0.3); }
    .corner-br { bottom: 40px; right: 40px; border-bottom: 3px solid rgba(0,200,255,0.3); border-right: 3px solid rgba(0,200,255,0.3); }
    
    /* Export Button */
    .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;
      font-family: 'Noto Sans SC', sans-serif;
      box-shadow: 0 4px 20px rgba(16,185,129,0.4);
      transition: all 0.2s;
    }
    
    .export-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(16,185,129,0.5);
    }
  </style>
</head>
<body>
  <div id="poster">
    <div class="date-badge">2026.06.15-16 · 北京</div>
    
    <h1 class="main-title">AI SUMMIT</h1>
    <h2 class="sub-title">人工智能峰会</h2>
    
    <div class="divider"></div>
    
    <div class="info-section">
      <div class="info-row">
        <span class="info-icon">📍</span>
        <span class="info-text">北京国家会议中心</span>
      </div>
      <div class="info-row">
        <span class="info-icon">🎤</span>
        <span class="info-text">50+ 顶尖演讲嘉宾</span>
      </div>
      <div class="info-row">
        <span class="info-icon">🎯</span>
        <span class="info-text">大模型 · AI Agent · 多模态</span>
      </div>
    </div>
    
    <div class="stats">
      <div class="stat-item">
        <div class="stat-num">5K+</div>
        <div class="stat-label">参会者</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">30+</div>
        <div class="stat-label">专题论坛</div>
      </div>
      <div class="stat-item">
        <div class="stat-num">2天</div>
        <div class="stat-label">深度交流</div>
      </div>
    </div>
    
    <a href="#" class="cta-btn">立即报名</a>
    
    <div class="footer">aisummit2026.com</div>
    
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>
  </div>
  
  <!-- Export Bar -->
  <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';
      
      html2canvas(poster, {
        scale: 2,
        useCORS: true,
        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';
      });
    }
  </script>
</body>
</html>


path: references/styles.md
content: # Poster Style Reference Guide

## Modern Gradient Poster

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Poster</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      font-family: 'Inter', system-ui, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    
    .poster {
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 3rem;
      max-width: 600px;
      width: 100%;
      text-align: center;
      color: white;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    }
    
    .badge {
      background: rgba(255,255,255,0.2);
      padding: 0.5rem 1rem;
      border-radius: 50px;
      font-size: 0.875rem;
      margin-bottom: 1.5rem;
      display: inline-block;
    }
    
    .title {
      font-size: 3rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 1rem;
    }
    
    .subtitle {
      font-size: 1.25rem;
      opacity: 0.9;
      margin-bottom: 2rem;
    }
    
    .cta {
      background: white;
      color: #6366f1;
      padding: 1rem 2rem;
      border-radius: 50px;
      font-weight: 600;
      display: inline-block;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="poster">
    <div class="badge">限时活动</div>
    <h1 class="title">创造无限可能</h1>
    <p class="subtitle">探索设计的边界，释放创意的力量</p>
    <a href="#" class="cta">立即参与</a>
  </div>
</body>
</html>
```

## Chinese Traditional Style

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中国风海报</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      min-height: 100vh;
      background: linear-gradient(180deg, #faf8f5 0%, #f5f0e8 100%);
      font-family: 'Noto Serif SC', serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    
    .poster {
      max-width: 500px;
      width: 100%;
      background: #fffef9;
      border: 3px solid #8b0000;
      padding: 3rem;
      position: relative;
    }
    
    .poster::before,
    .poster::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid #8b0000;
    }
    
    .poster::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
    .poster::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
    
    .decoration {
      text-align: center;
      font-size: 2rem;
      color: #8b0000;
      margin-bottom: 1rem;
    }
    
    .title {
      font-size: 2.5rem;
      font-weight: 900;
      color: #2c1810;
      text-align: center;
      writing-mode: vertical-rl;
      margin: 0 auto 2rem;
      letter-spacing: 0.5em;
      line-height: 2;
    }
    
    .subtitle {
      font-size: 1.125rem;
      color: #5c4033;
      text-align: center;
      line-height: 2;
    }
    
    .seal {
      width: 60px;
      height: 60px;
      background: #8b0000;
      color: #ffd700;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 2rem auto 0;
    }
  </style>
</head>
<body>
  <div class="poster">
    <div class="decoration">◆ ◇ ◆</div>
    <h1 class="title">春风雅集</h1>
    <p class="subtitle">
      传统文化艺术展<br>
      二〇二六年 · 春
    </p>
    <div class="seal">印</div>
  </div>
</body>
</html>
```

## Minimalist Style

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minimalist Poster</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      min-height: 100vh;
      background: #fafafa;
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    
    .poster {
      max-width: 500px;
      width: 100%;
      text-align: center;
    }
    
    .line {
      width: 60px;
      height: 1px;
      background: #000;
      margin: 0 auto 2rem;
    }
    
    .title {
      font-size: 4rem;
      font-weight: 300;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
      color: #111;
    }
    
    .subtitle {
      font-size: 1rem;
      color: #666;
      margin-bottom: 3rem;
      font-weight: 300;
    }
    
    .details {
      font-size: 0.875rem;
      color: #999;
      line-height: 2;
    }
  </style>
</head>
<body>
  <div class="poster">
    <div class="line"></div>
    <h1 class="title">Less,<br>but better.</h1>
    <p class="subtitle">Design Exhibition 2026</p>
    <div class="details">
      March 15 - April 30<br>
      Gallery One, Shanghai
    </div>
  </div>
</body>
</html>
```

## Tech/Digital Style

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tech Poster</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      min-height: 100vh;
      background: #0a0a0f;
      font-family: 'Orbitron', monospace;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      overflow: hidden;
    }
    
    .grid-bg {
      position: fixed;
      inset: 0;
      background-image: 
        linear-gradient(rgba(0,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,0.03) 1px, transparent 1px);
      background-size: 50px 50px;
    }
    
    .poster {
      max-width: 600px;
      width: 100%;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    
    .glow-text {
      font-size: 3.5rem;
      font-weight: 900;
      background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: glow 3s linear infinite;
      text-shadow: 0 0 40px rgba(0,255,255,0.5);
    }
    
    @keyframes glow {
      to { background-position: 200% center; }
    }
    
    .subtitle {
      color: #00ffff;
      font-size: 1rem;
      margin: 1.5rem 0;
      letter-spacing: 0.3em;
      text-transform: uppercase;
    }
    
    .date {
      color: rgba(255,255,255,0.5);
      font-size: 0.875rem;
      border: 1px solid rgba(0,255,255,0.3);
      display: inline-block;
      padding: 0.75rem 2rem;
    }
  </style>
</head>
<body>
  <div class="grid-bg"></div>
  <div class="poster">
    <h1 class="glow-text">未来已来</h1>
    <p class="subtitle">AI Summit 2026</p>
    <div class="date">2026.06.15 | 北京</div>
  </div>
</body>
</html>
```

## Luxury Style

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Luxury Poster</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      min-height: 100vh;
      background: #000;
      font-family: 'Playfair Display', serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    
    .poster {
      max-width: 500px;
      width: 100%;
      background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
      border: 1px solid rgba(212,175,55,0.3);
      padding: 4rem 3rem;
      text-align: center;
    }
    
    .gold-line {
      width: 80px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #d4af37, transparent);
      margin: 0 auto 2rem;
    }
    
    .brand {
      color: #d4af37;
      font-size: 0.75rem;
      letter-spacing: 0.5em;
      text-transform: uppercase;
      margin-bottom: 2rem;
    }
    
    .title {
      color: #fff;
      font-size: 2.5rem;
      font-weight: 400;
      line-height: 1.3;
      margin-bottom: 1rem;
    }
    
    .title em {
      color: #d4af37;
      font-style: italic;
    }
    
    .subtitle {
      color: rgba(255,255,255,0.6);
      font-size: 1rem;
      margin-bottom: 2rem;
    }
    
    .cta {
      color: #d4af37;
      border: 1px solid #d4af37;
      padding: 1rem 2.5rem;
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      display: inline-block;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .cta:hover {
      background: #d4af37;
      color: #000;
    }
  </style>
</head>
<body>
  <div class="poster">
    <div class="gold-line"></div>
    <div class="brand">Exclusive Collection</div>
    <h1 class="title">The Art of<br><em>Elegance</em></h1>
    <p class="subtitle">A celebration of timeless beauty</p>
    <a href="#" class="cta">Discover More</a>
  </div>
</body>
</html>
```

## Nature/Organic Style

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自然风格海报</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      min-height: 100vh;
      background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%);
      font-family: 'Noto Sans SC', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    
    .poster {
      max-width: 500px;
      width: 100%;
      background: rgba(255,255,255,0.9);
      border-radius: 20px;
      padding: 3rem;
      text-align: center;
      box-shadow: 0 20px 60px rgba(34,139,34,0.15);
    }
    
    .leaf {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    .title {
      font-size: 2.5rem;
      font-weight: 700;
      color: #2e7d32;
      margin-bottom: 1rem;
    }
    
    .subtitle {
      font-size: 1.125rem;
      color: #558b2f;
      font-weight: 300;
      margin-bottom: 2rem;
      line-height: 1.8;
    }
    
    .info {
      background: #f1f8e9;
      padding: 1.5rem;
      border-radius: 12px;
      color: #33691e;
    }
    
    .info-item {
      margin: 0.5rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="poster">
    <div class="leaf">🌿</div>
    <h1 class="title">绿色生活节</h1>
    <p class="subtitle">
      回归自然，拥抱健康<br>
      共同创造可持续的未来
    </p>
    <div class="info">
      <div class="info-item">📅 2026年4月22日</div>
      <div class="info-item">📍 城市森林公园</div>
      <div class="info-item">🎫 免费入场</div>
    </div>
  </div>
</body>
</html>
```

## Responsive Breakpoints

```css
/* Mobile First Approach */
.poster {
  padding: 1.5rem;
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

/* Tablet */
@media (min-width: 768px) {
  .poster {
    padding: 2.5rem;
  }
  .title {
    font-size: 3rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .poster {
    padding: 3rem;
  }
  .title {
    font-size: 4rem;
  }
}

/* Print */
@media print {
  body {
    background: white;
  }
  .poster {
    box-shadow: none;
    page-break-inside: avoid;
  }
}
```

## Chinese Typography Combinations

```css
/* Classical Chinese */
.font-classical {
  font-family: "Noto Serif SC", "STSong", "SimSun", serif;
}

/* Modern Chinese */
.font-modern {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Creative Chinese */
.font-creative {
  font-family: "ZCOOL XiaoWei", "ZCOOL QingKe HuangYou", cursive;
}

/* Handwriting Chinese */
.font-handwriting {
  font-family: "Ma Shan Zheng", "Liu Jian Mao Cao", cursive;
}
```

## English Typography Combinations

```css
/* Classic Serif */
.font-classic {
  font-family: "Playfair Display", "Georgia", serif;
}

/* Modern Sans */
.font-sans {
  font-family: "Inter", "Helvetica Neue", sans-serif;
}

/* Display Bold */
.font-display {
  font-family: "Bebas Neue", "Oswald", sans-serif;
}

/* Elegant Script */
.font-script {
  font-family: "Cormorant Garamond", "GFS Didot", serif;
}
```


path: skill.json
content: {
  "name": "post-creator",
  "version": "1.6.3",
  "author": "openclaw-community",
  "description": "Generate beautiful single-page HTML posters with various styles. Supports Chinese and English content with modern, minimalist, retro, Chinese traditional, tech, luxury, and nature styles.",
  "license": "MIT",
  "tags": ["design", "poster", "html", "visual", "marketing", "creative", "bilingual"],
  "homepage": "https://clawhub.ai/skills/post-creator",
  "repository": {
    "type": "git",
    "url": "https://github.com/openclaw-community/post-creator"
  },
  "minOpenClawVersion": "2.0.0",
  "files": [
    "SKILL.md",
    "README.md",
    "references/styles.md"
  ]
}


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (HIGH)