mira-image-template

Extract design systems from reference images and create Mira deck templates.

158|49|Updated Jun 10, 2026
One-click install
npx skills add https://github.com/sandeco/mira-animator --skill mira-image-template
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mira-image-template
Source: https://github.com/sandeco/mira-animator/tree/main/agents/mira-image-template
Command: npx skills add https://github.com/sandeco/mira-animator --skill mira-image-template

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transforms one or more reference images into a reusable Mira deck template by extracting the design system and layout, enabling rapid, faithful template creation without manual recreation.

Core Features & Use Cases

  • Design-system extraction: derive primary color, background, typography, and accents from reference images.
  • Template generation: output a Mira theme CSS and a decks skeleton saved under mira-templates/decks/<nome>/index.html.
  • Layout fidelity: reproduce the relative positioning and proportions from the reference while keeping the template adaptable for /mira-new.
  • Use Case: a designer provides a logo and screen slides to instantly generate a branded template ready for customization.

Quick Start

Provide one or more reference images and a template name to generate the theme and deck skeleton under mira-templates.

Frequently Asked Questions about mira-image-template

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

FAQPage Schema
How do I create a deck template from an existing image?

To create a deck template from an image, provide the reference image and a template name. The system extracts the design system, including colors, typography, and layout, then generates a reusable Mira deck skeleton saved under mira-templates.

What design elements are extracted from reference images to build a CSS theme?

The design-system extraction process derives primary colors, backgrounds, typography, and accents from reference images. It also infers relative positioning and proportions to reproduce the layout faithfully within the generated CSS theme.

Can I generate a branded slide deck using just my logo and screen slides?

Yes, you can generate a branded template by providing your logo and screen slides as reference images. The system infers the design system from these inputs to instantly produce a themed deck skeleton ready for customization.

How do I start generating a Mira deck template from reference images?

Provide one or more reference images and a template name to start generating a Mira deck template. The system creates the theme CSS and deck skeleton, storing them under mira-templates/decks/<nome>/index.html for immediate use.

Will generating a new template overwrite my existing CSS themes or deck skeletons?

No, the template generation process includes validation to avoid overwriting existing themes or decks. It stores the new template under a stable slug, only overwriting if you explicitly confirm the action.

Does the generated Mira template support layout fidelity from the original reference image?

Yes, the generated Mira template reproduces the relative positioning and proportions from the reference image. This ensures layout fidelity while keeping the deck skeleton adaptable for downstream customization.