skills.rest
shiker1996
shiker1996COMMUNITY
Explore all skills by this author →
WebsiteGitHub

article-cover-ai-visual-generator

Generates a 900x383 WeChat article cover as single-page HTML/CSS from title, summary, and theme spec.

5|1|Updated Jul 31, 2026
Search Tags:#visual design#wechat#cover generation#html css#inline svg#screenshot rendering#article cover
One-click install
npx skills add https://github.com/shiker1996/wechat-editroom --skill article-cover-ai-visual-generator-shiker1996
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: article-cover-ai-visual-generator
Source: https://github.com/shiker1996/wechat-editroom/tree/main/skills/article-cover-ai-visual-generator
Command: npx skills add https://github.com/shiker1996/wechat-editroom --skill article-cover-ai-visual-generator-shiker1996

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating a visually consistent WeChat official account article cover normally requires manual design work in separate tools. This Skill turns a frozen article title, summary, and theme design spec into a ready-to-screenshot 900x383 horizontal cover page, keeping typography, layout, and theme decoration in one deterministic HTML deliverable. ## Core Features & Use Cases - Spec-driven cover generation: Reads cover-visual-input.json, cover-theme-snapshot.json, and cover-theme-design-spec.md to produce a single .page HTML file with inline CSS and inline SVG only. - Built-in visual references: Ships layout, visual contract, and component-mapping references that enforce safe zones, visual hierarchy, and truthful text usage without fabricating issue numbers or data. - Chunked single-agent writing: Writes the cover via a begin/append/finish/final sequence so the raw HTML/CSS is saved deterministically for Chromium screenshot rendering. - Use Case: Given an article about AI industry trends with a frozen title and summary, generate a themed 900x383 cover with a network-node visual system, brand line, and date, ready for screenshot delivery as the article cover. ## Quick Start Ask the agent to generate the article cover visual from the prepared cover input files and theme design spec in the workspace.

Frequently Asked Questions about article-cover-ai-visual-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a WeChat article cover with HTML and CSS?▼

Provide the frozen title, summary, brand info, and theme design spec as workspace input files, then let the agent produce one 900x383 .page HTML file using inline CSS and inline SVG. The output is screenshot-rendered by Chromium into the final cover image.

What input files does the cover generation require?▼

It requires cover-visual-input.json with title, summary, brand and canvas requirements, cover-theme-snapshot.json with theme ID and tokens, and cover-theme-design-spec.md describing the visual language. All listed workspace files must be read before generation.

Can the cover HTML use external images, fonts, or scripts?▼

No. The cover only allows inline CSS, CSS geometry, pseudo-elements, and inline SVG. Scripts, event handlers, remote images, remote fonts, iframes, and url(http...) references are explicitly forbidden.

Does the cover generator rewrite the article title or add issue numbers?▼

No. Title, summary, and brand text are treated as untrusted data used only for layout. The generator cannot rewrite facts, invent issue numbers, rankings, statistics, or any information not present in the input.

What are the limitations of HTML-based cover generation?▼

It produces a fixed 900x383 single page and does not generate raster images itself, relying on Chromium screenshot for final output. It also cannot edit the article, modify titles, or call browser audit, search, or repair capabilities.

Related Skills

Explore More Design & Creative Skills→
SpaceZephyrSpaceZephyr
333

commercial-brief

Convert commercial briefs into structured content plans and sponsored articles.

Community
Advanced
alchaincyfalchaincyf
1.5k

huashu-wechat-image

Generate cover and inline images for WeChat Official Account articles via Gemini API or HTML screenshots.

Community
Advanced
vibeingingvibeinging
49

wechat_writer

Create and format WeChat Official Account articles with inline HTML styling.

Community
Advanced
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate