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.