leonardo

Generate images with Leonardo Lucid Origin and remove backgrounds for UI assets.

Updated Feb 19, 2026
One-click install
npx skills add https://github.com/xkazm04/personas --skill leonardo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: leonardo
Source: https://github.com/xkazm04/personas/tree/main/.claude/skills/leonardo
Command: npx skills add https://github.com/xkazm04/personas --skill leonardo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of production-ready visual assets by generating images with Leonardo's Lucid Origin model, removing backgrounds for transparent components, analyzing results with Gemini vision, and producing theme-adaptive SVGs ready for UI integration.

Core Features & Use Cases

  • Image generation: Produce icons, state illustrations, backgrounds, and bespoke visuals with configurable dimensions, style, and contrast.
  • Background removal & extraction: Remove backgrounds and produce transparent PNGs for component use or further SVG reconstruction.
  • Vision-driven iteration: Use Gemini vision to analyze shapes, colors, and composition and drive iterative refinements and hand-coded SVG recreation.
  • Example: Generate a 512x512 app icon, remove its background, analyze structure with Gemini, convert to a currentColor SVG, and integrate into a React component for both light and dark themes.

Quick Start

Use the leonardo skill to generate a 512x512 vibrant app icon for the Neon Android Head brand and produce a transparent, theme-adaptive SVG.

Frequently Asked Questions about leonardo

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

FAQPage Schema
How do I generate production-ready UI assets and convert them to SVG?

Generate production-ready UI assets by creating images with Leonardo's Lucid Origin model, removing backgrounds for transparency, and using Gemini vision analysis to iteratively hand-code theme-adaptive SVGs for integration.

Can I create transparent PNGs for web interface components?

Yes, you can create transparent PNGs for web interface components by generating images and applying background removal to extract visual elements for direct component use or further SVG reconstruction.

Do I need API keys to generate images and analyze visuals?

Yes, you need LEONARDO_API_KEY and GEMINI_API_KEY configured in your environment to execute Leonardo Lucid Origin image generation workflows and perform Gemini vision analysis.

How does vision analysis improve SVG generation for UI design?

Vision analysis improves SVG generation by using Gemini to evaluate shapes, colors, and composition within generated images, driving iterative refinements for accurate hand-coded SVG recreation.

What's the best way to create theme-adaptive icons for React components?

Create theme-adaptive icons by generating configurable images, removing backgrounds to isolate assets, converting them to currentColor SVGs, and integrating them directly into React components for light and dark modes.

Can I generate bespoke visuals with specific dimensions and contrast?

Yes, you can generate bespoke visuals with configurable dimensions, style, and contrast for icons, state illustrations, wide backgrounds, and other product interface elements requiring theme adaptability.