skills.rest
dtyq
dtyqOFFICIAL
Explore all skills by this author →
GitHub

generate-preset

Generates custom CSS and JS preset bundles for self-media card templates from style descriptions.

5.0k|557|Updated May 14, 2025
Search Tags:#CSS#theme generation#preset#echarts#Design tokens#visual template#social media cards
One-click install
npx skills add https://github.com/dtyq/magic --skill generate-preset
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-preset
Source: https://github.com/dtyq/magic/tree/main/backend/super-magic/agents/skills/self-media-composer/generate-preset
Command: npx skills add https://github.com/dtyq/magic --skill generate-preset

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creating a reusable visual theme for social media cards normally requires hand-writing CSS, ECharts chart configurations, and a preview page from scratch. This Skill turns a free-form style description or reference image into a complete, ready-to-use preset bundle.

Core Features & Use Cases

  • Design Brief Extraction: Interviews the user across five axes (mood, palette, typography, decoration, content domain) or analyzes a reference image to derive design tokens.
  • Preset Bundle Generation: Produces three files — a structured CSS file with tokens, components, and utilities; a JS file exposing ECharts chart presets via a single global namespace; and a standalone preview.html gallery.
  • Quality Enforcement: Ships with anatomy references and a checklist covering canvas constraints, class naming, chart preset counts, and preview coverage.
  • Use Case: A user says "I want something soft and feminine — pastel pink and mint, rounded corners" and receives a soft-pastel preset folder with CSS, JS, and preview files saved under shared/presets/, ready to be referenced by the self-media-composer workflow.

Quick Start

Ask the assistant to create a custom card preset by describing the visual style you want, for example a dark futuristic theme with neon accents for tech content.

Frequently Asked Questions about generate-preset

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

FAQPage Schema
How do I create a custom CSS preset for social media cards?▼

Describe the desired mood, color palette, typography, decoration, and content domain, or provide a reference image. The skill derives design tokens and writes a CSS file, a JS chart preset file, and a preview.html into shared/presets/<preset-name>/.

What files does a generated preset bundle contain?▼

Each preset bundle contains three files: <preset-name>.css with design tokens and component classes, <preset-name>.js exposing ECharts chart presets via window.<PascalCase>Presets, and preview.html showcasing all components in a scrollable gallery.

Can I generate a preset that matches a reference image or Figma design?▼

Yes. Provide a reference image, Figma frame, or screenshot and the skill uses visual understanding to extract the palette, textures, typography weight, and layout language before deriving the design tokens.

Does the generated preset work with both Rednote and Instagram card sizes?▼

Yes. The preview skeleton supports rednote cards at native 540x720 side-by-side and instagram cards at 1080x1350 scaled to 50 percent with transform. The CSS canvas constraint remains fixed per platform.

When should I not use the generate-preset skill?▼

Do not use it for small card-level tweaks like changing one card's background color. It is exclusively for authoring a reusable preset bundle, not for editing individual cards within an existing preset.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

Generate brand identity kits with logos, color palettes, typography, and style guides.

Community
Advanced
iterationlayeriterationlayer
2

remove-background-and-generate-product-card

Remove photo backgrounds and generate branded product listing card PNGs.

Official
Intermediate
firefly-eventsfirefly-events

design-system

Converts brand-system YAML to W3C token JSON and HTML previews for frontend design workflows.

Official
Advanced
baoxukang123baoxukang123

frontend-design

Provide frontend design guidelines for layouts, themes, animations, and CSS patterns.

Community
Intermediate