Skill UI

This workflow executes the primary Ideogram API calls for advanced text-to-image generation. Ideogram excels at rendering legible text within images, a crucial capability for creating realistic signs, menus, or branding elements. Use this for generating high-quality social media graphics, marketing banners, product mockups, and posters that require accurate and stylized typography combined with illustration.

This skill generates code to create complex, interactive 3D scenes and visualizations on the web using the Three.js library and WebGL. It covers the entire development lifecycle, including setting up the core components (Scene, Camera, Renderer), defining geometry, applying materials, adding lighting, and implementing animation loops. Ideal for web developers needing to display product mockups, scientific data visualizations, or immersive user experiences.

Generates high-fidelity mobile and web UI/UX mockups with atomic design principles, responsive layouts, and accessible design tokens via muapi.ai for product requirements that need professional wireframes or design systems.

Generates HTML5 Canvas-based breadboard mockups and diagrams for retro computing builds, showing component placement, wiring, and labeled 6502/555 timer layouts as visual references or teaching aids.

Leverages the Anima SDK to convert visual designs from Figma into production-ready code across multiple modern frameworks (React, Vue, HTML). It supports clean TypeScript integration and Tailwind CSS styling, making it ideal for developers building automated design-to-code pipelines or rapidly prototyping complex UI components directly from design mockups.

Expert skill for creating, editing, and optimizing marketing images using AI generation models (Flux, Midjourney, Ideogram, Gemini, etc.) and design tools. Covers blog heroes, social graphics, product mockups, banners, and brand assets with best practices for prompts, tool selection, and optimization.

Converts images such as design mockups or screenshots into code. This skill has moved to an external repository and only runs when explicitly invoked by name.

Create a single mobile app screen mockup framed in a realistic iPhone 15 Pro device. Use it for app UI concepts, phone screen previews, and prototype presentations.

A general-purpose tool for creating self-contained, professional web prototypes. Ideal for generating landing pages, marketing sites, or documentation mockups. It operates by assembling pre-engineered sections and adhering strictly to a defined design system, eliminating the need for custom CSS writing.

This skill provides a comprehensive workflow for generating, editing, and manipulating images using Google's Gemini Nano Banana Pro model (gemini-3-pro-image-preview). It is designed for tasks such as creating visuals, generating logos, modifying photos, or creating product mockups, offering a robust, file-based approach to handle complex image data and API interactions.

Unified design skill covering brand identity, design tokens, UI styling, AI logo generation, corporate identity programs, HTML presentations, banners, icons, and social media photos. Automates logo design, CIP mockups, slide decks, and multi-platform social images.

A high-fidelity template for designing a complete mobile application screen. This mockup is enclosed in a pixel-accurate iPhone 15 Pro frame and includes all essential UI elements: status bar, app header, main content area (supporting lists, feeds, or forms), and bottom tab bar. Features realistic elements like the Dynamic Island and safe-area padding, making it ideal for UI/UX design mockups and professional portfolio display.