Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
casperliu7 avatar

Buda Social Cards

casperliu7/wechat-editor-agent

  • 2 installs
  • Updated June 25, 2026
  • casperliu7/wechat-editor-agent

Generates branded social media image cards for Xiaohongshu via a Playwright HTML pipeline mixing AI illustrations, real photos, and HTML infographics.

About

Generates high-end social media image cards for Xiaohongshu by rendering HTML through Playwright, mixing AI illustrations, real photos, and HTML infographics. A content creator uses it to produce branded card sets from text.

  • Renders social image cards with a Playwright HTML pipeline mixing AI illustrations, photos, and infographics
  • Enforces fixed brand colors, fonts, 1080x1440 viewport, and base64 image embedding

Buda Social Cards by the numbers

  • 2 all-time installs (skills.sh)
  • Ranked #1,166 of 1,335 Generative Media skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/casperliu7/wechat-editor-agent --skill buda-social-cards

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2
Last updatedJune 25, 2026
Repositorycasperliu7/wechat-editor-agent ↗

What it does

Generates branded social media image cards for Xiaohongshu via a Playwright HTML pipeline mixing AI illustrations, real photos, and HTML infographics.

Files

SKILL.mdMarkdownGitHub ↗

🦞 Buda Social Cards (Brand Storytelling Engine)

This skill generates "Apple-like" or "Buda-style" high-end presentations for social media (Xiaohongshu), perfect for brand narratives, event recaps, tutorials, and dense information.

It uses a pure HTML/Playwright rendering pipeline that seamlessly mixes: 1. AI Illustrations (3D Pop style) 2. Real Photos (from user workspace) 3. Pure HTML Infographics (Timelines, VS comparisons, grids)

📐 The Workflow

Stage 1: Content & Layout Planning

1. Extract 3-6 core scenes or punchy quotes from the text. 2. Decide the card type for each scene:

  • image: Needs an AI illustration OR maps to a user-provided real photo/screenshot.
  • infographic: Needs high info-density (e.g., a VS comparison, a 3-step timeline, a checklist). Will be rendered purely with HTML/CSS.

3. Check the workspace for existing real photos. If none, plan to generate AI illustrations.

Stage 2: AI Illustration Generation

1. For missing visuals, use generate_image (Size: 1024x1792). 2. Brand Prompt Rule: You MUST append this exact suffix to EVERY prompt to maintain the Buda aesthetic:

, 3D pop illustration style, minimalist, abstract isometric elements, warm parchment background, matte gold accents, clean and trendy, no text.

Stage 3: HTML/Playwright Rendering Engine (Node.js)

Write a Node.js script using playwright to render cards.

CRITICAL SAFEGUARDS (Lessons Learned):

  • Base64 Images: Never use file:// paths in Playwright HTML. Read local images and convert them to base64 strings (data:image/jpeg;base64,...) before injecting them into <img> tags.
  • String Templates: Avoid nested backticks or complex template literals when writing JS from the agent to prevent SyntaxError in Bash. Use simple string concatenation ('data:image/...' + base64String) where necessary.

Strict CSS Rules: 1. Viewport: 1080px × 1440px (3:4). 2. Brand Colors:

  • Background: background-color: oklch(0.985 0.006 85); (Warm Parchment #F8F4E6)
  • Accents: color: oklch(0.52 0.076 78); (Matte Gold #A68A56)

3. Typography: Load Google Fonts. 'Noto Serif SC', serif; for titles/quotes, and 'Inter', sans-serif; for body/numbers. 4. Anti-Cutoff Layout (Flexbox):

  • Container MUST use: display: flex; flex-direction: column; flex: 1; padding-bottom: 60px; box-sizing: border-box;

5. Image Wrapping (`type: "image"`):

  • Wrap images in a .image-wrapper div.
  • Use object-fit: cover; and border-radius: 40px; with box-shadow: 0 30px 60px rgba(0,0,0,0.12);.

6. Infographic Box (`type: "infographic"`):

  • Inject custom HTML directly instead of an <img> tag.
  • Example styles to implement: .compare-card, .timeline, .step-num.

Stage 4: Headless Browser Snapshot

When taking the screenshot in Node.js: 1. headless: true 2. Retina Sharpness: Set deviceScaleFactor: 2. 3. Wait for Network: Use await page.setContent(html, { waitUntil: 'networkidle' }); and await page.waitForTimeout(2000); before page.screenshot().

Stage 5: Compression & Delivery

Playwright PNGs are too large and will crash Xiaohongshu automation. Compress to JPG:

convert output_card_raw.png -quality 85 final_card.jpg

Provide the user with the final compressed JPG files via standard delivery markers.

Related skills

remotion-devRemotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k101-skillsAi Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665101-skillsAi Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665101-skillsAi Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665101-skillsRemotion RenderRender videos programmatically using React components and Remotion framework441k665halt-catch-fireRemotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665
Generative Mediabranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.