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

social-theme-design-spec-generator

Generates theme-level AI_DESIGN_SPEC.md documents from confirmed social theme JSON configurations.

5|1|Updated Jul 31, 2026
Search Tags:#theme#design spec#markdown generation#social cards#visual tokens#component recipes
One-click install
npx skills add https://github.com/shiker1996/wechat-editroom --skill social-theme-design-spec-generator-shiker1996
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: social-theme-design-spec-generator
Source: https://github.com/shiker1996/wechat-editroom/tree/main/skills/social-theme-design-spec-generator
Command: npx skills add https://github.com/shiker1996/wechat-editroom --skill social-theme-design-spec-generator-shiker1996

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Social card generation pipelines need a reusable, theme-level visual design specification so that downstream image-text agents can apply consistent colors, typography, component bindings, and decoration recipes without re-deriving them for every piece of content. ## Core Features & Use Cases - Theme Spec Generation: Produces a complete AI_DESIGN_SPEC.md from a theme's JSON tokens (colors, typography, shape), social recipes, effects, and component configurations. - Semantic Component Recipes: Maps fact types (metrics, processes, risks, code, conclusions) to theme-appropriate visual treatments without fixing page templates. - Batch Spec Updates: Includes a Node.js script that regenerates AI_DESIGN_SPEC.md files for all themes under a themes/social directory. - Use Case: After confirming a new 'neon' theme configuration, run this Skill to produce its design spec so the social card generation agent renders cards with the correct accent colors, glow shadows, and decoration direction. ## Quick Start Generate an AI_DESIGN_SPEC.md for the confirmed social theme JSON configuration I provide, covering its tokens, component bindings, and decoration recipes.

Frequently Asked Questions about social-theme-design-spec-generator

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

FAQPage Schema
How do I generate a design spec for a social media theme?▼

Provide the theme's JSON configuration including id, label, version, token colors, typography, shape, and social recipes. The Skill outputs a complete AI_DESIGN_SPEC.md Markdown document describing visual direction, component bindings, and decoration recipes.

What inputs are required to create an AI_DESIGN_SPEC.md?▼

At minimum you need the theme id, label, and version, plus tokens.colors, font families, tokens.shape, and the social.recipes, social.effects, and social.components sections. All colors, class prefixes, and theme IDs must come from this input rather than being invented.

Does the generated spec define page layouts or templates?▼

No. The spec only covers theme-level visual language such as colors, fonts, shadows, and decoration direction. Page structure, layout values, typography sizing, and component counts are handled by the visual generation skill's Layout Guide and visual contract.

Can I regenerate specs for multiple themes at once?▼

Yes. The included generate-existing-specs.mjs Node.js script reads every theme JSON file under the themes/social directory and writes an AI_DESIGN_SPEC.md into each theme's folder, preserving stable sections when updating.

What are the limitations of the theme design spec?▼

The spec cannot contain candidate facts, source URLs, internal IDs, or event data, and it must not fix page coordinates, component counts, or HTML skeletons. It only describes which visual treatments suit which fact types, leaving composition decisions to the page-level agent.

Related Skills

Explore More Design & Creative Skills→
Bumh3rrBumh3rr

material-3-theming

Implements Material 3 theming conventions for Jetpack Compose with ColorScheme, Typography, and Shapes.

Community
Intermediate
matevipmatevip
1.1k

xhs_note

Creates Xiaohongshu notes with copywriting, vertical image cards, and packaged preview delivery.

Community
Advanced
TimelessPTimelessP
1

airship-one-design

Enforce Airship One UI design guardrails for rem sizing and 24-row text rhythm.

Community
Intermediate
webdevarifwebdevarif

reference-design-contract

Convert design references and taste signals into a DESIGN.md contract and implementation handoff.

Community
Intermediate