---

name: image-doc-to-blog description: Convert image-based marketing materials with documentation into bilingual MDX blog posts. Use when user provides a folder containing images (page1.jpg, page2.jpg, etc.) with a markdown documentation file describing each page's content. Generates both Chinese (.zh.mdx) and English (.mdx) blog posts with proper frontmatter, SEO optimization, and MDX syntax validation. Includes optional build testing to verify compilation before deployment.

Image Doc to Blog

Convert image-based marketing materials with accompanying documentation into professional bilingual MDX blog posts.

Quick Start

Input requirements:

• A folder containing numbered images (e.g., page1-xxx.jpg, page2-xxx.jpg)
• A markdown file with descriptions for each page (P1, P2, P3...)

Output:

• Chinese blog post: content/docs/[slug].zh.mdx
• English blog post: content/docs/[slug].mdx

Workflow

Phase 1: Analyze Materials

1. Locate files using Glob tool:

   CopyGlob pattern: **/*
   Path: [user-provided-folder]
   

2. Read documentation to extract:

   • Page descriptions (P1, P2, P3...)
   • Technical specifications
   • Brand messaging
   • Contact information

3. Map images to content:

   • page1-xxx.jpg → P1 description → Section 1
   • page2-xxx.jpg → P2 description → Section 2
   • Continue for all pages...

Phase 2: Generate Content

1. Reference existing format:

   CopyRead: content/docs/index.mdx
   Read: content/docs/index.zh.mdx
   

2. Create Chinese blog (.zh.mdx):

   Copy---
   title: "标题（含关键词）"
   description: "SEO描述，120-160字符"
   date: YYYY-MM-DD
   author: "作者/公司名"
   ---
   
   # 主标题
   
   引言段落...
   
   ## 第一部分
   
   说明文字...
   
   ![图片描述](/path/to/page1.jpg)
   
   详细解释...
   
   ## 第二部分
   ...
   

3. Create English blog (.mdx):

   • Translate all content
   • Maintain same structure
   • Keep same image references

Phase 3: Validate

Critical MDX checks:

• Frontmatter values are quoted (especially titles with colons)
• No {< or {> patterns (causes JSX errors)
• Image paths are relative to public directory
• Date format is YYYY-MM-DD
• Description is 120-160 characters

See references/mdx-best-practices.md for detailed syntax rules.

Phase 4: Build Test (Optional)

Run when user requests verification:

Copypnpm build

Success indicators:

• ✓ Compiled successfully
• New routes appear: /en/docs/[slug], /zh/docs/[slug]
• No MDX parsing errors

Content Guidelines

Blog Structure

CopyIntroduction (set context, 100-150 words)
├── Section 1: Image 1 + explanation
├── Section 2: Image 2 + explanation
├── ...
├── Section N: Image N + explanation
└── Conclusion (summary + contact info)

SEO Best Practices

See references/seo-guidelines.md for detailed SEO optimization.

Quick checklist:

• Title: 50-60 characters, include primary keyword
• Description: 120-160 characters, include keywords
• Headings: Proper H1 → H2 → H3 hierarchy
• Images: Descriptive alt text with keywords
• Content: 1,500-2,500 words for comprehensive topics

Frontmatter Template

Copy---
title: "Descriptive Title with Primary Keyword"
description: "Compelling description with keywords, 120-160 characters, explaining what readers will learn."
date: 2024-01-21
author: "Company Name or Author"
---

Common Issues

Resources

• references/workflow.md - Complete step-by-step workflow
• references/mdx-best-practices.md - MDX syntax rules and pitfalls
• references/seo-guidelines.md - SEO optimization guidelines